vxe-pc-ui 3.5.2 → 3.5.3

package/es/split/src/split.js

@@ -1,6 +1,6 @@
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { getConfig, createEvent, globalMixins, renderEmptyElement } from '../../ui';
+import { getConfig, getIcon, createEvent, globalEvents, globalMixins, renderEmptyElement } from '../../ui';
 import { getSlotVNs } from '../../ui/src/vn';
 import { toCssUnit, isScale, addClass, removeClass } from '../../ui/src/dom';
 import { getGlobalDefaultConfig } from '../../ui/src/utils';
@@ -24,7 +24,9 @@ export default {
             type: Boolean,
             default: () => getConfig().split.padding
         },
-        itemConfig: Object
+        itemConfig: Object,
+        barConfig: Object,
+        actionConfig: Object
     },
     data() {
         const xID = XEUtils.uniqueId();
@@ -48,6 +50,34 @@ export default {
             const $xeSplit = this;
             const props = $xeSplit;
             return Object.assign({}, getConfig().split.itemConfig, props.itemConfig);
+        },
+        computeBarOpts() {
+            const $xeSplit = this;
+            const props = $xeSplit;
+            return Object.assign({}, getConfig().split.barConfig, props.barConfig);
+        },
+        computeActionOpts() {
+            const $xeSplit = this;
+            const props = $xeSplit;
+            return Object.assign({}, getConfig().split.actionConfig, props.actionConfig);
+        },
+        computeIsFoldNext() {
+            const $xeSplit = this;
+            const actionOpts = $xeSplit.computeActionOpts;
+            return actionOpts.direction === 'next';
+        },
+        computeBarStyle() {
+            const $xeSplit = this;
+            const barOpts = $xeSplit.computeBarOpts;
+            const { width, height } = barOpts;
+            const stys = {};
+            if (height) {
+                stys.height = toCssUnit(height);
+            }
+            if (width) {
+                stys.width = toCssUnit(width);
+            }
+            return stys;
         } }),
     methods: {
         //
@@ -151,140 +181,269 @@ export default {
             evnt.preventDefault();
             const { vertical } = props;
             const { staticItems } = reactData;
-            const handleEl = evnt.currentTarget;
+            const barEl = evnt.currentTarget;
+            const handleEl = barEl.parentElement;
             const el = $xeSplit.$refs.refElem;
             if (!el) {
                 return;
             }
-            const itemId = handleEl.getAttribute('xid');
+            const itemId = handleEl.getAttribute('itemid');
             const itemIndex = XEUtils.findIndexOf(staticItems, item => item.id === itemId);
             const item = staticItems[itemIndex];
             if (!item) {
                 return;
             }
+            if (!item.isExpand) {
+                return;
+            }
+            const isFoldNext = $xeSplit.computeIsFoldNext;
             const itemOpts = $xeSplit.computeItemOpts;
             const allMinWidth = XEUtils.toNumber(itemOpts.minWidth);
             const allMinHeight = XEUtils.toNumber(itemOpts.minHeight);
-            const prevItem = staticItems[itemIndex - 1];
-            const prevItemEl = prevItem ? el.querySelector(`.vxe-split-item[xid="${prevItem.id}"]`) : null;
-            const currItemEl = item ? el.querySelector(`.vxe-split-item[xid="${item.id}"]`) : null;
-            const prevWidth = prevItemEl ? prevItemEl.clientWidth : 0;
+            const targetItem = staticItems[itemIndex + (isFoldNext ? 1 : -1)];
+            const targetItemEl = targetItem ? el.querySelector(`.vxe-split-item[itemid="${targetItem.id}"]`) : null;
+            const currItemEl = item ? el.querySelector(`.vxe-split-item[itemid="${item.id}"]`) : null;
+            const targetWidth = targetItemEl ? targetItemEl.clientWidth : 0;
             const currWidth = currItemEl ? currItemEl.clientWidth : 0;
-            const prevHeight = prevItemEl ? prevItemEl.clientHeight : 0;
+            const targetHeight = targetItemEl ? targetItemEl.clientHeight : 0;
             const currHeight = currItemEl ? currItemEl.clientHeight : 0;
-            const prevMinWidth = XEUtils.toNumber(prevItem ? getGlobalDefaultConfig(prevItem.minWidth, allMinWidth) : allMinWidth);
+            const targetMinWidth = XEUtils.toNumber(targetItem ? getGlobalDefaultConfig(targetItem.minWidth, allMinWidth) : allMinWidth);
             const currMinWidth = XEUtils.toNumber(getGlobalDefaultConfig(item.minWidth, allMinWidth));
-            const prevMinHeight = XEUtils.toNumber(prevItem ? getGlobalDefaultConfig(prevItem.minHeight, allMinHeight) : allMinHeight);
+            const targetMinHeight = XEUtils.toNumber(targetItem ? getGlobalDefaultConfig(targetItem.minHeight, allMinHeight) : allMinHeight);
             const currMinHeight = XEUtils.toNumber(getGlobalDefaultConfig(item.minHeight, allMinHeight));
             const disX = evnt.clientX;
             const disY = evnt.clientY;
             addClass(el, 'is--drag');
-            document.onmousemove = evnt => {
+            document.onmousemove = (evnt) => {
                 evnt.preventDefault();
                 if (vertical) {
-                    const offsetTop = evnt.clientY - disY;
+                    const offsetTop = isFoldNext ? (disY - evnt.clientY) : (evnt.clientY - disY);
                     if (offsetTop > 0) {
-                        if (prevItem) {
+                        if (targetItem) {
                             if (currHeight - offsetTop >= currMinHeight) {
-                                prevItem.renderHeight = prevHeight + offsetTop;
-                                item.renderHeight = currHeight - offsetTop;
+                                const reHeight = currHeight - offsetTop;
+                                targetItem.resizeHeight = targetHeight + offsetTop;
+                                item.resizeHeight = reHeight;
+                                $xeSplit.dispatchEvent('resize-drag', { item, name: item.name, offsetHeight: offsetTop, resizeHeight: reHeight, offsetWidth: 0, resizeWidth: 0 }, evnt);
                             }
                         }
                     }
                     else {
-                        if (prevItem) {
-                            if (prevHeight + offsetTop >= prevMinHeight) {
-                                prevItem.renderHeight = prevHeight + offsetTop;
-                                item.renderHeight = currHeight - offsetTop;
+                        if (targetItem) {
+                            if (targetHeight + offsetTop >= targetMinHeight) {
+                                const reHeight = currHeight - offsetTop;
+                                targetItem.resizeHeight = targetHeight + offsetTop;
+                                item.resizeHeight = reHeight;
+                                $xeSplit.dispatchEvent('resize-drag', { item, name: item.name, offsetHeight: offsetTop, resizeHeight: reHeight, offsetWidth: 0, resizeWidth: 0 }, evnt);
                             }
                         }
                     }
                 }
                 else {
-                    const offsetLeft = evnt.clientX - disX;
+                    const offsetLeft = isFoldNext ? (disX - evnt.clientX) : (evnt.clientX - disX);
                     if (offsetLeft > 0) {
-                        if (prevItem) {
+                        if (targetItem) {
                             if (currWidth - offsetLeft >= currMinWidth) {
-                                prevItem.renderWidth = prevWidth + offsetLeft;
-                                item.renderWidth = currWidth - offsetLeft;
+                                const reWidth = currWidth - offsetLeft;
+                                targetItem.resizeWidth = targetWidth + offsetLeft;
+                                item.resizeWidth = reWidth;
+                                $xeSplit.dispatchEvent('resize-drag', { item, name: item.name, offsetHeight: 0, resizeHeight: 0, offsetWidth: offsetLeft, resizeWidth: reWidth }, evnt);
                             }
                         }
                     }
                     else {
-                        if (prevItem) {
-                            if (prevWidth + offsetLeft >= prevMinWidth) {
-                                prevItem.renderWidth = prevWidth + offsetLeft;
-                                item.renderWidth = currWidth - offsetLeft;
+                        if (targetItem) {
+                            if (targetWidth + offsetLeft >= targetMinWidth) {
+                                const reWidth = currWidth - offsetLeft;
+                                targetItem.resizeWidth = targetWidth + offsetLeft;
+                                item.resizeWidth = reWidth;
+                                $xeSplit.dispatchEvent('resize-drag', { item, name: item.name, offsetHeight: 0, resizeHeight: 0, offsetWidth: offsetLeft, resizeWidth: reWidth }, evnt);
                             }
                         }
                     }
                 }
             };
-            document.onmouseup = () => {
+            document.onmouseup = (evnt) => {
                 document.onmousemove = null;
                 document.onmouseup = null;
                 removeClass(el, 'is--drag');
+                $xeSplit.dispatchEvent('resize-end', { item, name: item.name, resizeHeight: item.resizeHeight, resizeWidth: item.resizeWidth }, evnt);
             };
+            $xeSplit.dispatchEvent('resize-start', { item, name: item.name }, evnt);
+        },
+        handleItemActionEvent(evnt) {
+            const $xeSplit = this;
+            const props = $xeSplit;
+            const reactData = $xeSplit.reactData;
+            const el = $xeSplit.$refs.refElem;
+            if (!el) {
+                return;
+            }
+            const { vertical } = props;
+            const { staticItems } = reactData;
+            const isFoldNext = $xeSplit.computeIsFoldNext;
+            const btnEl = evnt.currentTarget;
+            const handleEl = btnEl.parentElement;
+            const itemId = handleEl.getAttribute('itemid');
+            const itemIndex = XEUtils.findIndexOf(staticItems, item => item.id === itemId);
+            const item = staticItems[itemIndex];
+            const targetItem = staticItems[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;
+                        }
+                    }
+                    $xeSplit.dispatchEvent(evnt.type === 'dblclick' ? 'action-dblclick' : 'action-click', { item, name: item.name, targetItem, targetName: targetItem ? targetItem.name : '', expanded: item.isExpand }, evnt);
+                }
+            }
+        },
+        handleGlobalResizeEvent() {
+            const $xeSplit = this;
+            $xeSplit.recalculate();
+        },
+        getDefaultActionIcon(item) {
+            const $xeSplit = this;
+            const props = $xeSplit;
+            const { vertical } = props;
+            const { showAction, isExpand } = item;
+            const isFoldNext = $xeSplit.computeIsFoldNext;
+            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;
+                    }
+                }
+                else {
+                    if (vertical) {
+                        iconName = isExpand ? topIcon : bottomIcon;
+                    }
+                    else {
+                        iconName = isExpand ? leftIcon : rightIcon;
+                    }
+                }
+                if (iconName) {
+                    return getIcon()[iconName];
+                }
+            }
+            return '';
         },
         //
         // Render
         //
+        renderHandleBar(h, item) {
+            const $xeSplit = this;
+            const barStyle = $xeSplit.computeBarStyle;
+            const actionOpts = $xeSplit.computeActionOpts;
+            const isFoldNext = $xeSplit.computeIsFoldNext;
+            const { id, isExpand, showAction } = item;
+            const btnOns = {};
+            if (actionOpts.trigger === 'dblclick') {
+                btnOns.dblclick = $xeSplit.handleItemActionEvent;
+            }
+            else {
+                btnOns.click = $xeSplit.handleItemActionEvent;
+            }
+            return h('div', {
+                attrs: {
+                    itemid: id
+                },
+                class: ['vxe-split-item-handle', isFoldNext ? 'to--next' : 'to--prev']
+            }, [
+                h('div', {
+                    class: 'vxe-split-item-handle-bar',
+                    style: barStyle,
+                    on: {
+                        mousedown: $xeSplit.dragEvent
+                    }
+                }),
+                showAction
+                    ? h('span', {
+                        class: 'vxe-split-item-action-btn',
+                        on: btnOns
+                    }, [
+                        h('i', {
+                            class: (isExpand ? actionOpts.openIcon : actionOpts.closeIcon) || $xeSplit.getDefaultActionIcon(item)
+                        })
+                    ])
+                    : renderEmptyElement($xeSplit)
+            ]);
+        },
         renderItems(h) {
             const $xeSplit = this;
             const props = $xeSplit;
             const reactData = $xeSplit.reactData;
             const { border, padding, vertical } = props;
             const { staticItems } = reactData;
+            const isFoldNext = $xeSplit.computeIsFoldNext;
             const itemVNs = [];
             staticItems.forEach((item, index) => {
-                const { id, slots, renderHeight, renderWidth } = item;
+                const { id, slots, renderHeight, resizeHeight, foldHeight, renderWidth, resizeWidth, foldWidth, isVisible, isExpand } = item;
                 const defaultSlot = slots ? slots.default : null;
                 const stys = {};
+                const itemWidth = isVisible ? (foldWidth || resizeWidth || renderWidth) : 0;
+                const itemHeight = isVisible ? (foldHeight || resizeHeight || renderHeight) : 0;
                 if (vertical) {
-                    if (renderHeight) {
-                        stys.height = toCssUnit(renderHeight);
+                    if (itemHeight) {
+                        stys.height = toCssUnit(itemHeight);
                     }
                 }
                 else {
-                    if (renderWidth) {
-                        stys.width = toCssUnit(renderWidth);
+                    if (itemWidth) {
+                        stys.width = toCssUnit(itemWidth);
                     }
                 }
                 itemVNs.push(h('div', {
                     attrs: {
-                        xid: id
+                        itemid: id
                     },
                     class: ['vxe-split-item', vertical ? 'is--vertical' : 'is--horizontal', {
                             'is--padding': padding,
                             'is--border': border,
-                            'is--height': renderHeight,
-                            'is--width': renderWidth,
-                            'is--fill': !renderHeight && !renderWidth,
-                            'is--handle': index > 0
+                            'is--height': itemHeight,
+                            'is--width': itemWidth,
+                            'is--fill': isVisible && !itemHeight && !itemWidth,
+                            'is--handle': index > 0,
+                            'is--expand': isExpand,
+                            'is--hidden': !isVisible
                         }],
                     style: stys
                 }, [
-                    index
-                        ? h('div', {
-                            attrs: {
-                                xid: id
-                            },
-                            class: 'vxe-split-item-handle',
-                            on: {
-                                mousedown: $xeSplit.dragEvent
-                            }
-                        })
-                        : renderEmptyElement($xeSplit),
+                    index && !isFoldNext ? $xeSplit.renderHandleBar(h, item) : renderEmptyElement($xeSplit),
                     h('div', {
                         attrs: {
-                            xid: id
+                            itemid: id
                         },
                         class: 'vxe-split-item--wrapper'
                     }, [
                         h('div', {
                             class: 'vxe-split-item--inner'
                         }, defaultSlot ? $xeSplit.callSlot(defaultSlot, {}) : [])
-                    ])
+                    ]),
+                    isFoldNext && index < staticItems.length - 1 ? $xeSplit.renderHandleBar(h, item) : renderEmptyElement($xeSplit)
                 ]));
             });
             return h('div', {
@@ -316,6 +475,20 @@ export default {
             ]);
         }
     },
+    created() {
+        const $xeSplit = this;
+        globalEvents.on($xeSplit, 'resize', $xeSplit.handleGlobalResizeEvent);
+    },
+    mounted() {
+        const $xeSplit = this;
+        $xeSplit.$nextTick(() => {
+            $xeSplit.recalculate();
+        });
+    },
+    beforeDestroy() {
+        const $xeSplit = this;
+        globalEvents.off($xeSplit, 'resize');
+    },
     render(h) {
         return this.renderVN(h);
     }

package/es/split/style.css

@@ -33,19 +33,13 @@
 }
 
 .vxe-split-item-handle {
+  position: relative;
   flex-shrink: 0;
-  background-color: var(--vxe-split-handle-bar-background-color);
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
-.vxe-split-item-handle:hover {
-  background-color: var(--vxe-ui-font-primary-lighten-color);
-}
-.vxe-split-item-handle:active {
-  background-color: var(--vxe-ui-font-primary-darken-color);
-}
 
 .vxe-split-item--wrapper {
   position: relative;
@@ -53,21 +47,38 @@
   overflow: hidden;
   flex-grow: 1;
 }
-.vxe-split-item--wrapper > .vxe-split {
-  height: 100%;
-}
 
 .vxe-split-item--inner {
   height: 100%;
   width: 100%;
   overflow: auto;
 }
+.vxe-split-item--inner > .vxe-split {
+  height: 100%;
+}
+
+.vxe-split-item-handle-bar {
+  background-color: var(--vxe-split-handle-bar-background-color);
+}
+
+.vxe-split-item-action-btn {
+  display: block;
+  position: absolute;
+  z-index: 2;
+  cursor: pointer;
+  background-color: var(--vxe-ui-layout-background-color);
+  border: 1px solid var(--vxe-ui-input-border-color);
+  transition: transform 0.1s ease-in-out;
+}
 
 .vxe-split-item {
   display: flex;
   position: relative;
   overflow: auto;
 }
+.vxe-split-item.is--hidden {
+  width: 0;
+}
 .vxe-split-item.is--padding > .vxe-split-item--wrapper {
   padding: var(--vxe-ui-layout-padding-default);
 }
@@ -80,12 +91,44 @@
 .vxe-split-item.is--border > .vxe-split-item--wrapper, .vxe-split-item.is--border > .vxe-split-item-handle {
   border: 1px solid var(--vxe-ui-base-popup-border-color);
 }
+.vxe-split-item.is--expand.is--horizontal > .vxe-split-item-handle .vxe-split-item-handle-bar {
+  cursor: w-resize;
+}
+.vxe-split-item.is--expand.is--vertical > .vxe-split-item-handle .vxe-split-item-handle-bar {
+  cursor: n-resize;
+}
+.vxe-split-item.is--expand > .vxe-split-item-handle > .vxe-split-item-handle-bar {
+  background-color: var(--vxe-split-handle-bar-background-color);
+}
+.vxe-split-item.is--expand > .vxe-split-item-handle > .vxe-split-item-handle-bar:hover {
+  background-color: var(--vxe-ui-font-primary-lighten-color);
+}
+.vxe-split-item.is--expand > .vxe-split-item-handle > .vxe-split-item-handle-bar:active {
+  background-color: var(--vxe-ui-font-primary-darken-color);
+}
 .vxe-split-item.is--horizontal {
   flex-direction: row;
 }
-.vxe-split-item.is--horizontal > .vxe-split-item-handle {
+.vxe-split-item.is--horizontal > .vxe-split-item-handle.to--prev .vxe-split-item-action-btn {
+  left: 0;
+}
+.vxe-split-item.is--horizontal > .vxe-split-item-handle.to--next .vxe-split-item-action-btn {
+  right: 0;
+}
+.vxe-split-item.is--horizontal > .vxe-split-item-handle .vxe-split-item-handle-bar {
   width: var(--vxe-split-handle-bar-width);
-  cursor: w-resize;
+  height: 100%;
+}
+.vxe-split-item.is--horizontal > .vxe-split-item-handle .vxe-split-item-action-btn {
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 1em 0;
+}
+.vxe-split-item.is--horizontal > .vxe-split-item-handle .vxe-split-item-action-btn:hover {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-split-item.is--horizontal > .vxe-split-item-handle .vxe-split-item-action-btn:active {
+  transform: translateY(-50%) scale(0.9);
 }
 .vxe-split-item.is--horizontal.is--border > .vxe-split-item-handle {
   border-width: 1px 0 1px 0;
@@ -93,9 +136,26 @@
 .vxe-split-item.is--vertical {
   flex-direction: column;
 }
-.vxe-split-item.is--vertical > .vxe-split-item-handle {
+.vxe-split-item.is--vertical > .vxe-split-item-handle.to--prev .vxe-split-item-action-btn {
+  top: 0;
+}
+.vxe-split-item.is--vertical > .vxe-split-item-handle.to--next .vxe-split-item-action-btn {
+  bottom: 0;
+}
+.vxe-split-item.is--vertical > .vxe-split-item-handle .vxe-split-item-handle-bar {
   height: var(--vxe-split-handle-bar-height);
-  cursor: n-resize;
+  width: 100%;
+}
+.vxe-split-item.is--vertical > .vxe-split-item-handle .vxe-split-item-action-btn {
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0 1em;
+}
+.vxe-split-item.is--vertical > .vxe-split-item-handle .vxe-split-item-action-btn:hover {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-split-item.is--vertical > .vxe-split-item-handle .vxe-split-item-action-btn:active {
+  transform: translateX(-50%) scale(0.9);
 }
 .vxe-split-item.is--vertical.is--border > .vxe-split-item-handle {
   border-width: 0 1px 0 1px;

package/es/split/style.min.css

@@ -1 +1 @@
-.vxe-split.is--vertical>.vxe-split-wrapper{flex-direction:column}.vxe-split.is--vertical>.vxe-split-wrapper>.vxe-split-item{width:100%}.vxe-split.is--drag{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-split.is--drag>.vxe-split-wrapper>.vxe-split-item>.vxe-split-item--wrapper::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:0 0}.vxe-split-wrapper{height:100%;display:flex;flex-direction:row;overflow:hidden}.vxe-split-slots{display:none}.vxe-split-item-handle{flex-shrink:0;background-color:var(--vxe-split-handle-bar-background-color);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-split-item-handle:hover{background-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-split-item-handle:active{background-color:var(--vxe-ui-font-primary-darken-color)}.vxe-split-item--wrapper{position:relative;word-break:break-word;overflow:hidden;flex-grow:1}.vxe-split-item--wrapper>.vxe-split{height:100%}.vxe-split-item--inner{height:100%;width:100%;overflow:auto}.vxe-split-item{display:flex;position:relative;overflow:auto}.vxe-split-item.is--padding>.vxe-split-item--wrapper{padding:var(--vxe-ui-layout-padding-default)}.vxe-split-item.is--fill{flex-grow:1}.vxe-split-item.is--height,.vxe-split-item.is--width{flex-shrink:0}.vxe-split-item.is--border>.vxe-split-item--wrapper,.vxe-split-item.is--border>.vxe-split-item-handle{border:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-split-item.is--horizontal{flex-direction:row}.vxe-split-item.is--horizontal>.vxe-split-item-handle{width:var(--vxe-split-handle-bar-width);cursor:w-resize}.vxe-split-item.is--horizontal.is--border>.vxe-split-item-handle{border-width:1px 0 1px 0}.vxe-split-item.is--vertical{flex-direction:column}.vxe-split-item.is--vertical>.vxe-split-item-handle{height:var(--vxe-split-handle-bar-height);cursor:n-resize}.vxe-split-item.is--vertical.is--border>.vxe-split-item-handle{border-width:0 1px 0 1px}
+.vxe-split.is--vertical>.vxe-split-wrapper{flex-direction:column}.vxe-split.is--vertical>.vxe-split-wrapper>.vxe-split-item{width:100%}.vxe-split.is--drag{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-split.is--drag>.vxe-split-wrapper>.vxe-split-item>.vxe-split-item--wrapper::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:0 0}.vxe-split-wrapper{height:100%;display:flex;flex-direction:row;overflow:hidden}.vxe-split-slots{display:none}.vxe-split-item-handle{position:relative;flex-shrink:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-split-item--wrapper{position:relative;word-break:break-word;overflow:hidden;flex-grow:1}.vxe-split-item--inner{height:100%;width:100%;overflow:auto}.vxe-split-item--inner>.vxe-split{height:100%}.vxe-split-item-handle-bar{background-color:var(--vxe-split-handle-bar-background-color)}.vxe-split-item-action-btn{display:block;position:absolute;z-index:2;cursor:pointer;background-color:var(--vxe-ui-layout-background-color);border:1px solid var(--vxe-ui-input-border-color);transition:transform .1s ease-in-out}.vxe-split-item{display:flex;position:relative;overflow:auto}.vxe-split-item.is--hidden{width:0}.vxe-split-item.is--padding>.vxe-split-item--wrapper{padding:var(--vxe-ui-layout-padding-default)}.vxe-split-item.is--fill{flex-grow:1}.vxe-split-item.is--height,.vxe-split-item.is--width{flex-shrink:0}.vxe-split-item.is--border>.vxe-split-item--wrapper,.vxe-split-item.is--border>.vxe-split-item-handle{border:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-split-item.is--expand.is--horizontal>.vxe-split-item-handle .vxe-split-item-handle-bar{cursor:w-resize}.vxe-split-item.is--expand.is--vertical>.vxe-split-item-handle .vxe-split-item-handle-bar{cursor:n-resize}.vxe-split-item.is--expand>.vxe-split-item-handle>.vxe-split-item-handle-bar{background-color:var(--vxe-split-handle-bar-background-color)}.vxe-split-item.is--expand>.vxe-split-item-handle>.vxe-split-item-handle-bar:hover{background-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-split-item.is--expand>.vxe-split-item-handle>.vxe-split-item-handle-bar:active{background-color:var(--vxe-ui-font-primary-darken-color)}.vxe-split-item.is--horizontal{flex-direction:row}.vxe-split-item.is--horizontal>.vxe-split-item-handle.to--prev .vxe-split-item-action-btn{left:0}.vxe-split-item.is--horizontal>.vxe-split-item-handle.to--next .vxe-split-item-action-btn{right:0}.vxe-split-item.is--horizontal>.vxe-split-item-handle .vxe-split-item-handle-bar{width:var(--vxe-split-handle-bar-width);height:100%}.vxe-split-item.is--horizontal>.vxe-split-item-handle .vxe-split-item-action-btn{top:50%;transform:translateY(-50%);padding:1em 0}.vxe-split-item.is--horizontal>.vxe-split-item-handle .vxe-split-item-action-btn:hover{color:var(--vxe-ui-font-primary-color)}.vxe-split-item.is--horizontal>.vxe-split-item-handle .vxe-split-item-action-btn:active{transform:translateY(-50%) scale(.9)}.vxe-split-item.is--horizontal.is--border>.vxe-split-item-handle{border-width:1px 0 1px 0}.vxe-split-item.is--vertical{flex-direction:column}.vxe-split-item.is--vertical>.vxe-split-item-handle.to--prev .vxe-split-item-action-btn{top:0}.vxe-split-item.is--vertical>.vxe-split-item-handle.to--next .vxe-split-item-action-btn{bottom:0}.vxe-split-item.is--vertical>.vxe-split-item-handle .vxe-split-item-handle-bar{height:var(--vxe-split-handle-bar-height);width:100%}.vxe-split-item.is--vertical>.vxe-split-item-handle .vxe-split-item-action-btn{left:50%;transform:translateX(-50%);padding:0 1em}.vxe-split-item.is--vertical>.vxe-split-item-handle .vxe-split-item-action-btn:hover{color:var(--vxe-ui-font-primary-color)}.vxe-split-item.is--vertical>.vxe-split-item-handle .vxe-split-item-action-btn:active{transform:translateX(-50%) scale(.9)}.vxe-split-item.is--vertical.is--border>.vxe-split-item-handle{border-width:0 1px 0 1px}