vxe-pc-ui 4.1.19 → 4.1.21

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/pulldown/src/pulldown.ts

@@ -4,7 +4,7 @@ import { getConfig, globalEvents, createEvent, useSize, VxeComponentStyleType, V
 import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils'
 
-import type { VxePulldownConstructor, VxePulldownPropTypes, VxePulldownEmits, PulldownReactData, PulldownMethods, PulldownPrivateRef, VxePulldownMethods, VxeTableConstructor, VxeTablePrivateMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods } from '../../../types'
+import type { VxePulldownConstructor, VxePulldownPropTypes, PulldownInternalData, VxePulldownEmits, PulldownReactData, PulldownMethods, PulldownPrivateRef, VxePulldownMethods, VxeTableConstructor, VxeTablePrivateMethods, VxeDrawerConstructor, VxeDrawerMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxePulldown',
@@ -42,9 +42,10 @@ export default defineComponent({
   setup (props, context) {
     const { slots, 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 xID = XEUtils.uniqueId()
 
@@ -53,16 +54,20 @@ export default defineComponent({
     const reactData = reactive<PulldownReactData>({
       initialized: false,
       panelIndex: 0,
-      panelStyle: null,
+      panelStyle: {},
       panelPlacement: null,
       visiblePanel: false,
       visibleAnimate: false,
       isActivated: false
     })
 
+    const internalData: PulldownInternalData = {
+      hpTimeout: undefined
+    }
+
     const refElem = ref() as Ref<HTMLDivElement>
-    const refPulldowContent = ref() as Ref<HTMLDivElement>
-    const refPulldowPnanel = ref() as Ref<HTMLDivElement>
+    const refPulldownContent = ref() as Ref<HTMLDivElement>
+    const refPulldownPanel = ref() as Ref<HTMLDivElement>
 
     const computeBtnTransfer = computed(() => {
       const { transfer } = props
@@ -71,7 +76,7 @@ export default defineComponent({
         if (XEUtils.isBoolean(globalTransfer)) {
           return globalTransfer
         }
-        if ($xeTable || $xeModal || $xeForm) {
+        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
           return true
         }
       }
@@ -87,6 +92,7 @@ export default defineComponent({
       props,
       context,
       reactData,
+      internalData,
       getRefMaps: () => refMaps
     } as unknown as VxePulldownConstructor & VxePulldownMethods
 
@@ -111,8 +117,8 @@ export default defineComponent({
         const { panelIndex, visiblePanel } = reactData
         const btnTransfer = computeBtnTransfer.value
         if (visiblePanel) {
-          const targetElem = refPulldowContent.value
-          const panelElem = refPulldowPnanel.value
+          const targetElem = refPulldownContent.value
+          const panelElem = refPulldownPanel.value
           if (panelElem && targetElem) {
             const targetHeight = targetElem.offsetHeight
             const targetWidth = targetElem.offsetWidth
@@ -178,18 +184,18 @@ export default defineComponent({
       })
     }
 
-    let hidePanelTimeout: number
-
     /**
      * 显示下拉面板
      */
-    const showPanel = (): Promise<void> => {
+    const showPanel = () => {
       if (!reactData.initialized) {
         reactData.initialized = true
       }
-      return new Promise(resolve => {
+      return new Promise<void>(resolve => {
         if (!props.disabled) {
-          clearTimeout(hidePanelTimeout)
+          if (internalData.hpTimeout) {
+            clearTimeout(internalData.hpTimeout)
+          }
           reactData.isActivated = true
           reactData.visibleAnimate = true
           setTimeout(() => {
@@ -212,12 +218,12 @@ export default defineComponent({
     /**
      * 隐藏下拉面板
      */
-    const hidePanel = (): Promise<void> => {
+    const hidePanel = () => {
       reactData.visiblePanel = false
       emit('update:modelValue', false)
-      return new Promise(resolve => {
+      return new Promise<void>(resolve => {
         if (reactData.visibleAnimate) {
-          hidePanelTimeout = window.setTimeout(() => {
+          internalData.hpTimeout = window.setTimeout(() => {
             reactData.visibleAnimate = false
             nextTick(() => {
               resolve()
@@ -263,7 +269,7 @@ export default defineComponent({
     const handleGlobalMousewheelEvent = (evnt: Event) => {
       const { disabled } = props
       const { visiblePanel } = reactData
-      const panelElem = refPulldowPnanel.value
+      const panelElem = refPulldownPanel.value
       if (!disabled) {
         if (visiblePanel) {
           if (getEventTargetNode(evnt, panelElem).flag) {
@@ -280,7 +286,7 @@ export default defineComponent({
       const { disabled } = props
       const { visiblePanel } = reactData
       const el = refElem.value
-      const panelElem = refPulldowPnanel.value
+      const panelElem = refPulldownPanel.value
       if (!disabled) {
         reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag
         if (visiblePanel && !reactData.isActivated) {
@@ -369,7 +375,7 @@ export default defineComponent({
         }]
       }, [
         h('div', {
-          ref: refPulldowContent,
+          ref: refPulldownContent,
           class: 'vxe-pulldown--content',
           onClick: clickTargetEvent
         }, defaultSlot ? defaultSlot({ $pulldown: $xePulldown }) : []),
@@ -378,7 +384,7 @@ export default defineComponent({
           disabled: btnTransfer ? !initialized : true
         }, [
           h('div', {
-            ref: refPulldowPnanel,
+            ref: refPulldownPanel,
             class: ['vxe-table--ignore-clear vxe-pulldown--panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $pulldown: $xePulldown }) : popupClassName) : '', {
               [`size--${vSize}`]: vSize,
               'is--shadow': showPopupShadow,

package/packages/radio/src/button.ts

@@ -122,7 +122,7 @@ export default defineComponent({
       const vSize = computeSize.value
       const isDisabled = computeIsDisabled.value
       const name = computeName.value
-      const checked = computeChecked.value
+      const isChecked = computeChecked.value
 
       return h('label', {
         class: ['vxe-radio', 'vxe-radio-button', {
@@ -135,7 +135,7 @@ export default defineComponent({
           class: 'vxe-radio--input',
           type: 'radio',
           name,
-          checked,
+          checked: isChecked,
           disabled: isDisabled,
           onChange: changeEvent,
           onClick: clickEvent

package/packages/radio/src/group.ts

@@ -97,11 +97,12 @@ export default defineComponent({
 
     const radioGroupPrivateMethods: RadioGroupPrivateMethods = {
       handleChecked (params, evnt) {
-        emit('update:modelValue', params.label)
+        const value = params.label
+        emit('update:modelValue', value)
         dispatchEvent('change', params, evnt)
         // 自动更新校验状态
         if ($xeForm && formItemInfo) {
-          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, params.label)
+          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value)
         }
       }
     }
@@ -131,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,39 +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>, default: '' },
-    visible: { type: Boolean as PropType<VxeOptionPropTypes.Visible>, default: null },
-    className: [String, Function] as PropType<VxeOptionPropTypes.ClassName>,
-    disabled: Boolean as PropType<VxeOptionPropTypes.Disabled>
+    label: {
+      type: [String, Number, Boolean] as PropType<VxeOptgroupPropTypes.Label>,
+      default: ''
+    },
+    visible: {
+      type: Boolean as PropType<VxeOptgroupPropTypes.Visible>,
+      default: null
+    },
+    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,32 +1,40 @@
 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,
-    label: { type: [String, Number, Boolean] as PropType<VxeOptionPropTypes.Label>, default: '' },
-    visible: { type: Boolean as PropType<VxeOptionPropTypes.Visible>, default: null },
+    value: [String, Number, Boolean] as PropType<VxeOptionPropTypes.Value>,
+    label: {
+      type: [String, Number, Boolean] as PropType<VxeOptionPropTypes.Label>,
+      default: ''
+    },
+    visible: {
+      type: Boolean as PropType<VxeOptionPropTypes.Visible>,
+      default: null
+    },
     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 () => {