62 lines
1.1 KiB
Vue
62 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface Props {
|
|
open?: boolean
|
|
class?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
open: false,
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
'update:open': [value: boolean]
|
|
}>()
|
|
|
|
const visible = ref(props.open)
|
|
|
|
watch(
|
|
() => props.open,
|
|
(val) => {
|
|
visible.value = val
|
|
},
|
|
)
|
|
|
|
function close() {
|
|
emit('update:open', false)
|
|
}
|
|
|
|
function onOverlayClick() {
|
|
close()
|
|
}
|
|
|
|
defineExpose({ close })
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport to="body">
|
|
<div
|
|
v-if="visible"
|
|
class="fixed inset-0 z-50 flex items-center justify-center"
|
|
@click.self="onOverlayClick"
|
|
>
|
|
<!-- Overlay -->
|
|
<div class="fixed inset-0 bg-black/60 backdrop-blur-sm" />
|
|
|
|
<!-- Content -->
|
|
<div
|
|
:class="
|
|
cn(
|
|
'relative z-50 w-full max-w-lg gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg',
|
|
props.class,
|
|
)
|
|
"
|
|
>
|
|
<slot :close="close" />
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|