#94 [profile] better flags widget interface

This commit is contained in:
Andrea Vos 2020-11-09 22:13:18 +01:00
parent 5644b01f70
commit 399635908a
2 changed files with 26 additions and 2 deletions

View File

@ -7,13 +7,33 @@
<slot v-bind:v="val" v-bind:desc="options[val]">
{{ val }}
</slot>
<a href="#" class="text-danger" @click.prevent="$emit('input', iVal.filter(v => v !== val))">
<Icon v="times"/>
</a>
</a>
</li>
<li slot="footer" class="list-inline-item py-1">
<div class="input-group">
<input v-model="search" class="form-control form-control-sm" :placeholder="$t('crud.search')"/>
<div class="input-group-append">
<button v-if="search" type="button" class="btn btn-light btn-sm border text-danger" @click.prevent="search = ''">
<Icon v="times"/>
</button>
<button v-if="all" type="button" class="btn btn-light btn-sm border" @click.prevent="all = false">
<Icon v="caret-up"/>
</button>
<button v-else type="button" class="btn btn-light btn-sm border" @click.prevent="all = true">
<Icon v="caret-down"/>
</button>
</div>
</div>
</li>
</draggable>
<draggable tag="ul" v-model="remainingOptions" ghostClass="ghost" @end="$emit('input', iVal)" class="list-inline" :group="ulid">
<li v-for="val in remainingOptions" class="list-inline-item py-1">
<a href="#" class="badge badge-light p-2" @click.prevent>
<li v-for="val in remainingOptions" v-if="all || (search && options[val].toLowerCase().includes(search))" class="list-inline-item py-1">
<a href="#" class="badge badge-light p-2" @click.prevent="$emit('input', [...iVal, val])">
<slot v-bind:v="val" v-bind:desc="options[val]">
{{ val }}
</slot>
@ -40,12 +60,15 @@
iVal: this.value,
remainingOptions: this.buildRemainingOptions(),
ulid: ulid(),
search: '',
all: false,
}
},
watch: {
value() {
this.iVal = this.value;
this.remainingOptions = this.buildRemainingOptions();
this.search = '';
},
},
methods: {

View File

@ -765,6 +765,7 @@ crud:
add: 'Dodaj'
filter: 'Filtruj'
filterLong: 'Filtruj listę…'
search: 'Szukaj…'
beta: >
Strona jest w wersji βeta!