svelte-toolkit/sui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dialog: expose frozen, disabled, loading as bindable props

Browse Source
This commit is contained in:
Elijah Duffy
2025-08-27 16:45:41 -07:00
parent 9d9b40d21b
commit 647b3401a7
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/lib/Dialog.svelte
View File

@@ -83,6 +83,9 @@
controls?: Snippet | DialogControlOpts; controls?: Snippet | DialogControlOpts;
onopen?: (dialog: DialogAPI) => void; onopen?: (dialog: DialogAPI) => void;
onclose?: (dialog: DialogAPI) => void; onclose?: (dialog: DialogAPI) => void;
loading?: boolean;
frozen?: boolean;
disabled?: boolean;
} }
let { let {
@@ -94,14 +97,14 @@
children, children,
controls, controls,
onopen, onopen,
onclose onclose,
loading = $bindable(false),
frozen = $bindable(false),
disabled = $bindable(false)
}: Props = $props(); }: Props = $props();
let dialogContainer = $state<HTMLDivElement | null>(null); let dialogContainer = $state<HTMLDivElement | null>(null);
let error = $state<ErrorMessage | null>(null); let error = $state<ErrorMessage | null>(null);
let loading = $state(false);
let frozen = $state(false);
let disabled = $state(false);
// disable window scroll when dialog is open // disable window scroll when dialog is open
$effect(() => { $effect(() => {
@@ -148,10 +151,11 @@
transition:fade={{ duration: 150 }} transition:fade={{ duration: 150 }}
onclick={(e) => { onclick={(e) => {
const target = e.target as HTMLElement; const target = e.target as HTMLElement;
if (open && !dialogContainer?.contains(target) && target !== dialogContainer) open = false; if (open && !frozen && !dialogContainer?.contains(target) && target !== dialogContainer)
open = false;
}} }}
onkeydown={(e) => { onkeydown={(e) => {
if (e.key === 'Escape') { if (e.key === 'Escape' && !frozen) {
open = false; open = false;
} }
}} }}