@lavalogic/scoria 0.40.1 → 0.40.3

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

@@ -1,128 +1,157 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, RowIdType extends Primitive"
->
-	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
-	import type { 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 } from 'svelte';
-	import type { ChangeEventHandler } from 'svelte/elements';
-	import type { TableCheckboxProps } from './TableCheckboxProps.js';
-
-	const { cell, onchange: parentOnchange }: TableCheckboxProps<T> = $props();
-
-	const value = $derived(!!cell.getValue());
-
-	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
-
-	const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
-		tableContext._focus.getFocusDetailsFor(cell)
-	);
-
-	let inputRef: HTMLInputElement | undefined = $state();
-
-	/**
-	 * Commits the new value through `TableContext.onEditCell` and forwards the
-	 * native event to the optional parent handler. The `tick` reconcile fixes a
-	 * race where the table edit was rejected by validation but the input
-	 * already showed the new checked state.
-	 */
-	const onchange: ChangeEventHandler<HTMLInputElement> = (e) => {
-		tableContext
-			.onEditCell(
-				cell.row.original,
-				focusDetails.coordinates,
-				(e.target as HTMLInputElement).checked
-			)
-			.catch(devCatch);
-		parentOnchange?.(e);
-
-		tick()
-			.then(() => {
-				if (inputRef && value != inputRef.checked) {
-					inputRef.checked = value;
-				}
-			})
-			.catch(devCatch);
-	};
-
-	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);
-	});
-</script>
-
-<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class="checkbox-cell"
-	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);
-			}
-		}
-	}}
-	onkeyup={(e: KeyboardEvent) => {
-		if (e.key === 'Enter') {
-			e.stopPropagation();
-			tableContext.onEditCell(cell.row.original, focusDetails.coordinates, !value).catch(devCatch);
-		}
-	}}
-	onkeydown={(e: KeyboardEvent) => {
-		if (e.key == 'Enter' || e.key == 'F2') {
-			e.stopPropagation();
-		}
-	}}
-	onmouseover={() => {
-		if (tableContext.isMousingDown) {
-			tableContext.setFocusEnd(focusDetails.coordinates);
-		}
-	}}
-	onmouseup={() => {
-		tableContext.endFocus(focusDetails.coordinates);
-	}}
-	class:info={validity == Validity.Info}
-	class:success={validity == Validity.Valid}
-	class:warning={validity == Validity.Warning}
-	class:error={validity == Validity.Invalid}
->
-	&nbsp;
-	<label
-		class:multifocus={focusDetails.isMultiFocused}
-		class:multifocus-start={focusDetails.isMultiFocusStart}
-		style={focusDetails.outline}
-	>
-		<input
-			bind:this={inputRef}
-			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
-			{onchange}
-			type="checkbox"
-			checked={value}
-		/>
-	</label>
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, RowIdType extends Primitive"
+>
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
+	import type { 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 } from 'svelte';
+	import type { ChangeEventHandler } from 'svelte/elements';
+	import type { TableCheckboxProps } from './TableCheckboxProps.js';
+
+	const { cell, onchange: parentOnchange }: TableCheckboxProps<T> = $props();
+
+	const value = $derived(!!cell.getValue());
+
+	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
+
+	const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
+		tableContext._focus.getFocusDetailsFor(cell)
+	);
+
+	// Resolve the column's (possibly async) `isEditable` predicate for this
+	// row. A non-editable checkbox renders disabled (read-only) rather than
+	// toggling — mirrors how the inline-edit cells gate on `isEditable`.
+	const editableAsync = $derived(
+		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
+	);
+	let editable = $state(false);
+	let editableCounter = 0;
+	$effect(() => {
+		void editableAsync;
+		const local = (editableCounter = editableCounter + 1);
+		(async () => {
+			try {
+				const resolved = await editableAsync;
+				if (editableCounter === local) {
+					editable = resolved;
+				}
+			} catch {
+				if (editableCounter === local) {
+					editable = false;
+				}
+			}
+		})().catch(devCatch);
+	});
+
+	let inputRef: HTMLInputElement | undefined = $state();
+
+	/**
+	 * Commits the new value through `TableContext.onEditCell` and forwards the
+	 * native event to the optional parent handler. The `tick` reconcile fixes a
+	 * race where the table edit was rejected by validation but the input
+	 * already showed the new checked state.
+	 */
+	const onchange: ChangeEventHandler<HTMLInputElement> = (e) => {
+		if (!editable) {
+			return;
+		}
+		tableContext
+			.onEditCell(
+				cell.row.original,
+				focusDetails.coordinates,
+				(e.target as HTMLInputElement).checked
+			)
+			.catch(devCatch);
+		parentOnchange?.(e);
+
+		tick()
+			.then(() => {
+				if (inputRef && value != inputRef.checked) {
+					inputRef.checked = value;
+				}
+			})
+			.catch(devCatch);
+	};
+
+	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);
+	});
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="checkbox-cell"
+	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);
+			}
+		}
+	}}
+	onkeyup={(e: KeyboardEvent) => {
+		if (e.key === 'Enter' && editable) {
+			e.stopPropagation();
+			tableContext.onEditCell(cell.row.original, focusDetails.coordinates, !value).catch(devCatch);
+		}
+	}}
+	onkeydown={(e: KeyboardEvent) => {
+		if (e.key == 'Enter' || e.key == 'F2') {
+			e.stopPropagation();
+		}
+	}}
+	onmouseover={() => {
+		if (tableContext.isMousingDown) {
+			tableContext.setFocusEnd(focusDetails.coordinates);
+		}
+	}}
+	onmouseup={() => {
+		tableContext.endFocus(focusDetails.coordinates);
+	}}
+	class:info={validity == Validity.Info}
+	class:success={validity == Validity.Valid}
+	class:warning={validity == Validity.Warning}
+	class:error={validity == Validity.Invalid}
+>
+	&nbsp;
+	<label
+		class:multifocus={focusDetails.isMultiFocused}
+		class:multifocus-start={focusDetails.isMultiFocusStart}
+		style={focusDetails.outline}
+	>
+		<input
+			bind:this={inputRef}
+			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
+			{onchange}
+			type="checkbox"
+			checked={value}
+			disabled={!editable}
+		/>
+	</label>
+</div>
+
 <style>.focusable,
 .checkbox-cell,
 .input-cell,
@@ -198,4 +227,9 @@ label.multifocus.multifocus-start {
 .input-cell.error,
 .select-cell.error {
   background-color: #f9e9e9;
-}</style>
+}
+
+input:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}</style>

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

@@ -1,159 +1,159 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import { ExpandDef } from '../../../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
-	import { DisplayType } from '../../../Types/Columns/DisplayType.js';
-	import type { TableCell } from '../../../Types/Columns/TableCell.js';
-	import type { Component, Snippet } from 'svelte';
-	import ActionsCell from './ActionsCell.svelte';
-	import BubbleCell from './BubbleCell.svelte';
-	import ExpandCell from './ExpandCell.svelte';
-	import FocusableImmutableCell from './FocusableImmutableCell.svelte';
-
-	import { ColumnType } from '../../../Types/Columns/ColumnType.js';
-	import { ActionsDef } from '../../../Types/Columns/Definitions/Actions/ActionsDef.svelte.js';
-	import { AbstractDisplayDef } from '../../../Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js';
-	import { ProgressBarDef } from '../../../Types/Columns/Definitions/Display/ProgressBarDef.svelte.js';
-	import type { ExpandTableCell } from '../../../Types/Columns/ExpandTableCell.js';
-	import type { ProgressBarTableCell } from '../../../Types/Columns/ProgressBarTableCell.js';
-	import { getErrorMessage } from '../../../../../Helpers/Helpers.svelte.js';
-	import AccessorComponent from './AccessorComponent.svelte';
-	import type { ActionsTableCell } from './ActionsTableCell.js';
-	import ProgressCell from './ProgressCell.svelte';
-	import TableRowSelectionCheckbox from './TableRowSelectionCheckbox.svelte';
-	import type { TableColumnProps } from './TableColumnProps.js';
-	import ValidityCell from './ValidityCell.svelte';
-
-	/** Narrowing type-guard distinguishing a progress-bar cell by its `columnDef` instance. */
-	function isProgressBarTableCell<T extends object>(
-		cell: TableCell<T>
-	): cell is ProgressBarTableCell<T, unknown> {
-		return cell.column.columnDef instanceof ProgressBarDef;
-	}
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object"
->
-	import { dev } from '$app/environment';
-	import { RowSelectionDef } from '../../../Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
-	import type { Primitive } from '../../../Types/Context/TableInitOptions.js';
-	import type { RowSelectionTableCell } from './RowSelectionTableCell.js';
-
-	let { cell, expandedColumnDef, onExpandChange }: TableColumnProps<T> = $props();
-
-	/** Narrowing type-guard distinguishing the row-selection cell. */
-	function isRowSelectionCell<T extends object>(
-		cell: TableCell<T>
-	): cell is RowSelectionTableCell<T> {
-		return cell.column.columnDef instanceof RowSelectionDef;
-	}
-
-	/**
-	 * Returns true when the accessor output is a Svelte component constructor.
-	 * Distinguishing a Svelte 5 component (a function) from a snippet is a
-	 * runtime-only heuristic (both are typeof 'function'); the
-	 * constructor-only branch is reached first because TableColumn checks
-	 * `valueOrComponentIsConstructor` before `isSnippet`. Tightening this to
-	 * a real type-level discriminator is tracked under the
-	 * RowGenericThreading follow-up.
-	 */
-	function valueOrComponentIsConstructor(
-		valueOrComponent: unknown
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	): valueOrComponent is Component<any> {
-		return typeof valueOrComponent === 'function';
-	}
-
-	/** Narrowing type-guard distinguishing an actions cell. */
-	function isActionsDef(cell: TableCell<T>): cell is ActionsTableCell<T, unknown> {
-		return cell.column.columnDef instanceof ActionsDef;
-	}
-
-	/** Narrowing type-guard distinguishing the expand-row cell. */
-	function isExpandTableCell(
-		cell: TableCell<T>
-	): cell is ExpandTableCell<T, object, Primitive, unknown> {
-		return cell.column.columnDef instanceof ExpandDef;
-	}
-
-	/** Heuristic snippet check; both Snippets and Components are functions at runtime. */
-	function isSnippet(value: unknown): value is Snippet<[TableCell<T>]> {
-		return !!value && typeof value == 'function';
-	}
-</script>
-
-{#if cell.column.getIsVisible()}
-	{@const columnDef = cell.column.columnDef}
-
-	{#if isRowSelectionCell(cell)}
-		<TableRowSelectionCheckbox {cell} />
-	{:else if isActionsDef(cell)}
-		<ActionsCell {cell} />
-	{:else if isExpandTableCell(cell)}
-		<ExpandCell
-			{cell}
-			{expandedColumnDef}
-			{onExpandChange}
-		/>
-	{:else if columnDef.columnType !== ColumnType.Display}
-		<AccessorComponent {cell} />
-	{:else if cell.column.columnDef instanceof AbstractDisplayDef}
-		{#if cell.column.columnDef.displayType === DisplayType.Bubbles}
-			<BubbleCell {cell} />
-		{:else if cell.column.columnDef.displayType === DisplayType.Validity}
-			<ValidityCell {cell} />
-		{:else if isProgressBarTableCell(cell)}
-			<ProgressCell {cell} />
-		{:else if cell.column.columnDef.displayType === DisplayType.Normal}
-			<FocusableImmutableCell {cell} />
-		{:else}
-			{#if dev}
-				<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-				{@debug cell}
-			{/if}
-			Unknown Cell Type
-		{/if}
-	{:else}
-		{@const valueOrComponentPromise =
-			cell.column.columnDef.accessorFn?.(cell.row.original, cell.row.originalIndex) ??
-			cell.row.original[cell.column.id as keyof typeof cell.row.original]}
-
-		{#await valueOrComponentPromise}
-			<FocusableImmutableCell {cell} />
-		{:then Value}
-			{#if typeof Value === 'string' || typeof Value == 'number'}
-				<FocusableImmutableCell {cell} />
-			{:else if valueOrComponentIsConstructor(Value)}
-				<FocusableImmutableCell {cell}>
-					<Value {cell} />
-				</FocusableImmutableCell>
-			{:else if isSnippet(Value)}
-				<FocusableImmutableCell {cell}>
-					<!-- eslint-disable-next-line @typescript-eslint/no-unsafe-call -->
-					{@render Value(cell)}
-				</FocusableImmutableCell>
-			{:else}
-				{#if dev}
-					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-					{@debug cell}
-					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-					{@debug Value}
-				{/if}
-				Unknown Cell or value Type
-			{/if}
-		{:catch e}
-			<FocusableImmutableCell {cell}>
-				{#if dev}
-					{getErrorMessage(e)}
-				{:else}
-					Error rendering cell
-				{/if}
-			</FocusableImmutableCell>
-		{/await}
-	{/if}
-{/if}
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import { ExpandDef } from '../../../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
+	import { DisplayType } from '../../../Types/Columns/DisplayType.js';
+	import type { TableCell } from '../../../Types/Columns/TableCell.js';
+	import type { Component, Snippet } from 'svelte';
+	import ActionsCell from './ActionsCell.svelte';
+	import BubbleCell from './BubbleCell.svelte';
+	import ExpandCell from './ExpandCell.svelte';
+	import FocusableImmutableCell from './FocusableImmutableCell.svelte';
+
+	import { ColumnType } from '../../../Types/Columns/ColumnType.js';
+	import { ActionsDef } from '../../../Types/Columns/Definitions/Actions/ActionsDef.svelte.js';
+	import { AbstractDisplayDef } from '../../../Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js';
+	import { ProgressBarDef } from '../../../Types/Columns/Definitions/Display/ProgressBarDef.svelte.js';
+	import type { ExpandTableCell } from '../../../Types/Columns/ExpandTableCell.js';
+	import type { ProgressBarTableCell } from '../../../Types/Columns/ProgressBarTableCell.js';
+	import { getErrorMessage } from '../../../../../Helpers/Helpers.svelte.js';
+	import AccessorComponent from './AccessorComponent.svelte';
+	import type { ActionsTableCell } from './ActionsTableCell.js';
+	import ProgressCell from './ProgressCell.svelte';
+	import TableRowSelectionCheckbox from './TableRowSelectionCheckbox.svelte';
+	import type { TableColumnProps } from './TableColumnProps.js';
+	import ValidityCell from './ValidityCell.svelte';
+
+	/** Narrowing type-guard distinguishing a progress-bar cell by its `columnDef` instance. */
+	function isProgressBarTableCell<T extends object>(
+		cell: TableCell<T>
+	): cell is ProgressBarTableCell<T, unknown> {
+		return cell.column.columnDef instanceof ProgressBarDef;
+	}
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object"
+>
+	import { dev } from '$app/environment';
+	import { RowSelectionDef } from '../../../Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
+	import type { Primitive } from '../../../Types/Context/TableInitOptions.js';
+	import type { RowSelectionTableCell } from './RowSelectionTableCell.js';
+
+	let { cell, expandedColumnDef, onExpandChange }: TableColumnProps<T> = $props();
+
+	/** Narrowing type-guard distinguishing the row-selection cell. */
+	function isRowSelectionCell<T extends object>(
+		cell: TableCell<T>
+	): cell is RowSelectionTableCell<T> {
+		return cell.column.columnDef instanceof RowSelectionDef;
+	}
+
+	/**
+	 * Returns true when the accessor output is a Svelte component constructor.
+	 * Distinguishing a Svelte 5 component (a function) from a snippet is a
+	 * runtime-only heuristic (both are typeof 'function'); the
+	 * constructor-only branch is reached first because TableColumn checks
+	 * `valueOrComponentIsConstructor` before `isSnippet`. Tightening this to
+	 * a real type-level discriminator is tracked under the
+	 * RowGenericThreading follow-up.
+	 */
+	function valueOrComponentIsConstructor(
+		valueOrComponent: unknown
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	): valueOrComponent is Component<any> {
+		return typeof valueOrComponent === 'function';
+	}
+
+	/** Narrowing type-guard distinguishing an actions cell. */
+	function isActionsDef(cell: TableCell<T>): cell is ActionsTableCell<T, unknown> {
+		return cell.column.columnDef instanceof ActionsDef;
+	}
+
+	/** Narrowing type-guard distinguishing the expand-row cell. */
+	function isExpandTableCell(
+		cell: TableCell<T>
+	): cell is ExpandTableCell<T, object, Primitive, unknown> {
+		return cell.column.columnDef instanceof ExpandDef;
+	}
+
+	/** Heuristic snippet check; both Snippets and Components are functions at runtime. */
+	function isSnippet(value: unknown): value is Snippet<[TableCell<T>]> {
+		return !!value && typeof value == 'function';
+	}
+</script>
+
+{#if cell.column.getIsVisible()}
+	{@const columnDef = cell.column.columnDef}
+
+	{#if isRowSelectionCell(cell)}
+		<TableRowSelectionCheckbox {cell} />
+	{:else if isActionsDef(cell)}
+		<ActionsCell {cell} />
+	{:else if isExpandTableCell(cell)}
+		<ExpandCell
+			{cell}
+			{expandedColumnDef}
+			{onExpandChange}
+		/>
+	{:else if columnDef.columnType !== ColumnType.Display}
+		<AccessorComponent {cell} />
+	{:else if cell.column.columnDef instanceof AbstractDisplayDef}
+		{#if cell.column.columnDef.displayType === DisplayType.Bubbles}
+			<BubbleCell {cell} />
+		{:else if cell.column.columnDef.displayType === DisplayType.Validity}
+			<ValidityCell {cell} />
+		{:else if isProgressBarTableCell(cell)}
+			<ProgressCell {cell} />
+		{:else if cell.column.columnDef.displayType === DisplayType.Normal}
+			<FocusableImmutableCell {cell} />
+		{:else}
+			{#if dev}
+				<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+				{@debug cell}
+			{/if}
+			Unknown Cell Type
+		{/if}
+	{:else}
+		{@const valueOrComponentPromise =
+			cell.column.columnDef.accessorFn?.(cell.row.original, cell.row.originalIndex) ??
+			cell.row.original[cell.column.id as keyof typeof cell.row.original]}
+
+		{#await valueOrComponentPromise}
+			<FocusableImmutableCell {cell} />
+		{:then Value}
+			{#if typeof Value === 'string' || typeof Value == 'number'}
+				<FocusableImmutableCell {cell} />
+			{:else if valueOrComponentIsConstructor(Value)}
+				<FocusableImmutableCell {cell}>
+					<Value {cell} />
+				</FocusableImmutableCell>
+			{:else if isSnippet(Value)}
+				<FocusableImmutableCell {cell}>
+					<!-- eslint-disable-next-line @typescript-eslint/no-unsafe-call -->
+					{@render Value(cell)}
+				</FocusableImmutableCell>
+			{:else}
+				{#if dev}
+					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+					{@debug cell}
+					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+					{@debug Value}
+				{/if}
+				Unknown Cell or value Type
+			{/if}
+		{:catch e}
+			<FocusableImmutableCell {cell}>
+				{#if dev}
+					{getErrorMessage(e)}
+				{:else}
+					Error rendering cell
+				{/if}
+			</FocusableImmutableCell>
+		{/await}
+	{/if}
+{/if}