vxe-pc-ui 4.9.0 → 4.9.2

package/lib/index.umd.js

@@ -3588,14 +3588,14 @@ function checkDynamic() {
 }
 ;// CONCATENATED MODULE: ./packages/ui/src/log.ts
 
-const log_version = `ui v${"4.9.0"}`;
+const log_version = `ui v${"4.9.2"}`;
 const warnLog = log.create('warn', log_version);
 const errLog = log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
 
-const ui_version = "4.9.0";
+const ui_version = "4.9.2";
 index_esm_VxeUI.uiVersion = ui_version;
 index_esm_VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -27463,7 +27463,7 @@ const lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width';
             dispatchEvent('before-hide', params, null);
             setTimeout(() => {
               reactData.visible = false;
-              emit('update:modelValue', false);
+              emitModel(false);
               dispatchEvent('hide', params, null);
             }, 200);
             removeBodyLockScroll();
@@ -27796,7 +27796,7 @@ const lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width';
             const params = {
               type
             };
-            emit('update:modelValue', true);
+            emitModel(true);
             dispatchEvent('show', params, null);
           });
         }, 10);
@@ -28226,6 +28226,9 @@ const lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width';
         $modal: $xeModal
       }, params));
     };
+    const emitModel = value => {
+      emit('update:modelValue', value);
+    };
     modalMethods = {
       dispatchEvent,
       open: openModal,
@@ -33707,10 +33710,13 @@ const Select = VxeSelect;
     } = context;
     const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refBarInfoElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refResizableSplitTip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({
       staticItems: [],
-      itemList: []
+      itemList: [],
+      barWidth: 0,
+      barHeight: 0
     });
     const internalData = {
       wrapperWidth: 0,
@@ -33728,12 +33734,8 @@ const Select = VxeSelect;
     const computeActionOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, getConfig().split.actionConfig, props.actionConfig);
     });
-    const computeIsFoldNext = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const actionOpts = computeActionOpts.value;
-      return actionOpts.direction === 'next';
-    });
     const computeVisibleItems = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      return reactData.itemList.filter(item => item.isVisible);
+      return reactData.itemList.filter(item => item.isExpand);
     });
     const computeAutoItems = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
@@ -33747,10 +33749,10 @@ const Select = VxeSelect;
           renderHeight,
           resizeHeight,
           foldHeight,
-          isVisible,
+          isExpand,
           height
         } = item;
-        const itemHeight = isVisible ? foldHeight || resizeHeight || renderHeight : 0;
+        const itemHeight = isExpand ? foldHeight || resizeHeight || renderHeight : 0;
         if (!height) {
           autoItems.push(item);
         }
@@ -33760,10 +33762,10 @@ const Select = VxeSelect;
           renderWidth,
           resizeWidth,
           foldWidth,
-          isVisible,
+          isExpand,
           width
         } = item;
-        const itemWidth = isVisible ? foldWidth || resizeWidth || renderWidth : 0;
+        const itemWidth = isExpand ? foldWidth || resizeWidth || renderWidth : 0;
         if (!width) {
           autoItems.push(item);
         }
@@ -33795,8 +33797,7 @@ const Select = VxeSelect;
     const computeMaps = {
       computeItemOpts,
       computeBarOpts,
-      computeActionOpts,
-      computeIsFoldNext
+      computeActionOpts
     };
     const refMaps = {
       refElem
@@ -33826,38 +33827,31 @@ const Select = VxeSelect;
       }
       return [];
     };
-    const getDefaultActionIcon = item => {
+    const getActionIcon = (prevItem, nextItem, isNext) => {
       const {
         vertical
       } = props;
-      const {
-        showAction,
-        isExpand
-      } = item;
-      const isFoldNext = computeIsFoldNext.value;
       const topIcon = 'SPLIT_TOP_ACTION';
       const bottomIcon = 'SPLIT_BOTTOM_ACTION';
       const leftIcon = 'SPLIT_LEFT_ACTION';
       const rightIcon = 'SPLIT_RIGHT_ACTION';
-      if (showAction) {
-        let iconName = '';
-        if (isFoldNext) {
-          if (vertical) {
-            iconName = isExpand ? bottomIcon : topIcon;
-          } else {
-            iconName = isExpand ? rightIcon : leftIcon;
-          }
+      let iconName = '';
+      if (vertical) {
+        if (isNext) {
+          iconName = nextItem.isExpand ? bottomIcon : topIcon;
         } else {
-          if (vertical) {
-            iconName = isExpand ? topIcon : bottomIcon;
-          } else {
-            iconName = isExpand ? leftIcon : rightIcon;
-          }
+          iconName = prevItem.isExpand ? topIcon : bottomIcon;
         }
-        if (iconName) {
-          return getIcon()[iconName];
+      } else {
+        if (isNext) {
+          iconName = nextItem.isExpand ? rightIcon : leftIcon;
+        } else {
+          iconName = prevItem.isExpand ? leftIcon : rightIcon;
         }
       }
+      if (iconName) {
+        return getIcon()[iconName];
+      }
       return '';
     };
     const reset = () => {
@@ -33866,7 +33860,6 @@ const Select = VxeSelect;
       } = reactData;
       itemList.forEach(item => {
         item.isExpand = true;
-        item.isVisible = true;
         item.foldHeight = 0;
         item.foldWidth = 0;
         item.resizeHeight = 0;
@@ -33878,8 +33871,12 @@ const Select = VxeSelect;
       const {
         staticItems
       } = reactData;
+      const actionOpts = computeActionOpts.value;
+      const {
+        showPrevButton,
+        showNextButton
+      } = actionOpts;
       const itemDef = {
-        isVisible: true,
         isExpand: true,
         renderWidth: 0,
         resizeWidth: 0,
@@ -33889,6 +33886,9 @@ const Select = VxeSelect;
         foldHeight: 0
       };
       reactData.itemList = list.map(item => {
+        if (item.showAction) {
+          warnLog('vxe.error.removeProp', ['showAction']);
+        }
         if (item.slots) {
           external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().each(item.slots, func => {
             if (!external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(func)) {
@@ -33905,6 +33905,9 @@ const Select = VxeSelect;
       if (staticItems.length) {
         errLog('vxe.error.errConflicts', ['<vxe-split-pane ...>', 'items']);
       }
+      if ((showPrevButton || showNextButton) && reactData.itemList.length > 2) {
+        errLog('vxe.error.errConflicts', ['action-config.showPrevButton | action-config.showNextButton', 'Only supports 2 item']);
+      }
       return recalculate();
     };
     const loadItem = list => {
@@ -33922,6 +33925,7 @@ const Select = VxeSelect;
           itemList
         } = reactData;
         const el = refElem.value;
+        const barInfoElem = refBarInfoElem.value;
         if (!el) {
           return;
         }
@@ -33930,6 +33934,12 @@ const Select = VxeSelect;
         if (!wWidth || !wHeight) {
           return;
         }
+        if (barInfoElem) {
+          reactData.barWidth = barInfoElem.offsetWidth;
+          reactData.barHeight = barInfoElem.offsetHeight;
+        }
+        const contentWidth = wWidth - (vertical ? 0 : reactData.barWidth * (itemList.length - 1));
+        const contentHeight = wHeight - (vertical ? reactData.barHeight * (itemList.length - 1) : 0);
         const itemOpts = computeItemOpts.value;
         const allMinWidth = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(itemOpts.minWidth);
         const allMinHeight = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(itemOpts.minHeight);
@@ -33943,7 +33953,7 @@ const Select = VxeSelect;
             let itemHeight = 0;
             if (height) {
               if (isScale(height)) {
-                itemHeight = wHeight * external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(height) / 100;
+                itemHeight = contentHeight * external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(height) / 100;
               } else {
                 itemHeight = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(height);
               }
@@ -33954,7 +33964,7 @@ const Select = VxeSelect;
             countHeight += itemHeight;
           });
           if (residueItems.length) {
-            const reMeanHeight = (wHeight - countHeight) / residueItems.length;
+            const reMeanHeight = (contentHeight - countHeight) / residueItems.length;
             residueItems.forEach(item => {
               item.renderHeight = Math.max(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(getGlobalDefaultConfig(item.minHeight, allMinHeight)), reMeanHeight);
             });
@@ -33968,7 +33978,7 @@ const Select = VxeSelect;
             let itemWidth = 0;
             if (width) {
               if (isScale(width)) {
-                itemWidth = wWidth * external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(width) / 100;
+                itemWidth = contentWidth * external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(width) / 100;
               } else {
                 itemWidth = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(width);
               }
@@ -33979,14 +33989,14 @@ const Select = VxeSelect;
             countWidth += itemWidth;
           });
           if (residueItems.length) {
-            const reMeanWidth = (wWidth - countWidth) / residueItems.length;
+            const reMeanWidth = (contentWidth - countWidth) / residueItems.length;
             residueItems.forEach(item => {
               item.renderWidth = Math.max(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(getGlobalDefaultConfig(item.minWidth, allMinWidth)), reMeanWidth);
             });
           }
         }
-        internalData.wrapperWidth = wWidth;
-        internalData.wrapperHeight = wHeight;
+        internalData.wrapperWidth = contentWidth;
+        internalData.wrapperHeight = contentHeight;
       });
     };
     const dragEvent = evnt => {
@@ -34007,20 +34017,22 @@ const Select = VxeSelect;
       if (!el) {
         return;
       }
-      const itemId = handleEl.getAttribute('itemid');
-      const itemIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(itemList, item => item.id === itemId);
-      const item = itemList[itemIndex];
-      if (!item) {
+      const prevEl = handleEl.previousElementSibling;
+      const nextEl = handleEl.nextElementSibling;
+      if (!prevEl || !nextEl) {
         return;
       }
-      if (!item.isExpand) {
+      const prevId = prevEl.getAttribute('itemid');
+      const nextId = nextEl.getAttribute('itemid');
+      const prevItem = itemList.find(item => item.id === prevId);
+      const nextItem = itemList.find(item => item.id === nextId);
+      if (!prevItem || !nextItem) {
         return;
       }
       const containerRect = el.getBoundingClientRect();
       const barRect = barEl.getBoundingClientRect();
       const rsSplitLineEl = refResizableSplitTip.value;
       const rsSplitTipEl = rsSplitLineEl ? rsSplitLineEl.children[0] : null;
-      const isFoldNext = computeIsFoldNext.value;
       const itemOpts = computeItemOpts.value;
       const resizeOpts = computeResizeOpts.value;
       const {
@@ -34028,14 +34040,6 @@ const Select = VxeSelect;
       } = resizeOpts;
       const allMinWidth = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(itemOpts.minWidth);
       const allMinHeight = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(itemOpts.minHeight);
-      const targetItem = itemList[itemIndex + (isFoldNext ? 1 : -1)];
-      const prevItem = itemList[itemIndex + (isFoldNext ? 0 : -1)];
-      const nextItem = itemList[itemIndex + (isFoldNext ? 1 : 0)];
-      const prevEl = targetItem ? el.querySelector(`.vxe-split-pane[itemid="${prevItem.id}"]`) : null;
-      const nextEl = item ? el.querySelector(`.vxe-split-pane[itemid="${nextItem.id}"]`) : null;
-      if (!prevEl || !nextEl) {
-        return;
-      }
       const barOffsetX = Math.ceil(barRect.width - (evnt.clientX - barRect.left));
       const barOffsetY = Math.ceil(evnt.clientY - barRect.top);
       const prevWidth = prevEl.offsetWidth;
@@ -34172,8 +34176,6 @@ const Select = VxeSelect;
           handleReStyle(evnt);
         }
         dispatchEvent('resize-drag', {
-          item,
-          name: item.name,
           prevItem,
           nextItem,
           offsetHeight: targetOffsetHeight,
@@ -34193,8 +34195,6 @@ const Select = VxeSelect;
         handleUpdate();
         removeClass(el, 'is--drag');
         dispatchEvent('resize-end', {
-          item,
-          name: item.name,
           prevItem,
           nextItem,
           offsetHeight: targetOffsetHeight,
@@ -34209,98 +34209,149 @@ const Select = VxeSelect;
       handleDrag(evnt);
       addClass(el, 'is--drag');
       dispatchEvent('resize-start', {
-        item,
-        name: item.name,
         prevItem,
         nextItem
       }, evnt);
     };
-    const handleItemActionEvent = evnt => {
-      const el = refElem.value;
-      if (!el) {
-        return;
-      }
+    const handleItemActionEvent = (evnt, prevItem, nextItem, isNext) => {
       const {
         vertical
       } = props;
+      let expanded = false;
+      let item = prevItem;
+      if (isNext) {
+        item = nextItem;
+        expanded = !nextItem.isExpand;
+        nextItem.isExpand = expanded;
+      } else {
+        expanded = !prevItem.isExpand;
+        prevItem.isExpand = expanded;
+      }
+      if (vertical) {
+        if (prevItem.isExpand && nextItem.isExpand) {
+          prevItem.foldHeight = 0;
+          nextItem.foldHeight = 0;
+        } else if (prevItem.isExpand) {
+          nextItem.foldHeight = 0;
+          prevItem.foldHeight = (prevItem.resizeHeight || prevItem.renderHeight) + (nextItem.resizeHeight || nextItem.renderHeight);
+        } else {
+          prevItem.foldHeight = 0;
+          nextItem.foldHeight = (prevItem.resizeHeight || prevItem.renderHeight) + (nextItem.resizeHeight || nextItem.renderHeight);
+        }
+      } else {
+        if (prevItem.isExpand && nextItem.isExpand) {
+          prevItem.foldWidth = 0;
+          nextItem.foldWidth = 0;
+        } else if (prevItem.isExpand) {
+          nextItem.foldWidth = 0;
+          prevItem.foldWidth = (prevItem.resizeWidth || prevItem.renderWidth) + (nextItem.resizeWidth || nextItem.renderWidth);
+        } else {
+          prevItem.foldWidth = 0;
+          nextItem.foldWidth = (prevItem.resizeWidth || prevItem.renderWidth) + (nextItem.resizeWidth || nextItem.renderWidth);
+        }
+      }
+      dispatchEvent('toggle-expand', {
+        prevItem,
+        nextItem,
+        expanded,
+        item
+      }, evnt);
+      recalculate();
+    };
+    const handlePrevActionDblclickEvent = evnt => {
       const {
         itemList
       } = reactData;
-      const isFoldNext = computeIsFoldNext.value;
+      const actionOpts = computeActionOpts.value;
       const btnEl = evnt.currentTarget;
-      const handleEl = btnEl.parentElement;
-      const itemId = handleEl.getAttribute('itemid');
-      const itemIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(itemList, item => item.id === itemId);
-      const item = itemList[itemIndex];
-      const targetItem = itemList[itemIndex + (isFoldNext ? 1 : -1)];
-      if (item) {
-        const {
-          showAction,
-          isExpand
-        } = item;
-        if (showAction) {
-          if (vertical) {
-            if (targetItem) {
-              targetItem.isVisible = !isExpand;
-              targetItem.foldHeight = 0;
-              item.isExpand = !isExpand;
-              item.isVisible = true;
-              item.foldHeight = isExpand ? (targetItem.resizeHeight || targetItem.renderHeight) + (item.resizeHeight || item.renderHeight) : 0;
-            }
-          } else {
-            if (targetItem) {
-              targetItem.isVisible = !isExpand;
-              targetItem.foldWidth = 0;
-              item.isExpand = !isExpand;
-              item.isVisible = true;
-              item.foldWidth = isExpand ? (targetItem.resizeWidth || targetItem.renderWidth) + (item.resizeWidth || item.renderWidth) : 0;
-            }
-          }
-          dispatchEvent('toggle-expand', {
-            item,
-            name: item.name,
-            targetItem,
-            targetName: targetItem ? targetItem.name : '',
-            expanded: item.isExpand
-          }, evnt);
-          recalculate();
+      const btnWrapperEl = btnEl.parentElement;
+      const handleEl = btnWrapperEl.parentElement;
+      const prevEl = handleEl.previousElementSibling;
+      const prevId = prevEl.getAttribute('itemid');
+      const prevItem = itemList.find(item => item.id === prevId);
+      const nextEl = handleEl.nextElementSibling;
+      const nextId = nextEl.getAttribute('itemid');
+      const nextItem = itemList.find(item => item.id === nextId);
+      if (actionOpts.trigger === 'dblclick') {
+        if (prevItem && nextItem && nextItem.isExpand) {
+          handleItemActionEvent(evnt, prevItem, nextItem, false);
+        }
+      }
+      dispatchEvent('action-dblclick', {
+        prevItem,
+        nextItem
+      }, evnt);
+    };
+    const handlePrevActionClickEvent = evnt => {
+      const {
+        itemList
+      } = reactData;
+      const actionOpts = computeActionOpts.value;
+      const btnEl = evnt.currentTarget;
+      const btnWrapperEl = btnEl.parentElement;
+      const handleEl = btnWrapperEl.parentElement;
+      const prevEl = handleEl.previousElementSibling;
+      const prevId = prevEl.getAttribute('itemid');
+      const prevItem = itemList.find(item => item.id === prevId);
+      const nextEl = handleEl.nextElementSibling;
+      const nextId = nextEl.getAttribute('itemid');
+      const nextItem = itemList.find(item => item.id === nextId);
+      if (actionOpts.trigger !== 'dblclick') {
+        if (prevItem && nextItem && nextItem.isExpand) {
+          handleItemActionEvent(evnt, prevItem, nextItem, false);
         }
       }
+      dispatchEvent('action-click', {
+        prevItem,
+        nextItem
+      }, evnt);
     };
-    const handleActionDblclickEvent = evnt => {
+    const handleNextActionDblclickEvent = evnt => {
       const {
         itemList
       } = reactData;
       const actionOpts = computeActionOpts.value;
       const btnEl = evnt.currentTarget;
-      const handleEl = btnEl.parentElement;
-      const itemId = handleEl.getAttribute('itemid');
-      const itemIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(itemList, item => item.id === itemId);
-      const item = itemList[itemIndex];
+      const btnWrapperEl = btnEl.parentElement;
+      const handleEl = btnWrapperEl.parentElement;
+      const prevEl = handleEl.previousElementSibling;
+      const prevId = prevEl.getAttribute('itemid');
+      const prevItem = itemList.find(item => item.id === prevId);
+      const nextEl = handleEl.nextElementSibling;
+      const nextId = nextEl.getAttribute('itemid');
+      const nextItem = itemList.find(item => item.id === nextId);
       if (actionOpts.trigger === 'dblclick') {
-        handleItemActionEvent(evnt);
+        if (prevItem && nextItem && prevItem.isExpand) {
+          handleItemActionEvent(evnt, prevItem, nextItem, true);
+        }
       }
       dispatchEvent('action-dblclick', {
-        item,
-        name: item ? item.name : ''
+        prevItem,
+        nextItem
       }, evnt);
     };
-    const handleActionClickEvent = evnt => {
+    const handleNextActionClickEvent = evnt => {
       const {
         itemList
       } = reactData;
       const actionOpts = computeActionOpts.value;
       const btnEl = evnt.currentTarget;
-      const handleEl = btnEl.parentElement;
-      const itemId = handleEl.getAttribute('itemid');
-      const itemIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(itemList, item => item.id === itemId);
-      const item = itemList[itemIndex];
+      const btnWrapperEl = btnEl.parentElement;
+      const handleEl = btnWrapperEl.parentElement;
+      const prevEl = handleEl.previousElementSibling;
+      const prevId = prevEl.getAttribute('itemid');
+      const prevItem = itemList.find(item => item.id === prevId);
+      const nextEl = handleEl.nextElementSibling;
+      const nextId = nextEl.getAttribute('itemid');
+      const nextItem = itemList.find(item => item.id === nextId);
       if (actionOpts.trigger !== 'dblclick') {
-        handleItemActionEvent(evnt);
+        if (prevItem && nextItem && prevItem.isExpand) {
+          handleItemActionEvent(evnt, prevItem, nextItem, true);
+        }
       }
       dispatchEvent('action-click', {
-        item,
-        name: item ? item.name : ''
+        prevItem,
+        nextItem
       }, evnt);
     };
     const handleGlobalResizeEvent = () => {
@@ -34315,29 +34366,50 @@ const Select = VxeSelect;
     };
     const splitPrivateMethods = {};
     Object.assign($xeSplit, splitMethods, splitPrivateMethods);
-    const renderHandleBar = item => {
+    const renderHandleBar = (prevItem, nextItem) => {
+      const {
+        border,
+        resize,
+        vertical
+      } = props;
+      const {
+        itemList
+      } = reactData;
       const barStyle = computeBarStyle.value;
       const actionOpts = computeActionOpts.value;
-      const isFoldNext = computeIsFoldNext.value;
       const {
-        id,
-        isExpand,
-        showAction
-      } = item;
+        direction
+      } = actionOpts;
+      const showPrevButton = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(actionOpts.showPrevButton) ? actionOpts.showPrevButton : itemList.some(item => item.showAction);
+      const showNextButton = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(actionOpts.showNextButton) ? actionOpts.showNextButton : direction === 'next' && itemList.some(item => item.showAction);
+      const resizeOpts = computeResizeOpts.value;
+      const {
+        immediate
+      } = resizeOpts;
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        itemid: id,
-        class: ['vxe-split-pane-handle', isFoldNext ? 'to--next' : 'to--prev']
+        class: ['vxe-split-pane-handle', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy', {
+          'is--resize': resize,
+          'is--border': border
+        }]
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-split-pane-handle-bar',
         style: barStyle,
         onMousedown: dragEvent
-      }), showAction ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+      }), itemList.length === 2 ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-split-pane-action-btn-wrapper'
+      }, [showPrevButton && nextItem.isExpand ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-split-pane-action-btn',
-        onDblclick: handleActionDblclickEvent,
-        onClick: handleActionClickEvent
+        onDblclick: handlePrevActionDblclickEvent,
+        onClick: handlePrevActionClickEvent
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-        class: (isExpand ? actionOpts.openIcon : actionOpts.closeIcon) || getDefaultActionIcon(item)
-      })]) : renderEmptyElement($xeSplit)]);
+        class: getActionIcon(prevItem, nextItem, false)
+      })]) : renderEmptyElement($xeSplit), showNextButton && prevItem.isExpand ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-split-pane-action-btn',
+        onDblclick: handleNextActionDblclickEvent,
+        onClick: handleNextActionClickEvent
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+        class: getActionIcon(prevItem, nextItem, true)
+      })]) : renderEmptyElement($xeSplit)]) : renderEmptyElement($xeSplit)]);
     };
     const renderItems = () => {
       const {
@@ -34357,9 +34429,8 @@ const Select = VxeSelect;
       const {
         autoItems
       } = computeAutoItems.value;
-      const isFoldNext = computeIsFoldNext.value;
       const itemVNs = [];
-      itemList.forEach((item, index) => {
+      itemList.forEach((prevItem, index) => {
         const {
           id,
           name,
@@ -34370,33 +34441,35 @@ const Select = VxeSelect;
           renderWidth,
           resizeWidth,
           foldWidth,
-          isVisible,
           isExpand
-        } = item;
+        } = prevItem;
+        const nextItem = itemList[index + 1];
         const defaultSlot = slots ? slots.default : null;
         const stys = {};
-        let itemWidth = isVisible ? foldWidth || resizeWidth || renderWidth : 0;
-        let itemHeight = isVisible ? foldHeight || resizeHeight || renderHeight : 0;
+        let itemWidth = isExpand ? foldWidth || resizeWidth || renderWidth : 0;
+        let itemHeight = isExpand ? foldHeight || resizeHeight || renderHeight : 0;
         // 至少存在一个自适应
         if (autoItems.length === 1) {
           if (vertical) {
-            if (!item.height) {
+            if (!prevItem.height) {
               itemHeight = 0;
             }
           } else {
-            if (!item.width) {
+            if (!prevItem.width) {
               itemWidth = 0;
             }
           }
         }
-        // 当只剩下一个可视区自动占用 100%
+        let isFill = true;
         if (vertical) {
-          if (itemHeight) {
-            stys.height = visibleItems.length === 1 ? '100%' : toCssUnit(itemHeight);
+          if (itemHeight && visibleItems.length > 1) {
+            isFill = false;
+            stys.height = toCssUnit(itemHeight);
           }
         } else {
-          if (itemWidth) {
-            stys.width = visibleItems.length === 1 ? '100%' : toCssUnit(itemWidth);
+          if (itemWidth && visibleItems.length > 1) {
+            isFill = false;
+            stys.width = toCssUnit(itemWidth);
           }
         }
         itemVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
@@ -34407,22 +34480,23 @@ const Select = VxeSelect;
             'is--border': border,
             'is--height': itemHeight,
             'is--width': itemWidth,
-            'is--fill': isVisible && !itemHeight && !itemWidth,
-            'is--handle': index > 0,
-            'is--expand': isExpand,
-            'is--hidden': !isVisible
+            'is--visible': isExpand,
+            'is--hidden': !isExpand,
+            'is--fill': isExpand && isFill
           }],
           style: stys
-        }, [index && !isFoldNext ? renderHandleBar(item) : renderEmptyElement($xeSplit), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
           itemid: id,
           class: 'vxe-split-pane--wrapper'
         }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
           class: 'vxe-split-pane--inner'
         }, defaultSlot ? callSlot(defaultSlot, {
           name,
-          isVisible,
           isExpand
-        }) : [])]), isFoldNext && index < itemList.length - 1 ? renderHandleBar(item) : renderEmptyElement($xeSplit)]));
+        }) : [])])]));
+        if (nextItem) {
+          itemVNs.push(renderHandleBar(prevItem, nextItem));
+        }
       });
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-split-wrapper'
@@ -34462,7 +34536,12 @@ const Select = VxeSelect;
         class: 'vxe-split--resizable-split-number-prev'
       }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-split--resizable-split-number-next'
-      })])] : [])]);
+      })])] : []), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-split--render-vars'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refBarInfoElem,
+        class: 'vxe-split--handle-bar-info'
+      })])]);
     };
     const itemFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.items ? props.items.length : -1, () => {
@@ -34475,10 +34554,23 @@ const Select = VxeSelect;
       loadItem(props.items || []);
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => reactData.staticItems, val => {
+      const actionOpts = computeActionOpts.value;
+      const {
+        showPrevButton,
+        showNextButton
+      } = actionOpts;
       if (props.items && props.items.length) {
         errLog('vxe.error.errConflicts', ['<vxe-split-pane ...>', 'items']);
       }
-      reactData.itemList = val;
+      reactData.itemList = val || [];
+      if ((showPrevButton || showNextButton) && reactData.itemList.length > 2) {
+        errLog('vxe.error.modelConflicts', ['action-config.showPrevButton | action-config.showNextButton', '<vxe-split-pane ...> Only supports 2 panel']);
+      }
+      reactData.itemList.forEach(item => {
+        if (item.showAction) {
+          warnLog('vxe.error.removeProp', ['showAction']);
+        }
+      });
       recalculate();
     });
     let resizeObserver;
@@ -34493,6 +34585,10 @@ const Select = VxeSelect;
         });
         resizeObserver.observe(el);
       }
+      const actionOpts = computeActionOpts.value;
+      if (actionOpts.direction) {
+        errLog('vxe.error.delProp', ['action-config.direction', 'action-config.showPrevButton | action-config.showNextButton']);
+      }
       globalEvents.on($xeSplit, 'resize', handleGlobalResizeEvent);
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onUnmounted)(() => {
@@ -34558,7 +34654,6 @@ function destroySplitItem($xeSplit, paneConfig) {
     name: [Number, String],
     width: [Number, String],
     height: [Number, String],
-    showAction: Boolean,
     minWidth: {
       type: [Number, String],
       default: () => null
@@ -34566,7 +34661,9 @@ function destroySplitItem($xeSplit, paneConfig) {
     minHeight: {
       type: [Number, String],
       default: () => null
-    }
+    },
+    // 已废弃
+    showAction: Boolean
   },
   emits: [],
   setup(props, context) {
@@ -34585,7 +34682,6 @@ function destroySplitItem($xeSplit, paneConfig) {
       minWidth: props.minWidth,
       minHeight: props.minHeight,
       showAction: props.showAction,
-      isVisible: true,
       isExpand: true,
       renderWidth: 0,
       resizeWidth: 0,
@@ -36370,6 +36466,9 @@ const scrollbarOffsetSize = 20;
         $tabs: $xeTabs
       }, params));
     };
+    const emitModel = value => {
+      emit('update:modelValue', value);
+    };
     const addInitName = (name, evnt) => {
       const {
         initNames
@@ -36409,7 +36508,7 @@ const scrollbarOffsetSize = 20;
         if (!validVal) {
           activeName = list[0].name;
           addInitName(activeName, null);
-          emit('update:modelValue', activeName);
+          emitModel(activeName);
         }
       }
       reactData.activeName = activeName;
@@ -36443,7 +36542,7 @@ const scrollbarOffsetSize = 20;
         })).then(status => {
           if (status) {
             reactData.activeName = name;
-            emit('update:modelValue', value);
+            emitModel(value);
             addInitName(name, evnt);
             dispatchEvent('change', {
               value,
@@ -36709,7 +36808,7 @@ const scrollbarOffsetSize = 20;
           const name = item.name;
           const value = name;
           reactData.activeName = name;
-          emit('update:modelValue', value);
+          emitModel(value);
           addInitName(name, null);
         }
       }
@@ -41670,6 +41769,9 @@ const saveLocalFile = options => {
         $upload: $xeUpload
       }, params));
     };
+    const emitModel = value => {
+      emit('update:modelValue', value);
+    };
     const handleChange = value => {
       const {
         singleMode,
@@ -41684,13 +41786,15 @@ const saveLocalFile = options => {
           if (url) {
             const urlObj = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().parseUrl(url);
             if (!urlObj.searchQuery[nameProp]) {
-              return `${url}${url.indexOf('?') === -1 ? '?' : '&'}${nameProp}=${encodeURIComponent(item[nameProp] || '')}`;
+              if (url.indexOf('blob:') === -1) {
+                return `${url}${url.indexOf('?') === -1 ? '?' : '&'}${nameProp}=${encodeURIComponent(item[nameProp] || '')}`;
+              }
             }
           }
           return url;
         });
       }
-      emit('update:modelValue', singleMode ? restList[0] || null : restList);
+      emitModel(singleMode ? restList[0] || null : restList);
     };
     const getThumbnailFileUrl = item => {
       const getThumbnailUrlFn = props.getThumbnailUrlMethod || getConfig().upload.getThumbnailUrlMethod;