resolver-egretimp-plus 0.1.30 → 0.1.32

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

@@ -0,0 +1,34 @@
+// @ts-nocheck
+import { h } from 'vue'
+export function hColgroup(props) {
+  const isAuto = props.tableLayout === 'auto'
+  let columns = props.columns || []
+  if (isAuto) {
+    if (columns.every((column) => column.width === undefined)) {
+      columns = []
+    }
+  }
+  const getPropsData = (column) => {
+    const propsData = {
+      key: `${props.tableLayout}_${column.id}`,
+      style: {},
+      name: undefined,
+    }
+    if (isAuto) {
+      propsData.style = {
+        width: `${column.width}px`,
+      }
+    } else {
+      propsData.name = column.id
+    }
+    return propsData
+  }
+
+  return h(
+    'colgroup',
+    {},
+    columns.map((column) => h('col', getPropsData(column)))
+  )
+}
+
+hColgroup.props = ['columns', 'tableLayout']

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

@@ -0,0 +1,78 @@
+// @ts-nocheck
+import {
+  computed,
+  getCurrentInstance,
+  onBeforeMount,
+  onMounted,
+  onUnmounted,
+  onUpdated,
+} from 'vue'
+
+import type { TableHeader } from './table-header'
+import type TableLayout from './table-layout'
+import type { Table } from './table/defaults'
+
+function useLayoutObserver<T>(root: Table<T>) {
+  const instance = getCurrentInstance() as TableHeader
+  onBeforeMount(() => {
+    tableLayout.value.addObserver(instance)
+  })
+  onMounted(() => {
+    onColumnsChange(tableLayout.value)
+    onScrollableChange(tableLayout.value)
+  })
+  onUpdated(() => {
+    onColumnsChange(tableLayout.value)
+    onScrollableChange(tableLayout.value)
+  })
+  onUnmounted(() => {
+    tableLayout.value.removeObserver(instance)
+  })
+  const tableLayout = computed(() => {
+    const layout = root.layout as TableLayout<T>
+    if (!layout) {
+      throw new Error('Can not find table layout.')
+    }
+    return layout
+  })
+  const onColumnsChange = (layout: TableLayout<T>) => {
+    const cols = root.vnode.el?.querySelectorAll('colgroup > col') || []
+    if (!cols.length) return
+    const flattenColumns = layout.getFlattenColumns()
+    const columnsMap = {}
+    flattenColumns.forEach((column) => {
+      columnsMap[column.id] = column
+    })
+    for (let i = 0, j = cols.length; i < j; i++) {
+      const col = cols[i]
+      const name = col.getAttribute('name')
+      const column = columnsMap[name]
+      if (column) {
+        col.setAttribute('width', column.realWidth || column.width)
+      }
+    }
+  }
+
+  const onScrollableChange = (layout: TableLayout<T>) => {
+    const cols =
+      root.vnode.el?.querySelectorAll('colgroup > col[name=gutter]') || []
+    for (let i = 0, j = cols.length; i < j; i++) {
+      const col = cols[i]
+      col.setAttribute('width', layout.scrollY.value ? layout.gutterWidth : '0')
+    }
+    const ths = root.vnode.el?.querySelectorAll('th.gutter') || []
+    for (let i = 0, j = ths.length; i < j; i++) {
+      const th = ths[i]
+      th.style.width = layout.scrollY.value ? `${layout.gutterWidth}px` : '0'
+      th.style.display = layout.scrollY.value ? '' : 'none'
+    }
+  }
+
+  return {
+    tableLayout: tableLayout.value,
+    onColumnsChange,
+    onScrollableChange,
+  }
+}
+
+export default useLayoutObserver

package/src/components/table/src/store/current.ts

@@ -0,0 +1,85 @@
+// @ts-nocheck
+import { getCurrentInstance, ref, unref } from 'vue'
+import { getRowIdentity } from '../util'
+
+import type { Ref } from 'vue'
+import type { Table } from '../table/defaults'
+import type { WatcherPropsData } from '.'
+
+function useCurrent<T>(watcherData: WatcherPropsData<T>) {
+  const instance = getCurrentInstance() as Table<T>
+  const _currentRowKey = ref<string>(null)
+  const currentRow: Ref<T> = ref(null)
+
+  const setCurrentRowKey = (key: string) => {
+    instance.store.assertRowKey()
+    _currentRowKey.value = key
+    setCurrentRowByKey(key)
+  }
+
+  const restoreCurrentRowKey = () => {
+    _currentRowKey.value = null
+  }
+
+  const setCurrentRowByKey = (key: string) => {
+    const { data, rowKey } = watcherData
+    let _currentRow = null
+    if (rowKey.value) {
+      _currentRow = (unref(data) || []).find(
+        (item) => getRowIdentity(item, rowKey.value) === key
+      )
+    }
+    currentRow.value = _currentRow
+    instance.emit('current-change', currentRow.value, null)
+  }
+
+  const updateCurrentRow = (_currentRow: T) => {
+    const oldCurrentRow = currentRow.value
+    if (_currentRow && _currentRow !== oldCurrentRow) {
+      currentRow.value = _currentRow
+      instance.emit('current-change', currentRow.value, oldCurrentRow)
+      return
+    }
+    if (!_currentRow && oldCurrentRow) {
+      currentRow.value = null
+      instance.emit('current-change', null, oldCurrentRow)
+    }
+  }
+
+  const updateCurrentRowData = () => {
+    const rowKey = watcherData.rowKey.value
+    // data 为 null 时，解构时的默认值会被忽略
+    const data = watcherData.data.value || []
+    const oldCurrentRow = currentRow.value
+    // 当 currentRow 不在 data 中时尝试更新数据
+    if (!data.includes(oldCurrentRow) && oldCurrentRow) {
+      if (rowKey) {
+        const currentRowKey = getRowIdentity(oldCurrentRow, rowKey)
+        setCurrentRowByKey(currentRowKey)
+      } else {
+        currentRow.value = null
+      }
+      if (currentRow.value === null) {
+        instance.emit('current-change', null, oldCurrentRow)
+      }
+    } else if (_currentRowKey.value) {
+      // 把初始时下设置的 rowKey 转化成 rowData
+      setCurrentRowByKey(_currentRowKey.value)
+      restoreCurrentRowKey()
+    }
+  }
+
+  return {
+    setCurrentRowKey,
+    restoreCurrentRowKey,
+    setCurrentRowByKey,
+    updateCurrentRow,
+    updateCurrentRowData,
+    states: {
+      _currentRowKey,
+      currentRow,
+    },
+  }
+}
+
+export default useCurrent

package/src/components/table/src/store/expand.ts

@@ -0,0 +1,76 @@
+// @ts-nocheck
+import { getCurrentInstance, ref } from 'vue'
+import { getKeysMap, getRowIdentity, toggleRowStatus } from '../util'
+
+import type { Ref } from 'vue'
+import type { WatcherPropsData } from '.'
+import type { Table } from '../table/defaults'
+
+function useExpand<T>(watcherData: WatcherPropsData<T>) {
+  const instance = getCurrentInstance() as Table<T>
+  const defaultExpandAll = ref(false)
+  const expandRows: Ref<T[]> = ref([])
+  const updateExpandRows = () => {
+    const data = watcherData.data.value || []
+    const rowKey = watcherData.rowKey.value
+    if (defaultExpandAll.value) {
+      expandRows.value = data.slice()
+    } else if (rowKey) {
+      // TODO：这里的代码可以优化
+      const expandRowsMap = getKeysMap(expandRows.value, rowKey)
+      expandRows.value = data.reduce((prev: T[], row: T) => {
+        const rowId = getRowIdentity(row, rowKey)
+        const rowInfo = expandRowsMap[rowId]
+        if (rowInfo) {
+          prev.push(row)
+        }
+        return prev
+      }, [])
+    } else {
+      expandRows.value = []
+    }
+  }
+
+  const toggleRowExpansion = (row: T, expanded?: boolean) => {
+    const changed = toggleRowStatus(expandRows.value, row, expanded)
+    if (changed) {
+      instance.emit('expand-change', row, expandRows.value.slice())
+    }
+  }
+
+  const setExpandRowKeys = (rowKeys: string[]) => {
+    instance.store.assertRowKey()
+    // TODO：这里的代码可以优化
+    const data = watcherData.data.value || []
+    const rowKey = watcherData.rowKey.value
+    const keysMap = getKeysMap(data, rowKey)
+    expandRows.value = rowKeys.reduce((prev: T[], cur: string) => {
+      const info = keysMap[cur]
+      if (info) {
+        prev.push(info.row)
+      }
+      return prev
+    }, [])
+  }
+
+  const isRowExpanded = (row: T): boolean => {
+    const rowKey = watcherData.rowKey.value
+    if (rowKey) {
+      const expandMap = getKeysMap(expandRows.value, rowKey)
+      return !!expandMap[getRowIdentity(row, rowKey)]
+    }
+    return expandRows.value.includes(row)
+  }
+  return {
+    updateExpandRows,
+    toggleRowExpansion,
+    setExpandRowKeys,
+    isRowExpanded,
+    states: {
+      expandRows,
+      defaultExpandAll,
+    },
+  }
+}
+
+export default useExpand

package/src/components/table/src/store/helper.ts

@@ -0,0 +1,74 @@
+// @ts-nocheck
+import { watch } from 'vue'
+import { debounce } from 'lodash-unified'
+import useStore from '.'
+
+import type { Store } from '.'
+import type { Table, TableProps } from '../table/defaults'
+
+const InitialStateMap = {
+  rowKey: 'rowKey',
+  defaultExpandAll: 'defaultExpandAll',
+  selectOnIndeterminate: 'selectOnIndeterminate',
+  indent: 'indent',
+  lazy: 'lazy',
+  data: 'data',
+  ['treeProps.hasChildren']: {
+    key: 'lazyColumnIdentifier',
+    default: 'hasChildren',
+  },
+  ['treeProps.children']: {
+    key: 'childrenColumnName',
+    default: 'children',
+  },
+}
+
+export function createStore<T>(table: Table<T>, props: TableProps<T>) {
+  if (!table) {
+    throw new Error('Table is required.')
+  }
+
+  const store = useStore<T>()
+  // fix https://github.com/ElemeFE/element/issues/14075
+  // related pr https://github.com/ElemeFE/element/pull/14146
+  store.toggleAllSelection = debounce(store._toggleAllSelection, 10)
+  Object.keys(InitialStateMap).forEach((key) => {
+    handleValue(getArrKeysValue(props, key), key, store)
+  })
+  proxyTableProps(store, props)
+  return store
+}
+
+function proxyTableProps<T>(store: Store<T>, props: TableProps<T>) {
+  Object.keys(InitialStateMap).forEach((key) => {
+    watch(
+      () => getArrKeysValue(props, key),
+      (value) => {
+        handleValue(value, key, store)
+      }
+    )
+  })
+}
+
+function handleValue<T>(value, propsKey: string, store: Store<T>) {
+  let newVal = value
+  let storeKey = InitialStateMap[propsKey]
+  if (typeof InitialStateMap[propsKey] === 'object') {
+    storeKey = storeKey.key
+    newVal = newVal || InitialStateMap[propsKey].default
+  }
+  store.states[storeKey].value = newVal
+}
+
+function getArrKeysValue<T>(props: TableProps<T>, keys: string) {
+  if (keys.includes('.')) {
+    const keyList = keys.split('.')
+    let value = props
+    keyList.forEach((key) => {
+      value = value[key]
+    })
+    return value
+  } else {
+    return props[keys]
+  }
+}

package/src/components/table/src/store/index.ts

@@ -0,0 +1,246 @@
+// @ts-nocheck
+import { getCurrentInstance, nextTick, unref } from 'vue'
+import { useNamespace } from 'element-plus/es/hooks/index.mjs'
+import useWatcher from './watcher'
+
+import type { Ref } from 'vue'
+import type { TableColumnCtx } from '../table-column/defaults'
+import type { Filter, Sort, Table } from '../table/defaults'
+
+interface WatcherPropsData<T> {
+  data: Ref<T[]>
+  rowKey: Ref<string>
+}
+
+function replaceColumn<T>(
+  array: TableColumnCtx<T>[],
+  column: TableColumnCtx<T>
+) {
+  return array.map((item) => {
+    if (item.id === column.id) {
+      return column
+    } else if (item.children?.length) {
+      item.children = replaceColumn(item.children, column)
+    }
+    return item
+  })
+}
+
+function sortColumn<T>(array: TableColumnCtx<T>[]) {
+  array.forEach((item) => {
+    item.no = item.getColumnIndex?.()
+    if (item.children?.length) {
+      sortColumn(item.children)
+    }
+  })
+  array.sort((cur, pre) => cur.no - pre.no)
+}
+
+function useStore<T>() {
+  const instance = getCurrentInstance() as Table<T>
+  const watcher = useWatcher<T>()
+  const ns = useNamespace('table')
+  type StoreStates = typeof watcher.states
+  const mutations = {
+    setData(states: StoreStates, data: T[]) {
+      const dataInstanceChanged = unref(states._data) !== data
+      states.data.value = data
+      states._data.value = data
+      instance.store.execQuery()
+      // 数据变化，更新部分数据。
+      // 没有使用 computed，而是手动更新部分数据 https://github.com/vuejs/vue/issues/6660#issuecomment-331417140
+      instance.store.updateCurrentRowData()
+      instance.store.updateExpandRows()
+      instance.store.updateTreeData(
+        instance.store.states.defaultExpandAll.value
+      )
+      if (unref(states.reserveSelection)) {
+        instance.store.assertRowKey()
+        instance.store.updateSelectionByRowKey()
+      } else {
+        if (dataInstanceChanged) {
+          instance.store.clearSelection()
+        } else {
+          instance.store.cleanSelection()
+        }
+      }
+      instance.store.updateAllSelected()
+      if (instance.$ready) {
+        instance.store.scheduleLayout()
+      }
+    },
+
+    insertColumn(
+      states: StoreStates,
+      column: TableColumnCtx<T>,
+      parent: TableColumnCtx<T>,
+      updateColumnOrder: () => void
+    ) {
+      const array = unref(states._columns)
+      let newColumns = []
+      if (!parent) {
+        array.push(column)
+        newColumns = array
+      } else {
+        if (parent && !parent.children) {
+          parent.children = []
+        }
+        parent.children.push(column)
+        newColumns = replaceColumn(array, parent)
+      }
+      sortColumn(newColumns)
+      states._columns.value = newColumns
+      states.updateOrderFns.push(updateColumnOrder)
+      if (column.type === 'selection') {
+        states.selectable.value = column.selectable
+        states.reserveSelection.value = column.reserveSelection
+      }
+      if (instance.$ready) {
+        instance.store.updateColumns() // hack for dynamics insert column
+        instance.store.scheduleLayout()
+      }
+    },
+
+    updateColumnOrder(states: StoreStates, column: TableColumnCtx<T>) {
+      const newColumnIndex = column.getColumnIndex?.()
+      if (newColumnIndex === column.no) return
+
+      sortColumn(states._columns.value)
+
+      if (instance.$ready) {
+        instance.store.updateColumns()
+      }
+    },
+
+    removeColumn(
+      states: StoreStates,
+      column: TableColumnCtx<T>,
+      parent: TableColumnCtx<T>,
+      updateColumnOrder: () => void
+    ) {
+      const array = unref(states._columns) || []
+      if (parent) {
+        parent.children.splice(
+          parent.children.findIndex((item) => item.id === column.id),
+          1
+        )
+        // fix #10699, delete parent.children immediately will trigger again
+        nextTick(() => {
+          if (parent.children?.length === 0) {
+            delete parent.children
+          }
+        })
+        states._columns.value = replaceColumn(array, parent)
+      } else {
+        const index = array.indexOf(column)
+        if (index > -1) {
+          array.splice(index, 1)
+          states._columns.value = array
+        }
+      }
+
+      const updateFnIndex = states.updateOrderFns.indexOf(updateColumnOrder)
+      updateFnIndex > -1 && states.updateOrderFns.splice(updateFnIndex, 1)
+
+      if (instance.$ready) {
+        instance.store.updateColumns() // hack for dynamics remove column
+        instance.store.scheduleLayout()
+      }
+    },
+
+    sort(states: StoreStates, options: Sort) {
+      const { prop, order, init } = options
+      if (prop) {
+        const column = unref(states.columns).find(
+          (column) => column.property === prop
+        )
+        if (column) {
+          column.order = order
+          instance.store.updateSort(column, prop, order)
+          instance.store.commit('changeSortCondition', { init })
+        }
+      }
+    },
+
+    changeSortCondition(states: StoreStates, options: Sort) {
+      // 修复 pr https://github.com/ElemeFE/element/pull/15012 导致的 bug
+      // https://github.com/element-plus/element-plus/pull/4640
+      const { sortingColumn, sortProp, sortOrder } = states
+      const columnValue = unref(sortingColumn),
+        propValue = unref(sortProp),
+        orderValue = unref(sortOrder)
+      if (orderValue === null) {
+        states.sortingColumn.value = null
+        states.sortProp.value = null
+      }
+      const ignore = { filter: true }
+      instance.store.execQuery(ignore)
+
+      if (!options || !(options.silent || options.init)) {
+        instance.emit('sort-change', {
+          column: columnValue,
+          prop: propValue,
+          order: orderValue,
+        })
+      }
+
+      instance.store.updateTableScrollY()
+    },
+
+    filterChange(_states: StoreStates, options: Filter<T>) {
+      const { column, values, silent } = options
+      const newFilters = instance.store.updateFilters(column, values)
+      instance.store.execQuery()
+
+      if (!silent) {
+        instance.emit('filter-change', newFilters)
+      }
+      instance.store.updateTableScrollY()
+    },
+
+    toggleAllSelection() {
+      instance.store.toggleAllSelection()
+    },
+
+    rowSelectedChanged(_states, row: T) {
+      instance.store.toggleRowSelection(row)
+      instance.store.updateAllSelected()
+    },
+
+    setHoverRow(states: StoreStates, row: T) {
+      states.hoverRow.value = row
+    },
+
+    setCurrentRow(_states, row: T) {
+      instance.store.updateCurrentRow(row)
+    },
+  }
+  const commit = function (name: keyof typeof mutations, ...args) {
+    const mutations = instance.store.mutations
+    if (mutations[name]) {
+      mutations[name].apply(instance, [instance.store.states].concat(args))
+    } else {
+      throw new Error(`Action not found: ${name}`)
+    }
+  }
+  const updateTableScrollY = function () {
+    nextTick(() => instance.layout.updateScrollY.apply(instance.layout))
+  }
+  return {
+    ns,
+    ...watcher,
+    mutations,
+    commit,
+    updateTableScrollY,
+  }
+}
+
+export default useStore
+
+class HelperStore<T> {
+  Return = useStore<T>()
+}
+
+type StoreFilter = Record<string, string[]>
+type Store<T> = HelperStore<T>['Return']
+export type { WatcherPropsData, Store, StoreFilter }