@kdcloudjs/shoelace 1.0.35 → 1.0.36

package/dist/chunks/chunk.RTQZH6JE.js

@@ -0,0 +1,930 @@
+import {
+  getDragRow
+} from "./chunk.DSRLY2FD.js";
+import {
+  getExpendRow
+} from "./chunk.OEVV5ZA4.js";
+import {
+  getDefaultFilters
+} from "./chunk.TF3IWFSX.js";
+import {
+  applyCascadeUpward,
+  convertRowSelectionState,
+  getRowSelectionOptions,
+  getSelectionColumn
+} from "./chunk.E2N54XZW.js";
+import {
+  getDefaultSorting
+} from "./chunk.WQTJ57OT.js";
+import {
+  table_style_default
+} from "./chunk.YETPLLCY.js";
+import {
+  getDefaultPinning
+} from "./chunk.HE2PW7CL.js";
+import {
+  flattenColumns,
+  getClientHeight,
+  getClientWidth,
+  getLeafColumns,
+  getOffsetWidth,
+  getScrollHeight,
+  hasGroupedColumns
+} from "./chunk.OKEPQD34.js";
+import {
+  CUSTOM_CELL,
+  CUSTOM_HEAD_EXTRA,
+  CUSTOM_ROW,
+  CUSTOM_TFOOT_CELL,
+  VIRTUALIZED_DEFAULT
+} from "./chunk.QIOQJBWC.js";
+import {
+  SlRadio
+} from "./chunk.S6ZY654A.js";
+import {
+  SlPagination
+} from "./chunk.OT7SZ2PL.js";
+import {
+  SlCheckbox
+} from "./chunk.UOZB6YZU.js";
+import {
+  SlIcon
+} from "./chunk.6CFYPOVU.js";
+import {
+  ShoelaceElement
+} from "./chunk.7KYGZCEZ.js";
+import {
+  __decorateClass,
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/table/table.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  TableController
+} from "@tanstack/lit-table";
+import { VirtualizerController } from "@tanstack/lit-virtual";
+import { createRef, ref } from "lit/directives/ref.js";
+import { debounce, get, some } from "lodash";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { state } from "lit/decorators/state.js";
+var SlTable = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.tableController = new TableController(this);
+    this.rowKey = "key";
+    this.columns = [];
+    this.dataSource = [];
+    this.loading = false;
+    this.bordered = false;
+    this.direction = "ltr";
+    this.showHeader = true;
+    this.tableScroll = {};
+    this.enableColumnResizing = false;
+    this.rowDrag = false;
+    this.rowSelectedMap = {};
+    this.expandedMap = {};
+    this.sorting = [];
+    this.columnFilters = [];
+    this.tableWidth = 0;
+    this.columnSizing = {};
+    this.pageIndex = 0;
+    this.columnPinning = {
+      left: ["drag", "expend", "select"],
+      right: []
+    };
+    this.tableWrapRef = createRef();
+    this.headerWrapRef = createRef();
+    this.bodyWrapRef = createRef();
+    this.footerWrapRef = createRef();
+    this.syncing = false;
+    /*
+    生命周期 end
+    **/
+    this.warnIfNoKey = () => {
+      if (some(this.dataSource, (record) => this.adapter.getRecordKey(record) === void 0)) {
+        console.error(
+          'You must specify a key for each element in the dataSource or use "rowKey" to specify an attribute name as the primary key!'
+        );
+      }
+    };
+    this.setColumnWidth = () => {
+      const head = this.headerWrapRef.value;
+      if (!head) return;
+      const ths = head == null ? void 0 : head.querySelectorAll("th");
+      if (ths) {
+        const nonResizableIds = /* @__PURE__ */ new Set(["select", "expend", "drag"]);
+        const widths = Array.from(ths).reduce(
+          (acc, th) => {
+            const colKey = th.dataset.colKey;
+            if (!colKey || nonResizableIds.has(colKey)) return acc;
+            const { width } = th.getBoundingClientRect();
+            return __spreadProps(__spreadValues({}, acc), {
+              [colKey]: width
+            });
+          },
+          {}
+        );
+        this.columnSizing = widths;
+      }
+    };
+    this.handleBodyScroll = (e) => {
+      var _a;
+      this.handleBodyScrollLeft(e);
+      this.setScrollPositionClassName();
+      if ((_a = this.virtualized) == null ? void 0 : _a.onScroll) {
+        this.virtualized.onScroll(e);
+      }
+    };
+    this.handleBodyScrollLeft = (e) => {
+      if (this.syncing) return;
+      const target = e.currentTarget;
+      const head = this.headerWrapRef.value;
+      const body = this.bodyWrapRef.value;
+      const foot = this.footerWrapRef.value;
+      if (!head || !body) return;
+      this.syncing = true;
+      const scrollLeft = target.scrollLeft;
+      if (target !== head) head.scrollLeft = scrollLeft;
+      if (target !== body) body.scrollLeft = scrollLeft;
+      if (foot && target !== foot) foot.scrollLeft = scrollLeft;
+      requestAnimationFrame(() => {
+        this.syncing = false;
+      });
+    };
+    this.handleWindowResize = () => {
+      this.syncTableWidth();
+      this.setScrollPositionClassName();
+      this.setScrollBarStyle();
+    };
+    this.syncTableWidth = () => {
+      var _a;
+      if ((_a = this.tableWrapRef) == null ? void 0 : _a.value) {
+        this.tableWidth = this.tableWrapRef.value.getBoundingClientRect().width;
+      }
+    };
+    this.setScrollBarStyle = () => {
+      setTimeout(() => {
+        const bodyWrapper = this.bodyWrapRef.value;
+        const headWrapper = this.headerWrapRef.value;
+        const footWrapper = this.footerWrapRef.value;
+        if (!bodyWrapper || !headWrapper) return;
+        const hasVerticalScroll = getScrollHeight(bodyWrapper) > getClientHeight(bodyWrapper);
+        const bodyHasScrollBar = getClientWidth(bodyWrapper) < getOffsetWidth(bodyWrapper);
+        if (hasVerticalScroll && bodyHasScrollBar) {
+          headWrapper.style.overflowY = "scroll";
+          if (footWrapper) footWrapper.style.overflowY = "scroll";
+        } else {
+          headWrapper.style.overflowY = "auto";
+          if (footWrapper) footWrapper.style.overflowY = "auto";
+        }
+      }, 0);
+    };
+    /** 监听 body 容器尺寸变化，滚动条出现/消失时同步表头 */
+    this.observeBodyResize = () => {
+      const bodyWrapper = this.bodyWrapRef.value;
+      if (!bodyWrapper || this.bodyResizeObserver) return;
+      this.bodyResizeObserver = new ResizeObserver(() => {
+        this.setScrollBarStyle();
+      });
+      this.bodyResizeObserver.observe(bodyWrapper);
+    };
+    this.setScrollPositionClassName = () => {
+      const tableBody = this.bodyWrapRef.value;
+      const tableWrapper = this.tableWrapRef.value;
+      if (!tableBody || !tableWrapper) return;
+      const { scrollLeft, scrollWidth, clientWidth } = tableBody;
+      const scrollRange = scrollWidth - clientWidth;
+      const classList = tableWrapper.classList;
+      const startClass = "table-scroll-position-left";
+      const middleClass = "table-scroll-position-middle";
+      const endClass = "table-scroll-position-right";
+      if (scrollWidth <= clientWidth) {
+        classList.remove(startClass, endClass, middleClass);
+        return;
+      }
+      const isRtl = this.direction === "rtl";
+      const scrollLeftAbs = Math.abs(scrollLeft);
+      let isStart = false;
+      let isEnd = false;
+      if (isRtl) {
+        isStart = scrollLeftAbs <= 1;
+        isEnd = scrollLeftAbs >= scrollRange - 1;
+      } else {
+        isStart = scrollLeft <= 0;
+        isEnd = scrollLeft >= scrollRange - 1;
+      }
+      if (isStart) {
+        classList.add(startClass);
+        classList.remove(middleClass, endClass);
+      } else if (isEnd) {
+        classList.remove(startClass, middleClass);
+        classList.add(endClass);
+      } else {
+        classList.remove(startClass, endClass);
+        classList.add(middleClass);
+      }
+    };
+    this.handleColumnSizingChange = (updaterOrValue) => {
+      var _a;
+      const next = typeof updaterOrValue === "function" ? updaterOrValue(this.columnSizing) : updaterOrValue;
+      const clamped = {};
+      for (const key in next) {
+        const v = next[key];
+        clamped[key] = Math.min(500, Math.max(60, v));
+      }
+      this.columnSizing = clamped;
+      (_a = this.slColumnResize) == null ? void 0 : _a.call(this, __spreadValues({}, clamped));
+    };
+    this.generateCustomCellSlot = (filteredRows) => {
+      const hasSlotColumns = getLeafColumns(this.columns).filter((col) => col.slot);
+      if (!hasSlotColumns.length) return "";
+      return html`
+      ${hasSlotColumns.map(
+        (col) => filteredRows.map((row) => {
+          const slotKey = `${CUSTOM_CELL}-${col.dataIndex}-${this.adapter.getRecordKey(row.original)}`;
+          return html`<slot slot="${slotKey}" name="${slotKey}">${row.original[col.dataIndex]}</slot>`;
+        })
+      )}
+    `;
+    };
+    this.generateCustomRowSlot = (rows) => {
+      if (!this.expandProps) return "";
+      return html`
+      ${rows.map((row) => {
+        var _a, _b, _c;
+        const rowSlotKey = `${CUSTOM_ROW}-${this.adapter.getRecordKey(row.original)}`;
+        if (!((_a = this.expandProps) == null ? void 0 : _a.expandableRowKeys)) return html`<slot slot="${rowSlotKey}" name="${rowSlotKey}"></slot>`;
+        if ((_c = (_b = this.expandProps) == null ? void 0 : _b.expandableRowKeys) == null ? void 0 : _c.includes(row.original[this.rowKey])) {
+          return html`<slot slot="${rowSlotKey}" name="${rowSlotKey}"></slot>`;
+        } else {
+          return null;
+        }
+      })}
+    `;
+    };
+    this.generateCustomTfootSlot = () => html`${this.leafColumns.map(
+      (col) => {
+        var _a;
+        return (_a = this.summary) == null ? void 0 : _a.map((item, index) => {
+          const slotKey = `${CUSTOM_TFOOT_CELL}-${item.rowIndex || index}-${col.dataIndex}`;
+          return html`<slot name="${slotKey}" slot="${slotKey}"></slot>`;
+        });
+      }
+    )}`;
+    this.generateCustomHeadSlot = () => html`${this.flatColumns.map((col) => {
+      const slotKey = `${CUSTOM_HEAD_EXTRA}-${col.dataIndex}`;
+      return html`<slot name="${slotKey}" slot="${slotKey}"></slot>`;
+    })}`;
+    this.buildColMeta = (col) => {
+      const {
+        align,
+        className,
+        ellipsis,
+        filters,
+        filterMultiple,
+        defaultFilters,
+        filterDropdownProps,
+        onFilterDropdownVisibleChange,
+        colSpan,
+        headExtralSlot,
+        slCell,
+        slHeaderCell
+      } = col;
+      return {
+        align,
+        className,
+        ellipsis,
+        filters,
+        filterMultiple,
+        defaultFilters,
+        filterDropdownProps,
+        onFilterDropdownVisibleChange,
+        slCell,
+        slHeaderCell,
+        colSpan,
+        headExtralSlot
+      };
+    };
+    this.handleRowSelectionChange = (updaterOrValue, tableInstance) => {
+      var _a;
+      const prev = this.rowSelectedMap;
+      let next;
+      if (typeof updaterOrValue === "function") {
+        next = updaterOrValue(prev);
+      } else {
+        next = updaterOrValue;
+      }
+      const { treeEnabled } = this.getTreeInfo();
+      if (treeEnabled && ((_a = this.rowSelection) == null ? void 0 : _a.cascade) === true) {
+        const allRows = tableInstance.getCoreRowModel().flatRows;
+        next = applyCascadeUpward(prev, next, allRows);
+      }
+      this.rowSelectedMap = next;
+    };
+    this.handleSortingChange = (updaterOrValue) => {
+      if (typeof updaterOrValue === "function") {
+        this.sorting = updaterOrValue(this.sorting);
+      } else {
+        this.sorting = updaterOrValue;
+      }
+      window == null ? void 0 : window.requestAnimationFrame(() => {
+        this.handleChange({
+          changeType: "sorter"
+        });
+      });
+    };
+    this.handleColumnFiltersChange = (updaterOrValue) => {
+      if (typeof updaterOrValue === "function") {
+        this.columnFilters = updaterOrValue(this.columnFilters);
+      } else {
+        this.columnFilters = updaterOrValue;
+      }
+      window == null ? void 0 : window.requestAnimationFrame(() => {
+        this.handleChange({
+          changeType: "filters"
+        });
+      });
+    };
+    this.handleFilterDropdownChange = (e) => {
+      var _a;
+      const detail = e.detail;
+      const { key, visible } = detail || {};
+      const col = getLeafColumns(this.columns).find((c) => c.dataIndex === key);
+      (_a = col == null ? void 0 : col.onFilterDropdownVisibleChange) == null ? void 0 : _a.call(col, visible);
+    };
+    this.getRowCanExpand = (row) => {
+      var _a, _b, _c;
+      if (!((_a = this.expandProps) == null ? void 0 : _a.expandableRowKeys)) return true;
+      return Boolean((_c = (_b = this.expandProps) == null ? void 0 : _b.expandableRowKeys) == null ? void 0 : _c.includes(row.original[this.rowKey]));
+    };
+    this.expendedChange = (updater) => {
+      const newExpanded = typeof updater === "function" ? updater(this.expandedMap) : updater;
+      this.expandedMap = newExpanded;
+      this.requestUpdate();
+    };
+    this.getSubRows = (row) => {
+      const { treeConfig } = this.getTreeInfo();
+      if (treeConfig === false) return [];
+      const v = row[treeConfig.childrenRecordName];
+      return Array.isArray(v) ? v : [];
+    };
+    this.handlePaginationChange = (event) => {
+      var _a, _b, _c, _d;
+      const { pageNumber, pageSize } = event.detail;
+      (_b = (_a = this.pagination) == null ? void 0 : _a["sl-page-change"]) == null ? void 0 : _b.call(_a, event);
+      this.pagination = __spreadProps(__spreadValues({}, this.pagination), {
+        defaultCurrentPage: pageNumber,
+        pageSize: pageSize || 20
+      });
+      if (!((_c = this.pagination) == null ? void 0 : _c.currentPage)) this.pageIndex = pageNumber - 1;
+      this.handleChange({
+        pagination: {
+          pageNumber: pageNumber || 1,
+          pageSize: pageSize || 20,
+          total: ((_d = this.pagination) == null ? void 0 : _d.total) || this.dataSource.length
+        },
+        changeType: "pagination"
+      });
+    };
+  }
+  normalizeTree() {
+    var _a;
+    const defaultTree = { childrenRecordName: "children" };
+    const hasChildren = Array.isArray(this.dataSource) && this.dataSource.some((row) => Array.isArray(row.children));
+    if (!this.tree) return hasChildren ? defaultTree : false;
+    if (typeof this.tree === "object") {
+      return {
+        childrenRecordName: (_a = this.tree.childrenRecordName) != null ? _a : defaultTree.childrenRecordName,
+        expandColumnKey: this.tree.expandColumnKey
+      };
+    }
+    return this.tree ? defaultTree : false;
+  }
+  getTreeInfo() {
+    const treeConfig = this.normalizeTree();
+    return { treeConfig, treeEnabled: treeConfig !== false };
+  }
+  get adapter() {
+    return {
+      getRecordKey: (record) => {
+        if (!record) {
+          return void 0;
+        }
+        return get(record, this.rowKey);
+      },
+      getSortIsControlled: () => {
+        return some(getLeafColumns(this.columns), (col) => !!col.sortOrder);
+      },
+      getTableWidth: () => this.tableWidth,
+      getFilterIsControlled: () => some(getLeafColumns(this.columns), (col) => !!col.filteredValue),
+      tableScrollToTop: () => {
+        var _a, _b;
+        return ((_a = this.tableScroll) == null ? void 0 : _a.y) ? (_b = this.bodyWrapRef.value) == null ? void 0 : _b.scrollTo({ top: 0 }) : void 0;
+      }
+    };
+  }
+  /*
+  生命周期 start
+  **/
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("resize", debounce(this.handleWindowResize, 150));
+    this.syncTableWidth();
+    this.setScrollBarStyle();
+    this.setScrollPositionClassName();
+  }
+  disconnectedCallback() {
+    var _a;
+    window.removeEventListener("resize", debounce(this.handleWindowResize, 150));
+    (_a = this.bodyResizeObserver) == null ? void 0 : _a.disconnect();
+    this.bodyResizeObserver = void 0;
+    super.disconnectedCallback();
+  }
+  willUpdate(changedProperties) {
+    var _a;
+    this.warnIfNoKey();
+    if (changedProperties.has("rowSelection")) {
+      this.rowSelectedMap = convertRowSelectionState(((_a = this.rowSelection) == null ? void 0 : _a.defaultSelectedRowKeys) || []);
+    }
+    if (changedProperties.has("columns")) {
+      const leaves = getLeafColumns(this.columns);
+      this.leafColumns = leaves;
+      const flats = flattenColumns(this.columns);
+      this.flatColumns = flats;
+      const defaultSorting = getDefaultSorting(leaves);
+      if (defaultSorting.length > 0) {
+        this.sorting = defaultSorting;
+      }
+      const defaultFilters = getDefaultFilters(leaves);
+      if (defaultFilters.length > 0) {
+        this.columnFilters = defaultFilters;
+      }
+      const defaultPinning = getDefaultPinning(flats);
+      if (defaultPinning.left.length > 0 || defaultPinning.right.length > 0) {
+        this.columnPinning = {
+          left: [.../* @__PURE__ */ new Set([...this.columnPinning.left, ...defaultPinning.left])],
+          right: [.../* @__PURE__ */ new Set([...this.columnPinning.right, ...defaultPinning.right])]
+        };
+      }
+    }
+    if (changedProperties.has("dataSource") || changedProperties.has("expandProps")) {
+      this.dataSource.forEach((row) => {
+        var _a2, _b;
+        if (!((_a2 = this.expandProps) == null ? void 0 : _a2.rowExpandable)) return;
+        const rowKey = row[this.rowKey];
+        const expandAllMatch = this.expandProps.defaultExpandAllRows && (!this.expandProps.expandableRowKeys || this.expandProps.expandableRowKeys.includes(rowKey));
+        const expandByKeys = (_b = this.expandProps.defaultExpandedRowKeys) == null ? void 0 : _b.includes(rowKey);
+        if (expandAllMatch || expandByKeys) {
+          if (this.expandedMap === true) {
+          } else {
+            this.expandedMap[rowKey] = true;
+          }
+        }
+      });
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    window.requestAnimationFrame(() => {
+      this.setScrollPositionClassName();
+    });
+  }
+  async firstUpdated() {
+    var _a, _b, _d, _e;
+    const bodyTable = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("sl-table-body-table");
+    if (bodyTable) {
+      await bodyTable.updateComplete;
+    }
+    const headTable = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sl-table-head-table");
+    if (headTable) {
+      await headTable.updateComplete;
+    }
+    if (this.virtualized) {
+      const scrollElement = this.bodyWrapRef.value;
+      const _c = this.virtualized, { itemHeight, overscan } = _c, rest = __objRest(_c, ["itemHeight", "overscan"]);
+      this.rowVirtualizerController = new VirtualizerController(this, __spreadValues({
+        count: this.dataSource.length,
+        getScrollElement: () => scrollElement,
+        estimateSize: () => itemHeight || VIRTUALIZED_DEFAULT.itemHeight,
+        overscan: overscan || VIRTUALIZED_DEFAULT.overscan
+      }, rest));
+      this.requestUpdate();
+    }
+    this.setColumnWidth();
+    this.observeBodyResize();
+    if ((_d = this.pagination) == null ? void 0 : _d.currentPage) {
+      this.pageIndex = this.pagination.currentPage - 1;
+    } else if ((_e = this.pagination) == null ? void 0 : _e.defaultCurrentPage) {
+      this.pageIndex = this.pagination.defaultCurrentPage - 1;
+    }
+  }
+  renderTable(tableInstance) {
+    var _a, _b;
+    const currentPageRows = tableInstance.getPaginationRowModel().rows;
+    const filteredRows = tableInstance.getFilteredRowModel().rows;
+    const { treeConfig, treeEnabled } = this.getTreeInfo();
+    const commonProps = {
+      direction: this.direction,
+      bordered: !!this.bordered,
+      rowSelectedMap: this.rowSelectedMap,
+      tableScroll: this.tableScroll,
+      enableColumnResizing: this.enableColumnResizing,
+      handleBodyScroll: this.handleBodyScroll,
+      sorting: this.sorting,
+      dataSource: this.dataSource,
+      columns: this.columns,
+      adapter: this.adapter,
+      tableInstance,
+      slHeaderRow: this.slHeaderRow,
+      slRow: this.slRow,
+      virtualized: this.virtualized,
+      rowDrag: this.rowDrag,
+      expandProps: this.expandProps,
+      tree: treeConfig,
+      slRowReorder: (detail) => {
+        var _a2;
+        if (this.slRowReorder) this.slRowReorder(detail);
+        if ((_a2 = detail.newRows) == null ? void 0 : _a2.length) {
+          this.dataSource = detail.newRows;
+          this.requestUpdate();
+        }
+      }
+    };
+    const emptyTemplate = this.dataSource.length === 0 || currentPageRows.length === 0 || filteredRows.length === 0 ? this.renderEmpty() : "";
+    const headTable = this.showHeader ? html`<sl-table-head-table
+          exportparts="table-head, table-head-row, table-head-cell"
+          .commonProps=${commonProps}
+          .headerRef=${this.headerWrapRef}
+          @sl-filter-dropdown-change=${this.handleFilterDropdownChange}
+        >
+          ${this.generateCustomHeadSlot()}
+        </sl-table-head-table>` : "";
+    const bodyTable = html`<sl-table-body-table
+      exportparts="table-body, table-body-row, table-body-cell"
+      .bodyRef=${this.bodyWrapRef}
+      .emptyTemplate=${emptyTemplate}
+      .commonProps=${commonProps}
+      .rowVirtualizerController=${this.rowVirtualizerController}
+      .expandRowByClick=${((_a = this.expandProps) == null ? void 0 : _a.rowExpandable) && ((_b = this.expandProps) == null ? void 0 : _b.expandRowByClick)}
+    >
+      <slot name="table-empty" slot="table-empty">暂无数据</slot>
+      ${!treeEnabled ? this.generateCustomRowSlot(filteredRows) : ""} ${this.generateCustomCellSlot(filteredRows)}
+    </sl-table-body-table>`;
+    const footerTable = this.summary ? html`<sl-table-footer-table
+          exportparts="table-foot, table-foot-row, table-foot-cell"
+          .commonProps=${commonProps}
+          .footerRef=${this.footerWrapRef}
+          .summary=${this.summary}
+        >
+          ${this.generateCustomTfootSlot()}
+        </sl-table-footer-table>` : "";
+    return html`${headTable} ${bodyTable} ${footerTable}`;
+  }
+  renderEmpty() {
+    return html` <div class="table-placeholder"><slot name="table-empty"></slot></div>`;
+  }
+  renderMainTable(tableInstance) {
+    const table = html`${this.renderTable(tableInstance)}`;
+    return table;
+  }
+  renderPagination(place) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    if (!this.pagination) return "";
+    const pos = ((_a = this.pagination) == null ? void 0 : _a.position) || "bottomEnd";
+    const isTop = pos.startsWith("top");
+    if (place === "top" && !isTop || place === "bottom" && isTop) return "";
+    const justify = pos.endsWith("Start") ? "flex-start" : pos.endsWith("Center") ? "center" : "flex-end";
+    const margin = "8px 0";
+    const style = `display:flex; justify-content:${justify}; margin:${margin};`;
+    return html`
+      <div class="pagination-container" style="${style}">
+        <sl-pagination
+          class="pagination"
+          @sl-page-change=${this.handlePaginationChange}
+          .total=${((_b = this.pagination) == null ? void 0 : _b.total) || this.dataSource.length}
+          .currentPage=${(_c = this.pagination) == null ? void 0 : _c.currentPage}
+          .defaultCurrentPage=${((_d = this.pagination) == null ? void 0 : _d.defaultCurrentPage) || 1}
+          .pageSize=${((_e = this.pagination) == null ? void 0 : _e.pageSize) || 20}
+          .disabled=${((_f = this.pagination) == null ? void 0 : _f.disabled) || false}
+          .className=${(_g = this.pagination) == null ? void 0 : _g.className}
+          .pageSizeOpts=${((_h = this.pagination) == null ? void 0 : _h.pageSizeOpts) || [10, 20, 50, 100]}
+          .simpleMode=${((_i = this.pagination) == null ? void 0 : _i.simpleMode) || false}
+          .direction=${this.direction || "ltr"}
+        >
+        </sl-pagination>
+      </div>
+    `;
+  }
+  // 生成lit-table所需要的columns数组
+  buildLeafColumn(opts) {
+    var _a;
+    const { col, commonArgs } = opts;
+    const { columnHelper, firstDataIndex, treeEnabled } = commonArgs;
+    const { dataIndex, width, sorter, filters, onFilter } = col;
+    const canSort = sorter && typeof sorter === "function";
+    const canFilter = filters && filters.length > 0;
+    const newCol = columnHelper.accessor((row) => row[dataIndex], {
+      id: dataIndex,
+      meta: this.buildColMeta(col),
+      cell: (info) => {
+        if (treeEnabled && firstDataIndex && dataIndex === firstDataIndex) {
+          const depth = typeof info.row.depth === "number" ? info.row.depth : 0;
+          const canExpand = info.row.getCanExpand();
+          const expanded = info.row.getIsExpanded();
+          const toggleNode = canExpand ? html`
+                <sl-icon
+                  class="row-expand-icon"
+                  name="${expanded ? "dash-square" : "plus-square"}"
+                  style="cursor:pointer;"
+                  @click=${(e) => {
+            e.stopPropagation();
+            info.row.toggleExpanded();
+          }}
+                ></sl-icon>
+              ` : html`<span style="display:inline-block; width: 1em;"></span>`;
+          const valueNode = col.slot ? (() => {
+            const slotKey = `${CUSTOM_CELL}-${dataIndex}-${this.adapter.getRecordKey(info.row.original)}`;
+            return html`<slot name="${slotKey}" slot="${slotKey}">${info.getValue()}</slot>`;
+          })() : info.getValue();
+          return html`
+            <div
+              class="tree-cell-content"
+              style="display:flex; align-items:center; gap: 6px; padding-inline-start: calc(${depth} * var(--sl-datatable-tree-indent, 1.75rem));"
+            >
+              ${toggleNode} <span class="tree-cell-text">${valueNode}</span>
+            </div>
+          `;
+        }
+        if (col.slot) {
+          const slotKey = `${CUSTOM_CELL}-${dataIndex}-${this.adapter.getRecordKey(info.row.original)}`;
+          return html`<slot name="${slotKey}" slot="${slotKey}">${info.getValue()}</slot>`;
+        }
+        return info.getValue();
+      },
+      header: () => col.title || dataIndex,
+      size: width
+    });
+    newCol.enableResizing = (_a = col.enableResizing) != null ? _a : this.enableColumnResizing;
+    if (newCol.enableResizing) {
+      newCol.minSize = 60;
+      newCol.maxSize = 500;
+    }
+    if (canSort) {
+      newCol.sortingFn = (rowA, rowB) => sorter(rowA.original, rowB.original);
+    }
+    if (canFilter && onFilter) {
+      newCol.filterFn = (row, _columnId, filterValue) => {
+        if (Array.isArray(filterValue)) {
+          return filterValue.some((val) => !!onFilter(val, row.original));
+        }
+        return !!onFilter(filterValue, row.original);
+      };
+    }
+    newCol.enableSorting = !!canSort;
+    newCol.enableColumnFilter = !!canFilter;
+    return newCol;
+  }
+  buildGroupColumn(opts) {
+    const { cols, commonArgs } = opts;
+    const { columnHelper } = commonArgs;
+    return cols.map((col) => {
+      const children = col.children;
+      if (children && children.length > 0) {
+        const { dataIndex, title, width } = col;
+        const colGroup = columnHelper.group({
+          id: dataIndex,
+          header: () => title || dataIndex,
+          columns: this.buildGroupColumn({ cols: children, commonArgs }),
+          meta: this.buildColMeta(col),
+          size: width
+        });
+        return colGroup;
+      }
+      return this.buildLeafColumn({ col, commonArgs });
+    });
+  }
+  // 生成lit-table所需要的columns数组
+  buildColumns() {
+    var _a, _b, _c;
+    const columnHelper = createColumnHelper();
+    const { treeConfig, treeEnabled } = this.getTreeInfo();
+    const firstDataIndex = treeConfig && treeConfig.expandColumnKey || ((_a = this.leafColumns[0]) == null ? void 0 : _a.dataIndex);
+    const commonArgs = { columnHelper, firstDataIndex, treeEnabled };
+    const _columns = hasGroupedColumns(this.columns) ? this.buildGroupColumn({ cols: this.columns, commonArgs }) : this.leafColumns.map((col) => this.buildLeafColumn({ col, commonArgs }));
+    if (this.rowSelection && !this.rowSelection.hidden) {
+      const cascadeMode = treeEnabled && this.rowSelection.cascade === true;
+      _columns.unshift(getSelectionColumn(this.rowSelection, this.rowKey, cascadeMode));
+    }
+    const showExpandColumn = !treeEnabled && !!((_b = this == null ? void 0 : this.expandProps) == null ? void 0 : _b.rowExpandable);
+    if (showExpandColumn) _columns.unshift(getExpendRow(!!((_c = this.expandProps) == null ? void 0 : _c.expandRowByClick)));
+    if (this == null ? void 0 : this.rowDrag) _columns.unshift(getDragRow());
+    return _columns;
+  }
+  // 构建 tableState
+  buildTableState() {
+    var _a;
+    const rowSelectionOptions = getRowSelectionOptions({
+      rowSelection: this.rowSelection
+    });
+    const { treeEnabled } = this.getTreeInfo();
+    const cols = this.buildColumns();
+    const instance = this.tableController.table(__spreadProps(__spreadValues({
+      columns: cols,
+      data: this.dataSource,
+      enableColumnResizing: this.enableColumnResizing,
+      columnResizeMode: "onChange",
+      columnResizeDirection: this.direction,
+      manualPagination: !this.pagination,
+      getRowId: (row) => row[this.rowKey],
+      getSubRows: this.getSubRows,
+      filterFromLeafRows: treeEnabled,
+      getCoreRowModel: getCoreRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      getExpandedRowModel: getExpandedRowModel(),
+      state: {
+        rowSelection: this.rowSelectedMap,
+        sorting: this.sorting,
+        columnFilters: this.columnFilters,
+        columnSizing: this.columnSizing,
+        pagination: {
+          pageIndex: this.pageIndex,
+          pageSize: ((_a = this.pagination) == null ? void 0 : _a.pageSize) || 20
+        },
+        expanded: treeEnabled && this.columnFilters.length > 0 ? true : this.expandedMap,
+        columnPinning: this.columnPinning
+      },
+      onColumnSizingChange: this.handleColumnSizingChange,
+      onSortingChange: this.handleSortingChange,
+      onColumnFiltersChange: this.handleColumnFiltersChange
+    }, rowSelectionOptions), {
+      onRowSelectionChange: (updater) => this.handleRowSelectionChange(updater, instance),
+      // 受控排序
+      manualSorting: this.adapter.getSortIsControlled(),
+      manualFiltering: this.adapter.getFilterIsControlled(),
+      getRowCanExpand: treeEnabled ? (row) => this.getSubRows(row.original).length > 0 : this.getRowCanExpand,
+      onExpandedChange: this.expendedChange
+    }));
+    return instance;
+  }
+  handleChange(extra) {
+    var _a;
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: __spreadValues({
+          sorting: this.sorting,
+          columnFilters: this.columnFilters
+        }, extra)
+      })
+    );
+    if (["sorting", "filters", "pagination"].includes(extra == null ? void 0 : extra.changeType) && ((_a = this.tableScroll) == null ? void 0 : _a.scrollToFirstRowOnChange)) {
+      this.adapter.tableScrollToTop();
+    }
+  }
+  render() {
+    const tableInstance = this.buildTableState();
+    if (this.virtualized && this.rowVirtualizerController) {
+      const rowCount = tableInstance.getRowModel().rows.length;
+      this.rowVirtualizerController.getVirtualizer().setOptions(__spreadProps(__spreadValues({}, this.rowVirtualizerController.getVirtualizer().options), {
+        count: rowCount
+      }));
+    }
+    return html`
+      <div
+        part="table-wrapper"
+        ${ref(this.tableWrapRef)}
+        class=${classMap({
+      "table-wrapper": true,
+      [`table-direction-${this.direction}`]: true
+    })}
+      >
+        ${this.renderPagination("top")}
+        <sl-table-spinner-container .loading=${this.loading} exportparts="table-container">
+          <div
+            class=${classMap({
+      "table-bordered": Boolean(this.bordered),
+      "table-nodata": this.dataSource.length === 0
+    })}
+          >
+            <div
+              part="table-container"
+              class=${classMap({
+      "table-container": !this.enableColumnResizing,
+      "table-columnresizing": this.enableColumnResizing || false
+    })}
+            >
+              ${this.renderMainTable(tableInstance)}
+            </div>
+          </div>
+        </sl-table-spinner-container>
+        ${this.renderPagination("bottom")}
+      </div>
+    `;
+  }
+};
+SlTable.dependencies = {
+  "sl-icon": SlIcon,
+  "sl-checkbox": SlCheckbox,
+  "sl-radio": SlRadio,
+  "sl-pagination": SlPagination
+};
+SlTable.styles = [table_style_default];
+__decorateClass([
+  property({ type: Array })
+], SlTable.prototype, "rowKey", 2);
+__decorateClass([
+  property({ type: Array })
+], SlTable.prototype, "columns", 2);
+__decorateClass([
+  property({ type: Array })
+], SlTable.prototype, "dataSource", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlTable.prototype, "loading", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlTable.prototype, "bordered", 2);
+__decorateClass([
+  property({ type: String })
+], SlTable.prototype, "direction", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlTable.prototype, "showHeader", 2);
+__decorateClass([
+  property({ type: Object })
+], SlTable.prototype, "rowSelection", 2);
+__decorateClass([
+  property({ type: Object })
+], SlTable.prototype, "tableScroll", 2);
+__decorateClass([
+  property({ type: Object })
+], SlTable.prototype, "pagination", 2);
+__decorateClass([
+  property({ type: Object })
+], SlTable.prototype, "expandProps", 2);
+__decorateClass([
+  property({ type: Object })
+], SlTable.prototype, "tree", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlTable.prototype, "enableColumnResizing", 2);
+__decorateClass([
+  property({ type: Function })
+], SlTable.prototype, "slHeaderRow", 2);
+__decorateClass([
+  property({ type: Function })
+], SlTable.prototype, "slRow", 2);
+__decorateClass([
+  property({ type: Function })
+], SlTable.prototype, "slColumnResize", 2);
+__decorateClass([
+  property({ type: Object || Boolean })
+], SlTable.prototype, "virtualized", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlTable.prototype, "rowDrag", 2);
+__decorateClass([
+  property({ type: Function })
+], SlTable.prototype, "slRowReorder", 2);
+__decorateClass([
+  property({ type: Array })
+], SlTable.prototype, "summary", 2);
+__decorateClass([
+  state()
+], SlTable.prototype, "rowSelectedMap", 2);
+__decorateClass([
+  state()
+], SlTable.prototype, "expandedMap", 2);
+__decorateClass([
+  state()
+], SlTable.prototype, "sorting", 2);
+__decorateClass([
+  state()
+], SlTable.prototype, "columnFilters", 2);
+__decorateClass([
+  state()
+], SlTable.prototype, "tableWidth", 2);
+__decorateClass([
+  state()
+], SlTable.prototype, "columnSizing", 2);
+__decorateClass([
+  state()
+], SlTable.prototype, "pageIndex", 2);
+__decorateClass([
+  state()
+], SlTable.prototype, "columnPinning", 2);
+
+export {
+  SlTable
+};