@lavalogic/scoria 0.0.1

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

@@ -0,0 +1,354 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	export interface TableSelectProps<T extends object> {
+		cell: TableCell<T>;
+	}
+</script>
+
+<script lang="ts" generics="T extends object">
+	import { dev } from '$app/environment';
+	import SingleSelect from '../../../../SingleSelect.svelte';
+	import type { SelectDef } from '../../../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
+	import type { TableCell } from '../../../Types/Columns/TableCell.js';
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import { ToastContext } from '../../../../../Contexts/ToastContext.svelte.js';
+	import { getErrorMessage } from '../../../../../Helpers/Helpers.svelte.js';
+	import type { SelectOption } from '../../../../../Types/Internal/SelectOption.js';
+	import { Validity } from '../../../../../Types/Internal/Validity.js';
+	import { getContext, tick, untrack, onMount } from 'svelte';
+
+	const { cell }: TableSelectProps<T> = $props();
+
+	let tdref = $state<HTMLTableCellElement | undefined>();
+
+	const value = $derived(cell.getValue());
+
+	const optional = $derived((cell.column.columnDef as SelectDef<T>).optional ?? false);
+
+	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const { toast } = getContext<ToastContext>(ToastContext.identifier);
+
+	const editable = $derived(cell.column.columnDef.editable === true);
+
+	const focusDetails: TableFocusDetails<T> = $derived(
+		new TableFocusDetails(cell, tableContext, toast)
+	);
+
+	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 === false &&
+			tableContext.focusStartIsBeingEdited === true
+	);
+
+	let isBeingEdited = $state(false);
+	$effect(() => {
+		if (wantsToBeEdited) {
+			if (editable) {
+				tick().then(() => {
+					untrack(() => {
+						isBeingEdited = true;
+					});
+				});
+			} else {
+				tick().then(() => {
+					untrack(() => {
+						tableContext.focusStartIsBeingEdited = false;
+					});
+				});
+			}
+		} else {
+			if (isBeingEdited) {
+				tick().then(() => {
+					untrack(() => {
+						if (!tableContext.singleClickEditing) {
+							tableContext.focusStartIsBeingEdited = false;
+						}
+
+						isBeingEdited = false;
+					});
+				});
+			}
+		}
+	});
+
+	const optionsPromise = $derived(
+		(cell.column.columnDef as SelectDef<T>).getOptions(
+			cell.row.original,
+			focusDetails.coordinates.column
+		)
+	);
+
+	const valuePromise = $derived(getValueFromOptions(optionsPromise, value));
+
+	async function getValueFromOptions(
+		optionsPromise: Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>,
+		value: unknown
+	): Promise<SelectOption<unknown> | null> {
+		if (value == null) {
+			return null;
+		}
+		const options = await optionsPromise;
+		value = await value;
+
+		if (typeof value === typeof options[0]?.value) {
+			const foundOption = options.find((it) => it.value === value);
+			return foundOption ?? null;
+		} else if (typeof value === typeof options[0]?.label) {
+			const foundOption = options.find((it) => it.label === value);
+			return foundOption ?? null;
+		}
+
+		if (dev) {
+			console.warn('could not match value to any type:', value);
+		}
+
+		return null;
+	}
+
+	let previousValidity = $state(Validity.Valid);
+	let validity = $state(Validity.Valid);
+	$effect(() => {
+		focusDetails.validityTuple.then(([newValidity]) => {
+			untrack(() => {
+				tick().then(() => {
+					validity = newValidity;
+				});
+			});
+		});
+	});
+
+	$effect(() => {
+		if (validity != previousValidity) {
+			untrack(() => {
+				tick().then(() => {
+					if (validity === Validity.Invalid) {
+						tableContext.addInvalidValue(cell.row.original);
+					} else {
+						tableContext.removeInvalidValue(cell.row.original);
+					}
+					previousValidity = validity;
+				});
+			});
+		}
+	});
+	function handleTDFocus(): boolean {
+		if (
+			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;
+	}
+
+	function handleSingleClick() {
+		return tableContext.singleClickEditing && handleTDFocus();
+	}
+	function handleDoubleClick() {
+		return !tableContext.singleClickEditing && handleTDFocus();
+	}
+
+	function handleTab(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			e.stopPropagation();
+
+			tableContext.focusStartIsBeingEdited = false;
+			tick().then(() => {
+				tdref?.focus();
+			});
+		}
+		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);
+	}
+
+	onMount(() => {
+		if (tdref) {
+			tdref!.addEventListener('edit', handleTDFocus);
+		} else if (dev) {
+			throw new Error("tdref didn't exist during onMount");
+		}
+	});
+</script>
+
+{#if isBeingEdited}
+	<!-- onkeydown={handleInputKeydown} -->
+	<!-- onkeydown={handleEsc} -->
+	<td class="select-cell" bind:this={tdref}>
+		{#await Promise.all([optionsPromise, valuePromise, value])}
+			loading…
+		{:then [options, valueAsObject, value]}
+			<SingleSelect
+				focusOnLoad
+				name="Item"
+				valueProp="value"
+				labelProp="label"
+				value={valueAsObject}
+				{options}
+				width="100%"
+				clearable={optional}
+				onfocus={addKeydownEvent}
+				valueAsObject
+				onchange={(newValue) => {
+					if (newValue?.value !== value) {
+						if (optional || newValue?.value != null) {
+							tableContext.onEditCell(cell.row.original, focusDetails.coordinates, newValue?.value);
+						}
+					}
+					tableContext.focusStartIsBeingEdited = false;
+					tick().then(() => {
+						tdref?.focus();
+					});
+				}}
+			/>
+		{:catch e}
+			{#if dev}
+				{getErrorMessage(e)}
+			{:else}
+				could not retrieve options
+			{/if}
+		{/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.index}-${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}
+		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={() => {
+			// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+			handleSingleClick() || tableContext.endFocus(focusDetails.coordinates);
+		}}
+		>{#await Promise.all([valuePromise])}
+			loading…
+		{:then [value]}
+			{value?.label ?? '-'}
+		{:catch e}
+			{#if dev}
+				{getErrorMessage(e)}
+			{:else}
+				could not retrieve options
+			{/if}
+		{/await}</td
+	>
+{/if}
+
+<style>td {
+  transition: line-height 0.2s ease, height 0.2s ease;
+  --input-border: none;
+  --input-height: var(--height);
+  white-space: nowrap;
+  overflow-x: clip;
+  text-overflow: ellipsis;
+  position: relative;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  border: solid 1px #cbd4da;
+  border-left: none;
+}
+
+td.multifocus {
+  background-color: var(--multifocus-colour, #e6f8fd);
+}
+td.multifocus.multifocus-start {
+  background-color: #ffffff;
+}
+
+td.focusable {
+  user-select: none;
+  cursor: default;
+  outline: none;
+}
+td.focusable.editable {
+  cursor: pointer;
+}
+
+td.info {
+  background-color: #1f81a0;
+}
+td.warning {
+  background-color: #f8eab8;
+}
+td.error {
+  background-color: #f9e9e9;
+}
+
+td.select-cell {
+  padding: unset;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+}
+
+td {
+  --sv-border: none;
+}
+td :global(.select-wrapper) {
+  --sv-min-height: 0px;
+  --sv-general-padding: 0px;
+  --sv-item-wrap-padding: 0px 0.75rem;
+  --input-height: var(--height);
+}</style>

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

@@ -0,0 +1,28 @@
+export interface TableSelectProps<T extends object> {
+    cell: TableCell<T>;
+}
+import type { TableCell } from '../../../Types/Columns/TableCell.js';
+declare function $$render<T extends object>(): {
+    props: TableSelectProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TableSelect: $$IsomorphicComponent;
+type TableSelect<T extends object> = InstanceType<typeof TableSelect<T>>;
+export default TableSelect;