vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
211 lines (210 loc) • 8.55 kB
JavaScript
import { defineComponent as Re, ref as t, computed as i, onMounted as Ce, createElementBlock as Pe, openBlock as De, normalizeStyle as W, createElementVNode as p, withDirectives as ne, normalizeClass as H, renderSlot as Ue, withModifiers as re, vShow as ie } from "vue";
import { useScroll as Ne, useResizeObserver as Ve, debounce as B } from "../utils/index.js";
const je = /* @__PURE__ */ Re({
__name: "Scrollbar",
props: {
contentClass: { default: void 0 },
contentStyle: { default: () => ({}) },
size: { default: 5 },
trigger: { default: "hover" },
autoHide: { type: Boolean, default: !0 },
delay: { default: 500 },
xScrollable: { type: Boolean, default: !1 },
yScrollable: { type: Boolean, default: !0 },
xPlacement: { default: "bottom" },
yPlacement: { default: "right" }
},
emits: ["scroll", "scrollend"],
setup(o, { expose: ce, emit: ve }) {
const a = o, u = t(), M = t(), j = t(), q = t(), m = t(!1), h = t(!1), L = t(0), E = t(0), R = t(0), C = t(0), c = t(0), s = t(0), f = t(0), d = t(0), x = t(0), k = t(0), z = t(0), P = t(0), X = t(!1), b = t(!1), S = t(!1), g = t(!1), A = t(0), G = t(0), I = t(0), J = t(0), se = { width: "fit-content" }, Y = t(!1), $ = t(!1), w = ve, n = i(() => a.trigger === "hover"), K = i(() => L.value > R.value), Q = i(() => E.value > C.value), D = i(() => L.value || E.value ? a.yScrollable && K.value || a.xScrollable && Q.value : !0), U = i(() => {
if (a.yScrollable && K.value && c.value && f.value && x.value) {
const e = Math.min(
c.value,
x.value * c.value / f.value + 1.5 * a.size
);
return Number(e.toFixed(4));
}
return 0;
}), fe = i(() => c.value && f.value && x.value ? z.value / (f.value - c.value) * (x.value - U.value) : 0), de = i(() => ({
top: `${fe.value}px`,
height: `${U.value}px`
})), N = i(() => {
if (a.xScrollable && Q.value && s.value && d.value && k.value) {
const e = k.value * s.value / d.value + 1.5 * a.size;
return Number(e.toFixed(4));
}
return 0;
}), me = i(() => s.value && d.value && k.value ? P.value / (d.value - s.value) * (k.value - N.value) : 0), he = i(() => ({
left: `${me.value}px`,
width: `${N.value}px`
}));
Ce(() => {
ae();
});
const {
left: Z,
right: _,
top: ee,
bottom: le
} = Ne(u);
Ve([u, M], ae);
function te() {
z.value = u.value.scrollTop, P.value = u.value.scrollLeft;
}
function be() {
L.value = u.value.scrollHeight, E.value = u.value.scrollWidth, R.value = u.value.clientHeight, C.value = u.value.clientWidth, c.value = u.value.offsetHeight, s.value = u.value.offsetWidth, f.value = M.value.offsetHeight, d.value = M.value.offsetWidth, x.value = j.value.offsetHeight, k.value = q.value.offsetWidth;
}
function ae() {
te(), be();
}
const Se = B(pe, 100), ge = B(He, 100), y = B(xe, 100 + a.delay), T = B(ke, 100 + a.delay);
function pe(e, l) {
w("scrollend", e, l);
}
function He(e, l) {
w("scrollend", e, l);
}
function xe() {
n.value && (a.autoHide && !Y.value && (m.value = !1), !a.autoHide && !X.value && (m.value = !1));
}
function ke() {
n.value && (a.autoHide && !$.value && (h.value = !1), !a.autoHide && !X.value && (h.value = !1));
}
function ye(e) {
if (Z.value || _.value) {
let l = "";
Z.value && (l = "left"), _.value && (l = "right"), w("scroll", e, l), n.value && (h.value = !0, !S.value && a.autoHide && (ge(e, l), T()));
}
if (ee.value || le.value) {
let l = "";
ee.value && (l = "top"), le.value && (l = "bottom"), w("scroll", e, l), n.value && (m.value = !0, !b.value && a.autoHide && (Se(e, l), y()));
}
te();
}
function Te() {
X.value = !0, S.value || b.value ? g.value = !1 : a.autoHide || (h.value = !0, m.value = !0);
}
function Me() {
X.value = !1, S.value || b.value ? g.value = !0 : a.autoHide || (h.value && T(), m.value && y());
}
function Le() {
Y.value = !0;
}
function Ee() {
Y.value = !1, b.value || y();
}
function ze() {
$.value = !0;
}
function Xe() {
$.value = !1, S.value || T();
}
function Ye(e) {
b.value = !0, A.value = z.value, I.value = e.clientY, document.addEventListener("mousemove", V), document.addEventListener("mouseup", oe), V(e);
}
function V(e) {
const v = (e.clientY - I.value) * (f.value - c.value) / (c.value - U.value), O = f.value - c.value;
let r = A.value + v;
r = Math.min(O, r), r = Math.max(r, 0), u.value.scrollTop = r;
}
function oe() {
b.value = !1, n.value && a.autoHide && !Y.value ? y() : n.value && !a.autoHide && g.value && (g.value = !1, y()), document.removeEventListener("mousemove", V), document.removeEventListener("mouseup", oe);
}
function $e(e) {
S.value = !0, G.value = P.value, J.value = e.clientX, document.addEventListener("mousemove", F), document.addEventListener("mouseup", ue), F(e);
}
function F(e) {
const v = (e.clientX - J.value) * (d.value - s.value) / (s.value - N.value), O = d.value - s.value;
let r = G.value + v;
r = Math.min(O, r), r = Math.max(r, 0), u.value.scrollLeft = r;
}
function ue() {
S.value = !1, n.value && a.autoHide && !$.value ? T() : n.value && !a.autoHide && g.value && (g.value = !1, T()), document.removeEventListener("mousemove", F), document.removeEventListener("mouseup", ue);
}
function we(...e) {
u.value?.scrollTo(...e);
}
function We(...e) {
u.value?.scrollBy(...e);
}
function Be() {
return {
scrollTop: z.value,
scrollWidth: E.value,
scrollHeight: L.value,
clientWidth: C.value,
clientHeight: R.value
};
}
return ce({
scrollTo: we,
scrollBy: We,
getScrollData: Be
}), (e, l) => (De(), Pe("div", {
class: "scrollbar-wrap",
style: W(`
--scrollbar-width: ${o.size}px;
--scrollbar-height: ${o.size}px;
--scrollbar-border-radius: ${o.size}px;
--scrollbar-color: rgba(0, 0, 0, 0.25);
--scrollbar-color-hover: rgba(0, 0, 0, 0.4);
--scrollbar-rail-horizontal-top: 4px 2px auto 2px;
--scrollbar-rail-horizontal-bottom: auto 2px 4px 2px;
--scrollbar-rail-vertical-right: 2px 4px 2px auto;
--scrollbar-rail-vertical-left: 2px auto 2px 4px;
--scrollbar-rail-color: transparent;
`),
onMouseenter: l[4] || (l[4] = (v) => D.value && o.trigger === "hover" ? Te() : () => !1),
onMouseleave: l[5] || (l[5] = (v) => D.value && o.trigger === "hover" ? Me() : () => !1)
}, [
p("div", {
ref_key: "containerRef",
ref: u,
class: H(["scrollbar-container", { "container-scroll": D.value }]),
onScroll: ye
}, [
p("div", {
ref_key: "contentRef",
ref: M,
class: H(["scrollbar-content", o.contentClass]),
style: W([o.xScrollable ? { ...se, ...o.contentStyle } : o.contentStyle])
}, [
Ue(e.$slots, "default", {}, void 0, !0)
], 6)
], 34),
ne(p("div", {
ref_key: "railVerticalRef",
ref: j,
class: H(["scrollbar-rail rail-vertical", `rail-vertical-${o.yPlacement}`])
}, [
p("div", {
class: H(["scrollbar-track", { "track-visible": o.trigger === "none" || m.value }]),
style: W(de.value),
onMouseenter: l[0] || (l[0] = (v) => n.value && a.autoHide ? Le() : () => !1),
onMouseleave: l[1] || (l[1] = (v) => n.value && a.autoHide ? Ee() : () => !1),
onMousedown: re(Ye, ["prevent", "stop"])
}, null, 38)
], 2), [
[ie, o.yScrollable]
]),
ne(p("div", {
ref_key: "railHorizontalRef",
ref: q,
class: H(["scrollbar-rail rail-horizontal", `rail-horizontal-${o.xPlacement}`])
}, [
p("div", {
class: H(["scrollbar-track", { "track-visible": o.trigger === "none" || h.value }]),
style: W(he.value),
onMouseenter: l[2] || (l[2] = (v) => n.value && a.autoHide ? ze() : () => !1),
onMouseleave: l[3] || (l[3] = (v) => n.value && a.autoHide ? Xe() : () => !1),
onMousedown: re($e, ["prevent", "stop"])
}, null, 38)
], 2), [
[ie, o.xScrollable]
])
], 36));
}
});
export {
je as default
};