@element-plus/nightly 0.0.20260515 → 0.0.20260517

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

@@ -1 +1 @@
-{"version":3,"file":"render-helper.mjs","names":["TdWrapper"],"sources":["../../../../../../../packages/components/table/src/table-body/render-helper.ts"],"sourcesContent":["import { computed, h, inject } from 'vue'\nimport { merge } from 'lodash-unified'\nimport { useNamespace } from '@element-plus/hooks'\nimport { isBoolean, isPropAbsent } from '@element-plus/utils'\nimport { getRowIdentity } from '../util'\nimport { TABLE_INJECTION_KEY } from '../tokens'\nimport useEvents from './events-helper'\nimport useStyles from './styles-helper'\nimport TdWrapper from './td-wrapper.vue'\n\nimport type { TableBodyProps } from './defaults'\nimport type {\n  DefaultRow,\n  RenderRowData,\n  Table,\n  TableColumnCtx,\n  TableProps,\n  TreeNode,\n} from '../table/defaults'\nimport type { TreeData } from '../store/tree'\nimport type { TableOverflowTooltipOptions } from '../util'\n\nfunction useRender<T extends DefaultRow>(props: Partial<TableBodyProps<T>>) {\n  const parent = inject(TABLE_INJECTION_KEY) as Table<T>\n  const ns = useNamespace('table')\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\n  let displayIndex = -1\n\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 = (\n    row: T,\n    $index: number,\n    treeRowData?: TreeNode,\n    expanded = false\n  ) => {\n    const { tooltipEffect, tooltipOptions, store } = props\n    const { indent, columns } = store!.states\n    const rowClasses = []\n    let display = true\n    if (treeRowData) {\n      rowClasses.push(ns.em('row', `level-${treeRowData.level}`))\n      display = !!treeRowData.display\n    }\n    if ($index === 0) {\n      displayIndex = -1\n    }\n    if (props.stripe && display) {\n      displayIndex++\n    }\n    rowClasses.push(...getRowClass(row, $index, displayIndex))\n    const displayStyle = display ? null : { display: 'none' }\n    return h(\n      'tr',\n      {\n        style: [displayStyle, getRowStyle(row, $index)],\n        class: rowClasses,\n        key: getKeyOfRow(row, $index),\n        onDblclick: ($event: Event) => handleDoubleClick($event, row),\n        onClick: ($event: Event) => handleClick($event, row),\n        onContextmenu: ($event: 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 = Object.assign({}, column)\n        columnData.realWidth = getColspanRealWidth(\n          columns.value,\n          colspan,\n          cellIndex\n        )\n        const data: RenderRowData<T> = {\n          store: store!,\n          _self: props.context || parent!,\n          column: columnData,\n          row,\n          $index,\n          cellIndex,\n          expanded,\n        }\n        if (cellIndex === firstDefaultColumnIndex.value && treeRowData) {\n          data.treeNode = {\n            indent: treeRowData.level && treeRowData.level * indent.value,\n            level: treeRowData.level,\n          }\n          if (isBoolean(treeRowData.expanded)) {\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 = `${getKeyOfRow(row, $index)},${cellIndex}`\n        const patchKey = columnData.columnKey || columnData.rawColumnKey || ''\n        const mergedTooltipOptions =\n          column.showOverflowTooltip &&\n          merge(\n            {\n              effect: tooltipEffect,\n            },\n            tooltipOptions,\n            column.showOverflowTooltip\n          )\n        return h(\n          TdWrapper,\n          {\n            style: getCellStyle($index, cellIndex, row, column),\n            class: getCellClass($index, cellIndex, row, column, colspan - 1),\n            key: `${patchKey}${baseKey}`,\n            rowspan,\n            colspan,\n            onMouseenter: ($event: MouseEvent) =>\n              handleCellMouseEnter(\n                $event,\n                row,\n                mergedTooltipOptions as TableOverflowTooltipOptions\n              ),\n            onMouseleave: handleCellMouseLeave,\n          },\n          {\n            default: () => cellChildren(cellIndex, column, data),\n          }\n        )\n      })\n    )\n  }\n  const cellChildren = <T extends DefaultRow>(\n    _cellIndex: number,\n    column: TableColumnCtx<T>,\n    data: RenderRowData<T>\n  ) => {\n    return column.renderCell(data)\n  }\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 columns = store.states.columns.value\n    const hasExpandColumn = columns.some(({ type }) => type === 'expand')\n    if (hasExpandColumn) {\n      const expanded = isRowExpanded(row)\n      const tr = rowRender(row, $index, undefined, expanded)\n      const renderExpanded = parent?.renderExpanded\n      if (!renderExpanded) {\n        console.error('[Element Error]renderExpanded is required.')\n        return tr\n      }\n\n      // 在没设置时候避免 h 执行\n      // 非保留模式且未展开时，直接返回\n      // 使用二维数组包装，避免修改 $index\n      const rows = [[tr]]\n\n      // 仅在需要时创建展开行（保留模式或展开状态）\n      if (parent.props.preserveExpandedContent || expanded) {\n        rows[0].push(\n          h(\n            'tr',\n            {\n              key: `expanded-row__${tr.key as string}`,\n              style: { display: expanded ? '' : 'none' },\n            },\n            [\n              h(\n                'td',\n                {\n                  colspan: columns.length,\n                  class: `${ns.e('cell')} ${ns.e('expanded-cell')}`,\n                },\n                [renderExpanded({ row, $index, store, expanded })]\n              ),\n            ]\n          )\n        )\n      }\n\n      return rows\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          noLazyChildren: undefined as boolean | undefined,\n          loading: undefined as boolean | undefined,\n        }\n        if (isBoolean(cur.lazy)) {\n          if (treeRowData && isBoolean(cur.loaded) && 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 ?? undefined)]\n      // 渲染嵌套数据\n      if (cur) {\n        // currentRow 记录的是 index，所以还需主动增加 TreeTable 的 index\n        let i = 0\n        const traverse = (children: T[], parent: TreeData) => {\n          if (!(children && children.length && parent)) return\n          children.forEach((node) => {\n            // 父节点的 display 状态影响子节点的显示状态\n            const innerTreeRowData: Partial<Record<string, any>> = {\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 (isPropAbsent(childKey)) {\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 (isBoolean(cur.lazy)) {\n                if (isBoolean(cur.loaded) && 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"],"mappings":"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"}
+{"version":3,"file":"render-helper.mjs","names":["TdWrapper"],"sources":["../../../../../../../packages/components/table/src/table-body/render-helper.ts"],"sourcesContent":["import { computed, h, inject } from 'vue'\nimport { merge } from 'lodash-unified'\nimport { useNamespace } from '@element-plus/hooks'\nimport { isBoolean, isPropAbsent } from '@element-plus/utils'\nimport { getRowIdentity } from '../util'\nimport { TABLE_INJECTION_KEY } from '../tokens'\nimport useEvents from './events-helper'\nimport useStyles from './styles-helper'\nimport TdWrapper from './td-wrapper.vue'\n\nimport type { TableBodyProps } from './defaults'\nimport type {\n  DefaultRow,\n  RenderRowData,\n  Table,\n  TableColumnCtx,\n  TableProps,\n  TreeNode,\n} from '../table/defaults'\nimport type { TreeData } from '../store/tree'\nimport type { TableOverflowTooltipOptions } from '../util'\n\nfunction useRender<T extends DefaultRow>(props: Partial<TableBodyProps<T>>) {\n  const parent = inject(TABLE_INJECTION_KEY) as Table<T>\n  const ns = useNamespace('table')\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\n  let displayIndex = -1\n\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 = (\n    row: T,\n    $index: number,\n    treeRowData?: TreeNode,\n    expanded = false\n  ) => {\n    const { tooltipEffect, tooltipOptions, store } = props\n    const { indent, columns } = store!.states\n    const rowClasses = []\n    let display = true\n    if (treeRowData) {\n      rowClasses.push(ns.em('row', `level-${treeRowData.level}`))\n      display = !!treeRowData.display\n    }\n    if ($index === 0) {\n      displayIndex = -1\n    }\n    if (props.stripe && display) {\n      displayIndex++\n    }\n    rowClasses.push(...getRowClass(row, $index, displayIndex))\n    const displayStyle = display ? null : { display: 'none' }\n    return h(\n      'tr',\n      {\n        style: [displayStyle, getRowStyle(row, $index)],\n        class: rowClasses,\n        key: getKeyOfRow(row, $index),\n        onDblclick: ($event: MouseEvent) => handleDoubleClick($event, row),\n        onClick: ($event: PointerEvent) => handleClick($event, row),\n        onContextmenu: ($event: PointerEvent) => 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 = Object.assign({}, column)\n        columnData.realWidth = getColspanRealWidth(\n          columns.value,\n          colspan,\n          cellIndex\n        )\n        const data: RenderRowData<T> = {\n          store: store!,\n          _self: props.context || parent!,\n          column: columnData,\n          row,\n          $index,\n          cellIndex,\n          expanded,\n        }\n        if (cellIndex === firstDefaultColumnIndex.value && treeRowData) {\n          data.treeNode = {\n            indent: treeRowData.level && treeRowData.level * indent.value,\n            level: treeRowData.level,\n          }\n          if (isBoolean(treeRowData.expanded)) {\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 = `${getKeyOfRow(row, $index)},${cellIndex}`\n        const patchKey = columnData.columnKey || columnData.rawColumnKey || ''\n        const mergedTooltipOptions =\n          column.showOverflowTooltip &&\n          merge(\n            {\n              effect: tooltipEffect,\n            },\n            tooltipOptions,\n            column.showOverflowTooltip\n          )\n        return h(\n          TdWrapper,\n          {\n            style: getCellStyle($index, cellIndex, row, column),\n            class: getCellClass($index, cellIndex, row, column, colspan - 1),\n            key: `${patchKey}${baseKey}`,\n            rowspan,\n            colspan,\n            onMouseenter: ($event: MouseEvent) =>\n              handleCellMouseEnter(\n                $event,\n                row,\n                mergedTooltipOptions as TableOverflowTooltipOptions\n              ),\n            onMouseleave: handleCellMouseLeave,\n          },\n          {\n            default: () => cellChildren(cellIndex, column, data),\n          }\n        )\n      })\n    )\n  }\n  const cellChildren = <T extends DefaultRow>(\n    _cellIndex: number,\n    column: TableColumnCtx<T>,\n    data: RenderRowData<T>\n  ) => {\n    return column.renderCell(data)\n  }\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 columns = store.states.columns.value\n    const hasExpandColumn = columns.some(({ type }) => type === 'expand')\n    if (hasExpandColumn) {\n      const expanded = isRowExpanded(row)\n      const tr = rowRender(row, $index, undefined, expanded)\n      const renderExpanded = parent?.renderExpanded\n      if (!renderExpanded) {\n        console.error('[Element Error]renderExpanded is required.')\n        return tr\n      }\n\n      // 在没设置时候避免 h 执行\n      // 非保留模式且未展开时，直接返回\n      // 使用二维数组包装，避免修改 $index\n      const rows = [[tr]]\n\n      // 仅在需要时创建展开行（保留模式或展开状态）\n      if (parent.props.preserveExpandedContent || expanded) {\n        rows[0].push(\n          h(\n            'tr',\n            {\n              key: `expanded-row__${tr.key as string}`,\n              style: { display: expanded ? '' : 'none' },\n            },\n            [\n              h(\n                'td',\n                {\n                  colspan: columns.length,\n                  class: `${ns.e('cell')} ${ns.e('expanded-cell')}`,\n                },\n                [renderExpanded({ row, $index, store, expanded })]\n              ),\n            ]\n          )\n        )\n      }\n\n      return rows\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          noLazyChildren: undefined as boolean | undefined,\n          loading: undefined as boolean | undefined,\n        }\n        if (isBoolean(cur.lazy)) {\n          if (treeRowData && isBoolean(cur.loaded) && 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 ?? undefined)]\n      // 渲染嵌套数据\n      if (cur) {\n        // currentRow 记录的是 index，所以还需主动增加 TreeTable 的 index\n        let i = 0\n        const traverse = (children: T[], parent: TreeData) => {\n          if (!(children && children.length && parent)) return\n          children.forEach((node) => {\n            // 父节点的 display 状态影响子节点的显示状态\n            const innerTreeRowData: Partial<Record<string, any>> = {\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 (isPropAbsent(childKey)) {\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 (isBoolean(cur.lazy)) {\n                if (isBoolean(cur.loaded) && 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"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { TableOverflowTooltipFormatter, TableOverflowTooltipOptions } from "../util.js";
-import { DefaultRow, Table, TableSortOrder } from "../table/defaults.js";
 import { Store } from "../store/index.js";
+import { DefaultRow, Table, TableSortOrder } from "../table/defaults.js";
 import { ComponentInternalInstance, PropType, Ref, VNode } from "vue";
 
 //#region ../../packages/components/table/src/table-column/defaults.d.ts
@@ -231,14 +231,14 @@ declare const tableColumnProps: {
    * @description column width
    */
   width: {
-    type: (NumberConstructor | StringConstructor)[];
+    type: (StringConstructor | NumberConstructor)[];
     default: string;
   };
   /**
    * @description column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion
    */
   minWidth: {
-    type: (NumberConstructor | StringConstructor)[];
+    type: (StringConstructor | NumberConstructor)[];
     default: string;
   };
   /**

package/es/components/table/src/table-footer/index.d.ts

@@ -1,7 +1,7 @@
 import { TableColumnCtx } from "../table-column/defaults.js";
+import { Store } from "../store/index.js";
 import TableLayout from "../table-layout.js";
 import { DefaultRow, Sort, SummaryMethod } from "../table/defaults.js";
-import { Store } from "../store/index.js";
 import * as _$vue from "vue";
 import { PropType } from "vue";
 
@@ -77,8 +77,8 @@ declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
     };
   };
 }>> & Readonly<{}>, {
-  border: boolean;
   fixed: string;
+  border: boolean;
   defaultSort: Sort;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
 //#endregion

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

@@ -5,8 +5,8 @@ import { DefaultRow, TableSortOrder } from "../table/defaults.js";
 
 //#region ../../packages/components/table/src/table-header/event-helper.d.ts
 declare function useEvent<T extends DefaultRow>(props: TableHeaderProps<T>, emit: EmitFn<string[]>): {
-  handleHeaderClick: (event: Event, column: TableColumnCtx<T>) => void;
-  handleHeaderContextMenu: (event: Event, column: TableColumnCtx<T>) => void;
+  handleHeaderClick: (event: PointerEvent, column: TableColumnCtx<T>) => void;
+  handleHeaderContextMenu: (event: PointerEvent, column: TableColumnCtx<T>) => void;
   handleMouseDown: (event: MouseEvent, column: TableColumnCtx<T>) => void;
   handleMouseMove: (event: MouseEvent, column: TableColumnCtx<T>) => void;
   handleMouseOut: () => void;

package/es/components/table/src/table-header/event-helper.mjs

@@ -134,7 +134,7 @@ function useEvent(props, emit) {
 		if (sortingColumn !== column || sortingColumn === column && isNull(sortingColumn.order)) {
 			if (sortingColumn) sortingColumn.order = null;
 			states.sortingColumn.value = column;
-			sortProp = column.property;
+			sortProp = column.property ?? null;
 		}
 		if (!order) sortOrder = column.order = null;
 		else sortOrder = column.order = order;

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

@@ -1 +1 @@
-{"version":3,"file":"event-helper.mjs","names":[],"sources":["../../../../../../../packages/components/table/src/table-header/event-helper.ts"],"sourcesContent":["import { getCurrentInstance, inject, ref } from 'vue'\nimport { isNull } from 'lodash-unified'\nimport {\n  addClass,\n  hasClass,\n  isClient,\n  isElement,\n  removeClass,\n} from '@element-plus/utils'\nimport { TABLE_INJECTION_KEY } from '../tokens'\n\nimport type { EmitFn } from '@element-plus/utils'\nimport type { TableHeaderProps } from '.'\nimport type { TableColumnCtx } from '../table-column/defaults'\nimport type { DefaultRow, TableSortOrder } from '../table/defaults'\n\nfunction useEvent<T extends DefaultRow>(\n  props: TableHeaderProps<T>,\n  emit: EmitFn<string[]>\n) {\n  const instance = getCurrentInstance()\n  const parent = inject(TABLE_INJECTION_KEY)\n  const handleFilterClick = (event: Event) => {\n    event.stopPropagation()\n    return\n  }\n\n  const handleHeaderClick = (event: Event, column: TableColumnCtx<T>) => {\n    if (!column.filters && column.sortable) {\n      handleSortClick(event, column, false)\n    } else if (column.filterable && !column.sortable) {\n      handleFilterClick(event)\n    }\n    parent?.emit('header-click', column, event)\n  }\n\n  const handleHeaderContextMenu = (event: Event, column: TableColumnCtx<T>) => {\n    parent?.emit('header-contextmenu', column, event)\n  }\n  const draggingColumn = ref<TableColumnCtx<T> | null>(null)\n  const dragging = ref(false)\n  const dragState = ref<{\n    startMouseLeft: number\n    startLeft: number\n    startColumnLeft: number\n    tableLeft: number\n  }>()\n  const handleMouseDown = (event: MouseEvent, column: TableColumnCtx<T>) => {\n    if (!isClient) return\n    if (column.children && column.children.length > 0) return\n    /* istanbul ignore if */\n    if (\n      draggingColumn.value &&\n      props.border &&\n      draggingColumn.value.id === column.id\n    ) {\n      dragging.value = true\n\n      const table = parent\n      emit('set-drag-visible', true)\n      const tableEl = table?.vnode.el\n      const tableLeft = tableEl?.getBoundingClientRect().left\n      const columnEl = instance?.vnode?.el?.querySelector(`th.${column.id}`)\n      const columnRect = columnEl.getBoundingClientRect()\n      const minLeft = columnRect.left - tableLeft + 30\n\n      addClass(columnEl, 'noclick')\n\n      dragState.value = {\n        startMouseLeft: event.clientX,\n        startLeft: columnRect.right - tableLeft,\n        startColumnLeft: columnRect.left - tableLeft,\n        tableLeft,\n      }\n      const resizeProxy = table?.refs.resizeProxy as HTMLElement\n      resizeProxy.style.left = `${(dragState.value as any).startLeft}px`\n\n      document.onselectstart = function () {\n        return false\n      }\n      document.ondragstart = function () {\n        return false\n      }\n\n      const handleMouseMove = (event: MouseEvent) => {\n        const deltaLeft =\n          event.clientX - (dragState.value as any).startMouseLeft\n        const proxyLeft = (dragState.value as any).startLeft + deltaLeft\n\n        resizeProxy.style.left = `${Math.max(minLeft, proxyLeft)}px`\n      }\n\n      const handleMouseUp = () => {\n        if (dragging.value) {\n          const { startColumnLeft, startLeft } = dragState.value as any\n          const finalLeft = Number.parseInt(resizeProxy.style.left, 10)\n          const columnWidth = finalLeft - startColumnLeft\n          column.width = column.realWidth = columnWidth\n          table?.emit(\n            'header-dragend',\n            column.width,\n            startLeft - startColumnLeft,\n            column,\n            event\n          )\n          requestAnimationFrame(() => {\n            props.store.scheduleLayout(false, true)\n          })\n          document.body.style.cursor = ''\n          dragging.value = false\n          draggingColumn.value = null\n          dragState.value = undefined\n          emit('set-drag-visible', false)\n        }\n\n        document.removeEventListener('mousemove', handleMouseMove)\n        document.removeEventListener('mouseup', handleMouseUp)\n        document.onselectstart = null\n        document.ondragstart = null\n\n        setTimeout(() => {\n          removeClass(columnEl, 'noclick')\n        }, 0)\n      }\n\n      document.addEventListener('mousemove', handleMouseMove)\n      document.addEventListener('mouseup', handleMouseUp)\n    }\n  }\n\n  const handleMouseMove = (event: MouseEvent, column: TableColumnCtx<T>) => {\n    if (!props.border || (column.children && column.children.length > 0)) return\n    const el = event.target as HTMLElement\n    const target = isElement(el) ? el.closest('th') : null\n    if (!target) {\n      return\n    }\n\n    const isSortable = hasClass(target, 'is-sortable')\n\n    if (isSortable) {\n      const cursor = dragging.value ? 'col-resize' : ''\n      target.style.cursor = cursor\n\n      const caret = target.querySelector<HTMLElement>('.caret-wrapper')\n      if (caret) {\n        caret.style.cursor = cursor\n      }\n    }\n\n    if (!column.resizable || dragging.value) {\n      draggingColumn.value = null\n      return\n    }\n\n    const rect = target.getBoundingClientRect()\n    const isLastTh = target.parentNode?.lastElementChild === target\n    const allowDrag = props.allowDragLastColumn || !isLastTh\n    const isResizeHandleActive =\n      rect.width > 12 && rect.right - event.clientX < 8 && allowDrag\n    const cursor = isResizeHandleActive ? 'col-resize' : ''\n\n    document.body.style.cursor = cursor\n    draggingColumn.value = isResizeHandleActive ? (column as any) : null\n    if (isSortable) {\n      target.style.cursor = cursor\n    }\n  }\n\n  const handleMouseOut = () => {\n    if (!isClient || dragging.value) return\n    document.body.style.cursor = ''\n  }\n  const toggleOrder = ({ order, sortOrders }: TableColumnCtx<T>) => {\n    if ((order as string) === '') return sortOrders[0]\n    const index = sortOrders.indexOf(order || null)\n    return sortOrders[index > sortOrders.length - 2 ? 0 : index + 1]\n  }\n  const handleSortClick = (\n    event: Event,\n    column: TableColumnCtx<T>,\n    givenOrder?: TableSortOrder | boolean\n  ) => {\n    event.stopPropagation()\n    const order = (\n      column.order === givenOrder ? null : givenOrder || toggleOrder(column)\n    ) as TableSortOrder | null\n    const target = (event.target as HTMLElement)?.closest('th')\n\n    if (target) {\n      if (hasClass(target, 'noclick')) {\n        removeClass(target, 'noclick')\n        return\n      }\n    }\n\n    if (!column.sortable) return\n\n    const clickTarget = event.currentTarget\n\n    if (\n      ['ascending', 'descending'].some(\n        (str) =>\n          hasClass(clickTarget as Element, str) &&\n          !column.sortOrders.includes(str as TableSortOrder)\n      )\n    ) {\n      return\n    }\n\n    const states = props.store.states\n    let sortProp = states.sortProp.value\n    let sortOrder\n    const sortingColumn = states.sortingColumn.value\n\n    if (\n      sortingColumn !== column ||\n      (sortingColumn === column && isNull(sortingColumn.order))\n    ) {\n      if (sortingColumn) {\n        sortingColumn.order = null\n      }\n      states.sortingColumn.value = column\n      sortProp = column.property\n    }\n    if (!order) {\n      sortOrder = column.order = null\n    } else {\n      sortOrder = column.order = order\n    }\n\n    states.sortProp.value = sortProp\n    states.sortOrder.value = sortOrder\n\n    parent?.store.commit('changeSortCondition')\n  }\n\n  return {\n    handleHeaderClick,\n    handleHeaderContextMenu,\n    handleMouseDown,\n    handleMouseMove,\n    handleMouseOut,\n    handleSortClick,\n    handleFilterClick,\n  }\n}\n\nexport default useEvent\n"],"mappings":"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"}
+{"version":3,"file":"event-helper.mjs","names":[],"sources":["../../../../../../../packages/components/table/src/table-header/event-helper.ts"],"sourcesContent":["import { getCurrentInstance, inject, ref } from 'vue'\nimport { isNull } from 'lodash-unified'\nimport {\n  addClass,\n  hasClass,\n  isClient,\n  isElement,\n  removeClass,\n} from '@element-plus/utils'\nimport { TABLE_INJECTION_KEY } from '../tokens'\n\nimport type { EmitFn } from '@element-plus/utils'\nimport type { TableHeaderProps } from '.'\nimport type { TableColumnCtx } from '../table-column/defaults'\nimport type { DefaultRow, TableSortOrder } from '../table/defaults'\n\nfunction useEvent<T extends DefaultRow>(\n  props: TableHeaderProps<T>,\n  emit: EmitFn<string[]>\n) {\n  const instance = getCurrentInstance()\n  const parent = inject(TABLE_INJECTION_KEY)\n  const handleFilterClick = (event: Event) => {\n    event.stopPropagation()\n    return\n  }\n\n  const handleHeaderClick = (\n    event: PointerEvent,\n    column: TableColumnCtx<T>\n  ) => {\n    if (!column.filters && column.sortable) {\n      handleSortClick(event, column, false)\n    } else if (column.filterable && !column.sortable) {\n      handleFilterClick(event)\n    }\n    parent?.emit('header-click', column, event)\n  }\n\n  const handleHeaderContextMenu = (\n    event: PointerEvent,\n    column: TableColumnCtx<T>\n  ) => {\n    parent?.emit('header-contextmenu', column, event)\n  }\n  const draggingColumn = ref<TableColumnCtx<T> | null>(null)\n  const dragging = ref(false)\n  const dragState = ref<{\n    startMouseLeft: number\n    startLeft: number\n    startColumnLeft: number\n    tableLeft: number\n  }>()\n  const handleMouseDown = (event: MouseEvent, column: TableColumnCtx<T>) => {\n    if (!isClient) return\n    if (column.children && column.children.length > 0) return\n    /* istanbul ignore if */\n    if (\n      draggingColumn.value &&\n      props.border &&\n      draggingColumn.value.id === column.id\n    ) {\n      dragging.value = true\n\n      const table = parent\n      emit('set-drag-visible', true)\n      const tableEl = table?.vnode.el\n      const tableLeft = tableEl?.getBoundingClientRect().left\n      const columnEl = instance?.vnode?.el?.querySelector(`th.${column.id}`)\n      const columnRect = columnEl.getBoundingClientRect()\n      const minLeft = columnRect.left - tableLeft + 30\n\n      addClass(columnEl, 'noclick')\n\n      dragState.value = {\n        startMouseLeft: event.clientX,\n        startLeft: columnRect.right - tableLeft,\n        startColumnLeft: columnRect.left - tableLeft,\n        tableLeft,\n      }\n      const resizeProxy = table?.refs.resizeProxy as HTMLElement\n      resizeProxy.style.left = `${(dragState.value as any).startLeft}px`\n\n      document.onselectstart = function () {\n        return false\n      }\n      document.ondragstart = function () {\n        return false\n      }\n\n      const handleMouseMove = (event: MouseEvent) => {\n        const deltaLeft =\n          event.clientX - (dragState.value as any).startMouseLeft\n        const proxyLeft = (dragState.value as any).startLeft + deltaLeft\n\n        resizeProxy.style.left = `${Math.max(minLeft, proxyLeft)}px`\n      }\n\n      const handleMouseUp = () => {\n        if (dragging.value) {\n          const { startColumnLeft, startLeft } = dragState.value as any\n          const finalLeft = Number.parseInt(resizeProxy.style.left, 10)\n          const columnWidth = finalLeft - startColumnLeft\n          column.width = column.realWidth = columnWidth\n          table?.emit(\n            'header-dragend',\n            column.width,\n            startLeft - startColumnLeft,\n            column,\n            event\n          )\n          requestAnimationFrame(() => {\n            props.store.scheduleLayout(false, true)\n          })\n          document.body.style.cursor = ''\n          dragging.value = false\n          draggingColumn.value = null\n          dragState.value = undefined\n          emit('set-drag-visible', false)\n        }\n\n        document.removeEventListener('mousemove', handleMouseMove)\n        document.removeEventListener('mouseup', handleMouseUp)\n        document.onselectstart = null\n        document.ondragstart = null\n\n        setTimeout(() => {\n          removeClass(columnEl, 'noclick')\n        }, 0)\n      }\n\n      document.addEventListener('mousemove', handleMouseMove)\n      document.addEventListener('mouseup', handleMouseUp)\n    }\n  }\n\n  const handleMouseMove = (event: MouseEvent, column: TableColumnCtx<T>) => {\n    if (!props.border || (column.children && column.children.length > 0)) return\n    const el = event.target as HTMLElement\n    const target = isElement(el) ? el.closest('th') : null\n    if (!target) {\n      return\n    }\n\n    const isSortable = hasClass(target, 'is-sortable')\n\n    if (isSortable) {\n      const cursor = dragging.value ? 'col-resize' : ''\n      target.style.cursor = cursor\n\n      const caret = target.querySelector<HTMLElement>('.caret-wrapper')\n      if (caret) {\n        caret.style.cursor = cursor\n      }\n    }\n\n    if (!column.resizable || dragging.value) {\n      draggingColumn.value = null\n      return\n    }\n\n    const rect = target.getBoundingClientRect()\n    const isLastTh = target.parentNode?.lastElementChild === target\n    const allowDrag = props.allowDragLastColumn || !isLastTh\n    const isResizeHandleActive =\n      rect.width > 12 && rect.right - event.clientX < 8 && allowDrag\n    const cursor = isResizeHandleActive ? 'col-resize' : ''\n\n    document.body.style.cursor = cursor\n    draggingColumn.value = isResizeHandleActive ? (column as any) : null\n    if (isSortable) {\n      target.style.cursor = cursor\n    }\n  }\n\n  const handleMouseOut = () => {\n    if (!isClient || dragging.value) return\n    document.body.style.cursor = ''\n  }\n  const toggleOrder = ({ order, sortOrders }: TableColumnCtx<T>) => {\n    if ((order as string) === '') return sortOrders[0]\n    const index = sortOrders.indexOf(order || null)\n    return sortOrders[index > sortOrders.length - 2 ? 0 : index + 1]\n  }\n  const handleSortClick = (\n    event: Event,\n    column: TableColumnCtx<T>,\n    givenOrder?: TableSortOrder | boolean\n  ) => {\n    event.stopPropagation()\n    const order = (\n      column.order === givenOrder ? null : givenOrder || toggleOrder(column)\n    ) as TableSortOrder | null\n    const target = (event.target as HTMLElement)?.closest('th')\n\n    if (target) {\n      if (hasClass(target, 'noclick')) {\n        removeClass(target, 'noclick')\n        return\n      }\n    }\n\n    if (!column.sortable) return\n\n    const clickTarget = event.currentTarget\n\n    if (\n      ['ascending', 'descending'].some(\n        (str) =>\n          hasClass(clickTarget as Element, str) &&\n          !column.sortOrders.includes(str as TableSortOrder)\n      )\n    ) {\n      return\n    }\n\n    const states = props.store.states\n    let sortProp = states.sortProp.value\n    let sortOrder\n    const sortingColumn = states.sortingColumn.value\n\n    if (\n      sortingColumn !== column ||\n      (sortingColumn === column && isNull(sortingColumn.order))\n    ) {\n      if (sortingColumn) {\n        sortingColumn.order = null\n      }\n      states.sortingColumn.value = column\n      sortProp = column.property ?? null\n    }\n    if (!order) {\n      sortOrder = column.order = null\n    } else {\n      sortOrder = column.order = order\n    }\n\n    states.sortProp.value = sortProp\n    states.sortOrder.value = sortOrder\n\n    parent?.store.commit('changeSortCondition')\n  }\n\n  return {\n    handleHeaderClick,\n    handleHeaderContextMenu,\n    handleMouseDown,\n    handleMouseMove,\n    handleMouseOut,\n    handleSortClick,\n    handleFilterClick,\n  }\n}\n\nexport default useEvent\n"],"mappings":"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"}

package/es/components/table/src/table-header/index.d.ts

@@ -3,9 +3,9 @@ import { CheckboxProps, CheckboxValueType } from "../../../checkbox/src/checkbox
 import _default$1 from "../../../checkbox/src/checkbox-button.vue.js";
 import _default$2 from "../../../checkbox/src/checkbox-group.vue.js";
 import { TableColumnCtx } from "../table-column/defaults.js";
+import { Store } from "../store/index.js";
 import TableLayout from "../table-layout.js";
 import { DefaultRow, Sort, TableSortOrder } from "../table/defaults.js";
-import { Store } from "../store/index.js";
 import * as _$vue from "vue";
 import { ComponentInternalInstance, PropType, Ref } from "vue";
 
@@ -75,8 +75,8 @@ declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   getHeaderRowStyle: (rowIndex: number) => any;
   getHeaderCellClass: (rowIndex: number, columnIndex: number, row: any, column: TableColumnCtx<any>) => string;
   getHeaderCellStyle: (rowIndex: number, columnIndex: number, row: any, column: TableColumnCtx<any>) => _$vue.CSSProperties;
-  handleHeaderClick: (event: Event, column: TableColumnCtx<any>) => void;
-  handleHeaderContextMenu: (event: Event, column: TableColumnCtx<any>) => void;
+  handleHeaderClick: (event: PointerEvent, column: TableColumnCtx<any>) => void;
+  handleHeaderContextMenu: (event: PointerEvent, column: TableColumnCtx<any>) => void;
   handleMouseDown: (event: MouseEvent, column: TableColumnCtx<any>) => void;
   handleMouseMove: (event: MouseEvent, column: TableColumnCtx<any>) => void;
   handleMouseOut: () => void;
@@ -112,8 +112,8 @@ declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
     type: BooleanConstructor;
   };
 }>> & Readonly<{}>, {
-  border: boolean;
   fixed: string;
+  border: boolean;
   defaultSort: Sort;
   allowDragLastColumn: boolean;
 }, {}, {
@@ -125,13 +125,13 @@ declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
       "update:modelValue": (val: CheckboxValueType) => void;
       change: (val: CheckboxValueType) => void;
     }, _$vue.PublicProps, {
-      value: string | boolean | number | object;
-      label: string | boolean | number | object;
+      id: string;
       disabled: boolean;
-      validateEvent: boolean;
-      modelValue: number | string | boolean;
       name: string;
-      id: string;
+      modelValue: number | string | boolean;
+      validateEvent: boolean;
+      value: string | boolean | number | object;
+      label: string | boolean | number | object;
       trueValue: string | number;
       falseValue: string | number;
       trueLabel: string | number;
@@ -147,13 +147,13 @@ declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
       "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
       onChange?: ((val: CheckboxValueType) => any) | undefined;
     }>, {}, {}, {}, {}, {
-      value: string | boolean | number | object;
-      label: string | boolean | number | object;
+      id: string;
       disabled: boolean;
-      validateEvent: boolean;
-      modelValue: number | string | boolean;
       name: string;
-      id: string;
+      modelValue: number | string | boolean;
+      validateEvent: boolean;
+      value: string | boolean | number | object;
+      label: string | boolean | number | object;
       trueValue: string | number;
       falseValue: string | number;
       trueLabel: string | number;
@@ -169,13 +169,13 @@ declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
     "update:modelValue": (val: CheckboxValueType) => void;
     change: (val: CheckboxValueType) => void;
   }, string, {
-    value: string | boolean | number | object;
-    label: string | boolean | number | object;
+    id: string;
     disabled: boolean;
-    validateEvent: boolean;
-    modelValue: number | string | boolean;
     name: string;
-    id: string;
+    modelValue: number | string | boolean;
+    validateEvent: boolean;
+    value: string | boolean | number | object;
+    label: string | boolean | number | object;
     trueValue: string | number;
     falseValue: string | number;
     trueLabel: string | number;

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["FilterPanel"],"sources":["../../../../../../../packages/components/table/src/table-header/index.ts"],"sourcesContent":["import {\n  defineComponent,\n  getCurrentInstance,\n  h,\n  inject,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useLocale } from '@element-plus/hooks/use-locale'\nimport FilterPanel from '../filter-panel.vue'\nimport useLayoutObserver from '../layout-observer'\nimport { TABLE_INJECTION_KEY } from '../tokens'\nimport useEvent from './event-helper'\nimport useStyle from './style.helper'\nimport useUtils from './utils-helper'\n\nimport type TableLayout from '../table-layout'\nimport type { ComponentInternalInstance, PropType, Ref } from 'vue'\nimport type { DefaultRow, Sort } from '../table/defaults'\nimport type { Store } from '../store'\n\nexport interface TableHeader extends ComponentInternalInstance {\n  state: {\n    onColumnsChange: (layout: TableLayout<any>) => void\n    onScrollableChange: (layout: TableLayout<any>) => void\n  }\n  filterPanels: Ref<DefaultRow>\n}\nexport interface TableHeaderProps<T extends DefaultRow> {\n  fixed: string\n  store: Store<T>\n  border: boolean\n  defaultSort: Sort\n  allowDragLastColumn: boolean\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<any>['store']>,\n    },\n    border: Boolean,\n    defaultSort: {\n      type: Object as PropType<TableHeaderProps<any>['defaultSort']>,\n      default: () => {\n        return {\n          prop: '',\n          order: '',\n        }\n      },\n    },\n    appendFilterPanelTo: {\n      type: String,\n    },\n    allowDragLastColumn: {\n      type: Boolean,\n    },\n  },\n  setup(props, { emit }) {\n    const instance = getCurrentInstance() as TableHeader\n    const parent = inject(TABLE_INJECTION_KEY)\n    const ns = useNamespace('table')\n    const filterPanels = ref({})\n    const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent!)\n\n    const isTableLayoutAuto = parent?.props.tableLayout === 'auto'\n    const saveIndexSelection = reactive(new Map())\n    const theadRef = ref()\n\n    let delayId: ReturnType<typeof setTimeout> | undefined\n    const updateFixedColumnStyle = () => {\n      delayId = setTimeout(() => {\n        if (saveIndexSelection.size > 0) {\n          saveIndexSelection.forEach((column, key) => {\n            const el = theadRef.value.querySelector(\n              `.${key.replace(/\\s/g, '.')}`\n            )\n            if (el) {\n              const width = el.getBoundingClientRect().width\n              column.width = width || column.width\n            }\n          })\n          saveIndexSelection.clear()\n        }\n      })\n    }\n\n    watch(saveIndexSelection, updateFixedColumnStyle)\n    onBeforeUnmount(() => {\n      if (delayId) {\n        clearTimeout(delayId)\n        delayId = undefined\n      }\n    })\n\n    onMounted(async () => {\n      // Need double await, because updateColumns is executed after nextTick for now\n      await nextTick()\n      await nextTick()\n      const { prop, order } = props.defaultSort\n      parent?.store.commit('sort', { prop, order, init: true })\n\n      updateFixedColumnStyle()\n    })\n\n    const {\n      handleHeaderClick,\n      handleHeaderContextMenu,\n      handleMouseDown,\n      handleMouseMove,\n      handleMouseOut,\n      handleSortClick,\n      handleFilterClick,\n    } = useEvent(props as TableHeaderProps<any>, emit)\n    const {\n      getHeaderRowStyle,\n      getHeaderRowClass,\n      getHeaderCellStyle,\n      getHeaderCellClass,\n    } = useStyle(props as TableHeaderProps<any>)\n    const { isGroup, toggleAllSelection, columnRows } = useUtils(\n      props as TableHeaderProps<any>\n    )\n\n    const { t } = useLocale()\n\n    instance.state = {\n      onColumnsChange,\n      onScrollableChange,\n    }\n    instance.filterPanels = filterPanels\n\n    return {\n      ns,\n      t,\n      filterPanels,\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      saveIndexSelection,\n      isTableLayoutAuto,\n      theadRef,\n      updateFixedColumnStyle,\n    }\n  },\n  render() {\n    const {\n      ns,\n      t,\n      isGroup,\n      columnRows,\n      getHeaderCellStyle,\n      getHeaderCellClass,\n      getHeaderRowClass,\n      getHeaderRowStyle,\n      handleHeaderClick,\n      handleHeaderContextMenu,\n      handleMouseDown,\n      handleMouseMove,\n      handleSortClick,\n      handleMouseOut,\n      store,\n      $parent,\n      saveIndexSelection,\n      isTableLayoutAuto,\n    } = this\n    let rowSpan = 1\n    return h(\n      'thead',\n      {\n        ref: 'theadRef',\n        class: ns.is('group', isGroup),\n      },\n      columnRows.map((subColumns, rowIndex) =>\n        h(\n          'tr',\n          {\n            class: getHeaderRowClass(rowIndex),\n            key: rowIndex,\n            style: getHeaderRowStyle(rowIndex),\n          },\n          subColumns.map((column, cellIndex) => {\n            if (column.rowSpan > rowSpan) {\n              rowSpan = column.rowSpan\n            }\n            const _class = getHeaderCellClass(\n              rowIndex,\n              cellIndex,\n              subColumns,\n              column\n            )\n            if (isTableLayoutAuto && column.fixed) {\n              saveIndexSelection.set(_class, column)\n            }\n            return h(\n              'th',\n              {\n                class: _class,\n                colspan: column.colSpan,\n                key: `${column.id}-thead`,\n                rowspan: column.rowSpan,\n                scope: column.colSpan > 1 ? 'colgroup' : 'col',\n                ariaSort: column.sortable ? column.order : undefined,\n                style: getHeaderCellStyle(\n                  rowIndex,\n                  cellIndex,\n                  subColumns,\n                  column\n                ),\n                onClick: ($event: Event) => {\n                  if (\n                    ($event.currentTarget as Element)?.classList.contains(\n                      'noclick'\n                    )\n                  ) {\n                    return\n                  }\n                  handleHeaderClick($event, column)\n                },\n                onContextmenu: ($event: MouseEvent) =>\n                  handleHeaderContextMenu($event, column),\n                onMousedown: ($event: MouseEvent) =>\n                  handleMouseDown($event, column),\n                onMousemove: ($event: MouseEvent) =>\n                  handleMouseMove($event, column),\n                onMouseout: handleMouseOut,\n              },\n              [\n                h(\n                  'div',\n                  {\n                    class: [\n                      'cell',\n                      column.filteredValue && column.filteredValue.length > 0\n                        ? 'highlight'\n                        : '',\n                    ],\n                  },\n                  [\n                    column.renderHeader\n                      ? column.renderHeader({\n                          column,\n                          $index: cellIndex,\n                          store,\n                          _self: $parent,\n                        })\n                      : column.label,\n                    column.sortable &&\n                      h(\n                        'button',\n                        {\n                          type: 'button',\n                          class: 'caret-wrapper',\n                          'aria-label': t('el.table.sortLabel', {\n                            column: column.label || '',\n                          }),\n                          onClick: ($event: Event) =>\n                            handleSortClick($event, column),\n                        },\n                        [\n                          h('i', {\n                            onClick: ($event: Event) =>\n                              handleSortClick($event, column, 'ascending'),\n                            class: 'sort-caret ascending',\n                          }),\n                          h('i', {\n                            onClick: ($event: Event) =>\n                              handleSortClick($event, column, 'descending'),\n                            class: 'sort-caret descending',\n                          }),\n                        ]\n                      ),\n                    column.filterable &&\n                      h(\n                        FilterPanel as any,\n                        {\n                          store,\n                          placement: column.filterPlacement || 'bottom-start',\n                          appendTo: ($parent as any)?.appendFilterPanelTo,\n                          column,\n                          upDataColumn: (key: never, value: never) => {\n                            column[key] = value\n                          },\n                        },\n                        {\n                          'filter-icon': () =>\n                            column.renderFilterIcon\n                              ? column.renderFilterIcon({\n                                  filterOpened: column.filterOpened,\n                                })\n                              : null,\n                        }\n                      ),\n                  ]\n                ),\n              ]\n            )\n          })\n        )\n      )\n    )\n  },\n})\n"],"mappings":";;;;;;;;;;;AA0CA,IAAA,uBAAe,gBAAgB;CAC7B,MAAM;CACN,YAAY,EACV,YACD;CACD,OAAO;EACL,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACD,OAAO;GACL,UAAU;GACV,MAAM;GACP;EACD,QAAQ;EACR,aAAa;GACX,MAAM;GACN,eAAe;IACb,OAAO;KACL,MAAM;KACN,OAAO;KACR;;GAEJ;EACD,qBAAqB,EACnB,MAAM,QACP;EACD,qBAAqB,EACnB,MAAM,SACP;EACF;CACD,MAAM,OAAO,EAAE,QAAQ;EACrB,MAAM,WAAW,oBAAoB;EACrC,MAAM,SAAS,OAAO,oBAAoB;EAC1C,MAAM,KAAK,aAAa,QAAQ;EAChC,MAAM,eAAe,IAAI,EAAE,CAAC;EAC5B,MAAM,EAAE,iBAAiB,uBAAuB,kBAAkB,OAAQ;EAE1E,MAAM,oBAAoB,QAAQ,MAAM,gBAAgB;EACxD,MAAM,qBAAqB,yBAAS,IAAI,KAAK,CAAC;EAC9C,MAAM,WAAW,KAAK;EAEtB,IAAI;EACJ,MAAM,+BAA+B;GACnC,UAAU,iBAAiB;IACzB,IAAI,mBAAmB,OAAO,GAAG;KAC/B,mBAAmB,SAAS,QAAQ,QAAQ;MAC1C,MAAM,KAAK,SAAS,MAAM,cACxB,IAAI,IAAI,QAAQ,OAAO,IAAI,GAC5B;MACD,IAAI,IAEF,OAAO,QADO,GAAG,uBAAuB,CAAC,SACjB,OAAO;OAEjC;KACF,mBAAmB,OAAO;;KAE5B;;EAGJ,MAAM,oBAAoB,uBAAuB;EACjD,sBAAsB;GACpB,IAAI,SAAS;IACX,aAAa,QAAQ;IACrB,UAAU,KAAA;;IAEZ;EAEF,UAAU,YAAY;GAEpB,MAAM,UAAU;GAChB,MAAM,UAAU;GAChB,MAAM,EAAE,MAAM,UAAU,MAAM;GAC9B,QAAQ,MAAM,OAAO,QAAQ;IAAE;IAAM;IAAO,MAAM;IAAM,CAAC;GAEzD,wBAAwB;IACxB;EAEF,MAAM,EACJ,mBACA,yBACA,iBACA,iBACA,gBACA,iBACA,sBACE,SAAS,OAAgC,KAAK;EAClD,MAAM,EACJ,mBACA,mBACA,oBACA,uBACE,SAAS,MAA+B;EAC5C,MAAM,EAAE,SAAS,oBAAoB,eAAe,SAClD,MACD;EAED,MAAM,EAAE,MAAM,WAAW;EAEzB,SAAS,QAAQ;GACf;GACA;GACD;EACD,SAAS,eAAe;EAExB,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;;CAEH,SAAS;EACP,MAAM,EACJ,IACA,GACA,SACA,YACA,oBACA,oBACA,mBACA,mBACA,mBACA,yBACA,iBACA,iBACA,iBACA,gBACA,OACA,SACA,oBACA,sBACE;EACJ,IAAI,UAAU;EACd,OAAO,EACL,SACA;GACE,KAAK;GACL,OAAO,GAAG,GAAG,SAAS,QAAQ;GAC/B,EACD,WAAW,KAAK,YAAY,aAC1B,EACE,MACA;GACE,OAAO,kBAAkB,SAAS;GAClC,KAAK;GACL,OAAO,kBAAkB,SAAS;GACnC,EACD,WAAW,KAAK,QAAQ,cAAc;GACpC,IAAI,OAAO,UAAU,SACnB,UAAU,OAAO;GAEnB,MAAM,SAAS,mBACb,UACA,WACA,YACA,OACD;GACD,IAAI,qBAAqB,OAAO,OAC9B,mBAAmB,IAAI,QAAQ,OAAO;GAExC,OAAO,EACL,MACA;IACE,OAAO;IACP,SAAS,OAAO;IAChB,KAAK,GAAG,OAAO,GAAG;IAClB,SAAS,OAAO;IAChB,OAAO,OAAO,UAAU,IAAI,aAAa;IACzC,UAAU,OAAO,WAAW,OAAO,QAAQ,KAAA;IAC3C,OAAO,mBACL,UACA,WACA,YACA,OACD;IACD,UAAU,WAAkB;KAC1B,IACG,OAAO,eAA2B,UAAU,SAC3C,UACD,EAED;KAEF,kBAAkB,QAAQ,OAAO;;IAEnC,gBAAgB,WACd,wBAAwB,QAAQ,OAAO;IACzC,cAAc,WACZ,gBAAgB,QAAQ,OAAO;IACjC,cAAc,WACZ,gBAAgB,QAAQ,OAAO;IACjC,YAAY;IACb,EACD,CACE,EACE,OACA,EACE,OAAO,CACL,QACA,OAAO,iBAAiB,OAAO,cAAc,SAAS,IAClD,cACA,GACL,EACF,EACD;IACE,OAAO,eACH,OAAO,aAAa;KAClB;KACA,QAAQ;KACR;KACA,OAAO;KACR,CAAC,GACF,OAAO;IACX,OAAO,YACL,EACE,UACA;KACE,MAAM;KACN,OAAO;KACP,cAAc,EAAE,sBAAsB,EACpC,QAAQ,OAAO,SAAS,IACzB,CAAC;KACF,UAAU,WACR,gBAAgB,QAAQ,OAAO;KAClC,EACD,CACE,EAAE,KAAK;KACL,UAAU,WACR,gBAAgB,QAAQ,QAAQ,YAAY;KAC9C,OAAO;KACR,CAAC,EACF,EAAE,KAAK;KACL,UAAU,WACR,gBAAgB,QAAQ,QAAQ,aAAa;KAC/C,OAAO;KACR,CAAC,CACH,CACF;IACH,OAAO,cACL,EACEA,sBACA;KACE;KACA,WAAW,OAAO,mBAAmB;KACrC,UAAW,SAAiB;KAC5B;KACA,eAAe,KAAY,UAAiB;MAC1C,OAAO,OAAO;;KAEjB,EACD,EACE,qBACE,OAAO,mBACH,OAAO,iBAAiB,EACtB,cAAc,OAAO,cACtB,CAAC,GACF,MACP,CACF;IACJ,CACF,CACF,CACF;IACD,CACH,CACF,CACF;;CAEJ,CAAC"}
+{"version":3,"file":"index.mjs","names":["FilterPanel"],"sources":["../../../../../../../packages/components/table/src/table-header/index.ts"],"sourcesContent":["import {\n  defineComponent,\n  getCurrentInstance,\n  h,\n  inject,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useLocale } from '@element-plus/hooks/use-locale'\nimport FilterPanel from '../filter-panel.vue'\nimport useLayoutObserver from '../layout-observer'\nimport { TABLE_INJECTION_KEY } from '../tokens'\nimport useEvent from './event-helper'\nimport useStyle from './style.helper'\nimport useUtils from './utils-helper'\n\nimport type TableLayout from '../table-layout'\nimport type { ComponentInternalInstance, PropType, Ref } from 'vue'\nimport type { DefaultRow, Sort } from '../table/defaults'\nimport type { Store } from '../store'\n\nexport interface TableHeader extends ComponentInternalInstance {\n  state: {\n    onColumnsChange: (layout: TableLayout<any>) => void\n    onScrollableChange: (layout: TableLayout<any>) => void\n  }\n  filterPanels: Ref<DefaultRow>\n}\nexport interface TableHeaderProps<T extends DefaultRow> {\n  fixed: string\n  store: Store<T>\n  border: boolean\n  defaultSort: Sort\n  allowDragLastColumn: boolean\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<any>['store']>,\n    },\n    border: Boolean,\n    defaultSort: {\n      type: Object as PropType<TableHeaderProps<any>['defaultSort']>,\n      default: () => {\n        return {\n          prop: '',\n          order: '',\n        }\n      },\n    },\n    appendFilterPanelTo: {\n      type: String,\n    },\n    allowDragLastColumn: {\n      type: Boolean,\n    },\n  },\n  setup(props, { emit }) {\n    const instance = getCurrentInstance() as TableHeader\n    const parent = inject(TABLE_INJECTION_KEY)\n    const ns = useNamespace('table')\n    const filterPanels = ref({})\n    const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent!)\n\n    const isTableLayoutAuto = parent?.props.tableLayout === 'auto'\n    const saveIndexSelection = reactive(new Map())\n    const theadRef = ref()\n\n    let delayId: ReturnType<typeof setTimeout> | undefined\n    const updateFixedColumnStyle = () => {\n      delayId = setTimeout(() => {\n        if (saveIndexSelection.size > 0) {\n          saveIndexSelection.forEach((column, key) => {\n            const el = theadRef.value.querySelector(\n              `.${key.replace(/\\s/g, '.')}`\n            )\n            if (el) {\n              const width = el.getBoundingClientRect().width\n              column.width = width || column.width\n            }\n          })\n          saveIndexSelection.clear()\n        }\n      })\n    }\n\n    watch(saveIndexSelection, updateFixedColumnStyle)\n    onBeforeUnmount(() => {\n      if (delayId) {\n        clearTimeout(delayId)\n        delayId = undefined\n      }\n    })\n\n    onMounted(async () => {\n      // Need double await, because updateColumns is executed after nextTick for now\n      await nextTick()\n      await nextTick()\n      const { prop, order } = props.defaultSort\n      parent?.store.commit('sort', { prop, order, init: true })\n\n      updateFixedColumnStyle()\n    })\n\n    const {\n      handleHeaderClick,\n      handleHeaderContextMenu,\n      handleMouseDown,\n      handleMouseMove,\n      handleMouseOut,\n      handleSortClick,\n      handleFilterClick,\n    } = useEvent(props as TableHeaderProps<any>, emit)\n    const {\n      getHeaderRowStyle,\n      getHeaderRowClass,\n      getHeaderCellStyle,\n      getHeaderCellClass,\n    } = useStyle(props as TableHeaderProps<any>)\n    const { isGroup, toggleAllSelection, columnRows } = useUtils(\n      props as TableHeaderProps<any>\n    )\n\n    const { t } = useLocale()\n\n    instance.state = {\n      onColumnsChange,\n      onScrollableChange,\n    }\n    instance.filterPanels = filterPanels\n\n    return {\n      ns,\n      t,\n      filterPanels,\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      saveIndexSelection,\n      isTableLayoutAuto,\n      theadRef,\n      updateFixedColumnStyle,\n    }\n  },\n  render() {\n    const {\n      ns,\n      t,\n      isGroup,\n      columnRows,\n      getHeaderCellStyle,\n      getHeaderCellClass,\n      getHeaderRowClass,\n      getHeaderRowStyle,\n      handleHeaderClick,\n      handleHeaderContextMenu,\n      handleMouseDown,\n      handleMouseMove,\n      handleSortClick,\n      handleMouseOut,\n      store,\n      $parent,\n      saveIndexSelection,\n      isTableLayoutAuto,\n    } = this\n    let rowSpan = 1\n    return h(\n      'thead',\n      {\n        ref: 'theadRef',\n        class: ns.is('group', isGroup),\n      },\n      columnRows.map((subColumns, rowIndex) =>\n        h(\n          'tr',\n          {\n            class: getHeaderRowClass(rowIndex),\n            key: rowIndex,\n            style: getHeaderRowStyle(rowIndex),\n          },\n          subColumns.map((column, cellIndex) => {\n            if (column.rowSpan > rowSpan) {\n              rowSpan = column.rowSpan\n            }\n            const _class = getHeaderCellClass(\n              rowIndex,\n              cellIndex,\n              subColumns,\n              column\n            )\n            if (isTableLayoutAuto && column.fixed) {\n              saveIndexSelection.set(_class, column)\n            }\n            return h(\n              'th',\n              {\n                class: _class,\n                colspan: column.colSpan,\n                key: `${column.id}-thead`,\n                rowspan: column.rowSpan,\n                scope: column.colSpan > 1 ? 'colgroup' : 'col',\n                ariaSort: column.sortable ? column.order : undefined,\n                style: getHeaderCellStyle(\n                  rowIndex,\n                  cellIndex,\n                  subColumns,\n                  column\n                ),\n                onClick: ($event: PointerEvent) => {\n                  if (\n                    ($event.currentTarget as Element)?.classList.contains(\n                      'noclick'\n                    )\n                  ) {\n                    return\n                  }\n                  handleHeaderClick($event, column)\n                },\n                onContextmenu: ($event: PointerEvent) =>\n                  handleHeaderContextMenu($event, column),\n                onMousedown: ($event: MouseEvent) =>\n                  handleMouseDown($event, column),\n                onMousemove: ($event: MouseEvent) =>\n                  handleMouseMove($event, column),\n                onMouseout: handleMouseOut,\n              },\n              [\n                h(\n                  'div',\n                  {\n                    class: [\n                      'cell',\n                      column.filteredValue && column.filteredValue.length > 0\n                        ? 'highlight'\n                        : '',\n                    ],\n                  },\n                  [\n                    column.renderHeader\n                      ? column.renderHeader({\n                          column,\n                          $index: cellIndex,\n                          store,\n                          _self: $parent,\n                        })\n                      : column.label,\n                    column.sortable &&\n                      h(\n                        'button',\n                        {\n                          type: 'button',\n                          class: 'caret-wrapper',\n                          'aria-label': t('el.table.sortLabel', {\n                            column: column.label || '',\n                          }),\n                          onClick: ($event: Event) =>\n                            handleSortClick($event, column),\n                        },\n                        [\n                          h('i', {\n                            onClick: ($event: Event) =>\n                              handleSortClick($event, column, 'ascending'),\n                            class: 'sort-caret ascending',\n                          }),\n                          h('i', {\n                            onClick: ($event: Event) =>\n                              handleSortClick($event, column, 'descending'),\n                            class: 'sort-caret descending',\n                          }),\n                        ]\n                      ),\n                    column.filterable &&\n                      h(\n                        FilterPanel as any,\n                        {\n                          store,\n                          placement: column.filterPlacement || 'bottom-start',\n                          appendTo: ($parent as any)?.appendFilterPanelTo,\n                          column,\n                          upDataColumn: (key: never, value: never) => {\n                            column[key] = value\n                          },\n                        },\n                        {\n                          'filter-icon': () =>\n                            column.renderFilterIcon\n                              ? column.renderFilterIcon({\n                                  filterOpened: column.filterOpened,\n                                })\n                              : null,\n                        }\n                      ),\n                  ]\n                ),\n              ]\n            )\n          })\n        )\n      )\n    )\n  },\n})\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { TableColumnCtx } from "./table-column/defaults.js";
+import { Store } from "./store/index.js";
 import { TableHeader } from "./table-header/index.js";
 import { DefaultRow, Table } from "./table/defaults.js";
-import { Store } from "./store/index.js";
 import { Ref } from "vue";
 
 //#region ../../packages/components/table/src/table-layout.d.ts

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

@@ -1 +1 @@
-{"version":3,"file":"table.mjs","names":[],"sources":["../../../../../../packages/components/table/src/table.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"tableWrapper\"\n    :class=\"[\n      {\n        [ns.m('fit')]: fit,\n        [ns.m('striped')]: stripe,\n        [ns.m('border')]: border || isGroup,\n        [ns.m('hidden')]: isHidden,\n        [ns.m('group')]: isGroup,\n        [ns.m('fluid-height')]: maxHeight,\n        [ns.m('scrollable-x')]: layout.scrollX.value,\n        [ns.m('scrollable-y')]: layout.scrollY.value,\n        [ns.m('enable-row-hover')]: !store.states.isComplex.value,\n        [ns.m('enable-row-transition')]:\n          (store.states.data.value || []).length !== 0 &&\n          (store.states.data.value || []).length < 100,\n        'has-footer': showSummary,\n      },\n      ns.m(tableSize),\n      className,\n      ns.b(),\n      ns.m(`layout-${tableLayout}`),\n    ]\"\n    :style=\"style\"\n    :data-prefix=\"ns.namespace.value\"\n    @mouseleave=\"handleMouseLeave\"\n  >\n    <div ref=\"tableInnerWrapper\" :class=\"ns.e('inner-wrapper')\">\n      <div ref=\"hiddenColumns\" class=\"hidden-columns\">\n        <slot />\n      </div>\n      <div\n        v-if=\"showHeader && tableLayout === 'fixed'\"\n        ref=\"headerWrapper\"\n        v-mousewheel=\"handleHeaderFooterMousewheel\"\n        :class=\"ns.e('header-wrapper')\"\n      >\n        <table\n          ref=\"tableHeader\"\n          :class=\"ns.e('header')\"\n          :style=\"tableBodyStyles\"\n          border=\"0\"\n          cellpadding=\"0\"\n          cellspacing=\"0\"\n        >\n          <hColgroup\n            :columns=\"store.states.columns.value\"\n            :table-layout=\"tableLayout\"\n          />\n          <table-header\n            ref=\"tableHeaderRef\"\n            :border=\"border\"\n            :default-sort=\"defaultSort\"\n            :store=\"store\"\n            :append-filter-panel-to=\"appendFilterPanelTo\"\n            :allow-drag-last-column=\"allowDragLastColumn\"\n            @set-drag-visible=\"setDragVisible\"\n          />\n        </table>\n      </div>\n      <div ref=\"bodyWrapper\" :class=\"ns.e('body-wrapper')\">\n        <el-scrollbar\n          ref=\"scrollBarRef\"\n          :view-style=\"scrollbarViewStyle\"\n          :wrap-style=\"scrollbarStyle\"\n          :always=\"scrollbarAlwaysOn\"\n          :tabindex=\"scrollbarTabindex\"\n          :native=\"nativeScrollbar\"\n          @scroll=\"$emit('scroll', $event)\"\n        >\n          <table\n            ref=\"tableBody\"\n            :class=\"ns.e('body')\"\n            cellspacing=\"0\"\n            cellpadding=\"0\"\n            border=\"0\"\n            :style=\"{\n              width: bodyWidth,\n              tableLayout,\n            }\"\n          >\n            <hColgroup\n              :columns=\"store.states.columns.value\"\n              :table-layout=\"tableLayout\"\n            />\n            <table-header\n              v-if=\"showHeader && tableLayout === 'auto'\"\n              ref=\"tableHeaderRef\"\n              :class=\"ns.e('body-header')\"\n              :border=\"border\"\n              :default-sort=\"defaultSort\"\n              :store=\"store\"\n              :append-filter-panel-to=\"appendFilterPanelTo\"\n              @set-drag-visible=\"setDragVisible\"\n            />\n            <table-body\n              :context=\"context\"\n              :highlight=\"highlightCurrentRow\"\n              :row-class-name=\"rowClassName\"\n              :tooltip-effect=\"computedTooltipEffect\"\n              :tooltip-options=\"computedTooltipOptions\"\n              :row-style=\"rowStyle\"\n              :store=\"store\"\n              :stripe=\"stripe\"\n            />\n            <table-footer\n              v-if=\"showSummary && tableLayout === 'auto'\"\n              :class=\"ns.e('body-footer')\"\n              :border=\"border\"\n              :default-sort=\"defaultSort\"\n              :store=\"store\"\n              :sum-text=\"computedSumText\"\n              :summary-method=\"summaryMethod\"\n            />\n          </table>\n          <div\n            v-if=\"isEmpty\"\n            ref=\"emptyBlock\"\n            :style=\"emptyBlockStyle\"\n            :class=\"ns.e('empty-block')\"\n          >\n            <span :class=\"ns.e('empty-text')\">\n              <slot name=\"empty\">{{ computedEmptyText }}</slot>\n            </span>\n          </div>\n          <div\n            v-if=\"$slots.append\"\n            ref=\"appendWrapper\"\n            :class=\"ns.e('append-wrapper')\"\n          >\n            <slot name=\"append\" />\n          </div>\n        </el-scrollbar>\n      </div>\n      <div\n        v-if=\"showSummary && tableLayout === 'fixed'\"\n        v-show=\"!isEmpty\"\n        ref=\"footerWrapper\"\n        v-mousewheel=\"handleHeaderFooterMousewheel\"\n        :class=\"ns.e('footer-wrapper')\"\n      >\n        <table\n          :class=\"ns.e('footer')\"\n          cellspacing=\"0\"\n          cellpadding=\"0\"\n          border=\"0\"\n          :style=\"tableBodyStyles\"\n        >\n          <hColgroup\n            :columns=\"store.states.columns.value\"\n            :table-layout=\"tableLayout\"\n          />\n          <table-footer\n            :border=\"border\"\n            :default-sort=\"defaultSort\"\n            :store=\"store\"\n            :sum-text=\"computedSumText\"\n            :summary-method=\"summaryMethod\"\n          />\n        </table>\n      </div>\n      <div v-if=\"border || isGroup\" :class=\"ns.e('border-left-patch')\" />\n    </div>\n    <div\n      v-show=\"resizeProxyVisible\"\n      ref=\"resizeProxy\"\n      :class=\"ns.e('column-resize-proxy')\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" setup generic=\"T extends DefaultRow = DefaultRow\">\nimport { computed, getCurrentInstance, onBeforeUnmount, provide } from 'vue'\nimport { debounce } from 'lodash-unified'\nimport { Mousewheel as vMousewheel } from '@element-plus/directives'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { useGlobalConfig } from '@element-plus/components/config-provider'\nimport ElScrollbar from '@element-plus/components/scrollbar'\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 { createTableId } from './util'\nimport useUtils from './table/utils-helper'\nimport { convertToRows } from './table-header/utils-helper'\nimport useStyle from './table/style-helper'\nimport useKeyRender from './table/key-render-helper'\nimport { TABLE_INJECTION_KEY } from './tokens'\nimport { hColgroup } from './h-helper'\nimport { useScrollbar } from './composables/use-scrollbar'\n\nimport type { DefaultRow, Table, TableProps } from './table/defaults'\n\ndefineOptions({\n  name: 'ElTable',\n})\n\nconst props = withDefaults(defineProps<TableProps<T>>(), {\n  data: () => [],\n  fit: true,\n  showHeader: true,\n  selectOnIndeterminate: true,\n  indent: 16,\n  treeProps: () => ({\n    hasChildren: 'hasChildren',\n    children: 'children',\n    checkStrictly: false,\n  }),\n  style: () => ({}),\n  className: '',\n  tableLayout: 'fixed',\n  showOverflowTooltip: undefined,\n  scrollbarTabindex: undefined,\n  allowDragLastColumn: true,\n})\n\ndefineEmits([\n  'select',\n  'select-all',\n  'selection-change',\n  'cell-mouse-enter',\n  'cell-mouse-leave',\n  'cell-contextmenu',\n  'cell-click',\n  'cell-dblclick',\n  'row-click',\n  'row-contextmenu',\n  'row-dblclick',\n  'header-click',\n  'header-contextmenu',\n  'sort-change',\n  'filter-change',\n  'current-change',\n  'header-dragend',\n  'expand-change',\n  'scroll',\n])\n\nconst { t } = useLocale()\nconst ns = useNamespace('table')\nconst globalConfig = useGlobalConfig('table')\nconst table = getCurrentInstance() as Table<T>\nprovide(TABLE_INJECTION_KEY, table)\nconst store = createStore<T>(table, props)\ntable.store = store\nconst layout = new TableLayout<T>({\n  store: table.store,\n  table,\n  fit: props.fit,\n  showHeader: props.showHeader,\n})\ntable.layout = layout\n\nconst isEmpty = computed(() => (store.states.data.value || []).length === 0)\n\n/**\n * open functions\n */\nconst {\n  setCurrentRow,\n  getSelectionRows,\n  toggleRowSelection,\n  clearSelection,\n  clearFilter,\n  toggleAllSelection,\n  toggleRowExpansion,\n  clearSort,\n  sort,\n  updateKeyChildren,\n} = useUtils<T>(store)\nconst {\n  isHidden,\n  renderExpanded,\n  setDragVisible,\n  isGroup,\n  handleMouseLeave,\n  handleHeaderFooterMousewheel,\n  tableSize,\n  emptyBlockStyle,\n  resizeProxyVisible,\n  bodyWidth,\n  resizeState,\n  doLayout,\n  tableBodyStyles,\n  tableLayout,\n  scrollbarViewStyle,\n  scrollbarStyle,\n} = useStyle<T>(props, layout, store, table)\n\nconst { scrollBarRef, scrollTo, setScrollLeft, setScrollTop } = useScrollbar()\n\nconst debouncedUpdateLayout = debounce(doLayout, 50)\n\nconst tableId = createTableId(ns.namespace.value)\nconst context = table\ntable.tableId = tableId\ntable.state = {\n  isGroup,\n  resizeState,\n  doLayout,\n  debouncedUpdateLayout,\n}\nconst computedSumText = computed(() => props.sumText ?? t('el.table.sumText'))\n\nconst computedEmptyText = computed(() => {\n  return props.emptyText ?? t('el.table.emptyText')\n})\n\nconst computedTooltipEffect = computed(\n  () => props.tooltipEffect ?? globalConfig.value?.tooltipEffect\n)\n\nconst computedTooltipOptions = computed(\n  () => props.tooltipOptions ?? globalConfig.value?.tooltipOptions\n)\n\nconst columns = computed(() => {\n  return convertToRows(store.states.originColumns.value)[0]\n})\n\nuseKeyRender(table)\n\nonBeforeUnmount(() => {\n  debouncedUpdateLayout.cancel()\n})\n\ndefineExpose({\n  ns,\n  layout,\n  store,\n  columns,\n  handleHeaderFooterMousewheel,\n  handleMouseLeave,\n  tableId,\n  tableSize,\n  isHidden,\n  isEmpty,\n  renderExpanded,\n  resizeProxyVisible,\n  resizeState,\n  isGroup,\n  bodyWidth,\n  tableBodyStyles,\n  emptyBlockStyle,\n  debouncedUpdateLayout,\n  /**\n   * @description used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection\n   */\n  setCurrentRow,\n  /**\n   * @description returns the currently selected rows\n   */\n  getSelectionRows,\n  /**\n   * @description used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected\n   */\n  toggleRowSelection,\n  /**\n   * @description used in multiple selection Table, clear user selection\n   */\n  clearSelection,\n  /**\n   * @description clear filters of the columns whose `columnKey` are passed in. If no params, clear all filters\n   */\n  clearFilter,\n  /**\n   * @description used in multiple selection Table, toggle select all and deselect all\n   */\n  toggleAllSelection,\n  /**\n   * @description used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed\n   */\n  toggleRowExpansion,\n  /**\n   * @description clear sorting, restore data to the original order\n   */\n  clearSort,\n  /**\n   * @description refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout\n   */\n  doLayout,\n  /**\n   * @description sort Table manually. Property `prop` is used to set sort column, property `order` is used to set sort order\n   */\n  sort,\n  /**\n   * @description used in lazy Table, must set `rowKey`, update key children\n   */\n  updateKeyChildren,\n  t,\n  setDragVisible,\n  context,\n  computedSumText,\n  computedEmptyText,\n  computedTooltipEffect,\n  computedTooltipOptions,\n  tableLayout,\n  scrollbarViewStyle,\n  scrollbarStyle,\n  scrollBarRef,\n  /**\n   * @description scrolls to a particular set of coordinates\n   */\n  scrollTo,\n  /**\n   * @description set horizontal scroll position\n   */\n  setScrollLeft,\n  /**\n   * @description set vertical scroll position\n   */\n  setScrollTop,\n  /**\n   * @description whether to allow drag the last column\n   */\n  allowDragLastColumn: props.allowDragLastColumn,\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"table.mjs","names":[],"sources":["../../../../../../packages/components/table/src/table.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"tableWrapper\"\n    :class=\"[\n      {\n        [ns.m('fit')]: fit,\n        [ns.m('striped')]: stripe,\n        [ns.m('border')]: border || isGroup,\n        [ns.m('hidden')]: isHidden,\n        [ns.m('group')]: isGroup,\n        [ns.m('fluid-height')]: maxHeight,\n        [ns.m('scrollable-x')]: layout.scrollX.value,\n        [ns.m('scrollable-y')]: layout.scrollY.value,\n        [ns.m('enable-row-hover')]: !store.states.isComplex.value,\n        [ns.m('enable-row-transition')]:\n          (store.states.data.value || []).length !== 0 &&\n          (store.states.data.value || []).length < 100,\n        'has-footer': showSummary,\n      },\n      ns.m(tableSize),\n      className,\n      ns.b(),\n      ns.m(`layout-${tableLayout}`),\n    ]\"\n    :style=\"style\"\n    :data-prefix=\"ns.namespace.value\"\n    @mouseleave=\"handleMouseLeave\"\n  >\n    <div ref=\"tableInnerWrapper\" :class=\"ns.e('inner-wrapper')\">\n      <div ref=\"hiddenColumns\" class=\"hidden-columns\">\n        <slot />\n      </div>\n      <div\n        v-if=\"showHeader && tableLayout === 'fixed'\"\n        ref=\"headerWrapper\"\n        v-mousewheel=\"handleHeaderFooterMousewheel\"\n        :class=\"ns.e('header-wrapper')\"\n      >\n        <table\n          ref=\"tableHeader\"\n          :class=\"ns.e('header')\"\n          :style=\"tableBodyStyles\"\n          border=\"0\"\n          cellpadding=\"0\"\n          cellspacing=\"0\"\n        >\n          <hColgroup\n            :columns=\"store.states.columns.value\"\n            :table-layout=\"tableLayout\"\n          />\n          <table-header\n            ref=\"tableHeaderRef\"\n            :border=\"border\"\n            :default-sort=\"defaultSort\"\n            :store=\"store\"\n            :append-filter-panel-to=\"appendFilterPanelTo\"\n            :allow-drag-last-column=\"allowDragLastColumn\"\n            @set-drag-visible=\"setDragVisible\"\n          />\n        </table>\n      </div>\n      <div ref=\"bodyWrapper\" :class=\"ns.e('body-wrapper')\">\n        <el-scrollbar\n          ref=\"scrollBarRef\"\n          :view-style=\"scrollbarViewStyle\"\n          :wrap-style=\"scrollbarStyle\"\n          :always=\"scrollbarAlwaysOn\"\n          :tabindex=\"scrollbarTabindex\"\n          :native=\"nativeScrollbar\"\n          @scroll=\"$emit('scroll', $event)\"\n        >\n          <table\n            ref=\"tableBody\"\n            :class=\"ns.e('body')\"\n            cellspacing=\"0\"\n            cellpadding=\"0\"\n            border=\"0\"\n            :style=\"{\n              width: bodyWidth,\n              tableLayout,\n            }\"\n          >\n            <hColgroup\n              :columns=\"store.states.columns.value\"\n              :table-layout=\"tableLayout\"\n            />\n            <table-header\n              v-if=\"showHeader && tableLayout === 'auto'\"\n              ref=\"tableHeaderRef\"\n              :class=\"ns.e('body-header')\"\n              :border=\"border\"\n              :default-sort=\"defaultSort\"\n              :store=\"store\"\n              :append-filter-panel-to=\"appendFilterPanelTo\"\n              @set-drag-visible=\"setDragVisible\"\n            />\n            <table-body\n              :context=\"context\"\n              :highlight=\"highlightCurrentRow\"\n              :row-class-name=\"rowClassName\"\n              :tooltip-effect=\"computedTooltipEffect\"\n              :tooltip-options=\"computedTooltipOptions\"\n              :row-style=\"rowStyle\"\n              :store=\"store\"\n              :stripe=\"stripe\"\n            />\n            <table-footer\n              v-if=\"showSummary && tableLayout === 'auto'\"\n              :class=\"ns.e('body-footer')\"\n              :border=\"border\"\n              :default-sort=\"defaultSort\"\n              :store=\"store\"\n              :sum-text=\"computedSumText\"\n              :summary-method=\"summaryMethod\"\n            />\n          </table>\n          <div\n            v-if=\"isEmpty\"\n            ref=\"emptyBlock\"\n            :style=\"emptyBlockStyle\"\n            :class=\"ns.e('empty-block')\"\n          >\n            <span :class=\"ns.e('empty-text')\">\n              <slot name=\"empty\">{{ computedEmptyText }}</slot>\n            </span>\n          </div>\n          <div\n            v-if=\"$slots.append\"\n            ref=\"appendWrapper\"\n            :class=\"ns.e('append-wrapper')\"\n          >\n            <slot name=\"append\" />\n          </div>\n        </el-scrollbar>\n      </div>\n      <div\n        v-if=\"showSummary && tableLayout === 'fixed'\"\n        v-show=\"!isEmpty\"\n        ref=\"footerWrapper\"\n        v-mousewheel=\"handleHeaderFooterMousewheel\"\n        :class=\"ns.e('footer-wrapper')\"\n      >\n        <table\n          :class=\"ns.e('footer')\"\n          cellspacing=\"0\"\n          cellpadding=\"0\"\n          border=\"0\"\n          :style=\"tableBodyStyles\"\n        >\n          <hColgroup\n            :columns=\"store.states.columns.value\"\n            :table-layout=\"tableLayout\"\n          />\n          <table-footer\n            :border=\"border\"\n            :default-sort=\"defaultSort\"\n            :store=\"store\"\n            :sum-text=\"computedSumText\"\n            :summary-method=\"summaryMethod\"\n          />\n        </table>\n      </div>\n      <div v-if=\"border || isGroup\" :class=\"ns.e('border-left-patch')\" />\n    </div>\n    <div\n      v-show=\"resizeProxyVisible\"\n      ref=\"resizeProxy\"\n      :class=\"ns.e('column-resize-proxy')\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" setup generic=\"T extends DefaultRow = DefaultRow\">\nimport { computed, getCurrentInstance, onBeforeUnmount, provide } from 'vue'\nimport { debounce } from 'lodash-unified'\nimport { Mousewheel as vMousewheel } from '@element-plus/directives'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { useGlobalConfig } from '@element-plus/components/config-provider'\nimport ElScrollbar from '@element-plus/components/scrollbar'\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 { createTableId } from './util'\nimport useUtils from './table/utils-helper'\nimport { convertToRows } from './table-header/utils-helper'\nimport useStyle from './table/style-helper'\nimport useKeyRender from './table/key-render-helper'\nimport { TABLE_INJECTION_KEY } from './tokens'\nimport { hColgroup } from './h-helper'\nimport { useScrollbar } from './composables/use-scrollbar'\n\nimport type {\n  DefaultRow,\n  Table,\n  TableEmits,\n  TableProps,\n} from './table/defaults'\n\ndefineOptions({\n  name: 'ElTable',\n})\n\nconst props = withDefaults(defineProps<TableProps<T>>(), {\n  data: () => [],\n  fit: true,\n  showHeader: true,\n  selectOnIndeterminate: true,\n  indent: 16,\n  treeProps: () => ({\n    hasChildren: 'hasChildren',\n    children: 'children',\n    checkStrictly: false,\n  }),\n  style: () => ({}),\n  className: '',\n  tableLayout: 'fixed',\n  showOverflowTooltip: undefined,\n  scrollbarTabindex: undefined,\n  allowDragLastColumn: true,\n})\n\ndefineEmits<TableEmits<T>>()\n\nconst { t } = useLocale()\nconst ns = useNamespace('table')\nconst globalConfig = useGlobalConfig('table')\nconst table = getCurrentInstance() as Table<T>\nprovide(TABLE_INJECTION_KEY, table)\nconst store = createStore<T>(table, props)\ntable.store = store\nconst layout = new TableLayout<T>({\n  store: table.store,\n  table,\n  fit: props.fit,\n  showHeader: props.showHeader,\n})\ntable.layout = layout\n\nconst isEmpty = computed(() => (store.states.data.value || []).length === 0)\n\n/**\n * open functions\n */\nconst {\n  setCurrentRow,\n  getSelectionRows,\n  toggleRowSelection,\n  clearSelection,\n  clearFilter,\n  toggleAllSelection,\n  toggleRowExpansion,\n  clearSort,\n  sort,\n  updateKeyChildren,\n} = useUtils<T>(store)\nconst {\n  isHidden,\n  renderExpanded,\n  setDragVisible,\n  isGroup,\n  handleMouseLeave,\n  handleHeaderFooterMousewheel,\n  tableSize,\n  emptyBlockStyle,\n  resizeProxyVisible,\n  bodyWidth,\n  resizeState,\n  doLayout,\n  tableBodyStyles,\n  tableLayout,\n  scrollbarViewStyle,\n  scrollbarStyle,\n} = useStyle<T>(props, layout, store, table)\n\nconst { scrollBarRef, scrollTo, setScrollLeft, setScrollTop } = useScrollbar()\n\nconst debouncedUpdateLayout = debounce(doLayout, 50)\n\nconst tableId = createTableId(ns.namespace.value)\nconst context = table\ntable.tableId = tableId\ntable.state = {\n  isGroup,\n  resizeState,\n  doLayout,\n  debouncedUpdateLayout,\n}\nconst computedSumText = computed(() => props.sumText ?? t('el.table.sumText'))\n\nconst computedEmptyText = computed(() => {\n  return props.emptyText ?? t('el.table.emptyText')\n})\n\nconst computedTooltipEffect = computed(\n  () => props.tooltipEffect ?? globalConfig.value?.tooltipEffect\n)\n\nconst computedTooltipOptions = computed(\n  () => props.tooltipOptions ?? globalConfig.value?.tooltipOptions\n)\n\nconst columns = computed(() => {\n  return convertToRows(store.states.originColumns.value)[0]\n})\n\nuseKeyRender(table)\n\nonBeforeUnmount(() => {\n  debouncedUpdateLayout.cancel()\n})\n\ndefineExpose({\n  ns,\n  layout,\n  store,\n  columns,\n  handleHeaderFooterMousewheel,\n  handleMouseLeave,\n  tableId,\n  tableSize,\n  isHidden,\n  isEmpty,\n  renderExpanded,\n  resizeProxyVisible,\n  resizeState,\n  isGroup,\n  bodyWidth,\n  tableBodyStyles,\n  emptyBlockStyle,\n  debouncedUpdateLayout,\n  /**\n   * @description used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection\n   */\n  setCurrentRow,\n  /**\n   * @description returns the currently selected rows\n   */\n  getSelectionRows,\n  /**\n   * @description used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected\n   */\n  toggleRowSelection,\n  /**\n   * @description used in multiple selection Table, clear user selection\n   */\n  clearSelection,\n  /**\n   * @description clear filters of the columns whose `columnKey` are passed in. If no params, clear all filters\n   */\n  clearFilter,\n  /**\n   * @description used in multiple selection Table, toggle select all and deselect all\n   */\n  toggleAllSelection,\n  /**\n   * @description used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed\n   */\n  toggleRowExpansion,\n  /**\n   * @description clear sorting, restore data to the original order\n   */\n  clearSort,\n  /**\n   * @description refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout\n   */\n  doLayout,\n  /**\n   * @description sort Table manually. Property `prop` is used to set sort column, property `order` is used to set sort order\n   */\n  sort,\n  /**\n   * @description used in lazy Table, must set `rowKey`, update key children\n   */\n  updateKeyChildren,\n  t,\n  setDragVisible,\n  context,\n  computedSumText,\n  computedEmptyText,\n  computedTooltipEffect,\n  computedTooltipOptions,\n  tableLayout,\n  scrollbarViewStyle,\n  scrollbarStyle,\n  scrollBarRef,\n  /**\n   * @description scrolls to a particular set of coordinates\n   */\n  scrollTo,\n  /**\n   * @description set horizontal scroll position\n   */\n  setScrollLeft,\n  /**\n   * @description set vertical scroll position\n   */\n  setScrollTop,\n  /**\n   * @description whether to allow drag the last column\n   */\n  allowDragLastColumn: props.allowDragLastColumn,\n})\n</script>\n"],"mappings":""}