windmill-components 1.269.3 → 1.291.4

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

@@ -11,10 +11,15 @@ import { deleteGridItem } from '../appUtils';
 export let conditions = [];
 export let component;
 let dragDisabled = true;
-let items = conditions.map((condition, index) => {
+let items = conditions.slice(0, -1).map((condition, index) => {
     return { value: condition, id: generateRandomString(), originalIndex: index };
 });
-$: conditions = items.map((item) => item.value);
+$: conditions = items.map((item) => item.value).concat([{
+        type: 'evalv2',
+        expr: 'true',
+        fieldType: 'boolean',
+        connections: []
+    }]);
 const { app, runnableComponents, componentControl } = getContext('AppViewerContext');
 function handleConsider(e) {
     const { items: newItems } = e.detail;
@@ -69,13 +74,13 @@ function deleteSubgrid(index) {
     }
     // Remove the corresponding item from the items array
     const nitems = items.filter((item) => item.originalIndex !== index);
-    component.numberOfSubgrids = nitems.length;
+    component.numberOfSubgrids = nitems.length + 1;
     // Update the originalIndex of the remaining items
     nitems.forEach((item, i) => {
         item.originalIndex = i;
     });
     items = nitems;
-    delete $app.subgrids[`${component.id}-${items.length}`];
+    delete $app.subgrids[`${component.id}-${items.length + 1}`];
     $app = $app;
 }
 function addCondition() {
@@ -114,54 +119,63 @@ function addCondition() {
 			use:dndzone={{
 				items: items,
 				flipDurationMs: 200,
-				dropTargetStyle: {}
+				dropTargetStyle: {},
+				dragDisabled
 			}}
 			on:consider={handleConsider}
 			on:finalize={handleFinalize}
 		>
 			{#each items as item, index (item.id)}
-				{#if index < items.length - 1}
-					{@const condition = item.value}
-					<div class="w-full flex flex-row gap-2 items-center relative">
-						<div class={twMerge('grow border p-3 my-2 rounded-md bg-surface')}>
-							<InputsSpecEditor
-								key={`Condition ${index + 1}`}
-								bind:componentInput={item.value}
-								id={component.id}
-								userInputEnabled={false}
-								shouldCapitalize={true}
-								resourceOnly={false}
-								fieldType={condition?.['fieldType']}
-								subFieldType={condition?.['subFieldType']}
-								format={condition?.['format']}
-								selectOptions={condition?.['selectOptions']}
-								tooltip={condition?.['tooltip']}
-								fileUpload={condition?.['fileUpload']}
-								placeholder={condition?.['placeholder']}
-								customTitle={condition?.['customTitle']}
-								displayType={false}
-							/>
-						</div>
+				{@const condition = item.value}
+				<div class="w-full flex flex-row gap-2 items-center relative">
+					<div class={twMerge('grow border p-3 my-2 rounded-md bg-surface relative')}>
+						{#if dragDisabled}
+						<InputsSpecEditor
+							key={`Condition ${index + 1}`}
+							bind:componentInput={item.value}
+							id={component.id}
+							userInputEnabled={false}
+							shouldCapitalize={true}
+							resourceOnly={false}
+							fieldType={condition?.['fieldType']}
+							subFieldType={condition?.['subFieldType']}
+							format={condition?.['format']}
+							selectOptions={condition?.['selectOptions']}
+							tooltip={condition?.['tooltip']}
+							fileUpload={condition?.['fileUpload']}
+							placeholder={condition?.['placeholder']}
+							customTitle={condition?.['customTitle']}
+							displayType={false}
+						/>
+						{:else}
+						<pre><code>{condition?.['expr']}</code></pre>
+						{/if}
 
-						<div class="flex flex-col justify-center gap-2">
-							<!-- svelte-ignore a11y-click-events-have-key-events -->
-							<div on:click={() => deleteSubgrid(index)}>
-								<X size={16} />
-							</div>
+					</div>
+
+					<div class="flex flex-col justify-center gap-2">
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<div on:click={() => deleteSubgrid(index)}>
+							<X size={16} />
+						</div>
 
-							<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-							<div
-								tabindex={dragDisabled ? 0 : -1}
-								class="w-4 h-4"
-								on:mousedown={startDrag}
-								on:touchstart={startDrag}
-								on:keydown={handleKeyDown}
-							>
-								<GripVertical size={16} />
-							</div>
+						<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<div
+							tabindex={dragDisabled ? 0 : -1}
+							class="w-4 h-4"
+							on:mousedown={startDrag}
+							on:touchstart={startDrag}
+							on:keydown={handleKeyDown}
+							aria-label="drag-handle"
+							style={dragDisabled ? 'cursor: grab' : 'cursor: grabbing'}
+						>
+							<GripVertical size={16} />
 						</div>
 					</div>
-				{/if}
+				</div>
+
 			{/each}
 		</section>
 		<div class="border rounded-md p-3 mb-2">

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

@@ -145,21 +145,24 @@ function handleKeyDown(event) {
 							<CloseButton noBg on:close={() => deleteSubgrid(index)} />
 						</div>
 
-						<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+						<div class="flex flex-col justify-center gap-2">
+							<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 
-						<!-- svelte-ignore a11y-no-static-element-interactions -->
-						<div
-							tabindex={dragDisabled ? 0 : -1}
-							class="w-4 h-4"
-							on:mousedown={startDrag}
-							on:touchstart={startDrag}
-							on:keydown={handleKeyDown}
-							aria-label="drag-handle"
-							style={dragDisabled ? 'cursor: grab' : 'cursor: grabbing'}
-						>
-							<GripVertical size={16} />
+							<!-- svelte-ignore a11y-no-static-element-interactions -->
+							<div
+								tabindex={dragDisabled ? 0 : -1}
+								class="w-4 h-4"
+								on:mousedown={startDrag}
+								on:touchstart={startDrag}
+								on:keydown={handleKeyDown}
+								aria-label="drag-handle"
+								style={dragDisabled ? 'cursor: grab' : 'cursor: grabbing'}
+							>
+								<GripVertical size={16} />
+							</div>
 						</div>
 					</div>
+
 					{#if canDisableTabs && disabledTabs}
 						<GridTabDisabled bind:field={disabledTabs[index]} id={component.id} />
 					{/if}

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

@@ -32,6 +32,10 @@ export let shouldFormatExpression = false;
 export let fixedOverflowWidgets = true;
 export let loading = false;
 export let acceptSelf = false;
+export let recomputeOnInputChanged = true;
+export let showOnDemandOnlyToggle = true;
+export let documentationLink = undefined;
+export let markdownTooltip = undefined;
 const { connectingInput, app } = getContext('AppViewerContext');
 let evalV2editor;
 function applyConnection(connection) {
@@ -70,8 +74,8 @@ $: if (componentInput == undefined) {
 					{#if loading}
 						<Loader2 size={14} class="animate-spin ml-2" />
 					{/if}
-					{#if tooltip}
-						<Tooltip small>
+					{#if tooltip || markdownTooltip}
+						<Tooltip small {documentationLink} {markdownTooltip}>
 							{tooltip}
 						</Tooltip>
 					{/if}
@@ -86,7 +90,7 @@ $: if (componentInput == undefined) {
 			</div>
 
 			<div class={classNames('flex gap-x-2 gap-y-1 justify-end items-center')}>
-				{#if componentInput?.type && allowTypeChange}
+				{#if componentInput?.type && allowTypeChange !== false}
 					<ToggleButtonGroup
 						class="h-7"
 						bind:selected={componentInput.type}
@@ -168,6 +172,8 @@ $: if (componentInput == undefined) {
 				{id}
 				bind:componentInput
 				{fixedOverflowWidgets}
+				{recomputeOnInputChanged}
+				{showOnDemandOnlyToggle}
 			/>
 		{:else if componentInput?.type === 'upload'}
 			<UploadInputEditor bind:componentInput {fileUpload} />

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

@@ -23,6 +23,10 @@ declare const __propDef: {
         fixedOverflowWidgets?: boolean | undefined;
         loading?: boolean | undefined;
         acceptSelf?: boolean | undefined;
+        recomputeOnInputChanged?: boolean | undefined;
+        showOnDemandOnlyToggle?: boolean | undefined;
+        documentationLink?: string | undefined;
+        markdownTooltip?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -11,6 +11,8 @@ export let resourceOnly = false;
 export let displayType = false;
 export let deletable = false;
 export let acceptSelf = false;
+export let recomputeOnInputChanged = true;
+export let showOnDemandOnlyToggle = false;
 $: finalInputSpecsConfiguration = inputSpecsConfiguration ?? inputSpecs;
 const dispatch = createEventDispatcher();
 </script>
@@ -29,6 +31,8 @@ const dispatch = createEventDispatcher();
 					inputSpecsConfiguration={finalInputSpecsConfiguration?.[k]?.['configuration']}
 					labels={finalInputSpecsConfiguration?.[k]?.['labels']}
 					tooltip={finalInputSpecsConfiguration?.[k]?.['tooltip']}
+					{recomputeOnInputChanged}
+					{showOnDemandOnlyToggle}
 				/>
 			{:else}
 				{@const meta = finalInputSpecsConfiguration?.[k]}
@@ -49,7 +53,11 @@ const dispatch = createEventDispatcher();
 					placeholder={meta?.['placeholder']}
 					customTitle={meta?.['customTitle']}
 					loading={meta?.['loading']}
+					documentationLink={meta?.['documentationLink']}
+					markdownTooltip={meta?.['markdownTooltip']}
 					{displayType}
+					{recomputeOnInputChanged}
+					{showOnDemandOnlyToggle}
 				/>
 				{#if deletable}
 					<div class="flex flex-row-reverse -mt-4">

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

@@ -11,6 +11,8 @@ declare const __propDef: {
         displayType?: boolean | undefined;
         deletable?: boolean | undefined;
         acceptSelf?: boolean | undefined;
+        recomputeOnInputChanged?: boolean | undefined;
+        showOnDemandOnlyToggle?: boolean | undefined;
     };
     events: {
         delete: CustomEvent<any>;

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

@@ -12,6 +12,8 @@ export let resourceOnly;
 export let tooltip;
 export let disabledOptions = [];
 export let acceptSelf = false;
+export let recomputeOnInputChanged = true;
+export let showOnDemandOnlyToggle = true;
 $: {
     if (oneOf == undefined) {
         oneOf = { configuration: {}, selected: '' };
@@ -75,6 +77,7 @@ function getValueOfDeprecated(obj) {
 
 			{#if config && oneOf.configuration[oneOf.selected]}
 				<InputsSpecEditor
+					{recomputeOnInputChanged}
 					key={nestedKey}
 					bind:componentInput={oneOf.configuration[oneOf.selected][nestedKey]}
 					{id}
@@ -91,6 +94,9 @@ function getValueOfDeprecated(obj) {
 					tooltip={config?.['tooltip']}
 					fileUpload={config?.['fileUpload']}
 					loading={config?.['loading']}
+					documentationLink={config?.['documentationLink']}
+					allowTypeChange={config?.['allowTypeChange']}
+					{showOnDemandOnlyToggle}
 				/>
 			{/if}
 		{/each}

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

@@ -15,6 +15,8 @@ declare const __propDef: {
         tooltip: string | undefined;
         disabledOptions?: string[] | undefined;
         acceptSelf?: boolean | undefined;
+        recomputeOnInputChanged?: boolean | undefined;
+        showOnDemandOnlyToggle?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -4,6 +4,9 @@ import PanelSection from './common/PanelSection.svelte';
 import Toggle from '../../../Toggle.svelte';
 export let recomputeIds = undefined;
 export let ownId;
+export let title = 'Trigger runnables on success';
+export let tooltip = 'Select components to recompute after this runnable has successfully run';
+export let documentationLink = 'https://www.windmill.dev/docs/apps/app-runnable-panel#recompute-others';
 const { runnableComponents } = getContext('AppViewerContext');
 function onChange(checked, id) {
     if (checked) {
@@ -15,11 +18,7 @@ function onChange(checked, id) {
 }
 </script>
 
-<PanelSection
-	title="Trigger runnables on success"
-	tooltip="Select components to recompute after this runnable has successfully run"
-	documentationLink="https://www.windmill.dev/docs/apps/app-runnable-panel#recompute-others"
->
+<PanelSection {title} {tooltip} {documentationLink}>
 	{#if Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId).length > 0}
 		<table class="divide-y border w-full">
 			<thead class="bg-surface-secondary">

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

@@ -3,6 +3,9 @@ declare const __propDef: {
     props: {
         recomputeIds?: string[] | undefined;
         ownId: string;
+        title?: string | undefined;
+        tooltip?: string | undefined;
+        documentationLink?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte

@@ -21,7 +21,7 @@ function open() {
 	<div
 		transition:fade={{ duration: 150 }}
 		use:popperContent={{ placement: 'bottom', strategy: 'fixed' }}
-		class="color-picker-input z-[1002]"
+		class="color-picker-input z-[1002] !text-primary"
 		style="width: {width > 280 ? width : 280}px;"
 	>
 		<ColorPicker
@@ -46,6 +46,7 @@ function open() {
 		border-radius: 0.375rem !important;
 		top: 6px !important;
 		z-index: 30 !important;
+		color: black;
 	}
 
 	:global(.color-picker-input) :global(.slider-wrapper) {
@@ -65,6 +66,7 @@ function open() {
 
 	:global(.color-picker-input) :global(.input-container) > :global(input) {
 		background-color: #ffffff;
-		border: 1px solid #d1d5db;
+		border: 1px solid #d1d5db !important;
 		border-radius: 6px;
+		color: black !important;
 	}</style>

package/package/components/apps/editor/settingsPanel/inputEditor/DBTableSelect.svelte

@@ -0,0 +1,42 @@
+<script>import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../../defaults';
+import Select from '../../../svelte-select/lib/index';
+import DarkModeObserver from '../../../../DarkModeObserver.svelte';
+export let componentInput;
+export let selectOptions = undefined;
+export let id;
+let selectedValue = componentInput?.value ?? undefined;
+let darkMode = false;
+$: sortedOptions = Array.isArray(selectOptions)
+    ? selectOptions?.sort((a, b) => a.localeCompare(b))
+    : [];
+</script>
+
+<DarkModeObserver bind:darkMode />
+
+{#if selectOptions && componentInput}
+	<Select
+		portal={false}
+		value={selectedValue}
+		on:change={(e) => {
+			selectedValue = e.detail.value
+			if (componentInput?.type === 'static') {
+				componentInput.value = e.detail.value
+			}
+		}}
+		on:clear={() => {
+			if (componentInput?.type === 'static') {
+				componentInput.value = undefined
+			}
+		}}
+		items={sortedOptions}
+		class="text-clip grow min-w-0"
+		placeholder="Select a table"
+		inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+		containerStyles={darkMode
+			? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
+			: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
+		clearable
+	/>
+{:else}
+	<input {id} class="w-full p-2 border rounded-md" type="text" />
+{/if}

package/package/components/apps/editor/settingsPanel/inputEditor/DBTableSelect.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { StaticInput, StaticOptions } from '../../../inputType';
+declare const __propDef: {
+    props: {
+        componentInput: StaticInput<any> | undefined;
+        selectOptions?: StaticOptions['selectOptions'] | undefined;
+        id: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DbTableSelectProps = typeof __propDef.props;
+export type DbTableSelectEvents = typeof __propDef.events;
+export type DbTableSelectSlots = typeof __propDef.slots;
+export default class DbTableSelect extends SvelteComponent<DbTableSelectProps, DbTableSelectEvents, DbTableSelectSlots> {
+}
+export {};

package/package/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte

@@ -5,11 +5,14 @@ import { inferDeps } from '../../appUtilsInfer';
 import { Maximize2, X } from 'lucide-svelte';
 import { Drawer } from '../../../../common';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
+import Toggle from '../../../../Toggle.svelte';
 export let componentInput;
 export let id;
 export let field;
 export let fixedOverflowWidgets = true;
 export let acceptSelf = false;
+export let recomputeOnInputChanged = true;
+export let showOnDemandOnlyToggle = false;
 const { onchange, worldStore, state, app } = getContext('AppViewerContext');
 const { evalPreview } = getContext('AppEditorContext');
 let editor;
@@ -130,9 +133,28 @@ let focus = false;
 			or surround with <pre class="font-mono text-2xs inline">{'()'}</pre></div
 		>
 	{/if}
-	{#if componentInput.connections?.length > 0}
+
+	{#if componentInput.connections?.length > 0 && recomputeOnInputChanged}
 		<div class="flex flex-wrap gap-2 items-center">
-			<div class="text-2xs text-tertiary">Re-evaluated on changes to:</div>
+			{#if showOnDemandOnlyToggle}
+				<Toggle
+					size="xs"
+					color="blue"
+					disabled={!recomputeOnInputChanged}
+					checked={!componentInput.onDemandOnly}
+					on:change={() => {
+						if (componentInput) {
+							componentInput.onDemandOnly = !componentInput.onDemandOnly
+							if (!componentInput.onDemandOnly) {
+								delete componentInput.onDemandOnly
+							}
+						}
+					}}
+				/>
+			{/if}
+			<div class="text-2xs text-tertiary"
+				>{componentInput.onDemandOnly ? 'NOT' : ''} Re-evaluated on changes to:</div
+			>
 			<div class="flex flex-wrap gap-1">
 				{#each componentInput.connections as connection (connection.componentId + '-' + connection.id)}
 					<span class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium border"

package/package/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte.d.ts

@@ -7,6 +7,8 @@ declare const __propDef: {
         field: string;
         fixedOverflowWidgets?: boolean | undefined;
         acceptSelf?: boolean | undefined;
+        recomputeOnInputChanged?: boolean | undefined;
+        showOnDemandOnlyToggle?: boolean | undefined;
         setCode?: ((code: string) => void) | undefined;
     };
     events: {

package/package/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -17,6 +17,8 @@ import ChartJSWizard from '../../../../wizards/ChartJSWizard.svelte';
 import AgChartWizard from '../../../../wizards/AgChartWizard.svelte';
 import DBExplorerWizard from '../../../../wizards/DBExplorerWizard.svelte';
 import Label from '../../../../Label.svelte';
+import DateTimeInput from '../../../../DateTimeInput.svelte';
+import DBTableSelect from './DBTableSelect.svelte';
 export let componentInput;
 export let fieldType = undefined;
 export let subFieldType = undefined;
@@ -36,27 +38,35 @@ $: componentInput && onchange?.();
 			<textarea use:autosize on:keydown|stopPropagation bind:value={componentInput.value} />
 		{:else if fieldType === 'date'}
 			<input on:keydown|stopPropagation type="date" bind:value={componentInput.value} />
+		{:else if fieldType === 'time'}
+			<input on:keydown|stopPropagation type="time" bind:value={componentInput.value} />
+		{:else if fieldType === 'datetime'}
+			<DateTimeInput bind:value={componentInput.value} />
 		{:else if fieldType === 'boolean'}
 			<Toggle bind:checked={componentInput.value} size="xs" class="mt-2" />
 		{:else if fieldType === 'select' && selectOptions}
-			<select on:keydown|stopPropagation bind:value={componentInput.value}>
-				{#each selectOptions ?? [] as option}
-					{#if typeof option == 'string'}
-						<option value={option}>
-							{option}
-						</option>
-					{:else}
-						<option value={option.value}>
-							{option.label}
-						</option>
-					{/if}
-				{/each}
-			</select>
+			{#if subFieldType === 'db-table'}
+				<DBTableSelect bind:componentInput {selectOptions} {id} />
+			{:else}
+				<select on:keydown|stopPropagation bind:value={componentInput.value}>
+					{#each selectOptions ?? [] as option}
+						{#if typeof option == 'string'}
+							<option value={option}>
+								{option}
+							</option>
+						{:else}
+							<option value={option.value}>
+								{option.label}
+							</option>
+						{/if}
+					{/each}
+				</select>
+			{/if}
 		{:else if fieldType === 'icon-select'}
 			<IconSelectInput bind:componentInput />
 		{:else if fieldType === 'tab-select'}
 			<TabSelectInput bind:componentInput />
-		{:else if fieldType === 'resource' && subFieldType !== 's3'}
+		{:else if fieldType === 'resource' && subFieldType && ['mysql', 'postgres', 'ms_sql_server', 'snowflake', 'bigquery'].includes(subFieldType)}
 			<ResourcePicker
 				initialValue={componentInput.value?.split('$res:')?.[1] || ''}
 				on:change={(e) => {
@@ -70,7 +80,7 @@ $: componentInput && onchange?.();
 					}
 				}}
 				showSchemaExplorer
-				resourceType="postgresql"
+				resourceType={subFieldType === 'postgres' ? 'postgresql' : subFieldType}
 			/>
 		{:else if fieldType === 'resource' && subFieldType === 's3'}
 			<ResourcePicker

package/package/components/apps/editor/settingsPanel/script/BackgroundScriptSettings.svelte

@@ -20,7 +20,7 @@ $: runnable && ($app = $app);
 </script>
 
 <div class={'border-y divide-y '}>
-	<ScriptSettingHeader name={runnable.name} />
+	<ScriptSettingHeader name={runnable.name} noBorder />
 	<div class="p-2">
 		<ScriptTransformer bind:appInput={runnable} {id} />
 		{#if runnable.type == 'runnableByPath' || runnable.inlineScript}

package/package/components/apps/editor/settingsPanel/script/ComponentScriptSettings.svelte

@@ -44,7 +44,7 @@ function updateAutoRefresh() {
 		<div class="flex items-center justify-between w-full">
 			<div class="flex flex-row items-center gap-2 text-xs"> Hide Refresh Button </div>
 
-			<Toggle bind:checked={appInput.hideRefreshButton} size="xs" />
+			<Toggle bind:checked={appInput.hideRefreshButton} size="xs" class="my-2" />
 		</div>
 	{/if}
 	{#if hasScript}

package/package/components/apps/editor/settingsPanel/script/shared/ScriptSettingHeader.svelte

@@ -1,10 +1,17 @@
 <script>import { FunctionSquare } from 'lucide-svelte';
 import ScriptSettingsActions from './ScriptSettingsActions.svelte';
+import { twMerge } from 'tailwind-merge';
 export let name;
 export let actions = [];
+export let noBorder = false;
 </script>
 
-<div class="flex flex-row px-2 py-1 justify-between bg-surface-secondary border rounded">
+<div
+	class={twMerge(
+		'flex flex-row px-2 py-1 justify-between bg-surface-secondary  ',
+		noBorder ? '' : 'border rounded'
+	)}
+>
 	<div class="flex flex-row gap-2 items-center min-w-0">
 		<FunctionSquare size={16} color="#3b82f6" />
 		<span class="text-xs font-semibold truncate">

package/package/components/apps/editor/settingsPanel/script/shared/ScriptSettingHeader.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         name: string;
         actions?: ActionType[] | undefined;
+        noBorder?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte

@@ -18,11 +18,24 @@ $: computeOnSuccessEvents($app, id);
 function computeOnSuccessEvents(app, _id) {
     const nr = [];
     getAllGridItems(app).forEach((x) => {
+        if (!(x.data && typeof x.data == 'object')) {
+            return;
+        }
         if (`recomputeIds` in x.data) {
             if (x.data.recomputeIds?.includes(id)) {
                 nr.push(`success of ${x.id}`);
             }
         }
+        if (`onToggle` in x.data) {
+            if (x.data.onToggle?.includes(id)) {
+                nr.push(`toggle of ${x.id}`);
+            }
+        }
+        if (`onSelect` in x.data) {
+            if (x.data.onSelect?.includes(id)) {
+                nr.push(`select of ${x.id}`);
+            }
+        }
     });
     onSuccessEvents = nr;
 }