vxe-pc-ui 4.1.19 → 4.1.21

package/packages/calendar/src/calendar.ts

@@ -5,31 +5,55 @@ import { toCssUnit } from '../..//ui/src/dom'
 import VxeButtonComponent from '../../button/src/button'
 import XEUtils from 'xe-utils'
 
-import type { VxeCalendarConstructor, VxeCalendarEmits, CalendarReactData, CalendarMethods, VxeCalendarPropTypes, CalendarPrivateRef, VxeDatePickerDefines } from '../../../types'
+import type { VxeCalendarConstructor, VxeCalendarEmits, CalendarInternalData, CalendarReactData, CalendarMethods, VxeCalendarPropTypes, CalendarPrivateRef, VxeDatePickerDefines } from '../../../types'
 
 export default defineComponent({
   name: 'VxeCalendar',
   props: {
     modelValue: [String, Number, Date] as PropType<VxeCalendarPropTypes.ModelValue>,
-    type: { type: String as PropType<VxeCalendarPropTypes.Type>, default: 'date' },
+    type: {
+      type: String as PropType<VxeCalendarPropTypes.Type>,
+      default: 'date'
+    },
     className: String as PropType<VxeCalendarPropTypes.ClassName>,
-    size: { type: String as PropType<VxeCalendarPropTypes.Size>, default: () => getConfig().calendar.size || getConfig().size },
+    size: {
+      type: String as PropType<VxeCalendarPropTypes.Size>,
+      default: () => getConfig().calendar.size || getConfig().size
+    },
     multiple: Boolean as PropType<VxeCalendarPropTypes.Multiple>,
 
     width: [String, Number] as PropType<VxeCalendarPropTypes.Width>,
     height: [String, Number] as PropType<VxeCalendarPropTypes.Height>,
 
     // date、week、month、quarter、year
-    minDate: { type: [String, Number, Date] as PropType<VxeCalendarPropTypes.MinDate>, default: () => getConfig().calendar.minDate },
-    maxDate: { type: [String, Number, Date] as PropType<VxeCalendarPropTypes.MaxDate>, default: () => getConfig().calendar.maxDate },
-    startDay: { type: [String, Number] as PropType<VxeCalendarPropTypes.StartDay>, default: () => getConfig().calendar.startDay },
+    minDate: {
+      type: [String, Number, Date] as PropType<VxeCalendarPropTypes.MinDate>,
+      default: () => getConfig().calendar.minDate
+    },
+    maxDate: {
+      type: [String, Number, Date] as PropType<VxeCalendarPropTypes.MaxDate>,
+      default: () => getConfig().calendar.maxDate
+    },
+    startDay: {
+      type: [String, Number] as PropType<VxeCalendarPropTypes.StartDay>,
+      default: () => getConfig().calendar.startDay
+    },
     labelFormat: String as PropType<VxeCalendarPropTypes.LabelFormat>,
     valueFormat: String as PropType<VxeCalendarPropTypes.ValueFormat>,
-    festivalMethod: { type: Function as PropType<VxeCalendarPropTypes.FestivalMethod>, default: () => getConfig().calendar.festivalMethod },
-    disabledMethod: { type: Function as PropType<VxeCalendarPropTypes.DisabledMethod>, default: () => getConfig().calendar.disabledMethod },
+    festivalMethod: {
+      type: Function as PropType<VxeCalendarPropTypes.FestivalMethod>,
+      default: () => getConfig().calendar.festivalMethod
+    },
+    disabledMethod: {
+      type: Function as PropType<VxeCalendarPropTypes.DisabledMethod>,
+      default: () => getConfig().calendar.disabledMethod
+    },
 
     // week
-    selectDay: { type: [String, Number] as PropType<VxeCalendarPropTypes.SelectDay>, default: () => getConfig().calendar.selectDay }
+    selectDay: {
+      type: [String, Number] as PropType<VxeCalendarPropTypes.SelectDay>,
+      default: () => getConfig().calendar.selectDay
+    }
   },
   emits: [
     'update:modelValue',
@@ -46,10 +70,6 @@ export default defineComponent({
 
     const { computeSize } = useSize(props)
 
-    const yearSize = 12
-    const monthSize = 20
-    const quarterSize = 8
-
     const reactData = reactive<CalendarReactData>({
       selectValue: props.modelValue,
       inputValue: props.modelValue,
@@ -60,19 +80,13 @@ export default defineComponent({
       currentDate: null
     })
 
-    const refElem = ref() as Ref<HTMLDivElement>
+    const internalData: CalendarInternalData = {
+      yearSize: 12,
+      monthSize: 20,
+      quarterSize: 8
+    }
 
-    const computeCalendarStyle = computed(() => {
-      const { height, width } = props
-      const stys: Record<string, string> = {}
-      if (width) {
-        stys.width = toCssUnit(width)
-      }
-      if (height) {
-        stys.height = toCssUnit(height)
-      }
-      return stys
-    })
+    const refElem = ref() as Ref<HTMLDivElement>
 
     const refMaps: CalendarPrivateRef = {
       refElem
@@ -83,14 +97,23 @@ export default defineComponent({
       props,
       context,
       reactData,
+      internalData,
       getRefMaps: () => refMaps
     } as unknown as VxeCalendarConstructor
 
     let calendarMethods = {} as CalendarMethods
 
-    const parseDate = (value: VxeCalendarPropTypes.ModelValue, format: string) => {
-      return XEUtils.toStringDate(value, format)
-    }
+    const computeCalendarStyle = computed(() => {
+      const { height, width } = props
+      const stys: Record<string, string> = {}
+      if (width) {
+        stys.width = toCssUnit(width)
+      }
+      if (height) {
+        stys.height = toCssUnit(height)
+      }
+      return stys
+    })
 
     const computeIsDisabled = computed(() => {
       return false
@@ -198,6 +221,7 @@ export default defineComponent({
 
     const computeYearList = computed(() => {
       const { selectMonth, currentDate } = reactData
+      const { yearSize } = internalData
       const years: VxeDatePickerDefines.DateYearItem[] = []
       if (selectMonth && currentDate) {
         const currFullYear = currentDate.getFullYear()
@@ -295,6 +319,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()
@@ -326,6 +351,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()
@@ -410,7 +436,11 @@ export default defineComponent({
       })
     })
 
-    const emitModel = (value: string, evnt: Event | { type: string }) => {
+    const parseDate = (value: VxeCalendarPropTypes.ModelValue, format: string) => {
+      return XEUtils.toStringDate(value, format)
+    }
+
+    const handleChange = (value: string, evnt: Event | { type: string }) => {
       reactData.inputValue = value
       emit('update:modelValue', value)
       if (XEUtils.toValueString(props.modelValue) !== value) {
@@ -495,14 +525,14 @@ export default defineComponent({
         const dateMultipleValue = computeDateMultipleValue.value
         // 如果是日期类型
         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' })
         }
       }
     }
@@ -530,6 +560,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') {
@@ -564,6 +595,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') {
@@ -720,13 +752,13 @@ export default defineComponent({
             }]
           }, extraItem && extraItem.label
             ? [
-                h('span', label),
+                h('span', `${label || ''}`),
                 h('span', {
                   class: ['vxe-calendar--date-label--extra', extraItem.important ? 'is-important' : '', extraItem.className],
                   style: extraItem.style
                 }, XEUtils.toValueString(extraItem.label))
               ]
-            : label)
+            : [`${label || ''}`])
         ]
         const festivalLabel = festivalItem.label
         if (festivalLabel) {
@@ -749,7 +781,7 @@ export default defineComponent({
         }
         return labels
       }
-      return label
+      return `${label || ''}`
     }
 
     const renderDateDayTable = () => {

package/packages/card/src/card.ts

@@ -5,7 +5,7 @@ import { toCssUnit } from '../..//ui/src/dom'
 import VxeLoadingComponent from '../../loading/src/loading'
 import XEUtils from 'xe-utils'
 
-import type { CardReactData, VxeCardEmits, VxeCardPropTypes, CardPrivateRef, CardMethods, CardPrivateMethods, VxeCardPrivateComputed, VxeCardConstructor, VxeCardPrivateMethods } from '../../../types'
+import type { CardReactData, VxeCardEmits, VxeCardPropTypes, CardPrivateRef, ValueOf, CardMethods, CardPrivateMethods, VxeCardPrivateComputed, VxeCardConstructor, VxeCardPrivateMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxeCard',
@@ -72,10 +72,12 @@ export default defineComponent({
       getComputeMaps: () => computeMaps
     } as unknown as VxeCardConstructor & VxeCardPrivateMethods
 
+    const dispatchEvent = (type: ValueOf<VxeCardEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $card: $xeCard }, params))
+    }
+
     const cardMethods: CardMethods = {
-      dispatchEvent (type, params, evnt) {
-        emit(type, createEvent(evnt, { $card: $xeCard }, params))
-      }
+      dispatchEvent
     }
 
     const cardPrivateMethods: CardPrivateMethods = {

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

@@ -1,8 +1,9 @@
 import { defineComponent, ref, h, reactive, PropType, inject, watch, onMounted, onUnmounted } from 'vue'
+import { createEvent } from '../../ui'
 import { assembleCarouselItem, destroyCarouselItem } from './util'
 import XEUtils from 'xe-utils'
 
-import type { VxeCarouselItemPropTypes, CarouselItemReactData, CarouselItemPrivateRef, VxeCarouselItemEmits, VxeCarouselDefines, VxeCarouselItemPrivateComputed, VxeCarouselItemConstructor, VxeCarouselItemPrivateMethods, VxeCarouselConstructor, VxeCarouselPrivateMethods } from '../../../types'
+import type { VxeCarouselItemPropTypes, CarouselItemReactData, CarouselItemPrivateRef, CarouselItemMethods, CarouselItemPrivateMethods, ValueOf, VxeCarouselItemEmits, VxeCarouselDefines, VxeCarouselItemPrivateComputed, VxeCarouselItemConstructor, VxeCarouselItemPrivateMethods, VxeCarouselConstructor, VxeCarouselPrivateMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxeCarouselItem',
@@ -14,7 +15,7 @@ export default defineComponent({
   emits: [
   ] as VxeCarouselItemEmits,
   setup (props, context) {
-    const { slots } = context
+    const { slots, emit } = context
 
     const $xeCarousel = inject<(VxeCarouselConstructor & VxeCarouselPrivateMethods) | null>('$xeCarousel', null)
 
@@ -50,6 +51,19 @@ export default defineComponent({
       getComputeMaps: () => computeMaps
     } as unknown as VxeCarouselItemConstructor & VxeCarouselItemPrivateMethods
 
+    const dispatchEvent = (type: ValueOf<VxeCarouselItemEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $carouselItem: $xeCarouselItem }, params))
+    }
+
+    const carouselItemMethods: CarouselItemMethods = {
+      dispatchEvent
+    }
+
+    const carouselItemPrivateMethods: CarouselItemPrivateMethods = {
+    }
+
+    Object.assign($xeCarouselItem, carouselItemMethods, carouselItemPrivateMethods)
+
     const renderVN = () => {
       return h('div', {
         ref: refElem
@@ -65,8 +79,9 @@ export default defineComponent({
     })
 
     onMounted(() => {
-      if ($xeCarousel && refElem.value) {
-        assembleCarouselItem($xeCarousel, refElem.value, itemConfig)
+      const elem = refElem.value
+      if ($xeCarousel && elem) {
+        assembleCarouselItem($xeCarousel, elem, itemConfig)
       }
     })
 

package/packages/carousel/src/carousel.ts

@@ -5,7 +5,7 @@ import { toCssUnit } from '../..//ui/src/dom'
 import VxeLoadingComponent from '../../loading/src/loading'
 import XEUtils from 'xe-utils'
 
-import type { CarouselReactData, CarouselPrivateRef, VxeCarouselPropTypes, CarouselMethods, CarouselPrivateMethods, VxeCarouselEmits, VxeCarouselDefines, VxeCarouselPrivateComputed, VxeCarouselConstructor, ValueOf, VxeCarouselPrivateMethods } from '../../../types'
+import type { CarouselReactData, CarouselPrivateRef, VxeCarouselPropTypes, CarouselInternalData, CarouselMethods, CarouselPrivateMethods, VxeCarouselEmits, VxeCarouselDefines, VxeCarouselPrivateComputed, VxeCarouselConstructor, ValueOf, VxeCarouselPrivateMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxeCarousel',
@@ -61,6 +61,11 @@ export default defineComponent({
       itemHeight: 0
     })
 
+    const internalData: CarouselInternalData = {
+      apTimeout: undefined,
+      stopFlag: false
+    }
+
     const refMaps: CarouselPrivateRef = {
       refElem
     }
@@ -88,6 +93,7 @@ export default defineComponent({
       props,
       context,
       reactData,
+      internalData,
 
       getRefMaps: () => refMaps,
       getComputeMaps: () => computeMaps
@@ -198,22 +204,22 @@ export default defineComponent({
       }
     }
 
-    let apTimeout: any = null
-    let stopFlag = false
-
     const stopAutoPlay = () => {
-      stopFlag = true
-      if (apTimeout !== null) {
+      const { apTimeout } = internalData
+      internalData.stopFlag = true
+      if (apTimeout) {
         clearTimeout(apTimeout)
+        internalData.apTimeout = undefined
       }
     }
 
     const handleAutoPlay = () => {
       const { autoPlay, interval } = props
+      const { stopFlag } = internalData
       stopAutoPlay()
       if (autoPlay) {
-        stopFlag = false
-        apTimeout = setTimeout(() => {
+        internalData.stopFlag = false
+        internalData.apTimeout = setTimeout(() => {
           if (!stopFlag) {
             handlePrevNext(true)
           }
@@ -324,7 +330,9 @@ export default defineComponent({
                 height: toCssUnit(height)
               }
             : null
-        }, renderItemWrapper(list)),
+        }, [
+          renderItemWrapper(list)
+        ]),
         showIndicators ? renderIndicators(list) : createCommentVNode(),
         h('div', {
           class: 'vxe-carousel--btn-wrapper'
@@ -356,8 +364,6 @@ export default defineComponent({
       ])
     }
 
-    $xeCarousel.renderVN = renderVN
-
     const optsFlag = ref(0)
     watch(() => props.options ? props.options.length : -1, () => {
       optsFlag.value++
@@ -397,6 +403,8 @@ export default defineComponent({
 
     provide('$xeCarousel', $xeCarousel)
 
+    $xeCarousel.renderVN = renderVN
+
     return $xeCarousel
   },
   render () {

package/packages/checkbox/src/checkbox.ts

@@ -1,25 +1,37 @@
-import { defineComponent, h, computed, inject, PropType } from 'vue'
+import { defineComponent, h, computed, inject, PropType, reactive } from 'vue'
 import XEUtils from 'xe-utils'
 import { getFuncText } from '../../ui/src/utils'
 import { getConfig, createEvent, useSize, getIcon } from '../../ui'
 
-import type { VxeCheckboxConstructor, VxeCheckboxGroupConstructor, VxeCheckboxEmits, VxeCheckboxGroupPrivateMethods, CheckboxMethods, VxeCheckboxPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
+import type { VxeCheckboxConstructor, VxeCheckboxGroupConstructor, CheckboxReactData, VxeCheckboxEmits, ValueOf, VxeCheckboxGroupPrivateMethods, CheckboxMethods, VxeCheckboxPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
 
 export default defineComponent({
   name: 'VxeCheckbox',
   props: {
     modelValue: [String, Number, Boolean] as PropType<VxeCheckboxPropTypes.ModelValue>,
-    label: { type: [String, Number] as PropType<VxeCheckboxPropTypes.Label>, default: null },
+    label: {
+      type: [String, Number] as PropType<VxeCheckboxPropTypes.Label>,
+      default: null
+    },
     indeterminate: Boolean as PropType<VxeCheckboxPropTypes.Indeterminate>,
     title: [String, Number] as PropType<VxeCheckboxPropTypes.Title>,
-    checkedValue: { type: [String, Number, Boolean] as PropType<VxeCheckboxPropTypes.CheckedValue>, default: true },
-    uncheckedValue: { type: [String, Number, Boolean] as PropType<VxeCheckboxPropTypes.UncheckedValue>, default: false },
+    checkedValue: {
+      type: [String, Number, Boolean] as PropType<VxeCheckboxPropTypes.CheckedValue>,
+      default: true
+    },
+    uncheckedValue: {
+      type: [String, Number, Boolean] as PropType<VxeCheckboxPropTypes.UncheckedValue>,
+      default: false
+    },
     content: [String, Number] as PropType<VxeCheckboxPropTypes.Content>,
     disabled: {
       type: Boolean as PropType<VxeCheckboxPropTypes.Disabled>,
       default: null
     },
-    size: { type: String as PropType<VxeCheckboxPropTypes.Size>, default: () => getConfig().checkbox.size || getConfig().size }
+    size: {
+      type: String as PropType<VxeCheckboxPropTypes.Size>,
+      default: () => getConfig().checkbox.size || getConfig().size
+    }
   },
   emits: [
     'update:modelValue',
@@ -34,10 +46,14 @@ export default defineComponent({
 
     const xID = XEUtils.uniqueId()
 
+    const reactData: CheckboxReactData = reactive({
+    })
+
     const $xeCheckbox = {
       xID,
       props,
-      context
+      context,
+      reactData
     } as unknown as VxeCheckboxConstructor
 
     let checkboxMethods = {} as CheckboxMethods
@@ -53,12 +69,13 @@ export default defineComponent({
 
     const computeIsDisabled = computed(() => {
       const { disabled } = props
+      const isChecked = computeIsChecked.value
       if (disabled === null) {
         if ($xeCheckboxGroup) {
-          const { computeIsDisabled, computeIsMaximize } = $xeCheckboxGroup.getComputeMaps()
-          const isMaximize = computeIsMaximize.value
-          const isChecked = computeIsChecked.value
-          return computeIsDisabled.value || (isMaximize && !isChecked)
+          const { computeIsDisabled: computeIsGroupDisabled, computeIsMaximize: computeIsGroupMaximize } = $xeCheckboxGroup.getComputeMaps()
+          const isGroupDisabled = computeIsGroupDisabled.value
+          const isGroupMaximize = computeIsGroupMaximize.value
+          return isGroupDisabled || (isGroupMaximize && !isChecked)
         }
       }
       return disabled
@@ -84,10 +101,12 @@ export default defineComponent({
       }
     }
 
+    const dispatchEvent = (type: ValueOf<VxeCheckboxEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $checkbox: $xeCheckbox }, params))
+    }
+
     checkboxMethods = {
-      dispatchEvent (type, params, evnt) {
-        emit(type, createEvent(evnt, { $checkbox: $xeCheckbox }, params))
-      }
+      dispatchEvent
     }
 
     Object.assign($xeCheckbox, checkboxMethods)
@@ -96,7 +115,7 @@ export default defineComponent({
       const vSize = computeSize.value
       const isDisabled = computeIsDisabled.value
       const isChecked = computeIsChecked.value
-      const indeterminate = props.indeterminate
+      const indeterminate = !isChecked && props.indeterminate
       return h('label', {
         class: ['vxe-checkbox', {
           [`size--${vSize}`]: vSize,

package/packages/checkbox/src/group.ts

@@ -1,9 +1,9 @@
-import { defineComponent, h, provide, PropType, computed, inject } from 'vue'
+import { defineComponent, h, provide, PropType, computed, inject, reactive } from 'vue'
 import { getConfig, createEvent, useSize } from '../../ui'
 import XEUtils from 'xe-utils'
 import VxeCheckboxComponent from './checkbox'
 
-import type { VxeCheckboxGroupConstructor, VxeCheckboxGroupEmits, VxeCheckboxGroupPrivateMethods, CheckboxGroupPrivateMethods, CheckboxGroupPrivateComputed, CheckboxGroupMethods, VxeCheckboxGroupPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
+import type { VxeCheckboxGroupConstructor, VxeCheckboxGroupEmits, ValueOf, CheckboxGroupReactData, VxeCheckboxGroupPrivateMethods, CheckboxGroupPrivateMethods, CheckboxGroupPrivateComputed, CheckboxGroupMethods, VxeCheckboxGroupPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
 
 export default defineComponent({
   name: 'VxeCheckboxGroup',
@@ -15,8 +15,14 @@ export default defineComponent({
       type: Boolean as PropType<VxeCheckboxGroupPropTypes.Disabled>,
       default: null
     },
-    max: { type: [String, Number] as PropType<VxeCheckboxGroupPropTypes.Max>, default: null },
-    size: { type: String as PropType<VxeCheckboxGroupPropTypes.Size>, default: () => getConfig().checkboxGroup.size || getConfig().size }
+    max: {
+      type: [String, Number] as PropType<VxeCheckboxGroupPropTypes.Max>,
+      default: null
+    },
+    size: {
+      type: String as PropType<VxeCheckboxGroupPropTypes.Size>,
+      default: () => getConfig().checkboxGroup.size || getConfig().size
+    }
   },
   emits: [
     'update:modelValue',
@@ -29,6 +35,9 @@ export default defineComponent({
 
     const xID = XEUtils.uniqueId()
 
+    const reactData: CheckboxGroupReactData = reactive({
+    })
+
     const computeIsDisabled = computed(() => {
       const { disabled } = props
       if (disabled === null) {
@@ -49,7 +58,7 @@ export default defineComponent({
     })
 
     const computePropsOpts = computed(() => {
-      return props.optionProps || {}
+      return Object.assign({}, props.optionProps)
     })
 
     const computeLabelField = computed(() => {
@@ -76,16 +85,19 @@ export default defineComponent({
       xID,
       props,
       context,
+      reactData,
 
       getComputeMaps: () => computeMaps
     } as unknown as VxeCheckboxGroupConstructor & VxeCheckboxGroupPrivateMethods
 
     useSize(props)
 
+    const dispatchEvent = (type: ValueOf<VxeCheckboxGroupEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $checkboxGroup: $xeCheckboxGroup }, params))
+    }
+
     const checkboxGroupMethods: CheckboxGroupMethods = {
-      dispatchEvent (type, params, evnt) {
-        emit(type, createEvent(evnt, { $checkboxGroup: $xeCheckboxGroup }, params))
-      }
+      dispatchEvent
     }
 
     const checkboxGroupPrivateMethods: CheckboxGroupPrivateMethods = {
@@ -132,10 +144,10 @@ export default defineComponent({
             : []))
     }
 
-    $xeCheckboxGroup.renderVN = renderVN
-
     provide('$xeCheckboxGroup', $xeCheckboxGroup)
 
+    $xeCheckboxGroup.renderVN = renderVN
+
     return renderVN
   }
 })

package/packages/collapse-pane/index.ts

@@ -1,6 +1,6 @@
 import { App } from 'vue'
 import { VxeUI } from '@vxe-ui/core'
-import VxeCollapsePaneComponent from './src/collapse-pane'
+import VxeCollapsePaneComponent from '../collapse/src/collapse-pane'
 import { dynamicApp } from '../dynamics'
 
 export const VxeCollapsePane = Object.assign({}, VxeCollapsePaneComponent, {

package/packages/countdown/src/countdown.ts

@@ -4,7 +4,7 @@ import { getSlotVNs } from '../../ui/src/vn'
 import VxeTextComponent from '../../text/src/text'
 import XEUtils from 'xe-utils'
 
-import type { VxeCountdownPropTypes, CountdownReactData, CountdownPrivateRef, VxeCountdownEmits, VxeCountdownPrivateComputed, VxeCountdownConstructor, VxeCountdownPrivateMethods, ValueOf, CountdownMethods, CountdownPrivateMethods } from '../../../types'
+import type { VxeCountdownPropTypes, CountdownReactData, CountdownInternalData, CountdownPrivateRef, VxeCountdownEmits, VxeCountdownPrivateComputed, VxeCountdownConstructor, VxeCountdownPrivateMethods, ValueOf, CountdownMethods, CountdownPrivateMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxeCountdown',
@@ -13,7 +13,10 @@ export default defineComponent({
     format: String as PropType<VxeCountdownPropTypes.Format>,
     prefixConfig: Object as PropType<VxeCountdownPropTypes.PrefixConfig>,
     suffixConfig: Object as PropType<VxeCountdownPropTypes.SuffixConfig>,
-    size: { type: String as PropType<VxeCountdownPropTypes.Size>, default: () => getConfig().countdown.size || getConfig().size }
+    size: {
+      type: String as PropType<VxeCountdownPropTypes.Size>,
+      default: () => getConfig().countdown.size || getConfig().size
+    }
   },
   emits: [
     'update:modelValue',
@@ -34,6 +37,10 @@ export default defineComponent({
       secondNum: 0
     })
 
+    const internalData: CountdownInternalData = {
+      dnTimeout: undefined
+    }
+
     const refMaps: CountdownPrivateRef = {
       refElem
     }
@@ -94,13 +101,12 @@ export default defineComponent({
       props,
       context,
       reactData,
+      internalData,
 
       getRefMaps: () => refMaps,
       getComputeMaps: () => computeMaps
     } as unknown as VxeCountdownConstructor & VxeCountdownPrivateMethods
 
-    let htime: any = null
-
     const dispatchEvent = (type: ValueOf<VxeCountdownEmits>, params: Record<string, any>, evnt: Event | null) => {
       emit(type, createEvent(evnt, { $carousel: $xeCountdown }, params))
     }
@@ -115,10 +121,12 @@ export default defineComponent({
       const { currNum } = reactData
       if (currNum > 1000) {
         reactData.currNum -= 1000
-        htime = setTimeout(handleTime, 1000)
+        internalData.dnTimeout = setTimeout(() => {
+          handleTime()
+        }, 1000)
       } else {
         reactData.currNum = 0
-        stop()
+        handleStop()
       }
     }
 
@@ -132,9 +140,10 @@ export default defineComponent({
     }
 
     const handleStop = () => {
-      if (htime != null) {
-        clearTimeout(htime)
-        htime = null
+      const { dnTimeout } = internalData
+      if (dnTimeout) {
+        clearTimeout(dnTimeout)
+        internalData.dnTimeout = undefined
         dispatchEvent('end', {}, null)
       }
     }
@@ -225,8 +234,6 @@ export default defineComponent({
       ])
     }
 
-    $xeCountdown.renderVN = renderVN
-
     watch(() => props.modelValue, () => {
       updateCount()
       handleStop()
@@ -243,6 +250,8 @@ export default defineComponent({
 
     updateCount()
 
+    $xeCountdown.renderVN = renderVN
+
     return $xeCountdown
   },
   render () {