@lavalogic/scoria 0.0.38 → 0.0.39

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

@@ -71,8 +71,8 @@
 	);
 	const options = $derived(
 		isSelect
-			? ((def as SelectDef<T>)?.getAllOptions?.() ??
-					(def as SelectDef<T>).getOptions?.() ??
+			? ((def as SelectDef<T>)?.getOptions?.() ??
+					(def as SelectDef<T>).getSpecificOptions?.() ??
 					customFilter?.options ??
 					[])
 			: []
@@ -91,12 +91,12 @@
 
 	const isSelectOpen = $derived(openedSelect?.value === selectSymbol);
 
-	let value: SelectOption<string | number> | string | number | null | undefined = $state(null);
+	let value: SelectOption<unknown> | string | number | null | undefined = $state(null);
 	let valueMin: number | null = $state(null);
 	let valueMax: number | null = $state(null);
 
-	let selectedOptions: Array<SelectOption<string | number>> = $state([]);
-	let lastQueryOptions: Array<SelectOption<string | number>> = $state([]);
+	let selectedOptions: Array<SelectOption<unknown>> = $state([]);
+	let lastQueryOptions: Array<SelectOption<unknown>> = $state([]);
 
 	const inputId = $derived(`${tableContext.tableName}-cell-quicksearch-${column.id}`);
 
@@ -123,7 +123,7 @@
 		if (hasQuery) {
 			untrack(async () => {
 				const gotValue = filteringStateValue as unknown as
-					| Array<string | number | SelectOption<string | number>>
+					| Array<string | number | SelectOption<unknown>>
 					| undefined;
 
 				try {
@@ -132,7 +132,7 @@
 					if (gotValue != undefined) {
 						const key = customFilter?.label ?? customFilter?.objectName ?? customFilter?.queryKey;
 						const x = key == null ? null : tableContext.__queryValues.get(key);
-						value = (x ?? null) as SelectOption<string | number> | null;
+						value = (x ?? null) as SelectOption<unknown> | null;
 					}
 				} catch (e) {
 					console.warn(e);
@@ -145,12 +145,20 @@
 			}
 
 			const gotValue = filteringStateValue as unknown as
-				| Array<string | number | SelectOption<string | number>>
+				| Array<string | number | SelectOption<unknown>>
 				| undefined;
 
 			untrack(async () => {
 				const x = (await options).filter((it) => {
-					return (gotValue as unknown as Array<string | number> | undefined)?.includes(it.value);
+					if (it.value == undefined) {
+						return true;
+					}
+
+					if (typeof it.value == 'string' || typeof it.value == 'number') {
+						return (gotValue as unknown as Array<string | number> | undefined)?.includes(it.value);
+					}
+
+					return false;
 				});
 				selectedOptions = x;
 			});
@@ -296,7 +304,7 @@
 							onchange={(newValue) => {
 								tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
 								tableContext.__queryValues.set(label, newValue);
-								value = newValue as SelectOption<string | number> | null;
+								value = newValue as SelectOption<unknown> | null;
 							}}
 						/>
 					{:else}

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

@@ -1,14 +1,9 @@
 <svelte:options runes />
 
 <script lang="ts" module>
-	export interface TableSelectProps<T extends object> {
-		cell: TableCell<T>;
-	}
-</script>
-
-<script lang="ts" generics="T extends object">
 	import { dev } from '$app/environment';
 	import SingleSelect from '../../../../SingleSelect.svelte';
+	import type { Column } from '../../../Types/Columns/Column.js';
 	import type { SelectDef } from '../../../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
 	import type { TableCell } from '../../../Types/Columns/TableCell.js';
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
@@ -16,13 +11,29 @@
 	import { ToastContext } from '../../../../../Contexts/ToastContext.svelte.js';
 	import type { SelectOption } from '../../../../../Types/Internal/SelectOption.js';
 	import { Validity } from '../../../../../Types/Internal/Validity.js';
-	import { getContext, tick, untrack, onMount } from 'svelte';
+	import { getContext, tick, untrack } from 'svelte';
+
+	export interface SelectColumn<T extends object> extends Column<T> {
+		columnDef: SelectDef<T>;
+	}
+	export interface SelectTableCell<T extends object> extends TableCell<T> {
+		column: SelectColumn<T>;
+	}
+	export interface TableSelectProps<T extends object> {
+		cell: SelectTableCell<T>;
+	}
+</script>
 
+<script lang="ts" generics="T extends object">
 	const { cell }: TableSelectProps<T> = $props();
 
 	let tdref = $state<HTMLTableCellElement | undefined>();
 
-	const value = $derived(cell.getValue());
+	const selectValue = $derived(cell.getValue());
+
+	const visibleValue = $derived(
+		cell.column.columnDef.getDisplayValue(cell.row.original, cell.row.originalIndex)
+	);
 
 	const optional = $derived((cell.column.columnDef as SelectDef<T>).optional ?? false);
 
@@ -76,42 +87,12 @@
 	});
 
 	const optionsPromise = $derived(
-		(cell.column.columnDef as SelectDef<T>).getOptions(
+		cell.column.columnDef.getSpecificOptions?.(
 			cell.row.original,
 			focusDetails.coordinates.column
-		)
+		) ?? cell.column.columnDef.getOptions()
 	);
 
-	const valuePromise = $derived(getValueFromOptions(optionsPromise, value));
-
-	async function getValueFromOptions(
-		optionsPromise: Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>,
-		value: unknown
-	): Promise<SelectOption<unknown> | null> {
-		void value;
-		void optionsPromise;
-
-		if (value == null) {
-			return null;
-		}
-		const options = await optionsPromise;
-		value = await value;
-
-		if (typeof value === typeof options[0]?.value) {
-			const foundOption = options.find((it) => it.value === value);
-			return foundOption ?? null;
-		} else if (typeof value === typeof options[0]?.label) {
-			const foundOption = options.find((it) => it.label === value);
-			return foundOption ?? null;
-		}
-
-		if (dev) {
-			console.warn('could not match value to any type:', value);
-		}
-
-		return null;
-	}
-
 	let previousValidity: Validity = $state(Validity.Valid);
 	let validity: Validity = $state(Validity.Valid);
 	$effect(() => {
@@ -217,21 +198,21 @@
 	<!-- onkeydown={handleInputKeydown} -->
 	<!-- onkeydown={handleEsc} -->
 	<td class="select-cell" bind:this={tdref}>
-		{#await Promise.all([optionsPromise, valuePromise, value])}
+		{#await Promise.all([optionsPromise, selectValue])}
 			loading…
-		{:then [options, valueAsObject, value]}
+		{:then [options, value]}
 			<SingleSelect
 				focusOnLoad
 				name="Item"
 				valueProp="value"
 				labelProp="label"
-				value={valueAsObject}
+				value={selectValue}
 				{options}
 				width="100%"
 				clearable={optional}
 				onfocus={addKeydownEvent}
-				valueAsObject
-				onchange={(newValue) => {
+				valueAsObject={false}
+				onchange={(newValue: SelectOption<unknown> | null) => {
 					if (newValue?.value !== value) {
 						if (optional || newValue?.value != null) {
 							tableContext.onEditCell(cell.row.original, focusDetails.coordinates, newValue?.value);
@@ -284,10 +265,10 @@
 			// eslint-disable-next-line @typescript-eslint/no-unused-expressions
 			handleSingleClick() || tableContext.endFocus(focusDetails.coordinates);
 		}}
-		>{#await Promise.all([valuePromise])}
+		>{#await visibleValue}
 			loading…
-		{:then [value]}
-			{value?.label ?? '-'}
+		{:then value}
+			{value ?? '-'}
 		{:catch e}
 			{@debug e}
 			Could not retrieve options

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

@@ -1,7 +1,15 @@
+import type { Column } from '../../../Types/Columns/Column.js';
+import type { SelectDef } from '../../../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
+import type { TableCell } from '../../../Types/Columns/TableCell.js';
+export interface SelectColumn<T extends object> extends Column<T> {
+    columnDef: SelectDef<T>;
+}
+export interface SelectTableCell<T extends object> extends TableCell<T> {
+    column: SelectColumn<T>;
+}
 export interface TableSelectProps<T extends object> {
-    cell: TableCell<T>;
+    cell: SelectTableCell<T>;
 }
-import type { TableCell } from '../../../Types/Columns/TableCell.js';
 declare function $$render<T extends object>(): {
     props: TableSelectProps<T>;
     exports: {};

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

@@ -113,6 +113,7 @@ export class ExampleItemColumnDef {
                         }
                     ];
                 },
+                getDisplayValue: (item) => item.someSelect,
                 editable: true
             }),
             new BubbleDef({

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

@@ -90,11 +90,11 @@
 	const isRemoteSelect = $derived(customFilter?.type === CustomFilterType.Select);
 	const isValueAsObject = $derived(!(customFilter?.valueAsObject == false));
 
-	let value: SelectOption<string | number> | string | number | null | undefined = $state(null);
+	let value: SelectOption<unknown> | string | number | null | undefined = $state(null);
 	let valueMin: number | null = $state(null);
 	let valueMax: number | null = $state(null);
 
-	let selectedOptions: Array<SelectOption<string | number>> = $state([]);
+	let selectedOptions: Array<SelectOption<unknown>> = $state([]);
 	let lastQueryOptions: Array<SelectOption<unknown>> = $state([]);
 
 	const isNumeric = $derived(
@@ -120,17 +120,15 @@
 
 	const options = $derived(
 		isSelect
-			? ((def as SelectDef<T>)?.getAllOptions?.() ??
-					(def as SelectDef<T>).getOptions?.() ??
+			? ((def as SelectDef<T>)?.getOptions?.() ??
+					(def as SelectDef<T>).getSpecificOptions?.() ??
 					customFilter?.options ??
 					[])
 			: []
 	);
 
-	let optionsPromise:
-		| Array<SelectOption<string | number>>
-		| Promise<Array<SelectOption<string | number>>> = $state(
-		[] as Array<SelectOption<string | number>> | Promise<Array<SelectOption<string | number>>>
+	let optionsPromise: Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>> = $state(
+		[] as Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>
 	);
 
 	onMount(() => {
@@ -138,7 +136,7 @@
 	});
 
 	function retryOptionsPromise() {
-		optionsPromise = def instanceof SelectDef ? (def.getAllOptions?.() ?? def.getOptions()) : [];
+		optionsPromise = def instanceof SelectDef ? def.getOptions() : [];
 	}
 
 	// function isNumber(def: ColumnDef<T>): def is INumberInputColumnAccessorDef<T> {
@@ -164,7 +162,7 @@
 						const x = tableContext.__queryValues.get(
 							customFilter?.label ?? customFilter?.objectName ?? customFilter?.queryKey ?? _uuid
 						);
-						value = (x ?? null) as SelectOption<string | number> | null;
+						value = (x ?? null) as SelectOption<unknown> | null;
 					}
 				} catch (e) {
 					console.warn(e);
@@ -175,9 +173,12 @@
 			untrack(async () => {
 				try {
 					const x = (await options).filter((it) => {
-						return (filteringStateValue as unknown as Array<string | number> | undefined)?.includes(
-							it.value
-						);
+						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 false;
 					});
 					selectedOptions = x;
 				} catch (e) {
@@ -370,7 +371,7 @@
 								onchange={(newValue) => {
 									tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
 									tableContext.__queryValues.set(label ?? _uuid, newValue);
-									value = newValue as SelectOption<string | number> | null;
+									value = newValue as SelectOption<unknown> | null;
 								}}
 							/>
 						{:else}

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

@@ -1,5 +1,5 @@
 import type { ColumnDef } from './Definitions/ColumnDef.svelte.js';
-export interface Column<T extends object & object> {
+export interface Column<T extends object> {
     id: string;
     columnDef: ColumnDef<T, any>;
     getCanSort: () => boolean;

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

@@ -2,16 +2,18 @@ import type { SelectOption } from '../../../../../../Types/Internal/SelectOption
 import type { ColumnDefProps } from '../ColumnDef.svelte.js';
 import { AccessorDef } from './AccessorDef.svelte.js';
 export interface SelectDefProps<T extends object> extends ColumnDefProps<T> {
-    getOptions: (item?: T, index?: number) => Array<SelectOption<string | number>> | Promise<Array<SelectOption<string | number>>>;
-    getAllOptions?: () => Promise<Array<SelectOption<string | number>>>;
+    getOptions: () => Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>;
+    getDisplayValue: (item: T, index: number) => string | null | Promise<string | null>;
     sortingFn?: (a: T, b: T) => 1 | -1 | 0;
-    optional: boolean;
+    getSpecificOptions?: (item?: T, index?: number) => Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>;
+    optional?: boolean;
 }
 export declare class SelectDef<T extends object> extends AccessorDef<T, T> {
     constructor(props: SelectDefProps<T>);
     readonly accessorType: "Select";
     readonly sortingFn?: (a: T, b: T) => 1 | -1 | 0;
+    readonly getDisplayValue: (item: T, index: number) => string | null | Promise<string | null>;
     readonly optional: boolean;
-    readonly getOptions: (item?: T, index?: number) => Array<SelectOption<string | number>> | Promise<Array<SelectOption<string | number>>>;
-    readonly getAllOptions?: () => Promise<Array<SelectOption<string | number>>>;
+    readonly getSpecificOptions?: (item?: T, index?: number) => Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>;
+    readonly getOptions: () => Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>;
 }

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

@@ -3,14 +3,16 @@ 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.getAllOptions = $derived(props.getAllOptions);
         this.sortingFn = $derived(props.sortingFn);
-        this.optional = $derived(props.optional);
+        this.optional = $derived(props.optional ?? false);
+        this.getDisplayValue = $derived(props.getDisplayValue);
     }
     accessorType = AccessorType.Select;
     sortingFn;
+    getDisplayValue;
     optional;
+    getSpecificOptions;
     getOptions;
-    getAllOptions;
 }

package/dist/Components/Table/Types/Columns/Definitions/Actions/ActionsDef.svelte.js

@@ -6,7 +6,7 @@ export class ActionsDef extends ColumnDef {
         super({
             id: `actions-${generateUUID()}`,
             header: 'Actions',
-            enableSorting: false
+            allowSorting: false
         });
         this.actions = $derived(props.actions);
         this.isEnabled = $derived(props.isEnabled);

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

@@ -10,7 +10,8 @@ export interface ColumnDefProps<T extends object> {
     id: string;
     header: string | Snippet;
     index?: number;
-    enableSorting?: boolean;
+    allowFiltering?: boolean;
+    allowSorting?: boolean;
     defaultHidden?: boolean;
     minSize?: Pixels;
     width?: Pixels;
@@ -29,7 +30,8 @@ export declare abstract class ColumnDef<T extends object, __filterValueType = un
     set index(v: number);
     abstract readonly columnType: ColumnType;
     readonly defaultHidden: boolean;
-    readonly enableSorting: boolean;
+    readonly allowSorting: boolean;
+    readonly allowFiltering: boolean;
     readonly isValid: ValidationFn<T> | undefined;
     readonly accessorFn: AccessorFn<T> | undefined;
     private _filterFn;

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

@@ -4,7 +4,8 @@ export class ColumnDef {
         this.id = $derived(props.id);
         this._index = $state(props.index ?? 0); // HACK this may prove problematic and be turned to a required property
         this.defaultHidden = $derived(props.defaultHidden ?? false);
-        this.enableSorting = $derived(props.enableSorting ?? true);
+        this.allowFiltering = $derived(props.allowFiltering ?? true);
+        this.allowSorting = $derived(props.allowSorting ?? true);
         this.isValid = $derived(props.isValid);
         this._filterFn = $state(props.filterFn);
         this.accessorFn = $derived(props.accessorFn);
@@ -24,7 +25,8 @@ export class ColumnDef {
         this._index = v;
     }
     defaultHidden;
-    enableSorting;
+    allowSorting;
+    allowFiltering;
     isValid;
     accessorFn;
     _filterFn;
@@ -64,7 +66,7 @@ export class ColumnDef {
         return this._visible;
     }
     set visible(v) {
-        if (v && !this.enableSorting) {
+        if (v && !this.allowSorting) {
             console.warn(`Column ${this.id} is not sortable`);
             return;
         }

package/dist/Components/Table/Types/Columns/Definitions/Display/ValidityDef.svelte.js

@@ -3,7 +3,7 @@ import { DisplayType } from '../../DisplayType.js';
 export class ValidityDef extends AbstractDisplayDef {
     displayType = DisplayType.Validity;
     constructor(props) {
-        props.enableSorting = false;
+        props.allowSorting = false;
         super(props);
         this.isValid = $derived(props.isValid);
     }

package/dist/Components/Table/Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js

@@ -8,7 +8,7 @@ export class RowSelectionDef extends ColumnDef {
         super({
             id: `is-selectable-${generateUUID()}`,
             header: 'Row Selected',
-            enableSorting: false
+            allowSorting: false
         });
         this.isSelectable = isSelectable;
     }

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

@@ -4,5 +4,5 @@ export interface TableCell<T extends object> {
     column: Column<T>;
     row: Row<T>;
     id: string;
-    getValue: () => unknown;
+    getValue: () => unknown | Promise<unknown>;
 }

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

@@ -615,11 +615,11 @@ export class TableContext {
                 return {
                     column: {
                         columnDef: def,
-                        getCanSort: () => def.enableSorting,
+                        getCanSort: () => def.allowSorting,
                         getIsResizing: () => def.isResizing,
                         getIsSorted: () => isSorted,
                         getIsVisible: () => isVisible,
-                        getToggleSortingHandler: () => def.enableSorting ? this.getToggleSortingHandler(def) : undefined,
+                        getToggleSortingHandler: () => def.allowSorting ? this.getToggleSortingHandler(def) : undefined,
                         id: def.id
                     },
                     id: `${index}_${def.id}`,
@@ -1038,7 +1038,7 @@ export class TableContext {
     measureHeaderWidth = (columnDef) => {
         const label = columnDef.header;
         if (typeof label === 'string' && localStorage) {
-            const extraWidth = columnDef.enableSorting ? SORTING_ICON_WIDTH : 0;
+            const extraWidth = columnDef.allowSorting ? SORTING_ICON_WIDTH : 0;
             const canvasContext = getCanvasContext();
             if (canvasContext) {
                 const headerWidth = Math.ceil(extraWidth + canvasContext.measureText(`pad${label}pad`).width);
@@ -1166,7 +1166,7 @@ export class TableContext {
                 const col = affectedColumns[i];
                 if (col instanceof SelectDef) {
                     const item = items[i];
-                    selectColumns.set(i, await col.getOptions(item, indicesByItem.get(item)));
+                    selectColumns.set(i, await (col.getSpecificOptions?.(item, indicesByItem.get(item)) ?? col.getOptions()));
                 }
             }
             const separator = this.commaSeparatedCopy ? ',' : '\t';
@@ -1588,11 +1588,11 @@ export class TableContext {
             return {
                 column: {
                     columnDef: def,
-                    getCanSort: () => def.enableSorting,
+                    getCanSort: () => def.allowSorting,
                     getIsResizing: () => def.isResizing,
                     getIsSorted: () => isSorted,
                     getIsVisible: () => isVisible,
-                    getToggleSortingHandler: () => def.enableSorting ? this.getToggleSortingHandler(def) : undefined,
+                    getToggleSortingHandler: () => def.allowSorting ? this.getToggleSortingHandler(def) : undefined,
                     id: def.id
                 },
                 id: `${index}_${def.id}`,
@@ -2097,8 +2097,8 @@ function generateTableOptions(contextObj) {
                 id: def.id,
                 getIsResizing: () => def.isResizing,
                 columnDef: def,
-                getCanSort: () => def.enableSorting,
-                getToggleSortingHandler: () => def.enableSorting ? contextObj.getToggleSortingHandler(def) : undefined,
+                getCanSort: () => def.allowSorting,
+                getToggleSortingHandler: () => def.allowSorting ? contextObj.getToggleSortingHandler(def) : undefined,
                 getIsSorted: () => isSorted,
                 getIsVisible: () => isVisible
             },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "publishConfig": {
     "access": "restricted"
   },