enfrancais-app/src/components/formItems/MultipleTagsSelect.vue

<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="buttonText" 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 },
    buttonText: { type: String, required: true }
  },

  computed: {
    availableOptions () {
      return this.options.filter(opt => this.value.indexOf(opt) === -1)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>