6ad99d45f2
* fix(style): formatting inconsistencies across codebase - Remove trailing semicolons from TypeScript imports - Fix Vue template indentation and line breaks - Standardize component attribute formatting - Remove unnecessary empty lines - Reorder import statements for consistency * chore: update import path and add editorconfig Update SidebarNavLink import path to match new component structure and add standard editorconfig for consistent code formatting
61 lines
1.8 KiB
Vue
61 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
|
|
import type { HTMLAttributes } from 'vue'
|
|
import { X } from 'lucide-vue-next'
|
|
import {
|
|
DialogClose,
|
|
DialogContent,
|
|
|
|
DialogOverlay,
|
|
DialogPortal,
|
|
useForwardPropsEmits,
|
|
} from 'radix-vue'
|
|
import { computed } from 'vue'
|
|
import { cn } from '~/lib/utils'
|
|
|
|
const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
|
|
const emits = defineEmits<DialogContentEmits>()
|
|
|
|
const delegatedProps = computed(() => {
|
|
const { class: _, ...delegated } = props
|
|
|
|
return delegated
|
|
})
|
|
|
|
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
|
</script>
|
|
|
|
<template>
|
|
<DialogPortal>
|
|
<DialogOverlay
|
|
class="fixed inset-0 z-50 grid data-[state=closed]:animate-out data-[state=open]:animate-in place-items-center overflow-y-auto bg-black/80 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0"
|
|
>
|
|
<DialogContent
|
|
:class="
|
|
cn(
|
|
'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
|
|
props.class,
|
|
)
|
|
"
|
|
v-bind="forwarded"
|
|
@pointer-down-outside="(event) => {
|
|
const originalEvent = event.detail.originalEvent;
|
|
const target = originalEvent.target as HTMLElement;
|
|
if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
|
|
event.preventDefault();
|
|
}
|
|
}"
|
|
>
|
|
<slot />
|
|
|
|
<DialogClose
|
|
class="absolute right-3 top-3 rounded-md p-0.5 transition-colors hover:bg-secondary"
|
|
>
|
|
<X class="h-4 w-4" />
|
|
<span class="sr-only">Close</span>
|
|
</DialogClose>
|
|
</DialogContent>
|
|
</DialogOverlay>
|
|
</DialogPortal>
|
|
</template>
|