diff --git a/src/runtime/components/Toaster.vue b/src/runtime/components/Toaster.vue index 4b04cb32..682a23db 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 80784e81..23643b45 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: {