resolver-egretimp-plus 0.1.113 → 0.1.115

package/src-bak/components/table/src/config.ts

@@ -0,0 +1,256 @@
+// @ts-nocheck
+import { h } from 'vue'
+import ElCheckbox from 'element-plus/es/components/checkbox/index.mjs'
+import { ElIcon } from 'element-plus/es/components/icon/index.mjs'
+import { ArrowRight, Loading } from '@element-plus/icons-vue'
+import { getProp } from 'element-plus/es/utils/index.mjs'
+
+import type { VNode } from 'vue'
+import type { TableColumnCtx } from './table-column/defaults'
+import type { Store } from './store'
+import type { TreeNode } from './table/defaults'
+
+const defaultClassNames = {
+  selection: 'table-column--selection',
+  expand: 'table__expand-column',
+}
+
+export const cellStarts = {
+  default: {
+    order: '',
+  },
+  selection: {
+    width: 48,
+    minWidth: 48,
+    realWidth: 48,
+    order: '',
+  },
+  expand: {
+    width: 48,
+    minWidth: 48,
+    realWidth: 48,
+    order: '',
+  },
+  index: {
+    width: 48,
+    minWidth: 48,
+    realWidth: 48,
+    order: '',
+  },
+}
+
+export const getDefaultClassName = (type) => {
+  return defaultClassNames[type] || ''
+}
+
+// 这些选项不应该被覆盖
+export const cellForced = {
+  selection: {
+    renderHeader<T>({ store, column }: { store: Store<T> }) {
+      function isDisabled() {
+        return store.states.data.value && store.states.data.value.length === 0
+      }
+      return h(ElCheckbox, {
+        disabled: isDisabled(),
+        size: store.states.tableSize.value,
+        indeterminate:
+          store.states.selection.value.length > 0 &&
+          !store.states.isAllSelected.value,
+        'onUpdate:modelValue': store.toggleAllSelection,
+        modelValue: store.states.isAllSelected.value,
+        ariaLabel: column.label,
+      })
+    },
+    renderCell<T>({
+      row,
+      column,
+      store,
+      $index,
+    }: {
+      row: T
+      column: TableColumnCtx<T>
+      store: Store<T>
+      $index: string
+    }) {
+      return h(ElCheckbox, {
+        disabled: column.selectable
+          ? !column.selectable.call(null, row, $index)
+          : false,
+        size: store.states.tableSize.value,
+        onChange: () => {
+          store.commit('rowSelectedChanged', row)
+        },
+        onClick: (event: Event) => event.stopPropagation(),
+        modelValue: store.isSelected(row),
+        ariaLabel: column.label,
+      })
+    },
+    sortable: false,
+    resizable: false,
+  },
+  index: {
+    renderHeader<T>({ column }: { column: TableColumnCtx<T> }) {
+      return column.label || '#'
+    },
+    renderCell<T>({
+      column,
+      $index,
+    }: {
+      column: TableColumnCtx<T>
+      $index: number
+    }) {
+      let i = $index + 1
+      const index = column.index
+
+      if (typeof index === 'number') {
+        i = $index + index
+      } else if (typeof index === 'function') {
+        i = index($index)
+      }
+      return h('div', {}, [i])
+    },
+    sortable: false,
+  },
+  expand: {
+    renderHeader<T>({ column }: { column: TableColumnCtx<T> }) {
+      return column.label || ''
+    },
+    renderCell<T>({
+      row,
+      store,
+      expanded,
+    }: {
+      row: T
+      store: Store<T>
+      expanded: boolean
+    }) {
+      const { ns } = store
+      const classes = [ns.e('expand-icon')]
+      if (expanded) {
+        classes.push(ns.em('expand-icon', 'expanded'))
+      }
+      const callback = function (e: Event) {
+        e.stopPropagation()
+        store.toggleRowExpansion(row)
+      }
+      return h(
+        'div',
+        {
+          class: classes,
+          onClick: callback,
+        },
+        {
+          default: () => {
+            return [
+              h(ElIcon, null, {
+                default: () => {
+                  return [h(ArrowRight)]
+                },
+              }),
+            ]
+          },
+        }
+      )
+    },
+    sortable: false,
+    resizable: false,
+  },
+}
+
+export function defaultRenderCell<T>({
+  row,
+  column,
+  $index,
+}: {
+  row: T
+  column: TableColumnCtx<T>
+  $index: number
+}) {
+  const property = column.property
+  const value = property && getProp(row, property).value
+  if (column && column.formatter) {
+    return column.formatter(row, column, value, $index)
+  }
+  return value?.toString?.() || ''
+}
+
+export function treeCellPrefix<T>(
+  {
+    row,
+    treeNode,
+    store,
+  }: {
+    row: T
+    treeNode: TreeNode
+    store: Store<T>
+  },
+  createPlaceholder = false
+) {
+  const { ns } = store
+  if (!treeNode) {
+    if (createPlaceholder) {
+      return [
+        h('span', {
+          class: ns.e('placeholder'),
+        }),
+      ]
+    }
+    return null
+  }
+  const ele: VNode[] = []
+  const callback = function (e) {
+    e.stopPropagation()
+    if (treeNode.loading) {
+      return
+    }
+    store.loadOrToggle(row)
+  }
+  if (treeNode.indent) {
+    ele.push(
+      h('span', {
+        class: ns.e('indent'),
+        style: { 'padding-left': `${treeNode.indent}px` },
+      })
+    )
+  }
+  if (typeof treeNode.expanded === 'boolean' && !treeNode.noLazyChildren) {
+    const expandClasses = [
+      ns.e('expand-icon'),
+      treeNode.expanded ? ns.em('expand-icon', 'expanded') : '',
+    ]
+    let icon = ArrowRight
+    if (treeNode.loading) {
+      icon = Loading
+    }
+
+    ele.push(
+      h(
+        'div',
+        {
+          class: expandClasses,
+          onClick: callback,
+        },
+        {
+          default: () => {
+            return [
+              h(
+                ElIcon,
+                { class: { [ns.is('loading')]: treeNode.loading } },
+                {
+                  default: () => [h(icon)],
+                }
+              ),
+            ]
+          },
+        }
+      )
+    )
+  } else {
+    ele.push(
+      h('span', {
+        class: ns.e('placeholder'),
+      })
+    )
+  }
+  return ele
+}

package/src-bak/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-bak/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-bak/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-bak/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