Admin
32 lines
1.2 KiB
TypeScript
32 lines
1.2 KiB
TypeScript
import { createSharedComposable, useMediaQuery } from '@vueuse/core'
|
|
|
|
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
|
|
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer'
|
|
|
|
const useSharedModal = createSharedComposable(() => {
|
|
const isDesktop = useMediaQuery('(min-width: 768px)')
|
|
|
|
const Modal = computed(() => ({
|
|
Root: isDesktop.value ? Dialog : Drawer,
|
|
Trigger: isDesktop.value ? DialogTrigger : DrawerTrigger,
|
|
Content: isDesktop.value ? DialogContent : DrawerContent,
|
|
Header: isDesktop.value ? DialogHeader : DrawerHeader,
|
|
Title: isDesktop.value ? DialogTitle : DrawerTitle,
|
|
Description: isDesktop.value ? DialogDescription : DrawerDescription,
|
|
Footer: isDesktop.value ? DialogFooter : DrawerFooter,
|
|
Close: isDesktop.value ? DialogClose : DrawerClose,
|
|
}))
|
|
|
|
const contentClass = computed(() => (isDesktop.value ? '' : 'px-2 pb-8 *:px-4'))
|
|
|
|
return {
|
|
isDesktop,
|
|
Modal,
|
|
contentClass,
|
|
}
|
|
})
|
|
|
|
export function useModal() {
|
|
return useSharedModal()
|
|
}
|