windmill-components 1.309.7 → 1.339.2

package/package/components/apps/editor/componentsPanel/quickStyleProperties.js

@@ -518,6 +518,8 @@ export const quickStyleProperties = {
     },
     aggridcomponent: {},
     aggridcomponentee: {},
+    aggridinfinitecomponent: {},
+    aggridinfinitecomponentee: {},
     buttoncomponent: {
         button: buttonDefaultProps,
         container: containerDefaultProps
@@ -639,6 +641,9 @@ export const quickStyleProperties = {
     multiselectcomponent: {
         input: inputDefaultProps
     },
+    multiselectcomponentv2: {
+        input: inputDefaultProps
+    },
     numberinputcomponent: {
         input: inputDefaultProps
     },

package/package/components/apps/editor/contextPanel/components/OutputHeader.svelte

@@ -27,11 +27,11 @@ const hoverColor = {
 };
 const openBackground = {
     blue: 'bg-blue-50 dark:bg-frost-800',
-    indigo: 'bg-indigo-50 dark:bg-indigo-800'
+    indigo: 'bg-indigo-50 dark:bg-indigo-700/50'
 };
 const manuallyOpenColor = {
-    blue: 'text-primary bg-gray-300 rounded-sm',
-    indigo: 'text-primary bg-gray-300 rounded-sm'
+    blue: 'text-primary dark:text-gray-50 bg-gray-300 rounded-sm dark:bg-gray-600',
+    indigo: 'text-primary bg-gray-300 dark:text-gray-50 rounded-sm dark:bg-gray-600'
 };
 const idClass = {
     blue: 'bg-blue-500 text-white',
@@ -69,7 +69,9 @@ function renameId(newId) {
     }
     if (item?.data.type == 'aggridcomponent' ||
         item?.data.type == 'aggridcomponentee' ||
-        item?.data.type == 'dbexplorercomponent') {
+        item?.data.type == 'dbexplorercomponent' ||
+        item?.data.type == 'aggridinfinitecomponent' ||
+        item?.data.type == 'aggridinfinitecomponentee') {
         for (let c of item.data.actions ?? []) {
             let old = c.id;
             c.id = c.id.replace(id + '_', newId + '_');
@@ -95,7 +97,9 @@ function renameComponent(from, to, data) {
     }
     if ((data.type == 'aggridcomponent' ||
         data.type == 'aggridcomponentee' ||
-        data.type == 'dbexplorercomponent') &&
+        data.type == 'dbexplorercomponent' ||
+        data.type == 'aggridinfinitecomponent' ||
+        data.type == 'aggridinfinitecomponentee') &&
         Array.isArray(data.actions)) {
         for (let c of data.actions) {
             renameComponent(from, to, c);

package/package/components/apps/editor/contextPanel/components/TableActionsOutput.svelte

@@ -10,7 +10,7 @@ export let gridItem;
 			{/each}
 		</div>
 	{/if}
-	{#if (gridItem.data.type === 'aggridcomponent' || gridItem.data.type === 'aggridcomponentee' || gridItem.data.type === 'dbexplorercomponent') && gridItem.data.actions?.length > 0}
+	{#if (gridItem.data.type === 'aggridcomponent' || gridItem.data.type === 'aggridcomponentee' || gridItem.data.type === 'dbexplorercomponent' || gridItem.data.type === 'aggridinfinitecomponent' || gridItem.data.type === 'aggridinfinitecomponentee') && gridItem.data.actions?.length > 0}
 		<div class="ml-2 border-l">
 			{#each gridItem.data.actions as action, index}
 				<Output id={action.id} first={index === 0} label="Table action" />

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

@@ -65,16 +65,55 @@ function preConnect(newFields) {
         const componentOutputs = $worldStore?.outputsById[id];
         if (componentOutputs.currentStepIndex) {
             newFields['stepIndex'] = {
-                type: 'connected',
-                connection: {
-                    componentId: id,
-                    path: 'currentStepIndex'
-                },
-                value: componentOutputs.currentStepIndex.peak(),
+                type: 'evalv2',
+                expr: `${id}.currentStepIndex`,
                 fieldType: 'number'
             };
         }
     }
+    else if (componentType === 'aggridinfinitecomponent' ||
+        componentType === 'aggridinfinitecomponentee') {
+        newFields['offset'] = {
+            type: 'evalv2',
+            expr: `${id}.params.offset`,
+            fieldType: 'number'
+        };
+        newFields['limit'] = {
+            type: 'evalv2',
+            expr: `${id}.params.limit`,
+            fieldType: 'number'
+        };
+        newFields['orderBy'] = {
+            type: 'evalv2',
+            expr: `${id}.params.orderBy`,
+            fieldType: 'string'
+        };
+        newFields['isDesc'] = {
+            type: 'evalv2',
+            expr: `${id}.params.isDesc`,
+            fieldType: 'boolean'
+        };
+        newFields['search'] = {
+            type: 'evalv2',
+            expr: `${id}.params.search`,
+            fieldType: 'string'
+        };
+    }
+}
+function assertConnections(newFields) {
+    if (componentType === 'aggridinfinitecomponent' ||
+        componentType === 'aggridinfinitecomponentee') {
+        const fields = ['offset', 'limit', 'orderBy', 'isDesc', 'search'];
+        fields.forEach((field) => {
+            if (newFields[field]?.type !== 'evalv2') {
+                newFields[field] = {
+                    type: 'evalv2',
+                    expr: `${id}.params.${field}`,
+                    fieldType: newFields[field]?.fieldType ?? 'string'
+                };
+            }
+        });
+    }
 }
 async function loadSchemaAndInputsByName() {
     if (syncFields && inlineScript) {
@@ -85,6 +124,7 @@ async function loadSchemaAndInputsByName() {
         if (!hadPreviousFields && Object.keys(newFields).length > 0) {
             preConnect(newFields);
         }
+        assertConnections(newFields);
         if (!deepEqual(newFields, fields)) {
             fields = newFields;
             $stateId++;

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

@@ -30,7 +30,7 @@ export let gridItem;
 	{/each}
 {/if}
 
-{#if (gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee' || gridItem?.data?.type === 'dbexplorercomponent') && Array.isArray(gridItem.data.actions)}
+{#if (gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee' || gridItem?.data?.type === 'dbexplorercomponent' || gridItem?.data?.type === 'aggridinfinitecomponent' || gridItem?.data?.type === 'aggridinfinitecomponentee') && Array.isArray(gridItem.data.actions)}
 	{#each gridItem.data.actions as actionButton, index (index)}
 		{#if actionButton?.id === $selectedComponentInEditor || actionButton?.id + '_transformer' === $selectedComponentInEditor}
 			<InlineScriptEditorPanel

package/package/components/apps/editor/inlineScriptsPanel/utils.js

@@ -48,7 +48,9 @@ function processGridItemRunnable(gridItem, list) {
         }
         if (component.type === 'aggridcomponent' ||
             component.type === 'aggridcomponentee' ||
-            component.type === 'dbexplorercomponent') {
+            component.type === 'dbexplorercomponent' ||
+            component.type === 'aggridinfinitecomponent' ||
+            component.type === 'aggridinfinitecomponentee') {
             component.actions?.forEach((actionButton) => {
                 if (actionButton.componentInput?.type !== 'runnable') {
                     return;

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

@@ -12,7 +12,7 @@ export let component;
 		{#if component.horizontalAlignment}
 			<ToggleButtonGroup
 				noWFull
-				on:selected={() => (component = component)}
+				on:selected={() => ($app = $app)}
 				bind:selected={component.horizontalAlignment}
 			>
 				<ToggleButton value="left" icon={AlignStartVertical} />

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

@@ -25,7 +25,7 @@ let collapsed = true;
 		</div>
 
 		{#if collapsed}
-			<div class="flex flex-row gap-1">
+			<div class="flex flex-row gap-1 flex-wrap">
 				{#each componentControls as control}
 					<span class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium border">
 						{control.title}

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

@@ -20,12 +20,15 @@ function applyConnection(connection) {
         ...componentInput,
         type: 'evalv2',
         expr: expr,
-        connections: [{ componentId: connection.componentId, id: connection.path.split('.')[0].split('[')[0] }]
+        connections: [
+            { componentId: connection.componentId, id: connection.path.split('.')[0].split('[')[0] }
+        ]
     };
     evalV2editor?.setCode(expr);
     $app = $app;
 }
 let clientWidth;
+const iconOnlyThreshold = 300;
 </script>
 
 {#if componentInput.fieldType !== 'any'}
@@ -61,7 +64,7 @@ let clientWidth;
 						label="Static"
 						value="static"
 						disabled={disableStatic}
-						iconOnly={clientWidth < 250}
+						iconOnly={clientWidth < iconOnlyThreshold}
 						icon={Pen}
 					/>
 				{/if}
@@ -69,21 +72,21 @@ let clientWidth;
 					<ToggleButton
 						value="connected"
 						icon={Plug2}
-						iconOnly={clientWidth < 250}
+						iconOnly={clientWidth < iconOnlyThreshold}
 						label="Connect"
 					/>
 				{/if}
 				<ToggleButton
 					value="evalv2"
 					icon={FunctionSquare}
-					iconOnly={clientWidth < 250}
+					iconOnly={clientWidth < iconOnlyThreshold}
 					label="Eval"
 				/>
 
 				<ToggleButton
 					value="runnable"
 					icon={Code}
-					iconOnly={clientWidth < 250}
+					iconOnly={clientWidth < iconOnlyThreshold}
 					label="Compute"
 					id="data-source-compute"
 				/>

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

@@ -5,7 +5,7 @@ import InputsSpecsEditor from './InputsSpecsEditor.svelte';
 import TableActions from './TableActions.svelte';
 import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
 import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
-import { classNames, getModifierKey } from '../../../../utils';
+import { classNames, getModifierKey, isMac } from '../../../../utils';
 import { buildExtraLib } from '../../utils';
 import Recompute from './Recompute.svelte';
 import Tooltip from '../../../Tooltip.svelte';
@@ -34,6 +34,8 @@ import ComponentPanelDataSource from './ComponentPanelDataSource.svelte';
 import MenuItems from './MenuItems.svelte';
 import DecisionTreeGraphEditor from './DecisionTreeGraphEditor.svelte';
 import GridAgChartsLicenseKe from './GridAgChartsLicenseKe.svelte';
+import Toggle from '../../../Toggle.svelte';
+import ContextVariables from './ContextVariables.svelte';
 export let componentSettings = undefined;
 export let onDelete = undefined;
 export let noGrid = false;
@@ -127,9 +129,6 @@ function transformToFrontend() {
         componentSettings.item.data.componentInput = appInput;
     }
 }
-function isMac() {
-    return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-}
 </script>
 
 <svelte:window on:keydown={keydown} />
@@ -251,6 +250,8 @@ function isMac() {
 							{/if}
 						</div>
 					{/if}
+					<ContextVariables type={component.type} />
+
 					{#key $stateId}
 						{#if componentSettings.item.data.componentInput?.type === 'runnable'}
 							{#if Object.keys(componentSettings.item.data.componentInput.fields ?? {}).length > 0}
@@ -274,6 +275,13 @@ function isMac() {
 										recomputeOnInputChanged={componentSettings.item.data.componentInput
 											.recomputeOnInputChanged}
 										showOnDemandOnlyToggle
+										acceptSelf={component.type === 'aggridinfinitecomponent' ||
+											component.type === 'aggridinfinitecomponentee' ||
+											component.type === 'steppercomponent'}
+										overridenByComponent={component.type === 'aggridinfinitecomponent' ||
+										component.type === 'aggridinfinitecomponentee'
+											? ['offset', 'limit', 'orderBy', 'isDesc', 'search']
+											: []}
 									/>
 								</div>
 							{/if}
@@ -326,6 +334,11 @@ function isMac() {
 			/>
 		{:else if componentSettings.item.data.type === 'aggridcomponent'}
 			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
+		{:else if componentSettings.item.data.type === 'aggridinfinitecomponent'}
+			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
+		{:else if componentSettings.item.data.type === 'aggridinfinitecomponentee'}
+			<GridAgGridLicenseKey bind:license={componentSettings.item.data.license} />
+			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
 		{:else if componentSettings.item.data.type === 'dbexplorercomponent'}
 			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
 		{:else if componentSettings.item.data.type === 'tablecomponent' && Array.isArray(componentSettings.item.data.actionButtons)}
@@ -355,6 +368,22 @@ function isMac() {
 				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"
@@ -389,6 +418,27 @@ function isMac() {
 						Show
 					</Button>
 				</div>
+				<div class="flex gap-2 items-center">
+					<div class="!text-2xs">Full height</div>
+					{#if componentSettings?.item?.[12]?.fullHeight !== undefined}
+						<Toggle
+							bind:checked={componentSettings.item[12].fullHeight}
+							size="xs"
+							options={{
+								right: 'Desktop'
+							}}
+						/>
+					{/if}
+					{#if componentSettings?.item?.[3]?.fullHeight !== undefined}
+						<Toggle
+							bind:checked={componentSettings.item[3].fullHeight}
+							size="xs"
+							options={{
+								right: 'Mobile'
+							}}
+						/>
+					{/if}
+				</div>
 				<AlignmentEditor bind:component={componentSettings.item.data} />
 				{#if viewCssOptions}
 					<div transition:slide|local class="w-full">

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

@@ -0,0 +1,61 @@
+<script>import Popover from '../../../Popover.svelte';
+import Tooltip from '../../../Tooltip.svelte';
+export let type;
+const tables = [
+    'aggridcomponent',
+    'aggridcomponentee',
+    'dbexplorercomponent',
+    'aggridinfinitecomponent',
+    'aggridinfinitecomponentee'
+];
+const contextVariables = [];
+if (tables.includes(type)) {
+    contextVariables.push({
+        label: 'row',
+        description: 'The current row of a table. Row is an object with keys index and value.'
+    });
+}
+else if (type === 's3fileinputcomponent' || type === 'fileinputcomponent') {
+    contextVariables.push({
+        label: 'file',
+        description: 'The current file being processed.'
+    });
+}
+else if (type === 'containercomponent') {
+    contextVariables.push({
+        label: 'group',
+        description: 'The group name of the container.'
+    });
+}
+else if (type === 'listcomponent') {
+    contextVariables.push({
+        label: 'iter',
+        description: 'The current iteration of the list. Iter is an object with keys index and value.'
+    });
+}
+</script>
+
+{#if contextVariables.length > 0}
+	<div class="my-2">
+		<div class="text-xs font-semibold flex flex-row gap-1 items-center">
+			<div class="mb-1"> Context </div>
+			<Tooltip small light>
+				Context are variables available in any expressions of config and runnable inputs that are
+				specific to this particular component. Hover over the variables to see their descriptions.
+			</Tooltip>
+		</div>
+		<div class="flex flex-row gap-1">
+			{#each contextVariables as contextVariable}
+				<Popover>
+					<svelte:fragment slot="text">
+						{contextVariable.description}
+					</svelte:fragment>
+
+					<span class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium border">
+						{contextVariable.label}
+					</span>
+				</Popover>
+			{/each}
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        type: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ContextVariablesProps = typeof __propDef.props;
+export type ContextVariablesEvents = typeof __propDef.events;
+export type ContextVariablesSlots = typeof __propDef.slots;
+export default class ContextVariables extends SvelteComponent<ContextVariablesProps, ContextVariablesEvents, ContextVariablesSlots> {
+}
+export {};

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

@@ -31,16 +31,18 @@ setContext('DecisionTreeEditor', { selectedNodeId });
 		<Splitpanes>
 			<Pane size={60}>
 				<div class="w-full h-full" bind:clientWidth={paneWidth} bind:clientHeight={paneHeight}>
-					<DecisionTreePreview
-						bind:nodes
-						bind:component
-						{rebuildOnChange}
-						{paneHeight}
-						{paneWidth}
-						on:render={() => {
-							renderCount++
-						}}
-					/>
+					{#if paneWidth && paneHeight}
+						<DecisionTreePreview
+							bind:nodes
+							bind:component
+							{rebuildOnChange}
+							{paneHeight}
+							{paneWidth}
+							on:render={() => {
+								renderCount++
+							}}
+						/>
+					{/if}
 				</div>
 			</Pane>
 			<Pane size={40}>

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

@@ -1,44 +1,41 @@
 <script>import { getContext } from 'svelte';
-import { deleteGridItem } from '../appUtils';
+import { deleteGridItem, findComponentSettings } from '../appUtils';
 import { push } from '../../../../history';
-export let componentSettings = [];
 export let onDelete = undefined;
 export let noGrid = false;
 const { app, runnableComponents, selectedComponent, worldStore, focusedGrid, errorByComponent, componentControl } = getContext('AppViewerContext');
 const { history, movingcomponents } = getContext('AppEditorContext');
 export function removeGridElement() {
+    const id = $selectedComponent?.[0];
+    const componentSetting = findComponentSettings($app, id);
     push(history, $app);
-    componentSettings?.forEach((componentSetting) => {
-        const id = componentSetting?.item?.id;
-        const onDeleteComponentControl = id ? $componentControl[id]?.onDelete : undefined;
-        if (onDeleteComponentControl) {
-            onDeleteComponentControl();
+    const onDeleteComponentControl = id ? $componentControl[id]?.onDelete : undefined;
+    if (onDeleteComponentControl) {
+        onDeleteComponentControl();
+    }
+    if (onDelete) {
+        onDelete();
+    }
+    if (id) {
+        delete $worldStore.outputsById[id];
+        delete $errorByComponent[id];
+        if ($movingcomponents?.includes(id)) {
+            $movingcomponents = $movingcomponents.filter((_id) => _id !== id);
         }
-        if (onDelete) {
-            onDelete();
+    }
+    $selectedComponent = undefined;
+    $focusedGrid = undefined;
+    if (componentSetting?.item && !noGrid) {
+        let ids = deleteGridItem($app, componentSetting?.item.data, componentSetting?.parent);
+        for (const key of ids) {
+            delete $runnableComponents[key];
         }
-        let cId = componentSetting?.item.id;
-        if (cId) {
-            delete $worldStore.outputsById[cId];
-            delete $errorByComponent[cId];
-            if ($movingcomponents?.includes(cId)) {
-                $movingcomponents = $movingcomponents.filter((id) => id !== cId);
-            }
-        }
-        $selectedComponent = undefined;
-        $focusedGrid = undefined;
-        if (componentSetting?.item && !noGrid) {
-            let ids = deleteGridItem($app, componentSetting?.item.data, componentSetting?.parent);
-            for (const key of ids) {
-                delete $runnableComponents[key];
-            }
-        }
-        if (componentSetting?.item?.data?.id) {
-            delete $runnableComponents[componentSetting?.item?.data?.id];
-        }
-        $app = $app;
-        $runnableComponents = $runnableComponents;
-        onDelete?.();
-    });
+    }
+    if (componentSetting?.item?.data?.id) {
+        delete $runnableComponents[componentSetting?.item?.data?.id];
+    }
+    $app = $app;
+    $runnableComponents = $runnableComponents;
+    onDelete?.();
 }
 </script>

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

@@ -1,11 +1,6 @@
 import { SvelteComponent } from "svelte";
-import type { GridItem } from '../../types';
 declare const __propDef: {
     props: {
-        componentSettings?: {
-            item: GridItem;
-            parent: string;
-        }[] | any;
         onDelete?: (() => void) | undefined;
         noGrid?: boolean | undefined;
         removeGridElement?: (() => void) | undefined;

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

@@ -14,12 +14,16 @@ let dragDisabled = true;
 let items = conditions.slice(0, -1).map((condition, index) => {
     return { value: condition, id: generateRandomString(), originalIndex: index };
 });
-$: conditions = items.map((item) => item.value).concat([{
+$: 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,7 +73,7 @@ function deleteSubgrid(index) {
         }
     }
     $runnableComponents = $runnableComponents;
-    for (let i = index; i < items.length - 1; i++) {
+    for (let i = index; i < items.length; i++) {
         $app.subgrids[`${component.id}-${i}`] = $app.subgrids[`${component.id}-${i + 1}`];
     }
     // Remove the corresponding item from the items array
@@ -84,7 +88,7 @@ function deleteSubgrid(index) {
     $app = $app;
 }
 function addCondition() {
-    const numberOfConditions = items.length;
+    const numberOfConditions = conditions.length;
     if (!$app.subgrids) {
         $app.subgrids = {};
     }
@@ -102,7 +106,7 @@ function addCondition() {
         id: generateRandomString(),
         originalIndex: items.length
     });
-    component.numberOfSubgrids = items.length;
+    component.numberOfSubgrids = items.length + 1;
 }
 </script>
 
@@ -130,27 +134,26 @@ function addCondition() {
 				<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}
-						/>
+							<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>
+							<pre><code>{condition?.['expr']}</code></pre>
 						{/if}
-
 					</div>
 
 					<div class="flex flex-col justify-center gap-2">
@@ -175,7 +178,6 @@ function addCondition() {
 						</div>
 					</div>
 				</div>
-
 			{/each}
 		</section>
 		<div class="border rounded-md p-3 mb-2">

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

@@ -164,7 +164,7 @@ function handleKeyDown(event) {
 					</div>
 
 					{#if canDisableTabs && disabledTabs}
-						<GridTabDisabled bind:field={disabledTabs[index]} id={component.id} />
+						<GridTabDisabled {index} bind:field={disabledTabs[index]} id={component.id} />
 					{/if}
 				</div>
 			{/each}

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

@@ -3,6 +3,7 @@ import InputsSpecEditor from './InputsSpecEditor.svelte';
 import { slide } from 'svelte/transition';
 export let id;
 export let field;
+export let index;
 let disablable = field && !(field?.type === 'static' && field?.value === false);
 </script>
 
@@ -33,7 +34,7 @@ let disablable = field && !(field?.type === 'static' && field?.value === false);
 {#if disablable}
 	<div transition:slide|local>
 		<InputsSpecEditor
-			key={`Tab disabled`}
+			key="tabDisabled {index}"
 			bind:componentInput={field}
 			{id}
 			userInputEnabled={false}