Browse Source

Move creation of new items to the bottom of the multiselect list

pull/538/head
kolaente 2 weeks ago
parent
commit
3dbd36eef7
Signed by: konrad GPG Key ID: F40E70337AB24C9B
  1. 59
      src/components/input/multiselect.vue
  2. 1
      src/components/tasks/partials/editLabels.vue

59
src/components/input/multiselect.vue

@ -26,7 +26,7 @@
@keyup="search"
@keyup.enter.exact.prevent="() => createOrSelectOnEnter()"
:placeholder="placeholder"
@keydown.down.exact.prevent="() => preSelect(0, true)"
@keydown.down.exact.prevent="() => preSelect(0)"
ref="searchInput"
@focus="() => showSearchResults = true"
/>
@ -36,42 +36,42 @@
<transition name="fade">
<div class="search-results" :class="{'search-results-inline': inline}" v-if="searchResultsVisible">
<button
v-if="creatableAvailable"
class="is-fullwidth"
ref="result--1"
@keydown.up.prevent="() => preSelect(-2)"
@keydown.down.prevent="() => preSelect(0)"
@keyup.enter.prevent="create"
@click.prevent.stop="create"
v-for="(data, key) in filteredSearchResults"
:key="key"
:ref="`result-${key}`"
@keydown.up.prevent="() => preSelect(key - 1)"
@keydown.down.prevent="() => preSelect(key + 1)"
@click.prevent.stop="() => select(data)"
>
<span>
<slot name="searchResult" :option="query">
<span class="search-result">
{{ query }}
</span>
<slot name="searchResult" :option="data">
<span class="search-result">{{ label !== '' ? data[label] : data }}</span>
</slot>
</span>
<span class="hint-text">
{{ createPlaceholder }}
{{ selectPlaceholder }}
</span>
</button>
<button
v-if="creatableAvailable"
class="is-fullwidth"
v-for="(data, key) in filteredSearchResults"
:key="key"
:ref="`result-${key}`"
@keydown.up.prevent="() => preSelect(key - 1)"
@keydown.down.prevent="() => preSelect(key + 1)"
@click.prevent.stop="() => select(data)"
:ref="`result-${filteredSearchResults.length}`"
@keydown.up.prevent="() => preSelect(filteredSearchResults.length - 1)"
@keydown.down.prevent="() => preSelect(filteredSearchResults.length + 1)"
@keyup.enter.prevent="create"
@click.prevent.stop="create"
>
<span>
<slot name="searchResult" :option="data">
<span class="search-result">{{ label !== '' ? data[label] : data }}</span>
<slot name="searchResult" :option="query">
<span class="search-result">
{{ query }}
</span>
</slot>
</span>
<span class="hint-text">
{{ selectPlaceholder }}
{{ createPlaceholder }}
</span>
</button>
</div>
@ -202,14 +202,14 @@ export default {
},
computed: {
searchResultsVisible() {
if(this.query === '' && !this.showEmpty) {
if (this.query === '' && !this.showEmpty) {
return false
}
return this.showSearchResults && (
(this.filteredSearchResults.length > 0) ||
(this.creatable && this.query !== '')
)
(this.filteredSearchResults.length > 0) ||
(this.creatable && this.query !== '')
)
},
creatableAvailable() {
return this.creatable && this.query !== '' && !this.filteredSearchResults.some(elem => {
@ -295,13 +295,8 @@ export default {
this.query = this.label !== '' ? object[this.label] : object
},
preSelect(index, lookForCreatable = false) {
if (index === 0 && this.creatable && lookForCreatable) {
index = -1
}
if (index < -1) {
preSelect(index) {
if (index < 0) {
this.$refs.searchInput.focus()
return
}

1
src/components/tasks/partials/editLabels.vue

@ -11,6 +11,7 @@
@create="createAndAddLabel"
create-placeholder="Add this as new label"
v-model="labels"
:search-delay="10"
>
<template v-slot:tag="props">
<span

Loading…
Cancel
Save