|
@@ -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>
|