srcdev-nuxt-components 9.4.11 → 9.5.0

package/app/components/01.atoms/content-wrappers/content-width/tests/ContentWidth.spec.ts

@@ -1,132 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { mountSuspended } from "@nuxt/test-utils/runtime";
-import ContentWidth from "../ContentWidth.vue";
-
-const mockElementClasses = { value: "" };
-
-const mockUseStyleClassPassthrough = vi.fn(() => ({
-  elementClasses: mockElementClasses,
-}));
-
-vi.mock("#imports", () => ({
-  useStyleClassPassthrough: mockUseStyleClassPassthrough,
-  useId: () => "test-id",
-}));
-
-describe("ContentWidth", () => {
-  let wrapper: Awaited<ReturnType<typeof mountSuspended>>;
-
-  const createWrapper = async (props = {}, slots = {}) => {
-    wrapper = await mountSuspended(ContentWidth, {
-      props: { styleClassPassthrough: [], ...props },
-      slots,
-    });
-    return wrapper;
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    mockElementClasses.value = "";
-  });
-
-  afterEach(() => {
-    wrapper?.unmount();
-  });
-
-  describe("Component Rendering", () => {
-    it("mounts without error", async () => {
-      await createWrapper();
-      expect(wrapper.find(".content-width-wrapper").exists()).toBe(true);
-    });
-
-    it("renders the correct inner structure", async () => {
-      await createWrapper();
-      expect(wrapper.find(".content-width").exists()).toBe(true);
-      expect(wrapper.find(".content-width-inner").exists()).toBe(true);
-    });
-
-    it("renders as a div by default", async () => {
-      await createWrapper();
-      expect(wrapper.find(".content-width-wrapper").element.tagName).toBe("DIV");
-    });
-  });
-
-  describe("Tag Prop", () => {
-    const tags = ["section", "article", "aside", "header", "footer", "main", "nav"] as const;
-
-    tags.forEach((tag) => {
-      it(`renders as <${tag}> when tag="${tag}"`, async () => {
-        await createWrapper({ tag });
-        expect(wrapper.find(".content-width-wrapper").element.tagName).toBe(tag.toUpperCase());
-      });
-    });
-  });
-
-  describe("isLandmark Prop", () => {
-    it("does not set tabindex or aria-label by default", async () => {
-      await createWrapper();
-      const el = wrapper.find(".content-width-wrapper");
-      expect(el.attributes("tabindex")).toBeUndefined();
-      expect(el.attributes("aria-label")).toBeUndefined();
-    });
-
-    it("sets tab-index=0 when isLandmark is true", async () => {
-      await createWrapper({ isLandmark: true });
-      expect(wrapper.find(".content-width-wrapper").attributes("tab-index")).toBe("0");
-    });
-
-    it("sets aria-label when isLandmark is true", async () => {
-      await createWrapper({ isLandmark: true });
-      expect(wrapper.find(".content-width-wrapper").attributes("aria-label")).toBe(
-        "Content Width Landmark"
-      );
-    });
-  });
-
-  describe("Slot", () => {
-    it("renders default slot content", async () => {
-      await createWrapper({}, { default: "<p>Slot content</p>" });
-      expect(wrapper.find(".content-width-inner").html()).toContain("Slot content");
-    });
-
-    it("renders nested slot content", async () => {
-      await createWrapper(
-        {},
-        { default: "<section><h2>Title</h2><p>Body</p></section>" }
-      );
-      expect(wrapper.find(".content-width-inner h2").text()).toBe("Title");
-    });
-
-    it("renders without slot content gracefully", async () => {
-      await createWrapper();
-      expect(wrapper.find(".content-width-inner").exists()).toBe(true);
-    });
-  });
-
-  describe("styleClassPassthrough Prop", () => {
-    it("accepts a string value", async () => {
-      await createWrapper({ styleClassPassthrough: "custom-class" });
-      expect(wrapper.find(".content-width-wrapper").exists()).toBe(true);
-    });
-
-    it("accepts an array of strings", async () => {
-      await createWrapper({ styleClassPassthrough: ["class-a", "class-b"] });
-      expect(wrapper.find(".content-width-wrapper").exists()).toBe(true);
-    });
-
-    it("applies elementClasses from useStyleClassPassthrough to wrapper", async () => {
-      mockElementClasses.value = "injected-class";
-      await createWrapper({ styleClassPassthrough: "injected-class" });
-      expect(wrapper.find(".content-width-wrapper").classes()).toContain("injected-class");
-    });
-  });
-
-  describe("DOM Structure", () => {
-    it("maintains correct nesting: wrapper > content-width > inner > slot", async () => {
-      await createWrapper({}, { default: "<span>nested</span>" });
-      const inner = wrapper.find(".content-width-wrapper .content-width .content-width-inner");
-      expect(inner.exists()).toBe(true);
-      expect(inner.find("span").text()).toBe("nested");
-    });
-  });
-});

package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-cols/tests/__snapshots__/LayoutGrid.spec.ts.snap

@@ -1,36 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`LayoutGridByCols > renders correct HTML structure (div, 2 items) 1`] = `
-"<div class="layout-grid">
-  <!--v-if-->
-  <div class="layout-grid-inner">
-    <p>First</p>
-    <p>Second</p>
-  </div>
-</div>"
-`;
-
-exports[`LayoutGridByCols > renders correct HTML structure (section with label) 1`] = `
-"<section class="layout-grid" aria-labelledby="v-0-0">
-  <p id="v-0-0" class="sr-only">Feature grid</p>
-  <div class="layout-grid-inner"></div>
-</section>"
-`;
-
-exports[`LayoutGridByCols > renders correct HTML structure with styleClassPassthrough 1`] = `
-"<div class="layout-grid custom-class another-class">
-  <!--v-if-->
-  <div class="layout-grid-inner"></div>
-</div>"
-`;
-
-exports[`LayoutGridByCols > renders correctly with all props and slots combined 1`] = `
-"<section class="layout-grid services-grid" aria-labelledby="v-0-0" columns="3">
-  <p id="v-0-0" class="sr-only">Services</p>
-  <div class="layout-grid-inner">
-    <p>One</p>
-    <p>Two</p>
-    <p>Three</p>
-  </div>
-</section>"
-`;

package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-width/LayoutGridByWidth.vue

@@ -1,70 +0,0 @@
-<template>
-  <component
-    :is="tag"
-    class="layout-grid-by-width"
-    :aria-labelledby="ariaLabelledby"
-    :class="[elementClasses]"
-  >
-    <p v-if="ariaLabelledby" :id="headingId" class="sr-only">
-      {{ props.label || "If tag='section' then a label is required" }}
-    </p>
-    <div class="layout-grid-inner">
-      <template v-for="(_, name) in $slots" :key="name">
-        <slot :name="name"></slot>
-      </template>
-    </div>
-  </component>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  tag?: "div" | "section";
-  label?: string;
-  columnWidth?: string;
-  gap?: string;
-  singleColBelow?: string;
-  styleClassPassthrough?: string | string[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  tag: "div",
-  label: "",
-  columnWidth: "300px",
-  gap: "1rem",
-  singleColBelow: "768px",
-  styleClassPassthrough: () => [],
-});
-
-const { headingId, ariaLabelledby } = useAriaLabelledById(() => props.tag);
-
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    updateElementClasses(props.styleClassPassthrough);
-  }
-);
-</script>
-
-<style lang="css">
-@layer components {
-  .layout-grid-by-width {
-    container-type: inline-size;
-    container-name: layoutGrid;
-
-    --_gap: v-bind(gap);
-
-    .layout-grid-inner {
-      display: grid;
-      grid-auto-flow: row;
-      gap: var(--_gap);
-
-      @container layoutGrid (width >= 768px) {
-        grid-template-columns: repeat(auto-fit, minmax(v-bind(columnWidth), 1fr));
-        gap: var(--_gap);
-      }
-    }
-  }
-}
-</style>

package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-width/stories/LayoutGridByWidth.stories.ts

@@ -1,220 +0,0 @@
-import { computed } from "vue";
-import LayoutGridByWidth from "../LayoutGridByWidth.vue";
-import type { Meta, StoryObj } from "@nuxtjs/storybook";
-
-type StoryArgs = InstanceType<typeof LayoutGridByWidth>["$props"] & { itemCount?: number };
-
-const meta: Meta<StoryArgs> = {
-  title: "Atoms/Content Wrappers/Layout Grid By Width",
-  component: LayoutGridByWidth,
-  argTypes: {
-    tag: {
-      control: { type: "select" },
-      options: ["div", "section"],
-      description: "Semantic HTML tag for the root element — use section with a label for landmark regions",
-      table: { category: "Semantic" },
-    },
-    label: {
-      control: "text",
-      description:
-        "Accessible label for the grid — required when tag is section (rendered as a visually hidden element)",
-      table: { category: "Semantic" },
-    },
-    itemCount: {
-      control: { type: "range", min: 0, max: 18, step: 1 },
-      description: "Number of grid cells to render — must match the number of #item-{n} slots provided",
-    },
-    columnWidth: {
-      control: { type: "select" },
-      options: ["200px", "312px", "400px", "500px"],
-      description:
-        "String → value to set repeat minmax minimum value CSS string (e.g. '200px', '15rem') → repeat(auto-fill, minmax(value, 1fr)) wrapping columns.",
-    },
-    gap: {
-      control: "text",
-      description: "Grid gap — any valid CSS length (e.g. '1rem', '2.4rem', '16px')",
-    },
-    singleColBelow: {
-      control: "text",
-      description:
-        "Container width below which the grid collapses to a single column — any valid CSS length (e.g. '600px', '40rem'). Default '0px' means never collapse.",
-    },
-    styleClassPassthrough: {
-      table: { disable: true },
-    },
-  },
-  args: {
-    tag: "div",
-    itemCount: 6,
-    columnWidth: "312px",
-    gap: "1rem",
-    singleColBelow: "768px",
-    styleClassPassthrough: [],
-  },
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "A CSS grid wrapper driven by props. Content is placed via dynamic named slots (#item-0, #item-1, …). Pass an integer to columnWidth for N equal columns, or a CSS width string for auto-fill behaviour. The grid collapses to a single column below singleColBelow using a CSS container query.",
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<StoryArgs>;
-
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-
-const colours = [
-  { bg: "#dbeafe", fg: "#1e40af" },
-  { bg: "#dcfce7", fg: "#166534" },
-  { bg: "#fef3c7", fg: "#92400e" },
-  { bg: "#ede9fe", fg: "#5b21b6" },
-  { bg: "#fce7f3", fg: "#9d174d" },
-  { bg: "#ffedd5", fg: "#9a3412" },
-  { bg: "#f0fdf4", fg: "#14532d" },
-  { bg: "#fdf4ff", fg: "#7e22ce" },
-];
-
-const cell = (label: string, index: number, body = "Placeholder content for this grid cell.") =>
-  `<div style="padding: 2.4rem; background: ${colours[index % colours.length]?.bg}; border-radius: 0.8rem; color: ${colours[index % colours.length]?.fg}; font-family: sans-serif; height: 100%;">
-    <strong style="display: block; margin-bottom: 0.8rem;">${label}</strong>
-    <p style="margin: 0; font-size: 1.4rem; line-height: 1.6; opacity: 0.8;">${body}</p>
-  </div>`;
-
-// Pre-generate max slots — the component only renders up to itemCount, extras are ignored.
-const allSlots = Array.from(
-  { length: 18 },
-  (_, i) => `<template #item-${i}>${cell(`Item ${i + 1}`, i)}</template>`
-).join("\n        ");
-
-// Normalise args: explicitly maps each prop so no raw slider number leaks through to the component.
-// colWidth: 0 → undefined (not set), N → "Nrem" CSS string.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const toStoryArgs = (args: any) =>
-  computed(() => ({
-    tag: args.tag as "div" | "section",
-    label: args.label as string,
-    itemCount: Number(args.itemCount),
-    columnWidth: args.columnWidth as string,
-    gap: args.gap as string,
-    singleColBelow: args.singleColBelow as string,
-    styleClassPassthrough: args.styleClassPassthrough as string[],
-  }));
-
-// ─── Stories ──────────────────────────────────────────────────────────────────
-
-/** Default — equal columns. Adjust columns, colWidth and itemCount with the sliders. */
-export const Default: Story = {
-  args: {
-    itemCount: 6,
-    columnWidth: "240px",
-  },
-  render: (args) => ({
-    components: { LayoutGridByWidth },
-    setup() {
-      return { storyArgs: toStoryArgs(args) };
-    },
-    template: `
-      <LayoutGridByWidth v-bind="storyArgs">
-        ${allSlots}
-      </LayoutGridByWidth>
-    `,
-  }),
-};
-
-/** Single column below a breakpoint — collapses to stacked layout on narrow containers. */
-export const SingleColBelow: Story = {
-  name: "Single Column Below 600px",
-  args: {
-    itemCount: 6,
-    columnWidth: "300px",
-    singleColBelow: "600px",
-  },
-  render: (args) => ({
-    components: { LayoutGridByWidth },
-    setup() {
-      return { storyArgs: toStoryArgs(args) };
-    },
-    template: `
-      <LayoutGridByWidth v-bind="storyArgs">
-        ${allSlots}
-      </LayoutGridByWidth>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Below 600px container width the grid collapses to a single column via a CSS container query. Resize the canvas to see the switch.",
-      },
-    },
-  },
-};
-
-/** Custom gap — wider spacing between cells. */
-export const CustomGap: Story = {
-  name: "Custom Gap",
-  args: {
-    itemCount: 6,
-    columnWidth: "300px",
-    gap: "3.2rem",
-  },
-  render: (args) => ({
-    components: { LayoutGridByWidth },
-    setup() {
-      return { storyArgs: toStoryArgs(args) };
-    },
-    template: `
-      <LayoutGridByWidth v-bind="storyArgs">
-        ${allSlots}
-      </LayoutGridByWidth>
-    `,
-  }),
-};
-
-/** Semantic section — tag='section' with a visually hidden label for accessibility. */
-export const SemanticSection: Story = {
-  name: "Semantic Section",
-  args: {
-    tag: "section",
-    label: "Feature highlights",
-    itemCount: 6,
-    columnWidth: "300px",
-  },
-  render: (args) => ({
-    components: { LayoutGridByWidth },
-    setup() {
-      return { storyArgs: toStoryArgs(args) };
-    },
-    template: `
-      <LayoutGridByWidth v-bind="storyArgs">
-        ${allSlots}
-      </LayoutGridByWidth>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "When tag is section, an aria-labelledby attribute is added and the label is rendered as a visually hidden element for screen readers.",
-      },
-    },
-  },
-};
-
-/** Zero items — renders an empty grid with no cells. */
-export const ZeroItems: Story = {
-  name: "Zero Items",
-  args: {
-    itemCount: 0,
-  },
-  render: (args) => ({
-    components: { LayoutGridByWidth },
-    setup() {
-      return { storyArgs: toStoryArgs(args) };
-    },
-    template: `<LayoutGridByWidth v-bind="storyArgs" />`,
-  }),
-};

package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-width/tests/LayoutGridByWidth.spec.ts

@@ -1,174 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { mountSuspended } from "@nuxt/test-utils/runtime";
-import LayoutGridByWidth from "../LayoutGridByWidth.vue";
-
-describe("LayoutGridByWidth", () => {
-  // ─── Mount ───────────────────────────────────────────────────────────────
-
-  it("mounts without error", async () => {
-    const wrapper = await mountSuspended(LayoutGridByWidth);
-    expect(wrapper.vm).toBeTruthy();
-  });
-
-  // ─── Snapshots ───────────────────────────────────────────────────────────
-
-  it("renders correct HTML structure (div, 2 items)", async () => {
-    const wrapper = await mountSuspended(LayoutGridByWidth, {
-      slots: {
-        "item-0": "<p>First</p>",
-        "item-1": "<p>Second</p>",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("renders correct HTML structure (section with label)", async () => {
-    const wrapper = await mountSuspended(LayoutGridByWidth, {
-      props: { tag: "section", label: "Feature grid" },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("renders correct HTML structure with styleClassPassthrough", async () => {
-    const wrapper = await mountSuspended(LayoutGridByWidth, {
-      props: { styleClassPassthrough: ["custom-class", "another-class"] },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  // ─── Tag rendering ───────────────────────────────────────────────────────
-
-  it("renders as <div> by default", async () => {
-    const wrapper = await mountSuspended(LayoutGridByWidth);
-    expect(wrapper.element.tagName).toBe("DIV");
-  });
-
-  it("renders as <section> when tag='section'", async () => {
-    const wrapper = await mountSuspended(LayoutGridByWidth, {
-      props: { tag: "section" },
-    });
-    expect(wrapper.element.tagName).toBe("SECTION");
-  });
-
-  // ─── Base class ──────────────────────────────────────────────────────────
-
-  it("always has the layout-grid class", async () => {
-    const wrapper = await mountSuspended(LayoutGridByWidth);
-    expect(wrapper.classes()).toContain("layout-grid-by-width");
-  });
-
-  // ─── Inner div ───────────────────────────────────────────────────────────
-
-  it("renders a .layout-grid-inner div", async () => {
-    const wrapper = await mountSuspended(LayoutGridByWidth);
-    expect(wrapper.find(".layout-grid-inner").exists()).toBe(true);
-  });
-
-  // ─── Accessibility ───────────────────────────────────────────────────────
-
-  it("renders sr-only label and aria-labelledby when tag is section", async () => {
-    const wrapper = await mountSuspended(LayoutGridByWidth, {
-      props: { tag: "section", label: "Card grid" },
-    });
-    const srOnly = wrapper.find(".sr-only");
-    expect(srOnly.exists()).toBe(true);
-    expect(srOnly.text()).toBe("Card grid");
-    expect(wrapper.attributes("aria-labelledby")).toBeTruthy();
-  });
-
-  it("does not render sr-only label or aria-labelledby when tag is div", async () => {
-    const wrapper = await mountSuspended(LayoutGridByWidth, {
-      props: { tag: "div", label: "Ignored" },
-    });
-    expect(wrapper.find(".sr-only").exists()).toBe(false);
-    expect(wrapper.attributes("aria-labelledby")).toBeUndefined();
-  });
-
-  // ─── Dynamic slots ───────────────────────────────────────────────────────
-
-  it("renders slot content for each item inside the inner div", async () => {
-    const wrapper = await mountSuspended(LayoutGridByWidth, {
-      slots: {
-        "item-0": "<span>Alpha</span>",
-        "item-1": "<span>Beta</span>",
-        "item-2": "<span>Gamma</span>",
-      },
-    });
-    const inner = wrapper.find(".layout-grid-inner");
-    expect(inner.text()).toContain("Alpha");
-    expect(inner.text()).toContain("Beta");
-    expect(inner.text()).toContain("Gamma");
-  });
-
-  it("renders no slot content when no slots are provided", async () => {
-    const wrapper = await mountSuspended(LayoutGridByWidth);
-    expect(wrapper.find(".layout-grid-inner").text().trim()).toBe("");
-  });
-
-  // ─── styleClassPassthrough ───────────────────────────────────────────────
-
-  it("applies a single styleClassPassthrough string", async () => {
-    const wrapper = await mountSuspended(LayoutGridByWidth, {
-      props: { styleClassPassthrough: "my-class" },
-    });
-    expect(wrapper.classes()).toContain("my-class");
-  });
-
-  it("applies multiple styleClassPassthrough classes from an array", async () => {
-    const wrapper = await mountSuspended(LayoutGridByWidth, {
-      props: { styleClassPassthrough: ["class-a", "class-b"] },
-    });
-    expect(wrapper.classes()).toContain("class-a");
-    expect(wrapper.classes()).toContain("class-b");
-  });
-
-  // ─── columnWidth prop ─────────────────────────────────────────────────────
-
-  it("accepts columnWidth without error", async () => {
-    const wrapper = await mountSuspended(LayoutGridByWidth, {
-      props: { columnWidth: "312px" },
-    });
-    expect(wrapper.vm).toBeTruthy();
-  });
-
-  // ─── Other prop acceptance ────────────────────────────────────────────────
-
-  it("accepts gap prop without error", async () => {
-    const wrapper = await mountSuspended(LayoutGridByWidth, {
-      props: { gap: "2rem" },
-    });
-    expect(wrapper.vm).toBeTruthy();
-  });
-
-  it("accepts singleColBelow prop without error", async () => {
-    const wrapper = await mountSuspended(LayoutGridByWidth, {
-      props: { singleColBelow: "600px" },
-    });
-    expect(wrapper.vm).toBeTruthy();
-  });
-
-  // ─── Combined ────────────────────────────────────────────────────────────
-
-  it("renders correctly with all props and slots combined", async () => {
-    const wrapper = await mountSuspended(LayoutGridByWidth, {
-      props: {
-        tag: "section",
-        label: "Services",
-        columnWidth: "260px",
-        gap: "2rem",
-        singleColBelow: "768px",
-        styleClassPassthrough: ["services-grid"],
-      },
-      slots: {
-        "item-0": "<p>One</p>",
-        "item-1": "<p>Two</p>",
-        "item-2": "<p>Three</p>",
-      },
-    });
-    expect(wrapper.element.tagName).toBe("SECTION");
-    expect(wrapper.classes()).toContain("services-grid");
-    expect(wrapper.find(".layout-grid-inner").exists()).toBe(true);
-    expect(wrapper.text()).toContain("One");
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-});

package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-width/tests/__snapshots__/LayoutGrid.spec.ts.snap

@@ -1,36 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`LayoutGridByCols > renders correct HTML structure (div, 2 items) 1`] = `
-"<div class="layout-grid">
-  <!--v-if-->
-  <div class="layout-grid-inner">
-    <p>First</p>
-    <p>Second</p>
-  </div>
-</div>"
-`;
-
-exports[`LayoutGridByCols > renders correct HTML structure (section with label) 1`] = `
-"<section class="layout-grid" aria-labelledby="v-0-0">
-  <p id="v-0-0" class="sr-only">Feature grid</p>
-  <div class="layout-grid-inner"></div>
-</section>"
-`;
-
-exports[`LayoutGridByCols > renders correct HTML structure with styleClassPassthrough 1`] = `
-"<div class="layout-grid custom-class another-class">
-  <!--v-if-->
-  <div class="layout-grid-inner"></div>
-</div>"
-`;
-
-exports[`LayoutGridByCols > renders correctly with all props and slots combined 1`] = `
-"<section class="layout-grid services-grid" aria-labelledby="v-0-0" columns="3">
-  <p id="v-0-0" class="sr-only">Services</p>
-  <div class="layout-grid-inner">
-    <p>One</p>
-    <p>Two</p>
-    <p>Three</p>
-  </div>
-</section>"
-`;