compote-ui 0.43.11 → 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);
|
|
@@ -75,38 +89,34 @@
|
|
|
75
89
|
{/if}
|
|
76
90
|
|
|
77
91
|
<div class="min-h-0 flex-1 overflow-auto" bind:this={scrollContainerRef}>
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
{
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
{
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
/>
|
|
107
|
-
{/if}
|
|
108
|
-
</table>
|
|
109
|
-
{/key}
|
|
92
|
+
<table
|
|
93
|
+
class="table-fixed border-separate border-spacing-0 text-sm"
|
|
94
|
+
style="display: grid; {tableSizeStyle(table, isRowSelectionEnabled)}"
|
|
95
|
+
>
|
|
96
|
+
{#if caption}
|
|
97
|
+
<caption class="sr-only">{caption}</caption>
|
|
98
|
+
{/if}
|
|
99
|
+
<DataTableHead
|
|
100
|
+
{table}
|
|
101
|
+
{headerGroups}
|
|
102
|
+
{headerGroupCount}
|
|
103
|
+
{isRowSelectionEnabled}
|
|
104
|
+
{isMultiRowSelectionEnabled}
|
|
105
|
+
{allRowsSelectionState}
|
|
106
|
+
isVirtual
|
|
107
|
+
/>
|
|
108
|
+
{#if scrollContainerRef}
|
|
109
|
+
<DataTableVirtualRows
|
|
110
|
+
rows={rowModel.rows}
|
|
111
|
+
scrollContainer={scrollContainerRef}
|
|
112
|
+
{isRowSelectionEnabled}
|
|
113
|
+
{table}
|
|
114
|
+
{emptyMessage}
|
|
115
|
+
{onRowClick}
|
|
116
|
+
{onRowDoubleClick}
|
|
117
|
+
/>
|
|
118
|
+
{/if}
|
|
119
|
+
</table>
|
|
110
120
|
</div>
|
|
111
121
|
|
|
112
122
|
<div class="shrink-0 border-t border-surface-3 bg-surface-2 px-3 py-2 text-sm text-ink-dim">
|
|
@@ -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);
|
|
@@ -89,146 +103,132 @@
|
|
|
89
103
|
{/if}
|
|
90
104
|
|
|
91
105
|
<div class="min-h-0 flex-1 overflow-auto">
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
>
|
|
97
|
-
|
|
98
|
-
{
|
|
99
|
-
<col style={selectionColumnSizeStyle()} />
|
|
100
|
-
{/if}
|
|
101
|
-
{#each visibleLeafColumns as column (column.id)}
|
|
102
|
-
<col
|
|
103
|
-
style={getColumnMeta(column.columnDef)?.grow
|
|
104
|
-
? undefined
|
|
105
|
-
: columnSizeStyle(column.getSize())}
|
|
106
|
-
/>
|
|
107
|
-
{/each}
|
|
108
|
-
{#if !hasGrowColumn}
|
|
109
|
-
<col />
|
|
110
|
-
{/if}
|
|
111
|
-
</colgroup>
|
|
112
|
-
{#if caption}
|
|
113
|
-
<caption class="sr-only">{caption}</caption>
|
|
106
|
+
<table
|
|
107
|
+
class="table-fixed border-separate border-spacing-0 text-sm"
|
|
108
|
+
style={tableSizeStyle(table, isRowSelectionEnabled)}
|
|
109
|
+
>
|
|
110
|
+
<colgroup>
|
|
111
|
+
{#if isRowSelectionEnabled}
|
|
112
|
+
<col style={selectionColumnSizeStyle()} />
|
|
114
113
|
{/if}
|
|
115
|
-
{#
|
|
116
|
-
<
|
|
117
|
-
{
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
{isRowSelectionEnabled}
|
|
121
|
-
{isMultiRowSelectionEnabled}
|
|
122
|
-
{allRowsSelectionState}
|
|
123
|
-
{hasGrowColumn}
|
|
114
|
+
{#each visibleLeafColumns as column (column.id)}
|
|
115
|
+
<col
|
|
116
|
+
style={getColumnMeta(column.columnDef)?.grow
|
|
117
|
+
? undefined
|
|
118
|
+
: columnSizeStyle(column.getSize())}
|
|
124
119
|
/>
|
|
125
|
-
{/
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
120
|
+
{/each}
|
|
121
|
+
{#if !hasGrowColumn}
|
|
122
|
+
<col />
|
|
123
|
+
{/if}
|
|
124
|
+
</colgroup>
|
|
125
|
+
{#if caption}
|
|
126
|
+
<caption class="sr-only">{caption}</caption>
|
|
127
|
+
{/if}
|
|
128
|
+
<DataTableHead
|
|
129
|
+
{table}
|
|
130
|
+
{headerGroups}
|
|
131
|
+
{headerGroupCount}
|
|
132
|
+
{isRowSelectionEnabled}
|
|
133
|
+
{isMultiRowSelectionEnabled}
|
|
134
|
+
{allRowsSelectionState}
|
|
135
|
+
{hasGrowColumn}
|
|
136
|
+
/>
|
|
137
|
+
<tbody>
|
|
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
|
|
131
169
|
class={cn(
|
|
132
|
-
'group/row',
|
|
133
|
-
|
|
134
|
-
'
|
|
135
|
-
rowSelected &&
|
|
136
|
-
'bg-well/60 [--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]'
|
|
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)'
|
|
137
173
|
)}
|
|
138
|
-
|
|
139
|
-
ondblclick={(event) => onRowDoubleClick?.({ row: row.original, event })}
|
|
174
|
+
style={getPinningStyle(cell.column, table, false, isRowSelectionEnabled)}
|
|
140
175
|
>
|
|
141
|
-
{#if
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
class="
|
|
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
|
-
aria-label="No"
|
|
181
|
-
>
|
|
182
|
-
<PhX class="size-4" />
|
|
183
|
-
</span>
|
|
184
|
-
{:else}
|
|
185
|
-
-
|
|
186
|
-
{/if}
|
|
187
|
-
{:else if columnDef?.type === 'url'}
|
|
188
|
-
{@const value = getUrlCellValue(cell.getValue())}
|
|
189
|
-
{#if value}
|
|
190
|
-
<button
|
|
191
|
-
type="button"
|
|
192
|
-
class={cn(
|
|
193
|
-
'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',
|
|
194
|
-
justifyClass(columnDef.align)
|
|
195
|
-
)}
|
|
196
|
-
onclick={() => openUrlCell(value)}
|
|
197
|
-
>
|
|
198
|
-
<PhArrowSquareOut class="size-3.5 shrink-0" />
|
|
199
|
-
</button>
|
|
200
|
-
{:else}
|
|
201
|
-
-
|
|
202
|
-
{/if}
|
|
203
|
-
{:else}
|
|
204
|
-
<FlexRender
|
|
205
|
-
content={cell.column.columnDef.cell}
|
|
206
|
-
context={cell.getContext()}
|
|
207
|
-
/>
|
|
208
|
-
{/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>
|
|
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>
|
|
194
|
+
{:else}
|
|
195
|
+
-
|
|
196
|
+
{/if}
|
|
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()} />
|
|
216
215
|
{/if}
|
|
217
|
-
</
|
|
218
|
-
{:else}
|
|
219
|
-
<tr>
|
|
220
|
-
<td
|
|
221
|
-
class="px-3 py-10 text-center text-sm text-ink-dim"
|
|
222
|
-
colspan={renderedColumnCount}
|
|
223
|
-
>
|
|
224
|
-
{emptyMessage}
|
|
225
|
-
</td>
|
|
226
|
-
</tr>
|
|
216
|
+
</td>
|
|
227
217
|
{/each}
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
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}
|
|
230
|
+
</tbody>
|
|
231
|
+
</table>
|
|
232
232
|
</div>
|
|
233
233
|
|
|
234
234
|
<div class="shrink-0 border-t border-surface-3 bg-surface-2 px-3 py-2 text-sm text-ink-dim">
|