@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
168 lines (167 loc) • 6.44 kB
JavaScript
import { defineComponent as q, ref as g, computed as y, toRef as C, watch as R, watchEffect as I, onMounted as F, getCurrentInstance as W, nextTick as Z, onBeforeUnmount as j, createElementBlock as G, openBlock as J, normalizeStyle as K, normalizeClass as M, createElementVNode as U, unref as c } from "vue";
import { useProps as Q, useNameHelper as ee, emitEvent as f } from "@vexip-ui/config";
import { useManualRef as te, useRtl as le, useSetTimeout as ae } from "@vexip-ui/hooks";
import { isDefined as re, throttle as ne, USE_TOUCH as oe, boundRange as ue } from "@vexip-ui/utils";
import { scrollbarProps as ie } from "./props.mjs";
import { useTrack as se } from "./hooks.mjs";
import { scrollbarPlacements as ce, ScrollbarType as k } from "./symbol.mjs";
const ke = /* @__PURE__ */ q({
name: "Scrollbar",
__name: "scrollbar",
props: ie,
setup(B, { expose: V }) {
const t = Q("scrollbar", B, {
placement: {
default: "right",
validator: (e) => ce.includes(e)
},
scroll: {
default: 0,
validator: (e) => e >= 0 && e <= 100,
static: !0
},
barLength: {
default: 35,
validator: (e) => e > 0 && e < 100
},
width: null,
appear: !1,
fade: 1500,
barColor: null,
trackColor: null,
disabled: !1,
wrapper: null,
duration: null,
useTrack: !1,
trackSpeed: {
default: 2,
validator: (e) => e > 0 && e < 10
}
}), a = ee("scrollbar"), s = g(!1), d = g(!1), { manualRef: N, triggerUpdate: p } = te(), { isRtl: T } = le(), r = N(t.scroll), S = g(), n = g(), m = g(), { timer: i } = ae(), E = y(() => t.placement === "right" || t.placement === "left" ? k.VERTICAL : k.HORIZONTAL), { tracking: w, handleMouseDown: D } = se({
currentScroll: r,
track: m,
bar: n,
type: E,
trackSpeed: C(t, "trackSpeed"),
barLength: C(t, "barLength"),
disabled: C(t, "disabled"),
onDown: (e) => {
clearTimeout(i.fade), f(t.onScrollStart, e);
},
// onMove: () => clearTimeout(timer.fade),
onUp: (e) => {
h(), p(), f(t.onScrollEnd, e);
},
onScroll: (e) => {
p(), f(t.onScroll, e);
}
}), H = y(() => [
a.b(),
a.bs("vars"),
a.bm(t.placement),
{
[a.bm("inherit")]: t.inherit,
[a.bm("fade")]: t.fade,
[a.bm("scrolling")]: d.value,
[a.bm("tracking")]: w.value,
[a.bm("active")]: s.value,
[a.bm("disabled")]: t.disabled
}
]), O = y(() => ({
[a.cv("bar-bg-color")]: t.barColor,
[a.cv("track-bg-color")]: t.trackColor,
[a.cv("width")]: t.width ? `${t.width}px` : null
}));
R(
() => t.scroll,
(e) => {
r.value = e, p();
}
), I(() => {
if (!n.value) return;
const e = `${(100 - t.barLength) * r.value / t.barLength}%`, l = `${t.barLength}%`;
E.value === k.VERTICAL ? (n.value.style.height = l, n.value.style.transform = `translate3d(0, ${e}, 0)`) : (n.value.style.width = l, n.value.style.transform = `translate3d(${T.value ? "-" : ""}${e}, 0, 0)`);
}), I(() => {
n.value && (n.value.style.transitionDuration = re(t.duration) && t.duration >= 0 ? `${t.duration}ms` : "");
}), t.appear && R(r, () => {
clearTimeout(i.fade), s.value = !0, !d.value && !w.value && h();
});
const _ = ne(() => {
clearTimeout(i.fade), t.disabled ? s.value = !1 : (s.value = !0, !d.value && !w.value && h());
});
let o;
F(() => {
let e = W();
Z(() => {
var l, u, A;
typeof t.wrapper == "string" ? o = document.querySelector(t.wrapper) : o = t.wrapper, o || (e != null && e.parent ? (o = (l = e.parent.proxy) == null ? void 0 : l.$el, o || (o = ((u = S.value) == null ? void 0 : u.parentElement) ?? null)) : o = ((A = S.value) == null ? void 0 : A.parentElement) ?? null), o && t.fade >= 300 && o.addEventListener("mousemove", _), e = null, t.appear || R(r, () => {
clearInterval(i.fade), s.value = !0, h();
});
});
}), j(() => {
o && o.removeEventListener("mousemove", _), o = null, clearTimeout(i.fade);
}), V({
currentScroll: r,
container: S,
bar: n,
track: m,
handleScroll: Y
});
let L, v, b;
function X(e) {
if (e.button !== 0 || t.disabled || (e.stopPropagation(), e.preventDefault(), !m.value || !n.value)) return !1;
document.addEventListener("pointermove", P), document.addEventListener("pointerup", $);
const l = m.value.getBoundingClientRect(), u = n.value.getBoundingClientRect();
E.value === k.VERTICAL ? (L = l.height, v = u.top - l.top, b = e.clientY) : (L = l.width, v = T.value ? u.right - l.right : u.left - l.left, b = e.clientX), clearTimeout(i.fade), d.value = !0, f(t.onScrollStart, r.value);
}
function P(e) {
e.stopPropagation(), oe || e.preventDefault();
let l;
E.value === k.VERTICAL ? l = v + e.clientY - b : l = T.value ? -(v + e.clientX - b) : v + e.clientX - b, r.value = l / L / (100 - t.barLength) * 1e4, z(), p(), f(t.onScroll, r.value);
}
function $(e) {
e.preventDefault(), document.removeEventListener("pointermove", P), document.removeEventListener("pointerup", $), h(), d.value = !1, f(t.onScrollEnd, r.value);
}
function z() {
r.value = Math.max(0, Math.min(r.value, 100));
}
function h() {
t.fade >= 300 && (i.fade = setTimeout(() => {
s.value = !1;
}, t.fade));
}
function Y(e) {
Math.abs(r.value - e) < 1e-4 || (r.value = ue(e, 0, 100), p());
}
function x(e) {
e.cancelable && (e.stopPropagation(), e.preventDefault());
}
return (e, l) => (J(), G("div", {
ref_key: "container",
ref: S,
class: M(H.value),
role: "scrollbar",
style: K(O.value)
}, [
U("div", {
ref_key: "track",
ref: m,
class: M([c(a).be("track"), c(t).useTrack ? null : c(a).bem("track", "disabled")]),
onTouchstart: x,
onPointerdown: l[0] || (l[0] = //@ts-ignore
(...u) => c(D) && c(D)(...u))
}, null, 34),
U("div", {
ref_key: "bar",
ref: n,
class: M(c(a).be("bar")),
onTouchstart: x,
onPointerdown: X
}, null, 34)
], 6));
}
});
export {
ke as default
};
//# sourceMappingURL=scrollbar.vue2.mjs.map