vxe-pc-ui 4.9.1 → 4.9.3

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.1"}`;
+const log_version = `ui v${"4.9.3"}`;
 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.1";
+const ui_version = "4.9.3";
 index_esm_VxeUI.uiVersion = ui_version;
 index_esm_VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -33710,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,
@@ -33731,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 {
@@ -33750,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);
         }
@@ -33763,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);
         }
@@ -33798,8 +33797,7 @@ const Select = VxeSelect;
     const computeMaps = {
       computeItemOpts,
       computeBarOpts,
-      computeActionOpts,
-      computeIsFoldNext
+      computeActionOpts
     };
     const refMaps = {
       refElem
@@ -33829,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 = () => {
@@ -33869,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;
@@ -33881,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,
@@ -33892,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)) {
@@ -33908,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 => {
@@ -33925,6 +33925,7 @@ const Select = VxeSelect;
           itemList
         } = reactData;
         const el = refElem.value;
+        const barInfoElem = refBarInfoElem.value;
         if (!el) {
           return;
         }
@@ -33933,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);
@@ -33946,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);
               }
@@ -33957,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);
             });
@@ -33971,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);
               }
@@ -33982,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 => {
@@ -34010,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 {
@@ -34031,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;
@@ -34175,8 +34176,6 @@ const Select = VxeSelect;
           handleReStyle(evnt);
         }
         dispatchEvent('resize-drag', {
-          item,
-          name: item.name,
           prevItem,
           nextItem,
           offsetHeight: targetOffsetHeight,
@@ -34196,8 +34195,6 @@ const Select = VxeSelect;
         handleUpdate();
         removeClass(el, 'is--drag');
         dispatchEvent('resize-end', {
-          item,
-          name: item.name,
           prevItem,
           nextItem,
           offsetHeight: targetOffsetHeight,
@@ -34212,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 handleActionDblclickEvent = evnt => {
+    const handlePrevActionClickEvent = 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') {
+        if (prevItem && nextItem && nextItem.isExpand) {
+          handleItemActionEvent(evnt, prevItem, nextItem, false);
+        }
+      }
+      dispatchEvent('action-click', {
+        prevItem,
+        nextItem
+      }, evnt);
+    };
+    const handleNextActionDblclickEvent = 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') {
-        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 = () => {
@@ -34318,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: handlePrevActionDblclickEvent,
+        onClick: handlePrevActionClickEvent
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+        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: handleActionDblclickEvent,
-        onClick: handleActionClickEvent
+        onDblclick: handleNextActionDblclickEvent,
+        onClick: handleNextActionClickEvent
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-        class: (isExpand ? actionOpts.openIcon : actionOpts.closeIcon) || getDefaultActionIcon(item)
-      })]) : renderEmptyElement($xeSplit)]);
+        class: getActionIcon(prevItem, nextItem, true)
+      })]) : renderEmptyElement($xeSplit)]) : renderEmptyElement($xeSplit)]);
     };
     const renderItems = () => {
       const {
@@ -34360,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,
@@ -34373,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', {
@@ -34410,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'
@@ -34465,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, () => {
@@ -34478,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;
@@ -34496,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)(() => {
@@ -34561,7 +34654,6 @@ function destroySplitItem($xeSplit, paneConfig) {
     name: [Number, String],
     width: [Number, String],
     height: [Number, String],
-    showAction: Boolean,
     minWidth: {
       type: [Number, String],
       default: () => null
@@ -34569,7 +34661,9 @@ function destroySplitItem($xeSplit, paneConfig) {
     minHeight: {
       type: [Number, String],
       default: () => null
-    }
+    },
+    // 已废弃
+    showAction: Boolean
   },
   emits: [],
   setup(props, context) {
@@ -34588,7 +34682,6 @@ function destroySplitItem($xeSplit, paneConfig) {
       minWidth: props.minWidth,
       minHeight: props.minHeight,
       showAction: props.showAction,
-      isVisible: true,
       isExpand: true,
       renderWidth: 0,
       resizeWidth: 0,