@dataloop-ai/components 0.20.46 → 0.20.48
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
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<div v-if="infiniteScroll">
|
|
3
3
|
<dl-infinite-scroll
|
|
4
4
|
:items="items"
|
|
5
|
-
:page-size="
|
|
5
|
+
:page-size="maxElementsPerRowForInfinite"
|
|
6
6
|
:style="$attrs.style"
|
|
7
7
|
:class="$attrs.class"
|
|
8
8
|
style="height: var(--dl-virtual-scroll-height, 500px)"
|
|
@@ -10,20 +10,13 @@
|
|
|
10
10
|
@scroll-to-bottom="$emit('scroll-to-bottom')"
|
|
11
11
|
>
|
|
12
12
|
<template #content="{ items }">
|
|
13
|
-
<div
|
|
14
|
-
ref="grid"
|
|
15
|
-
:style="gridStyles"
|
|
16
|
-
:class="gridClass"
|
|
17
|
-
>
|
|
13
|
+
<div ref="grid" :style="gridStyles" :class="gridClass">
|
|
18
14
|
<div
|
|
19
15
|
v-for="item in items"
|
|
20
16
|
:key="item.id"
|
|
21
17
|
class="item-wrapper"
|
|
22
18
|
>
|
|
23
|
-
<slot
|
|
24
|
-
name="item-slot"
|
|
25
|
-
v-bind="{ item }"
|
|
26
|
-
/>
|
|
19
|
+
<slot name="item-slot" v-bind="{ item }" />
|
|
27
20
|
</div>
|
|
28
21
|
</div>
|
|
29
22
|
</template>
|
|
@@ -37,21 +30,9 @@
|
|
|
37
30
|
>
|
|
38
31
|
<slot />
|
|
39
32
|
</div>
|
|
40
|
-
<div
|
|
41
|
-
v-
|
|
42
|
-
|
|
43
|
-
:style="gridStyles"
|
|
44
|
-
:class="gridClass"
|
|
45
|
-
>
|
|
46
|
-
<div
|
|
47
|
-
v-for="item in items"
|
|
48
|
-
:key="item.id"
|
|
49
|
-
class="item-wrapper"
|
|
50
|
-
>
|
|
51
|
-
<slot
|
|
52
|
-
name="item-slot"
|
|
53
|
-
v-bind="{ item }"
|
|
54
|
-
/>
|
|
33
|
+
<div v-else ref="grid" :style="gridStyles" :class="gridClass">
|
|
34
|
+
<div v-for="item in items" :key="item.id" class="item-wrapper">
|
|
35
|
+
<slot name="item-slot" v-bind="{ item }" />
|
|
55
36
|
</div>
|
|
56
37
|
</div>
|
|
57
38
|
</template>
|
|
@@ -158,10 +139,14 @@ export default defineComponent({
|
|
|
158
139
|
if (!isGridMode.value) {
|
|
159
140
|
gridStyles['--element-per-row'] = maxElementsPerRow.value
|
|
160
141
|
}
|
|
161
|
-
|
|
162
142
|
return gridStyles
|
|
163
143
|
})
|
|
164
144
|
|
|
145
|
+
const maxElementsPerRowForInfinite = computed(() => {
|
|
146
|
+
const pageSize = props.infiniteScrollPageSize ?? 15
|
|
147
|
+
const maxElements = maxElementsPerRow.value ?? 3
|
|
148
|
+
return pageSize + (maxElements - (pageSize % maxElements))
|
|
149
|
+
})
|
|
165
150
|
const layoutChanged = () => {
|
|
166
151
|
emit('layout-changed', modelValue.value)
|
|
167
152
|
}
|
|
@@ -268,7 +253,8 @@ export default defineComponent({
|
|
|
268
253
|
gridClass,
|
|
269
254
|
gridStyles,
|
|
270
255
|
grid,
|
|
271
|
-
hasItems
|
|
256
|
+
hasItems,
|
|
257
|
+
maxElementsPerRowForInfinite
|
|
272
258
|
}
|
|
273
259
|
}
|
|
274
260
|
})
|
|
@@ -92,21 +92,26 @@ export default defineComponent({
|
|
|
92
92
|
} else if (nextPage?.length) {
|
|
93
93
|
toDisplay.push(...nextPage.slice(0, pageSize.value))
|
|
94
94
|
}
|
|
95
|
-
|
|
95
|
+
const prevMovePercent = (prevPage?.length ?? 0) / toDisplay.length
|
|
96
|
+
const nextMovePercent =
|
|
97
|
+
1 - (nextPage?.length ?? 0) / toDisplay.length
|
|
96
98
|
nextTick(() => {
|
|
97
99
|
if (lastOp.value === 'top' && page !== 0) {
|
|
98
100
|
containerRef.value.scrollTop +=
|
|
99
|
-
containerRef.value.scrollHeight *
|
|
101
|
+
containerRef.value.scrollHeight * prevMovePercent
|
|
100
102
|
} else if (
|
|
101
103
|
lastOp.value === 'bottom' &&
|
|
102
104
|
page !== pagesCount.value
|
|
103
105
|
) {
|
|
104
|
-
if (
|
|
106
|
+
if (
|
|
107
|
+
currentPage.value - 1 === 0 ||
|
|
108
|
+
currentPage.value + 1 === pagesCount.value
|
|
109
|
+
) {
|
|
105
110
|
return
|
|
106
111
|
}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
containerRef.value.
|
|
112
|
+
containerRef.value.scrollTop =
|
|
113
|
+
containerRef.value.scrollHeight * nextMovePercent -
|
|
114
|
+
containerRef.value.offsetHeight
|
|
110
115
|
}
|
|
111
116
|
|
|
112
117
|
onScrollEnd()
|