windmill-components 1.52.0 → 1.55.0

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

@@ -1,39 +1,70 @@
-import { defaultAlignement, defaultProps } from './componentDefaultProps';
-const windmillComponents = {
-    title: 'Windmill Components',
+import { defaultAlignement } from './componentDefaultProps';
+const inputs = {
+    title: 'Inputs',
     components: [
         {
-            ...defaultProps,
-            id: 'displaycomponent',
-            type: 'displaycomponent',
-            componentInputs: {
-                result: {
-                    id: undefined,
-                    name: undefined,
-                    type: 'output',
-                    defaultValue: {},
-                    fieldType: 'object'
+            id: 'textinputcomponent',
+            type: 'textinputcomponent',
+            componentInput: undefined,
+            configuration: {
+                label: {
+                    type: 'static',
+                    visible: false,
+                    value: 'Label',
+                    fieldType: 'textarea',
+                    defaultValue: 'Label'
+                }
+            },
+            card: false
+        },
+        {
+            id: 'numberinputcomponent',
+            type: 'numberinputcomponent',
+            componentInput: undefined,
+            configuration: {
+                label: {
+                    type: 'static',
+                    visible: false,
+                    value: 'Title',
+                    fieldType: 'textarea',
+                    defaultValue: 'Title'
+                }
+            },
+            card: false
+        },
+        {
+            ...defaultAlignement,
+            id: 'checkboxcomponent',
+            type: 'checkboxcomponent',
+            configuration: {
+                label: {
+                    type: 'static',
+                    visible: true,
+                    value: 'Lorem ipsum',
+                    fieldType: 'textarea',
+                    defaultValue: 'Lorem ipsum'
                 }
-            }
+            },
+            componentInput: undefined,
+            card: false
         }
     ]
 };
-const textInputs = {
-    title: 'Text Inputs',
-    components: []
-};
-const numberInputs = {
-    title: 'Number Inputs',
-    components: []
-};
 const buttons = {
     title: 'Buttons',
     components: [
         {
-            ...defaultProps,
+            ...defaultAlignement,
             id: 'buttoncomponent',
             type: 'buttoncomponent',
-            componentInputs: {
+            componentInput: {
+                type: 'static',
+                fieldType: 'textarea',
+                defaultValue: '',
+                value: ''
+            },
+            recomputeIds: undefined,
+            configuration: {
                 label: {
                     type: 'static',
                     visible: true,
@@ -53,72 +84,82 @@ const buttons = {
                     fieldType: 'select',
                     type: 'static',
                     visible: true,
-                    value: 'md',
+                    value: 'xs',
                     optionValuesKey: 'buttonSizeOptions',
-                    defaultValue: 'md'
+                    defaultValue: 'xs'
                 }
             },
-            runnable: true,
             card: false
-        }
-    ]
-};
-const selectInputs = {
-    title: 'Select Inputs',
-    components: [
+        },
         {
-            ...defaultProps,
             ...defaultAlignement,
-            id: 'checkboxcomponent',
-            type: 'checkboxcomponent',
-            componentInputs: {
+            id: 'formcomponent',
+            type: 'formcomponent',
+            componentInput: {
+                type: 'static',
+                fieldType: 'textarea',
+                defaultValue: '',
+                value: ''
+            },
+            recomputeIds: undefined,
+            configuration: {
                 label: {
                     type: 'static',
                     visible: true,
-                    value: undefined,
+                    value: 'Submit',
                     fieldType: 'textarea',
-                    defaultValue: 'Lorem ipsum'
+                    defaultValue: 'formcomponent'
+                },
+                color: {
+                    fieldType: 'select',
+                    type: 'static',
+                    visible: true,
+                    value: 'dark',
+                    optionValuesKey: 'buttonColorOptions',
+                    defaultValue: 'dark'
+                },
+                size: {
+                    fieldType: 'select',
+                    type: 'static',
+                    visible: true,
+                    value: 'xs',
+                    optionValuesKey: 'buttonSizeOptions',
+                    defaultValue: 'xs'
                 }
             },
-            card: false
+            card: true
         }
     ]
 };
-const dateTimeInputs = {
-    title: 'Date and Time Inputs',
-    components: []
-};
 const dataDisplay = {
     title: 'Data Display',
     components: [
         {
-            ...defaultProps,
             ...defaultAlignement,
             id: 'textcomponent',
             type: 'textcomponent',
-            componentInputs: {
-                content: {
-                    type: 'static',
-                    visible: true,
-                    value: 'Lorem ipsum',
-                    fieldType: 'textarea',
-                    defaultValue: 'Lorem ipsum'
-                }
-            }
+            componentInput: {
+                type: 'static',
+                visible: true,
+                value: 'Lorem ipsum',
+                fieldType: 'textarea',
+                defaultValue: 'Lorem ipsum'
+            },
+            configuration: {},
+            card: false
         },
         {
-            ...defaultProps,
             id: 'tablecomponent',
             type: 'tablecomponent',
-            componentInputs: {
-                searchEnabled: {
+            configuration: {
+                search: {
+                    fieldType: 'select',
                     type: 'static',
-                    value: false,
-                    fieldType: 'boolean',
-                    visible: true,
-                    defaultValue: false
+                    value: 'Disabled',
+                    optionValuesKey: 'tableSearchOptions',
+                    defaultValue: 'Disabled'
                 },
-                paginationEnabled: {
+                pagination: {
                     type: 'static',
                     value: false,
                     fieldType: 'boolean',
@@ -126,33 +167,107 @@ const dataDisplay = {
                     defaultValue: false
                 }
             },
-            runnable: true,
+            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',
+                        age: 42
+                    },
+                    {
+                        id: 2,
+                        name: 'Lorem ipsum',
+                        age: 42
+                    }
+                ]
+            },
             card: true,
             actionButtons: []
         },
         {
-            ...defaultProps,
             id: 'piechartcomponent',
             type: 'piechartcomponent',
-            runnable: true,
+            configuration: {
+                theme: {
+                    type: 'static',
+                    value: 'theme1',
+                    fieldType: 'select',
+                    optionValuesKey: 'chartThemeOptions',
+                    defaultValue: 'theme1'
+                },
+                labels: {
+                    type: 'static',
+                    value: ['First', 'Second', 'Third'],
+                    fieldType: 'array',
+                    subFieldType: 'text',
+                    defaultValue: ['First', 'Second', 'Third']
+                }
+            },
+            componentInput: {
+                type: 'static',
+                fieldType: 'array',
+                subFieldType: 'number',
+                defaultValue: [25, 50, 25],
+                value: [25, 50, 25]
+            },
             card: true
         },
         {
-            ...defaultProps,
             id: 'barchartcomponent',
             type: 'barchartcomponent',
-            runnable: true,
+            configuration: {
+                theme: {
+                    type: 'static',
+                    value: 'theme1',
+                    fieldType: 'select',
+                    optionValuesKey: 'chartThemeOptions',
+                    defaultValue: 'theme1'
+                },
+                labels: {
+                    type: 'static',
+                    value: ['Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum'],
+                    fieldType: 'array',
+                    subFieldType: 'text',
+                    defaultValue: ['Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum']
+                }
+            },
+            componentInput: {
+                type: 'static',
+                fieldType: 'array',
+                subFieldType: 'number',
+                defaultValue: [25, 50, 25],
+                value: [25, 50, 25]
+            },
             card: true
+        },
+        {
+            id: 'displaycomponent',
+            type: 'displaycomponent',
+            componentInput: {
+                type: 'static',
+                fieldType: 'text',
+                defaultValue: 'Lorem Ipsum',
+                value: 'Lorem Ipsum'
+            },
+            configuration: {},
+            card: false
         }
     ]
 };
-const componentSets = [
-    windmillComponents,
-    textInputs,
-    numberInputs,
-    buttons,
-    selectInputs,
-    dateTimeInputs,
-    dataDisplay
-];
+const componentSets = [buttons, inputs, dataDisplay];
 export { componentSets };

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

@@ -1,13 +1,12 @@
 <script>import { fade } from 'svelte/transition';
 import { Drawer } from '../../../common';
-import Badge from '../../../common/badge/Badge.svelte';
 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, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { faEdit, faPlus, faSave, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
 import ComponentOutputViewer from './ComponentOutputViewer.svelte';
@@ -16,16 +15,16 @@ const { connectingInput, staticOutputs, app, worldStore, selectedComponent } = g
 let newScriptPath;
 let ignorePathError = false;
 $: isTakenPath = Object.keys($app.inlineScripts).includes(newScriptPath);
-function connectInput(id, name) {
+function connectInput(componentId, path) {
     if ($connectingInput) {
         $connectingInput = {
             opened: false,
             input: {
-                id,
-                name,
-                type: 'output',
-                defaultValue: undefined,
-                fieldType: 'any'
+                connection: {
+                    componentId,
+                    path
+                },
+                type: 'connected'
             }
         };
     }
@@ -101,6 +100,9 @@ let scriptCreationDrawer = undefined;
 				fixedOverflowWidgets={false}
 			/>
 		{/if}
+		<svelte:fragment slot="actions">
+			<Button startIcon={{ icon: faSave }} disabled>Automatically Saved</Button>
+		</svelte:fragment>
 	</DrawerContent>
 </Drawer>
 
@@ -116,52 +118,58 @@ let scriptCreationDrawer = undefined;
 		/>
 	</svelte:fragment>
 
-	<div class="w-full border rounded-sm">
-		{#each $app.inlineScripts ? Object.entries($app.inlineScripts) : [] as [key, value], index}
-			<div
-				class={classNames(
-					'flex justify-between flex-row w-full items-center p-2',
-					index % 2 === 0 ? 'bg-gray-100' : 'bg-white'
-				)}
-			>
-				<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
-							}
-						}}
-					/>
+	{#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
+					class={classNames(
+						'flex justify-between flex-row w-full items-center p-2',
+						index % 2 === 0 ? 'bg-gray-100' : 'bg-white'
+					)}
+				>
+					<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>
-			</div>
-		{/each}
-	</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]}
-			<Badge color="blue">Component: {componentId}</Badge>
+			<Button size="xs" on:click={() => ($selectedComponent = componentId)} color="blue">
+				Component: {componentId}
+			</Button>
 
 			<div
 				class={classNames(

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

@@ -0,0 +1,67 @@
+<script>import { Button } from '../../../common';
+import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { staticValues } from '../componentsPanel/componentStaticValues';
+import SubTypeEditor from './SubTypeEditor.svelte';
+export let canHide = false;
+export let componentInput;
+function addElementByType() {
+    if (componentInput.subFieldType && componentInput.value) {
+        if (componentInput.subFieldType === 'boolean') {
+            componentInput.value.push(false);
+        }
+        else if (componentInput.subFieldType === 'number') {
+            componentInput.value.push(0);
+        }
+        else if (componentInput.subFieldType === 'object') {
+            componentInput.value.push({});
+        }
+        else if (componentInput.subFieldType === 'text' ||
+            componentInput.subFieldType === 'textarea' ||
+            // TODO: Add support for these types
+            componentInput.subFieldType === 'date' ||
+            componentInput.subFieldType === 'time' ||
+            componentInput.subFieldType === 'datetime') {
+            componentInput.value.push('');
+        }
+        else if (componentInput.subFieldType === 'select') {
+            componentInput.value.push(staticValues[componentInput.optionValuesKey][0]);
+        }
+    }
+    componentInput = componentInput;
+}
+function deleteElementByType(index) {
+    if (componentInput.value) {
+        componentInput.value.splice(index, 1);
+        componentInput = componentInput;
+    }
+}
+</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">
+				<SubTypeEditor bind:componentInput bind:value {canHide} />
+
+				<div>
+					<Button
+						size="xs"
+						color="light"
+						variant="border"
+						on:click={() => deleteElementByType(index)}
+						iconOnly
+						startIcon={{ icon: faTrashAlt }}
+					/>
+				</div>
+			</div>
+		{/each}
+		<Button
+			size="xs"
+			color="light"
+			startIcon={{ icon: faPlus }}
+			on:click={() => addElementByType()}
+		>
+			Add
+		</Button>
+	{/if}
+</div>

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

@@ -0,0 +1,55 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        canHide?: boolean | undefined;
+        componentInput: (import("../../inputType").StaticInput<string[]> & {
+            fieldType: "array";
+            defaultValue: string[];
+            subFieldType?: "text" | undefined;
+        }) | (import("../../inputType").StaticInput<string[]> & {
+            fieldType: "array";
+            defaultValue: string[];
+            subFieldType?: "textarea" | undefined;
+        }) | (import("../../inputType").StaticInput<number[]> & {
+            fieldType: "array";
+            defaultValue: number[];
+            subFieldType?: "number" | undefined;
+        }) | (import("../../inputType").StaticInput<boolean[]> & {
+            fieldType: "array";
+            defaultValue: boolean[];
+            subFieldType?: "boolean" | undefined;
+        }) | (import("../../inputType").StaticInput<string[]> & {
+            fieldType: "array";
+            defaultValue: string[];
+            subFieldType?: "date" | undefined;
+        }) | (import("../../inputType").StaticInput<string[]> & {
+            fieldType: "array";
+            defaultValue: string[];
+            subFieldType?: "time" | undefined;
+        }) | (import("../../inputType").StaticInput<string[]> & {
+            fieldType: "array";
+            defaultValue: string[];
+            subFieldType?: "datetime" | undefined;
+        }) | (import("../../inputType").StaticInput<object[]> & {
+            fieldType: "array";
+            defaultValue: object[];
+            subFieldType?: "object" | undefined;
+        }) | (import("../../inputType").StaticInput<string[]> & {
+            fieldType: "array";
+            defaultValue: string[];
+            subFieldType?: "select" | undefined;
+        } & {
+            optionValuesKey: "buttonColorOptions" | "buttonSizeOptions" | "tableSearchOptions" | "chartThemeOptions";
+        });
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ArrayStaticInputEditorProps = typeof __propDef.props;
+export type ArrayStaticInputEditorEvents = typeof __propDef.events;
+export type ArrayStaticInputEditorSlots = typeof __propDef.slots;
+export default class ArrayStaticInputEditor extends SvelteComponentTyped<ArrayStaticInputEditorProps, ArrayStaticInputEditorEvents, ArrayStaticInputEditorSlots> {
+}
+export {};