windmill-components 1.52.0 → 1.55.0

package/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -1,38 +1,39 @@
 <script>import { ToggleButton, ToggleButtonGroup } from '../../../common';
 import Button from '../../../common/button/Button.svelte';
-import PickScript from '../../../flows/pickers/PickScript.svelte';
-import { faAlignCenter, faAlignLeft, faAlignRight, faClose, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { faArrowRight, faClose, faCode, faMinimize, faPen, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { AlignStartHorizontal, AlignStartVertical, AlignCenterHorizontal, AlignCenterVertical, AlignEndHorizontal, AlignEndVertical } from 'lucide-svelte';
 import { getContext } from 'svelte';
-import Icon from 'svelte-awesome';
 import PanelSection from './common/PanelSection.svelte';
 import InputsSpecsEditor from './InputsSpecsEditor.svelte';
-import PickFlow from './PickFlow.svelte';
-import gridHelp from 'svelte-grid/build/helper/index.mjs';
-import PickInlineScript from './PickInlineScript.svelte';
 import TableActions from './TableActions.svelte';
-import { capitalize } from '../../../../utils';
+import StaticInputEditor from './StaticInputEditor.svelte';
+import ConnectedInputEditor from './ConnectedInputEditor.svelte';
 import Badge from '../../../common/badge/Badge.svelte';
-import { gridColumns } from '../../gridUtils';
-import { Plus } from 'svelte-lucide';
+import { capitalize } from '../../../../utils';
+import { fieldTypeToTsType } from '../../utils';
+import Recompute from './Recompute.svelte';
+import Alert from '../../../common/alert/Alert.svelte';
+import RunnableSelector from './mainInput/RunnableSelector.svelte';
 export let component;
 export let onDelete = undefined;
-const { app, staticOutputs } = getContext('AppEditorContext');
+const { app, staticOutputs, runnableComponents } = getContext('AppEditorContext');
 function removeGridElement() {
     if (onDelete && component) {
         delete $staticOutputs[component.id];
         $staticOutputs = $staticOutputs;
+        delete $runnableComponents[component.id];
+        $runnableComponents = $runnableComponents;
         onDelete();
         // Delete static inputs
     }
     else {
         if (component) {
             $app.grid = $app.grid.filter((gridComponent) => gridComponent.data.id !== component?.id);
-            gridColumns.forEach((colIndex) => {
-                $app.grid = gridHelp.adjust($app.grid, colIndex);
-            });
             // Delete static inputs
             delete $staticOutputs[component.id];
             $staticOutputs = $staticOutputs;
+            delete $runnableComponents[component.id];
+            $runnableComponents = $runnableComponents;
         }
     }
 }
@@ -40,110 +41,111 @@ function removeGridElement() {
 
 {#if component}
 	<div class="flex flex-col w-full divide-y">
-		{#if component.runnable}
-			<PanelSection title="Runnable">
-				{#if component.runnable && component['inlineScriptName']}
-					<div class="flex justify-between w-full items-center">
-						<span class="text-xs">{component['inlineScriptName']}</span>
-						<Button
+		{#if component.componentInput}
+			<PanelSection title="Main input">
+				<svelte:fragment slot="action">
+					<Badge color="blue">
+						{component.componentInput.fieldType === 'array' && component.componentInput.subFieldType
+							? `${capitalize(fieldTypeToTsType(component.componentInput.subFieldType))}[]`
+							: capitalize(fieldTypeToTsType(component.componentInput.fieldType))}
+					</Badge>
+				</svelte:fragment>
+				<div class="w-full">
+					<ToggleButtonGroup bind:selected={component.componentInput.type}>
+						<ToggleButton
+							position="left"
+							value="static"
+							startIcon={{ icon: faPen }}
 							size="xs"
-							color="red"
-							startIcon={{ icon: faClose }}
-							on:click={() => {
-								if (component) {
-									component['inlineScriptName'] = undefined
-								}
-							}}
+							disable={component.type === 'buttoncomponent'}
 						>
-							Clear
-						</Button>
-					</div>
-				{/if}
-
-				{#if component.runnable && component['path']}
-					<div class="flex gap-2 items-center">
-						<div>
-							<Badge color="blue">{capitalize(component['runType'])}</Badge>
-							<span class="text-xs">{component['path']}</span>
-						</div>
-						<Button
+							Static
+						</ToggleButton>
+						<ToggleButton
+							value="connected"
+							position="center"
+							startIcon={{ icon: faArrowRight }}
 							size="xs"
-							color="red"
-							variant="border"
-							startIcon={{ icon: faClose }}
-							on:click={() => {
-								if (component) {
-									component['inlineScriptName'] = undefined
-								}
-							}}
 						>
-							Clear
-						</Button>
-					</div>
-				{/if}
-
-				{#if component.runnable && component['path'] === undefined && component['inlineScriptName'] === undefined}
-					<div class="text-sm">Inline scripts:</div>
-					<div class="flex gap-2">
-						<Button
-							btnClasses="w-24 truncate"
-							size="sm"
-							spacingSize="md"
-							variant="border"
-							color="light"
+							Connected
+						</ToggleButton>
+						<ToggleButton position="right" value="runnable" startIcon={{ icon: faCode }} size="xs">
+							Computed
+						</ToggleButton>
+					</ToggleButtonGroup>
+				</div>
+				<div class="flex flex-col w-full gap-2 my-2">
+					{#if component.componentInput.type === 'static'}
+						<StaticInputEditor bind:componentInput={component.componentInput} />
+					{:else if component.componentInput.type === 'connected' && component.componentInput !== undefined}
+						<ConnectedInputEditor bind:componentInput={component.componentInput} />
+					{:else if component && component.componentInput?.type === 'runnable' && component.componentInput.runnable}
+						<div class="flex justify-between w-full items-center">
+							<span class="text-xs">
+								{component.componentInput.runnable.type === 'runnableByName'
+									? component.componentInput.runnable.inlineScriptName
+									: component.componentInput.runnable.path}
+							</span>
+							<Button
+								size="xs"
+								color="red"
+								variant="border"
+								startIcon={{ icon: faClose }}
+								on:click={() => {
+									if (component?.componentInput?.type === 'runnable') {
+										component.componentInput.runnable = undefined
+										component.componentInput.fields = {}
+										component = component
+									}
+								}}
+							>
+								Clear
+							</Button>
+						</div>
+					{:else}
+						<RunnableSelector
+							inlineScripts={Object.keys($app.inlineScripts)}
+							bind:componentInput={component.componentInput}
+						/>
+					{/if}
+				</div>
+				{#if component.componentInput?.type === 'runnable' && Object.keys(component.componentInput.fields ?? {}).length > 0}
+					<div class="border w-full">
+						<PanelSection
+							title={`Runnable inputs (${
+								Object.keys(component.componentInput.fields ?? {}).length
+							})`}
+							smallPadding
 						>
-							<div class="flex justify-center flex-col items-center gap-2">
-								<Plus size="18px" />
-
-								<span class="text-xs">Create</span>
-							</div>
-						</Button>
+							{#if component.type === 'buttoncomponent'}
+								<Alert title="Button inputs" type="info" size="xs">
+									The runnable inputs of a button component are not settable by the user. They must
+									be defined statically or connected.
+								</Alert>
+							{/if}
 
-						<PickInlineScript
-							scripts={(Object.keys($app.inlineScripts) || []).map((summary) => ({ summary }))}
-							on:pick={({ detail }) => {
-								if (component?.runnable) {
-									// @ts-ignore
-									component.inlineScriptName = detail.summary
-								}
-							}}
-						/>
+							<InputsSpecsEditor
+								bind:inputSpecs={component.componentInput.fields}
+								userInputEnabled={component.type !== 'buttoncomponent'}
+							/>
+						</PanelSection>
 					</div>
+				{/if}
 
-					<div class="text-sm">Pick from workspace:</div>
-					<div class="flex gap-2">
-						<PickScript
-							kind="script"
-							on:pick={({ detail }) => {
-								if (component?.runnable) {
-									component['path'] = detail.path
-									component['runType'] = 'script'
-								}
-							}}
-						/>
-						<PickFlow
-							on:pick={({ detail }) => {
-								if (component?.runnable) {
-									component['path'] = detail.path
-									component['runType'] = 'flow'
-								}
-							}}
-						/>
+				{#if component.type === 'buttoncomponent'}
+					<div class="w-full">
+						<Alert size="xs" type="warning" title="Result output">
+							This input is not directly used by the component. It is piped to the component's
+							<code>result</code> output.
+						</Alert>
 					</div>
 				{/if}
 			</PanelSection>
 		{/if}
-		{#if Object.values(component.inputs).length > 0}
-			<PanelSection title="Runnable inputs">
-				<InputsSpecsEditor bind:inputSpecs={component.inputs} />
-			</PanelSection>
-		{/if}
 
-		{#if Object.values(component.componentInputs).length > 0}
-			<PanelSection
-				title={`Component parameters (${Object.values(component.componentInputs).length})`}
-			>
-				<InputsSpecsEditor bind:inputSpecs={component.componentInputs} userInputEnabled={false} />
+		{#if Object.values(component.configuration).length > 0}
+			<PanelSection title={`Configuration (${Object.values(component.configuration).length})`}>
+				<InputsSpecsEditor bind:inputSpecs={component.configuration} userInputEnabled={false} />
 			</PanelSection>
 		{/if}
 
@@ -153,34 +155,57 @@ function removeGridElement() {
 
 		{#if component.verticalAlignment !== undefined}
 			<PanelSection title="Alignment">
-				<div class="w-full text-xs font-bold">Horizontal alignment</div>
-
-				<ToggleButtonGroup bind:selected={component.horizontalAlignment}>
-					<ToggleButton position="left" value="left" size="xs">
-						<Icon data={faAlignLeft} />
-					</ToggleButton>
-					<ToggleButton position="center" value="center" size="xs">
-						<Icon data={faAlignCenter} />
-					</ToggleButton>
-					<ToggleButton position="right" value="right" size="xs">
-						<Icon data={faAlignRight} />
-					</ToggleButton>
-				</ToggleButtonGroup>
-				<div class="w-full text-xs font-bold">Vertical alignment</div>
+				<svelte:fragment slot="action">
+					<Button
+						size="xs"
+						on:click={() => {
+							if (component) {
+								component.verticalAlignment = 'center'
+								component.horizontalAlignment = 'center'
+							}
+						}}
+						startIcon={{ icon: faMinimize }}
+					>
+						Center
+					</Button>
+				</svelte:fragment>
+				<div class="w-full text-xs font-semibold">Horizontal alignment</div>
 
-				<ToggleButtonGroup bind:selected={component.verticalAlignment}>
-					<ToggleButton position="left" value="top" size="xs">
-						<Icon data={faAlignLeft} />
-					</ToggleButton>
-					<ToggleButton position="center" value="center" size="xs">
-						<Icon data={faAlignCenter} />
-					</ToggleButton>
-					<ToggleButton position="right" value="bottom" size="xs">
-						<Icon data={faAlignRight} />
-					</ToggleButton>
-				</ToggleButtonGroup>
+				<div class="w-full">
+					<ToggleButtonGroup bind:selected={component.horizontalAlignment}>
+						<ToggleButton position="left" value="left" size="xs">
+							<AlignStartVertical size={16} />
+						</ToggleButton>
+						<ToggleButton position="center" value="center" size="xs">
+							<AlignCenterVertical size={16} />
+						</ToggleButton>
+						<ToggleButton position="right" value="right" size="xs">
+							<AlignEndVertical size={16} />
+						</ToggleButton>
+					</ToggleButtonGroup>
+				</div>
+				{#if component.type !== 'formcomponent'}
+					<div class="w-full text-xs font-semibold">Vertical alignment</div>
+					<div class="w-full">
+						<ToggleButtonGroup bind:selected={component.verticalAlignment}>
+							<ToggleButton position="left" value="top" size="xs">
+								<AlignStartHorizontal size={16} />
+							</ToggleButton>
+							<ToggleButton position="center" value="center" size="xs">
+								<AlignCenterHorizontal size={16} />
+							</ToggleButton>
+							<ToggleButton position="right" value="bottom" size="xs">
+								<AlignEndHorizontal size={16} />
+							</ToggleButton>
+						</ToggleButtonGroup>
+					</div>
+				{/if}
 			</PanelSection>
 		{/if}
+		{#if component.type === 'buttoncomponent' || component.type === 'formcomponent'}
+			<Recompute bind:recomputeIds={component.recomputeIds} ownId={component.id} />
+		{/if}
+
 		<PanelSection title="Danger zone">
 			<Button
 				size="xs"

package/components/apps/editor/settingsPanel/ConnectedInputEditor.svelte

@@ -0,0 +1,70 @@
+<script>import { Badge, Button } from '../../../common';
+import { faArrowRight, faClose } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+export let componentInput;
+const { connectingInput } = getContext('AppEditorContext');
+function applyConnection() {
+    if (!$connectingInput.opened &&
+        $connectingInput.input !== undefined &&
+        componentInput.type === 'connected' &&
+        !componentInput.connection) {
+        debugger;
+        componentInput.connection = $connectingInput.input.connection;
+        $connectingInput = {
+            opened: false,
+            input: undefined
+        };
+    }
+}
+$: $connectingInput && applyConnection();
+</script>
+
+{#if componentInput.type === 'connected'}
+	{#if componentInput.connection}
+		<div class="flex justify-between w-full">
+			<span class="text-xs">Status</span>
+			<Badge color="green">Connected</Badge>
+		</div>
+		<div class="flex justify-between w-full">
+			<span class="text-xs">Component</span>
+			<Badge color="indigo">{componentInput.connection.componentId}</Badge>
+		</div>
+		<div class="flex justify-between w-full">
+			<span class="text-xs">Path</span>
+			<Badge color="indigo">{componentInput.connection.path}</Badge>
+		</div>
+		<Button
+			size="xs"
+			startIcon={{ icon: faClose }}
+			color="red"
+			variant="border"
+			on:click={() => {
+				if (componentInput.type === 'connected') {
+					componentInput.connection = undefined
+				}
+			}}
+		>
+			Disconnect
+		</Button>
+	{:else}
+		<div class="flex justify-between w-full">
+			<span class="text-xs">Status</span>
+			<Badge color="yellow">Not connected</Badge>
+		</div>
+		<Button
+			size="xs"
+			endIcon={{ icon: faArrowRight }}
+			color="blue"
+			on:click={() => {
+				if (componentInput.type === 'connected') {
+					$connectingInput = {
+						opened: true,
+						input: undefined
+					}
+				}
+			}}
+		>
+			Connect
+		</Button>
+	{/if}
+{/if}

package/components/apps/editor/settingsPanel/ConnectedInputEditor.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        componentInput: AppInput;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ConnectedInputEditorProps = typeof __propDef.props;
+export type ConnectedInputEditorEvents = typeof __propDef.events;
+export type ConnectedInputEditorSlots = typeof __propDef.slots;
+export default class ConnectedInputEditor extends SvelteComponentTyped<ConnectedInputEditorProps, ConnectedInputEditorEvents, ConnectedInputEditorSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -1,11 +1,11 @@
-<script>import DynamicInputEditor from './DynamicInputEditor.svelte';
+<script>import ConnectedInputEditor from './ConnectedInputEditor.svelte';
 import StaticInputEditor from './StaticInputEditor.svelte';
-export let appInputTransform;
+export let componentInput;
 export let canHide = false;
 </script>
 
-{#if appInputTransform.type === 'static'}
-	<StaticInputEditor bind:input={appInputTransform} {canHide} />
-{:else if appInputTransform.type === 'output'}
-	<DynamicInputEditor bind:input={appInputTransform} />
+{#if componentInput.type === 'static'}
+	<StaticInputEditor bind:componentInput {canHide} />
+{:else if componentInput.type === 'connected'}
+	<ConnectedInputEditor bind:componentInput />
 {/if}

package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppInputTransform } from '../../types';
+import type { ConnectedAppInput, StaticAppInput, UserAppInput } from '../../inputType';
 declare const __propDef: {
     props: {
-        appInputTransform: AppInputTransform;
+        componentInput: StaticAppInput | ConnectedAppInput | UserAppInput;
         canHide?: boolean | undefined;
     };
     events: {

package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte

@@ -1,99 +1,67 @@
 <script>import { Badge, ToggleButton, ToggleButtonGroup } from '../../../common';
-import { capitalize, classNames } from '../../../../utils';
-import { faBolt, faLink, faUser } from '@fortawesome/free-solid-svg-icons';
+import { capitalize } from '../../../../utils';
+import { faArrowRight, faPen, faUser } from '@fortawesome/free-solid-svg-icons';
 import { fieldTypeToTsType } from '../../utils';
 import InputsSpecEditor from './InputsSpecEditor.svelte';
 export let inputSpecs;
 export let userInputEnabled = true;
-let openedProp = Object.keys(inputSpecs)[0];
-const userTypeKeys = ['value'];
-const staticTypeKeys = ['value'];
-const dynamicTypeKeys = ['id', 'name'];
-function sanitizeInputSpec(type, inputSpecKey) {
-    const inputSpec = inputSpecs[inputSpecKey];
-    if (type === 'user') {
-        for (const key of staticTypeKeys) {
-            delete inputSpec[key];
-        }
-        for (const key of dynamicTypeKeys) {
-            delete inputSpec[key];
-        }
-    }
-    else if (type === 'static') {
-        for (const key of userTypeKeys) {
-            delete inputSpec[key];
-        }
-        for (const key of dynamicTypeKeys) {
-            delete inputSpec[key];
-        }
-    }
-    else if (type === 'output') {
-        for (const key of userTypeKeys) {
-            delete inputSpec[key];
-        }
-        for (const key of staticTypeKeys) {
-            delete inputSpec[key];
-        }
-    }
-    inputSpecs[inputSpecKey] = inputSpec;
-}
+export let staticOnly = false;
 </script>
 
-<div class="w-full flex flex-col gap-2">
-	{#each Object.keys(inputSpecs) as inputSpecKey, index (index)}
-		{@const input = inputSpecs[inputSpecKey]}
-		<div>
-			<div
-				class={classNames(
-					'w-full text-xs font-bold py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
-					'bg-white border-gray-300  hover:bg-gray-100 focus:bg-gray-100 text-gray-700',
-					openedProp === inputSpecKey ? 'outline outline-gray-500 outline-offset-1' : ''
-				)}
-				on:keypress
-				on:click={() => {
-					if (openedProp === inputSpecKey) {
-						openedProp = undefined
-					} else {
-						openedProp = inputSpecKey
-					}
-				}}
-			>
-				{inputSpecKey}
-				{#if input?.fieldType}
-					<Badge color={openedProp === inputSpecKey ? 'dark-blue' : 'blue'}>
-						{capitalize(fieldTypeToTsType(input.fieldType))}
-					</Badge>
-				{/if}
-			</div>
-			{#if inputSpecKey === openedProp}
-				<div class="flex flex-col w-full gap-2 my-2">
-					<ToggleButtonGroup
-						bind:selected={inputSpecs[inputSpecKey].type}
-						on:selected={({ detail }) => sanitizeInputSpec(detail, inputSpecKey)}
-					>
-						<ToggleButton position="left" value="static" startIcon={{ icon: faBolt }} size="xs">
-							Static
-						</ToggleButton>
-						<ToggleButton
-							position={userInputEnabled ? 'center' : 'right'}
-							value="output"
-							startIcon={{ icon: faLink }}
-							size="xs"
-						>
-							Dynamic
-						</ToggleButton>
-						{#if userInputEnabled}
-							<ToggleButton position="right" value="user" startIcon={{ icon: faUser }} size="xs">
-								User
-							</ToggleButton>
-						{/if}
-					</ToggleButtonGroup>
+{#if inputSpecs}
+	<div class="w-full flex flex-col gap-4">
+		{#each Object.keys(inputSpecs) as inputSpecKey, index (index)}
+			{@const input = inputSpecs[inputSpecKey]}
+			{#if true}
+				<div class="flex flex-col gap-2">
+					<div class="flex justify-between items-center">
+						<span class="text-xs font-semibold">{capitalize(inputSpecKey)}</span>
+
+						<div class="flex gap-2 items-center">
+							<Badge color="blue">
+								{input.fieldType === 'array' && input.subFieldType
+									? `${capitalize(fieldTypeToTsType(input.subFieldType))}[]`
+									: capitalize(fieldTypeToTsType(input.fieldType))}
+							</Badge>
+
+							<ToggleButtonGroup bind:selected={inputSpecs[inputSpecKey].type}>
+								<ToggleButton
+									position="left"
+									value="static"
+									startIcon={{ icon: faPen }}
+									size="xs"
+									iconOnly
+								/>
+								<ToggleButton
+									position={userInputEnabled ? 'center' : 'right'}
+									value="connected"
+									startIcon={{ icon: faArrowRight }}
+									size="xs"
+									iconOnly
+									disabled={staticOnly}
+								/>
+								{#if userInputEnabled}
+									<ToggleButton
+										position="right"
+										value="user"
+										startIcon={{ icon: faUser }}
+										size="xs"
+										iconOnly
+										disabled={staticOnly && !userInputEnabled}
+									/>
+								{/if}
+							</ToggleButtonGroup>
+						</div>
+					</div>
+
 					<InputsSpecEditor
-						bind:appInputTransform={inputSpecs[inputSpecKey]}
+						bind:componentInput={inputSpecs[inputSpecKey]}
 						canHide={userInputEnabled}
 					/>
 				</div>
 			{/if}
-		</div>
-	{/each}
-</div>
+		{/each}
+	</div>
+{:else}
+	<div class="text-gray-500 text-sm">No inputs</div>
+{/if}

package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte.d.ts

@@ -1,13 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { InputsSpec } from '../../types';
+import type { ConnectedAppInput, StaticAppInput, UserAppInput } from '../../inputType';
 declare const __propDef: {
     props: {
-        inputSpecs: InputsSpec;
+        inputSpecs: Record<string, StaticAppInput | ConnectedAppInput | UserAppInput>;
         userInputEnabled?: boolean | undefined;
+        staticOnly?: boolean | undefined;
     };
     events: {
-        keypress: KeyboardEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/apps/editor/settingsPanel/PickFlow.svelte

@@ -3,7 +3,8 @@ import { FlowService } from '../../../../gen';
 import { workspaceStore } from '../../../../stores';
 import { createEventDispatcher } from 'svelte';
 import Button from '../../../common/button/Button.svelte';
-import { Wind } from 'svelte-lucide';
+import { Icon } from 'svelte-awesome';
+import { faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
 let itemPicker;
 const dispatch = createEventDispatcher();
 async function loadItems() {
@@ -30,7 +31,7 @@ async function loadItems() {
 	color="light"
 >
 	<div class="flex justify-center flex-col items-center gap-2">
-		<Wind size="18px" />
+		<Icon data={faBarsStaggered} scale={0.8} class="mr-1" />
 
 		<span class="text-xs">Flow</span>
 	</div>