windmill-components 1.122.0 → 1.138.2

package/package/components/apps/components/display/table/AppTable.svelte

@@ -15,6 +15,7 @@ import { initConfig, initOutput } from '../../../editor/appUtils';
 import ResolveConfig from '../../helpers/ResolveConfig.svelte';
 import AppCheckbox from '../../inputs/AppCheckbox.svelte';
 import AppSelect from '../../inputs/AppSelect.svelte';
+import RowWrapper from '../../layout/RowWrapper.svelte';
 export let id;
 export let componentInput;
 export let configuration;
@@ -22,6 +23,8 @@ export let actionButtons;
 export let initializing = undefined;
 export let customCss = undefined;
 export let render;
+const iterContext = getContext('ListWrapperContext');
+const listInputs = getContext('ListInputs');
 let result = undefined;
 const { app, worldStore, componentControl, selectedComponent, hoverStore, mode } = getContext('AppViewerContext');
 let searchValue = '';
@@ -30,9 +33,11 @@ let outputs = initOutput($worldStore, id, {
     selectedRow: undefined,
     loading: false,
     result: [],
+    inputs: {},
     search: '',
     page: 1
 });
+let inputs = {};
 $: setSearch(searchValue);
 function setSearch(srch) {
     outputs?.search?.set(srch);
@@ -52,6 +57,9 @@ function toggleRow(row, rowIndex, force = false) {
         selectedRowIndex = rowIndex;
         outputs?.selectedRow.set(row.original, force);
         outputs?.selectedRowIndex.set(rowIndex, force);
+        if (iterContext && listInputs) {
+            listInputs(id, { selectedRow: row.original, selectedRowIndex: rowIndex });
+        }
     }
 }
 let mounted = false;
@@ -104,6 +112,7 @@ function rerender() {
         ...(resolvedConfig?.pagination?.selected != 'manual'
             ? {
                 initialState: {
+                    ...resolvedConfig.initialState,
                     pagination: {
                         pageSize: resolvedConfig?.pagination?.configuration?.auto?.pageSize ?? 20
                     }
@@ -186,7 +195,7 @@ function safeVisibleCell(row) {
 	{#if Array.isArray(result) && result.every(isObject)}
 		<div
 			class={twMerge(
-				'border border-gray-300 shadow-sm divide-y divide-gray-300 h-full',
+				'border  shadow-sm divide-y h-full',
 				css?.container?.class ?? '',
 				'flex flex-col'
 			)}
@@ -203,10 +212,10 @@ function safeVisibleCell(row) {
 			{/if}
 
 			<div class="overflow-x-auto flex-1 w-full">
-				<table class="relative w-full border-b border-b-gray-200">
+				<table class="relative w-full border-b">
 					<thead
 						class={twMerge(
-							'bg-gray-50 text-left',
+							'bg-surface-secondary text-left',
 							css?.tableHeader?.class ?? '',
 							'sticky top-0 z-40'
 						)}
@@ -238,7 +247,7 @@ function safeVisibleCell(row) {
 						{/each}
 					</thead>
 					<tbody
-						class={twMerge('divide-y divide-gray-200 bg-white', css?.tableBody?.class ?? '')}
+						class={twMerge('divide-y bg-surface', css?.tableBody?.class ?? '')}
 						style={css?.tableBody?.style ?? ''}
 					>
 						{#each $table.getRowModel().rows as row, rowIndex (row.id)}
@@ -246,12 +255,12 @@ function safeVisibleCell(row) {
 								class={classNames(
 									'last-of-type:!border-b-0',
 									selectedRowIndex === rowIndex
-										? 'bg-blue-100 hover:bg-blue-200'
-										: 'hover:bg-blue-50',
+										? 'bg-blue-100 hover:bg-blue-200 dark:bg-surface-selected dark:hover:bg-surface-hover'
+										: 'hover:bg-blue-50 dark:hover:bg-surface-hover',
 									'divide-x w-full',
 									selectedRowIndex === rowIndex
-										? 'divide-blue-200 hover:divide-blue-300'
-										: 'divide-gray-200'
+										? 'divide-blue-200 hover:divide-blue-300 dark:divide-gray-600 dark:hover:divide-gray-700'
+										: ''
 								)}
 							>
 								{#each safeVisibleCell(row) as cell, index (index)}
@@ -262,7 +271,7 @@ function safeVisibleCell(row) {
 											<td
 												on:keydown={() => toggleRow(row, rowIndex)}
 												on:click={() => toggleRow(row, rowIndex)}
-												class="p-4 whitespace-pre-wrap truncate text-xs text-gray-900"
+												class="p-4 whitespace-pre-wrap truncate text-xs text-primary"
 											>
 												{#if typeof cell.column.columnDef.cell != 'string' && cellIsObject(cell.column.columnDef.cell, context)}
 													{JSON.stringify(cell.column.columnDef.cell(context), null, 4)}
@@ -282,80 +291,134 @@ function safeVisibleCell(row) {
 									>
 										<div class="center-center h-full w-full flex-wrap gap-1.5">
 											{#each actionButtons as actionButton, actionIndex (actionButton?.id)}
-												<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-												<div
-													on:mouseover|stopPropagation={() => {
-														if (actionButton.id !== $hoverStore) {
-															$hoverStore = actionButton.id
-														}
-													}}
-													on:mouseout|stopPropagation={() => {
-														if ($hoverStore !== undefined) {
-															$hoverStore = undefined
-														}
+												<RowWrapper
+													on:inputsChange={() => {
+														outputs?.inputs.set(inputs, true)
 													}}
-													class={($selectedComponent?.includes(actionButton.id) ||
-														$hoverStore === actionButton.id) &&
-													$mode !== 'preview'
-														? 'outline outline-indigo-500 outline-1 outline-offset-1 relative '
-														: ''}
+													bind:inputs
+													value={row.original}
+													index={rowIndex}
 												>
-													{#if $mode !== 'preview'}
-														<!-- svelte-ignore a11y-click-events-have-key-events -->
-														<span
-															title={`Id: ${actionButton.id}`}
-															class={classNames(
-																'px-2 text-2xs font-bold w-fit absolute shadow  -top-2 -left-2 border z-50 rounded-sm',
-																'bg-indigo-500/90 border-indigo-600 text-white',
-																$selectedComponent?.includes(actionButton.id) ||
-																	$hoverStore === actionButton.id
-																	? 'opacity-100'
-																	: 'opacity-0'
-															)}
-															on:click|stopPropagation={() => {
-																$selectedComponent = [actionButton.id]
-															}}
-														>
-															{actionButton.id}
-														</span>
-													{/if}
-													{#if rowIndex == 0}
-														{@const controls = {
-															left: () => {
-																if (actionIndex === 0) {
-																	$selectedComponent = [id]
-																	return true
-																} else if (actionIndex > 0) {
-																	$selectedComponent = [actionButtons[actionIndex - 1].id]
-																	return true
-																}
-																return false
-															},
-															right: () => {
-																if (actionIndex === actionButtons.length - 1) {
-																	return id
-																} else if (actionIndex < actionButtons.length - 1) {
-																	$selectedComponent = [actionButtons[actionIndex + 1].id]
-																	return true
-																}
-																return false
+													<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+													<div
+														on:mouseover|stopPropagation={() => {
+															if (actionButton.id !== $hoverStore) {
+																$hoverStore = actionButton.id
+															}
+														}}
+														on:mouseout|stopPropagation={() => {
+															if ($hoverStore !== undefined) {
+																$hoverStore = undefined
 															}
 														}}
-														{#if actionButton.type == 'buttoncomponent'}
+														class={classNames(
+															($selectedComponent?.includes(actionButton.id) ||
+																$hoverStore === actionButton.id) &&
+																$mode !== 'preview'
+																? 'outline outline-indigo-500 outline-1 outline-offset-1 relative'
+																: ''
+														)}
+													>
+														{#if $mode !== 'preview'}
+															<!-- svelte-ignore a11y-click-events-have-key-events -->
+															<span
+																title={`Id: ${actionButton.id}`}
+																class={classNames(
+																	'px-2 text-2xs font-bold w-fit absolute shadow  -top-2 -left-2 border z-50 rounded-sm',
+																	'bg-indigo-500/90 border-indigo-600 text-white',
+																	$selectedComponent?.includes(actionButton.id) ||
+																		$hoverStore === actionButton.id
+																		? 'opacity-100'
+																		: 'opacity-0'
+																)}
+																on:click|stopPropagation={() => {
+																	$selectedComponent = [actionButton.id]
+																}}
+															>
+																{actionButton.id}
+															</span>
+														{/if}
+														{#if rowIndex == 0}
+															{@const controls = {
+																left: () => {
+																	if (actionIndex === 0) {
+																		$selectedComponent = [id]
+																		return true
+																	} else if (actionIndex > 0) {
+																		$selectedComponent = [actionButtons[actionIndex - 1].id]
+																		return true
+																	}
+																	return false
+																},
+																right: () => {
+																	if (actionIndex === actionButtons.length - 1) {
+																		return id
+																	} else if (actionIndex < actionButtons.length - 1) {
+																		$selectedComponent = [actionButtons[actionIndex + 1].id]
+																		return true
+																	}
+																	return false
+																}
+															}}
+															{#if actionButton.type == 'buttoncomponent'}
+																<AppButton
+																	extraKey={'idx' + rowIndex}
+																	{render}
+																	noWFull
+																	preclickAction={async () => {
+																		toggleRow(row, rowIndex)
+																	}}
+																	id={actionButton.id}
+																	customCss={actionButton.customCss}
+																	configuration={actionButton.configuration}
+																	recomputeIds={actionButton.recomputeIds}
+																	extraQueryParams={{ row: row.original }}
+																	componentInput={actionButton.componentInput}
+																	{controls}
+																/>
+															{:else if actionButton.type == 'checkboxcomponent'}
+																<AppCheckbox
+																	extraKey={'idx' + rowIndex}
+																	{render}
+																	id={actionButton.id}
+																	customCss={actionButton.customCss}
+																	configuration={actionButton.configuration}
+																	recomputeIds={actionButton.recomputeIds}
+																	preclickAction={async () => {
+																		toggleRow(row, rowIndex)
+																	}}
+																	{controls}
+																/>
+															{:else if actionButton.type == 'selectcomponent'}
+																<div class="w-40">
+																	<AppSelect
+																		extraKey={'idx' + rowIndex}
+																		{render}
+																		id={actionButton.id}
+																		customCss={actionButton.customCss}
+																		configuration={actionButton.configuration}
+																		recomputeIds={actionButton.recomputeIds}
+																		preclickAction={async () => {
+																			toggleRow(row, rowIndex)
+																		}}
+																		{controls}
+																	/>
+																</div>
+															{/if}
+														{:else if actionButton.type == 'buttoncomponent'}
 															<AppButton
 																extraKey={'idx' + rowIndex}
 																{render}
 																noWFull
-																preclickAction={async () => {
-																	toggleRow(row, rowIndex)
-																}}
 																id={actionButton.id}
 																customCss={actionButton.customCss}
 																configuration={actionButton.configuration}
 																recomputeIds={actionButton.recomputeIds}
+																preclickAction={async () => {
+																	toggleRow(row, rowIndex)
+																}}
 																extraQueryParams={{ row: row.original }}
 																componentInput={actionButton.componentInput}
-																{controls}
 															/>
 														{:else if actionButton.type == 'checkboxcomponent'}
 															<AppCheckbox
@@ -368,63 +431,25 @@ function safeVisibleCell(row) {
 																preclickAction={async () => {
 																	toggleRow(row, rowIndex)
 																}}
-																{controls}
 															/>
 														{:else if actionButton.type == 'selectcomponent'}
-															<AppSelect
-																extraKey={'idx' + rowIndex}
-																{render}
-																id={actionButton.id}
-																customCss={actionButton.customCss}
-																configuration={actionButton.configuration}
-																recomputeIds={actionButton.recomputeIds}
-																preclickAction={async () => {
-																	toggleRow(row, rowIndex)
-																}}
-																{controls}
-															/>
+															<div class="w-40">
+																<AppSelect
+																	--font-size="10px"
+																	extraKey={'idx' + rowIndex}
+																	{render}
+																	id={actionButton.id}
+																	customCss={actionButton.customCss}
+																	configuration={actionButton.configuration}
+																	recomputeIds={actionButton.recomputeIds}
+																	preclickAction={async () => {
+																		toggleRow(row, rowIndex)
+																	}}
+																/>
+															</div>
 														{/if}
-													{:else if actionButton.type == 'buttoncomponent'}
-														<AppButton
-															extraKey={'idx' + rowIndex}
-															{render}
-															noWFull
-															id={actionButton.id}
-															customCss={actionButton.customCss}
-															configuration={actionButton.configuration}
-															recomputeIds={actionButton.recomputeIds}
-															preclickAction={async () => {
-																toggleRow(row, rowIndex)
-															}}
-															extraQueryParams={{ row: row.original }}
-															componentInput={actionButton.componentInput}
-														/>
-													{:else if actionButton.type == 'checkboxcomponent'}
-														<AppCheckbox
-															extraKey={'idx' + rowIndex}
-															{render}
-															id={actionButton.id}
-															customCss={actionButton.customCss}
-															configuration={actionButton.configuration}
-															recomputeIds={actionButton.recomputeIds}
-															preclickAction={async () => {
-																toggleRow(row, rowIndex)
-															}}
-														/>
-													{:else if actionButton.type == 'selectcomponent'}
-														<AppSelect
-															extraKey={'idx' + rowIndex}
-															{render}
-															id={actionButton.id}
-															customCss={actionButton.customCss}
-															configuration={actionButton.configuration}
-															recomputeIds={actionButton.recomputeIds}
-															preclickAction={async () => {
-																toggleRow(row, rowIndex)
-															}}
-														/>
-													{/if}
-												</div>
+													</div>
+												</RowWrapper>
 											{/each}
 										</div>
 									</td>
@@ -449,7 +474,7 @@ function safeVisibleCell(row) {
 		<div class="flex flex-col h-full w-full overflow-auto">
 			<Alert title="Parsing issues" type="error" size="xs" class="h-full w-full ">
 				The result should be an array of objects. Received:
-				<pre class="w-full bg-white p-2 rounded-md whitespace-pre-wrap"
+				<pre class="w-full bg-surface p-2 rounded-md whitespace-pre-wrap"
 					>{JSON.stringify(result, null, 4)}</pre
 				>
 			</Alert>

package/package/components/apps/components/helpers/ComponentErrorHandler.svelte

@@ -7,10 +7,10 @@ export let hasError = false;
 
 {#if hasError}
 	<div class={classNames('bg-red-100 w-full h-full flex items-center justify-center text-red-500')}>
-		<Popover notClickable placement="bottom" popupClass="!bg-white border w-96">
+		<Popover notClickable placement="bottom" popupClass="!bg-surface border w-96">
 			<Bug size={14} />
 			<span slot="text">
-				<div class="bg-white">
+				<div class="bg-surface">
 					<Alert type="error" title="Error during execution">
 						<div class="flex flex-col gap-2">
 							One of the configuration of the component is invalid. Please check the configuration

package/package/components/apps/components/helpers/HiddenComponent.svelte

@@ -29,7 +29,7 @@ let outputs = initOutput($worldStore, id, {
 		fields={runnable.fields}
 		autoRefresh={true}
 		bind:result
-		transformer={undefined}
+		transformer={runnable?.transformer}
 		recomputeOnInputChanged={runnable.recomputeOnInputChanged ?? true}
 		{runnable}
 		wrapperClass="hidden"

package/package/components/apps/components/helpers/InputValue.svelte

@@ -12,7 +12,12 @@ export let extraContext = {};
 export let key = '';
 const { componentControl, runnableComponents } = getContext('AppViewerContext');
 const iterContext = getContext('ListWrapperContext');
-$: fullContext = iterContext ? { ...extraContext, iter: $iterContext } : extraContext;
+const rowContext = getContext('RowWrapperContext');
+$: fullContext = {
+    ...extraContext,
+    iter: iterContext ? $iterContext : undefined,
+    row: rowContext ? $rowContext : undefined
+};
 const dispatch = createEventDispatcher();
 if (input == undefined) {
     dispatch('done');
@@ -31,6 +36,10 @@ $: stateId = $worldStore?.stateId;
 let timeout = undefined;
 let firstDebounce = true;
 const debounce_ms = 50;
+export async function computeExpr() {
+    value = await evalExpr(lastInput);
+    return value;
+}
 function debounce(cb) {
     if (firstDebounce) {
         firstDebounce = false;
@@ -80,6 +89,7 @@ const debounceEval = async () => {
             }
         }
         else {
+            lastExpr = nvalue;
             value = nvalue;
         }
     }
@@ -87,7 +97,7 @@ const debounceEval = async () => {
 $: lastInput && lastInput.type == 'eval' && $stateId && $state && debounce2(debounceEval);
 async function handleConnection() {
     if (lastInput?.type === 'connected') {
-        $worldStore?.connect(lastInput, onValueChange, `${id}-${key}`);
+        $worldStore?.connect(lastInput, onValueChange, `${id}-${key}`, value);
     }
     else if (lastInput?.type === 'static' || lastInput?.type == 'template') {
         value = await getValue(lastInput);
@@ -114,7 +124,7 @@ async function evalExpr(input) {
     }
     catch (e) {
         error = e.message;
-        console.error("Eval error in app input '" + id + "' with key '" + key, e);
+        console.error("Eval error in app input '" + id + "' with key '" + key + "'", e);
         return value;
     }
 }
@@ -130,7 +140,7 @@ async function getValue(input) {
             return r;
         }
         catch (e) {
-            console.debug("Eval error in app input '" + id + "' with key '" + key, e);
+            console.debug("Eval error in app input '" + id + "' with key '" + key + "'", e);
             return e.message;
         }
     }

package/package/components/apps/components/helpers/InputValue.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         error?: string | undefined;
         extraContext?: Record<string, any> | undefined;
         key?: string | undefined;
+        computeExpr?: (() => Promise<string | number | boolean | Record<string | number, any> | undefined>) | undefined;
     };
     events: {
         done: CustomEvent<any>;
@@ -21,5 +22,6 @@ export type InputValueProps = typeof __propDef.props;
 export type InputValueEvents = typeof __propDef.events;
 export type InputValueSlots = typeof __propDef.slots;
 export default class InputValue extends SvelteComponentTyped<InputValueProps, InputValueEvents, InputValueSlots> {
+    get computeExpr(): () => Promise<string | number | boolean | Record<string | number, any> | undefined>;
 }
 export {};

package/package/components/apps/components/helpers/Loader.svelte

@@ -9,7 +9,7 @@ export let loading;
 	<div class="w-full h-full">
 		<div
 			out:fade|local={{ duration: 50 }}
-			class="absolute inset-0 center-center flex-col bg-white text-gray-600 border"
+			class="absolute inset-0 center-center flex-col bg-surface text-tertiary border"
 		>
 			<Loader2 class="animate-spin" size={16} />
 			<span class="text-xs mt-1">Loading</span>

package/package/components/apps/components/helpers/MissingConnectionWarning.svelte

@@ -5,7 +5,7 @@
 	<div class="flex gap-2 flex-col">
 		<div>This component is expecting a connected input: </div>
 		<div>
-			<code class="bg-gray-50 border text-gray-600">{input.connection?.path} </code>
+			<code class="bg-gray-50 border text-tertiary">{input.connection?.path} </code>
 		</div>
 	</div>
 {/if}

package/package/components/apps/components/helpers/RefreshButton.svelte

@@ -11,7 +11,7 @@ async function refresh() {
 <button
 	on:pointerdown|preventDefault|stopPropagation
 	on:click|preventDefault|stopPropagation={refresh}
-	class="center-center p-1 rounded border bg-white/60 hover:bg-gray-200 z-10"
+	class="center-center p-1 rounded border bg-surface/60 hover:bg-gray-200 z-10"
 >
 	<RefreshCw class={loading ? 'animate-spin' : ''} size={16} />
 </button>