@unicom-cloud/ui 0.8.147 → 0.8.149

package/color-picker/Panel.js

@@ -1,25 +1,26 @@
-/* 2026-01-29 15:15:33 */
+/* 2026-03-02 09:28:59 */
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import d from "@unicom-cloud/utils/tinycolor";
-import { useContext as sr, useState as dr, useMemo as mr } from "react";
+import { useContext as sr, useMemo as dr } from "react";
 import "../config-provider/ConfigProvider.js";
 import C from "../radio/Radio.js";
 import "../radio/Group.js";
-import ur from "../select/Select.js";
+import mr from "../select/Select.js";
 import E from "../tooltip/Tooltip.js";
-import F from "@unicom-cloud/ui-common/utils/className";
-import { isFunction as pr } from "@unicom-cloud/ui-common/utils/is";
+import H from "@unicom-cloud/ui-common/utils/className";
+import { isFunction as ur } from "@unicom-cloud/ui-common/utils/is";
 import { ControlBar as k } from "./ControlBar.js";
-import { InputHex as gr } from "./InputHex.js";
-import { InputRgb as br } from "./InputRgb.js";
-import { ColorPickerMode as H } from "./interface.js";
-import { isMultiMode as X, isGradientMode as _ } from "./Mode.js";
-import { Palette as fr } from "./Palette.js";
-import { renderBackground as vr, sortGradientColors as D, getColorByGradients as hr } from "./utils.js";
-import $r from "../config-provider/context.js";
+import { InputHex as pr } from "./InputHex.js";
+import { InputRgb as gr } from "./InputRgb.js";
+import { ColorPickerMode as X } from "./interface.js";
+import { isMultiMode as _, isGradientMode as D } from "./Mode.js";
+import { Palette as br } from "./Palette.js";
+import { renderBackground as vr, sortGradientColors as F, getColorByGradients as fr } from "./utils.js";
+import hr from "../config-provider/context.js";
 const Hr = ({
   value: J,
   mode: y,
+  format: x,
   activeMode: h,
   gradientColors: m,
   activeColorId: K,
@@ -27,29 +28,30 @@ const Hr = ({
   color: a,
   alpha: u,
   disabledAlpha: $,
-  historyColors: x,
+  historyColors: w,
   presetColors: O,
   showHistory: S,
-  showPreset: w,
-  renderPreset: P,
-  renderHistory: R,
-  renderPickSection: B,
-  renderFooter: G,
+  showPreset: P,
+  renderPreset: R,
+  renderHistory: B,
+  renderPickSection: G,
+  renderFooter: M,
   onHsvChange: s,
   onAlphaChange: p,
   onActiveModeChange: Q,
-  onGradientColorsChange: M,
-  onActiveColorIdChange: I
+  onGradientColorsChange: I,
+  onActiveColorIdChange: T,
+  onFormatChange: U
 }) => {
   const {
-    prefixCls: Nr,
-    getPrefixCls: U,
+    prefixCls: $r,
+    getPrefixCls: V,
     locale: g,
-    rtl: V
-  } = sr($r), r = U?.("color-picker"), [T, W] = dr("hex"), j = mr(() => {
-    const n = new Set(x ?? []);
+    rtl: W
+  } = sr(hr), r = V?.("color-picker"), j = dr(() => {
+    const n = new Set(w ?? []);
     return Array.from(n);
-  }, [x]), { h: z, s: Y, v: Z } = a.hsv, { r: b, g: f, b: v } = a.rgb, A = (n) => {
+  }, [w]), { h: z, s: Y, v: Z } = a.hsv, { r: b, g: v, b: f } = a.rgb, A = (n) => {
     let l = new d(n);
     l.ok || (l = new d({
       r: 255,
@@ -67,13 +69,13 @@ const Hr = ({
       value: h,
       onChange: Q,
       children: [
-        /* @__PURE__ */ e(C, { value: H.Single, children: g?.ColorPicker?.singleColor }),
-        /* @__PURE__ */ e(C, { value: H.Gradient, children: g?.ColorPicker?.gradientColor })
+        /* @__PURE__ */ e(C, { value: X.Single, children: g?.ColorPicker?.singleColor }),
+        /* @__PURE__ */ e(C, { value: X.Gradient, children: g?.ColorPicker?.gradientColor })
       ]
     }
   ), er = (n) => {
     const l = Math.round(n * 100);
-    M((t) => D(
+    I((t) => F(
       t.map((o) => o.id === L.current ? {
         ...o,
         percent: l
@@ -81,11 +83,11 @@ const Hr = ({
     ));
   }, nr = () => {
     const n = (t) => {
-      const o = Math.round(t * 100), c = hr(m, o), N = D(m.concat(c));
-      M(N), I(c.id), s(c.color.hsv), p(c.alpha);
+      const o = Math.round(t * 100), c = fr(m, o), N = F(m.concat(c));
+      I(N), T(c.id), s(c.color.hsv), p(c.alpha);
     }, l = (t) => {
       const o = m.find((c) => c.id === t);
-      I(t), s(o.color.hsv), p(o.alpha);
+      T(t), s(o.color.hsv), p(o.alpha);
     };
     return /* @__PURE__ */ e("div", { className: `${r}-control-bar-gradient`, children: /* @__PURE__ */ e(
       k,
@@ -117,8 +119,8 @@ const Hr = ({
         }
       }
     ) });
-  }, tr = () => T === "rgb" ? /* @__PURE__ */ e(
-    br,
+  }, tr = () => x === "rgb" ? /* @__PURE__ */ e(
+    gr,
     {
       color: a,
       alpha: u,
@@ -127,7 +129,7 @@ const Hr = ({
       disabledAlpha: $
     }
   ) : /* @__PURE__ */ e(
-    gr,
+    pr,
     {
       color: a,
       alpha: u,
@@ -151,35 +153,35 @@ const Hr = ({
       )
     },
     n
-  ) }, n), or = () => R ? R() : S ? /* @__PURE__ */ i("div", { className: `${r}-colors-section`, children: [
+  ) }, n), or = () => B ? B() : S ? /* @__PURE__ */ i("div", { className: `${r}-colors-section`, children: [
     /* @__PURE__ */ e("div", { className: `${r}-colors-text`, children: g?.ColorPicker?.history }),
     /* @__PURE__ */ e("div", { className: `${r}-colors-wrapper`, children: j?.length ? /* @__PURE__ */ e("div", { className: `${r}-colors-list`, children: j.map(q) }) : /* @__PURE__ */ e("span", { className: `${r}-colors-empty`, children: g?.ColorPicker?.empty }) })
-  ] }) : null, lr = () => P ? P() : w ? /* @__PURE__ */ i("div", { className: `${r}-colors-section`, children: [
+  ] }) : null, lr = () => R ? R() : P ? /* @__PURE__ */ i("div", { className: `${r}-colors-section`, children: [
     /* @__PURE__ */ e("div", { className: `${r}-colors-text`, children: g?.ColorPicker?.preset }),
     /* @__PURE__ */ e("div", { className: `${r}-colors-wrapper`, children: /* @__PURE__ */ e("div", { className: `${r}-colors-list`, children: O?.map?.(q) }) })
-  ] }) : null, ir = () => B ? B() : S || w ? /* @__PURE__ */ i("div", { className: `${r}-panel-colors`, children: [
+  ] }) : null, ir = () => G ? G() : S || P ? /* @__PURE__ */ i("div", { className: `${r}-panel-colors`, children: [
     or(),
     lr()
   ] }) : null;
   return /* @__PURE__ */ i(
     "div",
     {
-      className: F(
+      className: H(
         `${r}-panel`,
-        V && `${r}-panel-rtl`
+        W && `${r}-panel-rtl`
       ),
       children: [
         /* @__PURE__ */ i(
           "div",
           {
-            className: F(
-              (X(y) || _(h)) && `${r}-panel-control-gradient`
+            className: H(
+              (_(y) || D(h)) && `${r}-panel-control-gradient`
             ),
             children: [
-              X(y) && rr(),
-              _(h) && nr(),
+              _(y) && rr(),
+              D(h) && nr(),
               /* @__PURE__ */ e(
-                fr,
+                br,
                 {
                   color: a,
                   onChange: (n, l) => {
@@ -200,7 +202,7 @@ const Hr = ({
                   value: z,
                   onChange: (n) => s({ h: n, s: Y, v: Z }),
                   renderHandlerCenterStyle: () => ({
-                    background: new d({ r: b, g: f, b: v }).toRgbString()
+                    background: new d({ r: b, g: v, b: f }).toRgbString()
                   })
                 }
               ),
@@ -209,15 +211,15 @@ const Hr = ({
                 {
                   className: `${r}-control-bar-alpha`,
                   style: {
-                    background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${b}, ${f}, ${v}))`
+                    background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${b}, ${v}, ${f}))`
                   },
                   value: u,
                   onChange: p,
                   renderHandlerCenterStyle: () => ({
                     background: new d({
                       r: b,
-                      g: f,
-                      b: v,
+                      g: v,
+                      b: f,
                       a: u
                     }).toRgbaString()
                   })
@@ -231,8 +233,8 @@ const Hr = ({
                 style: {
                   backgroundColor: new d({
                     r: b,
-                    g: f,
-                    b: v,
+                    g: v,
+                    b: f,
                     a: u
                   }).toRgbaString()
                 }
@@ -241,7 +243,7 @@ const Hr = ({
           ] }),
           /* @__PURE__ */ i("div", { className: `${r}-input-wrapper`, children: [
             /* @__PURE__ */ e(
-              ur,
+              mr,
               {
                 className: `${r}-select-type`,
                 size: "mini",
@@ -259,21 +261,21 @@ const Hr = ({
                     label: "RGB"
                   }
                 ],
-                value: T,
+                value: x,
                 triggerProps: {
                   className: `${r}-type-dropdown`,
                   getPopupContainer() {
                     return document.body;
                   }
                 },
-                onChange: W
+                onChange: U
               }
             ),
             /* @__PURE__ */ e("div", { className: `${r}-group-wrapper`, children: tr() })
           ] })
         ] }),
         ir(),
-        pr(G) ? G() : null
+        ur(M) ? M() : null
       ]
     }
   );

package/color-picker/colors.js

@@ -1,4 +1,4 @@
-/* 2026-01-29 15:15:33 */
+/* 2026-03-02 09:28:59 */
 import t from "@unicom-cloud/utils/tinycolor";
 import * as e from "@unicom-cloud/utils/ui-color";
 new t("#eee");

package/color-picker/hooks/useColorPicker.js

@@ -1,118 +1,118 @@
-/* 2026-01-29 15:15:33 */
+/* 2026-03-02 09:28:59 */
 import S from "@unicom-cloud/utils/tinycolor";
-import { useState as g, useRef as F, useEffect as A } from "react";
+import { useState as f, useRef as F, useEffect as A } from "react";
 import Z from "@unicom-cloud/ui-common/hooks/use-is-first-render";
 import P from "@unicom-cloud/ui-common/hooks/use-merge-value";
 import { callOrReturn as y } from "@unicom-cloud/utils/function";
 import { isArray as k, isFunction as $ } from "@unicom-cloud/ui-common/utils/is";
 import { ColorPickerMode as I } from "../interface.js";
-import { getModeByValue as w, isGradientMode as G, isSingleMode as oo } from "../Mode.js";
+import { getModeByValue as w, isGradientMode as b, isSingleMode as oo } from "../Mode.js";
 import { mapValueToGradientColor as eo, getColorFromHsv as q, isEqualsColors as to, equalsHsv as ro, formatRgba as no, formatHex as io, getRandomId as E } from "../utils.js";
-const po = (a) => {
+const po = (s) => {
   const {
     mode: T = I.Single,
     defaultValue: B,
     format: O,
     onChange: j,
     disabledAlpha: p
-  } = a, z = Z(), [H, D] = P(!1, {
-    defaultValue: a.defaultPopupVisible,
-    value: a.popupVisible
-  }), [n, J] = g(
+  } = s, z = Z(), [G, D] = P(!1, {
+    defaultValue: s.defaultPopupVisible,
+    value: s.popupVisible
+  }), [a, J] = f(
     w(
-      a.value,
+      s.value,
       B,
       T
     )
-  ), [i, K] = P(
-    n === I.Gradient ? void 0 : "",
-    a
-  ), [M, L] = g(
-    G(n) && k(i) ? eo(i, p) : []
-  ), [N, Q] = g(M[0]?.id), m = F(M), h = F(N), e = m.current, R = h.current, v = (o) => {
+  ), [r, K] = P(
+    a === I.Gradient ? void 0 : "",
+    s
+  ), [H, L] = f(
+    b(a) && k(r) ? eo(r, p) : []
+  ), [N, Q] = f(H[0]?.id), m = F(H), h = F(N), e = m.current, M = h.current, v = (o) => {
     L(o), m.current = $(o) ? o(m.current) : o;
-  }, _ = (o) => {
+  }, R = (o) => {
     Q(o), h.current = o;
   }, c = y(() => {
     const o = e.findIndex(
-      (t) => t.id === R
+      (t) => t.id === M
     );
     return o !== -1 ? o : 0;
-  }), u = k(i) ? new S(i[c].color).toHsv_() : new S(i).toHsv_(), [C, x] = g({
+  }), u = k(r) ? new S(r[c].color).toHsv_() : new S(r).toHsv_(), [C, _] = f({
     h: u.h,
     s: u.s,
     v: u.v
-  }), [r, V] = g(u.a), d = q(C), b = (o, t, s, l) => O === "rgb" ? no(o, t, s, l) : io(o, t, s, l), f = y(() => {
-    if (oo(n)) {
-      const { r: o, g: t, b: s } = d.rgb;
-      return b(o, t, s, r);
+  }), [n, V] = f(u.a), g = q(C), x = (o, t, i, l) => O === "rgb" ? no(o, t, i, l) : io(o, t, i, l), d = y(() => {
+    if (oo(a)) {
+      const { r: o, g: t, b: i } = g.rgb;
+      return x(o, t, i, n);
     }
     return e.map((o) => {
-      const { r: t, g: s, b: l } = o.color.rgb;
+      const { r: t, g: i, b: l } = o.color.rgb;
       return {
-        color: b(t, s, l, o.alpha),
+        color: x(t, i, l, o.alpha),
         percent: o.percent
       };
     });
-  }, [n, e, d.rgb, b, r]);
+  });
   A(() => {
-    K(f), !z && !to(i, f) && j?.(f);
-  }, [f]);
+    K(d), !z && !to(r, d) && j?.(d);
+  }, [d]);
   const U = (o) => {
-    if (o && i !== f) {
-      const { h: t, s, v: l, a: Y } = u;
-      x({ h: t, s, v: l }), V(Y);
+    if (o && r !== d) {
+      const { h: t, s: i, v: l, a: Y } = u;
+      _({ h: t, s: i, v: l }), V(Y);
     }
-    o !== H && (a.onVisibleChange?.(o), "popupVisible" in a || D(o));
+    o !== G && (s.onVisibleChange?.(o), "popupVisible" in s || D(o));
   }, W = (o) => {
-    x(o), p && r !== 100 && V(100);
+    _(o), p && n !== 100 && V(100);
   }, X = (o) => {
     V(o);
   };
   return A(() => {
-    if (!G(n) || !e.length || ro(e[c].color.hsv, C)) return;
+    if (!b(a) || !e.length || ro(e[c].color.hsv, C)) return;
     const o = [...e];
     o[c] = {
       ...o[c],
       color: q(C)
     }, v(o);
   }, [C]), A(() => {
-    if (!G(n) || !e.length || e[c].alpha === r) return;
+    if (!b(a) || !e.length || e[c].alpha === n) return;
     const o = [...e];
     o[c] = {
       ...o[c],
-      alpha: p ? 100 : r
+      alpha: p ? 100 : n
     }, v(o);
-  }, [r]), {
-    value: i,
-    activeMode: n,
+  }, [n]), {
+    value: r,
+    activeMode: a,
     gradientColors: e,
     refGradientColors: m,
-    activeColorId: R,
+    activeColorId: M,
     refActiveColorId: h,
-    popupVisible: H,
-    color: d,
-    alpha: r,
+    popupVisible: G,
+    color: g,
+    alpha: n,
     onHsvChange: W,
     onAlphaChange: X,
     onVisibleChange: U,
     onActiveModeChange: (o) => {
-      o !== n && (o === I.Single ? _(e[0]?.id) : v([
+      o !== a && (o === I.Single ? R(e[0]?.id) : v([
         {
           id: E(),
-          color: d,
-          alpha: r,
+          color: g,
+          alpha: n,
           percent: 0
         },
         {
           id: E(),
-          color: d,
-          alpha: r,
+          color: g,
+          alpha: n,
           percent: 100
         }
       ]), J(o));
     },
-    onActiveColorIdChange: _,
+    onActiveColorIdChange: R,
     onGradientColorsChange: v
   };
 };

package/color-picker/hooks/useControlBlock.js

@@ -1,4 +1,4 @@
-/* 2026-01-29 15:15:33 */
+/* 2026-03-02 09:28:59 */
 import { useState as y, useRef as w, useEffect as h } from "react";
 import { isUndefined as x } from "@unicom-cloud/ui-common/utils/is";
 function D({