windmill-components 1.77.0 → 1.78.0

package/components/ArgInput.svelte

@@ -129,6 +129,9 @@ $: {
             else if (inputCat == 'boolean') {
                 value = false;
             }
+            else if (inputCat == 'list') {
+                value = [];
+            }
         }
     }
 }
@@ -263,7 +266,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 									on:click={() => {
 										value = value.filter((el) => el != v)
 										if (value.length == 0) {
-											value = undefined
+											value = []
 										}
 									}}
 								>
@@ -425,19 +428,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					{/if}
 				</div>
 			{/if}
-			{#if !required && inputCat != 'resource-object'}
-				<!-- <Tooltip placement="bottom" content="Reset to default value">
-					<Button
-						on:click={() => (value = undefined)}
-						{disabled}
-						color="alternative"
-						size="sm"
-						class="h-8"
-					>
-						<Icon data={faArrowRotateLeft} />
-					</Button>
-				</Tooltip> -->
-			{/if}
 			<slot name="actions" />
 		</div>
 		{#if !compact || (error && error != '')}

package/components/LightweightArgInput.svelte

@@ -0,0 +1,315 @@
+<script>import { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { setInputCat as computeInputCat } from '../utils';
+import { Badge, Button } from './common';
+import { createEventDispatcher } from 'svelte';
+import Icon from 'svelte-awesome';
+import FieldHeader from './FieldHeader.svelte';
+import ObjectResourceInput from './ObjectResourceInput.svelte';
+import ResourcePicker from './ResourcePicker.svelte';
+import autosize from 'svelte-autosize';
+import Toggle from './Toggle.svelte';
+import Range from './Range.svelte';
+import LightweightSchemaForm from './LightweightSchemaForm.svelte';
+export let label = '';
+export let value;
+export let defaultValue = undefined;
+export let description = '';
+export let format = '';
+export let contentEncoding = undefined;
+export let type = undefined;
+export let required = false;
+export let pattern = undefined;
+export let valid = required ? false : true;
+export let maxRows = 10;
+export let enum_ = undefined;
+export let itemsType = undefined;
+export let displayHeader = true;
+export let properties = undefined;
+export let extra = {};
+const dispatch = createEventDispatcher();
+$: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
+$: validateInput(pattern, value);
+let error = '';
+let el = undefined;
+let rawValue = undefined;
+$: {
+    if (rawValue) {
+        try {
+            value = JSON.parse(rawValue);
+            error = '';
+        }
+        catch (err) {
+            error = err.toString();
+        }
+    }
+}
+$: {
+    error = '';
+    if (inputCat === 'object') {
+        evalValueToRaw();
+        validateInput(pattern, value);
+    }
+}
+export function evalValueToRaw() {
+    if (value) {
+        rawValue = JSON.stringify(value, null, 4);
+    }
+}
+function fileChanged(e, cb) {
+    let t = e.target;
+    if (t && 'files' in t && t.files.length > 0) {
+        let reader = new FileReader();
+        reader.onload = (e) => {
+            cb(e.target.result.split('base64,')[1]);
+        };
+        reader.readAsDataURL(t.files[0]);
+    }
+    else {
+        cb(undefined);
+    }
+}
+export function focus() {
+    el?.focus();
+    if (el) {
+        el.style.height = '5px';
+        el.style.height = el.scrollHeight + 50 + 'px';
+    }
+}
+function validateInput(pattern, v) {
+    if (required && (v == undefined || v == null || v === '')) {
+        error = 'This field is required';
+        valid = false;
+    }
+    else {
+        if (pattern && !testRegex(pattern, v)) {
+            error = `Should match ${pattern}`;
+            valid = false;
+        }
+        else {
+            error = '';
+            valid = true;
+        }
+    }
+}
+function testRegex(pattern, value) {
+    try {
+        const regex = new RegExp(pattern);
+        return regex.test(value);
+    }
+    catch (err) {
+        return false;
+    }
+}
+$: {
+    if (value == undefined || value == null) {
+        value = defaultValue;
+        if (defaultValue === undefined || defaultValue === null) {
+            if (inputCat === 'string') {
+                value = '';
+            }
+            else if (inputCat == 'enum') {
+                value = enum_?.[0];
+            }
+            else if (inputCat == 'boolean') {
+                value = false;
+            }
+        }
+    }
+}
+$: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
+</script>
+
+<div class="flex flex-col w-full min-w-[250px]">
+	<div>
+		{#if displayHeader}
+			<FieldHeader {label} {required} {type} {contentEncoding} {format} {itemsType} />
+		{/if}
+
+		{#if description}
+			<div class="text-sm italic pb-1">
+				{description}
+			</div>
+		{/if}
+
+		<div class="flex space-x-1">
+			{#if inputCat == 'number'}
+				{#if extra['min'] != undefined && extra['max'] != undefined}
+					<div class="flex w-full gap-1">
+						<span>{extra['min']}</span>
+						<div class="grow">
+							<Range bind:value min={extra['min']} max={extra['max']} />
+						</div>
+						<span>{extra['max']}</span>
+						<span class="mx-2"><Badge large color="blue">{value}</Badge></span>
+					</div>
+				{:else}
+					<input
+						on:focus={(e) => {
+							window.dispatchEvent(new Event('pointerup'))
+							dispatch('focus')
+						}}
+						type="number"
+						class={valid
+							? ''
+							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
+						placeholder={defaultValue ?? ''}
+						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
+						? ''
+						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
+					bind:checked={value}
+				/>
+				{#if type == 'boolean' && value == undefined}
+					<span>&nbsp; Not set</span>
+				{/if}
+			{:else if inputCat == 'list'}
+				<div>
+					<div>
+						{#each value ?? [] as v, i}
+							<div class="flex flex-row max-w-md mt-1">
+								{#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}
+									<input 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 = undefined
+										}
+									}}
+								>
+									<Icon data={faMinus} />
+								</Button>
+							</div>
+						{/each}
+					</div>
+					<Button
+						variant="border"
+						color="blue"
+						size="sm"
+						btnClasses="mt-1"
+						on:click={() => {
+							if (value == undefined || !Array.isArray(value)) {
+								value = []
+							}
+							value = value.concat('')
+						}}
+					>
+						<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 />
+			{:else if inputCat == 'object'}
+				{#if properties && Object.keys(properties).length > 0}
+					<div class="p-4 pl-8 border rounded w-full">
+						<LightweightSchemaForm
+							schema={{ properties, $schema: '', required: [], type: 'object' }}
+							bind:args={value}
+						/>
+					</div>
+				{:else}
+					<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'}"
+						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')
+					}}
+					class="px-6"
+					bind:value
+				>
+					{#each enum_ ?? [] as e}
+						<option>{e}</option>
+					{/each}
+				</select>
+			{:else if inputCat == 'date'}
+				<input class="inline-block" type="datetime-local" bind:value />
+			{:else if inputCat == 'base64'}
+				<input
+					type="file"
+					class="my-6"
+					on:change={(x) => fileChanged(x, (val) => (value = val))}
+					multiple={false}
+				/>
+			{:else if inputCat == 'resource-string'}
+				<ResourcePicker
+					bind:value
+					resourceType={format.split('-').length > 1
+						? format.substring('resource-'.length)
+						: undefined}
+				/>
+			{:else if inputCat == 'string'}
+				<div class="flex flex-col w-full">
+					<div class="flex flex-row w-full items- justify-between">
+						<textarea
+							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
+								? ''
+								: '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>
+			{/if}
+			<slot name="actions" />
+		</div>
+	</div>
+</div>

package/components/LightweightArgInput.svelte.d.ts

@@ -0,0 +1,47 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SchemaProperty } from '../common';
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        value: any;
+        defaultValue?: any;
+        description?: string | undefined;
+        format?: string | undefined;
+        contentEncoding?: 'base64' | 'binary' | undefined;
+        type?: string | undefined;
+        required?: boolean | undefined;
+        pattern?: undefined | string;
+        valid?: boolean | undefined;
+        maxRows?: number | undefined;
+        enum_?: string[] | undefined;
+        itemsType?: {
+            type?: "string" | "number" | "bytes" | undefined;
+            contentEncoding?: "base64" | undefined;
+        } | undefined;
+        displayHeader?: boolean | undefined;
+        properties?: {
+            [name: string]: SchemaProperty;
+        } | undefined;
+        extra?: Record<string, any> | undefined;
+        evalValueToRaw?: (() => void) | undefined;
+        focus?: (() => void) | undefined;
+    };
+    events: {
+        focus: CustomEvent<any>;
+        input: CustomEvent<any>;
+        blur: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        actions: {};
+    };
+};
+export type LightweightArgInputProps = typeof __propDef.props;
+export type LightweightArgInputEvents = typeof __propDef.events;
+export type LightweightArgInputSlots = typeof __propDef.slots;
+export default class LightweightArgInput extends SvelteComponentTyped<LightweightArgInputProps, LightweightArgInputEvents, LightweightArgInputSlots> {
+    get evalValueToRaw(): () => void;
+    get focus(): () => void;
+}
+export {};

package/components/LightweightSchemaForm.svelte

@@ -0,0 +1,31 @@
+<script>import LightweightArgInput from './LightweightArgInput.svelte';
+export let schema;
+export let args = undefined;
+$: if (args === undefined) {
+    args = {};
+}
+</script>
+
+<div class="w-full">
+	{#each Object.keys(schema.properties ?? {}) as argName, i (argName)}
+		<div>
+			{#if typeof args == 'object' && schema?.properties[argName] && args}
+				<LightweightArgInput
+					label={argName}
+					description={schema.properties[argName].description}
+					bind:value={args[argName]}
+					type={schema.properties[argName].type}
+					required={schema.required.includes(argName)}
+					pattern={schema.properties[argName].pattern}
+					defaultValue={schema.properties[argName].default}
+					enum_={schema.properties[argName].enum}
+					format={schema.properties[argName].format}
+					contentEncoding={schema.properties[argName].contentEncoding}
+					properties={schema.properties[argName].properties}
+					itemsType={schema.properties[argName].items}
+					extra={schema.properties[argName]}
+				/>
+			{/if}
+		</div>
+	{/each}
+</div>

package/components/LightweightSchemaForm.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Schema } from '../common';
+declare const __propDef: {
+    props: {
+        schema: Schema;
+        args?: Record<string, any> | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LightweightSchemaFormProps = typeof __propDef.props;
+export type LightweightSchemaFormEvents = typeof __propDef.events;
+export type LightweightSchemaFormSlots = typeof __propDef.slots;
+export default class LightweightSchemaForm extends SvelteComponentTyped<LightweightSchemaFormProps, LightweightSchemaFormEvents, LightweightSchemaFormSlots> {
+}
+export {};

package/components/ModulePreview.svelte

@@ -49,6 +49,7 @@ function jobDone() {
     if (testJob && !testJob.canceled && testJob.type == 'CompletedJob' && `result` in testJob) {
         if ($flowStateStore[mod.id]?.previewResult) {
             $flowStateStore[mod.id].previewResult = testJob.result;
+            $flowStateStore = $flowStateStore;
         }
     }
 }

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/Path.svelte

@@ -169,6 +169,10 @@ $: {
     }
 }
 function initPath() {
+    if (path != undefined && path != '') {
+        meta = pathToMeta(path);
+        return;
+    }
     if (initialPath == undefined || initialPath == '') {
         reset();
     }

package/components/Range.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class Range extends SvelteComponentTyped<{
     value?: number | undefined;
     id?: null | undefined;
-    max?: number | undefined;
     min?: number | undefined;
+    max?: number | undefined;
     initialValue?: number | undefined;
 }, {
     pointerdown: PointerEvent;
@@ -22,8 +22,8 @@ declare const __propDef: {
     props: {
         value?: number | undefined;
         id?: null | undefined;
-        max?: number | undefined;
         min?: number | undefined;
+        max?: number | undefined;
         initialValue?: number | undefined;
     };
     events: {

package/components/SimpleEditor.svelte

@@ -82,7 +82,7 @@ export function setCode(ncode) {
         editor.setValue(ncode);
     }
 }
-function format() {
+export function format() {
     if (editor) {
         code = getCode();
         editor.getAction('editor.action.formatDocument').run();

package/components/SimpleEditor.svelte.d.ts

@@ -15,6 +15,7 @@ declare const __propDef: {
         getCode?: (() => string) | undefined;
         insertAtCursor?: ((code: string) => void) | undefined;
         setCode?: ((ncode: string) => void) | undefined;
+        format?: (() => void) | undefined;
         focus?: (() => void) | undefined;
     };
     events: {
@@ -33,6 +34,7 @@ export default class SimpleEditor extends SvelteComponentTyped<SimpleEditorProps
     get getCode(): () => string;
     get insertAtCursor(): (code: string) => void;
     get setCode(): (ncode: string) => void;
+    get format(): () => void;
     get focus(): () => void;
 }
 export {};

package/components/TemplateEditor.svelte

@@ -498,6 +498,9 @@ async function loadMonaco() {
         dispatch('blur');
     });
 }
+export function focus() {
+    editor?.focus();
+}
 onMount(() => {
     if (browser) {
         loadMonaco();