srcdev-nuxt-components 6.1.40 → 6.1.42

package/app/components/display-prompt/DisplayPromptCore.vue

@@ -75,7 +75,7 @@ const props = defineProps({
 
 const slots = useSlots()
 const promptElementRef = useTemplateRef<HTMLElement>("promptElementRef")
-const parentComponentState = defineModel<boolean>("parentComponentState", { default: false })
+const parentComponentState = defineModel<boolean>({ default: false })
 const compopnentOpen = ref(true)
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 

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

@@ -49,11 +49,14 @@
  *   v-model="showToast"
  *   :config="{
  *     appearance: { theme: 'success', position: 'top', alignment: 'right' },
- *     behavior: { autoDismiss: true, duration: 3000 },
+ *     behavior: { autoDismiss: true, duration: 3000, returnFocusTo: buttonRef },
  *     content: { text: 'Operation completed successfully!' }
  *   }"
  * />
  *
+ * The returnFocusTo property accepts an HTMLElement or ComponentPublicInstance
+ * and will focus that element when the toast is dismissed for better accessibility.
+ *
  * Types exported for use in other components:
  * - DisplayToastConfig
  * - DisplayToastProps
@@ -88,6 +91,7 @@ export interface DisplayToastBehaviorConfig {
   autoDismiss?: boolean
   duration?: number
   revealDuration?: number
+  returnFocusTo?: HTMLElement | ComponentPublicInstance | null
 }
 
 export interface DisplayToastContentConfig {
@@ -157,6 +161,7 @@ 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 returnFocusTo = computed(() => props.config?.behavior?.returnFocusTo ?? null)
 const toastDisplayText = computed(() => props.config?.content?.text ?? "")
 const customIcon = computed(() => props.config?.content?.customIcon)
 
@@ -209,6 +214,23 @@ const displayDurationMs = computed(() => duration.value + "ms")
 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
 }
@@ -240,9 +262,16 @@ watch(
         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">
@@ -253,7 +282,7 @@ watch(
   }
 }
 
-@keyframes hide {
+@keyframes hideTop {
   0% {
     opacity: 1;
     transform: translateY(0);
@@ -264,6 +293,17 @@ watch(
   }
 }
 
+@keyframes hideBottom {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+}
+
 @keyframes progress {
   to {
     transform: scaleX(1);
@@ -306,18 +346,27 @@ watch(
 
   &.hide {
     @supports (animation-timing-function: linear(0, 1)) {
-      animation: hide v-bind(revealDurationMs) var(--spring-easing) forwards;
+      animation: hideTop v-bind(revealDurationMs) var(--spring-easing) forwards;
     }
 
     @supports not (animation-timing-function: linear(0, 1)) {
-      animation: hide calc(v-bind(revealDurationMs) / 2) linear forwards;
+      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;
 
@@ -447,9 +496,8 @@ watch(
 
   .display-toast-progress {
     position: absolute;
-    right: 8px;
-    bottom: 4px;
-    width: calc(100% - 16px);
+    inset-block-end: 4px;
+    inset-inline: 15px 8px;
     height: 3px;
     transform: scaleX(0);
     transform-origin: right;

package/package.json

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