windmill-components 1.56.2 → 1.57.1

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

@@ -3,30 +3,55 @@ const inputs = {
     title: 'Inputs',
     components: [
         {
+            softWrap: true,
             verticalAlignment: 'center',
             id: 'textinputcomponent',
             type: 'textinputcomponent',
             componentInput: undefined,
-            configuration: {},
+            configuration: {
+                placeholder: {
+                    type: 'static',
+                    value: 'Type...',
+                    fieldType: 'text',
+                    onlyStatic: true,
+                },
+            },
             card: false
         },
         {
+            softWrap: true,
             verticalAlignment: 'center',
             id: 'passwordinputcomponent',
             type: 'passwordinputcomponent',
             componentInput: undefined,
-            configuration: {},
+            configuration: {
+                placeholder: {
+                    type: 'static',
+                    value: 'Password',
+                    fieldType: 'text',
+                    onlyStatic: true,
+                },
+            },
             card: false
         },
         {
+            softWrap: true,
             verticalAlignment: 'center',
             id: 'numberinputcomponent',
             type: 'numberinputcomponent',
             componentInput: undefined,
-            configuration: {},
+            configuration: {
+                placeholder: {
+                    type: 'static',
+                    value: 'Type...',
+                    fieldType: 'text',
+                    onlyStatic: true,
+                },
+            },
             card: false
         },
         {
+            softWrap: true,
             verticalAlignment: 'center',
             id: 'dateinputcomponent',
             type: 'dateinputcomponent',
@@ -34,34 +59,28 @@ const inputs = {
             configuration: {
                 minDate: {
                     type: 'static',
-                    visible: false,
                     value: '',
                     fieldType: 'date',
-                    defaultValue: ''
                 },
                 maxDate: {
                     type: 'static',
-                    visible: false,
                     value: '',
                     fieldType: 'date',
-                    defaultValue: ''
                 }
             },
             card: false,
-            softWrap: true
         },
         {
             ...defaultAlignement,
+            softWrap: true,
             id: 'checkboxcomponent',
             type: 'checkboxcomponent',
             componentInput: undefined,
             configuration: {
                 label: {
                     type: 'static',
-                    visible: true,
                     value: 'Label',
-                    fieldType: 'textarea',
-                    defaultValue: 'Label'
+                    fieldType: 'text',
                 }
             },
             card: false
@@ -76,10 +95,6 @@ const inputs = {
                     type: 'static',
                     fieldType: 'array',
                     subFieldType: 'object',
-                    defaultValue: [
-                        { value: 'foo', label: 'Foo' },
-                        { value: 'bar', label: 'Bar' }
-                    ],
                     value: [
                         { value: 'foo', label: 'Foo' },
                         { value: 'bar', label: 'Bar' }
@@ -88,7 +103,6 @@ const inputs = {
                 itemKey: {
                     type: 'static',
                     fieldType: 'text',
-                    defaultValue: 'value',
                     value: 'value'
                 }
             },
@@ -102,6 +116,7 @@ const buttons = {
     components: [
         {
             ...defaultAlignement,
+            softWrap: true,
             id: 'buttoncomponent',
             type: 'buttoncomponent',
             componentInput: {
@@ -109,32 +124,27 @@ const buttons = {
                 fieldType: 'any',
                 fields: {},
                 runnable: undefined,
-                defaultValue: undefined
             },
             recomputeIds: undefined,
             configuration: {
                 label: {
                     type: 'static',
-                    visible: true,
-                    value: 'Lorem ipsum',
-                    fieldType: 'textarea',
-                    defaultValue: 'Lorem ipsum'
+                    fieldType: 'text',
+                    value: 'Press me'
                 },
                 color: {
                     fieldType: 'select',
                     type: 'static',
-                    visible: true,
-                    value: 'blue',
+                    onlyStatic: true,
                     optionValuesKey: 'buttonColorOptions',
-                    defaultValue: 'blue'
+                    value: 'blue'
                 },
                 size: {
                     fieldType: 'select',
                     type: 'static',
-                    visible: true,
-                    value: 'xs',
+                    onlyStatic: true,
                     optionValuesKey: 'buttonSizeOptions',
-                    defaultValue: 'xs'
+                    value: 'xs'
                 }
             },
             card: false
@@ -148,32 +158,27 @@ const buttons = {
                 fieldType: 'any',
                 fields: {},
                 runnable: undefined,
-                defaultValue: undefined
             },
             recomputeIds: undefined,
             configuration: {
                 label: {
                     type: 'static',
-                    visible: true,
                     value: 'Submit',
-                    fieldType: 'textarea',
-                    defaultValue: 'formcomponent'
+                    fieldType: 'text',
                 },
                 color: {
                     fieldType: 'select',
                     type: 'static',
-                    visible: true,
+                    onlyStatic: true,
                     value: 'dark',
                     optionValuesKey: 'buttonColorOptions',
-                    defaultValue: 'dark'
                 },
                 size: {
                     fieldType: 'select',
                     type: 'static',
-                    visible: true,
                     value: 'xs',
+                    onlyStatic: true,
                     optionValuesKey: 'buttonSizeOptions',
-                    defaultValue: 'xs'
                 }
             },
             card: true
@@ -184,17 +189,48 @@ const display = {
     title: 'Display',
     components: [
         {
-            ...defaultAlignement,
+            softWrap: false,
+            id: 'htmlcomponent',
+            type: 'htmlcomponent',
+            componentInput: {
+                type: 'static',
+                fieldType: 'template',
+                value: `<img
+	src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1024&amp;h=1280&amp;q=80"
+>
+<div class="absolute top-4 left-2  text-white">
+	Hello \${ctx.username}
+</div>			
+`,
+            },
+            configuration: {},
+            card: false
+        },
+        {
+            softWrap: true,
+            horizontalAlignment: 'left',
+            verticalAlignment: 'top',
             id: 'textcomponent',
             type: 'textcomponent',
             componentInput: {
                 type: 'static',
-                visible: true,
-                value: 'Lorem ipsum',
-                fieldType: 'textarea',
-                defaultValue: 'Lorem ipsum'
+                fieldType: 'template',
+                value: 'Hello ${ctx.username}',
+            },
+            configuration: {
+                style: {
+                    fieldType: 'select',
+                    type: 'static',
+                    onlyStatic: true,
+                    optionValuesKey: 'textStyleOptions',
+                    value: 'Body'
+                },
+                extraStyle: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: '',
+                },
             },
-            configuration: {},
             card: false
         },
         {
@@ -204,46 +240,27 @@ const display = {
                 search: {
                     fieldType: 'select',
                     type: 'static',
-                    value: 'Disabled',
+                    onlyStatic: true,
                     optionValuesKey: 'tableSearchOptions',
-                    defaultValue: 'Disabled'
-                },
-                pagination: {
-                    type: 'static',
-                    value: false,
-                    fieldType: 'boolean',
-                    visible: true,
-                    defaultValue: false
+                    value: 'Disabled'
                 }
             },
             componentInput: {
                 type: 'static',
                 fieldType: 'array',
                 subFieldType: 'object',
-                defaultValue: [
-                    {
-                        id: 1,
-                        name: 'Lorem ipsum',
-                        age: 42
-                    },
-                    {
-                        id: 2,
-                        name: 'Lorem ipsum',
-                        age: 42
-                    }
-                ],
                 value: [
                     {
                         id: 1,
-                        name: 'Lorem ipsum',
+                        name: 'A cell with a long name',
                         age: 42
                     },
                     {
                         id: 2,
-                        name: 'Lorem ipsum',
-                        age: 42
+                        name: 'A briefer cell',
+                        age: 84
                     }
-                ]
+                ],
             },
             card: true,
             actionButtons: []
@@ -254,25 +271,22 @@ const display = {
             configuration: {
                 theme: {
                     type: 'static',
-                    value: 'theme1',
+                    onlyStatic: true,
                     fieldType: 'select',
                     optionValuesKey: 'chartThemeOptions',
-                    defaultValue: 'theme1'
+                    value: 'theme1'
                 },
-                labels: {
+                doughnutStyle: {
                     type: 'static',
-                    value: ['First', 'Second', 'Third'],
-                    fieldType: 'array',
-                    subFieldType: 'text',
-                    defaultValue: ['First', 'Second', 'Third']
+                    onlyStatic: true,
+                    fieldType: 'boolean',
+                    value: false
                 }
             },
             componentInput: {
                 type: 'static',
-                fieldType: 'array',
-                subFieldType: 'number',
-                defaultValue: [25, 50, 25],
-                value: [25, 50, 25]
+                fieldType: 'object',
+                value: { data: [25, 50, 25], labels: ['Pie', 'Charts', '<3'] }
             },
             card: true
         },
@@ -282,25 +296,122 @@ const display = {
             configuration: {
                 theme: {
                     type: 'static',
-                    value: 'theme1',
+                    onlyStatic: true,
                     fieldType: 'select',
                     optionValuesKey: 'chartThemeOptions',
-                    defaultValue: 'theme1'
+                    value: 'theme1'
                 },
-                labels: {
+                line: {
                     type: 'static',
-                    value: ['Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum'],
-                    fieldType: 'array',
-                    subFieldType: 'text',
-                    defaultValue: ['Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum']
+                    onlyStatic: true,
+                    fieldType: 'boolean',
+                    value: false
                 }
             },
+            componentInput: {
+                type: 'static',
+                fieldType: 'object',
+                value: { data: [25, 50, 25], labels: ['Bar', 'Charts', '<3'] }
+            },
+            card: true
+        },
+        {
+            id: 'scatterchartcomponent',
+            type: 'scatterchartcomponent',
+            configuration: {
+                zoomable: {
+                    type: 'static',
+                    onlyStatic: true,
+                    fieldType: 'boolean',
+                    value: false
+                },
+                pannable: {
+                    type: 'static',
+                    onlyStatic: true,
+                    fieldType: 'boolean',
+                    value: false
+                },
+            },
             componentInput: {
                 type: 'static',
                 fieldType: 'array',
-                subFieldType: 'number',
-                defaultValue: [25, 50, 25],
-                value: [25, 50, 25]
+                subFieldType: 'object',
+                value: [{
+                        label: 'foo',
+                        data: [
+                            { x: 25, y: 50 },
+                            { x: 23, y: 23 },
+                            { x: 12, y: 37 }
+                        ],
+                        backgroundColor: 'rgb(255, 12, 137)'
+                    },
+                    {
+                        label: 'foobar',
+                        data: [
+                            { x: 32, y: 32 },
+                            { x: 25, y: 42 },
+                            { x: 3, y: 27 }
+                        ],
+                        backgroundColor: 'orange'
+                    }]
+            },
+            card: true
+        },
+        {
+            id: 'timeseriescomponent',
+            type: 'timeseriescomponent',
+            configuration: {
+                logarithmicScale: {
+                    type: 'static',
+                    onlyStatic: true,
+                    fieldType: 'boolean',
+                    value: false
+                },
+                zoomable: {
+                    type: 'static',
+                    onlyStatic: true,
+                    fieldType: 'boolean',
+                    value: false
+                },
+                pannable: {
+                    type: 'static',
+                    onlyStatic: true,
+                    fieldType: 'boolean',
+                    value: false
+                },
+            },
+            componentInput: {
+                type: 'static',
+                fieldType: 'array',
+                subFieldType: 'object',
+                value: [{
+                        label: 'foo',
+                        data: [{
+                                x: '2021-11-06 23:39:30',
+                                y: 50
+                            }, {
+                                x: '2021-11-07 01:00:28',
+                                y: 60
+                            }, {
+                                x: '2021-11-07 09:00:28',
+                                y: 20
+                            }],
+                        backgroundColor: 'rgb(255, 12, 137)'
+                    },
+                    {
+                        label: 'foobar',
+                        data: [{
+                                x: '2021-11-06 23:39:30',
+                                y: 20
+                            }, {
+                                x: '2021-11-07 01:00:28',
+                                y: 13
+                            }, {
+                                x: '2021-11-07 09:00:28',
+                                y: 45
+                            }],
+                        backgroundColor: 'orange'
+                    }]
             },
             card: true
         },
@@ -309,13 +420,12 @@ const display = {
             type: 'displaycomponent',
             componentInput: {
                 type: 'static',
-                fieldType: 'text',
-                defaultValue: 'Lorem Ipsum',
-                value: 'Lorem Ipsum'
+                fieldType: 'object',
+                value: { "foo": 42 },
             },
             configuration: {},
             card: false
-        }
+        },
     ]
 };
 const componentSets = [buttons, inputs, display];

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

@@ -7,6 +7,7 @@ let object = {};
 function subscribeToAllOutputs(observableOutputs) {
     if (observableOutputs) {
         outputs.forEach((output) => {
+            object[output] = undefined;
             observableOutputs[output]?.subscribe({
                 next: (value) => {
                     object[output] = value;

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

@@ -1,5 +1,6 @@
 <script>import { classNames } from '../../../../utils';
 import { getContext } from 'svelte';
+import { key } from 'svelte-awesome/icons';
 import { displayData } from '../../utils';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
 import ComponentOutputViewer from './ComponentOutputViewer.svelte';
@@ -14,65 +15,86 @@ function connectInput(componentId, path) {
                     path
                 },
                 type: 'connected'
-            }
+            },
+            hoveredComponent: undefined
         };
     }
 }
 function getComponentNameById(componentId) {
-    const component = $app.grid.find((c) => c.data.id === componentId);
+    const component = $app.grid.find((c) => c?.data?.id === componentId);
     if (component?.data.type) {
         return displayData[component?.data.type].name;
     }
+    else if (componentId == 'ctx') {
+        return 'Context';
+    }
     else {
         return 'Table action';
     }
 }
+$: panels = [['ctx', ['email', 'username']]].concat(Object.entries($staticOutputs));
 </script>
 
-<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(
-						'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'
-					)}
-				>
-					{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>
+<PanelSection noPadding titlePadding="px-4 pt-2" title="Outputs">
+	<div
+		class="overflow-auto min-w-[150px] border-t w-full relative flex flex-col gap-4 px-2 pt-4 pb-2"
+	>
+		{#each panels as [componentId, outputs] (componentId)}
+			{#if outputs.length > 0 && $worldStore?.outputsById[componentId]}
+				<div>
+					<div
+						class="flex {$connectingInput?.opened
+							? 'bg-white z-50'
+							: ''} flex-row justify-between w-full"
+					>
+						<button
+							on:click|stopPropagation|preventDefault={$connectingInput.opened
+								? undefined
+								: () => ($selectedComponent = componentId)}
+							class={classNames(
+								'px-2 text-2xs py-0.5 border border-gray-300 font-bold rounded-t-sm w-fit',
+								$selectedComponent === componentId
+									? ' bg-indigo-500 text-white'
+									: 'bg-gray-200 text-gray-500'
+							)}
+						>
+							{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 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}
-					on:select={({ detail }) => {
-						connectInput(componentId, detail)
-					}}
-				/>
-			</div>
-		{/if}
-	{/each}
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<div
+						class={classNames(
+							$connectingInput?.opened ? 'bg-white z-50' : '',
+							`w-full py-2 grow border relative break-all `,
+							$selectedComponent === componentId ? 'border border-blue-500 ' : '',
+							$connectingInput.hoveredComponent === componentId ? 'outline outline-blue-500' : ''
+						)}
+					>
+						{#key $selectedComponent}
+							{#key $connectingInput?.opened}
+								<ComponentOutputViewer
+									outputs={$connectingInput?.opened && $selectedComponent === componentId
+										? ['search']
+										: outputs}
+									{componentId}
+									on:select={({ detail }) => {
+										connectInput(componentId, detail)
+									}}
+								/>
+							{/key}
+						{/key}
+					</div>
+				</div>
+			{/if}
+		{/each}
+	</div>
 </PanelSection>

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

@@ -5,8 +5,10 @@ import { initialCode } from '../../../../script_helpers';
 import { emptySchema } from '../../../../utils';
 import { createEventDispatcher, getContext } from 'svelte';
 import { fly } from 'svelte/transition';
+import { defaultCode } from '../../editorUtils';
 export let name;
-const { appPath } = getContext('AppEditorContext');
+export let id;
+const { appPath, app } = getContext('AppEditorContext');
 const dispatch = createEventDispatcher();
 async function inferInlineScriptSchema(language, content, schema) {
     try {
@@ -18,8 +20,10 @@ async function inferInlineScriptSchema(language, content, schema) {
     return schema;
 }
 async function createInlineScriptByLanguage(language, path, subkind = undefined) {
+    const componentType = $app.grid.find((c) => c.data.id === id)?.data?.type;
     const fullPath = `${appPath}/inline-script/${path}`;
-    const content = initialCode(language, Script.kind.SCRIPT, subkind ?? 'flow');
+    const content = defaultCode(componentType, language) ??
+        initialCode(language, Script.kind.SCRIPT, subkind ?? 'flow');
     let schema = emptySchema();
     schema = await inferInlineScriptSchema(language, content, schema);
     const newInlineScript = {

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

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         name: string;
+        id: string;
     };
     events: {
         new: CustomEvent<any>;