windmill-components 1.70.0 → 1.77.0

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

@@ -4,11 +4,11 @@ import { buildExtraLib } from '../../../utils';
 export let componentInput;
 export let id;
 export let hasRows = false;
-const { onchange, worldStore } = getContext('AppEditorContext');
+const { onchange, worldStore, state } = getContext('AppViewerContext');
 $: componentInput && onchange?.();
 $: extraLib =
     componentInput?.expr && $worldStore
-        ? buildExtraLib($worldStore?.outputsById ?? {}, id, hasRows)
+        ? buildExtraLib($worldStore?.outputsById ?? {}, id, hasRows, $state, false)
         : undefined;
 </script>
 

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

@@ -1,11 +1,13 @@
-<script>import { Loader2 } from 'lucide-svelte';
+<script>import { Loader2, X } from 'lucide-svelte';
 import { Popup } from '../../../../common';
+import { fade } from 'svelte/transition';
 export let componentInput;
 let anchor;
 let loading = false;
 let items;
 let filteredItems;
 let search = '';
+let openPopup;
 $: if (search) {
     filteredItems = items.filter((item) => {
         return item.label.toLowerCase().includes(search.toLowerCase());
@@ -15,14 +17,16 @@ else {
     filteredItems = items;
 }
 async function getData() {
-    if (items)
-        return;
+    if (items) {
+        return openPopup();
+    }
     loading = true;
     const data = await import('lucide-svelte/dist/svelte/icons');
     filteredItems = items = Object.entries(data)
         .filter(([key]) => !(key.endsWith('Icon') || key.startsWith('Lucide')))
         .map(([key, icon]) => ({ label: key, icon }));
     loading = false;
+    openPopup();
 }
 function formatName(name) {
     // Inserts space before capital letters and numbers
@@ -40,44 +44,76 @@ function select(label) {
 }
 </script>
 
-<input readonly value={formatName(componentInput.value)} bind:this={anchor} on:focus={getData} />
-{#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">
-			{#if loading}
-				<div class="center-center p-2">
-					<Loader2 class="animate-spin" size={18} />
-				</div>
-			{:else if filteredItems}
-				<input 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)}
-						<button
-							type="button"
-							title={formatedLabel}
-							on:click={() => {
-								select(label)
-								close()
-							}}
-							class="w-full center-center flex-col font-normal p-1 
-								hover:bg-gray-100 focus:bg-gray-100 rounded duration-200 
-								{label === componentInput.value ? 'text-blue-600 bg-blue-50 pointer-events-none' : ''}"
-						>
-							<svelte:component this={icon} size={22} />
-							<span class="inline-block w-full text-[10px] ellipsize pt-0.5">
-								{formatedLabel}
-							</span>
-						</button>
-					{:else}
-						<div class="col-span-4 text-center text-gray-700 text-sm p-2">
-							No icons match your search
-						</div>
-					{/each}
-				</div>
-			{:else}
-				<div class="text-center text-sm text-gray-600 p-2"> Couldn't load options </div>
-			{/if}
+<div class="relative">
+	<input
+		readonly
+		value={formatName(componentInput.value)}
+		bind:this={anchor}
+		on:focus={getData}
+		class="pr-8"
+	/>
+	{#if loading}
+		<div class="center-center absolute right-2 top-1/2 transform -translate-y-1/2 p-0.5">
+			<Loader2 class="animate-spin" size={16} />
 		</div>
+	{:else 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' }}
+		bind:open={openPopup}
+		let:close
+		transition={fade}
+	>
+		{#if !loading}
+			<div class="max-w-xs shadow-[0_10px_40px_-5px_rgba(0,0,0,0.25)] bg-white rounded-md p-2">
+				{#if filteredItems}
+					<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)}
+							<button
+								type="button"
+								title={formatedLabel}
+								on:click={() => {
+									select(label)
+									close()
+								}}
+								class="w-full center-center flex-col font-normal p-1 
+									hover:bg-gray-100 focus:bg-gray-100 rounded duration-200 
+									{label === componentInput.value ? 'text-blue-600 bg-blue-50 pointer-events-none' : ''}"
+							>
+								<svelte:component this={icon} size={22} />
+								<span class="inline-block w-full text-[10px] ellipsize pt-0.5">
+									{formatedLabel}
+								</span>
+							</button>
+						{:else}
+							<div class="col-span-4 text-center text-gray-700 text-sm p-2">
+								No icons match your search
+							</div>
+						{/each}
+					</div>
+				{:else}
+					<div class="text-center text-sm text-gray-600 p-2"> Couldn't load options </div>
+				{/if}
+			</div>
+		{/if}
 	</Popup>
 {/if}

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,13 +11,12 @@ function parseJson() {
         error = e.message;
     }
 }
-let error = '';
 $: code && parseJson();
 </script>
 
 <div class="flex flex-col w-full">
 	<div class="border border-gray-300 w-full">
-		<SimpleEditor autoHeight lang="json" bind:code />
+		<SimpleEditor on:change autoHeight lang="json" bind:code />
 	</div>
 	{#if error != ''}
 		<span class="text-red-600 text-xs">{error}</span>

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

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

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.d.ts

@@ -1,6 +1,7 @@
 import type { AppInput } from './inputType';
 import { type Writable } from 'svelte/store';
 export interface Subscriber<T> {
+    id?: string;
     next(v: T): any;
 }
 export interface Observable<T> {
@@ -15,13 +16,14 @@ export interface Input<T> extends Subscriber<T> {
 }
 export type World = {
     outputsById: Record<string, Record<string, Output<any>>>;
-    connect: <T>(inputSpec: AppInput, next: (x: T) => void) => Input<T>;
-    state: Writable<number>;
+    connect: <T>(inputSpec: AppInput, next: (x: T) => void, id?: string) => Input<T>;
+    stateId: Writable<number>;
+    newOutput: <T>(id: string, name: string, previousValue: T) => Output<T>;
 };
 export declare function buildWorld(components: Record<string, string[]>, previousWorld: World | undefined, context: Record<string, any>): World;
 export declare function buildObservableWorld(): {
-    connect: <T>(inputSpec: AppInput, next: (x: T) => void) => Input<T>;
+    connect: <T>(inputSpec: AppInput, next: (x: T) => void, id?: string) => Input<T>;
     newOutput: <T_1>(id: string, name: string, state: Writable<number>, previousValue: T_1) => Output<T_1>;
 };
-export declare function cachedInput<T>(nextParan: (x: T) => void): Input<T>;
+export declare function cachedInput<T>(nextParan: (x: T) => void, id?: string): Input<T>;
 export declare function settableOutput<T>(state: Writable<number>, previousValue: T): Output<T>;

package/components/apps/rx.js

@@ -1,35 +1,50 @@
 import { writable } from 'svelte/store';
+import { deepEqual } from 'fast-equals';
 export function buildWorld(components, previousWorld, context) {
     const newWorld = buildObservableWorld();
-    const state = writable(0);
+    const stateId = writable(0);
     const outputsById = {
         ctx: Object.fromEntries(Object.entries(context).map(([k, v]) => {
-            return [k, newWorld.newOutput('ctx', k, state, v)];
-        }))
+            return [k, newWorld.newOutput('ctx', k, stateId, v)];
+        })),
+        state: previousWorld?.outputsById?.state ?? {}
     };
     for (const [k, outputs] of Object.entries(components)) {
         outputsById[k] = {};
         for (const o of outputs) {
-            outputsById[k][o] = newWorld.newOutput(k, o, state, previousWorld?.outputsById[k]?.[o]?.peak());
+            outputsById[k][o] = newWorld.newOutput(k, o, stateId, previousWorld?.outputsById[k]?.[o]?.peak());
         }
     }
-    state.update((x) => x + 1);
-    return { outputsById, connect: newWorld.connect, state };
+    function newOutput(id, name, previousValue) {
+        if (outputsById[id]?.[name]) {
+            return outputsById[id][name];
+        }
+        let o = newWorld.newOutput(id, name, stateId, previousValue);
+        if (!outputsById[id]) {
+            outputsById[id] = {};
+        }
+        outputsById[id][name] = o;
+        return o;
+    }
+    stateId.update((x) => x + 1);
+    return { outputsById, connect: newWorld.connect, stateId, newOutput };
 }
 export function buildObservableWorld() {
     const observables = {};
-    function connect(inputSpec, next) {
+    function connect(inputSpec, next, id) {
         if (inputSpec.type === 'static') {
             return {
+                id,
                 peak: () => inputSpec.value,
                 next: () => { }
             };
         }
         else if (inputSpec.type === 'connected') {
-            const input = cachedInput(next);
+            const input = cachedInput(next, id);
             const connection = inputSpec.connection;
             if (!connection) {
                 return {
+                    id,
                     peak: () => undefined,
                     next: () => { }
                 };
@@ -50,6 +65,7 @@ export function buildObservableWorld() {
         }
         else if (inputSpec.type === 'user') {
             return {
+                id,
                 peak: () => inputSpec.value,
                 next: () => { }
             };
@@ -68,7 +84,7 @@ export function buildObservableWorld() {
         newOutput
     };
 }
-export function cachedInput(nextParan) {
+export function cachedInput(nextParan, id) {
     let value = undefined;
     function peak() {
         return value;
@@ -78,6 +94,7 @@ export function cachedInput(nextParan) {
         nextParan(x);
     }
     return {
+        id,
         peak,
         next
     };
@@ -86,16 +103,20 @@ export function settableOutput(state, previousValue) {
     let value = previousValue;
     const subscribers = [];
     function subscribe(x) {
-        if (!subscribers.includes(x)) {
+        let currentSubscriber = subscribers.findIndex((y) => y === x || (y.id && y.id === x.id));
+        if (currentSubscriber == -1) {
             subscribers.push(x);
-            // Send the current value to the new subscriber if it already exists
-            if (value !== undefined) {
-                x.next(value);
-            }
+        }
+        else {
+            subscribers[currentSubscriber] = x;
+        }
+        // Send the current value to the new subscriber if it already exists
+        if (value !== undefined) {
+            x.next(value);
         }
     }
     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>;