windmill-components 1.339.2 → 1.352.1

package/package/components/apps/components/layout/AppConditionalWrapper.svelte

@@ -11,7 +11,8 @@ export let componentContainerHeight;
 export let customCss = undefined;
 export let render;
 export let conditions;
-const { app, focusedGrid, selectedComponent, worldStore, connectingInput, componentControl } = getContext('AppViewerContext');
+export let onTabChange = undefined;
+const { app, focusedGrid, selectedComponent, worldStore, connectingInput, componentControl, runnableComponents } = getContext('AppViewerContext');
 const outputs = initOutput($worldStore, id, {
     conditions: [],
     selectedTabIndex: 0
@@ -38,6 +39,7 @@ function setSelectedIndex(index) {
     };
     selectedConditionIndex = index;
     outputs.selectedTabIndex.set(index);
+    onTabChange?.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb?.()));
 }
 $: resolvedConditions && handleResolvedConditions();
 $componentControl[id] = {

package/package/components/apps/components/layout/AppConditionalWrapper.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         customCss?: ComponentCustomCSS<'conditionalwrapper'> | undefined;
         render: boolean;
         conditions: RichConfiguration[];
+        onTabChange?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/components/layout/AppStepper.svelte

@@ -18,7 +18,9 @@ export let render;
 export let recomputeIds = undefined;
 export let extraQueryParams = {};
 export let componentInput;
-const { app, worldStore, focusedGrid, selectedComponent, componentControl, connectingInput, mode } = getContext('AppViewerContext');
+export let onNext = undefined;
+export let onPrevious = undefined;
+const { app, worldStore, focusedGrid, selectedComponent, componentControl, connectingInput, mode, runnableComponents } = getContext('AppViewerContext');
 let selected = tabs[0];
 let tabHeight = 0;
 let footerHeight = 0;
@@ -179,6 +181,7 @@ let directionClicked = undefined;
 						on:click={(e) => {
 							e.preventDefault()
 							directionClicked = 'left'
+							onPrevious?.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb?.()))
 							runStep(selectedIndex - 1)
 						}}
 					>
@@ -200,6 +203,7 @@ let directionClicked = undefined;
 						on:click={(e) => {
 							e.preventDefault()
 							directionClicked = 'right'
+							onNext?.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb?.()))
 							runStep(selectedIndex + 1)
 						}}
 					>

package/package/components/apps/components/layout/AppStepper.svelte.d.ts

@@ -11,6 +11,8 @@ declare const __propDef: {
         recomputeIds?: string[] | undefined;
         extraQueryParams?: Record<string, any> | undefined;
         componentInput: AppInput | undefined;
+        onNext?: string[] | undefined;
+        onPrevious?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/components/layout/AppTabs.svelte

@@ -15,8 +15,9 @@ export let tabs;
 export let customCss = undefined;
 export let render;
 export let disabledTabs;
+export let onTabChange = undefined;
 let resolvedConfig = initConfig(components['tabscomponent'].initialData.configuration, configuration);
-const { app, worldStore, focusedGrid, selectedComponent, mode, componentControl, connectingInput } = getContext('AppViewerContext');
+const { app, worldStore, focusedGrid, selectedComponent, mode, componentControl, connectingInput, runnableComponents } = getContext('AppViewerContext');
 let selected = tabs[0];
 let tabHeight = 0;
 let outputs = initOutput($worldStore, id, {
@@ -25,6 +26,7 @@ let outputs = initOutput($worldStore, id, {
 function handleTabSelection() {
     selectedIndex = tabs?.indexOf(selected);
     outputs?.selectedTabIndex.set(selectedIndex);
+    onTabChange?.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb?.()));
     if ($focusedGrid?.parentComponentId != id || $focusedGrid?.subGridIndex != selectedIndex) {
         $focusedGrid = {
             parentComponentId: id,

package/package/components/apps/components/layout/AppTabs.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         customCss?: ComponentCustomCSS<'tabscomponent'> | undefined;
         render: boolean;
         disabledTabs: RichConfiguration[];
+        onTabChange?: string[] | undefined;
     };
     events: {
         pointerdown: PointerEvent;

package/package/components/apps/editor/AppEditorHeader.svelte

@@ -35,7 +35,6 @@ import ButtonDropdown from '../../common/button/ButtonDropdown.svelte';
 import { MenuItem } from '@rgossiaux/svelte-headlessui';
 import AppEditorTutorial from './AppEditorTutorial.svelte';
 import AppTimeline from './AppTimeline.svelte';
-import { cloneDeep } from 'lodash';
 import AppReportsDrawer from './AppReportsDrawer.svelte';
 import HighlightCode from '../../HighlightCode.svelte';
 import { getPrimaryKeys } from '../components/display/dbtable/utils';
@@ -229,7 +228,7 @@ async function createApp(path) {
         });
         savedApp = {
             summary: $summary,
-            value: cloneDeep($app),
+            value: structuredClone($app),
             path: path,
             policy: policy
         };
@@ -262,7 +261,7 @@ async function updateApp(npath) {
     });
     savedApp = {
         summary: $summary,
-        value: cloneDeep($app),
+        value: structuredClone($app),
         path: npath,
         policy
     };
@@ -339,13 +338,13 @@ async function saveInitialDraft() {
         });
         savedApp = {
             summary: $summary,
-            value: cloneDeep($app),
+            value: structuredClone($app),
             path: newPath,
             policy,
             draft_only: true,
             draft: {
                 summary: $summary,
-                value: cloneDeep($app),
+                value: structuredClone($app),
                 path: newPath,
                 policy
             }
@@ -422,14 +421,14 @@ async function saveDraft(forceSave = false) {
             ...(savedApp?.draft_only
                 ? {
                     summary: $summary,
-                    value: cloneDeep($app),
+                    value: structuredClone($app),
                     path: savedApp.draft_only ? newPath || path : path,
                     policy
                 }
                 : savedApp),
             draft: {
                 summary: $summary,
-                value: cloneDeep($app),
+                value: structuredClone($app),
                 path: newPath || path,
                 policy
             }

package/package/components/apps/editor/SettingsPanel.svelte

@@ -5,8 +5,8 @@ import PanelSection from './settingsPanel/common/PanelSection.svelte';
 import ComponentPanel from './settingsPanel/ComponentPanel.svelte';
 import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
 import BackgroundScriptSettings from './settingsPanel/script/BackgroundScriptSettings.svelte';
-import Recompute from './settingsPanel/Recompute.svelte';
-const { selectedComponent, app, stateId } = getContext('AppViewerContext');
+import EventHandlerItem from './settingsPanel/EventHandlerItem.svelte';
+const { selectedComponent, app, stateId, runnableComponents } = getContext('AppViewerContext');
 let firstComponent = $selectedComponent?.[0];
 $: $selectedComponent?.[0] != firstComponent && (firstComponent = $selectedComponent?.[0]);
 $: hiddenInlineScript = $app?.hiddenInlineScripts
@@ -142,7 +142,17 @@ const dispatch = createEventDispatcher();
 				</PanelSection>
 			</div>
 		{/if}
-		<Recompute bind:recomputeIds={hiddenInlineScript.script.recomputeIds} ownId={id} />
+		<PanelSection
+			title={`Event handlers`}
+			tooltip="Event handlers are used to trigger actions on other components when a specific event occurs. For example, you can trigger a recompute on a component when a script has successfully run."
+		>
+			<EventHandlerItem
+				title="on success"
+				tooltip="This event is triggered when the script runs successfully."
+				items={Object.keys($runnableComponents).filter((_id) => _id !== id)}
+				bind:value={hiddenInlineScript.script.recomputeIds}
+			/>
+		</PanelSection>
 		<div class="grow shrink" />
 	{/key}
 {/if}

package/package/components/apps/editor/component/Component.svelte

@@ -180,37 +180,23 @@ function mouseOut() {
 				{render}
 			/>
 		{:else if component.type === 'logcomponent'}
-			<AppLogsComponent
-				id={component.id}
-				customCss={component.customCss}
-				bind:initializing
-				componentInput={component.componentInput}
-				{render}
-			/>
+			<AppLogsComponent />
 		{:else if component.type === 'jobidlogcomponent'}
 			<AppJobIdLogComponent
 				id={component.id}
 				customCss={component.customCss}
 				bind:initializing
 				configuration={component.configuration}
-				componentInput={component.componentInput}
 				{render}
 			/>
 		{:else if component.type === 'flowstatuscomponent'}
-			<AppFlowStatusComponent
-				id={component.id}
-				customCss={component.customCss}
-				bind:initializing
-				componentInput={component.componentInput}
-				{render}
-			/>
+			<AppFlowStatusComponent />
 		{:else if component.type === 'jobidflowstatuscomponent'}
 			<AppJobIdFlowStatus
 				id={component.id}
 				customCss={component.customCss}
 				bind:initializing
 				configuration={component.configuration}
-				componentInput={component.componentInput}
 				{render}
 			/>
 		{:else if component.type === 'barchartcomponent'}
@@ -609,6 +595,7 @@ function mouseOut() {
 				id={component.id}
 				tabs={component.tabs}
 				disabledTabs={component.disabledTabs}
+				onTabChange={component.onTabChange}
 				customCss={component.customCss}
 				{componentContainerHeight}
 				{render}
@@ -620,6 +607,8 @@ function mouseOut() {
 				customCss={component.customCss}
 				{componentContainerHeight}
 				componentInput={component.componentInput}
+				onNext={component.onNext}
+				onPrevious={component.onPrevious}
 				{render}
 			/>
 		{:else if component.type === 'conditionalwrapper' && component.conditions}
@@ -627,6 +616,7 @@ function mouseOut() {
 				id={component.id}
 				conditions={component.conditions}
 				customCss={component.customCss}
+				onTabChange={component.onTabChange}
 				{componentContainerHeight}
 				{render}
 			/>
@@ -678,6 +668,7 @@ function mouseOut() {
 				configuration={component.configuration}
 				id={component.id}
 				customCss={component.customCss}
+				onFileChange={component.onFileChange}
 				{render}
 			/>
 		{:else if component.type === 's3fileinputcomponent'}
@@ -685,6 +676,7 @@ function mouseOut() {
 				configuration={component.configuration}
 				id={component.id}
 				customCss={component.customCss}
+				onFileChange={component.onFileChange}
 				{render}
 			/>
 		{:else if component.type === 'imagecomponent'}

package/package/components/apps/editor/component/components.d.ts

@@ -104,10 +104,13 @@ export type RadioComponent = BaseComponent<'radiocomponent'>;
 export type IconComponent = BaseComponent<'iconcomponent'>;
 export type HorizontalDividerComponent = BaseComponent<'horizontaldividercomponent'>;
 export type VerticalDividerComponent = BaseComponent<'verticaldividercomponent'>;
-export type FileInputComponent = BaseComponent<'fileinputcomponent'>;
+export type FileInputComponent = BaseComponent<'fileinputcomponent'> & {
+    onFileChange?: string[];
+};
 export type TabsComponent = BaseComponent<'tabscomponent'> & {
     tabs: string[];
     disabledTabs: RichConfiguration[];
+    onTabChange?: string[];
 };
 export type ListComponent = BaseComponent<'listcomponent'>;
 export type ContainerComponent = BaseComponent<'containercomponent'> & {
@@ -131,9 +134,12 @@ export type ModalComponent = BaseComponent<'modalcomponent'> & {
 };
 export type StepperComponent = BaseComponent<'steppercomponent'> & {
     tabs: string[];
+    onNext?: string[];
+    onPrevious?: string[];
 };
 export type ConditionalWrapperComponent = BaseComponent<'conditionalwrapper'> & {
     conditions: RichConfiguration[];
+    onTabChange?: string[];
 };
 export type Schemaformcomponent = BaseComponent<'schemaformcomponent'>;
 export type SelectTabComponent = BaseComponent<'selecttabcomponent'>;
@@ -147,7 +153,9 @@ export type DBExplorerComponent = BaseComponent<'dbexplorercomponent'> & {
     columns: RichConfiguration;
     actions: TableAction[];
 };
-export type S3FileInputComponent = BaseComponent<'s3fileinputcomponent'>;
+export type S3FileInputComponent = BaseComponent<'s3fileinputcomponent'> & {
+    onFileChange?: string[];
+};
 export type DecisionTreeNode = {
     id: string;
     label: string;
@@ -3903,6 +3911,7 @@ export declare const components: {
                     readonly type: "static";
                     readonly fieldType: "text";
                     readonly value: "";
+                    readonly allowTypeChange: false;
                 };
                 readonly flex: {
                     readonly type: "static";

package/package/components/apps/editor/component/components.js

@@ -3175,7 +3175,8 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                 whereClause: {
                     type: 'static',
                     fieldType: 'text',
-                    value: ''
+                    value: '',
+                    allowTypeChange: false
                 },
                 flex: {
                     type: 'static',

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte

@@ -203,7 +203,7 @@ $: refresh(runnable);
 			class="!text-xs !rounded-xs"
 		/>
 	</div>
-	<div class="w-full">
+	<div class="w-full grow overflow-y-auto">
 		{#key $stateId}
 			{#if notFound}
 				<div class="text-red-400"

package/package/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte

@@ -2,7 +2,7 @@
 import { GripVertical, Loader2, Plus, X } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import SubTypeEditor from './SubTypeEditor.svelte';
-import { dndzone, SOURCES, TRIGGERS } from 'svelte-dnd-action';
+import { dragHandle, dragHandleZone } from '@windmill-labs/svelte-dnd-action';
 import { generateRandomString, pluralize } from '../../../../utils';
 import Toggle from '../../../Toggle.svelte';
 import QuickAddColumn from './QuickAddColumn.svelte';
@@ -181,36 +181,15 @@ function deleteElementByType(index) {
         dispatch('deleteArrayItem', { index });
     }
 }
-let dragDisabled = true;
-let dragging = false;
 function handleConsider(e) {
-    const { items: newItems, info: { source, trigger } } = e.detail;
+    const { items: newItems } = e.detail;
     items = newItems;
-    // Ensure dragging is stopped on drag finish via keyboard
-    if (source === SOURCES.KEYBOARD && trigger === TRIGGERS.DRAG_STOPPED) {
-        dragDisabled = true;
-    }
 }
 function handleFinalize(e) {
-    const { items: newItems, info: { source } } = e.detail;
+    const { items: newItems } = e.detail;
     items = newItems;
-    // Ensure dragging is stopped on drag finish via pointer (mouse, touch)
-    if (source === SOURCES.POINTER) {
-        dragDisabled = true;
-    }
     const reorderedValues = items.map((item) => item.value);
     componentInput.value = reorderedValues;
-    dragging = false;
-}
-function startDrag(e) {
-    dragging = true;
-    // preventing default to prevent lag on touch devices (because of the browser checking for screen scrolling)
-    e.preventDefault();
-    dragDisabled = false;
-}
-function handleKeyDown(e) {
-    if ((e.key === 'Enter' || e.key === ' ') && dragDisabled)
-        dragDisabled = false;
 }
 let items = (Array.isArray(componentInput.value) ? componentInput.value : [])
     .filter((x) => x != undefined)
@@ -256,9 +235,8 @@ let raw = false;
 			{/if}
 		</div>
 		<section
-			use:dndzone={{
+			use:dragHandleZone={{
 				items,
-				dragDisabled,
 				flipDurationMs,
 				dropTargetStyle: {}
 			}}
@@ -277,19 +255,12 @@ let raw = false;
 								bind:componentInput
 								bind:value={item.value}
 								on:remove={() => deleteElementByType(index)}
-								{dragging}
 							/>
 						</div>
 
 						<div class="flex justify-between flex-col items-center">
 							<!-- svelte-ignore a11y-no-static-element-interactions -->
-							<div
-								tabindex={dragDisabled ? 0 : -1}
-								class="w-4 h-4 cursor-move"
-								on:mousedown={startDrag}
-								on:touchstart={startDrag}
-								on:keydown={handleKeyDown}
-							>
+							<div class="w-4 h-4 cursor-move handle" use:dragHandle>
 								<GripVertical size={16} />
 							</div>
 							{#if subFieldType !== 'db-explorer'}

package/package/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -7,7 +7,6 @@ import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
 import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
 import { classNames, getModifierKey, isMac } from '../../../../utils';
 import { buildExtraLib } from '../../utils';
-import Recompute from './Recompute.svelte';
 import Tooltip from '../../../Tooltip.svelte';
 import ComponentInputTypeEditor from './ComponentInputTypeEditor.svelte';
 import AlignmentEditor from './AlignmentEditor.svelte';
@@ -36,6 +35,7 @@ import DecisionTreeGraphEditor from './DecisionTreeGraphEditor.svelte';
 import GridAgChartsLicenseKe from './GridAgChartsLicenseKe.svelte';
 import Toggle from '../../../Toggle.svelte';
 import ContextVariables from './ContextVariables.svelte';
+import EventHandlers from './EventHandlers.svelte';
 export let componentSettings = undefined;
 export let onDelete = undefined;
 export let noGrid = false;
@@ -362,46 +362,8 @@ function transformToFrontend() {
 				{ccomponents[component.type].name} has no configuration
 			</div>
 		{/if}
-		{#if (`recomputeIds` in componentSettings.item.data && Array.isArray(componentSettings.item.data.recomputeIds)) || componentSettings.item.data.type === 'buttoncomponent' || componentSettings.item.data.type === 'formcomponent' || componentSettings.item.data.type === 'formbuttoncomponent' || componentSettings.item.data.type === 'checkboxcomponent'}
-			<Recompute
-				bind:recomputeIds={componentSettings.item.data.recomputeIds}
-				ownId={component.id}
-			/>
-		{/if}
-		{#if (`onOpenRecomputeIds` in componentSettings.item.data && Array.isArray(componentSettings.item.data.onOpenRecomputeIds)) || componentSettings.item.data.type === 'modalcomponent' || componentSettings.item.data.type === 'drawercomponent'}
-			<Recompute
-				bind:recomputeIds={componentSettings.item.data.onOpenRecomputeIds}
-				ownId={component.id}
-				title="Trigger runnables on open"
-				tooltip="Select components to recompute after this component was opened"
-			/>
-		{/if}
-		{#if (`onCloseRecomputeIds` in componentSettings.item.data && Array.isArray(componentSettings.item.data.onCloseRecomputeIds)) || componentSettings.item.data.type === 'modalcomponent' || componentSettings.item.data.type === 'drawercomponent'}
-			<Recompute
-				bind:recomputeIds={componentSettings.item.data.onCloseRecomputeIds}
-				ownId={component.id}
-				title="Trigger runnables on close"
-				tooltip="Select components to recompute after this component was closed"
-			/>
-		{/if}
-		{#if componentSettings.item.data.type === 'checkboxcomponent'}
-			<Recompute
-				title="Recompute on toggle"
-				tooltip={'Contrary to onSuccess, this will only trigger recompute when a human toggle the change, not if it set by a default value or by setValue'}
-				documentationLink={undefined}
-				bind:recomputeIds={componentSettings.item.data.onToggle}
-				ownId={component.id}
-			/>
-		{/if}
-		{#if componentSettings.item.data.type === 'resourceselectcomponent' || componentSettings.item.data.type === 'selectcomponent'}
-			<Recompute
-				title="Recompute on select"
-				tooltip={'Contrary to onSuccess, this will only trigger recompute when a human select an item, not if it set by a default value or by setValue'}
-				documentationLink={undefined}
-				bind:recomputeIds={componentSettings.item.data.onSelect}
-				ownId={component.id}
-			/>
-		{/if}
+
+		<EventHandlers bind:item={componentSettings.item} ownId={component.id} />
 
 		<div class="grow shrink" />
 

package/package/components/apps/editor/settingsPanel/EventHandlerItem.svelte

@@ -0,0 +1,33 @@
+<script>import Tooltip from '../../../Tooltip.svelte';
+import MultiSelect from '../../../multiselect/MultiSelectWrapper.svelte';
+import { twMerge } from 'tailwind-merge';
+export let items;
+export let value = undefined;
+export let title;
+export let tooltip;
+$: width = 0;
+const inputWidth = 280;
+</script>
+
+<div
+	class={twMerge(
+		'flex flex-col justify-between w-full',
+		width < inputWidth ? 'flex-col gap-2' : 'flex-row gap-16 '
+	)}
+	bind:clientWidth={width}
+>
+	<div class="flex items-center text-xs h-8 whitespace-nowrap">
+		{title}
+		<Tooltip light small>{tooltip}</Tooltip>
+	</div>
+
+	<div class="w-full">
+		{#if items.length === 0}
+			<div class="text-xs text-secondary w-full flex items-center justify-end h-8">
+				No components to recompute.
+			</div>
+		{:else}
+			<MultiSelect {items} bind:value />
+		{/if}
+	</div>
+</div>

package/package/components/apps/editor/settingsPanel/EventHandlerItem.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        items: string[];
+        value?: string[] | undefined;
+        title: string;
+        tooltip: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EventHandlerItemProps = typeof __propDef.props;
+export type EventHandlerItemEvents = typeof __propDef.events;
+export type EventHandlerItemSlots = typeof __propDef.slots;
+export default class EventHandlerItem extends SvelteComponent<EventHandlerItemProps, EventHandlerItemEvents, EventHandlerItemSlots> {
+}
+export {};

package/package/components/apps/editor/settingsPanel/EventHandlers.svelte

@@ -0,0 +1,103 @@
+<script>import { getContext } from 'svelte';
+import EventHandlerItem from './EventHandlerItem.svelte';
+import PanelSection from './common/PanelSection.svelte';
+const { runnableComponents } = getContext('AppViewerContext');
+export let item;
+export let ownId;
+const componentsWithEventHandler = [
+    'modalcomponent',
+    'drawercomponent',
+    'buttoncomponent',
+    'formcomponent',
+    'formbuttoncomponent',
+    'checkboxcomponent',
+    'resourceselectcomponent',
+    'selectcomponent',
+    'tabscomponent',
+    'conditionalwrapper',
+    'fileinputcomponent',
+    's3fileinputcomponent',
+    'steppercomponent'
+];
+</script>
+
+{#if componentsWithEventHandler.includes(item.data.type)}
+	<PanelSection
+		title="Event handlers"
+		tooltip="Event handlers are used to trigger actions on other components when a specific event occurs. For example, you can trigger a recompute on a component when a button is clicked."
+	>
+		{#if (`onOpenRecomputeIds` in item.data && Array.isArray(item.data.onOpenRecomputeIds)) || item.data.type === 'modalcomponent' || item.data.type === 'drawercomponent'}
+			<EventHandlerItem
+				title="on open"
+				tooltip="Select components to recompute after this component was opened"
+				items={Object.keys($runnableComponents).filter((id) => id !== ownId)}
+				bind:value={item.data.onOpenRecomputeIds}
+			/>
+		{/if}
+
+		{#if (`onCloseRecomputeIds` in item.data && Array.isArray(item.data.onCloseRecomputeIds)) || item.data.type === 'modalcomponent' || item.data.type === 'drawercomponent'}
+			<EventHandlerItem
+				title="on close"
+				tooltip="Select components to recompute after this component was closed"
+				items={Object.keys($runnableComponents).filter((id) => id !== ownId)}
+				bind:value={item.data.onCloseRecomputeIds}
+			/>
+		{/if}
+		{#if (`recomputeIds` in item.data && Array.isArray(item.data.recomputeIds)) || item.data.type === 'buttoncomponent' || item.data.type === 'formcomponent' || item.data.type === 'formbuttoncomponent' || item.data.type === 'checkboxcomponent'}
+			<EventHandlerItem
+				title="on success"
+				tooltip="Select components to recompute after this runnable has successfully run"
+				items={Object.keys($runnableComponents).filter((id) => id !== ownId)}
+				bind:value={item.data.recomputeIds}
+			/>
+		{/if}
+		{#if item.data.type === 'checkboxcomponent'}
+			<EventHandlerItem
+				title="on toggle"
+				tooltip="Contrary to onSuccess, this will only trigger recompute when a human toggle the change, not if it set by a default value or by setValue"
+				items={Object.keys($runnableComponents).filter((id) => id !== ownId)}
+				bind:value={item.data.onToggle}
+			/>
+		{/if}
+		{#if item.data.type === 'resourceselectcomponent' || item.data.type === 'selectcomponent'}
+			<EventHandlerItem
+				title="on select"
+				tooltip="Contrary to onSuccess, this will only trigger recompute when a human select an item, not if it set by a default value or by setValue"
+				items={Object.keys($runnableComponents).filter((id) => id !== ownId)}
+				bind:value={item.data.onSelect}
+			/>
+		{/if}
+		{#if item.data.type === 'tabscomponent' || item.data.type === 'conditionalwrapper'}
+			<EventHandlerItem
+				title="on tab change"
+				tooltip="Select components to recompute after the selected tab was changed"
+				items={Object.keys($runnableComponents).filter((id) => id !== ownId)}
+				bind:value={item.data.onTabChange}
+			/>
+		{/if}
+		{#if item.data.type === 'fileinputcomponent' || item.data.type === 's3fileinputcomponent'}
+			<EventHandlerItem
+				title="on file change"
+				tooltip="Select components to recompute after a file was selected"
+				items={Object.keys($runnableComponents).filter((id) => id !== ownId)}
+				bind:value={item.data.onFileChange}
+			/>
+		{/if}
+		{#if item.data.type === 'steppercomponent'}
+			<EventHandlerItem
+				title="on next"
+				tooltip="Select components to recompute after the next button was clicked"
+				items={Object.keys($runnableComponents).filter((id) => id !== ownId)}
+				bind:value={item.data.onNext}
+			/>
+		{/if}
+		{#if item.data.type === 'steppercomponent'}
+			<EventHandlerItem
+				title="on previous"
+				tooltip="Select components to recompute after the previous button was clicked"
+				items={Object.keys($runnableComponents).filter((id) => id !== ownId)}
+				bind:value={item.data.onPrevious}
+			/>
+		{/if}
+	</PanelSection>
+{/if}

package/package/components/apps/editor/settingsPanel/EventHandlers.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import type { GridItem } from '../../types';
+declare const __propDef: {
+    props: {
+        item: GridItem;
+        ownId: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EventHandlersProps = typeof __propDef.props;
+export type EventHandlersEvents = typeof __propDef.events;
+export type EventHandlersSlots = typeof __propDef.slots;
+export default class EventHandlers extends SvelteComponent<EventHandlersProps, EventHandlersEvents, EventHandlersSlots> {
+}
+export {};