flatten

frontend/src/lib/components/apps/editor/SubGridEditor.svelte

@@ -6,11 +6,9 @@
 	import type { AppEditorContext, GridItem } from '../types'
 	import Component from './component/Component.svelte'
 
-	export let subGrid: GridItem[]
 	export let containerHeight: number
 	export let noPadding = false
-	export let parentId: string
-	export let index: number
+	export let id: string
 
 	const dispatch = createEventDispatcher()
 

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

@@ -175,7 +175,7 @@ export const components: Record<AppComponent['type'], AppComponentConfig> = {
 			},
 			componentInput: undefined,
 			card: false,
-			subGrids: [[]]
+			subgrids: 1
 		}
 	},
 	textcomponent: {
@@ -1027,7 +1027,7 @@ Hello \${ctx.username}
 			},
 			componentInput: undefined,
 			card: false,
-			subGrids: [[], []],
+			subgrids: 2,
 			tabs: ['First tab', 'Second tab']
 		}
 	},

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte

@@ -9,7 +9,6 @@
 	export let selectedScriptComponentId: string | undefined = undefined
 </script>
 
-{gridItems}
 {#if gridItems}
 	{#each gridItems as gridComponent, index (index)}
 		{#if gridComponent.data}
@@ -19,10 +18,10 @@
 					bind:componentInput={gridComponent.data.componentInput}
 				/>
 			{:else if gridComponent.data.subGrids}
-				<!-- <InlineScriptEditorList
+				<InlineScriptEditorList
 					{selectedScriptComponentId}
 					bind:subgrids={gridComponent.data.subGrids}
-				/> -->
+				/>
 			{/if}
 
 			{#if gridComponent.data.type === 'tablecomponent'}

frontend/src/lib/components/apps/types.ts

@@ -42,14 +42,14 @@ export interface BaseAppComponent extends Partial<Aligned> {
 	configuration: Record<
 		string,
 		GeneralAppInput &
-			(
-				| StaticAppInput
-				| ConnectedAppInput
-				| UserAppInput
-				| RowAppInput
-				| EvalAppInput
-				| UploadAppInput
-			)
+		(
+			| StaticAppInput
+			| ConnectedAppInput
+			| UserAppInput
+			| RowAppInput
+			| EvalAppInput
+			| UploadAppInput
+		)
 	>
 	card: boolean | undefined
 	customCss?: ComponentCustomCSS
@@ -59,7 +59,7 @@ export interface BaseAppComponent extends Partial<Aligned> {
 	 * *For example when the component has a popup like `Select`*
 	 */
 	softWrap?: boolean
-	subGrids?: GridItem[][]
+	subgrids?: number
 }
 
 export type ComponentSet = {
@@ -99,6 +99,7 @@ export type App = {
 		fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>
 	}>
 	css?: Record<'viewer' | 'grid' | AppComponent['type'], ComponentCustomCSS>
+	subgrids?: Record<string, GridItem[]>
 }
 
 export type ConnectingInput = {

frontend/src/lib/components/apps/utils.ts

@@ -16,16 +16,7 @@ import type { Output } from './rx'
 import type { App, GridItem } from './types'
 import { getNextId } from '../flows/flowStateUtils'
 
-export function deleteComponent(parentItems: GridItem[] | undefined, component: AppComponent, app: App, staticOutputs: Record<string, any>, runnableComponents: Record<string, any>) {
-	(component.subGrids ?? []).forEach((subgrid) => {
-		if (subgrid) {
-			subgrid.forEach((item) => {
-				if (item.data) {
-					deleteComponent(undefined, item.data, app, staticOutputs, runnableComponents)
-				}
-			})
-		}
-	})
+export function deleteComponent(subgrid: string | undefined, component: AppComponent, app: App, staticOutputs: Record<string, any>, runnableComponents: Record<string, any>) {
 	if (parentItems) {
 		let index = parentItems.findIndex((item) => item.data?.id === component.id)
 		if (index != -1) {