srcdev-nuxt-components 9.0.14 → 9.0.16

package/app/components/01.atoms/card/CardCore.vue

@@ -0,0 +1,92 @@
+<template>
+  <component
+    :is="tag"
+    class="card-core"
+    :class="[variant, elementClasses, { 'has-dividers': hasDividers }, { 'no-outline': noOutline }]"
+  >
+    <template v-for="(_, name) in $slots" :key="name">
+      <div class="card-row" :class="`card-row-${name}`">
+        <slot :name="name"></slot>
+      </div>
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "div" | "section" | "article" | "aside" | "main" | "nav";
+  hasDividers?: boolean;
+  noOutline?: boolean;
+  variant?: "solid" | "subtle" | "soft" | "outline";
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  hasDividers: false,
+  noOutline: false,
+  variant: "solid",
+  styleClassPassthrough: () => [],
+});
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .card-core {
+    --_inner-padding: 1rem;
+    --_background-color: white;
+    --_border-color: green;
+    --_border-width: 0.2rem;
+    --_box-shadow-color: transparent;
+
+    display: grid;
+    grid-auto-flow: row;
+    /* gap: 1rem; */
+    border-radius: 0.5rem;
+    overflow: hidden;
+
+    background-color: var(--_background-color, transparent);
+    border: var(--_border-width) solid var(--_border-color, transparent);
+    box-shadow: 0 0 0.4rem var(--_border-width) var(--_box-shadow-color, transparent);
+
+    &.no-outline {
+      --_border-width: 0;
+    }
+
+    &.solid {
+      --_background-color: light-dark(var(--slate-00), var(--slate-10));
+      --_border-color: red;
+    }
+
+    &.subtle {
+      --_background-color: color-mix(in oklab, light-dark(var(--slate-01), var(--slate-08)) 50%, transparent);
+      --_border-color: red;
+    }
+
+    &.soft {
+      --_background-color: color-mix(in oklab, light-dark(var(--slate-01), var(--slate-08)) 20%, transparent);
+      --_box-shadow-color: color-mix(in oklab, light-dark(var(--slate-02), var(--slate-08)) 80%, transparent);
+    }
+
+    &.outline {
+      --_background-color: transparent;
+      --_border-color: green;
+    }
+
+    &.has-dividers {
+      .card-row + .card-row {
+        /* border-top: 0.2rem solid var(--_border-color); */
+        border-top: 0.2rem solid green;
+      }
+    }
+  }
+}
+</style>

package/app/components/01.atoms/card/stories/CardCore.stories.ts

@@ -0,0 +1,132 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import StorybookComponent from "../CardCore.vue";
+
+interface CardCoreArgs {
+  tag: "div" | "section" | "article" | "aside" | "main" | "nav";
+  variant: "solid" | "subtle" | "soft" | "outline";
+  hasDividers: boolean;
+  noOutline: boolean;
+  styleClassPassthrough: string[];
+}
+
+export default {
+  title: "Atoms/Card/Card Core Dynamic",
+  component: StorybookComponent,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "section", "article", "aside", "main", "nav"],
+      description: "HTML tag to render",
+      table: { category: "Semantic" },
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["solid", "subtle", "soft", "outline"],
+      description: "Visual style variant",
+      table: { category: "Appearance" },
+    },
+    hasDividers: {
+      control: { type: "boolean" },
+      description: "Add dividers between slot sections",
+      table: { category: "Appearance" },
+    },
+    noOutline: {
+      control: { type: "boolean" },
+      description: "Remove border outline",
+      table: { category: "Appearance" },
+    },
+    styleClassPassthrough: {
+      table: { disable: true },
+    },
+  },
+  args: {
+    tag: "div",
+    variant: "solid",
+    hasDividers: false,
+    noOutline: false,
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A dynamic display card that renders whatever named slots are provided. Any number of slots can be passed and each is wrapped in its own div.",
+      },
+    },
+  },
+} as Meta<CardCoreArgs>;
+
+const Template: StoryFn<CardCoreArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="padding: 40px; max-width: 480px;">
+      <StorybookComponent
+        :tag="args.tag"
+        :variant="args.variant"
+        :has-dividers="args.hasDividers"
+        :no-outline="args.noOutline"
+        :style-class-passthrough="args.styleClassPassthrough"
+      >
+        <template #header>
+          <div style="padding: 1.6rem; border-bottom: 1px solid transparent;">
+            <p style="margin: 0; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6;">Category</p>
+            <h2 style="margin: 0.4rem 0 0; font-size: 2rem; font-weight: 600;">Card Title</h2>
+          </div>
+        </template>
+        <template #media>
+          <div style="aspect-ratio: 16/9; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.4rem;">
+            Media Slot
+          </div>
+        </template>
+        <template #body>
+          <div style="padding: 1.6rem;">
+            <p style="margin: 0; line-height: 1.6; opacity: 0.8;">
+              This is the body content. It can contain any markup — paragraphs, lists, or other components.
+            </p>
+          </div>
+        </template>
+        <template #footer>
+          <div style="padding: 1.2rem 1.6rem; display: flex; gap: 0.8rem; justify-content: flex-end;">
+            <button style="padding: 0.8rem 1.6rem; border-radius: 0.4rem; border: 1px solid currentColor; background: transparent; cursor: pointer; opacity: 0.7;">Cancel</button>
+            <button style="padding: 0.8rem 1.6rem; border-radius: 0.4rem; border: none; background: #667eea; color: white; cursor: pointer;">Confirm</button>
+          </div>
+        </template>
+      </StorybookComponent>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Subtle = Template.bind({});
+Subtle.args = { variant: "subtle" };
+
+export const Soft = Template.bind({});
+Soft.args = { variant: "soft" };
+
+export const Outline = Template.bind({});
+Outline.args = { variant: "outline" };
+
+export const WithDividers = Template.bind({});
+WithDividers.args = { hasDividers: true };
+WithDividers.parameters = {
+  docs: {
+    description: {
+      story: "Adds visual dividers between each slot section.",
+    },
+  },
+};
+
+export const NoOutline = Template.bind({});
+NoOutline.args = { noOutline: true };
+NoOutline.parameters = {
+  docs: {
+    description: {
+      story: "Card without a border or box shadow.",
+    },
+  },
+};

package/app/components/01.atoms/card/tests/CardCore.spec.ts

@@ -0,0 +1,207 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import CardCore from "../CardCore.vue";
+
+describe("CardCore", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(CardCore);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure (default)", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      slots: {
+        header: "<h2>Title</h2>",
+        body: "<p>Content</p>",
+        footer: "<p>Footer</p>",
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (article, subtle, dividers)", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      props: { tag: "article", variant: "subtle", hasDividers: true },
+      slots: {
+        header: "<h2>Title</h2>",
+        body: "<p>Content</p>",
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure with styleClassPassthrough", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      props: { styleClassPassthrough: ["featured-card"] },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Tag rendering ───────────────────────────────────────────────────────
+
+  it("renders as <div> by default", async () => {
+    const wrapper = await mountSuspended(CardCore);
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it.each([
+    ["section", "SECTION"],
+    ["article", "ARTICLE"],
+    ["aside", "ASIDE"],
+    ["main", "MAIN"],
+    ["nav", "NAV"],
+  ] as const)("renders as <%s> when tag='%s'", async (tag, expected) => {
+    const wrapper = await mountSuspended(CardCore, { props: { tag } });
+    expect(wrapper.element.tagName).toBe(expected);
+  });
+
+  // ─── Base class ──────────────────────────────────────────────────────────
+
+  it("always has the card-core class", async () => {
+    const wrapper = await mountSuspended(CardCore);
+    expect(wrapper.classes()).toContain("card-core");
+  });
+
+  // ─── Variant ─────────────────────────────────────────────────────────────
+
+  it("applies solid class by default", async () => {
+    const wrapper = await mountSuspended(CardCore);
+    expect(wrapper.classes()).toContain("solid");
+  });
+
+  it.each(["solid", "subtle", "soft", "outline"] as const)(
+    "applies %s variant class",
+    async (variant) => {
+      const wrapper = await mountSuspended(CardCore, { props: { variant } });
+      expect(wrapper.classes()).toContain(variant);
+    }
+  );
+
+  // ─── hasDividers ─────────────────────────────────────────────────────────
+
+  it("does not have has-dividers class by default", async () => {
+    const wrapper = await mountSuspended(CardCore);
+    expect(wrapper.classes()).not.toContain("has-dividers");
+  });
+
+  it("applies has-dividers class when hasDividers=true", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      props: { hasDividers: true },
+    });
+    expect(wrapper.classes()).toContain("has-dividers");
+  });
+
+  // ─── noOutline ───────────────────────────────────────────────────────────
+
+  it("does not have no-outline class by default", async () => {
+    const wrapper = await mountSuspended(CardCore);
+    expect(wrapper.classes()).not.toContain("no-outline");
+  });
+
+  it("applies no-outline class when noOutline=true", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      props: { noOutline: true },
+    });
+    expect(wrapper.classes()).toContain("no-outline");
+  });
+
+  // ─── Dynamic slots ───────────────────────────────────────────────────────
+
+  it("renders a .card-row wrapper for each slot", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      slots: {
+        header: "<h2>Header</h2>",
+        body: "<p>Body</p>",
+        footer: "<p>Footer</p>",
+      },
+    });
+    expect(wrapper.findAll(".card-row")).toHaveLength(3);
+  });
+
+  it("applies card-row-{name} class derived from the slot name", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      slots: {
+        header: "<h2>Header</h2>",
+        media: "<img src='x.jpg' alt='' />",
+        footer: "<p>Footer</p>",
+      },
+    });
+    expect(wrapper.find(".card-row-header").exists()).toBe(true);
+    expect(wrapper.find(".card-row-media").exists()).toBe(true);
+    expect(wrapper.find(".card-row-footer").exists()).toBe(true);
+  });
+
+  it("renders slot content inside the correct card-row", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      slots: {
+        header: "<h2>My Title</h2>",
+        body: "<p>My Body</p>",
+      },
+    });
+    expect(wrapper.find(".card-row-header").text()).toBe("My Title");
+    expect(wrapper.find(".card-row-body").text()).toBe("My Body");
+  });
+
+  it("renders no card-row elements when no slots are provided", async () => {
+    const wrapper = await mountSuspended(CardCore);
+    expect(wrapper.findAll(".card-row")).toHaveLength(0);
+  });
+
+  // ─── styleClassPassthrough ───────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      props: { styleClassPassthrough: "featured-card" },
+    });
+    expect(wrapper.classes()).toContain("featured-card");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      props: { styleClassPassthrough: ["featured-card", "highlight"] },
+    });
+    expect(wrapper.classes()).toContain("featured-card");
+    expect(wrapper.classes()).toContain("highlight");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      props: { styleClassPassthrough: ["original"] },
+    });
+    expect(wrapper.classes()).toContain("original");
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+
+  // ─── Combined ────────────────────────────────────────────────────────────
+
+  it("renders correctly with all props and slots combined", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      props: {
+        tag: "article",
+        variant: "soft",
+        hasDividers: true,
+        noOutline: true,
+        styleClassPassthrough: ["featured-card"],
+      },
+      slots: {
+        header: "<h2>Title</h2>",
+        media: "<img src='x.jpg' alt='' />",
+        body: "<p>Content</p>",
+        footer: "<p>Footer</p>",
+      },
+    });
+    expect(wrapper.element.tagName).toBe("ARTICLE");
+    expect(wrapper.classes()).toContain("soft");
+    expect(wrapper.classes()).toContain("has-dividers");
+    expect(wrapper.classes()).toContain("no-outline");
+    expect(wrapper.classes()).toContain("featured-card");
+    expect(wrapper.findAll(".card-row")).toHaveLength(4);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

package/app/components/01.atoms/card/tests/__snapshots__/CardCore.spec.ts.snap

@@ -0,0 +1,43 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CardCore > renders correct HTML structure (article, subtle, dividers) 1`] = `
+"<article class="card-core subtle has-dividers">
+  <div class="card-row card-row-header">
+    <h2>Title</h2>
+  </div>
+  <div class="card-row card-row-body">
+    <p>Content</p>
+  </div>
+</article>"
+`;
+
+exports[`CardCore > renders correct HTML structure (default) 1`] = `
+"<div class="card-core solid">
+  <div class="card-row card-row-header">
+    <h2>Title</h2>
+  </div>
+  <div class="card-row card-row-body">
+    <p>Content</p>
+  </div>
+  <div class="card-row card-row-footer">
+    <p>Footer</p>
+  </div>
+</div>"
+`;
+
+exports[`CardCore > renders correct HTML structure with styleClassPassthrough 1`] = `"<div class="card-core solid featured-card"></div>"`;
+
+exports[`CardCore > renders correctly with all props and slots combined 1`] = `
+"<article class="card-core soft featured-card has-dividers no-outline">
+  <div class="card-row card-row-header">
+    <h2>Title</h2>
+  </div>
+  <div class="card-row card-row-media"><img src="x.jpg" alt=""></div>
+  <div class="card-row card-row-body">
+    <p>Content</p>
+  </div>
+  <div class="card-row card-row-footer">
+    <p>Footer</p>
+  </div>
+</article>"
+`;

package/app/components/01.atoms/content-wrappers/content-columns-2/ContentColumns2.vue

@@ -0,0 +1,51 @@
+<template>
+  <component :is="tag" class="content-columns-2" :class="[elementClasses]" :data-testid="dataTestid">
+    <div class="inner">
+      <div v-if="hasSlot1" class="col-1">
+        <slot name="slot1"></slot>
+      </div>
+      <div v-if="hasSlot2" class="col-2">
+        <slot name="slot2"></slot>
+      </div>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "div" | "section" | "article" | "main";
+  dataTestid?: string;
+  styleClassPassthrough?: string | string[];
+}
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  dataTestid: "content-columns-2",
+  styleClassPassthrough: () => [],
+});
+
+const slots = useSlots();
+const hasSlot1 = computed(() => !!slots.slot1);
+const hasSlot2 = computed(() => !!slots.slot2);
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+@layer components {
+  .content-columns-2 {
+    container-type: inline-size;
+    container-name: contentColumns2;
+
+    .inner {
+      display: grid;
+      grid-auto-flow: row;
+      gap: 1.6rem;
+
+      @container contentColumns2 (width >= 768px) {
+        gap: 1.6rem;
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+  }
+}
+</style>

package/app/components/01.atoms/content-wrappers/content-columns-2/stories/ContentColumns2.stories.ts

@@ -0,0 +1,110 @@
+import ContentColumns2 from "../ContentColumns2.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+
+const meta: Meta<typeof ContentColumns2> = {
+  title: "Atoms/Content Wrappers/ContentColumns2",
+  component: ContentColumns2,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "section", "article", "main"],
+      description: "Semantic HTML tag for the root element",
+      table: { category: "Semantic" },
+    },
+    dataTestid: {
+      control: { type: "text" },
+      description: "Test ID for the root element",
+      table: { category: "Testing" },
+    },
+    styleClassPassthrough: {
+      table: { disable: true },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A responsive two-column layout using CSS Container Queries. Stacks to a single column below 768px container width, switching to equal-width columns above that threshold.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ContentColumns2>;
+
+const placeholder = (label: string, bg: string, color: string) =>
+  `<div style="padding: 2.4rem; background: ${bg}; border-radius: 0.8rem; color: ${color}; font-family: sans-serif;">
+    <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;">Placeholder content for this column slot.</p>
+  </div>`;
+
+export const Default: Story = {
+  args: {
+    tag: "div",
+    dataTestid: "content-columns-2",
+  },
+  render: (args) => ({
+    components: { ContentColumns2 },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ContentColumns2 v-bind="args">
+        <template #slot1>${placeholder("Column 1", "#dbeafe", "#1e40af")}</template>
+        <template #slot2>${placeholder("Column 2", "#dcfce7", "#166534")}</template>
+      </ContentColumns2>
+    `,
+  }),
+};
+
+export const SingleColumn: Story = {
+  args: {
+    tag: "div",
+    dataTestid: "content-columns-2",
+  },
+  render: (args) => ({
+    components: { ContentColumns2 },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ContentColumns2 v-bind="args">
+        <template #slot1>${placeholder("Column 1 only", "#fef3c7", "#92400e")}</template>
+      </ContentColumns2>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "When only one slot is provided, that column renders alone with no empty space reserved for the other.",
+      },
+    },
+  },
+};
+
+export const SemanticSection: Story = {
+  args: {
+    tag: "section",
+    dataTestid: "content-columns-2",
+  },
+  render: (args) => ({
+    components: { ContentColumns2 },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ContentColumns2 v-bind="args">
+        <template #slot1>${placeholder("Left", "#ede9fe", "#5b21b6")}</template>
+        <template #slot2>${placeholder("Right", "#fce7f3", "#9d174d")}</template>
+      </ContentColumns2>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "Rendered as a <code>&lt;section&gt;</code> for thematic content groupings.",
+      },
+    },
+  },
+};