savor-ui 0.3.2 → 0.4.0

package/dist/es/components/src/popover/popover.vue_vue_type_script_setup_true_vapor_true_lang.mjs

@@ -2,12 +2,12 @@ import { debounce as e } from "../../../utils/src/tool.mjs";
 import "../../../utils/index.mjs";
 import { useNamespace as t } from "../../../hooks/src/use-namespace.mjs";
 import { useOutsideClick as n } from "../../../hooks/src/use-outside-click.mjs";
-import { useZIndex as r } from "../../../hooks/src/use-zIndex.mjs";
+import { useZIndex as ee } from "../../../hooks/src/use-zIndex.mjs";
 import "../../../hooks/index.mjs";
-import { VaporTeleport as ee, VaporTransition as i, applyVShow as te, child as ne, computed as a, createComponent as o, createDynamicComponent as re, createIf as s, createSlot as c, createTemplateRefSetter as ie, defineVaporComponent as l, nextTick as u, onMounted as d, onUnmounted as ae, ref as f, renderEffect as p, setClass as m, setDynamicEvents as h, setInsertionState as g, setStyle as _, setText as oe, template as v, toDisplayString as y, unref as b, useSlots as se, useTemplateRef as x, watch as S, watchEffect as ce } from "vue";
+import { VaporTeleport as te, VaporTransition as ne, applyVShow as r, child as i, computed as a, createComponent as o, createDynamicComponent as re, createIf as s, createSlot as c, createTemplateRefSetter as l, defineVaporComponent as u, nextTick as d, onMounted as ie, onUnmounted as ae, ref as f, renderEffect as p, setClass as m, setDynamicEvents as h, setInsertionState as g, setStyle as _, setText as oe, template as v, toDisplayString as se, unref as y, useSlots as b, useTemplateRef as x, watch as S, watchEffect as ce } from "vue";
 import { createPopper as le } from "@popperjs/core";
 //#region ../components/src/popover/popover.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var ue = v(" "), de = v("<div data-popper-arrow>"), fe = v("<div>"), pe = v("<div><div>"), C = /*@__PURE__*/ l({
+var ue = v(" "), de = v("<div data-popper-arrow>"), fe = v("<div>"), pe = v("<div><div>"), C = /*@__PURE__*/ u({
 	name: "SPopover",
 	__name: "popover",
 	props: {
@@ -21,6 +21,7 @@ var ue = v(" "), de = v("<div data-popper-arrow>"), fe = v("<div>"), pe = v("<di
 		alignPoint: { type: Boolean },
 		offset: {},
 		arrowStyle: {},
+		disabled: { type: Boolean },
 		destroyOnClose: {
 			type: Boolean,
 			default: !0
@@ -33,57 +34,57 @@ var ue = v(" "), de = v("<div data-popper-arrow>"), fe = v("<div>"), pe = v("<di
 	},
 	emits: ["change", "click-outside"],
 	__multiRoot: !0,
-	setup(l, { expose: v, emit: C }) {
-		let w = l, T = C, E = t("popover"), me = se(), D = f(!1), O = f(!1), { nextZIndex: he } = r(), k = f(), A = x("containerNode"), j = x("wrapperNode"), M = x("contentNode"), N = f(null), P = () => {
+	setup(u, { expose: v, emit: C }) {
+		let w = u, T = C, E = t("popover"), me = b(), D = f(!1), O = f(!1), { nextZIndex: he } = ee(), k = f(), A = x("containerNode"), j = x("wrapperNode"), M = x("contentNode"), N = f(null), ge = () => {
 			let e = me.default?.();
 			return N.value = e, e;
-		}, F = f(null), I = f({}), L = f({}), R = f({}), z = f(null), B = () => {
-			F.value && Object.entries(L.value).forEach(([e, t]) => {
-				F.value.removeEventListener(e, t);
+		}, P = f(null), F = f({}), I = f({}), L = f({}), R = f(null), z = () => {
+			P.value && Object.entries(I.value).forEach(([e, t]) => {
+				P.value.removeEventListener(e, t);
 			});
-		}, V = (e) => e == null ? [] : Array.isArray(e) ? e : [e], H = (e) => {
+		}, B = (e) => e == null ? [] : Array.isArray(e) ? e : [e], V = (e) => {
 			if (!e) return null;
 			if (e instanceof Node) return e;
 			if (e.block instanceof Node) return e.block;
 			if (e.el instanceof Node) return e.el;
 			if (e.branches) {
-				let t = typeof e.activeBranch == "number" ? e.activeBranch : 0, n = H(e.branches[t] || e.branches[0]);
+				let t = typeof e.activeBranch == "number" ? e.activeBranch : 0, n = V(e.branches[t] || e.branches[0]);
 				if (n) return n;
 			}
-			for (let t of V(e.children)) {
-				let e = H(t);
+			for (let t of B(e.children)) {
+				let e = V(t);
 				if (e) return e;
 			}
-			for (let t of V(e.nodes)) {
+			for (let t of B(e.nodes)) {
 				if (t instanceof Node) return t;
-				let e = H(t);
+				let e = V(t);
 				if (e) return e;
 			}
 			return null;
 		};
 		S(N, (e) => {
-			if (!e || F.value) return;
+			if (!e || P.value) return;
 			let t = null;
-			t = e instanceof HTMLElement ? e : H(e), t && t !== F.value && (B(), F.value = t);
-		}, { flush: "post" }), d(() => {
-			if (F.value) return;
+			t = e instanceof HTMLElement ? e : V(e), t && t !== P.value && (z(), P.value = t);
+		}, { flush: "post" }), ie(() => {
+			if (P.value) return;
 			let e = N.value;
 			if (!e) return;
-			let t = e instanceof HTMLElement ? e : H(e);
-			t && t !== F.value && (B(), F.value = t);
-		}), S(F, (e) => {
-			e && u().then(() => {
-				Object.entries(L.value).forEach(([t, n]) => {
+			let t = e instanceof HTMLElement ? e : V(e);
+			t && t !== P.value && (z(), P.value = t);
+		}), S(P, (e) => {
+			e && d().then(() => {
+				Object.entries(I.value).forEach(([t, n]) => {
 					e.addEventListener(t, n);
 				});
 			});
 		}, { flush: "post" });
-		let ge = () => {
-			if (!M.value || !F.value) return;
+		let _e = () => {
+			if (!M.value || !P.value) return;
 			M.value.style.width = "";
 			let e = "";
-			typeof w.width == "number" ? (e = `${w.width}px`, M.value.style.width = e) : w.width === "sameWidth" ? (e = `${F.value.getBoundingClientRect().width}px`, M.value.style.width = e) : w.width === "auto" && (e = "", M.value.style.width = e);
-		}, _e = a(() => {
+			typeof w.width == "number" ? (e = `${w.width}px`, M.value.style.width = e) : w.width === "sameWidth" ? (e = `${P.value.getBoundingClientRect().width}px`, M.value.style.width = e) : w.width === "auto" && (e = "", M.value.style.width = e);
+		}, ve = a(() => {
 			let e = [0, 0];
 			return w.offset ? e = w.offset : w.trigger === "contextmenu" && w.alignPoint ? e = [0, 0] : w.showArrow && (e = [0, 8]), {
 				placement: w.placement,
@@ -109,46 +110,46 @@ var ue = v(" "), de = v("<div data-popper-arrow>"), fe = v("<div>"), pe = v("<di
 					}
 				]
 			};
-		}), U = a(() => w.manual ? {
+		}), H = a(() => w.manual ? {
 			openDelay: 0,
 			closeDelay: 0
 		} : {
 			openDelay: typeof w.delay == "number" ? w.delay : w.delay[0],
 			closeDelay: typeof w.delay == "number" ? 50 : w.delay[1]
-		}), ve = () => {
-			O.value = !0, u(() => {
+		}), U = null, ye = () => {
+			w.disabled || (U &&= (clearTimeout(U), null), O.value = !0, d(() => {
 				D.value = !0, T("change", !0);
-			});
-		}, ye = () => {
-			D.value = !1, z.value = null, T("change", !1), setTimeout(() => {
-				w.destroyOnClose && (O.value = !1);
+			}));
+		}, be = () => {
+			D.value = !1, R.value = null, T("change", !1), U && clearTimeout(U), U = setTimeout(() => {
+				w.destroyOnClose && (O.value = !1), U = null;
 			}, 300);
 		}, W = f(null), G = f(null), K = () => {
-			W.value?.cancel(), G.value?.cancel(), W.value = e(ve, U.value.openDelay), G.value = e(ye, U.value.closeDelay);
+			W.value?.cancel(), G.value?.cancel(), W.value = e(ye, H.value.openDelay), G.value = e(be, H.value.closeDelay);
 		};
-		K(), S(U, K);
+		K(), S(H, K);
 		let q = () => {
 			G.value?.cancel(), W.value?.();
 		}, J = () => {
 			W.value?.cancel(), G.value?.();
 		};
 		n(A, (e) => {
-			F.value && e.target && typeof F.value.contains == "function" && F.value.contains(e.target) || (D.value && T("click-outside", e), !w.manual && (w.trigger === "hover" || w.trigger === "contextmenu" || w.trigger === "click") && J());
+			P.value && e.target && typeof P.value.contains == "function" && P.value.contains(e.target) || (D.value && T("click-outside", e), !w.manual && (w.trigger === "hover" || w.trigger === "contextmenu" || w.trigger === "click") && J());
 		});
 		let Y = null, X = () => {
 			Y &&= (Y.destroy(), null);
 		}, Z = () => {
-			L.value = {}, I.value = {}, R.value = {}, Q();
+			I.value = {}, F.value = {}, L.value = {}, Q();
 		}, Q = () => {
-			w.manual || (w.trigger === "hover" && (L.value.mouseenter = q, L.value.mouseleave = J, I.value.mouseenter = q, I.value.mouseleave = J), w.trigger === "click" && (L.value.click = () => {
+			w.manual || (w.trigger === "hover" && (I.value.mouseenter = q, I.value.mouseleave = J, F.value.mouseenter = q, F.value.mouseleave = J), w.trigger === "click" && (I.value.click = () => {
 				let e = D.value ? G.value : W.value;
 				(D.value ? W.value : G.value)?.cancel(), e?.();
-			}), w.trigger === "contextmenu" && (L.value.click = () => {
+			}), w.trigger === "contextmenu" && (I.value.click = () => {
 				J();
-			}, L.value.contextmenu = (e) => {
+			}, I.value.contextmenu = (e) => {
 				D.value && J(), e.preventDefault();
 				let t = e;
-				z.value = {
+				R.value = {
 					x: t.clientX,
 					y: t.clientY
 				}, q();
@@ -157,71 +158,71 @@ var ue = v(" "), de = v("<div data-popper-arrow>"), fe = v("<div>"), pe = v("<di
 		ce(() => {
 			w.manual || Q();
 		});
-		let be = () => {
-			X();
+		let xe = () => {
+			D.value || X();
 		};
 		S(D, (e) => {
-			if (!e || !j.value || !F.value) return;
-			k.value = he(), ge();
-			let t = F.value;
-			w.trigger === "contextmenu" && w.alignPoint && z.value && (t = { getBoundingClientRect() {
+			if (!e || !j.value || !P.value) return;
+			k.value = he(), _e();
+			let t = P.value;
+			w.trigger === "contextmenu" && w.alignPoint && R.value && (t = { getBoundingClientRect() {
 				return {
-					top: z.value.y,
-					left: z.value.x,
+					top: R.value.y,
+					left: R.value.x,
 					width: 0,
 					height: 0,
-					right: z.value.x,
-					bottom: z.value.y,
-					x: z.value.x,
-					y: z.value.y,
+					right: R.value.x,
+					bottom: R.value.y,
+					x: R.value.x,
+					y: R.value.y,
 					toJSON: () => JSON.stringify({
-						top: z.value.y,
-						left: z.value.x,
+						top: R.value.y,
+						left: R.value.x,
 						width: 0,
 						height: 0,
-						right: z.value.x,
-						bottom: z.value.y,
-						x: z.value.x,
-						y: z.value.y
+						right: R.value.x,
+						bottom: R.value.y,
+						x: R.value.x,
+						y: R.value.y
 					})
 				};
-			} }), X(), Y = le(t, j.value, _e.value);
+			} }), X(), Y = le(t, j.value, ve.value);
 		}, { flush: "post" }), S(() => w.manual, (e) => {
 			e ? Z() : Q();
 		}), S(() => w.trigger, (e, t) => {
 			e !== t && (W.value?.cancel(), D.value = !1, T("change", !1), Z());
 		}), ae(() => {
-			X(), B();
+			U &&= (clearTimeout(U), null), X(), z();
 		}), v({
 			show: q,
 			hide: J
 		});
-		let $ = ie();
-		return [re(() => P()), o(ee, {
-			disabled: () => !l.teleportBody,
-			to: () => l.teleport
+		let $ = l();
+		return [re(() => ge()), o(te, {
+			disabled: () => !u.teleportBody,
+			to: () => u.teleport
 		}, () => s(() => O.value, () => {
-			let e = pe(), t = ne(e);
+			let e = pe(), t = i(e);
 			return p(() => {
-				let n = b(E);
-				h(e, I.value), m(e, [n.b()]), m(t, [n.e("wrapper")]), _(t, { zIndex: k.value });
-			}), g(t, null, 0), o(i, {
+				let n = y(E);
+				h(e, F.value), m(e, [n.b()]), m(t, [n.e("wrapper")]), _(t, { zIndex: k.value });
+			}), g(t, null, 0), o(ne, {
 				name: "popover-fade",
-				onAfterLeave: () => be,
+				onAfterLeave: () => xe,
 				persisted: ""
 			}, () => {
 				let e = fe();
 				return p(() => {
-					h(e, R.value), m(e, [b(E).e("content")]);
+					h(e, L.value), m(e, [y(E).e("content")]);
 				}), g(e, null, 0), c("content", null, () => {
 					let e = ue();
-					return p(() => oe(e, y(l.content))), e;
-				}), g(e, null, 1), s(() => l.showArrow, () => {
+					return p(() => oe(e, se(u.content))), e;
+				}), g(e, null, 1), s(() => u.showArrow, () => {
 					let e = de();
 					return p(() => {
-						m(e, [b(E).e("arrow")]), _(e, l.arrowStyle);
+						m(e, [y(E).e("arrow")]), _(e, u.arrowStyle);
 					}), e;
-				}), te(e, () => D.value), $(e, M, null, "contentNode"), e;
+				}), r(e, () => D.value), $(e, M, null, "contentNode"), e;
 			}), $(t, j, null, "wrapperNode"), $(e, A, null, "containerNode"), e;
 		}, null, 129))];
 	}

package/dist/es/components/src/popover/types.d.ts

@@ -35,6 +35,10 @@ export interface PopoverProps {
     offset?: [number, number];
     /** 箭头样式 */
     arrowStyle?: Record<string, any>;
+    /** 是否禁用弹出层
+     * @default false
+     */
+    disabled?: boolean;
     /** 是否在关闭时销毁弹出层
      * @default false
      */

package/dist/es/components/src/scrollbar/index.d.ts

@@ -4,7 +4,7 @@ import { BackTopProps } from '../back-top';
 export declare const SScrollbar: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: {
     attrs: any;
     slots: ScrollbarSlots;
-    emit: {};
+    emit: ((evt: "scroll", e: Event) => void) & ((evt: "reachedEnd", e: Event, direction: "x" | "y") => void);
 }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: PublicProps & {
         width?: string | number | undefined;
@@ -15,13 +15,18 @@ export declare const SScrollbar: ((__VLS_props: NonNullable<Awaited<typeof __VLS
         id?: string | undefined;
         backtop?: boolean | undefined;
         backtopProps?: BackTopProps | undefined;
+        offsetTop?: number | undefined;
+        native?: boolean | undefined;
+        distance?: number | undefined;
+        onScroll?: ((e: Event) => any) | undefined;
+        onReachedEnd?: ((e: Event, direction: "x" | "y") => any) | undefined;
     } & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: ShallowUnwrapRef<ScrollbarExpose>) => void;
     attrs: any;
     slots: ScrollbarSlots;
-    emit: {};
+    emit: ((evt: "scroll", e: Event) => void) & ((evt: "reachedEnd", e: Event, direction: "x" | "y") => void);
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 }) & Plugin;

package/dist/es/components/src/scrollbar/scrollbar.d.ts

@@ -1,13 +1,16 @@
 import { ScrollbarExpose, ScrollbarProps, ScrollbarSlots } from './types';
 import { PublicProps, ShallowUnwrapRef, VNode } from 'vue';
 declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: PublicProps & __VLS_PrettifyLocal<ScrollbarProps> & (typeof globalThis extends {
+    props: PublicProps & __VLS_PrettifyLocal<ScrollbarProps & {
+        onScroll?: ((e: Event) => any) | undefined;
+        onReachedEnd?: ((e: Event, direction: "x" | "y") => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: ShallowUnwrapRef<ScrollbarExpose>) => void;
     attrs: any;
     slots: ScrollbarSlots;
-    emit: {};
+    emit: ((evt: "scroll", e: Event) => void) & ((evt: "reachedEnd", e: Event, direction: "x" | "y") => void);
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/es/components/src/scrollbar/scrollbar.vue_vue_type_script_setup_true_vapor_true_lang.mjs

@@ -3,11 +3,11 @@ import "../../../utils/index.mjs";
 import { useNamespace as t } from "../../../hooks/src/use-namespace.mjs";
 import "../../../hooks/index.mjs";
 import { SBackTop as n } from "../back-top/index.mjs";
-import { applyVShow as r, child as i, createComponent as a, createIf as o, createInvoker as s, createSlot as c, createTemplateRefSetter as ee, defineVaporComponent as l, delegateEvents as u, next as d, nextTick as f, on as te, onMounted as ne, onUnmounted as re, ref as p, renderEffect as ie, setClass as m, setInsertionState as h, setProp as ae, setStyle as g, template as _, unref as v, useId as oe, watch as se } from "vue";
+import { applyVShow as r, child as i, createComponent as a, createIf as o, createInvoker as s, createSlot as c, createTemplateRefSetter as l, defineVaporComponent as u, delegateEvents as d, nextTick as ee, on as f, onMounted as p, onUnmounted as te, ref as m, renderEffect as h, setClass as g, setInsertionState as _, setProp as v, setStyle as y, template as b, unref as x, useId as ne, watch as re } from "vue";
 //#region ../components/src/scrollbar/scrollbar.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var ce = _("<div><div></div><!><div><div><div></div></div></div><div><div><div>", 1);
-u("mousedown");
-var y = /*@__PURE__*/ l({
+var S = b("<div>"), ie = b("<div><div><div></div></div></div>"), C = b("<div><div><div>"), w = b("<div>", 1);
+d("mousedown");
+var T = /*@__PURE__*/ u({
 	name: "SScrollbar",
 	__name: "scrollbar",
 	props: {
@@ -18,128 +18,163 @@ var y = /*@__PURE__*/ l({
 		always: { type: Boolean },
 		id: {},
 		backtop: { type: Boolean },
-		backtopProps: {}
+		backtopProps: {},
+		offsetTop: { default: 0 },
+		native: { type: Boolean },
+		distance: { default: 0 }
 	},
-	setup(l, { expose: u }) {
-		let _ = l, y = t("scrollbar"), b = "scrollbar_" + oe(), x = p(null), S = p(null), C = p(null), w = p(!1), T = p(0), E = p(20), D = p(!1), O = p(0), k = p(20), A = p(!1), j = p(""), M = 0, N = 0, P = null, F = () => {
-			P && clearTimeout(P), P = window.setTimeout(() => {
-				I();
+	emits: ["scroll", "reachedEnd"],
+	setup(u, { expose: d, emit: b }) {
+		let T = u, E = b, D = t("scrollbar"), O = "scrollbar_" + ne(), k = m(null), A = m(null), j = m(null), M = m(!1), N = m(0), P = m(20), F = m(!1), I = m(0), L = m(20), R = m(!1), z = m(""), B = 0, V = 0, H = null, U = () => {
+			H && clearTimeout(H), H = window.setTimeout(() => {
+				W();
 			}, 10);
-		}, I = () => {
-			let e = x.value;
+		}, W = () => {
+			let e = k.value;
 			if (!e) return;
 			e.offsetHeight;
-			let { clientWidth: t, clientHeight: n, scrollWidth: r, scrollHeight: i } = e;
-			if (w.value = i > n + 1, w.value) {
+			let { clientWidth: t, clientHeight: n, scrollWidth: r, scrollHeight: i } = e, a = n - T.offsetTop;
+			if (M.value = i > n + 1, M.value) {
 				let e = n / i;
-				E.value = Math.max(20, e * n), T.value = 0;
-			} else T.value = 0;
-			if (D.value = r > t + 1, D.value) {
+				P.value = Math.max(20, e * a);
+			}
+			if (F.value = r > t + 1, F.value) {
 				let e = t / r;
-				k.value = Math.max(20, e * t), O.value = 0;
-			} else O.value = 0;
-			L();
-		}, L = () => {
-			let e = x.value;
+				L.value = Math.max(20, e * t);
+			}
+			G();
+		}, ae = (e) => {
+			G(), E("scroll", e), oe(e);
+		}, oe = (e) => {
+			let t = k.value;
+			if (!t) return;
+			let { scrollTop: n, scrollLeft: r, clientWidth: i, clientHeight: a, scrollWidth: o, scrollHeight: s } = t, c = T.distance;
+			M.value && n + a >= s - c && E("reachedEnd", e, "y"), F.value && r + i >= o - c && E("reachedEnd", e, "x");
+		}, G = () => {
+			let e = k.value;
 			if (!e) return;
-			let { scrollTop: t, scrollLeft: n, clientWidth: r, clientHeight: i, scrollWidth: a, scrollHeight: o } = e;
-			if (w.value) {
+			let { scrollTop: t, scrollLeft: n, clientWidth: r, clientHeight: i, scrollWidth: a, scrollHeight: o } = e, s = i - T.offsetTop;
+			if (M.value) {
 				let e = o - i;
-				T.value = (e <= 0 ? 0 : t / e) * (i - E.value);
+				N.value = (e <= 0 ? 0 : t / e) * (s - P.value);
 			}
-			if (D.value) {
+			if (F.value) {
 				let e = a - r;
-				O.value = (e <= 0 ? 0 : n / e) * (r - k.value);
+				I.value = (e <= 0 ? 0 : n / e) * (r - L.value);
 			}
-		}, R = (e, t) => {
-			x.value && (t === "y" && !S.value || t === "x" && !C.value || (A.value = !0, j.value = t, M = t === "y" ? e.clientY : e.clientX, N = t === "y" ? T.value : O.value, e.preventDefault(), e.stopPropagation()));
-		}, z = (e) => {
-			if (!A.value || !j.value || !x.value) return;
-			let t = x.value, n = j.value === "y" ? e.clientY - M : e.clientX - M;
-			if (j.value === "y") {
-				let e = t.clientHeight - E.value, r = Math.max(0, Math.min(e, N + n));
-				T.value = r, t.scrollTop = (e <= 0 ? 0 : r / e) * (t.scrollHeight - t.clientHeight);
+		}, K = (e, t) => {
+			k.value && (t === "y" && !A.value || t === "x" && !j.value || (R.value = !0, z.value = t, B = t === "y" ? e.clientY : e.clientX, V = t === "y" ? N.value : I.value, e.preventDefault(), e.stopPropagation()));
+		}, q = (e) => {
+			if (!R.value || !z.value || !k.value) return;
+			let t = k.value, n = z.value === "y" ? e.clientY - B : e.clientX - B;
+			if (z.value === "y") {
+				let e = t.clientHeight - T.offsetTop - P.value, r = Math.max(0, Math.min(e, V + n));
+				N.value = r, t.scrollTop = (e <= 0 ? 0 : r / e) * (t.scrollHeight - t.clientHeight);
 			}
-			if (j.value === "x") {
-				let e = t.clientWidth - k.value, r = Math.max(0, Math.min(e, N + n));
-				O.value = r, t.scrollLeft = (e <= 0 ? 0 : r / e) * (t.scrollWidth - t.clientWidth);
+			if (z.value === "x") {
+				let e = t.clientWidth - L.value, r = Math.max(0, Math.min(e, V + n));
+				I.value = r, t.scrollLeft = (e <= 0 ? 0 : r / e) * (t.scrollWidth - t.clientWidth);
 			}
-		}, B = () => {
-			A.value = !1, j.value = "";
-		}, V = p(null), H = p(null);
-		ne(() => {
-			f(() => {
-				I(), F();
+		}, J = () => {
+			R.value = !1, z.value = "";
+		}, Y = m(null), X = m(null);
+		p(() => {
+			ee(() => {
+				W(), U();
 			});
-			let e = x.value?.parentElement;
-			e && (V.value = new ResizeObserver(() => {
-				requestAnimationFrame(F);
-			}), V.value.observe(e)), x.value && (H.value = new MutationObserver(() => {
-				requestAnimationFrame(F);
-			}), H.value.observe(x.value, {
+			let e = k.value?.parentElement;
+			e && (Y.value = new ResizeObserver(() => {
+				requestAnimationFrame(U);
+			}), Y.value.observe(e)), k.value && (X.value = new MutationObserver(() => {
+				requestAnimationFrame(U);
+			}), X.value.observe(k.value, {
 				childList: !0,
 				subtree: !0,
 				attributes: !0
-			})), document.addEventListener("mousemove", z), document.addEventListener("mouseup", B);
-		}), re(() => {
-			P && clearTimeout(P), V.value?.disconnect(), H.value?.disconnect(), document.removeEventListener("mousemove", z), document.removeEventListener("mouseup", B);
-		}), se([
-			() => _.width,
-			() => _.height,
-			() => _.maxHeight,
-			() => _.padding
-		], F);
-		let U = (e = 0, t = 0, n = !1) => {
-			let r = x.value;
+			})), document.addEventListener("mousemove", q), document.addEventListener("mouseup", J);
+		}), te(() => {
+			H && clearTimeout(H), Y.value?.disconnect(), X.value?.disconnect(), document.removeEventListener("mousemove", q), document.removeEventListener("mouseup", J);
+		}), re([
+			() => T.width,
+			() => T.height,
+			() => T.maxHeight,
+			() => T.padding,
+			() => T.offsetTop
+		], U);
+		let Z = (e = 0, t = 0, n = !1) => {
+			let r = k.value;
 			if (!r) return;
 			let i = Math.max(0, r.scrollHeight - r.clientHeight), a = Math.max(0, r.scrollWidth - r.clientWidth);
 			r.scrollTo({
 				top: Math.min(e, i),
 				left: Math.min(t, a),
 				behavior: n ? "smooth" : "auto"
-			}), f(L);
+			}), G(), requestAnimationFrame(G);
 		};
-		u({
-			scrollTo: U,
+		d({
+			scrollTo: Z,
 			scrollToEl: (e, t = !0) => {
-				let n = x.value;
+				let n = k.value;
 				if (!n) return;
 				let r = n.querySelector(`#${e}`);
-				r && U(r.offsetTop, 0, t);
+				r && Z(r.offsetTop, 0, t);
+			},
+			scrollToEnd: (e = "y", t = !0) => {
+				let n = k.value;
+				n && (e === "y" ? Z(n.scrollHeight, 0, t) : Z(0, n.scrollWidth, t));
 			}
 		});
-		let W = ee(), G = ce(), K = i(G), q = d(K, 1), J = d(q, 2), Y = i(J), X = i(Y), Z = d(J, 3), Q = i(Z), $ = i(Q);
-		return ie(() => {
-			let t = v(y), n = v(e);
-			m(G, [t.b()]), g(G, {
-				width: n(l.width),
-				height: n(l.height)
-			}), m(K, [t.e("content")]), g(K, {
-				padding: l.padding,
-				maxHeight: n(l.maxHeight)
-			}), ae(K, "id", l.id || b);
-		}), h(K, null, 0), c(), te(K, "scroll", L), W(K, x, null, "contentRef"), h(G, q, 1), o(() => l.backtop, () => a(v(n), {
-			target: () => `#${l.id || b}`,
-			$: [() => l.backtopProps]
-		}, () => c("backtop", null, null, 4))), W(X, S, null, "thumbYRef"), r(J, () => w.value), J.$evtmousedown = s((e) => R(e, "y")), W($, C, null, "thumbXRef"), r(Z, () => D.value), Z.$evtmousedown = s((e) => R(e, "x")), ie(() => {
-			let e = v(y), t = [e.e("track")], n = [e.e("thumb")];
-			m(J, [
-				e.e("scroll-bar"),
-				e.e("y"),
-				{ [e.m("always")]: l.always }
-			]), m(Y, t), m(X, n), g(X, {
-				top: T.value + "px",
-				height: E.value + "px"
-			}), m(Z, [
-				e.e("scroll-bar"),
-				e.e("x"),
-				{ [e.m("always")]: l.always }
-			]), m(Q, t), m($, n), g($, {
-				left: O.value + "px",
-				width: k.value + "px"
+		let Q = l(), $ = w();
+		return h(() => {
+			let t = x(D), n = x(e);
+			g($, [t.b(), t.is("dragging", R.value)]), y($, {
+				width: n(u.width),
+				height: n(u.height)
 			});
-		}), G;
+		}), _($, null, 0), o(() => u.native, () => {
+			let t = S();
+			return h(() => {
+				g(t, [x(D).e("content")]), y(t, {
+					padding: u.padding,
+					maxHeight: x(e)(u.maxHeight)
+				}), v(t, "id", u.id || O);
+			}), _(t, null, 0), c(), t;
+		}, () => {
+			let t = S();
+			return h(() => {
+				g(t, [x(D).e("scroll-content")]), y(t, {
+					padding: u.padding,
+					maxHeight: x(e)(u.maxHeight)
+				}), v(t, "id", u.id || O);
+			}), _(t, null, 0), c(), f(t, "scroll", ae), Q(t, k, null, "contentRef"), t;
+		}, 261), _($, null, 1), o(() => u.backtop, () => a(x(n), {
+			target: () => `#${u.id || O}`,
+			$: [() => u.backtopProps]
+		}, () => c("backtop", null, null, 4))), _($, null, 2), o(() => !u.native, () => {
+			let e = ie(), t = i(e), n = i(t), a = C(), o = i(a), c = i(o);
+			return Q(n, A, null, "thumbYRef"), r(e, () => M.value), e.$evtmousedown = s((e) => K(e, "y")), Q(c, j, null, "thumbXRef"), r(a, () => F.value), a.$evtmousedown = s((e) => K(e, "x")), h(() => {
+				let r = x(D), i = u.offsetTop, s = [r.e("track")], l = [r.e("thumb")];
+				g(e, [
+					r.e("scroll-bar"),
+					r.e("y"),
+					{ [r.m("always")]: u.always }
+				]), y(e, {
+					top: i ? i + "px" : void 0,
+					height: i ? `calc(100% - ${i}px)` : void 0
+				}), g(t, s), g(n, l), y(n, {
+					top: N.value + "px",
+					height: P.value + "px"
+				}), g(a, [
+					r.e("scroll-bar"),
+					r.e("x"),
+					{ [r.m("always")]: u.always }
+				]), g(o, s), g(c, l), y(c, {
+					left: I.value + "px",
+					width: L.value + "px"
+				});
+			}), [e, a];
+		}, null, 2), $;
 	}
 });
 //#endregion
-export { y as default };
+export { T as default };

package/dist/es/components/src/scrollbar/types.d.ts

@@ -16,6 +16,12 @@ export interface ScrollbarProps {
     backtop?: boolean;
     /** 返回顶部按钮属性 */
     backtopProps?: BackTopProps;
+    /** 竖向滚动条距顶部偏移 */
+    offsetTop?: number;
+    /** 是否使用原生滚动条 */
+    native?: boolean;
+    /** 到达滚动条末尾距离 */
+    distance?: number;
 }
 export interface ScrollbarSlots {
     /** 默认 */
@@ -23,9 +29,17 @@ export interface ScrollbarSlots {
     /** 返回顶部按钮 */
     backtop?: () => any;
 }
+export interface ScrollbarEmits {
+    /** 滚动事件 */
+    scroll: [e: Event];
+    /** 到达滚动条末尾事件 */
+    reachedEnd: [e: Event, direction: "x" | "y"];
+}
 export interface ScrollbarExpose {
     /** 滚动到指定位置 */
-    scrollTo: (top: number, left: number, smooth?: boolean) => void;
+    scrollTo: (top: number, left?: number, smooth?: boolean) => void;
     /** 滚动到指定元素 */
     scrollToEl: (id: string, smooth?: boolean) => void;
+    /** 滚动到底部或最右边 */
+    scrollToEnd: (direction?: "y" | "x", smooth?: boolean) => void;
 }