38 lines
1.1 KiB
Vue
38 lines
1.1 KiB
Vue
<script setup lang="ts">
|
||
defineProps<{ open: boolean; title?: string }>();
|
||
const emit = defineEmits<{ close: [] }>();
|
||
</script>
|
||
|
||
<template>
|
||
<Teleport to="body">
|
||
<div
|
||
v-if="open"
|
||
class="fixed inset-0 z-[900] flex items-center justify-center bg-black/40"
|
||
@click.self="emit('close')"
|
||
>
|
||
<div class="bg-surface max-w-[720px] min-w-[420px] rounded-md shadow-lg">
|
||
<header
|
||
v-if="title"
|
||
class="border-border flex items-center justify-between border-b px-5 py-3.5 text-[15px]"
|
||
>
|
||
<span>{{ title }}</span>
|
||
<button
|
||
type="button"
|
||
class="text-muted hover:text-primary border-0 bg-transparent text-[20px] transition-colors"
|
||
:aria-label="$t('common.cancel')"
|
||
@click="emit('close')"
|
||
>
|
||
×
|
||
</button>
|
||
</header>
|
||
<div class="p-5">
|
||
<slot />
|
||
</div>
|
||
<footer v-if="$slots.footer" class="border-border border-t px-5 py-3 text-right">
|
||
<slot name="footer" />
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
</Teleport>
|
||
</template>
|