@lavalogic/scoria 0.8.2 → 0.9.0

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

@@ -45,7 +45,9 @@
 	const customFilter = $derived(customFilters?.get(def.id));
 
 	const isSelect = $derived(
-		def instanceof SelectDef || customFilter?.type === CustomFilterType.Select
+		def instanceof SelectDef ||
+			def.filterValueType == CustomFilterType.Select ||
+			customFilter?.type === CustomFilterType.Select
 	);
 
 	const hasFilterFn = $derived(!!def.filterFn && typeof def.filterFn === 'function');
@@ -65,8 +67,13 @@
 			def.filterValueType == 'Number' ||
 			customFilter?.type === CustomFilterType.Number
 	);
+
+	function emptyOptsAndWarn(): Array<never> {
+		console.warn(`def ${def.id} is declared as a select filter but has no getOptions() function`);
+		return [];
+	}
 	const options = $derived(
-		isSelect ? ((def as SelectDef<T>)?.getOptions?.() ?? customFilter?.options ?? []) : []
+		isSelect ? (def?.getOptions?.() ?? customFilter?.options ?? emptyOptsAndWarn()) : []
 	);
 	const isDate = $derived(def instanceof DateInputDef);
 	const isRemoteSelect = $derived(customFilter?.type === CustomFilterType.Select);
@@ -339,47 +346,25 @@
 				{/if}
 			{:else if isSelect}
 				{#if hasQuery}
-					{#if customFilter!.valueAsObject == false}
-						{@const label =
-							customFilter?.id ??
-							customFilter?.label ??
-							customFilter?.objectName ??
-							customFilter?.queryKey ??
-							def.id}
-						<!-- TODO: multiselect -->
-
-						<QuerySelect
-							valueAsObject={false}
-							clearable
-							name={customFilter?.objectName ?? 'Item'}
-							valueProp="value"
-							labelProp="label"
-							value={value as string | number | null}
-							query={customFilter!.query!}
-							bind:options={lastQueryOptions}
-							onchange={generateOnChangePrimitive(label)}
-						/>
-					{:else}
-						{@const label =
-							customFilter?.id ??
-							customFilter?.label ??
-							customFilter?.objectName ??
-							customFilter?.queryKey ??
-							def.id}
-						<!-- TODO: multiselect -->
-
-						<QuerySelect
-							valueAsObject={true}
-							clearable
-							name={customFilter?.objectName ?? 'Item'}
-							valueProp="value"
-							labelProp="label"
-							value={value as null}
-							query={customFilter!.query!}
-							bind:options={lastQueryOptions}
-							onchange={generateOnChangeObject(label)}
-						/>
-					{/if}
+					{@const label =
+						customFilter?.id ??
+						customFilter?.label ??
+						customFilter?.objectName ??
+						customFilter?.queryKey ??
+						def.id}
+					<!-- TODO: multiselect -->
+
+					<QuerySelect
+						valueAsObject={false}
+						clearable
+						name={customFilter?.objectName ?? 'Item'}
+						valueProp="value"
+						labelProp="label"
+						value={value as string | number | null}
+						query={customFilter!.query!}
+						bind:options={lastQueryOptions}
+						onchange={generateOnChangePrimitive(label)}
+					/>
 				{:else}
 					{#await options then options}
 						<MultiSelect

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

@@ -47,16 +47,16 @@
 				const isEditable = await editableAsync;
 				if (asyncCounter === localCounter) {
 					editable = isEditable;
-				} else if (dev) {
+				} else if (cell.column.columnDef.debug) {
 					console.log('skipping async editable because it is stale');
 				}
 			} catch (e) {
-				if (dev) {
+				if (cell.column.columnDef.debug) {
 					console.error(e);
 				}
 				if (asyncCounter === localCounter) {
 					editable = false;
-				} else if (dev) {
+				} else if (cell.column.columnDef.debug) {
 					console.log('skipping async editable because it is stale');
 				}
 			}

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

@@ -64,16 +64,16 @@
 				const isEditable = await editableAsync;
 				if (asyncCounter === localCounter) {
 					editable = isEditable;
-				} else if (dev) {
+				} else if (cell.column.columnDef.debug) {
 					console.log('skipping async editable because it is stale');
 				}
 			} catch (e) {
-				if (dev) {
+				if (cell.column.columnDef.debug) {
 					console.error(e);
 				}
 				if (asyncCounter === localCounter) {
 					editable = false;
-				} else if (dev) {
+				} else if (cell.column.columnDef.debug) {
 					console.log('skipping async editable because it is stale');
 				}
 			}

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

@@ -72,16 +72,16 @@
 								value: awaitedValue
 							});
 						}
-					} else if (dev || columnDef.debug) {
+					} else if (columnDef.debug) {
 						console.log('skipping async option insertion because it is stale');
 					}
 				} catch (e) {
-					if (dev || columnDef.debug) {
+					if (columnDef.debug) {
 						console.error(e);
 					}
 					if (valueAsyncCounter === localCounter) {
 						//nothing happens
-					} else if (dev || columnDef.debug) {
+					} else if (columnDef.debug) {
 						console.log('skipping caught async option insertion error because it is stale');
 					}
 				}

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

@@ -53,16 +53,16 @@
 				const isEditable = await editableAsync;
 				if (asyncCounter === localCounter) {
 					editable = isEditable;
-				} else if (dev) {
+				} else if (cell.column.columnDef.debug) {
 					console.log('skipping async editable because it is stale');
 				}
 			} catch (e) {
-				if (dev) {
+				if (cell.column.columnDef.debug) {
 					console.error(e);
 				}
 				if (asyncCounter === localCounter) {
 					editable = false;
-				} else if (dev) {
+				} else if (cell.column.columnDef.debug) {
 					console.log('skipping async editable because it is stale');
 				}
 			}

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

@@ -38,16 +38,16 @@
 				const isEditable = await editableAsync;
 				if (asyncCounter === localCounter) {
 					editable = isEditable;
-				} else if (dev) {
+				} else if (cell.column.columnDef.debug) {
 					console.log('skipping async editable because it is stale');
 				}
 			} catch (e) {
-				if (dev) {
+				if (cell.column.columnDef.debug) {
 					console.error(e);
 				}
 				if (asyncCounter === localCounter) {
 					editable = false;
-				} else if (dev) {
+				} else if (cell.column.columnDef.debug) {
 					console.log('skipping async editable because it is stale');
 				}
 			}

package/dist/Components/Table/ColumnDefinitions/{ExampleItemColumnDef.svelte.d.ts → ExampleItemColumnDefRepository.svelte.d.ts}

@@ -1,7 +1,7 @@
 import type { ExampleItem } from '../../../Types/Examples/ExampleItem.js';
-import type { Component } from 'svelte';
+import { type Component } from 'svelte';
 import type { DefsWrapper } from '../Types/Columns/DefsWrapper.js';
 import type { DisplayDefModalProps } from '../Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js';
-export declare class ExampleItemColumnDef {
+export declare class ExampleItemColumnDefRepository {
     static generateExampleItemColumnDefs(modal: Component<DisplayDefModalProps<ExampleItem>, any, any>): DefsWrapper<ExampleItem>;
 }

package/dist/Components/Table/ColumnDefinitions/{ExampleItemColumnDef.svelte.js → ExampleItemColumnDefRepository.svelte.js}

@@ -1,6 +1,7 @@
 import { Colour } from '../../../scss/colours.js';
 import { ExampleSelectEnum } from '../../../Types/Examples/ExampleSelectEnum.js';
 import { Validity } from '../../../Types/Internal/Validity.js';
+import { tick, untrack } from 'svelte';
 import { CheckboxDef } from '../Types/Columns/Definitions/Accessors/CheckboxDef.svelte.js';
 import { DateInputDef } from '../Types/Columns/Definitions/Accessors/DateInputDef.svelte.js';
 import { NumberInputDef } from '../Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js';
@@ -12,7 +13,7 @@ import { ProgressBarDef } from '../Types/Columns/Definitions/Display/ProgressBar
 import { ValidityDef } from '../Types/Columns/Definitions/Display/ValidityDef.svelte.js';
 import { asyncSleep } from '../../../Helpers/Helpers.svelte.js';
 import { QueryDef } from '../Types/Columns/Definitions/Accessors/QueryDef.svelte.js';
-export class ExampleItemColumnDef {
+export class ExampleItemColumnDefRepository {
     static generateExampleItemColumnDefs(modal) {
         let defs = $state([
             new ValidityDef({
@@ -35,17 +36,16 @@ export class ExampleItemColumnDef {
                 },
                 modal
             }),
-            new DisplayDef({
-                id: 'account_id',
-                header: 'Account',
-                accessorFn: (item) => `Unknown (id ${item.id})`,
-                filterValueType: 'Number',
-                debug: true
-            }),
             new DisplayDef({
                 header: 'ID',
                 id: 'id',
-                filterValueType: 'Number'
+                filterValueType: 'Number',
+                // TODO make filtering work with the below:
+                accessorFn: async (item) => {
+                    void item.id;
+                    await asyncSleep(500);
+                    return item.id;
+                }
             }),
             new QueryDef({
                 header: 'simulated query def',
@@ -55,7 +55,8 @@ export class ExampleItemColumnDef {
                 isEditable: () => true,
                 id: 'simulatedQuery',
                 query: async (v, item, index) => {
-                    asyncSleep(25);
+                    void item.someDate;
+                    await asyncSleep(25);
                     return item.someDate
                         ? new Array(5).fill(0).map((it, index) => {
                             return {

package/dist/Components/Table/Misc/FilterInput.svelte

@@ -85,7 +85,6 @@
 
 	const customFilter = $derived(customFilters?.get(def.id));
 	const isRemoteSelect = $derived(customFilter?.type === CustomFilterType.Select);
-	const isValueAsObject = $derived(!(customFilter?.valueAsObject == false));
 
 	let value: SelectOption<unknown> | unknown | null | undefined = $state(null);
 	let valueMin: number | null = $state(null);
@@ -383,7 +382,7 @@
 						valueProp="value"
 						name={customFilter?.objectName ?? 'Item'}
 						{options}
-						valueAsObject={isValueAsObject as true}
+						valueAsObject={false}
 						onchange={(e) => {
 							tableContext.paginationRepo?.filterBy(
 								def.id,
@@ -402,49 +401,26 @@
 			<div class="contents">
 				{#await options then options}
 					{#if hasQuery}
-						{#if customFilter!.valueAsObject == false}
-							{@const label =
-								customFilter?.id ??
-								customFilter?.label ??
-								customFilter?.objectName ??
-								customFilter?.queryKey ??
-								def.id}
-							<!-- TODO: multiselect -->
-
-							<QuerySelect
-								valueAsObject={false}
-								{label}
-								clearable
-								name={customFilter?.objectName ?? 'Item'}
-								valueProp="value"
-								labelProp="label"
-								value={value as string | number | null}
-								query={customFilter!.query!}
-								bind:options={lastQueryOptions}
-								onchange={generateOnChangePrimitive(label)}
-							/>
-						{:else}
-							{@const label =
-								customFilter?.id ??
-								customFilter?.label ??
-								customFilter?.objectName ??
-								customFilter?.queryKey ??
-								def.id}
-							<!-- TODO: multiselect -->
-
-							<QuerySelect
-								valueAsObject={true}
-								{label}
-								clearable
-								name={customFilter?.objectName ?? 'Item'}
-								valueProp="value"
-								labelProp="label"
-								value={value as null}
-								query={customFilter!.query!}
-								bind:options={lastQueryOptions}
-								onchange={generateOnChangeObject(label)}
-							/>
-						{/if}
+						{@const label =
+							customFilter?.id ??
+							customFilter?.label ??
+							customFilter?.objectName ??
+							customFilter?.queryKey ??
+							def.id}
+						<!-- TODO: multiselect -->
+
+						<QuerySelect
+							valueAsObject={false}
+							{label}
+							clearable
+							name={customFilter?.objectName ?? 'Item'}
+							valueProp="value"
+							labelProp="label"
+							value={value as string | number | null}
+							query={customFilter!.query!}
+							bind:options={lastQueryOptions}
+							onchange={generateOnChangePrimitive(label)}
+						/>
 					{:else}
 						<MultiSelect
 							label={customFilter?.id ??
@@ -456,7 +432,7 @@
 							valueProp="value"
 							name={customFilter?.objectName ?? 'Item'}
 							{options}
-							valueAsObject={isValueAsObject as true}
+							valueAsObject={false}
 							onchange={(e) => {
 								tableContext.paginationRepo?.filterBy(
 									def.id,

package/dist/Components/Table/Types/Columns/Definitions/Accessors/SelectDef.svelte.d.ts

@@ -21,5 +21,5 @@ export declare class SelectDef<T extends object> extends AccessorDef<T, SelectFi
     readonly optional: boolean;
     readonly clearable: boolean;
     readonly getSpecificOptions?: (item: T, index: number) => Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>;
-    readonly getOptions: () => Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>;
+    getOptions: () => Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>;
 }

package/dist/Components/Table/Types/Columns/Definitions/Accessors/SelectDef.svelte.js

@@ -3,12 +3,12 @@ import { AccessorType } from './AccessorType.js';
 export class SelectDef extends AccessorDef {
     constructor(props) {
         super(props);
-        this.getSpecificOptions = $derived(props.getSpecificOptions);
-        this.getOptions = $derived(props.getOptions);
+        this.getSpecificOptions = $derived(props.getSpecificOptions); //done in the base class now
+        // this.getOptions = $derived(props.getOptions); // done in the base class now
         this.sortingFn = $derived(props.sortingFn);
         this.optional = $derived(props.optional ?? false);
         this.clearable = $derived(props.clearable ?? true);
-        this.getDisplayValue = $derived(props.getDisplayValue);
+        // this.getDisplayValue = $derived(props.getDisplayValue); //done in the base class now
         this._filterFn = $state(props.filterFn);
     }
     accessorType = AccessorType.Select;
@@ -23,5 +23,4 @@ export class SelectDef extends AccessorDef {
     optional;
     clearable;
     getSpecificOptions;
-    getOptions;
 }

package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.d.ts

@@ -6,6 +6,7 @@ import { ColumnType } from '../ColumnType.js';
 import type { AccessorFn } from './AccessorFn.js';
 import type { ValidationFn } from './ValidationFn.js';
 import type { FilterValueType } from '../../Filtering/FilterValueType.js';
+import type { SelectOption } from '../../../../../Types/Internal/SelectOption.js';
 export interface ColumnDefProps<T extends object, FilterFnType = undefined> {
     id: string;
     header: string | Snippet;
@@ -21,6 +22,7 @@ export interface ColumnDefProps<T extends object, FilterFnType = undefined> {
     isValid?: ValidationFn<T>;
     filterFn?: FilterFn<T, FilterFnType> | CustomFilterFn;
     filterValueType?: FilterValueType;
+    getOptions?: () => Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>;
     accessorFn?: AccessorFn<T>;
     getDisplayValue?: (item: T, index: number) => string | null | Promise<string | null>;
 }
@@ -60,4 +62,5 @@ export declare abstract class ColumnDef<T extends object, FilterFnType = undefin
     readonly isEditable: (item: T, index: number) => boolean | Promise<boolean>;
     readonly resizable: boolean;
     readonly header: string | Snippet;
+    readonly getOptions?: () => Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>;
 }

package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.js

@@ -16,6 +16,7 @@ export class ColumnDef {
         this._filterValueType = $derived(props.filterValueType);
         this._getDisplayValue = $derived(props.getDisplayValue);
         this.debug = $derived(props.debug ?? false);
+        this.getOptions = $derived(props.getOptions);
     }
     id;
     debug;
@@ -87,4 +88,5 @@ export class ColumnDef {
     isEditable;
     resizable;
     header;
+    getOptions;
 }

package/dist/Components/Table/Types/Context/Row.d.ts

@@ -1,6 +1,6 @@
 import type { TableCell } from '../Columns/TableCell.js';
 export interface Row<T extends object> {
-    getValue: (columnId: string) => any;
+    getValue: (columnId: string) => Promise<any>;
     original: T;
     visibleIndex: number;
     originalIndex: number;

package/dist/Components/Table/Types/Context/TableContext.svelte.d.ts

@@ -142,7 +142,12 @@ export declare class TableContext<T extends object> {
     private columnDefsById;
     private readonly getSortingFn;
     readonly originalRowIndices: Map<T, number>;
-    readonly filteredIndeces: number[];
+    private _filterTimer;
+    private get filterTimer();
+    private set filterTimer(value);
+    private _filteredIndices;
+    get filteredIndices(): number[];
+    set filteredIndices(v: number[]);
     readonly filteredData: T[];
     readonly sortedData: T[];
     readonly sortedRowModel: RowModel<T>;

package/dist/Components/Table/Types/Context/TableContext.svelte.js

@@ -4,7 +4,7 @@ import { ToolbarPosition } from '../Toolbar/ToolbarPosition.js';
 import { RowSelectionDef } from '../Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
 import { tick } from 'svelte';
 import { PaginationType } from '../Pagination/PaginationType.js';
-import { getCanvasContext } from '../../../../Helpers/Helpers.svelte.js';
+import { asyncAll, asyncFilter, asyncFilterIndices, asyncSleep, asyncSome, getCanvasContext, getErrorMessage } from '../../../../Helpers/Helpers.svelte.js';
 import { AccessorDef } from '../Columns/Definitions/Accessors/AccessorDef.svelte.js';
 import { NumberInputDef } from '../Columns/Definitions/Accessors/NumberInputDef.svelte.js';
 import { SelectDef } from '../Columns/Definitions/Accessors/SelectDef.svelte.js';
@@ -13,7 +13,7 @@ import { CheckboxDef } from '../Columns/Definitions/Accessors/CheckboxDef.svelte
 import { DateInputDef } from '../Columns/Definitions/Accessors/DateInputDef.svelte.js';
 import { ProgressBarDef } from '../Columns/Definitions/Display/ProgressBarDef.svelte.js';
 import { DisplayDef } from '../Columns/Definitions/Display/DisplayDef.svelte.js';
-import { browser } from '$app/environment';
+import { browser, dev } from '$app/environment';
 import { ActionsDef } from '../Columns/Definitions/Actions/ActionsDef.svelte.js';
 import { BubbleDef } from '../Columns/Definitions/Display/BubbleDef.svelte.js';
 const SORTING_ICON_WIDTH = 24;
@@ -142,6 +142,83 @@ export class TableContext {
                 }
             });
         }
+        $effect(() => {
+            void this.paginationRepo?.paginationType;
+            void this.dataRepo?.filtering;
+            void this.dataRepo?.filterModes.values();
+            void this.dataRepo?.data;
+            (async () => {
+                const startTime = Date.now();
+                let currentTimerPromise;
+                const abortController = new AbortController();
+                try {
+                    if (this.paginationRepo?.paginationType == PaginationType.Local) {
+                        const filterState = this.dataRepo?.filtering ?? [];
+                        const data = this.dataRepo?.data ?? [];
+                        if (!filterState.length) {
+                            this.filteredIndices = data.map((_, index) => index) ?? [];
+                        }
+                        currentTimerPromise = this.filterTimer = this.filterTimer + 1;
+                        await asyncSleep(150);
+                        const currentTimer = await currentTimerPromise;
+                        if (currentTimerPromise != this.filterTimer) {
+                            throw new Error('stale filter');
+                        }
+                        let settled = false;
+                        const filterPromise = asyncFilterIndices(data, async (item, index) => {
+                            const row = this.createRow(item, index, index);
+                            return asyncAll(filterState, async (filter) => {
+                                abortController.signal.throwIfAborted();
+                                const def = this.columnDefsById.get(filter.id);
+                                if (!def) {
+                                    console.warn(`Could not find column def for filter with id ${filter.id}`);
+                                    return false;
+                                }
+                                if (def.filterFn) {
+                                    return def.filterFn(row, filter.id, filter.value);
+                                }
+                                if (dev) {
+                                    console.warn(`column ${def.id} did not have a filter function`);
+                                }
+                                return false;
+                            });
+                        });
+                        filterPromise
+                            .then((indices) => {
+                            this.filteredIndices = indices;
+                        })
+                            .catch((e) => {
+                            if (dev) {
+                                console.log(`caught filter rejection:`, e);
+                                console.log(`iteration ${currentTimer} cancelled after ${Date.now() - startTime}ms`);
+                            }
+                        })
+                            .finally(() => {
+                            settled = true;
+                        });
+                        for (;;) {
+                            if (currentTimerPromise !== this.filterTimer) {
+                                abortController.abort('stale data');
+                            }
+                            if (settled) {
+                                console.log(`iteration ${await currentTimerPromise} finished ${Date.now() - startTime}ms`);
+                                return;
+                            }
+                            await tick();
+                        }
+                    }
+                }
+                catch (e) {
+                    if (dev) {
+                        const message = getErrorMessage(e);
+                        if (!message.toLocaleLowerCase().startsWith('stale')) {
+                            console.error(e);
+                        }
+                        console.log(`iteration ${await currentTimerPromise} cancelled after ${Date.now() - startTime}ms`);
+                    }
+                }
+            })();
+        });
     }
     // #endregion
     // #region stores
@@ -504,49 +581,27 @@ export class TableContext {
     };
     // eslint-disable-next-line svelte/prefer-svelte-reactivity
     originalRowIndices = $derived(new Map((this.dataRepo?.data ?? []).map((item, index) => [item, index])));
-    filteredIndeces = $derived.by(() => {
-        if (this.paginationRepo?.paginationType == PaginationType.Local) {
-            const filterState = this.dataRepo?.filtering ?? [];
-            const data = this.dataRepo?.data ?? [];
-            if (!filterState.length) {
-                return data.map((_, index) => index) ?? [];
-            }
-            const filtered = data
-                .map((item, index) => {
-                const row = this.createRow(item, index, index);
-                const x = filterState.every((filter) => {
-                    const def = this.columnDefsById.get(filter.id);
-                    if (!def) {
-                        console.warn(`Could not find column def for filter with id ${filter.id}`);
-                        return true;
-                    }
-                    if (def.filterFn) {
-                        const x = def.filterFn(row, filter.id, filter.value);
-                        // debugger;
-                        return x;
-                    }
-                    console.warn(`row ${row.id} did not have a filter function`);
-                    return false;
-                });
-                // debugger;
-                if (x) {
-                    return index;
-                }
-                else {
-                    return null;
-                }
-            })
-                .filter((it) => it != null);
-            return filtered;
-        }
-        return this.dataRepo?.data.map((_, index) => index) ?? [];
-    });
+    // private _filterTimer: ReturnType<typeof setTimeout> | undefined;
+    _filterTimer = 1;
+    get filterTimer() {
+        return this._filterTimer;
+    }
+    set filterTimer(v) {
+        this._filterTimer = v;
+    }
+    _filteredIndices = $state([]);
+    get filteredIndices() {
+        return this._filteredIndices;
+    }
+    set filteredIndices(v) {
+        this._filteredIndices = v;
+    }
     filteredData = $derived.by(() => {
         if (this.paginationRepo?.paginationType == PaginationType.Local) {
             const data = this.showSelectedOnly
                 ? // FIXME this will show the selected items by order of insertion to the selectedItems map.
                     [...this.selectedItems.values()]
-                : (this.filteredIndeces.map((index) => {
+                : (this.filteredIndices.map((index) => {
                     return this.dataRepo.data[index];
                 }) ?? []);
             return data;
@@ -600,7 +655,7 @@ export class TableContext {
         const rows = sortedData.map((item, index) => {
             const unsortedIndex = this.originalRowIndices.get(item) ?? index;
             const row = {
-                getValue: (key) => {
+                getValue: async (key) => {
                     const gotValue = this.columnDefsById.get(key).accessorFn?.(item, index);
                     if (gotValue !== undefined) {
                         return gotValue;
@@ -1597,7 +1652,7 @@ export class TableContext {
     // #region private methods
     createRow(item, index, unsortedIndex) {
         const row = {
-            getValue: (key) => {
+            getValue: async (key) => {
                 const gotValue = this.columnDefsById.get(key).accessorFn?.(item, unsortedIndex);
                 if (gotValue !== undefined) {
                     return gotValue;
@@ -1740,11 +1795,11 @@ export class TableContext {
             it.index >= minColumnIndex &&
             it.index <= maxColumnIndex)
             .forEach((it) => affectedColumns.add(it.id));
-        const indeces = new SvelteSet();
+        const indices = new SvelteSet();
         for (let i = minRowIndex; i <= maxRowIndex; i++) {
-            indeces.add(parseInt(model.rows[i].id));
+            indices.add(parseInt(model.rows[i].id));
         }
-        this.focusedRowIndexIds = indeces;
+        this.focusedRowIndexIds = indices;
         this.focusedColumnIds = affectedColumns;
     }
     async getHighlightedRowData() {

package/dist/Components/Table/Types/DataRepository/LocalTableDataRepository.svelte.d.ts

@@ -42,11 +42,11 @@ export declare class LocalTableDataRepository<T extends object> extends TableDat
     prevPage: () => void;
     readonly dateFilter: ILocalDataRepository<T>['dateFilter'];
     readonly numberFilter: (row: Row<T>, columnId: string, // & keyof T,
-    values: NumberFilterValueType) => boolean;
+    values: NumberFilterValueType) => Promise<boolean>;
     readonly selectFilter: <columnType = T[keyof T]>(row: Row<T>, columnId: string, // & keyof T,
-    filterValue: SelectFilterValueType<T>) => boolean;
+    filterValue: SelectFilterValueType<T>) => Promise<boolean>;
     readonly boolFilter: (row: Row<T>, columnId: string, // & keyof T,
-    filterValue: BoolFilterValueType) => boolean;
+    filterValue: BoolFilterValueType) => Promise<boolean>;
     readonly stringFilter: (row: Row<T>, columnId: string, // & keyof T,
-    filterValue: StringFilterValueType) => any;
+    filterValue: StringFilterValueType) => Promise<any>;
 }

package/dist/Components/Table/Types/DataRepository/LocalTableDataRepository.svelte.js

@@ -130,12 +130,12 @@ export class LocalTableDataRepository extends TableDataRepository {
         };
     };
     // #region filters
-    dateFilter = (row, columnId, // & keyof T,
+    dateFilter = async (row, columnId, // & keyof T,
     [dateFrom, dateTo]) => {
         if (!dateFrom && !dateTo) {
             return true;
         }
-        const columnValue = row.getValue(columnId)?.valueOf();
+        const columnValue = (await row.getValue(columnId))?.valueOf();
         if (!columnValue) {
             return false;
         }
@@ -159,9 +159,9 @@ export class LocalTableDataRepository extends TableDataRepository {
         }
         return true;
     };
-    numberFilter = (row, columnId, // & keyof T,
+    numberFilter = async (row, columnId, // & keyof T,
     values) => {
-        const columnValue = row.getValue(columnId);
+        const columnValue = await row.getValue(columnId);
         if (!columnValue) {
             return false;
         }
@@ -246,12 +246,13 @@ export class LocalTableDataRepository extends TableDataRepository {
         //default
         return !!values[0] && columnValue.toString().includes(values[0].toString());
     };
-    selectFilter = (row, columnId, // & keyof T,
+    selectFilter = async (row, columnId, // & keyof T,
     filterValue) => {
         if (!filterValue) {
             return true;
         }
-        const columnValue = row.getValue(columnId);
+        void filterValue;
+        const columnValue = (await row.getValue(columnId));
         if (Array.isArray(filterValue)) {
             return filterValue.find((it) => it === columnValue) != null;
         }
@@ -263,21 +264,21 @@ export class LocalTableDataRepository extends TableDataRepository {
         }
         return filterValue == columnValue;
     };
-    boolFilter = (row, columnId, // & keyof T,
+    boolFilter = async (row, columnId, // & keyof T,
     filterValue) => {
-        const columnValue = row.getValue(columnId);
+        const columnValue = (await row.getValue(columnId));
         return filterValue == null || filterValue === columnValue;
     };
-    stringFilter = (row, columnId, // & keyof T,
+    stringFilter = async (row, columnId, // & keyof T,
     filterValue) => {
         if (!filterValue) {
             return true;
         }
-        const columnValue = row.getValue(columnId)?.toString().trim().toLocaleLowerCase();
+        filterValue = filterValue.trim().toLocaleLowerCase();
+        const columnValue = (await row.getValue(columnId))?.toString().trim().toLocaleLowerCase();
         if (!columnValue) {
             return true;
         }
-        filterValue = filterValue.trim().toLocaleLowerCase();
         const filterType = this.filterModes.get(columnId) ?? StringFilterMode.Contains;
         if (filterType === StringFilterMode.EndsWith) {
             return columnValue.endsWith(filterValue);
@@ -288,10 +289,13 @@ export class LocalTableDataRepository extends TableDataRepository {
         if (filterType === StringFilterMode.StartsWith) {
             return columnValue.startsWith(filterValue);
         }
+        if (filterType === StringFilterMode.NotEquals) {
+            return columnValue !== filterValue;
+        }
+        //last ditch effort and fallback
         if (filterType !== StringFilterMode.Contains) {
             console.warn(`unhandled filter type value ${filterType}`);
         }
-        //default
         return columnValue.includes(filterValue);
     };
 }

package/dist/Components/Table/Types/Filtering/CustomFilter.d.ts

@@ -4,7 +4,6 @@ export interface CustomFilter {
     queryKey: string;
     type: CustomFilterType;
     id: string;
-    valueAsObject?: boolean;
     options?: Array<SelectOption<string | number>> | Promise<Array<SelectOption<string | number>>>;
     multiSelect?: boolean;
     objectName?: string;

package/dist/Components/Table/Types/Filtering/CustomFilterFn.d.ts

@@ -1,2 +1,2 @@
 import type { FilterMode } from './FilterMode.js';
-export type CustomFilterFn = (mode: FilterMode, value: unknown) => boolean;
+export type CustomFilterFn = (mode: FilterMode, value: unknown) => Promise<boolean>;

package/dist/Components/Table/Types/Filtering/FilterFn.d.ts

@@ -6,4 +6,4 @@ export type SelectFilterValueType<T, columnType = T[keyof T]> = string | Array<u
 } | undefined;
 export type BoolFilterValueType = boolean | null;
 export type StringFilterValueType = string | null;
-export type FilterFn<T extends object, FilterValueType> = (row: Row<T>, columnId: string, filterValue: FilterValueType) => boolean;
+export type FilterFn<T extends object, FilterValueType> = (row: Row<T>, columnId: string, filterValue: FilterValueType) => Promise<boolean>;

package/dist/Helpers/Helpers.svelte.d.ts

@@ -28,4 +28,12 @@ export declare function isValidEmailAddress(emailAddress: string): RegExpMatchAr
 export declare function gridItem(element: HTMLElement): (() => void) | undefined;
 export type Milliseconds = number;
 export declare function asyncSleep(delay: Milliseconds): Promise<void>;
+export declare function asyncMap<T, R>(array: Array<T>, asyncCallback: (item: T, index: number) => Promise<R>): Promise<Awaited<R>[]>;
+export declare function asyncForEach<T>(array: Array<T>, asyncCallback: (item: T, index: number) => Promise<void>): Promise<void>;
+export declare function asyncFlatMap<T, R>(array: Array<T>, asyncCallback: (item: T, index: number) => Promise<R>): Promise<(Awaited<R> extends infer T_1 ? T_1 extends Awaited<R> ? T_1 extends readonly (infer InnerArr)[] ? InnerArr : T_1 : never : never)[]>;
+export declare function asyncSome<T>(array: Array<T>, asyncCallback: (item: T, index: number) => Promise<boolean>): Promise<boolean>;
+export declare function asyncAll<T>(array: Array<T>, asyncCallback: (item: T, index: number) => Promise<boolean>): Promise<boolean>;
+export declare const asyncEvery: typeof asyncAll;
+export declare function asyncFilterIndices<T>(array: Array<T>, asyncCallback: (item: T, index: number) => Promise<boolean>): Promise<Array<number>>;
+export declare function asyncFilter<T>(array: Array<T>, asyncCallback: (item: T, index: number) => Promise<boolean>): Promise<Array<T>>;
 export {};

package/dist/Helpers/Helpers.svelte.js

@@ -167,5 +167,60 @@ export function gridItem(element) {
     return () => observer.unobserve(firstChild);
 }
 export async function asyncSleep(delay) {
-    await new Promise((r) => setTimeout(r, delay));
+    await untrack(() => new Promise((r) => {
+        void setTimeout(() => {
+            void r(undefined);
+        }, delay);
+    }));
+}
+export async function asyncMap(array, asyncCallback) {
+    return Promise.all(array.map(asyncCallback));
+}
+export async function asyncForEach(array, asyncCallback) {
+    await Promise.all(array.map(asyncCallback));
+}
+export async function asyncFlatMap(array, asyncCallback) {
+    return (await Promise.all(array.map(asyncCallback))).flat();
+}
+const emptyPromise = new Promise(() => null);
+export async function asyncSome(array, asyncCallback) {
+    const promises = array.map(asyncCallback);
+    return Promise.race([
+        Promise.race(
+        // empty promise is required here
+        // because otherwise the first false would immediately end the race without checking the rest of the array
+        promises.map(async (p) => !!(await p) || emptyPromise)),
+        Promise.all(promises).then((r) => r.some(Boolean))
+    ]);
+}
+export async function asyncAll(array, asyncCallback) {
+    const promises = array.map(asyncCallback);
+    return promises.length == 0
+        ? true
+        : Promise.race([
+            Promise.race(
+            // empty promise is required here
+            // because otherwise the first false would immediately end the race without checking the rest of the array
+            promises.map(async (p) => !!(await p) || emptyPromise)),
+            Promise.all(promises).then((r) => r.every(Boolean))
+        ]);
+}
+export const asyncEvery = asyncAll;
+export async function asyncFilterIndices(array, asyncCallback) {
+    const filtered = [];
+    await asyncForEach(array, async (item, index) => {
+        if (await asyncCallback(item, index)) {
+            filtered.push(index);
+        }
+    });
+    return filtered.sort((a, b) => a - b);
+}
+export async function asyncFilter(array, asyncCallback) {
+    const filtered = [];
+    await asyncForEach(array, async (item, index) => {
+        if (await asyncCallback(item, index)) {
+            filtered.push(index);
+        }
+    });
+    return filtered.sort((a, b) => a - b).map((i) => array[i]);
 }

package/dist/index.d.ts

@@ -123,7 +123,7 @@ export { TooltipContext } from './Contexts/TooltipContext.svelte.js';
 export { UntypedInputContext } from './Contexts/UntypedInputContext.svelte.js';
 export { Delay } from './Delay/Delay.js';
 export { DATAMatrix } from './Helpers/Datamatrix.js';
-export { gridItem, autoPluralise, generateUUID, generateShortUUID, refWrapper, SQLFriendly, SQLFriendlyWithLocalTime, passthrough, getCanvasContext, getErrorMessage, isValidEmailAddress, localTimeFormat, vowels, asyncSleep } from './Helpers/Helpers.svelte.js';
+export { gridItem, autoPluralise, generateUUID, generateShortUUID, refWrapper, SQLFriendly, SQLFriendlyWithLocalTime, passthrough, getCanvasContext, getErrorMessage, isValidEmailAddress, localTimeFormat, vowels, asyncSleep, asyncMap, asyncFilterIndices, asyncFilter, asyncForEach, asyncFlatMap, asyncSome, asyncAll, asyncEvery } from './Helpers/Helpers.svelte.js';
 export { type INamed } from './Helpers/INamed.js';
 export { AttributeOperation } from './Types/Internal/AttributeOperation.js';
 export { type BigRadioOption } from './Types/Internal/BigRadioOption.js';

package/dist/index.js

@@ -130,7 +130,7 @@ export { TooltipContext } from './Contexts/TooltipContext.svelte.js';
 export { UntypedInputContext } from './Contexts/UntypedInputContext.svelte.js';
 export { Delay } from './Delay/Delay.js';
 export { DATAMatrix } from './Helpers/Datamatrix.js';
-export { gridItem, autoPluralise, generateUUID, generateShortUUID, refWrapper, SQLFriendly, SQLFriendlyWithLocalTime, passthrough, getCanvasContext, getErrorMessage, isValidEmailAddress, localTimeFormat, vowels, asyncSleep } from './Helpers/Helpers.svelte.js';
+export { gridItem, autoPluralise, generateUUID, generateShortUUID, refWrapper, SQLFriendly, SQLFriendlyWithLocalTime, passthrough, getCanvasContext, getErrorMessage, isValidEmailAddress, localTimeFormat, vowels, asyncSleep, asyncMap, asyncFilterIndices, asyncFilter, asyncForEach, asyncFlatMap, asyncSome, asyncAll, asyncEvery } from './Helpers/Helpers.svelte.js';
 export {} from './Helpers/INamed.js';
 export { AttributeOperation } from './Types/Internal/AttributeOperation.js';
 export {} from './Types/Internal/BigRadioOption.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "publishConfig": {
     "access": "restricted"
   },
@@ -41,7 +41,7 @@
     "@sveltejs/adapter-node": "^5.4.0",
     "@sveltejs/kit": "^2.49.3",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.2",
+    "@sveltejs/vite-plugin-svelte": "^6.2.3",
     "@types/eslint": "^9.6.1",
     "@types/node": "^24.10.4",
     "@typescript-eslint/eslint-plugin": "^8.52.0",
@@ -50,7 +50,7 @@
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-storybook": "10.1.4",
-    "eslint-plugin-svelte": "^3.13.1",
+    "eslint-plugin-svelte": "^3.14.0",
     "globals": "^16.5.0",
     "mdsvex": "^0.12.6",
     "playwright": "^1.57.0",
@@ -64,7 +64,7 @@
     "svelte-render-scan": "^1.1.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.52.0",
-    "vite": "^7.3.0",
+    "vite": "^7.3.1",
     "vite-plugin-devtools-json": "^1.0.0",
     "vitest": "^4.0.16",
     "vitest-browser-svelte": "^2.0.1"