@unicom-cloud/ui 0.8.67 → 0.8.69

package/chunk/zmmqLCF4.js

@@ -0,0 +1,20 @@
+import { useSyncExternalStore as n, useDebugValue as i } from "react";
+function t(e) {
+  return window.addEventListener("online", e), window.addEventListener("offline", e), () => {
+    window.removeEventListener("online", e), window.removeEventListener("offline", e);
+  };
+}
+function r() {
+  const e = n(
+    t,
+    // 只要传递的是同一个函数，React 不会重新订阅
+    () => navigator.onLine,
+    // 如何在客户端获取值
+    () => !0
+    // 如何在服务端获取值
+  );
+  return i(e ? "Online" : "Offline"), e;
+}
+export {
+  r as u
+};

package/collapse/Collapse.js

@@ -0,0 +1,15 @@
+import "react/jsx-runtime";
+import "@unicom-cloud/icons/IconUiCaretLeft";
+import "@unicom-cloud/icons/IconUiCaretRight";
+import "lodash/isFunction";
+import "react";
+import "../chunk/ll867Bf3.js";
+import "../chunk/BFTV6myl.js";
+import "../chunk/CdaT1b_F.js";
+import "../chunk/JPPo5nY_.js";
+import "../chunk/BKKEev13.js";
+import { a as x, C as d } from "../chunk/BSaQv6mx.js";
+export {
+  x as CollapseContext,
+  d as default
+};

package/collapse/Item.js

@@ -0,0 +1,11 @@
+import "react/jsx-runtime";
+import "../chunk/DzVH9IBy.js";
+import "react";
+import "../chunk/ll867Bf3.js";
+import "../chunk/XTEsYGuF.js";
+import "../chunk/JPPo5nY_.js";
+import "../utils/dom.js";
+import { I as d } from "../chunk/BSaQv6mx.js";
+export {
+  d as default
+};

package/collapse/index.js

@@ -0,0 +1,4 @@
+import { C as a } from "../chunk/BSaQv6mx.js";
+export {
+  a as default
+};

package/collapse/interface.js

@@ -0,0 +1 @@
+

package/color-picker/ControlBar.js

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

package/color-picker/InputAlpha.js

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

package/color-picker/InputHex.js

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

package/color-picker/InputRgb.js

@@ -0,0 +1,61 @@
+import { jsxs as h, jsx as o } from "react/jsx-runtime";
+import { n as x } from "../chunk/B4JiMp8I.js";
+import { useContext as f } from "react";
+import { a as b } from "../chunk/ll867Bf3.js";
+import I, { InputNumber as m } from "../input/Input.js";
+import { InputAlpha as d } from "./InputAlpha.js";
+const E = ({
+  color: s,
+  alpha: p,
+  onHsvChange: u,
+  onAlphaChange: a,
+  disabledAlpha: c
+}) => {
+  const { getPrefixCls: g } = f(b), C = g("color-picker"), t = (n) => {
+    const l = new x({
+      r: n.r,
+      g: n.g,
+      b: n.b
+    }).toHsv_();
+    u(l);
+  }, { r, g: e, b: i } = s.rgb;
+  return /* @__PURE__ */ h(I.Group, { className: `${C}-input-group`, compact: !0, children: [
+    /* @__PURE__ */ o(
+      m,
+      {
+        size: "mini",
+        min: 0,
+        max: 255,
+        hideControl: !0,
+        value: r,
+        onChange: (n) => t({ r: n, g: e, b: i })
+      }
+    ),
+    /* @__PURE__ */ o(
+      m,
+      {
+        size: "mini",
+        min: 0,
+        max: 255,
+        hideControl: !0,
+        value: e,
+        onChange: (n) => t({ r, g: n, b: i })
+      }
+    ),
+    /* @__PURE__ */ o(
+      m,
+      {
+        size: "mini",
+        min: 0,
+        max: 255,
+        hideControl: !0,
+        value: i,
+        onChange: (n) => t({ r, g: e, b: n })
+      }
+    ),
+    !c && /* @__PURE__ */ o(d, { value: p, onChange: a })
+  ] });
+};
+export {
+  E as InputRgb
+};

package/color-picker/Mode.js

@@ -0,0 +1,10 @@
+import { ColorPickerMode as t } from "./interface.js";
+const i = (r) => Array.isArray(r) && r.length === 1 ? r[0] : r, g = (r) => i(r) === t.Single, A = (r) => i(r) === t.Gradient, o = (r) => Array.isArray(i(r)), s = (r) => o(r) ? t.Gradient : r, c = (r, n, e) => r && Array.isArray(r) ? t.Gradient : r && typeof r == "string" ? t.Single : n && Array.isArray(n) ? t.Gradient : n && typeof n == "string" ? t.Single : s(e);
+export {
+  s as getInitialActiveMode,
+  i as getMode,
+  c as getModeByValue,
+  A as isGradientMode,
+  o as isMultiMode,
+  g as isSingleMode
+};

package/color-picker/Palette.js

@@ -0,0 +1,34 @@
+import { jsx as s } from "react/jsx-runtime";
+import { n as C } from "../chunk/B4JiMp8I.js";
+import { useContext as d, useMemo as h } from "react";
+import { a as g } from "../chunk/ll867Bf3.js";
+import { u as x } from "../chunk/k-OUstoD.js";
+const w = ({ color: l, onChange: c }) => {
+  const { getPrefixCls: a } = d(g), e = a("color-picker"), { h: r, s: t, v: n } = l.hsv, { blockRef: f, handlerRef: i, onMouseDown: m } = x({
+    value: [t, 1 - n],
+    onChange: (o) => c(o[0], 1 - o[1])
+  }), p = h(() => new C({ h: r * 360, s: 100, v: 100 }).toRgbString(), [r]), u = () => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: i,
+      className: `${e}-handler`,
+      style: {
+        top: `${(1 - n) * 100}%`,
+        left: `${t * 100}%`
+      }
+    }
+  );
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: f,
+      className: `${e}-palette`,
+      style: { backgroundColor: p },
+      onMouseDown: m,
+      children: u()
+    }
+  );
+};
+export {
+  w as Palette
+};

package/color-picker/Panel.js

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

package/color-picker/colors.js

@@ -0,0 +1,37 @@
+import { n as o } from "../chunk/B4JiMp8I.js";
+import { k as r, s as f } from "../chunk/B6X4lnd0.js";
+new o("#eee");
+const i = [
+  Object.entries(r).map(([t, e], a, l) => f({ color: e, level: 4 })),
+  Object.entries(r).map(([t, e], a, l) => e),
+  !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);
+export {
+  i as colors,
+  i as default
+};