resolver-egretimp-plus 0.1.30 → 0.1.31

package/dist/web/index.js.LICENSE.txt

@@ -25,6 +25,21 @@
 
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
 
+/**
+ * Checks if an event is supported in the current execution environment.
+ *
+ * NOTE: This will not work correctly for non-generic events such as `change`,
+ * `reset`, `load`, `error`, and `select`.
+ *
+ * Borrows from Modernizr.
+ *
+ * @param {string} eventNameSuffix Event name, e.g. "click".
+ * @param {?boolean} capture Check if the capture phase is supported.
+ * @return {boolean} True if the event is supported.
+ * @internal
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */
+
 /**
 * @vue/compiler-core v3.4.15
 * (c) 2018-present Yuxi (Evan) You and Vue contributors

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "resolver-egretimp-plus",
-  "version": "0.1.30",
+  "version": "0.1.31",
   "description": "交付体验渲染",
   "main": "./dist/web/index.js",
   "module": "./dist/web/index.js",
@@ -46,6 +46,7 @@
     "qs": "^6.13.0",
     "sass": "1.77.6",
     "sass-loader": "^14.2.1",
+    "ts-loader": "^9.5.2",
     "vue": "^3.5.12",
     "vue-demi": "^0.14.10",
     "vue-loader": "^17.4.2",
@@ -54,5 +55,8 @@
     "vue3-sfc-loader": "^0.9.5",
     "webpack": "^5.90.0",
     "webpack-cli": "^5.1.4"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.8"
   }
 }

package/scripts/webpack.config.js

@@ -40,6 +40,21 @@ module.exports = {
           }
         ],
       },
+      {
+        test: /\.tsx?$/,
+        use: [
+          'babel-loader',
+          {
+            loader: 'ts-loader',
+            options: {
+              appendTsSuffixTo: [/\.vue$/],
+              transpileOnly: true,
+              happyPackMode: false,
+            }
+          }
+        ],
+        exclude: /node_modules/,
+      },
       {
         test: /\.less$/,
         use: [
@@ -67,7 +82,7 @@ module.exports = {
   },
   // devtool: 'source-map',
   resolve: {
-    extensions: ['.js', '.json', '.vue', '.jsx'],
+    extensions: ['.js', '.json', '.vue', '.jsx', '.ts'],
     modules: [path.resolve(__dirname, '../node_modules')]
   },
   externals: {
@@ -83,7 +98,8 @@ module.exports = {
     'element-plus/es/constants/index.mjs': 'element-plus/es/constants/index.mjs',
     'element-plus/es/utils/index.mjs': 'element-plus/es/utils/index.mjs',
     'element-plus/es/locale/lang/zh-cn': 'element-plus/es/locale/lang/zh-cn',
-    'element-plus/es/locale/lang/en': 'element-plus/es/locale/lang/en'
+    'element-plus/es/locale/lang/en': 'element-plus/es/locale/lang/en',
+    // '@popperjs/core': '@popperjs/core'
   },
   externalsType: 'module',
   experiments: {

package/src/components/packages-web/CustomComponentTable.jsx

@@ -1,10 +1,10 @@
   
-import { ElTable, ElTableColumn, ElPagination } from 'element-plus'
+import { ElPagination } from 'element-plus'
+import ElTable, { ElTableColumn } from '../table'
 import Renderer from '../../renderer.jsx'
 import { computed, inject, watch, h, ref, reactive } from 'vue'
 import { commonPropsType, TABLE_COLUMN_NOT_RENDER_META_TYPE, DISPLAY_SHOW, compareComponet, isPlainObject, hasOwn, cloneDeep, isPromise, isPlainColumn, generateUniqueId, calcDisable, camelize, capitalize, DISPLAY_HIDDEN, definePrivatelyProp } from '../../utils/index.js'
 import '../styles/CustomComponenTable.scss'
-import { assginConfig } from '../helper/resolver.js'
 
 export default {
   inheritAttrs: false,
@@ -77,7 +77,6 @@ export default {
     const rootValue = inject('rootValue')
     const selects = inject('selects')
     const tableColumnFirstMetaCode = ref("")
-    // assginConfig({dynamicMapComp, pmPageMetaList: props.config.pmPageMetaList || [], preKey: props.config?.dynamicHireRelat || '', ruleExecuter })
     const tableColumnConfigs = computed(() => {
       let pmPageMetaList = props.config.pmPageMetaList || []
       return pmPageMetaList.map((config) => {
@@ -197,8 +196,12 @@ export default {
         config.showOverflowTooltip != '0' &&
         config['show-overflow-tooltip'] != '0'
       ) {
-        retObj['show-overflow-tooltip'] = true
-        retObj.showOverflowTooltip = true
+        const showOverflowTooltipFn = (data) => {
+          const currentConfig = multiPmPageMetaList.value?.[data.$index]?.[idx]
+          return isPlainColumn({...currentConfig, isColumn: true}, calcDisable(currentConfig, retObj.mode))
+        }
+        retObj['show-overflow-tooltip'] = showOverflowTooltipFn
+        retObj.showOverflowTooltip = showOverflowTooltipFn
       }
       if (config.type === 'selection') {
         const orginSelectable = retObj.selectable

package/src/components/table/index.ts

@@ -0,0 +1,29 @@
+import { withInstall, withNoopInstall } from 'element-plus/es/utils/index.mjs'
+import Table from './src/table.vue'
+import TableColumn from './src/tableColumn'
+
+export const ElTable = withInstall(Table, {
+  TableColumn,
+})
+export default ElTable
+export const ElTableColumn = withNoopInstall(TableColumn)
+
+export type TableInstance = InstanceType<typeof Table>
+
+export type TableColumnInstance = InstanceType<typeof TableColumn>
+
+export type {
+  SummaryMethod,
+  Table,
+  TableProps,
+  TableRefs,
+  ColumnCls,
+  ColumnStyle,
+  CellCls,
+  CellStyle,
+  TreeNode,
+  RenderRowData,
+  Sort,
+  Filter,
+  TableColumnCtx,
+} from './src/table/defaults'

package/src/components/table/src/composables/use-scrollbar.ts

@@ -0,0 +1,30 @@
+import { ref } from 'vue'
+import { isNumber } from 'element-plus/es/utils/index.mjs'
+
+export const useScrollbar = () => {
+  const scrollBarRef = ref()
+
+  const scrollTo = (options: ScrollToOptions | number, yCoord?: number) => {
+    const scrollbar = scrollBarRef.value
+    if (scrollbar) {
+      scrollbar.scrollTo(options, yCoord)
+    }
+  }
+
+  const setScrollPosition = (position: 'Top' | 'Left', offset?: number) => {
+    const scrollbar = scrollBarRef.value
+    if (scrollbar && isNumber(offset) && ['Top', 'Left'].includes(position)) {
+      scrollbar[`setScroll${position}`](offset)
+    }
+  }
+
+  const setScrollTop = (top?: number) => setScrollPosition('Top', top)
+  const setScrollLeft = (left?: number) => setScrollPosition('Left', left)
+
+  return {
+    scrollBarRef,
+    scrollTo,
+    setScrollTop,
+    setScrollLeft,
+  }
+}

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