vxe-pc-ui 4.5.0 → 4.5.1

package/lib/split/src/split-item.js

@@ -32,7 +32,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const xID = _xeUtils.default.uniqueId();
     const $xeSplit = (0, _vue.inject)('$xeSplit', null);
     const refElem = (0, _vue.ref)();
-    const itemConfig = (0, _vue.reactive)({
+    const chunkConfig = (0, _vue.reactive)({
       id: xID,
       width: props.width,
       height: props.height,
@@ -73,26 +73,26 @@ var _default = exports.default = (0, _vue.defineComponent)({
       });
     };
     (0, _vue.watch)(() => props.width, val => {
-      itemConfig.width = val;
+      chunkConfig.width = val;
     });
     (0, _vue.watch)(() => props.height, val => {
-      itemConfig.height = val;
+      chunkConfig.height = val;
     });
     (0, _vue.watch)(() => props.minWidth, val => {
-      itemConfig.minWidth = val;
+      chunkConfig.minWidth = val;
     });
     (0, _vue.watch)(() => props.minHeight, val => {
-      itemConfig.minHeight = val;
+      chunkConfig.minHeight = val;
     });
     (0, _vue.onMounted)(() => {
       const elem = refElem.value;
       if ($xeSplit && elem) {
-        (0, _util.assembleSplitItem)($xeSplit, elem, itemConfig);
+        (0, _util.assembleSplitItem)($xeSplit, elem, chunkConfig);
       }
     });
     (0, _vue.onUnmounted)(() => {
       if ($xeSplit) {
-        (0, _util.destroySplitItem)($xeSplit, itemConfig);
+        (0, _util.destroySplitItem)($xeSplit, chunkConfig);
       }
     });
     (0, _vue.provide)('$xeSplitItem', $xeSplitItem);

package/lib/split/src/split.js

@@ -14,10 +14,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var _default = exports.default = (0, _vue.defineComponent)({
   name: 'VxeSplit',
   props: {
-    resize: {
-      type: Boolean,
-      default: null
-    },
+    width: [Number, String],
+    height: [Number, String],
     vertical: {
       type: Boolean,
       default: () => (0, _ui.getConfig)().split.vertical
@@ -26,14 +24,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       type: Boolean,
       default: () => (0, _ui.getConfig)().split.border
     },
-    minWidth: {
-      type: [Number, String],
-      default: () => (0, _ui.getConfig)().split.minWidth
-    },
-    minHeight: {
-      type: [Number, String],
-      default: () => (0, _ui.getConfig)().split.minHeight
-    }
+    itemConfig: Object
   },
   emits: [],
   setup(props, context) {
@@ -47,7 +38,12 @@ var _default = exports.default = (0, _vue.defineComponent)({
       staticItems: []
     });
     const internalData = {};
-    const computeMaps = {};
+    const computeItemOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, (0, _ui.getConfig)().split.itemConfig, props.itemConfig);
+    });
+    const computeMaps = {
+      computeItemOpts
+    };
     const refMaps = {
       refElem
     };
@@ -79,9 +75,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const recalculate = () => {
       return (0, _vue.nextTick)().then(() => {
         const {
-          vertical,
-          minWidth,
-          minHeight
+          vertical
         } = props;
         const {
           staticItems
@@ -95,6 +89,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
         if (!wrapperWidth || !wrapperHeight) {
           return;
         }
+        const itemOpts = computeItemOpts.value;
+        const allMinWidth = _xeUtils.default.toNumber(itemOpts.minWidth);
+        const allMinHeight = _xeUtils.default.toNumber(itemOpts.minHeight);
         const residueItems = [];
         if (vertical) {
           let countHeight = 0;
@@ -118,7 +115,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           if (residueItems.length) {
             const reMeanHeight = (wrapperHeight - countHeight) / residueItems.length;
             residueItems.forEach(item => {
-              item.renderHeight = Math.max((0, _utils.getGlobalDefaultConfig)(item.minHeight, minHeight), reMeanHeight);
+              item.renderHeight = Math.max(_xeUtils.default.toNumber((0, _utils.getGlobalDefaultConfig)(item.minHeight, allMinHeight)), reMeanHeight);
             });
           }
         } else {
@@ -143,7 +140,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           if (residueItems.length) {
             const reMeanWidth = (wrapperWidth - countWidth) / residueItems.length;
             residueItems.forEach(item => {
-              item.renderWidth = Math.max((0, _utils.getGlobalDefaultConfig)(item.minWidth, minWidth), reMeanWidth);
+              item.renderWidth = Math.max(_xeUtils.default.toNumber((0, _utils.getGlobalDefaultConfig)(item.minWidth, allMinWidth)), reMeanWidth);
             });
           }
         }
@@ -152,9 +149,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const dragEvent = evnt => {
       evnt.preventDefault();
       const {
-        vertical,
-        minWidth,
-        minHeight
+        vertical
       } = props;
       const {
         staticItems
@@ -170,6 +165,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
       if (!item) {
         return;
       }
+      const itemOpts = computeItemOpts.value;
+      const allMinWidth = _xeUtils.default.toNumber(itemOpts.minWidth);
+      const allMinHeight = _xeUtils.default.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;
@@ -177,10 +175,10 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const currWidth = currItemEl ? currItemEl.clientWidth : 0;
       const prevHeight = prevItemEl ? prevItemEl.clientHeight : 0;
       const currHeight = currItemEl ? currItemEl.clientHeight : 0;
-      const prevMinWidth = prevItem ? (0, _utils.getGlobalDefaultConfig)(prevItem.minWidth, minWidth) : minWidth;
-      const currMinWidth = (0, _utils.getGlobalDefaultConfig)(item.minWidth, minWidth);
-      const prevMinHeight = prevItem ? (0, _utils.getGlobalDefaultConfig)(prevItem.minHeight, minHeight) : minHeight;
-      const currMinHeight = (0, _utils.getGlobalDefaultConfig)(item.minHeight, minHeight);
+      const prevMinWidth = _xeUtils.default.toNumber(prevItem ? (0, _utils.getGlobalDefaultConfig)(prevItem.minWidth, allMinWidth) : allMinWidth);
+      const currMinWidth = _xeUtils.default.toNumber((0, _utils.getGlobalDefaultConfig)(item.minWidth, allMinWidth));
+      const prevMinHeight = _xeUtils.default.toNumber(prevItem ? (0, _utils.getGlobalDefaultConfig)(prevItem.minHeight, allMinHeight) : allMinHeight);
+      const currMinHeight = _xeUtils.default.toNumber((0, _utils.getGlobalDefaultConfig)(item.minHeight, allMinHeight));
       const disX = evnt.clientX;
       const disY = evnt.clientY;
       (0, _dom.addClass)(el, 'is--drag');
@@ -286,12 +284,22 @@ var _default = exports.default = (0, _vue.defineComponent)({
     };
     const renderVN = () => {
       const {
-        vertical
+        vertical,
+        width,
+        height
       } = props;
       const defaultSlot = slots.default;
+      const stys = {};
+      if (height) {
+        stys.height = (0, _dom.toCssUnit)(height);
+      }
+      if (width) {
+        stys.width = (0, _dom.toCssUnit)(width);
+      }
       return (0, _vue.h)('div', {
         ref: refElem,
-        class: ['vxe-split', vertical ? 'is--vertical' : 'is--horizontal']
+        class: ['vxe-split', vertical ? 'is--vertical' : 'is--horizontal'],
+        style: stys
       }, [(0, _vue.h)('div', {
         class: 'vxe-split-slots'
       }, defaultSlot ? defaultSlot({}) : []), renderItems()]);

package/lib/split/src/split.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_ui=require("../../ui"),_vn=require("../../ui/src/vn"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeSplit",props:{resize:{type:Boolean,default:null},vertical:{type:Boolean,default:()=>(0,_ui.getConfig)().split.vertical},border:{type:Boolean,default:()=>(0,_ui.getConfig)().split.border},minWidth:{type:[Number,String],default:()=>(0,_ui.getConfig)().split.minWidth},minHeight:{type:[Number,String],default:()=>(0,_ui.getConfig)().split.minHeight}},emits:[],setup(b,e){const{emit:l,slots:i}=e;var t=_xeUtils.default.uniqueId();const H=(0,_vue.ref)(),W=(0,_vue.reactive)({staticItems:[]});const r={},n={refElem:H},o={xID:t,props:b,context:e,reactData:W,internalData:{},getRefMaps:()=>n,getComputeMaps:()=>r};const d=(e,t)=>e&&(_xeUtils.default.isString(e)&&(e=i[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[],s=()=>(0,_vue.nextTick)().then(()=>{const{vertical:e,minWidth:t,minHeight:i}=b;var r=W["staticItems"],l=H.value;if(l){const n=l.clientWidth,s=l.clientHeight;if(n&&s){const u=[];if(e){let l=0;if(r.forEach(e=>{var t=e["height"];let i=0;t?(i=(0,_dom.isScale)(t)?s*_xeUtils.default.toNumber(t):_xeUtils.default.toNumber(t),e.renderHeight=i):u.push(e),l+=i}),u.length){const a=(s-l)/u.length;u.forEach(e=>{e.renderHeight=Math.max((0,_utils.getGlobalDefaultConfig)(e.minHeight,i),a)})}}else{let l=0;if(r.forEach(e=>{var t=e["width"];let i=0;t?(i=(0,_dom.isScale)(t)?n*_xeUtils.default.toNumber(t):_xeUtils.default.toNumber(t),e.renderWidth=i):u.push(e),l+=i}),u.length){const o=(n-l)/u.length;u.forEach(e=>{e.renderWidth=Math.max((0,_utils.getGlobalDefaultConfig)(e.minWidth,t),o)})}}}}}),c=e=>{e.preventDefault();const{vertical:i,minWidth:t,minHeight:l}=b;var r=W["staticItems"],n=e.currentTarget;const s=H.value;if(s){const u=n.getAttribute("xid");n=_xeUtils.default.findIndexOf(r,e=>e.id===u);const a=r[n];if(a){const o=r[n-1];r=o?s.querySelector(`.vxe-split-item[xid="${o.id}"]`):null,n=a?s.querySelector(`.vxe-split-item[xid="${a.id}"]`):null;const d=r?r.clientWidth:0,c=n?n.clientWidth:0,h=r?r.clientHeight:0,v=n?n.clientHeight:0,f=o?(0,_utils.getGlobalDefaultConfig)(o.minWidth,t):t,m=(0,_utils.getGlobalDefaultConfig)(a.minWidth,t),g=o?(0,_utils.getGlobalDefaultConfig)(o.minHeight,l):l,_=(0,_utils.getGlobalDefaultConfig)(a.minHeight,l),p=e.clientX,x=e.clientY;(0,_dom.addClass)(s,"is--drag"),document.onmousemove=e=>{var t;e.preventDefault(),i?0<(t=e.clientY-x)?o&&v-t>=_&&(o.renderHeight=h+t,a.renderHeight=v-t):o&&h+t>=g&&(o.renderHeight=h+t,a.renderHeight=v-t):0<(t=e.clientX-p)?o&&c-t>=m&&(o.renderWidth=d+t,a.renderWidth=c-t):o&&d+t>=f&&(o.renderWidth=d+t,a.renderWidth=c-t)},document.onmouseup=()=>{document.onmousemove=null,(document.onmouseup=null,_dom.removeClass)(s,"is--drag")}}}};t={dispatchEvent:(e,t,i)=>{l(e,(0,_ui.createEvent)(i,{$split:o},t))},recalculate:s};Object.assign(o,t,{});return(0,_vue.watch)(()=>W.staticItems,()=>{s()}),(0,_vue.onMounted)(()=>{s()}),(0,_vue.onActivated)(()=>{s()}),(0,_vue.provide)("$xeSplit",o),o.renderVN=()=>{var e=b["vertical"],t=i.default;return(0,_vue.h)("div",{ref:H,class:["vxe-split",e?"is--vertical":"is--horizontal"]},[(0,_vue.h)("div",{class:"vxe-split-slots"},t?t({}):[]),(()=>{const{border:s,vertical:u}=b;var e=W["staticItems"];const a=[];return e.forEach((e,t)=>{var{id:e,slots:i,renderHeight:l,renderWidth:r}=e,i=i?i.default:null,n={};u?l&&(n.height=(0,_dom.toCssUnit)(l)):r&&(n.width=(0,_dom.toCssUnit)(r)),a.push((0,_vue.h)("div",{xid:e,class:["vxe-split-item",u?"is--vertical":"is--horizontal",{"is--border":s,"is--height":l,"is--width":r,"is--fill":!l&&!r,"is--handle":0<t}],style:n},[t?(0,_vue.h)("div",{xid:e,class:"vxe-split-item-handle",onMousedown:c}):(0,_ui.renderEmptyElement)(o),(0,_vue.h)("div",{xid:e,class:"vxe-split-item--wrapper"},i?d(i,{}):[])]))}),(0,_vue.h)("div",{class:"vxe-split-wrapper"},a)})()])},o},render(){return this.renderVN()}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_ui=require("../../ui"),_vn=require("../../ui/src/vn"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeSplit",props:{width:[Number,String],height:[Number,String],vertical:{type:Boolean,default:()=>(0,_ui.getConfig)().split.vertical},border:{type:Boolean,default:()=>(0,_ui.getConfig)().split.border},itemConfig:Object},emits:[],setup(b,e){const{emit:l,slots:s}=e;var t=_xeUtils.default.uniqueId();const U=(0,_vue.ref)(),C=(0,_vue.reactive)({staticItems:[]});const N=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().split.itemConfig,b.itemConfig)),i={computeItemOpts:N},r={refElem:U},a={xID:t,props:b,context:e,reactData:C,internalData:{},getRefMaps:()=>r,getComputeMaps:()=>i};const d=(e,t)=>e&&(_xeUtils.default.isString(e)&&(e=s[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[],u=()=>(0,_vue.nextTick)().then(()=>{var e=b["vertical"],t=C["staticItems"],i=U.value;if(i){const r=i.clientWidth,s=i.clientHeight;if(r&&s){i=N.value;const u=_xeUtils.default.toNumber(i.minWidth),n=_xeUtils.default.toNumber(i.minHeight),o=[];if(e){let l=0;if(t.forEach(e=>{var t=e["height"];let i=0;t?(i=(0,_dom.isScale)(t)?s*_xeUtils.default.toNumber(t):_xeUtils.default.toNumber(t),e.renderHeight=i):o.push(e),l+=i}),o.length){const a=(s-l)/o.length;o.forEach(e=>{e.renderHeight=Math.max(_xeUtils.default.toNumber((0,_utils.getGlobalDefaultConfig)(e.minHeight,n)),a)})}}else{let l=0;if(t.forEach(e=>{var t=e["width"];let i=0;t?(i=(0,_dom.isScale)(t)?r*_xeUtils.default.toNumber(t):_xeUtils.default.toNumber(t),e.renderWidth=i):o.push(e),l+=i}),o.length){const d=(r-l)/o.length;o.forEach(e=>{e.renderWidth=Math.max(_xeUtils.default.toNumber((0,_utils.getGlobalDefaultConfig)(e.minWidth,u)),d)})}}}}}),c=e=>{e.preventDefault();const i=b["vertical"];var t=C["staticItems"],l=e.currentTarget;const r=U.value;if(r){const n=l.getAttribute("xid");l=_xeUtils.default.findIndexOf(t,e=>e.id===n);const o=t[l];if(o){var s=N.value,u=_xeUtils.default.toNumber(s.minWidth),s=_xeUtils.default.toNumber(s.minHeight);const a=t[l-1];t=a?r.querySelector(`.vxe-split-item[xid="${a.id}"]`):null,l=o?r.querySelector(`.vxe-split-item[xid="${o.id}"]`):null;const d=t?t.clientWidth:0,c=l?l.clientWidth:0,h=t?t.clientHeight:0,m=l?l.clientHeight:0,f=_xeUtils.default.toNumber(a?(0,_utils.getGlobalDefaultConfig)(a.minWidth,u):u),v=_xeUtils.default.toNumber((0,_utils.getGlobalDefaultConfig)(o.minWidth,u)),_=_xeUtils.default.toNumber(a?(0,_utils.getGlobalDefaultConfig)(a.minHeight,s):s),g=_xeUtils.default.toNumber((0,_utils.getGlobalDefaultConfig)(o.minHeight,s)),p=e.clientX,x=e.clientY;(0,_dom.addClass)(r,"is--drag"),document.onmousemove=e=>{var t;e.preventDefault(),i?0<(t=e.clientY-x)?a&&m-t>=g&&(a.renderHeight=h+t,o.renderHeight=m-t):a&&h+t>=_&&(a.renderHeight=h+t,o.renderHeight=m-t):0<(t=e.clientX-p)?a&&c-t>=v&&(a.renderWidth=d+t,o.renderWidth=c-t):a&&d+t>=f&&(a.renderWidth=d+t,o.renderWidth=c-t)},document.onmouseup=()=>{document.onmousemove=null,(document.onmouseup=null,_dom.removeClass)(r,"is--drag")}}}};t={dispatchEvent:(e,t,i)=>{l(e,(0,_ui.createEvent)(i,{$split:a},t))},recalculate:u};Object.assign(a,t,{});return(0,_vue.watch)(()=>C.staticItems,()=>{u()}),(0,_vue.onMounted)(()=>{u()}),(0,_vue.onActivated)(()=>{u()}),(0,_vue.provide)("$xeSplit",a),a.renderVN=()=>{var{vertical:e,width:t,height:i}=b,l=s.default,r={};return i&&(r.height=(0,_dom.toCssUnit)(i)),t&&(r.width=(0,_dom.toCssUnit)(t)),(0,_vue.h)("div",{ref:U,class:["vxe-split",e?"is--vertical":"is--horizontal"],style:r},[(0,_vue.h)("div",{class:"vxe-split-slots"},l?l({}):[]),(()=>{const{border:u,vertical:n}=b;var e=C["staticItems"];const o=[];return e.forEach((e,t)=>{var{id:e,slots:i,renderHeight:l,renderWidth:r}=e,i=i?i.default:null,s={};n?l&&(s.height=(0,_dom.toCssUnit)(l)):r&&(s.width=(0,_dom.toCssUnit)(r)),o.push((0,_vue.h)("div",{xid:e,class:["vxe-split-item",n?"is--vertical":"is--horizontal",{"is--border":u,"is--height":l,"is--width":r,"is--fill":!l&&!r,"is--handle":0<t}],style:s},[t?(0,_vue.h)("div",{xid:e,class:"vxe-split-item-handle",onMousedown:c}):(0,_ui.renderEmptyElement)(a),(0,_vue.h)("div",{xid:e,class:"vxe-split-item--wrapper"},i?d(i,{}):[])]))}),(0,_vue.h)("div",{class:"vxe-split-wrapper"},o)})()])},a},render(){return this.renderVN()}});

package/lib/split/src/util.js

@@ -7,17 +7,17 @@ exports.assembleSplitItem = assembleSplitItem;
 exports.destroySplitItem = destroySplitItem;
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function assembleSplitItem($xeSplit, elem, itemConfig) {
+function assembleSplitItem($xeSplit, elem, chunkConfig) {
   const staticItems = $xeSplit.reactData.staticItems;
   const parentElem = elem.parentNode;
   if (parentElem) {
-    staticItems.splice(_xeUtils.default.arrayIndexOf(parentElem.children, elem), 0, itemConfig);
+    staticItems.splice(_xeUtils.default.arrayIndexOf(parentElem.children, elem), 0, chunkConfig);
     $xeSplit.reactData.staticItems = staticItems.slice(0);
   }
 }
-function destroySplitItem($xeSplit, itemConfig) {
+function destroySplitItem($xeSplit, chunkConfig) {
   const staticItems = $xeSplit.reactData.staticItems;
-  const index = _xeUtils.default.findIndexOf(staticItems, item => item.id === itemConfig.id);
+  const index = _xeUtils.default.findIndexOf(staticItems, item => item.id === chunkConfig.id);
   if (index > -1) {
     staticItems.splice(index, 1);
   }

package/lib/split/style/style.css

@@ -51,6 +51,9 @@
   overflow: auto;
   flex-grow: 1;
 }
+.vxe-split-item--wrapper > .vxe-split {
+  height: 100%;
+}
 
 .vxe-split-item {
   display: flex;

package/lib/split/style/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:auto;flex-grow:1}.vxe-split-item{display:flex;position:relative;overflow:auto}.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{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:auto;flex-grow:1}.vxe-split-item--wrapper>.vxe-split{height:100%}.vxe-split-item{display:flex;position:relative;overflow:auto}.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}