@lavalogic/scoria 0.35.0 → 0.36.0

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

@@ -1,185 +1,185 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import type { RowSelectionDef } from '../../../Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
-	import type { TableCell } from '../../../Types/Columns/TableCell.js';
-	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
-	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
-	import { Validity } from '../../../../../Types/Internal/Validity.js';
-	import { getContext, tick, untrack } from 'svelte';
-	import type { ChangeEventHandler } from 'svelte/elements';
-
-	export interface TableCheckboxProps<T extends object> {
-		cell: TableCell<T>;
-	}
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object,RowIdType extends Primitive"
->
-	const { cell }: TableCheckboxProps<T> = $props();
-
-	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
-
-	const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
-		new TableFocusDetails(cell, tableContext)
-	);
-
-	const keyOrPromise: RowIdType | Promise<RowIdType> = $derived(
-		tableContext.selectionExtractor(cell.row.original)
-	);
-	const isSelectableMaybePromise = $derived(
-		(cell.column.columnDef as RowSelectionDef<T>).isSelectable(
-			cell.row.original,
-			cell.row.originalIndex
-		)
-	);
-
-	let isSelectable = $state(false);
-
-	$effect(() => {
-		if (isSelectableMaybePromise instanceof Promise) {
-			isSelectableMaybePromise
-				.then((it) => {
-					isSelectable = it;
-				})
-				.catch(devCatch);
-		} else {
-			isSelectable = isSelectableMaybePromise;
-		}
-	});
-
-	// Sync path (common): uses selectedItems.has(key) for per-key reactive tracking —
-	// only this row's checkbox re-runs when its specific key changes.
-	// Async path (rare): returns null and defers to _isSelectedAsync updated by the $effect below.
-	const isSelected: boolean | null = $derived.by(() => {
-		const k = keyOrPromise;
-		if (k instanceof Promise) {
-			void tableContext.selectedItems.size; // async fallback: re-run when any selection changes
-			return null;
-		}
-		return tableContext.selectedItems.has(k);
-	});
-
-	let _isSelectedAsync: boolean = $state(false);
-	$effect(() => {
-		const k = keyOrPromise;
-		if (!(k instanceof Promise)) {
-			return;
-		}
-		void tableContext.selectedItems.size; // re-run when selection changes
-		k.then((key) => {
-			_isSelectedAsync = tableContext.selectedItems.has(key);
-		}).catch(devCatch);
-	});
-
-	let previousValidity: Validity = $state(Validity.Valid);
-	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);
-	});
-
-	$effect(() => {
-		if (validity != previousValidity) {
-			untrack(() => {
-				tick()
-					.then(() => {
-						const x: void | Promise<void> =
-							validity === Validity.Invalid
-								? tableContext.addInvalidValue(cell.row.original)
-								: tableContext.removeInvalidValue(cell.row.original);
-
-						previousValidity = validity;
-						return x;
-					})
-					.catch(devCatch);
-			});
-		}
-	});
-
-	const onchange: ChangeEventHandler<HTMLInputElement> = () => {
-		tableContext.toggleSelected(cell.row.original)?.catch(devCatch);
-	};
-
-	let inputRef: HTMLInputElement | undefined = $state();
-</script>
-
-<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-<td
-	class="checkbox-cell"
-	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(focusDetails.coordinates);
-			} else {
-				tableContext.startFocus(focusDetails.coordinates);
-			}
-		}
-	}}
-	onkeydown={(e) => {
-		if (e.key === 'Enter') {
-			e.stopPropagation();
-		}
-	}}
-	onkeyup={(e) => {
-		if (e.key === 'Enter') {
-			e.stopPropagation();
-
-			tableContext.toggleSelected(cell.row.original)?.catch(devCatch);
-
-			inputRef?.dispatchEvent(new InputEvent('change'));
-			// tableContext.onEditCell(cell.row.original, focusDetails.coordinates, !value);
-		}
-	}}
-	onmouseover={() => {
-		if (tableContext.isMousingDown) {
-			tableContext.setFocusEnd(focusDetails.coordinates);
-		}
-	}}
-	onmouseup={() => {
-		tableContext.endFocus(focusDetails.coordinates);
-	}}
->
-	<label
-		class:multifocus={focusDetails.isMultiFocused}
-		class:multifocus-start={focusDetails.isMultiFocusStart}
-		style={focusDetails.outline}
-	>
-		<input
-			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
-			bind:this={inputRef}
-			{onchange}
-			type="checkbox"
-			checked={isSelected ?? _isSelectedAsync}
-			disabled={!isSelectable || tableContext.showSelectedOnly}
-		/>
-	</label>
-</td>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import type { RowSelectionDef } from '../../../Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
+	import type { TableCell } from '../../../Types/Columns/TableCell.js';
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
+	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
+	import { Validity } from '../../../../../Types/Internal/Validity.js';
+	import { getContext, tick, untrack } from 'svelte';
+	import type { ChangeEventHandler } from 'svelte/elements';
+
+	export interface TableCheckboxProps<T extends object> {
+		cell: TableCell<T>;
+	}
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object,RowIdType extends Primitive"
+>
+	const { cell }: TableCheckboxProps<T> = $props();
+
+	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
+
+	const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
+		new TableFocusDetails(cell, tableContext)
+	);
+
+	const keyOrPromise: RowIdType | Promise<RowIdType> = $derived(
+		tableContext.selectionExtractor(cell.row.original)
+	);
+	const isSelectableMaybePromise = $derived(
+		(cell.column.columnDef as RowSelectionDef<T>).isSelectable(
+			cell.row.original,
+			cell.row.originalIndex
+		)
+	);
+
+	let isSelectable = $state(false);
+
+	$effect(() => {
+		if (isSelectableMaybePromise instanceof Promise) {
+			isSelectableMaybePromise
+				.then((it) => {
+					isSelectable = it;
+				})
+				.catch(devCatch);
+		} else {
+			isSelectable = isSelectableMaybePromise;
+		}
+	});
+
+	// Sync path (common): uses selectedItems.has(key) for per-key reactive tracking —
+	// only this row's checkbox re-runs when its specific key changes.
+	// Async path (rare): returns null and defers to _isSelectedAsync updated by the $effect below.
+	const isSelected: boolean | null = $derived.by(() => {
+		const k = keyOrPromise;
+		if (k instanceof Promise) {
+			void tableContext.selectedItems.size; // async fallback: re-run when any selection changes
+			return null;
+		}
+		return tableContext.selectedItems.has(k);
+	});
+
+	let _isSelectedAsync: boolean = $state(false);
+	$effect(() => {
+		const k = keyOrPromise;
+		if (!(k instanceof Promise)) {
+			return;
+		}
+		void tableContext.selectedItems.size; // re-run when selection changes
+		k.then((key) => {
+			_isSelectedAsync = tableContext.selectedItems.has(key);
+		}).catch(devCatch);
+	});
+
+	let previousValidity: Validity = $state(Validity.Valid);
+	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);
+	});
+
+	$effect(() => {
+		if (validity != previousValidity) {
+			untrack(() => {
+				tick()
+					.then(() => {
+						const x: void | Promise<void> =
+							validity === Validity.Invalid
+								? tableContext.addInvalidValue(cell.row.original)
+								: tableContext.removeInvalidValue(cell.row.original);
+
+						previousValidity = validity;
+						return x;
+					})
+					.catch(devCatch);
+			});
+		}
+	});
+
+	const onchange: ChangeEventHandler<HTMLInputElement> = () => {
+		tableContext.toggleSelected(cell.row.original)?.catch(devCatch);
+	};
+
+	let inputRef: HTMLInputElement | undefined = $state();
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<td
+	class="checkbox-cell"
+	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(focusDetails.coordinates);
+			} else {
+				tableContext.startFocus(focusDetails.coordinates);
+			}
+		}
+	}}
+	onkeydown={(e) => {
+		if (e.key === 'Enter') {
+			e.stopPropagation();
+		}
+	}}
+	onkeyup={(e) => {
+		if (e.key === 'Enter') {
+			e.stopPropagation();
+
+			tableContext.toggleSelected(cell.row.original)?.catch(devCatch);
+
+			inputRef?.dispatchEvent(new InputEvent('change'));
+			// tableContext.onEditCell(cell.row.original, focusDetails.coordinates, !value);
+		}
+	}}
+	onmouseover={() => {
+		if (tableContext.isMousingDown) {
+			tableContext.setFocusEnd(focusDetails.coordinates);
+		}
+	}}
+	onmouseup={() => {
+		tableContext.endFocus(focusDetails.coordinates);
+	}}
+>
+	<label
+		class:multifocus={focusDetails.isMultiFocused}
+		class:multifocus-start={focusDetails.isMultiFocusStart}
+		style={focusDetails.outline}
+	>
+		<input
+			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
+			bind:this={inputRef}
+			{onchange}
+			type="checkbox"
+			checked={isSelected ?? _isSelectedAsync}
+			disabled={!isSelectable || tableContext.showSelectedOnly}
+		/>
+	</label>
+</td>
+
 <style>td {
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
@@ -238,4 +238,4 @@ td.warning {
 }
 td.error {
   background-color: #f9e9e9;
-}</style>
+}</style>