resolver-egretimp-plus 0.1.30 → 0.1.31

package/src/components/table/src/table-column/watcher-helper.ts

@@ -0,0 +1,88 @@
+// @ts-nocheck
+import { getCurrentInstance, watch } from 'vue'
+import { hasOwn } from 'element-plus/es/utils/index.mjs'
+import { parseMinWidth, parseWidth } from '../util'
+
+import type { ComputedRef } from 'vue'
+import type { TableColumn, TableColumnCtx, ValueOf } from './defaults'
+
+function getAllAliases(props, aliases) {
+  return props.reduce((prev, cur) => {
+    prev[cur] = cur
+    return prev
+  }, aliases)
+}
+function useWatcher<T>(
+  owner: ComputedRef<any>,
+  props_: Partial<TableColumnCtx<T>>
+) {
+  const instance = getCurrentInstance() as TableColumn<T>
+  const registerComplexWatchers = () => {
+    const props = ['fixed']
+    const aliases = {
+      realWidth: 'width',
+      realMinWidth: 'minWidth',
+    }
+    const allAliases = getAllAliases(props, aliases)
+    Object.keys(allAliases).forEach((key) => {
+      const columnKey = aliases[key]
+      if (hasOwn(props_, columnKey)) {
+        watch(
+          () => props_[columnKey],
+          (newVal) => {
+            let value: ValueOf<TableColumnCtx<T>> = newVal
+            if (columnKey === 'width' && key === 'realWidth') {
+              value = parseWidth(newVal)
+            }
+            if (columnKey === 'minWidth' && key === 'realMinWidth') {
+              value = parseMinWidth(newVal)
+            }
+            instance.columnConfig.value[columnKey as any] = value
+            instance.columnConfig.value[key] = value
+            const updateColumns = columnKey === 'fixed'
+            owner.value.store.scheduleLayout(updateColumns)
+          }
+        )
+      }
+    })
+  }
+  const registerNormalWatchers = () => {
+    const props = [
+      'label',
+      'filters',
+      'filterMultiple',
+      'filteredValue',
+      'sortable',
+      'index',
+      'formatter',
+      'className',
+      'labelClassName',
+      'filterClassName',
+      'showOverflowTooltip',
+    ]
+    const aliases = {
+      property: 'prop',
+      align: 'realAlign',
+      headerAlign: 'realHeaderAlign',
+    }
+    const allAliases = getAllAliases(props, aliases)
+    Object.keys(allAliases).forEach((key) => {
+      const columnKey = aliases[key]
+      if (hasOwn(props_, columnKey)) {
+        watch(
+          () => props_[columnKey],
+          (newVal) => {
+            instance.columnConfig.value[key] = newVal
+          }
+        )
+      }
+    })
+  }
+
+  return {
+    registerComplexWatchers,
+    registerNormalWatchers,
+  }
+}
+
+export default useWatcher

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

@@ -0,0 +1,128 @@
+// @ts-nocheck
+import { defineComponent, h } from 'vue'
+import { useNamespace } from 'element-plus/es/hooks/index.mjs'
+import useStyle from './style-helper'
+import type { Store } from '../store'
+
+import type { PropType } from 'vue'
+import type { DefaultRow, Sort, SummaryMethod } from '../table/defaults'
+export interface TableFooter<T> {
+  fixed: string
+  store: Store<T>
+  summaryMethod: SummaryMethod<T>
+  sumText: string
+  border: boolean
+  defaultSort: Sort
+}
+
+export default defineComponent({
+  name: 'ElTableFooter',
+
+  props: {
+    fixed: {
+      type: String,
+      default: '',
+    },
+    store: {
+      required: true,
+      type: Object as PropType<TableFooter<DefaultRow>['store']>,
+    },
+    summaryMethod: Function as PropType<
+      TableFooter<DefaultRow>['summaryMethod']
+    >,
+    sumText: String,
+    border: Boolean,
+    defaultSort: {
+      type: Object as PropType<TableFooter<DefaultRow>['defaultSort']>,
+      default: () => {
+        return {
+          prop: '',
+          order: '',
+        }
+      },
+    },
+  },
+  setup(props) {
+    const { getCellClasses, getCellStyles, columns } = useStyle(
+      props as TableFooter<DefaultRow>
+    )
+    const ns = useNamespace('table')
+    return {
+      ns,
+      getCellClasses,
+      getCellStyles,
+      columns,
+    }
+  },
+  render() {
+    const { columns, getCellStyles, getCellClasses, summaryMethod, sumText } =
+      this
+    const data = this.store.states.data.value
+    let sums = []
+    if (summaryMethod) {
+      sums = summaryMethod({
+        columns,
+        data,
+      })
+    } else {
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = sumText
+          return
+        }
+        const values = data.map((item) => Number(item[column.property]))
+        const precisions = []
+        let notNumber = true
+        values.forEach((value) => {
+          if (!Number.isNaN(+value)) {
+            notNumber = false
+            const decimal = `${value}`.split('.')[1]
+            precisions.push(decimal ? decimal.length : 0)
+          }
+        })
+        const precision = Math.max.apply(null, precisions)
+        if (!notNumber) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr)
+            if (!Number.isNaN(+value)) {
+              return Number.parseFloat(
+                (prev + curr).toFixed(Math.min(precision, 20))
+              )
+            } else {
+              return prev
+            }
+          }, 0)
+        } else {
+          sums[index] = ''
+        }
+      })
+    }
+    return h(
+      h('tfoot', [
+        h('tr', {}, [
+          ...columns.map((column, cellIndex) =>
+            h(
+              'td',
+              {
+                key: cellIndex,
+                colspan: column.colSpan,
+                rowspan: column.rowSpan,
+                class: getCellClasses(columns, cellIndex),
+                style: getCellStyles(column, cellIndex),
+              },
+              [
+                h(
+                  'div',
+                  {
+                    class: ['cell', column.labelClassName],
+                  },
+                  [sums[cellIndex]]
+                ),
+              ]
+            )
+          ),
+        ]),
+      ])
+    )
+  },
+})

package/src/components/table/src/table-footer/mapState-helper.ts

@@ -0,0 +1,33 @@
+import { computed, inject } from 'vue'
+import { TABLE_INJECTION_KEY } from '../tokens'
+
+function useMapState() {
+  const table = inject(TABLE_INJECTION_KEY)
+  const store = table?.store
+  const leftFixedLeafCount = computed(() => {
+    return store.states.fixedLeafColumnsLength.value
+  })
+  const rightFixedLeafCount = computed(() => {
+    return store.states.rightFixedColumns.value.length
+  })
+  const columnsCount = computed(() => {
+    return store.states.columns.value.length
+  })
+  const leftFixedCount = computed(() => {
+    return store.states.fixedColumns.value.length
+  })
+  const rightFixedCount = computed(() => {
+    return store.states.rightFixedColumns.value.length
+  })
+
+  return {
+    leftFixedLeafCount,
+    rightFixedLeafCount,
+    columnsCount,
+    leftFixedCount,
+    rightFixedCount,
+    columns: store.states.columns,
+  }
+}
+
+export default useMapState

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

@@ -0,0 +1,51 @@
+import { useNamespace } from 'element-plus/es/hooks/index.mjs'
+import {
+  ensurePosition,
+  getFixedColumnOffset,
+  getFixedColumnsClass,
+} from '../util'
+import useMapState from './mapState-helper'
+import type { TableColumnCtx } from '../table-column/defaults'
+import type { TableFooter } from '.'
+
+function useStyle<T>(props: TableFooter<T>) {
+  const { columns } = useMapState()
+  const ns = useNamespace('table')
+
+  const getCellClasses = (columns: TableColumnCtx<T>[], cellIndex: number) => {
+    const column = columns[cellIndex]
+    const classes = [
+      ns.e('cell'),
+      column.id,
+      column.align,
+      column.labelClassName,
+      ...getFixedColumnsClass(ns.b(), cellIndex, column.fixed, props.store),
+    ]
+    if (column.className) {
+      classes.push(column.className)
+    }
+    if (!column.children) {
+      classes.push(ns.is('leaf'))
+    }
+    return classes
+  }
+
+  const getCellStyles = (column: TableColumnCtx<T>, cellIndex: number) => {
+    const fixedStyle = getFixedColumnOffset(
+      cellIndex,
+      column.fixed,
+      props.store
+    )
+    ensurePosition(fixedStyle, 'left')
+    ensurePosition(fixedStyle, 'right')
+    return fixedStyle
+  }
+
+  return {
+    getCellClasses,
+    getCellStyles,
+    columns,
+  }
+}
+
+export default useStyle

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

@@ -0,0 +1,213 @@
+// @ts-nocheck
+import { getCurrentInstance, inject, ref } from 'vue'
+import {
+  addClass,
+  hasClass,
+  isClient,
+  isElement,
+  removeClass,
+} from 'element-plus/es/utils/index.mjs'
+import { TABLE_INJECTION_KEY } from '../tokens'
+import type { TableHeaderProps } from '.'
+import type { TableColumnCtx } from '../table-column/defaults'
+
+function useEvent<T>(props: TableHeaderProps<T>, emit) {
+  const instance = getCurrentInstance()
+  const parent = inject(TABLE_INJECTION_KEY)
+  const handleFilterClick = (event: Event) => {
+    event.stopPropagation()
+    return
+  }
+
+  const handleHeaderClick = (event: Event, column: TableColumnCtx<T>) => {
+    if (!column.filters && column.sortable) {
+      handleSortClick(event, column, false)
+    } else if (column.filterable && !column.sortable) {
+      handleFilterClick(event)
+    }
+    parent?.emit('header-click', column, event)
+  }
+
+  const handleHeaderContextMenu = (event: Event, column: TableColumnCtx<T>) => {
+    parent?.emit('header-contextmenu', column, event)
+  }
+  const draggingColumn = ref(null)
+  const dragging = ref(false)
+  const dragState = ref({})
+  const handleMouseDown = (event: MouseEvent, column: TableColumnCtx<T>) => {
+    if (!isClient) return
+    if (column.children && column.children.length > 0) return
+    /* istanbul ignore if */
+    if (draggingColumn.value && props.border) {
+      dragging.value = true
+
+      const table = parent
+      emit('set-drag-visible', true)
+      const tableEl = table?.vnode.el
+      const tableLeft = tableEl.getBoundingClientRect().left
+      const columnEl = instance.vnode.el.querySelector(`th.${column.id}`)
+      const columnRect = columnEl.getBoundingClientRect()
+      const minLeft = columnRect.left - tableLeft + 30
+
+      addClass(columnEl, 'noclick')
+
+      dragState.value = {
+        startMouseLeft: event.clientX,
+        startLeft: columnRect.right - tableLeft,
+        startColumnLeft: columnRect.left - tableLeft,
+        tableLeft,
+      }
+      const resizeProxy = table?.refs.resizeProxy as HTMLElement
+      resizeProxy.style.left = `${(dragState.value as any).startLeft}px`
+
+      document.onselectstart = function () {
+        return false
+      }
+      document.ondragstart = function () {
+        return false
+      }
+
+      const handleMouseMove = (event: MouseEvent) => {
+        const deltaLeft =
+          event.clientX - (dragState.value as any).startMouseLeft
+        const proxyLeft = (dragState.value as any).startLeft + deltaLeft
+
+        resizeProxy.style.left = `${Math.max(minLeft, proxyLeft)}px`
+      }
+
+      const handleMouseUp = () => {
+        if (dragging.value) {
+          const { startColumnLeft, startLeft } = dragState.value as any
+          const finalLeft = Number.parseInt(resizeProxy.style.left, 10)
+          const columnWidth = finalLeft - startColumnLeft
+          column.width = column.realWidth = columnWidth
+          table?.emit(
+            'header-dragend',
+            column.width,
+            startLeft - startColumnLeft,
+            column,
+            event
+          )
+          requestAnimationFrame(() => {
+            props.store.scheduleLayout(false, true)
+          })
+          document.body.style.cursor = ''
+          dragging.value = false
+          draggingColumn.value = null
+          dragState.value = {}
+          emit('set-drag-visible', false)
+        }
+
+        document.removeEventListener('mousemove', handleMouseMove)
+        document.removeEventListener('mouseup', handleMouseUp)
+        document.onselectstart = null
+        document.ondragstart = null
+
+        setTimeout(() => {
+          removeClass(columnEl, 'noclick')
+        }, 0)
+      }
+
+      document.addEventListener('mousemove', handleMouseMove)
+      document.addEventListener('mouseup', handleMouseUp)
+    }
+  }
+
+  const handleMouseMove = (event: MouseEvent, column: TableColumnCtx<T>) => {
+    if (column.children && column.children.length > 0) return
+    const el = event.target as HTMLElement
+    if (!isElement(el)) {
+      return
+    }
+    const target = el?.closest('th')
+
+    if (!column || !column.resizable) return
+
+    if (!dragging.value && props.border) {
+      const rect = target.getBoundingClientRect()
+
+      const bodyStyle = document.body.style
+      if (rect.width > 12 && rect.right - event.pageX < 8) {
+        bodyStyle.cursor = 'col-resize'
+        if (hasClass(target, 'is-sortable')) {
+          target.style.cursor = 'col-resize'
+        }
+        draggingColumn.value = column
+      } else if (!dragging.value) {
+        bodyStyle.cursor = ''
+        if (hasClass(target, 'is-sortable')) {
+          target.style.cursor = 'pointer'
+        }
+        draggingColumn.value = null
+      }
+    }
+  }
+
+  const handleMouseOut = () => {
+    if (!isClient) return
+    document.body.style.cursor = ''
+  }
+  const toggleOrder = ({ order, sortOrders }) => {
+    if (order === '') return sortOrders[0]
+    const index = sortOrders.indexOf(order || null)
+    return sortOrders[index > sortOrders.length - 2 ? 0 : index + 1]
+  }
+  const handleSortClick = (
+    event: Event,
+    column: TableColumnCtx<T>,
+    givenOrder: string | boolean
+  ) => {
+    event.stopPropagation()
+    const order =
+      column.order === givenOrder ? null : givenOrder || toggleOrder(column)
+
+    const target = (event.target as HTMLElement)?.closest('th')
+
+    if (target) {
+      if (hasClass(target, 'noclick')) {
+        removeClass(target, 'noclick')
+        return
+      }
+    }
+
+    if (!column.sortable) return
+
+    const states = props.store.states
+    let sortProp = states.sortProp.value
+    let sortOrder
+    const sortingColumn = states.sortingColumn.value
+
+    if (
+      sortingColumn !== column ||
+      (sortingColumn === column && sortingColumn.order === null)
+    ) {
+      if (sortingColumn) {
+        sortingColumn.order = null
+      }
+      states.sortingColumn.value = column
+      sortProp = column.property
+    }
+    if (!order) {
+      sortOrder = column.order = null
+    } else {
+      sortOrder = column.order = order
+    }
+
+    states.sortProp.value = sortProp
+    states.sortOrder.value = sortOrder
+
+    parent?.store.commit('changeSortCondition')
+  }
+
+  return {
+    handleHeaderClick,
+    handleHeaderContextMenu,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseOut,
+    handleSortClick,
+    handleFilterClick,
+  }
+}
+
+export default useEvent