Two month of work
This commit is contained in:
@@ -0,0 +1,91 @@
|
||||
<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">
|
||||
<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>
|
||||
Reference in New Issue
Block a user