@lavalogic/scoria 0.40.13 → 0.40.15

package/dist/Components/LoadingModal.svelte

@@ -1,47 +1,39 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import LoadingAnimation from './LoadingAnimation.svelte';
-	import type { LoadingModalProps } from './LoadingModalProps.js';
-
-	const { showModal, message, name, caption }: LoadingModalProps = $props();
-
-	let dialog: HTMLDialogElement | undefined = $state();
-
-	$effect(() => {
-		if (!dialog) {
-			return;
-		}
-		if (showModal && !dialog.open) {
-			dialog.showModal();
-		} else if (!showModal && dialog.open) {
-			dialog.close();
-		}
-	});
-
-	function uncloseable(
-		e: KeyboardEvent & { currentTarget: EventTarget & HTMLDialogElement }
-	): void {
-		if (e.key === 'Escape') {
-			e.preventDefault();
-		}
+<svelte:options runes />
+
+<script lang="ts">import LoadingAnimation from "./LoadingAnimation.svelte";
+const { showModal, message, name, caption } = $props();
+let dialog = $state();
+$effect(() => {
+	if (!dialog) {
+		return;
 	}
-</script>
-
-<dialog
-	bind:this={dialog}
-	onkeydown={uncloseable}
-	aria-label={message ?? 'Loading'}
-	aria-live="polite"
->
-	<div class="modal-root">
-		<LoadingAnimation
-			{name}
-			caption={message ?? caption}
-		/>
-	</div>
-</dialog>
-
+	if (showModal && !dialog.open) {
+		dialog.showModal();
+	} else if (!showModal && dialog.open) {
+		dialog.close();
+	}
+});
+function uncloseable(e) {
+	if (e.key === "Escape") {
+		e.preventDefault();
+	}
+}
+</script>
+
+<dialog
+	bind:this={dialog}
+	onkeydown={uncloseable}
+	aria-label={message ?? 'Loading'}
+	aria-live="polite"
+>
+	<div class="modal-root">
+		<LoadingAnimation
+			{name}
+			caption={message ?? caption}
+		/>
+	</div>
+</dialog>
+
 <style>dialog {
   overflow: clip;
   background-color: #e9ecf1;
@@ -306,4 +298,4 @@ dialog .modal-root {
   align-items: center;
   background: rgba(0, 0, 0, 0);
   position: relative;
-}</style>
+}</style>

package/dist/Components/LoadingOverlay.svelte

@@ -1,28 +1,24 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import LoadingAnimation from './LoadingAnimation.svelte';
-	import type { LoadingOverlayProps } from './LoadingOverlayProps.js';
-
-	const { message, absolute, borderRadius, name, caption }: LoadingOverlayProps =
-		$props();
-</script>
-
-<div
-	class="loading-overlay"
-	class:absolute
-	role="status"
-	aria-live="polite"
-	style={borderRadius != null && borderRadius.length > 0
-		? `border-radius: ${borderRadius};`
-		: undefined}
->
-	<LoadingAnimation
-		{name}
-		caption={message ?? caption}
-	/>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">import LoadingAnimation from "./LoadingAnimation.svelte";
+const { message, absolute, borderRadius, name, caption } = $props();
+</script>
+
+<div
+	class="loading-overlay"
+	class:absolute
+	role="status"
+	aria-live="polite"
+	style={borderRadius != null && borderRadius.length > 0
+		? `border-radius: ${borderRadius};`
+		: undefined}
+>
+	<LoadingAnimation
+		{name}
+		caption={message ?? caption}
+	/>
+</div>
+
 <style>.loading-overlay {
   display: flex;
   position: fixed;
@@ -41,4 +37,4 @@
 }
 .loading-overlay.absolute {
   position: absolute;
-}</style>
+}</style>

package/dist/Components/Modal.svelte

@@ -1,260 +1,210 @@
-<svelte:options runes />
-
-<script
-	module
-	lang="ts"
->
-	import { browser } from '$app/environment';
-	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.
-	//
-	// `DATAMatrix` calls `document.createElement` internally, which is
-	// undefined during SvelteKit's server render. Returning `null` on the
-	// server keeps the SVG slots empty for SSR; the client re-renders with
-	// the real encoded payload after hydration.
-	const barcodeIcons = $derived.by(
-		() =>
-			buttons?.map((b) =>
-				b.barcodeValue != null && browser ? 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();
-		};
+<svelte:options runes />
+
+<script
+	module
+	lang="ts"
+>import { browser } from "$app/environment";
+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";
+</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 } = $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 = $state();
+let timeout = 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.
+//
+// `DATAMatrix` calls `document.createElement` internally, which is
+// undefined during SvelteKit's server render. Returning `null` on the
+// server keeps the SVG slots empty for SSR; the client re-renders with
+// the real encoded payload after hydration.
+const barcodeIcons = $derived.by(() => buttons?.map((b) => b.barcodeValue != null && browser ? 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?.();
 	});
-
-	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;
+	const activeTimer = setTimeout(() => {
+		isActive = true;
+	}, 200);
+	if (defaultTimer) {
+		timeout = setTimeout(() => {
+			if (open) {
+				if (defaultTimer.action === "submit") {
+					form?.requestSubmit();
+				} else {
+					open = false;
+				}
 			}
-		}
+		}, defaultTimer.time);
 	}
-
-	function requestClose() {
-		open = false;
+	return () => {
+		clearTimeout(activeTimer);
+		clearTimer();
+	};
+});
+function clearTimer() {
+	if (timeout != undefined) {
+		paused = true;
+		clearTimeout(timeout);
 	}
-
-	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>
-
+}
+function handleEsc(e) {
+	// 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 !== 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;
@@ -604,4 +554,4 @@ div.bar-container div.bar-timer.paused {
 }
 :global form > *:last-child {
   border-radius: 0px 0px 4px 4px;
-}</style>
+}</style>