srcdev-nuxt-components 9.1.55 → 9.1.57

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

@@ -0,0 +1,362 @@
+<template>
+  <Teleport to="body">
+    <TransitionGroup
+      tag="div"
+      class="display-toast-provider"
+      :class="[position, fullWidth ? 'full-width' : alignment]"
+      @before-leave="onBeforeLeave"
+      @after-leave="onAfterLeave"
+      @after-enter="onAfterEnter"
+    >
+      <div
+        v-for="entry in visibleEntries"
+        :key="entry.id"
+        class="display-toast-provider-item"
+        :style="{
+          '--_reveal': revealDurationFor(entry) + 'ms',
+          '--_duration': displayDurationFor(entry) + 'ms',
+        }"
+        :data-theme="themeFor(entry)"
+        :role="roleFor(entry)"
+        :aria-live="ariaLiveFor(entry)"
+        tabindex="0"
+        :aria-describedby="'toast-message-' + entry.id"
+        @keydown.escape="handleDismiss(entry.id)"
+      >
+        <component
+          :is="maskedFor(entry) ? AlertMaskedContent : AlertContent"
+          :theme="themeFor(entry)"
+          :custom-icon="entry.config.content?.customIcon"
+          :content-id="'toast-message-' + entry.id"
+          :dismissible="!autoDismissFor(entry)"
+          @dismiss="handleDismiss(entry.id)"
+        >
+          <template v-if="entry.config.content?.title || entry.config.content?.text" #title>
+            {{ entry.config.content?.title || entry.config.content?.text }}
+          </template>
+          <template v-if="entry.config.content?.description" #content>
+            {{ entry.config.content?.description }}
+          </template>
+        </component>
+        <div v-if="autoDismissFor(entry)" class="display-toast-provider-progress"></div>
+      </div>
+    </TransitionGroup>
+  </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 {
+  DisplayToastTheme,
+  DisplayToastPosition,
+  DisplayToastAlignment,
+  ToastQueueEntry,
+} from "~/types/components";
+
+interface Props {
+  position?: DisplayToastPosition;
+  alignment?: DisplayToastAlignment;
+  fullWidth?: boolean;
+  maxVisible?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  position: "top",
+  alignment: "right",
+  fullWidth: false,
+  maxVisible: 1,
+});
+
+const { queue, promote, dismiss } = useToastQueueProvider();
+
+const visibleEntries = computed<ToastQueueEntry[]>(() =>
+  (queue.value as ToastQueueEntry[]).filter((e) => e.status === "visible")
+);
+
+const themeFor = (entry: ToastQueueEntry): DisplayToastTheme => entry.config.appearance?.theme ?? "info";
+const maskedFor = (entry: ToastQueueEntry) => entry.config.appearance?.masked ?? false;
+const autoDismissFor = (entry: ToastQueueEntry) => entry.config.behavior?.autoDismiss ?? true;
+const displayDurationFor = (entry: ToastQueueEntry) => entry.config.behavior?.duration ?? 5000;
+const revealDurationFor = (entry: ToastQueueEntry) => entry.config.behavior?.revealDuration ?? 550;
+const roleFor = (entry: ToastQueueEntry) => (["error", "warning"].includes(themeFor(entry)) ? "alert" : "status");
+const ariaLiveFor = (entry: ToastQueueEntry) =>
+  ["error", "warning"].includes(themeFor(entry)) ? "assertive" : "polite";
+
+const timers = new Map<string, ReturnType<typeof setTimeout>>();
+
+const handleDismiss = (id: string) => {
+  const timer = timers.get(id);
+  if (timer !== undefined) {
+    clearTimeout(timer);
+    timers.delete(id);
+  }
+  dismiss(id);
+};
+
+const startTimer = (entry: ToastQueueEntry) => {
+  if (!autoDismissFor(entry)) return;
+  const timer = setTimeout(() => {
+    timers.delete(entry.id);
+    dismiss(entry.id);
+  }, displayDurationFor(entry));
+  timers.set(entry.id, timer);
+};
+
+watch(
+  queue,
+  (newQueue) => {
+    const entries = newQueue as ToastQueueEntry[];
+
+    // Clear timers for entries that no longer exist (e.g. clear()).
+    const entryIds = new Set(entries.map((e) => e.id));
+    for (const [id, timer] of timers) {
+      if (!entryIds.has(id)) {
+        clearTimeout(timer);
+        timers.delete(id);
+      }
+    }
+
+    const visibleCount = entries.filter((e) => e.status === "visible").length;
+    const slots = props.maxVisible - visibleCount;
+    const pending = entries.filter((e) => e.status === "pending");
+    for (let i = 0; i < Math.min(slots, pending.length); i++) {
+      promote(pending[i]!.id);
+      startTimer(pending[i]!);
+    }
+  },
+  { immediate: true }
+);
+
+let _leavingCount = 0;
+let _containerEl: HTMLElement | null = null;
+
+const onBeforeLeave = (el: Element) => {
+  const htmlEl = el as HTMLElement;
+  if (_leavingCount === 0) {
+    _containerEl = htmlEl.parentElement as HTMLElement;
+    if (_containerEl) {
+      _containerEl.style.minWidth = `${_containerEl.offsetWidth}px`;
+    }
+  }
+  _leavingCount++;
+  htmlEl.style.top = `${htmlEl.offsetTop}px`;
+  htmlEl.style.width = `${htmlEl.offsetWidth}px`;
+};
+
+const onAfterLeave = () => {
+  _leavingCount--;
+  if (_leavingCount === 0 && _containerEl) {
+    _containerEl.style.minWidth = "";
+    _containerEl = null;
+  }
+};
+
+const onAfterEnter = (el: Element) => {
+  (el as HTMLElement).focus();
+};
+
+onUnmounted(() => {
+  timers.forEach(clearTimeout);
+  timers.clear();
+});
+</script>
+
+<style lang="css">
+@layer components {
+  @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);
+    }
+  }
+
+  @keyframes showTop {
+    from {
+      opacity: 0;
+      transform: translateY(-30px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes showBottom {
+    from {
+      opacity: 0;
+      transform: translateY(30px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .display-toast-provider {
+    --_gutter: 12px;
+    @media (width >= 600px) {
+      --_gutter: 24px;
+    }
+
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    z-index: 100;
+
+    inset-inline: var(--_gutter);
+    margin-inline: auto;
+    width: max-content;
+    max-width: calc(100% - 2 * var(--_gutter));
+
+    &.top {
+      inset-block-start: var(--_gutter);
+    }
+
+    &.bottom {
+      inset-block-end: var(--_gutter);
+      flex-direction: column-reverse;
+    }
+
+    @media (width >= 600px) {
+      &.left {
+        inset-inline-start: var(--_gutter);
+        inset-inline-end: unset;
+        margin-inline: 0;
+      }
+
+      &.right {
+        inset-inline-end: var(--_gutter);
+        inset-inline-start: unset;
+        margin-inline: 0;
+      }
+
+      &.center:not(.full-width) {
+        inset-inline: 0;
+        margin-inline: auto;
+      }
+
+      &.full-width {
+        inset-inline: var(--_gutter);
+        width: unset;
+        max-width: unset;
+      }
+    }
+  }
+
+  .display-toast-provider-item {
+    --_reveal: 550ms;
+    --_duration: 5000ms;
+
+    display: block;
+    position: relative;
+    overflow: hidden;
+
+    &:focus {
+      outline: 2px solid var(--theme-ring);
+      outline-offset: 2px;
+    }
+
+    &:focus:not(:focus-visible) {
+      outline: none;
+    }
+
+    /* TransitionGroup enter/leave */
+    .display-toast-provider.top & {
+      &.v-enter-from {
+        opacity: 0;
+        transform: translateY(-30px);
+      }
+
+      &.v-enter-active {
+        @supports (animation-timing-function: linear(0, 1)) {
+          animation: showTop var(--_reveal) var(--spring-easing) forwards;
+        }
+
+        @supports not (animation-timing-function: linear(0, 1)) {
+          animation: showTop calc(var(--_reveal) / 2) linear forwards;
+        }
+      }
+
+      &.v-leave-active {
+        position: absolute;
+
+        @supports (animation-timing-function: linear(0, 1)) {
+          animation: hideTop var(--_reveal) var(--spring-easing) forwards;
+        }
+
+        @supports not (animation-timing-function: linear(0, 1)) {
+          animation: hideTop calc(var(--_reveal) / 2) linear forwards;
+        }
+      }
+    }
+
+    .display-toast-provider.bottom & {
+      &.v-enter-from {
+        opacity: 0;
+        transform: translateY(30px);
+      }
+
+      &.v-enter-active {
+        @supports (animation-timing-function: linear(0, 1)) {
+          animation: showBottom var(--_reveal) var(--spring-easing) forwards;
+        }
+
+        @supports not (animation-timing-function: linear(0, 1)) {
+          animation: showBottom calc(var(--_reveal) / 2) linear forwards;
+        }
+      }
+
+      &.v-leave-active {
+        position: absolute;
+
+        @supports (animation-timing-function: linear(0, 1)) {
+          animation: hideBottom var(--_reveal) var(--spring-easing) forwards;
+        }
+
+        @supports not (animation-timing-function: linear(0, 1)) {
+          animation: hideBottom calc(var(--_reveal) / 2) linear forwards;
+        }
+      }
+    }
+
+    &.v-move {
+      transition: transform 0.3s ease;
+    }
+
+    .display-toast-provider-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 var(--_duration) linear forwards;
+    }
+  }
+}
+</style>

package/app/components/01.atoms/toast/stories/DisplayToast.stories.ts

@@ -0,0 +1,195 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { ref, onMounted } from "vue";
+import StorybookComponent from "../DisplayToast.vue";
+
+interface ToastStoryArgs {
+  theme: "info" | "success" | "warning" | "error";
+  position: "top" | "bottom";
+  alignment: "left" | "center" | "right";
+  fullWidth: boolean;
+  autoDismiss: boolean;
+  duration: number;
+  revealDuration: number;
+  title: string;
+  description: string;
+  customIcon: string;
+}
+
+export default {
+  title: "Atoms/DisplayToast",
+  component: StorybookComponent,
+  argTypes: {
+    theme: {
+      control: { type: "select" },
+      options: ["info", "success", "warning", "error"],
+      description: "Toast theme/variant",
+      table: { category: "Appearance" },
+    },
+    position: {
+      control: { type: "select" },
+      options: ["top", "bottom"],
+      description: "Vertical position of toast",
+      table: { category: "Appearance" },
+    },
+    alignment: {
+      control: { type: "select" },
+      options: ["left", "center", "right"],
+      description: "Horizontal alignment of toast",
+      table: { category: "Appearance" },
+    },
+    fullWidth: {
+      control: { type: "boolean" },
+      description: "Whether toast spans full width",
+      table: { category: "Appearance" },
+    },
+    autoDismiss: {
+      control: { type: "boolean" },
+      description: "Auto dismiss toast after duration",
+      table: { category: "Behaviour" },
+    },
+    duration: {
+      control: { type: "range", min: 1000, max: 10000, step: 500 },
+      description: "Auto dismiss duration in milliseconds",
+      table: { category: "Behaviour" },
+    },
+    revealDuration: {
+      control: { type: "range", min: 100, max: 1000, step: 50 },
+      description: "Animation duration for reveal/hide",
+      table: { category: "Behaviour" },
+    },
+    title: {
+      control: { type: "text" },
+      description: "Toast title text",
+      table: { category: "Content" },
+    },
+    description: {
+      control: { type: "text" },
+      description: "Toast description text shown below the title",
+      table: { category: "Content" },
+    },
+    customIcon: {
+      control: { type: "text" },
+      description: "Custom icon name (Iconify, e.g. 'akar-icons:check-box')",
+      table: { category: "Content" },
+    },
+    config: { table: { disable: true } },
+    modelValue: { table: { disable: true } },
+  },
+  args: {
+    theme: "info",
+    position: "top",
+    alignment: "right",
+    fullWidth: false,
+    autoDismiss: false,
+    duration: 3000,
+    revealDuration: 300,
+    title: "Notification",
+    description: "This is a toast notification message.",
+    customIcon: "",
+  },
+} as Meta<ToastStoryArgs>;
+
+const Template: StoryFn<ToastStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const isActive = ref(false);
+
+    onMounted(() => {
+      setTimeout(() => {
+        isActive.value = true;
+      }, 500);
+    });
+
+    return { args, isActive };
+  },
+  template: `
+    <div style="position: relative; height: 200px; padding: 20px;">
+      <button
+        @click="isActive = true"
+        style="padding: 8px 16px; background: #0066cc; color: white; border: none; border-radius: 4px; cursor: pointer;"
+      >
+        Trigger Toast
+      </button>
+
+      <StorybookComponent
+        v-model="isActive"
+        :config="{
+          appearance: {
+            theme: args.theme,
+            position: args.position,
+            alignment: args.alignment,
+            fullWidth: args.fullWidth,
+          },
+          behavior: {
+            autoDismiss: args.autoDismiss,
+            duration: args.duration,
+            revealDuration: args.revealDuration,
+          },
+          content: {
+            title: args.title,
+            description: args.description,
+            ...(args.customIcon && { customIcon: args.customIcon }),
+          },
+        }"
+      />
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+
+export const SuccessToast = Template.bind({});
+SuccessToast.args = {
+  theme: "success",
+  title: "Changes saved",
+  description: "Your changes have been saved successfully.",
+  customIcon: "akar-icons:check-box",
+  autoDismiss: false,
+};
+
+export const ErrorToast = Template.bind({});
+ErrorToast.args = {
+  theme: "error",
+  title: "Something went wrong",
+  description: "Please try again or contact support if the problem persists.",
+  autoDismiss: false,
+  position: "top",
+  alignment: "center",
+};
+
+export const WarningToast = Template.bind({});
+WarningToast.args = {
+  theme: "warning",
+  title: "Action required",
+  description: "Please review the highlighted fields before continuing.",
+  autoDismiss: false,
+};
+
+export const AutoDismiss = Template.bind({});
+AutoDismiss.args = {
+  theme: "info",
+  title: "Auto-dismissing",
+  description: "This toast will dismiss itself after 3 seconds.",
+  autoDismiss: true,
+  duration: 3000,
+};
+
+export const BottomCenter = Template.bind({});
+BottomCenter.args = {
+  theme: "info",
+  title: "Bottom centre",
+  description: "Positioned at the bottom centre of the viewport.",
+  position: "bottom",
+  alignment: "center",
+  autoDismiss: false,
+};
+
+export const FullWidth = Template.bind({});
+FullWidth.args = {
+  theme: "warning",
+  title: "Full width warning",
+  description: "This toast spans the full width of the viewport.",
+  fullWidth: true,
+  position: "top",
+  autoDismiss: false,
+};

package/app/components/01.atoms/toast/stories/DisplayToastProvider.stories.ts

@@ -0,0 +1,142 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { useToastQueue } from "~/composables/useToastQueue";
+import DisplayToastProvider from "../DisplayToastProvider.vue";
+import type { DisplayToastTheme, DisplayToastPosition, DisplayToastAlignment } from "~/types/components";
+
+type StoryArgs = {
+  position: DisplayToastPosition;
+  alignment: DisplayToastAlignment;
+  fullWidth: boolean;
+  maxVisible: number;
+  theme: DisplayToastTheme;
+  autoDismiss: boolean;
+  duration: number;
+};
+
+const themes = ["info", "success", "warning", "error"] as const;
+
+const messages: Record<DisplayToastTheme, { title: string; description: string }> = {
+  info: { title: "Information", description: "This is an informational notification." },
+  success: { title: "Success!", description: "Your action completed successfully." },
+  warning: { title: "Warning", description: "Please review this before continuing." },
+  error: { title: "Error", description: "Something went wrong. Please try again." },
+};
+
+export default {
+  title: "Atoms/DisplayToastProvider",
+  component: DisplayToastProvider,
+  argTypes: {
+    position: {
+      control: { type: "select" },
+      options: ["top", "bottom"],
+      description: "Vertical position of toasts",
+      table: { category: "Provider" },
+    },
+    alignment: {
+      control: { type: "select" },
+      options: ["left", "center", "right"],
+      description: "Horizontal alignment of toasts",
+      table: { category: "Provider" },
+    },
+    fullWidth: {
+      control: "boolean",
+      description: "Toasts span full viewport width",
+      table: { category: "Provider" },
+    },
+    maxVisible: {
+      control: { type: "number", min: 1, max: 5 },
+      description: "Max toasts shown simultaneously",
+      table: { category: "Provider" },
+    },
+    theme: {
+      control: { type: "select" },
+      options: ["info", "success", "warning", "error"],
+      description: "Theme for triggered toast",
+      table: { category: "Toast" },
+    },
+    autoDismiss: {
+      control: "boolean",
+      description: "Auto-dismiss triggered toast",
+      table: { category: "Toast" },
+    },
+    duration: {
+      control: { type: "range", min: 1000, max: 10000, step: 500 },
+      description: "Auto-dismiss duration in ms",
+      table: { category: "Toast" },
+    },
+  },
+  args: {
+    position: "top",
+    alignment: "right",
+    fullWidth: false,
+    maxVisible: 1,
+    theme: "info",
+    autoDismiss: true,
+    duration: 4000,
+  },
+} as Meta<StoryArgs>;
+
+const Template: StoryFn<StoryArgs> = (args) => ({
+  components: { DisplayToastProvider },
+  setup() {
+    const { show, clear } = useToastQueue();
+
+    const triggerToast = () => {
+      show({
+        appearance: { theme: args.theme },
+        behavior: { autoDismiss: args.autoDismiss, duration: args.duration },
+        content: messages[args.theme],
+      });
+    };
+
+    const queueAll = () => {
+      themes.forEach((theme) => {
+        show({
+          appearance: { theme },
+          behavior: { autoDismiss: args.autoDismiss, duration: args.duration },
+          content: messages[theme],
+        });
+      });
+    };
+
+    return { args, triggerToast, queueAll, clear };
+  },
+  template: `
+    <div style="padding: 2rem; min-height: 200px;">
+      <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
+        <button @click="triggerToast" style="padding: 0.6rem 1.4rem; cursor: pointer; border: 1px solid #ccc; border-radius: 4px;">Trigger Toast</button>
+        <button @click="queueAll" style="padding: 0.6rem 1.4rem; cursor: pointer; border: 1px solid #ccc; border-radius: 4px;">Queue All Themes</button>
+        <button @click="clear" style="padding: 0.6rem 1.4rem; cursor: pointer; border: 1px solid #ccc; border-radius: 4px;">Clear Queue</button>
+      </div>
+      <DisplayToastProvider
+        :position="args.position"
+        :alignment="args.alignment"
+        :full-width="args.fullWidth"
+        :max-visible="args.maxVisible"
+      />
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+
+export const BottomLeft = Template.bind({});
+BottomLeft.args = {
+  position: "bottom",
+  alignment: "left",
+  theme: "success",
+  autoDismiss: false,
+};
+
+export const Stacked = Template.bind({});
+Stacked.args = {
+  maxVisible: 3,
+  autoDismiss: false,
+};
+
+export const FullWidth = Template.bind({});
+FullWidth.args = {
+  fullWidth: true,
+  theme: "warning",
+  autoDismiss: false,
+};