srcdev-nuxt-components 9.1.49 → 9.1.50

package/app/components/01.atoms/display-dialog/tests/DisplayDialog.spec.ts

@@ -0,0 +1,264 @@
+import { describe, it, expect, vi } from "vitest";
+import { nextTick } from "vue";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import DisplayDialog from "../DisplayDialog.vue";
+
+vi.mock("focus-trap-vue", () => ({
+  FocusTrap: {
+    name: "FocusTrap",
+    props: ["active", "escapeDeactivates", "clickOutsideDeactivates"],
+    emits: ["update:active", "deactivate"],
+    template: "<slot />",
+  },
+}));
+
+describe("DisplayDialog", () => {
+  // ─── Mount ────────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test" },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Snapshot ─────────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure with all slots", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test", modelValue: true },
+      slots: {
+        dialogTitle: "<p>Title</p>",
+        dialogContent: "<p>Content</p>",
+        actionButtonLeft: "<button>Cancel</button>",
+        actionButtonRight: "<button>Confirm</button>",
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Root element ─────────────────────────────────────────────────────────
+
+  it("renders as <dialog>", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test" },
+    });
+    expect(wrapper.element.tagName).toBe("DIALOG");
+  });
+
+  it("always has the display-dialog class", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test" },
+    });
+    expect(wrapper.classes()).toContain("display-dialog");
+  });
+
+  // ─── data-dialog-id ───────────────────────────────────────────────────────
+
+  it("sets data-dialog-id attribute from prop", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "my-dialog" },
+    });
+    expect(wrapper.attributes("data-dialog-id")).toBe("my-dialog");
+  });
+
+  // ─── open attribute ───────────────────────────────────────────────────────
+
+  it("sets [open] attribute when modelValue is true", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test", modelValue: true },
+    });
+    expect(wrapper.attributes("open")).toBeDefined();
+  });
+
+  it("omits [open] attribute when modelValue is false", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test", modelValue: false },
+    });
+    expect(wrapper.attributes("open")).toBeUndefined();
+  });
+
+  // ─── role ─────────────────────────────────────────────────────────────────
+
+  it("has role='dialog' by default", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test" },
+    });
+    expect(wrapper.attributes("role")).toBe("dialog");
+  });
+
+  it.each(["dialog", "modal", "confirm", "fullscreen"] as const)(
+    "has role='dialog' for variant='%s'",
+    async (variant) => {
+      const wrapper = await mountSuspended(DisplayDialog, {
+        props: { dataDialogId: "test", variant },
+      });
+      expect(wrapper.attributes("role")).toBe("dialog");
+    }
+  );
+
+  it("has role='alertdialog' for variant='alert'", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test", variant: "alert" },
+    });
+    expect(wrapper.attributes("role")).toBe("alertdialog");
+  });
+
+  // ─── Variant class on .inner ──────────────────────────────────────────────
+
+  it("applies 'dialog' class to .inner by default", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test" },
+    });
+    expect(wrapper.find(".inner").classes()).toContain("dialog");
+  });
+
+  it.each(["dialog", "modal", "confirm", "alert", "fullscreen"] as const)(
+    "applies '%s' class to .inner",
+    async (variant) => {
+      const wrapper = await mountSuspended(DisplayDialog, {
+        props: { dataDialogId: "test", variant },
+      });
+      expect(wrapper.find(".inner").classes()).toContain(variant);
+    }
+  );
+
+  // ─── Slots ────────────────────────────────────────────────────────────────
+
+  it("renders dialogTitle slot in .col-left", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test" },
+      slots: { dialogTitle: "<p>My Title</p>" },
+    });
+    expect(wrapper.find(".col-left").text()).toBe("My Title");
+  });
+
+  it("omits .col-left when dialogTitle slot is not provided", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test" },
+    });
+    expect(wrapper.find(".col-left").exists()).toBe(false);
+  });
+
+  it("renders dialogContent slot in .dialog-content", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test" },
+      slots: { dialogContent: "<p>Content</p>" },
+    });
+    expect(wrapper.find(".dialog-content").text()).toBe("Content");
+  });
+
+  it("omits .dialog-content when dialogContent slot is not provided", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test" },
+    });
+    expect(wrapper.find(".dialog-content").exists()).toBe(false);
+  });
+
+  it("renders .footer when actionButtonLeft slot is provided", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test" },
+      slots: { actionButtonLeft: "<button>Cancel</button>" },
+    });
+    expect(wrapper.find(".footer").exists()).toBe(true);
+  });
+
+  it("renders .footer when actionButtonRight slot is provided", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test" },
+      slots: { actionButtonRight: "<button>Confirm</button>" },
+    });
+    expect(wrapper.find(".footer").exists()).toBe(true);
+  });
+
+  it("omits .footer when neither action button slot is provided", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test" },
+    });
+    expect(wrapper.find(".footer").exists()).toBe(false);
+  });
+
+  it("renders both action button slots inside .footer", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test" },
+      slots: {
+        actionButtonLeft: "<button>Cancel</button>",
+        actionButtonRight: "<button>Confirm</button>",
+      },
+    });
+    expect(wrapper.find(".footer").text()).toContain("Cancel");
+    expect(wrapper.find(".footer").text()).toContain("Confirm");
+  });
+
+  // ─── allowContentScroll ───────────────────────────────────────────────────
+
+  it("does not apply allow-content-scroll class by default", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test" },
+      slots: { dialogContent: "<p>Content</p>" },
+    });
+    expect(wrapper.find(".dialog-content").classes()).not.toContain("allow-content-scroll");
+  });
+
+  it("applies allow-content-scroll class when allowContentScroll=true", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test", allowContentScroll: true },
+      slots: { dialogContent: "<p>Content</p>" },
+    });
+    expect(wrapper.find(".dialog-content").classes()).toContain("allow-content-scroll");
+  });
+
+  // ─── Close button ─────────────────────────────────────────────────────────
+
+  it("close button emits update:modelValue=false", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test", modelValue: true },
+    });
+    await wrapper.find('[data-test-id="display-dialog-header-close"]').trigger("click");
+    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([false]);
+  });
+
+  // ─── styleClassPassthrough ────────────────────────────────────────────────
+
+  it("applies a styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test", styleClassPassthrough: "my-class" },
+    });
+    expect(wrapper.classes()).toContain("my-class");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test", styleClassPassthrough: ["class-a", "class-b"] },
+    });
+    expect(wrapper.classes()).toContain("class-a");
+    expect(wrapper.classes()).toContain("class-b");
+  });
+
+  // ─── Body viewport lock ───────────────────────────────────────────────────
+
+  it("adds lock class to body on mount when lockViewport=true", async () => {
+    await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test", lockViewport: true },
+    });
+    expect(document.body.classList.contains("lock")).toBe(true);
+    document.body.classList.remove("lock");
+  });
+
+  it("does not add lock class to body when lockViewport=false", async () => {
+    await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test", lockViewport: false },
+    });
+    expect(document.body.classList.contains("lock")).toBe(false);
+  });
+
+  it("removes lock class from body when close button is clicked", async () => {
+    document.body.classList.add("lock");
+    const wrapper = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "test", modelValue: true, lockViewport: true },
+    });
+    await wrapper.find('[data-test-id="display-dialog-header-close"]').trigger("click");
+    await nextTick();
+    expect(document.body.classList.contains("lock")).toBe(false);
+  });
+});

package/app/components/01.atoms/display-dialog/tests/__snapshots__/DisplayDialog.spec.ts.snap

@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DisplayDialog > renders correct HTML structure with all slots 1`] = `
+"<dialog class="display-dialog" role="dialog" align-dialog="center" justify-dialog="center" open="" data-dialog-id="test">
+  <div class="inner dialog">
+    <div class="header">
+      <div class="col-left">
+        <p>Title</p>
+      </div>
+      <div class="col-right"><button data-test-id="display-dialog-header-close" class="display-prompt-action"><span class="iconify i-bitcoin-icons:cross-filled icon" aria-hidden="true"></span><span class="sr-only">Close</span></button></div>
+    </div>
+    <div class="dialog-content">
+      <p>Content</p>
+    </div>
+    <div class="footer"><button>Cancel</button><button>Confirm</button></div>
+  </div>
+</dialog>"
+`;

package/app/components/01.atoms/page-row/CONSUMER-STYLING.md

@@ -0,0 +1,90 @@
+# PageRow — Consumer Styling Guide
+
+## Public token API
+
+All `--page-row-*` tokens are the stable override surface. Set them at any scope (global, page,
+or instance) without touching the component itself.
+
+| Token | Default | Controls |
+|---|---|---|
+| `--page-row-minimum-content-padding` | `1rem` | Minimum gutter on each side at narrow viewports |
+| `--page-row-popout-max-width` | `1400px` | Maximum width of the `popout` column track |
+| `--page-row-content-max-width` | `1064px` | Maximum width of the `content` column track |
+| `--page-row-inset-content-max-width` | `840px` | Maximum width of the `inset-content` column track |
+
+---
+
+## Global theming — app-level CSS file
+
+Create `assets/styles/setup/07.components/page-row.css` in the consuming app and set tokens on
+`:root`. These values apply to every `PageRow` instance across the site.
+
+```css
+/* assets/styles/setup/07.components/page-row.css */
+:root {
+  --page-row-minimum-content-padding: 1.6rem;
+  --page-row-popout-max-width: 1280px;
+  --page-row-content-max-width: 960px;
+  --page-row-inset-content-max-width: 720px;
+}
+```
+
+---
+
+## Page-scoped overrides
+
+Override track widths for a specific page by scoping tokens under the page wrapper. No `:deep()`
+is required (component styles are unscoped).
+
+```css
+/* In the consuming page's unscoped <style> block */
+.landing-page {
+  .page-row {
+    --page-row-content-max-width: 800px;
+    --page-row-minimum-content-padding: 2.4rem;
+  }
+}
+```
+
+---
+
+## Per-instance overrides via inline style
+
+```vue
+<PageRow
+  variant="content"
+  style="--page-row-content-max-width: 720px;"
+>
+  ...
+</PageRow>
+```
+
+---
+
+## Per-instance overrides via styleClassPassthrough
+
+```vue
+<PageRow variant="content" :style-class-passthrough="['narrow']">
+  ...
+</PageRow>
+```
+
+```css
+.page-row {
+  &.narrow {
+    --page-row-content-max-width: 720px;
+    --page-row-minimum-content-padding: 2rem;
+  }
+}
+```
+
+---
+
+## Notes
+
+- Track widths are derived from the four tokens using `calc()` — changing one token shifts all
+  related tracks proportionally.
+- `--page-row-minimum-content-padding` controls how close content gets to the viewport edge on
+  narrow screens; it also sets the outer `full` gutter minimum.
+- The component applies no padding, margin, or background — those are always set by the consuming
+  app on the PageRow element or its children.

package/app/components/01.atoms/page-row/PageRow.vue

@@ -0,0 +1,115 @@
+<template>
+  <component
+    :is="tag"
+    :id
+    class="page-row"
+    :class="[elementClasses, variant]"
+    :data-align="align || undefined"
+    :aria-labelledby="ariaLabelledby"
+  >
+    <slot :heading-id="headingId"></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "div" | "section" | "article" | "header" | "footer" | "main" | "nav";
+  variant?: "full" | "popout" | "content" | "inset-content";
+  align?: "start" | "end";
+  id?: string | null;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  variant: "content",
+  align: undefined,
+  id: null,
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { headingId, ariaLabelledby } = useAriaLabelledById(props.tag);
+</script>
+
+<style lang="css">
+@layer components {
+  /*
+   * Page layout grid — https://layout-breakouts-builder.vercel.app
+   * Each .page-row is both a CSS grid container and a grid item when nested.
+   * Direct children default to the content column; nest a .page-row.{variant}
+   * to break out to a wider or narrower track.
+   */
+  .page-row {
+    --_minimum-content-padding: var(--page-row-minimum-content-padding, 1rem);
+    --_popout-max-width: var(--page-row-popout-max-width, 1400px);
+    --_content-max-width: var(--page-row-content-max-width, 1064px);
+    --_inset-content-max-width: var(--page-row-inset-content-max-width, 840px);
+
+    --full: minmax(var(--_minimum-content-padding), 1fr);
+    --popout: minmax(0, calc((var(--_popout-max-width) - var(--_content-max-width)) * 0.5));
+    --content: minmax(0, calc((var(--_content-max-width) - var(--_inset-content-max-width)) * 0.5));
+    --inset-content: min(var(--_inset-content-max-width), 100% - var(--_minimum-content-padding) * 2);
+
+    display: grid;
+    grid-template-columns:
+      [full-start]
+      var(--full)
+      [popout-start]
+      var(--popout)
+      [content-start]
+      var(--content)
+      [inset-content-start]
+      var(--inset-content)
+      [inset-content-end]
+      var(--content)
+      [content-end]
+      var(--popout)
+      [popout-end]
+      var(--full)
+      [full-end];
+
+    container-type: inline-size;
+  }
+
+  /* All direct children default to the content column */
+  .page-row > * {
+    grid-column: content;
+  }
+
+  /*
+   * Variant propagation: a page-row's variant also sets the default column
+   * for its direct non-PageRow children. This allows variant="full" to make
+   * its own children span full width, not just control placement when nested.
+   * Specificity (0,2,0) — nested .page-row variant overrides below win at (0,3,0).
+   */
+  .page-row.full > *         { grid-column: full; }
+  .page-row.popout > *       { grid-column: popout; }
+  .page-row.inset-content > * { grid-column: inset-content; }
+
+  /* Nested page-rows: symmetric placement by variant class */
+  .page-row > .page-row {
+    &.full         { grid-column: full; }
+    &.popout       { grid-column: popout; }
+    &.content      { grid-column: content; }
+    &.inset-content { grid-column: inset-content; }
+  }
+
+  /*
+   * align="start": bleeds to the left (full-start) edge, stops at the variant's end line.
+   * align="end":   starts at the variant's start line, bleeds to the right (full-end) edge.
+   * Specificity (0,4,0) beats the symmetric rules above at (0,3,0).
+   */
+  .page-row > .page-row[data-align="start"] {
+    &.popout        { grid-column: full-start / popout-end; }
+    &.content       { grid-column: full-start / content-end; }
+    &.inset-content { grid-column: full-start / inset-content-end; }
+  }
+
+  .page-row > .page-row[data-align="end"] {
+    &.popout        { grid-column: popout-start / full-end; }
+    &.content       { grid-column: content-start / full-end; }
+    &.inset-content { grid-column: inset-content-start / full-end; }
+  }
+}
+</style>