windmill-components 1.82.7 → 1.82.8

package/common.d.ts

@@ -1,4 +1,4 @@
-import type { Script } from './gen';
+import type { Script } from "./gen";
 export type OwnerKind = 'group' | 'user' | 'folder';
 export type ActionKind = 'Create' | 'Update' | 'Delete' | 'Execute';
 export type SupportedLanguage = Script.language;
@@ -11,7 +11,7 @@ export interface SchemaProperty {
     contentEncoding?: 'base64' | 'binary';
     format?: string;
     items?: {
-        type?: 'string' | 'number' | 'bytes' | 'object';
+        type?: 'string' | 'number' | 'bytes';
         contentEncoding?: 'base64';
     };
     properties?: {

package/components/ArgInput.svelte

@@ -15,9 +15,6 @@ import Toggle from './Toggle.svelte';
 import Password from './Password.svelte';
 import NumberTypeNarrowing from './NumberTypeNarrowing.svelte';
 import Range from './Range.svelte';
-import JsonEditor from './apps/editor/settingsPanel/inputEditor/JsonEditor.svelte';
-import { fade } from 'svelte/transition';
-import { X } from 'lucide-svelte';
 export let label = '';
 export let value;
 export let defaultValue = undefined;
@@ -71,7 +68,7 @@ $: {
 }
 export function evalValueToRaw() {
     if (value) {
-        rawValue = JSON.stringify(value, null, 2);
+        rawValue = JSON.stringify(value, null, 4);
     }
 }
 function fileChanged(e, cb) {
@@ -139,13 +136,12 @@ $: {
     }
 }
 $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
-let redraw = 0;
 </script>
 
 <div class="flex flex-col w-full min-w-[250px]">
 	<div>
 		{#if displayHeader}
-			<FieldHeader {label} {required} {type} {contentEncoding} {format} />
+			<FieldHeader {label} {required} {type} {contentEncoding} {format} {itemsType} />
 		{/if}
 		{#if editableSchema}
 			<div class="p-2 my-1 text-xs border-solid border border-gray-400">
@@ -168,7 +164,7 @@ let redraw = 0;
 								use:autosize
 								rows="1"
 								bind:value={description}
-								on:keydown|stopPropagation
+								on:keydown|stopPropagation 
 								placeholder="Field description"
 							/>
 							{#if type == 'string' && format != 'date-time'}
@@ -181,7 +177,6 @@ let redraw = 0;
 								<select bind:value={itemsType}>
 									<option value={undefined}>No specific item type</option>
 									<option value={{ type: 'string' }}> Items are strings</option>
-									<option value={{ type: 'object' }}> Items are objects (JSON)</option>
 									<option value={{ type: 'number' }}>Items are numbers</option>
 									<option value={{ type: 'string', contentEncoding: 'base64' }}
 										>Items are bytes</option
@@ -227,6 +222,7 @@ let redraw = 0;
 						bind:value
 						min={extra['min']}
 						max={extra['max']}
+						on:input={() => dispatch('input', { value, isRaw: true })}
 					/>
 				{/if}
 			{:else if inputCat == 'boolean'}
@@ -244,46 +240,44 @@ let redraw = 0;
 					<span>&nbsp; Not set</span>
 				{/if}
 			{:else if inputCat == 'list'}
-				<div class="w-full">
-					<div class="w-full">
-						{#key redraw}
-							{#if Array.isArray(value)}
-								{#each value ?? [] as v, i}
-									<div class="flex max-w-md mt-1 w-full items-center">
-										{#if itemsType?.type == 'number'}
-											<input type="number" bind:value={v} />
-										{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
-											<input
-												type="file"
-												class="my-6"
-												on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
-												multiple={false}
-											/>
-										{:else if itemsType?.type == 'object'}
-											<JsonEditor code={JSON.stringify(v, null, 2)} bind:value={v} />
-										{:else}
-											<input type="text" bind:value={v} />
-										{/if}
-										<button
-											transition:fade|local={{ duration: 100 }}
-											class="rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200"
-											aria-label="Clear"
-											on:click={() => {
-												value.splice(i, 1)
-												redraw += 1
-											}}
-										>
-											<X size={14} />
-										</button>
-									</div>
-								{/each}
-							{/if}
-						{/key}
+				<div>
+					<div>
+						{#each value ?? [] as v, i}
+							<div class="flex flex-row max-w-md mt-1">
+								{#if itemsType?.type == 'number'}
+									<input autofocus={autofocus && i == 0} type="number" bind:value={v} />
+								{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
+									<input
+										autofocus={autofocus && i == 0}
+										type="file"
+										class="my-6"
+										on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
+										multiple={false}
+									/>
+								{:else}
+									<input autofocus={autofocus && i == 0} type="text" bind:value={v} />
+								{/if}
+								<Button
+									variant="border"
+									color="red"
+									size="sm"
+									btnClasses="mx-6"
+									on:click={() => {
+										value = value.filter((el) => el != v)
+										if (value.length == 0) {
+											value = []
+										}
+									}}
+								>
+									<Icon data={faMinus} />
+								</Button>
+							</div>
+						{/each}
 					</div>
 					<Button
 						variant="border"
-						color="dark"
-						size="xs"
+						color="blue"
+						size="sm"
 						btnClasses="mt-1"
 						on:click={() => {
 							if (value == undefined || !Array.isArray(value)) {
@@ -295,6 +289,9 @@ let redraw = 0;
 						<Icon data={faPlus} class="mr-2" />
 						Add item
 					</Button>
+					<span class="ml-2">
+						{(value ?? []).length} item{(value ?? []).length > 1 ? 's' : ''}
+					</span>
 				</div>
 			{:else if inputCat == 'resource-object'}
 				<ObjectResourceInput {format} bind:value />
@@ -307,16 +304,25 @@ let redraw = 0;
 							bind:args={value}
 						/>
 					</div>
-				{:else if disabled}
-					<textarea disabled />
 				{:else}
-					<JsonEditor
-						bind:editor
+					<textarea
+						bind:this={el}
 						on:focus={(e) => {
 							dispatch('focus')
 						}}
-						code={rawValue}
-						bind:value
+						{autofocus}
+						{disabled}
+						use:autosize
+						on:keydown|stopPropagation 
+						style="max-height: {maxHeight}"
+						on:input={() => {
+							dispatch('input', { rawValue: value, isRaw: false })
+						}}
+						class="col-span-10 {valid
+							? ''
+							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
+						placeholder={defaultValue ? JSON.stringify(defaultValue, null, 4) : ''}
+						bind:value={rawValue}
 					/>
 				{/if}
 			{:else if inputCat == 'enum'}
@@ -340,9 +346,13 @@ let redraw = 0;
 						on:focus={(e) => {
 							dispatch('focus')
 						}}
+						on:blur={() => dispatch('blur')}
 						bind:this={editor}
 						lang={inputCat}
 						bind:code={value}
+						on:change={async () => {
+							dispatch('input', { rawValue: value, isRaw: false })
+						}}
 						autoHeight
 					/>
 				</div>
@@ -374,8 +384,9 @@ let redraw = 0;
 								on:focus={(e) => {
 									dispatch('focus')
 								}}
+								on:blur={() => dispatch('blur')}
 								use:autosize
-								on:keydown|stopPropagation
+								on:keydown|stopPropagation 
 								type="text"
 								{disabled}
 								class="col-span-10 {valid
@@ -383,6 +394,9 @@ let redraw = 0;
 									: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
 								placeholder={defaultValue ?? ''}
 								bind:value
+								on:input={() => {
+									dispatch('input', { rawValue: value, isRaw: false })
+								}}
 							/>
 							{#if itemPicker}
 								<div class="ml-1 relative">

package/components/ArgInput.svelte.d.ts

@@ -20,7 +20,7 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         editableSchema?: boolean | undefined;
         itemsType?: {
-            type?: "string" | "number" | "object" | "bytes" | undefined;
+            type?: "string" | "number" | "bytes" | undefined;
             contentEncoding?: "base64" | undefined;
         } | undefined;
         displayHeader?: boolean | undefined;
@@ -42,6 +42,8 @@ declare const __propDef: {
     events: {
         keydown: KeyboardEvent;
         focus: CustomEvent<any>;
+        input: CustomEvent<any>;
+        blur: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/DisplayResult.svelte

@@ -75,6 +75,23 @@ let payload = '';
 let jsonViewer;
 </script>
 
+<Portal>
+	<Drawer bind:this={jsonViewer} size="900px">
+		<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
+			<svelte:fragment slot="actions">
+				<Button
+					on:click={() => copyToClipboard(JSON.stringify(result, null, 4))}
+					color="light"
+					size="xs"
+				>
+					<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
+				</Button>
+			</svelte:fragment>
+			<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+		</DrawerContent>
+	</Drawer>
+</Portal>
+
 <div class="inline-highlight">
 	{#if result != undefined}
 		{#if resultKind && resultKind != 'json'}
@@ -220,20 +237,3 @@ let jsonViewer;
 		<div class="text-gray-500 text-sm">No result: {JSON.stringify(result)}</div>
 	{/if}
 </div>
-
-<Portal>
-	<Drawer bind:this={jsonViewer} size="900px">
-		<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
-			<svelte:fragment slot="actions">
-				<Button
-					on:click={() => copyToClipboard(JSON.stringify(result, null, 4))}
-					color="light"
-					size="xs"
-				>
-					<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
-				</Button>
-			</svelte:fragment>
-			<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
-		</DrawerContent>
-	</Drawer>
-</Portal>

package/components/Editor.svelte

@@ -394,6 +394,9 @@ async function loadMonaco() {
             reloadWebsocket();
         }
     });
+    editor.onDidBlurEditorText(() => {
+        dispatch('blur');
+    });
     reloadWebsocket();
     return () => {
         try {

package/components/Editor.svelte.d.ts

@@ -30,6 +30,7 @@ declare const __propDef: {
     events: {
         change: CustomEvent<any>;
         focus: CustomEvent<any>;
+        blur: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/FieldHeader.svelte

@@ -4,6 +4,7 @@ export let format = '';
 export let contentEncoding = '';
 export let type = undefined;
 export let required = false;
+export let itemsType = undefined;
 </script>
 
 <div class="inline-flex flex-row items-center truncated">

package/components/FieldHeader.svelte.d.ts

@@ -6,6 +6,10 @@ declare const __propDef: {
         contentEncoding?: string | undefined;
         type?: string | undefined;
         required?: boolean | undefined;
+        itemsType?: {
+            type?: "string" | "number" | "bytes" | undefined;
+            contentEncoding?: "base64" | undefined;
+        } | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowViewer.svelte

@@ -52,6 +52,7 @@ function toAny(x) {
 									type={toAny(v)?.type}
 									contentEncoding={toAny(v)?.contentEncoding}
 									format={toAny(v)?.format}
+									itemsType={toAny(v)?.itemsType}
 								/><span class="ml-4 mt-2 text-xs"
 									>{toAny(v)?.default != undefined
 										? 'default: ' + JSON.stringify(toAny(v)?.default)

package/components/InputTransformForm.svelte

@@ -104,6 +104,7 @@ $: schema.properties[argName].default && setDefaultCode();
 				contentEncoding={schema.properties[argName].contentEncoding}
 				required={schema.required.includes(argName)}
 				type={schema.properties[argName].type}
+				itemsType={schema.properties[argName].items}
 			/>
 
 			{#if isStaticTemplate(inputCat)}

package/components/LightweightArgInput.svelte

@@ -122,7 +122,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 <div class="flex flex-col w-full min-w-[250px]">
 	<div>
 		{#if displayHeader}
-			<FieldHeader {label} {required} {type} {contentEncoding} {format} />
+			<FieldHeader {label} {required} {type} {contentEncoding} {format} {itemsType} />
 		{/if}
 
 		{#if description}
@@ -155,6 +155,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 						bind:value
 						min={extra['min']}
 						max={extra['max']}
+						on:input={() => dispatch('input', { value, isRaw: true })}
 					/>
 				{/if}
 			{:else if inputCat == 'boolean'}
@@ -241,6 +242,9 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 						}}
 						use:autosize
 						style="max-height: {maxHeight}"
+						on:input={() => {
+							dispatch('input', { rawValue: value, isRaw: false })
+						}}
 						class="col-span-10 {valid
 							? ''
 							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
@@ -285,6 +289,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 							on:focus={(e) => {
 								dispatch('focus')
 							}}
+							on:blur={() => dispatch('blur')}
 							use:autosize
 							type="text"
 							class="col-span-10 {valid
@@ -292,6 +297,9 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
 							placeholder={defaultValue ?? ''}
 							bind:value
+							on:input={() => {
+								dispatch('input', { rawValue: value, isRaw: false })
+							}}
 						/>
 					</div>
 				</div>

package/components/LightweightArgInput.svelte.d.ts

@@ -15,7 +15,7 @@ declare const __propDef: {
         maxRows?: number | undefined;
         enum_?: string[] | undefined;
         itemsType?: {
-            type?: "string" | "number" | "object" | "bytes" | undefined;
+            type?: "string" | "number" | "bytes" | undefined;
             contentEncoding?: "base64" | undefined;
         } | undefined;
         displayHeader?: boolean | undefined;
@@ -28,6 +28,8 @@ declare const __propDef: {
     };
     events: {
         focus: CustomEvent<any>;
+        input: CustomEvent<any>;
+        blur: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/SimpleEditor.svelte

@@ -146,6 +146,7 @@ async function loadMonaco() {
     });
     editor.onDidBlurEditorText(() => {
         code = getCode();
+        dispatch('blur');
     });
     if (lang == 'javascript') {
         const stdLib = { content: libStdContent, filePath: 'es5.d.ts' };

package/components/SimpleEditor.svelte.d.ts

@@ -21,6 +21,7 @@ declare const __propDef: {
     events: {
         change: CustomEvent<any>;
         focus: CustomEvent<any>;
+        blur: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/TemplateEditor.svelte

@@ -495,6 +495,7 @@ async function loadMonaco() {
     });
     editor.onDidBlurEditorText(() => {
         code = getCode();
+        dispatch('blur');
     });
 }
 export function focus() {

package/components/apps/components/helpers/InputValue.svelte

@@ -9,7 +9,7 @@ export let id = undefined;
 export let error = '';
 export let extraContext = {};
 export let key = '';
-const { componentControl, runnableComponents } = getContext('AppViewerContext');
+const { componentControl } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
 if (input == undefined) {
     dispatch('done');
@@ -67,7 +67,7 @@ async function handleConnection() {
 }
 async function evalExpr(input) {
     try {
-        const r = await eval_like(input.expr, computeGlobalContext($worldStore, id, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
+        const r = await eval_like(input.expr, computeGlobalContext($worldStore, id, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore);
         error = '';
         return r;
     }
@@ -81,7 +81,7 @@ async function getValue(input) {
         return;
     if (input.type === 'template' && isCodeInjection(input.eval)) {
         try {
-            const r = await eval_like('`' + input.eval + '`', computeGlobalContext($worldStore, id, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
+            const r = await eval_like('`' + input.eval + '`', computeGlobalContext($worldStore, id, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore);
             error = '';
             return r;
         }

package/components/apps/components/helpers/RunnableComponent.svelte

@@ -108,7 +108,7 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
     if (runnable?.type === 'runnableByName' && runnable.inlineScript?.language === 'frontend') {
         loading = true;
         try {
-            const r = await eval_like(runnable.inlineScript?.content, computeGlobalContext($worldStore, id, {}), false, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
+            const r = await eval_like(runnable.inlineScript?.content, computeGlobalContext($worldStore, id, {}), false, $state, $mode == 'dnd', $componentControl, $worldStore);
             await setResult(r);
             $state = $state;
         }
@@ -200,7 +200,7 @@ async function setResult(res) {
     const hasRes = res !== undefined && res !== null;
     if (transformer) {
         $worldStore.newOutput(id, 'raw', res);
-        res = await eval_like(transformer.content, computeGlobalContext($worldStore, id, { result: res }), false, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
+        res = await eval_like(transformer.content, computeGlobalContext($worldStore, id, { result: res }), false, $state, $mode == 'dnd', $componentControl, $worldStore);
         if (hasRes && res === undefined) {
             res = {
                 error: {

package/components/apps/components/helpers/RunnableWrapper.svelte

@@ -35,7 +35,7 @@ function isRunnableDefined(componentInput) {
 }
 export function onSuccess() {
     if (recomputeIds) {
-        recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb());
+        recomputeIds.map((id) => $runnableComponents?.cb?.[id]?.());
     }
     if (!doOnSuccess)
         return;

package/components/apps/components/helpers/eval.d.ts

@@ -2,6 +2,4 @@ import type { World } from '../../rx';
 export declare function computeGlobalContext(world: World | undefined, id: string | undefined, extraContext?: any): any;
 export declare function eval_like(text: string, context: {} | undefined, noReturn: boolean, state: Record<string, any>, editor: boolean, controlComponents: Record<string, {
     setTab?: (index: number) => void;
-}>, worldStore: World | undefined, runnableComponents: Record<string, {
-    cb?: () => void;
-}>): Promise<any>;
+}>, worldStore: World | undefined): Promise<any>;

package/components/apps/components/helpers/eval.js

@@ -15,7 +15,7 @@ export function computeGlobalContext(world, id, extraContext = {}) {
 }
 function create_context_function_template(eval_string, context, noReturn) {
     return `
-return async function (context, state, goto, setTab, recompute) {
+return async function (context, state, goto, setTab) {
 "use strict";
 ${Object.keys(context).length > 0
         ? `let ${Object.keys(context).map((key) => ` ${key} = context['${key}']`)};`
@@ -58,7 +58,7 @@ function isSerializable(obj) {
     }
     return true;
 }
-export async function eval_like(text, context = {}, noReturn, state, editor, controlComponents, worldStore, runnableComponents) {
+export async function eval_like(text, context = {}, noReturn, state, editor, controlComponents, worldStore) {
     const proxiedState = new Proxy(state, {
         set(target, key, value) {
             if (typeof key !== 'string') {
@@ -88,7 +88,5 @@ export async function eval_like(text, context = {}, noReturn, state, editor, con
         }
     }, (id, index) => {
         controlComponents[id]?.setTab?.(index);
-    }, (id) => {
-        runnableComponents[id]?.cb?.();
     });
 }

package/components/apps/components/inputs/AppMultiSelect.svelte

@@ -35,7 +35,7 @@ function handleItems() {
     }
 }
 $: value && outputs?.result.set(value.map((v) => v.value));
-$: css = concatCustomCss($app.css?.multiselectcomponent, customCss);
+$: css = concatCustomCss($app.css?.selectcomponent, customCss);
 </script>
 
 <InputValue {id} input={configuration.items} bind:value={labels} />
@@ -44,12 +44,8 @@ $: css = concatCustomCss($app.css?.multiselectcomponent, customCss);
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
 	<div
 		class="app-select w-full"
-		style="height: 100%; overflow: auto;"
-		on:pointerdown={(e) => {
-			if (!e.shiftKey) {
-				e.stopPropagation()
-			}
-		}}
+		style="height: 34px; overflow: auto;"
+		on:pointerdown|stopPropagation
 	>
 		{#if !value || Array.isArray(value)}
 			<Select
@@ -59,7 +55,7 @@ $: css = concatCustomCss($app.css?.multiselectcomponent, customCss);
 				on:change={(e) => e.stopPropagation()}
 				{items}
 				inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-				containerStyles={'border-color: #999; min-height: 100%;' +
+				containerStyles={'border-color: #999;' +
 					SELECT_INPUT_DEFAULT_STYLE.containerStyles +
 					css?.input?.style}
 				bind:value

package/components/apps/components/inputs/AppMultiSelect.svelte.d.ts

@@ -10,6 +10,8 @@ declare const __propDef: {
         render: boolean;
     };
     events: {
+        pointerdown: PointerEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/apps/components/inputs/AppSelect.svelte

@@ -87,15 +87,7 @@ let filterText = '';
 <InputValue {id} input={configuration.create} bind:value={create} />
 
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
-	<div
-		class="app-select w-full"
-		style="height: 34px;"
-		on:pointerdown={(e) => {
-			if (!e.shiftKey) {
-				e.stopPropagation()
-			}
-		}}
-	>
+	<div class="app-select w-full" style="height: 34px;" on:pointerdown|stopPropagation>
 		<Select
 			--border-radius="0"
 			--border-color="#999"

package/components/apps/components/inputs/AppSelect.svelte.d.ts

@@ -10,6 +10,8 @@ declare const __propDef: {
         render: boolean;
     };
     events: {
+        pointerdown: PointerEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};