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