@pocketprep/ui-kit 3.4.6 → 3.4.7
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.
- package/dist/@pocketprep/ui-kit.js +2661 -2607
- package/dist/@pocketprep/ui-kit.js.map +1 -1
- package/dist/@pocketprep/ui-kit.umd.cjs +8 -8
- package/dist/@pocketprep/ui-kit.umd.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/lib/components/Tables/Table.vue +99 -1
- package/lib/components/Tables/table.d.ts +9 -0
- package/package.json +1 -1
|
@@ -173,6 +173,59 @@
|
|
|
173
173
|
</slot>
|
|
174
174
|
</template>
|
|
175
175
|
</tr>
|
|
176
|
+
<template v-for="subrow in row.subrows">
|
|
177
|
+
<slot name="tableSubrow" :subrow="subrow">
|
|
178
|
+
<tr
|
|
179
|
+
:key="`subrow--${subrow.id}`"
|
|
180
|
+
v-dark="isDarkMode"
|
|
181
|
+
role="subrow"
|
|
182
|
+
:tabIndex="row.tabIndex === 0 ? 0 : -1"
|
|
183
|
+
:class="{
|
|
184
|
+
'uikit-table__subrow--hover-focus': row.tabIndex === 0
|
|
185
|
+
}"
|
|
186
|
+
class="uikit-table__subrow"
|
|
187
|
+
:style="{
|
|
188
|
+
...gridStyles,
|
|
189
|
+
...tableSubrowsStyles,
|
|
190
|
+
...subrow.styles,
|
|
191
|
+
}"
|
|
192
|
+
v-show="row.displaySubrows"
|
|
193
|
+
@click="emitRowClicked(subrow)"
|
|
194
|
+
@keydown.enter="emitRowClicked(subrow)"
|
|
195
|
+
@mouseenter="emitRowEnter(subrow)"
|
|
196
|
+
@mouseleave="emitRowLeave(subrow)"
|
|
197
|
+
>
|
|
198
|
+
<template v-for="column in columns">
|
|
199
|
+
<slot name="subrowCell"
|
|
200
|
+
:subrow="subrow"
|
|
201
|
+
:column="column"
|
|
202
|
+
:table-cell-styles="tableCellStyles"
|
|
203
|
+
>
|
|
204
|
+
<td
|
|
205
|
+
:key="`subrow-${subrow.id}--column-${column.propName}`"
|
|
206
|
+
role="cell"
|
|
207
|
+
class="uikit-table__cell"
|
|
208
|
+
:style="{
|
|
209
|
+
...tableCellStyles,
|
|
210
|
+
...column.styles,
|
|
211
|
+
}"
|
|
212
|
+
@click="emitCellClicked(subrow, column)"
|
|
213
|
+
>
|
|
214
|
+
<slot
|
|
215
|
+
name="tableSubrowCellValue"
|
|
216
|
+
:subrow="subrow"
|
|
217
|
+
:column="column"
|
|
218
|
+
>
|
|
219
|
+
<OverflowTooltip>
|
|
220
|
+
{{ subrow[column.propName] }}
|
|
221
|
+
</OverflowTooltip>
|
|
222
|
+
</slot>
|
|
223
|
+
</td>
|
|
224
|
+
</slot>
|
|
225
|
+
</template>
|
|
226
|
+
</tr>
|
|
227
|
+
</slot>
|
|
228
|
+
</template>
|
|
176
229
|
</slot>
|
|
177
230
|
</template>
|
|
178
231
|
</tbody>
|
|
@@ -236,6 +289,8 @@ export default class Table extends Vue {
|
|
|
236
289
|
@Prop() tableRowStyles!: Record<string, string>
|
|
237
290
|
// .table__cell
|
|
238
291
|
@Prop() tableCellStyles!: Record<string, string>
|
|
292
|
+
// .table__subrow
|
|
293
|
+
@Prop() tableSubrowsStyles!: Record<string, string>
|
|
239
294
|
|
|
240
295
|
gridStyles: Record<string, string> = {}
|
|
241
296
|
currentSort: ITableSortSettings = {
|
|
@@ -255,7 +310,6 @@ export default class Table extends Vue {
|
|
|
255
310
|
} else {
|
|
256
311
|
const numColumns = this.columns.length
|
|
257
312
|
this.gridStyles = {
|
|
258
|
-
'display': 'inline-grid',
|
|
259
313
|
'grid-template-columns': `repeat(${numColumns}, 1fr)`,
|
|
260
314
|
}
|
|
261
315
|
}
|
|
@@ -356,6 +410,7 @@ export default class Table extends Vue {
|
|
|
356
410
|
}
|
|
357
411
|
|
|
358
412
|
&__column-labels {
|
|
413
|
+
display: inline-grid;
|
|
359
414
|
min-width: 100%;
|
|
360
415
|
padding: 5px 22px 5px 11px;
|
|
361
416
|
font-size: 11px;
|
|
@@ -454,6 +509,7 @@ export default class Table extends Vue {
|
|
|
454
509
|
}
|
|
455
510
|
|
|
456
511
|
&__row {
|
|
512
|
+
display: inline-grid;
|
|
457
513
|
position: relative;
|
|
458
514
|
max-width: 100%;
|
|
459
515
|
min-width: 100%;
|
|
@@ -487,6 +543,48 @@ export default class Table extends Vue {
|
|
|
487
543
|
}
|
|
488
544
|
}
|
|
489
545
|
|
|
546
|
+
&__subrow {
|
|
547
|
+
display: inline-grid;
|
|
548
|
+
position: relative;
|
|
549
|
+
max-width: 100%;
|
|
550
|
+
min-width: 100%;
|
|
551
|
+
padding: 10px 22px 10px 11px;
|
|
552
|
+
font-size: 15px;
|
|
553
|
+
line-height: 19px;
|
|
554
|
+
border-bottom: 1px solid $gray-divider;
|
|
555
|
+
outline: none;
|
|
556
|
+
|
|
557
|
+
td:first-child {
|
|
558
|
+
position: relative;
|
|
559
|
+
font-size: 14px;
|
|
560
|
+
left: 15px;
|
|
561
|
+
width: calc(100% - 15px);
|
|
562
|
+
}
|
|
563
|
+
|
|
564
|
+
&--dark {
|
|
565
|
+
border-bottom-color: $ash;
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
&--hover-focus {
|
|
569
|
+
&:hover {
|
|
570
|
+
background-color: mix($barely-background, $brand-black, 96%);
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
&:focus {
|
|
574
|
+
&::before {
|
|
575
|
+
content: '';
|
|
576
|
+
position: absolute;
|
|
577
|
+
top: 0;
|
|
578
|
+
bottom: 0;
|
|
579
|
+
left: 0;
|
|
580
|
+
right: 0;
|
|
581
|
+
border: 1px solid $brand-blue;
|
|
582
|
+
border-radius: 6px;
|
|
583
|
+
}
|
|
584
|
+
}
|
|
585
|
+
}
|
|
586
|
+
}
|
|
587
|
+
|
|
490
588
|
&__cell {
|
|
491
589
|
white-space: nowrap;
|
|
492
590
|
text-overflow: ellipsis;
|
|
@@ -24,9 +24,18 @@ export interface ITableColumn {
|
|
|
24
24
|
isLabelHidden?: boolean
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
export type TTableSubrow = {
|
|
28
|
+
id: string | number
|
|
29
|
+
styles?: Record<string, string>
|
|
30
|
+
} & {
|
|
31
|
+
[key: string]: unknown
|
|
32
|
+
}
|
|
33
|
+
|
|
27
34
|
export type TTableRow = {
|
|
28
35
|
id: string | number
|
|
29
36
|
styles?: Record<string, string>
|
|
37
|
+
displaySubrows?: boolean
|
|
38
|
+
subrows?: TTableSubrow[]
|
|
30
39
|
} & {
|
|
31
40
|
[key: string]: unknown
|
|
32
41
|
}
|