windmill-components 1.493.10 → 1.501.4

package/package/components/ArgInput.svelte

@@ -1,7 +1,8 @@
-<script lang="ts">import { setInputCat as computeInputCat, debounce, emptyString, getSchemaFromProperties } from '../utils';
+<script lang="ts">import { preventDefault, stopPropagation, createBubbler } from 'svelte/legacy';
+const bubble = createBubbler();
+import { setInputCat as computeInputCat, debounce, emptyString, getSchemaFromProperties } from '../utils';
 import { DollarSign, Pipette, Plus, X, Check, Loader2 } from 'lucide-svelte';
-import { createEventDispatcher, onMount, tick } from 'svelte';
-import Multiselect from 'svelte-multiselect';
+import { createEventDispatcher, onDestroy, onMount, tick, untrack } from 'svelte';
 import { fade } from 'svelte/transition';
 import { Button, SecondsInput } from './common';
 import FieldHeader from './FieldHeader.svelte';
@@ -25,69 +26,26 @@ import SchemaFormDnd from './schema/SchemaFormDND.svelte';
 import SchemaForm from './SchemaForm.svelte';
 import { deepEqual } from 'fast-equals';
 import DynSelect from './DynSelect.svelte';
-import { createDispatcherIfMounted } from '../createDispatcherIfMounted';
-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 oneOf = undefined;
-export let required = false;
-export let pattern = undefined;
-export let valid = true;
-export let enum_ = undefined;
-export let disabled = false;
-export let itemsType = undefined;
-export let displayHeader = true;
-export let properties = undefined;
-export let nestedRequired = undefined;
-export let autofocus = null;
-export let compact = false;
-export let password = false;
-export let pickForField = undefined;
-export let variableEditor = undefined;
-export let itemPicker = undefined;
-export let noMargin = false;
-export let extra = {};
-export let minW = true;
-export let prettifyHeader = false;
-export let resourceTypes;
-export let disablePortal = false;
-export let showSchemaExplorer = false;
-export let simpleTooltip = undefined;
-export let customErrorMessage = undefined;
-export let onlyMaskPassword = false;
-export let nullable = false;
-export let title = undefined;
-export let placeholder = undefined;
-export let order = undefined;
-export let editor = undefined;
-export let orderEditable = false;
-export let shouldDispatchChanges = false;
-export let noDefaultOnSelectFirst = false;
-export let helperScript = undefined;
-export let otherArgs = {};
-export let lightHeader = false;
-export let diffStatus = undefined;
-export let hideNested = false;
-export let nestedParent = undefined;
-export let nestedClasses = '';
-export let displayType = true;
-export let css = undefined;
-export let appPath = undefined;
-export let computeS3ForceViewerPolicies = undefined;
-export let workspace = undefined;
-$: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
-let oneOfSelected = undefined;
+import MultiSelect from './select/MultiSelect.svelte';
+import { safeSelectItems } from './select/utils.svelte';
+let { label = '', value = $bindable(), defaultValue = $bindable(undefined), description = $bindable(undefined), format = $bindable(undefined), contentEncoding = undefined, type = undefined, oneOf = $bindable(undefined), required = false, pattern = $bindable(undefined), valid = $bindable(undefined), enum_ = $bindable(undefined), disabled = false, itemsType = $bindable(undefined), displayHeader = true, properties = $bindable(undefined), nestedRequired = undefined, autofocus = null, compact = false, password = false, pickForField = $bindable(undefined), variableEditor = undefined, itemPicker = undefined, noMargin = false, extra = {}, minW = true, prettifyHeader = false, resourceTypes, disablePortal = false, showSchemaExplorer = false, simpleTooltip = undefined, customErrorMessage = undefined, onlyMaskPassword = false, nullable = false, title = $bindable(undefined), placeholder = $bindable(undefined), order = $bindable(undefined), editor = $bindable(undefined), orderEditable = false, shouldDispatchChanges = false, noDefaultOnSelectFirst = false, helperScript = undefined, otherArgs = {}, lightHeader = false, diffStatus = undefined, hideNested = false, nestedParent = undefined, nestedClasses = '', displayType = true, css = undefined, appPath = undefined, computeS3ForceViewerPolicies = undefined, workspace = undefined, actions } = $props();
+$effect(() => {
+    if (description == undefined) {
+        description = '';
+    }
+    if (format == undefined) {
+        format = '';
+    }
+    if (valid == undefined) {
+        valid = true;
+    }
+});
+let oneOfSelected = $state(undefined);
+let tagKey = $derived(oneOf?.find((o) => Object.keys(o.properties ?? {})?.includes('kind')) ? 'kind' : 'label');
 async function updateOneOfSelected(oneOf) {
     if (oneOf &&
         oneOf.length >= 2 &&
         (!oneOfSelected || !oneOf.some((o) => o.title === oneOfSelected) || !value)) {
-        const tagKey = oneOf.find((o) => Object.keys(o.properties ?? {}).includes('kind'))
-            ? 'kind'
-            : 'label';
         if (value && value[tagKey] && oneOf.some((o) => o.title === value[tagKey])) {
             const existingValue = JSON.parse(JSON.stringify(value));
             oneOfSelected = value[tagKey];
@@ -101,8 +59,6 @@ async function updateOneOfSelected(oneOf) {
         }
     }
 }
-$: updateOneOfSelected(oneOf);
-$: oneOf && value && onOneOfChange();
 function onOneOfChange() {
     const label = value?.['label'];
     const kind = value?.['kind'];
@@ -114,45 +70,48 @@ function onOneOfChange() {
     }
 }
 const dispatch = createEventDispatcher();
-const dispatchIfMounted = createDispatcherIfMounted(dispatch);
-let ignoreValueUndefined = false;
-let error = '';
-let s3FilePicker;
-let s3FileUploadRawMode;
-let isListJson = false;
-let hasIsListJsonChanged = false;
-let el = undefined;
-let rawValue = undefined;
-function computeDefaultValue(nvalue, inputCat, defaultValue, nnullable) {
+let ignoreValueUndefined = $state(false);
+let error = $state('');
+let s3FilePicker = $state();
+let s3FileUploadRawMode = $state(false);
+let isListJson = $state(false);
+let hasIsListJsonChanged = $state(false);
+let el = $state(undefined);
+let rawValue = $state(undefined);
+let lastValue = null;
+function computeDefaultValue(inputCat, defaultValue, nnullable) {
+    let nvalue = null;
     if (label == 'toString' && typeof value == 'function') {
-        value = undefined;
+        nvalue = undefined;
     }
     if ((value == undefined || value == null) && !ignoreValueUndefined) {
-        value = structuredClone(defaultValue);
+        nvalue = structuredClone($state.snapshot(defaultValue));
         if (defaultValue === undefined || defaultValue === null) {
             if (inputCat === 'string') {
-                value = nullable ? null : '';
+                nvalue = nullable ? null : '';
             }
             else if (inputCat == 'enum' && required) {
-                value = enum_?.[0];
+                nvalue = enum_?.[0];
             }
             else if (inputCat == 'boolean') {
-                value = false;
+                nvalue = false;
             }
             else if (inputCat == 'list') {
-                value = [];
+                nvalue = [];
             }
         }
         else if (inputCat === 'object') {
             evalValueToRaw();
         }
     }
-    if (nnullable && type === 'string' && value === '') {
+    if (nnullable && type === 'string' && value === '' && nvalue == null) {
         value = null;
     }
+    else if (nvalue != null && !deepEqual(nvalue, value)) {
+        value = nvalue;
+        lastValue = value;
+    }
 }
-$: computeDefaultValue(value, inputCat, defaultValue, nullable);
-let lastValue = undefined;
 // By setting isListJson to true, we can render inputs even if the value is not an array of the correct type
 // This avoids the issue of the input being rendered as a string with value: [object Object], or as a number with value: NaN
 function checkArrayValueType() {
@@ -179,21 +138,14 @@ function checkArrayValueType() {
     }
     lastValue = value;
 }
-$: !isListJson &&
-    inputCat === 'list' &&
-    value != lastValue &&
-    itemsType?.type &&
-    !hasIsListJsonChanged &&
-    checkArrayValueType();
-$: defaultValue != undefined && handleDefaultValueChange();
-let oldDefaultValue = structuredClone(defaultValue);
+let oldDefaultValue = structuredClone($state.snapshot(defaultValue));
 function handleDefaultValueChange() {
     if (deepEqual(value, oldDefaultValue) &&
         !deepEqual(value, defaultValue) &&
         !deepEqual(defaultValue, oldDefaultValue)) {
         value = defaultValue;
     }
-    oldDefaultValue = structuredClone(defaultValue);
+    oldDefaultValue = structuredClone($state.snapshot(defaultValue));
 }
 function isObjectCat(inputCat) {
     return (inputCat === 'object' || inputCat === 'resource-object' || (inputCat == 'list' && !isListJson));
@@ -220,11 +172,6 @@ function evalValueToRaw() {
     }
 }
 let setCodeDisabled = false;
-$: (inputCat &&
-    (isObjectCat(inputCat) || isRawStringEditor(inputCat)) &&
-    !oneOf &&
-    evalValueToRaw()) ||
-    value;
 let timeout = undefined;
 function setNewValueFromCode(nvalue) {
     if (!deepEqual(nvalue, value)) {
@@ -237,7 +184,6 @@ function setNewValueFromCode(nvalue) {
     }
 }
 onMount(() => {
-    computeDefaultValue();
     evalValueToRaw();
 });
 function fileChanged(e, cb) {
@@ -323,18 +269,61 @@ function onKeyDown(e) {
     }
     e.stopPropagation();
 }
-let redraw = 0;
-let itemsLimit = 50;
-$: validateInput(pattern, value, required);
+let redraw = $state(0);
+let itemsLimit = $state(50);
 let oldValue = value;
 function compareValues(value) {
     if (!deepEqual(oldValue, value)) {
         oldValue = value;
-        dispatchIfMounted('change');
+        dispatch('change');
     }
 }
-let debounced = debounce(() => compareValues(value), 50);
-$: shouldDispatchChanges && debounced(value);
+let { debounced, clearDebounce } = debounce(() => compareValues(value), 50);
+let inputCat = $derived(computeInputCat(type, format, itemsType?.type, enum_, contentEncoding));
+$effect(() => {
+    oneOf && untrack(() => updateOneOfSelected(oneOf));
+});
+$effect(() => {
+    oneOf && value && untrack(() => onOneOfChange());
+});
+$effect.pre(() => {
+    value;
+    let args = [inputCat, defaultValue, nullable];
+    untrack(() => {
+        if (deepEqual(value, lastValue))
+            return;
+        computeDefaultValue(...args);
+    });
+});
+$effect.pre(() => {
+    !isListJson &&
+        inputCat === 'list' &&
+        value != lastValue &&
+        itemsType?.type &&
+        !hasIsListJsonChanged &&
+        untrack(() => checkArrayValueType());
+});
+$effect.pre(() => {
+    defaultValue != undefined && untrack(() => handleDefaultValueChange());
+});
+$effect.pre(() => {
+    ;
+    (inputCat &&
+        (isObjectCat(inputCat) || isRawStringEditor(inputCat)) &&
+        !oneOf &&
+        untrack(() => evalValueToRaw())) ||
+        value;
+});
+$effect(() => {
+    let args = [pattern, value, required];
+    untrack(() => validateInput(...args));
+});
+$effect(() => {
+    shouldDispatchChanges && debounced(value);
+});
+onDestroy(() => {
+    clearDebounce();
+});
 </script>
 
 <S3FilePicker
@@ -347,7 +336,7 @@ $: shouldDispatchChanges && debounced(value);
 	readOnlyMode={false}
 />
 
-<!-- svelte-ignore a11y-autofocus -->
+<!-- svelte-ignore a11y_autofocus -->
 <div
 	class={twMerge(
 		'flex flex-col w-full rounded-md relative',
@@ -371,17 +360,21 @@ $: shouldDispatchChanges && debounced(value);
 		>
 			<button
 				class="p-1 bg-green-500 text-white hover:bg-green-600"
-				on:click|preventDefault|stopPropagation={() => {
-					dispatch('acceptChange', { label, nestedParent })
-				}}
+				onclick={stopPropagation(
+					preventDefault(() => {
+						dispatch('acceptChange', { label, nestedParent })
+					})
+				)}
 			>
 				<Check size={14} />
 			</button>
 			<button
 				class="p-1 hover:bg-red-500 hover:text-white"
-				on:click|preventDefault|stopPropagation={() => {
-					dispatch('rejectChange', { label, nestedParent })
-				}}
+				onclick={stopPropagation(
+					preventDefault(() => {
+						dispatch('rejectChange', { label, nestedParent })
+					})
+				)}
 			>
 				<X size={14} />
 			</button>
@@ -432,11 +425,11 @@ $: shouldDispatchChanges && debounced(value);
 				<div class="relative w-full">
 					<input
 						{autofocus}
-						on:focus
-						on:blur
+						onfocus={bubble('focus')}
+						onblur={bubble('blur')}
 						{disabled}
 						type="number"
-						on:keydown={() => {
+						onkeydown={() => {
 							ignoreValueUndefined = true
 						}}
 						class={valid
@@ -470,37 +463,46 @@ $: shouldDispatchChanges && debounced(value);
 				<div class="w-full">
 					{#if Array.isArray(itemsType?.multiselect) && Array.isArray(value)}
 						<div class="items-start">
-							<Multiselect
-								ulOptionsClass={'p-2 !bg-surface-secondary'}
-								outerDivClass={'dark:!border-gray-500 !border-gray-300'}
+							<MultiSelect
 								{disabled}
-								bind:selected={value}
-								options={itemsType?.multiselect ?? []}
-								selectedOptionsDraggable={true}
-								onopen={() => {
-									dispatch('focus')
-								}}
+								bind:value
+								items={safeSelectItems(itemsType?.multiselect)}
+								onOpen={() => dispatch('focus')}
+								reorderable
 							/>
 						</div>
-					{:else if itemsType?.enum != undefined && Array.isArray(itemsType?.enum) && Array.isArray(value)}
+					{:else if itemsType?.enum != undefined && Array.isArray(itemsType?.enum) && (Array.isArray(value) || value == undefined)}
 						<div class="items-start">
-							<Multiselect
-								ulOptionsClass={'p-2 !bg-surface-secondary'}
-								outerDivClass={'dark:!border-gray-500 !border-gray-300'}
+							<MultiSelect
 								{disabled}
-								bind:selected={
-									() => [...value],
-									(v) => {
-										if (!deepEqual(v, value)) {
-											value = v
+								bind:value
+								items={safeSelectItems(itemsType?.enum)}
+								onOpen={() => dispatch('focus')}
+								reorderable
+							/>
+						</div>
+					{:else if itemsType?.type == 'object' && itemsType?.resourceType == 's3object'}
+						<div class="w-full">
+							<FileUpload
+								{appPath}
+								computeForceViewerPolicies={computeS3ForceViewerPolicies}
+								{workspace}
+								allowMultiple={true}
+								randomFileKey={true}
+								on:addition={(evt) => {
+									value = [
+										...value,
+										{
+											s3: evt.detail?.path ?? '',
+											filename: evt.detail?.filename ?? ''
 										}
-									}
-								}
-								options={itemsType?.enum ?? []}
-								selectedOptionsDraggable={true}
-								onopen={() => {
-									dispatch('focus')
+									]
 								}}
+								on:deletion={(evt) => {
+									value = value.filter((v) => v.s3 !== evt.detail?.path)
+								}}
+								defaultValue={defaultValue?.map((v) => v.s3)}
+								initialValue={value}
 							/>
 						</div>
 					{:else}
@@ -516,7 +518,7 @@ $: shouldDispatchChanges && debounced(value);
 													<input
 														type="file"
 														class="my-6"
-														on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
+														onchange={(x) => fileChanged(x, (val) => (value[i] = val))}
 														multiple={false}
 													/>
 												{:else if itemsType?.type == 'object' && itemsType?.resourceType === undefined && itemsType?.properties === undefined}
@@ -530,7 +532,6 @@ $: shouldDispatchChanges && debounced(value);
 													{/await}
 												{:else if Array.isArray(itemsType?.enum)}
 													<ArgEnum
-														required
 														create={extra['disableCreate'] != true}
 														on:focus={() => {
 															dispatch('focus')
@@ -539,7 +540,7 @@ $: shouldDispatchChanges && debounced(value);
 															dispatch('blur')
 														}}
 														{defaultValue}
-														{valid}
+														valid={valid ?? true}
 														{disabled}
 														{autofocus}
 														bind:value={value[i]}
@@ -548,8 +549,7 @@ $: shouldDispatchChanges && debounced(value);
 													/>
 												{:else if itemsType?.type == 'resource' && itemsType?.resourceType && resourceTypes?.includes(itemsType.resourceType)}
 													<ObjectResourceInput
-														value={v ? `$res:${v}` : undefined}
-														bind:path={value[i]}
+														bind:value={value[i]}
 														format={'resource-' + itemsType?.resourceType}
 														defaultValue={undefined}
 													/>
@@ -586,7 +586,7 @@ $: shouldDispatchChanges && debounced(value);
 													transition:fade|local={{ duration: 100 }}
 													class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover ml-2"
 													aria-label="Clear"
-													on:click={() => {
+													onclick={() => {
 														value = value.filter((_, index) => index !== i)
 														redraw += 1
 													}}
@@ -597,7 +597,7 @@ $: shouldDispatchChanges && debounced(value);
 										{/if}
 									{/each}
 									{#if value.length > itemsLimit}
-										<button on:click={() => (itemsLimit += 50)} class="text-xs py-2 text-blue-600"
+										<button onclick={() => (itemsLimit += 50)} class="text-xs py-2 text-blue-600"
 											>{itemsLimit}/{value.length}: Load 50 more...</button
 										>
 									{/if}
@@ -660,24 +660,25 @@ $: shouldDispatchChanges && debounced(value);
 				args={otherArgs}
 				{helperScript}
 				bind:value
-				entrypoint={format.substring('dynselect_'.length)}
+				entrypoint={format?.substring('dynselect_'.length) ?? ''}
 			/>
 		{:else if inputCat == 'resource-object' && resourceTypes == undefined}
 			<span class="text-2xs text-tertiary">Loading resource types...</span>
-		{:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format.split('-').length > 1 && resourceTypes.includes(format.substring('resource-'.length))))}
+		{:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format && format?.split('-').length > 1 && resourceTypes.includes(format?.substring('resource-'.length))))}
+			<!-- {JSON.stringify(value)} -->
 			<ObjectResourceInput
 				{defaultValue}
 				selectFirst={!noDefaultOnSelectFirst}
 				{disablePortal}
-				{format}
+				format={format ?? ''}
 				bind:value
 				bind:editor
-				on:clear={() => {
+				onClear={() => {
 					defaultValue = null
 				}}
 				{showSchemaExplorer}
 			/>
-		{:else if inputCat == 'resource-object' && format.split('-').length > 1 && format
+		{:else if inputCat == 'resource-object' && format && format.split('-').length > 1 && format
 				.replace('resource-', '')
 				.replace('_', '')
 				.toLowerCase() == 's3object'}
@@ -761,11 +762,12 @@ $: shouldDispatchChanges && debounced(value);
 									: 'label'
 								value = { ...toKeep, [tagKey]: detail }
 							}}
-							let:item
 						>
-							{#each oneOf as obj}
-								<ToggleButton value={obj.title ?? ''} label={obj.title} {item} />
-							{/each}
+							{#snippet children({ item })}
+								{#each oneOf as obj}
+									<ToggleButton value={obj.title ?? ''} label={obj.title} {item} />
+								{/each}
+							{/snippet}
 						</ToggleButtonGroup>
 						{#if oneOfSelected}
 							{@const objIdx = oneOf.findIndex((o) => o.title === oneOfSelected)}
@@ -779,13 +781,18 @@ $: shouldDispatchChanges && debounced(value);
 												{onlyMaskPassword}
 												{disablePortal}
 												{disabled}
-												schema={{
-													properties: obj.properties,
-													order: obj.order,
-													$schema: '',
-													required: obj.required ?? [],
-													type: 'object'
-												}}
+												bind:schema={
+													() => ({
+														properties: obj.properties ?? {},
+														order: obj.order,
+														$schema: '',
+														required: obj.required ?? [],
+														type: 'object'
+													}),
+													() => {
+														dispatch('nestedChange')
+													}
+												}
 												bind:args={value}
 												dndType={`nested-${title}`}
 												hiddenArgs={['label', 'kind']}
@@ -795,9 +802,6 @@ $: shouldDispatchChanges && debounced(value);
 														oneOf[objIdx].order = keys
 													}
 												}}
-												on:change={() => {
-													dispatch('nestedChange')
-												}}
 												on:nestedChange
 												{shouldDispatchChanges}
 											/>
@@ -815,7 +819,12 @@ $: shouldDispatchChanges && debounced(value);
 													required: obj.required ?? [],
 													type: 'object'
 												}}
-												bind:args={value}
+												bind:args={
+													() => value,
+													(v) => {
+														value = { ...v, [tagKey]: oneOfSelected }
+													}
+												}
 												{shouldDispatchChanges}
 												on:change={() => {
 													dispatch('nestedChange')
@@ -877,22 +886,24 @@ $: shouldDispatchChanges && debounced(value);
 							{onlyMaskPassword}
 							{disablePortal}
 							{disabled}
-							schema={{
-								properties,
-								$schema: '',
-								required: nestedRequired ?? [],
-								type: 'object',
-								order
-							}}
+							bind:schema={
+								() => ({
+									properties,
+									$schema: '',
+									required: nestedRequired ?? [],
+									type: 'object',
+									order
+								}),
+								(newSchema) => {
+									dispatch('nestedChange')
+								}
+							}
 							bind:args={value}
 							dndType={`nested-${title}`}
 							on:reorder={(e) => {
 								const keys = e.detail
 								order = keys
 							}}
-							on:change={() => {
-								dispatch('nestedChange')
-							}}
 							diff={diffStatus && typeof diffStatus.diff === 'object' ? diffStatus.diff : {}}
 							on:acceptChange={(e) => {
 								dispatch('acceptChange', e.detail)
@@ -971,10 +982,9 @@ $: shouldDispatchChanges && debounced(value);
 		{:else if inputCat == 'enum'}
 			<div class="flex flex-row w-full gap-1">
 				<ArgEnum
-					{required}
 					create={extra['disableCreate'] != true}
 					{defaultValue}
-					{valid}
+					valid={valid ?? true}
 					{disabled}
 					bind:value
 					{enum_}
@@ -1025,7 +1035,7 @@ $: shouldDispatchChanges && debounced(value);
 				<input
 					{autofocus}
 					type="file"
-					on:change={(x) => fileChanged(x, (val) => (value = val))}
+					onchange={(x) => fileChanged(x, (val) => (value = val))}
 					multiple={false}
 				/>
 				{#if value?.length}
@@ -1050,8 +1060,8 @@ $: shouldDispatchChanges && debounced(value);
 		{:else if inputCat == 'email'}
 			<input
 				{autofocus}
-				on:focus
-				on:blur
+				onfocus={bubble('focus')}
+				onblur={bubble('blur')}
 				{disabled}
 				type="email"
 				class={valid
@@ -1083,14 +1093,14 @@ $: shouldDispatchChanges && debounced(value);
 								{autofocus}
 								rows={extra?.['minRows'] ? extra['minRows']?.toString() : '1'}
 								bind:this={el}
-								on:focus={(e) => {
+								onfocus={(e) => {
 									dispatch('focus')
 								}}
-								on:blur={(e) => {
+								onblur={(e) => {
 									dispatch('blur')
 								}}
 								use:autosize
-								on:keydown={onKeyDown}
+								onkeydown={onKeyDown}
 								{disabled}
 								class={twMerge(
 									'w-full',
@@ -1103,10 +1113,10 @@ $: shouldDispatchChanges && debounced(value);
 							></textarea>
 						{/key}
 						{#if !disabled && itemPicker && extra?.['disableVariablePicker'] != true}
-							<!-- svelte-ignore a11y-click-events-have-key-events -->
+							<!-- svelte-ignore a11y_click_events_have_key_events -->
 							<button
 								class="absolute right-1 top-1 py-1 min-w-min !px-2 items-center text-gray-800 bg-surface-secondary border rounded center-center hover:bg-gray-300 transition-all cursor-pointer"
-								on:click={() => {
+								onclick={() => {
 									pickForField = label
 									itemPicker?.openDrawer?.()
 								}}
@@ -1122,7 +1132,7 @@ $: shouldDispatchChanges && debounced(value);
 						{#if value && typeof value == 'string' && value?.startsWith('$var:')}
 							Linked to variable <button
 								class="text-blue-500 underline"
-								on:click={() => variableEditor?.editVariable?.(value.slice(5))}
+								onclick={() => variableEditor?.editVariable?.(value.slice(5))}
 								>{value.slice(5)}</button
 							>
 						{/if}
@@ -1130,7 +1140,7 @@ $: shouldDispatchChanges && debounced(value);
 				{/if}
 			</div>
 		{/if}
-		<slot name="actions" />
+		{@render actions?.()}
 	</div>
 
 	{#if !compact || (error && error != '')}