@ -3,7 +3,7 @@ import type { ExtendedModalApi, ModalProps } from './modal';
import { computed , nextTick , ref , watch } from 'vue' ;
import { computed , nextTick , ref , watch } from 'vue' ;
import { usePriorityValue } from '@vben-core/composables' ;
import { useIsMobile , use PriorityValue } from '@vben-core/composables' ;
import { Expand , Info , Shrink } from '@vben-core/icons' ;
import { Expand , Info , Shrink } from '@vben-core/icons' ;
import {
import {
Dialog ,
Dialog ,
@ -46,6 +46,7 @@ const dialogRef = ref();
const headerRef = ref ( ) ;
const headerRef = ref ( ) ;
const footerRef = ref ( ) ;
const footerRef = ref ( ) ;
const { isMobile } = useIsMobile ( ) ;
/ / c o n s t { h e i g h t : h e a d e r H e i g h t } = u s e E l e m e n t S i z e ( h e a d e r R e f ) ;
/ / c o n s t { h e i g h t : h e a d e r H e i g h t } = u s e E l e m e n t S i z e ( h e a d e r R e f ) ;
/ / c o n s t { h e i g h t : f o o t e r H e i g h t } = u s e E l e m e n t S i z e ( f o o t e r R e f ) ;
/ / c o n s t { h e i g h t : f o o t e r H e i g h t } = u s e E l e m e n t S i z e ( f o o t e r R e f ) ;
const state = props . modalApi ? . useStore ? . ( ) ;
const state = props . modalApi ? . useStore ? . ( ) ;
@ -66,7 +67,11 @@ const draggable = usePriorityValue('draggable', props, state);
const fullscreenButton = usePriorityValue ( 'fullscreenButton' , props , state ) ;
const fullscreenButton = usePriorityValue ( 'fullscreenButton' , props , state ) ;
const closeOnClickModal = usePriorityValue ( 'closeOnClickModal' , props , state ) ;
const closeOnClickModal = usePriorityValue ( 'closeOnClickModal' , props , state ) ;
const closeOnPressEscape = usePriorityValue ( 'closeOnPressEscape' , props , state ) ;
const closeOnPressEscape = usePriorityValue ( 'closeOnPressEscape' , props , state ) ;
const shouldDraggable = computed ( ( ) => draggable . value && ! fullscreen . value ) ;
const shouldFullscreen = computed ( ( ) => fullscreen . value || isMobile . value ) ;
const shouldDraggable = computed (
( ) => draggable . value && ! shouldFullscreen . value ,
) ;
const { dragging } = useModalDraggable ( dialogRef , headerRef , shouldDraggable ) ;
const { dragging } = useModalDraggable ( dialogRef , headerRef , shouldDraggable ) ;
@ -114,6 +119,14 @@ function escapeKeyDown(e: KeyboardEvent) {
e . preventDefault ( ) ;
e . preventDefault ( ) ;
}
}
}
}
/ / p o i n t e r - d o w n - o u t s i d e
function pointerDownOutside ( e : Event ) {
const target = e . target as HTMLElement ;
const isDismissableModal = ! ! target ? . dataset . dismissableModal ;
if ( ! closeOnClickModal . value || ! isDismissableModal ) {
e . preventDefault ( ) ;
}
}
< / script >
< / script >
< template >
< template >
< Dialog
< Dialog
@ -133,8 +146,8 @@ function escapeKeyDown(e: KeyboardEvent) {
props . class ,
props . class ,
{
{
'left-0 top-0 size-full max-h-full !translate-x-0 !translate-y-0' :
'left-0 top-0 size-full max-h-full !translate-x-0 !translate-y-0' :
f ullscreen,
'top-1/2 -translate-y-1/2' : centered && ! f ullscreen,
shouldF ullscreen,
'top-1/2 -translate-y-1/2' : centered && ! shouldF ullscreen,
'duration-300' : ! dragging ,
'duration-300' : ! dragging ,
} ,
} ,
)
)
@ -143,6 +156,7 @@ function escapeKeyDown(e: KeyboardEvent) {
close - class = "top-4"
close - class = "top-4"
@ escape - key - down = "escapeKeyDown"
@ escape - key - down = "escapeKeyDown"
@ interact - outside = "interactOutside"
@ interact - outside = "interactOutside"
@ pointer - down - outside = "pointerDownOutside"
>
>
< DialogHeader
< DialogHeader
ref = "headerRef"
ref = "headerRef"
@ -156,7 +170,7 @@ function escapeKeyDown(e: KeyboardEvent) {
)
)
"
"
>
>
< DialogTitle v-if ="title" >
< DialogTitle v-if ="title" class="text-left" >
< slot name = "title" >
< slot name = "title" >
{ { title } }
{ { title } }
@ -191,7 +205,7 @@ function escapeKeyDown(e: KeyboardEvent) {
< VbenIconButton
< VbenIconButton
v - if = "fullscreenButton"
v - if = "fullscreenButton"
class = "hover:bg-accent hover:text-accent-foreground text-foreground/80 flex-center absolute right-10 top-4 size-6 rounded-full px-1 text-lg opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
class = "hover:bg-accent hover:text-accent-foreground text-foreground/80 flex-center absolute right-10 top-4 hidden size-6 rounded-full px-1 text-lg opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none sm:block "
@ click = "handleFullscreen"
@ click = "handleFullscreen"
>
>
< Shrink v -if = " fullscreen " class = "size-3.5" / >
< Shrink v -if = " fullscreen " class = "size-3.5" / >
@ -201,22 +215,22 @@ function escapeKeyDown(e: KeyboardEvent) {
< DialogFooter
< DialogFooter
v - if = "showFooter"
v - if = "showFooter"
ref = "footerRef"
ref = "footerRef"
: class = "cn('items-center border-t p-2', props.footerClass)"
: class = "
cn (
'flex-row items-center justify-end border-t p-2' ,
props . footerClass ,
)
"
>
>
< slot name = "prepend-footer" > < / slot >
< slot name = "prepend-footer" > < / slot >
< slot name = "footer" >
< slot name = "footer" >
< VbenButton
size = "sm"
variant = "ghost"
@ click = "() => modalApi?.onCancel()"
>
< VbenButton variant = "ghost" @ click = "() => modalApi?.onCancel()" >
< slot name = "cancelText" >
< slot name = "cancelText" >
{ { cancelText } }
{ { cancelText } }
< / slot >
< / slot >
< / VbenButton >
< / VbenButton >
< VbenButton
< VbenButton
: loading = "confirmLoading"
: loading = "confirmLoading"
size = "sm"
@ click = "() => modalApi?.onConfirm()"
@ click = "() => modalApi?.onConfirm()"
>
>
< slot name = "confirmText" >
< slot name = "confirmText" >