@dataloop-ai/components 0.19.268 → 0.19.269
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
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
class="dl-infinite-scroll"
|
|
5
5
|
:style="computedStyles"
|
|
6
6
|
:class="computedClasses"
|
|
7
|
+
@scrollend="onScrollEnd"
|
|
7
8
|
>
|
|
8
9
|
<DlTopScroll
|
|
9
10
|
:container-ref="containerRef"
|
|
@@ -15,6 +16,7 @@
|
|
|
15
16
|
</div>
|
|
16
17
|
</slot>
|
|
17
18
|
<DlBottomScroll
|
|
19
|
+
ref="bottomRef"
|
|
18
20
|
:container-ref="containerRef"
|
|
19
21
|
@scroll-to-bottom="onScrollToBottom"
|
|
20
22
|
/>
|
|
@@ -59,6 +61,7 @@ export default defineComponent({
|
|
|
59
61
|
emits: ['scroll-to-top', 'scroll-to-bottom'],
|
|
60
62
|
setup(props, { emit, attrs }) {
|
|
61
63
|
const { items, pageSize, scrollDebounce } = toRefs(props)
|
|
64
|
+
const bottomRef = ref(null)
|
|
62
65
|
const containerRef = ref(null)
|
|
63
66
|
const currentPage = ref(0)
|
|
64
67
|
const pagesCount = ref(0)
|
|
@@ -105,6 +108,8 @@ export default defineComponent({
|
|
|
105
108
|
containerRef.value.scrollTop -=
|
|
106
109
|
containerRef.value.scrollHeight * 0.333
|
|
107
110
|
}
|
|
111
|
+
|
|
112
|
+
onScrollEnd()
|
|
108
113
|
})
|
|
109
114
|
|
|
110
115
|
return toDisplay
|
|
@@ -114,6 +119,15 @@ export default defineComponent({
|
|
|
114
119
|
return item.id ?? item.key ?? JSON.stringify(item)
|
|
115
120
|
}
|
|
116
121
|
|
|
122
|
+
const onScrollEnd = () => {
|
|
123
|
+
const top =
|
|
124
|
+
bottomRef.value.$el.offsetTop - containerRef.value.scrollTop
|
|
125
|
+
if (top < containerRef.value.offsetHeight) {
|
|
126
|
+
containerRef.value.scrollTop +=
|
|
127
|
+
top - containerRef.value.offsetHeight
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
117
131
|
const onScrollToTop = () => {
|
|
118
132
|
lastOp.value = 'top'
|
|
119
133
|
if (currentPage.value <= 0) {
|
|
@@ -154,13 +168,18 @@ export default defineComponent({
|
|
|
154
168
|
items.value,
|
|
155
169
|
pageSize.value
|
|
156
170
|
)
|
|
171
|
+
if (!itemPages.value.get(currentPage.value)) {
|
|
172
|
+
currentPage.value = 0
|
|
173
|
+
}
|
|
157
174
|
onScrollToTop()
|
|
158
175
|
},
|
|
159
176
|
{ immediate: true }
|
|
160
177
|
)
|
|
161
178
|
|
|
162
179
|
return {
|
|
180
|
+
bottomRef,
|
|
163
181
|
containerRef,
|
|
182
|
+
onScrollEnd,
|
|
164
183
|
onScrollToTop,
|
|
165
184
|
onScrollToBottom,
|
|
166
185
|
displayItems,
|