92 lines
3.1 KiB
Vue
92 lines
3.1 KiB
Vue
<template>
|
|
<div>
|
|
<draggable tag="ul" v-model="iVal" ghostClass="ghost" @end="$emit('input', iVal)" :group="ulid"
|
|
class="list-inline border rounded drop-empty px-3 py-2">
|
|
<li v-for="val in iVal" :key="val" v-if="options[val]" class="list-inline-item py-1">
|
|
<a href="#" class="badge bg-light text-dark border p-2" @click.prevent="$emit('input', iVal.filter(v => v !== val))">
|
|
<slot v-bind:v="val" v-bind:desc="options[val]">
|
|
{{ val }}
|
|
</slot>
|
|
<span class="text-danger">
|
|
<Icon v="times"/>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</draggable>
|
|
<div class="input-group py-1">
|
|
<input v-model="search" class="form-control" :placeholder="$t('crud.search')"/>
|
|
<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>
|
|
|
|
<draggable tag="ul" v-model="remainingOptions" ghostClass="ghost" @end="$emit('input', iVal)" class="list-inline" :group="ulid">
|
|
<li v-for="val in remainingOptions" :key="val" v-if="(all && !search) || (search && options[val].toLowerCase().includes(search))" class="list-inline-item py-1">
|
|
<a href="#" class="badge bg-light text-dark p-2" @click.prevent="$emit('input', [...iVal, val])">
|
|
<slot v-bind:v="val" v-bind:desc="options[val]">
|
|
{{ val }}
|
|
</slot>
|
|
<span class="text-success">
|
|
<Icon v="plus"/>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</draggable>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import draggable from 'vuedraggable';
|
|
import { ulid } from 'ulid';
|
|
|
|
export default {
|
|
components: {
|
|
draggable,
|
|
},
|
|
props: {
|
|
value: {},
|
|
options: {},
|
|
},
|
|
data() {
|
|
return {
|
|
iVal: this.value,
|
|
remainingOptions: this.buildRemainingOptions(),
|
|
ulid: ulid(),
|
|
search: '',
|
|
all: false,
|
|
}
|
|
},
|
|
watch: {
|
|
value() {
|
|
this.iVal = this.value;
|
|
this.remainingOptions = this.buildRemainingOptions();
|
|
this.search = '';
|
|
},
|
|
},
|
|
methods: {
|
|
buildRemainingOptions() {
|
|
return Object.keys(this.options).filter(o => !this.value.includes(o));
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
.ghost {
|
|
opacity: 0.5;
|
|
background: #c8ebfb;
|
|
}
|
|
|
|
.drop-empty:empty {
|
|
min-height: 3em;
|
|
}
|
|
</style>
|