@aplus-frontend/ui
Version:
253 lines (252 loc) • 7.22 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 "../config-provider/index.mjs";
import "../scroll-bar/index.mjs";
import { isDef as f } from "../utils/index.mjs";
import { ensureRangeValue as n, getScrollable as k } from "../scroll-bar/utils/index.mjs";
import ve from "./hooks/use-scroll-wrapper.mjs";
import { isString as T } from "lodash-unified";
import { useElementSize as j, useRafFn as xe } from "@vueuse/core";
import { wait as R } from "@aplus-frontend/utils";
import { useScrollBack as we } from "./hooks/use-scroll-back.mjs";
import { useScrollSmooth as Be } from "./hooks/use-scroll-smooth.mjs";
import { getElementScrollOffset as Se } from "./utils/index.mjs";
import ge from "./style/index.mjs";
import { useNamespace as be } from "../config-provider/hooks/use-namespace.mjs";
import F from "../scroll-bar/internal.vue.mjs";
const Ae = /* @__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 = ge("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
} = ve(), { width: ee, height: te } = j(u), { width: re, height: oe } = j(s), { start: N } = we({
scrollOffset: r,
maxScrollDistance: i,
onScroll: (e) => {
e === "horizontal" ? p() : h();
},
async onScrollEnd() {
await R(200), g();
}
}), { start: $ } = Be({
scrollOffset: r,
maxScrollDistance: i,
onScroll(e, t) {
V.value && (y(), S = !0), e && p(), t && h();
},
async onScrollEnd() {
S && (await R(200), g(), S = !1);
}
}), { resume: g, pause: y, isActive: V } = xe(
() => {
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) ? T(o.width) ? o.width : Number.isNaN(o.width) ? void 0 : `${o.width}px` : void 0,
height: f(o.heigth) ? T(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 R(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 } = k(
s.value,
"vertical"
);
c.y = n(
Math.min(e / (t || 1) * 100)
);
}
if (o.showXBar) {
const { visibleSize: e, totalSize: t } = k(
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 } = k(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 = Se(
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 {
Ae as default
};