@lavalogic/scoria 0.35.0 → 0.37.0

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

@@ -1,122 +1,127 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, R extends object,FilterValueType, IdType extends Primitive"
->
-	import Action from '../../../../Action.svelte';
-	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 { ColourSet } from '../../../../../scss/colours.js';
-	import { Size } from '../../../../../Types/Internal/Size.js';
-	import { Validity } from '../../../../../Types/Internal/Validity.js';
-	import { getContext } from 'svelte';
-	import type { ExpandCellProps } from './ExpandCellProps.js';
-
-	const {
-		cell,
-		expandedColumnDef,
-		onExpandChange,
-	}: ExpandCellProps<T, R, IdType, FilterValueType> = $props();
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-	const focusDetails: TableFocusDetails<T, never> = $derived(
-		new TableFocusDetails(cell, tableContext)
-	);
-
-	const enabled: boolean | Promise<boolean> = $derived(
-		cell.column.columnDef.isEnabled(cell.row.original, cell.row.originalIndex)
-	);
-
-	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:info={validity == Validity.Info}
-	class:success={validity == Validity.Valid}
-	class:warning={validity == Validity.Warning}
-	class:error={validity == Validity.Invalid}
-	class="focusable"
-	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);
-			}
-		}
-	}}
-	onmouseover={() => {
-		if (tableContext.isMousingDown) {
-			tableContext.setFocusEnd(focusDetails.coordinates);
-		}
-	}}
-	onmouseup={() => {
-		tableContext.endFocus(focusDetails.coordinates);
-	}}
->
-	<div
-		class="slot-wrapper"
-		class:multifocus={focusDetails.isMultiFocused}
-		class:multifocus-start={focusDetails.isMultiFocusStart}
-	>
-		{#await enabled}
-			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-			{@render action(false)}
-		{:then enabled}
-			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-			{@render action(enabled)}
-		{/await}
-	</div>
-</td>
-
-{#snippet action(enabled: boolean)}
-	<div class="noninteractive">
-		<Action
-			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
-			style={focusDetails.outline}
-			disabled={!enabled}
-			border={false}
-			label="Expand Nested Table"
-			size={Size.FillWidth}
-			icon={{
-				name: expandedColumnDef?.id === cell.column.columnDef.id ? 'minus' : 'plus',
-				size: Size.Medium,
-			}}
-			colourSet={expandedColumnDef?.id === cell.column.columnDef.id
-				? ColourSet.Primary
-				: ColourSet.Auxiliary}
-			onclick={(e: MouseEvent) => {
-				// FIXME why is this required? svelte bug?
-				e.stopImmediatePropagation();
-				// toastContext.toast("clicked")
-				onExpandChange(cell.column.columnDef);
-			}}
-		/>
-	</div>
-{/snippet}
-
-<style>td {
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, R extends object,FilterValueType, IdType extends Primitive"
+>
+	import Action from '../../../../Action.svelte';
+	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 { ColourSet } from '../../../../../scss/colours.js';
+	import { Size } from '../../../../../Types/Internal/Size.js';
+	import { Validity } from '../../../../../Types/Internal/Validity.js';
+	import { getContext } from 'svelte';
+	import type { ExpandCellProps } from './ExpandCellProps.js';
+
+	const {
+		cell,
+		expandedColumnDef,
+		onExpandChange,
+	}: ExpandCellProps<T, R, IdType, FilterValueType> = $props();
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+	const focusDetails: TableFocusDetails<T, IdType> = $derived(
+		tableContext._focus.getFocusDetailsFor(cell)
+	);
+
+	const enabled: boolean | Promise<boolean> = $derived(
+		cell.column.columnDef.isEnabled(cell.row.original, cell.row.originalIndex)
+	);
+
+	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:info={validity == Validity.Info}
+	class:success={validity == Validity.Valid}
+	class:warning={validity == Validity.Warning}
+	class:error={validity == Validity.Invalid}
+	class="focusable"
+	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);
+			}
+		}
+	}}
+	onmouseover={() => {
+		if (tableContext.isMousingDown) {
+			tableContext.setFocusEnd(focusDetails.coordinates);
+		}
+	}}
+	onmouseup={() => {
+		tableContext.endFocus(focusDetails.coordinates);
+	}}
+>
+	<div
+		class="slot-wrapper"
+		class:multifocus={focusDetails.isMultiFocused}
+		class:multifocus-start={focusDetails.isMultiFocusStart}
+	>
+		{#await enabled}
+			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+			{@render action(false)}
+		{:then enabled}
+			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+			{@render action(enabled)}
+		{/await}
+	</div>
+</div>
+
+{#snippet action(enabled: boolean)}
+	<div class="noninteractive">
+		<Action
+			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
+			style={focusDetails.outline}
+			disabled={!enabled}
+			border={false}
+			label="Expand Nested Table"
+			size={Size.FillWidth}
+			icon={{
+				name: expandedColumnDef?.id === cell.column.columnDef.id ? 'minus' : 'plus',
+				size: Size.Medium,
+			}}
+			colourSet={expandedColumnDef?.id === cell.column.columnDef.id
+				? ColourSet.Primary
+				: ColourSet.Auxiliary}
+			onclick={(e: MouseEvent) => {
+				// FIXME why is this required? svelte bug?
+				e.stopImmediatePropagation();
+				// toastContext.toast("clicked")
+				onExpandChange(cell.column.columnDef);
+			}}
+		/>
+	</div>
+{/snippet}
+
+<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);
@@ -126,35 +131,50 @@
   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.focusable {
+.focusable {
   user-select: none;
   cursor: default;
   outline: none;
 }
-td.focusable.editable {
+.focusable.editable {
   cursor: pointer;
 }
 
-td {
+.focusable,
+.checkbox-cell,
+.input-cell,
+.select-cell {
   max-height: var(--max-height);
   height: var(--height);
-  box-sizing: content-box;
+  box-sizing: border-box;
   overflow-x: clip;
   --td-padding-left: 0;
   --td-padding-right: 0;
 }
 
-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;
 }
 
@@ -178,4 +198,4 @@ div.slot-wrapper {
 .noninteractive {
   display: contents;
   user-select: none;
-}</style>
+}</style>

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

@@ -1,117 +1,119 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, FilterValueType"
->
-	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { devCatch, isValidityTuple, loadingText } from '../../../../../Helpers/Helpers.svelte.js';
-	import type { SelectOption } from '../../../../../Types/Internal/SelectOption.js';
-	import { Validity } from '../../../../../Types/Internal/Validity.js';
-	import { getContext } from 'svelte';
-	import type { FocusableImmutableCellProps } from './FocusableImmutableCellProps.js';
-
-	const { cell, children }: FocusableImmutableCellProps<T, FilterValueType> = $props();
-
-	const value = $derived(cell.getValue());
-
-	const visibleValue = $derived(
-		cell.column.columnDef.getDisplayValue?.(cell.row.original, cell.row.originalIndex) ?? value
-	);
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	const options: Array<SelectOption<unknown>> = $derived(
-		('options' in cell.column.columnDef ? cell.column.columnDef.options : []) as Array<
-			SelectOption<unknown>
-		>
-	);
-	const hasValue: boolean = $derived(value !== undefined);
-
-	const focusDetails: TableFocusDetails<T, never> = $derived(
-		new TableFocusDetails(cell, tableContext)
-	);
-
-	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 -->
-<!-- class:left={focusDetails.leftEdge}
-class:top={focusDetails.topEdge}
-class:right={focusDetails.rightEdge}
-class:bottom={focusDetails.bottomEdge} -->
-<td
-	id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
-	class:info={validity == Validity.Info}
-	class:success={validity == Validity.Valid}
-	class:warning={validity == Validity.Warning}
-	class:error={validity == Validity.Invalid}
-	tabIndex={hasValue ? 0 : undefined}
-	class="focusable"
-	style={focusDetails.outline}
-	class:multifocus={hasValue && focusDetails.isMultiFocused}
-	class:multifocus-start={hasValue && focusDetails.isMultiFocusStart}
-	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);
-			}
-		}
-	}}
-	onmouseover={() => {
-		if (tableContext.isMousingDown) {
-			tableContext.setFocusEnd(focusDetails.coordinates);
-		}
-	}}
-	onmouseup={() => {
-		tableContext.endFocus(focusDetails.coordinates);
-	}}
->
-	{#if hasValue}
-		{#await visibleValue}
-			{loadingText}
-		{:then v}
-			{(v instanceof Date
-				? v.toLocaleDateString()
-				: options.length
-					? options.find((it) => it.value === v)?.label
-					: v) ??
-				v ??
-				''}
-		{/await}
-	{:else if children}
-		<div
-			class="slot-wrapper"
-			class:multifocus={focusDetails.isMultiFocused}
-			class:multifocus-start={focusDetails.isMultiFocusStart}
-		>
-			<!-- TODO {focusDetails.isMultiFocusStart} -->
-			{@render children()}
-		</div>
-	{/if}
-</td>
-
-<style>td {
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, FilterValueType, 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, loadingText } from '../../../../../Helpers/Helpers.svelte.js';
+	import type { SelectOption } from '../../../../../Types/Internal/SelectOption.js';
+	import { Validity } from '../../../../../Types/Internal/Validity.js';
+	import { getContext } from 'svelte';
+	import type { FocusableImmutableCellProps } from './FocusableImmutableCellProps.js';
+
+	const { cell, children }: FocusableImmutableCellProps<T, FilterValueType> = $props();
+
+	const value = $derived(cell.getValue());
+
+	/** Optional override-display value from the column def; falls back to the raw `value`. */
+	const visibleValue = $derived(
+		cell.column.columnDef.getDisplayValue?.(cell.row.original, cell.row.originalIndex) ?? value
+	);
+
+	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
+
+	const options: Array<SelectOption<unknown>> = $derived(
+		('options' in cell.column.columnDef ? cell.column.columnDef.options : []) as Array<
+			SelectOption<unknown>
+		>
+	);
+	const hasValue: boolean = $derived(value !== undefined);
+
+	const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
+		tableContext._focus.getFocusDetailsFor(cell)
+	);
+
+	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
+	id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
+	class:info={validity == Validity.Info}
+	class:success={validity == Validity.Valid}
+	class:warning={validity == Validity.Warning}
+	class:error={validity == Validity.Invalid}
+	tabIndex={hasValue ? 0 : undefined}
+	class="focusable"
+	style={focusDetails.outline}
+	class:multifocus={hasValue && focusDetails.isMultiFocused}
+	class:multifocus-start={hasValue && focusDetails.isMultiFocusStart}
+	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);
+			}
+		}
+	}}
+	onmouseover={() => {
+		if (tableContext.isMousingDown) {
+			tableContext.setFocusEnd(focusDetails.coordinates);
+		}
+	}}
+	onmouseup={() => {
+		tableContext.endFocus(focusDetails.coordinates);
+	}}
+>
+	{#if hasValue}
+		{#await visibleValue}
+			{loadingText}
+		{:then v}
+			{(v instanceof Date
+				? v.toLocaleDateString()
+				: options.length
+					? options.find((it) => it.value === v)?.label
+					: v) ??
+				v ??
+				''}
+		{/await}
+	{:else if children}
+		<div
+			class="slot-wrapper"
+			class:multifocus={focusDetails.isMultiFocused}
+			class:multifocus-start={focusDetails.isMultiFocusStart}
+		>
+			{@render children()}
+		</div>
+	{/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);
@@ -121,30 +123,42 @@ class:bottom={focusDetails.bottomEdge} -->
   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 {
+.focusable,
+.checkbox-cell,
+.input-cell,
+.select-cell {
   max-height: var(--max-height);
   height: var(--height);
-  box-sizing: content-box;
+  box-sizing: border-box;
   overflow-x: clip;
   --td-padding-left: 0;
   --td-padding-right: 0;
@@ -167,12 +181,21 @@ div.slot-wrapper {
   justify-content: center;
 }
 
-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/FocusableImmutableCell.svelte.d.ts

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