@code-coaching/vuetiful 0.25.0 → 0.26.0

package/dist/types/directives/click-outside-group.d.ts

@@ -0,0 +1,9 @@
+import { DirectiveBinding } from 'vue';
+interface HTMLElementWithClickOutsideHandler extends HTMLElement {
+    _clickOutsideHandler?: (event: MouseEvent) => void;
+}
+declare const clickOutsideGroup: {
+    mounted(el: HTMLElementWithClickOutsideHandler, binding: DirectiveBinding): void;
+    beforeUnmount(el: HTMLElementWithClickOutsideHandler): void;
+};
+export default clickOutsideGroup;

package/dist/types/directives/click-outside-group.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/directives/click-outside.d.ts

@@ -0,0 +1,9 @@
+import { DirectiveBinding } from 'vue';
+interface HTMLElementWithClickOutsideHandler extends HTMLElement {
+    _clickOutsideHandler?: (event: MouseEvent) => void;
+}
+declare const clickOutside: {
+    mounted(el: HTMLElementWithClickOutsideHandler, binding: DirectiveBinding): void;
+    beforeUnmount(el: HTMLElementWithClickOutsideHandler): void;
+};
+export default clickOutside;

package/dist/types/directives/click-outside.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/directives/index.d.ts

@@ -1,2 +1,4 @@
+import vClickOutside from './click-outside';
+import vClickOutsideGroup from './click-outside-group';
 import vClipboard from './clipboard';
-export { vClipboard };
+export { vClickOutside, vClickOutsideGroup, vClipboard };

package/dist/vuetiful.es.mjs

@@ -50071,7 +50071,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["class"]),
-        showPopup.value ? (openBlock(), createElementBlock("div", {
+        showPopup.value ? withDirectives((openBlock(), createElementBlock("div", {
           key: 0,
           class: normalizeClass(["vuetiful-theme-switcher__popup absolute z-10 mt-1 space-y-4 p-4 shadow-xl rounded-container-token", `${__props.background} ${__props.text} ${__props.widthPopup} ${__props.classList}`])
         }, [
@@ -50095,7 +50095,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, 1032, ["class", "onClick"]);
             }), 128))
           ], 2)
-        ], 2)) : createCommentVNode("", true)
+        ], 2)), [
+          [unref(clickOutsideGroup), {
+            elementsInGroup: [".vuetiful-theme-switcher__button"],
+            callback: () => showPopup.value = false
+          }]
+        ]) : createCommentVNode("", true)
       ]);
     };
   }
@@ -50440,6 +50445,48 @@ ${generateColorCSS(theme)}
     registerTheme
   };
 };
+const clickOutside = {
+  mounted(el, binding) {
+    const clickOutsideHandler = (event) => {
+      if (!el.contains(event.target)) {
+        binding.value();
+      }
+    };
+    document.addEventListener("click", clickOutsideHandler);
+    el._clickOutsideHandler = clickOutsideHandler;
+  },
+  beforeUnmount(el) {
+    if (el._clickOutsideHandler) {
+      document.removeEventListener("click", el._clickOutsideHandler);
+      delete el._clickOutsideHandler;
+    }
+  }
+};
+const clickOutsideGroup = {
+  mounted(el, binding) {
+    const { elementsInGroup = [], callback } = binding.value;
+    const elementsToIgnore = elementsInGroup.map((selector) => {
+      const allElements = document.querySelectorAll(selector);
+      const elements = Array.from(allElements);
+      return elements;
+    });
+    const allElementsToIgnore = elementsToIgnore.flat();
+    const clickOutsideHandler = (event) => {
+      const clickedIgnoreElement = allElementsToIgnore.some((el2) => el2 == null ? void 0 : el2.contains(event.target));
+      if (!el.contains(event.target) && !clickedIgnoreElement) {
+        callback();
+      }
+    };
+    document.addEventListener("click", clickOutsideHandler);
+    el._clickOutsideHandler = clickOutsideHandler;
+  },
+  beforeUnmount(el) {
+    if (el._clickOutsideHandler) {
+      document.removeEventListener("click", el._clickOutsideHandler);
+      delete el._clickOutsideHandler;
+    }
+  }
+};
 const clipboard = (el, binding) => {
   el.addEventListener("click", () => {
     navigator.clipboard.writeText(binding.value);
@@ -50451,4 +50498,4 @@ function install(app) {
   }
 }
 var index = { install };
-export { _sfc_main as ThemeSwitcher, _sfc_main$8 as VAccordion, VAccordionItem, VAlert, _sfc_main$y as VAvatar, _sfc_main$x as VBadge, _sfc_main$w as VButton, _sfc_main$5 as VCard, _sfc_main$4 as VCardBody, _sfc_main$3 as VCardFooter, _sfc_main$2 as VCardHeader, _sfc_main$v as VChip, _sfc_main$1 as VCodeBlock, _sfc_main$l as VDrawer, VLightSwitch, _sfc_main$d as VListbox, VListboxButton, _sfc_main$c as VListboxItem, _sfc_main$f as VListboxItems, _sfc_main$e as VListboxLabel, VPreview, _sfc_main$t as VRadioDescription, _sfc_main$s as VRadioGroup, _sfc_main$r as VRadioItem, _sfc_main$q as VRadioLabel, _sfc_main$j as VRail, _sfc_main$i as VRailTile, _sfc_main$h as VShell, _sfc_main$p as VSwitch, _sfc_main$o as VSwitchDescription, _sfc_main$n as VSwitchGroup, _sfc_main$m as VSwitchLabel, _sfc_main$b as VTab, _sfc_main$a as VTabPanel, _sfc_main$9 as VTabs, index as default, useColors, useDarkMode, useDrawer, useHighlight, usePlatform, useRail, useSettings, useTheme, clipboard as vClipboard };
+export { _sfc_main as ThemeSwitcher, _sfc_main$8 as VAccordion, VAccordionItem, VAlert, _sfc_main$y as VAvatar, _sfc_main$x as VBadge, _sfc_main$w as VButton, _sfc_main$5 as VCard, _sfc_main$4 as VCardBody, _sfc_main$3 as VCardFooter, _sfc_main$2 as VCardHeader, _sfc_main$v as VChip, _sfc_main$1 as VCodeBlock, _sfc_main$l as VDrawer, VLightSwitch, _sfc_main$d as VListbox, VListboxButton, _sfc_main$c as VListboxItem, _sfc_main$f as VListboxItems, _sfc_main$e as VListboxLabel, VPreview, _sfc_main$t as VRadioDescription, _sfc_main$s as VRadioGroup, _sfc_main$r as VRadioItem, _sfc_main$q as VRadioLabel, _sfc_main$j as VRail, _sfc_main$i as VRailTile, _sfc_main$h as VShell, _sfc_main$p as VSwitch, _sfc_main$o as VSwitchDescription, _sfc_main$n as VSwitchGroup, _sfc_main$m as VSwitchLabel, _sfc_main$b as VTab, _sfc_main$a as VTabPanel, _sfc_main$9 as VTabs, index as default, useColors, useDarkMode, useDrawer, useHighlight, usePlatform, useRail, useSettings, useTheme, clickOutside as vClickOutside, clickOutsideGroup as vClickOutsideGroup, clipboard as vClipboard };