compote-ui 0.43.10 → 0.43.12
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.
|
@@ -73,7 +73,12 @@ export function getRowSelectionState(table, rowId) {
|
|
|
73
73
|
return table.getRow(rowId).getIsSelected();
|
|
74
74
|
}
|
|
75
75
|
export function getReactiveCells(row, columnVisibility) {
|
|
76
|
-
|
|
76
|
+
void columnVisibility;
|
|
77
|
+
return [
|
|
78
|
+
...row.getLeftVisibleCells(),
|
|
79
|
+
...row.getCenterVisibleCells(),
|
|
80
|
+
...row.getRightVisibleCells()
|
|
81
|
+
];
|
|
77
82
|
}
|
|
78
83
|
export function getSelectedRowCount(table) {
|
|
79
84
|
return table.getSelectedRowModel().rows.length;
|
|
@@ -39,9 +39,23 @@
|
|
|
39
39
|
return table.getRowModel();
|
|
40
40
|
});
|
|
41
41
|
const headerGroups = $derived.by(() => {
|
|
42
|
-
const { columnVisibility } = getReactiveTableState(table);
|
|
42
|
+
const { columnPinning, columnVisibility } = getReactiveTableState(table);
|
|
43
|
+
void columnPinning;
|
|
43
44
|
void columnVisibility;
|
|
44
|
-
|
|
45
|
+
|
|
46
|
+
const leftHeaderGroups = table.getLeftHeaderGroups();
|
|
47
|
+
const centerHeaderGroups = table.getCenterHeaderGroups();
|
|
48
|
+
const rightHeaderGroups = table.getRightHeaderGroups();
|
|
49
|
+
|
|
50
|
+
return centerHeaderGroups.map((headerGroup, index) => ({
|
|
51
|
+
...headerGroup,
|
|
52
|
+
id: `${leftHeaderGroups[index]?.id ?? ''}|${headerGroup.id}|${rightHeaderGroups[index]?.id ?? ''}`,
|
|
53
|
+
headers: [
|
|
54
|
+
...(leftHeaderGroups[index]?.headers ?? []),
|
|
55
|
+
...headerGroup.headers,
|
|
56
|
+
...(rightHeaderGroups[index]?.headers ?? [])
|
|
57
|
+
]
|
|
58
|
+
}));
|
|
45
59
|
});
|
|
46
60
|
const isRowSelectionEnabled = $derived(Boolean(table.options.enableRowSelection));
|
|
47
61
|
const isMultiRowSelectionEnabled = $derived(table.options.enableMultiRowSelection !== false);
|
|
@@ -82,17 +96,15 @@
|
|
|
82
96
|
{#if caption}
|
|
83
97
|
<caption class="sr-only">{caption}</caption>
|
|
84
98
|
{/if}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
/>
|
|
95
|
-
{/key}
|
|
99
|
+
<DataTableHead
|
|
100
|
+
{table}
|
|
101
|
+
{headerGroups}
|
|
102
|
+
{headerGroupCount}
|
|
103
|
+
{isRowSelectionEnabled}
|
|
104
|
+
{isMultiRowSelectionEnabled}
|
|
105
|
+
{allRowsSelectionState}
|
|
106
|
+
isVirtual
|
|
107
|
+
/>
|
|
96
108
|
{#if scrollContainerRef}
|
|
97
109
|
<DataTableVirtualRows
|
|
98
110
|
rows={rowModel.rows}
|
|
@@ -48,9 +48,23 @@
|
|
|
48
48
|
return table.getRowModel();
|
|
49
49
|
});
|
|
50
50
|
const headerGroups = $derived.by(() => {
|
|
51
|
-
const { columnVisibility } = getReactiveTableState(table);
|
|
51
|
+
const { columnPinning, columnVisibility } = getReactiveTableState(table);
|
|
52
|
+
void columnPinning;
|
|
52
53
|
void columnVisibility;
|
|
53
|
-
|
|
54
|
+
|
|
55
|
+
const leftHeaderGroups = table.getLeftHeaderGroups();
|
|
56
|
+
const centerHeaderGroups = table.getCenterHeaderGroups();
|
|
57
|
+
const rightHeaderGroups = table.getRightHeaderGroups();
|
|
58
|
+
|
|
59
|
+
return centerHeaderGroups.map((headerGroup, index) => ({
|
|
60
|
+
...headerGroup,
|
|
61
|
+
id: `${leftHeaderGroups[index]?.id ?? ''}|${headerGroup.id}|${rightHeaderGroups[index]?.id ?? ''}`,
|
|
62
|
+
headers: [
|
|
63
|
+
...(leftHeaderGroups[index]?.headers ?? []),
|
|
64
|
+
...headerGroup.headers,
|
|
65
|
+
...(rightHeaderGroups[index]?.headers ?? [])
|
|
66
|
+
]
|
|
67
|
+
}));
|
|
54
68
|
});
|
|
55
69
|
const visibleLeafColumns = $derived.by(() => {
|
|
56
70
|
const { columnVisibility } = getReactiveTableState(table);
|
|
@@ -111,114 +125,108 @@
|
|
|
111
125
|
{#if caption}
|
|
112
126
|
<caption class="sr-only">{caption}</caption>
|
|
113
127
|
{/if}
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
/>
|
|
124
|
-
{/key}
|
|
128
|
+
<DataTableHead
|
|
129
|
+
{table}
|
|
130
|
+
{headerGroups}
|
|
131
|
+
{headerGroupCount}
|
|
132
|
+
{isRowSelectionEnabled}
|
|
133
|
+
{isMultiRowSelectionEnabled}
|
|
134
|
+
{allRowsSelectionState}
|
|
135
|
+
{hasGrowColumn}
|
|
136
|
+
/>
|
|
125
137
|
<tbody>
|
|
126
|
-
{#
|
|
127
|
-
{
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
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
|
-
</span>
|
|
183
|
-
{:else}
|
|
184
|
-
-
|
|
185
|
-
{/if}
|
|
186
|
-
{:else if columnDef?.type === 'url'}
|
|
187
|
-
{@const value = getUrlCellValue(cell.getValue())}
|
|
188
|
-
{#if value}
|
|
189
|
-
<button
|
|
190
|
-
type="button"
|
|
191
|
-
class={cn(
|
|
192
|
-
'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',
|
|
193
|
-
justifyClass(columnDef.align)
|
|
194
|
-
)}
|
|
195
|
-
onclick={() => openUrlCell(value)}
|
|
196
|
-
>
|
|
197
|
-
<PhArrowSquareOut class="size-3.5 shrink-0" />
|
|
198
|
-
</button>
|
|
199
|
-
{:else}
|
|
200
|
-
-
|
|
201
|
-
{/if}
|
|
138
|
+
{#each rowModel.rows as row (row.id)}
|
|
139
|
+
{@const rowSelected = getReactiveTableState(table).rowSelection[row.id] === true}
|
|
140
|
+
<tr
|
|
141
|
+
class={cn(
|
|
142
|
+
'group/row',
|
|
143
|
+
'[--row-bg:var(--compote-surface-1)]',
|
|
144
|
+
'hover:bg-well/60 hover:[--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]',
|
|
145
|
+
rowSelected &&
|
|
146
|
+
'bg-well/60 [--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]'
|
|
147
|
+
)}
|
|
148
|
+
onclick={(event) => onRowClick?.({ row: row.original, event })}
|
|
149
|
+
ondblclick={(event) => onRowDoubleClick?.({ row: row.original, event })}
|
|
150
|
+
>
|
|
151
|
+
{#if isRowSelectionEnabled}
|
|
152
|
+
<td
|
|
153
|
+
class="border-b border-surface-2 bg-(--row-bg) px-3 py-2 text-center align-middle group-last/row:border-b-0"
|
|
154
|
+
style="position: sticky; left: 0; z-index: 1"
|
|
155
|
+
>
|
|
156
|
+
<input
|
|
157
|
+
type="checkbox"
|
|
158
|
+
aria-label="Select row"
|
|
159
|
+
class="table-checkbox mx-auto block size-4"
|
|
160
|
+
checked={rowSelected}
|
|
161
|
+
disabled={!row.getCanSelect()}
|
|
162
|
+
onchange={(e) => row.toggleSelected(e.currentTarget.checked)}
|
|
163
|
+
/>
|
|
164
|
+
</td>
|
|
165
|
+
{/if}
|
|
166
|
+
{#each getReactiveCells(row, getReactiveTableState(table).columnVisibility) as cell (cell.id)}
|
|
167
|
+
{@const columnDef = getColumnMeta(cell.column.columnDef)}
|
|
168
|
+
<td
|
|
169
|
+
class={cn(
|
|
170
|
+
'truncate border-b border-b-surface-2 px-3 py-2 group-last/row:border-b-0',
|
|
171
|
+
alignClass(columnDef?.align),
|
|
172
|
+
cell.column.getIsPinned() && 'bg-(--row-bg)'
|
|
173
|
+
)}
|
|
174
|
+
style={getPinningStyle(cell.column, table, false, isRowSelectionEnabled)}
|
|
175
|
+
>
|
|
176
|
+
{#if columnDef?.type === 'boolean'}
|
|
177
|
+
{@const value = getBooleanCellValue(cell.getValue())}
|
|
178
|
+
{#if value === true}
|
|
179
|
+
<span
|
|
180
|
+
class="inline-flex size-5 items-center justify-center text-success"
|
|
181
|
+
role="img"
|
|
182
|
+
aria-label="Yes"
|
|
183
|
+
>
|
|
184
|
+
<PhCheck class="size-4" />
|
|
185
|
+
</span>
|
|
186
|
+
{:else if value === false}
|
|
187
|
+
<span
|
|
188
|
+
class="inline-flex size-5 items-center justify-center text-danger"
|
|
189
|
+
role="img"
|
|
190
|
+
aria-label="No"
|
|
191
|
+
>
|
|
192
|
+
<PhX class="size-4" />
|
|
193
|
+
</span>
|
|
202
194
|
{:else}
|
|
203
|
-
|
|
195
|
+
-
|
|
204
196
|
{/if}
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
197
|
+
{:else if columnDef?.type === 'url'}
|
|
198
|
+
{@const value = getUrlCellValue(cell.getValue())}
|
|
199
|
+
{#if value}
|
|
200
|
+
<button
|
|
201
|
+
type="button"
|
|
202
|
+
class={cn(
|
|
203
|
+
'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',
|
|
204
|
+
justifyClass(columnDef.align)
|
|
205
|
+
)}
|
|
206
|
+
onclick={() => openUrlCell(value)}
|
|
207
|
+
>
|
|
208
|
+
<PhArrowSquareOut class="size-3.5 shrink-0" />
|
|
209
|
+
</button>
|
|
210
|
+
{:else}
|
|
211
|
+
-
|
|
212
|
+
{/if}
|
|
213
|
+
{:else}
|
|
214
|
+
<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
|
|
215
|
+
{/if}
|
|
218
216
|
</td>
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
217
|
+
{/each}
|
|
218
|
+
{#if !hasGrowColumn}
|
|
219
|
+
<td aria-hidden="true" class="border-b border-surface-2 p-0 group-last/row:border-b-0"
|
|
220
|
+
></td>
|
|
221
|
+
{/if}
|
|
222
|
+
</tr>
|
|
223
|
+
{:else}
|
|
224
|
+
<tr>
|
|
225
|
+
<td class="px-3 py-10 text-center text-sm text-ink-dim" colspan={renderedColumnCount}>
|
|
226
|
+
{emptyMessage}
|
|
227
|
+
</td>
|
|
228
|
+
</tr>
|
|
229
|
+
{/each}
|
|
222
230
|
</tbody>
|
|
223
231
|
</table>
|
|
224
232
|
</div>
|