vxe-pc-ui 4.1.20 → 4.1.21

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, VxeDrawerConstructor, VxeDrawerMethods, 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: {
@@ -55,7 +58,7 @@ export default defineComponent({
 
     const reactData = reactive<IconPickerReactData>({
       initialized: false,
-      selectIcon: '',
+      selectIcon: `${props.modelValue || ''}`,
       panelIndex: 0,
       panelStyle: {},
       panelPlacement: null,
@@ -64,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>
@@ -225,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
         }
@@ -246,7 +255,7 @@ export default defineComponent({
 
     const hideOptionPanel = () => {
       reactData.visiblePanel = false
-      hidePanelTimeout = window.setTimeout(() => {
+      internalData.hpTimeout = window.setTimeout(() => {
         reactData.isAniVisible = false
       }, 350)
     }
@@ -377,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
       },
@@ -550,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 || ''}`
     })
@@ -579,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
   }
 })

package/packages/input/src/input.ts

@@ -7,16 +7,25 @@ import { toStringTimeDate, getDateQuarter } from '../../date-picker/src/util'
 import { handleNumber, toFloatValueFixed } from '../../number-input/src/util'
 import { getSlotVNs } from '../..//ui/src/vn'
 
-import type { VxeInputConstructor, VxeInputEmits, InputReactData, InputMethods, VxeInputPropTypes, InputPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, VxeTableConstructor, VxeTablePrivateMethods, VxeDrawerConstructor, VxeDrawerMethods, VxeModalConstructor, VxeModalMethods, VxeDatePickerDefines } from '../../../types'
+import type { VxeInputConstructor, VxeInputEmits, InputReactData, InputMethods, ValueOf, InputInternalData, VxeInputPropTypes, InputPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, VxeTableConstructor, VxeTablePrivateMethods, VxeDrawerConstructor, VxeDrawerMethods, VxeModalConstructor, VxeModalMethods, VxeDatePickerDefines } from '../../../types'
 
 export default defineComponent({
   name: 'VxeInput',
   props: {
     modelValue: [String, Number, Date] as PropType<VxeInputPropTypes.ModelValue>,
-    immediate: { type: Boolean as PropType<VxeInputPropTypes.Immediate>, default: true },
+    immediate: {
+      type: Boolean as PropType<VxeInputPropTypes.Immediate>,
+      default: true
+    },
     name: String as PropType<VxeInputPropTypes.Name>,
-    type: { type: String as PropType<VxeInputPropTypes.Type>, default: 'text' },
-    clearable: { type: Boolean as PropType<VxeInputPropTypes.Clearable>, default: () => getConfig().input.clearable },
+    type: {
+      type: String as PropType<VxeInputPropTypes.Type>,
+      default: 'text'
+    },
+    clearable: {
+      type: Boolean as PropType<VxeInputPropTypes.Clearable>,
+      default: () => getConfig().input.clearable
+    },
     readonly: {
       type: Boolean as PropType<VxeInputPropTypes.Readonly>,
       default: null
@@ -27,11 +36,17 @@ export default defineComponent({
     },
     placeholder: String as PropType<VxeInputPropTypes.Placeholder>,
     maxLength: [String, Number] as PropType<VxeInputPropTypes.MaxLength>,
-    autoComplete: { type: String as PropType<VxeInputPropTypes.AutoComplete>, default: 'off' },
+    autoComplete: {
+      type: String as PropType<VxeInputPropTypes.AutoComplete>,
+      default: 'off'
+    },
     align: String as PropType<VxeInputPropTypes.Align>,
     form: String as PropType<VxeInputPropTypes.Form>,
     className: String as PropType<VxeInputPropTypes.ClassName>,
-    size: { type: String as PropType<VxeInputPropTypes.Size>, default: () => getConfig().input.size || getConfig().size },
+    size: {
+      type: String as PropType<VxeInputPropTypes.Size>,
+      default: () => getConfig().input.size || getConfig().size
+    },
     multiple: Boolean as PropType<VxeInputPropTypes.Multiple>,
 
     // text
@@ -39,33 +54,69 @@ export default defineComponent({
     countMethod: Function as PropType<VxeInputPropTypes.CountMethod>,
 
     // number、integer、float
-    min: { type: [String, Number] as PropType<VxeInputPropTypes.Min>, default: null },
-    max: { type: [String, Number] as PropType<VxeInputPropTypes.Max>, default: null },
+    min: {
+      type: [String, Number] as PropType<VxeInputPropTypes.Min>,
+      default: null
+    },
+    max: {
+      type: [String, Number] as PropType<VxeInputPropTypes.Max>,
+      default: null
+    },
     step: [String, Number] as PropType<VxeInputPropTypes.Step>,
-    exponential: { type: Boolean as PropType<VxeInputPropTypes.Exponential>, default: () => getConfig().input.exponential },
+    exponential: {
+      type: Boolean as PropType<VxeInputPropTypes.Exponential>,
+      default: () => getConfig().input.exponential
+    },
 
     // number、integer、float、password
-    controls: { type: Boolean as PropType<VxeInputPropTypes.Controls>, default: () => getConfig().input.controls },
+    controls: {
+      type: Boolean as PropType<VxeInputPropTypes.Controls>,
+      default: () => getConfig().input.controls
+    },
 
     // float
-    digits: { type: [String, Number] as PropType<VxeInputPropTypes.Digits>, default: () => getConfig().input.digits },
+    digits: {
+      type: [String, Number] as PropType<VxeInputPropTypes.Digits>,
+      default: () => getConfig().input.digits
+    },
 
     // date、week、month、quarter、year
-    startDate: { type: [String, Number, Date] as PropType<VxeInputPropTypes.MinDate>, default: () => getConfig().input.startDate },
-    endDate: { type: [String, Number, Date] as PropType<VxeInputPropTypes.MaxDate>, default: () => getConfig().input.endDate },
+    startDate: {
+      type: [String, Number, Date] as PropType<VxeInputPropTypes.MinDate>,
+      default: () => getConfig().input.startDate
+    },
+    endDate: {
+      type: [String, Number, Date] as PropType<VxeInputPropTypes.MaxDate>,
+      default: () => getConfig().input.endDate
+    },
     minDate: [String, Number, Date] as PropType<VxeInputPropTypes.MinDate>,
     maxDate: [String, Number, Date] as PropType<VxeInputPropTypes.MaxDate>,
     // 已废弃 startWeek，被 startDay 替换
     startWeek: Number as PropType<VxeInputPropTypes.StartDay>,
-    startDay: { type: [String, Number] as PropType<VxeInputPropTypes.StartDay>, default: () => getConfig().input.startDay },
+    startDay: {
+      type: [String, Number] as PropType<VxeInputPropTypes.StartDay>,
+      default: () => getConfig().input.startDay
+    },
     labelFormat: String as PropType<VxeInputPropTypes.LabelFormat>,
     valueFormat: String as PropType<VxeInputPropTypes.ValueFormat>,
-    editable: { type: Boolean as PropType<VxeInputPropTypes.Editable>, default: true },
-    festivalMethod: { type: Function as PropType<VxeInputPropTypes.FestivalMethod>, default: () => getConfig().input.festivalMethod },
-    disabledMethod: { type: Function as PropType<VxeInputPropTypes.DisabledMethod>, default: () => getConfig().input.disabledMethod },
+    editable: {
+      type: Boolean as PropType<VxeInputPropTypes.Editable>,
+      default: true
+    },
+    festivalMethod: {
+      type: Function as PropType<VxeInputPropTypes.FestivalMethod>,
+      default: () => getConfig().input.festivalMethod
+    },
+    disabledMethod: {
+      type: Function as PropType<VxeInputPropTypes.DisabledMethod>,
+      default: () => getConfig().input.disabledMethod
+    },
 
     // week
-    selectDay: { type: [String, Number] as PropType<VxeInputPropTypes.SelectDay>, default: () => getConfig().input.selectDay },
+    selectDay: {
+      type: [String, Number] as PropType<VxeInputPropTypes.SelectDay>,
+      default: () => getConfig().input.selectDay
+    },
 
     prefixIcon: String as PropType<VxeInputPropTypes.PrefixIcon>,
     suffixIcon: String as PropType<VxeInputPropTypes.SuffixIcon>,
@@ -114,17 +165,13 @@ export default defineComponent({
 
     const { computeSize } = useSize(props)
 
-    const yearSize = 12
-    const monthSize = 20
-    const quarterSize = 8
-
     const reactData = reactive<InputReactData>({
       initialized: false,
       panelIndex: 0,
       showPwd: false,
       visiblePanel: false,
       isAniVisible: false,
-      panelStyle: null,
+      panelStyle: {},
       panelPlacement: '',
       isActivated: false,
       inputValue: props.modelValue,
@@ -136,6 +183,14 @@ export default defineComponent({
       currentDate: null
     })
 
+    const internalData: InputInternalData = {
+      yearSize: 12,
+      monthSize: 20,
+      quarterSize: 8,
+      hpTimeout: undefined,
+      dnTimeout: undefined
+    }
+
     const refElem = ref() as Ref<HTMLDivElement>
     const refInputTarget = ref() as Ref<HTMLInputElement>
     const refInputPanel = ref() as Ref<HTMLDivElement>
@@ -152,6 +207,7 @@ export default defineComponent({
       props,
       context,
       reactData,
+      internalData,
       getRefMaps: () => refMaps
     } as unknown as VxeInputConstructor
 
@@ -373,11 +429,12 @@ export default defineComponent({
       if (isDatePickerType) {
         return labelFormat || dateValueFormat || getI18n(`vxe.input.date.labelFormat.${props.type}`)
       }
-      return null
+      return ''
     })
 
     const computeYearList = computed(() => {
       const { selectMonth, currentDate } = reactData
+      const { yearSize } = internalData
       const years: VxeDatePickerDefines.DateYearItem[] = []
       if (selectMonth && currentDate) {
         const currFullYear = currentDate.getFullYear()
@@ -475,6 +532,7 @@ export default defineComponent({
 
     const computeQuarterList = computed(() => {
       const { selectMonth, currentDate } = reactData
+      const { quarterSize } = internalData
       const quarters: VxeDatePickerDefines.DateQuarterItem[] = []
       if (selectMonth && currentDate) {
         const currFullYear = currentDate.getFullYear()
@@ -506,6 +564,7 @@ export default defineComponent({
 
     const computeMonthList = computed(() => {
       const { selectMonth, currentDate } = reactData
+      const { monthSize } = internalData
       const months: VxeDatePickerDefines.DateMonthItem[] = []
       if (selectMonth && currentDate) {
         const currFullYear = currentDate.getFullYear()
@@ -663,13 +722,6 @@ export default defineComponent({
       return getI18n('vxe.base.pleaseInput')
     })
 
-    const computeInpMaxlength = computed(() => {
-      const isNumType = computeIsNumType.value
-      const inpMaxLength = computeInpMaxLength.value
-      // 数值最大长度限制 16 位，包含小数
-      return isNumType && !XEUtils.toNumber(inpMaxLength) ? 16 : inpMaxLength
-    })
-
     const computeInpImmediate = computed(() => {
       const { type, immediate } = props
       return immediate || !(type === 'text' || type === 'number' || type === 'integer' || type === 'float')
@@ -711,13 +763,13 @@ export default defineComponent({
 
     const getNumberValue = (val: any) => {
       const { type, exponential } = props
-      const inpMaxlength = computeInpMaxlength.value
+      const inpMaxLength = computeInpMaxLength.value
       const digitsValue = computeDigitsValue.value
       const restVal = (type === 'float' ? toFloatValueFixed(val, digitsValue) : XEUtils.toValueString(val))
       if (exponential && (val === restVal || XEUtils.toValueString(val).toLowerCase() === XEUtils.toNumber(restVal).toExponential())) {
         return val
       }
-      return restVal.slice(0, inpMaxlength)
+      return restVal.slice(0, inpMaxLength)
     }
 
     const triggerEvent = (evnt: Event & { type: 'input' | 'change' | 'keydown' | 'keyup' | 'wheel' | 'click' | 'focus' | 'blur' }) => {
@@ -725,7 +777,7 @@ export default defineComponent({
       inputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt)
     }
 
-    const emitModel = (value: string, evnt: Event | { type: string }) => {
+    const handleChange = (value: string, evnt: Event | { type: string }) => {
       reactData.inputValue = value
       emit('update:modelValue', value)
       inputMethods.dispatchEvent('input', { value }, evnt as any)
@@ -744,7 +796,7 @@ export default defineComponent({
       reactData.inputValue = value
       if (!isDatePickerType) {
         if (inpImmediate) {
-          emitModel(value, evnt)
+          handleChange(value, evnt)
         } else {
           inputMethods.dispatchEvent('input', { value }, evnt)
         }
@@ -781,12 +833,10 @@ export default defineComponent({
       }
     }
 
-    let hidePanelTimeout: number
-
     const hidePanel = (): Promise<void> => {
       return new Promise(resolve => {
         reactData.visiblePanel = false
-        hidePanelTimeout = window.setTimeout(() => {
+        internalData.hpTimeout = window.setTimeout(() => {
           reactData.isAniVisible = false
           resolve()
         }, 350)
@@ -803,7 +853,7 @@ export default defineComponent({
       if (isNumType || ['text', 'search', 'password'].indexOf(type) > -1) {
         focus()
       }
-      emitModel('', evnt)
+      handleChange('', evnt)
       inputMethods.dispatchEvent('clear', { value }, evnt)
     }
 
@@ -873,7 +923,7 @@ export default defineComponent({
         if (inputValue) {
           const validValue = toFloatValueFixed(inputValue, digitsValue)
           if (inputValue !== validValue) {
-            emitModel(validValue, { type: 'init' })
+            handleChange(validValue, { type: 'init' })
           }
         }
       }
@@ -935,19 +985,19 @@ export default defineComponent({
               datetimeRest.push(item)
             }
           })
-          emitModel(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' })
+          handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' })
         } else {
           // 如果是日期类型
           if (dateMultipleValue.some(val => XEUtils.isEqual(val, inpVal))) {
-            emitModel(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' })
+            handleChange(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' })
           } else {
-            emitModel(dateMultipleValue.concat([inpVal]).join(','), { type: 'update' })
+            handleChange(dateMultipleValue.concat([inpVal]).join(','), { type: 'update' })
           }
         }
       } else {
         // 如果为单选
         if (!XEUtils.isEqual(modelValue, inpVal)) {
-          emitModel(inpVal, { type: 'update' })
+          handleChange(inpVal, { type: 'update' })
         }
       }
     }
@@ -974,7 +1024,7 @@ export default defineComponent({
                 inpNumVal = inpStringVal
               }
             }
-            emitModel(getNumberValue(inpNumVal), { type: 'check' })
+            handleChange(getNumberValue(inpNumVal), { type: 'check' })
           }
         } else if (isDatePickerType) {
           if (inputValue) {
@@ -983,7 +1033,7 @@ export default defineComponent({
               if (type === 'time') {
                 inpDateVal = XEUtils.toDateString(inpDateVal, dateLabelFormat)
                 if (inputValue !== inpDateVal) {
-                  emitModel(inpDateVal, { type: 'check' })
+                  handleChange(inpDateVal, { type: 'check' })
                 }
                 reactData.inputValue = inpDateVal
               } else {
@@ -1009,7 +1059,7 @@ export default defineComponent({
               dateRevert()
             }
           } else {
-            emitModel('', { type: 'check' })
+            handleChange('', { type: 'check' })
           }
         }
       }
@@ -1019,7 +1069,7 @@ export default defineComponent({
       const { inputValue } = reactData
       const inpImmediate = computeInpImmediate.value
       if (!inpImmediate) {
-        emitModel(inputValue, evnt)
+        handleChange(inputValue, evnt)
       }
       afterCheckValue()
       if (!reactData.visiblePanel) {
@@ -1064,13 +1114,11 @@ export default defineComponent({
       emitInputEvent(getNumberValue(restNum), evnt as (Event & { type: 'input' }))
     }
 
-    let downbumTimeout: number
-
     const numberNextEvent = (evnt: Event) => {
       const isDisabled = computeIsDisabled.value
       const isReadonly = computeIsReadonly.value
       const isDisabledSubtractNumber = computeIsDisabledSubtractNumber.value
-      clearTimeout(downbumTimeout)
+      numberStopDown()
       if (!isDisabled && !isReadonly && !isDisabledSubtractNumber) {
         numberChange(false, evnt)
       }
@@ -1078,7 +1126,7 @@ export default defineComponent({
     }
 
     const numberDownNextEvent = (evnt: Event) => {
-      downbumTimeout = window.setTimeout(() => {
+      internalData.dnTimeout = window.setTimeout(() => {
         numberNextEvent(evnt)
         numberDownNextEvent(evnt)
       }, 60)
@@ -1088,7 +1136,7 @@ export default defineComponent({
       const isDisabled = computeIsDisabled.value
       const isReadonly = computeIsReadonly.value
       const isDisabledAddNumber = computeIsDisabledAddNumber.value
-      clearTimeout(downbumTimeout)
+      numberStopDown()
       if (!isDisabled && !isReadonly && !isDisabledAddNumber) {
         numberChange(true, evnt)
       }
@@ -1140,11 +1188,15 @@ export default defineComponent({
     // 数值
 
     const numberStopDown = () => {
-      clearTimeout(downbumTimeout)
+      const { dnTimeout } = internalData
+      if (dnTimeout) {
+        clearTimeout(dnTimeout)
+        internalData.dnTimeout = undefined
+      }
     }
 
     const numberDownPrevEvent = (evnt: Event) => {
-      downbumTimeout = window.setTimeout(() => {
+      internalData.dnTimeout = window.setTimeout(() => {
         numberPrevEvent(evnt)
         numberDownPrevEvent(evnt)
       }, 60)
@@ -1159,7 +1211,7 @@ export default defineComponent({
         } else {
           numberNextEvent(evnt)
         }
-        downbumTimeout = window.setTimeout(() => {
+        internalData.dnTimeout = window.setTimeout(() => {
           if (isPrevNumber) {
             numberDownPrevEvent(evnt)
           } else {
@@ -1212,6 +1264,7 @@ export default defineComponent({
     const datePrevEvent = (evnt: Event) => {
       const { type } = props
       const { datePanelType, selectMonth } = reactData
+      const { yearSize } = internalData
       const isDisabledPrevDateBtn = computeIsDisabledPrevDateBtn.value
       if (!isDisabledPrevDateBtn) {
         if (type === 'year') {
@@ -1247,6 +1300,7 @@ export default defineComponent({
     const dateNextEvent = (evnt: Event) => {
       const { type } = props
       const { datePanelType, selectMonth } = reactData
+      const { yearSize } = internalData
       const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value
       if (!isDisabledNextDateBtn) {
         if (type === 'year') {
@@ -1425,10 +1479,10 @@ export default defineComponent({
                 datetimeRest.push(item)
               }
             })
-            emitModel(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' })
+            handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' })
           } else {
             // 如果是日期类型
-            emitModel(dateMultipleValue.join(','), { type: 'update' })
+            handleChange(dateMultipleValue.join(','), { type: 'update' })
           }
         } else {
           dateChange(dateValue || reactData.currentDate)
@@ -1541,7 +1595,9 @@ export default defineComponent({
         reactData.datetimePanelValue = reactData.datePanelValue || XEUtils.getWhatDay(Date.now(), 0, 'first')
         nextTick(() => {
           const timeBodyElem = refInputTimeBody.value
-          XEUtils.arrayEach(timeBodyElem.querySelectorAll('li.is--selected'), updateTimePos)
+          XEUtils.arrayEach(timeBodyElem.querySelectorAll('li.is--selected'), (elem) => {
+            updateTimePos(elem)
+          })
         })
       }
     }
@@ -1630,13 +1686,17 @@ export default defineComponent({
 
     const showPanel = () => {
       const { visiblePanel } = reactData
+      const { hpTimeout } = internalData
       const isDisabled = computeIsDisabled.value
       const isDatePickerType = computeIsDatePickerType.value
       if (!isDisabled && !visiblePanel) {
         if (!reactData.initialized) {
           reactData.initialized = true
         }
-        clearTimeout(hidePanelTimeout)
+        if (hpTimeout) {
+          clearTimeout(hpTimeout)
+          internalData.hpTimeout = undefined
+        }
         reactData.isActivated = true
         reactData.isAniVisible = true
         if (isDatePickerType) {
@@ -1793,13 +1853,13 @@ export default defineComponent({
             }]
           }, extraItem && extraItem.label
             ? [
-                h('span', label),
+                h('span', `${label || ''}`),
                 h('span', {
                   class: ['vxe-input--date-label--extra', extraItem.important ? 'is-important' : '', extraItem.className],
                   style: extraItem.style
                 }, XEUtils.toValueString(extraItem.label))
               ]
-            : label)
+            : [`${label || ''}`])
         ]
         const festivalLabel = festivalItem.label
         if (festivalLabel) {
@@ -1822,7 +1882,7 @@ export default defineComponent({
         }
         return labels
       }
-      return label
+      return [`${label || ''}`]
     }
 
     const renderDateDayTable = () => {
@@ -2393,10 +2453,12 @@ export default defineComponent({
       return createCommentVNode()
     }
 
+    const dispatchEvent = (type: ValueOf<VxeInputEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $input: $xeInput }, params))
+    }
+
     inputMethods = {
-      dispatchEvent (type, params, evnt) {
-        emit(type, createEvent(evnt, { $input: $xeInput }, params))
-      },
+      dispatchEvent,
 
       focus () {
         const inputElem = refInputTarget.value
@@ -2438,7 +2500,7 @@ export default defineComponent({
       const isCountError = computeIsCountError.value
       const inputCount = computeInputCount.value
       const inputReadonly = computeInputReadonly.value
-      const inpMaxlength = computeInpMaxlength.value
+      const inpMaxLength = computeInpMaxLength.value
       const inputType = computeInputType.value
       const inpPlaceholder = computeInpPlaceholder.value
       const isClearable = computeIsClearable.value
@@ -2472,7 +2534,7 @@ export default defineComponent({
             name,
             type: inputType,
             placeholder: inpPlaceholder,
-            maxlength: inpMaxlength,
+            maxlength: inpMaxLength,
             readonly: inputReadonly,
             disabled: isDisabled,
             autocomplete: autoComplete || autocomplete,
@@ -2495,13 +2557,11 @@ export default defineComponent({
             class: ['vxe-input--count', {
               'is--error': isCountError
             }]
-          }, countMethod ? `${countMethod({ value: inputValue })}` : `${inputCount}${inpMaxlength ? `/${inpMaxlength}` : ''}`)
+          }, countMethod ? `${countMethod({ value: inputValue })}` : `${inputCount}${inpMaxLength ? `/${inpMaxLength}` : ''}`)
           : createCommentVNode()
       ])
     }
 
-    $xeInput.renderVN = renderVN
-
     watch(() => props.modelValue, (val) => {
       reactData.inputValue = val
       changeValue()
@@ -2547,6 +2607,8 @@ export default defineComponent({
 
     initValue()
 
+    $xeInput.renderVN = renderVN
+
     return $xeInput
   },
   render () {