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

package/es/src/mask/index.vue.mjs

@@ -1,10 +1,11 @@
-import { defineComponent as V, ref as m, watch as v, watchEffect as _, onMounted as g, onUnmounted as O, createBlock as x, createCommentVNode as r, openBlock as y, Teleport as P, createElementVNode as d, normalizeStyle as k, unref as o, normalizeClass as i, createVNode as C, Transition as b, withCtx as h, createElementBlock as T, renderSlot as B } from "vue";
+import { defineComponent as M, ref as f, watch as v, watchEffect as V, onMounted as _, onUnmounted as g, createBlock as O, createCommentVNode as d, openBlock as y, Teleport as x, createElementVNode as i, normalizeStyle as k, unref as o, normalizeClass as u, createVNode as C, Transition as b, withCtx as h, createElementBlock as P, renderSlot as B } from "vue";
 import "../hooks/index.mjs";
 import "../config-provider/index.mjs";
-import { getMaskZIndex as U, lockScrollable as $ } from "./utils.mjs";
-import { useNamespace as w } from "../config-provider/hooks/use-namespace.mjs";
-import { useControllableValue as j } from "../hooks/useControllableValue.mjs";
-const J = /* @__PURE__ */ V({
+import { getMaskZIndex as T, lockScrollable as U } from "./utils.mjs";
+import $ from "./style/index.mjs";
+import { useNamespace as j } from "../config-provider/hooks/use-namespace.mjs";
+import { useControllableValue as D } from "../hooks/useControllableValue.mjs";
+const Q = /* @__PURE__ */ M({
   name: "ApMask",
   __name: "index",
   props: {
@@ -19,99 +20,99 @@ const J = /* @__PURE__ */ V({
     escClosable: { type: Boolean, default: !0 }
   },
   emits: ["update:open"],
-  setup(E, { emit: S }) {
-    const n = E, { b: z, e: u, em: I } = w("mask"), { b: c } = w("fade"), L = S, N = n.zIndex || U(), { value: t, updateValue: s } = j(
-      n,
-      L,
+  setup(w, { emit: E }) {
+    const t = w, { b: s, e: c, em: S } = j("mask"), z = $("mask"), I = E, L = t.zIndex || T(), { value: a, updateValue: r } = D(
+      t,
+      I,
       {
         valuePropName: "open"
       }
-    ), l = m(n.open);
+    ), l = f(t.open);
     v(
-      () => t.value,
+      () => a.value,
       (e) => {
         e && (l.value = e);
       }
     );
-    const p = m();
+    const p = f();
     v(p, (e) => {
-      e && e.addEventListener("wheel", (a) => {
-        a.stopPropagation(), a.preventDefault();
+      e && e.addEventListener("wheel", (n) => {
+        n.stopPropagation(), n.preventDefault();
       });
-    }), _((e) => {
-      if (!t.value)
+    }), V((e) => {
+      if (!a.value)
         return;
-      const a = $();
+      const n = U();
       e(() => {
-        a?.();
+        n?.();
       });
+    }), _(() => {
+      document.addEventListener("keydown", m);
     }), g(() => {
-      document.addEventListener("keydown", f);
-    }), O(() => {
-      document.removeEventListener("keydown", f);
+      document.removeEventListener("keydown", m);
     });
-    function A() {
+    function N() {
       l.value = !1;
     }
-    async function M() {
-      if (n.closable) {
-        if (n.onBeforeClose) {
-          await n.onBeforeClose() && s(!1);
+    async function A() {
+      if (t.closable) {
+        if (t.onBeforeClose) {
+          await t.onBeforeClose() && r(!1);
           return;
         }
-        s(!1);
+        r(!1);
       }
     }
-    function f(e) {
-      !t.value || !(n.closable && n.escClosable) || e.key === "Escape" && s(!1);
+    function m(e) {
+      !a.value || !(t.closable && t.escClosable) || e.key === "Escape" && r(!1);
     }
-    return (e, a) => !e.deleteOnClose || l.value ? (y(), x(P, {
+    return (e, n) => !e.deleteOnClose || l.value ? (y(), O(x, {
       key: 0,
       to: "body"
     }, [
-      d("div", {
+      i("div", {
         ref_key: "wrapper",
         ref: p,
-        class: i(o(z)()),
-        style: k({ zIndex: o(N), visibility: l.value ? void 0 : "hidden" })
+        class: u([o(s)(), o(z)]),
+        style: k({ zIndex: o(L), visibility: l.value ? void 0 : "hidden" })
       }, [
         C(b, {
           appear: "",
-          name: o(c)(),
-          onAfterLeave: A
+          name: o(s)("fade"),
+          onAfterLeave: N
         }, {
           default: h(() => [
-            o(t) ? (y(), T("div", {
+            o(a) ? (y(), P("div", {
               key: 0,
-              class: i([o(u)("mask"), { [o(I)("mask", "disabled")]: e.disabled }]),
-              onClick: M
+              class: u([o(c)("mask"), { [o(S)("mask", "disabled")]: e.disabled }]),
+              onClick: A
             }, [
               B(e.$slots, "mask", {}, () => [
-                d("div", {
-                  class: i(o(u)("mask-inner"))
+                i("div", {
+                  class: u(o(c)("mask-inner"))
                 }, null, 2)
               ])
-            ], 2)) : r("", !0)
+            ], 2)) : d("", !0)
           ]),
           _: 3
         }, 8, ["name"]),
-        d("div", {
+        i("div", {
           style: k(e.contentStyle)
         }, [
           C(b, {
             appear: "",
-            name: o(c)()
+            name: o(s)("fade")
           }, {
             default: h(() => [
-              o(t) ? B(e.$slots, "default", { key: 0 }) : r("", !0)
+              o(a) ? B(e.$slots, "default", { key: 0 }) : d("", !0)
             ]),
             _: 3
           }, 8, ["name"])
         ], 4)
       ], 6)
-    ])) : r("", !0);
+    ])) : d("", !0);
   }
 });
 export {
-  J as default
+  Q as default
 };

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

@@ -0,0 +1,16 @@
+import { GenStyleFunc } from '../../design-token/interface';
+import { Ref } from 'vue';
+export type MaskToken = {
+    /**
+     * 遮罩打开/关闭时的动画时长
+     */
+    maskAnimationDuration: string;
+    /**
+     * 遮罩透明度(基于#000)
+     */
+    maskOpacity: number;
+};
+export declare function genFadeKeyFrames(): string[];
+export declare const genMaskStyle: GenStyleFunc<MaskToken>;
+declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
+export default _default;

package/es/src/mask/style/index.mjs

@@ -0,0 +1,74 @@
+import { keyframes as n } from "../../utils/cssinjs/instance.mjs";
+import { genComponentStyleHook as e } from "../../utils/cssinjs/index.mjs";
+function r() {
+  const t = n`
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  `, o = n`
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  `;
+  return [t, o];
+}
+const s = (t) => {
+  const [o, i] = r(), { componentCls: a } = t;
+  return {
+    [t.componentCls]: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      [`${a}__mask`]: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        color: "#000",
+        transform: "translateZ(0)"
+      },
+      [`${a}__mask--disabled`]: {
+        color: "transparent"
+      },
+      [`${a}__mask-inner`]: {
+        width: "100%",
+        height: "100%",
+        backgroundColor: "currentcolor",
+        opacity: t.maskOpacity
+      },
+      [`${a}-fade`]: {
+        "&-enter-active": {
+          animationName: o,
+          animationDuration: t.maskAnimationDuration
+        },
+        "&-leave-active": {
+          animationName: i,
+          animationDuration: t.maskAnimationDuration
+        }
+      }
+    }
+  };
+}, p = e(
+  "Mask",
+  (t) => [s(t)],
+  { maskAnimationDuration: "0.25s", maskOpacity: 0.45 },
+  {
+    skipUnit: ["maskOpacity"]
+  }
+);
+export {
+  p as default,
+  r as genFadeKeyFrames,
+  s as genMaskStyle
+};

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

@@ -1,9 +1,10 @@
-import { defineComponent as $, ref as f, toRef as p, watch as V, watchEffect as W, unref as o, createElementBlock as z, openBlock as A, normalizeStyle as N, normalizeClass as b, createElementVNode as E } from "vue";
+import { defineComponent as V, ref as f, toRef as p, watch as W, watchEffect as z, unref as o, createElementBlock as A, openBlock as N, normalizeStyle as U, normalizeClass as b, createElementVNode as E } from "vue";
 import "../config-provider/index.mjs";
-import { useTrack as U } from "./hooks/use-track.mjs";
+import { useTrack as X } from "./hooks/use-track.mjs";
 import { ensureRangeValue as L } from "./utils/index.mjs";
-import { useNamespace as X } from "../config-provider/hooks/use-namespace.mjs";
-const H = /* @__PURE__ */ $({
+import Y from "./style/index.mjs";
+import { useNamespace as I } from "../config-provider/hooks/use-namespace.mjs";
+const K = /* @__PURE__ */ V({
   __name: "internal",
   props: {
     direction: { default: "vertical" },
@@ -21,7 +22,7 @@ const H = /* @__PURE__ */ $({
     onScrollEnd: {}
   },
   setup(C, { expose: D }) {
-    const t = C, m = f(), i = f(), l = f(), { b: M, e: k, m: B, em: c, cssVar: P } = X("scroll-bar"), n = f(t.scroll), { handleMouseDown: v } = U({
+    const t = C, m = f(), i = f(), l = f(), { b: M, e: k, m: B, em: c, cssVar: P } = I("scroll-bar"), R = Y("scroll-bar"), n = f(t.scroll), { handleMouseDown: v } = X({
       currentScroll: n,
       track: i,
       bar: l,
@@ -39,18 +40,18 @@ const H = /* @__PURE__ */ $({
         t.onScroll?.(e);
       }
     });
-    V(
+    W(
       () => t.scroll,
       (e) => {
         n.value = e;
       }
-    ), W(() => {
+    ), z(() => {
       if (!o(l)) return;
       const e = `${(100 - t.barLength) * n.value / t.barLength}%`, r = `${t.barLength}%`;
       t.direction === "vertical" ? (l.value.style.height = r, l.value.style.transform = `translate3d(0, ${e}, 0)`) : (l.value.style.width = r, l.value.style.transform = `translate3d(${e}, 0, 0)`);
     });
     let h, s, d;
-    function R(e) {
+    function T(e) {
       if (t.disabled || e.button !== 0) return;
       e.preventDefault(), e.stopPropagation();
       const r = o(i), a = o(l);
@@ -73,7 +74,7 @@ const H = /* @__PURE__ */ $({
     function w(e) {
       e.cancelable && (e.stopPropagation(), e.preventDefault());
     }
-    function T(e) {
+    function $(e) {
       Math.abs(o(n) - e) <= 1e-3 || (n.value = L(e));
     }
     return D({
@@ -81,18 +82,21 @@ const H = /* @__PURE__ */ $({
       container: m,
       bar: l,
       track: i,
-      scroll: T
-    }), (e, r) => (A(), z("div", {
+      scroll: $
+    }), (e, r) => (N(), A("div", {
       ref_key: "container",
       ref: m,
-      class: b([o(M)(), o(B)(e.direction)]),
-      style: N(
-        o(P)({
-          "bar-color": e.barColor,
-          "track-color": e.trackColor,
-          "bar-width": e.width ? `${e.width}px` : void 0,
-          "track-width": e.trackWidth ? `${e.trackWidth}px` : void 0
-        })
+      class: b([o(M)(), o(B)(e.direction), o(R)]),
+      style: U(
+        o(P)(
+          {
+            "bar-color": e.barColor,
+            "track-color": e.trackColor,
+            "bar-width": e.width ? `${e.width}px` : void 0,
+            "track-width": e.trackWidth ? `${e.trackWidth}px` : void 0
+          },
+          !1
+        )
       )
     }, [
       E("div", {
@@ -115,12 +119,12 @@ const H = /* @__PURE__ */ $({
           o(c)("bar", e.direction),
           e.disabled ? o(c)("bar", "disabled") : null
         ]),
-        onPointerdown: R,
+        onPointerdown: T,
         onTouchstart: w
       }, null, 34)
     ], 6));
   }
 });
 export {
-  H as default
+  K as default
 };

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

@@ -0,0 +1,27 @@
+import { GenStyleFunc } from '../../design-token/interface';
+import { Ref } from 'vue';
+export type ScrollbarToken = {
+    /**
+     * 滚动条滑块颜色
+     */
+    scrollBarBarColor: string;
+    /**
+     * 滚动条轨道颜色
+     */
+    scrollBarTrackColor: string;
+    /**
+     * 滚动条轨道禁用时的颜色
+     */
+    scrollBarTrackDisabledColor: string;
+    /**
+     * 滚动条滑块宽度(高度)
+     */
+    scrollBarBarWidth: number;
+    /**
+     * 滚动条轨道宽度(高度)
+     */
+    scrollBarTrackWidth: number;
+};
+export declare const genScrollbarStyle: GenStyleFunc<ScrollbarToken>;
+declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
+export default _default;

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

@@ -0,0 +1,66 @@
+import { genComponentStyleHook as l } from "../../utils/cssinjs/index.mjs";
+const a = (r) => {
+  const { componentCls: o } = r;
+  return {
+    [o]: {
+      position: "relative",
+      "&--horizontal": {
+        width: "100%",
+        height: r.scrollBarTrackWidth
+      },
+      "&--vertical": {
+        width: r.scrollBarTrackWidth,
+        height: "100%"
+      },
+      [`${o}__track`]: {
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        top: 0,
+        insetInlineStart: 0,
+        cursor: "pointer",
+        backgroundColor: r.scrollBarTrackColor,
+        "&--disabled": {
+          pointerEvents: "none",
+          backgroundColor: r.scrollBarTrackDisabledColor
+        },
+        "&--hidden": {
+          pointerEvents: "none",
+          backgroundColor: "transparent"
+        }
+      },
+      [`${o}__bar`]: {
+        position: "absolute",
+        borderRadius: r.scrollBarBarWidth,
+        backgroundColor: r.scrollBarBarColor,
+        cursor: "pointer",
+        "&--disabled": {
+          pointerEvents: "none",
+          boxShadow: "none"
+        },
+        "&--horizontal": {
+          height: r.scrollBarBarWidth,
+          top: `calc(${r.scrollBarTrackWidth} / 2 - ${r.scrollBarBarWidth} / 2)`
+        },
+        "&--vertical": {
+          width: r.scrollBarBarWidth,
+          left: `calc(${r.scrollBarTrackWidth} / 2 - ${r.scrollBarBarWidth} / 2)`
+        }
+      }
+    }
+  };
+}, t = l(
+  "Scrollbar",
+  (r) => [a(r)],
+  {
+    scrollBarBarColor: "#c7c8cc",
+    scrollBarTrackColor: "#F2F2F2",
+    scrollBarTrackDisabledColor: "#FAFAFA",
+    scrollBarBarWidth: 8,
+    scrollBarTrackWidth: 10
+  }
+);
+export {
+  t as default,
+  a as genScrollbarStyle
+};