Prechádzať zdrojové kódy

add MultipleTagsSelect component

axolotle 3 rokov pred
rodič
commit
5e0c6a12a3

+ 52 - 0
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>