element-ps 1.0.0-alpha.6 → 1.0.1

package/es/packages/components/table/src/table-header/style.helper.mjs

@@ -0,0 +1,90 @@
+import { getCurrentInstance } from 'vue';
+
+function useStyle(props) {
+  const instance = getCurrentInstance();
+  const parent = instance.parent;
+  const storeData = parent.store.states;
+  const isCellHidden = (index, columns) => {
+    let start = 0;
+    for (let i = 0; i < index; i++) {
+      start += columns[i].colSpan;
+    }
+    const after = start + columns[index].colSpan - 1;
+    if (props.fixed === "left") {
+      return after >= storeData.fixedLeafColumnsLength.value;
+    } else if (props.fixed === "right") {
+      return start < storeData.columns.value.length - storeData.rightFixedLeafColumnsLength.value;
+    } else {
+      return after < storeData.fixedLeafColumnsLength.value || start >= storeData.columns.value.length - storeData.rightFixedLeafColumnsLength.value;
+    }
+  };
+  const getHeaderRowStyle = (rowIndex) => {
+    const headerRowStyle = parent.props.headerRowStyle;
+    if (typeof headerRowStyle === "function") {
+      return headerRowStyle.call(null, { rowIndex });
+    }
+    return headerRowStyle;
+  };
+  const getHeaderRowClass = (rowIndex) => {
+    const classes = [];
+    const headerRowClassName = parent.props.headerRowClassName;
+    if (typeof headerRowClassName === "string") {
+      classes.push(headerRowClassName);
+    } else if (typeof headerRowClassName === "function") {
+      classes.push(headerRowClassName.call(null, { rowIndex }));
+    }
+    return classes.join(" ");
+  };
+  const getHeaderCellStyle = (rowIndex, columnIndex, row, column) => {
+    const headerCellStyle = parent.props.headerCellStyle;
+    if (typeof headerCellStyle === "function") {
+      return headerCellStyle.call(null, {
+        rowIndex,
+        columnIndex,
+        row,
+        column
+      });
+    }
+    return headerCellStyle;
+  };
+  const getHeaderCellClass = (rowIndex, columnIndex, row, column) => {
+    const classes = [
+      column.id,
+      column.order,
+      column.headerAlign,
+      column.className,
+      column.labelClassName
+    ];
+    if (rowIndex === 0 && isCellHidden(columnIndex, row)) {
+      classes.push("is-hidden");
+    }
+    if (!column.children) {
+      classes.push("is-leaf");
+    }
+    if (column.sortable) {
+      classes.push("is-sortable");
+    }
+    const headerCellClassName = parent.props.headerCellClassName;
+    if (typeof headerCellClassName === "string") {
+      classes.push(headerCellClassName);
+    } else if (typeof headerCellClassName === "function") {
+      classes.push(headerCellClassName.call(null, {
+        rowIndex,
+        columnIndex,
+        row,
+        column
+      }));
+    }
+    classes.push("el-table__cell");
+    return classes.join(" ");
+  };
+  return {
+    getHeaderRowStyle,
+    getHeaderRowClass,
+    getHeaderCellStyle,
+    getHeaderCellClass
+  };
+}
+
+export { useStyle as default };
+//# sourceMappingURL=style.helper.mjs.map

package/es/packages/components/table/src/table-header/style.helper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.helper.mjs","sources":["../../../../../../../../packages/components/table/src/table-header/style.helper.ts"],"sourcesContent":["import { getCurrentInstance } from 'vue'\n\nimport type { TableColumnCtx } from '../table-column/defaults'\nimport type { Table } from '../table/defaults'\nimport type { TableHeaderProps } from '.'\n\nfunction useStyle<T>(props: TableHeaderProps<T>) {\n  const instance = getCurrentInstance()\n  const parent = instance.parent as Table<T>\n  const storeData = parent.store.states\n  const isCellHidden = (\n    index: number,\n    columns: TableColumnCtx<T>[]\n  ): boolean => {\n    let start = 0\n    for (let i = 0; i < index; i++) {\n      start += columns[i].colSpan\n    }\n    const after = start + columns[index].colSpan - 1\n    if (props.fixed === 'left') {\n      return after >= storeData.fixedLeafColumnsLength.value\n    } else if (props.fixed === 'right') {\n      return (\n        start <\n        storeData.columns.value.length -\n          storeData.rightFixedLeafColumnsLength.value\n      )\n    } else {\n      return (\n        after < storeData.fixedLeafColumnsLength.value ||\n        start >=\n          storeData.columns.value.length -\n            storeData.rightFixedLeafColumnsLength.value\n      )\n    }\n  }\n\n  const getHeaderRowStyle = (rowIndex: number) => {\n    const headerRowStyle = parent.props.headerRowStyle\n    if (typeof headerRowStyle === 'function') {\n      return headerRowStyle.call(null, { rowIndex })\n    }\n    return headerRowStyle\n  }\n\n  const getHeaderRowClass = (rowIndex: number): string => {\n    const classes = []\n    const headerRowClassName = parent.props.headerRowClassName\n    if (typeof headerRowClassName === 'string') {\n      classes.push(headerRowClassName)\n    } else if (typeof headerRowClassName === 'function') {\n      classes.push(headerRowClassName.call(null, { rowIndex }))\n    }\n\n    return classes.join(' ')\n  }\n\n  const getHeaderCellStyle = (\n    rowIndex: number,\n    columnIndex: number,\n    row: T,\n    column: TableColumnCtx<T>\n  ) => {\n    const headerCellStyle = parent.props.headerCellStyle\n    if (typeof headerCellStyle === 'function') {\n      return headerCellStyle.call(null, {\n        rowIndex,\n        columnIndex,\n        row,\n        column,\n      })\n    }\n    return headerCellStyle\n  }\n\n  const getHeaderCellClass = (\n    rowIndex: number,\n    columnIndex: number,\n    row: T,\n    column: TableColumnCtx<T>\n  ) => {\n    const classes = [\n      column.id,\n      column.order,\n      column.headerAlign,\n      column.className,\n      column.labelClassName,\n    ]\n    if (\n      rowIndex === 0 &&\n      isCellHidden(columnIndex, row as unknown as TableColumnCtx<T>[])\n    ) {\n      classes.push('is-hidden')\n    }\n\n    if (!column.children) {\n      classes.push('is-leaf')\n    }\n\n    if (column.sortable) {\n      classes.push('is-sortable')\n    }\n\n    const headerCellClassName = parent.props.headerCellClassName\n    if (typeof headerCellClassName === 'string') {\n      classes.push(headerCellClassName)\n    } else if (typeof headerCellClassName === 'function') {\n      classes.push(\n        headerCellClassName.call(null, {\n          rowIndex,\n          columnIndex,\n          row,\n          column,\n        })\n      )\n    }\n\n    classes.push('el-table__cell')\n\n    return classes.join(' ')\n  }\n\n  return {\n    getHeaderRowStyle,\n    getHeaderRowClass,\n    getHeaderCellStyle,\n    getHeaderCellClass,\n  }\n}\n\nexport default useStyle\n"],"names":[],"mappings":";;AAMA,kBAAqB,OAA4B;AAC/C,QAAM,WAAW;AACjB,QAAM,SAAS,SAAS;AACxB,QAAM,YAAY,OAAO,MAAM;AAC/B,QAAM,eAAe,CACnB,OACA,YACY;AACZ,QAAI,QAAQ;AACZ,aAAS,IAAI,GAAG,IAAI,OAAO,KAAK;AAC9B,eAAS,QAAQ,GAAG;AAAA;AAEtB,UAAM,QAAQ,QAAQ,QAAQ,OAAO,UAAU;AAC/C,QAAI,MAAM,UAAU,QAAQ;AAC1B,aAAO,SAAS,UAAU,uBAAuB;AAAA,eACxC,MAAM,UAAU,SAAS;AAClC,aACE,QACA,UAAU,QAAQ,MAAM,SACtB,UAAU,4BAA4B;AAAA,WAErC;AACL,aACE,QAAQ,UAAU,uBAAuB,SACzC,SACE,UAAU,QAAQ,MAAM,SACtB,UAAU,4BAA4B;AAAA;AAAA;AAKhD,QAAM,oBAAoB,CAAC,aAAqB;AAC9C,UAAM,iBAAiB,OAAO,MAAM;AACpC,QAAI,OAAO,mBAAmB,YAAY;AACxC,aAAO,eAAe,KAAK,MAAM,EAAE;AAAA;AAErC,WAAO;AAAA;AAGT,QAAM,oBAAoB,CAAC,aAA6B;AACtD,UAAM,UAAU;AAChB,UAAM,qBAAqB,OAAO,MAAM;AACxC,QAAI,OAAO,uBAAuB,UAAU;AAC1C,cAAQ,KAAK;AAAA,eACJ,OAAO,uBAAuB,YAAY;AACnD,cAAQ,KAAK,mBAAmB,KAAK,MAAM,EAAE;AAAA;AAG/C,WAAO,QAAQ,KAAK;AAAA;AAGtB,QAAM,qBAAqB,CACzB,UACA,aACA,KACA,WACG;AACH,UAAM,kBAAkB,OAAO,MAAM;AACrC,QAAI,OAAO,oBAAoB,YAAY;AACzC,aAAO,gBAAgB,KAAK,MAAM;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA;AAGJ,WAAO;AAAA;AAGT,QAAM,qBAAqB,CACzB,UACA,aACA,KACA,WACG;AACH,UAAM,UAAU;AAAA,MACd,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA;AAET,QACE,aAAa,KACb,aAAa,aAAa,MAC1B;AACA,cAAQ,KAAK;AAAA;AAGf,QAAI,CAAC,OAAO,UAAU;AACpB,cAAQ,KAAK;AAAA;AAGf,QAAI,OAAO,UAAU;AACnB,cAAQ,KAAK;AAAA;AAGf,UAAM,sBAAsB,OAAO,MAAM;AACzC,QAAI,OAAO,wBAAwB,UAAU;AAC3C,cAAQ,KAAK;AAAA,eACJ,OAAO,wBAAwB,YAAY;AACpD,cAAQ,KACN,oBAAoB,KAAK,MAAM;AAAA,QAC7B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA;AAKN,YAAQ,KAAK;AAEb,WAAO,QAAQ,KAAK;AAAA;AAGtB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;;;;"}

package/es/packages/components/table/src/table-header/utils-helper.mjs

@@ -0,0 +1,78 @@
+import { getCurrentInstance, computed } from 'vue';
+
+const getAllColumns = (columns) => {
+  const result = [];
+  columns.forEach((column) => {
+    if (column.children) {
+      result.push(column);
+      result.push.apply(result, getAllColumns(column.children));
+    } else {
+      result.push(column);
+    }
+  });
+  return result;
+};
+const convertToRows = (originColumns) => {
+  let maxLevel = 1;
+  const traverse = (column, parent) => {
+    if (parent) {
+      column.level = parent.level + 1;
+      if (maxLevel < column.level) {
+        maxLevel = column.level;
+      }
+    }
+    if (column.children) {
+      let colSpan = 0;
+      column.children.forEach((subColumn) => {
+        traverse(subColumn, column);
+        colSpan += subColumn.colSpan;
+      });
+      column.colSpan = colSpan;
+    } else {
+      column.colSpan = 1;
+    }
+  };
+  originColumns.forEach((column) => {
+    column.level = 1;
+    traverse(column, void 0);
+  });
+  const rows = [];
+  for (let i = 0; i < maxLevel; i++) {
+    rows.push([]);
+  }
+  const allColumns = getAllColumns(originColumns);
+  allColumns.forEach((column) => {
+    if (!column.children) {
+      column.rowSpan = maxLevel - column.level + 1;
+    } else {
+      column.rowSpan = 1;
+    }
+    rows[column.level - 1].push(column);
+  });
+  return rows;
+};
+function useUtils(props) {
+  const instance = getCurrentInstance();
+  const parent = instance.parent;
+  const columnRows = computed(() => {
+    return convertToRows(props.store.states.originColumns.value);
+  });
+  const isGroup = computed(() => {
+    const result = columnRows.value.length > 1;
+    if (result)
+      parent.state.isGroup.value = true;
+    return result;
+  });
+  const toggleAllSelection = (event) => {
+    event.stopPropagation();
+    parent.store.commit("toggleAllSelection");
+  };
+  return {
+    isGroup,
+    toggleAllSelection,
+    columnRows
+  };
+}
+
+export { useUtils as default };
+//# sourceMappingURL=utils-helper.mjs.map

package/es/packages/components/table/src/table-header/utils-helper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils-helper.mjs","sources":["../../../../../../../../packages/components/table/src/table-header/utils-helper.ts"],"sourcesContent":["import { getCurrentInstance, computed } from 'vue'\n\nimport type { TableColumnCtx } from '../table-column/defaults'\nimport type { Table } from '../table/defaults'\nimport type { TableHeaderProps } from '.'\n\nconst getAllColumns = <T>(\n  columns: TableColumnCtx<T>[]\n): TableColumnCtx<T>[] => {\n  const result = []\n  columns.forEach((column) => {\n    if (column.children) {\n      result.push(column)\n      // eslint-disable-next-line prefer-spread\n      result.push.apply(result, getAllColumns(column.children))\n    } else {\n      result.push(column)\n    }\n  })\n  return result\n}\n\nconst convertToRows = <T>(\n  originColumns: TableColumnCtx<T>[]\n): TableColumnCtx<T>[] => {\n  let maxLevel = 1\n  const traverse = (column: TableColumnCtx<T>, parent: TableColumnCtx<T>) => {\n    if (parent) {\n      column.level = parent.level + 1\n      if (maxLevel < column.level) {\n        maxLevel = column.level\n      }\n    }\n    if (column.children) {\n      let colSpan = 0\n      column.children.forEach((subColumn) => {\n        traverse(subColumn, column)\n        colSpan += subColumn.colSpan\n      })\n      column.colSpan = colSpan\n    } else {\n      column.colSpan = 1\n    }\n  }\n\n  originColumns.forEach((column) => {\n    column.level = 1\n    traverse(column, undefined)\n  })\n\n  const rows = []\n  for (let i = 0; i < maxLevel; i++) {\n    rows.push([])\n  }\n\n  const allColumns = getAllColumns(originColumns)\n\n  allColumns.forEach((column) => {\n    if (!column.children) {\n      column.rowSpan = maxLevel - column.level + 1\n    } else {\n      column.rowSpan = 1\n    }\n    rows[column.level - 1].push(column)\n  })\n\n  return rows\n}\n\nfunction useUtils<T>(props: TableHeaderProps<T>) {\n  const instance = getCurrentInstance()\n  const parent = instance.parent as Table<T>\n  const columnRows = computed(() => {\n    return convertToRows(props.store.states.originColumns.value)\n  })\n  const isGroup = computed(() => {\n    const result = columnRows.value.length > 1\n    if (result) parent.state.isGroup.value = true\n    return result\n  })\n  const toggleAllSelection = (event: Event) => {\n    event.stopPropagation()\n    parent.store.commit('toggleAllSelection')\n  }\n  return {\n    isGroup,\n    toggleAllSelection,\n    columnRows,\n  }\n}\n\nexport default useUtils\n"],"names":[],"mappings":";;AAMA,MAAM,gBAAgB,CACpB,YACwB;AACxB,QAAM,SAAS;AACf,UAAQ,QAAQ,CAAC,WAAW;AAC1B,QAAI,OAAO,UAAU;AACnB,aAAO,KAAK;AAEZ,aAAO,KAAK,MAAM,QAAQ,cAAc,OAAO;AAAA,WAC1C;AACL,aAAO,KAAK;AAAA;AAAA;AAGhB,SAAO;AAAA;AAGT,MAAM,gBAAgB,CACpB,kBACwB;AACxB,MAAI,WAAW;AACf,QAAM,WAAW,CAAC,QAA2B,WAA8B;AACzE,QAAI,QAAQ;AACV,aAAO,QAAQ,OAAO,QAAQ;AAC9B,UAAI,WAAW,OAAO,OAAO;AAC3B,mBAAW,OAAO;AAAA;AAAA;AAGtB,QAAI,OAAO,UAAU;AACnB,UAAI,UAAU;AACd,aAAO,SAAS,QAAQ,CAAC,cAAc;AACrC,iBAAS,WAAW;AACpB,mBAAW,UAAU;AAAA;AAEvB,aAAO,UAAU;AAAA,WACZ;AACL,aAAO,UAAU;AAAA;AAAA;AAIrB,gBAAc,QAAQ,CAAC,WAAW;AAChC,WAAO,QAAQ;AACf,aAAS,QAAQ;AAAA;AAGnB,QAAM,OAAO;AACb,WAAS,IAAI,GAAG,IAAI,UAAU,KAAK;AACjC,SAAK,KAAK;AAAA;AAGZ,QAAM,aAAa,cAAc;AAEjC,aAAW,QAAQ,CAAC,WAAW;AAC7B,QAAI,CAAC,OAAO,UAAU;AACpB,aAAO,UAAU,WAAW,OAAO,QAAQ;AAAA,WACtC;AACL,aAAO,UAAU;AAAA;AAEnB,SAAK,OAAO,QAAQ,GAAG,KAAK;AAAA;AAG9B,SAAO;AAAA;AAGT,kBAAqB,OAA4B;AAC/C,QAAM,WAAW;AACjB,QAAM,SAAS,SAAS;AACxB,QAAM,aAAa,SAAS,MAAM;AAChC,WAAO,cAAc,MAAM,MAAM,OAAO,cAAc;AAAA;AAExD,QAAM,UAAU,SAAS,MAAM;AAC7B,UAAM,SAAS,WAAW,MAAM,SAAS;AACzC,QAAI;AAAQ,aAAO,MAAM,QAAQ,QAAQ;AACzC,WAAO;AAAA;AAET,QAAM,qBAAqB,CAAC,UAAiB;AAC3C,UAAM;AACN,WAAO,MAAM,OAAO;AAAA;AAEtB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA;AAAA;;;;"}

package/es/packages/components/table/src/table-layout.mjs

@@ -0,0 +1,231 @@
+import { ref, isRef, nextTick } from 'vue';
+import { hasOwn } from '@vue/shared';
+import getScrollBarWidth from '../../../utils/scrollbar-width.mjs';
+import isServer from '../../../utils/isServer.mjs';
+import { parseHeight } from './util.mjs';
+
+class TableLayout {
+  constructor(options) {
+    this.observers = [];
+    this.table = null;
+    this.store = null;
+    this.columns = [];
+    this.fit = true;
+    this.showHeader = true;
+    this.height = ref(null);
+    this.scrollX = ref(false);
+    this.scrollY = ref(false);
+    this.bodyWidth = ref(null);
+    this.fixedWidth = ref(null);
+    this.rightFixedWidth = ref(null);
+    this.tableHeight = ref(null);
+    this.headerHeight = ref(44);
+    this.appendHeight = ref(0);
+    this.footerHeight = ref(44);
+    this.viewportHeight = ref(null);
+    this.bodyHeight = ref(null);
+    this.fixedBodyHeight = ref(null);
+    this.gutterWidth = getScrollBarWidth();
+    for (const name in options) {
+      if (hasOwn(options, name)) {
+        if (isRef(this[name])) {
+          this[name].value = options[name];
+        } else {
+          this[name] = options[name];
+        }
+      }
+    }
+    if (!this.table) {
+      throw new Error("Table is required for Table Layout");
+    }
+    if (!this.store) {
+      throw new Error("Store is required for Table Layout");
+    }
+  }
+  updateScrollY() {
+    const height = this.height.value;
+    if (height === null)
+      return false;
+    const bodyWrapper = this.table.refs.bodyWrapper;
+    if (this.table.vnode.el && bodyWrapper) {
+      let scrollY = true;
+      const prevScrollY = this.scrollY.value;
+      if (this.bodyHeight.value === null) {
+        scrollY = false;
+      } else {
+        const body = bodyWrapper.querySelector(".el-table__body");
+        scrollY = body.offsetHeight > this.bodyHeight.value;
+      }
+      this.scrollY.value = scrollY;
+      return prevScrollY !== scrollY;
+    }
+    return false;
+  }
+  setHeight(value, prop = "height") {
+    if (isServer)
+      return;
+    const el = this.table.vnode.el;
+    value = parseHeight(value);
+    this.height.value = Number(value);
+    if (!el && (value || value === 0))
+      return nextTick(() => this.setHeight(value, prop));
+    if (typeof value === "number") {
+      el.style[prop] = `${value}px`;
+      this.updateElsHeight();
+    } else if (typeof value === "string") {
+      el.style[prop] = value;
+      this.updateElsHeight();
+    }
+  }
+  setMaxHeight(value) {
+    this.setHeight(value, "max-height");
+  }
+  getFlattenColumns() {
+    const flattenColumns = [];
+    const columns = this.table.store.states.columns.value;
+    columns.forEach((column) => {
+      if (column.isColumnGroup) {
+        flattenColumns.push.apply(flattenColumns, column.columns);
+      } else {
+        flattenColumns.push(column);
+      }
+    });
+    return flattenColumns;
+  }
+  updateElsHeight() {
+    if (!this.table.$ready)
+      return nextTick(() => this.updateElsHeight());
+    const { headerWrapper, appendWrapper, footerWrapper } = this.table.refs;
+    this.appendHeight.value = appendWrapper ? appendWrapper.offsetHeight : 0;
+    if (this.showHeader && !headerWrapper)
+      return;
+    const headerTrElm = headerWrapper ? headerWrapper.querySelector(".el-table__header tr") : null;
+    const noneHeader = this.headerDisplayNone(headerTrElm);
+    const headerHeight = this.headerHeight.value = !this.showHeader ? 0 : headerWrapper.offsetHeight;
+    if (this.showHeader && !noneHeader && headerWrapper.offsetWidth > 0 && (this.table.store.states.columns.value || []).length > 0 && headerHeight < 2) {
+      return nextTick(() => this.updateElsHeight());
+    }
+    const tableHeight = this.tableHeight.value = this.table.vnode.el.clientHeight;
+    const footerHeight = this.footerHeight.value = footerWrapper ? footerWrapper.offsetHeight : 0;
+    if (this.height.value !== null) {
+      this.bodyHeight.value = tableHeight - headerHeight - footerHeight + (footerWrapper ? 1 : 0);
+    }
+    this.fixedBodyHeight.value = this.scrollX.value ? this.bodyHeight.value - this.gutterWidth : this.bodyHeight.value;
+    this.viewportHeight.value = this.scrollX.value ? tableHeight - this.gutterWidth : tableHeight;
+    this.updateScrollY();
+    this.notifyObservers("scrollable");
+  }
+  headerDisplayNone(elm) {
+    if (!elm)
+      return true;
+    let headerChild = elm;
+    while (headerChild.tagName !== "DIV") {
+      if (getComputedStyle(headerChild).display === "none") {
+        return true;
+      }
+      headerChild = headerChild.parentElement;
+    }
+    return false;
+  }
+  updateColumnsWidth() {
+    if (isServer)
+      return;
+    const fit = this.fit;
+    const bodyWidth = this.table.vnode.el.clientWidth;
+    let bodyMinWidth = 0;
+    const flattenColumns = this.getFlattenColumns();
+    const flexColumns = flattenColumns.filter((column) => typeof column.width !== "number");
+    flattenColumns.forEach((column) => {
+      if (typeof column.width === "number" && column.realWidth)
+        column.realWidth = null;
+    });
+    if (flexColumns.length > 0 && fit) {
+      flattenColumns.forEach((column) => {
+        bodyMinWidth += Number(column.width || column.minWidth || 80);
+      });
+      const scrollYWidth = this.scrollY.value ? this.gutterWidth : 0;
+      if (bodyMinWidth <= bodyWidth - scrollYWidth) {
+        this.scrollX.value = false;
+        const totalFlexWidth = bodyWidth - scrollYWidth - bodyMinWidth;
+        if (flexColumns.length === 1) {
+          flexColumns[0].realWidth = Number(flexColumns[0].minWidth || 80) + totalFlexWidth;
+        } else {
+          const allColumnsWidth = flexColumns.reduce((prev, column) => prev + Number(column.minWidth || 80), 0);
+          const flexWidthPerPixel = totalFlexWidth / allColumnsWidth;
+          let noneFirstWidth = 0;
+          flexColumns.forEach((column, index) => {
+            if (index === 0)
+              return;
+            const flexWidth = Math.floor(Number(column.minWidth || 80) * flexWidthPerPixel);
+            noneFirstWidth += flexWidth;
+            column.realWidth = Number(column.minWidth || 80) + flexWidth;
+          });
+          flexColumns[0].realWidth = Number(flexColumns[0].minWidth || 80) + totalFlexWidth - noneFirstWidth;
+        }
+      } else {
+        this.scrollX.value = true;
+        flexColumns.forEach(function(column) {
+          column.realWidth = Number(column.minWidth);
+        });
+      }
+      this.bodyWidth.value = Math.max(bodyMinWidth, bodyWidth);
+      this.table.state.resizeState.value.width = this.bodyWidth.value;
+    } else {
+      flattenColumns.forEach((column) => {
+        if (!column.width && !column.minWidth) {
+          column.realWidth = 80;
+        } else {
+          column.realWidth = Number(column.width || column.minWidth);
+        }
+        bodyMinWidth += column.realWidth;
+      });
+      this.scrollX.value = bodyMinWidth > bodyWidth;
+      this.bodyWidth.value = bodyMinWidth;
+    }
+    const fixedColumns = this.store.states.fixedColumns.value;
+    if (fixedColumns.length > 0) {
+      let fixedWidth = 0;
+      fixedColumns.forEach(function(column) {
+        fixedWidth += Number(column.realWidth || column.width);
+      });
+      this.fixedWidth.value = fixedWidth;
+    }
+    const rightFixedColumns = this.store.states.rightFixedColumns.value;
+    if (rightFixedColumns.length > 0) {
+      let rightFixedWidth = 0;
+      rightFixedColumns.forEach(function(column) {
+        rightFixedWidth += Number(column.realWidth || column.width);
+      });
+      this.rightFixedWidth.value = rightFixedWidth;
+    }
+    this.notifyObservers("columns");
+  }
+  addObserver(observer) {
+    this.observers.push(observer);
+  }
+  removeObserver(observer) {
+    const index = this.observers.indexOf(observer);
+    if (index !== -1) {
+      this.observers.splice(index, 1);
+    }
+  }
+  notifyObservers(event) {
+    const observers = this.observers;
+    observers.forEach((observer) => {
+      var _a, _b;
+      switch (event) {
+        case "columns":
+          (_a = observer.state) == null ? void 0 : _a.onColumnsChange(this);
+          break;
+        case "scrollable":
+          (_b = observer.state) == null ? void 0 : _b.onScrollableChange(this);
+          break;
+        default:
+          throw new Error(`Table Layout don't have event ${event}.`);
+      }
+    });
+  }
+}
+
+export { TableLayout as default };
+//# sourceMappingURL=table-layout.mjs.map

package/es/packages/components/table/src/table-layout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-layout.mjs","sources":["../../../../../../../packages/components/table/src/table-layout.ts"],"sourcesContent":["import { nextTick, ref, isRef } from 'vue'\nimport { hasOwn } from '@vue/shared'\nimport scrollbarWidth from '@element-ps/utils/scrollbar-width'\nimport isServer from '@element-ps/utils/isServer'\nimport { parseHeight } from './util'\nimport type { Ref } from 'vue'\n\nimport type { TableColumnCtx } from './table-column/defaults'\nimport type { TableHeader } from './table-header'\nimport type { Table } from './table/defaults'\nimport type { Store } from './store'\nclass TableLayout<T> {\n  observers: TableHeader[]\n  table: Table<T>\n  store: Store<T>\n  columns: TableColumnCtx<T>[]\n  fit: boolean\n  showHeader: boolean\n\n  height: Ref<null | number>\n  scrollX: Ref<boolean>\n  scrollY: Ref<boolean>\n  bodyWidth: Ref<null | number>\n  fixedWidth: Ref<null | number>\n  rightFixedWidth: Ref<null | number>\n  tableHeight: Ref<null | number>\n  headerHeight: Ref<null | number> // Table Header Height\n  appendHeight: Ref<null | number> // Append Slot Height\n  footerHeight: Ref<null | number> // Table Footer Height\n  viewportHeight: Ref<null | number> // Table Height - Scroll Bar Height\n  bodyHeight: Ref<null | number> // Table Height - Table Header Height\n  fixedBodyHeight: Ref<null | number> // Table Height - Table Header Height - Scroll Bar Height\n  gutterWidth: number\n  constructor(options: Record<string, any>) {\n    this.observers = []\n    this.table = null\n    this.store = null\n    this.columns = []\n    this.fit = true\n    this.showHeader = true\n    this.height = ref(null)\n    this.scrollX = ref(false)\n    this.scrollY = ref(false)\n    this.bodyWidth = ref(null)\n    this.fixedWidth = ref(null)\n    this.rightFixedWidth = ref(null)\n    this.tableHeight = ref(null)\n    this.headerHeight = ref(44)\n    this.appendHeight = ref(0)\n    this.footerHeight = ref(44)\n    this.viewportHeight = ref(null)\n    this.bodyHeight = ref(null)\n    this.fixedBodyHeight = ref(null)\n    this.gutterWidth = scrollbarWidth()\n    for (const name in options) {\n      if (hasOwn(options, name)) {\n        if (isRef(this[name])) {\n          this[name as string].value = options[name]\n        } else {\n          this[name as string] = options[name]\n        }\n      }\n    }\n    if (!this.table) {\n      throw new Error('Table is required for Table Layout')\n    }\n    if (!this.store) {\n      throw new Error('Store is required for Table Layout')\n    }\n  }\n\n  updateScrollY() {\n    const height = this.height.value\n    /**\n     * When the height is not initialized, it is null.\n     * After the table is initialized, when the height is not configured, the height is 0.\n     */\n    if (height === null) return false\n    const bodyWrapper = this.table.refs.bodyWrapper as HTMLElement\n    if (this.table.vnode.el && bodyWrapper) {\n      let scrollY = true\n      const prevScrollY = this.scrollY.value\n      /**\n       * When bodyHeight has no value,\n       * it means that the table height is not set,\n       * and the scroll bar will never appear\n       */\n      if (this.bodyHeight.value === null) {\n        scrollY = false\n      } else {\n        const body = bodyWrapper.querySelector('.el-table__body') as HTMLElement\n        scrollY = body.offsetHeight > this.bodyHeight.value\n      }\n      this.scrollY.value = scrollY\n      return prevScrollY !== scrollY\n    }\n    return false\n  }\n\n  setHeight(value: string | number, prop = 'height') {\n    if (isServer) return\n    const el = this.table.vnode.el\n    value = parseHeight(value)\n    this.height.value = Number(value)\n\n    if (!el && (value || value === 0))\n      return nextTick(() => this.setHeight(value, prop))\n\n    if (typeof value === 'number') {\n      el.style[prop] = `${value}px`\n      this.updateElsHeight()\n    } else if (typeof value === 'string') {\n      el.style[prop] = value\n      this.updateElsHeight()\n    }\n  }\n\n  setMaxHeight(value: string | number) {\n    this.setHeight(value, 'max-height')\n  }\n\n  getFlattenColumns(): TableColumnCtx<T>[] {\n    const flattenColumns = []\n    const columns = this.table.store.states.columns.value\n    columns.forEach((column) => {\n      if (column.isColumnGroup) {\n        // eslint-disable-next-line prefer-spread\n        flattenColumns.push.apply(flattenColumns, column.columns)\n      } else {\n        flattenColumns.push(column)\n      }\n    })\n\n    return flattenColumns\n  }\n\n  updateElsHeight() {\n    if (!this.table.$ready) return nextTick(() => this.updateElsHeight())\n    const { headerWrapper, appendWrapper, footerWrapper } = this.table.refs\n    this.appendHeight.value = appendWrapper ? appendWrapper.offsetHeight : 0\n    if (this.showHeader && !headerWrapper) return\n\n    const headerTrElm: HTMLElement = headerWrapper\n      ? headerWrapper.querySelector('.el-table__header tr')\n      : null\n    const noneHeader = this.headerDisplayNone(headerTrElm)\n\n    const headerHeight = (this.headerHeight.value = !this.showHeader\n      ? 0\n      : headerWrapper.offsetHeight)\n    if (\n      this.showHeader &&\n      !noneHeader &&\n      headerWrapper.offsetWidth > 0 &&\n      (this.table.store.states.columns.value || []).length > 0 &&\n      headerHeight < 2\n    ) {\n      return nextTick(() => this.updateElsHeight())\n    }\n    const tableHeight = (this.tableHeight.value =\n      this.table.vnode.el.clientHeight)\n    const footerHeight = (this.footerHeight.value = footerWrapper\n      ? footerWrapper.offsetHeight\n      : 0)\n    if (this.height.value !== null) {\n      this.bodyHeight.value =\n        tableHeight - headerHeight - footerHeight + (footerWrapper ? 1 : 0)\n    }\n    this.fixedBodyHeight.value = this.scrollX.value\n      ? this.bodyHeight.value - this.gutterWidth\n      : this.bodyHeight.value\n\n    this.viewportHeight.value = this.scrollX.value\n      ? tableHeight - this.gutterWidth\n      : tableHeight\n\n    this.updateScrollY()\n    this.notifyObservers('scrollable')\n  }\n\n  headerDisplayNone(elm: HTMLElement) {\n    if (!elm) return true\n    let headerChild = elm\n    while (headerChild.tagName !== 'DIV') {\n      if (getComputedStyle(headerChild).display === 'none') {\n        return true\n      }\n      headerChild = headerChild.parentElement\n    }\n    return false\n  }\n\n  updateColumnsWidth() {\n    if (isServer) return\n    const fit = this.fit\n    const bodyWidth = this.table.vnode.el.clientWidth\n    let bodyMinWidth = 0\n\n    const flattenColumns = this.getFlattenColumns()\n    const flexColumns = flattenColumns.filter(\n      (column) => typeof column.width !== 'number'\n    )\n    flattenColumns.forEach((column) => {\n      // Clean those columns whose width changed from flex to unflex\n      if (typeof column.width === 'number' && column.realWidth)\n        column.realWidth = null\n    })\n    if (flexColumns.length > 0 && fit) {\n      flattenColumns.forEach((column) => {\n        bodyMinWidth += Number(column.width || column.minWidth || 80)\n      })\n\n      const scrollYWidth = this.scrollY.value ? this.gutterWidth : 0\n\n      if (bodyMinWidth <= bodyWidth - scrollYWidth) {\n        // DON'T HAVE SCROLL BAR\n        this.scrollX.value = false\n\n        const totalFlexWidth = bodyWidth - scrollYWidth - bodyMinWidth\n\n        if (flexColumns.length === 1) {\n          flexColumns[0].realWidth =\n            Number(flexColumns[0].minWidth || 80) + totalFlexWidth\n        } else {\n          const allColumnsWidth = flexColumns.reduce(\n            (prev, column) => prev + Number(column.minWidth || 80),\n            0\n          )\n          const flexWidthPerPixel = totalFlexWidth / allColumnsWidth\n          let noneFirstWidth = 0\n\n          flexColumns.forEach((column, index) => {\n            if (index === 0) return\n            const flexWidth = Math.floor(\n              Number(column.minWidth || 80) * flexWidthPerPixel\n            )\n            noneFirstWidth += flexWidth\n            column.realWidth = Number(column.minWidth || 80) + flexWidth\n          })\n\n          flexColumns[0].realWidth =\n            Number(flexColumns[0].minWidth || 80) +\n            totalFlexWidth -\n            noneFirstWidth\n        }\n      } else {\n        // HAVE HORIZONTAL SCROLL BAR\n        this.scrollX.value = true\n        flexColumns.forEach(function (column) {\n          column.realWidth = Number(column.minWidth)\n        })\n      }\n\n      this.bodyWidth.value = Math.max(bodyMinWidth, bodyWidth)\n      this.table.state.resizeState.value.width = this.bodyWidth.value\n    } else {\n      flattenColumns.forEach((column) => {\n        if (!column.width && !column.minWidth) {\n          column.realWidth = 80\n        } else {\n          column.realWidth = Number(column.width || column.minWidth)\n        }\n        bodyMinWidth += column.realWidth\n      })\n      this.scrollX.value = bodyMinWidth > bodyWidth\n\n      this.bodyWidth.value = bodyMinWidth\n    }\n\n    const fixedColumns = this.store.states.fixedColumns.value\n\n    if (fixedColumns.length > 0) {\n      let fixedWidth = 0\n      fixedColumns.forEach(function (column) {\n        fixedWidth += Number(column.realWidth || column.width)\n      })\n\n      this.fixedWidth.value = fixedWidth\n    }\n\n    const rightFixedColumns = this.store.states.rightFixedColumns.value\n    if (rightFixedColumns.length > 0) {\n      let rightFixedWidth = 0\n      rightFixedColumns.forEach(function (column) {\n        rightFixedWidth += Number(column.realWidth || column.width)\n      })\n\n      this.rightFixedWidth.value = rightFixedWidth\n    }\n    this.notifyObservers('columns')\n  }\n\n  addObserver(observer: TableHeader) {\n    this.observers.push(observer)\n  }\n\n  removeObserver(observer: TableHeader) {\n    const index = this.observers.indexOf(observer)\n    if (index !== -1) {\n      this.observers.splice(index, 1)\n    }\n  }\n\n  notifyObservers(event: string) {\n    const observers = this.observers\n    observers.forEach((observer) => {\n      switch (event) {\n        case 'columns':\n          observer.state?.onColumnsChange(this)\n          break\n        case 'scrollable':\n          observer.state?.onScrollableChange(this)\n          break\n        default:\n          throw new Error(`Table Layout don't have event ${event}.`)\n      }\n    })\n  }\n}\n\nexport default TableLayout\n"],"names":["scrollbarWidth"],"mappings":"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"}

package/es/packages/components/table/src/table.mjs

@@ -0,0 +1,7 @@
+import script from './table.vue_vue&type=script&lang.mjs';
+export { default } from './table.vue_vue&type=script&lang.mjs';
+import { render } from './table.vue_vue&type=template&id=4a1660ad&lang.mjs';
+
+script.render = render;
+script.__file = "packages/components/table/src/table.vue";
+//# sourceMappingURL=table.mjs.map

package/es/packages/components/table/src/table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/es/packages/components/table/src/table.vue_vue&type=script&lang.mjs

@@ -0,0 +1,102 @@
+import { defineComponent, getCurrentInstance, computed } from 'vue';
+import debounce from 'lodash/debounce';
+import '../../../hooks/index.mjs';
+import { createStore } from './store/helper.mjs';
+import TableLayout from './table-layout.mjs';
+import TableHeader from './table-header/index.mjs';
+import TableBody from './table-body/index.mjs';
+import TableFooter from './table-footer/index.mjs';
+import useUtils from './table/utils-helper.mjs';
+import useStyle from './table/style-helper.mjs';
+import defaultProps from './table/defaults.mjs';
+import { useLocaleInject } from '../../../hooks/use-locale/index.mjs';
+
+let tableIdSeed = 1;
+var script = defineComponent({
+  name: "PsTable",
+  components: {
+    TableHeader,
+    TableBody,
+    TableFooter
+  },
+  props: defaultProps,
+  setup(props) {
+    const { t } = useLocaleInject();
+    const table = getCurrentInstance();
+    const store = createStore(table, props);
+    table.store = store;
+    const layout = new TableLayout({
+      store: table.store,
+      table,
+      fit: props.fit,
+      showHeader: props.showHeader
+    });
+    table.layout = layout;
+    const isEmpty = computed(() => (store.states.data.value || []).length === 0);
+    const {
+      setCurrentRow,
+      toggleRowSelection,
+      clearSelection,
+      clearFilter,
+      toggleAllSelection,
+      toggleRowExpansion,
+      clearSort,
+      sort
+    } = useUtils(store);
+    const {
+      isHidden,
+      renderExpanded,
+      isGroup,
+      tableSize,
+      bodyHeight,
+      emptyBlockStyle,
+      fixedHeight,
+      fixedBodyHeight,
+      resizeProxyVisible,
+      bodyWidth,
+      resizeState,
+      doLayout
+    } = useStyle(props, layout, store, table);
+    const debouncedUpdateLayout = debounce(doLayout, 50);
+    const tableId = `el-table_${tableIdSeed++}`;
+    table.tableId = tableId;
+    table.state = {
+      isGroup,
+      resizeState,
+      doLayout,
+      debouncedUpdateLayout
+    };
+    return {
+      layout,
+      store,
+      tableId,
+      tableSize,
+      isHidden,
+      isEmpty,
+      renderExpanded,
+      resizeProxyVisible,
+      resizeState,
+      isGroup,
+      bodyWidth,
+      bodyHeight,
+      emptyBlockStyle,
+      debouncedUpdateLayout,
+      fixedHeight,
+      fixedBodyHeight,
+      setCurrentRow,
+      toggleRowSelection,
+      clearSelection,
+      clearFilter,
+      toggleAllSelection,
+      toggleRowExpansion,
+      clearSort,
+      doLayout,
+      sort,
+      t,
+      context: table
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=table.vue_vue&type=script&lang.mjs.map

package/es/packages/components/table/src/table.vue_vue&type=script&lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.vue_vue&type=script&lang.mjs","sources":["../../../../../../../packages/components/table/src/table.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      {\n        'el-table--fit': fit,\n        'el-table--striped': stripe,\n        'el-table--border': border || isGroup,\n        'el-table--hidden': isHidden,\n        'el-table--group': isGroup,\n        'el-table--fluid-height': maxHeight,\n        'el-table--scrollable-x': layout.scrollX.value,\n        'el-table--scrollable-y': layout.scrollY.value,\n        'el-table--enable-row-hover': !store.states.isComplex.value,\n        'el-table--enable-row-transition':\n          (store.states.data.value || []).length !== 0 &&\n          (store.states.data.value || []).length < 100,\n      },\n      tableSize ? `el-table--${tableSize}` : '',\n      className,\n      'el-table',\n    ]\"\n    :style=\"style\"\n  >\n    <div ref=\"hiddenColumns\" class=\"hidden-columns\">\n      <slot></slot>\n    </div>\n    <div v-if=\"showHeader\" ref=\"headerWrapper\" class=\"el-table__header-wrapper\">\n      <table-header\n        ref=\"tableHeader\"\n        :border=\"border\"\n        :default-sort=\"defaultSort\"\n        :store=\"store\"\n        :style=\"{\n          width: layout.bodyWidth.value ? layout.bodyWidth.value + 'px' : '',\n        }\"\n      />\n    </div>\n    <div ref=\"bodyWrapper\" :style=\"[bodyHeight]\" class=\"el-table__body-wrapper\">\n      <table-body\n        :context=\"context\"\n        :highlight=\"highlightCurrentRow\"\n        :row-class-name=\"rowClassName\"\n        :tooltip-effect=\"tooltipEffect\"\n        :row-style=\"rowStyle\"\n        :store=\"store\"\n        :stripe=\"stripe\"\n        :style=\"{\n          width: bodyWidth,\n        }\"\n      />\n      <div\n        v-if=\"isEmpty\"\n        ref=\"emptyBlock\"\n        :style=\"emptyBlockStyle\"\n        class=\"el-table__empty-block\"\n      >\n        <span class=\"el-table__empty-text\">\n          <slot name=\"empty\">{{ emptyText || t('el.table.emptyText') }}</slot>\n        </span>\n      </div>\n      <div\n        v-if=\"$slots.append\"\n        ref=\"appendWrapper\"\n        class=\"el-table__append-wrapper\"\n      >\n        <slot name=\"append\"></slot>\n      </div>\n    </div>\n    <div\n      v-if=\"showSummary\"\n      v-show=\"!isEmpty\"\n      ref=\"footerWrapper\"\n      class=\"el-table__footer-wrapper\"\n    >\n      <table-footer\n        :border=\"border\"\n        :default-sort=\"defaultSort\"\n        :store=\"store\"\n        :style=\"{\n          width: layout.bodyWidth.value ? layout.bodyWidth.value + 'px' : '',\n        }\"\n        :sum-text=\"sumText || t('el.table.sumText')\"\n        :summary-method=\"summaryMethod\"\n      />\n    </div>\n    <div\n      v-if=\"store.states.fixedColumns.value.length > 0\"\n      ref=\"fixedWrapper\"\n      :style=\"[\n        {\n          width: layout.fixedWidth.value ? layout.fixedWidth.value + 'px' : '',\n        },\n        fixedHeight,\n      ]\"\n      class=\"el-table__fixed\"\n    >\n      <div\n        v-if=\"showHeader\"\n        ref=\"fixedHeaderWrapper\"\n        class=\"el-table__fixed-header-wrapper\"\n      >\n        <table-header\n          ref=\"fixedTableHeader\"\n          :border=\"border\"\n          :store=\"store\"\n          :style=\"{\n            width: bodyWidth,\n          }\"\n          fixed=\"left\"\n        />\n      </div>\n      <div\n        ref=\"fixedBodyWrapper\"\n        :style=\"[\n          {\n            top: layout.headerHeight.value + 'px',\n          },\n          fixedBodyHeight,\n        ]\"\n        class=\"el-table__fixed-body-wrapper\"\n      >\n        <table-body\n          :highlight=\"highlightCurrentRow\"\n          :row-class-name=\"rowClassName\"\n          :tooltip-effect=\"tooltipEffect\"\n          :row-style=\"rowStyle\"\n          :store=\"store\"\n          :stripe=\"stripe\"\n          :style=\"{\n            width: bodyWidth,\n          }\"\n          fixed=\"left\"\n        />\n        <div\n          v-if=\"$slots.append\"\n          :style=\"{ height: layout.appendHeight.value + 'px' }\"\n          class=\"el-table__append-gutter\"\n        ></div>\n      </div>\n      <div\n        v-if=\"showSummary\"\n        v-show=\"!isEmpty\"\n        ref=\"fixedFooterWrapper\"\n        class=\"el-table__fixed-footer-wrapper\"\n      >\n        <table-footer\n          :border=\"border\"\n          :store=\"store\"\n          :style=\"{\n            width: bodyWidth,\n          }\"\n          :sum-text=\"sumText || t('el.table.sumText')\"\n          :summary-method=\"summaryMethod\"\n          fixed=\"left\"\n        />\n      </div>\n    </div>\n    <div\n      v-if=\"store.states.rightFixedColumns.value.length > 0\"\n      ref=\"rightFixedWrapper\"\n      :style=\"[\n        {\n          width: layout.rightFixedWidth.value\n            ? layout.rightFixedWidth.value + 'px'\n            : '',\n          right: layout.scrollY.value\n            ? (border ? layout.gutterWidth : layout.gutterWidth || 0) + 'px'\n            : '',\n        },\n        fixedHeight,\n      ]\"\n      class=\"el-table__fixed-right\"\n    >\n      <div\n        v-if=\"showHeader\"\n        ref=\"rightFixedHeaderWrapper\"\n        class=\"el-table__fixed-header-wrapper\"\n      >\n        <table-header\n          ref=\"rightFixedTableHeader\"\n          :border=\"border\"\n          :store=\"store\"\n          :style=\"{\n            width: bodyWidth,\n          }\"\n          fixed=\"right\"\n        />\n      </div>\n      <div\n        ref=\"rightFixedBodyWrapper\"\n        :style=\"[{ top: layout.headerHeight.value + 'px' }, fixedBodyHeight]\"\n        class=\"el-table__fixed-body-wrapper\"\n      >\n        <table-body\n          :highlight=\"highlightCurrentRow\"\n          :row-class-name=\"rowClassName\"\n          :tooltip-effect=\"tooltipEffect\"\n          :row-style=\"rowStyle\"\n          :store=\"store\"\n          :stripe=\"stripe\"\n          :style=\"{\n            width: bodyWidth,\n          }\"\n          fixed=\"right\"\n        />\n        <div\n          v-if=\"$slots.append\"\n          :style=\"{ height: layout.appendHeight.value + 'px' }\"\n          class=\"el-table__append-gutter\"\n        ></div>\n      </div>\n      <div\n        v-if=\"showSummary\"\n        v-show=\"!isEmpty\"\n        ref=\"rightFixedFooterWrapper\"\n        class=\"el-table__fixed-footer-wrapper\"\n      >\n        <table-footer\n          :border=\"border\"\n          :store=\"store\"\n          :style=\"{\n            width: bodyWidth,\n          }\"\n          :sum-text=\"sumText || t('el.table.sumText')\"\n          :summary-method=\"summaryMethod\"\n          fixed=\"right\"\n        />\n      </div>\n    </div>\n    <div\n      v-if=\"store.states.rightFixedColumns.value.length > 0\"\n      ref=\"rightFixedPatch\"\n      :style=\"{\n        width: layout.scrollY.value ? layout.gutterWidth + 'px' : '0',\n        height: layout.headerHeight.value + 'px',\n      }\"\n      class=\"el-table__fixed-right-patch\"\n    ></div>\n    <div\n      v-show=\"resizeProxyVisible\"\n      ref=\"resizeProxy\"\n      class=\"el-table__column-resize-proxy\"\n    ></div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, getCurrentInstance, computed } from 'vue'\nimport debounce from 'lodash/debounce'\nimport { useLocaleInject } from '@element-ps/hooks'\nimport { createStore } from './store/helper'\nimport TableLayout from './table-layout'\nimport TableHeader from './table-header'\nimport TableBody from './table-body'\nimport TableFooter from './table-footer'\nimport useUtils from './table/utils-helper'\nimport useStyle from './table/style-helper'\nimport defaultProps from './table/defaults'\n\nimport type { Table } from './table/defaults'\n\nlet tableIdSeed = 1\nexport default defineComponent({\n  name: 'PsTable',\n  components: {\n    TableHeader,\n    TableBody,\n    TableFooter,\n  },\n  props: defaultProps,\n  setup(props) {\n    type Row = typeof props.data[number]\n    const { t } = useLocaleInject()\n    const table = getCurrentInstance() as Table<Row>\n    const store = createStore<Row>(table, props)\n    table.store = store\n    const layout = new TableLayout<Row>({\n      store: table.store,\n      table,\n      fit: props.fit,\n      showHeader: props.showHeader,\n    })\n    table.layout = layout\n\n    const isEmpty = computed(() => (store.states.data.value || []).length === 0)\n\n    /**\n     * open functions\n     */\n    const {\n      setCurrentRow,\n      toggleRowSelection,\n      clearSelection,\n      clearFilter,\n      toggleAllSelection,\n      toggleRowExpansion,\n      clearSort,\n      sort,\n    } = useUtils<Row>(store)\n    const {\n      isHidden,\n      renderExpanded,\n      isGroup,\n      tableSize,\n      bodyHeight,\n      emptyBlockStyle,\n      fixedHeight,\n      fixedBodyHeight,\n      resizeProxyVisible,\n      bodyWidth,\n      resizeState,\n      doLayout,\n    } = useStyle<Row>(props, layout, store, table)\n\n    const debouncedUpdateLayout = debounce(doLayout, 50)\n\n    const tableId = `el-table_${tableIdSeed++}`\n    table.tableId = tableId\n    table.state = {\n      isGroup,\n      resizeState,\n      doLayout,\n      debouncedUpdateLayout,\n    }\n    return {\n      layout,\n      store,\n      tableId,\n      tableSize,\n      isHidden,\n      isEmpty,\n      renderExpanded,\n      resizeProxyVisible,\n      resizeState,\n      isGroup,\n      bodyWidth,\n      bodyHeight,\n      emptyBlockStyle,\n      debouncedUpdateLayout,\n      fixedHeight,\n      fixedBodyHeight,\n      setCurrentRow,\n      toggleRowSelection,\n      clearSelection,\n      clearFilter,\n      toggleAllSelection,\n      toggleRowExpansion,\n      clearSort,\n      doLayout,\n      sort,\n      t,\n      context: table,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAqQA,IAAI,cAAc;AAClB,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,MAAM,OAAO;AAEX,UAAM,EAAE,MAAM;AACd,UAAM,QAAQ;AACd,UAAM,QAAQ,YAAiB,OAAO;AACtC,UAAM,QAAQ;AACd,UAAM,SAAS,IAAI,YAAiB;AAAA,MAClC,OAAO,MAAM;AAAA,MACb;AAAA,MACA,KAAK,MAAM;AAAA,MACX,YAAY,MAAM;AAAA;AAEpB,UAAM,SAAS;AAEf,UAAM,UAAU,SAAS,MAAO,OAAM,OAAO,KAAK,SAAS,IAAI,WAAW;AAK1E,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,SAAc;AAClB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,SAAc,OAAO,QAAQ,OAAO;AAExC,UAAM,wBAAwB,SAAS,UAAU;AAEjD,UAAM,UAAU,YAAY;AAC5B,UAAM,UAAU;AAChB,UAAM,QAAQ;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAEF,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA;AAAA;AAAA;;;;"}