windmill-components 1.79.0 → 1.82.1

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

@@ -6,18 +6,19 @@ import { getAllScriptNames } from '../../utils';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
 import { getAppScripts } from './utils';
 const PREFIX = 'script-selector-';
-export let selectedScriptComponentId = undefined;
 const { app, selectedComponent } = getContext('AppViewerContext');
+const { selectedComponentInEditor } = getContext('AppEditorContext');
 function selectScript(id) {
-    selectedScriptComponentId = id;
+    $selectedComponentInEditor = id;
     if (!id.startsWith('unused-') || !id.startsWith('bg_')) {
-        $selectedComponent = selectedScriptComponentId;
+        $selectedComponent = $selectedComponentInEditor.split('_transformer')[0];
     }
 }
 $: runnables = getAppScripts($app.grid, $app.subgrids);
 // When selected component changes, update selectedScriptComponentId
-$: if ($selectedComponent != selectedScriptComponentId) {
-    selectedScriptComponentId = $selectedComponent;
+$: if ($selectedComponent != $selectedComponentInEditor &&
+    !$selectedComponentInEditor?.includes('_transformer')) {
+    $selectedComponentInEditor = $selectedComponent;
 }
 function createBackgroundScript() {
     let index = 0;
@@ -33,6 +34,7 @@ function createBackgroundScript() {
     $app.hiddenInlineScripts.push({
         name: newScriptPath,
         inlineScript: undefined,
+        autoRefresh: true,
         fields: {}
     });
     $app.hiddenInlineScripts = $app.hiddenInlineScripts;
@@ -47,11 +49,11 @@ function createBackgroundScript() {
 			<div class="flex flex-col gap-2 w-full">
 				{#if runnables.inline.length > 0}
 					<div class="flex gap-1 flex-col ">
-						{#each runnables.inline as { name, id }, index (index)}
+						{#each runnables.inline as { name, id, transformer }, index (index)}
 							<button
 								id={PREFIX + id}
-								class="border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200
-								{selectedScriptComponentId === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+								class="panel-item 
+				{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
 								on:click={() => selectScript(id)}
 							>
 								<span class="text-2xs truncate">{name}</span>
@@ -59,6 +61,20 @@ function createBackgroundScript() {
 									<Badge color="dark-indigo">{id}</Badge>
 								</div>
 							</button>
+							{#if transformer}
+								<div class="w-full pl-4">
+									<button
+										id={PREFIX + id + '_transformer'}
+										class="border flex gap-1 truncate font-normal justify-between w-full items-center px-2 py-0.5 rounded-sm duration-200;
+			{$selectedComponentInEditor === id + '_transformer'
+											? 'border-blue-500 bg-blue-100'
+											: 'hover:bg-blue-50'}"
+										on:click={() => selectScript(id + '_transformer')}
+									>
+										<span class="text-2xs truncate">Transformer</span>
+									</button>
+								</div>
+							{/if}
 						{/each}
 					</div>
 				{/if}
@@ -68,8 +84,8 @@ function createBackgroundScript() {
 							{@const id = `unused-${index}`}
 							<button
 								id={PREFIX + id}
-								class="border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200
-								{selectedScriptComponentId === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+								class="panel-item
+								{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
 								on:click={() => selectScript(id)}
 							>
 								<span class="text-2xs truncate">{unusedInlineScript.name}</span>
@@ -88,16 +104,30 @@ function createBackgroundScript() {
 			<div class="text-sm font-semibold truncate mb-1"> Workspace/Hub </div>
 			<div class="flex flex-col gap-1 w-full">
 				{#if runnables.imported.length > 0}
-					{#each runnables.imported as { name, id }, index (index)}
+					{#each runnables.imported as { name, id, transformer }, index (index)}
 						<button
 							id={PREFIX + id}
-							class="border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200
-								{selectedScriptComponentId === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+							class="panel-item
+								{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
 							on:click={() => selectScript(id)}
 						>
 							<span class="text-2xs truncate">{name}</span>
 							<Badge color="dark-indigo">{id}</Badge>
 						</button>
+						{#if transformer}
+							<div class="w-full pl-4">
+								<button
+									id={PREFIX + id + '_transformer'}
+									class="border flex gap-1 truncate font-normal justify-between w-full items-center px-2 py-0.5 rounded-sm duration-200;
+	{$selectedComponentInEditor === id + '_transformer'
+										? 'border-blue-500 bg-blue-100'
+										: 'hover:bg-blue-50'}"
+									on:click={() => selectScript(id + '_transformer')}
+								>
+									<span class="text-2xs truncate">Transformer</span>
+								</button>
+							</div>
+						{/if}
 					{/each}
 				{:else}
 					<div class="text-xs text-gray-500">No imported scripts/flows</div>
@@ -106,8 +136,8 @@ function createBackgroundScript() {
 		</div>
 
 		<div>
-			<div class="w-full flex justify-between items-center">
-				<div class="text-sm font-semibold truncate mb-1">
+			<div class="w-full flex justify-between items-center mb-1">
+				<div class="text-sm font-semibold truncate">
 					Background scripts
 					<Tooltip class="mb-0.5">
 						Background scripts are triggered upon global refresh or when their input changes. The
@@ -132,8 +162,8 @@ function createBackgroundScript() {
 						{@const id = `bg_${index}`}
 						<button
 							id={PREFIX + id}
-							class="border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200
-								{selectedScriptComponentId === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+							class="panel-item
+								{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
 							on:click={() => selectScript(id)}
 						>
 							<span class="text-2xs truncate">{name}</span>
@@ -147,3 +177,23 @@ function createBackgroundScript() {
 		</div>
 	</div>
 </PanelSection>
+
+<style>
+	.panel-item {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.25rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    border-radius: 0.125rem;
+    border-width: 1px;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    font-weight: 400;
+    transition-duration: 200ms
+}</style>

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

@@ -1,8 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        selectedScriptComponentId?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -0,0 +1,27 @@
+<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}
+		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
+				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

@@ -5,10 +5,12 @@ export interface AppScriptsList {
     inline: {
         name: string;
         id: string;
+        transformer: boolean;
     }[];
     imported: {
         name: string;
         id: string;
+        transformer: boolean;
     }[];
 }
 export declare function computeFields(schema: Schema, defaultUserInput: boolean, fields: AppInputs): Record<string, import("../../inputType").StaticAppInput>;

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

@@ -37,17 +37,17 @@ function processGridItemRunnable(gridItem, list) {
                 if (actionButton.componentInput?.type !== 'runnable') {
                     return;
                 }
-                processRunnable(actionButton.componentInput.runnable, actionButton.id, list);
+                processRunnable(actionButton.componentInput.runnable, actionButton.componentInput.transformer, actionButton.id, list);
             });
         }
         if (componentInput?.type === 'runnable') {
-            processRunnable(componentInput.runnable, gridItem.id, list);
+            processRunnable(componentInput.runnable, componentInput.transformer, gridItem.id, list);
         }
     }
     return list;
 }
 export function getAppScripts(grid, subgrids) {
-    const scriptsList = grid.reduce((acc, gridComponent) => processGridItemRunnable(gridComponent, acc), { inline: [], imported: [] });
+    const scriptsList = grid.reduce((acc, gridComponent) => processGridItemRunnable(gridComponent, acc), { inline: [], imported: [], transformer: false });
     if (subgrids) {
         Object.values(subgrids).forEach((subgrid) => {
             subgrid.forEach((subgridComponent) => {
@@ -57,13 +57,14 @@ export function getAppScripts(grid, subgrids) {
     }
     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,6 +1,8 @@
 <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>
 
@@ -11,7 +13,10 @@ export let component;
 				<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/ArrayStaticInputEditor.svelte

@@ -1,39 +1,49 @@
 <script>import { Button } from '../../../common';
 import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { X } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
-import { staticValues } from '../componentsPanel/componentStaticValues';
+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 (!Array.isArray(componentInput.value)) {
         componentInput.value = [];
     }
-    if (componentInput.subFieldType && componentInput.value) {
-        if (componentInput.subFieldType === 'boolean') {
-            componentInput.value.push(false);
+    let value = componentInput.value;
+    if (subFieldType) {
+        if (subFieldType === 'boolean') {
+            value.push(false);
         }
-        else if (componentInput.subFieldType === 'number') {
-            componentInput.value.push(0);
+        else if (subFieldType === 'number') {
+            value.push(0);
         }
-        else if (componentInput.subFieldType === 'object') {
-            componentInput.value.push({});
+        else if (subFieldType === 'object') {
+            value.push({});
         }
-        else if (componentInput.subFieldType === 'labeledresource') {
-            componentInput.value.push({ value: '', label: '' });
+        else if (subFieldType === 'labeledresource') {
+            value.push({ value: '', label: '' });
         }
-        else if (componentInput.subFieldType === 'text' ||
-            componentInput.subFieldType === 'textarea' ||
+        else if (subFieldType === 'tab-select') {
+            value.push({ id: '', index: 0 });
+        }
+        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) {
@@ -49,19 +59,15 @@ function deleteElementByType(index) {
 	{#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-1 right-1">
-					<Button
-						size="xs"
-						color="light"
-						variant="border"
-						on:click={() => deleteElementByType(index)}
-						iconOnly
-						btnClasses="!text-red-500"
-						startIcon={{ icon: faTrashAlt }}
-					/>
-				</div>
+				<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>
 		{/each}
 	{/if}

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

@@ -1,110 +1,10 @@
 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;
-            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" | "tabsKindOptions" | "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" | "tabsKindOptions" | "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;
-        });
+        componentInput: StaticInput<any[]>;
+        subFieldType?: InputType | undefined;
+        selectOptions?: StaticOptions['selectOptions'] | undefined;
     };
     events: {
         deleteArrayItem: CustomEvent<any>;