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