improve delete component of tables

frontend/src/lib/components/apps/components/buttons/AppButton.svelte

@@ -77,9 +77,13 @@
 	$: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon()
 
 	function getIconSize() {
-		switch (resolvedConfig.size as 'xs' | 'sm' | 'md' | 'lg' | 'xl') {
+		switch (resolvedConfig.size as 'xs' | 'xs2' | 'xs3' | 'sm' | 'md' | 'lg' | 'xl') {
 			case 'xs':
 				return 14
+			case 'xs2':
+				return 12
+			case 'xs3':
+				return 10
 			case 'sm':
 				return 16
 			case 'md':

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

@@ -451,7 +451,7 @@ const buttonColorOptions = [...BUTTON_COLORS]
 export const selectOptions = {
 	buttonColorOptions,
 	tabsKindOptions: ['tabs', 'sidebar', 'accordion', 'invisibleOnView'],
-	buttonSizeOptions: ['xs', 'sm', 'md', 'lg', 'xl'],
+	buttonSizeOptions: ['xs2', 'xs', 'sm', 'md', 'lg', 'xl'],
 	tableSearchOptions: ['By Component', 'By Runnable', 'Disabled'],
 	chartThemeOptions: ['theme1', 'theme2', 'theme3'],
 	textStyleOptions: ['Title', 'Subtitle', 'Body', 'Label', 'Caption'],

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

@@ -70,12 +70,11 @@
 			return
 		}
 		components = components.filter((x) => x.id !== cid)
-
 		delete $errorByComponent[cid]
 
 		$selectedComponent = [id]
 		$app = $app
-
+		console.log('items', items)
 		// Remove the corresponding item from the items array
 		items = items.filter((item) => item.originalIndex !== index)
 	}
@@ -159,7 +158,10 @@
 								</div>
 							</div>
 							<div class="flex flex-row items-center gap-1">
-								<CloseButton small on:close={() => deleteComponent(component.id, index)} />
+								<CloseButton
+									small
+									on:close={() => deleteComponent(component.id, item.originalIndex)}
+								/>
 							</div>
 						</div>
 						{#if actionsOrder === undefined}