@hunter-industries/hunter-components 0.0.89 → 0.0.90

package/dist/hunter-components.js

@@ -2809,7 +2809,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     id: {},
     selected: {},
     variant: {},
-    showClearButton: { type: Boolean }
+    showClearButton: { type: Boolean },
+    listMaxHeight: {}
   },
   emits: ["selectOption"],
   setup(__props, { emit: __emit }) {
@@ -2820,9 +2821,18 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     const listOptions = computed(
       () => props.options.filter((item) => !item.placeholder) || []
     );
-    const handleSelectedOption = (option) => {
+    const resolvedMaxHeight = computed(() => props.listMaxHeight ?? 244);
+    const scrollStyle = computed(() => {
+      if (!isScrollable.value)
+        return void 0;
+      return {
+        maxHeight: `${resolvedMaxHeight.value}px`,
+        overflowY: "auto"
+      };
+    });
+    function handleSelectedOption(option) {
       emit("selectOption", option);
-    };
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         id: `dropdown-list-${_ctx.id}`,
@@ -2832,7 +2842,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         createElementVNode("div", _hoisted_2$6, [
           createElementVNode("ol", {
             ref: "dropdown",
-            class: normalizeClass(["hunter-dropdown-ol", isScrollable.value && "max-h-44 overflow-y-auto"])
+            class: "hunter-dropdown-ol",
+            style: normalizeStyle(scrollStyle.value)
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(listOptions.value, (item) => {
               return openBlock(), createElementBlock("li", {
@@ -2857,13 +2868,13 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                 onClick: _cache[0] || (_cache[0] = ($event) => handleSelectedOption({ id: null, name: null }))
               }, " Clear Selection ")) : createCommentVNode("", true)
             ])
-          ], 2)
+          ], 4)
         ])
       ], 10, _hoisted_1$8);
     };
   }
 });
-const DropdownList = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-fee97d10"]]);
+const DropdownList = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-ce8d21c1"]]);
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "DropdownListWithFilter",
   props: {
@@ -3074,7 +3085,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     dropdownClassName: {},
     disabled: { type: Boolean },
     scrollable: { type: Boolean },
-    showClearButton: { type: Boolean }
+    showClearButton: { type: Boolean },
+    listMaxHeight: {}
   },
   emits: ["selectOption"],
   setup(__props, { emit: __emit }) {
@@ -3092,11 +3104,11 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     const collapsed = ref(true);
     const selectedItem = ref();
     const dropdownButtonText = ref(
-      props.defaultText || props.placeholderText || props.options[0].name
+      props.defaultText || props.placeholderText || ""
     );
     watch(collapsed, (value) => {
       if (value === false) {
-        return document.addEventListener("click", handleOutsideClick);
+        document.addEventListener("click", handleOutsideClick);
       } else {
         document.removeEventListener("click", handleOutsideClick);
       }
@@ -3109,34 +3121,35 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     const toggleDropdown = () => {
       collapsed.value = !collapsed.value;
     };
-    const handleSelectedOption = (item) => {
-      var _a;
+    function handleSelectedOption(item) {
       selectedItem.value = item;
-      if (item.name === null && item.id === null) {
-        dropdownButtonText.value = props.placeholderText || ((_a = props.options[0]) == null ? void 0 : _a.name);
+      if ((item == null ? void 0 : item.name) === null && (item == null ? void 0 : item.id) === null) {
+        dropdownButtonText.value = props.placeholderText || "";
         emit("selectOption", { id: null, name: null });
-        return dropdownButtonText.value;
+        return;
       }
-      dropdownButtonText.value = item.name;
+      dropdownButtonText.value = (item == null ? void 0 : item.name) ?? "";
       setTimeout(() => {
         collapsed.value = true;
       }, 300);
       emit("selectOption", item);
-      return dropdownButtonText.value;
-    };
-    const handleOutsideClick = (e) => {
+    }
+    function handleClearSelection() {
+      selectedItem.value = null;
+      dropdownButtonText.value = props.placeholderText || "";
+      emit("selectOption", { id: null, name: null });
+      collapsed.value = true;
+    }
+    function handleOutsideClick(e) {
       var _a;
       const target = e.target;
       const btn = (_a = dropdownButton == null ? void 0 : dropdownButton.value) == null ? void 0 : _a.buttonEl;
       if (!target || !btn || (target == null ? void 0 : target.id) !== (btn == null ? void 0 : btn.id)) {
         collapsed.value = true;
       }
-    };
+    }
     onBeforeUnmount(() => {
-      return document.removeEventListener(
-        "click",
-        (e) => handleOutsideClick(e)
-      );
+      document.removeEventListener("click", handleOutsideClick);
     });
     return (_ctx, _cache) => {
       var _a;
@@ -3171,14 +3184,16 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             variant: ((_a = _ctx.variant) == null ? void 0 : _a.includes("small")) ? "small" : "default",
             "show-clear-button": _ctx.showClearButton,
             scrollable: _ctx.scrollable,
-            onSelectOption: handleSelectedOption
-          }, null, 8, ["options", "option-key", "collapsed", "selected", "variant", "show-clear-button", "scrollable"])
+            "list-max-height": _ctx.listMaxHeight,
+            onSelectOption: handleSelectedOption,
+            onClearSelection: handleClearSelection
+          }, null, 8, ["options", "option-key", "collapsed", "selected", "variant", "show-clear-button", "scrollable", "list-max-height"])
         ], 8, _hoisted_1$5)
       ], 2);
     };
   }
 });
-const Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-d0720735"]]);
+const Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-257d9ae4"]]);
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "ButtonDropdownColors",
   props: {