@element-plus/nightly 0.0.20211230

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

@@ -0,0 +1,72 @@
+import { defineComponent, getCurrentInstance, watch, onUnmounted, onUpdated, h } from 'vue';
+import { isClient } from '@vueuse/core';
+import { removeClass, addClass } from '../../../../utils/dom.mjs';
+import { hColgroup } from '../h-helper.mjs';
+import useLayoutObserver from '../layout-observer.mjs';
+import { removePopper } from '../util.mjs';
+import useRender from './render-helper.mjs';
+import defaultProps from './defaults.mjs';
+
+var TableBody = defineComponent({
+  name: "ElTableBody",
+  props: defaultProps,
+  setup(props) {
+    const instance = getCurrentInstance();
+    const parent = instance.parent;
+    const { wrappedRowRender, tooltipContent, tooltipTrigger } = useRender(props);
+    const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent);
+    watch(props.store.states.hoverRow, (newVal, oldVal) => {
+      if (!props.store.states.isComplex.value || !isClient)
+        return;
+      let raf = window.requestAnimationFrame;
+      if (!raf) {
+        raf = (fn) => window.setTimeout(fn, 16);
+      }
+      raf(() => {
+        const rows = instance.vnode.el.querySelectorAll(".el-table__row");
+        const oldRow = rows[oldVal];
+        const newRow = rows[newVal];
+        if (oldRow) {
+          removeClass(oldRow, "hover-row");
+        }
+        if (newRow) {
+          addClass(newRow, "hover-row");
+        }
+      });
+    });
+    onUnmounted(() => {
+      var _a;
+      (_a = removePopper) == null ? void 0 : _a();
+    });
+    onUpdated(() => {
+      var _a;
+      (_a = removePopper) == null ? void 0 : _a();
+    });
+    return {
+      onColumnsChange,
+      onScrollableChange,
+      wrappedRowRender,
+      tooltipContent,
+      tooltipTrigger
+    };
+  },
+  render() {
+    const data = this.store.states.data.value || [];
+    return h("table", {
+      class: "el-table__body",
+      cellspacing: "0",
+      cellpadding: "0",
+      border: "0"
+    }, [
+      hColgroup(this.store.states.columns.value),
+      h("tbody", {}, [
+        data.reduce((acc, row) => {
+          return acc.concat(this.wrappedRowRender(row, acc.length));
+        }, [])
+      ])
+    ]);
+  }
+});
+
+export { TableBody as default };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../../../packages/components/table/src/table-body/index.ts"],"sourcesContent":["import {\n  defineComponent,\n  getCurrentInstance,\n  h,\n  watch,\n  onUnmounted,\n  onUpdated,\n} from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { addClass, removeClass } from '@element-plus/utils/dom'\nimport { hColgroup } from '../h-helper'\nimport useLayoutObserver from '../layout-observer'\nimport { removePopper } from '../util'\nimport useRender from './render-helper'\nimport defaultProps from './defaults'\n\nimport type { VNode } from 'vue'\nimport type { DefaultRow, Table } from '../table/defaults'\n\nexport default defineComponent({\n  name: 'ElTableBody',\n  props: defaultProps,\n  setup(props) {\n    const instance = getCurrentInstance()\n    const parent = instance.parent as Table<DefaultRow>\n\n    const { wrappedRowRender, tooltipContent, tooltipTrigger } =\n      useRender(props)\n    const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent)\n\n    watch(props.store.states.hoverRow, (newVal: any, oldVal: any) => {\n      if (!props.store.states.isComplex.value || !isClient) return\n      let raf = window.requestAnimationFrame\n      if (!raf) {\n        raf = (fn) => window.setTimeout(fn, 16)\n      }\n      raf(() => {\n        const rows = instance.vnode.el.querySelectorAll('.el-table__row')\n        const oldRow = rows[oldVal]\n        const newRow = rows[newVal]\n        if (oldRow) {\n          removeClass(oldRow, 'hover-row')\n        }\n        if (newRow) {\n          addClass(newRow, 'hover-row')\n        }\n      })\n    })\n\n    onUnmounted(() => {\n      removePopper?.()\n    })\n    onUpdated(() => {\n      removePopper?.()\n    })\n\n    return {\n      onColumnsChange,\n      onScrollableChange,\n      wrappedRowRender,\n      tooltipContent,\n      tooltipTrigger,\n    }\n  },\n  render() {\n    const data = this.store.states.data.value || []\n    return h(\n      'table',\n      {\n        class: 'el-table__body',\n        cellspacing: '0',\n        cellpadding: '0',\n        border: '0',\n      },\n      [\n        hColgroup(this.store.states.columns.value),\n        h('tbody', {}, [\n          data.reduce((acc: VNode[], row) => {\n            return acc.concat(this.wrappedRowRender(row, acc.length))\n          }, []),\n        ]),\n      ]\n    )\n  },\n})\n"],"names":[],"mappings":"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"}

package/es/components/table/src/table-body/render-helper.d.ts

@@ -0,0 +1,15 @@
+import type { TableBodyProps } from './defaults';
+declare function useRender<T>(props: Partial<TableBodyProps<T>>): {
+    wrappedRowRender: (row: T, $index: number) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[] | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[][];
+    tooltipContent: import("vue").Ref<string>;
+    tooltipTrigger: import("vue").Ref<import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>>;
+};
+export default useRender;

package/es/components/table/src/table-body/render-helper.mjs

@@ -0,0 +1,203 @@
+import { getCurrentInstance, computed, h } from 'vue';
+import { getRowIdentity } from '../util.mjs';
+import useEvents from './events-helper.mjs';
+import useStyles from './styles-helper.mjs';
+
+function useRender(props) {
+  const instance = getCurrentInstance();
+  const parent = instance.parent;
+  const {
+    handleDoubleClick,
+    handleClick,
+    handleContextMenu,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleCellMouseEnter,
+    handleCellMouseLeave,
+    tooltipContent,
+    tooltipTrigger
+  } = useEvents(props);
+  const {
+    getRowStyle,
+    getRowClass,
+    getCellStyle,
+    getCellClass,
+    getSpan,
+    getColspanRealWidth
+  } = useStyles(props);
+  const firstDefaultColumnIndex = computed(() => {
+    return props.store.states.columns.value.findIndex(({ type }) => type === "default");
+  });
+  const getKeyOfRow = (row, index) => {
+    const rowKey = parent.props.rowKey;
+    if (rowKey) {
+      return getRowIdentity(row, rowKey);
+    }
+    return index;
+  };
+  const rowRender = (row, $index, treeRowData) => {
+    const { tooltipEffect, store } = props;
+    const { indent, columns } = store.states;
+    const rowClasses = getRowClass(row, $index);
+    let display = true;
+    if (treeRowData) {
+      rowClasses.push(`el-table__row--level-${treeRowData.level}`);
+      display = treeRowData.display;
+    }
+    const displayStyle = display ? null : {
+      display: "none"
+    };
+    return h("tr", {
+      style: [displayStyle, getRowStyle(row, $index)],
+      class: rowClasses,
+      key: getKeyOfRow(row, $index),
+      onDblclick: ($event) => handleDoubleClick($event, row),
+      onClick: ($event) => handleClick($event, row),
+      onContextmenu: ($event) => handleContextMenu($event, row),
+      onMouseenter: () => handleMouseEnter($index),
+      onMouseleave: handleMouseLeave
+    }, columns.value.map((column, cellIndex) => {
+      const { rowspan, colspan } = getSpan(row, column, $index, cellIndex);
+      if (!rowspan || !colspan) {
+        return null;
+      }
+      const columnData = { ...column };
+      columnData.realWidth = getColspanRealWidth(columns.value, colspan, cellIndex);
+      const data = {
+        store: props.store,
+        _self: props.context || parent,
+        column: columnData,
+        row,
+        $index
+      };
+      if (cellIndex === firstDefaultColumnIndex.value && treeRowData) {
+        data.treeNode = {
+          indent: treeRowData.level * indent.value,
+          level: treeRowData.level
+        };
+        if (typeof treeRowData.expanded === "boolean") {
+          data.treeNode.expanded = treeRowData.expanded;
+          if ("loading" in treeRowData) {
+            data.treeNode.loading = treeRowData.loading;
+          }
+          if ("noLazyChildren" in treeRowData) {
+            data.treeNode.noLazyChildren = treeRowData.noLazyChildren;
+          }
+        }
+      }
+      const baseKey = `${$index},${cellIndex}`;
+      const patchKey = columnData.columnKey || columnData.rawColumnKey || "";
+      const tdChildren = cellChildren(cellIndex, column, data);
+      return h("td", {
+        style: getCellStyle($index, cellIndex, row, column),
+        class: getCellClass($index, cellIndex, row, column),
+        key: `${patchKey}${baseKey}`,
+        rowspan,
+        colspan,
+        onMouseenter: ($event) => handleCellMouseEnter($event, { ...row, tooltipEffect }),
+        onMouseleave: handleCellMouseLeave
+      }, [tdChildren]);
+    }));
+  };
+  const cellChildren = (cellIndex, column, data) => {
+    return column.renderCell(data);
+  };
+  const wrappedRowRender = (row, $index) => {
+    const store = props.store;
+    const { isRowExpanded, assertRowKey } = store;
+    const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } = store.states;
+    const hasExpandColumn = store.states.columns.value.some(({ type }) => type === "expand");
+    if (hasExpandColumn && isRowExpanded(row)) {
+      const renderExpanded = parent.renderExpanded;
+      const tr = rowRender(row, $index, void 0);
+      if (!renderExpanded) {
+        console.error("[Element Error]renderExpanded is required.");
+        return tr;
+      }
+      return [
+        [
+          tr,
+          h("tr", {
+            key: `expanded-row__${tr.key}`
+          }, [
+            h("td", {
+              colspan: store.states.columns.value.length,
+              class: "el-table__cell el-table__expanded-cell"
+            }, [renderExpanded({ row, $index, store })])
+          ])
+        ]
+      ];
+    } else if (Object.keys(treeData.value).length) {
+      assertRowKey();
+      const key = getRowIdentity(row, rowKey.value);
+      let cur = treeData.value[key];
+      let treeRowData = null;
+      if (cur) {
+        treeRowData = {
+          expanded: cur.expanded,
+          level: cur.level,
+          display: true
+        };
+        if (typeof cur.lazy === "boolean") {
+          if (typeof cur.loaded === "boolean" && cur.loaded) {
+            treeRowData.noLazyChildren = !(cur.children && cur.children.length);
+          }
+          treeRowData.loading = cur.loading;
+        }
+      }
+      const tmp = [rowRender(row, $index, treeRowData)];
+      if (cur) {
+        let i = 0;
+        const traverse = (children, parent2) => {
+          if (!(children && children.length && parent2))
+            return;
+          children.forEach((node) => {
+            const innerTreeRowData = {
+              display: parent2.display && parent2.expanded,
+              level: parent2.level + 1,
+              expanded: false,
+              noLazyChildren: false,
+              loading: false
+            };
+            const childKey = getRowIdentity(node, rowKey.value);
+            if (childKey === void 0 || childKey === null) {
+              throw new Error("For nested data item, row-key is required.");
+            }
+            cur = { ...treeData.value[childKey] };
+            if (cur) {
+              innerTreeRowData.expanded = cur.expanded;
+              cur.level = cur.level || innerTreeRowData.level;
+              cur.display = !!(cur.expanded && innerTreeRowData.display);
+              if (typeof cur.lazy === "boolean") {
+                if (typeof cur.loaded === "boolean" && cur.loaded) {
+                  innerTreeRowData.noLazyChildren = !(cur.children && cur.children.length);
+                }
+                innerTreeRowData.loading = cur.loading;
+              }
+            }
+            i++;
+            tmp.push(rowRender(node, $index + i, innerTreeRowData));
+            if (cur) {
+              const nodes2 = lazyTreeNodeMap.value[childKey] || node[childrenColumnName.value];
+              traverse(nodes2, cur);
+            }
+          });
+        };
+        cur.display = true;
+        const nodes = lazyTreeNodeMap.value[key] || row[childrenColumnName.value];
+        traverse(nodes, cur);
+      }
+      return tmp;
+    } else {
+      return rowRender(row, $index, void 0);
+    }
+  };
+  return {
+    wrappedRowRender,
+    tooltipContent,
+    tooltipTrigger
+  };
+}
+
+export { useRender as default };
+//# sourceMappingURL=render-helper.mjs.map

package/es/components/table/src/table-body/render-helper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-helper.mjs","sources":["../../../../../../../packages/components/table/src/table-body/render-helper.ts"],"sourcesContent":["import { h, getCurrentInstance, computed } from 'vue'\nimport { getRowIdentity } from '../util'\nimport useEvents from './events-helper'\nimport useStyles from './styles-helper'\n\nimport type { TableBodyProps } from './defaults'\nimport type {\n  RenderRowData,\n  Table,\n  TreeNode,\n  TableProps,\n} from '../table/defaults'\n\nfunction useRender<T>(props: Partial<TableBodyProps<T>>) {\n  const instance = getCurrentInstance()\n  const parent = instance.parent as Table<T>\n  const {\n    handleDoubleClick,\n    handleClick,\n    handleContextMenu,\n    handleMouseEnter,\n    handleMouseLeave,\n    handleCellMouseEnter,\n    handleCellMouseLeave,\n    tooltipContent,\n    tooltipTrigger,\n  } = useEvents(props)\n  const {\n    getRowStyle,\n    getRowClass,\n    getCellStyle,\n    getCellClass,\n    getSpan,\n    getColspanRealWidth,\n  } = useStyles(props)\n  const firstDefaultColumnIndex = computed(() => {\n    return props.store.states.columns.value.findIndex(\n      ({ type }) => type === 'default'\n    )\n  })\n  const getKeyOfRow = (row: T, index: number) => {\n    const rowKey = (parent.props as Partial<TableProps<T>>).rowKey\n    if (rowKey) {\n      return getRowIdentity(row, rowKey)\n    }\n    return index\n  }\n  const rowRender = (row: T, $index: number, treeRowData?: TreeNode) => {\n    const { tooltipEffect, store } = props\n    const { indent, columns } = store.states\n    const rowClasses = getRowClass(row, $index)\n    let display = true\n    if (treeRowData) {\n      rowClasses.push(`el-table__row--level-${treeRowData.level}`)\n      display = treeRowData.display\n    }\n    const displayStyle = display\n      ? null\n      : {\n          display: 'none',\n        }\n    return h(\n      'tr',\n      {\n        style: [displayStyle, getRowStyle(row, $index)],\n        class: rowClasses,\n        key: getKeyOfRow(row, $index),\n        onDblclick: ($event) => handleDoubleClick($event, row),\n        onClick: ($event) => handleClick($event, row),\n        onContextmenu: ($event) => handleContextMenu($event, row),\n        onMouseenter: () => handleMouseEnter($index),\n        onMouseleave: handleMouseLeave,\n      },\n      columns.value.map((column, cellIndex) => {\n        const { rowspan, colspan } = getSpan(row, column, $index, cellIndex)\n        if (!rowspan || !colspan) {\n          return null\n        }\n        const columnData = { ...column }\n        columnData.realWidth = getColspanRealWidth(\n          columns.value,\n          colspan,\n          cellIndex\n        )\n        const data: RenderRowData<T> = {\n          store: props.store,\n          _self: props.context || parent,\n          column: columnData,\n          row,\n          $index,\n        }\n        if (cellIndex === firstDefaultColumnIndex.value && treeRowData) {\n          data.treeNode = {\n            indent: treeRowData.level * indent.value,\n            level: treeRowData.level,\n          }\n          if (typeof treeRowData.expanded === 'boolean') {\n            data.treeNode.expanded = treeRowData.expanded\n            // 表明是懒加载\n            if ('loading' in treeRowData) {\n              data.treeNode.loading = treeRowData.loading\n            }\n            if ('noLazyChildren' in treeRowData) {\n              data.treeNode.noLazyChildren = treeRowData.noLazyChildren\n            }\n          }\n        }\n        const baseKey = `${$index},${cellIndex}`\n        const patchKey = columnData.columnKey || columnData.rawColumnKey || ''\n        const tdChildren = cellChildren(cellIndex, column, data)\n        return h(\n          'td',\n          {\n            style: getCellStyle($index, cellIndex, row, column),\n            class: getCellClass($index, cellIndex, row, column),\n            key: `${patchKey}${baseKey}`,\n            rowspan,\n            colspan,\n            onMouseenter: ($event) =>\n              handleCellMouseEnter($event, { ...row, tooltipEffect }),\n            onMouseleave: handleCellMouseLeave,\n          },\n          [tdChildren]\n        )\n      })\n    )\n  }\n  const cellChildren = (cellIndex, column, data) => {\n    return column.renderCell(data)\n  }\n  const wrappedRowRender = (row: T, $index: number) => {\n    const store = props.store\n    const { isRowExpanded, assertRowKey } = store\n    const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } =\n      store.states\n    const hasExpandColumn = store.states.columns.value.some(\n      ({ type }) => type === 'expand'\n    )\n    if (hasExpandColumn && isRowExpanded(row)) {\n      const renderExpanded = parent.renderExpanded\n      const tr = rowRender(row, $index, undefined)\n      if (!renderExpanded) {\n        console.error('[Element Error]renderExpanded is required.')\n        return tr\n      }\n      // 使用二维数组，避免修改 $index\n      // Use a two dimensional array avoid modifying $index\n      return [\n        [\n          tr,\n          h(\n            'tr',\n            {\n              key: `expanded-row__${tr.key as string}`,\n            },\n            [\n              h(\n                'td',\n                {\n                  colspan: store.states.columns.value.length,\n                  class: 'el-table__cell el-table__expanded-cell',\n                },\n                [renderExpanded({ row, $index, store })]\n              ),\n            ]\n          ),\n        ],\n      ]\n    } else if (Object.keys(treeData.value).length) {\n      assertRowKey()\n      // TreeTable 时，rowKey 必须由用户设定，不使用 getKeyOfRow 计算\n      // 在调用 rowRender 函数时，仍然会计算 rowKey，不太好的操作\n      const key = getRowIdentity(row, rowKey.value)\n      let cur = treeData.value[key]\n      let treeRowData = null\n      if (cur) {\n        treeRowData = {\n          expanded: cur.expanded,\n          level: cur.level,\n          display: true,\n        }\n        if (typeof cur.lazy === 'boolean') {\n          if (typeof cur.loaded === 'boolean' && cur.loaded) {\n            treeRowData.noLazyChildren = !(cur.children && cur.children.length)\n          }\n          treeRowData.loading = cur.loading\n        }\n      }\n      const tmp = [rowRender(row, $index, treeRowData)]\n      // 渲染嵌套数据\n      if (cur) {\n        // currentRow 记录的是 index，所以还需主动增加 TreeTable 的 index\n        let i = 0\n        const traverse = (children, parent) => {\n          if (!(children && children.length && parent)) return\n          children.forEach((node) => {\n            // 父节点的 display 状态影响子节点的显示状态\n            const innerTreeRowData = {\n              display: parent.display && parent.expanded,\n              level: parent.level + 1,\n              expanded: false,\n              noLazyChildren: false,\n              loading: false,\n            }\n            const childKey = getRowIdentity(node, rowKey.value)\n            if (childKey === undefined || childKey === null) {\n              throw new Error('For nested data item, row-key is required.')\n            }\n            cur = { ...treeData.value[childKey] }\n            // 对于当前节点，分成有无子节点两种情况。\n            // 如果包含子节点的，设置 expanded 属性。\n            // 对于它子节点的 display 属性由它本身的 expanded 与 display 共同决定。\n            if (cur) {\n              innerTreeRowData.expanded = cur.expanded\n              // 懒加载的某些节点，level 未知\n              cur.level = cur.level || innerTreeRowData.level\n              cur.display = !!(cur.expanded && innerTreeRowData.display)\n              if (typeof cur.lazy === 'boolean') {\n                if (typeof cur.loaded === 'boolean' && cur.loaded) {\n                  innerTreeRowData.noLazyChildren = !(\n                    cur.children && cur.children.length\n                  )\n                }\n                innerTreeRowData.loading = cur.loading\n              }\n            }\n            i++\n            tmp.push(rowRender(node, $index + i, innerTreeRowData))\n            if (cur) {\n              const nodes =\n                lazyTreeNodeMap.value[childKey] ||\n                node[childrenColumnName.value]\n              traverse(nodes, cur)\n            }\n          })\n        }\n        // 对于 root 节点，display 一定为 true\n        cur.display = true\n        const nodes =\n          lazyTreeNodeMap.value[key] || row[childrenColumnName.value]\n        traverse(nodes, cur)\n      }\n      return tmp\n    } else {\n      return rowRender(row, $index, undefined)\n    }\n  }\n\n  return {\n    wrappedRowRender,\n    tooltipContent,\n    tooltipTrigger,\n  }\n}\n\nexport default useRender\n"],"names":[],"mappings":"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"}

package/es/components/table/src/table-body/styles-helper.d.ts

@@ -0,0 +1,15 @@
+import type { TableColumnCtx } from '../table-column/defaults';
+import type { TableBodyProps } from './defaults';
+declare function useStyles<T>(props: Partial<TableBodyProps<T>>): {
+    getRowStyle: (row: T, rowIndex: number) => any;
+    getRowClass: (row: T, rowIndex: number) => string[];
+    getCellStyle: (rowIndex: number, columnIndex: number, row: T, column: TableColumnCtx<T>) => any;
+    getCellClass: (rowIndex: number, columnIndex: number, row: T, column: TableColumnCtx<T>) => string;
+    getSpan: (row: T, column: TableColumnCtx<T>, rowIndex: number, columnIndex: number) => {
+        rowspan: number;
+        colspan: number;
+    };
+    getColspanRealWidth: (columns: TableColumnCtx<T>[], colspan: number, index: number) => number;
+    isColumnHidden: (index: any) => boolean;
+};
+export default useStyles;

package/es/components/table/src/table-body/styles-helper.mjs

@@ -0,0 +1,118 @@
+import { getCurrentInstance } from 'vue';
+
+function useStyles(props) {
+  const instance = getCurrentInstance();
+  const parent = instance.parent;
+  const isColumnHidden = (index) => {
+    if (props.fixed === "left") {
+      return index >= props.store.states.fixedLeafColumnsLength.value;
+    } else if (props.fixed === "right") {
+      return index < props.store.states.columns.value.length - props.store.states.rightFixedLeafColumnsLength.value;
+    } else {
+      return index < props.store.states.fixedLeafColumnsLength.value || index >= props.store.states.columns.value.length - props.store.states.rightFixedLeafColumnsLength.value;
+    }
+  };
+  const getRowStyle = (row, rowIndex) => {
+    const rowStyle = parent.props.rowStyle;
+    if (typeof rowStyle === "function") {
+      return rowStyle.call(null, {
+        row,
+        rowIndex
+      });
+    }
+    return rowStyle || null;
+  };
+  const getRowClass = (row, rowIndex) => {
+    const classes = ["el-table__row"];
+    if (parent.props.highlightCurrentRow && row === props.store.states.currentRow.value) {
+      classes.push("current-row");
+    }
+    if (props.stripe && rowIndex % 2 === 1) {
+      classes.push("el-table__row--striped");
+    }
+    const rowClassName = parent.props.rowClassName;
+    if (typeof rowClassName === "string") {
+      classes.push(rowClassName);
+    } else if (typeof rowClassName === "function") {
+      classes.push(rowClassName.call(null, {
+        row,
+        rowIndex
+      }));
+    }
+    if (props.store.states.expandRows.value.indexOf(row) > -1) {
+      classes.push("expanded");
+    }
+    return classes;
+  };
+  const getCellStyle = (rowIndex, columnIndex, row, column) => {
+    const cellStyle = parent.props.cellStyle;
+    if (typeof cellStyle === "function") {
+      return cellStyle.call(null, {
+        rowIndex,
+        columnIndex,
+        row,
+        column
+      });
+    }
+    return cellStyle;
+  };
+  const getCellClass = (rowIndex, columnIndex, row, column) => {
+    const classes = [column.id, column.align, column.className];
+    if (isColumnHidden(columnIndex)) {
+      classes.push("is-hidden");
+    }
+    const cellClassName = parent.props.cellClassName;
+    if (typeof cellClassName === "string") {
+      classes.push(cellClassName);
+    } else if (typeof cellClassName === "function") {
+      classes.push(cellClassName.call(null, {
+        rowIndex,
+        columnIndex,
+        row,
+        column
+      }));
+    }
+    classes.push("el-table__cell");
+    return classes.join(" ");
+  };
+  const getSpan = (row, column, rowIndex, columnIndex) => {
+    let rowspan = 1;
+    let colspan = 1;
+    const fn = parent.props.spanMethod;
+    if (typeof fn === "function") {
+      const result = fn({
+        row,
+        column,
+        rowIndex,
+        columnIndex
+      });
+      if (Array.isArray(result)) {
+        rowspan = result[0];
+        colspan = result[1];
+      } else if (typeof result === "object") {
+        rowspan = result.rowspan;
+        colspan = result.colspan;
+      }
+    }
+    return { rowspan, colspan };
+  };
+  const getColspanRealWidth = (columns, colspan, index) => {
+    if (colspan < 1) {
+      return columns[index].realWidth;
+    }
+    const widthArr = columns.map(({ realWidth, width }) => realWidth || width).slice(index, index + colspan);
+    return Number(widthArr.reduce((acc, width) => Number(acc) + Number(width), -1));
+  };
+  return {
+    getRowStyle,
+    getRowClass,
+    getCellStyle,
+    getCellClass,
+    getSpan,
+    getColspanRealWidth,
+    isColumnHidden
+  };
+}
+
+export { useStyles as default };
+//# sourceMappingURL=styles-helper.mjs.map

package/es/components/table/src/table-body/styles-helper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles-helper.mjs","sources":["../../../../../../../packages/components/table/src/table-body/styles-helper.ts"],"sourcesContent":["import { getCurrentInstance } from 'vue'\n\nimport type { TableColumnCtx } from '../table-column/defaults'\nimport type { Table } from '../table/defaults'\nimport type { TableBodyProps } from './defaults'\n\nfunction useStyles<T>(props: Partial<TableBodyProps<T>>) {\n  const instance = getCurrentInstance()\n  const parent = instance.parent as Table<T>\n  const isColumnHidden = (index) => {\n    if (props.fixed === 'left') {\n      return index >= props.store.states.fixedLeafColumnsLength.value\n    } else if (props.fixed === 'right') {\n      return (\n        index <\n        props.store.states.columns.value.length -\n          props.store.states.rightFixedLeafColumnsLength.value\n      )\n    } else {\n      return (\n        index < props.store.states.fixedLeafColumnsLength.value ||\n        index >=\n          props.store.states.columns.value.length -\n            props.store.states.rightFixedLeafColumnsLength.value\n      )\n    }\n  }\n  const getRowStyle = (row: T, rowIndex: number) => {\n    const rowStyle = parent.props.rowStyle\n    if (typeof rowStyle === 'function') {\n      return rowStyle.call(null, {\n        row,\n        rowIndex,\n      })\n    }\n    return rowStyle || null\n  }\n\n  const getRowClass = (row: T, rowIndex: number) => {\n    const classes = ['el-table__row']\n    if (\n      parent.props.highlightCurrentRow &&\n      row === props.store.states.currentRow.value\n    ) {\n      classes.push('current-row')\n    }\n\n    if (props.stripe && rowIndex % 2 === 1) {\n      classes.push('el-table__row--striped')\n    }\n    const rowClassName = parent.props.rowClassName\n    if (typeof rowClassName === 'string') {\n      classes.push(rowClassName)\n    } else if (typeof rowClassName === 'function') {\n      classes.push(\n        rowClassName.call(null, {\n          row,\n          rowIndex,\n        })\n      )\n    }\n\n    if (props.store.states.expandRows.value.indexOf(row) > -1) {\n      classes.push('expanded')\n    }\n\n    return classes\n  }\n\n  const getCellStyle = (\n    rowIndex: number,\n    columnIndex: number,\n    row: T,\n    column: TableColumnCtx<T>\n  ) => {\n    const cellStyle = parent.props.cellStyle\n    if (typeof cellStyle === 'function') {\n      return cellStyle.call(null, {\n        rowIndex,\n        columnIndex,\n        row,\n        column,\n      })\n    }\n    return cellStyle\n  }\n\n  const getCellClass = (\n    rowIndex: number,\n    columnIndex: number,\n    row: T,\n    column: TableColumnCtx<T>\n  ) => {\n    const classes = [column.id, column.align, column.className]\n\n    if (isColumnHidden(columnIndex)) {\n      classes.push('is-hidden')\n    }\n\n    const cellClassName = parent.props.cellClassName\n    if (typeof cellClassName === 'string') {\n      classes.push(cellClassName)\n    } else if (typeof cellClassName === 'function') {\n      classes.push(\n        cellClassName.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  const getSpan = (\n    row: T,\n    column: TableColumnCtx<T>,\n    rowIndex: number,\n    columnIndex: number\n  ) => {\n    let rowspan = 1\n    let colspan = 1\n    const fn = parent.props.spanMethod\n    if (typeof fn === 'function') {\n      const result = fn({\n        row,\n        column,\n        rowIndex,\n        columnIndex,\n      })\n      if (Array.isArray(result)) {\n        rowspan = result[0]\n        colspan = result[1]\n      } else if (typeof result === 'object') {\n        rowspan = result.rowspan\n        colspan = result.colspan\n      }\n    }\n    return { rowspan, colspan }\n  }\n  const getColspanRealWidth = (\n    columns: TableColumnCtx<T>[],\n    colspan: number,\n    index: number\n  ): number => {\n    if (colspan < 1) {\n      return columns[index].realWidth\n    }\n    const widthArr = columns\n      .map(({ realWidth, width }) => realWidth || width)\n      .slice(index, index + colspan)\n    return Number(\n      widthArr.reduce((acc, width) => Number(acc) + Number(width), -1)\n    )\n  }\n\n  return {\n    getRowStyle,\n    getRowClass,\n    getCellStyle,\n    getCellClass,\n    getSpan,\n    getColspanRealWidth,\n    isColumnHidden,\n  }\n}\n\nexport default useStyles\n"],"names":[],"mappings":"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"}

package/es/components/table/src/table-column/defaults.d.ts

@@ -0,0 +1,125 @@
+import type { PropType, ComponentInternalInstance, Ref, VNode } from 'vue';
+import type { Table } from '../table/defaults';
+declare type CI<T> = {
+    column: TableColumnCtx<T>;
+    $index: number;
+};
+declare type Filters = {
+    text: string;
+    value: string;
+}[];
+declare type FilterMethods<T> = (value: any, row: T, column: TableColumnCtx<T>) => void;
+declare type ValueOf<T> = T[keyof T];
+interface TableColumnCtx<T> {
+    id: string;
+    realWidth: number;
+    type: string;
+    label: string;
+    className: string;
+    labelClassName: string;
+    property: string;
+    prop: string;
+    width: string | number;
+    minWidth: string | number;
+    renderHeader: (data: CI<T>) => VNode;
+    sortable: boolean | string;
+    sortMethod: (a: T, b: T) => number;
+    sortBy: string | ((row: T, index: number) => string) | string[];
+    resizable: boolean;
+    columnKey: string;
+    rawColumnKey: string;
+    align: string;
+    headerAlign: string;
+    showTooltipWhenOverflow: boolean;
+    showOverflowTooltip: boolean;
+    fixed: boolean | string;
+    formatter: (row: T, column: TableColumnCtx<T>, cellValue: any, index: number) => VNode | string;
+    selectable: (row: T, index: number) => boolean;
+    reserveSelection: boolean;
+    filterMethod: FilterMethods<T>;
+    filteredValue: string[];
+    filters: Filters;
+    filterPlacement: string;
+    filterMultiple: boolean;
+    index: number | ((index: number) => number);
+    sortOrders: ('ascending' | 'descending' | null)[];
+    renderCell: (data: any) => void;
+    colSpan: number;
+    rowSpan: number;
+    children: TableColumnCtx<T>[];
+    level: number;
+    filterable: boolean | FilterMethods<T> | Filters;
+    order: string;
+    isColumnGroup: boolean;
+    columns: TableColumnCtx<T>[];
+    getColumnIndex: () => number;
+    no: number;
+    filterOpened?: boolean;
+}
+interface TableColumn<T> extends ComponentInternalInstance {
+    vnode: {
+        vParent: TableColumn<T> | Table<T>;
+    } & VNode;
+    vParent: TableColumn<T> | Table<T>;
+    columnId: string;
+    columnConfig: Ref<Partial<TableColumnCtx<T>>>;
+}
+export type { Filters, FilterMethods, TableColumnCtx, TableColumn, ValueOf };
+declare const _default: {
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: StringConstructor;
+    className: StringConstructor;
+    labelClassName: StringConstructor;
+    property: StringConstructor;
+    prop: StringConstructor;
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    minWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    renderHeader: PropType<(data: CI<any>) => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>>;
+    sortable: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: boolean;
+    };
+    sortMethod: PropType<(a: any, b: any) => number>;
+    sortBy: PropType<string | string[] | ((row: any, index: number) => string)>;
+    resizable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    columnKey: StringConstructor;
+    align: StringConstructor;
+    headerAlign: StringConstructor;
+    showTooltipWhenOverflow: BooleanConstructor;
+    showOverflowTooltip: BooleanConstructor;
+    fixed: (BooleanConstructor | StringConstructor)[];
+    formatter: PropType<(row: any, column: TableColumnCtx<any>, cellValue: any, index: number) => string | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>>;
+    selectable: PropType<(row: any, index: number) => boolean>;
+    reserveSelection: BooleanConstructor;
+    filterMethod: PropType<FilterMethods<any>>;
+    filteredValue: PropType<string[]>;
+    filters: PropType<Filters>;
+    filterPlacement: StringConstructor;
+    filterMultiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    index: PropType<number | ((index: number) => number)>;
+    sortOrders: {
+        type: PropType<("ascending" | "descending" | null)[]>;
+        default: () => (string | null)[];
+        validator: (val: TableColumnCtx<unknown>['sortOrders']) => boolean;
+    };
+};
+export default _default;