arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Toast): unreachable behind overlays (#2650)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
2024-11-15 11:59:08 +01:00
committed by GitHub
parent 756f791a1a
commit 0daac5bafb
3 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/runtime/components/Modal.vue
View File

@@ -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()

8
src/runtime/components/Slideover.vue
View File

@@ -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()

2
src/theme/toaster.ts
View File

@@ -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: {