vxe-pc-ui 4.1.19 → 4.1.21

package/es/list/src/list.js

@@ -30,10 +30,8 @@ export default defineComponent({
             topSpaceHeight: 0,
             items: []
         });
-        const refElem = ref();
-        const refVirtualWrapper = ref();
-        const refVirtualBody = ref();
         const internalData = {
+            resizeObserver: undefined,
             fullData: [],
             lastScrollLeft: 0,
             lastScrollTop: 0,
@@ -45,6 +43,9 @@ export default defineComponent({
                 rowHeight: 0
             }
         };
+        const refElem = ref();
+        const refVirtualWrapper = ref();
+        const refVirtualBody = ref();
         const refMaps = {
             refElem
         };
@@ -269,19 +270,20 @@ export default defineComponent({
         onActivated(() => {
             recalculate().then(() => refreshScroll());
         });
-        let resizeObserver;
         nextTick(() => {
             globalEvents.on($xeList, 'resize', () => {
                 recalculate();
             });
             if (props.autoResize) {
                 const el = refElem.value;
-                resizeObserver = globalResize.create(() => recalculate());
+                const resizeObserver = globalResize.create(() => recalculate());
                 resizeObserver.observe(el);
+                internalData.resizeObserver = resizeObserver;
             }
             listMethods.loadData(props.data || []);
         });
         onUnmounted(() => {
+            const { resizeObserver } = internalData;
             if (resizeObserver) {
                 resizeObserver.disconnect();
             }

package/es/list-design/src/list-design.js

@@ -296,7 +296,6 @@ export default defineComponent({
                 ])
             ]);
         };
-        $xeListDesign.renderVN = renderVN;
         provide('$xeListDesign', $xeListDesign);
         watch(() => props.config, (value) => {
             loadConfig(value || {});
@@ -305,6 +304,7 @@ export default defineComponent({
         if (props.config) {
             loadConfig(props.config);
         }
+        $xeListDesign.renderVN = renderVN;
         return $xeListDesign;
     },
     render() {

package/es/list-design/src/list-view.js

@@ -414,7 +414,6 @@ export default defineComponent({
                 })
             ]);
         };
-        $xeListView.renderVN = renderVN;
         watch(() => props.config, (value) => {
             loadConfig(value || {});
         });
@@ -429,6 +428,7 @@ export default defineComponent({
                 }
             });
         }
+        $xeListView.renderVN = renderVN;
         return $xeListView;
     },
     render() {

package/es/loading/src/loading.js

@@ -114,11 +114,14 @@ export default defineComponent({
                     ])
                 ]);
         };
-        $xeLoading.renderVN = renderVN;
         watch(() => props.modelValue, () => {
             handleInit();
         });
         handleInit();
+        $xeLoading.renderVN = renderVN;
         return $xeLoading;
+    },
+    render() {
+        return this.renderVN();
     }
 });

package/es/menu/src/menu.js

@@ -128,8 +128,9 @@ export default defineComponent({
         const handleClickMenu = (evnt, item) => {
             const { routerLink, hasChild } = item;
             if (routerLink) {
-                reactData.activeName = item.itemKey;
-                emit('update:modelValue', item.itemKey);
+                const value = item.itemKey;
+                reactData.activeName = value;
+                emit('update:modelValue', value);
             }
             else {
                 if (hasChild) {
@@ -245,7 +246,6 @@ export default defineComponent({
                 })
             ]);
         };
-        $xeMenu.renderVN = renderVN;
         const optFlag = ref(0);
         watch(() => props.options ? props.options.length : -1, () => {
             optFlag.value++;
@@ -270,6 +270,7 @@ export default defineComponent({
         });
         updateMenuConfig();
         updateActiveMenu(true);
+        $xeMenu.renderVN = renderVN;
         return $xeMenu;
     },
     render() {

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

@@ -9,10 +9,19 @@ export default defineComponent({
     name: 'VxeNumberInput',
     props: {
         modelValue: [String, Number],
-        immediate: { type: Boolean, default: true },
+        immediate: {
+            type: Boolean,
+            default: true
+        },
         name: String,
-        type: { type: String, default: 'number' },
-        clearable: { type: Boolean, default: () => getConfig().numberInput.clearable },
+        type: {
+            type: String,
+            default: 'number'
+        },
+        clearable: {
+            type: Boolean,
+            default: () => getConfig().numberInput.clearable
+        },
         readonly: {
             type: Boolean,
             default: null
@@ -30,17 +39,35 @@ export default defineComponent({
         align: String,
         form: String,
         className: String,
-        size: { type: String, default: () => getConfig().numberInput.size || getConfig().size },
+        size: {
+            type: String,
+            default: () => getConfig().numberInput.size || getConfig().size
+        },
         multiple: Boolean,
         // number、integer、float
-        min: { type: [String, Number], default: null },
-        max: { type: [String, Number], default: null },
+        min: {
+            type: [String, Number],
+            default: null
+        },
+        max: {
+            type: [String, Number],
+            default: null
+        },
         step: [String, Number],
-        exponential: { type: Boolean, default: () => getConfig().numberInput.exponential },
+        exponential: {
+            type: Boolean,
+            default: () => getConfig().numberInput.exponential
+        },
         // number、integer、float
-        controls: { type: Boolean, default: () => getConfig().numberInput.controls },
+        controls: {
+            type: Boolean,
+            default: () => getConfig().numberInput.controls
+        },
         // float
-        digits: { type: [String, Number], default: () => getConfig().numberInput.digits },
+        digits: {
+            type: [String, Number],
+            default: () => getConfig().numberInput.digits
+        },
         prefixIcon: String,
         suffixIcon: String,
         // 已废弃
@@ -74,6 +101,9 @@ export default defineComponent({
             isActivated: false,
             inputValue: props.modelValue
         });
+        const internalData = {
+            dnTimeout: undefined
+        };
         const refElem = ref();
         const refInputTarget = ref();
         const refInputPanel = ref();
@@ -86,9 +116,10 @@ export default defineComponent({
             props,
             context,
             reactData,
+            internalData,
             getRefMaps: () => refMaps
         };
-        let inputMethods = {};
+        let numberInputMethods = {};
         const computeFormReadonly = computed(() => {
             const { readonly } = props;
             if (readonly === null) {
@@ -109,9 +140,6 @@ export default defineComponent({
             }
             return disabled;
         });
-        const computeIsNumType = computed(() => {
-            return true;
-        });
         const computeDigitsValue = computed(() => {
             return XEUtils.toInteger(props.digits) || 1;
         });
@@ -146,7 +174,7 @@ export default defineComponent({
             }
             return getI18n('vxe.base.pleaseInput');
         });
-        const computeInpMaxlength = computed(() => {
+        const computeInpMaxLength = computed(() => {
             const { maxLength, maxlength } = props;
             // 数值最大长度限制 16 位，包含小数
             return XEUtils.toNumber(maxLength || maxlength) || 16;
@@ -158,11 +186,7 @@ export default defineComponent({
         const computeNumValue = computed(() => {
             const { type } = props;
             const { inputValue } = reactData;
-            const isNumType = computeIsNumType.value;
-            if (isNumType) {
-                return type === 'integer' ? XEUtils.toInteger(handleNumber(inputValue)) : XEUtils.toNumber(handleNumber(inputValue));
-            }
-            return 0;
+            return type === 'integer' ? XEUtils.toInteger(handleNumber(inputValue)) : XEUtils.toNumber(handleNumber(inputValue));
         });
         const computeNumLabel = computed(() => {
             const { inputValue } = reactData;
@@ -171,10 +195,9 @@ export default defineComponent({
         const computeIsDisabledSubtractNumber = computed(() => {
             const { min } = props;
             const { inputValue } = reactData;
-            const isNumType = computeIsNumType.value;
             const numValue = computeNumValue.value;
             // 当有值时再进行判断
-            if ((inputValue || inputValue === 0) && isNumType && min !== null) {
+            if ((inputValue || inputValue === 0) && min !== null) {
                 return numValue <= XEUtils.toNumber(min);
             }
             return false;
@@ -182,37 +205,37 @@ export default defineComponent({
         const computeIsDisabledAddNumber = computed(() => {
             const { max } = props;
             const { inputValue } = reactData;
-            const isNumType = computeIsNumType.value;
             const numValue = computeNumValue.value;
             // 当有值时再进行判断
-            if ((inputValue || inputValue === 0) && isNumType && max !== null) {
+            if ((inputValue || inputValue === 0) && max !== null) {
                 return numValue >= XEUtils.toNumber(max);
             }
             return false;
         });
         const getNumberValue = (val) => {
             const { type, exponential } = props;
-            const inpMaxlength = computeInpMaxlength.value;
+            const inpMaxLength = computeInpMaxLength.value;
             const digitsValue = computeDigitsValue.value;
             const restVal = (type === 'float' ? toFloatValueFixed(val, digitsValue) : XEUtils.toValueString(val));
             if (exponential && (val === restVal || XEUtils.toValueString(val).toLowerCase() === XEUtils.toNumber(restVal).toExponential())) {
                 return val;
             }
-            return restVal.slice(0, inpMaxlength);
+            return restVal.slice(0, inpMaxLength);
         };
         const triggerEvent = (evnt) => {
             const { inputValue } = reactData;
-            inputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt);
+            numberInputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt);
         };
-        const emitModel = (value, inputValue, evnt) => {
+        const handleChange = (val, inputValue, evnt) => {
+            const value = val ? Number(val) : null;
             const isChange = Number(value) !== props.modelValue;
             if (isChange) {
                 reactData.inputValue = inputValue || '';
-                emit('update:modelValue', value ? Number(value) : null);
+                emit('update:modelValue', value);
             }
-            inputMethods.dispatchEvent('input', { value }, evnt);
+            numberInputMethods.dispatchEvent('input', { value }, evnt);
             if (isChange) {
-                inputMethods.dispatchEvent('change', { value }, evnt);
+                numberInputMethods.dispatchEvent('change', { value }, evnt);
                 // 自动更新校验状态
                 if ($xeForm && formItemInfo) {
                     $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
@@ -224,10 +247,10 @@ export default defineComponent({
             const value = inputValue ? XEUtils.toNumber(inputValue) : null;
             reactData.inputValue = inputValue;
             if (inpImmediate) {
-                emitModel(value, inputValue, evnt);
+                handleChange(value, inputValue, evnt);
             }
             else {
-                inputMethods.dispatchEvent('input', { value }, evnt);
+                numberInputMethods.dispatchEvent('input', { value }, evnt);
             }
         };
         const inputEvent = (evnt) => {
@@ -249,19 +272,19 @@ export default defineComponent({
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled) {
                 const { inputValue } = reactData;
-                inputMethods.dispatchEvent('prefix-click', { value: inputValue }, evnt);
+                numberInputMethods.dispatchEvent('prefix-click', { value: inputValue }, evnt);
             }
         };
         const clearValueEvent = (evnt, value) => {
             focus();
-            emitModel(null, '', evnt);
-            inputMethods.dispatchEvent('clear', { value }, evnt);
+            handleChange(null, '', evnt);
+            numberInputMethods.dispatchEvent('clear', { value }, evnt);
         };
         const clickSuffixEvent = (evnt) => {
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled) {
                 const { inputValue } = reactData;
-                inputMethods.dispatchEvent('suffix-click', { value: inputValue }, evnt);
+                numberInputMethods.dispatchEvent('suffix-click', { value: inputValue }, evnt);
             }
         };
         /**
@@ -280,7 +303,7 @@ export default defineComponent({
                         validValue = Number(textValue);
                     }
                     if (inputValue !== validValue) {
-                        emitModel(validValue, textValue, { type: 'init' });
+                        handleChange(validValue, textValue, { type: 'init' });
                     }
                 }
             }
@@ -311,7 +334,7 @@ export default defineComponent({
                         }
                     }
                     const inpValue = getNumberValue(inpNumVal);
-                    emitModel(inpValue === null ? null : Number(inpValue), inpValue, { type: 'check' });
+                    handleChange(inpValue === null ? null : Number(inpValue), inpValue, { type: 'check' });
                 }
             }
         };
@@ -320,11 +343,11 @@ export default defineComponent({
             const inpImmediate = computeInpImmediate.value;
             const value = inputValue ? Number(inputValue) : null;
             if (!inpImmediate) {
-                emitModel(value, `${inputValue || ''}`, evnt);
+                handleChange(value, `${inputValue || ''}`, evnt);
             }
             afterCheckValue();
             reactData.isActivated = false;
-            inputMethods.dispatchEvent('blur', { value }, evnt);
+            numberInputMethods.dispatchEvent('blur', { value }, evnt);
         };
         // 数值
         const numberChange = (isPlus, evnt) => {
@@ -345,19 +368,18 @@ export default defineComponent({
             }
             emitInputEvent(getNumberValue(restNum), evnt);
         };
-        let downbumTimeout;
         const numberNextEvent = (evnt) => {
             const isDisabled = computeIsDisabled.value;
             const formReadonly = computeFormReadonly.value;
             const isDisabledSubtractNumber = computeIsDisabledSubtractNumber.value;
-            clearTimeout(downbumTimeout);
+            numberStopDown();
             if (!isDisabled && !formReadonly && !isDisabledSubtractNumber) {
                 numberChange(false, evnt);
             }
-            inputMethods.dispatchEvent('next-number', {}, evnt);
+            numberInputMethods.dispatchEvent('next-number', {}, evnt);
         };
         const numberDownNextEvent = (evnt) => {
-            downbumTimeout = window.setTimeout(() => {
+            internalData.dnTimeout = window.setTimeout(() => {
                 numberNextEvent(evnt);
                 numberDownNextEvent(evnt);
             }, 60);
@@ -366,11 +388,11 @@ export default defineComponent({
             const isDisabled = computeIsDisabled.value;
             const formReadonly = computeFormReadonly.value;
             const isDisabledAddNumber = computeIsDisabledAddNumber.value;
-            clearTimeout(downbumTimeout);
+            numberStopDown();
             if (!isDisabled && !formReadonly && !isDisabledAddNumber) {
                 numberChange(true, evnt);
             }
-            inputMethods.dispatchEvent('prev-number', {}, evnt);
+            numberInputMethods.dispatchEvent('prev-number', {}, evnt);
         };
         const numberKeydownEvent = (evnt) => {
             const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
@@ -387,25 +409,22 @@ export default defineComponent({
         };
         const keydownEvent = (evnt) => {
             const { exponential, controls } = props;
-            const isNumType = computeIsNumType.value;
-            if (isNumType) {
-                const isCtrlKey = evnt.ctrlKey;
-                const isShiftKey = evnt.shiftKey;
-                const isAltKey = evnt.altKey;
-                const keyCode = evnt.keyCode;
-                const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
-                const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
-                const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
-                if (!isCtrlKey && !isShiftKey && !isAltKey && (globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.SPACEBAR) || ((!exponential || keyCode !== 69) && (keyCode >= 65 && keyCode <= 90)) || (keyCode >= 186 && keyCode <= 188) || keyCode >= 191)) {
-                    evnt.preventDefault();
-                }
-                if (isEsc) {
-                    afterCheckValue();
-                }
-                else if (isUpArrow || isDwArrow) {
-                    if (controls) {
-                        numberKeydownEvent(evnt);
-                    }
+            const isCtrlKey = evnt.ctrlKey;
+            const isShiftKey = evnt.shiftKey;
+            const isAltKey = evnt.altKey;
+            const keyCode = evnt.keyCode;
+            const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
+            const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
+            const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
+            if (!isCtrlKey && !isShiftKey && !isAltKey && (globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.SPACEBAR) || ((!exponential || keyCode !== 69) && (keyCode >= 65 && keyCode <= 90)) || (keyCode >= 186 && keyCode <= 188) || keyCode >= 191)) {
+                evnt.preventDefault();
+            }
+            if (isEsc) {
+                afterCheckValue();
+            }
+            else if (isUpArrow || isDwArrow) {
+                if (controls) {
+                    numberKeydownEvent(evnt);
                 }
             }
             triggerEvent(evnt);
@@ -415,10 +434,14 @@ export default defineComponent({
         };
         // 数值
         const numberStopDown = () => {
-            clearTimeout(downbumTimeout);
+            const { dnTimeout } = internalData;
+            if (dnTimeout) {
+                clearTimeout(dnTimeout);
+                internalData.dnTimeout = undefined;
+            }
         };
         const numberDownPrevEvent = (evnt) => {
-            downbumTimeout = window.setTimeout(() => {
+            internalData.dnTimeout = window.setTimeout(() => {
                 numberPrevEvent(evnt);
                 numberDownPrevEvent(evnt);
             }, 60);
@@ -433,7 +456,7 @@ export default defineComponent({
                 else {
                     numberNextEvent(evnt);
                 }
-                downbumTimeout = window.setTimeout(() => {
+                internalData.dnTimeout = window.setTimeout(() => {
                     if (isPrevNumber) {
                         numberDownPrevEvent(evnt);
                     }
@@ -444,8 +467,7 @@ export default defineComponent({
             }
         };
         const wheelEvent = (evnt) => {
-            const isNumType = computeIsNumType.value;
-            if (isNumType && props.controls) {
+            if (props.controls) {
                 if (reactData.isActivated) {
                     const delta = evnt.deltaY;
                     if (delta > 0) {
@@ -601,10 +623,11 @@ export default defineComponent({
             }
             return createCommentVNode();
         };
-        inputMethods = {
-            dispatchEvent(type, params, evnt) {
-                emit(type, createEvent(evnt, { $input: $xeNumberInput }, params));
-            },
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $numberInput: $xeNumberInput }, params));
+        };
+        numberInputMethods = {
+            dispatchEvent,
             focus() {
                 const inputElem = refInputTarget.value;
                 reactData.isActivated = true;
@@ -624,7 +647,7 @@ export default defineComponent({
                 return nextTick();
             }
         };
-        Object.assign($xeNumberInput, inputMethods);
+        Object.assign($xeNumberInput, numberInputMethods);
         const renderVN = () => {
             const { className, controls, type, align, name, autocomplete, autoComplete } = props;
             const { inputValue, isActivated } = reactData;
@@ -639,7 +662,7 @@ export default defineComponent({
                 }, numLabel);
             }
             const inputReadonly = computeInputReadonly.value;
-            const inpMaxlength = computeInpMaxlength.value;
+            const inpMaxLength = computeInpMaxLength.value;
             const inpPlaceholder = computeInpPlaceholder.value;
             const isClearable = computeIsClearable.value;
             const prefix = renderPrefixIcon();
@@ -669,7 +692,7 @@ export default defineComponent({
                         name,
                         type: 'text',
                         placeholder: inpPlaceholder,
-                        maxlength: inpMaxlength,
+                        maxlength: inpMaxLength,
                         readonly: inputReadonly,
                         disabled: isDisabled,
                         autocomplete: autoComplete || autocomplete,