vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
73 lines (72 loc) • 2.28 kB
JavaScript
import { ref as o } from "vue";
import { noop as d, USE_TOUCH as V } from "@vexip-ui/utils";
import { ScrollbarType as T } from "./symbol.mjs";
function F({
currentScroll: e = o(0),
trackSpeed: f = o(2),
track: v = o(null),
bar: u = o(null),
tracking: s = o(!1),
type: h = o(T.VERTICAL),
barLength: M = o(35),
disabled: g = o(!1),
onDown: x = d,
onMove: D = d,
onUp: w = d,
onScroll: B = d
}) {
let p, l, n, i, E = !0, R = !1;
function A() {
if (!s.value) return;
R = !0;
const t = P(i, e.value);
let a = !1;
E ? e.value < i && (e.value += t * f.value, a = !0) : e.value > i && (e.value -= t * f.value, a = !0), a && (U(), B(e.value)), (s.value && E ? e.value < i : e.value > i) ? requestAnimationFrame(A) : R = !1;
}
function I(t) {
if (g.value || t.button > 0 || (t.stopPropagation(), t.preventDefault(), !v.value || !u.value)) return !1;
document.addEventListener("pointermove", r), document.addEventListener("pointerup", L);
const a = v.value.getBoundingClientRect(), m = u.value.getBoundingClientRect();
let C;
h.value === T.VERTICAL ? (p = a.height, l = m.top - a.top, n = m.top, C = l + t.clientY - n) : (p = a.width, l = m.left - a.left, n = m.left, C = l + t.clientX - n), i = Math.max(
0,
Math.min(C / p / (100 - M.value / 2) * 1e4, 100)
), E = i >= e.value, s.value = !0, x(e.value), A();
}
function r(t) {
t.stopPropagation(), V || t.preventDefault(), D(e.value);
let a;
h.value === T.VERTICAL ? a = l + t.clientY - n : a = l + t.clientX - n, i = Math.max(
0,
Math.min(a / p / (100 - M.value / 2) * 1e4, 100)
), !R && A();
}
function L(t) {
t.preventDefault(), document.removeEventListener("pointermove", r), document.removeEventListener("pointerup", L), s.value = !1, w(e.value);
}
function U() {
e.value = Math.max(0, Math.min(e.value, 100));
}
return {
currentScroll: e,
trackSpeed: f,
track: v,
bar: u,
tracking: s,
type: h,
barLength: M,
disabled: g,
handleMouseDown: I
};
}
function P(e, f) {
const v = Math.abs(e - f);
for (let u = 0; u < 5; ++u)
if (v < (u + 1) * 20)
return 1 + 0.25 * u;
return 2;
}
export {
F as useTrack
};
//# sourceMappingURL=hooks.mjs.map