srcdev-nuxt-components 9.1.43 → 9.1.44

package/app/components/01.atoms/display-avatar/tests/DisplayAvatar.spec.ts

@@ -0,0 +1,208 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import DisplayAvatar from "../DisplayAvatar.vue";
+import DisplayChip from "../../../02.molecules/display-chip/DisplayChip.vue";
+
+describe("DisplayAvatar", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure (default)", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { alt: "John Doe" },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (with src)", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { src: "/avatar.jpg", alt: "John Doe", size: "lg" },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (with chip)", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { alt: "John Doe", chip: true },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Root element ─────────────────────────────────────────────────────────
+
+  it("renders as <span> by default", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar);
+    expect(wrapper.element.tagName).toBe("SPAN");
+  });
+
+  it("renders as the element specified by the as prop", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { as: "div" },
+    });
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it("renders as DisplayChip when chip prop is set", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { chip: true },
+    });
+    expect(wrapper.findComponent(DisplayChip).exists()).toBe(true);
+  });
+
+  // ─── Base class ───────────────────────────────────────────────────────────
+
+  it("always has the display-avatar class", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar);
+    expect(wrapper.classes()).toContain("display-avatar");
+  });
+
+  // ─── Size ─────────────────────────────────────────────────────────────────
+
+  it("applies md size class by default", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar);
+    expect(wrapper.classes()).toContain("md");
+  });
+
+  it.each(["xs", "s", "md", "lg", "xl"] as const)("applies %s size class when size='%s'", async (size) => {
+    const wrapper = await mountSuspended(DisplayAvatar, { props: { size } });
+    expect(wrapper.classes()).toContain(size);
+  });
+
+  // ─── Fallback text ────────────────────────────────────────────────────────
+
+  it("shows initials derived from alt when no src or text is set", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { alt: "John Doe" },
+    });
+    expect(wrapper.find("span").text()).toBe("JD");
+  });
+
+  it("caps initials at two characters", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { alt: "Alice Bob Charlie" },
+    });
+    expect(wrapper.find("span").text()).toBe("AB");
+  });
+
+  it("shows single initial for a single-word alt", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { alt: "Alice" },
+    });
+    expect(wrapper.find("span").text()).toBe("A");
+  });
+
+  it("shows text prop instead of alt-derived initials when text is set", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { alt: "John Doe", text: "?" },
+    });
+    expect(wrapper.find("span").text()).toBe("?");
+  });
+
+  it("shows empty fallback when neither src, text, nor alt are set", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar);
+    expect(wrapper.find("span").text()).toBe("");
+  });
+
+  // ─── Image ────────────────────────────────────────────────────────────────
+
+  it("renders an image element when src is provided", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { src: "/avatar.jpg" },
+    });
+    expect(wrapper.find(".avatar-image").exists()).toBe(true);
+  });
+
+  it("does not render an image element when src is not provided", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar);
+    expect(wrapper.find(".avatar-image").exists()).toBe(false);
+  });
+
+  it("falls back to 'Avatar' as alt text when src is set but alt is not", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { src: "/avatar.jpg" },
+    });
+    expect(wrapper.find(".avatar-image").attributes("alt")).toBe("Avatar");
+  });
+
+  it("uses the alt prop as alt text on the image", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { src: "/avatar.jpg", alt: "Profile picture" },
+    });
+    expect(wrapper.find(".avatar-image").attributes("alt")).toBe("Profile picture");
+  });
+
+  // ─── Slots ────────────────────────────────────────────────────────────────
+
+  it("renders default slot content instead of the fallback", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { alt: "John Doe" },
+      slots: { default: "<img class='custom-avatar' src='/x.jpg' alt='x' />" },
+    });
+    expect(wrapper.find(".custom-avatar").exists()).toBe(true);
+    expect(wrapper.text()).not.toContain("JD");
+  });
+
+  it("renders icon slot content", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      slots: { icon: "<span class='status-icon'>●</span>" },
+    });
+    expect(wrapper.find(".status-icon").exists()).toBe(true);
+  });
+
+  // ─── Chip ─────────────────────────────────────────────────────────────────
+
+  it("passes chipDefaultConfig when chip=true", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { chip: true },
+    });
+    const chip = wrapper.findComponent(DisplayChip);
+    expect(chip.props("config")).toMatchObject({
+      size: "12px",
+      maskWidth: "4px",
+      offset: "0px",
+      angle: "90deg",
+    });
+  });
+
+  it("passes custom config when chip is an object", async () => {
+    const chipConfig = { size: "16px", maskWidth: "2px", offset: "4px", angle: "45deg" };
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { chip: chipConfig },
+    });
+    const chip = wrapper.findComponent(DisplayChip);
+    expect(chip.props("config")).toMatchObject(chipConfig);
+  });
+
+  // ─── styleClassPassthrough ────────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { styleClassPassthrough: "online" },
+    });
+    expect(wrapper.classes()).toContain("online");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { styleClassPassthrough: ["online", "featured"] },
+    });
+    expect(wrapper.classes()).toContain("online");
+    expect(wrapper.classes()).toContain("featured");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { styleClassPassthrough: ["online"] },
+    });
+    expect(wrapper.classes()).toContain("online");
+    await wrapper.setProps({ styleClassPassthrough: ["offline"] });
+    expect(wrapper.classes()).not.toContain("online");
+    expect(wrapper.classes()).toContain("offline");
+  });
+});

package/app/components/01.atoms/display-avatar/tests/__snapshots__/DisplayAvatar.spec.ts.snap

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DisplayAvatar > renders correct HTML structure (default) 1`] = `"<span class="display-avatar md" style-class-passthrough=""><span>JD</span></span>"`;
+
+exports[`DisplayAvatar > renders correct HTML structure (with chip) 1`] = `
+"<span class="display-chip-core circle display-avatar md" style="--chip-size: 12px; --chip-mask-width: 4px; --chip-offset: 0px; --chip-angle: 90deg;"><span>JD</span>
+<!--v-if-->
+<!--v-if--></span>"
+`;
+
+exports[`DisplayAvatar > renders correct HTML structure (with src) 1`] = `"<span class="display-avatar lg" style-class-passthrough=""><img data-nuxt-img="" srcset="/_ipx/_/avatar.jpg 1x, /_ipx/_/avatar.jpg 2x" alt="John Doe" class="avatar-image" src="/_ipx/_/avatar.jpg"></span>"`;

package/app/components/02.molecules/display-chip/DisplayChip.vue

@@ -0,0 +1,189 @@
+<template>
+  <component :is="tag" class="display-chip-core" :class="[shape, elementClasses]" :style="chipStyles">
+    <slot name="default"></slot>
+    <Icon v-if="config?.icon" :name="config.icon" class="chip-icon" />
+    <span v-if="config?.label" class="chip-label" :class="`length-${config.label.length}`">{{ validatedLabel }}</span>
+  </component>
+</template>
+
+<script setup lang="ts">
+import type { DisplayChipConfig } from "~/types/components";
+
+interface Props {
+  tag?: "div" | "span";
+  shape?: "circle" | "square";
+  config?: DisplayChipConfig;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "span",
+  shape: "circle",
+  config: () => ({
+    size: "12px",
+    maskWidth: "4px",
+    offset: "0px",
+    angle: "90deg",
+    icon: undefined,
+    label: undefined,
+  }),
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+
+const validatedLabel = computed(() => {
+  if (!props.config?.label) return props.config?.label;
+  if (props.config.label.length > 3) {
+    console.warn(
+      `DisplayChip: label "${
+        props.config.label
+      }" exceeds maximum length of 3 characters. Truncating to "${props.config.label.slice(0, 3)}"`
+    );
+    return props.config.label.slice(0, 3);
+  }
+  return props.config.label;
+});
+
+const chipStyles = computed(() => ({
+  "--chip-size": props.config?.size,
+  "--chip-mask-width": props.config?.maskWidth,
+  "--chip-offset": props.config?.offset,
+  "--chip-angle": props.config?.angle,
+}));
+</script>
+
+<style lang="css">
+@layer components {
+  .display-chip-core {
+    --computed-mask-diameter: calc(var(--chip-size) + (var(--chip-mask-width) * 2));
+
+    &.circle {
+      --computed-chip-offset: calc((100% / 2) + var(--chip-offset));
+      --computed-position-x: calc(var(--computed-chip-offset) * cos(var(--chip-angle) - 90deg) + (100% / 2));
+      --computed-position-y: calc(var(--computed-chip-offset) * sin(var(--chip-angle) - 90deg) + (100% / 2));
+    }
+
+    &.square {
+      --circle-x: calc(50% + (50% + var(--chip-offset) + (var(--chip-size) / 2)) * cos(var(--chip-angle) - 90deg));
+      --circle-y: calc(50% + (50% + var(--chip-offset) + (var(--chip-size) / 2)) * sin(var(--chip-angle) - 90deg));
+      --computed-position-x: clamp(calc(var(--chip-offset) * -1), var(--circle-x), calc(100% + var(--chip-offset)));
+      --computed-position-y: clamp(calc(var(--chip-offset) * -1), var(--circle-y), calc(100% + var(--chip-offset)));
+    }
+
+    /* colors */
+
+    --color-offline: slategrey;
+    --color-online: rgb(0, 255, 135);
+    --color-idle: rgb(255, 185, 51);
+    --color-dnd: rgb(255, 40, 80);
+
+    position: relative;
+    display: inline-block;
+
+    &::after {
+      content: "";
+      aspect-ratio: 1;
+      background: var(--color-offline);
+      position: absolute;
+      width: var(--chip-size);
+      border-radius: 100%;
+      z-index: 1;
+    }
+    .chip-icon {
+      position: absolute;
+      width: var(--chip-size);
+      height: var(--chip-size);
+      border-radius: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: black;
+      z-index: 2;
+    }
+
+    .chip-label {
+      --_font-size-adjust: 0.7;
+      position: absolute;
+      width: var(--chip-size);
+      height: var(--chip-size);
+      border-radius: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: black;
+      z-index: 2;
+      font-size: calc(var(--chip-size) * var(--_font-size-adjust));
+      line-height: 1;
+      letter-spacing: -0.05rem;
+      user-select: none;
+
+      &.length-2 {
+        --_font-size-adjust: 0.6;
+      }
+
+      &.length-3 {
+        --_font-size-adjust: 0.5;
+      }
+    }
+
+    & > * {
+      /*
+    create the cutout mask around the image,
+    it's just a radial gradient positioned at the same place as the
+    psuedo-element ::after
+    */
+
+      &:not(.chip-icon, .chip-label) {
+        mask-image: radial-gradient(
+          var(--computed-mask-diameter) var(--computed-mask-diameter) at var(--computed-position-x)
+            var(--computed-position-y),
+          transparent calc(50% - 0.5px),
+          black calc(50% + 0.5px)
+        );
+      }
+    }
+
+    &.circle {
+      &::after,
+      .chip-icon,
+      .chip-label {
+        top: calc(var(--computed-position-y) - (var(--chip-size) / 2));
+        left: calc(var(--computed-position-x) - (var(--chip-size) / 2));
+      }
+    }
+
+    &.square {
+      &::after,
+      .chip-icon,
+      .chip-label {
+        top: calc(var(--computed-position-y) - (var(--chip-size) / 2));
+        left: calc(var(--computed-position-x) - (var(--chip-size) / 2));
+      }
+    }
+
+    &.online {
+      &::after {
+        background-color: var(--color-online);
+      }
+    }
+    &.idle {
+      &::after {
+        background-color: var(--color-idle);
+      }
+    }
+    &.dnd {
+      &::after {
+        background-color: var(--color-dnd);
+      }
+    }
+  }
+}
+</style>

package/app/components/{display-chip → 02.molecules/display-chip}/stories/DisplayChip.stories.ts

@@ -1,6 +1,7 @@
+import { computed } from "vue";
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import StorybookComponent from "../DisplayChip.vue";
-import type { DisplayChipConfig } from "../../../types/components";
+import type { DisplayChipConfig } from "~/types/components";
 
 // Custom interface for story args
 interface ChipStoryArgs {
@@ -129,7 +130,7 @@ export default {
     label: "",
     status: "offline",
     useSlot: true,
-    slotContent: "Avatar content",
+    slotContent: "SRC",
     styleClassPassthrough: [],
   },
 } as Meta<typeof StorybookComponent>;
@@ -137,30 +138,43 @@ export default {
 const Template: StoryFn<ChipStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
-    const chipConfig: DisplayChipConfig = {
-      size: `${args.chipSize}px`,
-      maskWidth: `${args.chipMaskWidth}px`,
-      offset: `${args.chipOffset}px`,
-      angle: `${args.chipAngle}deg`,
-      icon: args.icon || undefined,
-      label: args.label || undefined,
-    };
+    const chipConfig = computed(
+      (): DisplayChipConfig => ({
+        size: `${args.chipSize}px`,
+        maskWidth: `${args.chipMaskWidth}px`,
+        offset: `${args.chipOffset}px`,
+        angle: `${args.chipAngle}deg`,
+        icon: args.icon || undefined,
+        label: args.label || undefined,
+      })
+    );
 
-    const classes = [...(args.styleClassPassthrough || []), args.status];
+    const classes = computed(() => [...(args.styleClassPassthrough || []), args.status]);
 
     return { args, chipConfig, classes };
   },
   template: `
-    <div style="padding: 40px; display: flex; align-items: center; justify-content: center; min-height: 200px;">
+    <div style="display: flex; align-items: center; justify-content: center; height: 100vh;">
       <StorybookComponent
         :tag="args.tag"
         :shape="args.shape"
         :config="chipConfig"
         :style-class-passthrough="classes"
-        style="width: 100px; height: 100px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500;"
       >
         <template v-if="args.useSlot" #default>
-          {{ args.slotContent }}
+          <div :style="{
+            width: '50px',
+            height: '50px',
+            background: '#64748b',
+            borderRadius: args.shape === 'circle' ? '50%' : '4px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: '#f8fafc',
+            fontWeight: '600',
+            fontSize: '1.3rem',
+            fontFamily: 'sans-serif',
+          }">{{ args.slotContent }}</div>
         </template>
       </StorybookComponent>
     </div>
@@ -179,7 +193,6 @@ export const WithIcon = Template.bind({});
 WithIcon.args = {
   status: "online",
   icon: "mdi:check",
-  slotContent: "Icon Chip",
 };
 
 // Different Statuses
@@ -257,7 +270,6 @@ SquareShape.args = {
   shape: "square",
   status: "online",
   label: "□",
-  slotContent: "Square Parent",
 };
 
 // With Offset
@@ -266,7 +278,6 @@ WithOffset.args = {
   status: "online",
   chipOffset: 10,
   label: "10",
-  slotContent: "Offset Example",
 };
 
 // Multiple Chips Demo
@@ -276,61 +287,34 @@ const MultipleChipsTemplate: StoryFn<ChipStoryArgs> = (args) => ({
     return { args };
   },
   template: `
-    <div style="padding: 40px; display: flex; gap: 40px; align-items: center; justify-content: center; flex-wrap: wrap;">
+    <div style="display: flex; gap: 40px; align-items: center; justify-content: center; height: 100vh; flex-wrap: wrap;">
       <StorybookComponent
-        :config="{
-          size: '12px',
-          maskWidth: '4px',
-          offset: '0px',
-          angle: '45deg',
-          label: '5'
-        }"
+        :config="{ size: '12px', maskWidth: '4px', offset: '0px', angle: '45deg', label: '5' }"
         :style-class-passthrough="['online']"
-        style="width: 80px; height: 80px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white;"
       >
-        Online
+        <div style="width: 50px; height: 50px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #f8fafc; font-weight: 600; font-size: 1.3rem; font-family: sans-serif;">SRC</div>
       </StorybookComponent>
 
       <StorybookComponent
-        :config="{
-          size: '10px',
-          maskWidth: '3px',
-          offset: '2px',
-          angle: '315deg',
-          icon: 'mdi:pause'
-        }"
+        :config="{ size: '10px', maskWidth: '3px', offset: '2px', angle: '315deg', icon: 'mdi:pause' }"
         :style-class-passthrough="['idle']"
-        style="width: 80px; height: 80px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white;"
       >
-        Idle
+        <div style="width: 50px; height: 50px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #f8fafc; font-weight: 600; font-size: 1.3rem; font-family: sans-serif;">SRC</div>
       </StorybookComponent>
 
       <StorybookComponent
         shape="square"
-        :config="{
-          size: '14px',
-          maskWidth: '2px',
-          offset: '-5px',
-          angle: '135deg',
-          label: 'DND'
-        }"
+        :config="{ size: '14px', maskWidth: '2px', offset: '-5px', angle: '135deg', label: 'DND' }"
         :style-class-passthrough="['dnd']"
-        style="width: 80px; height: 80px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white;"
       >
-        DND
+        <div style="width: 50px; height: 50px; background: #64748b; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #f8fafc; font-weight: 600; font-size: 1.3rem; font-family: sans-serif;">SRC</div>
       </StorybookComponent>
 
       <StorybookComponent
-        :config="{
-          size: '16px',
-          maskWidth: '6px',
-          offset: '8px',
-          angle: '90deg'
-        }"
+        :config="{ size: '16px', maskWidth: '6px', offset: '8px', angle: '90deg' }"
         :style-class-passthrough="['offline']"
-        style="width: 80px; height: 80px; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: white;"
       >
-        Offline
+        <div style="width: 50px; height: 50px; background: #64748b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #f8fafc; font-weight: 600; font-size: 1.3rem; font-family: sans-serif;">SRC</div>
       </StorybookComponent>
     </div>
   `,