@aplus-frontend/ui 0.4.15 → 0.4.17

package/es/src/ap-table/ap-table.vue2.mjs

@@ -1,25 +1,27 @@
-import { defineComponent as ze, useSlots as Pe, ref as f, computed as s, unref as r, createVNode as m, Fragment as J, watchEffect as Ne, watch as I, openBlock as y, createElementBlock as x, normalizeClass as g, normalizeStyle as Q, mergeProps as S, createSlots as X, withCtx as w, renderList as Y, createBlock as Z, resolveDynamicComponent as Ie, renderSlot as R, createCommentVNode as ee, createElementVNode as E, normalizeProps as Ee, guardReactiveProps as Ke } from "vue";
+import { defineComponent as ze, useSlots as Pe, ref as S, computed as s, unref as t, createVNode as f, Fragment as G, watchEffect as Ne, watch as J, openBlock as p, createElementBlock as B, normalizeClass as m, normalizeStyle as Q, mergeProps as h, createSlots as X, withCtx as w, renderList as Y, createBlock as Z, resolveDynamicComponent as Ie, renderSlot as R, createCommentVNode as ee, createElementVNode as N, normalizeProps as Ee, guardReactiveProps as Ke } from "vue";
 import { Divider as Oe, Table as Le } from "@aplus-frontend/antdv";
 import { useToken as Ve } from "@aplus-frontend/antdv/es/theme/internal";
 import { ApForm as Ae } from "../ap-form/index.mjs";
 import { noRenderAsFormItemValueList as oe } from "./constants.mjs";
 import "../config-provider/index.mjs";
 import { useTablePaging as De } from "./hooks/use-table-paging-ng.mjs";
-import { isUndefined as b, omit as ae, isBoolean as $e } from "lodash-unified";
-import { getColumnOrder as re, updateFormProps as je, getFieldProps as We, getSearchFormItemRenderNode as He, recursionApColumns as te, apColumnToColumn as _e, getTableTitle as qe, getTableRenderType as Ue, getTableRenderProps as Ge, getTableCellRenderNode as Me, falseToUndefined as Je } from "./utils.mjs";
+import { isUndefined as y, omit as ae, isBoolean as $e } from "lodash-unified";
+import { getColumnOrder as re, updateFormProps as We, getFieldProps as je, getSearchFormItemRenderNode as _e, recursionApColumns as te, apColumnToColumn as He, getTableTitle as Ue, getTableRenderType as qe, getTableRenderProps as Me, getTableCellRenderNode as Ge, falseToUndefined as Je } from "./utils.mjs";
 import Qe from "./hooks/use-table-content-height.mjs";
 import Xe from "./hooks/use-table-row-selection.mjs";
-import { getScrollbarSize as Ye, isDef as Ze } from "../utils/index.mjs";
+import { isDef as Ye } from "../utils/index.mjs";
 import "./components/setting/modal/index.vue.mjs";
 import "./components/paragraph-ellipsis/index.vue.mjs";
-import { useProvideApTable as eo } from "./context.mjs";
+import { useProvideApTable as Ze } from "./context.mjs";
 import "../scroll-bar/index.mjs";
-import { useNamespace as oo } from "../config-provider/hooks/use-namespace.mjs";
-import { useGlobalConfig as ao } from "../config-provider/hooks/use-global-config.mjs";
-import ro from "./components/paragraph-ellipsis/index.vue2.mjs";
-import to from "./components/setting/modal/index.vue2.mjs";
-import lo from "../scroll-bar/index.vue.mjs";
-const ko = /* @__PURE__ */ ze({
+import { useStickyScroll as eo } from "./hooks/use-sticky-scroll.mjs";
+import { scrollbarSize as oo } from "../config-provider/css-var.mjs";
+import { useNamespace as ao } from "../config-provider/hooks/use-namespace.mjs";
+import { useGlobalConfig as ro } from "../config-provider/hooks/use-global-config.mjs";
+import to from "./components/paragraph-ellipsis/index.vue2.mjs";
+import lo from "./components/setting/modal/index.vue2.mjs";
+import no from "../scroll-bar/index.vue.mjs";
+const No = /* @__PURE__ */ ze({
   name: "ApTable",
   __name: "ap-table",
   props: {
@@ -147,19 +149,22 @@ const ko = /* @__PURE__ */ ze({
     expose: ne
   }) {
     const o = le;
-    let K = 0;
-    const se = Ye(), v = Pe(), [, de] = Ve(), {
-      e: B,
+    let I = 0;
+    const C = Pe(), [, se] = Ve(), {
+      e: x,
       b: i,
-      be: O,
-      bm: ue
-    } = oo("ap-table"), L = ao("valueTypeMap"), {
-      height: ie,
-      contentRef: ce
-    } = Qe(), k = f(o.size), u = f([]), V = f([]), A = f(), D = f(), $ = f();
-    eo({
+      be: E,
+      m: de
+    } = ao("ap-table"), K = ro("valueTypeMap"), {
+      height: ue,
+      contentRef: ie
+    } = Qe(), O = S(), L = S(), {
+      isStickyMode: V,
+      scrollBarRef: ce
+    } = eo(O), k = S(o.size), u = S([]), A = S([]);
+    Ze({
       columns: s(() => u.value),
-      columnsBackup: s(() => V.value),
+      columnsBackup: s(() => A.value),
       size: s(() => k.value),
       updateColumns(e) {
         u.value = e;
@@ -167,34 +172,34 @@ const ko = /* @__PURE__ */ ze({
       updateSize(e) {
         k.value = e;
       },
-      dataSource: s(() => r(c).records)
+      dataSource: s(() => t(g).records)
     });
-    const j = s(() => {
-      var e, t, a;
-      return K++, ((a = (t = (e = o.columns) == null ? void 0 : e.filter((l) => !l.hideInSearch && l.dataIndex && (l.valueType || l.customRenderFormItem) && !oe.includes(l.valueType))) == null ? void 0 : t.sort((l, d) => {
-        let n = re(l.order);
+    const D = s(() => {
+      var e, l, a;
+      return I++, ((a = (l = (e = o.columns) == null ? void 0 : e.filter((r) => !r.hideInSearch && r.dataIndex && (r.valueType || r.customRenderFormItem) && !oe.includes(r.valueType))) == null ? void 0 : l.sort((r, d) => {
+        let n = re(r.order);
         return re(d.order) - n;
-      })) == null ? void 0 : a.map((l) => {
-        const d = je(l, We(l.fieldProps, {})), n = {
-          ...l,
+      })) == null ? void 0 : a.map((r) => {
+        const d = We(r, je(r.fieldProps, {})), n = {
+          ...r,
           fieldProps: {
-            label: l.title,
-            name: l.dataIndex,
+            label: r.title,
+            name: r.dataIndex,
             ...d || {},
-            _signal: K
+            _signal: I
           },
           renderNode: void 0
         };
-        return n.renderNode = He(n, r(L)), n;
+        return n.renderNode = _e(n, t(K)), n;
       })) || [];
-    }), pe = s(() => te(r(u), (e) => {
+    }), fe = s(() => te(t(u), (e) => {
       if (e.sorter === !0)
         return e.key || e.dataIndex;
-    }).filter(Boolean)), fe = s(() => te(r(u), (e) => {
+    }).filter(Boolean)), pe = s(() => te(t(u), (e) => {
       if (e.filters && !e.onFilter)
         return e.key || e.dataIndex;
-    }).filter(Boolean)), me = s(() => b(o.dataSource) ? c.records : o.dataSource), {
-      rowSelection: C,
+    }).filter(Boolean)), me = s(() => y(o.dataSource) ? g.records : o.dataSource), {
+      rowSelection: v,
       selectedRows: T,
       ...F
     } = Xe({
@@ -204,85 +209,85 @@ const ko = /* @__PURE__ */ ze({
       dataSource: me
     }), {
       formRef: z,
-      submit: W,
-      reset: H,
-      tableProps: _,
+      submit: $,
+      reset: W,
+      tableProps: j,
       refresh: ye,
-      data: c,
+      data: g,
       setDataSource: ge,
       getColumnSFConfig: be
     } = De({
       async request(e) {
-        var a, l;
-        if (!C.value.preserveSelectedRowKeys && b(o.dataSource) && F.clearAll(), !b(o.dataSource))
+        var a, r;
+        if (!v.value.preserveSelectedRowKeys && y(o.dataSource) && F.clearAll(), !y(o.dataSource))
           return {
             data: o.dataSource || [],
             total: o.dataSource.length || 0
           };
-        const t = await ((a = o.request) == null ? void 0 : a.call(o, e));
-        return (l = o.onLoad) == null || l.call(o, (t == null ? void 0 : t.data) || []), {
-          data: (t == null ? void 0 : t.data) || [],
-          total: (t == null ? void 0 : t.total) || 0
+        const l = await ((a = o.request) == null ? void 0 : a.call(o, e));
+        return (r = o.onLoad) == null || r.call(o, (l == null ? void 0 : l.data) || []), {
+          data: (l == null ? void 0 : l.data) || [],
+          total: (l == null ? void 0 : l.total) || 0
         };
       },
-      filterFields: fe,
-      sortFields: pe,
+      filterFields: pe,
+      sortFields: fe,
       defaultParams: o.params,
       defaultData: o.defaultData,
       manual: o.manual,
       formatParams: o.beforeSearchSubmit,
       pagination: o.pagination
-    }), he = () => {
+    }), Se = () => {
       var a;
-      let e = ((a = o.columns) == null ? void 0 : a.filter((l) => !l.hideInTable)) || [];
-      function t(l, d) {
-        return l.map((n) => ({
-          resizable: Ze(n.resizable) ? n.resizable : o.columnResizable,
-          ...ae(_e(n), ["ellipsis"]),
+      let e = ((a = o.columns) == null ? void 0 : a.filter((r) => !r.hideInTable)) || [];
+      function l(r, d) {
+        return r.map((n) => ({
+          resizable: Ye(n.resizable) ? n.resizable : o.columnResizable,
+          ...ae(He(n), ["ellipsis"]),
           ...be(n),
           fixed: d ? d.fixed : n.fixed,
-          title: qe(n, O("table-header", "title"), v.headerCell, r(de).colorPrimary),
+          title: Ue(n, E("table-header", "title"), C.headerCell, t(se).colorPrimary),
           customRender({
-            value: p,
-            ...h
+            value: c,
+            ...b
           }) {
-            var G, M;
-            const q = Ue(n), xe = Ge({
+            var q, M;
+            const H = qe(n), Be = Me({
               ...n,
-              valueType: q
+              valueType: H
             }, {
-              value: p,
-              ...h
-            }), Be = Me(q, xe, h.record, r(L)), U = ((G = n.renderText) == null ? void 0 : G.call(n, {
-              value: p,
-              ...h
-            })) || p, ke = n.renderText ? m(J, null, [(M = n.renderText) == null ? void 0 : M.call(n, {
-              value: p,
-              ...h
-            })]) : Be;
-            let N = ve(n, U, ke);
-            return n.customRender && (N = n.customRender({
-              value: p,
-              ...h,
+              value: c,
+              ...b
+            }), xe = Ge(H, Be, b.record, t(K)), U = ((q = n.renderText) == null ? void 0 : q.call(n, {
+              value: c,
+              ...b
+            })) || c, ke = n.renderText ? f(G, null, [(M = n.renderText) == null ? void 0 : M.call(n, {
+              value: c,
+              ...b
+            })]) : xe;
+            let P = Ce(n, U, ke);
+            return n.customRender && (P = n.customRender({
+              value: c,
+              ...b,
               column: n,
-              originalNode: N,
+              originalNode: P,
               originalText: U
-            })), N;
+            })), P;
           },
-          children: t(n.children || [], d || n)
+          children: l(n.children || [], d || n)
         }));
       }
-      return t(e);
+      return l(e);
     };
     Ne(() => {
-      const e = he();
-      u.value = e, V.value = e;
+      const e = Se();
+      u.value = e, A.value = e;
     });
-    const Se = s(() => {
-      var t, a;
-      if (o.adaptive && (c.total > 0 || ((t = o.dataSource) == null ? void 0 : t.length)))
+    const he = s(() => {
+      var l, a;
+      if (o.adaptive && (g.total > 0 || ((l = o.dataSource) == null ? void 0 : l.length)))
         return {
-          y: r(ie),
+          y: t(ue),
           x: ((a = o.scroll) == null ? void 0 : a.x) || "100%"
         };
       if (o.scroll)
@@ -291,29 +296,26 @@ const ko = /* @__PURE__ */ ze({
       var e;
       if (o.tableLayout)
         return o.tableLayout;
-      if ((e = o.columns) != null && e.some((t) => t.ellipsis))
+      if ((e = o.columns) != null && e.some((l) => l.ellipsis))
         return "fixed";
-    }), P = s(() => {
+    }), _ = s(() => {
       var a;
-      const e = r(_), t = r(C);
+      const e = t(j), l = t(v);
       return {
         ...o,
         ...e,
         rowSelection: o.rowSelection === !0 || ((a = o.rowSelection) == null ? void 0 : a.mode) === "internal" ? {
-          ...t,
+          ...l,
           // tips 如果是前端分页，则默认会走缓存
-          preserveSelectedRowKeys: b(o.dataSource) ? t.preserveSelectedRowKeys : !0
+          preserveSelectedRowKeys: y(o.dataSource) ? l.preserveSelectedRowKeys : !0
         } : Je(o.rowSelection),
-        loading: b(o.loading) ? e.loading : o.loading,
+        loading: y(o.loading) ? e.loading : o.loading,
         pagination: o.pagination === !1 ? !1 : e.pagination,
-        scroll: r(Se)
+        scroll: t(he)
       };
-    }), Re = s(() => {
-      var e;
-      return [i(), o.card ? null : i("wrapper"), o.adaptive ? i("adaptive") : null, (e = D.value) != null && e.visible ? ue("horizontal", "scrollable") : null].filter(Boolean);
-    });
-    function ve(e, t, a) {
-      return oe.includes(e.valueType) ? a : e.copyable || e.ellipsis ? m(ro, {
+    }), Re = s(() => [i(), o.card ? null : i("wrapper"), o.adaptive ? i("adaptive") : null, V ? de(`sticky-${oo === 0 ? "absolute" : "relative"}`) : null].filter(Boolean));
+    function Ce(e, l, a) {
+      return oe.includes(e.valueType) ? a : e.copyable || e.ellipsis ? f(to, {
         copyable: e.copyable,
         ellipsis: e.ellipsis ? $e(e.ellipsis) ? {
           tooltip: a,
@@ -325,62 +327,55 @@ const ko = /* @__PURE__ */ ze({
         content: a
       }, null) : a;
     }
-    I(() => r(c).loading, (e) => {
-      var t;
-      (t = o.onLoadingChange) == null || t.call(o, e);
-    }), I(() => r(c).records, () => {
-      var e;
-      $.value = (e = A.value) == null ? void 0 : e.querySelector(".ant-table-container > div:last-child");
-    }, {
-      flush: "post",
-      immediate: !0,
-      deep: !0
-    }), I(() => o.dataSource, (e) => {
+    J(() => t(g).loading, (e) => {
+      var l;
+      (l = o.onLoadingChange) == null || l.call(o, e);
+    }), J(() => o.dataSource, (e) => {
       ge(e);
     }, {
       immediate: !0
     });
-    function Ce(e) {
-      var t, a, l;
-      (l = (a = (t = z.value) == null ? void 0 : t.apForm) == null ? void 0 : a.setFieldsValue) == null || l.call(a, e);
+    function ve(e) {
+      var l, a, r;
+      (r = (a = (l = z.value) == null ? void 0 : l.apForm) == null ? void 0 : a.setFieldsValue) == null || r.call(a, e);
     }
     function Te(e = !1) {
-      var a, l, d;
-      const t = e ? "getFieldsValueTransformed" : "getFieldsValue";
-      return (d = (l = (a = z.value) == null ? void 0 : a.apForm) == null ? void 0 : l[t]) == null ? void 0 : d.call(l, !0);
+      var a, r, d;
+      const l = e ? "getFieldsValueTransformed" : "getFieldsValue";
+      return (d = (r = (a = z.value) == null ? void 0 : a.apForm) == null ? void 0 : r[l]) == null ? void 0 : d.call(r, !0);
     }
     function Fe() {
-      return r(u);
+      return t(u);
     }
     return ne({
-      submit: () => W(),
-      reset: () => H(),
+      submit: () => $(),
+      reset: () => W(),
       refresh: () => ye(),
-      setSearchFormValues: Ce,
+      setSearchFormValues: ve,
       getSearchFormValues: Te,
       getShownColumns: Fe,
-      dataSource: s(() => r(c).records),
+      dataSource: s(() => t(g).records),
       rowSelection: {
-        selectedRows: s(() => r(T)),
+        selectedRows: s(() => t(T)),
         ...F
       }
-    }), (e, t) => (y(), x("div", {
-      ref_key: "apTableRef",
-      ref: A,
-      class: g(Re.value)
-    }, [r(b)(e.dataSource) && e.searchForm !== !1 && j.value.length > 0 ? (y(), x("div", {
+    }), (e, l) => (p(), B("div", {
+      ref_key: "tableWrapperRef",
+      ref: O,
+      class: m(Re.value)
+    }, [t(y)(e.dataSource) && e.searchForm !== !1 && D.value.length > 0 ? (p(), B("div", {
       key: 0,
-      class: g(e.card ? r(B)("search-wrapper") : null),
+      class: m(e.card ? t(x)("search-wrapper") : null),
       style: Q(e.searchFormWrapperStyle)
-    }, [m(r(Ae).SearchForm, S(e.searchForm || {}, {
+    }, [f(t(Ae).SearchForm, h(e.searchForm || {}, {
       ref_key: "formRef",
       ref: z,
       "custom-reset": "",
-      "submit-loading": r(_).loading,
-      onSubmit: r(W),
-      onReset: r(H)
+      "submit-loading": t(j).loading,
+      onSubmit: t($),
+      onReset: t(W)
     }), X({
-      default: w(() => [(y(!0), x(J, null, Y(j.value, (a) => (y(), Z(Ie(a.renderNode.Comp), S({
+      default: w(() => [(p(!0), B(G, null, Y(D.value, (a) => (p(), Z(Ie(a.renderNode.Comp), h({
         key: a.dataIndex,
         item: a,
         ref_for: !0
@@ -389,66 +384,70 @@ const ko = /* @__PURE__ */ ze({
         "custom-render": a.renderNode.render
       }), null, 16, ["item", "span", "custom-render"]))), 128))]),
       _: 2
-    }, [v.searchFormExtra ? {
+    }, [C.searchFormExtra ? {
       name: "extra",
       fn: w(() => [R(e.$slots, "searchFormExtra")]),
       key: "0"
-    } : void 0]), 1040, ["submit-loading", "onSubmit", "onReset"])], 6)) : ee("", !0), E("div", {
+    } : void 0]), 1040, ["submit-loading", "onSubmit", "onReset"])], 6)) : ee("", !0), N("div", {
       ref_key: "contentRef",
-      ref: ce,
-      class: g([r(B)("table-wrapper"), e.card ? r(B)("table-wrapper-card") : null]),
+      ref: ie,
+      class: m([t(x)("table-wrapper"), e.card ? t(x)("table-wrapper-card") : null]),
       style: Q(e.tableWrapperStyle)
-    }, [E("div", {
-      class: g(r(i)("header-wrapper"))
-    }, [e.settings ? (y(), x("div", {
+    }, [N("div", {
+      class: m(t(i)("header-wrapper"))
+    }, [e.settings ? (p(), B("div", {
       key: 0,
-      class: g(r(i)("header"))
-    }, [E("div", {
-      class: g(r(O)("header", "title"))
-    }, [R(e.$slots, "title", S({
-      selectedRows: r(T),
-      selectedRowKeys: r(C).selectedRowKeys,
+      class: m(t(i)("header"))
+    }, [N("div", {
+      class: m(t(E)("header", "title"))
+    }, [R(e.$slots, "title", h({
+      selectedRows: t(T),
+      selectedRowKeys: t(v).selectedRowKeys,
       shownColumns: u.value
-    }, F))], 2), v.title ? (y(), Z(r(Oe), {
+    }, F))], 2), C.title ? (p(), Z(t(Oe), {
       key: 0,
       type: "vertical"
-    })) : ee("", !0), m(to, {
+    })) : ee("", !0), f(lo, {
       config: e.settings === !0 ? {} : e.settings
-    }, null, 8, ["config"])], 2)) : R(e.$slots, "title", S({
+    }, null, 8, ["config"])], 2)) : R(e.$slots, "title", h({
       key: 1,
-      selectedRows: r(T),
-      selectedRowKeys: r(C).selectedRowKeys,
+      selectedRows: t(T),
+      selectedRowKeys: t(v).selectedRowKeys,
       shownColumns: u.value
-    }, F))], 2), m(r(Le), S({
-      class: r(i)("table")
-    }, P.value, {
+    }, F))], 2), f(t(Le), h({
+      ref_key: "antdTableRef",
+      ref: L,
+      class: t(i)("table")
+    }, _.value, {
       size: k.value,
       "table-layout": we.value,
       columns: u.value,
-      onResizeColumn: t[0] || (t[0] = (a, l) => l.width = a)
+      onResizeColumn: l[0] || (l[0] = (a, r) => r.width = a)
     }), X({
       summary: w(() => [R(e.$slots, "summary", {
         columns: u.value,
-        records: P.value.dataSource,
-        selectedRows: r(T)
+        records: _.value.dataSource,
+        selectedRows: t(T)
       })]),
-      bottomPaginationTop: w(() => {
-        var a;
-        return [m(r(lo), {
+      _: 2
+    }, [t(V) ? {
+      name: "bottomPaginationTop",
+      fn: w(() => {
+        var a, r;
+        return [f(t(no), {
           ref_key: "scrollBarRef",
-          ref: D,
-          "scroll-container": $.value,
-          direction: "horizontal",
-          "extra-size": (a = P.value.scroll) != null && a.y ? r(se) : 0
-        }, null, 8, ["scroll-container", "extra-size"])];
+          ref: ce,
+          "scroll-container": (r = (a = L.value) == null ? void 0 : a.table) == null ? void 0 : r.scrollBodyRef,
+          direction: "horizontal"
+        }, null, 8, ["scroll-container"])];
       }),
-      _: 2
-    }, [Y(r(ae)(v, ["title", "searchFormExtra", "headerCell", "summary"]), (a, l) => ({
-      name: l,
-      fn: w((d) => [R(e.$slots, l, Ee(Ke(d || {})))])
+      key: "0"
+    } : void 0, Y(t(ae)(C, ["title", "searchFormExtra", "headerCell", "summary"]), (a, r) => ({
+      name: r,
+      fn: w((d) => [R(e.$slots, r, Ee(Ke(d || {})))])
     }))]), 1040, ["class", "size", "table-layout", "columns"])], 6)], 2));
   }
 });
 export {
-  ko as default
+  No as default
 };

package/es/src/ap-table/hooks/use-sticky-scroll.d.ts

@@ -0,0 +1,6 @@
+import { ScrollBarExpose } from '../../scroll-bar';
+import { Ref, ComputedRef } from 'vue';
+export declare const useStickyScroll: (tableWrapper: Ref<HTMLElement | undefined>) => {
+    isStickyMode: ComputedRef<boolean>;
+    scrollBarRef: Ref<ScrollBarExpose | undefined, ScrollBarExpose | undefined>;
+};

package/es/src/ap-table/hooks/use-sticky-scroll.mjs

@@ -0,0 +1,16 @@
+import { ref as o, computed as e } from "vue";
+const i = "ap-table--sticky", r = (t) => {
+  const c = o();
+  return {
+    isStickyMode: e(
+      () => {
+        var s;
+        return ((s = t.value) == null ? void 0 : s.classList.contains(i)) || !1;
+      }
+    ),
+    scrollBarRef: c
+  };
+};
+export {
+  r as useStickyScroll
+};

package/es/src/ap-table/hooks/use-table-paging-ng.mjs

@@ -5,7 +5,7 @@ import { parseFieldValue as ae, dataIndexToStr as se, isEqualCustom as ce } from
 import { isArray as N, isEqualWith as ie } from "lodash-unified";
 import { useLocale as le } from "../../config-provider/hooks/use-locale.mjs";
 import { useNamespace as ue } from "../../config-provider/hooks/use-namespace.mjs";
-const S = 1, L = 100;
+const S = 1, L = 10;
 function fe(g) {
   const l = {};
   return g && (g === !0 ? (l.current = S, l.pageSize = L) : (l.current = g.defaultCurrent || S, l.pageSize = g.defaultPageSize || L)), l;

package/es/src/config-provider/css-var.d.ts

@@ -1,4 +1,5 @@
 import { RecursivePartial } from '../type';
+export declare const scrollbarSize: number;
 declare const aplusCssVarObj: {
     'ap-form': {
         bordered: {

package/es/src/config-provider/css-var.mjs

@@ -231,5 +231,6 @@ export {
   m as adminCssVar,
   g as aplusCssVar,
   n as generateCssVar,
+  l as scrollbarSize,
   D as setCSSVariables
 };

package/es/src/scroll-bar/index.vue.d.ts

@@ -4,6 +4,7 @@ declare const _default: DefineComponent<ScrollBarProps, {
     currentScroll: ComputedRef<number | undefined>;
     scroll: ((percent: number) => void) | undefined;
     visible: ComputedRef<boolean>;
+    rootElement: ComputedRef<HTMLElement | undefined>;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ScrollBarProps> & Readonly<{}>, {
     disabled: boolean;
     direction: ScrollBarDirection;

package/es/src/scroll-bar/index.vue.mjs

@@ -1,7 +1,7 @@
-import { defineComponent as g, toRef as x, ref as d, watchEffect as _, unref as i, watch as k, computed as p, openBlock as C, createBlock as B, mergeProps as L, createCommentVNode as R } from "vue";
+import { defineComponent as g, toRef as x, ref as p, watchEffect as _, unref as a, watch as k, computed as s, openBlock as C, createBlock as B, mergeProps as L, createCommentVNode as R } from "vue";
 import "./internal.vue2.mjs";
 import { omit as w } from "lodash-unified";
-import { getScrollable as s, ensureRangeValue as y } from "./utils/index.mjs";
+import { getScrollable as u, ensureRangeValue as y } from "./utils/index.mjs";
 import { useResizeObserver as E } from "@vueuse/core";
 import N from "./internal.vue.mjs";
 const j = /* @__PURE__ */ g({
@@ -25,18 +25,18 @@ const j = /* @__PURE__ */ g({
     onScrollEnd: {}
   },
   setup(S, { expose: m }) {
-    var f;
-    const r = S, o = x(r, "scrollContainer"), l = d(), n = d(r.barLength);
+    var d;
+    const r = S, o = x(r, "scrollContainer"), l = p(), n = p(r.barLength);
     function v() {
       if (!o.value || !l.value) return;
-      const { totalSize: e, visibleSize: t, distance: a } = s(
+      const { totalSize: e, visibleSize: t, distance: c } = u(
         o.value,
         r.direction
-      ), c = a / (e + r.extraSize - t || 1) * 100;
-      l.value.scroll(c);
+      ), i = c / (e + r.extraSize - t || 1) * 100;
+      l.value.scroll(i);
     }
-    function u() {
-      const { visibleSize: e, totalSize: t } = s(
+    function f() {
+      const { visibleSize: e, totalSize: t } = u(
         o.value,
         r.direction
       );
@@ -45,11 +45,11 @@ const j = /* @__PURE__ */ g({
       );
     }
     E(o, () => {
-      u();
+      f();
     }), _(
       () => {
-        const e = i(o.value);
-        e && (u(), e.addEventListener("scroll", v));
+        const e = a(o.value);
+        e && (f(), e.addEventListener("scroll", v));
       },
       { flush: "post" }
     ), k(
@@ -59,28 +59,32 @@ const j = /* @__PURE__ */ g({
       }
     );
     function b(e) {
-      const t = i(o);
+      const t = a(o);
       if (!t) return;
-      const { totalSize: a, visibleSize: c, topOrLeft: h } = s(
+      const { totalSize: c, visibleSize: i, topOrLeft: h } = u(
         t,
         r.direction
       );
-      if (a <= c) return;
+      if (c <= i) return;
       const z = `scroll${h}`;
-      t[z] = e * (a + r.extraSize - c) / 100;
+      t[z] = e * (c + r.extraSize - i) / 100;
     }
     return m({
-      currentScroll: p(() => {
+      currentScroll: s(() => {
         var e;
-        return i((e = l.value) == null ? void 0 : e.currentScroll);
+        return a((e = l.value) == null ? void 0 : e.currentScroll);
       }),
-      scroll: (f = l.value) == null ? void 0 : f.scroll,
-      visible: p(() => n.value < 100)
+      scroll: (d = l.value) == null ? void 0 : d.scroll,
+      visible: s(() => n.value < 100),
+      rootElement: s(() => {
+        var e;
+        return a((e = l.value) == null ? void 0 : e.container);
+      })
     }), (e, t) => n.value !== 100 ? (C(), B(N, L({
       key: 0,
       ref_key: "barRef",
       ref: l
-    }, i(w)(r, ["onScroll", "extraSize", "scrollContainer"]), {
+    }, a(w)(r, ["onScroll", "extraSize", "scrollContainer"]), {
       "bar-length": n.value,
       onScroll: b
     }), null, 16, ["bar-length"])) : R("", !0);