@deskhero/dh_ui 1.59.5 → 2.0.0

package/dist/dh_ui.es.js

@@ -23097,7 +23097,7 @@ const _hoisted_3$g = { class: "caption" };
 const _hoisted_4$c = { class: "min-caption" };
 const _hoisted_5$8 = { class: "bar-inner" };
 const _hoisted_6$8 = ["min", "max", "step", "value"];
-const _hoisted_7$7 = { class: "caption" };
+const _hoisted_7$8 = { class: "caption" };
 const _hoisted_8$3 = { class: "max-caption" };
 const _hoisted_9$3 = {
   key: 0,
@@ -23164,7 +23164,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
         onMousedown: _cache[7] || (_cache[7] = (...args) => $options.onRightThumbMousedown && $options.onRightThumbMousedown(...args)),
         onTouchstart: _cache[8] || (_cache[8] = (...args) => $options.onRightThumbMousedown && $options.onRightThumbMousedown(...args))
       }, [
-        createElementVNode("div", _hoisted_7$7, [
+        createElementVNode("div", _hoisted_7$8, [
           createElementVNode("span", _hoisted_8$3, toDisplayString($props.maxCaption || $options.barMaxVal), 1)
         ])
       ], 32),
@@ -23419,7 +23419,7 @@ const _hoisted_3$f = {
 const _hoisted_4$b = { class: "input-group sb-input" };
 const _hoisted_5$7 = ["disabled", "max", "value"];
 const _hoisted_6$7 = { class: "input-group sb-input" };
-const _hoisted_7$6 = ["disabled", "max", "min", "value"];
+const _hoisted_7$7 = ["disabled", "max", "min", "value"];
 function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Bar = resolveComponent("Bar");
   const _component_MultiRangeSlider = resolveComponent("MultiRangeSlider");
@@ -23477,7 +23477,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
           type: "number",
           value: _ctx.getMaxKey,
           onInput: _cache[1] || (_cache[1] = ($event) => _ctx.changeMax($event))
-        }, null, 40, _hoisted_7$6)
+        }, null, 40, _hoisted_7$7)
       ])
     ])) : createCommentVNode("", true),
     renderSlot(_ctx.$slots, "input", {}, void 0, true),
@@ -23500,7 +23500,7 @@ const _hoisted_3$e = { class: "dp__multi" };
 const _hoisted_4$a = ["value"];
 const _hoisted_5$6 = ["value"];
 const _hoisted_6$6 = /* @__PURE__ */ createTextVNode(" Back ");
-const _hoisted_7$5 = ["onClick"];
+const _hoisted_7$6 = ["onClick"];
 const _hoisted_8$2 = ["onClick"];
 const _hoisted_9$2 = ["onClick"];
 const _hoisted_10$2 = ["onClick"];
@@ -23671,7 +23671,7 @@ const _sfc_main$o = {
             (openBlock(), createBlock(Teleport, { to: "#tags" }, [
               createElementVNode("span", {
                 onClick: ($event) => presetDateRange(range)
-              }, toDisplayString(label), 9, _hoisted_7$5)
+              }, toDisplayString(label), 9, _hoisted_7$6)
             ]))
           ]),
           week: withCtx(({ label, range, presetDateRange }) => [
@@ -23810,7 +23810,7 @@ const _hoisted_3$d = { key: 0 };
 const _hoisted_4$9 = { class: "list-none" };
 const _hoisted_5$5 = ["checked"];
 const _hoisted_6$5 = ["checked"];
-const _hoisted_7$4 = ["checked"];
+const _hoisted_7$5 = ["checked"];
 function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dh_icon = resolveComponent("dh-icon");
   return openBlock(), createElementBlock("div", _hoisted_1$n, [
@@ -23855,7 +23855,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
                 name: "number_filter",
                 type: "radio",
                 onChange: _cache[3] || (_cache[3] = ($event) => _ctx.excludeFilter())
-              }, null, 40, _hoisted_7$4),
+              }, null, 40, _hoisted_7$5),
               createTextVNode(" " + toDisplayString(_ctx.excludeText), 1)
             ])
           ])
@@ -24439,7 +24439,7 @@ 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_6$4 = /* @__PURE__ */ createElementVNode("br", null, null, -1);
-const _hoisted_7$3 = ["href"];
+const _hoisted_7$4 = ["href"];
 const _hoisted_8$1 = {
   key: 1,
   class: "file__upload_items"
@@ -24739,7 +24739,7 @@ const _sfc_main$e = {
                   "icon-name": "download",
                   size: 24
                 })
-              ], 8, _hoisted_7$3),
+              ], 8, _hoisted_7$4),
               createVNode(DhIcon, {
                 class: "file__upload_list_delete",
                 "icon-name": "delete",
@@ -24878,23 +24878,34 @@ const _hoisted_3$9 = { class: "input__dropdown_second" };
 const _hoisted_4$7 = ["tabindex"];
 const _hoisted_5$3 = ["onClick"];
 const _hoisted_6$3 = ["onClick"];
+const _hoisted_7$3 = {
+  key: 2,
+  class: "button__clear"
+};
 const _sfc_main$d = {
   __name: "InputDropdown",
   props: {
-    list: {
+    options: {
       type: Array,
       required: true
     },
     labelProp: {
       type: String,
+      required: false,
       default: "label"
     },
+    valueProp: {
+      type: String,
+      required: false,
+      default: "id"
+    },
     icon: {
       type: String,
       required: true
     },
     placeholderInput: {
       type: String,
+      required: false,
       default: "Enter value"
     },
     tabindex: {
@@ -24907,38 +24918,53 @@ const _sfc_main$d = {
       required: false,
       default: ""
     },
-    inputIndex: {
-      type: Number,
-      required: false,
-      default: 0
-    },
     inputWidth: {
       type: String,
       required: false,
       default: "75%"
     },
-    inputFirstValue: {
-      type: String,
+    selectedOption: {
+      type: Object,
       required: false,
       default: null
+    },
+    isClearable: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
-  emits: ["update"],
+  emits: ["update", "clear"],
   setup(__props, { emit }) {
     const props = __props;
-    const selected = ref(props.list[0].label);
+    const selectedIndex = ref(0);
+    const selected = ref("");
     const open = ref(false);
-    const name = ref(null);
+    const name = ref("");
+    const displayText = computed(() => {
+      if (selected.value.length > 23) {
+        return selected.value.substring(0, 20) + "...";
+      }
+      return selected.value;
+    });
     onMounted(() => {
-      emit("update", "", selected.value);
+      if (props.inputValue) {
+        name.value.value = props.inputValue;
+      }
+      if (props.selectedOption) {
+        selectedIndex.value = getOptionIndex(props.selectedOption);
+      }
+      selected.value = props.options[selectedIndex.value].label;
     });
     function update() {
-      emit("update", name.value.value, selected.value, props.inputIndex);
+      emit("update", name.value.value, props.options[selectedIndex.value]);
+    }
+    function clear2() {
+      emit("clear");
+    }
+    function getOptionIndex(option) {
+      return props.options.findIndex((e2) => e2[props.valueProp] === option[props.valueProp]);
     }
-    watch(() => props.inputFirstValue, (value) => {
-      name.value.value = value;
-      emit("update", name.value.value, selected.value, props.inputIndex);
-    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$d, [
         createElementVNode("input", {
@@ -24964,37 +24990,46 @@ const _sfc_main$d = {
             createElementVNode("div", {
               class: normalizeClass(["custom__select_selected", { "custom__select--open": open.value }]),
               onClick: _cache[0] || (_cache[0] = ($event) => open.value = !open.value)
-            }, toDisplayString(selected.value), 3),
-            typeof __props.list[0] === "object" ? (openBlock(), createElementBlock("div", {
+            }, toDisplayString(unref(displayText)), 3),
+            typeof __props.options[0] === "object" ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: normalizeClass(["custom__select_items", { "custom__select--hide": !open.value }])
             }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.list, (option, index) => {
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
                 return openBlock(), createElementBlock("div", {
                   key: index,
                   onClick: ($event) => {
                     selected.value = option[__props.labelProp];
+                    selectedIndex.value = index;
                     open.value = false;
                     update();
                   }
                 }, toDisplayString(option[__props.labelProp]), 9, _hoisted_5$3);
               }), 128))
             ], 2)) : createCommentVNode("", true),
-            typeof __props.list[0] === "string" ? (openBlock(), createElementBlock("div", {
+            typeof __props.options[0] === "string" ? (openBlock(), createElementBlock("div", {
               key: 1,
               class: normalizeClass(["custom__select_items", { "custom__select--hide": !open.value }])
             }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.list, (option, index) => {
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
                 return openBlock(), createElementBlock("div", {
                   key: index,
                   onClick: ($event) => {
                     selected.value = option;
+                    selectedIndex.value = index;
                     open.value = false;
                     update();
                   }
                 }, toDisplayString(option), 9, _hoisted_6$3);
               }), 128))
-            ], 2)) : createCommentVNode("", true)
+            ], 2)) : createCommentVNode("", true),
+            props.isClearable ? (openBlock(), createElementBlock("div", _hoisted_7$3, [
+              createVNode(DhButton, {
+                icon: "close",
+                onClick: clear2,
+                color: "ghost"
+              })
+            ])) : createCommentVNode("", true)
           ], 40, _hoisted_4$7)
         ])
       ]);
@@ -25009,7 +25044,13 @@ const _sfc_main$c = {
   props: {
     labelProp: {
       type: String,
-      default: "Label"
+      required: false,
+      default: "label"
+    },
+    valueProp: {
+      type: String,
+      required: false,
+      default: "id"
     },
     icon: {
       type: String,
@@ -25017,6 +25058,7 @@ const _sfc_main$c = {
     },
     placeholderInput: {
       type: String,
+      required: false,
       default: "Enter value"
     },
     tabindex: {
@@ -25024,48 +25066,41 @@ const _sfc_main$c = {
       required: false,
       default: 0
     },
-    inputIndex: {
-      type: Number,
-      required: false,
-      default: 0
-    },
     inputWidth: {
       type: String,
       required: false,
       default: "75%"
     },
-    multipleProp: {
+    value: {
       type: Array,
       required: true
     },
-    inputFirstValue: {
-      type: String,
-      required: false,
-      default: null
+    options: {
+      type: Array,
+      required: true
     }
   },
   emits: ["update"],
   setup(__props, { emit }) {
     const props = __props;
-    const multiple = reactive(props.multipleProp);
-    function updateDropdown(name, email, index) {
+    const multiple = reactive(props.value);
+    function updateDropdown(index, input, option) {
       if (multiple) {
-        multiple.map((item) => {
-          if (item.id === index) {
-            item.input = name;
-            item.optionSelected = email;
-          }
-        });
+        multiple[index].input = input;
+        multiple[index].selectedOption = option;
         emit("update", multiple);
       }
     }
+    function removeItem(index) {
+      if (multiple.length > 1) {
+        multiple.splice(index, 1);
+      }
+    }
     function addMultiple() {
       if (multiple) {
         multiple.push({
-          id: multiple.length + 1,
-          list: multiple[0].list,
           input: null,
-          optionSelected: null
+          selectedOption: null
         });
       }
     }
@@ -25087,15 +25122,18 @@ const _sfc_main$c = {
           return openBlock(), createBlock(_sfc_main$d, {
             key: index,
             icon: props.icon,
-            "input-first-value": props.inputFirstValue,
-            "input-index": item.id,
+            "selected-option": item.selectedOption,
             "input-value": item.input,
             "input-width": props.inputWidth,
-            list: item.list,
+            options: props.options,
             "placeholder-input": props.placeholderInput,
             tabindex: props.tabindex,
-            onUpdate: updateDropdown
-          }, null, 8, ["icon", "input-first-value", "input-index", "input-value", "input-width", "list", "placeholder-input", "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"]);
         }), 128))
       ], 64);
     };