windmill-components 1.46.3 → 1.55.0

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

@@ -0,0 +1,273 @@
+import { defaultAlignement } from './componentDefaultProps';
+const inputs = {
+    title: 'Inputs',
+    components: [
+        {
+            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 buttons = {
+    title: 'Buttons',
+    components: [
+        {
+            ...defaultAlignement,
+            id: 'buttoncomponent',
+            type: 'buttoncomponent',
+            componentInput: {
+                type: 'static',
+                fieldType: 'textarea',
+                defaultValue: '',
+                value: ''
+            },
+            recomputeIds: undefined,
+            configuration: {
+                label: {
+                    type: 'static',
+                    visible: true,
+                    value: 'Lorem ipsum',
+                    fieldType: 'textarea',
+                    defaultValue: 'Lorem ipsum'
+                },
+                color: {
+                    fieldType: 'select',
+                    type: 'static',
+                    visible: true,
+                    value: 'blue',
+                    optionValuesKey: 'buttonColorOptions',
+                    defaultValue: 'blue'
+                },
+                size: {
+                    fieldType: 'select',
+                    type: 'static',
+                    visible: true,
+                    value: 'xs',
+                    optionValuesKey: 'buttonSizeOptions',
+                    defaultValue: 'xs'
+                }
+            },
+            card: false
+        },
+        {
+            ...defaultAlignement,
+            id: 'formcomponent',
+            type: 'formcomponent',
+            componentInput: {
+                type: 'static',
+                fieldType: 'textarea',
+                defaultValue: '',
+                value: ''
+            },
+            recomputeIds: undefined,
+            configuration: {
+                label: {
+                    type: 'static',
+                    visible: true,
+                    value: 'Submit',
+                    fieldType: 'textarea',
+                    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: true
+        }
+    ]
+};
+const dataDisplay = {
+    title: 'Data Display',
+    components: [
+        {
+            ...defaultAlignement,
+            id: 'textcomponent',
+            type: 'textcomponent',
+            componentInput: {
+                type: 'static',
+                visible: true,
+                value: 'Lorem ipsum',
+                fieldType: 'textarea',
+                defaultValue: 'Lorem ipsum'
+            },
+            configuration: {},
+            card: false
+        },
+        {
+            id: 'tablecomponent',
+            type: 'tablecomponent',
+            configuration: {
+                search: {
+                    fieldType: 'select',
+                    type: 'static',
+                    value: 'Disabled',
+                    optionValuesKey: 'tableSearchOptions',
+                    defaultValue: 'Disabled'
+                },
+                pagination: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean',
+                    visible: true,
+                    defaultValue: false
+                }
+            },
+            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: []
+        },
+        {
+            id: 'piechartcomponent',
+            type: 'piechartcomponent',
+            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
+        },
+        {
+            id: 'barchartcomponent',
+            type: 'barchartcomponent',
+            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 = [buttons, inputs, dataDisplay];
+export { componentSets };

package/components/apps/editor/componentsPanel/store.d.ts

@@ -0,0 +1,9 @@
+export type IsOpenStoreItem = Record<string, boolean>;
+export declare const isOpenStore: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<IsOpenStoreItem>, invalidate?: ((value?: IsOpenStoreItem | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
+    update: (this: void, updater: import("svelte/store").Updater<IsOpenStoreItem>) => void;
+    /** If an item is already set, it won't get updated. */
+    addItems: (items: IsOpenStoreItem[]) => void;
+    toggle: (id: string) => void;
+    reset: () => void;
+};

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

@@ -0,0 +1,16 @@
+import { writable } from "svelte/store";
+const store = writable({});
+export const isOpenStore = {
+    subscribe: store.subscribe,
+    update: store.update,
+    /** If an item is already set, it won't get updated. */
+    addItems: (items) => {
+        let newItems = {};
+        items.forEach(item => newItems = { ...newItems, ...item });
+        store.update(last => ({ ...newItems, ...last }));
+    },
+    toggle: (id) => {
+        store.update(last => ({ ...last, [id]: !last[id] }));
+    },
+    reset: () => store.set({})
+};

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

@@ -0,0 +1,22 @@
+<script>import ObjectViewer from '../../../propertyPicker/ObjectViewer.svelte';
+import { getContext } from 'svelte';
+export let outputs = [];
+export let componentId;
+const { worldStore } = getContext('AppEditorContext');
+let object = {};
+function subscribeToAllOutputs(observableOutputs) {
+    if (observableOutputs) {
+        outputs.forEach((output) => {
+            observableOutputs[output].subscribe({
+                next: (value) => {
+                    object[output] = value;
+                }
+            });
+        });
+    }
+}
+$: $worldStore?.outputsById[componentId] &&
+    subscribeToAllOutputs($worldStore.outputsById[componentId]);
+</script>
+
+<ObjectViewer json={object} on:select topBrackets={true} />

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        outputs?: string[] | undefined;
+        componentId: string;
+    };
+    events: {
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComponentOutputViewerProps = typeof __propDef.props;
+export type ComponentOutputViewerEvents = typeof __propDef.events;
+export type ComponentOutputViewerSlots = typeof __propDef.slots;
+export default class ComponentOutputViewer extends SvelteComponentTyped<ComponentOutputViewerProps, ComponentOutputViewerEvents, ComponentOutputViewerSlots> {
+}
+export {};

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

@@ -0,0 +1,192 @@
+<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';
+import { getContext } from 'svelte';
+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);
+function connectInput(componentId, path) {
+    if ($connectingInput) {
+        $connectingInput = {
+            opened: false,
+            input: {
+                connection: {
+                    componentId,
+                    path
+                },
+                type: 'connected'
+            }
+        };
+    }
+}
+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;
+    }
+    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
+					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>
+			{/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>
+
+			<div
+				class={classNames(
+					'w-full p-2 rounded-xs border',
+					$selectedComponent === componentId
+						? 'outline-1 outline outline-offset-2 outline-blue-500'
+						: ''
+				)}
+			>
+				<ComponentOutputViewer
+					{outputs}
+					{componentId}
+					on:select={({ detail }) => {
+						connectInput(componentId, detail)
+					}}
+				/>
+			</div>
+		{/if}
+	{/each}
+</PanelSection>

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        appPath: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ContextPanelProps = typeof __propDef.props;
+export type ContextPanelEvents = typeof __propDef.events;
+export type ContextPanelSlots = typeof __propDef.slots;
+export default class ContextPanel extends SvelteComponentTyped<ContextPanelProps, ContextPanelEvents, ContextPanelSlots> {
+}
+export {};

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

@@ -0,0 +1,29 @@
+<script>import { Button } from '../../../common';
+import { Preview } from '../../../../gen';
+import { DENO_INIT_CODE_CLEAR } from '../../../../script_helpers';
+import { emptySchema } from '../../../../utils';
+import { getContext } from 'svelte';
+const { app } = getContext('AppEditorContext');
+export let appPath;
+function createScript() {
+    const scriptPath = 'name';
+    const path = `${appPath}/inline-script/${scriptPath}`;
+    const inlineScript = {
+        content: DENO_INIT_CODE_CLEAR,
+        language: Preview.language.DENO,
+        path,
+        schema: emptySchema()
+    };
+    if ($app.inlineScripts) {
+        $app.inlineScripts[scriptPath] = inlineScript;
+    }
+    else {
+        $app.inlineScripts = {
+            [scriptPath]: inlineScript
+        };
+    }
+}
+</script>
+
+<input value="" />
+<Button on:click={createScript}>Create</Button>

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        appPath: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InlineScriptCreationPanelProps = typeof __propDef.props;
+export type InlineScriptCreationPanelEvents = typeof __propDef.events;
+export type InlineScriptCreationPanelSlots = typeof __propDef.slots;
+export default class InlineScriptCreationPanel extends SvelteComponentTyped<InlineScriptCreationPanelProps, InlineScriptCreationPanelEvents, InlineScriptCreationPanelSlots> {
+}
+export {};

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>