@unicom-cloud/ui 0.8.57 → 0.8.58

package/ColorPicker.js

@@ -1,13 +1,584 @@
-import "react/jsx-runtime";
-import "lodash/isFunction";
-import "lodash/isNil";
-import "react";
-import "./chunk/DUxWiN2U.js";
-import "./Copy.js";
-import "./hooks/useMergeProps.js";
-import "./Trigger.js";
-import "./chunk/Do1aMgY3.js";
-import { a as s } from "./chunk/BlKc_pDZ.js";
+import { jsx as t, jsxs as $ } from "react/jsx-runtime";
+import K from "lodash/isFunction";
+import Q from "lodash/isNil";
+import Z, { useMemo as z, useState as V, useEffect as j, useCallback as ee, useRef as T, useContext as S } from "react";
+import { f as k, d as R } from "./chunk/Bdh4XVuf.js";
+import ne from "./Copy.js";
+import { useMergeProps as te } from "./hooks/useMergeProps.js";
+import re from "./Trigger.js";
+import { y as B } from "./chunk/BzPkh4Zv.js";
+import { A as G, f as oe } from "./chunk/Uz-rNulO.js";
+import { useIsFirstRender as se } from "./hooks/useIsFirstRender.js";
+import { useMergeValue as _ } from "./hooks/useMergeValue.js";
+import { S as ie } from "./chunk/BYhtrDV3.js";
+import X from "./Tooltip.js";
+import { a as L, I as F } from "./chunk/DmUhn9ib.js";
+new k("#eee");
+const ce = [
+  Object.entries(G).map(([n, l], d, f) => oe({ color: l, level: 4 })),
+  Object.entries(G).map(([n, l], d, f) => l),
+  !1,
+  !1,
+  !1,
+  !1
+  // '#00B42A',
+  // '#3C7EFF',
+  // '#FF7D00',
+  // '#F76965',
+  // '#F7BA1E',
+  // '#F5319D',
+  // '#D91AD9',
+  // '#9FDB1D',
+  // '#FADC19',
+  // '#722ED1',
+  // '#3491FA',
+  // '#7BE188',
+  // '#93BEFF',
+  // '#FFCF8B',
+  // '#FBB0A7',
+  // '#FCE996',
+  // '#FB9DC7',
+  // '#F08EE6',
+  // '#DCF190',
+  // '#FDFA94',
+  // '#C396ED',
+  // '#9FD4FD',
+].flat(1 / 0).filter(Boolean), le = (n) => {
+  const { format: l, onChange: d, disabledAlpha: f } = n ?? {}, h = se(), [a, o] = _("", n), u = z(() => new k(a).toHsv_(), [a]), [i, g] = _(!1, {
+    defaultValue: n.defaultPopupVisible,
+    value: n.popupVisible
+  }), [p, m] = V({
+    h: u.h,
+    s: u.s,
+    v: u.v
+  }), [e, r] = V(u.a), b = z(() => {
+    const c = new k({
+      h: p.h * 360,
+      s: p.s * 100,
+      v: p.v * 100,
+      a: e
+    }), C = c.toRgb(), { r: P, g: N, b: y } = C;
+    return {
+      hsv: p,
+      rgb: C,
+      rgbString: c.toRgbString(),
+      hex: c.toHex(),
+      hexString: c.toHexString(),
+      hex8String: c.toHex8String(),
+      string: `rgba(${P}, ${N}, ${y}, ${e.toFixed(2)})`,
+      tiny: c,
+      alpha: e
+    };
+  }, [p, e, l]), x = z(() => l === "rgb" ? b.rgbString : e < 1 ? b.hex8String : b.hexString, [b]);
+  j(() => {
+    o(x), !h && (d == null || d(x));
+  }, [x]);
+  const s = ee(
+    (c) => {
+      var C;
+      if (c && a !== x) {
+        const { h: P, s: N, v: y, a: I } = u;
+        m({ h: P, s: N, v: y }), r(I);
+      }
+      c !== i && ((C = n.onVisibleChange) == null || C.call(n, c), "popupVisible" in n || g(c));
+    },
+    [n.onVisibleChange, i, a]
+  );
+  return {
+    value: a,
+    popupVisible: i,
+    color: b,
+    alpha: e,
+    onHsvChange: (c) => {
+      m(c), f && e !== 100 && r(100);
+    },
+    onAlphaChange: (c) => {
+      r(c);
+    },
+    onVisibleChange: s
+  };
+}, Y = ({ value: n, onChange: l }) => {
+  const [d, f] = V(!1), h = T(), a = T();
+  function o(e, r) {
+    return e < 0 ? 0 : e > r ? 1 : e / r;
+  }
+  const u = (e) => {
+    const { clientX: r, clientY: b } = e;
+    if (!h.current)
+      return;
+    const x = h.current.getBoundingClientRect(), s = [
+      o(r - x.x, x.width),
+      o(b - x.y, x.height)
+    ];
+    (s[0] !== n[0] || s[1] !== n[1]) && (l == null || l(s));
+  };
+  function i() {
+    f(!1), window.removeEventListener("mousemove", m), window.removeEventListener("mouseup", i), window.removeEventListener("contextmenu", i);
+  }
+  function g() {
+    f(!0), window.addEventListener("mousemove", m), window.addEventListener("mouseup", i), window.addEventListener("contextmenu", i);
+  }
+  function p(e) {
+    e.preventDefault(), u(e), g();
+  }
+  function m(e) {
+    e.preventDefault(), e.buttons > 0 ? u(e) : i();
+  }
+  return j(() => () => {
+    i();
+  }, []), {
+    active: d,
+    blockRef: h,
+    handlerRef: a,
+    onMouseDown: p
+  };
+}, U = ({
+  x: n,
+  type: l = "hue",
+  color: d,
+  onChange: f,
+  style: h
+}) => {
+  const { getPrefixCls: a } = S(R), o = a("color-picker"), { r: u, g: i, b: g } = d.rgb, { blockRef: p, handlerRef: m, onMouseDown: e } = Y({
+    value: [n, 0],
+    onChange: (b) => f(b[0])
+  }), r = () => /* @__PURE__ */ t(
+    "div",
+    {
+      ref: m,
+      style: {
+        left: `${n * 100}%`
+      },
+      className: `${o}-handler`,
+      children: /* @__PURE__ */ t(
+        "div",
+        {
+          className: `${o}-handler-center`,
+          style: { backgroundColor: d.string }
+        }
+      )
+    }
+  );
+  return l === "alpha" ? /* @__PURE__ */ t("div", { className: `${o}-control-bar-bg`, children: /* @__PURE__ */ t(
+    "div",
+    {
+      ref: p,
+      className: B(
+        `${o}-control-bar`,
+        `${o}-control-bar-alpha`,
+        `${o}-control-bar-alpha`
+      ),
+      style: {
+        background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${u}, ${i}, ${g}))`,
+        ...h
+      },
+      onMouseDown: e,
+      children: r()
+    }
+  ) }) : /* @__PURE__ */ t(
+    "div",
+    {
+      ref: p,
+      style: h,
+      className: B(`${o}-control-bar`, `${o}-control-bar-hue`),
+      onMouseDown: e,
+      children: r()
+    }
+  );
+}, q = ({ value: n, onChange: l }) => {
+  const { getPrefixCls: d } = S(R), f = d("color-picker");
+  return /* @__PURE__ */ t(
+    L,
+    {
+      className: `${f}-input-alpha`,
+      size: "mini",
+      min: 0,
+      max: 100,
+      value: Math.round(n * 100),
+      suffix: "%",
+      onChange: (h) => l(h / 100)
+    }
+  );
+}, ae = ({
+  color: n,
+  alpha: l,
+  onHsvChange: d,
+  onAlphaChange: f,
+  disabledAlpha: h
+}) => {
+  const { getPrefixCls: a } = S(R), o = a("color-picker"), [u, i] = V(n.hex);
+  j(() => {
+    n.hex !== u && i(n.hex);
+  }, [n]);
+  const g = (e) => {
+    var b;
+    const r = ((b = e.match(/[a-fA-F0-9]*/g)) == null ? void 0 : b.join("")) ?? "";
+    r !== u && i(r.toUpperCase());
+  }, p = () => {
+    let e = new k(u);
+    e.ok || (e = new k({
+      r: 255,
+      g: 0,
+      b: 0
+    }));
+    const r = e.toHsv_();
+    d(r);
+  }, m = (e) => {
+    let r = e.clipboardData.getData("Text");
+    r.startsWith("#") && (r = r.slice(1)), g(r), e.preventDefault();
+  };
+  return /* @__PURE__ */ $(F.Group, { className: `${o}-input-group`, compact: !0, children: [
+    /* @__PURE__ */ t(
+      F,
+      {
+        className: `${o}-input-hex`,
+        prefix: "#",
+        size: "mini",
+        maxLength: 6,
+        value: u,
+        onChange: g,
+        onBlur: p,
+        onPressEnter: p,
+        onPaste: m
+      }
+    ),
+    !h && /* @__PURE__ */ t(q, { value: l, onChange: f })
+  ] });
+}, ue = ({
+  color: n,
+  alpha: l,
+  onHsvChange: d,
+  onAlphaChange: f,
+  disabledAlpha: h
+}) => {
+  const { getPrefixCls: a } = S(R), o = a("color-picker"), u = (m) => {
+    const r = new k({
+      r: m.r,
+      g: m.g,
+      b: m.b
+    }).toHsv_();
+    d(r);
+  }, { r: i, g, b: p } = n.rgb;
+  return /* @__PURE__ */ $(F.Group, { className: `${o}-input-group`, compact: !0, children: [
+    /* @__PURE__ */ t(
+      L,
+      {
+        size: "mini",
+        min: 0,
+        max: 255,
+        hideControl: !0,
+        value: i,
+        onChange: (m) => u({ r: m, g, b: p })
+      }
+    ),
+    /* @__PURE__ */ t(
+      L,
+      {
+        size: "mini",
+        min: 0,
+        max: 255,
+        hideControl: !0,
+        value: g,
+        onChange: (m) => u({ r: i, g: m, b: p })
+      }
+    ),
+    /* @__PURE__ */ t(
+      L,
+      {
+        size: "mini",
+        min: 0,
+        max: 255,
+        hideControl: !0,
+        value: p,
+        onChange: (m) => u({ r: i, g, b: m })
+      }
+    ),
+    !h && /* @__PURE__ */ t(q, { value: l, onChange: f })
+  ] });
+}, me = ({ color: n, onChange: l }) => {
+  const { getPrefixCls: d } = S(R), f = d("color-picker"), { h, s: a, v: o } = n.hsv, { blockRef: u, handlerRef: i, onMouseDown: g } = Y({
+    value: [a, 1 - o],
+    onChange: (e) => l(e[0], 1 - e[1])
+  }), p = z(() => new k({ h: h * 360, s: 100, v: 100 }).toRgbString(), [h]), m = () => /* @__PURE__ */ t(
+    "div",
+    {
+      ref: i,
+      className: `${f}-handler`,
+      style: {
+        top: `${(1 - o) * 100}%`,
+        left: `${a * 100}%`
+      }
+    }
+  );
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ref: u,
+      className: `${f}-palette`,
+      style: { backgroundColor: p },
+      onMouseDown: g,
+      children: m()
+    }
+  );
+}, de = ({
+  color: n,
+  alpha: l,
+  disabledAlpha: d,
+  colorString: f,
+  historyColors: h,
+  presetColors: a,
+  showHistory: o,
+  showPreset: u,
+  renderPreset: i,
+  renderHistory: g,
+  renderPickSection: p,
+  renderFooter: m,
+  onHsvChange: e,
+  onAlphaChange: r
+}) => {
+  const { getPrefixCls: b, locale: x } = S(R), s = b("color-picker"), [E, H] = V("hex"), { h: c, s: C, v: P } = n.hsv, N = z(() => {
+    if (!o)
+      return [];
+    const v = new Set(h ?? []);
+    return Array.from(v);
+  }, [h, o]), y = (v) => {
+    let w = new k(v);
+    w.ok || (w = new k({
+      r: 255,
+      g: 0,
+      b: 0
+    }));
+    const J = w.toHsv_();
+    e(J);
+  }, I = () => E === "rgb" ? /* @__PURE__ */ t(
+    ue,
+    {
+      color: n,
+      alpha: l,
+      onHsvChange: e,
+      onAlphaChange: r,
+      disabledAlpha: d
+    }
+  ) : /* @__PURE__ */ t(
+    ae,
+    {
+      color: n,
+      alpha: l,
+      onHsvChange: e,
+      onAlphaChange: r,
+      disabledAlpha: d
+    }
+  ), D = (v) => /* @__PURE__ */ t(X, { mini: !0, content: v, color: v, children: /* @__PURE__ */ t(
+    "div",
+    {
+      className: `${s}-color-block`,
+      onClick: () => {
+        y(v);
+      },
+      children: /* @__PURE__ */ t(
+        "div",
+        {
+          className: `${s}-block`,
+          style: { backgroundColor: v }
+        }
+      )
+    },
+    v
+  ) }, v), M = () => g ? g() : o ? /* @__PURE__ */ $("div", { className: `${s}-colors-section`, children: [
+    /* @__PURE__ */ t("div", { className: `${s}-colors-text`, children: x.ColorPicker.history }),
+    /* @__PURE__ */ t("div", { className: `${s}-colors-wrapper`, children: N != null && N.length ? /* @__PURE__ */ t("div", { className: `${s}-colors-list`, children: N.map(D) }) : /* @__PURE__ */ t("span", { className: `${s}-colors-empty`, children: x.ColorPicker.empty }) })
+  ] }) : null, A = () => {
+    var v;
+    return i ? i() : u ? /* @__PURE__ */ $("div", { className: `${s}-colors-section`, children: [
+      /* @__PURE__ */ t("div", { className: `${s}-colors-text`, children: x.ColorPicker.preset }),
+      /* @__PURE__ */ t("div", { className: `${s}-colors-wrapper`, children: /* @__PURE__ */ t("div", { className: `${s}-colors-list`, children: (v = a == null ? void 0 : a.map) == null ? void 0 : v.call(a, D) }) })
+    ] }) : null;
+  }, O = () => p ? p() : o || u ? /* @__PURE__ */ $("div", { className: `${s}-panel-colors`, children: [
+    M(),
+    A()
+  ] }) : null;
+  return /* @__PURE__ */ $("div", { className: `${s}-panel`, children: [
+    /* @__PURE__ */ t(me, { color: n, onChange: (v, w) => e({ h: c, s: v, v: w }) }),
+    /* @__PURE__ */ $("div", { className: `${s}-panel-control`, children: [
+      /* @__PURE__ */ $("div", { className: `${s}-control-wrapper`, children: [
+        /* @__PURE__ */ $("div", { children: [
+          /* @__PURE__ */ t(
+            U,
+            {
+              type: "hue",
+              x: c,
+              color: n,
+              onChange: (v) => e({ h: v, s: C, v: P })
+            }
+          ),
+          !d && /* @__PURE__ */ t(
+            U,
+            {
+              type: "alpha",
+              x: l,
+              color: n,
+              onChange: r
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t(X, { mini: !0, content: n.hex8String, color: n.string, children: /* @__PURE__ */ t(
+          "div",
+          {
+            className: `${s}-preview`,
+            style: { backgroundColor: n.string }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ $("div", { className: `${s}-input-wrapper`, children: [
+        /* @__PURE__ */ t(
+          ie,
+          {
+            className: `${s}-select-type`,
+            size: "mini",
+            options: [
+              {
+                value: "hex",
+                label: "HEX"
+              },
+              // {
+              //   value: 'hsl',
+              //   label: 'HSL',
+              // },
+              {
+                value: "rgb",
+                label: "RGB"
+              }
+            ],
+            value: E,
+            triggerProps: {
+              className: `${s}-type-dropdown`,
+              getPopupContainer() {
+                return window.document.body;
+              }
+            },
+            onChange: H
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: `${s}-group-wrapper`, children: I() })
+      ] })
+    ] }),
+    O(),
+    typeof m == "function" ? m() : null
+  ] });
+}, W = {
+  size: "default",
+  presetColors: ce
+};
+function pe(n, l) {
+  const {
+    getPrefixCls: d,
+    componentConfig: f,
+    size: h
+  } = S(R), a = te(
+    n,
+    { ...W, size: h || W.size },
+    f == null ? void 0 : f.ColorPicker
+  ), {
+    style: o,
+    className: u,
+    size: i,
+    disabled: g,
+    disabledAlpha: p = !1,
+    triggerProps: m = {},
+    unmountOnExit: e,
+    showText: r,
+    historyColors: b,
+    presetColors: x,
+    showHistory: s,
+    showPreset: E,
+    renderFooter: H
+  } = a, c = d("color-picker"), {
+    value: C,
+    popupVisible: P,
+    color: N,
+    alpha: y,
+    colorString: I,
+    onHsvChange: D,
+    onAlphaChange: M,
+    onVisibleChange: A
+  } = le(a);
+  return /* @__PURE__ */ t(
+    re,
+    {
+      popup: () => /* @__PURE__ */ t(
+        de,
+        {
+          color: N,
+          alpha: y,
+          colorString: I,
+          historyColors: b,
+          presetColors: x,
+          showHistory: s,
+          showPreset: E,
+          onHsvChange: D,
+          onAlphaChange: M,
+          disabledAlpha: p,
+          renderFooter: H
+        }
+      ),
+      trigger: "click",
+      position: "bl",
+      popupAlign: {
+        top: 8,
+        bottom: 8,
+        left: 8,
+        right: 8
+      },
+      disabled: g,
+      popupVisible: P,
+      classNames: "slideDynamicOrigin",
+      unmountOnExit: e,
+      ...m,
+      onVisibleChange: A,
+      children: (() => {
+        const w = K(n.triggerElement) ? n.triggerElement({ value: C }) : n.triggerElement;
+        return Q(w) ? /* @__PURE__ */ $(
+          "div",
+          {
+            className: B(c, u, {
+              [`${c}-size-${i}`]: i,
+              [`${c}-disabled`]: g
+            }),
+            style: o,
+            ref: l,
+            children: [
+              /* @__PURE__ */ t(
+                "div",
+                {
+                  className: `${c}-preview`,
+                  style: { backgroundColor: C }
+                }
+              ),
+              !!r && /* @__PURE__ */ $("div", { className: `${c}-value`, children: [
+                C,
+                !g && /* @__PURE__ */ t(ne, { text: C, className: `${c}-copy` })
+              ] }),
+              /* @__PURE__ */ t(
+                "input",
+                {
+                  className: `${c}-input`,
+                  value: C,
+                  disabled: g,
+                  readOnly: !0
+                }
+              ),
+              a.extra
+            ]
+          }
+        ) : w;
+      })()
+    }
+  );
+}
+const fe = Z.forwardRef(
+  pe
+);
+fe.displayName = "ColorPicker";
 export {
-  s as default
+  fe as default
 };

package/Comment.js

@@ -2,20 +2,20 @@ import { jsxs as n, jsx as a } from "react/jsx-runtime";
 import g from "lodash/isPlainObject";
 import N from "lodash/isString";
 import { forwardRef as v, useContext as u } from "react";
-import { b as C } from "./chunk/DUxWiN2U.js";
-import x from "./hooks/useMergeProps.js";
-import { y as d } from "./chunk/Do1aMgY3.js";
+import { d as C } from "./chunk/Bdh4XVuf.js";
+import { useMergeProps as x } from "./hooks/useMergeProps.js";
+import { y as d } from "./chunk/BzPkh4Zv.js";
 import { pickDataAttributes as y } from "./utils/pick.js";
 const P = {
   datetime: "left",
   actions: "left"
-}, b = {
+}, j = {
   align: "left"
 };
-function j(f, p) {
+function b(f, p) {
   const { getPrefixCls: $, componentConfig: s, rtl: h } = u(C), e = x(
     f,
-    b,
+    j,
     s == null ? void 0 : s.Comment
   ), t = $("comment"), { actions: o, author: r, avatar: i, content: m, datetime: l } = e, c = {
     ...P,
@@ -65,7 +65,7 @@ function j(f, p) {
   );
 }
 const A = v(
-  j
+  b
 );
 A.displayName = "Comment";
 export {

package/ConfigProvider.js

@@ -1,5 +1,5 @@
-import { C as r } from "./chunk/DUxWiN2U.js";
-import { a as e, b as f, c as t } from "./chunk/DUxWiN2U.js";
+import { a as r } from "./chunk/Bdh4XVuf.js";
+import { b as e, d as f, c as t } from "./chunk/Bdh4XVuf.js";
 export {
   e as ConfigConsumer,
   f as ConfigContext,

package/Copy.js

@@ -1,11 +1,11 @@
 import { jsx as r, jsxs as T } from "react/jsx-runtime";
-import { c as b } from "./chunk/B45v5S9k.js";
-import { I as h } from "./chunk/BCk8e9fj.js";
+import { c as h } from "./chunk/BHn4xgbv.js";
+import { I as b } from "./chunk/B7Zsp3gO.js";
 import { useContext as P, useState as w, useRef as E, useEffect as I } from "react";
-import { b as k } from "./chunk/DUxWiN2U.js";
-import v from "./hooks/useKeyboardEvent.js";
+import { d as k } from "./chunk/Bdh4XVuf.js";
+import { useKeyboardEvent as v } from "./hooks/useKeyboardEvent.js";
 import N from "./Tooltip.js";
-import { y as j } from "./chunk/Do1aMgY3.js";
+import { y as j } from "./chunk/BzPkh4Zv.js";
 import { s as S } from "./chunk/Cb_oWoGj.js";
 import U from "./utils/mergedToString.js";
 function $(t) {
@@ -15,7 +15,7 @@ function $(t) {
     (u = o == null ? void 0 : o.Typography) == null ? void 0 : u.copied
   ];
   let f = null;
-  t.icon !== null && t.icon !== !1 && (f = e ? /* @__PURE__ */ r(b, {}) : t.icon || /* @__PURE__ */ r(h, {}));
+  t.icon !== null && t.icon !== !1 && (f = e ? /* @__PURE__ */ r(h, {}) : t.icon || /* @__PURE__ */ r(b, {}));
   function a(C) {
     var y;
     if (C.stopPropagation(), e) return;