@deskhero/dh_ui 2.0.4 → 2.0.5

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,7 +23093,7 @@ 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_3$f = { class: "caption" };
 const _hoisted_4$c = { class: "min-caption" };
 const _hoisted_5$8 = { class: "bar-inner" };
 const _hoisted_6$8 = ["min", "max", "step", "value"];
@@ -23136,7 +23136,7 @@ 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("div", _hoisted_3$f, [
           createElementVNode("span", _hoisted_4$c, toDisplayString($props.minCaption || $options.barMinVal), 1)
         ])
       ], 32),
@@ -23412,7 +23412,7 @@ 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"
 };
@@ -23448,7 +23448,7 @@ 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, [
+    _ctx.includeForm ? (openBlock(), createElementBlock("div", _hoisted_3$e, [
       createElementVNode("div", _hoisted_4$b, [
         createElementVNode("label", {
           class: normalizeClass(`dh-body-2 input-to ${_ctx.validated ? "disable" : ""}`)
@@ -23496,7 +23496,7 @@ 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_3$d = { class: "dp__multi" };
 const _hoisted_4$a = ["value"];
 const _hoisted_5$6 = ["value"];
 const _hoisted_6$6 = /* @__PURE__ */ createTextVNode(" Back ");
@@ -23632,7 +23632,7 @@ 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",
@@ -23806,7 +23806,7 @@ 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_3$c = { key: 0 };
 const _hoisted_4$9 = { class: "list-none" };
 const _hoisted_5$5 = ["checked"];
 const _hoisted_6$5 = ["checked"];
@@ -23825,7 +23825,7 @@ 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("li", null, [
@@ -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,7 +24435,7 @@ const _hoisted_2$e = {
   key: 0,
   class: "file__upload_items"
 };
-const _hoisted_3$a = { class: "file__upload_list_item" };
+const _hoisted_3$9 = { class: "file__upload_list_item" };
 const _hoisted_4$8 = { class: "file__upload_list_item_label" };
 const _hoisted_5$4 = ["title"];
 const _hoisted_6$4 = /* @__PURE__ */ createElementVNode("br", null, null, -1);
@@ -24718,7 +24718,7 @@ const _sfc_main$e = {
                 "icon-name": `file-` + iconName(file.label),
                 size: 40
               }, null, 8, ["icon-name"]),
-              createElementVNode("div", _hoisted_3$a, [
+              createElementVNode("div", _hoisted_3$9, [
                 createElementVNode("div", _hoisted_4$8, [
                   createElementVNode("div", null, [
                     createElementVNode("span", {
@@ -24874,7 +24874,7 @@ 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_3$8 = { class: "input__dropdown_second" };
 const _hoisted_4$7 = ["tabindex"];
 const _hoisted_5$3 = ["onClick"];
 const _hoisted_6$3 = ["onClick"];
@@ -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
@@ -25157,7 +25157,7 @@ const _hoisted_2$b = {
   key: 1,
   class: "input__group"
 };
-const _hoisted_3$8 = ["placeholder", "type", "value"];
+const _hoisted_3$7 = ["placeholder", "type", "value"];
 const _sfc_main$b = {
   __name: "InputGroup",
   props: {
@@ -25234,7 +25234,7 @@ const _sfc_main$b = {
           type: __props.inputType,
           value: __props.modelValue,
           onInput: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:modelValue", $event.target.value))
-        }, null, 40, _hoisted_3$8),
+        }, null, 40, _hoisted_3$7),
         createVNode(DhIcon, {
           class: "input__group_icon",
           "icon-name": __props.iconName
@@ -27090,7 +27090,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 +27153,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 +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_af046b06_lang = "";
+var default_css_vue_type_style_index_0_src_9d166d1a_lang = "";
 var InputList_vue_vue_type_style_index_1_lang = "";
 const _hoisted_1$9 = /* @__PURE__ */ createElementVNode("img", {
   alt: "",
@@ -27447,7 +27447,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 +27462,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 +27475,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
+      "7445a9c7": __props.maxHeight
     }));
-    const inputVal = ref([]);
-    const uniqueId = ref("");
+    const computedValue = computed({
+      get() {
+        return props.modelValue;
+      },
+      set() {
+      }
+    });
     function select(v) {
       emit("select", v);
     }
@@ -27502,70 +27507,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),
+        label: __props.labelProp,
+        mode: "tags",
+        canClear: props.canClear,
+        native: false,
+        object: true,
+        options: __props.list,
+        placeholder: props.placeholder,
+        searchable: true,
+        "value-prop": __props.valueProp,
+        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 }) => [
+          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", "label", "canClear", "options", "placeholder", "value-prop"]);
     };
   }
 };