vue-virtual-flow 0.0.4 → 0.0.5
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/README.md +421 -97
- package/README.vi.md +422 -95
- package/dist/components/SkeletonLoader.d.cts +9 -0
- package/dist/components/SkeletonLoader.d.ts +9 -0
- package/dist/index.d.cts +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/types.d.cts +9 -0
- package/dist/types.d.ts +9 -0
- package/dist/vue-virtual-flow.cjs +1 -1
- package/dist/vue-virtual-flow.css +1 -1
- package/dist/vue-virtual-flow.js +811 -777
- package/package.json +1 -1
package/dist/vue-virtual-flow.js
CHANGED
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
import { watch as ee, defineComponent as
|
|
2
|
-
function Ae(
|
|
3
|
-
return typeof
|
|
1
|
+
import { watch as ee, defineComponent as xe, ref as N, computed as i, nextTick as O, onMounted as Se, onUpdated as Ce, onBeforeUnmount as Ie, openBlock as w, createElementBlock as x, normalizeStyle as C, createElementVNode as De, renderSlot as ne, createTextVNode as Me, createCommentVNode as me, Fragment as we, renderList as ze, unref as r, normalizeClass as He, toDisplayString as Ee } from "vue";
|
|
2
|
+
function Ae(a) {
|
|
3
|
+
return typeof a == "string" || typeof a == "number" || typeof a == "symbol";
|
|
4
4
|
}
|
|
5
|
-
function Ke(
|
|
6
|
-
const
|
|
7
|
-
return Ae(
|
|
5
|
+
function Ke(a, j) {
|
|
6
|
+
const H = a[j];
|
|
7
|
+
return Ae(H) ? H : void 0;
|
|
8
8
|
}
|
|
9
|
-
function We(
|
|
10
|
-
return Ke(
|
|
9
|
+
function We(a) {
|
|
10
|
+
return Ke(a, "id") ?? Ke(a, "key");
|
|
11
11
|
}
|
|
12
|
-
function $e(
|
|
13
|
-
function
|
|
14
|
-
const f =
|
|
12
|
+
function $e(a) {
|
|
13
|
+
function j(e, g) {
|
|
14
|
+
const f = a.itemKey();
|
|
15
15
|
if (typeof f == "function")
|
|
16
|
-
return f(e,
|
|
16
|
+
return f(e, g);
|
|
17
17
|
if (e !== null && typeof e == "object") {
|
|
18
18
|
if (f !== void 0) {
|
|
19
19
|
const s = Ke(e, f);
|
|
20
20
|
if (s !== void 0) return s;
|
|
21
21
|
}
|
|
22
|
-
const
|
|
23
|
-
if (
|
|
22
|
+
const T = We(e);
|
|
23
|
+
if (T !== void 0) return T;
|
|
24
24
|
}
|
|
25
|
-
return
|
|
25
|
+
return g;
|
|
26
26
|
}
|
|
27
|
-
function
|
|
27
|
+
function H() {
|
|
28
28
|
}
|
|
29
29
|
return ee(
|
|
30
|
-
() => [
|
|
31
|
-
|
|
30
|
+
() => [a.itemKey(), a.items()],
|
|
31
|
+
H,
|
|
32
32
|
{ immediate: !0 }
|
|
33
|
-
), { getItemKey:
|
|
33
|
+
), { getItemKey: j };
|
|
34
34
|
}
|
|
35
|
-
function
|
|
36
|
-
return
|
|
35
|
+
function Ve(a) {
|
|
36
|
+
return a === "fill" ? "100%" : typeof a == "number" ? `${a}px` : a;
|
|
37
37
|
}
|
|
38
|
-
function Re(
|
|
39
|
-
return (
|
|
40
|
-
typeof
|
|
38
|
+
function Re(a) {
|
|
39
|
+
return (j, H) => {
|
|
40
|
+
typeof H == "string" && (H === "fill" || H.trim().endsWith("%"));
|
|
41
41
|
};
|
|
42
42
|
}
|
|
43
43
|
const Fe = ["aria-label"], Ye = {
|
|
@@ -45,7 +45,7 @@ const Fe = ["aria-label"], Ye = {
|
|
|
45
45
|
class: "vue-chat-virtual-scroll__loading-older",
|
|
46
46
|
role: "status",
|
|
47
47
|
"aria-live": "polite"
|
|
48
|
-
}, Ne = ["aria-posinset", "aria-setsize"],
|
|
48
|
+
}, Ne = ["aria-posinset", "aria-setsize"], _e = /* @__PURE__ */ xe({
|
|
49
49
|
name: "ChatVirtualScroll",
|
|
50
50
|
__name: "ChatVirtualScroll",
|
|
51
51
|
props: {
|
|
@@ -63,17 +63,17 @@ const Fe = ["aria-label"], Ye = {
|
|
|
63
63
|
loadOlderThreshold: { default: 120 }
|
|
64
64
|
},
|
|
65
65
|
emits: ["scroll", "loadOlder", "bottomChange"],
|
|
66
|
-
setup(
|
|
67
|
-
const e =
|
|
68
|
-
let
|
|
69
|
-
const
|
|
66
|
+
setup(a, { expose: j, emit: H }) {
|
|
67
|
+
const e = a, g = H, f = N(), T = N(0), s = N(0), V = N(0), _ = N(!0), F = /* @__PURE__ */ new Map(), G = /* @__PURE__ */ new Map();
|
|
68
|
+
let q, y, k = -1, I = !1;
|
|
69
|
+
const z = Re(), { getItemKey: A } = $e({
|
|
70
70
|
componentName: "ChatVirtualScroll",
|
|
71
71
|
items: () => e.items,
|
|
72
72
|
itemKey: () => e.itemKey
|
|
73
73
|
}), W = i(
|
|
74
74
|
() => Math.max(1, e.estimatedItemSize)
|
|
75
75
|
), Z = i(() => Math.max(0, Math.floor(e.overscan))), te = i(() => s.value > 0 ? s.value : typeof e.height == "number" ? Math.max(0, e.height) : W.value), Y = i(() => {
|
|
76
|
-
|
|
76
|
+
V.value;
|
|
77
77
|
const l = new Array(e.items.length + 1), u = new Array(e.items.length);
|
|
78
78
|
l[0] = 0;
|
|
79
79
|
for (let c = 0; c < e.items.length; c += 1) {
|
|
@@ -85,13 +85,13 @@ const Fe = ["aria-label"], Ye = {
|
|
|
85
85
|
sizes: u,
|
|
86
86
|
total: l[e.items.length] ?? 0
|
|
87
87
|
};
|
|
88
|
-
}),
|
|
88
|
+
}), L = i(() => {
|
|
89
89
|
const l = /* @__PURE__ */ new Map();
|
|
90
90
|
return e.items.forEach((u, c) => {
|
|
91
91
|
l.set(A(u, c), c);
|
|
92
92
|
}), l;
|
|
93
93
|
});
|
|
94
|
-
function
|
|
94
|
+
function J(l) {
|
|
95
95
|
if (e.items.length === 0) return 0;
|
|
96
96
|
const u = Y.value.offsets;
|
|
97
97
|
let c = 0, E = e.items.length;
|
|
@@ -101,21 +101,21 @@ const Fe = ["aria-label"], Ye = {
|
|
|
101
101
|
}
|
|
102
102
|
return Math.min(c, e.items.length - 1);
|
|
103
103
|
}
|
|
104
|
-
const
|
|
104
|
+
const K = i(
|
|
105
105
|
() => Math.max(
|
|
106
106
|
0,
|
|
107
|
-
|
|
107
|
+
J(T.value) - Z.value
|
|
108
108
|
)
|
|
109
|
-
),
|
|
109
|
+
), Q = i(() => {
|
|
110
110
|
if (e.items.length === 0) return 0;
|
|
111
|
-
const l =
|
|
111
|
+
const l = J(T.value + te.value) + 1;
|
|
112
112
|
return Math.min(
|
|
113
113
|
e.items.length,
|
|
114
114
|
l + Z.value
|
|
115
115
|
);
|
|
116
116
|
}), le = i(
|
|
117
|
-
() => e.items.slice(
|
|
118
|
-
const c =
|
|
117
|
+
() => e.items.slice(K.value, Q.value).map((l, u) => {
|
|
118
|
+
const c = K.value + u;
|
|
119
119
|
return {
|
|
120
120
|
item: l,
|
|
121
121
|
index: c,
|
|
@@ -124,33 +124,33 @@ const Fe = ["aria-label"], Ye = {
|
|
|
124
124
|
};
|
|
125
125
|
})
|
|
126
126
|
), ue = i(() => ({
|
|
127
|
-
height:
|
|
127
|
+
height: Ve(e.height)
|
|
128
128
|
}));
|
|
129
|
-
function
|
|
129
|
+
function U() {
|
|
130
130
|
const l = f.value;
|
|
131
131
|
if (!l) return;
|
|
132
132
|
const c = Math.max(
|
|
133
133
|
0,
|
|
134
134
|
Y.value.total - l.scrollTop - l.clientHeight
|
|
135
135
|
) <= Math.max(0, e.bottomThreshold);
|
|
136
|
-
c !==
|
|
136
|
+
c !== _.value && (_.value = c, I && g("bottomChange", c));
|
|
137
137
|
}
|
|
138
138
|
function m() {
|
|
139
139
|
var l;
|
|
140
|
-
s.value = ((l = f.value) == null ? void 0 : l.clientHeight) ?? 0,
|
|
141
|
-
|
|
140
|
+
s.value = ((l = f.value) == null ? void 0 : l.clientHeight) ?? 0, z(f.value, e.height), O(() => {
|
|
141
|
+
U(), D();
|
|
142
142
|
});
|
|
143
143
|
}
|
|
144
|
-
function
|
|
145
|
-
|
|
146
|
-
scrollTop:
|
|
147
|
-
startIndex:
|
|
148
|
-
endIndex:
|
|
149
|
-
}),
|
|
144
|
+
function p(l) {
|
|
145
|
+
T.value = l.currentTarget.scrollTop, U(), g("scroll", {
|
|
146
|
+
scrollTop: T.value,
|
|
147
|
+
startIndex: K.value,
|
|
148
|
+
endIndex: Q.value
|
|
149
|
+
}), D();
|
|
150
150
|
}
|
|
151
|
-
function
|
|
151
|
+
function D() {
|
|
152
152
|
const l = f.value;
|
|
153
|
-
!
|
|
153
|
+
!I || !l || !e.hasOlder || e.loadingOlder || k === e.items.length || l.scrollTop <= Math.max(0, e.loadOlderThreshold) && (k = e.items.length, g("loadOlder"));
|
|
154
154
|
}
|
|
155
155
|
function se(l) {
|
|
156
156
|
const u = l.borderBoxSize;
|
|
@@ -161,27 +161,27 @@ const Fe = ["aria-label"], Ye = {
|
|
|
161
161
|
return l.contentRect.height;
|
|
162
162
|
}
|
|
163
163
|
function ae(l) {
|
|
164
|
-
const u = Y.value, c =
|
|
164
|
+
const u = Y.value, c = _.value && e.stickToBottom;
|
|
165
165
|
let E = 0, P = !1;
|
|
166
|
-
for (const
|
|
167
|
-
const
|
|
166
|
+
for (const S of l) {
|
|
167
|
+
const R = S.target, n = G.get(R), t = se(S);
|
|
168
168
|
if (n === void 0 || t <= 0) continue;
|
|
169
|
-
const
|
|
170
|
-
if (Math.abs(
|
|
171
|
-
const v =
|
|
172
|
-
v !== void 0 && u.offsets[v + 1] <=
|
|
169
|
+
const o = F.get(n) ?? W.value;
|
|
170
|
+
if (Math.abs(o - t) < 0.5) continue;
|
|
171
|
+
const v = L.value.get(n);
|
|
172
|
+
v !== void 0 && u.offsets[v + 1] <= T.value && (E += t - o), F.set(n, t), P = !0;
|
|
173
173
|
}
|
|
174
|
-
P && (
|
|
175
|
-
const
|
|
176
|
-
|
|
174
|
+
P && (V.value += 1, O(() => {
|
|
175
|
+
const S = f.value;
|
|
176
|
+
S && (c ? h("auto") : E !== 0 && (S.scrollTop += E, T.value = S.scrollTop, U()));
|
|
177
177
|
}));
|
|
178
178
|
}
|
|
179
179
|
function fe(l, u) {
|
|
180
|
-
l instanceof HTMLElement && (
|
|
180
|
+
l instanceof HTMLElement && (G.set(l, u), y == null || y.observe(l));
|
|
181
181
|
}
|
|
182
182
|
function oe() {
|
|
183
|
-
for (const [l] of
|
|
184
|
-
l.isConnected || (
|
|
183
|
+
for (const [l] of G)
|
|
184
|
+
l.isConnected || (y == null || y.unobserve(l), G.delete(l));
|
|
185
185
|
}
|
|
186
186
|
function ie(l, u = {}) {
|
|
187
187
|
const c = f.value;
|
|
@@ -189,8 +189,8 @@ const Fe = ["aria-label"], Ye = {
|
|
|
189
189
|
const E = Math.max(0, Y.value.total - c.clientHeight), P = Math.min(
|
|
190
190
|
Math.max(0, Number.isFinite(l) ? l : 0),
|
|
191
191
|
E
|
|
192
|
-
),
|
|
193
|
-
|
|
192
|
+
), S = u.behavior ?? "auto";
|
|
193
|
+
S === "auto" && (T.value = P), c.scrollTo({ ...u, top: P, behavior: S }), O(U);
|
|
194
194
|
}
|
|
195
195
|
function re(l, u = {}) {
|
|
196
196
|
const c = f.value;
|
|
@@ -198,97 +198,97 @@ const Fe = ["aria-label"], Ye = {
|
|
|
198
198
|
const E = Math.min(
|
|
199
199
|
e.items.length - 1,
|
|
200
200
|
Math.max(0, Math.floor(l))
|
|
201
|
-
), { align: P = "start", ...
|
|
201
|
+
), { align: P = "start", ...S } = u, R = Y.value.sizes[E];
|
|
202
202
|
let n = Y.value.offsets[E];
|
|
203
|
-
P === "center" ? n -= (c.clientHeight -
|
|
203
|
+
P === "center" ? n -= (c.clientHeight - R) / 2 : P === "end" && (n -= c.clientHeight - R);
|
|
204
204
|
const t = Math.max(
|
|
205
205
|
0,
|
|
206
206
|
Math.min(n, Y.value.total - c.clientHeight)
|
|
207
|
-
),
|
|
208
|
-
|
|
209
|
-
...
|
|
207
|
+
), o = S.behavior ?? "auto";
|
|
208
|
+
o === "auto" && (T.value = t), c.scrollTo({
|
|
209
|
+
...S,
|
|
210
210
|
top: t,
|
|
211
|
-
behavior:
|
|
212
|
-
}),
|
|
211
|
+
behavior: o
|
|
212
|
+
}), O(U);
|
|
213
213
|
}
|
|
214
214
|
function de(l = "auto") {
|
|
215
215
|
const u = f.value;
|
|
216
|
-
u && (l === "auto" && (
|
|
216
|
+
u && (l === "auto" && (T.value = 0), u.scrollTo({ top: 0, behavior: l }), O(U));
|
|
217
217
|
}
|
|
218
218
|
function h(l = "auto") {
|
|
219
219
|
const u = f.value;
|
|
220
220
|
if (!u) return;
|
|
221
221
|
const c = Math.max(0, Y.value.total - u.clientHeight);
|
|
222
|
-
l === "auto" ? (u.scrollTop = c,
|
|
222
|
+
l === "auto" ? (u.scrollTop = c, T.value = c) : u.scrollTo({ top: c, behavior: l }), O(U);
|
|
223
223
|
}
|
|
224
|
-
let
|
|
224
|
+
let $ = e.items.map((l, u) => A(l, u));
|
|
225
225
|
return ee(
|
|
226
226
|
() => e.items.map((l, u) => A(l, u)),
|
|
227
227
|
async (l) => {
|
|
228
|
-
const u =
|
|
229
|
-
|
|
230
|
-
const c = f.value, E = (c == null ? void 0 : c.scrollTop) ?? 0, P =
|
|
231
|
-
(
|
|
228
|
+
const u = $;
|
|
229
|
+
$ = l;
|
|
230
|
+
const c = f.value, E = (c == null ? void 0 : c.scrollTop) ?? 0, P = _.value && e.stickToBottom, S = u[0], R = S === void 0 ? 0 : l.indexOf(S), n = R > 0 ? l.slice(0, R).reduce(
|
|
231
|
+
(o, v) => o + (F.get(v) ?? W.value),
|
|
232
232
|
0
|
|
233
233
|
) : 0, t = new Set(l);
|
|
234
|
-
for (const
|
|
235
|
-
t.has(
|
|
236
|
-
|
|
234
|
+
for (const o of F.keys())
|
|
235
|
+
t.has(o) || F.delete(o);
|
|
236
|
+
V.value += 1, await O(), c && (n > 0 ? (c.scrollTop = E + n, T.value = c.scrollTop) : l.length > u.length && P && h("auto"), U(), D());
|
|
237
237
|
}
|
|
238
238
|
), ee(
|
|
239
239
|
() => [e.hasOlder, e.loadingOlder],
|
|
240
240
|
async ([l]) => {
|
|
241
|
-
l || (k = -1), await
|
|
241
|
+
l || (k = -1), await O(), D();
|
|
242
242
|
}
|
|
243
243
|
), Se(() => {
|
|
244
244
|
if (m(), typeof ResizeObserver < "u") {
|
|
245
|
-
|
|
246
|
-
for (const [l] of
|
|
247
|
-
|
|
245
|
+
q = new ResizeObserver(m), y = new ResizeObserver(ae), f.value && q.observe(f.value);
|
|
246
|
+
for (const [l] of G)
|
|
247
|
+
y.observe(l);
|
|
248
248
|
}
|
|
249
|
-
|
|
250
|
-
e.initialScroll === "bottom" && h("auto"),
|
|
249
|
+
O(() => {
|
|
250
|
+
e.initialScroll === "bottom" && h("auto"), I = !0, U(), D();
|
|
251
251
|
});
|
|
252
252
|
}), Ce(oe), Ie(() => {
|
|
253
|
-
|
|
254
|
-
}),
|
|
255
|
-
isAtBottom:
|
|
253
|
+
q && (q.disconnect(), q = void 0), y && (y.disconnect(), y = void 0), G.clear();
|
|
254
|
+
}), j({
|
|
255
|
+
isAtBottom: _,
|
|
256
256
|
scrollTo: ie,
|
|
257
257
|
scrollToIndex: re,
|
|
258
258
|
scrollToTop: de,
|
|
259
259
|
scrollToBottom: h
|
|
260
|
-
}), (l, u) => (
|
|
260
|
+
}), (l, u) => (w(), x("div", {
|
|
261
261
|
ref_key: "viewport",
|
|
262
262
|
ref: f,
|
|
263
263
|
class: "vue-chat-virtual-scroll",
|
|
264
|
-
style:
|
|
264
|
+
style: C(ue.value),
|
|
265
265
|
role: "log",
|
|
266
|
-
"aria-label":
|
|
266
|
+
"aria-label": a.ariaLabel,
|
|
267
267
|
"aria-live": "polite",
|
|
268
268
|
tabindex: "0",
|
|
269
|
-
onScrollPassive:
|
|
269
|
+
onScrollPassive: p
|
|
270
270
|
}, [
|
|
271
|
-
|
|
271
|
+
a.loadingOlder ? (w(), x("div", Ye, [
|
|
272
272
|
De("div", null, [
|
|
273
273
|
ne(l.$slots, "loadingOlder", {}, () => [
|
|
274
274
|
u[0] || (u[0] = Me("Loading older messages…", -1))
|
|
275
275
|
])
|
|
276
276
|
])
|
|
277
277
|
])) : me("", !0),
|
|
278
|
-
|
|
278
|
+
a.items.length ? (w(), x("div", {
|
|
279
279
|
key: 1,
|
|
280
280
|
class: "vue-chat-virtual-scroll__spacer",
|
|
281
|
-
style:
|
|
281
|
+
style: C({ height: `${Y.value.total}px` })
|
|
282
282
|
}, [
|
|
283
|
-
(
|
|
283
|
+
(w(!0), x(we, null, ze(le.value, ({ item: c, index: E, key: P, top: S }) => (w(), x("div", {
|
|
284
284
|
key: P,
|
|
285
285
|
ref_for: !0,
|
|
286
|
-
ref: (
|
|
286
|
+
ref: (R) => fe(R, P),
|
|
287
287
|
class: "vue-chat-virtual-scroll__item",
|
|
288
|
-
style:
|
|
288
|
+
style: C({ transform: `translateY(${S}px)` }),
|
|
289
289
|
role: "article",
|
|
290
290
|
"aria-posinset": E + 1,
|
|
291
|
-
"aria-setsize":
|
|
291
|
+
"aria-setsize": a.items.length
|
|
292
292
|
}, [
|
|
293
293
|
ne(l.$slots, "default", {
|
|
294
294
|
item: c,
|
|
@@ -299,65 +299,65 @@ const Fe = ["aria-label"], Ye = {
|
|
|
299
299
|
], 44, Fe));
|
|
300
300
|
}
|
|
301
301
|
});
|
|
302
|
-
function Oe(
|
|
303
|
-
const
|
|
304
|
-
() =>
|
|
302
|
+
function Oe(a) {
|
|
303
|
+
const j = N(), H = N(0), e = N(!1), g = N(!1), f = i(() => Math.max(1, a.threshold())), T = i(
|
|
304
|
+
() => a.refreshing() || g.value ? f.value : H.value
|
|
305
305
|
), s = i(
|
|
306
|
-
() => Math.min(1,
|
|
307
|
-
),
|
|
308
|
-
function
|
|
309
|
-
|
|
306
|
+
() => Math.min(1, H.value / f.value)
|
|
307
|
+
), V = i(() => a.refreshing() || g.value ? "Refreshing…" : s.value >= 1 ? "Release to refresh" : "Pull to refresh");
|
|
308
|
+
function _() {
|
|
309
|
+
j.value = void 0, e.value = !1, H.value = 0;
|
|
310
310
|
}
|
|
311
|
-
function F(
|
|
312
|
-
var
|
|
313
|
-
const k =
|
|
314
|
-
!
|
|
311
|
+
function F(y) {
|
|
312
|
+
var z;
|
|
313
|
+
const k = y.currentTarget, I = ((z = a.scrollTop) == null ? void 0 : z.call(a)) ?? k.scrollTop;
|
|
314
|
+
!a.enabled() || a.refreshing() || I > 0 || y.touches.length !== 1 || (j.value = y.touches[0].clientY, e.value = !0);
|
|
315
315
|
}
|
|
316
|
-
function
|
|
316
|
+
function G(y) {
|
|
317
317
|
var A;
|
|
318
|
-
if (
|
|
319
|
-
const k =
|
|
320
|
-
if ((((A =
|
|
321
|
-
|
|
318
|
+
if (j.value === void 0 || !e.value) return;
|
|
319
|
+
const k = y.currentTarget;
|
|
320
|
+
if ((((A = a.scrollTop) == null ? void 0 : A.call(a)) ?? k.scrollTop) > 0 || y.touches.length !== 1) {
|
|
321
|
+
_();
|
|
322
322
|
return;
|
|
323
323
|
}
|
|
324
|
-
const
|
|
325
|
-
if (
|
|
326
|
-
|
|
324
|
+
const z = y.touches[0].clientY - j.value;
|
|
325
|
+
if (z <= 0) {
|
|
326
|
+
H.value = 0;
|
|
327
327
|
return;
|
|
328
328
|
}
|
|
329
|
-
|
|
329
|
+
y.preventDefault(), H.value = Math.min(z * 0.5, f.value * 2);
|
|
330
330
|
}
|
|
331
|
-
function
|
|
332
|
-
if (
|
|
333
|
-
const
|
|
334
|
-
if (
|
|
335
|
-
|
|
331
|
+
function q() {
|
|
332
|
+
if (j.value === void 0) return;
|
|
333
|
+
const y = H.value >= f.value && a.enabled() && !a.refreshing();
|
|
334
|
+
if (j.value = void 0, e.value = !1, !y) {
|
|
335
|
+
H.value = 0;
|
|
336
336
|
return;
|
|
337
337
|
}
|
|
338
|
-
|
|
339
|
-
|
|
338
|
+
H.value = f.value, g.value = !0, a.onRefresh(), O(() => {
|
|
339
|
+
a.refreshing() || (g.value = !1, H.value = 0);
|
|
340
340
|
});
|
|
341
341
|
}
|
|
342
342
|
return ee(
|
|
343
|
-
() =>
|
|
344
|
-
(
|
|
345
|
-
|
|
343
|
+
() => a.refreshing(),
|
|
344
|
+
(y, k) => {
|
|
345
|
+
y ? (g.value = !1, H.value = f.value) : k && (g.value = !1, H.value = 0);
|
|
346
346
|
}
|
|
347
347
|
), {
|
|
348
348
|
pulling: e,
|
|
349
|
-
pullDistance:
|
|
350
|
-
pullOffset:
|
|
349
|
+
pullDistance: H,
|
|
350
|
+
pullOffset: T,
|
|
351
351
|
pullProgress: s,
|
|
352
|
-
refreshMessage:
|
|
352
|
+
refreshMessage: V,
|
|
353
353
|
refreshThreshold: f,
|
|
354
354
|
handleTouchStart: F,
|
|
355
|
-
handleTouchMove:
|
|
356
|
-
handleTouchEnd:
|
|
357
|
-
handleTouchCancel:
|
|
355
|
+
handleTouchMove: G,
|
|
356
|
+
handleTouchEnd: q,
|
|
357
|
+
handleTouchCancel: _
|
|
358
358
|
};
|
|
359
359
|
}
|
|
360
|
-
const
|
|
360
|
+
const Ge = ["aria-label"], Ue = ["aria-posinset", "aria-setsize"], Pe = /* @__PURE__ */ xe({
|
|
361
361
|
name: "DynamicVirtualScroll",
|
|
362
362
|
__name: "DynamicVirtualScroll",
|
|
363
363
|
props: {
|
|
@@ -376,26 +376,26 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
376
376
|
pullRefreshThreshold: { default: 64 }
|
|
377
377
|
},
|
|
378
378
|
emits: ["scroll", "loadMore", "refresh"],
|
|
379
|
-
setup(
|
|
380
|
-
const e =
|
|
379
|
+
setup(a, { expose: j, emit: H }) {
|
|
380
|
+
const e = a, g = H, {
|
|
381
381
|
pulling: f,
|
|
382
|
-
pullDistance:
|
|
382
|
+
pullDistance: T,
|
|
383
383
|
pullOffset: s,
|
|
384
|
-
pullProgress:
|
|
385
|
-
refreshMessage:
|
|
384
|
+
pullProgress: V,
|
|
385
|
+
refreshMessage: _,
|
|
386
386
|
refreshThreshold: F,
|
|
387
|
-
handleTouchStart:
|
|
388
|
-
handleTouchMove:
|
|
389
|
-
handleTouchEnd:
|
|
387
|
+
handleTouchStart: G,
|
|
388
|
+
handleTouchMove: q,
|
|
389
|
+
handleTouchEnd: y,
|
|
390
390
|
handleTouchCancel: k
|
|
391
391
|
} = Oe({
|
|
392
392
|
enabled: () => e.pullToRefresh,
|
|
393
393
|
refreshing: () => e.refreshing,
|
|
394
394
|
threshold: () => e.pullRefreshThreshold,
|
|
395
|
-
onRefresh: () =>
|
|
396
|
-
}),
|
|
397
|
-
let Y,
|
|
398
|
-
const
|
|
395
|
+
onRefresh: () => g("refresh")
|
|
396
|
+
}), I = N(), z = N(0), A = N(0), W = N(0), Z = /* @__PURE__ */ new Map(), te = /* @__PURE__ */ new Map();
|
|
397
|
+
let Y, L, J = -1;
|
|
398
|
+
const K = Re(), { getItemKey: Q } = $e({
|
|
399
399
|
componentName: "DynamicVirtualScroll",
|
|
400
400
|
items: () => e.items,
|
|
401
401
|
itemKey: () => e.itemKey
|
|
@@ -403,143 +403,143 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
403
403
|
() => Math.max(1, e.estimatedItemSize)
|
|
404
404
|
), ue = i(
|
|
405
405
|
() => Math.max(1, e.loadingItemSize ?? le.value)
|
|
406
|
-
),
|
|
406
|
+
), U = i(() => Math.max(0, Math.floor(e.overscan))), m = i(() => A.value > 0 ? A.value : typeof e.height == "number" ? Math.max(0, e.height) : le.value), p = i(() => {
|
|
407
407
|
W.value;
|
|
408
408
|
const n = new Array(e.items.length + 1), t = new Array(e.items.length);
|
|
409
409
|
n[0] = 0;
|
|
410
|
-
for (let
|
|
411
|
-
const v =
|
|
412
|
-
t[
|
|
410
|
+
for (let o = 0; o < e.items.length; o += 1) {
|
|
411
|
+
const v = Q(e.items[o], o), B = Z.get(v) ?? le.value;
|
|
412
|
+
t[o] = B, n[o + 1] = n[o] + B;
|
|
413
413
|
}
|
|
414
414
|
return {
|
|
415
415
|
offsets: n,
|
|
416
416
|
sizes: t,
|
|
417
417
|
total: n[e.items.length] ?? 0
|
|
418
418
|
};
|
|
419
|
-
}),
|
|
420
|
-
() =>
|
|
419
|
+
}), D = i(
|
|
420
|
+
() => p.value.total + (e.loading ? ue.value : 0)
|
|
421
421
|
), se = i(() => {
|
|
422
422
|
const n = /* @__PURE__ */ new Map();
|
|
423
|
-
return e.items.forEach((t,
|
|
424
|
-
n.set(
|
|
423
|
+
return e.items.forEach((t, o) => {
|
|
424
|
+
n.set(Q(t, o), o);
|
|
425
425
|
}), n;
|
|
426
426
|
});
|
|
427
427
|
function ae(n) {
|
|
428
428
|
if (e.items.length === 0) return 0;
|
|
429
|
-
const t =
|
|
430
|
-
let
|
|
431
|
-
for (;
|
|
432
|
-
const
|
|
433
|
-
t[
|
|
429
|
+
const t = p.value.offsets;
|
|
430
|
+
let o = 0, v = e.items.length;
|
|
431
|
+
for (; o < v; ) {
|
|
432
|
+
const B = Math.floor((o + v) / 2);
|
|
433
|
+
t[B + 1] <= n ? o = B + 1 : v = B;
|
|
434
434
|
}
|
|
435
|
-
return Math.min(
|
|
435
|
+
return Math.min(o, e.items.length - 1);
|
|
436
436
|
}
|
|
437
437
|
const fe = i(
|
|
438
438
|
() => Math.max(
|
|
439
439
|
0,
|
|
440
|
-
ae(
|
|
440
|
+
ae(z.value) - U.value
|
|
441
441
|
)
|
|
442
442
|
), oe = i(() => {
|
|
443
443
|
if (e.items.length === 0) return 0;
|
|
444
|
-
const n = ae(
|
|
444
|
+
const n = ae(z.value + m.value) + 1;
|
|
445
445
|
return Math.min(
|
|
446
446
|
e.items.length,
|
|
447
|
-
n +
|
|
447
|
+
n + U.value
|
|
448
448
|
);
|
|
449
449
|
}), ie = i(
|
|
450
450
|
() => e.items.slice(fe.value, oe.value).map((n, t) => {
|
|
451
|
-
const
|
|
451
|
+
const o = fe.value + t;
|
|
452
452
|
return {
|
|
453
453
|
item: n,
|
|
454
|
-
index:
|
|
455
|
-
key:
|
|
456
|
-
top:
|
|
454
|
+
index: o,
|
|
455
|
+
key: Q(n, o),
|
|
456
|
+
top: p.value.offsets[o]
|
|
457
457
|
};
|
|
458
458
|
})
|
|
459
459
|
), re = i(() => ({
|
|
460
|
-
height:
|
|
460
|
+
height: Ve(e.height)
|
|
461
461
|
}));
|
|
462
462
|
function de() {
|
|
463
463
|
var n;
|
|
464
|
-
A.value = ((n =
|
|
464
|
+
A.value = ((n = I.value) == null ? void 0 : n.clientHeight) ?? 0, K(I.value, e.height), O($);
|
|
465
465
|
}
|
|
466
466
|
function h(n) {
|
|
467
|
-
|
|
468
|
-
scrollTop:
|
|
467
|
+
z.value = n.currentTarget.scrollTop, g("scroll", {
|
|
468
|
+
scrollTop: z.value,
|
|
469
469
|
startIndex: fe.value,
|
|
470
470
|
endIndex: oe.value
|
|
471
|
-
}),
|
|
471
|
+
}), $();
|
|
472
472
|
}
|
|
473
|
-
function
|
|
474
|
-
const n =
|
|
475
|
-
if (!n || !e.hasMore || e.loading ||
|
|
473
|
+
function $() {
|
|
474
|
+
const n = I.value;
|
|
475
|
+
if (!n || !e.hasMore || e.loading || J === e.items.length)
|
|
476
476
|
return;
|
|
477
477
|
const t = Math.max(0, e.loadMoreThreshold);
|
|
478
|
-
|
|
478
|
+
D.value - n.scrollTop - n.clientHeight <= t && (J = e.items.length, g("loadMore"));
|
|
479
479
|
}
|
|
480
480
|
function l(n) {
|
|
481
481
|
const t = n.borderBoxSize;
|
|
482
482
|
if (t) {
|
|
483
|
-
const
|
|
484
|
-
if (
|
|
483
|
+
const o = Array.isArray(t) ? t[0] : t;
|
|
484
|
+
if (o != null && o.blockSize) return o.blockSize;
|
|
485
485
|
}
|
|
486
486
|
return n.contentRect.height;
|
|
487
487
|
}
|
|
488
488
|
function u(n) {
|
|
489
|
-
const t =
|
|
490
|
-
let
|
|
491
|
-
for (const
|
|
492
|
-
const he =
|
|
489
|
+
const t = p.value;
|
|
490
|
+
let o = 0, v = !1;
|
|
491
|
+
for (const B of n) {
|
|
492
|
+
const he = B.target, ve = te.get(he), ge = l(B);
|
|
493
493
|
if (ve === void 0 || ge <= 0) continue;
|
|
494
|
-
const
|
|
495
|
-
if (Math.abs(
|
|
496
|
-
const
|
|
497
|
-
|
|
494
|
+
const Te = Z.get(ve) ?? le.value;
|
|
495
|
+
if (Math.abs(Te - ge) < 0.5) continue;
|
|
496
|
+
const be = se.value.get(ve);
|
|
497
|
+
be !== void 0 && t.offsets[be + 1] <= z.value && (o += ge - Te), Z.set(ve, ge), v = !0;
|
|
498
498
|
}
|
|
499
|
-
v && (W.value += 1,
|
|
500
|
-
const
|
|
501
|
-
|
|
499
|
+
v && (W.value += 1, O($), o !== 0 && O(() => {
|
|
500
|
+
const B = I.value;
|
|
501
|
+
B && (B.scrollTop += o, z.value = B.scrollTop);
|
|
502
502
|
}));
|
|
503
503
|
}
|
|
504
504
|
function c(n, t) {
|
|
505
|
-
n instanceof HTMLElement && (te.set(n, t),
|
|
505
|
+
n instanceof HTMLElement && (te.set(n, t), L == null || L.observe(n));
|
|
506
506
|
}
|
|
507
507
|
function E() {
|
|
508
508
|
for (const [n] of te)
|
|
509
|
-
n.isConnected || (
|
|
509
|
+
n.isConnected || (L == null || L.unobserve(n), te.delete(n));
|
|
510
510
|
}
|
|
511
511
|
function P(n, t = {}) {
|
|
512
|
-
const
|
|
513
|
-
if (!
|
|
514
|
-
const v = Math.max(0,
|
|
512
|
+
const o = I.value;
|
|
513
|
+
if (!o) return;
|
|
514
|
+
const v = Math.max(0, D.value - o.clientHeight), B = Math.min(
|
|
515
515
|
Math.max(0, Number.isFinite(n) ? n : 0),
|
|
516
516
|
v
|
|
517
517
|
), he = t.behavior ?? "auto";
|
|
518
|
-
he === "auto" && (
|
|
518
|
+
he === "auto" && (z.value = B), o.scrollTo({ ...t, top: B, behavior: he });
|
|
519
519
|
}
|
|
520
|
-
function
|
|
521
|
-
const
|
|
522
|
-
if (!
|
|
520
|
+
function S(n, t = {}) {
|
|
521
|
+
const o = I.value;
|
|
522
|
+
if (!o || e.items.length === 0) return;
|
|
523
523
|
const v = Math.min(
|
|
524
524
|
e.items.length - 1,
|
|
525
525
|
Math.max(0, Math.floor(n))
|
|
526
|
-
), { align:
|
|
527
|
-
let ve =
|
|
528
|
-
const ge =
|
|
529
|
-
|
|
530
|
-
const
|
|
526
|
+
), { align: B = "start", ...he } = t;
|
|
527
|
+
let ve = p.value.offsets[v];
|
|
528
|
+
const ge = p.value.sizes[v];
|
|
529
|
+
B === "center" ? ve -= (o.clientHeight - ge) / 2 : B === "end" && (ve -= o.clientHeight - ge);
|
|
530
|
+
const Te = Math.max(
|
|
531
531
|
0,
|
|
532
|
-
Math.min(ve,
|
|
533
|
-
),
|
|
534
|
-
|
|
532
|
+
Math.min(ve, D.value - o.clientHeight)
|
|
533
|
+
), be = he.behavior ?? "auto";
|
|
534
|
+
be === "auto" && (z.value = Te), o.scrollTo({
|
|
535
535
|
...he,
|
|
536
|
-
top:
|
|
537
|
-
behavior:
|
|
536
|
+
top: Te,
|
|
537
|
+
behavior: be
|
|
538
538
|
});
|
|
539
539
|
}
|
|
540
|
-
function
|
|
540
|
+
function R(n = "auto") {
|
|
541
541
|
var t;
|
|
542
|
-
(t =
|
|
542
|
+
(t = I.value) == null || t.scrollTo({ top: 0, behavior: n });
|
|
543
543
|
}
|
|
544
544
|
return ee(
|
|
545
545
|
() => e.itemKey,
|
|
@@ -550,56 +550,56 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
550
550
|
() => e.items.length,
|
|
551
551
|
async () => {
|
|
552
552
|
const n = new Set(
|
|
553
|
-
e.items.map((v,
|
|
553
|
+
e.items.map((v, B) => Q(v, B))
|
|
554
554
|
);
|
|
555
555
|
for (const v of Z.keys())
|
|
556
556
|
n.has(v) || Z.delete(v);
|
|
557
|
-
W.value += 1, await
|
|
558
|
-
const t =
|
|
557
|
+
W.value += 1, await O();
|
|
558
|
+
const t = I.value;
|
|
559
559
|
if (!t) return;
|
|
560
|
-
const
|
|
561
|
-
t.scrollTop >
|
|
560
|
+
const o = Math.max(0, D.value - t.clientHeight);
|
|
561
|
+
t.scrollTop > o && (t.scrollTop = o, z.value = o), $();
|
|
562
562
|
}
|
|
563
563
|
), ee(
|
|
564
564
|
() => [e.hasMore, e.loading],
|
|
565
565
|
async ([n]) => {
|
|
566
|
-
n || (
|
|
566
|
+
n || (J = -1), await O(), $();
|
|
567
567
|
}
|
|
568
568
|
), Se(() => {
|
|
569
569
|
if (de(), typeof ResizeObserver < "u") {
|
|
570
|
-
Y = new ResizeObserver(de),
|
|
570
|
+
Y = new ResizeObserver(de), L = new ResizeObserver(u), I.value && Y.observe(I.value);
|
|
571
571
|
for (const [n] of te)
|
|
572
|
-
|
|
572
|
+
L.observe(n);
|
|
573
573
|
}
|
|
574
|
-
|
|
574
|
+
O($);
|
|
575
575
|
}), Ce(E), Ie(() => {
|
|
576
|
-
Y && (Y.disconnect(), Y = void 0),
|
|
577
|
-
}),
|
|
576
|
+
Y && (Y.disconnect(), Y = void 0), L && (L.disconnect(), L = void 0), te.clear();
|
|
577
|
+
}), j({
|
|
578
578
|
scrollTo: P,
|
|
579
|
-
scrollToIndex:
|
|
580
|
-
scrollToTop:
|
|
581
|
-
}), (n, t) => (
|
|
579
|
+
scrollToIndex: S,
|
|
580
|
+
scrollToTop: R
|
|
581
|
+
}), (n, t) => (w(), x("div", {
|
|
582
582
|
ref_key: "viewport",
|
|
583
|
-
ref:
|
|
584
|
-
class:
|
|
585
|
-
style:
|
|
583
|
+
ref: I,
|
|
584
|
+
class: He(["vue-dynamic-virtual-scroll", { "vue-dynamic-virtual-scroll--pulling": r(f) }]),
|
|
585
|
+
style: C(re.value),
|
|
586
586
|
role: "list",
|
|
587
|
-
"aria-label":
|
|
587
|
+
"aria-label": a.ariaLabel,
|
|
588
588
|
tabindex: "0",
|
|
589
589
|
onScrollPassive: h,
|
|
590
590
|
onTouchstartPassive: t[0] || (t[0] = //@ts-ignore
|
|
591
|
-
(...
|
|
591
|
+
(...o) => r(G) && r(G)(...o)),
|
|
592
592
|
onTouchmove: t[1] || (t[1] = //@ts-ignore
|
|
593
|
-
(...
|
|
593
|
+
(...o) => r(q) && r(q)(...o)),
|
|
594
594
|
onTouchend: t[2] || (t[2] = //@ts-ignore
|
|
595
|
-
(...
|
|
595
|
+
(...o) => r(y) && r(y)(...o)),
|
|
596
596
|
onTouchcancel: t[3] || (t[3] = //@ts-ignore
|
|
597
|
-
(...
|
|
597
|
+
(...o) => r(k) && r(k)(...o))
|
|
598
598
|
}, [
|
|
599
|
-
|
|
599
|
+
a.pullToRefresh || a.refreshing ? (w(), x("div", {
|
|
600
600
|
key: 0,
|
|
601
601
|
class: "vue-dynamic-virtual-scroll__refresh",
|
|
602
|
-
style:
|
|
602
|
+
style: C({
|
|
603
603
|
height: `${r(F)}px`,
|
|
604
604
|
transform: `translateY(${r(s) - r(F)}px)`
|
|
605
605
|
}),
|
|
@@ -607,42 +607,42 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
607
607
|
"aria-live": "polite"
|
|
608
608
|
}, [
|
|
609
609
|
ne(n.$slots, "refresh", {
|
|
610
|
-
pullDistance: r(
|
|
611
|
-
progress: r(
|
|
612
|
-
refreshing:
|
|
610
|
+
pullDistance: r(T),
|
|
611
|
+
progress: r(V),
|
|
612
|
+
refreshing: a.refreshing
|
|
613
613
|
}, () => [
|
|
614
|
-
Me(
|
|
614
|
+
Me(Ee(r(_)), 1)
|
|
615
615
|
])
|
|
616
616
|
], 4)) : me("", !0),
|
|
617
|
-
|
|
617
|
+
a.items.length || a.loading ? (w(), x("div", {
|
|
618
618
|
key: 1,
|
|
619
619
|
class: "vue-dynamic-virtual-scroll__spacer",
|
|
620
|
-
style:
|
|
621
|
-
height: `${
|
|
620
|
+
style: C({
|
|
621
|
+
height: `${D.value}px`,
|
|
622
622
|
transform: `translateY(${r(s)}px)`
|
|
623
623
|
})
|
|
624
624
|
}, [
|
|
625
|
-
(
|
|
626
|
-
key:
|
|
625
|
+
(w(!0), x(we, null, ze(ie.value, ({ item: o, index: v, key: B, top: he }) => (w(), x("div", {
|
|
626
|
+
key: B,
|
|
627
627
|
ref_for: !0,
|
|
628
|
-
ref: (ve) => c(ve,
|
|
628
|
+
ref: (ve) => c(ve, B),
|
|
629
629
|
class: "vue-dynamic-virtual-scroll__item",
|
|
630
|
-
style:
|
|
630
|
+
style: C({ transform: `translateY(${he}px)` }),
|
|
631
631
|
role: "listitem",
|
|
632
632
|
"aria-posinset": v + 1,
|
|
633
|
-
"aria-setsize":
|
|
633
|
+
"aria-setsize": a.items.length
|
|
634
634
|
}, [
|
|
635
635
|
ne(n.$slots, "default", {
|
|
636
|
-
item:
|
|
636
|
+
item: o,
|
|
637
637
|
index: v
|
|
638
638
|
})
|
|
639
|
-
], 12,
|
|
640
|
-
|
|
639
|
+
], 12, Ue))), 128)),
|
|
640
|
+
a.loading ? (w(), x("div", {
|
|
641
641
|
key: 0,
|
|
642
642
|
class: "vue-dynamic-virtual-scroll__loading",
|
|
643
|
-
style:
|
|
643
|
+
style: C({
|
|
644
644
|
height: `${ue.value}px`,
|
|
645
|
-
transform: `translateY(${
|
|
645
|
+
transform: `translateY(${p.value.total}px)`
|
|
646
646
|
}),
|
|
647
647
|
role: "status",
|
|
648
648
|
"aria-live": "polite"
|
|
@@ -651,19 +651,19 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
651
651
|
t[4] || (t[4] = Me("Loading more…", -1))
|
|
652
652
|
])
|
|
653
653
|
], 4)) : me("", !0)
|
|
654
|
-
], 4)) : (
|
|
654
|
+
], 4)) : (w(), x("div", {
|
|
655
655
|
key: 2,
|
|
656
656
|
class: "vue-dynamic-virtual-scroll__empty",
|
|
657
|
-
style:
|
|
657
|
+
style: C({ transform: `translateY(${r(s)}px)` })
|
|
658
658
|
}, [
|
|
659
659
|
ne(n.$slots, "empty")
|
|
660
660
|
], 4))
|
|
661
|
-
], 46,
|
|
661
|
+
], 46, Ge));
|
|
662
662
|
}
|
|
663
|
-
}),
|
|
663
|
+
}), je = ["aria-label"], Ze = ["aria-current", "aria-posinset", "aria-setsize"], qe = {
|
|
664
664
|
key: 1,
|
|
665
665
|
class: "vue-short-media-feed__empty"
|
|
666
|
-
}, Je = /* @__PURE__ */
|
|
666
|
+
}, Je = /* @__PURE__ */ xe({
|
|
667
667
|
name: "ShortMediaFeed",
|
|
668
668
|
__name: "ShortMediaFeed",
|
|
669
669
|
props: {
|
|
@@ -678,38 +678,38 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
678
678
|
loadMoreThreshold: { default: 2 }
|
|
679
679
|
},
|
|
680
680
|
emits: ["update:activeIndex", "change", "reachStart", "reachEnd", "loadMore"],
|
|
681
|
-
setup(
|
|
682
|
-
const e =
|
|
683
|
-
let
|
|
684
|
-
const F = Re(), { getItemKey:
|
|
681
|
+
setup(a, { expose: j, emit: H }) {
|
|
682
|
+
const e = a, g = H, f = N(), T = N(0), s = N(Y(e.activeIndex));
|
|
683
|
+
let V, _ = -1;
|
|
684
|
+
const F = Re(), { getItemKey: G } = $e({
|
|
685
685
|
componentName: "ShortMediaFeed",
|
|
686
686
|
items: () => e.items,
|
|
687
687
|
itemKey: () => e.itemKey
|
|
688
|
-
}),
|
|
688
|
+
}), q = i(
|
|
689
689
|
() => Math.max(0, Math.floor(e.buffer))
|
|
690
|
-
),
|
|
690
|
+
), y = i(
|
|
691
691
|
() => Math.max(
|
|
692
692
|
0,
|
|
693
693
|
Math.floor(
|
|
694
694
|
Number.isFinite(e.loadMoreThreshold) ? e.loadMoreThreshold : 0
|
|
695
695
|
)
|
|
696
696
|
)
|
|
697
|
-
), k = i(() =>
|
|
698
|
-
() => Math.max(0, s.value -
|
|
699
|
-
),
|
|
697
|
+
), k = i(() => T.value > 0 ? T.value : typeof e.height == "number" ? Math.max(1, e.height) : 0), I = i(
|
|
698
|
+
() => Math.max(0, s.value - q.value)
|
|
699
|
+
), z = i(
|
|
700
700
|
() => Math.min(
|
|
701
701
|
e.items.length,
|
|
702
|
-
s.value +
|
|
702
|
+
s.value + q.value + 1
|
|
703
703
|
)
|
|
704
704
|
), A = i(
|
|
705
|
-
() => e.items.slice(
|
|
705
|
+
() => e.items.slice(I.value, z.value).map((m, p) => ({
|
|
706
706
|
item: m,
|
|
707
|
-
index:
|
|
707
|
+
index: I.value + p
|
|
708
708
|
}))
|
|
709
|
-
), W = i(() =>
|
|
710
|
-
() => (e.items.length -
|
|
709
|
+
), W = i(() => I.value * k.value), Z = i(
|
|
710
|
+
() => (e.items.length - z.value) * k.value
|
|
711
711
|
), te = i(() => ({
|
|
712
|
-
height:
|
|
712
|
+
height: Ve(e.height)
|
|
713
713
|
}));
|
|
714
714
|
function Y(m) {
|
|
715
715
|
return e.items.length === 0 ? 0 : Math.min(
|
|
@@ -717,48 +717,48 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
717
717
|
Math.max(0, Math.floor(Number.isFinite(m) ? m : 0))
|
|
718
718
|
);
|
|
719
719
|
}
|
|
720
|
-
function
|
|
721
|
-
if (!e.hasMore || e.loading ||
|
|
720
|
+
function L() {
|
|
721
|
+
if (!e.hasMore || e.loading || _ === e.items.length)
|
|
722
722
|
return;
|
|
723
|
-
(e.items.length === 0 ? 0 : e.items.length - 1 - s.value) <=
|
|
723
|
+
(e.items.length === 0 ? 0 : e.items.length - 1 - s.value) <= y.value && (_ = e.items.length, g("loadMore"));
|
|
724
724
|
}
|
|
725
|
-
function
|
|
726
|
-
const
|
|
727
|
-
|
|
728
|
-
index:
|
|
729
|
-
item: e.items[
|
|
730
|
-
}),
|
|
725
|
+
function J(m) {
|
|
726
|
+
const p = Y(m);
|
|
727
|
+
p === s.value || e.items.length === 0 || (s.value = p, g("update:activeIndex", p), g("change", {
|
|
728
|
+
index: p,
|
|
729
|
+
item: e.items[p]
|
|
730
|
+
}), p === 0 && g("reachStart"), p === e.items.length - 1 && g("reachEnd"), L());
|
|
731
731
|
}
|
|
732
|
-
function
|
|
733
|
-
const
|
|
734
|
-
|
|
732
|
+
function K(m, p = {}) {
|
|
733
|
+
const D = f.value;
|
|
734
|
+
D && (typeof D.scrollTo == "function" ? D.scrollTo({ ...p, top: m }) : D.scrollTop = m);
|
|
735
735
|
}
|
|
736
|
-
function
|
|
736
|
+
function Q(m, p = {}) {
|
|
737
737
|
if (e.items.length === 0) return;
|
|
738
|
-
const
|
|
739
|
-
|
|
738
|
+
const D = Y(m);
|
|
739
|
+
J(D), K(D * k.value, p);
|
|
740
740
|
}
|
|
741
741
|
function le(m) {
|
|
742
742
|
if (k.value <= 0) return;
|
|
743
|
-
const
|
|
744
|
-
|
|
743
|
+
const p = m.currentTarget.scrollTop;
|
|
744
|
+
J(Math.round(p / k.value));
|
|
745
745
|
}
|
|
746
746
|
function ue(m) {
|
|
747
|
-
let
|
|
748
|
-
m.key === "ArrowDown" || m.key === "PageDown" ?
|
|
749
|
-
}
|
|
750
|
-
function
|
|
751
|
-
var
|
|
752
|
-
const m = ((
|
|
753
|
-
F(f.value, e.height), !(m <= 0 || m ===
|
|
754
|
-
|
|
747
|
+
let p;
|
|
748
|
+
m.key === "ArrowDown" || m.key === "PageDown" ? p = s.value + 1 : m.key === "ArrowUp" || m.key === "PageUp" ? p = s.value - 1 : m.key === "Home" ? p = 0 : m.key === "End" && (p = e.items.length - 1), p !== void 0 && (m.preventDefault(), Q(p, { behavior: "smooth" }));
|
|
749
|
+
}
|
|
750
|
+
function U() {
|
|
751
|
+
var p;
|
|
752
|
+
const m = ((p = f.value) == null ? void 0 : p.clientHeight) ?? 0;
|
|
753
|
+
F(f.value, e.height), !(m <= 0 || m === T.value) && (T.value = m, O(() => {
|
|
754
|
+
K(s.value * m);
|
|
755
755
|
}));
|
|
756
756
|
}
|
|
757
757
|
return ee(
|
|
758
758
|
() => e.activeIndex,
|
|
759
759
|
async (m) => {
|
|
760
|
-
const
|
|
761
|
-
|
|
760
|
+
const p = Y(m);
|
|
761
|
+
p !== s.value && (s.value = p, await O(), K(p * k.value), L());
|
|
762
762
|
}
|
|
763
763
|
), ee(
|
|
764
764
|
() => [
|
|
@@ -767,73 +767,106 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
767
767
|
e.loadMoreThreshold
|
|
768
768
|
],
|
|
769
769
|
async ([m]) => {
|
|
770
|
-
m || (
|
|
770
|
+
m || (_ = -1), await O(), L();
|
|
771
771
|
}
|
|
772
772
|
), ee(
|
|
773
773
|
() => e.items.length,
|
|
774
774
|
async () => {
|
|
775
775
|
const m = Y(s.value);
|
|
776
|
-
e.items.length === 0 ? s.value !== 0 && (s.value = 0,
|
|
776
|
+
e.items.length === 0 ? s.value !== 0 && (s.value = 0, g("update:activeIndex", 0)) : J(m), await O(), K(m * k.value), L();
|
|
777
777
|
}
|
|
778
778
|
), Se(async () => {
|
|
779
|
-
|
|
779
|
+
U(), typeof ResizeObserver < "u" && f.value && (V = new ResizeObserver(U), V.observe(f.value)), await O(), K(s.value * k.value), L();
|
|
780
780
|
}), Ie(() => {
|
|
781
|
-
|
|
782
|
-
}),
|
|
783
|
-
scrollToIndex:
|
|
784
|
-
}), (m,
|
|
781
|
+
V && (V.disconnect(), V = void 0);
|
|
782
|
+
}), j({
|
|
783
|
+
scrollToIndex: Q
|
|
784
|
+
}), (m, p) => (w(), x("div", {
|
|
785
785
|
ref_key: "viewport",
|
|
786
786
|
ref: f,
|
|
787
787
|
class: "vue-short-media-feed",
|
|
788
|
-
style:
|
|
788
|
+
style: C(te.value),
|
|
789
789
|
role: "list",
|
|
790
790
|
"aria-orientation": "vertical",
|
|
791
|
-
"aria-label":
|
|
791
|
+
"aria-label": a.ariaLabel,
|
|
792
792
|
tabindex: "0",
|
|
793
793
|
onScrollPassive: le,
|
|
794
794
|
onKeydown: ue
|
|
795
795
|
}, [
|
|
796
|
-
|
|
797
|
-
W.value > 0 ? (
|
|
796
|
+
a.items.length ? (w(), x(we, { key: 0 }, [
|
|
797
|
+
W.value > 0 ? (w(), x("div", {
|
|
798
798
|
key: 0,
|
|
799
799
|
class: "vue-short-media-feed__spacer",
|
|
800
|
-
style:
|
|
800
|
+
style: C({ height: `${W.value}px` }),
|
|
801
801
|
"aria-hidden": "true"
|
|
802
802
|
}, null, 4)) : me("", !0),
|
|
803
|
-
(
|
|
804
|
-
key: r(
|
|
803
|
+
(w(!0), x(we, null, ze(A.value, ({ item: D, index: se }) => (w(), x("div", {
|
|
804
|
+
key: r(G)(D, se),
|
|
805
805
|
class: "vue-short-media-feed__item",
|
|
806
|
-
style:
|
|
806
|
+
style: C({ height: `${k.value}px` }),
|
|
807
807
|
role: "listitem",
|
|
808
808
|
"aria-current": se === s.value ? "true" : void 0,
|
|
809
809
|
"aria-posinset": se + 1,
|
|
810
|
-
"aria-setsize":
|
|
810
|
+
"aria-setsize": a.items.length
|
|
811
811
|
}, [
|
|
812
812
|
ne(m.$slots, "default", {
|
|
813
|
-
item:
|
|
813
|
+
item: D,
|
|
814
814
|
index: se,
|
|
815
815
|
active: se === s.value
|
|
816
816
|
})
|
|
817
|
-
], 12,
|
|
818
|
-
Z.value > 0 ? (
|
|
817
|
+
], 12, Ze))), 128)),
|
|
818
|
+
Z.value > 0 ? (w(), x("div", {
|
|
819
819
|
key: 1,
|
|
820
820
|
class: "vue-short-media-feed__spacer",
|
|
821
|
-
style:
|
|
821
|
+
style: C({ height: `${Z.value}px` }),
|
|
822
822
|
"aria-hidden": "true"
|
|
823
823
|
}, null, 4)) : me("", !0)
|
|
824
|
-
], 64)) : (
|
|
824
|
+
], 64)) : (w(), x("div", qe, [
|
|
825
825
|
ne(m.$slots, "empty")
|
|
826
826
|
]))
|
|
827
|
-
], 44,
|
|
827
|
+
], 44, je));
|
|
828
|
+
}
|
|
829
|
+
}), Qe = ["aria-label"], Xe = /* @__PURE__ */ xe({
|
|
830
|
+
__name: "SkeletonLoader",
|
|
831
|
+
props: {
|
|
832
|
+
width: { default: "100%" },
|
|
833
|
+
height: { default: 16 },
|
|
834
|
+
variant: { default: "rounded" },
|
|
835
|
+
animated: { type: Boolean, default: !0 },
|
|
836
|
+
ariaLabel: { default: "Loading…" }
|
|
837
|
+
},
|
|
838
|
+
setup(a) {
|
|
839
|
+
const j = a;
|
|
840
|
+
function H(g) {
|
|
841
|
+
return typeof g == "number" ? `${Math.max(0, g)}px` : g;
|
|
842
|
+
}
|
|
843
|
+
const e = i(() => ({
|
|
844
|
+
width: H(j.width),
|
|
845
|
+
height: H(j.height)
|
|
846
|
+
}));
|
|
847
|
+
return (g, f) => (w(), x("div", {
|
|
848
|
+
class: He(["vue-skeleton-loader", [
|
|
849
|
+
`vue-skeleton-loader--${a.variant}`,
|
|
850
|
+
{ "vue-skeleton-loader--animated": a.animated }
|
|
851
|
+
]]),
|
|
852
|
+
style: C(e.value),
|
|
853
|
+
role: "status",
|
|
854
|
+
"aria-label": a.ariaLabel
|
|
855
|
+
}, null, 14, Qe));
|
|
828
856
|
}
|
|
829
|
-
}),
|
|
857
|
+
}), et = (a, j) => {
|
|
858
|
+
const H = a.__vccOpts || a;
|
|
859
|
+
for (const [e, g] of j)
|
|
860
|
+
H[e] = g;
|
|
861
|
+
return H;
|
|
862
|
+
}, tt = /* @__PURE__ */ et(Xe, [["__scopeId", "data-v-fc92f61f"]]), lt = ["aria-label"], at = {
|
|
830
863
|
key: 0,
|
|
831
864
|
class: "vue-virtual-carousel__track",
|
|
832
865
|
role: "list"
|
|
833
|
-
},
|
|
866
|
+
}, ot = ["aria-label", "aria-current"], nt = {
|
|
834
867
|
key: 1,
|
|
835
868
|
class: "vue-virtual-carousel__empty"
|
|
836
|
-
},
|
|
869
|
+
}, it = /* @__PURE__ */ xe({
|
|
837
870
|
name: "VirtualCarousel",
|
|
838
871
|
__name: "VirtualCarousel",
|
|
839
872
|
props: {
|
|
@@ -856,24 +889,24 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
856
889
|
responsive: { default: void 0 }
|
|
857
890
|
},
|
|
858
891
|
emits: ["update:activeIndex", "change", "reachStart", "reachEnd", "loadMore"],
|
|
859
|
-
setup(
|
|
860
|
-
const e =
|
|
861
|
-
let
|
|
862
|
-
const
|
|
892
|
+
setup(a, { expose: j, emit: H }) {
|
|
893
|
+
const e = a, g = H, f = N(), T = N(0), s = N(0);
|
|
894
|
+
let V, _ = -1, F, G, q = !1;
|
|
895
|
+
const y = N(!1), { getItemKey: k } = $e({
|
|
863
896
|
componentName: "VirtualCarousel",
|
|
864
897
|
items: () => e.items,
|
|
865
898
|
itemKey: () => e.itemKey
|
|
866
|
-
}),
|
|
899
|
+
}), I = i(() => Math.max(0, T.value)), z = i(() => {
|
|
867
900
|
if (!e.responsive || e.responsive.length === 0)
|
|
868
901
|
return {
|
|
869
902
|
slidesPerView: e.slidesPerView,
|
|
870
903
|
slidesToScroll: e.slidesToScroll,
|
|
871
904
|
gap: e.gap
|
|
872
905
|
};
|
|
873
|
-
const t =
|
|
874
|
-
(v,
|
|
906
|
+
const t = I.value, o = [...e.responsive].sort(
|
|
907
|
+
(v, B) => B.breakpoint - v.breakpoint
|
|
875
908
|
);
|
|
876
|
-
for (const v of
|
|
909
|
+
for (const v of o)
|
|
877
910
|
if (t >= v.breakpoint)
|
|
878
911
|
return {
|
|
879
912
|
slidesPerView: v.slidesPerView ?? e.slidesPerView,
|
|
@@ -889,18 +922,18 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
889
922
|
() => Math.max(
|
|
890
923
|
1,
|
|
891
924
|
Math.floor(
|
|
892
|
-
Number.isFinite(
|
|
925
|
+
Number.isFinite(z.value.slidesPerView) ? z.value.slidesPerView : 1
|
|
893
926
|
)
|
|
894
927
|
)
|
|
895
928
|
), W = i(
|
|
896
929
|
() => Math.max(
|
|
897
930
|
1,
|
|
898
931
|
Math.floor(
|
|
899
|
-
Number.isFinite(
|
|
932
|
+
Number.isFinite(z.value.slidesToScroll) ? z.value.slidesToScroll : 1
|
|
900
933
|
)
|
|
901
934
|
)
|
|
902
935
|
), Z = i(
|
|
903
|
-
() => Math.max(0, Number.isFinite(
|
|
936
|
+
() => Math.max(0, Number.isFinite(z.value.gap) ? z.value.gap : 0)
|
|
904
937
|
), te = i(
|
|
905
938
|
() => Math.max(
|
|
906
939
|
0,
|
|
@@ -913,14 +946,14 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
913
946
|
Number.isFinite(e.loadMoreThreshold) ? e.loadMoreThreshold : 0
|
|
914
947
|
)
|
|
915
948
|
)
|
|
916
|
-
),
|
|
917
|
-
if (
|
|
949
|
+
), L = i(() => Number.isFinite(e.autoplayDelay) ? Math.max(1, e.autoplayDelay) : 3e3), J = i(() => {
|
|
950
|
+
if (I.value <= 0) return 0;
|
|
918
951
|
const t = (A.value - 1) * Z.value;
|
|
919
952
|
return Math.max(
|
|
920
953
|
1,
|
|
921
|
-
(
|
|
954
|
+
(I.value - t) / A.value
|
|
922
955
|
);
|
|
923
|
-
}),
|
|
956
|
+
}), K = i(() => J.value + Z.value), Q = i(
|
|
924
957
|
() => Math.max(
|
|
925
958
|
0,
|
|
926
959
|
e.items.length - A.value
|
|
@@ -932,24 +965,24 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
932
965
|
e.items.length,
|
|
933
966
|
s.value + A.value + te.value
|
|
934
967
|
)
|
|
935
|
-
),
|
|
936
|
-
() => e.items.slice(le.value, ue.value).map((t,
|
|
968
|
+
), U = i(
|
|
969
|
+
() => e.items.slice(le.value, ue.value).map((t, o) => ({
|
|
937
970
|
item: t,
|
|
938
|
-
index: le.value +
|
|
971
|
+
index: le.value + o
|
|
939
972
|
}))
|
|
940
|
-
), m = i(() => e.items.length === 0 ? 0 : e.items.length *
|
|
941
|
-
() => le.value *
|
|
942
|
-
),
|
|
973
|
+
), m = i(() => e.items.length === 0 ? 0 : e.items.length * J.value + (e.items.length - 1) * Z.value), p = i(
|
|
974
|
+
() => le.value * K.value
|
|
975
|
+
), D = i(
|
|
943
976
|
() => Math.max(
|
|
944
977
|
0,
|
|
945
|
-
m.value - ue.value *
|
|
978
|
+
m.value - ue.value * K.value
|
|
946
979
|
)
|
|
947
980
|
), se = i(() => ({
|
|
948
|
-
height:
|
|
981
|
+
height: Ve(e.height)
|
|
949
982
|
}));
|
|
950
983
|
function ae(t) {
|
|
951
984
|
return Math.min(
|
|
952
|
-
|
|
985
|
+
Q.value,
|
|
953
986
|
Math.max(0, Math.floor(Number.isFinite(t) ? t : 0))
|
|
954
987
|
);
|
|
955
988
|
}
|
|
@@ -961,31 +994,31 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
961
994
|
);
|
|
962
995
|
}
|
|
963
996
|
function oe() {
|
|
964
|
-
if (!e.hasMore || e.loading ||
|
|
997
|
+
if (!e.hasMore || e.loading || _ === e.items.length)
|
|
965
998
|
return;
|
|
966
999
|
const t = e.items.length === 0 ? -1 : Math.min(
|
|
967
1000
|
e.items.length - 1,
|
|
968
1001
|
s.value + A.value - 1
|
|
969
1002
|
);
|
|
970
|
-
e.items.length - 1 - t <= Y.value && (
|
|
1003
|
+
e.items.length - 1 - t <= Y.value && (_ = e.items.length, g("loadMore"));
|
|
971
1004
|
}
|
|
972
1005
|
function ie(t) {
|
|
973
|
-
const
|
|
974
|
-
|
|
975
|
-
index:
|
|
976
|
-
item: e.items[
|
|
977
|
-
}),
|
|
1006
|
+
const o = ae(t);
|
|
1007
|
+
o === s.value || e.items.length === 0 || (s.value = o, g("update:activeIndex", o), g("change", {
|
|
1008
|
+
index: o,
|
|
1009
|
+
item: e.items[o]
|
|
1010
|
+
}), o === 0 && g("reachStart"), o === Q.value && g("reachEnd"), oe(), e.autoplay && !y.value && l());
|
|
978
1011
|
}
|
|
979
|
-
function re(t,
|
|
1012
|
+
function re(t, o = {}) {
|
|
980
1013
|
const v = f.value;
|
|
981
|
-
v && (typeof v.scrollTo == "function" ? v.scrollTo({ ...
|
|
1014
|
+
v && (typeof v.scrollTo == "function" ? v.scrollTo({ ...o, left: t }) : v.scrollLeft = t);
|
|
982
1015
|
}
|
|
983
|
-
function de(t,
|
|
984
|
-
if (e.items.length === 0 ||
|
|
1016
|
+
function de(t, o = {}) {
|
|
1017
|
+
if (e.items.length === 0 || K.value <= 0) return;
|
|
985
1018
|
const v = ae(t);
|
|
986
|
-
|
|
987
|
-
...
|
|
988
|
-
behavior:
|
|
1019
|
+
G = o.behavior === "smooth" ? v : void 0, ie(v), re(v * K.value, {
|
|
1020
|
+
...o,
|
|
1021
|
+
behavior: o.behavior
|
|
989
1022
|
});
|
|
990
1023
|
}
|
|
991
1024
|
function h(t = "smooth") {
|
|
@@ -994,7 +1027,7 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
994
1027
|
{ behavior: t }
|
|
995
1028
|
);
|
|
996
1029
|
}
|
|
997
|
-
function
|
|
1030
|
+
function $(t = "smooth") {
|
|
998
1031
|
de(
|
|
999
1032
|
s.value - W.value,
|
|
1000
1033
|
{ behavior: t }
|
|
@@ -1002,65 +1035,65 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
1002
1035
|
}
|
|
1003
1036
|
function l() {
|
|
1004
1037
|
u(), !(!e.autoplay || e.items.length === 0) && (F = setTimeout(() => {
|
|
1005
|
-
s.value >=
|
|
1006
|
-
},
|
|
1038
|
+
s.value >= Q.value ? e.autoplayLoop ? de(0, { behavior: "smooth" }) : u() : h("smooth");
|
|
1039
|
+
}, L.value));
|
|
1007
1040
|
}
|
|
1008
1041
|
function u() {
|
|
1009
1042
|
F !== void 0 && (clearTimeout(F), F = void 0);
|
|
1010
1043
|
}
|
|
1011
1044
|
function c() {
|
|
1012
|
-
|
|
1045
|
+
y.value = !0, e.pauseOnHover && u();
|
|
1013
1046
|
}
|
|
1014
1047
|
function E() {
|
|
1015
|
-
|
|
1048
|
+
y.value = !1, e.autoplay && l();
|
|
1016
1049
|
}
|
|
1017
1050
|
function P() {
|
|
1018
|
-
|
|
1019
|
-
}
|
|
1020
|
-
function
|
|
1021
|
-
if (
|
|
1022
|
-
const
|
|
1023
|
-
if (
|
|
1024
|
-
const v =
|
|
1025
|
-
if (Math.abs(
|
|
1026
|
-
|
|
1051
|
+
G = void 0;
|
|
1052
|
+
}
|
|
1053
|
+
function S(t) {
|
|
1054
|
+
if (K.value <= 0 || q) return;
|
|
1055
|
+
const o = t.currentTarget.scrollLeft;
|
|
1056
|
+
if (G !== void 0) {
|
|
1057
|
+
const v = G * K.value;
|
|
1058
|
+
if (Math.abs(o - v) > 1) return;
|
|
1059
|
+
G = void 0;
|
|
1027
1060
|
}
|
|
1028
|
-
ie(Math.round(
|
|
1061
|
+
ie(Math.round(o / K.value));
|
|
1029
1062
|
}
|
|
1030
|
-
function
|
|
1031
|
-
t.key === "ArrowRight" || t.key === "PageDown" ? (t.preventDefault(), h()) : t.key === "ArrowLeft" || t.key === "PageUp" ? (t.preventDefault(),
|
|
1063
|
+
function R(t) {
|
|
1064
|
+
t.key === "ArrowRight" || t.key === "PageDown" ? (t.preventDefault(), h()) : t.key === "ArrowLeft" || t.key === "PageUp" ? (t.preventDefault(), $()) : t.key === "Home" ? (t.preventDefault(), de(0, { behavior: "smooth" })) : t.key === "End" && (t.preventDefault(), de(Q.value, { behavior: "auto" }));
|
|
1032
1065
|
}
|
|
1033
1066
|
function n() {
|
|
1034
|
-
var
|
|
1035
|
-
const t = ((
|
|
1036
|
-
t <= 0 || t ===
|
|
1067
|
+
var o;
|
|
1068
|
+
const t = ((o = f.value) == null ? void 0 : o.clientWidth) ?? 0;
|
|
1069
|
+
t <= 0 || t === T.value || (q = !0, T.value = t, O(() => {
|
|
1037
1070
|
const v = ae(s.value);
|
|
1038
|
-
re(v *
|
|
1071
|
+
re(v * K.value), q = !1;
|
|
1039
1072
|
}));
|
|
1040
1073
|
}
|
|
1041
1074
|
return ee(
|
|
1042
1075
|
() => e.activeIndex,
|
|
1043
1076
|
async (t) => {
|
|
1044
|
-
const
|
|
1045
|
-
|
|
1077
|
+
const o = ae(t);
|
|
1078
|
+
o !== s.value && (P(), s.value = o, await O(), re(o * K.value), oe());
|
|
1046
1079
|
}
|
|
1047
1080
|
), ee(
|
|
1048
1081
|
() => [
|
|
1049
1082
|
e.items.length,
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1083
|
+
z.value.slidesPerView,
|
|
1084
|
+
z.value.gap,
|
|
1085
|
+
z.value.slidesToScroll
|
|
1053
1086
|
],
|
|
1054
1087
|
async () => {
|
|
1055
1088
|
const t = ae(s.value);
|
|
1056
|
-
e.items.length === 0 ? s.value !== 0 && (s.value = 0,
|
|
1089
|
+
e.items.length === 0 ? s.value !== 0 && (s.value = 0, g("update:activeIndex", 0)) : ie(t), await O(), re(t * K.value), oe(), e.autoplay && e.items.length > 0 && !y.value && l();
|
|
1057
1090
|
}
|
|
1058
1091
|
), ee(
|
|
1059
1092
|
() => e.responsive,
|
|
1060
1093
|
() => {
|
|
1061
|
-
|
|
1094
|
+
O(() => {
|
|
1062
1095
|
const t = ae(s.value);
|
|
1063
|
-
re(t *
|
|
1096
|
+
re(t * K.value);
|
|
1064
1097
|
});
|
|
1065
1098
|
},
|
|
1066
1099
|
{ deep: !0 }
|
|
@@ -1071,92 +1104,92 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
1071
1104
|
e.loadMoreThreshold
|
|
1072
1105
|
],
|
|
1073
1106
|
async ([t]) => {
|
|
1074
|
-
t || (
|
|
1107
|
+
t || (_ = -1), await O(), oe();
|
|
1075
1108
|
}
|
|
1076
1109
|
), ee(
|
|
1077
1110
|
() => e.autoplay,
|
|
1078
1111
|
(t) => {
|
|
1079
|
-
t && !
|
|
1112
|
+
t && !y.value ? l() : u();
|
|
1080
1113
|
}
|
|
1081
1114
|
), ee(
|
|
1082
1115
|
() => e.autoplayDelay,
|
|
1083
1116
|
() => {
|
|
1084
|
-
e.autoplay && !
|
|
1117
|
+
e.autoplay && !y.value && l();
|
|
1085
1118
|
}
|
|
1086
1119
|
), ee(
|
|
1087
1120
|
() => e.autoplayLoop,
|
|
1088
1121
|
(t) => {
|
|
1089
|
-
!e.autoplay ||
|
|
1122
|
+
!e.autoplay || y.value || (!t && s.value >= Q.value ? u() : l());
|
|
1090
1123
|
}
|
|
1091
1124
|
), ee(
|
|
1092
1125
|
() => e.pauseOnHover,
|
|
1093
1126
|
(t) => {
|
|
1094
|
-
t &&
|
|
1127
|
+
t && y.value ? u() : !t && e.autoplay && l();
|
|
1095
1128
|
}
|
|
1096
1129
|
), Se(async () => {
|
|
1097
|
-
n(), typeof ResizeObserver < "u" && f.value && (
|
|
1130
|
+
n(), typeof ResizeObserver < "u" && f.value && (V = new ResizeObserver(n), V.observe(f.value)), await O(), re(s.value * K.value), oe(), e.autoplay && l();
|
|
1098
1131
|
}), Ie(() => {
|
|
1099
|
-
|
|
1100
|
-
}),
|
|
1132
|
+
V && (V.disconnect(), V = void 0), u();
|
|
1133
|
+
}), j({
|
|
1101
1134
|
next: h,
|
|
1102
|
-
previous:
|
|
1135
|
+
previous: $,
|
|
1103
1136
|
scrollToIndex: de,
|
|
1104
1137
|
startAutoplay: l,
|
|
1105
1138
|
stopAutoplay: u
|
|
1106
|
-
}), (t,
|
|
1139
|
+
}), (t, o) => (w(), x("div", {
|
|
1107
1140
|
ref_key: "viewport",
|
|
1108
1141
|
ref: f,
|
|
1109
1142
|
class: "vue-virtual-carousel",
|
|
1110
|
-
style:
|
|
1143
|
+
style: C(se.value),
|
|
1111
1144
|
role: "region",
|
|
1112
1145
|
"aria-roledescription": "carousel",
|
|
1113
|
-
"aria-label":
|
|
1146
|
+
"aria-label": a.ariaLabel,
|
|
1114
1147
|
tabindex: "0",
|
|
1115
|
-
onScrollPassive:
|
|
1148
|
+
onScrollPassive: S,
|
|
1116
1149
|
onPointerdown: P,
|
|
1117
1150
|
onWheelPassive: P,
|
|
1118
|
-
onKeydown:
|
|
1151
|
+
onKeydown: R,
|
|
1119
1152
|
onMouseenter: c,
|
|
1120
1153
|
onMouseleave: E
|
|
1121
1154
|
}, [
|
|
1122
|
-
|
|
1123
|
-
|
|
1155
|
+
a.items.length ? (w(), x("div", at, [
|
|
1156
|
+
p.value > 0 ? (w(), x("div", {
|
|
1124
1157
|
key: 0,
|
|
1125
1158
|
class: "vue-virtual-carousel__spacer",
|
|
1126
|
-
style:
|
|
1159
|
+
style: C({ flexBasis: `${p.value}px` }),
|
|
1127
1160
|
"aria-hidden": "true"
|
|
1128
1161
|
}, null, 4)) : me("", !0),
|
|
1129
|
-
(
|
|
1130
|
-
key: r(k)(v,
|
|
1162
|
+
(w(!0), x(we, null, ze(U.value, ({ item: v, index: B }) => (w(), x("div", {
|
|
1163
|
+
key: r(k)(v, B),
|
|
1131
1164
|
class: "vue-virtual-carousel__item",
|
|
1132
|
-
style:
|
|
1133
|
-
flexBasis: `${
|
|
1134
|
-
marginRight:
|
|
1165
|
+
style: C({
|
|
1166
|
+
flexBasis: `${J.value}px`,
|
|
1167
|
+
marginRight: B < a.items.length - 1 ? `${Z.value}px` : "0px"
|
|
1135
1168
|
}),
|
|
1136
1169
|
role: "listitem",
|
|
1137
1170
|
"aria-roledescription": "slide",
|
|
1138
|
-
"aria-label": `${
|
|
1139
|
-
"aria-current":
|
|
1171
|
+
"aria-label": `${B + 1} of ${a.items.length}`,
|
|
1172
|
+
"aria-current": B === s.value ? "true" : void 0
|
|
1140
1173
|
}, [
|
|
1141
1174
|
ne(t.$slots, "default", {
|
|
1142
1175
|
item: v,
|
|
1143
|
-
index:
|
|
1144
|
-
active:
|
|
1145
|
-
visible: fe(
|
|
1176
|
+
index: B,
|
|
1177
|
+
active: B === s.value,
|
|
1178
|
+
visible: fe(B)
|
|
1146
1179
|
})
|
|
1147
|
-
], 12,
|
|
1148
|
-
|
|
1180
|
+
], 12, ot))), 128)),
|
|
1181
|
+
D.value > 0 ? (w(), x("div", {
|
|
1149
1182
|
key: 1,
|
|
1150
1183
|
class: "vue-virtual-carousel__spacer",
|
|
1151
|
-
style:
|
|
1184
|
+
style: C({ flexBasis: `${D.value}px` }),
|
|
1152
1185
|
"aria-hidden": "true"
|
|
1153
1186
|
}, null, 4)) : me("", !0)
|
|
1154
|
-
])) : (
|
|
1187
|
+
])) : (w(), x("div", nt, [
|
|
1155
1188
|
ne(t.$slots, "empty")
|
|
1156
1189
|
]))
|
|
1157
|
-
], 44,
|
|
1190
|
+
], 44, lt));
|
|
1158
1191
|
}
|
|
1159
|
-
}),
|
|
1192
|
+
}), st = ["aria-label"], rt = ["aria-posinset", "aria-setsize"], ut = /* @__PURE__ */ xe({
|
|
1160
1193
|
name: "VirtualScroll",
|
|
1161
1194
|
__name: "VirtualScroll",
|
|
1162
1195
|
props: {
|
|
@@ -1175,146 +1208,146 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
1175
1208
|
pullRefreshThreshold: { default: 64 }
|
|
1176
1209
|
},
|
|
1177
1210
|
emits: ["scroll", "loadMore", "refresh"],
|
|
1178
|
-
setup(
|
|
1179
|
-
const e =
|
|
1211
|
+
setup(a, { expose: j, emit: H }) {
|
|
1212
|
+
const e = a, g = H, {
|
|
1180
1213
|
pulling: f,
|
|
1181
|
-
pullDistance:
|
|
1214
|
+
pullDistance: T,
|
|
1182
1215
|
pullOffset: s,
|
|
1183
|
-
pullProgress:
|
|
1184
|
-
refreshMessage:
|
|
1216
|
+
pullProgress: V,
|
|
1217
|
+
refreshMessage: _,
|
|
1185
1218
|
refreshThreshold: F,
|
|
1186
|
-
handleTouchStart:
|
|
1187
|
-
handleTouchMove:
|
|
1188
|
-
handleTouchEnd:
|
|
1219
|
+
handleTouchStart: G,
|
|
1220
|
+
handleTouchMove: q,
|
|
1221
|
+
handleTouchEnd: y,
|
|
1189
1222
|
handleTouchCancel: k
|
|
1190
1223
|
} = Oe({
|
|
1191
1224
|
enabled: () => e.pullToRefresh,
|
|
1192
1225
|
refreshing: () => e.refreshing,
|
|
1193
1226
|
threshold: () => e.pullRefreshThreshold,
|
|
1194
|
-
onRefresh: () =>
|
|
1195
|
-
}),
|
|
1227
|
+
onRefresh: () => g("refresh")
|
|
1228
|
+
}), I = N(), z = N(0), A = N(0);
|
|
1196
1229
|
let W, Z = -1;
|
|
1197
1230
|
const te = Re(), { getItemKey: Y } = $e({
|
|
1198
1231
|
componentName: "VirtualScroll",
|
|
1199
1232
|
items: () => e.items,
|
|
1200
1233
|
itemKey: () => e.itemKey
|
|
1201
|
-
}),
|
|
1202
|
-
() => e.items.length *
|
|
1203
|
-
),
|
|
1204
|
-
() => Math.max(1, e.loadingItemSize ??
|
|
1234
|
+
}), L = i(() => Math.max(1, e.itemSize)), J = i(() => Math.max(0, Math.floor(e.overscan))), K = i(
|
|
1235
|
+
() => e.items.length * L.value
|
|
1236
|
+
), Q = i(
|
|
1237
|
+
() => Math.max(1, e.loadingItemSize ?? L.value)
|
|
1205
1238
|
), le = i(
|
|
1206
|
-
() =>
|
|
1207
|
-
), ue = i(() => A.value > 0 ? A.value : typeof e.height == "number" ? e.height : 0),
|
|
1239
|
+
() => K.value + (e.loading ? Q.value : 0)
|
|
1240
|
+
), ue = i(() => A.value > 0 ? A.value : typeof e.height == "number" ? e.height : 0), U = i(
|
|
1208
1241
|
() => Math.max(
|
|
1209
1242
|
0,
|
|
1210
|
-
Math.floor(
|
|
1243
|
+
Math.floor(z.value / L.value) - J.value
|
|
1211
1244
|
)
|
|
1212
1245
|
), m = i(() => {
|
|
1213
1246
|
const h = Math.ceil(
|
|
1214
|
-
(
|
|
1247
|
+
(z.value + ue.value) / L.value
|
|
1215
1248
|
);
|
|
1216
1249
|
return Math.min(
|
|
1217
1250
|
e.items.length,
|
|
1218
|
-
h +
|
|
1251
|
+
h + J.value
|
|
1219
1252
|
);
|
|
1220
|
-
}),
|
|
1221
|
-
() => e.items.slice(
|
|
1253
|
+
}), p = i(
|
|
1254
|
+
() => e.items.slice(U.value, m.value).map((h, $) => ({
|
|
1222
1255
|
item: h,
|
|
1223
|
-
index:
|
|
1256
|
+
index: U.value + $
|
|
1224
1257
|
}))
|
|
1225
|
-
),
|
|
1226
|
-
height:
|
|
1258
|
+
), D = i(() => ({
|
|
1259
|
+
height: Ve(e.height)
|
|
1227
1260
|
})), se = i(() => ({
|
|
1228
|
-
transform: `translateY(${
|
|
1261
|
+
transform: `translateY(${U.value * L.value}px)`
|
|
1229
1262
|
}));
|
|
1230
1263
|
function ae() {
|
|
1231
1264
|
var h;
|
|
1232
|
-
A.value = ((h =
|
|
1265
|
+
A.value = ((h = I.value) == null ? void 0 : h.clientHeight) ?? 0, te(I.value, e.height), O(oe);
|
|
1233
1266
|
}
|
|
1234
1267
|
function fe(h) {
|
|
1235
|
-
|
|
1236
|
-
scrollTop:
|
|
1237
|
-
startIndex:
|
|
1268
|
+
z.value = h.currentTarget.scrollTop, g("scroll", {
|
|
1269
|
+
scrollTop: z.value,
|
|
1270
|
+
startIndex: U.value,
|
|
1238
1271
|
endIndex: m.value
|
|
1239
1272
|
}), oe();
|
|
1240
1273
|
}
|
|
1241
1274
|
function oe() {
|
|
1242
|
-
const h =
|
|
1275
|
+
const h = I.value;
|
|
1243
1276
|
if (!h || !e.hasMore || e.loading || Z === e.items.length)
|
|
1244
1277
|
return;
|
|
1245
|
-
const
|
|
1246
|
-
le.value - h.scrollTop - h.clientHeight <=
|
|
1278
|
+
const $ = Math.max(0, e.loadMoreThreshold);
|
|
1279
|
+
le.value - h.scrollTop - h.clientHeight <= $ && (Z = e.items.length, g("loadMore"));
|
|
1247
1280
|
}
|
|
1248
|
-
function ie(h,
|
|
1249
|
-
const l =
|
|
1281
|
+
function ie(h, $ = {}) {
|
|
1282
|
+
const l = I.value;
|
|
1250
1283
|
if (!l) return;
|
|
1251
1284
|
const u = Math.max(0, le.value - l.clientHeight), c = Math.min(
|
|
1252
1285
|
Math.max(0, Number.isFinite(h) ? h : 0),
|
|
1253
1286
|
u
|
|
1254
|
-
), E =
|
|
1255
|
-
E === "auto" && (
|
|
1287
|
+
), E = $.behavior ?? "auto";
|
|
1288
|
+
E === "auto" && (z.value = c), l.scrollTo({ ...$, top: c, behavior: E });
|
|
1256
1289
|
}
|
|
1257
|
-
function re(h,
|
|
1258
|
-
const l =
|
|
1290
|
+
function re(h, $ = {}) {
|
|
1291
|
+
const l = I.value;
|
|
1259
1292
|
if (!l || e.items.length === 0) return;
|
|
1260
1293
|
const u = Math.min(
|
|
1261
1294
|
e.items.length - 1,
|
|
1262
1295
|
Math.max(0, Math.floor(h))
|
|
1263
|
-
), { align: c = "start", ...E } =
|
|
1264
|
-
let P = u *
|
|
1265
|
-
c === "center" ? P -= (l.clientHeight -
|
|
1296
|
+
), { align: c = "start", ...E } = $;
|
|
1297
|
+
let P = u * L.value;
|
|
1298
|
+
c === "center" ? P -= (l.clientHeight - L.value) / 2 : c === "end" && (P -= l.clientHeight - L.value), l.scrollTo({
|
|
1266
1299
|
...E,
|
|
1267
1300
|
top: Math.max(0, Math.min(P, le.value - l.clientHeight))
|
|
1268
1301
|
});
|
|
1269
1302
|
}
|
|
1270
1303
|
function de(h = "auto") {
|
|
1271
|
-
var
|
|
1272
|
-
(
|
|
1304
|
+
var $;
|
|
1305
|
+
($ = I.value) == null || $.scrollTo({ top: 0, behavior: h });
|
|
1273
1306
|
}
|
|
1274
1307
|
return ee(
|
|
1275
1308
|
() => [e.items.length, e.itemSize],
|
|
1276
1309
|
async () => {
|
|
1277
|
-
await
|
|
1278
|
-
const h =
|
|
1310
|
+
await O();
|
|
1311
|
+
const h = I.value;
|
|
1279
1312
|
if (!h) return;
|
|
1280
|
-
const
|
|
1281
|
-
h.scrollTop >
|
|
1313
|
+
const $ = Math.max(0, le.value - h.clientHeight);
|
|
1314
|
+
h.scrollTop > $ && (h.scrollTop = $, z.value = $), oe();
|
|
1282
1315
|
}
|
|
1283
1316
|
), ee(
|
|
1284
1317
|
() => [e.hasMore, e.loading],
|
|
1285
1318
|
async ([h]) => {
|
|
1286
|
-
h || (Z = -1), await
|
|
1319
|
+
h || (Z = -1), await O(), oe();
|
|
1287
1320
|
}
|
|
1288
1321
|
), Se(() => {
|
|
1289
|
-
ae(), typeof ResizeObserver < "u" &&
|
|
1322
|
+
ae(), typeof ResizeObserver < "u" && I.value && (W = new ResizeObserver(ae), W.observe(I.value)), O(oe);
|
|
1290
1323
|
}), Ie(() => {
|
|
1291
1324
|
W && (W.disconnect(), W = void 0);
|
|
1292
|
-
}),
|
|
1325
|
+
}), j({
|
|
1293
1326
|
scrollTo: ie,
|
|
1294
1327
|
scrollToIndex: re,
|
|
1295
1328
|
scrollToTop: de
|
|
1296
|
-
}), (h,
|
|
1329
|
+
}), (h, $) => (w(), x("div", {
|
|
1297
1330
|
ref_key: "viewport",
|
|
1298
|
-
ref:
|
|
1299
|
-
class:
|
|
1300
|
-
style: D
|
|
1331
|
+
ref: I,
|
|
1332
|
+
class: He(["vue-virtual-scroll", { "vue-virtual-scroll--pulling": r(f) }]),
|
|
1333
|
+
style: C(D.value),
|
|
1301
1334
|
role: "list",
|
|
1302
|
-
"aria-label":
|
|
1335
|
+
"aria-label": a.ariaLabel,
|
|
1303
1336
|
tabindex: "0",
|
|
1304
1337
|
onScrollPassive: fe,
|
|
1305
|
-
onTouchstartPassive:
|
|
1306
|
-
(...l) => r(
|
|
1307
|
-
onTouchmove:
|
|
1308
|
-
(...l) => r(
|
|
1309
|
-
onTouchend:
|
|
1310
|
-
(...l) => r(
|
|
1311
|
-
onTouchcancel:
|
|
1338
|
+
onTouchstartPassive: $[0] || ($[0] = //@ts-ignore
|
|
1339
|
+
(...l) => r(G) && r(G)(...l)),
|
|
1340
|
+
onTouchmove: $[1] || ($[1] = //@ts-ignore
|
|
1341
|
+
(...l) => r(q) && r(q)(...l)),
|
|
1342
|
+
onTouchend: $[2] || ($[2] = //@ts-ignore
|
|
1343
|
+
(...l) => r(y) && r(y)(...l)),
|
|
1344
|
+
onTouchcancel: $[3] || ($[3] = //@ts-ignore
|
|
1312
1345
|
(...l) => r(k) && r(k)(...l))
|
|
1313
1346
|
}, [
|
|
1314
|
-
|
|
1347
|
+
a.pullToRefresh || a.refreshing ? (w(), x("div", {
|
|
1315
1348
|
key: 0,
|
|
1316
1349
|
class: "vue-virtual-scroll__refresh",
|
|
1317
|
-
style:
|
|
1350
|
+
style: C({
|
|
1318
1351
|
height: `${r(F)}px`,
|
|
1319
1352
|
transform: `translateY(${r(s) - r(F)}px)`
|
|
1320
1353
|
}),
|
|
@@ -1322,63 +1355,63 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
1322
1355
|
"aria-live": "polite"
|
|
1323
1356
|
}, [
|
|
1324
1357
|
ne(h.$slots, "refresh", {
|
|
1325
|
-
pullDistance: r(
|
|
1326
|
-
progress: r(
|
|
1327
|
-
refreshing:
|
|
1358
|
+
pullDistance: r(T),
|
|
1359
|
+
progress: r(V),
|
|
1360
|
+
refreshing: a.refreshing
|
|
1328
1361
|
}, () => [
|
|
1329
|
-
Me(
|
|
1362
|
+
Me(Ee(r(_)), 1)
|
|
1330
1363
|
])
|
|
1331
1364
|
], 4)) : me("", !0),
|
|
1332
|
-
|
|
1365
|
+
a.items.length || a.loading ? (w(), x("div", {
|
|
1333
1366
|
key: 1,
|
|
1334
1367
|
class: "vue-virtual-scroll__spacer",
|
|
1335
|
-
style:
|
|
1368
|
+
style: C({
|
|
1336
1369
|
height: `${le.value}px`,
|
|
1337
1370
|
transform: `translateY(${r(s)}px)`
|
|
1338
1371
|
})
|
|
1339
1372
|
}, [
|
|
1340
1373
|
De("div", {
|
|
1341
1374
|
class: "vue-virtual-scroll__content",
|
|
1342
|
-
style:
|
|
1375
|
+
style: C(se.value)
|
|
1343
1376
|
}, [
|
|
1344
|
-
(
|
|
1377
|
+
(w(!0), x(we, null, ze(p.value, ({ item: l, index: u }) => (w(), x("div", {
|
|
1345
1378
|
key: r(Y)(l, u),
|
|
1346
1379
|
class: "vue-virtual-scroll__item",
|
|
1347
|
-
style:
|
|
1380
|
+
style: C({ height: `${L.value}px` }),
|
|
1348
1381
|
role: "listitem",
|
|
1349
1382
|
"aria-posinset": u + 1,
|
|
1350
|
-
"aria-setsize":
|
|
1383
|
+
"aria-setsize": a.items.length
|
|
1351
1384
|
}, [
|
|
1352
1385
|
ne(h.$slots, "default", {
|
|
1353
1386
|
item: l,
|
|
1354
1387
|
index: u
|
|
1355
1388
|
})
|
|
1356
|
-
], 12,
|
|
1389
|
+
], 12, rt))), 128))
|
|
1357
1390
|
], 4),
|
|
1358
|
-
|
|
1391
|
+
a.loading ? (w(), x("div", {
|
|
1359
1392
|
key: 0,
|
|
1360
1393
|
class: "vue-virtual-scroll__loading",
|
|
1361
|
-
style:
|
|
1362
|
-
height: `${
|
|
1363
|
-
transform: `translateY(${
|
|
1394
|
+
style: C({
|
|
1395
|
+
height: `${Q.value}px`,
|
|
1396
|
+
transform: `translateY(${K.value}px)`
|
|
1364
1397
|
}),
|
|
1365
1398
|
role: "status",
|
|
1366
1399
|
"aria-live": "polite"
|
|
1367
1400
|
}, [
|
|
1368
1401
|
ne(h.$slots, "loading", {}, () => [
|
|
1369
|
-
|
|
1402
|
+
$[4] || ($[4] = Me("Loading more…", -1))
|
|
1370
1403
|
])
|
|
1371
1404
|
], 4)) : me("", !0)
|
|
1372
|
-
], 4)) : (
|
|
1405
|
+
], 4)) : (w(), x("div", {
|
|
1373
1406
|
key: 2,
|
|
1374
1407
|
class: "vue-virtual-scroll__empty",
|
|
1375
|
-
style:
|
|
1408
|
+
style: C({ transform: `translateY(${r(s)}px)` })
|
|
1376
1409
|
}, [
|
|
1377
1410
|
ne(h.$slots, "empty")
|
|
1378
1411
|
], 4))
|
|
1379
|
-
], 46,
|
|
1412
|
+
], 46, st));
|
|
1380
1413
|
}
|
|
1381
|
-
}),
|
|
1414
|
+
}), ct = ["aria-label"], dt = ["aria-posinset", "aria-setsize"], vt = /* @__PURE__ */ xe({
|
|
1382
1415
|
name: "WindowDynamicVirtualScroll",
|
|
1383
1416
|
__name: "WindowDynamicVirtualScroll",
|
|
1384
1417
|
props: {
|
|
@@ -1396,9 +1429,9 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
1396
1429
|
pullRefreshThreshold: { default: 64 }
|
|
1397
1430
|
},
|
|
1398
1431
|
emits: ["scroll", "loadMore", "refresh"],
|
|
1399
|
-
setup(
|
|
1400
|
-
const e =
|
|
1401
|
-
let
|
|
1432
|
+
setup(a, { expose: j, emit: H }) {
|
|
1433
|
+
const e = a, g = H, f = N(), T = N(0), s = N(0), V = N(0), _ = N(0), F = /* @__PURE__ */ new Map(), G = /* @__PURE__ */ new Map(), q = /* @__PURE__ */ new Map();
|
|
1434
|
+
let y, k, I, z, A = !1, W = !1, Z = -1;
|
|
1402
1435
|
const { getItemKey: te } = $e({
|
|
1403
1436
|
componentName: "WindowDynamicVirtualScroll",
|
|
1404
1437
|
items: () => e.items,
|
|
@@ -1413,292 +1446,292 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
1413
1446
|
type: "timeout"
|
|
1414
1447
|
};
|
|
1415
1448
|
}
|
|
1416
|
-
function
|
|
1449
|
+
function L(d) {
|
|
1417
1450
|
d && (d.type === "animation" ? window.cancelAnimationFrame(d.id) : window.clearTimeout(d.id));
|
|
1418
1451
|
}
|
|
1419
1452
|
const {
|
|
1420
|
-
pulling:
|
|
1421
|
-
pullDistance:
|
|
1422
|
-
pullOffset:
|
|
1453
|
+
pulling: J,
|
|
1454
|
+
pullDistance: K,
|
|
1455
|
+
pullOffset: Q,
|
|
1423
1456
|
pullProgress: le,
|
|
1424
1457
|
refreshMessage: ue,
|
|
1425
|
-
refreshThreshold:
|
|
1458
|
+
refreshThreshold: U,
|
|
1426
1459
|
handleTouchStart: m,
|
|
1427
|
-
handleTouchMove:
|
|
1428
|
-
handleTouchEnd:
|
|
1460
|
+
handleTouchMove: p,
|
|
1461
|
+
handleTouchEnd: D,
|
|
1429
1462
|
handleTouchCancel: se
|
|
1430
1463
|
} = Oe({
|
|
1431
1464
|
enabled: () => e.pullToRefresh,
|
|
1432
1465
|
refreshing: () => e.refreshing,
|
|
1433
1466
|
threshold: () => e.pullRefreshThreshold,
|
|
1434
|
-
onRefresh: () =>
|
|
1467
|
+
onRefresh: () => g("refresh"),
|
|
1435
1468
|
scrollTop: () => typeof window > "u" ? 0 : Math.max(0, window.scrollY)
|
|
1436
1469
|
}), ae = i(
|
|
1437
1470
|
() => Math.max(1, e.estimatedItemSize)
|
|
1438
1471
|
), fe = i(
|
|
1439
1472
|
() => Math.max(1, e.loadingItemSize ?? ae.value)
|
|
1440
1473
|
), oe = i(() => Math.max(0, Math.floor(e.overscan))), ie = i(() => {
|
|
1441
|
-
|
|
1442
|
-
const d = new Array(e.items.length + 1),
|
|
1474
|
+
_.value;
|
|
1475
|
+
const d = new Array(e.items.length + 1), b = new Array(e.items.length);
|
|
1443
1476
|
d[0] = 0;
|
|
1444
|
-
for (let
|
|
1445
|
-
const ce = te(e.items[
|
|
1446
|
-
|
|
1477
|
+
for (let M = 0; M < e.items.length; M += 1) {
|
|
1478
|
+
const ce = te(e.items[M], M), X = F.get(ce) ?? ae.value;
|
|
1479
|
+
b[M] = X, d[M + 1] = d[M] + X;
|
|
1447
1480
|
}
|
|
1448
1481
|
return {
|
|
1449
1482
|
offsets: d,
|
|
1450
|
-
sizes:
|
|
1483
|
+
sizes: b,
|
|
1451
1484
|
total: d[e.items.length] ?? 0
|
|
1452
1485
|
};
|
|
1453
1486
|
}), re = i(
|
|
1454
1487
|
() => ie.value.total + (e.loading ? fe.value : 0)
|
|
1455
1488
|
), de = i(() => {
|
|
1456
1489
|
const d = /* @__PURE__ */ new Map();
|
|
1457
|
-
return e.items.forEach((
|
|
1458
|
-
d.set(te(
|
|
1490
|
+
return e.items.forEach((b, M) => {
|
|
1491
|
+
d.set(te(b, M), M);
|
|
1459
1492
|
}), d;
|
|
1460
1493
|
}), h = i(
|
|
1461
|
-
() => Math.max(0,
|
|
1494
|
+
() => Math.max(0, T.value - V.value)
|
|
1462
1495
|
);
|
|
1463
|
-
function
|
|
1496
|
+
function $(d) {
|
|
1464
1497
|
if (e.items.length === 0) return 0;
|
|
1465
|
-
const
|
|
1466
|
-
let
|
|
1467
|
-
for (;
|
|
1468
|
-
const
|
|
1469
|
-
|
|
1498
|
+
const b = ie.value.offsets;
|
|
1499
|
+
let M = 0, ce = e.items.length;
|
|
1500
|
+
for (; M < ce; ) {
|
|
1501
|
+
const X = Math.floor((M + ce) / 2);
|
|
1502
|
+
b[X + 1] <= d ? M = X + 1 : ce = X;
|
|
1470
1503
|
}
|
|
1471
|
-
return Math.min(
|
|
1504
|
+
return Math.min(M, e.items.length - 1);
|
|
1472
1505
|
}
|
|
1473
1506
|
const l = i(
|
|
1474
1507
|
() => Math.max(
|
|
1475
1508
|
0,
|
|
1476
|
-
|
|
1509
|
+
$(h.value) - oe.value
|
|
1477
1510
|
)
|
|
1478
1511
|
), u = i(() => {
|
|
1479
1512
|
if (e.items.length === 0) return 0;
|
|
1480
|
-
const d =
|
|
1513
|
+
const d = T.value + s.value - V.value, b = Math.max(
|
|
1481
1514
|
ae.value,
|
|
1482
1515
|
d
|
|
1483
|
-
),
|
|
1516
|
+
), M = $(b) + 1;
|
|
1484
1517
|
return Math.min(
|
|
1485
1518
|
e.items.length,
|
|
1486
|
-
|
|
1519
|
+
M + oe.value
|
|
1487
1520
|
);
|
|
1488
1521
|
}), c = i(
|
|
1489
|
-
() => e.items.slice(l.value, u.value).map((d,
|
|
1490
|
-
const
|
|
1522
|
+
() => e.items.slice(l.value, u.value).map((d, b) => {
|
|
1523
|
+
const M = l.value + b;
|
|
1491
1524
|
return {
|
|
1492
1525
|
item: d,
|
|
1493
|
-
index:
|
|
1494
|
-
key: te(d,
|
|
1495
|
-
top: ie.value.offsets[
|
|
1526
|
+
index: M,
|
|
1527
|
+
key: te(d, M),
|
|
1528
|
+
top: ie.value.offsets[M]
|
|
1496
1529
|
};
|
|
1497
1530
|
})
|
|
1498
1531
|
);
|
|
1499
1532
|
function E() {
|
|
1500
|
-
typeof window > "u" || (
|
|
1533
|
+
typeof window > "u" || (T.value = Math.max(0, window.scrollY), s.value = window.innerHeight, f.value && (V.value = f.value.getBoundingClientRect().top + T.value));
|
|
1501
1534
|
}
|
|
1502
1535
|
function P() {
|
|
1503
|
-
|
|
1536
|
+
g("scroll", {
|
|
1504
1537
|
scrollTop: h.value,
|
|
1505
1538
|
startIndex: l.value,
|
|
1506
1539
|
endIndex: u.value
|
|
1507
1540
|
});
|
|
1508
1541
|
}
|
|
1509
|
-
function
|
|
1510
|
-
W && (A || (A = d), !
|
|
1511
|
-
|
|
1542
|
+
function S(d = !1) {
|
|
1543
|
+
W && (A || (A = d), !I && (I = Y(() => {
|
|
1544
|
+
I = void 0, E(), A && (A = !1, P()), t();
|
|
1512
1545
|
})));
|
|
1513
1546
|
}
|
|
1514
|
-
function
|
|
1515
|
-
|
|
1547
|
+
function R() {
|
|
1548
|
+
S(!0);
|
|
1516
1549
|
}
|
|
1517
1550
|
function n() {
|
|
1518
|
-
|
|
1551
|
+
S();
|
|
1519
1552
|
}
|
|
1520
1553
|
function t() {
|
|
1521
1554
|
if (typeof window > "u" || !e.hasMore || e.loading || Z === e.items.length)
|
|
1522
1555
|
return;
|
|
1523
|
-
const d = Math.max(0, e.loadMoreThreshold),
|
|
1524
|
-
|
|
1525
|
-
}
|
|
1526
|
-
function
|
|
1527
|
-
const
|
|
1528
|
-
if (
|
|
1529
|
-
const
|
|
1530
|
-
if (
|
|
1556
|
+
const d = Math.max(0, e.loadMoreThreshold), b = V.value + re.value, M = T.value + s.value;
|
|
1557
|
+
b - M <= d && (Z = e.items.length, g("loadMore"));
|
|
1558
|
+
}
|
|
1559
|
+
function o(d) {
|
|
1560
|
+
const b = d.borderBoxSize;
|
|
1561
|
+
if (b) {
|
|
1562
|
+
const M = Array.isArray(b) ? b[0] : b;
|
|
1563
|
+
if (M != null && M.blockSize) return M.blockSize;
|
|
1531
1564
|
}
|
|
1532
1565
|
return d.contentRect.height;
|
|
1533
1566
|
}
|
|
1534
1567
|
function v(d) {
|
|
1535
|
-
const
|
|
1536
|
-
let
|
|
1537
|
-
for (const
|
|
1538
|
-
const pe =
|
|
1568
|
+
const b = ie.value;
|
|
1569
|
+
let M = 0, ce = !1;
|
|
1570
|
+
for (const X of d) {
|
|
1571
|
+
const pe = X.target, ye = G.get(pe), ke = o(X);
|
|
1539
1572
|
if (ye === void 0 || ke <= 0) continue;
|
|
1540
|
-
const
|
|
1541
|
-
if (Math.abs(
|
|
1542
|
-
const
|
|
1543
|
-
|
|
1573
|
+
const Le = F.get(ye) ?? ae.value;
|
|
1574
|
+
if (Math.abs(Le - ke) < 0.5) continue;
|
|
1575
|
+
const Be = de.value.get(ye);
|
|
1576
|
+
Be !== void 0 && b.offsets[Be + 1] <= h.value && (M += ke - Le), F.set(ye, ke), ce = !0;
|
|
1544
1577
|
}
|
|
1545
|
-
ce && (
|
|
1578
|
+
ce && (_.value += 1, O(() => {
|
|
1546
1579
|
if (W) {
|
|
1547
|
-
if (
|
|
1548
|
-
const
|
|
1580
|
+
if (M !== 0 && typeof window < "u") {
|
|
1581
|
+
const X = Math.max(
|
|
1549
1582
|
0,
|
|
1550
|
-
|
|
1583
|
+
T.value + M
|
|
1551
1584
|
);
|
|
1552
|
-
|
|
1585
|
+
T.value = X, window.scrollTo({ top: X, behavior: "auto" });
|
|
1553
1586
|
}
|
|
1554
1587
|
E(), t();
|
|
1555
1588
|
}
|
|
1556
1589
|
}));
|
|
1557
1590
|
}
|
|
1558
|
-
function
|
|
1591
|
+
function B(d) {
|
|
1559
1592
|
if (W) {
|
|
1560
|
-
for (const
|
|
1561
|
-
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
const
|
|
1565
|
-
|
|
1593
|
+
for (const b of d)
|
|
1594
|
+
q.set(b.target, b);
|
|
1595
|
+
z || (z = Y(() => {
|
|
1596
|
+
z = void 0;
|
|
1597
|
+
const b = Array.from(q.values());
|
|
1598
|
+
q.clear(), v(b);
|
|
1566
1599
|
}));
|
|
1567
1600
|
}
|
|
1568
1601
|
}
|
|
1569
|
-
function he(d,
|
|
1570
|
-
d instanceof HTMLElement && (
|
|
1602
|
+
function he(d, b) {
|
|
1603
|
+
d instanceof HTMLElement && (G.set(d, b), k == null || k.observe(d));
|
|
1571
1604
|
}
|
|
1572
1605
|
function ve() {
|
|
1573
|
-
for (const [d] of
|
|
1574
|
-
d.isConnected || (k == null || k.unobserve(d),
|
|
1606
|
+
for (const [d] of G)
|
|
1607
|
+
d.isConnected || (k == null || k.unobserve(d), G.delete(d));
|
|
1575
1608
|
}
|
|
1576
|
-
function ge(d,
|
|
1609
|
+
function ge(d, b = {}) {
|
|
1577
1610
|
if (typeof window > "u") return;
|
|
1578
1611
|
E();
|
|
1579
|
-
const
|
|
1612
|
+
const M = Math.max(0, re.value - s.value), ce = Math.min(
|
|
1580
1613
|
Math.max(0, Number.isFinite(d) ? d : 0),
|
|
1581
|
-
|
|
1582
|
-
),
|
|
1583
|
-
pe === "auto" && (
|
|
1614
|
+
M
|
|
1615
|
+
), X = Math.max(0, V.value + ce), pe = b.behavior ?? "auto";
|
|
1616
|
+
pe === "auto" && (T.value = X), window.scrollTo({ ...b, top: X, behavior: pe });
|
|
1584
1617
|
}
|
|
1585
|
-
function
|
|
1618
|
+
function Te(d, b = {}) {
|
|
1586
1619
|
if (typeof window > "u" || e.items.length === 0) return;
|
|
1587
1620
|
E();
|
|
1588
|
-
const
|
|
1621
|
+
const M = Math.min(
|
|
1589
1622
|
e.items.length - 1,
|
|
1590
1623
|
Math.max(0, Math.floor(d))
|
|
1591
|
-
), { align: ce = "start", ...
|
|
1592
|
-
let ye =
|
|
1624
|
+
), { align: ce = "start", ...X } = b, pe = ie.value.sizes[M];
|
|
1625
|
+
let ye = V.value + ie.value.offsets[M];
|
|
1593
1626
|
ce === "center" ? ye -= (s.value - pe) / 2 : ce === "end" && (ye -= s.value - pe);
|
|
1594
1627
|
const ke = Math.max(
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
),
|
|
1598
|
-
|
|
1599
|
-
...
|
|
1600
|
-
top:
|
|
1601
|
-
behavior:
|
|
1628
|
+
V.value,
|
|
1629
|
+
V.value + re.value - s.value
|
|
1630
|
+
), Le = Math.max(0, Math.min(ye, ke)), Be = X.behavior ?? "auto";
|
|
1631
|
+
Be === "auto" && (T.value = Le), window.scrollTo({
|
|
1632
|
+
...X,
|
|
1633
|
+
top: Le,
|
|
1634
|
+
behavior: Be
|
|
1602
1635
|
});
|
|
1603
1636
|
}
|
|
1604
|
-
function
|
|
1605
|
-
typeof window > "u" || (E(), window.scrollTo({ top: Math.max(0,
|
|
1637
|
+
function be(d = "auto") {
|
|
1638
|
+
typeof window > "u" || (E(), window.scrollTo({ top: Math.max(0, V.value), behavior: d }));
|
|
1606
1639
|
}
|
|
1607
1640
|
return ee(
|
|
1608
1641
|
() => e.itemKey,
|
|
1609
1642
|
() => {
|
|
1610
|
-
F.clear(),
|
|
1643
|
+
F.clear(), _.value += 1, Z = -1;
|
|
1611
1644
|
}
|
|
1612
1645
|
), ee(
|
|
1613
|
-
() => e.items.map((d,
|
|
1614
|
-
async (d,
|
|
1615
|
-
const
|
|
1616
|
-
for (const
|
|
1617
|
-
ce.has(
|
|
1618
|
-
|
|
1646
|
+
() => e.items.map((d, b) => te(d, b)),
|
|
1647
|
+
async (d, b) => {
|
|
1648
|
+
const M = d.length !== b.length || d.some((X, pe) => X !== b[pe]), ce = new Set(d);
|
|
1649
|
+
for (const X of F.keys())
|
|
1650
|
+
ce.has(X) || F.delete(X);
|
|
1651
|
+
M && (Z = -1), _.value += 1, await O(), W && (E(), t());
|
|
1619
1652
|
}
|
|
1620
1653
|
), ee(
|
|
1621
1654
|
() => [e.hasMore, e.loading],
|
|
1622
1655
|
async ([d]) => {
|
|
1623
|
-
d || (Z = -1), await
|
|
1656
|
+
d || (Z = -1), await O(), W && (E(), t());
|
|
1624
1657
|
}
|
|
1625
1658
|
), Se(() => {
|
|
1626
|
-
if (W = !0, E(), window.addEventListener("scroll",
|
|
1627
|
-
|
|
1628
|
-
|
|
1629
|
-
}), k = new ResizeObserver(
|
|
1630
|
-
for (const [d] of
|
|
1659
|
+
if (W = !0, E(), window.addEventListener("scroll", R, { passive: !0 }), window.addEventListener("resize", n, { passive: !0 }), typeof ResizeObserver < "u") {
|
|
1660
|
+
y = new ResizeObserver(() => {
|
|
1661
|
+
S();
|
|
1662
|
+
}), k = new ResizeObserver(B), f.value && y.observe(f.value);
|
|
1663
|
+
for (const [d] of G)
|
|
1631
1664
|
k.observe(d);
|
|
1632
1665
|
}
|
|
1633
|
-
|
|
1666
|
+
O(() => {
|
|
1634
1667
|
W && t();
|
|
1635
1668
|
});
|
|
1636
1669
|
}), Ce(ve), Ie(() => {
|
|
1637
|
-
W = !1, window.removeEventListener("scroll",
|
|
1638
|
-
}),
|
|
1670
|
+
W = !1, window.removeEventListener("scroll", R), window.removeEventListener("resize", n), L(I), L(z), I = void 0, z = void 0, A = !1, q.clear(), y && (y.disconnect(), y = void 0), k && (k.disconnect(), k = void 0), G.clear();
|
|
1671
|
+
}), j({
|
|
1639
1672
|
scrollTo: ge,
|
|
1640
|
-
scrollToIndex:
|
|
1641
|
-
scrollToTop:
|
|
1642
|
-
}), (d,
|
|
1673
|
+
scrollToIndex: Te,
|
|
1674
|
+
scrollToTop: be
|
|
1675
|
+
}), (d, b) => (w(), x("div", {
|
|
1643
1676
|
ref_key: "root",
|
|
1644
1677
|
ref: f,
|
|
1645
|
-
class:
|
|
1678
|
+
class: He(["vue-window-dynamic-virtual-scroll", { "vue-window-dynamic-virtual-scroll--pulling": r(J) }]),
|
|
1646
1679
|
role: "list",
|
|
1647
|
-
"aria-label":
|
|
1648
|
-
onTouchstartPassive:
|
|
1649
|
-
(...
|
|
1650
|
-
onTouchmove:
|
|
1651
|
-
(...
|
|
1652
|
-
onTouchend:
|
|
1653
|
-
(...
|
|
1654
|
-
onTouchcancel:
|
|
1655
|
-
(...
|
|
1680
|
+
"aria-label": a.ariaLabel,
|
|
1681
|
+
onTouchstartPassive: b[0] || (b[0] = //@ts-ignore
|
|
1682
|
+
(...M) => r(m) && r(m)(...M)),
|
|
1683
|
+
onTouchmove: b[1] || (b[1] = //@ts-ignore
|
|
1684
|
+
(...M) => r(p) && r(p)(...M)),
|
|
1685
|
+
onTouchend: b[2] || (b[2] = //@ts-ignore
|
|
1686
|
+
(...M) => r(D) && r(D)(...M)),
|
|
1687
|
+
onTouchcancel: b[3] || (b[3] = //@ts-ignore
|
|
1688
|
+
(...M) => r(se) && r(se)(...M))
|
|
1656
1689
|
}, [
|
|
1657
|
-
|
|
1690
|
+
a.pullToRefresh || a.refreshing ? (w(), x("div", {
|
|
1658
1691
|
key: 0,
|
|
1659
1692
|
class: "vue-window-dynamic-virtual-scroll__refresh",
|
|
1660
|
-
style:
|
|
1661
|
-
height: `${r(
|
|
1662
|
-
transform: `translateY(${r(
|
|
1693
|
+
style: C({
|
|
1694
|
+
height: `${r(U)}px`,
|
|
1695
|
+
transform: `translateY(${r(Q) - r(U)}px)`
|
|
1663
1696
|
}),
|
|
1664
1697
|
role: "status",
|
|
1665
1698
|
"aria-live": "polite"
|
|
1666
1699
|
}, [
|
|
1667
1700
|
ne(d.$slots, "refresh", {
|
|
1668
|
-
pullDistance: r(
|
|
1701
|
+
pullDistance: r(K),
|
|
1669
1702
|
progress: r(le),
|
|
1670
|
-
refreshing:
|
|
1703
|
+
refreshing: a.refreshing
|
|
1671
1704
|
}, () => [
|
|
1672
|
-
Me(
|
|
1705
|
+
Me(Ee(r(ue)), 1)
|
|
1673
1706
|
])
|
|
1674
1707
|
], 4)) : me("", !0),
|
|
1675
|
-
|
|
1708
|
+
a.items.length || a.loading ? (w(), x("div", {
|
|
1676
1709
|
key: 1,
|
|
1677
1710
|
class: "vue-window-dynamic-virtual-scroll__spacer",
|
|
1678
|
-
style:
|
|
1711
|
+
style: C({
|
|
1679
1712
|
height: `${re.value}px`,
|
|
1680
|
-
transform: `translateY(${r(
|
|
1713
|
+
transform: `translateY(${r(Q)}px)`
|
|
1681
1714
|
})
|
|
1682
1715
|
}, [
|
|
1683
|
-
(
|
|
1684
|
-
key:
|
|
1716
|
+
(w(!0), x(we, null, ze(c.value, ({ item: M, index: ce, key: X, top: pe }) => (w(), x("div", {
|
|
1717
|
+
key: X,
|
|
1685
1718
|
ref_for: !0,
|
|
1686
|
-
ref: (ye) => he(ye,
|
|
1719
|
+
ref: (ye) => he(ye, X),
|
|
1687
1720
|
class: "vue-window-dynamic-virtual-scroll__item",
|
|
1688
|
-
style:
|
|
1721
|
+
style: C({ transform: `translateY(${pe}px)` }),
|
|
1689
1722
|
role: "listitem",
|
|
1690
1723
|
"aria-posinset": ce + 1,
|
|
1691
|
-
"aria-setsize":
|
|
1724
|
+
"aria-setsize": a.items.length
|
|
1692
1725
|
}, [
|
|
1693
1726
|
ne(d.$slots, "default", {
|
|
1694
|
-
item:
|
|
1727
|
+
item: M,
|
|
1695
1728
|
index: ce
|
|
1696
1729
|
})
|
|
1697
|
-
], 12,
|
|
1698
|
-
|
|
1730
|
+
], 12, dt))), 128)),
|
|
1731
|
+
a.loading ? (w(), x("div", {
|
|
1699
1732
|
key: 0,
|
|
1700
1733
|
class: "vue-window-dynamic-virtual-scroll__loading",
|
|
1701
|
-
style:
|
|
1734
|
+
style: C({
|
|
1702
1735
|
height: `${fe.value}px`,
|
|
1703
1736
|
transform: `translateY(${ie.value.total}px)`
|
|
1704
1737
|
}),
|
|
@@ -1706,19 +1739,19 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
1706
1739
|
"aria-live": "polite"
|
|
1707
1740
|
}, [
|
|
1708
1741
|
ne(d.$slots, "loading", {}, () => [
|
|
1709
|
-
|
|
1742
|
+
b[4] || (b[4] = Me("Loading more…", -1))
|
|
1710
1743
|
])
|
|
1711
1744
|
], 4)) : me("", !0)
|
|
1712
|
-
], 4)) : (
|
|
1745
|
+
], 4)) : (w(), x("div", {
|
|
1713
1746
|
key: 2,
|
|
1714
1747
|
class: "vue-window-dynamic-virtual-scroll__empty",
|
|
1715
|
-
style:
|
|
1748
|
+
style: C({ transform: `translateY(${r(Q)}px)` })
|
|
1716
1749
|
}, [
|
|
1717
1750
|
ne(d.$slots, "empty")
|
|
1718
1751
|
], 4))
|
|
1719
|
-
], 42,
|
|
1752
|
+
], 42, ct));
|
|
1720
1753
|
}
|
|
1721
|
-
}),
|
|
1754
|
+
}), ft = ["aria-label"], ht = ["aria-posinset", "aria-setsize"], mt = /* @__PURE__ */ xe({
|
|
1722
1755
|
name: "WindowGirdVirtualScroll",
|
|
1723
1756
|
__name: "WindowGirdVirtualScroll",
|
|
1724
1757
|
props: {
|
|
@@ -1738,19 +1771,19 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
1738
1771
|
pullRefreshThreshold: { default: 64 }
|
|
1739
1772
|
},
|
|
1740
1773
|
emits: ["scroll", "loadMore", "refresh"],
|
|
1741
|
-
setup(
|
|
1742
|
-
const e =
|
|
1743
|
-
let
|
|
1744
|
-
const { getItemKey:
|
|
1774
|
+
setup(a, { expose: j, emit: H }) {
|
|
1775
|
+
const e = a, g = H, f = N(), T = N(0), s = N(0), V = N(0);
|
|
1776
|
+
let _, F = -1;
|
|
1777
|
+
const { getItemKey: G } = $e({
|
|
1745
1778
|
componentName: "WindowGirdVirtualScroll",
|
|
1746
1779
|
items: () => e.items,
|
|
1747
1780
|
itemKey: () => e.itemKey
|
|
1748
1781
|
}), {
|
|
1749
|
-
pulling:
|
|
1750
|
-
pullDistance:
|
|
1782
|
+
pulling: q,
|
|
1783
|
+
pullDistance: y,
|
|
1751
1784
|
pullOffset: k,
|
|
1752
|
-
pullProgress:
|
|
1753
|
-
refreshMessage:
|
|
1785
|
+
pullProgress: I,
|
|
1786
|
+
refreshMessage: z,
|
|
1754
1787
|
refreshThreshold: A,
|
|
1755
1788
|
handleTouchStart: W,
|
|
1756
1789
|
handleTouchMove: Z,
|
|
@@ -1760,109 +1793,109 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
1760
1793
|
enabled: () => e.pullToRefresh,
|
|
1761
1794
|
refreshing: () => e.refreshing,
|
|
1762
1795
|
threshold: () => e.pullRefreshThreshold,
|
|
1763
|
-
onRefresh: () =>
|
|
1796
|
+
onRefresh: () => g("refresh"),
|
|
1764
1797
|
scrollTop: () => typeof window > "u" ? 0 : Math.max(0, window.scrollY)
|
|
1765
|
-
}),
|
|
1798
|
+
}), L = i(() => Math.max(1, e.itemSize)), J = i(
|
|
1766
1799
|
() => Math.max(1, Math.floor(e.columns))
|
|
1767
|
-
),
|
|
1768
|
-
() => Math.max(1, e.loadingItemSize ??
|
|
1800
|
+
), K = i(() => Math.max(0, e.gap)), Q = i(() => Math.max(0, Math.floor(e.overscan))), le = i(
|
|
1801
|
+
() => Math.max(1, e.loadingItemSize ?? L.value)
|
|
1769
1802
|
), ue = i(
|
|
1770
|
-
() =>
|
|
1771
|
-
),
|
|
1772
|
-
() => Math.ceil(e.items.length /
|
|
1773
|
-
), m = i(() =>
|
|
1774
|
-
() => m.value + (e.items.length ?
|
|
1775
|
-
),
|
|
1776
|
-
() => m.value + (e.loading ? le.value + (e.items.length ?
|
|
1803
|
+
() => L.value + K.value
|
|
1804
|
+
), U = i(
|
|
1805
|
+
() => Math.ceil(e.items.length / J.value)
|
|
1806
|
+
), m = i(() => U.value === 0 ? 0 : U.value * L.value + (U.value - 1) * K.value), p = i(
|
|
1807
|
+
() => m.value + (e.items.length ? K.value : 0)
|
|
1808
|
+
), D = i(
|
|
1809
|
+
() => m.value + (e.loading ? le.value + (e.items.length ? K.value : 0) : 0)
|
|
1777
1810
|
), se = i(
|
|
1778
|
-
() => Math.max(0,
|
|
1811
|
+
() => Math.max(0, T.value - V.value)
|
|
1779
1812
|
), ae = i(
|
|
1780
1813
|
() => Math.max(
|
|
1781
1814
|
0,
|
|
1782
|
-
Math.floor(se.value / ue.value) -
|
|
1815
|
+
Math.floor(se.value / ue.value) - Q.value
|
|
1783
1816
|
)
|
|
1784
1817
|
), fe = i(() => {
|
|
1785
|
-
if (
|
|
1786
|
-
const
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
),
|
|
1790
|
-
(
|
|
1818
|
+
if (U.value === 0) return 0;
|
|
1819
|
+
const S = Math.max(
|
|
1820
|
+
L.value,
|
|
1821
|
+
T.value + s.value - V.value
|
|
1822
|
+
), R = Math.ceil(
|
|
1823
|
+
(S + K.value) / ue.value
|
|
1791
1824
|
);
|
|
1792
1825
|
return Math.min(
|
|
1793
|
-
|
|
1794
|
-
|
|
1826
|
+
U.value,
|
|
1827
|
+
R + Q.value
|
|
1795
1828
|
);
|
|
1796
1829
|
}), oe = i(
|
|
1797
|
-
() => Math.min(e.items.length, ae.value *
|
|
1830
|
+
() => Math.min(e.items.length, ae.value * J.value)
|
|
1798
1831
|
), ie = i(
|
|
1799
|
-
() => Math.min(e.items.length, fe.value *
|
|
1832
|
+
() => Math.min(e.items.length, fe.value * J.value)
|
|
1800
1833
|
), re = i(
|
|
1801
|
-
() => e.items.slice(oe.value, ie.value).map((
|
|
1802
|
-
const n = oe.value +
|
|
1834
|
+
() => e.items.slice(oe.value, ie.value).map((S, R) => {
|
|
1835
|
+
const n = oe.value + R;
|
|
1803
1836
|
return {
|
|
1804
|
-
item:
|
|
1837
|
+
item: S,
|
|
1805
1838
|
index: n,
|
|
1806
|
-
key:
|
|
1807
|
-
rowIndex: Math.floor(n /
|
|
1808
|
-
columnIndex: n %
|
|
1839
|
+
key: G(S, n),
|
|
1840
|
+
rowIndex: Math.floor(n / J.value),
|
|
1841
|
+
columnIndex: n % J.value
|
|
1809
1842
|
};
|
|
1810
1843
|
})
|
|
1811
1844
|
), de = i(() => ({
|
|
1812
|
-
gridTemplateColumns: `repeat(${
|
|
1813
|
-
columnGap: `${
|
|
1814
|
-
rowGap: `${
|
|
1845
|
+
gridTemplateColumns: `repeat(${J.value}, minmax(0, 1fr))`,
|
|
1846
|
+
columnGap: `${K.value}px`,
|
|
1847
|
+
rowGap: `${K.value}px`,
|
|
1815
1848
|
transform: `translateY(${ae.value * ue.value}px)`
|
|
1816
1849
|
}));
|
|
1817
1850
|
function h() {
|
|
1818
|
-
typeof window > "u" || (
|
|
1851
|
+
typeof window > "u" || (T.value = Math.max(0, window.scrollY), s.value = window.innerHeight, f.value && (V.value = f.value.getBoundingClientRect().top + T.value));
|
|
1819
1852
|
}
|
|
1820
|
-
function
|
|
1821
|
-
|
|
1853
|
+
function $() {
|
|
1854
|
+
g("scroll", {
|
|
1822
1855
|
scrollTop: se.value,
|
|
1823
1856
|
startIndex: oe.value,
|
|
1824
1857
|
endIndex: ie.value
|
|
1825
1858
|
});
|
|
1826
1859
|
}
|
|
1827
1860
|
function l() {
|
|
1828
|
-
h(),
|
|
1861
|
+
h(), $(), u();
|
|
1829
1862
|
}
|
|
1830
1863
|
function u() {
|
|
1831
1864
|
if (typeof window > "u" || !e.hasMore || e.loading || F === e.items.length)
|
|
1832
1865
|
return;
|
|
1833
|
-
const
|
|
1834
|
-
|
|
1866
|
+
const S = Math.max(0, e.loadMoreThreshold), R = V.value + D.value, n = T.value + s.value;
|
|
1867
|
+
R - n <= S && (F = e.items.length, g("loadMore"));
|
|
1835
1868
|
}
|
|
1836
|
-
function c(
|
|
1869
|
+
function c(S, R = {}) {
|
|
1837
1870
|
if (typeof window > "u") return;
|
|
1838
1871
|
h();
|
|
1839
|
-
const n = Math.max(0,
|
|
1840
|
-
Math.max(0, Number.isFinite(
|
|
1872
|
+
const n = Math.max(0, D.value - s.value), t = Math.min(
|
|
1873
|
+
Math.max(0, Number.isFinite(S) ? S : 0),
|
|
1841
1874
|
n
|
|
1842
|
-
),
|
|
1843
|
-
v === "auto" && (
|
|
1875
|
+
), o = Math.max(0, V.value + t), v = R.behavior ?? "auto";
|
|
1876
|
+
v === "auto" && (T.value = o), window.scrollTo({ ...R, top: o, behavior: v });
|
|
1844
1877
|
}
|
|
1845
|
-
function E(
|
|
1878
|
+
function E(S, R = {}) {
|
|
1846
1879
|
if (typeof window > "u" || e.items.length === 0) return;
|
|
1847
1880
|
h();
|
|
1848
1881
|
const n = Math.min(
|
|
1849
1882
|
e.items.length - 1,
|
|
1850
|
-
Math.max(0, Math.floor(
|
|
1851
|
-
), t = Math.floor(n /
|
|
1852
|
-
let
|
|
1853
|
-
|
|
1883
|
+
Math.max(0, Math.floor(S))
|
|
1884
|
+
), t = Math.floor(n / J.value), { align: o = "start", ...v } = R;
|
|
1885
|
+
let B = V.value + t * ue.value;
|
|
1886
|
+
o === "center" ? B -= (s.value - L.value) / 2 : o === "end" && (B -= s.value - L.value);
|
|
1854
1887
|
const he = Math.max(
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
), ve = Math.max(0, Math.min(
|
|
1858
|
-
ge === "auto" && (
|
|
1888
|
+
V.value,
|
|
1889
|
+
V.value + D.value - s.value
|
|
1890
|
+
), ve = Math.max(0, Math.min(B, he)), ge = v.behavior ?? "auto";
|
|
1891
|
+
ge === "auto" && (T.value = ve), window.scrollTo({
|
|
1859
1892
|
...v,
|
|
1860
1893
|
top: ve,
|
|
1861
1894
|
behavior: ge
|
|
1862
1895
|
});
|
|
1863
1896
|
}
|
|
1864
|
-
function P(
|
|
1865
|
-
typeof window > "u" || (h(), window.scrollTo({ top: Math.max(0,
|
|
1897
|
+
function P(S = "auto") {
|
|
1898
|
+
typeof window > "u" || (h(), window.scrollTo({ top: Math.max(0, V.value), behavior: S }));
|
|
1866
1899
|
}
|
|
1867
1900
|
return ee(
|
|
1868
1901
|
() => [
|
|
@@ -1872,127 +1905,128 @@ const Ue = ["aria-label"], je = ["aria-posinset", "aria-setsize"], Pe = /* @__PU
|
|
|
1872
1905
|
e.gap
|
|
1873
1906
|
],
|
|
1874
1907
|
async () => {
|
|
1875
|
-
await
|
|
1908
|
+
await O(), h(), u();
|
|
1876
1909
|
}
|
|
1877
1910
|
), ee(
|
|
1878
1911
|
() => [e.hasMore, e.loading],
|
|
1879
|
-
async ([
|
|
1880
|
-
|
|
1912
|
+
async ([S]) => {
|
|
1913
|
+
S || (F = -1), await O(), h(), u();
|
|
1881
1914
|
}
|
|
1882
1915
|
), Se(() => {
|
|
1883
|
-
h(), window.addEventListener("scroll", l, { passive: !0 }), window.addEventListener("resize", l, { passive: !0 }), typeof ResizeObserver < "u" && (
|
|
1916
|
+
h(), window.addEventListener("scroll", l, { passive: !0 }), window.addEventListener("resize", l, { passive: !0 }), typeof ResizeObserver < "u" && (_ = new ResizeObserver(() => {
|
|
1884
1917
|
h(), u();
|
|
1885
|
-
}), f.value &&
|
|
1918
|
+
}), f.value && _.observe(f.value)), O(u);
|
|
1886
1919
|
}), Ie(() => {
|
|
1887
|
-
window.removeEventListener("scroll", l), window.removeEventListener("resize", l),
|
|
1888
|
-
}),
|
|
1920
|
+
window.removeEventListener("scroll", l), window.removeEventListener("resize", l), _ && (_.disconnect(), _ = void 0);
|
|
1921
|
+
}), j({
|
|
1889
1922
|
scrollTo: c,
|
|
1890
1923
|
scrollToIndex: E,
|
|
1891
1924
|
scrollToTop: P
|
|
1892
|
-
}), (
|
|
1925
|
+
}), (S, R) => (w(), x("div", {
|
|
1893
1926
|
ref_key: "root",
|
|
1894
1927
|
ref: f,
|
|
1895
|
-
class:
|
|
1928
|
+
class: He(["vue-window-gird-virtual-scroll", { "vue-window-gird-virtual-scroll--pulling": r(q) }]),
|
|
1896
1929
|
role: "list",
|
|
1897
|
-
"aria-label":
|
|
1898
|
-
onTouchstartPassive:
|
|
1930
|
+
"aria-label": a.ariaLabel,
|
|
1931
|
+
onTouchstartPassive: R[0] || (R[0] = //@ts-ignore
|
|
1899
1932
|
(...n) => r(W) && r(W)(...n)),
|
|
1900
|
-
onTouchmove:
|
|
1933
|
+
onTouchmove: R[1] || (R[1] = //@ts-ignore
|
|
1901
1934
|
(...n) => r(Z) && r(Z)(...n)),
|
|
1902
|
-
onTouchend:
|
|
1935
|
+
onTouchend: R[2] || (R[2] = //@ts-ignore
|
|
1903
1936
|
(...n) => r(te) && r(te)(...n)),
|
|
1904
|
-
onTouchcancel:
|
|
1937
|
+
onTouchcancel: R[3] || (R[3] = //@ts-ignore
|
|
1905
1938
|
(...n) => r(Y) && r(Y)(...n))
|
|
1906
1939
|
}, [
|
|
1907
|
-
|
|
1940
|
+
a.pullToRefresh || a.refreshing ? (w(), x("div", {
|
|
1908
1941
|
key: 0,
|
|
1909
1942
|
class: "vue-window-gird-virtual-scroll__refresh",
|
|
1910
|
-
style:
|
|
1943
|
+
style: C({
|
|
1911
1944
|
height: `${r(A)}px`,
|
|
1912
1945
|
transform: `translateY(${r(k) - r(A)}px)`
|
|
1913
1946
|
}),
|
|
1914
1947
|
role: "status",
|
|
1915
1948
|
"aria-live": "polite"
|
|
1916
1949
|
}, [
|
|
1917
|
-
ne(
|
|
1918
|
-
pullDistance: r(
|
|
1919
|
-
progress: r(
|
|
1920
|
-
refreshing:
|
|
1950
|
+
ne(S.$slots, "refresh", {
|
|
1951
|
+
pullDistance: r(y),
|
|
1952
|
+
progress: r(I),
|
|
1953
|
+
refreshing: a.refreshing
|
|
1921
1954
|
}, () => [
|
|
1922
|
-
Me(
|
|
1955
|
+
Me(Ee(r(z)), 1)
|
|
1923
1956
|
])
|
|
1924
1957
|
], 4)) : me("", !0),
|
|
1925
|
-
|
|
1958
|
+
a.items.length || a.loading ? (w(), x("div", {
|
|
1926
1959
|
key: 1,
|
|
1927
1960
|
class: "vue-window-gird-virtual-scroll__spacer",
|
|
1928
|
-
style:
|
|
1929
|
-
height: `${
|
|
1961
|
+
style: C({
|
|
1962
|
+
height: `${D.value}px`,
|
|
1930
1963
|
transform: `translateY(${r(k)}px)`
|
|
1931
1964
|
})
|
|
1932
1965
|
}, [
|
|
1933
1966
|
De("div", {
|
|
1934
1967
|
class: "vue-window-gird-virtual-scroll__content",
|
|
1935
|
-
style:
|
|
1968
|
+
style: C(de.value)
|
|
1936
1969
|
}, [
|
|
1937
|
-
(
|
|
1938
|
-
key:
|
|
1970
|
+
(w(!0), x(we, null, ze(re.value, ({ item: n, index: t, key: o, rowIndex: v, columnIndex: B }) => (w(), x("div", {
|
|
1971
|
+
key: o,
|
|
1939
1972
|
class: "vue-window-gird-virtual-scroll__item",
|
|
1940
|
-
style:
|
|
1973
|
+
style: C({ height: `${L.value}px` }),
|
|
1941
1974
|
role: "listitem",
|
|
1942
1975
|
"aria-posinset": t + 1,
|
|
1943
|
-
"aria-setsize":
|
|
1976
|
+
"aria-setsize": a.items.length
|
|
1944
1977
|
}, [
|
|
1945
|
-
ne(
|
|
1978
|
+
ne(S.$slots, "default", {
|
|
1946
1979
|
item: n,
|
|
1947
1980
|
index: t,
|
|
1948
1981
|
rowIndex: v,
|
|
1949
|
-
columnIndex:
|
|
1982
|
+
columnIndex: B
|
|
1950
1983
|
})
|
|
1951
|
-
], 12,
|
|
1984
|
+
], 12, ht))), 128))
|
|
1952
1985
|
], 4),
|
|
1953
|
-
|
|
1986
|
+
a.loading ? (w(), x("div", {
|
|
1954
1987
|
key: 0,
|
|
1955
1988
|
class: "vue-window-gird-virtual-scroll__loading",
|
|
1956
|
-
style:
|
|
1989
|
+
style: C({
|
|
1957
1990
|
height: `${le.value}px`,
|
|
1958
|
-
transform: `translateY(${
|
|
1991
|
+
transform: `translateY(${p.value}px)`
|
|
1959
1992
|
}),
|
|
1960
1993
|
role: "status",
|
|
1961
1994
|
"aria-live": "polite"
|
|
1962
1995
|
}, [
|
|
1963
|
-
ne(
|
|
1964
|
-
|
|
1996
|
+
ne(S.$slots, "loading", {}, () => [
|
|
1997
|
+
R[4] || (R[4] = Me("Loading more…", -1))
|
|
1965
1998
|
])
|
|
1966
1999
|
], 4)) : me("", !0)
|
|
1967
|
-
], 4)) : (
|
|
2000
|
+
], 4)) : (w(), x("div", {
|
|
1968
2001
|
key: 2,
|
|
1969
2002
|
class: "vue-window-gird-virtual-scroll__empty",
|
|
1970
|
-
style:
|
|
2003
|
+
style: C({ transform: `translateY(${r(k)}px)` })
|
|
1971
2004
|
}, [
|
|
1972
|
-
ne(
|
|
2005
|
+
ne(S.$slots, "empty")
|
|
1973
2006
|
], 4))
|
|
1974
|
-
], 42,
|
|
2007
|
+
], 42, ft));
|
|
1975
2008
|
}
|
|
1976
|
-
}),
|
|
1977
|
-
install(
|
|
1978
|
-
|
|
2009
|
+
}), gt = Pe, yt = {
|
|
2010
|
+
install(a) {
|
|
2011
|
+
a.component("ChatVirtualScroll", _e), a.component("DynamicVirtualScroll", Pe), a.component("ShortMediaFeed", Je), a.component("SkeletonLoader", tt), a.component("VirtualCarousel", it), a.component("VirtualList", gt), a.component("VirtualScroll", ut), a.component(
|
|
1979
2012
|
"WindowDynamicVirtualScroll",
|
|
1980
|
-
|
|
1981
|
-
),
|
|
2013
|
+
vt
|
|
2014
|
+
), a.component(
|
|
1982
2015
|
"WindowGirdVirtualScroll",
|
|
1983
|
-
|
|
2016
|
+
mt
|
|
1984
2017
|
);
|
|
1985
2018
|
}
|
|
1986
2019
|
};
|
|
1987
2020
|
export {
|
|
1988
|
-
|
|
2021
|
+
_e as ChatVirtualScroll,
|
|
1989
2022
|
Pe as DynamicVirtualScroll,
|
|
1990
2023
|
Je as ShortMediaFeed,
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
2024
|
+
tt as SkeletonLoader,
|
|
2025
|
+
it as VirtualCarousel,
|
|
2026
|
+
gt as VirtualList,
|
|
2027
|
+
ut as VirtualScroll,
|
|
2028
|
+
yt as VueVirtualScroll,
|
|
2029
|
+
vt as WindowDynamicVirtualScroll,
|
|
2030
|
+
mt as WindowGirdVirtualScroll,
|
|
2031
|
+
yt as default
|
|
1998
2032
|
};
|