resolver-egretimp-plus 0.1.113 → 0.1.115

package/src-bak/components/table/src/table-column/defaults.ts

@@ -0,0 +1,237 @@
+// @ts-nocheck
+import type { ComponentInternalInstance, PropType, Ref, VNode } from 'vue'
+import type { DefaultRow, Table } from '../table/defaults'
+import type { TableOverflowTooltipOptions } from '../util'
+
+type CI<T> = { column: TableColumnCtx<T>; $index: number }
+
+type Filters = {
+  text: string
+  value: string
+}[]
+
+type FilterMethods<T> = (value, row: T, column: TableColumnCtx<T>) => void
+
+type ValueOf<T> = T[keyof T]
+
+interface TableColumnCtx<T> {
+  id: string
+  realWidth: number
+  type: string
+  label: string
+  className: string
+  labelClassName: string
+  property: string
+  prop: string
+  width: string | number
+  minWidth: string | number
+  renderHeader: (data: CI<T>) => VNode
+  sortable: boolean | string
+  sortMethod: (a: T, b: T) => number
+  sortBy: string | ((row: T, index: number) => string) | string[]
+  resizable: boolean
+  columnKey: string
+  rawColumnKey: string
+  align: string
+  headerAlign: string
+  showOverflowTooltip?: boolean | TableOverflowTooltipOptions | ((data: any) => boolean)
+  fixed: boolean | string
+  formatter: (
+    row: T,
+    column: TableColumnCtx<T>,
+    cellValue,
+    index: number
+  ) => VNode | string
+  selectable: (row: T, index: number) => boolean
+  reserveSelection: boolean
+  filterMethod: FilterMethods<T>
+  filteredValue: string[]
+  filters: Filters
+  filterPlacement: string
+  filterMultiple: boolean
+  filterClassName: string
+  index: number | ((index: number) => number)
+  sortOrders: ('ascending' | 'descending' | null)[]
+  renderCell: (data: any) => void
+  colSpan: number
+  rowSpan: number
+  children: TableColumnCtx<T>[]
+  level: number
+  filterable: boolean | FilterMethods<T> | Filters
+  order: string
+  isColumnGroup: boolean
+  isSubColumn: boolean
+  columns: TableColumnCtx<T>[]
+  getColumnIndex: () => number
+  no: number
+  filterOpened?: boolean
+}
+
+interface TableColumn<T> extends ComponentInternalInstance {
+  vnode: {
+    vParent: TableColumn<T> | Table<T>
+  } & VNode
+  vParent: TableColumn<T> | Table<T>
+  columnId: string
+  columnConfig: Ref<Partial<TableColumnCtx<T>>>
+}
+
+export type { Filters, FilterMethods, TableColumnCtx, TableColumn, ValueOf }
+
+export default {
+  /**
+   * @description type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon
+   */
+  type: {
+    type: String,
+    default: 'default',
+  },
+  /**
+   * @description column label
+   */
+  label: String,
+  /**
+   * @description class name of cells in the column
+   */
+  className: String,
+  /**
+   * @description class name of the label of this column
+   */
+  labelClassName: String,
+  /**
+   * @description
+   */
+  property: String,
+  /**
+   * @description field name. You can also use its alias: `property`
+   */
+  prop: String,
+  /**
+   * @description column width
+   */
+  width: {
+    type: [String, Number],
+    default: '',
+  },
+  /**
+   * @description column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion
+   */
+  minWidth: {
+    type: [String, Number],
+    default: '',
+  },
+  /**
+   * @description render function for table header of this column
+   */
+  renderHeader: Function as PropType<
+    TableColumnCtx<DefaultRow>['renderHeader']
+  >,
+  /**
+   * @description whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table
+   */
+  sortable: {
+    type: [Boolean, String],
+    default: false,
+  },
+  /**
+   * @description sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort
+   */
+  sortMethod: Function as PropType<TableColumnCtx<DefaultRow>['sortMethod']>,
+  /**
+   * @description specify which property to sort by, works when `sortable` is `true` and `sort-method` is `undefined`. If set to an Array, the column will sequentially sort by the next property if the previous one is equal
+   */
+  sortBy: [String, Function, Array] as PropType<
+    TableColumnCtx<DefaultRow>['sortBy']
+  >,
+  /**
+   * @description whether column width can be resized, works when `border` of `el-table` is `true`
+   */
+  resizable: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * @description column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered
+   */
+  columnKey: String,
+  /**
+   * @description alignment, the value should be 'left' \/ 'center' \/ 'right'
+   */
+  align: String,
+  /**
+   * @description alignment of the table header. If omitted, the value of the above `align` attribute will be applied, the value should be 'left' \/ 'center' \/ 'right'
+   */
+  headerAlign: String,
+  /**
+   * @description whether to hide extra content and show them in a tooltip when hovering on the cell
+   */
+  showOverflowTooltip: {
+    type: [Boolean, Object, Function] as PropType<
+      TableColumnCtx<DefaultRow>['showOverflowTooltip']
+    >,
+    default: undefined,
+  },
+  /**
+   * @description whether column is fixed at left / right. Will be fixed at left if `true`
+   */
+  fixed: [Boolean, String],
+  /**
+   * @description function that formats cell content
+   */
+  formatter: Function as PropType<TableColumnCtx<DefaultRow>['formatter']>,
+  /**
+   * @description function that determines if a certain row can be selected, works when `type` is 'selection'
+   */
+  selectable: Function as PropType<TableColumnCtx<DefaultRow>['selectable']>,
+  /**
+   * @description whether to reserve selection after data refreshing, works when `type` is 'selection'. Note that `row-key` is required for this to work
+   */
+  reserveSelection: Boolean,
+  /**
+   * @description data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true`
+   */
+  filterMethod: Function as PropType<
+    TableColumnCtx<DefaultRow>['filterMethod']
+  >,
+  /**
+   * @description filter value for selected data, might be useful when table header is rendered with `render-header`
+   */
+  filteredValue: Array as PropType<TableColumnCtx<DefaultRow>['filteredValue']>,
+  /**
+   * @description an array of data filtering options. For each element in this array, `text` and `value` are required
+   */
+  filters: Array as PropType<TableColumnCtx<DefaultRow>['filters']>,
+  /**
+   * @description placement for the filter dropdown
+   */
+  filterPlacement: String,
+  /**
+   * @description whether data filtering supports multiple options
+   */
+  filterMultiple: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * @description className for the filter dropdown
+   */
+  filterClassName: String,
+  /**
+   * @description customize indices for each row, works on columns with `type=index`
+   */
+  index: [Number, Function] as PropType<TableColumnCtx<DefaultRow>['index']>,
+  /**
+   * @description the order of the sorting strategies used when sorting the data, works when `sortable` is `true`. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array
+   */
+  sortOrders: {
+    type: Array as PropType<TableColumnCtx<DefaultRow>['sortOrders']>,
+    default: () => {
+      return ['ascending', 'descending', null]
+    },
+    validator: (val: TableColumnCtx<unknown>['sortOrders']) => {
+      return val.every((order: string) =>
+        ['ascending', 'descending', null].includes(order)
+      )
+    },
+  },
+}

package/src-bak/components/table/src/table-column/index.ts

@@ -0,0 +1,202 @@
+// @ts-nocheck
+import {
+  Fragment,
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  onBeforeMount,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+} from 'vue'
+import ElCheckbox from 'element-plus/es/components/checkbox/index.mjs'
+import { isString, isUndefined } from 'element-plus/es/utils/index.mjs'
+import { cellStarts } from '../config'
+import { compose, mergeOptions } from '../util'
+import useWatcher from './watcher-helper'
+import useRender from './render-helper'
+import defaultProps from './defaults'
+import type { TableColumn, TableColumnCtx } from './defaults'
+
+import type { DefaultRow } from '../table/defaults'
+
+let columnIdSeed = 1
+
+export default defineComponent({
+  name: 'ElTableColumn',
+  components: {
+    ElCheckbox,
+  },
+  props: defaultProps,
+  setup(props, { slots }) {
+    const instance = getCurrentInstance() as TableColumn<DefaultRow>
+    const columnConfig = ref<Partial<TableColumnCtx<DefaultRow>>>({})
+    const owner = computed(() => {
+      let parent = instance.parent as any
+      while (parent && !parent.tableId) {
+        parent = parent.parent
+      }
+      return parent
+    })
+
+    const { registerNormalWatchers, registerComplexWatchers } = useWatcher(
+      owner,
+      props
+    )
+    const {
+      columnId,
+      isSubColumn,
+      realHeaderAlign,
+      columnOrTableParent,
+      setColumnWidth,
+      setColumnForcedProps,
+      setColumnRenders,
+      getPropsData,
+      getColumnElIndex,
+      realAlign,
+      updateColumnOrder,
+    } = useRender(props as unknown as TableColumnCtx<unknown>, slots, owner)
+
+    const parent = columnOrTableParent.value
+    columnId.value = `${
+      parent.tableId || parent.columnId
+    }_column_${columnIdSeed++}`
+    onBeforeMount(() => {
+      isSubColumn.value = owner.value !== parent
+
+      const type = props.type || 'default'
+      const sortable = props.sortable === '' ? true : props.sortable
+      const showOverflowTooltip = isUndefined(props.showOverflowTooltip)
+        ? parent.props.showOverflowTooltip
+        : props.showOverflowTooltip
+      const defaults = {
+        ...cellStarts[type],
+        id: columnId.value,
+        type,
+        property: props.prop || props.property,
+        align: realAlign,
+        headerAlign: realHeaderAlign,
+        showOverflowTooltip,
+        // filter 相关属性
+        filterable: props.filters || props.filterMethod,
+        filteredValue: [],
+        filterPlacement: '',
+        filterClassName: '',
+        isColumnGroup: false,
+        isSubColumn: false,
+        filterOpened: false,
+        // sort 相关属性
+        sortable,
+        // index 列
+        index: props.index,
+        // <el-table-column key="xxx" />
+        rawColumnKey: instance.vnode.key,
+      }
+
+      const basicProps = [
+        'columnKey',
+        'label',
+        'className',
+        'labelClassName',
+        'type',
+        'renderHeader',
+        'formatter',
+        'fixed',
+        'resizable',
+      ]
+      const sortProps = ['sortMethod', 'sortBy', 'sortOrders']
+      const selectProps = ['selectable', 'reserveSelection']
+      const filterProps = [
+        'filterMethod',
+        'filters',
+        'filterMultiple',
+        'filterOpened',
+        'filteredValue',
+        'filterPlacement',
+        'filterClassName',
+      ]
+
+      let column = getPropsData(basicProps, sortProps, selectProps, filterProps)
+
+      column = mergeOptions(defaults, column)
+      // 注意 compose 中函数执行的顺序是从右到左
+      const chains = compose(
+        setColumnRenders,
+        setColumnWidth,
+        setColumnForcedProps
+      )
+      column = chains(column)
+      columnConfig.value = column
+
+      // 注册 watcher
+      registerNormalWatchers()
+      registerComplexWatchers()
+    })
+    onMounted(() => {
+      const parent = columnOrTableParent.value
+      const children = isSubColumn.value
+        ? parent.vnode.el.children
+        : parent.refs.hiddenColumns?.children
+      const getColumnIndex = () =>
+        getColumnElIndex(children || [], instance.vnode.el)
+      columnConfig.value.getColumnIndex = getColumnIndex
+      const columnIndex = getColumnIndex()
+      columnIndex > -1 &&
+        owner.value.store.commit(
+          'insertColumn',
+          columnConfig.value,
+          isSubColumn.value ? parent.columnConfig.value : null,
+          updateColumnOrder
+        )
+    })
+    onBeforeUnmount(() => {
+      const columnIndex = columnConfig.value.getColumnIndex()
+      columnIndex > -1 &&
+        owner.value.store.commit(
+          'removeColumn',
+          columnConfig.value,
+          isSubColumn.value ? parent.columnConfig.value : null,
+          updateColumnOrder
+        )
+    })
+    instance.columnId = columnId.value
+
+    instance.columnConfig = columnConfig
+    return
+  },
+  render() {
+    try {
+      const renderDefault = this.$slots.default?.({
+        row: {},
+        column: {},
+        $index: -1,
+      })
+      const children = []
+      if (Array.isArray(renderDefault)) {
+        for (const childNode of renderDefault) {
+          if (
+            childNode.type?.name === 'ElTableColumn' ||
+            childNode.shapeFlag & 2
+          ) {
+            children.push(childNode)
+          } else if (
+            childNode.type === Fragment &&
+            Array.isArray(childNode.children)
+          ) {
+            childNode.children.forEach((vnode) => {
+              // No rendering when vnode is dynamic slot or text
+              if (vnode?.patchFlag !== 1024 && !isString(vnode?.children)) {
+                children.push(vnode)
+              }
+            })
+          }
+        }
+      }
+      const vnode = h('div', children)
+      return vnode
+    } catch {
+      return h('div', [])
+    }
+  },
+})

package/src-bak/components/table/src/table-column/render-helper.ts

@@ -0,0 +1,214 @@
+// @ts-nocheck
+import {
+  Comment,
+  computed,
+  getCurrentInstance,
+  h,
+  ref,
+  renderSlot,
+  unref,
+  watchEffect,
+} from 'vue'
+import { debugWarn } from 'element-plus/es/utils/index.mjs'
+import { useNamespace } from 'element-plus/es/hooks/index.mjs'
+import {
+  cellForced,
+  defaultRenderCell,
+  getDefaultClassName,
+  treeCellPrefix,
+} from '../config'
+import { parseMinWidth, parseWidth } from '../util'
+import type { ComputedRef } from 'vue'
+import type { TableColumn, TableColumnCtx } from './defaults'
+
+function useRender<T>(
+  props: TableColumnCtx<T>,
+  slots,
+  owner: ComputedRef<any>
+) {
+  const instance = getCurrentInstance() as TableColumn<T>
+  const columnId = ref('')
+  const isSubColumn = ref(false)
+  const realAlign = ref<string>()
+  const realHeaderAlign = ref<string>()
+  const ns = useNamespace('table')
+  watchEffect(() => {
+    realAlign.value = props.align ? `is-${props.align}` : null
+    // nextline help render
+    realAlign.value
+  })
+  watchEffect(() => {
+    realHeaderAlign.value = props.headerAlign
+      ? `is-${props.headerAlign}`
+      : realAlign.value
+    // nextline help render
+    realHeaderAlign.value
+  })
+  const columnOrTableParent = computed(() => {
+    let parent: any = instance.vnode.vParent || instance.parent
+    while (parent && !parent.tableId && !parent.columnId) {
+      parent = parent.vnode.vParent || parent.parent
+    }
+    return parent
+  })
+  const hasTreeColumn = computed<boolean>(() => {
+    const { store } = instance.parent
+    if (!store) return false
+    const { treeData } = store.states
+    const treeDataValue = treeData.value
+    return treeDataValue && Object.keys(treeDataValue).length > 0
+  })
+
+  const realWidth = ref(parseWidth(props.width))
+  const realMinWidth = ref(parseMinWidth(props.minWidth))
+  const setColumnWidth = (column: TableColumnCtx<T>) => {
+    if (realWidth.value) column.width = realWidth.value
+    if (realMinWidth.value) {
+      column.minWidth = realMinWidth.value
+    }
+    if (!realWidth.value && realMinWidth.value) {
+      column.width = undefined
+    }
+    if (!column.minWidth) {
+      column.minWidth = 80
+    }
+    column.realWidth = Number(
+      column.width === undefined ? column.minWidth : column.width
+    )
+    return column
+  }
+  const setColumnForcedProps = (column: TableColumnCtx<T>) => {
+    // 对于特定类型的 column，某些属性不允许设置
+    const type = column.type
+    const source = cellForced[type] || {}
+    Object.keys(source).forEach((prop) => {
+      const value = source[prop]
+      if (prop !== 'className' && value !== undefined) {
+        column[prop] = value
+      }
+    })
+    const className = getDefaultClassName(type)
+    if (className) {
+      const forceClass = `${unref(ns.namespace)}-${className}`
+      column.className = column.className
+        ? `${column.className} ${forceClass}`
+        : forceClass
+    }
+    return column
+  }
+
+  const checkSubColumn = (children: TableColumn<T> | TableColumn<T>[]) => {
+    if (Array.isArray(children)) {
+      children.forEach((child) => check(child))
+    } else {
+      check(children)
+    }
+    function check(item: TableColumn<T>) {
+      if (item?.type?.name === 'ElTableColumn') {
+        item.vParent = instance
+      }
+    }
+  }
+  const setColumnRenders = (column: TableColumnCtx<T>) => {
+    // renderHeader 属性不推荐使用。
+    if (props.renderHeader) {
+      debugWarn(
+        'TableColumn',
+        'Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.'
+      )
+    } else if (column.type !== 'selection') {
+      column.renderHeader = (scope) => {
+        // help render
+        instance.columnConfig.value['label']
+        return renderSlot(slots, 'header', scope, () => [column.label])
+      }
+    }
+
+    let originRenderCell = column.renderCell
+    // TODO: 这里的实现调整
+    if (column.type === 'expand') {
+      // 对于展开行，renderCell 不允许配置的。在上一步中已经设置过，这里需要简单封装一下。
+      column.renderCell = (data) =>
+        h(
+          'div',
+          {
+            class: 'cell',
+          },
+          [originRenderCell(data)]
+        )
+      owner.value.renderExpanded = (data) => {
+        return slots.default ? slots.default(data) : slots.default
+      }
+    } else {
+      originRenderCell = originRenderCell || defaultRenderCell
+      // 对 renderCell 进行包装
+      column.renderCell = (data) => {
+        let children = null
+        if (slots.default) {
+          const vnodes = slots.default(data)
+          children = vnodes.some((v) => v.type !== Comment)
+            ? vnodes
+            : originRenderCell(data)
+        } else {
+          children = originRenderCell(data)
+        }
+
+        const { columns } = owner.value.store.states
+        const firstUserColumnIndex = columns.value.findIndex(
+          (item) => item.type === 'default'
+        )
+        const shouldCreatePlaceholder =
+          hasTreeColumn.value && data.cellIndex === firstUserColumnIndex
+        const prefix = treeCellPrefix(data, shouldCreatePlaceholder)
+        const props = {
+          class: 'cell',
+          style: {},
+        }
+        if (column.showOverflowTooltip) {
+          props.class = `${props.class} ${unref(ns.namespace)}-tooltip`
+          props.style = {
+            width: `${
+              (data.column.realWidth || Number(data.column.width)) - 1
+            }px`,
+          }
+        }
+        checkSubColumn(children)
+        return h('div', props, [prefix, children])
+      }
+    }
+    return column
+  }
+  const getPropsData = (...propsKey: unknown[]) => {
+    return propsKey.reduce((prev, cur) => {
+      if (Array.isArray(cur)) {
+        cur.forEach((key) => {
+          prev[key] = props[key]
+        })
+      }
+      return prev
+    }, {})
+  }
+  const getColumnElIndex = (children, child) => {
+    return Array.prototype.indexOf.call(children, child)
+  }
+
+  const updateColumnOrder = () => {
+    owner.value.store.commit('updateColumnOrder', instance.columnConfig.value)
+  }
+
+  return {
+    columnId,
+    realAlign,
+    isSubColumn,
+    realHeaderAlign,
+    columnOrTableParent,
+    setColumnWidth,
+    setColumnForcedProps,
+    setColumnRenders,
+    getPropsData,
+    getColumnElIndex,
+    updateColumnOrder,
+  }
+}
+
+export default useRender