@unicom-cloud/ui 0.8.44 → 0.8.46

package/color-picker/Panel.js

@@ -0,0 +1,165 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import w from "@unicom-cloud/utils/tinycolor";
+import { useContext as G, useState as M, useMemo as X } from "react";
+/* empty css                  */
+import "../config-provider/ConfigProvider.js";
+/* empty css                           */
+/* empty css                        */
+/* empty css                      */
+/* empty css                            */
+/* empty css                          */
+/* empty css                         */
+import _ from "../select/Select.js";
+import y from "../Tooltip.js";
+import { ControlBar as C } from "./ControlBar.js";
+import { InputHex as q } from "./InputHex.js";
+import { InputRgb as D } from "./InputRgb.js";
+import { Palette as F } from "./Palette.js";
+import { ConfigContext as J } from "../config-provider/context.js";
+const me = ({
+  color: t,
+  alpha: a,
+  disabledAlpha: p,
+  colorString: K,
+  historyColors: f,
+  presetColors: c,
+  showHistory: m,
+  showPreset: v,
+  renderPreset: N,
+  renderHistory: $,
+  renderPickSection: g,
+  renderFooter: h,
+  onHsvChange: o,
+  onAlphaChange: d
+}) => {
+  const { getPrefixCls: S, locale: u } = G(J), e = S("color-picker"), [x, P] = M("hex"), { h: k, s: I, v: B } = t.hsv, s = X(() => {
+    if (!m)
+      return [];
+    const n = new Set(f ?? []);
+    return Array.from(n);
+  }, [f, m]), j = (n) => {
+    let l = new w(n);
+    l.ok || (l = new w({
+      r: 255,
+      g: 0,
+      b: 0
+    })), o(l.toHsv_());
+  }, R = () => x === "rgb" ? /* @__PURE__ */ r(
+    D,
+    {
+      color: t,
+      alpha: a,
+      onHsvChange: o,
+      onAlphaChange: d,
+      disabledAlpha: p
+    }
+  ) : /* @__PURE__ */ r(
+    q,
+    {
+      color: t,
+      alpha: a,
+      onHsvChange: o,
+      onAlphaChange: d,
+      disabledAlpha: p
+    }
+  ), b = (n) => /* @__PURE__ */ r(y, { mini: !0, content: n, color: n, children: /* @__PURE__ */ r(
+    "div",
+    {
+      className: `${e}-color-block`,
+      onClick: () => {
+        j(n);
+      },
+      children: /* @__PURE__ */ r(
+        "div",
+        {
+          className: `${e}-block`,
+          style: { backgroundColor: n }
+        }
+      )
+    },
+    n
+  ) }, n), T = () => $ ? $() : m ? /* @__PURE__ */ i("div", { className: `${e}-colors-section`, children: [
+    /* @__PURE__ */ r("div", { className: `${e}-colors-text`, children: u.ColorPicker.history }),
+    /* @__PURE__ */ r("div", { className: `${e}-colors-wrapper`, children: s != null && s.length ? /* @__PURE__ */ r("div", { className: `${e}-colors-list`, children: s.map(b) }) : /* @__PURE__ */ r("span", { className: `${e}-colors-empty`, children: u.ColorPicker.empty }) })
+  ] }) : null, z = () => {
+    var n;
+    return N ? N() : v ? /* @__PURE__ */ i("div", { className: `${e}-colors-section`, children: [
+      /* @__PURE__ */ r("div", { className: `${e}-colors-text`, children: u.ColorPicker.preset }),
+      /* @__PURE__ */ r("div", { className: `${e}-colors-wrapper`, children: /* @__PURE__ */ r("div", { className: `${e}-colors-list`, children: (n = c == null ? void 0 : c.map) == null ? void 0 : n.call(c, b) }) })
+    ] }) : null;
+  }, E = () => g ? g() : m || v ? /* @__PURE__ */ i("div", { className: `${e}-panel-colors`, children: [
+    T(),
+    z()
+  ] }) : null;
+  return /* @__PURE__ */ i("div", { className: `${e}-panel`, children: [
+    /* @__PURE__ */ r(F, { color: t, onChange: (n, l) => o({ h: k, s: n, v: l }) }),
+    /* @__PURE__ */ i("div", { className: `${e}-panel-control`, children: [
+      /* @__PURE__ */ i("div", { className: `${e}-control-wrapper`, children: [
+        /* @__PURE__ */ i("div", { children: [
+          /* @__PURE__ */ r(
+            C,
+            {
+              type: "hue",
+              x: k,
+              color: t,
+              onChange: (n) => o({ h: n, s: I, v: B })
+            }
+          ),
+          !p && /* @__PURE__ */ r(
+            C,
+            {
+              type: "alpha",
+              x: a,
+              color: t,
+              onChange: d
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r(y, { mini: !0, content: t.hex8String, color: t.string, children: /* @__PURE__ */ r(
+          "div",
+          {
+            className: `${e}-preview`,
+            style: { backgroundColor: t.string }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ i("div", { className: `${e}-input-wrapper`, children: [
+        /* @__PURE__ */ r(
+          _,
+          {
+            className: `${e}-select-type`,
+            size: "mini",
+            options: [
+              {
+                value: "hex",
+                label: "HEX"
+              },
+              // {
+              //   value: 'hsl',
+              //   label: 'HSL',
+              // },
+              {
+                value: "rgb",
+                label: "RGB"
+              }
+            ],
+            value: x,
+            triggerProps: {
+              className: `${e}-type-dropdown`,
+              getPopupContainer() {
+                return window.document.body;
+              }
+            },
+            onChange: P
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: `${e}-group-wrapper`, children: R() })
+      ] })
+    ] }),
+    E(),
+    typeof h == "function" ? h() : null
+  ] });
+};
+export {
+  me as Panel
+};

package/color-picker/colors.js

@@ -0,0 +1,37 @@
+import a from "@unicom-cloud/utils/tinycolor";
+import { colors as o, palette as s } from "@unicom-cloud/utils/ui-color";
+new a("#eee");
+const n = [
+  Object.entries(o).map(([r, e], l, t) => s({ color: e, level: 4 })),
+  Object.entries(o).map(([r, e], l, t) => 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 {
+  n as colors,
+  n as default
+};

package/color-picker/hooks/useColorPicker.js

@@ -0,0 +1,63 @@
+import S from "@unicom-cloud/utils/tinycolor";
+import { useMemo as m, useState as C, useEffect as F, useCallback as P } from "react";
+import k from "../../hooks/useIsFirstRender.js";
+import V from "../../hooks/useMergeValue.js";
+const j = (e) => {
+  const { format: v, onChange: u, disabledAlpha: d } = e ?? {}, H = k(), [o, p] = V("", e), s = m(() => new S(o).toHsv_(), [o]), [g, A] = V(!1, {
+    defaultValue: e.defaultPopupVisible,
+    value: e.popupVisible
+  }), [i, x] = C({
+    h: s.h,
+    s: s.s,
+    v: s.v
+  }), [n, c] = C(s.a), r = m(() => {
+    let t = new S({
+      h: i.h * 360,
+      s: i.s * 100,
+      v: i.v * 100,
+      a: n
+    });
+    const a = t.toRgb(), { r: h, g: f, b } = a;
+    return {
+      hsv: i,
+      rgb: a,
+      rgbString: t.toRgbString(),
+      hex: t.toHex(),
+      hexString: t.toHexString(),
+      hex8String: t.toHex8String(),
+      string: `rgba(${h}, ${f}, ${b}, ${n.toFixed(2)})`,
+      tiny: t,
+      alpha: n
+    };
+  }, [i, n, v]), l = m(() => v === "rgb" ? r.rgbString : n < 1 ? r.hex8String : r.hexString, [r]);
+  F(() => {
+    p(l), !H && (u == null || u(l));
+  }, [l]);
+  const R = P(
+    (t) => {
+      var a;
+      if (t && o !== l) {
+        const { h, s: f, v: b, a: $ } = s;
+        x({ h, s: f, v: b }), c($);
+      }
+      t !== g && ((a = e.onVisibleChange) == null || a.call(e, t), "popupVisible" in e || A(t));
+    },
+    [e.onVisibleChange, g, o]
+  );
+  return {
+    value: o,
+    popupVisible: g,
+    color: r,
+    alpha: n,
+    onHsvChange: (t) => {
+      x(t), d && n !== 100 && c(100);
+    },
+    onAlphaChange: (t) => {
+      c(t);
+    },
+    onVisibleChange: R
+  };
+};
+export {
+  j as useColorPicker
+};

package/color-picker/hooks/useControlBlock.js

@@ -0,0 +1,40 @@
+import { useState as R, useRef as d, useEffect as a } from "react";
+function w(t, n) {
+  return t < 0 ? 0 : t > n ? 1 : t / n;
+}
+function x({ value: t, onChange: n }) {
+  const [m, s] = R(!1), i = d(), v = d();
+  function c(e) {
+    const { clientX: E, clientY: p } = e;
+    if (!i.current)
+      return;
+    const r = i.current.getBoundingClientRect(), u = [
+      w(E - r.x, r.width),
+      w(p - r.y, r.height)
+    ];
+    (u[0] !== t[0] || u[1] !== t[1]) && (n == null || n(u));
+  }
+  function o() {
+    s(!1), window.removeEventListener("mousemove", f), window.removeEventListener("mouseup", o), window.removeEventListener("contextmenu", o);
+  }
+  function l() {
+    s(!0), window.addEventListener("mousemove", f), window.addEventListener("mouseup", o), window.addEventListener("contextmenu", o);
+  }
+  function L(e) {
+    c(e), l();
+  }
+  function f(e) {
+    e.preventDefault(), e.buttons > 0 ? c(e) : o();
+  }
+  return a(() => () => {
+    o();
+  }, []), {
+    active: m,
+    blockRef: i,
+    handlerRef: v,
+    onMouseDown: L
+  };
+}
+export {
+  x as useControlBlock
+};

package/config-provider/ConfigProvider.js

@@ -0,0 +1,94 @@
+import { jsx as g } from "react/jsx-runtime";
+import P from "@unicom-cloud/icons/context";
+import s from "@unicom-cloud/utils/tinycolor";
+import q from "lodash/isPlainObject";
+import { useEffect as f } from "react";
+import w from "../hooks/useMergeProps.js";
+import x from "../Message.js";
+import { setConfigProviderProps as A } from "../modal/config.js";
+import $ from "../Notification.js";
+import j from "../utils/omit.js";
+import { ConfigContext as a, DefaultConfigProviderProps as k } from "./context.js";
+const l = {
+  primaryColor: {
+    default: "--pqbblue-6",
+    hover: "--pqbblue-5",
+    active: "--pqbblue-7"
+  },
+  successColor: {
+    default: "--green-6",
+    hover: "--green-5",
+    active: "--green-7"
+  },
+  infoColor: {
+    default: "--pqbblue-6",
+    hover: "--pqbblue-5",
+    active: "--pqbblue-7"
+  },
+  warningColor: {
+    default: "--orangered-6",
+    hover: "--orangered-5",
+    active: "--orangered-7"
+  },
+  dangerColor: {
+    default: "--red-6",
+    hover: "--red-5",
+    active: "--red-7"
+  }
+};
+function M(t) {
+  if (t && q(t)) {
+    const i = document.body;
+    Object.keys(l).forEach((o) => {
+      let r = t[o];
+      if (r) {
+        let e = new s(r).lighten(0).toRgbArray();
+        i.style.setProperty(l[o].default, e), e = new s(r).lighten(10).toRgbArray(), t[`${o}Hover`] || i.style.setProperty(l[o].hover, e), e = new s(r).lighten(-10).toRgbArray(), t[`${o}Active`] || i.style.setProperty(l[o].active, e);
+      }
+    });
+  }
+}
+const N = k, R = {};
+function b(t) {
+  const i = w(
+    t,
+    N,
+    R
+  ), {
+    theme: o,
+    themeType: r,
+    prefixCls: e,
+    children: c,
+    locale: d,
+    rtl: n,
+    effectGlobalNotice: p = !0,
+    effectGlobalModal: u = !0
+  } = i;
+  f(() => {
+    M(o);
+  }, [o]), f(() => {
+    r && (r === "dark" ? window.document.body.setAttribute("pqb-theme", "dark") : window.document.body.removeAttribute("pqb-theme"));
+  }, [r]), f(() => {
+    p && (x.config({ prefixCls: e, rtl: n }), $.config({ prefixCls: e, rtl: n }));
+  }, [e, n, p]);
+  function v(y, h) {
+    return `${h || e}-${y}`;
+  }
+  const C = {
+    ...j(i, ["children"]),
+    getPrefixCls: v
+  };
+  f(() => {
+    u && A({ locale: d, prefixCls: e, rtl: n });
+  }, [d, e, n, u]);
+  let m = c;
+  return e && e !== "pqb" && (m = /* @__PURE__ */ g(P.Provider, { value: { prefixCls: e }, children: c })), /* @__PURE__ */ g(a.Provider, { value: C, children: m });
+}
+b.ConfigContext = a;
+b.displayName = "ConfigProvider";
+const K = a.Consumer;
+export {
+  K as ConfigConsumer,
+  a as ConfigContext,
+  b as default
+};

package/config-provider/context.js

@@ -0,0 +1,24 @@
+import { jsx as e } from "react/jsx-runtime";
+import { createContext as r } from "react";
+import i from "../Empty.js";
+import n from "../locale/zh-CN.js";
+function p(t) {
+  switch (t) {
+    default:
+      return /* @__PURE__ */ e(i, {});
+  }
+}
+const f = {
+  locale: n,
+  prefixCls: "pqb",
+  getPopupContainer: () => document.body,
+  size: "default",
+  renderEmpty: p
+}, l = r({
+  getPrefixCls: (t, o) => `${o || "pqb"}-${t}`,
+  ...f
+});
+export {
+  l as ConfigContext,
+  f as DefaultConfigProviderProps
+};