From 0daac5bafb756c3a2dfaf2bf166c30c0eb476e08 Mon Sep 17 00:00:00 2001 From: Sandro Circi Date: Fri, 15 Nov 2024 11:59:08 +0100 Subject: [PATCH] fix(Toast): unreachable behind overlays (#2650) Co-authored-by: Benjamin Canac --- src/runtime/components/Modal.vue | 8 +++++++- src/runtime/components/Slideover.vue | 8 +++++++- src/theme/toaster.ts | 2 +- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/runtime/components/Modal.vue b/src/runtime/components/Modal.vue index d6579ca8..21a61457 100644 --- a/src/runtime/components/Modal.vue +++ b/src/runtime/components/Modal.vue @@ -101,7 +101,13 @@ const contentEvents = computed(() => { } } - return {} + return { + interactOutside: (e: Event) => { + if (e.target instanceof Element && e.target.closest('[data-sonner-toaster]')) { + return e.preventDefault() + } + } + } }) const appConfig = useAppConfig() diff --git a/src/runtime/components/Slideover.vue b/src/runtime/components/Slideover.vue index 28a40dfc..382cc4db 100644 --- a/src/runtime/components/Slideover.vue +++ b/src/runtime/components/Slideover.vue @@ -100,7 +100,13 @@ const contentEvents = computed(() => { } } - return {} + return { + interactOutside: (e: Event) => { + if (e.target instanceof Element && e.target.closest('[data-sonner-toaster]')) { + return e.preventDefault() + } + } + } }) const appConfig = useAppConfig() diff --git a/src/theme/toaster.ts b/src/theme/toaster.ts index e41f6072..83ac41cb 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-[var(--height)] focus:outline-none', - base: 'absolute inset-x-0 z-[var(--index)] transform-[var(--transform)] data-[expanded=false]:data-[front=false]:h-[var(--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,translate,height] duration-200 ease-out' + base: 'pointer-events-auto absolute inset-x-0 z-[var(--index)] transform-[var(--transform)] data-[expanded=false]:data-[front=false]:h-[var(--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,translate,height] duration-200 ease-out' }, variants: { position: {