@lavalogic/scoria 0.39.2 → 0.40.1

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

@@ -1,199 +1,199 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, FilterValueType, RowIdType extends Primitive"
->
-	import { dev } from '$app/environment';
-
-	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
-	import TextInput from '../../../../TextInput.svelte';
-	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 } from 'svelte';
-	import { useAsyncEditable } from './_helpers/useAsyncEditable.svelte.js';
-	import type { TableTextInputProps } from './TableTextInputProps.js';
-
-	const { cell }: TableTextInputProps<T, FilterValueType> = $props();
-
-	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<HTMLElement | undefined>();
-	let inputRef = $state<HTMLInputElement | undefined>();
-
-	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
-
-	/**
-	 * `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;
-
-	function onBlur(): void {
-		if (!discard && (value as string | undefined)?.trim() !== tempTextValue.trim()) {
-			tableContext
-				.onEditCell(cell.row.original, editable.focusDetails.coordinates, tempTextValue)
-				.catch(devCatch);
-		}
-
-		if (!tableContext.singleClickEditing) {
-			tableContext.focusStartIsBeingEdited = false;
-		}
-		discard = 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 {
-				tempTextValue = v?.toString() ?? '';
-			}
-		},
-		onLeaveEdit: () => {
-			onBlur();
-		},
-		onAfterEnterEdit: () => {
-			inputRef?.select();
-		},
-	});
-
-	function handleInputKeydown(e: KeyboardEvent) {
-		switch (e.key) {
-			case 'Escape': {
-				e.preventDefault();
-				e.stopPropagation();
-				discard = true;
-				editable.leaveEditingViaKeyboard(tdref);
-				break;
-			}
-			case 'Enter':
-				e.preventDefault();
-				e.stopPropagation();
-				editable.leaveEditingViaKeyboard(tdref);
-				break;
-			default: {
-				//ignore other keys
-				break;
-			}
-		}
-	}
-
-	function onInputFocus(e: FocusEvent) {
-		(e.target as HTMLInputElement).scrollIntoView({
-			behavior: 'instant',
-			block: 'nearest',
-			inline: 'nearest',
-		});
-	}
-
-	/**
-	 * 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 editable.isBeingEdited}
-	<div 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 -->
-	</div>
-{:else}
-	<!-- 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}`}
-		style={editable.focusDetails.outline}
-		onmousedown={(e) => {
-			// start focus only on left click
-			if (e.button === 0) {
-				if (e.shiftKey) {
-					e.preventDefault();
-					tableContext.setFocusEnd(editable.focusDetails.coordinates);
-				} else {
-					tableContext.startFocus(editable.focusDetails.coordinates);
-				}
-			}
-		}}
-		onmouseover={() => {
-			if (tableContext.isMousingDown) {
-				tableContext.setFocusEnd(editable.focusDetails.coordinates);
-			}
-		}}
-		bind:this={tdref}
-		tabIndex="0"
-		class:editable={editable.editable}
-		class="focusable"
-		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 = 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);
-			}
-		}}
-	>
-		{#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}
-	</div>
-{/if}
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, FilterValueType, RowIdType extends Primitive"
+>
+	import { dev } from '$app/environment';
+
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
+	import TextInput from '../../../../TextInput.svelte';
+	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 } from 'svelte';
+	import { useAsyncEditable } from './_helpers/useAsyncEditable.svelte.js';
+	import type { TableTextInputProps } from './TableTextInputProps.js';
+
+	const { cell }: TableTextInputProps<T, FilterValueType> = $props();
+
+	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<HTMLElement | undefined>();
+	let inputRef = $state<HTMLInputElement | undefined>();
+
+	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
+
+	/**
+	 * `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;
+
+	function onBlur(): void {
+		if (!discard && (value as string | undefined)?.trim() !== tempTextValue.trim()) {
+			tableContext
+				.onEditCell(cell.row.original, editable.focusDetails.coordinates, tempTextValue)
+				.catch(devCatch);
+		}
+
+		if (!tableContext.singleClickEditing) {
+			tableContext.focusStartIsBeingEdited = false;
+		}
+		discard = 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 {
+				tempTextValue = v?.toString() ?? '';
+			}
+		},
+		onLeaveEdit: () => {
+			onBlur();
+		},
+		onAfterEnterEdit: () => {
+			inputRef?.select();
+		},
+	});
+
+	function handleInputKeydown(e: KeyboardEvent) {
+		switch (e.key) {
+			case 'Escape': {
+				e.preventDefault();
+				e.stopPropagation();
+				discard = true;
+				editable.leaveEditingViaKeyboard(tdref);
+				break;
+			}
+			case 'Enter':
+				e.preventDefault();
+				e.stopPropagation();
+				editable.leaveEditingViaKeyboard(tdref);
+				break;
+			default: {
+				//ignore other keys
+				break;
+			}
+		}
+	}
+
+	function onInputFocus(e: FocusEvent) {
+		(e.target as HTMLInputElement).scrollIntoView({
+			behavior: 'instant',
+			block: 'nearest',
+			inline: 'nearest',
+		});
+	}
+
+	/**
+	 * 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 editable.isBeingEdited}
+	<div 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 -->
+	</div>
+{:else}
+	<!-- 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}`}
+		style={editable.focusDetails.outline}
+		onmousedown={(e) => {
+			// start focus only on left click
+			if (e.button === 0) {
+				if (e.shiftKey) {
+					e.preventDefault();
+					tableContext.setFocusEnd(editable.focusDetails.coordinates);
+				} else {
+					tableContext.startFocus(editable.focusDetails.coordinates);
+				}
+			}
+		}}
+		onmouseover={() => {
+			if (tableContext.isMousingDown) {
+				tableContext.setFocusEnd(editable.focusDetails.coordinates);
+			}
+		}}
+		bind:this={tdref}
+		tabIndex="0"
+		class:editable={editable.editable}
+		class="focusable"
+		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 = 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);
+			}
+		}}
+	>
+		{#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}
+	</div>
+{/if}
+
 <style>.focusable,
 .checkbox-cell,
 .input-cell,
@@ -260,4 +260,4 @@
 .input-cell {
   padding: unset;
   box-sizing: border-box;
-}</style>
+}</style>