@deskhero/dh_ui 2.0.2 → 2.0.3

package/dist/dh_ui.es.js

@@ -27439,7 +27439,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
 }
 script.render = render$1;
 script.__file = "src/Multiselect.vue";
-var default_css_vue_type_style_index_0_src_7d0bffcb_lang = "";
+var default_css_vue_type_style_index_0_src_af046b06_lang = "";
 var InputList_vue_vue_type_style_index_1_lang = "";
 const _hoisted_1$9 = /* @__PURE__ */ createElementVNode("img", {
   alt: "",
@@ -27447,7 +27447,7 @@ const _hoisted_1$9 = /* @__PURE__ */ createElementVNode("img", {
   src: _imports_0
 }, null, -1);
 const _hoisted_2$9 = { class: "list__item_text" };
-const _hoisted_3$6 = /* @__PURE__ */ createElementVNode("div", { id: "list" }, null, -1);
+const _hoisted_3$6 = ["id"];
 const _sfc_main$a = {
   __name: "InputList",
   props: {
@@ -27470,18 +27470,46 @@ const _sfc_main$a = {
     selectItems: {
       type: Array,
       required: true
+    },
+    canClear: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    placeholder: {
+      type: String,
+      required: false,
+      default: "Start typing..."
     }
   },
-  emits: ["update"],
+  emits: ["update", "select", "deselect", "clear"],
   setup(__props, { emit }) {
     const props = __props;
     useCssVars((_ctx) => ({
-      "1c1e0897": __props.maxHeight
+      "07bf1a7a": __props.maxHeight
     }));
     const inputVal = ref([]);
-    function update() {
-      emit("update", inputVal.value);
+    const uniqueId = ref("");
+    function select(v) {
+      emit("select", v);
     }
+    function deselect(v) {
+      emit("deselect", v);
+    }
+    function update(v) {
+      emit("update", v);
+    }
+    function clear2() {
+      emit("clear");
+    }
+    function generateUniqueId() {
+      const timestamp = Date.now().toString(36);
+      const randomNum = Math.random().toString(36).substring(2, 9);
+      return timestamp + randomNum;
+    }
+    onMounted(() => {
+      uniqueId.value = generateUniqueId();
+    });
     watch(() => props.selectItems, (oldValue, newValue) => {
       if (!oldValue) {
         return;
@@ -27503,17 +27531,22 @@ const _sfc_main$a = {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputVal.value = $event),
           label: __props.labelProp,
           mode: "tags",
+          canClear: props.canClear,
           native: false,
           object: true,
           options: __props.list,
-          placeholder: "Start typing a name",
+          placeholder: props.placeholder,
           searchable: true,
           "value-prop": __props.idProp,
-          onDeselect: update,
-          onSelect: update
+          onChange: _cache[1] || (_cache[1] = (v) => update(v)),
+          onDeselect: _cache[2] || (_cache[2] = (v) => deselect(v)),
+          onSelect: _cache[3] || (_cache[3] = (v) => select(v)),
+          onClear: _cache[4] || (_cache[4] = ($event) => clear2())
         }, {
           tag: withCtx(({ option, handleTagRemove, disabled }) => [
-            (openBlock(), createBlock(Teleport, { to: "#list" }, [
+            (openBlock(), createBlock(Teleport, {
+              to: "#" + uniqueId.value
+            }, [
               createElementVNode("div", {
                 class: normalizeClass(["list__item", { "is-disabled": disabled }])
               }, [
@@ -27527,11 +27560,11 @@ const _sfc_main$a = {
                 }, null, 8, ["onClick"]),
                 renderSlot(_ctx.$slots, "default")
               ], 2)
-            ]))
+            ], 8, ["to"]))
           ]),
           _: 3
-        }, 8, ["modelValue", "label", "options", "value-prop"]),
-        _hoisted_3$6
+        }, 8, ["modelValue", "label", "canClear", "options", "placeholder", "value-prop"]),
+        createElementVNode("div", { id: uniqueId.value }, null, 8, _hoisted_3$6)
       ], 64);
     };
   }