@lavalogic/scoria 0.11.14 → 0.12.0

package/dist/Components/Table/Headers/TableHead.svelte

@@ -4,18 +4,19 @@
 	import Icon from '../../Icon.svelte';
 	import { TooltipContext } from '../../../Contexts/TooltipContext.svelte.js';
 	import { Delay } from '../../../Delay/Delay.js';
+	import { devCatch } from '../../../Helpers/Helpers.svelte.js';
 	import { Colour } from '../../../scss/colours.js';
 	import { Side } from '../../../Types/Internal/Side.js';
 	import { Size } from '../../../Types/Internal/Size.js';
 	import { Variant } from '../../../Types/Internal/Variant.js';
 	import { getContext } from 'svelte';
 	import type { ColumnDef } from '../Types/Columns/Definitions/ColumnDef.svelte.js';
+	import { ExpandDef } from '../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
+	import { RowSelectionDef } from '../Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { HeaderGroup } from '../Types/HeaderGroup.js';
 	import HighlightAllHeader from './HighlightAllHeader.svelte';
 	import SelectAllHeader from './SelectAllHeader.svelte';
-	import { ExpandDef } from '../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
-	import type { HeaderGroup } from '../Types/HeaderGroup.js';
-	import { RowSelectionDef } from '../Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
 
 	export interface TableHeadProps {
 		showHighlight: boolean;
@@ -30,15 +31,17 @@
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
 
-	const groups: HeaderGroup<T>[] = $derived.by(() => {
-		if (tableContext.table.columnVisibility || tableContext.table.columnPinning) {
-			return (
-				(side === 'left'
-					? tableContext.table?.getLeftHeaderGroups()
-					: side === 'right'
-						? tableContext.table?.getRightHeaderGroups()
-						: tableContext.table?.getCenterHeaderGroups()) ?? []
-			);
+	const groups: Array<HeaderGroup<T>> = $derived.by(() => {
+		if (
+			Object.keys(tableContext.table.columnVisibility).length ||
+			tableContext.table.columnPinning.left?.size ||
+			tableContext.table.columnPinning.right?.size
+		) {
+			return side === 'left'
+				? tableContext.table.getLeftHeaderGroups()
+				: side === 'right'
+					? tableContext.table.getRightHeaderGroups()
+					: tableContext.table.getCenterHeaderGroups();
 		}
 
 		return [];
@@ -155,8 +158,12 @@
 						<div class="margin-right">
 							{#if header.column.getCanSort()}
 								<button
-									onmouseenter={(e) => showtooltip(e, header.column.columnDef)}
-									onmouseleave={() => hideTooltip(header.column.columnDef)}
+									onmouseenter={(e) => {
+										showtooltip(e, header.column.columnDef);
+									}}
+									onmouseleave={() => {
+										hideTooltip(header.column.columnDef);
+									}}
 									class="contents"
 									onclick={header.column.getToggleSortingHandler()}
 								>
@@ -178,7 +185,7 @@
 												<Icon
 													variant={Variant.HeaderIcon}
 													size={Size.Medium}
-													name={iconNames[header.column.getIsSorted() || 'none']}
+													name={iconNames[header.column.getIsSorted()]}
 												/>
 											{/if}
 										</div>
@@ -188,8 +195,12 @@
 								{@const isRowSelect = header.column.columnDef instanceof RowSelectionDef}
 								<!-- svelte-ignore a11y_no_static_element_interactions -->
 								<div
-									onmouseenter={(e) => showtooltip(e, header.column.columnDef)}
-									onmouseleave={() => hideTooltip(header.column.columnDef)}
+									onmouseenter={(e) => {
+										showtooltip(e, header.column.columnDef);
+									}}
+									onmouseleave={() => {
+										hideTooltip(header.column.columnDef);
+									}}
 									class="contents"
 								>
 									<div class="th" class:nopadding={isRowSelect}>
@@ -221,7 +232,7 @@
 										handler(e);
 									}}
 									ondblclick={() => {
-										tableContext.autoResize(header.column.columnDef);
+										tableContext.autoResize(header.column.columnDef).catch(devCatch);
 									}}
 									class="resizer right"
 									class:isResizing={header.column.getIsResizing()}

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

@@ -3,17 +3,17 @@
 <script lang="ts" generics="T extends object">
 	import Button from '../../Button.svelte';
 	import SingleSelect from '../../SingleSelect.svelte';
+	import ColumnList from '../Body/Rows/ColumnList.svelte';
 	import TextInput from '../../TextInput.svelte';
+	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
 	import { Size } from '../../../Types/Internal/Size.js';
 	import { Variant } from '../../../Types/Internal/Variant.js';
 	import { getContext } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
-	import ColumnList from '../Body/Rows/ColumnList.svelte';
 
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 
-	const labelledPresets: SelectOption<string>[] = $derived(
+	const labelledPresets: Array<SelectOption<string>> = $derived(
 		tableContext.columnPresets.map((pr) => ({ label: pr.name, value: pr.name }))
 	);
 
@@ -35,7 +35,7 @@
 			valueProp="value"
 			value={selectedValue}
 			valueAsObject
-			onchange={(newSelection) => {
+			onchange={(newSelection: SelectOption<string> | null) => {
 				const preset =
 					newSelection && tableContext.columnPresets.find((p) => p.name === newSelection.label);
 				if (preset) {

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

@@ -1,27 +1,22 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	export interface ColumnPanelModalProps {
-		onclose?: () => void;
-	}
-</script>
-
 <script lang="ts" generics="T extends object">
 	import Button from '../../Button.svelte';
 	import SingleSelect from '../../SingleSelect.svelte';
+	import ColumnList from '../Body/Rows/ColumnList.svelte';
 	import TextInput from '../../TextInput.svelte';
 	import TouchModal from '../../Touch/TouchModal.svelte';
+	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
 	import { Size } from '../../../Types/Internal/Size.js';
 	import { Variant } from '../../../Types/Internal/Variant.js';
 	import { getContext } from 'svelte';
-	import ColumnList from '../Body/Rows/ColumnList.svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
+	import type { ColumnPanelModalProps } from './ColumnPanelModalProps.js';
 
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 
 	const { onclose }: ColumnPanelModalProps = $props();
-	const labelledPresets: SelectOption<string>[] = $derived(
+	const labelledPresets: Array<SelectOption<string>> = $derived(
 		tableContext.columnPresets.map((pr) => ({ label: pr.name, value: pr.name }))
 	);
 	let searchValue = $state('');
@@ -62,7 +57,7 @@
 					valueProp="value"
 					value={selectedValue}
 					valueAsObject
-					onchange={(newSelection) => {
+					onchange={(newSelection: SelectOption<string> | null) => {
 						const preset =
 							newSelection && tableContext.columnPresets.find((p) => p.name === newSelection.label);
 						if (preset) {

package/dist/Components/Table/Misc/ColumnPanelModal.svelte.d.ts

@@ -1,6 +1,4 @@
-export interface ColumnPanelModalProps {
-    onclose?: () => void;
-}
+import type { ColumnPanelModalProps } from './ColumnPanelModalProps.js';
 declare function $$render<T extends object>(): {
     props: ColumnPanelModalProps;
     exports: {};

package/dist/Components/Table/Misc/ColumnPanelModalProps.d.ts

@@ -0,0 +1,3 @@
+export interface ColumnPanelModalProps {
+    onclose?: () => void;
+}

package/dist/Components/Table/Misc/ColumnPanelModalProps.js

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

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

@@ -1,92 +1,38 @@
 <svelte:options runes />
 
-<script module lang="ts">
+<script lang="ts" generics="T extends object">
+	import { dev } from '$app/environment';
 	import Button from '../../Button.svelte';
 	import MultiSelect from '../../MultiSelect.svelte';
 	import NumberInput from '../../NumberInput.svelte';
+	import QuerySelect from '../../QuerySelect.svelte';
 	import SingleSelect from '../../SingleSelect.svelte';
 	import TextInput from '../../TextInput.svelte';
+	import DateModal from '../../Touch/DateModal.svelte';
+	import { devCatch, hasQuery, isDateTuple, isNumberTuple } from '../../../Helpers/Helpers.svelte.js';
+	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
 	import { getContext, onMount, untrack } from 'svelte';
-	import { ColumnType } from '../Types/Columns/ColumnType.js';
-	import { AccessorType } from '../Types/Columns/Definitions/Accessors/AccessorType.js';
-	import { DisplayType } from '../Types/Columns/DisplayType.js';
+	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';
+	import { SelectDef } from '../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 	import { CustomFilterType } from '../Types/Filtering/CustomFilterType.js';
-	import type { CustomRemoteFilters } from '../Types/Filtering/CustomRemoteFilters.js';
 	import { NumberDateFilterMode } from '../Types/Filtering/NumberDateFilterMode.js';
 	import { StringFilterMode } from '../Types/Filtering/StringFilterMode.js';
-	import type { ColumnDef } from '../Types/Columns/Definitions/ColumnDef.svelte.js';
-	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
-	import { SelectDef } from '../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
-	import { DateInputDef } from '../Types/Columns/Definitions/Accessors/DateInputDef.svelte.js';
-	import { CheckboxDef } from '../Types/Columns/Definitions/Accessors/CheckboxDef.svelte.js';
-	import DateModal from '../../Touch/DateModal.svelte';
-	import { NumberInputDef } from '../Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js';
-	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';
+	import type { FilterInputProps } from './FilterInputProps.js';
+	import { numberDateFilterTypes } from './numberDateFilterTypes.js';
+	import { stringFilterTypes } from './stringFilterTypes.js';
 
-	export const stringFilterTypes = [
-		{ value: StringFilterMode.Equals, label: 'Equals' },
-		{ value: StringFilterMode.NotEquals, label: 'Does not equal' },
-		{ value: StringFilterMode.Contains, label: 'Contains' },
-		{ value: StringFilterMode.NotContains, label: 'Does not contain' },
-		{ value: StringFilterMode.StartsWith, label: 'Starts With' },
-		{ value: StringFilterMode.NotStartsWith, label: 'Does not start with' },
-		{ value: StringFilterMode.EndsWith, label: 'Ends With' },
-		{ value: StringFilterMode.NotEndsWith, label: 'Does not end with' },
-		{ value: StringFilterMode.In, label: 'In' },
-		{ value: StringFilterMode.NotIn, label: 'Not in' },
-		{ value: StringFilterMode.Empty, label: 'Empty' },
-		{ value: StringFilterMode.null, label: 'Is null' }
-	];
-
-	export const numberDateFilterTypes = [
-		{ value: NumberDateFilterMode.Equals, label: 'Equals' },
-		{ value: NumberDateFilterMode.NotEquals, label: 'Does not equal' },
-		{ value: NumberDateFilterMode.LessThan, label: 'Less Than' },
-		{ value: NumberDateFilterMode.LessThanOrEqual, label: 'Less than or equal to' },
-		{ value: NumberDateFilterMode.GreaterThan, label: 'Greater than' },
-		{ value: NumberDateFilterMode.GreaterThanOrEqual, label: 'Greater than or equal to' },
-		{ value: NumberDateFilterMode.Between, label: 'Between' },
-		{ value: NumberDateFilterMode.In, label: 'In' },
-		{ value: NumberDateFilterMode.NotIn, label: 'Not in' },
-		{ value: NumberDateFilterMode.null, label: 'Is null' }
-	];
-
-	// export const searchableColumnTypes = new Set<ColumnType | undefined>([
-	// 	ColumnType.Accessor,
-	// 	ColumnType.Display,
-	// 	ColumnType.FilterOnly
-	// 	//ColumnType.Custom,
-	// ]);
-	// export const searchableTypes = new Set<AccessorType | DisplayType | undefined>([
-	// 	AccessorType.Text,
-	// 	AccessorType.Number,
-	// 	AccessorType.Date,
-	// 	// AccessorType.Checkbox,
-	// 	DisplayType.Normal,
-	// 	DisplayType.Bubbles,
-	// 	DisplayType.Progress,
-	// 	DisplayType.Icon
-	// ]);
-
-	export interface FilterInputProps<T extends object> {
-		def: ColumnDef<T>;
-		customFilters?: CustomRemoteFilters | undefined;
-	}
-</script>
-
-<script lang="ts" generics="T extends object">
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 
 	const { def, customFilters }: FilterInputProps<T> = $props();
 
 	const customFilter = $derived(customFilters?.get(def.id));
+
 	const isRemoteSelect = $derived(customFilter?.type === CustomFilterType.Select);
 
-	let value: SelectOption<unknown> | unknown | null | undefined = $state(null);
+	let value: /*SelectOption<unknown> |*/ unknown /*| null | undefined*/ = $state(null);
 	let valueMin: number | null = $state(null);
 	let valueMax: number | null = $state(null);
 
@@ -105,19 +51,15 @@
 	// );
 
 	const isSearchable = $derived(
-		def.allowFiltering != false && (hasFilterFn || customFilters?.has(def.id) == true)
+		def.allowFiltering && (hasFilterFn || customFilters?.has(def.id) == true)
 		// ((hasFilterFn && hasAcceptableColumnType) || customFilters?.has(def.id) == true) // removed hasAcceptableColumnType due to it being redundant
 	);
 
-	const hasQuery = $derived(isRemoteSelect && customFilter?.query);
-
 	const isSelect = $derived(
 		def instanceof SelectDef || customFilter?.type === CustomFilterType.Select
 	);
 
-	const options = $derived(
-		isSelect ? ((def as SelectDef<T>)?.getOptions?.() ?? customFilter?.options ?? []) : []
-	);
+	const options = $derived(isSelect ? (def.getOptions?.() ?? customFilter?.options ?? []) : []);
 
 	let optionsPromise: Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>> = $state(
 		[] as Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>
@@ -148,7 +90,7 @@
 			console.log('filtering state value:', $state.snapshot(filteringStateValue));
 		}
 
-		if (hasQuery) {
+		if (hasQuery(customFilter)) {
 			if (def.debug) {
 				console.log('has query');
 			}
@@ -161,13 +103,7 @@
 						if (def.debug) {
 							console.log(`query values:`, tableContext.dataRepo.__queryValues);
 						}
-						const x = tableContext.dataRepo.__queryValues.get(
-							customFilter?.id ??
-								customFilter?.label ??
-								customFilter?.objectName ??
-								customFilter?.queryKey ??
-								def.id
-						);
+						const x = await tableContext.dataRepo.__queryValues.get(customFilter.id);
 
 						if (def.debug) {
 							console.log('value:', $state.snapshot(x));
@@ -183,7 +119,7 @@
 					console.warn(e);
 					value = null;
 				}
-			});
+			}).catch(devCatch);
 		} else if (isSelect) {
 			if (def.debug) {
 				console.log('is select (not query)');
@@ -196,9 +132,9 @@
 					}
 					const x = opts.filter((it) => {
 						if (it.value != null && (typeof it.value == 'string' || typeof it.value == 'number')) {
-							return (
-								filteringStateValue as unknown as Array<string | number> | undefined
-							)?.includes(it.value);
+							return (filteringStateValue as Array<string | number> | undefined)?.includes(
+								it.value
+							);
 						}
 						return false;
 					});
@@ -211,10 +147,10 @@
 						console.log(e);
 					}
 				}
-			});
+			}).catch(devCatch);
 		} else if (isNumeric) {
 			if (
-				selectedNumberFilterType.value === NumberDateFilterMode.Between &&
+				selectedNumberFilterType?.value === NumberDateFilterMode.Between &&
 				tableContext.paginationRepo?.filtering
 			) {
 				if (filteringStateValue != undefined) {
@@ -252,17 +188,17 @@
 	onMount(() => {
 		const filterOption =
 			tableContext.paginationRepo?.filtering &&
-			tableContext.paginationRepo?.filtering.find((it) => it.id === def.id);
+			tableContext.paginationRepo.filtering.find((it) => it.id === def.id);
 
 		if (filterOption) {
-			if (Array.isArray(filterOption.value)) {
+			if (isNumberTuple(filterOption.value)) {
 				[valueMin, valueMax] = filterOption.value;
 				if (valueMax == undefined) {
 					valueMax = valueMin;
 				} else if (valueMin == undefined) {
 					valueMin = valueMax;
 				}
-			} else if (!hasQuery) {
+			} else if (!hasQuery(customFilter)) {
 				const gotValue = filterOption.value;
 				if (gotValue == null || typeof gotValue == 'string' || typeof gotValue == 'number') {
 					value = gotValue;
@@ -279,14 +215,14 @@
 		// 	(filterMode as StringFilterMode | undefined) ?? StringFilterMode.Contains;
 	});
 
-	const filterMode = $derived(tableContext.paginationRepo?.filterModes?.get(def.id));
-	const selectedNumberFilterType: SelectOption<NumberDateFilterMode> = $derived.by(() => {
+	const filterMode = $derived(tableContext.paginationRepo?.filterModes.get(def.id));
+	const selectedNumberFilterType: SelectOption<NumberDateFilterMode> | null = $derived.by(() => {
 		const value = (filterMode as NumberDateFilterMode | undefined) ?? NumberDateFilterMode.In;
-		return numberDateFilterTypes.find((it) => it.value === value)!;
+		return numberDateFilterTypes.find((it) => it.value === value) ?? null;
 	});
-	const selectedStringFilterType: SelectOption<StringFilterMode> = $derived.by(() => {
+	const selectedStringFilterType: SelectOption<StringFilterMode> | null = $derived.by(() => {
 		const value = (filterMode as StringFilterMode | undefined) ?? StringFilterMode.Contains;
-		return stringFilterTypes.find((it) => it.value === value)!;
+		return stringFilterTypes.find((it) => it.value === value) ?? null;
 	});
 
 	// let selectedNumberFilterType: NumberDateFilterMode = $state(NumberDateFilterMode.In);
@@ -322,8 +258,8 @@
 	<div class="row">
 		{#if def instanceof DateInputDef}
 			{@const dateValues =
-				tableContext.paginationRepo?.filtering?.find((it) => it.id === def.id)?.value ?? []}
-			{#if Array.isArray(dateValues)}
+				tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value ?? []}
+			{#if isDateTuple(dateValues)}
 				{@const [fromDate, toDate] = dateValues}
 				<div class="spaced-around">
 					<Button
@@ -382,7 +318,7 @@
 						name={customFilter?.objectName ?? 'Item'}
 						{options}
 						valueAsObject={false}
-						onchange={(e) => {
+						onchange={(e: Array<SelectOption<unknown>>) => {
 							tableContext.paginationRepo?.filterBy(
 								def.id,
 								e.map((it) => it.value)
@@ -393,20 +329,19 @@
 					/>
 				{:catch e}
 					<span>Error retrieving options: {e.message}</span>
-					<Button onclick={() => retryOptionsPromise()}>Retry</Button>
+					<Button
+						onclick={() => {
+							retryOptionsPromise();
+						}}>Retry</Button
+					>
 				{/await}
 			</div>
-		{:else if isRemoteSelect}
+		{:else if customFilter && isRemoteSelect}
 			<div class="contents">
 				{#await options then options}
-					{#if hasQuery}
-						{#if customFilter!.valueAsObject !== true}
-							{@const label =
-								customFilter?.id ??
-								customFilter?.label ??
-								customFilter?.objectName ??
-								customFilter?.queryKey ??
-								def.id}
+					{#if hasQuery(customFilter)}
+						{#if customFilter.valueAsObject !== true}
+							{@const label = customFilter.id}
 
 							<!-- TODO: multiselect -->
 
@@ -414,21 +349,16 @@
 								valueAsObject={false}
 								{label}
 								clearable
-								name={customFilter?.objectName ?? 'Item'}
+								name={customFilter.objectName ?? 'Item'}
 								valueProp="value"
 								labelProp="label"
 								value={value as string | number | null}
-								query={customFilter!.query!}
+								query={customFilter.query}
 								bind:options={lastQueryOptions}
 								onchange={generateOnChangePrimitive(label)}
 							/>
 						{:else}
-							{@const label =
-								customFilter?.id ??
-								customFilter?.label ??
-								customFilter?.objectName ??
-								customFilter?.queryKey ??
-								def.id}
+							{@const label = customFilter.id}
 
 							<!-- TODO: multiselect -->
 
@@ -436,28 +366,24 @@
 								valueAsObject={true}
 								{label}
 								clearable
-								name={customFilter?.objectName ?? 'Item'}
+								name={customFilter.objectName ?? 'Item'}
 								valueProp="value"
 								labelProp="label"
 								value={value as null}
-								query={customFilter!.query!}
+								query={customFilter.query}
 								bind:options={lastQueryOptions}
 								onchange={generateOnChangeObject(label)}
 							/>
 						{/if}
 					{:else}
 						<MultiSelect
-							label={customFilter?.id ??
-								customFilter?.label ??
-								customFilter?.objectName ??
-								customFilter?.queryKey ??
-								def.id}
+							label={customFilter.id}
 							labelProp="label"
 							valueProp="value"
-							name={customFilter?.objectName ?? 'Item'}
+							name={customFilter.objectName ?? 'Item'}
 							{options}
 							valueAsObject={false}
-							onchange={(e) => {
+							onchange={(e: Array<SelectOption<unknown>>) => {
 								tableContext.paginationRepo?.filterBy(
 									def.id,
 									e.map((it) => it.value)
@@ -506,25 +432,25 @@
 				</label>
 			</div>
 		{:else if isNumeric}
+			{@const label = typeof def.header === 'string' ? def.header : undefined}
 			<div class="left">
 				<SingleSelect
-					label={def.header?.toString() ?? def.id}
-					virtual
+					{label}
 					name="Filter Type"
 					options={numberDateFilterTypes}
 					labelProp="label"
 					valueProp="value"
 					valueAsObject
 					value={selectedNumberFilterType}
-					onchange={(newValue) => {
+					onchange={(newValue: SelectOption<NumberDateFilterMode> | null) => {
 						const oldFilterType = selectedNumberFilterType;
 
 						const newFilterType = newValue?.value ?? NumberDateFilterMode.In;
 						tableContext.paginationRepo?.setFilterMode(def.id, newFilterType);
-						tableContext.paginationRepo?.filterModes?.set(def.id, newFilterType);
+						tableContext.paginationRepo?.filterModes.set(def.id, newFilterType);
 
-						if (selectedNumberFilterType.value !== oldFilterType.value) {
-							if (oldFilterType.value === NumberDateFilterMode.Between) {
+						if (selectedNumberFilterType?.value !== oldFilterType?.value) {
+							if (oldFilterType?.value === NumberDateFilterMode.Between) {
 								valueMax = null;
 								tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMin]);
 							}
@@ -536,7 +462,7 @@
 							// TODO what about the other modes?
 						}
 					}}
-					onkeydown={(e) => {
+					onkeydown={(e: KeyboardEvent) => {
 						e.stopPropagation();
 					}}
 				/>
@@ -549,7 +475,7 @@
 						oninput={() => {
 							tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
 						}}
-						onkeydown={(e) => {
+						onkeydown={(e: KeyboardEvent) => {
 							e.stopPropagation();
 						}}
 					/>
@@ -560,7 +486,7 @@
 						oninput={() => {
 							tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
 						}}
-						onkeydown={(e) => {
+						onkeydown={(e: KeyboardEvent) => {
 							e.stopPropagation();
 						}}
 					/>
@@ -571,31 +497,33 @@
 						oninput={() => {
 							tableContext.paginationRepo?.filterBy(def.id, [value]);
 						}}
-						onkeydown={(e) => {
+						onkeydown={(e: KeyboardEvent) => {
 							e.stopPropagation();
 						}}
 					/>
-				{:else}
+				{:else if dev}
+					error: {value?.toString()}
+					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
 					{@debug value}
 				{/if}
 			</div>
 		{:else}
+			{@const label = typeof def.header === 'string' ? def.header : undefined}
 			<div class="left">
 				<SingleSelect
 					name="Filter Type"
 					valueAsObject
-					virtual
-					label={def.header?.toString() ?? def.id}
+					{label}
 					options={stringFilterTypes}
 					labelProp="label"
 					valueProp="value"
 					value={selectedStringFilterType}
-					onchange={(newValue) => {
+					onchange={(newValue: SelectOption<StringFilterMode> | null) => {
 						const filterType = newValue?.value ?? StringFilterMode.Contains;
 						tableContext.paginationRepo?.setFilterMode(def.id, filterType);
-						tableContext.paginationRepo?.filterModes?.set(def.id, filterType);
+						tableContext.paginationRepo?.filterModes.set(def.id, filterType);
 					}}
-					onkeydown={(e) => {
+					onkeydown={(e: KeyboardEvent) => {
 						e.stopPropagation();
 					}}
 				/>
@@ -608,11 +536,13 @@
 						oninput={() => {
 							tableContext.paginationRepo?.filterBy(def.id, value);
 						}}
-						onkeydown={(e) => {
+						onkeydown={(e: KeyboardEvent) => {
 							e.stopPropagation();
 						}}
 					/>
-				{:else}
+				{:else if dev}
+					error: {value?.toString()}
+					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
 					{@debug value}
 				{/if}
 			</div>

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

@@ -1,19 +1,4 @@
-import type { CustomRemoteFilters } from '../Types/Filtering/CustomRemoteFilters.js';
-import { NumberDateFilterMode } from '../Types/Filtering/NumberDateFilterMode.js';
-import { StringFilterMode } from '../Types/Filtering/StringFilterMode.js';
-import type { ColumnDef } from '../Types/Columns/Definitions/ColumnDef.svelte.js';
-export declare const stringFilterTypes: {
-    value: StringFilterMode;
-    label: string;
-}[];
-export declare const numberDateFilterTypes: {
-    value: NumberDateFilterMode;
-    label: string;
-}[];
-export interface FilterInputProps<T extends object> {
-    def: ColumnDef<T>;
-    customFilters?: CustomRemoteFilters | undefined;
-}
+import type { FilterInputProps } from './FilterInputProps.js';
 declare function $$render<T extends object>(): {
     props: FilterInputProps<T>;
     exports: {};

package/dist/Components/Table/Misc/FilterInputProps.d.ts

@@ -0,0 +1,6 @@
+import type { ColumnDef } from '../Types/Columns/Definitions/ColumnDef.svelte.js';
+import type { CustomRemoteFilters } from '../Types/Filtering/CustomRemoteFilters.js';
+export interface FilterInputProps<T extends object> {
+    def: ColumnDef<T>;
+    customFilters?: CustomRemoteFilters | undefined;
+}

package/dist/Components/Table/Misc/FilterInputProps.js

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