@dataloop-ai/components 0.20.164 → 0.20.166
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 +1 -1
- package/src/components/compound/DlTable/DlTable.vue +13 -13
- package/src/components/compound/DlTable/hooks/tableRowSelection.ts +12 -8
- package/src/components/compound/DlTable/types.ts +1 -0
- package/src/components/compound/DlTreeTable/DlTreeTable.vue +59 -13
- package/src/components/compound/DlTreeTable/utils/treeTableRowSelection.ts +3 -1
- package/src/components/compound/DlTreeTable/views/DlTrTreeView.vue +1 -2
- package/src/demos/DlTreeTableDemo.vue +11 -3
package/package.json
CHANGED
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
>
|
|
61
61
|
<DlTr>
|
|
62
62
|
<th
|
|
63
|
-
v-if="
|
|
63
|
+
v-if="isTreeTable"
|
|
64
64
|
class="dl-table--col-auto-width empty-col"
|
|
65
65
|
:data-resizable="false"
|
|
66
66
|
style="width: 25px"
|
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
<div
|
|
157
157
|
v-if="
|
|
158
158
|
visibleColumns &&
|
|
159
|
-
|
|
159
|
+
visibleColumns.length
|
|
160
160
|
"
|
|
161
161
|
class="visible-columns-justify-end"
|
|
162
162
|
style="width: 100%; display: flex"
|
|
@@ -269,8 +269,8 @@
|
|
|
269
269
|
isRowSelected(getRowKey(props.item))
|
|
270
270
|
? 'selected'
|
|
271
271
|
: hasAnyAction
|
|
272
|
-
|
|
273
|
-
|
|
272
|
+
? ' cursor-pointer'
|
|
273
|
+
: ''
|
|
274
274
|
"
|
|
275
275
|
:no-hover="noHover"
|
|
276
276
|
@click="
|
|
@@ -457,7 +457,7 @@
|
|
|
457
457
|
>
|
|
458
458
|
<DlTr>
|
|
459
459
|
<th
|
|
460
|
-
v-if="
|
|
460
|
+
v-if="isTreeTable"
|
|
461
461
|
class="dl-table--col-auto-width empty-col"
|
|
462
462
|
:data-resizable="false"
|
|
463
463
|
style="width: 25px"
|
|
@@ -555,7 +555,7 @@
|
|
|
555
555
|
<div
|
|
556
556
|
v-if="
|
|
557
557
|
visibleColumns &&
|
|
558
|
-
|
|
558
|
+
visibleColumns.length
|
|
559
559
|
"
|
|
560
560
|
class="visible-columns-justify-end"
|
|
561
561
|
style="width: 100%; display: flex"
|
|
@@ -666,8 +666,8 @@
|
|
|
666
666
|
<dl-top-scroll
|
|
667
667
|
v-if="
|
|
668
668
|
tableScroll &&
|
|
669
|
-
|
|
670
|
-
|
|
669
|
+
infiniteScroll &&
|
|
670
|
+
!isDataEmpty
|
|
671
671
|
"
|
|
672
672
|
:container-ref="tableScroll"
|
|
673
673
|
@scroll-to-top="
|
|
@@ -701,8 +701,8 @@
|
|
|
701
701
|
isRowSelected(getRowKey(row))
|
|
702
702
|
? 'selected'
|
|
703
703
|
: hasAnyAction
|
|
704
|
-
|
|
705
|
-
|
|
704
|
+
? ' cursor-pointer'
|
|
705
|
+
: ''
|
|
706
706
|
"
|
|
707
707
|
:no-hover="noHover"
|
|
708
708
|
@click="onTrClick($event, row, pageIndex)"
|
|
@@ -837,8 +837,8 @@
|
|
|
837
837
|
<dl-bottom-scroll
|
|
838
838
|
v-if="
|
|
839
839
|
tableScroll &&
|
|
840
|
-
|
|
841
|
-
|
|
840
|
+
infiniteScroll &&
|
|
841
|
+
!isDataEmpty
|
|
842
842
|
"
|
|
843
843
|
:container-ref="tableScroll"
|
|
844
844
|
@scroll-to-bottom="
|
|
@@ -895,7 +895,7 @@
|
|
|
895
895
|
<div
|
|
896
896
|
v-if="
|
|
897
897
|
hasBottomSelectionBanner &&
|
|
898
|
-
|
|
898
|
+
selectedRowsLabel(rowsSelectedNumber)
|
|
899
899
|
"
|
|
900
900
|
class="dl-table__control"
|
|
901
901
|
>
|
|
@@ -51,14 +51,18 @@ export function useTableRowSelection(
|
|
|
51
51
|
)
|
|
52
52
|
)
|
|
53
53
|
|
|
54
|
-
const someRowsSelected = computed(
|
|
55
|
-
()
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
)
|
|
60
|
-
|
|
61
|
-
|
|
54
|
+
const someRowsSelected = computed(() => {
|
|
55
|
+
if (allRowsSelected.value === true) return false
|
|
56
|
+
const stack = computedRows.value.slice()
|
|
57
|
+
while (stack.length) {
|
|
58
|
+
const row = stack.pop()
|
|
59
|
+
if (selectedKeys.value[getRowKey.value(row)] === true) return true
|
|
60
|
+
if (row.children && row.children.length) {
|
|
61
|
+
stack.push(...row.children)
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
return false
|
|
65
|
+
})
|
|
62
66
|
const rowsSelectedNumber = computed(() => props.selected.length)
|
|
63
67
|
|
|
64
68
|
function isRowSelected(key: string) {
|
|
@@ -513,7 +513,12 @@ export default defineComponent({
|
|
|
513
513
|
props.rowKey
|
|
514
514
|
)
|
|
515
515
|
|
|
516
|
-
updateSelection(
|
|
516
|
+
selectedData.value = updateSelection(
|
|
517
|
+
childrenKeys,
|
|
518
|
+
childrenCollection,
|
|
519
|
+
adding,
|
|
520
|
+
event
|
|
521
|
+
)
|
|
517
522
|
}
|
|
518
523
|
const headerSelectedValue = computed(() => {
|
|
519
524
|
if (selectedData.value.length === tableRows.value.length)
|
|
@@ -538,16 +543,7 @@ export default defineComponent({
|
|
|
538
543
|
updateSelected(value ? tableRows.value : [])
|
|
539
544
|
}
|
|
540
545
|
const updateSelected = (payload: DlTableRow[]) => {
|
|
541
|
-
|
|
542
|
-
selectedData.value = payload
|
|
543
|
-
|
|
544
|
-
if (payload.length > 0) {
|
|
545
|
-
selectAllRows(true)
|
|
546
|
-
} else if (payload.length === 0 && hasSelection) {
|
|
547
|
-
selectAllRows(false)
|
|
548
|
-
} else {
|
|
549
|
-
emitSelectedItems(payload)
|
|
550
|
-
}
|
|
546
|
+
selectedData.value = selectAllRows(!allRowsSelected.value)
|
|
551
547
|
}
|
|
552
548
|
const emitSelectedItems = (payload: DlTableRow[]) => {
|
|
553
549
|
emit('selected-items', payload)
|
|
@@ -758,7 +754,10 @@ export default defineComponent({
|
|
|
758
754
|
animation: 150,
|
|
759
755
|
fallbackOnBody: true,
|
|
760
756
|
invertSwap: true,
|
|
761
|
-
swapThreshold: 0.
|
|
757
|
+
swapThreshold: 0.85,
|
|
758
|
+
handle: '.draggable-icon',
|
|
759
|
+
ghostClass: 'dl-table-ghost-row',
|
|
760
|
+
onMove: handleMoveEvent
|
|
762
761
|
}
|
|
763
762
|
},
|
|
764
763
|
isVue2 ? tbodyEls : () => tbodyEls
|
|
@@ -896,6 +895,50 @@ export default defineComponent({
|
|
|
896
895
|
})
|
|
897
896
|
}
|
|
898
897
|
|
|
898
|
+
const handleMoveEvent = (event: SortableJs.MoveEvent): boolean => {
|
|
899
|
+
if (!draggedRow.value) {
|
|
900
|
+
return false
|
|
901
|
+
}
|
|
902
|
+
|
|
903
|
+
const targetRow = getTargetRowFromMoveEvent(event)
|
|
904
|
+
if (!targetRow) {
|
|
905
|
+
return false
|
|
906
|
+
}
|
|
907
|
+
|
|
908
|
+
return checkParentCondition(draggedRow.value, targetRow)
|
|
909
|
+
}
|
|
910
|
+
|
|
911
|
+
const getTargetRowFromMoveEvent = (
|
|
912
|
+
event: SortableJs.MoveEvent
|
|
913
|
+
): DlTableRow | null => {
|
|
914
|
+
const { related: targetElement } = event
|
|
915
|
+
|
|
916
|
+
if (!targetElement) {
|
|
917
|
+
return null
|
|
918
|
+
}
|
|
919
|
+
|
|
920
|
+
let targetRowId = targetElement.getAttribute('data-id')
|
|
921
|
+
if (!targetRowId && targetElement.tagName === 'TBODY') {
|
|
922
|
+
const firstTr = targetElement.querySelector('tr')
|
|
923
|
+
targetRowId = firstTr?.getAttribute('data-id') || null
|
|
924
|
+
}
|
|
925
|
+
|
|
926
|
+
if (!targetRowId) {
|
|
927
|
+
return null
|
|
928
|
+
}
|
|
929
|
+
let foundTargetRow = tableRows.value.find(
|
|
930
|
+
(row: DlTableRow) => row.id === targetRowId
|
|
931
|
+
)
|
|
932
|
+
if (!foundTargetRow) {
|
|
933
|
+
foundTargetRow = findRowInNestedStructure(
|
|
934
|
+
targetRowId,
|
|
935
|
+
props.rows
|
|
936
|
+
)
|
|
937
|
+
}
|
|
938
|
+
|
|
939
|
+
return foundTargetRow
|
|
940
|
+
}
|
|
941
|
+
|
|
899
942
|
const checkParentCondition = (
|
|
900
943
|
draggedRow: DlTableRow,
|
|
901
944
|
targetRow: DlTableRow
|
|
@@ -1073,7 +1116,10 @@ export default defineComponent({
|
|
|
1073
1116
|
animation: 150,
|
|
1074
1117
|
fallbackOnBody: true,
|
|
1075
1118
|
invertSwap: true,
|
|
1076
|
-
swapThreshold: 0.
|
|
1119
|
+
swapThreshold: 0.85,
|
|
1120
|
+
handle: '.draggable-icon',
|
|
1121
|
+
ghostClass: 'dl-table-ghost-row',
|
|
1122
|
+
onMove: handleMoveEvent
|
|
1077
1123
|
}
|
|
1078
1124
|
},
|
|
1079
1125
|
isVue2 ? children : () => children
|
|
@@ -182,6 +182,7 @@ export function useTreeTableRowSelection(
|
|
|
182
182
|
selectedItemsNested.value = selectedItems
|
|
183
183
|
|
|
184
184
|
emit('selected-items', selectedItems)
|
|
185
|
+
return selectedItems
|
|
185
186
|
}
|
|
186
187
|
|
|
187
188
|
function isIncludedInSelectedNestedItems(
|
|
@@ -257,12 +258,13 @@ export function useTreeTableRowSelection(
|
|
|
257
258
|
if (select) {
|
|
258
259
|
const allRows = getAllRows(computedRows.value)
|
|
259
260
|
const allKeys = allRows.map(getRowKey.value)
|
|
260
|
-
updateSelection(allKeys, allRows, true)
|
|
261
|
+
return updateSelection(allKeys, allRows, true)
|
|
261
262
|
} else {
|
|
262
263
|
clearSelection()
|
|
263
264
|
selectedItemsNested.value = []
|
|
264
265
|
emit('selected-items', [])
|
|
265
266
|
}
|
|
267
|
+
return []
|
|
266
268
|
}
|
|
267
269
|
|
|
268
270
|
return {
|
|
@@ -11,13 +11,12 @@
|
|
|
11
11
|
@mouseleave="onRowHoverEnd($event, row, rowIndex)"
|
|
12
12
|
>
|
|
13
13
|
<td
|
|
14
|
-
v-if="hasDraggableRows"
|
|
15
14
|
:style="`width: 25px; opacity: ${
|
|
16
15
|
isDragIconVisible || isRowHighlighted ? '1' : '0'
|
|
17
16
|
}`"
|
|
18
17
|
>
|
|
19
18
|
<dl-icon
|
|
20
|
-
|
|
19
|
+
v-if="hasDraggableRows && !row.disableDraggable"
|
|
21
20
|
class="draggable-icon"
|
|
22
21
|
icon="icon-dl-drag"
|
|
23
22
|
size="12px"
|
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
:loading="loading"
|
|
111
111
|
:rows="tableRows"
|
|
112
112
|
:resizable="resizable"
|
|
113
|
-
row-key="
|
|
113
|
+
row-key="id"
|
|
114
114
|
color="dl-color-secondary"
|
|
115
115
|
title="Table Title"
|
|
116
116
|
:virtual-scroll="vScroll"
|
|
@@ -560,7 +560,15 @@ const columns2 = [
|
|
|
560
560
|
hint: 'test hint'
|
|
561
561
|
}
|
|
562
562
|
]
|
|
563
|
-
|
|
563
|
+
function markAllSelectable(list: DlTableRow[]): DlTableRow[] {
|
|
564
|
+
return list.map((r) => ({
|
|
565
|
+
...r,
|
|
566
|
+
isSelectable: true,
|
|
567
|
+
...(Array.isArray(r.children) && r.children.length
|
|
568
|
+
? { children: markAllSelectable(r.children) }
|
|
569
|
+
: {})
|
|
570
|
+
}))
|
|
571
|
+
}
|
|
564
572
|
export default defineComponent({
|
|
565
573
|
components: {
|
|
566
574
|
DlSwitch,
|
|
@@ -583,7 +591,7 @@ export default defineComponent({
|
|
|
583
591
|
const denseState = ref([])
|
|
584
592
|
const virtualScroll = ref([])
|
|
585
593
|
const resizableState = ref([])
|
|
586
|
-
const tableRows = ref(rows)
|
|
594
|
+
const tableRows = ref(markAllSelectable(rows))
|
|
587
595
|
const tableRowsVS = ref(cloneDeep(rows))
|
|
588
596
|
const draggable = ref('both')
|
|
589
597
|
const tableColumns = ref(columns)
|