@dataloop-ai/components 0.20.164 → 0.20.165
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
|
@@ -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
|
>
|
|
@@ -758,7 +758,10 @@ export default defineComponent({
|
|
|
758
758
|
animation: 150,
|
|
759
759
|
fallbackOnBody: true,
|
|
760
760
|
invertSwap: true,
|
|
761
|
-
swapThreshold: 0.
|
|
761
|
+
swapThreshold: 0.85,
|
|
762
|
+
handle: '.draggable-icon',
|
|
763
|
+
ghostClass: 'dl-table-ghost-row',
|
|
764
|
+
onMove: handleMoveEvent
|
|
762
765
|
}
|
|
763
766
|
},
|
|
764
767
|
isVue2 ? tbodyEls : () => tbodyEls
|
|
@@ -896,6 +899,50 @@ export default defineComponent({
|
|
|
896
899
|
})
|
|
897
900
|
}
|
|
898
901
|
|
|
902
|
+
const handleMoveEvent = (event: SortableJs.MoveEvent): boolean => {
|
|
903
|
+
if (!draggedRow.value) {
|
|
904
|
+
return false
|
|
905
|
+
}
|
|
906
|
+
|
|
907
|
+
const targetRow = getTargetRowFromMoveEvent(event)
|
|
908
|
+
if (!targetRow) {
|
|
909
|
+
return false
|
|
910
|
+
}
|
|
911
|
+
|
|
912
|
+
return checkParentCondition(draggedRow.value, targetRow)
|
|
913
|
+
}
|
|
914
|
+
|
|
915
|
+
const getTargetRowFromMoveEvent = (
|
|
916
|
+
event: SortableJs.MoveEvent
|
|
917
|
+
): DlTableRow | null => {
|
|
918
|
+
const { related: targetElement } = event
|
|
919
|
+
|
|
920
|
+
if (!targetElement) {
|
|
921
|
+
return null
|
|
922
|
+
}
|
|
923
|
+
|
|
924
|
+
let targetRowId = targetElement.getAttribute('data-id')
|
|
925
|
+
if (!targetRowId && targetElement.tagName === 'TBODY') {
|
|
926
|
+
const firstTr = targetElement.querySelector('tr')
|
|
927
|
+
targetRowId = firstTr?.getAttribute('data-id') || null
|
|
928
|
+
}
|
|
929
|
+
|
|
930
|
+
if (!targetRowId) {
|
|
931
|
+
return null
|
|
932
|
+
}
|
|
933
|
+
let foundTargetRow = tableRows.value.find(
|
|
934
|
+
(row: DlTableRow) => row.id === targetRowId
|
|
935
|
+
)
|
|
936
|
+
if (!foundTargetRow) {
|
|
937
|
+
foundTargetRow = findRowInNestedStructure(
|
|
938
|
+
targetRowId,
|
|
939
|
+
props.rows
|
|
940
|
+
)
|
|
941
|
+
}
|
|
942
|
+
|
|
943
|
+
return foundTargetRow
|
|
944
|
+
}
|
|
945
|
+
|
|
899
946
|
const checkParentCondition = (
|
|
900
947
|
draggedRow: DlTableRow,
|
|
901
948
|
targetRow: DlTableRow
|
|
@@ -1073,7 +1120,10 @@ export default defineComponent({
|
|
|
1073
1120
|
animation: 150,
|
|
1074
1121
|
fallbackOnBody: true,
|
|
1075
1122
|
invertSwap: true,
|
|
1076
|
-
swapThreshold: 0.
|
|
1123
|
+
swapThreshold: 0.85,
|
|
1124
|
+
handle: '.draggable-icon',
|
|
1125
|
+
ghostClass: 'dl-table-ghost-row',
|
|
1126
|
+
onMove: handleMoveEvent
|
|
1077
1127
|
}
|
|
1078
1128
|
},
|
|
1079
1129
|
isVue2 ? children : () => children
|
|
@@ -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"
|