@code-coaching/vuetiful 0.14.1 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "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/components/atoms/VSwitch/VSwitch.vue

@@ -71,21 +71,27 @@ const trackSize = computed(() => {
 <template>
   <!-- There is some odd behavior with test coverge, v-model must be the last property in this component -->
   <Switch
-    :class="`slide-toggle-track flex transition-all duration-[150ms] border-token rounded-container-token ${trackSize} ${
+    :class="`slide-toggle rounded-container-token ${
       disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
-    } ${switchClass}`"
+    }`"
     :name="name"
     :as="as"
     v-slot="{ checked }"
     v-model="parentModelValue"
   >
-    <template v-if="$slots.default">
-      <span class="sr-only"><slot /></span>
-    </template>
     <div
-      :class="`slide-toggle-thumb h-full w-[50%] scale-[0.8] shadow transition-all duration-[150ms] rounded-token ${
-        checked ? 'translate-x-full' : 'opacity-90'
-      } ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'} ${thumbClass} bg-opacity-90`"
-    ></div>
+      :class="`slide-toggle-track flex transition-all duration-[150ms] border-token rounded-token ${trackSize} ${
+        disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+      } ${switchClass}`"
+    >
+      <template v-if="$slots.default">
+        <span class="sr-only"><slot /></span>
+      </template>
+      <div
+        :class="`slide-toggle-thumb h-full w-[50%] scale-[0.8] shadow transition-all duration-[150ms] rounded-token ${
+          checked ? 'translate-x-full' : 'opacity-90'
+        } ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'} ${thumbClass} bg-opacity-90`"
+      ></div>
+    </div>
   </Switch>
 </template>

package/src/components/atoms/index.ts

@@ -1,3 +1,4 @@
+import VAvatar from "./VAvatar.vue";
 import VBadge from "./VBadge.vue";
 import VButton from "./VButton.vue";
 import VChip from "./VChip.vue";
@@ -13,6 +14,7 @@ import VSwitchGroup from "./VSwitch/VSwitchGroup.vue";
 import VSwitchLabel from "./VSwitch/VSwitchLabel.vue";
 
 export {
+  VAvatar,
   VButton,
   VBadge,
   VChip,