vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
112 lines (111 loc) • 3.6 kB
JavaScript
import { ref as W, reactive as I, computed as h, watch as o, nextTick as K, onMounted as O } from "vue";
import { useManualRef as Q } from "@vexip-ui/hooks";
import { toNumber as T, multipleFixed as $ } from "@vexip-ui/utils";
function Z({
mode: i,
disabled: L,
width: p,
height: w,
scrollX: g,
scrollY: M,
onResize: x,
onBeforeRefresh: C,
onAfterRefresh: P
}) {
const { manualRef: v, triggerUpdate: E } = Q(), d = W(), S = W(), e = I({
el: d,
width: T(p.value),
height: T(w.value)
}), a = I({
el: S,
width: 0,
height: 0
}), u = v(-g.value), l = v(-M.value), c = W(!1), f = v(0), s = v(0), b = h(() => e.width ? e.width - a.width : 0), y = h(() => e.height ? e.height - a.height : 0), j = h(() => !L.value && i.value !== "vertical" && !!e.width && a.width - e.width > 1), q = h(() => !L.value && i.value !== "horizontal" && !!e.height && a.height - e.height > 1), z = h(() => e.width ? Math.max(Math.min(e.width / (a.width || 1) * 100, 99), 5) : 35), D = h(() => e.height ? Math.max(Math.min(e.height / (a.height || 1) * 100, 99), 5) : 35);
o(d, () => {
m();
}), o(S, () => {
B();
}), o(g, (t) => {
u.value = -t, n();
}), o(M, (t) => {
l.value = -t, n();
}), o(p, () => {
m().then(n);
}), o(w, () => {
m().then(n);
});
function U(t) {
return K(() => {
if (!e.el) return;
const r = t === "width" ? p.value : w.value, J = t.slice(0, 1).toUpperCase() + t.slice(1);
typeof r == "string" ? !r.endsWith("px") && (!r || Number.isNaN(Number(r))) ? e[t] = e.el[`offset${J}`] : e[t] = parseInt(r) : e[t] = r;
});
}
async function m() {
const t = [];
i.value !== "vertical" && t.push(U("width")), i.value !== "horizontal" && t.push(U("height")), await Promise.all(t);
}
let k;
function B() {
return clearTimeout(k), new Promise((t) => {
c.value = !1, k = setTimeout(() => {
if (!a.el) {
t();
return;
}
i.value !== "vertical" && (a.width = a.el.offsetWidth, e.width >= a.width ? u.value = 0 : u.value === 0 && (u.value = -g.value)), i.value !== "horizontal" && (a.height = a.el.offsetHeight, e.height >= a.height ? l.value = 0 : l.value === 0 && (l.value = -M.value)), setTimeout(() => {
c.value = !0, n(), t();
}, 1);
}, 0);
});
}
function n() {
c.value && (i.value !== "vertical" && (u.value = Math.min(0, Math.max(u.value, b.value)), i.value !== "both" && (l.value = 0)), i.value !== "horizontal" && (l.value = Math.min(0, Math.max(l.value, y.value)), i.value !== "both" && (u.value = 0)), F(), E());
}
function F() {
f.value = $(u.value / (b.value || -1), 100, 2), s.value = $(l.value / (y.value || -1), 100, 2), f.value = Math.max(0, Math.min(f.value, 100)), s.value = Math.max(0, Math.min(s.value, 100));
}
function G(t) {
N(), x == null || x(t);
}
let H = !1;
O(() => {
N(), H = !0;
});
async function N() {
typeof C == "function" && C(), m(), await B().then(() => {
setTimeout(
() => {
n(), typeof P == "function" && P();
},
H ? 20 : 100
);
});
}
return {
wrapperEl: d,
contentEl: S,
wrapper: e,
content: a,
isReady: c,
x: u,
y: l,
percentX: f,
percentY: s,
xScrollLimit: b,
yScrollLimit: y,
enableXScroll: j,
enableYScroll: q,
xBarLength: z,
yBarLength: D,
handleResize: G,
verifyScroll: n,
computePercent: F,
refresh: N,
triggerUpdate: E
};
}
export {
Z as useScrollWrapper
};
//# sourceMappingURL=hooks.mjs.map