@lavalogic/scoria 0.36.0 → 0.37.1

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

@@ -2,55 +2,22 @@
 
 <script
 	lang="ts"
-	generics="T extends object,FilterValueType"
+	generics="T extends object, FilterValueType, RowIdType extends Primitive"
 >
 	import { dev } from '$app/environment';
 
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
 	import TextInput from '../../../../TextInput.svelte';
-	import { devCatch, isValidityTuple, loadingText } from '../../../../../Helpers/Helpers.svelte.js';
+	import { devCatch, loadingText } 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';
+	import { getContext, tick } from 'svelte';
+	import { useAsyncEditable } from './_helpers/useAsyncEditable.svelte.js';
 	import type { TableTextInputProps } from './TableTextInputProps.js';
 
 	const { cell }: TableTextInputProps<T, FilterValueType> = $props();
 
-	// const columnDef: ITextInputColumnAccessorDef<T> = $derived(
-	// 	getNumberColumnDefOrError(cell.column.columnDef)
-	// );
-
-	const editableAsync = $derived(
-		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
-	);
-	let editable = $state(false);
-
-	let asyncCounter = 0;
-	$effect(() => {
-		void editableAsync;
-		const localCounter = (asyncCounter = asyncCounter + 1);
-		(async () => {
-			try {
-				const isEditable = await editableAsync;
-				if (asyncCounter === localCounter) {
-					editable = isEditable;
-				} else if (cell.column.columnDef.debug) {
-					console.log('skipping async editable because it is stale');
-				}
-			} catch (e) {
-				if (cell.column.columnDef.debug) {
-					console.error(e);
-				}
-				if (asyncCounter === localCounter) {
-					editable = false;
-				} else if (cell.column.columnDef.debug) {
-					console.log('skipping async editable because it is stale');
-				}
-			}
-		})().catch(devCatch);
-	});
-
 	const value = $derived(cell.getValue());
 
 	const visibleValue = $derived(
@@ -59,132 +26,66 @@
 
 	let tempTextValue: string = $state('');
 
-	let tdref = $state<HTMLTableCellElement | undefined>();
+	let tdref = $state<HTMLElement | undefined>();
 	let inputRef = $state<HTMLInputElement | undefined>();
 
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	const focusDetails: TableFocusDetails<T, never> = $derived(
-		new TableFocusDetails(cell, tableContext)
-	);
+	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
 
-	const wantsToBeEdited = $derived(
-		tableContext.focusStart?.column === focusDetails.coordinates.column &&
-			tableContext.focusEnd?.column === focusDetails.coordinates.column &&
-			tableContext.focusStart.row === focusDetails.coordinates.row &&
-			tableContext.focusEnd.row === focusDetails.coordinates.row &&
-			!tableContext.isMousingDown &&
-			tableContext.focusStartIsBeingEdited
-	);
-
-	let isBeingEdited = $state(false);
+	/**
+	 * `discard` is set by the Escape keydown so the subsequent `onBlur`
+	 * fires the focus-restore but does NOT commit the cell value. It is
+	 * cell-specific (TableTextInput is the only cell with discard-on-Escape
+	 * for blur commits) and therefore stays inline rather than moving into
+	 * the shared `useAsyncEditable` helper.
+	 */
+	let discard = false;
 
-	$effect(() => {
-		if (wantsToBeEdited) {
-			if (editable) {
-				tick()
-					.then(() => {
-						if (typeof value == 'object' && value instanceof Promise) {
-							value
-								.then((v: unknown) => {
-									tempTextValue = v?.toString() ?? '';
-									isBeingEdited = true;
-								})
-								.catch(devCatch);
-						} else {
-							tempTextValue = value?.toString() ?? '';
-							isBeingEdited = true;
-						}
-					})
-					.catch(devCatch);
-			} else {
-				tick()
-					.then(() => {
-						untrack(() => {
-							tableContext.focusStartIsBeingEdited = false;
-						});
-					})
-					.catch(devCatch);
-			}
-		} else if (isBeingEdited) {
-			untrack(() => {
-				isBeingEdited = false;
-				tick()
-					.then(() => {
-						onBlur();
-					})
-					.catch(devCatch);
-			});
+	function onBlur(): void {
+		if (!discard && (value as string | undefined)?.trim() !== tempTextValue.trim()) {
+			tableContext
+				.onEditCell(cell.row.original, editable.focusDetails.coordinates, tempTextValue)
+				.catch(devCatch);
 		}
-	});
 
-	let overrideEdit = $state(false);
+		if (!tableContext.singleClickEditing) {
+			tableContext.focusStartIsBeingEdited = false;
+		}
+		discard = false;
+	}
 
-	$effect(() => {
-		if (isBeingEdited) {
-			if (overrideEdit) {
-				overrideEdit = false;
+	const editable = useAsyncEditable<T, RowIdType>({
+		cell: () => cell,
+		onEnterEdit: () => {
+			const v = value;
+			if (typeof v == 'object' && v instanceof Promise) {
+				v.then((awaited: unknown) => {
+					tempTextValue = awaited?.toString() ?? '';
+				}).catch(devCatch);
 			} else {
-				handleBeingEdited();
+				tempTextValue = v?.toString() ?? '';
 			}
-		}
+		},
+		onLeaveEdit: () => {
+			onBlur();
+		},
+		onAfterEnterEdit: () => {
+			inputRef?.select();
+		},
 	});
 
-	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);
-	});
-
-	function handleBeingEdited() {
-		tableContext.isMousingDown = false;
-		tick()
-			.then(() => {
-				inputRef?.select();
-			})
-			.catch(devCatch);
-	}
-
-	let discard = false;
 	function handleInputKeydown(e: KeyboardEvent) {
-		// if (e.target.)
 		switch (e.key) {
 			case 'Escape': {
 				e.preventDefault();
 				e.stopPropagation();
-				// TODO save or discard on esc?
 				discard = true;
-				// value = getValue();
-
-				// tempTextValue = value?.toString() || '';
-				tableContext.focusStartIsBeingEdited = false;
-				tick()
-					.then(() => {
-						tdref?.focus();
-					})
-					.catch(devCatch);
+				editable.leaveEditingViaKeyboard(tdref);
 				break;
 			}
 			case 'Enter':
 				e.preventDefault();
 				e.stopPropagation();
-				tableContext.focusStartIsBeingEdited = false;
-				tick()
-					.then(() => {
-						tdref?.focus();
-					})
-					.catch(devCatch);
+				editable.leaveEditingViaKeyboard(tdref);
 				break;
 			default: {
 				//ignore other keys
@@ -193,19 +94,6 @@
 		}
 	}
 
-	function onBlur(): void {
-		if (!discard && (value as string | undefined)?.trim() !== tempTextValue.trim()) {
-			tableContext
-				.onEditCell(cell.row.original, focusDetails.coordinates, tempTextValue)
-				.catch(devCatch);
-		}
-
-		if (!tableContext.singleClickEditing) {
-			tableContext.focusStartIsBeingEdited = false;
-		}
-		discard = false;
-	}
-
 	function onInputFocus(e: FocusEvent) {
 		(e.target as HTMLInputElement).scrollIntoView({
 			behavior: 'instant',
@@ -214,86 +102,17 @@
 		});
 	}
 
-	const onEdit = (e: CustomEvent<{ selectAll: boolean }>) => {
-		handleTDFocus(e.detail.selectAll);
-	};
-
-	function handleTDFocus(selectAll: boolean = false): boolean {
-		if (
-			tableContext.focusStart?.column === focusDetails.coordinates.column &&
-			tableContext.focusStart.row === focusDetails.coordinates.row &&
-			editable
-		) {
-			if (
-				tableContext.focusEnd?.column !== focusDetails.coordinates.column ||
-				tableContext.focusEnd.row !== focusDetails.coordinates.row
-			) {
-				tableContext.setFocusEnd(focusDetails.coordinates);
-			}
-
-			// tempTextValue = value?.toString() || '';
-			tableContext.isMousingDown = false;
-
-			if (!selectAll) {
-				overrideEdit = true;
-
-				tick()
-					.then(() => {
-						inputRef?.focus();
-					})
-					.catch(devCatch);
-			}
-
-			tableContext.focusStartIsBeingEdited = true;
-
-			return true;
-		}
-
-		return false;
-	}
-
-	function handleSingleClickFocus(): boolean {
-		return tableContext.singleClickEditing && handleTDFocus();
-	}
-
-	function handleDoubleClickFocus() {
-		return !tableContext.singleClickEditing && handleTDFocus();
-	}
-
-	// function getNumberColumnDefOrError(columnDef: IColumnDef<T>): ITextInputColumnAccessorDef<T> {
-	// 	if (
-	// 		!dev ||
-	// 		columnDef.columnType == undefined ||
-	// 		(columnDef.columnType === 'Accessor' && 'type' in columnDef && columnDef.type === 'Text')
-	// 	) {
-	// 		return columnDef as ITextInputColumnAccessorDef<T>;
-	// 	}
-
-	// 	throw new Error('Column type is not a number input accessor def');
-	// }
-
-	let prevTdRef: HTMLTableCellElement | undefined;
-
-	$effect(() => {
-		let unsubscriber = () => {};
-
-		if (tdref != prevTdRef) {
-			untrack(() => {
-				prevTdRef = tdref;
-				tdref?.addEventListener('edit', onEdit);
-				unsubscriber = () => {
-					prevTdRef?.removeEventListener('edit', onEdit);
-				};
-			});
-		}
-
-		return unsubscriber;
-	});
+	/**
+	 * Effect wires the `edit` custom event with proper cleanup on tdref
+	 * remount or component unmount (replaces the previous `prevTdRef` pattern
+	 * that accumulated listeners; P2 workorder finding). The listener wiring
+	 * lives in the shared `useAsyncEditable` helper.
+	 */
+	$effect(() => editable.attachEditListener(tdref));
 </script>
 
-{#if isBeingEdited}
-	<!-- {#if true} -->
-	<td class="input-cell">
+{#if editable.isBeingEdited}
+	<div class="input-cell">
 		<TextInput
 			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
 			onkeydown={handleInputKeydown}
@@ -304,52 +123,61 @@
 			onblur={onBlur}
 		/>
 		<!-- HACK this onBlur is now being called by an effect because otherwise it fires twice -->
-		<!-- 
-		leftIcon={{
-				name: 'edit',
-				colour: Colour['$dark-blue'],
-				size: Size.MediumLarge
-			}}
-				 -->
-	</td>
+	</div>
 {:else}
 	<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-	<td
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
 		id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
-		style={focusDetails.outline}
+		style={editable.focusDetails.outline}
 		onmousedown={(e) => {
 			// start focus only on left click
 			if (e.button === 0) {
 				if (e.shiftKey) {
 					e.preventDefault();
-					tableContext.setFocusEnd(focusDetails.coordinates);
+					tableContext.setFocusEnd(editable.focusDetails.coordinates);
 				} else {
-					tableContext.startFocus(focusDetails.coordinates);
+					tableContext.startFocus(editable.focusDetails.coordinates);
 				}
 			}
 		}}
 		onmouseover={() => {
 			if (tableContext.isMousingDown) {
-				tableContext.setFocusEnd(focusDetails.coordinates);
+				tableContext.setFocusEnd(editable.focusDetails.coordinates);
 			}
 		}}
 		bind:this={tdref}
 		tabIndex="0"
-		class:editable
+		class:editable={editable.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}
+		class:multifocus={editable.focusDetails.isMultiFocused}
+		class:multifocus-start={editable.focusDetails.isMultiFocusStart}
+		class:info={editable.validity == Validity.Info}
+		class:success={editable.validity == Validity.Valid}
+		class:warning={editable.validity == Validity.Warning}
+		class:error={editable.validity == Validity.Invalid}
 		onmouseup={() => {
-			const wasHandled = handleSingleClickFocus();
-			if (!wasHandled) {
-				tableContext.endFocus(focusDetails.coordinates);
+			const wasHandled = editable.handleSingleClickFocus();
+			if (wasHandled) {
+				tick()
+					.then(() => {
+						inputRef?.focus();
+					})
+					.catch(devCatch);
+			} else {
+				tableContext.endFocus(editable.focusDetails.coordinates);
+			}
+		}}
+		ondblclick={() => {
+			const wasHandled = editable.handleDoubleClickFocus();
+			if (wasHandled) {
+				tick()
+					.then(() => {
+						inputRef?.focus();
+					})
+					.catch(devCatch);
 			}
 		}}
-		ondblclick={handleDoubleClickFocus}
 	>
 		{#await visibleValue}
 			{loadingText}
@@ -363,10 +191,14 @@
 			{/if}
 			Error getting value
 		{/await}
-	</td>
+	</div>
 {/if}
 
-<style>td {
+<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);
@@ -376,38 +208,55 @@
   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.multifocus {
+.focusable.multifocus,
+.checkbox-cell.multifocus,
+.input-cell.multifocus,
+.select-cell.multifocus {
   background-color: var(--multifocus-colour, #e6f8fd);
 }
-td.multifocus.multifocus-start {
+.focusable.multifocus.multifocus-start,
+.checkbox-cell.multifocus.multifocus-start,
+.input-cell.multifocus.multifocus-start,
+.select-cell.multifocus.multifocus-start {
   background-color: #ffffff;
 }
 
-td.focusable {
+.focusable {
   user-select: none;
   cursor: default;
   outline: none;
 }
-td.focusable.editable {
+.focusable.editable {
   cursor: pointer;
 }
 
-td.info {
+.focusable.info,
+.checkbox-cell.info,
+.input-cell.info,
+.select-cell.info {
   background-color: #1f81a0;
 }
-td.warning {
+.focusable.warning,
+.checkbox-cell.warning,
+.input-cell.warning,
+.select-cell.warning {
   background-color: #f8eab8;
 }
-td.error {
+.focusable.error,
+.checkbox-cell.error,
+.input-cell.error,
+.select-cell.error {
   background-color: #f9e9e9;
 }
 
-td.input-cell {
+.input-cell {
   padding: unset;
   box-sizing: border-box;
-  vertical-align: middle;
 }</style>

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>;
 }