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