windmill-components 1.537.1 → 1.542.5

package/package/components/DropdownSelect.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Item } from '../utils';
+interface Props {
+    items?: Item[];
+    extraLabel?: import('svelte').Snippet;
+    selected: string;
+    selectedDisplayName?: string;
+    btnClasses?: string;
+}
+declare const DropdownSelect: import("svelte").Component<Props, {}, "">;
+type DropdownSelect = ReturnType<typeof DropdownSelect>;
+export default DropdownSelect;

package/package/components/DropdownV2Inner.svelte

@@ -36,7 +36,7 @@ computeItems();
 				aiDescription={item.displayName}
 			>
 				{#if item.icon}
-					<item.icon size={14} color={item.iconColor} />
+					<item.icon size={14} color={item.iconColor} class="shrink-0" />
 				{/if}
 				<p title={item.displayName} class="truncate grow min-w-0 whitespace-nowrap text-left">
 					{item.displayName}

package/package/components/{DynSelect.svelte → DynamicInput.svelte}

@@ -17,12 +17,20 @@ function validSelectObject(x) {
 <script lang="ts">import { usePromise } from '../svelte5Utils.svelte';
 import JobLoader, {} from './JobLoader.svelte';
 import Select from './select/Select.svelte';
+import MultiSelect from './select/MultiSelect.svelte';
+import { safeSelectItems } from './select/utils.svelte';
 import Tooltip from './Tooltip.svelte';
 import { Loader2 } from 'lucide-svelte';
 import {} from '../utils';
 import { deepEqual } from 'fast-equals';
 import { untrack } from 'svelte';
-let { value = $bindable(), helperScript, entrypoint, otherArgs: otherArgs } = $props();
+let { value = $bindable(), helperScript, format, otherArgs: otherArgs } = $props();
+const [inputType, entrypoint] = format.includes('-') ? format.split('-', 2) : [format, ''];
+const isMultiple = inputType === 'dynmultiselect';
+const isSelect = inputType === 'dynselect' || inputType === 'dynmultiselect';
+if (isMultiple && value === undefined) {
+    value = [];
+}
 let resultJobLoader = $state();
 let _items = usePromise(getItemsFromOptions, { clearValueOnRefresh: false });
 let items = $derived(_items.value);
@@ -34,7 +42,7 @@ async function getItemsFromOptions() {
             doneResult({ result }) {
                 if (!result || !Array.isArray(result)) {
                     if (result?.error?.message && result?.error?.name) {
-                        reject('Error in DynSelect function execution: ' +
+                        reject(`Error in ${inputType} function execution: ` +
                             result?.error?.name +
                             ' - ' +
                             result?.error?.message);
@@ -67,9 +75,18 @@ async function getItemsFromOptions() {
 }
 let neverLoaded = $state(true);
 $effect(() => {
-    if (_items.value && value) {
-        if (!_items.value.find((x) => x.value == value)) {
-            value = undefined;
+    if (_items.value && value !== undefined && isSelect) {
+        if (isMultiple && Array.isArray(value)) {
+            const availableValues = new Set(_items.value.map((x) => x.value));
+            const filteredValue = value.filter((v) => availableValues.has(v));
+            if (filteredValue.length !== value.length) {
+                value = filteredValue;
+            }
+        }
+        else if (!isMultiple && value !== undefined) {
+            if (!_items.value.find((x) => x.value == value)) {
+                value = undefined;
+            }
         }
     }
 });
@@ -98,15 +115,30 @@ $effect(() => {
 	<JobLoader onlyResult bind:this={resultJobLoader} />
 
 	<div class="w-full flex-col flex">
-		<Select
-			bind:value
-			bind:open
-			{items}
-			bind:filterText
-			loading={!open && _items.status === 'loading'}
-			clearable
-			noItemsMsg={_items.status === 'loading' ? 'Loading...' : 'No items found'}
-		/>
+		{#if inputType === 'dynmultiselect'}
+			<MultiSelect
+				bind:value
+				items={safeSelectItems(items || [])}
+				placeholder="Select items"
+				noItemsMsg={_items.status === 'loading' ? 'Loading...' : 'No items found'}
+				disabled={_items.status === 'loading'}
+			/>
+		{:else if inputType === 'dynselect'}
+			<Select
+				bind:value
+				bind:open
+				{items}
+				bind:filterText
+				loading={!open && _items.status === 'loading'}
+				clearable
+				noItemsMsg={_items.status === 'loading' ? 'Loading...' : 'No items found'}
+			/>
+		{:else}
+			<!-- Future dynamic input types can be added here -->
+			<div class="text-red-400 text-sm">
+				Unsupported dynamic input type: {inputType}
+			</div>
+		{/if}
 		{#if _items.error}
 			<div class="text-red-400 text-2xs">
 				error: <Tooltip>{_items.error}</Tooltip>
@@ -116,7 +148,7 @@ $effect(() => {
 {:else}
 	<div class="flex flex-col gap-1 w-full">
 		<div class="text-xs text-tertiary"
-			>Dynamic Select is not available in this mode, write value directly</div
+			>Dynamic input ({inputType}) is not available in this mode, write value directly</div
 		>
 		{#await import('./JsonEditor.svelte')}
 			<Loader2 class="animate-spin" />

package/package/components/DynamicInput.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type DynamicInput } from '../utils';
+interface Props {
+    value?: any;
+    helperScript?: DynamicInput.HelperScript;
+    format: string;
+    otherArgs?: Record<string, any>;
+    name: string;
+}
+declare const DynamicInput: import("svelte").Component<Props, {}, "value">;
+type DynamicInput = ReturnType<typeof DynamicInput>;
+export default DynamicInput;

package/package/components/EditableSchemaForm.svelte

@@ -17,7 +17,7 @@ import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte
 import Label from './Label.svelte';
 import { sendUserToast } from '../toast';
 import Toggle from './Toggle.svelte';
-import { DynamicSelect, emptyString, generateRandomString, readFieldsRecursively } from '../utils';
+import { DynamicInput, emptyString, generateRandomString, readFieldsRecursively } from '../utils';
 import Popover from './meltComponents/Popover.svelte';
 import SchemaFormDnd from './schema/SchemaFormDND.svelte';
 import { deepEqual } from 'fast-equals';
@@ -27,16 +27,16 @@ import Editor from './Editor.svelte';
 import AddPropertyV2 from './schema/AddPropertyV2.svelte';
 // export let openEditTab: () => void = () => {}
 const dispatch = createEventDispatcher();
-let { schema = $bindable(), hiddenArgs = [], args = $bindable(undefined), shouldHideNoInputs = false, noVariablePicker = false, flexWrap = false, uiOnly = false, isFlowInput = false, noPreview = false, jsonEnabled = true, isAppInput = false, displayWebhookWarning = false, onlyMaskPassword = false, editTab, previewSchema = undefined, editPanelInitialSize = undefined, editPanelSize = $bindable(0), diff = {}, disableDnd = false, shouldDispatchChanges = false, isValid = $bindable(true), customUi = undefined, pannelExtraButtonWidth = 0, class: clazz = '', dynSelectCode = $bindable(), dynSelectLang = $bindable(), showDynSelectOpt = false, addPropertyInEditorTab = false, openEditTab, addProperty, runButton, extraTab, schemaFormClassName = undefined, onChange = undefined } = $props();
+let { schema = $bindable(), hiddenArgs = [], args = $bindable(undefined), shouldHideNoInputs = false, noVariablePicker = false, flexWrap = false, uiOnly = false, isFlowInput = false, noPreview = false, jsonEnabled = true, isAppInput = false, displayWebhookWarning = false, onlyMaskPassword = false, editTab, previewSchema = undefined, editPanelInitialSize = undefined, editPanelSize = $bindable(0), diff = {}, disableDnd = false, shouldDispatchChanges = false, isValid = $bindable(true), customUi = undefined, pannelExtraButtonWidth = 0, class: clazz = '', dynCode = $bindable(), dynLang = $bindable(), showDynOpt = false, addPropertyInEditorTab = false, openEditTab, addProperty, runButton, extraTab, schemaFormClassName = undefined, onChange = undefined } = $props();
 $effect.pre(() => {
     if (args == undefined) {
         args = {};
     }
-    if (dynSelectLang === undefined) {
-        dynSelectLang = schema?.['x-windmill-dyn-select-lang'] || 'bun';
+    if (dynLang === undefined) {
+        dynLang = schema?.['x-windmill-dyn-select-lang'] || 'bun';
     }
-    if (dynSelectCode === undefined) {
-        dynSelectCode = schema?.['x-windmill-dyn-select-code'] || '';
+    if (dynCode === undefined) {
+        dynCode = schema?.['x-windmill-dyn-select-code'] || '';
     }
 });
 $effect(() => {
@@ -46,10 +46,10 @@ $effect(() => {
     }
 });
 $effect(() => {
-    if (schema && dynSelectCode !== undefined && dynSelectLang !== undefined) {
-        if (dynSelectCode && dynSelectCode.trim()) {
-            schema['x-windmill-dyn-select-code'] = dynSelectCode.trim();
-            schema['x-windmill-dyn-select-lang'] = dynSelectLang;
+    if (schema && dynCode !== undefined && dynLang !== undefined) {
+        if (dynCode && dynCode.trim()) {
+            schema['x-windmill-dyn-select-code'] = dynCode.trim();
+            schema['x-windmill-dyn-select-lang'] = dynLang;
         }
         else {
             delete schema['x-windmill-dyn-select-code'];
@@ -113,15 +113,19 @@ let opened = $state(untrack(() => keys[0]));
 function computeSelected(property) {
     if (!opened)
         return '';
-    return property.type !== 'object'
-        ? property.type
-        : property.format === 'resource-s3_object'
-            ? 'S3'
-            : property.format?.startsWith('dynselect-')
-                ? 'dynselect'
-                : property.oneOf && property.oneOf.length >= 2
-                    ? 'oneOf'
-                    : 'object';
+    if (property.type !== 'object')
+        return property.type;
+    if (property.format === 'resource-s3_object')
+        return 'S3';
+    if (property.format?.startsWith('dynselect-'))
+        return 'dynselect';
+    if (property.format?.startsWith('dynmultiselect-'))
+        return 'dynmultiselect';
+    if (property.oneOf && property.oneOf.length >= 2)
+        return 'oneOf';
+    if (property.format?.startsWith('resource-'))
+        return 'resource';
+    return 'object';
 }
 export function openField(key) {
     opened = key;
@@ -216,36 +220,35 @@ $effect(() => {
 $effect(() => {
     !!editTab ? openEditTabFn() : closeEditTab();
 });
-let dynSelectFunctions = $derived(Object.entries(schema?.properties ?? {})
+let dynamicFunctions = $derived(Object.entries(schema?.properties ?? {})
     .filter(([_, property]) => {
     const props = property;
-    return (props.type === 'object' &&
-        (props.format?.startsWith('dynselect-') || props.format?.startsWith('dynselect_')));
+    return props.type === 'object' && DynamicInput.isDynInputFormat(props.format);
 })
     .map(([fieldName, _]) => fieldName.replace(/\s+/g, '_')));
-let typeOptions = [
+const DYNAMIC_OPTIONS = [
+    ['DynSelect', 'dynselect'],
+    ['DynMultiselect', 'dynmultiselect']
+];
+let typeOptions = $state([
     ['String', 'string'],
     ['Number', 'number'],
     ['Integer', 'integer'],
     ['Object', 'object'],
+    ['Resource', 'resource'],
     ['OneOf', 'oneOf'],
     ['Array', 'array'],
     ['Boolean', 'boolean'],
-    ['S3 Object', 'S3']
-];
-if (showDynSelectOpt) {
-    typeOptions.push(['DynSelect', 'dynselect']);
-}
-function initDynSelectFn(lang) {
-    const generateFn = DynamicSelect.getGenerateTemplateFn(lang);
-    return Object.entries(schema?.properties ?? {})
-        .map(([functionName]) => generateFn(functionName))
-        .join('');
+    ['S3', 'S3']
+]);
+function initDynFn(lang) {
+    const generateFn = DynamicInput.getGenerateTemplateFn(lang);
+    return dynamicFunctions.map((functionName) => generateFn(functionName)).join('');
 }
-function updateDynSelectCode(functionName, lang = 'bun') {
-    const generateFn = DynamicSelect.getGenerateTemplateFn(lang);
+function updateDynCode(functionName, lang = 'bun') {
+    const generateFn = DynamicInput.getGenerateTemplateFn(lang);
     const code = generateFn(functionName);
-    dynSelectCode = dynSelectCode ? dynSelectCode.concat(code) : code;
+    dynCode = dynCode ? dynCode.concat(code) : code;
 }
 let dndType = $state(generateRandomString());
 </script>
@@ -313,8 +316,8 @@ let dndType = $state(generateRandomString());
 							}}
 							helperScript={{
 								type: 'inline',
-								code: dynSelectCode!,
-								lang: dynSelectLang!
+								code: dynCode!,
+								lang: dynLang!
 							}}
 							prettifyHeader={isAppInput}
 							disabled={!!previewSchema}
@@ -328,55 +331,53 @@ let dndType = $state(generateRandomString());
 
 						{@render runButton?.()}
 
-						{#if dynSelectFunctions.length > 0}
-							<div class="grow">
-								<Section
-									label="Dynamic select functions"
-									collapsable={true}
-									collapsed={false}
-									class="text-sm"
-								>
-									<div class="flex flex-col gap-2 h-full">
-										{#if dynSelectFunctions.length > 0}
-											<div class="bg-blue-50 dark:bg-blue-900/20 p-3 rounded-md">
-												<div class="text-sm font-medium text-blue-800 dark:text-blue-200 mb-2">
-													Expected Functions for Dynamic Select Fields:
-												</div>
-												<ul class="text-xs text-blue-700 dark:text-blue-300 space-y-1">
-													{#each dynSelectFunctions as functionName}
-														<li class="font-mono bg-blue-100 dark:bg-blue-800/30 px-2 py-1 rounded">
-															{functionName}()
-														</li>
-													{/each}
-												</ul>
-											</div>
-										{/if}
-										<ToggleButtonGroup
-											bind:selected={dynSelectLang}
-											on:selected={({ detail }) => {
-												dynSelectCode = initDynSelectFn(detail)
-											}}
-										>
-											{#snippet children({ item })}
-												<ToggleButton value="bun" label="Typescript (Bun)" {item} />
-												<ToggleButton value="python3" label="Python" {item} />
-											{/snippet}
-										</ToggleButtonGroup>
-										{#key dynSelectLang}
-											<div class="border w-full h-full">
-												<Editor
-													bind:this={dynamicSelectEditor}
-													class="flex flex-1 grow h-80 w-full"
-													scriptLang={dynSelectLang}
-													useWebsockets={false}
-													automaticLayout
-													bind:code={dynSelectCode}
-												/>
+						{#if dynamicFunctions.length > 0}
+							<Section
+								label="Dynamic input functions"
+								collapsable={true}
+								collapsed={false}
+								class="text-sm"
+							>
+								<div class="flex flex-col gap-2 h-full">
+									{#if dynamicFunctions.length > 0}
+										<div class="bg-blue-50 dark:bg-blue-900/20 p-3 rounded-md">
+											<div class="text-sm font-medium text-blue-800 dark:text-blue-200 mb-2">
+												Expected Functions for Dynamic Input Fields:
 											</div>
-										{/key}
-									</div>
-								</Section>
-							</div>
+											<ul class="text-xs text-blue-700 dark:text-blue-300 space-y-1">
+												{#each dynamicFunctions as functionName}
+													<li class="font-mono bg-blue-100 dark:bg-blue-800/30 px-2 py-1 rounded">
+														{functionName}()
+													</li>
+												{/each}
+											</ul>
+										</div>
+									{/if}
+									<ToggleButtonGroup
+										bind:selected={dynLang}
+										on:selected={({ detail }) => {
+											dynCode = initDynFn(detail)
+										}}
+									>
+										{#snippet children({ item })}
+											<ToggleButton value="bun" label="Typescript (Bun)" {item} />
+											<ToggleButton value="python3" label="Python" {item} />
+										{/snippet}
+									</ToggleButtonGroup>
+									{#key dynLang}
+										<div class="border w-full h-full">
+											<Editor
+												bind:this={dynamicSelectEditor}
+												class="flex flex-1 grow h-80 w-full"
+												scriptLang={dynLang}
+												useWebsockets={false}
+												automaticLayout
+												bind:code={dynCode}
+											/>
+										</div>
+									{/key}
+								</div>
+							</Section>
 						{/if}
 					</div>
 				</div>
@@ -396,7 +397,12 @@ let dndType = $state(generateRandomString());
 					{#if jsonEnabled && customUi?.jsonOnly != true}
 						<div class="w-full p-3 flex gap-4 justify-end items-center">
 							{#if addPropertyInEditorTab}
-								<AddPropertyV2 bind:schema>
+								<AddPropertyV2
+									bind:schema
+									onAddNew={(propertyName) => {
+										openField(propertyName)
+									}}
+								>
 									{#snippet trigger()}
 										<Button color="light" size="xs" iconOnly startIcon={{ icon: Plus }} />
 									{/snippet}
@@ -413,9 +419,13 @@ let dndType = $state(generateRandomString());
 											'Arguments can be edited either using the wizard, or by editing their JSON Schema.'
 									}}
 									lightMode
-									on:change={() => {
-										schemaString = JSON.stringify(schema, null, '\t')
-										editor?.setCode(schemaString)
+									on:change={(e) => {
+										if (e.detail) {
+											schemaString = JSON.stringify(schema, null, '\t')
+											editor?.setCode(schemaString)
+										} else {
+											schema = JSON.parse(schemaString)
+										}
 									}}
 								/>
 							</div>
@@ -542,9 +552,11 @@ let dndType = $state(generateRandomString());
 																			bind:selected={
 																				() => computeSelected(schema.properties[opened ?? '']),
 																				(v) => {
+																					const isResource = v == 'resource'
 																					const isS3 = v == 'S3'
 																					const isOneOf = v == 'oneOf'
 																					const isDynSelect = v == 'dynselect'
+																					const isDynMultiselect = v == 'dynmultiselect'
 																					const emptyProperty = {
 																						contentEncoding: undefined,
 																						enum_: undefined,
@@ -562,22 +574,29 @@ let dndType = $state(generateRandomString());
 																						nullable: undefined,
 																						required: undefined
 																					}
-
 																					if (isS3) {
 																						schema.properties[argName] = {
 																							...emptyProperty,
 																							type: 'object',
 																							format: 'resource-s3_object'
 																						}
-																					} else if (isDynSelect) {
+																					} else if (isResource) {
+																						schema.properties[argName] = {
+																							...emptyProperty,
+																							type: 'object',
+																							format: 'resource-'
+																						}
+																					} else if (isDynSelect || isDynMultiselect) {
 																						const functionName = argName.replace(/\s+/g, '_')
 																						schema.properties[argName] = {
 																							...emptyProperty,
 																							type: 'object',
-																							format: 'dynselect-' + functionName
+																							format:
+																								(isDynSelect ? 'dynselect-' : 'dynmultiselect-') +
+																								functionName
 																						}
-																						updateDynSelectCode(argName, dynSelectLang)
-																						dynamicSelectEditor?.setCode(dynSelectCode || '')
+																						updateDynCode(argName, dynLang)
+																						dynamicSelectEditor?.setCode(dynCode || '')
 																					} else if (isOneOf) {
 																						schema.properties[argName] = {
 																							...emptyProperty,
@@ -628,6 +647,11 @@ let dndType = $state(generateRandomString());
 																				{#each typeOptions as x}
 																					<ToggleButton value={x[1]} label={x[0]} {item} />
 																				{/each}
+																				{#if showDynOpt}
+																					{#each DYNAMIC_OPTIONS as x}
+																						<ToggleButton value={x[1]} label={x[0]} {item} />
+																					{/each}
+																				{/if}
 																			{/snippet}
 																		</ToggleButtonGroup>
 																	</Label>

package/package/components/EditableSchemaForm.svelte.d.ts

@@ -27,9 +27,9 @@ interface Props {
     customUi?: EditableSchemaFormUi | undefined;
     pannelExtraButtonWidth?: number;
     class?: string;
-    dynSelectCode?: string | undefined;
-    dynSelectLang?: ScriptLang | undefined;
-    showDynSelectOpt?: boolean;
+    dynCode?: string | undefined;
+    dynLang?: ScriptLang | undefined;
+    showDynOpt?: boolean;
     addPropertyInEditorTab?: boolean;
     openEditTab?: import('svelte').Snippet;
     addProperty?: import('svelte').Snippet;
@@ -63,6 +63,6 @@ declare const EditableSchemaForm: $$__sveltets_2_IsomorphicComponent<Props, {
     openField: (key: string) => void;
     deleteField: (key: string) => void;
     updateJson: () => void;
-}, "args" | "schema" | "isValid" | "editPanelSize" | "dynSelectCode" | "dynSelectLang">;
+}, "args" | "schema" | "isValid" | "editPanelSize" | "dynCode" | "dynLang">;
 type EditableSchemaForm = InstanceType<typeof EditableSchemaForm>;
 export default EditableSchemaForm;