windmill-components 1.60.4 → 1.75.0

package/components/FlowPreviewContent.svelte

@@ -4,12 +4,11 @@ import { faClose, faPlay, faRefresh } from '@fortawesome/free-solid-svg-icons';
 import { Button, Kbd } from './common';
 import { createEventDispatcher, getContext } from 'svelte';
 import Icon from 'svelte-awesome';
-import { dfs, flowStore } from './flows/flowStore';
+import { dfs } from './flows/flowStore';
 import { runFlowPreview } from './flows/utils';
 import SchemaForm from './SchemaForm.svelte';
 import FlowStatusViewer from '../components/FlowStatusViewer.svelte';
 import FlowProgressBar from './flows/FlowProgressBar.svelte';
-import { flowStateStore } from './flows/flowState';
 import CapturePayload from './flows/content/CapturePayload.svelte';
 import { Loader2 } from 'lucide-svelte';
 let capturePayload;
@@ -17,10 +16,9 @@ export let previewMode;
 export let open;
 export let jobId = undefined;
 export let job = undefined;
-let isValid = true;
 let isRunning = false;
 let jobProgressReset;
-const { selectedId, previewArgs } = getContext('FlowEditorContext');
+const { selectedId, previewArgs, flowStateStore, flowStore } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 function sliceModules(modules, upTo, idOrders) {
     return modules
@@ -97,7 +95,6 @@ $: if (job?.type === 'CompletedJob') {
 
 		{#if isRunning}
 			<Button
-				disabled={!isValid}
 				color="red"
 				on:click={async () => {
 					isRunning = false
@@ -124,7 +121,6 @@ $: if (job?.type === 'CompletedJob') {
 				color="blue"
 				size="sm"
 				btnClasses="w-full max-w-lg"
-				disabled={!isValid}
 				on:click={() => runPreview($previewArgs)}
 			>
 				Test flow <Kbd class="ml-2">Ctrl+Enter</Kbd>
@@ -141,19 +137,17 @@ $: if (job?.type === 'CompletedJob') {
 	</div>
 	<FlowProgressBar {job} bind:reset={jobProgressReset} />
 
-	<div class="overflow-y-auto grow flex-col flex divide-y divide-gray-600 ">
-		<div class="max-h-1/2 overflow-auto">
+	<div class="overflow-y-auto grow  divide-y divide-gray-600 pr-4">
+		<div class="max-h-1/2 overflow-auto border-b border-gray-700">
 			<SchemaForm
 				noVariablePicker
 				compact
 				class="py-4 max-w-3xl"
 				schema={$flowStore.schema}
-				bind:isValid
 				bind:args={$previewArgs}
 			/>
 		</div>
-
-		<div class="h-full pt-4 grow">
+		<div class="pt-4 grow">
 			{#if jobId}
 				<FlowStatusViewer bind:flowState={$flowStateStore} {jobId} bind:job />
 			{:else}

package/components/FlowStatusViewer.svelte

@@ -11,7 +11,7 @@ import DisplayResult from './DisplayResult.svelte';
 import Tabs from './common/tabs/Tabs.svelte';
 import { FlowGraph } from './graph';
 import ModuleStatus from './ModuleStatus.svelte';
-import { displayDate, isOwner, pluralize, truncateRev } from '../utils';
+import { displayDate, emptyString, isOwner, pluralize, truncateRev } from '../utils';
 import JobArgs from './JobArgs.svelte';
 import Tooltip from './Tooltip.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
@@ -68,7 +68,7 @@ function updateInnerModules() {
         if (mod.type === FlowStatusModule.type.WAITING_FOR_EVENTS &&
             localFlowModuleStates?.[innerModules?.[i - 1]?.id ?? '']?.type ==
                 FlowStatusModule.type.SUCCESS) {
-            localFlowModuleStates[mod.id ?? ''] = { type: mod.type };
+            localFlowModuleStates[mod.id ?? ''] = { type: mod.type, args: job?.args };
         }
         else if (mod.type === FlowStatusModule.type.WAITING_FOR_EXECUTOR &&
             localFlowModuleStates[mod.id ?? '']?.scheduled_for == undefined) {
@@ -80,7 +80,8 @@ function updateInnerModules() {
                     type: mod.type,
                     scheduled_for: 'scheduled for ' + displayDate(job?.['scheduled_for'], true),
                     job_id: job?.id,
-                    parent_module: mod['parent_module']
+                    parent_module: mod['parent_module'],
+                    args: job?.args
                 };
             });
         }
@@ -127,6 +128,14 @@ async function loadOwner(path) {
 }
 let selected = 'graph';
 let payload = '"a test payload in json"';
+function isSuccess(arg) {
+    if (arg == undefined) {
+        return undefined;
+    }
+    else {
+        return arg == true;
+    }
+}
 </script>
 
 {#if job}
@@ -143,7 +152,11 @@ let payload = '"a test payload in json"';
 				<FlowPreviewStatus {job} />
 				{#if `result` in job}
 					<div class="w-full h-full">
-						<FlowJobResult result={job.result} logs={job.logs ?? ''} />
+						<FlowJobResult
+							loading={job['running'] == true}
+							result={job.result}
+							logs={job.logs ?? ''}
+						/>
 					</div>
 				{:else if job.flow_status?.modules?.[job?.flow_status?.step]?.type === FlowStatusModule.type.WAITING_FOR_EVENTS}
 					<div class="w-full h-full mt-2 text-sm text-gray-600">
@@ -189,14 +202,21 @@ let payload = '"a test payload in json"';
 					<div class="flex flex-col gap-1">
 						{#each innerModules as mod, i (mod.id)}
 							{#if mod.type == FlowStatusModule.type.IN_PROGRESS}
+								{@const rawMod = job.raw_flow?.modules[i]}
+
 								<div
 									><span class="inline-flex gap-1"
 										><Badge color="indigo">{mod.id}</Badge>
-										{#if job.raw_flow?.modules[i]?.summary}
-											<span class="font-medium text-gray-900">
-												{job.raw_flow?.modules[i]?.summary ?? ''}
-											</span>
-										{/if}
+										<span class="font-medium text-gray-900">
+											{#if !emptyString(rawMod?.summary)}
+												{rawMod?.summary ?? ''}
+											{:else if rawMod?.value.type == 'script'}
+												{rawMod.value.path ?? ''}
+											{:else if rawMod?.value.type}
+												{rawMod?.value.type}
+											{/if}
+										</span>
+
 										<Loader2 class="animate-spin" /></span
 									></div
 								>
@@ -273,10 +293,12 @@ let payload = '"a test payload in json"';
 											type: FlowStatusModule.type.IN_PROGRESS,
 											logs: e.detail.logs,
 											job_id: e.detail.id,
+											args: e.detail.args,
 											iteration_total: flowJobIds?.flowJobs.length
 										}
 									} else {
 										localFlowModuleStates[flowJobIds.moduleId] = {
+											args: e.detail.args,
 											type: e.detail.success
 												? FlowStatusModule.type.SUCCESS
 												: FlowStatusModule.type.FAILURE,
@@ -341,10 +363,12 @@ let payload = '"a test payload in json"';
 												localFlowModuleStates[mod.id] = {
 													type: FlowStatusModule.type.IN_PROGRESS,
 													logs: e.detail.logs,
+													args: e.detail.args,
 													parent_module: mod['parent_module']
 												}
 											} else {
 												localFlowModuleStates[mod.id] = {
+													args: e.detail.args,
 													type: e.detail.success
 														? FlowStatusModule.type.SUCCESS
 														: FlowStatusModule.type.FAILURE,
@@ -389,14 +413,19 @@ let payload = '"a test payload in json"';
 					</div>
 
 					<FlowGraph
+						success={isSuccess(job?.['success'])}
 						flowModuleStates={localFlowModuleStates}
-						on:click={(e) => {
-							if (e.detail.id) {
+						on:select={(e) => {
+							if (typeof e.detail == 'string') {
+								if (e.detail == 'Input') {
+									selectedNode = 'start'
+								} else if (e.detail == 'Result') {
+									selectedNode = 'end'
+								} else {
+									selectedNode = e.detail
+								}
+							} else {
 								selectedNode = e.detail.id
-							} else if (e.detail == 'Result') {
-								selectedNode = 'end'
-							} else if (e.detail == 'Input') {
-								selectedNode = 'start'
 							}
 						}}
 						modules={job.raw_flow?.modules ?? []}
@@ -407,7 +436,13 @@ let payload = '"a test payload in json"';
 					{#if selectedNode}
 						{@const node = localFlowModuleStates[selectedNode]}
 						{#if selectedNode == 'end'}
-							<FlowJobResult noBorder col result={job['result'] ?? {}} logs={job.logs ?? ''} />
+							<FlowJobResult
+								loading={job['running']}
+								noBorder
+								col
+								result={job['result']}
+								logs={job.logs ?? ''}
+							/>
 						{:else if selectedNode == 'start'}
 							{#if job.args}
 								<div class="p-2">
@@ -434,7 +469,17 @@ let payload = '"a test payload in json"';
 									</div>
 								{/if}
 							</div>
-							<FlowJobResult noBorder col result={node.result ?? {}} logs={node.logs ?? ''} />
+							<div class="px-1 border-b border-black">
+								<JobArgs args={node.args} />
+							</div>
+
+							<FlowJobResult
+								loading={job['running'] == true}
+								noBorder
+								col
+								result={node.result}
+								logs={node.logs ?? ''}
+							/>
 						{:else}
 							<p class="p-2 text-gray-600 italic"
 								>The execution of this node has no information attached to it. The job likely did

package/components/FolderEditor.svelte

@@ -50,7 +50,7 @@ async function loadFolder() {
     can_write =
         $userStore != undefined &&
             (folder?.owners.includes('u/' + $userStore.username) ||
-                ($userStore.is_admin ?? false) ||
+                ($userStore.is_admin ?? false) || ($userStore.is_super_admin ?? false) ||
                 $userStore.pgroups.findIndex((x) => folder?.owners.includes(x)) != -1);
     perms = Array.from(new Set(Object.entries(folder?.extra_perms ?? {})
         .map((x) => x[0])
@@ -146,7 +146,8 @@ let ownerKind = 'user';
 													path: name,
 													kind: 'folder',
 													requestBody: {
-														owner: owner_name
+														owner: owner_name,
+														write: true
 													}
 												})
 											} else if (role == 'writer') {

package/components/GroupEditor.svelte

@@ -219,6 +219,14 @@ function getRole(x) {
 											name,
 											requestBody: { username: member_name }
 										})
+										await GranularAclService.removeGranularAcls({
+											workspace: $workspaceStore ?? '',
+											path: name,
+											kind: 'group_',
+											requestBody: {
+												owner: 'u/' + member_name
+											}
+										})
 										loadGroup()
 									}}>remove</button
 								>

package/components/HighlightCode.svelte

@@ -22,4 +22,10 @@ function getLang(lang) {
 $: lang = getLang(language);
 </script>
 
-<Highlight className="nowrap {$$props.class}" language={lang} {code} />
+{#if code?.length < 5000}
+	<Highlight className="nowrap {$$props.class}" language={lang} {code} />
+{:else}
+	<pre class="overflow-auto max-h-screen {$$props.class}"
+		><code class="language-{language}">{code}</code></pre
+	>
+{/if}

package/components/InlineCodeCopy.svelte

@@ -0,0 +1,11 @@
+<script>import { copyToClipboard } from '../utils';
+import { faClipboard } from '@fortawesome/free-solid-svg-icons';
+import { Icon } from 'svelte-awesome';
+export let content;
+</script>
+
+<pre class="bg-gray-700 text-gray-100 p-2  font-mono text-sm whitespace-pre-wrap"
+	>{content} <span on:click={() => copyToClipboard(content)} class="cursor-pointer ml-2"
+		><Icon data={faClipboard} /></span
+	></pre
+>

package/components/InlineCodeCopy.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        content: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InlineCodeCopyProps = typeof __propDef.props;
+export type InlineCodeCopyEvents = typeof __propDef.events;
+export type InlineCodeCopySlots = typeof __propDef.slots;
+export default class InlineCodeCopy extends SvelteComponentTyped<InlineCodeCopyProps, InlineCodeCopyEvents, InlineCodeCopySlots> {
+}
+export {};

package/components/InputTransformForm.svelte

@@ -40,7 +40,7 @@ function setPropertyType(rawValue) {
         return;
     }
     if (isCodeInjection(rawValue)) {
-        arg.expr = getDefaultExpr(argName, previousModuleId, `\`${rawValue}\``);
+        arg.expr = getDefaultExpr(argName, previousModuleId, `\`${rawValue.toString().replaceAll('`', '\\`')}\``);
         arg.type = 'javascript';
         propertyType = 'static';
     }
@@ -57,17 +57,10 @@ function isStaticTemplate(inputCat) {
     return inputCat === 'string' || inputCat === 'sql' || inputCat == 'yaml';
 }
 function connectProperty(rawValue) {
-    if (isStaticTemplate(inputCat)) {
-        arg.value = `\$\{${rawValue}}`;
-        setPropertyType(arg.value);
-        monacoTemplate?.setCode(arg.value);
-    }
-    else {
-        arg.expr = getDefaultExpr(undefined, previousModuleId, rawValue);
-        arg.type = 'javascript';
-        propertyType = 'javascript';
-        monaco?.setCode(arg.expr);
-    }
+    arg.expr = getDefaultExpr(undefined, previousModuleId, rawValue);
+    arg.type = 'javascript';
+    propertyType = 'javascript';
+    monaco?.setCode(arg.expr);
 }
 function onFocus() {
     if (isStaticTemplate(inputCat)) {
@@ -94,9 +87,12 @@ const { focusProp, propPickerConfig } = getContext('PropPickerWrapper');
 $: isStaticTemplate(inputCat) && propertyType == 'static' && setPropertyType(arg?.value);
 const openBracket = '${';
 const closeBracket = '}';
-$: schema.properties[argName].default &&
-    !arg?.value &&
-    monacoTemplate?.setCode(schema.properties[argName].default);
+function setDefaultCode() {
+    if (!arg?.value) {
+        monacoTemplate?.setCode(schema.properties[argName].default);
+    }
+}
+$: schema.properties[argName].default && setDefaultCode();
 </script>
 
 {#if arg != undefined}
@@ -123,7 +119,7 @@ $: schema.properties[argName].default &&
 			{/if}
 		</div>
 		{#if !noDynamicToggle}
-			<div class="flex flex-row gap-x-4 gap-y-1 flex-wrap">
+			<div class="flex flex-row gap-x-4 gap-y-1 flex-wrap z-10">
 				<ToggleButtonGroup
 					bind:selected={propertyType}
 					on:selected={(e) => {
@@ -134,7 +130,7 @@ $: schema.properties[argName].default &&
 									argName,
 									previousModuleId,
 									staticTemplate
-										? `\`${arg?.value ?? ''}\``
+										? `\`${arg?.value?.toString().replaceAll('`', '\\`') ?? ''}\``
 										: arg.value
 										? JSON.stringify(arg?.value, null, 4)
 										: ''
@@ -149,6 +145,7 @@ $: schema.properties[argName].default &&
 							if (staticTemplate) {
 								if (arg) {
 									arg.value = codeToStaticTemplate(arg.expr)
+									arg.expr = undefined
 								}
 								setPropertyType(arg?.value)
 							} else {
@@ -164,10 +161,10 @@ $: schema.properties[argName].default &&
 				>
 					{#if isStaticTemplate(inputCat)}
 						<ToggleButton light position="left" value="static" size="xs">
-							{'${} '}Template &nbsp; <Tooltip
-								>Write javascript expressions between "{openBracket}" and "{closeBracket}". You may
-								refer to contextual objects like 'flow_input', or 'result' or functions like
-								'resource' and 'variable'
+							{'${} '}&nbsp;
+							<Tooltip
+								>Write text or surround javascript with "{openBracket}" and "{closeBracket}". Use
+								`result` to connect to another node's output.
 							</Tooltip></ToggleButton
 						>
 					{:else}
@@ -180,9 +177,11 @@ $: schema.properties[argName].default &&
 						value="javascript"
 						startIcon={{ icon: faCode }}
 						size="xs"
+						>&nbsp;<Tooltip
+							>Write javascript expressions directly, using 'flow_input' or 'result'. You can use
+							multiline javascript.
+						</Tooltip></ToggleButton
 					>
-						Dynamic (JS)
-					</ToggleButton>
 				</ToggleButtonGroup>
 				<Button
 					variant="contained"
@@ -273,6 +272,4 @@ $: schema.properties[argName].default &&
 			Not recognized input type {argName}
 		{/if}
 	</div>
-{:else}
-	<p class="text-sm text-gray-700">Argument at {argName} is undefined</p>
 {/if}

package/components/InputTransformSchemaForm.svelte

@@ -0,0 +1,103 @@
+<script>import { VariableService } from '../gen';
+import { workspaceStore } from '../stores';
+import { allTrue } from '../utils';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { Button } from './common';
+import InputTransformForm from './InputTransformForm.svelte';
+import ItemPicker from './ItemPicker.svelte';
+import VariableEditor from './VariableEditor.svelte';
+export let schema;
+export let args = {};
+export let isValid = true;
+export let extraLib = 'missing extraLib';
+export let previousModuleId = undefined;
+export let filter = undefined;
+export let noDynamicToggle = false;
+let clazz = '';
+export { clazz as class };
+let inputCheck = {};
+$: isValid = allTrue(inputCheck) ?? false;
+$: if (args == undefined || typeof args !== 'object') {
+    args = {};
+}
+function removeExtraKey() {
+    const nargs = {};
+    Object.keys(args ?? {}).forEach((key) => {
+        if (keys.includes(key)) {
+            nargs[key] = args[key];
+        }
+    });
+    args = nargs;
+}
+let pickForField;
+let itemPicker = undefined;
+let variableEditor = undefined;
+let keys = [];
+$: {
+    let lkeys = Object.keys(schema?.properties ?? {});
+    if (schema?.properties && JSON.stringify(lkeys) != JSON.stringify(keys)) {
+        keys = lkeys;
+        removeExtraKey();
+    }
+}
+</script>
+
+<div class="w-full {clazz}">
+	{#if keys.length > 0}
+		{#each keys as argName, i (argName)}
+			{#if (!filter || filter.includes(argName)) && Object.keys(schema.properties ?? {}).includes(argName)}
+				<div class="z-10">
+					<InputTransformForm
+						{previousModuleId}
+						bind:arg={args[argName]}
+						bind:schema
+						bind:argName
+						bind:inputCheck={inputCheck[argName]}
+						bind:extraLib
+						{variableEditor}
+						{itemPicker}
+						bind:pickForField
+						{noDynamicToggle}
+					/>
+				</div>
+			{/if}
+		{/each}
+	{:else}
+		<div class="text-gray-500 text-sm">No inputs</div>
+	{/if}
+</div>
+
+<ItemPicker
+	bind:this={itemPicker}
+	pickCallback={(path, _) => {
+		if (pickForField) {
+			args[pickForField].value = '$var:' + path
+		}
+	}}
+	itemName="Variable"
+	extraField="path"
+	loadItems={async () =>
+		(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({
+			name: x.path,
+			...x
+		}))}
+>
+	<div
+		slot="submission"
+		class="flex flex-row-reverse w-full bg-white border-t border-gray-200 rounded-bl-lg rounded-br-lg"
+	>
+		<Button
+			variant="border"
+			color="blue"
+			size="sm"
+			startIcon={{ icon: faPlus }}
+			on:click={() => {
+				variableEditor?.initNew?.()
+			}}
+		>
+			New variable
+		</Button>
+	</div>
+</ItemPicker>
+
+<VariableEditor bind:this={variableEditor} />

package/components/InputTransformSchemaForm.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Schema } from '../common';
+declare const __propDef: {
+    props: {
+        schema: Schema;
+        args?: Record<string, any> | undefined;
+        isValid?: boolean | undefined;
+        extraLib?: string | undefined;
+        previousModuleId?: string | undefined;
+        filter?: string[] | undefined;
+        noDynamicToggle?: boolean | undefined;
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputTransformSchemaFormProps = typeof __propDef.props;
+export type InputTransformSchemaFormEvents = typeof __propDef.events;
+export type InputTransformSchemaFormSlots = typeof __propDef.slots;
+export default class InputTransformSchemaForm extends SvelteComponentTyped<InputTransformSchemaFormProps, InputTransformSchemaFormEvents, InputTransformSchemaFormSlots> {
+}
+export {};

package/components/LogViewer.svelte

@@ -3,6 +3,7 @@ import { Drawer, DrawerContent } from './common';
 export let content;
 export let isLoading;
 export let duration = undefined;
+export let mem = undefined;
 let scroll = true;
 let div = null;
 $: if (content != undefined) {
@@ -34,7 +35,7 @@ let logViewer;
 				<button on:click={logViewer.openDrawer}>Expand</button>
 				<div class="py-2 pr-2 text-xs flex gap-2 items-center">
 					Auto scroll
-					<input type="checkbox" bind:checked={scroll} />
+					<input class="windmillapp" type="checkbox" bind:checked={scroll} />
 				</div>
 			</div>
 		</div>
@@ -43,6 +44,11 @@ let logViewer;
 		{:else if duration}
 			<span class="absolute text-xs text-gray-500 top-2 left-2">took {duration}ms</span>
 		{/if}
+		{#if mem}
+			<span class="absolute text-xs text-gray-500 top-2 left-36"
+				>mem peak: {(mem / 1024).toPrecision(4)}MB</span
+			>
+		{/if}
 		<pre class="whitespace-pre-wrap break-words bg-gray-50 text-xs w-full p-2"
 			>{#if content}<span>{content}</span>{:else if !isLoading}<span class="text-gray-600"
 					>No logs are available yet</span

package/components/LogViewer.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         content: string | undefined;
         isLoading: boolean;
         duration?: number | undefined;
+        mem?: number | undefined;
         scrollToBottom?: (() => void) | undefined;
     };
     events: {

package/components/ModulePreview.svelte

@@ -6,17 +6,26 @@ import TestJobLoader from './TestJobLoader.svelte';
 import LogViewer from './LogViewer.svelte';
 import DisplayResult from './DisplayResult.svelte';
 import Button from './common/button/Button.svelte';
-import { flowStateStore } from './flows/flowState';
-import { flowStore } from './flows/flowStore';
 import { workspaceStore } from '../stores';
 import { Loader2 } from 'lucide-svelte';
+import { getContext } from 'svelte';
 export let mod;
 export let schema;
+const { flowStore, flowStateStore, testStepStore } = getContext('FlowEditorContext');
 // Test
 let testJobLoader;
 let testIsLoading = false;
 let testJob = undefined;
-let stepArgs = {};
+let stepArgs = $testStepStore[mod.id] ??
+    Object.entries(mod.value['input_transforms'] ?? {}).reduce((acc, [k, v]) => {
+        let t = v;
+        if (t.type == 'static') {
+            acc[k] = t.value;
+            return acc;
+        }
+        return acc;
+    }, {});
+$: $testStepStore[mod.id] = stepArgs;
 export function runTestWithStepArgs() {
     runTest(stepArgs);
 }
@@ -69,6 +78,7 @@ function jobDone() {
 			detailed={false}
 			topButton
 			bind:args={stepArgs}
+			isFlow={false}
 		/>
 		{#if testIsLoading}
 			<Button on:click={testJobLoader?.cancelJob} btnClasses="w-full mt-4" color="red" size="sm">

package/components/MoveDrawer.svelte

@@ -85,7 +85,7 @@ async function updatePath() {
 		<input
 			type="text"
 			bind:value={summary}
-			placeholder="A short summary displayed when it is listed"
+			placeholder="Short summary to be displayed when listed"
 			disabled={!own}
 		/>
 

package/components/Multiselect.svelte

@@ -167,7 +167,7 @@
 	{#if showOptions}
 		<ul
 			class="options"
-			transition:fly={{ duration: 200, y: 5 }}
+			transition:fly|local={{ duration: 200, y: 5 }}
 			on:mousedown|preventDefault={handleOptionMousedown}
 		>
 			{#each filtered as option}

package/components/Multiselect.svelte.d.ts

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

package/components/ObjectResourceInput.svelte

@@ -24,7 +24,12 @@ async function loadSchema(format) {
     }
 }
 function resourceToValue() {
-    value = `$res:${path}`;
+    if (path) {
+        value = `$res:${path}`;
+    }
+    else {
+        value = undefined;
+    }
 }
 function isResource() {
     return isString(value) && value.length >= '$res:'.length;