91 lines
3.2 KiB
Vue
91 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from '@/components/ui/dialog'
|
|
import DialogCloseButton from "../DialogCloseButton/DialogCloseButton.vue"
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'
|
|
import { TooltipProvider } from '@/components/ui/tooltip'
|
|
import { Button } from '../ui/crm-button'
|
|
import { Ellipsis, Menu } from "lucide-vue-next"
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
title?: string
|
|
modelValue?: boolean
|
|
}>()
|
|
const emit = defineEmits(['update:modelValue', 'save', 'cancel', 'delete'])
|
|
|
|
// Dialog state
|
|
const isOpen = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => {
|
|
emit('update:modelValue', value)
|
|
}
|
|
})
|
|
|
|
const cancel = (event: Event | null) => {
|
|
if (!event) return
|
|
|
|
event.preventDefault()
|
|
event.returnValue = true
|
|
|
|
emit('cancel')
|
|
isOpen.value = false
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Dialog v-model:open="isOpen">
|
|
<DialogContent
|
|
class="sm:max-w-[min((100%-2rem),1152px)] grid-rows-[auto_minmax(0,1fr)_auto] h-[calc(100dvh-2rem)] gap-0 p-0 outline-none"
|
|
@escapeKeyDown="cancel" @interactOutside="cancel">
|
|
|
|
<DialogHeader class="p-4 md:p-6 lg:p-12 pb-0 md:pb-2 lg:pb-8 flex flex-row items-start gap-12">
|
|
|
|
<div class="flex flex-col grow">
|
|
<DialogTitle class="text-primary font-bold text-left">
|
|
<h1>{{ title }}</h1>
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
<slot name="description"></slot>
|
|
</DialogDescription>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<TooltipProvider v-if="$slots.buttons || $slots.ellipsisMenuItems">
|
|
<slot name="buttons"></slot>
|
|
|
|
<!-- Ellipsis menu -->
|
|
<DropdownMenu v-if="$slots.ellipsisMenuItems">
|
|
<DropdownMenuTrigger>
|
|
<Button variant="ghost" size="icon" class="">
|
|
<Ellipsis class="visible-mac" />
|
|
<Menu class="visible-pc" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
|
|
<DropdownMenuContent align="end">
|
|
<slot name="ellipsisMenuItems"></slot>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
<DialogClose as-child>
|
|
<DialogCloseButton />
|
|
</DialogClose>
|
|
</TooltipProvider>
|
|
</div>
|
|
|
|
|
|
</DialogHeader>
|
|
|
|
<div class="flex flex-row">
|
|
<div class="p-4 md:p-6 lg:p-12 pt-0! grow overflow-y-auto">
|
|
<slot name="content"></slot>
|
|
</div>
|
|
<aside class="w-120 p-4 md:p-6 lg:p-12 pt-0! flex flex-col gap-4" v-if="$slots.sidebar">
|
|
<slot name="sidebar"></slot>
|
|
</aside>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</template> |