63 lines
2.2 KiB
Vue
63 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { XIcon } from '@lucide/vue'
|
|
import type { HTMLAttributes } from 'vue'
|
|
import { inject, ref, watch } from 'vue'
|
|
import { useScrollLock } from '@vueuse/core'
|
|
import { cn } from '@/lib/utils'
|
|
import { Button } from '@/components/ui/button'
|
|
import { useFocusTrap } from '@/lib/use-focus-trap'
|
|
import { useDismissableLayer } from '@/lib/use-dismissable-layer'
|
|
import { DialogContextKey } from './context'
|
|
import DialogOverlay from './DialogOverlay.vue'
|
|
import DialogClose from './DialogClose.vue'
|
|
|
|
defineOptions({ inheritAttrs: false })
|
|
|
|
const props = withDefaults(
|
|
defineProps<{ class?: HTMLAttributes['class'], showCloseButton?: boolean }>(),
|
|
{ showCloseButton: true },
|
|
)
|
|
|
|
const context = inject(DialogContextKey)!
|
|
const contentRef = ref<HTMLElement | null>(null)
|
|
|
|
useFocusTrap(contentRef, context.open)
|
|
useDismissableLayer(contentRef, context.open, {
|
|
onDismiss: () => { context.open.value = false },
|
|
})
|
|
|
|
const isLocked = useScrollLock(document.body)
|
|
watch(context.open, (value) => { isLocked.value = value }, { immediate: true })
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport to="body">
|
|
<DialogOverlay />
|
|
<Transition
|
|
enter-active-class="animate-in fade-in-0 zoom-in-95 animation-duration-100"
|
|
leave-active-class="animate-out fade-out-0 zoom-out-95 animation-duration-100"
|
|
>
|
|
<div
|
|
v-if="context.open.value"
|
|
ref="contentRef"
|
|
data-slot="dialog-content"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
:aria-labelledby="context.titleId"
|
|
:aria-describedby="context.descriptionId"
|
|
tabindex="-1"
|
|
v-bind="$attrs"
|
|
:class="cn('bg-popover text-popover-foreground border border-border grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm shadow-lg sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none', props.class)"
|
|
>
|
|
<slot />
|
|
|
|
<DialogClose v-if="showCloseButton" as-child>
|
|
<Button variant="secondary" class="absolute top-2 right-2 size-7 bg-transparent text-foreground hover:bg-black/10" size="icon">
|
|
<XIcon class="size-3.5" />
|
|
<span class="sr-only">Close</span>
|
|
</Button>
|
|
</DialogClose>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|