srcdev-nuxt-components 9.1.55 → 9.1.57

package/app/components/02.molecules/alert-content/AlertContentInner.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="alert-content-inner">
+    <div class="alert-content-icon" data-test-id="alert-icon" aria-hidden="true">
+      <slot name="icon">
+        <Icon :name="customIcon || themeIcon" class="icon" />
+      </slot>
+    </div>
+
+    <div :id="contentId" class="alert-content-body" :aria-live="ariaLive">
+      <p v-if="slots.title" class="title" data-test-id="alert-title">
+        <slot name="title"></slot>
+      </p>
+      <p v-if="slots.content" class="content" data-test-id="alert-content">
+        <slot name="content"></slot>
+      </p>
+    </div>
+
+    <button
+      v-if="dismissible"
+      type="button"
+      class="alert-content-dismiss"
+      data-test-id="alert-dismiss"
+      @click.prevent="emit('dismiss')"
+    >
+      <slot name="dismissIcon">
+        <Icon :name="dismissIcon" class="icon" />
+      </slot>
+      <span class="sr-only">
+        <slot name="dismissLabel">Close</slot>
+      </span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SemanticTheme } from "~/types/components";
+
+interface Props {
+  theme: SemanticTheme;
+  customIcon?: string;
+  dismissible?: boolean;
+  contentId?: string;
+  ariaLive?: "polite" | "assertive" | "off";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  customIcon: undefined,
+  dismissible: false,
+  contentId: undefined,
+  ariaLive: undefined,
+});
+
+const emit = defineEmits<{ dismiss: [] }>();
+
+const slots = useSlots();
+
+const appConfig = useAppConfig();
+
+const fallbackIcons: Record<SemanticTheme, string> = {
+  info: "akar-icons:info",
+  success: "akar-icons:check",
+  warning: "akar-icons:circle-alert",
+  error: "akar-icons:circle-alert",
+};
+
+const themeIcon = computed(() => {
+  const icons = appConfig.srcdev?.alertContent?.icons as Partial<Record<SemanticTheme, string>> | undefined;
+  return icons?.[props.theme] ?? fallbackIcons[props.theme];
+});
+const dismissIcon = computed(() => appConfig.srcdev?.alertContent?.dismissIcon ?? "material-symbols:close");
+</script>
+
+<style lang="css">
+@layer components {
+  .alert-content-inner {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    gap: 1.2rem;
+    align-items: center;
+    background-color: var(--_alert-content-inner-bg, var(--theme-surface-subtle));
+    border-start-start-radius: 8px;
+    border-end-start-radius: 8px;
+    padding: 1.2rem 1.5rem;
+    overflow: hidden;
+
+    .alert-content-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      .icon {
+        color: var(--theme-text);
+        display: inline-block;
+        font-size: 2.5rem;
+        font-style: normal;
+        font-weight: normal;
+        overflow: hidden;
+      }
+    }
+
+    .alert-content-body {
+      display: flex;
+      flex-direction: column;
+      gap: 0.4rem;
+      color: var(--theme-text);
+
+      .title {
+        font-size: var(--step-4);
+        font-weight: 600;
+        line-height: 1.2;
+        margin: 0;
+      }
+
+      .content {
+        font-size: var(--step-3);
+        font-weight: normal;
+        line-height: 1.4;
+        margin: 0;
+        opacity: 0.9;
+      }
+    }
+
+    .alert-content-dismiss {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border: 0.1rem solid var(--theme-border);
+      outline: 0.1rem solid transparent;
+      border-radius: 50%;
+      color: var(--theme-text);
+      cursor: pointer;
+      flex-shrink: 0;
+      padding: 0.5rem;
+      transition: all 200ms ease;
+
+      .icon {
+        color: inherit;
+        display: block;
+        font-size: 1.5rem;
+      }
+
+      &:hover,
+      &:focus-visible {
+        background-color: var(--theme-surface-hover);
+        color: var(--theme-on-surface);
+        outline: 0.1rem solid var(--theme-ring);
+        outline-offset: 0.2rem;
+      }
+    }
+  }
+}
+</style>

package/app/components/02.molecules/alert-content/stories/AlertContent.stories.ts

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import AlertContent from "../AlertContent.vue";
+
+const meta: Meta<typeof AlertContent> = {
+  title: "Molecules/AlertContent",
+  component: AlertContent,
+  argTypes: {
+    theme: {
+      control: { type: "inline-radio" },
+      options: ["info", "success", "warning", "error"],
+      description: "Semantic theme — controls the accent colour and default icon",
+      table: { category: "Appearance" },
+    },
+    customIcon: {
+      control: "text",
+      description: "Iconify icon name to override the default theme icon",
+      table: { category: "Appearance" },
+    },
+    dismissible: {
+      control: "boolean",
+      description: "Show a close button (emits 'dismiss' on click)",
+      table: { category: "Behaviour" },
+    },
+    contentId: { table: { disable: true } },
+    ariaLive: { table: { disable: true } },
+  },
+  args: {
+    theme: "info",
+    dismissible: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AlertContent>;
+
+/** Default — info theme with title and body content. */
+export const Default: Story = {
+  render: (args) => ({
+    components: { AlertContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div :data-theme="args.theme" style="max-width: 600px; padding: 2rem;">
+        <AlertContent v-bind="args">
+          <template #title>Alert title</template>
+          <template #content>This is the alert body. It describes what happened and what the user should do next.</template>
+        </AlertContent>
+      </div>
+    `,
+  }),
+};
+
+/** Dismissible — renders the close button and demonstrates the dismiss emit. */
+export const Dismissible: Story = {
+  args: { theme: "info", dismissible: true },
+  render: (args) => ({
+    components: { AlertContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div :data-theme="args.theme" style="max-width: 600px; padding: 2rem;">
+        <AlertContent v-bind="args">
+          <template #title>Dismissible alert</template>
+          <template #content>Click the close button to emit the dismiss event.</template>
+        </AlertContent>
+      </div>
+    `,
+  }),
+};
+
+/** Title only — no body content slot. */
+export const TitleOnly: Story = {
+  name: "Title Only",
+  args: { theme: "success" },
+  render: (args) => ({
+    components: { AlertContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div :data-theme="args.theme" style="max-width: 600px; padding: 2rem;">
+        <AlertContent v-bind="args">
+          <template #title>Your changes have been saved.</template>
+        </AlertContent>
+      </div>
+    `,
+  }),
+};
+
+/** Custom icon — overrides the default theme icon via the customIcon prop. */
+export const CustomIcon: Story = {
+  name: "Custom Icon",
+  args: { theme: "info", customIcon: "akar-icons:star" },
+  render: (args) => ({
+    components: { AlertContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div :data-theme="args.theme" style="max-width: 600px; padding: 2rem;">
+        <AlertContent v-bind="args">
+          <template #title>Custom icon via prop</template>
+          <template #content>The icon is overridden using the customIcon prop.</template>
+        </AlertContent>
+      </div>
+    `,
+  }),
+};
+
+/** All themes — all four semantic variants stacked. */
+export const AllThemes: Story = {
+  name: "All Themes",
+  render: () => ({
+    components: { AlertContent },
+    setup() {
+      return { themes: ["info", "success", "warning", "error"] as const };
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1.6rem; max-width: 600px; padding: 2rem;">
+        <div v-for="theme in themes" :key="theme" :data-theme="theme">
+          <AlertContent :theme="theme" :dismissible="true">
+            <template #title>{{ theme.charAt(0).toUpperCase() + theme.slice(1) }}</template>
+            <template #content>This is the {{ theme }} variant of the AlertContent component.</template>
+          </AlertContent>
+        </div>
+      </div>
+    `,
+  }),
+};

package/app/components/02.molecules/alert-content/tests/AlertContent.spec.ts

@@ -0,0 +1,135 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import AlertContent from "../AlertContent.vue";
+
+describe("AlertContent", () => {
+  // ─── Mount ────────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(AlertContent, { props: { theme: "info" } });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Root element ─────────────────────────────────────────────────────────
+
+  it("renders the root element with class alert-content", async () => {
+    const wrapper = await mountSuspended(AlertContent, { props: { theme: "info" } });
+    expect(wrapper.find(".alert-content").exists()).toBe(true);
+  });
+
+  // ─── Icon ─────────────────────────────────────────────────────────────────
+
+  it("renders the icon region", async () => {
+    const wrapper = await mountSuspended(AlertContent, { props: { theme: "info" } });
+    expect(wrapper.find("[data-test-id='alert-icon']").exists()).toBe(true);
+  });
+
+  it("replaces the icon via the #icon slot", async () => {
+    const wrapper = await mountSuspended(AlertContent, {
+      props: { theme: "info" },
+      slots: { icon: '<span class="custom-icon">★</span>' },
+    });
+    expect(wrapper.find(".custom-icon").exists()).toBe(true);
+  });
+
+  // ─── Title slot ───────────────────────────────────────────────────────────
+
+  it("renders the title element when the #title slot is provided", async () => {
+    const wrapper = await mountSuspended(AlertContent, {
+      props: { theme: "info" },
+      slots: { title: "Important notice" },
+    });
+    expect(wrapper.find("[data-test-id='alert-title']").exists()).toBe(true);
+    expect(wrapper.find("[data-test-id='alert-title']").text()).toContain("Important notice");
+  });
+
+  it("does not render the title element when the #title slot is not provided", async () => {
+    const wrapper = await mountSuspended(AlertContent, { props: { theme: "info" } });
+    expect(wrapper.find("[data-test-id='alert-title']").exists()).toBe(false);
+  });
+
+  // ─── Content slot ─────────────────────────────────────────────────────────
+
+  it("renders the content element when the #content slot is provided", async () => {
+    const wrapper = await mountSuspended(AlertContent, {
+      props: { theme: "info" },
+      slots: { content: "More detail here." },
+    });
+    expect(wrapper.find("[data-test-id='alert-content']").exists()).toBe(true);
+    expect(wrapper.find("[data-test-id='alert-content']").text()).toContain("More detail here.");
+  });
+
+  it("does not render the content element when the #content slot is not provided", async () => {
+    const wrapper = await mountSuspended(AlertContent, { props: { theme: "info" } });
+    expect(wrapper.find("[data-test-id='alert-content']").exists()).toBe(false);
+  });
+
+  // ─── contentId ────────────────────────────────────────────────────────────
+
+  it("sets id on the body element when contentId is provided", async () => {
+    const wrapper = await mountSuspended(AlertContent, {
+      props: { theme: "info", contentId: "toast-message-abc" },
+    });
+    expect(wrapper.find(".alert-content-body").attributes("id")).toBe("toast-message-abc");
+  });
+
+  it("omits id on the body element when contentId is not provided", async () => {
+    const wrapper = await mountSuspended(AlertContent, { props: { theme: "info" } });
+    expect(wrapper.find(".alert-content-body").attributes("id")).toBeUndefined();
+  });
+
+  // ─── ariaLive ─────────────────────────────────────────────────────────────
+
+  it("sets aria-live on the body element when ariaLive is provided", async () => {
+    const wrapper = await mountSuspended(AlertContent, {
+      props: { theme: "info", ariaLive: "polite" },
+    });
+    expect(wrapper.find(".alert-content-body").attributes("aria-live")).toBe("polite");
+  });
+
+  it("omits aria-live when ariaLive is not provided", async () => {
+    const wrapper = await mountSuspended(AlertContent, { props: { theme: "info" } });
+    expect(wrapper.find(".alert-content-body").attributes("aria-live")).toBeUndefined();
+  });
+
+  // ─── Dismiss button ───────────────────────────────────────────────────────
+
+  it("does not render the dismiss button when dismissible is false", async () => {
+    const wrapper = await mountSuspended(AlertContent, { props: { theme: "info", dismissible: false } });
+    expect(wrapper.find("[data-test-id='alert-dismiss']").exists()).toBe(false);
+  });
+
+  it("renders the dismiss button when dismissible is true", async () => {
+    const wrapper = await mountSuspended(AlertContent, { props: { theme: "info", dismissible: true } });
+    expect(wrapper.find("[data-test-id='alert-dismiss']").exists()).toBe(true);
+  });
+
+  it("emits the dismiss event when the dismiss button is clicked", async () => {
+    const wrapper = await mountSuspended(AlertContent, { props: { theme: "info", dismissible: true } });
+    await wrapper.find("[data-test-id='alert-dismiss']").trigger("click");
+    expect(wrapper.emitted("dismiss")).toBeTruthy();
+  });
+
+  it("replaces the dismiss icon via the #dismissIcon slot", async () => {
+    const wrapper = await mountSuspended(AlertContent, {
+      props: { theme: "info", dismissible: true },
+      slots: { dismissIcon: '<span class="custom-close">×</span>' },
+    });
+    expect(wrapper.find(".custom-close").exists()).toBe(true);
+  });
+
+  it("replaces the dismiss sr-only label via the #dismissLabel slot", async () => {
+    const wrapper = await mountSuspended(AlertContent, {
+      props: { theme: "info", dismissible: true },
+      slots: { dismissLabel: "Close this prompt" },
+    });
+    expect(wrapper.find(".sr-only").text()).toBe("Close this prompt");
+  });
+
+  it("uses 'Close' as the default dismiss label", async () => {
+    const wrapper = await mountSuspended(AlertContent, {
+      props: { theme: "info", dismissible: true },
+    });
+    expect(wrapper.find(".sr-only").text()).toBe("Close");
+  });
+});

package/app/components/02.molecules/alert-content/tests/AlertContentInner.spec.ts

@@ -0,0 +1,135 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import AlertContentInner from "../AlertContentInner.vue";
+
+describe("AlertContentInner", () => {
+  // ─── Mount ────────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, { props: { theme: "info" } });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Root element ─────────────────────────────────────────────────────────
+
+  it("renders the root element with class alert-content-inner", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, { props: { theme: "info" } });
+    expect(wrapper.find(".alert-content-inner").exists()).toBe(true);
+  });
+
+  // ─── Icon ─────────────────────────────────────────────────────────────────
+
+  it("renders the icon region", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, { props: { theme: "info" } });
+    expect(wrapper.find("[data-test-id='alert-icon']").exists()).toBe(true);
+  });
+
+  it("replaces the icon via the #icon slot", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, {
+      props: { theme: "info" },
+      slots: { icon: '<span class="custom-icon">★</span>' },
+    });
+    expect(wrapper.find(".custom-icon").exists()).toBe(true);
+  });
+
+  // ─── Title slot ───────────────────────────────────────────────────────────
+
+  it("renders the title element when the #title slot is provided", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, {
+      props: { theme: "info" },
+      slots: { title: "Important notice" },
+    });
+    expect(wrapper.find("[data-test-id='alert-title']").exists()).toBe(true);
+    expect(wrapper.find("[data-test-id='alert-title']").text()).toContain("Important notice");
+  });
+
+  it("does not render the title element when the #title slot is not provided", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, { props: { theme: "info" } });
+    expect(wrapper.find("[data-test-id='alert-title']").exists()).toBe(false);
+  });
+
+  // ─── Content slot ─────────────────────────────────────────────────────────
+
+  it("renders the content element when the #content slot is provided", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, {
+      props: { theme: "info" },
+      slots: { content: "More detail here." },
+    });
+    expect(wrapper.find("[data-test-id='alert-content']").exists()).toBe(true);
+    expect(wrapper.find("[data-test-id='alert-content']").text()).toContain("More detail here.");
+  });
+
+  it("does not render the content element when the #content slot is not provided", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, { props: { theme: "info" } });
+    expect(wrapper.find("[data-test-id='alert-content']").exists()).toBe(false);
+  });
+
+  // ─── contentId ────────────────────────────────────────────────────────────
+
+  it("sets id on the body element when contentId is provided", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, {
+      props: { theme: "info", contentId: "toast-message-abc" },
+    });
+    expect(wrapper.find(".alert-content-body").attributes("id")).toBe("toast-message-abc");
+  });
+
+  it("omits id on the body element when contentId is not provided", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, { props: { theme: "info" } });
+    expect(wrapper.find(".alert-content-body").attributes("id")).toBeUndefined();
+  });
+
+  // ─── ariaLive ─────────────────────────────────────────────────────────────
+
+  it("sets aria-live on the body element when ariaLive is provided", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, {
+      props: { theme: "info", ariaLive: "polite" },
+    });
+    expect(wrapper.find(".alert-content-body").attributes("aria-live")).toBe("polite");
+  });
+
+  it("omits aria-live when ariaLive is not provided", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, { props: { theme: "info" } });
+    expect(wrapper.find(".alert-content-body").attributes("aria-live")).toBeUndefined();
+  });
+
+  // ─── Dismiss button ───────────────────────────────────────────────────────
+
+  it("does not render the dismiss button when dismissible is false", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, { props: { theme: "info", dismissible: false } });
+    expect(wrapper.find("[data-test-id='alert-dismiss']").exists()).toBe(false);
+  });
+
+  it("renders the dismiss button when dismissible is true", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, { props: { theme: "info", dismissible: true } });
+    expect(wrapper.find("[data-test-id='alert-dismiss']").exists()).toBe(true);
+  });
+
+  it("emits the dismiss event when the dismiss button is clicked", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, { props: { theme: "info", dismissible: true } });
+    await wrapper.find("[data-test-id='alert-dismiss']").trigger("click");
+    expect(wrapper.emitted("dismiss")).toBeTruthy();
+  });
+
+  it("replaces the dismiss icon via the #dismissIcon slot", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, {
+      props: { theme: "info", dismissible: true },
+      slots: { dismissIcon: '<span class="custom-close">×</span>' },
+    });
+    expect(wrapper.find(".custom-close").exists()).toBe(true);
+  });
+
+  it("replaces the dismiss sr-only label via the #dismissLabel slot", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, {
+      props: { theme: "info", dismissible: true },
+      slots: { dismissLabel: "Close this prompt" },
+    });
+    expect(wrapper.find(".sr-only").text()).toBe("Close this prompt");
+  });
+
+  it("uses 'Close' as the default dismiss label", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, {
+      props: { theme: "info", dismissible: true },
+    });
+    expect(wrapper.find(".sr-only").text()).toBe("Close");
+  });
+});

package/app/components/02.molecules/alert-masked-content/AlertMaskedContent.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="alert-masked-content" :data-theme="theme">
+    <AlertMaskCore :config="resolvedMaskConfig">
+      <AlertContentInner
+        :theme="theme"
+        :custom-icon="customIcon"
+        :dismissible="dismissible"
+        :content-id="contentId"
+        :aria-live="ariaLive"
+        @dismiss="emit('dismiss')"
+      >
+        <template v-if="slots.icon" #icon>
+          <slot name="icon"></slot>
+        </template>
+        <template v-if="slots.title" #title>
+          <slot name="title"></slot>
+        </template>
+        <template v-if="slots.content" #content>
+          <slot name="content"></slot>
+        </template>
+        <template v-if="slots.dismissIcon" #dismissIcon>
+          <slot name="dismissIcon"></slot>
+        </template>
+        <template v-if="slots.dismissLabel" #dismissLabel>
+          <slot name="dismissLabel"></slot>
+        </template>
+      </AlertContentInner>
+    </AlertMaskCore>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SemanticTheme, AlertMaskConfig } from "~/types/components";
+
+interface Props {
+  theme: SemanticTheme;
+  customIcon?: string;
+  dismissible?: boolean;
+  contentId?: string;
+  ariaLive?: "polite" | "assertive" | "off";
+  maskConfig?: AlertMaskConfig;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  customIcon: undefined,
+  dismissible: false,
+  contentId: undefined,
+  ariaLive: undefined,
+  maskConfig: undefined,
+});
+
+const emit = defineEmits<{ dismiss: [] }>();
+
+const slots = useSlots();
+
+// Shape matches AlertContent: 8px left radius, 4px right, 6px accent bar on left, 1px border elsewhere
+const resolvedMaskConfig = computed<AlertMaskConfig>(() => ({
+  borderColour: "var(--theme-accent)",
+  backgroundColour: "rgba(0, 0, 0, 0.3)",
+  radiusLeft: 8,
+  radiusRight: 4,
+  borderLeft: 6,
+  borderTop: 1,
+  borderRight: 1,
+  borderBottom: 1,
+  ...props.maskConfig,
+}));
+</script>
+
+<style lang="css">
+@layer components {
+  .alert-masked-content {
+    .alert-content-inner {
+      --_alert-content-inner-bg: transparent;
+    }
+  }
+}
+</style>