compote-ui 0.43.7 → 0.43.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -40,12 +40,22 @@
|
|
|
40
40
|
});
|
|
41
41
|
const headerGroups = $derived.by(() => {
|
|
42
42
|
const { columnVisibility } = getReactiveTableState(table);
|
|
43
|
-
|
|
44
|
-
|
|
43
|
+
return table.getHeaderGroups().map((group) => ({
|
|
44
|
+
...group,
|
|
45
|
+
headers: group.headers.filter(
|
|
46
|
+
(header) => header.colSpan > 0 && columnVisibility[header.column.id] !== false
|
|
47
|
+
)
|
|
48
|
+
}));
|
|
45
49
|
});
|
|
46
50
|
const isRowSelectionEnabled = $derived(Boolean(table.options.enableRowSelection));
|
|
47
51
|
const isMultiRowSelectionEnabled = $derived(table.options.enableMultiRowSelection !== false);
|
|
48
52
|
const headerGroupCount = $derived(headerGroups.length);
|
|
53
|
+
const visibleColumnIds = $derived(
|
|
54
|
+
table
|
|
55
|
+
.getVisibleLeafColumns()
|
|
56
|
+
.map((column) => column.id)
|
|
57
|
+
.join('|')
|
|
58
|
+
);
|
|
49
59
|
const allRowsSelectionState = $derived.by(() => {
|
|
50
60
|
getReactiveTableState(table);
|
|
51
61
|
return getAllRowsSelectionState(table);
|
|
@@ -55,26 +65,6 @@
|
|
|
55
65
|
return getSelectedRowCount(table);
|
|
56
66
|
});
|
|
57
67
|
const isColumnResizing = $derived(tableState.columnSizingInfo.isResizingColumn !== false);
|
|
58
|
-
|
|
59
|
-
$effect(() => {
|
|
60
|
-
console.log('VIRTUAL DATA TABLE DEBUG', {
|
|
61
|
-
columnVisibility: { ...tableState.columnVisibility },
|
|
62
|
-
visibleLeafColumns: table.getVisibleLeafColumns().map((column) => column.id),
|
|
63
|
-
allLeafColumns: table.getAllLeafColumns().map((column) => ({
|
|
64
|
-
id: column.id,
|
|
65
|
-
isVisible: column.getIsVisible()
|
|
66
|
-
})),
|
|
67
|
-
headerGroups: table.getHeaderGroups().map((group) => ({
|
|
68
|
-
id: group.id,
|
|
69
|
-
headers: group.headers.map((header) => ({
|
|
70
|
-
id: header.id,
|
|
71
|
-
columnId: header.column.id,
|
|
72
|
-
colSpan: header.colSpan,
|
|
73
|
-
isPlaceholder: header.isPlaceholder
|
|
74
|
-
}))
|
|
75
|
-
}))
|
|
76
|
-
});
|
|
77
|
-
});
|
|
78
68
|
</script>
|
|
79
69
|
|
|
80
70
|
<div
|
|
@@ -96,15 +86,17 @@
|
|
|
96
86
|
{#if caption}
|
|
97
87
|
<caption class="sr-only">{caption}</caption>
|
|
98
88
|
{/if}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
89
|
+
{#key visibleColumnIds}
|
|
90
|
+
<DataTableHead
|
|
91
|
+
{table}
|
|
92
|
+
{headerGroups}
|
|
93
|
+
{headerGroupCount}
|
|
94
|
+
{isRowSelectionEnabled}
|
|
95
|
+
{isMultiRowSelectionEnabled}
|
|
96
|
+
{allRowsSelectionState}
|
|
97
|
+
isVirtual
|
|
98
|
+
/>
|
|
99
|
+
{/key}
|
|
108
100
|
{#if scrollContainerRef}
|
|
109
101
|
<DataTableVirtualRows
|
|
110
102
|
rows={rowModel.rows}
|
|
@@ -49,8 +49,12 @@
|
|
|
49
49
|
});
|
|
50
50
|
const headerGroups = $derived.by(() => {
|
|
51
51
|
const { columnVisibility } = getReactiveTableState(table);
|
|
52
|
-
|
|
53
|
-
|
|
52
|
+
return table.getHeaderGroups().map((group) => ({
|
|
53
|
+
...group,
|
|
54
|
+
headers: group.headers.filter(
|
|
55
|
+
(header) => header.colSpan > 0 && columnVisibility[header.column.id] !== false
|
|
56
|
+
)
|
|
57
|
+
}));
|
|
54
58
|
});
|
|
55
59
|
const visibleLeafColumns = $derived.by(() => {
|
|
56
60
|
const { columnVisibility } = getReactiveTableState(table);
|
|
@@ -65,6 +69,7 @@
|
|
|
65
69
|
const tableColumnCount = $derived(visibleColumnCount + (isRowSelectionEnabled ? 1 : 0));
|
|
66
70
|
const renderedColumnCount = $derived(tableColumnCount + 1);
|
|
67
71
|
const headerGroupCount = $derived(headerGroups.length);
|
|
72
|
+
const visibleColumnIds = $derived(visibleLeafColumns.map((column) => column.id).join('|'));
|
|
68
73
|
const allRowsSelectionState = $derived.by(() => {
|
|
69
74
|
getReactiveTableState(table);
|
|
70
75
|
return getAllRowsSelectionState(table);
|
|
@@ -74,26 +79,6 @@
|
|
|
74
79
|
return getSelectedRowCount(table);
|
|
75
80
|
});
|
|
76
81
|
const isColumnResizing = $derived(tableState.columnSizingInfo.isResizingColumn !== false);
|
|
77
|
-
|
|
78
|
-
$effect(() => {
|
|
79
|
-
console.log('DATA TABLE DEBUG', {
|
|
80
|
-
columnVisibility: { ...tableState.columnVisibility },
|
|
81
|
-
visibleLeafColumns: table.getVisibleLeafColumns().map((column) => column.id),
|
|
82
|
-
allLeafColumns: table.getAllLeafColumns().map((column) => ({
|
|
83
|
-
id: column.id,
|
|
84
|
-
isVisible: column.getIsVisible()
|
|
85
|
-
})),
|
|
86
|
-
headerGroups: table.getHeaderGroups().map((group) => ({
|
|
87
|
-
id: group.id,
|
|
88
|
-
headers: group.headers.map((header) => ({
|
|
89
|
-
id: header.id,
|
|
90
|
-
columnId: header.column.id,
|
|
91
|
-
colSpan: header.colSpan,
|
|
92
|
-
isPlaceholder: header.isPlaceholder
|
|
93
|
-
}))
|
|
94
|
-
}))
|
|
95
|
-
});
|
|
96
|
-
});
|
|
97
82
|
</script>
|
|
98
83
|
|
|
99
84
|
<div
|
|
@@ -130,108 +115,114 @@
|
|
|
130
115
|
{#if caption}
|
|
131
116
|
<caption class="sr-only">{caption}</caption>
|
|
132
117
|
{/if}
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
118
|
+
{#key visibleColumnIds}
|
|
119
|
+
<DataTableHead
|
|
120
|
+
{table}
|
|
121
|
+
{headerGroups}
|
|
122
|
+
{headerGroupCount}
|
|
123
|
+
{isRowSelectionEnabled}
|
|
124
|
+
{isMultiRowSelectionEnabled}
|
|
125
|
+
{allRowsSelectionState}
|
|
126
|
+
{hasGrowColumn}
|
|
127
|
+
/>
|
|
128
|
+
{/key}
|
|
142
129
|
<tbody>
|
|
143
|
-
{#
|
|
144
|
-
{
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
{
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
{
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
130
|
+
{#key visibleColumnIds}
|
|
131
|
+
{#each rowModel.rows as row (row.id)}
|
|
132
|
+
{@const rowSelected = getReactiveTableState(table).rowSelection[row.id] === true}
|
|
133
|
+
<tr
|
|
134
|
+
class={cn(
|
|
135
|
+
'group/row',
|
|
136
|
+
'[--row-bg:var(--compote-surface-1)]',
|
|
137
|
+
'hover:bg-well/60 hover:[--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]',
|
|
138
|
+
rowSelected &&
|
|
139
|
+
'bg-well/60 [--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]'
|
|
140
|
+
)}
|
|
141
|
+
onclick={(event) => onRowClick?.({ row: row.original, event })}
|
|
142
|
+
ondblclick={(event) => onRowDoubleClick?.({ row: row.original, event })}
|
|
143
|
+
>
|
|
144
|
+
{#if isRowSelectionEnabled}
|
|
145
|
+
<td
|
|
146
|
+
class="border-b border-surface-2 bg-(--row-bg) px-3 py-2 text-center align-middle group-last/row:border-b-0"
|
|
147
|
+
style="position: sticky; left: 0; z-index: 1"
|
|
148
|
+
>
|
|
149
|
+
<input
|
|
150
|
+
type="checkbox"
|
|
151
|
+
aria-label="Select row"
|
|
152
|
+
class="table-checkbox mx-auto block size-4"
|
|
153
|
+
checked={rowSelected}
|
|
154
|
+
disabled={!row.getCanSelect()}
|
|
155
|
+
onchange={(e) => row.toggleSelected(e.currentTarget.checked)}
|
|
156
|
+
/>
|
|
157
|
+
</td>
|
|
158
|
+
{/if}
|
|
159
|
+
{#each getReactiveCells(row, getReactiveTableState(table).columnVisibility) as cell (cell.id)}
|
|
160
|
+
{@const columnDef = getColumnMeta(cell.column.columnDef)}
|
|
161
|
+
<td
|
|
162
|
+
class={cn(
|
|
163
|
+
'truncate border-b border-b-surface-2 px-3 py-2 group-last/row:border-b-0',
|
|
164
|
+
alignClass(columnDef?.align),
|
|
165
|
+
cell.column.getIsPinned() && 'bg-(--row-bg)'
|
|
166
|
+
)}
|
|
167
|
+
style={getPinningStyle(cell.column, table, false, isRowSelectionEnabled)}
|
|
168
|
+
>
|
|
169
|
+
{#if columnDef?.type === 'boolean'}
|
|
170
|
+
{@const value = getBooleanCellValue(cell.getValue())}
|
|
171
|
+
{#if value === true}
|
|
172
|
+
<span
|
|
173
|
+
class="inline-flex size-5 items-center justify-center text-success"
|
|
174
|
+
role="img"
|
|
175
|
+
aria-label="Yes"
|
|
176
|
+
>
|
|
177
|
+
<PhCheck class="size-4" />
|
|
178
|
+
</span>
|
|
179
|
+
{:else if value === false}
|
|
180
|
+
<span
|
|
181
|
+
class="inline-flex size-5 items-center justify-center text-danger"
|
|
182
|
+
role="img"
|
|
183
|
+
aria-label="No"
|
|
184
|
+
>
|
|
185
|
+
<PhX class="size-4" />
|
|
186
|
+
</span>
|
|
187
|
+
{:else}
|
|
188
|
+
-
|
|
189
|
+
{/if}
|
|
190
|
+
{:else if columnDef?.type === 'url'}
|
|
191
|
+
{@const value = getUrlCellValue(cell.getValue())}
|
|
192
|
+
{#if value}
|
|
193
|
+
<button
|
|
194
|
+
type="button"
|
|
195
|
+
class={cn(
|
|
196
|
+
'inline-flex max-w-full appearance-none items-center gap-1.5 rounded-sm border-0 bg-transparent p-0 align-middle leading-5 font-medium text-ink underline decoration-border decoration-dotted underline-offset-4 outline-none hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
|
|
197
|
+
justifyClass(columnDef.align)
|
|
198
|
+
)}
|
|
199
|
+
onclick={() => openUrlCell(value)}
|
|
200
|
+
>
|
|
201
|
+
<PhArrowSquareOut class="size-3.5 shrink-0" />
|
|
202
|
+
</button>
|
|
203
|
+
{:else}
|
|
204
|
+
-
|
|
205
|
+
{/if}
|
|
199
206
|
{:else}
|
|
200
|
-
|
|
207
|
+
<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
|
|
201
208
|
{/if}
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
{:else}
|
|
216
|
-
-
|
|
217
|
-
{/if}
|
|
218
|
-
{:else}
|
|
219
|
-
<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
|
|
220
|
-
{/if}
|
|
209
|
+
</td>
|
|
210
|
+
{/each}
|
|
211
|
+
{#if !hasGrowColumn}
|
|
212
|
+
<td
|
|
213
|
+
aria-hidden="true"
|
|
214
|
+
class="border-b border-surface-2 p-0 group-last/row:border-b-0"
|
|
215
|
+
></td>
|
|
216
|
+
{/if}
|
|
217
|
+
</tr>
|
|
218
|
+
{:else}
|
|
219
|
+
<tr>
|
|
220
|
+
<td class="px-3 py-10 text-center text-sm text-ink-dim" colspan={renderedColumnCount}>
|
|
221
|
+
{emptyMessage}
|
|
221
222
|
</td>
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
></td>
|
|
226
|
-
{/if}
|
|
227
|
-
</tr>
|
|
228
|
-
{:else}
|
|
229
|
-
<tr>
|
|
230
|
-
<td class="px-3 py-10 text-center text-sm text-ink-dim" colspan={renderedColumnCount}>
|
|
231
|
-
{emptyMessage}
|
|
232
|
-
</td>
|
|
233
|
-
</tr>
|
|
234
|
-
{/each}
|
|
223
|
+
</tr>
|
|
224
|
+
{/each}
|
|
225
|
+
{/key}
|
|
235
226
|
</tbody>
|
|
236
227
|
</table>
|
|
237
228
|
</div>
|