windmill-components 1.55.1 → 1.55.2

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

@@ -0,0 +1,95 @@
+<script>import Button from '../../../common/button/Button.svelte';
+import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher, onMount } from 'svelte';
+import SimpleEditor from '../../../SimpleEditor.svelte';
+import { CheckCircle, Code2, X } from 'lucide-svelte';
+import InlineScriptEditorDrawer from './InlineScriptEditorDrawer.svelte';
+import { inferArgs } from '../../../../infer';
+import Badge from '../../../common/badge/Badge.svelte';
+import { fly } from 'svelte/transition';
+import Editor from '../../../Editor.svelte';
+import { scriptLangToEditorLang } from '../../../../utils';
+let inlineScriptEditorDrawer;
+export let inlineScript;
+export let name = undefined;
+let validCode = false;
+async function inferInlineScriptSchema(language, content, schema) {
+    try {
+        await inferArgs(language, content, schema);
+        validCode = true;
+    }
+    catch (e) {
+        console.error("Couldn't infer args", e);
+        validCode = false;
+    }
+    return schema;
+}
+onMount(async () => {
+    if (inlineScript) {
+        inlineScript.schema = await inferInlineScriptSchema(inlineScript?.language, inlineScript?.content, inlineScript?.schema);
+    }
+});
+const dispatch = createEventDispatcher();
+</script>
+
+<InlineScriptEditorDrawer bind:this={inlineScriptEditorDrawer} bind:inlineScript />
+
+<div class="h-full p-4 flex flex-col gap-2" transition:fly={{ duration: 50 }}>
+	<div class="flex justify-between w-full gap-1 flex-row items-center">
+		{#if name !== undefined}
+			<input bind:value={name} placeholder="Inline script name" />
+		{/if}
+		<div class="flex w-full flex-row gap-2 items-center justify-end">
+			{#if validCode}
+				<Badge color="green">
+					<CheckCircle size={16} />
+				</Badge>
+			{:else}
+				<Badge color="red">
+					<X size={16} />
+				</Badge>
+			{/if}
+
+			<Button
+				size="xs"
+				color="light"
+				variant="border"
+				iconOnly
+				startIcon={{ icon: faTrash }}
+				on:click={() => dispatch('delete')}
+			/>
+			<Button
+				size="xs"
+				color="blue"
+				on:click={() => {
+					inlineScriptEditorDrawer?.openDrawer()
+				}}
+			>
+				<div class="flex gap-1 items-center">
+					<Code2 size={16} />
+					Open full editor
+				</div>
+			</Button>
+		</div>
+	</div>
+
+	<div class="border h-full">
+		<Editor
+			class="flex flex-1 grow h-full"
+			lang={scriptLangToEditorLang(inlineScript?.language)}
+			bind:code={inlineScript.content}
+			fixedOverflowWidgets={false}
+			on:change={async () => {
+				if (inlineScript) {
+					let schema = await inferInlineScriptSchema(
+						inlineScript?.language,
+						inlineScript.content,
+						inlineScript.schema
+					)
+					inlineScript.schema = schema
+					inlineScript = inlineScript
+				}
+			}}
+		/>
+	</div>
+</div>

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { InlineScript } from '../../types';
+declare const __propDef: {
+    props: {
+        inlineScript: InlineScript;
+        name?: string | undefined;
+    };
+    events: {
+        delete: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InlineScriptEditorProps = typeof __propDef.props;
+export type InlineScriptEditorEvents = typeof __propDef.events;
+export type InlineScriptEditorSlots = typeof __propDef.slots;
+export default class InlineScriptEditor extends SvelteComponentTyped<InlineScriptEditorProps, InlineScriptEditorEvents, InlineScriptEditorSlots> {
+}
+export {};

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

@@ -0,0 +1,32 @@
+<script>import { Button, Drawer, DrawerContent } from '../../../common';
+import ScriptEditor from '../../../ScriptEditor.svelte';
+import { faSave } from '@fortawesome/free-solid-svg-icons';
+let scriptEditorDrawer;
+export let inlineScript;
+export function openDrawer() {
+    scriptEditorDrawer.openDrawer?.();
+}
+</script>
+
+<Drawer bind:this={scriptEditorDrawer} size="1200px">
+	<DrawerContent
+		title="Script Editor"
+		noPadding
+		forceOverflowVisible
+		on:close={scriptEditorDrawer.closeDrawer}
+	>
+		{#if inlineScript}
+			<ScriptEditor
+				noSyncFromGithub
+				lang={inlineScript.language}
+				path={inlineScript.path}
+				fixedOverflowWidgets={false}
+				bind:code={inlineScript.content}
+				bind:schema={inlineScript.schema}
+			/>
+		{/if}
+		<svelte:fragment slot="actions">
+			<Button startIcon={{ icon: faSave }} disabled>Automatically Saved</Button>
+		</svelte:fragment>
+	</DrawerContent>
+</Drawer>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { InlineScript } from '../../types';
+declare const __propDef: {
+    props: {
+        inlineScript: InlineScript;
+        openDrawer?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InlineScriptEditorDrawerProps = typeof __propDef.props;
+export type InlineScriptEditorDrawerEvents = typeof __propDef.events;
+export type InlineScriptEditorDrawerSlots = typeof __propDef.slots;
+export default class InlineScriptEditorDrawer extends SvelteComponentTyped<InlineScriptEditorDrawerProps, InlineScriptEditorDrawerEvents, InlineScriptEditorDrawerSlots> {
+    get openDrawer(): () => void;
+}
+export {};

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

@@ -0,0 +1,63 @@
+<script>import Button from '../../../common/button/Button.svelte';
+import FlowModuleScript from '../../../flows/content/FlowModuleScript.svelte';
+import { getScriptByPath } from '../../../../utils';
+import { faCodeBranch } from '@fortawesome/free-solid-svg-icons';
+import { r } from 'svelte-highlight/languages';
+import { clearResultAppInput } from '../../utils';
+import EmptyInlineScript from './EmptyInlineScript.svelte';
+import InlineScriptEditor from './InlineScriptEditor.svelte';
+export let componentInput;
+async function fork(path) {
+    const { content, language, schema } = await getScriptByPath(path);
+    componentInput.runnable = {
+        type: 'runnableByName',
+        name: path,
+        inlineScript: {
+            content,
+            language,
+            schema,
+            path
+        }
+    };
+}
+</script>
+
+{#if componentInput?.runnable?.type === 'runnableByName' && componentInput?.runnable?.name !== undefined}
+	{#if componentInput.runnable.inlineScript}
+		<InlineScriptEditor
+			bind:inlineScript={componentInput.runnable.inlineScript}
+			bind:name={componentInput.runnable.name}
+			on:delete={() => {
+				componentInput = clearResultAppInput(componentInput)
+			}}
+		/>
+	{:else}
+		<EmptyInlineScript
+			name={componentInput.runnable.name}
+			on:new={(e) => {
+				if (componentInput?.runnable?.type === 'runnableByName') {
+					componentInput.runnable.inlineScript = e.detail
+				}
+			}}
+		/>
+	{/if}
+{:else if componentInput?.runnable?.type === 'runnableByPath' && componentInput?.runnable?.path}
+	<div class="p-2 h-full flex flex-col gap-2 ">
+		<div>
+			<Button
+				size="xs"
+				startIcon={{ icon: faCodeBranch }}
+				on:click={() => {
+					if (componentInput.runnable?.type === 'runnableByPath') {
+						fork(componentInput.runnable.path)
+					}
+				}}
+			>
+				Fork
+			</Button>
+		</div>
+		<div class="border w-full">
+			<FlowModuleScript path={componentInput.runnable.path} />
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ResultAppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        componentInput: ResultAppInput;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InlineScriptEditorPanelProps = typeof __propDef.props;
+export type InlineScriptEditorPanelEvents = typeof __propDef.events;
+export type InlineScriptEditorPanelSlots = typeof __propDef.slots;
+export default class InlineScriptEditorPanel extends SvelteComponentTyped<InlineScriptEditorPanelProps, InlineScriptEditorPanelEvents, InlineScriptEditorPanelSlots> {
+}
+export {};

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

@@ -0,0 +1,44 @@
+<script>import { getContext } from 'svelte';
+import SplitPanesWrapper from '../../../splitPanes/SplitPanesWrapper.svelte';
+import { Pane } from 'svelte-splitpanes';
+import InlineScriptsPanelList from './InlineScriptsPanelList.svelte';
+import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte';
+import InlineScriptEditor from './InlineScriptEditor.svelte';
+const { app } = getContext('AppEditorContext');
+let selectedScriptComponentId = undefined;
+</script>
+
+<SplitPanesWrapper>
+	<Pane size={25}>
+		<InlineScriptsPanelList bind:selectedScriptComponentId />
+	</Pane>
+	<Pane size={75}>
+		{#each $app.grid as gridComponent, index (index)}
+			{#if gridComponent.data.id === selectedScriptComponentId}
+				<InlineScriptEditorPanel bind:componentInput={gridComponent.data.componentInput} />
+			{/if}
+
+			{#if gridComponent.data.type === 'tablecomponent'}
+				{#each gridComponent.data.actionButtons as actionButton, index (index)}
+					{#if actionButton.id === selectedScriptComponentId}
+						<InlineScriptEditorPanel bind:componentInput={actionButton.componentInput} />
+					{/if}
+				{/each}
+			{/if}
+		{/each}
+		{#if Array.isArray($app.unusedInlineScripts)}
+			{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
+				{#if unusedInlineScript.name === selectedScriptComponentId}
+					<InlineScriptEditor
+						bind:inlineScript={unusedInlineScript.inlineScript}
+						on:delete={() => {
+							// remove the script from the array at the index
+							$app.unusedInlineScripts.splice(index, 1)
+							$app.unusedInlineScripts = [...$app.unusedInlineScripts]
+						}}
+					/>
+				{/if}
+			{/each}
+		{/if}
+	</Pane>
+</SplitPanesWrapper>

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InlineScriptsPanelProps = typeof __propDef.props;
+export type InlineScriptsPanelEvents = typeof __propDef.events;
+export type InlineScriptsPanelSlots = typeof __propDef.slots;
+export default class InlineScriptsPanel extends SvelteComponentTyped<InlineScriptsPanelProps, InlineScriptsPanelEvents, InlineScriptsPanelSlots> {
+}
+export {};

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

@@ -0,0 +1,126 @@
+<script>import { Badge } from '../../../common';
+import { classNames } from '../../../../utils';
+import { getContext } from 'svelte';
+import PanelSection from '../settingsPanel/common/PanelSection.svelte';
+export let selectedScriptComponentId = undefined;
+const { app, selectedComponent } = getContext('AppEditorContext');
+function selectInlineScript(id, subId) {
+    selectedScriptComponentId = subId ? subId : id;
+    $selectedComponent = id;
+}
+$: runnablesByName = $app.grid.reduce((acc, gridComponent) => {
+    const component = gridComponent.data;
+    if (component.type === 'tablecomponent') {
+        component.actionButtons.forEach((actionButton) => {
+            if (actionButton.componentInput?.type === 'runnable') {
+                if (actionButton.componentInput.runnable?.type === 'runnableByName') {
+                    acc.push({
+                        name: actionButton.componentInput.runnable.name,
+                        id: gridComponent.id,
+                        subId: actionButton.id
+                    });
+                }
+            }
+        });
+    }
+    const componentInput = component.componentInput;
+    if (componentInput?.type === 'runnable') {
+        if (componentInput.runnable?.type === 'runnableByName') {
+            acc.push({
+                name: componentInput.runnable.name,
+                id: gridComponent.id
+            });
+        }
+    }
+    return acc;
+}, []);
+$: runnablesByPath = $app.grid.reduce((acc, gridComponent) => {
+    const componentInput = gridComponent.data.componentInput;
+    if (componentInput?.type === 'runnable') {
+        if (componentInput.runnable?.type === 'runnableByPath') {
+            acc.push({
+                name: componentInput.runnable.path,
+                id: gridComponent.id
+            });
+        }
+    }
+    return acc;
+}, []);
+// When seleced component changes, update selectedScriptComponentId
+$: {
+    if (selectedComponent) {
+        selectedScriptComponentId = $selectedComponent;
+    }
+}
+</script>
+
+<PanelSection title="Inline scripts" smallPadding>
+	<div class="flex flex-col gap-2 w-full">
+		{#if runnablesByName.length > 0}
+			<div class="flex gap-2 flex-col ">
+				{#each runnablesByName as { name, id, subId }, index (index)}
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<div
+						class="{classNames(
+							'border flex  gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-sm cursor-pointer hover:bg-blue-50 hover:text-blue-400',
+							selectedScriptComponentId === (subId ? subId : id) ? 'border-blue-500 border' : ''
+						)},"
+						on:click={() => selectInlineScript(id, subId)}
+					>
+						<span class="text-xs truncate">{name}</span>
+						<div>
+							<Badge color="dark-indigo">{id}</Badge>
+							{#if subId}
+								<Badge color="dark-indigo">{subId}</Badge>
+							{/if}
+						</div>
+					</div>
+				{/each}
+			</div>
+		{:else}
+			<div class="text-sm text-gray-500">No inline scripts</div>
+		{/if}
+
+		{#if Array.isArray($app.unusedInlineScripts) && $app.unusedInlineScripts.length > 0}
+			<div class="flex gap-2 flex-col ">
+				{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<div
+						class="{classNames(
+							'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
+							selectedScriptComponentId === '' ? 'bg-blue-100 text-blue-600' : ''
+						)},"
+						on:click={() => selectInlineScript(unusedInlineScript.name)}
+					>
+						<span class="text-xs truncate">{unusedInlineScript.name}</span>
+						<Badge color="red">Unused</Badge>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</PanelSection>
+
+<PanelSection title="Runnable by path" smallPadding>
+	<div class="flex flex-col gap-2 w-full">
+		{#if runnablesByPath.length > 0}
+			<div class="flex gap-2 flex-col ">
+				{#each runnablesByPath as { name, id }, index (index)}
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<div
+						class="{classNames(
+							'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
+							selectedScriptComponentId === id ? 'bg-blue-100 text-blue-600' : ''
+						)},"
+						on:click={() => selectInlineScript(id)}
+					>
+						<span class="text-xs truncate">{name}</span>
+						<Badge color="dark-indigo">{id}</Badge>
+					</div>
+				{/each}
+			</div>
+		{:else}
+			<div class="text-sm text-gray-500">No inline scripts</div>
+		{/if}
+	</div>
+</PanelSection>

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        selectedScriptComponentId?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InlineScriptsPanelListProps = typeof __propDef.props;
+export type InlineScriptsPanelListEvents = typeof __propDef.events;
+export type InlineScriptsPanelListSlots = typeof __propDef.slots;
+export default class InlineScriptsPanelList extends SvelteComponentTyped<InlineScriptsPanelListProps, InlineScriptsPanelListEvents, InlineScriptsPanelListSlots> {
+}
+export {};

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

@@ -0,0 +1,41 @@
+<script>import { ToggleButton, ToggleButtonGroup } from '../../../common';
+import { AlignCenterHorizontal, AlignCenterVertical, AlignEndHorizontal, AlignEndVertical, AlignStartHorizontal, AlignStartVertical } from 'lucide-svelte';
+import PanelSection from './common/PanelSection.svelte';
+export let component;
+</script>
+
+{#if component.verticalAlignment !== undefined}
+	<PanelSection title="Alignment">
+		<div class="w-full text-xs font-semibold">Horizontal</div>
+
+		<div class="w-full">
+			<ToggleButtonGroup bind:selected={component.horizontalAlignment}>
+				<ToggleButton position="left" value="left" size="xs">
+					<AlignStartVertical size={16} />
+				</ToggleButton>
+				<ToggleButton position="center" value="center" size="xs">
+					<AlignCenterVertical size={16} />
+				</ToggleButton>
+				<ToggleButton position="right" value="right" size="xs">
+					<AlignEndVertical size={16} />
+				</ToggleButton>
+			</ToggleButtonGroup>
+		</div>
+		{#if component.type !== 'formcomponent'}
+			<div class="w-full text-xs font-semibold">Vertical</div>
+			<div class="w-full">
+				<ToggleButtonGroup bind:selected={component.verticalAlignment}>
+					<ToggleButton position="left" value="top" size="xs">
+						<AlignStartHorizontal size={16} />
+					</ToggleButton>
+					<ToggleButton position="center" value="center" size="xs">
+						<AlignCenterHorizontal size={16} />
+					</ToggleButton>
+					<ToggleButton position="right" value="bottom" size="xs">
+						<AlignEndHorizontal size={16} />
+					</ToggleButton>
+				</ToggleButtonGroup>
+			</div>
+		{/if}
+	</PanelSection>
+{/if}

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppComponent } from '../../types';
+declare const __propDef: {
+    props: {
+        component: AppComponent;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AlignmentEditorProps = typeof __propDef.props;
+export type AlignmentEditorEvents = typeof __propDef.events;
+export type AlignmentEditorSlots = typeof __propDef.slots;
+export default class AlignmentEditor extends SvelteComponentTyped<AlignmentEditorProps, AlignmentEditorEvents, AlignmentEditorSlots> {
+}
+export {};

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

@@ -0,0 +1,44 @@
+<script>import { ToggleButton, ToggleButtonGroup } from '../../../common';
+import { faArrowRight, faCode, faPen } from '@fortawesome/free-solid-svg-icons';
+export let componentInput;
+export let disableStatic = false;
+$: if (componentInput.fieldType == 'textarea' && componentInput.type == 'static') {
+    //@ts-ignore
+    componentInput.type = 'template';
+}
+const brackets = '${}';
+</script>
+
+{#if componentInput.fieldType !== 'any'}
+	<div class="w-full">
+		<ToggleButtonGroup bind:selected={componentInput.type}>
+			{#if componentInput.fieldType === 'textarea'}
+				<ToggleButton position="left" value="template" size="xs" disable={disableStatic}>
+					{brackets} Templatable
+				</ToggleButton>
+			{:else}
+				<ToggleButton
+					position="left"
+					value="static"
+					startIcon={{ icon: faPen }}
+					size="xs"
+					disable={disableStatic}
+				>
+					Static
+				</ToggleButton>
+			{/if}
+
+			<ToggleButton
+				value="connected"
+				position="center"
+				startIcon={{ icon: faArrowRight }}
+				size="xs"
+			>
+				Connected
+			</ToggleButton>
+			<ToggleButton position="right" value="runnable" startIcon={{ icon: faCode }} size="xs">
+				Computed
+			</ToggleButton>
+		</ToggleButtonGroup>
+	</div>
+{/if}

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        componentInput: AppInput;
+        disableStatic?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComponentInputTypeEditorProps = typeof __propDef.props;
+export type ComponentInputTypeEditorEvents = typeof __propDef.events;
+export type ComponentInputTypeEditorSlots = typeof __propDef.slots;
+export default class ComponentInputTypeEditor extends SvelteComponentTyped<ComponentInputTypeEditorProps, ComponentInputTypeEditorEvents, ComponentInputTypeEditorSlots> {
+}
+export {};