blob: efe98daf1a9a094a92781454324adcac2dbaec47 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<script lang="ts">
import type { Snippet } from 'svelte';
import { Button } from '$lib/components/ui/button';
import * as Card from '$lib/components/ui/card';
interface Props {
title: string;
onClose: () => void;
wide?: boolean;
children?: Snippet;
}
let { title, onClose, wide = false, children }: Props = $props();
function onBackdrop(e: MouseEvent) {
if (e.target === e.currentTarget) onClose();
}
function onKeydown(e: KeyboardEvent) {
if (e.key === 'Escape') onClose();
}
let container: HTMLDivElement;
$effect(() => {
container?.focus();
});
</script>
<div
class="fixed inset-0 bg-black/40 grid place-items-center z-50 p-4"
onclick={onBackdrop}
role="presentation"
onkeydown={onKeydown}
tabindex="-1"
bind:this={container}
>
<Card.Root class="w-[min(760px,100%)] max-h-[88vh] overflow-auto p-4">
<div class="flex justify-between items-center gap-2">
<h2 class="text-lg font-semibold">{title}</h2>
<Button variant="ghost" size="icon-sm" onclick={onClose} aria-label="关闭">✕</Button>
</div>
<div class="mt-2">
{@render children?.()}
</div>
</Card.Root>
</div>
|
