@lavalogic/scoria 0.40.14 → 0.40.16

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

@@ -1,254 +1,214 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, RowIdType extends Primitive"
->
-	import QuerySelect from '../../../../QuerySelect.svelte';
-	import type { QueryDef } from '../../../Types/Columns/Definitions/Accessors/QueryDef.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 type { SelectOption } from '../../../../../Types/Internal/SelectOption.js';
-	import { Validity } from '../../../../../Types/Internal/Validity.js';
-	import { getContext, tick, untrack } from 'svelte';
-	import { useAsyncEditable } from './_helpers/useAsyncEditable.svelte.js';
-	import type { TableQuerySelectProps } from './TableQuerySelectProps.js';
-
-	const { cell }: TableQuerySelectProps<T, unknown> = $props();
-
-	const value = $derived((cell.getValue() ?? null) as unknown);
-
-	const visibleValue = $derived(
-		cell.column.columnDef.getDisplayValue(cell.row.original, cell.row.originalIndex)
-	);
-
-	let tdref = $state<HTMLElement | undefined>();
-
-	/**
-	 * Narrow the column def to `QueryDef<T>`. `TableCell.column.columnDef`
-	 * is the loose `ColumnDef<T>`; `TableColumn` only dispatches this
-	 * component when the underlying def is a `QueryDef`, but the static
-	 * type does not reflect that.
-	 */
-	const columnDef: QueryDef<T> = $derived(cell.column.columnDef) as unknown as QueryDef<T>;
-
-	// `bind:options` below requires a `let` binding even though we never
-	// reassign the reference (Svelte uses the binding for two-way wiring).
-	// eslint-disable-next-line svelte/prefer-const
-	let lastOptions: Array<SelectOption<unknown>> = $state([]);
-
-	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
-
-	let valueAsyncCounter = 0;
-	$effect(() => {
-		void value;
-		void lastOptions;
-
-		untrack(() => {
-			const localCounter = (valueAsyncCounter = valueAsyncCounter + 1);
-			(async () => {
-				try {
-					const awaitedValue = await value;
-					const label = (await visibleValue) ?? awaitedValue?.toString();
-
-					if (awaitedValue != null && valueAsyncCounter === localCounter) {
-						if (label == null) {
-							throw new Error('invalid label and value');
-						}
-						if (!lastOptions.some((it) => it.value == awaitedValue)) {
-							lastOptions.push({
-								label,
-								value: awaitedValue,
-							});
-						}
-					} else if (columnDef.debug) {
-						console.debug(
-							`${cell.column.columnDef.id}: `,
-							'skipping async option insertion because it is stale'
-						);
-					}
-				} catch (e) {
-					if (columnDef.debug) {
-						console.error(e);
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, RowIdType extends Primitive"
+>import QuerySelect from "../../../../QuerySelect.svelte";
+import { TableContext } from "../../../Types/Context/TableContext.svelte.js";
+import "../../../Types/Context/TableInitOptions.js";
+import { devCatch, loadingText } from "../../../../../Helpers/Helpers.svelte.js";
+import { Validity } from "../../../../../Types/Internal/Validity.js";
+import { getContext, tick, untrack } from "svelte";
+import { useAsyncEditable } from "./_helpers/useAsyncEditable.svelte.js";
+const { cell } = $props();
+const value = $derived(cell.getValue() ?? null);
+const visibleValue = $derived(cell.column.columnDef.getDisplayValue(cell.row.original, cell.row.originalIndex));
+let tdref = $state();
+/**
+* Narrow the column def to `QueryDef<T>`. `TableCell.column.columnDef`
+* is the loose `ColumnDef<T>`; `TableColumn` only dispatches this
+* component when the underlying def is a `QueryDef`, but the static
+* type does not reflect that.
+*/
+const columnDef = $derived(cell.column.columnDef);
+// `bind:options` below requires a `let` binding even though we never
+// reassign the reference (Svelte uses the binding for two-way wiring).
+// eslint-disable-next-line svelte/prefer-const
+let lastOptions = $state([]);
+const tableContext = getContext(TableContext.identifier);
+let valueAsyncCounter = 0;
+$effect(() => {
+	void value;
+	void lastOptions;
+	untrack(() => {
+		const localCounter = valueAsyncCounter = valueAsyncCounter + 1;
+		(async () => {
+			try {
+				const awaitedValue = await value;
+				const label = await visibleValue ?? awaitedValue?.toString();
+				if (awaitedValue != null && valueAsyncCounter === localCounter) {
+					if (label == null) {
+						throw new Error("invalid label and value");
 					}
-					if (valueAsyncCounter === localCounter) {
-						//nothing happens
-					} else if (columnDef.debug) {
-						console.debug(
-							`${cell.column.columnDef.id}: `,
-							'skipping caught async option insertion error because it is stale'
-						);
+					if (!lastOptions.some((it) => it.value == awaitedValue)) {
+						lastOptions.push({
+							label,
+							value: awaitedValue
+						});
 					}
+				} else if (columnDef.debug) {
+					console.debug(`${cell.column.columnDef.id}: `, "skipping async option insertion because it is stale");
 				}
-			})().catch(devCatch);
-		});
-	});
-
-	const editable = useAsyncEditable<T, RowIdType>({
-		cell: () => cell,
+			} catch (e) {
+				if (columnDef.debug) {
+					console.error(e);
+				}
+				if (valueAsyncCounter === localCounter) {} else if (columnDef.debug) {
+					console.debug(`${cell.column.columnDef.id}: `, "skipping caught async option insertion error because it is stale");
+				}
+			}
+		})().catch(devCatch);
 	});
-
-	function handleUnfocus(e: KeyboardEvent) {
-		if (e.key === 'Escape') {
-			e.preventDefault();
-			e.stopPropagation();
-			editable.leaveEditingViaKeyboard(tdref);
-			return true;
-		}
-
-		if (e.key === 'Tab') {
-			e.preventDefault();
-			return true;
-		}
-
-		return false;
+});
+const editable = useAsyncEditable({ cell: () => cell });
+function handleUnfocus(e) {
+	if (e.key === "Escape") {
+		e.preventDefault();
+		e.stopPropagation();
+		editable.leaveEditingViaKeyboard(tdref);
+		return true;
 	}
-
-	function keydownForce(e: KeyboardEvent) {
-		const shouldStop = handleUnfocus(e);
-		if (!shouldStop && !(e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
-			tick()
-				.then(() => {
-					tdref?.dispatchEvent(
-						new KeyboardEvent('keydown', {
-							key: e.key,
-							altKey: e.getModifierState('Alt'),
-							metaKey: e.getModifierState('Meta'),
-							shiftKey: e.getModifierState('Shift'),
-							ctrlKey: e.getModifierState('Control'),
-							bubbles: true,
-						})
-					);
-				})
-				.catch(devCatch);
-		}
+	if (e.key === "Tab") {
+		e.preventDefault();
+		return true;
 	}
-
-	/**
-	 * Track the inner QuerySelect input so the keydown re-dispatcher is
-	 * removed cleanly on blur or remount. This wiring is cell-specific
-	 * (Select / QuerySelect only) and so lives outside the shared
-	 * `useAsyncEditable` helper.
-	 */
-	let activeKeydownTarget: HTMLInputElement | undefined;
-
-	function addKeydownEvent(target: HTMLInputElement | undefined) {
-		if (activeKeydownTarget && activeKeydownTarget !== target) {
-			activeKeydownTarget.removeEventListener('keydown', keydownForce);
-		}
-		if (target) {
-			target.addEventListener('keydown', keydownForce);
-			activeKeydownTarget = target;
-		}
+	return false;
+}
+function keydownForce(e) {
+	const shouldStop = handleUnfocus(e);
+	if (!shouldStop && !(e.key === "ArrowUp" || e.key === "ArrowDown")) {
+		tick().then(() => {
+			tdref?.dispatchEvent(new KeyboardEvent("keydown", {
+				key: e.key,
+				altKey: e.getModifierState("Alt"),
+				metaKey: e.getModifierState("Meta"),
+				shiftKey: e.getModifierState("Shift"),
+				ctrlKey: e.getModifierState("Control"),
+				bubbles: true
+			}));
+		}).catch(devCatch);
 	}
-
-	function removeKeydownEvent() {
-		if (activeKeydownTarget) {
-			activeKeydownTarget.removeEventListener('keydown', keydownForce);
-			activeKeydownTarget = undefined;
-		}
+}
+/**
+* Track the inner QuerySelect input so the keydown re-dispatcher is
+* removed cleanly on blur or remount. This wiring is cell-specific
+* (Select / QuerySelect only) and so lives outside the shared
+* `useAsyncEditable` helper.
+*/
+let activeKeydownTarget;
+function addKeydownEvent(target) {
+	if (activeKeydownTarget && activeKeydownTarget !== target) {
+		activeKeydownTarget.removeEventListener("keydown", keydownForce);
 	}
-
-	/**
-	 * Wire the `edit` custom event with cleanup on tdref remount or
-	 * component unmount. The listener plumbing lives in the shared
-	 * `useAsyncEditable` helper.
-	 */
-	$effect(() => editable.attachEditListener(tdref));
-
-	// Ensure the keydown listener is dropped when the cell unmounts.
-	$effect(() => removeKeydownEvent);
-</script>
-
-{#if editable.isBeingEdited}
-	<div
-		class="select-cell"
-		bind:this={tdref}
-	>
-		{#await value then value}
-			<QuerySelect
-				focusOnLoad
-				name={cell.column.columnDef.id}
-				valueProp={'value' as never}
-				labelProp={'label' as never}
-				clearable={cell.column.columnDef.clearable}
-				valueAsObject={false}
-				value={value as never}
-				query={(v: string) => columnDef.query(v, cell.row.original, cell.row.originalIndex)}
-				bind:options={lastOptions as never}
-				onfocus={addKeydownEvent}
-				onchange={(newValue: unknown) => {
-					// `valueAsObject={false}` makes QuerySelect emit the
-					// primitive value directly. The `as never` casts work
-					// around component-generic inference (see TableSelect
-					// for the same workaround).
-					if (newValue !== value) {
-						tableContext
-							.onEditCell(cell.row.original, editable.focusDetails.coordinates, newValue ?? null)
-							.catch(devCatch);
-					}
-
-					removeKeydownEvent();
-					tableContext.focusStartIsBeingEdited = false;
-					tick()
-						.then(() => {
-							tdref?.focus();
-						})
-						.catch(devCatch);
-				}}
-			/>
-		{/await}
-	</div>
-{:else}
-	<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div
-		style={editable.focusDetails.outline}
-		bind:this={tdref}
-		tabIndex="0"
-		id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
-		class="focusable editable"
-		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={() => {
-			editable.handleDoubleClickFocus();
-		}}
-		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) {
-				tableContext.endFocus(editable.focusDetails.coordinates);
-			}
-		}}
-	>
-		{#await visibleValue}
-			{loadingText}
-		{:then v}
-			{v}
-		{/await}
-	</div>
-{/if}
-
+	if (target) {
+		target.addEventListener("keydown", keydownForce);
+		activeKeydownTarget = target;
+	}
+}
+function removeKeydownEvent() {
+	if (activeKeydownTarget) {
+		activeKeydownTarget.removeEventListener("keydown", keydownForce);
+		activeKeydownTarget = undefined;
+	}
+}
+/**
+* Wire the `edit` custom event with cleanup on tdref remount or
+* component unmount. The listener plumbing lives in the shared
+* `useAsyncEditable` helper.
+*/
+$effect(() => editable.attachEditListener(tdref));
+// Ensure the keydown listener is dropped when the cell unmounts.
+$effect(() => removeKeydownEvent);
+</script>
+
+{#if editable.isBeingEdited}
+	<div
+		class="select-cell"
+		bind:this={tdref}
+	>
+		{#await value then value}
+			<QuerySelect
+				focusOnLoad
+				name={cell.column.columnDef.id}
+				valueProp={'value' as never}
+				labelProp={'label' as never}
+				clearable={cell.column.columnDef.clearable}
+				valueAsObject={false}
+				value={value as never}
+				query={(v: string) => columnDef.query(v, cell.row.original, cell.row.originalIndex)}
+				bind:options={lastOptions as never}
+				onfocus={addKeydownEvent}
+				onchange={(newValue: unknown) => {
+					// `valueAsObject={false}` makes QuerySelect emit the
+					// primitive value directly. The `as never` casts work
+					// around component-generic inference (see TableSelect
+					// for the same workaround).
+					if (newValue !== value) {
+						tableContext
+							.onEditCell(cell.row.original, editable.focusDetails.coordinates, newValue ?? null)
+							.catch(devCatch);
+					}
+
+					removeKeydownEvent();
+					tableContext.focusStartIsBeingEdited = false;
+					tick()
+						.then(() => {
+							tdref?.focus();
+						})
+						.catch(devCatch);
+				}}
+			/>
+		{/await}
+	</div>
+{:else}
+	<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		style={editable.focusDetails.outline}
+		bind:this={tdref}
+		tabIndex="0"
+		id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
+		class="focusable editable"
+		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={() => {
+			editable.handleDoubleClickFocus();
+		}}
+		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) {
+				tableContext.endFocus(editable.focusDetails.coordinates);
+			}
+		}}
+	>
+		{#await visibleValue}
+			{loadingText}
+		{:then v}
+			{v}
+		{/await}
+	</div>
+{/if}
+
 <style>.focusable,
 .checkbox-cell,
 .input-cell,
@@ -325,4 +285,4 @@
   --sv-item-wrap-padding: 0px 0.75rem;
   --input-height: var(--height);
   min-width: 0;
-}</style>
+}</style>