@unicom-cloud/ui 0.8.103 → 0.8.104

package/Spin.js

@@ -1,14 +1,17 @@
 import "react/jsx-runtime";
 import "@unicom-cloud/icons/IconUiLoading";
+import "@unicom-cloud/icons/IconUiLoadingDots";
+import "@unicom-cloud/icons/IconUiLoadingInfinity";
+import "@unicom-cloud/icons/IconUiLoadingRing";
+import "@unicom-cloud/icons/IconUiLoadingSpinner";
 import "lodash/debounce";
 import "react";
 import "./config-provider/ConfigProvider.js";
 import "./components/common/hooks/useMergeProps.js";
 import "@unicom-cloud/utils/class-name";
 import "./components/common/utils/is.js";
-import "./spin/DotLoading.js";
 import "./config-provider/context.js";
-import { default as x } from "./spin/index.js";
+import { default as g } from "./spin/index.js";
 export {
-  x as default
+  g as default
 };

package/badge/Count.js

@@ -1,14 +1,14 @@
 import { jsx as s } from "react/jsx-runtime";
-import { useState as d } from "react";
-import p from "../components/common/hooks/usePrevious.js";
-import { PqbCSSTransition as u } from "../components/common/utils/PqbCSSTransition.js";
-import f from "@unicom-cloud/utils/class-name";
-function S({ prefixCls: t, maxCount: r, count: e, className: n, style: a }) {
-  const [o, m] = d(!1), i = p(e), l = e !== i;
+import { useState as u } from "react";
+import d from "../components/common/hooks/usePrevious.js";
+import { PqbCSSTransition as p } from "../components/common/utils/PqbCSSTransition.js";
+import c from "@unicom-cloud/utils/class-name";
+function $({ prefixCls: t, maxCount: r, count: e, className: n, style: o }) {
+  const [a, m] = u(!1), i = d(e), l = e !== i;
   return /* @__PURE__ */ s(
-    u,
+    p,
     {
-      classNames: "badge-zoom",
+      classNames: `${t}-zoom`,
       in: e > 0,
       timeout: 300,
       appear: !0,
@@ -17,11 +17,11 @@ function S({ prefixCls: t, maxCount: r, count: e, className: n, style: a }) {
       onEntered: () => {
         m(!0);
       },
-      children: /* @__PURE__ */ s("span", { className: n, style: a, children: /* @__PURE__ */ s(
+      children: /* @__PURE__ */ s("span", { className: n, style: o, children: /* @__PURE__ */ s(
         "span",
         {
-          className: f({
-            [`${t}-number-text`]: o && l
+          className: c({
+            [`${t}-number-text`]: a && l
           }),
           children: r && e > r ? `${r}+` : e
         },
@@ -31,5 +31,5 @@ function S({ prefixCls: t, maxCount: r, count: e, className: n, style: a }) {
   );
 }
 export {
-  S as default
+  $ as default
 };

package/badge/index.js

@@ -40,14 +40,14 @@ function Q(O, B) {
     dot: g,
     dotAnimation: C,
     maxCount: T,
-    color: t,
+    color: e,
     dotStyle: w,
     offset: E,
     style: j,
     status: m,
     children: N,
     ...v
-  } = R, p = H(null), e = D?.("badge"), a = { ...w || {} }, [x, y] = E || [];
+  } = R, p = H(null), t = D?.("badge"), a = { ...w || {} }, [x, y] = E || [];
   x && (a.marginRight = -x), y && (a.marginTop = y), L(B, () => ({
     dom: p.current,
     getRootDOMNode() {
@@ -59,42 +59,42 @@ function Q(O, B) {
       return /* @__PURE__ */ o(
         "span",
         {
-          className: l(`${e}-custom-dot`, i),
+          className: l(`${t}-custom-dot`, i),
           style: a,
           children: n
         }
       );
-    const r = t ? f.includes(t) : !1, c = !t || r ? {} : { backgroundColor: t };
-    return u && !t && !m ? /* @__PURE__ */ o(
+    const r = e ? f.includes(e) : !1, c = !e || r ? {} : { backgroundColor: e };
+    return u && !e && !m ? /* @__PURE__ */ o(
       "span",
       {
-        className: l(`${e}-text`, i),
+        className: l(`${t}-text`, i),
         style: a,
         children: u
       }
-    ) : m || t && typeof n == "number" && n <= 0 ? /* @__PURE__ */ d("span", { className: `${e}-status-wrapper`, children: [
-      !!b && /* @__PURE__ */ o("span", { className: `${e}-status-prefix-text`, children: b }),
+    ) : m || e && typeof n == "number" && n <= 0 ? /* @__PURE__ */ d("span", { className: `${t}-status-wrapper`, children: [
+      !!b && /* @__PURE__ */ o("span", { className: `${t}-status-prefix-text`, children: b }),
       /* @__PURE__ */ o(
         "span",
         {
           style: { ...c, ...a },
           className: l(
-            `${e}-status-dot`,
+            `${t}-status-dot`,
             {
-              [`${e}-dot-pulse`]: C,
-              [`${e}-status-${m}`]: m,
-              [`${e}-color-${t}`]: t && r
+              [`${t}-dot-pulse`]: C,
+              [`${t}-status-${m}`]: m,
+              [`${t}-color-${e}`]: e && r
             },
             i
           )
         }
       ),
-      !!u && /* @__PURE__ */ o("span", { className: `${e}-status-text`, children: u })
-    ] }) : (g || t) && typeof n == "number" && n > 0 ? /* @__PURE__ */ o(
+      !!u && /* @__PURE__ */ o("span", { className: `${t}-status-text`, children: u })
+    ] }) : (g || e) && typeof n == "number" && n > 0 ? /* @__PURE__ */ o(
       F,
       {
-        classNames: "badge-zoom",
-        in: g || !!t,
+        classNames: `${t}-zoom`,
+        in: g || !!e,
         timeout: 200,
         appear: !0,
         mountOnEnter: !0,
@@ -103,10 +103,10 @@ function Q(O, B) {
           "span",
           {
             className: l(
-              `${e}-dot`,
+              `${t}-dot`,
               {
-                [`${e}-dot-pulse`]: C,
-                [`${e}-color-${t}`]: t && r
+                [`${t}-dot-pulse`]: C,
+                [`${t}-color-${e}`]: e && r
               },
               i
             ),
@@ -117,8 +117,8 @@ function Q(O, B) {
     ) : /* @__PURE__ */ o(
       h,
       {
-        prefixCls: e,
-        className: l(`${e}-number`, i),
+        prefixCls: t,
+        className: l(`${t}-number`, i),
         style: { ...c, ...a },
         maxCount: T,
         count: n
@@ -134,18 +134,18 @@ function Q(O, B) {
       "div",
       {
         className: l(
-          `${e}-ribbon`,
-          `${e}-ribbon-${M}`,
+          `${t}-ribbon`,
+          `${t}-ribbon-${M}`,
           {
-            [`${e}-rtl`]: $,
-            [`${e}-color-${r}`]: r && c
+            [`${t}-rtl`]: $,
+            [`${t}-color-${r}`]: r && c
           },
           s.className
         ),
         style: I,
         children: [
-          /* @__PURE__ */ o("span", { className: `${e}-ribbon-text`, children: s.text }),
-          /* @__PURE__ */ o("div", { className: `${e}-ribbon-corner` })
+          /* @__PURE__ */ o("span", { className: `${t}-ribbon-text`, children: s.text }),
+          /* @__PURE__ */ o("div", { className: `${t}-ribbon-corner` })
         ]
       }
     );
@@ -154,13 +154,13 @@ function Q(O, B) {
     "span",
     {
       className: l(
-        e,
+        t,
         {
-          [`${e}-status`]: m,
-          [`${e}-no-children`]: !N,
-          [`${e}-rtl`]: $
+          [`${t}-status`]: m,
+          [`${t}-no-children`]: !N,
+          [`${t}-rtl`]: $
         },
-        !!s && `${e}-ribbon-wrapper`,
+        !!s && `${t}-ribbon-wrapper`,
         A
       ),
       ref: p,
@@ -176,7 +176,7 @@ function Q(O, B) {
 const S = q(Q);
 S.displayName = "Badge";
 S.Count = h;
-const se = f, ne = [
+const st = f, nt = [
   "default",
   "processing",
   "success",
@@ -184,8 +184,8 @@ const se = f, ne = [
   "error"
 ];
 export {
-  se as BADGE_COLORS,
-  ne as BADGE_STATUS,
+  st as BADGE_COLORS,
+  nt as BADGE_STATUS,
   h as BadgeCount,
   S as default
 };

package/divider/index.js

@@ -1,47 +1,61 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as l, useContext as v } from "react";
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as f, useContext as b, useMemo as D } from "react";
 import "../config-provider/ConfigProvider.js";
-import N from "../components/common/hooks/useMergeProps.js";
-import C from "@unicom-cloud/utils/class-name";
-import h from "../config-provider/context.js";
-const y = {
+import g from "../components/common/hooks/useMergeProps.js";
+import P from "@unicom-cloud/utils/class-name";
+import w from "../config-provider/context.js";
+const z = {
   type: "horizontal",
   orientation: "center"
 };
-function D(r, o) {
-  const { getPrefixCls: m, componentConfig: p } = v(h), d = N(
-    r,
-    y,
-    p?.Divider
-  ), { children: e, style: f, className: x, type: n, orientation: i, ...$ } = d, t = m?.("divider"), u = C(
+function S(n, a) {
+  const { getPrefixCls: u, componentConfig: x } = b(w), h = g(
+    n,
+    z,
+    x?.Divider
+  ), {
+    children: o,
+    style: m,
+    className: $,
+    type: p,
+    orientation: l,
+    borderStyle: r,
+    // 潘启宝添加
+    borderWidth: i,
+    // 潘启宝添加
+    ...v
+  } = h, s = p === "horizontal", t = u?.("divider"), N = P(
     t,
-    `${t}-${n}`,
+    `${t}-${p}`,
     {
-      [`${t}-with-text`]: e,
-      [`${t}-with-text-${i}`]: e && i
+      [`${t}-with-text`]: o,
+      [`${t}-with-text-${l}`]: o && l
     },
-    x
-  );
-  return /* @__PURE__ */ s(
+    $
+  ), C = D(() => {
+    const e = { ...m };
+    return r && (s ? e.borderBottomStyle = r : e.borderLeftStyle = r), i && (s ? e.borderBottomWidth = i : e.borderLeftWidth = i), e;
+  }, [r, i, s, m]);
+  return /* @__PURE__ */ c(
     "div",
     {
       role: "separator",
-      ref: o,
-      className: u,
-      style: f,
-      ...$,
-      children: e && n === "horizontal" ? /* @__PURE__ */ s("span", { className: `${t}-text ${t}-text-${i}`, children: e }) : null
+      ref: a,
+      style: C,
+      className: N,
+      ...v,
+      children: o && s ? /* @__PURE__ */ c("span", { className: `${t}-text ${t}-text-${l}`, children: o }) : null
     }
   );
 }
-const a = l(
-  D
+const d = f(
+  S
 );
-a.displayName = "Divider";
-const c = l((r, o) => /* @__PURE__ */ s(a, { ref: o, type: "vertical", ...r }));
-c.displayName = "DividerVertical";
-a.Vertical = c;
+d.displayName = "Divider";
+const y = f((n, a) => /* @__PURE__ */ c(d, { ref: a, type: "vertical", ...n }));
+y.displayName = "DividerVertical";
+d.Vertical = y;
 export {
-  c as DividerVertical,
-  a as default
+  y as DividerVertical,
+  d as default
 };

package/marquee/index.js

@@ -1,11 +1,11 @@
-import { jsx as s, Fragment as et, jsxs as j } from "react/jsx-runtime";
-import { forwardRef as rt, useContext as it, useState as y, useRef as k, useCallback as A, useEffect as R, useMemo as f, Fragment as ot, Children as H } from "react";
+import { jsx as s, Fragment as rt, jsxs as H } from "react/jsx-runtime";
+import { forwardRef as it, useContext as ot, useState as C, useRef as j, useCallback as A, useEffect as O, useMemo as h, Fragment as nt, Children as B } 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 nt from "lodash/merge";
+import at from "lodash/merge";
 import "../components/common/utils/dom.js";
 import "../components/common/hooks/useIntersectionObserver.js";
 import st from "../components/common/hooks/useMergeProps.js";
@@ -14,7 +14,7 @@ import "@unicom-cloud/utils/constant";
 import "lodash/debounce";
 import "@unicom-cloud/utils/date";
 import "@unicom-cloud/utils/case-name";
-import mt from "@unicom-cloud/utils/class-name";
+import lt from "@unicom-cloud/utils/class-name";
 import "@unicom-cloud/utils/constant/ui";
 import "../utils/contextHolder.js";
 import "@unicom-cloud/utils/clipboard-copy";
@@ -45,7 +45,7 @@ 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 at } from "../components/common/utils/resizeObserver.js";
+import { resizeObserver as mt } from "../components/common/utils/resizeObserver.js";
 import "uuid";
 import "@unicom-cloud/utils/file/saveAs";
 import "@unicom-cloud/utils/screenfull";
@@ -54,143 +54,148 @@ import "@unicom-cloud/utils/ui-color";
 import "@unicom-cloud/utils/constant/ui.js";
 import "react-is";
 import "@unicom-cloud/utils/tree";
-import { isPlainObject as lt } from "@unicom-cloud/utils/is";
+import { isPlainObject as pt } from "@unicom-cloud/utils/is";
 import "../dist/validate/src/index.js";
-import pt from "../config-provider/context.js";
-const ct = {
+import ct from "../config-provider/context.js";
+const o = {
+  autoFill: !1,
+  play: !0,
   speed: 50,
   direction: "left",
   pauseOnHover: !1,
+  pauseOnClick: !1,
+  delay: 0.0227,
+  // 设置非 0 为了解决 onAnimationEnd={onFinish} 立即被调用的问题
   loop: 0
-}, ye = rt(
-  function(B, E) {
-    const { getPrefixCls: z, componentConfig: I } = it(pt), i = z?.("marquee"), t = z?.("marquee-var"), V = st(
-      B,
-      ct,
-      I?.Marquee
+}, ye = it(
+  function(E, I) {
+    const { getPrefixCls: z, componentConfig: V } = ot(ct), i = z?.("marquee"), t = z?.("marquee-var"), _ = st(
+      E,
+      o,
+      V?.Marquee
     ), {
-      style: W = {},
-      className: _,
-      autoFill: m = !1,
-      play: p = !0,
-      pauseOnHover: C = !1,
-      pauseOnClick: v = !1,
-      direction: e = "left",
-      speed: M = 50,
-      delay: F = 0,
-      loop: q = 0,
-      gradient: D,
-      onFinish: G,
-      onCycleComplete: J,
-      onMount: x,
-      children: h
-    } = V, K = e === "left" || e === "right";
-    let r = D;
-    r === !0 && (r = {}), lt(r) && (r = nt(
-      { size: K ? 50 : 20, color: "#fff" },
+      style: F,
+      className: D,
+      autoFill: l = o.autoFill,
+      play: c = o.play,
+      pauseOnHover: v = o.pauseOnHover,
+      pauseOnClick: M = o.pauseOnClick,
+      direction: e = o.direction,
+      speed: q = o.speed,
+      delay: W = o.delay,
+      loop: x = o.loop,
+      gradient: G,
+      onFinish: J,
+      onCycleComplete: K,
+      onMount: w,
+      children: g
+    } = _, L = e === "left" || e === "right";
+    let r = G;
+    r === !0 && (r = {}), pt(r) && (r = at(
+      { size: L ? 50 : 20, color: "#fff" },
       r
     ));
-    const [O, L] = y(0), [g, Q] = y(0), [$, T] = y(1), [w, U] = y(!1), X = k(null), a = E || X, c = k(null), u = A(() => {
-      if (c.current && a.current) {
-        const o = a.current.getBoundingClientRect(), d = c.current.getBoundingClientRect();
-        let n = o.width, l = d.width;
-        (e === "up" || e === "down") && (n = o.height, l = d.height), T(
-          m && n && l ? Math.max(2, Math.ceil(n / l)) : 1
-        ), L(n), Q(l);
+    const [k, Q] = C(0), [$, T] = C(0), [y, U] = C(1), [N, X] = C(!1), Y = j(null), m = I || Y, u = j(null), d = A(() => {
+      if (u.current && m.current) {
+        const n = m.current.getBoundingClientRect(), f = u.current.getBoundingClientRect();
+        let a = n.width, p = f.width;
+        (e === "up" || e === "down") && (a = n.height, p = f.height), U(
+          l && a && p ? Math.max(2, Math.ceil(a / p)) : 1
+        ), Q(a), T(p);
       }
-    }, [m, a, e]);
-    R(() => {
-      if (!w) return;
-      u();
-      const o = at(
-        [a.current, c.current],
-        u
+    }, [l, m, e]);
+    O(() => {
+      if (!N) return;
+      d();
+      const n = mt(
+        [m.current, u.current],
+        d
       );
       return () => {
-        o();
+        n();
       };
-    }, [u, a, c, w]), R(() => (u(), () => {
-    }), [u, h]), R(() => (U(!0), x && x(), () => {
-    }), [x]);
-    const P = f(() => g ? m ? g * $ / M : Math.max(O, g) / M : 0, [m, O, g, $, M]), Y = f(
+    }, [d, m, u, N]), O(() => (d(), () => {
+    }), [d, g]), O(() => (X(!0), w && w(), () => {
+    }), [w]);
+    const P = h(() => $ ? l ? $ * y / q : Math.max(k, $) / q : 0, [l, k, $, y, q]), Z = h(
       () => ({
-        ...W,
-        [`--${t}-pause-on-hover`]: !p || C ? "paused" : "running",
-        [`--${t}-pause-on-click`]: !p || C && !v || v ? "paused" : "running",
+        ...F,
+        [`--${t}-pause-on-hover`]: !c || v ? "paused" : "running",
+        [`--${t}-pause-on-click`]: !c || v && !M || M ? "paused" : "running",
         [`--${t}-width`]: e === "up" || e === "down" ? "100vh" : "100%",
         [`--${t}-transform`]: e === "up" ? "rotate(-90deg)" : e === "down" ? "rotate(90deg)" : "none"
       }),
-      [W, t, p, C, v, e]
-    ), Z = f(
+      [F, t, c, v, M, e]
+    ), tt = h(
       () => ({
         [`--${t}-gradient-color`]: r?.color,
         [`--${t}-gradient-width`]: typeof r?.size == "number" ? `${r?.size}px` : r?.size
       }),
       [r?.color, r?.size, t]
-    ), S = f(
+    ), S = h(
       () => ({
-        [`--${t}-play`]: p ? "running" : "paused",
+        [`--${t}-play`]: c ? "running" : "paused",
         [`--${t}-direction`]: e === "left" ? "normal" : "reverse",
         [`--${t}-duration`]: `${P}s`,
-        [`--${t}-delay`]: `${F}s`,
-        [`--${t}-iteration-count`]: q ? `${q}` : "infinite",
-        [`--${t}-min-width`]: m ? "auto" : "100%"
+        [`--${t}-delay`]: `${W}s`,
+        [`--${t}-iteration-count`]: x ? `${x}` : "infinite",
+        [`--${t}-min-width`]: l ? "auto" : "100%"
       }),
-      [t, p, e, P, F, q, m]
-    ), N = f(
+      [t, c, e, P, W, x, l]
+    ), R = h(
       () => ({
         [`--${t}-transform`]: e === "up" ? "rotate(90deg)" : e === "down" ? "rotate(-90deg)" : "none"
       }),
       [e, t]
     ), b = A(
-      (o) => Array.from({ length: o }).map((d, n) => /* @__PURE__ */ s(ot, { children: H.map(h, (l, tt) => /* @__PURE__ */ s(
+      (n) => Array.from({ length: n }).map((f, a) => /* @__PURE__ */ s(nt, { children: B.map(g, (p, et) => /* @__PURE__ */ s(
         "div",
         {
-          style: N,
+          style: R,
           className: `${i}-child`,
-          children: l
+          children: p
         },
-        `child-${n}-${tt}`
-      )) }, n)),
-      [h, N, i]
+        `child-${a}-${et}`
+      )) }, a)),
+      [g, R, i]
     );
-    return w ? /* @__PURE__ */ s(et, { children: /* @__PURE__ */ j(
+    return N ? /* @__PURE__ */ s(rt, { children: /* @__PURE__ */ H(
       "div",
       {
-        ref: a,
-        style: Y,
-        className: mt(i, `${i}-${e}`, _),
+        ref: m,
+        style: Z,
+        className: lt(i, `${i}-${e}`, D),
         children: [
-          !!r && /* @__PURE__ */ s("div", { style: Z, className: `${i}-overlay` }),
-          /* @__PURE__ */ j(
+          !!r && /* @__PURE__ */ s("div", { style: tt, className: `${i}-overlay` }),
+          /* @__PURE__ */ H(
             "div",
             {
               style: S,
               className: `${i}-item`,
-              onAnimationIteration: J,
-              onAnimationEnd: G,
+              onAnimationIteration: K,
+              onAnimationEnd: J,
               children: [
                 /* @__PURE__ */ s(
                   "div",
                   {
-                    ref: c,
+                    ref: u,
                     className: `${i}-initial-child-container`,
-                    children: H.map(h, (o, d) => /* @__PURE__ */ s(
+                    children: B.map(g, (n, f) => /* @__PURE__ */ s(
                       "div",
                       {
-                        style: N,
+                        style: R,
                         className: `${i}-child`,
-                        children: o
+                        children: n
                       },
-                      `original-${d}`
+                      `original-${f}`
                     ))
                   }
                 ),
-                b($ - 1)
+                b(y - 1)
               ]
             }
           ),
-          /* @__PURE__ */ s("div", { style: S, className: `${i}-item`, children: b($) })
+          /* @__PURE__ */ s("div", { style: S, className: `${i}-item`, children: b(y) })
         ]
       }
     ) }) : null;

package/package.json

@@ -1 +1 @@
-{"name":"@unicom-cloud/ui","version":"0.8.103","dependencies":{"@unicom-cloud/icons":"latest"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1","dayjs":"^1.11.10","lodash":"^4.17.21","uuid":"^11.1.0","qrcode.react":"^4.2.0"},"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.104","dependencies":{"@unicom-cloud/icons":"latest"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1","dayjs":"^1.11.10","lodash":"^4.17.21","uuid":"^11.1.0","qrcode.react":"^4.2.0"},"peerDependenciesMeta":{},"type":"module","types":"types/pc/index.d.ts","main":"./index.js","publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"}}

package/spin/DotLoading.js

@@ -3,7 +3,7 @@ import m from "lodash/isNumber";
 import { useContext as a } from "react";
 import "../config-provider/ConfigProvider.js";
 import l from "../config-provider/context.js";
-function x(t) {
+function z(t) {
   const { getPrefixCls: r } = a(l), i = `${r?.("spin")}-dot`, o = {
     width: t.size,
     height: t.size
@@ -16,10 +16,10 @@ function x(t) {
         height: t.size,
         width: m(e) && e > 0 ? e * 7 : ""
       },
-      children: [...new Array(5)].map((d, n) => /* @__PURE__ */ s("div", { className: i, style: o }, n))
+      children: [...new Array(5)].map((d, n, f) => /* @__PURE__ */ s("div", { className: i, style: o }, n))
     }
   );
 }
 export {
-  x as default
+  z as default
 };