srcdev-nuxt-components 6.1.33 → 6.1.35

package/app/components/display-toast/DisplayToast.vue

@@ -1,29 +1,35 @@
 <template>
   <Teleport to="body">
     <div
-      v-if="privateToastState"
+      v-if="privateDisplayToast"
+      ref="toastElement"
       class="display-toast"
       :class="[
         elementClasses,
         cssStateClass,
+        positionClasses,
         {
           'has-theme': !slots.default,
-          'auto-dismiss': autoDismiss,
         },
       ]"
       :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>
 
       <div v-else class="display-toast-inner">
         <div class="toast-icon" aria-hidden="true">
           <slot name="customToastIcon">
-            <Icon :name="defaultThemeIcons[props.theme] ?? 'akar-icons:info'" class="icon" />
+            <Icon :name="customIcon || defaultThemeIcons[theme] || 'akar-icons:info'" class="icon" />
           </slot>
         </div>
-        <div class="toast-message">{{ toastDisplayText }}</div>
+        <div class="toast-message" :id="'toast-message-' + toastId">{{ toastDisplayText }}</div>
         <div class="toast-action">
-          <button @click.prevent="updateToHiding()">
+          <button @click.prevent="setDismissToast()">
             <Icon name="material-symbols:close" class="icon" />
             <span class="sr-only">Close</span>
           </button>
@@ -33,37 +39,103 @@
     </div>
   </Teleport>
 </template>
+
+<script lang="ts">
+/**
+ * DisplayToast - Configurable toast notification component
+ *
+ * Example usage with config object:
+ * <DisplayToast
+ *   v-model="showToast"
+ *   :config="{
+ *     appearance: { theme: 'success', position: 'top', alignment: 'right' },
+ *     behavior: { autoDismiss: true, duration: 3000 },
+ *     content: { text: 'Operation completed successfully!' }
+ *   }"
+ * />
+ *
+ * Types exported for use in other components:
+ * - DisplayToastConfig
+ * - DisplayToastProps
+ * - DisplayToastTheme
+ * - DisplayToastAppearanceConfig
+ * - DisplayToastBehaviorConfig
+ * - DisplayToastContentConfig
+ * - ToastSlots
+ */
+
+export type DisplayToastTheme =
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "ghost"
+  | "error"
+  | "info"
+  | "success"
+  | "warning"
+
+export type DisplayToastPosition = "top" | "bottom"
+export type DisplayToastAlignment = "left" | "center" | "right"
+
+export interface DisplayToastAppearanceConfig {
+  theme?: DisplayToastTheme
+  position?: DisplayToastPosition
+  alignment?: DisplayToastAlignment
+  fullWidth?: boolean
+}
+
+export interface DisplayToastBehaviorConfig {
+  autoDismiss?: boolean
+  duration?: number
+  revealDuration?: number
+}
+
+export interface DisplayToastContentConfig {
+  text?: string
+  customIcon?: string
+}
+
+export interface DisplayToastConfig {
+  appearance?: DisplayToastAppearanceConfig
+  behavior?: DisplayToastBehaviorConfig
+  content?: DisplayToastContentConfig
+}
+
+export interface DisplayToastProps {
+  config?: DisplayToastConfig
+  styleClassPassthrough?: string | string[]
+}
+
+export interface ToastSlots {
+  default?(props?: {}): any
+  customToastIcon?(props?: {}): any
+}
+</script>
+
 <script setup lang="ts">
-const props = defineProps({
-  theme: {
-    type: String as PropType<"primary" | "secondary" | "tertiary" | "ghost" | "error" | "info" | "success" | "warning">,
-    default: "ghost",
-    validator(value: string) {
-      return ["primary", "secondary", "tertiary", "ghost", "error", "info", "success", "warning"].includes(value)
+const props = withDefaults(defineProps<DisplayToastProps>(), {
+  config: () => ({
+    appearance: {
+      theme: "ghost" as DisplayToastTheme,
+      position: "top" as DisplayToastPosition,
+      alignment: "right" as DisplayToastAlignment,
+      fullWidth: false,
+    },
+    behavior: {
+      autoDismiss: true,
+      duration: 5000,
+      revealDuration: 550,
+    },
+    content: {
+      text: "",
+      customIcon: undefined,
     },
-  },
-  revealDuration: {
-    type: Number,
-    default: 550,
-  },
-  autoDismiss: {
-    type: Boolean,
-    default: true,
-  },
-  duration: {
-    type: Number,
-    default: 5000,
-  },
-  toastDisplayText: {
-    type: String,
-    default: "",
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
+  }),
+  styleClassPassthrough: () => [],
 })
 
+const slots = defineSlots<ToastSlots>()
+
 const defaultThemeIcons = {
   primary: "akar-icons:info",
   secondary: "akar-icons:info",
@@ -75,51 +147,70 @@ const defaultThemeIcons = {
   warning: "akar-icons:circle-alert",
 }
 
-const slots = useSlots()
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-// single state ref
-const state = ref<"idle" | "entering" | "visible" | "hiding">("idle")
-const cssStateClass = computed(() => {
-  return state.value !== "idle" && !props.autoDismiss ? state.value : ""
+// Computed properties for accessing config values with defaults
+const theme = computed(() => props.config?.appearance?.theme ?? "ghost")
+const position = computed(() => props.config?.appearance?.position ?? "top")
+const alignment = computed(() => props.config?.appearance?.alignment ?? "right")
+const fullWidth = computed(() => props.config?.appearance?.fullWidth ?? false)
+const autoDismiss = computed(() => props.config?.behavior?.autoDismiss ?? true)
+const duration = computed(() => props.config?.behavior?.duration ?? 5000)
+const revealDuration = computed(() => props.config?.behavior?.revealDuration ?? 550)
+const toastDisplayText = computed(() => props.config?.content?.text ?? "")
+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
 })
 
-// external toggle
-const publicToastState = defineModel<boolean>({ default: false })
-
-// computed helpers
-const privateToastState = ref(false)
+/*
+ * Accessibility setup
+ */
+const toastId = useId()
+const toastElement = ref<HTMLElement>()
 
-const revealDurationInt = computed(() => props.revealDuration)
-const revealDuration = computed(() => revealDurationInt.value + "ms")
-const displayDurationInt = computed(() => props.duration)
-const displayDuration = computed(() => displayDurationInt.value + "ms")
+// Determine appropriate ARIA attributes based on theme
+const toastRole = computed(() => {
+  return ["error", "warning"].includes(theme.value) ? "alert" : "status"
+})
 
-const progressDurationInt = computed(() => Math.floor(displayDurationInt.value - revealDurationInt.value / 2))
-const progressDuration = computed(() => progressDurationInt.value + "ms")
+const ariaLive = computed(() => {
+  return ["error", "warning"].includes(theme.value) ? "assertive" : "polite"
+})
 
-const removeToast = () => {
-  publicToastState.value = false
-  privateToastState.value = false
-}
+/*
+ * 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"
+})
 
-const updateToIdle = () => {
-  state.value = "idle"
-  removeToast()
-}
-const updateToEntering = async () => {
-  privateToastState.value = true
-  state.value = "entering"
-  await useSleep(revealDurationInt.value)
-  updateToVisible()
-}
-const updateToVisible = () => {
-  state.value = "visible"
-}
-const updateToHiding = async () => {
-  state.value = "hiding"
-  await useSleep(revealDurationInt.value)
-  updateToIdle()
+/*
+ * 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)
+  externalTriggerModel.value = false
+  privateDisplayToast.value = false
 }
 
 watch(
@@ -130,69 +221,35 @@ watch(
 )
 
 watch(
-  () => publicToastState.value,
+  () => externalTriggerModel.value,
   async (newValue, previousValue) => {
-    if (props.autoDismiss) {
-      privateToastState.value = newValue
-      await useSleep(displayDurationInt.value)
-      updateToIdle()
-      return
-    }
-
-    if (!previousValue && newValue && state.value === "idle") {
-      updateToEntering()
-    }
+    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(() => {
+          toastElement.value?.focus()
+        }, 100)
+      }
 
-    if (previousValue && !newValue && state.value == "visible") {
-      updateToHiding()
+      if (autoDismiss.value) {
+        await useSleep(duration.value)
+        setDismissToast()
+      }
     }
   }
 )
 </script>
 
 <style scoped lang="css">
-@keyframes slide-in {
-  from {
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slide-out {
-  from {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(20px);
-  }
-}
-
-@keyframes slide-in-out {
-  5% {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
-  }
-  95% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 @keyframes show {
   to {
     opacity: 1;
-    visibility: visible;
+    /* visibility: visible; */
     transform: translateY(0);
   }
 }
@@ -200,12 +257,12 @@ watch(
 @keyframes hide {
   0% {
     opacity: 1;
-    visibility: visible;
+    /* visibility: visible; */
     transform: translateY(0);
   }
   100% {
     opacity: 0;
-    visibility: hidden;
+    /* visibility: hidden; */
     transform: translateY(-30px);
   }
 }
@@ -222,39 +279,26 @@ watch(
   position: fixed;
   margin: 0;
   opacity: 0;
-  visibility: hidden;
+  /* visibility: hidden; */
 
   z-index: 100;
 
-  &.auto-dismiss {
-    /* first run slide-in, then slide-out after a delay */
-    animation: slide-in 400ms var(--spring-in-easing) forwards,
-      slide-out 400ms var(--spring-out-easing) forwards v-bind(displayDuration);
+  /* Focus styles for accessibility */
+  &:focus {
+    outline: 2px solid var(--colour-theme-3, #007acc);
+    outline-offset: 2px;
   }
 
-  &:not(&.auto-dismiss) {
-    &.show,
-    &.entering {
-      animation: show v-bind(revealDuration) var(--spring-easing) forwards;
-    }
-
-    &.visible {
-      /* if you want a steady state style, add here */
-      opacity: 1;
-      visibility: visible;
-      transform: translateY(0);
-    }
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
 
-    &.hide,
-    &.hiding {
-      animation: hide v-bind(revealDuration) var(--spring-easing) forwards;
-    }
+  &.show {
+    animation: show v-bind(revealDurationMs) var(--spring-easing) forwards;
   }
 
-  &:hover {
-    .display-toast-progress {
-      animation-play-state: paused;
-    }
+  &.hide {
+    animation: hide v-bind(revealDurationMs) var(--spring-easing) forwards;
   }
 
   &.full-width {
@@ -272,8 +316,9 @@ watch(
     }
 
     &.center {
-      left: 50%;
-      /* transform: translateX(-50%); */
+      inset-inline: 0;
+      margin-inline: auto;
+      width: max-content;
     }
   }
 
@@ -289,7 +334,6 @@ watch(
   /*
   * Styles for the display toast component
   */
-
   &.has-theme {
     padding-inline-start: 6px;
     background-color: var(--colour-theme-8);
@@ -369,7 +413,8 @@ watch(
             vertical-align: middle;
           }
 
-          &:hover {
+          &:hover,
+          &:focus-visible {
             box-shadow: none;
             background-color: var(--colour-theme-8);
             color: var(--colour-theme-0);
@@ -391,7 +436,7 @@ watch(
     transform-origin: right;
     background: linear-gradient(to right, var(--colour-theme-2), var(--colour-theme-8));
     border-radius: inherit;
-    animation: progress v-bind(progressDuration) linear forwards;
+    animation: progress v-bind(displayDurationMs) linear forwards;
   }
 }
 </style>

package/app/types/index.ts

@@ -2,3 +2,4 @@ export * from "../components/responsive-header/ResponsiveHeader.vue"
 export * from "../components/display-chip/DisplayChip.vue"
 export * from "../components/carousel-basic/CarouselBasic.vue"
 export * from "../components/image-galleries/SliderGallery.vue"
+export * from "../components/display-toast/DisplayToast.vue"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "6.1.33",
+  "version": "6.1.35",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",