resolver-egretimp-plus 0.1.29 → 0.1.31

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

@@ -0,0 +1,244 @@
+// @ts-nocheck
+import {
+  defineComponent,
+  getCurrentInstance,
+  h,
+  inject,
+  nextTick,
+  onMounted,
+  ref,
+} from 'vue'
+import ElCheckbox from 'element-plus/es/components/checkbox/index.mjs'
+import { useNamespace } from 'element-plus/es/hooks/index.mjs'
+import FilterPanel from '../filter-panel.vue'
+import useLayoutObserver from '../layout-observer'
+import { TABLE_INJECTION_KEY } from '../tokens'
+import useEvent from './event-helper'
+import useStyle from './style.helper'
+import useUtils from './utils-helper'
+import type { ComponentInternalInstance, PropType, Ref } from 'vue'
+import type { DefaultRow, Sort } from '../table/defaults'
+import type { Store } from '../store'
+export interface TableHeader extends ComponentInternalInstance {
+  state: {
+    onColumnsChange
+    onScrollableChange
+  }
+  filterPanels: Ref<unknown>
+}
+export interface TableHeaderProps<T> {
+  fixed: string
+  store: Store<T>
+  border: boolean
+  defaultSort: Sort
+}
+
+export default defineComponent({
+  name: 'ElTableHeader',
+  components: {
+    ElCheckbox,
+  },
+  props: {
+    fixed: {
+      type: String,
+      default: '',
+    },
+    store: {
+      required: true,
+      type: Object as PropType<TableHeaderProps<DefaultRow>['store']>,
+    },
+    border: Boolean,
+    defaultSort: {
+      type: Object as PropType<TableHeaderProps<DefaultRow>['defaultSort']>,
+      default: () => {
+        return {
+          prop: '',
+          order: '',
+        }
+      },
+    },
+  },
+  setup(props, { emit }) {
+    const instance = getCurrentInstance() as TableHeader
+    const parent = inject(TABLE_INJECTION_KEY)
+    const ns = useNamespace('table')
+    const filterPanels = ref({})
+    const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent!)
+    onMounted(async () => {
+      // Need double await, because updateColumns is executed after nextTick for now
+      await nextTick()
+      await nextTick()
+      const { prop, order } = props.defaultSort
+      parent?.store.commit('sort', { prop, order, init: true })
+    })
+    const {
+      handleHeaderClick,
+      handleHeaderContextMenu,
+      handleMouseDown,
+      handleMouseMove,
+      handleMouseOut,
+      handleSortClick,
+      handleFilterClick,
+    } = useEvent(props as TableHeaderProps<unknown>, emit)
+    const {
+      getHeaderRowStyle,
+      getHeaderRowClass,
+      getHeaderCellStyle,
+      getHeaderCellClass,
+    } = useStyle(props as TableHeaderProps<unknown>)
+    const { isGroup, toggleAllSelection, columnRows } = useUtils(
+      props as TableHeaderProps<unknown>
+    )
+
+    instance.state = {
+      onColumnsChange,
+      onScrollableChange,
+    }
+    instance.filterPanels = filterPanels
+
+    return {
+      ns,
+      filterPanels,
+      onColumnsChange,
+      onScrollableChange,
+      columnRows,
+      getHeaderRowClass,
+      getHeaderRowStyle,
+      getHeaderCellClass,
+      getHeaderCellStyle,
+      handleHeaderClick,
+      handleHeaderContextMenu,
+      handleMouseDown,
+      handleMouseMove,
+      handleMouseOut,
+      handleSortClick,
+      handleFilterClick,
+      isGroup,
+      toggleAllSelection,
+    }
+  },
+  render() {
+    const {
+      ns,
+      isGroup,
+      columnRows,
+      getHeaderCellStyle,
+      getHeaderCellClass,
+      getHeaderRowClass,
+      getHeaderRowStyle,
+      handleHeaderClick,
+      handleHeaderContextMenu,
+      handleMouseDown,
+      handleMouseMove,
+      handleSortClick,
+      handleMouseOut,
+      store,
+      $parent,
+    } = this
+    let rowSpan = 1
+    return h(
+      'thead',
+      {
+        class: { [ns.is('group')]: isGroup },
+      },
+      columnRows.map((subColumns, rowIndex) =>
+        h(
+          'tr',
+          {
+            class: getHeaderRowClass(rowIndex),
+            key: rowIndex,
+            style: getHeaderRowStyle(rowIndex),
+          },
+          subColumns.map((column, cellIndex) => {
+            if (column.rowSpan > rowSpan) {
+              rowSpan = column.rowSpan
+            }
+            return h(
+              'th',
+              {
+                class: getHeaderCellClass(
+                  rowIndex,
+                  cellIndex,
+                  subColumns,
+                  column
+                ),
+                colspan: column.colSpan,
+                key: `${column.id}-thead`,
+                rowspan: column.rowSpan,
+                style: getHeaderCellStyle(
+                  rowIndex,
+                  cellIndex,
+                  subColumns,
+                  column
+                ),
+                onClick: ($event) => {
+                  if ($event.currentTarget.classList.contains('noclick')) {
+                    return
+                  }
+                  handleHeaderClick($event, column)
+                },
+                onContextmenu: ($event) =>
+                  handleHeaderContextMenu($event, column),
+                onMousedown: ($event) => handleMouseDown($event, column),
+                onMousemove: ($event) => handleMouseMove($event, column),
+                onMouseout: handleMouseOut,
+              },
+              [
+                h(
+                  'div',
+                  {
+                    class: [
+                      'cell',
+                      column.filteredValue && column.filteredValue.length > 0
+                        ? 'highlight'
+                        : '',
+                    ],
+                  },
+                  [
+                    column.renderHeader
+                      ? column.renderHeader({
+                          column,
+                          $index: cellIndex,
+                          store,
+                          _self: $parent,
+                        })
+                      : column.label,
+                    column.sortable &&
+                      h(
+                        'span',
+                        {
+                          onClick: ($event) => handleSortClick($event, column),
+                          class: 'caret-wrapper',
+                        },
+                        [
+                          h('i', {
+                            onClick: ($event) =>
+                              handleSortClick($event, column, 'ascending'),
+                            class: 'sort-caret ascending',
+                          }),
+                          h('i', {
+                            onClick: ($event) =>
+                              handleSortClick($event, column, 'descending'),
+                            class: 'sort-caret descending',
+                          }),
+                        ]
+                      ),
+                    column.filterable &&
+                      h(FilterPanel, {
+                        store,
+                        placement: column.filterPlacement || 'bottom-start',
+                        column,
+                        upDataColumn: (key, value) => {
+                          column[key] = value
+                        },
+                      }),
+                  ]
+                ),
+              ]
+            )
+          })
+        )
+      )
+    )
+  },
+})

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

@@ -0,0 +1,119 @@
+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 { TableHeaderProps } from '.'
+
+function useStyle<T>(props: TableHeaderProps<T>) {
+  const parent = inject(TABLE_INJECTION_KEY)
+  const ns = useNamespace('table')
+
+  const getHeaderRowStyle = (rowIndex: number) => {
+    const headerRowStyle = parent?.props.headerRowStyle
+    if (typeof headerRowStyle === 'function') {
+      return headerRowStyle.call(null, { rowIndex })
+    }
+    return headerRowStyle
+  }
+
+  const getHeaderRowClass = (rowIndex: number): string => {
+    const classes: string[] = []
+    const headerRowClassName = parent?.props.headerRowClassName
+    if (typeof headerRowClassName === 'string') {
+      classes.push(headerRowClassName)
+    } else if (typeof headerRowClassName === 'function') {
+      classes.push(headerRowClassName.call(null, { rowIndex }))
+    }
+
+    return classes.join(' ')
+  }
+
+  const getHeaderCellStyle = (
+    rowIndex: number,
+    columnIndex: number,
+    row: T,
+    column: TableColumnCtx<T>
+  ) => {
+    let headerCellStyles = parent?.props.headerCellStyle ?? {}
+    if (typeof headerCellStyles === 'function') {
+      headerCellStyles = headerCellStyles.call(null, {
+        rowIndex,
+        columnIndex,
+        row,
+        column,
+      })
+    }
+    const fixedStyle = getFixedColumnOffset<T>(
+      columnIndex,
+      column.fixed,
+      props.store,
+      row as unknown as TableColumnCtx<T>[]
+    )
+    ensurePosition(fixedStyle, 'left')
+    ensurePosition(fixedStyle, 'right')
+    return Object.assign({}, headerCellStyles, fixedStyle)
+  }
+
+  const getHeaderCellClass = (
+    rowIndex: number,
+    columnIndex: number,
+    row: T,
+    column: TableColumnCtx<T>
+  ) => {
+    const fixedClasses = getFixedColumnsClass<T>(
+      ns.b(),
+      columnIndex,
+      column.fixed,
+      props.store,
+      row as unknown as TableColumnCtx<T>[]
+    )
+    const classes = [
+      column.id,
+      column.order,
+      column.headerAlign,
+      column.className,
+      column.labelClassName,
+      ...fixedClasses,
+    ]
+
+    if (!column.children) {
+      classes.push('is-leaf')
+    }
+
+    if (column.sortable) {
+      classes.push('is-sortable')
+    }
+
+    const headerCellClassName = parent?.props.headerCellClassName
+    if (typeof headerCellClassName === 'string') {
+      classes.push(headerCellClassName)
+    } else if (typeof headerCellClassName === 'function') {
+      classes.push(
+        headerCellClassName.call(null, {
+          rowIndex,
+          columnIndex,
+          row,
+          column,
+        })
+      )
+    }
+
+    classes.push(ns.e('cell'))
+
+    return classes.filter((className) => Boolean(className)).join(' ')
+  }
+
+  return {
+    getHeaderRowStyle,
+    getHeaderRowClass,
+    getHeaderCellStyle,
+    getHeaderCellClass,
+  }
+}
+
+export default useStyle

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

@@ -0,0 +1,94 @@
+// @ts-nocheck
+import { computed, inject } from 'vue'
+import { TABLE_INJECTION_KEY } from '../tokens'
+import type { TableColumnCtx } from '../table-column/defaults'
+import type { TableHeaderProps } from '.'
+
+const getAllColumns = <T>(
+  columns: TableColumnCtx<T>[]
+): TableColumnCtx<T>[] => {
+  const result: TableColumnCtx<T>[] = []
+  columns.forEach((column) => {
+    if (column.children) {
+      result.push(column)
+      // eslint-disable-next-line prefer-spread
+      result.push.apply(result, getAllColumns(column.children))
+    } else {
+      result.push(column)
+    }
+  })
+  return result
+}
+
+export const convertToRows = <T>(
+  originColumns: TableColumnCtx<T>[]
+): TableColumnCtx<T>[] => {
+  let maxLevel = 1
+  const traverse = (column: TableColumnCtx<T>, parent: TableColumnCtx<T>) => {
+    if (parent) {
+      column.level = parent.level + 1
+      if (maxLevel < column.level) {
+        maxLevel = column.level
+      }
+    }
+    if (column.children) {
+      let colSpan = 0
+      column.children.forEach((subColumn) => {
+        traverse(subColumn, column)
+        colSpan += subColumn.colSpan
+      })
+      column.colSpan = colSpan
+    } else {
+      column.colSpan = 1
+    }
+  }
+
+  originColumns.forEach((column) => {
+    column.level = 1
+    traverse(column, undefined)
+  })
+
+  const rows = []
+  for (let i = 0; i < maxLevel; i++) {
+    rows.push([])
+  }
+
+  const allColumns: TableColumnCtx<T>[] = getAllColumns(originColumns)
+
+  allColumns.forEach((column) => {
+    if (!column.children) {
+      column.rowSpan = maxLevel - column.level + 1
+    } else {
+      column.rowSpan = 1
+      column.children.forEach((col) => (col.isSubColumn = true))
+    }
+    rows[column.level - 1].push(column)
+  })
+
+  return rows
+}
+
+function useUtils<T>(props: TableHeaderProps<T>) {
+  const parent = inject(TABLE_INJECTION_KEY)
+  const columnRows = computed(() => {
+    return convertToRows(props.store.states.originColumns.value)
+  })
+  const isGroup = computed(() => {
+    const result = columnRows.value.length > 1
+    if (result && parent) {
+      parent.state.isGroup.value = true
+    }
+    return result
+  })
+  const toggleAllSelection = (event: Event) => {
+    event.stopPropagation()
+    parent?.store.commit('toggleAllSelection')
+  }
+  return {
+    isGroup,
+    toggleAllSelection,
+    columnRows,
+  }
+}
+
+export default useUtils

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

@@ -0,0 +1,259 @@
+// @ts-nocheck
+import { isRef, nextTick, ref } from 'vue'
+import { hasOwn, isClient } from 'element-plus/es/utils/index.mjs'
+import { parseHeight } from './util'
+import type { Ref } from 'vue'
+
+import type { TableColumnCtx } from './table-column/defaults'
+import type { TableHeader } from './table-header'
+import type { Table } from './table/defaults'
+import type { Store } from './store'
+class TableLayout<T> {
+  observers: TableHeader[]
+  table: Table<T>
+  store: Store<T>
+  columns: TableColumnCtx<T>[]
+  fit: boolean
+  showHeader: boolean
+
+  height: Ref<null | number>
+  scrollX: Ref<boolean>
+  scrollY: Ref<boolean>
+  bodyWidth: Ref<null | number>
+  fixedWidth: Ref<null | number>
+  rightFixedWidth: Ref<null | number>
+  tableHeight: Ref<null | number>
+  headerHeight: Ref<null | number> // Table Header Height
+  appendHeight: Ref<null | number> // Append Slot Height
+  footerHeight: Ref<null | number> // Table Footer Height
+  gutterWidth: number
+  constructor(options: Record<string, any>) {
+    this.observers = []
+    this.table = null
+    this.store = null
+    this.columns = []
+    this.fit = true
+    this.showHeader = true
+    this.height = ref(null)
+    this.scrollX = ref(false)
+    this.scrollY = ref(false)
+    this.bodyWidth = ref(null)
+    this.fixedWidth = ref(null)
+    this.rightFixedWidth = ref(null)
+    this.gutterWidth = 0
+    for (const name in options) {
+      if (hasOwn(options, name)) {
+        if (isRef(this[name])) {
+          this[name as string].value = options[name]
+        } else {
+          this[name as string] = options[name]
+        }
+      }
+    }
+    if (!this.table) {
+      throw new Error('Table is required for Table Layout')
+    }
+    if (!this.store) {
+      throw new Error('Store is required for Table Layout')
+    }
+  }
+
+  updateScrollY() {
+    const height = this.height.value
+    /**
+     * When the height is not initialized, it is null.
+     * After the table is initialized, when the height is not configured, the height is 0.
+     */
+    if (height === null) return false
+    const scrollBarRef = this.table.refs.scrollBarRef
+    if (this.table.vnode.el && scrollBarRef?.wrapRef) {
+      let scrollY = true
+      const prevScrollY = this.scrollY.value
+      scrollY =
+        scrollBarRef.wrapRef.scrollHeight > scrollBarRef.wrapRef.clientHeight
+      this.scrollY.value = scrollY
+      return prevScrollY !== scrollY
+    }
+    return false
+  }
+
+  setHeight(value: string | number, prop = 'height') {
+    if (!isClient) return
+    const el = this.table.vnode.el
+    value = parseHeight(value)
+    this.height.value = Number(value)
+
+    if (!el && (value || value === 0))
+      return nextTick(() => this.setHeight(value, prop))
+
+    if (typeof value === 'number') {
+      el.style[prop] = `${value}px`
+      this.updateElsHeight()
+    } else if (typeof value === 'string') {
+      el.style[prop] = value
+      this.updateElsHeight()
+    }
+  }
+
+  setMaxHeight(value: string | number) {
+    this.setHeight(value, 'max-height')
+  }
+
+  getFlattenColumns(): TableColumnCtx<T>[] {
+    const flattenColumns = []
+    const columns = this.table.store.states.columns.value
+    columns.forEach((column) => {
+      if (column.isColumnGroup) {
+        // eslint-disable-next-line prefer-spread
+        flattenColumns.push.apply(flattenColumns, column.columns)
+      } else {
+        flattenColumns.push(column)
+      }
+    })
+
+    return flattenColumns
+  }
+
+  updateElsHeight() {
+    this.updateScrollY()
+    this.notifyObservers('scrollable')
+  }
+
+  headerDisplayNone(elm: HTMLElement) {
+    if (!elm) return true
+    let headerChild = elm
+    while (headerChild.tagName !== 'DIV') {
+      if (getComputedStyle(headerChild).display === 'none') {
+        return true
+      }
+      headerChild = headerChild.parentElement
+    }
+    return false
+  }
+
+  updateColumnsWidth() {
+    if (!isClient) return
+    const fit = this.fit
+    const bodyWidth = this.table.vnode.el.clientWidth
+    let bodyMinWidth = 0
+
+    const flattenColumns = this.getFlattenColumns()
+    const flexColumns = flattenColumns.filter(
+      (column) => typeof column.width !== 'number'
+    )
+    flattenColumns.forEach((column) => {
+      // Clean those columns whose width changed from flex to unflex
+      if (typeof column.width === 'number' && column.realWidth)
+        column.realWidth = null
+    })
+    if (flexColumns.length > 0 && fit) {
+      flattenColumns.forEach((column) => {
+        bodyMinWidth += Number(column.width || column.minWidth || 80)
+      })
+      if (bodyMinWidth <= bodyWidth) {
+        // DON'T HAVE SCROLL BAR
+        this.scrollX.value = false
+
+        const totalFlexWidth = bodyWidth - bodyMinWidth
+
+        if (flexColumns.length === 1) {
+          flexColumns[0].realWidth =
+            Number(flexColumns[0].minWidth || 80) + totalFlexWidth
+        } else {
+          const allColumnsWidth = flexColumns.reduce(
+            (prev, column) => prev + Number(column.minWidth || 80),
+            0
+          )
+          const flexWidthPerPixel = totalFlexWidth / allColumnsWidth
+          let noneFirstWidth = 0
+
+          flexColumns.forEach((column, index) => {
+            if (index === 0) return
+            const flexWidth = Math.floor(
+              Number(column.minWidth || 80) * flexWidthPerPixel
+            )
+            noneFirstWidth += flexWidth
+            column.realWidth = Number(column.minWidth || 80) + flexWidth
+          })
+
+          flexColumns[0].realWidth =
+            Number(flexColumns[0].minWidth || 80) +
+            totalFlexWidth -
+            noneFirstWidth
+        }
+      } else {
+        // HAVE HORIZONTAL SCROLL BAR
+        this.scrollX.value = true
+        flexColumns.forEach((column) => {
+          column.realWidth = Number(column.minWidth)
+        })
+      }
+
+      this.bodyWidth.value = Math.max(bodyMinWidth, bodyWidth)
+      this.table.state.resizeState.value.width = this.bodyWidth.value
+    } else {
+      flattenColumns.forEach((column) => {
+        if (!column.width && !column.minWidth) {
+          column.realWidth = 80
+        } else {
+          column.realWidth = Number(column.width || column.minWidth)
+        }
+        bodyMinWidth += column.realWidth
+      })
+      this.scrollX.value = bodyMinWidth > bodyWidth
+
+      this.bodyWidth.value = bodyMinWidth
+    }
+
+    const fixedColumns = this.store.states.fixedColumns.value
+
+    if (fixedColumns.length > 0) {
+      let fixedWidth = 0
+      fixedColumns.forEach((column) => {
+        fixedWidth += Number(column.realWidth || column.width)
+      })
+
+      this.fixedWidth.value = fixedWidth
+    }
+
+    const rightFixedColumns = this.store.states.rightFixedColumns.value
+    if (rightFixedColumns.length > 0) {
+      let rightFixedWidth = 0
+      rightFixedColumns.forEach((column) => {
+        rightFixedWidth += Number(column.realWidth || column.width)
+      })
+
+      this.rightFixedWidth.value = rightFixedWidth
+    }
+    this.notifyObservers('columns')
+  }
+
+  addObserver(observer: TableHeader) {
+    this.observers.push(observer)
+  }
+
+  removeObserver(observer: TableHeader) {
+    const index = this.observers.indexOf(observer)
+    if (index !== -1) {
+      this.observers.splice(index, 1)
+    }
+  }
+
+  notifyObservers(event: string) {
+    const observers = this.observers
+    observers.forEach((observer) => {
+      switch (event) {
+        case 'columns':
+          observer.state?.onColumnsChange(this)
+          break
+        case 'scrollable':
+          observer.state?.onScrollableChange(this)
+          break
+        default:
+          throw new Error(`Table Layout don't have event ${event}.`)
+      }
+    })
+  }
+}
+
+export default TableLayout