vxe-pc-ui 4.1.20 → 4.1.21

package/es/input/src/input.js

@@ -10,10 +10,19 @@ export default defineComponent({
     name: 'VxeInput',
     props: {
         modelValue: [String, Number, Date],
-        immediate: { type: Boolean, default: true },
+        immediate: {
+            type: Boolean,
+            default: true
+        },
         name: String,
-        type: { type: String, default: 'text' },
-        clearable: { type: Boolean, default: () => getConfig().input.clearable },
+        type: {
+            type: String,
+            default: 'text'
+        },
+        clearable: {
+            type: Boolean,
+            default: () => getConfig().input.clearable
+        },
         readonly: {
             type: Boolean,
             default: null
@@ -24,39 +33,81 @@ export default defineComponent({
         },
         placeholder: String,
         maxLength: [String, Number],
-        autoComplete: { type: String, default: 'off' },
+        autoComplete: {
+            type: String,
+            default: 'off'
+        },
         align: String,
         form: String,
         className: String,
-        size: { type: String, default: () => getConfig().input.size || getConfig().size },
+        size: {
+            type: String,
+            default: () => getConfig().input.size || getConfig().size
+        },
         multiple: Boolean,
         // text
         showWordCount: Boolean,
         countMethod: Function,
         // 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().input.exponential },
+        exponential: {
+            type: Boolean,
+            default: () => getConfig().input.exponential
+        },
         // number、integer、float、password
-        controls: { type: Boolean, default: () => getConfig().input.controls },
+        controls: {
+            type: Boolean,
+            default: () => getConfig().input.controls
+        },
         // float
-        digits: { type: [String, Number], default: () => getConfig().input.digits },
+        digits: {
+            type: [String, Number],
+            default: () => getConfig().input.digits
+        },
         // date、week、month、quarter、year
-        startDate: { type: [String, Number, Date], default: () => getConfig().input.startDate },
-        endDate: { type: [String, Number, Date], default: () => getConfig().input.endDate },
+        startDate: {
+            type: [String, Number, Date],
+            default: () => getConfig().input.startDate
+        },
+        endDate: {
+            type: [String, Number, Date],
+            default: () => getConfig().input.endDate
+        },
         minDate: [String, Number, Date],
         maxDate: [String, Number, Date],
         // 已废弃 startWeek，被 startDay 替换
         startWeek: Number,
-        startDay: { type: [String, Number], default: () => getConfig().input.startDay },
+        startDay: {
+            type: [String, Number],
+            default: () => getConfig().input.startDay
+        },
         labelFormat: String,
         valueFormat: String,
-        editable: { type: Boolean, default: true },
-        festivalMethod: { type: Function, default: () => getConfig().input.festivalMethod },
-        disabledMethod: { type: Function, default: () => getConfig().input.disabledMethod },
+        editable: {
+            type: Boolean,
+            default: true
+        },
+        festivalMethod: {
+            type: Function,
+            default: () => getConfig().input.festivalMethod
+        },
+        disabledMethod: {
+            type: Function,
+            default: () => getConfig().input.disabledMethod
+        },
         // week
-        selectDay: { type: [String, Number], default: () => getConfig().input.selectDay },
+        selectDay: {
+            type: [String, Number],
+            default: () => getConfig().input.selectDay
+        },
         prefixIcon: String,
         suffixIcon: String,
         placement: String,
@@ -99,16 +150,13 @@ export default defineComponent({
         const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const yearSize = 12;
-        const monthSize = 20;
-        const quarterSize = 8;
         const reactData = reactive({
             initialized: false,
             panelIndex: 0,
             showPwd: false,
             visiblePanel: false,
             isAniVisible: false,
-            panelStyle: null,
+            panelStyle: {},
             panelPlacement: '',
             isActivated: false,
             inputValue: props.modelValue,
@@ -119,6 +167,13 @@ export default defineComponent({
             selectMonth: null,
             currentDate: null
         });
+        const internalData = {
+            yearSize: 12,
+            monthSize: 20,
+            quarterSize: 8,
+            hpTimeout: undefined,
+            dnTimeout: undefined
+        };
         const refElem = ref();
         const refInputTarget = ref();
         const refInputPanel = ref();
@@ -133,6 +188,7 @@ export default defineComponent({
             props,
             context,
             reactData,
+            internalData,
             getRefMaps: () => refMaps
         };
         let inputMethods = {};
@@ -325,10 +381,11 @@ export default defineComponent({
             if (isDatePickerType) {
                 return labelFormat || dateValueFormat || getI18n(`vxe.input.date.labelFormat.${props.type}`);
             }
-            return null;
+            return '';
         });
         const computeYearList = computed(() => {
             const { selectMonth, currentDate } = reactData;
+            const { yearSize } = internalData;
             const years = [];
             if (selectMonth && currentDate) {
                 const currFullYear = currentDate.getFullYear();
@@ -422,6 +479,7 @@ export default defineComponent({
         });
         const computeQuarterList = computed(() => {
             const { selectMonth, currentDate } = reactData;
+            const { quarterSize } = internalData;
             const quarters = [];
             if (selectMonth && currentDate) {
                 const currFullYear = currentDate.getFullYear();
@@ -451,6 +509,7 @@ export default defineComponent({
         });
         const computeMonthList = computed(() => {
             const { selectMonth, currentDate } = reactData;
+            const { monthSize } = internalData;
             const months = [];
             if (selectMonth && currentDate) {
                 const currFullYear = currentDate.getFullYear();
@@ -595,12 +654,6 @@ export default defineComponent({
             }
             return getI18n('vxe.base.pleaseInput');
         });
-        const computeInpMaxlength = computed(() => {
-            const isNumType = computeIsNumType.value;
-            const inpMaxLength = computeInpMaxLength.value;
-            // 数值最大长度限制 16 位，包含小数
-            return isNumType && !XEUtils.toNumber(inpMaxLength) ? 16 : inpMaxLength;
-        });
         const computeInpImmediate = computed(() => {
             const { type, immediate } = props;
             return immediate || !(type === 'text' || type === 'number' || type === 'integer' || type === 'float');
@@ -638,19 +691,19 @@ export default defineComponent({
         });
         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);
         };
-        const emitModel = (value, evnt) => {
+        const handleChange = (value, evnt) => {
             reactData.inputValue = value;
             emit('update:modelValue', value);
             inputMethods.dispatchEvent('input', { value }, evnt);
@@ -668,7 +721,7 @@ export default defineComponent({
             reactData.inputValue = value;
             if (!isDatePickerType) {
                 if (inpImmediate) {
-                    emitModel(value, evnt);
+                    handleChange(value, evnt);
                 }
                 else {
                     inputMethods.dispatchEvent('input', { value }, evnt);
@@ -701,11 +754,10 @@ export default defineComponent({
                 inputMethods.dispatchEvent('prefix-click', { value: inputValue }, evnt);
             }
         };
-        let hidePanelTimeout;
         const hidePanel = () => {
             return new Promise(resolve => {
                 reactData.visiblePanel = false;
-                hidePanelTimeout = window.setTimeout(() => {
+                internalData.hpTimeout = window.setTimeout(() => {
                     reactData.isAniVisible = false;
                     resolve();
                 }, 350);
@@ -721,7 +773,7 @@ export default defineComponent({
             if (isNumType || ['text', 'search', 'password'].indexOf(type) > -1) {
                 focus();
             }
-            emitModel('', evnt);
+            handleChange('', evnt);
             inputMethods.dispatchEvent('clear', { value }, evnt);
         };
         const clickSuffixEvent = (evnt) => {
@@ -789,7 +841,7 @@ export default defineComponent({
                 if (inputValue) {
                     const validValue = toFloatValueFixed(inputValue, digitsValue);
                     if (inputValue !== validValue) {
-                        emitModel(validValue, { type: 'init' });
+                        handleChange(validValue, { type: 'init' });
                     }
                 }
             }
@@ -848,22 +900,22 @@ export default defineComponent({
                             datetimeRest.push(item);
                         }
                     });
-                    emitModel(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' });
+                    handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' });
                 }
                 else {
                     // 如果是日期类型
                     if (dateMultipleValue.some(val => XEUtils.isEqual(val, inpVal))) {
-                        emitModel(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' });
+                        handleChange(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' });
                     }
                     else {
-                        emitModel(dateMultipleValue.concat([inpVal]).join(','), { type: 'update' });
+                        handleChange(dateMultipleValue.concat([inpVal]).join(','), { type: 'update' });
                     }
                 }
             }
             else {
                 // 如果为单选
                 if (!XEUtils.isEqual(modelValue, inpVal)) {
-                    emitModel(inpVal, { type: 'update' });
+                    handleChange(inpVal, { type: 'update' });
                 }
             }
         };
@@ -890,7 +942,7 @@ export default defineComponent({
                                 inpNumVal = inpStringVal;
                             }
                         }
-                        emitModel(getNumberValue(inpNumVal), { type: 'check' });
+                        handleChange(getNumberValue(inpNumVal), { type: 'check' });
                     }
                 }
                 else if (isDatePickerType) {
@@ -900,7 +952,7 @@ export default defineComponent({
                             if (type === 'time') {
                                 inpDateVal = XEUtils.toDateString(inpDateVal, dateLabelFormat);
                                 if (inputValue !== inpDateVal) {
-                                    emitModel(inpDateVal, { type: 'check' });
+                                    handleChange(inpDateVal, { type: 'check' });
                                 }
                                 reactData.inputValue = inpDateVal;
                             }
@@ -930,7 +982,7 @@ export default defineComponent({
                         }
                     }
                     else {
-                        emitModel('', { type: 'check' });
+                        handleChange('', { type: 'check' });
                     }
                 }
             }
@@ -939,7 +991,7 @@ export default defineComponent({
             const { inputValue } = reactData;
             const inpImmediate = computeInpImmediate.value;
             if (!inpImmediate) {
-                emitModel(inputValue, evnt);
+                handleChange(inputValue, evnt);
             }
             afterCheckValue();
             if (!reactData.visiblePanel) {
@@ -982,19 +1034,18 @@ export default defineComponent({
             }
             emitInputEvent(getNumberValue(restNum), evnt);
         };
-        let downbumTimeout;
         const numberNextEvent = (evnt) => {
             const isDisabled = computeIsDisabled.value;
             const isReadonly = computeIsReadonly.value;
             const isDisabledSubtractNumber = computeIsDisabledSubtractNumber.value;
-            clearTimeout(downbumTimeout);
+            numberStopDown();
             if (!isDisabled && !isReadonly && !isDisabledSubtractNumber) {
                 numberChange(false, evnt);
             }
             inputMethods.dispatchEvent('next-number', {}, evnt);
         };
         const numberDownNextEvent = (evnt) => {
-            downbumTimeout = window.setTimeout(() => {
+            internalData.dnTimeout = window.setTimeout(() => {
                 numberNextEvent(evnt);
                 numberDownNextEvent(evnt);
             }, 60);
@@ -1003,7 +1054,7 @@ export default defineComponent({
             const isDisabled = computeIsDisabled.value;
             const isReadonly = computeIsReadonly.value;
             const isDisabledAddNumber = computeIsDisabledAddNumber.value;
-            clearTimeout(downbumTimeout);
+            numberStopDown();
             if (!isDisabled && !isReadonly && !isDisabledAddNumber) {
                 numberChange(true, evnt);
             }
@@ -1052,10 +1103,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);
@@ -1070,7 +1125,7 @@ export default defineComponent({
                 else {
                     numberNextEvent(evnt);
                 }
-                downbumTimeout = window.setTimeout(() => {
+                internalData.dnTimeout = window.setTimeout(() => {
                     if (isPrevNumber) {
                         numberDownPrevEvent(evnt);
                     }
@@ -1118,6 +1173,7 @@ export default defineComponent({
         const datePrevEvent = (evnt) => {
             const { type } = props;
             const { datePanelType, selectMonth } = reactData;
+            const { yearSize } = internalData;
             const isDisabledPrevDateBtn = computeIsDisabledPrevDateBtn.value;
             if (!isDisabledPrevDateBtn) {
                 if (type === 'year') {
@@ -1156,6 +1212,7 @@ export default defineComponent({
         const dateNextEvent = (evnt) => {
             const { type } = props;
             const { datePanelType, selectMonth } = reactData;
+            const { yearSize } = internalData;
             const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value;
             if (!isDisabledNextDateBtn) {
                 if (type === 'year') {
@@ -1338,11 +1395,11 @@ export default defineComponent({
                                 datetimeRest.push(item);
                             }
                         });
-                        emitModel(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' });
+                        handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' });
                     }
                     else {
                         // 如果是日期类型
-                        emitModel(dateMultipleValue.join(','), { type: 'update' });
+                        handleChange(dateMultipleValue.join(','), { type: 'update' });
                     }
                 }
                 else {
@@ -1469,7 +1526,9 @@ export default defineComponent({
                 reactData.datetimePanelValue = reactData.datePanelValue || XEUtils.getWhatDay(Date.now(), 0, 'first');
                 nextTick(() => {
                     const timeBodyElem = refInputTimeBody.value;
-                    XEUtils.arrayEach(timeBodyElem.querySelectorAll('li.is--selected'), updateTimePos);
+                    XEUtils.arrayEach(timeBodyElem.querySelectorAll('li.is--selected'), (elem) => {
+                        updateTimePos(elem);
+                    });
                 });
             }
         };
@@ -1557,13 +1616,17 @@ export default defineComponent({
         };
         const showPanel = () => {
             const { visiblePanel } = reactData;
+            const { hpTimeout } = internalData;
             const isDisabled = computeIsDisabled.value;
             const isDatePickerType = computeIsDatePickerType.value;
             if (!isDisabled && !visiblePanel) {
                 if (!reactData.initialized) {
                     reactData.initialized = true;
                 }
-                clearTimeout(hidePanelTimeout);
+                if (hpTimeout) {
+                    clearTimeout(hpTimeout);
+                    internalData.hpTimeout = undefined;
+                }
                 reactData.isActivated = true;
                 reactData.isAniVisible = true;
                 if (isDatePickerType) {
@@ -1722,13 +1785,13 @@ export default defineComponent({
                             }]
                     }, extraItem && extraItem.label
                         ? [
-                            h('span', label),
+                            h('span', `${label || ''}`),
                             h('span', {
                                 class: ['vxe-input--date-label--extra', extraItem.important ? 'is-important' : '', extraItem.className],
                                 style: extraItem.style
                             }, XEUtils.toValueString(extraItem.label))
                         ]
-                        : label)
+                        : [`${label || ''}`])
                 ];
                 const festivalLabel = festivalItem.label;
                 if (festivalLabel) {
@@ -1749,7 +1812,7 @@ export default defineComponent({
                 }
                 return labels;
             }
-            return label;
+            return [`${label || ''}`];
         };
         const renderDateDayTable = () => {
             const { multiple } = props;
@@ -2299,10 +2362,11 @@ export default defineComponent({
             }
             return createCommentVNode();
         };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $input: $xeInput }, params));
+        };
         inputMethods = {
-            dispatchEvent(type, params, evnt) {
-                emit(type, createEvent(evnt, { $input: $xeInput }, params));
-            },
+            dispatchEvent,
             focus() {
                 const inputElem = refInputTarget.value;
                 reactData.isActivated = true;
@@ -2341,7 +2405,7 @@ export default defineComponent({
             const isCountError = computeIsCountError.value;
             const inputCount = computeInputCount.value;
             const inputReadonly = computeInputReadonly.value;
-            const inpMaxlength = computeInpMaxlength.value;
+            const inpMaxLength = computeInpMaxLength.value;
             const inputType = computeInputType.value;
             const inpPlaceholder = computeInpPlaceholder.value;
             const isClearable = computeIsClearable.value;
@@ -2375,7 +2439,7 @@ export default defineComponent({
                         name,
                         type: inputType,
                         placeholder: inpPlaceholder,
-                        maxlength: inpMaxlength,
+                        maxlength: inpMaxLength,
                         readonly: inputReadonly,
                         disabled: isDisabled,
                         autocomplete: autoComplete || autocomplete,
@@ -2398,11 +2462,10 @@ export default defineComponent({
                         class: ['vxe-input--count', {
                                 'is--error': isCountError
                             }]
-                    }, countMethod ? `${countMethod({ value: inputValue })}` : `${inputCount}${inpMaxlength ? `/${inpMaxlength}` : ''}`)
+                    }, countMethod ? `${countMethod({ value: inputValue })}` : `${inputCount}${inpMaxLength ? `/${inpMaxLength}` : ''}`)
                     : createCommentVNode()
             ]);
         };
-        $xeInput.renderVN = renderVN;
         watch(() => props.modelValue, (val) => {
             reactData.inputValue = val;
             changeValue();
@@ -2442,6 +2505,7 @@ export default defineComponent({
             globalEvents.off($xeInput, 'blur');
         });
         initValue();
+        $xeInput.renderVN = renderVN;
         return $xeInput;
     },
     render() {

package/es/layout-aside/src/layout-aside.js

@@ -91,8 +91,8 @@ export default defineComponent({
                 })
             ]);
         };
-        $xeLayoutAside.renderVN = renderVN;
         provide('$xeLayoutAside', $xeLayoutAside);
+        $xeLayoutAside.renderVN = renderVN;
         return $xeLayoutAside;
     },
     render() {

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,11 @@ export default defineComponent({
                     ])
                 ]);
         };
-        $xeLoading.renderVN = renderVN;
         watch(() => props.modelValue, () => {
             handleInit();
         });
         handleInit();
+        $xeLoading.renderVN = renderVN;
         return $xeLoading;
     },
     render() {

package/es/menu/src/menu.js

@@ -246,7 +246,6 @@ export default defineComponent({
                 })
             ]);
         };
-        $xeMenu.renderVN = renderVN;
         const optFlag = ref(0);
         watch(() => props.options ? props.options.length : -1, () => {
             optFlag.value++;
@@ -271,6 +270,7 @@ export default defineComponent({
         });
         updateMenuConfig();
         updateActiveMenu(true);
+        $xeMenu.renderVN = renderVN;
         return $xeMenu;
     },
     render() {