resolver-egretimp-plus 0.1.29 → 0.1.31

package/src/components/table/src/table-body/index.ts

@@ -0,0 +1,119 @@
+// @ts-nocheck
+import {
+  defineComponent,
+  getCurrentInstance,
+  h,
+  inject,
+  onUnmounted,
+  watch,
+} from 'vue'
+import { addClass, isClient, rAF, removeClass } from 'element-plus/es/utils/index.mjs'
+import { useNamespace } from 'element-plus/es/hooks/index.mjs'
+import useLayoutObserver from '../layout-observer'
+import { removePopper } from '../util'
+import { TABLE_INJECTION_KEY } from '../tokens'
+import useRender from './render-helper'
+import defaultProps from './defaults'
+
+import type { VNode } from 'vue'
+
+export default defineComponent({
+  name: 'ElTableBody',
+  props: defaultProps,
+  setup(props) {
+    const instance = getCurrentInstance()
+    const parent = inject(TABLE_INJECTION_KEY)
+    const ns = useNamespace('table')
+    const { wrappedRowRender, tooltipContent, tooltipTrigger } =
+      useRender(props)
+    const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent!)
+
+    const hoveredCellList = []
+    watch(props.store.states.hoverRow, (newVal: any, oldVal: any) => {
+      const el = instance?.vnode.el as HTMLElement
+      const rows = Array.from(el?.children || []).filter((e) =>
+        e?.classList.contains(`${ns.e('row')}`)
+      )
+
+      // hover rowSpan > 1 choose the whole row
+      let rowNum = newVal
+      const childNodes = rows[rowNum]?.childNodes
+      if (childNodes?.length) {
+        let control = 0
+        const indexes = Array.from(childNodes).reduce((acc, item, index) => {
+          // drop colsSpan
+          if (childNodes[index]?.colSpan > 1) {
+            control = childNodes[index]?.colSpan
+          }
+          if (item.nodeName !== 'TD' && control === 0) {
+            acc.push(index)
+          }
+          control > 0 && control--
+          return acc
+        }, [])
+
+        indexes.forEach((rowIndex) => {
+          rowNum = newVal
+          while (rowNum > 0) {
+            // find from previous
+            const preChildNodes = rows[rowNum - 1]?.childNodes
+            if (
+              preChildNodes[rowIndex] &&
+              preChildNodes[rowIndex].nodeName === 'TD' &&
+              preChildNodes[rowIndex].rowSpan > 1
+            ) {
+              addClass(preChildNodes[rowIndex], 'hover-cell')
+              hoveredCellList.push(preChildNodes[rowIndex])
+              break
+            }
+            rowNum--
+          }
+        })
+      } else {
+        hoveredCellList.forEach((item) => removeClass(item, 'hover-cell'))
+        hoveredCellList.length = 0
+      }
+      if (!props.store.states.isComplex.value || !isClient) return
+
+      rAF(() => {
+        // just get first level children; fix #9723
+        const oldRow = rows[oldVal]
+        const newRow = rows[newVal]
+        // when there is fixed row, hover on rowSpan > 1 should not clear the class
+        if (oldRow && !oldRow.classList.contains('hover-fixed-row')) {
+          removeClass(oldRow, 'hover-row')
+        }
+        if (newRow) {
+          addClass(newRow, 'hover-row')
+        }
+      })
+    })
+
+    onUnmounted(() => {
+      removePopper?.()
+    })
+
+    return {
+      ns,
+      onColumnsChange,
+      onScrollableChange,
+      wrappedRowRender,
+      tooltipContent,
+      tooltipTrigger,
+    }
+  },
+  render() {
+    const { wrappedRowRender, store } = this
+    const data = store.states.data.value || []
+    // Why do we need tabIndex: -1 ?
+    // If you set the tabindex attribute on an element ,
+    // then its child content cannot be scrolled with the arrow keys,
+    // unless you set tabindex on the content too
+    // See https://github.com/facebook/react/issues/25462#issuecomment-1274775248 or https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/tabindex
+    return h('tbody', { tabIndex: -1 }, [
+      data.reduce((acc: VNode[], row) => {
+        return acc.concat(wrappedRowRender(row, acc.length))
+      }, []),
+    ])
+  },
+})

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

@@ -0,0 +1,283 @@
+// @ts-nocheck
+import { computed, h, inject } from 'vue'
+import { merge } from 'lodash-unified'
+import { useNamespace } from 'element-plus/es/hooks/index.mjs'
+import { getRowIdentity } from '../util'
+import { TABLE_INJECTION_KEY } from '../tokens'
+import useEvents from './events-helper'
+import useStyles from './styles-helper'
+import type { TableBodyProps } from './defaults'
+import type { RenderRowData, TableProps, TreeNode } from '../table/defaults'
+
+function useRender<T>(props: Partial<TableBodyProps<T>>) {
+  const parent = inject(TABLE_INJECTION_KEY)
+  const ns = useNamespace('table')
+  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: T, index: number) => {
+    const rowKey = (parent.props as Partial<TableProps<T>>).rowKey
+    if (rowKey) {
+      return getRowIdentity(row, rowKey)
+    }
+    return index
+  }
+  const rowRender = (
+    row: T,
+    $index: number,
+    treeRowData?: TreeNode,
+    expanded = false
+  ) => {
+    const { tooltipEffect, tooltipOptions, store } = props
+    const { indent, columns } = store.states
+    const rowClasses = getRowClass(row, $index)
+    let display = true
+    if (treeRowData) {
+      rowClasses.push(ns.em('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 = Object.assign({}, column)
+        columnData.realWidth = getColspanRealWidth(
+          columns.value,
+          colspan,
+          cellIndex
+        )
+        const data: RenderRowData<T> = {
+          store: props.store,
+          _self: props.context || parent,
+          column: columnData,
+          row,
+          $index,
+          cellIndex,
+          expanded,
+        }
+        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 = `${getKeyOfRow(row, $index)},${cellIndex}`
+        const patchKey = columnData.columnKey || columnData.rawColumnKey || ''
+        const tdChildren = cellChildren(cellIndex, column, data)
+
+        let mergedTooltipOptions = 
+          column.showOverflowTooltip &&
+          merge(
+            {
+              effect: tooltipEffect,
+            },
+            tooltipOptions,
+            column.showOverflowTooltip
+          )
+        if (typeof column.showOverflowTooltip === 'function') {
+          mergedTooltipOptions.showOverflowTooltip = () => {
+            return column.showOverflowTooltip(data)
+          }
+        }
+        return h(
+          'td',
+          {
+            style: getCellStyle($index, cellIndex, row, column),
+            class: getCellClass($index, cellIndex, row, column, colspan - 1),
+            key: `${patchKey}${baseKey}`,
+            rowspan,
+            colspan,
+            onMouseenter: ($event) =>
+              handleCellMouseEnter($event, row, mergedTooltipOptions),
+            onMouseleave: handleCellMouseLeave,
+          },
+          [tdChildren]
+        )
+      })
+    )
+  }
+  const cellChildren = (cellIndex, column, data) => {
+    return column.renderCell(data)
+  }
+
+  const wrappedRowRender = (row: T, $index: number) => {
+    const store = props.store
+    const { isRowExpanded, assertRowKey } = store
+    const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } =
+      store.states
+    const columns = store.states.columns.value
+    const hasExpandColumn = columns.some(({ type }) => type === 'expand')
+    if (hasExpandColumn) {
+      const expanded = isRowExpanded(row)
+      const tr = rowRender(row, $index, undefined, expanded)
+      const renderExpanded = parent.renderExpanded
+      if (expanded) {
+        if (!renderExpanded) {
+          console.error('[Element Error]renderExpanded is required.')
+          return tr
+        }
+        // 使用二维数组，避免修改 $index
+        // Use a matrix to avoid modifying $index
+        return [
+          [
+            tr,
+            h(
+              'tr',
+              {
+                key: `expanded-row__${tr.key as string}`,
+              },
+              [
+                h(
+                  'td',
+                  {
+                    colspan: columns.length,
+                    class: `${ns.e('cell')} ${ns.e('expanded-cell')}`,
+                  },
+                  [renderExpanded({ row, $index, store, expanded })]
+                ),
+              ]
+            ),
+          ],
+        ]
+      } else {
+        // 使用二维数组，避免修改 $index
+        // Use a two dimensional array avoid modifying $index
+        return [[tr]]
+      }
+    } else if (Object.keys(treeData.value).length) {
+      assertRowKey()
+      // TreeTable 时，rowKey 必须由用户设定，不使用 getKeyOfRow 计算
+      // 在调用 rowRender 函数时，仍然会计算 rowKey，不太好的操作
+      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) {
+        // currentRow 记录的是 index，所以还需主动增加 TreeTable 的 index
+        let i = 0
+        const traverse = (children, parent) => {
+          if (!(children && children.length && parent)) return
+          children.forEach((node) => {
+            // 父节点的 display 状态影响子节点的显示状态
+            const innerTreeRowData = {
+              display: parent.display && parent.expanded,
+              level: parent.level + 1,
+              expanded: false,
+              noLazyChildren: false,
+              loading: false,
+            }
+            const childKey = getRowIdentity(node, rowKey.value)
+            if (childKey === undefined || childKey === null) {
+              throw new Error('For nested data item, row-key is required.')
+            }
+            cur = { ...treeData.value[childKey] }
+            // 对于当前节点，分成有无子节点两种情况。
+            // 如果包含子节点的，设置 expanded 属性。
+            // 对于它子节点的 display 属性由它本身的 expanded 与 display 共同决定。
+            if (cur) {
+              innerTreeRowData.expanded = cur.expanded
+              // 懒加载的某些节点，level 未知
+              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 nodes =
+                lazyTreeNodeMap.value[childKey] ||
+                node[childrenColumnName.value]
+              traverse(nodes, cur)
+            }
+          })
+        }
+        // 对于 root 节点，display 一定为 true
+        cur.display = true
+        const nodes =
+          lazyTreeNodeMap.value[key] || row[childrenColumnName.value]
+        traverse(nodes, cur)
+      }
+      return tmp
+    } else {
+      return rowRender(row, $index, undefined)
+    }
+  }
+
+  return {
+    wrappedRowRender,
+    tooltipContent,
+    tooltipTrigger,
+  }
+}
+
+export default useRender

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

@@ -0,0 +1,164 @@
+// @ts-nocheck
+import { inject } from 'vue'
+import { useNamespace } from 'element-plus/es/hooks/index.mjs'
+import {
+  ensurePosition,
+  getFixedColumnOffset,
+  getFixedColumnsClass,
+} from '../util'
+import { TABLE_INJECTION_KEY } from '../tokens'
+import type { TableColumnCtx } from '../table-column/defaults'
+import type { TableBodyProps } from './defaults'
+
+function useStyles<T>(props: Partial<TableBodyProps<T>>) {
+  const parent = inject(TABLE_INJECTION_KEY)
+  const ns = useNamespace('table')
+
+  const getRowStyle = (row: T, rowIndex: number) => {
+    const rowStyle = parent?.props.rowStyle
+    if (typeof rowStyle === 'function') {
+      return rowStyle.call(null, {
+        row,
+        rowIndex,
+      })
+    }
+    return rowStyle || null
+  }
+
+  const getRowClass = (row: T, rowIndex: number) => {
+    const classes = [ns.e('row')]
+    if (
+      parent?.props.highlightCurrentRow &&
+      row === props.store.states.currentRow.value
+    ) {
+      classes.push('current-row')
+    }
+
+    if (props.stripe && rowIndex % 2 === 1) {
+      classes.push(ns.em('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,
+        })
+      )
+    }
+    return classes
+  }
+
+  const getCellStyle = (
+    rowIndex: number,
+    columnIndex: number,
+    row: T,
+    column: TableColumnCtx<T>
+  ) => {
+    const cellStyle = parent?.props.cellStyle
+    let cellStyles = cellStyle ?? {}
+    if (typeof cellStyle === 'function') {
+      cellStyles = cellStyle.call(null, {
+        rowIndex,
+        columnIndex,
+        row,
+        column,
+      })
+    }
+    const fixedStyle = getFixedColumnOffset(
+      columnIndex,
+      props?.fixed,
+      props.store
+    )
+    ensurePosition(fixedStyle, 'left')
+    ensurePosition(fixedStyle, 'right')
+    return Object.assign({}, cellStyles, fixedStyle)
+  }
+
+  const getCellClass = (
+    rowIndex: number,
+    columnIndex: number,
+    row: T,
+    column: TableColumnCtx<T>,
+    offset: number
+  ) => {
+    const fixedClasses = getFixedColumnsClass(
+      ns.b(),
+      columnIndex,
+      props?.fixed,
+      props.store,
+      undefined,
+      offset
+    )
+    const classes = [column.id, column.align, column.className, ...fixedClasses]
+    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(ns.e('cell'))
+    return classes.filter((className) => Boolean(className)).join(' ')
+  }
+  const getSpan = (
+    row: T,
+    column: TableColumnCtx<T>,
+    rowIndex: number,
+    columnIndex: number
+  ) => {
+    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: TableColumnCtx<T>[],
+    colspan: number,
+    index: number
+  ): number => {
+    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,
+  }
+}
+
+export default useStyles