43 lines
1.2 KiB
Vue
43 lines
1.2 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<div
|
|
v-if="open"
|
|
class="fixed inset-0 z-50 flex items-end justify-center bg-black/50 p-0 sm:items-center sm:p-4"
|
|
@click.self="emit('close')"
|
|
>
|
|
<div
|
|
class="max-h-[90dvh] w-full max-w-app overflow-y-auto rounded-t-2xl border border-border bg-surface p-4 shadow-xl sm:rounded-2xl"
|
|
role="dialog"
|
|
>
|
|
<div class="mb-4 flex items-start justify-between gap-3">
|
|
<div>
|
|
<h2 v-if="title" class="text-lg font-bold text-text">{{ title }}</h2>
|
|
<p v-if="subtitle" class="mt-0.5 text-sm text-muted">{{ subtitle }}</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="rounded-lg px-2 py-1 text-muted hover:bg-surface-3"
|
|
aria-label="بستن"
|
|
@click="emit('close')"
|
|
>
|
|
<AppIcon name="x" size="md" />
|
|
</button>
|
|
</div>
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import AppIcon from '@/components/ui/AppIcon.vue';
|
|
|
|
defineProps<{
|
|
open: boolean;
|
|
title?: string;
|
|
subtitle?: string;
|
|
}>();
|
|
|
|
const emit = defineEmits<{ close: [] }>();
|
|
</script>
|