vxe-pc-ui 4.15.24 → 4.15.26

package/dist/all.esm.js

@@ -1,5 +1,5 @@
 import * as core 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';
+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, menus as menus$3, 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';
@@ -81,7 +81,7 @@ function checkDynamic() {
 }
 
 const { log } = VxeUI;
-const uiVersion = `ui v${"4.15.24"}`;
+const uiVersion = `ui v${"4.15.26"}`;
 function createComponentLog(name) {
     const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -92,18 +92,18 @@ function createComponentLog(name) {
         errLog: log.create('error', versionInfo + '] [' + name)
     };
 }
-const warnLog$g = log.create('warn', uiVersion);
+const warnLog$h = log.create('warn', uiVersion);
 log.create('error', uiVersion);
 
-const version = "4.15.24";
+const version = "4.15.26";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
-    warnLog$g('vxe.error.delFunc', ['config', 'setConfig']);
+    warnLog$h('vxe.error.delFunc', ['config', 'setConfig']);
     return setConfig$1(options);
 }
 function setup(options) {
-    warnLog$g('vxe.error.delFunc', ['setup', 'setConfig']);
+    warnLog$h('vxe.error.delFunc', ['setup', 'setConfig']);
     return setConfig$1(options);
 }
 VxeUI.config = config;
@@ -318,6 +318,9 @@ setConfig$1({
     listView: {},
     list: {
         // size: null,
+        rowConfig: {
+            contentField: 'label'
+        },
         dragConfig: {
             showIcon: true,
             animation: true,
@@ -3120,7 +3123,7 @@ dynamicApp.use(VxeTooltip);
 VxeUI.component(VxeTooltipComponent);
 const Tooltip = VxeTooltip;
 
-const { warnLog: warnLog$f } = createComponentLog('button');
+const { warnLog: warnLog$g } = createComponentLog('button');
 const VxeButtonComponent = defineVxeComponent({
     name: 'VxeButton',
     props: {
@@ -3839,7 +3842,7 @@ const VxeButtonComponent = defineVxeComponent({
         $xeButton.renderVN = renderVN;
         onMounted(() => {
             if (props.type === 'text') {
-                warnLog$f('vxe.error.delProp', ['type=text', 'mode=text']);
+                warnLog$g('vxe.error.delProp', ['type=text', 'mode=text']);
             }
             globalEvents.on($xeButton, 'mousewheel', handleGlobalMousewheelEvent);
             globalEvents.on($xeButton, 'mousedown', handleGlobalMousedownEvent);
@@ -3866,7 +3869,7 @@ dynamicApp.use(VxeButton);
 VxeUI.component(VxeButtonComponent);
 const Button = VxeButton;
 
-const { errLog: errLog$h } = createComponentLog('backtop');
+const { errLog: errLog$i } = createComponentLog('backtop');
 function createInternalData$j() {
     return {
         targetEl: null
@@ -4044,13 +4047,13 @@ var VxeBacktopComponent = defineVxeComponent({
                 const { target } = props;
                 if (!target) {
                     removeScrollEvent();
-                    errLog$h('vxe.error.reqProp', ['target']);
+                    errLog$i('vxe.error.reqProp', ['target']);
                     return;
                 }
                 if (XEUtils.isString(target)) {
                     const tEl = document.querySelector(target);
                     if (!tEl) {
-                        errLog$h('vxe.error.errProp', [`target=${target}`, 'body']);
+                        errLog$i('vxe.error.errProp', [`target=${target}`, 'body']);
                     }
                     const { targetEl } = internalData;
                     if (targetEl !== tEl) {
@@ -4572,7 +4575,7 @@ function parseDateValue(val, type, options) {
     const { valueFormat } = options;
     if (val) {
         if (type === 'time') {
-            return toStringTimeDate(XEUtils.isArray(val) ? val : XEUtils.last(val));
+            return toStringTimeDate(XEUtils.isArray(val) ? XEUtils.last(val) : val);
         }
         if (XEUtils.isNumber(val) || /^[0-9]{10,15}$/.test(`${val}`)) {
             return new Date(Number(val));
@@ -4753,6 +4756,16 @@ function checkDateInputFormat(numStr, formatKey) {
     }
     return numVal;
 }
+const getPrevYear = (date, size = 1) => {
+    const currtYear = date.getFullYear();
+    date.setFullYear(currtYear - size);
+    return date;
+};
+const getNextYear = (date, size = 1) => {
+    const currtYear = date.getFullYear();
+    date.setFullYear(currtYear + size);
+    return date;
+};
 const getPrevMonth = (date) => {
     const currtYear = date.getFullYear();
     const currMonth = date.getMonth();
@@ -4778,7 +4791,7 @@ const getNextMonth = (date) => {
     return date;
 };
 
-const { errLog: errLog$g } = createComponentLog('calendar');
+const { errLog: errLog$h } = createComponentLog('calendar');
 const { menus: menus$2, getConfig: getConfig$2, getI18n: getI18n$1 } = VxeUI;
 var VxeCalendarComponent = defineVxeComponent({
     name: 'VxeCalendar',
@@ -6046,7 +6059,7 @@ var VxeCalendarComponent = defineVxeComponent({
             const { menuConfig } = props;
             const VxeUIContextMenu = VxeUI.getComponent('VxeContextMenu');
             if (menuConfig && !VxeUIContextMenu) {
-                errLog$g('vxe.error.reqComp', ['vxe-context-menu']);
+                errLog$h('vxe.error.reqComp', ['vxe-context-menu']);
             }
             dateOpenPanel();
         });
@@ -6859,7 +6872,16 @@ function clearRowAnimate(elem, clss) {
     }, 500);
 }
 
-const { errLog: errLog$f } = createComponentLog('tree');
+function getItemCacheObj$1(item) {
+    return {
+        item,
+        index: -1,
+        $index: -1,
+        _index: -1
+    };
+}
+
+const { warnLog: warnLog$f, errLog: errLog$g } = createComponentLog('tree');
 function getRowKeyByField(row, keyField) {
     return row ? ('' + (row[keyField] || '')) : '';
 }
@@ -6886,15 +6908,20 @@ function createReactData$j() {
         updateCheckboxFlag: 1,
         isAllChecked: false,
         isAllIndeterminate: false,
+        insertRowFlag: 1,
+        removeRowFlag: 1,
         dragRow: null,
-        dragTipText: ''
+        dragTipText: '',
+        isCrossDragRow: false
     };
 }
 function createInternalData$i() {
     return {
         resizeObserver: undefined,
         fullData: [],
+        afterList: [],
         fullKeyMaps: {},
+        rowMaps: {},
         lastScrollLeft: 0,
         lastScrollTop: 0,
         scrollYStore: {
@@ -6905,11 +6932,14 @@ function createInternalData$i() {
             rowHeight: 0
         },
         currentRow: null,
-        selectCheckboxMaps: {}
+        selectCheckboxMaps: {},
+        insertRowMaps: {},
+        removeRowMaps: {}
         // prevDragRow: null,
         // prevDragPos: ''
     };
 }
+let crossListDragRowObj = null;
 var VxeListComponent = defineVxeComponent({
     name: 'VxeList',
     props: {
@@ -6927,6 +6957,10 @@ var VxeListComponent = defineVxeComponent({
             default: () => getConfig$3().list.autoResize
         },
         syncResize: [Boolean, String, Number],
+        showSeq: {
+            type: Boolean,
+            default: () => getConfig$3().list.showSeq
+        },
         showRadio: {
             type: Boolean,
             default: () => getConfig$3().list.showRadio
@@ -6941,6 +6975,7 @@ var VxeListComponent = defineVxeComponent({
         checkboxConfig: Object,
         rowConfig: Object,
         dragConfig: Object,
+        menuConfig: Object,
         virtualYConfig: Object,
         scrollY: Object
     },
@@ -6956,7 +6991,11 @@ var VxeListComponent = defineVxeComponent({
         'scroll',
         'row-dragstart',
         'row-dragover',
-        'row-dragend'
+        'row-dragend',
+        'row-remove-dragend',
+        'row-insert-dragend',
+        'row-menu',
+        'menu-click'
     ],
     setup(props, context) {
         const { slots, emit } = context;
@@ -7014,6 +7053,9 @@ var VxeListComponent = defineVxeComponent({
         const computeCheckboxOpts = computed(() => {
             return Object.assign({ showIcon: true }, getConfig$3().list.checkboxConfig, props.checkboxConfig);
         });
+        const computeMenuOpts = computed(() => {
+            return Object.assign({}, getConfig$3().list.menuConfig, props.menuConfig);
+        });
         const computeWrapperStyles = computed(() => {
             const rowHeight = computeRowHeight.value;
             const style = {};
@@ -7082,10 +7124,30 @@ var VxeListComponent = defineVxeComponent({
             reactData.bodyHeight = scrollYLoad ? fullData.length * scrollYStore.rowHeight : 0;
             reactData.topSpaceHeight = scrollYLoad ? Math.max(scrollYStore.startIndex * scrollYStore.rowHeight, 0) : 0;
         };
-        const handleData = () => {
+        const updateAfterFullData = () => {
+            const { fullData } = internalData;
+            internalData.afterList = fullData.slice(0);
+            updateAfterDataIndex();
+        };
+        const handleData = (force) => {
             const { scrollYLoad } = reactData;
-            const { fullData, scrollYStore } = internalData;
-            reactData.rowList = scrollYLoad ? fullData.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullData.slice(0);
+            const { fullData, scrollYStore, rowMaps } = internalData;
+            const keyField = computeKeyField.value;
+            if (force) {
+                // 更新数据，处理筛选和排序
+                updateAfterFullData();
+            }
+            const rowList = scrollYLoad ? fullData.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullData.slice(0);
+            if (keyField) {
+                rowList.forEach((item, $index) => {
+                    const rowid = getRowIdByField(item, keyField);
+                    const rowRest = rowMaps[rowid];
+                    if (rowRest) {
+                        rowRest.$index = $index;
+                    }
+                });
+            }
+            reactData.rowList = rowList;
             return nextTick();
         };
         const updateYData = () => {
@@ -7251,15 +7313,48 @@ var VxeListComponent = defineVxeComponent({
             internalData.selectCheckboxMaps = selectMaps;
             updateCheckboxStatus();
         };
+        const updateAfterDataIndex = () => {
+            const { afterList, rowMaps } = internalData;
+            const keyField = computeKeyField.value;
+            let vtIndex = 0;
+            afterList.forEach((item, index) => {
+                const roweid = getRowIdByField(item, keyField);
+                const rowRest = rowMaps[roweid];
+                if (rowRest) {
+                    rowRest._index = vtIndex;
+                }
+                else {
+                    const rest = {
+                        item,
+                        index,
+                        $index: -1,
+                        _index: vtIndex
+                    };
+                    rowMaps[roweid] = rest;
+                }
+                vtIndex++;
+            });
+        };
         const cacheRowMap = () => {
             const { fullData } = internalData;
             const keyField = computeKeyField.value;
             const keyMaps = {};
-            fullData.forEach(row => {
-                const rowKey = getRowKeyByField(row, keyField);
-                keyMaps[rowKey] = row;
-            });
+            const rowMaps = {};
+            if (keyField) {
+                fullData.forEach((row, rowIndex) => {
+                    const rowid = getRowIdByField(row, keyField);
+                    const rowKey = getRowKeyByField(row, keyField);
+                    keyMaps[rowKey] = row;
+                    rowMaps[rowid] = {
+                        item: row,
+                        index: rowIndex,
+                        $index: -1,
+                        _index: -1
+                    };
+                });
+            }
             internalData.fullKeyMaps = keyMaps;
+            internalData.rowMaps = rowMaps;
         };
         /**
          * 加载数据
@@ -7268,23 +7363,32 @@ var VxeListComponent = defineVxeComponent({
         const loadData = (datas) => {
             const { scrollYStore } = internalData;
             const sYOpts = computeSYOpts.value;
-            const fullData = datas || [];
+            const fullData = datas ? datas.slice(0) : [];
             Object.assign(scrollYStore, {
                 startIndex: 0,
                 endIndex: 1,
                 visibleSize: 0
             });
             internalData.fullData = fullData;
+            internalData.insertRowMaps = {};
+            reactData.insertRowFlag++;
+            internalData.removeRowMaps = {};
+            reactData.removeRowFlag++;
             // 如果gt为0，则总是启用
             reactData.scrollYLoad = !!sYOpts.enabled && sYOpts.gt > -1 && (sYOpts.gt === 0 || sYOpts.gt <= fullData.length);
             cacheRowMap();
-            handleData();
+            handleData(true);
             updateRadioModeValue();
             updateCheckboxModeValue();
             return computeScrollLoad().then(() => {
                 refreshScroll();
             });
         };
+        const handleRowDragEndClearStatus = () => {
+            clearRowDragData();
+            clearCrossListDragStatus();
+            recalculate();
+        };
         const clearRowDropOrigin = () => {
             const el = refElem.value;
             if (el) {
@@ -7336,7 +7440,7 @@ var VxeListComponent = defineVxeComponent({
             }
         };
         const clearCrossListDragStatus = () => {
-            // crossListDragRowObj = null
+            crossListDragRowObj = null;
             crossListDragRowInfo.row = null;
         };
         const clearDragStatus = () => {
@@ -7352,7 +7456,7 @@ var VxeListComponent = defineVxeComponent({
             evnt.stopPropagation();
             const { row } = params;
             const dragConfig = computeDragOpts.value;
-            const { trigger, dragStartMethod } = dragConfig;
+            const { isCrossListDrag, trigger, dragStartMethod } = dragConfig;
             const dragEl = evnt.currentTarget;
             const rowEl = trigger === 'row' ? dragEl : dragEl.parentElement.parentElement;
             clearRowDropOrigin();
@@ -7362,10 +7466,15 @@ var VxeListComponent = defineVxeComponent({
                 hideDropTip();
                 return;
             }
+            if (isCrossListDrag) {
+                crossListDragRowInfo.row = row;
+                crossListDragRowObj = { $oldList: $xeList, $newList: null };
+            }
             const dragstartEventParams = {
                 row
             };
             reactData.dragRow = row;
+            reactData.isCrossDragRow = false;
             rowEl.draggable = true;
             updateRowDropOrigin(row);
             updateRowDropTipContent(rowEl);
@@ -7568,11 +7677,23 @@ var VxeListComponent = defineVxeComponent({
         const handleRowDragDragendEvent = (evnt) => {
             const { dragRow } = reactData;
             const { prevDragRow, prevDragPos } = internalData;
+            const dragConfig = computeDragOpts.value;
+            const { isCrossListDrag } = dragConfig;
+            // 跨列表拖拽
+            if (isCrossListDrag && crossListDragRowObj) {
+                const { $newList } = crossListDragRowObj;
+                if ($newList && $newList.xID !== $xeList.xID) {
+                    $newList.handleCrossListRowDragInsertEvent(evnt);
+                    return;
+                }
+            }
             handleRowDragSwapEvent(evnt, dragRow, prevDragRow, prevDragPos);
         };
         const handleRowDragDragoverEvent = (evnt) => {
             const { dragRow } = reactData;
             const { fullData } = internalData;
+            const dragConfig = computeDragOpts.value;
+            const { isCrossListDrag } = dragConfig;
             if (!dragRow) {
                 evnt.preventDefault();
             }
@@ -7585,6 +7706,32 @@ var VxeListComponent = defineVxeComponent({
                 const dragPos = offsetY < rowEl.clientHeight / 2 ? 'top' : 'bottom';
                 internalData.prevDragRow = row;
                 internalData.prevDragPos = dragPos;
+                // 跨列表拖拽
+                if (isCrossListDrag && crossListDragRowObj) {
+                    const { $oldList, $newList } = crossListDragRowObj;
+                    if ($oldList) {
+                        const oldListReactData = $oldList.reactData;
+                        if ($oldList.xID === $xeList.xID) {
+                            if ($newList) {
+                                $newList.hideCrossListRowDropClearStatus();
+                            }
+                            reactData.isCrossDragRow = false;
+                            oldListReactData.isCrossDragRow = false;
+                            crossListDragRowObj.$newList = null;
+                        }
+                        else {
+                            if ($newList && $newList.xID !== $xeList.xID) {
+                                $newList.hideCrossListRowDropClearStatus();
+                            }
+                            $oldList.hideCrossListRowDropClearStatus();
+                            oldListReactData.isCrossDragRow = true;
+                            reactData.dragTipText = oldListReactData.dragTipText;
+                            crossListDragRowObj.$newList = $xeList;
+                            showDropTip(evnt, rowEl, true, dragPos);
+                            return;
+                        }
+                    }
+                }
                 if ((dragRow && getRowId(dragRow) === rowid)) {
                     showDropTip(evnt, rowEl, false, dragPos);
                     return;
@@ -7969,6 +8116,135 @@ var VxeListComponent = defineVxeComponent({
             emitRadioMode(value);
             dispatchEvent('radio-change', { row, value, checked: isChecked }, evnt);
         };
+        const insertListRow = (newRecords, isAppend) => {
+            const { fullData, rowMaps } = internalData;
+            const keyField = computeKeyField.value;
+            const funcName = isAppend ? 'push' : 'unshift';
+            newRecords.forEach((item) => {
+                const rowid = getRowIdByField(item, keyField);
+                const rowRest = getItemCacheObj$1(item);
+                fullData[funcName](item);
+                rowMaps[rowid] = rowRest;
+            });
+        };
+        const handleInsertRowAt = (records, targetRowOrRowKey, isInsertNextRow) => {
+            const { fullData, rowMaps, removeRowMaps, insertRowMaps } = internalData;
+            const keyField = computeKeyField.value;
+            if (!keyField) {
+                errLog$g('vxe.error.reqSupportProp', ['insert() | insertAt() | insertNextAt()', 'row-config.keyField']);
+                return Promise.resolve({ row: null, rows: [] });
+            }
+            if (!XEUtils.isArray(records)) {
+                records = [records];
+            }
+            let targetRow = targetRowOrRowKey;
+            if (XEUtils.isString(targetRowOrRowKey) || XEUtils.isNumber(targetRowOrRowKey)) {
+                const rowRest = rowMaps[targetRowOrRowKey];
+                if (rowRest) {
+                    targetRow = rowRest.item;
+                }
+            }
+            if (!records.length) {
+                return Promise.resolve({ row: null, rows: [] });
+            }
+            const newRecords = records.map(record => XEUtils.assign({}, record));
+            if (XEUtils.eqNull(targetRow)) {
+                insertListRow(newRecords, false);
+            }
+            else {
+                if (targetRow === -1) {
+                    insertListRow(newRecords, true);
+                }
+                else {
+                    const rowIndex = fullData.findIndex(item => targetRow[keyField] === item[keyField]);
+                    if (rowIndex > -1) {
+                        newRecords.forEach(item => {
+                            const rowid = getRowIdByField(item, keyField);
+                            const rowRest = getItemCacheObj$1(item);
+                            rowMaps[rowid] = rowRest;
+                        });
+                        let targetIndex = rowIndex;
+                        if (isInsertNextRow) {
+                            targetIndex = targetIndex + 1;
+                        }
+                        fullData.splice(targetIndex, 0, ...newRecords);
+                    }
+                    else {
+                        warnLog$f('vxe.error.unableInsert');
+                        insertListRow(newRecords, true);
+                    }
+                }
+            }
+            newRecords.forEach((newItem) => {
+                const rowid = getRowIdByField(newItem, keyField);
+                // 如果是被删除的数据，则还原状态
+                if (removeRowMaps[rowid]) {
+                    delete removeRowMaps[rowid];
+                    if (insertRowMaps[rowid]) {
+                        delete insertRowMaps[rowid];
+                    }
+                }
+                else {
+                    insertRowMaps[rowid] = newItem;
+                }
+            });
+            reactData.removeRowFlag++;
+            reactData.insertRowFlag++;
+            cacheRowMap();
+            handleData(true);
+            updateAfterDataIndex();
+            updateCheckboxStatus();
+            if (reactData.scrollYLoad) {
+                updateYSpace();
+            }
+            return nextTick().then(() => {
+                return {
+                    row: newRecords.length ? newRecords[newRecords.length - 1] : null,
+                    rows: newRecords
+                };
+            });
+        };
+        const handleContextmenuEvent = (evnt, row) => {
+            const { menuConfig } = props;
+            const menuOpts = computeMenuOpts.value;
+            const rowOpts = computeRowOpts.value;
+            const { isCurrent } = rowOpts;
+            if (menuConfig ? isEnableConf(menuOpts) : menuOpts.enabled) {
+                const { options, visibleMethod } = menuOpts;
+                if (!visibleMethod || visibleMethod({ $list: $xeList, options, row })) {
+                    if (isCurrent) {
+                        changeCurrentEvent(evnt, row);
+                    }
+                    else if (internalData.currentRow) {
+                        internalData.currentRow = null;
+                        reactData.currRowFlag++;
+                    }
+                    if (VxeUI.contextMenu) {
+                        VxeUI.contextMenu.openByEvent(evnt, {
+                            options,
+                            events: {
+                                optionClick(eventParams) {
+                                    const { option } = eventParams;
+                                    const gMenuOpts = menus$3.get(option.code);
+                                    const tmMethod = gMenuOpts ? gMenuOpts.listMenuMethod : null;
+                                    const params = {
+                                        menu: option,
+                                        row,
+                                        $event: evnt,
+                                        $list: $xeList
+                                    };
+                                    if (tmMethod) {
+                                        tmMethod(params, evnt);
+                                    }
+                                    dispatchEvent('menu-click', params, eventParams.$event);
+                                }
+                            }
+                        });
+                    }
+                }
+            }
+            dispatchEvent('row-menu', { row }, evnt);
+        };
         const listMethods = {
             dispatchEvent,
             loadData,
@@ -8015,9 +8291,282 @@ var VxeListComponent = defineVxeComponent({
             getCheckboxRows,
             getCheckboxRowKeys,
             clearCheckboxRow,
-            setAllCheckboxRow
+            setAllCheckboxRow,
+            insert(records) {
+                return handleInsertRowAt(records, null);
+            },
+            insertAt(records, targetRowOrRowKey) {
+                return handleInsertRowAt(records, targetRowOrRowKey);
+            },
+            insertNextAt(records, targetRowOrRowKey) {
+                return handleInsertRowAt(records, targetRowOrRowKey, true);
+            },
+            getInsertRecords() {
+                const { insertRowMaps } = internalData;
+                const insertRecords = [];
+                XEUtils.each(insertRowMaps, (item) => {
+                    insertRecords.push(item);
+                });
+                return insertRecords;
+            },
+            isInsertByRow(row) {
+                const rowid = getRowId(row);
+                return !!reactData.insertRowFlag && !!internalData.insertRowMaps[rowid];
+            },
+            remove(rows) {
+                const { fullData, insertRowMaps, removeRowMaps } = internalData;
+                const keyField = computeKeyField.value;
+                if (!keyField) {
+                    errLog$g('vxe.error.reqSupportProp', ['insert() | insertAt() | insertNextAt()', 'row-config.keyField']);
+                    return Promise.resolve({ row: null, rows: [] });
+                }
+                let delList = [];
+                if (!rows) {
+                    rows = fullData;
+                }
+                else if (!XEUtils.isArray(rows)) {
+                    rows = [rows];
+                }
+                if (!rows.length) {
+                    return Promise.resolve({ row: null, rows: [] });
+                }
+                // 如果是新增，则保存记录
+                rows.forEach((item) => {
+                    if (!$xeList.isInsertByRow(item)) {
+                        const rowid = getRowId(item);
+                        removeRowMaps[rowid] = item;
+                    }
+                });
+                // 从数据源中移除
+                if (fullData === rows) {
+                    rows = delList = fullData.slice(0);
+                    internalData.fullData = [];
+                }
+                else {
+                    rows.forEach((item) => {
+                        const rowid = getRowId(item);
+                        const rowIndex = XEUtils.findIndexOf(fullData, item => rowid === getRowId(item));
+                        if (rowIndex > -1) {
+                            const rItems = fullData.splice(rowIndex, 1);
+                            delList.push(rItems[0]);
+                        }
+                    });
+                }
+                // 从新增中移除已删除的数据
+                rows.forEach((item) => {
+                    const rowid = getRowId(item);
+                    if (insertRowMaps[rowid]) {
+                        delete insertRowMaps[rowid];
+                    }
+                });
+                reactData.removeRowFlag++;
+                reactData.insertRowFlag++;
+                cacheRowMap();
+                handleData(true);
+                updateAfterDataIndex();
+                updateCheckboxStatus();
+                if (reactData.scrollYLoad) {
+                    updateYSpace();
+                }
+                return nextTick().then(() => {
+                    return recalculate();
+                }).then(() => {
+                    return { row: delList.length ? delList[delList.length - 1] : null, rows: delList };
+                });
+            },
+            getRemoveRecords() {
+                const { removeRowMaps } = internalData;
+                const removeRecords = [];
+                XEUtils.each(removeRowMaps, (item) => {
+                    removeRecords.push(item);
+                });
+                return removeRecords;
+            },
+            isRemoveByRow(row) {
+                const rowid = getRowId(row);
+                return !!reactData.removeRowFlag && !!internalData.removeRowMaps[rowid];
+            }
+        };
+        const listPrivateMethods = {
+            handleCrossListRowDragCancelEvent() {
+                clearRowDragData();
+                clearCrossListDragStatus();
+            },
+            /**
+             * 处理跨树拖拽完成
+             */
+            handleCrossListRowDragFinishEvent(evnt) {
+                const { rowList } = reactData;
+                const { rowMaps } = internalData;
+                const dragOpts = computeDragOpts.value;
+                const { animation, isCrossListDrag } = dragOpts;
+                const el = refElem.value;
+                if (!el) {
+                    return;
+                }
+                if (isCrossListDrag && crossListDragRowObj && crossListDragRowInfo) {
+                    const { row: dragRow } = crossListDragRowInfo;
+                    if (dragRow) {
+                        const dragRowid = getRowId(dragRow);
+                        const dragRowRest = rowMaps[dragRowid];
+                        let dragRowHeight = 0;
+                        let rsIndex = -1;
+                        if (dragRowRest) {
+                            if (animation) {
+                                const oldItemEl = el.querySelector(`.vxe-list--row[rowid="${dragRowid}"]`);
+                                const targetItemEl = oldItemEl;
+                                if (targetItemEl) {
+                                    dragRowHeight = targetItemEl.offsetHeight;
+                                }
+                            }
+                            rsIndex = dragRowRest.$index;
+                        }
+                        const dragRangeList = rsIndex > -1 && rsIndex < rowList.length - 1 ? rowList.slice(rsIndex + 1) : [];
+                        const dragList = [dragRow];
+                        $xeList.remove(dragList).then(() => {
+                            if (animation && dragRowHeight && dragRangeList.length) {
+                                const wrapperEl = el;
+                                const dtClss = [];
+                                dragRangeList.forEach(item => {
+                                    const rowid = getRowId(item);
+                                    dtClss.push(`.vxe-list--row[rowid="${rowid}"]`);
+                                });
+                                const dtTrList = wrapperEl.querySelectorAll(dtClss.join(','));
+                                moveRowAnimateToTb(dtTrList, dragRowHeight);
+                            }
+                        });
+                        dispatchEvent('row-remove-dragend', {
+                            row: dragRow
+                        }, evnt);
+                        handleRowDragEndClearStatus();
+                    }
+                }
+            },
+            /**
+             * 处理跨树拖至新的空树
+             */
+            handleCrossListRowDragoverEmptyEvent(evnt) {
+                const { rowList } = reactData;
+                const dragOpts = computeDragOpts.value;
+                const { isCrossListDrag } = dragOpts;
+                if (isCrossListDrag && crossListDragRowObj && !rowList.length) {
+                    const { $oldList, $newList } = crossListDragRowObj;
+                    if ($oldList) {
+                        const oldListReactData = $oldList;
+                        if ($oldList.xID !== $xeList.xID) {
+                            if ($newList && $newList.xID !== $xeList.xID) {
+                                $newList.hideCrossListRowDropClearStatus();
+                            }
+                            evnt.preventDefault();
+                            $oldList.hideCrossListRowDropClearStatus();
+                            crossListDragRowObj.$newList = $xeList;
+                            internalData.prevDragRow = null;
+                            reactData.dragTipText = oldListReactData.dragTipText;
+                            showDropTip(evnt, evnt.currentTarget, true, '');
+                        }
+                    }
+                }
+            },
+            /**
+             * 处理跨树拖插入
+             */
+            handleCrossListRowDragInsertEvent(evnt) {
+                const { prevDragRow, prevDragPos } = internalData;
+                const dragOpts = computeDragOpts.value;
+                const { animation, isCrossListDrag, dragEndMethod } = dragOpts;
+                // 跨表拖拽
+                if (isCrossListDrag && crossListDragRowObj && crossListDragRowInfo) {
+                    const { row: oldRow } = crossListDragRowInfo;
+                    const { $oldList } = crossListDragRowObj;
+                    const el = refElem.value;
+                    if (!el) {
+                        return;
+                    }
+                    if ($oldList && oldRow) {
+                        const dragRow = oldRow;
+                        let dragOffsetIndex = -1;
+                        if (prevDragRow) {
+                            dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
+                        }
+                        const dragParams = {
+                            oldRow: dragRow,
+                            newRow: prevDragRow,
+                            dragRow,
+                            dragPos: prevDragPos,
+                            offsetIndex: dragOffsetIndex
+                        };
+                        const errRest = {
+                            status: false
+                        };
+                        Promise.resolve(dragEndMethod ? dragEndMethod(dragParams) : true).then((status) => {
+                            if (!status) {
+                                if ($oldList) {
+                                    if ($oldList.xID !== $xeList.xID) {
+                                        $oldList.handleCrossListRowDragCancelEvent(evnt);
+                                    }
+                                }
+                                handleRowDragEndClearStatus();
+                                return errRest;
+                            }
+                            let insertRest = Promise.resolve();
+                            const dragList = [dragRow];
+                            $oldList.handleCrossListRowDragFinishEvent(evnt);
+                            if (prevDragRow) {
+                                if (prevDragPos === 'bottom') {
+                                    insertRest = $xeList.insertNextAt(dragList, prevDragRow);
+                                }
+                                else {
+                                    insertRest = $xeList.insertAt(dragList, prevDragRow);
+                                }
+                            }
+                            else {
+                                insertRest = $xeList.insert(dragList);
+                            }
+                            $xeList.dispatchEvent('row-insert-dragend', {
+                                oldRow,
+                                newRow: prevDragRow,
+                                dragRow,
+                                dragPos: prevDragPos,
+                                offsetIndex: dragOffsetIndex
+                            }, evnt);
+                            clearRowDragData();
+                            insertRest.then(() => {
+                                const { rowList } = reactData;
+                                const { rowMaps } = internalData;
+                                const oldRowid = getRowId(dragRow);
+                                const oldRowRest = rowMaps[oldRowid];
+                                let dragRowHeight = 0;
+                                let rsIndex = -1;
+                                if (oldRowRest) {
+                                    if (animation) {
+                                        const oldItemEl = el.querySelector(`.vxe-list--row[rowid="${oldRowid}"]`);
+                                        const targetItemEl = oldItemEl;
+                                        if (targetItemEl) {
+                                            dragRowHeight = targetItemEl.offsetHeight;
+                                        }
+                                    }
+                                    rsIndex = oldRowRest.$index;
+                                }
+                                const dragRangeList = rsIndex > -1 ? rowList.slice(rsIndex) : [];
+                                if (animation && dragRowHeight && dragRangeList.length) {
+                                    const wrapperEl = el;
+                                    const dtClss = [];
+                                    dragRangeList.forEach(item => {
+                                        const rowid = getRowId(item);
+                                        dtClss.push(`.vxe-list--row[rowid="${rowid}"]`);
+                                    });
+                                    const dtTrList = wrapperEl.querySelectorAll(dtClss.join(','));
+                                    moveRowAnimateToTb(dtTrList, -dragRowHeight);
+                                }
+                            });
+                        });
+                    }
+                }
+            },
+            hideCrossListRowDropClearStatus() {
+                hideDropTip();
+            }
         };
-        const listPrivateMethods = {};
         Object.assign($xeList, listMethods, listPrivateMethods);
         const renderDragTip = () => {
             const { dragRow, dragTipText } = reactData;
@@ -8119,6 +8668,7 @@ var VxeListComponent = defineVxeComponent({
             const { selectRadioRow, currRowFlag, updateCheckboxFlag } = reactData;
             const { selectCheckboxMaps, currentRow } = internalData;
             const contentSlot = slots.content;
+            const extraSlot = slots.extra;
             const dragOpts = computeDragOpts.value;
             const { trigger, icon, disabledMethod, visibleMethod } = dragOpts;
             const rowOpts = computeRowOpts.value;
@@ -8172,6 +8722,12 @@ var VxeListComponent = defineVxeComponent({
                 key: 'ct5',
                 class: 'vxe-list--row-content'
             }, contentSlot ? contentSlot(rowParams) : (contentField ? getText(row[contentField]) : '')));
+            if (extraSlot) {
+                ctVNs.push(h('div', {
+                    key: 'ct7',
+                    class: 'vxe-list--row-extra'
+                }, extraSlot(rowParams)));
+            }
             const rowOns = {
                 onMousedown(evnt) {
                     handleRowMousedownEvent(evnt, row);
@@ -8182,6 +8738,9 @@ var VxeListComponent = defineVxeComponent({
                 },
                 onDblclick(evnt) {
                     handleRowDblclickEvent(evnt, row);
+                },
+                onContextmenu(evnt) {
+                    handleContextmenuEvent(evnt, row);
                 }
             };
             // 拖拽行事件
@@ -8210,20 +8769,20 @@ var VxeListComponent = defineVxeComponent({
             const checkboxOpts = computeCheckboxOpts.value;
             const { showHeader, headerTitle } = checkboxOpts;
             const dragOpts = computeDragOpts.value;
-            const { trigger } = dragOpts;
+            const { trigger, isCrossListDrag } = dragOpts;
             const rowOpts = computeRowOpts.value;
             const { isHover, padding } = rowOpts;
             const isDrag = computeIsDrag.value;
             const showDefChekboxHead = showCheckbox && showHeader !== false;
-            return h('div', {
-                ref: refElem,
-                class: ['vxe-list', className ? (XEUtils.isFunction(className) ? className({ $list: $xeList }) : className) : '', {
+            const leOns = {};
+            if (isCrossListDrag && !rowList.length) {
+                leOns.onDragover = $xeList.handleCrossListRowDragoverEmptyEvent;
+            }
+            return h('div', Object.assign({ ref: refElem, class: ['vxe-list', className ? (XEUtils.isFunction(className) ? className({ $list: $xeList }) : className) : '', {
                         [`size--${vSize}`]: vSize,
                         'is--drag': isDrag,
                         'is--loading': loading
-                    }],
-                style: wrapperStyles
-            }, [
+                    }], style: wrapperStyles }, leOns), [
                 headerSlot || showDefChekboxHead
                     ? h('div', {
                         ref: refHeaderElem,
@@ -8349,24 +8908,27 @@ var VxeListComponent = defineVxeComponent({
             loadData(props.data || []);
         });
         onMounted(() => {
-            const { showRadio, showCheckbox } = props;
+            const { showSeq, showRadio, showCheckbox } = props;
             const rowOpts = computeRowOpts.value;
             const { useKey } = rowOpts;
             const isDrag = computeIsDrag.value;
             const keyField = computeKeyField.value;
             if (!keyField) {
+                if (showSeq) {
+                    errLog$g('vxe.error.reqSupportProp', ['show-seq', 'row-config.keyField']);
+                }
                 if (showRadio) {
-                    errLog$f('vxe.error.reqSupportProp', ['show-radio', 'row-config.keyField']);
+                    errLog$g('vxe.error.reqSupportProp', ['show-radio', 'row-config.keyField']);
                 }
                 if (showCheckbox) {
-                    errLog$f('vxe.error.reqSupportProp', ['show-checkbox', 'row-config.keyField']);
+                    errLog$g('vxe.error.reqSupportProp', ['show-checkbox', 'row-config.keyField']);
                 }
                 if (isDrag) {
-                    errLog$f('vxe.error.reqSupportProp', ['drag-config', 'row-config.keyField']);
+                    errLog$g('vxe.error.reqSupportProp', ['drag-config', 'row-config.keyField']);
                 }
             }
             if (useKey && !keyField) {
-                errLog$f('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
+                errLog$g('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
             }
             if (props.autoResize) {
                 const el = refElem.value;
@@ -17430,6 +17992,7 @@ dynamicApp.use(VxeCountdown);
 VxeUI.component(VxeCountdownComponent);
 const Countdown = VxeCountdown;
 
+const { errLog: errLog$f } = createComponentLog('date-panel');
 var VxeDatePanelComponent = defineVxeComponent({
     name: 'VxeDatePanel',
     props: {
@@ -17515,32 +18078,26 @@ var VxeDatePanelComponent = defineVxeComponent({
             currentDate: null
         });
         const internalData = {
-            yearSize: 12,
-            monthSize: 20,
-            quarterSize: 8,
+            yearSize: 16,
+            monthSize: 12,
+            quarterSize: 4,
             hpTimeout: undefined
         };
         const refElem = ref();
         const refPanelWrapper = ref();
         const refInputTimeBody = ref();
-        const refMaps = {
-            refElem
-        };
-        const $xeDatePanel = {
-            xID,
-            props,
-            context,
-            reactData,
-            internalData,
-            getRefMaps: () => refMaps
-        };
-        const computeIsDateTimeType = computed(() => {
+        const computeIsTimeType = computed(() => {
             const { type } = props;
-            return type === 'time' || type === 'datetime';
+            return type === 'time';
+        });
+        const computeIsTimeOrDateTimeType = computed(() => {
+            const { type } = props;
+            const isTimeType = computeIsTimeType.value;
+            return isTimeType || type === 'datetime';
         });
         const computeIsDatePanelType = computed(() => {
-            const isDateTimeType = computeIsDateTimeType.value;
-            return isDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
+            const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
+            return isTimeOrDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
         });
         const computeDateStartDate = computed(() => {
             return props.startDate ? XEUtils.toStringDate(props.startDate) : null;
@@ -17549,19 +18106,25 @@ var VxeDatePanelComponent = defineVxeComponent({
             return props.endDate ? XEUtils.toStringDate(props.endDate) : null;
         });
         const computeDateListValue = computed(() => {
-            const { modelValue } = props;
+            const { modelValue, valueFormat } = props;
             const isDatePanelType = computeIsDatePanelType.value;
             const dateValueFormat = computeDateValueFormat.value;
+            const restList = [];
             if (modelValue && isDatePanelType) {
-                return XEUtils.toValueString(modelValue).split(',').map(item => {
-                    const date = parseDate(item, dateValueFormat);
-                    if (XEUtils.isValidDate(date)) {
-                        return date;
+                (XEUtils.isArray(modelValue) ? modelValue : XEUtils.toValueString(modelValue).split(',')).forEach(val => {
+                    let strVal = val;
+                    if (val) {
+                        if (valueFormat === 'timestamp') {
+                            if (XEUtils.isString(val) && /^\d+$/.test(val)) {
+                                strVal = Number(strVal);
+                            }
+                        }
+                        const date = parseDate(strVal, dateValueFormat);
+                        restList.push(date);
                     }
-                    return date;
                 });
             }
-            return [];
+            return restList;
         });
         const computeDateMultipleValue = computed(() => {
             const dateListValue = computeDateListValue.value;
@@ -17634,8 +18197,8 @@ var VxeDatePanelComponent = defineVxeComponent({
         });
         const computeDateHMSTime = computed(() => {
             const dateValue = computeDateValue.value;
-            const isDateTimeType = computeIsDateTimeType.value;
-            return dateValue && isDateTimeType ? (dateValue.getHours() * 3600 + dateValue.getMinutes() * 60 + dateValue.getSeconds()) * 1000 : 0;
+            const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
+            return dateValue && isTimeOrDateTimeType ? (dateValue.getHours() * 3600 + dateValue.getMinutes() * 60 + dateValue.getSeconds()) * 1000 : 0;
         });
         const computeDateLabelFormat = computed(() => {
             const { labelFormat } = props;
@@ -17653,7 +18216,7 @@ var VxeDatePanelComponent = defineVxeComponent({
                 const currFullYear = currentDate.getFullYear();
                 const selectFullYear = selectMonth.getFullYear();
                 const startYearDate = new Date(selectFullYear - selectFullYear % yearSize, 0, 1);
-                for (let index = -4; index < yearSize + 4; index++) {
+                for (let index = 0; index < yearSize; index++) {
                     const date = XEUtils.getWhatYear(startYearDate, index, 'first');
                     const itemFullYear = date.getFullYear();
                     years.push({
@@ -17753,7 +18316,7 @@ var VxeDatePanelComponent = defineVxeComponent({
                 const currQuarter = getDateQuarter(currentDate);
                 const firstYear = XEUtils.getWhatYear(selectMonth, 0, 'first');
                 const selFullYear = firstYear.getFullYear();
-                for (let index = -2; index < quarterSize - 2; index++) {
+                for (let index = 0; index < quarterSize; index++) {
                     const date = XEUtils.getWhatQuarter(firstYear, index);
                     const itemFullYear = date.getFullYear();
                     const itemQuarter = getDateQuarter(date);
@@ -17782,7 +18345,7 @@ var VxeDatePanelComponent = defineVxeComponent({
                 const currFullYear = currentDate.getFullYear();
                 const currMonth = currentDate.getMonth();
                 const selFullYear = XEUtils.getWhatYear(selectMonth, 0, 'first').getFullYear();
-                for (let index = -4; index < monthSize - 4; index++) {
+                for (let index = 0; index < monthSize; index++) {
                     const date = XEUtils.getWhatYear(selectMonth, 0, index);
                     const itemFullYear = date.getFullYear();
                     const itemMonth = date.getMonth();
@@ -17860,8 +18423,8 @@ var VxeDatePanelComponent = defineVxeComponent({
             const timeOpts = computeTimeOpts.value;
             const { hours: hourOptions, hourDisabledMethod } = timeOpts;
             const list = [];
-            const isDateTimeType = computeIsDateTimeType.value;
-            if (isDateTimeType) {
+            const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
+            if (isTimeOrDateTimeType) {
                 if (hourOptions && hourOptions.length) {
                     hourOptions.forEach(item => {
                         if (XEUtils.isNumber(item) || XEUtils.isString(item)) {
@@ -17899,8 +18462,8 @@ var VxeDatePanelComponent = defineVxeComponent({
             const timeOpts = computeTimeOpts.value;
             const { minutes: minuteOptions, minuteDisabledMethod } = timeOpts;
             const list = [];
-            const isDateTimeType = computeIsDateTimeType.value;
-            if (isDateTimeType) {
+            const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
+            if (isTimeOrDateTimeType) {
                 if (minuteOptions && minuteOptions.length) {
                     minuteOptions.forEach(item => {
                         if (XEUtils.isNumber(item) || XEUtils.isString(item)) {
@@ -17948,8 +18511,8 @@ var VxeDatePanelComponent = defineVxeComponent({
             const timeOpts = computeTimeOpts.value;
             const { seconds: secondOptions, secondDisabledMethod } = timeOpts;
             const list = [];
-            const isDateTimeType = computeIsDateTimeType.value;
-            if (isDateTimeType) {
+            const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
+            if (isTimeOrDateTimeType) {
                 if (secondOptions && secondOptions.length) {
                     secondOptions.forEach(item => {
                         if (XEUtils.isNumber(item) || XEUtils.isString(item)) {
@@ -17983,6 +18546,22 @@ var VxeDatePanelComponent = defineVxeComponent({
             }
             return list;
         });
+        const refMaps = {
+            refElem
+        };
+        const computeMaps = {
+            computeSize,
+            computeYearList
+        };
+        const $xeDatePanel = {
+            xID,
+            props,
+            context,
+            reactData,
+            internalData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
         const updateModelValue = (modelValue) => {
             const { type } = props;
             const dateValueFormat = computeDateValueFormat.value;
@@ -17994,7 +18573,7 @@ var VxeDatePanelComponent = defineVxeComponent({
         const parseDate = (value, format) => {
             const { type, multiple } = props;
             if (type === 'time') {
-                return toStringTimeDate(XEUtils.isArray(value) ? value : XEUtils.last(value));
+                return toStringTimeDate(XEUtils.isArray(value) ? XEUtils.last(value) : value);
             }
             if (XEUtils.isArray(value)) {
                 return XEUtils.toStringDate(XEUtils.last(value), format);
@@ -18148,14 +18727,15 @@ var VxeDatePanelComponent = defineVxeComponent({
         const dateChange = (date, isReload) => {
             const { modelValue, multiple, valueSort } = props;
             const { datetimePanelValue } = reactData;
-            const isDateTimeType = computeIsDateTimeType.value;
+            const isTimeType = computeIsTimeType.value;
+            const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.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);
             }
-            else if (isDateTimeType) {
+            else if (isTimeOrDateTimeType) {
                 if (datetimePanelValue) {
                     date.setHours(datetimePanelValue.getHours());
                     date.setMinutes(datetimePanelValue.getMinutes());
@@ -18164,10 +18744,10 @@ var VxeDatePanelComponent = defineVxeComponent({
             }
             const inpVal = XEUtils.toDateString(date, dateValueFormat, { firstDay: firstDayOfWeek });
             dateCheckMonth(date);
-            if (multiple) {
+            if (!isTimeType && multiple) {
                 const overCount = computeOverCount.value;
                 // 如果为多选
-                if (isDateTimeType) {
+                if (isTimeOrDateTimeType) {
                     // 如果是datetime特殊类型
                     const dateListValue = isReload ? [] : [...computeDateListValue.value];
                     let datetimeRest = [];
@@ -18503,19 +19083,21 @@ var VxeDatePanelComponent = defineVxeComponent({
         };
         const dateConfirmEvent = (evnt) => {
             const { multiple } = props;
-            const { datetimePanelValue } = reactData;
+            const { datetimePanelValue, currentDate } = reactData;
             const dateValue = computeDateValue.value;
-            const isDateTimeType = computeIsDateTimeType.value;
-            if (isDateTimeType) {
+            const isTimeType = computeIsTimeType.value;
+            const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
+            if (isTimeOrDateTimeType) {
                 const dateValueFormat = computeDateValueFormat.value;
-                if (multiple) {
+                if (!isTimeType && multiple) {
                     // 如果为多选
                     const dateMultipleValue = computeDateMultipleValue.value;
-                    if (isDateTimeType) {
+                    const dateListValue = computeDateListValue.value;
+                    if (isTimeOrDateTimeType) {
                         // 如果是datetime特殊类型
-                        const dateListValue = [...computeDateListValue.value];
+                        const listVals = dateListValue.length ? [...dateListValue] : [];
                         const datetimeRest = [];
-                        dateListValue.forEach(item => {
+                        listVals.forEach(item => {
                             if (item) {
                                 if (datetimePanelValue) {
                                     item.setHours(datetimePanelValue.getHours());
@@ -18533,7 +19115,7 @@ var VxeDatePanelComponent = defineVxeComponent({
                     }
                 }
                 else {
-                    dateChange(dateValue || reactData.currentDate);
+                    dateChange(dateValue || currentDate);
                 }
             }
             hidePanel();
@@ -18559,7 +19141,7 @@ var VxeDatePanelComponent = defineVxeComponent({
         };
         const dateOpenPanel = () => {
             const { type, defaultDate, defaultTime } = props;
-            const isDateTimeType = computeIsDateTimeType.value;
+            const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
             const dateValue = computeDateValue.value;
             if (['year', 'quarter', 'month', 'week'].indexOf(type) > -1) {
                 reactData.datePanelType = type;
@@ -18587,7 +19169,7 @@ var VxeDatePanelComponent = defineVxeComponent({
                     dateNowHandle();
                 }
             }
-            if (isDateTimeType) {
+            if (isTimeOrDateTimeType) {
                 let dtPanelValue = reactData.datePanelValue;
                 if (!dtPanelValue) {
                     dtPanelValue = XEUtils.getWhatDay(Date.now(), 0, 'first');
@@ -19194,6 +19776,12 @@ var VxeDatePanelComponent = defineVxeComponent({
         });
         initValue();
         dateOpenPanel();
+        onMounted(() => {
+            const { type, multiple } = props;
+            if (multiple && type === 'time') {
+                errLog$f('vxe.error.notSupportProp', [`type=${type}`, 'multiple=true', 'multiple=false']);
+            }
+        });
         $xeDatePanel.renderVN = renderVN;
         return $xeDatePanel;
     },
@@ -19428,20 +20016,25 @@ var VxeDatePickerComponent = defineVxeComponent({
             }
             return disabled;
         });
-        const computeIsDateTimeType = computed(() => {
+        const computeIsTimeType = computed(() => {
             const { type } = props;
-            return type === 'time' || type === 'datetime';
+            return type === 'time';
+        });
+        const computeIsTimeOrDateTimeType = computed(() => {
+            const { type } = props;
+            const isTimeType = computeIsTimeType.value;
+            return isTimeType || type === 'datetime';
         });
         const computeIsDatePickerType = computed(() => {
-            const isDateTimeType = computeIsDateTimeType.value;
-            return isDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
+            const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
+            return isTimeOrDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
         });
         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 isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
+            return isTimeOrDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
         });
         const computeDateListValue = computed(() => {
             const { modelValue, type, multiple } = props;
@@ -19655,7 +20248,7 @@ var VxeDatePickerComponent = defineVxeComponent({
         };
         const dateChange = (date, isReload) => {
             const { modelValue, multiple } = props;
-            const isDateTimeType = computeIsDateTimeType.value;
+            const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
             const dateValueFormat = computeDateValueFormat.value;
             const firstDayOfWeek = computeFirstDayOfWeek.value;
             if (props.type === 'week') {
@@ -19666,7 +20259,7 @@ var VxeDatePickerComponent = defineVxeComponent({
             if (multiple) {
                 const overCount = computeOverCount.value;
                 // 如果为多选
-                if (isDateTimeType) {
+                if (isTimeOrDateTimeType) {
                     // 如果是datetime特殊类型
                     const dateListValue = [...computeDateListValue.value];
                     const datetimeRest = [];
@@ -20219,9 +20812,9 @@ var VxeDatePickerComponent = defineVxeComponent({
         const panelChangeEvent = (params) => {
             const { multiple, autoClose } = props;
             const { value, $event } = params;
-            const isDateTimeType = computeIsDateTimeType.value;
+            const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
             handleChange(value, $event);
-            if (!multiple && !isDateTimeType) {
+            if (!multiple && !isTimeOrDateTimeType) {
                 if (autoClose) {
                     hidePanel();
                 }
@@ -20505,7 +21098,7 @@ var VxeDatePickerComponent = defineVxeComponent({
             const btnTransfer = computeBtnTransfer.value;
             const shortcutOpts = computeShortcutOpts.value;
             const isClearable = computeIsClearable.value;
-            const isDateTimeType = computeIsDateTimeType.value;
+            const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
             const shortcutList = computeShortcutList.value;
             const timeOpts = computeTimeOpts.value;
             const dateStartDate = computeDateStartDate.value;
@@ -20519,7 +21112,7 @@ var VxeDatePickerComponent = defineVxeComponent({
             const rightSlot = slots.right;
             const ppClassName = popupOpts.className;
             const hasShortcutBtn = shortcutList.length > 0;
-            const showConfirmBtn = (showConfirmButton === null ? (isDateTimeType || multiple) : showConfirmButton);
+            const showConfirmBtn = (showConfirmButton === null ? (isTimeOrDateTimeType || multiple) : showConfirmButton);
             const showClearBtn = (showClearButton === null ? (isClearable && showConfirmBtn && type !== 'time') : showClearButton);
             return h(Teleport, {
                 to: 'body',
@@ -20833,8 +21426,8 @@ function createReactData$d() {
         isActivated: false,
         selectStValue: '',
         selectEdValue: '',
-        paneStartVal: '',
-        paneEndVal: ''
+        paneStartVal: [],
+        paneEndVal: []
     };
 }
 function createInternalData$c() {
@@ -21067,9 +21660,14 @@ var VxeDateRangePickerComponent = defineVxeComponent({
             const { startValue, endValue } = props;
             return `${startValue || ''}${endValue || ''}`;
         });
-        const computeIsDateTimeType = computed(() => {
+        const computeIsTimeType = computed(() => {
             const { type } = props;
-            return type === 'time' || type === 'datetime';
+            return type === 'time';
+        });
+        const computeIsTimeOrDateTimeType = computed(() => {
+            const { type } = props;
+            const isTimeType = computeIsTimeType.value;
+            return isTimeType || type === 'datetime';
         });
         const computeIsDatePickerType = computed(() => {
             return ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
@@ -21221,7 +21819,7 @@ var VxeDateRangePickerComponent = defineVxeComponent({
             };
         };
         const updateModelValue = (isModel) => {
-            const { modelValue, startValue, endValue } = props;
+            const { modelValue, startValue, endValue, valueFormat } = props;
             let restObj = {
                 sValue: '',
                 eValue: ''
@@ -21242,8 +21840,20 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                     restObj = paraeUpdateModel();
                 }
             }
-            reactData.selectStValue = restObj.sValue;
-            reactData.selectEdValue = restObj.eValue;
+            let startRest = restObj.sValue;
+            let endRest = restObj.eValue;
+            if (valueFormat === 'timestamp') {
+                if (XEUtils.isString(startRest) && /^\d+$/.test(startRest)) {
+                    startRest = Number(startRest);
+                }
+                if (XEUtils.isString(endRest) && /^\d+$/.test(endRest)) {
+                    endRest = Number(endRest);
+                }
+            }
+            reactData.selectStValue = startRest;
+            reactData.selectEdValue = endRest;
+            reactData.paneEndVal = [startRest, endRest];
+            reactData.paneStartVal = [startRest, endRest];
         };
         const triggerEvent = (evnt) => {
             const { selectStValue, selectEdValue } = reactData;
@@ -21407,12 +22017,17 @@ var VxeDateRangePickerComponent = defineVxeComponent({
             triggerEvent(evnt);
         };
         const confirmEvent = (evnt) => {
+            const isTimeType = computeIsTimeType.value;
             const $startDatePanel = refStartDatePanel.value;
             const $endDatePanel = refEndDatePanel.value;
             if ($startDatePanel && $endDatePanel) {
                 const startValue = $startDatePanel.getModelValue();
                 const endValue = $endDatePanel.getModelValue();
-                if ((startValue && !endValue) || (!startValue && endValue)) {
+                if (isTimeType) {
+                    $startDatePanel.confirmByEvent(evnt);
+                    $endDatePanel.confirmByEvent(evnt);
+                }
+                else if ((startValue && !endValue) || (!startValue && endValue)) {
                     handleChange('', '', evnt);
                 }
                 else {
@@ -21442,11 +22057,16 @@ var VxeDateRangePickerComponent = defineVxeComponent({
             else {
                 startValue = currValue || XEUtils.last(paneVals);
             }
-            reactData.paneEndVal = [startValue, endValue].join(',');
-            reactData.paneStartVal = [startValue, endValue].join(',');
+            reactData.paneEndVal = [startValue, endValue];
+            reactData.paneStartVal = [startValue, endValue];
             handleChange(startValue, endValue, $event);
             handleSelectClose();
-            if (!selectStatus) {
+            if (selectStatus) {
+                if (startValue && endValue) {
+                    internalData.selectStatus = false;
+                }
+            }
+            else {
                 internalData.selectStatus = true;
             }
             nextTick(() => {
@@ -21472,11 +22092,16 @@ var VxeDateRangePickerComponent = defineVxeComponent({
             else {
                 endValue = currValue || XEUtils.last(paneVals);
             }
-            reactData.paneEndVal = [startValue, endValue].join(',');
-            reactData.paneStartVal = [startValue, endValue].join(',');
+            reactData.paneEndVal = [startValue, endValue];
+            reactData.paneStartVal = [startValue, endValue];
             handleChange(startValue, endValue, $event);
             handleSelectClose();
-            if (!selectStatus) {
+            if (selectStatus) {
+                if (startValue && endValue) {
+                    internalData.selectStatus = false;
+                }
+            }
+            else {
                 internalData.selectStatus = true;
             }
             nextTick(() => {
@@ -21508,6 +22133,21 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                     }
                     break;
                 }
+                case 'month':
+                case 'quarter': {
+                    if (endYear <= startYear) {
+                        $endDatePanel.setPanelDate(getNextYear(startPanelDate));
+                    }
+                    break;
+                }
+                case 'year': {
+                    const { computeYearList } = $startDatePanel.getComputeMaps();
+                    const yearList = computeYearList.value;
+                    if (yearList.some((item) => XEUtils.isDateSame(item.date, endPanelDate, 'yyyy'))) {
+                        $endDatePanel.setPanelDate(getNextYear(startPanelDate, yearList.length));
+                    }
+                    break;
+                }
             }
         };
         const startPanelDateBtnChangeEvent = () => {
@@ -21531,6 +22171,17 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                         $endDatePanel.setPanelDate(getNextMonth(startPanelDate));
                         break;
                     }
+                    case 'month':
+                    case 'quarter': {
+                        $endDatePanel.setPanelDate(getNextYear(startPanelDate));
+                        break;
+                    }
+                    case 'year': {
+                        const { computeYearList } = $startDatePanel.getComputeMaps();
+                        const yearList = computeYearList.value;
+                        $endDatePanel.setPanelDate(getNextYear(startPanelDate, yearList.length));
+                        break;
+                    }
                 }
             }
             else {
@@ -21562,6 +22213,21 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                     }
                     break;
                 }
+                case 'month':
+                case 'quarter': {
+                    if (startYear >= endYear) {
+                        $startDatePanel.setPanelDate(getPrevYear(endPanelDate));
+                    }
+                    break;
+                }
+                case 'year': {
+                    const { computeYearList } = $endDatePanel.getComputeMaps();
+                    const yearList = computeYearList.value;
+                    if (yearList.some((item) => XEUtils.isDateSame(item.date, startPanelDate, 'yyyy'))) {
+                        $startDatePanel.setPanelDate(getPrevYear(endPanelDate, yearList.length));
+                    }
+                    break;
+                }
             }
         };
         const endPanelDateBtnChangeEvent = () => {
@@ -21585,6 +22251,17 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                         $startDatePanel.setPanelDate(getPrevMonth(endPanelDate));
                         break;
                     }
+                    case 'month':
+                    case 'quarter': {
+                        $startDatePanel.setPanelDate(getPrevYear(endPanelDate));
+                        break;
+                    }
+                    case 'year': {
+                        const { computeYearList } = $endDatePanel.getComputeMaps();
+                        const yearList = computeYearList.value;
+                        $startDatePanel.setPanelDate(getPrevYear(endPanelDate, yearList.length));
+                        break;
+                    }
                 }
             }
             else {
@@ -21877,7 +22554,8 @@ var VxeDateRangePickerComponent = defineVxeComponent({
             const isClearable = computeIsClearable.value;
             const panelLabelObj = computePanelLabelObj.value;
             const shortcutList = computeShortcutList.value;
-            const isDateTimeType = computeIsDateTimeType.value;
+            const isTimeType = computeIsTimeType.value;
+            const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
             const defaultDates = computeDefaultDates.value;
             const defaultTimes = computeDefaultTimes.value;
             const timeOpts = computeTimeOpts.value;
@@ -21893,7 +22571,7 @@ var VxeDateRangePickerComponent = defineVxeComponent({
             const [sdDate, edDate] = defaultDates;
             const [sdTime, edTime] = defaultTimes;
             const hasShortcutBtn = shortcutList.length > 0;
-            const showConfirmBtn = (showConfirmButton === null ? (isDateTimeType || !autoClose) : showConfirmButton);
+            const showConfirmBtn = (showConfirmButton === null ? (isTimeOrDateTimeType || !autoClose) : showConfirmButton);
             const showClearBtn = (showClearButton === null ? isClearable : showClearButton);
             return h(Teleport, {
                 to: 'body',
@@ -21948,7 +22626,7 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                                         h(VxeDatePanel, {
                                             ref: refStartDatePanel,
                                             modelValue: paneStartVal,
-                                            multiple: true,
+                                            multiple: !isTimeType,
                                             valueSort: true,
                                             limitCount: 3,
                                             defaultMode: 'first',
@@ -21975,7 +22653,7 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                                         h(VxeDatePanel, {
                                             ref: refEndDatePanel,
                                             modelValue: paneEndVal,
-                                            multiple: true,
+                                            multiple: !isTimeType,
                                             valueSort: true,
                                             limitCount: 3,
                                             defaultMode: 'last',
@@ -32996,7 +33674,7 @@ function handlePrint(opts, printHtml = '') {
     if (styleUrls && styleUrls.length) {
         styleUrls.forEach(url => {
             if (!/.css$/.test(url)) {
-                warnLog$g('vxe.error.errProp', [url, `${url}.css`]);
+                warnLog$h('vxe.error.errProp', [url, `${url}.css`]);
             }
         });
     }