@lavalogic/scoria 0.40.14 → 0.40.16

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

@@ -1,87 +1,52 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import Button from '../../../../Button.svelte';
-	import type { TableActionButton } from '../../../Types/Columns/TableActionButton.js';
-	import { getErrorMessage } from '../../../../../Helpers/Helpers.svelte.js';
-	import { ColourSet } from '../../../../../scss/colours.js';
-	import { Size } from '../../../../../Types/Internal/Size.js';
-	import type { ActionsTableCell } from './ActionsTableCell.js';
-
-	/**
-	 * Props for {@link TableAction}. Renders a single row-action `<Button>`
-	 * inside the actions popover; resolves the per-row label and enabled flag
-	 * from the `action` callbacks (each may be sync or async).
-	 *
-	 * Kept inline because extracting it would change the public import path
-	 * for the `TableActionProps` type (breaking); the sibling-Props file
-	 * extraction is deferred to the cross-cutting Props-extraction sweep.
-	 */
-	export interface TableActionProps<T extends object, FilterValueType> {
-		/** The action button to render (one button per `cell.column.columnDef.actions[*]`). */
-		action: TableActionButton<T>;
-		/** The host actions-cell instance, used to resolve per-row state. */
-		cell: ActionsTableCell<T, FilterValueType>;
-	}
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object, FilterValueType"
->
-	import { dev } from '$app/environment';
-
-	const { action, cell }: TableActionProps<T, FilterValueType> = $props();
-
-	/**
-	 * Resolved [label, isEnabled] tuple. Both sources are awaited in parallel
-	 * via Promise.all so an async `getLabel` does not serialise behind an
-	 * async `isDisabled`.
-	 */
-	const buttonStatePromise: Promise<[string, boolean]> = $derived.by(() => {
-		const disabledResult = action.isDisabled?.(cell.row.original, cell.row.originalIndex);
-
-		const isEnabledPromise: Promise<boolean> =
-			disabledResult == null
-				? Promise.resolve(
-						cell.column.columnDef.isEnabled?.(cell.row.original, cell.row.originalIndex, action) ??
-							true
-					)
-				: typeof disabledResult === 'boolean'
-					? Promise.resolve(!disabledResult)
-					: disabledResult.then((it) => !it);
-
-		const labelPromise: Promise<string> = Promise.resolve(
-			action.getLabel(cell.row.original, cell.row.originalIndex)
-		);
-
-		return Promise.all([labelPromise, isEnabledPromise]);
-	});
-</script>
-
-{#await buttonStatePromise}
-	<!-- intentionally empty: the actions popover frame already conveys the loading state -->
-{:then [label, isEnabled]}
-	<Button
-		fullWidth
-		size={Size.Medium}
-		colourSet={cell.column.columnDef.getColourSet?.(
-			cell.row.original,
-			cell.row.originalIndex,
-			action
-		) ?? ColourSet.Secondary}
-		disabled={!isEnabled}
-		onclick={() => {
-			action.callback(cell.row.original, cell.row.originalIndex);
-		}}>{label}</Button
-	>
-{:catch e}
-	{#if dev}
-		Error Loading Button: {getErrorMessage(e)}
-	{:else}
-		Error Loading Button
-	{/if}
-{/await}
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>import Button from "../../../../Button.svelte";
+import { getErrorMessage } from "../../../../../Helpers/Helpers.svelte.js";
+import { ColourSet } from "../../../../../scss/colours.js";
+import { Size } from "../../../../../Types/Internal/Size.js";
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object, FilterValueType"
+>import { dev } from "$app/environment";
+const { action, cell } = $props();
+/**
+* Resolved [label, isEnabled] tuple. Both sources are awaited in parallel
+* via Promise.all so an async `getLabel` does not serialise behind an
+* async `isDisabled`.
+*/
+const buttonStatePromise = $derived.by(() => {
+	const disabledResult = action.isDisabled?.(cell.row.original, cell.row.originalIndex);
+	const isEnabledPromise = disabledResult == null ? Promise.resolve(cell.column.columnDef.isEnabled?.(cell.row.original, cell.row.originalIndex, action) ?? true) : typeof disabledResult === "boolean" ? Promise.resolve(!disabledResult) : disabledResult.then((it) => !it);
+	const labelPromise = Promise.resolve(action.getLabel(cell.row.original, cell.row.originalIndex));
+	return Promise.all([labelPromise, isEnabledPromise]);
+});
+</script>
+
+{#await buttonStatePromise}
+	<!-- intentionally empty: the actions popover frame already conveys the loading state -->
+{:then [label, isEnabled]}
+	<Button
+		fullWidth
+		size={Size.Medium}
+		colourSet={cell.column.columnDef.getColourSet?.(
+			cell.row.original,
+			cell.row.originalIndex,
+			action
+		) ?? ColourSet.Secondary}
+		disabled={!isEnabled}
+		onclick={() => {
+			action.callback(cell.row.original, cell.row.originalIndex);
+		}}>{label}</Button
+	>
+{:catch e}
+	{#if dev}
+		Error Loading Button: {getErrorMessage(e)}
+	{:else}
+		Error Loading Button
+	{/if}
+{/await}

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

@@ -1,157 +1,129 @@
-<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;
-				}
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, RowIdType extends Primitive"
+>import { TableContext } from "../../../Types/Context/TableContext.svelte.js";
+import "../../../Types/Context/TableInitOptions.js";
+import { devCatch, isValidityTuple } from "../../../../../Helpers/Helpers.svelte.js";
+import { Validity } from "../../../../../Types/Internal/Validity.js";
+import { getContext, tick } from "svelte";
+const { cell, onchange: parentOnchange } = $props();
+const value = $derived(!!cell.getValue());
+const tableContext = getContext(TableContext.identifier);
+const focusDetails = $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(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);
+		} catch {
+			if (editableCounter === local) {
+				editable = false;
 			}
 		}
-	}}
-	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();
+	})().catch(devCatch);
+});
+let inputRef = $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 = (e) => {
+	if (!editable) {
+		return;
+	}
+	tableContext.onEditCell(cell.row.original, focusDetails.coordinates, e.target.checked).catch(devCatch);
+	parentOnchange?.(e);
+	tick().then(() => {
+		if (inputRef && value != inputRef.checked) {
+			inputRef.checked = value;
 		}
-	}}
-	onmouseover={() => {
-		if (tableContext.isMousingDown) {
-			tableContext.setFocusEnd(focusDetails.coordinates);
+	}).catch(devCatch);
+};
+let 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;
 		}
-	}}
-	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>
-
+	}).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,
@@ -232,4 +204,4 @@ label.multifocus.multifocus-start {
 input:disabled {
   cursor: not-allowed;
   opacity: 0.45;
-}</style>
+}</style>