@lavalogic/scoria 0.17.2 → 0.18.0

package/dist/Components/Table/Body/Rows/Columns/FocusableImmutableCell.svelte

@@ -6,9 +6,9 @@
 >
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
 	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { ToastContext } from '../../../../../Contexts/ToastContext.svelte.js';
-	import { getErrorMessage } from '../../../../../Helpers/Helpers.svelte.js';
+	import { devCatch, getErrorMessage, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
 	import type { SelectOption } from '../../../../../Types/Internal/SelectOption.js';
+	import { Validity } from '../../../../../Types/Internal/Validity.js';
 	import { getContext } from 'svelte';
 	import type { FocusableImmutableCellProps } from './FocusableImmutableCellProps.js';
 
@@ -21,7 +21,6 @@
 	);
 
 	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-	const toastContext = getContext<ToastContext>(ToastContext.identifier);
 
 	const options: Array<SelectOption<unknown>> = $derived(
 		('options' in cell.column.columnDef ? cell.column.columnDef.options : []) as Array<
@@ -30,9 +29,26 @@
 	);
 	const hasValue: boolean = $derived(value !== undefined);
 
-	const focusDetails: TableFocusDetails<T> = $derived(
-		new TableFocusDetails(cell, tableContext, toastContext.toast)
+	const focusDetails: TableFocusDetails<T, never> = $derived(
+		new TableFocusDetails(cell, tableContext)
 	);
+
+	let validity: Validity = $state(Validity.Valid);
+	$effect(() => {
+		const validityPromise = focusDetails.validity;
+
+		validityPromise
+			.then((v) => {
+				if (!v) {
+					validity = Validity.Neutral;
+				} else if (isValidityTuple(v)) {
+					validity = v.value;
+				} else {
+					validity = v;
+				}
+			})
+			.catch(devCatch);
+	});
 </script>
 
 <!-- svelte-ignore a11y_mouse_events_have_key_events -->
@@ -42,6 +58,10 @@ class:right={focusDetails.rightEdge}
 class:bottom={focusDetails.bottomEdge} -->
 <td
 	id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
+	class:info={validity == Validity.Info}
+	class:success={validity == Validity.Valid}
+	class:warning={validity == Validity.Warning}
+	class:error={validity == Validity.Invalid}
 	tabIndex={hasValue ? 0 : undefined}
 	class="focusable"
 	style={focusDetails.outline}
@@ -67,30 +87,34 @@ class:bottom={focusDetails.bottomEdge} -->
 		tableContext.endFocus(focusDetails.coordinates);
 	}}
 >
-	{#if hasValue}
-		{#await visibleValue}
+	<svelte:boundary>
+		{#snippet pending()}
 			loading…
-		{:then visibleValue}
-			{(visibleValue instanceof Date
-				? visibleValue.toLocaleDateString()
+		{/snippet}
+		{#snippet onerror(e)}
+			Error: {getErrorMessage(e)}
+		{/snippet}
+		{#if hasValue}
+			{@const v = await visibleValue}
+
+			{(v instanceof Date
+				? v.toLocaleDateString()
 				: options.length
-					? options.find((it) => it.value === visibleValue)?.label
-					: visibleValue) ??
-				visibleValue ??
+					? options.find((it) => it.value === v)?.label
+					: v) ??
+				v ??
 				''}
-		{:catch e}
-			{getErrorMessage(e)}
-		{/await}
-	{:else if children}
-		<div
-			class="slot-wrapper"
-			class:multifocus={focusDetails.isMultiFocused}
-			class:multifocus-start={focusDetails.isMultiFocusStart}
-		>
-			<!-- TODO {focusDetails.isMultiFocusStart} -->
-			{@render children()}
-		</div>
-	{/if}
+		{:else if children}
+			<div
+				class="slot-wrapper"
+				class:multifocus={focusDetails.isMultiFocused}
+				class:multifocus-start={focusDetails.isMultiFocusStart}
+			>
+				<!-- TODO {focusDetails.isMultiFocusStart} -->
+				{@render children()}
+			</div>
+		{/if}
+	</svelte:boundary>
 </td>
 
 <style>td {
@@ -147,4 +171,14 @@ div.slot-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
+}
+
+td.info {
+  background-color: #1f81a0;
+}
+td.warning {
+  background-color: #f8eab8;
+}
+td.error {
+  background-color: #f9e9e9;
 }</style>

package/dist/Components/Table/Body/Rows/Columns/ProgressCell.svelte

@@ -8,10 +8,9 @@
 	import type { ProgressBarTableCell } from '../../../Types/Columns/ProgressBarTableCell.js';
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
 	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { ToastContext } from '../../../../../Contexts/ToastContext.svelte.js';
-	import { devCatch } from '../../../../../Helpers/Helpers.svelte.js';
+	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
 	import { Validity } from '../../../../../Types/Internal/Validity.js';
-	import { getContext, tick, untrack } from 'svelte';
+	import { getContext } from 'svelte';
 
 	export interface ProgressCellProps<T extends object, FilterValueType> {
 		cell: ProgressBarTableCell<T, FilterValueType>;
@@ -28,47 +27,27 @@
 	const value: [number, number] = $derived(cell.getValue()) as [number, number];
 
 	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-	const { toast } = getContext<ToastContext>(ToastContext.identifier);
-
 	// const previousRowIndex: number | undefined = $state(undefined);
 
-	const focusDetails = $derived(new TableFocusDetails<T>(cell, tableContext, toast));
+	const focusDetails = $derived(new TableFocusDetails<T, never>(cell, tableContext));
 
-	let previousValidity: Validity = $state(Validity.Valid);
 	let validity: Validity = $state(Validity.Valid);
 	$effect(() => {
-		focusDetails.validityTuple
-			.then(([newValidity]) => {
-				untrack(() => {
-					tick()
-						.then(() => {
-							validity = newValidity;
-						})
-						.catch(devCatch);
-				});
+		const validityPromise = focusDetails.validity;
+
+		validityPromise
+			.then((v) => {
+				if (!v) {
+					validity = Validity.Neutral;
+				} else if (isValidityTuple(v)) {
+					validity = v.value;
+				} else {
+					validity = v;
+				}
 			})
 			.catch(devCatch);
 	});
 
-	$effect(() => {
-		if (validity != previousValidity) {
-			untrack(() => {
-				tick()
-					.then(() => {
-						const x =
-							validity === Validity.Invalid
-								? tableContext.addInvalidValue(cell.row.original)
-								: tableContext.removeInvalidValue(cell.row.original);
-
-						previousValidity = validity;
-
-						return x;
-					})
-					.catch(devCatch);
-			});
-		}
-	});
-
 	const colours = $derived(
 		cell.column.columnDef.getColour(cell.row.original, cell.row.originalIndex, value)
 	);

package/dist/Components/Table/Body/Rows/Columns/TableCheckbox.svelte

@@ -19,8 +19,8 @@
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
 	import type { BoolFilterValueType } from '../../../Types/Filtering/FilterFn.js';
 	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { ToastContext } from '../../../../../Contexts/ToastContext.svelte.js';
-	import { devCatch } from '../../../../../Helpers/Helpers.svelte.js';
+	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
+	import { Validity } from '../../../../../Types/Internal/Validity.js';
 	import { getContext, tick } from 'svelte';
 
 	import type { ChangeEventHandler } from 'svelte/elements';
@@ -30,10 +30,9 @@
 	const value = $derived(!!cell.getValue());
 
 	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-	const toastContext = getContext<ToastContext>(ToastContext.identifier);
 
-	const focusDetails: TableFocusDetails<T> = $derived(
-		new TableFocusDetails(cell, tableContext, toastContext.toast)
+	const focusDetails: TableFocusDetails<T, never> = $derived(
+		new TableFocusDetails(cell, tableContext)
 	);
 
 	let inputRef: HTMLInputElement | undefined = $state();
@@ -56,6 +55,23 @@
 			})
 			.catch(devCatch);
 	};
+
+	let validity: Validity = $state(Validity.Valid);
+	$effect(() => {
+		const validityPromise = focusDetails.validity;
+
+		validityPromise
+			.then((v) => {
+				if (!v) {
+					validity = Validity.Neutral;
+				} else if (isValidityTuple(v)) {
+					validity = v.value;
+				} else {
+					validity = v;
+				}
+			})
+			.catch(devCatch);
+	});
 </script>
 
 <!-- svelte-ignore a11y_mouse_events_have_key_events -->
@@ -91,6 +107,10 @@
 	onmouseup={() => {
 		tableContext.endFocus(focusDetails.coordinates);
 	}}
+	class:info={validity == Validity.Info}
+	class:success={validity == Validity.Valid}
+	class:warning={validity == Validity.Warning}
+	class:error={validity == Validity.Invalid}
 >
 	&nbsp;
 	<label
@@ -156,4 +176,14 @@ label.multifocus {
 }
 label.multifocus.multifocus-start {
   background-color: #ffffff;
+}
+
+td.info {
+  background-color: #1f81a0;
+}
+td.warning {
+  background-color: #f8eab8;
+}
+td.error {
+  background-color: #f9e9e9;
 }</style>

package/dist/Components/Table/Body/Rows/Columns/TableDatePicker.svelte

@@ -9,8 +9,7 @@
 	import type { CellCoordinates } from '../../../Types/Coordinates/CellCoordinates.js';
 	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
 	import DateModal from '../../../../Touch/DateModal.svelte';
-	import { ToastContext } from '../../../../../Contexts/ToastContext.svelte.js';
-	import { devCatch } from '../../../../../Helpers/Helpers.svelte.js';
+	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
 	import { Validity } from '../../../../../Types/Internal/Validity.js';
 	import { getContext, tick } from 'svelte';
 	import type { TableDatePickerProps } from './TableDatePickerProps.js';
@@ -22,7 +21,6 @@
 	const dateValue = $derived(value && value instanceof Date ? value : undefined);
 
 	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-	const { toast } = getContext<ToastContext>(ToastContext.identifier);
 
 	const columnDef = $derived(cell.column.columnDef);
 	const coordinates: CellCoordinates = $derived({
@@ -60,8 +58,8 @@
 			}
 		})().catch(devCatch);
 	});
-	const focusDetails: TableFocusDetails<T> = $derived(
-		new TableFocusDetails(cell, tableContext, toast)
+	const focusDetails: TableFocusDetails<T, never> = $derived(
+		new TableFocusDetails(cell, tableContext)
 	);
 
 	let modalLock = $state(false);
@@ -98,15 +96,23 @@
 		}
 	}
 
-	const validityPromise = $derived(focusDetails.validityTuple);
+	let validity: Validity = $state(Validity.Valid);
+	let reason = $state<string | undefined>();
 
 	$effect(() => {
+		const validityPromise = focusDetails.validity;
+
 		validityPromise
-			.then(([validity]) => {
-				if (validity === Validity.Invalid) {
-					return tableContext.addInvalidValue(cell.row.original);
+			.then((v) => {
+				if (!v) {
+					validity = Validity.Neutral;
+					reason = undefined;
+				} else if (isValidityTuple(v)) {
+					validity = v.value;
+					reason = v.reason;
 				} else {
-					return tableContext.removeInvalidValue(cell.row.original);
+					validity = v;
+					reason = undefined;
 				}
 			})
 			.catch(devCatch);
@@ -144,141 +150,78 @@
 <!-- ref={tdref} -->
 
 <!-- svelte-ignore a11y_mouse_events_have_key_events -->
-{#await validityPromise}
-	<td
-		{id}
-		style={focusDetails.outline}
-		tabIndex="0"
-		bind:this={tdref}
-		class:editable
-		class="focusable"
-		class:multifocus={focusDetails.isMultiFocused}
-		class:multifocus-start={focusDetails.isMultiFocusStart}
-		onmousedown={(e) => {
-			// start focus only on left click
-			if (e.button === 0) {
-				if (e.shiftKey) {
-					e.preventDefault();
-					tableContext.setFocusEnd(coordinates);
-				} else {
-					tableContext.startFocus(coordinates);
-				}
-			}
-		}}
-		onmouseover={() => {
-			if (tableContext.isMousingDown) {
-				tableContext.setFocusEnd(coordinates);
-			}
-		}}
-		onmouseup={() => {
-			tableContext.endFocus(coordinates);
-		}}
-		onclick={handleSingleClick}
-		ondblclick={handleDoubleClick}
-	>
-		{#if isBeingEdited}
-			<DateModal
-				header="Edit {columnDef.header}"
-				value={dateValue ?? null}
-				cancelEditing={() => {
-					refocusTd();
-				}}
-				confirm={(e) => {
-					tableContext.onEditCell(cell.row.original, coordinates, e).catch(devCatch);
-					refocusTd();
-				}}
-			/>
-		{/if}
 
-		{#if !value}
-			-
-		{:else if typeof value === 'string'}
-			<!-- TODO see if we need to mess with time zones here. Very likely -->
-			{@const parsed = new Date(value)}
-			{isNaN(parsed.getFullYear()) ? value : parsed.toLocaleString()}
-		{:else if value instanceof Date}
-			{value.toLocaleDateString()}
-		{:else if dev}
-			<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-			{@debug value}
-			Error reading value
-		{:else}
-			-
-		{/if}
-	</td>
-{:then [validity, message]}
-	<td
-		{id}
-		style={focusDetails.outline}
-		aria-label={message}
-		tabIndex="0"
-		bind:this={tdref}
-		class:editable
-		class="focusable"
-		class:multifocus={focusDetails.isMultiFocused}
-		class:multifocus-start={focusDetails.isMultiFocusStart}
-		class:info={validity == Validity.Info}
-		class:success={validity == Validity.Valid}
-		class:warning={validity == Validity.Warning}
-		class:error={validity == Validity.Invalid}
-		onmousedown={(e) => {
-			// start focus only on left click
-			if (e.button === 0) {
-				if (e.shiftKey) {
-					e.preventDefault();
-					tableContext.setFocusEnd(coordinates);
-				} else {
-					tableContext.startFocus(coordinates);
-				}
-			}
-		}}
-		onmouseover={() => {
-			if (tableContext.isMousingDown) {
+<td
+	{id}
+	style={focusDetails.outline}
+	aria-label={reason}
+	tabIndex="0"
+	bind:this={tdref}
+	class:editable
+	class="focusable"
+	class:multifocus={focusDetails.isMultiFocused}
+	class:multifocus-start={focusDetails.isMultiFocusStart}
+	class:info={validity == Validity.Info}
+	class:success={validity == Validity.Valid}
+	class:warning={validity == Validity.Warning}
+	class:error={validity == Validity.Invalid}
+	onmousedown={(e) => {
+		// start focus only on left click
+		if (e.button === 0) {
+			if (e.shiftKey) {
+				e.preventDefault();
 				tableContext.setFocusEnd(coordinates);
+			} else {
+				tableContext.startFocus(coordinates);
 			}
-		}}
-		onmouseup={() => {
-			tableContext.endFocus(coordinates);
-		}}
-		onclick={handleSingleClick}
-		ondblclick={handleDoubleClick}
-	>
-		{#if modalLock}
-			<DateModal
-				header="Edit {columnDef.header}"
-				value={dateValue ?? null}
-				showTime={cell.column.columnDef.showTime}
-				cancelEditing={() => {
-					refocusTd();
-				}}
-				confirm={(e) => {
-					tableContext.onEditCell(cell.row.original, coordinates, e).catch(devCatch);
-					refocusTd();
-				}}
-			/>
-		{/if}
+		}
+	}}
+	onmouseover={() => {
+		if (tableContext.isMousingDown) {
+			tableContext.setFocusEnd(coordinates);
+		}
+	}}
+	onmouseup={() => {
+		tableContext.endFocus(coordinates);
+	}}
+	onclick={handleSingleClick}
+	ondblclick={handleDoubleClick}
+>
+	{#if modalLock}
+		<DateModal
+			header="Edit {columnDef.header}"
+			value={dateValue ?? null}
+			showTime={cell.column.columnDef.showTime}
+			cancelEditing={() => {
+				refocusTd();
+			}}
+			confirm={(e) => {
+				tableContext.onEditCell(cell.row.original, coordinates, e).catch(devCatch);
+				refocusTd();
+			}}
+		/>
+	{/if}
 
-		{#if !value}
-			-
-		{:else if typeof value === 'string'}
-			<!-- TODO see if we need to mess with time zones here. Very likely -->
-			{@const parsed = new Date(value)}
-			{isNaN(parsed.getFullYear()) ? value : parsed.toLocaleString()}
-		{:else if value instanceof Date}
-			{#if cell.column.columnDef.showTime}
-				{value.toLocaleString()}
-			{:else}
-				{value.toLocaleDateString()}
-			{/if}
-		{:else if dev}
-			<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-			{@debug value}
-			Error reading value
+	{#if !value}
+		-
+	{:else if typeof value === 'string'}
+		<!-- TODO see if we need to mess with time zones here. Very likely -->
+		{@const parsed = new Date(value)}
+		{isNaN(parsed.getFullYear()) ? value : parsed.toLocaleString()}
+	{:else if value instanceof Date}
+		{#if cell.column.columnDef.showTime}
+			{value.toLocaleString()}
 		{:else}
-			-
+			{value.toLocaleDateString()}
 		{/if}
-	</td>
-{/await}
+	{:else if dev}
+		<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+		{@debug value}
+		Error reading value
+	{:else}
+		-
+	{/if}
+</td>
 
 <style>td {
   transition: line-height 0.2s ease, height 0.2s ease;

package/dist/Components/Table/Body/Rows/Columns/TableDatePickerProps.d.ts

@@ -1,4 +1,4 @@
 import type { DateTableCell } from '../../../Types/Columns/DateTableCell.js';
 export interface TableDatePickerProps<T extends object> {
-    cell: DateTableCell<T>;
+    cell: DateTableCell<T, never, unknown>;
 }

package/dist/Components/Table/Body/Rows/Columns/TableNumberInput.svelte

@@ -5,7 +5,7 @@
 	module
 >
 	export interface TableNumberInputProps<T extends object> {
-		cell: TableCell<T, NumberFilterValueType>;
+		cell: TableCell<T>;
 	}
 </script>
 
@@ -17,10 +17,8 @@
 	import { NumberInputDef } from '../../../Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js';
 	import type { TableCell } from '../../../Types/Columns/TableCell.js';
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import type { NumberFilterValueType } from '../../../Types/Filtering/FilterFn.js';
 	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { ToastContext } from '../../../../../Contexts/ToastContext.svelte.js';
-	import { devCatch } from '../../../../../Helpers/Helpers.svelte.js';
+	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
 	import { InputVariant } from '../../../../../Types/Internal/InputVariant.js';
 	import { Validity } from '../../../../../Types/Internal/Validity.js';
 	import { getContext, tick, untrack } from 'svelte';
@@ -55,7 +53,6 @@
 	let inputRef: HTMLInputElement | undefined = $state();
 
 	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-	const { toast } = getContext<ToastContext>(ToastContext.identifier);
 
 	const editableAsync = $derived(
 		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
@@ -86,8 +83,8 @@
 		})().catch(devCatch);
 	});
 
-	const focusDetails: TableFocusDetails<T> = $derived(
-		new TableFocusDetails(cell, tableContext, toast)
+	const focusDetails: TableFocusDetails<T, never> = $derived(
+		new TableFocusDetails(cell, tableContext)
 	);
 
 	const wantsToBeEdited = $derived(
@@ -146,40 +143,23 @@
 		}
 	});
 
-	let previousValidity: Validity = $state(Validity.Valid);
 	let validity: Validity = $state(Validity.Valid);
 	$effect(() => {
-		focusDetails.validityTuple
-			.then(([newValidity]) => {
-				untrack(() => {
-					tick()
-						.then(() => {
-							validity = newValidity;
-						})
-						.catch(devCatch);
-				});
+		const validityPromise = focusDetails.validity;
+
+		validityPromise
+			.then((v) => {
+				if (!v) {
+					validity = Validity.Neutral;
+				} else if (isValidityTuple(v)) {
+					validity = v.value;
+				} else {
+					validity = v;
+				}
 			})
 			.catch(devCatch);
 	});
 
-	$effect(() => {
-		if (validity != previousValidity) {
-			untrack(() => {
-				tick()
-					.then(() => {
-						const x: Promise<void> =
-							validity === Validity.Invalid
-								? tableContext.addInvalidValue(cell.row.original)
-								: tableContext.removeInvalidValue(cell.row.original);
-
-						previousValidity = validity;
-						return x;
-					})
-					.catch(devCatch);
-			});
-		}
-	});
-
 	function handleBeingEdited() {
 		tableContext.isMousingDown = false;
 		tick()

package/dist/Components/Table/Body/Rows/Columns/TableNumberInput.svelte.d.ts

@@ -1,8 +1,7 @@
 export interface TableNumberInputProps<T extends object> {
-    cell: TableCell<T, NumberFilterValueType>;
+    cell: TableCell<T>;
 }
 import type { TableCell } from '../../../Types/Columns/TableCell.js';
-import type { NumberFilterValueType } from '../../../Types/Filtering/FilterFn.js';
 declare function $$render<T extends object>(): {
     props: TableNumberInputProps<T>;
     exports: {};