@lavalogic/scoria 0.0.31 → 0.0.33

package/dist/Components/Base/Pagination.svelte

@@ -12,6 +12,9 @@
 		snippet: Snippet<[T, number]>;
 		itemName?: string;
 		border?: boolean;
+		padding?: string;
+		gap?: string;
+		height?: string;
 	}
 </script>
 
@@ -22,7 +25,10 @@
 		pageSize = 20,
 		snippet,
 		itemName = 'Item',
-		border = false
+		border = false,
+		padding = '1.5rem', //sizing.$regular-padding
+		gap = '1.5rem', // sizing.$regular-gap
+		height
 	}: PaginationProps<T> = $props();
 
 	const _uuid = generateShortUUID();
@@ -80,7 +86,13 @@
 	</div>
 </div> -->
 
-<div class="wrapper" class:border>
+<div
+	class="wrapper"
+	class:border
+	style={`${padding ? `padding: ${padding};` : ''}` +
+		`${gap ? `gap: ${gap};` : ''}` +
+		`${height ? `height: ${height};` : ''}`}
+>
 	{#each pageItems as item, index (item[key])}
 		{@render snippet(item, index)}
 	{/each}
@@ -166,6 +178,8 @@
 <style>.wrapper {
   display: flex;
   flex: 1;
+  flex-flow: column nowrap;
+  overflow: scroll;
 }
 .wrapper.border {
   border: solid 3px #cbd4da;
@@ -186,9 +200,6 @@
   line-height: 1;
   bottom: 0;
 }
-.spread_row.limited {
-  overflow: hidden;
-}
 .spread_row .scrollable {
   display: flex;
   flex-flow: row nowrap;

package/dist/Components/Base/Pagination.svelte.d.ts

@@ -6,6 +6,9 @@ export interface PaginationProps<T extends object> {
     snippet: Snippet<[T, number]>;
     itemName?: string;
     border?: boolean;
+    padding?: string;
+    gap?: string;
+    height?: string;
 }
 declare function $$render<T extends object>(): {
     props: PaginationProps<T>;

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

@@ -34,6 +34,7 @@
 	import { AccessorDef } from '../Types/Columns/Definitions/Accessors/AccessorDef.svelte.js';
 	import { NumberInputDef } from '../Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js';
 	import { dev } from '$app/environment';
+	import { QuerySelect } from '../../../index.js';
 
 	export interface QuickSearchCellProps<T extends object> {
 		column: Column<T>;
@@ -77,6 +78,8 @@
 			: []
 	);
 	const isDate = $derived(def instanceof DateInputDef);
+	const isRemoteSelect = $derived(customFilter?.type === CustomFilterType.Select);
+	const hasQuery = $derived(isRemoteSelect && customFilter?.query);
 
 	let inputRef: HTMLInputElement | undefined = $state();
 
@@ -88,7 +91,7 @@
 
 	const isSelectOpen = $derived(openedSelect?.value === selectSymbol);
 
-	let value: string | number | null | undefined = $state(null);
+	let value: SelectOption<string | number> | string | number | null | undefined = $state(null);
 	let valueMin: number | null = $state(null);
 	let valueMax: number | null = $state(null);
 
@@ -98,6 +101,7 @@
 	);
 
 	let selectedOptions: Array<SelectOption<string | number>> = $state([]);
+	let lastQueryOptions: Array<SelectOption<unknown>> = $state([]);
 
 	const inputId = $derived(`${tableContext.tableName}-cell-quicksearch-${column.id}`);
 
@@ -118,22 +122,38 @@
 	}
 
 	$effect(() => {
-		if (isSelect) {
-			if (!tableContext.paginationRepo?.filtering) {
-				return;
-			}
-
+		if (hasQuery) {
 			untrack(async () => {
 				const gotValue = getFilteringStateValue() as unknown as
 					| Array<string | number | SelectOption<string | number>>
 					| undefined;
-				if (dev) {
-					// eslint-disable-next-line no-debugger
-					debugger;
-					return;
+
+				try {
+					//  as unknown as string | number | undefined;
+
+					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;
+					}
+				} catch (e) {
+					console.warn(e);
+					value = null;
 				}
-				//TODO redo the below in a more performant way if possible
-				const x = (await options).filter((it) => gotValue?.includes(it.value));
+			});
+		} else if (isSelect) {
+			if (!tableContext.paginationRepo?.filtering) {
+				return;
+			}
+
+			const gotValue = getFilteringStateValue() as unknown as
+				| Array<string | number | SelectOption<string | number>>
+				| undefined;
+
+			untrack(async () => {
+				const x = (await options).filter((it) => {
+					return (gotValue as unknown as Array<string | number> | undefined)?.includes(it.value);
+				});
 				selectedOptions = x;
 			});
 		} else if (isNumeric) {
@@ -186,7 +206,7 @@
 				} else {
 					value = valueMin?.toString();
 				}
-			} else {
+			} else if (!hasQuery) {
 				const gotValue = filterOption.value;
 				if (gotValue == null || typeof gotValue == 'string' || typeof gotValue == 'number') {
 					value = gotValue;
@@ -260,22 +280,49 @@
 					{/if}
 				{/if}
 			{:else if isSelect}
-				{#await options then options}
-					<MultiSelect
-						labelProp="label"
-						valueProp="value"
-						{options}
-						valueAsObject
-						onchange={(e) => {
-							tableContext.paginationRepo?.filterBy(
-								def.id,
-								e.map((it) => it.value)
-							);
-						}}
-						selectedValues={selectedOptions}
-						collapseSelection
-					/>
-				{/await}
+				{#if hasQuery}
+					{#if typeof value == 'object'}
+						{@const label =
+							customFilter!.label ?? customFilter?.objectName ?? customFilter!.queryKey!}
+						<!-- TODO: multiselect -->
+
+						<QuerySelect
+							valueAsObject
+							{label}
+							clearable
+							name={customFilter?.objectName ?? 'Item'}
+							valueProp="value"
+							labelProp="label"
+							selectedValue={value}
+							query={customFilter!.query!}
+							bind:options={lastQueryOptions}
+							onchange={(newValue) => {
+								console.log(newValue);
+								tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
+								tableContext.__queryValues.set(label, newValue);
+							}}
+						/>
+					{:else}
+						{@debug value}
+					{/if}
+				{:else}
+					{#await options then options}
+						<MultiSelect
+							labelProp="label"
+							valueProp="value"
+							{options}
+							valueAsObject
+							onchange={(e) => {
+								tableContext.paginationRepo?.filterBy(
+									def.id,
+									e.map((it) => it.value)
+								);
+							}}
+							selectedValues={selectedOptions}
+							collapseSelection
+						/>
+					{/await}
+				{/if}
 			{:else if isNumeric}
 				{#if selectedNumberFilterType.value === NumberDateFilterMode.Between}
 					<div class="input-wrapper left">
@@ -304,7 +351,7 @@
 							onkeydown={closeOnCtrlF}
 						/>
 					</div>
-				{:else if typeof value != 'number'}
+				{:else if value == null || typeof value == 'string'}
 					<div class="input-wrapper right">
 						<TextInput
 							data-type="quicksearch"
@@ -319,7 +366,7 @@
 						/>
 					</div>
 				{/if}
-			{:else if typeof value != 'number'}
+			{:else if value == null || typeof value == 'string'}
 				<div class="input-wrapper right">
 					<TextInput
 						data-type="quicksearch"

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

@@ -173,14 +173,9 @@
 					value = null;
 				}
 			});
-		} else if (def instanceof SelectDef) {
+		} else if (isSelect) {
 			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/package.json

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