@code-coaching/vuetiful 0.23.0 → 0.23.2

package/src/directives/clipboard.test.ts

@@ -1,6 +1,6 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { DirectiveBinding } from "vue";
-import { vClipboard } from ".";
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { DirectiveBinding } from 'vue';
+import { vClipboard } from '.';
 
 const navigatorMock = {
   clipboard: {
@@ -8,19 +8,19 @@ const navigatorMock = {
   } as any,
 } as any;
 
-describe("clipboard", () => {
+describe('clipboard', () => {
   afterEach(() => {
     vi.resetAllMocks();
   });
-  describe("given the v-clipboard directive is used", () => {
-    it("should copy text to the clipboard on click", () => {
+  describe('given the v-clipboard directive is used', () => {
+    it('should copy text to the clipboard on click', () => {
       window.navigator = navigatorMock;
 
-      const el = document.createElement("div");
-      vClipboard(el, { value: "John Duck" } as DirectiveBinding);
+      const el = document.createElement('div');
+      vClipboard(el, { value: 'John Duck' } as DirectiveBinding);
       el.click();
 
-      expect(navigator.clipboard.writeText).toHaveBeenCalledWith("John Duck");
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith('John Duck');
     });
   });
 });

package/src/directives/clipboard.ts

@@ -1,7 +1,7 @@
-import { DirectiveBinding } from "vue";
+import { DirectiveBinding } from 'vue';
 
 const clipboard = (el: HTMLElement, binding: DirectiveBinding) => {
-  el.addEventListener("click", () => {
+  el.addEventListener('click', () => {
     navigator.clipboard.writeText(binding.value);
   });
 };

package/src/directives/index.ts

@@ -1,3 +1,3 @@
-import vClipboard from "./clipboard";
+import vClipboard from './clipboard';
 
 export { vClipboard };

package/src/env.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 
-declare module "*.vue" {
-  import { DefineComponent } from "vue";
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
   const component: DefineComponent<{}, {}, any>;
   export default component;

package/src/index.test.ts

@@ -1,16 +1,16 @@
-import { describe, expect, it, vi } from "vitest";
-import * as components from "./components";
-import plugin, * as index from "./index";
+import { describe, expect, it, vi } from 'vitest';
+import * as components from './components';
+import plugin, * as index from './index';
 
-describe("src", () => {
+describe('src', () => {
   Object.entries(index).forEach(([key, value]) => {
     it(`${key} is defined`, () => {
       expect(value).toBeDefined();
     });
   });
 
-  describe("given install is called", () => {
-    it("should register all components", () => {
+  describe('given install is called', () => {
+    it('should register all components', () => {
       const app = {
         component: vi.fn(),
       };

package/src/index.ts

@@ -1,4 +1,4 @@
-import * as components from "./components";
+import * as components from './components';
 
 function install(app: any) {
   for (const key in components) {
@@ -7,15 +7,15 @@ function install(app: any) {
   }
 }
 
-import "./assets/main.css";
-import "./styles/tailwind.css";
+import './assets/main.css';
+import './styles/tailwind.css';
 
 export default { install };
 
-export * from "./components";
-export * from "./utils";
-export * from "./directives";
-export * from "./services";
+export * from './components';
+export * from './utils';
+export * from './directives';
+export * from './services';
 
 // This type alias is to identify CSS classes within component props, which enables Tailwind IntelliSense
 export type CssClasses = string;

package/src/props/index.ts

@@ -1 +1 @@
-export * from './props';
+export * from './props';

package/src/props/props.ts

@@ -1,8 +1,8 @@
-import { Size, Variant } from "@/types";
-import { PropType } from "vue";
+import { Size, Variant } from '@/types';
+import { PropType } from 'vue';
 
 const sizeProp = {
-  type: String as PropType<"xs" | "sm" | "md" | "lg" | "xl">,
+  type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
   default: Size.MD,
 };
 
@@ -14,47 +14,47 @@ const unstyledProp = {
 const variantProp = {
   // explicit string union because TypeScript type won't throw error if invalid value is passed
   type: String as PropType<
-    | ""
-    | "filled"
-    | "filled-primary"
-    | "filled-secondary"
-    | "filled-tertiary"
-    | "filled-success"
-    | "filled-warning"
-    | "filled-error"
-    | "filled-surface"
-    | "ringed"
-    | "ringed-primary"
-    | "ringed-secondary"
-    | "ringed-tertiary"
-    | "ringed-success"
-    | "ringed-warning"
-    | "ringed-error"
-    | "ringed-surface"
-    | "ghost"
-    | "ghost-primary"
-    | "ghost-secondary"
-    | "ghost-tertiary"
-    | "ghost-success"
-    | "ghost-warning"
-    | "ghost-error"
-    | "ghost-surface"
-    | "soft"
-    | "soft-primary"
-    | "soft-secondary"
-    | "soft-tertiary"
-    | "soft-success"
-    | "soft-warning"
-    | "soft-error"
-    | "soft-surface"
-    | "glass"
-    | "glass-primary"
-    | "glass-secondary"
-    | "glass-tertiary"
-    | "glass-success"
-    | "glass-warning"
-    | "glass-error"
-    | "glass-surface"
+    | ''
+    | 'filled'
+    | 'filled-primary'
+    | 'filled-secondary'
+    | 'filled-tertiary'
+    | 'filled-success'
+    | 'filled-warning'
+    | 'filled-error'
+    | 'filled-surface'
+    | 'ringed'
+    | 'ringed-primary'
+    | 'ringed-secondary'
+    | 'ringed-tertiary'
+    | 'ringed-success'
+    | 'ringed-warning'
+    | 'ringed-error'
+    | 'ringed-surface'
+    | 'ghost'
+    | 'ghost-primary'
+    | 'ghost-secondary'
+    | 'ghost-tertiary'
+    | 'ghost-success'
+    | 'ghost-warning'
+    | 'ghost-error'
+    | 'ghost-surface'
+    | 'soft'
+    | 'soft-primary'
+    | 'soft-secondary'
+    | 'soft-tertiary'
+    | 'soft-success'
+    | 'soft-warning'
+    | 'soft-error'
+    | 'soft-surface'
+    | 'glass'
+    | 'glass-primary'
+    | 'glass-secondary'
+    | 'glass-tertiary'
+    | 'glass-success'
+    | 'glass-warning'
+    | 'glass-error'
+    | 'glass-surface'
   >,
   default: Variant.Filled,
 };

package/src/services/dark-mode.service.test.ts

@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 const localStorageMock = {
   getItem: vi.fn(),
@@ -6,47 +6,53 @@ const localStorageMock = {
 };
 const matchMediaMock = (matches: boolean) => vi.fn(() => ({ matches, onchange: vi.fn() }));
 
-describe("useDarkMode", () => {
+describe('useDarkMode', () => {
   afterEach(() => {
     vi.resetModules();
   });
-  describe("getModeUserPrefers", () => {
-    describe("given not in browser", () => {
-      it("should return default modeUserPrefers", async () => {
-        const platform = await import("../utils/platform/platform.service");
-        vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: false });
+  describe('getModeUserPrefers', () => {
+    describe('given not in browser', () => {
+      it('should return default modeUserPrefers', async () => {
+        const platform = await import('../utils/platform/platform.service');
+        vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
+          isBrowser: false,
+        });
 
-        const { useDarkMode } = await import("./dark-mode.service");
+        const { useDarkMode } = await import('./dark-mode.service');
         const { getModeUserPrefers } = useDarkMode();
         expect(getModeUserPrefers()).toBe(undefined);
       });
     });
 
-    describe("given in browser", () => {
-      describe("given no modeUserPrefers in localStorage", () => {
-        it("should return default modeUserPrefers", async () => {
-          const platform = await import("../utils/platform/platform.service");
-          vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
+    describe('given in browser', () => {
+      describe('given no modeUserPrefers in localStorage', () => {
+        it('should return default modeUserPrefers', async () => {
+          const platform = await import('../utils/platform/platform.service');
+          vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
+            isBrowser: true,
+          });
 
-          const { useDarkMode } = await import("./dark-mode.service");
+          const { useDarkMode } = await import('./dark-mode.service');
           const { getModeUserPrefers } = useDarkMode();
 
           window.localStorage = localStorageMock as any;
-          vi.spyOn(window.localStorage, "getItem").mockReturnValueOnce(null);
+          vi.spyOn(window.localStorage, 'getItem').mockReturnValueOnce(null);
 
           expect(getModeUserPrefers()).toBe(undefined);
         });
       });
-      describe("given modeUserPrefers in localStorage", () => {
-        it("should return the value", async () => {
-          const platform = await import("../utils/platform/platform.service");
-          vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
-
-          const { useDarkMode } = await import("./dark-mode.service");
+      describe('given modeUserPrefers in localStorage', () => {
+        it('should return the value', async () => {
+          const platform = await import('../utils/platform/platform.service');
+          vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
+            isBrowser: true,
+          });
+
+          const { useDarkMode } = await import('./dark-mode.service');
           const { getModeUserPrefers } = useDarkMode();
 
           window.localStorage = localStorageMock as any;
-          vi.spyOn(window.localStorage, "getItem").mockReturnValueOnce("true");
+          vi.spyOn(window.localStorage, 'getItem').mockReturnValueOnce('true');
 
           expect(getModeUserPrefers()).toBe(true);
         });
@@ -54,87 +60,99 @@ describe("useDarkMode", () => {
     });
   });
 
-  describe("getModeOsPrefers", () => {
-    describe("given not in browser", () => {
-      it("should return default modeOsPrefers", async () => {
-        const platform = await import("../utils/platform/platform.service");
-        vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: false });
+  describe('getModeOsPrefers', () => {
+    describe('given not in browser', () => {
+      it('should return default modeOsPrefers', async () => {
+        const platform = await import('../utils/platform/platform.service');
+        vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
+          isBrowser: false,
+        });
 
-        const { useDarkMode } = await import("./dark-mode.service");
+        const { useDarkMode } = await import('./dark-mode.service');
         const { getModeOsPrefers } = useDarkMode();
         expect(getModeOsPrefers()).toBe(false);
       });
     });
 
-    describe("given in browser", () => {
-      describe("given prefers-color-scheme: light", () => {
-        it("should return true", async () => {
-          const platform = await import("../utils/platform/platform.service");
-          vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
-          const localStorageSpy = vi.spyOn(window.localStorage, "setItem");
+    describe('given in browser', () => {
+      describe('given prefers-color-scheme: light', () => {
+        it('should return true', async () => {
+          const platform = await import('../utils/platform/platform.service');
+          vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
+            isBrowser: true,
+          });
+          const localStorageSpy = vi.spyOn(window.localStorage, 'setItem');
 
-          const { useDarkMode } = await import("./dark-mode.service");
+          const { useDarkMode } = await import('./dark-mode.service');
           const { getModeOsPrefers, MODE } = useDarkMode();
 
           window.matchMedia = matchMediaMock(MODE.LIGHT) as any;
           expect(getModeOsPrefers()).toBe(MODE.LIGHT);
-          expect(localStorageSpy).toHaveBeenCalledWith("modeOsPrefers", "true");
+          expect(localStorageSpy).toHaveBeenCalledWith('modeOsPrefers', 'true');
         });
       });
-      describe("given prefers-color-scheme: dark", () => {
-        it("should return false", async () => {
-          const platform = await import("../utils/platform/platform.service");
-          vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
-          const localStorageSpy = vi.spyOn(window.localStorage, "setItem");
-
-          const { useDarkMode } = await import("./dark-mode.service");
+      describe('given prefers-color-scheme: dark', () => {
+        it('should return false', async () => {
+          const platform = await import('../utils/platform/platform.service');
+          vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
+            isBrowser: true,
+          });
+          const localStorageSpy = vi.spyOn(window.localStorage, 'setItem');
+
+          const { useDarkMode } = await import('./dark-mode.service');
           const { getModeOsPrefers, MODE } = useDarkMode();
 
           window.matchMedia = matchMediaMock(MODE.DARK) as any;
           expect(getModeOsPrefers()).toBe(MODE.DARK);
-          expect(localStorageSpy).toHaveBeenCalledWith("modeOsPrefers", "false");
+          expect(localStorageSpy).toHaveBeenCalledWith('modeOsPrefers', 'false');
         });
       });
     });
   });
 
-  describe("getModeAutoPrefers", () => {
-    describe("given not in browser", () => {
-      it("should return default modeAutoPrefers", async () => {
-        const platform = await import("../utils/platform/platform.service");
-        vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: false });
+  describe('getModeAutoPrefers', () => {
+    describe('given not in browser', () => {
+      it('should return default modeAutoPrefers', async () => {
+        const platform = await import('../utils/platform/platform.service');
+        vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
+          isBrowser: false,
+        });
 
-        const { useDarkMode } = await import("./dark-mode.service");
+        const { useDarkMode } = await import('./dark-mode.service');
         const { getModeAutoPrefers } = useDarkMode();
         expect(getModeAutoPrefers()).toBe(false);
       });
     });
 
-    describe("given in browser", () => {
-      describe("given no modeUserPrefers in localStorage", () => {
-        it("should return default modeAutoPrefers", async () => {
-          const platform = await import("../utils/platform/platform.service");
-          vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
+    describe('given in browser', () => {
+      describe('given no modeUserPrefers in localStorage', () => {
+        it('should return default modeAutoPrefers', async () => {
+          const platform = await import('../utils/platform/platform.service');
+          vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
+            isBrowser: true,
+          });
 
-          const { useDarkMode } = await import("./dark-mode.service");
+          const { useDarkMode } = await import('./dark-mode.service');
           const { getModeAutoPrefers } = useDarkMode();
 
           window.localStorage = localStorageMock as any;
-          vi.spyOn(window.localStorage, "getItem").mockReturnValueOnce(null);
+          vi.spyOn(window.localStorage, 'getItem').mockReturnValueOnce(null);
 
           expect(getModeAutoPrefers()).toBe(false);
         });
       });
-      describe("given modeUserPrefers in localStorage", () => {
-        it("should return the value", async () => {
-          const platform = await import("../utils/platform/platform.service");
-          vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
-
-          const { useDarkMode } = await import("./dark-mode.service");
+      describe('given modeUserPrefers in localStorage', () => {
+        it('should return the value', async () => {
+          const platform = await import('../utils/platform/platform.service');
+          vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
+            isBrowser: true,
+          });
+
+          const { useDarkMode } = await import('./dark-mode.service');
           const { getModeAutoPrefers } = useDarkMode();
 
           window.localStorage = localStorageMock as any;
-          vi.spyOn(window.localStorage, "getItem").mockReturnValueOnce("true");
+          vi.spyOn(window.localStorage, 'getItem').mockReturnValueOnce('true');
 
           expect(getModeAutoPrefers()).toBe(true);
         });
@@ -142,14 +160,16 @@ describe("useDarkMode", () => {
     });
   });
 
-  describe("setModeUserPrefers", () => {
-    describe("given not in browser", () => {
-      it("should set modeUserPrefers", async () => {
-        const platform = await import("../utils/platform/platform.service");
-        vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: false });
-        vi.spyOn(window.localStorage, "setItem");
+  describe('setModeUserPrefers', () => {
+    describe('given not in browser', () => {
+      it('should set modeUserPrefers', async () => {
+        const platform = await import('../utils/platform/platform.service');
+        vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
+          isBrowser: false,
+        });
+        vi.spyOn(window.localStorage, 'setItem');
 
-        const { useDarkMode } = await import("./dark-mode.service");
+        const { useDarkMode } = await import('./dark-mode.service');
         const { setModeUserPrefers, modeUserPrefers } = useDarkMode();
 
         setModeUserPrefers(true);
@@ -158,45 +178,47 @@ describe("useDarkMode", () => {
       });
     });
 
-    describe("given in browser", () => {
-      it("should set modeUserPrefers and localStorage", async () => {
-        const platform = await import("../utils/platform/platform.service");
-        vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
+    describe('given in browser', () => {
+      it('should set modeUserPrefers and localStorage', async () => {
+        const platform = await import('../utils/platform/platform.service');
+        vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
+          isBrowser: true,
+        });
 
-        const { useDarkMode } = await import("./dark-mode.service");
+        const { useDarkMode } = await import('./dark-mode.service');
         const { setModeUserPrefers, modeUserPrefers } = useDarkMode();
 
-        const localStorageSpy = vi.spyOn(window.localStorage, "setItem");
+        const localStorageSpy = vi.spyOn(window.localStorage, 'setItem');
 
         setModeUserPrefers(true);
         expect(modeUserPrefers.value).toBe(true);
-        expect(localStorageSpy).toHaveBeenCalledWith("modeUserPrefers", "true");
+        expect(localStorageSpy).toHaveBeenCalledWith('modeUserPrefers', 'true');
       });
     });
   });
 
-  describe("setModeCurrent", () => {
-    it("light mode set", async () => {
-      const { useDarkMode } = await import("./dark-mode.service");
+  describe('setModeCurrent', () => {
+    it('light mode set', async () => {
+      const { useDarkMode } = await import('./dark-mode.service');
       const { setModeCurrent, currentMode, MODE } = useDarkMode();
 
       setModeCurrent(MODE.LIGHT);
       expect(currentMode.value).toBe(MODE.LIGHT);
-      expect(document.documentElement.classList.contains("dark")).toBe(false);
+      expect(document.documentElement.classList.contains('dark')).toBe(false);
     });
-    it("dark mode set", async () => {
-      const { useDarkMode } = await import("./dark-mode.service");
+    it('dark mode set', async () => {
+      const { useDarkMode } = await import('./dark-mode.service');
       const { setModeCurrent, currentMode, MODE } = useDarkMode();
 
       setModeCurrent(MODE.DARK);
       expect(currentMode.value).toBe(MODE.DARK);
-      expect(document.documentElement.classList.contains("dark")).toBe(true);
+      expect(document.documentElement.classList.contains('dark')).toBe(true);
     });
   });
 
-  describe("initializeMode", () => {
-    it("should set currentMode", async () => {
-      const { useDarkMode } = await import("./dark-mode.service");
+  describe('initializeMode', () => {
+    it('should set currentMode', async () => {
+      const { useDarkMode } = await import('./dark-mode.service');
       const { initializeMode, currentMode, getModeAutoPrefers } = useDarkMode();
 
       const mode = getModeAutoPrefers();
@@ -205,10 +227,10 @@ describe("useDarkMode", () => {
     });
   });
 
-  describe("autoModeWatcher", () => {
-    describe("given mode changes", () => {
-      it("should set modeCurrent", async () => {
-        const { useDarkMode } = await import("./dark-mode.service");
+  describe('autoModeWatcher', () => {
+    describe('given mode changes', () => {
+      it('should set modeCurrent', async () => {
+        const { useDarkMode } = await import('./dark-mode.service');
         const darkMode = useDarkMode();
 
         const mql = {
@@ -217,7 +239,7 @@ describe("useDarkMode", () => {
             darkMode.setModeCurrent(mql.matches);
           },
         };
-        vi.spyOn(window, "matchMedia").mockReturnValueOnce(mql as any);
+        vi.spyOn(window, 'matchMedia').mockReturnValueOnce(mql as any);
 
         darkMode.autoModeWatcher();
 

package/src/services/dark-mode.service.ts

@@ -1,5 +1,5 @@
-import { computed, readonly, Ref, ref } from "vue";
-import { usePlatform } from "../utils/platform/platform.service";
+import { computed, readonly, Ref, ref } from 'vue';
+import { usePlatform } from '../utils/platform/platform.service';
 
 const { isBrowser } = usePlatform();
 
@@ -16,15 +16,15 @@ const isDark = computed(() => currentMode.value === MODE.DARK);
 const useDarkMode = () => {
   const getModeOsPrefers = (): boolean => {
     let prefersLightMode = false;
-    if (isBrowser) prefersLightMode = window.matchMedia("(prefers-color-scheme: light)").matches;
+    if (isBrowser) prefersLightMode = window.matchMedia('(prefers-color-scheme: light)').matches;
     setModeOsPrefers(prefersLightMode);
     return prefersLightMode;
   };
 
   const getModeUserPrefers = (): boolean | undefined => {
     if (isBrowser) {
-      const mode = localStorage.getItem("modeUserPrefers");
-      if (mode !== null) modeUserPrefers.value = mode === "true";
+      const mode = localStorage.getItem('modeUserPrefers');
+      if (mode !== null) modeUserPrefers.value = mode === 'true';
     }
     return modeUserPrefers.value;
   };
@@ -39,19 +39,19 @@ const useDarkMode = () => {
   const setModeOsPrefers = (value: boolean) => {
     modeOsPrefers.value = value;
     if (isBrowser) {
-      localStorage.setItem("modeOsPrefers", value.toString());
+      localStorage.setItem('modeOsPrefers', value.toString());
     }
   };
   const setModeUserPrefers = (value: boolean): void => {
     modeUserPrefers.value = value;
     if (isBrowser) {
-      localStorage.setItem("modeUserPrefers", value.toString());
+      localStorage.setItem('modeUserPrefers', value.toString());
     }
   };
 
   const setModeCurrent = (value: boolean) => {
     const elemHtmlClasses = document.documentElement.classList;
-    const classDark = "dark";
+    const classDark = 'dark';
     value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
     currentMode.value = value;
   };
@@ -62,7 +62,7 @@ const useDarkMode = () => {
   };
 
   const autoModeWatcher = (): void => {
-    const mql = window.matchMedia("(prefers-color-scheme: light)");
+    const mql = window.matchMedia('(prefers-color-scheme: light)');
     const setMode = (value: boolean) => {
       const elemHtmlClasses = document.documentElement.classList;
       const classDark = `dark`;