fix: improve table behavior when searching

frontend/src/lib/components/apps/components/display/AppCarouselList.svelte

@@ -150,8 +150,7 @@
 						{#each result ?? [] as value, index}
 							<div class="overflow-auto w-full">
 								<ListWrapper
-									on:set={(e) => {
-										const { id, value } = e.detail
+									onSet={(id, value) => {
 										if (!inputs[id]) {
 											inputs[id] = { [index]: value }
 										} else {
@@ -159,8 +158,7 @@
 										}
 										outputs?.inputs.set(inputs, true)
 									}}
-									on:remove={(e) => {
-										const id = e.detail
+									onRemove={(id) => {
 										if (inputs?.[id] == undefined) {
 											return
 										}

frontend/src/lib/components/apps/components/display/table/AppTable.svelte

@@ -437,26 +437,24 @@
 												<RowWrapper
 													value={row.original}
 													index={rowIndex}
-													on:set={(e) => {
-														const { id, value } = e.detail
+													onSet={(id, value) => {
 														if (!inputs[id]) {
 															inputs[id] = { [rowIndex]: value }
 														} else {
 															inputs[id] = { ...inputs[id], [rowIndex]: value }
 														}
+
 														outputs?.inputs.set(inputs, true)
 													}}
-													on:remove={(e) => {
-														const id = e.detail
+													onRemove={(id) => {
 														if (inputs?.[id] == undefined) {
 															return
 														}
-														if (rowIndex == 0) {
+														delete inputs[id][rowIndex]
+														inputs[id] = { ...inputs[id] }
+														if (Object.keys(inputs?.[id] ?? {}).length == 0) {
 															delete inputs[id]
 															inputs = { ...inputs }
-														} else {
-															delete inputs[id][rowIndex]
-															inputs[id] = { ...inputs[id] }
 														}
 														outputs?.inputs.set(inputs, true)
 													}}

frontend/src/lib/components/apps/components/display/table/tableOptions.ts

@@ -10,6 +10,9 @@ const tableOptions: TableOptions<Record<string, any>> = {
 		pagination: {
 			pageSize: 25
 		}
+	},
+	getRowId(originalRow, index, parent) {
+		return originalRow?.['__index'] ?? index
 	}
 }
 

frontend/src/lib/components/apps/components/layout/AppList.svelte

@@ -172,8 +172,7 @@
 								: 'h-0 float overflow-hidden invisible absolute'}
 						>
 							<ListWrapper
-								on:set={(e) => {
-									const { id, value } = e.detail
+								onSet={(id, value) => {
 									if (!inputs[id]) {
 										inputs[id] = { [index]: value }
 									} else {
@@ -181,8 +180,7 @@
 									}
 									outputs?.inputs.set(inputs, true)
 								}}
-								on:remove={(e) => {
-									const id = e.detail
+								onRemove={(id) => {
 									if (inputs?.[id] == undefined) {
 										return
 									}

frontend/src/lib/components/apps/components/layout/ListWrapper.svelte

@@ -1,24 +1,23 @@
 <script lang="ts">
-	import { createEventDispatcher, setContext } from 'svelte'
+	import { setContext } from 'svelte'
 	import type { ListInputs, ListContext } from '../../types'
 	import { writable } from 'svelte/store'
 
 	export let index: number
 	export let value: any
 	export let disabled = false
-
+	export let onSet: ((id: string, value: any) => void) | undefined = undefined
+	export let onRemove: ((id: string) => void) | undefined = undefined
 	const ctx = writable({ index, value, disabled })
 
-	const dispatch = createEventDispatcher()
-
 	$: $ctx = { index, value, disabled }
 	setContext<ListContext>('ListWrapperContext', ctx)
 	setContext<ListInputs>('ListInputs', {
 		set: (id: string, value: any) => {
-			dispatch('set', { id, value })
+			onSet?.(id, value)
 		},
 		remove(id) {
-			dispatch('remove', id)
+			onRemove?.(id)
 		}
 	})
 </script>

frontend/src/lib/components/apps/components/layout/RowWrapper.svelte

@@ -1,24 +1,25 @@
 <script lang="ts">
-	import { createEventDispatcher, setContext } from 'svelte'
+	import { setContext } from 'svelte'
 	import type { ListInputs, ListContext } from '../../types'
 	import { writable } from 'svelte/store'
 
 	export let index: number
 	export let value: any
 	export let disabled = false
+	export let onSet: (id: string, value: any) => void
+	export let onRemove: (id: string) => void
 
 	const ctx = writable({ index, value, disabled })
 
 	$: $ctx = { index, value, disabled }
 
-	const dispatch = createEventDispatcher()
 	setContext<ListContext>('RowWrapperContext', ctx)
 	setContext<ListInputs>('RowInputs', {
 		set: (id: string, value: any) => {
-			dispatch('set', { id, value })
+			onSet(id, value)
 		},
 		remove(id) {
-			dispatch('remove', id)
+			onRemove(id)
 		}
 	})
 </script>