@aplus-frontend/ui
Version:
254 lines (253 loc) • 7.24 kB
JavaScript
import { defineComponent as ue, ref as he, reactive as pe, computed as v, unref as a, watchEffect as _, watch as ye, createElementBlock as me, openBlock as P, withModifiers as M, normalizeStyle as A, normalizeClass as w, createElementVNode as z, renderSlot as de, createBlock as L, createCommentVNode as O, mergeProps as I } from "vue";
import { wait as k } from "@aplus-frontend/utils";
import { useElementSize as T, useRafFn as ve } from "@vueuse/core";
import { isString as j } from "lodash-unified";
import "../config-provider/index.mjs";
import "../scroll-bar/index.mjs";
import { ensureRangeValue as n, getScrollable as R } from "../scroll-bar/utils/index.mjs";
import "../utils/index.mjs";
import { useScrollBack as xe } from "./hooks/use-scroll-back.mjs";
import { useScrollSmooth as we } from "./hooks/use-scroll-smooth.mjs";
import Be from "./hooks/use-scroll-wrapper.mjs";
import Se from "./style/index.mjs";
import { getElementScrollOffset as ge } from "./utils/index.mjs";
import { useNamespace as be } from "../config-provider/hooks/use-namespace.mjs";
import { isDef as f } from "../utils/is.mjs";
import F from "../scroll-bar/internal.vue.mjs";
const Le = /* @__PURE__ */ ue({
name: "ScrollView",
__name: "index",
props: {
width: {},
heigth: {},
showXBar: { type: Boolean, default: !0 },
showYBar: { type: Boolean, default: !0 },
autoPlay: { type: [Boolean, Object] },
xBarProps: { default: () => ({}) },
yBarProps: { default: () => ({}) },
onWheel: {}
},
setup(H, { expose: q }) {
const o = H, G = {
direction: "vertical",
rate: 1,
repeat: !0
}, { b: J, e: B, em: W } = be("scroll-view"), K = Se("scroll-view"), u = he(), c = pe({ x: 30, y: 30 });
let S = !1;
const {
scrollOffset: r,
maxScrollDistance: i,
xBarRef: Q,
yBarRef: U,
containerRef: s,
scrollYBar: h,
scrollXBar: p,
updateMaxScrollDistance: Z
} = Be(), { width: ee, height: te } = T(u), { width: re, height: oe } = T(s), { start: N } = xe({
scrollOffset: r,
maxScrollDistance: i,
onScroll: (e) => {
e === "horizontal" ? p() : h();
},
async onScrollEnd() {
await k(200), g();
}
}), { start: $ } = we({
scrollOffset: r,
maxScrollDistance: i,
onScroll(e, t) {
V.value && (y(), S = !0), e && p(), t && h();
},
async onScrollEnd() {
S && (await k(200), g(), S = !1);
}
}), { resume: g, pause: y, isActive: V } = ve(
() => {
if (!o.autoPlay) {
y();
return;
}
const e = o.autoPlay === !0 ? {} : o.autoPlay, t = {
...G,
...e
};
if (t.direction === "horizontal") {
if (r.x === i.x) {
y(), t.repeat && N("horizontal");
return;
}
r.x = n(
r.x + t.rate,
0,
i.x
), p();
} else {
if (r.y === i.y) {
y(), t.repeat && N("vertical");
return;
}
r.y = n(
r.y + t.rate,
0,
i.y
), h();
}
},
{ immediate: !0 }
), m = v(() => o.showXBar && c.x !== 100), x = v(() => o.showYBar && c.y !== 100), ae = v(() => ({
width: f(o.width) ? j(o.width) ? o.width : Number.isNaN(o.width) ? void 0 : `${o.width}px` : void 0,
height: f(o.heigth) ? j(o.heigth) ? o.heigth : Number.isNaN(o.heigth) ? void 0 : `${o.heigth}px` : void 0,
padding: `${o.xBarProps.trackWidth || 10}px ${o.yBarProps.trackWidth || 10}px`
}));
async function b() {
V.value && (y(), await k(500), g());
}
async function le(e) {
if (a(x))
e.preventDefault(), e.stopPropagation();
else
return;
r.y = n(
r.y + e.deltaY,
0,
i.y
), h(), o.onWheel?.("vertical", r.y), b();
}
function ie(e) {
if (a(m))
e.preventDefault(), e.stopPropagation();
else
return;
r.x = n(
r.x + e.deltaX,
0,
i.x
), p(), o.onWheel?.("horizontal", r.x), b();
}
function E() {
if (o.showYBar) {
const { visibleSize: e, totalSize: t } = R(
s.value,
"vertical"
);
c.y = n(
Math.min(e / (t || 1) * 100)
);
}
if (o.showXBar) {
const { visibleSize: e, totalSize: t } = R(
s.value,
"horizontal"
);
c.x = n(
Math.min(e / (t || 1) * 100)
);
}
}
function X(e, t) {
const l = a(s), d = a(u);
if (!l || !d) return;
const { visibleSize: C, totalSize: D } = R(l, t);
if (D <= C) return;
const Y = (D - C) * e / 100, fe = t === "vertical";
if (b(), fe) {
r.y = Y;
return;
}
r.x = Y;
}
_(
() => {
a(s.value) && E();
},
{ flush: "post" }
), ye(
() => [
ee.value,
te.value,
re.value,
oe.value
],
() => {
E(), Z();
}
), _(() => {
u.value && (u.value.style.transform = `translate3d(-${r.x}px, -${r.y}px, 0px)`);
});
function ne(e, t) {
f(e) && m.value && (r.x = n(e, 0, i.x), p()), f(t) && x.value && (r.y = n(t, 0, i.y), h());
}
function se({ smooth: e, left: t, top: l }) {
e ? $({ x: t, y: l }) : (f(t) && (r.x = t), f(l) && (r.y = l));
}
function ce(e, t = "start") {
const l = ge(
s.value,
e,
t
), d = {};
m.value && (d.x = n(
r.x + l.x,
0,
i.x
)), x.value && (d.y = n(
r.y + l.y,
0,
i.y
)), $(d);
}
return q({
scrollTop: v(() => r.y),
scrollLeft: v(() => r.x),
scroll: ne,
scrollTo: se,
scrollIntoView: ce
}), (e, t) => (P(), me("div", {
ref_key: "containerRef",
ref: s,
class: w([a(J)(), a(K)]),
style: A(ae.value),
onWheel: [
M(le, ["exact"]),
M(ie, ["shift"])
]
}, [
z("div", {
ref_key: "contentRef",
ref: u,
class: w(a(B)("content"))
}, [
de(e.$slots, "default")
], 2),
z("div", {
class: w([a(B)("bar-wrapper"), a(W)("bar-wrapper", "vertical")]),
style: A(`height: calc(100% - ${m.value ? e.xBarProps.trackWidth || 10 : 0}px)`)
}, [
x.value ? (P(), L(a(F), I({
key: 0,
ref_key: "yBarRef",
ref: U
}, e.yBarProps, {
"bar-length": c.y,
onScroll: t[0] || (t[0] = (l) => X(l, "vertical"))
}), null, 16, ["bar-length"])) : O("", !0)
], 6),
z("div", {
class: w([a(B)("bar-wrapper"), a(W)("bar-wrapper", "horizontal")])
}, [
m.value ? (P(), L(a(F), I({
key: 0,
ref_key: "xBarRef",
ref: Q
}, e.xBarProps, {
direction: "horizontal",
"bar-length": c.x,
onScroll: t[1] || (t[1] = (l) => X(l, "horizontal"))
}), null, 16, ["bar-length"])) : O("", !0)
], 2)
], 38));
}
});
export {
Le as default
};