vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
393 lines (392 loc) • 12 kB
JavaScript
import { isVNode as je, defineComponent as qe, ref as S, toRef as X, shallowReadonly as Ie, computed as N, watch as D, nextTick as ze, onBeforeUnmount as Ke, renderSlot as J, createVNode as f, mergeProps as Be } from "vue";
import "../scrollbar/index.mjs";
import "../resize-observer/index.mjs";
import { useProps as Ge, useNameHelper as Je, emitEvent as i } from "@vexip-ui/config";
import { useRtl as Qe, flatVNodes as Ze, createSlotRender as xe } from "@vexip-ui/hooks";
import { createEventEmitter as el, isTrue as ll, isClient as tl, USE_TOUCH as rl, isElement as ol } from "@vexip-ui/utils";
import { nativeScrollProps as al } from "./props.mjs";
import { useScrollWrapper as nl } from "./hooks.mjs";
import Q from "../resize-observer/resize-observer.mjs";
import Ee from "../scrollbar/scrollbar.vue2.mjs";
function Te(z) {
return typeof z == "function" || Object.prototype.toString.call(z) === "[object Object]" && !je(z);
}
const il = Object.freeze(["horizontal", "vertical", "both"]), Ye = "mousemove", Xe = "mouseup", bl = /* @__PURE__ */ qe({
name: "NativeScroll",
inheritAttrs: !1,
props: al,
emits: [],
setup(z, {
attrs: P,
slots: d,
expose: Ne
}) {
const l = Ge("nativeScroll", z, {
scrollClass: null,
scrollStyle: null,
scrollAttrs: null,
mode: {
default: "vertical",
validator: (e) => il.includes(e)
},
width: "",
height: "",
disabled: !1,
pointer: !1,
scrollX: {
default: 0,
static: !0
},
scrollY: {
default: 0,
static: !0
},
useXBar: !1,
useYBar: !1,
barFade: 1500,
barClass: null,
autoplay: !1,
playWaiting: 500,
appear: !1,
barDuration: null,
useBarTrack: !1,
scrollTag: "div",
observeDeep: !1,
scrollOnly: !1
}), k = el(), c = Je("native-scroll"), {
isRtl: Pe
} = Qe(), V = S(!1), Z = S(!1), B = S(), _ = S(), $ = S();
let ee = !1;
const {
contentEl: n,
content: w,
x: h,
y: b,
percentX: C,
percentY: L,
xScrollLimit: x,
yScrollLimit: E,
enableXScroll: p,
enableYScroll: v,
xBarLength: le,
yBarLength: te,
handleResize: H,
setScrollX: U,
setScrollY: F,
computePercent: R,
refresh: j,
scrollTo: q,
scrollBy: I,
scrollToElement: re,
triggerUpdate: g
} = nl({
mode: X(l, "mode"),
disabled: X(l, "disabled"),
appear: X(l, "appear"),
// width: toRef(props, 'width'),
// height: toRef(props, 'height'),
scrollX: X(l, "scrollX"),
scrollY: X(l, "scrollY"),
onResize: (e) => {
i(l.onResize, e);
},
// onBeforeRefresh: stopAutoplay,
onAfterRefresh: () => {
Y(), ee || (ee = !0, A());
}
}), K = Ie({
getState: _e,
refresh: j,
scrollTo: q,
scrollBy: I,
scrollToElement: re,
ensureInView: ge
}), T = S(!1), oe = N(() => l.mode !== "both" && (ll(l.autoplay) || +l.autoplay > 1e3) && (l.mode === "horizontal" && p.value || l.mode === "vertical" && v.value));
D([() => l.autoplay, () => l.playWaiting, n], () => {
O(), ze(A);
});
let ae, ne, ie;
Ke(O);
function A() {
if (O(), !oe.value || !n.value) return;
const e = l.mode, t = e === "horizontal" ? "offsetWidth" : "offsetHeight", r = e === "horizontal" ? x : E, o = e === "horizontal" ? h : b, a = l.playWaiting < 20 ? 20 : l.playWaiting, m = e === "horizontal" ? U : F;
let s = 0.5;
typeof l.autoplay == "number" && (s = n.value[t] / l.autoplay * 16);
const G = () => {
m(o.value + s), o.value >= r.value ? (m(r.value), T.value = !1, R(), g(), Y(), ie = setTimeout(() => {
q(0, 0, 500), ne = setTimeout(() => {
T.value = !0, G();
}, 500 + a);
}, a)) : (R(), g(), Y(), T.value && requestAnimationFrame(G));
};
ae = setTimeout(() => {
T.value = !0, G();
}, a);
}
function O() {
T.value = !1, clearTimeout(ae), clearTimeout(ne), clearTimeout(ie);
}
const we = N(() => [c.b(), c.bm(l.mode), {
[c.bm("inherit")]: l.inherit,
[c.bm("scrolling")]: Z.value,
[c.bm("using-bar")]: V.value
}]), ce = N(() => {
const {
width: e,
height: t
} = l;
return {
width: e ? typeof e == "string" ? Number.isNaN(Number(e)) ? e : `${Number(e)}px` : `${e}px` : void 0,
height: t ? typeof t == "string" ? Number.isNaN(Number(t)) ? t : `${Number(t)}px` : `${t}px` : void 0
};
}), Ce = N(() => {
var e;
return [(e = l.scrollAttrs) == null ? void 0 : e.class, l.scrollClass, c.be("wrapper")];
}), ue = N(() => oe.value ? 0 : l.barFade), W = S(!1);
function Le() {
W.value = !0, ze(j), requestAnimationFrame(() => {
W.value = !1;
});
}
let y;
function Re() {
!tl || !n.value || (y = new MutationObserver(Le), y.observe(n.value, {
childList: !0
}));
}
function Ae() {
y == null || y.disconnect(), y = void 0;
}
D(n, () => {
Ae(), Re();
}, {
immediate: !0
}), D(p, (e) => {
i(l.onXEnabledChange, e);
}), D(v, (e) => {
i(l.onYEnabledChange, e);
}), Ne({
x: h,
y: b,
percentX: C,
percentY: L,
xScrollLimit: x,
yScrollLimit: E,
xBarLength: le,
yBarLength: te,
enableXScroll: p,
enableYScroll: v,
wrapper: B,
content: n,
xBar: _,
yBar: $,
refresh: j,
scrollTo: q,
scrollBy: I,
scrollToElement: re,
ensureInView: ge,
getXScrollLimit: $e,
getYScrollLimit: He,
addScrollListener: Ue,
removeScrollListener: Fe
});
function u() {
return {
clientX: (Pe.value ? -1 : 1) * h.value,
clientY: b.value,
percentX: C.value,
percentY: L.value
};
}
function Y() {
var e, t;
(e = _.value) == null || e.handleScroll(C.value), (t = $.value) == null || t.handleScroll(L.value);
}
function Oe(e) {
if (!l.pointer || e.button !== 0 || rl)
return !1;
We(e);
}
let se = 0, fe = 0, de = 0, pe = 0;
function We(e) {
if (!p.value && !v.value)
return !1;
he(), se = h.value, fe = b.value, de = e.clientX, pe = e.clientY, document.addEventListener(Ye, ve), document.addEventListener(Xe, me), i(l.onScrollStart, u());
}
function ve(e) {
e.stopPropagation(), e.preventDefault(), Z.value = !0, p.value && U(se - (e.clientX - de)), v.value && F(fe - (e.clientY - pe)), R(), g(), Y(), M(l.mode);
}
function me() {
document.removeEventListener(Ye, ve), document.removeEventListener(Xe, me), i(l.onScrollEnd, u()), A();
}
function Me(e, t) {
const r = v.value && t === "vertical", o = p.value && t === "horizontal", a = e.deltaY > 0 ? 1 : -1;
if (i(l.onWheel, e, t), r || o) {
const m = r ? E.value : x.value, s = r ? b.value : h.value;
if (a > 0 ? s < m : s > 0)
return e.stopPropagation(), !1;
}
}
function De(e) {
var r;
if (!n.value) return;
e.stopPropagation();
const t = ((r = n.value) == null ? void 0 : r.scrollLeft) !== h.value ? "horizontal" : "vertical";
b.value = n.value.scrollTop, h.value = n.value.scrollLeft, R(), g(), Y(), M(t);
}
function he() {
O();
}
function Se(e) {
V.value = !0, he(), i(l.onBarScrollStart, {
...u(),
type: e
});
}
function be(e) {
V.value = !1, A(), i(l.onBarScrollEnd, {
...u(),
type: e
});
}
function ke(e) {
C.value = e, U(e * x.value / 100), g(), i(l.onBarScroll, {
...u(),
type: "horizontal"
}), M("horizontal");
}
function Ve(e) {
L.value = e, F(e * E.value / 100), g(), i(l.onBarScroll, {
...u(),
type: "vertical"
}), M("vertical");
}
function M(e) {
i(l.onScroll, {
...u(),
type: e
}), k.emit("scroll", {
...u(),
type: e
});
}
function _e() {
const {
clientX: e,
clientY: t,
percentX: r,
percentY: o
} = u();
return {
scrollX: e,
scrollY: t,
percentX: r,
percentY: o,
enableXScroll: p.value,
enableYScroll: v.value
};
}
function $e() {
return [0, x.value];
}
function He() {
return [0, E.value];
}
function ge(e, t, r = 0) {
if (!B.value || (typeof e == "string" && (e = B.value.querySelector(e)), !ol(e))) return Promise.resolve();
const o = B.value.getBoundingClientRect(), a = e.getBoundingClientRect();
let m = 0, s = 0;
return l.mode !== "vertical" && (a.left < o.left + r ? m = a.left - o.left - r : a.right > o.right - r && (m = a.right - o.right + r)), l.mode !== "horizontal" && (a.top < o.top + r ? s = a.top - o.top - r : a.bottom > o.bottom - r && (s = a.bottom - o.bottom + r)), I(m, s, t);
}
function Ue(e) {
k.on("scroll", e);
}
function Fe(e) {
k.off("scroll", e);
}
function ye() {
var r;
const e = l.scrollTag || "div", t = l.observeDeep && d.default ? J(d, "default", K).children : [];
return f(e, Be(l.scrollAttrs, l.scrollOnly ? P : {}, {
ref: n,
class: Ce.value,
style: [(r = l.scrollAttrs) == null ? void 0 : r.style, l.scrollStyle, l.scrollOnly && ce.value],
onMousedown: Oe,
onWheelPassive: (o) => Me(o, o.shiftKey ? "horizontal" : "vertical"),
onScroll: De
}), {
default: () => [d.extra && f("div", {
class: c.be("extra"),
style: {
width: W.value ? void 0 : `${w.scrollWidth}px`,
height: W.value ? void 0 : `${w.scrollHeight}px`
}
}, [f("div", {
class: c.be("extra-inner"),
style: {
width: `${w.offsetWidth}px`,
height: `${w.offsetHeight}px`
}
}, [J(d, "extra", K)])]), d.default && (l.observeDeep ? Ze(t).map((o, a) => f(Q, {
key: o.key ?? a,
"on-resize": H
}, {
default: () => o
})) : J(d, "default", K))]
});
}
return () => {
var t, r;
let e;
if (l.scrollOnly) {
let o;
return f(Q, {
"on-resize": H
}, Te(o = ye()) ? o : {
default: () => [o]
});
}
return f("div", Be(P, {
ref: B,
class: [we.value, P.class],
style: [ce.value, P.style]
}), [(t = xe(d, ["prefix-trap", "prefixTrap"])) == null ? void 0 : t(), f(Q, {
"on-resize": H
}, Te(e = ye()) ? e : {
default: () => [e]
}), l.useXBar && f(Ee, {
ref: _,
inherit: !0,
placement: "bottom",
class: [c.bem("bar", "horizontal"), l.barClass],
fade: ue.value,
"bar-length": le.value,
disabled: !p.value,
appear: l.appear,
duration: l.barDuration,
"use-track": l.useBarTrack,
onScrollStart: () => Se("horizontal"),
onScroll: ke,
onScrollEnd: () => be("horizontal")
}, null), l.useYBar && f(Ee, {
ref: $,
inherit: !0,
placement: "right",
class: [c.bem("bar", "vertical"), l.barClass],
fade: ue.value,
"bar-length": te.value,
disabled: !v.value,
appear: l.appear,
duration: l.barDuration,
"use-track": l.useBarTrack,
onScrollStart: () => Se("vertical"),
onScroll: Ve,
onScrollEnd: () => be("vertical")
}, null), (r = xe(d, ["suffix-trap", "suffixTrap"])) == null ? void 0 : r()]);
};
}
});
export {
bl as default
};
//# sourceMappingURL=native-scroll.mjs.map