windmill-components 1.70.0 → 1.77.0

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

@@ -1,5 +1,5 @@
 <script>import Button from '../../../common/button/Button.svelte';
-import { faCopy, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { faChevronDown, faChevronUp, faCopy, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import PanelSection from './common/PanelSection.svelte';
 import InputsSpecsEditor from './InputsSpecsEditor.svelte';
@@ -16,27 +16,26 @@ import AlignmentEditor from './AlignmentEditor.svelte';
 import RunnableInputEditor from './inputEditor/RunnableInputEditor.svelte';
 import TemplateEditor from '../../../TemplateEditor.svelte';
 import CssProperty from '../componentsPanel/CssProperty.svelte';
-import { dirtyStore } from '../../../common/confirmationModal/dirtyStore';
 import GridTab from './GridTab.svelte';
-import { duplicateGridItem } from '../appUtils';
 import { deleteGridItem } from '../appUtils';
-import MoveToOtherGrid from './MoveToOtherGrid.svelte';
+import GridPane from './GridPane.svelte';
+import { slide } from 'svelte/transition';
+import { push } from '../../../../history';
+import Kbd from '../../../common/kbd/Kbd.svelte';
 export let component;
 export let rowColumns = false;
 export let onDelete = undefined;
 export let parent;
 export let noGrid = false;
-const { app, staticOutputs, runnableComponents, selectedComponent, worldStore, focusedGrid } = getContext('AppEditorContext');
-function duplicateElement(id) {
-    $dirtyStore = true;
-    const newId = duplicateGridItem($app, parent, id);
-    $selectedComponent = newId;
-}
+export let duplicateMoveAllowed = true;
+const { app, staticOutputs, runnableComponents, selectedComponent, worldStore, focusedGrid, stateId, state } = getContext('AppViewerContext');
+const { history } = getContext('AppEditorContext');
 function removeGridElement() {
+    push(history, $app);
     $selectedComponent = undefined;
     $focusedGrid = undefined;
     if (component && !noGrid) {
-        let ids = deleteGridItem($app, component, parent);
+        let ids = deleteGridItem($app, component, parent, false);
         for (const key of ids) {
             delete $staticOutputs[key];
             delete $runnableComponents[key];
@@ -49,14 +48,26 @@ function removeGridElement() {
     $runnableComponents = $runnableComponents;
     onDelete?.();
 }
+let viewCssOptions = false;
 $: extraLib =
     component?.componentInput?.type === 'template' && $worldStore
-        ? buildExtraLib($worldStore?.outputsById ?? {}, component?.id, false)
+        ? buildExtraLib($worldStore?.outputsById ?? {}, component?.id, false, $state, false)
         : undefined;
+function keydown(event) {
+    switch (event.key) {
+        case 'Delete': {
+            removeGridElement();
+            event.stopPropagation();
+            break;
+        }
+    }
+}
 </script>
 
+<svelte:window on:keydown={keydown} />
+
 {#if component}
-	<div class="flex flex-col min-w-[150px] w-full divide-y">
+	<div class="flex min-h-full flex-col min-w-[150px] w-full divide-y">
 		{#if component.componentInput}
 			<PanelSection
 				smallPadding
@@ -95,38 +106,42 @@ $: extraLib =
 					{:else if component.componentInput?.type === 'runnable' && component.componentInput !== undefined}
 						<RunnableInputEditor
 							bind:appInput={component.componentInput}
-							defaultUserInput={component.type == 'formcomponent'}
+							defaultUserInput={component.type == 'formcomponent' ||
+								component.type == 'formbuttoncomponent'}
 						/>
 					{/if}
 				</div>
-				{#if component.componentInput?.type === 'runnable' && Object.keys(component.componentInput.fields ?? {}).length > 0}
-					<div class="border w-full">
-						<PanelSection
-							smallPadding
-							title={`Runnable Inputs (${
-								Object.keys(component.componentInput.fields ?? {}).length
-							})`}
-						>
-							<svelte:fragment slot="action">
-								<Tooltip>
-									The runnable inputs of a button component are not settable by the user. They must
-									be defined statically or connected.
-								</Tooltip>
-							</svelte:fragment>
+				{#key $stateId}
+					{#if component.componentInput?.type === 'runnable'}
+						{#if Object.keys(component.componentInput.fields ?? {}).length > 0}
+							<div class="border w-full">
+								<PanelSection
+									smallPadding
+									title={`Runnable Inputs (${
+										Object.keys(component.componentInput.fields ?? {}).length
+									})`}
+								>
+									<svelte:fragment slot="action">
+										<Tooltip>
+											The runnable inputs of a button component are not settable by the user. They
+											must be defined statically or connected.
+										</Tooltip>
+									</svelte:fragment>
 
-							<InputsSpecsEditor
-								id={component.id}
-								shouldCapitalize={false}
-								bind:inputSpecs={component.componentInput.fields}
-								userInputEnabled={component.type !== 'buttoncomponent'}
-								{rowColumns}
-							/>
-						</PanelSection>
-					</div>
-				{/if}
+									<InputsSpecsEditor
+										id={component.id}
+										shouldCapitalize={false}
+										bind:inputSpecs={component.componentInput.fields}
+										userInputEnabled={component.type !== 'buttoncomponent'}
+										{rowColumns}
+									/>
+								</PanelSection>
+							</div>
+						{/if}
+					{/if}
+				{/key}
 			</PanelSection>
 		{/if}
-
 		{#if Object.values(component.configuration).length > 0}
 			<PanelSection title={`Configuration (${Object.values(component.configuration).length})`}>
 				<InputsSpecsEditor
@@ -140,9 +155,9 @@ $: extraLib =
 
 		{#if component.type === 'tabscomponent'}
 			<GridTab bind:tabs={component.tabs} {component} />
-		{/if}
-
-		{#if component.type === 'tablecomponent' && Array.isArray(component.actionButtons)}
+		{:else if component.type === 'verticalsplitpanescomponent' || component.type === 'horizontalsplitpanescomponent'}
+			<GridPane bind:panes={component.panes} {component} />
+		{:else if component.type === 'tablecomponent' && Array.isArray(component.actionButtons)}
 			<TableActions id={component.id} bind:components={component.actionButtons} />
 		{/if}
 
@@ -151,47 +166,72 @@ $: extraLib =
 			<Recompute bind:recomputeIds={component.recomputeIds} ownId={component.id} />
 		{/if}
 
+		<div class="grow shrink" />
+
 		{#if Object.keys(component.customCss ?? {}).length > 0}
 			<PanelSection title="Custom CSS">
-				{#each Object.keys(component.customCss ?? {}) as name}
-					{#if component?.customCss?.[name]}
-						<div class="mb-2">
-							<CssProperty {name} bind:value={component.customCss[name]} />
-						</div>
-					{/if}
-				{/each}
+				<div slot="action">
+					<Button
+						color="light"
+						size="xs"
+						endIcon={{ icon: viewCssOptions ? faChevronUp : faChevronDown }}
+						on:click={() => (viewCssOptions = !viewCssOptions)}
+					>
+						{viewCssOptions ? 'Hide' : 'Show'}
+					</Button>
+				</div>
+				{#if viewCssOptions}
+					<div transition:slide|local>
+						{#each Object.keys(component.customCss ?? {}) as name}
+							{#if component?.customCss?.[name]}
+								<div class="w-full mb-2">
+									<CssProperty {name} bind:value={component.customCss[name]} />
+								</div>
+							{/if}
+						{/each}
+					</div>
+				{/if}
 			</PanelSection>
 		{/if}
 
-		<PanelSection title="Duplicate">
-			<Button
-				size="xs"
-				color="dark"
-				startIcon={{ icon: faCopy }}
-				on:click={() => {
-					if (component) {
-						duplicateElement(component.id)
-					}
-				}}
-			>
-				Duplicate component: {component.id}
-			</Button>
-		</PanelSection>
-
-		<PanelSection title="Move to other grid">
-			<MoveToOtherGrid bind:component {parent} />
-		</PanelSection>
-
-		<PanelSection title="Danger zone">
-			<Button
-				size="xs"
-				color="red"
-				variant="border"
-				startIcon={{ icon: faTrashAlt }}
-				on:click={removeGridElement}
-			>
-				Delete component: {component.id}
-			</Button>
-		</PanelSection>
+		{#if duplicateMoveAllowed}
+			<PanelSection title="Copy/Move">
+				<div slot="action">
+					<Button size="xs" color="red" variant="border" on:click={removeGridElement}>
+						Delete&nbsp;&nbsp;
+						<Kbd>Del</Kbd>
+					</Button>
+				</div>
+				<div class="flex flex-col">
+					<div
+						><span class="text-gray-600 text-xs mr-2">Copy:</span><Kbd>CTRL+C</Kbd> + <Kbd
+							>CTRL+V</Kbd
+						></div
+					>
+					<!-- <Button
+					size="xs"
+					color="dark"
+					startIcon={{ icon: faCopy }}
+					on:click={() => {
+						if (component) {
+							duplicateElement(component.id)
+						}
+					}}
+				>
+					Duplicate component: {component.id}
+				</Button> -->
+					<div
+						><span class="text-gray-600 text-xs mr-2">Move:</span><Kbd>CTRL+X</Kbd> + <Kbd
+							>CTRL+V</Kbd
+						></div
+					>
+					<div
+						><span class="text-gray-600 text-xs mr-2">Navigate:</span><Kbd>&leftarrow;</Kbd><Kbd
+							>&uparrow;</Kbd
+						><Kbd>&rightarrow;</Kbd><Kbd>ESC</Kbd></div
+					>
+				</div>
+			</PanelSection>
+		{/if}
 	</div>
 {/if}

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

@@ -7,6 +7,7 @@ declare const __propDef: {
         onDelete?: (() => void) | undefined;
         parent: string | undefined;
         noGrid?: boolean | undefined;
+        duplicateMoveAllowed?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -0,0 +1,75 @@
+<script>import Button from '../../../common/button/Button.svelte';
+import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import { deleteGridItem } from '../appUtils';
+import PanelSection from './common/PanelSection.svelte';
+export let panes;
+export let component;
+const { app, staticOutputs, runnableComponents } = getContext('AppViewerContext');
+function addTab() {
+    const numberOfPanes = panes.length;
+    panes = Array(panes.length + 1)
+        .fill(0)
+        .map((_) => Math.floor(100 / (panes.length + 1)));
+    if (!$app.subgrids) {
+        $app.subgrids = {};
+    }
+    $app.subgrids[`${component.id}-${numberOfPanes}`] = [];
+    component.numberOfSubgrids = panes.length;
+}
+function deleteSubgrid(index) {
+    let subgrid = `${component.id}-${index}`;
+    for (const item of $app.subgrids[subgrid]) {
+        const components = deleteGridItem($app, item.data, subgrid, false);
+        console.log(components);
+        for (const key in components) {
+            delete $staticOutputs[key];
+            delete $runnableComponents[key];
+        }
+    }
+    $staticOutputs = $staticOutputs;
+    $runnableComponents = $runnableComponents;
+    for (let i = index; i < panes.length - 1; i++) {
+        $app.subgrids[`${component.id}-${i}`] = $app.subgrids[`${component.id}-${i + 1}`];
+    }
+    panes.splice(index, 1);
+    panes = panes;
+    component.numberOfSubgrids = panes.length;
+    $app = $app;
+}
+</script>
+
+<PanelSection title={`panes ${panes.length > 0 ? `(${panes.length})` : ''}`}>
+	{#if panes.length == 0}
+		<span class="text-xs text-gray-500">No panes</span>
+	{/if}
+	<div class="w-full flex gap-2 flex-col mt-2">
+		{#each panes as value, index (index)}
+			<div class="w-full flex flex-row gap-2 items-center relative">
+				<input on:keydown|stopPropagation type="number" bind:value />
+
+				<div class="absolute top-1 right-1">
+					<Button
+						size="xs"
+						color="light"
+						variant="border"
+						on:click={() => {
+							deleteSubgrid(index)
+						}}
+						iconOnly
+						btnClasses="!text-red-500"
+						startIcon={{ icon: faTrashAlt }}
+					/>
+				</div>
+			</div>
+		{/each}
+		<Button
+			size="xs"
+			color="light"
+			variant="border"
+			startIcon={{ icon: faPlus }}
+			on:click={addTab}
+			iconOnly
+		/>
+	</div>
+</PanelSection>

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppComponent } from '../component';
+declare const __propDef: {
+    props: {
+        panes: number[];
+        component: AppComponent;
+    };
+    events: {
+        keydown: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridPaneProps = typeof __propDef.props;
+export type GridPaneEvents = typeof __propDef.events;
+export type GridPaneSlots = typeof __propDef.slots;
+export default class GridPane extends SvelteComponentTyped<GridPaneProps, GridPaneEvents, GridPaneSlots> {
+}
+export {};

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

@@ -1,11 +1,13 @@
 <script>import Button from '../../../common/button/Button.svelte';
+import CloseButton from '../../../common/CloseButton.svelte';
 import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { CrossIcon } from 'lucide-svelte';
 import { getContext } from 'svelte';
 import { deleteGridItem } from '../appUtils';
 import PanelSection from './common/PanelSection.svelte';
 export let tabs;
 export let component;
-const { app, staticOutputs, runnableComponents } = getContext('AppEditorContext');
+const { app, staticOutputs, runnableComponents, focusedGrid } = getContext('AppViewerContext');
 function addTab() {
     const numberOfTabs = tabs.length;
     tabs = [...tabs, `Tab ${numberOfTabs + 1}`];
@@ -18,7 +20,7 @@ function addTab() {
 function deleteSubgrid(index) {
     let subgrid = `${component.id}-${index}`;
     for (const item of $app.subgrids[subgrid]) {
-        const components = deleteGridItem($app, item.data, subgrid);
+        const components = deleteGridItem($app, item.data, subgrid, false);
         console.log(components);
         for (const key in components) {
             delete $staticOutputs[key];
@@ -41,23 +43,13 @@ function deleteSubgrid(index) {
 	{#if tabs.length == 0}
 		<span class="text-xs text-gray-500">No Tabs</span>
 	{/if}
-	<div class="flex gap-2 flex-col mt-2">
+	<div class="w-full flex gap-2 flex-col mt-2">
 		{#each tabs as value, index (index)}
-			<div class="flex flex-row gap-2 items-center relative">
-				<input type="text" bind:value />
+			<div class="w-full flex flex-row gap-2 items-center relative">
+				<input on:keydown|stopPropagation type="text" bind:value />
 
-				<div class="absolute top-1 right-1">
-					<Button
-						size="xs"
-						color="light"
-						variant="border"
-						on:click={() => {
-							deleteSubgrid(index)
-						}}
-						iconOnly
-						btnClasses="!text-red-500"
-						startIcon={{ icon: faTrashAlt }}
-					/>
+				<div class="absolute right-1">
+					<CloseButton noBg on:close={() => deleteSubgrid(index)} />
 				</div>
 			</div>
 		{/each}

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

@@ -6,6 +6,8 @@ declare const __propDef: {
         component: AppComponent;
     };
     events: {
+        keydown: KeyboardEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

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

@@ -1,4 +1,5 @@
-<script>import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
+<script>import VariableEditor from '../../../VariableEditor.svelte';
+import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
 import EvalInputEditor from './inputEditor/EvalInputEditor.svelte';
 import RowInputEditor from './inputEditor/RowInputEditor.svelte';
 import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';

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

@@ -12,7 +12,7 @@ export let userInputEnabled = true;
 export let shouldCapitalize = true;
 export let rowColumns = false;
 export let resourceOnly = false;
-const { connectingInput } = getContext('AppEditorContext');
+const { connectingInput } = getContext('AppViewerContext');
 </script>
 
 {#if inputSpecs}

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

@@ -3,7 +3,7 @@ import { getContext } from 'svelte';
 import PanelSection from './common/PanelSection.svelte';
 export let recomputeIds = undefined;
 export let ownId;
-const { runnableComponents } = getContext('AppEditorContext');
+const { runnableComponents } = getContext('AppViewerContext');
 function onChange(event, id) {
     if (event.currentTarget.checked) {
         recomputeIds = [...(recomputeIds ?? []), id];
@@ -38,6 +38,7 @@ function onChange(event, id) {
 						</td>
 						<td class="relative whitespace-nowrap px-4 py-2 ">
 							<input
+								class="windmillapp"
 								type="checkbox"
 								on:change={(event) => onChange(event, id)}
 								checked={recomputeIds?.includes(id)}

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

@@ -4,7 +4,7 @@ import { faClose, faEdit } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import { clearResultAppInput } from '../../utils';
 import InlineScriptEditorDrawer from '../inlineScriptsPanel/InlineScriptEditorDrawer.svelte';
-const { app } = getContext('AppEditorContext');
+const { app } = getContext('AppViewerContext');
 export let appInput;
 let inlineScriptEditorDrawer;
 function edit() {
@@ -63,3 +63,9 @@ function clear() {
 		Please configure the language in the inline script panel
 	</span>
 {/if}
+{#if appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript?.language === 'frontend'}
+	<span class="text-xs text-gray-500">
+		If the component is a display component. The script will be recomputed upon any changes to any
+		output or to the state.
+	</span>
+{/if}

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

@@ -9,7 +9,7 @@ import PanelSection from './common/PanelSection.svelte';
 import TableActionLabel from './TableActionLabel.svelte';
 export let components;
 export let id;
-const { selectedComponent, staticOutputs } = getContext('AppEditorContext');
+const { selectedComponent, staticOutputs } = getContext('AppViewerContext');
 function addComponent() {
     const actionId = getNextId(components.map((x) => x.id.split('_')[1]));
     const newComponent = {
@@ -36,7 +36,32 @@ function addComponent() {
             disabled: {
                 fieldType: 'boolean',
                 type: 'eval',
-                expr: 'false'
+                expr: 'false',
+                tooltip: "Disabled based on a predicate.  Use `row` to access the current row's data"
+            },
+            goto: {
+                tooltip: 'Go to an url on success if not empty',
+                fieldType: 'text',
+                type: 'static',
+                value: ''
+            },
+            gotoNewTab: {
+                tooltip: 'Go to create a new tab',
+                fieldType: 'boolean',
+                type: 'static',
+                value: true
+            },
+            beforeIcon: {
+                type: 'static',
+                value: undefined,
+                fieldType: 'icon-select',
+                onlyStatic: true
+            },
+            afterIcon: {
+                type: 'static',
+                value: undefined,
+                fieldType: 'icon-select',
+                onlyStatic: true
             }
         },
         componentInput: {
@@ -47,6 +72,9 @@ function addComponent() {
             value: undefined
         },
         recomputeIds: undefined,
+        customCss: {
+            button: { style: '', class: '' }
+        },
         card: false
     };
     components = [...components, newComponent];

package/components/apps/editor/settingsPanel/common/PanelSection.svelte

@@ -15,12 +15,12 @@ export let tooltip = '';
 	)}
 >
 	<div class="flex justify-between flex-wrap items-center w-full gap-1">
-		<div class="text-sm inline-flex items-center font-extrabold {titlePadding}">
+		<div class="text-sm inline-flex items-center font-extrabold {titlePadding} gap-1">
 			<span class="truncate">
 				{title}
 			</span>
 			{#if tooltip}
-				<Tooltip>
+				<Tooltip light>
 					{tooltip}
 				</Tooltip>
 			{/if}

package/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte

@@ -0,0 +1,48 @@
+<script>import ColorPicker, { ChromeVariant } from 'svelte-awesome-color-picker';
+export let componentInput;
+let isOpen = false;
+</script>
+
+<div class="color-picker-input">
+	<input
+		type="text"
+		readonly
+		value={componentInput.value}
+		on:focus|preventDefault|stopPropagation={() => (isOpen = true)}
+	/>
+	<ColorPicker
+		bind:isOpen
+		bind:hex={componentInput.value}
+		label={componentInput.value}
+		canChangeMode={false}
+		components={ChromeVariant}
+		toRight
+		--focus-color="#e0e7ff"
+	/>
+</div>
+
+<style global>
+	:global(.color-picker-input) :global(span) > :global(label.svelte-rogbpz) {
+		display: none;
+	}
+
+	:global(.color-picker-input) :global(span) > :global(div.wrapper) {
+		box-shadow: 0 10px 40px -5px rgba(0, 0, 0, 0.25) !important;
+		border-style: none !important;
+		border-radius: 0.375rem !important;
+	}
+
+	:global(.color-picker-input) :global(.slider-wrapper) {
+		overflow: visible !important;
+	}
+
+	:global(.color-picker-input) :global(.slider-indicator) {
+		width: 14px !important;
+		height: 14px !important;
+		border-radius: 7px !important;
+		margin-top: 0 !important;
+		background-color: #fafafa !important;
+		border: 1px solid #2e2e2eaf !important;
+		top: -2px !important;
+		box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.5) !important;
+	}</style>

package/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput, StaticInput } from '../../../inputType';
+declare const __propDef: {
+    props: {
+        componentInput: StaticInput<string> & Extract<AppInput, {
+            fieldType: 'color';
+        }>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ColorInputProps = typeof __propDef.props;
+export type ColorInputEvents = typeof __propDef.events;
+export type ColorInputSlots = typeof __propDef.slots;
+export default class ColorInput extends SvelteComponentTyped<ColorInputProps, ColorInputEvents, ColorInputSlots> {
+}
+export {};

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

@@ -2,7 +2,7 @@
 import { faArrowRight, faClose } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 export let componentInput;
-const { connectingInput } = getContext('AppEditorContext');
+const { connectingInput, app } = getContext('AppViewerContext');
 function applyConnection() {
     if (!$connectingInput.opened &&
         $connectingInput.input !== undefined &&
@@ -15,13 +15,6 @@ function applyConnection() {
         };
     }
 }
-function startConnecting() {
-    $connectingInput = {
-        opened: true,
-        input: undefined,
-        hoveredComponent: undefined
-    };
-}
 $: $connectingInput && applyConnection();
 </script>
 
@@ -47,6 +40,7 @@ $: $connectingInput && applyConnection();
 			if (componentInput.type === 'connected') {
 				componentInput.connection = undefined
 			}
+			$app = $app
 		}}
 	>
 		Disconnect