@lavalogic/scoria 0.35.0 → 0.37.0

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

@@ -1,134 +1,133 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	export interface TableCheckboxProps<T extends object> {
-		cell: TableCell<T, BoolFilterValueType>;
-
-		onchange?: ChangeEventHandler<HTMLInputElement>;
-	}
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object"
->
-	import type { TableCell } from '../../../Types/Columns/TableCell.js';
-	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import type { BoolFilterValueType } from '../../../Types/Filtering/FilterFn.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 } from 'svelte';
-
-	import type { ChangeEventHandler } from 'svelte/elements';
-
-	const { cell, onchange: parentOnchange }: TableCheckboxProps<T> = $props();
-
-	const value = $derived(!!cell.getValue());
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	const focusDetails: TableFocusDetails<T, never> = $derived(
-		new TableFocusDetails(cell, tableContext)
-	);
-
-	let inputRef: HTMLInputElement | undefined = $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 -->
-<td
-	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>
-</td>
-
-<style>td {
+<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>
+
+<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);
@@ -138,8 +137,11 @@
   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);
 }
 
 input[type=checkbox] {
@@ -178,12 +180,21 @@ label.multifocus.multifocus-start {
   background-color: #ffffff;
 }
 
-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;
-}</style>
+}</style>

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

@@ -1,31 +1,26 @@
-export interface TableCheckboxProps<T extends object> {
-    cell: TableCell<T, BoolFilterValueType>;
-    onchange?: ChangeEventHandler<HTMLInputElement>;
-}
-import type { TableCell } from '../../../Types/Columns/TableCell.js';
-import type { BoolFilterValueType } from '../../../Types/Filtering/FilterFn.js';
-import type { ChangeEventHandler } from 'svelte/elements';
-declare function $$render<T extends object>(): {
+import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
+import type { TableCheckboxProps } from './TableCheckboxProps.js';
+declare function $$render<T extends object, RowIdType extends Primitive>(): {
     props: TableCheckboxProps<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 TableCheckbox: $$IsomorphicComponent;
-type TableCheckbox<T extends object> = InstanceType<typeof TableCheckbox<T>>;
+type TableCheckbox<T extends object, RowIdType extends Primitive> = InstanceType<typeof TableCheckbox<T, RowIdType>>;
 export default TableCheckbox;

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

@@ -0,0 +1,17 @@
+import type { TableCell } from '../../../Types/Columns/TableCell.js';
+import type { BoolFilterValueType } from '../../../Types/Filtering/FilterFn.js';
+import type { ChangeEventHandler } from 'svelte/elements';
+/**
+ * Props for {@link TableCheckbox}. Renders a checkbox input bound to the
+ * row's boolean value; commit goes through `TableContext.onEditCell`.
+ *
+ * Extracted from the previous `<script module>` inline declaration so the
+ * type is consumable by the `AccessorComponent` dispatch table without
+ * a duplicate re-declaration.
+ */
+export interface TableCheckboxProps<T extends object> {
+    /** The boolean cell to render. */
+    cell: TableCell<T, BoolFilterValueType>;
+    /** Optional bubbled `onchange` handler invoked after the table edit is dispatched. */
+    onchange?: ChangeEventHandler<HTMLInputElement>;
+}

package/dist/Components/Table/Body/Rows/Columns/TableCheckboxProps.js

@@ -0,0 +1 @@
+export {};