srcdev-nuxt-components 6.1.40 → 6.1.41

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

@@ -240,9 +240,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 +260,7 @@ watch(
   }
 }
 
-@keyframes hide {
+@keyframes hideTop {
   0% {
     opacity: 1;
     transform: translateY(0);
@@ -264,6 +271,17 @@ watch(
   }
 }
 
+@keyframes hideBottom {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+}
+
 @keyframes progress {
   to {
     transform: scaleX(1);
@@ -306,18 +324,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 +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.40",
+  "version": "6.1.41",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",