@unicom-cloud/ui 0.8.90 → 0.8.92

package/color-picker/Panel.js

@@ -1,17 +1,271 @@
-import "react/jsx-runtime";
-import "../chunk/9TSjT7x_.js";
-import "react";
-import "../chunk/B44Hj5ad.js";
-import { g as b } from "../chunk/BbQEqpOn.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
 };

package/color-picker/hooks/useColorPicker.js

@@ -0,0 +1,128 @@
+import "../../dist/tinycolor/chunk/DGZSWe7E.js";
+import { TinyColor as F } from "../../dist/tinycolor/src/index.js";
+import { useState as v, useRef as q, useMemo as M, useCallback as E, useEffect as y } from "react";
+import w from "../../components/common/hooks/useIsFirstRender.js";
+import T from "../../components/common/hooks/useMergeValue.js";
+import { ColorPickerMode as H } from "../interface.js";
+import { getModeByValue as ee, isGradientMode as R, isSingleMode as oe } from "../Mode.js";
+import { mapValueToGradientColor as te, getColorFromHsv as B, formatRgba as re, formatHex as ne, isEqualsColors as ie, equalsHsv as se, getRandomId as j } from "../utils.js";
+const me = (r) => {
+  var k;
+  const {
+    mode: z = H.Single,
+    defaultValue: D,
+    format: _,
+    onChange: h,
+    disabledAlpha: p
+  } = r, J = w(), [b, K] = T(!1, {
+    defaultValue: r.defaultPopupVisible,
+    value: r.popupVisible
+  }), [s, L] = v(
+    ee(
+      r.value,
+      D,
+      z
+    )
+  ), [n, N] = T(
+    s === H.Gradient ? void 0 : "",
+    r
+  ), [x, O] = v(
+    R(s) && Array.isArray(n) ? te(n, p) : []
+  ), [Q, U] = v((k = x[0]) == null ? void 0 : k.id), C = q(x), A = q(Q), t = C.current, V = A.current, m = (e) => {
+    O(e), C.current = typeof e == "function" ? e(C.current) : e;
+  }, S = (e) => {
+    U(e), A.current = e;
+  }, c = M(() => {
+    const e = t.findIndex(
+      (o) => o.id === V
+    );
+    return e !== -1 ? e : 0;
+  }, [t, V]), u = Array.isArray(n) ? new F(n[c].color).toHsv_() : new F(n).toHsv_(), [d, P] = v({
+    h: u.h,
+    s: u.s,
+    v: u.v
+  }), [i, I] = v(u.a), f = M(() => B(d), [d]), G = E(
+    (e, o, a, l) => _ === "rgb" ? re(e, o, a, l) : ne(e, o, a, l),
+    [_]
+  ), g = M(() => {
+    if (oe(s)) {
+      const { r: e, g: o, b: a } = f.rgb;
+      return G(e, o, a, i);
+    }
+    return t.map((e) => {
+      const { r: o, g: a, b: l } = e.color.rgb;
+      return {
+        color: G(o, a, l, e.alpha),
+        percent: e.percent
+      };
+    });
+  }, [s, t, f.rgb, G, i]);
+  y(() => {
+    N(g), !J && !ie(n, g) && (h == null || h(g));
+  }, [g]);
+  const W = E(
+    (e) => {
+      var o;
+      if (e && n !== g) {
+        const { h: a, s: l, v: Z, a: $ } = u;
+        P({ h: a, s: l, v: Z }), I($);
+      }
+      e !== b && ((o = r.onVisibleChange) == null || o.call(r, e), "popupVisible" in r || K(e));
+    },
+    [r.onVisibleChange, b, n]
+  ), X = (e) => {
+    P(e), p && i !== 100 && I(100);
+  }, Y = (e) => {
+    I(e);
+  };
+  return y(() => {
+    if (!R(s) || !t.length || se(t[c].color.hsv, d)) return;
+    const e = [...t];
+    e[c] = {
+      ...e[c],
+      color: B(d)
+    }, m(e);
+  }, [d]), y(() => {
+    if (!R(s) || !t.length || t[c].alpha === i) return;
+    const e = [...t];
+    e[c] = {
+      ...e[c],
+      alpha: p ? 100 : i
+    }, m(e);
+  }, [i]), {
+    value: n,
+    activeMode: s,
+    gradientColors: t,
+    gradientColorsRef: C,
+    activeColorId: V,
+    activeColorIdRef: A,
+    popupVisible: b,
+    color: f,
+    alpha: i,
+    onHsvChange: X,
+    onAlphaChange: Y,
+    onVisibleChange: W,
+    onActiveModeChange: (e) => {
+      var o;
+      e !== s && (e === H.Single ? S((o = t[0]) == null ? void 0 : o.id) : m([
+        {
+          id: j(),
+          color: f,
+          alpha: i,
+          percent: 0
+        },
+        {
+          id: j(),
+          color: f,
+          alpha: i,
+          percent: 100
+        }
+      ]), L(e));
+    },
+    onActiveColorIdChange: S,
+    onGradientColorsChange: m
+  };
+};
+export {
+  me as useColorPicker
+};

package/{chunk/k-OUstoD.js → color-picker/hooks/useControlBlock.js}

@@ -54,5 +54,5 @@ function M({
   };
 }
 export {
-  M as u
+  M as useControlBlock
 };

package/color-picker/index.js

@@ -1,26 +1,162 @@
-import "react/jsx-runtime";
-import "lodash/isFunction";
-import "lodash/isNil";
-import "react";
-import "../chunk/B44Hj5ad.js";
-import "../copy/index.js";
-import "../chunk/BFTV6myl.js";
-import "../trigger/index.js";
-import "@unicom-cloud/utils/class-name";
-import "./colors.js";
-import { ControlBar as C } from "./ControlBar.js";
-import { g as u, f as c } from "../chunk/BbQEqpOn.js";
-import { InputAlpha as I } from "./InputAlpha.js";
-import { InputHex as b } from "./InputHex.js";
-import { InputRgb as A } from "./InputRgb.js";
-import { Palette as H } from "./Palette.js";
-import "./utils.js";
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import G from "lodash/isFunction";
+import S from "lodash/isNil";
+import D, { useContext as q } from "react";
+import "../config-provider/ConfigProvider.js";
+import J from "../copy/index.js";
+import K from "../components/common/hooks/useMergeProps.js";
+import L from "../trigger/index.js";
+import Q from "@unicom-cloud/utils/class-name";
+import { colors as U } from "./colors.js";
+import { ControlBar as kr } from "./ControlBar.js";
+import { useColorPicker as W } from "./hooks/useColorPicker.js";
+import { InputAlpha as yr } from "./InputAlpha.js";
+import { InputHex as Nr } from "./InputHex.js";
+import { InputRgb as br } from "./InputRgb.js";
+import { Palette as zr } from "./Palette.js";
+import { Panel as X } from "./Panel.js";
+import { getGradientString as Y, renderBackground as Z } from "./utils.js";
+import _ from "../config-provider/context.js";
+const d = {
+  size: "default",
+  presetColors: U
+};
+function rr(t, u) {
+  const {
+    getPrefixCls: n,
+    componentConfig: s,
+    size: g
+  } = q(_), l = K(
+    t,
+    { ...d, size: g || d.size },
+    s == null ? void 0 : s.ColorPicker
+  ), {
+    style: C,
+    className: f,
+    size: p,
+    mode: h,
+    disabled: i,
+    disabledAlpha: x = !1,
+    triggerProps: P = {},
+    unmountOnExit: k,
+    showText: v,
+    historyColors: y,
+    presetColors: I,
+    showHistory: N,
+    showPreset: A,
+    renderFooter: b
+  } = l, o = n == null ? void 0 : n("color-picker"), {
+    value: r,
+    activeMode: $,
+    gradientColors: z,
+    activeColorId: w,
+    activeColorIdRef: E,
+    popupVisible: R,
+    color: B,
+    alpha: H,
+    onHsvChange: M,
+    onAlphaChange: O,
+    onVisibleChange: T,
+    onActiveModeChange: V,
+    onGradientColorsChange: j,
+    onActiveColorIdChange: F
+  } = W(l);
+  return /* @__PURE__ */ e(
+    L,
+    {
+      popup: () => /* @__PURE__ */ e(
+        X,
+        {
+          value: r,
+          mode: h,
+          activeMode: $,
+          gradientColors: z,
+          activeColorId: w,
+          activeColorIdRef: E,
+          color: B,
+          alpha: H,
+          historyColors: y,
+          presetColors: I,
+          showHistory: N,
+          showPreset: A,
+          onHsvChange: M,
+          onAlphaChange: O,
+          onActiveModeChange: V,
+          onGradientColorsChange: j,
+          onActiveColorIdChange: F,
+          disabledAlpha: x,
+          renderFooter: b
+        }
+      ),
+      trigger: "click",
+      position: "bl",
+      popupAlign: {
+        top: 8,
+        bottom: 8,
+        left: 8,
+        right: 8
+      },
+      disabled: i,
+      popupVisible: R,
+      classNames: "slideDynamicOrigin",
+      unmountOnExit: k,
+      ...P,
+      onVisibleChange: T,
+      children: (() => {
+        const c = G(t.triggerElement) ? t.triggerElement({ value: r }) : t.triggerElement;
+        if (!S(c))
+          return c;
+        const a = typeof r == "string" ? r : Y(r);
+        return /* @__PURE__ */ m(
+          "div",
+          {
+            className: Q(o, f, {
+              [`${o}-size-${p}`]: p,
+              [`${o}-disabled`]: i
+            }),
+            style: C,
+            ref: u,
+            children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: `${o}-preview`,
+                  style: Array.isArray(r) ? {
+                    background: Z(r)
+                  } : { backgroundColor: r }
+                }
+              ),
+              !!v && /* @__PURE__ */ m("div", { className: `${o}-value`, children: [
+                a,
+                !i && /* @__PURE__ */ e(J, { text: a, className: `${o}-copy` })
+              ] }),
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  className: `${o}-input`,
+                  value: a,
+                  disabled: i,
+                  readOnly: !0
+                }
+              ),
+              l.extra
+            ]
+          }
+        );
+      })()
+    }
+  );
+}
+const or = D.forwardRef(
+  rr
+);
+or.displayName = "ColorPicker";
 export {
-  C as ColorPickerControlBar,
-  I as ColorPickerInputAlpha,
-  b as ColorPickerInputHex,
-  A as ColorPickerInputRgb,
-  H as ColorPickerPalette,
-  u as ColorPickerPanel,
-  c as default
+  kr as ColorPickerControlBar,
+  yr as ColorPickerInputAlpha,
+  Nr as ColorPickerInputHex,
+  br as ColorPickerInputRgb,
+  zr as ColorPickerPalette,
+  X as ColorPickerPanel,
+  or as default
 };