@vxe-ui/plugin-render-element 3.0.0

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@vxe-ui/plugin-render-element",
+  "version": "3.0.0",
+  "description": "Vxe UI plug-in for compatibility with the element-ui component.",
+  "scripts": {
+    "lib": "gulp build"
+  },
+  "files": [
+    "types",
+    "dist",
+    "src"
+  ],
+  "main": "dist/index.common.js",
+  "unpkg": "dist/index.umd.js",
+  "jsdelivr": "dist/index.umd.js",
+  "style": "dist/style.css",
+  "typings": "types/index.d.ts",
+  "devDependencies": {
+    "@babel/core": "^7.12.3",
+    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/runtime": "^7.12.5",
+    "@typescript-eslint/eslint-plugin": "^4.6.1",
+    "@typescript-eslint/parser": "^4.6.1",
+    "browserify": "^17.0.0",
+    "del": "^6.0.0",
+    "eslint": "^7.13.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-config-standard": "^16.0.1",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.2",
+    "eslint-plugin-typescript": "^0.14.0",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^8.0.0",
+    "gulp-babel": "^8.0.0",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-rename": "^2.0.0",
+    "gulp-replace": "^1.1.3",
+    "gulp-sass": "^5.1.0",
+    "gulp-sourcemaps": "^3.0.0",
+    "gulp-typescript": "^5.0.1",
+    "gulp-uglify": "^3.0.2",
+    "markdown-doctest": "^1.1.0",
+    "prettier": "^2.1.2",
+    "sass": "^1.55.0",
+    "typescript": "^4.6.4",
+    "vinyl-source-stream": "^2.0.0",
+    "vue": "^2.6.14",
+    "vxe-pc-ui": "^3.1.8",
+    "vxe-table": "^3.9.0-rc.15"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/x-extends/vxe-ui-plugins.git"
+  },
+  "keywords": [
+    "vxe-ui-plugins"
+  ],
+  "author": {
+    "name": "Xu Liangzhan",
+    "email": "xu_liangzhan@163.com"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/x-extends/vxe-ui-plugins/issues"
+  },
+  "homepage": "https://github.com/x-extends/vxe-ui-plugins#readme"
+}

package/src/form/index.ts

@@ -0,0 +1,406 @@
+import { CreateElement } from 'vue'
+import XEUtils from 'xe-utils'
+
+import type { VxeUIExport, VxeGlobalRendererHandles, VxeGlobalInterceptorHandles } from 'vxe-pc-ui'
+
+/**
+ * 表单 - 渲染器
+ */
+export function defineFormRender (VxeUI: VxeUIExport) {
+  function isEmptyValue (cellValue: any) {
+    return cellValue === null || cellValue === undefined || cellValue === ''
+  }
+
+  function getOnName (type: string) {
+    return type
+  }
+
+  function getModelProp (renderOpts: VxeGlobalRendererHandles.RenderOptions) {
+    return 'value'
+  }
+
+  function getModelEvent (renderOpts: VxeGlobalRendererHandles.RenderOptions) {
+    return 'input'
+  }
+
+  function getChangeEvent (renderOpts: VxeGlobalRendererHandles.RenderOptions) {
+    let type = 'change'
+    switch (renderOpts.name) {
+      case 'ElAutocomplete':
+        type = 'select'
+        break
+      case 'ElInput':
+      case 'ElInputNumber':
+        type = 'input'
+        break
+    }
+    return type
+  }
+
+  function getItemProps (renderOpts: VxeGlobalRendererHandles.RenderOptions, params: any, value: any, defaultProps?: { [prop: string]: any }) {
+    return XEUtils.assign({}, defaultProps, renderOpts.props, { [getModelProp(renderOpts)]: value })
+  }
+
+  function formatText (cellValue: any) {
+    return '' + (isEmptyValue(cellValue) ? '' : cellValue)
+  }
+
+  function getOns (renderOpts: VxeGlobalRendererHandles.RenderOptions, params: VxeGlobalRendererHandles.RenderParams, inputFunc?: Function, changeFunc?: Function) {
+    const { events } = renderOpts
+    const modelEvent = getModelEvent(renderOpts)
+    const changeEvent = getChangeEvent(renderOpts)
+    const isSameEvent = changeEvent === modelEvent
+    const ons: { [type: string]: Function } = {}
+    XEUtils.objectEach(events, (func: Function, key: string) => {
+      ons[getOnName(key)] = function (...args: any[]) {
+        func(params, ...args)
+      }
+    })
+    if (inputFunc) {
+      ons[getOnName(modelEvent)] = function (targetEvnt: any) {
+        inputFunc(targetEvnt)
+        if (events && events[modelEvent]) {
+          events[modelEvent](params, targetEvnt)
+        }
+        if (isSameEvent && changeFunc) {
+          changeFunc(targetEvnt)
+        }
+      }
+    }
+    if (!isSameEvent && changeFunc) {
+      ons[getOnName(changeEvent)] = function (...args: any[]) {
+        changeFunc(...args)
+        if (events && events[changeEvent]) {
+          events[changeEvent](params, ...args)
+        }
+      }
+    }
+    return ons
+  }
+
+  function getItemOns (renderOpts: VxeGlobalRendererHandles.RenderOptions, params: any) {
+    const { $form, data, field } = params
+    return getOns(renderOpts, params, (value: any) => {
+    // 处理 model 值双向绑定
+      XEUtils.set(data, field, value)
+    }, () => {
+    // 处理 change 事件相关逻辑
+      $form.updateStatus(params)
+    })
+  }
+
+  function renderOptions (h: CreateElement, options: any[], optionProps: VxeGlobalRendererHandles.RenderOptionProps) {
+    const labelProp = optionProps.label || 'label'
+    const valueProp = optionProps.value || 'value'
+    return XEUtils.map(options, (item, oIndex) => {
+      return h('el-option', {
+        key: oIndex,
+        props: {
+          value: item[valueProp],
+          label: item[labelProp],
+          disabled: item.disabled
+        }
+      })
+    })
+  }
+
+  function cellText (cellValue: any): string[] {
+    return [formatText(cellValue)]
+  }
+
+  function createFormItemRender (defaultProps?: { [key: string]: any }) {
+    return function (h: CreateElement, renderOpts: VxeGlobalRendererHandles.RenderItemContentOptions & { name: string }, params: any) {
+      const { data, field } = params
+      const { name } = renderOpts
+      const { attrs } = renderOpts
+      const itemValue = XEUtils.get(data, field)
+      return [
+        h(name, {
+          attrs,
+          props: {
+            ...getItemProps(renderOpts, params, itemValue, defaultProps)
+          },
+          on: getItemOns(renderOpts, params)
+        })
+      ]
+    }
+  }
+
+  function defaultButtonItemRender (h: CreateElement, renderOpts: VxeGlobalRendererHandles.RenderItemContentOptions, params: any) {
+    const { attrs } = renderOpts
+    const props = getItemProps(renderOpts, params, null)
+    return [
+      h('el-button', {
+        attrs,
+        props: {
+          ...props
+        },
+        on: getOns(renderOpts, params),
+        scopedSlots: {
+          default: () => cellText(renderOpts.content || props.content)
+        }
+      })
+    ]
+  }
+
+  function defaultButtonsItemRender (h: CreateElement, renderOpts: VxeGlobalRendererHandles.RenderItemContentOptions, params: any) {
+    const { children } = renderOpts
+    if (children) {
+      return children.map((childRenderOpts: VxeGlobalRendererHandles.RenderItemContentOptions) => defaultButtonItemRender(h, childRenderOpts, params)[0])
+    }
+    return []
+  }
+
+  /**
+   * 已废弃
+   * @deprecated
+   */
+  function createOldFormItemRadioAndCheckboxRender () {
+    return function (h: CreateElement, renderOpts: VxeGlobalRendererHandles.RenderItemContentOptions & { name: string }, params: any) {
+      const { name, options = [], optionProps = {}, attrs } = renderOpts
+      const { data, field } = params
+      const labelProp = optionProps.label || 'label'
+      const valueProp = optionProps.value || 'value'
+      const itemValue = XEUtils.get(data, field)
+      return [
+        h(`${name}Group`, {
+          attrs,
+          props: {
+            ...getItemProps(renderOpts, params, itemValue)
+          },
+          on: getItemOns(renderOpts, params),
+          scopedSlots: {
+            default: () => {
+              return options.map((option, oIndex) => {
+                return h(name, {
+                  key: oIndex,
+                  props: {
+                    label: option[valueProp],
+                    disabled: option.disabled
+                  },
+                  scopedSlots: {
+                    default: () => cellText(option[labelProp])
+                  }
+                })
+              })
+            }
+          }
+        })
+      ]
+    }
+  }
+
+  /**
+ * 检查触发源是否属于目标节点
+ */
+  function getEventTargetNode (evnt: any, container: HTMLElement, className: string) {
+    let targetElem
+    let target = evnt.target
+    while (target && target.nodeType && target !== document) {
+      if (className && target.className && target.className.split && target.className.split(' ').indexOf(className) > -1) {
+        targetElem = target
+      } else if (target === container) {
+        return { flag: className ? !!targetElem : true, container, targetElem: targetElem }
+      }
+      target = target.parentNode
+    }
+    return { flag: false }
+  }
+
+  /**
+ * 事件兼容性处理
+ */
+  function handleClearEvent (params: VxeGlobalInterceptorHandles.InterceptorClearFilterParams | VxeGlobalInterceptorHandles.InterceptorClearEditParams | VxeGlobalInterceptorHandles.InterceptorClearAreasParams) {
+    const { $event } = params
+    const bodyElem = document.body
+    if (
+    // 远程搜索
+      getEventTargetNode($event, bodyElem, 'el-autocomplete-suggestion').flag ||
+    // 下拉框
+    getEventTargetNode($event, bodyElem, 'el-select-dropdown').flag ||
+    // 级联
+    getEventTargetNode($event, bodyElem, 'el-cascader__dropdown').flag ||
+    getEventTargetNode($event, bodyElem, 'el-cascader-menus').flag ||
+    // 日期
+    getEventTargetNode($event, bodyElem, 'el-time-panel').flag ||
+    getEventTargetNode($event, bodyElem, 'el-picker-panel').flag ||
+    // 颜色
+    getEventTargetNode($event, bodyElem, 'el-color-dropdown').flag
+    ) {
+      return false
+    }
+  }
+
+  VxeUI.renderer.mixin({
+    ElAutocomplete: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ElInput: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ElInputNumber: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ElSelect: {
+      renderFormItemContent (h, renderOpts, params) {
+        const { options = [], optionGroups, optionProps = {}, optionGroupProps = {} } = renderOpts
+        const { data, field } = params
+        const { attrs } = renderOpts
+        const itemValue = XEUtils.get(data, field)
+        const props = getItemProps(renderOpts, params, itemValue)
+        const ons = getItemOns(renderOpts, params)
+        if (optionGroups) {
+          const groupOptions = optionGroupProps.options || 'options'
+          const groupLabel = optionGroupProps.label || 'label'
+          return [
+            h('el-select', {
+              attrs,
+              props: {
+                ...props
+              },
+              on: ons,
+              scopedSlots: {
+                default: () => {
+                  return XEUtils.map(optionGroups, (group, gIndex) => {
+                    return h('el-option-group', {
+                      key: gIndex,
+                      props: {
+                        label: group[groupLabel]
+                      },
+                      scopedSlots: {
+                        default: () => renderOptions(h, group[groupOptions], optionProps)
+                      }
+                    })
+                  })
+                }
+              }
+            })
+          ]
+        }
+        return [
+          h('el-select', {
+            attrs,
+            props: {
+              ...props
+            },
+            on: ons,
+            scopedSlots: {
+              default: () => renderOptions(h, options, optionProps)
+            }
+          })
+        ]
+      }
+    },
+    ElCascader: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ElDatePicker: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ElTimePicker: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ElTimeSelect: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ElRate: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ElSwitch: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ElSlider: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ElRadioGroup: {
+      renderFormItemContent (h, renderOpts, params) {
+        const { options = [], optionProps = {}, attrs } = renderOpts
+        const { data, field } = params
+        const labelProp = optionProps.label || 'label'
+        const valueProp = optionProps.value || 'value'
+        const itemValue = XEUtils.get(data, field)
+        return [
+          h('el-radio-group', {
+            attrs,
+            props: {
+              ...getItemProps(renderOpts, params, itemValue)
+            },
+            on: {
+              ...getItemOns(renderOpts, params)
+            },
+            scopedSlots: {
+              default: () => {
+                return options.map((option, oIndex) => {
+                  return h('el-radio', {
+                    key: oIndex,
+                    props: {
+                      value: option[valueProp],
+                      disabled: option.disabled
+                    },
+                    scopedSlots: {
+                      default: () => cellText(option[labelProp])
+                    }
+                  })
+                })
+              }
+            }
+          })
+        ]
+      }
+    },
+    ElCheckboxGroup: {
+      renderFormItemContent (h, renderOpts, params) {
+        const { options = [], optionProps = {}, attrs } = renderOpts
+        const { data, field } = params
+        const labelProp = optionProps.label || 'label'
+        const valueProp = optionProps.value || 'value'
+        const itemValue = XEUtils.get(data, field)
+        return [
+          h('el-checkbox-group', {
+            attrs,
+            props: {
+              ...getItemProps(renderOpts, params, itemValue)
+            },
+            on: {
+              ...getItemOns(renderOpts, params)
+            },
+            scopedSlots: {
+              default: () => {
+                return options.map((option, oIndex) => {
+                  return h('el-checkbox', {
+                    key: oIndex,
+                    props: {
+                      value: option[valueProp],
+                      label: option[labelProp],
+                      disabled: option.disabled
+                    }
+                  })
+                })
+              }
+            }
+          })
+        ]
+      }
+    },
+    ElButton: {
+      renderFormItemContent: defaultButtonItemRender
+    },
+
+    // 已废弃
+    ElRadio: {
+      renderFormItemContent: createOldFormItemRadioAndCheckboxRender()
+    },
+    ElCheckbox: {
+      renderFormItemContent: createOldFormItemRadioAndCheckboxRender()
+    },
+    ElButtons: {
+      renderFormItemContent: defaultButtonsItemRender
+    }
+  })
+
+  VxeUI.interceptor.add('event.clearFilter', handleClearEvent)
+  VxeUI.interceptor.add('event.clearEdit', handleClearEvent)
+  VxeUI.interceptor.add('event.clearAreas', handleClearEvent)
+  // 兼容老版本
+  VxeUI.interceptor.add('event.clearActived', handleClearEvent)
+}

package/src/index.ts

@@ -0,0 +1,76 @@
+import { defineTableRender } from './table'
+import { defineFormRender } from './form'
+
+import type { VxeUIPluginObject, VxeGlobalInterceptorHandles } from 'vxe-pc-ui'
+
+// eslint-disable-next-line no-unused-vars
+let ElementPlus: any
+
+/**
+ * 检查触发源是否属于目标节点
+ */
+function getEventTargetNode (evnt: any, container: HTMLElement, className: string) {
+  let targetElem
+  let target = evnt.target
+  while (target && target.nodeType && target !== document) {
+    if (className && target.className && target.className.split && target.className.split(' ').indexOf(className) > -1) {
+      targetElem = target
+    } else if (target === container) {
+      return { flag: className ? !!targetElem : true, container, targetElem: targetElem }
+    }
+    target = target.parentNode
+  }
+  return { flag: false }
+}
+
+/**
+ * 事件兼容性处理
+ */
+function handleClearEvent (params: VxeGlobalInterceptorHandles.InterceptorClearFilterParams | VxeGlobalInterceptorHandles.InterceptorClearEditParams | VxeGlobalInterceptorHandles.InterceptorClearAreasParams) {
+  const { $event } = params
+  const bodyElem = document.body
+  if (
+    // 远程搜索
+    getEventTargetNode($event, bodyElem, 'el-autocomplete-suggestion').flag ||
+    // 下拉框
+    getEventTargetNode($event, bodyElem, 'el-select-dropdown').flag ||
+    // 级联
+    getEventTargetNode($event, bodyElem, 'el-cascader__dropdown').flag ||
+    getEventTargetNode($event, bodyElem, 'el-cascader-menus').flag ||
+    // 日期
+    getEventTargetNode($event, bodyElem, 'el-time-panel').flag ||
+    getEventTargetNode($event, bodyElem, 'el-picker-panel').flag ||
+    // 颜色
+    getEventTargetNode($event, bodyElem, 'el-color-dropdown').flag
+  ) {
+    return false
+  }
+}
+
+export const VxeUIPluginRenderElement: VxeUIPluginObject = {
+  install (VxeUI, options?: {
+    ElementPlus?: any
+  }) {
+    ElementPlus = options ? options.ElementPlus : {}
+
+    // 检查版本
+    if (!/^(3)\./.test(VxeUI.uiVersion)) {
+      console.error('[plugin-render-element 3.x] Version 3.x is required')
+    }
+
+    defineTableRender(VxeUI)
+    defineFormRender(VxeUI)
+
+    VxeUI.interceptor.add('event.clearFilter', handleClearEvent)
+    VxeUI.interceptor.add('event.clearEdit', handleClearEvent)
+    VxeUI.interceptor.add('event.clearAreas', handleClearEvent)
+    // 兼容老版本
+    VxeUI.interceptor.add('event.clearActived', handleClearEvent)
+  }
+}
+
+if (typeof window !== 'undefined' && window.VxeUI && window.VxeUI.use) {
+  window.VxeUI.use(VxeUIPluginRenderElement)
+}
+
+export default VxeUIPluginRenderElement