dialog: add dialog api & detailed controls config, fix outer click

src/lib/Dialog.svelte

@@ -1,11 +1,61 @@
+<script lang="ts" module>
+	/**
+	 * Defines the features available in dialog event callbacks.
+	 */
+	export interface DialogAPI {
+		/** shows an error message at the top of the dialog */
+		error: (message: ErrorMessage | null) => void;
+		/** closes the dialog */
+		close: () => void;
+		/** opens the dialog */
+		open: () => void;
+		/** returns true if the dialog is open */
+		isOpen: () => boolean;
+		/** if default controls are used, sets the submit button loading state */
+		loading: () => void;
+		/** if default controls are used, sets the submit button loaded state */
+		loaded: () => void;
+		/** if default controls are used, returns true if the submit button is in loading state */
+		isLoading: () => boolean;
+		/** if default controls are used, disables submission and exiting */
+		freeze: () => void;
+		/** if default controls are used, enables submission and exiting */
+		unfreeze: () => void;
+		/** if the default controls are used, returns true if the dialog is frozen */
+		isFrozen: () => boolean;
+	}
+
+	/**
+	 * Configures the default dialog controls.
+	 */
+	export type DialogControlOpts = {
+		cancel?: {
+			label?: string;
+			class?: ClassValue;
+			action?: (dialog: DialogAPI) => void;
+		};
+		ok?: {
+			label?: string;
+			class?: ClassValue;
+			action?: (dialog: DialogAPI) => void;
+		};
+		close?: {
+			class?: ClassValue;
+			action?: (dialog: DialogAPI) => void;
+		};
+	};
+</script>
+
 <script lang="ts">
 	import { Portal } from '@jsrob/svelte-portal';
-	import { onMount, type Snippet } from 'svelte';
+	import { type Snippet } from 'svelte';
 	import type { ClassValue } from 'svelte/elements';
 	import { fade } from 'svelte/transition';
 	import { flyAndScale } from './transition';
 	import Button from './Button.svelte';
 	import { X } from 'phosphor-svelte';
+	import { ErrorMessage } from './error';
+	import ErrorBox from './ErrorBox.svelte';
 
 	interface Props {
 		open?: boolean;
@@ -14,8 +64,9 @@
 		size?: 'sm' | 'md' | 'lg' | 'max';
 		class?: ClassValue;
 		children?: Snippet;
-		controls?: Snippet;
-		onsubmit?: () => void;
+		controls?: Snippet | DialogControlOpts;
+		onopen?: (dialog: DialogAPI) => void;
+		onclose?: (dialog: DialogAPI) => void;
 	}
 
 	let {
@@ -26,42 +77,38 @@
 		class: classValue,
 		children,
 		controls,
-		onsubmit
+		onopen,
+		onclose
 	}: Props = $props();
 
 	let dialogContainer = $state<HTMLDivElement | null>(null);
-	let openSince = $state<Date | undefined>(undefined);
+	let error = $state<ErrorMessage | null>(null);
+	let loading = $state(false);
+	let frozen = $state(false);
 
+	// disable window scroll when dialog is open
 	$effect(() => {
 		if (open) {
 			document.body.style.overflow = 'hidden';
-			openSince = new Date();
+			onopen?.(dialogAPI);
 		} else {
 			document.body.style.overflow = '';
-			openSince = undefined;
+			onclose?.(dialogAPI);
 		}
 	});
 
-	onMount(() => {
-		window.addEventListener('keydown', (e) => {
-			if (e.key === 'Escape' && open) {
-				open = false;
-			}
-		});
-
-		window.addEventListener('click', (e) => {
-			if (open && dialogContainer) {
-				if (openSince && new Date().getTime() - openSince.getTime() < 300) {
-					return; // Ignore clicks immediately after opening
-				}
-
-				const target = e.target as HTMLElement;
-				if (open && !dialogContainer.contains(target) && target !== dialogContainer) {
-					open = false;
-				}
-			}
-		});
-	});
+	const dialogAPI: DialogAPI = {
+		error: (message) => (error = message),
+		close: () => (open = false),
+		open: () => (open = true),
+		isOpen: () => open,
+		loading: () => (loading = true),
+		loaded: () => (loading = false),
+		isLoading: () => loading,
+		freeze: () => (frozen = true),
+		unfreeze: () => (frozen = false),
+		isFrozen: () => frozen
+	};
 </script>
 
 <Portal target="body">
@@ -77,6 +124,17 @@
 			classValue
 		]}
 		transition:fade={{ duration: 150 }}
+		onclick={(e) => {
+			const target = e.target as HTMLElement;
+			if (open && !dialogContainer?.contains(target) && target !== dialogContainer) open = false;
+		}}
+		onkeydown={(e) => {
+			if (e.key === 'Escape') {
+				open = false;
+			}
+		}}
+		role="dialog"
+		tabindex="-1"
 	>
 		<div
 			bind:this={dialogContainer}
@@ -94,6 +152,11 @@
 			}}
 		>
 			<h2 class="pointer-events-none mb-2 text-lg font-medium text-black select-none">{title}</h2>
+
+			{#if error}
+				<ErrorBox {error} />
+			{/if}
+
 			{#if description}
 				<p class="mb-3 leading-normal text-zinc-600">
 					{description}
@@ -103,15 +166,44 @@
 			{#if children}{@render children()}{:else}Dialog is empty{/if}
 
 			<div class="mt-6 flex justify-end gap-4">
-				{#if controls}{@render controls()}{:else}
-					<Button onclick={() => (open = false)}>Cancel</Button>
-					<Button onclick={() => onsubmit?.()}>OK</Button>
+				{#if controls && typeof controls === 'function'}{@render controls()}{:else}
+					<Button
+						class={controls?.cancel?.class}
+						onclick={() => {
+							if (controls?.cancel?.action) {
+								controls.cancel.action(dialogAPI);
+							} else if (!frozen) {
+								open = false;
+							}
+						}}
+						disabled={frozen}
+					>
+						{controls?.cancel?.label || 'Cancel'}
+					</Button>
+					<Button
+						class={controls?.ok?.class}
+						onclick={() => {
+							if (controls?.ok?.action) {
+								controls.ok.action(dialogAPI);
+							} else if (!frozen && !loading) {
+								open = false;
+							}
+						}}
+						disabled={frozen}
+						{loading}
+					>
+						{controls?.ok?.label || 'OK'}
+					</Button>
 				{/if}
 			</div>
 			<button
 				aria-label="close"
-				class="absolute top-4 right-4 inline-flex cursor-pointer items-center justify-center"
-				onclick={() => (open = false)}
+				class="absolute top-4 right-4 inline-flex cursor-pointer items-center
+				justify-center disabled:cursor-not-allowed disabled:opacity-50"
+				onclick={() => {
+					if (!frozen) open = false;
+				}}
+				disabled={frozen}
 			>
 				<X size="1.5em" weight="bold" />
 			</button>

src/lib/index.ts

@@ -5,7 +5,7 @@ export { default as CenterBox } from './CenterBox.svelte';
 export { default as Checkbox, type CheckboxState } from './Checkbox.svelte';
 export { default as Combobox, type ComboboxOption } from './Combobox.svelte';
 export { default as DateInput } from './DateInput.svelte';
-export { default as Dialog } from './Dialog.svelte';
+export { default as Dialog, type DialogAPI, type DialogControlOpts } from './Dialog.svelte';
 export { default as ErrorBox } from './ErrorBox.svelte';
 export { default as FramelessButton } from './FramelessButton.svelte';
 export { default as InjectGoogleMaps } from './InjectGoogleMaps.svelte';

src/routes/+page.svelte

@@ -29,7 +29,7 @@
 		TextStrikethrough,
 		TextUnderline
 	} from 'phosphor-svelte';
-	import type { ComboboxOption, Option } from '$lib';
+	import { ErrorMessage, type ComboboxOption, type Option } from '$lib';
 	import Tabs from '$lib/Tabs.svelte';
 
 	const comboboxOptions = [
@@ -408,9 +408,20 @@
 	bind:open={dialogOpen}
 	title="Dialog Title"
 	size="sm"
-	onsubmit={() => {
-		dialogOpen = false;
-		alert('Dialog submitted!');
+	controls={{
+		ok: {
+			action: (dialog) => {
+				dialog.close();
+				alert('Dialog submitted!');
+			}
+		}
+	}}
+	onopen={(dialog) => {
+		dialog.error(ErrorMessage.from('Example error message!'));
+		dialog.loading();
+		setTimeout(() => {
+			dialog.loaded();
+		}, 2000);
 	}}
 >
 	<p>This is a dialog content area.</p>