feat(connections): keyed connection rows and cells

This commit is contained in:
kunish 2023-09-10 17:43:23 +08:00
parent 4f8c4b2d15
commit e7eb3dd331
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430

View File

@ -1,5 +1,6 @@
import { writeClipboard } from '@solid-primitives/clipboard'
import { useI18n } from '@solid-primitives/i18n'
import { Key } from '@solid-primitives/keyed'
import { makePersisted } from '@solid-primitives/storage'
import {
IconCircleX,
@ -321,20 +322,20 @@ export default () => {
<div class="flex h-full flex-col gap-2">
<div class="flex w-full flex-wrap items-center gap-2">
<div class="tabs-boxed tabs gap-2">
<For each={tabs()}>
<Key each={tabs()} by={({ type }) => type}>
{(tab) => (
<button
class={twMerge(
activeTab() === tab.type && 'tab-active',
activeTab() === tab().type && 'tab-active',
'tab tab-sm gap-2 sm:tab-md',
)}
onClick={() => setActiveTab(tab.type)}
onClick={() => setActiveTab(tab().type)}
>
<span>{tab.name}</span>
<div class="badge badge-sm">{tab.count}</div>
<span>{tab().name}</span>
<div class="badge badge-sm">{tab().count}</div>
</button>
)}
</For>
</Key>
</div>
<div class="join flex w-full items-center md:flex-1">
@ -438,11 +439,20 @@ export default () => {
</thead>
<tbody>
<For each={table.getRowModel().rows}>
{(row) => (
<Key each={table.getRowModel().rows} by={({ id }) => id}>
{(keyedRow) => {
const row = keyedRow()
return (
<tr class="h-8 hover:!bg-primary hover:text-primary-content">
<For each={row.getVisibleCells()}>
{(cell) => (
<Key
each={row.getVisibleCells()}
by={({ row }) => row.original.id}
>
{(keyedCell) => {
const cell = keyedCell()
return (
<td
onContextMenu={(e) => {
e.preventDefault()
@ -491,11 +501,13 @@ export default () => {
)
)}
</td>
)}
</For>
)
}}
</Key>
</tr>
)}
</For>
)
}}
</Key>
</tbody>
</table>
</div>