@lavalogic/scoria 0.0.28 → 0.0.30

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

@@ -7,16 +7,9 @@
 	import type { Component } from 'svelte';
 	import ExpandCell from './ExpandCell.svelte';
 	import { ExpandDef } from '../../../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
-	import type { ColumnDef } from '../../../Types/Columns/Definitions/ColumnDef.svelte.js';
 	import type { TableCell } from '../../../Types/Columns/TableCell.js';
 	import { DisplayType } from '../../../Types/Columns/DisplayType.js';
-	import TableNumberInput from './TableNumberInput.svelte';
-	import TableDatePicker from './TableDatePicker.svelte';
-	import TableSelect from './TableSelect.svelte';
-	import TableQuerySelect from './TableQuerySelect.svelte';
-	import TableCheckbox from './TableCheckbox.svelte';
-	import TableTextInput from './TableTextInput.svelte';
-	import { AccessorDef } from '../../../Types/Columns/Definitions/Accessors/AccessorDef.svelte.js';
+
 	import { ActionsDef } from '../../../Types/Columns/Definitions/Actions/ActionsDef.svelte.js';
 	import ValidityCell from './ValidityCell.svelte';
 	import TableRowSelectionCheckbox from './TableRowSelectionCheckbox.svelte';
@@ -28,19 +21,8 @@
 	import type { ProgressBarTableCell } from '../../../Types/Columns/ProgressBarTableCell.js';
 	import { RowSelectionDef } from '../../../Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
 	import type { ExpandTableCell } from '../../../Types/Columns/ExpandTableCell.js';
-
-	const cellTypes: Record<
-		'Number' | 'Date' | 'Select' | 'Checkbox' | 'Query' | 'Text',
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		Component<any>
-	> = {
-		Number: TableNumberInput,
-		Date: TableDatePicker,
-		Select: TableSelect,
-		Query: TableQuerySelect,
-		Checkbox: TableCheckbox,
-		Text: TableTextInput
-	} as const;
+	import type { ActionsTableCell } from './TableAction.svelte';
+	import AccessorComponent from './AccessorComponent.svelte';
 
 	export interface TableColumnProps<T extends object> {
 		cell: TableCell<T>;
@@ -65,15 +47,9 @@
 		return typeof valueOrComponent === 'function';
 	}
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	function getAppropriateAccessorDef(columnDef: ColumnDef<T>): Component<any> {
-		if (columnDef instanceof AccessorDef) {
-			return cellTypes[columnDef.accessorType];
-		}
-
-		return FocusableImmutableCell;
+	function isActionsDef(cell: TableCell<T>): cell is ActionsTableCell<T> {
+		return cell.column.columnDef instanceof ActionsDef;
 	}
-
 	function isExpandTableCell(cell: TableCell<T>): cell is ExpandTableCell<T> {
 		return cell.column.columnDef instanceof ExpandDef;
 	}
@@ -86,31 +62,26 @@
 		<ValidityCell {cell} />
 	{:else if columnDef instanceof RowSelectionDef}
 		<TableRowSelectionCheckbox {cell} />
-	{:else if columnDef instanceof ActionsDef}
+	{:else if isActionsDef(cell)}
 		<ActionsCell {cell} />
 	{:else if isExpandTableCell(cell)}
 		<ExpandCell {cell} {expandedColumnDef} {onExpandChange} />
 	{:else if columnDef.columnType !== ColumnType.Display}
-		{@const CurrentComponent = getAppropriateAccessorDef(columnDef)}
-		<CurrentComponent {cell} />
+		<AccessorComponent {cell} />
 	{:else}
 		{@const valueOrComponentPromise =
-			cell.column.columnDef.accessorFn?.(cell.row.original, cell.row.index) ??
+			cell.column.columnDef.accessorFn?.(cell.row.original, cell.row.originalIndex) ??
 			cell.row.original[cell.column.id as keyof typeof cell.row.original] ??
 			null}
 
-		{#if valueOrComponentPromise instanceof Promise}
-			{#await valueOrComponentPromise}
-				<FocusableImmutableCell value={valueOrComponentPromise} {cell} />
-			{:then value}
-				{@render ValueFallback(value)}
-			{:catch e}
-				{@debug e}
-				<FocusableImmutableCell value={e?.toString()} {cell} />
-			{/await}
-		{:else}
-			{@render ValueFallback(valueOrComponentPromise)}
-		{/if}
+		{#await valueOrComponentPromise}
+			<FocusableImmutableCell value={valueOrComponentPromise} {cell} />
+		{:then value}
+			{@render ValueFallback(value)}
+		{:catch e}
+			{@debug e}
+			<FocusableImmutableCell value={e?.toString()} {cell} />
+		{/await}
 	{/if}
 {/if}
 

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

@@ -27,7 +27,7 @@
 
 	const columnDef = $derived(cell.column.columnDef);
 	const coordinates: CellCoordinates = $derived({
-		row: cell.row.index,
+		row: cell.row.visibleIndex,
 		column: columnDef.index,
 		id: columnDef.id as string & keyof T
 	});
@@ -59,7 +59,7 @@
 
 	let tdref: HTMLTableCellElement | undefined = $state();
 
-	const id = $derived(`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`);
+	const id = $derived(`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`);
 	function handleSingleClick(event?: Event) {
 		if (
 			editable &&

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

@@ -252,7 +252,7 @@
 
 	<td class="input-cell">
 		<NumberInput
-			id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
 			min={(cell.column.columnDef as NumberInputDef<T>).min}
 			max={(cell.column.columnDef as NumberInputDef<T>).max}
 			variant={InputVariant.Table}
@@ -269,7 +269,7 @@
 
 	<td
 		style={focusDetails.outline}
-		id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+		id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
 		onmousedown={(e) => {
 			// start focus only on left click
 			if (e.button === 0) {

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

@@ -212,7 +212,7 @@
 				labelProp="label"
 				valueAsObject={columnDef.valueAsObject as true}
 				selectedValue={value}
-				query={(v) => columnDef.query(v, cell.row.original, cell.row.index)}
+				query={(v) => columnDef.query(v, cell.row.original, cell.row.originalIndex)}
 				bind:options={lastOptions}
 				onfocus={addKeydownEvent}
 				onchange={(newValue) => {
@@ -235,7 +235,7 @@
 		style={focusDetails.outline}
 		bind:this={tdref}
 		tabIndex="0"
-		id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+		id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
 		class="focusable editable"
 		class:multifocus={focusDetails.isMultiFocused}
 		class:multifocus-start={focusDetails.isMultiFocusStart}

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

@@ -33,7 +33,7 @@
 	const isSelectable = $derived(
 		(cell.column.columnDef as RowSelectionDef<T>).isSelectable?.(
 			cell.row.original,
-			cell.row.index
+			cell.row.originalIndex
 		) ?? true
 	);
 
@@ -97,7 +97,7 @@
 
 {#snippet input(isSelectable: boolean)}
 	<input
-		id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+		id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
 		bind:this={inputRef}
 		{onchange}
 		type="checkbox"

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

@@ -7,6 +7,7 @@
 </script>
 
 <script lang="ts" generics="T extends object">
+	import { dev } from '$app/environment';
 	import SingleSelect from '../../../../SingleSelect.svelte';
 	import type { SelectDef } from '../../../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
 	import type { TableCell } from '../../../Types/Columns/TableCell.js';
@@ -87,6 +88,9 @@
 		optionsPromise: Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>,
 		value: unknown
 	): Promise<SelectOption<unknown> | null> {
+		void value;
+		void optionsPromise;
+
 		if (value == null) {
 			return null;
 		}
@@ -101,7 +105,9 @@
 			return foundOption ?? null;
 		}
 
-		console.warn('could not match value to any type:', value);
+		if (dev) {
+			console.warn('could not match value to any type:', value);
+		}
 
 		return null;
 	}
@@ -249,7 +255,7 @@
 		bind:this={tdref}
 		tabIndex="0"
 		style={focusDetails.outline}
-		id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+		id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
 		class="focusable editable"
 		class:multifocus={focusDetails.isMultiFocused}
 		class:multifocus-start={focusDetails.isMultiFocusStart}

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

@@ -258,7 +258,7 @@
 	<!-- {#if true} -->
 	<td class="input-cell">
 		<TextInput
-			id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
 			onkeydown={handleInputKeydown}
 			variant={InputVariant.Table}
 			bind:value={tempTextValue}
@@ -278,7 +278,7 @@
 {:else}
 	<!-- svelte-ignore a11y_mouse_events_have_key_events -->
 	<td
-		id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+		id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
 		style={focusDetails.outline}
 		onmousedown={(e) => {
 			// start focus only on left click

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

@@ -87,7 +87,9 @@
 		});
 	});
 
-	const thisId = $derived(`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`);
+	const thisId = $derived(
+		`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`
+	);
 
 	function onclose() {
 		tableContext.setOpenModalCoordinates(null);

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

@@ -55,7 +55,7 @@
 
 	let prevExpandedColumnDef: ExpandDef<T, object> | undefined = $state();
 
-	const rowIndex = $derived(cells[0] && cells[0].row.index);
+	const rowIndex = $derived(cells[0] && cells[0].row.visibleIndex);
 	const highlighted = $derived(
 		rowIndex != undefined &&
 			tableContext.highlightedItems.has(tableContext.selectionExtractor(row.original))
@@ -63,14 +63,14 @@
 
 	const isAppropriateTableSide = $derived.by(() => {
 		if (side === 'left') {
-			return (tableContext.columnPinning.left?.length ?? 0) > 0;
+			return (tableContext.columnPinning.left?.size ?? 0) > 0;
 		} else if (side === 'centre') {
 			return (
-				(tableContext.columnPinning.left?.length ?? 0) == 0 &&
-				(tableContext.columnPinning.right?.length ?? 0) != tableContext.columnDefs.length
+				(tableContext.columnPinning.left?.size ?? 0) == 0 &&
+				(tableContext.columnPinning.right?.size ?? 0) != tableContext.columnDefs.length
 			);
 		} else {
-			return (tableContext.columnPinning.right?.length ?? 0) == tableContext.columnDefs.length;
+			return (tableContext.columnPinning.right?.size ?? 0) == tableContext.columnDefs.length;
 		}
 	});
 	const showHighlightButton = $derived(rowIndex != null && isAppropriateTableSide);
@@ -85,12 +85,12 @@
 				prevExpandedColumnDef = expandedColumnDef;
 				innerColumnDefs = expandedColumnDef.getInnerColumnDefs(
 					cells[0].row.original,
-					cells[0].row.index
+					cells[0].row.originalIndex
 				);
 
 				innerDataPromise = expandedColumnDef.accessorFn!(
 					cells[0].row.original,
-					cells[0].row.index
+					cells[0].row.originalIndex
 				) as Promise<object[]>;
 				innerTableName = expandedColumnDef.innerTableName;
 			} else if (
@@ -125,7 +125,7 @@ onMouseLeave={onMouseLeave} -->
 			}}
 		/>
 	{/if}
-	{#each cells as cell (`${cell.id}-${cell.row.index}`)}
+	{#each cells as cell (cell)}
 		<TableColumn {cell} {expandedColumnDef} {onExpandChange} />
 	{/each}
 </tr>

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

@@ -42,7 +42,7 @@
 			{/each}
 		</tr>
 	{/if}
-	{#each tableContext.paginationRowModel.rows ?? [] as row, index (row.id)}
+	{#each tableContext.paginationRowModel.rows ?? [] as row, index (row)}
 		<TableRow {row} {side} odd={index % 2 == 1} />
 	{/each}
 </tbody>

package/dist/Components/Table/ColumnDefinitions/ExampleItemColumnDef.svelte.js

@@ -35,7 +35,8 @@ export class ExampleItemColumnDef {
             }),
             new DisplayDef({
                 header: 'ID',
-                id: 'id'
+                id: 'id',
+                filterValueType: 'Number'
             }),
             new TextInputDef({
                 header: 'Name',

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

@@ -26,6 +26,7 @@
 	import QuerySelect from '../../QuerySelect.svelte';
 	import { AccessorDef } from '../Types/Columns/Definitions/Accessors/AccessorDef.svelte.js';
 	import { AbstractDisplayDef } from '../Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js';
+	import { dev } from '$app/environment';
 
 	export const stringFilterTypes = [
 		{ value: StringFilterMode.Equals, label: 'Equals' },
@@ -175,6 +176,11 @@
 		} else if (def instanceof SelectDef) {
 			untrack(async () => {
 				try {
+					if (dev) {
+						// eslint-disable-next-line no-debugger
+						debugger;
+					}
+					// TODO see if we can change the below not to use array.includes
 					const x = (await options).filter((it) => {
 						return (filteringStateValue as unknown as Array<string | number> | undefined)?.includes(
 							it.value

package/dist/Components/Table/Types/Columns/ColumnPinningState.d.ts

@@ -1,4 +1,4 @@
 export interface ColumnPinningState {
-    left?: string[];
-    right?: string[];
+    left?: Map<string, number>;
+    right?: Map<string, number>;
 }

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

@@ -3,7 +3,7 @@ import type { AccessorType } from './AccessorType.js';
 export interface AccessorDefProps<T extends object> extends ColumnDefProps<T> {
     readonly id: string & keyof T;
 }
-export declare abstract class AccessorDef<T extends object, FilterValueType> extends ColumnDef<T, FilterValueType> {
+export declare abstract class AccessorDef<T extends object, filterValueType = unknown> extends ColumnDef<T, filterValueType> {
     readonly columnType: "Accessor";
     abstract readonly accessorType: AccessorType;
 }

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

@@ -1,6 +1,7 @@
 import type { StringFilterValueType } from '../../../Filtering/FilterFn.js';
 import { AccessorDef, type AccessorDefProps } from './AccessorDef.svelte.js';
 export interface TextInputDefProps<T extends object> extends AccessorDefProps<T> {
+    filterValueType?: 'String';
 }
 export declare class TextInputDef<T extends object> extends AccessorDef<T, StringFilterValueType> {
     readonly accessorType: "Text";

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

@@ -5,6 +5,7 @@ import type { FilterFn } from '../../Filtering/FilterFn.js';
 import { ColumnType } from '../ColumnType.js';
 import type { AccessorFn } from './AccessorFn.js';
 import type { ValidationFn } from './ValidationFn.js';
+import type { FilterValueType } from '../../Filtering/FilterValueType.js';
 export interface ColumnDefProps<T extends object> {
     id: string;
     header: string | Snippet;
@@ -17,9 +18,10 @@ export interface ColumnDefProps<T extends object> {
     resizable?: boolean;
     isValid?: ValidationFn<T>;
     filterFn?: FilterFn<T, unknown> | CustomFilterFn;
+    filterValueType?: FilterValueType;
     accessorFn?: AccessorFn<T>;
 }
-export declare abstract class ColumnDef<T extends object, FilterValueType = unknown> {
+export declare abstract class ColumnDef<T extends object, __filterValueType = unknown> {
     protected constructor(props: ColumnDefProps<T>);
     readonly id: string;
     private _index;
@@ -31,8 +33,8 @@ export declare abstract class ColumnDef<T extends object, FilterValueType = unkn
     readonly isValid: ValidationFn<T> | undefined;
     readonly accessorFn: AccessorFn<T> | undefined;
     private _filterFn;
-    get filterFn(): FilterFn<T, FilterValueType> | CustomFilterFn | undefined;
-    set filterFn(v: FilterFn<T, FilterValueType> | CustomFilterFn | undefined);
+    get filterFn(): FilterFn<T, __filterValueType> | CustomFilterFn | undefined;
+    set filterFn(v: FilterFn<T, __filterValueType> | CustomFilterFn | undefined);
     private _minSize;
     get minSize(): Pixels;
     set minSize(v: Pixels);
@@ -45,6 +47,9 @@ export declare abstract class ColumnDef<T extends object, FilterValueType = unkn
     private _visible;
     get visible(): boolean;
     set visible(v: boolean);
+    private _filterValueType;
+    get filterValueType(): FilterValueType | undefined;
+    set filterValueType(v: FilterValueType | undefined);
     toJSON(): object;
     readonly editable: boolean;
     readonly resizable: boolean;

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

@@ -13,6 +13,7 @@ export class ColumnDef {
         this.editable = $derived(props.editable ?? false);
         this.resizable = $derived(props.resizable ?? true);
         this.header = $derived(props.header);
+        this._filterValueType = $derived(props.filterValueType);
     }
     id;
     _index;
@@ -69,6 +70,13 @@ export class ColumnDef {
         }
         this._isResizing = v;
     }
+    _filterValueType;
+    get filterValueType() {
+        return this._filterValueType;
+    }
+    set filterValueType(v) {
+        this._filterValueType = v;
+    }
     toJSON() {
         return { columnType: this.columnType, id: this.id, header: this.header };
     }

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

@@ -2,7 +2,8 @@ import type { TableCell } from '../Columns/TableCell.js';
 export interface Row<T extends object> {
     getValue: (columnId: string) => any;
     original: T;
-    index: number;
+    visibleIndex: number;
+    originalIndex: number;
     id: string;
     getLeftVisibleCells: () => TableCell<T>[];
     getRightVisibleCells: () => TableCell<T>[];

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

@@ -33,7 +33,7 @@ export declare class TableContext<T extends object> {
     private _onEditCell;
     static readonly identifier: unique symbol;
     static init<T extends object>(defaultColumnDefs: DefsWrapper<T>, tableName: string, dataRepo: IDataRepository<T>, options: TableInitOptions<T>): TableContext<T>;
-    constructor(INTERNAL_ONLY: symbol, defaultColumnDefs: DefsWrapper<T>, tableName: string, dataRepo: IDataRepository<T>, allowCopy: boolean, enableResize: boolean, allowColumnReordering: boolean, allowQuickFiltering: boolean, allowAdvancedFiltering: boolean, toolbarPosition: ToolbarPosition, displayFooter: boolean, selectionExtractor: TableInitOptions<T>['selectionExtractor'], getUserId: () => string | undefined, _onEditCell?: TableInitOptions<T>['onEditCell']);
+    protected constructor(INTERNAL_ONLY: symbol, defaultColumnDefs: DefsWrapper<T>, tableName: string, dataRepo: IDataRepository<T>, allowCopy: boolean, enableResize: boolean, allowColumnReordering: boolean, allowQuickFiltering: boolean, allowAdvancedFiltering: boolean, toolbarPosition: ToolbarPosition, displayFooter: boolean, selectionExtractor: TableInitOptions<T>['selectionExtractor'], getUserId: () => string | undefined, _onEditCell?: TableInitOptions<T>['onEditCell']);
     private readonly userId;
     private isSelectable;
     __queryValues: SvelteMap<string, unknown>;
@@ -52,16 +52,11 @@ export declare class TableContext<T extends object> {
     private _showSelectedOnly;
     get showSelectedOnly(): boolean;
     set showSelectedOnly(v: boolean);
-    private readonly _dateFilter;
-    get dateFilter(): FilterFn<T, DateFilterValueType> | undefined;
-    private readonly _numberFilter;
-    get numberFilter(): FilterFn<T, NumberFilterValueType> | undefined;
-    private readonly _selectFilter;
-    get selectFilter(): FilterFn<T, SelectFilterValueType<T>> | undefined;
-    private readonly _boolFilter;
-    get boolFilter(): FilterFn<T, BoolFilterValueType> | undefined;
-    private readonly _stringFilter;
-    get stringFilter(): FilterFn<T, StringFilterValueType> | undefined;
+    readonly dateFilter: FilterFn<T, DateFilterValueType> | undefined;
+    readonly numberFilter: FilterFn<T, NumberFilterValueType> | undefined;
+    readonly selectFilter: FilterFn<T, SelectFilterValueType<T>> | undefined;
+    readonly boolFilter: FilterFn<T, BoolFilterValueType> | undefined;
+    readonly stringFilter: FilterFn<T, StringFilterValueType> | undefined;
     private _limitFooter;
     get limitFooter(): boolean;
     set limitFooter(v: boolean);
@@ -147,6 +142,8 @@ export declare class TableContext<T extends object> {
     private columnDefsById;
     private readonly getSortingFn;
     readonly originalRowIndices: Map<T, number>;
+    readonly filteredIndeces: number[];
+    readonly filteredData: T[];
     readonly sortedData: T[];
     readonly sortedRowModel: RowModel<T>;
     _currentPageData: T[];
@@ -214,6 +211,7 @@ export declare class TableContext<T extends object> {
      * This listener should be added and removed based on isMousingDown
      */
     readonly setFocusEnd: (coords: CellCoordinates) => void;
+    private createRow;
     private columnDefReturnsTextValue;
     private _updateLocalStorageSettings;
     private _moveFocusEndRow;