vxe-pc-ui 4.1.20 → 4.1.21

package/packages/layout-aside/src/layout-aside.ts

@@ -110,10 +110,10 @@ export default defineComponent({
       ])
     }
 
-    $xeLayoutAside.renderVN = renderVN
-
     provide('$xeLayoutAside', $xeLayoutAside)
 
+    $xeLayoutAside.renderVN = renderVN
+
     return $xeLayoutAside
   },
   render () {

package/packages/list/src/list.ts

@@ -29,19 +29,16 @@ export default defineComponent({
 
     const { computeSize } = useSize(props)
 
-    const reactData = reactive({
+    const reactData = reactive<ListReactData>({
       scrollYLoad: false,
       bodyHeight: 0,
       rowHeight: 0,
       topSpaceHeight: 0,
       items: []
-    } as ListReactData)
-
-    const refElem = ref() as Ref<HTMLDivElement>
-    const refVirtualWrapper = ref() as Ref<HTMLDivElement>
-    const refVirtualBody = ref() as Ref<HTMLDivElement>
+    })
 
     const internalData: ListInternalData = {
+      resizeObserver: undefined,
       fullData: [],
       lastScrollLeft: 0,
       lastScrollTop: 0,
@@ -54,6 +51,10 @@ export default defineComponent({
       }
     }
 
+    const refElem = ref() as Ref<HTMLDivElement>
+    const refVirtualWrapper = ref() as Ref<HTMLDivElement>
+    const refVirtualBody = ref() as Ref<HTMLDivElement>
+
     const refMaps: ListPrivateRef = {
       refElem
     }
@@ -157,7 +158,7 @@ export default defineComponent({
      * @param {Number} scrollLeft 左距离
      * @param {Number} scrollTop 上距离
      */
-    const scrollTo = (scrollLeft: number | null, scrollTop?: number | null): Promise<void> => {
+    const scrollTo = (scrollLeft: number | null, scrollTop?: number | null) => {
       const scrollBodyElem = refVirtualWrapper.value
       if (XEUtils.isNumber(scrollLeft)) {
         scrollBodyElem.scrollLeft = scrollLeft
@@ -166,7 +167,7 @@ export default defineComponent({
         scrollBodyElem.scrollTop = scrollTop
       }
       if (reactData.scrollYLoad) {
-        return new Promise(resolve => {
+        return new Promise<void>(resolve => {
           setTimeout(() => {
             nextTick(() => {
               resolve()
@@ -296,21 +297,21 @@ export default defineComponent({
       recalculate().then(() => refreshScroll())
     })
 
-    let resizeObserver: ResizeObserver
-
     nextTick(() => {
       globalEvents.on($xeList, 'resize', () => {
         recalculate()
       })
       if (props.autoResize) {
         const el = refElem.value
-        resizeObserver = globalResize.create(() => recalculate())
+        const resizeObserver = globalResize.create(() => recalculate())
         resizeObserver.observe(el)
+        internalData.resizeObserver = resizeObserver
       }
       listMethods.loadData(props.data || [])
     })
 
     onUnmounted(() => {
+      const { resizeObserver } = internalData
       if (resizeObserver) {
         resizeObserver.disconnect()
       }

package/packages/list-design/src/list-design.ts

@@ -330,8 +330,6 @@ export default defineComponent({
       ])
     }
 
-    $xeListDesign.renderVN = renderVN
-
     provide('$xeListDesign', $xeListDesign)
 
     watch(() => props.config, (value) => {
@@ -344,6 +342,8 @@ export default defineComponent({
       loadConfig(props.config)
     }
 
+    $xeListDesign.renderVN = renderVN
+
     return $xeListDesign
   },
   render () {

package/packages/list-design/src/list-view.ts

@@ -455,8 +455,6 @@ export default defineComponent({
       ])
     }
 
-    $xeListView.renderVN = renderVN
-
     watch(() => props.config, (value) => {
       loadConfig(value || {})
     })
@@ -475,6 +473,8 @@ export default defineComponent({
       })
     }
 
+    $xeListView.renderVN = renderVN
+
     return $xeListView
   },
   render () {

package/packages/loading/src/loading.ts

@@ -135,14 +135,14 @@ export default defineComponent({
           ])
     }
 
-    $xeLoading.renderVN = renderVN
-
     watch(() => props.modelValue, () => {
       handleInit()
     })
 
     handleInit()
 
+    $xeLoading.renderVN = renderVN
+
     return $xeLoading
   },
   render () {

package/packages/menu/src/menu.ts

@@ -283,8 +283,6 @@ export default defineComponent({
       ])
     }
 
-    $xeMenu.renderVN = renderVN
-
     const optFlag = ref(0)
     watch(() => props.options ? props.options.length : -1, () => {
       optFlag.value++
@@ -314,6 +312,8 @@ export default defineComponent({
     updateMenuConfig()
     updateActiveMenu(true)
 
+    $xeMenu.renderVN = renderVN
+
     return $xeMenu
   },
   render () {

package/packages/number-input/src/number-input.ts

@@ -258,7 +258,7 @@ export default defineComponent({
       numberInputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt)
     }
 
-    const emitModel = (val: number | null, inputValue: string, evnt: Event | { type: string }) => {
+    const handleChange = (val: number | null, inputValue: string, evnt: Event | { type: string }) => {
       const value = val ? Number(val) : null
       const isChange = Number(value) !== props.modelValue
       if (isChange) {
@@ -280,7 +280,7 @@ export default defineComponent({
       const value = inputValue ? XEUtils.toNumber(inputValue) : null
       reactData.inputValue = inputValue
       if (inpImmediate) {
-        emitModel(value, inputValue, evnt)
+        handleChange(value, inputValue, evnt)
       } else {
         numberInputMethods.dispatchEvent('input', { value }, evnt)
       }
@@ -314,7 +314,7 @@ export default defineComponent({
 
     const clearValueEvent = (evnt: Event, value: VxeNumberInputPropTypes.ModelValue) => {
       focus()
-      emitModel(null, '', evnt)
+      handleChange(null, '', evnt)
       numberInputMethods.dispatchEvent('clear', { value }, evnt)
     }
 
@@ -342,7 +342,7 @@ export default defineComponent({
             validValue = Number(textValue)
           }
           if (inputValue !== validValue) {
-            emitModel(validValue, textValue, { type: 'init' })
+            handleChange(validValue, textValue, { type: 'init' })
           }
         }
       }
@@ -375,7 +375,7 @@ export default defineComponent({
             }
           }
           const inpValue = getNumberValue(inpNumVal)
-          emitModel(inpValue === null ? null : Number(inpValue), inpValue, { type: 'check' })
+          handleChange(inpValue === null ? null : Number(inpValue), inpValue, { type: 'check' })
         }
       }
     }
@@ -385,7 +385,7 @@ export default defineComponent({
       const inpImmediate = computeInpImmediate.value
       const value = inputValue ? Number(inputValue) : null
       if (!inpImmediate) {
-        emitModel(value, `${inputValue || ''}`, evnt)
+        handleChange(value, `${inputValue || ''}`, evnt)
       }
       afterCheckValue()
       reactData.isActivated = false

package/packages/pager/src/pager.ts

@@ -5,39 +5,78 @@ import { errLog } from '../../ui/src/log'
 import VxeSelectComponent from '../../select/src/select'
 import VxeInputComponent from '../../input/src/input'
 
-import type { VxePagerPropTypes, VxePagerConstructor, VxePagerEmits, VxeSelectEvents, PagerPrivateRef, PagerMethods, PagerPrivateMethods, VxePagerPrivateMethods, PagerReactData, VxeGridConstructor, VxeGridPrivateMethods, VxeInputEvents } from '../../../types'
+import type { VxePagerPropTypes, VxePagerConstructor, VxePagerEmits, VxeSelectEvents, ValueOf, PagerPrivateRef, PagerMethods, PagerPrivateMethods, VxePagerPrivateMethods, PagerReactData, VxeGridConstructor, VxeGridPrivateMethods, VxeInputEvents } from '../../../types'
 
 export default defineComponent({
   name: 'VxePager',
   props: {
-    size: { type: String as PropType<VxePagerPropTypes.Size>, default: () => getConfig().pager.size || getConfig().size },
+    size: {
+      type: String as PropType<VxePagerPropTypes.Size>,
+      default: () => getConfig().pager.size || getConfig().size
+    },
     // 自定义布局
-    layouts: { type: Array as PropType<VxePagerPropTypes.Layouts>, default: () => getConfig().pager.layouts || ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total'] },
+    layouts: {
+      type: Array as PropType<VxePagerPropTypes.Layouts>,
+      default: () => getConfig().pager.layouts || ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total']
+    },
     // 当前页
-    currentPage: { type: Number as PropType<VxePagerPropTypes.CurrentPage>, default: 1 },
+    currentPage: {
+      type: Number as PropType<VxePagerPropTypes.CurrentPage>,
+      default: 1
+    },
     // 加载中
     loading: Boolean as PropType<VxePagerPropTypes.Loading>,
     // 每页大小
-    pageSize: { type: Number as PropType<VxePagerPropTypes.PageSize>, default: () => getConfig().pager.pageSize || 10 },
+    pageSize: {
+      type: Number as PropType<VxePagerPropTypes.PageSize>,
+      default: () => getConfig().pager.pageSize || 10
+    },
     // 总条数
     total: { type: Number as PropType<VxePagerPropTypes.Total>, default: 0 },
     // 显示页码按钮的数量
-    pagerCount: { type: Number as PropType<VxePagerPropTypes.PagerCount>, default: () => getConfig().pager.pagerCount || 7 },
+    pagerCount: {
+      type: Number as PropType<VxePagerPropTypes.PagerCount>,
+      default: () => getConfig().pager.pagerCount || 7
+    },
     // 每页大小选项列表
-    pageSizes: { type: Array as PropType<VxePagerPropTypes.PageSizes>, default: () => getConfig().pager.pageSizes || [10, 15, 20, 50, 100] },
+    pageSizes: {
+      type: Array as PropType<VxePagerPropTypes.PageSizes>,
+      default: () => getConfig().pager.pageSizes || [10, 15, 20, 50, 100]
+    },
     // 列对其方式
-    align: { type: String as PropType<VxePagerPropTypes.Align>, default: () => getConfig().pager.align },
+    align: {
+      type: String as PropType<VxePagerPropTypes.Align>,
+      default: () => getConfig().pager.align
+    },
     // 带边框
-    border: { type: Boolean as PropType<VxePagerPropTypes.Border>, default: () => getConfig().pager.border },
+    border: {
+      type: Boolean as PropType<VxePagerPropTypes.Border>,
+      default: () => getConfig().pager.border
+    },
     // 带背景颜色
-    background: { type: Boolean as PropType<VxePagerPropTypes.Background>, default: () => getConfig().pager.background },
+    background: {
+      type: Boolean as PropType<VxePagerPropTypes.Background>,
+      default: () => getConfig().pager.background
+    },
     // 配套的样式
-    perfect: { type: Boolean as PropType<VxePagerPropTypes.Perfect>, default: () => getConfig().pager.perfect },
+    perfect: {
+      type: Boolean as PropType<VxePagerPropTypes.Perfect>,
+      default: () => getConfig().pager.perfect
+    },
     // 当只有一页时隐藏
-    autoHidden: { type: Boolean as PropType<VxePagerPropTypes.AutoHidden>, default: () => getConfig().pager.autoHidden },
-    transfer: { type: Boolean as PropType<VxePagerPropTypes.Transfer>, default: () => getConfig().pager.transfer },
+    autoHidden: {
+      type: Boolean as PropType<VxePagerPropTypes.AutoHidden>,
+      default: () => getConfig().pager.autoHidden
+    },
+    transfer: {
+      type: Boolean as PropType<VxePagerPropTypes.Transfer>,
+      default: () => getConfig().pager.transfer
+    },
     className: [String, Function] as PropType<VxePagerPropTypes.ClassName>,
-    pageSizePlacement: { type: String as PropType<VxePagerPropTypes.PageSizePlacement>, default: () => getConfig().pager.pageSizePlacement },
+    pageSizePlacement: {
+      type: String as PropType<VxePagerPropTypes.PageSizePlacement>,
+      default: () => getConfig().pager.pageSizePlacement
+    },
     // 自定义图标
     iconPrevPage: String as PropType<VxePagerPropTypes.IconPrevPage>,
     iconJumpPrev: String as PropType<VxePagerPropTypes.IconJumpPrev>,
@@ -71,6 +110,37 @@ export default defineComponent({
       refElem
     }
 
+    const computePageCount = computed(() => {
+      return getPageCount(props.total, props.pageSize)
+    })
+
+    const computeNumList = computed(() => {
+      const { pagerCount } = props
+      const pageCount = computePageCount.value
+      const len = pageCount > pagerCount ? pagerCount - 2 : pagerCount
+      const rest = []
+      for (let index = 0; index < len; index++) {
+        rest.push(index)
+      }
+      return rest
+    })
+
+    const computeOffsetNumber = computed(() => {
+      return Math.floor((props.pagerCount - 2) / 2)
+    })
+
+    const computeSizeList = computed(() => {
+      return props.pageSizes.map((item) => {
+        if (XEUtils.isNumber(item)) {
+          return {
+            value: item,
+            label: `${getI18n('vxe.pager.pagesize', [item])}`
+          }
+        }
+        return { value: '', label: '', ...item }
+      })
+    })
+
     const $xePager = {
       xID,
       props,
@@ -85,10 +155,6 @@ export default defineComponent({
       return Math.max(Math.ceil(total / size), 1)
     }
 
-    const computePageCount = computed(() => {
-      return getPageCount(props.total, props.pageSize)
-    })
-
     const jumpPageEvent = (evnt: Event, currentPage: number) => {
       emit('update:currentPage', currentPage)
       if (evnt && currentPage !== props.currentPage) {
@@ -115,33 +181,6 @@ export default defineComponent({
       changeCurrentPage(current, $event)
     }
 
-    const computeNumList = computed(() => {
-      const { pagerCount } = props
-      const pageCount = computePageCount.value
-      const len = pageCount > pagerCount ? pagerCount - 2 : pagerCount
-      const rest = []
-      for (let index = 0; index < len; index++) {
-        rest.push(index)
-      }
-      return rest
-    })
-
-    const computeOffsetNumber = computed(() => {
-      return Math.floor((props.pagerCount - 2) / 2)
-    })
-
-    const computeSizeList = computed(() => {
-      return props.pageSizes.map((item) => {
-        if (XEUtils.isNumber(item)) {
-          return {
-            value: item,
-            label: `${getI18n('vxe.pager.pagesize', [item])}`
-          }
-        }
-        return { value: '', label: '', ...item }
-      })
-    })
-
     const handleHomePage = (evnt?: Event) => {
       const { currentPage } = props
       if (currentPage > 1) {
@@ -345,7 +384,7 @@ export default defineComponent({
             class: 'vxe-pager--num-btn',
             type: 'button',
             onClick: (evnt: Event) => jumpPageEvent(evnt, 1)
-          }, 1),
+          }, '1'),
           renderPrevJump('span')
         )
       }
@@ -360,7 +399,7 @@ export default defineComponent({
               }],
               type: 'button',
               onClick: (evnt: Event) => jumpPageEvent(evnt, number)
-            }, number)
+            }, `${number}`)
           )
         }
       })
@@ -456,10 +495,12 @@ export default defineComponent({
       }, getI18n('vxe.pager.total', [props.total]))
     }
 
+    const dispatchEvent = (type: ValueOf<VxePagerEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $pager: $xePager }, params))
+    }
+
     pagerMethods = {
-      dispatchEvent (type, params, evnt) {
-        emit(type, createEvent(evnt, { $pager: $xePager }, params))
-      },
+      dispatchEvent,
       homePage () {
         handleHomePage()
         return nextTick()

package/packages/password-input/src/password-input.ts

@@ -118,7 +118,7 @@ export default defineComponent({
       emitInputEvent(value, evnt)
     }
 
-    const emitModel = (value: string, evnt: Event | { type: string }) => {
+    const handleChange = (value: string, evnt: Event | { type: string }) => {
       reactData.inputValue = value
       emit('update:modelValue', value)
       passwordInputMethods.dispatchEvent('input', { value }, evnt as any)
@@ -165,7 +165,7 @@ export default defineComponent({
 
     const clearValueEvent = (evnt: Event, value: VxePasswordInputPropTypes.ModelValue) => {
       focus()
-      emitModel('', evnt)
+      handleChange('', evnt)
       passwordInputMethods.dispatchEvent('clear', { value }, evnt)
     }
 

package/packages/print/src/page-break.ts

@@ -1,15 +1,16 @@
 import { defineComponent, ref, h, reactive, inject, onMounted, onUnmounted, createCommentVNode } from 'vue'
 import XEUtils from 'xe-utils'
+import { createEvent } from '../../ui'
 import { assemblePageBreak, destroyPageBreak } from './util'
 
-import type { PrintPageBreakReactData, PrintPageBreakPrivateRef, VxePrintPageBreakEmits, VxePrintDefines, VxePrintPageBreakPrivateComputed, VxePrintConstructor, VxePrintPrivateMethods, VxePrintPageBreakConstructor, VxePrintPageBreakPrivateMethods } from '../../../types'
+import type { PrintPageBreakReactData, PrintPageBreakPrivateRef, ValueOf, PrintPageBreakPrivateMethods, PrintPageBreakMethods, VxePrintPageBreakEmits, VxePrintDefines, VxePrintPageBreakPrivateComputed, VxePrintConstructor, VxePrintPrivateMethods, VxePrintPageBreakConstructor, VxePrintPageBreakPrivateMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxePrintPageBreak',
   props: {},
   emits: [] as VxePrintPageBreakEmits,
   setup (props, context) {
-    const { slots } = context
+    const { slots, emit } = context
 
     const xID = XEUtils.uniqueId()
     const $xePrint = inject<(VxePrintConstructor & VxePrintPrivateMethods) | null>('$xePrint', null)
@@ -41,6 +42,19 @@ export default defineComponent({
       getComputeMaps: () => computeMaps
     } as unknown as VxePrintPageBreakConstructor & VxePrintPageBreakPrivateMethods
 
+    const dispatchEvent = (type: ValueOf<VxePrintPageBreakEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $print: $xePrint }, params))
+    }
+
+    const printPageBreakMethods: PrintPageBreakMethods = {
+      dispatchEvent
+    }
+
+    const printPageBreakPrivateMethods: PrintPageBreakPrivateMethods = {
+    }
+
+    Object.assign($xePrintPageBreak, printPageBreakMethods, printPageBreakPrivateMethods)
+
     if (!$xePrint) {
       $xePrintPageBreak.renderVN = () => {
         return createCommentVNode()
@@ -54,8 +68,6 @@ export default defineComponent({
       })
     }
 
-    $xePrintPageBreak.renderVN = renderVN
-
     onMounted(() => {
       const elem = refElem.value
       if ($xePrint && elem) {
@@ -69,6 +81,8 @@ export default defineComponent({
       }
     })
 
+    $xePrintPageBreak.renderVN = renderVN
+
     return $xePrintPageBreak
   },
   render () {

package/packages/print/src/print.ts

@@ -4,7 +4,7 @@ import { getConfig, createEvent } from '../../ui'
 import { printHtml } from './util'
 import { getSlotVNs } from '../..//ui/src/vn'
 
-import type { VxePrintPropTypes, PrintReactData, PrintPrivateRef, VxePrintEmits, VxePrintPrivateComputed, VxePrintConstructor, VxePrintPrivateMethods, PrintMethods } from '../../../types'
+import type { VxePrintPropTypes, PrintReactData, PrintPrivateRef, VxePrintEmits, PrintPrivateMethods, ValueOf, VxePrintPrivateComputed, VxePrintConstructor, VxePrintPrivateMethods, PrintMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxePrint',
@@ -73,10 +73,12 @@ export default defineComponent({
       getComputeMaps: () => computeMaps
     } as unknown as VxePrintConstructor & VxePrintPrivateMethods
 
+    const dispatchEvent = (type: ValueOf<VxePrintEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $print: $xePrint }, params))
+    }
+
     const printMethods: PrintMethods = {
-      dispatchEvent (type, params, evnt) {
-        emit(type, createEvent(evnt, { $print: $xePrint }, params))
-      },
+      dispatchEvent,
       print () {
         const elem = refElem.value
         return printHtml(Object.assign({}, props, {
@@ -86,7 +88,10 @@ export default defineComponent({
       }
     }
 
-    Object.assign($xePrint, printMethods)
+    const printPrivateMethods: PrintPrivateMethods = {
+    }
+
+    Object.assign($xePrint, printMethods, printPrivateMethods)
 
     const renderPageConfigLayouts = () => {
       const { title, showPageNumber, showAllPageTitle, align, headerAlign, footerAlign } = props

package/packages/radio/src/group.ts

@@ -132,10 +132,13 @@ export default defineComponent({
             : []))
     }
 
-    $xeRadioGroup.renderVN = renderVN
-
     provide('$xeRadioGroup', $xeRadioGroup)
 
-    return renderVN
+    $xeRadioGroup.renderVN = renderVN
+
+    return $xeRadioGroup
+  },
+  render () {
+    return this.renderVN()
   }
 })

package/packages/row/src/row.ts

@@ -106,10 +106,10 @@ export default defineComponent({
       }, defaultSlot ? defaultSlot({}) : [])
     }
 
-    $xeRow.renderVN = renderVN
-
     provide('$xeRow', $xeRow)
 
+    $xeRow.renderVN = renderVN
+
     return $xeRow
   },
   render () {

package/packages/select/src/optgroup.ts

@@ -1,45 +1,48 @@
 import { defineComponent, h, onUnmounted, provide, inject, ref, Ref, onMounted, PropType } from 'vue'
 import { XEOptionProvide, createOption, watchOption, destroyOption, assembleOption } from './util'
 
-import type { VxeSelectConstructor, VxeOptionPropTypes } from '../../../types'
+import type { VxeSelectConstructor, VxeOptgroupEmits, VxeOptgroupPropTypes } from '../../../types'
 
 export default defineComponent({
   name: 'VxeOptgroup',
   props: {
     label: {
-      type: [String, Number, Boolean] as PropType<VxeOptionPropTypes.Label>,
+      type: [String, Number, Boolean] as PropType<VxeOptgroupPropTypes.Label>,
       default: ''
     },
     visible: {
-      type: Boolean as PropType<VxeOptionPropTypes.Visible>,
+      type: Boolean as PropType<VxeOptgroupPropTypes.Visible>,
       default: null
     },
-    className: [String, Function] as PropType<VxeOptionPropTypes.ClassName>,
-    disabled: Boolean as PropType<VxeOptionPropTypes.Disabled>
+    className: [String, Function] as PropType<VxeOptgroupPropTypes.ClassName>,
+    disabled: Boolean as PropType<VxeOptgroupPropTypes.Disabled>
   },
+  emits: [] as VxeOptgroupEmits,
   setup (props, { slots }) {
     const elem = ref() as Ref<HTMLDivElement>
     const $xeSelect = inject('$xeSelect', {} as VxeSelectConstructor)
-    const option = createOption($xeSelect, props)
-    const xeOption: XEOptionProvide = { option }
-    option.options = []
+    const optionConfig = createOption($xeSelect, props)
+    const $xeOptgroup: XEOptionProvide = { optionConfig }
+    optionConfig.options = []
 
-    provide('$xeOptgroup', xeOption)
+    provide('$xeOptgroup', $xeOptgroup)
 
-    watchOption(props, option)
+    watchOption(props, optionConfig)
 
     onMounted(() => {
-      assembleOption($xeSelect, elem.value, option)
+      const el = elem.value
+      assembleOption($xeSelect, el, optionConfig)
     })
 
     onUnmounted(() => {
-      destroyOption($xeSelect, option)
+      destroyOption($xeSelect, optionConfig)
     })
 
     return () => {
+      const defaultSlot = slots.default
       return h('div', {
         ref: elem
-      }, slots.default ? slots.default() : [])
+      }, defaultSlot ? defaultSlot({}) : [])
     }
   }
 })

package/packages/select/src/option.ts

@@ -1,12 +1,12 @@
 import { defineComponent, h, onUnmounted, inject, ref, Ref, onMounted, PropType } from 'vue'
 import { XEOptionProvide, createOption, watchOption, destroyOption, assembleOption } from './util'
 
-import type { VxeSelectConstructor, VxeOptionPropTypes } from '../../../types'
+import type { VxeSelectConstructor, VxeOptionEmits, VxeOptionPropTypes } from '../../../types'
 
 export default defineComponent({
   name: 'VxeOption',
   props: {
-    value: null,
+    value: [String, Number, Boolean] as PropType<VxeOptionPropTypes.Value>,
     label: {
       type: [String, Number, Boolean] as PropType<VxeOptionPropTypes.Label>,
       default: ''
@@ -18,21 +18,23 @@ export default defineComponent({
     className: [String, Function] as PropType<VxeOptionPropTypes.ClassName>,
     disabled: Boolean as PropType<VxeOptionPropTypes.Disabled>
   },
+  emits: [] as VxeOptionEmits,
   setup (props, { slots }) {
     const elem = ref() as Ref<HTMLDivElement>
     const $xeSelect = inject('$xeSelect', {} as VxeSelectConstructor)
-    const optGroup = inject<XEOptionProvide | null>('$xeOptgroup', null)
-    const option = createOption($xeSelect, props)
-    option.slots = slots
+    const $xeOptgroup = inject<XEOptionProvide | null>('$xeOptgroup', null)
+    const optionConfig = createOption($xeSelect, props)
+    optionConfig.slots = slots
 
-    watchOption(props, option)
+    watchOption(props, optionConfig)
 
     onMounted(() => {
-      assembleOption($xeSelect, elem.value, option, optGroup)
+      const el = elem.value
+      assembleOption($xeSelect, el, optionConfig, $xeOptgroup)
     })
 
     onUnmounted(() => {
-      destroyOption($xeSelect, option)
+      destroyOption($xeSelect, optionConfig)
     })
 
     return () => {