@unicom-cloud/ui 0.8.43 → 0.8.45

package/progress/LineProgess.js

@@ -0,0 +1,103 @@
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import C from "@unicom-cloud/icons/IconUiExclamationCircleFill";
+import N from "lodash/isFunction";
+import j from "lodash/isPlainObject";
+import { useCallback as y } from "react";
+import u from "@unicom-cloud/utils/class-name";
+const m = (t, a) => {
+  if (j(t)) {
+    const n = Object.keys(t).map((e) => `${t[e]} ${e}`).join(","), o = a ? { backgroundSize: `${100 * 100 / a}%` } : {};
+    return {
+      backgroundImage: `linear-gradient(to right, ${n})`,
+      ...o
+    };
+  }
+  return {
+    backgroundColor: t
+  };
+}, T = {
+  small: 3,
+  default: 4,
+  large: 8
+};
+function S(t) {
+  const {
+    // textInside,
+    type: a,
+    prefixCls: n,
+    buffer: o,
+    percent: e,
+    color: d,
+    animation: f,
+    bufferColor: $,
+    formatText: l,
+    trailColor: h,
+    showText: g = !0,
+    inlineText: p = !1,
+    size: x = "default",
+    status: i = "normal"
+  } = t, b = t.strokeWidth || T[x], r = `${n}-${a}`, k = b, v = i === "success" || i === "error" || e >= 100, w = y(() => {
+    if (N(l))
+      return l(e);
+    switch (i) {
+      case "error":
+        return /* @__PURE__ */ c("span", { children: [
+          e,
+          "% ",
+          /* @__PURE__ */ s(C, {})
+        ] });
+      default:
+        return `${e}%`;
+    }
+  }, [l, e, i]);
+  return /* @__PURE__ */ c("div", { className: `${r}-wrapper`, children: [
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: `${r}-outer`,
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": e,
+        style: { height: k, backgroundColor: h },
+        children: [
+          o && !v && /* @__PURE__ */ s(
+            "div",
+            {
+              className: `${r}-inner-buffer`,
+              style: {
+                width: `${e > 0 ? e + 10 : 0}%`,
+                ...m($)
+              }
+            }
+          ),
+          /* @__PURE__ */ s(
+            "div",
+            {
+              className: u(`${r}-inner`, {
+                [`${r}-inner-animate`]: f
+              }),
+              style: {
+                width: `${e}%`,
+                ...m(d, e)
+              }
+            }
+          )
+        ]
+      }
+    ),
+    g && /* @__PURE__ */ s(
+      "div",
+      {
+        className: u(`${r}-text`, {
+          [`${r}-text-with-icon`]: i,
+          [`${r}-text-inline`]: p
+        }),
+        children: w()
+      }
+    )
+  ] });
+}
+export {
+  S as default
+};

package/progress/StepProgress.js

@@ -0,0 +1,74 @@
+import { jsxs as n, jsx as s } from "react/jsx-runtime";
+import g from "@unicom-cloud/icons/IconUiExclamationCircleFill";
+import C from "lodash/isFunction";
+import { useCallback as N } from "react";
+import c from "@unicom-cloud/utils/class-name";
+const F = (r) => {
+  const {
+    prefixCls: m,
+    percent: t,
+    color: u,
+    type: d,
+    formatText: a,
+    trailColor: f,
+    showText: x = !0,
+    inlineText: h = !1,
+    size: p = "default",
+    status: i = "normal"
+  } = r, $ = r.strokeWidth || (p === "small" ? 8 : 4), e = `${m}-${d}`, v = $, w = N(() => {
+    if (C(a))
+      return a(t);
+    switch (i) {
+      case "error":
+        return /* @__PURE__ */ n("span", { children: [
+          t,
+          "% ",
+          /* @__PURE__ */ s(g, {})
+        ] });
+      default:
+        return `${t}%`;
+    }
+  }, [a, t, i]);
+  return /* @__PURE__ */ n("div", { className: `${e}-wrapper`, children: [
+    /* @__PURE__ */ s(
+      "div",
+      {
+        className: `${e}-outer`,
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": t,
+        style: { height: v },
+        children: [...new Array(r.steps)].map((k, o) => {
+          const l = t > 100 / r.steps * o;
+          return /* @__PURE__ */ s(
+            "div",
+            {
+              className: c(`${e}-item`, {
+                [`${e}-item-active`]: l
+              }),
+              style: {
+                backgroundColor: l ? u : f || ""
+              }
+            },
+            o
+          );
+        })
+      }
+    ),
+    x && /* @__PURE__ */ s(
+      "div",
+      {
+        className: c(`${e}-text`, {
+          [`${e}-text-with-icon`]: i,
+          [`${e}-text-inline`]: h
+        }),
+        children: w()
+      }
+    )
+  ] });
+};
+export {
+  F as StepProgress,
+  F as default
+};

package/radio/Group.js

@@ -0,0 +1,91 @@
+import { jsx as t } from "react/jsx-runtime";
+import G from "lodash/isArray";
+import j from "lodash/isPlainObject";
+import { createContext as k, useContext as A } from "react";
+/* empty css                  */
+import "../config-provider/ConfigProvider.js";
+import M from "../hooks/useMergeProps.js";
+import D from "../hooks/useMergeValue.js";
+import F from "@unicom-cloud/utils/class-name";
+import { pickTriggerPropsFromRest as O } from "../utils/constant.js";
+import { pickDataAttributes as S } from "../utils/pick.js";
+import f from "./Radio.js";
+import { ConfigContext as T } from "../config-provider/context.js";
+const v = {
+  type: "radio"
+}, q = {
+  type: "radio",
+  mode: "outline",
+  direction: "horizontal"
+}, g = k(v), ee = ({ children: i }) => /* @__PURE__ */ t(g.Provider, { value: v, children: i });
+function w(i) {
+  const {
+    getPrefixCls: x,
+    size: C,
+    componentConfig: s,
+    rtl: $
+  } = A(T), r = M(
+    i,
+    q,
+    s == null ? void 0 : s["Radio.Group"]
+  ), {
+    style: b,
+    className: P,
+    name: h,
+    children: y,
+    direction: V,
+    type: n,
+    mode: c,
+    options: l,
+    disabled: a
+  } = r, [m, z] = D(void 0, {
+    defaultValue: r.defaultValue,
+    value: r.value
+  }), p = r.size || C, o = x("radio"), N = F(
+    `${o}-group`,
+    {
+      [`${o}-group-type-button`]: n !== "radio",
+      [`${o}-size-${p}`]: !!p,
+      [`${o}-mode-${c}`]: !!c,
+      [`${o}-group-disabled`]: a,
+      [`${o}-group-direction-vertical`]: V === "vertical",
+      [`${o}-group-rtl`]: $
+    },
+    P
+  ), R = {
+    onChangeValue: (e, u) => {
+      const { onChange: d } = r;
+      e !== m && ("value" in r || z(e), d == null || d(e, u));
+    },
+    type: n,
+    value: m,
+    disabled: a,
+    group: !0,
+    name: h
+  };
+  return /* @__PURE__ */ t(g.Provider, { value: R, children: /* @__PURE__ */ t(
+    "div",
+    {
+      className: N,
+      role: "radiogroup",
+      style: b,
+      ...O(r),
+      ...S(r),
+      children: l && G(l) ? l.map((e, u) => j(e) ? /* @__PURE__ */ t(
+        f,
+        {
+          disabled: a || e.disabled,
+          value: e.value,
+          children: e.label
+        },
+        e.value
+      ) : /* @__PURE__ */ t(f, { value: e, disabled: a, children: e }, u)) : y
+    }
+  ) });
+}
+w.displayName = "RadioGroup";
+export {
+  ee as ClearRadioGroupContext,
+  g as RadioGroupContext,
+  w as default
+};

package/radio/Radio.js

@@ -0,0 +1,90 @@
+import { jsxs as h, jsx as c, Fragment as j } from "react/jsx-runtime";
+import C from "lodash/isFunction";
+import D from "lodash/isNil";
+import F, { useRef as I, useContext as k } from "react";
+/* empty css                  */
+import "../config-provider/ConfigProvider.js";
+import M from "../hooks/useMergeProps.js";
+import w from "../hooks/useMergeValue.js";
+import A from "../IconHover.js";
+import B from "@unicom-cloud/utils/class-name";
+import H from "../utils/omit.js";
+import L, { RadioGroupContext as b } from "./Group.js";
+import { ConfigContext as O } from "../config-provider/context.js";
+function u(g) {
+  const d = I(null), { getPrefixCls: N, componentConfig: p, rtl: x } = k(O), r = M(
+    g,
+    {},
+    p == null ? void 0 : p.Radio
+  ), e = k(b), a = N("radio"), t = { ...r };
+  e.group && (t.checked = e.value === r.value, t.disabled = "disabled" in r ? r.disabled : e.disabled);
+  const { disabled: m, children: l, value: $, style: v, className: R, ...n } = t, [s, y] = w(!1, {
+    value: t.checked,
+    defaultValue: t.defaultChecked
+  }), P = B(
+    `${a}${e.type === "button" ? "-button" : ""}`,
+    {
+      [`${a}-checked`]: s,
+      [`${a}-disabled`]: m,
+      [`${a}-rtl`]: x
+    },
+    R
+  ), G = (o) => {
+    var f;
+    const { onChange: i, value: _ } = t;
+    m || (e.group ? (f = e.onChangeValue) == null || f.call(e, _, o) : !("checked" in r) && !s && y(!0), !s && (i == null || i(!0, o)));
+  }, V = F.useCallback(
+    (o) => {
+      var i;
+      C(r.children) && (o.preventDefault(), d.current && d.current.click()), (i = n.onClick) == null || i.call(n, o);
+    },
+    [r.children, n.onClick]
+  );
+  return /* @__PURE__ */ h(
+    "label",
+    {
+      ...H(n, ["checked", "onChange"]),
+      onClick: V,
+      style: v,
+      className: P,
+      children: [
+        /* @__PURE__ */ c(
+          "input",
+          {
+            ref: d,
+            disabled: m,
+            value: $ || "",
+            type: "radio",
+            ...e.name ? { name: e.name } : {},
+            checked: s,
+            onChange: (o) => {
+              o.persist(), G(o);
+            },
+            onClick: (o) => {
+              o.stopPropagation();
+            }
+          }
+        ),
+        C(l) ? l({ checked: s }) : e.type === "radio" ? /* @__PURE__ */ h(j, { children: [
+          /* @__PURE__ */ c(
+            A,
+            {
+              prefix: a,
+              className: `${a}-mask-wrapper`,
+              disabled: s || m,
+              children: /* @__PURE__ */ c("div", { className: `${a}-mask` })
+            }
+          ),
+          !D(l) && /* @__PURE__ */ c("span", { className: `${a}-text`, children: l })
+        ] }) : e.type === "button" && /* @__PURE__ */ c("span", { className: `${a}-button-inner`, children: l })
+      ]
+    }
+  );
+}
+u.__PQB_RADIO = !0;
+u.displayName = "Radio";
+u.Group = L;
+u.GroupContext = b;
+export {
+  u as default
+};

package/resize-box/ResizeTrigger.js

@@ -0,0 +1,78 @@
+import { jsx as o, jsxs as L } from "react/jsx-runtime";
+import M from "@unicom-cloud/icons/IconUiCaretDown";
+import v from "@unicom-cloud/icons/IconUiCaretLeft";
+import I from "@unicom-cloud/icons/IconUiCaretRight";
+import V from "@unicom-cloud/icons/IconUiCaretUp";
+import q from "@unicom-cloud/icons/IconUiDragDot";
+import A from "@unicom-cloud/icons/IconUiDragDotVertical";
+import D from "lodash/isFunction";
+import { useContext as B, useRef as G, useEffect as J } from "react";
+/* empty css                  */
+import "../config-provider/ConfigProvider.js";
+import n from "@unicom-cloud/utils/class-name";
+import { isObject as R } from "../utils/is.js";
+import K from "../utils/omit.js";
+import { ConfigContext as Q } from "../config-provider/context.js";
+function lo(U) {
+  const {
+    className: T,
+    direction: k,
+    icon: w,
+    onMouseDown: y,
+    onResize: j,
+    children: u,
+    collapsible: t = {},
+    resizable: m = !0,
+    renderChildren: a,
+    ...z
+  } = U, { getPrefixCls: P, rtl: g } = B(Q), r = P("resizebox-trigger"), c = k === "horizontal", b = g && !c, C = n(
+    r,
+    `${r}-${c ? "horizontal" : "vertical"}`,
+    { [`${r}-not-resizable`]: !m },
+    { [`${r}-rtl`]: g },
+    T
+  ), i = G(), x = b ? [/* @__PURE__ */ o(I, {}, "prev"), /* @__PURE__ */ o(v, {}, "next")] : [/* @__PURE__ */ o(v, {}, "prev"), /* @__PURE__ */ o(I, {}, "next")], s = R(t.prev) ? {
+    ...t.prev,
+    icon: t.prev.icon || (c ? /* @__PURE__ */ o(V, {}) : x[0])
+  } : {}, l = R(t.next) ? {
+    ...t.next,
+    icon: t.next.icon || (c ? /* @__PURE__ */ o(M, {}) : x[1])
+  } : {}, E = () => s.icon && !s.collapsed || l.collapsed ? /* @__PURE__ */ o(
+    "span",
+    {
+      className: n(`${r}-icon`, n(`${r}-prev`)),
+      onClick: s.onClick,
+      children: s.icon
+    }
+  ) : /* @__PURE__ */ o("span", { className: n(`${r}-icon-empty`) }), F = () => l.icon && !l.collapsed || s.collapsed ? /* @__PURE__ */ o(
+    "span",
+    {
+      className: n(`${r}-icon`, n(`${r}-next`)),
+      onClick: l.onClick,
+      children: l.icon
+    }
+  ) : /* @__PURE__ */ o("span", { className: n(`${r}-icon-empty`) }), H = () => m ? /* @__PURE__ */ o("span", { className: `${r}-icon`, children: w || (c ? /* @__PURE__ */ o(q, {}) : /* @__PURE__ */ o(A, {})) }) : /* @__PURE__ */ o("span", { className: n(`${r}-icon-empty`) }), p = E(), f = H(), d = F(), N = () => /* @__PURE__ */ L("div", { className: `${r}-icon-wrapper`, children: [
+    p,
+    f,
+    d
+  ] });
+  return m ? (J(() => {
+    let e;
+    return i.current && (e = new ResizeObserver(j), e.observe(i.current)), () => {
+      var $, h;
+      i.current && (($ = e == null ? void 0 : e.unobserve) == null || $.call(e, i.current)), (h = e == null ? void 0 : e.disconnect) == null || h.call(e), e = null;
+    };
+  }, [i.current]), /* @__PURE__ */ o(
+    "div",
+    {
+      ref: i,
+      ...K(z, ["style"]),
+      className: C,
+      onMouseDown: y,
+      children: D(a) ? a(p, f, d) : u || N()
+    }
+  )) : /* @__PURE__ */ o("div", { className: C, children: D(a) ? a(p, f, d) : u || N() });
+}
+export {
+  lo as default
+};

package/resize-box/Split.js

@@ -0,0 +1,132 @@
+import { jsx as $, jsxs as ie } from "react/jsx-runtime";
+import { forwardRef as ce, useContext as ae, useState as D, useRef as y, useImperativeHandle as fe, useEffect as ue } from "react";
+/* empty css                  */
+import "../config-provider/ConfigProvider.js";
+import me from "../hooks/useIsomorphicLayoutEffect.js";
+import T from "@unicom-cloud/utils/class-name";
+import { on as m, off as l } from "../utils/dom.js";
+import le from "./ResizeTrigger.js";
+import { ConfigContext as de } from "../config-provider/context.js";
+const C = "horizontal", W = "vertical";
+function ge(n, A) {
+  const {
+    style: L,
+    className: V,
+    component: j = "div",
+    direction: p = "horizontal",
+    icon: B,
+    size: d = 0.5,
+    min: v,
+    max: x,
+    panes: _,
+    disabled: Z,
+    trigger: k
+  } = n, { getPrefixCls: q, rtl: H } = ae(de), s = q("resizebox-split"), g = p.includes(C), I = p.includes("reverse"), G = g && H, R = !g, J = T(
+    s,
+    `${s}-${g ? C : W}`,
+    { [`${s}-rtl`]: H },
+    V
+  ), [K, Q] = _, i = typeof d == "string", [c, E] = D(parseFloat(d)), [F, U] = D(0), t = y({
+    startX: 0,
+    startY: 0,
+    startWidth: 0,
+    startHeight: 0,
+    startOffset: 0,
+    moving: !1
+  }), w = y(), O = y([]);
+  fe(A, () => w.current, []);
+  function N(e, o) {
+    return parseFloat(e) / parseFloat(o);
+  }
+  function M(e, o, r, f) {
+    const X = typeof v == "string" ? N(parseFloat(v), e) : v || 0, Y = typeof x == "string" ? N(parseFloat(x), e) : x || 1;
+    let z = I ? -1 : 1;
+    z *= G ? -1 : 1;
+    let u = i ? o + (f - r) * z : N(
+      e * o + (f - r) * z,
+      e
+    );
+    const re = i ? X * e : X, se = i ? Y * e : Y;
+    return u = Math.max(u, re), u = Math.min(u, se), u;
+  }
+  function ee(e) {
+    var o, r, f;
+    (o = n.onMovingStart) == null || o.call(n), t.current.moving = !0, t.current.startX = e.pageX, t.current.startY = e.pageY, t.current.startWidth = (r = w.current) == null ? void 0 : r.offsetWidth, t.current.startHeight = (f = w.current) == null ? void 0 : f.offsetHeight, t.current.startOffset = c, m(window, "mousemove", h), m(window, "touchmove", h), m(window, "mouseup", a), m(window, "touchend", a), m(window, "contextmenu", a), document.body.style.cursor = R ? "row-resize" : "col-resize";
+  }
+  function h(e) {
+    var o;
+    if (t.current.moving) {
+      const r = g ? M(
+        t.current.startWidth,
+        t.current.startOffset,
+        t.current.startX,
+        e.pageX
+      ) : M(
+        t.current.startHeight,
+        t.current.startOffset,
+        t.current.startY,
+        e.pageY
+      );
+      E(r), (o = n.onMoving) == null || o.call(n, e, i ? `${r}px` : r);
+    }
+  }
+  function a() {
+    var e;
+    t.current.moving = !1, l(window, "mousemove", h), l(window, "touchmove", h), l(window, "mouseup", a), l(window, "touchend", a), l(window, "contextmenu", a), document.body.style.cursor = "default", (e = n.onMovingEnd) == null || e.call(n);
+  }
+  function te(e) {
+    const { contentRect: o } = e[0], r = o[R ? "height" : "width"];
+    U(r);
+  }
+  function ne() {
+    const e = i ? "px" : "%";
+    return c ? `calc(${i ? c : c * 100}${e} - ${F / 2}px)` : `0${e}`;
+  }
+  ue(() => {
+    var e;
+    (e = n.onPaneResize) == null || e.call(n, O.current);
+  }, [c, F]), me(() => {
+    const e = parseFloat(d);
+    c !== e && E(e);
+  }, [d]);
+  const oe = j, b = /* @__PURE__ */ $(
+    "div",
+    {
+      className: T(`${s}-pane`, "first-pane"),
+      style: { flexBasis: ne() },
+      ref: (e) => {
+        O.current[0] = e;
+      },
+      children: K
+    }
+  ), P = /* @__PURE__ */ $(
+    "div",
+    {
+      className: T(`${s}-pane`, "second-pane"),
+      ref: (e) => {
+        O.current[1] = e;
+      },
+      children: Q
+    }
+  ), S = I ? [P, b] : [b, P];
+  return /* @__PURE__ */ ie(oe, { style: L, className: J, ref: w, children: [
+    S[0],
+    !Z && /* @__PURE__ */ $(
+      le,
+      {
+        className: `${s}-trigger`,
+        direction: R ? C : W,
+        icon: B,
+        onMouseDown: ee,
+        onResize: te,
+        children: k
+      }
+    ),
+    S[1]
+  ] });
+}
+const we = ce(ge);
+we.displayName = "ResizeBoxSplit";
+export {
+  we as default
+};