@code-coaching/vuetiful 0.15.0 → 0.15.2

package/package.json

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

package/src/{utils/code-block → components/atoms}/VCodeBlock.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { CssClasses, vClipboard } from "@/index";
+import { useHighlight } from "@/services/highlight.service";
 import "highlight.js/styles/github-dark.css";
 import { ref } from "vue";
-import { useHighlight } from "./highlight.service";
 
 const { highlight } = useHighlight();
 

package/src/{utils/dark-mode/dark-mode.vue → components/atoms/VLightSwitch.vue}

@@ -24,9 +24,8 @@
 </template>
 
 <script lang="ts">
-import type { CssClasses } from "@/index";
+import { CssClasses, useDarkMode } from "@/index";
 import { computed, ComputedRef, defineComponent, onMounted } from "vue";
-import { useDarkMode } from "./dark-mode.service";
 
 export default defineComponent({
   props: {

package/src/components/atoms/VRadio/VRadioItem.test.ts

@@ -40,7 +40,7 @@ describe("VRadioItem slot states", () => {
         },
       });
 
-      const itemEl = wrapper.find("[data-test='item']").find("span");
+      const itemEl = wrapper.find("[data-test='item']").find("div");
       expect(itemEl.element.classList.contains("variant-filled")).toBe(true);
       expect(itemEl.element.classList.contains("hover:variant-ghost")).toBe(false); 
     });
@@ -62,7 +62,7 @@ describe("VRadioItem slot states", () => {
         },
       });
 
-      const itemEl = wrapper.find("[data-test='item']").find("span");
+      const itemEl = wrapper.find("[data-test='item']").find("div");
       expect(itemEl.element.classList.contains("variant-filled")).toBe(false);
       expect(itemEl.element.classList.contains("hover:variant-ghost")).toBe(true);  
     });
@@ -89,7 +89,7 @@ describe("VRadioItem slot states", () => {
         },
       });
 
-      const itemEl = wrapper.find("[data-test='item']").find("span");
+      const itemEl = wrapper.find("[data-test='item']").find("div");
       expect(itemEl.element.classList.contains("custom-active-class")).toBe(true);
       expect(itemEl.element.classList.contains("custom-hover-class")).toBe(false); 
     });
@@ -117,7 +117,7 @@ describe("VRadioItem slot states", () => {
         },
       });
 
-      const itemEl = wrapper.find("[data-test='item']").find("span");
+      const itemEl = wrapper.find("[data-test='item']").find("div");
       expect(itemEl.element.classList.contains("custom-active-class")).toBe(false); 
       expect(itemEl.element.classList.contains("custom-hover-class")).toBe(true); 
     });
@@ -145,7 +145,7 @@ describe("VRadioItem slot states", () => {
         },
       });
 
-      const itemEl = wrapper.find("[data-test='item']").find("span");
+      const itemEl = wrapper.find("[data-test='item']").find("div");
       expect(itemEl.element.classList.contains("cursor-pointer")).toBe(true); 
       expect(itemEl.element.classList.contains("cursor-not-allowed")).toBe(false); 
       expect(itemEl.element.classList.contains("opacity-50")).toBe(false); 
@@ -174,7 +174,7 @@ describe("VRadioItem slot states", () => {
         },
       });
 
-      const itemEl = wrapper.find("[data-test='item']").find("span");
+      const itemEl = wrapper.find("[data-test='item']").find("div");
       expect(itemEl.element.classList.contains("cursor-pointer")).toBe(false); 
       expect(itemEl.element.classList.contains("cursor-not-allowed")).toBe(true); 
       expect(itemEl.element.classList.contains("opacity-50")).toBe(true); 

package/src/components/atoms/VRadio/VRadioItem.vue

@@ -15,12 +15,13 @@ const hover = (inject("hover") as string);
 
 <template>
   <RadioGroupOption v-slot="{ checked, disabled }" :value="value">
-    <span
+    <div
+    data-test="radio-item"
       :class="`radio-item px-4 py-1 text-center text-base rounded-token ${
         checked ? active : hover
       } ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`"
     >
       <slot />
-    </span>
+    </div>
   </RadioGroupOption>
 </template>

package/src/components/atoms/index.ts

@@ -2,6 +2,8 @@ import VAvatar from "./VAvatar.vue";
 import VBadge from "./VBadge.vue";
 import VButton from "./VButton.vue";
 import VChip from "./VChip.vue";
+import VCodeBlock from "./VCodeBlock.vue";
+import VLightSwitch from "./VLightSwitch.vue";
 
 import VRadioDescription from "./VRadio/VRadioDescription.vue";
 import VRadioGroup from "./VRadio/VRadioGroup.vue";
@@ -18,6 +20,8 @@ export {
   VButton,
   VBadge,
   VChip,
+  VCodeBlock,
+  VLightSwitch,
   VRadioGroup,
   VRadioItem,
   VRadioLabel,

package/src/{utils/dark-mode → services}/dark-mode.service.test.ts

@@ -13,7 +13,7 @@ describe("useDarkMode", () => {
   describe("getModeUserPrefers", () => {
     describe("given not in browser", () => {
       it("should return default modeUserPrefers", async () => {
-        const platform = await import("../platform/platform.service");
+        const platform = await import("../utils/platform/platform.service");
         vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: false });
 
         const { useDarkMode } = await import("./dark-mode.service");
@@ -25,7 +25,7 @@ describe("useDarkMode", () => {
     describe("given in browser", () => {
       describe("given no modeUserPrefers in localStorage", () => {
         it("should return default modeUserPrefers", async () => {
-          const platform = await import("../platform/platform.service");
+          const platform = await import("../utils/platform/platform.service");
           vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
 
           const { useDarkMode } = await import("./dark-mode.service");
@@ -39,7 +39,7 @@ describe("useDarkMode", () => {
       });
       describe("given modeUserPrefers in localStorage", () => {
         it("should return the value", async () => {
-          const platform = await import("../platform/platform.service");
+          const platform = await import("../utils/platform/platform.service");
           vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
 
           const { useDarkMode } = await import("./dark-mode.service");
@@ -57,7 +57,7 @@ describe("useDarkMode", () => {
   describe("getModeOsPrefers", () => {
     describe("given not in browser", () => {
       it("should return default modeOsPrefers", async () => {
-        const platform = await import("../platform/platform.service");
+        const platform = await import("../utils/platform/platform.service");
         vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: false });
 
         const { useDarkMode } = await import("./dark-mode.service");
@@ -69,7 +69,7 @@ describe("useDarkMode", () => {
     describe("given in browser", () => {
       describe("given prefers-color-scheme: light", () => {
         it("should return true", async () => {
-          const platform = await import("../platform/platform.service");
+          const platform = await import("../utils/platform/platform.service");
           vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
           const localStorageSpy = vi.spyOn(window.localStorage, "setItem");
 
@@ -83,7 +83,7 @@ describe("useDarkMode", () => {
       });
       describe("given prefers-color-scheme: dark", () => {
         it("should return false", async () => {
-          const platform = await import("../platform/platform.service");
+          const platform = await import("../utils/platform/platform.service");
           vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
           const localStorageSpy = vi.spyOn(window.localStorage, "setItem");
 
@@ -101,7 +101,7 @@ describe("useDarkMode", () => {
   describe("getModeAutoPrefers", () => {
     describe("given not in browser", () => {
       it("should return default modeAutoPrefers", async () => {
-        const platform = await import("../platform/platform.service");
+        const platform = await import("../utils/platform/platform.service");
         vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: false });
 
         const { useDarkMode } = await import("./dark-mode.service");
@@ -113,7 +113,7 @@ describe("useDarkMode", () => {
     describe("given in browser", () => {
       describe("given no modeUserPrefers in localStorage", () => {
         it("should return default modeAutoPrefers", async () => {
-          const platform = await import("../platform/platform.service");
+          const platform = await import("../utils/platform/platform.service");
           vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
 
           const { useDarkMode } = await import("./dark-mode.service");
@@ -127,7 +127,7 @@ describe("useDarkMode", () => {
       });
       describe("given modeUserPrefers in localStorage", () => {
         it("should return the value", async () => {
-          const platform = await import("../platform/platform.service");
+          const platform = await import("../utils/platform/platform.service");
           vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
 
           const { useDarkMode } = await import("./dark-mode.service");
@@ -145,7 +145,7 @@ describe("useDarkMode", () => {
   describe("setModeUserPrefers", () => {
     describe("given not in browser", () => {
       it("should set modeUserPrefers", async () => {
-        const platform = await import("../platform/platform.service");
+        const platform = await import("../utils/platform/platform.service");
         vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: false });
         vi.spyOn(window.localStorage, "setItem");
 
@@ -160,7 +160,7 @@ describe("useDarkMode", () => {
 
     describe("given in browser", () => {
       it("should set modeUserPrefers and localStorage", async () => {
-        const platform = await import("../platform/platform.service");
+        const platform = await import("../utils/platform/platform.service");
         vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
 
         const { useDarkMode } = await import("./dark-mode.service");

package/src/{utils/dark-mode → services}/dark-mode.service.ts

@@ -1,5 +1,5 @@
 import { readonly, Ref, ref } from "vue";
-import { usePlatform } from "../platform/platform.service";
+import { usePlatform } from "../utils/platform/platform.service";
 
 const { isBrowser } = usePlatform();
 

package/src/services/index.ts

@@ -1,4 +1,6 @@
 import { useRail } from "./rail.service";
 import { useDrawer } from "./drawer.service";
+import { useHighlight } from "./highlight.service";
+import { useDarkMode } from "./dark-mode.service";
 
-export { useRail, useDrawer };
+export { useRail, useDrawer, useHighlight, useDarkMode };

package/src/utils/index.ts

@@ -1,7 +1,4 @@
-import VCodeBlock from "./code-block/VCodeBlock.vue";
-import { useDarkMode } from "./dark-mode/dark-mode.service";
-import DarkModeSwitch from "./dark-mode/dark-mode.vue";
 import ThemeSwitcher from "./theme/theme-switcher.vue";
 import { useTheme } from "./theme/theme.service";
 
-export { DarkModeSwitch, ThemeSwitcher, useDarkMode, useTheme, VCodeBlock };
+export { ThemeSwitcher, useTheme };

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

@@ -4,11 +4,15 @@
       Theme
     </VButton>
 
-    <div v-if="showPopup" class="cc-theme-switcher__popup p-4 shadow-xl" :class="classes">
+    <div
+      v-if="showPopup"
+      class="cc-theme-switcher__popup absolute z-10 mt-1 p-4 shadow-xl"
+      :class="classes"
+    >
       <div class="space-y-4">
         <section class="flex items-center justify-between">
           <h6>Mode</h6>
-          <DarkModeSwitch />
+          <v-light-switch />
         </section>
         <nav class="list-nav -m-4 overflow-y-auto p-4" :class="listClasses">
           <ul class="flex flex-col gap-4">
@@ -33,12 +37,12 @@
 </template>
 
 <script lang="ts">
-import { CssClasses, DarkModeSwitch, useDarkMode, useTheme, VButton } from "@/index";
+import { CssClasses, useDarkMode, useTheme, VButton, VLightSwitch } from "@/index";
 import { computed, defineComponent, onMounted, ref } from "vue";
 
 export default defineComponent({
   components: {
-    DarkModeSwitch,
+    VLightSwitch,
     VButton,
   },
   props: {
@@ -83,7 +87,7 @@ export default defineComponent({
       default: "w-24",
     },
   },
-  setup(props, { attrs }) {
+  setup(props) {
     const { initializeTheme, loadTheme, themes, chosenTheme } = useTheme();
     const { currentMode, MODE } = useDarkMode();
 
@@ -116,8 +120,7 @@ export default defineComponent({
       ${text.value} 
       ${props.width} 
       ${props.ring}
-      ${props.roundedContainer}
-      ${attrs.class ?? ""}`;
+      ${props.roundedContainer}`;
     });
 
     const listClasses = computed(() => {
@@ -145,11 +148,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style scoped>
-.cc-theme-switcher__popup {
-  position: absolute;
-  z-index: 1;
-  margin-top: 0.25rem;
-}
-</style>