@unicom-cloud/ui 0.8.98 → 0.8.99

package/liquid-fill/index.js

@@ -1,4 +1,257 @@
-import l from "./LiquidFill.js";
+import { jsx as n, jsxs as x } from "react/jsx-runtime";
+import { useContext as at, useRef as $, useState as V, useEffect as D } from "react";
+import "../config-provider/ConfigProvider.js";
+import "lodash/isEqualWith";
+import "../components/common/utils/is.js";
+import "@unicom-cloud/utils/constant/keyboardCode";
+import "lodash/isNumber";
+import "lodash/merge";
+import "../components/common/utils/dom.js";
+import "../components/common/hooks/useIntersectionObserver.js";
+import st from "../components/common/hooks/useMergeProps.js";
+import "../components/common/utils/reactDOM.js";
+import "@unicom-cloud/utils/constant";
+import mt from "../components/common/hooks/useUpdateEffect.js";
+import "lodash/debounce";
+import "@unicom-cloud/utils/case-name";
+import lt from "@unicom-cloud/utils/class-name";
+import "../dist/tinycolor/chunk/BOzCVdr0.js";
+import "@unicom-cloud/utils/constant/ui";
+import "../utils/contextHolder.js";
+import "@unicom-cloud/utils/dayjs";
+import "@unicom-cloud/utils/clipboard-copy";
+import "../components/common/utils/dayjs.js";
+import "@unicom-cloud/utils/file/fileToURL";
+import "lodash/escapeRegExp";
+import "lodash/isArray";
+import "lodash/isString";
+import "lodash/isFunction";
+import "lodash/throttle";
+import "lodash/camelCase";
+import "lodash/capitalize";
+import "lodash/cloneDeep";
+import "lodash/get";
+import "lodash/has";
+import "lodash/kebabCase";
+import "lodash/mergeWith";
+import "lodash/set";
+import "lodash/setWith";
+import "lodash/snakeCase";
+import "lodash/startCase";
+import "lodash/uniq";
+import "lodash/upperFirst";
+import "@unicom-cloud/utils/math";
+import "lodash/isPlainObject";
+import "../dist/react-transition-group/src/CSSTransition.js";
+import "../dist/react-transition-group/src/ReplaceTransition.js";
+import "../dist/react-transition-group/src/SwitchTransition.js";
+import "../dist/react-transition-group/chunk/CPfP7aNL.js";
+import "../dist/react-transition-group/src/TransitionGroup.js";
+import "@unicom-cloud/utils/file/saveAs";
+import "@unicom-cloud/utils/screenfull";
+import "@unicom-cloud/utils/constant/ui.js";
+import "@unicom-cloud/utils/tree";
+import { isNumber as ct } from "@unicom-cloud/utils/is";
+import { v4 as A } from "uuid";
+import "../dist/validate/src/index.js";
+import pt from "../config-provider/context.js";
+const dt = {
+  value: 0.5,
+  size: 200,
+  waveColor: "rgb(var(--pqb-blue-6))",
+  backgroundColor: "var(--pqb-color-neutral-1)",
+  textColor: "var(--pqb-color-neutral-8)",
+  showPercent: !0,
+  duration: 2e3,
+  waveCount: 3,
+  waveAmplitude: 10,
+  borderColor: "var(--pqb-color-neutral-4)",
+  borderWidth: 2,
+  outerBorderWidth: 0,
+  borderGap: 2,
+  decimalPlaces: 0,
+  percentFontScale: 0.5,
+  waveSpeedVariation: 0.5
+}, ve = (E) => {
+  const { getPrefixCls: I, componentConfig: _ } = at(pt), i = I?.("liquid-fill"), H = st(
+    E,
+    dt,
+    _?.LiquidFill
+  ), {
+    style: U,
+    className: Y,
+    value: F,
+    size: a,
+    fontSize: h = `${a * 0.15}px`,
+    waveColor: N,
+    backgroundColor: q,
+    textColor: J,
+    showPercent: K,
+    duration: y,
+    waveCount: c,
+    waveAmplitude: Q,
+    borderColor: G,
+    borderWidth: v,
+    outerBorderColor: W,
+    outerBorderWidth: g,
+    borderGap: X,
+    decimalPlaces: Z,
+    percentFontScale: tt,
+    waveSpeedVariation: B
+  } = H, d = $({
+    clipPath: A(),
+    // 裁剪路径ID
+    waveGradient: A(),
+    // 波浪渐变ID
+    bgGradient: A()
+    // 背景渐变ID
+  }).current, et = $(null), e = $({
+    fill: 0,
+    // 填充动画ID
+    wave: 0,
+    // 波浪动画ID
+    startTime: 0
+    // 动画开始时间
+  }).current, [C, M] = V(0), [rt, z] = V([]), S = a / 2 - g / 2, k = S - g / 2 - X - v / 2, m = k - v / 2, r = a / 2, R = m * 2, ot = R * (C / 100) + v / 2, T = (o, t) => {
+    if (typeof t == "string") return null;
+    const { from: s, to: l, direction: p = "vertical" } = t;
+    return /* @__PURE__ */ x("linearGradient", { id: o, x1: "0%", y1: "0%", x2: p === "horizontal" ? "100%" : "0%", y2: p === "horizontal" ? "0%" : "100%", children: [
+      /* @__PURE__ */ n("stop", { offset: "0%", stopColor: s }),
+      /* @__PURE__ */ n("stop", { offset: "100%", stopColor: l })
+    ] });
+  }, L = (o, t) => typeof o == "string" ? o : `url(#${t})`, it = (o, t, s) => {
+    const l = [], w = r - m, j = r + m;
+    for (let u = 0; u <= 30; u++) {
+      const f = w + u / 30 * R, P = Math.min(
+        r + m - ot + // 这里原来是减去 waterHeight，现在直接使用 waterHeight
+        o * Math.sin((f - w) * t + s),
+        r + m
+      );
+      l.push([f, P]);
+    }
+    return l.push([j, r + m]), l.push([w, r + m]), l.map(([u, f], P) => `${P === 0 ? "M" : "L"}${u} ${f}`).join(" ");
+  }, nt = () => Array.from({ length: c }).map((o, t) => {
+    const s = Q * (c - t) / c, l = 0.02 * (t + 1), p = rt[t] || 0;
+    return /* @__PURE__ */ n(
+      "path",
+      {
+        className: `${i}-path`,
+        d: it(s, l, p),
+        fill: L(N, d.waveGradient),
+        fillOpacity: 0.3 + 0.7 / c * t
+      },
+      t
+    );
+  }), b = () => {
+    z(
+      (o) => o.map(
+        (t, s) => t + 0.02 * (s + 1) * (1 + B * Math.random())
+      )
+    ), C < 100 && (e.wave = requestAnimationFrame(b));
+  }, O = (o) => {
+    e.startTime || (e.startTime = o);
+    const t = o - e.startTime, s = Math.min(t / y, 1) * F * 100;
+    M(s), t < y && (e.fill = requestAnimationFrame(O));
+  };
+  return D(() => {
+    z(Array.from({ length: c }, (o, t) => t * Math.PI));
+  }, [c]), D(() => (cancelAnimationFrame(e.fill), cancelAnimationFrame(e.wave), e.startTime = 0, M(0), e.fill = requestAnimationFrame(O), e.wave = requestAnimationFrame(b), () => {
+    cancelAnimationFrame(e.fill), cancelAnimationFrame(e.wave);
+  }), [F, y, c]), mt(() => (cancelAnimationFrame(e.wave), e.wave = requestAnimationFrame(b), () => {
+    cancelAnimationFrame(e.wave);
+  }), [B]), /* @__PURE__ */ n(
+    "div",
+    {
+      className: lt(i, Y),
+      style: {
+        width: a,
+        height: a,
+        ...U
+      },
+      children: /* @__PURE__ */ x(
+        "svg",
+        {
+          className: `${i}-svg`,
+          ref: et,
+          width: a,
+          height: a,
+          viewBox: `0 0 ${a} ${a}`,
+          preserveAspectRatio: "xMidYMid meet",
+          children: [
+            /* @__PURE__ */ x("defs", { children: [
+              T(d.waveGradient, N),
+              T(d.bgGradient, q),
+              /* @__PURE__ */ n("clipPath", { id: d.clipPath, className: `${i}-clipPath`, children: /* @__PURE__ */ n(
+                "circle",
+                {
+                  className: `${i}-clipPath-circle`,
+                  cx: r,
+                  cy: r,
+                  r: m
+                }
+              ) })
+            ] }),
+            g > 0 && /* @__PURE__ */ n(
+              "circle",
+              {
+                className: `${i}-outerBorder`,
+                cx: r,
+                cy: r,
+                r: S,
+                fill: "none",
+                stroke: W || G,
+                strokeWidth: g,
+                strokeOpacity: W ? 1 : 0.5
+              }
+            ),
+            /* @__PURE__ */ n(
+              "circle",
+              {
+                className: `${i}-border`,
+                cx: r,
+                cy: r,
+                r: k,
+                fill: L(q, d.bgGradient),
+                stroke: G,
+                strokeWidth: v
+              }
+            ),
+            /* @__PURE__ */ n("g", { className: `${i}-g`, clipPath: `url(#${d.clipPath})`, children: nt() }),
+            K && /* @__PURE__ */ x(
+              "text",
+              {
+                style: {},
+                className: `${i}-text`,
+                x: r,
+                y: r,
+                fill: J,
+                fontSize: h,
+                textAnchor: "middle",
+                dominantBaseline: "middle",
+                alignmentBaseline: "middle",
+                children: [
+                  C.toFixed(Z),
+                  /* @__PURE__ */ n(
+                    "tspan",
+                    {
+                      style: {
+                        fontSize: `calc(${ct(h) ? h + "px" : h} * ${tt})`
+                      },
+                      className: `${i}-text-tspan`,
+                      alignmentBaseline: "middle",
+                      dominantBaseline: "middle",
+                      children: "%"
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
 export {
-  l as default
+  ve as default
 };

package/marquee/index.js

@@ -0,0 +1,282 @@
+import { jsxs as S, jsx as l, Fragment as A } from "react/jsx-runtime";
+import { useContext as U, useRef as k, useState as u, useEffect as N } from "react";
+import "../config-provider/ConfigProvider.js";
+import "lodash/isEqualWith";
+import "../components/common/utils/is.js";
+import "@unicom-cloud/utils/constant/keyboardCode";
+import "lodash/isNumber";
+import "lodash/merge";
+import "../components/common/utils/dom.js";
+import "../components/common/hooks/useIntersectionObserver.js";
+import V from "../components/common/hooks/useMergeProps.js";
+import "../components/common/utils/reactDOM.js";
+import "@unicom-cloud/utils/constant";
+import "lodash/debounce";
+import "@unicom-cloud/utils/case-name";
+import Z from "@unicom-cloud/utils/class-name";
+import "../dist/tinycolor/chunk/BOzCVdr0.js";
+import "@unicom-cloud/utils/constant/ui";
+import "../utils/contextHolder.js";
+import "@unicom-cloud/utils/dayjs";
+import "@unicom-cloud/utils/clipboard-copy";
+import "../components/common/utils/dayjs.js";
+import "@unicom-cloud/utils/file/fileToURL";
+import "lodash/escapeRegExp";
+import "lodash/isArray";
+import "lodash/isString";
+import "lodash/isFunction";
+import "lodash/throttle";
+import "lodash/camelCase";
+import "lodash/capitalize";
+import "lodash/cloneDeep";
+import "lodash/get";
+import "lodash/has";
+import "lodash/kebabCase";
+import "lodash/mergeWith";
+import "lodash/set";
+import "lodash/setWith";
+import "lodash/snakeCase";
+import "lodash/startCase";
+import "lodash/uniq";
+import "lodash/upperFirst";
+import "@unicom-cloud/utils/math";
+import "lodash/isPlainObject";
+import "../dist/react-transition-group/src/CSSTransition.js";
+import "../dist/react-transition-group/src/ReplaceTransition.js";
+import "../dist/react-transition-group/src/SwitchTransition.js";
+import "../dist/react-transition-group/chunk/CPfP7aNL.js";
+import "../dist/react-transition-group/src/TransitionGroup.js";
+import { resizeObserver as _ } from "../components/common/utils/resizeObserver.js";
+import "@unicom-cloud/utils/file/saveAs";
+import "@unicom-cloud/utils/screenfull";
+import "@unicom-cloud/utils/constant/ui.js";
+import "@unicom-cloud/utils/tree";
+import "@unicom-cloud/utils/is";
+import "uuid";
+import "../dist/validate/src/index.js";
+import tt from "../config-provider/context.js";
+const et = {
+  speed: 50,
+  // 默认50像素/秒（数值越大越快）
+  direction: "left",
+  pauseOnHover: !1,
+  gradient: !0,
+  loop: 0,
+  // 0表示无限循环
+  gradientSize: 50
+}, se = (q) => {
+  const { getPrefixCls: O, componentConfig: P } = U(tt), s = O?.("marquee"), R = V(
+    q,
+    et,
+    P?.Marquee
+  );
+  let {
+    children: $,
+    style: L,
+    className: D,
+    speed: E,
+    // 默认50像素/秒（数值越大越快）
+    direction: c,
+    pauseOnHover: H,
+    gradient: W,
+    loop: a,
+    // 0表示无限循环
+    gradientSize: d,
+    onComplete: b
+  } = R;
+  const h = k(null), T = k(null), w = k(null), n = k(), [F, j] = u({ width: 0, height: 0 }), [rt, B] = u({ width: 0, height: 0 }), [y, I] = u(!1), [M, m] = u(!0), [x, p] = u(0), [X, g] = u(0), o = c === "left" || c === "right";
+  d = o ? 50 : 20;
+  const z = () => {
+    if (w.current && h.current) {
+      const r = w.current.scrollWidth, t = w.current.scrollHeight, i = h.current.offsetWidth, e = h.current.offsetHeight;
+      j({ width: r, height: t }), B({ width: i, height: e });
+      const f = o ? r > i : t > e;
+      if (I(f), f) {
+        const v = c === "right" ? -r : c === "down" ? -t : 0;
+        p(v);
+      }
+    }
+  };
+  N(() => {
+    const r = _(
+      [h.current],
+      z
+    );
+    return () => r();
+  }, []), N(() => {
+    z(), g(0);
+  }, [$]), N(() => {
+    if (!M || !y)
+      return;
+    let r = null, t = x;
+    const i = o ? F.width : F.height;
+    let e = X;
+    const f = (v) => {
+      if (!r) {
+        r = v, n.current = requestAnimationFrame(f);
+        return;
+      }
+      const Q = (v - r) / 1e3;
+      r = v;
+      const C = E * Q;
+      switch (c) {
+        case "left":
+          if (t -= C, t <= -i && (t += i, e += 1, g(e), a > 0 && e >= a)) {
+            cancelAnimationFrame(n.current), m(!1), p(0), b?.();
+            return;
+          }
+          break;
+        case "right":
+          if (t += C, t >= 0 && (t -= i, e += 1, g(e), a > 0 && e >= a)) {
+            cancelAnimationFrame(n.current), m(!1), p(-i), b?.();
+            return;
+          }
+          break;
+        case "up":
+          if (t -= C, t <= -i && (t += i, e += 1, g(e), a > 0 && e >= a)) {
+            cancelAnimationFrame(n.current), m(!1), p(0), b?.();
+            return;
+          }
+          break;
+        case "down":
+          if (t += C, t >= 0 && (t -= i, e += 1, g(e), a > 0 && e >= a)) {
+            cancelAnimationFrame(n.current), m(!1), p(-i), b?.();
+            return;
+          }
+          break;
+      }
+      p(t), n.current = requestAnimationFrame(f);
+    };
+    return n.current = requestAnimationFrame(f), () => {
+      n.current && cancelAnimationFrame(n.current);
+    };
+  }, [M, E, c, F, y, a]), N(() => (z(), () => {
+    n.current && cancelAnimationFrame(n.current);
+  }), []);
+  const Y = () => {
+    H && m(!1);
+  }, G = () => {
+    H && m(!0);
+  }, J = () => o ? `translateX(${x}px)` : `translateY(${x}px)`, K = () => {
+    const r = {
+      display: o ? "inline-block" : "block",
+      whiteSpace: o ? "nowrap" : "normal",
+      // 消除元素间默认间距
+      marginRight: o ? 0 : void 0,
+      marginBottom: o ? void 0 : 0
+    }, t = /* @__PURE__ */ l(
+      "div",
+      {
+        ref: w,
+        style: r,
+        className: `${s}-children`,
+        children: $
+      }
+    );
+    return y ? /* @__PURE__ */ S(A, { children: [
+      t,
+      /* @__PURE__ */ l("div", { style: r, className: `${s}-children`, children: $ })
+    ] }) : t;
+  };
+  return /* @__PURE__ */ S(
+    "div",
+    {
+      ref: h,
+      className: Z(
+        s,
+        `${s}-${c}`,
+        D
+      ),
+      style: {
+        overflow: "hidden",
+        position: "relative",
+        ...L
+      },
+      onMouseEnter: Y,
+      onMouseLeave: G,
+      children: [
+        /* @__PURE__ */ l(
+          "div",
+          {
+            ref: T,
+            style: {
+              display: o ? "inline-block" : "block",
+              whiteSpace: "nowrap",
+              willChange: "transform",
+              // 启用GPU加速
+              transform: J()
+            },
+            className: `${s}-content`,
+            children: K()
+          }
+        ),
+        W && y && (o ? /* @__PURE__ */ S(A, { children: [
+          /* @__PURE__ */ l(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: d,
+                height: "100%",
+                background: "linear-gradient(to right, #fff, transparent)",
+                pointerEvents: "none"
+              },
+              className: `${s}-linear-gradient-to-right`
+            }
+          ),
+          /* @__PURE__ */ l(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                right: 0,
+                width: d,
+                height: "100%",
+                background: "linear-gradient(to left, #fff, transparent)",
+                pointerEvents: "none"
+              },
+              className: `${s}-linear-gradient-to-left`
+            }
+          )
+        ] }) : /* @__PURE__ */ S(A, { children: [
+          /* @__PURE__ */ l(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: d,
+                background: "linear-gradient(to bottom, #fff, transparent)",
+                pointerEvents: "none"
+              },
+              className: `${s}-linear-gradient-to-bottom`
+            }
+          ),
+          /* @__PURE__ */ l(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                bottom: 0,
+                left: 0,
+                width: "100%",
+                height: d,
+                background: "linear-gradient(to top, #fff, transparent)",
+                pointerEvents: "none"
+              },
+              className: `${s}-linear-gradient-to-top`
+            }
+          )
+        ] }))
+      ]
+    }
+  );
+};
+export {
+  se as default
+};

package/menu/Item.js

@@ -1,4 +1,4 @@
-import { jsxs as N, jsx as o, Fragment as D } from "react/jsx-runtime";
+import { jsxs as N, jsx as r, Fragment as D } from "react/jsx-runtime";
 import F from "../dist/scroll-into-view-if-needed/src/index.js";
 import { forwardRef as O, useContext as j, useRef as B, useEffect as K } from "react";
 import U from "../components/common/hooks/useIsFirstRender.js";
@@ -12,8 +12,8 @@ import { PROPS_NEED_TO_BE_PASSED_IN_SUBMENU as q } from "./util.js";
 function G(b, c) {
   const {
     _key: a,
-    children: s,
-    level: i,
+    children: i,
+    level: s,
     disabled: l,
     className: x,
     style: E,
@@ -32,14 +32,15 @@ function G(b, c) {
     scrollConfig: S,
     tooltipProps: y,
     onClickMenuItem: w
-  } = j(W), r = B(null), R = U(), I = p === "vertical" && i > 1, v = m && !M && i === 1, n = f && ~f.indexOf(a);
+  } = j(W), o = B(null), R = U(), I = p === "vertical" && s > 1, v = m && !M && s === 1, n = f && ~f.indexOf(a);
   K(() => {
     const e = n && u;
-    r.current && e && setTimeout(
+    o.current && e && setTimeout(
       () => {
-        r.current && F(r.current, {
+        o.current && F(o.current, {
           behavior: "smooth",
           block: "start",
+          inline: "start",
           scrollMode: "if-needed",
           boundary: document.body,
           ...S
@@ -47,7 +48,7 @@ function G(b, c) {
       },
       R ? 500 : 0
     );
-  }, [n, u]);
+  }, [n, u, o.current]);
   const k = (e) => {
     l || (w?.(a, e), _?.(e));
   }, g = /* @__PURE__ */ N(
@@ -56,7 +57,7 @@ function G(b, c) {
       tabIndex: l ? -1 : 0,
       role: "menuitem",
       ref: (e) => {
-        c = e, r.current = c;
+        c = e, o.current = c;
       },
       style: E,
       className: A(
@@ -79,35 +80,35 @@ function G(b, c) {
       ),
       children: [
         I && !m ? /* @__PURE__ */ N(D, { children: [
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ r(
             V,
             {
               prefixCls: t,
               levelIndent: P,
-              level: i
+              level: s
             }
           ),
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ r(
             "span",
             {
               className: `${t}-item-inner`,
               style: {
                 display: "block"
               },
-              children: s
+              children: i
             }
           )
-        ] }) : s,
-        n && p === "horizontal" ? /* @__PURE__ */ o("div", { className: `${t}-selected-label` }) : null
+        ] }) : i,
+        n && p === "horizontal" ? /* @__PURE__ */ r("div", { className: `${t}-selected-label` }) : null
       ]
     }
   );
-  return v ? /* @__PURE__ */ o(
+  return v ? /* @__PURE__ */ r(
     z,
     {
       trigger: "hover",
       position: "right",
-      content: typeof d == "function" ? d() : /* @__PURE__ */ o("span", { children: s }),
+      content: typeof d == "function" ? d() : /* @__PURE__ */ r("span", { children: i }),
       triggerProps: {
         className: `${t}-item-tooltip`,
         ...y?.triggerProps || {}

package/package.json

@@ -1 +1 @@
-{"name":"@unicom-cloud/ui","version":"0.8.98","dependencies":{"@unicom-cloud/icons":"latest"},"peerDependencies":{"dayjs":"^1.11.10","lodash":"^4.17.21","react":"^18.3.1","react-dom":"^18.3.1"},"peerDependenciesMeta":{},"type":"module","types":"types/pc/index.d.ts","main":"./index.js","publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"}}
+{"name":"@unicom-cloud/ui","version":"0.8.99","dependencies":{"@unicom-cloud/icons":"latest"},"peerDependencies":{"dayjs":"^1.11.10","lodash":"^4.17.21","react":"^18.3.1","react-dom":"^18.3.1"},"peerDependenciesMeta":{},"type":"module","types":"types/pc/index.d.ts","main":"./index.js","publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"}}