vxe-pc-ui 4.5.31 → 4.5.33

package/es/number-input/src/number-input.js

@@ -1,7 +1,7 @@
-import { defineComponent, h, ref, computed, reactive, inject, nextTick, watch, onMounted, createCommentVNode, onBeforeUnmount } from 'vue';
+import { defineComponent, h, ref, computed, reactive, inject, nextTick, watch, onMounted, onBeforeUnmount } 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';
@@ -68,11 +68,7 @@ export default defineComponent({
             type: String,
             default: () => getConfig().numberInput.currencySymbol
         },
-        // number、integer、float
-        controls: {
-            type: Boolean,
-            default: () => getConfig().numberInput.controls
-        },
+        controlConfig: Object,
         // float
         digits: {
             type: [String, Number],
@@ -86,9 +82,16 @@ export default defineComponent({
             type: Boolean,
             default: true
         },
+        plusIcon: String,
+        minusIcon: String,
         prefixIcon: String,
         suffixIcon: String,
         // 已废弃
+        controls: {
+            type: Boolean,
+            default: null
+        },
+        // 已废弃
         maxlength: [String, Number],
         // 已废弃
         autocomplete: String
@@ -104,10 +107,13 @@ export default defineComponent({
         'focus',
         'blur',
         'clear',
-        'prev-number',
-        'next-number',
+        'plus-number',
+        'minus-number',
         'prefix-click',
-        'suffix-click'
+        'suffix-click',
+        // 已废弃
+        'prev-number',
+        'next-number'
     ],
     setup(props, context) {
         const { slots, emit } = context;
@@ -122,24 +128,13 @@ export default defineComponent({
         });
         const internalData = {
         // dnTimeout: undefined,
+        // ainTimeout: undefined,
+        // isMouseDown: undefined,
         // isUM: undefined
         };
         const refElem = ref();
         const refInputTarget = ref();
         const refInputPanel = ref();
-        const refMaps = {
-            refElem,
-            refInput: refInputTarget
-        };
-        const $xeNumberInput = {
-            xID,
-            props,
-            context,
-            reactData,
-            internalData,
-            getRefMaps: () => refMaps
-        };
-        let numberInputMethods = {};
         const computeFormReadonly = computed(() => {
             const { readonly } = props;
             if (readonly === null) {
@@ -173,6 +168,9 @@ 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';
@@ -264,6 +262,23 @@ export default defineComponent({
             }
             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 (XEUtils.eqNull(val)) {
                 return '';
@@ -490,32 +505,28 @@ export default defineComponent({
             }
             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);
         };
         const numberKeydownEvent = (evnt) => {
@@ -524,15 +535,17 @@ export default defineComponent({
             if (isUpArrow || isDwArrow) {
                 evnt.preventDefault();
                 if (isUpArrow) {
-                    numberPrevEvent(evnt);
+                    numberMinusEvent(evnt);
                 }
                 else {
-                    numberNextEvent(evnt);
+                    numberPlusEvent(evnt);
                 }
             }
         };
         const keydownEvent = (evnt) => {
             const { type, exponential, controls } = props;
+            const controlOpts = computeControlOpts.value;
+            const { showButton } = controlOpts;
             const inputReadonly = computeInputReadonly.value;
             const isControlKey = hasControlKey(evnt);
             const isShiftKey = evnt.shiftKey;
@@ -550,7 +563,7 @@ export default defineComponent({
                 afterCheckValue();
             }
             else if (isUpArrow || isDwArrow) {
-                if (controls && !inputReadonly) {
+                if (isEnableConf(controlOpts) && (controls === false ? controls : showButton) && !inputReadonly) {
                     numberKeydownEvent(evnt);
                 }
             }
@@ -560,51 +573,89 @@ export default defineComponent({
             triggerEvent(evnt);
         };
         // 数值
-        const numberStopDown = () => {
+        const stopDown = () => {
             const { dnTimeout } = internalData;
             if (dnTimeout) {
                 clearTimeout(dnTimeout);
                 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);
                     }
                 }
             }
@@ -661,42 +712,34 @@ export default defineComponent({
                 afterCheckValue();
             }
         };
-        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, 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 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;
@@ -715,7 +758,7 @@ export default defineComponent({
                             })
                         ])
                 ])
-                : null;
+                : renderEmptyElement($xeNumberInput);
         };
         const renderSuffixIcon = () => {
             const { suffixIcon } = props;
@@ -737,8 +780,7 @@ export default defineComponent({
                             class: getIcon().INPUT_CLEAR
                         })
                     ])
-                    : createCommentVNode(),
-                renderExtraSuffixIcon(),
+                    : renderEmptyElement($xeNumberInput),
                 suffixSlot || suffixIcon
                     ? h('div', {
                         class: 'vxe-number-input--suffix-icon',
@@ -750,85 +792,28 @@ 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, 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 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',
@@ -847,9 +832,107 @@ 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) => {
             if (!internalData.isUM) {
@@ -871,7 +954,7 @@ export default defineComponent({
         });
         onBeforeUnmount(() => {
             reactData.isFocus = false;
-            numberStopDown();
+            numberStopAll();
             afterCheckValue();
             globalEvents.off($xeNumberInput, 'mousedown');
             globalEvents.off($xeNumberInput, 'keydown');