366 lines
10 KiB
JavaScript
366 lines
10 KiB
JavaScript
|
import {
|
||
|
|
H as e,
|
||
|
|
K as a,
|
||
|
|
J as t,
|
||
|
|
a1 as i,
|
||
|
|
I as l,
|
||
|
|
j as o,
|
||
|
|
a3 as s,
|
||
|
|
aD as n,
|
||
|
|
ae as c,
|
||
|
|
c as u,
|
||
|
|
ad as v,
|
||
|
|
w as r,
|
||
|
|
aa as h,
|
||
|
|
ab as p,
|
||
|
|
aU as f,
|
||
|
|
D as d,
|
||
|
|
l as g,
|
||
|
|
af as w,
|
||
|
|
Y as m,
|
||
|
|
Z as b,
|
||
|
|
a6 as x,
|
||
|
|
v as y,
|
||
|
|
aq as C,
|
||
|
|
a7 as S,
|
||
|
|
a8 as z,
|
||
|
|
aE as M,
|
||
|
|
aF as T,
|
||
|
|
Q as D,
|
||
|
|
ao as I,
|
||
|
|
} from "./index-476be0bb.js";
|
||
|
|
const [Y, E] = e("swipe"),
|
||
|
|
O = {
|
||
|
|
loop: a,
|
||
|
|
width: t,
|
||
|
|
height: t,
|
||
|
|
vertical: Boolean,
|
||
|
|
autoplay: i(0),
|
||
|
|
duration: i(500),
|
||
|
|
touchable: a,
|
||
|
|
lazyRender: Boolean,
|
||
|
|
initialSwipe: i(0),
|
||
|
|
indicatorColor: String,
|
||
|
|
showIndicators: a,
|
||
|
|
stopPropagation: a,
|
||
|
|
},
|
||
|
|
X = Symbol(Y);
|
||
|
|
const k = D(
|
||
|
|
l({
|
||
|
|
name: Y,
|
||
|
|
props: O,
|
||
|
|
emits: ["change", "dragStart", "dragEnd"],
|
||
|
|
setup(e, { emit: a, slots: t }) {
|
||
|
|
const i = o(),
|
||
|
|
l = o(),
|
||
|
|
D = s({
|
||
|
|
rect: null,
|
||
|
|
width: 0,
|
||
|
|
height: 0,
|
||
|
|
offset: 0,
|
||
|
|
active: 0,
|
||
|
|
swiping: !1,
|
||
|
|
});
|
||
|
|
let I = !1;
|
||
|
|
const Y = n(),
|
||
|
|
{ children: O, linkChildren: k } = c(X),
|
||
|
|
P = u(() => O.length),
|
||
|
|
j = u(() => D[e.vertical ? "height" : "width"]),
|
||
|
|
B = u(() => (e.vertical ? Y.deltaY.value : Y.deltaX.value)),
|
||
|
|
H = u(() => {
|
||
|
|
if (D.rect) {
|
||
|
|
return (
|
||
|
|
(e.vertical ? D.rect.height : D.rect.width) - j.value * P.value
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return 0;
|
||
|
|
}),
|
||
|
|
R = u(() =>
|
||
|
|
j.value ? Math.ceil(Math.abs(H.value) / j.value) : P.value
|
||
|
|
),
|
||
|
|
q = u(() => P.value * j.value),
|
||
|
|
A = u(() => (D.active + P.value) % P.value),
|
||
|
|
F = u(() => {
|
||
|
|
const a = e.vertical ? "vertical" : "horizontal";
|
||
|
|
return Y.direction.value === a;
|
||
|
|
}),
|
||
|
|
J = u(() => {
|
||
|
|
const a = {
|
||
|
|
transitionDuration: "".concat(D.swiping ? 0 : e.duration, "ms"),
|
||
|
|
transform: "translate"
|
||
|
|
.concat(e.vertical ? "Y" : "X", "(")
|
||
|
|
.concat(D.offset, "px)"),
|
||
|
|
};
|
||
|
|
if (j.value) {
|
||
|
|
const t = e.vertical ? "height" : "width",
|
||
|
|
i = e.vertical ? "width" : "height";
|
||
|
|
(a[t] = "".concat(q.value, "px")),
|
||
|
|
(a[i] = e[i] ? "".concat(e[i], "px") : "");
|
||
|
|
}
|
||
|
|
return a;
|
||
|
|
}),
|
||
|
|
K = (a, t = 0) => {
|
||
|
|
let i = a * j.value;
|
||
|
|
e.loop || (i = Math.min(i, -H.value));
|
||
|
|
let l = t - i;
|
||
|
|
return e.loop || (l = T(l, H.value, 0)), l;
|
||
|
|
},
|
||
|
|
Q = ({ pace: t = 0, offset: i = 0, emitChange: l }) => {
|
||
|
|
if (P.value <= 1) return;
|
||
|
|
const { active: o } = D,
|
||
|
|
s = ((a) => {
|
||
|
|
const { active: t } = D;
|
||
|
|
return a
|
||
|
|
? e.loop
|
||
|
|
? T(t + a, -1, P.value)
|
||
|
|
: T(t + a, 0, R.value)
|
||
|
|
: t;
|
||
|
|
})(t),
|
||
|
|
n = K(s, i);
|
||
|
|
if (e.loop) {
|
||
|
|
if (O[0] && n !== H.value) {
|
||
|
|
const e = n < H.value;
|
||
|
|
O[0].setOffset(e ? q.value : 0);
|
||
|
|
}
|
||
|
|
if (O[P.value - 1] && 0 !== n) {
|
||
|
|
const e = n > 0;
|
||
|
|
O[P.value - 1].setOffset(e ? -q.value : 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
(D.active = s),
|
||
|
|
(D.offset = n),
|
||
|
|
l && s !== o && a("change", A.value);
|
||
|
|
},
|
||
|
|
U = () => {
|
||
|
|
(D.swiping = !0),
|
||
|
|
D.active <= -1
|
||
|
|
? Q({ pace: P.value })
|
||
|
|
: D.active >= P.value && Q({ pace: -P.value });
|
||
|
|
},
|
||
|
|
W = () => {
|
||
|
|
U(),
|
||
|
|
Y.reset(),
|
||
|
|
C(() => {
|
||
|
|
(D.swiping = !1), Q({ pace: 1, emitChange: !0 });
|
||
|
|
});
|
||
|
|
};
|
||
|
|
let Z;
|
||
|
|
const G = () => clearTimeout(Z),
|
||
|
|
L = () => {
|
||
|
|
G(),
|
||
|
|
+e.autoplay > 0 &&
|
||
|
|
P.value > 1 &&
|
||
|
|
(Z = setTimeout(() => {
|
||
|
|
W(), L();
|
||
|
|
}, +e.autoplay));
|
||
|
|
},
|
||
|
|
N = (a = +e.initialSwipe) => {
|
||
|
|
if (!i.value) return;
|
||
|
|
const t = () => {
|
||
|
|
var t, l;
|
||
|
|
if (!S(i)) {
|
||
|
|
const a = {
|
||
|
|
width: i.value.offsetWidth,
|
||
|
|
height: i.value.offsetHeight,
|
||
|
|
};
|
||
|
|
(D.rect = a),
|
||
|
|
(D.width = +(null != (t = e.width) ? t : a.width)),
|
||
|
|
(D.height = +(null != (l = e.height) ? l : a.height));
|
||
|
|
}
|
||
|
|
P.value &&
|
||
|
|
-1 === (a = Math.min(P.value - 1, a)) &&
|
||
|
|
(a = P.value - 1),
|
||
|
|
(D.active = a),
|
||
|
|
(D.swiping = !0),
|
||
|
|
(D.offset = K(a)),
|
||
|
|
O.forEach((e) => {
|
||
|
|
e.setOffset(0);
|
||
|
|
}),
|
||
|
|
L();
|
||
|
|
};
|
||
|
|
S(i) ? z().then(t) : t();
|
||
|
|
},
|
||
|
|
V = () => N(D.active);
|
||
|
|
let $;
|
||
|
|
const _ = (a) => {
|
||
|
|
!e.touchable ||
|
||
|
|
a.touches.length > 1 ||
|
||
|
|
(Y.start(a), (I = !1), ($ = Date.now()), G(), U());
|
||
|
|
},
|
||
|
|
ee = () => {
|
||
|
|
if (!e.touchable || !D.swiping) return;
|
||
|
|
const t = Date.now() - $,
|
||
|
|
i = B.value / t;
|
||
|
|
if (
|
||
|
|
(Math.abs(i) > 0.25 || Math.abs(B.value) > j.value / 2) &&
|
||
|
|
F.value
|
||
|
|
) {
|
||
|
|
const a = e.vertical ? Y.offsetY.value : Y.offsetX.value;
|
||
|
|
let t = 0;
|
||
|
|
(t = e.loop
|
||
|
|
? a > 0
|
||
|
|
? B.value > 0
|
||
|
|
? -1
|
||
|
|
: 1
|
||
|
|
: 0
|
||
|
|
: -Math[B.value > 0 ? "ceil" : "floor"](B.value / j.value)),
|
||
|
|
Q({ pace: t, emitChange: !0 });
|
||
|
|
} else B.value && Q({ pace: 0 });
|
||
|
|
(I = !1), (D.swiping = !1), a("dragEnd", { index: A.value }), L();
|
||
|
|
},
|
||
|
|
ae = (a, t) => {
|
||
|
|
const i = t === A.value,
|
||
|
|
l = i ? { backgroundColor: e.indicatorColor } : void 0;
|
||
|
|
return y(
|
||
|
|
"i",
|
||
|
|
{ style: l, class: E("indicator", { active: i }) },
|
||
|
|
null
|
||
|
|
);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
v({
|
||
|
|
prev: () => {
|
||
|
|
U(),
|
||
|
|
Y.reset(),
|
||
|
|
C(() => {
|
||
|
|
(D.swiping = !1), Q({ pace: -1, emitChange: !0 });
|
||
|
|
});
|
||
|
|
},
|
||
|
|
next: W,
|
||
|
|
state: D,
|
||
|
|
resize: V,
|
||
|
|
swipeTo: (a, t = {}) => {
|
||
|
|
U(),
|
||
|
|
Y.reset(),
|
||
|
|
C(() => {
|
||
|
|
let i;
|
||
|
|
(i =
|
||
|
|
e.loop && a === P.value
|
||
|
|
? 0 === D.active
|
||
|
|
? 0
|
||
|
|
: a
|
||
|
|
: a % P.value),
|
||
|
|
t.immediate
|
||
|
|
? C(() => {
|
||
|
|
D.swiping = !1;
|
||
|
|
})
|
||
|
|
: (D.swiping = !1),
|
||
|
|
Q({ pace: i - D.active, emitChange: !0 });
|
||
|
|
});
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
k({ size: j, props: e, count: P, activeIndicator: A }),
|
||
|
|
r(
|
||
|
|
() => e.initialSwipe,
|
||
|
|
(e) => N(+e)
|
||
|
|
),
|
||
|
|
r(P, () => N(D.active)),
|
||
|
|
r(() => e.autoplay, L),
|
||
|
|
r([h, p, () => e.width, () => e.height], V),
|
||
|
|
r(f(), (e) => {
|
||
|
|
"visible" === e ? L() : G();
|
||
|
|
}),
|
||
|
|
d(N),
|
||
|
|
g(() => N(D.active)),
|
||
|
|
w(() => N(D.active)),
|
||
|
|
m(G),
|
||
|
|
b(G),
|
||
|
|
x(
|
||
|
|
"touchmove",
|
||
|
|
(t) => {
|
||
|
|
if (e.touchable && D.swiping && (Y.move(t), F.value)) {
|
||
|
|
(!e.loop &&
|
||
|
|
((0 === D.active && B.value > 0) ||
|
||
|
|
(D.active === P.value - 1 && B.value < 0))) ||
|
||
|
|
(M(t, e.stopPropagation),
|
||
|
|
Q({ offset: B.value }),
|
||
|
|
I || (a("dragStart", { index: A.value }), (I = !0)));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{ target: l }
|
||
|
|
),
|
||
|
|
() => {
|
||
|
|
var a;
|
||
|
|
return y("div", { ref: i, class: E() }, [
|
||
|
|
y(
|
||
|
|
"div",
|
||
|
|
{
|
||
|
|
ref: l,
|
||
|
|
style: J.value,
|
||
|
|
class: E("track", { vertical: e.vertical }),
|
||
|
|
onTouchstartPassive: _,
|
||
|
|
onTouchend: ee,
|
||
|
|
onTouchcancel: ee,
|
||
|
|
},
|
||
|
|
[null == (a = t.default) ? void 0 : a.call(t)]
|
||
|
|
),
|
||
|
|
t.indicator
|
||
|
|
? t.indicator({ active: A.value, total: P.value })
|
||
|
|
: e.showIndicators && P.value > 1
|
||
|
|
? y(
|
||
|
|
"div",
|
||
|
|
{ class: E("indicators", { vertical: e.vertical }) },
|
||
|
|
[Array(P.value).fill("").map(ae)]
|
||
|
|
)
|
||
|
|
: void 0,
|
||
|
|
]);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
})
|
||
|
|
),
|
||
|
|
[P, j] = e("swipe-item");
|
||
|
|
const B = D(
|
||
|
|
l({
|
||
|
|
name: P,
|
||
|
|
setup(e, { slots: a }) {
|
||
|
|
let t;
|
||
|
|
const i = s({ offset: 0, inited: !1, mounted: !1 }),
|
||
|
|
{ parent: l, index: o } = I(X);
|
||
|
|
if (!l) return;
|
||
|
|
const n = u(() => {
|
||
|
|
const e = {},
|
||
|
|
{ vertical: a } = l.props;
|
||
|
|
return (
|
||
|
|
l.size.value &&
|
||
|
|
(e[a ? "height" : "width"] = "".concat(l.size.value, "px")),
|
||
|
|
i.offset &&
|
||
|
|
(e.transform = "translate"
|
||
|
|
.concat(a ? "Y" : "X", "(")
|
||
|
|
.concat(i.offset, "px)")),
|
||
|
|
e
|
||
|
|
);
|
||
|
|
}),
|
||
|
|
c = u(() => {
|
||
|
|
const { loop: e, lazyRender: a } = l.props;
|
||
|
|
if (!a || t) return !0;
|
||
|
|
if (!i.mounted) return !1;
|
||
|
|
const s = l.activeIndicator.value,
|
||
|
|
n = l.count.value - 1,
|
||
|
|
c = 0 === s && e ? n : s - 1,
|
||
|
|
u = s === n && e ? 0 : s + 1;
|
||
|
|
return (t = o.value === s || o.value === c || o.value === u), t;
|
||
|
|
});
|
||
|
|
return (
|
||
|
|
d(() => {
|
||
|
|
z(() => {
|
||
|
|
i.mounted = !0;
|
||
|
|
});
|
||
|
|
}),
|
||
|
|
v({
|
||
|
|
setOffset: (e) => {
|
||
|
|
i.offset = e;
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
() => {
|
||
|
|
var e;
|
||
|
|
return y("div", { class: j(), style: n.value }, [
|
||
|
|
c.value ? (null == (e = a.default) ? void 0 : e.call(a)) : null,
|
||
|
|
]);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
})
|
||
|
|
);
|
||
|
|
export { B as S, k as a };
|