@unicom-cloud/ui 0.8.97 → 0.8.98

package/liquid-fill/LiquidFill.js

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

package/package.json

@@ -1 +1 @@
-{"name":"@unicom-cloud/ui","version":"0.8.97","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.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"}}