@transsionfe/semi-ui-vue 0.0.1 → 0.0.2

package/lib/es/components/table/VirtualizedBody.vue2.js

@@ -0,0 +1,652 @@
+import { defineComponent as qe, ref as D, computed as h, watch as J, onMounted as Je, nextTick as O, onUnmounted as Ue, createElementBlock as se, openBlock as G, normalizeStyle as ae, normalizeClass as U, createElementVNode as we, createCommentVNode as Ye, Fragment as Ze, renderList as Qe, createBlock as ie, resolveDynamicComponent as Se, renderSlot as et, unref as tt, h as R } from "vue";
+import { get as b } from "lodash";
+import Y from "classnames";
+import { cssClasses as nt, strings as ot } from "@douyinfe/semi-foundation/table/constants";
+import { arrayAdd as ce, getDefaultVirtualizedRowConfig as lt, isInnerColumnKey as rt, isScrollbarColumn as de, isExpandedColumn as st, isFixedLeft as at, isLastLeftFixed as it, isFixedRight as ct, isFirstFixedRight as dt } from "@douyinfe/semi-foundation/table/utils";
+import ut from "../empty/Empty.vue.js";
+/* empty css                  */
+import { useTableBodyFoundation as pt } from "./useTableBodyFoundation.js";
+import { useTableContext as ft } from "./table-context.js";
+import Ce from "./TableCell.vue2.js";
+const ht = 16, Tt = /* @__PURE__ */ qe({
+  name: "SemiVirtualizedBody",
+  __name: "VirtualizedBody",
+  props: {
+    dataSource: { default: () => [] },
+    columns: { default: () => [] },
+    virtualized: { type: [Boolean, Object] },
+    scroll: {},
+    prefixCls: { default: nt.PREFIX },
+    size: {},
+    onScroll: {},
+    handleBodyScroll: {},
+    handleWheel: {},
+    emptySlot: {},
+    rowKey: {},
+    components: {},
+    expandedRowKeys: {},
+    expandedRowRender: {},
+    onRow: {},
+    rowExpandable: {},
+    selectedRowKeysSet: {},
+    disabledRowKeysSet: {},
+    renderExpandIcon: {},
+    hideExpandedColumn: { type: Boolean },
+    expandRowByClick: { type: Boolean },
+    slots: {},
+    childrenRecordName: {},
+    groups: {},
+    renderGroupSection: {},
+    onGroupedRow: {},
+    clickGroupedRowToExpand: { type: Boolean },
+    onGroupExpand: {},
+    indentSize: {},
+    expandIcon: {}
+  },
+  emits: ["items-rendered"],
+  setup(Z, { expose: Re, emit: be }) {
+    const t = Z, Ie = be, s = D(), B = D(0), Te = D(0), { virtualizedData: ke } = pt({
+      dataSource: h(() => t.dataSource),
+      rowKey: h(() => t.rowKey),
+      childrenRecordName: h(() => t.childrenRecordName),
+      expandedRowRender: h(() => t.expandedRowRender),
+      expandedRowKeys: h(() => t.expandedRowKeys),
+      groups: h(() => t.groups),
+      columns: h(() => t.columns)
+    }), d = h(() => ke.value || []), L = D({
+      startIndex: -1,
+      endIndex: -1,
+      overscanStartIndex: -1,
+      overscanStopIndex: -1
+    }), $e = h(() => {
+      const { overscanStartIndex: e, overscanStopIndex: l } = L.value;
+      if (e < 0 || l < 0) {
+        if (d.value.length > 0) {
+          const r = Math.min(10, d.value.length);
+          return d.value.slice(0, r).map((c, i) => ({
+            ...c,
+            __originalIndex: i
+          }));
+        }
+        return [];
+      }
+      const o = Math.max(0, e), n = Math.min(d.value.length - 1, l);
+      return d.value.slice(o, n + 1).map((r, c) => ({
+        ...r,
+        __originalIndex: o + c
+        // 保存原始索引
+      }));
+    }), ze = h(() => Y(`${t.prefixCls}-body`)), f = ft(), _ = h(() => {
+      var o;
+      const e = (o = t.scroll) == null ? void 0 : o.x;
+      if (e)
+        return e;
+      if ((f == null ? void 0 : f.tableWidth) !== void 0 && f.tableWidth !== null) {
+        const n = f.tableWidth;
+        if (typeof n == "number" && n > 0)
+          return n;
+      }
+      if (f != null && f.getCellWidths) {
+        const n = f.getCellWidths(t.columns);
+        if (n && n.length > 0) {
+          const r = ce(n, 0, (t.columns || []).length);
+          if (r > 0)
+            return r;
+        }
+      }
+      const l = (t.columns || []).reduce((n, r) => n + (typeof r.width == "number" ? r.width : 0), 0);
+      return l > 0 ? l : "100%";
+    }), Ee = h(() => Y(`${t.prefixCls}`, `${t.prefixCls}-fixed`)), Me = h(() => {
+      const e = b(t.scroll, "y"), l = typeof e == "number";
+      return {
+        width: "100%",
+        height: l ? `${l ? e : 600}px` : "600px",
+        overflowX: "auto",
+        overflowY: "scroll",
+        position: "relative",
+        scrollbarGutter: "stable"
+      };
+    }), We = h(() => {
+      let e = 0;
+      const l = d.value.length;
+      if (l > 0) {
+        const o = new Array(l);
+        for (let n = 0; n < l; n++) {
+          const r = z(n);
+          o[n] = r, e += r;
+        }
+      }
+      return {
+        width: "100%",
+        height: `${e}px`,
+        position: "relative"
+      };
+    }), $ = /* @__PURE__ */ new Map(), z = (e) => {
+      if ($.has(e))
+        return $.get(e);
+      if (e < 0 || e >= d.value.length)
+        return 0;
+      const l = d.value[e];
+      if (!l)
+        return 0;
+      const o = lt(t.size, l == null ? void 0 : l.sectionRow), n = b(t.virtualized, "itemSize", o.height);
+      let r = n;
+      if (typeof n == "function")
+        try {
+          r = n(e, {
+            expandedRow: b(l, "expandedRow", !1),
+            sectionRow: b(l, "sectionRow", !1)
+          });
+        } catch (c) {
+          console.warn(`Error in itemSize function at index ${e}:`, c), r = o.height;
+        }
+      return (typeof r != "number" || isNaN(r)) && (r = o.height), r < o.minHeight && (process.env.NODE_ENV === "development" && console.warn(
+        `The computed real \`itemSize\` at index ${e} cannot be less than ${o.minHeight}, got ${r}`
+      ), r = o.minHeight), $.set(e, r), r;
+    };
+    J(
+      () => d.value,
+      () => {
+        $.clear();
+      },
+      { deep: !0 }
+    );
+    const Ne = (e, l) => b(e, "key", l), Ke = (e, l) => {
+      const o = (e == null ? void 0 : e.__originalIndex) ?? l;
+      if (o < 0 || o >= d.value.length)
+        return {
+          position: "absolute",
+          top: "0px",
+          left: 0,
+          right: 0,
+          height: "0px",
+          display: "none"
+          // 隐藏无效项
+        };
+      let n = 0;
+      for (let r = 0; r < o; r++)
+        n += z(r);
+      return {
+        position: "absolute",
+        top: `${n}px`,
+        left: 0,
+        height: `${z(o)}px`,
+        display: "flex",
+        // 确保单元格不会被压缩
+        flexShrink: 0
+      };
+    }, Be = h(() => {
+      var o;
+      let e = [];
+      return f != null && f.getCellWidths && (e = f.getCellWidths(t.columns) || []), (!e.length || e.length !== ((o = t.columns) == null ? void 0 : o.length)) && (e = (t.columns || []).map((n) => {
+        if (typeof n.width == "number" && n.width > 0)
+          return n.width;
+        if (n.fixed && (f != null && f.getCellWidths)) {
+          const r = f.getCellWidths(t.columns) || [];
+          if (r.length > 0)
+            return r[0] || 0;
+        }
+        return 0;
+      })), e.some((n) => n === 0) && (e = e.map((n, r) => {
+        var i;
+        if (n > 0)
+          return n;
+        const c = (i = t.columns) == null ? void 0 : i[r];
+        return c && typeof c.width == "number" && c.width > 0 ? c.width : 80;
+      })), e;
+    }), _e = h(() => b(t.components, "body.cell", ot.DEFAULT_COMPONENTS.body.cell)), He = h(() => {
+      var o;
+      let e = 0;
+      const l = t.columns || [];
+      for (; e < l.length; ) {
+        const n = (o = l[e]) == null ? void 0 : o.key;
+        if (n != null && rt(n)) {
+          e += 1;
+          continue;
+        }
+        break;
+      }
+      return e;
+    }), Fe = (e, l) => {
+      var v;
+      const o = Ge(e, l);
+      if (!o)
+        return null;
+      const n = Ke(e, l), r = typeof _.value == "number" ? `${_.value}px` : _.value, c = ((v = o.props) == null ? void 0 : v.style) || {}, i = {
+        // 先应用用户自定义样式
+        ...typeof c == "object" ? c : {},
+        // 再应用虚拟滚动必需的定位样式（不能被覆盖）
+        ...n,
+        width: r
+      };
+      return R(
+        o.type,
+        {
+          ...o.props,
+          style: i
+        },
+        o.children
+      );
+    }, Ge = (e, l) => {
+      var fe, he, ve, xe;
+      if (e != null && e.sectionRow) {
+        const a = e.groupKey, p = e.group, w = e.expanded ?? !1, F = p ? Array.from(p) : [];
+        let E = null;
+        if (t.renderGroupSection) {
+          const S = t.renderGroupSection(a, F);
+          S && typeof S == "object" && "children" in S ? E = S.children : E = S;
+        } else
+          E = String(a || "");
+        const oe = (t.columns || []).filter((S) => !de(S)).length, K = { groupKey: a, records: F }, T = t.onGroupedRow ? t.onGroupedRow(K, l) : {}, {
+          className: X,
+          style: q,
+          onClick: C,
+          ...k
+        } = T, le = (S) => {
+          t.clickGroupedRowToExpand && t.onGroupExpand && t.onGroupExpand(!w, a, S), C && C(S);
+        }, re = Y(
+          `${t.prefixCls}-row-section`,
+          {
+            [`${t.prefixCls}-row-section-on`]: w
+          },
+          X
+        );
+        return R(
+          "tr",
+          {
+            class: re,
+            style: q || {},
+            role: "row",
+            "aria-level": 1,
+            "aria-expanded": w,
+            onClick: le,
+            ...k
+          },
+          [
+            R(
+              "td",
+              {
+                colspan: oe,
+                class: `${t.prefixCls}-row-cell`
+              },
+              [
+                R(
+                  "div",
+                  {
+                    class: `${t.prefixCls}-section-inner`
+                  },
+                  [
+                    // 渲染展开图标（如果存在）
+                    t.renderExpandIcon ? t.renderExpandIcon(K, !1, a) : null,
+                    // 渲染分组内容
+                    E
+                  ]
+                )
+              ]
+            )
+          ]
+        );
+      }
+      if (e != null && e.expandedRow) {
+        if (!t.expandedRowRender)
+          return null;
+        const a = e.record || e, p = e.index ?? l, F = (t.columns || []).filter((E) => !de(E)).length || ((fe = t.columns) == null ? void 0 : fe.length) || 0;
+        return R(
+          "tr",
+          {
+            class: `${t.prefixCls}-row-expand ${t.prefixCls}-row`,
+            role: "row"
+          },
+          [
+            R(
+              "td",
+              {
+                colspan: F,
+                class: `${t.prefixCls}-row-cell`
+              },
+              [
+                R(
+                  "div",
+                  {
+                    class: `${t.prefixCls}-expand-inner`
+                  },
+                  [
+                    typeof t.expandedRowRender == "function" ? t.expandedRowRender(a, p, !0) : null
+                  ]
+                )
+              ]
+            )
+          ]
+        );
+      }
+      const o = e.record || e, n = e.index ?? l, r = e.level ?? 0, i = ((a, p) => typeof p == "function" ? p(a) : typeof p == "string" || typeof p == "number" ? b(a, p, "") : b(a, "key", ""))(o, t.rowKey), v = ((he = t.expandedRowKeys) == null ? void 0 : he.includes(i)) || !1, x = ((ve = t.selectedRowKeysSet) == null ? void 0 : ve.has(i)) || !1, m = ((xe = t.disabledRowKeysSet) == null ? void 0 : xe.has(i)) || !1, y = t.rowExpandable ? t.rowExpandable(o) : !1, u = t.onRow ? t.onRow(o, n) : {}, { className: W, style: H, onClick: N, onDoubleClick: Q, onMouseEnter: j, onMouseLeave: ue, ...Oe } = u, Pe = Y(
+        `${t.prefixCls}-row`,
+        {
+          [`${t.prefixCls}-row-selected`]: x,
+          [`${t.prefixCls}-row-disabled`]: m,
+          [`${t.prefixCls}-row-expanded`]: v
+        },
+        W
+      ), ee = [], te = Be.value, ne = He.value, pe = _e.value, Ae = (a) => a.key ? String(a.key) : a.dataIndex ? String(a.dataIndex) : null;
+      (t.columns || []).forEach((a, p) => {
+        if (de(a))
+          return;
+        if (st(a) && !y) {
+          ee.push(
+            R(Ce, {
+              key: p,
+              colIndex: p,
+              column: a,
+              record: o,
+              index: n,
+              prefixCls: t.prefixCls,
+              component: pe,
+              expandable: !1
+            })
+          );
+          return;
+        }
+        const w = {};
+        if (y && p === ne ? (w.renderExpandIcon = t.renderExpandIcon, w.expandable = !0, t.hideExpandedColumn && (w.expandIcon = t.expandIcon != null ? t.expandIcon : !0)) : w.expandable = !1, r != null && p === ne) {
+          w.indent = r;
+          const C = typeof t.expandIcon == "boolean", k = t.expandIcon !== !1 || !C && t.expandIcon !== null;
+          !y && t.hideExpandedColumn && k && (w.indent = r + 1);
+        }
+        const F = at(a) ? Math.round(ce(te, 0, p)) : !1, E = it(t.columns || [], a), me = ct(a) ? Math.round(ce(te, p + 1)) : !1, oe = dt(t.columns || [], a), K = {};
+        if (!e.expandedRow) {
+          const C = te[p], k = typeof a.width == "number" ? a.width : C;
+          C && C > 0 ? K.width = C : k && k > 0 ? K.width = k : K.width = 80;
+        }
+        const T = Ae(a), X = T && t.slots && !!t.slots[T];
+        let q = null;
+        if (X && T && t.slots[T]) {
+          const k = ((ge, ye) => ye.dataIndex ? b(ge, ye.dataIndex, "") : ge)(o, a), le = t.slots[T], re = k, S = o, Xe = n;
+          q = {
+            [T]: () => le({
+              text: re,
+              record: S,
+              index: Xe
+            })
+          };
+        }
+        ee.push(
+          R(
+            Ce,
+            {
+              key: `${p}-${n}`,
+              // 使用更稳定的 key
+              colIndex: p,
+              column: a,
+              record: o,
+              index: n,
+              prefixCls: t.prefixCls,
+              component: pe,
+              hideExpandedColumn: t.hideExpandedColumn,
+              indentSize: t.indentSize || (t.size === "small" ? 12 : (t.size === "middle", 16)),
+              selected: x,
+              expanded: v,
+              disabled: m,
+              fixedLeft: F,
+              lastFixedLeft: E,
+              fixedRight: me,
+              firstFixedRight: oe,
+              firstDataColumnIndex: ne,
+              expandIcon: t.expandIcon,
+              columnSlotName: T,
+              hasSlot: X,
+              ...w,
+              ...K
+            },
+            q || {}
+          )
+        );
+      });
+      const je = {
+        ...H
+      }, V = {};
+      return N && (V.onClick = N), Q && (V.onDblclick = Q), j && (V.onMouseenter = j), ue && (V.onMouseleave = ue), R(
+        "tr",
+        {
+          class: Pe,
+          style: je,
+          role: "row",
+          "data-row-key": i,
+          "aria-rowindex": n + 1,
+          "aria-expanded": y ? v : void 0,
+          "aria-level": r != null ? r + 1 : void 0,
+          ...V,
+          ...Oe
+        },
+        ee
+      );
+    }, P = (e) => {
+      if (e <= 0)
+        return 0;
+      let l = 0;
+      const o = Math.min(e, d.value.length);
+      for (let n = 0; n < o; n++)
+        l += z(n);
+      return l;
+    }, Le = (e) => {
+      const l = d.value.length;
+      if (l === 0)
+        return 0;
+      let o = 0, n = l - 1, r = 0;
+      if (e <= 0)
+        return 0;
+      const c = P(l);
+      if (e >= c)
+        return l - 1;
+      for (; o <= n; ) {
+        const i = Math.floor((o + n) / 2), v = P(i), x = z(i);
+        if (v <= e && v + x > e)
+          return i;
+        v <= e ? (o = i + 1, r = i) : n = i - 1;
+      }
+      return Math.min(r, l - 1);
+    }, g = (e) => {
+      if (!s.value || d.value.length === 0)
+        return;
+      const l = s.value.clientHeight;
+      if (l === 0) {
+        O(() => {
+          s.value && s.value.clientHeight > 0 && g(e);
+        });
+        return;
+      }
+      const o = b(t.virtualized, "overscanCount", 5), n = l;
+      let r = e;
+      const c = r + n, i = Le(r), v = P(i), x = z(i);
+      r = v + x;
+      let m = i;
+      for (; r < c && m < d.value.length - 1; ) {
+        m++;
+        const j = z(m);
+        r += j;
+      }
+      const y = Math.max(0, Math.min(i, d.value.length - 1)), u = Math.max(y, Math.min(m, d.value.length - 1)), W = Math.max(0, y - o), H = Math.min(d.value.length - 1, u + o), N = L.value;
+      (N.overscanStartIndex !== W || N.overscanStopIndex !== H || N.startIndex !== y || N.endIndex !== u) && (L.value = {
+        startIndex: y,
+        endIndex: u,
+        overscanStartIndex: W,
+        overscanStopIndex: H
+      }, Ie("items-rendered", {
+        overscanStartIndex: W,
+        overscanStopIndex: H,
+        visibleStartIndex: y,
+        visibleStopIndex: u
+      }));
+    };
+    Re({
+      /**
+       * 暴露 containerRef，供 Table.vue 在虚拟滚动时访问滚动容器
+       * 用于 handleWheelNonPassive 等需要直接操作滚动容器的场景
+       */
+      containerRef: s,
+      /**
+       * Scroll to the specified offset (scrollTop)
+       * @param scrollOffset - The offset to scroll to
+       */
+      scrollTo: (e) => {
+        s.value && (s.value.scrollTop = e, B.value = e, g(e));
+      },
+      /**
+       * Scroll to the specified item
+       * @param index - The index of the item to scroll to
+       * @param align - Alignment option: 'auto' | 'smart' | 'center' | 'end' | 'start'
+       */
+      scrollToItem: (e, l = "auto") => {
+        if (!s.value || e < 0 || e >= d.value.length)
+          return;
+        const o = P(e), n = s.value.clientHeight, r = z(e), c = s.value.scrollTop, i = c, v = c + n, x = o, m = o + r, y = x >= i && m <= v;
+        if (y && l === "auto")
+          return;
+        let u = c;
+        switch (l) {
+          case "start":
+            u = x;
+            break;
+          case "center":
+            u = x - (n - r) / 2;
+            break;
+          case "end":
+            u = m - n;
+            break;
+          case "smart": {
+            if (y)
+              return;
+            Math.min(Math.abs(x - i), Math.abs(m - v)) < n ? x < i ? u = x : u = m - n : u = x - (n - r) / 2;
+            break;
+          }
+          case "auto":
+          default: {
+            if (x < i)
+              u = x;
+            else if (m > v)
+              u = m - n;
+            else
+              return;
+            break;
+          }
+        }
+        const W = Math.max(0, s.value.scrollHeight - n);
+        u = Math.max(0, Math.min(W, u)), u !== c && (s.value.scrollTop = u, B.value = u, g(u));
+      },
+      // 保持向后兼容的别名
+      scrollToOffset: (e) => {
+        s.value && (s.value.scrollTop = e, B.value = e, g(e));
+      },
+      scrollToTop: () => {
+        s.value && (s.value.scrollTop = 0, B.value = 0, g(0));
+      }
+    });
+    let M = null;
+    const Ve = (e) => {
+      const l = e.target, o = l.scrollTop, n = l.scrollLeft;
+      if (t.onScroll) {
+        const r = B.value;
+        t.onScroll({
+          scrollOffset: o,
+          scrollDirection: o > r ? "forward" : "backward"
+        });
+      }
+      B.value = o, Te.value = n, t.handleBodyScroll && t.handleBodyScroll(e), M && clearTimeout(M), M = setTimeout(() => {
+        g(o), M = null;
+      }, ht);
+    }, De = (e) => {
+      t.handleWheel && t.handleWheel(e);
+    };
+    let I = null;
+    Je(() => {
+      O(() => {
+        if (s.value && s.value.clientHeight > 0) {
+          g(s.value.scrollTop || 0);
+          return;
+        }
+        requestAnimationFrame(() => {
+          s.value && s.value.clientHeight > 0 ? g(s.value.scrollTop || 0) : s.value && typeof ResizeObserver < "u" && (I = new ResizeObserver(() => {
+            s.value && s.value.clientHeight > 0 && (g(s.value.scrollTop || 0), I == null || I.disconnect(), I = null);
+          }), I.observe(s.value));
+        });
+      });
+    }), Ue(() => {
+      I && (I.disconnect(), I = null), M && (clearTimeout(M), M = null), $.clear();
+    }), J(
+      () => d.value,
+      (e) => {
+        e && e.length > 0 ? ($.clear(), O(() => {
+          !s.value || s.value.clientHeight === 0 ? requestAnimationFrame(() => {
+            s.value && s.value.clientHeight > 0 ? g(s.value.scrollTop || 0) : L.value = {
+              startIndex: 0,
+              endIndex: Math.min(9, e.length - 1),
+              overscanStartIndex: 0,
+              overscanStopIndex: Math.min(14, e.length - 1)
+            };
+          }) : g(s.value.scrollTop || 0);
+        })) : e && e.length === 0 && (L.value = {
+          startIndex: -1,
+          endIndex: -1,
+          overscanStartIndex: -1,
+          overscanStopIndex: -1
+        }, $.clear());
+      },
+      { immediate: !0 }
+    );
+    const A = D(0);
+    return J(
+      () => t.dataSource,
+      () => {
+        s.value && (A.value = s.value.scrollTop, O(() => {
+          s.value.scrollTop = A.value, g(A.value);
+        }));
+      }
+    ), J(
+      () => t.expandedRowKeys,
+      (e, l) => {
+        if (s.value && JSON.stringify(e) !== JSON.stringify(l)) {
+          const o = s.value.scrollTop;
+          A.value = o, $.clear(), O(() => {
+            s.value && (s.value.scrollTop = o, g(o));
+          });
+        }
+      },
+      { deep: !0 }
+    ), (e, l) => (G(), se("div", {
+      ref_key: "containerRef",
+      ref: s,
+      class: U(ze.value),
+      style: ae(Me.value),
+      onScroll: Ve,
+      onWheelPassive: De
+    }, [
+      we("div", {
+        style: ae({
+          width: typeof _.value == "number" ? `${_.value}px` : _.value,
+          overflow: "visible"
+        }),
+        class: U(Ee.value)
+      }, [
+        we("div", {
+          class: U(`${Z.prefixCls}-tbody`),
+          style: ae(We.value)
+        }, [
+          (G(!0), se(Ze, null, Qe($e.value, (o, n) => (G(), ie(Se(Fe(o, o.__originalIndex ?? n)), {
+            key: Ne(o, o.__originalIndex ?? n)
+          }))), 128))
+        ], 6)
+      ], 6),
+      !d.value || d.value.length === 0 ? (G(), se("div", {
+        key: 0,
+        class: U(`${Z.prefixCls}-empty`)
+      }, [
+        et(e.$slots, "empty", {}, () => [
+          t.emptySlot ? (G(), ie(Se(t.emptySlot), { key: 1 })) : (G(), ie(tt(ut), { key: 0 }))
+        ])
+      ], 2)) : Ye("", !0)
+    ], 38));
+  }
+});
+export {
+  Tt as default
+};
+//# sourceMappingURL=VirtualizedBody.vue2.js.map