windmill-components 1.60.3 → 1.83.1

package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelWithTable.svelte

@@ -0,0 +1,29 @@
+<script>import { getContext } from 'svelte';
+import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte';
+const { selectedComponentInEditor } = getContext('AppEditorContext');
+export let gridItem;
+</script>
+
+{#if gridItem?.data?.id === $selectedComponentInEditor || gridItem?.data?.id + '_transformer' === $selectedComponentInEditor}
+	<InlineScriptEditorPanel
+		defaultUserInput={gridItem.data?.type == 'formcomponent' ||
+			gridItem?.data?.type == 'formbuttoncomponent'}
+		id={gridItem.data.id}
+		componentType={gridItem.data.type}
+		transformer={$selectedComponentInEditor?.endsWith('_transformer')}
+		bind:componentInput={gridItem.data.componentInput}
+	/>
+{/if}
+
+{#if gridItem?.data?.type === 'tablecomponent'}
+	{#each gridItem.data.actionButtons as actionButton, index (index)}
+		{#if actionButton?.id === $selectedComponentInEditor || actionButton?.id + '_transformer' === $selectedComponentInEditor}
+			<InlineScriptEditorPanel
+				componentType={actionButton.type}
+				id={actionButton.id}
+				transformer={$selectedComponentInEditor?.endsWith('_transformer')}
+				bind:componentInput={actionButton.componentInput}
+			/>
+		{/if}
+	{/each}
+{/if}

package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelWithTable.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { GridItem } from '../../types';
+declare const __propDef: {
+    props: {
+        gridItem: GridItem;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InlineScriptsPanelWithTableProps = typeof __propDef.props;
+export type InlineScriptsPanelWithTableEvents = typeof __propDef.events;
+export type InlineScriptsPanelWithTableSlots = typeof __propDef.slots;
+export default class InlineScriptsPanelWithTable extends SvelteComponentTyped<InlineScriptsPanelWithTableProps, InlineScriptsPanelWithTableEvents, InlineScriptsPanelWithTableSlots> {
+}
+export {};

package/components/apps/editor/inlineScriptsPanel/utils.d.ts

@@ -1,15 +1,17 @@
-import type { AppComponent, GridItem } from "../../types";
+import type { Schema } from '../../../../common';
+import type { AppInputs } from '../../inputType';
+import type { GridItem } from '../../types';
 export interface AppScriptsList {
     inline: {
         name: string;
         id: string;
+        transformer: boolean;
     }[];
     imported: {
         name: string;
         id: string;
+        transformer: boolean;
     }[];
 }
-export declare function getAppScripts(grid: GridItem[]): FilledItem<{
-    data: AppComponent;
-    id: string;
-}>;
+export declare function computeFields(schema: Schema, defaultUserInput: boolean, fields: AppInputs): Record<string, import("../../inputType").StaticAppInput>;
+export declare function getAppScripts(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): AppScriptsList;

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

@@ -1,28 +1,70 @@
-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.componentInput.transformer, actionButton.id, list);
             });
         }
         if (componentInput?.type === 'runnable') {
-            processRunnable(componentInput.runnable, gridComponent.id, acc);
+            processRunnable(componentInput.runnable, componentInput.transformer, 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: [], transformer: false });
+    if (subgrids) {
+        Object.values(subgrids).forEach((subgrid) => {
+            subgrid.forEach((subgridComponent) => {
+                processGridItemRunnable(subgridComponent, scriptsList);
+            });
+        });
+    }
+    return scriptsList;
 }
-function processRunnable(runnable, id, list) {
+function processRunnable(runnable, transformer, id, list) {
     if (runnable?.type === undefined) {
         return;
     }
     const type = runnable.type === 'runnableByPath' ? 'imported' : 'inline';
     list[type].push({
         name: runnable[runnable.type === 'runnableByPath' ? 'path' : 'name'],
-        id
+        id,
+        transformer: transformer !== undefined
     });
 }

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

@@ -1,17 +1,22 @@
 <script>import { ToggleButton, ToggleButtonGroup } from '../../../common';
 import { AlignCenterHorizontal, AlignCenterVertical, AlignEndHorizontal, AlignEndVertical, AlignStartHorizontal, AlignStartVertical } from 'lucide-svelte';
+import { getContext } from 'svelte';
 import PanelSection from './common/PanelSection.svelte';
+const { app } = getContext('AppViewerContext');
 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}
 				<div class="flex flex-col gap-0.5">
 					<div class="text-xs font-semibold">Horizontal</div>
 					<div>
-						<ToggleButtonGroup bind:selected={component.horizontalAlignment}>
+						<ToggleButtonGroup
+							on:selected={() => (component = component)}
+							bind:selected={component.horizontalAlignment}
+						>
 							<ToggleButton position="left" value="left" size="xs">
 								<AlignStartVertical size={16} />
 							</ToggleButton>
@@ -29,7 +34,10 @@ export let component;
 				<div class="flex flex-col gap-0.5">
 					<div class="text-xs font-semibold">Vertical</div>
 					<div>
-						<ToggleButtonGroup bind:selected={component.verticalAlignment}>
+						<ToggleButtonGroup
+							on:selected={() => ($app = $app)}
+							bind:selected={component.verticalAlignment}
+						>
 							<ToggleButton position="left" value="top" size="xs">
 								<AlignStartHorizontal size={16} />
 							</ToggleButton>

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,67 +1,80 @@
 <script>import { Button } from '../../../common';
-import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
-import { staticValues } from '../componentsPanel/componentStaticValues';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { X } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+import { fade } from 'svelte/transition';
 import SubTypeEditor from './SubTypeEditor.svelte';
 export let componentInput;
+export let subFieldType = undefined;
+export let selectOptions = undefined;
+const dispatch = createEventDispatcher();
 function addElementByType() {
-    if (componentInput.subFieldType && componentInput.value) {
-        if (componentInput.subFieldType === 'boolean') {
-            componentInput.value.push(false);
+    if (!Array.isArray(componentInput.value)) {
+        componentInput.value = [];
+    }
+    let value = componentInput.value;
+    if (subFieldType) {
+        if (subFieldType === 'boolean') {
+            value.push(false);
+        }
+        else if (subFieldType === 'number') {
+            value.push(0);
+        }
+        else if (subFieldType === 'object') {
+            value.push({});
         }
-        else if (componentInput.subFieldType === 'number') {
-            componentInput.value.push(0);
+        else if (subFieldType === 'labeledresource' || subFieldType === 'labeledselect') {
+            value.push({ value: 'foo', label: 'bar' });
         }
-        else if (componentInput.subFieldType === 'object') {
-            componentInput.value.push({});
+        else if (subFieldType === 'tab-select') {
+            value.push({ id: '', index: 0 });
         }
-        else if (componentInput.subFieldType === 'text' ||
-            componentInput.subFieldType === 'textarea' ||
+        else if (subFieldType === 'text' ||
+            subFieldType === 'textarea' ||
             // TODO: Add support for these types
-            componentInput.subFieldType === 'date' ||
-            componentInput.subFieldType === 'time' ||
-            componentInput.subFieldType === 'datetime') {
-            componentInput.value.push('');
+            subFieldType === 'date' ||
+            subFieldType === 'time' ||
+            subFieldType === 'datetime') {
+            value.push('');
         }
-        else if (componentInput.subFieldType === 'select') {
-            componentInput.value.push(staticValues[componentInput.optionValuesKey][0]);
+        else if (subFieldType === 'select' && selectOptions) {
+            value.push(selectOptions[0]);
         }
     }
+    else {
+        value.push('');
+    }
     componentInput = componentInput;
 }
 function deleteElementByType(index) {
     if (componentInput.value) {
         componentInput.value.splice(index, 1);
-        componentInput = componentInput;
+        redraw = redraw + 1;
+        dispatch('deleteArrayItem', { index });
     }
 }
+let redraw = 0;
 </script>
 
 <div class="flex gap-2 flex-col mt-2">
-	{#if 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">
-					<Button
-						size="xs"
-						color="light"
-						variant="border"
-						on:click={() => deleteElementByType(index)}
-						iconOnly
-						btnClasses="!text-red-500"
-						startIcon={{ icon: faTrashAlt }}
-					/>
+	{#key redraw}
+		{#if Array.isArray(componentInput.value)}
+			{#each componentInput.value as value, index (index)}
+				<div class="flex flex-row gap-2 items-center relative">
+					<SubTypeEditor {subFieldType} bind:componentInput bind:value />
+					<button
+						transition:fade|local={{ duration: 100 }}
+						class="z-10  rounded-full p-1 duration-200 hover:bg-gray-200"
+						aria-label="Remove item"
+						on:click|preventDefault|stopPropagation={() => deleteElementByType(index)}
+					>
+						<X size={14} />
+					</button>
 				</div>
-			</div>
-		{/each}
-		<Button
-			size="xs"
-			color="light"
-			startIcon={{ icon: faPlus }}
-			on:click={() => addElementByType()}
-		>
-			Add
-		</Button>
-	{/if}
+			{/each}
+		{/if}
+	{/key}
+	<Button size="xs" color="light" startIcon={{ icon: faPlus }} on:click={() => addElementByType()}>
+		Add
+	</Button>
 </div>

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

@@ -1,47 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
+import type { InputType, StaticInput, StaticOptions } from '../../inputType';
 declare const __propDef: {
     props: {
-        componentInput: (import("../../inputType").StaticInput<string[]> & {
-            fieldType: "array";
-            subFieldType?: "text" | undefined;
-            format?: string | undefined;
-        }) | (import("../../inputType").StaticInput<string[]> & {
-            fieldType: "array";
-            subFieldType?: "textarea" | undefined;
-            format?: string | undefined;
-        }) | (import("../../inputType").StaticInput<number[]> & {
-            fieldType: "array";
-            subFieldType?: "number" | undefined;
-            format?: string | undefined;
-        }) | (import("../../inputType").StaticInput<boolean[]> & {
-            fieldType: "array";
-            subFieldType?: "boolean" | undefined;
-            format?: string | undefined;
-        }) | (import("../../inputType").StaticInput<string[]> & {
-            fieldType: "array";
-            subFieldType?: "date" | undefined;
-            format?: string | undefined;
-        }) | (import("../../inputType").StaticInput<string[]> & {
-            fieldType: "array";
-            subFieldType?: "time" | undefined;
-            format?: string | undefined;
-        }) | (import("../../inputType").StaticInput<string[]> & {
-            fieldType: "array";
-            subFieldType?: "datetime" | undefined;
-            format?: string | undefined;
-        }) | (import("../../inputType").StaticInput<object[]> & {
-            fieldType: "array";
-            subFieldType?: "object" | undefined;
-            format?: string | undefined;
-        }) | (import("../../inputType").StaticInput<string[]> & {
-            fieldType: "array";
-            subFieldType?: "select" | undefined;
-            format?: string | undefined;
-        } & {
-            optionValuesKey: "buttonColorOptions" | "buttonSizeOptions" | "tableSearchOptions" | "chartThemeOptions" | "textStyleOptions";
-        });
+        componentInput: StaticInput<any[]>;
+        subFieldType?: InputType | undefined;
+        selectOptions?: StaticOptions['selectOptions'] | 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';