@code-coaching/vuetiful 0.25.0 → 0.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "license": "MIT",
   "scripts": {
     "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",

package/src/directives/click-outside-group.test.ts

@@ -0,0 +1,44 @@
+import { mount } from '@vue/test-utils';
+import { describe, test, vi, expect } from 'vitest'
+import { vClickOutsideGroup } from '.';
+
+interface HTMLElementWithClickOutsideHandler extends HTMLElement {
+  _clickOutsideHandler?: (event: MouseEvent) => void;
+}
+
+describe('vClickOutsideGroup Directive', () => {
+  test("should call the callback when clicking outside the element", async () => {
+    const callback = vi.fn();
+
+    const innerElement = document.createElement('div');
+    const outerElement = document.createElement('div');
+    outerElement.id = 'outer';
+    document.body.appendChild(outerElement);
+    document.body.appendChild(innerElement);
+    
+    const directiveBinding = { value: {
+      elementsInGroup: ['#outer'],
+      callback
+    } } as any;
+    vClickOutsideGroup.mounted(innerElement, directiveBinding);
+
+    innerElement.click();
+    expect(callback).not.toHaveBeenCalled();
+    outerElement.click();
+    expect(callback).not.toHaveBeenCalled();
+    document.body.click();
+    expect(callback).toHaveBeenCalled();
+  })
+
+  test("should remove _clickOutsideHandler when unmounted", async () => {
+    const callback = vi.fn();
+    const directiveBinding = { value: callback } as any;
+    const innerElement = document.createElement('div') as HTMLElementWithClickOutsideHandler;
+    document.body.appendChild(innerElement);
+    vClickOutsideGroup.mounted(innerElement, directiveBinding);
+
+    expect(innerElement._clickOutsideHandler).toBeDefined();
+    vClickOutsideGroup.beforeUnmount(innerElement);
+    expect(innerElement._clickOutsideHandler).toBeUndefined();
+  })
+});

package/src/directives/click-outside-group.ts

@@ -0,0 +1,39 @@
+import { DirectiveBinding } from 'vue';
+
+interface HTMLElementWithClickOutsideHandler extends HTMLElement {
+  _clickOutsideHandler?: (event: MouseEvent) => void;
+}
+
+const clickOutsideGroup = {
+  mounted(el: HTMLElementWithClickOutsideHandler, binding: DirectiveBinding) {
+    const { elementsInGroup = [], callback } = binding.value;
+
+    const elementsToIgnore = elementsInGroup.map((selector: string) => {
+      const allElements = document.querySelectorAll(selector);
+      const elements = Array.from(allElements) as HTMLElement[];
+      return elements;
+    });
+
+    const allElementsToIgnore = elementsToIgnore.flat();
+
+    const clickOutsideHandler = (event: MouseEvent) => {
+      const clickedIgnoreElement = allElementsToIgnore.some((el: HTMLElement) => el?.contains(event.target as Node));
+      if (!el.contains(event.target as Node) && !clickedIgnoreElement) {
+        callback();
+      }
+    };
+
+    document.addEventListener('click', clickOutsideHandler);
+
+    el._clickOutsideHandler = clickOutsideHandler;
+  },
+
+  beforeUnmount(el: HTMLElementWithClickOutsideHandler) {
+    if (el._clickOutsideHandler) {
+      document.removeEventListener('click', el._clickOutsideHandler);
+      delete el._clickOutsideHandler;
+    }
+  },
+};
+
+export default clickOutsideGroup;

package/src/directives/click-outside.test.ts

@@ -0,0 +1,38 @@
+import { mount } from '@vue/test-utils';
+import { describe, test, vi, expect } from 'vitest'
+import { vClickOutside } from '.';
+
+interface HTMLElementWithClickOutsideHandler extends HTMLElement {
+  _clickOutsideHandler?: (event: MouseEvent) => void;
+}
+
+describe('vClickOutside Directive', () => {
+  test("should call the callback when clicking outside the element", async () => {
+    const callback = vi.fn();
+
+    const innerElement = document.createElement('div');
+    document.body.appendChild(innerElement);
+
+    const directiveBinding = { value: callback } as any;
+    vClickOutside.mounted(innerElement, directiveBinding);
+
+    innerElement.click();
+    expect(callback).not.toHaveBeenCalled();
+    document.body.click();
+    expect(callback).toHaveBeenCalled();
+  })
+
+  test("should remove _clickOutsideHandler when unmounted", async () => {
+    const callback = vi.fn();
+
+    const innerElement = document.createElement('div') as HTMLElementWithClickOutsideHandler;
+    document.body.appendChild(innerElement);
+
+    const directiveBinding = { value: callback } as any;
+    vClickOutside.mounted(innerElement, directiveBinding);
+
+    expect(innerElement._clickOutsideHandler).toBeDefined();
+    vClickOutside.beforeUnmount(innerElement);
+    expect(innerElement._clickOutsideHandler).toBeUndefined();
+  })
+});

package/src/directives/click-outside.ts

@@ -0,0 +1,28 @@
+import { DirectiveBinding } from 'vue';
+
+interface HTMLElementWithClickOutsideHandler extends HTMLElement {
+  _clickOutsideHandler?: (event: MouseEvent) => void;
+}
+
+const clickOutside = {
+  mounted(el: HTMLElementWithClickOutsideHandler, binding: DirectiveBinding) {
+    const clickOutsideHandler = (event: MouseEvent) => {
+      if (!el.contains(event.target as Node)) {
+        binding.value();
+      }
+    };
+
+    document.addEventListener('click', clickOutsideHandler);
+
+    el._clickOutsideHandler = clickOutsideHandler;
+  },
+
+  beforeUnmount(el: HTMLElementWithClickOutsideHandler) {
+    if (el._clickOutsideHandler) {
+      document.removeEventListener('click', el._clickOutsideHandler);
+      delete el._clickOutsideHandler;
+    }
+  },
+};
+
+export default clickOutside;

package/src/directives/index.ts

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

package/src/utils/theme/theme-switcher.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CssClasses, useTheme, VButton, VLightSwitch } from '@/index';
+import { CssClasses, VButton, VLightSwitch, useTheme, vClickOutsideGroup } from '@/index';
 import { ref } from 'vue';
 
 defineProps({
@@ -48,6 +48,10 @@ const showPopup = ref(false);
 
     <div
       v-if="showPopup"
+      v-click-outside-group="{
+        elementsInGroup: ['.vuetiful-theme-switcher__button'],
+        callback: () => (showPopup = false),
+      }"
       class="vuetiful-theme-switcher__popup absolute z-10 mt-1 space-y-4 p-4 shadow-xl rounded-container-token"
       :class="`${background} ${text} ${widthPopup} ${classList}`"
     >