feat(frontend): Properly delete tab content (#1227)

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Button } from '$lib/components/common'
 	import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
+	import { createEventDispatcher } from 'svelte'
 	import type { StaticAppInput } from '../../inputType'
 	import { staticValues } from '../componentsPanel/componentStaticValues'
 	import SubTypeEditor from './SubTypeEditor.svelte'
@@ -8,6 +9,7 @@
 	type ArrayComponentInput = Extract<StaticAppInput, { fieldType: 'array' }>
 
 	export let componentInput: ArrayComponentInput
+	const dispatch = createEventDispatcher()
 
 	function addElementByType() {
 		if (componentInput.subFieldType && componentInput.value) {
@@ -36,6 +38,9 @@
 	function deleteElementByType(index: number) {
 		if (componentInput.value) {
 			componentInput.value.splice(index, 1)
+
+			dispatch('deleteArrayItem', { index })
+
 			componentInput = componentInput
 		}
 	}

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

@@ -107,7 +107,18 @@
 
 				<div class="flex flex-col w-full gap-2 my-2">
 					{#if component.componentInput.type === 'static'}
-						<StaticInputEditor bind:componentInput={component.componentInput} />
+						<StaticInputEditor
+							bind:componentInput={component.componentInput}
+							on:deleteArrayItem={(e) => {
+								if (component?.type === 'tabscomponent') {
+									const deletedIndex = e.detail.index
+
+									if (component.subGrids) {
+										component.subGrids.splice(deletedIndex, 1)
+									}
+								}
+							}}
+						/>
 					{:else if component.componentInput.type === 'template' && component.componentInput !== undefined}
 						<div class="py-1 min-h-[28px]  rounded border border-1 border-gray-500">
 							<TemplateEditor fontSize={12} bind:code={component.componentInput.eval} {extraLib} />

frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -59,7 +59,7 @@
 			</div>
 		{/if}
 	{:else if componentInput.fieldType === 'array'}
-		<ArrayStaticInputEditor bind:componentInput />
+		<ArrayStaticInputEditor bind:componentInput on:deleteArrayItem />
 	{:else}
 		<input type="text" placeholder="Static value" bind:value={componentInput.value} />
 	{/if}