vxe-pc-ui 4.5.31 → 4.5.33

package/lib/index.umd.js

@@ -4187,14 +4187,14 @@ function checkDynamic() {
 }
 ;// CONCATENATED MODULE: ./packages/ui/src/log.ts
 
-const log_version = `ui v${"4.5.31"}`;
+const log_version = `ui v${"4.5.33"}`;
 const warnLog = log.create('warn', log_version);
 const errLog = log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
 
-const ui_version = "4.5.31";
+const ui_version = "4.5.33";
 index_esm_VxeUI.uiVersion = ui_version;
 index_esm_VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -4415,7 +4415,12 @@ setConfig({
     // transfer: false
     digits: 2,
     autoFill: true,
-    controls: true
+    controlConfig: {
+      enabled: true,
+      // layout: 'default',
+      showButton: true,
+      isWheel: true
+    }
   },
   optgroup: {},
   option: {},
@@ -4587,9 +4592,11 @@ 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',
   // password-input
@@ -4912,7 +4919,7 @@ function isScale(val) {
   return val && /^\d+%$/.test(val);
 }
 function hasClass(elem, cls) {
-  return elem && elem.className && elem.className.match && elem.className.match(getClsRE(cls));
+  return !!(elem && elem.className && elem.className.match && elem.className.match(getClsRE(cls)));
 }
 function removeClass(elem, cls) {
   if (elem && hasClass(elem, cls)) {
@@ -12748,7 +12755,7 @@ function toFloatValueFixed(inputValue, digitsValue) {
         onMouseup: numberStopDown,
         onMouseleave: numberStopDown
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-        class: getIcon().NUMBER_INPUT_PREV_NUM
+        class: getIcon().INPUT_PLUS_NUM
       })]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: ['vxe-input--number-btn is--next', {
           'is--disabled': isDisabledSubtractNumber
@@ -12757,7 +12764,7 @@ function toFloatValueFixed(inputValue, digitsValue) {
         onMouseup: numberStopDown,
         onMouseleave: numberStopDown
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-        class: getIcon().NUMBER_INPUT_NEXT_NUM
+        class: getIcon().INPUT_MINUS_NUM
       })])])]);
     };
     const renderDatePickerIcon = () => {
@@ -29981,11 +29988,7 @@ const WidgetVxeNumberInputFormComponent = (0,external_commonjs_vue_commonjs2_vue
       type: String,
       default: () => getConfig().numberInput.currencySymbol
     },
-    // number、integer、float
-    controls: {
-      type: Boolean,
-      default: () => getConfig().numberInput.controls
-    },
+    controlConfig: Object,
     // float
     digits: {
       type: [String, Number],
@@ -29999,14 +30002,23 @@ const WidgetVxeNumberInputFormComponent = (0,external_commonjs_vue_commonjs2_vue
       type: Boolean,
       default: true
     },
+    plusIcon: String,
+    minusIcon: String,
     prefixIcon: String,
     suffixIcon: String,
     // 已废弃
+    controls: {
+      type: Boolean,
+      default: null
+    },
+    // 已废弃
     maxlength: [String, Number],
     // 已废弃
     autocomplete: String
   },
-  emits: ['update:modelValue', 'input', 'change', 'keydown', 'keyup', 'wheel', 'click', 'focus', 'blur', 'clear', 'prev-number', 'next-number', 'prefix-click', 'suffix-click'],
+  emits: ['update:modelValue', 'input', 'change', 'keydown', 'keyup', 'wheel', 'click', 'focus', 'blur', 'clear', 'plus-number', 'minus-number', 'prefix-click', 'suffix-click',
+  // 已废弃
+  'prev-number', 'next-number'],
   setup(props, context) {
     const {
       slots,
@@ -30025,24 +30037,13 @@ const WidgetVxeNumberInputFormComponent = (0,external_commonjs_vue_commonjs2_vue
     });
     const internalData = {
       // dnTimeout: undefined,
+      // ainTimeout: undefined,
+      // isMouseDown: undefined,
       // isUM: undefined
     };
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refInputTarget = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refInputPanel = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
-    const refMaps = {
-      refElem,
-      refInput: refInputTarget
-    };
-    const $xeNumberInput = {
-      xID,
-      props,
-      context,
-      reactData,
-      internalData,
-      getRefMaps: () => refMaps
-    };
-    let numberInputMethods = {};
     const computeFormReadonly = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
         readonly
@@ -30083,6 +30084,9 @@ const WidgetVxeNumberInputFormComponent = (0,external_commonjs_vue_commonjs2_vue
       }
       return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toInteger(defDigits) || 1;
     });
+    const computeControlOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, getConfig().numberInput.controlConfig, props.controlConfig);
+    });
     const computeDecimalsType = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
         type
@@ -30207,6 +30211,23 @@ const WidgetVxeNumberInputFormComponent = (0,external_commonjs_vue_commonjs2_vue
       }
       return false;
     });
+    const refMaps = {
+      refElem,
+      refInput: refInputTarget
+    };
+    const computeMaps = {
+      computeControlOpts
+    };
+    const $xeNumberInput = {
+      xID,
+      props,
+      context,
+      reactData,
+      internalData,
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    };
+    let numberInputMethods = {};
     const handleNumberString = val => {
       if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(val)) {
         return '';
@@ -30482,34 +30503,34 @@ const WidgetVxeNumberInputFormComponent = (0,external_commonjs_vue_commonjs2_vue
       }
       emitInputEvent(getNumberValue(restNum), evnt);
     };
-    const numberNextEvent = evnt => {
+    const numberPlusEvent = evnt => {
       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 => {
-      internalData.dnTimeout = setTimeout(() => {
-        numberNextEvent(evnt);
-        numberDownNextEvent(evnt);
-      }, 60);
-    };
-    const numberPrevEvent = evnt => {
+    const numberMinusEvent = evnt => {
       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);
@@ -30520,9 +30541,9 @@ const WidgetVxeNumberInputFormComponent = (0,external_commonjs_vue_commonjs2_vue
       if (isUpArrow || isDwArrow) {
         evnt.preventDefault();
         if (isUpArrow) {
-          numberPrevEvent(evnt);
+          numberMinusEvent(evnt);
         } else {
-          numberNextEvent(evnt);
+          numberPlusEvent(evnt);
         }
       }
     };
@@ -30532,6 +30553,10 @@ const WidgetVxeNumberInputFormComponent = (0,external_commonjs_vue_commonjs2_vue
         exponential,
         controls
       } = props;
+      const controlOpts = computeControlOpts.value;
+      const {
+        showButton
+      } = controlOpts;
       const inputReadonly = computeInputReadonly.value;
       const isControlKey = hasControlKey(evnt);
       const isShiftKey = evnt.shiftKey;
@@ -30548,7 +30573,7 @@ const WidgetVxeNumberInputFormComponent = (0,external_commonjs_vue_commonjs2_vue
       if (isEsc) {
         afterCheckValue();
       } else if (isUpArrow || isDwArrow) {
-        if (controls && !inputReadonly) {
+        if (isEnableConf(controlOpts) && (controls === false ? controls : showButton) && !inputReadonly) {
           numberKeydownEvent(evnt);
         }
       }
@@ -30558,7 +30583,7 @@ const WidgetVxeNumberInputFormComponent = (0,external_commonjs_vue_commonjs2_vue
       triggerEvent(evnt);
     };
     // 数值
-    const numberStopDown = () => {
+    const stopDown = () => {
       const {
         dnTimeout
       } = internalData;
@@ -30567,41 +30592,83 @@ const WidgetVxeNumberInputFormComponent = (0,external_commonjs_vue_commonjs2_vue
         internalData.dnTimeout = undefined;
       }
     };
-    const numberDownPrevEvent = evnt => {
-      internalData.dnTimeout = setTimeout(() => {
-        numberPrevEvent(evnt);
-        numberDownPrevEvent(evnt);
+    const stopAutoIncrement = () => {
+      const {
+        ainTimeout
+      } = internalData;
+      if (ainTimeout) {
+        clearTimeout(ainTimeout);
+        internalData.ainTimeout = undefined;
+      }
+    };
+    const numberDownMinusEvent = evnt => {
+      numberStopAll();
+      internalData.ainTimeout = setTimeout(() => {
+        numberMinusEvent(evnt);
+        numberDownMinusEvent(evnt);
       }, 60);
     };
+    const numberDownPlusEvent = evnt => {
+      numberStopAll();
+      internalData.ainTimeout = setTimeout(() => {
+        numberPlusEvent(evnt);
+        numberDownPlusEvent(evnt);
+      }, 60);
+    };
+    const numberStopAll = () => {
+      stopDown();
+      stopAutoIncrement();
+    };
+    const numberClickEvent = evnt => {
+      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 => {
-      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);
       }
     };
     const wheelEvent = evnt => {
+      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);
           }
         }
       }
@@ -30666,33 +30733,36 @@ const WidgetVxeNumberInputFormComponent = (0,external_commonjs_vue_commonjs2_vue
         afterCheckValue();
       }
     };
-    const renderNumberIcon = () => {
-      const isDisabledAddNumber = computeIsDisabledAddNumber.value;
-      const isDisabledSubtractNumber = computeIsDisabledSubtractNumber.value;
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-input--control-icon'
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-input--number-icon'
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: ['vxe-input--number-btn is--prev', {
-          'is--disabled': isDisabledAddNumber
-        }],
-        onMousedown: numberMousedownEvent,
-        onMouseup: numberStopDown,
-        onMouseleave: numberStopDown
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-        class: getIcon().NUMBER_INPUT_PREV_NUM
-      })]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: ['vxe-input--number-btn is--next', {
-          'is--disabled': isDisabledSubtractNumber
-        }],
-        onMousedown: numberMousedownEvent,
-        onMouseup: numberStopDown,
-        onMouseleave: numberStopDown
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-        class: getIcon().NUMBER_INPUT_NEXT_NUM
-      })])])]);
+    const dispatchEvent = (type, params, evnt) => {
+      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 (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      },
+      blur() {
+        const inputElem = refInputTarget.value;
+        inputElem.blur();
+        reactData.isActivated = false;
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      },
+      select() {
+        const inputElem = refInputTarget.value;
+        inputElem.select();
+        reactData.isActivated = false;
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      }
     };
+    Object.assign($xeNumberInput, numberInputMethods);
     const renderPrefixIcon = () => {
       const {
         prefixIcon
@@ -30705,7 +30775,7 @@ const WidgetVxeNumberInputFormComponent = (0,external_commonjs_vue_commonjs2_vue
         class: 'vxe-number-input--prefix-icon'
       }, prefixSlot ? getSlotVNs(prefixSlot({})) : [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
         class: prefixIcon
-      })])]) : null;
+      })])]) : renderEmptyElement($xeNumberInput);
     };
     const renderSuffixIcon = () => {
       const {
@@ -30726,72 +30796,121 @@ const WidgetVxeNumberInputFormComponent = (0,external_commonjs_vue_commonjs2_vue
         onClick: clearValueEvent
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
         class: getIcon().INPUT_CLEAR
-      })]) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), renderExtraSuffixIcon(), suffixSlot || suffixIcon ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      })]) : renderEmptyElement($xeNumberInput), suffixSlot || suffixIcon ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-number-input--suffix-icon',
         onClick: clickSuffixEvent
       }, suffixSlot ? getSlotVNs(suffixSlot({})) : [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
         class: suffixIcon
-      })]) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)()]);
+      })]) : renderEmptyElement($xeNumberInput)]);
     };
-    const renderExtraSuffixIcon = () => {
+    const renderInput = () => {
       const {
-        controls
+        type,
+        name,
+        autocomplete,
+        autoComplete
       } = props;
+      const {
+        inputValue,
+        isFocus
+      } = reactData;
+      const isDisabled = computeIsDisabled.value;
+      const numLabel = computeNumLabel.value;
       const inputReadonly = computeInputReadonly.value;
-      if (controls && !inputReadonly) {
-        return renderNumberIcon();
-      }
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)();
+      const inpMaxLength = computeInpMaxLength.value;
+      const inpPlaceholder = computeInpPlaceholder.value;
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        key: 'ni',
+        class: 'vxe-number-input--input-wrapper'
+      }, [renderPrefixIcon(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-number-input--input-inner'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('input', {
+        ref: refInputTarget,
+        class: 'vxe-number-input--input',
+        value: !isFocus && type === 'amount' ? numLabel : inputValue,
+        name,
+        type: 'text',
+        placeholder: inpPlaceholder,
+        maxlength: inpMaxLength,
+        readonly: inputReadonly,
+        disabled: isDisabled,
+        autocomplete: autoComplete || autocomplete,
+        onKeydown: keydownEvent,
+        onKeyup: keyupEvent,
+        onWheel: wheelEvent,
+        onClick: clickEvent,
+        onInput: inputEvent,
+        onChange: changeEvent,
+        onFocus: focusEvent,
+        onBlur: blurEvent
+      })]), renderSuffixIcon()]);
     };
-    const dispatchEvent = (type, params, evnt) => {
-      emit(type, createEvent(evnt, {
-        $numberInput: $xeNumberInput
-      }, params));
+    const renderMinusBtn = () => {
+      const {
+        minusIcon
+      } = props;
+      const isDisabledSubtractNumber = computeIsDisabledSubtractNumber.value;
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('button', {
+        key: 'prev',
+        class: ['vxe-number-input--minus-btn is--minus', {
+          'is--disabled': isDisabledSubtractNumber
+        }],
+        onClick: numberClickEvent,
+        onMousedown: numberMousedownEvent,
+        onMouseup: numberStopAll,
+        onMouseleave: numberStopAll
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+        class: minusIcon || getIcon().NUMBER_INPUT_MINUS_NUM
+      })]);
     };
-    numberInputMethods = {
-      dispatchEvent,
-      focus() {
-        const inputReadonly = computeInputReadonly.value;
-        if (!inputReadonly) {
-          const inputElem = refInputTarget.value;
-          reactData.isActivated = true;
-          inputElem.focus();
-        }
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
-      },
-      blur() {
-        const inputElem = refInputTarget.value;
-        inputElem.blur();
-        reactData.isActivated = false;
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
-      },
-      select() {
-        const inputElem = refInputTarget.value;
-        inputElem.select();
-        reactData.isActivated = false;
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
-      }
+    const renderPlusBtn = () => {
+      const {
+        plusIcon
+      } = props;
+      const isDisabledAddNumber = computeIsDisabledAddNumber.value;
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('button', {
+        key: 'next',
+        class: ['vxe-number-input--plus-btn is--plus', {
+          'is--disabled': isDisabledAddNumber
+        }],
+        onClick: numberClickEvent,
+        onMousedown: numberMousedownEvent,
+        onMouseup: numberStopAll,
+        onMouseleave: numberStopAll
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+        class: plusIcon || getIcon().NUMBER_INPUT_PLUS_NUM
+      })]);
+    };
+    const renderSideControl = () => {
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        key: 'cplr',
+        class: 'vxe-number-input--side-control'
+      }, [renderPlusBtn(), renderMinusBtn()]);
     };
-    Object.assign($xeNumberInput, numberInputMethods);
     const renderVN = () => {
       const {
         className,
         controls,
         type,
         align,
-        name,
-        autocomplete,
-        autoComplete
+        prefixIcon,
+        suffixIcon
       } = props;
       const {
         inputValue,
-        isFocus,
         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 (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
           ref: refElem,
@@ -30799,46 +30918,22 @@ const WidgetVxeNumberInputFormComponent = (0,external_commonjs_vue_commonjs2_vue
         }, numLabel);
       }
       const inputReadonly = computeInputReadonly.value;
-      const inpMaxLength = computeInpMaxLength.value;
-      const inpPlaceholder = computeInpPlaceholder.value;
       const isClearable = computeIsClearable.value;
-      const prefix = renderPrefixIcon();
-      const suffix = renderSuffixIcon();
+      const isControls = isEnableConf(controlOpts) && (controls === false ? controls : showButton);
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refElem,
-        class: ['vxe-number-input', `type--${type}`, className, {
+        class: ['vxe-number-input', `type--${type}`, `control-${layout === 'right' || layout === 'left' ? layout : 'default'}`, className, {
           [`size--${vSize}`]: vSize,
           [`is--${align}`]: align,
-          'is--controls': controls && !inputReadonly,
-          'is--prefix': !!prefix,
-          'is--suffix': !!suffix,
+          'is--controls': isControls && !inputReadonly,
+          'is--prefix': !!prefixSlot || prefixIcon,
+          'is--suffix': !!suffixSlot || suffixIcon,
           'is--disabled': isDisabled,
           'is--active': isActivated,
           'show--clear': isClearable && !isDisabled && !(inputValue === '' || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(inputValue))
         }],
         spellcheck: false
-      }, [prefix || (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-number-input--wrapper'
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('input', {
-        ref: refInputTarget,
-        class: 'vxe-number-input--inner',
-        value: !isFocus && type === 'amount' ? numLabel : inputValue,
-        name,
-        type: 'text',
-        placeholder: inpPlaceholder,
-        maxlength: inpMaxLength,
-        readonly: inputReadonly,
-        disabled: isDisabled,
-        autocomplete: autoComplete || autocomplete,
-        onKeydown: keydownEvent,
-        onKeyup: keyupEvent,
-        onWheel: wheelEvent,
-        onClick: clickEvent,
-        onInput: inputEvent,
-        onChange: changeEvent,
-        onFocus: focusEvent,
-        onBlur: blurEvent
-      })]), suffix || (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)()]);
+      }, isControls ? layout === 'right' ? [renderInput(), renderSideControl()] : layout === 'left' ? [renderSideControl(), renderInput()] : [renderMinusBtn(), renderInput(), renderPlusBtn()] : [renderInput()]);
     };
     $xeNumberInput.renderVN = renderVN;
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, val => {
@@ -30861,7 +30956,7 @@ const WidgetVxeNumberInputFormComponent = (0,external_commonjs_vue_commonjs2_vue
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
       reactData.isFocus = false;
-      numberStopDown();
+      numberStopAll();
       afterCheckValue();
       globalEvents.off($xeNumberInput, 'mousedown');
       globalEvents.off($xeNumberInput, 'keydown');