@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/Touch/DateModal.svelte

@@ -1,219 +1,211 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import { devCatch, passthrough } from '../../Helpers/Helpers.svelte.js';
-	import { ColourSet } from '../../scss/colours.js';
-	import { InputVariant } from '../../Types/Internal/InputVariant.js';
-	import { Size } from '../../Types/Internal/Size.js';
-	import { tick, type Snippet } from 'svelte';
-	import Action from '../Action.svelte';
-	import DatePicker from '../DatePicker.svelte';
-	import TextInput from '../TextInput.svelte';
-	import TouchModal from './TouchModal.svelte';
-
-	export interface DateModalProps {
-		header: string;
-		value?: Date | null;
-		cancelEditing: () => void;
-		confirm: (value: Date, overrideValue?: Date) => void;
-		namedMonths?: boolean;
-		validate?: (value: Date | undefined) => boolean;
-		showScanner?: boolean;
-		scanValue?: string;
-		overrideScanValue?: string;
-		confirmScannedValue?: (value: string, overrideValue?: string) => void;
-		inclusive?: boolean;
-		explanation?: Snippet;
-		allowOverride?: boolean;
-		showTime?: boolean;
-	}
-</script>
-
-<script lang="ts">
-	let {
-		header,
-		value,
-		cancelEditing,
-		confirm,
-		namedMonths = false,
-		validate,
-		showScanner = false,
-		scanValue = $bindable(''),
-		overrideScanValue = $bindable(''),
-		confirmScannedValue,
-		inclusive = false,
-		explanation,
-		allowOverride = false,
-		showTime = false,
-	}: DateModalProps = $props();
-
-	let tempValue = $derived(value ?? new Date());
-	let overrideValue = $state(new Date());
-	let isBeingEdited = $state(false);
-	let inputRef: HTMLInputElement | undefined = $state();
-	let overrideInputRef: HTMLInputElement | undefined = $state();
-	const isValid = $derived(validate?.(tempValue) ?? true);
-
-	export function resetIsBeingEdited() {
-		isBeingEdited = false;
-	}
-
-	$effect(() => {
-		void value;
-
-		isBeingEdited = false;
-	});
-
-	$effect(() => {
-		void isBeingEdited;
-		void allowOverride;
-		tick()
-			.then(() => {
-				if (isBeingEdited) {
-					overrideInputRef?.focus();
-				} else {
-					inputRef?.focus();
-				}
-			})
-			.catch(devCatch);
-	});
-
-	function onsubmit(e?: SubmitEvent) {
-		e?.preventDefault();
-
-		if (isValid) {
-			if (inclusive) {
-				tempValue.setHours(23, 59, 59);
-				console.log(tempValue);
-			}
-
-			confirm(tempValue, allowOverride && isBeingEdited ? overrideValue : undefined);
-		}
-
-		scanValue = '';
-	}
-
-	function submitOnEnter(e: KeyboardEvent) {
-		if (e.key === 'Enter') {
-			e.preventDefault();
-			e.stopPropagation();
-
-			if (!scanValue || (isBeingEdited && !overrideScanValue)) {
-				if (
-					allowOverride &&
-					isBeingEdited &&
-					!overrideScanValue &&
-					document.activeElement != inputRef
-				) {
-					overrideInputRef?.focus();
-				} else {
-					inputRef?.focus();
-				}
-
-				return;
-			}
-
-			confirmScannedValue?.(
-				scanValue,
-				allowOverride && isBeingEdited ? overrideScanValue : undefined
-			);
-			scanValue = '';
-		}
-	}
-</script>
-
-<!-- mandatory -->
-
-<TouchModal
-	onclose={() => {
-		cancelEditing();
-	}}
-	{header}
-	{onsubmit}
-	{explanation}
->
-	{#if showScanner}
-		<div class="inputs">
-			{#if allowOverride}
-				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-				{@render overrideButton()}
-			{/if}
-			{#if isBeingEdited}
-				<TextInput
-					bind:inputRef={overrideInputRef}
-					bind:value={overrideScanValue}
-					variant={InputVariant.Modal}
-					labelTop="Scan Barcode to Override"
-					onkeydown={submitOnEnter}
-				/>
-			{/if}
-			<TextInput
-				bind:inputRef
-				bind:value={scanValue}
-				variant={InputVariant.Modal}
-				labelTop="Scan Barcode"
-				onkeydown={submitOnEnter}
-			/>
-		</div>
-	{:else if allowOverride}
-		<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-		{@render overrideButton()}
-	{/if}
-
-	<div class="inputs">
-		{#if allowOverride && isBeingEdited}
-			<DatePicker
-				{showTime}
-				{onsubmit}
-				{namedMonths}
-				bind:date={overrideValue}
-			/>
-		{/if}
-		<DatePicker
-			{showTime}
-			{onsubmit}
-			{namedMonths}
-			bind:date={tempValue}
-		/>
-	</div>
-
-	{#snippet footer()}
-		<div class="modal-footer">
-			<button
-				onkeydown={passthrough}
-				type="submit"
-				disabled={!isValid}>Confirm</button
-			>
-			<button
-				onkeydown={passthrough}
-				type="button"
-				onclick={() => {
-					cancelEditing();
-				}}>Cancel</button
-			>
-		</div>
-	{/snippet}
-</TouchModal>
-
-{#snippet overrideButton()}
-	<div>
-		<Action
-			icon={{ name: 'edit' }}
-			size={Size.DoubleXLarge}
-			colourSet={isBeingEdited ? ColourSet.Primary : ColourSet.Secondary}
-			onclick={() => {
-				if (!allowOverride) {
-					return;
-				}
-				isBeingEdited = !isBeingEdited;
-			}}
-		/>
-	</div>
-{/snippet}
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import { devCatch, passthrough } from '../../Helpers/Helpers.svelte.js';
+	import { ColourSet } from '../../scss/colours.js';
+	import { InputVariant } from '../../Types/Internal/InputVariant.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import { tick } from 'svelte';
+	import Action from '../Action.svelte';
+	import DatePicker from '../DatePicker.svelte';
+	import TextInput from '../TextInput.svelte';
+	import type { DateModalProps } from './DateModalProps.js';
+	import TouchModal from './TouchModal.svelte';
+</script>
+
+<script lang="ts">
+	let {
+		header,
+		value,
+		cancelEditing,
+		confirm,
+		namedMonths = false,
+		validate,
+		showScanner = false,
+		scanValue = $bindable(''),
+		overrideScanValue = $bindable(''),
+		confirmScannedValue,
+		inclusive = false,
+		explanation,
+		allowOverride = false,
+		showTime = false,
+	}: DateModalProps = $props();
+
+	// Snapshot the incoming `value` into mutable working state. Reset via
+	// the effect below when the parent hands us a new `value` reference;
+	let tempValue: Date = $state(new Date());
+	let overrideValue = $state(new Date());
+	let isBeingEdited = $state(false);
+	let inputRef: HTMLInputElement | undefined = $state();
+	let overrideInputRef: HTMLInputElement | undefined = $state();
+	const isValid = $derived(validate?.(tempValue) ?? true);
+
+	export function resetIsBeingEdited() {
+		isBeingEdited = false;
+	}
+
+	$effect(() => {
+		// Reset edit state and working value when the caller hands us a new
+		// `value` reference.
+		void value;
+		isBeingEdited = false;
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		tempValue = value ?? new Date();
+	});
+
+	$effect(() => {
+		void isBeingEdited;
+		void allowOverride;
+		tick()
+			.then(() => {
+				if (isBeingEdited) {
+					overrideInputRef?.focus();
+				} else {
+					inputRef?.focus();
+				}
+			})
+			.catch(devCatch);
+	});
+
+	function onsubmit(e?: SubmitEvent) {
+		e?.preventDefault();
+
+		if (isValid) {
+			// Confirm without mutating the bound state. If the caller asked for
+			// an inclusive (end-of-day) reading, hand back a fresh copy with
+			// 23:59:59 set rather than re-stamping `tempValue` in place.
+			let outValue = tempValue;
+			if (inclusive) {
+				outValue = new Date(tempValue.getTime());
+				outValue.setHours(23, 59, 59);
+			}
+
+			confirm(outValue, allowOverride && isBeingEdited ? overrideValue : undefined);
+		}
+
+		scanValue = '';
+	}
+
+	function submitOnEnter(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			e.stopPropagation();
+
+			if (!scanValue || (isBeingEdited && !overrideScanValue)) {
+				if (
+					allowOverride &&
+					isBeingEdited &&
+					!overrideScanValue &&
+					document.activeElement != inputRef
+				) {
+					overrideInputRef?.focus();
+				} else {
+					inputRef?.focus();
+				}
+
+				return;
+			}
+
+			confirmScannedValue?.(
+				scanValue,
+				allowOverride && isBeingEdited ? overrideScanValue : undefined
+			);
+			scanValue = '';
+		}
+	}
+</script>
+
+<TouchModal
+	onclose={() => {
+		cancelEditing();
+	}}
+	{header}
+	{onsubmit}
+	{explanation}
+>
+	{#if showScanner}
+		<div class="inputs">
+			{#if allowOverride}
+				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+				{@render overrideButton()}
+			{/if}
+			{#if isBeingEdited}
+				<TextInput
+					bind:inputRef={overrideInputRef}
+					bind:value={overrideScanValue}
+					variant={InputVariant.Modal}
+					labelTop="Scan Barcode to Override"
+					onkeydown={submitOnEnter}
+				/>
+			{/if}
+			<TextInput
+				bind:inputRef
+				bind:value={scanValue}
+				variant={InputVariant.Modal}
+				labelTop="Scan Barcode"
+				onkeydown={submitOnEnter}
+			/>
+		</div>
+	{:else if allowOverride}
+		<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+		{@render overrideButton()}
+	{/if}
+
+	<div class="inputs">
+		{#if allowOverride && isBeingEdited}
+			<DatePicker
+				{showTime}
+				{onsubmit}
+				{namedMonths}
+				bind:date={overrideValue}
+			/>
+		{/if}
+		<DatePicker
+			{showTime}
+			{onsubmit}
+			{namedMonths}
+			bind:date={tempValue}
+		/>
+	</div>
+
+	{#snippet footer()}
+		<div class="modal-footer">
+			<button
+				onkeydown={passthrough}
+				type="submit"
+				disabled={!isValid}>Confirm</button
+			>
+			<button
+				onkeydown={passthrough}
+				type="button"
+				onclick={() => {
+					cancelEditing();
+				}}>Cancel</button
+			>
+		</div>
+	{/snippet}
+</TouchModal>
+
+{#snippet overrideButton()}
+	<div>
+		<Action
+			icon={{ name: 'edit' }}
+			size={Size.DoubleXLarge}
+			colourSet={isBeingEdited ? ColourSet.Primary : ColourSet.Secondary}
+			label={isBeingEdited ? 'Cancel override' : 'Override date'}
+			onclick={() => {
+				if (!allowOverride) {
+					return;
+				}
+				isBeingEdited = !isBeingEdited;
+			}}
+		/>
+	</div>
+{/snippet}
+
 <style>.modal-footer {
   bottom: 0;
   border-top: solid 1px #cbd4da;
@@ -272,4 +264,4 @@ div.inputs {
   flex-flow: row nowrap;
   gap: 1.5rem;
   justify-content: space-around;
-}</style>
+}</style>

package/dist/Components/Touch/DateModal.svelte.d.ts

@@ -1,20 +1,4 @@
-import { type Snippet } from 'svelte';
-export interface DateModalProps {
-    header: string;
-    value?: Date | null;
-    cancelEditing: () => void;
-    confirm: (value: Date, overrideValue?: Date) => void;
-    namedMonths?: boolean;
-    validate?: (value: Date | undefined) => boolean;
-    showScanner?: boolean;
-    scanValue?: string;
-    overrideScanValue?: string;
-    confirmScannedValue?: (value: string, overrideValue?: string) => void;
-    inclusive?: boolean;
-    explanation?: Snippet;
-    allowOverride?: boolean;
-    showTime?: boolean;
-}
+import type { DateModalProps } from './DateModalProps.js';
 declare const DateModal: import("svelte").Component<DateModalProps, {
     resetIsBeingEdited: () => void;
 }, "scanValue" | "overrideScanValue">;

package/dist/Components/Touch/DateModalProps.d.ts

@@ -0,0 +1,36 @@
+import type { Snippet } from 'svelte';
+/**
+ * Props for `DateModal`, the touch-friendly date/time picker modal.
+ * Hosts a `DatePicker` inside `TouchModal` with optional barcode-scan
+ * inputs and an editable override branch for two-value entry.
+ */
+export interface DateModalProps {
+    /** Header text shown in the modal title bar. */
+    header: string;
+    /** Initial date or `null` for "today". Internally cloned to a working state. */
+    value?: Date | null;
+    /** Fires when the user cancels (close, Escape, Cancel). */
+    cancelEditing: () => void;
+    /** Fires on confirm. Receives the selected date plus an optional override. */
+    confirm: (value: Date, overrideValue?: Date) => void;
+    /** Render months as named (January, February, ...) rather than numeric. */
+    namedMonths?: boolean;
+    /** Optional validator that disables the confirm button when false. */
+    validate?: (value: Date | undefined) => boolean;
+    /** Render the scanner input row above the date picker. */
+    showScanner?: boolean;
+    /** Two-way bindable scanned barcode value. */
+    scanValue?: string;
+    /** Two-way bindable scanned override value (for the override branch). */
+    overrideScanValue?: string;
+    /** Fires when a barcode submission is confirmed (Enter pressed). */
+    confirmScannedValue?: (value: string, overrideValue?: string) => void;
+    /** Set the time to 23:59:59 on confirm so the date represents end-of-day. */
+    inclusive?: boolean;
+    /** Optional explanation snippet rendered above the inputs. */
+    explanation?: Snippet;
+    /** Expose the second "override" date branch behind an edit toggle. */
+    allowOverride?: boolean;
+    /** Render the time portion of the date picker. */
+    showTime?: boolean;
+}

package/dist/Components/Touch/DateModalProps.js

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

package/dist/Components/Touch/EditCard.svelte

@@ -1,54 +1,61 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { passthrough } from '../../Helpers/Helpers.svelte.js';
-	import { Size } from '../../Types/Internal/Size.js';
-	import Icon from '../Icon.svelte';
-	import type { EditCardProps } from './EditCardProps.js';
-	const {
-		noborder,
-		label,
-		desktop = false,
-		iconName = 'edit',
-		disabled = false,
-		error = false,
-		onclick,
-		children
-	}: EditCardProps = $props();
-</script>
-
-<button
-	type="button"
-	class="card"
-	class:desktop
-	class:error
-	class:noborder
-	{disabled}
-	{onclick}
-	onkeydown={passthrough}
->
-	<div class="left">
-		{#if label}
-			<div class="row">
-				<span class="card-label label">{label}</span>
-				{#if desktop}
-					<span class="card-label border">{label}</span>
-				{/if}
-			</div>
-		{/if}
-		<div class="row" class:labelless={!label}>
-			{#if children}
-				<span class="value">{@render children()}</span>
-			{/if}
-		</div>
-	</div>
-	<div class="right">
-		{#if iconName}
-			<Icon name={iconName} size={desktop ? Size.Medium : Size.XLarge} />
-		{/if}
-	</div>
-</button>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { passthrough } from '../../Helpers/Helpers.svelte.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import Icon from '../Icon.svelte';
+	import type { EditCardProps } from './EditCardProps.js';
+	const {
+		noborder,
+		label,
+		desktop = false,
+		iconName = 'edit',
+		disabled = false,
+		error = false,
+		onclick,
+		children,
+	}: EditCardProps = $props();
+</script>
+
+<button
+	type="button"
+	class="card"
+	class:desktop
+	class:error
+	class:noborder
+	{disabled}
+	aria-disabled={disabled}
+	{onclick}
+	onkeydown={passthrough}
+>
+	<div class="left">
+		{#if label}
+			<div class="row">
+				<span class="card-label label">{label}</span>
+				{#if desktop}
+					<span class="card-label border">{label}</span>
+				{/if}
+			</div>
+		{/if}
+		<div
+			class="row"
+			class:labelless={!label}
+		>
+			{#if children}
+				<span class="value">{@render children()}</span>
+			{/if}
+		</div>
+	</div>
+	<div class="right">
+		{#if iconName}
+			<Icon
+				name={iconName}
+				size={desktop ? Size.Medium : Size.XLarge}
+			/>
+		{/if}
+	</div>
+</button>
+
 <style>.card {
   color: #3a4952;
   fill: #3a4952;
@@ -206,4 +213,4 @@
 }
 .card .labelless {
   padding: 0.75rem;
-}</style>
+}</style>

package/dist/Components/Touch/EditCardProps.d.ts

@@ -1,12 +1,33 @@
 import type { Snippet } from 'svelte';
 import type { PartialIconProps } from '../PartialIconProps.js';
+/**
+ * Props for `EditCard`, a touch-friendly button-style card that
+ * surfaces a labelled value with an edit icon. Pressing the card fires
+ * `onclick`, conventionally to open a `TextModal`, `NumberModal`, or
+ * similar editor.
+ */
 export interface EditCardProps {
+    /** Render without the card border. */
     noborder?: boolean;
+    /**
+     * Render with the compact desktop layout (single-line, no minimum
+     * height, label floats over the border). The default (false) is the
+     * larger tablet layout.
+     */
     desktop?: boolean;
+    /** Label rendered above (or floating over, in desktop layout) the value. */
     label?: string;
+    /**
+     * Name of the trailing icon. Defaults to `'edit'`. Pass `null` to
+     * suppress the icon entirely.
+     */
     iconName?: PartialIconProps['name'] | null;
+    /** Disable click handling. */
     disabled?: boolean;
+    /** Render in the error visual state. */
     error?: boolean;
+    /** Click handler. Fires on touch/click. */
     onclick?: (e: MouseEvent) => void;
+    /** Optional value snippet. Rendered inside the card's value slot. */
     children?: Snippet;
 }