resolver-egretimp-plus 0.1.29 → 0.1.31

package/src/components/table/src/filter-panel.vue

@@ -0,0 +1,260 @@
+<template>
+  <el-tooltip
+    ref="tooltip"
+    :visible="tooltipVisible"
+    :offset="0"
+    :placement="placement"
+    :show-arrow="false"
+    :stop-popper-mouse-event="false"
+    teleported
+    effect="light"
+    pure
+    :popper-class="filterClassName"
+    persistent
+  >
+    <template #content>
+      <div v-if="multiple">
+        <div :class="ns.e('content')">
+          <el-scrollbar :wrap-class="ns.e('wrap')">
+            <el-checkbox-group
+              v-model="filteredValue"
+              :class="ns.e('checkbox-group')"
+            >
+              <el-checkbox
+                v-for="filter in filters"
+                :key="filter.value"
+                :value="filter.value"
+              >
+                {{ filter.text }}
+              </el-checkbox>
+            </el-checkbox-group>
+          </el-scrollbar>
+        </div>
+        <div :class="ns.e('bottom')">
+          <button
+            :class="{ [ns.is('disabled')]: filteredValue.length === 0 }"
+            :disabled="filteredValue.length === 0"
+            type="button"
+            @click="handleConfirm"
+          >
+            {{ t('el.table.confirmFilter') }}
+          </button>
+          <button type="button" @click="handleReset">
+            {{ t('el.table.resetFilter') }}
+          </button>
+        </div>
+      </div>
+      <ul v-else :class="ns.e('list')">
+        <li
+          :class="[
+            ns.e('list-item'),
+            {
+              [ns.is('active')]:
+                filterValue === undefined || filterValue === null,
+            },
+          ]"
+          @click="handleSelect(null)"
+        >
+          {{ t('el.table.clearFilter') }}
+        </li>
+        <li
+          v-for="filter in filters"
+          :key="filter.value"
+          :class="[ns.e('list-item'), ns.is('active', isActive(filter))]"
+          :label="filter.value"
+          @click="handleSelect(filter.value)"
+        >
+          {{ filter.text }}
+        </li>
+      </ul>
+    </template>
+    <template #default>
+      <span
+        v-click-outside:[popperPaneRef]="hideFilterPanel"
+        :class="[
+          `${ns.namespace.value}-table__column-filter-trigger`,
+          `${ns.namespace.value}-none-outline`,
+        ]"
+        @click="showFilterPanel"
+      >
+        <el-icon>
+          <arrow-up v-if="column.filterOpened" />
+          <arrow-down v-else />
+        </el-icon>
+      </span>
+    </template>
+  </el-tooltip>
+</template>
+
+<script lang="ts">
+// @ts-nocheck
+import { computed, defineComponent, getCurrentInstance, ref, watch } from 'vue'
+import ElCheckbox from 'element-plus/es/components/checkbox/index.mjs'
+import { ElIcon } from 'element-plus/es/components/icon/index.mjs'
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
+import { ClickOutside } from 'element-plus/es/directives/index.mjs'
+import { useLocale, useNamespace } from 'element-plus/es/hooks/index.mjs'
+import ElTooltip from 'element-plus/es/components/tooltip/index.mjs'
+import ElScrollbar from 'element-plus/es/components/scrollbar/index.mjs'
+import type { Placement } from 'element-plus/es/components/popper/index.mjs.mjs'
+
+import type { PropType, WritableComputedRef } from 'vue'
+import type { TableColumnCtx } from './table-column/defaults'
+import type { TableHeader } from './table-header'
+import type { Store } from './store'
+
+const { CheckboxGroup: ElCheckboxGroup } = ElCheckbox
+
+export default defineComponent({
+  name: 'ElTableFilterPanel',
+  components: {
+    ElCheckbox,
+    ElCheckboxGroup,
+    ElScrollbar,
+    ElTooltip,
+    ElIcon,
+    ArrowDown,
+    ArrowUp,
+  },
+  directives: { ClickOutside },
+  props: {
+    placement: {
+      type: String as PropType<Placement>,
+      default: 'bottom-start',
+    },
+    store: {
+      type: Object as PropType<Store<unknown>>,
+    },
+    column: {
+      type: Object as PropType<TableColumnCtx<unknown>>,
+    },
+    upDataColumn: {
+      type: Function,
+    },
+  },
+  setup(props) {
+    const instance = getCurrentInstance()
+    const { t } = useLocale()
+    const ns = useNamespace('table-filter')
+    const parent = instance?.parent as TableHeader
+    if (!parent.filterPanels.value[props.column.id]) {
+      parent.filterPanels.value[props.column.id] = instance
+    }
+    const tooltipVisible = ref(false)
+    const tooltip = ref<InstanceType<typeof ElTooltip> | null>(null)
+    const filters = computed(() => {
+      return props.column && props.column.filters
+    })
+    const filterClassName = computed(() => {
+      if (props.column.filterClassName) {
+        return `${ns.b()} ${props.column.filterClassName}`
+      }
+      return ns.b()
+    })
+    const filterValue = computed({
+      get: () => (props.column?.filteredValue || [])[0],
+      set: (value: string) => {
+        if (filteredValue.value) {
+          if (typeof value !== 'undefined' && value !== null) {
+            filteredValue.value.splice(0, 1, value)
+          } else {
+            filteredValue.value.splice(0, 1)
+          }
+        }
+      },
+    })
+    const filteredValue: WritableComputedRef<unknown[]> = computed({
+      get() {
+        if (props.column) {
+          return props.column.filteredValue || []
+        }
+        return []
+      },
+      set(value: unknown[]) {
+        if (props.column) {
+          props.upDataColumn('filteredValue', value)
+        }
+      },
+    })
+    const multiple = computed(() => {
+      if (props.column) {
+        return props.column.filterMultiple
+      }
+      return true
+    })
+    const isActive = (filter) => {
+      return filter.value === filterValue.value
+    }
+    const hidden = () => {
+      tooltipVisible.value = false
+    }
+    const showFilterPanel = (e: MouseEvent) => {
+      e.stopPropagation()
+      tooltipVisible.value = !tooltipVisible.value
+    }
+    const hideFilterPanel = () => {
+      tooltipVisible.value = false
+    }
+    const handleConfirm = () => {
+      confirmFilter(filteredValue.value)
+      hidden()
+    }
+    const handleReset = () => {
+      filteredValue.value = []
+      confirmFilter(filteredValue.value)
+      hidden()
+    }
+    const handleSelect = (_filterValue?: string) => {
+      filterValue.value = _filterValue
+      if (typeof _filterValue !== 'undefined' && _filterValue !== null) {
+        confirmFilter(filteredValue.value)
+      } else {
+        confirmFilter([])
+      }
+      hidden()
+    }
+    const confirmFilter = (filteredValue: unknown[]) => {
+      props.store.commit('filterChange', {
+        column: props.column,
+        values: filteredValue,
+      })
+      props.store.updateAllSelected()
+    }
+    watch(
+      tooltipVisible,
+      (value) => {
+        // todo
+        if (props.column) {
+          props.upDataColumn('filterOpened', value)
+        }
+      },
+      {
+        immediate: true,
+      }
+    )
+
+    const popperPaneRef = computed(() => {
+      return tooltip.value?.popperRef?.contentRef
+    })
+
+    return {
+      tooltipVisible,
+      multiple,
+      filterClassName,
+      filteredValue,
+      filterValue,
+      filters,
+      handleConfirm,
+      handleReset,
+      handleSelect,
+      isActive,
+      t,
+      ns,
+      showFilterPanel,
+      hideFilterPanel,
+      popperPaneRef,
+      tooltip,
+    }
+  },
+})
+</script>

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]
+  }
+}