vxe-pc-ui 3.16.15 → 3.16.17

package/es/splitter/src/splitter.js

@@ -117,10 +117,12 @@ export default {
                 autoItems
             };
         },
-        computeBarStyle() {
+        computeWrapperStyle() {
             const $xeSplitter = this;
+            const props = $xeSplitter;
+            const { width, height } = props;
             const barOpts = $xeSplitter.computeBarOpts;
-            const { width, height } = barOpts;
+            const { width: barWidth, height: barHeight } = barOpts;
             const stys = {};
             if (height) {
                 stys.height = toCssUnit(height);
@@ -128,6 +130,12 @@ export default {
             if (width) {
                 stys.width = toCssUnit(width);
             }
+            if (barHeight) {
+                stys['--vxe-ui-splitter-handle-bar-vertical-height'] = toCssUnit(barHeight);
+            }
+            if (barWidth) {
+                stys['--vxe-ui-splitter-handle-bar-horizontal-width'] = toCssUnit(barWidth);
+            }
             return stys;
         },
         computeSItemSize() {
@@ -773,7 +781,6 @@ export default {
             const reactData = $xeSplitter.reactData;
             const { border, resize, vertical } = props;
             const { itemList } = reactData;
-            const barStyle = $xeSplitter.computeBarStyle;
             const actionOpts = $xeSplitter.computeActionOpts;
             const { direction } = actionOpts;
             const showPrevButton = XEUtils.isBoolean(actionOpts.showPrevButton) ? actionOpts.showPrevButton : (itemList.some(item => item.showAction));
@@ -788,7 +795,6 @@ export default {
             }, [
                 h('div', {
                     class: 'vxe-splitter-panel-handle-bar',
-                    style: barStyle,
                     on: {
                         mousedown: $xeSplitter.dragEvent
                     }
@@ -799,7 +805,7 @@ export default {
                     }, [
                         showPrevButton && nextItem.isExpand
                             ? h('div', {
-                                class: 'vxe-splitter-panel-action-btn',
+                                class: ['vxe-splitter-panel-action-btn', prevItem.isExpand ? 'is--prev' : 'is--next'],
                                 on: {
                                     dblclick: $xeSplitter.handlePrevActionDblclickEvent,
                                     click: $xeSplitter.handlePrevActionClickEvent
@@ -812,7 +818,7 @@ export default {
                             : renderEmptyElement($xeSplitter),
                         showNextButton && prevItem.isExpand
                             ? h('div', {
-                                class: 'vxe-splitter-panel-action-btn',
+                                class: ['vxe-splitter-panel-action-btn', nextItem.isExpand ? 'is--next' : 'is--prev'],
                                 on: {
                                     dblclick: $xeSplitter.handleNextActionDblclickEvent,
                                     click: $xeSplitter.handleNextActionClickEvent
@@ -834,10 +840,13 @@ export default {
             const { border, padding, resize, vertical } = props;
             const { itemList } = reactData;
             const vSize = $xeSplitter.computeSize;
+            const actionOpts = $xeSplitter.computeActionOpts;
+            const { autoHideButton } = actionOpts;
             const resizeOpts = $xeSplitter.computeResizeOpts;
             const { immediate } = resizeOpts;
             const visibleItems = $xeSplitter.computeVisibleItems;
             const { autoItems } = $xeSplitter.computeAutoItems;
+            const isOnlyView = visibleItems.length <= 1;
             const itemVNs = [];
             itemList.forEach((prevItem, index) => {
                 const { id, name, slots, renderHeight, resizeHeight, foldHeight, renderWidth, resizeWidth, foldWidth, isExpand } = prevItem;
@@ -905,31 +914,28 @@ export default {
                 }
             });
             return h('div', {
-                class: 'vxe-splitter-wrapper'
+                class: ['vxe-splitter-wrapper', {
+                        'is--ah-btn': autoHideButton,
+                        'is--only-view': isOnlyView
+                    }]
             }, itemVNs);
         },
         renderVN(h) {
             const $xeSplitter = this;
             const props = $xeSplitter;
             const slots = $xeSplitter.$scopedSlots;
-            const { vertical, width, height } = props;
+            const { vertical } = props;
             const vSize = $xeSplitter.computeSize;
             const resizeOpts = $xeSplitter.computeResizeOpts;
+            const wrapperStyle = $xeSplitter.computeWrapperStyle;
             const { immediate, showTip } = resizeOpts;
             const defaultSlot = slots.default;
-            const stys = {};
-            if (height) {
-                stys.height = toCssUnit(height);
-            }
-            if (width) {
-                stys.width = toCssUnit(width);
-            }
             return h('div', {
                 ref: 'refElem',
                 class: ['vxe-splitter', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy', {
                         [`size--${vSize}`]: vSize
                     }],
-                style: stys
+                style: wrapperStyle
             }, [
                 h('div', {
                     class: 'vxe-splitter-slots'

package/es/splitter/style.css

@@ -109,6 +109,12 @@
   flex-direction: row;
   overflow: hidden;
 }
+.vxe-splitter-wrapper.is--ah-btn > .vxe-splitter-panel-handle .vxe-splitter-panel-action-btn {
+  opacity: 0;
+}
+.vxe-splitter-wrapper.is--ah-btn:hover > .vxe-splitter-panel-handle .vxe-splitter-panel-action-btn {
+  opacity: 1;
+}
 
 .vxe-splitter-slots {
   display: none;
@@ -149,7 +155,6 @@
 
 .vxe-splitter-panel-action-btn-wrapper {
   position: absolute;
-  display: flex;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -158,16 +163,16 @@
 }
 
 .vxe-splitter-panel-action-btn {
+  position: absolute;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   border-radius: var(--vxe-ui-base-border-radius);
-  color: var(--vxe-ui-layout-background-color);
   background-color: var(--vxe-ui-splitter-handle-button-background-color);
   cursor: pointer;
   pointer-events: all;
-  transition: transform 0.1s ease-in-out;
+  transition: all 0.15s ease-in-out;
 }
 .vxe-splitter-panel-action-btn:hover {
   color: #ffffff;
@@ -187,13 +192,8 @@
   border-width: 1px 0 1px 0;
 }
 .vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-action-btn-wrapper {
-  flex-direction: column;
-}
-.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-action-btn-wrapper div {
-  margin-top: 1em;
-}
-.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-action-btn-wrapper div:first-child {
-  margin-top: 0;
+  width: var(--vxe-ui-splitter-handle-bar-horizontal-width);
+  height: var(--vxe-ui-splitter-handle-bar-horizontal-action-btn-height);
 }
 .vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-handle-bar {
   width: var(--vxe-ui-splitter-handle-bar-horizontal-width);
@@ -203,6 +203,12 @@
   width: var(--vxe-ui-splitter-handle-bar-horizontal-action-btn-width);
   height: var(--vxe-ui-splitter-handle-bar-horizontal-action-btn-height);
 }
+.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-action-btn.is--prev {
+  left: calc(var(--vxe-ui-splitter-handle-bar-horizontal-action-btn-width) * -1 - 0.2em);
+}
+.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-action-btn.is--next {
+  right: calc(var(--vxe-ui-splitter-handle-bar-horizontal-action-btn-width) * -1 - 0.2em);
+}
 .vxe-splitter-panel-handle.is--vertical {
   flex-direction: column;
 }
@@ -210,21 +216,22 @@
   border-width: 0 1px 0 1px;
 }
 .vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-action-btn-wrapper {
-  flex-direction: row;
-}
-.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-action-btn-wrapper div {
-  margin-left: 1em;
-}
-.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-action-btn-wrapper div:first-child {
-  margin-left: 0;
+  height: var(--vxe-ui-splitter-handle-bar-vertical-height);
+  width: var(--vxe-ui-splitter-handle-bar-vertical-action-btn-width);
 }
 .vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-handle-bar {
   height: var(--vxe-ui-splitter-handle-bar-vertical-height);
   width: 100%;
 }
 .vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-action-btn {
-  width: var(--vxe-ui-splitter-handle-bar-vertical-action-btn-width);
   height: var(--vxe-ui-splitter-handle-bar-vertical-action-btn-height);
+  width: var(--vxe-ui-splitter-handle-bar-vertical-action-btn-width);
+}
+.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-action-btn.is--prev {
+  top: calc(var(--vxe-ui-splitter-handle-bar-vertical-action-btn-height) * -1 - 0.2em);
+}
+.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-action-btn.is--next {
+  bottom: calc(var(--vxe-ui-splitter-handle-bar-vertical-action-btn-height) * -1 - 0.2em);
 }
 .vxe-splitter-panel-handle.is--resize.is-resize--immediate.is--horizontal .vxe-splitter-panel-handle-bar {
   cursor: w-resize;
@@ -266,6 +273,10 @@
   border: 1px solid var(--vxe-ui-base-popup-border-color);
 }
 
+.vxe-splitter-wrapper.is--only-view > .vxe-splitter-panel-handle .vxe-splitter-panel-handle-bar {
+  width: 0;
+}
+
 .vxe-splitter--render-vars {
   width: 0;
   height: 0;

package/es/splitter/style.min.css

@@ -1 +1 @@
-.vxe-splitter{position:relative;width:100%}.vxe-splitter.is--vertical>.vxe-splitter-wrapper{flex-direction:column}.vxe-splitter.is--vertical>.vxe-splitter-wrapper>.vxe-splitter-panel{width:100%}.vxe-splitter.is--drag{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-splitter.is--drag.is-resize--immediate.is--horizontal{cursor:w-resize}.vxe-splitter.is--drag.is-resize--immediate.is--vertical{cursor:n-resize}.vxe-splitter.is--drag.is-resize--lazy.is--horizontal{cursor:col-resize}.vxe-splitter.is--drag.is-resize--lazy.is--vertical{cursor:row-resize}.vxe-splitter.is--drag>.vxe-splitter-wrapper>.vxe-splitter-panel>.vxe-splitter-panel--wrapper::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:0 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-splitter--resizable-splitter-tip{display:none;position:absolute;top:0;left:0;z-index:7;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:col-resize}.vxe-splitter--resizable-splitter-tip.is-resize--lazy:before{content:"";display:block;height:100%;background-color:var(--vxe-ui-splitter-resizable-drag-line-color)}.vxe-splitter--resizable-splitter-tip.is--horizontal{width:1px;height:100%}.vxe-splitter--resizable-splitter-tip.is--horizontal .vxe-splitter--resizable-splitter-number-prev{right:0}.vxe-splitter--resizable-splitter-tip.is--horizontal .vxe-splitter--resizable-splitter-number-next{left:1px}.vxe-splitter--resizable-splitter-tip.is--vertical{width:100%;height:1px}.vxe-splitter--resizable-splitter-tip.is--vertical .vxe-splitter--resizable-splitter-number-prev{bottom:0}.vxe-splitter--resizable-splitter-tip.is--vertical .vxe-splitter--resizable-splitter-number-next{top:1px}.vxe-splitter--resizable-splitter-tip-number{position:absolute;top:0;left:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.vxe-splitter--resizable-splitter-number-next,.vxe-splitter--resizable-splitter-number-prev{position:absolute;padding:.25em .25em;font-size:12px;border-radius:var(--vxe-ui-border-radius);white-space:nowrap;color:#fff;background-color:var(--vxe-ui-splitter-resizable-drag-line-color)}.vxe-splitter-wrapper{height:100%;display:flex;flex-direction:row;overflow:hidden}.vxe-splitter-slots{display:none}.vxe-splitter-panel-handle{display:flex;position:relative;flex-shrink:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-splitter-panel--wrapper{position:relative;word-break:break-word;overflow:hidden;flex-grow:1}.vxe-splitter-panel--inner{height:100%;width:100%;overflow:auto}.vxe-splitter-panel--inner>.vxe-splitter{height:100%}.vxe-splitter-panel-handle-bar{background-color:var(--vxe-ui-splitter-handle-bar-background-color)}.vxe-splitter-panel-handle-bar:hover{background-color:var(--vxe-ui-splitter-handle-bar-hover-background-color)}.vxe-splitter-panel-action-btn-wrapper{position:absolute;display:flex;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;pointer-events:none}.vxe-splitter-panel-action-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:var(--vxe-ui-base-border-radius);color:var(--vxe-ui-layout-background-color);background-color:var(--vxe-ui-splitter-handle-button-background-color);cursor:pointer;pointer-events:all;transition:transform .1s ease-in-out}.vxe-splitter-panel-action-btn:hover{color:#fff;background-color:var(--vxe-ui-font-primary-color)}.vxe-splitter-panel-action-btn:active{transform:scale(.9)}.vxe-splitter-panel-action-btn>i{font-size:.76em}.vxe-splitter-panel-handle.is--horizontal{flex-direction:row}.vxe-splitter-panel-handle.is--horizontal.is--border{border-width:1px 0 1px 0}.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-action-btn-wrapper{flex-direction:column}.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-action-btn-wrapper div{margin-top:1em}.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-action-btn-wrapper div:first-child{margin-top:0}.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-handle-bar{width:var(--vxe-ui-splitter-handle-bar-horizontal-width);height:100%}.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-action-btn{width:var(--vxe-ui-splitter-handle-bar-horizontal-action-btn-width);height:var(--vxe-ui-splitter-handle-bar-horizontal-action-btn-height)}.vxe-splitter-panel-handle.is--vertical{flex-direction:column}.vxe-splitter-panel-handle.is--vertical.is--border{border-width:0 1px 0 1px}.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-action-btn-wrapper{flex-direction:row}.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-action-btn-wrapper div{margin-left:1em}.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-action-btn-wrapper div:first-child{margin-left:0}.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-handle-bar{height:var(--vxe-ui-splitter-handle-bar-vertical-height);width:100%}.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-action-btn{width:var(--vxe-ui-splitter-handle-bar-vertical-action-btn-width);height:var(--vxe-ui-splitter-handle-bar-vertical-action-btn-height)}.vxe-splitter-panel-handle.is--resize.is-resize--immediate.is--horizontal .vxe-splitter-panel-handle-bar{cursor:w-resize}.vxe-splitter-panel-handle.is--resize.is-resize--immediate.is--vertical .vxe-splitter-panel-handle-bar{cursor:n-resize}.vxe-splitter-panel-handle.is--resize.is-resize--immediate>.vxe-splitter-panel-handle-bar:active{background-color:var(--vxe-ui-font-primary-color)}.vxe-splitter-panel-handle.is--resize.is-resize--lazy.is--horizontal .vxe-splitter-panel-handle-bar{cursor:col-resize}.vxe-splitter-panel-handle.is--resize.is-resize--lazy.is--vertical .vxe-splitter-panel-handle-bar{cursor:row-resize}.vxe-splitter-panel{display:flex;position:relative;overflow:hidden}.vxe-splitter-panel.is--fill{flex-grow:1}.vxe-splitter-panel.is--hidden.is--horizontal{width:0}.vxe-splitter-panel.is--hidden.is--vertical{height:0}.vxe-splitter-panel.is--padding>.vxe-splitter-panel--wrapper{padding:var(--vxe-ui-layout-padding-default)}.vxe-splitter-panel.is--height:not(.is--fill),.vxe-splitter-panel.is--hidden:not(.is--fill),.vxe-splitter-panel.is--width:not(.is--fill){flex-shrink:0}.vxe-splitter-panel.is--border>.vxe-splitter-panel--wrapper{border:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-splitter--render-vars{width:0;height:0;overflow:hidden}.vxe-splitter--render-vars .vxe-splitter--handle-bar-info{width:var(--vxe-ui-splitter-handle-bar-horizontal-width);height:var(--vxe-ui-splitter-handle-bar-vertical-height)}.vxe-modal--content>.vxe-splitter{height:100%}.vxe-splitter{font-size:var(--vxe-ui-font-size-default)}.vxe-splitter.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-splitter.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-splitter.size--mini{font-size:var(--vxe-ui-font-size-mini)}
+.vxe-splitter{position:relative;width:100%}.vxe-splitter.is--vertical>.vxe-splitter-wrapper{flex-direction:column}.vxe-splitter.is--vertical>.vxe-splitter-wrapper>.vxe-splitter-panel{width:100%}.vxe-splitter.is--drag{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-splitter.is--drag.is-resize--immediate.is--horizontal{cursor:w-resize}.vxe-splitter.is--drag.is-resize--immediate.is--vertical{cursor:n-resize}.vxe-splitter.is--drag.is-resize--lazy.is--horizontal{cursor:col-resize}.vxe-splitter.is--drag.is-resize--lazy.is--vertical{cursor:row-resize}.vxe-splitter.is--drag>.vxe-splitter-wrapper>.vxe-splitter-panel>.vxe-splitter-panel--wrapper::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:0 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-splitter--resizable-splitter-tip{display:none;position:absolute;top:0;left:0;z-index:7;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:col-resize}.vxe-splitter--resizable-splitter-tip.is-resize--lazy:before{content:"";display:block;height:100%;background-color:var(--vxe-ui-splitter-resizable-drag-line-color)}.vxe-splitter--resizable-splitter-tip.is--horizontal{width:1px;height:100%}.vxe-splitter--resizable-splitter-tip.is--horizontal .vxe-splitter--resizable-splitter-number-prev{right:0}.vxe-splitter--resizable-splitter-tip.is--horizontal .vxe-splitter--resizable-splitter-number-next{left:1px}.vxe-splitter--resizable-splitter-tip.is--vertical{width:100%;height:1px}.vxe-splitter--resizable-splitter-tip.is--vertical .vxe-splitter--resizable-splitter-number-prev{bottom:0}.vxe-splitter--resizable-splitter-tip.is--vertical .vxe-splitter--resizable-splitter-number-next{top:1px}.vxe-splitter--resizable-splitter-tip-number{position:absolute;top:0;left:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.vxe-splitter--resizable-splitter-number-next,.vxe-splitter--resizable-splitter-number-prev{position:absolute;padding:.25em .25em;font-size:12px;border-radius:var(--vxe-ui-border-radius);white-space:nowrap;color:#fff;background-color:var(--vxe-ui-splitter-resizable-drag-line-color)}.vxe-splitter-wrapper{height:100%;display:flex;flex-direction:row;overflow:hidden}.vxe-splitter-wrapper.is--ah-btn>.vxe-splitter-panel-handle .vxe-splitter-panel-action-btn{opacity:0}.vxe-splitter-wrapper.is--ah-btn:hover>.vxe-splitter-panel-handle .vxe-splitter-panel-action-btn{opacity:1}.vxe-splitter-slots{display:none}.vxe-splitter-panel-handle{display:flex;position:relative;flex-shrink:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-splitter-panel--wrapper{position:relative;word-break:break-word;overflow:hidden;flex-grow:1}.vxe-splitter-panel--inner{height:100%;width:100%;overflow:auto}.vxe-splitter-panel--inner>.vxe-splitter{height:100%}.vxe-splitter-panel-handle-bar{background-color:var(--vxe-ui-splitter-handle-bar-background-color)}.vxe-splitter-panel-handle-bar:hover{background-color:var(--vxe-ui-splitter-handle-bar-hover-background-color)}.vxe-splitter-panel-action-btn-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;pointer-events:none}.vxe-splitter-panel-action-btn{position:absolute;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-splitter-handle-button-background-color);cursor:pointer;pointer-events:all;transition:all .15s ease-in-out}.vxe-splitter-panel-action-btn:hover{color:#fff;background-color:var(--vxe-ui-font-primary-color)}.vxe-splitter-panel-action-btn:active{transform:scale(.9)}.vxe-splitter-panel-action-btn>i{font-size:.76em}.vxe-splitter-panel-handle.is--horizontal{flex-direction:row}.vxe-splitter-panel-handle.is--horizontal.is--border{border-width:1px 0 1px 0}.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-action-btn-wrapper{width:var(--vxe-ui-splitter-handle-bar-horizontal-width);height:var(--vxe-ui-splitter-handle-bar-horizontal-action-btn-height)}.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-handle-bar{width:var(--vxe-ui-splitter-handle-bar-horizontal-width);height:100%}.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-action-btn{width:var(--vxe-ui-splitter-handle-bar-horizontal-action-btn-width);height:var(--vxe-ui-splitter-handle-bar-horizontal-action-btn-height)}.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-action-btn.is--prev{left:calc(var(--vxe-ui-splitter-handle-bar-horizontal-action-btn-width) * -1 - .2em)}.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-action-btn.is--next{right:calc(var(--vxe-ui-splitter-handle-bar-horizontal-action-btn-width) * -1 - .2em)}.vxe-splitter-panel-handle.is--vertical{flex-direction:column}.vxe-splitter-panel-handle.is--vertical.is--border{border-width:0 1px 0 1px}.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-action-btn-wrapper{height:var(--vxe-ui-splitter-handle-bar-vertical-height);width:var(--vxe-ui-splitter-handle-bar-vertical-action-btn-width)}.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-handle-bar{height:var(--vxe-ui-splitter-handle-bar-vertical-height);width:100%}.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-action-btn{height:var(--vxe-ui-splitter-handle-bar-vertical-action-btn-height);width:var(--vxe-ui-splitter-handle-bar-vertical-action-btn-width)}.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-action-btn.is--prev{top:calc(var(--vxe-ui-splitter-handle-bar-vertical-action-btn-height) * -1 - .2em)}.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-action-btn.is--next{bottom:calc(var(--vxe-ui-splitter-handle-bar-vertical-action-btn-height) * -1 - .2em)}.vxe-splitter-panel-handle.is--resize.is-resize--immediate.is--horizontal .vxe-splitter-panel-handle-bar{cursor:w-resize}.vxe-splitter-panel-handle.is--resize.is-resize--immediate.is--vertical .vxe-splitter-panel-handle-bar{cursor:n-resize}.vxe-splitter-panel-handle.is--resize.is-resize--immediate>.vxe-splitter-panel-handle-bar:active{background-color:var(--vxe-ui-font-primary-color)}.vxe-splitter-panel-handle.is--resize.is-resize--lazy.is--horizontal .vxe-splitter-panel-handle-bar{cursor:col-resize}.vxe-splitter-panel-handle.is--resize.is-resize--lazy.is--vertical .vxe-splitter-panel-handle-bar{cursor:row-resize}.vxe-splitter-panel{display:flex;position:relative;overflow:hidden}.vxe-splitter-panel.is--fill{flex-grow:1}.vxe-splitter-panel.is--hidden.is--horizontal{width:0}.vxe-splitter-panel.is--hidden.is--vertical{height:0}.vxe-splitter-panel.is--padding>.vxe-splitter-panel--wrapper{padding:var(--vxe-ui-layout-padding-default)}.vxe-splitter-panel.is--height:not(.is--fill),.vxe-splitter-panel.is--hidden:not(.is--fill),.vxe-splitter-panel.is--width:not(.is--fill){flex-shrink:0}.vxe-splitter-panel.is--border>.vxe-splitter-panel--wrapper{border:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-splitter-wrapper.is--only-view>.vxe-splitter-panel-handle .vxe-splitter-panel-handle-bar{width:0}.vxe-splitter--render-vars{width:0;height:0;overflow:hidden}.vxe-splitter--render-vars .vxe-splitter--handle-bar-info{width:var(--vxe-ui-splitter-handle-bar-horizontal-width);height:var(--vxe-ui-splitter-handle-bar-vertical-height)}.vxe-modal--content>.vxe-splitter{height:100%}.vxe-splitter{font-size:var(--vxe-ui-font-size-default)}.vxe-splitter.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-splitter.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-splitter.size--mini{font-size:var(--vxe-ui-font-size-mini)}