@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/Touch/SummaryCard.svelte

@@ -1,67 +1,95 @@
-<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 { SummaryCardProps } from './SummaryCardProps.js';
-	const {
-		bubbles,
-		desktop = false,
-		heading,
-		icon,
-		keyValues,
-		editable = false,
-		error = false,
-		onclick
-	}: SummaryCardProps = $props();
-</script>
-
-{#snippet _heading()}
-	{#if desktop}
-		<span class="desktop-heading" class:invalid={error}>{heading}</span>
-		<span class="desktop-heading-border" class:invalid={error}>{heading}</span>
-	{:else}
-		{#if bubbles}
-			<!-- these are just plain strings -->
-			<!-- eslint-disable-next-line svelte/require-each-key -->
-			{#each bubbles as bubble}
-				<div class="card-detail">{bubble}</div>
-			{/each}
-		{/if}
-
-		<div class="card-row heading">
-			<h3>{heading}</h3>
-			{#if editable}
-				<Icon name="edit" size={Size.DoubleXLarge} />
-			{/if}
-		</div>
-	{/if}
-{/snippet}
-
-<button class:desktop onkeydown={passthrough} {onclick} class="summary-card" class:error>
-	<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-	{@render _heading()}
-	<div class="columns">
-		<div class="left">
-			{#each keyValues as { key, value } (key)}
-				<div class="card-row detail">
-					<span>{key}</span>
-					<span class="ellipsis"
-						>............................................................................................................</span
-					>
-					<span class="value">{value}</span>
-				</div>
-			{/each}
-		</div>
-		{#if icon}
-			<div class="right">
-				<Icon name={icon} size={Size.Medium} />
-			</div>
-		{/if}
-	</div>
-</button>
-
+<svelte:options runes />
+
+<script
+	module
+	lang="ts"
+>
+	import { passthrough } from '../../Helpers/Helpers.svelte.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import Icon from '../Icon.svelte';
+	import type { SummaryCardProps } from './SummaryCardProps.js';
+
+	// CSS handles the dot-leader rendering via a flex pseudo element. We no
+	// longer interpolate a 108-character literal of dots into the markup.
+</script>
+
+<script lang="ts">
+	const {
+		bubbles,
+		desktop = false,
+		heading,
+		icon,
+		keyValues,
+		editable = false,
+		error = false,
+		onclick,
+	}: SummaryCardProps = $props();
+</script>
+
+{#snippet _heading()}
+	{#if desktop}
+		<span
+			class="desktop-heading"
+			class:invalid={error}>{heading}</span
+		>
+		<span
+			class="desktop-heading-border"
+			class:invalid={error}>{heading}</span
+		>
+	{:else}
+		{#if bubbles}
+			{#each bubbles as bubble (bubble)}
+				<div class="card-detail">{bubble}</div>
+			{/each}
+		{/if}
+
+		<div class="card-row heading">
+			<h3>{heading}</h3>
+			{#if editable}
+				<Icon
+					name="edit"
+					size={Size.DoubleXLarge}
+				/>
+			{/if}
+		</div>
+	{/if}
+{/snippet}
+
+<button
+	class:desktop
+	onkeydown={passthrough}
+	{onclick}
+	class="summary-card"
+	class:error
+	aria-label={onclick ? heading : undefined}
+	type="button"
+>
+	<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+	{@render _heading()}
+	<div class="columns">
+		<div class="left">
+			{#each keyValues as { key, value } (key)}
+				<div class="card-row detail">
+					<span class="key">{key}</span>
+					<span
+						class="leader"
+						aria-hidden="true"
+					></span>
+					<span class="value">{value}</span>
+				</div>
+			{/each}
+		</div>
+		{#if icon}
+			<div class="right">
+				<Icon
+					name={icon}
+					size={Size.Medium}
+				/>
+			</div>
+		{/if}
+	</div>
+</button>
+
 <style>ul {
   list-style: none;
   display: flex;
@@ -328,4 +356,18 @@ button.summary-card h3 {
 }
 .card-detail.optional:not(.entered) {
   background-color: #f9e9e9;
-}</style>
+}
+
+.card-row.detail {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: baseline;
+  gap: 0.375rem;
+}
+.card-row.detail .leader {
+  flex-grow: 1;
+  align-self: stretch;
+  border-bottom: 1px dotted #647d8e;
+  margin: 0 0.375rem;
+  transform: translateY(-0.25em);
+}</style>

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

@@ -1,12 +1,25 @@
-import type { KeyValuePair } from '../../index.js';
 import type { IconProps } from '../IconProps.js';
+import type { KeyValuePair } from './KeyValuePair.js';
+/**
+ * Props for `SummaryCard`, a touch-friendly card surfacing a heading,
+ * an optional row of bubble labels, and a tabular list of key/value
+ * details. Use for compact read-only summaries (e.g. picks, orders).
+ */
 export interface SummaryCardProps {
-    bubbles?: Array<string>;
+    /** Optional badge-style labels rendered above the heading. */
+    bubbles?: ReadonlyArray<string>;
+    /** Render with the compact desktop layout. */
     desktop?: boolean;
+    /** Optional trailing icon name. */
     icon?: IconProps['name'];
+    /** Card heading. */
     heading: string;
-    keyValues: Array<KeyValuePair>;
+    /** Key/value pairs rendered as the card detail rows. */
+    keyValues: ReadonlyArray<KeyValuePair>;
+    /** Render the edit icon next to the heading. */
     editable?: boolean;
+    /** Render the card in the error visual state. */
     error?: boolean;
+    /** Click handler. When provided, the entire card is activatable. */
     onclick?: (e: MouseEvent) => void;
 }

package/dist/Components/Touch/TextAreaModal.svelte

@@ -1,88 +1,97 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { devCatch, passthrough } from '../../Helpers/Helpers.svelte.js';
-	import { Colour } from '../../scss/colours.js';
-	import { InputVariant } from '../../Types/Internal/InputVariant.js';
-	import { Size } from '../../Types/Internal/Size.js';
-	import { onMount, tick } from 'svelte';
-	import TextArea from '../TextArea.svelte';
-	import type { TextAreaModalProps } from './TextAreaModalProps.js';
-	import TouchModal from './TouchModal.svelte';
-
-	let {
-		header,
-		value = $bindable(''),
-		label,
-		placeholder,
-		cancelEditing,
-		confirm,
-		uppercase = false,
-		textAreaRef = $bindable(),
-		explanation
-	}: TextAreaModalProps = $props();
-
-	let tempValue = $state('');
-
-	onMount(() => {
-		tempValue = value;
-		tick()
-			.then(() => {
-				textAreaRef?.select();
-			})
-			.catch(devCatch);
-	});
-
-	async function resetValue() {
-		tempValue = '';
-		await tick();
-		textAreaRef?.select();
-	}
-</script>
-
-<TouchModal
-	onclose={() => {
-		cancelEditing();
-	}}
-	{header}
-	mandatory
-	minHeight="400px"
-	minWidth="600px"
-	onsubmit={(e: SubmitEvent) => {
-		e.preventDefault();
-		confirm(tempValue);
-	}}
-	{explanation}
->
-	<TextArea
-		{uppercase}
-		labelTop={label}
-		{placeholder}
-		bind:value={tempValue}
-		variant={InputVariant.Modal}
-		bind:textAreaRef
-		rightIcon={{
-			name: 'cross',
-			size: Size.Large,
-			colour: Colour['$font-primary']
-		}}
-		onRightIconClick={resetValue}
-	/>
-
-	{#snippet footer()}
-		<div class="modal-footer">
-			<button onkeydown={passthrough} type="submit">Confirm</button>
-			<button
-				onkeydown={passthrough}
-				type="button"
-				onclick={() => {
-					cancelEditing();
-				}}>Cancel</button
-			>
-		</div>
-	{/snippet}
-</TouchModal>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { useAsyncFlag } from '../../Helpers/AsyncFlag.svelte.js';
+	import { devCatch, passthrough } from '../../Helpers/Helpers.svelte.js';
+	import { Colour } from '../../scss/colours.js';
+	import { InputVariant } from '../../Types/Internal/InputVariant.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import { onMount, tick } from 'svelte';
+	import TextArea from '../TextArea.svelte';
+	import type { TextAreaModalProps } from './TextAreaModalProps.js';
+	import TouchModal from './TouchModal.svelte';
+
+	let {
+		header,
+		value = $bindable(''),
+		label,
+		placeholder,
+		cancelEditing,
+		confirm,
+		uppercase = false,
+		textAreaRef = $bindable(),
+		isValid: _isValid = true,
+		explanation,
+	}: TextAreaModalProps = $props();
+
+	onMount(() => {
+		tick()
+			.then(() => {
+				textAreaRef?.select();
+			})
+			.catch(devCatch);
+	});
+
+	async function resetValue() {
+		value = '';
+		await tick();
+		textAreaRef?.select();
+	}
+
+	const isValid = useAsyncFlag(
+		() => (typeof _isValid === 'function' ? _isValid(value) : _isValid),
+		true
+	);
+</script>
+
+<TouchModal
+	onclose={() => {
+		cancelEditing();
+	}}
+	{header}
+	mandatory
+	minHeight="400px"
+	minWidth="600px"
+	onsubmit={(e: SubmitEvent) => {
+		e.preventDefault();
+		confirm(value);
+	}}
+	{explanation}
+>
+	<TextArea
+		{uppercase}
+		labelTop={label}
+		{placeholder}
+		bind:value
+		variant={InputVariant.Modal}
+		bind:textAreaRef
+		invalid={!isValid.value}
+		rightIcon={{
+			name: 'cross',
+			size: Size.Large,
+			colour: Colour['$font-primary'],
+		}}
+		onRightIconClick={resetValue}
+	/>
+
+	{#snippet footer()}
+		<div class="modal-footer">
+			<button
+				onkeydown={passthrough}
+				type="submit"
+				disabled={!isValid.value}>Confirm</button
+			>
+			<button
+				onkeydown={passthrough}
+				type="button"
+				onclick={() => {
+					cancelEditing();
+				}}>Cancel</button
+			>
+		</div>
+	{/snippet}
+</TouchModal>
+
 <style>dialog {
   overflow: clip;
   background-color: #e9ecf1;
@@ -324,4 +333,4 @@ button {
   display: block;
   border-width: 2px;
   border-radius: 4px;
-}</style>
+}</style>

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

@@ -1,12 +1,33 @@
+import type { AsyncFlag } from '../../Types/Internal/AsyncFlag.js';
 import type { Snippet } from 'svelte';
+/**
+ * Props for `TextAreaModal`, the touch-friendly modal that hosts a
+ * `TextArea` for free-form multi-line entry. Internally wraps `TouchModal`.
+ */
 export interface TextAreaModalProps {
+    /** Header text shown in the modal title bar. */
     header: string;
+    /** Bindable string value. Defaults to the empty string. */
     value?: string;
+    /** Label rendered above the text area. */
     label?: string;
+    /** Placeholder text shown when the value is empty. */
     placeholder?: string;
+    /** Fires when the user cancels editing (close, Escape, Cancel button). */
     cancelEditing: () => void;
+    /** Fires when the user confirms. Receives the current text value. */
     confirm: (value: string) => void;
+    /** Render the input in uppercase. Forwards to `TextArea`. */
     uppercase?: boolean;
+    /** Two-way bindable reference to the underlying textarea element. */
     textAreaRef?: HTMLTextAreaElement;
+    /**
+     * Validation flag. Accepts either a bare {@link AsyncFlag} of a boolean,
+     * or a validator function that receives the current text value and
+     * returns an {@link AsyncFlag} of a boolean. The modal's confirm button
+     * is disabled when this resolves to false.
+     */
+    isValid?: AsyncFlag<boolean> | ((value: string) => AsyncFlag<boolean>);
+    /** Optional explanation snippet rendered above the textarea. */
     explanation?: Snippet;
 }

package/dist/Components/Touch/TextModal.svelte

@@ -1,125 +1,108 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { devCatch, passthrough } from '../../Helpers/Helpers.svelte.js';
-	import { Colour } from '../../scss/colours.js';
-	import { InputVariant } from '../../Types/Internal/InputVariant.js';
-	import { Size } from '../../Types/Internal/Size.js';
-	import { onMount, tick } from 'svelte';
-	import TextInput from '../TextInput.svelte';
-	import type { TextModalProps } from './TextModalProps.js';
-	import TouchModal from './TouchModal.svelte';
-
-	let {
-		header,
-		value = $bindable(''),
-		label,
-		placeholder,
-		cancelEditing,
-		confirm,
-		uppercase = false,
-		inputRef = $bindable(),
-		isValid: _isValid = true,
-		mandatory = true,
-		explanation,
-		width,
-		minWidth,
-		staticWidth,
-		minHeight,
-		height
-	}: TextModalProps = $props();
-
-	// let tempValue = '';
-
-	onMount(() => {
-		tick()
-			.then(() => {
-				inputRef?.select();
-			})
-			.catch(devCatch);
-	});
-
-	async function resetValue() {
-		//TODO discuss wether we want to empty the value or reset to snapshot
-		// tempValue = '';
-		value = '';
-		await tick();
-		inputRef?.select();
-	}
-
-	let isValid = $state(true);
-
-	$effect(() => {
-		if (!_isValid) {
-			isValid = false;
-		} else {
-			if (typeof _isValid == 'function') {
-				const result = _isValid(value);
-
-				if (typeof result == 'boolean') {
-					isValid = result;
-				} else {
-					result
-						.then((it) => {
-							isValid = it;
-						})
-						.catch(devCatch);
-				}
-			} else {
-				isValid = _isValid;
-			}
-		}
-	});
-</script>
-
-<TouchModal
-	onclose={() => {
-		cancelEditing();
-	}}
-	{header}
-	{mandatory}
-	{width}
-	{minWidth}
-	{staticWidth}
-	{minHeight}
-	{height}
-	onsubmit={(e: SubmitEvent) => {
-		e.preventDefault();
-		confirm(value);
-	}}
-	{explanation}
->
-	<!-- bind:value={tempValue} -->
-	<TextInput
-		{uppercase}
-		labelTop={label}
-		{placeholder}
-		variant={InputVariant.Modal}
-		bind:inputRef
-		bind:value
-		showErrorColours
-		invalid={!isValid}
-		rightIcon={{
-			name: 'cross',
-			size: Size.Large,
-			colour: Colour['$font-primary']
-		}}
-		onRightIconClick={resetValue}
-	/>
-	{#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>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { useAsyncFlag } from '../../Helpers/AsyncFlag.svelte.js';
+	import { devCatch, passthrough } from '../../Helpers/Helpers.svelte.js';
+	import { Colour } from '../../scss/colours.js';
+	import { InputVariant } from '../../Types/Internal/InputVariant.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import { onMount, tick } from 'svelte';
+	import TextInput from '../TextInput.svelte';
+	import type { TextModalProps } from './TextModalProps.js';
+	import TouchModal from './TouchModal.svelte';
+
+	let {
+		header,
+		value = $bindable(''),
+		label,
+		placeholder,
+		cancelEditing,
+		confirm,
+		uppercase = false,
+		inputRef = $bindable(),
+		isValid: _isValid = true,
+		mandatory = true,
+		explanation,
+		width,
+		minWidth,
+		staticWidth,
+		minHeight,
+		height,
+	}: TextModalProps = $props();
+
+	onMount(() => {
+		tick()
+			.then(() => {
+				inputRef?.select();
+			})
+			.catch(devCatch);
+	});
+
+	async function resetValue() {
+		// Cleared back to empty: callers wanting reset-to-original semantics
+		// should re-pass the original value via the bound prop.
+		value = '';
+		await tick();
+		inputRef?.select();
+	}
+
+	const isValid = useAsyncFlag(
+		() => (typeof _isValid === 'function' ? _isValid(value) : _isValid),
+		true
+	);
+</script>
+
+<TouchModal
+	onclose={() => {
+		cancelEditing();
+	}}
+	{header}
+	{mandatory}
+	{width}
+	{minWidth}
+	{staticWidth}
+	{minHeight}
+	{height}
+	onsubmit={(e: SubmitEvent) => {
+		e.preventDefault();
+		confirm(value);
+	}}
+	{explanation}
+>
+	<TextInput
+		{uppercase}
+		labelTop={label}
+		{placeholder}
+		variant={InputVariant.Modal}
+		bind:inputRef
+		bind:value
+		showErrorColours
+		invalid={!isValid.value}
+		rightIcon={{
+			name: 'cross',
+			size: Size.Large,
+			colour: Colour['$font-primary'],
+		}}
+		onRightIconClick={resetValue}
+	/>
+	{#snippet footer()}
+		<div class="modal-footer">
+			<button
+				onkeydown={passthrough}
+				type="submit"
+				disabled={!isValid.value}>Confirm</button
+			>
+			<button
+				onkeydown={passthrough}
+				type="button"
+				onclick={() => {
+					cancelEditing();
+				}}>Cancel</button
+			>
+		</div>
+	{/snippet}
+</TouchModal>
+
 <style>dialog {
   overflow: clip;
   background-color: #e9ecf1;
@@ -361,4 +344,4 @@ button {
   display: block;
   border-width: 2px;
   border-radius: 4px;
-}</style>
+}</style>