vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
417 lines (416 loc) • 14.3 kB
JavaScript
import { defineComponent as Ze, ref as T, computed as z, toRef as C, shallowReadonly as el, watch as W, nextTick as V, watchEffect as Be, onMounted as ll, onBeforeUnmount as tl, createElementBlock as we, openBlock as x, withModifiers as Ee, unref as o, normalizeStyle as rl, normalizeClass as F, createCommentVNode as Q, createVNode as al, createBlock as Z, renderSlot as Te, normalizeProps as ze, guardReactiveProps as Ye, withCtx as Xe, resolveDynamicComponent as ol, mergeProps as nl } from "vue";
import "../scrollbar/index.mjs";
import "../resize-observer/index.mjs";
import { useProps as il, useNameHelper as ul, emitEvent as d } from "@vexip-ui/config";
import { useRtl as sl, useSetTimeout as cl } from "@vexip-ui/hooks";
import { USE_TOUCH as ee, createEventEmitter as fl, isTrue as vl, isClient as dl, isElement as Pe } from "@vexip-ui/utils";
import { scrollProps as ml } from "./props.mjs";
import { useScrollWrapper as pl } from "./hooks.mjs";
import { scrollModes as hl, MOVE_EVENT as Ce, UP_EVENT as xe } from "./symbol.mjs";
import gl from "../resize-observer/resize-observer.mjs";
import Re from "../scrollbar/scrollbar.vue2.mjs";
const xl = /* @__PURE__ */ Ze({
name: "Scroll",
__name: "scroll",
props: ml,
setup(ke, { expose: Ne }) {
const t = il("scroll", ke, {
scrollClass: null,
scrollStyle: null,
scrollAttrs: null,
mode: {
default: "vertical",
validator: (e) => hl.includes(e)
},
width: "",
height: "",
deltaX: 40,
deltaY: 40,
disabled: !1,
pointer: ee,
wheel: !0,
scrollX: {
default: 0,
static: !0
},
scrollY: {
default: 0,
static: !0
},
useXBar: !1,
useYBar: !1,
barFade: 1500,
barClass: null,
autoplay: !1,
playWaiting: 500,
noBuffer: !1,
noTransition: !1,
onBeforeScroll: {
default: null,
isFunc: !0
},
useBarTrack: !1,
scrollTag: "div"
}), U = fl(), s = ul("scroll"), { isRtl: $e } = sl(), { timer: p } = cl(), O = T(!1), R = T(!1), u = T(0), i = z(() => t.mode === "horizontal-exact" ? "horizontal" : t.mode);
let w = 180;
const q = T(), H = T();
let le = !1;
const {
wrapperEl: h,
contentEl: y,
wrapper: De,
isReady: _,
x: f,
y: m,
percentX: k,
percentY: N,
xScrollLimit: I,
yScrollLimit: j,
enableXScroll: g,
enableYScroll: S,
xBarLength: te,
yBarLength: re,
handleResize: Le,
verifyScroll: Y,
computePercent: ae,
refresh: oe,
triggerUpdate: $
} = pl({
mode: i,
disabled: C(t, "disabled"),
width: C(t, "width"),
height: C(t, "height"),
scrollX: C(t, "scrollX"),
scrollY: C(t, "scrollY"),
onResize: (e) => {
d(t.onResize, e);
},
// onBeforeRefresh: stopAutoplay,
onAfterRefresh: () => {
B(), le || (le = !0, D());
}
}), ne = el({
getState: je,
refresh: oe,
scrollTo: M,
scrollBy: K,
scrollToElement: be,
ensureInView: ye
}), X = T(!1), Ae = z(() => i.value !== "both" && (vl(t.autoplay) || +t.autoplay > 1e3) && (i.value === "horizontal" && g.value || i.value === "vertical" && S.value));
W([() => t.autoplay, () => t.playWaiting], () => {
L(), V(D);
});
function D() {
if (!Ae.value) return;
L();
const e = i.value === "horizontal" ? "width" : "height", l = i.value === "horizontal" ? I : j, r = i.value === "horizontal" ? f : m, a = t.playWaiting < 20 ? 20 : t.playWaiting;
let n = 0.5;
typeof t.autoplay == "number" && (n = De[e] / t.autoplay * 16);
const v = () => {
ae(), $(), B(), E(i.value);
}, c = () => {
r.value -= n, r.value <= l.value ? (r.value = l.value, X.value = !1, v(), p.end = setTimeout(() => {
M(0, 0, 500), p.start = setTimeout(() => {
X.value = !0, E(i.value), c();
}, 500 + a);
}, a)) : (v(), X.value && requestAnimationFrame(c));
};
p.play = setTimeout(() => {
X.value = !0, c();
}, a);
}
function L() {
X.value = !1, clearTimeout(p.play), clearTimeout(p.start), clearTimeout(p.end);
}
const Me = z(() => [
s.b(),
s.bs("vars"),
s.bm(i.value),
{
[s.bm("inherit")]: t.inherit,
[s.bm("using-bar")]: O.value,
[s.bm("scrolling")]: R.value,
[s.bm("no-ready")]: !_.value,
[s.bm("no-transition")]: t.noTransition
}
]), We = z(() => {
const { width: e, height: l } = t;
return {
width: e ? typeof e == "string" ? Number.isNaN(Number(e)) ? e : `${Number(e)}px` : `${e}px` : void 0,
height: l ? typeof l == "string" ? Number.isNaN(Number(l)) ? l : `${Number(l)}px` : `${l}px` : void 0
};
}), Ve = z(() => {
var e;
return [(e = t.scrollAttrs) == null ? void 0 : e.class, t.scrollClass, s.be("wrapper")];
}), Fe = z(() => {
var e;
return [(e = t.scrollAttrs) == null ? void 0 : e.style, t.scrollStyle];
});
W(g, (e) => {
d(t.onXEnabledChange, e);
}), W(S, (e) => {
d(t.onYEnabledChange, e);
}), W(_, (e) => {
e ? (u.value = -1, d(t.onReady)) : u.value = 0;
}), Be(() => {
y.value && (y.value.style.transform = `translate3d(${$e.value ? -f.value : f.value}px, ${m.value}px, 0)`);
}), Be(() => {
y.value && (y.value.style.transitionDuration = u.value < 0 ? "" : `${u.value}ms`);
}), ll(() => {
if (!dl || !h.value) return;
const l = getComputedStyle(h.value).getPropertyValue(s.cv("move-duration")).trim();
l.endsWith("ms") ? w = parseFloat(l) : l.endsWith("s") && (w = parseFloat(l) * 1e3), w = Number.isNaN(w) ? 140 : w;
}), tl(L), Ne({
percentX: k,
percentY: N,
x: f,
y: m,
isReady: _,
xBarLength: te,
yBarLength: re,
enableXScroll: g,
enableYScroll: S,
wrapper: h,
content: y,
xBar: q,
yBar: H,
refresh: oe,
scrollTo: M,
scrollBy: K,
scrollToElement: be,
ensureInView: ye,
getXScrollLimit: Ge,
getYScrollLimit: Je,
addScrollListener: Ke,
removeScrollListener: Qe
});
function b() {
return {
clientX: -f.value,
clientY: -m.value,
percentX: k.value,
percentY: N.value
};
}
function B() {
var e, l;
(e = q.value) == null || e.handleScroll(k.value), (l = H.value) == null || l.handleScroll(N.value);
}
function Ue(e) {
if (!t.pointer || e.button > 0 || ee)
return !1;
ce(e);
}
function Oe(e) {
if (!t.pointer || e.touches.length !== 1)
return !1;
ce(e);
}
let ie = 0, ue = 0, G = 0, J = 0, P = !1, A = null, se = 0;
function ce(e) {
if (!g.value && !S.value)
return !1;
e.cancelable && e.preventDefault(), me(), u.value = 0;
const l = "touches" in e ? e.touches[0] : e;
ie = f.value, ue = m.value, G = l.clientX, J = l.clientY, P = !1, A = e.target, se = Date.now(), document.addEventListener(Ce, fe), document.addEventListener(xe, ve), d(t.onScrollStart, b());
}
function fe(e) {
var n;
e.stopPropagation(), ee || e.preventDefault();
const l = "touches" in e ? e.touches[0] : e, r = l.clientX - G > 0 ? 1 : -1, a = l.clientY - J > 0 ? 1 : -1;
if (((n = t.onBeforeScroll) == null ? void 0 : n.call(t, { signX: r, signY: a })) === !1)
return !1;
R.value = !0, g.value && (f.value = ie + l.clientX - G, P = !0), S.value && (m.value = ue + l.clientY - J, P = !0), t.noBuffer ? Y() : (ae(), $()), B(), E(i.value);
}
function ve(e) {
!P && A && e.target === A && Date.now() - se <= 500 && A.dispatchEvent(new MouseEvent("click", e)), document.removeEventListener(Ce, fe), document.removeEventListener(xe, ve), u.value = -1, P = !1, qe(), Y(), B(), d(t.onScrollEnd, b()), D();
}
function de(e, l) {
var c;
const r = S.value && l === "vertical", a = g.value && l === "horizontal", n = e.deltaY > 0 ? -1 : 1;
if (t.wheel && (r || a) && ((c = t.onBeforeScroll) == null ? void 0 : c.call(t, { signX: -n, signY: -n })) !== !1)
e.preventDefault(), e.stopPropagation();
else
return !0;
if (i.value !== "both" && i.value !== l) return !1;
me();
const v = n * (l === "horizontal" ? t.deltaX : t.deltaY);
r ? m.value += v : a && (f.value += v), Y(), B(), E(l), d(t.onWheel, {
...b(),
type: l,
sign: -n
}), D();
}
function me() {
L(), clearTimeout(p.buffer);
}
function qe() {
t.noBuffer ? p.buffer = setTimeout(() => {
R.value = !1;
}, 300) : R.value = !1;
}
function pe(e) {
O.value = !0, d(t.onBarScrollStart, { ...b(), type: e });
}
function he(e) {
O.value = !1, d(t.onBarScrollEnd, { ...b(), type: e });
}
function He(e) {
k.value = e, f.value = e * I.value / 100, $(), d(t.onBarScroll, {
...b(),
type: "horizontal"
}), E("horizontal");
}
function _e(e) {
N.value = e, m.value = e * j.value / 100, $(), d(t.onBarScroll, {
...b(),
type: "vertical"
}), E("vertical");
}
function E(e) {
d(t.onScroll, {
...b(),
type: e
}), U.emit("scroll", {
...b(),
type: e
});
}
function Ie() {
h.value && (h.value.scrollTop = 0, h.value.scrollLeft = 0);
}
function je() {
const { clientX: e, clientY: l, percentX: r, percentY: a } = b();
return {
scrollX: e,
scrollY: l,
percentX: r,
percentY: a,
enableXScroll: g.value,
enableYScroll: S.value
};
}
function ge(e = w) {
return clearTimeout(p.wait), new Promise((l) => {
p.wait = setTimeout(() => l(), e + 1);
});
}
function M(e, l, r) {
return Se(r), V(() => {
let a = !1;
g.value && Math.abs(f.value + e) > 0.01 && (f.value = -e, a = !0), S.value && Math.abs(m.value + l) > 0.01 && (m.value = -l, a = !0), Y(), B(), a || (u.value = -1);
}), ge(r);
}
function K(e, l, r) {
return Se(r), V(() => {
let a = !1;
e && g && (f.value -= e, a = !0), l && S && (m.value -= l, a = !0), Y(), B(), a || (u.value = -1);
}), ge(r);
}
function Se(e) {
typeof e == "number" && (u.value = e, u.value === 0 && V(() => {
u.value = -1;
}));
}
function be(e, l, r = 0) {
if (!y.value || (typeof e == "string" && (e = y.value.querySelector(e)), !Pe(e))) return Promise.resolve();
const a = y.value.getBoundingClientRect(), n = e.getBoundingClientRect();
let v = 0, c = 0;
return i.value !== "vertical" && (v = n.left - a.left + r), i.value !== "horizontal" && (c = n.top - a.top + r), M(v, c, l);
}
function ye(e, l, r = 0) {
if (!h.value || (typeof e == "string" && (e = h.value.querySelector(e)), !Pe(e))) return Promise.resolve();
const a = h.value.getBoundingClientRect(), n = e.getBoundingClientRect();
let v = 0, c = 0;
return i.value !== "vertical" && (n.left < a.left + r ? v = n.left - a.left - r : n.right > a.right - r && (v = n.right - a.right + r)), i.value !== "horizontal" && (n.top < a.top + r ? c = n.top - a.top - r : n.bottom > a.bottom - r && (c = n.bottom - a.bottom + r)), K(v, c, l);
}
function Ge() {
return [0, -I.value];
}
function Je() {
return [0, -j.value];
}
function Ke(e) {
U.on("scroll", e);
}
function Qe(e) {
U.off("scroll", e);
}
return (e, l) => (x(), we("div", {
ref_key: "wrapperEl",
ref: h,
class: F(Me.value),
style: rl(We.value),
onMousedown: Ue,
onTouchstart: Oe,
onScroll: Ie,
onWheel: [
l[5] || (l[5] = Ee((r) => de(r, o(t).mode === "horizontal-exact" ? "horizontal" : "vertical"), ["exact"])),
l[6] || (l[6] = Ee((r) => de(r, "horizontal"), ["shift"]))
]
}, [
e.$slots.extra ? (x(), we("div", {
key: 0,
class: F(o(s).be("extra"))
}, [
Te(e.$slots, "extra", ze(Ye(o(ne))))
], 2)) : Q("", !0),
al(o(gl), {
throttle: "",
"on-resize": o(Le)
}, {
default: Xe(() => [
(x(), Z(ol(o(t).scrollTag || "div"), nl(o(t).scrollAttrs, {
ref_key: "contentEl",
ref: y,
class: Ve.value,
style: Fe.value,
onTransitionend: l[0] || (l[0] = (r) => u.value = -1)
}), {
default: Xe(() => [
Te(e.$slots, "default", ze(Ye(o(ne))))
]),
_: 3
}, 16, ["class", "style"]))
]),
_: 3
}, 8, ["on-resize"]),
o(t).useXBar ? (x(), Z(o(Re), {
key: 1,
ref_key: "xBar",
ref: q,
inherit: "",
placement: "bottom",
class: F([o(s).bem("bar", "horizontal"), o(t).barClass]),
fade: o(t).barFade,
"bar-length": o(te),
disabled: !o(g),
duration: u.value,
"use-track": o(t).useBarTrack,
onScrollStart: l[1] || (l[1] = (r) => pe("horizontal")),
onScroll: He,
onScrollEnd: l[2] || (l[2] = (r) => he("horizontal"))
}, null, 8, ["class", "fade", "bar-length", "disabled", "duration", "use-track"])) : Q("", !0),
o(t).useYBar ? (x(), Z(o(Re), {
key: 2,
ref_key: "yBar",
ref: H,
inherit: "",
placement: "right",
class: F([o(s).bem("bar", "vertical"), o(t).barClass]),
fade: o(t).barFade,
"bar-length": o(re),
disabled: !o(S),
duration: u.value,
"use-track": o(t).useBarTrack,
onScrollStart: l[3] || (l[3] = (r) => pe("vertical")),
onScroll: _e,
onScrollEnd: l[4] || (l[4] = (r) => he("vertical"))
}, null, 8, ["class", "fade", "bar-length", "disabled", "duration", "use-track"])) : Q("", !0)
], 38));
}
});
export {
xl as default
};
//# sourceMappingURL=scroll.vue2.mjs.map