@lavalogic/scoria 0.40.13 → 0.40.15

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

@@ -1,236 +1,195 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, FilterValueType, RowIdType extends Primitive"
->
-	import type { AbstractDisplayDef } from '../../../Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js';
-	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
-	import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import {
-		devCatch,
-		formatDateTime,
-		isValidityTuple,
-		loadingText,
-	} from '../../../../../Helpers/Helpers.svelte.js';
-	import type { SelectOption } from '../../../../../Types/Internal/SelectOption.js';
-	import { Validity } from '../../../../../Types/Internal/Validity.js';
-	import { getContext, tick } from 'svelte';
-	import type { FocusableImmutableCellProps } from './FocusableImmutableCellProps.js';
-
-	const { cell, children }: FocusableImmutableCellProps<T, FilterValueType> = $props();
-
-	const value = $derived(cell.getValue());
-
-	/** Optional override-display value from the column def; falls back to the raw `value`. */
-	const visibleValue = $derived(
-		cell.column.columnDef.getDisplayValue?.(cell.row.original, cell.row.originalIndex) ?? value
-	);
-
-	/** For Date-typed display columns, expose both the local-time and UTC
-	 *  representations of the raw accessor value as a multi-line tooltip.
-	 *  The cell's body shows the locale-formatted value (via
-	 *  `getDisplayValue`); the title attribute below lets users hover to
-	 *  see Local + UTC side-by-side without expanding the column. */
-	const dateTooltip: string | undefined = $derived.by(() => {
-		if (cell.column.columnDef.filterValueType !== 'Date') {
-			return undefined;
-		}
-		if (value == null || value === '' || value instanceof Promise) {
-			return undefined;
-		}
-		let d: Date | undefined;
-		if (value instanceof Date) {
-			d = value;
-		} else if (typeof value === 'string' || typeof value === 'number') {
-			const parsed = new Date(value);
-			if (!Number.isNaN(parsed.getTime())) {
-				d = parsed;
-			}
-		}
-		if (d == null) {
-			return undefined;
-		}
-		// Both lines go through `formatDateTime` so the tooltip matches
-		// every other date surface in the app; only the timezone differs —
-		// the second call overrides it to UTC.
-		return `Local: ${formatDateTime(d)}\nUTC: ${formatDateTime(d, undefined, 'UTC')}`;
-	});
-
-	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
-
-	const options: Array<SelectOption<unknown>> = $derived(
-		('options' in cell.column.columnDef ? cell.column.columnDef.options : []) as Array<
-			SelectOption<unknown>
-		>
-	);
-	const hasValue: boolean = $derived(value !== undefined);
-
-	const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
-		tableContext._focus.getFocusDetailsFor(cell)
-	);
-
-	// `modal` lives on every `AbstractDisplayDef` subclass (Display,
-	// Bubble, Progress, Validity), so a duck-typed read against the base
-	// `ColumnDef` is sufficient and avoids importing the entire
-	// AbstractDisplayDef class chain just to satisfy the type checker.
-	const modalComponent = $derived(
-		(cell.column.columnDef as AbstractDisplayDef<T, FilterValueType>).modal
-	);
-
-	let previousFocusElement: HTMLElement | undefined = $state();
-	let showModal = $state(false);
-
-	const thisId = $derived(
-		`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`
-	);
-
-	// Match the open-modal state by row-object identity and column id so
-	// pagination / sort / filter does not silently re-target the modal at
-	// a different row that happens to occupy the same visible index.
-	$effect(() => {
-		const target = tableContext.openModalCell;
-		if (target !== null && target.row === cell.row.original && target.columnId === cell.column.id) {
-			previousFocusElement = document.activeElement as HTMLElement | undefined;
-			showModal = true;
-		} else {
-			showModal = false;
-		}
-	});
-
-	function onclose() {
-		tableContext.setOpenModalCell(null);
-
-		if (previousFocusElement?.id != thisId) {
-			tick()
-				.then(() => {
-					previousFocusElement?.focus();
-				})
-				.catch(devCatch);
-		}
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, FilterValueType, RowIdType extends Primitive"
+>import { TableContext } from "../../../Types/Context/TableContext.svelte.js";
+import "../../../Types/Context/TableInitOptions.js";
+import { devCatch, formatDateTime, isValidityTuple, loadingText } from "../../../../../Helpers/Helpers.svelte.js";
+import { Validity } from "../../../../../Types/Internal/Validity.js";
+import { getContext, tick } from "svelte";
+const { cell, children } = $props();
+const value = $derived(cell.getValue());
+/** Optional override-display value from the column def; falls back to the raw `value`. */
+const visibleValue = $derived(cell.column.columnDef.getDisplayValue?.(cell.row.original, cell.row.originalIndex) ?? value);
+/** For Date-typed display columns, expose both the local-time and UTC
+*  representations of the raw accessor value as a multi-line tooltip.
+*  The cell's body shows the locale-formatted value (via
+*  `getDisplayValue`); the title attribute below lets users hover to
+*  see Local + UTC side-by-side without expanding the column. */
+const dateTooltip = $derived.by(() => {
+	if (cell.column.columnDef.filterValueType !== "Date") {
+		return undefined;
 	}
-
-	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 -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	id={thisId}
-	class:info={validity == Validity.Info}
-	class:success={validity == Validity.Valid}
-	class:warning={validity == Validity.Warning}
-	class:error={validity == Validity.Invalid}
-	class:has-modal={!!modalComponent}
-	tabIndex={hasValue ? 0 : undefined}
-	class="focusable"
-	title={dateTooltip}
-	style={focusDetails.outline}
-	class:multifocus={hasValue && focusDetails.isMultiFocused}
-	class:multifocus-start={hasValue && focusDetails.isMultiFocusStart}
-	onmousedown={(e) => {
-		// start focus only on left click
-		if (e.button === 0) {
-			if (e.shiftKey) {
-				e.preventDefault();
-				tableContext.setFocusEnd(focusDetails.coordinates);
-			} else {
-				tableContext.startFocus(focusDetails.coordinates);
-			}
-		}
-	}}
-	onmouseover={() => {
-		if (tableContext.isMousingDown) {
-			tableContext.setFocusEnd(focusDetails.coordinates);
-		}
-	}}
-	onmouseup={() => {
-		tableContext.endFocus(focusDetails.coordinates);
-	}}
-	onclick={() => {
-		// Open the per-cell modal if the column declares one. Click is
-		// the right trigger here (focus already started on mousedown);
-		// modal-less display cells fall through to the default focus
-		// behaviour with no extra handler.
-		if (modalComponent) {
-			tableContext.setOpenModalCell({
-				row: cell.row.original,
-				columnId: cell.column.id,
-			});
+	if (value == null || value === "" || value instanceof Promise) {
+		return undefined;
+	}
+	let d;
+	if (value instanceof Date) {
+		d = value;
+	} else if (typeof value === "string" || typeof value === "number") {
+		const parsed = new Date(value);
+		if (!Number.isNaN(parsed.getTime())) {
+			d = parsed;
 		}
-	}}
-	onkeydown={(e) => {
-		// Keyboard parity with `onclick` above: when the cell has DOM
-		// focus (via `tabIndex`), Enter / Space opens the modal. Only
-		// fires for columns that declare a `modal`; non-modal display
-		// cells defer to the table's global keyboard navigation.
-		if (modalComponent && (e.key === 'Enter' || e.key === ' ')) {
-			e.preventDefault();
-			tableContext.setOpenModalCell({
-				row: cell.row.original,
-				columnId: cell.column.id,
-			});
+	}
+	if (d == null) {
+		return undefined;
+	}
+	// Both lines go through `formatDateTime` so the tooltip matches
+	// every other date surface in the app; only the timezone differs —
+	// the second call overrides it to UTC.
+	return `Local: ${formatDateTime(d)}\nUTC: ${formatDateTime(d, undefined, "UTC")}`;
+});
+const tableContext = getContext(TableContext.identifier);
+const options = $derived("options" in cell.column.columnDef ? cell.column.columnDef.options : []);
+const hasValue = $derived(value !== undefined);
+const focusDetails = $derived(tableContext._focus.getFocusDetailsFor(cell));
+// `modal` lives on every `AbstractDisplayDef` subclass (Display,
+// Bubble, Progress, Validity), so a duck-typed read against the base
+// `ColumnDef` is sufficient and avoids importing the entire
+// AbstractDisplayDef class chain just to satisfy the type checker.
+const modalComponent = $derived(cell.column.columnDef.modal);
+let previousFocusElement = $state();
+let showModal = $state(false);
+const thisId = $derived(`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`);
+// Match the open-modal state by row-object identity and column id so
+// pagination / sort / filter does not silently re-target the modal at
+// a different row that happens to occupy the same visible index.
+$effect(() => {
+	const target = tableContext.openModalCell;
+	if (target !== null && target.row === cell.row.original && target.columnId === cell.column.id) {
+		previousFocusElement = document.activeElement;
+		showModal = true;
+	} else {
+		showModal = false;
+	}
+});
+function onclose() {
+	tableContext.setOpenModalCell(null);
+	if (previousFocusElement?.id != thisId) {
+		tick().then(() => {
+			previousFocusElement?.focus();
+		}).catch(devCatch);
+	}
+}
+let 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;
 		}
-	}}
->
-	{#if hasValue}
-		{#await visibleValue}
-			{loadingText}
-		{:then v}
-			{(v instanceof Date
-				? v.toLocaleDateString()
-				: options.length
-					? options.find((it) => it.value === v)?.label
-					: v) ??
-				v ??
-				''}
-		{/await}
-	{:else if children}
-		<div
-			class="slot-wrapper"
-			class:multifocus={focusDetails.isMultiFocused}
-			class:multifocus-start={focusDetails.isMultiFocusStart}
-		>
-			{@render children()}
-		</div>
-	{/if}
-</div>
-{#if showModal && modalComponent}
-	<!--
-		The component receives the public `DisplayModalProps<T>` shape
-		`{ row, close }`. The dialog is NOT wrapped in
-		`<Portal target={document.body}>` any more. `<dialog>` opened
-		via `showModal()` enters the browser's top layer, so it already
-		escapes overflow:hidden / sticky / transform ancestors without
-		needing to be re-parented. Moving the `<div>` ancestor mid-mount
-		(Portal's $effect runs during the same microtask round as
-		BaseModal's `tick().then` `dialog.showModal()`) was popping the
-		dialog out of the top layer and leaving it to render inline at
-		the bottom of the page.
-	-->
-	{@const ModalComponent = modalComponent}
-	<ModalComponent
-		row={cell.row.original}
-		close={onclose}
-	/>
-{/if}
-
+	}).catch(devCatch);
+});
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	id={thisId}
+	class:info={validity == Validity.Info}
+	class:success={validity == Validity.Valid}
+	class:warning={validity == Validity.Warning}
+	class:error={validity == Validity.Invalid}
+	class:has-modal={!!modalComponent}
+	tabIndex={hasValue ? 0 : undefined}
+	class="focusable"
+	title={dateTooltip}
+	style={focusDetails.outline}
+	class:multifocus={hasValue && focusDetails.isMultiFocused}
+	class:multifocus-start={hasValue && focusDetails.isMultiFocusStart}
+	onmousedown={(e) => {
+		// start focus only on left click
+		if (e.button === 0) {
+			if (e.shiftKey) {
+				e.preventDefault();
+				tableContext.setFocusEnd(focusDetails.coordinates);
+			} else {
+				tableContext.startFocus(focusDetails.coordinates);
+			}
+		}
+	}}
+	onmouseover={() => {
+		if (tableContext.isMousingDown) {
+			tableContext.setFocusEnd(focusDetails.coordinates);
+		}
+	}}
+	onmouseup={() => {
+		tableContext.endFocus(focusDetails.coordinates);
+	}}
+	onclick={() => {
+		// Open the per-cell modal if the column declares one. Click is
+		// the right trigger here (focus already started on mousedown);
+		// modal-less display cells fall through to the default focus
+		// behaviour with no extra handler.
+		if (modalComponent) {
+			tableContext.setOpenModalCell({
+				row: cell.row.original,
+				columnId: cell.column.id,
+			});
+		}
+	}}
+	onkeydown={(e) => {
+		// Keyboard parity with `onclick` above: when the cell has DOM
+		// focus (via `tabIndex`), Enter / Space opens the modal. Only
+		// fires for columns that declare a `modal`; non-modal display
+		// cells defer to the table's global keyboard navigation.
+		if (modalComponent && (e.key === 'Enter' || e.key === ' ')) {
+			e.preventDefault();
+			tableContext.setOpenModalCell({
+				row: cell.row.original,
+				columnId: cell.column.id,
+			});
+		}
+	}}
+>
+	{#if hasValue}
+		{#await visibleValue}
+			{loadingText}
+		{:then v}
+			{(v instanceof Date
+				? v.toLocaleDateString()
+				: options.length
+					? options.find((it) => it.value === v)?.label
+					: v) ??
+				v ??
+				''}
+		{/await}
+	{:else if children}
+		<div
+			class="slot-wrapper"
+			class:multifocus={focusDetails.isMultiFocused}
+			class:multifocus-start={focusDetails.isMultiFocusStart}
+		>
+			{@render children()}
+		</div>
+	{/if}
+</div>
+{#if showModal && modalComponent}
+	<!--
+		The component receives the public `DisplayModalProps<T>` shape
+		`{ row, close }`. The dialog is NOT wrapped in
+		`<Portal target={document.body}>` any more. `<dialog>` opened
+		via `showModal()` enters the browser's top layer, so it already
+		escapes overflow:hidden / sticky / transform ancestors without
+		needing to be re-parented. Moving the `<div>` ancestor mid-mount
+		(Portal's $effect runs during the same microtask round as
+		BaseModal's `tick().then` `dialog.showModal()`) was popping the
+		dialog out of the top layer and leaving it to render inline at
+		the bottom of the page.
+	-->
+	{@const ModalComponent = modalComponent}
+	<ModalComponent
+		row={cell.row.original}
+		close={onclose}
+	/>
+{/if}
+
 <style>.focusable,
 .checkbox-cell,
 .input-cell,
@@ -321,4 +280,4 @@ div.slot-wrapper {
 .input-cell.error,
 .select-cell.error {
   background-color: #f9e9e9;
-}</style>
+}</style>

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

@@ -1,107 +1,85 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import ProgressBubble from '../../../../ProgressBubble.svelte';
-	import type { ProgressBarTableCell } from '../../../Types/Columns/ProgressBarTableCell.js';
-	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
-	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
-	import { Validity } from '../../../../../Types/Internal/Validity.js';
-	import { getContext } from 'svelte';
-
-	/**
-	 * Props for {@link ProgressCell}. The cell renders a single `<ProgressBubble>`
-	 * whose `[done, total]` tuple comes from `cell.getValue()`.
-	 */
-	export interface ProgressCellProps<T extends object, FilterValueType> {
-		/** Progress-bar table cell whose `[done, total]` value should be rendered. */
-		cell: ProgressBarTableCell<T, FilterValueType>;
-	}
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object, FilterValueType, RowIdType extends Primitive"
->
-	const { cell }: ProgressCellProps<T, FilterValueType> = $props();
-
-	/**
-	 * Tuple of `[done, total]`. The cast is unavoidable until `ProgressBarDef`
-	 * carries a narrowed `TValue = [number, number]` generic; tracked under
-	 * the cross-cutting RowGenericThreading + ProgressBarDef.value follow-up.
-	 */
-	const value: [number, number] = $derived(cell.getValue()) as [number, number];
-
-	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
-
-	const focusDetails = $derived(tableContext._focus.getFocusDetailsFor(cell));
-
-	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);
-	});
-
-	const colours = $derived(
-		cell.column.columnDef.getColour(cell.row.original, cell.row.originalIndex, value)
-	);
-</script>
-
-<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
-	tabIndex={0}
-	class="focusable"
-	class:multifocus={focusDetails.isMultiFocused}
-	class:multifocus-start={focusDetails.isMultiFocusStart}
-	style={focusDetails.outline}
-	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(focusDetails.coordinates);
-			} else {
-				tableContext.startFocus(focusDetails.coordinates);
-			}
-		}
-	}}
-	onmouseover={() => {
-		if (tableContext.isMousingDown) {
-			tableContext.setFocusEnd(focusDetails.coordinates);
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>import ProgressBubble from "../../../../ProgressBubble.svelte";
+import { TableContext } from "../../../Types/Context/TableContext.svelte.js";
+import "../../../Types/Context/TableInitOptions.js";
+import { devCatch, isValidityTuple } from "../../../../../Helpers/Helpers.svelte.js";
+import { Validity } from "../../../../../Types/Internal/Validity.js";
+import { getContext } from "svelte";
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object, FilterValueType, RowIdType extends Primitive"
+>const { cell } = $props();
+/**
+* Tuple of `[done, total]`. The cast is unavoidable until `ProgressBarDef`
+* carries a narrowed `TValue = [number, number]` generic; tracked under
+* the cross-cutting RowGenericThreading + ProgressBarDef.value follow-up.
+*/
+const value = $derived(cell.getValue());
+const tableContext = getContext(TableContext.identifier);
+const focusDetails = $derived(tableContext._focus.getFocusDetailsFor(cell));
+let 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;
 		}
-	}}
-	onmouseup={() => {
-		tableContext.endFocus(focusDetails.coordinates);
-	}}
->
-	<div class="bubble-parent">
-		<ProgressBubble
-			{value}
-			{colours}
-		/>
-	</div>
-</div>
-
+	}).catch(devCatch);
+});
+const colours = $derived(cell.column.columnDef.getColour(cell.row.original, cell.row.originalIndex, value));
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
+	tabIndex={0}
+	class="focusable"
+	class:multifocus={focusDetails.isMultiFocused}
+	class:multifocus-start={focusDetails.isMultiFocusStart}
+	style={focusDetails.outline}
+	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(focusDetails.coordinates);
+			} else {
+				tableContext.startFocus(focusDetails.coordinates);
+			}
+		}
+	}}
+	onmouseover={() => {
+		if (tableContext.isMousingDown) {
+			tableContext.setFocusEnd(focusDetails.coordinates);
+		}
+	}}
+	onmouseup={() => {
+		tableContext.endFocus(focusDetails.coordinates);
+	}}
+>
+	<div class="bubble-parent">
+		<ProgressBubble
+			{value}
+			{colours}
+		/>
+	</div>
+</div>
+
 <style>.focusable,
 .checkbox-cell,
 .input-cell,
@@ -188,4 +166,4 @@ div.bubble-parent {
   align-items: center;
   gap: 0.75rem;
   --line-height: 1;
-}</style>
+}</style>