windmill-components 1.70.0 → 1.75.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';
@@ -21,22 +21,29 @@ 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';
 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');
+export let duplicateMoveAllowed = true;
+const { app, staticOutputs, runnableComponents, selectedComponent, worldStore, focusedGrid, stateId } = getContext('AppViewerContext');
+const { history } = getContext('AppEditorContext');
 function duplicateElement(id) {
+    push(history, $app);
     $dirtyStore = true;
     const newId = duplicateGridItem($app, parent, id);
     $selectedComponent = newId;
 }
 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,12 +56,24 @@ function removeGridElement() {
     $runnableComponents = $runnableComponents;
     onDelete?.();
 }
+let viewCssOptions = false;
 $: extraLib =
     component?.componentInput?.type === 'template' && $worldStore
         ? buildExtraLib($worldStore?.outputsById ?? {}, component?.id, 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">
 		{#if component.componentInput}
@@ -95,38 +114,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 +163,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}
 
@@ -153,34 +176,50 @@ $: extraLib =
 
 		{#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>
+		{#if duplicateMoveAllowed}
+			<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="Move to other grid">
+				<MoveToOtherGrid bind:component {parent} />
+			</PanelSection>
+		{/if}
 
 		<PanelSection title="Danger zone">
 			<Button

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

@@ -5,7 +5,7 @@ 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 +18,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,10 +41,10 @@ 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

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/MoveToOtherGrid.svelte

@@ -1,12 +1,14 @@
 <script>import { Button } from '../../../common';
 import { dirtyStore } from '../../../common/confirmationModal/dirtyStore';
+import { push } from '../../../../history';
 import { faCopy } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
-import { createNewGridItem, deleteGridItem, findGridItem, insertNewGridItem } from '../appUtils';
+import { createNewGridItem, deleteGridItem, findGridItem, getAllSubgridsAndComponentIds, insertNewGridItem } from '../appUtils';
 export let component;
 export let parent;
 let selectedOption;
-const { app } = getContext('AppEditorContext');
+const { app } = getContext('AppViewerContext');
+const { history } = getContext('AppEditorContext');
 function listAllSubGrids(app) {
     return app.subgrids ? Object.keys(app.subgrids) : [];
 }
@@ -16,15 +18,18 @@ function findAndDelete(id) {
         return;
     }
     const data = JSON.parse(JSON.stringify(node.data));
+    const shouldKeepSubGrid = data.numberOfSubgrids ? data.numberOfSubgrids >= 1 : false;
     $dirtyStore = true;
-    deleteGridItem($app, data, parent);
+    deleteGridItem($app, data, parent, shouldKeepSubGrid);
     return data;
 }
 function insertComponentInSubGrid(data, targetId, targetSubGridIndex) {
-    insertNewGridItem($app, data, {
+    push(history, $app);
+    const focusedGrid = {
         parentComponentId: targetId,
         subGridIndex: targetSubGridIndex
-    }, true);
+    };
+    insertNewGridItem($app, data, focusedGrid, true);
     $app.grid = [...$app.grid];
 }
 function insertComponentInMainGrid(data) {
@@ -32,6 +37,7 @@ function insertComponentInMainGrid(data) {
     $app.grid = [...$app.grid, newComponent];
 }
 function onMove(component) {
+    push(history, $app);
     const data = findAndDelete(component.id);
     if (!data) {
         return;
@@ -49,6 +55,7 @@ const defaultOption = {
     value: 'main-grid',
     disabled: parent === undefined
 };
+$: [subgrids] = component ? getAllSubgridsAndComponentIds($app, component) : [[], []];
 $: availableGrids = listAllSubGrids($app);
 $: options = availableGrids
     ? [
@@ -56,7 +63,7 @@ $: options = availableGrids
         ...availableGrids?.map((grid) => ({
             label: grid,
             value: grid,
-            disabled: grid === parent || (component && grid.startsWith(component.id))
+            disabled: grid === parent || subgrids.includes(grid)
         }))
     ]
     : [defaultOption];

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];

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() {

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 = {
@@ -37,6 +37,30 @@ function addComponent() {
                 fieldType: 'boolean',
                 type: 'eval',
                 expr: 'false'
+            },
+            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 +71,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 } = getContext('AppViewerContext');
 function applyConnection() {
     if (!$connectingInput.opened &&
         $connectingInput.input !== undefined &&

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

@@ -4,7 +4,7 @@ import { buildExtraLib } from '../../../utils';
 export let componentInput;
 export let id;
 export let hasRows = false;
-const { onchange, worldStore } = getContext('AppEditorContext');
+const { onchange, worldStore } = getContext('AppViewerContext');
 $: componentInput && onchange?.();
 $: extraLib =
     componentInput?.expr && $worldStore