@unicom-cloud/ui 0.8.106 → 0.8.108

package/color-picker/hooks/useColorPicker.js

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

package/color-picker/index.js

@@ -1,32 +1,33 @@
 import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import G from "lodash/isFunction";
-import S from "lodash/isNil";
-import D, { useContext as q } from "react";
+import G from "lodash/isArray";
+import S from "lodash/isFunction";
+import D from "lodash/isNil";
+import q, { useContext as J } 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 vo } from "./ControlBar.js";
-import { useColorPicker as W } from "./hooks/useColorPicker.js";
-import { InputAlpha as Io } from "./InputAlpha.js";
-import { InputHex as Ao } from "./InputHex.js";
-import { InputRgb as $o } from "./InputRgb.js";
-import { Palette as wo } 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";
+import K from "../copy/index.js";
+import L from "../components/common/hooks/useMergeProps.js";
+import Q from "../trigger/index.js";
+import U from "@unicom-cloud/utils/class-name";
+import { colors as W } from "./colors.js";
+import { ControlBar as Io } from "./ControlBar.js";
+import { useColorPicker as X } from "./hooks/useColorPicker.js";
+import { InputAlpha as bo } from "./InputAlpha.js";
+import { InputHex as $o } from "./InputHex.js";
+import { InputRgb as wo } from "./InputRgb.js";
+import { Palette as Ro } from "./Palette.js";
+import { Panel as Y } from "./Panel.js";
+import { getGradientString as Z, renderBackground as _ } from "./utils.js";
+import oo from "../config-provider/context.js";
 const c = {
   size: "default",
-  presetColors: U
+  presetColors: W
 };
-function oo(t, m) {
+function ro(t, m) {
   const {
     getPrefixCls: d,
     componentConfig: g,
     size: u
-  } = q(_), n = K(
+  } = J(oo), n = L(
     t,
     { ...c, size: u || c.size },
     g?.ColorPicker
@@ -43,8 +44,8 @@ function oo(t, m) {
     historyColors: y,
     presetColors: I,
     showHistory: N,
-    showPreset: A,
-    renderFooter: b
+    showPreset: b,
+    renderFooter: A
   } = n, r = d?.("color-picker"), {
     value: o,
     activeMode: $,
@@ -52,20 +53,20 @@ function oo(t, m) {
     activeColorId: w,
     activeColorIdRef: E,
     popupVisible: R,
-    color: B,
-    alpha: H,
+    color: H,
+    alpha: B,
     onHsvChange: M,
     onAlphaChange: O,
     onVisibleChange: T,
     onActiveModeChange: V,
     onGradientColorsChange: j,
     onActiveColorIdChange: F
-  } = W(n);
+  } = X(n);
   return /* @__PURE__ */ e(
-    L,
+    Q,
     {
       popup: () => /* @__PURE__ */ e(
-        X,
+        Y,
         {
           value: o,
           mode: h,
@@ -73,19 +74,19 @@ function oo(t, m) {
           gradientColors: z,
           activeColorId: w,
           activeColorIdRef: E,
-          color: B,
-          alpha: H,
+          color: H,
+          alpha: B,
           historyColors: y,
           presetColors: I,
           showHistory: N,
-          showPreset: A,
+          showPreset: b,
           onHsvChange: M,
           onAlphaChange: O,
           onActiveModeChange: V,
           onGradientColorsChange: j,
           onActiveColorIdChange: F,
           disabledAlpha: x,
-          renderFooter: b
+          renderFooter: A
         }
       ),
       trigger: "click",
@@ -103,14 +104,14 @@ function oo(t, m) {
       ...P,
       onVisibleChange: T,
       children: (() => {
-        const a = G(t.triggerElement) ? t.triggerElement({ value: o }) : t.triggerElement;
-        if (!S(a))
+        const a = S(t.triggerElement) ? t.triggerElement({ value: o }) : t.triggerElement;
+        if (!D(a))
           return a;
-        const s = typeof o == "string" ? o : Y(o);
+        const s = typeof o == "string" ? o : Z(o);
         return /* @__PURE__ */ p(
           "div",
           {
-            className: Q(r, f, {
+            className: U(r, f, {
               [`${r}-size-${l}`]: l,
               [`${r}-disabled`]: i
             }),
@@ -121,14 +122,14 @@ function oo(t, m) {
                 "div",
                 {
                   className: `${r}-preview`,
-                  style: Array.isArray(o) ? {
-                    background: Z(o)
+                  style: G(o) ? {
+                    background: _(o)
                   } : { backgroundColor: o }
                 }
               ),
               !!v && /* @__PURE__ */ p("div", { className: `${r}-value`, children: [
                 s,
-                !i && /* @__PURE__ */ e(J, { text: s, className: `${r}-copy` })
+                !i && /* @__PURE__ */ e(K, { text: s, className: `${r}-copy` })
               ] }),
               /* @__PURE__ */ e(
                 "input",
@@ -147,16 +148,16 @@ function oo(t, m) {
     }
   );
 }
-const ro = D.forwardRef(
-  oo
+const eo = q.forwardRef(
+  ro
 );
-ro.displayName = "ColorPicker";
+eo.displayName = "ColorPicker";
 export {
-  vo as ColorPickerControlBar,
-  Io as ColorPickerInputAlpha,
-  Ao as ColorPickerInputHex,
-  $o as ColorPickerInputRgb,
-  wo as ColorPickerPalette,
-  X as ColorPickerPanel,
-  ro as default
+  Io as ColorPickerControlBar,
+  bo as ColorPickerInputAlpha,
+  $o as ColorPickerInputHex,
+  wo as ColorPickerInputRgb,
+  Ro as ColorPickerPalette,
+  Y as ColorPickerPanel,
+  eo as default
 };

package/color-picker/utils.js

@@ -1,89 +1,90 @@
 import s from "@unicom-cloud/utils/tinycolor";
-const R = (t) => t.sort((r, n) => r.percent - n.percent), H = (t, r, n) => Object.keys(t).reduce(
+import c from "lodash/isArray";
+const k = (t) => t.sort((n, r) => n.percent - r.percent), w = (t, n, r) => Object.keys(t).reduce(
   (e, o) => ({
     ...e,
-    [o]: t[o] + (r[o] - t[o]) * n
+    [o]: t[o] + (n[o] - t[o]) * r
   }),
   { ...t }
-), b = (t) => t.map(({ color: r, percent: n }) => `${r} ${n}%`).join(", "), w = (t) => `linear-gradient(to right, ${b(t)})`, G = (t) => Array.isArray(t) ? w(t) : t, k = (t, r, n, e) => e < 1 ? `rgba(${t}, ${r}, ${n}, ${e.toFixed(2)})` : `rgb(${t}, ${r}, ${n})`, q = (t, r, n, e) => e < 1 ? new s({ r: t, g: r, b: n, a: e }).toHexString() : new s({ r: t, g: r, b: n }).toHexString(), p = (t) => {
-  const r = new s({
+), C = (t) => t.map(({ color: n, percent: r }) => `${n} ${r}%`).join(", "), I = (t) => `linear-gradient(to right, ${C(t)})`, q = (t) => c(t) ? I(t) : t, F = (t, n, r, e) => e < 1 ? `rgba(${t}, ${n}, ${r}, ${e.toFixed(2)})` : `rgb(${t}, ${n}, ${r})`, S = (t, n, r, e) => e < 1 ? new s({ r: t, g: n, b: r, a: e }).toHexString() : new s({ r: t, g: n, b: r }).toHexString(), l = (t) => {
+  const n = new s({
     h: t.h * 360,
     s: t.s * 100,
     v: t.v * 100
-  }), n = r.toRgb(), e = r.toHex();
+  }), r = n.toRgb(), e = n.toHex();
   return {
     hsv: t,
-    rgb: n,
+    rgb: r,
     hex: e
   };
-}, c = () => Math.random().toFixed(10).slice(2), A = (t, r) => t.map((n) => {
-  const e = new s(n.color).toHsv_();
+}, i = () => Math.random().toFixed(10).slice(2), j = (t, n) => t.map((r) => {
+  const e = new s(r.color).toHsv_();
   return {
-    id: c(),
-    color: p(e),
-    alpha: r ? 100 : e.a,
-    percent: n.percent
+    id: i(),
+    color: l(e),
+    alpha: n ? 100 : e.a,
+    percent: r.percent
   };
-}), F = (t, r, n) => {
-  const e = t.findIndex((a) => a.percent === r);
+}), P = (t, n, r) => {
+  const e = t.findIndex((a) => a.percent === n);
   if (e !== -1)
     return {
       ...t[e],
-      id: n ?? c()
+      id: r ?? i()
     };
   const o = t.findIndex(
-    (a) => a.percent > r
-  ), l = o - 1, {
-    color: d,
-    alpha: g,
-    percent: i
-  } = t[l], {
-    color: u,
-    alpha: x,
-    percent: f
-  } = t[o], h = H(
+    (a) => a.percent > n
+  ), d = o - 1, {
+    color: g,
+    alpha: u,
+    percent: p
+  } = t[d], {
+    color: x,
+    alpha: f,
+    percent: m
+  } = t[o], h = w(
     {
-      ...d.rgb,
-      a: g
+      ...g.rgb,
+      a: u
     },
     {
-      ...u.rgb,
-      a: x
+      ...x.rgb,
+      a: f
     },
-    (r - i) / (f - i)
-  ), { r: m, g: $, b: y, a: v } = h;
+    (n - p) / (m - p)
+  ), { r: $, g: v, b: H, a: b } = h;
   return {
-    id: n ?? c(),
-    color: p(
+    id: r ?? i(),
+    color: l(
       new s({
-        r: m,
-        g: $,
-        b: y
+        r: $,
+        g: v,
+        b: H
       }).toHsv_()
     ),
-    alpha: v,
-    percent: r
+    alpha: b,
+    percent: n
   };
-}, S = (t, r) => t.h === r.h && t.s === r.s && t.v === r.v, C = (t, r) => t.r === r.r && t.g === r.g && t.b === r.b && t.a === r.a, j = (t, r) => typeof t == "string" && typeof r == "string" ? t === r : Array.isArray(t) && Array.isArray(r) ? t.length === r.length && t.every((n, e) => {
-  const o = r[e];
-  return C(
-    new s(n.color).toRgba(),
+}, T = (t, n) => t.h === n.h && t.s === n.s && t.v === n.v, R = (t, n) => t.r === n.r && t.g === n.g && t.b === n.b && t.a === n.a, _ = (t, n) => typeof t == "string" && typeof n == "string" ? t === n : c(t) && c(n) ? t.length === n.length && t.every((r, e) => {
+  const o = n[e];
+  return R(
+    new s(r.color).toRgba(),
     new s(o.color).toRgba()
-  ) && n.percent === o.percent;
+  ) && r.percent === o.percent;
 }) : !1;
 export {
-  S as equalsHsv,
-  C as equalsRgba,
-  q as formatHex,
-  k as formatRgba,
-  F as getColorByGradients,
-  p as getColorFromHsv,
-  b as getGradientString,
-  c as getRandomId,
-  j as isEqualsColors,
-  A as mapValueToGradientColor,
-  H as mix,
-  G as renderBackground,
-  w as renderGradientBackground,
-  R as sortGradientColors
+  T as equalsHsv,
+  R as equalsRgba,
+  S as formatHex,
+  F as formatRgba,
+  P as getColorByGradients,
+  l as getColorFromHsv,
+  C as getGradientString,
+  i as getRandomId,
+  _ as isEqualsColors,
+  j as mapValueToGradientColor,
+  w as mix,
+  q as renderBackground,
+  I as renderGradientBackground,
+  k as sortGradientColors
 };

package/components/common/empty/index.js

@@ -2,7 +2,7 @@ import { jsxs as N, jsx as s } from "react/jsx-runtime";
 import $ from "@unicom-cloud/icons/IconUiEmpty";
 import { UI_COMMON_PREFIX as g } from "@unicom-cloud/utils/constant/ui";
 import { memo as x, forwardRef as u } from "react";
-import { SpaceVertical as C } from "../space/index.js";
+import C from "../space/index.js";
 import r from "@unicom-cloud/utils/class-name";
 const E = (n, c) => {
   const {
@@ -24,7 +24,7 @@ const E = (n, c) => {
     }
   ) : o ? /* @__PURE__ */ s("div", { className: r(`${e}-icon`, `${t}-icon`), children: o }) : /* @__PURE__ */ s($, { className: r(`${e}-icon`, `${t}-icon`) });
   return /* @__PURE__ */ N(
-    C,
+    C.Vertical,
     {
       ref: c,
       className: r(e, t, p),

package/components/common/flex/index.js

@@ -1,64 +1,73 @@
 import { jsx as d } from "react/jsx-runtime";
-import { UI_COMMON_PREFIX as j } from "@unicom-cloud/utils/constant/ui";
-import { forwardRef as x, useMemo as C } from "react";
-import I from "../hooks/useMergeProps.js";
-import P from "@unicom-cloud/utils/class-name";
+import { UI_COMMON_PREFIX as G } from "@unicom-cloud/utils/constant/ui";
+import { forwardRef as y } from "react";
+import O from "../hooks/useMergeProps.js";
+import I from "@unicom-cloud/utils/class-name";
 import "../utils/is.js";
-import { GAP_SIZE_MAP as y } from "./interface.js";
-import { isBoolean as V, isArray as _, isString as A } from "@unicom-cloud/utils/is";
-const O = (o) => A(o) && Object.keys(y).includes(o), m = (o, r, t) => {
-  t !== void 0 && (O(t) ? o[r] = y[t] : o[r] = typeof t == "number" ? `${t}px` : t);
-}, S = (o = {}, r, t = "gap") => (r === void 0 || (_(r) ? (m(o, "rowGap", r[0]), m(o, "columnGap", r[1])) : m(o, t, r)), o), b = {
+import { GAP_SIZE_MAP as x } from "./interface.js";
+import { isBoolean as M, isArray as P, isString as S } from "@unicom-cloud/utils/is";
+function p(e, i, t) {
+  if (t === void 0)
+    return;
+  S(t) && Object.keys(x).includes(t) ? e[i] = x[t] : e[i] = t;
+}
+function V(e = {}, i, t = "gap") {
+  return i === void 0 || (P(i) ? (p(e, "rowGap", i[0]), p(e, "columnGap", i[1] ?? i[0])) : p(e, t, i)), e;
+}
+const _ = {
   component: "div",
   gap: "small"
-}, a = x((o, r) => {
-  const t = I(o, b, {}), {
-    className: g,
-    style: c,
-    flex: l,
-    gap: f,
-    children: u,
-    direction: e,
-    justify: i,
-    align: n,
-    component: N = "div",
-    wrap: s,
-    rtl: w,
-    ...F
-  } = t, p = `${j}-flex`, G = C(() => {
-    const M = {
-      display: "flex",
-      ...S({}, f),
-      ...s !== void 0 && {
-        flexWrap: V(s) ? s ? "wrap" : "nowrap" : s
-      },
-      ...n && { alignItems: n },
-      ...i && { justifyContent: i },
-      ...e && { flexDirection: e },
-      ...l && { flex: l }
-    };
-    return { ...c, ...M };
-  }, [f, s, n, i, e, l, c]);
-  return /* @__PURE__ */ d(
-    N,
+}, m = y((e, i) => {
+  const t = O(e, _, {}), {
+    className: r,
+    style: $,
+    flex: u,
+    gap: j,
+    children: N,
+    direction: s,
+    justify: l,
+    align: f,
+    component: w = "div",
+    wrap: a,
+    rtl: F,
+    inline: c,
+    ...C
+  } = t, o = `${G}-flex`, n = {
+    display: c ? "inline-flex" : "flex"
+  };
+  return "wrap" in t && (n.flexWrap = M(a) ? a ? "wrap" : "nowrap" : a), "flex" in t && (n.flex = u), f && (n.alignItems = f), l && (n.justifyContent = l), s && (n.flexDirection = s), Object.assign(n, V({}, j), $), /* @__PURE__ */ d(
+    w,
     {
-      ref: r,
-      style: G,
-      className: P(p, g, {
-        [`${p}-rtl`]: w,
-        [`${p}-${e}`]: e,
-        [`${p}-${i}`]: i,
-        [`${p}-${n}`]: n
-      }),
-      ...F,
-      children: u
+      ref: i,
+      style: n,
+      className: I(
+        o,
+        {
+          [`${o}-rtl`]: F,
+          [`${o}-inline`]: c
+        },
+        !!s && `${o}-flex-direction-${s}`,
+        !!l && `${o}-justify-content-${l}`,
+        !!f && `${o}-align-items-${f}`,
+        r
+      ),
+      ...C,
+      children: N
     }
   );
-}), $ = x((o, r) => /* @__PURE__ */ d(a, { ref: r, ...o, direction: "column" }));
-a.Vertical = $;
-a.displayName = "Flex";
-$.displayName = "Flex.Vertical";
+});
+m.displayName = "Flex";
+const g = y(
+  (e, i) => {
+    const { direction: t = "column", ...r } = e;
+    return /* @__PURE__ */ d(m, { ...r, ref: i, direction: t });
+  }
+);
+g.displayName = "FlexVertical";
+const U = Object.assign(m, {
+  Vertical: g
+});
 export {
-  $ as FlexVertical,
-  a as default
+  g as FlexVertical,
+  U as default
 };