windmill-components 1.122.0 → 1.138.2

package/package/components/apps/components/helpers/RunnableComponent.svelte

@@ -34,6 +34,7 @@ export let errorHandledByComponent = false;
 export let hideRefreshButton = false;
 const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend, errorByComponent, mode, stateId, state, componentControl, initialized, selectedComponent, app, connectingInput } = getContext('AppViewerContext');
 const iterContext = getContext('ListWrapperContext');
+const rowContext = getContext('RowWrapperContext');
 const dispatch = createEventDispatcher();
 let donePromise = undefined;
 $runnableComponents = $runnableComponents;
@@ -120,9 +121,15 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
     if (runnable?.type === 'runnableByName' && runnable.inlineScript?.language === 'frontend') {
         loading = true;
         try {
-            const r = await eval_like(runnable.inlineScript?.content, computeGlobalContext($worldStore, iterContext ? { iter: $iterContext } : {}), false, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
+            const r = await eval_like(runnable.inlineScript?.content, computeGlobalContext($worldStore, {
+                iter: iterContext ? $iterContext : undefined,
+                row: rowContext ? $rowContext : undefined
+            }), false, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
             await setResult(r, undefined);
             $state = $state;
+            const job = generateNextFrontendJobId();
+            const njobs = [{ job, component: id, result: r }, ...$jobs];
+            $jobs = $jobs?.length > 100 ? njobs.slice(0, 100) : njobs;
         }
         catch (e) {
             sendUserToast(`Error running frontend script ${id}: ` + e.message, true);
@@ -154,10 +161,10 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
         return;
     }
     try {
-        let njob = await resultJobLoader?.abstractRun(() => {
+        let njob = await resultJobLoader?.abstractRun(async () => {
             const nonStaticRunnableInputs = {};
             const staticRunnableInputs = {};
-            Object.keys(fields ?? {}).forEach((k) => {
+            for (const k of Object.keys(fields ?? {})) {
                 let field = fields[k];
                 if (field?.type == 'static' && fields[k]) {
                     staticRunnableInputs[k] = field.value;
@@ -165,10 +172,13 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
                 else if (field?.type == 'user') {
                     nonStaticRunnableInputs[k] = args?.[k];
                 }
+                else if (field?.type == 'eval' && inputValues[k]) {
+                    nonStaticRunnableInputs[k] = await inputValues[k]?.computeExpr();
+                }
                 else {
                     nonStaticRunnableInputs[k] = runnableInputValues[k];
                 }
-            });
+            }
             const requestBody = {
                 args: nonStaticRunnableInputs,
                 component: id,
@@ -197,7 +207,8 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
             });
         });
         if (njob) {
-            $jobs = [{ job: njob, component: id }, ...$jobs];
+            const njobs = [{ job: njob, component: id }, ...$jobs];
+            $jobs = $jobs?.length > 100 ? njobs.slice(0, 100) : njobs;
         }
     }
     catch (e) {
@@ -224,13 +235,21 @@ function recordError(error, jobId) {
         componentId: id
     };
 }
+async function setJobId(jobId) {
+    outputs.jobId?.set(jobId);
+}
 async function setResult(res, jobId) {
     dispatch('done');
     const hasRes = res !== undefined && res !== null;
     if (transformer) {
         try {
-            $worldStore.newOutput(id, 'raw', res);
-            res = await eval_like(transformer.content, computeGlobalContext($worldStore, { result: res }), false, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
+            let raw = $worldStore.newOutput(id, 'raw', res);
+            res = await eval_like(transformer.content, computeGlobalContext($worldStore, {
+                iter: iterContext ? $iterContext : undefined,
+                row: rowContext ? $rowContext : undefined,
+                result: res
+            }), false, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
+            raw.set(res);
         }
         catch (err) {
             res = {
@@ -254,15 +273,23 @@ async function setResult(res, jobId) {
     // console.log('setr', id)
     outputs.result?.set(res);
     result = res;
-    if (res?.error) {
-        jobId && recordError(res.error, jobId);
-        dispatch('handleError', res.error.message);
+    // Flows with loops can have multiple results
+    const errorAsArray = Array.isArray(result) ? result.flat() : [result];
+    // As soon as we have an error, we consider the component errored
+    const hasErrors = errorAsArray.some((r) => r?.error);
+    if (hasErrors) {
+        const errorMessages = errorAsArray
+            .map((r) => r?.error?.message)
+            .filter(Boolean)
+            .join('\n');
+        jobId && recordError(errorMessages, jobId);
+        dispatch('handleError', errorMessages);
     }
     else {
         dispatch('success');
     }
     const previousJobId = Object.keys($errorByComponent).find((key) => $errorByComponent[key].componentId === id);
-    if (previousJobId && !result?.error) {
+    if (previousJobId && !hasErrors) {
         delete $errorByComponent[previousJobId];
         $errorByComponent = $errorByComponent;
     }
@@ -274,6 +301,7 @@ function handleInputClick(e) {
 }
 let cancellableRun = undefined;
 onMount(() => {
+    console.log('create', id);
     cancellableRun = (inlineScript) => {
         let rejectCb;
         let p = new Promise((resolve, reject) => {
@@ -300,19 +328,23 @@ onMount(() => {
 onDestroy(() => {
     $initialized.initializedComponents = $initialized.initializedComponents.filter((c) => c !== id);
     $errorByComponent = clearErrorByComponentId(id, $errorByComponent);
-    $runnableComponents[id] = {
-        ...$runnableComponents[id],
-        cb: $runnableComponents[id].cb.filter((cb) => cb !== cancellableRun)
-    };
-    $runnableComponents = $runnableComponents;
+    if ($runnableComponents[id]) {
+        $runnableComponents[id] = {
+            ...$runnableComponents[id],
+            cb: $runnableComponents[id].cb.filter((cb) => cb !== cancellableRun)
+        };
+        $runnableComponents = $runnableComponents;
+    }
 });
 let lastJobId = undefined;
+let inputValues = {};
 </script>
 
 {#each Object.entries(fields ?? {}) as [key, v] (key)}
 	{#if v.type != 'static' && v.type != 'user'}
 		<InputValue
-			key={key + extraKey}
+			bind:this={inputValues[key]}
+			key={key + extraKey + (iterContext ? $iterContext?.index : '')}
 			{id}
 			input={fields[key]}
 			bind:value={runnableInputValues[key]}
@@ -322,7 +354,7 @@ let lastJobId = undefined;
 
 {#if runnable?.type == 'runnableByName' && runnable.inlineScript?.language == 'frontend'}
 	{#each runnable.inlineScript.refreshOn ?? [] as { id: tid, key } (`${tid}-${key}`)}
-		{@const fkey = `${tid}-${key}${extraKey}`}
+		{@const fkey = `${tid}-${key}${extraKey}${iterContext ? $iterContext?.index : ''}}`}
 		<InputValue
 			{id}
 			key={fkey}
@@ -335,6 +367,7 @@ let lastJobId = undefined;
 <ResultJobLoader
 	on:started={(e) => {
 		loading = true
+		setJobId(e.detail)
 		dispatch('started', e.detail)
 	}}
 	workspaceOverride={workspace}
@@ -374,14 +407,17 @@ let lastJobId = undefined;
 					'bg-red-100/80'
 				)}
 			>
-				<Popover notClickable placement="bottom" popupClass="!bg-white border w-96">
+				<Popover notClickable placement="bottom" popupClass="!bg-surface border w-96">
 					<Bug size={14} />
 					<span slot="text">
-						<div class="bg-white">
+						<div class="bg-surface">
 							<Alert type="error" title="Error during execution">
 								<div class="flex flex-col gap-2">
 									An error occured, please contact the app author.
-									<span class="font-semibold">Job id: {lastJobId}</span>
+									<a
+										href={`/run/${lastJobId}?workspace=${workspace}`}
+										class="font-semibold text-red-800 underline">Job id: {lastJobId}</a
+									>
 								</div>
 							</Alert>
 						</div>

package/package/components/apps/components/helpers/RunnableComponent.svelte.d.ts

@@ -21,6 +21,7 @@ declare const __propDef: {
         outputs: {
             result: Output<any>;
             loading: Output<boolean>;
+            jobId?: Output<any> | undefined;
         };
         extraKey?: string | undefined;
         recomputeOnInputChanged?: boolean | undefined;

package/package/components/apps/components/helpers/RunnableWrapper.svelte

@@ -54,37 +54,61 @@ export function handleSideEffect(success, errorMessage) {
         return;
     if (sideEffect.selected == 'none')
         return;
-    if (sideEffect.selected == 'setTab') {
-        if (Array.isArray(sideEffect.configuration.setTab.setTab)) {
-            sideEffect.configuration.setTab?.setTab?.forEach((tab) => {
-                if (tab) {
-                    const { id, index } = tab;
-                    $componentControl[id].setTab?.(index);
-                }
-            });
+    switch (sideEffect.selected) {
+        case 'setTab':
+            const setTab = sideEffect?.configuration.setTab?.setTab;
+            if (Array.isArray(setTab)) {
+                setTab.forEach((tab) => {
+                    if (tab) {
+                        const { id, index } = tab;
+                        $componentControl[id].setTab?.(index);
+                    }
+                });
+            }
+            break;
+        case 'gotoUrl':
+            const url = sideEffect?.configuration?.gotoUrl?.url;
+            if (!url)
+                return;
+            const newTab = sideEffect?.configuration?.gotoUrl?.newTab;
+            if (newTab) {
+                window.open(url, '_blank');
+            }
+            else {
+                window.location.href = url;
+            }
+            break;
+        case 'sendToast': {
+            const message = sideEffect?.configuration?.sendToast?.message;
+            if (!message)
+                return;
+            sendUserToast(message, !success);
+            break;
         }
-    }
-    else if (sideEffect.selected == 'gotoUrl' &&
-        sideEffect.configuration.gotoUrl.url &&
-        sideEffect.configuration.gotoUrl.url != '') {
-        if (sideEffect.configuration.gotoUrl.newTab) {
-            window.open(sideEffect.configuration.gotoUrl.url, '_blank');
+        case 'sendErrorToast': {
+            const message = sideEffect?.configuration?.sendErrorToast?.message;
+            const appendError = sideEffect?.configuration?.sendErrorToast?.appendError;
+            if (!message)
+                return;
+            sendUserToast(message, true, [], appendError ? errorMessage : undefined);
+            break;
         }
-        else {
-            window.location.href = sideEffect.configuration.gotoUrl.url;
+        case 'openModal': {
+            const modalId = sideEffect?.configuration?.openModal?.modalId;
+            if (modalId) {
+                $componentControl[modalId].openModal?.();
+            }
+            break;
         }
-    }
-    else if (sideEffect.selected == 'sendToast' &&
-        sideEffect.configuration.sendToast &&
-        sideEffect.configuration.sendToast.message &&
-        sideEffect.configuration.sendToast.message != '') {
-        sendUserToast(sideEffect.configuration.sendToast.message, !success);
-    }
-    else if (sideEffect.selected == 'sendErrorToast' &&
-        sideEffect.configuration.sendErrorToast &&
-        sideEffect.configuration.sendErrorToast.message &&
-        sideEffect.configuration.sendErrorToast.message != '') {
-        sendUserToast(sideEffect.configuration.sendErrorToast.message, true, [], sideEffect.configuration.sendErrorToast.appendError ? errorMessage : undefined);
+        case 'closeModal': {
+            const modalId = sideEffect?.configuration?.closeModal?.modalId;
+            if (!modalId)
+                return;
+            $componentControl[modalId].closeModal?.();
+            break;
+        }
+        default:
+            break;
     }
 }
 </script>

package/package/components/apps/components/helpers/RunnableWrapper.svelte.d.ts

@@ -16,7 +16,7 @@ declare const __propDef: {
         runnableClass?: string | undefined;
         runnableStyle?: string | undefined;
         doOnSuccess?: {
-            selected: 'gotoUrl' | 'none' | 'setTab' | 'sendToast' | 'sendErrorToast' | 'errorOverlay';
+            selected: 'gotoUrl' | 'none' | 'setTab' | 'sendToast' | 'sendErrorToast' | 'errorOverlay' | 'openModal' | 'closeModal';
             configuration: {
                 gotoUrl: {
                     url: string | undefined;
@@ -35,10 +35,16 @@ declare const __propDef: {
                     message: string | undefined;
                     appendError: boolean | undefined;
                 } | undefined;
+                openModal?: {
+                    modalId: string | undefined;
+                } | undefined;
+                closeModal?: {
+                    modalId: string | undefined;
+                } | undefined;
             };
         } | undefined;
         doOnError?: {
-            selected: 'gotoUrl' | 'none' | 'setTab' | 'sendToast' | 'sendErrorToast' | 'errorOverlay';
+            selected: 'gotoUrl' | 'none' | 'setTab' | 'sendToast' | 'sendErrorToast' | 'errorOverlay' | 'openModal' | 'closeModal';
             configuration: {
                 gotoUrl: {
                     url: string | undefined;
@@ -57,6 +63,12 @@ declare const __propDef: {
                     message: string | undefined;
                     appendError: boolean | undefined;
                 } | undefined;
+                openModal?: {
+                    modalId: string | undefined;
+                } | undefined;
+                closeModal?: {
+                    modalId: string | undefined;
+                } | undefined;
             };
         } | undefined;
         render: boolean;
@@ -64,6 +76,7 @@ declare const __propDef: {
         outputs: {
             result: Output<any>;
             loading: Output<boolean>;
+            jobId?: Output<any> | undefined;
         };
         extraKey?: string | undefined;
         refreshOnStart?: boolean | undefined;

package/package/components/apps/components/helpers/eval.d.ts

@@ -8,6 +8,8 @@ export declare function eval_like(text: string, context: {} | undefined, noRetur
     };
     setValue?: (value: any) => void;
     setSelectedIndex?: (index: number) => void;
+    openModal?: () => void;
+    closeModal?: () => void;
 }>, worldStore: World | undefined, runnableComponents: Record<string, {
     cb?: (() => void)[];
 }>): Promise<any>;

package/package/components/apps/components/helpers/eval.js

@@ -15,7 +15,7 @@ export function computeGlobalContext(world, extraContext = {}) {
 }
 function create_context_function_template(eval_string, context, noReturn) {
     return `
-return async function (context, state, goto, setTab, recompute, getAgGrid, setValue, setSelectedIndex) {
+return async function (context, state, goto, setTab, recompute, getAgGrid, setValue, setSelectedIndex, openModal, closeModal) {
 "use strict";
 ${Object.keys(context).length > 0
         ? `let ${Object.keys(context).map((key) => ` ${key} = context['${key}']`)};`
@@ -26,6 +26,7 @@ ${noReturn ? `return ${eval_string}` : eval_string}
 }
 function make_context_evaluator(eval_string, context, noReturn) {
     let template = create_context_function_template(eval_string, context, noReturn);
+    console.debug(template);
     let functor = Function(template);
     return functor();
 }
@@ -96,5 +97,9 @@ export async function eval_like(text, context = {}, noReturn, state, editor, con
         controlComponents[id]?.setValue?.(value);
     }, (id, index) => {
         controlComponents[id]?.setSelectedIndex?.(index);
+    }, (id) => {
+        controlComponents[id]?.openModal?.();
+    }, (id) => {
+        controlComponents[id]?.closeModal?.();
     });
 }

package/package/components/apps/components/inputs/AppCheckbox.svelte

@@ -1,11 +1,10 @@
 <script>import Toggle from '../../../Toggle.svelte';
 import { getContext } from 'svelte';
-import { initConfig, initOutput } from '../../editor/appUtils';
+import { initOutput } from '../../editor/appUtils';
 import { concatCustomCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
-import ResolveConfig from '../helpers/ResolveConfig.svelte';
-import { components } from '../../editor/component';
+import { InputValue } from '../helpers';
 export let id;
 export let configuration;
 export let horizontalAlignment = undefined;
@@ -19,8 +18,11 @@ export let controls = undefined;
 const { app, worldStore, componentControl, runnableComponents } = getContext('AppViewerContext');
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
-let resolvedConfig = initConfig(components['checkboxcomponent'].initialData.configuration, configuration);
-let value = resolvedConfig.defaultValue ?? false;
+const rowContext = getContext('RowWrapperContext');
+const rowInputs = getContext('RowInputs');
+let value = false;
+let defaultValue = undefined;
+let label = '';
 $componentControl[id] = {
     setValue(nvalue) {
         value = nvalue;
@@ -39,35 +41,31 @@ function handleInput() {
     if (iterContext && listInputs) {
         listInputs(id, value);
     }
+    if (rowContext && rowInputs) {
+        rowInputs(id, value);
+    }
     if (recomputeIds) {
         recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb()));
     }
 }
 function handleDefault() {
-    value = resolvedConfig.defaultValue ?? false;
+    value = defaultValue ?? false;
     handleInput();
 }
 $: value != undefined && handleInput();
-$: resolvedConfig.defaultValue != undefined && handleDefault();
+$: defaultValue != undefined && handleDefault();
 $: css = concatCustomCss($app.css?.checkboxcomponent, customCss);
 </script>
 
-{#each Object.keys(components['checkboxcomponent'].initialData.configuration) as key (key)}
-	<ResolveConfig
-		{id}
-		{extraKey}
-		{key}
-		bind:resolvedConfig={resolvedConfig[key]}
-		configuration={configuration[key]}
-	/>
-{/each}
+<InputValue {id} key={extraKey} input={configuration.label} bind:value={label} />
+<InputValue {id} key={extraKey} input={configuration.defaultValue} bind:value={defaultValue} />
 
 <InitializeComponent {id} />
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
 	<Toggle
 		size="sm"
 		bind:checked={value}
-		options={{ right: resolvedConfig.label }}
+		options={{ right: label }}
 		textClass={css?.text?.class ?? ''}
 		textStyle={css?.text?.style ?? ''}
 		on:change={(e) => {

package/package/components/apps/components/inputs/AppDateInput.svelte

@@ -16,6 +16,7 @@ let labelValue = 'Title';
 let minValue = '';
 let maxValue = '';
 let defaultValue = undefined;
+let format = undefined;
 let value = undefined;
 $componentControl[id] = {
     setValue(nvalue) {
@@ -26,7 +27,23 @@ let outputs = initOutput($worldStore, id, {
     result: undefined
 });
 $: handleDefault(defaultValue);
-$: outputs?.result.set(value);
+function formatDate(dateString, format = 'DD.MM.YYYY') {
+    const date = new Date(dateString);
+    if (format === '') {
+        format = 'DD.MM.YYYY';
+    }
+    const padZero = (num) => (num < 10 ? '0' + num : num.toString());
+    const formatTokens = {
+        YYYY: date.getFullYear(),
+        MM: padZero(date.getMonth() + 1),
+        DD: padZero(date.getDate()),
+        hh: padZero(date.getHours()),
+        mm: padZero(date.getMinutes()),
+        ss: padZero(date.getSeconds())
+    };
+    return format.replace(/YYYY|MM|DD|hh|mm|ss/g, (match) => formatTokens[match]);
+}
+$: value && outputs?.result.set(formatDate(value, format));
 function handleDefault(defaultValue) {
     value = defaultValue;
 }
@@ -37,6 +54,7 @@ $: css = concatCustomCss($app.css?.dateinputcomponent, customCss);
 <InputValue {id} input={configuration.minDate} bind:value={minValue} />
 <InputValue {id} input={configuration.maxDate} bind:value={maxValue} />
 <InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+<InputValue {id} input={configuration.outputFormat} bind:value={format} />
 
 <InitializeComponent {id} />
 

package/package/components/apps/components/inputs/AppMultiSelect.svelte

@@ -1,5 +1,4 @@
 <script>import { getContext } from 'svelte';
-// import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults'
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { concatCustomCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
@@ -8,20 +7,27 @@ import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 // @ts-ignore
 import MultiSelect from 'svelte-multiselect';
+import Portal from 'svelte-portal';
+import { createFloatingActions } from 'svelte-floating-ui';
+import { extractCustomProperties } from '../../../../utils';
+import { tick } from 'svelte';
 export let id;
 export let configuration;
 export let customCss = undefined;
 export let render;
+const [floatingRef, floatingContent] = createFloatingActions({
+    strategy: 'absolute'
+});
 const { app, worldStore, selectedComponent, componentControl } = getContext('AppViewerContext');
 let items;
 const resolvedConfig = initConfig(components['multiselectcomponent'].initialData.configuration, configuration);
 const outputs = initOutput($worldStore, id, {
     result: []
 });
-let value = outputs?.result.peak();
+let value = [...new Set(outputs?.result.peak())];
 $componentControl[id] = {
     setValue(nvalue) {
-        value = nvalue;
+        value = [...new Set(nvalue)];
         outputs?.result.set([...(value ?? [])]);
     }
 };
@@ -36,15 +42,42 @@ function handleItems() {
 $: resolvedConfig.defaultItems && handleDefaultItems();
 function handleDefaultItems() {
     if (Array.isArray(resolvedConfig.defaultItems)) {
-        value = resolvedConfig.defaultItems?.map((label) => {
+        const nvalue = resolvedConfig.defaultItems?.map((label) => {
             return typeof label === 'string' ? label : `NOT_STRING`;
         });
+        value = [...new Set(nvalue)];
         outputs?.result.set([...(value ?? [])]);
     }
 }
 $: css = concatCustomCss($app.css?.multiselectcomponent, customCss);
-$: outerDiv && css?.multiselect?.style && outerDiv.setAttribute('style', css?.multiselect?.style);
+function setOuterDivStyle(outerDiv, portalRef, style) {
+    outerDiv.setAttribute('style', style);
+    // find ul in portalRef and set style
+    const ul = portalRef.querySelector('ul');
+    ul?.setAttribute('style', extractCustomProperties(style));
+}
+$: outerDiv &&
+    portalRef &&
+    css?.multiselect?.style &&
+    setOuterDivStyle(outerDiv, portalRef, css?.multiselect?.style);
 let outerDiv = undefined;
+let portalRef = undefined;
+function moveOptionsToPortal() {
+    // Find ul element with class 'options' within the outerDiv
+    const ul = outerDiv?.querySelector('.options');
+    if (ul) {
+        // Move the ul element to the portal
+        portalRef?.appendChild(ul);
+    }
+}
+$: if (render) {
+    tick().then(() => {
+        moveOptionsToPortal();
+    });
+}
+let w = 0;
+let h = 0;
+let open = false;
 </script>
 
 {#each Object.keys(components['multiselectcomponent'].initialData.configuration) as key (key)}
@@ -66,23 +99,48 @@ let outerDiv = undefined;
 				e.stopPropagation()
 			}
 		}}
+		use:floatingRef
+		bind:clientWidth={w}
+		bind:clientHeight={h}
 	>
 		{#if !value || Array.isArray(value)}
-			<MultiSelect
-				bind:outerDiv
-				outerDivClass={`${resolvedConfig.allowOverflow ? '' : 'h-full'}`}
-				ulSelectedClass={`${resolvedConfig.allowOverflow ? '' : 'overflow-auto max-h-full'} `}
-				bind:selected={value}
-				on:change={() => {
-					outputs?.result.set([...(value ?? [])])
-				}}
-				options={Array.isArray(items) ? items : []}
-				placeholder={resolvedConfig.placeholder}
-				allowUserOptions={resolvedConfig.create}
-				on:open={() => {
-					$selectedComponent = [id]
-				}}
-			/>
+			<div style={`height:${h}px;`}>
+				<MultiSelect
+					bind:outerDiv
+					outerDivClass={`${resolvedConfig.allowOverflow ? '' : 'h-full'}`}
+					ulSelectedClass={`${resolvedConfig.allowOverflow ? '' : 'overflow-auto max-h-full'} `}
+					ulOptionsClass={'p-2'}
+					bind:selected={value}
+					on:change={() => {
+						outputs?.result.set([...(value ?? [])])
+					}}
+					options={Array.isArray(items) ? items : []}
+					placeholder={resolvedConfig.placeholder}
+					allowUserOptions={resolvedConfig.create}
+					on:open={() => {
+						$selectedComponent = [id]
+						open = true
+					}}
+					on:close={() => {
+						open = false
+					}}
+				>
+					<div slot="option" let:option>
+						{option}
+					</div>
+				</MultiSelect>
+				<Portal>
+					<div use:floatingContent class="z5000" hidden={!open}>
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<div
+							bind:this={portalRef}
+							class="multiselect"
+							style={`min-width: ${w}px;`}
+							on:click|stopPropagation
+						/>
+					</div>
+				</Portal>
+			</div>
 		{:else}
 			Value {value} is not an array
 		{/if}
@@ -94,6 +152,7 @@ let outerDiv = undefined;
 		padding: 0 !important;
 		overflow: auto;
 	}
-	:global(.svelte-select-list) {
-		z-index: 1000 !important;
+
+	:global(.z5000) {
+		z-index: 5000 !important;
 	}</style>

package/package/components/apps/components/inputs/AppMultiSelect.svelte.d.ts

@@ -8,6 +8,8 @@ declare const __propDef: {
         render: boolean;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};