@deskhero/dh_ui 2.0.4 → 2.1.0

package/dist/dh_ui.es.js

@@ -10875,7 +10875,7 @@ const _sfc_main$r = defineComponent({
 });
 const _hoisted_1$r = { class: "dp__options" };
 const _hoisted_2$p = { class: "dp__options_switch" };
-const _hoisted_3$h = /* @__PURE__ */ createElementVNode("span", { class: "dp__options_slider" }, null, -1);
+const _hoisted_3$g = /* @__PURE__ */ createElementVNode("span", { class: "dp__options_slider" }, null, -1);
 function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("label", _hoisted_1$r, [
     createElementVNode("span", null, toDisplayString(_ctx.label), 1),
@@ -10887,7 +10887,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 512), [
         [vModelCheckbox, _ctx.checkedValue]
       ]),
-      _hoisted_3$h
+      _hoisted_3$g
     ])
   ]);
 }
@@ -23093,9 +23093,9 @@ const _sfc_main$q = {
 };
 const _hoisted_1$q = { class: "bar" };
 const _hoisted_2$o = ["min", "max", "step", "value"];
-const _hoisted_3$g = { class: "caption" };
-const _hoisted_4$c = { class: "min-caption" };
-const _hoisted_5$8 = { class: "bar-inner" };
+const _hoisted_3$f = { class: "caption" };
+const _hoisted_4$d = { class: "min-caption" };
+const _hoisted_5$9 = { class: "bar-inner" };
 const _hoisted_6$8 = ["min", "max", "step", "value"];
 const _hoisted_7$8 = { class: "caption" };
 const _hoisted_8$3 = { class: "max-caption" };
@@ -23136,11 +23136,11 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
         onMousedown: _cache[2] || (_cache[2] = (...args) => $options.onLeftThumbMousedown && $options.onLeftThumbMousedown(...args)),
         onTouchstart: _cache[3] || (_cache[3] = (...args) => $options.onLeftThumbMousedown && $options.onLeftThumbMousedown(...args))
       }, [
-        createElementVNode("div", _hoisted_3$g, [
-          createElementVNode("span", _hoisted_4$c, toDisplayString($props.minCaption || $options.barMinVal), 1)
+        createElementVNode("div", _hoisted_3$f, [
+          createElementVNode("span", _hoisted_4$d, toDisplayString($props.minCaption || $options.barMinVal), 1)
         ])
       ], 32),
-      createElementVNode("div", _hoisted_5$8, [
+      createElementVNode("div", _hoisted_5$9, [
         createElementVNode("div", {
           class: "bar-inner-left",
           onClick: _cache[4] || (_cache[4] = (...args) => $options.onInnerBarLeftClick && $options.onInnerBarLeftClick(...args))
@@ -23412,12 +23412,12 @@ const _sfc_main$p = defineComponent({
 });
 const _hoisted_1$p = { class: "dh-range-container" };
 const _hoisted_2$n = { class: "bar-chart" };
-const _hoisted_3$f = {
+const _hoisted_3$e = {
   key: 0,
   class: "input-group-section"
 };
-const _hoisted_4$b = { class: "input-group sb-input" };
-const _hoisted_5$7 = ["disabled", "max", "value"];
+const _hoisted_4$c = { class: "input-group sb-input" };
+const _hoisted_5$8 = ["disabled", "max", "value"];
 const _hoisted_6$7 = { class: "input-group sb-input" };
 const _hoisted_7$7 = ["disabled", "max", "min", "value"];
 function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
@@ -23448,8 +23448,8 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
         onInput: _ctx.updateBarChart
       }, null, 8, ["base-class-name", "max", "max-caption", "max-value", "min-caption", "min-value", "onInput"])
     ]),
-    _ctx.includeForm ? (openBlock(), createElementBlock("div", _hoisted_3$f, [
-      createElementVNode("div", _hoisted_4$b, [
+    _ctx.includeForm ? (openBlock(), createElementBlock("div", _hoisted_3$e, [
+      createElementVNode("div", _hoisted_4$c, [
         createElementVNode("label", {
           class: normalizeClass(`dh-body-2 input-to ${_ctx.validated ? "disable" : ""}`)
         }, " From ", 2),
@@ -23462,7 +23462,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
           type: "number",
           value: _ctx.getMinKey,
           onInput: _cache[0] || (_cache[0] = ($event) => _ctx.changeMin($event))
-        }, null, 40, _hoisted_5$7)
+        }, null, 40, _hoisted_5$8)
       ]),
       createElementVNode("div", _hoisted_6$7, [
         createElementVNode("label", {
@@ -23496,9 +23496,9 @@ const _hoisted_2$m = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ create
   /* @__PURE__ */ createElementVNode("p", null, "From"),
   /* @__PURE__ */ createElementVNode("p", null, "To")
 ], -1));
-const _hoisted_3$e = { class: "dp__multi" };
-const _hoisted_4$a = ["value"];
-const _hoisted_5$6 = ["value"];
+const _hoisted_3$d = { class: "dp__multi" };
+const _hoisted_4$b = ["value"];
+const _hoisted_5$7 = ["value"];
 const _hoisted_6$6 = /* @__PURE__ */ createTextVNode(" Back ");
 const _hoisted_7$6 = ["onClick"];
 const _hoisted_8$2 = ["onClick"];
@@ -23632,21 +23632,21 @@ const _sfc_main$o = {
           onClosed: reOpen
         }, {
           "dp-input": withCtx(() => [
-            createElementVNode("div", _hoisted_3$e, [
+            createElementVNode("div", _hoisted_3$d, [
               createElementVNode("input", {
                 class: "dp__input dp__multi_input",
                 placeholder: "MM/DD/YYYY",
                 type: "text",
                 value: minDate.value ? minDate.value : date.value[0],
                 onInput: _cache[0] || (_cache[0] = ($event) => changeFirstDate($event))
-              }, null, 40, _hoisted_4$a),
+              }, null, 40, _hoisted_4$b),
               createElementVNode("input", {
                 class: "dp__input dp__multi_input",
                 placeholder: "MM/DD/YYYY",
                 type: "text",
                 value: maxDate.value ? maxDate.value : date.value[1],
                 onInput: _cache[1] || (_cache[1] = ($event) => changeSecondDate($event))
-              }, null, 40, _hoisted_5$6)
+              }, null, 40, _hoisted_5$7)
             ])
           ]),
           "arrow-left": withCtx(() => [
@@ -23806,9 +23806,9 @@ const _sfc_main$n = defineComponent({
 });
 const _hoisted_1$n = { class: "dh-advanced-filter-container" };
 const _hoisted_2$l = { class: "advance_section" };
-const _hoisted_3$d = { key: 0 };
-const _hoisted_4$9 = { class: "list-none" };
-const _hoisted_5$5 = ["checked"];
+const _hoisted_3$c = { key: 0 };
+const _hoisted_4$a = { class: "list-none" };
+const _hoisted_5$6 = ["checked"];
 const _hoisted_6$5 = ["checked"];
 const _hoisted_7$5 = ["checked"];
 function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
@@ -23825,9 +23825,9 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
           size: 20
         }, null, 8, ["icon-name"])
       ]),
-      _ctx.activeFilter ? (openBlock(), createElementBlock("div", _hoisted_3$d, [
+      _ctx.activeFilter ? (openBlock(), createElementBlock("div", _hoisted_3$c, [
         renderSlot(_ctx.$slots, "default"),
-        createElementVNode("ul", _hoisted_4$9, [
+        createElementVNode("ul", _hoisted_4$a, [
           createElementVNode("li", null, [
             createElementVNode("label", null, [
               createElementVNode("input", {
@@ -23835,7 +23835,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
                 name: "number_filter",
                 type: "checkbox",
                 onChange: _cache[1] || (_cache[1] = ($event) => _ctx.missingFilter())
-              }, null, 40, _hoisted_5$5),
+              }, null, 40, _hoisted_5$6),
               createTextVNode(" " + toDisplayString(_ctx.filterMissingText), 1)
             ])
           ]),
@@ -23871,7 +23871,7 @@ const _hoisted_2$k = {
   key: 1,
   class: "prepend-icon"
 };
-const _hoisted_3$c = { class: "append-icon" };
+const _hoisted_3$b = { class: "append-icon" };
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "Button",
   props: {
@@ -23959,7 +23959,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           "icon-name": __props.icon,
           size: 24
         }, null, 8, ["icon-name"])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$c, [
+        createElementVNode("div", _hoisted_3$b, [
           renderSlot(_ctx.$slots, "append-icon", {}, void 0, true)
         ])
       ], 10, _hoisted_1$m);
@@ -23998,7 +23998,7 @@ const _sfc_main$l = defineComponent({
 });
 const _hoisted_1$l = ["placement", "target", "tooltipText", "trigger"];
 const _hoisted_2$j = ["id"];
-const _hoisted_3$b = { class: "text" };
+const _hoisted_3$a = { class: "text" };
 function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     id: "main-contain",
@@ -24017,7 +24017,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
       ref: _ctx.target,
       class: normalizeClass(`tooltiptext ${_ctx.show}`)
     }, [
-      createElementVNode("span", _hoisted_3$b, toDisplayString(_ctx.tooltipText), 1)
+      createElementVNode("span", _hoisted_3$a, toDisplayString(_ctx.tooltipText), 1)
     ], 10, _hoisted_2$j)
   ], 40, _hoisted_1$l);
 }
@@ -24435,9 +24435,9 @@ const _hoisted_2$e = {
   key: 0,
   class: "file__upload_items"
 };
-const _hoisted_3$a = { class: "file__upload_list_item" };
-const _hoisted_4$8 = { class: "file__upload_list_item_label" };
-const _hoisted_5$4 = ["title"];
+const _hoisted_3$9 = { class: "file__upload_list_item" };
+const _hoisted_4$9 = { class: "file__upload_list_item_label" };
+const _hoisted_5$5 = ["title"];
 const _hoisted_6$4 = /* @__PURE__ */ createElementVNode("br", null, null, -1);
 const _hoisted_7$4 = ["href"];
 const _hoisted_8$1 = {
@@ -24718,12 +24718,12 @@ const _sfc_main$e = {
                 "icon-name": `file-` + iconName(file.label),
                 size: 40
               }, null, 8, ["icon-name"]),
-              createElementVNode("div", _hoisted_3$a, [
-                createElementVNode("div", _hoisted_4$8, [
+              createElementVNode("div", _hoisted_3$9, [
+                createElementVNode("div", _hoisted_4$9, [
                   createElementVNode("div", null, [
                     createElementVNode("span", {
                       title: file.label
-                    }, toDisplayString(getName(file.label)) + toDisplayString(getExtension(file.label)), 9, _hoisted_5$4),
+                    }, toDisplayString(getName(file.label)) + toDisplayString(getExtension(file.label)), 9, _hoisted_5$5),
                     _hoisted_6$4,
                     createElementVNode("span", null, toDisplayString(formatKilobytes(file.size_kb)), 1)
                   ])
@@ -24874,9 +24874,9 @@ const _sfc_main$e = {
 var InputDropdown_vue_vue_type_style_index_0_lang = "";
 const _hoisted_1$d = { class: "input__dropdown" };
 const _hoisted_2$d = ["placeholder", "value"];
-const _hoisted_3$9 = { class: "input__dropdown_second" };
-const _hoisted_4$7 = ["tabindex"];
-const _hoisted_5$3 = ["onClick"];
+const _hoisted_3$8 = { class: "input__dropdown_second" };
+const _hoisted_4$8 = ["tabindex"];
+const _hoisted_5$4 = ["onClick"];
 const _hoisted_6$3 = ["onClick"];
 const _hoisted_7$3 = {
   key: 2,
@@ -24988,7 +24988,7 @@ const _sfc_main$d = {
           value: __props.inputValue,
           onInput: update
         }, null, 44, _hoisted_2$d),
-        createElementVNode("div", _hoisted_3$9, [
+        createElementVNode("div", _hoisted_3$8, [
           createVNode(DhIcon, {
             "icon-name": __props.icon,
             size: 18
@@ -25015,7 +25015,7 @@ const _sfc_main$d = {
                     open.value = false;
                     update();
                   }
-                }, toDisplayString(option[__props.labelProp]), 9, _hoisted_5$3);
+                }, toDisplayString(option[__props.labelProp]), 9, _hoisted_5$4);
               }), 128))
             ], 2)) : createCommentVNode("", true),
             typeof __props.options[0] === "string" ? (openBlock(), createElementBlock("div", {
@@ -25036,12 +25036,12 @@ const _sfc_main$d = {
             ], 2)) : createCommentVNode("", true),
             props.isClearable ? (openBlock(), createElementBlock("div", _hoisted_7$3, [
               createVNode(DhButton, {
+                color: "ghost",
                 icon: "close",
-                onClick: clear2,
-                color: "ghost"
+                onClick: clear2
               })
             ])) : createCommentVNode("", true)
-          ], 40, _hoisted_4$7)
+          ], 40, _hoisted_4$8)
         ])
       ]);
     };
@@ -25134,30 +25134,35 @@ const _sfc_main$c = {
           return openBlock(), createBlock(_sfc_main$d, {
             key: index,
             icon: props.icon,
-            "selected-option": item.selectedOption,
             "input-value": item.input,
             "input-width": props.inputWidth,
+            "is-clearable": "",
+            "label-prop": props.labelProp,
             options: props.options,
             "placeholder-input": props.placeholderInput,
+            "selected-option": item.selectedOption,
             tabindex: props.tabindex,
-            onUpdate: (input, label, optionId) => updateDropdown(index, input, label),
-            "label-prop": props.labelProp,
             "value-prop": props.valueProp,
-            "is-clearable": "",
-            onClear: ($event) => removeItem(index)
-          }, null, 8, ["icon", "selected-option", "input-value", "input-width", "options", "placeholder-input", "tabindex", "onUpdate", "label-prop", "value-prop", "onClear"]);
+            onClear: ($event) => removeItem(index),
+            onUpdate: (input, label, optionId) => updateDropdown(index, input, label)
+          }, null, 8, ["icon", "input-value", "input-width", "label-prop", "options", "placeholder-input", "selected-option", "tabindex", "value-prop", "onClear", "onUpdate"]);
         }), 128))
       ], 64);
     };
   }
 };
 var InputGroup_vue_vue_type_style_index_0_lang = "";
-const _hoisted_1$b = ["placeholder", "value"];
+const _hoisted_1$b = ["data-e2e", "placeholder", "value"];
 const _hoisted_2$b = {
   key: 1,
+  class: "input__group_content"
+};
+const _hoisted_3$7 = ["data-e2e", "placeholder", "value"];
+const _hoisted_4$7 = {
+  key: 2,
   class: "input__group"
 };
-const _hoisted_3$8 = ["placeholder", "type", "value"];
+const _hoisted_5$3 = ["data-e2e", "placeholder", "type", "value"];
 const _sfc_main$b = {
   __name: "InputGroup",
   props: {
@@ -25171,7 +25176,13 @@ const _sfc_main$b = {
     },
     iconName: {
       type: String,
-      required: true
+      required: false,
+      default: ""
+    },
+    sideContent: {
+      type: String,
+      required: false,
+      default: ""
     },
     widthProp: {
       type: String,
@@ -25188,15 +25199,19 @@ const _sfc_main$b = {
     placeholder: {
       type: String,
       default: "type here"
+    },
+    e2e: {
+      type: String,
+      default: ""
     }
   },
   emits: ["update:modelValue"],
   setup(__props) {
     const props = __props;
     useCssVars((_ctx) => ({
-      "22ddfa82": flexDir.value,
-      "4a679b77": __props.widthProp,
-      "8a658c88": __props.heightProp
+      "a3a3c142": flexDir.value,
+      "4241fd14": __props.widthProp,
+      "8381e882": __props.heightProp
     }));
     const flexDir = ref("row");
     onMounted(() => {
@@ -25205,41 +25220,57 @@ const _sfc_main$b = {
       }
     });
     return (_ctx, _cache) => {
-      return __props.inputType == "multi-line" ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        class: normalizeClass(["text__area", __props.direction == "left" ? "text__area--left" : "text__area--right"])
-      }, [
-        createElementVNode("textarea", {
-          class: "text__area_field",
-          cols: "30",
-          placeholder: __props.placeholder,
-          rows: "10",
-          value: __props.modelValue,
-          onInput: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event.target.value))
-        }, null, 40, _hoisted_1$b),
-        __props.direction == "left" ? (openBlock(), createBlock(DhIcon, {
+      return openBlock(), createElementBlock(Fragment, null, [
+        __props.inputType == "multi-line" ? (openBlock(), createElementBlock("div", {
           key: 0,
-          class: "text__area_icon text__area_icon--left",
-          "icon-name": __props.iconName
-        }, null, 8, ["icon-name"])) : createCommentVNode("", true),
-        __props.direction == "right" ? (openBlock(), createBlock(DhIcon, {
-          key: 1,
-          class: "text__area_icon text__area_icon--right",
-          "icon-name": __props.iconName
-        }, null, 8, ["icon-name"])) : createCommentVNode("", true)
-      ], 2)) : (openBlock(), createElementBlock("div", _hoisted_2$b, [
-        createElementVNode("input", {
-          class: "input__group_field",
-          placeholder: __props.placeholder,
-          type: __props.inputType,
-          value: __props.modelValue,
-          onInput: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:modelValue", $event.target.value))
-        }, null, 40, _hoisted_3$8),
-        createVNode(DhIcon, {
-          class: "input__group_icon",
-          "icon-name": __props.iconName
-        }, null, 8, ["icon-name"])
-      ]));
+          class: normalizeClass(["text__area", __props.direction == "left" ? "text__area--left" : "text__area--right"])
+        }, [
+          createElementVNode("textarea", {
+            class: "text__area_field",
+            cols: "30",
+            "data-e2e": __props.e2e,
+            placeholder: __props.placeholder,
+            rows: "10",
+            value: __props.modelValue,
+            onInput: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event.target.value))
+          }, null, 40, _hoisted_1$b),
+          __props.direction == "left" ? (openBlock(), createBlock(DhIcon, {
+            key: 0,
+            class: "text__area_icon text__area_icon--left",
+            "icon-name": __props.iconName
+          }, null, 8, ["icon-name"])) : createCommentVNode("", true),
+          __props.direction == "right" ? (openBlock(), createBlock(DhIcon, {
+            key: 1,
+            class: "text__area_icon text__area_icon--right",
+            "icon-name": __props.iconName
+          }, null, 8, ["icon-name"])) : createCommentVNode("", true)
+        ], 2)) : createCommentVNode("", true),
+        __props.inputType == "text" && __props.sideContent ? (openBlock(), createElementBlock("div", _hoisted_2$b, [
+          createElementVNode("input", {
+            class: normalizeClass(["form-input", __props.direction == "left" ? "form-input--left" : "form-input--right"]),
+            "data-e2e": __props.e2e,
+            placeholder: __props.placeholder,
+            value: __props.modelValue,
+            onInput: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:modelValue", $event.target.value))
+          }, null, 42, _hoisted_3$7),
+          createElementVNode("span", {
+            class: normalizeClass(["form-span", __props.direction == "left" ? "form-span--left" : "form-span--right"])
+          }, toDisplayString(__props.sideContent), 3)
+        ])) : (openBlock(), createElementBlock("div", _hoisted_4$7, [
+          createElementVNode("input", {
+            class: "input__group_field",
+            "data-e2e": __props.e2e,
+            placeholder: __props.placeholder,
+            type: __props.inputType,
+            value: __props.modelValue,
+            onInput: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("update:modelValue", $event.target.value))
+          }, null, 40, _hoisted_5$3),
+          createVNode(DhIcon, {
+            class: "input__group_icon",
+            "icon-name": __props.iconName
+          }, null, 8, ["icon-name"])
+        ]))
+      ], 64);
     };
   }
 };
@@ -27090,7 +27121,7 @@ var script = {
 };
 const _hoisted_1$a = ["id", "dir"];
 const _hoisted_2$a = ["tabindex", "aria-controls", "aria-placeholder", "aria-expanded", "aria-activedescendant", "aria-multiselectable", "role"];
-const _hoisted_3$7 = ["type", "modelValue", "value", "autocomplete", "id", "aria-controls", "aria-placeholder", "aria-expanded", "aria-activedescendant", "aria-multiselectable"];
+const _hoisted_3$6 = ["type", "modelValue", "value", "autocomplete", "id", "aria-controls", "aria-placeholder", "aria-expanded", "aria-activedescendant", "aria-multiselectable"];
 const _hoisted_4$6 = ["onKeyup", "aria-label"];
 const _hoisted_5$2 = ["onClick"];
 const _hoisted_6$2 = ["type", "modelValue", "value", "id", "autocomplete", "aria-controls", "aria-placeholder", "aria-expanded", "aria-activedescendant", "aria-multiselectable"];
@@ -27153,7 +27184,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       }, {
         ...$props.attrs,
         ..._ctx.arias
-      }), null, 16, _hoisted_3$7)) : createCommentVNode("v-if", true),
+      }), null, 16, _hoisted_3$6)) : createCommentVNode("v-if", true),
       createCommentVNode(" Tags (with search) "),
       $props.mode == "tags" ? (openBlock(), createElementBlock("div", {
         key: 1,
@@ -27439,7 +27470,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_af046b06_lang = "";
+var default_css_vue_type_style_index_0_src_59d857bc_lang = "";
 var InputList_vue_vue_type_style_index_1_lang = "";
 const _hoisted_1$9 = /* @__PURE__ */ createElementVNode("img", {
   alt: "",
@@ -27447,7 +27478,6 @@ const _hoisted_1$9 = /* @__PURE__ */ createElementVNode("img", {
   src: _imports_0
 }, null, -1);
 const _hoisted_2$9 = { class: "list__item_text" };
-const _hoisted_3$6 = ["id"];
 const _sfc_main$a = {
   __name: "InputList",
   props: {
@@ -27463,13 +27493,9 @@ const _sfc_main$a = {
       type: String,
       default: "label"
     },
-    idProp: {
+    valueProp: {
       type: String,
-      default: "value"
-    },
-    selectItems: {
-      type: Array,
-      required: true
+      default: "id"
     },
     canClear: {
       type: Boolean,
@@ -27480,16 +27506,26 @@ const _sfc_main$a = {
       type: String,
       required: false,
       default: "Start typing..."
+    },
+    modelValue: {
+      type: [Object, Array],
+      required: false,
+      default: null
     }
   },
   emits: ["update", "select", "deselect", "clear"],
   setup(__props, { emit }) {
     const props = __props;
     useCssVars((_ctx) => ({
-      "07bf1a7a": __props.maxHeight
+      "182bac7a": __props.maxHeight
     }));
-    const inputVal = ref([]);
-    const uniqueId = ref("");
+    const computedValue = computed({
+      get() {
+        return props.modelValue;
+      },
+      set() {
+      }
+    });
     function select(v) {
       emit("select", v);
     }
@@ -27502,70 +27538,41 @@ const _sfc_main$a = {
     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;
-      }
-      const selected = props.list.filter((item) => oldValue.includes(item[props.idProp]));
-      if (JSON.stringify(selected) !== JSON.stringify(inputVal.value)) {
-        inputVal.value = [...inputVal.value, ...selected];
-        inputVal.value = [...new Set(inputVal.value)];
-      }
-      if (newValue.length > oldValue.length) {
-        const difference = newValue.filter((x2) => !oldValue.includes(x2));
-        inputVal.value = inputVal.value.filter((item) => !difference.includes(item[props.idProp]));
-      }
-    });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(unref(script), {
-          modelValue: inputVal.value,
-          "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: props.placeholder,
-          searchable: true,
-          "value-prop": __props.idProp,
-          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: "#" + uniqueId.value
-            }, [
-              createElementVNode("div", {
-                class: normalizeClass(["list__item", { "is-disabled": disabled }])
-              }, [
-                _hoisted_1$9,
-                createElementVNode("p", _hoisted_2$9, toDisplayString(option[__props.labelProp]), 1),
-                createVNode(DhIcon, {
-                  class: "list__item_icon",
-                  "icon-name": "delete",
-                  size: 24,
-                  onClick: ($event) => handleTagRemove(option, $event)
-                }, null, 8, ["onClick"]),
-                renderSlot(_ctx.$slots, "default")
-              ], 2)
-            ], 8, ["to"]))
-          ]),
-          _: 3
-        }, 8, ["modelValue", "label", "canClear", "options", "placeholder", "value-prop"]),
-        createElementVNode("div", { id: uniqueId.value }, null, 8, _hoisted_3$6)
-      ], 64);
+      return openBlock(), createBlock(unref(script), {
+        modelValue: unref(computedValue),
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(computedValue) ? computedValue.value = $event : null),
+        "can-clear": props.canClear,
+        label: __props.labelProp,
+        mode: "tags",
+        native: false,
+        object: true,
+        options: __props.list,
+        placeholder: props.placeholder,
+        searchable: true,
+        "value-prop": __props.valueProp,
+        onChange: _cache[1] || (_cache[1] = (v) => update(v)),
+        onClear: _cache[2] || (_cache[2] = ($event) => clear2()),
+        onDeselect: _cache[3] || (_cache[3] = (v) => deselect(v)),
+        onSelect: _cache[4] || (_cache[4] = (v) => select(v))
+      }, {
+        tag: withCtx(({ option, handleTagRemove, disabled }) => [
+          createElementVNode("div", {
+            class: normalizeClass(["list__item", { "is-disabled": disabled }])
+          }, [
+            _hoisted_1$9,
+            createElementVNode("p", _hoisted_2$9, toDisplayString(option[__props.labelProp]), 1),
+            createVNode(DhIcon, {
+              class: "list__item_icon",
+              "icon-name": "delete",
+              size: 24,
+              onMousedown: withModifiers(($event) => handleTagRemove(option, $event), ["prevent"])
+            }, null, 8, ["onMousedown"]),
+            renderSlot(_ctx.$slots, "default")
+          ], 2)
+        ]),
+        _: 3
+      }, 8, ["modelValue", "can-clear", "label", "options", "placeholder", "value-prop"]);
     };
   }
 };