@hunter-industries/hunter-components 0.0.89 → 0.0.91

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: {
@@ -3376,7 +3391,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   }
 });
 const FormInput = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-7719e3d0"]]);
-const _withScopeId = (n) => (pushScopeId("data-v-d49ef131"), n = n(), popScopeId(), n);
+const _withScopeId = (n) => (pushScopeId("data-v-26606b3a"), n = n(), popScopeId(), n);
 const _hoisted_1$3 = { class: "unit-selection-container" };
 const _hoisted_2$2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("span", { class: "font-medium" }, "Units", -1));
 const _hoisted_3$1 = { class: "unit-selection" };
@@ -3401,7 +3416,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     submitButtonText: {},
     cancelButtonText: {},
     showCancelButton: { type: Boolean },
-    successSubmitButtonDisabled: { type: Boolean }
+    successSubmitButtonDisabled: { type: Boolean },
+    focusOnFirstInput: { type: Boolean }
   },
   emits: ["cancelSubmit", "submitForm"],
   setup(__props, { emit: __emit }) {
@@ -3414,6 +3430,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     } = toRefs(props);
     const status = ref(props.submitStatus);
     const formInputs = ref(props.inputs);
+    const form = ref();
     const unit = ref("en");
     const emit = __emit;
     const canSubmit = computed(() => {
@@ -3516,6 +3533,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           handleFormSubmit(e);
         }
       });
+      if (props.focusOnFirstInput) {
+        if (form.value && form.value[0]) {
+          form.value[0].focus();
+        }
+      }
     });
     onBeforeUnmount(() => {
       document.removeEventListener("keydown", (e) => {
@@ -3533,7 +3555,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("form", {
         class: "hunter-component hunter-form",
         onSubmit: withModifiers(handleFormSubmit, ["prevent"]),
-        novalidate: ""
+        novalidate: "",
+        ref_key: "form",
+        ref: form
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(formInputs.value, (input, index2) => {
           return openBlock(), createBlock(FormInput, mergeProps({
@@ -3596,11 +3620,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             type: "submit"
           }), null, 16, ["class", "status", "disabled"])
         ])
-      ], 32);
+      ], 544);
     };
   }
 });
-const index = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-d49ef131"]]);
+const index = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-26606b3a"]]);
 const _hoisted_1$2 = ["href"];
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "Link",