windmill-components 1.82.6 → 1.82.8

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

@@ -112,7 +112,7 @@ $componentControl[id] = {
         }
         const hasActions = actionButtons.length >= 1;
         if (hasActions) {
-            $selectedComponent = actionButtons[0].id;
+            $selectedComponent = [actionButtons[0].id];
             return true;
         }
         return false;
@@ -221,7 +221,8 @@ $componentControl[id] = {
 										on:click={() => toggleRow(row, rowIndex)}
 									>
 										<div class="center-center h-full w-full flex-wrap gap-1 ">
-											{#each actionButtons as actionButton, actionIndex (actionIndex)}
+											{#each actionButtons as actionButton, actionIndex (actionButton?.id)}
+												<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 												<div
 													on:mouseover|stopPropagation={() => {
 														if (actionButton.id !== $hoverStore) {
@@ -233,13 +234,13 @@ $componentControl[id] = {
 															$hoverStore = undefined
 														}
 													}}
-													class={(actionButton.id === $selectedComponent ||
+													class={($selectedComponent?.includes(actionButton.id) ||
 														$hoverStore === actionButton.id) &&
 													$mode !== 'preview'
 														? 'outline outline-indigo-500 outline-1 outline-offset-1 relative '
 														: ''}
 												>
-													{#if actionButton.id === $selectedComponent || $hoverStore === actionButton.id}
+													{#if $selectedComponent?.includes(actionButton.id) || $hoverStore === actionButton.id}
 														<span
 															title={`Id: ${actionButton.id}`}
 															class={classNames(
@@ -255,19 +256,22 @@ $componentControl[id] = {
 															extraKey={'idx' + rowIndex}
 															{render}
 															noWFull
-															{...actionButton}
 															preclickAction={async () => {
 																toggleRow(row, rowIndex)
 															}}
+															id={actionButton.id}
+															customCss={actionButton.customCss}
+															configuration={actionButton.configuration}
+															recomputeIds={actionButton.recomputeIds}
 															extraQueryParams={{ row: row.original }}
-															bind:componentInput={actionButton.componentInput}
+															componentInput={actionButton.componentInput}
 															controls={{
 																left: () => {
 																	if (actionIndex === 0) {
-																		$selectedComponent = id
+																		$selectedComponent = [id]
 																		return true
 																	} else if (actionIndex > 0) {
-																		$selectedComponent = actionButtons[actionIndex - 1].id
+																		$selectedComponent = [actionButtons[actionIndex - 1].id]
 																		return true
 																	}
 																	return false
@@ -276,7 +280,7 @@ $componentControl[id] = {
 																	if (actionIndex === actionButtons.length - 1) {
 																		return id
 																	} else if (actionIndex < actionButtons.length - 1) {
-																		$selectedComponent = actionButtons[actionIndex + 1].id
+																		$selectedComponent = [actionButtons[actionIndex + 1].id]
 																		return true
 																	}
 																	return false
@@ -288,12 +292,15 @@ $componentControl[id] = {
 															extraKey={'idx' + rowIndex}
 															{render}
 															noWFull
-															{...actionButton}
+															id={actionButton.id}
+															customCss={actionButton.customCss}
+															configuration={actionButton.configuration}
+															recomputeIds={actionButton.recomputeIds}
 															preclickAction={async () => {
 																toggleRow(row, rowIndex)
 															}}
 															extraQueryParams={{ row: row.original }}
-															bind:componentInput={actionButton.componentInput}
+															componentInput={actionButton.componentInput}
 														/>
 													{/if}
 												</div>
@@ -319,9 +326,9 @@ $componentControl[id] = {
 		<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">
-				{JSON.stringify(result, null, 4)}
-				</pre>
+				<pre class="w-full bg-white p-2 rounded-md whitespace-pre-wrap"
+					>{JSON.stringify(result, null, 4)}</pre
+				>
 			</Alert>
 		</div>
 	{/if}

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

@@ -5,7 +5,8 @@ export let id;
 export let name;
 export let inlineScript;
 export let fields;
-export let doNotRecomputeOnInputChanged = false;
+export let doNotRecomputeOnInputChanged;
+export let recomputableByRefreshButton;
 let result = undefined;
 const { worldStore } = getContext('AppViewerContext');
 let outputs = initOutput($worldStore, id, {
@@ -28,8 +29,8 @@ let outputs = initOutput($worldStore, id, {
 		type: 'runnableByName'
 	}}
 	wrapperClass="hidden"
-	recomputable
 	{outputs}
+	{recomputableByRefreshButton}
 >
 	<slot />
 </RunnableComponent>

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

@@ -7,7 +7,8 @@ declare const __propDef: {
         name: string;
         inlineScript: InlineScript | undefined;
         fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
-        doNotRecomputeOnInputChanged?: boolean | undefined;
+        doNotRecomputeOnInputChanged: boolean;
+        recomputableByRefreshButton: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,18 +1,11 @@
 <script>import { RefreshCw } from 'lucide-svelte';
 import { getContext } from 'svelte';
 export let componentId;
-const { runnableComponents, worldStore } = getContext('AppViewerContext');
+export let loading;
+const { runnableComponents } = getContext('AppViewerContext');
 async function refresh() {
-    window.dispatchEvent(new Event('pointerup'));
-    await $runnableComponents[componentId]?.();
+    await $runnableComponents[componentId]?.cb?.();
 }
-let loading = false;
-$: $worldStore?.outputsById[componentId]?.['loading']?.subscribe({
-    id: 'refresh-' + componentId,
-    next: (value) => {
-        loading = value;
-    }
-});
 </script>
 
 <button

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

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         componentId: string;
+        loading: boolean;
     };
     events: {
         pointerdown: PointerEvent;

package/components/apps/components/helpers/RunnableComponent.svelte

@@ -23,22 +23,25 @@ export let wrapperClass = '';
 export let wrapperStyle = '';
 export let initializing = undefined;
 export let render;
-export let recomputable = false;
 export let outputs;
 export let extraKey = '';
 export let doNotRecomputeOnInputChanged = false;
+export let loading = false;
+export let recomputableByRefreshButton = true;
 const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend, errorByComponent, mode, stateId, state, componentControl } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
-if (recomputable || autoRefresh) {
-    $runnableComponents[id] = async (inlineScript) => {
+$runnableComponents[id] = {
+    autoRefresh: autoRefresh && recomputableByRefreshButton,
+    cb: async (inlineScript) => {
         await executeComponent(true, inlineScript);
-    };
-    $runnableComponents = $runnableComponents;
-}
+    }
+};
+$runnableComponents = $runnableComponents;
 let args = undefined;
 let testIsLoading = false;
 let runnableInputValues = {};
 let executeTimeout = undefined;
+$: outputs.loading?.set(loading);
 function setDebouncedExecute() {
     executeTimeout && clearTimeout(executeTimeout);
     executeTimeout = setTimeout(() => {
@@ -103,7 +106,7 @@ function stripSchema(inputs, s) {
 }
 async function executeComponent(noToast = false, inlineScriptOverride) {
     if (runnable?.type === 'runnableByName' && runnable.inlineScript?.language === 'frontend') {
-        outputs.loading?.set(true);
+        loading = true;
         try {
             const r = await eval_like(runnable.inlineScript?.content, computeGlobalContext($worldStore, id, {}), false, $state, $mode == 'dnd', $componentControl, $worldStore);
             await setResult(r);
@@ -112,7 +115,7 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
         catch (e) {
             sendUserToast('Error running frontend script: ' + e.message, true);
         }
-        outputs.loading?.set(false);
+        loading = false;
         return;
     }
     if (noBackend) {
@@ -124,7 +127,7 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
     if (runnable?.type === 'runnableByName' && !runnable.inlineScript) {
         return;
     }
-    outputs.loading?.set(true);
+    loading = true;
     try {
         let njob = await testJobLoader?.abstractRun(() => {
             const nonStaticRunnableInputs = {};
@@ -172,7 +175,8 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
         }
     }
     catch (e) {
-        outputs.loading?.set(false);
+        setResult({ error: e.body ?? e.message });
+        loading = false;
     }
 }
 export async function runComponent() {
@@ -180,7 +184,7 @@ export async function runComponent() {
         await executeComponent();
     }
     catch (e) {
-        console.error(e);
+        setResult({ error: e.body ?? e.message });
     }
 }
 let lastStartedAt = Date.now();
@@ -256,7 +260,7 @@ async function setResult(res) {
 				setResult(e.detail.result)
 			}
 		}
-		outputs.loading?.set(false)
+		loading = false
 	}}
 	bind:isLoading={testIsLoading}
 	bind:job={testJob}
@@ -307,7 +311,7 @@ async function setResult(res) {
 		{/if}
 		{#if !initializing && autoRefresh === true}
 			<div class="flex absolute top-1 right-1 z-50">
-				<RefreshButton componentId={id} />
+				<RefreshButton {loading} componentId={id} />
 			</div>
 		{/if}
 	</div>

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

@@ -18,13 +18,14 @@ declare const __propDef: {
         wrapperStyle?: string | undefined;
         initializing?: boolean | undefined;
         render: boolean;
-        recomputable?: boolean | undefined;
         outputs: {
             result: Output<any>;
             loading: Output<boolean>;
         };
         extraKey?: string | undefined;
         doNotRecomputeOnInputChanged?: boolean | undefined;
+        loading?: boolean | undefined;
+        recomputableByRefreshButton?: boolean | undefined;
         runComponent?: (() => Promise<void>) | undefined;
     };
     events: {

package/components/apps/components/helpers/RunnableWrapper.svelte

@@ -8,6 +8,7 @@ export let componentInput;
 export let id;
 export let result = undefined;
 export let initializing = true;
+export let loading = false;
 export let extraQueryParams = {};
 export let autoRefresh = true;
 export let runnableComponent = undefined;
@@ -34,7 +35,7 @@ function isRunnableDefined(componentInput) {
 }
 export function onSuccess() {
     if (recomputeIds) {
-        recomputeIds.map((id) => $runnableComponents?.[id]?.());
+        recomputeIds.map((id) => $runnableComponents?.cb?.[id]?.());
     }
     if (!doOnSuccess)
         return;
@@ -73,6 +74,7 @@ export function onSuccess() {
 {:else if componentInput.type === 'runnable' && isRunnableDefined(componentInput)}
 	<RunnableComponent
 		{extraKey}
+		bind:loading
 		bind:this={runnableComponent}
 		fields={componentInput.fields}
 		bind:result

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

@@ -8,6 +8,7 @@ declare const __propDef: {
         id: string;
         result?: any;
         initializing?: boolean | undefined;
+        loading?: boolean | undefined;
         extraQueryParams?: Record<string, any> | undefined;
         autoRefresh?: boolean | undefined;
         runnableComponent?: RunnableComponent | undefined;

package/components/apps/components/inputs/AppCheckbox.svelte

@@ -27,10 +27,6 @@ $: css = concatCustomCss($app.css?.checkboxcomponent, customCss);
 
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
 	<Toggle
-		on:pointerdown={(e) => {
-			e?.stopPropagation()
-			window.dispatchEvent(new Event('pointerup'))
-		}}
 		checked={defaultValue}
 		options={{ right: labelValue }}
 		textClass={css?.text?.class ?? ''}

package/components/apps/components/inputs/AppDateInput.svelte

@@ -35,14 +35,14 @@ $: css = concatCustomCss($app.css?.dateinputcomponent, customCss);
 <AlignWrapper {render} {verticalAlignment}>
 	{#if inputType === 'date'}
 		<input
-			on:focus={() => ($selectedComponent = id)}
+			on:focus={() => ($selectedComponent = [id])}
 			on:pointerdown|stopPropagation
 			type="date"
 			bind:value
 			min={minValue}
 			max={maxValue}
 			placeholder="Type..."
-			class={twMerge('mx-0.5', css?.input?.class ?? '')}
+			class={twMerge(css?.input?.class ?? '')}
 			style={css?.input?.style ?? ''}
 		/>
 	{/if}

package/components/apps/components/inputs/AppMultiSelect.svelte

@@ -42,7 +42,11 @@ $: css = concatCustomCss($app.css?.selectcomponent, customCss);
 <InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
 
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
-	<div class="app-select w-full mx-0.5" style="height: 34px" on:pointerdown|stopPropagation>
+	<div
+		class="app-select w-full"
+		style="height: 34px; overflow: auto;"
+		on:pointerdown|stopPropagation
+	>
 		{#if !value || Array.isArray(value)}
 			<Select
 				--border-radius="0"
@@ -58,11 +62,11 @@ $: css = concatCustomCss($app.css?.selectcomponent, customCss);
 				{placeholder}
 				on:click={() => {
 					if (!$connectingInput.opened) {
-						$selectedComponent = id
+						$selectedComponent = [id]
 					}
 				}}
 				on:focus={() => {
-					$selectedComponent = id
+					$selectedComponent = [id]
 				}}
 				floatingConfig={{
 					strategy: 'fixed'

package/components/apps/components/inputs/AppNumberInput.svelte

@@ -35,10 +35,10 @@ $: css = concatCustomCss($app.css?.numberinputcomponent, customCss);
 
 <AlignWrapper {render} {verticalAlignment}>
 	<input
-		on:pointerdown|stopPropagation={() => ($selectedComponent = id)}
-		on:focus={() => ($selectedComponent = id)}
+		on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}
+		on:focus={() => ($selectedComponent = [id])}
 		class={twMerge(
-			'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
+			'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2',
 			css?.input?.class ?? ''
 		)}
 		style={css?.input?.style ?? ''}

package/components/apps/components/inputs/AppSelect.svelte

@@ -43,7 +43,6 @@ function handleItems() {
 }
 function onChange(e) {
     e?.stopPropagation();
-    window.dispatchEvent(new Event('pointerup'));
     if (create) {
         listItems = listItems.map((i) => {
             delete i.created;
@@ -88,7 +87,7 @@ let filterText = '';
 <InputValue {id} input={configuration.create} bind:value={create} />
 
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
-	<div class="app-select w-full mx-0.5" style="height: 34px;" on:pointerdown|stopPropagation>
+	<div class="app-select w-full" style="height: 34px;" on:pointerdown|stopPropagation>
 		<Select
 			--border-radius="0"
 			--border-color="#999"
@@ -105,11 +104,11 @@ let filterText = '';
 			{placeholder}
 			on:click={() => {
 				if (!$connectingInput.opened) {
-					$selectedComponent = id
+					$selectedComponent = [id]
 				}
 			}}
 			on:focus={() => {
-				$selectedComponent = id
+				$selectedComponent = [id]
 			}}
 			floatingConfig={{
 				strategy: 'fixed'

package/components/apps/components/inputs/AppSliderInputs.svelte

@@ -59,7 +59,7 @@ $: if (css && slider && lastStyle !== css?.handle?.style) {
 			class="grow"
 			style="--range-handle-focus: {'#7e9abd'}; --range-handle: {'#7e9abd'}; {css?.bar?.style ??
 				''}"
-			on:pointerdown|stopPropagation={() => ($selectedComponent = id)}
+			on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}
 		>
 			<RangeSlider bind:slider bind:values {step} min={+min} max={+max} />
 		</div>

package/components/apps/components/inputs/AppTextInput.svelte

@@ -1,7 +1,7 @@
 <script>import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { initOutput } from '../../editor/appUtils';
-import { concatCustomCss } from '../../utils';
+import { concatCustomCss, selectId } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 export let id;
@@ -33,12 +33,11 @@ $: css = concatCustomCss($app.css?.[appCssKey], customCss);
 	{#if inputType === 'password'}
 		<input
 			class={twMerge(
-				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
+				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 ',
 				css?.input?.class ?? ''
 			)}
 			style={css?.input?.style ?? ''}
-			on:focus|stopPropagation={() => ($selectedComponent = id)}
-			on:pointerdown|stopPropagation={() => ($selectedComponent = id)}
+			on:pointerdown|stopPropagation={(e) => selectId(e, id, selectedComponent, $app)}
 			type="password"
 			bind:value
 			{placeholder}
@@ -46,12 +45,11 @@ $: css = concatCustomCss($app.css?.[appCssKey], customCss);
 	{:else if inputType === 'text'}
 		<input
 			class={twMerge(
-				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
+				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 ',
 				css?.input?.class ?? ''
 			)}
 			style={css?.input?.style ?? ''}
-			on:focus={() => ($selectedComponent = id)}
-			on:pointerdown|stopPropagation={() => ($selectedComponent = id)}
+			on:pointerdown|stopPropagation={(e) => selectId(e, id, selectedComponent, $app)}
 			type="text"
 			bind:value
 			{placeholder}
@@ -59,12 +57,11 @@ $: css = concatCustomCss($app.css?.[appCssKey], customCss);
 	{:else if inputType === 'email'}
 		<input
 			class={twMerge(
-				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
+				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 ',
 				css?.input?.class ?? ''
 			)}
 			style={css?.input?.style ?? ''}
-			on:focus={() => ($selectedComponent = id)}
-			on:pointerdown|stopPropagation={() => ($selectedComponent = id)}
+			on:pointerdown|stopPropagation={(e) => selectId(e, id, selectedComponent, $app)}
 			type="email"
 			bind:value
 			{placeholder}

package/components/apps/components/inputs/currency/AppCurrencyInput.svelte

@@ -40,7 +40,7 @@ $: css = concatCustomCss($app.css?.currencycomponent, customCss);
 	{#key isNegativeAllowed}
 		{#key locale}
 			{#key currency}
-				<div class="w-full" on:pointerdown|stopPropagation={() => ($selectedComponent = id)}>
+				<div class="w-full" on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}>
 					<CurrencyInput
 						inputClasses={{
 							formatted: twMerge('px-2 w-full py-1.5 windmillapp', css?.input?.class),

package/components/apps/components/layout/AppContainer.svelte

@@ -15,7 +15,6 @@ function onFocus() {
         subGridIndex: 0
     };
 }
-$: $selectedComponent === id && onFocus();
 $: css = concatCustomCss($app.css?.containercomponent, customCss);
 </script>
 
@@ -29,7 +28,8 @@ $: css = concatCustomCss($app.css?.containercomponent, customCss);
 			subGridId={`${id}-0`}
 			containerHeight={componentContainerHeight}
 			on:focus={() => {
-				$selectedComponent = id
+				$selectedComponent = [id]
+				onFocus()
 			}}
 		/>
 	{/if}

package/components/apps/components/layout/AppDrawer.svelte

@@ -38,7 +38,6 @@ $: css = concatCustomCss($app.css?.containercomponent, customCss);
 			{disabled}
 			on:pointerdown={(e) => {
 				e?.stopPropagation()
-				window.dispatchEvent(new Event('pointerup'))
 			}}
 			on:click={async (e) => {
 				$focusedGrid = {
@@ -80,7 +79,7 @@ $: css = concatCustomCss($app.css?.containercomponent, customCss);
 					subGridId={`${id}-0`}
 					containerHeight={1200}
 					on:focus={() => {
-						$selectedComponent = id
+						$selectedComponent = [id]
 					}}
 				/>
 			{/if}

package/components/apps/components/layout/AppSplitpanes.svelte

@@ -19,7 +19,7 @@ function onFocus() {
         subGridIndex: 0
     };
 }
-$: $selectedComponent === id && onFocus();
+$: $selectedComponent?.includes(id) && onFocus();
 $: css = concatCustomCss($app.css?.containercomponent, customCss);
 $componentControl[id] = {
     left: () => {
@@ -60,7 +60,7 @@ $: {
 				<div
 					class="w-full h-full"
 					on:pointerdown|stopPropagation={() => {
-						$selectedComponent = id
+						$selectedComponent = [id]
 						$focusedGrid = {
 							parentComponentId: id,
 							subGridIndex: index
@@ -77,7 +77,7 @@ $: {
 							subGridId={`${id}-${index}`}
 							containerHeight={horizontal ? undefined : componentContainerHeight - 8}
 							on:focus={() => {
-								$selectedComponent = id
+								$selectedComponent = [id]
 								$focusedGrid = {
 									parentComponentId: id,
 									subGridIndex: index

package/components/apps/components/layout/AppTabs.svelte

@@ -103,7 +103,7 @@ $: css = concatCustomCss($app.css?.tabscomponent, customCss);
 						? componentContainerHeight - tabHeight
 						: componentContainerHeight}
 					on:focus={() => {
-						$selectedComponent = id
+						$selectedComponent = [id]
 					}}
 				/>
 			{/each}