vxe-pc-ui 4.15.2 → 4.15.4

package/dist/all.esm.js

@@ -1,5 +1,5 @@
 import * as core from '@vxe-ui/core';
-import { VxeUI, log, setConfig as setConfig$1, setIcon, getConfig as getConfig$3, createEvent, getIcon as getIcon$2, renderEmptyElement, useSize, usePermission, permission, globalEvents, renderer, getI18n as getI18n$2, globalResize, GLOBAL_EVENT_KEYS, getSlotVNs as getSlotVNs$1, commands, formats, getComponent, validators } from '@vxe-ui/core';
+import { VxeUI, setConfig as setConfig$1, setIcon, getConfig as getConfig$3, createEvent, getIcon as getIcon$2, renderEmptyElement, useSize, usePermission, permission, globalEvents, renderer, getI18n as getI18n$2, globalResize, GLOBAL_EVENT_KEYS, getSlotVNs as getSlotVNs$1, commands, formats, getComponent, validators } from '@vxe-ui/core';
 export * from '@vxe-ui/core';
 import { defineComponent, reactive, h, createCommentVNode, createApp, ref, inject, computed, watch, onMounted, onUnmounted, provide, nextTick, onBeforeUnmount, resolveComponent, Teleport, onActivated, onDeactivated, TransitionGroup } from 'vue';
 import XEUtils from 'xe-utils';
@@ -80,19 +80,29 @@ function checkDynamic() {
     }
 }
 
-const version$1 = `ui v${"4.15.2"}`;
-const warnLog = log.create('warn', version$1);
-const errLog = log.create('error', version$1);
+const { log } = VxeUI;
+const uiVersion = `ui v${"4.15.4"}`;
+function createComponentLog(name) {
+    const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
+    const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
+    const designVersion = VxeUI.designVersion ? `design v${VxeUI.designVersion}` : '';
+    return {
+        warnLog: log.create('warn', uiVersion + tableVersion + ganttVersion + designVersion + '] [' + name),
+        errLog: log.create('error', uiVersion + tableVersion + ganttVersion + designVersion + '] [' + name)
+    };
+}
+const warnLog$b = log.create('warn', uiVersion);
+log.create('error', uiVersion);
 
-const version = "4.15.2";
+const version = "4.15.4";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
-    warnLog('vxe.error.delFunc', ['config', 'setConfig']);
+    warnLog$b('vxe.error.delFunc', ['config', 'setConfig']);
     return setConfig$1(options);
 }
 function setup(options) {
-    warnLog('vxe.error.delFunc', ['setup', 'setConfig']);
+    warnLog$b('vxe.error.delFunc', ['setup', 'setConfig']);
     return setConfig$1(options);
 }
 VxeUI.config = config;
@@ -147,6 +157,9 @@ setConfig$1({
         showFullLabel: true,
         treeConfig: {
             showIcon: true
+        },
+        filterConfig: {
+            autoExpandMode: 'first'
         }
     },
     checkbox: {},
@@ -3041,6 +3054,7 @@ dynamicApp.use(VxeTooltip);
 VxeUI.component(VxeTooltipComponent);
 const Tooltip = VxeTooltip;
 
+const { warnLog: warnLog$a } = createComponentLog('button');
 const VxeButtonComponent = defineVxeComponent({
     name: 'VxeButton',
     props: {
@@ -3759,7 +3773,7 @@ const VxeButtonComponent = defineVxeComponent({
         $xeButton.renderVN = renderVN;
         onMounted(() => {
             if (props.type === 'text') {
-                warnLog('vxe.error.delProp', ['[button] type=text', 'mode=text']);
+                warnLog$a('vxe.error.delProp', ['type=text', 'mode=text']);
             }
             globalEvents.on($xeButton, 'mousewheel', handleGlobalMousewheelEvent);
             globalEvents.on($xeButton, 'mousedown', handleGlobalMousedownEvent);
@@ -3786,12 +3800,13 @@ dynamicApp.use(VxeButton);
 VxeUI.component(VxeButtonComponent);
 const Button = VxeButton;
 
-function createInternalData$d() {
+const { errLog: errLog$g } = createComponentLog('backtop');
+function createInternalData$e() {
     return {
         targetEl: null
     };
 }
-function createReactData$a() {
+function createReactData$f() {
     return {
         showBtn: false,
         backtopZindex: 0
@@ -3870,8 +3885,8 @@ var VxeBacktopComponent = defineVxeComponent({
         const xID = XEUtils.uniqueId();
         const refElem = ref();
         const { computeSize } = useSize(props);
-        const internalData = createInternalData$d();
-        const reactData = reactive(createReactData$a());
+        const internalData = createInternalData$e();
+        const reactData = reactive(createReactData$f());
         const refMaps = {
             refElem
         };
@@ -3963,13 +3978,13 @@ var VxeBacktopComponent = defineVxeComponent({
                 const { target } = props;
                 if (!target) {
                     removeScrollEvent();
-                    errLog('vxe.error.reqProp', ['target']);
+                    errLog$g('vxe.error.reqProp', ['target']);
                     return;
                 }
                 if (XEUtils.isString(target)) {
                     const tEl = document.querySelector(target);
                     if (!tEl) {
-                        errLog('vxe.error.errProp', [`target=${target}`, 'body']);
+                        errLog$g('vxe.error.errProp', [`target=${target}`, 'body']);
                     }
                     const { targetEl } = internalData;
                     if (targetEl !== tEl) {
@@ -4048,8 +4063,8 @@ var VxeBacktopComponent = defineVxeComponent({
         });
         onBeforeUnmount(() => {
             removeScrollEvent();
-            XEUtils.assign(reactData, createReactData$a());
-            XEUtils.assign(internalData, createInternalData$d());
+            XEUtils.assign(reactData, createReactData$f());
+            XEUtils.assign(internalData, createInternalData$e());
         });
         $xeBacktop.renderVN = renderVN;
         return $xeBacktop;
@@ -4412,6 +4427,18 @@ dynamicApp.use(VxeButtonGroup);
 VxeUI.component(VxeButtonGroupComponent);
 const ButtonGroup = VxeButtonGroup;
 
+function getChunkDefaultNum(selectKey) {
+    const currDate = new Date();
+    switch (selectKey) {
+        case 'y': return currDate.getFullYear();
+        case 'M': return currDate.getMonth() + 1;
+        case 'd': return currDate.getDate();
+        case 'H': return currDate.getHours();
+        case 'm': return currDate.getMinutes();
+        case 's': return currDate.getSeconds();
+    }
+    return 0;
+}
 function hasTimestampValueType(valueFormat) {
     return valueFormat === 'timestamp';
 }
@@ -4432,18 +4459,6 @@ function handleValueFormat(type, valueFormat) {
     }
     return 'yyyy-MM-dd';
 }
-function handleInputFormat(type, inputFormat) {
-    if (inputFormat) {
-        return inputFormat;
-    }
-    if (type === 'time') {
-        return 'HH:mm:ss';
-    }
-    if (type === 'datetime') {
-        return 'yyyy-MM-dd HH:mm:ss';
-    }
-    return 'yyyy-MM-dd';
-}
 function toStringTimeDate(str) {
     const rest = new Date(2e3, 0, 1);
     if (str) {
@@ -4487,7 +4502,7 @@ function getDateQuarter(date) {
     }
     return 4;
 }
-const parseDateValue = (val, type, options) => {
+function parseDateValue(val, type, options) {
     const { valueFormat } = options;
     if (val) {
         if (type === 'time') {
@@ -4502,7 +4517,7 @@ const parseDateValue = (val, type, options) => {
         return XEUtils.toStringDate(val, valueFormat);
     }
     return null;
-};
+}
 const parseDateString = (val, type, options) => {
     const dValue = parseDateValue(val, type, options);
     return dValue ? XEUtils.toDateString(dValue, options.valueFormat) : '';
@@ -4639,10 +4654,22 @@ function getRangeDateByCode(code, val, type, options) {
 /**
  * 判断周的年份是否跨年
  */
-const checkWeekOfsetYear = (W, M) => {
+function checkWeekOfsetYear(W, M) {
     return `${W}` === '1' && `${M}` === '12';
-};
+}
+function isAllSameChar(str, char) {
+    if (str.length === 0) {
+        return false;
+    }
+    for (let i = 0; i < str.length; i++) {
+        if (str[i] !== char) {
+            return false;
+        }
+    }
+    return true;
+}
 
+const { errLog: errLog$f } = createComponentLog('calendar');
 const { menus: menus$2, getConfig: getConfig$2, getI18n: getI18n$1 } = VxeUI;
 var VxeCalendarComponent = defineVxeComponent({
     name: 'VxeCalendar',
@@ -5910,7 +5937,7 @@ var VxeCalendarComponent = defineVxeComponent({
             const { menuConfig } = props;
             const VxeUIContextMenu = VxeUI.getComponent('VxeContextMenu');
             if (menuConfig && !VxeUIContextMenu) {
-                errLog('vxe.error.reqComp', ['vxe-context-menu']);
+                errLog$f('vxe.error.reqComp', ['vxe-context-menu']);
             }
             dateOpenPanel();
         });
@@ -6692,7 +6719,7 @@ function deNodeValue$1(nodeid) {
     return nodeid ? decodeURIComponent(`${nodeid}`) : nodeid;
 }
 
-function createReactData$9() {
+function createReactData$e() {
     return {
         scrollYLoad: false,
         bodyHeight: 0,
@@ -6703,7 +6730,7 @@ function createReactData$9() {
         items: []
     };
 }
-function createInternalData$c() {
+function createInternalData$d() {
     return {
         resizeObserver: undefined,
         fullData: [],
@@ -6746,8 +6773,8 @@ var VxeListComponent = defineVxeComponent({
         const xID = XEUtils.uniqueId();
         const browseObj = XEUtils.browse();
         const { computeSize } = useSize(props);
-        const reactData = reactive(createReactData$9());
-        const internalData = createInternalData$c();
+        const reactData = reactive(createReactData$e());
+        const internalData = createInternalData$d();
         const refElem = ref();
         const refVirtualWrapper = ref();
         const refVirtualBody = ref();
@@ -7079,8 +7106,8 @@ var VxeListComponent = defineVxeComponent({
                 resizeObserver.disconnect();
             }
             globalEvents.off($xeList, 'resize');
-            XEUtils.assign(reactData, createReactData$9());
-            XEUtils.assign(internalData, createInternalData$c());
+            XEUtils.assign(reactData, createReactData$e());
+            XEUtils.assign(internalData, createInternalData$d());
         });
         $xeList.renderVN = renderVN;
         return $xeList;
@@ -7112,6 +7139,7 @@ function toFloatValueFixed(inputValue, type, digitsValue, roundingMode) {
     }
 }
 
+const { warnLog: warnLog$9 } = createComponentLog('input');
 var VxeInputComponent = defineVxeComponent({
     name: 'VxeInput',
     props: {
@@ -9748,13 +9776,13 @@ var VxeInputComponent = defineVxeComponent({
         onMounted(() => {
             const { type } = props;
             if (['date', 'time', 'datetime', 'week', 'month', 'quarter', 'year'].includes(type)) {
-                warnLog('vxe.error.useNew', [`<vxe-input type="${type}" ... />`, `<vxe-date-picker type="${type}" ... />`]);
+                warnLog$9('vxe.error.useNew', [`<vxe-input type="${type}" ... />`, `<vxe-date-picker type="${type}" ... />`]);
             }
             else if (['number', 'integer', 'float'].includes(type)) {
-                warnLog('vxe.error.useNew', [`<vxe-input type="${type}" ... />`, `<vxe-number-input type="${type}" ... />`]);
+                warnLog$9('vxe.error.useNew', [`<vxe-input type="${type}" ... />`, `<vxe-number-input type="${type}" ... />`]);
             }
             else if (['password'].includes(type)) {
-                warnLog('vxe.error.useNew', [`<vxe-input type="${type}" ... />`, '<vxe-password-input ... />']);
+                warnLog$9('vxe.error.useNew', [`<vxe-input type="${type}" ... />`, '<vxe-password-input ... />']);
             }
             const inputElem = refInputTarget.value;
             if (inputElem) {
@@ -9792,7 +9820,7 @@ var VxeInputComponent = defineVxeComponent({
 function getNodeUniqueId$1() {
     return XEUtils.uniqueId('node_');
 }
-function createReactData$8() {
+function createReactData$d() {
     return {
         initialized: false,
         searchValue: '',
@@ -9815,7 +9843,7 @@ function createReactData$8() {
         lazyOptFlag: 1
     };
 }
-function createInternalData$b() {
+function createInternalData$c() {
     return {
         // hpTimeout: undefined,
         listVirtualYOpts: {
@@ -9942,8 +9970,8 @@ var VxeCascaderComponent = defineVxeComponent({
         const refInpSearch = ref();
         const refChunkWrapper = ref();
         const refOptionPanel = ref();
-        const reactData = reactive(createReactData$8());
-        const internalData = createInternalData$b();
+        const reactData = reactive(createReactData$d());
+        const internalData = createInternalData$c();
         const refMaps = {
             refElem
         };
@@ -10356,7 +10384,6 @@ var VxeCascaderComponent = defineVxeComponent({
             return internalData.afterVisibleList;
         };
         const handleData = (force) => {
-            const { nodeMaps } = internalData;
             let fullList = internalData.afterVisibleList;
             if (force) {
                 // 更新数据，处理筛选和排序
@@ -10365,16 +10392,56 @@ var VxeCascaderComponent = defineVxeComponent({
                 fullList = handleTreeToList();
             }
             const treeList = fullList.slice(0);
-            treeList.forEach((item, $index) => {
-                const nodeid = getNodeId(item);
-                const itemRest = nodeMaps[nodeid];
-                if (itemRest) {
-                    itemRest.$index = $index;
-                }
-            });
             reactData.treeList = treeList;
         };
-        const triggerSearchEvent = XEUtils.debounce(() => handleData(true), 350, { trailing: true });
+        /**
+         * 获取第一个拥有子节点的节点
+         */
+        function handleHasChildNodeIds(treeList, type) {
+            const childrenField = computeChildrenField.value;
+            const mapChildrenField = computeMapChildrenField.value;
+            const treeOpts = computeTreeOpts.value;
+            const { transform } = treeOpts;
+            const childField = transform ? mapChildrenField : childrenField;
+            const nodeIds = [];
+            let currList = treeList;
+            while (currList.length) {
+                let targetNode = null;
+                for (const item of currList) {
+                    const kids = item[childField];
+                    if (XEUtils.isArray(kids) && kids.length > 0) {
+                        targetNode = item;
+                        break;
+                    }
+                }
+                if (targetNode) {
+                    nodeIds.push(getNodeId(targetNode));
+                    currList = targetNode[childField];
+                }
+                else {
+                    const endNode = XEUtils[type](currList);
+                    nodeIds.push(getNodeId(endNode));
+                    break;
+                }
+            }
+            return nodeIds;
+        }
+        const triggerSearchEvent = XEUtils.debounce(() => {
+            handleData(true);
+            updateModelChecked();
+            const filterOpts = computeFilterOpts.value;
+            const { autoExpandMode } = filterOpts;
+            const { afterTreeList } = internalData;
+            // 默认展开第
+            if (autoExpandMode === 'first' || autoExpandMode === 'last') {
+                const stItems = handleHasChildNodeIds(afterTreeList, autoExpandMode);
+                reactData.currentItems = stItems;
+            }
+            else {
+                handleCurrentItems();
+            }
+            updateCurrentChunk();
+        }, 350, { trailing: true });
         const loadData = (list) => {
             const treeOpts = computeTreeOpts.value;
             const keyField = computeKeyField.value;
@@ -10401,17 +10468,20 @@ var VxeCascaderComponent = defineVxeComponent({
         };
         const updateCurrentChunk = () => {
             const { currentItems } = reactData;
-            const { treeFullData } = internalData;
+            const { afterTreeList } = internalData;
             const childrenField = computeChildrenField.value;
-            const currentCunkList = [treeFullData];
+            const mapChildrenField = computeMapChildrenField.value;
+            const treeOpts = computeTreeOpts.value;
+            const { transform } = treeOpts;
+            const currentCunkList = [afterTreeList];
             if (currentItems.length) {
                 let chunkIndex = 0;
                 let stNodeid = currentItems[chunkIndex];
-                let optList = treeFullData;
+                let optList = afterTreeList;
                 while (stNodeid && optList && optList.length) {
                     stNodeid = currentItems[chunkIndex++];
                     const currOption = optList.find(item => stNodeid === getNodeId(item));
-                    optList = currOption ? currOption[childrenField] : [];
+                    optList = currOption ? currOption[transform ? mapChildrenField : childrenField] : [];
                     if (!optList || !optList.length) {
                         break;
                     }
@@ -10421,7 +10491,7 @@ var VxeCascaderComponent = defineVxeComponent({
             reactData.currentCunkList = currentCunkList;
         };
         const handleCurrentItems = () => {
-            const { treeFullData } = internalData;
+            const { afterTreeList } = internalData;
             const selectVals = computeSelectVals.value;
             const childrenField = computeChildrenField.value;
             const mapChildrenField = computeMapChildrenField.value;
@@ -10431,7 +10501,7 @@ var VxeCascaderComponent = defineVxeComponent({
             const expandedMaps = {};
             if (selectVals.length) {
                 const lastVal = enNodeValue$1(XEUtils.last(selectVals));
-                const stRest = XEUtils.findTree(treeFullData, (item) => lastVal === getNodeId(item), { children: transform ? mapChildrenField : childrenField });
+                const stRest = XEUtils.findTree(afterTreeList, (item) => lastVal === getNodeId(item), { children: transform ? mapChildrenField : childrenField });
                 if (stRest) {
                     const { nodes } = stRest;
                     nodes.forEach(item => {
@@ -10537,10 +10607,11 @@ var VxeCascaderComponent = defineVxeComponent({
                 return { checkNodeKeys: checkKeys, checkNodes };
             });
         };
-        const clearCheckboxNode = () => {
+        const clearSelectedNode = () => {
             internalData.indeterminateRowMaps = {};
             internalData.selectCheckboxMaps = {};
             reactData.updateCheckboxFlag++;
+            reactData.selectRadioKey = null;
             updateCheckboxStatus();
             return nextTick().then(() => {
                 return { checkNodeKeys: [], checkNodes: [] };
@@ -10582,7 +10653,7 @@ var VxeCascaderComponent = defineVxeComponent({
             const { $event } = params;
             const { multiple, checkedClosable } = props;
             const value = multiple ? [] : null;
-            clearCheckboxNode().then(() => {
+            clearSelectedNode().then(() => {
                 if (checkedClosable) {
                     hideOptionPanel($event);
                 }
@@ -10664,9 +10735,12 @@ var VxeCascaderComponent = defineVxeComponent({
             const { nodeMaps } = internalData;
             const radioOpts = computeRadioOpts.value;
             const childrenField = computeChildrenField.value;
+            const treeOpts = computeTreeOpts.value;
+            const { transform } = treeOpts;
+            const mapChildrenField = computeMapChildrenField.value;
             const { checkMode, checkMethod } = radioOpts;
             const nodeid = getNodeId(node);
-            const childList = node[childrenField];
+            const childList = node[transform ? mapChildrenField : childrenField];
             const isExistChild = childList && childList.length > 0;
             const nodeItem = nodeMaps[nodeid] || {};
             const nLevel = nodeItem.level;
@@ -10815,7 +10889,7 @@ var VxeCascaderComponent = defineVxeComponent({
                 const childRowList = [];
                 XEUtils.eachTree(afterTreeList, (node) => {
                     const nodeid = getNodeId(node);
-                    const childList = node[childrenField];
+                    const childList = node[transform ? mapChildrenField : childrenField];
                     if (childList && childList.length && !childRowMaps[nodeid]) {
                         childRowMaps[nodeid] = 1;
                         childRowList.unshift([node, nodeid, childList]);
@@ -10919,7 +10993,7 @@ var VxeCascaderComponent = defineVxeComponent({
             const treeOpts = computeTreeOpts.value;
             const { transform } = treeOpts;
             const nodeid = getNodeId(node);
-            const childList = node[childrenField];
+            const childList = node[transform ? mapChildrenField : childrenField];
             const isExistChild = childList && childList.length > 0;
             const nodeItem = nodeMaps[nodeid] || {};
             const nLevel = nodeItem.level;
@@ -11165,11 +11239,12 @@ var VxeCascaderComponent = defineVxeComponent({
             const { currentNode, selectRadioKey, updateCheckboxFlag, updateExpandedFlag } = reactData;
             const { nodeMaps, selectCheckboxMaps, indeterminateRowMaps, treeExpandedMaps, treeExpandLazyLoadedMaps } = internalData;
             const treeOpts = computeTreeOpts.value;
-            const { lazy, iconLoaded, iconOpen, iconClose } = treeOpts;
+            const { lazy, transform, iconLoaded, iconOpen, iconClose } = treeOpts;
             const childrenField = computeChildrenField.value;
+            const mapChildrenField = computeMapChildrenField.value;
             const labelField = computeLabelField.value;
             const hasChildField = computeHasChildField.value;
-            const childList = node[childrenField];
+            const childList = node[transform ? mapChildrenField : childrenField];
             const isExistChild = childList && childList.length > 0;
             const iconSlot = slots.icon;
             const titleSlot = slots.title;
@@ -11351,7 +11426,7 @@ var VxeCascaderComponent = defineVxeComponent({
                                             h('div', {
                                                 class: 'vxe-tree-select--header-button'
                                             }, [
-                                                showCheckedButton && showClearButton
+                                                (showCheckedButton && multiple) || showClearButton
                                                     ? h('div', {
                                                         class: 'vxe-tree-select--selected-btns'
                                                     }, [
@@ -11402,7 +11477,7 @@ var VxeCascaderComponent = defineVxeComponent({
                                         })
                                     ])
                                 ]),
-                                footerSlot || showTotalButton || (showCloseButton && multiple)
+                                footerSlot || showTotalButton || showCloseButton
                                     ? h('div', {
                                         class: 'vxe-cascader--panel-footer'
                                     }, footerSlot
@@ -11416,7 +11491,7 @@ var VxeCascaderComponent = defineVxeComponent({
                                                         class: 'vxe-cascader--total-btns'
                                                     }, getI18n$2('vxe.treeSelect.total', [selectVals.length]))
                                                     : renderEmptyElement($xeCascader),
-                                                showCloseButton && multiple
+                                                showCloseButton
                                                     ? h('div', {
                                                         class: 'vxe-cascader--oper-btns'
                                                     }, [
@@ -11458,9 +11533,6 @@ var VxeCascaderComponent = defineVxeComponent({
         });
         loadData(props.options || []);
         onMounted(() => {
-            if (props.filterable) {
-                errLog('vxe.error.notProp', ['filterable']);
-            }
             globalEvents.on($xeCascader, 'mousewheel', handleGlobalMousewheelEvent);
             globalEvents.on($xeCascader, 'mousedown', handleGlobalMousedownEvent);
             globalEvents.on($xeCascader, 'blur', handleGlobalBlurEvent);
@@ -11471,7 +11543,7 @@ var VxeCascaderComponent = defineVxeComponent({
             globalEvents.off($xeCascader, 'mousedown');
             globalEvents.off($xeCascader, 'blur');
             globalEvents.off($xeCascader, 'resize');
-            XEUtils.assign(internalData, createInternalData$b());
+            XEUtils.assign(internalData, createInternalData$c());
         });
         provide('$xeCascader', $xeCascader);
         $xeCascader.renderVN = renderVN;
@@ -11804,7 +11876,10 @@ dynamicApp.use(VxeCheckboxButton);
 VxeUI.component(VxeCheckboxButtonComponent);
 const CheckboxButton = VxeCheckboxButton;
 
-function createInternalData$a() {
+function createReactData$c() {
+    return {};
+}
+function createInternalData$b() {
     return {
     // isLoaded: false
     };
@@ -11843,8 +11918,8 @@ var VxeCheckboxGroupComponent = defineVxeComponent({
         const $xeForm = inject('$xeForm', null);
         const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
-        const reactData = reactive({});
-        const internalData = createInternalData$a();
+        const reactData = reactive(createReactData$c());
+        const internalData = createInternalData$b();
         const computeIsReadonly = computed(() => {
             const { readonly } = props;
             if (readonly === null) {
@@ -12003,7 +12078,8 @@ var VxeCheckboxGroupComponent = defineVxeComponent({
             });
         });
         onUnmounted(() => {
-            XEUtils.assign(internalData, createInternalData$a());
+            XEUtils.assign(reactData, createReactData$c());
+            XEUtils.assign(internalData, createInternalData$b());
         });
         provide('$xeCheckboxGroup', $xeCheckboxGroup);
         $xeCheckboxGroup.renderVN = renderVN;
@@ -14745,12 +14821,12 @@ dynamicApp.use(VxeColorPicker);
 VxeUI.component(VxeColorPickerComponent);
 const ColorPicker = VxeColorPicker;
 
-function createInternalData$9() {
+function createInternalData$a() {
     return {
     // leaveTime: null
     };
 }
-function createReactData$7() {
+function createReactData$b() {
     return {
         visible: false,
         activeOption: null,
@@ -14805,8 +14881,8 @@ var VxeContextMenuComponent = defineVxeComponent({
         const xID = XEUtils.uniqueId();
         const refElem = ref();
         const { computeSize } = useSize(props);
-        const internalData = createInternalData$9();
-        const reactData = reactive(createReactData$7());
+        const internalData = createInternalData$a();
+        const reactData = reactive(createReactData$b());
         const refMaps = {
             refElem
         };
@@ -15361,8 +15437,8 @@ var VxeContextMenuComponent = defineVxeComponent({
             globalEvents.off($xeContextMenu, 'keydown');
             globalEvents.off($xeContextMenu, 'mousedown');
             globalEvents.off($xeContextMenu, 'blur');
-            XEUtils.assign(reactData, createReactData$7());
-            XEUtils.assign(internalData, createInternalData$9());
+            XEUtils.assign(reactData, createReactData$b());
+            XEUtils.assign(internalData, createInternalData$a());
         });
         $xeContextMenu.renderVN = renderVN;
         return $xeContextMenu;
@@ -17620,6 +17696,33 @@ dynamicApp.use(VxeDatePanel);
 VxeUI.component(VxeDatePanelComponent);
 const DatePanel = VxeDatePanel;
 
+const { warnLog: warnLog$8, errLog: errLog$e } = createComponentLog('date-picker');
+const maskedTypes = ['year', 'month', 'date', 'datetime', 'time'];
+const inputMaskedKeys = ['y', 'M', 'd', 'H', 'm', 'n', 's'];
+const parseInputKayMaps = {};
+inputMaskedKeys.forEach(key => {
+    parseInputKayMaps[key] = true;
+});
+function createReactData$a() {
+    return {
+        initialized: false,
+        panelIndex: 0,
+        visiblePanel: false,
+        isAniVisible: false,
+        panelStyle: {},
+        panelPlacement: '',
+        isActivated: false,
+        inputValue: '',
+        labelFlag: 0
+    };
+}
+function createInternalData$9() {
+    return {
+        // hpTimeout: undefined,
+        inputLabel: '',
+        laseFocusMasked: 0
+    };
+}
 var VxeDatePickerComponent = defineVxeComponent({
     name: 'VxeDatePicker',
     props: {
@@ -17682,7 +17785,6 @@ var VxeDatePickerComponent = defineVxeComponent({
         labelFormat: String,
         valueFormat: String,
         timeFormat: String,
-        inputFormat: String,
         editable: {
             type: Boolean,
             default: true
@@ -17712,7 +17814,7 @@ var VxeDatePickerComponent = defineVxeComponent({
             type: Boolean,
             default: () => getConfig$3().datePicker.autoClose
         },
-        controlConfig: Object,
+        maskedConfig: Object,
         prefixIcon: String,
         suffixIcon: String,
         placement: String,
@@ -17753,21 +17855,8 @@ var VxeDatePickerComponent = defineVxeComponent({
         const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const reactData = reactive({
-            initialized: false,
-            panelIndex: 0,
-            visiblePanel: false,
-            isAniVisible: false,
-            panelStyle: {},
-            panelPlacement: '',
-            isActivated: false,
-            inputValue: '',
-            inputLabel: ''
-        });
-        const internalData = {
-            // hpTimeout: undefined,
-            parseInputKayMaps: {}
-        };
+        const reactData = reactive(createReactData$a());
+        const internalData = createInternalData$9();
         const refElem = ref();
         const refInputTarget = ref();
         const refInputPanel = ref();
@@ -17833,6 +17922,44 @@ var VxeDatePickerComponent = defineVxeComponent({
         const computeIsClearable = computed(() => {
             return props.clearable;
         });
+        const computeIsDatePanelType = computed(() => {
+            const isDateTimeType = computeIsDateTimeType.value;
+            return isDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
+        });
+        const computeDateListValue = computed(() => {
+            const { modelValue, type, multiple } = props;
+            const isDatePanelType = computeIsDatePanelType.value;
+            const dateValueFormat = computeDateValueFormat.value;
+            if (multiple && modelValue && isDatePanelType) {
+                return XEUtils.toValueString(modelValue).split(',').map(item => {
+                    const date = parseDateValue(item, type, {
+                        valueFormat: dateValueFormat
+                    });
+                    if (XEUtils.isValidDate(date)) {
+                        return date;
+                    }
+                    return date;
+                });
+            }
+            return [];
+        });
+        const computeLimitMaxCount = computed(() => {
+            return props.multiple ? XEUtils.toNumber(props.limitCount) : 0;
+        });
+        const computeDateMultipleValue = computed(() => {
+            const dateListValue = computeDateListValue.value;
+            const dateValueFormat = computeDateValueFormat.value;
+            return dateListValue.map(date => XEUtils.toDateString(date, dateValueFormat));
+        });
+        const computeOverCount = computed(() => {
+            const { multiple } = props;
+            const limitMaxCount = computeLimitMaxCount.value;
+            const dateMultipleValue = computeDateMultipleValue.value;
+            if (multiple && limitMaxCount) {
+                return dateMultipleValue.length >= limitMaxCount;
+            }
+            return false;
+        });
         const computeInputReadonly = computed(() => {
             const { type, editable, multiple } = props;
             const formReadonly = computeFormReadonly.value;
@@ -17882,9 +18009,9 @@ var VxeDatePickerComponent = defineVxeComponent({
             const { type, valueFormat } = props;
             return handleValueFormat(type, valueFormat);
         });
-        const computeDateInputFormat = computed(() => {
-            const { type, inputFormat } = props;
-            return handleInputFormat(type, inputFormat);
+        const computeDateMaskedFormat = computed(() => {
+            const dateLabelFormat = computeDateLabelFormat.value;
+            return dateLabelFormat;
         });
         const computeFirstDayOfWeek = computed(() => {
             const { startDay } = props;
@@ -17906,8 +18033,13 @@ var VxeDatePickerComponent = defineVxeComponent({
                 return dateObj.label;
             }).join(', ');
         });
-        const computeControlOpts = computed(() => {
-            return Object.assign({}, getConfig$3().datePicker.controlConfig, props.controlConfig);
+        const computeMaskedOpts = computed(() => {
+            return Object.assign({}, getConfig$3().datePicker.maskedConfig, props.maskedConfig);
+        });
+        const computeMaskChar = computed(() => {
+            const maskedOpts = computeMaskedOpts.value;
+            const { maskPlaceholder } = maskedOpts;
+            return (maskPlaceholder ? ('' + maskPlaceholder)[0] : '') || '*';
         });
         const updateModelValue = () => {
             const { modelValue } = props;
@@ -17922,6 +18054,12 @@ var VxeDatePickerComponent = defineVxeComponent({
             }
             reactData.inputValue = val;
         };
+        const handleInputLabel = (text, isUpdate) => {
+            internalData.inputLabel = text;
+            if (isUpdate) {
+                reactData.labelFlag++;
+            }
+        };
         const triggerEvent = (evnt) => {
             const { inputValue } = reactData;
             dispatchEvent(evnt.type, { value: inputValue }, evnt);
@@ -17967,7 +18105,7 @@ var VxeDatePickerComponent = defineVxeComponent({
         const inputEvent = (evnt) => {
             const inputElem = evnt.target;
             const value = inputElem.value;
-            reactData.inputLabel = value;
+            handleInputLabel(value, true);
             dispatchEvent('input', { value }, evnt);
         };
         const changeEvent = (evnt) => {
@@ -17976,18 +18114,6 @@ var VxeDatePickerComponent = defineVxeComponent({
                 triggerEvent(evnt);
             }
         };
-        const focusEvent = (evnt) => {
-            const popupOpts = computePopupOpts.value;
-            const { trigger } = popupOpts;
-            reactData.isActivated = true;
-            if (!trigger || trigger === 'default') {
-                datePickerOpenEvent(evnt);
-            }
-            else if (trigger === 'icon') {
-                hidePanel();
-            }
-            triggerEvent(evnt);
-        };
         const clickPrefixEvent = (evnt) => {
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled) {
@@ -18004,6 +18130,107 @@ var VxeDatePickerComponent = defineVxeComponent({
                 }, 350);
             });
         };
+        const dateChange = (date, isReload) => {
+            const { modelValue, multiple } = props;
+            const isDateTimeType = computeIsDateTimeType.value;
+            const dateValueFormat = computeDateValueFormat.value;
+            const firstDayOfWeek = computeFirstDayOfWeek.value;
+            if (props.type === 'week') {
+                const sWeek = XEUtils.toNumber(props.selectDay);
+                date = XEUtils.getWhatWeek(date, 0, sWeek, firstDayOfWeek);
+            }
+            const inpVal = XEUtils.toDateString(date, dateValueFormat, { firstDay: firstDayOfWeek });
+            if (multiple) {
+                const overCount = computeOverCount.value;
+                // 如果为多选
+                if (isDateTimeType) {
+                    // 如果是datetime特殊类型
+                    const dateListValue = [...computeDateListValue.value];
+                    const datetimeRest = [];
+                    const eqIndex = XEUtils.findIndexOf(dateListValue, val => XEUtils.isDateSame(date, val, 'yyyyMMdd'));
+                    if (eqIndex === -1) {
+                        if (overCount) {
+                            // 如果超出最大多选数量
+                            return;
+                        }
+                        dateListValue.push(date);
+                    }
+                    else {
+                        dateListValue.splice(eqIndex, 1);
+                    }
+                    dateListValue.forEach(item => {
+                        if (item) {
+                            datetimeRest.push(item);
+                        }
+                    });
+                    handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' });
+                }
+                else {
+                    const dateMultipleValue = computeDateMultipleValue.value;
+                    // 如果是日期类型
+                    if (dateMultipleValue.some(val => XEUtils.isEqual(val, inpVal))) {
+                        handleChange(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' });
+                    }
+                    else {
+                        if (overCount) {
+                            // 如果超出最大多选数量
+                            return;
+                        }
+                        handleChange(dateMultipleValue.concat([inpVal]).join(','), { type: 'update' });
+                    }
+                }
+            }
+            else {
+                // 如果为单选
+                if (!XEUtils.isEqual(modelValue, inpVal)) {
+                    handleChange(inpVal, { type: 'update' });
+                }
+            }
+        };
+        const dateRevert = () => {
+            const panelLabel = computePanelLabel.value;
+            handleInputLabel(panelLabel, true);
+        };
+        const afterCheckValue = (inpVal) => {
+            const { type } = props;
+            const { inputLabel } = internalData;
+            const dateLabelFormat = computeDateLabelFormat.value;
+            if (!inpVal) {
+                handleChange('', { type: 'check' });
+                return;
+            }
+            let inpDateVal = parseDateValue(inpVal, type, {
+                valueFormat: dateLabelFormat
+            });
+            if (!XEUtils.isValidDate(inpDateVal)) {
+                dateRevert();
+                return;
+            }
+            if (type === 'time') {
+                inpDateVal = XEUtils.toDateString(inpDateVal, dateLabelFormat);
+                if (inputLabel !== inpDateVal) {
+                    handleChange(inpDateVal, { type: 'check' });
+                }
+                handleInputLabel(inpDateVal, true);
+                return;
+            }
+            let isChange = false;
+            const firstDayOfWeek = computeFirstDayOfWeek.value;
+            if (type === 'datetime') {
+                const dateValue = reactData.inputValue;
+                if (inpVal !== XEUtils.toDateString(dateValue, dateLabelFormat) || inpVal !== XEUtils.toDateString(inpDateVal, dateLabelFormat)) {
+                    isChange = true;
+                }
+            }
+            else {
+                isChange = true;
+            }
+            const label = XEUtils.toDateString(inpDateVal, dateLabelFormat, { firstDay: firstDayOfWeek });
+            handleInputLabel(label, true);
+            if (isChange) {
+                dateChange(inpDateVal);
+            }
+        };
         const clearValueEvent = (evnt, value) => {
             const isDatePickerType = computeIsDatePickerType.value;
             if (isDatePickerType) {
@@ -18019,29 +18246,296 @@ var VxeDatePickerComponent = defineVxeComponent({
                 dispatchEvent('suffix-click', { value: inputValue }, evnt);
             }
         };
-        const handleArrowInputDate = (evnt, isUpArrow) => {
+        const handleArrowInputDate = (evnt, isUpArrow, isDwArrow, isLtArrow, isRtArrow) => {
+            const { type, multiple } = props;
+            if (multiple) {
+                return;
+            }
+            const targetElem = refInputTarget.value;
+            if (!targetElem) {
+                return;
+            }
+            const inpValue = targetElem.value;
+            if (!inpValue) {
+                return;
+            }
+            const dateMaskedFormat = computeDateMaskedFormat.value;
+            const dateLabelFormat = computeDateLabelFormat.value;
+            const firstDayOfWeek = computeFirstDayOfWeek.value;
+            const maskChar = computeMaskChar.value;
+            const selectionStart = targetElem.selectionStart || 0;
+            let selectKey = dateMaskedFormat[selectionStart];
+            if (!parseInputKayMaps[selectKey]) {
+                selectKey = dateMaskedFormat[selectionStart - 1];
+            }
+            const skRest = dateMaskedFormat.match(new RegExp(selectKey + '+'));
+            if (!skRest) {
+                return;
+            }
+            if (isUpArrow || isDwArrow) {
+                const chunkFormat = skRest[0] || '';
+                const chunkStartIndex = skRest.index || 0;
+                const chunkEndIndex = chunkStartIndex + chunkFormat.length;
+                const chunkValue = inpValue.slice(chunkStartIndex, chunkEndIndex);
+                if (parseInputKayMaps[selectKey]) {
+                    const chunkNum = (isAllSameChar(chunkValue, maskChar) ? getChunkDefaultNum(selectKey) : XEUtils.toNumber(chunkValue)) + (isUpArrow ? 1 : -1);
+                    const restValue = inpValue.slice(0, chunkStartIndex) + XEUtils.padStart(chunkNum, chunkFormat.length, '0') + inpValue.slice(chunkEndIndex);
+                    evnt.preventDefault();
+                    if (restValue.indexOf(maskChar) === -1) {
+                        // 解析日期
+                        const inpDateVal = parseDateValue(restValue, type, {
+                            valueFormat: dateLabelFormat
+                        });
+                        if (XEUtils.isValidDate(inpDateVal)) {
+                            const label = XEUtils.toDateString(inpDateVal, dateLabelFormat, { firstDay: firstDayOfWeek });
+                            targetElem.value = label;
+                            handleInputLabel(label, false);
+                        }
+                    }
+                    else {
+                        targetElem.value = restValue;
+                        handleInputLabel(restValue, false);
+                    }
+                }
+                targetElem.setSelectionRange(chunkStartIndex, chunkEndIndex);
+            }
+            else if (isLtArrow || isRtArrow) {
+                const currKeyIndex = inputMaskedKeys.indexOf(selectKey);
+                if (currKeyIndex > -1) {
+                    const allMaskedKeys = XEUtils.map(dateMaskedFormat.match(new RegExp(`(${inputMaskedKeys.join('|')})+`, 'g')) || [], fullKey => fullKey[0]);
+                    const currIndex = XEUtils.findIndexOf(allMaskedKeys, key => selectKey === key[0]);
+                    const targetFormatKey = isLtArrow ? (allMaskedKeys[currIndex - 1] || allMaskedKeys[0]) : (allMaskedKeys[currIndex + 1] || allMaskedKeys[allMaskedKeys.length - 1]);
+                    const targetKey = targetFormatKey ? targetFormatKey[0] : '';
+                    const sktRest = dateMaskedFormat.match(new RegExp(targetKey + '+'));
+                    if (sktRest) {
+                        evnt.preventDefault();
+                        const mtStartIndex = sktRest.index || 0;
+                        const mtEndIndex = mtStartIndex + sktRest[0].length;
+                        targetElem.setSelectionRange(mtStartIndex, mtEndIndex);
+                    }
+                }
+            }
+            internalData.isTriggerMasked = true;
+        };
+        const handleMaskedInputDate = (evnt) => {
             const { multiple } = props;
             if (multiple) {
                 return;
             }
-            const { inputValue } = reactData;
-            if (!inputValue) {
+            const targetElem = refInputTarget.value;
+            if (!targetElem) {
+                return;
+            }
+            const isControlKey = hasControlKey(evnt);
+            if (isControlKey) {
+                return;
+            }
+            evnt.preventDefault();
+            const eKey = evnt.key;
+            const isDeleleKey = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.DELETE);
+            const isBackspaceKey = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.BACKSPACE);
+            const isNumKey = eKey >= '0' && eKey <= '9';
+            const numKey = isNumKey ? evnt.key : '';
+            if (!(isDeleleKey || isBackspaceKey || isNumKey)) {
+                return;
+            }
+            const { isTriggerMasked } = internalData;
+            const dateMaskedFormat = computeDateMaskedFormat.value;
+            const maskChar = computeMaskChar.value;
+            let inpValue = targetElem.value || dateMaskedFormat;
+            const selectionStart = targetElem.selectionStart || 0;
+            const selectionEnd = targetElem.selectionEnd || 0;
+            let selectKey = dateMaskedFormat[selectionStart];
+            if (!parseInputKayMaps[selectKey]) {
+                selectKey = dateMaskedFormat[selectionStart - 1];
+            }
+            const skRest = dateMaskedFormat.match(new RegExp(selectKey + '+'));
+            if (!skRest) {
+                return;
+            }
+            const allMaskedKeys = XEUtils.map(dateMaskedFormat.match(new RegExp(`(${inputMaskedKeys.join('|')})+`, 'g')) || [], fullKey => fullKey[0]);
+            const chunkFormat = skRest[0] || '';
+            const chunkStartIndex = skRest.index || 0;
+            const chunkEndIndex = chunkStartIndex + chunkFormat.length;
+            const currKeyIndex = allMaskedKeys.indexOf(selectKey);
+            // 全选 | 如果无效字符
+            const isAllSelected = !selectionStart && selectionEnd === inpValue.length;
+            const isNotMasked = inpValue && inpValue.length !== dateMaskedFormat.length;
+            if (isAllSelected || isNotMasked) {
+                inpValue = dateMaskedFormat;
+            }
+            let chunkValue = isDeleleKey ? '' : inpValue.slice(chunkStartIndex, chunkEndIndex);
+            const chunkNums = (chunkValue.match(/\d/g) || []);
+            const chunkNumList = isTriggerMasked && !isBackspaceKey ? [] : chunkNums.slice(0);
+            if (isNumKey) {
+                chunkNumList.push(numKey);
+            }
+            else if (isBackspaceKey) {
+                chunkNumList.pop();
+            }
+            chunkValue = chunkNumList.join('').padEnd(chunkFormat.length, maskChar);
+            let restValue = inpValue.slice(0, chunkStartIndex) + chunkValue + inpValue.slice(chunkEndIndex);
+            restValue = restValue.replace(new RegExp(`(${inputMaskedKeys.join('|')})`, 'g'), maskChar);
+            targetElem.value = restValue;
+            handleInputLabel(restValue, false);
+            // 如果是全选/删除
+            if (isAllSelected) {
+                if (isBackspaceKey || isDeleleKey) {
+                    const firstMaskedKeys = allMaskedKeys[0];
+                    const firstSkRest = dateMaskedFormat.match(new RegExp(`${firstMaskedKeys}+`));
+                    if (firstSkRest) {
+                        const firstChunkFormat = firstSkRest[0];
+                        targetElem.setSelectionRange(0, firstChunkFormat.length);
+                        internalData.isTriggerMasked = true;
+                        return;
+                    }
+                }
+            }
+            else {
+                if (isBackspaceKey && !chunkNums.length) {
+                    // 回退到上一个数字块
+                    for (let i = currKeyIndex - 1; i >= 0; i--) {
+                        const prveChunkKey = allMaskedKeys[i];
+                        const prveSkRest = dateMaskedFormat.match(new RegExp(`${prveChunkKey}+`));
+                        if (prveSkRest) {
+                            const prveChunkFormat = prveSkRest[0];
+                            const prveChunkStartIndex = prveSkRest.index || 0;
+                            const prveChunkEndIndex = prveChunkStartIndex + prveChunkFormat.length;
+                            let prveChunkValue = restValue.slice(prveChunkStartIndex, prveChunkEndIndex);
+                            const prveChunkNums = (prveChunkValue.match(/\d/g) || []);
+                            if (prveChunkNums.length) {
+                                prveChunkNums.pop();
+                                prveChunkValue = prveChunkNums.join('').padEnd(prveChunkFormat.length, maskChar);
+                                restValue = restValue.slice(0, prveChunkStartIndex) + prveChunkValue + restValue.slice(prveChunkEndIndex);
+                                targetElem.value = restValue;
+                                handleInputLabel(restValue, false);
+                                targetElem.setSelectionRange(prveChunkStartIndex, prveChunkEndIndex);
+                                return;
+                            }
+                        }
+                    }
+                    const firstMaskedKeys = allMaskedKeys[0];
+                    const firstSkRest = dateMaskedFormat.match(new RegExp(`${firstMaskedKeys}+`));
+                    if (firstSkRest) {
+                        const firstChunkFormat = firstSkRest[0];
+                        restValue = dateMaskedFormat.replace(new RegExp(`(${inputMaskedKeys.join('|')})`, 'g'), maskChar);
+                        targetElem.value = restValue;
+                        handleInputLabel(restValue, false);
+                        targetElem.setSelectionRange(0, firstChunkFormat.length);
+                        internalData.isTriggerMasked = true;
+                        return;
+                    }
+                    return;
+                }
+            }
+            let maskStartIndex = skRest.index || 0;
+            let maskEndIndex = maskStartIndex + skRest[0].length;
+            // 如果输入完成，跳转下一个
+            if (chunkNumList.length >= chunkValue.length) {
+                const nextKeys = allMaskedKeys.slice(currKeyIndex + 1);
+                if (currKeyIndex > -1) {
+                    const nextRest = nextKeys.length ? dateMaskedFormat.match(new RegExp(`(${nextKeys.join('|')})+`)) : null;
+                    // 如果当前数字块已输入，则跳转下一个数字块
+                    if (nextRest) {
+                        maskStartIndex = nextRest.index || 0;
+                        maskEndIndex = maskStartIndex + nextRest[0].length;
+                        targetElem.setSelectionRange(maskStartIndex, maskEndIndex);
+                    }
+                    else {
+                        targetElem.setSelectionRange(maskStartIndex, maskEndIndex);
+                    }
+                }
+                internalData.isTriggerMasked = true;
+                return;
+            }
+            targetElem.setSelectionRange(maskStartIndex, maskEndIndex);
+            internalData.isTriggerMasked = false;
+        };
+        const handleMaskedSelectedDate = (evnt, isFocus) => {
+            const { type, multiple, modelValue } = props;
+            if (multiple) {
+                return;
+            }
+            if (!maskedTypes.includes(type)) {
                 return;
             }
             const targetElem = refInputTarget.value;
             if (!targetElem) {
                 return;
             }
-            const { parseInputKayMaps } = internalData;
-            const inputFormat = computeDateInputFormat.value;
+            const { laseFocusMasked } = internalData;
+            if (laseFocusMasked && Date.now() - laseFocusMasked < 100) {
+                return;
+            }
+            const dateMaskedFormat = computeDateMaskedFormat.value;
+            const maskChar = computeMaskChar.value;
             const selectionStart = targetElem.selectionStart || 0;
-            let selectKey = inputFormat[selectionStart];
+            const selectionEnd = targetElem.selectionEnd || 0;
+            const inpValue = targetElem.value;
+            const allMaskedKeys = XEUtils.map(dateMaskedFormat.match(new RegExp(`(${inputMaskedKeys.join('|')})+`, 'g')) || [], fullKey => fullKey[0]);
+            // 如果为空
+            if (!inpValue) {
+                let restValue = dateMaskedFormat.replace(new RegExp(`(${inputMaskedKeys.join('|')})`, 'g'), maskChar);
+                // 还原值
+                if (isFocus && modelValue) {
+                    const chunkNums = (('' + XEUtils.toNumber(modelValue)).match(/\d/g) || []);
+                    let useNumIndex = 0;
+                    restValue = dateMaskedFormat.replace(new RegExp(`(${inputMaskedKeys.join('|')})`, 'g'), (txt) => chunkNums[useNumIndex++] || txt);
+                }
+                const firstMaskedKeys = allMaskedKeys[0];
+                const firstSkRest = dateMaskedFormat.match(new RegExp(`${firstMaskedKeys}+`));
+                if (firstSkRest) {
+                    evnt.preventDefault();
+                    const firstChunkFormat = firstSkRest[0];
+                    targetElem.value = restValue;
+                    handleInputLabel(restValue, false);
+                    targetElem.setSelectionRange(0, firstChunkFormat.length);
+                    internalData.laseFocusMasked = Date.now();
+                    return;
+                }
+            }
+            // 全选 | 如果无效字符
+            const isAllSelected = !selectionStart && selectionEnd === inpValue.length;
+            const isNotMasked = inpValue && inpValue.length !== dateMaskedFormat.length;
+            if (isAllSelected || isNotMasked) {
+                let restValue = '';
+                // 还原值
+                if (isNotMasked && inpValue) {
+                    const chunkNums = inpValue.match(/\d/g) || [];
+                    let useNumIndex = 0;
+                    restValue = dateMaskedFormat.replace(new RegExp(`(${inputMaskedKeys.join('|')})`, 'g'), () => chunkNums[useNumIndex++] || maskChar);
+                }
+                else {
+                    dateMaskedFormat.replace(new RegExp(`(${inputMaskedKeys.join('|')})`, 'g'), maskChar);
+                }
+                const firstMaskedKeys = allMaskedKeys[0];
+                const firstSkRest = dateMaskedFormat.match(new RegExp(`${firstMaskedKeys}+`));
+                if (firstSkRest) {
+                    evnt.preventDefault();
+                    const firstChunkFormat = firstSkRest[0];
+                    targetElem.value = restValue;
+                    handleInputLabel(restValue, false);
+                    targetElem.setSelectionRange(0, firstChunkFormat.length);
+                    internalData.laseFocusMasked = Date.now();
+                    return;
+                }
+            }
+            // 是否选择数字块
+            let selectKey = dateMaskedFormat[selectionStart];
             if (!parseInputKayMaps[selectKey]) {
-                selectKey = inputFormat[selectionStart - 1];
+                selectKey = dateMaskedFormat[selectionStart - 1];
             }
-            const inputPaesrFn = parseInputKayMaps[selectKey];
-            if (inputPaesrFn) {
-                inputPaesrFn(evnt, targetElem, isUpArrow);
+            if (selectKey) {
+                evnt.preventDefault();
+                const skRest = dateMaskedFormat.match(new RegExp(selectKey + '+'));
+                if (skRest) {
+                    const chunkFormat = skRest[0] || '';
+                    const chunkStartIndex = skRest.index || 0;
+                    const chunkEndIndex = chunkStartIndex + chunkFormat.length;
+                    targetElem.setSelectionRange(chunkStartIndex, chunkEndIndex);
+                    internalData.isTriggerMasked = true;
+                    internalData.laseFocusMasked = Date.now();
+                }
             }
         };
         const blurEvent = (evnt) => {
@@ -18053,10 +18547,14 @@ var VxeDatePickerComponent = defineVxeComponent({
                 handleChange(value, evnt);
             }
             if (!reactData.visiblePanel) {
+                const { inputLabel } = internalData;
                 reactData.isActivated = false;
                 // 未打开面板时才校验
                 if ($datePanel) {
-                    $datePanel.checkValue(reactData.inputLabel);
+                    $datePanel.checkValue(inputLabel);
+                }
+                else {
+                    afterCheckValue(inputLabel);
                 }
             }
             dispatchEvent('blur', { value }, evnt);
@@ -18065,13 +18563,80 @@ var VxeDatePickerComponent = defineVxeComponent({
                 $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
             }
         };
+        const focusEvent = (evnt) => {
+            const { multiple, editable, maskedConfig } = props;
+            const maskedOpts = computeMaskedOpts.value;
+            const popupOpts = computePopupOpts.value;
+            const { trigger } = popupOpts;
+            reactData.isActivated = true;
+            if (!trigger || trigger === 'default') {
+                datePickerOpenEvent(evnt);
+                setTimeout(() => {
+                    if (editable && !multiple && (isEnableConf(maskedConfig) || maskedOpts.enabled)) {
+                        handleMaskedSelectedDate(evnt, true);
+                    }
+                }, 15);
+            }
+            else if (trigger === 'icon') {
+                hidePanel();
+                setTimeout(() => {
+                    if (editable && !multiple && (isEnableConf(maskedConfig) || maskedOpts.enabled)) {
+                        handleMaskedSelectedDate(evnt, true);
+                    }
+                }, 15);
+            }
+            else {
+                if (editable && !multiple && (isEnableConf(maskedConfig) || maskedOpts.enabled)) {
+                    handleMaskedSelectedDate(evnt, true);
+                }
+            }
+            triggerEvent(evnt);
+        };
+        const clickEvent = (evnt) => {
+            const { editable, maskedConfig } = props;
+            const maskedOpts = computeMaskedOpts.value;
+            if (editable && (isEnableConf(maskedConfig) || maskedOpts.enabled)) {
+                handleMaskedSelectedDate(evnt);
+            }
+            triggerEvent(evnt);
+        };
         const keydownEvent = (evnt) => {
-            const { controlConfig } = props;
-            const controlOpts = computeControlOpts.value;
+            const { type, editable, maskedConfig } = props;
+            const { visiblePanel } = reactData;
+            const maskedOpts = computeMaskedOpts.value;
             const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
             const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
-            if ((isUpArrow || isDwArrow) && controlOpts.isArrow && (controlConfig || controlOpts.enabled)) {
-                handleArrowInputDate(evnt, isUpArrow);
+            const isLtArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_LEFT);
+            const isRtArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_RIGHT);
+            const isEnter = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ENTER);
+            if (editable) {
+                if (isEnter) {
+                    const $datePanel = refDatePanel.value;
+                    const { inputLabel } = internalData;
+                    const targetElem = refInputTarget.value;
+                    if (visiblePanel) {
+                        hidePanel();
+                    }
+                    if ($datePanel) {
+                        $datePanel.checkValue(inputLabel);
+                    }
+                    else {
+                        afterCheckValue(inputLabel);
+                    }
+                    if (targetElem) {
+                        targetElem.blur();
+                    }
+                }
+                else if (maskedTypes.includes(type)) {
+                    if (isEnableConf(maskedConfig) || maskedOpts.enabled) {
+                        if (maskedOpts.isArrow && (isUpArrow || isDwArrow || isLtArrow || isRtArrow)) {
+                            handleArrowInputDate(evnt, isUpArrow, isDwArrow, isLtArrow, isRtArrow);
+                        }
+                        else if (maskedOpts.isMasked) {
+                            handleMaskedInputDate(evnt);
+                        }
+                    }
+                }
             }
             triggerEvent(evnt);
         };
@@ -18100,7 +18665,7 @@ var VxeDatePickerComponent = defineVxeComponent({
             dispatchEvent('confirm', params, params.$event);
         };
         const panelRevertEvent = (params) => {
-            reactData.inputLabel = params.label;
+            handleInputLabel(params.label, true);
         };
         // 全局事件
         const handleGlobalMousedownEvent = (evnt) => {
@@ -18110,25 +18675,34 @@ var VxeDatePickerComponent = defineVxeComponent({
             const panelWrapperElem = refPanelWrapper.value;
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled && isActivated) {
-                reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelWrapperElem).flag;
-                if (!reactData.isActivated) {
+                const currActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelWrapperElem).flag;
+                if (currActivated !== isActivated) {
+                    reactData.isActivated = currActivated;
+                }
+                if (!currActivated) {
                     if (visiblePanel) {
                         hidePanel();
+                        const { inputLabel } = internalData;
                         if ($datePanel) {
-                            $datePanel.checkValue(reactData.inputLabel);
+                            $datePanel.checkValue(inputLabel);
+                        }
+                        else {
+                            afterCheckValue(inputLabel);
                         }
                     }
                 }
             }
         };
         const handleGlobalKeydownEvent = (evnt) => {
-            const { visiblePanel } = reactData;
+            const { isActivated, visiblePanel } = reactData;
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled) {
                 const isTab = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.TAB);
                 const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
                 if (isTab) {
-                    reactData.isActivated = false;
+                    if (isActivated) {
+                        reactData.isActivated = false;
+                    }
                 }
                 if (visiblePanel) {
                     if (isEsc || isTab) {
@@ -18163,7 +18737,7 @@ var VxeDatePickerComponent = defineVxeComponent({
             }
             if (visiblePanel || isActivated) {
                 if ($datePanel) {
-                    $datePanel.checkValue(reactData.inputLabel);
+                    $datePanel.checkValue(internalData.inputLabel);
                 }
                 const targetElem = refInputTarget.value;
                 if (targetElem) {
@@ -18255,9 +18829,6 @@ var VxeDatePickerComponent = defineVxeComponent({
                 }
             }
         };
-        const clickEvent = (evnt) => {
-            triggerEvent(evnt);
-        };
         const handleShortcutEvent = ({ option, $event }) => {
             const { type } = props;
             const { inputValue } = reactData;
@@ -18296,7 +18867,7 @@ var VxeDatePickerComponent = defineVxeComponent({
                             break;
                         }
                         default:
-                            errLog('vxe.error.notCommands', [`[date-picker] ${code}`]);
+                            errLog$e('vxe.error.notCommands', [code]);
                             break;
                     }
                 }
@@ -18581,7 +19152,8 @@ var VxeDatePickerComponent = defineVxeComponent({
         };
         const renderVN = () => {
             const { className, type, name, autoComplete } = props;
-            const { inputValue, inputLabel, visiblePanel, isActivated } = reactData;
+            const { inputValue, visiblePanel, isActivated, labelFlag } = reactData;
+            const { inputLabel } = internalData;
             const vSize = computeSize.value;
             const isDisabled = computeIsDisabled.value;
             const formReadonly = computeFormReadonly.value;
@@ -18617,7 +19189,7 @@ var VxeDatePickerComponent = defineVxeComponent({
                     h('input', {
                         ref: refInputTarget,
                         class: 'vxe-date-picker--inner',
-                        value: inputLabel,
+                        value: labelFlag ? inputLabel : '',
                         name,
                         type: 'text',
                         placeholder: inpPlaceholder,
@@ -18639,7 +19211,7 @@ var VxeDatePickerComponent = defineVxeComponent({
             ]);
         };
         watch(computePanelLabel, (val) => {
-            reactData.inputLabel = val;
+            handleInputLabel(val, true);
         });
         watch(() => props.modelValue, () => {
             updateModelValue();
@@ -18652,13 +19224,15 @@ var VxeDatePickerComponent = defineVxeComponent({
             globalEvents.on($xeDatePicker, 'resize', handleGlobalResizeEvent);
         });
         onMounted(() => {
-            const { parseInputKayMaps } = internalData;
-            const inputKeys = ['y', 'M', 'd', 'H', 'm', 'n'];
-            inputKeys.forEach(key => {
-                parseInputKayMaps[key] = (evnt) => {
-                    evnt.preventDefault();
-                };
-            });
+            const { type, multiple, maskedConfig } = props;
+            if (isEnableConf(maskedConfig)) {
+                if (multiple) {
+                    errLog$e('vxe.error.notSupportProp', ['multiple', 'control-config.enabled=true', 'control-config.enabled=false']);
+                }
+                if (!maskedTypes.includes(type)) {
+                    warnLog$8('vxe.error.notSupportProp', ['control-config.enabled=true', `type=${type}`, `type=${maskedTypes.join('|')}`]);
+                }
+            }
         });
         onUnmounted(() => {
             globalEvents.off($xeDatePicker, 'mousewheel');
@@ -18685,6 +19259,7 @@ dynamicApp.use(VxeDatePicker);
 VxeUI.component(VxeDatePickerComponent);
 const DatePicker = VxeDatePicker;
 
+const { errLog: errLog$d } = createComponentLog('date-range-picker');
 var VxeDateRangePickerComponent = defineVxeComponent({
     name: 'VxeDateRangePicker',
     props: {
@@ -19562,7 +20137,7 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                             break;
                         }
                         default:
-                            errLog('vxe.error.notCommands', [`[date-range-picker] ${code}`]);
+                            errLog$d('vxe.error.notCommands', [code]);
                             break;
                     }
                 }
@@ -20090,6 +20665,7 @@ var VxeDrawerComponent = defineVxeComponent({
             type: Boolean,
             default: () => getConfig$3().drawer.showTitleOverflow
         },
+        preload: Boolean,
         width: [Number, String],
         height: [Number, String],
         resize: {
@@ -20596,6 +21172,7 @@ var VxeDrawerComponent = defineVxeComponent({
             }
         });
         onMounted(() => {
+            reactData.initialized = !!props.preload;
             nextTick(() => {
                 if (props.modelValue) {
                     openDrawer();
@@ -20765,6 +21342,7 @@ dynamicApp.use(VxeEmpty);
 VxeUI.component(VxeEmptyComponent);
 const Empty = VxeEmpty;
 
+const { errLog: errLog$c } = createComponentLog('form');
 class ItemInfo {
     constructor($xeForm, item) {
         const { field, itemRender, formatter } = item;
@@ -20772,22 +21350,22 @@ class ItemInfo {
             if (XEUtils.isString(formatter)) {
                 const gFormatOpts = formats.get(formatter);
                 if (!gFormatOpts || !gFormatOpts.formItemFormatMethod) {
-                    errLog('vxe.error.notFormats', [`[form] ${formatter}`]);
+                    errLog$c('vxe.error.notFormats', [formatter]);
                 }
             }
             else if (XEUtils.isArray(formatter)) {
                 const gFormatOpts = formats.get(formatter[0]);
                 if (!gFormatOpts || !gFormatOpts.formItemFormatMethod) {
-                    errLog('vxe.error.notFormats', [`[form] ${formatter[0]}`]);
+                    errLog$c('vxe.error.notFormats', [formatter[0]]);
                 }
             }
         }
         if (field && itemRender) {
             if (itemRender.startField && `${itemRender.startField}`.indexOf(field) >= 0) {
-                errLog('vxe.error.modelConflicts', [`[form] field=${field}`, `item-render.startField=${itemRender.startField}`]);
+                errLog$c('vxe.error.modelConflicts', [`field=${field}`, `item-render.startField=${itemRender.startField}`]);
             }
             if (itemRender.endField && `${itemRender.endField}`.indexOf(field) >= 0) {
-                errLog('vxe.error.modelConflicts', [`[form] field=${field}`, `item-render.endField=${itemRender.endField}`]);
+                errLog$c('vxe.error.modelConflicts', [`field=${field}`, `item-render.endField=${itemRender.endField}`]);
             }
         }
         Object.assign(this, {
@@ -21511,6 +22089,7 @@ const VxeFormConfigItem = defineVxeComponent({
     }
 });
 
+const { errLog: errLog$b } = createComponentLog('form');
 const componentDefaultModelProp = 'modelValue';
 /**
  * 已废弃
@@ -21597,7 +22176,7 @@ function getComponentOns(renderOpts, params, eFns, eventOns) {
     XEUtils.objectEach(events, (func, key) => {
         ons[getOnName(key)] = function (...args) {
             if (!XEUtils.isFunction(func)) {
-                errLog('vxe.error.errFunc', [`[form] ${func}`]);
+                errLog$b('vxe.error.errFunc', [func]);
             }
             func(params, ...args);
         };
@@ -22024,6 +22603,7 @@ renderer.mixin({
     // 以上已废弃
 });
 
+const { warnLog: warnLog$7, errLog: errLog$a } = createComponentLog('form');
 class Rule {
     constructor(rule) {
         Object.assign(this, {
@@ -22144,7 +22724,7 @@ function checkRuleStatus(rule, data, val) {
     }
     return true;
 }
-function createReactData$6() {
+function createReactData$9() {
     return {
         collapseAll: false,
         staticItems: [],
@@ -22261,7 +22841,7 @@ var VxeFormComponent = defineVxeComponent({
         const $xeGrid = inject('$xeGrid', null);
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const reactData = reactive(createReactData$6());
+        const reactData = reactive(createReactData$9());
         const internalData = createInternalData$8();
         const refElem = ref();
         const refTooltip = ref();
@@ -22332,7 +22912,7 @@ var VxeFormComponent = defineVxeComponent({
                         XEUtils.each(item.slots, (func) => {
                             if (!XEUtils.isFunction(func)) {
                                 if (!slots[func]) {
-                                    errLog('vxe.error.notSlot', [`[form] ${func}`]);
+                                    errLog$a('vxe.error.notSlot', [func]);
                                 }
                             }
                         });
@@ -22555,11 +23135,11 @@ var VxeFormComponent = defineVxeComponent({
                                                 customValid = validatorMethod(validParams);
                                             }
                                             else {
-                                                warnLog('vxe.error.notValidators', [`[form] ${validator}`]);
+                                                warnLog$7('vxe.error.notValidators', [validator]);
                                             }
                                         }
                                         else {
-                                            errLog('vxe.error.notValidators', [`[form] ${validator}`]);
+                                            errLog$a('vxe.error.notValidators', [validator]);
                                         }
                                     }
                                     else {
@@ -22949,7 +23529,7 @@ var VxeFormComponent = defineVxeComponent({
         onMounted(() => {
             nextTick(() => {
                 if (props.customLayout && props.items) {
-                    errLog('vxe.error.errConflicts', ['[form] custom-layout', 'items']);
+                    errLog$a('vxe.error.errConflicts', ['custom-layout', 'items']);
                 }
             });
             globalEvents.on($xeForm, 'resize', handleGlobalResizeEvent);
@@ -24366,7 +24946,7 @@ function createInternalData$7() {
     // mdTime: 0
     };
 }
-function createReactData$5() {
+function createReactData$8() {
     return {};
 }
 var VxeImageComponent = defineVxeComponent({
@@ -24426,7 +25006,7 @@ var VxeImageComponent = defineVxeComponent({
         const refElem = ref();
         const { computeSize } = useSize(props);
         const internalData = createInternalData$7();
-        const reactData = reactive(createReactData$5());
+        const reactData = reactive(createReactData$8());
         const refMaps = {
             refElem
         };
@@ -24612,7 +25192,7 @@ var VxeImageComponent = defineVxeComponent({
             ]);
         };
         onBeforeUnmount(() => {
-            XEUtils.assign(reactData, createReactData$5());
+            XEUtils.assign(reactData, createReactData$8());
             XEUtils.assign(internalData, createInternalData$7());
         });
         $xeImage.renderVN = renderVN;
@@ -24905,7 +25485,7 @@ const LayoutAside = VxeLayoutAside;
 function createInternalData$6() {
     return {};
 }
-function createReactData$4() {
+function createReactData$7() {
     return {};
 }
 var VxeLayoutBodyComponent = defineVxeComponent({
@@ -24931,7 +25511,7 @@ var VxeLayoutBodyComponent = defineVxeComponent({
         const refElem = ref();
         const { computeSize } = useSize(props);
         const internalData = createInternalData$6();
-        const reactData = reactive(createReactData$4());
+        const reactData = reactive(createReactData$7());
         const refMaps = {
             refElem
         };
@@ -25355,6 +25935,7 @@ dynamicApp.use(VxeList);
 VxeUI.component(VxeListComponent);
 const List = VxeList;
 
+const { errLog: errLog$9 } = createComponentLog('menu');
 const { menus: menus$1, getConfig: getConfig$1, getIcon: getIcon$1 } = VxeUI;
 var VxeMenuComponent = defineVxeComponent({
     name: 'VxeMenu',
@@ -25841,7 +26422,7 @@ var VxeMenuComponent = defineVxeComponent({
             const { menuConfig } = props;
             const VxeUIContextMenu = VxeUI.getComponent('VxeContextMenu');
             if (menuConfig && !VxeUIContextMenu) {
-                errLog('vxe.error.reqComp', ['vxe-context-menu']);
+                errLog$9('vxe.error.reqComp', ['vxe-context-menu']);
             }
             globalEvents.on($xeMenu, 'resize', updateCollapseStyle);
             updateCollapseStyle();
@@ -25875,6 +26456,7 @@ dynamicApp.use(VxeMenu);
 VxeUI.component(VxeMenuComponent);
 const Menu = VxeMenu;
 
+const { warnLog: warnLog$6, errLog: errLog$8 } = createComponentLog('modal');
 const allActiveModals = [];
 const msgQueue = [];
 const notifyQueue = [];
@@ -25961,6 +26543,7 @@ var VxeModalComponent = defineVxeComponent({
             type: Boolean,
             default: () => getConfig$3().modal.showFooter
         },
+        preload: Boolean,
         showZoom: Boolean,
         zoomConfig: Object,
         showMaximize: {
@@ -27260,11 +27843,12 @@ var VxeModalComponent = defineVxeComponent({
         });
         onMounted(() => {
             if (props.type === 'modal' && props.showFooter && !(props.showConfirmButton || props.showCancelButton || slots.footer)) {
-                warnLog('vxe.modal.footPropErr');
+                warnLog$6('vxe.modal.footPropErr');
             }
+            reactData.initialized = !!props.preload;
             nextTick(() => {
                 if (props.storage && !props.id) {
-                    errLog('vxe.error.reqProp', ['[modal] id']);
+                    errLog$8('vxe.error.reqProp', ['id']);
                 }
                 if (props.modelValue) {
                     openModal();
@@ -27716,12 +28300,34 @@ dynamicApp.use(VxeOption);
 VxeUI.component(VxeOptionComponent);
 const Option = VxeOption;
 
+const { errLog: errLog$7 } = createComponentLog('select');
 function isOptionVisible(option) {
     return option.visible !== false;
 }
 function getOptUniqueId$1() {
     return XEUtils.uniqueId('opt_');
 }
+function createReactData$6() {
+    return {
+        initialized: false,
+        scrollYLoad: false,
+        bodyHeight: 0,
+        topSpaceHeight: 0,
+        optList: [],
+        staticOptions: [],
+        reactFlag: 0,
+        currentOption: null,
+        searchValue: '',
+        searchLoading: false,
+        panelIndex: 0,
+        panelStyle: {},
+        panelPlacement: null,
+        triggerFocusPanel: false,
+        visiblePanel: false,
+        isAniVisible: false,
+        isActivated: false
+    };
+}
 function createInternalData$5() {
     return {
         // isLoaded: false,
@@ -27897,25 +28503,7 @@ var VxeSelectComponent = defineVxeComponent({
         const refOptionPanel = ref();
         const refVirtualBody = ref();
         const { computeSize } = useSize(props);
-        const reactData = reactive({
-            initialized: false,
-            scrollYLoad: false,
-            bodyHeight: 0,
-            topSpaceHeight: 0,
-            optList: [],
-            staticOptions: [],
-            reactFlag: 0,
-            currentOption: null,
-            searchValue: '',
-            searchLoading: false,
-            panelIndex: 0,
-            panelStyle: {},
-            panelPlacement: null,
-            triggerFocusPanel: false,
-            visiblePanel: false,
-            isAniVisible: false,
-            isActivated: false
-        });
+        const reactData = reactive(createReactData$6());
         const internalData = createInternalData$5();
         const refMaps = {
             refElem
@@ -28947,7 +29535,7 @@ var VxeSelectComponent = defineVxeComponent({
                             });
                         }
                         else {
-                            errLog('vxe.error.notConflictProp', ['default-config.selectMode=all', 'multiple=true']);
+                            errLog$7('vxe.error.notConflictProp', ['default-config.selectMode=all', 'multiple=true']);
                         }
                     }
                     else if (selectMode === 'first' || selectMode === 'last') {
@@ -29437,6 +30025,7 @@ var VxeSelectComponent = defineVxeComponent({
             globalEvents.off($xeSelect, 'keydown');
             globalEvents.off($xeSelect, 'blur');
             globalEvents.off($xeSelect, 'resize');
+            XEUtils.assign(reactData, createReactData$6());
             XEUtils.assign(internalData, createInternalData$5());
         });
         provide('$xeSelect', $xeSelect);
@@ -29448,6 +30037,7 @@ var VxeSelectComponent = defineVxeComponent({
     }
 });
 
+const { warnLog: warnLog$5, errLog: errLog$6 } = createComponentLog('pager');
 var VxePagerComponent = defineVxeComponent({
     name: 'VxePager',
     props: {
@@ -30049,7 +30639,7 @@ var VxePagerComponent = defineVxeComponent({
              * @deprecated
              */
             jumpPage(currentPage) {
-                warnLog('vxe.error.delFunc', ['[pager] jumpPage', 'setCurrentPage']);
+                warnLog$5('vxe.error.delFunc', ['jumpPage', 'setCurrentPage']);
                 return $xePager.setCurrentPage(currentPage);
             }
         };
@@ -30120,7 +30710,7 @@ var VxePagerComponent = defineVxeComponent({
                     childNodes.push(renderFn());
                 }
                 else {
-                    errLog('vxe.error.notProp', [`[pager] layouts -> ${name}`]);
+                    errLog$6('vxe.error.notProp', [`layouts -> ${name}`]);
                 }
             });
             if (slots.right) {
@@ -30646,7 +31236,7 @@ function handlePrint(opts, printHtml = '') {
     if (styleUrls && styleUrls.length) {
         styleUrls.forEach(url => {
             if (!/.css$/.test(url)) {
-                warnLog('vxe.error.errProp', [url, `${url}.css`]);
+                warnLog$b('vxe.error.errProp', [url, `${url}.css`]);
             }
         });
     }
@@ -31875,6 +32465,9 @@ dynamicApp.use(VxeRadioButton);
 VxeUI.component(VxeRadioButtonComponent);
 const RadioButton = VxeRadioButton;
 
+function createReactData$5() {
+    return {};
+}
 function createInternalData$4() {
     return {
     // isLoaded: false
@@ -31916,7 +32509,7 @@ var VxeRadioGroupComponent = defineVxeComponent({
         const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const reactData = reactive({});
+        const reactData = reactive(createReactData$5());
         const internalData = createInternalData$4();
         const computeIsReadonly = computed(() => {
             const { readonly } = props;
@@ -32053,6 +32646,7 @@ var VxeRadioGroupComponent = defineVxeComponent({
             });
         });
         onUnmounted(() => {
+            XEUtils.assign(reactData, createReactData$5());
             XEUtils.assign(internalData, createInternalData$4());
         });
         provide('$xeRadioGroup', $xeRadioGroup);
@@ -32438,7 +33032,7 @@ dynamicApp.use(VxeRow);
 VxeUI.component(VxeRowComponent);
 const Row = VxeRow;
 
-function createReactData$3() {
+function createReactData$4() {
     return {
         groupName: XEUtils.uniqueId('xe_group_'),
         selectStyle: {
@@ -32479,7 +33073,7 @@ var VxeSegmentedComponent = defineVxeComponent({
         const refElem = ref();
         const refWrapperElem = ref();
         const refSelectedElem = ref();
-        const reactData = reactive(createReactData$3());
+        const reactData = reactive(createReactData$4());
         const refMaps = {
             refElem
         };
@@ -32652,7 +33246,7 @@ var VxeSegmentedComponent = defineVxeComponent({
             updateStyle();
         });
         onBeforeUnmount(() => {
-            XEUtils.assign(reactData, createReactData$3());
+            XEUtils.assign(reactData, createReactData$4());
         });
         $xeSegmented.renderVN = renderVN;
         return $xeSegmented;
@@ -32680,6 +33274,7 @@ dynamicApp.use(VxeSelect);
 VxeUI.component(VxeSelectComponent);
 const Select = VxeSelect;
 
+const { warnLog: warnLog$4, errLog: errLog$5 } = createComponentLog('splitter');
 var VxeSplitComponent = defineVxeComponent({
     name: 'VxeSplitter',
     props: {
@@ -32879,13 +33474,13 @@ var VxeSplitComponent = defineVxeComponent({
             };
             reactData.itemList = list.map(item => {
                 if (item.showAction) {
-                    warnLog('vxe.error.removeProp', ['[splitter] show-action']);
+                    warnLog$4('vxe.error.removeProp', ['show-action']);
                 }
                 if (item.slots) {
                     XEUtils.each(item.slots, (func) => {
                         if (!XEUtils.isFunction(func)) {
                             if (!slots[func]) {
-                                errLog('vxe.error.notSlot', [`[splitter] ${func}`]);
+                                errLog$5('vxe.error.notSlot', [func]);
                             }
                         }
                     });
@@ -32895,10 +33490,10 @@ var VxeSplitComponent = defineVxeComponent({
                 });
             });
             if (staticItems.length) {
-                errLog('vxe.error.errConflicts', ['<vxe-splitter-panel ...>', 'items']);
+                errLog$5('vxe.error.errConflicts', ['<vxe-splitter-panel ...>', 'items']);
             }
             if ((showPrevButton || showNextButton) && reactData.itemList.length > 2) {
-                errLog('vxe.error.errConflicts', ['action-config.showPrevButton | action-config.showNextButton', 'Only supports 2 item']);
+                errLog$5('vxe.error.errConflicts', ['action-config.showPrevButton | action-config.showNextButton', 'Only supports 2 item']);
             }
             return recalculate();
         };
@@ -33584,15 +34179,15 @@ var VxeSplitComponent = defineVxeComponent({
             const actionOpts = computeActionOpts.value;
             const { showPrevButton, showNextButton } = actionOpts;
             if (props.items && props.items.length) {
-                errLog('vxe.error.errConflicts', ['<vxe-splitter-panel ...>', 'items']);
+                errLog$5('vxe.error.errConflicts', ['<vxe-splitter-panel ...>', 'items']);
             }
             reactData.itemList = val || [];
             if ((showPrevButton || showNextButton) && reactData.itemList.length > 2) {
-                errLog('vxe.error.modelConflicts', ['[splitter] action-config.showPrevButton | action-config.showNextButton', '<vxe-splitter-panel ...> Only supports 2 panel']);
+                errLog$5('vxe.error.modelConflicts', ['action-config.showPrevButton | action-config.showNextButton', '<vxe-splitter-panel ...> Only supports 2 panel']);
             }
             reactData.itemList.forEach(item => {
                 if (item.showAction) {
-                    warnLog('vxe.error.removeProp', ['[splitter] showAction']);
+                    warnLog$4('vxe.error.removeProp', ['showAction']);
                 }
             });
             recalculate();
@@ -33611,7 +34206,7 @@ var VxeSplitComponent = defineVxeComponent({
             }
             const actionOpts = computeActionOpts.value;
             if (actionOpts.direction) {
-                errLog('vxe.error.delProp', ['[splitter] action-config.direction', 'action-config.showPrevButton | action-config.showNextButton']);
+                errLog$5('vxe.error.delProp', ['action-config.direction', 'action-config.showPrevButton | action-config.showNextButton']);
             }
             globalEvents.on($xeSplitter, 'resize', handleGlobalResizeEvent);
         });
@@ -34458,9 +35053,24 @@ dynamicApp.use(VxeTabPane);
 VxeUI.component(VxeTabPaneComponent);
 const TabPane = VxeTabPane;
 
+const { errLog: errLog$4 } = createComponentLog('table-select');
 function getRowUniqueId() {
     return XEUtils.uniqueId('row_');
 }
+function createReactData$3() {
+    return {
+        initialized: false,
+        tableColumns: [],
+        fullOptionList: [],
+        panelIndex: 0,
+        panelStyle: {},
+        panelPlacement: null,
+        triggerFocusPanel: false,
+        visiblePanel: false,
+        isAniVisible: false,
+        isActivated: false
+    };
+}
 function createInternalData$3() {
     return {
         // hpTimeout: undefined,
@@ -34540,18 +35150,7 @@ var VxeTableSelectComponent = defineVxeComponent({
         const refGridWrapper = ref();
         const refOptionPanel = ref();
         const refGrid = ref();
-        const reactData = reactive({
-            initialized: false,
-            tableColumns: [],
-            fullOptionList: [],
-            panelIndex: 0,
-            panelStyle: {},
-            panelPlacement: null,
-            triggerFocusPanel: false,
-            visiblePanel: false,
-            isAniVisible: false,
-            isActivated: false
-        });
+        const reactData = reactive(createReactData$3());
         const internalData = createInternalData$3();
         const refMaps = {
             refElem
@@ -34806,12 +35405,12 @@ var VxeTableSelectComponent = defineVxeComponent({
                         rowid = getRowUniqueId();
                     }
                     if (keyMaps[rowid]) {
-                        errLog('vxe.error.repeatKey', [`[table-select] ${rowKeyField}`, rowid]);
+                        errLog$4('vxe.error.repeatKey', [rowKeyField, rowid]);
                     }
                     keyMaps[rowid] = true;
                     const value = item[valueField];
                     if (rowMaps[value]) {
-                        errLog('vxe.error.repeatKey', [`[table-select] ${valueField}`, value]);
+                        errLog$4('vxe.error.repeatKey', [valueField, value]);
                     }
                     rowMaps[value] = { item, index, items, parent: null, nodes: [] };
                 });
@@ -35155,11 +35754,12 @@ var VxeTableSelectComponent = defineVxeComponent({
             globalEvents.off($xeTableSelect, 'mousedown');
             globalEvents.off($xeTableSelect, 'blur');
             globalEvents.off($xeTableSelect, 'resize');
+            XEUtils.assign(reactData, createReactData$3());
             XEUtils.assign(internalData, createInternalData$3());
         });
         nextTick(() => {
             if (!VxeTableGridComponent) {
-                errLog('vxe.error.reqComp', ['[table-select] vxe-grid']);
+                errLog$4('vxe.error.reqComp', ['vxe-grid']);
             }
         });
         provide('$xeTableSelect', $xeTableSelect);
@@ -35180,6 +35780,7 @@ dynamicApp.use(VxeTableSelect);
 VxeUI.component(VxeTableSelectComponent);
 const TableSelect = VxeTableSelect;
 
+const { warnLog: warnLog$3, errLog: errLog$3 } = createComponentLog('tabs');
 const scrollbarOffsetSize = 20;
 var VxeTabsComponent = defineVxeComponent({
     name: 'VxeTabs',
@@ -35535,7 +36136,7 @@ var VxeTabsComponent = defineVxeComponent({
                     });
                 }
                 else {
-                    errLog('vxe.error.notFunc', ['refresh-config.queryMethod']);
+                    errLog$3('vxe.error.notFunc', ['refresh-config.queryMethod']);
                 }
             }
         };
@@ -35716,11 +36317,11 @@ var VxeTabsComponent = defineVxeComponent({
                 return handlePrevNext(true);
             },
             prevTab() {
-                warnLog('vxe.error.delFunc', ['[tabs] prevTab', 'prev']);
+                warnLog$3('vxe.error.delFunc', ['prevTab', 'prev']);
                 return tabsMethods.prev();
             },
             nextTab() {
-                warnLog('vxe.error.delFunc', ['[tabs] nextTab', 'next']);
+                warnLog$3('vxe.error.delFunc', ['nextTab', 'next']);
                 return tabsMethods.next();
             }
         };
@@ -36488,6 +37089,7 @@ dynamicApp.use(VxeText);
 VxeUI.component(VxeTextComponent);
 const Text = VxeText;
 
+const { warnLog: warnLog$2 } = createComponentLog('textarea');
 let autoTxtElem;
 var VxeTextareaComponent = defineVxeComponent({
     name: 'VxeTextarea',
@@ -36852,7 +37454,7 @@ var VxeTextareaComponent = defineVxeComponent({
         nextTick(() => {
             const { autosize, autoSize } = props;
             if (autosize) {
-                warnLog('vxe.error.delProp', ['autosize', 'auto-size']);
+                warnLog$2('vxe.error.delProp', ['autosize', 'auto-size']);
             }
             if (autosize || autoSize) {
                 updateAutoTxt();
@@ -37224,6 +37826,7 @@ function clearRowAnimate(elem, clss) {
     }, 500);
 }
 
+const { errLog: errLog$2 } = createComponentLog('tree');
 const { menus, getConfig, getI18n, getIcon } = VxeUI;
 /**
  * 生成节点的唯一主键
@@ -37933,7 +38536,7 @@ var VxeTreeComponent = defineVxeComponent({
             handleData(true);
             if (sYLoad) {
                 if (!(props.height || props.maxHeight)) {
-                    errLog('vxe.error.reqProp', ['[tree] height | max-height | virtual-y-config.enabled=false']);
+                    errLog$2('vxe.error.reqProp', ['height | max-height | virtual-y-config.enabled=false']);
                 }
             }
             return computeScrollLoad().then(() => {
@@ -39869,17 +40472,17 @@ var VxeTreeComponent = defineVxeComponent({
             const { transform, drag, menuConfig } = props;
             const dragOpts = computeDragOpts.value;
             if (drag && !transform) {
-                errLog('vxe.error.notSupportProp', ['drag', 'transform=false', 'transform=true']);
+                errLog$2('vxe.error.notSupportProp', ['drag', 'transform=false', 'transform=true']);
             }
             if (dragOpts.isCrossTreeDrag) {
-                errLog('vxe.error.notProp', ['drag-config.isCrossTreeDrag']);
+                errLog$2('vxe.error.notProp', ['drag-config.isCrossTreeDrag']);
             }
             // if (valueField) {
             //   errLog('vxe.error.delProp', ['value-field', 'value-field'])
             // }
             const VxeUIContextMenu = VxeUI.getComponent('VxeContextMenu');
             if (menuConfig && !VxeUIContextMenu) {
-                errLog('vxe.error.reqComp', ['vxe-context-menu']);
+                errLog$2('vxe.error.reqComp', ['vxe-context-menu']);
             }
             if (props.autoResize) {
                 const el = refElem.value;
@@ -39928,6 +40531,7 @@ dynamicApp.use(VxeTree);
 VxeUI.component(VxeTreeComponent);
 const Tree = VxeTree;
 
+const { warnLog: warnLog$1, errLog: errLog$1 } = createComponentLog('tree-select');
 function getOptUniqueId() {
     return XEUtils.uniqueId('node_');
 }
@@ -40293,12 +40897,12 @@ var VxeTreeSelectComponent = defineVxeComponent({
                     nodeid = getOptUniqueId();
                 }
                 if (keyMaps[nodeid]) {
-                    errLog('vxe.error.repeatKey', [nodeKeyField, nodeid]);
+                    errLog$1('vxe.error.repeatKey', [nodeKeyField, nodeid]);
                 }
                 keyMaps[nodeid] = true;
                 const value = item[valueField];
                 if (nodeMaps[value]) {
-                    errLog('vxe.error.repeatKey', [valueField, value]);
+                    errLog$1('vxe.error.repeatKey', [valueField, value]);
                 }
                 nodeMaps[value] = {
                     item,
@@ -40737,7 +41341,7 @@ var VxeTreeSelectComponent = defineVxeComponent({
                                             h('div', {
                                                 class: 'vxe-tree-select--header-button'
                                             }, [
-                                                showCheckedButton && showClearButton
+                                                (showCheckedButton && multiple) || showClearButton
                                                     ? h('div', {
                                                         class: 'vxe-tree-select--selected-btns'
                                                     }, [
@@ -40757,24 +41361,20 @@ var VxeTreeSelectComponent = defineVxeComponent({
                                                             : renderEmptyElement($xeTreeSelect)
                                                     ])
                                                     : renderEmptyElement($xeTreeSelect),
-                                                showExpandButton && showExpandButton
+                                                showExpandButton
                                                     ? h('div', {
                                                         class: 'vxe-tree-select--expand-btns'
                                                     }, [
-                                                        showExpandButton
-                                                            ? h(VxeButton, {
-                                                                content: getI18n$2('vxe.treeSelect.allExpand'),
-                                                                mode: 'text',
-                                                                onClick: allExpandPanelEvent
-                                                            })
-                                                            : renderEmptyElement($xeTreeSelect),
-                                                        showExpandButton
-                                                            ? h(VxeButton, {
-                                                                content: getI18n$2('vxe.treeSelect.clearExpand'),
-                                                                mode: 'text',
-                                                                onClick: clearExpandPanelEvent
-                                                            })
-                                                            : renderEmptyElement($xeTreeSelect)
+                                                        h(VxeButton, {
+                                                            content: getI18n$2('vxe.treeSelect.allExpand'),
+                                                            mode: 'text',
+                                                            onClick: allExpandPanelEvent
+                                                        }),
+                                                        h(VxeButton, {
+                                                            content: getI18n$2('vxe.treeSelect.clearExpand'),
+                                                            mode: 'text',
+                                                            onClick: clearExpandPanelEvent
+                                                        })
                                                     ])
                                                     : renderEmptyElement($xeTreeSelect)
                                             ])
@@ -40837,7 +41437,7 @@ var VxeTreeSelectComponent = defineVxeComponent({
                                         }, treeScopedSlots)
                                     ])
                                 ]),
-                                footerSlot || showTotalButton || (showCloseButton && multiple)
+                                footerSlot || showTotalButton || showCloseButton
                                     ? h('div', {
                                         class: 'vxe-tree-select--panel-footer'
                                     }, footerSlot
@@ -40851,7 +41451,7 @@ var VxeTreeSelectComponent = defineVxeComponent({
                                                         class: 'vxe-tree-select--total-btns'
                                                     }, getI18n$2('vxe.treeSelect.total', [selectVals.length]))
                                                     : renderEmptyElement($xeTreeSelect),
-                                                showCloseButton && multiple
+                                                showCloseButton
                                                     ? h('div', {
                                                         class: 'vxe-tree-select--oper-btns'
                                                     }, [
@@ -40895,7 +41495,7 @@ var VxeTreeSelectComponent = defineVxeComponent({
         cacheLazyDataMap();
         onMounted(() => {
             if (XEUtils.isBoolean(props.autoClose)) {
-                warnLog('vxe.error.delProp', ['auto-close', 'checked-closable | clear-closable']);
+                warnLog$1('vxe.error.delProp', ['auto-close', 'checked-closable | clear-closable']);
             }
             globalEvents.on($xeTreeSelect, 'mousewheel', handleGlobalMousewheelEvent);
             globalEvents.on($xeTreeSelect, 'mousedown', handleGlobalMousedownEvent);
@@ -41030,6 +41630,7 @@ const saveLocalFile = (options) => {
     return Promise.reject(new Error(getI18n$2('vxe.error.notExp')));
 };
 
+const { warnLog, errLog } = createComponentLog('upload');
 function createReactData() {
     return {
         isDragUploadStatus: false,
@@ -41237,8 +41838,12 @@ var VxeUploadComponent = defineVxeComponent({
         'remove-fail',
         'download',
         'download-fail',
+        'upload-start',
         'upload-success',
         'upload-error',
+        'upload-end',
+        'upload-queue-start',
+        'upload-queue-end',
         'sort-dragend',
         'more-visible'
     ],
@@ -41572,6 +42177,7 @@ var VxeUploadComponent = defineVxeComponent({
             const fileKey = getFieldKey(item);
             const uploadFn = props.uploadMethod || getConfig$3().upload.uploadMethod;
             if (uploadFn) {
+                dispatchEvent('upload-start', { option: item }, null);
                 return Promise.resolve(uploadFn({
                     $upload: $xeUpload,
                     file,
@@ -41612,6 +42218,7 @@ var VxeUploadComponent = defineVxeComponent({
                     if (cacheItem) {
                         cacheItem.loading = false;
                     }
+                    dispatchEvent('upload-end', { option: item }, null);
                 });
             }
             else {
@@ -41720,6 +42327,7 @@ var VxeUploadComponent = defineVxeComponent({
                     }
                 }
             }
+            dispatchEvent('upload-queue-start', { files: selectFiles }, evnt);
             const cacheMaps = Object.assign({}, reactData.fileCacheMaps);
             const newFileList = multiple ? fileList : [];
             const uploadPromiseRests = [];
@@ -41756,6 +42364,7 @@ var VxeUploadComponent = defineVxeComponent({
             });
             Promise.all(urlMode ? uploadPromiseRests : []).then(() => {
                 const restFileList = reactData.fileList;
+                dispatchEvent('upload-queue-end', { options: restFileList, files: selectFiles }, evnt);
                 handleChange(restFileList);
                 // 自动更新校验状态
                 if ($xeForm && formItemInfo) {
@@ -42817,10 +43426,10 @@ var VxeUploadComponent = defineVxeComponent({
         });
         onMounted(() => {
             if (props.multiple && props.singleMode) {
-                errLog('vxe.error.errConflicts', ['[upload] multiple', 'single-mode']);
+                errLog('vxe.error.errConflicts', ['multiple', 'single-mode']);
             }
             if (props.imageStyle) {
-                warnLog('vxe.error.delProp', ['[upload] image-style', 'image-config']);
+                warnLog('vxe.error.delProp', ['image-style', 'image-config']);
             }
             if (props.dragSort) {
                 initTpImg();