@code-coaching/vuetiful 0.14.2 → 0.15.1

package/package.json

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

package/src/components/atoms/VAvatar.test.ts

@@ -0,0 +1,105 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import { VAvatar } from ".";
+
+test("VAvatar", () => {
+  expect(VAvatar).toBeTruthy();
+});
+
+describe("VAvatar props", () => {
+  test("VAvatar defaults", () => {
+    const wrapper = mount(VAvatar);
+
+    expect(wrapper.classes()).toContain("avatar");
+    expect(wrapper.classes()).toContain("w-16");
+    expect(wrapper.classes()).toContain("rounded-token");
+
+    const avatarText = wrapper.find(".avatar-text");
+    expect(avatarText.exists()).toBe(true);
+    expect(avatarText.text()).toBe("");
+    expect(avatarText.classes()).toContain("dark:fill-on-surface-token");
+    expect(avatarText.classes()).toContain("fill-base-token");
+  });
+
+  test("VAvatar initials", () => {
+    const wrapper = mount(VAvatar, {
+      props: {
+        initials: "JD",
+        class: "variant-filled",
+      },
+    });
+
+    expect(wrapper.classes()).toContain("avatar");
+    expect(wrapper.classes()).toContain("w-16");
+    expect(wrapper.classes()).toContain("rounded-token");
+
+    const avatarText = wrapper.find(".avatar-text");
+    expect(avatarText.exists()).toBe(true);
+    expect(avatarText.text()).toBe("JD");
+    expect(avatarText.classes()).toContain("dark:fill-base-token");
+    expect(avatarText.classes()).toContain("fill-on-surface-token");
+
+    const avatarImage = wrapper.find(".avatar-image");
+    expect(avatarImage.exists()).toBe(false);
+  });
+
+  test("VAvatar initials fill", () => {
+    const wrapper = mount(VAvatar, {
+      props: {
+        initials: "JD",
+        fill: "custom-fill-class",
+      },
+    });
+
+    expect(wrapper.classes()).toContain("avatar");
+    expect(wrapper.classes()).toContain("w-16");
+    expect(wrapper.classes()).toContain("rounded-token");
+
+    const avatarText = wrapper.find(".avatar-text");
+    expect(avatarText.exists()).toBe(true);
+    expect(avatarText.text()).toBe("JD");
+    expect(avatarText.classes()).toContain("custom-fill-class");
+  });
+
+  test("VAvatar image", () => {
+    const wrapper = mount(VAvatar, {
+      props: {
+        src: "https://via.placeholder.com/150",
+      },
+    });
+
+    expect(wrapper.classes()).toContain("avatar");
+    expect(wrapper.classes()).toContain("w-16");
+    expect(wrapper.classes()).toContain("rounded-token");
+
+    const avatarText = wrapper.find(".avatar-text");
+    expect(avatarText.exists()).toBe(false);
+
+    const avatarImage = wrapper.find(".avatar-image");
+    expect(avatarImage.exists()).toBe(true);
+    expect(avatarImage.attributes("src")).toBe("https://via.placeholder.com/150");
+  });
+
+  test("VAvatar image fallback", async () => {
+    const wrapper = mount(VAvatar, {
+      props: {
+        src: "https://via.placeholder.com/150",
+        fallback: "/image/john-duck.png",
+      },
+    });
+
+    expect(wrapper.classes()).toContain("avatar");
+    expect(wrapper.classes()).toContain("w-16");
+    expect(wrapper.classes()).toContain("rounded-token");
+
+    const avatarText = wrapper.find(".avatar-text");
+    expect(avatarText.exists()).toBe(false);
+
+    const avatarImage = wrapper.find(".avatar-image");
+    avatarImage.trigger("error");
+    await wrapper.vm.$nextTick();
+
+    expect(avatarImage.exists()).toBe(true);
+    expect(avatarImage.attributes("src")).toBe("/image/john-duck.png");
+  });
+});

package/src/components/atoms/VAvatar.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { CssClasses } from "@/index";
+import { computed, ref, useAttrs } from "vue";
+
+const props = defineProps({
+  // Initials
+  initials: { type: String, default: "" },
+  fill: { type: String as () => CssClasses, default: "" },
+
+  // Image
+  src: { type: String, default: "" },
+  alt: { type: String, default: "" },
+  fallback: { type: String, default: "" },
+
+  width: { type: String as () => CssClasses, default: "w-16" },
+  rounded: { type: String as () => CssClasses, default: "rounded-token" },
+});
+
+const imgSrc = ref(props.src);
+const fillInitials = computed(() => {
+  if (props.fill) return props.fill;
+
+  const attrs = useAttrs();
+  const classString = attrs.class as string | undefined;
+
+  if (classString?.includes("variant-filled")) {
+    return "fill-on-surface-token dark:fill-base-token";
+  }
+  return "dark:fill-on-surface-token fill-base-token";
+});
+</script>
+<template>
+  <figure
+    :class="`avatar isolate flex aspect-square items-center justify-center overflow-hidden font-semibold ${rounded} ${width}`"
+  >
+    <img class="avatar-image" v-if="src" :src="imgSrc" :alt="alt" @error="() => (imgSrc = fallback)" />
+    <svg v-else class="avatar-initials h-full w-full" viewBox="0 0 512 512">
+      <text
+        x="50%"
+        y="50%"
+        dominant-baseline="central"
+        text-anchor="middle"
+        font-weight="bold"
+        :font-size="150"
+        :class="`avatar-text ${fillInitials}`"
+      >
+        {{ String(initials).substring(0, 2).toUpperCase() }}
+      </text>
+    </svg>
+  </figure>
+</template>

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/index.ts

@@ -1,6 +1,9 @@
+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";
@@ -13,9 +16,12 @@ import VSwitchGroup from "./VSwitch/VSwitchGroup.vue";
 import VSwitchLabel from "./VSwitch/VSwitchLabel.vue";
 
 export {
+  VAvatar,
   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>