vxe-pc-ui 4.1.19 → 4.1.21

package/packages/drawer/src/drawer.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, Teleport, ref, Ref, reactive, nextTick, watch, PropType, onMounted, onUnmounted, createCommentVNode } from 'vue'
+import { defineComponent, h, Teleport, ref, Ref, reactive, nextTick, provide, watch, PropType, onMounted, onUnmounted, createCommentVNode } from 'vue'
 import XEUtils from 'xe-utils'
 import { useSize, getIcon, getConfig, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent } from '../../ui'
 import { getLastZIndex, nextZIndex, getFuncText } from '../../ui/src/utils'
@@ -7,7 +7,7 @@ import { getSlotVNs } from '../../ui/src/vn'
 import VxeButtonComponent from '../../button/src/button'
 import VxeLoadingComponent from '../../loading/index'
 
-import type { VxeDrawerPropTypes, DrawerReactData, VxeDrawerEmits, DrawerPrivateRef, DrawerMethods, DrawerPrivateMethods, VxeDrawerPrivateComputed, VxeDrawerConstructor, VxeDrawerPrivateMethods, VxeButtonInstance, DrawerEventTypes } from '../../../types'
+import type { VxeDrawerPropTypes, DrawerReactData, VxeDrawerEmits, DrawerPrivateRef, DrawerMethods, DrawerPrivateMethods, VxeDrawerPrivateComputed, VxeDrawerConstructor, VxeDrawerPrivateMethods, VxeButtonInstance, DrawerEventTypes, ValueOf } from '../../../types'
 
 export const allActiveDrawers: VxeDrawerConstructor[] = []
 
@@ -17,34 +17,88 @@ export default defineComponent({
     modelValue: Boolean as PropType<VxeDrawerPropTypes.ModelValue>,
     id: String as PropType<VxeDrawerPropTypes.ID>,
     title: String as PropType<VxeDrawerPropTypes.Title>,
-    loading: { type: Boolean as PropType<VxeDrawerPropTypes.Loading>, default: null },
+    loading: {
+      type: Boolean as PropType<VxeDrawerPropTypes.Loading>,
+      default: null
+    },
     className: String as PropType<VxeDrawerPropTypes.ClassName>,
     position: {
       type: [String, Object] as PropType<VxeDrawerPropTypes.Position>,
       default: () => getConfig().drawer.position
     },
-    lockView: { type: Boolean as PropType<VxeDrawerPropTypes.LockView>, default: () => getConfig().drawer.lockView },
+    lockView: {
+      type: Boolean as PropType<VxeDrawerPropTypes.LockView>,
+      default: () => getConfig().drawer.lockView
+    },
     lockScroll: Boolean as PropType<VxeDrawerPropTypes.LockScroll>,
-    mask: { type: Boolean as PropType<VxeDrawerPropTypes.Mask>, default: () => getConfig().drawer.mask },
-    maskClosable: { type: Boolean as PropType<VxeDrawerPropTypes.MaskClosable>, default: () => getConfig().drawer.maskClosable },
-    escClosable: { type: Boolean as PropType<VxeDrawerPropTypes.EscClosable>, default: () => getConfig().drawer.escClosable },
-    showHeader: { type: Boolean as PropType<VxeDrawerPropTypes.ShowHeader>, default: () => getConfig().drawer.showHeader },
-    showFooter: { type: Boolean as PropType<VxeDrawerPropTypes.ShowFooter>, default: () => getConfig().drawer.showFooter },
-    showClose: { type: Boolean as PropType<VxeDrawerPropTypes.ShowClose>, default: () => getConfig().drawer.showClose },
+    mask: {
+      type: Boolean as PropType<VxeDrawerPropTypes.Mask>,
+      default: () => getConfig().drawer.mask
+    },
+    maskClosable: {
+      type: Boolean as PropType<VxeDrawerPropTypes.MaskClosable>,
+      default: () => getConfig().drawer.maskClosable
+    },
+    escClosable: {
+      type: Boolean as PropType<VxeDrawerPropTypes.EscClosable>,
+      default: () => getConfig().drawer.escClosable
+    },
+    showHeader: {
+      type: Boolean as PropType<VxeDrawerPropTypes.ShowHeader>,
+      default: () => getConfig().drawer.showHeader
+    },
+    showFooter: {
+      type: Boolean as PropType<VxeDrawerPropTypes.ShowFooter>,
+      default: () => getConfig().drawer.showFooter
+    },
+    showClose: {
+      type: Boolean as PropType<VxeDrawerPropTypes.ShowClose>,
+      default: () => getConfig().drawer.showClose
+    },
     content: [Number, String] as PropType<VxeDrawerPropTypes.Content>,
-    showCancelButton: { type: Boolean as PropType<VxeDrawerPropTypes.ShowCancelButton>, default: null },
-    cancelButtonText: { type: String as PropType<VxeDrawerPropTypes.CancelButtonText>, default: () => getConfig().drawer.cancelButtonText },
-    showConfirmButton: { type: Boolean as PropType<VxeDrawerPropTypes.ShowConfirmButton>, default: () => getConfig().drawer.showConfirmButton },
-    confirmButtonText: { type: String as PropType<VxeDrawerPropTypes.ConfirmButtonText>, default: () => getConfig().drawer.confirmButtonText },
-    destroyOnClose: { type: Boolean as PropType<VxeDrawerPropTypes.DestroyOnClose>, default: () => getConfig().drawer.destroyOnClose },
-    showTitleOverflow: { type: Boolean as PropType<VxeDrawerPropTypes.ShowTitleOverflow>, default: () => getConfig().drawer.showTitleOverflow },
+    showCancelButton: {
+      type: Boolean as PropType<VxeDrawerPropTypes.ShowCancelButton>,
+      default: null
+    },
+    cancelButtonText: {
+      type: String as PropType<VxeDrawerPropTypes.CancelButtonText>,
+      default: () => getConfig().drawer.cancelButtonText
+    },
+    showConfirmButton: {
+      type: Boolean as PropType<VxeDrawerPropTypes.ShowConfirmButton>,
+      default: () => getConfig().drawer.showConfirmButton
+    },
+    confirmButtonText: {
+      type: String as PropType<VxeDrawerPropTypes.ConfirmButtonText>,
+      default: () => getConfig().drawer.confirmButtonText
+    },
+    destroyOnClose: {
+      type: Boolean as PropType<VxeDrawerPropTypes.DestroyOnClose>,
+      default: () => getConfig().drawer.destroyOnClose
+    },
+    showTitleOverflow: {
+      type: Boolean as PropType<VxeDrawerPropTypes.ShowTitleOverflow>,
+      default: () => getConfig().drawer.showTitleOverflow
+    },
     width: [Number, String] as PropType<VxeDrawerPropTypes.Width>,
     height: [Number, String] as PropType<VxeDrawerPropTypes.Height>,
     zIndex: Number as PropType<VxeDrawerPropTypes.ZIndex>,
-    transfer: { type: Boolean as PropType<VxeDrawerPropTypes.Transfer>, default: () => getConfig().drawer.transfer },
-    padding: { type: Boolean as PropType<VxeDrawerPropTypes.Padding>, default: () => getConfig().drawer.padding },
-    size: { type: String as PropType<VxeDrawerPropTypes.Size>, default: () => getConfig().drawer.size || getConfig().size },
-    beforeHideMethod: { type: Function as PropType<VxeDrawerPropTypes.BeforeHideMethod>, default: () => getConfig().drawer.beforeHideMethod },
+    transfer: {
+      type: Boolean as PropType<VxeDrawerPropTypes.Transfer>,
+      default: () => getConfig().drawer.transfer
+    },
+    padding: {
+      type: Boolean as PropType<VxeDrawerPropTypes.Padding>,
+      default: () => getConfig().drawer.padding
+    },
+    size: {
+      type: String as PropType<VxeDrawerPropTypes.Size>,
+      default: () => getConfig().drawer.size || getConfig().size
+    },
+    beforeHideMethod: {
+      type: Function as PropType<VxeDrawerPropTypes.BeforeHideMethod>,
+      default: () => getConfig().drawer.beforeHideMethod
+    },
     slots: Object as PropType<VxeDrawerPropTypes.Slots>
   },
   emits: [
@@ -72,8 +126,7 @@ export default defineComponent({
       initialized: false,
       visible: false,
       contentVisible: false,
-      drawerZIndex: 0,
-      firstOpen: true
+      drawerZIndex: 0
     })
 
     const refMaps: DrawerPrivateRef = {
@@ -118,11 +171,6 @@ export default defineComponent({
       }
     }
 
-    const updatePosition = () => {
-      return nextTick().then(() => {
-      })
-    }
-
     const closeDrawer = (type: DrawerEventTypes) => {
       const { beforeHideMethod } = props
       const { visible } = reactData
@@ -132,11 +180,11 @@ export default defineComponent({
           if (!XEUtils.isError(rest)) {
             reactData.contentVisible = false
             XEUtils.remove(allActiveDrawers, item => item === $xeDrawer)
-            drawerMethods.dispatchEvent('before-hide', params, null)
+            dispatchEvent('before-hide', params, null)
             setTimeout(() => {
               reactData.visible = false
               emit('update:modelValue', false)
-              drawerMethods.dispatchEvent('hide', params, null)
+              dispatchEvent('hide', params, null)
             }, 200)
           }
         }).catch(e => e)
@@ -146,19 +194,19 @@ export default defineComponent({
 
     const closeEvent = (evnt: Event) => {
       const type = 'close'
-      drawerMethods.dispatchEvent(type, { type }, evnt)
+      dispatchEvent(type, { type }, evnt)
       closeDrawer(type)
     }
 
     const confirmEvent = (evnt: Event) => {
       const type = 'confirm'
-      drawerMethods.dispatchEvent(type, { type }, evnt)
+      dispatchEvent(type, { type }, evnt)
       closeDrawer(type)
     }
 
     const cancelEvent = (evnt: Event) => {
       const type = 'cancel'
-      drawerMethods.dispatchEvent(type, { type }, evnt)
+      dispatchEvent(type, { type }, evnt)
       closeDrawer(type)
     }
 
@@ -188,28 +236,19 @@ export default defineComponent({
             const type = ''
             const params = { type }
             emit('update:modelValue', true)
-            drawerMethods.dispatchEvent('show', params, null)
+            dispatchEvent('show', params, null)
           })
         }, 10)
-        nextTick(() => {
-          const { firstOpen } = reactData
-          if (firstOpen) {
-            updatePosition().then(() => {
-              setTimeout(() => updatePosition(), 20)
-            })
-          }
-          if (firstOpen) {
-            reactData.firstOpen = false
-          }
-        })
       }
       return nextTick()
     }
 
+    const dispatchEvent = (type: ValueOf<VxeDrawerEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $drawer: $xeDrawer }, params))
+    }
+
     const drawerMethods: DrawerMethods = {
-      dispatchEvent (type, params, evnt) {
-        emit(type, createEvent(evnt, { $drawer: $xeDrawer }, params))
-      },
+      dispatchEvent,
       open: openDrawer,
       close () {
         return closeDrawer('close')
@@ -232,7 +271,7 @@ export default defineComponent({
         // 多个时，只关掉最上层的窗口
         if (lastDrawer) {
           setTimeout(() => {
-            if (lastDrawer === $xeDrawer && (lastDrawer as VxeDrawerConstructor).props.escClosable) {
+            if (lastDrawer === $xeDrawer && lastDrawer.props.escClosable) {
               closeDrawer('exit')
             }
           }, 10)
@@ -426,8 +465,6 @@ export default defineComponent({
       ])
     }
 
-    $xeDrawer.renderVN = renderVN
-
     watch(() => props.width, recalculate)
     watch(() => props.height, recalculate)
 
@@ -455,6 +492,10 @@ export default defineComponent({
       globalEvents.off($xeDrawer, 'keydown')
     })
 
+    provide('$xeDrawer', '$xeDrawer')
+
+    $xeDrawer.renderVN = renderVN
+
     return $xeDrawer
   },
   render () {

package/packages/form/render/index.ts

@@ -8,8 +8,6 @@ import type { VxeButtonComponent } from '../../../types/all'
 
 const componentDefaultModelProp = 'modelValue'
 
-const defaultCompProps = { transfer: true }
-
 /**
  * 已废弃
  * @deprecated
@@ -39,7 +37,7 @@ function getNativeAttrs (renderOpts: any) {
 }
 
 function getComponentFormItemProps (renderOpts: any, params: any, value: any, defaultProps?: any) {
-  return XEUtils.assign({}, defaultCompProps, defaultProps, renderOpts.props, { [componentDefaultModelProp]: value })
+  return XEUtils.assign({}, defaultProps, renderOpts.props, { [componentDefaultModelProp]: value })
 }
 
 /**

package/packages/form/src/form-config-item.ts

@@ -19,11 +19,12 @@ const VxeFormConfigItem = defineComponent({
     provide('xeFormItemInfo', xeformiteminfo)
 
     const renderVN = () => {
-      const { reactData } = $xeForm
-      const { data, rules, readonly, disabled, span: allSpan, align: allAlign, titleBold: allTitleBold, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical, padding: allPadding } = $xeForm.props
+      const formProps = $xeForm.props
+      const formReactData = $xeForm.reactData
+      const { data, rules, readonly, disabled, span: allSpan, align: allAlign, titleBold: allTitleBold, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical, padding: allPadding } = formProps
       const { computeValidOpts } = $xeForm.getComputeMaps()
       const item = props.itemConfig as VxeFormDefines.ItemInfo
-      const { collapseAll } = reactData
+      const { collapseAll } = formReactData
       const validOpts = computeValidOpts.value
       const { slots, title, visible, folding, field, collapseNode, itemRender, showError, errRule, className, titleOverflow, vertical, padding, children, showTitle, contentClassName, contentStyle, titleClassName, titleStyle } = item
       const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null

package/packages/form/src/form-gather.ts

@@ -11,7 +11,7 @@ export default defineComponent({
   setup (props, { slots }) {
     const refElem = ref() as Ref<HTMLDivElement>
     const $xeForm = inject('$xeForm', {} as VxeFormConstructor & VxeFormPrivateMethods)
-    const parentFormGather = inject<XEFormItemProvide | null>('$xeFormGather', null)
+    const $xeParentFormGather = inject<XEFormItemProvide | null>('$xeFormGather', null)
     const formItem = reactive(createItem($xeForm, props))
     formItem.children = []
 
@@ -21,7 +21,8 @@ export default defineComponent({
     watchItem(props, formItem)
 
     onMounted(() => {
-      assembleItem($xeForm, refElem.value, formItem, parentFormGather)
+      const elem = refElem.value
+      assembleItem($xeForm, elem, formItem, $xeParentFormGather)
     })
 
     onUnmounted(() => {
@@ -32,9 +33,10 @@ export default defineComponent({
       const { className, field } = props
       const span = props.span || ($xeForm ? $xeForm.props.span : null)
       const defaultSlot = slots.default
+      const params = { $form: $xeForm, data: $xeForm ? $xeForm.props.data : {}, item: formItem as any, field: field as string, property: field as string }
       return h('div', {
         ref: refElem,
-        class: ['vxe-form--gather vxe-form--item-row', formItem.id, span ? `vxe-form--item-col_${span} is--span` : '', className ? (XEUtils.isFunction(className) ? className({ $form: $xeForm, data: $xeForm ? $xeForm.props.data : {}, item: formItem as any, field: field as string, property: field as string }) : className) : '']
+        class: ['vxe-form--gather vxe-form--item-row', formItem.id, span ? `vxe-form--item-col_${span} is--span` : '', className ? (XEUtils.isFunction(className) ? className(params) : className) : '']
       }, defaultSlot ? defaultSlot({}) : [])
     }
 

package/packages/form/src/form-item.ts

@@ -58,7 +58,10 @@ export const formItemProps = {
   titleSuffix: Object as PropType<VxeFormItemPropTypes.TitleSuffix>,
   resetValue: { default: null },
   visibleMethod: Function as PropType<VxeFormItemPropTypes.VisibleMethod>,
-  visible: { type: Boolean as PropType<VxeFormItemPropTypes.Visible>, default: null },
+  visible: {
+    type: Boolean as PropType<VxeFormItemPropTypes.Visible>,
+    default: null
+  },
   folding: Boolean as PropType<VxeFormItemPropTypes.Folding>,
   collapseNode: Boolean as PropType<VxeFormItemPropTypes.CollapseNode>,
   itemRender: Object as PropType<VxeFormItemPropTypes.ItemRender>,
@@ -71,7 +74,7 @@ export default defineComponent({
   setup (props, { slots }) {
     const refElem = ref() as Ref<HTMLDivElement>
     const $xeForm = inject('$xeForm', {} as VxeFormConstructor & VxeFormPrivateMethods)
-    const formGather = inject<XEFormItemProvide | null>('$xeFormGather', null)
+    const $xeFormGather = inject<XEFormItemProvide | null>('$xeFormGather', null)
     const formItem = reactive(createItem($xeForm, props))
     formItem.slots = slots
 
@@ -81,7 +84,8 @@ export default defineComponent({
     watchItem(props, formItem)
 
     onMounted(() => {
-      assembleItem($xeForm, refElem.value, formItem, formGather)
+      const elem = refElem.value
+      assembleItem($xeForm, elem, formItem, $xeFormGather)
     })
 
     onUnmounted(() => {
@@ -89,9 +93,10 @@ export default defineComponent({
     })
 
     const renderItem = ($xeForm: VxeFormConstructor & VxeFormPrivateMethods, item: VxeFormDefines.ItemInfo) => {
-      const { props, reactData } = $xeForm
-      const { data, rules, readonly, disabled, titleBold: allTitleBold, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical, padding: allPadding } = props
-      const { collapseAll } = reactData
+      const formProps = $xeForm.props
+      const formReactData = $xeForm.reactData
+      const { data, rules, readonly, disabled, titleBold: allTitleBold, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical, padding: allPadding } = formProps
+      const { collapseAll } = formReactData
       const { computeValidOpts } = $xeForm.getComputeMaps()
       const validOpts = computeValidOpts.value
       const { slots, title, visible, folding, field, collapseNode, itemRender, showError, errRule, className, titleOverflow, vertical, padding, showTitle, contentClassName, contentStyle, titleClassName, titleStyle } = item
@@ -104,8 +109,8 @@ export default defineComponent({
       const itemTitleStyle = compConf ? (compConf.formItemTitleStyle || compConf.itemTitleStyle) : null
       const defaultSlot = slots ? slots.default : null
       const titleSlot = slots ? slots.title : null
-      const span = item.span || props.span
-      const align = item.align || props.align
+      const span = item.span || formProps.span
+      const align = item.align || formProps.align
       const itemPadding = XEUtils.eqNull(padding) ? allPadding : padding
       const itemVertical = XEUtils.eqNull(vertical) ? allVertical : vertical
       const titleBold = XEUtils.eqNull(item.titleBold) ? allTitleBold : item.titleBold
@@ -243,8 +248,8 @@ export default defineComponent({
     }
 
     const renderVN = () => {
-      const formProps = $xeForm ? $xeForm.props : null
-      return formProps && formProps.customLayout
+      const customLayout = $xeForm ? $xeForm.props.customLayout : false
+      return customLayout
         ? renderItem($xeForm, formItem as unknown as VxeFormDefines.ItemInfo)
         : h('div', {
           ref: refElem

package/packages/form/src/form.ts

@@ -71,7 +71,10 @@ function getResetValue (value: any, resetValue: any) {
 export default defineComponent({
   name: 'VxeForm',
   props: {
-    collapseStatus: { type: Boolean as PropType<VxeFormPropTypes.CollapseStatus>, default: true },
+    collapseStatus: {
+      type: Boolean as PropType<VxeFormPropTypes.CollapseStatus>,
+      default: true
+    },
     loading: Boolean as PropType<VxeFormPropTypes.Loading>,
     data: Object as PropType<VxeFormPropTypes.Data>,
     size: {
@@ -156,7 +159,8 @@ export default defineComponent({
     })
 
     const internalData = reactive<FormInternalData>({
-      tooltipTimeout: null,
+      meTimeout: undefined,
+      stTimeout: undefined,
       tooltipStore: {
         item: null,
         visible: false
@@ -455,15 +459,13 @@ export default defineComponent({
       })
     }
 
-    let showErrTime: number
-
     const beginValidate = (itemList: VxeFormDefines.ItemInfo[], type?: string, callback?: any): Promise<any> => {
       const { data, rules: formRules } = props
       const validOpts = computeValidOpts.value
       const validRest: any = {}
       const validFields: string[] = []
       const itemValids: any[] = []
-      clearTimeout(showErrTime)
+      clearTimeout(internalData.meTimeout)
       if (data && formRules) {
         itemList.forEach((item) => {
           const { field } = item
@@ -490,7 +492,7 @@ export default defineComponent({
           }
         }).catch(() => {
           return new Promise<void>((resolve) => {
-            showErrTime = window.setTimeout(() => {
+            internalData.meTimeout = window.setTimeout(() => {
               itemList.forEach((item) => {
                 if (item.errRule) {
                   item.showError = true
@@ -585,7 +587,7 @@ export default defineComponent({
       const overflowElem = (evnt.currentTarget as HTMLDivElement).children[0]
       const content = (overflowElem.textContent || '').trim()
       const isCellOverflow = overflowElem.scrollWidth > overflowElem.clientWidth
-      clearTimeout(internalData.tooltipTimeout)
+      clearTimeout(internalData.stTimeout)
       if (tooltipStore.item !== item) {
         closeTooltip()
       }
@@ -607,7 +609,7 @@ export default defineComponent({
         $tooltip.setActived(false)
       }
       if (tooltipOpts.enterable) {
-        internalData.tooltipTimeout = setTimeout(() => {
+        internalData.stTimeout = setTimeout(() => {
           $tooltip = refTooltip.value
           if ($tooltip && !$tooltip.isActived()) {
             closeTooltip()
@@ -719,8 +721,6 @@ export default defineComponent({
       ])
     }
 
-    $xeForm.renderVN = renderVN
-
     const staticItemFlag = ref(0)
     watch(() => reactData.staticItems.length, () => {
       staticItemFlag.value++
@@ -773,6 +773,8 @@ export default defineComponent({
     provide('$xeFormGather', null)
     provide('$xeFormItem', null)
 
+    $xeForm.renderVN = renderVN
+
     return $xeForm
   },
   render () {

package/packages/form/src/render.ts

@@ -30,7 +30,8 @@ function renderSuffixIcon (titleSuffix: VxeFormItemPropTypes.TitleSuffix) {
 }
 
 export function renderTitle ($xeForm: VxeFormConstructor & VxeFormPrivateMethods, item: VxeFormDefines.ItemInfo) {
-  const { data, readonly, disabled } = $xeForm.props
+  const formProps = $xeForm.props
+  const { data, readonly, disabled } = formProps
   const { computeTooltipOpts } = $xeForm.getComputeMaps()
   const { slots, field, itemRender, titlePrefix, titleSuffix } = item
   const tooltipOpts = computeTooltipOpts.value

package/packages/form/src/util.ts

@@ -45,7 +45,8 @@ export function isActiveItem ($xeForm: VxeFormConstructor, formItem: VxeFormDefi
   if (!visibleMethod) {
     return true
   }
-  const { data } = $xeForm.props
+  const formProps = $xeForm.props
+  const { data } = formProps
   return visibleMethod({ data, field, property: field, item: formItem, $form: $xeForm, $grid: $xeForm.xegrid })
 }
 

package/packages/icon/src/icon.ts

@@ -67,5 +67,8 @@ export default defineComponent({
     $xeIcon.renderVN = renderVN
 
     return $xeIcon
+  },
+  render () {
+    return this.renderVN()
   }
 })

package/packages/icon-picker/src/icon-picker.ts

@@ -4,7 +4,7 @@ import { getConfig, getIcon, getI18n, globalEvents, createEvent, useSize, GLOBAL
 import { getEventTargetNode, getAbsolutePos } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, getFuncText } from '../../ui/src/utils'
 
-import type { VxeIconPickerPropTypes, VxeIconPickerConstructor, IconPickerReactData, VxeIconPickerEmits, IconPickerMethods, IconPickerPrivateRef, VxeIconPickerMethods, VxeTableConstructor, VxeTablePrivateMethods, VxeIconPickerDefines, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods } from '../../../types'
+import type { VxeIconPickerPropTypes, VxeIconPickerConstructor, IconPickerInternalData, ValueOf, IconPickerReactData, VxeIconPickerEmits, IconPickerMethods, IconPickerPrivateRef, VxeIconPickerMethods, VxeTableConstructor, VxeTablePrivateMethods, VxeIconPickerDefines, VxeDrawerConstructor, VxeDrawerMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxeIconPicker',
@@ -12,7 +12,10 @@ export default defineComponent({
     modelValue: String as PropType<VxeIconPickerPropTypes.ModelValue>,
     placeholder: String as PropType<VxeIconPickerPropTypes.Placeholder>,
     clearable: Boolean as PropType<VxeIconPickerPropTypes.Clearable>,
-    size: { type: String as PropType<VxeIconPickerPropTypes.Size>, default: () => getConfig().iconPicker.size || getConfig().size },
+    size: {
+      type: String as PropType<VxeIconPickerPropTypes.Size>,
+      default: () => getConfig().iconPicker.size || getConfig().size
+    },
     className: [String, Function] as PropType<VxeIconPickerPropTypes.ClassName>,
     popupClassName: [String, Function] as PropType<VxeIconPickerPropTypes.PopupClassName>,
     showIconTitle: {
@@ -43,9 +46,10 @@ export default defineComponent({
   setup (props, context) {
     const { emit } = context
 
-    const $xeModal = inject<VxeModalConstructor & VxeModalMethods | null>('$xeModal', null)
-    const $xeTable = inject<VxeTableConstructor & VxeTablePrivateMethods | null>('$xeTable', null)
-    const $xeForm = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeForm', null)
+    const $xeModal = inject<(VxeModalConstructor & VxeModalMethods) | null>('$xeModal', null)
+    const $xeDrawer = inject<(VxeDrawerConstructor & VxeDrawerMethods) | null>('$xeDrawer', null)
+    const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null)
+    const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods) | null>('$xeForm', null)
     const formItemInfo = inject<VxeFormDefines.ProvideItemInfo | null>('xeFormItemInfo', null)
 
     const xID = XEUtils.uniqueId()
@@ -54,7 +58,7 @@ export default defineComponent({
 
     const reactData = reactive<IconPickerReactData>({
       initialized: false,
-      selectIcon: '',
+      selectIcon: `${props.modelValue || ''}`,
       panelIndex: 0,
       panelStyle: {},
       panelPlacement: null,
@@ -63,6 +67,10 @@ export default defineComponent({
       isActivated: false
     })
 
+    const internalData: IconPickerInternalData = {
+      hpTimeout: undefined
+    }
+
     const refElem = ref() as Ref<HTMLDivElement>
     const refInput = ref() as Ref<HTMLInputElement>
     const refOptionPanel = ref() as Ref<HTMLDivElement>
@@ -110,7 +118,7 @@ export default defineComponent({
         if (XEUtils.isBoolean(globalTransfer)) {
           return globalTransfer
         }
-        if ($xeTable || $xeModal || $xeForm) {
+        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
           return true
         }
       }
@@ -224,12 +232,14 @@ export default defineComponent({
       })
     }
 
-    let hidePanelTimeout: number
-
     const showOptionPanel = () => {
+      const { hpTimeout } = internalData
       const isDisabled = computeIsDisabled.value
       if (!isDisabled) {
-        clearTimeout(hidePanelTimeout)
+        if (hpTimeout) {
+          clearTimeout(hpTimeout)
+          internalData.hpTimeout = undefined
+        }
         if (!reactData.initialized) {
           reactData.initialized = true
         }
@@ -245,7 +255,7 @@ export default defineComponent({
 
     const hideOptionPanel = () => {
       reactData.visiblePanel = false
-      hidePanelTimeout = window.setTimeout(() => {
+      internalData.hpTimeout = window.setTimeout(() => {
         reactData.isAniVisible = false
       }, 350)
     }
@@ -376,10 +386,12 @@ export default defineComponent({
       hideOptionPanel()
     }
 
+    const dispatchEvent = (type: ValueOf<VxeIconPickerEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $iconPicker: $xeIconPicker }, params))
+    }
+
     iconPickerMethods = {
-      dispatchEvent (type, params, evnt) {
-        emit(type, createEvent(evnt, { $iconPicker: $xeIconPicker }, params))
-      },
+      dispatchEvent,
       isPanelVisible () {
         return reactData.visiblePanel
       },
@@ -549,15 +561,15 @@ export default defineComponent({
             initialized
               ? h('div', {
                 class: 'vxe-ico-picker--panel-wrapper'
-              }, renderIconWrapper())
+              }, [
+                renderIconWrapper()
+              ])
               : createCommentVNode()
           ])
         ])
       ])
     }
 
-    $xeIconPicker.renderVN = renderVN
-
     watch(() => props.modelValue, (val) => {
       reactData.selectIcon = `${val || ''}`
     })
@@ -578,6 +590,8 @@ export default defineComponent({
 
     provide('$xeIconPicker', $xeIconPicker)
 
+    $xeIconPicker.renderVN = renderVN
+
     return $xeIconPicker
   },
   render () {

package/packages/image/src/group.ts

@@ -120,6 +120,9 @@ export default defineComponent({
 
     provide('$xeImageGroup', $xeImageGroup)
 
-    return renderVN
+    return $xeImageGroup
+  },
+  render () {
+    return this.renderVN()
   }
 })

package/packages/image/src/preview.ts

@@ -613,8 +613,6 @@ export default defineComponent({
       ])
     }
 
-    $xeImagePreview.renderVN = renderVN
-
     watch(() => props.modelValue, val => {
       reactData.activeIndex = val
       resetStyle()
@@ -637,6 +635,8 @@ export default defineComponent({
 
     provide('$xeImagePreview', $xeImagePreview)
 
+    $xeImagePreview.renderVN = renderVN
+
     return renderVN
   }
 })