srcdev-nuxt-components 9.1.55 → 9.1.56

package/app/components/01.atoms/display-dialog/DisplayDialog.vue

@@ -2,9 +2,11 @@
   <dialog
     class="display-dialog"
     :class="[elementClasses]"
-    :role="isAlert ? 'alertdialog' : 'dialog'"
-    :align-dialog
-    :justify-dialog
+    :role="isAlert ? 'alertdialog' : undefined"
+    :aria-modal="true"
+    :aria-labelledby="hasTitle ? dialogTitleId : undefined"
+    :align-dialog="resolved.alignDialog"
+    :justify-dialog="resolved.justifyDialog"
     :open
     :data-dialog-id="dataDialogId"
   >
@@ -14,19 +16,19 @@
       :click-outside-deactivates="!isAlert"
       @deactivate="closeDialog()"
     >
-      <div class="inner" :class="[variant]">
-        <div class="header">
-          <div v-if="hasTitle" class="col-left">
+      <div class="inner" :class="[resolved.variant]">
+        <div class="header" :data-theme="resolved.theme">
+          <div v-if="hasTitle" :id="dialogTitleId" class="col-left">
             <slot name="dialogTitle"></slot>
           </div>
 
           <div class="col-right">
             <button
               data-test-id="display-dialog-header-close"
-              class="display-prompt-action"
+              class="display-dialog-close"
               @click.prevent="closeDialog()"
             >
-              <Icon name="bitcoin-icons:cross-filled" class="icon" />
+              <Icon :name="resolved.closeIcon" class="icon" />
               <span class="sr-only">Close</span>
             </button>
           </div>
@@ -34,7 +36,8 @@
         <div
           v-if="hasContent"
           class="dialog-content"
-          :class="[{ 'allow-content-scroll': allowContentScroll }]"
+          :class="[{ 'allow-content-scroll': resolved.allowContentScroll }]"
+          :tabindex="resolved.allowContentScroll ? 0 : undefined"
         >
           <slot name="dialogContent"></slot>
         </div>
@@ -49,6 +52,8 @@
 
 <script setup lang="ts">
 import { FocusTrap } from "focus-trap-vue";
+import type { SemanticTheme } from "~/types/components";
+
 interface Props {
   styleClassPassthrough?: string | string[];
   variant?: "dialog" | "modal" | "confirm" | "alert" | "fullscreen";
@@ -57,28 +62,45 @@ interface Props {
   lockViewport?: boolean;
   allowContentScroll?: boolean;
   dataDialogId: string;
+  theme?: SemanticTheme;
+  closeIcon?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
-  variant: "dialog",
-  justifyDialog: "center",
-  alignDialog: "center",
-  lockViewport: true,
-  allowContentScroll: false,
+  variant: undefined,
+  justifyDialog: undefined,
+  alignDialog: undefined,
+  lockViewport: undefined,
+  allowContentScroll: undefined,
+  theme: undefined,
+  closeIcon: undefined,
+});
+
+const appConfig = useAppConfig();
+
+const resolved = computed(() => {
+  const config = appConfig.srcdev?.displayDialog;
+  return {
+    variant: props.variant ?? config?.variant ?? "dialog",
+    justifyDialog: props.justifyDialog ?? config?.justifyDialog ?? "center",
+    alignDialog: props.alignDialog ?? config?.alignDialog ?? "center",
+    lockViewport: props.lockViewport ?? config?.lockViewport ?? true,
+    allowContentScroll: props.allowContentScroll ?? config?.allowContentScroll ?? false,
+    theme: props.theme ?? config?.theme,
+    closeIcon: props.closeIcon ?? config?.closeIcon ?? "bitcoin-icons:cross-filled",
+  } as const;
 });
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
-const isAlert = computed(() => props.variant === "alert");
+const isAlert = computed(() => resolved.value.variant === "alert");
+const dialogTitleId = useId();
 
 const open = defineModel<boolean>();
 
 const closeDialog = () => {
   open.value = false;
-  if (props.lockViewport) {
-    document.body.classList.remove("lock");
-  }
 };
 
 const slots = useSlots();
@@ -86,9 +108,20 @@ const hasTitle = computed(() => !!slots.dialogTitle);
 const hasContent = computed(() => !!slots.dialogContent);
 const hasFooter = computed(() => !!(slots.actionButtonLeft || slots.actionButtonRight));
 
+const { lock, unlock } = useBodyLock();
+let hasLocked = false;
+
 onMounted(() => {
-  if (props.lockViewport) {
-    document.body.classList.add("lock");
+  if (resolved.value.lockViewport) {
+    lock();
+    hasLocked = true;
+  }
+});
+
+onUnmounted(() => {
+  if (hasLocked) {
+    unlock();
+    hasLocked = false;
   }
 });
 </script>
@@ -112,9 +145,18 @@ onMounted(() => {
     --_header-button-border: var(--display-dialog-header-button-border, 0.1rem solid transparent);
     --_header-button-border-radius: var(--display-dialog-header-button-border-radius, 0.4rem);
     --_header-button-outline: var(--display-dialog-header-button-outline, 0.1rem solid transparent);
-    --_header-button-border-hover: var(--display-dialog-header-button-border-hover, 0.1rem solid light-dark(var(--slate-08), var(--slate-04)));
-    --_header-button-outline-hover: var(--display-dialog-header-button-outline-hover, 0.1rem solid light-dark(var(--slate-08), var(--slate-04)));
-    --_header-button-icon-color: var(--display-dialog-header-button-icon-color, light-dark(var(--slate-09), var(--slate-02)));
+    --_header-button-border-hover: var(
+      --display-dialog-header-button-border-hover,
+      0.1rem solid light-dark(var(--slate-08), var(--slate-04))
+    );
+    --_header-button-outline-hover: var(
+      --display-dialog-header-button-outline-hover,
+      0.1rem solid light-dark(var(--slate-08), var(--slate-04))
+    );
+    --_header-button-icon-color: var(
+      --display-dialog-header-button-icon-color,
+      light-dark(var(--slate-09), var(--slate-02))
+    );
     --_header-button-icon-size: var(--display-dialog-header-button-icon-size, 2.4rem);
 
     --_content-padding: var(--display-dialog-content-padding, 1.2rem);
@@ -215,6 +257,14 @@ onMounted(() => {
         align-items: center;
         padding: var(--_header-padding);
 
+        &[data-theme] {
+          border-block-end: 0.2rem solid var(--theme-accent);
+
+          .display-dialog-close .icon {
+            color: var(--theme-accent);
+          }
+        }
+
         .col-left {
           flex: 1;
         }
@@ -222,7 +272,7 @@ onMounted(() => {
         .col-right {
           margin-inline-start: auto;
 
-          .display-prompt-action {
+          .display-dialog-close {
             background-color: transparent;
             display: block flex;
             align-items: center;

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

@@ -1,7 +1,14 @@
-import { describe, it, expect, vi } from "vitest";
-import { nextTick } from "vue";
-import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
 import DisplayDialog from "../DisplayDialog.vue";
+import type { SemanticTheme } from "~/types/components";
+
+const { useAppConfigMock } = vi.hoisted(() => ({
+  // icon: {} is required — @nuxt/icon reads useAppConfig().icon.collections internally.
+  useAppConfigMock: vi.fn(() => ({ srcdev: undefined as Record<string, unknown> | undefined, icon: {} as object })),
+}));
+
+mockNuxtImport("useAppConfig", () => useAppConfigMock);
 
 vi.mock("focus-trap-vue", () => ({
   FocusTrap: {
@@ -13,6 +20,11 @@ vi.mock("focus-trap-vue", () => ({
 }));
 
 describe("DisplayDialog", () => {
+  afterEach(() => {
+    document.body.classList.remove("lock");
+    delete document.body.dataset.lockCount;
+  });
+
   // ─── Mount ────────────────────────────────────────────────────────────────
 
   it("mounts without error", async () => {
@@ -80,20 +92,20 @@ describe("DisplayDialog", () => {
 
   // ─── role ─────────────────────────────────────────────────────────────────
 
-  it("has role='dialog' by default", async () => {
+  it("has no explicit role by default — implicit from <dialog> element", async () => {
     const wrapper = await mountSuspended(DisplayDialog, {
       props: { dataDialogId: "test" },
     });
-    expect(wrapper.attributes("role")).toBe("dialog");
+    expect(wrapper.attributes("role")).toBeUndefined();
   });
 
   it.each(["dialog", "modal", "confirm", "fullscreen"] as const)(
-    "has role='dialog' for variant='%s'",
+    "has no explicit role for variant='%s' — implicit from <dialog> element",
     async (variant) => {
       const wrapper = await mountSuspended(DisplayDialog, {
         props: { dataDialogId: "test", variant },
       });
-      expect(wrapper.attributes("role")).toBe("dialog");
+      expect(wrapper.attributes("role")).toBeUndefined();
     }
   );
 
@@ -238,11 +250,11 @@ describe("DisplayDialog", () => {
   // ─── Body viewport lock ───────────────────────────────────────────────────
 
   it("adds lock class to body on mount when lockViewport=true", async () => {
-    await mountSuspended(DisplayDialog, {
+    const wrapper = await mountSuspended(DisplayDialog, {
       props: { dataDialogId: "test", lockViewport: true },
     });
     expect(document.body.classList.contains("lock")).toBe(true);
-    document.body.classList.remove("lock");
+    wrapper.unmount();
   });
 
   it("does not add lock class to body when lockViewport=false", async () => {
@@ -252,13 +264,135 @@ describe("DisplayDialog", () => {
     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");
+  it("removes lock class from body on unmount when lockViewport=true", async () => {
     const wrapper = await mountSuspended(DisplayDialog, {
-      props: { dataDialogId: "test", modelValue: true, lockViewport: true },
+      props: { dataDialogId: "test", lockViewport: true },
     });
-    await wrapper.find('[data-test-id="display-dialog-header-close"]').trigger("click");
-    await nextTick();
+    expect(document.body.classList.contains("lock")).toBe(true);
+    wrapper.unmount();
     expect(document.body.classList.contains("lock")).toBe(false);
   });
+
+  it("does not remove lock when a second locking dialog is still open", async () => {
+    const wrapper1 = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "a", lockViewport: true },
+    });
+    const wrapper2 = await mountSuspended(DisplayDialog, {
+      props: { dataDialogId: "b", lockViewport: true },
+    });
+    expect(document.body.classList.contains("lock")).toBe(true);
+    wrapper2.unmount();
+    expect(document.body.classList.contains("lock")).toBe(true);
+    wrapper1.unmount();
+    expect(document.body.classList.contains("lock")).toBe(false);
+  });
+
+  // ─── app.config resolution ────────────────────────────────────────────────
+  // Icon renders as <span class="iconify undefined{name} icon"> in jsdom.
+  // All assertions are DOM-based — setupState is private API in <script setup>.
+
+  describe("app.config resolution", () => {
+    beforeEach(() => {
+      useAppConfigMock.mockReturnValue({ srcdev: undefined, icon: {} });
+    });
+
+    afterEach(() => {
+      document.body.classList.remove("lock");
+      delete document.body.dataset.lockCount;
+    });
+
+    const iconName = (wrapper: Awaited<ReturnType<typeof mountSuspended>>) =>
+      wrapper
+        .find('[data-test-id="display-dialog-header-close"] .iconify')
+        .classes()
+        .find((c: string) => c !== "iconify" && c !== "icon") ?? "";
+
+    it("uses hardcoded fallbacks when app.config has no displayDialog key", async () => {
+      const wrapper = await mountSuspended(DisplayDialog, {
+        props: { dataDialogId: "test" },
+        slots: { dialogContent: "<p>Content</p>" },
+      });
+      expect(wrapper.find(".inner").classes()).toContain("dialog");
+      expect(wrapper.attributes("align-dialog")).toBe("center");
+      expect(wrapper.attributes("justify-dialog")).toBe("center");
+      expect(document.body.classList.contains("lock")).toBe(true);
+      expect(wrapper.find(".dialog-content").classes()).not.toContain("allow-content-scroll");
+      expect(wrapper.find(".header").attributes("data-theme")).toBeUndefined();
+      expect(iconName(wrapper)).toContain("bitcoin-icons:cross-filled");
+    });
+
+    it("uses app.config values when no props are supplied", async () => {
+      useAppConfigMock.mockReturnValue({
+        icon: {},
+        srcdev: {
+          displayDialog: {
+            variant: "modal",
+            justifyDialog: "start",
+            alignDialog: "end",
+            lockViewport: false,
+            allowContentScroll: true,
+            theme: "info" as SemanticTheme,
+            closeIcon: "heroicons:x-mark",
+          },
+        },
+      });
+      const wrapper = await mountSuspended(DisplayDialog, {
+        props: { dataDialogId: "test" },
+        slots: { dialogContent: "<p>Content</p>" },
+      });
+      expect(wrapper.find(".inner").classes()).toContain("modal");
+      expect(wrapper.attributes("align-dialog")).toBe("end");
+      expect(wrapper.attributes("justify-dialog")).toBe("start");
+      expect(document.body.classList.contains("lock")).toBe(false);
+      expect(wrapper.find(".dialog-content").classes()).toContain("allow-content-scroll");
+      expect(wrapper.find(".header").attributes("data-theme")).toBe("info");
+      expect(iconName(wrapper)).toContain("heroicons:x-mark");
+    });
+
+    it("explicit props take precedence over app.config", async () => {
+      useAppConfigMock.mockReturnValue({
+        icon: {},
+        srcdev: {
+          displayDialog: {
+            variant: "modal",
+            justifyDialog: "start",
+            alignDialog: "end",
+            lockViewport: false,
+            allowContentScroll: true,
+            theme: "info" as SemanticTheme,
+            closeIcon: "heroicons:x-mark",
+          },
+        },
+      });
+      const wrapper = await mountSuspended(DisplayDialog, {
+        props: {
+          dataDialogId: "test",
+          variant: "fullscreen",
+          justifyDialog: "end",
+          alignDialog: "start",
+          lockViewport: true,
+          allowContentScroll: false,
+          theme: "error" as SemanticTheme,
+          closeIcon: "material-symbols:close",
+        },
+        slots: { dialogContent: "<p>Content</p>" },
+      });
+      expect(wrapper.find(".inner").classes()).toContain("fullscreen");
+      expect(wrapper.attributes("align-dialog")).toBe("start");
+      expect(wrapper.attributes("justify-dialog")).toBe("end");
+      expect(document.body.classList.contains("lock")).toBe(true);
+      expect(wrapper.find(".dialog-content").classes()).not.toContain("allow-content-scroll");
+      expect(wrapper.find(".header").attributes("data-theme")).toBe("error");
+      expect(iconName(wrapper)).toContain("material-symbols:close");
+    });
+
+    it("lockViewport:false in app.config skips body lock on mount", async () => {
+      useAppConfigMock.mockReturnValue({
+        icon: {},
+        srcdev: { displayDialog: { lockViewport: false } },
+      });
+      await mountSuspended(DisplayDialog, { props: { dataDialogId: "test" } });
+      expect(document.body.classList.contains("lock")).toBe(false);
+    });
+  });
 });

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

@@ -1,13 +1,13 @@
 // 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">
+"<dialog class="display-dialog" aria-modal="true" aria-labelledby="v-0-0" align-dialog="center" justify-dialog="center" open="" data-dialog-id="test">
   <div class="inner dialog">
     <div class="header">
-      <div class="col-left">
+      <div id="v-0-0" 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 class="col-right"><button data-test-id="display-dialog-header-close" class="display-dialog-close"><span class="iconify undefinedbitcoin-icons:cross-filled icon"></span><span class="sr-only">Close</span></button></div>
     </div>
     <div class="dialog-content">
       <p>Content</p>

package/app/components/01.atoms/prompt/DisplayPrompt.vue

@@ -0,0 +1,113 @@
+<template>
+  <div
+    ref="promptElementRef"
+    class="display-prompt-core"
+    :class="[{ closed: !componentOpen }]"
+    :data-test-id="`display-prompt-core-${resolved.theme}`"
+    tabindex="0"
+  >
+    <div class="display-prompt-wrapper" :data-theme="resolved.theme" :class="[elementClasses]" data-test-id="display-prompt">
+      <component
+        :is="contentComponent"
+        :theme="resolved.theme"
+        :dismissible="resolved.dismissible"
+        :aria-live="resolved.useAutoFocus ? 'polite' : undefined"
+        @dismiss="updateComponentState()"
+      >
+        <template v-if="slots.customDecoratorIcon" #icon>
+          <slot name="customDecoratorIcon"></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.customCloseIcon" #dismissIcon>
+          <slot name="customCloseIcon"></slot>
+        </template>
+        <template #dismissLabel>
+          <slot name="customTitle">Close this prompt</slot>
+        </template>
+      </component>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AlertContent from "~/components/02.molecules/alert-content/AlertContent.vue";
+import AlertMaskedContent from "~/components/02.molecules/alert-masked-content/AlertMaskedContent.vue";
+import type { DisplayPromptTheme } from "~/types/components";
+
+interface Props {
+  theme?: DisplayPromptTheme;
+  dismissible?: boolean;
+  useAutoFocus?: boolean;
+  masked?: boolean;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  styleClassPassthrough: () => [],
+  theme: undefined,
+  dismissible: undefined,
+  useAutoFocus: undefined,
+  masked: undefined,
+});
+
+const appConfig = useAppConfig();
+
+const resolved = computed(() => {
+  const config = appConfig.srcdev?.displayPrompt;
+  return {
+    theme: props.theme ?? config?.theme ?? "info",
+    dismissible: props.dismissible ?? config?.dismissible ?? false,
+    useAutoFocus: props.useAutoFocus ?? config?.useAutoFocus ?? false,
+    masked: props.masked ?? config?.masked ?? false,
+  } as const;
+});
+
+const contentComponent = computed(() => (resolved.value.masked ? AlertMaskedContent : AlertContent));
+
+const slots = useSlots();
+const promptElementRef = useTemplateRef<HTMLElement>("promptElementRef");
+const parentComponentState = defineModel<boolean>({ default: false });
+const componentOpen = ref(true);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const updateComponentState = () => {
+  if (parentComponentState.value) {
+    parentComponentState.value = false;
+    return;
+  }
+
+  componentOpen.value = false;
+};
+
+onMounted(async () => {
+  if (resolved.value.useAutoFocus && promptElementRef.value) {
+    promptElementRef.value.focus();
+  }
+});
+</script>
+
+<style lang="css">
+@layer components {
+  .display-prompt-core {
+    display: grid;
+    grid-template-rows: 1fr;
+    opacity: 1;
+    transition: all 200ms ease-in-out;
+
+    &.closed {
+      grid-template-rows: 0fr;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .display-prompt-wrapper {
+      overflow: hidden;
+    }
+  }
+}
+</style>

package/app/components/01.atoms/prompt/stories/DisplayPrompt.stories.ts

@@ -0,0 +1,112 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { ref } from "vue";
+import StorybookComponent from "../DisplayPrompt.vue";
+
+export default {
+  title: "Atoms/DisplayPrompt",
+  component: StorybookComponent,
+  argTypes: {
+    theme: {
+      control: { type: "inline-radio" },
+      options: ["info", "success", "warning", "error"],
+      description: "Semantic theme for the prompt",
+      table: { category: "Appearance" },
+    },
+    dismissible: {
+      control: { type: "boolean" },
+      description: "Show a close button to dismiss the prompt",
+      table: { category: "Behaviour" },
+    },
+    useAutoFocus: {
+      control: { type: "boolean" },
+      description: "Focuses the prompt element on mount",
+      table: { category: "Behaviour" },
+    },
+    styleClassPassthrough: {
+      control: { type: "object" },
+      description: "Extra classes applied to the prompt wrapper",
+      table: { category: "Styling" },
+    },
+    modelValue: { table: { disable: true } },
+  },
+  args: {
+    theme: "info",
+    dismissible: false,
+    useAutoFocus: false,
+    styleClassPassthrough: [],
+  },
+} as Meta<typeof StorybookComponent>;
+
+const Template: StoryFn<typeof StorybookComponent> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const model = ref(false);
+    return { args, model };
+  },
+  template: `
+    <div style="padding: 2rem; max-width: 640px;">
+      <StorybookComponent
+        v-model="model"
+        :theme="args.theme"
+        :dismissible="args.dismissible"
+        :use-auto-focus="args.useAutoFocus"
+        :style-class-passthrough="args.styleClassPassthrough"
+      >
+        <template #title>Prompt title</template>
+        <template #content>This is the prompt content. It can contain any information you want to communicate to the user.</template>
+      </StorybookComponent>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+
+export const InfoTheme = Template.bind({});
+InfoTheme.args = {
+  theme: "info",
+  dismissible: true,
+};
+
+export const SuccessTheme = Template.bind({});
+SuccessTheme.args = {
+  theme: "success",
+  dismissible: true,
+};
+
+export const WarningTheme = Template.bind({});
+WarningTheme.args = {
+  theme: "warning",
+  dismissible: true,
+};
+
+export const ErrorTheme = Template.bind({});
+ErrorTheme.args = {
+  theme: "error",
+  dismissible: true,
+};
+
+export const Dismissible = Template.bind({});
+Dismissible.args = {
+  theme: "info",
+  dismissible: true,
+};
+
+export const AllThemesDismissible: StoryFn<typeof StorybookComponent> = () => ({
+  components: { StorybookComponent },
+  setup() {
+    return { themes: ["info", "success", "warning", "error"] as const };
+  },
+  template: `
+    <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1.6rem; max-width: 640px;">
+      <StorybookComponent
+        v-for="theme in themes"
+        :key="theme"
+        :theme="theme"
+        :dismissible="true"
+      >
+        <template #title>{{ theme.charAt(0).toUpperCase() + theme.slice(1) }} prompt</template>
+        <template #content>This is the {{ theme }} variant of the prompt component.</template>
+      </StorybookComponent>
+    </div>
+  `,
+});