@wyxos/vibe 1.6.12 → 1.6.13
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/lib/index.js +483 -501
- package/lib/vibe.css +1 -1
- package/package.json +93 -67
- package/src/Masonry.vue +3 -21
- package/src/components/CodeTabs.vue +158 -0
- package/src/components/examples/BasicExample.vue +45 -0
- package/src/components/examples/CustomItemExample.vue +86 -0
- package/src/components/examples/SwipeModeExample.vue +39 -0
- package/src/pages.json +36401 -36401
- package/src/views/Examples.vue +247 -20
- package/toggle-link.mjs +92 -92
package/lib/index.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { nextTick as R, defineComponent as Je, ref as
|
|
2
|
-
let
|
|
1
|
+
import { nextTick as R, defineComponent as Je, ref as T, computed as J, onMounted as Ke, onUnmounted as Qe, watch as ne, createElementBlock as O, openBlock as B, renderSlot as Le, createElementVNode as A, createCommentVNode as ae, normalizeClass as Z, toDisplayString as _e, withModifiers as dt, normalizeStyle as Te, Fragment as Ce, renderList as qe, createVNode as Ie, TransitionGroup as mt, withCtx as pt, mergeProps as ht, unref as gt } from "vue";
|
|
2
|
+
let Ee = null;
|
|
3
3
|
function yt() {
|
|
4
|
-
if (
|
|
4
|
+
if (Ee != null) return Ee;
|
|
5
5
|
const t = document.createElement("div");
|
|
6
6
|
t.style.visibility = "hidden", t.style.overflow = "scroll", t.style.msOverflowStyle = "scrollbar", t.style.width = "100px", t.style.height = "100px", document.body.appendChild(t);
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
const u = t.offsetWidth -
|
|
10
|
-
return document.body.removeChild(t),
|
|
7
|
+
const i = document.createElement("div");
|
|
8
|
+
i.style.width = "100%", t.appendChild(i);
|
|
9
|
+
const u = t.offsetWidth - i.offsetWidth;
|
|
10
|
+
return document.body.removeChild(t), Ee = u, u;
|
|
11
11
|
}
|
|
12
|
-
function wt(t,
|
|
12
|
+
function wt(t, i, u, l = {}) {
|
|
13
13
|
const {
|
|
14
14
|
gutterX: I = 0,
|
|
15
15
|
gutterY: h = 0,
|
|
16
|
-
header:
|
|
16
|
+
header: a = 0,
|
|
17
17
|
footer: c = 0,
|
|
18
18
|
paddingLeft: w = 0,
|
|
19
|
-
paddingRight:
|
|
20
|
-
sizes:
|
|
19
|
+
paddingRight: k = 0,
|
|
20
|
+
sizes: v = {
|
|
21
21
|
base: 1,
|
|
22
22
|
sm: 2,
|
|
23
23
|
md: 3,
|
|
@@ -29,46 +29,46 @@ function wt(t, s, u, l = {}) {
|
|
|
29
29
|
} = l;
|
|
30
30
|
let N = 0, b = 0;
|
|
31
31
|
try {
|
|
32
|
-
if (
|
|
33
|
-
const y = window.getComputedStyle(
|
|
32
|
+
if (i && i.nodeType === 1 && typeof window < "u" && window.getComputedStyle) {
|
|
33
|
+
const y = window.getComputedStyle(i);
|
|
34
34
|
N = parseFloat(y.paddingLeft) || 0, b = parseFloat(y.paddingRight) || 0;
|
|
35
35
|
}
|
|
36
36
|
} catch {
|
|
37
37
|
}
|
|
38
|
-
const P = (w || 0) + N,
|
|
39
|
-
const
|
|
40
|
-
return Math.round(g * S /
|
|
38
|
+
const P = (w || 0) + N, s = (k || 0) + b, $ = i.offsetWidth - i.clientWidth, f = $ > 0 ? $ + 2 : yt() + 2, o = i.offsetWidth - f - P - s, d = I * (u - 1), g = Math.floor((o - d) / u), E = t.map((y) => {
|
|
39
|
+
const W = y.width, S = y.height;
|
|
40
|
+
return Math.round(g * S / W) + c + a;
|
|
41
41
|
});
|
|
42
42
|
if (H === "sequential-balanced") {
|
|
43
|
-
const y =
|
|
43
|
+
const y = E.length;
|
|
44
44
|
if (y === 0) return [];
|
|
45
|
-
const
|
|
46
|
-
let S = Math.max(...
|
|
47
|
-
const
|
|
48
|
-
let
|
|
45
|
+
const W = (M, F, _) => M + (F > 0 ? h : 0) + _;
|
|
46
|
+
let S = Math.max(...E), D = E.reduce((M, F) => M + F, 0) + h * Math.max(0, y - 1);
|
|
47
|
+
const le = (M) => {
|
|
48
|
+
let F = 1, _ = 0, Q = 0;
|
|
49
49
|
for (let C = 0; C < y; C++) {
|
|
50
|
-
const
|
|
50
|
+
const re = E[C], q = W(_, Q, re);
|
|
51
51
|
if (q <= M)
|
|
52
|
-
_ = q,
|
|
53
|
-
else if (
|
|
52
|
+
_ = q, Q++;
|
|
53
|
+
else if (F++, _ = re, Q = 1, re > M || F > u) return !1;
|
|
54
54
|
}
|
|
55
|
-
return
|
|
55
|
+
return F <= u;
|
|
56
56
|
};
|
|
57
|
-
for (; S <
|
|
58
|
-
const M = Math.floor((S +
|
|
59
|
-
|
|
57
|
+
for (; S < D; ) {
|
|
58
|
+
const M = Math.floor((S + D) / 2);
|
|
59
|
+
le(M) ? D = M : S = M + 1;
|
|
60
60
|
}
|
|
61
|
-
const
|
|
62
|
-
let V = u - 1, U = 0,
|
|
61
|
+
const oe = D, ee = new Array(u).fill(0);
|
|
62
|
+
let V = u - 1, U = 0, te = 0;
|
|
63
63
|
for (let M = y - 1; M >= 0; M--) {
|
|
64
|
-
const
|
|
65
|
-
!(
|
|
64
|
+
const F = E[M], _ = M < V;
|
|
65
|
+
!(W(U, te, F) <= oe) || _ ? (ee[V] = M + 1, V--, U = F, te = 1) : (U = W(U, te, F), te++);
|
|
66
66
|
}
|
|
67
|
-
|
|
68
|
-
const
|
|
67
|
+
ee[0] = 0;
|
|
68
|
+
const K = [], ue = new Array(u).fill(0);
|
|
69
69
|
for (let M = 0; M < u; M++) {
|
|
70
|
-
const
|
|
71
|
-
for (let C =
|
|
70
|
+
const F = ee[M], _ = M + 1 < u ? ee[M + 1] : y, Q = M * (g + I);
|
|
71
|
+
for (let C = F; C < _; C++) {
|
|
72
72
|
const q = {
|
|
73
73
|
...t[C],
|
|
74
74
|
columnWidth: g,
|
|
@@ -77,43 +77,43 @@ function wt(t, s, u, l = {}) {
|
|
|
77
77
|
left: 0,
|
|
78
78
|
top: 0
|
|
79
79
|
};
|
|
80
|
-
q.imageHeight =
|
|
80
|
+
q.imageHeight = E[C] - (c + a), q.columnHeight = E[C], q.left = Q, q.top = ue[M], ue[M] += q.columnHeight + (C + 1 < _ ? h : 0), K.push(q);
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
|
-
return
|
|
83
|
+
return K;
|
|
84
84
|
}
|
|
85
|
-
const
|
|
85
|
+
const m = new Array(u).fill(0), L = [];
|
|
86
86
|
for (let y = 0; y < t.length; y++) {
|
|
87
|
-
const
|
|
88
|
-
...
|
|
87
|
+
const W = t[y], S = {
|
|
88
|
+
...W,
|
|
89
89
|
columnWidth: 0,
|
|
90
90
|
imageHeight: 0,
|
|
91
91
|
columnHeight: 0,
|
|
92
92
|
left: 0,
|
|
93
93
|
top: 0
|
|
94
|
-
},
|
|
95
|
-
S.columnWidth = g, S.left =
|
|
94
|
+
}, D = m.indexOf(Math.min(...m)), le = W.width, oe = W.height;
|
|
95
|
+
S.columnWidth = g, S.left = D * (g + I), S.imageHeight = Math.round(g * oe / le), S.columnHeight = S.imageHeight + c + a, S.top = m[D], m[D] += S.columnHeight + h, L.push(S);
|
|
96
96
|
}
|
|
97
97
|
return L;
|
|
98
98
|
}
|
|
99
|
-
var bt = typeof global == "object" && global && global.Object === Object && global, xt = typeof self == "object" && self && self.Object === Object && self, Ze = bt || xt || Function("return this")(),
|
|
100
|
-
function
|
|
101
|
-
var
|
|
99
|
+
var bt = typeof global == "object" && global && global.Object === Object && global, xt = typeof self == "object" && self && self.Object === Object && self, Ze = bt || xt || Function("return this")(), he = Ze.Symbol, et = Object.prototype, Mt = et.hasOwnProperty, Tt = et.toString, ve = he ? he.toStringTag : void 0;
|
|
100
|
+
function It(t) {
|
|
101
|
+
var i = Mt.call(t, ve), u = t[ve];
|
|
102
102
|
try {
|
|
103
|
-
t[
|
|
103
|
+
t[ve] = void 0;
|
|
104
104
|
var l = !0;
|
|
105
105
|
} catch {
|
|
106
106
|
}
|
|
107
107
|
var I = Tt.call(t);
|
|
108
|
-
return l && (
|
|
108
|
+
return l && (i ? t[ve] = u : delete t[ve]), I;
|
|
109
109
|
}
|
|
110
|
-
var
|
|
110
|
+
var Et = Object.prototype, kt = Et.toString;
|
|
111
111
|
function Lt(t) {
|
|
112
|
-
return
|
|
112
|
+
return kt.call(t);
|
|
113
113
|
}
|
|
114
|
-
var Pt = "[object Null]", St = "[object Undefined]", Ye =
|
|
114
|
+
var Pt = "[object Null]", St = "[object Undefined]", Ye = he ? he.toStringTag : void 0;
|
|
115
115
|
function $t(t) {
|
|
116
|
-
return t == null ? t === void 0 ? St : Pt : Ye && Ye in Object(t) ?
|
|
116
|
+
return t == null ? t === void 0 ? St : Pt : Ye && Ye in Object(t) ? It(t) : Lt(t);
|
|
117
117
|
}
|
|
118
118
|
function Ht(t) {
|
|
119
119
|
return t != null && typeof t == "object";
|
|
@@ -124,86 +124,86 @@ function Wt(t) {
|
|
|
124
124
|
}
|
|
125
125
|
var Dt = /\s/;
|
|
126
126
|
function At(t) {
|
|
127
|
-
for (var
|
|
127
|
+
for (var i = t.length; i-- && Dt.test(t.charAt(i)); )
|
|
128
128
|
;
|
|
129
|
-
return
|
|
129
|
+
return i;
|
|
130
130
|
}
|
|
131
131
|
var Ot = /^\s+/;
|
|
132
|
-
function
|
|
132
|
+
function Bt(t) {
|
|
133
133
|
return t && t.slice(0, At(t) + 1).replace(Ot, "");
|
|
134
134
|
}
|
|
135
|
-
function
|
|
136
|
-
var
|
|
137
|
-
return t != null && (
|
|
135
|
+
function Pe(t) {
|
|
136
|
+
var i = typeof t;
|
|
137
|
+
return t != null && (i == "object" || i == "function");
|
|
138
138
|
}
|
|
139
|
-
var Ve = NaN,
|
|
139
|
+
var Ve = NaN, Ft = /^[-+]0x[0-9a-f]+$/i, zt = /^0b[01]+$/i, jt = /^0o[0-7]+$/i, Rt = parseInt;
|
|
140
140
|
function Ue(t) {
|
|
141
141
|
if (typeof t == "number")
|
|
142
142
|
return t;
|
|
143
143
|
if (Wt(t))
|
|
144
144
|
return Ve;
|
|
145
|
-
if (
|
|
146
|
-
var
|
|
147
|
-
t =
|
|
145
|
+
if (Pe(t)) {
|
|
146
|
+
var i = typeof t.valueOf == "function" ? t.valueOf() : t;
|
|
147
|
+
t = Pe(i) ? i + "" : i;
|
|
148
148
|
}
|
|
149
149
|
if (typeof t != "string")
|
|
150
150
|
return t === 0 ? t : +t;
|
|
151
|
-
t =
|
|
152
|
-
var u =
|
|
153
|
-
return u || jt.test(t) ? Rt(t.slice(2), u ? 2 : 8) :
|
|
151
|
+
t = Bt(t);
|
|
152
|
+
var u = zt.test(t);
|
|
153
|
+
return u || jt.test(t) ? Rt(t.slice(2), u ? 2 : 8) : Ft.test(t) ? Ve : +t;
|
|
154
154
|
}
|
|
155
|
-
var
|
|
155
|
+
var ke = function() {
|
|
156
156
|
return Ze.Date.now();
|
|
157
157
|
}, _t = "Expected a function", Ct = Math.max, qt = Math.min;
|
|
158
|
-
function Ge(t,
|
|
159
|
-
var l, I, h,
|
|
158
|
+
function Ge(t, i, u) {
|
|
159
|
+
var l, I, h, a, c, w, k = 0, v = !1, H = !1, N = !0;
|
|
160
160
|
if (typeof t != "function")
|
|
161
161
|
throw new TypeError(_t);
|
|
162
|
-
|
|
163
|
-
function b(
|
|
162
|
+
i = Ue(i) || 0, Pe(u) && (v = !!u.leading, H = "maxWait" in u, h = H ? Ct(Ue(u.maxWait) || 0, i) : h, N = "trailing" in u ? !!u.trailing : N);
|
|
163
|
+
function b(m) {
|
|
164
164
|
var L = l, y = I;
|
|
165
|
-
return l = I = void 0,
|
|
165
|
+
return l = I = void 0, k = m, a = t.apply(y, L), a;
|
|
166
166
|
}
|
|
167
|
-
function P(
|
|
168
|
-
return
|
|
167
|
+
function P(m) {
|
|
168
|
+
return k = m, c = setTimeout(f, i), v ? b(m) : a;
|
|
169
169
|
}
|
|
170
|
-
function
|
|
171
|
-
var L =
|
|
172
|
-
return H ? qt(
|
|
170
|
+
function s(m) {
|
|
171
|
+
var L = m - w, y = m - k, W = i - L;
|
|
172
|
+
return H ? qt(W, h - y) : W;
|
|
173
173
|
}
|
|
174
|
-
function $(
|
|
175
|
-
var L =
|
|
176
|
-
return w === void 0 || L >=
|
|
174
|
+
function $(m) {
|
|
175
|
+
var L = m - w, y = m - k;
|
|
176
|
+
return w === void 0 || L >= i || L < 0 || H && y >= h;
|
|
177
177
|
}
|
|
178
178
|
function f() {
|
|
179
|
-
var
|
|
180
|
-
if ($(
|
|
181
|
-
return o(
|
|
182
|
-
c = setTimeout(f,
|
|
179
|
+
var m = ke();
|
|
180
|
+
if ($(m))
|
|
181
|
+
return o(m);
|
|
182
|
+
c = setTimeout(f, s(m));
|
|
183
183
|
}
|
|
184
|
-
function o(
|
|
185
|
-
return c = void 0, N && l ? b(
|
|
184
|
+
function o(m) {
|
|
185
|
+
return c = void 0, N && l ? b(m) : (l = I = void 0, a);
|
|
186
186
|
}
|
|
187
|
-
function
|
|
188
|
-
c !== void 0 && clearTimeout(c),
|
|
187
|
+
function d() {
|
|
188
|
+
c !== void 0 && clearTimeout(c), k = 0, l = w = I = c = void 0;
|
|
189
189
|
}
|
|
190
190
|
function g() {
|
|
191
|
-
return c === void 0 ?
|
|
191
|
+
return c === void 0 ? a : o(ke());
|
|
192
192
|
}
|
|
193
|
-
function
|
|
194
|
-
var
|
|
195
|
-
if (l = arguments, I = this, w =
|
|
193
|
+
function E() {
|
|
194
|
+
var m = ke(), L = $(m);
|
|
195
|
+
if (l = arguments, I = this, w = m, L) {
|
|
196
196
|
if (c === void 0)
|
|
197
197
|
return P(w);
|
|
198
198
|
if (H)
|
|
199
|
-
return clearTimeout(c), c = setTimeout(f,
|
|
199
|
+
return clearTimeout(c), c = setTimeout(f, i), b(w);
|
|
200
200
|
}
|
|
201
|
-
return c === void 0 && (c = setTimeout(f,
|
|
201
|
+
return c === void 0 && (c = setTimeout(f, i)), a;
|
|
202
202
|
}
|
|
203
|
-
return
|
|
203
|
+
return E.cancel = d, E.flush = g, E;
|
|
204
204
|
}
|
|
205
|
-
function
|
|
206
|
-
const u =
|
|
205
|
+
function de(t, i) {
|
|
206
|
+
const u = i ?? (typeof window < "u" ? window.innerWidth : 1024), l = t.sizes;
|
|
207
207
|
return u >= 1536 && l["2xl"] ? l["2xl"] : u >= 1280 && l.xl ? l.xl : u >= 1024 && l.lg ? l.lg : u >= 768 && l.md ? l.md : u >= 640 && l.sm ? l.sm : l.base;
|
|
208
208
|
}
|
|
209
209
|
function Yt(t) {
|
|
@@ -218,65 +218,65 @@ function Vt(t) {
|
|
|
218
218
|
height: `${t.columnHeight}px`
|
|
219
219
|
};
|
|
220
220
|
}
|
|
221
|
-
function Ut(t,
|
|
221
|
+
function Ut(t, i = 0) {
|
|
222
222
|
return {
|
|
223
223
|
style: Vt(t),
|
|
224
224
|
"data-top": t.top,
|
|
225
225
|
"data-left": t.left,
|
|
226
226
|
"data-id": `${t.page}-${t.id}`,
|
|
227
|
-
"data-index":
|
|
227
|
+
"data-index": i
|
|
228
228
|
};
|
|
229
229
|
}
|
|
230
|
-
function
|
|
231
|
-
if (!t.length ||
|
|
232
|
-
return new Array(Math.max(1,
|
|
233
|
-
const l = Array.from(new Set(t.map((
|
|
234
|
-
for (let
|
|
230
|
+
function Se(t, i) {
|
|
231
|
+
if (!t.length || i <= 0)
|
|
232
|
+
return new Array(Math.max(1, i)).fill(0);
|
|
233
|
+
const l = Array.from(new Set(t.map((a) => a.left))).sort((a, c) => a - c).slice(0, i), I = /* @__PURE__ */ new Map();
|
|
234
|
+
for (let a = 0; a < l.length; a++) I.set(l[a], a);
|
|
235
235
|
const h = new Array(l.length).fill(0);
|
|
236
|
-
for (const
|
|
237
|
-
const c = I.get(
|
|
238
|
-
c != null && (h[c] = Math.max(h[c],
|
|
236
|
+
for (const a of t) {
|
|
237
|
+
const c = I.get(a.left);
|
|
238
|
+
c != null && (h[c] = Math.max(h[c], a.top + a.columnHeight));
|
|
239
239
|
}
|
|
240
|
-
for (; h.length <
|
|
240
|
+
for (; h.length < i; ) h.push(0);
|
|
241
241
|
return h;
|
|
242
242
|
}
|
|
243
|
-
function Gt(t,
|
|
244
|
-
function u(
|
|
245
|
-
const w = parseInt(
|
|
246
|
-
|
|
247
|
-
|
|
243
|
+
function Gt(t, i) {
|
|
244
|
+
function u(a, c) {
|
|
245
|
+
const w = parseInt(a.dataset.left || "0", 10), k = parseInt(a.dataset.top || "0", 10), v = parseInt(a.dataset.index || "0", 10), H = Math.min(v * 20, 160), N = a.style.getPropertyValue("--masonry-opacity-delay");
|
|
246
|
+
a.style.setProperty("--masonry-opacity-delay", `${H}ms`), requestAnimationFrame(() => {
|
|
247
|
+
a.style.opacity = "1", a.style.transform = `translate3d(${w}px, ${k}px, 0) scale(1)`;
|
|
248
248
|
const b = () => {
|
|
249
|
-
N ?
|
|
249
|
+
N ? a.style.setProperty("--masonry-opacity-delay", N) : a.style.removeProperty("--masonry-opacity-delay"), a.removeEventListener("transitionend", b), c();
|
|
250
250
|
};
|
|
251
|
-
|
|
251
|
+
a.addEventListener("transitionend", b);
|
|
252
252
|
});
|
|
253
253
|
}
|
|
254
|
-
function l(
|
|
255
|
-
const c = parseInt(
|
|
256
|
-
|
|
254
|
+
function l(a) {
|
|
255
|
+
const c = parseInt(a.dataset.left || "0", 10), w = parseInt(a.dataset.top || "0", 10);
|
|
256
|
+
a.style.opacity = "0", a.style.transform = `translate3d(${c}px, ${w + 10}px, 0) scale(0.985)`;
|
|
257
257
|
}
|
|
258
|
-
function I(
|
|
259
|
-
const c = parseInt(
|
|
260
|
-
|
|
261
|
-
|
|
258
|
+
function I(a) {
|
|
259
|
+
const c = parseInt(a.dataset.left || "0", 10), w = parseInt(a.dataset.top || "0", 10);
|
|
260
|
+
a.style.transition = "none", a.style.opacity = "1", a.style.transform = `translate3d(${c}px, ${w}px, 0) scale(1)`, a.style.removeProperty("--masonry-opacity-delay"), requestAnimationFrame(() => {
|
|
261
|
+
a.style.transition = "";
|
|
262
262
|
});
|
|
263
263
|
}
|
|
264
|
-
function h(
|
|
265
|
-
const w = parseInt(
|
|
266
|
-
let H = Number.isFinite(
|
|
264
|
+
function h(a, c) {
|
|
265
|
+
const w = parseInt(a.dataset.left || "0", 10), k = parseInt(a.dataset.top || "0", 10), v = typeof (i == null ? void 0 : i.leaveDurationMs) == "number" ? i.leaveDurationMs : NaN;
|
|
266
|
+
let H = Number.isFinite(v) && v > 0 ? v : NaN;
|
|
267
267
|
if (!Number.isFinite(H)) {
|
|
268
|
-
const f = getComputedStyle(
|
|
268
|
+
const f = getComputedStyle(a).getPropertyValue("--masonry-leave-duration") || "", o = parseFloat(f);
|
|
269
269
|
H = Number.isFinite(o) && o > 0 ? o : 200;
|
|
270
270
|
}
|
|
271
|
-
const N =
|
|
272
|
-
|
|
271
|
+
const N = a.style.transitionDuration, b = () => {
|
|
272
|
+
a.removeEventListener("transitionend", P), clearTimeout(s), a.style.transitionDuration = N || "";
|
|
273
273
|
}, P = ($) => {
|
|
274
|
-
(!$ || $.target ===
|
|
275
|
-
},
|
|
274
|
+
(!$ || $.target === a) && (b(), c());
|
|
275
|
+
}, s = setTimeout(() => {
|
|
276
276
|
b(), c();
|
|
277
277
|
}, H + 100);
|
|
278
278
|
requestAnimationFrame(() => {
|
|
279
|
-
|
|
279
|
+
a.style.transitionDuration = `${H}ms`, a.style.opacity = "0", a.style.transform = `translate3d(${w}px, ${k + 10}px, 0) scale(0.985)`, a.addEventListener("transitionend", P);
|
|
280
280
|
});
|
|
281
281
|
}
|
|
282
282
|
return {
|
|
@@ -288,23 +288,23 @@ function Gt(t, s) {
|
|
|
288
288
|
}
|
|
289
289
|
function Xt({
|
|
290
290
|
container: t,
|
|
291
|
-
masonry:
|
|
291
|
+
masonry: i,
|
|
292
292
|
columns: u,
|
|
293
293
|
containerHeight: l,
|
|
294
294
|
isLoading: I,
|
|
295
295
|
pageSize: h,
|
|
296
|
-
refreshLayout:
|
|
296
|
+
refreshLayout: a,
|
|
297
297
|
setItemsRaw: c,
|
|
298
298
|
loadNext: w,
|
|
299
|
-
loadThresholdPx:
|
|
299
|
+
loadThresholdPx: k
|
|
300
300
|
}) {
|
|
301
|
-
let
|
|
301
|
+
let v = 0;
|
|
302
302
|
async function H(N) {
|
|
303
303
|
if (!t.value) return;
|
|
304
|
-
const b = N ??
|
|
305
|
-
|
|
306
|
-
const f = typeof
|
|
307
|
-
if (
|
|
304
|
+
const b = N ?? Se(i.value, u.value), P = b.length ? Math.max(...b) : 0, s = t.value.scrollTop + t.value.clientHeight, $ = t.value.scrollTop > v + 1;
|
|
305
|
+
v = t.value.scrollTop;
|
|
306
|
+
const f = typeof k == "number" ? k : 200, o = f >= 0 ? Math.max(0, P - f) : Math.max(0, P + f);
|
|
307
|
+
if (s >= o && $ && !I.value) {
|
|
308
308
|
await w(), await R();
|
|
309
309
|
return;
|
|
310
310
|
}
|
|
@@ -325,7 +325,7 @@ const Jt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
|
|
|
325
325
|
}, na = {
|
|
326
326
|
key: 4,
|
|
327
327
|
class: "absolute inset-0 flex flex-col items-center justify-center bg-slate-50 text-slate-400 text-sm p-4 text-center"
|
|
328
|
-
}, la = ["title"], oa = { class: "absolute bottom-0 left-0 right-0 p-3 opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 delay-75 pointer-events-none" }, ra = { class: "text-white text-xs font-medium truncate drop-shadow-md" },
|
|
328
|
+
}, la = ["title"], oa = { class: "absolute bottom-0 left-0 right-0 p-3 opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 delay-75 pointer-events-none" }, ra = { class: "text-white text-xs font-medium truncate drop-shadow-md" }, ge = /* @__PURE__ */ Je({
|
|
329
329
|
__name: "MasonryItem",
|
|
330
330
|
props: {
|
|
331
331
|
item: {},
|
|
@@ -334,57 +334,57 @@ const Jt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
|
|
|
334
334
|
notFound: { type: Boolean, default: void 0 }
|
|
335
335
|
},
|
|
336
336
|
setup(t) {
|
|
337
|
-
const
|
|
337
|
+
const i = t, u = T(!1), l = T(!1), I = T(null), h = T(!1), a = T(!1), c = T(null), w = T(!1), k = T(!1), v = T(!1), H = T(null);
|
|
338
338
|
let N = null;
|
|
339
339
|
const b = J(() => {
|
|
340
340
|
var o;
|
|
341
|
-
return
|
|
341
|
+
return i.type ?? ((o = i.item) == null ? void 0 : o.type) ?? "image";
|
|
342
342
|
}), P = J(() => {
|
|
343
343
|
var o;
|
|
344
|
-
return
|
|
344
|
+
return i.notFound ?? ((o = i.item) == null ? void 0 : o.notFound) ?? !1;
|
|
345
345
|
});
|
|
346
|
-
function
|
|
347
|
-
return new Promise((
|
|
346
|
+
function s(o) {
|
|
347
|
+
return new Promise((d, g) => {
|
|
348
348
|
if (!o) {
|
|
349
349
|
g(new Error("No image source provided"));
|
|
350
350
|
return;
|
|
351
351
|
}
|
|
352
|
-
const
|
|
353
|
-
|
|
354
|
-
const y = Date.now() -
|
|
352
|
+
const E = new Image(), m = Date.now(), L = 300;
|
|
353
|
+
E.onload = () => {
|
|
354
|
+
const y = Date.now() - m, W = Math.max(0, L - y);
|
|
355
355
|
setTimeout(async () => {
|
|
356
|
-
u.value = !0, l.value = !1,
|
|
357
|
-
},
|
|
358
|
-
},
|
|
359
|
-
l.value = !0, u.value = !1,
|
|
360
|
-
},
|
|
356
|
+
u.value = !0, l.value = !1, k.value = !1, await R(), await new Promise((S) => setTimeout(S, 100)), v.value = !0, d();
|
|
357
|
+
}, W);
|
|
358
|
+
}, E.onerror = () => {
|
|
359
|
+
l.value = !0, u.value = !1, k.value = !1, g(new Error("Failed to load image"));
|
|
360
|
+
}, E.src = o;
|
|
361
361
|
});
|
|
362
362
|
}
|
|
363
363
|
function $(o) {
|
|
364
|
-
return new Promise((
|
|
364
|
+
return new Promise((d, g) => {
|
|
365
365
|
if (!o) {
|
|
366
366
|
g(new Error("No video source provided"));
|
|
367
367
|
return;
|
|
368
368
|
}
|
|
369
|
-
const
|
|
370
|
-
|
|
371
|
-
const y = Date.now() -
|
|
369
|
+
const E = document.createElement("video"), m = Date.now(), L = 300;
|
|
370
|
+
E.preload = "metadata", E.muted = !0, E.onloadedmetadata = () => {
|
|
371
|
+
const y = Date.now() - m, W = Math.max(0, L - y);
|
|
372
372
|
setTimeout(async () => {
|
|
373
|
-
h.value = !0,
|
|
374
|
-
},
|
|
375
|
-
},
|
|
376
|
-
|
|
377
|
-
},
|
|
373
|
+
h.value = !0, a.value = !1, k.value = !1, await R(), await new Promise((S) => setTimeout(S, 100)), v.value = !0, d();
|
|
374
|
+
}, W);
|
|
375
|
+
}, E.onerror = () => {
|
|
376
|
+
a.value = !0, h.value = !1, k.value = !1, g(new Error("Failed to load video"));
|
|
377
|
+
}, E.src = o;
|
|
378
378
|
});
|
|
379
379
|
}
|
|
380
380
|
async function f() {
|
|
381
|
-
var
|
|
382
|
-
if (!w.value ||
|
|
381
|
+
var d;
|
|
382
|
+
if (!w.value || k.value || P.value || b.value === "video" && h.value || b.value === "image" && u.value)
|
|
383
383
|
return;
|
|
384
|
-
const o = (
|
|
384
|
+
const o = (d = i.item) == null ? void 0 : d.src;
|
|
385
385
|
if (o)
|
|
386
|
-
if (
|
|
387
|
-
c.value = o, h.value = !1,
|
|
386
|
+
if (k.value = !0, v.value = !1, b.value === "video") {
|
|
387
|
+
c.value = o, h.value = !1, a.value = !1;
|
|
388
388
|
try {
|
|
389
389
|
await $(o);
|
|
390
390
|
} catch {
|
|
@@ -392,7 +392,7 @@ const Jt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
|
|
|
392
392
|
} else {
|
|
393
393
|
I.value = o, u.value = !1, l.value = !1;
|
|
394
394
|
try {
|
|
395
|
-
await
|
|
395
|
+
await s(o);
|
|
396
396
|
} catch {
|
|
397
397
|
}
|
|
398
398
|
}
|
|
@@ -400,8 +400,8 @@ const Jt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
|
|
|
400
400
|
return Ke(() => {
|
|
401
401
|
H.value && (N = new IntersectionObserver(
|
|
402
402
|
(o) => {
|
|
403
|
-
o.forEach((
|
|
404
|
-
|
|
403
|
+
o.forEach((d) => {
|
|
404
|
+
d.isIntersecting && d.intersectionRatio >= 1 ? w.value || (w.value = !0, f()) : d.isIntersecting;
|
|
405
405
|
});
|
|
406
406
|
},
|
|
407
407
|
{
|
|
@@ -411,133 +411,130 @@ const Jt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
|
|
|
411
411
|
), N.observe(H.value));
|
|
412
412
|
}), Qe(() => {
|
|
413
413
|
N && (N.disconnect(), N = null);
|
|
414
|
-
}),
|
|
414
|
+
}), ne(
|
|
415
415
|
() => {
|
|
416
416
|
var o;
|
|
417
|
-
return (o =
|
|
417
|
+
return (o = i.item) == null ? void 0 : o.src;
|
|
418
418
|
},
|
|
419
419
|
async (o) => {
|
|
420
420
|
if (!(!o || P.value)) {
|
|
421
421
|
if (b.value === "video") {
|
|
422
|
-
if (o !== c.value && (h.value = !1,
|
|
423
|
-
|
|
422
|
+
if (o !== c.value && (h.value = !1, a.value = !1, c.value = o, w.value)) {
|
|
423
|
+
k.value = !0;
|
|
424
424
|
try {
|
|
425
425
|
await $(o);
|
|
426
426
|
} catch {
|
|
427
427
|
}
|
|
428
428
|
}
|
|
429
429
|
} else if (o !== I.value && (u.value = !1, l.value = !1, I.value = o, w.value)) {
|
|
430
|
-
|
|
430
|
+
k.value = !0;
|
|
431
431
|
try {
|
|
432
|
-
await
|
|
432
|
+
await s(o);
|
|
433
433
|
} catch {
|
|
434
434
|
}
|
|
435
435
|
}
|
|
436
436
|
}
|
|
437
437
|
}
|
|
438
|
-
), (o,
|
|
438
|
+
), (o, d) => (B(), O("div", {
|
|
439
439
|
ref_key: "containerRef",
|
|
440
440
|
ref: H,
|
|
441
441
|
class: "relative w-full h-full group"
|
|
442
442
|
}, [
|
|
443
|
-
|
|
443
|
+
Le(o.$slots, "default", {
|
|
444
444
|
item: o.item,
|
|
445
445
|
remove: o.remove,
|
|
446
446
|
imageLoaded: u.value,
|
|
447
447
|
imageError: l.value,
|
|
448
448
|
videoLoaded: h.value,
|
|
449
|
-
videoError:
|
|
449
|
+
videoError: a.value,
|
|
450
450
|
showNotFound: P.value,
|
|
451
|
-
isLoading:
|
|
451
|
+
isLoading: k.value,
|
|
452
452
|
mediaType: b.value
|
|
453
453
|
}, () => [
|
|
454
|
-
|
|
455
|
-
P.value ? (
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
]))) : (
|
|
460
|
-
b.value === "image" && I.value ? (
|
|
454
|
+
A("div", Jt, [
|
|
455
|
+
P.value ? (B(), O("div", Kt, d[4] || (d[4] = [
|
|
456
|
+
A("i", { class: "fas fa-search text-3xl mb-3 opacity-50" }, null, -1),
|
|
457
|
+
A("span", { class: "font-medium" }, "Not Found", -1),
|
|
458
|
+
A("span", { class: "text-xs mt-1 opacity-75" }, "This item could not be located", -1)
|
|
459
|
+
]))) : (B(), O("div", Qt, [
|
|
460
|
+
b.value === "image" && I.value ? (B(), O("img", {
|
|
461
461
|
key: 0,
|
|
462
462
|
src: I.value,
|
|
463
|
-
class:
|
|
463
|
+
class: Z([
|
|
464
464
|
"w-full h-full object-cover transition-opacity duration-700 ease-in-out group-hover:scale-105",
|
|
465
|
-
u.value &&
|
|
465
|
+
u.value && v.value ? "opacity-100" : "opacity-0"
|
|
466
466
|
]),
|
|
467
467
|
style: { position: "absolute", top: "0", left: "0" },
|
|
468
468
|
loading: "lazy",
|
|
469
469
|
decoding: "async",
|
|
470
470
|
alt: ""
|
|
471
|
-
}, null, 10, Zt)) :
|
|
472
|
-
b.value === "video" && c.value ? (
|
|
471
|
+
}, null, 10, Zt)) : ae("", !0),
|
|
472
|
+
b.value === "video" && c.value ? (B(), O("video", {
|
|
473
473
|
key: 1,
|
|
474
474
|
src: c.value,
|
|
475
|
-
class:
|
|
475
|
+
class: Z([
|
|
476
476
|
"w-full h-full object-cover transition-opacity duration-700 ease-in-out group-hover:scale-105",
|
|
477
|
-
h.value &&
|
|
477
|
+
h.value && v.value ? "opacity-100" : "opacity-0"
|
|
478
478
|
]),
|
|
479
479
|
style: { position: "absolute", top: "0", left: "0" },
|
|
480
480
|
muted: "",
|
|
481
481
|
loop: "",
|
|
482
482
|
playsinline: "",
|
|
483
|
-
onMouseenter:
|
|
484
|
-
onMouseleave:
|
|
485
|
-
onError:
|
|
486
|
-
}, null, 42, ea)) :
|
|
487
|
-
!u.value && !h.value && !l.value && !
|
|
483
|
+
onMouseenter: d[0] || (d[0] = (g) => g.target.play()),
|
|
484
|
+
onMouseleave: d[1] || (d[1] = (g) => g.target.pause()),
|
|
485
|
+
onError: d[2] || (d[2] = (g) => a.value = !0)
|
|
486
|
+
}, null, 42, ea)) : ae("", !0),
|
|
487
|
+
!u.value && !h.value && !l.value && !a.value ? (B(), O("div", {
|
|
488
488
|
key: 2,
|
|
489
|
-
class:
|
|
489
|
+
class: Z([
|
|
490
490
|
"absolute inset-0 bg-slate-100 flex items-center justify-center transition-opacity duration-500",
|
|
491
|
-
|
|
491
|
+
v.value ? "opacity-0 pointer-events-none" : "opacity-100"
|
|
492
492
|
])
|
|
493
493
|
}, [
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
class:
|
|
494
|
+
A("div", ta, [
|
|
495
|
+
A("i", {
|
|
496
|
+
class: Z(b.value === "video" ? "fas fa-video text-xl text-slate-400" : "fas fa-image text-xl text-slate-400")
|
|
497
497
|
}, null, 2)
|
|
498
498
|
])
|
|
499
|
-
], 2)) :
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
499
|
+
], 2)) : ae("", !0),
|
|
500
|
+
k.value ? (B(), O("div", aa, d[5] || (d[5] = [
|
|
501
|
+
A("div", { class: "bg-white/90 backdrop-blur-sm rounded-full px-3 py-1.5 shadow-sm" }, [
|
|
502
|
+
A("div", { class: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500" })
|
|
503
503
|
], -1)
|
|
504
|
-
]))) :
|
|
505
|
-
b.value === "image" && l.value || b.value === "video" &&
|
|
506
|
-
|
|
507
|
-
class:
|
|
504
|
+
]))) : ae("", !0),
|
|
505
|
+
b.value === "image" && l.value || b.value === "video" && a.value ? (B(), O("div", na, [
|
|
506
|
+
A("i", {
|
|
507
|
+
class: Z(b.value === "video" ? "fas fa-video text-2xl mb-2 opacity-50" : "fas fa-image text-2xl mb-2 opacity-50")
|
|
508
508
|
}, null, 2),
|
|
509
|
-
|
|
510
|
-
])) :
|
|
509
|
+
A("span", null, "Failed to load " + _e(b.value), 1)
|
|
510
|
+
])) : ae("", !0)
|
|
511
511
|
])),
|
|
512
|
-
!P.value && (u.value || h.value ||
|
|
512
|
+
!P.value && (u.value || h.value || k.value) ? (B(), O("div", {
|
|
513
513
|
key: 2,
|
|
514
514
|
class: "absolute top-2 left-2 w-7 h-7 flex items-center justify-center bg-black/60 backdrop-blur-sm text-white rounded-full shadow-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none",
|
|
515
515
|
title: b.value === "video" ? "Video" : "Image"
|
|
516
516
|
}, [
|
|
517
|
-
|
|
518
|
-
class:
|
|
517
|
+
A("i", {
|
|
518
|
+
class: Z(b.value === "video" ? "fas fa-video text-xs" : "fas fa-image text-xs")
|
|
519
519
|
}, null, 2)
|
|
520
|
-
], 8, la)) :
|
|
521
|
-
|
|
522
|
-
o.remove ? (
|
|
520
|
+
], 8, la)) : ae("", !0),
|
|
521
|
+
d[7] || (d[7] = A("div", { class: "absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none" }, null, -1)),
|
|
522
|
+
o.remove ? (B(), O("button", {
|
|
523
523
|
key: 3,
|
|
524
524
|
class: "absolute top-2 right-2 w-8 h-8 flex items-center justify-center bg-white/90 backdrop-blur-sm text-slate-700 rounded-full shadow-sm opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 hover:bg-red-500 hover:text-white cursor-pointer z-10",
|
|
525
|
-
onClick:
|
|
525
|
+
onClick: d[3] || (d[3] = dt((g) => o.remove(o.item), ["stop"])),
|
|
526
526
|
"aria-label": "Remove item"
|
|
527
|
-
},
|
|
528
|
-
|
|
529
|
-
]))) :
|
|
530
|
-
|
|
531
|
-
|
|
527
|
+
}, d[6] || (d[6] = [
|
|
528
|
+
A("i", { class: "fas fa-times text-sm" }, null, -1)
|
|
529
|
+
]))) : ae("", !0),
|
|
530
|
+
A("div", oa, [
|
|
531
|
+
A("p", ra, "Item #" + _e(String(o.item.id).split("-")[0]), 1)
|
|
532
532
|
])
|
|
533
533
|
])
|
|
534
534
|
])
|
|
535
535
|
], 512));
|
|
536
536
|
}
|
|
537
|
-
}), ia = { class: "w-full h-full flex items-center justify-center p-4" }, sa = { class: "w-full h-full max-w-full max-h-full" }, ua = {
|
|
538
|
-
key: 0,
|
|
539
|
-
class: "fixed bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2 z-10 pointer-events-none"
|
|
540
|
-
}, ca = { class: "fixed top-20 right-4 bg-black/50 backdrop-blur-sm text-white text-xs font-medium px-3 py-1.5 rounded-full z-20 pointer-events-none" }, fa = /* @__PURE__ */ Je({
|
|
537
|
+
}), ia = { class: "w-full h-full flex items-center justify-center p-4" }, sa = { class: "w-full h-full max-w-full max-h-full" }, ua = /* @__PURE__ */ Je({
|
|
541
538
|
__name: "Masonry",
|
|
542
539
|
props: {
|
|
543
540
|
getNextPage: {
|
|
@@ -649,7 +646,7 @@ const Jt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
|
|
|
649
646
|
"retry:stop",
|
|
650
647
|
"remove-all:complete"
|
|
651
648
|
],
|
|
652
|
-
setup(t, { expose:
|
|
649
|
+
setup(t, { expose: i, emit: u }) {
|
|
653
650
|
const l = t, I = {
|
|
654
651
|
sizes: { base: 1, sm: 2, md: 3, lg: 4, xl: 5, "2xl": 6 },
|
|
655
652
|
gutterX: 10,
|
|
@@ -669,9 +666,9 @@ const Jt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
|
|
|
669
666
|
...((e = l.layout) == null ? void 0 : e.sizes) || {}
|
|
670
667
|
}
|
|
671
668
|
};
|
|
672
|
-
}),
|
|
669
|
+
}), a = T(null), c = T(typeof window < "u" ? window.innerWidth : 1024);
|
|
673
670
|
let w = null;
|
|
674
|
-
function
|
|
671
|
+
function k(e) {
|
|
675
672
|
return {
|
|
676
673
|
sm: 640,
|
|
677
674
|
md: 768,
|
|
@@ -680,47 +677,47 @@ const Jt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
|
|
|
680
677
|
"2xl": 1536
|
|
681
678
|
}[e] || 768;
|
|
682
679
|
}
|
|
683
|
-
const
|
|
680
|
+
const v = J(() => {
|
|
684
681
|
if (l.layoutMode === "masonry") return !1;
|
|
685
682
|
if (l.layoutMode === "swipe") return !0;
|
|
686
|
-
const e = typeof l.mobileBreakpoint == "string" ?
|
|
683
|
+
const e = typeof l.mobileBreakpoint == "string" ? k(l.mobileBreakpoint) : l.mobileBreakpoint;
|
|
687
684
|
return c.value < e;
|
|
688
685
|
}), H = J(() => {
|
|
689
|
-
if (!
|
|
690
|
-
const e = Math.max(0, Math.min(
|
|
691
|
-
return
|
|
686
|
+
if (!v.value || s.value.length === 0) return null;
|
|
687
|
+
const e = Math.max(0, Math.min(m.value, s.value.length - 1));
|
|
688
|
+
return s.value[e] || null;
|
|
692
689
|
}), N = J(() => {
|
|
693
|
-
if (!
|
|
694
|
-
const e =
|
|
695
|
-
return e >=
|
|
690
|
+
if (!v.value || !H.value) return null;
|
|
691
|
+
const e = m.value + 1;
|
|
692
|
+
return e >= s.value.length ? null : s.value[e] || null;
|
|
696
693
|
}), b = J(() => {
|
|
697
|
-
if (!
|
|
698
|
-
const e =
|
|
699
|
-
return e < 0 ? null :
|
|
700
|
-
}), P = u,
|
|
694
|
+
if (!v.value || !H.value) return null;
|
|
695
|
+
const e = m.value - 1;
|
|
696
|
+
return e < 0 ? null : s.value[e] || null;
|
|
697
|
+
}), P = u, s = J({
|
|
701
698
|
get: () => l.items,
|
|
702
699
|
set: (e) => P("update:items", e)
|
|
703
|
-
}), $ =
|
|
704
|
-
function
|
|
700
|
+
}), $ = T(7), f = T(null), o = T([]), d = T(null), g = T(!1), E = T(0), m = T(0), L = T(0), y = T(!1), W = T(0), S = T(0), D = T(null), le = T(/* @__PURE__ */ new Set());
|
|
701
|
+
function oe(e) {
|
|
705
702
|
return typeof e == "number" && Number.isFinite(e) && e > 0;
|
|
706
703
|
}
|
|
707
|
-
function
|
|
704
|
+
function ee(e, n) {
|
|
708
705
|
try {
|
|
709
706
|
if (!Array.isArray(e) || e.length === 0) return;
|
|
710
|
-
const
|
|
711
|
-
if (
|
|
712
|
-
const
|
|
713
|
-
for (const x of
|
|
707
|
+
const r = e.filter((x) => !oe(x == null ? void 0 : x.width) || !oe(x == null ? void 0 : x.height));
|
|
708
|
+
if (r.length === 0) return;
|
|
709
|
+
const p = [];
|
|
710
|
+
for (const x of r) {
|
|
714
711
|
const j = (x == null ? void 0 : x.id) ?? `idx:${e.indexOf(x)}`;
|
|
715
|
-
|
|
712
|
+
le.value.has(j) || (le.value.add(j), p.push(j));
|
|
716
713
|
}
|
|
717
|
-
if (
|
|
718
|
-
const x =
|
|
714
|
+
if (p.length > 0) {
|
|
715
|
+
const x = p.slice(0, 10);
|
|
719
716
|
console.warn(
|
|
720
717
|
"[Masonry] Items missing width/height detected:",
|
|
721
718
|
{
|
|
722
|
-
context:
|
|
723
|
-
count:
|
|
719
|
+
context: n,
|
|
720
|
+
count: p.length,
|
|
724
721
|
sampleIds: x,
|
|
725
722
|
hint: "Ensure each item has positive width and height. Consider providing fallbacks (e.g., 512x512) at the data layer."
|
|
726
723
|
}
|
|
@@ -729,159 +726,159 @@ const Jt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
|
|
|
729
726
|
} catch {
|
|
730
727
|
}
|
|
731
728
|
}
|
|
732
|
-
const V =
|
|
729
|
+
const V = T(0), U = T(0), te = l.virtualBufferPx, K = T(!1), ue = T({
|
|
733
730
|
distanceToTrigger: 0,
|
|
734
731
|
isNearTrigger: !1
|
|
735
732
|
}), M = (e) => {
|
|
736
733
|
if (!f.value) return;
|
|
737
|
-
const { scrollTop:
|
|
738
|
-
|
|
739
|
-
distanceToTrigger: Math.round(
|
|
734
|
+
const { scrollTop: n, clientHeight: r } = f.value, p = n + r, x = e ?? Se(s.value, $.value), j = x.length ? Math.max(...x) : 0, Y = typeof l.loadThresholdPx == "number" ? l.loadThresholdPx : 200, se = Y >= 0 ? Math.max(0, j - Y) : Math.max(0, j + Y), Re = Math.max(0, se - p), vt = Re <= 100;
|
|
735
|
+
ue.value = {
|
|
736
|
+
distanceToTrigger: Math.round(Re),
|
|
740
737
|
isNearTrigger: vt
|
|
741
738
|
};
|
|
742
|
-
}, { onEnter:
|
|
743
|
-
function
|
|
744
|
-
if (
|
|
745
|
-
const
|
|
746
|
-
e.style.transition = "none", e.style.opacity = "1", e.style.transform = `translate3d(${
|
|
747
|
-
e.style.transition = "",
|
|
739
|
+
}, { onEnter: F, onBeforeEnter: _, onBeforeLeave: Q, onLeave: C } = Gt(s, { leaveDurationMs: l.leaveDurationMs });
|
|
740
|
+
function re(e, n) {
|
|
741
|
+
if (K.value) {
|
|
742
|
+
const r = parseInt(e.dataset.left || "0", 10), p = parseInt(e.dataset.top || "0", 10);
|
|
743
|
+
e.style.transition = "none", e.style.opacity = "1", e.style.transform = `translate3d(${r}px, ${p}px, 0) scale(1)`, e.style.removeProperty("--masonry-opacity-delay"), requestAnimationFrame(() => {
|
|
744
|
+
e.style.transition = "", n();
|
|
748
745
|
});
|
|
749
746
|
} else
|
|
750
|
-
|
|
747
|
+
F(e, n);
|
|
751
748
|
}
|
|
752
749
|
function q(e) {
|
|
753
|
-
if (
|
|
754
|
-
const
|
|
755
|
-
e.style.transition = "none", e.style.opacity = "1", e.style.transform = `translate3d(${
|
|
750
|
+
if (K.value) {
|
|
751
|
+
const n = parseInt(e.dataset.left || "0", 10), r = parseInt(e.dataset.top || "0", 10);
|
|
752
|
+
e.style.transition = "none", e.style.opacity = "1", e.style.transform = `translate3d(${n}px, ${r}px, 0) scale(1)`, e.style.removeProperty("--masonry-opacity-delay");
|
|
756
753
|
} else
|
|
757
754
|
_(e);
|
|
758
755
|
}
|
|
759
756
|
function tt(e) {
|
|
760
|
-
|
|
757
|
+
K.value || Q(e);
|
|
761
758
|
}
|
|
762
|
-
function at(e,
|
|
763
|
-
|
|
759
|
+
function at(e, n) {
|
|
760
|
+
K.value ? n() : C(e, n);
|
|
764
761
|
}
|
|
765
762
|
const nt = J(() => {
|
|
766
|
-
const e = V.value -
|
|
767
|
-
return !
|
|
768
|
-
const x =
|
|
769
|
-
return
|
|
763
|
+
const e = V.value - te, n = V.value + U.value + te, r = s.value;
|
|
764
|
+
return !r || r.length === 0 ? [] : r.filter((p) => {
|
|
765
|
+
const x = p.top;
|
|
766
|
+
return p.top + p.columnHeight >= e && x <= n;
|
|
770
767
|
});
|
|
771
768
|
}), { handleScroll: lt } = Xt({
|
|
772
769
|
container: f,
|
|
773
|
-
masonry:
|
|
770
|
+
masonry: s,
|
|
774
771
|
columns: $,
|
|
775
|
-
containerHeight:
|
|
772
|
+
containerHeight: E,
|
|
776
773
|
isLoading: g,
|
|
777
774
|
pageSize: l.pageSize,
|
|
778
775
|
refreshLayout: G,
|
|
779
776
|
setItemsRaw: (e) => {
|
|
780
|
-
|
|
777
|
+
s.value = e;
|
|
781
778
|
},
|
|
782
|
-
loadNext:
|
|
779
|
+
loadNext: ie,
|
|
783
780
|
loadThresholdPx: l.loadThresholdPx
|
|
784
781
|
});
|
|
785
|
-
|
|
782
|
+
i({
|
|
786
783
|
isLoading: g,
|
|
787
784
|
refreshLayout: G,
|
|
788
|
-
containerHeight:
|
|
789
|
-
remove:
|
|
785
|
+
containerHeight: E,
|
|
786
|
+
remove: ce,
|
|
790
787
|
removeMany: it,
|
|
791
788
|
removeAll: st,
|
|
792
|
-
loadNext:
|
|
793
|
-
loadPage:
|
|
794
|
-
refreshCurrentPage:
|
|
789
|
+
loadNext: ie,
|
|
790
|
+
loadPage: ye,
|
|
791
|
+
refreshCurrentPage: we,
|
|
795
792
|
reset: ct,
|
|
796
793
|
init: ft,
|
|
797
794
|
paginationHistory: o,
|
|
798
|
-
cancelLoad:
|
|
799
|
-
scrollToTop:
|
|
800
|
-
totalItems: J(() =>
|
|
795
|
+
cancelLoad: Ne,
|
|
796
|
+
scrollToTop: He,
|
|
797
|
+
totalItems: J(() => s.value.length)
|
|
801
798
|
});
|
|
802
799
|
function ot(e) {
|
|
803
|
-
const
|
|
804
|
-
let
|
|
800
|
+
const n = Yt(e);
|
|
801
|
+
let r = 0;
|
|
805
802
|
if (f.value) {
|
|
806
|
-
const { scrollTop:
|
|
807
|
-
|
|
803
|
+
const { scrollTop: p, clientHeight: x } = f.value;
|
|
804
|
+
r = p + x + 100;
|
|
808
805
|
}
|
|
809
|
-
|
|
806
|
+
E.value = Math.max(n, r);
|
|
810
807
|
}
|
|
811
808
|
function G(e) {
|
|
812
|
-
if (
|
|
813
|
-
|
|
809
|
+
if (v.value) {
|
|
810
|
+
s.value = e;
|
|
814
811
|
return;
|
|
815
812
|
}
|
|
816
813
|
if (!f.value) return;
|
|
817
|
-
|
|
818
|
-
const
|
|
819
|
-
...
|
|
820
|
-
originalIndex:
|
|
821
|
-
})),
|
|
822
|
-
ot(
|
|
814
|
+
ee(e, "refreshLayout");
|
|
815
|
+
const n = e.map((p, x) => ({
|
|
816
|
+
...p,
|
|
817
|
+
originalIndex: p.originalIndex ?? x
|
|
818
|
+
})), r = wt(n, f.value, $.value, h.value);
|
|
819
|
+
ot(r), s.value = r;
|
|
823
820
|
}
|
|
824
|
-
function
|
|
825
|
-
return new Promise((
|
|
826
|
-
const
|
|
827
|
-
|
|
821
|
+
function $e(e, n) {
|
|
822
|
+
return new Promise((r) => {
|
|
823
|
+
const p = Math.max(0, e | 0), x = Date.now();
|
|
824
|
+
n(p, p);
|
|
828
825
|
const j = setInterval(() => {
|
|
829
|
-
if (
|
|
830
|
-
clearInterval(j),
|
|
826
|
+
if (z.value) {
|
|
827
|
+
clearInterval(j), r();
|
|
831
828
|
return;
|
|
832
829
|
}
|
|
833
|
-
const Y = Date.now() - x,
|
|
834
|
-
|
|
830
|
+
const Y = Date.now() - x, se = Math.max(0, p - Y);
|
|
831
|
+
n(se, p), se <= 0 && (clearInterval(j), r());
|
|
835
832
|
}, 100);
|
|
836
833
|
});
|
|
837
834
|
}
|
|
838
|
-
async function
|
|
835
|
+
async function me(e) {
|
|
839
836
|
try {
|
|
840
|
-
const
|
|
841
|
-
return G([...
|
|
842
|
-
} catch (
|
|
843
|
-
throw console.error("Error in getContent:",
|
|
837
|
+
const n = await rt(() => l.getNextPage(e));
|
|
838
|
+
return G([...s.value, ...n.items]), n;
|
|
839
|
+
} catch (n) {
|
|
840
|
+
throw console.error("Error in getContent:", n), n;
|
|
844
841
|
}
|
|
845
842
|
}
|
|
846
843
|
async function rt(e) {
|
|
847
|
-
let
|
|
848
|
-
const
|
|
849
|
-
let
|
|
844
|
+
let n = 0;
|
|
845
|
+
const r = l.retryMaxAttempts;
|
|
846
|
+
let p = l.retryInitialDelayMs;
|
|
850
847
|
for (; ; )
|
|
851
848
|
try {
|
|
852
849
|
const x = await e();
|
|
853
|
-
return
|
|
850
|
+
return n > 0 && P("retry:stop", { attempt: n, success: !0 }), x;
|
|
854
851
|
} catch (x) {
|
|
855
|
-
if (
|
|
856
|
-
throw P("retry:stop", { attempt:
|
|
857
|
-
P("retry:start", { attempt:
|
|
858
|
-
P("retry:tick", { attempt:
|
|
859
|
-
}),
|
|
852
|
+
if (n++, n > r)
|
|
853
|
+
throw P("retry:stop", { attempt: n - 1, success: !1 }), x;
|
|
854
|
+
P("retry:start", { attempt: n, max: r, totalMs: p }), await $e(p, (j, Y) => {
|
|
855
|
+
P("retry:tick", { attempt: n, remainingMs: j, totalMs: Y });
|
|
856
|
+
}), p += l.retryBackoffStepMs;
|
|
860
857
|
}
|
|
861
858
|
}
|
|
862
|
-
async function
|
|
859
|
+
async function ye(e) {
|
|
863
860
|
if (!g.value) {
|
|
864
|
-
|
|
861
|
+
z.value = !1, g.value = !0;
|
|
865
862
|
try {
|
|
866
|
-
const
|
|
867
|
-
if (
|
|
868
|
-
const
|
|
869
|
-
return
|
|
870
|
-
} catch (
|
|
871
|
-
throw console.error("Error loading page:",
|
|
863
|
+
const n = s.value.length;
|
|
864
|
+
if (z.value) return;
|
|
865
|
+
const r = await me(e);
|
|
866
|
+
return z.value ? void 0 : (d.value = e, o.value.push(r.nextPage), await fe(n), r);
|
|
867
|
+
} catch (n) {
|
|
868
|
+
throw console.error("Error loading page:", n), n;
|
|
872
869
|
} finally {
|
|
873
870
|
g.value = !1;
|
|
874
871
|
}
|
|
875
872
|
}
|
|
876
873
|
}
|
|
877
|
-
async function
|
|
874
|
+
async function ie() {
|
|
878
875
|
if (!g.value) {
|
|
879
|
-
|
|
876
|
+
z.value = !1, g.value = !0;
|
|
880
877
|
try {
|
|
881
|
-
const e =
|
|
882
|
-
if (
|
|
883
|
-
const
|
|
884
|
-
return
|
|
878
|
+
const e = s.value.length;
|
|
879
|
+
if (z.value) return;
|
|
880
|
+
const n = o.value[o.value.length - 1], r = await me(n);
|
|
881
|
+
return z.value ? void 0 : (d.value = n, o.value.push(r.nextPage), await fe(e), r);
|
|
885
882
|
} catch (e) {
|
|
886
883
|
throw console.error("Error loading next page:", e), e;
|
|
887
884
|
} finally {
|
|
@@ -889,21 +886,21 @@ const Jt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
|
|
|
889
886
|
}
|
|
890
887
|
}
|
|
891
888
|
}
|
|
892
|
-
async function
|
|
893
|
-
if (console.log("[Masonry] refreshCurrentPage called, isLoading:", g.value, "currentPage:",
|
|
894
|
-
|
|
889
|
+
async function we() {
|
|
890
|
+
if (console.log("[Masonry] refreshCurrentPage called, isLoading:", g.value, "currentPage:", d.value), !g.value) {
|
|
891
|
+
z.value = !1, g.value = !0;
|
|
895
892
|
try {
|
|
896
|
-
const e =
|
|
893
|
+
const e = d.value;
|
|
897
894
|
if (console.log("[Masonry] pageToRefresh:", e), e == null) {
|
|
898
|
-
console.warn("[Masonry] No current page to refresh - currentPage:",
|
|
895
|
+
console.warn("[Masonry] No current page to refresh - currentPage:", d.value, "paginationHistory:", o.value);
|
|
899
896
|
return;
|
|
900
897
|
}
|
|
901
|
-
|
|
902
|
-
const
|
|
903
|
-
if (
|
|
904
|
-
|
|
905
|
-
const
|
|
906
|
-
return await
|
|
898
|
+
s.value = [], E.value = 0, o.value = [e], await R();
|
|
899
|
+
const n = await me(e);
|
|
900
|
+
if (z.value) return;
|
|
901
|
+
d.value = e, o.value.push(n.nextPage);
|
|
902
|
+
const r = s.value.length;
|
|
903
|
+
return await fe(r), n;
|
|
907
904
|
} catch (e) {
|
|
908
905
|
throw console.error("[Masonry] Error refreshing current page:", e), e;
|
|
909
906
|
} finally {
|
|
@@ -911,42 +908,42 @@ const Jt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
|
|
|
911
908
|
}
|
|
912
909
|
}
|
|
913
910
|
}
|
|
914
|
-
async function
|
|
915
|
-
const
|
|
916
|
-
if (
|
|
911
|
+
async function ce(e) {
|
|
912
|
+
const n = s.value.filter((r) => r.id !== e.id);
|
|
913
|
+
if (s.value = n, await R(), console.log("[Masonry] remove - next.length:", n.length, "paginationHistory.length:", o.value.length), n.length === 0 && o.value.length > 0) {
|
|
917
914
|
if (l.autoRefreshOnEmpty)
|
|
918
|
-
console.log("[Masonry] All items removed, calling refreshCurrentPage"), await
|
|
915
|
+
console.log("[Masonry] All items removed, calling refreshCurrentPage"), await we();
|
|
919
916
|
else {
|
|
920
917
|
console.log("[Masonry] All items removed, calling loadNext and forcing backfill");
|
|
921
918
|
try {
|
|
922
|
-
await
|
|
919
|
+
await ie(), await fe(0, !0);
|
|
923
920
|
} catch {
|
|
924
921
|
}
|
|
925
922
|
}
|
|
926
923
|
return;
|
|
927
924
|
}
|
|
928
|
-
await new Promise((
|
|
929
|
-
G(
|
|
925
|
+
await new Promise((r) => requestAnimationFrame(() => r())), requestAnimationFrame(() => {
|
|
926
|
+
G(n);
|
|
930
927
|
});
|
|
931
928
|
}
|
|
932
929
|
async function it(e) {
|
|
933
930
|
if (!e || e.length === 0) return;
|
|
934
|
-
const
|
|
935
|
-
if (
|
|
931
|
+
const n = new Set(e.map((p) => p.id)), r = s.value.filter((p) => !n.has(p.id));
|
|
932
|
+
if (s.value = r, await R(), r.length === 0 && o.value.length > 0) {
|
|
936
933
|
if (l.autoRefreshOnEmpty)
|
|
937
|
-
await
|
|
934
|
+
await we();
|
|
938
935
|
else
|
|
939
936
|
try {
|
|
940
|
-
await
|
|
937
|
+
await ie(), await fe(0, !0);
|
|
941
938
|
} catch {
|
|
942
939
|
}
|
|
943
940
|
return;
|
|
944
941
|
}
|
|
945
|
-
await new Promise((
|
|
946
|
-
G(
|
|
942
|
+
await new Promise((p) => requestAnimationFrame(() => p())), requestAnimationFrame(() => {
|
|
943
|
+
G(r);
|
|
947
944
|
});
|
|
948
945
|
}
|
|
949
|
-
function
|
|
946
|
+
function He(e) {
|
|
950
947
|
f.value && f.value.scrollTo({
|
|
951
948
|
top: 0,
|
|
952
949
|
behavior: (e == null ? void 0 : e.behavior) ?? "smooth",
|
|
@@ -954,263 +951,248 @@ const Jt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
|
|
|
954
951
|
});
|
|
955
952
|
}
|
|
956
953
|
async function st() {
|
|
957
|
-
|
|
954
|
+
He({ behavior: "smooth" }), s.value = [], E.value = 0, await R(), P("remove-all:complete");
|
|
958
955
|
}
|
|
959
956
|
function ut() {
|
|
960
|
-
$.value =
|
|
957
|
+
$.value = de(h.value), G(s.value), f.value && (V.value = f.value.scrollTop, U.value = f.value.clientHeight);
|
|
961
958
|
}
|
|
962
|
-
let
|
|
963
|
-
const
|
|
964
|
-
async function
|
|
965
|
-
if (!
|
|
966
|
-
const
|
|
967
|
-
if (!(!l.pageSize || l.pageSize <= 0 || o.value[o.value.length - 1] == null) && !(
|
|
968
|
-
|
|
959
|
+
let pe = !1;
|
|
960
|
+
const z = T(!1);
|
|
961
|
+
async function fe(e, n = !1) {
|
|
962
|
+
if (!n && !l.backfillEnabled || pe || z.value) return;
|
|
963
|
+
const r = (e || 0) + (l.pageSize || 0);
|
|
964
|
+
if (!(!l.pageSize || l.pageSize <= 0 || o.value[o.value.length - 1] == null) && !(s.value.length >= r)) {
|
|
965
|
+
pe = !0;
|
|
969
966
|
try {
|
|
970
967
|
let x = 0;
|
|
971
|
-
for (P("backfill:start", { target:
|
|
968
|
+
for (P("backfill:start", { target: r, fetched: s.value.length, calls: x }); s.value.length < r && x < l.backfillMaxCalls && o.value[o.value.length - 1] != null && !z.value && (await $e(l.backfillDelayMs, (Y, se) => {
|
|
972
969
|
P("backfill:tick", {
|
|
973
|
-
fetched:
|
|
974
|
-
target:
|
|
970
|
+
fetched: s.value.length,
|
|
971
|
+
target: r,
|
|
975
972
|
calls: x,
|
|
976
973
|
remainingMs: Y,
|
|
977
|
-
totalMs:
|
|
974
|
+
totalMs: se
|
|
978
975
|
});
|
|
979
|
-
}), !
|
|
976
|
+
}), !z.value); ) {
|
|
980
977
|
const j = o.value[o.value.length - 1];
|
|
981
978
|
try {
|
|
982
979
|
g.value = !0;
|
|
983
|
-
const Y = await
|
|
984
|
-
if (
|
|
980
|
+
const Y = await me(j);
|
|
981
|
+
if (z.value) break;
|
|
985
982
|
o.value.push(Y.nextPage);
|
|
986
983
|
} finally {
|
|
987
984
|
g.value = !1;
|
|
988
985
|
}
|
|
989
986
|
x++;
|
|
990
987
|
}
|
|
991
|
-
P("backfill:stop", { fetched:
|
|
988
|
+
P("backfill:stop", { fetched: s.value.length, calls: x });
|
|
992
989
|
} finally {
|
|
993
|
-
|
|
990
|
+
pe = !1;
|
|
994
991
|
}
|
|
995
992
|
}
|
|
996
993
|
}
|
|
997
|
-
function
|
|
998
|
-
|
|
994
|
+
function Ne() {
|
|
995
|
+
z.value = !0, g.value = !1, pe = !1;
|
|
999
996
|
}
|
|
1000
997
|
function ct() {
|
|
1001
|
-
|
|
998
|
+
Ne(), z.value = !1, f.value && f.value.scrollTo({
|
|
1002
999
|
top: 0,
|
|
1003
1000
|
behavior: "smooth"
|
|
1004
|
-
}),
|
|
1001
|
+
}), s.value = [], E.value = 0, d.value = l.loadAtPage, o.value = [l.loadAtPage], ue.value = {
|
|
1005
1002
|
distanceToTrigger: 0,
|
|
1006
1003
|
isNearTrigger: !1
|
|
1007
1004
|
};
|
|
1008
1005
|
}
|
|
1009
|
-
const
|
|
1010
|
-
if (
|
|
1011
|
-
f.value && (V.value = f.value.scrollTop, U.value = f.value.clientHeight),
|
|
1012
|
-
const e =
|
|
1006
|
+
const be = Ge(async () => {
|
|
1007
|
+
if (v.value) return;
|
|
1008
|
+
f.value && (V.value = f.value.scrollTop, U.value = f.value.clientHeight), K.value = !0, await R(), await new Promise((n) => requestAnimationFrame(() => n())), K.value = !1;
|
|
1009
|
+
const e = Se(s.value, $.value);
|
|
1013
1010
|
lt(e), M(e);
|
|
1014
|
-
}, 200),
|
|
1015
|
-
function
|
|
1016
|
-
|
|
1011
|
+
}, 200), We = Ge(ut, 200);
|
|
1012
|
+
function De(e) {
|
|
1013
|
+
v.value && (y.value = !0, W.value = e.touches[0].clientY, S.value = L.value, e.preventDefault());
|
|
1017
1014
|
}
|
|
1018
|
-
function
|
|
1019
|
-
if (!
|
|
1020
|
-
const
|
|
1021
|
-
L.value = S.value +
|
|
1015
|
+
function Ae(e) {
|
|
1016
|
+
if (!v.value || !y.value) return;
|
|
1017
|
+
const n = e.touches[0].clientY - W.value;
|
|
1018
|
+
L.value = S.value + n, e.preventDefault();
|
|
1022
1019
|
}
|
|
1023
|
-
function
|
|
1024
|
-
if (!
|
|
1020
|
+
function Oe(e) {
|
|
1021
|
+
if (!v.value || !y.value) return;
|
|
1025
1022
|
y.value = !1;
|
|
1026
|
-
const
|
|
1027
|
-
Math.abs(
|
|
1023
|
+
const n = L.value - S.value;
|
|
1024
|
+
Math.abs(n) > 100 ? n > 0 && b.value ? ze() : n < 0 && N.value ? Fe() : X() : X(), e.preventDefault();
|
|
1025
|
+
}
|
|
1026
|
+
function Be(e) {
|
|
1027
|
+
v.value && (y.value = !0, W.value = e.clientY, S.value = L.value, e.preventDefault());
|
|
1028
1028
|
}
|
|
1029
|
-
function
|
|
1030
|
-
|
|
1029
|
+
function xe(e) {
|
|
1030
|
+
if (!v.value || !y.value) return;
|
|
1031
|
+
const n = e.clientY - W.value;
|
|
1032
|
+
L.value = S.value + n, e.preventDefault();
|
|
1031
1033
|
}
|
|
1032
1034
|
function Me(e) {
|
|
1033
|
-
if (!
|
|
1034
|
-
const a = e.clientY - D.value;
|
|
1035
|
-
L.value = S.value + a, e.preventDefault();
|
|
1036
|
-
}
|
|
1037
|
-
function Te(e) {
|
|
1038
|
-
if (!d.value || !y.value) return;
|
|
1035
|
+
if (!v.value || !y.value) return;
|
|
1039
1036
|
y.value = !1;
|
|
1040
|
-
const
|
|
1041
|
-
Math.abs(
|
|
1037
|
+
const n = L.value - S.value;
|
|
1038
|
+
Math.abs(n) > 100 ? n > 0 && b.value ? ze() : n < 0 && N.value ? Fe() : X() : X(), e.preventDefault();
|
|
1042
1039
|
}
|
|
1043
|
-
function
|
|
1040
|
+
function Fe() {
|
|
1044
1041
|
if (!N.value) {
|
|
1045
|
-
|
|
1042
|
+
ie();
|
|
1046
1043
|
return;
|
|
1047
1044
|
}
|
|
1048
|
-
|
|
1045
|
+
m.value++, X(), m.value >= s.value.length - 5 && ie();
|
|
1049
1046
|
}
|
|
1050
|
-
function
|
|
1051
|
-
b.value && (
|
|
1047
|
+
function ze() {
|
|
1048
|
+
b.value && (m.value--, X());
|
|
1052
1049
|
}
|
|
1053
1050
|
function X() {
|
|
1054
|
-
if (!
|
|
1055
|
-
const e =
|
|
1056
|
-
L.value = -
|
|
1051
|
+
if (!D.value) return;
|
|
1052
|
+
const e = D.value.clientHeight;
|
|
1053
|
+
L.value = -m.value * e;
|
|
1057
1054
|
}
|
|
1058
|
-
function
|
|
1059
|
-
|
|
1055
|
+
function je() {
|
|
1056
|
+
a.value ? c.value = a.value.clientWidth : typeof window < "u" && (c.value = window.innerWidth), !v.value && m.value > 0 && (m.value = 0, L.value = 0), v.value && s.value.length === 0 && !g.value && ye(o.value[0]), v.value && X();
|
|
1060
1057
|
}
|
|
1061
|
-
function ft(e,
|
|
1062
|
-
|
|
1058
|
+
function ft(e, n, r) {
|
|
1059
|
+
d.value = n, o.value = [n], o.value.push(r), ee(e, "init"), v.value ? (s.value = [...s.value, ...e], m.value === 0 && s.value.length > 0 && (L.value = 0)) : (G([...s.value, ...e]), M());
|
|
1063
1060
|
}
|
|
1064
|
-
return
|
|
1061
|
+
return ne(
|
|
1065
1062
|
h,
|
|
1066
1063
|
() => {
|
|
1067
|
-
|
|
1064
|
+
v.value || f.value && ($.value = de(h.value, c.value), G(s.value));
|
|
1068
1065
|
},
|
|
1069
1066
|
{ deep: !0 }
|
|
1070
|
-
),
|
|
1067
|
+
), ne(v, (e) => {
|
|
1071
1068
|
R(() => {
|
|
1072
|
-
e ? (document.addEventListener("mousemove",
|
|
1069
|
+
e ? (document.addEventListener("mousemove", xe), document.addEventListener("mouseup", Me), m.value = 0, L.value = 0, s.value.length > 0 && X()) : (document.removeEventListener("mousemove", xe), document.removeEventListener("mouseup", Me), f.value && a.value && (c.value = a.value.clientWidth, f.value.removeEventListener("scroll", be), f.value.addEventListener("scroll", be, { passive: !0 }), s.value.length > 0 && ($.value = de(h.value, c.value), G(s.value), V.value = f.value.scrollTop, U.value = f.value.clientHeight, M())));
|
|
1073
1070
|
});
|
|
1074
|
-
}, { immediate: !0 }),
|
|
1075
|
-
e && (e.addEventListener("touchstart",
|
|
1076
|
-
}),
|
|
1077
|
-
|
|
1078
|
-
}),
|
|
1079
|
-
w && (w.disconnect(), w = null), e && typeof ResizeObserver < "u" ? (w = new ResizeObserver((
|
|
1080
|
-
for (const
|
|
1081
|
-
const
|
|
1082
|
-
c.value !==
|
|
1071
|
+
}, { immediate: !0 }), ne(D, (e) => {
|
|
1072
|
+
e && (e.addEventListener("touchstart", De, { passive: !1 }), e.addEventListener("touchmove", Ae, { passive: !1 }), e.addEventListener("touchend", Oe), e.addEventListener("mousedown", Be));
|
|
1073
|
+
}), ne(() => s.value.length, (e, n) => {
|
|
1074
|
+
v.value && e > 0 && n === 0 && (m.value = 0, R(() => X()));
|
|
1075
|
+
}), ne(a, (e) => {
|
|
1076
|
+
w && (w.disconnect(), w = null), e && typeof ResizeObserver < "u" ? (w = new ResizeObserver((n) => {
|
|
1077
|
+
for (const r of n) {
|
|
1078
|
+
const p = r.contentRect.width;
|
|
1079
|
+
c.value !== p && (c.value = p);
|
|
1083
1080
|
}
|
|
1084
1081
|
}), w.observe(e), c.value = e.clientWidth) : e && (c.value = e.clientWidth);
|
|
1085
|
-
}, { immediate: !0 }),
|
|
1086
|
-
e !==
|
|
1087
|
-
$.value =
|
|
1082
|
+
}, { immediate: !0 }), ne(c, (e, n) => {
|
|
1083
|
+
e !== n && e > 0 && !v.value && f.value && s.value.length > 0 && R(() => {
|
|
1084
|
+
$.value = de(h.value, e), G(s.value), M();
|
|
1088
1085
|
});
|
|
1089
1086
|
}), Ke(async () => {
|
|
1090
1087
|
try {
|
|
1091
|
-
await R(),
|
|
1088
|
+
await R(), a.value ? c.value = a.value.clientWidth : typeof window < "u" && (c.value = window.innerWidth), v.value || ($.value = de(h.value, c.value), f.value && (V.value = f.value.scrollTop, U.value = f.value.clientHeight));
|
|
1092
1089
|
const e = l.loadAtPage;
|
|
1093
|
-
o.value = [e], l.skipInitialLoad || await
|
|
1090
|
+
o.value = [e], l.skipInitialLoad || await ye(o.value[0]), v.value ? R(() => X()) : M();
|
|
1094
1091
|
} catch (e) {
|
|
1095
1092
|
console.error("Error during component initialization:", e), g.value = !1;
|
|
1096
1093
|
}
|
|
1097
|
-
window.addEventListener("resize",
|
|
1094
|
+
window.addEventListener("resize", We), window.addEventListener("resize", je);
|
|
1098
1095
|
}), Qe(() => {
|
|
1099
1096
|
var e;
|
|
1100
|
-
w && (w.disconnect(), w = null), (e = f.value) == null || e.removeEventListener("scroll",
|
|
1101
|
-
}), (e,
|
|
1097
|
+
w && (w.disconnect(), w = null), (e = f.value) == null || e.removeEventListener("scroll", be), window.removeEventListener("resize", We), window.removeEventListener("resize", je), D.value && (D.value.removeEventListener("touchstart", De), D.value.removeEventListener("touchmove", Ae), D.value.removeEventListener("touchend", Oe), D.value.removeEventListener("mousedown", Be)), document.removeEventListener("mousemove", xe), document.removeEventListener("mouseup", Me);
|
|
1098
|
+
}), (e, n) => (B(), O("div", {
|
|
1102
1099
|
ref_key: "wrapper",
|
|
1103
|
-
ref:
|
|
1100
|
+
ref: a,
|
|
1104
1101
|
class: "w-full h-full flex flex-col relative"
|
|
1105
1102
|
}, [
|
|
1106
|
-
|
|
1103
|
+
v.value ? (B(), O("div", {
|
|
1107
1104
|
key: 0,
|
|
1108
|
-
class:
|
|
1105
|
+
class: Z(["overflow-hidden w-full flex-1 swipe-container touch-none select-none", { "force-motion": l.forceMotion, "cursor-grab": !y.value, "cursor-grabbing": y.value }]),
|
|
1109
1106
|
ref_key: "swipeContainer",
|
|
1110
|
-
ref:
|
|
1107
|
+
ref: D,
|
|
1111
1108
|
style: { height: "100%", "max-height": "100%", position: "relative" }
|
|
1112
1109
|
}, [
|
|
1113
|
-
|
|
1110
|
+
A("div", {
|
|
1114
1111
|
class: "relative w-full",
|
|
1115
|
-
style:
|
|
1112
|
+
style: Te({
|
|
1116
1113
|
transform: `translateY(${L.value}px)`,
|
|
1117
1114
|
transition: y.value ? "none" : `transform ${t.transitionDurationMs}ms ${t.transitionEasing}`,
|
|
1118
|
-
height: `${
|
|
1115
|
+
height: `${s.value.length * 100}%`
|
|
1119
1116
|
})
|
|
1120
1117
|
}, [
|
|
1121
|
-
(
|
|
1122
|
-
key: `${
|
|
1118
|
+
(B(!0), O(Ce, null, qe(s.value, (r, p) => (B(), O("div", {
|
|
1119
|
+
key: `${r.page}-${r.id}`,
|
|
1123
1120
|
class: "absolute top-0 left-0 w-full",
|
|
1124
|
-
style:
|
|
1125
|
-
top: `${
|
|
1126
|
-
height: `${100 /
|
|
1121
|
+
style: Te({
|
|
1122
|
+
top: `${p * (100 / s.value.length)}%`,
|
|
1123
|
+
height: `${100 / s.value.length}%`
|
|
1127
1124
|
})
|
|
1128
1125
|
}, [
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
item:
|
|
1133
|
-
remove:
|
|
1126
|
+
A("div", ia, [
|
|
1127
|
+
A("div", sa, [
|
|
1128
|
+
Le(e.$slots, "default", {
|
|
1129
|
+
item: r,
|
|
1130
|
+
remove: ce
|
|
1134
1131
|
}, () => [
|
|
1135
|
-
|
|
1136
|
-
item:
|
|
1137
|
-
remove:
|
|
1132
|
+
Ie(ge, {
|
|
1133
|
+
item: r,
|
|
1134
|
+
remove: ce
|
|
1138
1135
|
}, null, 8, ["item"])
|
|
1139
1136
|
], !0)
|
|
1140
1137
|
])
|
|
1141
1138
|
])
|
|
1142
1139
|
], 4))), 128))
|
|
1143
|
-
], 4)
|
|
1144
|
-
|
|
1145
|
-
(O(!0), A(Ie, null, Ee(r.value.slice(0, Math.min(10, r.value.length)), (i, m) => (O(), A("div", {
|
|
1146
|
-
key: `dot-${i.id}`,
|
|
1147
|
-
class: K(["w-1.5 h-1.5 rounded-full transition-all duration-300", m === v.value ? "bg-white w-4" : "bg-white/40"])
|
|
1148
|
-
}, null, 2))), 128))
|
|
1149
|
-
])) : Z("", !0),
|
|
1150
|
-
W("div", ca, ce(v.value + 1) + " / " + ce(r.value.length), 1)
|
|
1151
|
-
], 2)) : (O(), A("div", {
|
|
1140
|
+
], 4)
|
|
1141
|
+
], 2)) : (B(), O("div", {
|
|
1152
1142
|
key: 1,
|
|
1153
|
-
class:
|
|
1143
|
+
class: Z(["overflow-auto w-full flex-1 masonry-container", { "force-motion": l.forceMotion }]),
|
|
1154
1144
|
ref_key: "container",
|
|
1155
1145
|
ref: f
|
|
1156
1146
|
}, [
|
|
1157
|
-
|
|
1147
|
+
A("div", {
|
|
1158
1148
|
class: "relative",
|
|
1159
|
-
style:
|
|
1149
|
+
style: Te({ height: `${E.value}px`, "--masonry-duration": `${t.transitionDurationMs}ms`, "--masonry-leave-duration": `${t.leaveDurationMs}ms`, "--masonry-ease": t.transitionEasing })
|
|
1160
1150
|
}, [
|
|
1161
|
-
|
|
1151
|
+
Ie(mt, {
|
|
1162
1152
|
name: "masonry",
|
|
1163
1153
|
css: !1,
|
|
1164
|
-
onEnter:
|
|
1154
|
+
onEnter: re,
|
|
1165
1155
|
onBeforeEnter: q,
|
|
1166
1156
|
onLeave: at,
|
|
1167
1157
|
onBeforeLeave: tt
|
|
1168
1158
|
}, {
|
|
1169
1159
|
default: pt(() => [
|
|
1170
|
-
(
|
|
1171
|
-
key: `${
|
|
1160
|
+
(B(!0), O(Ce, null, qe(nt.value, (r, p) => (B(), O("div", ht({
|
|
1161
|
+
key: `${r.page}-${r.id}`,
|
|
1172
1162
|
class: "absolute masonry-item",
|
|
1173
1163
|
ref_for: !0
|
|
1174
|
-
}, gt(Ut)(
|
|
1164
|
+
}, gt(Ut)(r, p), {
|
|
1175
1165
|
style: { paddingTop: `${h.value.header}px`, paddingBottom: `${h.value.footer}px` }
|
|
1176
1166
|
}), [
|
|
1177
|
-
|
|
1178
|
-
item:
|
|
1179
|
-
remove:
|
|
1167
|
+
Le(e.$slots, "default", {
|
|
1168
|
+
item: r,
|
|
1169
|
+
remove: ce
|
|
1180
1170
|
}, () => [
|
|
1181
|
-
|
|
1182
|
-
item:
|
|
1183
|
-
remove:
|
|
1171
|
+
Ie(ge, {
|
|
1172
|
+
item: r,
|
|
1173
|
+
remove: ce
|
|
1184
1174
|
}, null, 8, ["item"])
|
|
1185
1175
|
], !0)
|
|
1186
1176
|
], 16))), 128))
|
|
1187
1177
|
]),
|
|
1188
1178
|
_: 3
|
|
1189
|
-
})
|
|
1190
|
-
T.value > 0 ? (O(), A("div", {
|
|
1191
|
-
key: 0,
|
|
1192
|
-
class: K(["fixed bottom-4 right-4 bg-gray-800 text-white text-xs rounded-full px-3 py-1.5 shadow-lg z-10 transition-opacity duration-300", { "opacity-50 hover:opacity-100": !ee.value.isNearTrigger, "opacity-100": ee.value.isNearTrigger }])
|
|
1193
|
-
}, [
|
|
1194
|
-
W("span", null, ce(r.value.length) + " items", 1),
|
|
1195
|
-
a[0] || (a[0] = W("span", { class: "mx-2" }, "|", -1)),
|
|
1196
|
-
W("span", null, ce(ee.value.distanceToTrigger) + "px to load", 1)
|
|
1197
|
-
], 2)) : Z("", !0)
|
|
1179
|
+
})
|
|
1198
1180
|
], 4)
|
|
1199
1181
|
], 2))
|
|
1200
1182
|
], 512));
|
|
1201
1183
|
}
|
|
1202
|
-
}),
|
|
1184
|
+
}), ca = (t, i) => {
|
|
1203
1185
|
const u = t.__vccOpts || t;
|
|
1204
|
-
for (const [l, I] of
|
|
1186
|
+
for (const [l, I] of i)
|
|
1205
1187
|
u[l] = I;
|
|
1206
1188
|
return u;
|
|
1207
|
-
}, Xe = /* @__PURE__ */
|
|
1189
|
+
}, Xe = /* @__PURE__ */ ca(ua, [["__scopeId", "data-v-9c79a3fb"]]), va = {
|
|
1208
1190
|
install(t) {
|
|
1209
|
-
t.component("WyxosMasonry", Xe), t.component("WMasonry", Xe), t.component("WyxosMasonryItem",
|
|
1191
|
+
t.component("WyxosMasonry", Xe), t.component("WMasonry", Xe), t.component("WyxosMasonryItem", ge), t.component("WMasonryItem", ge);
|
|
1210
1192
|
}
|
|
1211
1193
|
};
|
|
1212
1194
|
export {
|
|
1213
1195
|
Xe as Masonry,
|
|
1214
|
-
|
|
1215
|
-
|
|
1196
|
+
ge as MasonryItem,
|
|
1197
|
+
va as default
|
|
1216
1198
|
};
|