@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/Modal.svelte

@@ -1,253 +1,251 @@
-<svelte:options runes />
-
-<script
-	module
-	lang="ts"
->
-	import { DATAMatrix } from '../Helpers/Datamatrix.js';
-	import { devCatch, passthrough } from '../Helpers/Helpers.svelte.js';
-	import { ColourSet } from '../scss/colours.js';
-	import type { ButtonProp } from '../Types/Internal/ButtonProp.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import { onMount, tick, type Snippet } from 'svelte';
-	import Action from './Action.svelte';
-	import DataMatrixIcon from './DataMatrixIcon.svelte';
-	import type { DefaultTimer } from './Touch/DefaultTimer.js';
-
-	export interface ModalProps {
-		header: string | Snippet;
-		children: Snippet;
-		onclose?: () => void;
-
-		onsubmit?: ((e: SubmitEvent) => void) | undefined;
-		buttons?: Array<ButtonProp>;
-		mandatory?: boolean | undefined;
-		staticHeight?: boolean | undefined;
-		staticWidth?: boolean | undefined;
-		minWidth?: string | undefined;
-		minHeight?: string | undefined;
-		width?: string | undefined;
-		height?: string | undefined;
-		onShowCallback?: () => void;
-		submitRef?: HTMLButtonElement;
-		defaultTimer?: DefaultTimer;
-		isValid?: boolean | undefined;
-		noscroll?: boolean | undefined;
-		headerExtra?: Snippet;
-		explanation?: Snippet;
-		footer?: Snippet;
-	}
-</script>
-
-<script lang="ts">
-	let {
-		header,
-		buttons,
-		mandatory = false,
-		staticHeight = false,
-		staticWidth = false,
-		minWidth,
-		minHeight,
-		width,
-		height,
-		onShowCallback,
-		submitRef = $bindable(),
-		defaultTimer,
-		isValid = true,
-		noscroll = false,
-		onsubmit,
-		headerExtra,
-		explanation,
-		children,
-		footer,
-		onclose,
-	}: ModalProps = $props();
-
-	let dialog: HTMLDialogElement | undefined;
-	let form: HTMLFormElement;
-	let timeout: ReturnType<typeof setTimeout> | undefined = undefined;
-	let paused = $state(false);
-
-	$effect(() => {
-		void dialog;
-		// HACK tick helps with Portal shenanigans. will be removed if a better solution comes up
-		tick()
-			.then(() => {
-				if (dialog) {
-					dialog.showModal();
-					onShowCallback?.();
-				}
-			})
-			.catch(devCatch);
-	});
-
-	let isActive = false;
-	onMount(() => {
-		setTimeout(() => {
-			isActive = true;
-		}, 200);
-		if (defaultTimer) {
-			timeout = setTimeout(() => {
-				if (dialog && dialog.open) {
-					if (defaultTimer.action === 'submit') {
-						form.requestSubmit();
-					} else {
-						dialog.close();
-					}
-				}
-			}, defaultTimer.time);
-		}
-
-		return clearTimer;
-	});
-
-	function clearTimer() {
-		if (timeout != undefined) {
-			paused = true;
-			clearTimeout(timeout);
-		}
-	}
-
-	function handleEsc(e: KeyboardEvent) {
-		e.stopPropagation();
-
-		if (e.key === 'Escape') {
-			e.preventDefault();
-			if (!mandatory) {
-				dialog?.close();
-			}
-		}
-	}
-</script>
-
-<dialog
-	style="--timer: {defaultTimer && defaultTimer.time.toString() + 'ms'}; {minWidth &&
-		`--dialog-min-width: ${minWidth};`} {minHeight &&
-		`--dialog-min-height: ${minHeight};`} {height && `--dialog-height: ${height};`} {width &&
-		`--dialog-width: ${width};`}"
-	class:static-height={staticHeight}
-	class:static-width={staticWidth}
-	class:noscroll
-	bind:this={dialog}
-	{onclose}
-	onkeydown={handleEsc}
-	onclick={(e) => {
-		if (e.target === dialog) {
-			if (!mandatory) {
-				dialog.close();
-			}
-		}
-		clearTimer();
-	}}
->
-	<form
-		method="dialog"
-		bind:this={form}
-		onsubmit={(e) => {
-			e.preventDefault();
-			if (isActive) {
-				onsubmit?.(e);
-			}
-		}}
-		class="modal-root"
-	>
-		<div class="modal-header">
-			{#if typeof header === 'string'}
-				{#if mandatory}
-					<h3 class="modal-heading">{header}</h3>
-				{:else}
-					<div class="title-wrapper">
-						<h3 class="modal-heading">{header}</h3>
-						<div class="close-button">
-							<Action
-								size={Size.DoubleXLarge}
-								onclick={() => dialog?.close()}
-								icon={{
-									name: 'cross',
-								}}
-								onkeydown={handleEsc}
-								colourSet={ColourSet.Primary}
-								label="Close Modal"
-							/>
-						</div>
-					</div>
-				{/if}
-			{:else if typeof header === 'function'}
-				{@render header()}
-			{/if}
-
-			{#if headerExtra}
-				{@render headerExtra()}
-			{/if}
-		</div>
-
-		{#if defaultTimer}
-			<!-- class:paused -->
-			<div class="bar-container">
-				<div
-					class:paused
-					class="bar-timer"
-				></div>
-			</div>
-		{/if}
-
-		<div
-			class="modal-main"
-			class:noscroll
-		>
-			{#if explanation}
-				{@render explanation()}
-			{/if}
-			{@render children()}
-		</div>
-
-		{#if footer}
-			{@render footer()}
-		{:else if buttons?.length}
-			<div class="modal-footer">
-				{#each buttons as button (button)}
-					{#if button.callback}
-						<div class="button-barcode-set">
-							{#if button.barcodeValue}
-								{@const icon = DATAMatrix(button.barcodeValue)}
-								<DataMatrixIcon
-									title={button.label}
-									{icon}
-								/>
-							{/if}
-							<button
-								onkeydown={passthrough}
-								class:margin-left={button.margin === 'left'}
-								class:margin-right={button.margin === 'right'}
-								type={button.type ?? 'button'}
-								onclick={button.callback}>{button.label}</button
-							>
-						</div>
-					{:else}
-						<div class="button-barcode-set">
-							{#if button.barcodeValue}
-								{@const icon = DATAMatrix(button.barcodeValue)}
-								<DataMatrixIcon
-									title={button.label}
-									{icon}
-								/>
-							{/if}
-							<button
-								onkeydown={passthrough}
-								disabled={!isValid}
-								class:margin-left={button.margin === 'left'}
-								class:margin-right={button.margin === 'right'}
-								bind:this={submitRef}
-								type={button.type ?? 'submit'}>{button.label}</button
-							>
-						</div>
-					{/if}
-				{/each}
-			</div>
-		{/if}
-	</form>
-</dialog>
-
+<svelte:options runes />
+
+<script
+	module
+	lang="ts"
+>
+	import { DATAMatrix } from '../Helpers/Datamatrix.js';
+	import { passthrough } from '../Helpers/Helpers.svelte.js';
+	import { ColourSet } from '../scss/colours.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import { onMount } from 'svelte';
+	import Action from './Action.svelte';
+	import BaseModal from './Base/BaseModal.svelte';
+	import DataMatrixIcon from './DataMatrixIcon.svelte';
+	import type { ModalProps } from './ModalProps.js';
+</script>
+
+<script lang="ts">
+	let {
+		header,
+		buttons,
+		mandatory = false,
+		staticHeight = false,
+		staticWidth = false,
+		minWidth,
+		minHeight,
+		width,
+		height,
+		onShowCallback,
+		submitRef = $bindable(),
+		defaultTimer,
+		isValid = true,
+		noscroll = false,
+		onsubmit,
+		headerExtra,
+		explanation,
+		children,
+		footer,
+		onclose,
+		autofocusSelector,
+	}: ModalProps = $props();
+
+	// `open` drives BaseModal's bindable `value`. Default true (the
+	// legacy "open immediately on mount" semantic). Flipping it to
+	// false closes the dialog; BaseModal will fire `onclose` after
+	// the native `close` event.
+	let open = $state(true);
+	let form: HTMLFormElement | undefined = $state();
+	let timeout: ReturnType<typeof setTimeout> | undefined = undefined;
+	let paused = $state(false);
+	let isActive = $state(false);
+
+	// Pre-compute barcode SVGs once per `buttons` array. Building a DataMatrix
+	// barcode is non-trivial; rebuilding inside the each-block re-runs the
+	// encoder on every render.
+	const barcodeIcons = $derived.by(
+		() => buttons?.map((b) => (b.barcodeValue != null ? DATAMatrix(b.barcodeValue) : null)) ?? []
+	);
+
+	onMount(() => {
+		// Fire onShowCallback after BaseModal has had a chance to call
+		// `showModal()`. BaseModal uses a tick() internally so we match
+		// that with a microtask here.
+		queueMicrotask(() => {
+			onShowCallback?.();
+		});
+
+		const activeTimer = setTimeout(() => {
+			isActive = true;
+		}, 200);
+		if (defaultTimer) {
+			timeout = setTimeout(() => {
+				if (open) {
+					if (defaultTimer.action === 'submit') {
+						form?.requestSubmit();
+					} else {
+						open = false;
+					}
+				}
+			}, defaultTimer.time);
+		}
+
+		return () => {
+			clearTimeout(activeTimer);
+			clearTimer();
+		};
+	});
+
+	function clearTimer() {
+		if (timeout != undefined) {
+			paused = true;
+			clearTimeout(timeout);
+		}
+	}
+
+	function handleEsc(e: KeyboardEvent) {
+		// Forwarded to the Action button's onkeydown so an Escape press
+		// while the close icon has focus still closes the dialog rather
+		// than triggering the button's default activation.
+		e.stopPropagation();
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			if (!mandatory) {
+				open = false;
+			}
+		}
+	}
+
+	function requestClose() {
+		open = false;
+	}
+
+	const dialogClassNames = $derived(
+		[
+			staticHeight ? 'static-height' : null,
+			staticWidth ? 'static-width' : null,
+			noscroll ? 'noscroll' : null,
+		]
+			.filter((c): c is string => c !== null)
+			.join(' ')
+	);
+
+	const dialogStyle = $derived(
+		`--timer: ${defaultTimer ? defaultTimer.time.toString() + 'ms' : 'unset'};` +
+			(minWidth != null ? `--dialog-min-width: ${minWidth};` : '') +
+			(minHeight != null ? `--dialog-min-height: ${minHeight};` : '') +
+			(height != null ? `--dialog-height: ${height};` : '') +
+			(width != null ? `--dialog-width: ${width};` : '')
+	);
+</script>
+
+<BaseModal
+	bind:value={open}
+	{onclose}
+	{mandatory}
+	{autofocusSelector}
+	dialogClass={dialogClassNames}
+	{dialogStyle}
+>
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<form
+		method="dialog"
+		bind:this={form}
+		onsubmit={(e) => {
+			e.preventDefault();
+			clearTimer();
+			if (isActive) {
+				onsubmit?.(e);
+			}
+		}}
+		onclick={clearTimer}
+		class="modal-root"
+	>
+		<div class="modal-header">
+			{#if typeof header === 'string'}
+				{#if mandatory}
+					<h3 class="modal-heading">{header}</h3>
+				{:else}
+					<div class="title-wrapper">
+						<h3 class="modal-heading">{header}</h3>
+						<div class="close-button">
+							<Action
+								size={Size.DoubleXLarge}
+								onclick={requestClose}
+								icon={{
+									name: 'cross',
+								}}
+								onkeydown={handleEsc}
+								colourSet={ColourSet.Primary}
+								label="Close Modal"
+							/>
+						</div>
+					</div>
+				{/if}
+			{:else if typeof header === 'function'}
+				{@render header()}
+			{/if}
+
+			{#if headerExtra}
+				{@render headerExtra()}
+			{/if}
+		</div>
+
+		{#if defaultTimer}
+			<div class="bar-container">
+				<div
+					class:paused
+					class="bar-timer"
+				></div>
+			</div>
+		{/if}
+
+		<div
+			class="modal-main"
+			class:noscroll
+		>
+			{#if explanation}
+				{@render explanation()}
+			{/if}
+			{@render children()}
+		</div>
+
+		{#if footer}
+			{@render footer()}
+		{:else if buttons?.length}
+			<div class="modal-footer">
+				{#each buttons as button, index (button.label)}
+					{#if button.callback}
+						<div class="button-barcode-set">
+							{#if barcodeIcons[index]}
+								<DataMatrixIcon
+									title={button.label}
+									icon={{ kind: 'svg', svg: barcodeIcons[index] }}
+								/>
+							{/if}
+							<button
+								onkeydown={passthrough}
+								class:margin-left={button.margin === 'left'}
+								class:margin-right={button.margin === 'right'}
+								type={button.type ?? 'button'}
+								onclick={button.callback}>{button.label}</button
+							>
+						</div>
+					{:else}
+						<div class="button-barcode-set">
+							{#if barcodeIcons[index]}
+								<DataMatrixIcon
+									title={button.label}
+									icon={{ kind: 'svg', svg: barcodeIcons[index] }}
+								/>
+							{/if}
+							<button
+								onkeydown={passthrough}
+								disabled={!isValid}
+								class:margin-left={button.margin === 'left'}
+								class:margin-right={button.margin === 'right'}
+								bind:this={submitRef}
+								type={button.type ?? 'submit'}>{button.label}</button
+							>
+						</div>
+					{/if}
+				{/each}
+			</div>
+		{/if}
+	</form>
+</BaseModal>
+
 <style>dialog {
   overflow: clip;
   background-color: #e9ecf1;
@@ -493,10 +491,7 @@ button {
   border-radius: 4px;
 }
 
-dialog {
-  overflow: visible;
-}
-
+/* dialog itself is rendered by BaseModal; only inner-content rules live here. */
 form.modal-root {
   overflow: visible;
 }
@@ -591,4 +586,4 @@ div.bar-container div.bar-timer.paused {
 }
 :global form > *:last-child {
   border-radius: 0px 0px 4px 4px;
-}</style>
+}</style>

package/dist/Components/Modal.svelte.d.ts

@@ -1,28 +1,4 @@
-import type { ButtonProp } from '../Types/Internal/ButtonProp.js';
-import { type Snippet } from 'svelte';
-import type { DefaultTimer } from './Touch/DefaultTimer.js';
-export interface ModalProps {
-    header: string | Snippet;
-    children: Snippet;
-    onclose?: () => void;
-    onsubmit?: ((e: SubmitEvent) => void) | undefined;
-    buttons?: Array<ButtonProp>;
-    mandatory?: boolean | undefined;
-    staticHeight?: boolean | undefined;
-    staticWidth?: boolean | undefined;
-    minWidth?: string | undefined;
-    minHeight?: string | undefined;
-    width?: string | undefined;
-    height?: string | undefined;
-    onShowCallback?: () => void;
-    submitRef?: HTMLButtonElement;
-    defaultTimer?: DefaultTimer;
-    isValid?: boolean | undefined;
-    noscroll?: boolean | undefined;
-    headerExtra?: Snippet;
-    explanation?: Snippet;
-    footer?: Snippet;
-}
+import type { ModalProps } from './ModalProps.js';
 declare const Modal: import("svelte").Component<ModalProps, {}, "submitRef">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;

package/dist/Components/ModalProps.d.ts

@@ -0,0 +1,65 @@
+import type { Snippet } from 'svelte';
+import type { ButtonProp } from '../Types/Internal/ButtonProp.js';
+import type { CssLength } from '../Types/Internal/Misc.js';
+import type { DefaultTimer } from './Touch/DefaultTimer.js';
+/**
+ * Props for the {@link Modal} dialog primitive.
+ */
+export interface ModalProps {
+    /** Header label rendered at the top. Accepts a string or a snippet. */
+    header: string | Snippet;
+    /** Snippet rendered as the modal body. */
+    children: Snippet;
+    /** Fired when the dialog is closed (Escape, backdrop click, programmatic close). */
+    onclose?: () => void;
+    /** Submit handler invoked on form submission inside the modal. */
+    onsubmit?: ((e: SubmitEvent) => void) | undefined;
+    /** Optional array of action buttons rendered in the footer. */
+    buttons?: ReadonlyArray<ButtonProp>;
+    /**
+     * When `true` the modal cannot be dismissed by Escape or backdrop click.
+     * Only programmatic close (via `submitRef`, button callback or `onsubmit`)
+     * will dismiss it. Use sparingly.
+     */
+    mandatory?: boolean | undefined;
+    /** Lock the modal to a fixed height. */
+    staticHeight?: boolean | undefined;
+    /** Lock the modal to a fixed width. */
+    staticWidth?: boolean | undefined;
+    /**
+     * Minimum width as a branded CSS length value (e.g.
+     * `cssLength('40rem')`).
+     *
+     * BREAKING (vNext): was `string`; now requires the `CssLength`
+     * brand.
+     */
+    minWidth?: CssLength | undefined;
+    /** Minimum height as a branded CSS length value. See {@link minWidth}. */
+    minHeight?: CssLength | undefined;
+    /** Explicit width as a branded CSS length value. See {@link minWidth}. */
+    width?: CssLength | undefined;
+    /** Explicit height as a branded CSS length value. See {@link minWidth}. */
+    height?: CssLength | undefined;
+    /** Fired once the dialog has been shown (after `tick()`). */
+    onShowCallback?: () => void;
+    /** Bindable reference to the submit-type button in the footer. */
+    submitRef?: HTMLButtonElement;
+    /** Optional countdown timer that auto-submits or auto-closes the modal. */
+    defaultTimer?: DefaultTimer;
+    /** Whether the submit button should currently be enabled. Defaults to `true`. */
+    isValid?: boolean | undefined;
+    /** Disable scrolling inside the modal body. */
+    noscroll?: boolean | undefined;
+    /** Optional snippet rendered alongside the header (e.g. status pill). */
+    headerExtra?: Snippet;
+    /** Optional explanatory snippet rendered above `children`. */
+    explanation?: Snippet;
+    /** Optional custom footer snippet that overrides `buttons`. */
+    footer?: Snippet;
+    /**
+     * Optional CSS selector identifying the element to focus when the modal
+     * opens. When omitted the browser focuses the first focusable element
+     * inside the dialog. Pass e.g. `'input[name="email"]'` to pin focus.
+     */
+    autofocusSelector?: string | undefined;
+}

package/dist/Components/ModalProps.js

@@ -0,0 +1 @@
+export {};