@vxe-ui/plugin-render-element 4.0.11 → 4.0.12

package/src/form-design/radio-widget.ts

@@ -1,5 +1,6 @@
-import { defineComponent, h, PropType, resolveComponent, ComponentOptions } from 'vue'
+import { defineComponent, h, PropType, ComponentOptions } from 'vue'
 import { useWidgetPropDataSource, WidgetDataSourceOptionObjVO } from './use'
+import { getCurrComponent } from '../util/comp'
 import XEUtils from 'xe-utils'
 
 import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormComponent, VxeFormItemComponent, VxeSwitchComponent } from 'vxe-pc-ui'
@@ -60,7 +61,7 @@ export function createWidgetElRadio (VxeUI: VxeUIExport) {
                 title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
               }, {
                 default () {
-                  return h(resolveComponent('el-input') as ComponentOptions, {
+                  return h(getCurrComponent('el-input') as ComponentOptions, {
                     modelValue: widget.title,
                     'onUpdate:modelValue' (val: any) {
                       widget.title = val
@@ -128,7 +129,7 @@ export function createWidgetElRadio (VxeUI: VxeUIExport) {
           title: widget.title
         }, {
           default () {
-            return h(resolveComponent('el-radio-group') as ComponentOptions, {
+            return h(getCurrComponent('el-radio-group') as ComponentOptions, {
               modelValue: $formView ? $formView.getItemValue(widget) : null,
               onChange: changeEvent,
               'onUpdate:modelValue' (val: any) {
@@ -140,7 +141,7 @@ export function createWidgetElRadio (VxeUI: VxeUIExport) {
               default: () => {
                 return options.options
                   ? options.options.map((item, index) => {
-                    return h(resolveComponent('el-radio') as ComponentOptions, {
+                    return h(getCurrComponent('el-radio') as ComponentOptions, {
                       key: index,
                       value: item.value
                     }, {

package/src/form-design/select-widget.ts

@@ -1,5 +1,6 @@
-import { defineComponent, h, PropType, resolveComponent, ComponentOptions } from 'vue'
+import { defineComponent, h, PropType, ComponentOptions } from 'vue'
 import { useWidgetPropDataSource, WidgetDataSourceOptionObjVO } from './use'
+import { getCurrComponent } from '../util/comp'
 import XEUtils from 'xe-utils'
 
 import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormComponent, VxeFormItemComponent, VxeSwitchComponent } from 'vxe-pc-ui'
@@ -62,7 +63,7 @@ export function createWidgetElSelect (VxeUI: VxeUIExport) {
                 title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
               }, {
                 default () {
-                  return h(resolveComponent('el-input') as ComponentOptions, {
+                  return h(getCurrComponent('el-input') as ComponentOptions, {
                     modelValue: widget.title,
                     'onUpdate:modelValue' (val: any) {
                       widget.title = val
@@ -130,7 +131,7 @@ export function createWidgetElSelect (VxeUI: VxeUIExport) {
           title: widget.title
         }, {
           default () {
-            return h(resolveComponent('el-select') as ComponentOptions, {
+            return h(getCurrComponent('el-select') as ComponentOptions, {
               modelValue: $formView ? $formView.getItemValue(widget) : null,
               placeholder: options.placeholder,
               onChange: changeEvent,
@@ -143,7 +144,7 @@ export function createWidgetElSelect (VxeUI: VxeUIExport) {
               default: () => {
                 return options.options
                   ? options.options.map(item => {
-                    return h(resolveComponent('el-option') as ComponentOptions, {
+                    return h(getCurrComponent('el-option') as ComponentOptions, {
                       label: item.value,
                       value: item.value
                     })

package/src/form-design/switch-widget.ts

@@ -1,4 +1,5 @@
-import { defineComponent, h, PropType, resolveComponent, ComponentOptions } from 'vue'
+import { defineComponent, h, PropType, ComponentOptions } from 'vue'
+import { getCurrComponent } from '../util/comp'
 
 import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormComponent, VxeFormItemComponent, VxeSwitchComponent } from 'vxe-pc-ui'
 
@@ -50,7 +51,7 @@ export function createWidgetElSwitch (VxeUI: VxeUIExport) {
                 title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
               }, {
                 default () {
-                  return h(resolveComponent('el-input') as ComponentOptions, {
+                  return h(getCurrComponent('el-input') as ComponentOptions, {
                     modelValue: widget.title,
                     'onUpdate:modelValue' (val: any) {
                       widget.title = val
@@ -116,7 +117,7 @@ export function createWidgetElSwitch (VxeUI: VxeUIExport) {
           title: widget.title
         }, {
           default () {
-            return h(resolveComponent('el-switch') as ComponentOptions, {
+            return h(getCurrComponent('el-switch') as ComponentOptions, {
               modelValue: $formView ? $formView.getItemValue(widget) : null,
               onChange: changeEvent,
               'onUpdate:modelValue' (val: any) {

package/src/form-design/textarea-widget.ts

@@ -1,4 +1,5 @@
-import { defineComponent, h, PropType, resolveComponent, ComponentOptions } from 'vue'
+import { defineComponent, h, PropType, ComponentOptions } from 'vue'
+import { getCurrComponent } from '../util/comp'
 
 import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormComponent, VxeFormItemComponent, VxeSwitchComponent } from 'vxe-pc-ui'
 
@@ -52,7 +53,7 @@ export function createWidgetElTextarea (VxeUI: VxeUIExport) {
                 title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
               }, {
                 default () {
-                  return h(resolveComponent('el-input') as ComponentOptions, {
+                  return h(getCurrComponent('el-input') as ComponentOptions, {
                     modelValue: widget.title,
                     'onUpdate:modelValue' (val: any) {
                       widget.title = val
@@ -119,7 +120,7 @@ export function createWidgetElTextarea (VxeUI: VxeUIExport) {
           title: widget.title
         }, {
           default () {
-            return h(resolveComponent('el-input') as ComponentOptions, {
+            return h(getCurrComponent('el-input') as ComponentOptions, {
               modelValue: $formView ? $formView.getItemValue(widget) : null,
               placeholder: options.placeholder,
               type: 'textarea',

package/src/index.ts

@@ -1,7 +1,10 @@
 import { defineTableRender } from './table'
 import { defineFormRender } from './form'
 import { defineFormDesignRender } from './form-design'
+import { globalConfig, componentMaps } from './store'
+import XEUtils from 'xe-utils'
 
+import type { VxeUIPluginRenderElementOptions } from '../types'
 import type { VxeUIPluginObject, VxeGlobalInterceptorHandles } from 'vxe-pc-ui'
 
 // eslint-disable-next-line no-unused-vars
@@ -57,11 +60,29 @@ function handleClearEvent (params: VxeGlobalInterceptorHandles.InterceptorClearF
   }
 }
 
+function toComponentName (name: string) {
+  if (name) {
+    return name.slice(0, 1).toUpperCase() + name.slice(1)
+  }
+  return name
+}
+
 export const VxeUIPluginRenderElement: VxeUIPluginObject = {
-  install (VxeUI, options?: {
-    ElementPlus?: any
-  }) {
-    ElementPlus = options ? options.ElementPlus : {}
+  component (comp: any) {
+    if (comp && comp.name) {
+      const kcName = XEUtils.kebabCase('el-button')
+      const ccName = toComponentName(XEUtils.camelCase('el-button'))
+      componentMaps[kcName] = comp
+      componentMaps[ccName] = comp
+    } else {
+      console.error('[VUE_APP_VXE_PLUGIN_VERSION] error component.', comp)
+    }
+  },
+  install (VxeUI, options?: VxeUIPluginRenderElementOptions) {
+    if (options) {
+      ElementPlus = options.ElementPlus
+      Object.assign(globalConfig, options)
+    }
 
     // 检查版本
     if (!/^(4)\./.test(VxeUI.uiVersion)) {
@@ -80,8 +101,13 @@ export const VxeUIPluginRenderElement: VxeUIPluginObject = {
   }
 }
 
-if (typeof window !== 'undefined' && window.VxeUI && window.VxeUI.use) {
-  window.VxeUI.use(VxeUIPluginRenderElement)
+if (typeof window !== 'undefined') {
+  if (window.VxeUI && window.VxeUI.use) {
+    window.VxeUI.use(VxeUIPluginRenderElement)
+  }
+  if ((window as any).ElementPlus) {
+    globalConfig.ElementPlus = (window as any).ElementPlus
+  }
 }
 
 export default VxeUIPluginRenderElement

package/src/store/index.ts

@@ -0,0 +1,5 @@
+import type { DefineComponent, ConcreteComponent } from 'vue'
+import type { VxeUIPluginRenderElementOptions } from '../../types'
+
+export const globalConfig: VxeUIPluginRenderElementOptions = {}
+export const componentMaps: Record<string, DefineComponent | ConcreteComponent> = {}

package/src/table/index.ts

@@ -1,4 +1,5 @@
-import { h, resolveComponent, ComponentOptions } from 'vue'
+import { h, ComponentOptions } from 'vue'
+import { getCurrComponent } from '../util/comp'
 import XEUtils from 'xe-utils'
 import dayjs from 'dayjs'
 
@@ -258,7 +259,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
       const { name, attrs } = renderOpts
       const cellValue = XEUtils.get(row, column.field)
       return [
-        h(resolveComponent(name), {
+        h(getCurrComponent(name), {
           ...attrs,
           ...getCellEditFilterProps(renderOpts, params, cellValue, defaultProps),
           ...getEditOns(renderOpts, params)
@@ -270,7 +271,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
   function defaultButtonEditRender (renderOpts: VxeColumnPropTypes.EditRender, params: VxeGlobalRendererHandles.RenderEditParams) {
     const { attrs } = renderOpts
     return [
-      h(resolveComponent('el-button'), {
+      h(getCurrComponent('el-button'), {
         ...attrs,
         ...getCellEditFilterProps(renderOpts, params, null),
         ...getOns(renderOpts, params)
@@ -295,7 +296,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
           class: 'vxe-table--filter-element-wrapper'
         }, column.filters.map((option, oIndex) => {
           const optionValue = option.data
-          return h(resolveComponent(name), {
+          return h(getCurrComponent(name), {
             key: oIndex,
             ...attrs,
             ...getCellEditFilterProps(renderOpts, params, optionValue, defaultProps),
@@ -341,7 +342,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
     const labelProp = optionProps.label || 'label'
     const valueProp = optionProps.value || 'value'
     return XEUtils.map(options, (item, oIndex) => {
-      return h(resolveComponent('el-option'), {
+      return h(getCurrComponent('el-option'), {
         key: oIndex,
         value: item[valueProp],
         label: item[labelProp],
@@ -395,14 +396,14 @@ export function defineTableRender (VxeUI: VxeUIExport) {
           const groupOptions = optionGroupProps.options || 'options'
           const groupLabel = optionGroupProps.label || 'label'
           return [
-            h(resolveComponent('el-select') as ComponentOptions, {
+            h(getCurrComponent('el-select') as ComponentOptions, {
               ...attrs,
               ...props,
               ...ons
             }, {
               default: () => {
                 return XEUtils.map(optionGroups, (group, gIndex) => {
-                  return h(resolveComponent('el-option-group') as ComponentOptions, {
+                  return h(getCurrComponent('el-option-group') as ComponentOptions, {
                     key: gIndex,
                     label: group[groupLabel]
                   }, {
@@ -414,7 +415,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
           ]
         }
         return [
-          h(resolveComponent('el-select') as ComponentOptions, {
+          h(getCurrComponent('el-select') as ComponentOptions, {
             ...props,
             ...attrs,
             ...ons
@@ -439,7 +440,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
             ? column.filters.map((option, oIndex) => {
               const optionValue = option.data
               const props = getCellEditFilterProps(renderOpts, params, optionValue)
-              return h(resolveComponent('el-select') as ComponentOptions, {
+              return h(getCurrComponent('el-select') as ComponentOptions, {
                 key: oIndex,
                 ...attrs,
                 ...props,
@@ -450,7 +451,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
               }, {
                 default: () => {
                   return XEUtils.map(optionGroups, (group, gIndex) => {
-                    return h(resolveComponent('el-option-group') as ComponentOptions, {
+                    return h(getCurrComponent('el-option-group') as ComponentOptions, {
                       key: gIndex,
                       label: group[groupLabel]
                     }, {
@@ -463,7 +464,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
             : column.filters.map((option, oIndex) => {
               const optionValue = option.data
               const props = getCellEditFilterProps(renderOpts, params, optionValue)
-              return h(resolveComponent('el-select') as ComponentOptions, {
+              return h(getCurrComponent('el-select') as ComponentOptions, {
                 key: oIndex,
                 ...attrs,
                 ...props,
@@ -514,7 +515,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
             class: 'vxe-table--filter-element-wrapper'
           }, column.filters.map((option, oIndex) => {
             const optionValue = option.data
-            return h(resolveComponent(name as string), {
+            return h(getCurrComponent(name as string), {
               key: oIndex,
               ...attrs,
               ...getCellEditFilterProps(renderOpts, params, optionValue),
@@ -575,7 +576,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
             class: 'vxe-table--filter-element-wrapper'
           }, column.filters.map((option, oIndex) => {
             const optionValue = option.data
-            return h(resolveComponent(name as string), {
+            return h(getCurrComponent(name as string), {
               key: oIndex,
               ...attrs,
               ...getCellEditFilterProps(renderOpts, params, optionValue),

package/src/util/comp.ts

@@ -0,0 +1,6 @@
+import { resolveComponent } from 'vue'
+import { globalConfig, componentMaps } from '../store'
+
+export function getCurrComponent (name: string) {
+  return resolveComponent(name) || componentMaps[name] || (globalConfig.ElementPlus ? globalConfig.ElementPlus[name] : null)
+}

package/types/index.d.ts

@@ -1,12 +1,15 @@
 import { VxeUIExport } from 'vxe-pc-ui'
 
+export interface VxeUIPluginRenderElementOptions {
+  ElementPlus?: any
+}
+
 /**
  * 基于 Vxe UI 的适配插件，用于兼容 element-plus 组件库
  */
 export declare const VxeUIPluginRenderElement: {
-  install (VxeUI: VxeUIExport, options?: {
-    ElementPlus?: any
-  }): void
+  component (comp: any): void
+  install (VxeUI: VxeUIExport, options?: VxeUIPluginRenderElementOptions): void
 }
 
 export default VxeUIPluginRenderElement