windmill-components 1.60.4 → 1.83.1

package/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -1,42 +1,96 @@
 <script>import Toggle from '../../../../Toggle.svelte';
-import { staticValues } from '../../componentsPanel/componentStaticValues';
 import ArrayStaticInputEditor from '../ArrayStaticInputEditor.svelte';
 import ResourcePicker from '../../../../ResourcePicker.svelte';
 import JsonEditor from './JsonEditor.svelte';
 import { getContext } from 'svelte';
+import IconSelectInput from './IconSelectInput.svelte';
+import ColorInput from './ColorInput.svelte';
+import { Icon } from 'svelte-awesome';
+import { faDollarSign } from '@fortawesome/free-solid-svg-icons';
+import TabSelectInput from './TabSelectInput.svelte';
 export let componentInput;
-const { onchange } = getContext('AppEditorContext');
+export let fieldType = undefined;
+export let subFieldType = undefined;
+export let selectOptions = undefined;
+export let placeholder = undefined;
+export let format = undefined;
+export let noVariablePicker = false;
+const { onchange } = getContext('AppViewerContext');
+const { pickVariableCallback } = getContext('AppEditorContext');
 $: componentInput && onchange?.();
 </script>
 
 {#if componentInput?.type === 'static'}
-	{#if componentInput.fieldType === 'number'}
-		<input type="number" bind:value={componentInput.value} />
-	{:else if componentInput.fieldType === 'textarea'}
-		<textarea bind:value={componentInput.value} />
-	{:else if componentInput.fieldType === 'boolean'}
+	{#if fieldType === 'number' || fieldType === 'integer'}
+		<input on:keydown|stopPropagation type="number" bind:value={componentInput.value} />
+	{:else if fieldType === 'textarea'}
+		<textarea on:keydown|stopPropagation bind:value={componentInput.value} />
+	{:else if fieldType === 'date'}
+		<input on:keydown|stopPropagation type="date" bind:value={componentInput.value} />
+	{:else if fieldType === 'boolean'}
 		<Toggle bind:checked={componentInput.value} />
-	{:else if componentInput.fieldType === 'select'}
-		<select bind:value={componentInput.value}>
-			{#each staticValues[componentInput.optionValuesKey] || [] as option}
-				<option value={option}>
-					{option}
-				</option>
+	{:else if fieldType === 'select' && selectOptions}
+		<select on:keydown|stopPropagation on:keydown|stopPropagation bind:value={componentInput.value}>
+			{#each selectOptions ?? [] as option}
+				{#if typeof option == 'string'}
+					<option value={option}>
+						{option}
+					</option>
+				{:else}
+					<option value={option.value}>
+						{option.label}
+					</option>
+				{/if}
 			{/each}
 		</select>
-	{:else if componentInput.fieldType === 'object'}
-		{#if componentInput?.format?.startsWith('resource-')}
+	{:else if fieldType === 'icon-select'}
+		<IconSelectInput bind:componentInput />
+	{:else if fieldType === 'tab-select'}
+		<TabSelectInput bind:componentInput />
+	{:else if fieldType === 'labeledresource'}
+		{#if componentInput?.value && typeof componentInput?.value == 'object' && 'label' in componentInput?.value}
+			<div class="flex flex-col gap-1 w-full">
+				<input
+					on:keydown|stopPropagation
+					placeholder="Label"
+					type="text"
+					bind:value={componentInput.value['label']}
+				/>
+				<ResourcePicker
+					initialValue={componentInput.value?.['value']?.split('$res:')[1] || ''}
+					on:change={(e) => {
+						let path = e.detail
+						if (componentInput) {
+							if (path) {
+								componentInput.value['value'] = `$res:${path}`
+							} else {
+								componentInput.value['value'] = undefined
+							}
+						}
+					}}
+				/>
+			</div>
+		{:else}
+			Inconsistent labeled resource object
+		{/if}
+	{:else if fieldType === 'color'}
+		<ColorInput bind:value={componentInput.value} />
+	{:else if fieldType === 'object' || fieldType == 'labeledselect'}
+		{#if format?.startsWith('resource-')}
 			<ResourcePicker
 				initialValue={componentInput.value?.split('$res:')[1] || ''}
 				on:change={(e) => {
 					let path = e.detail
-
-					if (componentInput && path) {
-						componentInput.value = `$res:${path}`
+					if (componentInput) {
+						if (path) {
+							componentInput.value = `$res:${path}`
+						} else {
+							componentInput.value = undefined
+						}
 					}
 				}}
-				resourceType={componentInput.format.split('-').length > 1
-					? componentInput.format.substring('resource-'.length)
+				resourceType={format.split('-').length > 1
+					? format.substring('resource-'.length)
 					: undefined}
 			/>
 		{:else}
@@ -47,9 +101,30 @@ $: componentInput && onchange?.();
 				/>
 			</div>
 		{/if}
-	{:else if componentInput.fieldType === 'array'}
-		<ArrayStaticInputEditor bind:componentInput />
+	{:else if fieldType === 'array'}
+		<ArrayStaticInputEditor {subFieldType} bind:componentInput on:deleteArrayItem />
 	{:else}
-		<input type="text" placeholder="Static value" bind:value={componentInput.value} />
+		<div class="flex gap-1">
+			<input
+				on:keydown|stopPropagation
+				type="text"
+				placeholder={placeholder ?? 'Static value'}
+				bind:value={componentInput.value}
+			/>
+			{#if !noVariablePicker}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<div
+					class="min-w-min min-h-[34px] items-center leading-4 px-3 text-gray-600 cursor-pointer border border-gray-700 rounded center-center"
+					on:click={() => {
+						$pickVariableCallback = (variable) => {
+							if (componentInput) {
+								componentInput.value = `$var:${variable}`
+							}
+						}
+					}}
+					><Icon data={faDollarSign} />
+				</div>
+			{/if}
+		</div>
 	{/if}
 {/if}

package/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte.d.ts

@@ -1,10 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
-import type { StaticAppInput } from '../../../inputType';
+import type { InputType, StaticInput, StaticOptions } from '../../../inputType';
 declare const __propDef: {
     props: {
-        componentInput: StaticAppInput | undefined;
+        componentInput: StaticInput<any> | undefined;
+        fieldType?: InputType | undefined;
+        subFieldType?: InputType | undefined;
+        selectOptions?: StaticOptions['selectOptions'] | undefined;
+        placeholder?: string | undefined;
+        format?: string | undefined;
+        noVariablePicker?: boolean | undefined;
     };
     events: {
+        keydown: KeyboardEvent;
+        deleteArrayItem: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/apps/editor/settingsPanel/inputEditor/TabSelectInput.svelte

@@ -0,0 +1,46 @@
+<script>import { allItems } from '../../../utils';
+import { getContext } from 'svelte';
+export let componentInput;
+const { app } = getContext('AppViewerContext');
+const tabComponents = allItems($app.grid, $app.subgrids).filter((component) => component.data.type === 'tabscomponent');
+</script>
+
+{#if componentInput.value && tabComponents.length > 0}
+	<div>
+		<div class="flex flex-row gap-2 w-full">
+			<div class="flex flex-col">
+				<label for="tabId" class="text-xs font-semibold">Tab ID</label>
+
+				<select
+					id="tabId"
+					bind:value={componentInput.value.id}
+					class="border border-gray-300 rounded-md p-1 !w-16"
+				>
+					{#each tabComponents as tabComponent}
+						<option value={tabComponent.data.id}>
+							{tabComponent.data.id}
+						</option>
+					{/each}
+				</select>
+			</div>
+			<div class="flex flex-col">
+				<label for="tabIndex" class="text-xs font-semibold">Tab Index</label>
+				<select
+					id="tabIndex"
+					bind:value={componentInput.value.index}
+					class="border border-gray-300 rounded-md p-1 !w-16"
+				>
+					{#each tabComponents as tabComponent}
+						{#if tabComponent.data.id === componentInput.value.id}
+							{#each Array(tabComponent.data.numberOfSubgrids) as _, i}
+								<option value={i}>{i}</option>
+							{/each}
+						{/if}
+					{/each}
+				</select>
+			</div>
+		</div>
+	</div>
+{:else}
+	<div class="text-xs text-gray-500"> No tab component found in the app </div>
+{/if}

package/components/apps/editor/settingsPanel/inputEditor/TabSelectInput.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { StaticInput } from '../../../inputType';
+declare const __propDef: {
+    props: {
+        componentInput: StaticInput<{
+            id: string;
+            index: number;
+        }>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TabSelectInputProps = typeof __propDef.props;
+export type TabSelectInputEvents = typeof __propDef.events;
+export type TabSelectInputSlots = typeof __propDef.slots;
+export default class TabSelectInput extends SvelteComponentTyped<TabSelectInputProps, TabSelectInputEvents, TabSelectInputSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/inputEditor/UploadInputEditor.svelte

@@ -0,0 +1,21 @@
+<script>import { FileInput } from '../../../../common';
+export let componentInput;
+</script>
+
+<FileInput
+	accept={componentInput?.fileUpload?.accept}
+	multiple={componentInput?.fileUpload?.multiple}
+	convertTo={componentInput?.fileUpload?.convertTo}
+	iconSize={24}
+	class="text-sm py-4"
+	on:change={({ detail }) => {
+		if (componentInput) {
+			componentInput.value = componentInput?.fileUpload?.multiple ? detail : detail?.[0]
+		}
+	}}
+>
+	<svelte:fragment slot="selected-title">
+		<!-- Removing the title when there is a selected file -->
+		<span />
+	</svelte:fragment>
+</FileInput>

package/components/apps/editor/settingsPanel/inputEditor/UploadInputEditor.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { UploadAppInput } from '../../../inputType';
+declare const __propDef: {
+    props: {
+        componentInput: UploadAppInput | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UploadInputEditorProps = typeof __propDef.props;
+export type UploadInputEditorEvents = typeof __propDef.events;
+export type UploadInputEditorSlots = typeof __propDef.slots;
+export default class UploadInputEditor extends SvelteComponentTyped<UploadInputEditorProps, UploadInputEditorEvents, UploadInputEditorSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte

@@ -14,6 +14,7 @@ const dispatch = createEventDispatcher();
 <div class="w-full flex mt-1 items-center gap-2">
 	<slot />
 	<input
+		on:keydown|stopPropagation
 		type="text"
 		placeholder="Search inline scripts"
 		bind:value={filter}

package/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         inlineScripts?: string[] | undefined;
     };
     events: {
+        keydown: KeyboardEvent;
         pick: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte

@@ -6,14 +6,16 @@ import InlineScriptList from './InlineScriptList.svelte';
 import WorkspaceScriptList from './WorkspaceScriptList.svelte';
 import WorkspaceFlowList from './WorkspaceFlowList.svelte';
 import { getContext } from 'svelte';
-import { loadSchema, schemaToInputsSpec } from '../../../utils';
+import { getAllScriptNames, loadSchema, schemaToInputsSpec } from '../../../utils';
 import { emptySchema } from '../../../../../utils';
 export let appInput;
 export let defaultUserInput = false;
+export let id;
 let tab = 'inlinescripts';
 let filter = '';
 let picker;
-const { app, workspace } = getContext('AppEditorContext');
+const { app, workspace } = getContext('AppViewerContext');
+const { selectedComponentInEditor } = getContext('AppEditorContext');
 async function loadSchemaFromTriggerable(path, runType) {
     return loadSchema(workspace, path, runType) ?? emptySchema();
 }
@@ -28,6 +30,7 @@ async function pickScript(path) {
             schema
         };
         appInput.fields = fields;
+        $selectedComponentInEditor = id;
     }
 }
 async function pickFlow(path) {
@@ -41,6 +44,7 @@ async function pickFlow(path) {
             schema
         };
         appInput.fields = fields;
+        $selectedComponentInEditor = id;
     }
 }
 async function pickHubScript(path) {
@@ -54,6 +58,7 @@ async function pickHubScript(path) {
             schema
         };
         appInput.fields = fields;
+        $selectedComponentInEditor = id;
     }
 }
 function pickInlineScript(name) {
@@ -67,31 +72,15 @@ function pickInlineScript(name) {
         };
         $app.unusedInlineScripts.splice(unusedInlineScriptIndex, 1);
     }
+    $selectedComponentInEditor = id;
     $app = $app;
 }
 function createScript() {
     let index = 0;
     let newScriptPath = `Inline Script ${index}`;
-    const names = $app.grid.reduce((acc, gridItem) => {
-        const { componentInput } = gridItem.data;
-        if (componentInput?.type === 'runnable' &&
-            componentInput?.runnable?.type === 'runnableByName') {
-            acc.push(componentInput.runnable.name);
-        }
-        if (componentInput?.type === 'tablecomponent') {
-            componentInput.actionButtons.forEach((actionButton) => {
-                if (actionButton.componentInput?.type === 'runnable') {
-                    if (actionButton.componentInput.runnable?.type === 'runnableByName') {
-                        acc.push(actionButton.componentInput.runnable.name);
-                    }
-                }
-            });
-        }
-        return acc;
-    }, []);
-    const unusedNames = $app.unusedInlineScripts.map((x) => x.name);
+    const names = getAllScriptNames($app);
     // Find a name that is not used by any other inline script
-    while (names.includes(newScriptPath) || unusedNames.includes(newScriptPath)) {
+    while (names.includes(newScriptPath)) {
         newScriptPath = `Inline Script ${++index}`;
     }
     appInput.runnable = {
@@ -100,6 +89,7 @@ function createScript() {
         inlineScript: undefined
     };
     appInput = appInput;
+    $selectedComponentInEditor = id;
     return newScriptPath;
 }
 </script>

package/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         appInput: ResultAppInput;
         defaultUserInput?: boolean | undefined;
+        id: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte

@@ -0,0 +1,47 @@
+<script>import { fly } from 'svelte/transition';
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
+import { Badge, Button } from '../../../../common';
+import { secondaryMenu, SECONDARY_MENU_ID } from './';
+import { getContext } from 'svelte';
+const { selectedComponent } = getContext('AppViewerContext');
+let width;
+let lastSelected = $selectedComponent;
+$: if (lastSelected !== $selectedComponent) {
+    secondaryMenu.close();
+    lastSelected = $selectedComponent;
+}
+</script>
+
+<div
+	bind:clientWidth={width}
+	class="absolute z-50 inset-0 overflow-hidden"
+	class:pointer-events-none={!$secondaryMenu.isOpen}
+>
+	{#if $secondaryMenu.isOpen && $secondaryMenu.component}
+		<div
+			transition:fly|local={{ duration: 300, x: width, y: 0, opacity: 1 }}
+			id={SECONDARY_MENU_ID}
+			class="flex flex-col w-full h-full bg-white"
+		>
+			<div class="flex justify-between items-center bg-white gap-1 p-3">
+				<Button
+					color="light"
+					size="xs"
+					variant="border"
+					startIcon={{ icon: faChevronLeft }}
+					on:click={secondaryMenu.close}
+				>
+					Back
+				</Button>
+				<Badge color="blue">{$selectedComponent}</Badge>
+			</div>
+			<div class="relative h-full overflow-y-auto px-3 pb-3">
+				{#if typeof $secondaryMenu.component === 'string'}
+					{@html $secondaryMenu.component}
+				{:else}
+					<svelte:component this={$secondaryMenu.component} {...$secondaryMenu.props} />
+				{/if}
+			</div>
+		</div>
+	{/if}
+</div>

package/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.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 SecondaryMenuProps = typeof __propDef.props;
+export type SecondaryMenuEvents = typeof __propDef.events;
+export type SecondaryMenuSlots = typeof __propDef.slots;
+export default class SecondaryMenu extends SvelteComponentTyped<SecondaryMenuProps, SecondaryMenuEvents, SecondaryMenuSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/secondaryMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SecondaryMenu } from './SecondaryMenu.svelte';
+export * from './menuStore';

package/components/apps/editor/settingsPanel/secondaryMenu/index.js

@@ -0,0 +1,2 @@
+export { default as SecondaryMenu } from './SecondaryMenu.svelte';
+export * from './menuStore';

package/components/apps/editor/settingsPanel/secondaryMenu/menuStore.d.ts

@@ -0,0 +1,13 @@
+import type { SvelteComponent } from 'svelte';
+export declare const SECONDARY_MENU_ID: "app-secondary-menu";
+export interface SecondaryMenuStore {
+    isOpen: boolean;
+    component?: typeof SvelteComponent | string;
+    props: Record<string, any>;
+    onClose?: (() => void) | undefined;
+}
+export declare const secondaryMenu: {
+    readonly subscribe: (this: void, run: import("svelte/store").Subscriber<SecondaryMenuStore>, invalidate?: ((value?: SecondaryMenuStore | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
+    readonly open: (component: SecondaryMenuStore['component'], props?: SecondaryMenuStore['props'], onClose?: (() => void) | undefined) => void;
+    readonly close: () => void;
+};

package/components/apps/editor/settingsPanel/secondaryMenu/menuStore.js

@@ -0,0 +1,16 @@
+import { writable } from 'svelte/store';
+export const SECONDARY_MENU_ID = 'app-secondary-menu';
+const store = writable({ isOpen: false, component: undefined, props: {} });
+export const secondaryMenu = {
+    subscribe: store.subscribe,
+    open: (component, props = {}, onClose = undefined) => {
+        store.set({ isOpen: true, component, props, onClose });
+    },
+    close: () => {
+        store.update((state) => {
+            if (state.onClose)
+                state.onClose();
+            return { isOpen: false, component: undefined, props: {} };
+        });
+    }
+};

package/components/apps/editor/settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte

@@ -0,0 +1,31 @@
+<script>import Toggle from '../../../../Toggle.svelte';
+import Tooltip from '../../../../Tooltip.svelte';
+import TriggerBadgesList from './TriggerBadgesList.svelte';
+import { getDependencies } from './triggerListUtils';
+export let fields;
+export let autoRefresh = false;
+export let id;
+export let inlineScript;
+export let doNotRecomputeOnInputChanged = false;
+$: dependencies = getDependencies(fields);
+</script>
+
+{#if inlineScript.language !== 'frontend'}
+	<div class="flex items-center px-1">
+		<Toggle
+			size="xs"
+			color="red"
+			bind:checked={doNotRecomputeOnInputChanged}
+			options={{ right: 'do NOT recompute on input changes' }}
+		/>
+		<Tooltip>If not toggled, whenever an input is changed, the script will be re-run.</Tooltip>
+	</div>
+{/if}
+
+<TriggerBadgesList
+	bind:inlineScript
+	{id}
+	inputDependencies={dependencies}
+	onLoad={autoRefresh}
+	{doNotRecomputeOnInputChanged}
+/>

package/components/apps/editor/settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ConnectedAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../../../inputType';
+import type { InlineScript } from '../../../types';
+declare const __propDef: {
+    props: {
+        fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
+        autoRefresh?: boolean | undefined;
+        id: string;
+        inlineScript: InlineScript;
+        doNotRecomputeOnInputChanged?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BackgroundScriptTriggerListProps = typeof __propDef.props;
+export type BackgroundScriptTriggerListEvents = typeof __propDef.events;
+export type BackgroundScriptTriggerListSlots = typeof __propDef.slots;
+export default class BackgroundScriptTriggerList extends SvelteComponentTyped<BackgroundScriptTriggerListProps, BackgroundScriptTriggerListEvents, BackgroundScriptTriggerListSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte

@@ -0,0 +1,24 @@
+<script>import { getContext } from 'svelte';
+import TriggerBadgesList from './TriggerBadgesList.svelte';
+import { getDependencies } from './triggerListUtils';
+const { selectedComponent } = getContext('AppViewerContext');
+export let fields;
+export let appComponent;
+export let runnable;
+export let doNotRecomputeOnInputChanged = false;
+const onClick = ['buttoncomponent', 'formbuttoncomponent', 'formcomponent'].includes(appComponent.type);
+$: onLoad =
+    !onClick ||
+        (appComponent?.configuration?.triggerOnAppLoad != undefined &&
+            appComponent.configuration.triggerOnAppLoad.type == 'static' &&
+            appComponent.configuration.triggerOnAppLoad.value);
+</script>
+
+<TriggerBadgesList
+	inputDependencies={onClick ? [] : getDependencies(fields)}
+	bind:inlineScript={runnable.inlineScript}
+	{onLoad}
+	{doNotRecomputeOnInputChanged}
+	id={$selectedComponent?.[0]}
+	{onClick}
+/>

package/components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ConnectedAppInput, RowAppInput, RunnableByName, StaticAppInput, UserAppInput } from '../../../inputType';
+import type { AppComponent } from '../../component';
+declare const __propDef: {
+    props: {
+        fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
+        appComponent: AppComponent;
+        runnable: RunnableByName;
+        doNotRecomputeOnInputChanged?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComponentTriggerListProps = typeof __propDef.props;
+export type ComponentTriggerListEvents = typeof __propDef.events;
+export type ComponentTriggerListSlots = typeof __propDef.slots;
+export default class ComponentTriggerList extends SvelteComponentTyped<ComponentTriggerListProps, ComponentTriggerListEvents, ComponentTriggerListSlots> {
+}
+export {};