From 6ea33aba68d0c43997f6ab2ac501f72330408b30 Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Mon, 7 Jul 2025 14:39:42 +0200 Subject: [PATCH 1/7] refactor(Toaster): improve animations --- src/theme/toaster.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/theme/toaster.ts b/src/theme/toaster.ts index cbc8f5c8ea..2b43a4aa76 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) focus:outline-none', - base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-100 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,translate,height] duration-200 ease-out' + viewport: 'fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none transition-all duration-400 ease-in-out', + base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-300 data-[state=closed]:animate-[toast-closed_300ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_300ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-400 ease-in-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]' + base: 'top-0 data-[state=open]:animate-[slide-in-from-top_350ms_cubic-bezier(0.25,0.46,0.45,0.94)]' } }, { 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]' + base: 'bottom-0 data-[state=open]:animate-[slide-in-from-bottom_350ms_cubic-bezier(0.25,0.46,0.45,0.94)]' } }, { swipeDirection: ['left', 'right'], From faae76e7965e1f9dfa4130c4bdc6d3073f72806d Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Mon, 7 Jul 2025 15:10:00 +0200 Subject: [PATCH 2/7] up --- src/theme/toaster.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/theme/toaster.ts b/src/theme/toaster.ts index 2b43a4aa76..dacc0920c2 100644 --- a/src/theme/toaster.ts +++ b/src/theme/toaster.ts @@ -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_350ms_cubic-bezier(0.25,0.46,0.45,0.94)]' + base: 'top-0 data-[state=open]:animate-[slide-in-from-top_280ms_cubic-bezier(0.4,0,0.6,1)]' } }, { position: ['bottom-left', 'bottom-center', 'bottom-right'], class: { viewport: 'bottom-4', - base: 'bottom-0 data-[state=open]:animate-[slide-in-from-bottom_350ms_cubic-bezier(0.25,0.46,0.45,0.94)]' + base: 'bottom-0 data-[state=open]:animate-[slide-in-from-bottom_280ms_cubic-bezier(0.4,0,0.6,1)]' } }, { swipeDirection: ['left', 'right'], From f81687724e3e07a3b3e09d688fb369261d8e78c0 Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Tue, 8 Jul 2025 10:52:07 +0200 Subject: [PATCH 3/7] up --- src/theme/toaster.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/toaster.ts b/src/theme/toaster.ts index dacc0920c2..80784e81af 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) focus:outline-none transition-all duration-400 ease-in-out', - base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-300 data-[state=closed]:animate-[toast-closed_300ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_300ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-400 ease-in-out' + base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:opacity-60 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-300 data-[state=closed]:animate-[toast-closed_300ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_300ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-400 ease-in-out' }, variants: { position: { From 8e82780df02438d0d82c03103154cc0559e75fec Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Tue, 8 Jul 2025 11:06:20 +0200 Subject: [PATCH 4/7] up --- src/runtime/components/Toaster.vue | 2 ++ src/theme/toaster.ts | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/runtime/components/Toaster.vue b/src/runtime/components/Toaster.vue index 4b04cb3288..682a23db4f 100644 --- a/src/runtime/components/Toaster.vue +++ b/src/runtime/components/Toaster.vue @@ -120,6 +120,8 @@ function getOffset(index: number) { :close="(toast.close as boolean)" :data-expanded="expanded" :data-front="!expanded && index === toasts.length - 1" + :data-second="!expanded && index === toasts.length - 2" + :data-third="!expanded && index === toasts.length - 3" :style="{ '--index': (index - toasts.length) + toasts.length, '--before': toasts.length - 1 - index, diff --git a/src/theme/toaster.ts b/src/theme/toaster.ts index 80784e81af..23643b45e5 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) focus:outline-none transition-all duration-400 ease-in-out', - base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:opacity-60 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-300 data-[state=closed]:animate-[toast-closed_300ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_300ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-400 ease-in-out' + base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:data-[second=false]:data-[third=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:data-[second=false]:data-[third=false]:opacity-0 data-[expanded=false]:data-[second=true]:opacity-100 data-[expanded=false]:data-[third=true]:opacity-100 data-[expanded=false]:data-[second=true]:max-h-(--front-height) data-[expanded=false]:data-[third=true]:max-h-(--front-height) data-[expanded=false]:data-[second=true]:overflow-hidden data-[expanded=false]:data-[third=true]:overflow-hidden data-[expanded=false]:data-[second=true]:*:opacity-0 data-[expanded=false]:data-[third=true]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-300 transition-[transform,translate,height,opacity,max-height] duration-400 ease-in-out data-[state=closed]:animate-[toast-closed_300ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_300ms_ease-in-out] data-[swipe=move]:transition-none' }, variants: { position: { From 08da06a78cc51b5f512540b23b7bc2a2851bfc63 Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Tue, 8 Jul 2025 12:03:20 +0200 Subject: [PATCH 5/7] up --- src/theme/toaster.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/toaster.ts b/src/theme/toaster.ts index 2b28c4e95c..3ef9eecd61 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) focus:outline-none transition-all duration-400 ease-in-out', - base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:data-[second=false]:data-[third=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:data-[second=false]:data-[third=false]:opacity-0 data-[expanded=false]:data-[second=true]:opacity-100 data-[expanded=false]:data-[third=true]:opacity-100 data-[expanded=false]:data-[second=true]:*:opacity-0 data-[expanded=false]:data-[third=true]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-300 transition-[transform,translate,height,opacity] duration-400 ease-in-out data-[state=closed]:animate-[toast-closed_300ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_300ms_ease-in-out] data-[swipe=move]:transition-none' + base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:overflow-hidden data-[expanded=false]:data-[front=false]:data-[second=false]:data-[third=false]:opacity-0 data-[expanded=false]:data-[second=true]:opacity-100 data-[expanded=false]:data-[third=true]:opacity-100 data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-200 transition-[transform,translate,height,opacity] duration-300 ease-out data-[state=closed]:animate-[toast-closed_200ms_ease-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-out] data-[swipe=move]:transition-none' }, variants: { position: { From 8a20b7118dd8d85d5e5699979f56428fcb09951c Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Tue, 8 Jul 2025 12:52:54 +0200 Subject: [PATCH 6/7] up --- src/theme/toaster.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/toaster.ts b/src/theme/toaster.ts index 3ef9eecd61..0801b4f9b0 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) focus:outline-none transition-all duration-400 ease-in-out', - base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:overflow-hidden data-[expanded=false]:data-[front=false]:data-[second=false]:data-[third=false]:opacity-0 data-[expanded=false]:data-[second=true]:opacity-100 data-[expanded=false]:data-[third=true]:opacity-100 data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-200 transition-[transform,translate,height,opacity] duration-300 ease-out data-[state=closed]:animate-[toast-closed_200ms_ease-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-out] data-[swipe=move]:transition-none' + base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:overflow-hidden data-[expanded=false]:data-[front=false]:data-[second=false]:data-[third=false]:opacity-0 data-[expanded=false]:data-[second=true]:opacity-60 data-[expanded=false]:data-[third=true]:opacity-30 data-[expanded=false]:data-[front=false]:*:invisible data-[expanded=false]:data-[front=false]:bg-default data-[front=false]:*:transition-opacity data-[front=false]:*:duration-200 transition-[transform,translate,opacity,height] duration-200 ease-out data-[state=closed]:animate-[toast-closed_200ms_ease-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-out] data-[swipe=move]:transition-none' }, variants: { position: { From f14314387ac1ca0782e81c85247c4f8328889c48 Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Tue, 8 Jul 2025 14:17:51 +0200 Subject: [PATCH 7/7] up --- src/theme/toaster.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/theme/toaster.ts b/src/theme/toaster.ts index 0801b4f9b0..3ac1889b3f 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) focus:outline-none transition-all duration-400 ease-in-out', - base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:overflow-hidden data-[expanded=false]:data-[front=false]:data-[second=false]:data-[third=false]:opacity-0 data-[expanded=false]:data-[second=true]:opacity-60 data-[expanded=false]:data-[third=true]:opacity-30 data-[expanded=false]:data-[front=false]:*:invisible data-[expanded=false]:data-[front=false]:bg-default data-[front=false]:*:transition-opacity data-[front=false]:*:duration-200 transition-[transform,translate,opacity,height] duration-200 ease-out data-[state=closed]:animate-[toast-closed_200ms_ease-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-out] data-[swipe=move]:transition-none' + viewport: 'fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none transition-all duration-500 ease-in-out', + base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:max-h-[calc(var(--front-height)+0.5rem)] data-[expanded=false]:data-[front=false]:min-h-[3rem] data-[expanded=false]:data-[front=false]:overflow-hidden data-[expanded=false]:data-[front=false]:data-[second=false]:data-[third=false]:opacity-0 data-[expanded=false]:data-[second=true]:opacity-60 data-[expanded=false]:data-[third=true]:opacity-30 data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-200 transition-[transform,translate,max-height,opacity] duration-200 ease-out data-[state=closed]:animate-[toast-closed_200ms_ease-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-out] data-[swipe=move]:transition-none' }, variants: { position: {