@kdcloudjs/shoelace 1.0.22 → 1.0.24

package/dist/chunks/chunk.PKDD7LC7.js

@@ -1,743 +0,0 @@
-import {
-  tableCommonCss
-} from "./chunk.YETPLLCY.js";
-import {
-  spread_default
-} from "./chunk.26MJV2ME.js";
-import {
-  getCommonPinningProps
-} from "./chunk.REAQMJXE.js";
-import {
-  renderColGroup
-} from "./chunk.6YFKLFL2.js";
-import {
-  getTableRect,
-  iterateStyles
-} from "./chunk.YWEYEF5K.js";
-import {
-  CUSTOM_ROW
-} from "./chunk.UP5K765N.js";
-import {
-  ShoelaceElement
-} from "./chunk.AG6MRYHQ.js";
-import {
-  __decorateClass,
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk.W5KB6T3Z.js";
-
-// src/components/table/body-table.ts
-import { classMap } from "lit/directives/class-map.js";
-import { createRef, ref } from "lit/directives/ref.js";
-import { flexRender } from "@tanstack/lit-table";
-import { html } from "lit";
-import { property, state } from "lit/decorators.js";
-import { repeat } from "lit/directives/repeat.js";
-import { styleMap } from "lit/directives/style-map.js";
-import Sortable from "sortablejs";
-var BodyTable = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.expandRowByClick = false;
-    this.currentInsertIndex = null;
-    this.dropTarget = null;
-    this.tbodyRef = createRef();
-    /** 拖拽开始时记录的原始展开状态 */
-    this.savedExpandedKeys = /* @__PURE__ */ new Set();
-    /** 正在拖拽的行 key */
-    this.draggingRowKey = null;
-    /** 树形拖拽时需要显示拖拽样式的行 key 集合（自身 + 子孙） */
-    this.draggingKeys = /* @__PURE__ */ new Set();
-    this.cleanupDragImage = () => {
-      var _a;
-      if ((_a = this.dragImageEl) == null ? void 0 : _a.parentNode) this.dragImageEl.parentNode.removeChild(this.dragImageEl);
-      this.dragImageEl = void 0;
-    };
-    // ===================== Sortable 事件处理 =====================
-    this.handleMove = (evt) => {
-      var _a, _b;
-      const tbody = this.tbodyRef.value;
-      if (!this.bodyRef.value || !tbody) return true;
-      const rows = Array.from(tbody.querySelectorAll("tr[data-row-key]"));
-      if (!rows.length) return true;
-      if (this.isTreeMode()) {
-        if (!this.draggingRowKey && evt.item) {
-          this.draggingRowKey = (_a = evt.item.dataset.rowKey) != null ? _a : null;
-        }
-        const target = this.calcDragTarget(evt);
-        this.dropTarget = target;
-        this.requestUpdate();
-        return false;
-      }
-      const mouseY = evt.originalEvent.clientY;
-      const firstRect = rows[0].getBoundingClientRect();
-      const lastRect = rows[rows.length - 1].getBoundingClientRect();
-      let insertIndex = (_b = this.currentInsertIndex) != null ? _b : 0;
-      if (mouseY >= lastRect.bottom) {
-        insertIndex = rows.length;
-      } else if (mouseY <= firstRect.top) {
-        insertIndex = 0;
-      } else {
-        const related = evt.related;
-        if (related) {
-          const rect = related.getBoundingClientRect();
-          const relatedIndex = rows.indexOf(related);
-          if (relatedIndex >= 0) {
-            insertIndex = mouseY - rect.top > rect.height / 2 ? relatedIndex + 1 : relatedIndex;
-          }
-        }
-      }
-      this.currentInsertIndex = Math.max(0, Math.min(rows.length, insertIndex));
-      this.requestUpdate();
-      return false;
-    };
-    this.handleEnd = (evt) => {
-      var _a, _b, _c, _d;
-      if (this.isTreeMode()) {
-        const target = this.dropTarget;
-        this.restoreExpandForDrag();
-        if (!target || !this.draggingRowKey) {
-          this.resetTreeDragState();
-          return;
-        }
-        const dragKey = this.draggingRowKey;
-        const cfg = this.getTreeConfig();
-        const { removed, newData } = this.removeNodeFromTree(
-          this.commonProps.dataSource,
-          dragKey,
-          cfg.childrenKey
-        );
-        if (removed) {
-          const newDataSource = this.insertNodeToTree(newData, removed, target.rowKey, target.position, cfg.childrenKey);
-          (_b = (_a = this.commonProps).slRowReorder) == null ? void 0 : _b.call(_a, {
-            fromKey: dragKey,
-            toKey: target.rowKey,
-            rows: this.commonProps.dataSource,
-            newRows: newDataSource
-          });
-        }
-        this.resetTreeDragState();
-        return;
-      }
-      if (this.currentInsertIndex === null) return;
-      this.draggingBlock = { start: -1, end: -1 };
-      this.requestUpdate();
-      const rows = this.commonProps.tableInstance.getRowModel().rows;
-      const fromIndex = evt.oldDraggableIndex;
-      const toIndex = this.currentInsertIndex;
-      const fromKey = this.commonProps.adapter.getRecordKey(rows[fromIndex].original);
-      const newRows = [...rows.map((r) => r.original)];
-      const { start, end } = this.getSelectedBlock(rows, fromIndex);
-      if (start <= toIndex && toIndex <= end) {
-        this.currentInsertIndex = null;
-        return;
-      }
-      const block = newRows.splice(start, end - start + 1);
-      const targetIndex = start < toIndex ? toIndex - block.length : toIndex;
-      newRows.splice(targetIndex, 0, ...block);
-      const toRow = rows[Math.min(toIndex, rows.length - 1)];
-      const toKey = this.commonProps.adapter.getRecordKey(toRow.original);
-      (_d = (_c = this.commonProps).slRowReorder) == null ? void 0 : _d.call(_c, {
-        fromKey,
-        toKey,
-        rows: this.commonProps.dataSource,
-        newRows
-      });
-      this.currentInsertIndex = null;
-      this.cleanupDragImage();
-    };
-    this.handleChoose = (evt) => {
-      const rows = this.commonProps.tableInstance.getRowModel().rows;
-      const fromIndex = evt.oldDraggableIndex;
-      if (this.isTreeMode()) {
-        const dragRow = rows[fromIndex];
-        if (dragRow) {
-          this.draggingRowKey = this.commonProps.adapter.getRecordKey(dragRow.original);
-          this.draggingKeys = /* @__PURE__ */ new Set([this.draggingRowKey]);
-          this.collectSubRowKeys(dragRow, this.draggingKeys);
-          const keyToCollapse = this.draggingRowKey;
-          evt.item.addEventListener("dragstart", () => this.collapseForDrag(keyToCollapse), { once: true });
-        }
-        this.draggingBlock = { start: fromIndex, end: fromIndex };
-        this.requestUpdate();
-        return;
-      }
-      const { start, end } = this.getSelectedBlock(rows, fromIndex);
-      this.draggingBlock = { start, end };
-      this.requestUpdate();
-      if (start === end) return;
-      const dragImage = document.createElement("div");
-      dragImage.textContent = `\u62D6\u52A8 ${end - start + 1} \u884C\u6570\u636E`;
-      Object.assign(dragImage.style, {
-        position: "fixed",
-        padding: "10px 8px",
-        color: "#212121",
-        fontSize: "12px",
-        background: "#FFFFFF",
-        border: "1px solid rgba(217,217,217,1)",
-        boxShadow: "0px 6px 16px 3px rgba(0,0,0,0.08)",
-        borderRadius: "2px",
-        lineHeight: "21px"
-      });
-      document.body.appendChild(dragImage);
-      this.dragImageEl = dragImage;
-      evt.item.addEventListener(
-        "dragstart",
-        (e) => {
-          var _a;
-          return (_a = e.dataTransfer) == null ? void 0 : _a.setDragImage(dragImage, 10, 10);
-        },
-        { once: true }
-      );
-    };
-    // 未发生拖拽时清理，防止点击行但未拖拽时一直保持拖拽样式
-    this.handleUnchoose = () => {
-      var _a;
-      this.draggingBlock = { start: -1, end: -1 };
-      this.draggingKeys.clear();
-      (_a = this.cleanupDragImage) == null ? void 0 : _a.call(this);
-      this.requestUpdate();
-    };
-    this.renderTr = (row, styles = {}) => {
-      var _b;
-      const { rowSelectedMap, slRow, virtualized } = this.commonProps;
-      const rowProps = (slRow == null ? void 0 : slRow(row.original, row.index)) || {};
-      const _a = rowProps, { className, style: rowPropsStyle } = _a, rowRestProps = __objRest(_a, ["className", "style"]);
-      const rowClassName = typeof className === "string" ? className : "";
-      const rowKey = this.commonProps.adapter.getRecordKey(row.original);
-      const isDragging = this.draggingKeys.size > 0 ? this.draggingKeys.has(rowKey) : this.draggingBlock && row.index >= this.draggingBlock.start && row.index <= this.draggingBlock.end;
-      const rowClassMap = {
-        "table-row": true,
-        "table-row-selected": rowSelectedMap[row.id],
-        "table-row-dragging": !!isDragging,
-        [rowClassName]: true
-      };
-      const rowPropsStyleText = typeof rowPropsStyle === "string" ? rowPropsStyle : rowPropsStyle && typeof rowPropsStyle === "object" ? iterateStyles(rowPropsStyle) : void 0;
-      const rowStyles = [rowPropsStyleText, iterateStyles(styles)].filter(Boolean).join(";") || "";
-      return html`
-      <tr
-        class=${classMap(rowClassMap)}
-        role="table-row"
-        part="table-body-row"
-        data-row-key=${this.commonProps.adapter.getRecordKey(row.original)}
-        data-row-index=${row.index}
-        @click=${this.expandRowByClick ? () => row.getCanExpand() && row.toggleExpanded() : null}
-        style=${rowStyles}
-        ${spread_default(rowRestProps)}
-      >
-        ${repeat(
-        row.getVisibleCells(),
-        (cell) => cell.id,
-        (cell) => {
-          var _a2, _b2, _c, _e, _f;
-          const { column } = cell;
-          const columnDef = column.columnDef;
-          const align = (_a2 = columnDef.meta) == null ? void 0 : _a2.align;
-          const cellProps = ((_c = (_b2 = columnDef.meta) == null ? void 0 : _b2.slCell) == null ? void 0 : _c.call(_b2, cell.row.original, row.index)) || {};
-          const _d = cellProps, {
-            className: cellClassName,
-            style: cellStyle
-          } = _d, cellRestProps = __objRest(_d, [
-            "className",
-            "style"
-          ]);
-          const cellClassNameValue = typeof cellClassName === "string" ? cellClassName : "";
-          const { styles: pinningStyles, className: pinningClassName } = column.getIsPinned() ? getCommonPinningProps(column) : {};
-          const cellClassMap = {
-            "table-row-cell": true,
-            [pinningClassName]: pinningClassName !== void 0
-          };
-          if ((_e = columnDef.meta) == null ? void 0 : _e.className) {
-            cellClassMap[columnDef.meta.className] = true;
-          }
-          if (cellClassNameValue) {
-            cellClassMap[cellClassNameValue] = true;
-          }
-          const cellStyleText = typeof cellStyle === "string" ? cellStyle : cellStyle && typeof cellStyle === "object" ? iterateStyles(cellStyle) : void 0;
-          let cellStyleResult = [cellStyleText, pinningStyles].filter(Boolean).join(";");
-          if (virtualized) {
-            cellStyleResult += `;width: ${column.getSize()}px`;
-          }
-          return html` <td
-              role="gridcell"
-              part="table-body-cell"
-              class="${classMap(cellClassMap)}"
-              style=${cellStyleResult || ""}
-              ${spread_default(cellRestProps)}
-            >
-              <div
-                class="${classMap({
-            "table-cell-content": true,
-            "table-cell-ellipsis": !!((_f = columnDef.meta) == null ? void 0 : _f.ellipsis)
-          })}"
-                style=${styleMap({
-            "text-align": align || void 0
-          })}
-              >
-                ${flexRender(columnDef.cell, cell.getContext())}
-              </div>
-            </td>`;
-        }
-      )}
-      </tr>
-      ${!this.commonProps.tree && ((_b = this.commonProps.expandProps) == null ? void 0 : _b.rowExpandable) && row.getIsExpanded() ? html`
-            <tr class="table-row table-expand-row" part="table-body-row">
-              <td colspan="${row.getVisibleCells().length}" class="table-row-cell" part="table-body-cell">
-                <slot name="${CUSTOM_ROW}-${this.commonProps.adapter.getRecordKey(row.original)}"></slot>
-              </td>
-            </tr>
-          ` : ""}
-    `;
-    };
-  }
-  // ===================== 获取树形数据相关信息 =====================
-  getTreeConfig() {
-    var _a, _b;
-    const { tree } = this.commonProps;
-    if (!tree) return null;
-    if (typeof tree === "object") {
-      const t = tree;
-      return {
-        childrenKey: (_a = t.childrenRecordName) != null ? _a : "children",
-        indentSize: (_b = t.indentSize) != null ? _b : 16
-      };
-    }
-    return { childrenKey: "children", indentSize: 16 };
-  }
-  isTreeMode() {
-    return this.getTreeConfig() !== null;
-  }
-  /** 获取选中行所有子孙的 key */
-  collectSubRowKeys(row, result) {
-    const subRows = row.subRows;
-    if (!(subRows == null ? void 0 : subRows.length)) return;
-    for (const sub of subRows) {
-      const key = this.commonProps.adapter.getRecordKey(sub.original);
-      if (key) result.add(key);
-      this.collectSubRowKeys(sub, result);
-    }
-  }
-  /** 获取行的深度（depth）—— 通过 tanstack row 的 depth */
-  getRowDepth(rowKey) {
-    var _a;
-    const allRows = this.commonProps.tableInstance.getRowModel().rows;
-    const row = allRows.find((r) => this.commonProps.adapter.getRecordKey(r.original) === rowKey);
-    return (_a = row == null ? void 0 : row.depth) != null ? _a : 0;
-  }
-  getSelectedBlock(rows, fromIndex) {
-    const selected = this.commonProps.rowSelectedMap;
-    if (!selected[rows[fromIndex].id]) {
-      return { start: fromIndex, end: fromIndex };
-    }
-    let start = fromIndex;
-    let end = fromIndex;
-    while (start > 0 && selected[rows[start - 1].id]) {
-      start--;
-    }
-    while (end < rows.length - 1 && selected[rows[end + 1].id]) {
-      end++;
-    }
-    return { start, end };
-  }
-  // ===================== 指示线渲染 =====================
-  /**
-   * 获取指示线的 left 偏移
-   * - 有展开箭头的行：对齐箭头左边 = contentDiv.left + padding-inline-start
-   * - 无箭头的叶节点：对齐文字左边（取文字 span 左边）
-   */
-  getIndicatorLeft(targetRowEl, depth) {
-    var _a;
-    const cfg = this.getTreeConfig();
-    const indentSize = (_a = cfg == null ? void 0 : cfg.indentSize) != null ? _a : 16;
-    const tbody = this.tbodyRef.value;
-    if (!tbody) return depth * indentSize;
-    const tbodyRect = tbody.getBoundingClientRect();
-    const contentDiv = targetRowEl.querySelector(".tree-cell-content");
-    if (contentDiv) {
-      const hasExpandIcon = !!contentDiv.querySelector(".row-expand-icon");
-      if (hasExpandIcon) {
-        const paddingLeft = parseFloat(getComputedStyle(contentDiv).paddingInlineStart) || 0;
-        return contentDiv.getBoundingClientRect().left - tbodyRect.left + paddingLeft;
-      }
-      const textSpan = contentDiv.querySelector(".tree-cell-text");
-      const refEl = textSpan != null ? textSpan : contentDiv;
-      return refEl.getBoundingClientRect().left - tbodyRect.left;
-    }
-    return depth * indentSize;
-  }
-  renderIndicator() {
-    const tbody = this.tbodyRef.value;
-    if (!tbody) return "";
-    const rows = Array.from(tbody.querySelectorAll("tr[data-row-key]"));
-    if (!rows.length) return "";
-    const isTree = this.isTreeMode();
-    if (isTree && this.dropTarget) {
-      const { rowIndex, position, depth } = this.dropTarget;
-      const row2 = rows[rowIndex];
-      if (!row2) return "";
-      if (position === "inside") {
-        return html`
-          <div
-            style="
-              position:absolute;
-              left:0;
-              right:0;
-              top:${row2.offsetTop}px;
-              height:${row2.offsetHeight}px;
-              border:2px solid #1677ff;
-              border-radius:2px;
-              pointer-events:none;
-              z-index:10;
-              box-sizing:border-box;
-            "
-          ></div>
-        `;
-      }
-      const top2 = position === "before" ? row2.offsetTop : row2.offsetTop + row2.offsetHeight;
-      const left = this.getIndicatorLeft(row2, depth);
-      return html`
-        <div
-          style="
-            position:absolute;
-            left:${left}px;
-            right:0;
-            top:${top2}px;
-            height:2px;
-            background:#1677ff;
-            pointer-events:none;
-            z-index:10;
-          "
-        ></div>
-      `;
-    }
-    if (this.currentInsertIndex === null) return "";
-    const index = Math.min(this.currentInsertIndex, rows.length - 1);
-    const row = rows[index];
-    const top = this.currentInsertIndex >= rows.length ? row.offsetTop + row.offsetHeight : row.offsetTop;
-    return html`
-      <div
-        style="
-          position:absolute;
-          left:0;
-          right:0;
-          top:${top}px;
-          height:2px;
-          background:#1677ff;
-          pointer-events:none;
-          z-index:10;
-        "
-      ></div>
-    `;
-  }
-  // ===================== 树数据拖拽 =====================
-  /** 保存拖拽开始时的展开状态并收起子节点 */
-  collapseForDrag(dragRowKey) {
-    const tableInstance = this.commonProps.tableInstance;
-    const rows = tableInstance.getRowModel().rows;
-    const dragRow = rows.find((r) => this.commonProps.adapter.getRecordKey(r.original) === dragRowKey);
-    if (!dragRow || !dragRow.getIsExpanded()) return;
-    this.savedExpandedKeys = /* @__PURE__ */ new Set();
-    const collectExpanded = (row) => {
-      const key = this.commonProps.adapter.getRecordKey(row.original);
-      if (row.getIsExpanded()) {
-        this.savedExpandedKeys.add(key);
-      }
-      const subRows = row.subRows;
-      if (subRows == null ? void 0 : subRows.length) {
-        subRows.forEach(collectExpanded);
-      }
-    };
-    collectExpanded(dragRow);
-    dragRow.toggleExpanded(false);
-  }
-  /** 拖拽结束后恢复展开状态 */
-  restoreExpandForDrag() {
-    if (!this.savedExpandedKeys.size) return;
-    const tableInstance = this.commonProps.tableInstance;
-    const rows = tableInstance.getRowModel().rows;
-    for (const key of this.savedExpandedKeys) {
-      const row = rows.find((r) => this.commonProps.adapter.getRecordKey(r.original) === key);
-      if (row && !row.getIsExpanded()) {
-        row.toggleExpanded(true);
-      }
-    }
-    this.savedExpandedKeys.clear();
-  }
-  /** 计算树型模式下的 drag 目标 */
-  calcDragTarget(evt) {
-    const tbody = this.tbodyRef.value;
-    if (!tbody) return null;
-    const rows = Array.from(tbody.querySelectorAll("tr[data-row-key]"));
-    if (!rows.length) return null;
-    const mouseY = evt.originalEvent.clientY;
-    const firstRect = rows[0].getBoundingClientRect();
-    const lastRect = rows[rows.length - 1].getBoundingClientRect();
-    let targetRowEl = null;
-    let rowIndex = -1;
-    if (mouseY <= firstRect.top) {
-      targetRowEl = rows[0];
-      rowIndex = 0;
-    } else if (mouseY >= lastRect.bottom) {
-      targetRowEl = rows[rows.length - 1];
-      rowIndex = rows.length - 1;
-    } else {
-      for (let i = 0; i < rows.length; i++) {
-        const rect2 = rows[i].getBoundingClientRect();
-        if (mouseY >= rect2.top && mouseY < rect2.bottom) {
-          targetRowEl = rows[i];
-          rowIndex = i;
-          break;
-        }
-      }
-    }
-    if (!targetRowEl || rowIndex < 0) return null;
-    const rect = targetRowEl.getBoundingClientRect();
-    const offset = mouseY - rect.top;
-    const rowHeight = rect.height;
-    const targetRowKey = targetRowEl.dataset.rowKey;
-    let position;
-    if (offset < rowHeight * 0.35) {
-      position = "before";
-    } else if (offset > rowHeight * 0.65) {
-      position = "after";
-    } else {
-      position = "inside";
-    }
-    const depth = this.getRowDepth(targetRowKey);
-    return { rowIndex, position, rowKey: targetRowKey, depth };
-  }
-  // ===================== 树型数据重排 =====================
-  /** 从树型数据中移除指定 key 的节点 */
-  removeNodeFromTree(data, key, childrenKey) {
-    var _a;
-    let removed = null;
-    const newData = [];
-    for (const node of data) {
-      if (this.commonProps.adapter.getRecordKey(node) === key) {
-        removed = node;
-        continue;
-      }
-      const children = (_a = node[childrenKey]) != null ? _a : [];
-      if (children.length && !removed) {
-        const result = this.removeNodeFromTree(children, key, childrenKey);
-        if (result.removed) {
-          removed = result.removed;
-          newData.push(__spreadProps(__spreadValues({}, node), { [childrenKey]: result.newData }));
-          continue;
-        }
-      }
-      newData.push(node);
-    }
-    return { removed, newData };
-  }
-  /** 将节点插入树型数据中指定位置 */
-  insertNodeToTree(data, nodeToInsert, targetKey, position, childrenKey) {
-    return data.flatMap((node) => {
-      var _a, _b;
-      if (this.commonProps.adapter.getRecordKey(node) === targetKey) {
-        if (position === "before") return [nodeToInsert, node];
-        if (position === "after") return [node, nodeToInsert];
-        return [__spreadProps(__spreadValues({}, node), { [childrenKey]: [...(_a = node[childrenKey]) != null ? _a : [], nodeToInsert] })];
-      }
-      const children = (_b = node[childrenKey]) != null ? _b : [];
-      if (children.length) {
-        return [__spreadProps(__spreadValues({}, node), { [childrenKey]: this.insertNodeToTree(children, nodeToInsert, targetKey, position, childrenKey) })];
-      }
-      return [node];
-    });
-  }
-  /** 重置树形拖拽相关状态 */
-  resetTreeDragState() {
-    this.dropTarget = null;
-    this.draggingBlock = { start: -1, end: -1 };
-    this.draggingRowKey = null;
-    this.draggingKeys.clear();
-    this.requestUpdate();
-    this.cleanupDragImage();
-  }
-  initSortable() {
-    var _a, _b;
-    const { rowDrag, virtualized } = this.commonProps;
-    if (!rowDrag || virtualized) {
-      (_a = this.sortable) == null ? void 0 : _a.destroy();
-      this.sortable = void 0;
-      return;
-    }
-    const el = this.tbodyRef.value;
-    if (!el) return;
-    (_b = this.sortable) == null ? void 0 : _b.destroy();
-    this.sortable = Sortable.create(el, {
-      animation: 0,
-      draggable: "tr[data-row-key]",
-      handle: ".row-drag-handle",
-      onChoose: this.handleChoose,
-      onMove: this.handleMove,
-      onEnd: this.handleEnd,
-      onUnchoose: this.handleUnchoose
-    });
-  }
-  firstUpdated() {
-    this.initSortable();
-  }
-  render() {
-    var _a, _b, _c, _d, _e;
-    const virtualizer = (_a = this.rowVirtualizerController) == null ? void 0 : _a.getVirtualizer();
-    const { tableScroll, handleBodyScroll, bordered, tableInstance, virtualized, rowDrag } = this.commonProps;
-    const { x, y } = tableScroll || {};
-    const columnResizeable = tableInstance.getAllLeafColumns().some((c) => c.getCanResize());
-    const style = {
-      "max-width": x ? getTableRect(x) : "100%",
-      "max-height": y ? getTableRect(y) : "100%",
-      width: columnResizeable && `${tableInstance.getTotalSize()}px`
-    };
-    const { rows } = tableInstance.getRowModel();
-    return html` <div
-        style=${iterateStyles(style)}
-        class="table-body"
-        part="table-body"
-        ${ref(this.bodyRef)}
-        @scroll=${handleBodyScroll}
-      >
-        <table
-          class="${classMap({
-      table: true,
-      "table-bordered": bordered,
-      "table-fixed": !columnResizeable
-    })}"
-          style=${styleMap({
-      height: virtualized && y ? `${virtualizer == null ? void 0 : virtualizer.getTotalSize()}px` : "100%"
-    })}
-        >
-          ${renderColGroup(tableInstance)}
-          <tbody class="table-tbody" style="position: relative;" ${ref(this.tbodyRef)}>
-            ${virtualized ? repeat(
-      (_c = (_b = this.rowVirtualizerController) == null ? void 0 : _b.getVirtualizer().getVirtualItems()) != null ? _c : [],
-      (item) => item.key,
-      (item) => {
-        const row = rows[item.index];
-        return this.renderTr(row, {
-          transform: `translateY(${item.start}px)`,
-          position: "absolute",
-          width: "100%"
-        });
-      }
-    ) : repeat(
-      rows,
-      (row) => row.id,
-      (row) => this.renderTr(row)
-    )}
-            ${rowDrag ? html`<tr class="table-bottom-placeholder" style="height: 2px;padding: 0;border: none;">
-                  <td colspan="${(_e = (_d = rows[0]) == null ? void 0 : _d.getVisibleCells().length) != null ? _e : 1}"></td>
-                </tr>` : ""}
-            ${this.renderIndicator()}
-          </tbody>
-        </table>
-        ${this.emptyTemplate}
-      </div>
-      <style>
-        .table-body {
-          overflow: auto;
-          width: 100%;
-          box-sizing: border-box;
-          direction: var(--sl-c-table-direction);
-        }
-        .table-row {
-          display: table-row;
-        }
-        .table-row-dragging {
-          opacity: 0.35;
-        }
-        .row-drag-handle {
-          opacity: 0;
-          visibility: hidden;
-          pointer-events: none;
-          transition: opacity 120ms ease-in-out;
-        }
-        .table-row:hover .row-drag-handle,
-        .table-row.table-row-dragging .row-drag-handle {
-          opacity: 1;
-          visibility: visible;
-          pointer-events: auto;
-        }
-        .table-row > .table-row-cell {
-          height: var(--sl-table-cell-line-height);
-          font-size: var(--sl-table-font-size);
-          padding: 0 var(--sl-table-cell-padding);
-          box-sizing: border-box;
-          border-inline-start: none;
-          border-inline-end: none;
-          border-bottom: var(--sl-table-cell-border-width) solid var(--sl-table-cell-border);
-          overflow-wrap: break-word;
-          color: var(--sl-table-cell-color);
-          background-color: var(--sl-table-cell-background);
-          vertical-align: middle;
-        }
-        .table-row.table-expand-row > .table-row-cell {
-          background-color: var(--sl-table-expand-row-background);
-        }
-        .table-row:hover > .table-row-cell {
-          background: var(--sl-table-row-background-hover);
-        }
-        :where(.table.table-bordered) > tbody.table-tbody > tr.table-row > td.table-row-cell {
-          border-inline-end: var(--sl-table-cell-border-width) solid var(--sl-table-cell-border);
-        }
-        .table-row.table-row-selected > .table-row-cell {
-          background-color: var(--sl-table-row-background-active);
-        }
-        .table-row.table-row-selected:hover > .table-row-cell {
-          background-color: hsl(212.29999999999995, 100%, 95.5%);
-        }
-        .row-expand-icon:hover {
-          color: #5582f3;
-        }
-        .table-placeholder {
-          position: sticky;
-          left: 0;
-          z-index: 1;
-          padding: var(--sl-table-default-text-margin-vertical);
-          color: var(--semi-color-text-2);
-          font-size: 14px;
-          text-align: center;
-          background: transparent;
-          color: var(--sl-table-default-text-color);
-          border-bottom: var(--sl-table-cell-border-width) solid var(--sl-table-cell-border);
-          border-inline-start: none;
-        }
-        .table-cell-content {
-          line-height: var(--sl-line-height-dense);
-          word-break: break-word;
-        }
-      </style>`;
-  }
-};
-BodyTable.styles = [tableCommonCss];
-__decorateClass([
-  property({ type: Object })
-], BodyTable.prototype, "bodyRef", 2);
-__decorateClass([
-  property({ type: Function })
-], BodyTable.prototype, "emptyTemplate", 2);
-__decorateClass([
-  property({ type: Object })
-], BodyTable.prototype, "commonProps", 2);
-__decorateClass([
-  property({ type: Boolean })
-], BodyTable.prototype, "expandRowByClick", 2);
-__decorateClass([
-  property({ type: Object })
-], BodyTable.prototype, "rowVirtualizerController", 2);
-__decorateClass([
-  state()
-], BodyTable.prototype, "currentInsertIndex", 2);
-__decorateClass([
-  state()
-], BodyTable.prototype, "draggingBlock", 2);
-__decorateClass([
-  state()
-], BodyTable.prototype, "dropTarget", 2);
-BodyTable.define("sl-table-body-table");
-
-export {
-  BodyTable
-};