@unicom-cloud/ui 0.8.98 → 0.8.99

package/qr-code/index.js

@@ -1,29 +1,35 @@
 import { jsx as r } from "react/jsx-runtime";
-import Q from "lodash/merge";
-import { QRCodeCanvas as R, QRCodeSVG as h } from "qrcode.react";
-import { useContext as z } from "react";
+import { QRCodeCanvas as b, QRCodeSVG as P } from "qrcode.react";
+import { useContext as Q } from "react";
 import "../config-provider/ConfigProvider.js";
+import "lodash/isEqualWith";
+import "../components/common/utils/is.js";
+import "@unicom-cloud/utils/constant/keyboardCode";
+import "lodash/isNumber";
+import "lodash/merge";
+import "../components/common/utils/dom.js";
+import "../components/common/hooks/useIntersectionObserver.js";
+import R from "../components/common/hooks/useMergeProps.js";
+import "../components/common/utils/reactDOM.js";
+import "@unicom-cloud/utils/constant";
+import "lodash/debounce";
 import "@unicom-cloud/utils/case-name";
-import N from "@unicom-cloud/utils/class-name";
+import S from "@unicom-cloud/utils/class-name";
 import "../dist/tinycolor/chunk/BOzCVdr0.js";
 import "@unicom-cloud/utils/constant/ui";
 import "../utils/contextHolder.js";
 import "@unicom-cloud/utils/dayjs";
 import "@unicom-cloud/utils/clipboard-copy";
 import "../components/common/utils/dayjs.js";
-import "../components/common/utils/dom.js";
 import "@unicom-cloud/utils/file/fileToURL";
 import "lodash/escapeRegExp";
 import "lodash/isArray";
-import "lodash/isNumber";
 import "lodash/isString";
 import "lodash/isFunction";
 import "lodash/throttle";
-import "../components/common/utils/is.js";
 import "lodash/camelCase";
 import "lodash/capitalize";
 import "lodash/cloneDeep";
-import "lodash/debounce";
 import "lodash/get";
 import "lodash/has";
 import "lodash/kebabCase";
@@ -41,7 +47,6 @@ import "../dist/react-transition-group/src/ReplaceTransition.js";
 import "../dist/react-transition-group/src/SwitchTransition.js";
 import "../dist/react-transition-group/chunk/CPfP7aNL.js";
 import "../dist/react-transition-group/src/TransitionGroup.js";
-import "../components/common/utils/reactDOM.js";
 import "@unicom-cloud/utils/file/saveAs";
 import "@unicom-cloud/utils/screenfull";
 import "@unicom-cloud/utils/constant/ui.js";
@@ -49,40 +54,52 @@ import "@unicom-cloud/utils/tree";
 import "@unicom-cloud/utils/is";
 import "uuid";
 import "../dist/validate/src/index.js";
-import "@unicom-cloud/utils/constant/keyboardCode";
-import S from "../config-provider/context.js";
-const bo = (e) => {
-  const { getPrefixCls: s, componentConfig: n } = z(S), {
-    value: f,
-    renderAs: t = "svg",
-    size: o = 160,
-    bordered: m = !0,
-    errorLevel: a = "M",
-    fgColor: c = "#000000",
-    bgColor: d = "#ffffff",
-    marginSize: l = 0,
-    imageSettings: C,
-    className: g,
+import h from "../config-provider/context.js";
+const q = {
+  renderAs: "svg",
+  size: 160,
+  bordered: !0,
+  errorLevel: "M",
+  fgColor: "#000000",
+  bgColor: "#ffffff",
+  marginSize: 0,
+  value: "qr-code"
+}, Mo = (e) => {
+  const { getPrefixCls: s, componentConfig: n } = Q(h), d = R(
+    e,
+    q,
+    n?.QRCode
+  ), {
+    value: l,
+    renderAs: t,
+    size: o,
+    bordered: i,
+    errorLevel: a,
+    fgColor: c,
+    bgColor: f,
+    marginSize: C = 0,
+    imageSettings: g,
+    className: u,
     style: v
-  } = Q({}, n?.QRCode, e), i = s?.("qrcode"), u = o - (m ? 12 : 0), x = () => {
+  } = d, m = s?.("qrcode"), x = o - (i ? 12 : 0), z = () => {
     const p = {
-      value: f,
-      size: u,
+      value: l,
+      size: x,
       level: a,
       fgColor: c,
-      bgColor: d,
-      marginSize: l,
-      imageSettings: C
+      bgColor: f,
+      marginSize: C,
+      imageSettings: g
     };
-    return t === "canvas" ? /* @__PURE__ */ r(R, { ...p }) : /* @__PURE__ */ r(h, { ...p });
+    return t === "canvas" ? /* @__PURE__ */ r(b, { ...p }) : /* @__PURE__ */ r(P, { ...p });
   };
   return /* @__PURE__ */ r(
     "div",
     {
-      className: N(
-        i,
-        m && `${i}-bordered`,
-        g,
+      className: S(
+        m,
+        i && `${m}-bordered`,
+        u,
         `qrcode-${t}`
       ),
       style: {
@@ -90,10 +107,10 @@ const bo = (e) => {
         height: o,
         ...v
       },
-      children: x()
+      children: z()
     }
   );
 };
 export {
-  bo as default
+  Mo as default
 };

package/rate/index.js

@@ -1,6 +1,6 @@
 import { jsx as r, jsxs as Y } from "react/jsx-runtime";
 import Z from "@unicom-cloud/icons/IconUiFaceFrownFill";
-import A from "@unicom-cloud/icons/IconUiFaceMehFill";
+import R from "@unicom-cloud/icons/IconUiFaceMehFill";
 import x from "@unicom-cloud/icons/IconUiFaceSmileFill";
 import ee from "@unicom-cloud/icons/IconUiStarFill";
 import { times as oe, div as te } from "@unicom-cloud/utils/math";
@@ -49,30 +49,30 @@ function ie(H, U) {
   }, w = (e, s) => {
     const o = s && a ? e + 0.5 : e + 1;
     o !== f && (P(o), F?.(o));
-  }, R = (e, s) => {
+  }, V = (e, s) => {
     const o = s && a ? e + 0.5 : e + 1;
     M(!0), o !== c ? (I(o), y?.(o)) : T && (I(0), y?.(0), b());
   }, G = (e) => {
     const s = a ? oe(+te(c || 0, 0.5).toFixed(0), 0.5) : Math.round(c), o = f || s;
     let n = typeof l == "function" ? l(e) : l;
-    N && (o <= 2 ? n = /* @__PURE__ */ r(Z, {}) : o <= 3 ? n = /* @__PURE__ */ r(A, {}) : n = /* @__PURE__ */ r(x, {}), o <= e && (n = /* @__PURE__ */ r(A, {})));
+    N && (o <= 2 ? n = /* @__PURE__ */ r(Z, {}) : o <= 3 ? n = /* @__PURE__ */ r(R, {}) : n = /* @__PURE__ */ r(x, {}), o <= e && (n = /* @__PURE__ */ r(R, {})));
     const J = k(`${t}-character`, {
       [`${t}-character-half`]: a && e + 0.5 === o,
       [`${t}-character-full`]: e + 1 <= o,
       [`${t}-character-scale`]: p && e + 1 < c
     }), K = i || m ? {} : {
       onMouseEnter: w.bind(this, e, !0),
-      onClick: R.bind(this, e, !0)
+      onClick: V.bind(this, e, !0)
     }, O = i || m ? {} : {
       onMouseEnter: w.bind(this, e, !1),
-      onClick: R.bind(this, e, !1)
+      onClick: V.bind(this, e, !1)
     }, u = $ && $[e], Q = u ? se : E.Fragment, X = u ? { content: u } : {};
-    function h(V) {
+    function h(A) {
       return {
         role: "radio",
-        "aria-checked": e + (V ? 0.5 : 1) <= o,
+        "aria-checked": e + (A ? 0.5 : 1) <= o,
         "aria-setsize": v,
-        "aria-posinset": e + (V ? 0.5 : 1)
+        "aria-posinset": e + (A ? 0.5 : 1)
       };
     }
     return /* @__PURE__ */ r(Q, { ...X, children: /* @__PURE__ */ Y(

package/segmented/index.js

@@ -0,0 +1,217 @@
+import { jsxs as C, jsx as b, Fragment as W } from "react/jsx-runtime";
+import { forwardRef as X, useContext as Y, useMemo as Z, useState as V, useRef as k, useCallback as _, useEffect as I } from "react";
+import "../config-provider/ConfigProvider.js";
+import ee from "../components/common/hooks/useMergeProps.js";
+import S from "@unicom-cloud/utils/class-name";
+import { resizeObserver as te } from "../components/common/utils/resizeObserver.js";
+import ne from "../config-provider/context.js";
+const re = {
+  options: [],
+  size: "medium",
+  mode: "default",
+  disabled: !1,
+  block: !1,
+  direction: "horizontal",
+  showIndicator: !0,
+  animationDuration: 300
+}, ae = X(
+  (z, u) => {
+    const { getPrefixCls: P, componentConfig: E, rtl: M } = Y(ne), j = ee(
+      z,
+      re,
+      E?.Segmented
+    ), {
+      style: B,
+      className: K,
+      options: D = [],
+      defaultValue: v,
+      value: N,
+      size: L,
+      mode: g,
+      disabled: d,
+      block: U,
+      direction: f,
+      showIndicator: w,
+      animationDuration: F,
+      name: A,
+      onChange: y,
+      ...H
+    } = j, o = Z(() => D.map((e) => typeof e == "string" ? { value: e, label: e } : e), [D]), [q, O] = V(() => v && o.some((e) => e.value === v) ? v : o[0]?.value || ""), [G, m] = V({}), c = k(null), $ = k([]), R = k(!1), r = P?.("segmented"), J = S(
+      r,
+      {
+        [`${r}-block`]: U,
+        [`${r}-disabled`]: d,
+        [`${r}-rtl`]: M,
+        [`${r}-${g}`]: g,
+        [`${r}-${f}`]: f
+      },
+      K
+    ), p = N !== void 0, i = p ? N : q, h = _(() => {
+      if (!w || !c.current) {
+        m((s) => ({ ...s, opacity: 0 }));
+        return;
+      }
+      const e = o.findIndex(
+        (s) => s?.value === i
+      );
+      if (e === -1) {
+        m((s) => ({ ...s, opacity: 0 }));
+        return;
+      }
+      const a = $.current[e];
+      if (!a) {
+        m((s) => ({ ...s, opacity: 0 }));
+        return;
+      }
+      const n = c.current.getBoundingClientRect(), t = a.getBoundingClientRect(), l = f === "vertical" ? {
+        width: t.width,
+        // 垂直模式下宽度撑满
+        top: t.top - n.top,
+        height: t.height
+      } : {
+        width: t.width,
+        left: t.left - n.left,
+        height: t.height
+        // 水平模式下高度撑满
+      };
+      m({
+        ...l,
+        opacity: 1
+      });
+    }, [i, o, w, f]), x = (e, a) => {
+      a || d || (p || O(e), y?.(e));
+    }, Q = (e, a) => {
+      if (d) return;
+      const n = o.length;
+      if (n === 0) return;
+      let t = a;
+      switch (e.key) {
+        case "ArrowLeft":
+        case "ArrowUp":
+          e.preventDefault(), t = (a - 1 + n) % n;
+          break;
+        case "ArrowRight":
+        case "ArrowDown":
+          e.preventDefault(), t = (a + 1) % n;
+          break;
+        case "Home":
+          e.preventDefault(), t = 0;
+          break;
+        case "End":
+          e.preventDefault(), t = n - 1;
+          break;
+        default:
+          return;
+      }
+      for (; t !== a && o[t]?.disabled; )
+        t = (t + (e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 1) + n) % n;
+      const l = o[t]?.value;
+      l && l !== i && (x(l), $.current[t]?.focus());
+    };
+    I(() => {
+      if (!R.current) {
+        R.current = !0;
+        return;
+      }
+      if (!o.some((e) => e.value === i)) {
+        const e = o[0]?.value || "";
+        p || O(e), y?.(e);
+      }
+    }, [o, i, p, y]), I(() => {
+      h();
+    }, [i, o, h]), I(() => {
+      if (!c.current) return;
+      const e = te(
+        [c.current],
+        () => {
+          h();
+        }
+      );
+      return () => {
+        e();
+      };
+    }, [h]);
+    const T = (e, a) => {
+      if (e.render)
+        return e.render(e, a);
+      const n = !e.label && !!e.icon;
+      return /* @__PURE__ */ C(W, { children: [
+        e.icon && /* @__PURE__ */ b("span", { className: `${r}-option-icon`, children: e.icon }),
+        !n && e.label && /* @__PURE__ */ b("span", { className: `${r}-option-label`, children: e.label })
+      ] });
+    };
+    return /* @__PURE__ */ C(
+      "div",
+      {
+        ref: (e) => {
+          typeof u == "function" ? u(e) : u && (u.current = e), c.current = e;
+        },
+        ...H,
+        style: B,
+        className: J,
+        role: "radiogroup",
+        children: [
+          !Array.isArray(o) || o.length === 0 ? null : o.map((e, a) => {
+            if (!e) return null;
+            const n = e.value === i, t = e.disabled || d, l = !e.label && !!e.icon;
+            return /* @__PURE__ */ C(
+              "button",
+              {
+                ref: (s) => $.current[a] = s,
+                className: S(
+                  `${r}-option`,
+                  `${r}-option-${L}`,
+                  `${r}-option-${g}`,
+                  {
+                    [`${r}-option-active`]: n,
+                    [`${r}-option-disabled`]: t,
+                    [`${r}-option-icon-only`]: l
+                  }
+                ),
+                onClick: () => x(e.value, t),
+                onKeyDown: (s) => Q(s, a),
+                disabled: t,
+                role: "radio",
+                "aria-checked": n,
+                "aria-disabled": t,
+                tabIndex: n ? 0 : -1,
+                children: [
+                  A && /* @__PURE__ */ b(
+                    "input",
+                    {
+                      type: "radio",
+                      name: A,
+                      value: e.value,
+                      checked: n,
+                      onChange: () => {
+                      },
+                      className: `${r}-input`,
+                      tabIndex: -1,
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  T(e, n)
+                ]
+              },
+              e.value || a
+            );
+          }),
+          w && /* @__PURE__ */ b(
+            "div",
+            {
+              className: `${r}-indicator`,
+              style: {
+                ...G,
+                transitionDuration: `${F}ms`
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ae.displayName = "Segmented";
+export {
+  ae as default
+};

package/space/index.js

@@ -1,7 +1,6 @@
 import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as g, useContext as x } from "react";
-import C from "../components/common/space/index.js";
-import { SpaceVertical as J } from "../components/common/space/index.js";
+import { forwardRef as C, useContext as d } from "react";
+import u, { SpaceVertical as x } from "../components/common/space/index.js";
 import "../config-provider/ConfigProvider.js";
 import "lodash/isEqualWith";
 import "../components/common/utils/is.js";
@@ -10,43 +9,43 @@ import "lodash/isNumber";
 import "lodash/merge";
 import "../components/common/utils/dom.js";
 import "../components/common/hooks/useIntersectionObserver.js";
-import d from "../components/common/hooks/useMergeProps.js";
+import N from "../components/common/hooks/useMergeProps.js";
 import "../components/common/utils/reactDOM.js";
 import "@unicom-cloud/utils/constant";
 import "lodash/debounce";
-import u from "@unicom-cloud/utils/class-name";
+import S from "@unicom-cloud/utils/class-name";
 import $ from "../config-provider/context.js";
-const N = {
-  gap: "small",
+const g = {
+  size: "small",
   direction: "horizontal"
 };
-function S(m, a) {
-  const { getPrefixCls: s, componentConfig: n, rtl: P } = x($), c = d(
-    m,
-    N,
-    n?.Space
-  ), { className: f, direction: t, wrap: p, size: e, align: i, ...o } = c;
-  e && (o.gap = e), i && (o.alignItems = i);
-  const r = s?.("space");
+function w(e, i) {
+  const { getPrefixCls: m, componentConfig: s, rtl: a } = d($), c = N(
+    e,
+    g,
+    s?.Space
+  ), { className: n, direction: o, wrap: t, ...f } = c, r = m?.("space");
   return /* @__PURE__ */ l(
-    C,
+    u,
     {
-      ref: a,
-      className: u(
-        `${r}`,
-        p && `${r}-wrap`,
-        `${r}-${t}`,
-        f
+      ref: i,
+      className: S(
+        r,
+        t && `${r}-wrap`,
+        o && `${r}-${o}`,
+        n
       ),
-      direction: t,
-      wrap: p,
-      ...o
+      direction: o,
+      wrap: t,
+      rtl: a,
+      ...f
     }
   );
 }
-const w = g(S);
-w.displayName = "Space";
+const p = C(w);
+p.displayName = "Space";
+p.Vertical = x;
 export {
-  J as SpaceVertical,
-  w as default
+  x as SpaceVertical,
+  p as default
 };

package/splitter/index.js

@@ -0,0 +1,117 @@
+import { jsxs as k, jsx as f } from "react/jsx-runtime";
+import { useState as P, useRef as m, useCallback as i, useEffect as C } from "react";
+const I = {
+  direction: "horizontal",
+  initialSize: 0.5,
+  minSize: "10%",
+  maxSize: "90%",
+  gutterSize: 8,
+  disabled: !1
+}, A = (b) => {
+  const {
+    direction: e,
+    initialSize: D,
+    minSize: M,
+    maxSize: E,
+    gutterSize: c,
+    gutterStyle: W,
+    disabled: a,
+    onDragStart: h,
+    onDragEnd: z,
+    onDrag: p,
+    firstPane: L,
+    secondPane: N,
+    style: H,
+    className: R
+  } = { ...I, ...b }, [o, j] = P(D), [r, S] = P(!1), n = m(null), g = m(0), v = m(0), y = i(
+    (t) => {
+      if (typeof t == "string") {
+        if (t.endsWith("%"))
+          return parseFloat(t) / 100;
+        if (t.endsWith("px") && n.current) {
+          const w = parseFloat(t), d = e === "horizontal" ? n.current.offsetWidth : n.current.offsetHeight;
+          return w / d;
+        }
+      }
+      return t;
+    },
+    [e]
+  ), x = y(M), $ = y(E), F = i(
+    (t) => {
+      a || (S(!0), g.current = e === "horizontal" ? t.clientX : t.clientY, v.current = o, document.body.style.cursor = e === "horizontal" ? "col-resize" : "row-resize", document.body.style.userSelect = "none", h?.());
+    },
+    [e, a, o, h]
+  ), l = i(
+    (t) => {
+      if (!r || !n.current) return;
+      const d = (e === "horizontal" ? t.clientX : t.clientY) - g.current, Y = e === "horizontal" ? n.current.offsetWidth : n.current.offsetHeight;
+      let s = v.current + d / Y;
+      s = Math.max(x, Math.min($, s)), j(s), p?.(s);
+    },
+    [r, e, x, $, p]
+  ), u = i(() => {
+    r && (S(!1), document.body.style.cursor = "", document.body.style.userSelect = "", z?.(o));
+  }, [r, o, z]);
+  C(() => (document.addEventListener("mousemove", l), document.addEventListener("mouseup", u), () => {
+    document.removeEventListener("mousemove", l), document.removeEventListener("mouseup", u);
+  }), [l, u]);
+  const V = `calc(${o * 100}% - ${c / 2}px)`, X = `calc(${(1 - o) * 100}% - ${c / 2}px)`;
+  return /* @__PURE__ */ k(
+    "div",
+    {
+      ref: n,
+      className: `splitter-container ${e} ${R}`,
+      style: {
+        display: "flex",
+        flexDirection: e === "horizontal" ? "row" : "column",
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+        ...H
+      },
+      children: [
+        /* @__PURE__ */ f(
+          "div",
+          {
+            className: "splitter-pane first",
+            style: {
+              flex: `0 0 ${V}`,
+              overflow: "auto",
+              minWidth: 0,
+              minHeight: 0
+            },
+            children: L
+          }
+        ),
+        /* @__PURE__ */ f(
+          "div",
+          {
+            className: `splitter-gutter ${e} ${r ? "active" : ""} ${a ? "disabled" : ""}`,
+            style: {
+              [e === "horizontal" ? "width" : "height"]: c,
+              ...W
+            },
+            onMouseDown: F
+          }
+        ),
+        /* @__PURE__ */ f(
+          "div",
+          {
+            className: "splitter-pane second",
+            style: {
+              flex: `0 0 ${X}`,
+              overflow: "auto",
+              minWidth: 0,
+              minHeight: 0
+            },
+            children: N
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  A as Splitter,
+  A as default
+};

package/splitter/interface.js

@@ -0,0 +1 @@
+