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