@lavalogic/scoria 0.17.2 → 0.18.0

package/dist/Components/Table/Body/QuickSearchCell.svelte

@@ -88,7 +88,7 @@
 	const isSelectOpen = $derived(openedSelect?.value === selectSymbol);
 
 	// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
-	let value: unknown | null = $state(null);
+	let asdfvalue: unknown | null = $state(null);
 	let valueMin: number | null = $state(null);
 	let valueMax: number | null = $state(null);
 
@@ -118,15 +118,13 @@
 			return;
 		}
 		void filteringStateValue;
-		if (def.debug) {
-			console.log('filtering state value:', $state.snapshot(filteringStateValue));
-		}
+
 		if (hasQuery(customFilter)) {
 			if (def.debug) {
 				console.log('has query');
 			}
 
-			untrack(() => {
+			untrack(async () => {
 				const gotValue = filteringStateValue as Array<unknown> | undefined;
 
 				try {
@@ -137,12 +135,12 @@
 							console.log(`query values:`, tableContext.dataRepo.__queryValues);
 						}
 						const key = customFilter.id;
-						const x = tableContext.dataRepo.__queryValues.get(key);
+						const x = await tableContext.dataRepo.__queryValues.get(key);
 
 						if (def.debug) {
 							console.log('value:', $state.snapshot(x));
 						}
-						value = x ?? null;
+						asdfvalue = (await x) ?? null;
 					} else if (def.debug) {
 						console.log(
 							'filtering state value was undefined',
@@ -151,9 +149,9 @@
 					}
 				} catch (e) {
 					console.warn(e);
-					value = null;
+					asdfvalue = null;
 				}
-			});
+			}).catch(devCatch);
 		} else if (isSelect) {
 			if (def.debug) {
 				console.log('is select (not query)');
@@ -209,31 +207,40 @@
 				const gotValue = filteringStateValue;
 				if (gotValue != undefined) {
 					const [min, max] = gotValue as [number, number | undefined];
-					value = min;
+					asdfvalue = min;
 					valueMin = min;
 					valueMax = max ?? null;
 				} else {
-					value = valueMin = valueMax = null;
+					asdfvalue = valueMin = valueMax = null;
 				}
 			} else if (tableContext.paginationRepo?.filtering) {
 				const gotValue = filteringStateValue;
+
 				if (gotValue != undefined) {
 					const [min] = gotValue as [number, number | undefined];
-					value = min;
+					asdfvalue = min;
 					valueMin = min;
 					valueMax = min;
 				} else {
-					value = valueMin = valueMax = null;
+					asdfvalue = valueMin = valueMax = null;
 				}
 			}
 		} else if (tableContext.paginationRepo?.filtering) {
 			const gotValue = filteringStateValue;
 			if (gotValue == null || typeof gotValue == 'string' || typeof gotValue == 'number') {
-				value = gotValue;
+				//RATS
+				rats(gotValue);
+				asdfvalue = gotValue;
 			}
 		}
 	});
 
+	function rats(gotValue: unknown) {
+		// RATS
+		if (dev && gotValue != null && typeof gotValue == 'object' && gotValue instanceof Promise) {
+			throw new Error(`Unexpected Promise`);
+		}
+	}
 	onMount(() => {
 		const filterOption =
 			tableContext.paginationRepo?.filtering &&
@@ -244,17 +251,19 @@
 				[valueMin, valueMax] = filterOption.value;
 				if (valueMax == undefined) {
 					valueMax = valueMin;
-					value = valueMin?.toString();
+					asdfvalue = valueMin?.toString();
 				} else if (valueMin == undefined) {
 					valueMin = valueMax;
-					value = valueMax.toString();
+					asdfvalue = valueMax.toString();
 				} else {
-					value = valueMin.toString();
+					asdfvalue = valueMin.toString();
 				}
 			} else if (!hasQuery(customFilter)) {
 				const gotValue = filterOption.value;
 				if (gotValue == null || typeof gotValue == 'string' || typeof gotValue == 'number') {
-					value = gotValue;
+					//RATS
+					rats(gotValue);
+					asdfvalue = gotValue;
 				}
 			}
 		}
@@ -274,7 +283,8 @@
 		return (newValue: SelectOption<unknown> | null) => {
 			tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
 			tableContext.dataRepo.__queryValues.set(label, newValue);
-			value = newValue;
+			rats(newValue);
+			asdfvalue = newValue;
 		};
 	}
 
@@ -282,9 +292,12 @@
 		return (newValue: SelectOption<unknown> | null) => {
 			tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
 			tableContext.dataRepo.__queryValues.set(label, newValue?.value ?? null);
-			value = newValue?.value ?? null;
+			rats(newValue);
+			asdfvalue = newValue?.value ?? null;
 		};
 	}
+
+	let isNullFilter = $derived(selectedNumberFilterType?.value == NumberDateFilterMode.null);
 </script>
 
 <td class="input-cell {inputId}">
@@ -356,7 +369,7 @@
 							name={customFilter.objectName ?? 'Item'}
 							valueProp="value"
 							labelProp="label"
-							value={value as null}
+							value={asdfvalue as null}
 							query={customFilter.query}
 							bind:options={lastQueryOptions}
 							onchange={generateOnChangePrimitive(label)}
@@ -372,7 +385,7 @@
 							name={customFilter.objectName ?? 'Item'}
 							valueProp="value"
 							labelProp="label"
-							value={value as null}
+							value={asdfvalue as null}
 							query={customFilter.query}
 							bind:options={lastQueryOptions}
 							onchange={generateOnChangeObject(label)}
@@ -464,46 +477,41 @@
 							onkeydown={closeOnCtrlF}
 						/>
 					</div>
-				{:else if value == null || typeof value == 'number'}
-					<div class="input-wrapper right">
-						{#if selectedNumberFilterType?.value == NumberDateFilterMode.null}
-							<TextInput
-								data-type="quicksearch"
-								id={inputId}
-								value="is Null"
-								disabled
-								variant={InputVariant.Table}
-							/>
-						{:else}
-							<NumberInput
-								data-type="quicksearch"
-								id={inputId}
-								bind:value={valueMin}
-								variant={InputVariant.Table}
-								placeholder="Min&hellip;"
-								oninput={() => {
-									tableContext.paginationRepo?.filterBy(def.id, [valueMin, null]);
-								}}
-								onkeydown={closeOnCtrlF}
-							/>
-						{/if}
-					</div>
-				{:else if typeof value == 'string'}
-					<div class="input-wrapper right">
-						<TextInput
-							data-type="quicksearch"
-							id={inputId}
-							bind:value={value as string | null}
-							placeholder="Filter&hellip;"
-							variant={InputVariant.Table}
-							oninput={() => {
-								tableContext.paginationRepo?.filterBy(def.id, [value]);
-							}}
-							onkeydown={closeOnCtrlF}
-						/>
-					</div>
+				{:else}
+					<svelte:boundary>
+						<div class="input-wrapper right">
+							{#await isNullFilter}
+								loading
+							{:then isNullFilter}
+								{#if isNullFilter}
+									<TextInput
+										data-type="quicksearch"
+										id={inputId}
+										value="is Null"
+										disabled
+										variant={InputVariant.Table}
+									/>
+								{:else}
+									<!-- NOTE: This is a text input in order to support the __in functionality, which is a comma separated list of numbers -->
+									<TextInput
+										data-type="quicksearch"
+										id={inputId}
+										bind:value={asdfvalue as string | null}
+										placeholder="Filter&hellip;"
+										variant={InputVariant.Table}
+										oninput={() => {
+											tableContext.paginationRepo?.filterBy(def.id, [asdfvalue || null]);
+										}}
+										onkeydown={closeOnCtrlF}
+									/>
+								{/if}
+							{:catch e}
+								{@debug e}
+							{/await}
+						</div>
+					</svelte:boundary>
 				{/if}
-			{:else if value == null || typeof value == 'string'}
+			{:else if asdfvalue == null || typeof asdfvalue == 'string'}
 				<div class="input-wrapper right">
 					{#if selectedStringFilterType?.value == StringFilterMode.null}
 						<TextInput
@@ -526,10 +534,10 @@
 							data-type="quicksearch"
 							id={inputId}
 							oninput={() => {
-								tableContext.paginationRepo?.filterBy(def.id, value);
+								tableContext.paginationRepo?.filterBy(def.id, asdfvalue);
 							}}
 							variant={InputVariant.Table}
-							bind:value={value as string | null}
+							bind:value={asdfvalue as string | null}
 							placeholder="Filter&hellip;"
 						/>
 					{/if}
@@ -584,19 +592,16 @@
 
 							const newFilterType = newValue?.value ?? NumberDateFilterMode.In;
 
-							tableContext.paginationRepo?.setFilterMode(def.id, newFilterType);
+							if (newFilterType !== oldFilterType?.value) {
+								tableContext.paginationRepo?.setFilterMode(def.id, newFilterType);
 
-							if (selectedNumberFilterType?.value !== oldFilterType?.value) {
-								if (oldFilterType?.value === NumberDateFilterMode.Between) {
-									valueMax = null;
+								if (newFilterType === NumberDateFilterMode.Between) {
 									tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMin]);
+								} else if (newFilterType === NumberDateFilterMode.In) {
+									tableContext.paginationRepo?.filterBy(def.id, [asdfvalue]);
+								} else {
+									tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
 								}
-
-								if (newFilterType === NumberDateFilterMode.In) {
-									tableContext.paginationRepo?.filterBy(def.id, [value]);
-								}
-
-								// TODO what about the other modes?
 							}
 						}}
 						onkeydown={(e: KeyboardEvent) => {

package/dist/Components/Table/Body/Rows/ColumnList.svelte

@@ -15,7 +15,7 @@
 
 	const { searchValue }: ColumnListProps = $props();
 
-	const visibleColumns: Array<ColumnDef<T, never, unknown>> = $derived.by(() => {
+	const visibleColumns: Array<ColumnDef<T>> = $derived.by(() => {
 		const lowercasedSearchValue = searchValue.toLocaleLowerCase();
 		return tableContext.columnDefs.filter(
 			(it) =>

package/dist/Components/Table/Body/Rows/ColumnListRowProps.d.ts

@@ -1,4 +1,4 @@
 import type { ColumnDef } from '../../Types/Columns/Definitions/ColumnDef.svelte.js';
 export interface ColumnListRowProps<T extends object> {
-    columnDef: ColumnDef<T, never, unknown> | null;
+    columnDef: ColumnDef<T> | null;
 }

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

@@ -1,6 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script
+	lang="ts"
+	module
+>
 	import { AccessorDef } from '../../../Types/Columns/Definitions/Accessors/AccessorDef.svelte.js';
 	import type { ColumnDef } from '../../../Types/Columns/Definitions/ColumnDef.svelte.js';
 	import type { Component } from 'svelte';
@@ -12,6 +15,13 @@
 	import TableQuerySelect from './TableQuerySelect.svelte';
 	import TableSelect from './TableSelect.svelte';
 	import TableTextInput from './TableTextInput.svelte';
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object"
+>
+	const { cell }: AccessorComponentProps<T> = $props();
 
 	const cellTypes: Record<
 		'Number' | 'Date' | 'Select' | 'Checkbox' | 'Query' | 'Text',
@@ -22,12 +32,8 @@
 		Select: TableSelect,
 		Query: TableQuerySelect,
 		Checkbox: TableCheckbox,
-		Text: TableTextInput
+		Text: TableTextInput,
 	} as const;
-</script>
-
-<script lang="ts" generics="T extends object,  ">
-	const { cell }: AccessorComponentProps<T> = $props();
 
 	const CurrentComponent = $derived(getAppropriateAccessorDef(cell.column.columnDef));
 

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

@@ -10,12 +10,11 @@
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
 	import { MultiFocusEdge } from '../../../Types/Focus/MultiFocusEdge.js';
 	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { ToastContext } from '../../../../../Contexts/ToastContext.svelte.js';
-	import { asyncMap, devCatch, refWrapper } from '../../../../../Helpers/Helpers.svelte.js';
+	import { asyncMap, devCatch, isValidityTuple, refWrapper } from '../../../../../Helpers/Helpers.svelte.js';
 	import { Colour, ColourSet } from '../../../../../scss/colours.js';
 	import { Size } from '../../../../../Types/Internal/Size.js';
 	import { Validity } from '../../../../../Types/Internal/Validity.js';
-	import { getContext, tick, untrack } from 'svelte';
+	import { getContext, untrack } from 'svelte';
 	import type { ActionsCellProps } from './ActionsCellProps.js';
 	import TableAction from './TableAction.svelte';
 
@@ -31,7 +30,6 @@
 	const value = $derived(cell.getValue());
 
 	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-	const toastContext = getContext<ToastContext>(ToastContext.identifier);
 
 	const actions: Array<TableActionButton<T>> = $derived(cell.column.columnDef.actions);
 
@@ -39,8 +37,8 @@
 	const thisPopupIsVisibile = $derived(thisPopup === shownPopup.value);
 	const hasValue: boolean = $derived(value !== undefined);
 	const edge: MultiFocusEdge | undefined = $state();
-	const focusDetails: TableFocusDetails<T> = $derived(
-		new TableFocusDetails(cell, tableContext, toastContext.toast)
+	const focusDetails: TableFocusDetails<T, never> = $derived(
+		new TableFocusDetails(cell, tableContext)
 	);
 
 	let cellRef: HTMLDivElement | undefined = $state();
@@ -73,40 +71,22 @@
 		}
 	});
 
-	let previousValidity: Validity = $state(Validity.Valid);
 	let validity: Validity = $state(Validity.Valid);
 	$effect(() => {
-		focusDetails.validityTuple
-			.then(([newValidity]) => {
-				untrack(() => {
-					tick()
-						.then(() => {
-							validity = newValidity;
-						})
-						.catch(devCatch);
-				});
+		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 =
-							validity === Validity.Invalid
-								? tableContext.addInvalidValue(cell.row.original)
-								: tableContext.removeInvalidValue(cell.row.original);
-
-						previousValidity = validity;
-
-						return x;
-					})
-					.catch(devCatch);
-			});
-		}
-	});
 </script>
 
 <!-- svelte-ignore a11y_mouse_events_have_key_events -->

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

@@ -9,10 +9,9 @@
 	import { BubbleDef } from '../../../Types/Columns/Definitions/Display/BubbleDef.svelte.js';
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
 	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { ToastContext } from '../../../../../Contexts/ToastContext.svelte.js';
-	import { devCatch } from '../../../../../Helpers/Helpers.svelte.js';
+	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
 	import { Validity } from '../../../../../Types/Internal/Validity.js';
-	import { getContext, tick, untrack } from 'svelte';
+	import { getContext } from 'svelte';
 	import type { FocusableImmutableCellProps } from './FocusableImmutableCellProps.js';
 
 	const { cell }: FocusableImmutableCellProps<T, FilterValueType> = $props();
@@ -20,46 +19,27 @@
 	const values = $derived(cell.getValue()) as Array<string> | Promise<Array<string>>;
 
 	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-	const toastContext = getContext<ToastContext>(ToastContext.identifier);
 
-	const focusDetails: TableFocusDetails<T> = $derived(
-		new TableFocusDetails(cell, tableContext, toastContext.toast)
+	const focusDetails: TableFocusDetails<T, never> = $derived(
+		new TableFocusDetails(cell, tableContext)
 	);
 
-	let previousValidity: Validity = $state(Validity.Valid);
 	let validity: Validity = $state(Validity.Valid);
 	$effect(() => {
-		focusDetails.validityTuple
-			.then(([newValidity]) => {
-				untrack(() => {
-					tick()
-						.then(() => {
-							validity = newValidity;
-						})
-						.catch(devCatch);
-				});
+		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 =
-							validity === Validity.Invalid
-								? tableContext.addInvalidValue(cell.row.original)
-								: tableContext.removeInvalidValue(cell.row.original);
-
-						previousValidity = validity;
-
-						return x;
-					})
-					.catch(devCatch);
-			});
-		}
-	});
 </script>
 
 <!-- svelte-ignore a11y_mouse_events_have_key_events -->

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

@@ -8,9 +8,10 @@
 	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 { ToastContext } from '../../../../../Contexts/ToastContext.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';
 
@@ -21,18 +22,38 @@
 	}: ExpandCellProps<T, R, IdType, FilterValueType> = $props();
 
 	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-	const toastContext = getContext<ToastContext>(ToastContext.identifier);
-	const focusDetails: TableFocusDetails<T> = $derived(
-		new TableFocusDetails(cell, tableContext, toastContext.toast)
+	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
@@ -127,6 +148,16 @@ td {
   --td-padding-right: 0;
 }
 
+td.info {
+  background-color: #1f81a0;
+}
+td.warning {
+  background-color: #f8eab8;
+}
+td.error {
+  background-color: #f9e9e9;
+}
+
 div.slot-wrapper.multifocus {
   background-color: var(--multifocus-colour, #f4fbfd);
 }