@lavalogic/scoria 0.40.14 → 0.40.16

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

@@ -1,218 +1,180 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import type { TableCell } from '../../../Types/Columns/TableCell.js';
-
-	/**
-	 * Props for {@link TableNumberInput}. The cell renders a `NumberInput`
-	 * when the row enters edit mode, otherwise shows the awaited display
-	 * value. Cell value is parsed to `number` through `parseFloat` so that
-	 * decimal values are preserved.
-	 */
-	export interface TableNumberInputProps<T extends object> {
-		/** The number cell to render. */
-		cell: TableCell<T>;
-	}
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object, RowIdType extends Primitive"
->
-	import NumberInput from '../../../../NumberInput.svelte';
-	import { NumberInputDef } from '../../../Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js';
-	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import { type Primitive } from '../../../Types/Context/TableInitOptions.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 { useAsyncEditable } from './_helpers/useAsyncEditable.svelte.js';
-
-	const { cell }: TableNumberInputProps<T> = $props();
-
-	/**
-	 * Coerce the cell value (which may be a string, number, null, or a promise)
-	 * into a numeric (or numeric-string / null) value usable by `NumberInput`.
-	 * `parseFloat` preserves decimals (the original used `parseInt`, which was
-	 * a P2 workorder finding because it silently truncated `12.34` to `12`).
-	 */
-	const value: Promise<number | string | null> | number | string | null = $derived.by(() => {
-		const _value = cell.getValue();
-
-		return typeof _value === 'string'
-			? parseFloat(_value)
-			: typeof _value === 'number'
-				? _value
-				: ((_value as Promise<string | number | null | undefined> | null | undefined)?.then((v) => {
-						return typeof v === 'string' ? parseFloat(v) : (v ?? null);
-					}) ?? null);
-	});
-	let tempNumericValue: number = $state(0);
-
-	const visibleValue = $derived(
-		cell.column.columnDef.getDisplayValue?.(cell.row.original, cell.row.originalIndex) ?? value
-	);
-
-	$effect(() => {
-		void value;
-		untrack(() => {
-			resetValue();
-		});
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>export {};
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object, RowIdType extends Primitive"
+>import NumberInput from "../../../../NumberInput.svelte";
+import { NumberInputDef } from "../../../Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js";
+import { TableContext } from "../../../Types/Context/TableContext.svelte.js";
+import "../../../Types/Context/TableInitOptions.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 { useAsyncEditable } from "./_helpers/useAsyncEditable.svelte.js";
+const { cell } = $props();
+/**
+* Coerce the cell value (which may be a string, number, null, or a promise)
+* into a numeric (or numeric-string / null) value usable by `NumberInput`.
+* `parseFloat` preserves decimals (the original used `parseInt`, which was
+* a P2 workorder finding because it silently truncated `12.34` to `12`).
+*/
+const value = $derived.by(() => {
+	const _value = cell.getValue();
+	return typeof _value === "string" ? parseFloat(_value) : typeof _value === "number" ? _value : _value?.then((v) => {
+		return typeof v === "string" ? parseFloat(v) : v ?? null;
+	}) ?? null;
+});
+let tempNumericValue = $state(0);
+const visibleValue = $derived(cell.column.columnDef.getDisplayValue?.(cell.row.original, cell.row.originalIndex) ?? value);
+$effect(() => {
+	void value;
+	untrack(() => {
+		resetValue();
 	});
-
-	function resetValue() {
-		tempNumericValue = typeof value === 'string' ? parseFloat(value) : (value as number);
+});
+function resetValue() {
+	tempNumericValue = typeof value === "string" ? parseFloat(value) : value;
+}
+let tdref = $state();
+let inputRef = $state();
+const tableContext = getContext(TableContext.identifier);
+function onBlur() {
+	const oldValue = typeof value === "string" ? parseFloat(value) : value;
+	if (oldValue != tempNumericValue) {
+		tableContext.onEditCell(cell.row.original, editable.focusDetails.coordinates, tempNumericValue).catch(devCatch);
 	}
-
-	let tdref: HTMLElement | undefined = $state();
-	let inputRef: HTMLInputElement | undefined = $state();
-
-	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
-
-	function onBlur(): void {
-		const oldValue = typeof value === 'string' ? parseFloat(value) : value;
-
-		if (oldValue != tempNumericValue) {
-			tableContext
-				.onEditCell(cell.row.original, editable.focusDetails.coordinates, tempNumericValue)
-				.catch(devCatch);
-		}
-
-		if (!tableContext.singleClickEditing) {
-			tableContext.focusStartIsBeingEdited = false;
-		}
+	if (!tableContext.singleClickEditing) {
+		tableContext.focusStartIsBeingEdited = false;
 	}
-
-	const editable = useAsyncEditable<T, RowIdType>({
-		cell: () => cell,
-		onLeaveEdit: () => {
-			onBlur();
-		},
-		onAfterEnterEdit: () => {
-			inputRef?.select();
-		},
-	});
-
-	function handleInputKeydown(e: KeyboardEvent) {
-		switch (e.key) {
-			case 'Escape':
-				e.preventDefault();
-				e.stopPropagation();
-
-				resetValue();
-				editable.leaveEditingViaKeyboard(tdref);
-				break;
-			case 'Enter':
-				e.preventDefault();
-				e.stopPropagation();
-
-				(e.target as HTMLInputElement).blur();
-				editable.leaveEditingViaKeyboard(tdref);
-				break;
-			default: {
-				//ignore other keys
-				break;
-			}
-		}
+}
+const editable = useAsyncEditable({
+	cell: () => cell,
+	onLeaveEdit: () => {
+		onBlur();
+	},
+	onAfterEnterEdit: () => {
+		inputRef?.select();
 	}
-
-	function onInputFocus(e: FocusEvent) {
-		(e.target as HTMLInputElement).scrollIntoView({
-			behavior: 'instant',
-			block: 'nearest',
-			inline: 'nearest',
-		});
+});
+function handleInputKeydown(e) {
+	switch (e.key) {
+		case "Escape":
+			e.preventDefault();
+			e.stopPropagation();
+			resetValue();
+			editable.leaveEditingViaKeyboard(tdref);
+			break;
+		case "Enter":
+			e.preventDefault();
+			e.stopPropagation();
+			e.target.blur();
+			editable.leaveEditingViaKeyboard(tdref);
+			break;
+		default: {
+			//ignore other keys
+			break;
+		}
 	}
-
-	/**
-	 * Effect wires the custom `edit` event via the shared
-	 * `useAsyncEditable` helper, which returns a cleanup unsubscriber so the
-	 * listener is removed when `tdref` is remounted or the cell unmounts.
-	 */
-	$effect(() => editable.attachEditListener(tdref));
-</script>
-
-{#if editable.isBeingEdited}
-	<div class="input-cell">
-		<NumberInput
-			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
-			min={(cell.column.columnDef as NumberInputDef<T>).min}
-			max={(cell.column.columnDef as NumberInputDef<T>).max}
-			variant={InputVariant.Table}
-			onkeydown={handleInputKeydown}
-			bind:value={tempNumericValue}
-			onfocus={onInputFocus}
-			bind:inputRef
-		/>
-		<!-- 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
-		style={editable.focusDetails.outline}
-		id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
-		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);
-			}
-		}}
-		onmouseup={() => {
-			const wasHandled = editable.handleSingleClickFocus();
-			if (wasHandled) {
-				resetValue();
-				tick()
-					.then(() => {
-						inputRef?.focus();
-					})
-					.catch(devCatch);
-			} else {
-				tableContext.endFocus(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}
-		ondblclick={() => {
-			const wasHandled = editable.handleDoubleClickFocus();
-			if (wasHandled) {
-				resetValue();
-				tick()
-					.then(() => {
-						inputRef?.focus();
-					})
-					.catch(devCatch);
-			}
-		}}
-	>
-		{#await visibleValue}
-			{loadingText}
-		{:then value}{value ?? '-'}{/await}
-	</div>
-{/if}
-
+}
+function onInputFocus(e) {
+	e.target.scrollIntoView({
+		behavior: "instant",
+		block: "nearest",
+		inline: "nearest"
+	});
+}
+/**
+* Effect wires the custom `edit` event via the shared
+* `useAsyncEditable` helper, which returns a cleanup unsubscriber so the
+* listener is removed when `tdref` is remounted or the cell unmounts.
+*/
+$effect(() => editable.attachEditListener(tdref));
+</script>
+
+{#if editable.isBeingEdited}
+	<div class="input-cell">
+		<NumberInput
+			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
+			min={(cell.column.columnDef as NumberInputDef<T>).min}
+			max={(cell.column.columnDef as NumberInputDef<T>).max}
+			variant={InputVariant.Table}
+			onkeydown={handleInputKeydown}
+			bind:value={tempNumericValue}
+			onfocus={onInputFocus}
+			bind:inputRef
+		/>
+		<!-- 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
+		style={editable.focusDetails.outline}
+		id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
+		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);
+			}
+		}}
+		onmouseup={() => {
+			const wasHandled = editable.handleSingleClickFocus();
+			if (wasHandled) {
+				resetValue();
+				tick()
+					.then(() => {
+						inputRef?.focus();
+					})
+					.catch(devCatch);
+			} else {
+				tableContext.endFocus(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}
+		ondblclick={() => {
+			const wasHandled = editable.handleDoubleClickFocus();
+			if (wasHandled) {
+				resetValue();
+				tick()
+					.then(() => {
+						inputRef?.focus();
+					})
+					.catch(devCatch);
+			}
+		}}
+	>
+		{#await visibleValue}
+			{loadingText}
+		{:then value}{value ?? '-'}{/await}
+	</div>
+{/if}
+
 <style>.focusable,
 .checkbox-cell,
 .input-cell,
@@ -279,4 +241,4 @@
 .input-cell {
   padding: unset;
   box-sizing: border-box;
-}</style>
+}</style>