@code-coaching/vuetiful 0.14.2 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.14.2",
+  "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/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,