@unicom-cloud/ui 0.8.115 → 0.8.116

package/tabs/tab-header/index.js

@@ -0,0 +1,329 @@
+/* 2025-10-30 15:47:58 */
+import { jsx as l, jsxs as W } from "react/jsx-runtime";
+import _e from "@unicom-cloud/icons/IconUiPlus";
+import je from "lodash/throttle";
+import Ge, { useContext as pe, useRef as Ke, useState as ue, useMemo as Ve, useCallback as Xe, useEffect as $ } from "react";
+import "../../config-provider/ConfigProvider.js";
+import Fe from "../../icon-hover/index.js";
+import { TabsContext as Ue } from "../Tab.js";
+import A from "../hook/useDomSize.js";
+import Ye from "../hook/useHeaderScroll.js";
+import Q from "@unicom-cloud/utils/class-name";
+import "../../dist/ui-common/utils/is.js";
+import D from "../../dist/ui-common/utils/resizeObserver.js";
+import { setTransformStyle as qe } from "../../dist/ui-common/utils/style.js";
+import { updateScrollOffset as Je, getRectDiff as be, getKeyDownEvent as Qe } from "../utils.js";
+import Ze from "./DropdownIcon.js";
+import et from "./TabInk.js";
+import me from "./TabNavIcon.js";
+import tt from "./TabTitle.js";
+import rt from "../../config-provider/context.js";
+import { isPlainObject as nt, isNumber as Z } from "@unicom-cloud/utils/is";
+const ee = "vertical", E = "right", B = "left", ge = {
+  delete: !0,
+  add: !0
+}, ot = ({
+  direction: S,
+  align: z = B,
+  headerOffset: m
+}) => {
+  let d = `translateX(${-m}px)`;
+  return z === E && (d = `translateX(${m}px)`), S === ee && (d = `translateY(${-m}px)`), qe(d);
+}, st = ({
+  direction: S,
+  align: z = B,
+  headerDom: m,
+  headerWrapperDom: d
+}) => {
+  const i = be(m, d);
+  return S === ee ? -i.top : z === E ? i.right : -i.left;
+}, it = Ge.forwardRef((S, z) => {
+  const m = pe(Ue), { rtl: d } = pe(rt), i = { ...S, ...m }, [v, T, xe] = A(), [w, f, Se] = A(), [M, L, ve] = A(), [_, j, Te] = A(), [G, K, Oe] = A(), I = Ke({}), [O, te] = ue(0), [Ce, V] = ue(!0), {
+    paneChildren: X,
+    editable: Re,
+    prefixCls: t,
+    onAddTab: $e,
+    direction: s,
+    type: g = "line",
+    overflow: re = "scroll",
+    activeTab: y,
+    showAddButton: ze,
+    size: we = "default",
+    style: ye,
+    tabPosition: ke,
+    className: He,
+    extra: ne,
+    animation: Ae,
+    icons: k,
+    deleteButton: Ie,
+    addButton: Ne,
+    renderTabTitle: Pe,
+    scrollAfterEdit: oe,
+    scrollPosition: h = "auto",
+    inkBarSize: We
+  } = i, se = nt(oe) ? { ...ge, ...oe } : ge, [De, Ee] = d ? [E, B] : [B, E], C = g === "capsule" ? Ee : De, b = Ve(() => {
+    const e = L.height - j.height - K.height, n = L.width - j.width - K.width;
+    return i.direction === "vertical" ? e < f.height : n < f.width;
+  }, [
+    i.direction,
+    L,
+    j,
+    f,
+    K
+  ]), Be = () => {
+    if (M.current) {
+      const e = M.current;
+      ve({
+        height: e.offsetHeight,
+        width: e.offsetWidth
+      });
+    }
+  }, N = (e) => je((n) => {
+    Be();
+    const o = n[0] && n[0].target;
+    o && e({
+      height: o.offsetHeight,
+      width: o.offsetWidth,
+      domRect: o.getBoundingClientRect()
+    });
+  }, 200), ie = N(xe), ae = N(Se), ce = N(Te), le = N(Oe), F = Xe(
+    (e) => {
+      const n = s === ee ? f.height - T.height : f.width - T.width;
+      let o = e;
+      return o = Math.min(n, o), o = Math.max(o, 0), o;
+    },
+    [s, f, T]
+  ), U = (e) => {
+    const n = F(e);
+    n !== O && te(n);
+  };
+  $(() => () => {
+    ae?.cancel?.(), ie?.cancel?.(), ce?.cancel?.(), le?.cancel?.();
+  }, []), $(() => {
+    if (!Ce) {
+      V(!0);
+      return;
+    }
+    const e = () => {
+      const o = I.current[y];
+      if (!o || !b)
+        return 0;
+      const r = be(o, v.current), p = st({
+        direction: s,
+        align: C,
+        headerDom: w.current,
+        headerWrapperDom: v.current
+      });
+      if (s === "vertical") {
+        let u = p, a = h;
+        const c = p + r.top, x = p + r.bottom;
+        return a === "auto" && (a = r.top < 0 ? "start" : r.bottom > 0 ? "end" : h), a === "start" ? u = c : a === "end" ? u = x : a === "center" ? u = c - (r.top - r.bottom) / 2 : Z(a) && (u = Math.max(c - a, x)), u;
+      }
+      if (C === "right") {
+        const u = p - r.left, a = p - r.right;
+        let c = h, x = p;
+        return h === "auto" && (c = r.left < 0 ? "start" : r.right > 0 ? "end" : h), c === "start" ? x = u : c === "end" ? x = a : c === "center" ? x = u + (r.left - r.right) / 2 : Z(c) && (x = Math.min(u + c, a)), x;
+      }
+      let H = p, R = h;
+      const J = p + r.left, he = p + r.right;
+      return h === "auto" && (R = r.left < 0 ? "start" : r.right > 0 ? "end" : h), R === "start" ? H = J : R === "end" ? H = he : R === "center" ? H = J - (r.left - r.right) / 2 : Z(R) && (H = Math.max(J - R, he)), H;
+    };
+    Je(v.current, s);
+    let n = e();
+    n = F(n), te(n);
+  }, [
+    y,
+    s,
+    re,
+    b,
+    g,
+    F,
+    h
+  ]);
+  const Me = ot({
+    direction: s,
+    align: C,
+    headerOffset: O
+  }), Y = b && re === "dropdown" && s !== "vertical", q = b && !Y, P = Re && (g === "card" || g === "card-gutter" || g === "line"), Le = (e) => {
+    i.onDeleteTab?.(e.key), V(se.delete);
+  }, de = () => {
+    $e?.(), V(se.add);
+  };
+  $(() => {
+    const e = D([G.current], le);
+    return () => {
+      e();
+    };
+  }, [G.current]), $(() => {
+    const e = D([v.current], ie);
+    return () => {
+      e();
+    };
+  }, [v.current]), $(() => {
+    const e = D([w.current], ae);
+    return () => {
+      e();
+    };
+  }, [w.current]), $(() => {
+    const e = D([_.current], ce);
+    return () => {
+      e();
+    };
+  }, [_.current]);
+  const fe = (e) => e && ze && /* @__PURE__ */ l(
+    "div",
+    {
+      className: `${t}-add-icon`,
+      "aria-label": "add tab",
+      tabIndex: 0,
+      role: "button",
+      ref: G,
+      onClick: de,
+      ...Qe({ onPressEnter: de }),
+      children: Ne || /* @__PURE__ */ l(Fe, { prefix: `${t}-add`, children: /* @__PURE__ */ l("span", { className: `${t}-add`, children: k?.add || /* @__PURE__ */ l(_e, {}) }) })
+    }
+  );
+  return Ye({
+    headerWrapperRef: v,
+    headerOffset: O,
+    align: C,
+    direction: s,
+    isScrollable: b,
+    onScroll(e) {
+      U(e);
+    }
+  }), /* @__PURE__ */ l(
+    "div",
+    {
+      className: Q(
+        `${t}-header-nav`,
+        `${t}-header-nav-${s}`,
+        `${t}-header-nav-${ke}`,
+        `${t}-header-size-${we}`,
+        `${t}-header-nav-${g}`,
+        { [`${t}-header-nav-sticky`]: i.headerSticky },
+        // 潘启宝添加
+        He
+      ),
+      style: { ...ye, ...i.headerSticky },
+      ref: z,
+      children: /* @__PURE__ */ W(
+        "div",
+        {
+          className: Q(`${t}-header-scroll`, {
+            [`${t}-header-overflow-scroll`]: q,
+            [`${t}-header-overflow-dropdown`]: Y
+          }),
+          ref: M,
+          children: [
+            q && /* @__PURE__ */ l(
+              me,
+              {
+                iconPos: "prev",
+                rtl: d,
+                icon: k?.prev,
+                prefixCls: t,
+                currentOffset: O,
+                headerSize: f,
+                headerWrapperSize: T,
+                direction: s,
+                align: C,
+                onChange: U
+              }
+            ),
+            /* @__PURE__ */ W("div", { className: `${t}-header-wrapper`, ref: v, children: [
+              /* @__PURE__ */ W(
+                "div",
+                {
+                  className: Q(`${t}-header`, {
+                    [`${t}-header-no-padding`]: !S.headerPadding && s === "horizontal" && ["line", "text"].indexOf(g) > -1
+                  }),
+                  ref: w,
+                  style: Me,
+                  children: [
+                    X.map((e, n) => /* @__PURE__ */ l(
+                      tt,
+                      {
+                        ref: (o) => {
+                          I.current[e.key] = o;
+                        },
+                        tabKey: e.key,
+                        ...e.props,
+                        prefixCls: t,
+                        onDeleteTab: () => Le(e),
+                        renderTitle: S.children || Pe,
+                        onClickTab: () => {
+                          i.onClickTab?.(e.key);
+                        },
+                        isActive: y === e.key,
+                        editable: P && e.props.closable !== !1,
+                        deleteIcon: k?.delete,
+                        deleteButton: Ie,
+                        getIdPrefix: m.getIdPrefix,
+                        index: n
+                      },
+                      n
+                    )),
+                    g === "line" && /* @__PURE__ */ l(
+                      et,
+                      {
+                        disabled: !!X.find(
+                          (e) => e && e.props && e.props.disabled && e.key === y
+                        ),
+                        prefixCls: t,
+                        animation: Ae,
+                        direction: s,
+                        getTitleRef: (e) => I.current[e],
+                        activeTab: y,
+                        getHeaderRef: () => w,
+                        inkBarSize: We
+                      }
+                    )
+                  ]
+                }
+              ),
+              !b && fe(P)
+            ] }),
+            q && /* @__PURE__ */ l(
+              me,
+              {
+                prefixCls: t,
+                rtl: d,
+                iconPos: "next",
+                icon: k?.next,
+                currentOffset: O,
+                headerSize: f,
+                headerWrapperSize: T,
+                direction: s,
+                align: C,
+                onChange: U
+              }
+            ),
+            Y && /* @__PURE__ */ l(
+              Ze,
+              {
+                onClickTab: i.onClickTab,
+                paneChildren: X,
+                prefixCls: t,
+                currentOffset: O,
+                headerSize: f,
+                icon: k?.dropdown,
+                headerWrapperSize: T,
+                getTitleRef: (e) => I.current[e],
+                direction: s
+              }
+            ),
+            (P && b || ne) && /* @__PURE__ */ W("div", { className: `${t}-header-extra`, ref: _, children: [
+              b && fe(P),
+              ne
+            ] })
+          ]
+        }
+      )
+    }
+  );
+});
+it.displayName = "TabHeader";
+export {
+  it as default
+};

package/tabs/utils.js

@@ -0,0 +1,23 @@
+/* 2025-10-30 15:47:58 */
+import { Enter as n } from "@unicom-cloud/utils/constant/keyboardCode";
+const i = (e, t) => {
+  const c = e.getBoundingClientRect(), o = t.getBoundingClientRect(), l = t.offsetWidth / o.width, s = t.offsetHeight / o.height;
+  return {
+    left: (c.left - o.left) * l,
+    top: (c.top - o.top) * s,
+    right: (c.right - o.right) * l,
+    bottom: (c.bottom - o.bottom) * s
+  };
+}, r = (e, t) => {
+  const c = e.scrollLeft, o = e.scrollTop;
+  t === "horizontal" && c && e.scrollTo({ left: -1 * c }), t === "vertical" && o && e.scrollTo({ top: -1 * o });
+}, g = ({ onPressEnter: e }) => ({
+  onKeyDown: (t) => {
+    t.key === n.key && e(t);
+  }
+});
+export {
+  g as getKeyDownEvent,
+  i as getRectDiff,
+  r as updateScrollOffset
+};

package/tag/index.js

@@ -1,14 +1,18 @@
-import { jsx as r, jsxs as y, Fragment as q } from "react/jsx-runtime";
-import B from "@unicom-cloud/icons/IconUiClose";
-import D from "@unicom-cloud/icons/IconUiLoading";
-import g from "lodash/isPlainObject";
-import { forwardRef as J, useContext as Q, useState as b } from "react";
-import { a as W, I as X } from "../chunk/DstheLSK.js";
-import { u as Y } from "../chunk/Bvxzb1wd.js";
-import { u as Z } from "../chunk/FgWHhRFz.js";
-import ee from "../popconfirm/index.js";
-import oe from "@unicom-cloud/utils/class-name";
-import { o as ne } from "../chunk/BKKEev13.js";
+/* 2025-10-30 15:47:58 */
+import { jsx as r, jsxs as N, Fragment as B } from "react/jsx-runtime";
+import D from "@unicom-cloud/icons/IconUiClose";
+import J from "@unicom-cloud/icons/IconUiLoading";
+import { forwardRef as M, useContext as Q, useState as g } from "react";
+import "../config-provider/ConfigProvider.js";
+import W from "../dist/ui-common/hooks/use-keyboard-event/index.js";
+import X from "../dist/ui-common/hooks/use-merge-props/index.js";
+import Y from "../icon-hover/index.js";
+import Z from "../popconfirm/index.js";
+import ee from "@unicom-cloud/utils/class-name";
+import "../dist/ui-common/utils/is.js";
+import oe from "../dist/ui-common/utils/omit.js";
+import ne from "../config-provider/context.js";
+import { isPlainObject as b } from "@unicom-cloud/utils/is";
 const ce = [
   "red",
   "orangered",
@@ -22,35 +26,35 @@ const ce = [
   "purple",
   "magenta",
   "gray"
-], se = {
+], ie = {
   size: "default"
 };
 function re(O, P) {
-  const { getPrefixCls: I, componentConfig: T, rtl: _ } = Q(W), E = Y(), n = Z(
+  const { getPrefixCls: I, componentConfig: T, rtl: _ } = Q(ne), E = W(), n = X(
     O,
-    se,
+    ie,
     T?.Tag
   ), {
     className: L,
     style: S,
-    children: u,
-    color: s,
+    children: k,
+    color: i,
     closable: c,
     checkable: t,
     defaultChecked: j,
-    size: k,
+    size: u,
     onClose: z,
     onCheck: H,
     icon: $,
     closeIcon: l,
     bordered: R,
     __closeIconProps: w,
-    ...K
-  } = n, e = I?.("tag"), [U, v] = b(
+    ...U
+  } = n, e = I?.("tag"), [V, v] = g(
     "visible" in n ? n.visible : !0
-  ), [V, A] = b(
+  ), [A, F] = g(
     "checked" in n ? n.checked : j
-  ), [a, m] = b(), x = "checked" in n ? n.checked : V, F = "visible" in n ? n.visible : U;
+  ), [a, m] = g(), x = "checked" in n ? n.checked : A, G = "visible" in n ? n.visible : V;
   function d(o) {
     const C = z?.(o);
     C && C.then ? (m(!0), C.then(() => {
@@ -59,57 +63,57 @@ function re(O, P) {
       m(!1);
     })) : v(!1);
   }
-  function G() {
+  function K() {
     const o = !x;
-    "checked" in n || A(o), H?.(o);
+    "checked" in n || F(o), H?.(o);
   }
-  const i = s && ce.indexOf(s) !== -1 ? s : "", f = t ? x : !0, M = oe(
+  const s = i && ce.indexOf(i) !== -1 ? i : "", p = t ? x : !0, q = ee(
     e,
     {
       [`${e}-loading`]: a,
-      [`${e}-hide`]: !F,
-      [`${e}-${i}`]: i,
+      [`${e}-hide`]: !G,
+      [`${e}-${s}`]: s,
       [`${e}-checkable`]: t,
-      [`${e}-checked`]: f,
-      [`${e}-size-${k}`]: k,
+      [`${e}-checked`]: p,
+      [`${e}-size-${u}`]: u,
       [`${e}-bordered`]: R,
-      [`${e}-custom-color`]: f && s && !i,
+      [`${e}-custom-color`]: p && i && !s,
       [`${e}-rtl`]: _
     },
     L
-  ), p = {
+  ), f = {
     ...S
   };
-  s && !i && f && (p.backgroundColor ||= s, p.borderColor ||= s);
-  const N = ne(K, ["visible"]);
-  t && (N.onClick = G);
+  i && !s && p && (f.backgroundColor ||= i, f.borderColor ||= i);
+  const y = oe(U, ["visible"]);
+  t && (y.onClick = K);
   let h = /* @__PURE__ */ r(
-    X,
+    Y,
     {
       prefix: e,
       className: `${e}-close-btn`,
       onClick: (o) => {
-        g(c?.popconfirm) || d(o);
+        b(c?.popconfirm) || d(o);
       },
       role: "button",
       tabIndex: 0,
       ...E({
         onPressEnter(o) {
-          g(c?.popconfirm) || d(o);
+          b(c?.popconfirm) || d(o);
         }
       }),
       "aria-label": "Close",
       ...w,
-      children: l !== void 0 ? l : /* @__PURE__ */ r(B, {})
+      children: l !== void 0 ? l : /* @__PURE__ */ r(D, {})
     }
   );
-  return g(c?.popconfirm) && (h = /* @__PURE__ */ r(
-    ee,
+  return b(c?.popconfirm) && (h = /* @__PURE__ */ r(
+    Z,
     {
       ...c?.popconfirm,
-      title: c?.popconfirm?.title || /* @__PURE__ */ y(q, { children: [
+      title: c?.popconfirm?.title || /* @__PURE__ */ N(B, { children: [
         "确定要关闭 ",
-        u
+        k
       ] }),
       onCancel: (o) => {
         c?.popconfirm?.onCancel?.(o);
@@ -119,16 +123,16 @@ function re(O, P) {
       },
       children: h
     }
-  )), /* @__PURE__ */ y("div", { ref: P, style: p, className: M, ...N, children: [
+  )), /* @__PURE__ */ N("div", { ref: P, style: f, className: q, ...y, children: [
     $ && /* @__PURE__ */ r("span", { className: `${e}-icon`, children: $ }),
-    /* @__PURE__ */ r("span", { className: `${e}-content`, children: u }),
+    /* @__PURE__ */ r("span", { className: `${e}-content`, children: k }),
     !!c && !a && l !== null && h,
-    a && /* @__PURE__ */ r("span", { className: `${e}-loading-icon`, children: /* @__PURE__ */ r(D, {}) })
+    a && /* @__PURE__ */ r("span", { className: `${e}-loading-icon`, children: /* @__PURE__ */ r(J, {}) })
   ] });
 }
-const ie = J(re);
-ie.displayName = "Tag";
+const se = M(re);
+se.displayName = "Tag";
 export {
   ce as TAG_COLORS,
-  ie as default
+  se as default
 };