@unicom-cloud/ui 0.8.89 → 0.8.91

package/color-picker/ControlBar.js

@@ -1,63 +1,64 @@
 import { jsx as p } from "react/jsx-runtime";
 import { useContext as B } from "react";
-import { a as C } from "../chunk/B44Hj5ad.js";
-import R from "@unicom-cloud/utils/class-name";
-import { u as g } from "../chunk/k-OUstoD.js";
-const q = ({
-  className: u,
-  style: h,
+import "../config-provider/ConfigProvider.js";
+import C from "@unicom-cloud/utils/class-name";
+import { useControlBlock as R } from "./hooks/useControlBlock.js";
+import g from "../config-provider/context.js";
+const z = ({
+  className: h,
+  style: u,
   multiple: m = !1,
-  value: a,
+  value: c,
   onActive: N,
   onAdd: k,
   onChange: v,
-  renderHandlerStyle: f,
-  renderHandlerCenterStyle: t
+  renderHandlerStyle: t,
+  renderHandlerCenterStyle: f
 }) => {
-  const { getPrefixCls: r } = B(C), n = r == null ? void 0 : r("color-picker"), { blockRef: $, handlerRef: x, onMouseDown: b } = g({
+  const { getPrefixCls: r } = B(g), n = r == null ? void 0 : r("color-picker"), { blockRef: $, handlerRef: x, onMouseDown: b } = R({
     multiple: m,
-    value: m ? a.map((o) => ({
+    value: m ? c.map((o) => ({
       value: [o.value / 100, 0],
       key: o.key
-    })) : [a, 0],
+    })) : [c, 0],
     onChange: (o) => v(o[0]),
     onAdd: (o) => k(o[0]),
     onActive: N
   }), l = () => {
-    const o = (c, s, i) => /* @__PURE__ */ p(
+    const o = (a, s, i) => /* @__PURE__ */ p(
       "div",
       {
         ref: x,
         className: `${n}-handler`,
         style: {
-          left: `${c * 100}%`,
-          ...f == null ? void 0 : f(s, i)
+          left: `${a * 100}%`,
+          ...t == null ? void 0 : t(s, i)
         },
         "data-key": s,
         children: /* @__PURE__ */ p(
           "div",
           {
             className: `${n}-handler-center`,
-            style: t == null ? void 0 : t(s, i),
+            style: f == null ? void 0 : f(s, i),
             "data-key": s
           }
         )
       },
       s
     );
-    return m ? a.map((c, s) => o(c.value, c.key, s)) : o(a);
+    return m ? c.map((a, s) => o(a.value, a.key, s)) : o(c);
   };
   return /* @__PURE__ */ p(
     "div",
     {
       ref: $,
-      style: h,
-      className: R(`${n}-control-bar`, u),
+      style: u,
+      className: C(`${n}-control-bar`, h),
       onMouseDown: b,
       children: l()
     }
   );
 };
 export {
-  q as ControlBar
+  z as ControlBar
 };

package/color-picker/InputAlpha.js

@@ -1,22 +1,23 @@
 import { jsx as p } from "react/jsx-runtime";
-import { useContext as a } from "react";
-import { a as e } from "../chunk/B44Hj5ad.js";
-import { InputNumber as i } from "../input/Input.js";
-const x = ({ value: n, onChange: t }) => {
-  const { getPrefixCls: o } = a(e), r = o == null ? void 0 : o("color-picker");
+import { useContext as i } from "react";
+import "../config-provider/ConfigProvider.js";
+import e from "../input-number/index.js";
+import a from "../config-provider/context.js";
+const l = ({ value: t, onChange: n }) => {
+  const { getPrefixCls: o } = i(a), r = o == null ? void 0 : o("color-picker");
   return /* @__PURE__ */ p(
-    i,
+    e,
     {
       className: `${r}-input-alpha`,
       size: "mini",
       min: 0,
       max: 100,
-      value: Math.round(n * 100),
+      value: Math.round(t * 100),
       suffix: "%",
-      onChange: (m) => t(m / 100)
+      onChange: (m) => n(m / 100)
     }
   );
 };
 export {
-  x as InputAlpha
+  l as InputAlpha
 };

package/color-picker/InputHex.js

@@ -1,26 +1,28 @@
-import { jsxs as v, jsx as m } from "react/jsx-runtime";
-import { c as u } from "../chunk/9TSjT7x_.js";
+import { jsxs as v, jsx as c } from "react/jsx-runtime";
+import "../dist/tinycolor/chunk/DGZSWe7E.js";
+import { TinyColor as u } from "../dist/tinycolor/src/index.js";
 import { useContext as I, useState as j, useEffect as D } from "react";
-import { a as H } from "../chunk/B44Hj5ad.js";
+import "../config-provider/ConfigProvider.js";
 import f from "../input/Input.js";
-import { InputAlpha as b } from "./InputAlpha.js";
-const $ = ({
-  color: n,
+import { InputAlpha as H } from "./InputAlpha.js";
+import b from "../config-provider/context.js";
+const y = ({
+  color: o,
   alpha: x,
   onHsvChange: h,
   onAlphaChange: l,
   disabledAlpha: g
 }) => {
-  const { getPrefixCls: s } = I(H), a = s == null ? void 0 : s("color-picker"), [o, r] = j(n.hex);
+  const { getPrefixCls: s } = I(b), r = s == null ? void 0 : s("color-picker"), [n, a] = j(o.hex);
   D(() => {
-    n.hex !== o && r(n.hex);
-  }, [n]);
-  const p = (e) => {
-    var c;
-    const t = ((c = e.match(/[a-fA-F0-9]*/g)) == null ? void 0 : c.join("")) ?? "";
-    t !== o && r(t.toUpperCase());
-  }, i = () => {
-    let e = new u(o);
+    o.hex !== n && a(o.hex);
+  }, [o]);
+  const i = (e) => {
+    var m;
+    const t = ((m = e.match(/[a-fA-F0-9]*/g)) == null ? void 0 : m.join("")) ?? "";
+    t !== n && a(t.toUpperCase());
+  }, p = () => {
+    let e = new u(n);
     e.ok || (e = new u({
       r: 255,
       g: 0,
@@ -30,26 +32,26 @@ const $ = ({
     h(t);
   }, C = (e) => {
     let t = e.clipboardData.getData("Text");
-    t.startsWith("#") && (t = t.slice(1)), p(t), e.preventDefault();
+    t.startsWith("#") && (t = t.slice(1)), i(t), e.preventDefault();
   };
-  return /* @__PURE__ */ v(f.Group, { className: `${a}-input-group`, compact: !0, children: [
-    /* @__PURE__ */ m(
+  return /* @__PURE__ */ v(f.Group, { className: `${r}-input-group`, compact: !0, children: [
+    /* @__PURE__ */ c(
       f,
       {
-        className: `${a}-input-hex`,
+        className: `${r}-input-hex`,
         prefix: "#",
         size: "mini",
         maxLength: 6,
-        value: o,
-        onChange: p,
-        onBlur: i,
-        onPressEnter: i,
+        value: n,
+        onChange: i,
+        onBlur: p,
+        onPressEnter: p,
         onPaste: C
       }
     ),
-    !g && /* @__PURE__ */ m(b, { value: x, onChange: l })
+    !g && /* @__PURE__ */ c(H, { value: x, onChange: l })
   ] });
 };
 export {
-  $ as InputHex
+  y as InputHex
 };

package/color-picker/InputRgb.js

@@ -1,37 +1,40 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import { c as b } from "../chunk/9TSjT7x_.js";
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import "../dist/tinycolor/chunk/DGZSWe7E.js";
+import { TinyColor as f } from "../dist/tinycolor/src/index.js";
 import { useContext as x } from "react";
-import { a as f } from "../chunk/B44Hj5ad.js";
-import I, { InputNumber as p } from "../input/Input.js";
-import { InputAlpha as d } from "./InputAlpha.js";
-const G = ({
+import "../config-provider/ConfigProvider.js";
+import b from "../input/Input.js";
+import p from "../input-number/index.js";
+import { InputAlpha as I } from "./InputAlpha.js";
+import d from "../config-provider/context.js";
+const R = ({
   color: s,
   alpha: u,
   onHsvChange: a,
   onAlphaChange: c,
-  disabledAlpha: g
+  disabledAlpha: C
 }) => {
-  const { getPrefixCls: t } = x(f), C = t == null ? void 0 : t("color-picker"), r = (n) => {
-    const h = new b({
-      r: n.r,
-      g: n.g,
-      b: n.b
+  const { getPrefixCls: r } = x(d), g = r == null ? void 0 : r("color-picker"), t = (o) => {
+    const h = new f({
+      r: o.r,
+      g: o.g,
+      b: o.b
     }).toHsv_();
     a(h);
-  }, { r: e, g: m, b: i } = s.rgb;
-  return /* @__PURE__ */ l(I.Group, { className: `${C}-input-group`, compact: !0, children: [
-    /* @__PURE__ */ o(
+  }, { r: i, g: m, b: e } = s.rgb;
+  return /* @__PURE__ */ l(b.Group, { className: `${g}-input-group`, compact: !0, children: [
+    /* @__PURE__ */ n(
       p,
       {
         size: "mini",
         min: 0,
         max: 255,
         hideControl: !0,
-        value: e,
-        onChange: (n) => r({ r: n, g: m, b: i })
+        value: i,
+        onChange: (o) => t({ r: o, g: m, b: e })
       }
     ),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ n(
       p,
       {
         size: "mini",
@@ -39,23 +42,23 @@ const G = ({
         max: 255,
         hideControl: !0,
         value: m,
-        onChange: (n) => r({ r: e, g: n, b: i })
+        onChange: (o) => t({ r: i, g: o, b: e })
       }
     ),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ n(
       p,
       {
         size: "mini",
         min: 0,
         max: 255,
         hideControl: !0,
-        value: i,
-        onChange: (n) => r({ r: e, g: m, b: n })
+        value: e,
+        onChange: (o) => t({ r: i, g: m, b: o })
       }
     ),
-    !g && /* @__PURE__ */ o(d, { value: u, onChange: c })
+    !C && /* @__PURE__ */ n(I, { value: u, onChange: c })
   ] });
 };
 export {
-  G as InputRgb
+  R as InputRgb
 };

package/color-picker/Palette.js

@@ -1,17 +1,19 @@
 import { jsx as c } from "react/jsx-runtime";
-import { c as d } from "../chunk/9TSjT7x_.js";
+import "../dist/tinycolor/chunk/DGZSWe7E.js";
+import { TinyColor as d } from "../dist/tinycolor/src/index.js";
 import { useContext as h, useMemo as C } from "react";
-import { a as v } from "../chunk/B44Hj5ad.js";
-import { u as g } from "../chunk/k-OUstoD.js";
-const w = ({ color: l, onChange: a }) => {
-  const { getPrefixCls: o } = h(v), r = o == null ? void 0 : o("color-picker"), { h: t, s: n, v: s } = l.hsv, { blockRef: m, handlerRef: f, onMouseDown: i } = g({
+import "../config-provider/ConfigProvider.js";
+import { useControlBlock as v } from "./hooks/useControlBlock.js";
+import g from "../config-provider/context.js";
+const M = ({ color: l, onChange: m }) => {
+  const { getPrefixCls: o } = h(g), e = o == null ? void 0 : o("color-picker"), { h: t, s: n, v: s } = l.hsv, { blockRef: i, handlerRef: a, onMouseDown: p } = v({
     value: [n, 1 - s],
-    onChange: (e) => a(e[0], 1 - e[1])
-  }), p = C(() => new d({ h: t * 360, s: 100, v: 100 }).toRgbString(), [t]), u = () => /* @__PURE__ */ c(
+    onChange: (r) => m(r[0], 1 - r[1])
+  }), f = C(() => new d({ h: t * 360, s: 100, v: 100 }).toRgbString(), [t]), u = () => /* @__PURE__ */ c(
     "div",
     {
-      ref: f,
-      className: `${r}-handler`,
+      ref: a,
+      className: `${e}-handler`,
       style: {
         top: `${(1 - s) * 100}%`,
         left: `${n * 100}%`
@@ -21,14 +23,14 @@ const w = ({ color: l, onChange: a }) => {
   return /* @__PURE__ */ c(
     "div",
     {
-      ref: m,
-      className: `${r}-palette`,
-      style: { backgroundColor: p },
-      onMouseDown: i,
+      ref: i,
+      className: `${e}-palette`,
+      style: { backgroundColor: f },
+      onMouseDown: p,
       children: u()
     }
   );
 };
 export {
-  w as Palette
+  M as Palette
 };

package/color-picker/Panel.js

@@ -1,17 +1,271 @@
-import "react/jsx-runtime";
-import "../chunk/9TSjT7x_.js";
-import "react";
-import "../chunk/B44Hj5ad.js";
-import { Z as b } from "../chunk/CgyNQvYg.js";
-import "../tooltip/index.js";
-import "@unicom-cloud/utils/class-name";
-import "./ControlBar.js";
-import "./InputHex.js";
-import "./InputRgb.js";
-import "./interface.js";
-import "./Mode.js";
-import "./Palette.js";
-import "./utils.js";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import "../dist/tinycolor/chunk/DGZSWe7E.js";
+import { TinyColor as m } from "../dist/tinycolor/src/index.js";
+import { useContext as ar, useState as lr, useMemo as sr } from "react";
+import "../config-provider/ConfigProvider.js";
+import x from "../radio/Radio.js";
+import "../radio/Group.js";
+import dr from "../select/Select.js";
+import X from "../tooltip/index.js";
+import mr from "@unicom-cloud/utils/class-name";
+import { ControlBar as S } from "./ControlBar.js";
+import { InputHex as ur } from "./InputHex.js";
+import { InputRgb as pr } from "./InputRgb.js";
+import { ColorPickerMode as _ } from "./interface.js";
+import { isMultiMode as D, isGradientMode as F } from "./Mode.js";
+import { Palette as gr } from "./Palette.js";
+import { renderBackground as br, sortGradientColors as J, getColorByGradients as vr } from "./utils.js";
+import fr from "../config-provider/context.js";
+const hr = x.Group, Er = ({
+  value: K,
+  mode: C,
+  activeMode: N,
+  gradientColors: u,
+  activeColorId: L,
+  activeColorIdRef: O,
+  color: s,
+  alpha: p,
+  disabledAlpha: k,
+  historyColors: R,
+  presetColors: g,
+  showHistory: G,
+  showPreset: P,
+  renderPreset: B,
+  renderHistory: M,
+  renderPickSection: I,
+  renderFooter: T,
+  onHsvChange: d,
+  onAlphaChange: b,
+  onActiveModeChange: Q,
+  onGradientColorsChange: j,
+  onActiveColorIdChange: z
+}) => {
+  const { getPrefixCls: y, locale: t } = ar(fr), r = y == null ? void 0 : y("color-picker"), [q, U] = lr("hex"), v = sr(() => {
+    const n = new Set(R ?? []);
+    return Array.from(n);
+  }, [R]), { h: E, s: V, v: W } = s.hsv, { r: f, g: h, b: $ } = s.rgb, Y = (n) => {
+    let a = new m(n);
+    a.ok || (a = new m({
+      r: 255,
+      g: 0,
+      b: 0
+    }));
+    const o = a.toHsv_();
+    d(o);
+  }, Z = () => /* @__PURE__ */ c(
+    hr,
+    {
+      className: `${r}-panel-control-gradient-tag`,
+      type: "button",
+      size: "small",
+      value: N,
+      onChange: Q,
+      children: [
+        /* @__PURE__ */ e(x, { value: _.Single, children: t == null ? void 0 : t.ColorPicker.singleColor }),
+        /* @__PURE__ */ e(x, { value: _.Gradient, children: t == null ? void 0 : t.ColorPicker.gradientColor })
+      ]
+    }
+  ), A = (n) => {
+    const a = Math.round(n * 100);
+    j((o) => J(
+      o.map((i) => i.id === O.current ? {
+        ...i,
+        percent: a
+      } : i)
+    ));
+  }, rr = () => {
+    const n = (o) => {
+      const i = Math.round(o * 100), l = vr(u, i), w = J(u.concat(l));
+      j(w), z(l.id), d(l.color.hsv), b(l.alpha);
+    }, a = (o) => {
+      const i = u.find((l) => l.id === o);
+      z(o), d(i.color.hsv), b(i.alpha);
+    };
+    return /* @__PURE__ */ e("div", { className: `${r}-control-bar-gradient`, children: /* @__PURE__ */ e(
+      S,
+      {
+        multiple: !0,
+        value: u.map(({ percent: o, id: i }) => ({
+          value: o / 100,
+          key: i
+        })),
+        onAdd: n,
+        onChange: A,
+        onActive: a,
+        style: {
+          background: br(K)
+        },
+        renderHandlerStyle: (o) => L === o ? {
+          outline: "1px solid rgb(var(--pqb-primary-6))"
+        } : {},
+        renderHandlerCenterStyle: (o) => {
+          const {
+            color: {
+              rgb: { r: i, g: l, b: w }
+            },
+            alpha: ir
+          } = u.find((cr) => cr.id === o);
+          return {
+            background: new m({ r: i, g: l, b: w, a: ir }).toRgbaString()
+          };
+        }
+      }
+    ) });
+  }, er = () => q === "rgb" ? /* @__PURE__ */ e(
+    pr,
+    {
+      color: s,
+      alpha: p,
+      onHsvChange: d,
+      onAlphaChange: b,
+      disabledAlpha: k
+    }
+  ) : /* @__PURE__ */ e(
+    ur,
+    {
+      color: s,
+      alpha: p,
+      onHsvChange: d,
+      onAlphaChange: b,
+      disabledAlpha: k
+    }
+  ), H = (n) => /* @__PURE__ */ e(X, { mini: !0, content: n, color: n, children: /* @__PURE__ */ e(
+    "div",
+    {
+      className: `${r}-color-block`,
+      onClick: () => {
+        Y(n);
+      },
+      children: /* @__PURE__ */ e(
+        "div",
+        {
+          className: `${r}-block`,
+          style: { backgroundColor: n }
+        }
+      )
+    },
+    n
+  ) }, n), nr = () => M ? M() : G ? /* @__PURE__ */ c("div", { className: `${r}-colors-section`, children: [
+    /* @__PURE__ */ e("div", { className: `${r}-colors-text`, children: t == null ? void 0 : t.ColorPicker.history }),
+    /* @__PURE__ */ e("div", { className: `${r}-colors-wrapper`, children: v != null && v.length ? /* @__PURE__ */ e("div", { className: `${r}-colors-list`, children: v.map(H) }) : /* @__PURE__ */ e("span", { className: `${r}-colors-empty`, children: t == null ? void 0 : t.ColorPicker.empty }) })
+  ] }) : null, tr = () => {
+    var n;
+    return B ? B() : P ? /* @__PURE__ */ c("div", { className: `${r}-colors-section`, children: [
+      /* @__PURE__ */ e("div", { className: `${r}-colors-text`, children: t == null ? void 0 : t.ColorPicker.preset }),
+      /* @__PURE__ */ e("div", { className: `${r}-colors-wrapper`, children: /* @__PURE__ */ e("div", { className: `${r}-colors-list`, children: (n = g == null ? void 0 : g.map) == null ? void 0 : n.call(g, H) }) })
+    ] }) : null;
+  }, or = () => I ? I() : G || P ? /* @__PURE__ */ c("div", { className: `${r}-panel-colors`, children: [
+    nr(),
+    tr()
+  ] }) : null;
+  return /* @__PURE__ */ c("div", { className: `${r}-panel`, children: [
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: mr(
+          (D(C) || F(N)) && `${r}-panel-control-gradient`
+        ),
+        children: [
+          D(C) && Z(),
+          F(N) && rr(),
+          /* @__PURE__ */ e(
+            gr,
+            {
+              color: s,
+              onChange: (n, a) => {
+                d({ h: E, s: n, v: a });
+              }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ c("div", { className: `${r}-panel-control`, children: [
+      /* @__PURE__ */ c("div", { className: `${r}-control-wrapper`, children: [
+        /* @__PURE__ */ c("div", { children: [
+          /* @__PURE__ */ e(
+            S,
+            {
+              className: `${r}-control-bar-hue`,
+              value: E,
+              onChange: (n) => d({ h: n, s: V, v: W }),
+              renderHandlerCenterStyle: () => ({
+                background: new m({ r: f, g: h, b: $ }).toRgbString()
+              })
+            }
+          ),
+          !k && /* @__PURE__ */ e("div", { className: `${r}-control-bar-bg`, children: /* @__PURE__ */ e(
+            S,
+            {
+              className: `${r}-control-bar-alpha`,
+              style: {
+                background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${f}, ${h}, ${$}))`
+              },
+              value: p,
+              onChange: b,
+              renderHandlerCenterStyle: () => ({
+                background: new m({
+                  r: f,
+                  g: h,
+                  b: $,
+                  a: p
+                }).toRgbaString()
+              })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ e(X, { mini: !0, content: s.hex8String, color: s.string, children: /* @__PURE__ */ e(
+          "div",
+          {
+            className: `${r}-preview`,
+            style: {
+              backgroundColor: new m({
+                r: f,
+                g: h,
+                b: $,
+                a: p
+              }).toRgbaString()
+            }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ c("div", { className: `${r}-input-wrapper`, children: [
+        /* @__PURE__ */ e(
+          dr,
+          {
+            className: `${r}-select-type`,
+            size: "mini",
+            options: [
+              {
+                value: "hex",
+                label: "HEX"
+              },
+              // {
+              //   value: 'hsl',
+              //   label: 'HSL',
+              // },
+              {
+                value: "rgb",
+                label: "RGB"
+              }
+            ],
+            value: q,
+            triggerProps: {
+              className: `${r}-type-dropdown`,
+              getPopupContainer() {
+                return window.document.body;
+              }
+            },
+            onChange: U
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: `${r}-group-wrapper`, children: er() })
+      ] })
+    ] }),
+    or(),
+    typeof T == "function" ? T() : null
+  ] });
+};
 export {
-  b as Panel
+  Er as Panel
 };

package/color-picker/colors.js

@@ -1,8 +1,9 @@
-import { c as t, R as o } from "../chunk/9TSjT7x_.js";
-new t("#eee");
-const n = [
-  o.colors.map((e, l, r) => o.palette({ color: e.value, level: 4 }).toHexString()),
-  o.colors.map((e, l, r) => e.value)
+import { a as e } from "../dist/tinycolor/chunk/DGZSWe7E.js";
+import { TinyColor as l } from "../dist/tinycolor/src/index.js";
+new l("#eee");
+const i = [
+  e.colors.map((o, r, a) => e.palette({ color: o.value, level: 4 }).toHexString()),
+  e.colors.map((o, r, a) => o.value)
   // '#00B42A',
   // '#3C7EFF',
   // '#FF7D00',
@@ -27,6 +28,6 @@ const n = [
   // '#9FD4FD',
 ].flat(1 / 0).filter(Boolean);
 export {
-  n as colors,
-  n as default
+  i as colors,
+  i as default
 };