@lavalogic/scoria 0.33.0 → 0.35.0

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

@@ -1,311 +1,311 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import { dev } from '$app/environment';
-	import SingleSelect from '../../../../SingleSelect.svelte';
-	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { devCatch, isValidityTuple, loadingText } from '../../../../../Helpers/Helpers.svelte.js';
-	import type { SelectOption } from '../../../../../Types/Internal/SelectOption.js';
-	import { Validity } from '../../../../../Types/Internal/Validity.js';
-	import { getContext, tick } from 'svelte';
-	import type { TableSelectProps } from './TableSelectProps.js';
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object"
->
-	const { cell }: TableSelectProps<T, T> = $props();
-
-	let tdref = $state<HTMLTableCellElement | undefined>();
-
-	const selectValue = $derived(cell.getValue() as T | Promise<T> | null | undefined);
-
-	const visibleValue = $derived(
-		cell.column.columnDef.getDisplayValue(cell.row.original, cell.row.originalIndex)
-	);
-
-	const optional = $derived(cell.column.columnDef.optional);
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	const editable = $derived(
-		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
-	);
-
-	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 = $derived(false);
-
-	function handleIsEditable(isEditable: boolean): Promise<void> {
-		if (isEditable) {
-			return tick().then(() => {
-				isBeingEdited = true;
-			});
-		} else {
-			if (isBeingEdited) {
-				return tick()
-					.then(() => {
-						if (!tableContext.singleClickEditing) {
-							tableContext.focusStartIsBeingEdited = false;
-						}
-
-						isBeingEdited = false;
-					})
-					.catch(devCatch);
-			}
-		}
-
-		return Promise.resolve();
-	}
-
-	$effect(() => {
-		void editable;
-		if (wantsToBeEdited) {
-			if (editable instanceof Promise) {
-				editable
-					.then((isEditable) => {
-						return handleIsEditable(isEditable);
-					})
-
-					.catch(devCatch);
-			} else {
-				handleIsEditable(editable).catch(devCatch);
-			}
-		} else {
-			tick()
-				.then(() => {
-					isBeingEdited = false;
-					tableContext.focusStartIsBeingEdited = false;
-				})
-				.catch(devCatch);
-		}
-	});
-
-	const optionsPromise = $derived(
-		cell.column.columnDef.getSpecificOptions?.(
-			cell.row.original,
-			focusDetails.coordinates.column
-		) ?? cell.column.columnDef.getOptions()
-	);
-
-	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);
-	});
-
-	async function handleTDFocus(): Promise<boolean> {
-		if (
-			(await editable) &&
-			tableContext.focusStart?.column === focusDetails.coordinates.column &&
-			tableContext.focusStart.row === focusDetails.coordinates.row
-		) {
-			if (
-				tableContext.focusEnd?.column !== focusDetails.coordinates.column ||
-				tableContext.focusEnd.row !== focusDetails.coordinates.row
-			) {
-				tableContext.setFocusEnd(focusDetails.coordinates);
-			}
-
-			tableContext.isMousingDown = false;
-			tableContext.focusStartIsBeingEdited = true;
-			return true;
-		}
-
-		return false;
-	}
-
-	async function handleSingleClick(): Promise<boolean> {
-		return tableContext.singleClickEditing && (await handleTDFocus());
-	}
-	async function handleDoubleClick(): Promise<boolean> {
-		return !tableContext.singleClickEditing && (await handleTDFocus());
-	}
-
-	function handleTab(e: KeyboardEvent) {
-		if (e.key === 'Escape') {
-			e.preventDefault();
-			e.stopPropagation();
-
-			tableContext.focusStartIsBeingEdited = false;
-			tick()
-				.then(() => {
-					tdref?.focus();
-				})
-				.catch(devCatch);
-		}
-		if (e.key === 'Tab') {
-			e.preventDefault();
-		}
-	}
-
-	function keydownForce(e: KeyboardEvent) {
-		handleTab(e);
-		if (!(e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
-			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,
-				})
-			);
-		}
-	}
-
-	function addKeydownEvent(target: HTMLInputElement | undefined) {
-		target?.addEventListener('keydown', keydownForce);
-	}
-
-	function tryHandleTDFocus() {
-		handleTDFocus().catch(devCatch);
-	}
-
-	let prevtdref: HTMLTableCellElement | undefined = undefined;
-	$effect(() => {
-		if (tdref) {
-			if (tdref != prevtdref) {
-				tdref.addEventListener('edit', tryHandleTDFocus);
-			} else {
-				prevtdref = tdref;
-			}
-		}
-	});
-</script>
-
-{#if isBeingEdited}
-	<!-- onkeydown={handleInputKeydown} -->
-	<!-- onkeydown={handleEsc} -->
-	<td
-		class="select-cell"
-		bind:this={tdref}
-	>
-		{#await Promise.all([optionsPromise, selectValue])}
-			{loadingText}
-		{:then [options, value]}
-			<SingleSelect
-				focusOnLoad
-				name="Item"
-				valueProp="value"
-				labelProp="label"
-				value={value ?? null}
-				{options}
-				width="100%"
-				clearable={cell.column.columnDef.clearable}
-				onfocus={addKeydownEvent}
-				valueAsObject={false}
-				onchange={(newValue: SelectOption<T> | null) => {
-					if (newValue?.value !== value) {
-						if (optional || newValue?.value != null) {
-							tableContext
-								.onEditCell(cell.row.original, focusDetails.coordinates, newValue?.value ?? null)
-								.catch(devCatch);
-						}
-					}
-					tableContext.focusStartIsBeingEdited = false;
-					tick()
-						.then(() => {
-							tdref?.focus();
-						})
-						.catch(devCatch);
-				}}
-			/>
-		{:catch e}
-			{#if dev}
-				error: {e}
-				<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-				{@debug e}
-			{/if}
-			could not retrieve options
-		{/await}
-	</td>
-{:else}
-	<!-- // onkeydown={handleTdKeydown} -->
-	<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-	<td
-		bind:this={tdref}
-		tabIndex="0"
-		style={focusDetails.outline}
-		id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
-		class="focusable editable"
-		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}
-		ondblclick={() => {
-			handleDoubleClick().catch(devCatch);
-		}}
-		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);
-			}
-		}}
-		onmouseup={() => {
-			handleSingleClick()
-				.then((wasHandled) => {
-					if (!wasHandled) {
-						tableContext.endFocus(focusDetails.coordinates);
-					}
-				})
-				.catch(devCatch);
-		}}
-		>{#await visibleValue}
-			{loadingText}
-		{:then value}
-			{value ?? '-'}
-		{:catch e}
-			{#if dev}
-				error: {e}
-				<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-				{@debug e}
-			{/if}
-			Could not retrieve options
-		{/await}</td
-	>
-{/if}
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import { dev } from '$app/environment';
+	import SingleSelect from '../../../../SingleSelect.svelte';
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import { devCatch, isValidityTuple, loadingText } from '../../../../../Helpers/Helpers.svelte.js';
+	import type { SelectOption } from '../../../../../Types/Internal/SelectOption.js';
+	import { Validity } from '../../../../../Types/Internal/Validity.js';
+	import { getContext, tick } from 'svelte';
+	import type { TableSelectProps } from './TableSelectProps.js';
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object"
+>
+	const { cell }: TableSelectProps<T, T> = $props();
+
+	let tdref = $state<HTMLTableCellElement | undefined>();
+
+	const selectValue = $derived(cell.getValue() as T | Promise<T> | null | undefined);
+
+	const visibleValue = $derived(
+		cell.column.columnDef.getDisplayValue(cell.row.original, cell.row.originalIndex)
+	);
+
+	const optional = $derived(cell.column.columnDef.optional);
+
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+
+	const editable = $derived(
+		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
+	);
+
+	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 = $derived(false);
+
+	function handleIsEditable(isEditable: boolean): Promise<void> {
+		if (isEditable) {
+			return tick().then(() => {
+				isBeingEdited = true;
+			});
+		} else {
+			if (isBeingEdited) {
+				return tick()
+					.then(() => {
+						if (!tableContext.singleClickEditing) {
+							tableContext.focusStartIsBeingEdited = false;
+						}
+
+						isBeingEdited = false;
+					})
+					.catch(devCatch);
+			}
+		}
+
+		return Promise.resolve();
+	}
+
+	$effect(() => {
+		void editable;
+		if (wantsToBeEdited) {
+			if (editable instanceof Promise) {
+				editable
+					.then((isEditable) => {
+						return handleIsEditable(isEditable);
+					})
+
+					.catch(devCatch);
+			} else {
+				handleIsEditable(editable).catch(devCatch);
+			}
+		} else {
+			tick()
+				.then(() => {
+					isBeingEdited = false;
+					tableContext.focusStartIsBeingEdited = false;
+				})
+				.catch(devCatch);
+		}
+	});
+
+	const optionsPromise = $derived(
+		cell.column.columnDef.getSpecificOptions?.(
+			cell.row.original,
+			focusDetails.coordinates.column
+		) ?? cell.column.columnDef.getOptions()
+	);
+
+	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);
+	});
+
+	async function handleTDFocus(): Promise<boolean> {
+		if (
+			(await editable) &&
+			tableContext.focusStart?.column === focusDetails.coordinates.column &&
+			tableContext.focusStart.row === focusDetails.coordinates.row
+		) {
+			if (
+				tableContext.focusEnd?.column !== focusDetails.coordinates.column ||
+				tableContext.focusEnd.row !== focusDetails.coordinates.row
+			) {
+				tableContext.setFocusEnd(focusDetails.coordinates);
+			}
+
+			tableContext.isMousingDown = false;
+			tableContext.focusStartIsBeingEdited = true;
+			return true;
+		}
+
+		return false;
+	}
+
+	async function handleSingleClick(): Promise<boolean> {
+		return tableContext.singleClickEditing && (await handleTDFocus());
+	}
+	async function handleDoubleClick(): Promise<boolean> {
+		return !tableContext.singleClickEditing && (await handleTDFocus());
+	}
+
+	function handleTab(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			e.stopPropagation();
+
+			tableContext.focusStartIsBeingEdited = false;
+			tick()
+				.then(() => {
+					tdref?.focus();
+				})
+				.catch(devCatch);
+		}
+		if (e.key === 'Tab') {
+			e.preventDefault();
+		}
+	}
+
+	function keydownForce(e: KeyboardEvent) {
+		handleTab(e);
+		if (!(e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+			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,
+				})
+			);
+		}
+	}
+
+	function addKeydownEvent(target: HTMLInputElement | undefined) {
+		target?.addEventListener('keydown', keydownForce);
+	}
+
+	function tryHandleTDFocus() {
+		handleTDFocus().catch(devCatch);
+	}
+
+	let prevtdref: HTMLTableCellElement | undefined = undefined;
+	$effect(() => {
+		if (tdref) {
+			if (tdref != prevtdref) {
+				tdref.addEventListener('edit', tryHandleTDFocus);
+			} else {
+				prevtdref = tdref;
+			}
+		}
+	});
+</script>
+
+{#if isBeingEdited}
+	<!-- onkeydown={handleInputKeydown} -->
+	<!-- onkeydown={handleEsc} -->
+	<td
+		class="select-cell"
+		bind:this={tdref}
+	>
+		{#await Promise.all([optionsPromise, selectValue])}
+			{loadingText}
+		{:then [options, value]}
+			<SingleSelect
+				focusOnLoad
+				name="Item"
+				valueProp="value"
+				labelProp="label"
+				value={value ?? null}
+				{options}
+				width="100%"
+				clearable={cell.column.columnDef.clearable}
+				onfocus={addKeydownEvent}
+				valueAsObject={false}
+				onchange={(newValue: SelectOption<T> | null) => {
+					if (newValue?.value !== value) {
+						if (optional || newValue?.value != null) {
+							tableContext
+								.onEditCell(cell.row.original, focusDetails.coordinates, newValue?.value ?? null)
+								.catch(devCatch);
+						}
+					}
+					tableContext.focusStartIsBeingEdited = false;
+					tick()
+						.then(() => {
+							tdref?.focus();
+						})
+						.catch(devCatch);
+				}}
+			/>
+		{:catch e}
+			{#if dev}
+				error: {e}
+				<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+				{@debug e}
+			{/if}
+			could not retrieve options
+		{/await}
+	</td>
+{:else}
+	<!-- // onkeydown={handleTdKeydown} -->
+	<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+	<td
+		bind:this={tdref}
+		tabIndex="0"
+		style={focusDetails.outline}
+		id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
+		class="focusable editable"
+		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}
+		ondblclick={() => {
+			handleDoubleClick().catch(devCatch);
+		}}
+		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);
+			}
+		}}
+		onmouseup={() => {
+			handleSingleClick()
+				.then((wasHandled) => {
+					if (!wasHandled) {
+						tableContext.endFocus(focusDetails.coordinates);
+					}
+				})
+				.catch(devCatch);
+		}}
+		>{#await visibleValue}
+			{loadingText}
+		{:then value}
+			{value ?? '-'}
+		{:catch e}
+			{#if dev}
+				error: {e}
+				<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+				{@debug e}
+			{/if}
+			Could not retrieve options
+		{/await}</td
+	>
+{/if}
+
 <style>td {
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
@@ -361,4 +361,4 @@ td :global(.select-wrapper) {
   --sv-general-padding: 0px;
   --sv-item-wrap-padding: 0px 0.75rem;
   --input-height: var(--height);
-}</style>
+}</style>