windmill-components 1.55.0 → 1.55.2

package/components/apps/editor/componentsPanel/ComponentList.svelte

@@ -8,42 +8,33 @@ import { getNextId } from '../../../flows/flowStateUtils';
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons';
 import { isOpenStore } from './store';
 import { gridColumns } from '../../gridUtils';
-const { app } = getContext('AppEditorContext');
+const { app, selectedComponent } = getContext('AppEditorContext');
 function getMinDimensionsByComponent(componentType, column) {
-    console.log(componentType, column);
-    if (componentType === 'buttoncomponent') {
-        return column === 3 ? { w: 1, h: 1 } : { w: 3, h: 1 };
-    }
-    else if (componentType === 'formcomponent') {
-        return column === 3 ? { w: 2, h: 3 } : { w: 6, h: 4 };
-    }
-    else if (componentType === 'textcomponent') {
-        return column === 3 ? { w: 1, h: 1 } : { w: 3, h: 1 };
-    }
-    else if (componentType === 'textinputcomponent') {
-        return column === 3 ? { w: 1, h: 2 } : { w: 3, h: 2 };
-    }
-    else if (componentType === 'numberinputcomponent') {
-        return column === 3 ? { w: 1, h: 2 } : { w: 3, h: 2 };
-    }
-    else if (componentType === 'barchartcomponent') {
-        return column === 3 ? { w: 2, h: 4 } : { w: 6, h: 4 };
-    }
-    else if (componentType === 'piechartcomponent') {
-        return column === 3 ? { w: 2, h: 4 } : { w: 6, h: 4 };
-    }
-    else if (componentType === 'tablecomponent') {
-        return column === 3 ? { w: 3, h: 4 } : { w: 12, h: 4 };
-    }
-    else if (componentType === 'displaycomponent') {
-        return column === 3 ? { w: 2, h: 2 } : { w: 6, h: 4 };
-    }
-    else if (componentType === 'checkboxcomponent') {
-        return column === 3 ? { w: 1, h: 1 } : { w: 3, h: 1 };
-    }
-    else {
-        return { w: 2, h: 1 };
+    // Dimensions key formula: <mobile width>:<mobile height>-<desktop width>:<desktop height>
+    const dimensions = {
+        '1:1-3:1': ['buttoncomponent', 'textcomponent', 'checkboxcomponent'],
+        '1:2-2:1': ['textinputcomponent', 'numberinputcomponent', 'selectcomponent'],
+        '2:2-6:4': ['displaycomponent'],
+        '2:3-6:4': ['formcomponent'],
+        '2:4-6:4': ['barchartcomponent', 'piechartcomponent'],
+        '3:4-12:4': ['tablecomponent']
+    };
+    // Finds the key that is associated with the component type and extracts the dimensions from it
+    const [dimension] = Object.entries(dimensions).find(([_, value]) => value.includes(componentType)) || ['2:1-2:1'];
+    const size = dimension.split('-')[column === 3 ? 0 : 1].split(':');
+    return { w: +size[0], h: +size[1] };
+}
+function getMaxDimensionsByComponent(componentType, column) {
+    if ([
+        'textinputcomponent',
+        'numberinputcomponent',
+        'selectcomponent',
+        'dateinputcomponent',
+        'passwordinputcomponent'
+    ].includes(componentType)) {
+        return { w: column, h: 1 };
     }
+    return { w: column, h: 12 };
 }
 function addComponent(appComponent) {
     const grid = $app.grid ?? [];
@@ -63,58 +54,15 @@ function addComponent(appComponent) {
         id: id
     };
     gridColumns.forEach((column) => {
-        newItem[column] = newComponent;
-        const position = gridHelp.findSpace(newItem, grid, column);
         const min = getMinDimensionsByComponent(appComponent.type, column);
-        const max = { w: 12, h: 12 };
-        newItem[column].w = min.w;
-        newItem[column].h = min.h;
+        const max = getMaxDimensionsByComponent(appComponent.type, column);
+        newItem[column] = { ...newComponent, min, max, w: min.w, h: min.h };
+        const position = gridHelp.findSpace(newItem, grid, column);
         newItem[column] = { ...newItem[column], ...position, min, max };
     });
     $app.grid = [...grid, newItem];
+    $selectedComponent = id;
 }
-const products = {
-    1: {
-        name: 'Product 1',
-        description: 'Product 1 description',
-        image: 'https://picsum.photos/200'
-    },
-    2: {
-        name: 'Product 2',
-        description: 'Product 2 description',
-        image: 'https://picsum.photos/200'
-    },
-    3: {
-        name: 'Product 3',
-        description: 'Product 3 description',
-        image: 'https://picsum.photos/200'
-    },
-    4: {
-        name: 'Product 4',
-        description: 'Product 4 description',
-        image: 'https://picsum.photos/200'
-    },
-    5: {
-        name: 'Product 5',
-        description: 'Product 5 description',
-        image: 'https://picsum.photos/200'
-    },
-    6: {
-        name: 'Product 6',
-        description: 'Product 6 description',
-        image: 'https://picsum.photos/200'
-    },
-    7: {
-        name: 'Product 7',
-        description: 'Product 7 description',
-        image: 'https://picsum.photos/200'
-    },
-    8: {
-        name: 'Product 8',
-        description: 'Product 8 description',
-        image: 'https://picsum.photos/200'
-    }
-};
 onMount(() => {
     isOpenStore.addItems(componentSets.map((set) => ({ [set.title]: true })));
 });
@@ -140,7 +88,7 @@ onMount(() => {
 								on:click={() => addComponent(item)}
 								title={displayData[item.type].name}
 								class="border shadow-sm h-16 p-2 flex flex-col gap-2 items-center
-									justify-center bg-white rounded-md scale-100 hover:scale-105 ease-in duration-75"
+									justify-center bg-white rounded-md hover:bg-gray-100 duration-200"
 							>
 								<svelte:component this={displayData[item.type].icon} class="text-blue-800" />
 								<div class="text-xs w-full text-center ellipsize">

package/components/apps/editor/componentsPanel/data.js

@@ -3,50 +3,97 @@ const inputs = {
     title: 'Inputs',
     components: [
         {
+            verticalAlignment: 'center',
             id: 'textinputcomponent',
             type: 'textinputcomponent',
             componentInput: undefined,
-            configuration: {
-                label: {
-                    type: 'static',
-                    visible: false,
-                    value: 'Label',
-                    fieldType: 'textarea',
-                    defaultValue: 'Label'
-                }
-            },
+            configuration: {},
+            card: false
+        },
+        {
+            verticalAlignment: 'center',
+            id: 'passwordinputcomponent',
+            type: 'passwordinputcomponent',
+            componentInput: undefined,
+            configuration: {},
             card: false
         },
         {
+            verticalAlignment: 'center',
             id: 'numberinputcomponent',
             type: 'numberinputcomponent',
             componentInput: undefined,
+            configuration: {},
+            card: false
+        },
+        {
+            verticalAlignment: 'center',
+            id: 'dateinputcomponent',
+            type: 'dateinputcomponent',
+            componentInput: undefined,
             configuration: {
-                label: {
+                minDate: {
                     type: 'static',
                     visible: false,
-                    value: 'Title',
-                    fieldType: 'textarea',
-                    defaultValue: 'Title'
+                    value: '',
+                    fieldType: 'date',
+                    defaultValue: ''
+                },
+                maxDate: {
+                    type: 'static',
+                    visible: false,
+                    value: '',
+                    fieldType: 'date',
+                    defaultValue: ''
                 }
             },
-            card: false
+            card: false,
+            softWrap: true
         },
         {
             ...defaultAlignement,
             id: 'checkboxcomponent',
             type: 'checkboxcomponent',
+            componentInput: undefined,
             configuration: {
                 label: {
                     type: 'static',
                     visible: true,
-                    value: 'Lorem ipsum',
+                    value: 'Label',
                     fieldType: 'textarea',
-                    defaultValue: 'Lorem ipsum'
+                    defaultValue: 'Label'
                 }
             },
-            componentInput: undefined,
             card: false
+        },
+        {
+            verticalAlignment: 'center',
+            id: 'selectcomponent',
+            type: 'selectcomponent',
+            componentInput: undefined,
+            configuration: {
+                items: {
+                    type: 'static',
+                    fieldType: 'array',
+                    subFieldType: 'object',
+                    defaultValue: [
+                        { value: 'foo', label: 'Foo' },
+                        { value: 'bar', label: 'Bar' }
+                    ],
+                    value: [
+                        { value: 'foo', label: 'Foo' },
+                        { value: 'bar', label: 'Bar' }
+                    ]
+                },
+                itemKey: {
+                    type: 'static',
+                    fieldType: 'text',
+                    defaultValue: 'value',
+                    value: 'value'
+                }
+            },
+            card: false,
+            softWrap: true
         }
     ]
 };
@@ -58,10 +105,11 @@ const buttons = {
             id: 'buttoncomponent',
             type: 'buttoncomponent',
             componentInput: {
-                type: 'static',
-                fieldType: 'textarea',
-                defaultValue: '',
-                value: ''
+                type: 'runnable',
+                fieldType: 'any',
+                fields: {},
+                runnable: undefined,
+                defaultValue: undefined
             },
             recomputeIds: undefined,
             configuration: {
@@ -92,14 +140,15 @@ const buttons = {
             card: false
         },
         {
-            ...defaultAlignement,
+            horizontalAlignment: 'center',
             id: 'formcomponent',
             type: 'formcomponent',
             componentInput: {
-                type: 'static',
-                fieldType: 'textarea',
-                defaultValue: '',
-                value: ''
+                type: 'runnable',
+                fieldType: 'any',
+                fields: {},
+                runnable: undefined,
+                defaultValue: undefined
             },
             recomputeIds: undefined,
             configuration: {
@@ -131,8 +180,8 @@ const buttons = {
         }
     ]
 };
-const dataDisplay = {
-    title: 'Data Display',
+const display = {
+    title: 'Display',
     components: [
         {
             ...defaultAlignement,
@@ -269,5 +318,5 @@ const dataDisplay = {
         }
     ]
 };
-const componentSets = [buttons, inputs, dataDisplay];
+const componentSets = [buttons, inputs, display];
 export { componentSets };

package/components/apps/editor/contextPanel/ComponentOutputViewer.svelte

@@ -19,4 +19,8 @@ $: $worldStore?.outputsById[componentId] &&
     subscribeToAllOutputs($worldStore.outputsById[componentId]);
 </script>
 
-<ObjectViewer json={object} on:select topBrackets={true} />
+{#if Object.keys(object).length > 0}
+	<ObjectViewer json={object} on:select topBrackets={false} />
+{:else}
+	<div class="text-xs text-gray-500 px-4">No outputs</div>
+{/if}

package/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -1,20 +1,9 @@
-<script>import { fade } from 'svelte/transition';
-import { Drawer } from '../../../common';
-import Button from '../../../common/button/Button.svelte';
-import DrawerContent from '../../../common/drawer/DrawerContent.svelte';
-import ScriptEditor from '../../../ScriptEditor.svelte';
-import { Preview } from '../../../../gen';
-import { DENO_INIT_CODE_CLEAR } from '../../../../script_helpers';
-import { classNames, emptySchema } from '../../../../utils';
-import { faEdit, faPlus, faSave, faTrash } from '@fortawesome/free-solid-svg-icons';
+<script>import { classNames } from '../../../../utils';
 import { getContext } from 'svelte';
+import { displayData } from '../../utils';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
 import ComponentOutputViewer from './ComponentOutputViewer.svelte';
-export let appPath;
-const { connectingInput, staticOutputs, app, worldStore, selectedComponent } = getContext('AppEditorContext');
-let newScriptPath;
-let ignorePathError = false;
-$: isTakenPath = Object.keys($app.inlineScripts).includes(newScriptPath);
+const { connectingInput, staticOutputs, worldStore, selectedComponent, app } = getContext('AppEditorContext');
 function connectInput(componentId, path) {
     if ($connectingInput) {
         $connectingInput = {
@@ -29,156 +18,50 @@ function connectInput(componentId, path) {
         };
     }
 }
-function createScript() {
-    // To prevent the error message flashing up just before the drawer is closed
-    ignorePathError = true;
-    const path = `${appPath}/inline-script/${newScriptPath}`;
-    const inlineScript = {
-        content: DENO_INIT_CODE_CLEAR,
-        language: Preview.language.DENO,
-        path,
-        schema: emptySchema()
-    };
-    if ($app.inlineScripts) {
-        $app.inlineScripts[newScriptPath] = inlineScript;
+function getComponentNameById(componentId) {
+    const component = $app.grid.find((c) => c.data.id === componentId);
+    if (component?.data.type) {
+        return displayData[component?.data.type].name;
     }
-    else {
-        $app.inlineScripts = {
-            [newScriptPath]: inlineScript
-        };
-    }
-    scriptCreationDrawer?.closeDrawer?.();
-    selectedScript = inlineScript;
-    scriptEditorDrawer.openDrawer?.();
-}
-function afterCreateScript() {
-    newScriptPath = '';
-    ignorePathError = false;
 }
-let selectedScript = undefined;
-let scriptEditorDrawer;
-let scriptCreationDrawer = undefined;
 </script>
 
-<Drawer bind:this={scriptCreationDrawer} size="600px" on:afterClose={afterCreateScript}>
-	<DrawerContent title="Script creation" on:close={scriptCreationDrawer.closeDrawer}>
-		<label for="pathInput" class="text-sm font-semibold"> Script name </label>
-		<div class="flex justify-between items-center gap-4">
-			<!-- svelte-ignore a11y-autofocus -->
-			<input
-				autofocus
-				id="pathInput"
-				class="grow min-w-[150px]"
-				bind:value={newScriptPath}
-				on:keypress={(e) => e.key === 'Enter' && createScript()}
-			/>
-			<Button on:click={createScript} size="sm" disabled={isTakenPath} startIcon={{ icon: faPlus }}>
-				Create
-			</Button>
-		</div>
-		{#if isTakenPath && !ignorePathError}
-			<div transition:fade={{ duration: 100 }} class="text-sm text-red-600 h-5 mt-1">
-				This name is already used.
-			</div>
-		{/if}
-	</DrawerContent>
-</Drawer>
-
-<Drawer bind:this={scriptEditorDrawer} size="1200px">
-	<DrawerContent
-		title="Script Editor"
-		noPadding
-		forceOverflowVisible
-		on:close={scriptEditorDrawer.closeDrawer}
-	>
-		{#if selectedScript}
-			<ScriptEditor
-				lang={selectedScript.language}
-				bind:code={selectedScript.content}
-				path={selectedScript.path}
-				bind:schema={selectedScript.schema}
-				fixedOverflowWidgets={false}
-			/>
-		{/if}
-		<svelte:fragment slot="actions">
-			<Button startIcon={{ icon: faSave }} disabled>Automatically Saved</Button>
-		</svelte:fragment>
-	</DrawerContent>
-</Drawer>
-
-<PanelSection title="Inline scripts">
-	<svelte:fragment slot="action">
-		<Button
-			size="xs"
-			color="light"
-			variant="border"
-			on:click={scriptCreationDrawer?.openDrawer}
-			startIcon={{ icon: faPlus }}
-			iconOnly
-		/>
-	</svelte:fragment>
-
-	{#if $app.inlineScripts && Object.keys($app.inlineScripts).length > 0}
-		<div class="w-full border rounded-sm">
-			{#each $app.inlineScripts ? Object.entries($app.inlineScripts) : [] as [key, value], index}
-				<div
+<PanelSection title="Outputs">
+	{#each Object.entries($staticOutputs) as [componentId, outputs] (componentId)}
+		{#if outputs.length > 0 && $worldStore?.outputsById[componentId]}
+			<div class="flex flex-row justify-between w-full -mb-2 ">
+				<button
+					on:click={() => ($selectedComponent = componentId)}
 					class={classNames(
-						'flex justify-between flex-row w-full items-center p-2',
-						index % 2 === 0 ? 'bg-gray-100' : 'bg-white'
+						'px-2 text-2xs py-0.5 font-bold rounded-t-sm w-fit',
+						$selectedComponent === componentId
+							? ' bg-indigo-500 text-white'
+							: 'bg-gray-200 text-gray-500'
 					)}
 				>
-					<span class="text-xs">{key}</span>
-					<div class="flex gap-2">
-						<Button
-							size="xs"
-							color="light"
-							variant="border"
-							iconOnly
-							startIcon={{ icon: faEdit }}
-							on:click={() => {
-								if (value) {
-									selectedScript = value
-									scriptEditorDrawer.openDrawer && scriptEditorDrawer.openDrawer()
-								}
-							}}
-						/>
-						<Button
-							size="xs"
-							color="red"
-							variant="border"
-							iconOnly
-							startIcon={{ icon: faTrash }}
-							on:click={() => {
-								if ($app.inlineScripts[key]) {
-									delete $app.inlineScripts[key]
-									$app = $app
-								}
-							}}
-						/>
-					</div>
-				</div>
-			{/each}
-		</div>
-	{:else}
-		<div class="text-sm text-gray-500">No inline scripts</div>
-	{/if}
-</PanelSection>
-
-<PanelSection title="Outputs">
-	{#each Object.entries($staticOutputs) as [componentId, outputs], index}
-		{#if outputs.length > 0 && $worldStore?.outputsById[componentId]}
-			<Button size="xs" on:click={() => ($selectedComponent = componentId)} color="blue">
-				Component: {componentId}
-			</Button>
+					{componentId}
+				</button>
+				<span
+					class={classNames(
+						'px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit',
+						'bg-gray-500 text-white'
+					)}
+				>
+					{getComponentNameById(componentId)}
+				</span>
+			</div>
 
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<div
+				on:click={() => ($selectedComponent = componentId)}
 				class={classNames(
-					'w-full p-2 rounded-xs border',
-					$selectedComponent === componentId
-						? 'outline-1 outline outline-offset-2 outline-blue-500'
-						: ''
+					'w-full py-2 border relative',
+					$selectedComponent === componentId ? 'border border-blue-500 ' : 'cursor-pointer'
 				)}
 			>
+				{#if $selectedComponent === componentId && $connectingInput?.opened}
+					<div class="absolute top-0 left-0 w-full h-full bg-gray-500 bg-opacity-50 z-10" />
+				{/if}
 				<ComponentOutputViewer
 					{outputs}
 					{componentId}

package/components/apps/editor/contextPanel/ContextPanel.svelte.d.ts

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

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

@@ -0,0 +1,64 @@
+<script>import FlowScriptPicker from '../../../flows/pickers/FlowScriptPicker.svelte';
+import { Script } from '../../../../gen';
+import { inferArgs } from '../../../../infer';
+import { initialCode } from '../../../../script_helpers';
+import { emptySchema } from '../../../../utils';
+import { createEventDispatcher, getContext } from 'svelte';
+import { fly } from 'svelte/transition';
+export let name;
+const { appPath } = getContext('AppEditorContext');
+const dispatch = createEventDispatcher();
+async function inferInlineScriptSchema(language, content, schema) {
+    try {
+        await inferArgs(language, content, schema);
+    }
+    catch (e) {
+        console.error("Couldn't infer args", e);
+    }
+    return schema;
+}
+async function createInlineScriptByLanguage(language, path, subkind = undefined) {
+    const fullPath = `${appPath}/inline-script/${path}`;
+    const content = initialCode(language, Script.kind.SCRIPT, subkind ?? 'flow');
+    let schema = emptySchema();
+    schema = await inferInlineScriptSchema(language, content, schema);
+    const newInlineScript = {
+        content,
+        language,
+        path: fullPath,
+        schema
+    };
+    dispatch('new', newInlineScript);
+}
+const langs = ['deno', 'python3', 'go', 'bash'];
+</script>
+
+<div class="flex flex-col p-4 gap-2 text-sm" in:fly={{ duration: 50 }}>
+	Please choose a language:
+	<div class="flex gap-2 flex-row flex-wrap">
+		{#each langs as lang}
+			<FlowScriptPicker
+				label={lang}
+				{lang}
+				on:click={() => {
+					createInlineScriptByLanguage(lang, name)
+				}}
+			/>
+		{/each}
+
+		<FlowScriptPicker
+			label={`PostgreSQL`}
+			lang="pgsql"
+			on:click={() => {
+				createInlineScriptByLanguage(Script.language.DENO, name, 'pgsql')
+			}}
+		/>
+		<FlowScriptPicker
+			label={`MySQL`}
+			lang="mysql"
+			on:click={() => {
+				createInlineScriptByLanguage(Script.language.DENO, name, 'mysql')
+			}}
+		/>
+	</div>
+</div>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        name: string;
+    };
+    events: {
+        new: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EmptyInlineScriptProps = typeof __propDef.props;
+export type EmptyInlineScriptEvents = typeof __propDef.events;
+export type EmptyInlineScriptSlots = typeof __propDef.slots;
+export default class EmptyInlineScript extends SvelteComponentTyped<EmptyInlineScriptProps, EmptyInlineScriptEvents, EmptyInlineScriptSlots> {
+}
+export {};