@unicom-cloud/ui 0.8.100 → 0.8.101

package/components/common/development/index.js

@@ -1,32 +1,47 @@
-import { jsxs as r, jsx as l } from "react/jsx-runtime";
-import n from "@unicom-cloud/icons/IconFluentFlatHourglassNotDone";
-import a from "@unicom-cloud/utils/class-name";
-import { UI_COMMON_PREFIX as o } from "@unicom-cloud/utils/constant/ui";
-import s from "lodash/uniqBy";
-import c from "lodash/uniqWith";
-import { forwardRef as f, useEffect as u, useImperativeHandle as x } from "react";
-function N(e, i) {
-  c([], (t) => t.xxx), s([{ x: 1 }, { x: 2 }, { x: 1 }], "x");
-  const m = `${o}-development`;
-  return u(() => () => {
-  }, []), x(i, () => ({})), /* @__PURE__ */ r("div", { className: a(m, e.className), children: [
-    e.url ? /* @__PURE__ */ l(
-      "img",
-      {
-        className: a(`${m}-img`, e.imgClassName),
-        src: e.url
-      },
-      "img"
-    ) : e.icon ?? /* @__PURE__ */ l(
-      n,
-      {
-        className: a(`${m}-icon`, e.iconClassName)
-      }
-    ),
-    /* @__PURE__ */ l("div", { className: a(`${m}-label`, e.labelClassName), children: e.tip ?? e.label ?? "等待开发" })
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import C from "@unicom-cloud/icons/IconFluentFlatHourglassNotDone";
+import s from "@unicom-cloud/utils/class-name";
+import { UI_COMMON_PREFIX as v } from "@unicom-cloud/utils/constant/ui";
+import { forwardRef as x, useMemo as b } from "react";
+const g = (t, n) => {
+  const {
+    url: a,
+    // 图片地址
+    imgClassName: o,
+    // 图片自定义类名
+    icon: m,
+    // 自定义图标
+    iconClassName: r,
+    // 图标自定义类名
+    tip: c,
+    // 高优先级提示文字
+    label: i = "等待开发",
+    // 次要提示文字（默认值）
+    labelClassName: p,
+    // 文字容器类名
+    className: N
+    // 外层容器类名
+  } = t, e = `${v}-development`, d = b(() => a ? /* @__PURE__ */ l(
+    "img",
+    {
+      className: s(`${e}-img`, o),
+      src: a,
+      alt: "开发预览图"
+    }
+  ) : m ?? /* @__PURE__ */ l(
+    C,
+    {
+      className: s(`${e}-icon`, r)
+    }
+  ), [a, e, o, m, r]), f = c ?? i;
+  return /* @__PURE__ */ u("div", { ref: n, className: s(e, N), children: [
+    d,
+    /* @__PURE__ */ l("div", { className: s(`${e}-label`, p), children: f })
   ] });
-}
-const h = f(N);
+}, D = x(
+  g
+);
+D.displayName = "Development";
 export {
-  h as default
+  D as default
 };

package/components/common/empty/index.js

@@ -1,37 +1,49 @@
-import { jsxs as N, jsx as t } from "react/jsx-runtime";
+import { jsxs as N, jsx as s } from "react/jsx-runtime";
 import $ from "@unicom-cloud/icons/IconUiEmpty";
-import { UI_COMMON_PREFIX as y } from "@unicom-cloud/utils/constant/ui";
-import { memo as g, forwardRef as x } from "react";
-import { SpaceVertical as u } from "../space/index.js";
-import s from "@unicom-cloud/utils/class-name";
-function C(c, n) {
-  const { style: a, className: p, description: m, icon: o, imgSrc: r, prefixCls: l, ...f } = c, e = `${y}-empty`, i = l ?? e, d = typeof m == "string" ? m : "empty";
+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 r from "@unicom-cloud/utils/class-name";
+const E = (n, c) => {
+  const {
+    style: a,
+    className: p,
+    description: i = "无数据",
+    // 默认描述文本
+    icon: o,
+    imgSrc: m,
+    prefixCls: l,
+    ...f
+  } = n, e = `${g}-empty`, t = l ?? e, d = typeof i == "string" ? i : "empty", y = () => m ? /* @__PURE__ */ s(
+    "img",
+    {
+      className: r(`${e}-img`, `${t}-img`),
+      alt: d,
+      src: m,
+      loading: "lazy"
+    }
+  ) : o ? /* @__PURE__ */ s("div", { className: r(`${e}-icon`, `${t}-icon`), children: o }) : /* @__PURE__ */ s($, { className: r(`${e}-icon`, `${t}-icon`) });
   return /* @__PURE__ */ N(
-    u,
+    C,
     {
-      ref: n,
-      className: s(e, i, p),
+      ref: c,
+      className: r(e, t, p),
       style: a,
       justifyContent: "center",
       alignItems: "center",
       gap: 5,
       ...f,
       children: [
-        r ? /* @__PURE__ */ t(
-          "img",
-          {
-            className: s(`${e}-img`, `${i}-img`),
-            alt: d,
-            src: r
-          }
-        ) : o ? /* @__PURE__ */ t("div", { className: s(`${e}-icon`, `${i}-icon`), children: o }) : /* @__PURE__ */ t($, { className: s(`${e}-icon`, `${i}-icon`) }),
-        /* @__PURE__ */ t("div", { className: s(`${e}-description`, `${i}-description`), children: m || "无数据" })
+        y(),
+        /* @__PURE__ */ s("div", { className: r(`${e}-description`, `${t}-description`), children: i })
       ]
     }
   );
-}
-const E = g(x(C));
-E.displayName = "Empty";
+}, I = x(
+  u(E)
+);
+I.displayName = "Empty";
 export {
-  E as default
+  I as Empty,
+  I as default
 };

package/components/common/flex/index.js

@@ -0,0 +1,64 @@
+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 "../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 = {
+  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,
+    {
+      ref: r,
+      style: G,
+      className: P(p, g, {
+        [`${p}-rtl`]: w,
+        [`${p}-${e}`]: e,
+        [`${p}-${i}`]: i,
+        [`${p}-${n}`]: n
+      }),
+      ...F,
+      children: u
+    }
+  );
+}), $ = x((o, r) => /* @__PURE__ */ d(a, { ref: r, ...o, direction: "column" }));
+a.Vertical = $;
+a.displayName = "Flex";
+$.displayName = "Flex.Vertical";
+export {
+  $ as FlexVertical,
+  a as default
+};

package/components/common/flex/interface.js

@@ -0,0 +1,9 @@
+const p = {
+  mini: "4px",
+  small: "8px",
+  medium: "12px",
+  large: "20px"
+};
+export {
+  p as GAP_SIZE_MAP
+};

package/components/common/higher-order/with-speech-synthesis/index.js

@@ -1,58 +1,82 @@
-import { jsx as i } from "react/jsx-runtime";
-import w from "@unicom-cloud/icons/IconUiMute";
-import y from "@unicom-cloud/icons/IconUiPauseCircleFill";
-import I from "@unicom-cloud/icons/IconUiPlayCircleFill";
-import x from "@unicom-cloud/icons/IconUiSound";
-import { memo as C, forwardRef as P, useState as U, useEffect as g, useImperativeHandle as b } from "react";
-function B(u) {
-  function p(f, m) {
-    const { useButton: h = !0, buttonProps: c, ...o } = f ?? {}, [s, t] = U(!1);
-    function l() {
-      window.speechSynthesis?.cancel?.();
+import { jsx as h } from "react/jsx-runtime";
+import P from "@unicom-cloud/icons/IconUiMute";
+import U from "@unicom-cloud/icons/IconUiPauseCircleFill";
+import b from "@unicom-cloud/icons/IconUiPlayCircleFill";
+import N from "@unicom-cloud/icons/IconUiSound";
+import { forwardRef as v, useState as x, useMemo as E, useCallback as c, useImperativeHandle as F, useEffect as M, memo as R } from "react";
+const T = (S) => {
+  const d = v((g, C) => {
+    const { useButton: I = !0, buttonProps: f = {}, ...s } = g, [l, i] = x(!1), [a, m] = x(
+      null
+    ), e = E(
+      () => "speechSynthesis" in window && "SpeechSynthesisUtterance" in window,
+      []
+    ), o = c(() => {
+      e && (window.speechSynthesis.cancel(), i(!1), m(null));
+    }, [e]), p = c(() => {
+      if (!e) return;
+      o();
+      const n = s.getText?.() ?? s.text;
+      if (!n) return;
+      const t = new SpeechSynthesisUtterance(n);
+      m(t);
+      const r = () => {
+        i(!1), m(null);
+      };
+      t.onstart = () => i(!0), t.onend = r, t.onerror = r, t.onpause = () => i(!1), t.onresume = () => i(!0);
+      try {
+        window.speechSynthesis.speak(t);
+      } catch (y) {
+        console.error("Speech synthesis failed:", y), r();
+      }
+    }, [o, e, s.getText, s.text]), u = c(() => {
+      e && a && window.speechSynthesis.pause();
+    }, [e, a]), w = c(() => {
+      e && a && window.speechSynthesis.resume();
+    }, [e, a]), k = c(
+      (n) => {
+        n.preventDefault(), n.stopPropagation(), l ? u() : p(), f.onClick?.(n);
+      },
+      [l, u, p, f.onClick]
+    );
+    if (F(
+      C,
+      () => ({
+        cancel: o,
+        speak: p,
+        pause: u,
+        resume: w
+      }),
+      [o, p, u, w]
+    ), M(() => o, [o]), !e)
+      return null;
+    if (I) {
+      const { label: n, text: t, children: r, ...y } = f;
+      return /* @__PURE__ */ h(
+        S,
+        {
+          ...s,
+          type: "text",
+          size: "mini",
+          icon: l ? /* @__PURE__ */ h(P, {}) : /* @__PURE__ */ h(N, {}),
+          ...y,
+          onClick: k,
+          children: n || t || r
+        }
+      );
     }
-    function S() {
-      let n = o.getText?.() || o.text, e = new SpeechSynthesisUtterance(n);
-      e.onstart = function() {
-        t(!0);
-      }, e.onerror = () => {
-        t(!1);
-      }, e.onmark = () => {
-      }, e.onpause = () => {
-        t(!1);
-      }, e.onresume = () => {
-        t(!0);
-      }, e.onboundary = () => {
-      }, e.onend = () => {
-        t(!1);
-      }, window.speechSynthesis?.speak?.(e);
-    }
-    function a(n) {
-      l(), s || S(), c?.onClick?.(n);
-    }
-    let r;
-    if (window.speechSynthesis && window.SpeechSynthesisUtterance)
-      if (h) {
-        let { label: n, text: e, children: d, ...k } = c ?? {};
-        r = /* @__PURE__ */ i(
-          u,
-          {
-            ...o,
-            type: "text",
-            size: "mini",
-            icon: s ? /* @__PURE__ */ i(w, {}) : /* @__PURE__ */ i(x, {}),
-            ...k,
-            onClick: a,
-            children: n || e || d
-          }
-        );
-      } else
-        r = /* @__PURE__ */ i(s ? y : I, { ...o.iconProps, onClick: a });
-    return g(() => () => {
-      l();
-    }, []), b(m, () => ({})), r;
-  }
-  return C(P(p));
-}
+    return /* @__PURE__ */ h(
+      l ? U : b,
+      {
+        ...s.iconProps,
+        onClick: k,
+        style: { cursor: "pointer" }
+      }
+    );
+  });
+  return d.displayName = `WithSpeechSynthesis(${S.displayName || S.name || "SpeechSynthesis"})`, R(d);
+};
+T.displayName = "withSpeechSynthesis";
 export {
-  B as default
+  T as default
 };

package/components/common/space/index.js

@@ -1,96 +1,76 @@
-import { jsx as c, jsxs as L } from "react/jsx-runtime";
-import { UI_COMMON_PREFIX as O } from "@unicom-cloud/utils/constant/ui";
-import P from "lodash/isArray";
-import _ from "lodash/isNumber";
-import { forwardRef as N, Fragment as b } from "react";
-import k from "../hooks/useMergeProps.js";
-import x from "@unicom-cloud/utils/class-name";
-import F from "./toArray.js";
-const D = {
+import { jsx as o, jsxs as _ } from "react/jsx-runtime";
+import { UI_COMMON_PREFIX as b } from "@unicom-cloud/utils/constant/ui";
+import O from "lodash/isArray";
+import R from "lodash/isNumber";
+import { forwardRef as f, Fragment as k } from "react";
+import E from "../hooks/useMergeProps.js";
+import F from "@unicom-cloud/utils/class-name";
+import { toArray as L } from "../utils/toArray.js";
+const u = {
+  mini: 4,
+  small: 8,
+  medium: 16,
+  large: 24
+}, U = {
   size: "small",
   direction: "horizontal"
-};
-function E(a, m) {
-  const S = k(a, D, {}), {
-    className: z,
-    style: C,
-    children: M,
-    gap: j,
-    size: w,
-    direction: s,
-    align: B,
-    alignItems: R,
-    justifyContent: d,
-    wrap: l,
-    split: p,
-    rtl: $,
-    ...V
-  } = S, r = `${O}-space`, h = R ?? (B || (s === "horizontal" ? "center" : "")), i = j ?? w, A = x(
-    r,
-    {
-      [`${r}-${s}`]: s,
-      [`${r}-justify-content-${d}`]: d,
-      [`${r}-align-items-${h}`]: h,
-      [`${r}-wrap`]: l,
-      [`${r}-rtl`]: $
-    },
-    z
-  );
-  function f(e) {
-    if (_(e))
-      return e;
-    switch (e) {
-      case "mini":
-        return 4;
-      case "small":
-        return 8;
-      case "medium":
-        return 16;
-      case "large":
-        return 24;
-      default:
-        return 8;
-    }
-  }
-  const y = F(M);
-  function I(e) {
-    const n = y.length === e + 1, o = $ ? "marginLeft" : "marginRight";
-    if (typeof i == "string" || typeof i == "number") {
-      const t = f(i);
-      return l ? n ? { marginBottom: t } : {
-        [`${o}`]: t,
-        marginBottom: t
-      } : n ? {} : {
-        [s === "vertical" ? "marginBottom" : o]: t
-      };
-    }
-    if (P(i)) {
-      const t = f(i[0]), u = f(i[1]);
-      return l ? n ? { marginBottom: u } : {
-        [`${o}`]: t,
-        marginBottom: u
-      } : s === "vertical" ? { marginBottom: u } : { [`${o}`]: t };
-    }
+}, d = f(
+  function(a, y) {
+    const $ = E(a, U, {}), {
+      className: N,
+      style: S,
+      children: h,
+      gap: G,
+      size: x,
+      direction: n = "horizontal",
+      align: P,
+      alignItems: V,
+      justifyContent: l,
+      wrap: j,
+      split: p,
+      rtl: w,
+      ...z
+    } = $, e = `${b}-space`, r = G ?? x, m = V ?? P ?? (n === "horizontal" ? "center" : ""), A = F(
+      e,
+      {
+        [`${e}-${n}`]: n,
+        [`${e}-justify-content-${l}`]: l,
+        [`${e}-align-items-${m}`]: m,
+        [`${e}-wrap`]: j,
+        [`${e}-rtl`]: w
+      },
+      N
+    ), i = (t) => R(t) ? t : u[t] ?? u.small, C = {
+      ...(() => {
+        if (typeof r == "string" || typeof r == "number")
+          return {
+            gap: `${i(r)}px`
+          };
+        if (O(r)) {
+          const t = i(r[1]), s = i(r[0]);
+          return {
+            rowGap: `${t}px`,
+            columnGap: `${s}px`
+          };
+        }
+        return {};
+      })(),
+      ...S
+    }, v = L(h);
+    return /* @__PURE__ */ o("div", { ref: y, className: A, style: C, ...z, children: v.map((t, s) => {
+      const I = t?.key ?? s, M = p != null && s > 0;
+      return /* @__PURE__ */ _(k, { children: [
+        M && /* @__PURE__ */ o("div", { className: `${e}-item-split`, children: p }),
+        /* @__PURE__ */ o("div", { className: `${e}-item`, children: t })
+      ] }, I);
+    }) });
   }
-  return /* @__PURE__ */ c("div", { ref: m, className: A, style: C, ...V, children: y.map((e, n) => {
-    const o = e?.key || n, t = p != null && n > 0;
-    return /* @__PURE__ */ L(b, { children: [
-      t && /* @__PURE__ */ c("div", { className: `${r}-item-split`, children: p }),
-      /* @__PURE__ */ c("div", { className: `${r}-item`, style: I(n), children: e })
-    ] }, o);
-  }) });
-}
-const g = N(
-  E
-);
-g.displayName = "Space";
-function H(a, m) {
-  return /* @__PURE__ */ c(g, { ref: m, ...a, direction: "vertical", children: a.children });
-}
-const v = N(H);
-v.displayName = "SpaceVertical";
-g.Vertical = v;
+), g = f((c, a) => /* @__PURE__ */ o(d, { ref: a, ...c, direction: "vertical" })), T = Object.assign(d, {
+  displayName: "Space",
+  Vertical: g
+});
+g.displayName = "Space.Vertical";
 export {
-  v as SpaceVertical,
-  g as default
+  g as SpaceVertical,
+  T as default
 };

package/components/common/suspense-fallback-test/index.js

@@ -0,0 +1,16 @@
+import { jsx as o } from "react/jsx-runtime";
+import e from "react";
+const a = (n, r) => {
+  const s = e.useMemo(
+    () => e.lazy(
+      () => new Promise(() => {
+      })
+    ),
+    []
+  );
+  return /* @__PURE__ */ o(s, {});
+}, t = e.forwardRef(a);
+t.displayName = "SuspenseFallbackTest";
+export {
+  t as default
+};

package/components/common/utils/toArray.js

@@ -0,0 +1,12 @@
+import o from "react";
+import { isFragment as a } from "react-is";
+function t(s, p = {}) {
+  const e = [];
+  return o.Children.forEach(s, (r) => {
+    r == null && !p.keepEmpty || (Array.isArray(r) ? e.push(...t(r, p)) : a(r) && "props" in r && r.props ? e.push(...t(r.props.children, p)) : e.push(r));
+  }), e;
+}
+export {
+  t as default,
+  t as toArray
+};