srcdev-nuxt-components 9.1.55 → 9.1.56

package/app/components/01.atoms/prompt/tests/DisplayPrompt.spec.ts

@@ -0,0 +1,205 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { nextTick } from "vue";
+import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
+import DisplayPrompt from "../DisplayPrompt.vue";
+
+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);
+
+function root(wrapper: Awaited<ReturnType<typeof mountSuspended<typeof DisplayPrompt>>>) {
+  return wrapper.find(".display-prompt-core");
+}
+
+function wrapper(w: Awaited<ReturnType<typeof mountSuspended<typeof DisplayPrompt>>>) {
+  return w.find("[data-test-id='display-prompt']");
+}
+
+describe("DisplayPrompt", () => {
+  // ─── Mount ────────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const w = await mountSuspended(DisplayPrompt);
+    expect(w.vm).toBeTruthy();
+  });
+
+  // ─── Root element ─────────────────────────────────────────────────────────
+
+  it("renders the root element with class display-prompt-core", async () => {
+    const w = await mountSuspended(DisplayPrompt);
+    expect(root(w).exists()).toBe(true);
+  });
+
+  it("is visible by default (no closed class)", async () => {
+    const w = await mountSuspended(DisplayPrompt);
+    expect(root(w).classes()).not.toContain("closed");
+  });
+
+  it("has tabindex='0' on the root element", async () => {
+    const w = await mountSuspended(DisplayPrompt);
+    expect(root(w).attributes("tabindex")).toBe("0");
+  });
+
+  // ─── data-theme ───────────────────────────────────────────────────────────
+
+  it.each(["info", "success", "warning", "error"] as const)(
+    "sets data-theme='%s' on the wrapper",
+    async (theme) => {
+      const w = await mountSuspended(DisplayPrompt, { props: { theme } });
+      expect(wrapper(w).attributes("data-theme")).toBe(theme);
+    }
+  );
+
+  it("defaults to data-theme='info' when no theme prop is provided", async () => {
+    const w = await mountSuspended(DisplayPrompt);
+    expect(wrapper(w).attributes("data-theme")).toBe("info");
+  });
+
+  // ─── data-test-id ─────────────────────────────────────────────────────────
+
+  it.each(["info", "success", "warning", "error"] as const)(
+    "sets data-test-id reflecting the theme on the root element",
+    async (theme) => {
+      const w = await mountSuspended(DisplayPrompt, { props: { theme } });
+      expect(root(w).attributes("data-test-id")).toBe(`display-prompt-core-${theme}`);
+    }
+  );
+
+  // ─── Icon ─────────────────────────────────────────────────────────────────
+
+  it("renders the icon region", async () => {
+    const w = await mountSuspended(DisplayPrompt);
+    expect(w.find("[data-test-id='alert-icon']").exists()).toBe(true);
+  });
+
+  it("renders a custom icon via the customDecoratorIcon slot", async () => {
+    const w = await mountSuspended(DisplayPrompt, {
+      slots: { customDecoratorIcon: '<span class="custom-icon">★</span>' },
+    });
+    expect(w.find(".custom-icon").exists()).toBe(true);
+  });
+
+  // ─── Slots ────────────────────────────────────────────────────────────────
+
+  it("renders title slot content", async () => {
+    const w = await mountSuspended(DisplayPrompt, {
+      slots: { title: "Important notice" },
+    });
+    expect(w.find("[data-test-id='alert-title']").text()).toContain("Important notice");
+  });
+
+  it("renders content slot when provided", async () => {
+    const w = await mountSuspended(DisplayPrompt, {
+      slots: { content: "Detailed explanation here" },
+    });
+    expect(w.find("[data-test-id='alert-content']").exists()).toBe(true);
+    expect(w.find("[data-test-id='alert-content']").text()).toContain("Detailed explanation here");
+  });
+
+  it("does not render content element when content slot is empty", async () => {
+    const w = await mountSuspended(DisplayPrompt);
+    expect(w.find("[data-test-id='alert-content']").exists()).toBe(false);
+  });
+
+  // ─── Dismiss button ───────────────────────────────────────────────────────
+
+  it("does not render the dismiss button when dismissible is false", async () => {
+    const w = await mountSuspended(DisplayPrompt, { props: { dismissible: false } });
+    expect(w.find("[data-test-id='alert-dismiss']").exists()).toBe(false);
+  });
+
+  it("renders the dismiss button when dismissible is true", async () => {
+    const w = await mountSuspended(DisplayPrompt, { props: { dismissible: true } });
+    expect(w.find("[data-test-id='alert-dismiss']").exists()).toBe(true);
+  });
+
+  // ─── Dismiss behaviour (no parent model) ─────────────────────────────────
+
+  it("adds the closed class after the dismiss button is clicked", async () => {
+    const w = await mountSuspended(DisplayPrompt, { props: { dismissible: true } });
+    await w.find("[data-test-id='alert-dismiss']").trigger("click");
+    await nextTick();
+    expect(root(w).classes()).toContain("closed");
+  });
+
+  // ─── Dismiss behaviour (with parent model) ────────────────────────────────
+
+  it("emits update:modelValue=false when clicked with modelValue=true", async () => {
+    const w = await mountSuspended(DisplayPrompt, {
+      props: { dismissible: true, modelValue: true },
+    });
+    await w.find("[data-test-id='alert-dismiss']").trigger("click");
+    await nextTick();
+    const emitted = w.emitted("update:modelValue");
+    expect(emitted).toBeTruthy();
+    expect(emitted![0]).toEqual([false]);
+  });
+
+  it("does not add the closed class when dismissed via parent model", async () => {
+    const w = await mountSuspended(DisplayPrompt, {
+      props: { dismissible: true, modelValue: true },
+    });
+    await w.find("[data-test-id='alert-dismiss']").trigger("click");
+    await nextTick();
+    // componentOpen is unchanged — parent controls visibility via modelValue
+    expect(root(w).classes()).not.toContain("closed");
+  });
+
+  // ─── styleClassPassthrough ────────────────────────────────────────────────
+
+  it("applies a styleClassPassthrough string class to the wrapper", async () => {
+    const w = await mountSuspended(DisplayPrompt, {
+      props: { styleClassPassthrough: "outlined" },
+    });
+    expect(wrapper(w).classes()).toContain("outlined");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const w = await mountSuspended(DisplayPrompt, {
+      props: { styleClassPassthrough: ["dark", "outlined"] },
+    });
+    expect(wrapper(w).classes()).toContain("dark");
+    expect(wrapper(w).classes()).toContain("outlined");
+  });
+
+  // ─── app.config resolution ────────────────────────────────────────────────
+
+  describe("app.config resolution", () => {
+    beforeEach(() => {
+      useAppConfigMock.mockReturnValue({ srcdev: undefined, icon: {} });
+    });
+
+    it("uses hardcoded fallbacks when app.config has no displayPrompt key", async () => {
+      const w = await mountSuspended(DisplayPrompt);
+      expect(wrapper(w).attributes("data-theme")).toBe("info");
+      expect(root(w).attributes("data-test-id")).toBe("display-prompt-core-info");
+      expect(w.find("[data-test-id='alert-dismiss']").exists()).toBe(false);
+    });
+
+    it("uses app.config values when no props are supplied", async () => {
+      useAppConfigMock.mockReturnValue({
+        icon: {},
+        srcdev: { displayPrompt: { theme: "success", dismissible: true } },
+      });
+      const w = await mountSuspended(DisplayPrompt);
+      expect(wrapper(w).attributes("data-theme")).toBe("success");
+      expect(root(w).attributes("data-test-id")).toBe("display-prompt-core-success");
+      expect(w.find("[data-test-id='alert-dismiss']").exists()).toBe(true);
+    });
+
+    it("explicit props take precedence over app.config", async () => {
+      useAppConfigMock.mockReturnValue({
+        icon: {},
+        srcdev: { displayPrompt: { theme: "warning", dismissible: true } },
+      });
+      const w = await mountSuspended(DisplayPrompt, {
+        props: { theme: "error", dismissible: false },
+      });
+      expect(wrapper(w).attributes("data-theme")).toBe("error");
+      expect(w.find("[data-test-id='alert-dismiss']").exists()).toBe(false);
+    });
+  });
+});

package/app/components/01.atoms/toast/DisplayToast.vue

@@ -0,0 +1,327 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="privateDisplayToast"
+      ref="toastElementRef"
+      class="display-toast"
+      :class="[elementClasses, cssStateClass, positionClasses]"
+      :data-theme="theme"
+      :role="toastRole"
+      :aria-live="ariaLive"
+      :tabindex="slots.default ? undefined : '0'"
+      :aria-describedby="slots.default ? undefined : 'toast-message-' + toastId"
+      @keydown.escape="setDismissToast"
+    >
+      <slot v-if="slots.default"></slot>
+
+      <component
+        :is="contentComponent"
+        v-else
+        :theme="theme"
+        :custom-icon="customIcon"
+        :content-id="'toast-message-' + toastId"
+        :dismissible="!autoDismiss"
+        @dismiss="setDismissToast"
+      >
+        <template v-if="slots.customToastIcon" #icon>
+          <slot name="customToastIcon"></slot>
+        </template>
+        <template v-if="slots.title || toastTitle || toastDisplayText" #title>
+          <slot name="title">{{ toastTitle || toastDisplayText }}</slot>
+        </template>
+        <template v-if="slots.description || toastDescription" #content>
+          <slot name="description">{{ toastDescription }}</slot>
+        </template>
+      </component>
+      <div v-if="autoDismiss" class="display-toast-progress"></div>
+    </div>
+  </Teleport>
+</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 { DisplayToastConfig, ToastSlots } from "~/types/components";
+
+interface Props {
+  config?: DisplayToastConfig;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  config: undefined,
+  styleClassPassthrough: () => [],
+});
+
+const slots = defineSlots<ToastSlots>();
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const appConfig = useAppConfig();
+
+// Computed properties for accessing config values with defaults
+// Resolution chain: prop config → app.config → hardcoded fallback
+const theme = computed(() => props.config?.appearance?.theme ?? appConfig.srcdev?.displayToast?.appearance?.theme ?? "info");
+const position = computed(() => props.config?.appearance?.position ?? appConfig.srcdev?.displayToast?.appearance?.position ?? "top");
+const alignment = computed(() => props.config?.appearance?.alignment ?? appConfig.srcdev?.displayToast?.appearance?.alignment ?? "right");
+const fullWidth = computed(() => props.config?.appearance?.fullWidth ?? appConfig.srcdev?.displayToast?.appearance?.fullWidth ?? false);
+const masked = computed(() => props.config?.appearance?.masked ?? appConfig.srcdev?.displayToast?.appearance?.masked ?? false);
+const contentComponent = computed(() => (masked.value ? AlertMaskedContent : AlertContent));
+const autoDismiss = computed(() => props.config?.behavior?.autoDismiss ?? appConfig.srcdev?.displayToast?.behavior?.autoDismiss ?? true);
+const duration = computed(() => props.config?.behavior?.duration ?? appConfig.srcdev?.displayToast?.behavior?.duration ?? 5000);
+const revealDuration = computed(() => props.config?.behavior?.revealDuration ?? appConfig.srcdev?.displayToast?.behavior?.revealDuration ?? 550);
+const returnFocusTo = computed(() => props.config?.behavior?.returnFocusTo ?? null);
+const toastDisplayText = computed(() => props.config?.content?.text ?? "");
+const toastTitle = computed(() => props.config?.content?.title ?? "");
+const toastDescription = computed(() => props.config?.content?.description ?? "");
+const customIcon = computed(() => props.config?.content?.customIcon);
+
+// Computed classes for positioning
+const positionClasses = computed(() => {
+  const classes = [];
+  classes.push(position.value);
+  if (fullWidth.value) {
+    classes.push("full-width");
+  } else {
+    classes.push(alignment.value);
+  }
+  return classes;
+});
+
+/*
+ * Accessibility setup
+ */
+const toastId = useId();
+const toastElementRef = useTemplateRef<HTMLElement>("toastElementRef");
+
+// Determine appropriate ARIA attributes based on theme
+const toastRole = computed(() => {
+  return ["error", "warning"].includes(theme.value) ? "alert" : "status";
+});
+
+const ariaLive = computed(() => {
+  return ["error", "warning"].includes(theme.value) ? "assertive" : "polite";
+});
+
+/*
+ * Setup component state
+ */
+const externalTriggerModel = defineModel<boolean>({ default: false });
+const privateDisplayToast = ref(false);
+const transitionalState = ref(false);
+const cssStateClass = computed(() => {
+  return transitionalState.value ? "show" : "hide";
+});
+
+/*
+ * Computed properties for durations (in ms for CSS)
+ */
+const revealDurationMs = computed(() => revealDuration.value + "ms");
+const displayDurationMs = computed(() => duration.value + "ms");
+
+/*
+ * Lifecycle hooks
+ */
+const setDismissToast = async () => {
+  transitionalState.value = false;
+  await useSleep(revealDuration.value);
+
+  // Return focus to specified element if provided
+  if (returnFocusTo.value) {
+    // Handle both HTMLElement and ComponentPublicInstance
+    let focusTarget: HTMLElement | null = null;
+
+    if (returnFocusTo.value instanceof HTMLElement) {
+      focusTarget = returnFocusTo.value;
+    } else if (returnFocusTo.value && "$el" in returnFocusTo.value) {
+      focusTarget = returnFocusTo.value.$el as HTMLElement;
+    }
+
+    if (focusTarget && typeof focusTarget.focus === "function") {
+      focusTarget.focus();
+    }
+  }
+
+  externalTriggerModel.value = false;
+  privateDisplayToast.value = false;
+};
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+
+watch(
+  () => externalTriggerModel.value,
+  async (newValue, previousValue) => {
+    if (newValue) {
+      privateDisplayToast.value = true;
+      transitionalState.value = true;
+
+      // Focus management for accessibility when not using custom slots
+      if (!slots.default) {
+        await nextTick();
+        // Wait for animation to start before focusing
+        setTimeout(() => {
+          toastElementRef.value?.focus();
+        }, 100);
+      }
+
+      if (autoDismiss.value) {
+        await useSleep(duration.value);
+        setDismissToast();
+      }
+    } else if (!newValue && previousValue) {
+      // If external model is set to false, dismiss the toast
+      setDismissToast();
+    }
+  }
+);
+
+onBeforeRouteLeave(() => {
+  setDismissToast();
+});
+</script>
+
+<style lang="css">
+@layer components {
+  @keyframes show {
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes hideTop {
+    0% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    100% {
+      opacity: 0;
+      transform: translateY(-30px);
+    }
+  }
+
+  @keyframes hideBottom {
+    0% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    100% {
+      opacity: 0;
+      transform: translateY(30px);
+    }
+  }
+
+  @keyframes progress {
+    to {
+      transform: scaleX(1);
+    }
+  }
+
+  .display-toast {
+    --_toast-gutter: 12px;
+    @media (width >= 600px) {
+      --_toast-gutter: 24px;
+    }
+
+    display: block;
+    overflow: hidden;
+    position: fixed;
+    margin: 0;
+    opacity: 0;
+
+    z-index: 100;
+
+    /* Focus styles for accessibility */
+    &:focus {
+      outline: 2px solid var(--theme-ring);
+      outline-offset: 2px;
+    }
+
+    &:focus:not(:focus-visible) {
+      outline: none;
+    }
+
+    &.show {
+      @supports (animation-timing-function: linear(0, 1)) {
+        animation: show v-bind(revealDurationMs) var(--spring-easing) forwards;
+      }
+
+      @supports not (animation-timing-function: linear(0, 1)) {
+        animation: show calc(v-bind(revealDurationMs) / 2) linear forwards;
+      }
+    }
+
+    &.hide {
+      @supports (animation-timing-function: linear(0, 1)) {
+        animation: hideTop v-bind(revealDurationMs) var(--spring-easing) forwards;
+      }
+
+      @supports not (animation-timing-function: linear(0, 1)) {
+        animation: hideTop calc(v-bind(revealDurationMs) / 2) linear forwards;
+      }
+
+      &.bottom {
+        @supports (animation-timing-function: linear(0, 1)) {
+          animation: hideBottom v-bind(revealDurationMs) var(--spring-easing) forwards;
+        }
+
+        @supports not (animation-timing-function: linear(0, 1)) {
+          animation: hideBottom calc(v-bind(revealDurationMs) / 2) linear forwards;
+        }
+      }
+    }
+
+    /*
+  * Default is centre for smaller screens
+  */
+    inset-inline: var(--_toast-gutter);
+    margin-inline: auto;
+
+    @media (width >= 600px) {
+      &.left {
+        inset-inline-start: var(--_toast-gutter);
+        inset-inline-end: unset;
+      }
+
+      &.right {
+        inset-inline-end: var(--_toast-gutter);
+        inset-inline-start: unset;
+      }
+
+      &.center {
+        &:not(.full-width) {
+          inset-inline: 0;
+          margin-inline: auto;
+          width: max-content;
+        }
+      }
+    }
+
+    &.top {
+      inset-block-start: var(--_toast-gutter);
+      transform: translateY(-30px);
+    }
+    &.bottom {
+      inset-block-end: var(--_toast-gutter);
+      transform: translateY(30px);
+    }
+
+    .display-toast-progress {
+      position: absolute;
+      inset-block-end: 4px;
+      inset-inline: 15px 8px;
+      height: 3px;
+      transform: scaleX(0);
+      transform-origin: right;
+      background: var(--theme-accent);
+      border-radius: inherit;
+      animation: progress v-bind(displayDurationMs) linear forwards;
+    }
+  }
+}
+</style>