Refactor branch/tag selector to Vue SFC (#23421)
Follow #23394
There were many bad smells in old code. This PR only moves the code into
Vue SFC, doesn't touch the unrelated logic.
update: after
5f23218c85
, there should be no usage of the vue-rumtime-compiler anymore
(hopefully), so I think this PR could close #19851
---------
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
wxiaoguang
GitHub
parent
d56bb74201
commit
ac8d71ff07
14 changed files with 359 additions and 309 deletions
|
|
@ -1,6 +1,20 @@
|
||||||
{{$release := .release}}
|
{{$defaultBranch := $.root.BranchName}}
|
||||||
{{$defaultBranch := $.root.BranchName}}{{if and .root.IsViewTag (not .noTag)}}{{$defaultBranch = .root.TagName}}{{end}}{{if eq $defaultBranch ""}}{{$defaultBranch = $.root.Repository.DefaultBranch}}{{end}}
|
{{if and .root.IsViewTag (not .noTag)}}
|
||||||
{{$type := ""}}{{if and .root.IsViewTag (not .noTag)}}{{$type = "tag"}}{{else if .root.IsViewBranch}}{{$type = "branch"}}{{else}}{{$type = "tree"}}{{end}}
|
{{$defaultBranch = .root.TagName}}
|
||||||
|
{{end}}
|
||||||
|
{{if eq $defaultBranch ""}}
|
||||||
|
{{$defaultBranch = $.root.Repository.DefaultBranch}}
|
||||||
|
{{end}}
|
||||||
|
|
||||||
|
{{$type := ""}}
|
||||||
|
{{if and .root.IsViewTag (not .noTag)}}
|
||||||
|
{{$type = "tag"}}
|
||||||
|
{{else if .root.IsViewBranch}}
|
||||||
|
{{$type = "branch"}}
|
||||||
|
{{else}}
|
||||||
|
{{$type = "tree"}}
|
||||||
|
{{end}}
|
||||||
|
|
||||||
{{$showBranchesInDropdown := not .root.HideBranchesInDropdown}}
|
{{$showBranchesInDropdown := not .root.HideBranchesInDropdown}}
|
||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
|
|
@ -30,8 +44,8 @@
|
||||||
'defaultBranch': {{$defaultBranch}},
|
'defaultBranch': {{$defaultBranch}},
|
||||||
'branchURLPrefix': '{{if .branchURLPrefix}}{{.branchURLPrefix}}{{else}}{{$.root.RepoLink}}/{{if $.root.PageIsCommits}}commits{{else}}src{{end}}/branch/{{end}}',
|
'branchURLPrefix': '{{if .branchURLPrefix}}{{.branchURLPrefix}}{{else}}{{$.root.RepoLink}}/{{if $.root.PageIsCommits}}commits{{else}}src{{end}}/branch/{{end}}',
|
||||||
'branchURLSuffix': '{{if .branchURLSuffix}}{{.branchURLSuffix}}{{else}}{{if $.root.TreePath}}/{{PathEscapeSegments $.root.TreePath}}{{end}}{{end}}',
|
'branchURLSuffix': '{{if .branchURLSuffix}}{{.branchURLSuffix}}{{else}}{{if $.root.TreePath}}/{{PathEscapeSegments $.root.TreePath}}{{end}}{{end}}',
|
||||||
'tagURLPrefix': '{{if .tagURLPrefix}}{{.tagURLPrefix}}{{else if $release}}{{$.root.RepoLink}}/compare/{{else}}{{$.root.RepoLink}}/{{if $.root.PageIsCommits}}commits{{else}}src{{end}}/tag/{{end}}',
|
'tagURLPrefix': '{{if .tagURLPrefix}}{{.tagURLPrefix}}{{else if .release}}{{$.root.RepoLink}}/compare/{{else}}{{$.root.RepoLink}}/{{if $.root.PageIsCommits}}commits{{else}}src{{end}}/tag/{{end}}',
|
||||||
'tagURLSuffix': '{{if .tagURLSuffix}}{{.tagURLSuffix}}{{else if $release}}...{{if $release.IsDraft}}{{PathEscapeSegments $release.Target}}{{else}}{{if $release.TagName}}{{PathEscapeSegments $release.TagName}}{{else}}{{PathEscapeSegments $release.Sha1}}{{end}}{{end}}{{else}}{{if $.root.TreePath}}/{{PathEscapeSegments $.root.TreePath}}{{end}}{{end}}',
|
'tagURLSuffix': '{{if .tagURLSuffix}}{{.tagURLSuffix}}{{else if .release}}...{{if .release.IsDraft}}{{PathEscapeSegments .release.Target}}{{else}}{{if .release.TagName}}{{PathEscapeSegments .release.TagName}}{{else}}{{PathEscapeSegments .release.Sha1}}{{end}}{{end}}{{else}}{{if $.root.TreePath}}/{{PathEscapeSegments $.root.TreePath}}{{end}}{{end}}',
|
||||||
'repoLink': {{.root.RepoLink}},
|
'repoLink': {{.root.RepoLink}},
|
||||||
'treePath': {{.root.TreePath}},
|
'treePath': {{.root.TreePath}},
|
||||||
'branchNameSubURL': {{.root.BranchNameSubURL}},
|
'branchNameSubURL': {{.root.BranchNameSubURL}},
|
||||||
|
|
@ -46,71 +60,23 @@
|
||||||
window.config.pageData.branchDropdownDataList.push(data);
|
window.config.pageData.branchDropdownDataList.push(data);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="fitted item choose reference">
|
<div class="fitted item js-branch-tag-selector">
|
||||||
|
{{/* show dummy elements before Vue componment is mounted, this code must match the code in BranchTagSelector.vue */}}
|
||||||
<div class="ui floating filter dropdown custom">
|
<div class="ui floating filter dropdown custom">
|
||||||
<button class="branch-dropdown-button gt-ellipsis ui basic small compact button gt-df" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
|
<button class="branch-dropdown-button gt-ellipsis ui basic small compact button gt-df">
|
||||||
<span class="text gt-df gt-ac gt-mr-2">
|
<span class="text gt-df gt-ac gt-mr-2">
|
||||||
{{/* v-cloak is used to hide unnecessary elements before Vue componment is mounted */}}
|
{{if .release}}
|
||||||
<span v-cloak v-if="release">${ textReleaseCompare }</span>
|
{{.root.locale.Tr "repo.release.compare"}}
|
||||||
<span :class="{visible: isViewTag}" v-if="isViewTag" {{if not (eq $type "tag")}}v-cloak{{end}}>{{svg "octicon-tag"}}</span>
|
{{else}}
|
||||||
<span :class="{visible: isViewBranch}" v-if="isViewBranch" {{if not (eq $type "branch")}}v-cloak{{end}}>{{svg "octicon-git-branch"}}</span>
|
{{if eq $type "tag"}}
|
||||||
<span :class="{visible: isViewTree}" v-if="isViewTree" {{if not (eq $type "tree")}}v-cloak{{end}}>{{svg "octicon-git-branch"}}</span>
|
{{svg "octicon-tag"}}
|
||||||
|
{{else}}
|
||||||
|
{{svg "octicon-git-branch"}}
|
||||||
|
{{end}}
|
||||||
<strong ref="dropdownRefName" class="gt-ml-3">{{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}}</strong>
|
<strong ref="dropdownRefName" class="gt-ml-3">{{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}}</strong>
|
||||||
|
{{end}}
|
||||||
</span>
|
</span>
|
||||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||||
</button>
|
</button>
|
||||||
<div class="menu transition" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
|
|
||||||
<div class="ui icon search input">
|
|
||||||
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
|
|
||||||
<input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder">
|
|
||||||
</div>
|
|
||||||
<template v-if="showBranchesInDropdown">
|
|
||||||
<div class="header branch-tag-choice">
|
|
||||||
<div class="ui grid">
|
|
||||||
<div class="two column row">
|
|
||||||
<a class="reference column" href="#" @click="createTag = false; mode = 'branches'; focusSearchField()">
|
|
||||||
<span class="text" :class="{black: mode === 'branches'}">
|
|
||||||
{{svg "octicon-git-branch" 16 "gt-mr-2"}}${ textBranches }
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<template v-if="!noTag">
|
|
||||||
<a class="reference column" href="#" @click="createTag = true; mode = 'tags'; focusSearchField()">
|
|
||||||
<span class="text" :class="{black: mode === 'tags'}">
|
|
||||||
{{svg "octicon-tag" 16 "gt-mr-2"}}${ textTags }
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div class="scrolling menu" ref="scrollContainer">
|
|
||||||
<div v-for="(item, index) in filteredItems" :key="item.name" class="item" :class="{selected: item.selected, active: active === index}" @click="selectItem(item)" :ref="'listItem' + index">${ item.name }</div>
|
|
||||||
<div class="item" v-if="showCreateNewBranch" :class="{active: active === filteredItems.length}" :ref="'listItem' + filteredItems.length">
|
|
||||||
<a href="#" @click="createNewBranch()">
|
|
||||||
<div v-show="createTag">
|
|
||||||
<i class="reference tags icon"></i>
|
|
||||||
<span v-html="textCreateTag.replace('%s', searchTerm)"></span>
|
|
||||||
</div>
|
|
||||||
<div v-show="!createTag">
|
|
||||||
{{svg "octicon-git-branch"}}
|
|
||||||
<span v-html="textCreateBranch.replace('%s', searchTerm)"></span>
|
|
||||||
</div>
|
|
||||||
<div class="text small">
|
|
||||||
<span v-if="isViewBranch || release">${ textCreateBranchFrom.replace('%s', branchName) }</span>
|
|
||||||
<span v-else-if="isViewTag">${ textCreateBranchFrom.replace('%s', tagName) }</span>
|
|
||||||
<span v-else>${ textCreateBranchFrom.replace('%s', commitIdShort) }</span>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<form ref="newBranchForm" action="{{.root.RepoLink}}/branches/_new/{{.root.BranchNameSubURL}}" method="post">
|
|
||||||
<input type="hidden" name="_csrf" :value="csrfToken">
|
|
||||||
<input type="hidden" name="new_branch_name" v-model="searchTerm">
|
|
||||||
<input type="hidden" name="create_tag" v-model="createTag">
|
|
||||||
<input type="hidden" name="current_path" v-model="treePath" v-if="treePath">
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="message" v-if="showNoResults">${ noResults }</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -73,7 +73,7 @@
|
||||||
<li v-for="repo in repos" :class="{'private': repo.private || repo.internal}" :key="repo.id">
|
<li v-for="repo in repos" :class="{'private': repo.private || repo.internal}" :key="repo.id">
|
||||||
<a class="repo-list-link gt-df gt-ac gt-sb" :href="repo.link">
|
<a class="repo-list-link gt-df gt-ac gt-sb" :href="repo.link">
|
||||||
<div class="item-name gt-df gt-ac gt-f1 gt-mr-2">
|
<div class="item-name gt-df gt-ac gt-f1 gt-mr-2">
|
||||||
<svg-icon :name="repoIcon(repo)" size="16" class-name="gt-mr-2"/>
|
<svg-icon :name="repoIcon(repo)" :size="16" class-name="gt-mr-2"/>
|
||||||
<div class="text gt-bold truncate gt-ml-1">{{ repo.full_name }}</div>
|
<div class="text gt-bold truncate gt-ml-1">{{ repo.full_name }}</div>
|
||||||
<span v-if="repo.archived">
|
<span v-if="repo.archived">
|
||||||
<svg-icon name="octicon-archive" :size="16" class-name="gt-ml-2"/>
|
<svg-icon name="octicon-archive" :size="16" class-name="gt-ml-2"/>
|
||||||
|
|
|
||||||
|
|
@ -10,8 +10,8 @@
|
||||||
-d '{"context": "test/context", "description": "description", "state": "${state}", "target_url": "http://localhost"}'
|
-d '{"context": "test/context", "description": "description", "state": "${state}", "target_url": "http://localhost"}'
|
||||||
-->
|
-->
|
||||||
<div>
|
<div>
|
||||||
<!-- eslint-disable -->
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||||
<div v-if="mergeForm.hasPendingPullRequestMerge" v-html="mergeForm.hasPendingPullRequestMergeTip" class="ui info message"></div>
|
<div v-if="mergeForm.hasPendingPullRequestMerge" v-html="mergeForm.hasPendingPullRequestMergeTip" class="ui info message"/>
|
||||||
|
|
||||||
<div class="ui form" v-if="showActionForm">
|
<div class="ui form" v-if="showActionForm">
|
||||||
<form :action="mergeForm.baseLink+'/merge'" method="post">
|
<form :action="mergeForm.baseLink+'/merge'" method="post">
|
||||||
|
|
@ -30,7 +30,8 @@
|
||||||
<button @click.prevent="clearMergeMessage" class="ui tertiary button">
|
<button @click.prevent="clearMergeMessage" class="ui tertiary button">
|
||||||
{{ mergeForm.textClearMergeMessage }}
|
{{ mergeForm.textClearMergeMessage }}
|
||||||
</button>
|
</button>
|
||||||
<div class="ui label"><!-- TODO: Convert to tooltip once we can use tooltips in Vue templates -->
|
<div class="ui label">
|
||||||
|
<!-- TODO: Convert to tooltip once we can use tooltips in Vue templates -->
|
||||||
{{ mergeForm.textClearMergeMessageHint }}
|
{{ mergeForm.textClearMergeMessageHint }}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,208 +0,0 @@
|
||||||
import {createApp, nextTick} from 'vue';
|
|
||||||
import $ from 'jquery';
|
|
||||||
|
|
||||||
export function initRepoBranchTagDropdown(selector) {
|
|
||||||
$(selector).each(function (dropdownIndex, elRoot) {
|
|
||||||
const data = {
|
|
||||||
csrfToken: window.config.csrfToken,
|
|
||||||
items: [],
|
|
||||||
searchTerm: '',
|
|
||||||
menuVisible: false,
|
|
||||||
createTag: false,
|
|
||||||
release: null,
|
|
||||||
|
|
||||||
isViewTag: false,
|
|
||||||
isViewBranch: false,
|
|
||||||
isViewTree: false,
|
|
||||||
|
|
||||||
active: 0,
|
|
||||||
|
|
||||||
...window.config.pageData.branchDropdownDataList[dropdownIndex],
|
|
||||||
};
|
|
||||||
|
|
||||||
// the "data.defaultBranch" is ambiguous, it could be "branch name" or "tag name"
|
|
||||||
|
|
||||||
if (data.showBranchesInDropdown && data.branches) {
|
|
||||||
for (const branch of data.branches) {
|
|
||||||
data.items.push({name: branch, url: branch, branch: true, tag: false, selected: branch === data.defaultBranch});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (!data.noTag && data.tags) {
|
|
||||||
for (const tag of data.tags) {
|
|
||||||
if (data.release) {
|
|
||||||
data.items.push({name: tag, url: tag, branch: false, tag: true, selected: tag === data.release.tagName});
|
|
||||||
} else {
|
|
||||||
data.items.push({name: tag, url: tag, branch: false, tag: true, selected: tag === data.defaultBranch});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const view = createApp({
|
|
||||||
delimiters: ['${', '}'],
|
|
||||||
data() {
|
|
||||||
return data;
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
filteredItems() {
|
|
||||||
const items = this.items.filter((item) => {
|
|
||||||
return ((this.mode === 'branches' && item.branch) || (this.mode === 'tags' && item.tag)) &&
|
|
||||||
(!this.searchTerm || item.name.toLowerCase().includes(this.searchTerm.toLowerCase()));
|
|
||||||
});
|
|
||||||
|
|
||||||
// no idea how to fix this so linting rule is disabled instead
|
|
||||||
this.active = (items.length === 0 && this.showCreateNewBranch ? 0 : -1); // eslint-disable-line vue/no-side-effects-in-computed-properties
|
|
||||||
return items;
|
|
||||||
},
|
|
||||||
showNoResults() {
|
|
||||||
return this.filteredItems.length === 0 && !this.showCreateNewBranch;
|
|
||||||
},
|
|
||||||
showCreateNewBranch() {
|
|
||||||
if (this.disableCreateBranch || !this.searchTerm) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.items.filter((item) => item.name.toLowerCase() === this.searchTerm.toLowerCase()).length === 0;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
menuVisible(visible) {
|
|
||||||
if (visible) {
|
|
||||||
this.focusSearchField();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeMount() {
|
|
||||||
switch (data.viewType) {
|
|
||||||
case 'tree':
|
|
||||||
this.isViewTree = true;
|
|
||||||
break;
|
|
||||||
case 'tag':
|
|
||||||
this.isViewTag = true;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
this.isViewBranch = true;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
document.body.addEventListener('click', (event) => {
|
|
||||||
if (elRoot.contains(event.target)) return;
|
|
||||||
if (this.menuVisible) {
|
|
||||||
this.menuVisible = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
selectItem(item) {
|
|
||||||
const prev = this.getSelected();
|
|
||||||
if (prev !== null) {
|
|
||||||
prev.selected = false;
|
|
||||||
}
|
|
||||||
item.selected = true;
|
|
||||||
const url = (item.tag) ? this.tagURLPrefix + item.url + this.tagURLSuffix : this.branchURLPrefix + item.url + this.branchURLSuffix;
|
|
||||||
if (!this.branchForm) {
|
|
||||||
window.location.href = url;
|
|
||||||
} else {
|
|
||||||
this.isViewTree = false;
|
|
||||||
this.isViewTag = false;
|
|
||||||
this.isViewBranch = false;
|
|
||||||
this.$refs.dropdownRefName.textContent = item.name;
|
|
||||||
if (this.setAction) {
|
|
||||||
$(`#${this.branchForm}`).attr('action', url);
|
|
||||||
} else {
|
|
||||||
$(`#${this.branchForm} input[name="refURL"]`).val(url);
|
|
||||||
}
|
|
||||||
$(`#${this.branchForm} input[name="ref"]`).val(item.name);
|
|
||||||
if (item.tag) {
|
|
||||||
this.isViewTag = true;
|
|
||||||
$(`#${this.branchForm} input[name="refType"]`).val('tag');
|
|
||||||
} else {
|
|
||||||
this.isViewBranch = true;
|
|
||||||
$(`#${this.branchForm} input[name="refType"]`).val('branch');
|
|
||||||
}
|
|
||||||
if (this.submitForm) {
|
|
||||||
$(`#${this.branchForm}`).trigger('submit');
|
|
||||||
}
|
|
||||||
this.menuVisible = false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
createNewBranch() {
|
|
||||||
if (!this.showCreateNewBranch) return;
|
|
||||||
$(this.$refs.newBranchForm).trigger('submit');
|
|
||||||
},
|
|
||||||
focusSearchField() {
|
|
||||||
nextTick(() => {
|
|
||||||
this.$refs.searchField.focus();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
getSelected() {
|
|
||||||
for (let i = 0, j = this.items.length; i < j; ++i) {
|
|
||||||
if (this.items[i].selected) return this.items[i];
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
getSelectedIndexInFiltered() {
|
|
||||||
for (let i = 0, j = this.filteredItems.length; i < j; ++i) {
|
|
||||||
if (this.filteredItems[i].selected) return i;
|
|
||||||
}
|
|
||||||
return -1;
|
|
||||||
},
|
|
||||||
scrollToActive() {
|
|
||||||
let el = this.$refs[`listItem${this.active}`];
|
|
||||||
if (!el || !el.length) return;
|
|
||||||
if (Array.isArray(el)) {
|
|
||||||
el = el[0];
|
|
||||||
}
|
|
||||||
|
|
||||||
const cont = this.$refs.scrollContainer;
|
|
||||||
if (el.offsetTop < cont.scrollTop) {
|
|
||||||
cont.scrollTop = el.offsetTop;
|
|
||||||
} else if (el.offsetTop + el.clientHeight > cont.scrollTop + cont.clientHeight) {
|
|
||||||
cont.scrollTop = el.offsetTop + el.clientHeight - cont.clientHeight;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
keydown(event) {
|
|
||||||
if (event.keyCode === 40) { // arrow down
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
if (this.active === -1) {
|
|
||||||
this.active = this.getSelectedIndexInFiltered();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.active + (this.showCreateNewBranch ? 0 : 1) >= this.filteredItems.length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.active++;
|
|
||||||
this.scrollToActive();
|
|
||||||
} else if (event.keyCode === 38) { // arrow up
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
if (this.active === -1) {
|
|
||||||
this.active = this.getSelectedIndexInFiltered();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.active <= 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.active--;
|
|
||||||
this.scrollToActive();
|
|
||||||
} else if (event.keyCode === 13) { // enter
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
if (this.active >= this.filteredItems.length) {
|
|
||||||
this.createNewBranch();
|
|
||||||
} else if (this.active >= 0) {
|
|
||||||
this.selectItem(this.filteredItems[this.active]);
|
|
||||||
}
|
|
||||||
} else if (event.keyCode === 27) { // escape
|
|
||||||
event.preventDefault();
|
|
||||||
this.menuVisible = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
view.mount(this);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
293
web_src/js/components/RepoBranchTagSelector.vue
Normal file
293
web_src/js/components/RepoBranchTagSelector.vue
Normal file
|
|
@ -0,0 +1,293 @@
|
||||||
|
<template>
|
||||||
|
<div class="ui floating filter dropdown custom">
|
||||||
|
<button class="branch-dropdown-button gt-ellipsis ui basic small compact button gt-df" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
|
||||||
|
<span class="text gt-df gt-ac gt-mr-2">
|
||||||
|
<template v-if="release">{{ textReleaseCompare }}</template>
|
||||||
|
<template v-else>
|
||||||
|
<svg-icon v-if="isViewTag" name="octicon-tag" />
|
||||||
|
<svg-icon v-else name="octicon-git-branch"/>
|
||||||
|
<strong ref="dropdownRefName" class="gt-ml-3">{{ refNameText }}</strong>
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
<svg-icon name="octicon-triangle-down" :size="14" class-name="dropdown icon"/>
|
||||||
|
</button>
|
||||||
|
<div class="menu transition" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
|
||||||
|
<div class="ui icon search input">
|
||||||
|
<i class="icon gt-df gt-ac gt-jc gt-m-0"><svg-icon name="octicon-filter" :size="16"/></i>
|
||||||
|
<input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder">
|
||||||
|
</div>
|
||||||
|
<template v-if="showBranchesInDropdown">
|
||||||
|
<div class="header branch-tag-choice">
|
||||||
|
<div class="ui grid">
|
||||||
|
<div class="two column row">
|
||||||
|
<a class="reference column" href="#" @click="createTag = false; mode = 'branches'; focusSearchField()">
|
||||||
|
<span class="text" :class="{black: mode === 'branches'}">
|
||||||
|
<svg-icon name="octicon-git-branch" :size="16" class-name="gt-mr-2"/>{{ textBranches }}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<template v-if="!noTag">
|
||||||
|
<a class="reference column" href="#" @click="createTag = true; mode = 'tags'; focusSearchField()">
|
||||||
|
<span class="text" :class="{black: mode === 'tags'}">
|
||||||
|
<svg-icon name="octicon-tag" :size="16" class-name="gt-mr-2"/>{{ textTags }}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="scrolling menu" ref="scrollContainer">
|
||||||
|
<div v-for="(item, index) in filteredItems" :key="item.name" class="item" :class="{selected: item.selected, active: active === index}" @click="selectItem(item)" :ref="'listItem' + index">
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
<div class="item" v-if="showCreateNewBranch" :class="{active: active === filteredItems.length}" :ref="'listItem' + filteredItems.length">
|
||||||
|
<a href="#" @click="createNewBranch()">
|
||||||
|
<div v-show="createTag">
|
||||||
|
<i class="reference tags icon"/>
|
||||||
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||||
|
<span v-html="textCreateTag.replace('%s', searchTerm)"/>
|
||||||
|
</div>
|
||||||
|
<div v-show="!createTag">
|
||||||
|
<svg-icon name="octicon-git-branch"/>
|
||||||
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||||
|
<span v-html="textCreateBranch.replace('%s', searchTerm)"/>
|
||||||
|
</div>
|
||||||
|
<div class="text small">
|
||||||
|
<span v-if="isViewBranch || release">{{ textCreateBranchFrom.replace('%s', branchName) }}</span>
|
||||||
|
<span v-else-if="isViewTag">{{ textCreateBranchFrom.replace('%s', tagName) }}</span>
|
||||||
|
<span v-else>{{ textCreateBranchFrom.replace('%s', commitIdShort) }}</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<form ref="newBranchForm" :action="formActionUrl" method="post">
|
||||||
|
<input type="hidden" name="_csrf" :value="csrfToken">
|
||||||
|
<input type="hidden" name="new_branch_name" v-model="searchTerm">
|
||||||
|
<input type="hidden" name="create_tag" v-model="createTag">
|
||||||
|
<input type="hidden" name="current_path" v-model="treePath" v-if="treePath">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="message" v-if="showNoResults">
|
||||||
|
{{ noResults }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {createApp, nextTick} from 'vue';
|
||||||
|
import $ from 'jquery';
|
||||||
|
import {SvgIcon} from '../svg.js';
|
||||||
|
import {pathEscapeSegments} from '../utils/url.js';
|
||||||
|
|
||||||
|
const sfc = {
|
||||||
|
components: {SvgIcon},
|
||||||
|
|
||||||
|
// no `data()`, at the moment, the `data()` is provided by the init code, which is not ideal and should be fixed in the future
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
filteredItems() {
|
||||||
|
const items = this.items.filter((item) => {
|
||||||
|
return ((this.mode === 'branches' && item.branch) || (this.mode === 'tags' && item.tag)) &&
|
||||||
|
(!this.searchTerm || item.name.toLowerCase().includes(this.searchTerm.toLowerCase()));
|
||||||
|
});
|
||||||
|
|
||||||
|
// TODO: fix this anti-pattern: side-effects-in-computed-properties
|
||||||
|
this.active = (items.length === 0 && this.showCreateNewBranch ? 0 : -1);
|
||||||
|
return items;
|
||||||
|
},
|
||||||
|
showNoResults() {
|
||||||
|
return this.filteredItems.length === 0 && !this.showCreateNewBranch;
|
||||||
|
},
|
||||||
|
showCreateNewBranch() {
|
||||||
|
if (this.disableCreateBranch || !this.searchTerm) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return this.items.filter((item) => item.name.toLowerCase() === this.searchTerm.toLowerCase()).length === 0;
|
||||||
|
},
|
||||||
|
formActionUrl() {
|
||||||
|
return `${this.repoLink}/branches/_new/${pathEscapeSegments(this.branchNameSubURL)}`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
menuVisible(visible) {
|
||||||
|
if (visible) {
|
||||||
|
this.focusSearchField();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeMount() {
|
||||||
|
if (this.viewType === 'tree') {
|
||||||
|
this.isViewTree = true;
|
||||||
|
this.refNameText = this.commitIdShort;
|
||||||
|
} else if (this.viewType === 'tag') {
|
||||||
|
this.isViewTag = true;
|
||||||
|
this.refNameText = this.tagName;
|
||||||
|
} else {
|
||||||
|
this.isViewBranch = true;
|
||||||
|
this.refNameText = this.branchName;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.addEventListener('click', (event) => {
|
||||||
|
if (this.$el.contains(event.target)) return;
|
||||||
|
if (this.menuVisible) {
|
||||||
|
this.menuVisible = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
selectItem(item) {
|
||||||
|
const prev = this.getSelected();
|
||||||
|
if (prev !== null) {
|
||||||
|
prev.selected = false;
|
||||||
|
}
|
||||||
|
item.selected = true;
|
||||||
|
const url = (item.tag) ? this.tagURLPrefix + item.url + this.tagURLSuffix : this.branchURLPrefix + item.url + this.branchURLSuffix;
|
||||||
|
if (!this.branchForm) {
|
||||||
|
window.location.href = url;
|
||||||
|
} else {
|
||||||
|
this.isViewTree = false;
|
||||||
|
this.isViewTag = false;
|
||||||
|
this.isViewBranch = false;
|
||||||
|
this.$refs.dropdownRefName.textContent = item.name;
|
||||||
|
if (this.setAction) {
|
||||||
|
$(`#${this.branchForm}`).attr('action', url);
|
||||||
|
} else {
|
||||||
|
$(`#${this.branchForm} input[name="refURL"]`).val(url);
|
||||||
|
}
|
||||||
|
$(`#${this.branchForm} input[name="ref"]`).val(item.name);
|
||||||
|
if (item.tag) {
|
||||||
|
this.isViewTag = true;
|
||||||
|
$(`#${this.branchForm} input[name="refType"]`).val('tag');
|
||||||
|
} else {
|
||||||
|
this.isViewBranch = true;
|
||||||
|
$(`#${this.branchForm} input[name="refType"]`).val('branch');
|
||||||
|
}
|
||||||
|
if (this.submitForm) {
|
||||||
|
$(`#${this.branchForm}`).trigger('submit');
|
||||||
|
}
|
||||||
|
this.menuVisible = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
createNewBranch() {
|
||||||
|
if (!this.showCreateNewBranch) return;
|
||||||
|
$(this.$refs.newBranchForm).trigger('submit');
|
||||||
|
},
|
||||||
|
focusSearchField() {
|
||||||
|
nextTick(() => {
|
||||||
|
this.$refs.searchField.focus();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getSelected() {
|
||||||
|
for (let i = 0, j = this.items.length; i < j; ++i) {
|
||||||
|
if (this.items[i].selected) return this.items[i];
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
getSelectedIndexInFiltered() {
|
||||||
|
for (let i = 0, j = this.filteredItems.length; i < j; ++i) {
|
||||||
|
if (this.filteredItems[i].selected) return i;
|
||||||
|
}
|
||||||
|
return -1;
|
||||||
|
},
|
||||||
|
scrollToActive() {
|
||||||
|
let el = this.$refs[`listItem${this.active}`];
|
||||||
|
if (!el || !el.length) return;
|
||||||
|
if (Array.isArray(el)) {
|
||||||
|
el = el[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
const cont = this.$refs.scrollContainer;
|
||||||
|
if (el.offsetTop < cont.scrollTop) {
|
||||||
|
cont.scrollTop = el.offsetTop;
|
||||||
|
} else if (el.offsetTop + el.clientHeight > cont.scrollTop + cont.clientHeight) {
|
||||||
|
cont.scrollTop = el.offsetTop + el.clientHeight - cont.clientHeight;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
keydown(event) {
|
||||||
|
if (event.keyCode === 40) { // arrow down
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
if (this.active === -1) {
|
||||||
|
this.active = this.getSelectedIndexInFiltered();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.active + (this.showCreateNewBranch ? 0 : 1) >= this.filteredItems.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.active++;
|
||||||
|
this.scrollToActive();
|
||||||
|
} else if (event.keyCode === 38) { // arrow up
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
if (this.active === -1) {
|
||||||
|
this.active = this.getSelectedIndexInFiltered();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.active <= 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.active--;
|
||||||
|
this.scrollToActive();
|
||||||
|
} else if (event.keyCode === 13) { // enter
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
if (this.active >= this.filteredItems.length) {
|
||||||
|
this.createNewBranch();
|
||||||
|
} else if (this.active >= 0) {
|
||||||
|
this.selectItem(this.filteredItems[this.active]);
|
||||||
|
}
|
||||||
|
} else if (event.keyCode === 27) { // escape
|
||||||
|
event.preventDefault();
|
||||||
|
this.menuVisible = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export function initRepoBranchTagSelector(selector) {
|
||||||
|
for (const [elIndex, elRoot] of document.querySelectorAll(selector).entries()) {
|
||||||
|
const data = {
|
||||||
|
csrfToken: window.config.csrfToken,
|
||||||
|
items: [],
|
||||||
|
searchTerm: '',
|
||||||
|
refNameText: '',
|
||||||
|
menuVisible: false,
|
||||||
|
createTag: false,
|
||||||
|
release: null,
|
||||||
|
|
||||||
|
isViewTag: false,
|
||||||
|
isViewBranch: false,
|
||||||
|
isViewTree: false,
|
||||||
|
|
||||||
|
active: 0,
|
||||||
|
|
||||||
|
...window.config.pageData.branchDropdownDataList[elIndex],
|
||||||
|
};
|
||||||
|
|
||||||
|
// the "data.defaultBranch" is ambiguous, it could be "branch name" or "tag name"
|
||||||
|
|
||||||
|
if (data.showBranchesInDropdown && data.branches) {
|
||||||
|
for (const branch of data.branches) {
|
||||||
|
data.items.push({name: branch, url: branch, branch: true, tag: false, selected: branch === data.defaultBranch});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!data.noTag && data.tags) {
|
||||||
|
for (const tag of data.tags) {
|
||||||
|
if (data.release) {
|
||||||
|
data.items.push({name: tag, url: tag, branch: false, tag: true, selected: tag === data.release.tagName});
|
||||||
|
} else {
|
||||||
|
data.items.push({name: tag, url: tag, branch: false, tag: true, selected: tag === data.defaultBranch});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const comp = {...sfc, data() { return data }};
|
||||||
|
createApp(comp).mount(elRoot);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default sfc; // activate IDE's Vue plugin
|
||||||
|
</script>
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import {svg} from '../svg.js';
|
import {svg} from '../svg.js';
|
||||||
import {toggleElem} from '../utils/dom.js';
|
import {toggleElem} from '../utils/dom.js';
|
||||||
|
import {pathEscapeSegments} from '../utils/url.js';
|
||||||
|
|
||||||
const {csrf} = window.config;
|
const {csrf} = window.config;
|
||||||
|
|
||||||
|
|
@ -73,10 +74,6 @@ export function filterRepoFilesWeighted(files, filter) {
|
||||||
return filterResult;
|
return filterResult;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function escapePath(s) {
|
|
||||||
return s.split('/').map(encodeURIComponent).join('/');
|
|
||||||
}
|
|
||||||
|
|
||||||
function filterRepoFiles(filter) {
|
function filterRepoFiles(filter) {
|
||||||
const treeLink = $repoFindFileInput.attr('data-url-tree-link');
|
const treeLink = $repoFindFileInput.attr('data-url-tree-link');
|
||||||
$repoFindFileTableBody.empty();
|
$repoFindFileTableBody.empty();
|
||||||
|
|
@ -88,7 +85,7 @@ function filterRepoFiles(filter) {
|
||||||
for (const r of filterResult) {
|
for (const r of filterResult) {
|
||||||
const $row = $(tmplRow);
|
const $row = $(tmplRow);
|
||||||
const $a = $row.find('a');
|
const $a = $row.find('a');
|
||||||
$a.attr('href', `${treeLink}/${escapePath(r.matchResult.join(''))}`);
|
$a.attr('href', `${treeLink}/${pathEscapeSegments(r.matchResult.join(''))}`);
|
||||||
const $octiconFile = $(svg('octicon-file')).addClass('gt-mr-3');
|
const $octiconFile = $(svg('octicon-file')).addClass('gt-mr-3');
|
||||||
$a.append($octiconFile);
|
$a.append($octiconFile);
|
||||||
// if the target file path is "abc/xyz", to search "bx", then the matchResult is ['a', 'b', 'c/', 'x', 'yz']
|
// if the target file path is "abc/xyz", to search "bx", then the matchResult is ['a', 'b', 'c/', 'x', 'yz']
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import {describe, expect, test} from 'vitest';
|
import {describe, expect, test} from 'vitest';
|
||||||
import {strSubMatch, calcMatchedWeight, filterRepoFilesWeighted, escapePath} from './repo-findfile.js';
|
import {strSubMatch, calcMatchedWeight, filterRepoFilesWeighted} from './repo-findfile.js';
|
||||||
|
|
||||||
describe('Repo Find Files', () => {
|
describe('Repo Find Files', () => {
|
||||||
test('strSubMatch', () => {
|
test('strSubMatch', () => {
|
||||||
|
|
@ -32,9 +32,4 @@ describe('Repo Find Files', () => {
|
||||||
expect(res).toHaveLength(2);
|
expect(res).toHaveLength(2);
|
||||||
expect(res[0].matchResult).toEqual(['', 'word', '.txt']);
|
expect(res[0].matchResult).toEqual(['', 'word', '.txt']);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('escapePath', () => {
|
|
||||||
expect(escapePath('a/b/c')).toEqual('a/b/c');
|
|
||||||
expect(escapePath('a/b/ c')).toEqual('a/b/%20c');
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ import {
|
||||||
import {initUnicodeEscapeButton} from './repo-unicode-escape.js';
|
import {initUnicodeEscapeButton} from './repo-unicode-escape.js';
|
||||||
import {svg} from '../svg.js';
|
import {svg} from '../svg.js';
|
||||||
import {htmlEscape} from 'escape-goat';
|
import {htmlEscape} from 'escape-goat';
|
||||||
import {initRepoBranchTagDropdown} from '../components/RepoBranchTagDropdown.js';
|
import {initRepoBranchTagSelector} from '../components/RepoBranchTagSelector.vue';
|
||||||
import {
|
import {
|
||||||
initRepoCloneLink, initRepoCommonBranchOrTagDropdown, initRepoCommonFilterSearchDropdown,
|
initRepoCloneLink, initRepoCommonBranchOrTagDropdown, initRepoCommonFilterSearchDropdown,
|
||||||
initRepoCommonLanguageStats,
|
initRepoCommonLanguageStats,
|
||||||
|
|
@ -486,7 +486,7 @@ export function initRepository() {
|
||||||
// File list and commits
|
// File list and commits
|
||||||
if ($('.repository.file.list').length > 0 || $('.branch-dropdown').length > 0 ||
|
if ($('.repository.file.list').length > 0 || $('.branch-dropdown').length > 0 ||
|
||||||
$('.repository.commits').length > 0 || $('.repository.release').length > 0) {
|
$('.repository.commits').length > 0 || $('.repository.release').length > 0) {
|
||||||
initRepoBranchTagDropdown('.choose.reference .ui.dropdown');
|
initRepoBranchTagSelector('.js-branch-tag-selector');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Wiki
|
// Wiki
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
import {h} from 'vue';
|
||||||
import octiconChevronDown from '../../public/img/svg/octicon-chevron-down.svg';
|
import octiconChevronDown from '../../public/img/svg/octicon-chevron-down.svg';
|
||||||
import octiconChevronRight from '../../public/img/svg/octicon-chevron-right.svg';
|
import octiconChevronRight from '../../public/img/svg/octicon-chevron-right.svg';
|
||||||
import octiconClock from '../../public/img/svg/octicon-clock.svg';
|
import octiconClock from '../../public/img/svg/octicon-clock.svg';
|
||||||
|
|
@ -40,6 +41,8 @@ import giteaDoubleChevronLeft from '../../public/img/svg/gitea-double-chevron-le
|
||||||
import giteaDoubleChevronRight from '../../public/img/svg/gitea-double-chevron-right.svg';
|
import giteaDoubleChevronRight from '../../public/img/svg/gitea-double-chevron-right.svg';
|
||||||
import octiconChevronLeft from '../../public/img/svg/octicon-chevron-left.svg';
|
import octiconChevronLeft from '../../public/img/svg/octicon-chevron-left.svg';
|
||||||
import octiconOrganization from '../../public/img/svg/octicon-organization.svg';
|
import octiconOrganization from '../../public/img/svg/octicon-organization.svg';
|
||||||
|
import octiconTag from '../../public/img/svg/octicon-tag.svg';
|
||||||
|
import octiconGitBranch from '../../public/img/svg/octicon-git-branch.svg';
|
||||||
|
|
||||||
const svgs = {
|
const svgs = {
|
||||||
'octicon-blocked': octiconBlocked,
|
'octicon-blocked': octiconBlocked,
|
||||||
|
|
@ -84,9 +87,13 @@ const svgs = {
|
||||||
'gitea-double-chevron-right': giteaDoubleChevronRight,
|
'gitea-double-chevron-right': giteaDoubleChevronRight,
|
||||||
'octicon-chevron-left': octiconChevronLeft,
|
'octicon-chevron-left': octiconChevronLeft,
|
||||||
'octicon-organization': octiconOrganization,
|
'octicon-organization': octiconOrganization,
|
||||||
|
'octicon-tag': octiconTag,
|
||||||
|
'octicon-git-branch': octiconGitBranch,
|
||||||
};
|
};
|
||||||
|
|
||||||
// TODO: use a more general approach to access SVG icons. At the moment, developers must check, pick and fill the names manually, most of the SVG icons in assets couldn't be used directly.
|
// TODO: use a more general approach to access SVG icons.
|
||||||
|
// At the moment, developers must check, pick and fill the names manually,
|
||||||
|
// most of the SVG icons in assets couldn't be used directly.
|
||||||
|
|
||||||
const parser = new DOMParser();
|
const parser = new DOMParser();
|
||||||
const serializer = new XMLSerializer();
|
const serializer = new XMLSerializer();
|
||||||
|
|
@ -112,12 +119,7 @@ export const SvgIcon = {
|
||||||
size: {type: Number, default: 16},
|
size: {type: Number, default: 16},
|
||||||
className: {type: String, default: ''},
|
className: {type: String, default: ''},
|
||||||
},
|
},
|
||||||
|
render() {
|
||||||
computed: {
|
return h('span', {innerHTML: svg(this.name, this.size, this.className)});
|
||||||
svg() {
|
|
||||||
return svg(this.name, this.size, this.className);
|
|
||||||
},
|
},
|
||||||
},
|
|
||||||
|
|
||||||
template: `<span v-html="svg" />`
|
|
||||||
};
|
};
|
||||||
|
|
|
||||||
3
web_src/js/utils/url.js
Normal file
3
web_src/js/utils/url.js
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
export function pathEscapeSegments(s) {
|
||||||
|
return s.split('/').map(encodeURIComponent).join('/');
|
||||||
|
}
|
||||||
7
web_src/js/utils/url.test.js
Normal file
7
web_src/js/utils/url.test.js
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import {expect, test} from 'vitest';
|
||||||
|
import {pathEscapeSegments} from './url.js';
|
||||||
|
|
||||||
|
test('pathEscapeSegments', () => {
|
||||||
|
expect(pathEscapeSegments('a/b/c')).toEqual('a/b/c');
|
||||||
|
expect(pathEscapeSegments('a/b/ c')).toEqual('a/b/%20c');
|
||||||
|
});
|
||||||
|
|
@ -1924,10 +1924,6 @@ footer {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
[v-cloak] {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.repos-search {
|
.repos-search {
|
||||||
padding-bottom: 0 !important;
|
padding-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -222,12 +222,6 @@
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.choose.reference {
|
|
||||||
.header .icon {
|
|
||||||
font-size: 1.4em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.repo-path {
|
.repo-path {
|
||||||
|
|
||||||
.section,
|
.section,
|
||||||
|
|
|
||||||
|
|
@ -196,6 +196,10 @@ export default {
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
|
new webpack.DefinePlugin({
|
||||||
|
__VUE_OPTIONS_API__: true, // at the moment, many Vue components still use the Vue Options API
|
||||||
|
__VUE_PROD_DEVTOOLS__: false, // do not enable devtools support in production
|
||||||
|
}),
|
||||||
new VueLoaderPlugin(),
|
new VueLoaderPlugin(),
|
||||||
new MiniCssExtractPlugin({
|
new MiniCssExtractPlugin({
|
||||||
filename: 'css/[name].css',
|
filename: 'css/[name].css',
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue