vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
59 lines (58 loc) • 2.79 kB
JavaScript
import { inject as B, ref as D, computed as p, onBeforeUnmount as b } from "vue";
import { BAR_MAP as W } from "../types.mjs";
const A = (v, o, l) => {
const r = B("scrollBarContext"), m = D({});
let d = !1;
const e = p(() => W[v.vertical ? "vertical" : "horizontal"]), E = ({ move: t, size: n, bar: a }) => ({
[a.size]: n,
transform: `translate${a.axis}(${t}%)`
}), P = p(
() => E({
size: v.size,
move: v.move,
bar: e.value
})
), g = p(() => o.value ? o.value[e.value.offset] ** 2 / r.scrollWrapEl[e.value.scrollSize] / v.ratio / l.value[e.value.offset] : 0);
let i = null, u = 0;
const C = (t) => {
u || (u = requestAnimationFrame(() => {
t(), u = 0;
}));
}, f = (t) => {
if (!o.value || !l.value || !d || i !== null && t.pointerId !== i)
return;
const n = m.value[e.value.axis];
n !== void 0 && C(() => {
let a = 0, c = 0;
o.value && (a = (o.value.getBoundingClientRect()[e.value.direction] - t[e.value.client]) * -1), l.value && (c = l.value[e.value.offset] - n);
const z = (a - c) * 100 * g.value / o.value[e.value.offset];
r && (r.scrollWrapEl[e.value.scroll] = z * r.scrollWrapEl[e.value.scrollSize] / 100);
});
}, s = () => {
d = !1, m.value[e.value.axis] = 0, l.value && i !== null && l.value.releasePointerCapture?.(i), i = null, document.removeEventListener("pointermove", f), document.removeEventListener("pointerup", s), document.removeEventListener("pointercancel", s);
}, L = (t) => {
t.stopImmediatePropagation(), t.preventDefault && t.preventDefault(), d = !0, i = t.pointerId, document.addEventListener("pointermove", f, { passive: !1 }), document.addEventListener("pointerup", s), document.addEventListener("pointercancel", s), t.currentTarget.setPointerCapture?.(t.pointerId), document.onselectstart = () => !1;
}, S = (t) => {
if (t.stopPropagation(), t.ctrlKey || [1, 2].includes(t.button))
return;
window.getSelection()?.removeAllRanges(), L(t);
const n = t.currentTarget;
n && (m.value[e.value.axis] = n[e.value.offset] - (t[e.value.client] - n.getBoundingClientRect()[e.value.direction]));
}, x = (t) => {
if (!l.value || !o.value || !r?.scrollWrapEl)
return;
const n = Math.abs(t.target.getBoundingClientRect()[e.value.direction] - t[e.value.client]), a = l.value[e.value.offset] / 2, c = (n - a) * 100 * g.value / o.value[e.value.offset];
r.scrollWrapEl[e.value.scroll] = c * r?.scrollWrapEl[e.value.scrollSize] / 100;
};
return b(() => {
document.removeEventListener("pointerup", s), document.removeEventListener("pointermove", f), u && cancelAnimationFrame(u);
}), {
bar: e,
thumbStyle: P,
onMousedown: x,
onThumbPointerDown: S
};
};
export {
A as useThumb
};