@lavalogic/scoria 0.35.0 → 0.37.0

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

@@ -1,25 +1,26 @@
+import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
 import type { TableTextInputProps } from './TableTextInputProps.js';
-declare function $$render<T extends object, FilterValueType>(): {
+declare function $$render<T extends object, FilterValueType, RowIdType extends Primitive>(): {
     props: TableTextInputProps<T, FilterValueType>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends object, FilterValueType> {
-    props(): ReturnType<typeof $$render<T, FilterValueType>>['props'];
-    events(): ReturnType<typeof $$render<T, FilterValueType>>['events'];
-    slots(): ReturnType<typeof $$render<T, FilterValueType>>['slots'];
+declare class __sveltets_Render<T extends object, FilterValueType, RowIdType extends Primitive> {
+    props(): ReturnType<typeof $$render<T, FilterValueType, RowIdType>>['props'];
+    events(): ReturnType<typeof $$render<T, FilterValueType, RowIdType>>['events'];
+    slots(): ReturnType<typeof $$render<T, FilterValueType, RowIdType>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends object, FilterValueType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, FilterValueType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, FilterValueType>['props']>, ReturnType<__sveltets_Render<T, FilterValueType>['events']>, ReturnType<__sveltets_Render<T, FilterValueType>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T, FilterValueType>['bindings']>;
-    } & ReturnType<__sveltets_Render<T, FilterValueType>['exports']>;
-    <T extends object, FilterValueType>(internal: unknown, props: ReturnType<__sveltets_Render<T, FilterValueType>['props']> & {}): ReturnType<__sveltets_Render<T, FilterValueType>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+    new <T extends object, FilterValueType, RowIdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, FilterValueType, RowIdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, FilterValueType, RowIdType>['props']>, ReturnType<__sveltets_Render<T, FilterValueType, RowIdType>['events']>, ReturnType<__sveltets_Render<T, FilterValueType, RowIdType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, FilterValueType, RowIdType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, FilterValueType, RowIdType>['exports']>;
+    <T extends object, FilterValueType, RowIdType extends Primitive>(internal: unknown, props: ReturnType<__sveltets_Render<T, FilterValueType, RowIdType>['props']> & {}): ReturnType<__sveltets_Render<T, FilterValueType, RowIdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
 }
 declare const TableTextInput: $$IsomorphicComponent;
-type TableTextInput<T extends object, FilterValueType> = InstanceType<typeof TableTextInput<T, FilterValueType>>;
+type TableTextInput<T extends object, FilterValueType, RowIdType extends Primitive> = InstanceType<typeof TableTextInput<T, FilterValueType, RowIdType>>;
 export default TableTextInput;

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

@@ -1,4 +1,10 @@
 import type { TableCell } from '../../../Types/Columns/TableCell.js';
+/**
+ * Props for {@link TableTextInput}. Renders a `TextInput` while editing
+ * and the awaited display value otherwise. Commit goes through
+ * `TableContext.onEditCell` on blur or Enter, with a discard on Escape.
+ */
 export interface TableTextInputProps<T extends object, FilterValueType> {
+    /** The text cell to render. */
     cell: TableCell<T, FilterValueType>;
 }

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

@@ -1,173 +1,177 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import Action from '../../../../Action.svelte';
-	import type { IconProps } from '../../../../IconProps.js';
-	import Portal from '../../../../Portal.svelte';
-	import type { AbstractDisplayDef } from '../../../Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js';
-	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
-	import { Colour, ColourSet } from '../../../../../scss/colours.js';
-	import { Size } from '../../../../../Types/Internal/Size.js';
-	import { Validity } from '../../../../../Types/Internal/Validity.js';
-
-	const iconSets: Record<Validity, IconProps> = {
-		[Validity.Invalid]: {
-			name: 'circle-cross',
-			colour: Colour['$error-border'],
-			size: Size.Medium,
-		},
-		[Validity.Valid]: { name: 'circle-tick', colour: Colour['$brand-primary'], size: Size.Medium },
-		[Validity.Info]: {
-			name: 'circle-information',
-			colour: Colour['$ui-blue-6'],
-			size: Size.Medium,
-		},
-		[Validity.Warning]: {
-			name: 'circle-exclamation',
-			colour: Colour['$warning-border'],
-			size: Size.Medium,
-		},
-		[Validity.Neutral]: { name: 'circle-minus', colour: Colour['$ui-blue-6'], size: Size.Medium },
-	};
-
-	let previousFocusElement: HTMLElement | undefined = $state();
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object,  FilterValueType, RowIdType extends Primitive"
->
-	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
-	import { getContext, tick } from 'svelte';
-	import type { ValidityCellProps } from './ValidityCellProps.js';
-
-	const { cell }: ValidityCellProps<T, FilterValueType> = $props();
-
-	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
-
-	const ColumnDef = $derived(cell.column.columnDef as AbstractDisplayDef<T, FilterValueType>);
-
-	const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
-		new TableFocusDetails(cell, tableContext)
-	);
-
-	let showModal = $state(false);
-
-	$effect(() => {
-		if (
-			!!tableContext.openModalCoordinates &&
-			focusDetails.coordinates.row === tableContext.openModalCoordinates.row &&
-			focusDetails.coordinates.id === tableContext.openModalCoordinates.id
-		) {
-			previousFocusElement = document.activeElement as HTMLElement | undefined;
-			showModal = true;
-		} else {
-			showModal = false;
-		}
-	});
-
-	let validity: Validity = $state(Validity.Valid);
-	let reason = $state<string | undefined>();
-
-	$effect(() => {
-		const validityPromise = focusDetails.validity;
-
-		validityPromise
-			.then((v) => {
-				if (!v) {
-					validity = Validity.Neutral;
-					reason = undefined;
-				} else if (isValidityTuple(v)) {
-					validity = v.value;
-					reason = v.reason;
-				} else {
-					validity = v;
-
-					reason = undefined;
-				}
-			})
-			.catch(devCatch);
-	});
-
-	const thisId = $derived(
-		`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`
-	);
-
-	function onclose() {
-		tableContext.setOpenModalCoordinates(null);
-
-		if (previousFocusElement?.id != thisId) {
-			tick()
-				.then(() => {
-					previousFocusElement?.focus();
-				})
-				.catch(devCatch);
-		}
-	}
-
-	const icon = $derived(iconSets[validity]);
-</script>
-
-<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-<td
-	class="focusable"
-	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="slot-wrapper"
-		class:multifocus={focusDetails.isMultiFocused}
-		class:multifocus-start={focusDetails.isMultiFocusStart}
-	>
-		<Action
-			id={thisId}
-			style={focusDetails.outline}
-			border={false}
-			colourSet={ColourSet.Auxiliary}
-			label={reason}
-			size={Size.FillWidth}
-			{icon}
-			onclick={() => {
-				if (ColumnDef.modal) {
-					tableContext.setOpenModalCoordinates(focusDetails.coordinates);
-				}
-			}}
-		/>
-	</div>
-	{#if showModal}
-		<Portal target={document.body}>
-			<ColumnDef.modal
-				{cell}
-				{onclose}
-				onsubmit={onclose}
-			/>
-		</Portal>
-	{/if}
-</td>
-
-<style>td {
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import Action from '../../../../Action.svelte';
+	import type { IconProps } from '../../../../IconProps.js';
+	import Portal from '../../../../Portal.svelte';
+	import type { AbstractDisplayDef } from '../../../Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js';
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
+	import { Colour, ColourSet } from '../../../../../scss/colours.js';
+	import { Size } from '../../../../../Types/Internal/Size.js';
+	import { Validity } from '../../../../../Types/Internal/Validity.js';
+
+	const iconSets: Record<Validity, IconProps> = {
+		[Validity.Invalid]: {
+			name: 'circle-cross',
+			colour: Colour['$error-border'],
+			size: Size.Medium,
+		},
+		[Validity.Valid]: { name: 'circle-tick', colour: Colour['$brand-primary'], size: Size.Medium },
+		[Validity.Info]: {
+			name: 'circle-information',
+			colour: Colour['$ui-blue-6'],
+			size: Size.Medium,
+		},
+		[Validity.Warning]: {
+			name: 'circle-exclamation',
+			colour: Colour['$warning-border'],
+			size: Size.Medium,
+		},
+		[Validity.Neutral]: { name: 'circle-minus', colour: Colour['$ui-blue-6'], size: Size.Medium },
+	};
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object,  FilterValueType, RowIdType extends Primitive"
+>
+	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
+	import { getContext, tick } from 'svelte';
+	import type { ValidityCellProps } from './ValidityCellProps.js';
+
+	const { cell }: ValidityCellProps<T, FilterValueType> = $props();
+
+	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
+
+	const ColumnDef = $derived(cell.column.columnDef as AbstractDisplayDef<T, FilterValueType>);
+
+	const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
+		tableContext._focus.getFocusDetailsFor(cell)
+	);
+
+	let previousFocusElement: HTMLElement | undefined = $state();
+	let showModal = $state(false);
+
+	$effect(() => {
+		if (
+			!!tableContext.openModalCoordinates &&
+			focusDetails.coordinates.row === tableContext.openModalCoordinates.row &&
+			focusDetails.coordinates.id === tableContext.openModalCoordinates.id
+		) {
+			previousFocusElement = document.activeElement as HTMLElement | undefined;
+			showModal = true;
+		} else {
+			showModal = false;
+		}
+	});
+
+	let validity: Validity = $state(Validity.Valid);
+	let reason = $state<string | undefined>();
+
+	$effect(() => {
+		const validityPromise = focusDetails.validity;
+
+		validityPromise
+			.then((v) => {
+				if (!v) {
+					validity = Validity.Neutral;
+					reason = undefined;
+				} else if (isValidityTuple(v)) {
+					validity = v.value;
+					reason = v.reason;
+				} else {
+					validity = v;
+
+					reason = undefined;
+				}
+			})
+			.catch(devCatch);
+	});
+
+	const thisId = $derived(
+		`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`
+	);
+
+	function onclose() {
+		tableContext.setOpenModalCoordinates(null);
+
+		if (previousFocusElement?.id != thisId) {
+			tick()
+				.then(() => {
+					previousFocusElement?.focus();
+				})
+				.catch(devCatch);
+		}
+	}
+
+	const icon = $derived(iconSets[validity]);
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="focusable"
+	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="slot-wrapper"
+		class:multifocus={focusDetails.isMultiFocused}
+		class:multifocus-start={focusDetails.isMultiFocusStart}
+	>
+		<Action
+			id={thisId}
+			style={focusDetails.outline}
+			border={false}
+			colourSet={ColourSet.Auxiliary}
+			label={reason}
+			size={Size.FillWidth}
+			{icon}
+			onclick={() => {
+				if (ColumnDef.modal) {
+					tableContext.setOpenModalCoordinates(focusDetails.coordinates);
+				}
+			}}
+		/>
+	</div>
+	{#if showModal}
+		<Portal target={document.body}>
+			<ColumnDef.modal
+				{cell}
+				{onclose}
+				onsubmit={onclose}
+			/>
+		</Portal>
+	{/if}
+</div>
+
+<style>.focusable,
+.checkbox-cell,
+.input-cell,
+.select-cell,
+.datepicker-cell {
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
@@ -177,23 +181,29 @@
   position: relative;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
-  border: solid 1px #cbd4da;
-  border-left: none;
+  border-right: solid 1px #cbd4da;
+  border-bottom: solid 1px #cbd4da;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--height);
 }
 
-td.focusable {
+.focusable {
   user-select: none;
   cursor: default;
   outline: none;
 }
-td.focusable.editable {
+.focusable.editable {
   cursor: pointer;
 }
 
-td {
+.focusable,
+.checkbox-cell,
+.input-cell,
+.select-cell {
   max-height: var(--max-height);
   height: var(--height);
-  box-sizing: content-box;
+  box-sizing: border-box;
   overflow-x: clip;
   --td-padding-left: 0;
   --td-padding-right: 0;
@@ -214,4 +224,4 @@ div.slot-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
-}</style>
+}</style>

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

@@ -0,0 +1,104 @@
+import { type Primitive } from '../../../../Types/Context/TableInitOptions.js';
+import type { TableCell } from '../../../../Types/Columns/TableCell.js';
+import type { TableFocusDetails } from '../../../../Types/Focus/TableFocusDetails.svelte.js';
+import { Validity } from '../../../../../../Types/Internal/Validity.js';
+/**
+ * Options for {@link useAsyncEditable}. All reactive inputs are exposed as
+ * thunks so the helper can establish its own `$effect` / `$derived` chain
+ * on whatever reactive state the caller wraps inside.
+ */
+export interface UseAsyncEditableOptions<T extends object> {
+    /** The cell to coordinate focus / edit state for. */
+    cell: () => TableCell<T>;
+    /**
+     * Optional callback fired once a row first qualifies as `wantsToBeEdited`
+     * AND the async `editable` check has resolved true. Use this to seed a
+     * cell-local `tempValue` buffer before the inner input renders. The
+     * helper guarantees `wantsToBeEdited && editable` are both true at the
+     * time of the call.
+     */
+    onEnterEdit?: () => void;
+    /**
+     * Optional callback fired immediately after the cell leaves edit mode
+     * (either because `wantsToBeEdited` flipped false, or because the
+     * cell-specific input dispatched a commit / cancel). Cells that need
+     * "save on blur" semantics should fire `tableContext.onEditCell` here.
+     */
+    onLeaveEdit?: () => void;
+    /**
+     * Optional callback fired immediately after `isBeingEdited` becomes
+     * true, with `isMousingDown` already reset. Use to focus / select the
+     * inner input on the next tick.
+     */
+    onAfterEnterEdit?: () => void;
+}
+/**
+ * Public surface returned by {@link useAsyncEditable}. All reactive
+ * properties must be read inside a Svelte reactive scope to participate in
+ * dependency tracking.
+ */
+export interface AsyncEditable<T extends object, RowIdType extends Primitive> {
+    /** Resolved synchronous boolean from the async `isEditable` predicate. */
+    readonly editable: boolean;
+    /** True while the cell is rendering its inline edit input. */
+    readonly isBeingEdited: boolean;
+    /** The per-cell focus-details handle from `FocusState`. */
+    readonly focusDetails: TableFocusDetails<T, RowIdType>;
+    /** The latest unwrapped `Validity` for the cell. */
+    readonly validity: Validity;
+    /**
+     * Wire onto `<td onmouseup={...}>`. Returns `true` if a single-click
+     * focus was handled (and the caller should NOT also call
+     * `tableContext.endFocus`).
+     */
+    handleSingleClickFocus(): boolean;
+    /**
+     * Wire onto `<td ondblclick={...}>`. Returns `true` if a double-click
+     * focus was handled.
+     */
+    handleDoubleClickFocus(): boolean;
+    /**
+     * Pass to `$effect(() => editable.attachEditListener(tdref))`. Returns
+     * the cleanup unsubscriber for the `edit` custom event listener.
+     */
+    attachEditListener(node: HTMLElement | undefined): (() => void) | undefined;
+    /**
+     * Helper for Escape / Enter keydown handlers: clears
+     * `focusStartIsBeingEdited` and refocuses the `<td>` element on the
+     * next tick.
+     */
+    leaveEditingViaKeyboard(tdEl: HTMLElement | undefined): void;
+}
+/**
+ * Reactive editable-cell focus coordinator. Centralises the bookkeeping
+ * that all inline-editable Table cells (`TableTextInput`, `TableNumberInput`,
+ * `TableSelect`, `TableQuerySelect`) share:
+ *
+ * - resolving the async `cell.column.columnDef.isEditable(row, index)`
+ *   predicate (sync boolean or Promise of boolean) with a sequence counter
+ *   that discards stale resolutions;
+ * - deriving `wantsToBeEdited` from {@link TableContext.focusStart} /
+ *   {@link TableContext.focusEnd} / {@link TableContext.focusStartIsBeingEdited}
+ *   / {@link TableContext.isMousingDown};
+ * - mirroring the resolved `wantsToBeEdited && editable` into an
+ *   `isBeingEdited` `$state` flag, with cell-specific seed / commit hooks;
+ * - tracking the `Validity` for the cell from
+ *   {@link TableFocusDetails.validity} and unwrapping validity tuples;
+ * - wiring the `edit` custom event on the cell's `<td>` element with proper
+ *   `$effect` cleanup;
+ * - exposing `handleSingleClickFocus` / `handleDoubleClickFocus` so the
+ *   consumer can spread the standard mouseup / dblclick wiring onto its
+ *   `<td>`.
+ *
+ * Per-cell concerns the helper does NOT take over:
+ * - rendering the editing input (different per cell);
+ * - value-to-display coercion (parseFloat, Date parsing, option lookup);
+ * - keydown re-dispatch on the inner Svelecte input (Select / QuerySelect
+ *   only);
+ * - the inline-modal lifecycle of `TableDatePicker` (deferred separately).
+ *
+ * @param options Reactive inputs and lifecycle callbacks.
+ * @returns A reactive {@link AsyncEditable} bundle. Read its getters inside
+ *          a reactive scope; the helper updates them as state changes.
+ */
+export declare function useAsyncEditable<T extends object, RowIdType extends Primitive>(options: UseAsyncEditableOptions<T>): AsyncEditable<T, RowIdType>;