@element-plus/nightly 0.0.20211230

package/es/components/table/src/table-header/index.mjs

@@ -0,0 +1,162 @@
+import { defineComponent, getCurrentInstance, ref, computed, onMounted, nextTick, h } from 'vue';
+import { ElCheckbox } from '../../../checkbox/index.mjs';
+import '../filter-panel.mjs';
+import useLayoutObserver from '../layout-observer.mjs';
+import { hColgroup } from '../h-helper.mjs';
+import useEvent from './event-helper.mjs';
+import useStyle from './style.helper.mjs';
+import useUtils from './utils-helper.mjs';
+import script from '../filter-panel.vue_vue_type_script_lang.mjs';
+
+var TableHeader = defineComponent({
+  name: "ElTableHeader",
+  components: {
+    ElCheckbox
+  },
+  props: {
+    fixed: {
+      type: String,
+      default: ""
+    },
+    store: {
+      required: true,
+      type: Object
+    },
+    border: Boolean,
+    defaultSort: {
+      type: Object,
+      default: () => {
+        return {
+          prop: "",
+          order: ""
+        };
+      }
+    }
+  },
+  setup(props, { emit }) {
+    const instance = getCurrentInstance();
+    const parent = instance.parent;
+    const storeData = parent.store.states;
+    const filterPanels = ref({});
+    const { tableLayout, onColumnsChange, onScrollableChange } = useLayoutObserver(parent);
+    const hasGutter = computed(() => {
+      return !props.fixed && tableLayout.gutterWidth;
+    });
+    onMounted(() => {
+      nextTick(() => {
+        const { prop, order } = props.defaultSort;
+        const init = true;
+        parent.store.commit("sort", { prop, order, init });
+      });
+    });
+    const {
+      handleHeaderClick,
+      handleHeaderContextMenu,
+      handleMouseDown,
+      handleMouseMove,
+      handleMouseOut,
+      handleSortClick,
+      handleFilterClick
+    } = useEvent(props, emit);
+    const {
+      getHeaderRowStyle,
+      getHeaderRowClass,
+      getHeaderCellStyle,
+      getHeaderCellClass
+    } = useStyle(props);
+    const { isGroup, toggleAllSelection, columnRows } = useUtils(props);
+    instance.state = {
+      onColumnsChange,
+      onScrollableChange
+    };
+    instance.filterPanels = filterPanels;
+    return {
+      columns: storeData.columns,
+      filterPanels,
+      hasGutter,
+      onColumnsChange,
+      onScrollableChange,
+      columnRows,
+      getHeaderRowClass,
+      getHeaderRowStyle,
+      getHeaderCellClass,
+      getHeaderCellStyle,
+      handleHeaderClick,
+      handleHeaderContextMenu,
+      handleMouseDown,
+      handleMouseMove,
+      handleMouseOut,
+      handleSortClick,
+      handleFilterClick,
+      isGroup,
+      toggleAllSelection
+    };
+  },
+  render() {
+    return h("table", {
+      border: "0",
+      cellpadding: "0",
+      cellspacing: "0",
+      class: "el-table__header"
+    }, [
+      hColgroup(this.columns, this.hasGutter),
+      h("thead", {
+        class: { "is-group": this.isGroup, "has-gutter": this.hasGutter }
+      }, this.columnRows.map((subColumns, rowIndex) => h("tr", {
+        class: this.getHeaderRowClass(rowIndex),
+        key: rowIndex,
+        style: this.getHeaderRowStyle(rowIndex)
+      }, subColumns.map((column, cellIndex) => h("th", {
+        class: this.getHeaderCellClass(rowIndex, cellIndex, subColumns, column),
+        colspan: column.colSpan,
+        key: `${column.id}-thead`,
+        rowSpan: column.rowSpan,
+        style: this.getHeaderCellStyle(rowIndex, cellIndex, subColumns, column),
+        onClick: ($event) => this.handleHeaderClick($event, column),
+        onContextmenu: ($event) => this.handleHeaderContextMenu($event, column),
+        onMousedown: ($event) => this.handleMouseDown($event, column),
+        onMousemove: ($event) => this.handleMouseMove($event, column),
+        onMouseout: this.handleMouseOut
+      }, [
+        h("div", {
+          class: [
+            "cell",
+            column.filteredValue && column.filteredValue.length > 0 ? "highlight" : "",
+            column.labelClassName
+          ]
+        }, [
+          column.renderHeader ? column.renderHeader({
+            column,
+            $index: cellIndex,
+            store: this.store,
+            _self: this.$parent
+          }) : column.label,
+          column.sortable && h("span", {
+            onClick: ($event) => this.handleSortClick($event, column),
+            class: "caret-wrapper"
+          }, [
+            h("i", {
+              onClick: ($event) => this.handleSortClick($event, column, "ascending"),
+              class: "sort-caret ascending"
+            }),
+            h("i", {
+              onClick: ($event) => this.handleSortClick($event, column, "descending"),
+              class: "sort-caret descending"
+            })
+          ]),
+          column.filterable && h(script, {
+            store: this.$parent.store,
+            placement: column.filterPlacement || "bottom-start",
+            column,
+            upDataColumn: (key, value) => {
+              column[key] = value;
+            }
+          })
+        ])
+      ])))))
+    ]);
+  }
+});
+
+export { TableHeader as default };
+//# sourceMappingURL=index.mjs.map

package/es/components/table/src/table-header/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../../../packages/components/table/src/table-header/index.ts"],"sourcesContent":["import {\n  defineComponent,\n  getCurrentInstance,\n  computed,\n  onMounted,\n  nextTick,\n  ref,\n  h,\n} from 'vue'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport FilterPanel from '../filter-panel.vue'\nimport useLayoutObserver from '../layout-observer'\nimport { hColgroup } from '../h-helper'\nimport useEvent from './event-helper'\nimport useStyle from './style.helper'\nimport useUtils from './utils-helper'\n\nimport type { ComponentInternalInstance, Ref, PropType } from 'vue'\nimport type { DefaultRow, Sort, Table } from '../table/defaults'\nimport type { Store } from '../store'\nexport interface TableHeader extends ComponentInternalInstance {\n  state: {\n    onColumnsChange\n    onScrollableChange\n  }\n  filterPanels: Ref<unknown>\n}\nexport interface TableHeaderProps<T> {\n  fixed: string\n  store: Store<T>\n  border: boolean\n  defaultSort: Sort\n}\n\nexport default defineComponent({\n  name: 'ElTableHeader',\n  components: {\n    ElCheckbox,\n  },\n  props: {\n    fixed: {\n      type: String,\n      default: '',\n    },\n    store: {\n      required: true,\n      type: Object as PropType<TableHeaderProps<DefaultRow>['store']>,\n    },\n    border: Boolean,\n    defaultSort: {\n      type: Object as PropType<TableHeaderProps<DefaultRow>['defaultSort']>,\n      default: () => {\n        return {\n          prop: '',\n          order: '',\n        }\n      },\n    },\n  },\n  setup(props, { emit }) {\n    const instance = getCurrentInstance() as TableHeader\n    const parent = instance.parent as Table<unknown>\n    const storeData = parent.store.states\n    const filterPanels = ref({})\n    const { tableLayout, onColumnsChange, onScrollableChange } =\n      useLayoutObserver(parent)\n    const hasGutter = computed(() => {\n      return !props.fixed && tableLayout.gutterWidth\n    })\n    onMounted(() => {\n      nextTick(() => {\n        const { prop, order } = props.defaultSort\n        const init = true\n        parent.store.commit('sort', { prop, order, init })\n      })\n    })\n    const {\n      handleHeaderClick,\n      handleHeaderContextMenu,\n      handleMouseDown,\n      handleMouseMove,\n      handleMouseOut,\n      handleSortClick,\n      handleFilterClick,\n    } = useEvent(props as TableHeaderProps<unknown>, emit)\n    const {\n      getHeaderRowStyle,\n      getHeaderRowClass,\n      getHeaderCellStyle,\n      getHeaderCellClass,\n    } = useStyle(props as TableHeaderProps<unknown>)\n    const { isGroup, toggleAllSelection, columnRows } = useUtils(\n      props as TableHeaderProps<unknown>\n    )\n\n    instance.state = {\n      onColumnsChange,\n      onScrollableChange,\n    }\n    // eslint-disable-next-line\n    instance.filterPanels = filterPanels\n\n    return {\n      columns: storeData.columns,\n      filterPanels,\n      hasGutter,\n      onColumnsChange,\n      onScrollableChange,\n      columnRows,\n      getHeaderRowClass,\n      getHeaderRowStyle,\n      getHeaderCellClass,\n      getHeaderCellStyle,\n      handleHeaderClick,\n      handleHeaderContextMenu,\n      handleMouseDown,\n      handleMouseMove,\n      handleMouseOut,\n      handleSortClick,\n      handleFilterClick,\n      isGroup,\n      toggleAllSelection,\n    }\n  },\n  render() {\n    return h(\n      'table',\n      {\n        border: '0',\n        cellpadding: '0',\n        cellspacing: '0',\n        class: 'el-table__header',\n      },\n      [\n        hColgroup(this.columns, this.hasGutter),\n        h(\n          'thead',\n          {\n            class: { 'is-group': this.isGroup, 'has-gutter': this.hasGutter },\n          },\n          this.columnRows.map((subColumns, rowIndex) =>\n            h(\n              'tr',\n              {\n                class: this.getHeaderRowClass(rowIndex),\n                key: rowIndex,\n                style: this.getHeaderRowStyle(rowIndex),\n              },\n              subColumns.map((column, cellIndex) =>\n                h(\n                  'th',\n                  {\n                    class: this.getHeaderCellClass(\n                      rowIndex,\n                      cellIndex,\n                      subColumns,\n                      column\n                    ),\n                    colspan: column.colSpan,\n                    key: `${column.id}-thead`,\n                    rowSpan: column.rowSpan,\n                    style: this.getHeaderCellStyle(\n                      rowIndex,\n                      cellIndex,\n                      subColumns,\n                      column\n                    ),\n                    onClick: ($event) => this.handleHeaderClick($event, column),\n                    onContextmenu: ($event) =>\n                      this.handleHeaderContextMenu($event, column),\n                    onMousedown: ($event) =>\n                      this.handleMouseDown($event, column),\n                    onMousemove: ($event) =>\n                      this.handleMouseMove($event, column),\n                    onMouseout: this.handleMouseOut,\n                  },\n                  [\n                    h(\n                      'div',\n                      {\n                        class: [\n                          'cell',\n                          column.filteredValue &&\n                          column.filteredValue.length > 0\n                            ? 'highlight'\n                            : '',\n                          column.labelClassName,\n                        ],\n                      },\n                      [\n                        column.renderHeader\n                          ? column.renderHeader({\n                              column,\n                              $index: cellIndex,\n                              store: this.store,\n                              _self: this.$parent,\n                            })\n                          : column.label,\n                        column.sortable &&\n                          h(\n                            'span',\n                            {\n                              onClick: ($event) =>\n                                this.handleSortClick($event, column),\n                              class: 'caret-wrapper',\n                            },\n                            [\n                              h('i', {\n                                onClick: ($event) =>\n                                  this.handleSortClick(\n                                    $event,\n                                    column,\n                                    'ascending'\n                                  ),\n                                class: 'sort-caret ascending',\n                              }),\n                              h('i', {\n                                onClick: ($event) =>\n                                  this.handleSortClick(\n                                    $event,\n                                    column,\n                                    'descending'\n                                  ),\n                                class: 'sort-caret descending',\n                              }),\n                            ]\n                          ),\n                        column.filterable &&\n                          h(FilterPanel, {\n                            store: this.$parent.store,\n                            placement: column.filterPlacement || 'bottom-start',\n                            column,\n                            upDataColumn: (key, value) => {\n                              column[key] = value\n                            },\n                          }),\n                      ]\n                    ),\n                  ]\n                )\n              )\n            )\n          )\n        ),\n      ]\n    )\n  },\n})\n"],"names":["FilterPanel"],"mappings":"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"}

package/es/components/table/src/table-header/style.helper.d.ts

@@ -0,0 +1,9 @@
+import type { TableColumnCtx } from '../table-column/defaults';
+import type { TableHeaderProps } from '.';
+declare function useStyle<T>(props: TableHeaderProps<T>): {
+    getHeaderRowStyle: (rowIndex: number) => any;
+    getHeaderRowClass: (rowIndex: number) => string;
+    getHeaderCellStyle: (rowIndex: number, columnIndex: number, row: T, column: TableColumnCtx<T>) => any;
+    getHeaderCellClass: (rowIndex: number, columnIndex: number, row: T, column: TableColumnCtx<T>) => string;
+};
+export default useStyle;

package/es/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/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":"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"}

package/es/components/table/src/table-header/utils-helper.d.ts

@@ -0,0 +1,8 @@
+import type { TableColumnCtx } from '../table-column/defaults';
+import type { TableHeaderProps } from '.';
+declare function useUtils<T>(props: TableHeaderProps<T>): {
+    isGroup: import("vue").ComputedRef<boolean>;
+    toggleAllSelection: (event: Event) => void;
+    columnRows: import("vue").ComputedRef<TableColumnCtx<unknown>[]>;
+};
+export default useUtils;

package/es/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/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":"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"}

package/es/components/table/src/table-layout.d.ts

@@ -0,0 +1,39 @@
+import type { Ref } from 'vue';
+import type { TableColumnCtx } from './table-column/defaults';
+import type { TableHeader } from './table-header';
+import type { Table } from './table/defaults';
+import type { Store } from './store';
+declare class TableLayout<T> {
+    observers: TableHeader[];
+    table: Table<T>;
+    store: Store<T>;
+    columns: TableColumnCtx<T>[];
+    fit: boolean;
+    showHeader: boolean;
+    height: Ref<null | number>;
+    scrollX: Ref<boolean>;
+    scrollY: Ref<boolean>;
+    bodyWidth: Ref<null | number>;
+    fixedWidth: Ref<null | number>;
+    rightFixedWidth: Ref<null | number>;
+    tableHeight: Ref<null | number>;
+    headerHeight: Ref<null | number>;
+    appendHeight: Ref<null | number>;
+    footerHeight: Ref<null | number>;
+    viewportHeight: Ref<null | number>;
+    bodyHeight: Ref<null | number>;
+    fixedBodyHeight: Ref<null | number>;
+    gutterWidth: number;
+    constructor(options: Record<string, any>);
+    updateScrollY(): boolean;
+    setHeight(value: string | number, prop?: string): any;
+    setMaxHeight(value: string | number): void;
+    getFlattenColumns(): TableColumnCtx<T>[];
+    updateElsHeight(): any;
+    headerDisplayNone(elm: HTMLElement): boolean;
+    updateColumnsWidth(): void;
+    addObserver(observer: TableHeader): void;
+    removeObserver(observer: TableHeader): void;
+    notifyObservers(event: string): void;
+}
+export default TableLayout;

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

@@ -0,0 +1,231 @@
+import { ref, isRef, nextTick } from 'vue';
+import { hasOwn } from '@vue/shared';
+import { isClient } from '@vueuse/core';
+import scrollbarWidth from '../../../utils/scrollbar-width.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 = scrollbarWidth();
+    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 (!isClient)
+      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 (!isClient)
+      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