@lavalogic/scoria 0.35.0 → 0.37.0

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

@@ -1,241 +1,253 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object"
->
-	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 { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
-	import { Validity } from '../../../../../Types/Internal/Validity.js';
-	import { getContext, tick } from 'svelte';
-	import type { TableDatePickerProps } from './TableDatePickerProps.js';
-
-	const { cell }: TableDatePickerProps<T> = $props();
-
-	const value = $derived(cell.getValue());
-
-	const dateValue = $derived(value && value instanceof Date ? value : undefined);
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	const columnDef = $derived(cell.column.columnDef);
-	const coordinates: CellCoordinates = $derived({
-		row: cell.row.visibleIndex,
-		column: columnDef.index,
-		id: columnDef.id,
-	});
-
-	const editable = $derived(
-		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
-	);
-	const focusDetails: TableFocusDetails<T, never> = $derived(
-		new TableFocusDetails(cell, tableContext)
-	);
-
-	let modalLock = $state(false);
-
-	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.focusStartIsBeingEdited
-	);
-
-	function handleEditable(isEditable: boolean): Promise<void> {
-		if (isEditable) {
-			return tick().then(() => {
-				modalLock = true;
-			});
-		} else {
-			if (modalLock) {
-				return tick().then(() => {
-					if (!tableContext.singleClickEditing) {
-						tableContext.focusStartIsBeingEdited = false;
-					}
-					modalLock = false;
-				});
-			}
-
-			return Promise.resolve();
-		}
-	}
-
-	$effect(() => {
-		void editable;
-		if (wantsToBeEdited) {
-			if (editable instanceof Promise) {
-				editable
-					.then((isEditable) => {
-						return handleEditable(isEditable);
-					})
-					.catch(devCatch);
-			} else {
-				handleEditable(editable).catch(devCatch);
-			}
-		} else {
-			tick()
-				.then(() => {
-					modalLock = false;
-					tableContext.focusStartIsBeingEdited = false;
-				})
-				.catch(devCatch);
-		}
-	});
-
-	let tdref: HTMLTableCellElement | undefined = $state();
-
-	const id = $derived(`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`);
-	async function handleSingleClick(event?: Event) {
-		if (
-			(await editable) &&
-			tableContext.singleClickEditing &&
-			(!event || !event.target || (event.target as HTMLElement).id === id)
-		) {
-			tableContext.focusStartIsBeingEdited = true;
-		}
-	}
-
-	let validity: Validity = $state(Validity.Valid);
-	let reason = $state<string | undefined>();
-
-	$effect(() => {
-		const validityPromise = focusDetails.validity;
-
-		validityPromise
-			.then((v) => {
-				if (!v) {
-					validity = Validity.Neutral;
-					reason = undefined;
-				} else if (isValidityTuple(v)) {
-					validity = v.value;
-					reason = v.reason;
-				} else {
-					validity = v;
-					reason = undefined;
-				}
-			})
-			.catch(devCatch);
-	});
-
-	const handleDoubleClick = async () => {
-		if (await editable) {
-			tableContext.focusStartIsBeingEdited = true;
-		}
-	};
-
-	function refocusTd() {
-		tableContext.focusStartIsBeingEdited = false;
-		modalLock = false;
-		tick()
-			.then(() => {
-				tdref?.focus();
-			})
-			.catch(devCatch);
-	}
-
-	function tryHandleDoubleClick() {
-		handleDoubleClick().catch(devCatch);
-	}
-
-	let prevtdref: HTMLTableCellElement | undefined = undefined;
-	$effect(() => {
-		if (tdref) {
-			if (tdref != prevtdref) {
-				tdref.addEventListener('edit', tryHandleDoubleClick);
-			} else {
-				prevtdref = tdref;
-			}
-		}
-	});
-</script>
-
-<!-- // onKeyDown={handleTdKeydown} -->
-<!-- ref={tdref} -->
-
-<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-
-<td
-	{id}
-	style={focusDetails.outline}
-	aria-label={reason}
-	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().catch(devCatch);
-	}}
-	ondblclick={() => {
-		handleDoubleClick().catch(devCatch);
-	}}
->
-	{#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).catch(devCatch);
-				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}
-		<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-		{@debug value}
-		Error reading value
-	{:else}
-		-
-	{/if}
-</td>
-
-<style>td {
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, RowIdType extends Primitive"
+>
+	import { dev } from '$app/environment';
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
+	import type { CellCoordinates } from '../../../Types/Coordinates/CellCoordinates.js';
+	import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import DateModal from '../../../../Touch/DateModal.svelte';
+	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
+	import { Validity } from '../../../../../Types/Internal/Validity.js';
+	import { getContext, tick } from 'svelte';
+	import type { TableDatePickerProps } from './TableDatePickerProps.js';
+
+	const { cell }: TableDatePickerProps<T> = $props();
+
+	const value = $derived(cell.getValue());
+
+	/**
+	 * Narrowed `Date` view of the raw value. Templates fall back to parsing a
+	 * string with `new Date(value)`; that parse happens once per render and
+	 * could be hoisted into a $derived in a follow-up (see workorder).
+	 */
+	const dateValue = $derived(value && value instanceof Date ? value : undefined);
+
+	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
+
+	const columnDef = $derived(cell.column.columnDef);
+	const coordinates: CellCoordinates = $derived({
+		row: cell.row.visibleIndex,
+		column: columnDef.index,
+		id: columnDef.id,
+	});
+
+	const editable = $derived(
+		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
+	);
+	const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
+		tableContext._focus.getFocusDetailsFor(cell)
+	);
+
+	let modalLock = $state(false);
+
+	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.focusStartIsBeingEdited
+	);
+
+	function handleEditable(isEditable: boolean): Promise<void> {
+		if (isEditable) {
+			return tick().then(() => {
+				modalLock = true;
+			});
+		} else {
+			if (modalLock) {
+				return tick().then(() => {
+					if (!tableContext.singleClickEditing) {
+						tableContext.focusStartIsBeingEdited = false;
+					}
+					modalLock = false;
+				});
+			}
+
+			return Promise.resolve();
+		}
+	}
+
+	$effect(() => {
+		void editable;
+		if (wantsToBeEdited) {
+			if (editable instanceof Promise) {
+				editable
+					.then((isEditable) => {
+						return handleEditable(isEditable);
+					})
+					.catch(devCatch);
+			} else {
+				handleEditable(editable).catch(devCatch);
+			}
+		} else {
+			tick()
+				.then(() => {
+					modalLock = false;
+					tableContext.focusStartIsBeingEdited = false;
+				})
+				.catch(devCatch);
+		}
+	});
+
+	let tdref: HTMLElement | undefined = $state();
+
+	const id = $derived(`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`);
+	async function handleSingleClick(event?: Event) {
+		if (
+			(await editable) &&
+			tableContext.singleClickEditing &&
+			(!event || !event.target || (event.target as HTMLElement).id === id)
+		) {
+			tableContext.focusStartIsBeingEdited = true;
+		}
+	}
+
+	let validity: Validity = $state(Validity.Valid);
+	let reason = $state<string | undefined>();
+
+	$effect(() => {
+		const validityPromise = focusDetails.validity;
+
+		validityPromise
+			.then((v) => {
+				if (!v) {
+					validity = Validity.Neutral;
+					reason = undefined;
+				} else if (isValidityTuple(v)) {
+					validity = v.value;
+					reason = v.reason;
+				} else {
+					validity = v;
+					reason = undefined;
+				}
+			})
+			.catch(devCatch);
+	});
+
+	const handleDoubleClick = async () => {
+		if (await editable) {
+			tableContext.focusStartIsBeingEdited = true;
+		}
+	};
+
+	function refocusTd() {
+		tableContext.focusStartIsBeingEdited = false;
+		modalLock = false;
+		tick()
+			.then(() => {
+				tdref?.focus();
+			})
+			.catch(devCatch);
+	}
+
+	function tryHandleDoubleClick() {
+		handleDoubleClick().catch(devCatch);
+	}
+
+	/**
+	 * Effect wires the custom `edit` event to the keyboard-triggered double-click
+	 * handler. The cleanup returns a removeEventListener so a remounted `tdref`
+	 * does not accumulate stale listeners (P1 workorder finding).
+	 */
+	$effect(() => {
+		const node = tdref;
+		if (!node) {
+			return;
+		}
+		node.addEventListener('edit', tryHandleDoubleClick);
+		return () => {
+			node.removeEventListener('edit', tryHandleDoubleClick);
+		};
+	});
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	{id}
+	style={focusDetails.outline}
+	aria-label={reason}
+	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().catch(devCatch);
+	}}
+	ondblclick={() => {
+		handleDoubleClick().catch(devCatch);
+	}}
+>
+	{#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).catch(devCatch);
+				refocusTd();
+			}}
+		/>
+	{/if}
+
+	{#if !value}
+		-
+	{:else if typeof value === 'string'}
+		{@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}
+		<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+		{@debug value}
+		Error reading value
+	{:else}
+		-
+	{/if}
+</div>
+
+<style>.focusable,
+.checkbox-cell,
+.input-cell,
+.select-cell,
+.datepicker-cell {
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
@@ -245,36 +257,54 @@
   position: relative;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
-  border: solid 1px #cbd4da;
-  border-left: none;
+  border-right: solid 1px #cbd4da;
+  border-bottom: solid 1px #cbd4da;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--height);
 }
 
-td.multifocus {
+.focusable.multifocus,
+.checkbox-cell.multifocus,
+.input-cell.multifocus,
+.select-cell.multifocus {
   background-color: var(--multifocus-colour, #e6f8fd);
 }
-td.multifocus.multifocus-start {
+.focusable.multifocus.multifocus-start,
+.checkbox-cell.multifocus.multifocus-start,
+.input-cell.multifocus.multifocus-start,
+.select-cell.multifocus.multifocus-start {
   background-color: #ffffff;
 }
 
-td.focusable {
+.focusable {
   user-select: none;
   cursor: default;
   outline: none;
 }
-td.focusable.editable {
+.focusable.editable {
   cursor: pointer;
 }
 
-td.info {
+.focusable.info,
+.checkbox-cell.info,
+.input-cell.info,
+.select-cell.info {
   background-color: #1f81a0;
 }
-td.warning {
+.focusable.warning,
+.checkbox-cell.warning,
+.input-cell.warning,
+.select-cell.warning {
   background-color: #f8eab8;
 }
-td.error {
+.focusable.error,
+.checkbox-cell.error,
+.input-cell.error,
+.select-cell.error {
   background-color: #f9e9e9;
 }
 
-td {
+[role=cell] {
   position: static;
-}</style>
+}</style>

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

@@ -1,25 +1,26 @@
+import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
 import type { TableDatePickerProps } from './TableDatePickerProps.js';
-declare function $$render<T extends object>(): {
+declare function $$render<T extends object, RowIdType extends Primitive>(): {
     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'];
+declare class __sveltets_Render<T extends object, RowIdType extends Primitive> {
+    props(): ReturnType<typeof $$render<T, RowIdType>>['props'];
+    events(): ReturnType<typeof $$render<T, RowIdType>>['events'];
+    slots(): ReturnType<typeof $$render<T, RowIdType>>['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']>;
+    new <T extends object, RowIdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, RowIdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, RowIdType>['props']>, ReturnType<__sveltets_Render<T, RowIdType>['events']>, ReturnType<__sveltets_Render<T, RowIdType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, RowIdType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, RowIdType>['exports']>;
+    <T extends object, RowIdType extends Primitive>(internal: unknown, props: ReturnType<__sveltets_Render<T, RowIdType>['props']> & {}): ReturnType<__sveltets_Render<T, RowIdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const TableDatePicker: $$IsomorphicComponent;
-type TableDatePicker<T extends object> = InstanceType<typeof TableDatePicker<T>>;
+type TableDatePicker<T extends object, RowIdType extends Primitive> = InstanceType<typeof TableDatePicker<T, RowIdType>>;
 export default TableDatePicker;

package/dist/Components/Table/Body/Rows/Columns/TableDatePickerProps.d.ts

@@ -1,4 +1,13 @@
 import type { DateTableCell } from '../../../Types/Columns/DateTableCell.js';
+/**
+ * Props for {@link TableDatePicker}. The cell renders an inline localised
+ * date / date-time and opens a `DateModal` when the row enters edit mode.
+ *
+ * The `never` / `unknown` generics on `DateTableCell` are placeholders for
+ * the filter-value and options-value types; tightening them is deferred to
+ * the cross-cutting RowGenericThreading + DateInputDef.value follow-up.
+ */
 export interface TableDatePickerProps<T extends object> {
+    /** The date cell to render. */
     cell: DateTableCell<T, never, unknown>;
 }