@lavalogic/scoria 0.33.0 → 0.35.0

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

@@ -1,371 +1,371 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object,FilterValueType"
->
-	import { dev } from '$app/environment';
-
-	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import TextInput from '../../../../TextInput.svelte';
-	import { devCatch, isValidityTuple, 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 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(
-		cell.column.columnDef.getDisplayValue?.(cell.row.original, cell.row.originalIndex) ?? value
-	);
-
-	let tempTextValue: string = $state('');
-
-	let tdref = $state<HTMLTableCellElement | 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 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);
-
-	$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);
-			});
-		}
-	});
-
-	let overrideEdit = $state(false);
-
-	$effect(() => {
-		if (isBeingEdited) {
-			if (overrideEdit) {
-				overrideEdit = false;
-			} else {
-				handleBeingEdited();
-			}
-		}
-	});
-
-	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);
-				break;
-			}
-			case 'Enter':
-				e.preventDefault();
-				e.stopPropagation();
-				tableContext.focusStartIsBeingEdited = false;
-				tick()
-					.then(() => {
-						tdref?.focus();
-					})
-					.catch(devCatch);
-				break;
-			default: {
-				//ignore other keys
-				break;
-			}
-		}
-	}
-
-	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',
-			block: 'nearest',
-			inline: 'nearest',
-		});
-	}
-
-	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;
-	});
-</script>
-
-{#if isBeingEdited}
-	<!-- {#if true} -->
-	<td class="input-cell">
-		<TextInput
-			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
-			onkeydown={handleInputKeydown}
-			variant={InputVariant.Table}
-			bind:value={tempTextValue}
-			onfocus={onInputFocus}
-			bind:inputRef
-			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>
-{:else}
-	<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-	<td
-		id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
-		style={focusDetails.outline}
-		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);
-			}
-		}}
-		bind:this={tdref}
-		tabIndex="0"
-		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}
-		onmouseup={() => {
-			const wasHandled = handleSingleClickFocus();
-			if (!wasHandled) {
-				tableContext.endFocus(focusDetails.coordinates);
-			}
-		}}
-		ondblclick={handleDoubleClickFocus}
-	>
-		{#await visibleValue}
-			{loadingText}
-		{:then value}
-			{value}
-		{:catch error}
-			{#if dev}
-				error: {error}
-				<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-				{@debug error}
-			{/if}
-			Error getting value
-		{/await}
-	</td>
-{/if}
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object,FilterValueType"
+>
+	import { dev } from '$app/environment';
+
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import TextInput from '../../../../TextInput.svelte';
+	import { devCatch, isValidityTuple, 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 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(
+		cell.column.columnDef.getDisplayValue?.(cell.row.original, cell.row.originalIndex) ?? value
+	);
+
+	let tempTextValue: string = $state('');
+
+	let tdref = $state<HTMLTableCellElement | 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 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);
+
+	$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);
+			});
+		}
+	});
+
+	let overrideEdit = $state(false);
+
+	$effect(() => {
+		if (isBeingEdited) {
+			if (overrideEdit) {
+				overrideEdit = false;
+			} else {
+				handleBeingEdited();
+			}
+		}
+	});
+
+	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);
+				break;
+			}
+			case 'Enter':
+				e.preventDefault();
+				e.stopPropagation();
+				tableContext.focusStartIsBeingEdited = false;
+				tick()
+					.then(() => {
+						tdref?.focus();
+					})
+					.catch(devCatch);
+				break;
+			default: {
+				//ignore other keys
+				break;
+			}
+		}
+	}
+
+	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',
+			block: 'nearest',
+			inline: 'nearest',
+		});
+	}
+
+	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;
+	});
+</script>
+
+{#if isBeingEdited}
+	<!-- {#if true} -->
+	<td class="input-cell">
+		<TextInput
+			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
+			onkeydown={handleInputKeydown}
+			variant={InputVariant.Table}
+			bind:value={tempTextValue}
+			onfocus={onInputFocus}
+			bind:inputRef
+			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>
+{:else}
+	<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+	<td
+		id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
+		style={focusDetails.outline}
+		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);
+			}
+		}}
+		bind:this={tdref}
+		tabIndex="0"
+		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}
+		onmouseup={() => {
+			const wasHandled = handleSingleClickFocus();
+			if (!wasHandled) {
+				tableContext.endFocus(focusDetails.coordinates);
+			}
+		}}
+		ondblclick={handleDoubleClickFocus}
+	>
+		{#await visibleValue}
+			{loadingText}
+		{:then value}
+			{value}
+		{:catch error}
+			{#if dev}
+				error: {error}
+				<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+				{@debug error}
+			{/if}
+			Error getting value
+		{/await}
+	</td>
+{/if}
+
 <style>td {
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
@@ -410,4 +410,4 @@ td.input-cell {
   padding: unset;
   box-sizing: border-box;
   vertical-align: middle;
-}</style>
+}</style>