From c3ed18beb64369fe8a5e0ffee0b749f40c9fc736 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 11 Apr 2024 16:03:50 +0200
Subject: [PATCH] fix(Toaster): wrong leave animation when collapsed

---
 src/templates.ts     | 8 ++++----
 src/theme/toaster.ts | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/templates.ts b/src/templates.ts
index 2f8408bf..d9e8a594 100644
--- a/src/templates.ts
+++ b/src/templates.ts
@@ -35,13 +35,13 @@ export function addTemplates (options: ModuleOptions, nuxt: Nuxt) {
     to { height: var(--radix-collapsible-content-height); }
   }
 
-  @keyframes toast-slide-down {
+  @keyframes toast-collapsed-closed {
     from { transform: var(--transform); }
-    to { transform: translateY(calc((var(--offset) - var(--height)) * -1px)); }
+    to { transform: translateY(calc((var(--before) - var(--height)) * var(--gap))) scale(var(--scale)); }
   }
-  @keyframes toast-slide-up {
+  @keyframes toast-closed {
     from { transform: var(--transform); }
-    to { transform: translateY(calc((var(--offset) - var(--height)) * 1px)); }
+    to { transform: translateY(calc((var(--offset) - var(--height)) * var(--translate-factor))); }
   }
   @keyframes toast-slide-left {
     from { transform: translateX(0) translateY(var(--translate)); }
diff --git a/src/theme/toaster.ts b/src/theme/toaster.ts
index 1d163d18..fc3424a0 100644
--- a/src/theme/toaster.ts
+++ b/src/theme/toaster.ts
@@ -1,7 +1,7 @@
 export default {
   slots: {
     viewport: 'fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height]',
-    base: 'absolute inset-x-0 z-[--index] transform-[--transform] data-[expanded=false]:data-[front=false]:h-[--front-height] data-[expanded=false]:data-[front=false]:*:invisible data-[swipe=move]:transition-none transition-[transform,height] will-change-[transform,height] duration-200 ease-out'
+    base: 'absolute inset-x-0 z-[--index] transform-[--transform] data-[expanded=false]:data-[front=false]:h-[--front-height] data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,height] will-change-[transform,height] duration-200 ease-out'
   },
   variants: {
     position: {
@@ -35,13 +35,13 @@ export default {
     position: ['top-left', 'top-center', 'top-right'],
     class: {
       viewport: 'top-4',
-      base: 'top-0 data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[toast-slide-up_200ms_ease-in-out]'
+      base: 'top-0 data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out]'
     }
   }, {
     position: ['bottom-left', 'bottom-center', 'bottom-right'],
     class: {
       viewport: 'bottom-4',
-      base: 'bottom-0 data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[toast-slide-down_200ms_ease-in-out]'
+      base: 'bottom-0 data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out]'
     }
   }, {
     swipeDirection: ['left', 'right'],