@unicom-cloud/ui 0.8.55 → 0.8.57

package/chunk/BlKc_pDZ.js

@@ -0,0 +1,678 @@
+import { jsx as r, jsxs as x } from "react/jsx-runtime";
+import re from "lodash/isFunction";
+import oe from "lodash/isNil";
+import ie, { useState as R, useRef as X, useEffect as j, useContext as F, useMemo as S, useCallback as se } from "react";
+import { n as $, b as P } from "./DUxWiN2U.js";
+import le from "../Copy.js";
+import ae from "../hooks/useMergeProps.js";
+import ce from "../Trigger.js";
+import { y as M } from "./Do1aMgY3.js";
+import { S as ue } from "./BpwDupra.js";
+import q from "../Tooltip.js";
+import { a as H, I as z } from "./Bl-ODC57.js";
+import me from "../hooks/useIsFirstRender.js";
+import U from "../hooks/useMergeValue.js";
+const O = 10, V = {
+  red: "#F53F3F",
+  orangered: "#FF702E",
+  orange: "#FFA500",
+  gold: "#FFBD14",
+  yellow: "#FFE014",
+  lime: "#A1E619",
+  green: "#00B82B",
+  cyan: "#0BD0D0",
+  blue: "#2E8FFF",
+  pqbblue: "#1A5EFF",
+  purple: "#7126D9",
+  pinkpurple: "#D91AD9",
+  magenta: "#FF299F"
+}, J = {
+  light: [
+    "#F7F8F9",
+    "#F2F3F4",
+    "#E5E6E7",
+    "#C9CACB",
+    "#A9ABAC",
+    "#868788",
+    "#6B6C6D",
+    "#4D4E4F",
+    "#28292A",
+    "#1E1F20"
+  ],
+  dark: [
+    "#121213",
+    "#1C1C1D",
+    "#404142",
+    "#5E5F60",
+    "#797A7B",
+    "#9C9E9F",
+    "#BCBDBE",
+    "#D8D9DB",
+    "#E4E6E8",
+    "#E8EBEE"
+  ],
+  primary: "#6B6C6D"
+}, de = Object.fromEntries(
+  Object.entries(V).map(([e, n], l, u) => [
+    e,
+    {
+      light: Z({ color: n }),
+      dark: ee({ color: n }),
+      primary: n
+    }
+  ]).concat([["gray", J]])
+);
+function K(e = {}) {
+  const n = ((e == null ? void 0 : e.length) ?? O) / 2 + 1, l = e.level ?? n;
+  let u = new $(e.color);
+  const d = u.toHsv(), p = d.h, i = d.s, o = d.v, g = p === 0 && i === 0, h = l < n, a = Math.abs(n - l), s = 1, t = 0.1;
+  let c = i;
+  c > t && (h ? c = i - (i - t) / (n - 1) * a : c = i + (s - i) / (n - 1) * a), g && (c = i);
+  const v = g ? 0.97 : 1, C = 0.1;
+  let m = o;
+  return m > C && (h ? m = o + (v - o) / (n - 1) * a : m = o - (o - C) / (n - 1) * a), u = new $({
+    h: p,
+    s: c,
+    v: m
+  }), "darkenLevel" in e && (u = u.darken(e.darkenLevel)), u.toHexString();
+}
+function T(e = {}) {
+  return K(e);
+}
+function Q(e = {}) {
+  return K({ darkenLevel: 10, ...e });
+}
+function Z(e = {}) {
+  return new Array((e == null ? void 0 : e.length) ?? O).fill(0).map((n, l) => T({ ...e, level: l + 1 }));
+}
+function ee(e = {}) {
+  return new Array((e == null ? void 0 : e.length) ?? O).fill(0).map((n, l) => Q({ ...e, level: l + 1 })).reverse();
+}
+function pe(e) {
+  return new $(e).toRgbArrayString();
+}
+const Le = {
+  colors: V,
+  grayPresets: J,
+  colorPresets: de,
+  palette: T,
+  paletteDark: Q,
+  generate: Z,
+  generateDark: ee,
+  getRgbArrayString: pe
+};
+function W(e, n) {
+  return e < 0 ? 0 : e > n ? 1 : e / n;
+}
+function ne({ value: e, onChange: n }) {
+  const [l, u] = R(!1), d = X(), p = X();
+  function i(s) {
+    const { clientX: t, clientY: c } = s;
+    if (!d.current)
+      return;
+    const v = d.current.getBoundingClientRect(), C = [
+      W(t - v.x, v.width),
+      W(c - v.y, v.height)
+    ];
+    (C[0] !== e[0] || C[1] !== e[1]) && (n == null || n(C));
+  }
+  function o() {
+    u(!1), window.removeEventListener("mousemove", a), window.removeEventListener("mouseup", o), window.removeEventListener("contextmenu", o);
+  }
+  function g() {
+    u(!0), window.addEventListener("mousemove", a), window.addEventListener("mouseup", o), window.addEventListener("contextmenu", o);
+  }
+  function h(s) {
+    i(s), g();
+  }
+  function a(s) {
+    s.preventDefault(), s.buttons > 0 ? i(s) : o();
+  }
+  return j(() => () => {
+    o();
+  }, []), {
+    active: l,
+    blockRef: d,
+    handlerRef: p,
+    onMouseDown: h
+  };
+}
+const Y = ({
+  x: e,
+  type: n = "hue",
+  color: l,
+  onChange: u,
+  style: d
+}) => {
+  const { getPrefixCls: p } = F(P), i = p("color-picker"), { r: o, g, b: h } = l.rgb, { blockRef: a, handlerRef: s, onMouseDown: t } = ne({
+    value: [e, 0],
+    onChange: (v) => u(v[0])
+  }), c = () => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: s,
+      style: {
+        left: `${e * 100}%`
+      },
+      className: `${i}-handler`,
+      children: /* @__PURE__ */ r(
+        "div",
+        {
+          className: `${i}-handler-center`,
+          style: { backgroundColor: l.string }
+        }
+      )
+    }
+  );
+  return n === "alpha" ? /* @__PURE__ */ r("div", { className: `${i}-control-bar-bg`, children: /* @__PURE__ */ r(
+    "div",
+    {
+      ref: a,
+      className: M(
+        `${i}-control-bar`,
+        `${i}-control-bar-alpha`,
+        `${i}-control-bar-alpha`
+      ),
+      style: {
+        background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${o}, ${g}, ${h}))`,
+        ...d
+      },
+      onMouseDown: t,
+      children: c()
+    }
+  ) }) : /* @__PURE__ */ r(
+    "div",
+    {
+      ref: a,
+      style: d,
+      className: M(`${i}-control-bar`, `${i}-control-bar-hue`),
+      onMouseDown: t,
+      children: c()
+    }
+  );
+}, te = ({ value: e, onChange: n }) => {
+  const { getPrefixCls: l } = F(P), u = l("color-picker");
+  return /* @__PURE__ */ r(
+    H,
+    {
+      className: `${u}-input-alpha`,
+      size: "mini",
+      min: 0,
+      max: 100,
+      value: Math.round(e * 100),
+      suffix: "%",
+      onChange: (d) => n(d / 100)
+    }
+  );
+}, ge = ({
+  color: e,
+  alpha: n,
+  onHsvChange: l,
+  onAlphaChange: u,
+  disabledAlpha: d
+}) => {
+  const { getPrefixCls: p } = F(P), i = p("color-picker"), [o, g] = R(e.hex);
+  j(() => {
+    e.hex !== o && g(e.hex);
+  }, [e]);
+  const h = (t) => {
+    var v;
+    const c = ((v = t.match(/[a-fA-F0-9]*/g)) == null ? void 0 : v.join("")) ?? "";
+    c !== o && g(c.toUpperCase());
+  }, a = () => {
+    let t = new $(o);
+    t.ok || (t = new $({
+      r: 255,
+      g: 0,
+      b: 0
+    }));
+    const c = t.toHsv_();
+    l(c);
+  }, s = (t) => {
+    let c = t.clipboardData.getData("Text");
+    c.startsWith("#") && (c = c.slice(1)), h(c), t.preventDefault();
+  };
+  return /* @__PURE__ */ x(z.Group, { className: `${i}-input-group`, compact: !0, children: [
+    /* @__PURE__ */ r(
+      z,
+      {
+        className: `${i}-input-hex`,
+        prefix: "#",
+        size: "mini",
+        maxLength: 6,
+        value: o,
+        onChange: h,
+        onBlur: a,
+        onPressEnter: a,
+        onPaste: s
+      }
+    ),
+    !d && /* @__PURE__ */ r(te, { value: n, onChange: u })
+  ] });
+}, fe = ({
+  color: e,
+  alpha: n,
+  onHsvChange: l,
+  onAlphaChange: u,
+  disabledAlpha: d
+}) => {
+  const { getPrefixCls: p } = F(P), i = p("color-picker"), o = (s) => {
+    const t = new $({
+      r: s.r,
+      g: s.g,
+      b: s.b
+    }).toHsv_();
+    l(t);
+  }, { r: g, g: h, b: a } = e.rgb;
+  return /* @__PURE__ */ x(z.Group, { className: `${i}-input-group`, compact: !0, children: [
+    /* @__PURE__ */ r(
+      H,
+      {
+        size: "mini",
+        min: 0,
+        max: 255,
+        hideControl: !0,
+        value: g,
+        onChange: (s) => o({ r: s, g: h, b: a })
+      }
+    ),
+    /* @__PURE__ */ r(
+      H,
+      {
+        size: "mini",
+        min: 0,
+        max: 255,
+        hideControl: !0,
+        value: h,
+        onChange: (s) => o({ r: g, g: s, b: a })
+      }
+    ),
+    /* @__PURE__ */ r(
+      H,
+      {
+        size: "mini",
+        min: 0,
+        max: 255,
+        hideControl: !0,
+        value: a,
+        onChange: (s) => o({ r: g, g: h, b: s })
+      }
+    ),
+    !d && /* @__PURE__ */ r(te, { value: n, onChange: u })
+  ] });
+}, he = ({ color: e, onChange: n }) => {
+  const { getPrefixCls: l } = F(P), u = l("color-picker"), { h: d, s: p, v: i } = e.hsv, { blockRef: o, handlerRef: g, onMouseDown: h } = ne({
+    value: [p, 1 - i],
+    onChange: (t) => n(t[0], 1 - t[1])
+  }), a = S(() => new $({ h: d * 360, s: 100, v: 100 }).toRgbString(), [d]), s = () => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: g,
+      className: `${u}-handler`,
+      style: {
+        top: `${(1 - i) * 100}%`,
+        left: `${p * 100}%`
+      }
+    }
+  );
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ref: o,
+      className: `${u}-palette`,
+      style: { backgroundColor: a },
+      onMouseDown: h,
+      children: s()
+    }
+  );
+}, ve = ({
+  color: e,
+  alpha: n,
+  disabledAlpha: l,
+  colorString: u,
+  historyColors: d,
+  presetColors: p,
+  showHistory: i,
+  showPreset: o,
+  renderPreset: g,
+  renderHistory: h,
+  renderPickSection: a,
+  renderFooter: s,
+  onHsvChange: t,
+  onAlphaChange: c
+}) => {
+  const { getPrefixCls: v, locale: C } = F(P), m = v("color-picker"), [D, k] = R("hex"), { h: f, s: w, v: E } = e.hsv, N = S(() => {
+    if (!i)
+      return [];
+    const b = new Set(d ?? []);
+    return Array.from(b);
+  }, [d, i]), y = (b) => {
+    let A = new $(b);
+    A.ok || (A = new $({
+      r: 255,
+      g: 0,
+      b: 0
+    })), t(A.toHsv_());
+  }, B = () => D === "rgb" ? /* @__PURE__ */ r(
+    fe,
+    {
+      color: e,
+      alpha: n,
+      onHsvChange: t,
+      onAlphaChange: c,
+      disabledAlpha: l
+    }
+  ) : /* @__PURE__ */ r(
+    ge,
+    {
+      color: e,
+      alpha: n,
+      onHsvChange: t,
+      onAlphaChange: c,
+      disabledAlpha: l
+    }
+  ), I = (b) => /* @__PURE__ */ r(q, { mini: !0, content: b, color: b, children: /* @__PURE__ */ r(
+    "div",
+    {
+      className: `${m}-color-block`,
+      onClick: () => {
+        y(b);
+      },
+      children: /* @__PURE__ */ r(
+        "div",
+        {
+          className: `${m}-block`,
+          style: { backgroundColor: b }
+        }
+      )
+    },
+    b
+  ) }, b), L = () => h ? h() : i ? /* @__PURE__ */ x("div", { className: `${m}-colors-section`, children: [
+    /* @__PURE__ */ r("div", { className: `${m}-colors-text`, children: C.ColorPicker.history }),
+    /* @__PURE__ */ r("div", { className: `${m}-colors-wrapper`, children: N != null && N.length ? /* @__PURE__ */ r("div", { className: `${m}-colors-list`, children: N.map(I) }) : /* @__PURE__ */ r("span", { className: `${m}-colors-empty`, children: C.ColorPicker.empty }) })
+  ] }) : null, _ = () => {
+    var b;
+    return g ? g() : o ? /* @__PURE__ */ x("div", { className: `${m}-colors-section`, children: [
+      /* @__PURE__ */ r("div", { className: `${m}-colors-text`, children: C.ColorPicker.preset }),
+      /* @__PURE__ */ r("div", { className: `${m}-colors-wrapper`, children: /* @__PURE__ */ r("div", { className: `${m}-colors-list`, children: (b = p == null ? void 0 : p.map) == null ? void 0 : b.call(p, I) }) })
+    ] }) : null;
+  }, G = () => a ? a() : i || o ? /* @__PURE__ */ x("div", { className: `${m}-panel-colors`, children: [
+    L(),
+    _()
+  ] }) : null;
+  return /* @__PURE__ */ x("div", { className: `${m}-panel`, children: [
+    /* @__PURE__ */ r(he, { color: e, onChange: (b, A) => t({ h: f, s: b, v: A }) }),
+    /* @__PURE__ */ x("div", { className: `${m}-panel-control`, children: [
+      /* @__PURE__ */ x("div", { className: `${m}-control-wrapper`, children: [
+        /* @__PURE__ */ x("div", { children: [
+          /* @__PURE__ */ r(
+            Y,
+            {
+              type: "hue",
+              x: f,
+              color: e,
+              onChange: (b) => t({ h: b, s: w, v: E })
+            }
+          ),
+          !l && /* @__PURE__ */ r(
+            Y,
+            {
+              type: "alpha",
+              x: n,
+              color: e,
+              onChange: c
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r(q, { mini: !0, content: e.hex8String, color: e.string, children: /* @__PURE__ */ r(
+          "div",
+          {
+            className: `${m}-preview`,
+            style: { backgroundColor: e.string }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ x("div", { className: `${m}-input-wrapper`, children: [
+        /* @__PURE__ */ r(
+          ue,
+          {
+            className: `${m}-select-type`,
+            size: "mini",
+            options: [
+              {
+                value: "hex",
+                label: "HEX"
+              },
+              // {
+              //   value: 'hsl',
+              //   label: 'HSL',
+              // },
+              {
+                value: "rgb",
+                label: "RGB"
+              }
+            ],
+            value: D,
+            triggerProps: {
+              className: `${m}-type-dropdown`,
+              getPopupContainer() {
+                return window.document.body;
+              }
+            },
+            onChange: k
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: `${m}-group-wrapper`, children: B() })
+      ] })
+    ] }),
+    G(),
+    typeof s == "function" ? s() : null
+  ] });
+};
+new $("#eee");
+const be = [
+  Object.entries(V).map(([e, n], l, u) => T({ color: n, level: 4 })),
+  Object.entries(V).map(([e, n], l, u) => n),
+  !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), Ce = (e) => {
+  const { format: n, onChange: l, disabledAlpha: u } = e ?? {}, d = me(), [p, i] = U("", e), o = S(() => new $(p).toHsv_(), [p]), [g, h] = U(!1, {
+    defaultValue: e.defaultPopupVisible,
+    value: e.popupVisible
+  }), [a, s] = R({
+    h: o.h,
+    s: o.s,
+    v: o.v
+  }), [t, c] = R(o.a), v = S(() => {
+    let f = new $({
+      h: a.h * 360,
+      s: a.s * 100,
+      v: a.v * 100,
+      a: t
+    });
+    const w = f.toRgb(), { r: E, g: N, b: y } = w;
+    return {
+      hsv: a,
+      rgb: w,
+      rgbString: f.toRgbString(),
+      hex: f.toHex(),
+      hexString: f.toHexString(),
+      hex8String: f.toHex8String(),
+      string: `rgba(${E}, ${N}, ${y}, ${t.toFixed(2)})`,
+      tiny: f,
+      alpha: t
+    };
+  }, [a, t, n]), C = S(() => n === "rgb" ? v.rgbString : t < 1 ? v.hex8String : v.hexString, [v]);
+  j(() => {
+    i(C), !d && (l == null || l(C));
+  }, [C]);
+  const m = se(
+    (f) => {
+      var w;
+      if (f && p !== C) {
+        const { h: E, s: N, v: y, a: B } = o;
+        s({ h: E, s: N, v: y }), c(B);
+      }
+      f !== g && ((w = e.onVisibleChange) == null || w.call(e, f), "popupVisible" in e || h(f));
+    },
+    [e.onVisibleChange, g, p]
+  );
+  return {
+    value: p,
+    popupVisible: g,
+    color: v,
+    alpha: t,
+    onHsvChange: (f) => {
+      s(f), u && t !== 100 && c(100);
+    },
+    onAlphaChange: (f) => {
+      c(f);
+    },
+    onVisibleChange: m
+  };
+}, xe = {
+  size: "default",
+  presetColors: be
+};
+function $e(e, n) {
+  const { getPrefixCls: l, componentConfig: u } = F(P), d = ae(
+    e,
+    xe,
+    u == null ? void 0 : u.ColorPicker
+  ), {
+    style: p,
+    className: i,
+    size: o,
+    disabled: g,
+    disabledAlpha: h = !1,
+    triggerProps: a = {},
+    unmountOnExit: s,
+    showText: t,
+    historyColors: c,
+    presetColors: v,
+    showHistory: C,
+    showPreset: m,
+    renderFooter: D
+  } = d, k = l("color-picker"), {
+    value: f,
+    popupVisible: w,
+    color: E,
+    alpha: N,
+    colorString: y,
+    onHsvChange: B,
+    onAlphaChange: I,
+    onVisibleChange: L
+  } = Ce(d);
+  return /* @__PURE__ */ r(
+    ce,
+    {
+      popup: () => /* @__PURE__ */ r(
+        ve,
+        {
+          color: E,
+          alpha: N,
+          colorString: y,
+          historyColors: c,
+          presetColors: v,
+          showHistory: C,
+          showPreset: m,
+          onHsvChange: B,
+          onAlphaChange: I,
+          disabledAlpha: h,
+          renderFooter: D
+        }
+      ),
+      trigger: "click",
+      position: "bl",
+      popupAlign: {
+        top: 8,
+        bottom: 8,
+        left: 8,
+        right: 8
+      },
+      disabled: g,
+      popupVisible: w,
+      classNames: "slideDynamicOrigin",
+      unmountOnExit: s,
+      ...a,
+      onVisibleChange: L,
+      children: (() => {
+        const b = re(e.triggerElement) ? e.triggerElement({ value: f }) : e.triggerElement;
+        return oe(b) ? /* @__PURE__ */ x(
+          "div",
+          {
+            className: M(k, i, {
+              [`${k}-size-${o}`]: o,
+              [`${k}-disabled`]: g
+            }),
+            style: p,
+            ref: n,
+            children: [
+              /* @__PURE__ */ r(
+                "div",
+                {
+                  className: `${k}-preview`,
+                  style: { backgroundColor: f }
+                }
+              ),
+              !!t && /* @__PURE__ */ x("div", { className: `${k}-value`, children: [
+                f,
+                !g && /* @__PURE__ */ r(le, { text: f, className: `${k}-copy` })
+              ] }),
+              /* @__PURE__ */ r(
+                "input",
+                {
+                  className: `${k}-input`,
+                  value: f,
+                  disabled: g,
+                  readOnly: !0
+                }
+              ),
+              d.extra
+            ]
+          }
+        ) : b;
+      })()
+    }
+  );
+}
+const ke = ie.forwardRef(
+  $e
+);
+ke.displayName = "ColorPicker";
+export {
+  ee as C,
+  Le as M,
+  ke as a,
+  Z as b,
+  Q as d,
+  V as h,
+  J as v,
+  de as w,
+  pe as x,
+  T as y
+};