@lavalogic/scoria 0.0.40 → 0.0.42

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

@@ -2,6 +2,7 @@
 
 <script lang="ts" module>
 	import QuerySelect from '../../../../QuerySelect.svelte';
+	import type { Column } from '../../../Types/Columns/Column.js';
 	import type { QueryDef } from '../../../Types/Columns/Definitions/Accessors/QueryDef.svelte.js';
 	import type { TableCell } from '../../../Types/Columns/TableCell.js';
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
@@ -10,8 +11,17 @@
 	import type { SelectOption } from '../../../../../Types/Internal/SelectOption.js';
 	import { Validity } from '../../../../../Types/Internal/Validity.js';
 	import { getContext, tick, untrack } from 'svelte';
+
+	export interface TableQueryColumn<T extends object> extends Column<T> {
+		columnDef: QueryDef<T>;
+	}
+
+	export interface TableQueryCell<T extends object> extends TableCell<T> {
+		column: TableQueryColumn<T>;
+	}
+
 	export interface TableQuerySelectProps<T extends object> {
-		cell: TableCell<T>;
+		cell: TableQueryCell<T>;
 	}
 </script>
 
@@ -22,6 +32,10 @@
 		(cell.getValue() ?? null) as SelectOption<unknown> | Promise<SelectOption<unknown>> | null
 	);
 
+	const visibleValue = $derived(
+		cell.column.columnDef.getDisplayValue(cell.row.original, cell.row.originalIndex)
+	);
+
 	let tdref = $state<HTMLTableCellElement | undefined>();
 
 	const columnDef: QueryDef<T> = $derived(cell.column.columnDef) as unknown as QueryDef<T>; // TODO stabilise and remove `as unknown`
@@ -211,6 +225,7 @@
 				focusOnLoad
 				name={cell.column.columnDef.id}
 				valueProp="value"
+				clearable={cell.column.columnDef.clearable ?? true}
 				labelProp="label"
 				valueAsObject={columnDef.valueAsObject}
 				{value}
@@ -269,7 +284,7 @@
 			}
 		}}
 	>
-		{#await value}
+		{#await visibleValue}
 			loading…
 		{:then v}
 			{v}

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

@@ -1,6 +1,14 @@
+import type { Column } from '../../../Types/Columns/Column.js';
+import type { QueryDef } from '../../../Types/Columns/Definitions/Accessors/QueryDef.svelte.js';
 import type { TableCell } from '../../../Types/Columns/TableCell.js';
+export interface TableQueryColumn<T extends object> extends Column<T> {
+    columnDef: QueryDef<T>;
+}
+export interface TableQueryCell<T extends object> extends TableCell<T> {
+    column: TableQueryColumn<T>;
+}
 export interface TableQuerySelectProps<T extends object> {
-    cell: TableCell<T>;
+    cell: TableQueryCell<T>;
 }
 declare function $$render<T extends object>(): {
     props: TableQuerySelectProps<T>;

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

@@ -1,7 +1,6 @@
 <svelte:options runes />
 
 <script lang="ts" module>
-	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';
@@ -209,7 +208,7 @@
 				value={selectValue}
 				{options}
 				width="100%"
-				clearable={optional}
+				clearable={cell.column.columnDef.clearable}
 				onfocus={addKeydownEvent}
 				valueAsObject={false}
 				onchange={(newValue: SelectOption<unknown> | null) => {

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

@@ -5,10 +5,14 @@ import { AccessorDef } from './AccessorDef.svelte.js';
 export interface QueryDefProps<T extends object> extends ColumnDefProps<T> {
     valueAsObject: boolean;
     query: (queryString: string, item: T, index: number) => Promise<Array<SelectOption<unknown>>>;
+    getDisplayValue: (item: T, index: number) => string | null | Promise<string | null>;
+    clearable?: boolean;
 }
 export declare class QueryDef<T extends object> extends AccessorDef<T, StringFilterValueType> {
     readonly accessorType: "Query";
     constructor(props: QueryDefProps<T>);
     readonly valueAsObject: boolean;
+    readonly getDisplayValue: (item: T, index: number) => string | null | Promise<string | null>;
     readonly query: (queryString: string, item: T, index: number) => Promise<Array<SelectOption<unknown>>>;
+    readonly clearable: boolean;
 }

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

@@ -6,7 +6,11 @@ export class QueryDef extends AccessorDef {
         super(props);
         this.valueAsObject = $derived(props.valueAsObject);
         this.query = $derived(props.query);
+        this.getDisplayValue = $derived(props.getDisplayValue);
+        this.clearable = $derived(props.clearable ?? true);
     }
     valueAsObject;
+    getDisplayValue;
     query;
+    clearable;
 }

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

@@ -7,6 +7,7 @@ export interface SelectDefProps<T extends object> extends ColumnDefProps<T> {
     sortingFn?: (a: T, b: T) => 1 | -1 | 0;
     getSpecificOptions?: (item?: T, index?: number) => Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>;
     optional?: boolean;
+    clearable?: boolean;
 }
 export declare class SelectDef<T extends object> extends AccessorDef<T, T> {
     constructor(props: SelectDefProps<T>);
@@ -14,6 +15,7 @@ export declare class SelectDef<T extends object> extends AccessorDef<T, T> {
     readonly sortingFn?: (a: T, b: T) => 1 | -1 | 0;
     readonly getDisplayValue: (item: T, index: number) => string | null | Promise<string | null>;
     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>>>;
 }

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

@@ -7,12 +7,14 @@ export class SelectDef extends AccessorDef {
         this.getOptions = $derived(props.getOptions);
         this.sortingFn = $derived(props.sortingFn);
         this.optional = $derived(props.optional ?? false);
+        this.clearable = $derived(props.clearable ?? true);
         this.getDisplayValue = $derived(props.getDisplayValue);
     }
     accessorType = AccessorType.Select;
     sortingFn;
     getDisplayValue;
     optional;
+    clearable;
     getSpecificOptions;
     getOptions;
 }

package/package.json

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