compote-ui 0.43.10 → 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.
|
@@ -75,36 +75,38 @@
|
|
|
75
75
|
{/if}
|
|
76
76
|
|
|
77
77
|
<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
|
-
|
|
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}
|
|
108
110
|
</div>
|
|
109
111
|
|
|
110
112
|
<div class="shrink-0 border-t border-surface-3 bg-surface-2 px-3 py-2 text-sm text-ink-dim">
|
|
@@ -89,138 +89,146 @@
|
|
|
89
89
|
{/if}
|
|
90
90
|
|
|
91
91
|
<div class="min-h-0 flex-1 overflow-auto">
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
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>
|
|
109
114
|
{/if}
|
|
110
|
-
</colgroup>
|
|
111
|
-
{#if caption}
|
|
112
|
-
<caption class="sr-only">{caption}</caption>
|
|
113
|
-
{/if}
|
|
114
|
-
{#key visibleColumnIds}
|
|
115
|
-
<DataTableHead
|
|
116
|
-
{table}
|
|
117
|
-
{headerGroups}
|
|
118
|
-
{headerGroupCount}
|
|
119
|
-
{isRowSelectionEnabled}
|
|
120
|
-
{isMultiRowSelectionEnabled}
|
|
121
|
-
{allRowsSelectionState}
|
|
122
|
-
{hasGrowColumn}
|
|
123
|
-
/>
|
|
124
|
-
{/key}
|
|
125
|
-
<tbody>
|
|
126
115
|
{#key visibleColumnIds}
|
|
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
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
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}
|
|
199
203
|
{:else}
|
|
200
|
-
|
|
204
|
+
<FlexRender
|
|
205
|
+
content={cell.column.columnDef.cell}
|
|
206
|
+
context={cell.getContext()}
|
|
207
|
+
/>
|
|
201
208
|
{/if}
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
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>
|
|
208
220
|
<td
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
{/each}
|
|
221
|
-
{/key}
|
|
222
|
-
</tbody>
|
|
223
|
-
</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}
|
|
224
232
|
</div>
|
|
225
233
|
|
|
226
234
|
<div class="shrink-0 border-t border-surface-3 bg-surface-2 px-3 py-2 text-sm text-ink-dim">
|