@lavalogic/scoria 0.0.1

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

@@ -0,0 +1,290 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { getContext, tick } from 'svelte';
+	import { dev } from '$app/environment';
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import type { CellCoordinates } from '../../../Types/Coordinates/CellCoordinates.js';
+	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import DateModal from '../../../../Touch/DateModal.svelte';
+	import { ToastContext } from '../../../../../Contexts/ToastContext.svelte.js';
+	import { Validity } from '../../../../../Types/Internal/Validity.js';
+	import type { DateTableCell } from '../../../Types/Columns/DateTableCell.js';
+
+	export interface TableDatePickerProps<T extends object> {
+		cell: DateTableCell<T>;
+	}
+</script>
+
+<script lang="ts" generics="T extends object">
+	const { cell }: TableDatePickerProps<T> = $props();
+
+	const value = $derived(cell.getValue());
+
+	const dateValue = $derived(value && value instanceof Date ? value : undefined);
+
+	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const { toast } = getContext<ToastContext>(ToastContext.identifier);
+
+	const columnDef = $derived(cell.column.columnDef);
+	const coordinates: CellCoordinates = $derived({
+		row: cell.row.index,
+		column: columnDef.index,
+		id: columnDef.id as string & keyof T
+	});
+
+	const editable = $derived(cell.column.columnDef.editable === true);
+	const focusDetails: TableFocusDetails<T> = $derived(
+		new TableFocusDetails(cell, tableContext, toast)
+	);
+
+	let modalLock = $state(false);
+
+	const isBeingEdited = $derived(
+		editable &&
+			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
+	);
+
+	$effect(() => {
+		if (isBeingEdited) {
+			tick().then(() => {
+				modalLock = true;
+			});
+		}
+	});
+
+	let tdref: HTMLTableCellElement | undefined = $state();
+
+	const id = $derived(`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`);
+	function handleSingleClick(event?: Event) {
+		if (
+			editable &&
+			tableContext.singleClickEditing &&
+			(!event || !event.target || (event.target as HTMLElement).id === id)
+		) {
+			tableContext.focusStartIsBeingEdited = true;
+		}
+	}
+
+	const validityPromise = $derived(focusDetails.validityTuple);
+
+	$effect(() => {
+		validityPromise.then(([validity]) => {
+			if (validity === Validity.Invalid) {
+				tableContext.addInvalidValue(cell.row.original);
+			} else {
+				tableContext.removeInvalidValue(cell.row.original);
+			}
+		});
+	});
+
+	const handleDoubleClick = () => {
+		if (editable) {
+			tableContext.focusStartIsBeingEdited = true;
+		}
+	};
+
+	function refocusTd() {
+		tableContext.focusStartIsBeingEdited = false;
+		modalLock = false;
+		tick().then(() => {
+			tdref?.focus();
+		});
+	}
+
+	let prevtdref: HTMLTableCellElement | undefined = undefined;
+	$effect(() => {
+		if (tdref) {
+			if (tdref != prevtdref) {
+				tdref.addEventListener('edit', handleDoubleClick);
+			} else {
+				prevtdref = tdref;
+			}
+		}
+	});
+</script>
+
+<!-- // onKeyDown={handleTdKeydown} -->
+<!-- ref={tdref} -->
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+{#await validityPromise}
+	<td
+		{id}
+		style={focusDetails.outline}
+		tabIndex="0"
+		bind:this={tdref}
+		class:editable
+		class="focusable"
+		class:multifocus={focusDetails.isMultiFocused}
+		class:multifocus-start={focusDetails.isMultiFocusStart}
+		onmousedown={(e) => {
+			// start focus only on left click
+			if (e.button === 0) {
+				if (e.shiftKey) {
+					e.preventDefault();
+					tableContext.setFocusEnd(coordinates);
+				} else {
+					tableContext.startFocus(coordinates);
+				}
+			}
+		}}
+		onmouseover={() => {
+			if (tableContext.isMousingDown) {
+				tableContext.setFocusEnd(coordinates);
+			}
+		}}
+		onmouseup={() => {
+			tableContext.endFocus(coordinates);
+		}}
+		onclick={handleSingleClick}
+		ondblclick={handleDoubleClick}
+	>
+		{#if isBeingEdited}
+			<DateModal
+				header="Edit {columnDef.header}"
+				value={dateValue ?? null}
+				cancelEditing={() => {
+					refocusTd();
+				}}
+				confirm={(e) => {
+					tableContext.onEditCell(cell.row.original, coordinates, e);
+					refocusTd();
+				}}
+			/>
+		{/if}
+
+		{#if !value}
+			-
+		{:else if typeof value === 'string'}
+			<!-- TODO see if we need to mess with time zones here. Very likely -->
+			{@const parsed = new Date(value)}
+			{isNaN(parsed.getFullYear()) ? value : parsed.toLocaleString()}
+		{:else if value instanceof Date}
+			{value?.toLocaleDateString()}
+		{:else if dev}
+			DEBUG: INVALID DATE
+		{:else}
+			-
+		{/if}
+	</td>
+{:then [validity, message]}
+	<td
+		{id}
+		style={focusDetails.outline}
+		aria-label={message}
+		tabIndex="0"
+		bind:this={tdref}
+		class:editable
+		class="focusable"
+		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}
+		onmousedown={(e) => {
+			// start focus only on left click
+			if (e.button === 0) {
+				if (e.shiftKey) {
+					e.preventDefault();
+					tableContext.setFocusEnd(coordinates);
+				} else {
+					tableContext.startFocus(coordinates);
+				}
+			}
+		}}
+		onmouseover={() => {
+			if (tableContext.isMousingDown) {
+				tableContext.setFocusEnd(coordinates);
+			}
+		}}
+		onmouseup={() => {
+			tableContext.endFocus(coordinates);
+		}}
+		onclick={handleSingleClick}
+		ondblclick={handleDoubleClick}
+	>
+		{#if modalLock}
+			<DateModal
+				header="Edit {columnDef.header}"
+				value={dateValue ?? null}
+				showTime={cell.column.columnDef.showTime}
+				cancelEditing={() => {
+					refocusTd();
+				}}
+				confirm={(e) => {
+					tableContext.onEditCell(cell.row.original, coordinates, e);
+					refocusTd();
+				}}
+			/>
+		{/if}
+
+		{#if !value}
+			-
+		{:else if typeof value === 'string'}
+			<!-- TODO see if we need to mess with time zones here. Very likely -->
+			{@const parsed = new Date(value)}
+			{isNaN(parsed.getFullYear()) ? value : parsed.toLocaleString()}
+		{:else if value instanceof Date}
+			{#if cell.column.columnDef.showTime}
+				{value.toLocaleString()}
+			{:else}
+				{value.toLocaleDateString()}
+			{/if}
+		{:else if dev}
+			DEBUG: INVALID DATE
+		{:else}
+			-
+		{/if}
+	</td>
+{/await}
+
+<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 {
+  position: static;
+}</style>

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

@@ -0,0 +1,28 @@
+import type { DateTableCell } from '../../../Types/Columns/DateTableCell.js';
+export interface TableDatePickerProps<T extends object> {
+    cell: DateTableCell<T>;
+}
+declare function $$render<T extends object>(): {
+    props: TableDatePickerProps<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 TableDatePicker: $$IsomorphicComponent;
+type TableDatePicker<T extends object> = InstanceType<typeof TableDatePicker<T>>;
+export default TableDatePicker;

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

@@ -0,0 +1,359 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	export interface TableNumberInputProps<T extends object> {
+		cell: TableCell<T>;
+	}
+</script>
+
+<script lang="ts" generics="T extends object">
+	import { dev } from '$app/environment';
+	import NumberInput from '../../../../NumberInput.svelte';
+	import { NumberInputDef } from '../../../Types/Columns/Definitions/Accessors/NumberInputDef.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 { InputVariant } from '../../../../../Types/Internal/InputVariant.js';
+	import { Validity } from '../../../../../Types/Internal/Validity.js';
+	import { untrack, getContext, tick, onMount } from 'svelte';
+
+	const { cell }: TableNumberInputProps<T> = $props();
+
+	const value: Promise<number | string | null> | number | string | null = $derived.by(() => {
+		const _value = cell.getValue();
+
+		return typeof _value === 'string'
+			? parseInt(_value)
+			: typeof _value === 'number'
+				? _value
+				: ((_value as Promise<string | number | null | undefined> | null | undefined)?.then((v) => {
+						return v === 'string' ? parseInt(v) : (v ?? null);
+					}) ?? null);
+	});
+	let tempNumericValue: number = $state(0);
+
+	$effect(() => {
+		void value;
+		untrack(() => {
+			resetValue();
+		});
+	});
+
+	function resetValue() {
+		tempNumericValue = typeof value === 'string' ? parseInt(value) : (value as number);
+	}
+
+	let tdref: HTMLTableCellElement | undefined = $state();
+	let inputRef: HTMLInputElement | undefined = $state();
+
+	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) {
+				untrack(() => {
+					isBeingEdited = false;
+					tick().then(() => {
+						onBlur();
+					});
+				});
+			}
+		}
+	});
+
+	let overrideEdit = $state(false);
+
+	$effect(() => {
+		if (isBeingEdited) {
+			if (overrideEdit) {
+				overrideEdit = false;
+			} else {
+				handleBeingEdited();
+			}
+		}
+	});
+
+	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 handleBeingEdited() {
+		tableContext.isMousingDown = false;
+		tick().then(() => {
+			inputRef?.select();
+		});
+	}
+
+	function handleInputKeydown(e: KeyboardEvent) {
+		switch (e.key) {
+			case 'Escape':
+				e.preventDefault();
+				e.stopPropagation();
+
+				resetValue();
+				tableContext.focusStartIsBeingEdited = false;
+				tick().then(() => {
+					tdref?.focus();
+				});
+				break;
+			case 'Enter':
+				e.preventDefault();
+				e.stopPropagation();
+
+				// shouldFocusTDOnBlur.current = true;
+				tableContext.focusStartIsBeingEdited = false;
+				(e.target as HTMLInputElement).blur();
+				tick().then(() => {
+					tdref?.focus();
+				});
+				break;
+		}
+	}
+
+	function onBlur(): void {
+		const oldValue = typeof value === 'string' ? parseInt(value) : value;
+
+		if (oldValue != tempNumericValue) {
+			tableContext.onEditCell(cell.row.original, focusDetails.coordinates, tempNumericValue);
+		}
+
+		if (!tableContext.singleClickEditing) {
+			tableContext.focusStartIsBeingEdited = false;
+		}
+	}
+
+	const onEdit = (e: CustomEvent<{ selectAll: boolean }>) => {
+		handleTDFocus(e.detail.selectAll);
+	};
+
+	function onInputFocus(e: FocusEvent) {
+		(e.target as HTMLInputElement).scrollIntoView({
+			behavior: 'instant',
+			block: 'nearest',
+			inline: 'nearest'
+		});
+	}
+
+	function handleTDFocus(selectAll: boolean = false): boolean {
+		if (
+			tableContext.focusStart?.column === focusDetails.coordinates.column &&
+			tableContext.focusStart.row === focusDetails.coordinates.row &&
+			editable
+		) {
+			if (
+				tableContext.focusEnd?.column !== focusDetails.coordinates.column ||
+				tableContext.focusEnd.row !== focusDetails.coordinates.row
+			) {
+				tableContext.setFocusEnd(focusDetails.coordinates);
+			}
+
+			resetValue();
+			tableContext.isMousingDown = false;
+
+			if (!selectAll) {
+				overrideEdit = true;
+
+				tableContext.isMousingDown = false;
+				tick().then(() => {
+					inputRef?.focus();
+				});
+			}
+
+			tableContext.focusStartIsBeingEdited = true;
+
+			return true;
+		}
+
+		return false;
+	}
+
+	function handleSingleClickFocus(): boolean {
+		return tableContext.singleClickEditing && handleTDFocus();
+	}
+
+	function handleDoubleClickFocus() {
+		return !tableContext.singleClickEditing && handleTDFocus();
+	}
+
+	let prevTdRef: HTMLTableCellElement | undefined;
+
+	$effect(() => {
+		let unsubscriber = () => {};
+
+		if (tdref != prevTdRef) {
+			prevTdRef = tdref;
+			prevTdRef?.addEventListener('edit', onEdit);
+			unsubscriber = () => {
+				prevTdRef?.removeEventListener('edit', onEdit);
+			};
+		} else if (dev) {
+			throw new Error("tdref didn't exist during onMount");
+		}
+
+		return unsubscriber;
+	});
+</script>
+
+{#if isBeingEdited}
+	<!-- {#if true} -->
+
+	<td class="input-cell">
+		<NumberInput
+			id={`${tableContext.tableName}-cell-${cell.row.index}-${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 -->
+		<!-- onblur={onBlur} -->
+	</td>
+{:else}
+	<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+
+	<td
+		style={focusDetails.outline}
+		id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+		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={() => {
+			const wasHandled = handleSingleClickFocus();
+			if (!wasHandled) {
+				tableContext.endFocus(focusDetails.coordinates);
+			}
+		}}
+		bind:this={tdref}
+		tabIndex="0"
+		class:editable
+		class="focusable"
+		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={handleDoubleClickFocus}
+		>{#await value}
+			loading…
+		{:then value}{value ?? '-'}{/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.input-cell {
+  padding: unset;
+  box-sizing: border-box;
+  vertical-align: middle;
+}</style>

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

@@ -0,0 +1,28 @@
+export interface TableNumberInputProps<T extends object> {
+    cell: TableCell<T>;
+}
+import type { TableCell } from '../../../Types/Columns/TableCell.js';
+declare function $$render<T extends object>(): {
+    props: TableNumberInputProps<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 TableNumberInput: $$IsomorphicComponent;
+type TableNumberInput<T extends object> = InstanceType<typeof TableNumberInput<T>>;
+export default TableNumberInput;