@dataloop-ai/components 0.17.67 → 0.17.68
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 +5 -7
- package/src/components/compound/DlTable/hooks/tablePagination.ts +8 -5
- package/src/components/shared/DlVirtualScroll/DlVirtualScroll.vue +35 -4
- package/src/demos/DlTableDemo.vue +0 -3
- package/src/demos/DlVirtualScrollDemo.vue +3 -12
package/package.json
CHANGED
|
@@ -152,10 +152,12 @@
|
|
|
152
152
|
: ''
|
|
153
153
|
"
|
|
154
154
|
:no-hover="noHover"
|
|
155
|
-
@click="onTrClick($event, props.item, pageIndex)"
|
|
156
|
-
@dblclick="
|
|
155
|
+
@click="onTrClick($event, props.item, props.pageIndex)"
|
|
156
|
+
@dblclick="
|
|
157
|
+
onTrDblClick($event, props.item, props.pageIndex)
|
|
158
|
+
"
|
|
157
159
|
@contextmenu="
|
|
158
|
-
onTrContextMenu($event, props.item, pageIndex)
|
|
160
|
+
onTrContextMenu($event, props.item, props.pageIndex)
|
|
159
161
|
"
|
|
160
162
|
>
|
|
161
163
|
<td
|
|
@@ -1069,10 +1071,6 @@ export default defineComponent({
|
|
|
1069
1071
|
acc[p] = (props as Record<string, any>)[p]
|
|
1070
1072
|
})
|
|
1071
1073
|
|
|
1072
|
-
if (!acc.virtualScrollItemSize) {
|
|
1073
|
-
acc.virtualScrollItemSize = props.dense === true ? 30 : 40
|
|
1074
|
-
}
|
|
1075
|
-
|
|
1076
1074
|
return acc
|
|
1077
1075
|
})
|
|
1078
1076
|
|
|
@@ -61,10 +61,11 @@ export function useTablePaginationState(
|
|
|
61
61
|
sortBy: null,
|
|
62
62
|
descending: false,
|
|
63
63
|
page: 1,
|
|
64
|
-
rowsPerPage:
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
64
|
+
rowsPerPage: props.virtualScroll
|
|
65
|
+
? 0
|
|
66
|
+
: props.rowsPerPageOptions.length > 0
|
|
67
|
+
? props.rowsPerPageOptions[0]
|
|
68
|
+
: 5,
|
|
68
69
|
min: 1,
|
|
69
70
|
maxPages: 0,
|
|
70
71
|
boundaryNumbers: true,
|
|
@@ -74,7 +75,9 @@ export function useTablePaginationState(
|
|
|
74
75
|
itemsName: 'Rows',
|
|
75
76
|
withLegend: true,
|
|
76
77
|
withRowsPerPage: true,
|
|
77
|
-
rowsPerPageOptions: props.
|
|
78
|
+
rowsPerPageOptions: props.virtualScroll
|
|
79
|
+
? [0]
|
|
80
|
+
: props.rowsPerPageOptions
|
|
78
81
|
},
|
|
79
82
|
props.pagination
|
|
80
83
|
)
|
|
@@ -11,7 +11,8 @@ import {
|
|
|
11
11
|
ref,
|
|
12
12
|
watch,
|
|
13
13
|
isVue2,
|
|
14
|
-
h
|
|
14
|
+
h,
|
|
15
|
+
onUnmounted
|
|
15
16
|
} from 'vue-demi'
|
|
16
17
|
import getTableMiddle from '../../compound/DlTable/utils/getTableMiddle'
|
|
17
18
|
import { listenOpts, mergeSlot } from '../../../utils'
|
|
@@ -54,7 +55,7 @@ export default defineComponent({
|
|
|
54
55
|
},
|
|
55
56
|
|
|
56
57
|
virtualScrollItemSize: {
|
|
57
|
-
type:
|
|
58
|
+
type: Number,
|
|
58
59
|
required: false,
|
|
59
60
|
default: 0
|
|
60
61
|
},
|
|
@@ -70,7 +71,7 @@ export default defineComponent({
|
|
|
70
71
|
required: false,
|
|
71
72
|
default: 0
|
|
72
73
|
},
|
|
73
|
-
tableColspan: { type: [Number, String], required: false, default:
|
|
74
|
+
tableColspan: { type: [Number, String], required: false, default: 100 },
|
|
74
75
|
virtualScrollHorizontal: {
|
|
75
76
|
type: Boolean,
|
|
76
77
|
required: false,
|
|
@@ -101,6 +102,7 @@ export default defineComponent({
|
|
|
101
102
|
setup(props, { slots, attrs }) {
|
|
102
103
|
let localScrollTarget: HTMLElement | undefined
|
|
103
104
|
const rootRef: Ref<HTMLElement | null> = ref(null)
|
|
105
|
+
const scrollSizeItem: Ref<number> = ref(40)
|
|
104
106
|
|
|
105
107
|
const isDefined = (v: any) => v !== undefined && v !== null
|
|
106
108
|
|
|
@@ -112,6 +114,34 @@ export default defineComponent({
|
|
|
112
114
|
: 0
|
|
113
115
|
})
|
|
114
116
|
|
|
117
|
+
onMounted(() => {
|
|
118
|
+
window.addEventListener('load', setItemSize)
|
|
119
|
+
})
|
|
120
|
+
|
|
121
|
+
onUnmounted(() => window.removeEventListener('load', () => {}))
|
|
122
|
+
|
|
123
|
+
const setItemSize = () => {
|
|
124
|
+
scrollSizeItem.value = props.virtualScrollItemSize
|
|
125
|
+
? props.virtualScrollItemSize
|
|
126
|
+
: typeof rootRef.value?.getElementsByClassName === 'function'
|
|
127
|
+
? rootRef.value?.getElementsByClassName(
|
|
128
|
+
'dl-virtual-scroll__content'
|
|
129
|
+
)[0].children[0].clientHeight
|
|
130
|
+
: 40
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
watch(
|
|
134
|
+
props,
|
|
135
|
+
() => {
|
|
136
|
+
setItemSize()
|
|
137
|
+
},
|
|
138
|
+
{ deep: true }
|
|
139
|
+
)
|
|
140
|
+
|
|
141
|
+
const virtualScrollItemSizeComputed = computed(() => {
|
|
142
|
+
return scrollSizeItem.value
|
|
143
|
+
})
|
|
144
|
+
|
|
115
145
|
const {
|
|
116
146
|
virtualScrollSliceRange,
|
|
117
147
|
localResetVirtualScroll,
|
|
@@ -120,7 +150,8 @@ export default defineComponent({
|
|
|
120
150
|
} = useVirtualScroll({
|
|
121
151
|
virtualScrollLength,
|
|
122
152
|
getVirtualScrollTarget,
|
|
123
|
-
getVirtualScrollEl
|
|
153
|
+
getVirtualScrollEl,
|
|
154
|
+
virtualScrollItemSizeComputed
|
|
124
155
|
})
|
|
125
156
|
|
|
126
157
|
const virtualScrollScope = computed(() => {
|
|
@@ -222,7 +222,6 @@
|
|
|
222
222
|
:selected="selected"
|
|
223
223
|
:separator="separator"
|
|
224
224
|
:draggable="draggable"
|
|
225
|
-
class="sticky-header"
|
|
226
225
|
:filter="filter"
|
|
227
226
|
:selection="selection"
|
|
228
227
|
:dense="dense"
|
|
@@ -233,9 +232,7 @@
|
|
|
233
232
|
:columns="tableColumns"
|
|
234
233
|
style="height: 500px"
|
|
235
234
|
row-key="index"
|
|
236
|
-
:pagination="{ rowsPerPage: 0 }"
|
|
237
235
|
virtual-scroll
|
|
238
|
-
:rows-per-page-options="[0]"
|
|
239
236
|
@virtual-scroll="onScroll"
|
|
240
237
|
/>
|
|
241
238
|
</div>
|
|
@@ -4,9 +4,6 @@
|
|
|
4
4
|
<dl-virtual-scroll
|
|
5
5
|
v-slot="{ item: row, index }"
|
|
6
6
|
type="table"
|
|
7
|
-
:virtual-scroll-item-size="48"
|
|
8
|
-
:virtual-scroll-sticky-size-start="48"
|
|
9
|
-
:virtual-scroll-sticky-size-end="32"
|
|
10
7
|
:items="heavyList"
|
|
11
8
|
style="height: 500px"
|
|
12
9
|
@virtual-scroll="log"
|
|
@@ -27,9 +24,6 @@
|
|
|
27
24
|
<dl-virtual-scroll
|
|
28
25
|
v-slot="{ item, index }"
|
|
29
26
|
style="max-width: 500px"
|
|
30
|
-
:virtual-scroll-item-size="48"
|
|
31
|
-
:virtual-scroll-sticky-size-start="48"
|
|
32
|
-
:virtual-scroll-sticky-size-end="32"
|
|
33
27
|
:items="horizontalList"
|
|
34
28
|
virtual-scroll-horizontal
|
|
35
29
|
>
|
|
@@ -47,9 +41,6 @@
|
|
|
47
41
|
v-slot="{ item, index }"
|
|
48
42
|
style="height: 300px"
|
|
49
43
|
:items="basicList"
|
|
50
|
-
:virtual-scroll-item-size="28"
|
|
51
|
-
:virtual-scroll-sticky-size-start="28"
|
|
52
|
-
:virtual-scroll-sticky-size-end="20"
|
|
53
44
|
separator
|
|
54
45
|
@virtual-scroll="log"
|
|
55
46
|
>
|
|
@@ -69,9 +60,9 @@
|
|
|
69
60
|
<dl-virtual-scroll
|
|
70
61
|
style="height: 300px; gap: 20px"
|
|
71
62
|
:items="customList"
|
|
72
|
-
:virtual-scroll-item-size="
|
|
73
|
-
:virtual-scroll-sticky-size-start="
|
|
74
|
-
:virtual-scroll-sticky-size-end="
|
|
63
|
+
:virtual-scroll-item-size="295"
|
|
64
|
+
:virtual-scroll-sticky-size-start="20"
|
|
65
|
+
:virtual-scroll-sticky-size-end="20"
|
|
75
66
|
separator
|
|
76
67
|
@virtual-scroll="log"
|
|
77
68
|
>
|