@aplus-frontend/ui 6.42.1 → 7.0.0-beta.1

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

@@ -1,18 +1,19 @@
-import { defineComponent as fe, ref as ue, reactive as he, computed as v, unref as l, watchEffect as _, watch as pe, createElementBlock as ye, openBlock as P, withModifiers as M, normalizeStyle as A, normalizeClass as B, createElementVNode as z, renderSlot as me, createBlock as L, createCommentVNode as O, mergeProps as T } from "vue";
+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 de from "./hooks/use-scroll-wrapper.mjs";
-import { isString as j } from "lodash-unified";
-import { useElementSize as F, useRafFn as ve } from "@vueuse/core";
+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 xe } from "./hooks/use-scroll-back.mjs";
+import { useScrollBack as we } from "./hooks/use-scroll-back.mjs";
 import { useScrollSmooth as Be } from "./hooks/use-scroll-smooth.mjs";
-import { getElementScrollOffset as we } from "./utils/index.mjs";
-import { useNamespace as ge } from "../config-provider/hooks/use-namespace.mjs";
-import H from "../scroll-bar/internal.vue.mjs";
-const Ye = /* @__PURE__ */ fe({
+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: {
@@ -25,41 +26,41 @@ const Ye = /* @__PURE__ */ fe({
     yBarProps: { default: () => ({}) },
     onWheel: {}
   },
-  setup(I, { expose: q }) {
-    const o = I, G = {
+  setup(H, { expose: q }) {
+    const o = H, G = {
       direction: "vertical",
       rate: 1,
       repeat: !0
-    }, { b: J, e: w, em: W } = ge("scroll-view"), u = ue(), c = he({ x: 30, y: 30 });
-    let g = !1;
+    }, { 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: K,
-      yBarRef: Q,
+      xBarRef: Q,
+      yBarRef: U,
       containerRef: s,
       scrollYBar: h,
       scrollXBar: p,
-      updateMaxScrollDistance: U
-    } = de(), { width: Z, height: ee } = F(u), { width: te, height: re } = F(s), { start: N } = xe({
+      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), S();
+        await R(200), g();
       }
     }), { start: $ } = Be({
       scrollOffset: r,
       maxScrollDistance: i,
       onScroll(e, t) {
-        V.value && (y(), g = !0), e && p(), t && h();
+        V.value && (y(), S = !0), e && p(), t && h();
       },
       async onScrollEnd() {
-        g && (await R(200), S(), g = !1);
+        S && (await R(200), g(), S = !1);
       }
-    }), { resume: S, pause: y, isActive: V } = ve(
+    }), { resume: g, pause: y, isActive: V } = xe(
       () => {
         if (!o.autoPlay) {
           y();
@@ -92,16 +93,16 @@ const Ye = /* @__PURE__ */ fe({
         }
       },
       { immediate: !0 }
-    ), m = v(() => o.showXBar && c.x !== 100), x = v(() => o.showYBar && c.y !== 100), oe = 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,
+    ), 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), S());
+      V.value && (y(), await R(500), g());
     }
-    async function ae(e) {
-      if (l(x))
+    async function le(e) {
+      if (a(x))
         e.preventDefault(), e.stopPropagation();
       else
         return;
@@ -111,8 +112,8 @@ const Ye = /* @__PURE__ */ fe({
         i.y
       ), h(), o.onWheel?.("vertical", r.y), b();
     }
-    function le(e) {
-      if (l(m))
+    function ie(e) {
+      if (a(m))
         e.preventDefault(), e.stopPropagation();
       else
         return;
@@ -143,12 +144,12 @@ const Ye = /* @__PURE__ */ fe({
       }
     }
     function X(e, t) {
-      const a = l(s), d = l(u);
-      if (!a || !d) return;
-      const { visibleSize: C, totalSize: D } = k(a, 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, ce = t === "vertical";
-      if (b(), ce) {
+      const Y = (D - C) * e / 100, fe = t === "vertical";
+      if (b(), fe) {
         r.y = Y;
         return;
       }
@@ -156,40 +157,40 @@ const Ye = /* @__PURE__ */ fe({
     }
     _(
       () => {
-        l(s.value) && E();
+        a(s.value) && E();
       },
       { flush: "post" }
-    ), pe(
+    ), ye(
       () => [
-        Z.value,
         ee.value,
         te.value,
-        re.value
+        re.value,
+        oe.value
       ],
       () => {
-        E(), U();
+        E(), Z();
       }
     ), _(() => {
       u.value && (u.value.style.transform = `translate3d(-${r.x}px, -${r.y}px, 0px)`);
     });
-    function ie(e, t) {
+    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 ne({ smooth: e, left: t, top: a }) {
-      e ? $({ x: t, y: a }) : (f(t) && (r.x = t), f(a) && (r.y = a));
+    function se({ smooth: e, left: t, top: l }) {
+      e ? $({ x: t, y: l }) : (f(t) && (r.x = t), f(l) && (r.y = l));
     }
-    function se(e, t = "start") {
-      const a = we(
+    function ce(e, t = "start") {
+      const l = Se(
         s.value,
         e,
         t
       ), d = {};
       m.value && (d.x = n(
-        r.x + a.x,
+        r.x + l.x,
         0,
         i.x
       )), x.value && (d.y = n(
-        r.y + a.y,
+        r.y + l.y,
         0,
         i.y
       )), $(d);
@@ -197,55 +198,55 @@ const Ye = /* @__PURE__ */ fe({
     return q({
       scrollTop: v(() => r.y),
       scrollLeft: v(() => r.x),
-      scroll: ie,
-      scrollTo: ne,
-      scrollIntoView: se
-    }), (e, t) => (P(), ye("div", {
+      scroll: ne,
+      scrollTo: se,
+      scrollIntoView: ce
+    }), (e, t) => (P(), me("div", {
       ref_key: "containerRef",
       ref: s,
-      class: B(l(J)()),
-      style: A(oe.value),
+      class: w([a(J)(), a(K)]),
+      style: A(ae.value),
       onWheel: [
-        M(ae, ["exact"]),
-        M(le, ["shift"])
+        M(le, ["exact"]),
+        M(ie, ["shift"])
       ]
     }, [
       z("div", {
         ref_key: "contentRef",
         ref: u,
-        class: B(l(w)("content"))
+        class: w(a(B)("content"))
       }, [
-        me(e.$slots, "default")
+        de(e.$slots, "default")
       ], 2),
       z("div", {
-        class: B([l(w)("bar-wrapper"), l(W)("bar-wrapper", "vertical")]),
+        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(l(H), T({
+        x.value ? (P(), L(a(F), I({
           key: 0,
           ref_key: "yBarRef",
-          ref: Q
+          ref: U
         }, e.yBarProps, {
           "bar-length": c.y,
-          onScroll: t[0] || (t[0] = (a) => X(a, "vertical"))
+          onScroll: t[0] || (t[0] = (l) => X(l, "vertical"))
         }), null, 16, ["bar-length"])) : O("", !0)
       ], 6),
       z("div", {
-        class: B([l(w)("bar-wrapper"), l(W)("bar-wrapper", "horizontal")])
+        class: w([a(B)("bar-wrapper"), a(W)("bar-wrapper", "horizontal")])
       }, [
-        m.value ? (P(), L(l(H), T({
+        m.value ? (P(), L(a(F), I({
           key: 0,
           ref_key: "xBarRef",
-          ref: K
+          ref: Q
         }, e.xBarProps, {
           direction: "horizontal",
           "bar-length": c.x,
-          onScroll: t[1] || (t[1] = (a) => X(a, "horizontal"))
+          onScroll: t[1] || (t[1] = (l) => X(l, "horizontal"))
         }), null, 16, ["bar-length"])) : O("", !0)
       ], 2)
     ], 38));
   }
 });
 export {
-  Ye as default
+  Ae as default
 };

package/es/src/scroll-view/style/index.d.ts

@@ -0,0 +1,5 @@
+import { GenStyleFunc } from '../../design-token/interface';
+import { Ref } from 'vue';
+export declare const genScrollViewStyle: GenStyleFunc;
+declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
+export default _default;

package/es/src/scroll-view/style/index.mjs

@@ -0,0 +1,30 @@
+import { genComponentStyleHook as e } from "../../utils/cssinjs/index.mjs";
+const n = (o) => {
+  const { componentCls: t } = o;
+  return {
+    [t]: {
+      position: "relative",
+      overflow: "hidden",
+      [`${t}__content`]: {
+        display: "inline-block"
+      },
+      [`${t}__bar-wrapper`]: {
+        position: "absolute",
+        "&--horizontal": {
+          left: 0,
+          bottom: 0,
+          width: "100%"
+        },
+        "&--vertical": {
+          top: 0,
+          right: 0,
+          height: "100%"
+        }
+      }
+    }
+  };
+}, i = e("ScrollView", (o) => [n(o)]);
+export {
+  i as default,
+  n as genScrollViewStyle
+};

package/es/src/splitter/Splitter.vue2.mjs

@@ -1,18 +1,19 @@
-import { defineComponent as j, ref as q, unref as a, computed as _, createBlock as y, openBlock as r, withCtx as g, createElementVNode as G, normalizeClass as b, normalizeStyle as J, createElementBlock as p, createCommentVNode as h, Fragment as d, renderList as k, createVNode as K, mergeProps as Q, resolveDynamicComponent as T } from "vue";
-import { useItems as X } from "./hooks/useItems.mjs";
+import { defineComponent as q, ref as G, unref as a, computed as _, createBlock as y, openBlock as r, withCtx as g, createElementVNode as J, normalizeClass as h, normalizeStyle as K, createElementBlock as p, createCommentVNode as b, Fragment as d, renderList as k, createVNode as Q, mergeProps as T, resolveDynamicComponent as X } from "vue";
+import { useItems as Y } from "./hooks/useItems.mjs";
 import "../resize-observer/index.mjs";
-import { useSizes as Y } from "./hooks/useSizes.mjs";
-import { useResizable as Z } from "./hooks/useResizable.mjs";
-import { useResize as x } from "./hooks/useResize.mjs";
+import { useSizes as Z } from "./hooks/useSizes.mjs";
+import { useResizable as x } from "./hooks/useResizable.mjs";
+import { useResize as ee } from "./hooks/useResize.mjs";
 import "../config-provider/index.mjs";
 import "./Panel.vue.mjs";
 import "./SplitBar.vue.mjs";
-import { omit as ee } from "lodash-unified";
-import { useNamespace as te } from "../config-provider/hooks/use-namespace.mjs";
-import ae from "../resize-observer/index.vue.mjs";
-import oe from "./Panel.vue2.mjs";
-import se from "./SplitBar.vue2.mjs";
-const Ce = /* @__PURE__ */ j({
+import { omit as te } from "lodash-unified";
+import ae from "./style/index.mjs";
+import { useNamespace as se } from "../config-provider/hooks/use-namespace.mjs";
+import oe from "../resize-observer/index.vue.mjs";
+import ne from "./Panel.vue2.mjs";
+import re from "./SplitBar.vue2.mjs";
+const ge = /* @__PURE__ */ q({
   name: "Splitter",
   __name: "Splitter",
   props: {
@@ -27,64 +28,64 @@ const Ce = /* @__PURE__ */ j({
     lazy: { type: Boolean }
   },
   setup(E) {
-    const n = E, { b: c } = te("splitter"), i = X(), l = q(), N = (e) => {
-      const { offsetWidth: s, offsetHeight: o } = e.target, t = n.layout === "vertical" ? o : s;
+    const n = E, { b: c } = se("splitter"), I = ae("splitter"), i = Y(), l = G(), N = (e) => {
+      const { offsetWidth: o, offsetHeight: s } = e.target, t = n.layout === "vertical" ? s : o;
       l.value !== 0 && (l.value = t);
     }, [
-      I,
-      z,
-      v,
       O,
+      u,
+      v,
       P,
-      M
-    ] = Y(i, l), m = Z(i, z, !1), [B, U, $, w, C] = x(
+      M,
+      B
+    ] = Z(i, l), m = x(i, u, !1), [U, $, w, V, C] = ee(
       i,
       m,
       v,
       l,
-      M,
+      B,
       !1
-    ), V = (e) => {
-      B(e), n.onResizeStart?.(a(z));
-    }, A = (e, s) => {
-      const o = U(e, s);
-      n.onResize?.(o);
-    }, D = () => {
-      $(), n.onResizeEnd?.(a(z));
-    }, F = (e, s) => {
-      const o = w(e, s);
-      n.onResize?.(o), n.onResizeEnd?.(o);
-    }, H = _(() => [c(), n.className, c(n.layout)]), R = _(() => {
+    ), A = (e) => {
+      U(e), n.onResizeStart?.(a(u));
+    }, D = (e, o) => {
+      const s = $(e, o);
+      n.onResize?.(s);
+    }, F = () => {
+      w(), n.onResizeEnd?.(a(u));
+    }, H = (e, o) => {
+      const s = V(e, o);
+      n.onResize?.(s), n.onResizeEnd?.(s);
+    }, L = _(() => [c(), n.className, c(n.layout), I.value]), R = _(() => {
       const e = [];
-      let s = 0;
-      for (let o = 0; o < i.value.length; o += 1)
-        s += a(v)[o], e.push(s);
+      let o = 0;
+      for (let s = 0; s < i.value.length; s += 1)
+        o += a(v)[s], e.push(o);
       return e;
     }), f = (e) => {
-      const s = a(R), o = a(O), t = a(P);
+      const o = a(R), s = a(P), t = a(M);
       return {
-        minStart: (s[e - 1] || 0) + o[e],
-        minEnd: (s[e + 1] || 100) - t[e + 1],
-        maxStart: (s[e - 1] || 0) + t[e],
-        maxEnd: (s[e + 1] || 100) - o[e + 1]
+        minStart: (o[e - 1] || 0) + s[e],
+        minEnd: (o[e + 1] || 100) - t[e + 1],
+        maxStart: (o[e - 1] || 0) + t[e],
+        maxEnd: (o[e + 1] || 100) - s[e + 1]
       };
     };
-    return (e, s) => (r(), y(a(ae), { onResize: N }, {
+    return (e, o) => (r(), y(a(oe), { onResize: N }, {
       default: g(() => [
-        G("div", {
-          style: J(e.style),
-          class: b(H.value)
+        J("div", {
+          style: K(e.style),
+          class: h(L.value)
         }, [
-          (r(!0), p(d, null, k(a(i), (o, t) => (r(), p(d, { key: t }, [
-            K(oe, Q({ ref_for: !0 }, a(ee)(o, "_child"), {
-              size: a(I)[t]
+          (r(!0), p(d, null, k(a(i), (s, t) => (r(), p(d, { key: t }, [
+            Q(ne, T({ ref_for: !0 }, a(te)(s, "_child"), {
+              size: a(O)[t]
             }), {
               default: g(() => [
-                (r(!0), p(d, null, k(o._child, (u, S) => (r(), y(T(u), { key: S }))), 128))
+                (r(!0), p(d, null, k(s._child, (z, S) => (r(), y(X(z), { key: S }))), 128))
               ]),
               _: 2
             }, 1040, ["size"]),
-            a(m)[t] ? (r(), y(se, {
+            a(m)[t] ? (r(), y(re, {
               key: 0,
               lazy: e.lazy,
               index: t,
@@ -103,20 +104,20 @@ const Ce = /* @__PURE__ */ j({
               "start-collapsible": a(m)[t].startCollapsible,
               "end-collapsible": a(m)[t].endCollapsible,
               "container-size": l.value || 0,
-              onOffsetStart: V,
-              onOffsetUpdate: (u, S, L) => {
-                let W = e.layout === "vertical" ? L : S;
-                A(u, W);
+              onOffsetStart: A,
+              onOffsetUpdate: (z, S, W) => {
+                let j = e.layout === "vertical" ? W : S;
+                D(z, j);
               },
-              onOffsetEnd: D,
-              onCollapse: F
-            }, null, 8, ["lazy", "index", "active", "vertical", "resizable", "aria-now", "aria-min", "aria-max", "start-collapsible", "end-collapsible", "container-size", "onOffsetUpdate"])) : h("", !0)
+              onOffsetEnd: F,
+              onCollapse: H
+            }, null, 8, ["lazy", "index", "active", "vertical", "resizable", "aria-now", "aria-min", "aria-max", "start-collapsible", "end-collapsible", "container-size", "onOffsetUpdate"])) : b("", !0)
           ], 64))), 128)),
           typeof a(C) == "number" ? (r(), p("div", {
             key: 0,
             "aria-hidden": "",
-            class: b([a(c)("mask"), a(c)(`mask-${e.layout}`)])
-          }, null, 2)) : h("", !0)
+            class: h([a(c)("mask"), a(c)(`mask-${e.layout}`)])
+          }, null, 2)) : b("", !0)
         ], 6)
       ]),
       _: 1
@@ -124,5 +125,5 @@ const Ce = /* @__PURE__ */ j({
   }
 });
 export {
-  Ce as default
+  ge as default
 };

package/es/src/splitter/style/index.d.ts

@@ -0,0 +1,11 @@
+import { GenStyleFunc } from '../../design-token/interface';
+import { Ref } from 'vue';
+export type SplitterToken = {
+    splitterBarSize: number;
+    splitterTriggerSize: number;
+    splitterResizeSpinnerSize: number;
+    splitterSplitBarDraggableSize: number;
+};
+export declare const genSplitterStyle: GenStyleFunc<SplitterToken>;
+declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
+export default _default;