From 5e0c6a12a30980ab09f4275bf36a3d3db8cb9489 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 11 Mar 2021 15:46:18 +0100
Subject: [PATCH] add MultipleTagsSelect component

---
 .../formItems/MultipleTagsSelect.vue          | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 src/components/formItems/MultipleTagsSelect.vue

diff --git a/src/components/formItems/MultipleTagsSelect.vue b/src/components/formItems/MultipleTagsSelect.vue
new file mode 100644
index 0000000..efcc9fd
--- /dev/null
+++ b/src/components/formItems/MultipleTagsSelect.vue
@@ -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>