@dejwcake/craftable 2.0.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dejwcake/craftable",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "This is a frontend dependency for Craftable. Craftable is a Laravel-based open-source toolkit for building administration interfaces.",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/form/FormTagInput.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="mb-3 row align-items-center">
+        <label :for="name" class="col-md-3 col-form-label text-md-end">{{ label }}</label>
+        <div class="col-md-9 col-xl-8">
+            <Multiselect
+                :model-value="modelValue"
+                :class="{ 'is-invalid': error }"
+                :placeholder="placeholder"
+                :options="modelValue"
+                :multiple="true"
+                :taggable="true"
+                :close-on-select="false"
+                :tag-placeholder="tagPlaceholder"
+                open-direction="bottom"
+                @tag="$emit('update:modelValue', [...modelValue, $event])"
+                @update:model-value="$emit('update:modelValue', $event)"
+            ></Multiselect>
+            <div v-if="error" class="invalid-feedback d-block form-text">{{ error }}</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Multiselect from 'vue-multiselect';
+
+defineProps({
+    modelValue: { type: Array, default: () => [] },
+    name: { type: String, required: true },
+    label: { type: String, required: true },
+    error: { type: String, default: '' },
+    placeholder: { type: String, default: '' },
+    tagPlaceholder: { type: String, default: '' },
+});
+
+defineEmits(['update:modelValue']);
+</script>

package/src/index.js

@@ -35,6 +35,7 @@ export { default as FormCheckbox } from './components/form/FormCheckbox.vue';
 export { default as FormDatePicker } from './components/form/FormDatePicker.vue';
 export { default as FormWysiwyg } from './components/form/FormWysiwyg.vue';
 export { default as FormMultiSelect } from './components/form/FormMultiSelect.vue';
+export { default as FormTagInput } from './components/form/FormTagInput.vue';
 export { default as FormLocalizedInput } from './components/form/FormLocalizedInput.vue';
 export { default as FormLocalizedWysiwyg } from './components/form/FormLocalizedWysiwyg.vue';
 export { default as FormWysiwygSimple } from './components/form/FormWysiwygSimple.vue';