vxe-pc-ui 4.17.0 → 4.17.2

package/packages/input/src/input.ts

@@ -59,6 +59,10 @@ export default defineVxeComponent({
     align: String as PropType<VxeInputPropTypes.Align>,
     form: String as PropType<VxeInputPropTypes.Form>,
     className: String as PropType<VxeInputPropTypes.ClassName>,
+    inputClassName: {
+      type: String as PropType<VxeInputPropTypes.InputClassName>,
+      default: () => getConfig().input.inputClassName
+    },
     size: {
       type: String as PropType<VxeInputPropTypes.Size>,
       default: () => getConfig().input.size || getConfig().size
@@ -237,8 +241,6 @@ export default defineVxeComponent({
       getRefMaps: () => refMaps
     } as unknown as VxeInputConstructor
 
-    let inputMethods = {} as InputMethods
-
     const parseDate = (value: VxeInputPropTypes.ModelValue, format: string) => {
       const { type } = props
       if (type === 'time') {
@@ -744,8 +746,9 @@ export default defineVxeComponent({
     })
 
     const computeInputReadonly = computed(() => {
-      const { type, editable, multiple, readonly } = props
-      return readonly || multiple || !editable || type === 'week' || type === 'quarter'
+      const { type, editable, multiple } = props
+      const formReadonly = computeFormReadonly.value
+      return formReadonly || multiple || !editable || type === 'week' || type === 'quarter'
     })
 
     const computeInputType = computed(() => {
@@ -814,6 +817,11 @@ export default defineVxeComponent({
       return false
     })
 
+    const computeDomValue = computed(() => {
+      const { inputValue } = reactData
+      return inputValue
+    })
+
     const getNumberValue = (val: any) => {
       const { type, exponential } = props
       const inpMaxLength = computeInpMaxLength.value
@@ -825,13 +833,25 @@ export default defineVxeComponent({
       return restVal.slice(0, inpMaxLength)
     }
 
+    const dispatchEvent = (type: ValueOf<VxeInputEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $input: $xeInput }, params))
+    }
+
+    const updateDomValue = () => {
+      const domValue = computeDomValue.value
+      const inputElem = refInputTarget.value
+      if (inputElem) {
+        inputElem.value = XEUtils.eqNull(domValue) ? '' : ('' + domValue)
+      }
+    }
+
     const emitModel = (value: string) => {
       emit('update:modelValue', value)
     }
 
     const triggerEvent = (evnt: Event & { type: 'input' | 'change' | 'keydown' | 'keyup' | 'wheel' | 'click' | 'focus' | 'blur' }) => {
       const { inputValue } = reactData
-      inputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt)
+      dispatchEvent(evnt.type, { value: inputValue }, evnt)
     }
 
     const handleChange = (value: string, evnt: Event | { type: string }) => {
@@ -840,9 +860,9 @@ export default defineVxeComponent({
       }
       reactData.inputValue = value
       emitModel(value)
-      inputMethods.dispatchEvent('input', { value }, evnt as any)
+      dispatchEvent('input', { value }, evnt as any)
       if (XEUtils.toValueString(props.modelValue) !== value) {
-        inputMethods.dispatchEvent('change', { value }, evnt as any)
+        dispatchEvent('change', { value }, evnt as any)
         if (!$xeSelect && !$xeTreeSelect) {
           // 自动更新校验状态
           if ($xeForm && formItemInfo) {
@@ -860,7 +880,7 @@ export default defineVxeComponent({
         if (inpImmediate) {
           handleChange(value, evnt)
         } else {
-          inputMethods.dispatchEvent('input', { value }, evnt)
+          dispatchEvent('input', { value }, evnt)
           if (!$xeSelect && !$xeTreeSelect) {
             // 自动更新校验状态
             if ($xeForm && formItemInfo) {
@@ -882,7 +902,7 @@ export default defineVxeComponent({
       if (!inpImmediate) {
         triggerEvent(evnt)
       }
-      $xeInput.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt)
+      dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt)
     }
 
     const blurEvent = (evnt: Event & { type: 'blur' }) => {
@@ -896,7 +916,7 @@ export default defineVxeComponent({
       if (!reactData.visiblePanel) {
         reactData.isActivated = false
       }
-      inputMethods.dispatchEvent('blur', { value }, evnt)
+      dispatchEvent('blur', { value }, evnt)
       if (!$xeSelect && !$xeTreeSelect) {
         // 自动更新校验状态
         if ($xeForm && formItemInfo) {
@@ -922,7 +942,7 @@ export default defineVxeComponent({
       const isDisabled = computeIsDisabled.value
       if (!isDisabled) {
         const { inputValue } = reactData
-        $xeInput.dispatchEvent('prefix-click', { value: inputValue }, evnt)
+        dispatchEvent('prefix-click', { value: inputValue }, evnt)
       }
     }
 
@@ -949,15 +969,15 @@ export default defineVxeComponent({
         }
       }
       handleChange('', evnt)
-      $xeInput.dispatchEvent('clear', { value }, evnt)
-      $xeInput.dispatchEvent('lazy-change', { value }, evnt)
+      dispatchEvent('clear', { value }, evnt)
+      dispatchEvent('lazy-change', { value }, evnt)
     }
 
     const clickSuffixEvent = (evnt: Event) => {
       const isDisabled = computeIsDisabled.value
       if (!isDisabled) {
         const { inputValue } = reactData
-        $xeInput.dispatchEvent('suffix-click', { value: inputValue }, evnt)
+        dispatchEvent('suffix-click', { value: inputValue }, evnt)
       }
     }
 
@@ -1186,13 +1206,13 @@ export default defineVxeComponent({
       if (!isDisabled && !inputReadonly) {
         reactData.showPwd = !showPwd
       }
-      inputMethods.dispatchEvent('toggle-visible', { visible: reactData.showPwd }, evnt)
+      dispatchEvent('toggle-visible', { visible: reactData.showPwd }, evnt)
     }
     // 密码
 
     // 搜索
     const searchEvent = (evnt: Event) => {
-      inputMethods.dispatchEvent('search-click', {}, evnt)
+      dispatchEvent('search-click', {}, evnt)
     }
     // 搜索
 
@@ -1222,7 +1242,7 @@ export default defineVxeComponent({
       if (!isDisabled && !inputReadonly && !isDisabledSubtractNumber) {
         numberChange(false, evnt)
       }
-      inputMethods.dispatchEvent('next-number', { value: reactData.inputValue }, evnt)
+      dispatchEvent('next-number', { value: reactData.inputValue }, evnt)
     }
 
     const numberDownNextEvent = (evnt: Event) => {
@@ -1240,7 +1260,7 @@ export default defineVxeComponent({
       if (!isDisabled && !inputReadonly && !isDisabledAddNumber) {
         numberChange(true, evnt)
       }
-      inputMethods.dispatchEvent('prev-number', { value: reactData.inputValue }, evnt)
+      dispatchEvent('prev-number', { value: reactData.inputValue }, evnt)
     }
 
     const numberKeydownEvent = (evnt: KeyboardEvent) => {
@@ -1394,7 +1414,7 @@ export default defineVxeComponent({
           }
         }
         reactData.selectMonth = viewDate
-        inputMethods.dispatchEvent('date-prev', { viewType: datePanelType, viewDate, value, type }, evnt)
+        dispatchEvent('date-prev', { viewType: datePanelType, viewDate, value, type }, evnt)
       }
     }
 
@@ -1404,7 +1424,7 @@ export default defineVxeComponent({
         dateChange(reactData.currentDate)
         hidePanel()
       }
-      inputMethods.dispatchEvent('date-today', { type: props.type }, evnt)
+      dispatchEvent('date-today', { type: props.type }, evnt)
     }
 
     const dateNextEvent = (evnt: Event) => {
@@ -1433,7 +1453,7 @@ export default defineVxeComponent({
           }
         }
         reactData.selectMonth = viewDate
-        inputMethods.dispatchEvent('date-next', { viewType: datePanelType, viewDate, value, type }, evnt)
+        dispatchEvent('date-next', { viewType: datePanelType, viewDate, value, type }, evnt)
       }
     }
 
@@ -1971,6 +1991,33 @@ export default defineVxeComponent({
       }
     }
 
+    const inputMethods: InputMethods = {
+      dispatchEvent,
+      focus () {
+        const inputElem = refInputTarget.value
+        reactData.isActivated = true
+        inputElem.focus()
+        return nextTick()
+      },
+      blur () {
+        const inputElem = refInputTarget.value
+        inputElem.blur()
+        reactData.isActivated = false
+        return nextTick()
+      },
+      select () {
+        const inputElem = refInputTarget.value
+        inputElem.select()
+        reactData.isActivated = false
+        return nextTick()
+      },
+      showPanel,
+      hidePanel,
+      updatePlacement
+    }
+
+    Object.assign($xeInput, inputMethods)
+
     const renderDateLabel = (item: VxeDatePanelDefines.DateYearItem | VxeDatePanelDefines.DateQuarterItem | VxeDatePanelDefines.DateMonthItem | VxeDatePanelDefines.DateDayItem, label: string | number) => {
       const { festivalMethod } = props
       if (festivalMethod) {
@@ -2615,40 +2662,8 @@ export default defineVxeComponent({
       return createCommentVNode()
     }
 
-    const dispatchEvent = (type: ValueOf<VxeInputEmits>, params: Record<string, any>, evnt: Event | null) => {
-      emit(type, createEvent(evnt, { $input: $xeInput }, params))
-    }
-
-    inputMethods = {
-      dispatchEvent,
-
-      focus () {
-        const inputElem = refInputTarget.value
-        reactData.isActivated = true
-        inputElem.focus()
-        return nextTick()
-      },
-      blur () {
-        const inputElem = refInputTarget.value
-        inputElem.blur()
-        reactData.isActivated = false
-        return nextTick()
-      },
-      select () {
-        const inputElem = refInputTarget.value
-        inputElem.select()
-        reactData.isActivated = false
-        return nextTick()
-      },
-      showPanel,
-      hidePanel,
-      updatePlacement
-    }
-
-    Object.assign($xeInput, inputMethods)
-
     const renderVN = () => {
-      const { className, controls, type, title, align, showWordCount, countMethod, name, autoComplete, autocomplete } = props
+      const { className, inputClassName, controls, type, title, align, showWordCount, countMethod, name, autoComplete, autocomplete } = props
       const { inputValue, visiblePanel, isActivated } = reactData
       const vSize = computeSize.value
       const isDisabled = computeIsDisabled.value
@@ -2692,8 +2707,7 @@ export default defineVxeComponent({
         }, [
           h('input', {
             ref: refInputTarget,
-            class: 'vxe-input--inner',
-            value: inputValue,
+            class: 'vxe-input--inner' + (inputClassName ? (' ' + inputClassName) : ''),
             name,
             type: inputType,
             placeholder: inpPlaceholder,
@@ -2751,6 +2765,20 @@ export default defineVxeComponent({
       }
     })
 
+    const rDvFlag = ref(0)
+    watch(computeFormReadonly, () => {
+      rDvFlag.value++
+    })
+    watch(computeDomValue, () => {
+      rDvFlag.value++
+    })
+    watch(rDvFlag, () => {
+      updateDomValue()
+      nextTick(() => {
+        updateDomValue()
+      })
+    })
+
     onMounted(() => {
       const { type } = props
       if (['date', 'time', 'datetime', 'week', 'month', 'quarter', 'year'].includes(type)) {
@@ -2769,6 +2797,7 @@ export default defineVxeComponent({
       globalEvents.on($xeInput, 'mousedown', handleGlobalMousedownEvent)
       globalEvents.on($xeInput, 'keydown', handleGlobalKeydownEvent)
       globalEvents.on($xeInput, 'blur', handleGlobalBlurEvent)
+      updateDomValue()
     })
 
     onBeforeUnmount(() => {

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

@@ -46,6 +46,10 @@ export default defineVxeComponent({
     align: String as PropType<VxeNumberInputPropTypes.Align>,
     form: String as PropType<VxeNumberInputPropTypes.Form>,
     className: String as PropType<VxeNumberInputPropTypes.ClassName>,
+    inputClassName: {
+      type: String as PropType<VxeNumberInputPropTypes.InputClassName>,
+      default: () => getConfig().numberInput.inputClassName
+    },
     size: {
       type: String as PropType<VxeNumberInputPropTypes.Size>,
       default: () => getConfig().numberInput.size || getConfig().size
@@ -320,6 +324,11 @@ export default defineVxeComponent({
       return false
     })
 
+    const computeInpClassNamevalue = computed(() => {
+      const { inputClassName } = props
+      return 'vxe-number-input--input' + (inputClassName ? (' ' + inputClassName) : '')
+    })
+
     const refMaps: InputPrivateRef = {
       refElem,
       refInput: refInputTarget
@@ -339,7 +348,9 @@ export default defineVxeComponent({
       getComputeMaps: () => computeMaps
     } as unknown as VxeNumberInputConstructor
 
-    let numberInputMethods = {} as NumberInputMethods
+    const dispatchEvent = (type: ValueOf<VxeNumberInputEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $numberInput: $xeNumberInput }, params))
+    }
 
     const handleNumberString = (val: any) => {
       if (XEUtils.eqNull(val)) {
@@ -370,7 +381,7 @@ export default defineVxeComponent({
 
     const triggerEvent = (evnt: Event & { type: 'input' | 'change' | 'keydown' | 'keyup' | 'wheel' | 'click' | 'focus' | 'blur' }) => {
       const { inputValue } = reactData
-      numberInputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt)
+      dispatchEvent(evnt.type, { value: inputValue }, evnt)
     }
 
     const handleChange = (val: number | null, inputValue: string, evnt: Event | { type: string }) => {
@@ -385,9 +396,9 @@ export default defineVxeComponent({
           reactData.inputValue = inputValue || ''
         })
       }
-      numberInputMethods.dispatchEvent('input', { value }, evnt as Event)
+      dispatchEvent('input', { value }, evnt as Event)
       if (isChange) {
-        numberInputMethods.dispatchEvent('change', { value }, evnt as Event)
+        dispatchEvent('change', { value }, evnt as Event)
         // 自动更新校验状态
         if ($xeForm && formItemInfo) {
           $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value)
@@ -402,7 +413,7 @@ export default defineVxeComponent({
       if (inpImmediate) {
         handleChange(value, inputValue, evnt)
       } else {
-        numberInputMethods.dispatchEvent('input', { value }, evnt)
+        dispatchEvent('input', { value }, evnt)
         // 自动更新校验状态
         if ($xeForm && formItemInfo) {
           $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value)
@@ -421,7 +432,7 @@ export default defineVxeComponent({
       if (!inpImmediate) {
         triggerEvent(evnt)
       }
-      $xeNumberInput.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt)
+      dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt)
     }
 
     const focusEvent = (evnt: Event & { type: 'focus' }) => {
@@ -439,22 +450,22 @@ export default defineVxeComponent({
       const isDisabled = computeIsDisabled.value
       if (!isDisabled) {
         const { inputValue } = reactData
-        numberInputMethods.dispatchEvent('prefix-click', { value: inputValue }, evnt)
+        dispatchEvent('prefix-click', { value: inputValue }, evnt)
       }
     }
 
     const clearValueEvent = (evnt: Event, value: VxeNumberInputPropTypes.ModelValue) => {
       focus()
       handleChange(null, '', evnt)
-      numberInputMethods.dispatchEvent('clear', { value }, evnt)
-      $xeNumberInput.dispatchEvent('lazy-change', { value }, evnt)
+      dispatchEvent('clear', { value }, evnt)
+      dispatchEvent('lazy-change', { value }, evnt)
     }
 
     const clickSuffixEvent = (evnt: Event) => {
       const isDisabled = computeIsDisabled.value
       if (!isDisabled) {
         const { inputValue } = reactData
-        numberInputMethods.dispatchEvent('suffix-click', { value: inputValue }, evnt)
+        dispatchEvent('suffix-click', { value: inputValue }, evnt)
       }
     }
 
@@ -559,7 +570,7 @@ export default defineVxeComponent({
       afterCheckValue()
       reactData.isFocus = false
       reactData.isActivated = false
-      numberInputMethods.dispatchEvent('blur', { value }, evnt)
+      dispatchEvent('blur', { value }, evnt)
       // 自动更新校验状态
       if ($xeForm && formItemInfo) {
         $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value)
@@ -592,10 +603,10 @@ export default defineVxeComponent({
         numberChange(true, evnt)
       }
       reactData.isActivated = true
-      numberInputMethods.dispatchEvent('plus-number', { value: reactData.inputValue }, evnt)
-      $xeNumberInput.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt)
+      dispatchEvent('plus-number', { value: reactData.inputValue }, evnt)
+      dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt)
       // 已废弃
-      numberInputMethods.dispatchEvent('next-number', { value: reactData.inputValue }, evnt)
+      dispatchEvent('next-number', { value: reactData.inputValue }, evnt)
     }
 
     const numberMinusEvent = (evnt: Event) => {
@@ -606,10 +617,10 @@ export default defineVxeComponent({
         numberChange(false, evnt)
       }
       reactData.isActivated = true
-      numberInputMethods.dispatchEvent('minus-number', { value: reactData.inputValue }, evnt)
-      $xeNumberInput.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt)
+      dispatchEvent('minus-number', { value: reactData.inputValue }, evnt)
+      dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt)
       // 已废弃
-      numberInputMethods.dispatchEvent('prev-number', { value: reactData.inputValue }, evnt)
+      dispatchEvent('prev-number', { value: reactData.inputValue }, evnt)
     }
 
     const numberKeydownEvent = (evnt: KeyboardEvent) => {
@@ -805,13 +816,8 @@ export default defineVxeComponent({
       }
     }
 
-    const dispatchEvent = (type: ValueOf<VxeNumberInputEmits>, params: Record<string, any>, evnt: Event | null) => {
-      emit(type, createEvent(evnt, { $numberInput: $xeNumberInput }, params))
-    }
-
-    numberInputMethods = {
+    const numberInputMethods: NumberInputMethods = {
       dispatchEvent,
-
       focus () {
         const inputReadonly = computeInputReadonly.value
         if (!inputReadonly) {
@@ -922,6 +928,7 @@ export default defineVxeComponent({
       const inputReadonly = computeInputReadonly.value
       const inpMaxLength = computeInpMaxLength.value
       const inpPlaceholder = computeInpPlaceholder.value
+      const inpClassName = computeInpClassNamevalue.value
       return h('div', {
         key: 'ni',
         class: 'vxe-number-input--input-wrapper'
@@ -932,10 +939,10 @@ export default defineVxeComponent({
         }, [
           h('input', {
             ref: refInputTarget,
-            class: 'vxe-number-input--input',
-            value: !isFocus && type === 'amount' ? numLabel : inputValue,
+            class: inpClassName,
             name,
             type: 'text',
+            value: !isFocus && type === 'amount' ? numLabel : inputValue,
             placeholder: inpPlaceholder,
             maxlength: inpMaxLength,
             readonly: inputReadonly,