windmill-components 1.70.0 → 1.75.0

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

@@ -1,4 +1,4 @@
-<script>import { Loader2 } from 'lucide-svelte';
+<script>import { Loader2, X } from 'lucide-svelte';
 import { Popup } from '../../../../common';
 export let componentInput;
 let anchor;
@@ -40,7 +40,25 @@ function select(label) {
 }
 </script>
 
-<input readonly value={formatName(componentInput.value)} bind:this={anchor} on:focus={getData} />
+<div class="relative">
+	<input
+		readonly
+		value={formatName(componentInput.value)}
+		bind:this={anchor}
+		on:focus={getData}
+		class="pr-8"
+	/>
+	{#if componentInput.value}
+		<button
+			class="absolute right-2 top-1/2 transform -translate-y-1/2 hover:bg-gray-200 rounded-full p-0.5"
+			on:click|stopPropagation|preventDefault={() => (componentInput.value = undefined)}
+			title="Clear"
+			aria-label="Clear"
+		>
+			<X size="14" />
+		</button>
+	{/if}
+</div>
 {#if anchor}
 	<Popup ref={anchor} options={{ placement: 'bottom' }} let:close>
 		<div class="max-w-xs shadow-[0_10px_40px_-5px_rgba(0,0,0,0.25)] bg-white rounded-md p-2">
@@ -49,7 +67,13 @@ function select(label) {
 					<Loader2 class="animate-spin" size={18} />
 				</div>
 			{:else if filteredItems}
-				<input bind:value={search} type="text" placeholder="Search" class="col-span-4 mb-2" />
+				<input
+					on:keydown|stopPropagation
+					bind:value={search}
+					type="text"
+					placeholder="Search"
+					class="col-span-4 mb-2"
+				/>
 				<div class="grid gap-1 grid-cols-4 max-h-[300px] overflow-auto">
 					{#each filteredItems as { label, icon }}
 						{@const formatedLabel = formatName(label)}

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

@@ -7,6 +7,8 @@ declare const __propDef: {
         }>;
     };
     events: {
+        keydown: KeyboardEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

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

@@ -1,6 +1,7 @@
 <script>import SimpleEditor from '../../../../SimpleEditor.svelte';
 export let code;
-export let value;
+export let value = undefined;
+export let error = '';
 function parseJson() {
     try {
         value = JSON.parse(code);
@@ -10,7 +11,6 @@ function parseJson() {
         error = e.message;
     }
 }
-let error = '';
 $: code && parseJson();
 </script>
 

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

@@ -2,7 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         code: string;
-        value: any;
+        value?: any;
+        error?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -5,22 +5,26 @@ 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';
 export let componentInput;
-const { onchange } = getContext('AppEditorContext');
+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} />
+		<input on:keydown|stopPropagation type="number" bind:value={componentInput.value} />
 	{:else if componentInput.fieldType === 'textarea'}
-		<textarea bind:value={componentInput.value} />
+		<textarea on:keydown|stopPropagation bind:value={componentInput.value} />
 	{:else if componentInput.fieldType === 'date'}
-		<input type="date" bind:value={componentInput.value} />
+		<input on:keydown|stopPropagation type="date" bind:value={componentInput.value} />
 	{:else if componentInput.fieldType === 'boolean'}
 		<Toggle bind:checked={componentInput.value} />
 	{:else if componentInput.fieldType === 'select'}
-		<select bind:value={componentInput.value}>
+		<select on:keydown|stopPropagation on:keydown|stopPropagation bind:value={componentInput.value}>
 			{#each staticValues[componentInput.optionValuesKey] || [] as option}
 				<option value={option}>
 					{option}
@@ -29,6 +33,31 @@ $: componentInput && onchange?.();
 		</select>
 	{:else if componentInput.fieldType === 'icon-select'}
 		<IconSelectInput bind:componentInput />
+	{:else if componentInput.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 && path) {
+							componentInput.value['value'] = `$res:${path}`
+						}
+					}}
+				/>
+			</div>
+		{:else}
+			Inconsistent labeled resource object
+		{/if}
+	{:else if componentInput.fieldType === 'color'}
+		<ColorInput bind:componentInput />
 	{:else if componentInput.fieldType === 'object'}
 		{#if componentInput?.format?.startsWith('resource-')}
 			<ResourcePicker
@@ -55,6 +84,25 @@ $: componentInput && onchange?.();
 	{:else if componentInput.fieldType === 'array'}
 		<ArrayStaticInputEditor 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="Static value"
+				bind:value={componentInput.value}
+			/>
+			<!-- 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>
+		</div>
 	{/if}
 {/if}

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

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

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

@@ -1,23 +1,21 @@
-<script>import { FileInput } from "../../../../common";
+<script>import { FileInput } from '../../../../common';
 export let componentInput;
 </script>
 
 <FileInput
 	accept={componentInput?.fileUpload?.accept}
 	multiple={componentInput?.fileUpload?.multiple}
-	convertToBase64={componentInput?.fileUpload?.base64}
+	convertTo={componentInput?.fileUpload?.convertTo}
 	iconSize={24}
 	class="text-sm py-4"
-	on:change={({detail}) => {
-		if(componentInput) {
-			componentInput.value = componentInput?.fileUpload?.multiple
-				? detail
-				: detail?.[0]
+	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></span>
+		<span />
 	</svelte:fragment>
-</FileInput>
+</FileInput>

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { UploadAppInput } from "../../../inputType";
+import type { UploadAppInput } from '../../../inputType';
 declare const __propDef: {
     props: {
         componentInput: UploadAppInput | undefined;

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

@@ -13,7 +13,7 @@ export let defaultUserInput = false;
 let tab = 'inlinescripts';
 let filter = '';
 let picker;
-const { app, workspace } = getContext('AppEditorContext');
+const { app, workspace } = getContext('AppViewerContext');
 async function loadSchemaFromTriggerable(path, runType) {
     return loadSchema(workspace, path, runType) ?? emptySchema();
 }

package/components/apps/inputType.d.ts

@@ -1,6 +1,7 @@
+import type { ReadFileAs } from '../common/fileInput/model';
 import type { staticValues } from './editor/componentsPanel/componentStaticValues';
 import type { InlineScript } from './types';
-export type InputType = 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any';
+export type InputType = 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'color' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any' | 'labeledresource';
 export type InputConnection = {
     componentId: string;
     path: string;
@@ -65,10 +66,10 @@ type InputConfiguration<T extends InputType, U, V extends InputType> = {
          */
         multiple?: boolean;
         /**
-         * Controls if the uploaded file(s) will be returned as `Base64` strings.
+         * Controls if the uploaded file(s) will be converted or not.
          * @default false
          */
-        base64?: boolean;
+        convertTo?: ReadFileAs;
     };
 };
 type StaticOptions = {
@@ -82,9 +83,9 @@ export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', s
      * One of the keys of `staticValues` from `lib/components/apps/editor/componentsPanel/componentStaticValues`
      */
     optionValuesKey: keyof typeof staticValues;
-}) | (AppInputSpec<'select', string> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & {
+}) | (AppInputSpec<'select', string> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'color', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & {
     optionValuesKey: keyof typeof staticValues;
-}) | (AppInputSpec<'array', string[], 'select'> & StaticOptions);
+}) | (AppInputSpec<'array', string[], 'select'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'labeledresource', object>;
 export type RowAppInput = Extract<AppInput, {
     type: 'row';
 }>;

package/components/apps/rx.js

@@ -1,4 +1,5 @@
 import { writable } from 'svelte/store';
+import { deepEqual } from 'fast-equals';
 export function buildWorld(components, previousWorld, context) {
     const newWorld = buildObservableWorld();
     const state = writable(0);
@@ -95,7 +96,7 @@ export function settableOutput(state, previousValue) {
         }
     }
     function set(x, force = false) {
-        if (value != x || force) {
+        if (!deepEqual(value, x) || force) {
             state.update((x) => x + 1);
             value = x;
             subscribers.forEach((x) => x.next(value));

package/components/apps/store.d.ts

@@ -1,2 +1,7 @@
+import type { Policy } from "../../gen";
 import type { App } from './types';
-export declare const importStore: import("svelte/store").Writable<App | undefined>;
+export declare const importStore: import("svelte/store").Writable<{
+    summary: string;
+    value: App;
+    policy: Policy;
+} | undefined>;

package/components/apps/types.d.ts

@@ -1,5 +1,6 @@
 import type { Schema } from '../../common';
 import type { Preview } from '../../gen';
+import type { History } from '../../history';
 import type { FilledItem } from '@windmill-labs/svelte-grid';
 import type { Writable } from 'svelte/store';
 import type { AppComponent } from './editor/component/components';
@@ -17,8 +18,8 @@ export interface GeneralAppInput {
     tooltip?: string;
 }
 export type ComponentCssProperty = {
-    class: string;
-    style: string;
+    class?: string;
+    style?: string;
 };
 export type ComponentCustomCSS<T extends string = string> = Record<T, ComponentCssProperty>;
 export interface BaseAppComponent extends Partial<Aligned> {
@@ -75,10 +76,9 @@ export type ConnectingInput = {
     sourceName?: string;
     hoveredComponent: string | undefined;
 };
-export type AppEditorContext = {
+export type AppViewerContext = {
     worldStore: Writable<World | undefined>;
     staticOutputs: Writable<Record<string, string[]>>;
-    lazyGrid: Writable<GridItem[]>;
     app: Writable<App>;
     summary: Writable<string>;
     selectedComponent: Writable<string | undefined>;
@@ -102,6 +102,16 @@ export type AppEditorContext = {
     }>>;
     openDebugRun: Writable<((componentID: string) => void) | undefined>;
     focusedGrid: Writable<FocusedGrid | undefined>;
+    stateId: Writable<number>;
+    parentWidth: Writable<number>;
+};
+export type AppEditorContext = {
+    history: History<App> | undefined;
+    componentControl: Writable<Record<string, {
+        left?: () => boolean;
+        right?: () => boolean;
+    }>>;
+    pickVariableCallback: Writable<((path: string) => void) | undefined>;
 };
 export type FocusedGrid = {
     parentComponentId: string;

package/components/apps/utils.d.ts

@@ -1,9 +1,8 @@
 import type { Schema } from '../../common';
+import type { App, ComponentCssProperty, ComponentCustomCSS, GridItem } from './types';
 import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType';
 import type { Output } from './rx';
-import type { App, GridItem } from './types';
 export declare function allItems(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): GridItem[];
-export declare function allItemsWithParent(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): [GridItem, string | undefined][];
 export declare function loadSchema(workspace: string, path: string, runType: 'script' | 'flow' | 'hubscript'): Promise<Schema>;
 export declare function schemaToInputsSpec(schema: Schema, defaultUserInput: boolean): Record<string, StaticAppInput>;
 export declare function accessPropertyByPath<T>(object: T, path: string): T | undefined;
@@ -19,3 +18,4 @@ export declare function buildExtraLib(components: Record<string, Record<string,
 export declare function getAllScriptNames(app: App): string[];
 export declare function toPascalCase(text: string): string;
 export declare function toKebabCase(text: string): string;
+export declare function concatCustomCss<T extends string = string>(appCss?: ComponentCustomCSS<T>, componentCss?: ComponentCustomCSS<T>): Record<T, ComponentCssProperty> | undefined;

package/components/apps/utils.js

@@ -1,60 +1,13 @@
 import { FlowService, ScriptService } from '../../gen';
 import { inferArgs } from '../../infer';
 import { emptySchema } from '../../utils';
-/*
-export function deleteComponent(
-    subgrid: string | undefined,
-    component: AppComponent,
-    app: App,
-    staticOutputs: Record<string, any>,
-    runnableComponents: Record<string, any>
-) {
-    if (parentItems) {
-        let index = parentItems.findIndex((item) => item.data?.id === component.id)
-        if (index != -1) {
-            parentItems.splice(index, 1)
-        }
-    }
-
-    delete staticOutputs[component.id]
-    delete runnableComponents[component.id]
-
-    if (
-        component.componentInput?.type === 'runnable' &&
-        component.componentInput?.runnable?.type === 'runnableByName'
-    ) {
-        const { name, inlineScript } = component.componentInput.runnable
-
-        if (inlineScript) {
-            if (!app.unusedInlineScripts) {
-                app.unusedInlineScripts = []
-            }
-
-            app.unusedInlineScripts.push({
-                name,
-                inlineScript
-            })
-        }
-    }
-}
-
-*/
+import { twMerge } from 'tailwind-merge';
 export function allItems(grid, subgrids) {
     if (subgrids == undefined) {
         return grid;
     }
     return [...grid, ...Object.values(subgrids).flat()];
 }
-export function allItemsWithParent(grid, subgrids) {
-    const items = grid.map((item) => [item, undefined]);
-    if (subgrids == undefined) {
-        return items;
-    }
-    return [
-        ...items,
-        ...Object.entries(subgrids).flatMap(([k, v]) => v.map((g) => [g, k]))
-    ];
-}
 export async function loadSchema(workspace, path, runType) {
     if (runType === 'script') {
         const script = await ScriptService.getScriptByPath({
@@ -106,7 +59,7 @@ export function accessPropertyByPath(object, path) {
     let a = path.split('.');
     for (let i = 0, depth = a.length; i < depth; ++i) {
         let key = a[i];
-        if (object[key]) {
+        if (object[key] != undefined) {
             object = object[key];
         }
         else {
@@ -209,3 +162,22 @@ export function toPascalCase(text) {
 export function toKebabCase(text) {
     return text.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 }
+export function concatCustomCss(appCss, componentCss) {
+    if (!componentCss)
+        return undefined;
+    const customStyle = {};
+    Object.keys(componentCss).forEach((key) => {
+        const k = key;
+        // This is the general style of the component type
+        const appStyle = appCss?.[k]?.style?.trim() || '';
+        const appEnding = appStyle?.endsWith(';') || !appStyle ? ' ' : '; ';
+        // This is the custom style of the component instance
+        const compStyle = componentCss[k]?.style?.trim() || '';
+        const compEnding = compStyle?.endsWith(';') || !compStyle ? ' ' : ';';
+        customStyle[k] = {
+            style: (appStyle + appEnding + compStyle + compEnding).trim(),
+            class: twMerge(appCss?.[k]?.class, componentCss[k]?.class)
+        };
+    });
+    return customStyle;
+}

package/components/common/button/ButtonPopup.svelte

@@ -13,6 +13,7 @@ export let target = '_self';
 export let startIcon = undefined;
 export let endIcon = undefined;
 export let spacingSize = size;
+export let loading = false;
 let ref;
 setContext(ButtonType.ItemContextKey, { size, color });
 $: separator = color === 'red' || color === 'blue' ? 'border-gray-200' : 'border-gray-400';
@@ -28,6 +29,7 @@ $: commonProps = {
 <div class="flex justy-start items-center">
 	{#if $$slots.main}
 		<Button
+			{loading}
 			{...commonProps}
 			{href}
 			{target}

package/components/common/button/ButtonPopup.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         startIcon?: ButtonType.Icon | undefined;
         endIcon?: ButtonType.Icon | undefined;
         spacingSize?: ButtonType.Size | undefined;
+        loading?: boolean | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/components/common/button/UndoRedo.svelte

@@ -0,0 +1,32 @@
+<script>import { Redo, Undo } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+import { Button } from '..';
+export let undoProps = {};
+export let redoProps = {};
+const dispatch = createEventDispatcher();
+</script>
+
+<div class="flex">
+	<Button
+		title="Undo"
+		variant="border"
+		color="light"
+		size="xs"
+		btnClasses="!min-h-[30px] !rounded-r-none"
+		on:click={() => dispatch('undo')}
+		{...undoProps}
+	>
+		<Undo size={14} />
+	</Button>
+	<Button
+		title="Redo"
+		variant="border"
+		color="light"
+		size="xs"
+		btnClasses="!min-h-[30px] !rounded-l-none !border-l-0"
+		on:click={() => dispatch('redo')}
+		{...redoProps}
+	>
+		<Redo size={14} />
+	</Button>
+</div>

package/components/common/button/UndoRedo.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        undoProps?: Record<string, any> | undefined;
+        redoProps?: Record<string, any> | undefined;
+    };
+    events: {
+        undo: CustomEvent<any>;
+        redo: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UndoRedoProps = typeof __propDef.props;
+export type UndoRedoEvents = typeof __propDef.events;
+export type UndoRedoSlots = typeof __propDef.slots;
+export default class UndoRedo extends SvelteComponentTyped<UndoRedoProps, UndoRedoEvents, UndoRedoSlots> {
+}
+export {};

package/components/common/drawer/Drawer.svelte

@@ -61,11 +61,17 @@ onMount(() => {
 
 <svelte:window on:keydown={onKeyDown} />
 
-<aside class="drawer {$$props.class}" class:open class:close={!open && timeout} {style}>
-	<div class="overlay" on:click={handleClickAway} />
-	<div class="panel {placement}" class:size>
+<aside
+	class="drawer {$$props.class} {$$props.positionClass}"
+	class:open
+	class:close={!open && timeout}
+	{style}
+>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div class="overlay {$$props.positionClass}" on:click={handleClickAway} />
+	<div class="panel {placement} {$$props.positionClass}" class:size>
 		{#if open || !timeout || alwaysOpen}
-			<slot />
+			<slot {open} />
 		{/if}
 	</div>
 </aside>

package/components/common/drawer/Drawer.svelte.d.ts

@@ -20,7 +20,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            open: boolean;
+        };
     };
 };
 export type DrawerProps = typeof __propDef.props;

package/components/common/drawer/DrawerContent.svelte

@@ -2,7 +2,6 @@
 import { faClose } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import { Icon } from 'svelte-awesome';
-import Button from '../button/Button.svelte';
 export let title = undefined;
 export let overflow_y = true;
 export let noPadding = false;