fix: improve conditional wrapper

frontend/src/lib/components/apps/editor/component/components.ts

@@ -2776,14 +2776,16 @@ This is a paragraph.
 			numberOfSubgrids: 2,
 			conditions: [
 				{
-					type: 'eval',
+					type: 'evalv2',
 					expr: 'false',
-					fieldType: 'boolean'
+					fieldType: 'boolean',
+					connections: []
 				},
 				{
-					type: 'eval',
+					type: 'evalv2',
 					expr: 'true',
-					fieldType: 'boolean'
+					fieldType: 'boolean',
+					connections: []
 				}
 			] as AppInputSpec<'boolean', boolean>[]
 		}

frontend/src/lib/components/apps/editor/componentsPanel/componentControlUtils.ts

@@ -60,19 +60,19 @@ const close = {
 const validate = {
 	title: 'validate',
 	description: 'Validate a specific field of a form',
-	example: 'validate(id: string, key: string)',
+	example: 'validate(id: string, key: string)'
 }
 
 const invalidate = {
 	title: 'invalidate',
 	description: 'Invalidate a specific field of a form',
-	example: 'invalidate(id: string, key: string, error: string)',
+	example: 'invalidate(id: string, key: string, error: string)'
 }
 
 const validateAll = {
 	title: 'validateAll',
 	description: 'Validate all fields of a form',
-	example: 'validateAll(id: string, key: string)',
+	example: 'validateAll(id: string, key: string)'
 }
 
 export function getComponentControl(type: keyof typeof components): Array<ComponentFunction> {
@@ -84,7 +84,6 @@ export function getComponentControl(type: keyof typeof components): Array<Compon
 		case 'selecttabcomponent':
 			return [setTab, setValue]
 		case 'conditionalwrapper':
-			return [setTab]
 		case 'steppercomponent':
 			return [setTab]
 		case 'modalcomponent':

frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -105,12 +105,17 @@
 		(componentSettings?.item?.data?.componentInput?.type === 'template' ||
 			componentSettings?.item?.data?.componentInput?.type === 'templatev2') &&
 		$worldStore
-			? buildExtraLib($worldStore?.outputsById ?? {}, componentSettings?.item?.data?.id, $state, false)
+			? buildExtraLib(
+					$worldStore?.outputsById ?? {},
+					componentSettings?.item?.data?.id,
+					$state,
+					false
+			  )
 			: undefined
 
-// 	`
-// /** The current's app state */
-// const state: Record<string, any> = ${JSON.stringify(state)};`
+	// 	`
+	// /** The current's app state */
+	// const state: Record<string, any> = ${JSON.stringify(state)};`
 
 	function keydown(event: KeyboardEvent) {
 		const { key, metaKey } = event

frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte

@@ -89,14 +89,14 @@
 		}
 
 		// Remove the corresponding item from the items array
-		items = items.filter((item) => item.originalIndex !== index)
+		const nitems = items.filter((item) => item.originalIndex !== index)
 
-		component.numberOfSubgrids = items.length
+		component.numberOfSubgrids = nitems.length
 		// Update the originalIndex of the remaining items
-		items.forEach((item, i) => {
+		nitems.forEach((item, i) => {
 			item.originalIndex = i
 		})
-		items = items
+		items = nitems
 
 		delete $app!.subgrids![`${component.id}-${items.length}`]
 		$app = $app
@@ -109,24 +109,21 @@
 			$app.subgrids = {}
 		}
 
-		const lastSubgrid = JSON.parse(
-			JSON.stringify($app.subgrids[`${component.id}-${numberOfConditions - 1}`])
-		)
-
+		$app.subgrids[`${component.id}-${numberOfConditions}`] =
+			$app.subgrids[`${component.id}-${numberOfConditions - 1}`]
 		$app.subgrids[`${component.id}-${numberOfConditions - 1}`] = []
-		$app.subgrids[`${component.id}-${numberOfConditions}`] = lastSubgrid
-		component.numberOfSubgrids = items.length
 
 		const newCondition: AppInputSpec<'boolean', boolean> = {
-			type: 'eval',
+			type: 'evalv2',
 			expr: 'false',
-			fieldType: 'boolean'
+			fieldType: 'boolean',
+			connections: []
 		}
 
 		items.splice(conditions.length - 1, 0, {
 			value: newCondition,
 			id: generateRandomString(),
-			originalIndex: items.length - 1
+			originalIndex: items.length
 		})
 
 		component.numberOfSubgrids = items.length