windmill-components 1.60.4 → 1.75.0

package/components/apps/editor/inlineScriptsPanel/utils.js

@@ -1,20 +1,61 @@
-export function getAppScripts(grid) {
-    return grid.reduce((acc, gridComponent) => {
-        const component = gridComponent.data;
+import { fieldTypeToTsType, schemaToInputsSpec } from '../../utils';
+// When the schema is loaded, we need to update the inputs spec
+// in order to render the inputs the component panel
+export function computeFields(schema, defaultUserInput, fields) {
+    let schemaCopy = JSON.parse(JSON.stringify(schema));
+    const result = {};
+    const newInputs = schemaToInputsSpec(schemaCopy, defaultUserInput);
+    if (!fields) {
+        return newInputs;
+    }
+    Object.keys(newInputs).forEach((key) => {
+        const newInput = newInputs[key];
+        const oldInput = fields[key];
+        // If the input is not present in the old inputs, add it
+        if (oldInput === undefined) {
+            result[key] = newInput;
+        }
+        else {
+            if (fieldTypeToTsType(newInput.fieldType) !== fieldTypeToTsType(oldInput.fieldType) ||
+                newInput.format !== oldInput.format ||
+                newInput.subFieldType !== oldInput.subFieldType) {
+                result[key] = newInput;
+            }
+            else {
+                result[key] = oldInput;
+            }
+        }
+    });
+    return result;
+}
+function processGridItemRunnable(gridItem, list) {
+    const component = gridItem.data;
+    if (component) {
         const componentInput = component.componentInput;
         if (component.type === 'tablecomponent') {
             component.actionButtons.forEach((actionButton) => {
                 if (actionButton.componentInput?.type !== 'runnable') {
                     return;
                 }
-                processRunnable(actionButton.componentInput.runnable, actionButton.id, acc);
+                processRunnable(actionButton.componentInput.runnable, actionButton.id, list);
             });
         }
         if (componentInput?.type === 'runnable') {
-            processRunnable(componentInput.runnable, gridComponent.id, acc);
+            processRunnable(componentInput.runnable, gridItem.id, list);
         }
-        return acc;
-    }, { inline: [], imported: [] });
+    }
+    return list;
+}
+export function getAppScripts(grid, subgrids) {
+    const scriptsList = grid.reduce((acc, gridComponent) => processGridItemRunnable(gridComponent, acc), { inline: [], imported: [] });
+    if (subgrids) {
+        Object.values(subgrids).forEach((subgrid) => {
+            subgrid.forEach((subgridComponent) => {
+                processGridItemRunnable(subgridComponent, scriptsList);
+            });
+        });
+    }
+    return scriptsList;
 }
 function processRunnable(runnable, id, list) {
     if (runnable?.type === undefined) {

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

@@ -4,7 +4,7 @@ import PanelSection from './common/PanelSection.svelte';
 export let component;
 </script>
 
-{#if component.verticalAlignment !== undefined}
+{#if component.horizontalAlignment || component.verticalAlignment}
 	<PanelSection title="Alignment">
 		<div class="flex flex-wrap gap-2">
 			{#if component.horizontalAlignment}

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppComponent } from '../../types';
+import type { AppComponent } from '../component';
 declare const __propDef: {
     props: {
         component: AppComponent;

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

@@ -1,9 +1,14 @@
 <script>import { Button } from '../../../common';
 import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
 import { staticValues } from '../componentsPanel/componentStaticValues';
 import SubTypeEditor from './SubTypeEditor.svelte';
 export let componentInput;
+const dispatch = createEventDispatcher();
 function addElementByType() {
+    if (!Array.isArray(componentInput.value)) {
+        componentInput.value = [];
+    }
     if (componentInput.subFieldType && componentInput.value) {
         if (componentInput.subFieldType === 'boolean') {
             componentInput.value.push(false);
@@ -14,6 +19,9 @@ function addElementByType() {
         else if (componentInput.subFieldType === 'object') {
             componentInput.value.push({});
         }
+        else if (componentInput.subFieldType === 'labeledresource') {
+            componentInput.value.push({ value: '', label: '' });
+        }
         else if (componentInput.subFieldType === 'text' ||
             componentInput.subFieldType === 'textarea' ||
             // TODO: Add support for these types
@@ -31,18 +39,19 @@ function addElementByType() {
 function deleteElementByType(index) {
     if (componentInput.value) {
         componentInput.value.splice(index, 1);
+        dispatch('deleteArrayItem', { index });
         componentInput = componentInput;
     }
 }
 </script>
 
 <div class="flex gap-2 flex-col mt-2">
-	{#if componentInput.value}
+	{#if Array.isArray(componentInput.value)}
 		{#each componentInput.value as value, index (index)}
 			<div class="flex flex-row gap-2 items-center relative">
 				<SubTypeEditor bind:componentInput bind:value />
 
-				<div class="absolute top-4 right-4">
+				<div class="absolute top-1 right-1">
 					<Button
 						size="xs"
 						color="light"
@@ -55,13 +64,8 @@ function deleteElementByType(index) {
 				</div>
 			</div>
 		{/each}
-		<Button
-			size="xs"
-			color="light"
-			startIcon={{ icon: faPlus }}
-			on:click={() => addElementByType()}
-		>
-			Add
-		</Button>
 	{/if}
+	<Button size="xs" color="light" startIcon={{ icon: faPlus }} on:click={() => addElementByType()}>
+		Add
+	</Button>
 </div>

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

@@ -5,43 +5,110 @@ declare const __propDef: {
             fieldType: "array";
             subFieldType?: "text" | undefined;
             format?: string | undefined;
+            fileUpload?: {
+                accept: string;
+                multiple?: boolean | undefined;
+                convertTo?: import("../../../common/fileInput/model").ReadFileAs | undefined;
+            } | undefined;
         }) | (import("../../inputType").StaticInput<string[]> & {
             fieldType: "array";
             subFieldType?: "textarea" | undefined;
             format?: string | undefined;
+            fileUpload?: {
+                accept: string;
+                multiple?: boolean | undefined;
+                convertTo?: import("../../../common/fileInput/model").ReadFileAs | undefined;
+            } | undefined;
         }) | (import("../../inputType").StaticInput<number[]> & {
             fieldType: "array";
             subFieldType?: "number" | undefined;
             format?: string | undefined;
+            fileUpload?: {
+                accept: string;
+                multiple?: boolean | undefined;
+                convertTo?: import("../../../common/fileInput/model").ReadFileAs | undefined;
+            } | undefined;
         }) | (import("../../inputType").StaticInput<boolean[]> & {
             fieldType: "array";
             subFieldType?: "boolean" | undefined;
             format?: string | undefined;
+            fileUpload?: {
+                accept: string;
+                multiple?: boolean | undefined;
+                convertTo?: import("../../../common/fileInput/model").ReadFileAs | undefined;
+            } | undefined;
         }) | (import("../../inputType").StaticInput<string[]> & {
             fieldType: "array";
             subFieldType?: "date" | undefined;
             format?: string | undefined;
+            fileUpload?: {
+                accept: string;
+                multiple?: boolean | undefined;
+                convertTo?: import("../../../common/fileInput/model").ReadFileAs | undefined;
+            } | undefined;
         }) | (import("../../inputType").StaticInput<string[]> & {
             fieldType: "array";
             subFieldType?: "time" | undefined;
             format?: string | undefined;
+            fileUpload?: {
+                accept: string;
+                multiple?: boolean | undefined;
+                convertTo?: import("../../../common/fileInput/model").ReadFileAs | undefined;
+            } | undefined;
         }) | (import("../../inputType").StaticInput<string[]> & {
             fieldType: "array";
             subFieldType?: "datetime" | undefined;
             format?: string | undefined;
+            fileUpload?: {
+                accept: string;
+                multiple?: boolean | undefined;
+                convertTo?: import("../../../common/fileInput/model").ReadFileAs | undefined;
+            } | undefined;
         }) | (import("../../inputType").StaticInput<object[]> & {
             fieldType: "array";
             subFieldType?: "object" | undefined;
             format?: string | undefined;
+            fileUpload?: {
+                accept: string;
+                multiple?: boolean | undefined;
+                convertTo?: import("../../../common/fileInput/model").ReadFileAs | undefined;
+            } | undefined;
         }) | (import("../../inputType").StaticInput<string[]> & {
             fieldType: "array";
             subFieldType?: "select" | undefined;
             format?: string | undefined;
+            fileUpload?: {
+                accept: string;
+                multiple?: boolean | undefined;
+                convertTo?: import("../../../common/fileInput/model").ReadFileAs | undefined;
+            } | undefined;
         } & {
-            optionValuesKey: "buttonColorOptions" | "buttonSizeOptions" | "tableSearchOptions" | "chartThemeOptions" | "textStyleOptions";
+            optionValuesKey: "buttonColorOptions" | "buttonSizeOptions" | "tableSearchOptions" | "chartThemeOptions" | "textStyleOptions" | "currencyOptions" | "localeOptions" | "objectFitOptions" | "splitPanelOptions";
+        }) | (import("../../inputType").StaticInput<string[]> & {
+            fieldType: "array";
+            subFieldType?: "select" | undefined;
+            format?: string | undefined;
+            fileUpload?: {
+                accept: string;
+                multiple?: boolean | undefined;
+                convertTo?: import("../../../common/fileInput/model").ReadFileAs | undefined;
+            } | undefined;
+        } & {
+            optionValuesKey: "buttonColorOptions" | "buttonSizeOptions" | "tableSearchOptions" | "chartThemeOptions" | "textStyleOptions" | "currencyOptions" | "localeOptions" | "objectFitOptions" | "splitPanelOptions";
+        }) | (import("../../inputType").StaticInput<object[]> & {
+            fieldType: "array";
+            subFieldType?: "labeledresource" | undefined;
+            format?: string | undefined;
+            fileUpload?: {
+                accept: string;
+                multiple?: boolean | undefined;
+                convertTo?: import("../../../common/fileInput/model").ReadFileAs | undefined;
+            } | undefined;
         });
     };
     events: {
+        deleteArrayItem: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

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

@@ -3,7 +3,7 @@ import { faArrowRight, faCode, faPen } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 export let componentInput;
 export let disableStatic = false;
-const { onchange } = getContext('AppEditorContext');
+const { onchange } = getContext('AppViewerContext');
 $: if (componentInput.fieldType == 'template' && componentInput.type == 'static') {
     //@ts-ignore
     componentInput.type = 'template';

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

@@ -1,5 +1,5 @@
 <script>import Button from '../../../common/button/Button.svelte';
-import { 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';
@@ -15,51 +15,65 @@ import ComponentInputTypeEditor from './ComponentInputTypeEditor.svelte';
 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';
 export let component;
-export let onDelete = undefined;
 export let rowColumns = false;
-const { app, staticOutputs, runnableComponents, selectedComponent, worldStore } = getContext('AppEditorContext');
+export let onDelete = undefined;
+export let parent;
+export let noGrid = false;
+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;
-    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);
-            // Delete static inputs
-            delete $staticOutputs[component.id];
-            $staticOutputs = $staticOutputs;
-            delete $runnableComponents[component.id];
-            $runnableComponents = $runnableComponents;
-        }
-    }
-    if (component &&
-        component.componentInput?.type === 'runnable' &&
-        component.componentInput?.runnable?.type === 'runnableByName') {
-        const { name, inlineScript } = component.componentInput.runnable;
-        if (inlineScript) {
-            if (!$app.unusedInlineScripts) {
-                $app.unusedInlineScripts = [];
-            }
-            $app.unusedInlineScripts.push({
-                name,
-                inlineScript
-            });
+    $focusedGrid = undefined;
+    if (component && !noGrid) {
+        let ids = deleteGridItem($app, component, parent, false);
+        for (const key of ids) {
+            delete $staticOutputs[key];
+            delete $runnableComponents[key];
         }
     }
+    delete $staticOutputs[component.id];
+    delete $runnableComponents[component.id];
+    $app = $app;
+    $staticOutputs = $staticOutputs;
+    $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}
@@ -100,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
@@ -143,15 +161,66 @@ $: extraLib =
 			</PanelSection>
 		{/if}
 
-		{#if component.type === 'tablecomponent' && Array.isArray(component.actionButtons)}
+		{#if component.type === 'tabscomponent'}
+			<GridTab bind:tabs={component.tabs} {component} />
+		{: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}
 
 		<AlignmentEditor bind:component />
-		{#if component.type === 'buttoncomponent' || component.type === 'formcomponent'}
+		{#if component.type === 'buttoncomponent' || component.type === 'formcomponent' || component.type === 'formbuttoncomponent'}
 			<Recompute bind:recomputeIds={component.recomputeIds} ownId={component.id} />
 		{/if}
 
+		{#if Object.keys(component.customCss ?? {}).length > 0}
+			<PanelSection title="Custom CSS">
+				<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}
+
+		{#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>
+		{/if}
+
 		<PanelSection title="Danger zone">
 			<Button
 				size="xs"

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

@@ -1,10 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppComponent } from '../../types';
+import type { AppComponent } from '../component';
 declare const __propDef: {
     props: {
-        component: AppComponent | undefined;
-        onDelete?: (() => void) | undefined;
+        component: AppComponent;
         rowColumns?: boolean | undefined;
+        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 {};