@hunter-industries/hunter-components 0.0.102 → 0.0.104

package/dist/hunter-components.js

@@ -1,4 +1,4 @@
-import { createElementBlock, openBlock, createElementVNode, createStaticVNode, defineComponent, toRefs, computed, ref, createBlock, createCommentVNode, resolveDynamicComponent, mergeProps, normalizeStyle, normalizeClass, renderSlot, toDisplayString, unref, createVNode, createTextVNode, watchEffect, withDirectives, vShow, withCtx, vModelCheckbox, Fragment, renderList, watch, onBeforeUnmount, withModifiers, onMounted, vModelRadio, pushScopeId, popScopeId, vModelText, useCssVars } from "vue";
+import { createElementBlock, openBlock, createElementVNode, createStaticVNode, defineComponent, toRefs, computed, ref, createBlock, createCommentVNode, resolveDynamicComponent, mergeProps, normalizeStyle, normalizeClass, renderSlot, toDisplayString, unref, createVNode, createTextVNode, watchEffect, withDirectives, vShow, withCtx, vModelCheckbox, Fragment, renderList, watch, onMounted, onBeforeUnmount, withModifiers, vModelRadio, pushScopeId, popScopeId, vModelText, useCssVars } from "vue";
 const _hoisted_1$28 = {
   xmlns: "http://www.w3.org/2000/svg",
   fill: "currentColor",
@@ -1255,11 +1255,11 @@ const _hoisted_1$Z = {
   fill: "none"
 };
 const _hoisted_2$V = /* @__PURE__ */ createStaticVNode('<circle cx="16" cy="16" r="15.625" fill="#fff" opacity=".8"></circle><path fill="#68aee0" d="M18.859 27.5v-23h6.64v23z"></path><path fill="#3A2F26" d="M20.756 27.501v-23h2.846v23z"></path><path fill="#68aee0" d="M20.76 19.91H2.5v-6.64h18.26z"></path><path fill="#3A2F26" d="M20.761 18.012H2.501v-2.846h18.26z"></path>', 5);
-const _hoisted_7$2 = [
+const _hoisted_7$1 = [
   _hoisted_2$V
 ];
 function render$J(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$Z, [..._hoisted_7$2]);
+  return openBlock(), createElementBlock("svg", _hoisted_1$Z, [..._hoisted_7$1]);
 }
 const __vite_glob_0_75 = { render: render$J };
 const _hoisted_1$Y = {
@@ -2745,8 +2745,8 @@ const _hoisted_3$8 = {
 const _hoisted_4$7 = ["src", "alt"];
 const _hoisted_5$4 = { class: "hc__card__text" };
 const _hoisted_6$2 = { class: "hc__card__text__description" };
-const _hoisted_7$1 = { class: "card-description-body-wrapper" };
-const _hoisted_8$1 = { class: "description" };
+const _hoisted_7 = { class: "card-description-body-wrapper" };
+const _hoisted_8 = { class: "description" };
 const _hoisted_9 = {
   key: 0,
   class: "hc__card__buttons float2"
@@ -2815,8 +2815,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             createElementVNode("div", {
               class: normalizeClass(["hc__card__text__title", "uppercase"])
             }, toDisplayString(_ctx.title), 1),
-            createElementVNode("div", _hoisted_7$1, [
-              createElementVNode("div", _hoisted_8$1, [
+            createElementVNode("div", _hoisted_7, [
+              createElementVNode("div", _hoisted_8, [
                 !_ctx.hideToggleButton ? (openBlock(), createElementBlock("div", _hoisted_9, [
                   withDirectives(createVNode(unref(_sfc_main$l), {
                     variant: "icon-primary",
@@ -3271,6 +3271,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$6 = ["id"];
+const DROPDOWN_OPEN_EVENT = "hunter:dropdown-open";
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "Dropdown",
   props: {
@@ -3318,9 +3319,31 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         collapsed.value = true;
       }
     });
+    onMounted(() => {
+      window.addEventListener(
+        DROPDOWN_OPEN_EVENT,
+        handleOtherDropdownOpen
+      );
+    });
     const toggleDropdown = () => {
+      const wasCollapsed = collapsed.value;
       collapsed.value = !collapsed.value;
+      if (wasCollapsed === true && collapsed.value === false) {
+        window.dispatchEvent(
+          new CustomEvent(DROPDOWN_OPEN_EVENT, {
+            detail: { dropdownId: dropdownId.value }
+          })
+        );
+      }
     };
+    function handleOtherDropdownOpen(e) {
+      var _a;
+      const openedId = (_a = e.detail) == null ? void 0 : _a.dropdownId;
+      if (!openedId) return;
+      if (openedId !== dropdownId.value) {
+        collapsed.value = true;
+      }
+    }
     function handleSelectedOption(item) {
       selectedItem.value = item;
       if ((item == null ? void 0 : item.name) === null && (item == null ? void 0 : item.id) === null) {
@@ -3341,15 +3364,19 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       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)) {
+      const root = dropdownWithButton.value;
+      if (!root || !target) return;
+      if (!root.contains(target)) {
         collapsed.value = true;
       }
     }
     onBeforeUnmount(() => {
       document.removeEventListener("click", handleOutsideClick);
+      window.removeEventListener(
+        DROPDOWN_OPEN_EVENT,
+        handleOtherDropdownOpen
+      );
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -3392,7 +3419,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-c575183f"]]);
+const Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-2791a8b6"]]);
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "ButtonDropdownColors",
   props: {
@@ -4152,17 +4179,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
 const SearchInput = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-603385ac"]]);
-const _hoisted_1 = { class: "slider-and-single-unit-container" };
-const _hoisted_2 = { class: "slider-with-descriptions" };
-const _hoisted_3 = { class: "slider-container" };
-const _hoisted_4 = {
+const _hoisted_1 = { class: "slider-with-descriptions" };
+const _hoisted_2 = ["min", "max"];
+const _hoisted_3 = {
   class: "ticks",
   "aria-hidden": "true"
 };
-const _hoisted_5 = { class: "text-under-slider" };
-const _hoisted_6 = { class: "text" };
-const _hoisted_7 = { class: "title" };
-const _hoisted_8 = {
+const _hoisted_4 = { class: "text-under-slider" };
+const _hoisted_5 = { class: "title" };
+const _hoisted_6 = {
   key: 0,
   class: "unit-text"
 };
@@ -4179,16 +4204,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     text: {},
     tickEvery: { default: 2 },
     showSelection: { type: Boolean, default: true },
-    unit: { default: '"' }
+    unit: { default: '"' },
+    maxCharacterSize: { default: "3ch" },
+    locked: { type: Boolean, default: false }
   },
   emits: ["change", "input"],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "32a6fe14": primaryColor,
-      "05354dbc": secondaryColor,
-      "e10d3100": thumbColor,
-      "49449f78": thumbSize
+      "0f62f7dc": unref(primaryColor),
+      "c9ebfe2c": unref(secondaryColor),
+      "660d9970": unref(thumbColor),
+      "875d6908": unref(thumbSize),
+      "6dccefa1": unref(maxCharacterSize)
     }));
+    const props = __props;
     const {
       min,
       max,
@@ -4199,45 +4228,50 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       thumbSize,
       tickEvery,
       showSelection,
-      unit
-    } = __props;
+      unit,
+      maxCharacterSize
+    } = props;
     const emit = __emit;
     const minN = computed(() => Number(min));
     const maxN = computed(() => Number(max));
     const defN = computed(() => Number(def));
     const slider = ref(null);
     const sliderValue = ref(defN.value);
-    const tickCount = computed(
-      () => Math.floor(max - min) + 1
-    );
+    const tickCount = computed(() => Math.floor(max - min) + 1);
     function calcValue(val) {
-      const el = slider.value;
-      if (!el) return;
-      const hi = Number(el.max || maxN.value);
-      const lo = Number(el.min || minN.value);
-      const pct = (val - lo) / (hi - lo) * 100;
-      el.style.background = `linear-gradient(to right, ${primaryColor} ${pct}%, ${secondaryColor} ${pct}%)`;
       emit("input", val);
     }
+    const sliderBackground = computed(() => {
+      if (props.locked) return "";
+      const hi = maxN.value;
+      const lo = minN.value;
+      const pct = (sliderValue.value - lo) / (hi - lo) * 100;
+      return `linear-gradient(to right, ${primaryColor} ${pct}%, ${secondaryColor} ${pct}%)`;
+    });
     onMounted(() => {
       calcValue(sliderValue.value);
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
-          createElementVNode("div", _hoisted_3, [
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["slider-and-single-unit-container", { "locked": _ctx.locked }])
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", {
+            class: "slider-container",
+            style: normalizeStyle({ "--track-color": sliderBackground.value })
+          }, [
             withDirectives(createElementVNode("input", {
               type: "range",
-              min,
-              max,
+              min: unref(min),
+              max: unref(max),
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => sliderValue.value = $event),
               class: "slider block w-full",
               id: "range",
               ref_key: "slider",
               ref: slider,
-              onInput: _cache[1] || (_cache[1] = ($event) => calcValue(sliderValue.value)),
+              onInput: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("input", sliderValue.value)),
               onChange: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("change", sliderValue.value))
-            }, null, 544), [
+            }, null, 40, _hoisted_2), [
               [
                 vModelText,
                 sliderValue.value,
@@ -4245,34 +4279,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 { number: true }
               ]
             ]),
-            createElementVNode("div", _hoisted_4, [
+            createElementVNode("div", _hoisted_3, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(tickCount.value, (i) => {
                 return openBlock(), createElementBlock("span", {
                   key: i,
                   class: normalizeClass(["tick", {
-                    hide: (i - 1) % tickEvery !== 0,
-                    passed: +min + (i - 1) < +sliderValue.value,
-                    active: +min + (i - 1) === +sliderValue.value
+                    hide: (i - 1) % unref(tickEvery) !== 0,
+                    passed: +unref(min) + (i - 1) < +sliderValue.value
                   }])
                 }, null, 2);
               }), 128))
             ])
-          ]),
-          createElementVNode("div", _hoisted_5, [
+          ], 4),
+          createElementVNode("div", _hoisted_4, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.text, (item, _) => {
-              return openBlock(), createElementBlock("div", _hoisted_6, [
-                createElementVNode("div", _hoisted_7, toDisplayString(item.title), 1),
+              return openBlock(), createElementBlock("div", {
+                key: (item == null ? void 0 : item.title) ?? _,
+                class: "text"
+              }, [
+                createElementVNode("div", _hoisted_5, toDisplayString(item.title), 1),
                 createElementVNode("div", null, toDisplayString(item == null ? void 0 : item.description), 1)
               ]);
-            }), 256))
+            }), 128))
           ])
         ]),
-        showSelection ? (openBlock(), createElementBlock("div", _hoisted_8, toDisplayString(`${sliderValue.value}${unit}`), 1)) : createCommentVNode("", true)
-      ]);
+        unref(showSelection) ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(`${sliderValue.value}${unref(unit)}`), 1)) : createCommentVNode("", true)
+      ], 2);
     };
   }
 });
-const Slider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b87d7551"]]);
+const Slider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2eab50c9"]]);
 export {
   _sfc_main$l as HunterButton,
   ButtonIcon as HunterButtonIcon,