srcdev-nuxt-components 6.1.39 → 6.1.41

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

@@ -3,6 +3,8 @@
     class="display-prompt-core"
     :class="[{ closed: !compopnentOpen }]"
     :data-test-id="`display-prompt-core-${theme}`"
+    ref="promptElementRef"
+    tabindex="0"
   >
     <div class="display-prompt-wrapper" :data-theme="theme" :class="[elementClasses]" data-test-id="display-prompt">
       <div class="display-prompt-inner">
@@ -11,7 +13,7 @@
             <Icon :name="displayPromptIcons[theme] ?? 'akar-icons:circle-alert'" class="icon" :color="iconColor" />
           </slot>
         </div>
-        <div class="display-prompt-content">
+        <div class="display-prompt-content" :aria-live="useAutoFocus ? 'polite' : undefined">
           <p class="title" data-test-id="display-prompt-title">
             <slot name="title"></slot>
           </p>
@@ -65,10 +67,15 @@ const props = defineProps({
       secondary: "akar-icons:info",
     }),
   },
+  useAutoFocus: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const slots = useSlots()
-const parentComponentState = defineModel<boolean>("parentComponentState", { default: false })
+const promptElementRef = useTemplateRef<HTMLElement>("promptElementRef")
+const parentComponentState = defineModel<boolean>({ default: false })
 const compopnentOpen = ref(true)
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
@@ -80,6 +87,12 @@ const updateComponentState = () => {
 
   compopnentOpen.value = false
 }
+
+onMounted(async () => {
+  if (props.useAutoFocus && promptElementRef.value) {
+    promptElementRef.value.focus()
+  }
+})
 </script>
 
 <style lang="css">

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

@@ -2,7 +2,7 @@
   <Teleport to="body">
     <div
       v-if="privateDisplayToast"
-      ref="toastElement"
+      ref="toastElementRef"
       class="display-toast"
       :class="[
         elementClasses,
@@ -28,7 +28,7 @@
           </slot>
         </div>
         <div class="toast-message" :id="'toast-message-' + toastId">{{ toastDisplayText }}</div>
-        <div class="toast-action">
+        <div v-if="!autoDismiss" class="toast-action">
           <button @click.prevent="setDismissToast()">
             <Icon name="material-symbols:close" class="icon" />
             <span class="sr-only">Close</span>
@@ -176,7 +176,7 @@ const positionClasses = computed(() => {
  * Accessibility setup
  */
 const toastId = useId()
-const toastElement = ref<HTMLElement>()
+const toastElementRef = useTemplateRef<HTMLElement>("toastElementRef")
 
 // Determine appropriate ARIA attributes based on theme
 const toastRole = computed(() => {
@@ -232,7 +232,7 @@ watch(
         await nextTick()
         // Wait for animation to start before focusing
         setTimeout(() => {
-          toastElement.value?.focus()
+          toastElementRef.value?.focus()
         }, 100)
       }
 
@@ -240,33 +240,48 @@ 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">
 @keyframes show {
   to {
     opacity: 1;
-    /* visibility: visible; */
     transform: translateY(0);
   }
 }
 
-@keyframes hide {
+@keyframes hideTop {
   0% {
     opacity: 1;
-    /* visibility: visible; */
     transform: translateY(0);
   }
   100% {
     opacity: 0;
-    /* visibility: hidden; */
     transform: translateY(-30px);
   }
 }
 
+@keyframes hideBottom {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+}
+
 @keyframes progress {
   to {
     transform: scaleX(1);
@@ -274,12 +289,16 @@ watch(
 }
 
 .display-toast {
+  --_toast-gutter: 12px;
+  @media (width >= 600px) {
+    --_toast-gutter: 24px;
+  }
+
   display: block;
   overflow: hidden;
   position: fixed;
   margin: 0;
   opacity: 0;
-  /* visibility: hidden; */
 
   z-index: 100;
 
@@ -299,52 +318,67 @@ watch(
     }
 
     @supports not (animation-timing-function: linear(0, 1)) {
-      animation: show v-bind(revealDurationMs) linear forwards;
+      animation: show calc(v-bind(revealDurationMs) / 2) linear forwards;
     }
   }
 
   &.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 v-bind(revealDurationMs) linear forwards;
+      animation: hideTop calc(v-bind(revealDurationMs) / 2) linear forwards;
     }
-  }
 
-  &.full-width {
-    left: 24px;
-    right: 24px;
+    &.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;
+      }
+    }
   }
 
-  &:not(.full-width) {
+  /*
+  * Default is centre for smaller screens
+  */
+  inset-inline: var(--_toast-gutter);
+  margin-inline: auto;
+
+  @media (width >= 600px) {
     &.left {
-      left: 24px;
+      inset-inline-start: var(--_toast-gutter);
+      inset-inline-end: unset;
     }
 
     &.right {
-      right: 24px;
+      inset-inline-end: var(--_toast-gutter);
+      inset-inline-start: unset;
     }
 
     &.center {
-      inset-inline: 0;
-      margin-inline: auto;
-      width: max-content;
+      &:not(.full-width) {
+        inset-inline: 0;
+        margin-inline: auto;
+        width: max-content;
+      }
     }
   }
 
   &.top {
-    top: 24px;
+    inset-block-start: var(--_toast-gutter);
     transform: translateY(-30px);
   }
   &.bottom {
-    bottom: 24px;
+    inset-block-end: var(--_toast-gutter);
     transform: translateY(30px);
   }
 
   /*
-  * Styles for the display toast component
+  * Styles for the display toast component if slot is empty
   */
   &.has-theme {
     padding-inline-start: 6px;
@@ -440,9 +474,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.39",
+  "version": "6.1.41",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",