srcdev-nuxt-components 9.1.42 → 9.1.44

package/.claude/skills/index.md

@@ -34,6 +34,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── component-local-style-override.md — styleClassPassthrough + scoped style block for per-usage visual customisation
 ├── component-prop-driven-container-layout.md — vary CSS grid layout inside @container queries using data-* attribute selectors
 ├── css-grid-max-width-gutters.md             — cap a centre grid column width by growing gutters, with start/center alignment variants
+├── css-animation-utilities.md                — scroll-driven animation utility classes: scroller-x (carousel), entry-zoom-reveal, entry-slide-in, entry-exit-blur, auto-rotate
 ├── component-aria-landmark.md        — useAriaLabelledById composable: aria-labelledby for section/main/article/aside tags
 ├── component-export-types.md         — move inline component types to app/types/components/ barrel for consumer imports
 ├── component-inline-action-button.md — InputButtonCore variant="inline" pattern for buttons embedded in custom input wrappers
@@ -76,7 +77,9 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── display-qr-code.md      — DisplayQrCode: QR code SVG from a string value, colour/size/variant/radius props, currentColor default
     ├── capture-qr-code.md      — CaptureQrCode: live camera scanner, error state, visibility/route/KeepAlive lifecycle, media stream cleanup
     ├── decode-qr-code.md       — DecodeQrCode: file picker + drag-and-drop image decoder, shared results list, CSS override points
-    ├── data-grid.md            — DataGrid: auto-fit responsive grid, $slots iteration, --data-grid-columns/gap tokens, semantic tag + aria
+    ├── auto-grid.md            — AutoGrid: auto-fit responsive grid, $slots iteration, --auto-grid-min-col-size/gap tokens, semantic tag + aria
+    ├── display-avatar.md       — DisplayAvatar: circular avatar with image/initials fallback, size variants, chip badge, icon slot, styleClassPassthrough
+    ├── display-chip.md         — DisplayChip: status indicator chip overlay, CSS trig positioning, circle/square shapes, status colours, icon/label content
     ├── carousel-flip.md        — CarouselFlip: FLIP-animated carousel, carouselDataIds slot API, buttonLayout variants (sides/controls-flanking/controls-grouped-right/overlay), CSS tokens
     └── samaritan-prompt-mixed.md — SamaritanPromptMixed: animated text prompt, typewriter/word-pulse effects, MessageConfig API, aria-live accessibility, CSS tokens
 ```

package/app/assets/styles/setup/06.utility-classes/animations/_animation-scroller-x.css

@@ -0,0 +1,21 @@
+@keyframes scroller {
+  0%,
+  100% {
+    opacity: 0.25;
+    scale: 0.5;
+  }
+  35%,
+  65% {
+    opacity: 1;
+    scale: 1;
+  }
+}
+
+/* Used to scroll scale elements when scrolling x-axis like a carousel. */
+
+@media (prefers-reduced-motion: no-preference) {
+  .animation-scroller-x {
+    animation: scroller linear both;
+    animation-timeline: view(x);
+  }
+}

package/app/assets/styles/setup/06.utility-classes/animations/_auto-rotate.css

@@ -7,7 +7,9 @@
   }
 }
 
-.auto-rotate {
-  animation: autoRotateAnimation;
-  animation-timeline: view();
+@media (prefers-reduced-motion: no-preference) {
+  .auto-rotate {
+    animation: autoRotateAnimation;
+    animation-timeline: view();
+  }
 }

package/app/assets/styles/setup/06.utility-classes/animations/_entry-exit-blur.css

@@ -1,6 +1,8 @@
-.entry-exit-blur {
-  animation: entryExitBlurAnimation linear both;
-  animation-timeline: view();
+@media (prefers-reduced-motion: no-preference) {
+  .entry-exit-blur {
+    animation: entryExitBlurAnimation linear both;
+    animation-timeline: view();
+  }
 }
 @keyframes entryExitBlurAnimation {
   0% {

package/app/assets/styles/setup/06.utility-classes/animations/_entry-zoom-reveal.css

@@ -9,7 +9,9 @@
   }
 }
 
-.entry-zoom-reveal {
-  animation: entryZoomRevealAnimation both;
-  animation-timeline: view(70% 5%);
+@media (prefers-reduced-motion: no-preference) {
+  .entry-zoom-reveal {
+    animation: entryZoomRevealAnimation both;
+    animation-timeline: view(70% 5%);
+  }
 }

package/app/assets/styles/setup/06.utility-classes/animations/index.css

@@ -1,4 +1,5 @@
-@import './_entry-zoom-reveal';
-@import './_entry-slide-in';
-@import './_entry-exit-blur';
-@import './_auto-rotate';
+@import "./_entry-zoom-reveal";
+@import "./_entry-slide-in";
+@import "./_entry-exit-blur";
+@import "./_auto-rotate";
+@import "./_animation-scroller-x.css";

package/app/components/01.atoms/display-avatar/DisplayAvatar.vue

@@ -0,0 +1,130 @@
+<template>
+  <component
+    :is="props.chip ? DisplayChip : as"
+    v-bind="
+      props.chip
+        ? typeof props.chip === 'object'
+          ? { tag: chipTag, config: props.chip }
+          : { tag: chipTag, config: chipDefaultConfig }
+        : {}
+    "
+    class="display-avatar"
+    :class="[size, elementClasses]"
+    :style-class-passthrough="elementClasses"
+  >
+    <slot name="default">
+      <NuxtImg v-if="src" :src :alt="alt || 'Avatar'" width="100%" height="100%" class="avatar-image" />
+      <span v-else>{{ fallback }}</span>
+    </slot>
+    <slot name="icon"></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import DisplayChip from "../../02.molecules/display-chip/DisplayChip.vue";
+import type { DisplayChipConfig } from "~/types/components";
+
+interface Props {
+  as?: string | object;
+  src?: string;
+  alt?: string;
+  text?: string;
+  size?: "xs" | "s" | "md" | "lg" | "xl" | string;
+  chip?: boolean | DisplayChipConfig;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "span",
+  src: undefined,
+  alt: undefined,
+  text: undefined,
+  size: "md",
+  chip: undefined,
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses, updateElementClasses } = useStyleClassPassthrough(
+  props.styleClassPassthrough
+);
+
+if (props.chip && typeof props.chip === "object" && !("styleClassPassthrough" in props.chip)) {
+  updateElementClasses(["display-avatar", props.size]);
+}
+
+const fallback = computed(
+  () =>
+    props.text ||
+    (props.alt || "")
+      .split(" ")
+      .map((word) => word.charAt(0))
+      .join("")
+      .substring(0, 2)
+);
+
+const chipDefaultConfig: DisplayChipConfig = {
+  size: "12px",
+  maskWidth: "4px",
+  offset: "0px",
+  angle: "90deg",
+};
+
+const chipTag = computed((): "div" | "span" => (props.as === "div" || props.as === "span" ? props.as : "span"));
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .display-avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    color: var(--slate-03);
+
+    isolation: isolate;
+
+    &.xs {
+      width: 24px;
+      height: 24px;
+      font-size: 0.75rem;
+    }
+    &.s {
+      width: 32px;
+      height: 32px;
+      font-size: 0.875rem;
+    }
+    &.md {
+      width: 40px;
+      height: 40px;
+      font-size: 1rem;
+    }
+    &.lg {
+      width: 48px;
+      height: 48px;
+      font-size: 1.125rem;
+    }
+    &.xl {
+      width: 56px;
+      height: 56px;
+      font-size: 1.25rem;
+    }
+
+    .avatar-image {
+      width: 100%;
+      border-radius: 50%;
+      object-fit: cover;
+    }
+
+    .avatar-icon {
+      font-size: 24px;
+    }
+  }
+}
+</style>

package/app/components/{display-avatar → 01.atoms/display-avatar}/stories/DisplayAvatar.stories.ts

@@ -5,6 +5,14 @@ export default {
   title: "Components/UI/DisplayAvatar",
   component: StorybookComponent,
   argTypes: {
+    size: {
+      control: { type: "inline-radio" },
+      options: ["xs", "s", "md", "lg", "xl"],
+      description: "Avatar size",
+      table: {
+        category: "Avatar",
+      },
+    },
     src: {
       control: { type: "text" },
       description: "Avatar image source URL",
@@ -61,6 +69,7 @@ export default {
     },
   },
   args: {
+    size: "md",
     src: "https://github.com/srcdev.png",
     alt: "SrcDev Avatar",
     chipSize: 12,
@@ -77,7 +86,9 @@ const Template: StoryFn<typeof StorybookComponent> = (args) => ({
     return { args };
   },
   template: `
+    <div style="display: flex; align-items: center; justify-content: center; height: 100vh;">
     <StorybookComponent
+      :size="args.size"
       :src="args.src"
       :alt="args.alt"
       :chip="{
@@ -88,6 +99,7 @@ const Template: StoryFn<typeof StorybookComponent> = (args) => ({
       }"
       :style-class-passthrough="args.styleClassPassthrough"
     />
+    </div>
   `,
 });
 

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/01.atoms/grids/data-grid/AutoGrid.vue

@@ -0,0 +1,57 @@
+<template>
+  <component :is="tag" class="auto-grid" :class="[elementClasses, { 'is-responsive': isResponsive }]" :aria-labelledby="ariaLabelledby">
+    <slot v-for="(_, name) in $slots" :key="name" :name="name"></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "div" | "section" | "article" | "main";
+  isResponsive?: boolean;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  isResponsive: false,
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { ariaLabelledby } = useAriaLabelledById(props.tag);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough)
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .auto-grid {
+    --auto-grid-min-col-size-small: 250px;
+    --auto-grid-min-col-size-default: 300px;
+    --auto-grid-min-col-size-large: 350px;
+    --auto-grid-gap: 1rem;
+
+    display: grid;
+    gap: var(--auto-grid-gap);
+
+    &:not(.is-responsive) {
+      grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min-col-size-default), 100%), 1fr));
+    }
+
+    &.is-responsive {
+      grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min-col-size-small), 100%), 1fr));
+
+      @container (width >= 768px) {
+        grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min-col-size-default), 100%), 1fr));
+      }
+
+      @container (width >= 1024px) {
+        grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min-col-size-large), 100%), 1fr));
+      }
+    }
+  }
+}
+</style>