add MultipleTagsSelect component

This commit is contained in:
axolotle
2021-03-11 15:46:18 +01:00
parent fc779eb8fd
commit 5e0c6a12a3
@@ -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>