windmill-components 1.82.4 → 1.82.6

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
@@ -216,6 +211,7 @@ let redraw = 0;
 					<input
 						{autofocus}
 						on:focus={(e) => {
+							window.dispatchEvent(new Event('pointerup'))
 							dispatch('focus')
 						}}
 						{disabled}
@@ -227,12 +223,14 @@ let redraw = 0;
 						bind:value
 						min={extra['min']}
 						max={extra['max']}
+						on:input={() => dispatch('input', { value, isRaw: true })}
 					/>
 				{/if}
 			{:else if inputCat == 'boolean'}
 				<Toggle
 					on:pointerdown={(e) => {
 						e?.stopPropagation()
+						window.dispatchEvent(new Event('pointerup'))
 					}}
 					{disabled}
 					class={valid
@@ -244,46 +242,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 +291,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,21 +306,32 @@ let redraw = 0;
 							bind:args={value}
 						/>
 					</div>
-				{:else if disabled}
-					<textarea disabled />
 				{:else}
-					<JsonEditor
-						bind:editor
+					<textarea
+						bind:this={el}
 						on:focus={(e) => {
+							window.dispatchEvent(new Event('pointerup'))
 							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'}
 				<select
 					on:focus={(e) => {
+						window.dispatchEvent(new Event('pointerup'))
 						dispatch('focus')
 					}}
 					{disabled}
@@ -338,11 +348,16 @@ let redraw = 0;
 				<div class="border my-1 mb-4 w-full border-gray-400">
 					<SimpleEditor
 						on:focus={(e) => {
+							window.dispatchEvent(new Event('pointerup'))
 							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>
@@ -372,10 +387,12 @@ let redraw = 0;
 								rows="1"
 								bind:this={el}
 								on:focus={(e) => {
+									window.dispatchEvent(new Event('pointerup'))
 									dispatch('focus')
 								}}
+								on:blur={() => dispatch('blur')}
 								use:autosize
-								on:keydown|stopPropagation
+								on:keydown|stopPropagation 
 								type="text"
 								{disabled}
 								class="col-span-10 {valid
@@ -383,6 +400,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/FlowBuilder.svelte

@@ -114,7 +114,6 @@ async function saveFlow(leave) {
         goto(`/flows/get/${$flowStore.path}?workspace_id=${$workspaceStore}`);
     }
     else if (initialPath !== $flowStore.path) {
-        initialPath = $flowStore.path;
         goto(`/flows/edit/${$flowStore.path}?workspace_id=${$workspaceStore}`);
     }
 }
@@ -176,11 +175,6 @@ $: selectedId && select(selectedId);
 $: initialPath && $workspaceStore && loadSchedule();
 loadHubScripts();
 function onKeyDown(event) {
-    let classes = event.target?.['className'];
-    if ((typeof classes === 'string' && classes.includes('inputarea')) ||
-        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
-        return;
-    }
     switch (event.key) {
         case 'Z':
             if (event.ctrlKey) {

package/components/FlowStatusViewer.svelte

@@ -18,7 +18,6 @@ import SimpleEditor from './SimpleEditor.svelte';
 import { Loader2 } from 'lucide-svelte';
 const dispatch = createEventDispatcher();
 export let jobId;
-export let workspaceId = undefined;
 export let flowState = undefined;
 export let flowJobIds = undefined;
 export let job = undefined;
@@ -74,7 +73,7 @@ function updateInnerModules() {
         else if (mod.type === FlowStatusModule.type.WAITING_FOR_EXECUTOR &&
             localFlowModuleStates[mod.id ?? '']?.scheduled_for == undefined) {
             JobService.getJob({
-                workspace: workspaceId ?? $workspaceStore ?? '',
+                workspace: $workspaceStore ?? '',
                 id: mod.job ?? ''
             }).then((job) => {
                 localFlowModuleStates[mod.id ?? ''] = {
@@ -93,7 +92,7 @@ async function loadJobInProgress() {
     if (jobId != '00000000-0000-0000-0000-000000000000') {
         try {
             const newJob = await JobService.getJob({
-                workspace: workspaceId ?? $workspaceStore ?? '',
+                workspace: $workspaceStore ?? '',
                 id: jobId ?? ''
             });
             if (JSON.stringify(newJob) !== JSON.stringify(job)) {
@@ -125,7 +124,7 @@ onDestroy(() => {
     timeout && clearTimeout(timeout);
 });
 async function loadOwner(path) {
-    is_owner = await isOwner(path, $userStore, workspaceId ?? $workspaceStore);
+    is_owner = await isOwner(path, $userStore, $workspaceStore);
 }
 let selected = 'graph';
 let payload = '"a test payload in json"';
@@ -171,7 +170,7 @@ function isSuccess(arg) {
 											variant="border"
 											on:click={async () =>
 												await JobService.resumeSuspendedFlowAsOwner({
-													workspace: workspaceId ?? $workspaceStore ?? '',
+													workspace: $workspaceStore ?? '',
 													id: job?.id ?? '',
 													requestBody: JSON.parse(payload)
 												})}
@@ -269,7 +268,6 @@ function isSuccess(arg) {
 					</Button>
 					<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
 						<svelte:self
-							{workspaceId}
 							bind:suspend_status
 							bind:retry_status
 							bind:flowState
@@ -344,7 +342,6 @@ function isSuccess(arg) {
 						<li class="w-full border border-gray-600 p-6 space-y-2 bg-blue-50/50">
 							{#if [FlowStatusModule.type.IN_PROGRESS, FlowStatusModule.type.SUCCESS, FlowStatusModule.type.FAILURE].includes(mod.type)}
 								<svelte:self
-									{workspaceId}
 									bind:suspend_status
 									bind:retry_status
 									bind:flowState

package/components/FlowStatusViewer.svelte.d.ts

@@ -5,7 +5,6 @@ import { type GraphModuleState } from './graph';
 declare const __propDef: {
     props: {
         jobId: string;
-        workspaceId?: string | undefined;
         flowState?: FlowState | undefined;
         flowJobIds?: {
             moduleId: string;

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}
@@ -145,6 +145,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				{:else}
 					<input
 						on:focus={(e) => {
+							window.dispatchEvent(new Event('pointerup'))
 							dispatch('focus')
 						}}
 						type="number"
@@ -155,12 +156,14 @@ $: 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'}
 				<Toggle
 					on:pointerdown={(e) => {
 						e?.stopPropagation()
+						window.dispatchEvent(new Event('pointerup'))
 					}}
 					class={valid
 						? ''
@@ -237,10 +240,14 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					<textarea
 						bind:this={el}
 						on:focus={(e) => {
+							window.dispatchEvent(new Event('pointerup'))
 							dispatch('focus')
 						}}
 						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'}"
@@ -251,6 +258,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 			{:else if inputCat == 'enum'}
 				<select
 					on:focus={(e) => {
+						window.dispatchEvent(new Event('pointerup'))
 						dispatch('focus')
 					}}
 					class="px-6"
@@ -283,8 +291,10 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 							rows="1"
 							bind:this={el}
 							on:focus={(e) => {
+								window.dispatchEvent(new Event('pointerup'))
 								dispatch('focus')
 							}}
+							on:blur={() => dispatch('blur')}
 							use:autosize
 							type="text"
 							class="col-span-10 {valid
@@ -292,6 +302,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/Multiselect.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class Multiselect extends SvelteComponentTyped<{
     value?: any[] | undefined;
     id?: string | undefined;
-    placeholder?: string | undefined;
     readonly?: boolean | undefined;
+    placeholder?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -20,8 +20,8 @@ declare const __propDef: {
     props: {
         value?: any[] | undefined;
         id?: string | undefined;
-        placeholder?: string | undefined;
         readonly?: boolean | undefined;
+        placeholder?: string | undefined;
     };
     events: {
         [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/Toggle.svelte

@@ -32,7 +32,7 @@ const dispatch = createEventDispatcher();
 			</span>
 		{/if}
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<div class="relative" on:click|stopPropagation>
+		<div class="relative" on:pointerdown on:click|stopPropagation>
 			<input
 				on:focus
 				on:click

package/components/Toggle.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         size?: "xs" | "sm" | undefined;
     };
     events: {
+        pointerdown: PointerEvent;
         click: MouseEvent;
         focus: FocusEvent;
         change: CustomEvent<any>;