resolver-egretimp-plus 0.1.30 → 0.1.32

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

@@ -0,0 +1,378 @@
+// @ts-nocheck
+import {
+  computed,
+  nextTick,
+  onMounted,
+  ref,
+  unref,
+  watch,
+  watchEffect,
+} from 'vue'
+import { useEventListener, useResizeObserver } from '@vueuse/core'
+import { useFormSize } from 'element-plus/es/components/form/index.mjs'
+
+import type { Table, TableProps } from './defaults'
+import type { Store } from '../store'
+import type TableLayout from '../table-layout'
+import type { TableColumnCtx } from '../table-column/defaults'
+
+function useStyle<T>(
+  props: TableProps<T>,
+  layout: TableLayout<T>,
+  store: Store<T>,
+  table: Table<T>
+) {
+  const isHidden = ref(false)
+  const renderExpanded = ref(null)
+  const resizeProxyVisible = ref(false)
+  const setDragVisible = (visible: boolean) => {
+    resizeProxyVisible.value = visible
+  }
+  const resizeState = ref<{
+    width: null | number
+    height: null | number
+    headerHeight: null | number
+  }>({
+    width: null,
+    height: null,
+    headerHeight: null,
+  })
+  const isGroup = ref(false)
+  const scrollbarViewStyle = {
+    display: 'inline-block',
+    verticalAlign: 'middle',
+  }
+  const tableWidth = ref()
+  const tableScrollHeight = ref(0)
+  const bodyScrollHeight = ref(0)
+  const headerScrollHeight = ref(0)
+  const footerScrollHeight = ref(0)
+  const appendScrollHeight = ref(0)
+
+  watchEffect(() => {
+    layout.setHeight(props.height)
+  })
+  watchEffect(() => {
+    layout.setMaxHeight(props.maxHeight)
+  })
+  watch(
+    () => [props.currentRowKey, store.states.rowKey],
+    ([currentRowKey, rowKey]) => {
+      if (!unref(rowKey) || !unref(currentRowKey)) return
+      store.setCurrentRowKey(`${currentRowKey}`)
+    },
+    {
+      immediate: true,
+    }
+  )
+  watch(
+    () => props.data,
+    (data) => {
+      table.store.commit('setData', data)
+    },
+    {
+      immediate: true,
+      deep: true,
+    }
+  )
+  watchEffect(() => {
+    if (props.expandRowKeys) {
+      store.setExpandRowKeysAdapter(props.expandRowKeys)
+    }
+  })
+
+  const handleMouseLeave = () => {
+    table.store.commit('setHoverRow', null)
+    if (table.hoverState) table.hoverState = null
+  }
+
+  const handleHeaderFooterMousewheel = (event, data) => {
+    const { pixelX, pixelY } = data
+    if (Math.abs(pixelX) >= Math.abs(pixelY)) {
+      table.refs.bodyWrapper.scrollLeft += data.pixelX / 5
+    }
+  }
+
+  const shouldUpdateHeight = computed(() => {
+    return (
+      props.height ||
+      props.maxHeight ||
+      store.states.fixedColumns.value.length > 0 ||
+      store.states.rightFixedColumns.value.length > 0
+    )
+  })
+
+  const tableBodyStyles = computed(() => {
+    return {
+      width: layout.bodyWidth.value ? `${layout.bodyWidth.value}px` : '',
+    }
+  })
+
+  const doLayout = () => {
+    if (shouldUpdateHeight.value) {
+      layout.updateElsHeight()
+    }
+    layout.updateColumnsWidth()
+    requestAnimationFrame(syncPosition)
+  }
+  onMounted(async () => {
+    await nextTick()
+    store.updateColumns()
+    bindEvents()
+    requestAnimationFrame(doLayout)
+
+    const el: HTMLElement = table.vnode.el as HTMLElement
+    const tableHeader: HTMLElement = table.refs.headerWrapper
+    if (props.flexible && el && el.parentElement) {
+      // Automatic minimum size of flex-items
+      // Ensure that the main axis does not follow the width of the items
+      el.parentElement.style.minWidth = '0'
+    }
+
+    resizeState.value = {
+      width: (tableWidth.value = el.offsetWidth),
+      height: el.offsetHeight,
+      headerHeight:
+        props.showHeader && tableHeader ? tableHeader.offsetHeight : null,
+    }
+
+    // init filters
+    store.states.columns.value.forEach((column: TableColumnCtx<T>) => {
+      if (column.filteredValue && column.filteredValue.length) {
+        table.store.commit('filterChange', {
+          column,
+          values: column.filteredValue,
+          silent: true,
+        })
+      }
+    })
+    table.$ready = true
+  })
+  const setScrollClassByEl = (el: HTMLElement, className: string) => {
+    if (!el) return
+    const classList = Array.from(el.classList).filter(
+      (item) => !item.startsWith('is-scrolling-')
+    )
+    classList.push(layout.scrollX.value ? className : 'is-scrolling-none')
+    el.className = classList.join(' ')
+  }
+  const setScrollClass = (className: string) => {
+    const { tableWrapper } = table.refs
+    setScrollClassByEl(tableWrapper, className)
+  }
+  const hasScrollClass = (className: string) => {
+    const { tableWrapper } = table.refs
+    return !!(tableWrapper && tableWrapper.classList.contains(className))
+  }
+  const syncPosition = function () {
+    if (!table.refs.scrollBarRef) return
+    if (!layout.scrollX.value) {
+      const scrollingNoneClass = 'is-scrolling-none'
+      if (!hasScrollClass(scrollingNoneClass)) {
+        setScrollClass(scrollingNoneClass)
+      }
+      return
+    }
+    const scrollContainer = table.refs.scrollBarRef.wrapRef
+    if (!scrollContainer) return
+    const { scrollLeft, offsetWidth, scrollWidth } = scrollContainer
+    const { headerWrapper, footerWrapper } = table.refs
+    if (headerWrapper) headerWrapper.scrollLeft = scrollLeft
+    if (footerWrapper) footerWrapper.scrollLeft = scrollLeft
+    const maxScrollLeftPosition = scrollWidth - offsetWidth - 1
+    if (scrollLeft >= maxScrollLeftPosition) {
+      setScrollClass('is-scrolling-right')
+    } else if (scrollLeft === 0) {
+      setScrollClass('is-scrolling-left')
+    } else {
+      setScrollClass('is-scrolling-middle')
+    }
+  }
+
+  const bindEvents = () => {
+    if (!table.refs.scrollBarRef) return
+    if (table.refs.scrollBarRef.wrapRef) {
+      useEventListener(
+        table.refs.scrollBarRef.wrapRef,
+        'scroll',
+        syncPosition,
+        {
+          passive: true,
+        }
+      )
+    }
+    if (props.fit) {
+      useResizeObserver(table.vnode.el as HTMLElement, resizeListener)
+    } else {
+      useEventListener(window, 'resize', resizeListener)
+    }
+
+    useResizeObserver(table.refs.bodyWrapper, () => {
+      resizeListener()
+      table.refs?.scrollBarRef?.update()
+    })
+  }
+  const resizeListener = () => {
+    const el = table.vnode.el
+    if (!table.$ready || !el) return
+
+    let shouldUpdateLayout = false
+    const {
+      width: oldWidth,
+      height: oldHeight,
+      headerHeight: oldHeaderHeight,
+    } = resizeState.value
+
+    const width = (tableWidth.value = el.offsetWidth)
+    if (oldWidth !== width) {
+      shouldUpdateLayout = true
+    }
+
+    const height = el.offsetHeight
+    if ((props.height || shouldUpdateHeight.value) && oldHeight !== height) {
+      shouldUpdateLayout = true
+    }
+
+    const tableHeader: HTMLElement =
+      props.tableLayout === 'fixed'
+        ? table.refs.headerWrapper
+        : table.refs.tableHeaderRef?.$el
+    if (props.showHeader && tableHeader?.offsetHeight !== oldHeaderHeight) {
+      shouldUpdateLayout = true
+    }
+
+    tableScrollHeight.value = table.refs.tableWrapper?.scrollHeight || 0
+    headerScrollHeight.value = tableHeader?.scrollHeight || 0
+    footerScrollHeight.value = table.refs.footerWrapper?.offsetHeight || 0
+    appendScrollHeight.value = table.refs.appendWrapper?.offsetHeight || 0
+    bodyScrollHeight.value =
+      tableScrollHeight.value -
+      headerScrollHeight.value -
+      footerScrollHeight.value -
+      appendScrollHeight.value
+
+    if (shouldUpdateLayout) {
+      resizeState.value = {
+        width,
+        height,
+        headerHeight: (props.showHeader && tableHeader?.offsetHeight) || 0,
+      }
+      doLayout()
+    }
+  }
+  const tableSize = useFormSize()
+  const bodyWidth = computed(() => {
+    const { bodyWidth: bodyWidth_, scrollY, gutterWidth } = layout
+    return bodyWidth_.value
+      ? `${(bodyWidth_.value as number) - (scrollY.value ? gutterWidth : 0)}px`
+      : ''
+  })
+
+  const tableLayout = computed(() => {
+    if (props.maxHeight) return 'fixed'
+    return props.tableLayout
+  })
+
+  const emptyBlockStyle = computed(() => {
+    if (props.data && props.data.length) return null
+    let height = '100%'
+    if (props.height && bodyScrollHeight.value) {
+      height = `${bodyScrollHeight.value}px`
+    }
+    const width = tableWidth.value
+    return {
+      width: width ? `${width}px` : '',
+      height,
+    }
+  })
+
+  const tableInnerStyle = computed(() => {
+    if (props.height) {
+      return {
+        height: !Number.isNaN(Number(props.height))
+          ? `${props.height}px`
+          : props.height,
+      }
+    }
+    if (props.maxHeight) {
+      return {
+        maxHeight: !Number.isNaN(Number(props.maxHeight))
+          ? `${props.maxHeight}px`
+          : props.maxHeight,
+      }
+    }
+    return {}
+  })
+
+  const scrollbarStyle = computed(() => {
+    if (props.height) {
+      return {
+        height: '100%',
+      }
+    }
+    if (props.maxHeight) {
+      if (!Number.isNaN(Number(props.maxHeight))) {
+        return {
+          maxHeight: `${
+            props.maxHeight -
+            headerScrollHeight.value -
+            footerScrollHeight.value
+          }px`,
+        }
+      } else {
+        return {
+          maxHeight: `calc(${props.maxHeight} - ${
+            headerScrollHeight.value + footerScrollHeight.value
+          }px)`,
+        }
+      }
+    }
+
+    return {}
+  })
+
+  /**
+   * fix layout
+   */
+  const handleFixedMousewheel = (event, data) => {
+    const bodyWrapper = table.refs.bodyWrapper
+    if (Math.abs(data.spinY) > 0) {
+      const currentScrollTop = bodyWrapper.scrollTop
+      if (data.pixelY < 0 && currentScrollTop !== 0) {
+        event.preventDefault()
+      }
+      if (
+        data.pixelY > 0 &&
+        bodyWrapper.scrollHeight - bodyWrapper.clientHeight > currentScrollTop
+      ) {
+        event.preventDefault()
+      }
+      bodyWrapper.scrollTop += Math.ceil(data.pixelY / 5)
+    } else {
+      bodyWrapper.scrollLeft += Math.ceil(data.pixelX / 5)
+    }
+  }
+
+  return {
+    isHidden,
+    renderExpanded,
+    setDragVisible,
+    isGroup,
+    handleMouseLeave,
+    handleHeaderFooterMousewheel,
+    tableSize,
+    emptyBlockStyle,
+    handleFixedMousewheel,
+    resizeProxyVisible,
+    bodyWidth,
+    resizeState,
+    doLayout,
+    tableBodyStyles,
+    tableLayout,
+    scrollbarViewStyle,
+    tableInnerStyle,
+    scrollbarStyle,
+  }
+}
+
+export default useStyle

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

@@ -0,0 +1,47 @@
+// @ts-nocheck
+import type { Store } from '../store'
+
+function useUtils<T>(store: Store<T>) {
+  const setCurrentRow = (row: T) => {
+    store.commit('setCurrentRow', row)
+  }
+  const getSelectionRows = () => {
+    return store.getSelectionRows()
+  }
+  const toggleRowSelection = (row: T, selected: boolean) => {
+    store.toggleRowSelection(row, selected, false)
+    store.updateAllSelected()
+  }
+  const clearSelection = () => {
+    store.clearSelection()
+  }
+  const clearFilter = (columnKeys?: string[]) => {
+    store.clearFilter(columnKeys)
+  }
+  const toggleAllSelection = () => {
+    store.commit('toggleAllSelection')
+  }
+  const toggleRowExpansion = (row: T, expanded?: boolean) => {
+    store.toggleRowExpansionAdapter(row, expanded)
+  }
+  const clearSort = () => {
+    store.clearSort()
+  }
+  const sort = (prop: string, order: string) => {
+    store.commit('sort', { prop, order })
+  }
+
+  return {
+    setCurrentRow,
+    getSelectionRows,
+    toggleRowSelection,
+    clearSelection,
+    clearFilter,
+    toggleAllSelection,
+    toggleRowExpansion,
+    clearSort,
+    sort,
+  }
+}
+
+export default useUtils

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

@@ -0,0 +1,52 @@
+// @ts-nocheck
+import type { PropType } from 'vue'
+import type { Store } from '../store'
+import type {
+  ColumnCls,
+  ColumnStyle,
+  DefaultRow,
+  Table,
+} from '../table/defaults'
+import type { TableOverflowTooltipOptions } from '../util'
+
+interface TableBodyProps<T> {
+  store: Store<T>
+  stripe?: boolean
+  context: Table<T>
+  rowClassName: ColumnCls<T>
+  rowStyle: ColumnStyle<T>
+  fixed: string
+  highlight: boolean
+  tooltipEffect?: string
+  tooltipOptions?: TableOverflowTooltipOptions
+}
+
+const defaultProps = {
+  store: {
+    required: true,
+    type: Object as PropType<TableBodyProps<DefaultRow>['store']>,
+  },
+  stripe: Boolean,
+  tooltipEffect: String,
+  tooltipOptions: {
+    type: Object as PropType<TableBodyProps<DefaultRow>['tooltipOptions']>,
+  },
+  context: {
+    default: () => ({}),
+    type: Object as PropType<TableBodyProps<DefaultRow>['context']>,
+  },
+  rowClassName: [String, Function] as PropType<
+    TableBodyProps<DefaultRow>['rowClassName']
+  >,
+  rowStyle: [Object, Function] as PropType<
+    TableBodyProps<DefaultRow>['rowStyle']
+  >,
+  fixed: {
+    type: String,
+    default: '',
+  },
+  highlight: Boolean,
+}
+
+export { TableBodyProps }
+export default defaultProps

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

@@ -0,0 +1,203 @@
+// @ts-nocheck
+import { h, inject, ref } from 'vue'
+import { debounce } from 'lodash-unified'
+import { addClass, hasClass, removeClass } from 'element-plus/es/utils/index.mjs'
+import { createTablePopper, getCell, getColumnByCell } from '../util'
+import { TABLE_INJECTION_KEY } from '../tokens'
+import type { TableColumnCtx } from '../table-column/defaults'
+import type { TableBodyProps } from './defaults'
+import type { TableOverflowTooltipOptions } from '../util'
+
+function isGreaterThan(a: number, b: number, epsilon = 0.01) {
+  return a - b > epsilon
+}
+
+function useEvents<T>(props: Partial<TableBodyProps<T>>) {
+  const parent = inject(TABLE_INJECTION_KEY)
+  const tooltipContent = ref('')
+  const tooltipTrigger = ref(h('div'))
+  const handleEvent = (event: Event, row: T, name: string) => {
+    const table = parent
+    const cell = getCell(event)
+    let column: TableColumnCtx<T>
+    const namespace = table?.vnode.el?.dataset.prefix
+    if (cell) {
+      column = getColumnByCell(
+        {
+          columns: props.store.states.columns.value,
+        },
+        cell,
+        namespace
+      )
+      if (column) {
+        table?.emit(`cell-${name}`, row, column, cell, event)
+      }
+    }
+    table?.emit(`row-${name}`, row, column, event)
+  }
+  const handleDoubleClick = (event: Event, row: T) => {
+    handleEvent(event, row, 'dblclick')
+  }
+  const handleClick = (event: Event, row: T) => {
+    props.store.commit('setCurrentRow', row)
+    handleEvent(event, row, 'click')
+  }
+  const handleContextMenu = (event: Event, row: T) => {
+    handleEvent(event, row, 'contextmenu')
+  }
+  const handleMouseEnter = debounce((index: number) => {
+    props.store.commit('setHoverRow', index)
+  }, 30)
+  const handleMouseLeave = debounce(() => {
+    props.store.commit('setHoverRow', null)
+  }, 30)
+  const getPadding = (el: HTMLElement) => {
+    const style = window.getComputedStyle(el, null)
+    const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0
+    const paddingRight = Number.parseInt(style.paddingRight, 10) || 0
+    const paddingTop = Number.parseInt(style.paddingTop, 10) || 0
+    const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0
+    return {
+      left: paddingLeft,
+      right: paddingRight,
+      top: paddingTop,
+      bottom: paddingBottom,
+    }
+  }
+
+  const toggleRowClassByCell = (
+    rowSpan: number,
+    event: MouseEvent,
+    toggle: (el: Element, cls: string) => void
+  ) => {
+    let node = event.target.parentNode
+    while (rowSpan > 1) {
+      node = node?.nextSibling
+      if (!node || node.nodeName !== 'TR') break
+      toggle(node, 'hover-row hover-fixed-row')
+      rowSpan--
+    }
+  }
+
+  const handleCellMouseEnter = (
+    event: MouseEvent,
+    row: T,
+    tooltipOptions: TableOverflowTooltipOptions
+  ) => {
+    const table = parent
+    const cell = getCell(event)
+    const namespace = table?.vnode.el?.dataset.prefix
+    if (cell) {
+      const column = getColumnByCell(
+        {
+          columns: props.store.states.columns.value,
+        },
+        cell,
+        namespace
+      )
+      if (cell.rowSpan > 1) {
+        toggleRowClassByCell(cell.rowSpan, event, addClass)
+      }
+      const hoverState = (table.hoverState = { cell, column, row })
+      table?.emit(
+        'cell-mouse-enter',
+        hoverState.row,
+        hoverState.column,
+        hoverState.cell,
+        event
+      )
+    }
+
+    if (!tooltipOptions) {
+      return
+    }
+    if (tooltipOptions.showOverflowTooltip && typeof tooltipOptions.showOverflowTooltip === 'function') {
+      if (!tooltipOptions.showOverflowTooltip()) {
+        return
+      }
+    }
+
+    // 判断是否text-overflow, 如果是就显示tooltip
+    const cellChild = (event.target as HTMLElement).querySelector(
+      '.cell'
+    ) as HTMLElement
+    if (
+      !(
+        hasClass(cellChild, `${namespace}-tooltip`) &&
+        cellChild.childNodes.length
+      )
+    ) {
+      return
+    }
+    // use range width instead of scrollWidth to determine whether the text is overflowing
+    // to address a potential FireFox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1074543#c3
+    const range = document.createRange()
+    range.setStart(cellChild, 0)
+    range.setEnd(cellChild, cellChild.childNodes.length)
+    /** detail: https://github.com/element-plus/element-plus/issues/10790
+     *  What went wrong?
+     *  UI > Browser > Zoom, In Blink/WebKit, getBoundingClientRect() sometimes returns inexact values, probably due to lost precision during internal calculations. In the example above:
+     *    - Expected: 188
+     *    - Actual: 188.00000762939453
+     */
+    let { width: rangeWidth, height: rangeHeight } =
+      range.getBoundingClientRect()
+    const offsetWidth = rangeWidth - Math.floor(rangeWidth)
+    const { width: cellChildWidth, height: cellChildHeight } =
+      cellChild.getBoundingClientRect()
+    if (offsetWidth < 0.001) {
+      rangeWidth = Math.floor(rangeWidth)
+    }
+    const offsetHeight = rangeHeight - Math.floor(rangeHeight)
+    if (offsetHeight < 0.001) {
+      rangeHeight = Math.floor(rangeHeight)
+    }
+
+    const { top, left, right, bottom } = getPadding(cellChild)
+    const horizontalPadding = left + right
+    const verticalPadding = top + bottom
+    if (
+      isGreaterThan(rangeWidth + horizontalPadding, cellChildWidth) ||
+      isGreaterThan(rangeHeight + verticalPadding, cellChildHeight) ||
+      // When using a high-resolution screen, it is possible that a returns cellChild.scrollWidth value of 1921 and
+      // cellChildWidth returns a value of 1920.994140625. #16856 #16673
+      isGreaterThan(cellChild.scrollWidth, cellChildWidth)
+    ) {
+      createTablePopper(
+        tooltipOptions,
+        cell.innerText || cell.textContent,
+        cell,
+        table
+      )
+    }
+  }
+  const handleCellMouseLeave = (event) => {
+    const cell = getCell(event)
+    if (!cell) return
+    if (cell.rowSpan > 1) {
+      toggleRowClassByCell(cell.rowSpan, event, removeClass)
+    }
+    const oldHoverState = parent?.hoverState
+    parent?.emit(
+      'cell-mouse-leave',
+      oldHoverState?.row,
+      oldHoverState?.column,
+      oldHoverState?.cell,
+      event
+    )
+  }
+
+  return {
+    handleDoubleClick,
+    handleClick,
+    handleContextMenu,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleCellMouseEnter,
+    handleCellMouseLeave,
+    tooltipContent,
+    tooltipTrigger,
+  }
+}
+
+export default useEvents