@unicom-cloud/ui 0.8.127 → 0.8.128

package/color-picker/InputHex.js

@@ -1,4 +1,4 @@
-/* 2025-11-28 16:31:06 */
+/* 2025-12-17 18:27:10 */
 import { jsxs as g, jsx as p } from "react/jsx-runtime";
 import f from "@unicom-cloud/utils/tinycolor";
 import { useContext as v, useState as I, useEffect as P } from "react";

package/color-picker/InputRgb.js

@@ -1,4 +1,4 @@
-/* 2025-11-28 16:31:06 */
+/* 2025-12-17 18:27:10 */
 import { jsxs as f, jsx as n } from "react/jsx-runtime";
 import x from "@unicom-cloud/utils/tinycolor";
 import { useContext as h } from "react";

package/color-picker/Mode.js

@@ -1,4 +1,4 @@
-/* 2025-11-28 16:31:06 */
+/* 2025-12-17 18:27:10 */
 import { isArray as i, isString as o } from "@unicom-cloud/ui-common/utils/is";
 import { ColorPickerMode as t } from "./interface.js";
 const e = (r) => i(r) && r.length === 1 ? r[0] : r, f = (r) => e(r) === t.Single, u = (r) => e(r) === t.Gradient, g = (r) => i(e(r)), c = (r) => g(r) ? t.Gradient : r, G = (r, n, s) => r && i(r) ? t.Gradient : r && o(r) ? t.Single : n && i(n) ? t.Gradient : n && o(n) ? t.Single : c(s);

package/color-picker/Palette.js

@@ -1,4 +1,4 @@
-/* 2025-11-28 16:31:06 */
+/* 2025-12-17 18:27:10 */
 import { jsx as s } from "react/jsx-runtime";
 import u from "@unicom-cloud/utils/tinycolor";
 import { useContext as d, useMemo as x } from "react";

package/color-picker/Panel.js

@@ -1,34 +1,34 @@
-/* 2025-11-28 16:31:06 */
+/* 2025-12-17 18:27:10 */
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import d from "@unicom-cloud/utils/tinycolor";
-import { useContext as cr, useState as ar, useMemo as sr } from "react";
+import { useContext as sr, useState as dr, useMemo as mr } from "react";
 import "../config-provider/ConfigProvider.js";
 import C from "../radio/Radio.js";
 import "../radio/Group.js";
-import dr from "../select/Select.js";
+import ur from "../select/Select.js";
 import E from "../tooltip/index.js";
-import mr from "@unicom-cloud/ui-common/utils/className";
-import { isFunction as ur } from "@unicom-cloud/ui-common/utils/is";
+import F from "@unicom-cloud/ui-common/utils/className";
+import { isFunction as pr } from "@unicom-cloud/ui-common/utils/is";
 import { ControlBar as k } from "./ControlBar.js";
-import { InputHex as pr } from "./InputHex.js";
-import { InputRgb as gr } from "./InputRgb.js";
-import { ColorPickerMode as F } from "./interface.js";
-import { isMultiMode as H, isGradientMode as X } from "./Mode.js";
-import { Palette as br } from "./Palette.js";
-import { renderBackground as fr, sortGradientColors as _, getColorByGradients as vr } from "./utils.js";
-import hr from "../config-provider/context.js";
-const Fr = ({
-  value: D,
+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";
+const Hr = ({
+  value: J,
   mode: y,
   activeMode: h,
   gradientColors: m,
-  activeColorId: J,
-  refActiveColorId: K,
+  activeColorId: K,
+  refActiveColorId: L,
   color: a,
   alpha: u,
   disabledAlpha: $,
   historyColors: x,
-  presetColors: L,
+  presetColors: O,
   showHistory: S,
   showPreset: w,
   renderPreset: P,
@@ -37,18 +37,19 @@ const Fr = ({
   renderFooter: G,
   onHsvChange: s,
   onAlphaChange: p,
-  onActiveModeChange: O,
+  onActiveModeChange: Q,
   onGradientColorsChange: M,
   onActiveColorIdChange: I
 }) => {
   const {
-    prefixCls: $r,
-    getPrefixCls: Q,
-    locale: g
-  } = cr(hr), r = Q?.("color-picker"), [T, U] = ar("hex"), j = sr(() => {
+    prefixCls: Nr,
+    getPrefixCls: U,
+    locale: g,
+    rtl: V
+  } = sr($r), r = U?.("color-picker"), [T, W] = dr("hex"), j = mr(() => {
     const n = new Set(x ?? []);
     return Array.from(n);
-  }, [x]), { h: z, s: V, v: W } = a.hsv, { r: b, g: f, b: v } = a.rgb, Y = (n) => {
+  }, [x]), { h: z, s: Y, v: Z } = a.hsv, { r: b, g: f, b: v } = a.rgb, A = (n) => {
     let l = new d(n);
     l.ok || (l = new d({
       r: 255,
@@ -57,30 +58,30 @@ const Fr = ({
     }));
     const t = l.toHsv_();
     s(t);
-  }, Z = () => /* @__PURE__ */ i(
+  }, rr = () => /* @__PURE__ */ i(
     C.Group,
     {
       className: `${r}-panel-control-gradient-tag`,
       type: "button",
       size: "small",
       value: h,
-      onChange: O,
+      onChange: Q,
       children: [
-        /* @__PURE__ */ e(C, { value: F.Single, children: g?.ColorPicker?.singleColor }),
-        /* @__PURE__ */ e(C, { value: F.Gradient, children: g?.ColorPicker?.gradientColor })
+        /* @__PURE__ */ e(C, { value: H.Single, children: g?.ColorPicker?.singleColor }),
+        /* @__PURE__ */ e(C, { value: H.Gradient, children: g?.ColorPicker?.gradientColor })
       ]
     }
-  ), A = (n) => {
+  ), er = (n) => {
     const l = Math.round(n * 100);
-    M((t) => _(
-      t.map((o) => o.id === K.current ? {
+    M((t) => D(
+      t.map((o) => o.id === L.current ? {
         ...o,
         percent: l
       } : o)
     ));
-  }, rr = () => {
+  }, nr = () => {
     const n = (t) => {
-      const o = Math.round(t * 100), c = vr(m, o), N = _(m.concat(c));
+      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);
     }, l = (t) => {
       const o = m.find((c) => c.id === t);
@@ -95,12 +96,12 @@ const Fr = ({
           key: o
         })),
         onAdd: n,
-        onChange: A,
+        onChange: er,
         onActive: l,
         style: {
-          background: fr(D)
+          background: vr(J)
         },
-        renderHandlerStyle: (t) => J === t ? {
+        renderHandlerStyle: (t) => K === t ? {
           outline: "1px solid rgb(var(--pqb-primary-6))"
         } : {},
         renderHandlerCenterStyle: (t) => {
@@ -108,16 +109,16 @@ const Fr = ({
             color: {
               rgb: { r: o, g: c, b: N }
             },
-            alpha: lr
-          } = m.find((ir) => ir.id === t);
+            alpha: cr
+          } = m.find((ar) => ar.id === t);
           return {
-            background: new d({ r: o, g: c, b: N, a: lr }).toRgbaString()
+            background: new d({ r: o, g: c, b: N, a: cr }).toRgbaString()
           };
         }
       }
     ) });
-  }, er = () => T === "rgb" ? /* @__PURE__ */ e(
-    gr,
+  }, tr = () => T === "rgb" ? /* @__PURE__ */ e(
+    br,
     {
       color: a,
       alpha: u,
@@ -126,7 +127,7 @@ const Fr = ({
       disabledAlpha: $
     }
   ) : /* @__PURE__ */ e(
-    pr,
+    gr,
     {
       color: a,
       alpha: u,
@@ -139,7 +140,7 @@ const Fr = ({
     {
       className: `${r}-color-block`,
       onClick: (l) => {
-        Y(n);
+        A(n);
       },
       children: /* @__PURE__ */ e(
         "div",
@@ -150,124 +151,133 @@ const Fr = ({
       )
     },
     n
-  ) }, n), nr = () => R ? R() : S ? /* @__PURE__ */ i("div", { className: `${r}-colors-section`, children: [
+  ) }, n), or = () => R ? R() : 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, tr = () => P ? P() : w ? /* @__PURE__ */ i("div", { className: `${r}-colors-section`, children: [
+  ] }) : null, lr = () => P ? P() : w ? /* @__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: L?.map?.(q) }) })
-  ] }) : null, or = () => B ? B() : S || w ? /* @__PURE__ */ i("div", { className: `${r}-panel-colors`, children: [
-    nr(),
-    tr()
+    /* @__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: [
+    or(),
+    lr()
   ] }) : null;
-  return /* @__PURE__ */ i("div", { className: `${r}-panel`, children: [
-    /* @__PURE__ */ i(
-      "div",
-      {
-        className: mr(
-          (H(y) || X(h)) && `${r}-panel-control-gradient`
-        ),
-        children: [
-          H(y) && Z(),
-          X(h) && rr(),
-          /* @__PURE__ */ e(
-            br,
-            {
-              color: a,
-              onChange: (n, l) => {
-                s({ h: z, s: n, v: l });
-              }
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ i("div", { className: `${r}-panel-control`, children: [
-      /* @__PURE__ */ i("div", { className: `${r}-control-wrapper`, children: [
-        /* @__PURE__ */ i("div", { children: [
-          /* @__PURE__ */ e(
-            k,
-            {
-              className: `${r}-control-bar-hue`,
-              value: z,
-              onChange: (n) => s({ h: n, s: V, v: W }),
-              renderHandlerCenterStyle: () => ({
-                background: new d({ r: b, g: f, b: v }).toRgbString()
-              })
-            }
-          ),
-          !$ && /* @__PURE__ */ e("div", { className: `${r}-control-bar-bg`, children: /* @__PURE__ */ e(
-            k,
-            {
-              className: `${r}-control-bar-alpha`,
-              style: {
-                background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${b}, ${f}, ${v}))`
-              },
-              value: u,
-              onChange: p,
-              renderHandlerCenterStyle: () => ({
-                background: new d({
-                  r: b,
-                  g: f,
-                  b: v,
-                  a: u
-                }).toRgbaString()
-              })
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ e(E, { mini: !0, content: a.hex8String, color: a.string, children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: F(
+        `${r}-panel`,
+        V && `${r}-panel-rtl`
+      ),
+      children: [
+        /* @__PURE__ */ i(
           "div",
           {
-            className: `${r}-preview`,
-            style: {
-              backgroundColor: new d({
-                r: b,
-                g: f,
-                b: v,
-                a: u
-              }).toRgbaString()
-            }
+            className: F(
+              (X(y) || _(h)) && `${r}-panel-control-gradient`
+            ),
+            children: [
+              X(y) && rr(),
+              _(h) && nr(),
+              /* @__PURE__ */ e(
+                fr,
+                {
+                  color: a,
+                  onChange: (n, l) => {
+                    s({ h: z, s: n, v: l });
+                  }
+                }
+              )
+            ]
           }
-        ) })
-      ] }),
-      /* @__PURE__ */ i("div", { className: `${r}-input-wrapper`, children: [
-        /* @__PURE__ */ e(
-          dr,
-          {
-            className: `${r}-select-type`,
-            size: "mini",
-            options: [
-              {
-                value: "hex",
-                label: "HEX"
-              },
-              // {
-              //   value: 'hsl',
-              //   label: 'HSL',
-              // },
+        ),
+        /* @__PURE__ */ i("div", { className: `${r}-panel-control`, children: [
+          /* @__PURE__ */ i("div", { className: `${r}-control-wrapper`, children: [
+            /* @__PURE__ */ i("div", { children: [
+              /* @__PURE__ */ e(
+                k,
+                {
+                  className: `${r}-control-bar-hue`,
+                  value: z,
+                  onChange: (n) => s({ h: n, s: Y, v: Z }),
+                  renderHandlerCenterStyle: () => ({
+                    background: new d({ r: b, g: f, b: v }).toRgbString()
+                  })
+                }
+              ),
+              !$ && /* @__PURE__ */ e("div", { className: `${r}-control-bar-bg`, children: /* @__PURE__ */ e(
+                k,
+                {
+                  className: `${r}-control-bar-alpha`,
+                  style: {
+                    background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${b}, ${f}, ${v}))`
+                  },
+                  value: u,
+                  onChange: p,
+                  renderHandlerCenterStyle: () => ({
+                    background: new d({
+                      r: b,
+                      g: f,
+                      b: v,
+                      a: u
+                    }).toRgbaString()
+                  })
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ e(E, { mini: !0, content: a.hex8String, color: a.string, children: /* @__PURE__ */ e(
+              "div",
               {
-                value: "rgb",
-                label: "RGB"
+                className: `${r}-preview`,
+                style: {
+                  backgroundColor: new d({
+                    r: b,
+                    g: f,
+                    b: v,
+                    a: u
+                  }).toRgbaString()
+                }
               }
-            ],
-            value: T,
-            triggerProps: {
-              className: `${r}-type-dropdown`,
-              getPopupContainer() {
-                return document.body;
+            ) })
+          ] }),
+          /* @__PURE__ */ i("div", { className: `${r}-input-wrapper`, children: [
+            /* @__PURE__ */ e(
+              ur,
+              {
+                className: `${r}-select-type`,
+                size: "mini",
+                options: [
+                  {
+                    value: "hex",
+                    label: "HEX"
+                  },
+                  // {
+                  //   value: 'hsl',
+                  //   label: 'HSL',
+                  // },
+                  {
+                    value: "rgb",
+                    label: "RGB"
+                  }
+                ],
+                value: T,
+                triggerProps: {
+                  className: `${r}-type-dropdown`,
+                  getPopupContainer() {
+                    return document.body;
+                  }
+                },
+                onChange: W
               }
-            },
-            onChange: U
-          }
-        ),
-        /* @__PURE__ */ e("div", { className: `${r}-group-wrapper`, children: er() })
-      ] })
-    ] }),
-    or(),
-    ur(G) ? G() : null
-  ] });
+            ),
+            /* @__PURE__ */ e("div", { className: `${r}-group-wrapper`, children: tr() })
+          ] })
+        ] }),
+        ir(),
+        pr(G) ? G() : null
+      ]
+    }
+  );
 };
 export {
-  Fr as Panel
+  Hr as Panel
 };

package/color-picker/colors.js

@@ -1,4 +1,4 @@
-/* 2025-11-28 16:31:06 */
+/* 2025-12-17 18:27:10 */
 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,4 +1,4 @@
-/* 2025-11-28 16:31:06 */
+/* 2025-12-17 18:27:10 */
 import P from "@unicom-cloud/utils/tinycolor";
 import { useState as g, useRef as k, useMemo as G, useCallback as y, useEffect as M } from "react";
 import $ from "@unicom-cloud/ui-common/hooks/use-is-first-render";

package/color-picker/hooks/useControlBlock.js

@@ -1,4 +1,4 @@
-/* 2025-11-28 16:31:06 */
+/* 2025-12-17 18:27:10 */
 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({