@code-coaching/vuetiful 0.23.1 → 0.24.0

package/src/components/molecules/index.ts

@@ -1,30 +1,30 @@
-import VDrawer from "./VDrawer.vue";
-import VPreview from "./VPreview.vue";
-import VRail from "./VRail/VRail.vue";
-import VRailTile from "./VRail/VRailTile.vue";
-import VShell from "./VShell.vue";
+import VDrawer from './VDrawer.vue';
+import VPreview from './VPreview.vue';
+import VRail from './VRail/VRail.vue';
+import VRailTile from './VRail/VRailTile.vue';
+import VShell from './VShell.vue';
 
-import VListbox from "./VListbox/VListbox.vue";
-import VListboxButton from "./VListbox/VListboxButton.vue";
-import VListboxItem from "./VListbox/VListboxItem.vue";
-import VListboxItems from "./VListbox/VListboxItems.vue";
-import VListboxLabel from "./VListbox/VListboxLabel.vue";
+import VListbox from './VListbox/VListbox.vue';
+import VListboxButton from './VListbox/VListboxButton.vue';
+import VListboxItem from './VListbox/VListboxItem.vue';
+import VListboxItems from './VListbox/VListboxItems.vue';
+import VListboxLabel from './VListbox/VListboxLabel.vue';
 
-import VTab from "./VTabs/VTab.vue";
-import VTabPanel from "./VTabs/VTabPanel.vue";
-import VTabs from "./VTabs/VTabs.vue";
+import VTab from './VTabs/VTab.vue';
+import VTabPanel from './VTabs/VTabPanel.vue';
+import VTabs from './VTabs/VTabs.vue';
 
-import VAccordion from "./VAccordion/VAccordion.vue";
-import VAccordionItem from "./VAccordion/VAccordionItem.vue";
+import VAccordion from './VAccordion/VAccordion.vue';
+import VAccordionItem from './VAccordion/VAccordionItem.vue';
 
-import VAlert from "./VAlert.vue";
+import VAlert from './VAlert.vue';
 
-import VCard from "./VCard/VCard.vue";
-import VCardBody from "./VCard/VCardBody.vue";
-import VCardFooter from "./VCard/VCardFooter.vue";
-import VCardHeader from "./VCard/VCardHeader.vue";
+import VCard from './VCard/VCard.vue';
+import VCardBody from './VCard/VCardBody.vue';
+import VCardFooter from './VCard/VCardFooter.vue';
+import VCardHeader from './VCard/VCardHeader.vue';
 
-import VCodeBlock from "./VCodeBlock.vue";
+import VCodeBlock from './VCodeBlock.vue';
 
 export {
   VAccordion,

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, vi, test } 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', () => {
+    test('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.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, vi, test } from 'vitest';
 
 const localStorageMock = {
   getItem: vi.fn(),
@@ -6,229 +6,99 @@ 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 });
-
-        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 });
-
-          const { useDarkMode } = await import("./dark-mode.service");
-          const { getModeUserPrefers } = useDarkMode();
-
-          window.localStorage = localStorageMock as any;
-          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");
-          const { getModeUserPrefers } = useDarkMode();
 
-          window.localStorage = localStorageMock as any;
-          vi.spyOn(window.localStorage, "getItem").mockReturnValueOnce("true");
+  describe('applyMode', () => {
+    test('light mode set', async () => {
+      const { useDarkMode } = await import('./dark-mode.service');
+      const { applyMode, chosenMode, MODE } = useDarkMode();
 
-          expect(getModeUserPrefers()).toBe(true);
-        });
-      });
+      applyMode(MODE.LIGHT);
+      expect(chosenMode.value).toBe(MODE.LIGHT);
+      expect(document.documentElement.classList.contains('dark')).toBe(false);
     });
-  });
+    test('dark mode set', async () => {
+      const { useDarkMode } = await import('./dark-mode.service');
+      const { applyMode, chosenMode, MODE } = 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 });
-
-        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");
-
-          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");
-        });
-      });
-      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");
-        });
-      });
+      applyMode(MODE.DARK);
+      expect(chosenMode.value).toBe(MODE.DARK);
+      expect(document.documentElement.classList.contains('dark')).toBe(true);
     });
   });
 
-  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 { 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 });
-
-          const { useDarkMode } = await import("./dark-mode.service");
-          const { getModeAutoPrefers } = useDarkMode();
-
-          window.localStorage = localStorageMock as any;
-          vi.spyOn(window.localStorage, "getItem").mockReturnValueOnce(null);
+  describe('autoModeWatcher', () => {
+    describe('given mode changes', () => {
+      test('should set modeCurrent', async () => {
+        const { useDarkMode } = await import('./dark-mode.service');
+        const darkMode = useDarkMode();
 
-          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 mql = {
+          matches: true,
+          onchange: () => {
+            const mode = mql.matches ? darkMode.MODE.LIGHT : darkMode.MODE.DARK;
+            darkMode.applyMode(mode);
+          },
+        };
+        vi.spyOn(window, 'matchMedia').mockReturnValueOnce(mql as any);
 
-          const { useDarkMode } = await import("./dark-mode.service");
-          const { getModeAutoPrefers } = useDarkMode();
+        darkMode.autoModeWatcher();
 
-          window.localStorage = localStorageMock as any;
-          vi.spyOn(window.localStorage, "getItem").mockReturnValueOnce("true");
+        mql.matches = false;
+        mql.onchange?.();
+        expect(darkMode.chosenMode.value).toBe('dark');
 
-          expect(getModeAutoPrefers()).toBe(true);
-        });
+        mql.matches = true;
+        mql.onchange?.();
+        expect(darkMode.chosenMode.value).toBe('light');
       });
     });
   });
 
-  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 { setModeUserPrefers, modeUserPrefers } = useDarkMode();
-
-        setModeUserPrefers(true);
-        expect(modeUserPrefers.value).toBe(true);
-        expect(window.localStorage.setItem).not.toHaveBeenCalled();
-      });
-    });
-
-    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 { setModeUserPrefers, modeUserPrefers } = useDarkMode();
-
-        const localStorageSpy = vi.spyOn(window.localStorage, "setItem");
+  describe('applyModeSSR', () => {
+    test('should add dark class to html tag', async () => {
+      const { useDarkMode } = await import('./dark-mode.service');
+      const darkMode = useDarkMode();
 
-        setModeUserPrefers(true);
-        expect(modeUserPrefers.value).toBe(true);
-        expect(localStorageSpy).toHaveBeenCalledWith("modeUserPrefers", "true");
-      });
+      const html = '<html>';
+      const mode = darkMode.MODE.DARK;
+      const result = darkMode.applyModeSSR(html, mode);
+      expect(result).toBe('<html class="dark">');
     });
   });
 
-  describe("setModeCurrent", () => {
-    it("light mode set", async () => {
-      const { useDarkMode } = await import("./dark-mode.service");
-      const { setModeCurrent, currentMode, MODE } = useDarkMode();
+  describe('getModeFromCookie', () => {
+    test('should return default mode if cookie is not set', async () => {
+      const { useDarkMode } = await import('./dark-mode.service');
+      const darkMode = useDarkMode();
 
-      setModeCurrent(MODE.LIGHT);
-      expect(currentMode.value).toBe(MODE.LIGHT);
-      expect(document.documentElement.classList.contains("dark")).toBe(false);
+      const cookies = '';
+      const result = darkMode.getModeFromCookie(cookies);
+      expect(result).toBe('dark');
     });
-    it("dark mode set", async () => {
-      const { useDarkMode } = await import("./dark-mode.service");
-      const { setModeCurrent, currentMode, MODE } = useDarkMode();
+    test('should return mode from cookie', async () => {
+      const { useDarkMode } = await import('./dark-mode.service');
+      const darkMode = useDarkMode();
 
-      setModeCurrent(MODE.DARK);
-      expect(currentMode.value).toBe(MODE.DARK);
-      expect(document.documentElement.classList.contains("dark")).toBe(true);
+      const cookies = 'vuetiful-mode=light';
+      const result = darkMode.getModeFromCookie(cookies);
+      expect(result).toBe('light');
     });
   });
 
-  describe("initializeMode", () => {
-    it("should set currentMode", async () => {
-      const { useDarkMode } = await import("./dark-mode.service");
-      const { initializeMode, currentMode, getModeAutoPrefers } = useDarkMode();
+  describe('initializeMode', () => {
+    test('should set mode from cookie', async () => {
+      const { useDarkMode } = await import('./dark-mode.service');
+      const darkMode = useDarkMode();
 
-      const mode = getModeAutoPrefers();
-      initializeMode();
-      expect(currentMode.value).toBe(mode);
-    });
-  });
+      const cookies = 'vuetiful-mode=dark';
+      vi.spyOn(document, 'cookie', 'get').mockReturnValueOnce(cookies);
 
-  describe("autoModeWatcher", () => {
-    describe("given mode changes", () => {
-      it("should set modeCurrent", async () => {
-        const { useDarkMode } = await import("./dark-mode.service");
-        const darkMode = useDarkMode();
-
-        const mql = {
-          matches: true,
-          onchange: () => {
-            darkMode.setModeCurrent(mql.matches);
-          },
-        };
-        vi.spyOn(window, "matchMedia").mockReturnValueOnce(mql as any);
-
-        darkMode.autoModeWatcher();
-
-        mql.matches = false;
-        mql.onchange?.();
-        expect(darkMode.currentMode.value).toBe(false);
-
-        mql.matches = true;
-        mql.onchange?.();
-        expect(darkMode.currentMode.value).toBe(true);
-      });
+      darkMode.initializeMode();
+      expect(darkMode.chosenMode.value).toBe('dark');
     });
   });
 });