@aplus-frontend/ui
Version:
89 lines (88 loc) • 2.47 kB
JavaScript
import { defineComponent as z, toRef as g, ref as p, watchEffect as x, unref as a, watch as _, computed as s, createBlock as k, createCommentVNode as C, openBlock as B, mergeProps as L } from "vue";
import "./internal.vue2.mjs";
import { omit as R } from "lodash-unified";
import { getScrollable as u, ensureRangeValue as w } from "./utils/index.mjs";
import { useResizeObserver as y } from "@vueuse/core";
import E from "./internal.vue.mjs";
const W = /* @__PURE__ */ z({
name: "ScrollBar",
__name: "index",
props: {
scrollContainer: {},
extraSize: { default: 0 },
direction: { default: "vertical" },
scroll: {},
barLength: { default: 30 },
width: {},
barColor: {},
trackColor: {},
trackWidth: {},
disabled: { type: Boolean, default: !1 },
showTrack: { type: Boolean, default: !0 },
trackSpeed: { default: 2 },
onScrollStart: {},
onScroll: {},
onScrollEnd: {}
},
setup(S, { expose: m }) {
const r = S, o = g(r, "scrollContainer"), l = p(), n = p(r.barLength);
function v() {
if (!o.value || !l.value) return;
const { totalSize: e, visibleSize: t, distance: c } = u(
o.value,
r.direction
), i = c / (e + r.extraSize - t || 1) * 100;
l.value.scroll(i);
}
function f() {
const { visibleSize: e, totalSize: t } = u(
o.value,
r.direction
);
n.value = w(
e / (t + r.extraSize || 1) * 100
);
}
y(o, () => {
f();
}), x(
() => {
const e = a(o.value);
e && (f(), e.addEventListener("scroll", v));
},
{ flush: "post" }
), _(
() => r.barLength,
(e) => {
n.value = e;
}
);
function d(e) {
const t = a(o);
if (!t) return;
const { totalSize: c, visibleSize: i, topOrLeft: b } = u(
t,
r.direction
);
if (c <= i) return;
const h = `scroll${b}`;
t[h] = e * (c + r.extraSize - i) / 100;
}
return m({
currentScroll: s(() => a(l.value?.currentScroll)),
scroll: d,
visible: s(() => n.value < 100),
rootElement: s(() => a(l.value?.container))
}), (e, t) => n.value !== 100 ? (B(), k(E, L({
key: 0,
ref_key: "barRef",
ref: l
}, a(R)(r, ["onScroll", "extraSize", "scrollContainer"]), {
"bar-length": n.value,
onScroll: d
}), null, 16, ["bar-length"])) : C("", !0);
}
});
export {
W as default
};