add MultipleTagsSelect component
This commit is contained in:
@@ -0,0 +1,52 @@
|
|||||||
|
<template>
|
||||||
|
<b-form-tags
|
||||||
|
v-bind="$attrs" v-on="$listeners"
|
||||||
|
:value="value"
|
||||||
|
no-outer-focus
|
||||||
|
>
|
||||||
|
<template v-slot="{ tags, disabled, addTag, removeTag }">
|
||||||
|
<b-dropdown
|
||||||
|
:text="$t('tags')" size="sm"
|
||||||
|
variant="outline-secondary" class="d-block rounded-0"
|
||||||
|
>
|
||||||
|
<b-dropdown-item-button
|
||||||
|
v-for="option in availableOptions" :key="option"
|
||||||
|
@click="addTag(option)"
|
||||||
|
>
|
||||||
|
{{ option }}
|
||||||
|
</b-dropdown-item-button>
|
||||||
|
</b-dropdown>
|
||||||
|
|
||||||
|
<ul v-if="tags.length > 0" class="list-inline d-inline-block">
|
||||||
|
<li v-for="tag in tags" :key="tag" class="list-inline-item">
|
||||||
|
<b-form-tag
|
||||||
|
:title="tag" :disabled="disabled" pill
|
||||||
|
@remove="removeTag(tag)"
|
||||||
|
>
|
||||||
|
{{ tag }}
|
||||||
|
</b-form-tag>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</template>
|
||||||
|
</b-form-tags>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'MultipleTagsSelect',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
value: { type: Array, required: true },
|
||||||
|
options: { type: Array, required: true }
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
availableOptions () {
|
||||||
|
return this.options.filter(opt => this.value.indexOf(opt) === -1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user