vxe-pc-ui 4.5.2 → 4.5.4

package/es/split/src/split.js

@@ -1,5 +1,5 @@
-import { defineComponent, ref, h, reactive, provide, computed, watch, nextTick, onMounted, onActivated } from 'vue';
-import { getConfig, createEvent, renderEmptyElement } from '../../ui';
+import { defineComponent, ref, h, reactive, provide, computed, watch, nextTick, onMounted, onUnmounted, onActivated } from 'vue';
+import { getConfig, getIcon, createEvent, globalEvents, renderEmptyElement } from '../../ui';
 import { getSlotVNs } from '../../ui/src/vn';
 import { toCssUnit, isScale, addClass, removeClass } from '../../ui/src/dom';
 import { getGlobalDefaultConfig } from '../../ui/src/utils';
@@ -21,9 +21,17 @@ export default defineComponent({
             type: Boolean,
             default: () => getConfig().split.padding
         },
-        itemConfig: Object
+        itemConfig: Object,
+        barConfig: Object,
+        actionConfig: Object
     },
-    emits: [],
+    emits: [
+        'action-dblclick',
+        'action-click',
+        'resize-start',
+        'resize-drag',
+        'resize-end'
+    ],
     setup(props, context) {
         const { emit, slots } = context;
         const xID = XEUtils.uniqueId();
@@ -35,8 +43,33 @@ export default defineComponent({
         const computeItemOpts = computed(() => {
             return Object.assign({}, getConfig().split.itemConfig, props.itemConfig);
         });
+        const computeBarOpts = computed(() => {
+            return Object.assign({}, getConfig().split.barConfig, props.barConfig);
+        });
+        const computeActionOpts = computed(() => {
+            return Object.assign({}, getConfig().split.actionConfig, props.actionConfig);
+        });
+        const computeIsFoldNext = computed(() => {
+            const actionOpts = computeActionOpts.value;
+            return actionOpts.direction === 'next';
+        });
+        const computeBarStyle = computed(() => {
+            const barOpts = computeBarOpts.value;
+            const { width, height } = barOpts;
+            const stys = {};
+            if (height) {
+                stys.height = toCssUnit(height);
+            }
+            if (width) {
+                stys.width = toCssUnit(width);
+            }
+            return stys;
+        });
         const computeMaps = {
-            computeItemOpts
+            computeItemOpts,
+            computeBarOpts,
+            computeActionOpts,
+            computeIsFoldNext
         };
         const refMaps = {
             refElem
@@ -64,6 +97,50 @@ export default defineComponent({
             }
             return [];
         };
+        const getDefaultActionIcon = (item) => {
+            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;
+                    }
+                }
+                else {
+                    if (vertical) {
+                        iconName = isExpand ? topIcon : bottomIcon;
+                    }
+                    else {
+                        iconName = isExpand ? leftIcon : rightIcon;
+                    }
+                }
+                if (iconName) {
+                    return getIcon()[iconName];
+                }
+            }
+            return '';
+        };
+        const reset = () => {
+            const { staticItems } = reactData;
+            staticItems.forEach(item => {
+                item.isExpand = true;
+                item.isVisible = true;
+                item.foldHeight = 0;
+                item.foldWidth = 0;
+                item.resizeHeight = 0;
+                item.resizeWidth = 0;
+            });
+            return nextTick();
+        };
         const recalculate = () => {
             return nextTick().then(() => {
                 const { vertical } = props;
@@ -139,132 +216,222 @@ export default defineComponent({
             evnt.preventDefault();
             const { vertical } = props;
             const { staticItems } = reactData;
-            const handleEl = evnt.currentTarget;
+            const barEl = evnt.currentTarget;
+            const handleEl = barEl.parentElement;
             const el = refElem.value;
             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 = computeIsFoldNext.value;
             const itemOpts = computeItemOpts.value;
             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;
+                                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;
+                                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;
+                                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;
+                                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');
+                dispatchEvent('resize-end', { item, name: item.name, resizeHeight: item.resizeHeight, resizeWidth: item.resizeWidth }, evnt);
+                recalculate();
             };
+            dispatchEvent('resize-start', { item, name: item.name }, evnt);
+        };
+        const handleItemActionEvent = (evnt) => {
+            const el = refElem.value;
+            if (!el) {
+                return;
+            }
+            const { vertical } = props;
+            const { staticItems } = reactData;
+            const isFoldNext = computeIsFoldNext.value;
+            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;
+                        }
+                    }
+                    dispatchEvent(evnt.type === 'dblclick' ? 'action-dblclick' : 'action-click', { item, name: item.name, targetItem, targetName: targetItem ? targetItem.name : '', expanded: item.isExpand }, evnt);
+                    recalculate();
+                }
+            }
+        };
+        const handleGlobalResizeEvent = () => {
+            recalculate();
         };
         const splitMethods = {
             dispatchEvent,
-            recalculate
+            recalculate,
+            reset
         };
         const splitPrivateMethods = {};
         Object.assign($xeSplit, splitMethods, splitPrivateMethods);
+        const renderHandleBar = (item) => {
+            const barStyle = computeBarStyle.value;
+            const actionOpts = computeActionOpts.value;
+            const isFoldNext = computeIsFoldNext.value;
+            const { id, isExpand, showAction } = item;
+            const btnOns = {};
+            if (actionOpts.trigger === 'dblclick') {
+                btnOns.onDblclick = handleItemActionEvent;
+            }
+            else {
+                btnOns.onClick = handleItemActionEvent;
+            }
+            return h('div', {
+                itemid: id,
+                class: ['vxe-split-item-handle', isFoldNext ? 'to--next' : 'to--prev']
+            }, [
+                h('div', {
+                    class: 'vxe-split-item-handle-bar',
+                    style: barStyle,
+                    onMousedown: dragEvent
+                }),
+                showAction
+                    ? h('span', Object.assign({ class: 'vxe-split-item-action-btn' }, btnOns), [
+                        h('i', {
+                            class: (isExpand ? actionOpts.openIcon : actionOpts.closeIcon) || getDefaultActionIcon(item)
+                        })
+                    ])
+                    : renderEmptyElement($xeSplit)
+            ]);
+        };
         const renderItems = () => {
             const { border, padding, vertical } = props;
             const { staticItems } = reactData;
+            const isFoldNext = computeIsFoldNext.value;
             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', {
-                    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', {
-                            xid: id,
-                            class: 'vxe-split-item-handle',
-                            onMousedown: dragEvent
-                        })
-                        : renderEmptyElement($xeSplit),
+                    index && !isFoldNext ? renderHandleBar(item) : renderEmptyElement($xeSplit),
                     h('div', {
-                        xid: id,
+                        itemid: id,
                         class: 'vxe-split-item--wrapper'
                     }, [
                         h('div', {
                             class: 'vxe-split-item--inner'
                         }, defaultSlot ? callSlot(defaultSlot, {}) : [])
-                    ])
+                    ]),
+                    isFoldNext && index < staticItems.length - 1 ? renderHandleBar(item) : renderEmptyElement($xeSplit)
                 ]));
             });
             return h('div', {
@@ -296,7 +463,13 @@ export default defineComponent({
             recalculate();
         });
         onMounted(() => {
-            recalculate();
+            nextTick(() => {
+                recalculate();
+            });
+            globalEvents.on($xeSplit, 'resize', handleGlobalResizeEvent);
+        });
+        onUnmounted(() => {
+            globalEvents.off($xeSplit, 'resize');
         });
         onActivated(() => {
             recalculate();

package/es/split/style.css

@@ -32,18 +32,12 @@
 }
 
 .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;
           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;
@@ -51,20 +45,37 @@
   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;
+  overflow: hidden;
+}
+.vxe-split-item.is--hidden {
+  width: 0;
 }
 .vxe-split-item.is--padding > .vxe-split-item--wrapper {
   padding: var(--vxe-ui-layout-padding-default);
@@ -78,12 +89,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;
@@ -91,9 +134,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;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;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;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;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:hidden}.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}