vxe-pc-ui 3.16.0 → 3.16.1

package/lib/splitter/src/splitter.js

@@ -0,0 +1,1036 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _comp = require("../../ui/src/comp");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../ui");
+var _vn = require("../../ui/src/vn");
+var _dom = require("../../ui/src/dom");
+var _utils = require("../../ui/src/utils");
+var _log = require("../../ui/src/log");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var _createComponentLog = (0, _log.createComponentLog)('splitter'),
+  warnLog = _createComponentLog.warnLog,
+  errLog = _createComponentLog.errLog;
+var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
+  name: 'VxeSplitter',
+  mixins: [_ui.globalMixins.sizeMixin],
+  props: {
+    width: [Number, String],
+    height: [Number, String],
+    vertical: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().splitter.vertical;
+      }
+    },
+    border: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().splitter.border;
+      }
+    },
+    padding: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().splitter.padding;
+      }
+    },
+    resize: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().splitter.resize;
+      }
+    },
+    items: Array,
+    itemConfig: Object,
+    barConfig: Object,
+    resizeConfig: Object,
+    actionConfig: Object,
+    size: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().splitter.size || (0, _ui.getConfig)().size;
+      }
+    }
+  },
+  data: function data() {
+    var xID = _xeUtils.default.uniqueId();
+    var reactData = {
+      staticItems: [],
+      itemList: [],
+      barWidth: 0,
+      barHeight: 0,
+      resizeFlag: 0
+    };
+    var internalData = {
+      wrapperWidth: 0,
+      wrapperHeight: 0
+    };
+    return {
+      xID: xID,
+      reactData: reactData,
+      internalData: internalData,
+      reFlag: 0
+    };
+  },
+  provide: function provide() {
+    var $xeSplitter = this;
+    return {
+      $xeSplitter: $xeSplitter
+    };
+  },
+  computed: Object.assign(Object.assign({}, {}), {
+    computeItemOpts: function computeItemOpts() {
+      var $xeSplitter = this;
+      var props = $xeSplitter;
+      return Object.assign({}, (0, _ui.getConfig)().splitter.itemConfig, props.itemConfig);
+    },
+    computeBarOpts: function computeBarOpts() {
+      var $xeSplitter = this;
+      var props = $xeSplitter;
+      return Object.assign({}, (0, _ui.getConfig)().splitter.barConfig, props.barConfig);
+    },
+    computeResizeOpts: function computeResizeOpts() {
+      var $xeSplitter = this;
+      var props = $xeSplitter;
+      return Object.assign({}, (0, _ui.getConfig)().splitter.resizeConfig, props.resizeConfig);
+    },
+    computeActionOpts: function computeActionOpts() {
+      var $xeSplitter = this;
+      var props = $xeSplitter;
+      return Object.assign({}, (0, _ui.getConfig)().splitter.actionConfig, props.actionConfig);
+    },
+    computeIsFoldNext: function computeIsFoldNext() {
+      var $xeSplitter = this;
+      var actionOpts = $xeSplitter.computeActionOpts;
+      return actionOpts.direction === 'next';
+    },
+    computeVisibleItems: function computeVisibleItems() {
+      var $xeSplitter = this;
+      var reactData = $xeSplitter.reactData;
+      return reactData.itemList.filter(function (item) {
+        return item.isExpand;
+      });
+    },
+    computeAutoItems: function computeAutoItems() {
+      var $xeSplitter = this;
+      var props = $xeSplitter;
+      var reactData = $xeSplitter.reactData;
+      var vertical = props.vertical;
+      var autoItems = [];
+      reactData.itemList.forEach(vertical ? function (item) {
+        if (!item.height) {
+          autoItems.push(item);
+        }
+      } : function (item) {
+        if (!item.width) {
+          autoItems.push(item);
+        }
+      });
+      return {
+        autoItems: autoItems
+      };
+    },
+    computeBarStyle: function computeBarStyle() {
+      var $xeSplitter = this;
+      var barOpts = $xeSplitter.computeBarOpts;
+      var width = barOpts.width,
+        height = barOpts.height;
+      var stys = {};
+      if (height) {
+        stys.height = (0, _dom.toCssUnit)(height);
+      }
+      if (width) {
+        stys.width = (0, _dom.toCssUnit)(width);
+      }
+      return stys;
+    },
+    computeSItemSize: function computeSItemSize() {
+      var $xeSplitter = this;
+      var reactData = $xeSplitter.reactData;
+      return reactData.staticItems.length;
+    }
+  }),
+  watch: {
+    items: function items(val) {
+      var $xeSplitter = this;
+      $xeSplitter.loadItem(val || []);
+    },
+    computeSItemSize: function computeSItemSize() {
+      var $xeSplitter = this;
+      var props = $xeSplitter;
+      var reactData = $xeSplitter.reactData;
+      var actionOpts = $xeSplitter.computeActionOpts;
+      var showPrevButton = actionOpts.showPrevButton,
+        showNextButton = actionOpts.showNextButton;
+      if (props.items && props.items.length) {
+        errLog('vxe.error.errConflicts', ['<vxe-splitter-panel ...>', 'items']);
+      }
+      reactData.itemList = reactData.staticItems || [];
+      if ((showPrevButton || showNextButton) && reactData.itemList.length > 2) {
+        errLog('vxe.error.modelConflicts', ['action-config.showPrevButton | action-config.showNextButton', '<vxe-splitter-panel ...> Only supports 2 panel']);
+      }
+      reactData.itemList.forEach(function (item) {
+        if (item.showAction) {
+          warnLog('vxe.error.removeProp', ['show-action']);
+        }
+      });
+      $xeSplitter.recalculate();
+    }
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeSplitter = this;
+      $xeSplitter.$emit(type, (0, _ui.createEvent)(evnt, {
+        $splitter: $xeSplitter
+      }, params));
+    },
+    callSlot: function callSlot(slotFunc, params) {
+      var $xeSplitter = this;
+      var slots = $xeSplitter.$scopedSlots;
+      if (slotFunc) {
+        if (_xeUtils.default.isString(slotFunc)) {
+          slotFunc = slots[slotFunc] || null;
+        }
+        if (_xeUtils.default.isFunction(slotFunc)) {
+          return (0, _vn.getSlotVNs)(slotFunc(params));
+        }
+      }
+      return [];
+    },
+    reset: function reset() {
+      var $xeSplitter = this;
+      var reactData = $xeSplitter.reactData;
+      var itemList = reactData.itemList;
+      itemList.forEach(function (item) {
+        item.isExpand = true;
+        item.foldHeight = 0;
+        item.foldWidth = 0;
+        item.resizeHeight = 0;
+        item.resizeWidth = 0;
+      });
+      return $xeSplitter.$nextTick();
+    },
+    handleLoadItem: function handleLoadItem(list, isReset) {
+      var $xeSplitter = this;
+      var slots = $xeSplitter.$scopedSlots;
+      var reactData = $xeSplitter.reactData;
+      var staticItems = reactData.staticItems;
+      var itemDef = {
+        isExpand: true,
+        renderWidth: 0,
+        resizeWidth: 0,
+        foldWidth: 0,
+        renderHeight: 0,
+        resizeHeight: 0,
+        foldHeight: 0
+      };
+      reactData.itemList = list.map(function (item) {
+        if (item.slots) {
+          _xeUtils.default.each(item.slots, function (func) {
+            if (!_xeUtils.default.isFunction(func)) {
+              if (!slots[func]) {
+                errLog('vxe.error.notSlot', [func]);
+              }
+            }
+          });
+        }
+        return Object.assign({}, isReset ? null : itemDef, item, isReset ? itemDef : null, {
+          id: _xeUtils.default.uniqueId()
+        });
+      });
+      if (staticItems.length) {
+        errLog('vxe.error.errConflicts', ['<vxe-splitter-panel ...>', 'items']);
+      }
+      return $xeSplitter.recalculate();
+    },
+    loadItem: function loadItem(list) {
+      var $xeSplitter = this;
+      return $xeSplitter.handleLoadItem(list || [], false);
+    },
+    reloadItem: function reloadItem(list) {
+      var $xeSplitter = this;
+      return $xeSplitter.handleLoadItem(list || [], true);
+    },
+    handleItemByName: function handleItemByName(name) {
+      var $xeSplitter = this;
+      var reactData = $xeSplitter.reactData;
+      var itemList = reactData.itemList;
+      var index = -1;
+      var currItem = null;
+      var prevItem = null;
+      var nextItem = null;
+      for (var i = 0; i < itemList.length; i++) {
+        var item = itemList[i];
+        if (item.name === name) {
+          index = i;
+          currItem = item;
+          prevItem = itemList[i - 1] || null;
+          nextItem = itemList[i + 1] || null;
+          break;
+        }
+      }
+      return {
+        index: index,
+        currItem: currItem,
+        prevItem: prevItem,
+        nextItem: nextItem
+      };
+    },
+    setItemExpand: function setItemExpand(name, expanded) {
+      var $xeSplitter = this;
+      var restItem = $xeSplitter.handleItemByName(name);
+      if (restItem) {
+        var currItem = restItem.currItem,
+          prevItem = restItem.prevItem,
+          nextItem = restItem.nextItem;
+        if (currItem) {
+          if (expanded ? !currItem.isExpand : currItem.isExpand) {
+            if (nextItem) {
+              if (nextItem.isExpand) {
+                $xeSplitter.handleItemActionEvent(null, currItem, nextItem, false);
+              }
+            } else if (prevItem) {
+              if (prevItem.isExpand) {
+                $xeSplitter.handleItemActionEvent(null, prevItem, currItem, true);
+              }
+            }
+          }
+        }
+      }
+      return $xeSplitter.$nextTick();
+    },
+    toggleItemExpand: function toggleItemExpand(name) {
+      var $xeSplitter = this;
+      var restItem = $xeSplitter.handleItemByName(name);
+      if (restItem) {
+        var currItem = restItem.currItem;
+        if (currItem) {
+          return $xeSplitter.setItemExpand(name, !currItem.isExpand);
+        }
+      }
+      return $xeSplitter.$nextTick();
+    },
+    getItemVisible: function getItemVisible(name) {
+      var $xeSplitter = this;
+      var restItem = $xeSplitter.handleItemByName(name);
+      if (restItem) {
+        var currItem = restItem.currItem;
+        if (currItem) {
+          return $xeSplitter.setItemExpand(name, !currItem.isExpand);
+        }
+      }
+      return false;
+    },
+    recalculate: function recalculate() {
+      var $xeSplitter = this;
+      var props = $xeSplitter;
+      var reactData = $xeSplitter.reactData;
+      var internalData = $xeSplitter.internalData;
+      return $xeSplitter.$nextTick().then(function () {
+        var vertical = props.vertical;
+        var itemList = reactData.itemList;
+        var el = $xeSplitter.$refs.refElem;
+        var barInfoElem = $xeSplitter.$refs.refBarInfoElem;
+        if (!el) {
+          return;
+        }
+        var wWidth = el.clientWidth;
+        var wHeight = el.clientHeight;
+        if (!wWidth || !wHeight) {
+          return;
+        }
+        if (barInfoElem) {
+          reactData.barWidth = barInfoElem.offsetWidth;
+          reactData.barHeight = barInfoElem.offsetHeight;
+        }
+        var contentWidth = wWidth - (vertical ? 0 : reactData.barWidth * (itemList.length - 1));
+        var contentHeight = wHeight - (vertical ? reactData.barHeight * (itemList.length - 1) : 0);
+        var itemOpts = $xeSplitter.computeItemOpts;
+        var allMinWidth = _xeUtils.default.toNumber(itemOpts.minWidth);
+        var allMinHeight = _xeUtils.default.toNumber(itemOpts.minHeight);
+        var residueItems = [];
+        if (vertical) {
+          var countHeight = 0;
+          itemList.forEach(function (item) {
+            var height = item.height;
+            var itemHeight = 0;
+            if (height) {
+              if ((0, _dom.isScale)(height)) {
+                itemHeight = contentHeight * _xeUtils.default.toNumber(height) / 100;
+              } else {
+                itemHeight = _xeUtils.default.toNumber(height);
+              }
+              item.renderHeight = itemHeight;
+            } else {
+              residueItems.push(item);
+            }
+            countHeight += itemHeight;
+          });
+          if (residueItems.length) {
+            var reMeanHeight = (contentHeight - countHeight) / residueItems.length;
+            residueItems.forEach(function (item) {
+              item.renderHeight = Math.max(_xeUtils.default.toNumber((0, _utils.getGlobalDefaultConfig)(item.minHeight, allMinHeight)), reMeanHeight);
+            });
+          }
+        } else {
+          var countWidth = 0;
+          itemList.forEach(function (item) {
+            var width = item.width;
+            var itemWidth = 0;
+            if (width) {
+              if ((0, _dom.isScale)(width)) {
+                itemWidth = contentWidth * _xeUtils.default.toNumber(width) / 100;
+              } else {
+                itemWidth = _xeUtils.default.toNumber(width);
+              }
+              item.renderWidth = itemWidth;
+            } else {
+              residueItems.push(item);
+            }
+            countWidth += itemWidth;
+          });
+          if (residueItems.length) {
+            var reMeanWidth = (contentWidth - countWidth) / residueItems.length;
+            residueItems.forEach(function (item) {
+              item.renderWidth = Math.max(_xeUtils.default.toNumber((0, _utils.getGlobalDefaultConfig)(item.minWidth, allMinWidth)), reMeanWidth);
+            });
+          }
+        }
+        internalData.wrapperWidth = contentWidth;
+        internalData.wrapperHeight = contentHeight;
+      });
+    },
+    dragEvent: function dragEvent(evnt) {
+      var $xeSplitter = this;
+      var props = $xeSplitter;
+      var reactData = $xeSplitter.reactData;
+      var resize = props.resize,
+        vertical = props.vertical;
+      var itemList = reactData.itemList;
+      if (!resize) {
+        return;
+      }
+      evnt.preventDefault();
+      var barEl = evnt.currentTarget;
+      var handleEl = barEl.parentElement;
+      var el = $xeSplitter.$refs.refElem;
+      if (!el) {
+        return;
+      }
+      var prevEl = handleEl.previousElementSibling;
+      var nextEl = handleEl.nextElementSibling;
+      if (!prevEl || !nextEl) {
+        return;
+      }
+      var prevId = prevEl.getAttribute('itemid');
+      var nextId = nextEl.getAttribute('itemid');
+      var prevItem = itemList.find(function (item) {
+        return item.id === prevId;
+      });
+      var nextItem = itemList.find(function (item) {
+        return item.id === nextId;
+      });
+      if (!prevItem || !nextItem) {
+        return;
+      }
+      var containerRect = el.getBoundingClientRect();
+      var barRect = barEl.getBoundingClientRect();
+      var rsSplitterLineEl = $xeSplitter.$refs.refResizableSplitterTip;
+      var rsSplitterTipEl = rsSplitterLineEl ? rsSplitterLineEl.children[0] : null;
+      var itemOpts = $xeSplitter.computeItemOpts;
+      var resizeOpts = $xeSplitter.computeResizeOpts;
+      var immediate = resizeOpts.immediate;
+      var allMinWidth = _xeUtils.default.toNumber(itemOpts.minWidth);
+      var allMinHeight = _xeUtils.default.toNumber(itemOpts.minHeight);
+      var barOffsetX = Math.ceil(barRect.width - (evnt.clientX - barRect.left));
+      var barOffsetY = Math.ceil(evnt.clientY - barRect.top);
+      var prevWidth = prevEl.offsetWidth;
+      var nextWidth = nextEl.offsetWidth;
+      var prevMinWidth = _xeUtils.default.toNumber(prevItem ? (0, _utils.getGlobalDefaultConfig)(prevItem.minWidth, allMinWidth) : allMinWidth);
+      var nextMinWidth = _xeUtils.default.toNumber(nextItem ? (0, _utils.getGlobalDefaultConfig)(nextItem.minWidth, allMinWidth) : allMinWidth);
+      var minOffsetLeft = prevEl.offsetLeft + prevMinWidth - barOffsetX;
+      var maxOffsetLeft = nextEl.offsetLeft + nextEl.offsetWidth - nextMinWidth - barOffsetX;
+      var startOffsetLeft = evnt.clientX - containerRect.left;
+      var targetOffsetWidth = -1;
+      var prevResizeWidth = 0;
+      var nextResizeWidth = 0;
+      var offsetLeft = startOffsetLeft;
+      var prevHeight = prevEl.offsetHeight;
+      var nextHeight = nextEl.offsetHeight;
+      var prevMinHeight = _xeUtils.default.toNumber(prevItem ? (0, _utils.getGlobalDefaultConfig)(prevItem.minHeight, allMinHeight) : allMinHeight);
+      var nextMinHeight = _xeUtils.default.toNumber(nextItem ? (0, _utils.getGlobalDefaultConfig)(nextItem.minHeight, allMinHeight) : allMinHeight);
+      var minOffsetTop = prevEl.offsetTop + prevMinHeight + barOffsetY;
+      var maxOffsetTop = nextEl.offsetTop + nextEl.offsetHeight - nextMinHeight + barOffsetY;
+      var startOffsetTop = evnt.clientY - containerRect.top;
+      var targetOffsetHeight = -1;
+      var prevResizeHeight = 0;
+      var nextResizeHeight = 0;
+      var offsetTop = startOffsetTop;
+      var handleReStyle = function handleReStyle(evnt) {
+        if (!rsSplitterLineEl) {
+          return;
+        }
+        var rsNumPrevEl = rsSplitterTipEl ? rsSplitterTipEl.children[0] : null;
+        var rsNumNextEl = rsSplitterTipEl ? rsSplitterTipEl.children[1] : null;
+        if (vertical) {
+          var tipWidth = 0;
+          if (rsNumPrevEl) {
+            if (targetOffsetHeight < 0) {
+              rsNumPrevEl.style.display = 'none';
+            } else {
+              rsNumPrevEl.textContent = "".concat(Math.floor(prevResizeHeight), "px");
+              rsNumPrevEl.style.display = 'block';
+              tipWidth = rsNumPrevEl.offsetWidth;
+            }
+          }
+          if (rsNumNextEl) {
+            if (targetOffsetHeight < 0) {
+              rsNumNextEl.textContent = "".concat(Math.floor(nextResizeHeight), "px");
+              rsNumNextEl.style.display = 'block';
+              tipWidth = rsNumNextEl.offsetWidth;
+            } else {
+              rsNumNextEl.style.display = 'none';
+            }
+          }
+          var rsLeft = Math.max(1, evnt.clientX - containerRect.left - tipWidth / 2);
+          if (rsLeft > containerRect.width - tipWidth - 1) {
+            rsLeft = containerRect.width - tipWidth - 1;
+          }
+          rsSplitterLineEl.style.left = '0';
+          rsSplitterLineEl.style.top = "".concat(offsetTop, "px");
+          if (rsSplitterTipEl) {
+            rsSplitterTipEl.style.left = "".concat(rsLeft, "px");
+          }
+        } else {
+          var tipHeight = 0;
+          if (rsNumPrevEl) {
+            if (targetOffsetWidth < 0) {
+              rsNumPrevEl.style.display = 'none';
+            } else {
+              rsNumPrevEl.textContent = "".concat(Math.floor(prevResizeWidth), "px");
+              rsNumPrevEl.style.display = 'block';
+              tipHeight = rsNumPrevEl.offsetHeight;
+            }
+          }
+          if (rsNumNextEl) {
+            if (targetOffsetWidth < 0) {
+              rsNumNextEl.textContent = "".concat(Math.floor(nextResizeWidth), "px");
+              rsNumNextEl.style.display = 'block';
+              tipHeight = rsNumNextEl.offsetHeight;
+            } else {
+              rsNumNextEl.style.display = 'none';
+            }
+          }
+          var rsTop = Math.max(1, evnt.clientY - containerRect.top - tipHeight / 2);
+          if (rsTop > containerRect.height - tipHeight - 1) {
+            rsTop = containerRect.height - tipHeight - 1;
+          }
+          rsSplitterLineEl.style.top = '0';
+          rsSplitterLineEl.style.left = "".concat(offsetLeft, "px");
+          if (rsSplitterTipEl) {
+            rsSplitterTipEl.style.top = "".concat(rsTop, "px");
+          }
+        }
+      };
+      var handleUpdate = function handleUpdate() {
+        if (vertical) {
+          prevItem.resizeHeight = prevResizeHeight;
+          nextItem.resizeHeight = nextResizeHeight;
+        } else {
+          prevItem.resizeWidth = prevResizeWidth;
+          nextItem.resizeWidth = nextResizeWidth;
+        }
+      };
+      var handleDrag = function handleDrag(evnt) {
+        if (vertical) {
+          offsetTop = evnt.clientY - containerRect.top;
+          if (offsetTop < minOffsetTop) {
+            offsetTop = minOffsetTop;
+          }
+          if (offsetTop > maxOffsetTop) {
+            offsetTop = maxOffsetTop;
+          }
+          targetOffsetHeight = offsetTop - startOffsetTop;
+          prevResizeHeight = prevHeight + targetOffsetHeight;
+          nextResizeHeight = nextHeight - targetOffsetHeight;
+        } else {
+          offsetLeft = evnt.clientX - containerRect.left;
+          if (offsetLeft < minOffsetLeft) {
+            offsetLeft = minOffsetLeft;
+          }
+          if (offsetLeft > maxOffsetLeft) {
+            offsetLeft = maxOffsetLeft;
+          }
+          targetOffsetWidth = offsetLeft - startOffsetLeft;
+          prevResizeWidth = prevWidth + targetOffsetWidth;
+          nextResizeWidth = nextWidth - targetOffsetWidth;
+        }
+        if (immediate) {
+          if (vertical) {
+            prevEl.style.height = (0, _dom.toCssUnit)(prevResizeHeight);
+            nextEl.style.height = (0, _dom.toCssUnit)(nextResizeHeight);
+          } else {
+            prevEl.style.width = (0, _dom.toCssUnit)(prevResizeWidth);
+            nextEl.style.width = (0, _dom.toCssUnit)(nextResizeWidth);
+          }
+        }
+        if (rsSplitterLineEl) {
+          handleReStyle(evnt);
+        }
+        $xeSplitter.dispatchEvent('resize-drag', {
+          prevItem: prevItem,
+          nextItem: nextItem,
+          offsetHeight: targetOffsetHeight,
+          offsetWidth: targetOffsetWidth
+        }, evnt);
+      };
+      document.onmousemove = function (evnt) {
+        evnt.preventDefault();
+        handleDrag(evnt);
+        reactData.resizeFlag++;
+      };
+      document.onmouseup = function (evnt) {
+        document.onmousemove = null;
+        document.onmouseup = null;
+        if (rsSplitterLineEl) {
+          rsSplitterLineEl.style.display = '';
+        }
+        handleUpdate();
+        (0, _dom.removeClass)(el, 'is--drag');
+        $xeSplitter.dispatchEvent('resize-end', {
+          prevItem: prevItem,
+          nextItem: nextItem,
+          offsetHeight: targetOffsetHeight,
+          offsetWidth: targetOffsetWidth
+        }, evnt);
+        $xeSplitter.recalculate();
+        reactData.resizeFlag++;
+      };
+      if (rsSplitterLineEl) {
+        rsSplitterLineEl.style.display = 'block';
+        handleReStyle(evnt);
+      }
+      handleDrag(evnt);
+      (0, _dom.addClass)(el, 'is--drag');
+      $xeSplitter.dispatchEvent('resize-start', {
+        prevItem: prevItem,
+        nextItem: nextItem
+      }, evnt);
+    },
+    handleItemActionEvent: function handleItemActionEvent(evnt, prevItem, nextItem, isNext) {
+      var $xeSplitter = this;
+      var props = $xeSplitter;
+      var reactData = $xeSplitter.reactData;
+      var vertical = props.vertical;
+      var expanded = false;
+      var item = prevItem;
+      if (isNext) {
+        item = nextItem;
+        expanded = !nextItem.isExpand;
+        nextItem.isExpand = expanded;
+      } else {
+        expanded = !prevItem.isExpand;
+        prevItem.isExpand = expanded;
+      }
+      if (vertical) {
+        if (prevItem.isExpand && nextItem.isExpand) {
+          prevItem.foldHeight = 0;
+          nextItem.foldHeight = 0;
+        } else if (prevItem.isExpand) {
+          nextItem.foldHeight = 0;
+          prevItem.foldHeight = (prevItem.resizeHeight || prevItem.renderHeight) + (nextItem.resizeHeight || nextItem.renderHeight);
+        } else {
+          prevItem.foldHeight = 0;
+          nextItem.foldHeight = (prevItem.resizeHeight || prevItem.renderHeight) + (nextItem.resizeHeight || nextItem.renderHeight);
+        }
+      } else {
+        if (prevItem.isExpand && nextItem.isExpand) {
+          prevItem.foldWidth = 0;
+          nextItem.foldWidth = 0;
+        } else if (prevItem.isExpand) {
+          nextItem.foldWidth = 0;
+          prevItem.foldWidth = (prevItem.resizeWidth || prevItem.renderWidth) + (nextItem.resizeWidth || nextItem.renderWidth);
+        } else {
+          prevItem.foldWidth = 0;
+          nextItem.foldWidth = (prevItem.resizeWidth || prevItem.renderWidth) + (nextItem.resizeWidth || nextItem.renderWidth);
+        }
+      }
+      if (evnt) {
+        $xeSplitter.dispatchEvent('toggle-expand', {
+          prevItem: prevItem,
+          nextItem: nextItem,
+          expanded: expanded,
+          item: item
+        }, evnt);
+      }
+      $xeSplitter.recalculate();
+      reactData.resizeFlag++;
+    },
+    handlePrevActionDblclickEvent: function handlePrevActionDblclickEvent(evnt) {
+      var $xeSplitter = this;
+      var reactData = $xeSplitter.reactData;
+      var itemList = reactData.itemList;
+      var actionOpts = $xeSplitter.computeActionOpts;
+      var btnEl = evnt.currentTarget;
+      var btnWrapperEl = btnEl.parentElement;
+      var handleEl = btnWrapperEl.parentElement;
+      var prevEl = handleEl.previousElementSibling;
+      var prevId = prevEl.getAttribute('itemid');
+      var prevItem = itemList.find(function (item) {
+        return item.id === prevId;
+      });
+      var nextEl = handleEl.nextElementSibling;
+      var nextId = nextEl.getAttribute('itemid');
+      var nextItem = itemList.find(function (item) {
+        return item.id === nextId;
+      });
+      if (actionOpts.trigger === 'dblclick') {
+        if (prevItem && nextItem && nextItem.isExpand) {
+          $xeSplitter.handleItemActionEvent(evnt, prevItem, nextItem, false);
+        }
+      }
+      $xeSplitter.dispatchEvent('action-dblclick', {
+        prevItem: prevItem,
+        nextItem: nextItem
+      }, evnt);
+    },
+    handlePrevActionClickEvent: function handlePrevActionClickEvent(evnt) {
+      var $xeSplitter = this;
+      var reactData = $xeSplitter.reactData;
+      var itemList = reactData.itemList;
+      var actionOpts = $xeSplitter.computeActionOpts;
+      var btnEl = evnt.currentTarget;
+      var btnWrapperEl = btnEl.parentElement;
+      var handleEl = btnWrapperEl.parentElement;
+      var prevEl = handleEl.previousElementSibling;
+      var prevId = prevEl.getAttribute('itemid');
+      var prevItem = itemList.find(function (item) {
+        return item.id === prevId;
+      });
+      var nextEl = handleEl.nextElementSibling;
+      var nextId = nextEl.getAttribute('itemid');
+      var nextItem = itemList.find(function (item) {
+        return item.id === nextId;
+      });
+      if (actionOpts.trigger !== 'dblclick') {
+        if (prevItem && nextItem && nextItem.isExpand) {
+          $xeSplitter.handleItemActionEvent(evnt, prevItem, nextItem, false);
+        }
+      }
+      $xeSplitter.dispatchEvent('action-click', {
+        prevItem: prevItem,
+        nextItem: nextItem
+      }, evnt);
+    },
+    handleNextActionDblclickEvent: function handleNextActionDblclickEvent(evnt) {
+      var $xeSplitter = this;
+      var reactData = $xeSplitter.reactData;
+      var itemList = reactData.itemList;
+      var actionOpts = $xeSplitter.computeActionOpts;
+      var btnEl = evnt.currentTarget;
+      var btnWrapperEl = btnEl.parentElement;
+      var handleEl = btnWrapperEl.parentElement;
+      var prevEl = handleEl.previousElementSibling;
+      var prevId = prevEl.getAttribute('itemid');
+      var prevItem = itemList.find(function (item) {
+        return item.id === prevId;
+      });
+      var nextEl = handleEl.nextElementSibling;
+      var nextId = nextEl.getAttribute('itemid');
+      var nextItem = itemList.find(function (item) {
+        return item.id === nextId;
+      });
+      if (actionOpts.trigger === 'dblclick') {
+        if (prevItem && nextItem && prevItem.isExpand) {
+          $xeSplitter.handleItemActionEvent(evnt, prevItem, nextItem, true);
+        }
+      }
+      $xeSplitter.dispatchEvent('action-dblclick', {
+        prevItem: prevItem,
+        nextItem: nextItem
+      }, evnt);
+    },
+    handleNextActionClickEvent: function handleNextActionClickEvent(evnt) {
+      var $xeSplitter = this;
+      var reactData = $xeSplitter.reactData;
+      var itemList = reactData.itemList;
+      var actionOpts = $xeSplitter.computeActionOpts;
+      var btnEl = evnt.currentTarget;
+      var btnWrapperEl = btnEl.parentElement;
+      var handleEl = btnWrapperEl.parentElement;
+      var prevEl = handleEl.previousElementSibling;
+      var prevId = prevEl.getAttribute('itemid');
+      var prevItem = itemList.find(function (item) {
+        return item.id === prevId;
+      });
+      var nextEl = handleEl.nextElementSibling;
+      var nextId = nextEl.getAttribute('itemid');
+      var nextItem = itemList.find(function (item) {
+        return item.id === nextId;
+      });
+      if (actionOpts.trigger !== 'dblclick') {
+        if (prevItem && nextItem && prevItem.isExpand) {
+          $xeSplitter.handleItemActionEvent(evnt, prevItem, nextItem, true);
+        }
+      }
+      $xeSplitter.dispatchEvent('action-click', {
+        prevItem: prevItem,
+        nextItem: nextItem
+      }, evnt);
+    },
+    handleGlobalResizeEvent: function handleGlobalResizeEvent() {
+      var $xeSplitter = this;
+      $xeSplitter.recalculate();
+    },
+    getActionIcon: function getActionIcon(prevItem, nextItem, isNext) {
+      var $xeSplitter = this;
+      var props = $xeSplitter;
+      var vertical = props.vertical;
+      var topIcon = 'SPLIT_TOP_ACTION';
+      var bottomIcon = 'SPLIT_BOTTOM_ACTION';
+      var leftIcon = 'SPLIT_LEFT_ACTION';
+      var rightIcon = 'SPLIT_RIGHT_ACTION';
+      var iconName = '';
+      if (vertical) {
+        if (isNext) {
+          iconName = nextItem.isExpand ? bottomIcon : topIcon;
+        } else {
+          iconName = prevItem.isExpand ? topIcon : bottomIcon;
+        }
+      } else {
+        if (isNext) {
+          iconName = nextItem.isExpand ? rightIcon : leftIcon;
+        } else {
+          iconName = prevItem.isExpand ? leftIcon : rightIcon;
+        }
+      }
+      if (iconName) {
+        return (0, _ui.getIcon)()[iconName];
+      }
+      return '';
+    },
+    //
+    // Render
+    //
+    renderHandleBar: function renderHandleBar(h, prevItem, nextItem) {
+      var $xeSplitter = this;
+      var props = $xeSplitter;
+      var reactData = $xeSplitter.reactData;
+      var border = props.border,
+        resize = props.resize,
+        vertical = props.vertical;
+      var itemList = reactData.itemList;
+      var barStyle = $xeSplitter.computeBarStyle;
+      var actionOpts = $xeSplitter.computeActionOpts;
+      var direction = actionOpts.direction;
+      var showPrevButton = _xeUtils.default.isBoolean(actionOpts.showPrevButton) ? actionOpts.showPrevButton : itemList.some(function (item) {
+        return item.showAction;
+      });
+      var showNextButton = _xeUtils.default.isBoolean(actionOpts.showNextButton) ? actionOpts.showNextButton : direction === 'next' && itemList.some(function (item) {
+        return item.showAction;
+      });
+      var resizeOpts = $xeSplitter.computeResizeOpts;
+      var immediate = resizeOpts.immediate;
+      return h('div', {
+        class: ['vxe-splitter-panel-handle', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy', {
+          'is--resize': resize,
+          'is--border': border
+        }]
+      }, [h('div', {
+        class: 'vxe-splitter-panel-handle-bar',
+        style: barStyle,
+        on: {
+          mousedown: $xeSplitter.dragEvent
+        }
+      }), itemList.length === 2 ? h('div', {
+        class: 'vxe-splitter-panel-action-btn-wrapper'
+      }, [showPrevButton && nextItem.isExpand ? h('div', {
+        class: 'vxe-splitter-panel-action-btn',
+        on: {
+          dblclick: $xeSplitter.handlePrevActionDblclickEvent,
+          click: $xeSplitter.handlePrevActionClickEvent
+        }
+      }, [h('i', {
+        class: $xeSplitter.getActionIcon(prevItem, nextItem, false)
+      })]) : (0, _ui.renderEmptyElement)($xeSplitter), showNextButton && prevItem.isExpand ? h('div', {
+        class: 'vxe-splitter-panel-action-btn',
+        on: {
+          dblclick: $xeSplitter.handleNextActionDblclickEvent,
+          click: $xeSplitter.handleNextActionClickEvent
+        }
+      }, [h('i', {
+        class: $xeSplitter.getActionIcon(prevItem, nextItem, true)
+      })]) : (0, _ui.renderEmptyElement)($xeSplitter)]) : (0, _ui.renderEmptyElement)($xeSplitter)]);
+    },
+    renderItems: function renderItems(h) {
+      var $xeSplitter = this;
+      var props = $xeSplitter;
+      var reactData = $xeSplitter.reactData;
+      var border = props.border,
+        padding = props.padding,
+        resize = props.resize,
+        vertical = props.vertical;
+      var itemList = reactData.itemList;
+      var vSize = $xeSplitter.computeSize;
+      var resizeOpts = $xeSplitter.computeResizeOpts;
+      var immediate = resizeOpts.immediate;
+      var visibleItems = $xeSplitter.computeVisibleItems;
+      var autoItems = $xeSplitter.computeAutoItems.autoItems;
+      var itemVNs = [];
+      itemList.forEach(function (prevItem, index) {
+        var id = prevItem.id,
+          name = prevItem.name,
+          slots = prevItem.slots,
+          renderHeight = prevItem.renderHeight,
+          resizeHeight = prevItem.resizeHeight,
+          foldHeight = prevItem.foldHeight,
+          renderWidth = prevItem.renderWidth,
+          resizeWidth = prevItem.resizeWidth,
+          foldWidth = prevItem.foldWidth,
+          isExpand = prevItem.isExpand;
+        var nextItem = itemList[index + 1];
+        var defaultSlot = slots ? slots.default : null;
+        var stys = {};
+        var itemWidth = isExpand ? foldWidth || resizeWidth || renderWidth : 0;
+        var itemHeight = isExpand ? foldHeight || resizeHeight || renderHeight : 0;
+        // 至少存在一个自适应
+        if (autoItems.length === 1) {
+          if (vertical) {
+            if (!prevItem.height) {
+              itemHeight = 0;
+            }
+          } else {
+            if (!prevItem.width) {
+              itemWidth = 0;
+            }
+          }
+        }
+        var isFill = true;
+        if (vertical) {
+          if (itemHeight && visibleItems.length > 1) {
+            isFill = false;
+            stys.height = (0, _dom.toCssUnit)(itemHeight);
+          }
+        } else {
+          if (itemWidth && visibleItems.length > 1) {
+            isFill = false;
+            stys.width = (0, _dom.toCssUnit)(itemWidth);
+          }
+        }
+        itemVNs.push(h('div', {
+          attrs: {
+            itemid: id
+          },
+          class: ['vxe-splitter-panel', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--resize', resize), 'is--padding', padding), 'is--border', border), 'is--height', itemHeight), 'is--width', itemWidth), 'is--visible', isExpand), 'is--hidden', !isExpand), 'is--fill', isExpand && isFill)],
+          style: stys
+        }, [h('div', {
+          attrs: {
+            itemid: id
+          },
+          class: 'vxe-splitter-panel--wrapper'
+        }, [h('div', {
+          class: 'vxe-splitter-panel--inner'
+        }, defaultSlot ? $xeSplitter.callSlot(defaultSlot, {
+          name: name,
+          isExpand: isExpand
+        }) : [])])]));
+        if (nextItem) {
+          itemVNs.push($xeSplitter.renderHandleBar(h, prevItem, nextItem));
+        }
+      });
+      return h('div', {
+        class: 'vxe-splitter-wrapper'
+      }, itemVNs);
+    },
+    renderVN: function renderVN(h) {
+      var $xeSplitter = this;
+      var props = $xeSplitter;
+      var slots = $xeSplitter.$scopedSlots;
+      var vertical = props.vertical,
+        width = props.width,
+        height = props.height;
+      var vSize = $xeSplitter.computeSize;
+      var resizeOpts = $xeSplitter.computeResizeOpts;
+      var immediate = resizeOpts.immediate,
+        showTip = resizeOpts.showTip;
+      var defaultSlot = slots.default;
+      var stys = {};
+      if (height) {
+        stys.height = (0, _dom.toCssUnit)(height);
+      }
+      if (width) {
+        stys.width = (0, _dom.toCssUnit)(width);
+      }
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-splitter', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy', _defineProperty({}, "size--".concat(vSize), vSize)],
+        style: stys
+      }, [h('div', {
+        class: 'vxe-splitter-slots'
+      }, defaultSlot ? defaultSlot({}) : []), $xeSplitter.renderItems(h), h('div', {
+        ref: 'refResizableSplitterTip',
+        class: ['vxe-splitter--resizable-splitter-tip', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy']
+      }, showTip ? [h('div', {
+        class: 'vxe-splitter--resizable-splitter-tip-number'
+      }, [h('div', {
+        class: 'vxe-splitter--resizable-splitter-number-prev'
+      }), h('div', {
+        class: 'vxe-splitter--resizable-splitter-number-next'
+      })])] : []), h('div', {
+        class: 'vxe-splitter--render-vars'
+      }, [h('div', {
+        ref: 'refBarInfoElem',
+        class: 'vxe-splitter--handle-bar-info'
+      })])]);
+    }
+  },
+  created: function created() {
+    var $xeSplitter = this;
+    _ui.globalEvents.on($xeSplitter, 'resize', $xeSplitter.handleGlobalResizeEvent);
+  },
+  mounted: function mounted() {
+    var $xeSplitter = this;
+    var props = $xeSplitter;
+    var el = $xeSplitter.$refs.refElem;
+    if (el) {
+      var resizeObserver = _ui.globalResize.create(function () {
+        $xeSplitter.recalculate();
+      });
+      resizeObserver.observe(el);
+      this.$resize = resizeObserver;
+    }
+    if (props.items) {
+      $xeSplitter.loadItem(props.items);
+    }
+    var actionOpts = $xeSplitter.computeActionOpts;
+    if (actionOpts.direction) {
+      errLog('vxe.error.delProp', ['action-config.direction', 'action-config.showPrevButton | action-config.showNextButton']);
+    }
+    $xeSplitter.$nextTick(function () {
+      $xeSplitter.recalculate();
+    });
+  },
+  beforeDestroy: function beforeDestroy() {
+    var $xeSplitter = this;
+    if (this.$resize) {
+      this.$resize.disconnect();
+    }
+    _ui.globalEvents.off($xeSplitter, 'resize');
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});
+/* define-vxe-component end */