vxe-pc-ui 4.5.31 → 4.5.33

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

@@ -1,12 +1,12 @@
-import { defineComponent, h, ref, Ref, computed, reactive, inject, nextTick, watch, onMounted, createCommentVNode, onBeforeUnmount, PropType } from 'vue'
+import { defineComponent, h, ref, Ref, computed, reactive, inject, nextTick, watch, onMounted, onBeforeUnmount, PropType } from 'vue'
 import XEUtils from 'xe-utils'
-import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize } from '../../ui'
-import { getFuncText, eqEmptyValue } from '../../ui/src/utils'
+import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize, renderEmptyElement } from '../../ui'
+import { getFuncText, eqEmptyValue, isEnableConf } from '../../ui/src/utils'
 import { hasClass, getEventTargetNode, hasControlKey } from '../../ui/src/dom'
 import { getSlotVNs } from '../../ui/src/vn'
 import { handleNumber, toFloatValueFixed } from './util'
 
-import type { VxeNumberInputConstructor, NumberInputInternalData, VxeNumberInputEmits, NumberInputReactData, NumberInputMethods, VxeNumberInputPropTypes, InputPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf } from '../../../types'
+import type { VxeNumberInputConstructor, NumberInputInternalData, VxeNumberInputEmits, VxeNumberInputPrivateComputed, NumberInputReactData, NumberInputMethods, VxeNumberInputPropTypes, InputPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf } from '../../../types'
 
 export default defineComponent({
   name: 'VxeNumberInput',
@@ -72,12 +72,7 @@ export default defineComponent({
       type: String as PropType<VxeNumberInputPropTypes.CurrencySymbol>,
       default: () => getConfig().numberInput.currencySymbol
     },
-
-    // number、integer、float
-    controls: {
-      type: Boolean as PropType<VxeNumberInputPropTypes.Controls>,
-      default: () => getConfig().numberInput.controls
-    },
+    controlConfig: Object as PropType<VxeNumberInputPropTypes.ControlConfig>,
 
     // float
     digits: {
@@ -93,9 +88,16 @@ export default defineComponent({
       default: true
     },
 
+    plusIcon: String as PropType<VxeNumberInputPropTypes.PlusIcon>,
+    minusIcon: String as PropType<VxeNumberInputPropTypes.MinusIcon>,
     prefixIcon: String as PropType<VxeNumberInputPropTypes.PrefixIcon>,
     suffixIcon: String as PropType<VxeNumberInputPropTypes.SuffixIcon>,
 
+    // 已废弃
+    controls: {
+      type: Boolean as PropType<VxeNumberInputPropTypes.Controls>,
+      default: null
+    },
     // 已废弃
     maxlength: [String, Number] as PropType<VxeNumberInputPropTypes.Maxlength>,
     // 已废弃
@@ -112,10 +114,14 @@ export default defineComponent({
     'focus',
     'blur',
     'clear',
-    'prev-number',
-    'next-number',
+    'plus-number',
+    'minus-number',
     'prefix-click',
-    'suffix-click'
+    'suffix-click',
+
+    // 已废弃
+    'prev-number',
+    'next-number'
   ] as VxeNumberInputEmits,
 
   setup (props, context) {
@@ -135,6 +141,8 @@ export default defineComponent({
 
     const internalData: NumberInputInternalData = {
       // dnTimeout: undefined,
+      // ainTimeout: undefined,
+      // isMouseDown: undefined,
       // isUM: undefined
     }
 
@@ -142,22 +150,6 @@ export default defineComponent({
     const refInputTarget = ref() as Ref<HTMLInputElement>
     const refInputPanel = ref() as Ref<HTMLDivElement>
 
-    const refMaps: InputPrivateRef = {
-      refElem,
-      refInput: refInputTarget
-    }
-
-    const $xeNumberInput = {
-      xID,
-      props,
-      context,
-      reactData,
-      internalData,
-      getRefMaps: () => refMaps
-    } as unknown as VxeNumberInputConstructor
-
-    let numberInputMethods = {} as NumberInputMethods
-
     const computeFormReadonly = computed(() => {
       const { readonly } = props
       if (readonly === null) {
@@ -194,6 +186,10 @@ export default defineComponent({
       return XEUtils.toInteger(defDigits) || 1
     })
 
+    const computeControlOpts = computed(() => {
+      return Object.assign({}, getConfig().numberInput.controlConfig, props.controlConfig)
+    })
+
     const computeDecimalsType = computed(() => {
       const { type } = props
       return type === 'float' || type === 'amount'
@@ -295,6 +291,27 @@ export default defineComponent({
       return false
     })
 
+    const refMaps: InputPrivateRef = {
+      refElem,
+      refInput: refInputTarget
+    }
+
+    const computeMaps: VxeNumberInputPrivateComputed = {
+      computeControlOpts
+    }
+
+    const $xeNumberInput = {
+      xID,
+      props,
+      context,
+      reactData,
+      internalData,
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeNumberInputConstructor
+
+    let numberInputMethods = {} as NumberInputMethods
+
     const handleNumberString = (val: any) => {
       if (XEUtils.eqNull(val)) {
         return ''
@@ -532,34 +549,29 @@ export default defineComponent({
       emitInputEvent(getNumberValue(restNum), evnt as (Event & { type: 'input' }))
     }
 
-    const numberNextEvent = (evnt: Event) => {
+    const numberPlusEvent = (evnt: Event) => {
       const isDisabled = computeIsDisabled.value
       const formReadonly = computeFormReadonly.value
-      const isDisabledSubtractNumber = computeIsDisabledSubtractNumber.value
-      numberStopDown()
-      if (!isDisabled && !formReadonly && !isDisabledSubtractNumber) {
-        numberChange(false, evnt)
+      const isDisabledAddNumber = computeIsDisabledAddNumber.value
+      if (!isDisabled && !formReadonly && !isDisabledAddNumber) {
+        numberChange(true, evnt)
       }
       reactData.isActivated = true
+      numberInputMethods.dispatchEvent('plus-number', { value: reactData.inputValue }, evnt)
+      // 已废弃
       numberInputMethods.dispatchEvent('next-number', { value: reactData.inputValue }, evnt)
     }
 
-    const numberDownNextEvent = (evnt: Event) => {
-      internalData.dnTimeout = setTimeout(() => {
-        numberNextEvent(evnt)
-        numberDownNextEvent(evnt)
-      }, 60)
-    }
-
-    const numberPrevEvent = (evnt: Event) => {
+    const numberMinusEvent = (evnt: Event) => {
       const isDisabled = computeIsDisabled.value
       const formReadonly = computeFormReadonly.value
-      const isDisabledAddNumber = computeIsDisabledAddNumber.value
-      numberStopDown()
-      if (!isDisabled && !formReadonly && !isDisabledAddNumber) {
-        numberChange(true, evnt)
+      const isDisabledSubtractNumber = computeIsDisabledSubtractNumber.value
+      if (!isDisabled && !formReadonly && !isDisabledSubtractNumber) {
+        numberChange(false, evnt)
       }
       reactData.isActivated = true
+      numberInputMethods.dispatchEvent('minus-number', { value: reactData.inputValue }, evnt)
+      // 已废弃
       numberInputMethods.dispatchEvent('prev-number', { value: reactData.inputValue }, evnt)
     }
 
@@ -569,15 +581,17 @@ export default defineComponent({
       if (isUpArrow || isDwArrow) {
         evnt.preventDefault()
         if (isUpArrow) {
-          numberPrevEvent(evnt)
+          numberMinusEvent(evnt)
         } else {
-          numberNextEvent(evnt)
+          numberPlusEvent(evnt)
         }
       }
     }
 
     const keydownEvent = (evnt: KeyboardEvent & { type: 'keydown' }) => {
       const { type, exponential, controls } = props
+      const controlOpts = computeControlOpts.value
+      const { showButton } = controlOpts
       const inputReadonly = computeInputReadonly.value
       const isControlKey = hasControlKey(evnt)
       const isShiftKey = evnt.shiftKey
@@ -594,7 +608,7 @@ export default defineComponent({
       if (isEsc) {
         afterCheckValue()
       } else if (isUpArrow || isDwArrow) {
-        if (controls && !inputReadonly) {
+        if (isEnableConf(controlOpts) && (controls === false ? controls : showButton) && !inputReadonly) {
           numberKeydownEvent(evnt)
         }
       }
@@ -606,8 +620,7 @@ export default defineComponent({
     }
 
     // 数值
-
-    const numberStopDown = () => {
+    const stopDown = () => {
       const { dnTimeout } = internalData
       if (dnTimeout) {
         clearTimeout(dnTimeout)
@@ -615,27 +628,64 @@ export default defineComponent({
       }
     }
 
-    const numberDownPrevEvent = (evnt: Event) => {
-      internalData.dnTimeout = setTimeout(() => {
-        numberPrevEvent(evnt)
-        numberDownPrevEvent(evnt)
+    const stopAutoIncrement = () => {
+      const { ainTimeout } = internalData
+      if (ainTimeout) {
+        clearTimeout(ainTimeout)
+        internalData.ainTimeout = undefined
+      }
+    }
+
+    const numberDownMinusEvent = (evnt: Event) => {
+      numberStopAll()
+      internalData.ainTimeout = setTimeout(() => {
+        numberMinusEvent(evnt)
+        numberDownMinusEvent(evnt)
       }, 60)
     }
 
+    const numberDownPlusEvent = (evnt: Event) => {
+      numberStopAll()
+      internalData.ainTimeout = setTimeout(() => {
+        numberPlusEvent(evnt)
+        numberDownPlusEvent(evnt)
+      }, 60)
+    }
+
+    const numberStopAll = () => {
+      stopDown()
+      stopAutoIncrement()
+    }
+
+    const numberClickEvent = (evnt: MouseEvent) => {
+      if (internalData.isMouseDown) {
+        internalData.isMouseDown = false
+      } else {
+        numberStopAll()
+        const isAddNumber = hasClass(evnt.currentTarget, 'is--plus')
+        if (isAddNumber) {
+          numberPlusEvent(evnt)
+        } else {
+          numberMinusEvent(evnt)
+        }
+      }
+    }
+
     const numberMousedownEvent = (evnt: MouseEvent) => {
-      numberStopDown()
+      numberStopAll()
+      internalData.isMouseDown = true
       if (evnt.button === 0) {
-        const isPrevNumber = hasClass(evnt.currentTarget, 'is--prev')
-        if (isPrevNumber) {
-          numberPrevEvent(evnt)
+        const isAddNumber = hasClass(evnt.currentTarget, 'is--plus')
+        if (isAddNumber) {
+          numberPlusEvent(evnt)
         } else {
-          numberNextEvent(evnt)
+          numberMinusEvent(evnt)
         }
         internalData.dnTimeout = setTimeout(() => {
-          if (isPrevNumber) {
-            numberDownPrevEvent(evnt)
+          if (isAddNumber) {
+            numberDownPlusEvent(evnt)
           } else {
-            numberDownNextEvent(evnt)
+            numberDownMinusEvent(evnt)
           }
         }, 500)
       }
@@ -645,16 +695,19 @@ export default defineComponent({
       type: 'wheel';
       wheelDelta: number;
     }) => {
+      const { controls } = props
+      const controlOpts = computeControlOpts.value
+      const { isWheel } = controlOpts
       const inputReadonly = computeInputReadonly.value
-      if (props.controls && !inputReadonly) {
+      if (isEnableConf(controlOpts) && (controls === false ? controls : isWheel) && !inputReadonly) {
         if (reactData.isActivated) {
           evnt.stopPropagation()
           evnt.preventDefault()
           const delta = evnt.deltaY
           if (delta > 0) {
-            numberNextEvent(evnt)
+            numberPlusEvent(evnt)
           } else if (delta < 0) {
-            numberPrevEvent(evnt)
+            numberMinusEvent(evnt)
           }
         }
       }
@@ -716,43 +769,38 @@ export default defineComponent({
       }
     }
 
-    const renderNumberIcon = () => {
-      const isDisabledAddNumber = computeIsDisabledAddNumber.value
-      const isDisabledSubtractNumber = computeIsDisabledSubtractNumber.value
-      return h('div', {
-        class: 'vxe-input--control-icon'
-      }, [
-        h('div', {
-          class: 'vxe-input--number-icon'
-        }, [
-          h('div', {
-            class: ['vxe-input--number-btn is--prev', {
-              'is--disabled': isDisabledAddNumber
-            }],
-            onMousedown: numberMousedownEvent,
-            onMouseup: numberStopDown,
-            onMouseleave: numberStopDown
-          }, [
-            h('i', {
-              class: getIcon().NUMBER_INPUT_PREV_NUM
-            })
-          ]),
-          h('div', {
-            class: ['vxe-input--number-btn is--next', {
-              'is--disabled': isDisabledSubtractNumber
-            }],
-            onMousedown: numberMousedownEvent,
-            onMouseup: numberStopDown,
-            onMouseleave: numberStopDown
-          }, [
-            h('i', {
-              class: getIcon().NUMBER_INPUT_NEXT_NUM
-            })
-          ])
-        ])
-      ])
+    const dispatchEvent = (type: ValueOf<VxeNumberInputEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $numberInput: $xeNumberInput }, params))
     }
 
+    numberInputMethods = {
+      dispatchEvent,
+
+      focus () {
+        const inputReadonly = computeInputReadonly.value
+        if (!inputReadonly) {
+          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()
+      }
+    }
+
+    Object.assign($xeNumberInput, numberInputMethods)
+
     const renderPrefixIcon = () => {
       const { prefixIcon } = props
       const prefixSlot = slots.prefix
@@ -771,7 +819,7 @@ export default defineComponent({
                 })
               ])
         ])
-        : null
+        : renderEmptyElement($xeNumberInput)
     }
 
     const renderSuffixIcon = () => {
@@ -794,8 +842,7 @@ export default defineComponent({
               class: getIcon().INPUT_CLEAR
             })
           ])
-          : createCommentVNode(),
-        renderExtraSuffixIcon(),
+          : renderEmptyElement($xeNumberInput),
         suffixSlot || suffixIcon
           ? h('div', {
             class: 'vxe-number-input--suffix-icon',
@@ -807,91 +854,29 @@ export default defineComponent({
                   class: suffixIcon
                 })
               ])
-          : createCommentVNode()
+          : renderEmptyElement($xeNumberInput)
       ])
     }
 
-    const renderExtraSuffixIcon = () => {
-      const { controls } = props
-      const inputReadonly = computeInputReadonly.value
-      if (controls && !inputReadonly) {
-        return renderNumberIcon()
-      }
-      return createCommentVNode()
-    }
-
-    const dispatchEvent = (type: ValueOf<VxeNumberInputEmits>, params: Record<string, any>, evnt: Event | null) => {
-      emit(type, createEvent(evnt, { $numberInput: $xeNumberInput }, params))
-    }
-
-    numberInputMethods = {
-      dispatchEvent,
-
-      focus () {
-        const inputReadonly = computeInputReadonly.value
-        if (!inputReadonly) {
-          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()
-      }
-    }
-
-    Object.assign($xeNumberInput, numberInputMethods)
-
-    const renderVN = () => {
-      const { className, controls, type, align, name, autocomplete, autoComplete } = props
-      const { inputValue, isFocus, isActivated } = reactData
-      const vSize = computeSize.value
+    const renderInput = () => {
+      const { type, name, autocomplete, autoComplete } = props
+      const { inputValue, isFocus } = reactData
       const isDisabled = computeIsDisabled.value
-      const formReadonly = computeFormReadonly.value
       const numLabel = computeNumLabel.value
-      if (formReadonly) {
-        return h('div', {
-          ref: refElem,
-          class: ['vxe-number-input--readonly', `type--${type}`, className]
-        }, numLabel)
-      }
       const inputReadonly = computeInputReadonly.value
       const inpMaxLength = computeInpMaxLength.value
       const inpPlaceholder = computeInpPlaceholder.value
-      const isClearable = computeIsClearable.value
-      const prefix = renderPrefixIcon()
-      const suffix = renderSuffixIcon()
       return h('div', {
-        ref: refElem,
-        class: ['vxe-number-input', `type--${type}`, className, {
-          [`size--${vSize}`]: vSize,
-          [`is--${align}`]: align,
-          'is--controls': controls && !inputReadonly,
-          'is--prefix': !!prefix,
-          'is--suffix': !!suffix,
-          'is--disabled': isDisabled,
-          'is--active': isActivated,
-          'show--clear': isClearable && !isDisabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
-        }],
-        spellcheck: false
+        key: 'ni',
+        class: 'vxe-number-input--input-wrapper'
       }, [
-        prefix || createCommentVNode(),
+        renderPrefixIcon(),
         h('div', {
-          class: 'vxe-number-input--wrapper'
+          class: 'vxe-number-input--input-inner'
         }, [
           h('input', {
             ref: refInputTarget,
-            class: 'vxe-number-input--inner',
+            class: 'vxe-number-input--input',
             value: !isFocus && type === 'amount' ? numLabel : inputValue,
             name,
             type: 'text',
@@ -910,10 +895,112 @@ export default defineComponent({
             onBlur: blurEvent
           })
         ]),
-        suffix || createCommentVNode()
+        renderSuffixIcon()
+      ])
+    }
+
+    const renderMinusBtn = () => {
+      const { minusIcon } = props
+      const isDisabledSubtractNumber = computeIsDisabledSubtractNumber.value
+      return h('button', {
+        key: 'prev',
+        class: ['vxe-number-input--minus-btn is--minus', {
+          'is--disabled': isDisabledSubtractNumber
+        }],
+        onClick: numberClickEvent,
+        onMousedown: numberMousedownEvent,
+        onMouseup: numberStopAll,
+        onMouseleave: numberStopAll
+      }, [
+        h('i', {
+          class: minusIcon || getIcon().NUMBER_INPUT_MINUS_NUM
+        })
+      ])
+    }
+
+    const renderPlusBtn = () => {
+      const { plusIcon } = props
+      const isDisabledAddNumber = computeIsDisabledAddNumber.value
+      return h('button', {
+        key: 'next',
+        class: ['vxe-number-input--plus-btn is--plus', {
+          'is--disabled': isDisabledAddNumber
+        }],
+        onClick: numberClickEvent,
+        onMousedown: numberMousedownEvent,
+        onMouseup: numberStopAll,
+        onMouseleave: numberStopAll
+      }, [
+        h('i', {
+          class: plusIcon || getIcon().NUMBER_INPUT_PLUS_NUM
+        })
+      ])
+    }
+
+    const renderSideControl = () => {
+      return h('div', {
+        key: 'cplr',
+        class: 'vxe-number-input--side-control'
+      }, [
+        renderPlusBtn(),
+        renderMinusBtn()
       ])
     }
 
+    const renderVN = () => {
+      const { className, controls, type, align, prefixIcon, suffixIcon } = props
+      const { inputValue, isActivated } = reactData
+      const vSize = computeSize.value
+      const controlOpts = computeControlOpts.value
+      const { layout, showButton } = controlOpts
+      const isDisabled = computeIsDisabled.value
+      const formReadonly = computeFormReadonly.value
+      const numLabel = computeNumLabel.value
+      const prefixSlot = slots.prefix
+      const suffixSlot = slots.suffix
+      if (formReadonly) {
+        return h('div', {
+          ref: refElem,
+          class: ['vxe-number-input--readonly', `type--${type}`, className]
+        }, numLabel)
+      }
+      const inputReadonly = computeInputReadonly.value
+      const isClearable = computeIsClearable.value
+      const isControls = isEnableConf(controlOpts) && (controls === false ? controls : showButton)
+      return h('div', {
+        ref: refElem,
+        class: ['vxe-number-input', `type--${type}`, `control-${layout === 'right' || layout === 'left' ? layout : 'default'}`, className, {
+          [`size--${vSize}`]: vSize,
+          [`is--${align}`]: align,
+          'is--controls': isControls && !inputReadonly,
+          'is--prefix': !!prefixSlot || prefixIcon,
+          'is--suffix': !!suffixSlot || suffixIcon,
+          'is--disabled': isDisabled,
+          'is--active': isActivated,
+          'show--clear': isClearable && !isDisabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
+        }],
+        spellcheck: false
+      }, isControls
+        ? (layout === 'right'
+            ? [
+                renderInput(),
+                renderSideControl()
+              ]
+            : (layout === 'left'
+                ? [
+                    renderSideControl(),
+                    renderInput()
+                  ]
+                : [
+                    renderMinusBtn(),
+                    renderInput(),
+                    renderPlusBtn()
+                  ]))
+        : [
+            renderInput()
+          ])
+    }
+
     $xeNumberInput.renderVN = renderVN
 
     watch(() => props.modelValue, (val) => {
@@ -939,7 +1026,7 @@ export default defineComponent({
 
     onBeforeUnmount(() => {
       reactData.isFocus = false
-      numberStopDown()
+      numberStopAll()
       afterCheckValue()
       globalEvents.off($xeNumberInput, 'mousedown')
       globalEvents.off($xeNumberInput, 'keydown')

package/packages/ui/index.ts

@@ -231,7 +231,12 @@ setConfig({
     // transfer: false
     digits: 2,
     autoFill: true,
-    controls: true
+    controlConfig: {
+      enabled: true,
+      // layout: 'default',
+      showButton: true,
+      isWheel: true
+    }
   },
   optgroup: {},
   option: {},
@@ -414,10 +419,12 @@ setIcon({
   // input
   INPUT_CLEAR: iconPrefix + 'error-circle-fill',
   INPUT_SEARCH: iconPrefix + 'search',
+  INPUT_PLUS_NUM: iconPrefix + 'caret-up',
+  INPUT_MINUS_NUM: iconPrefix + 'caret-down',
 
   // number-picker
-  NUMBER_INPUT_PREV_NUM: iconPrefix + 'caret-up',
-  NUMBER_INPUT_NEXT_NUM: iconPrefix + 'caret-down',
+  NUMBER_INPUT_MINUS_NUM: iconPrefix + 'minus',
+  NUMBER_INPUT_PLUS_NUM: iconPrefix + 'add',
 
   // date-picker
   DATE_PICKER_DATE: iconPrefix + 'calendar',

package/packages/ui/src/dom.ts

@@ -51,7 +51,7 @@ export function isScale (val: any) {
 }
 
 export function hasClass (elem: any, cls: any) {
-  return elem && elem.className && elem.className.match && elem.className.match(getClsRE(cls))
+  return !!(elem && elem.className && elem.className.match && elem.className.match(getClsRE(cls)))
 }
 
 export function removeClass (elem: any, cls: any) {