@hunter-industries/hunter-components 0.0.103 → 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",
@@ -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: {