@dataloop-ai/components 0.19.50 → 0.19.51
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/package.json
CHANGED
|
@@ -112,6 +112,12 @@
|
|
|
112
112
|
</slot>
|
|
113
113
|
</th>
|
|
114
114
|
|
|
115
|
+
<th
|
|
116
|
+
v-if="expandableRows"
|
|
117
|
+
style="width: 26px"
|
|
118
|
+
class="dl-table--col-auto-with dl-table--col-icon-wrapper"
|
|
119
|
+
/>
|
|
120
|
+
|
|
115
121
|
<th
|
|
116
122
|
v-if="isTreeTable"
|
|
117
123
|
class="dl-table--col-auto-with empty-col chevron-header"
|
|
@@ -334,6 +340,12 @@
|
|
|
334
340
|
/>
|
|
335
341
|
</slot>
|
|
336
342
|
</td>
|
|
343
|
+
<td v-if="expandableRows">
|
|
344
|
+
<dl-icon
|
|
345
|
+
:icon="getRowExpandedIcon(props.item)"
|
|
346
|
+
@click="updateExpanded(props.item)"
|
|
347
|
+
/>
|
|
348
|
+
</td>
|
|
337
349
|
<DlTd
|
|
338
350
|
v-for="(col, colIndex) in computedCols"
|
|
339
351
|
:key="col.name"
|
|
@@ -387,6 +399,24 @@
|
|
|
387
399
|
/>
|
|
388
400
|
</DlTd>
|
|
389
401
|
</DlTr>
|
|
402
|
+
<tr
|
|
403
|
+
v-if="isRowExpanded(props.item)"
|
|
404
|
+
:key="
|
|
405
|
+
getRowKey(props.item)?.toString() +
|
|
406
|
+
'-expanded'
|
|
407
|
+
"
|
|
408
|
+
>
|
|
409
|
+
<td :colspan="columns.length + 1">
|
|
410
|
+
<slot
|
|
411
|
+
v-bind="{ row: props.item }"
|
|
412
|
+
name="body-cell-expandable-content"
|
|
413
|
+
>
|
|
414
|
+
<div class="expanded-row">
|
|
415
|
+
{{ emptyExpandableMessage }}
|
|
416
|
+
</div>
|
|
417
|
+
</slot>
|
|
418
|
+
</td>
|
|
419
|
+
</tr>
|
|
390
420
|
</slot>
|
|
391
421
|
</template>
|
|
392
422
|
<DlTr v-if="isDataEmpty">
|
|
@@ -461,6 +491,12 @@
|
|
|
461
491
|
</slot>
|
|
462
492
|
</th>
|
|
463
493
|
|
|
494
|
+
<th
|
|
495
|
+
v-if="expandableRows"
|
|
496
|
+
style="width: 26px"
|
|
497
|
+
class="dl-table--col-auto-with dl-table--col-icon-wrapper"
|
|
498
|
+
/>
|
|
499
|
+
|
|
464
500
|
<th
|
|
465
501
|
v-if="isTreeTable"
|
|
466
502
|
class="dl-table--col-auto-with empty-col"
|
|
@@ -696,6 +732,12 @@
|
|
|
696
732
|
/>
|
|
697
733
|
</slot>
|
|
698
734
|
</td>
|
|
735
|
+
<td v-if="expandableRows">
|
|
736
|
+
<dl-icon
|
|
737
|
+
:icon="getRowExpandedIcon(row)"
|
|
738
|
+
@click="updateExpanded(row)"
|
|
739
|
+
/>
|
|
740
|
+
</td>
|
|
699
741
|
<DlTd
|
|
700
742
|
v-for="(col, colIndex) in computedCols"
|
|
701
743
|
:key="col.name"
|
|
@@ -748,6 +790,23 @@
|
|
|
748
790
|
/>
|
|
749
791
|
</DlTd>
|
|
750
792
|
</DlTr>
|
|
793
|
+
<tr
|
|
794
|
+
v-if="isRowExpanded(row)"
|
|
795
|
+
:key="
|
|
796
|
+
getRowKey(row)?.toString() + '-expanded'
|
|
797
|
+
"
|
|
798
|
+
>
|
|
799
|
+
<td :colspan="columns.length + 1">
|
|
800
|
+
<slot
|
|
801
|
+
v-bind="{ row }"
|
|
802
|
+
name="body-cell-expandable-content"
|
|
803
|
+
>
|
|
804
|
+
<div class="expanded-row">
|
|
805
|
+
{{ emptyExpandableMessage }}
|
|
806
|
+
</div>
|
|
807
|
+
</slot>
|
|
808
|
+
</td>
|
|
809
|
+
</tr>
|
|
751
810
|
</slot>
|
|
752
811
|
</slot>
|
|
753
812
|
|
|
@@ -1138,6 +1197,14 @@ export default defineComponent({
|
|
|
1138
1197
|
type: Boolean,
|
|
1139
1198
|
default: true
|
|
1140
1199
|
},
|
|
1200
|
+
expandableRows: {
|
|
1201
|
+
type: Boolean,
|
|
1202
|
+
default: false
|
|
1203
|
+
},
|
|
1204
|
+
emptyExpandableMessage: {
|
|
1205
|
+
type: String,
|
|
1206
|
+
default: 'No data'
|
|
1207
|
+
},
|
|
1141
1208
|
...useTableActionsProps,
|
|
1142
1209
|
...commonVirtScrollProps,
|
|
1143
1210
|
...useTableRowExpandProps,
|
|
@@ -1522,7 +1589,6 @@ export default defineComponent({
|
|
|
1522
1589
|
allRowsSelected,
|
|
1523
1590
|
someRowsSelected,
|
|
1524
1591
|
rowsSelectedNumber,
|
|
1525
|
-
|
|
1526
1592
|
isRowSelected,
|
|
1527
1593
|
clearSelection,
|
|
1528
1594
|
updateSelection
|
|
@@ -1532,7 +1598,6 @@ export default defineComponent({
|
|
|
1532
1598
|
computedRows,
|
|
1533
1599
|
getRowKey as ComputedRef<(val: string | DlTableRow) => any>
|
|
1534
1600
|
)
|
|
1535
|
-
|
|
1536
1601
|
const { colList, computedCols, computedColsMap, computedColspan } =
|
|
1537
1602
|
useTableColumnSelection(
|
|
1538
1603
|
props as unknown as DlTableProps,
|
|
@@ -1751,8 +1816,8 @@ export default defineComponent({
|
|
|
1751
1816
|
data,
|
|
1752
1817
|
'expand',
|
|
1753
1818
|
() => isRowExpanded(data.key),
|
|
1754
|
-
(
|
|
1755
|
-
updateExpanded(data.key
|
|
1819
|
+
() => {
|
|
1820
|
+
updateExpanded(data.key)
|
|
1756
1821
|
}
|
|
1757
1822
|
)
|
|
1758
1823
|
}
|
|
@@ -1861,6 +1926,12 @@ export default defineComponent({
|
|
|
1861
1926
|
!!hasSlotByName(`body-cell-row-actions`)
|
|
1862
1927
|
)
|
|
1863
1928
|
|
|
1929
|
+
const getRowExpandedIcon = (row: DlTableRow) => {
|
|
1930
|
+
return isRowExpanded(row)
|
|
1931
|
+
? 'icon-dl-up-chevron'
|
|
1932
|
+
: 'icon-dl-down-chevron'
|
|
1933
|
+
}
|
|
1934
|
+
|
|
1864
1935
|
return {
|
|
1865
1936
|
containerStyle,
|
|
1866
1937
|
isDataEmpty,
|
|
@@ -1907,6 +1978,8 @@ export default defineComponent({
|
|
|
1907
1978
|
getBodySelectionScope,
|
|
1908
1979
|
hasAnyAction,
|
|
1909
1980
|
updateSelection,
|
|
1981
|
+
updateExpanded,
|
|
1982
|
+
isRowExpanded,
|
|
1910
1983
|
setPagination,
|
|
1911
1984
|
hasLoadingSlot,
|
|
1912
1985
|
displayPagination,
|
|
@@ -1928,6 +2001,7 @@ export default defineComponent({
|
|
|
1928
2001
|
totalItemsCount,
|
|
1929
2002
|
showRowActions,
|
|
1930
2003
|
tableRef,
|
|
2004
|
+
getRowExpandedIcon,
|
|
1931
2005
|
computedPagination
|
|
1932
2006
|
}
|
|
1933
2007
|
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { isUndefined } from 'lodash'
|
|
2
2
|
import { ref, watch } from 'vue-demi'
|
|
3
|
+
import { DlTableRow } from '../types'
|
|
3
4
|
|
|
4
|
-
function getVal(val:
|
|
5
|
+
function getVal(val: DlTableRow[]) {
|
|
5
6
|
return Array.isArray(val) ? val.slice() : []
|
|
6
7
|
}
|
|
7
8
|
|
|
@@ -21,11 +22,11 @@ export function useTableRowExpand(props: any, emit: Function) {
|
|
|
21
22
|
}
|
|
22
23
|
)
|
|
23
24
|
|
|
24
|
-
function isRowExpanded(
|
|
25
|
-
return innerExpanded.value.includes(
|
|
25
|
+
function isRowExpanded(row: DlTableRow) {
|
|
26
|
+
return innerExpanded.value.includes(row)
|
|
26
27
|
}
|
|
27
28
|
|
|
28
|
-
function setExpanded(val:
|
|
29
|
+
function setExpanded(val: DlTableRow[]) {
|
|
29
30
|
if (props.expanded !== null && !isUndefined(props.expanded)) {
|
|
30
31
|
emit('update:expanded', val)
|
|
31
32
|
} else {
|
|
@@ -33,13 +34,13 @@ export function useTableRowExpand(props: any, emit: Function) {
|
|
|
33
34
|
}
|
|
34
35
|
}
|
|
35
36
|
|
|
36
|
-
function updateExpanded(
|
|
37
|
+
function updateExpanded(row: DlTableRow) {
|
|
37
38
|
const target = innerExpanded.value.slice()
|
|
38
|
-
const index = target.indexOf(
|
|
39
|
+
const index = target.indexOf(row)
|
|
39
40
|
|
|
40
|
-
if (
|
|
41
|
+
if (!isRowExpanded(row)) {
|
|
41
42
|
if (index === -1) {
|
|
42
|
-
target.push(
|
|
43
|
+
target.push(row)
|
|
43
44
|
setExpanded(target)
|
|
44
45
|
}
|
|
45
46
|
} else if (index !== -1) {
|
|
@@ -150,6 +150,54 @@
|
|
|
150
150
|
</DlTable>
|
|
151
151
|
</div>
|
|
152
152
|
|
|
153
|
+
<div style="margin-top: 100px">
|
|
154
|
+
Expandable Rows
|
|
155
|
+
<DlTable
|
|
156
|
+
:expanded="expanded"
|
|
157
|
+
:columns="tableColumns"
|
|
158
|
+
expandable-rows
|
|
159
|
+
class="sticky-header"
|
|
160
|
+
:rows="tableRows"
|
|
161
|
+
row-key="id"
|
|
162
|
+
style="height: 500px"
|
|
163
|
+
:rows-per-page-options="rowsPerPageOptions"
|
|
164
|
+
@row-click="log"
|
|
165
|
+
@th-click="log"
|
|
166
|
+
@update:selected="updateSeleted"
|
|
167
|
+
@update:expanded="updateExpanded"
|
|
168
|
+
>
|
|
169
|
+
<template #body-cell-expandable-content="{ row }">
|
|
170
|
+
<div
|
|
171
|
+
v-if="
|
|
172
|
+
[
|
|
173
|
+
tableRows[0].name,
|
|
174
|
+
tableRows[1].name,
|
|
175
|
+
tableRows[2].name
|
|
176
|
+
].includes(row.name)
|
|
177
|
+
"
|
|
178
|
+
class="expanded-row"
|
|
179
|
+
>
|
|
180
|
+
This is some more information about {{ row.name }}
|
|
181
|
+
</div>
|
|
182
|
+
<div
|
|
183
|
+
v-else-if="
|
|
184
|
+
[
|
|
185
|
+
tableRows[3].name,
|
|
186
|
+
tableRows[4].name,
|
|
187
|
+
tableRows[5].name
|
|
188
|
+
].includes(row.name)
|
|
189
|
+
"
|
|
190
|
+
class="expanded-row"
|
|
191
|
+
>
|
|
192
|
+
<img
|
|
193
|
+
src="https://popcat.click/twitter-card.jpg"
|
|
194
|
+
style="width: 150px; height: 150px"
|
|
195
|
+
>
|
|
196
|
+
</div>
|
|
197
|
+
</template>
|
|
198
|
+
</DlTable>
|
|
199
|
+
</div>
|
|
200
|
+
|
|
153
201
|
<div style="margin-top: 100px">
|
|
154
202
|
Loading WIth custom row
|
|
155
203
|
<DlTable
|
|
@@ -702,6 +750,7 @@ export default defineComponent({
|
|
|
702
750
|
setup() {
|
|
703
751
|
const filter = ref('')
|
|
704
752
|
const selected = ref([])
|
|
753
|
+
const expanded = ref([])
|
|
705
754
|
const selection = ref('none')
|
|
706
755
|
const separator = ref('horizontal')
|
|
707
756
|
const bordered = ref(false)
|
|
@@ -842,6 +891,7 @@ export default defineComponent({
|
|
|
842
891
|
updateColumns,
|
|
843
892
|
filter,
|
|
844
893
|
selected,
|
|
894
|
+
expanded,
|
|
845
895
|
selection,
|
|
846
896
|
separator,
|
|
847
897
|
bordered,
|
|
@@ -879,7 +929,11 @@ export default defineComponent({
|
|
|
879
929
|
this.rowsPerPageOptions[this.rowsPerPageOptions.length - 1] + 2
|
|
880
930
|
)
|
|
881
931
|
},
|
|
932
|
+
updateExpanded(payload: any) {
|
|
933
|
+
this.expanded = payload
|
|
934
|
+
},
|
|
882
935
|
updateSeleted(payload: any) {
|
|
936
|
+
console.log(payload)
|
|
883
937
|
this.selected = payload
|
|
884
938
|
},
|
|
885
939
|
updateBorderedState(val: boolean[]): void {
|
|
@@ -992,6 +1046,12 @@ label {
|
|
|
992
1046
|
font-size: 12px;
|
|
993
1047
|
}
|
|
994
1048
|
|
|
1049
|
+
.expanded-row {
|
|
1050
|
+
font-size: 12px;
|
|
1051
|
+
display: flex;
|
|
1052
|
+
justify-content: center;
|
|
1053
|
+
}
|
|
1054
|
+
|
|
995
1055
|
.sticky-header {
|
|
996
1056
|
::v-deep .dl-table__top,
|
|
997
1057
|
::v-deep .dl-table__bottom,
|