windmill-components 1.75.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/DisplayResult.svelte

@@ -231,6 +231,6 @@ let jsonViewer;
 			<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
 		{/if}
 	{:else}
-		<div class="text-gray-500 text-sm">No result</div>
+		<div class="text-gray-500 text-sm">No result: {JSON.stringify(result)}</div>
 	{/if}
 </div>

package/components/Dropdown.svelte

@@ -1,19 +1,29 @@
 <script>import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-import { MoreHorizontal } from 'lucide-svelte';
+import { MoreVertical } from 'lucide-svelte';
 import { Button, Menu } from './common';
 import { goto } from '$app/navigation';
+import { twMerge } from 'tailwind-merge';
 export let dropdownItems;
 export let name = undefined;
 export let placement = 'bottom-start';
-export let btnClasses = '!text-blue-500 bg-transparent';
+export let btnClasses = '';
+$: buttonClass = twMerge('!border-0 bg-transparent !p-[6px]', btnClasses);
 const dispatch = createEventDispatcher();
 </script>
 
 <Menu {placement} let:close>
-	<Button nonCaptureEvent color="light" size="xs" {btnClasses} {...$$restProps} slot="trigger">
+	<Button
+		nonCaptureEvent
+		color="dark"
+		variant="border"
+		size="xs"
+		btnClasses={buttonClass}
+		{...$$restProps}
+		slot="trigger"
+	>
 		{#if !$$slots.default}
-			<MoreHorizontal size={20} />
+			<MoreVertical size={20} />
 		{:else}
 			<slot />
 		{/if}

package/components/FlowGraphViewer.svelte

@@ -80,7 +80,7 @@ let topHeight = 0;
 			minHeight={400}
 			modules={flow?.value?.modules}
 			failureModule={flow?.value?.failure_module}
-			on:click={(e) => (stepDetail = e.detail)}
+			on:select={(e) => (stepDetail = e.detail)}
 		/>
 	</div>
 	{#if !noSide}

package/components/FolderUsageInfo.svelte

@@ -1,6 +1,8 @@
 <script>import { FolderService, GroupService } from '../gen';
 import { workspaceStore } from '../stores';
 export let name;
+export let tabular = false;
+export let order = ['scripts', 'flows', 'apps', 'schedules', 'variables', 'resources'];
 $: $workspaceStore && loadUsage();
 let usage = {};
 async function loadUsage() {
@@ -8,10 +10,18 @@ async function loadUsage() {
 }
 </script>
 
-<div class="flex flex-col text-xs text-gray-600">
-	{#each Object.entries(usage) as [k, v]}
-		<div>
-			{k}: {v}
-		</div>
+{#if tabular}
+	{#each order as key}
+		<td class="text-center">
+			{usage[key] ?? ''}
+		</td>
 	{/each}
-</div>
+{:else}
+	<div class="flex flex-col text-xs text-gray-600">
+		{#each Object.entries(usage) as [k, v]}
+			<div>
+				{k}: {v}
+			</div>
+		{/each}
+	</div>
+{/if}

package/components/FolderUsageInfo.svelte.d.ts

@@ -2,6 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         name: string;
+        tabular?: boolean | undefined;
+        order?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -9,7 +9,7 @@ export let primary = true;
 		<span class="flex items-center space-x-2 mb-2">
 			<h1>{title}</h1>
 			{#if tooltip}
-				<Tooltip>{tooltip}</Tooltip>
+				<Tooltip scale={0.9}>{tooltip}</Tooltip>
 			{/if}
 		</span>
 	{:else}

package/components/Path.svelte

@@ -12,6 +12,7 @@ import Tooltip from './Tooltip.svelte';
 import FolderEditor from './FolderEditor.svelte';
 import GroupEditor from './GroupEditor.svelte';
 import { random_adj } from './random_positive_adjetive';
+import Badge from './common/badge/Badge.svelte';
 let meta = undefined;
 export let namePlaceholder = '';
 export let initialPath;
@@ -168,6 +169,10 @@ $: {
     }
 }
 function initPath() {
+    if (path != undefined && path != '') {
+        meta = pathToMeta(path);
+        return;
+    }
     if (initialPath == undefined || initialPath == '') {
         reset();
     }
@@ -272,7 +277,7 @@ async function addGroup() {
 		{#if meta != undefined}
 			<div class="flex gap-4 shrink">
 				<label class="block">
-					<span class="text-gray-700 text-sm whitespace-nowrap">&nbsp;</span>
+					<span class="text-gray-700 text-sm whitespace-nowrap">Owner</span>
 
 					<ToggleButtonGroup
 						class="mt-0.5"
@@ -375,8 +380,26 @@ async function addGroup() {
 		{/if}
 	</div>
 
-	<div class="flex-row flex justify-between w-full">
-		<div><span class="font-mono text-sm break-all">{path}</span></div>
+	<div class="flex flex-col w-full mt-4">
+		<div class="flex justify-start w-full">
+			<Badge
+				color="gray"
+				class="center-center !bg-gray-300 !text-gray-600 !w-[70px] !h-[24px] rounded-r-none"
+			>
+				Full path
+			</Badge>
+			<input
+				type="text"
+				readonly
+				value={path}
+				size={path?.length || 50}
+				class="font-mono !text-xs max-w-[calc(100%-70px)] !w-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
+				on:focus={({ currentTarget }) => {
+					currentTarget.select()
+				}}
+			/>
+			<!-- <span class="font-mono text-sm break-all">{path}</span> -->
+		</div>
 		<div class="text-red-600 text-2xs">{error}</div>
 	</div>
 </div>

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: {