vxe-pc-ui 3.5.2 → 3.5.3

package/lib/index.umd.js

@@ -13534,7 +13534,12 @@ setIcon({
   RATE_UNCHECKED: iconPrefix + 'star',
   // color-picker
   COLOR_COPY: iconPrefix + 'copy',
-  EYE_DROPPER: iconPrefix + 'dropper'
+  EYE_DROPPER: iconPrefix + 'dropper',
+  // split
+  SPLIT_TOP_ACTION: iconPrefix + 'arrow-up',
+  SPLIT_BOTTOM_ACTION: iconPrefix + 'arrow-down',
+  SPLIT_LEFT_ACTION: iconPrefix + 'arrow-left',
+  SPLIT_RIGHT_ACTION: iconPrefix + 'arrow-right'
 });
 
 /* harmony default export */ var ui = ((/* unused pure expression or super */ null && (VxeUI)));
@@ -13709,7 +13714,6 @@ var es_string_match = __webpack_require__(1761);
 
 
 
-var dom_browse = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().browse();
 var tpImgEl;
 function initTpImg() {
   if (!tpImgEl) {
@@ -32830,6 +32834,7 @@ var Link = VxeLink;
 
 
 
+var browseObj = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().browse();
 /* harmony default export */ var list = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeList',
   mixins: [globalMixins.sizeMixin],
@@ -33045,7 +33050,7 @@ var Link = VxeLink;
         if (scrollYLoad) {
           var scrollBodyElem = $xeList.$refs.refVirtualWrapper;
           var visibleYSize = Math.max(8, Math.ceil(scrollBodyElem.clientHeight / rowHeight));
-          var offsetYSize = sYOpts.oSize ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(sYOpts.oSize) : dom_browse.edge ? 10 : 0;
+          var offsetYSize = sYOpts.oSize ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(sYOpts.oSize) : browseObj.edge ? 10 : 0;
           scrollYStore.offsetSize = offsetYSize;
           scrollYStore.visibleSize = visibleYSize;
           scrollYStore.endIndex = Math.max(scrollYStore.startIndex + visibleYSize + offsetYSize, scrollYStore.endIndex);
@@ -40188,6 +40193,7 @@ var web_url_search_params_size = __webpack_require__(8721);
 
 
 
+var util_browseObj = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().browse();
 // 打印
 var printFrame;
 // 默认导出或打印的 HTML 样式
@@ -40239,7 +40245,7 @@ function handlePrint(opts) {
   printHtml = createHtmlPage(opts, printHtml);
   var blob = getExportBlobByString(printHtml, 'html');
   return new Promise(function (resolve) {
-    if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().browse().msie) {
+    if (util_browseObj.msie) {
       removeFrame();
       printFrame = createPrintFrame();
       appendPrintFrame();
@@ -42178,6 +42184,7 @@ var es_string_split = __webpack_require__(744);
 
 
 
+
 /* harmony default export */ var split = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeSplit',
   mixins: [globalMixins.sizeMixin],
@@ -42202,7 +42209,9 @@ var es_string_split = __webpack_require__(744);
         return getConfig().split.padding;
       }
     },
-    itemConfig: Object
+    itemConfig: Object,
+    barConfig: Object,
+    actionConfig: Object
   },
   data: function data() {
     var xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
@@ -42227,6 +42236,35 @@ var es_string_split = __webpack_require__(744);
       var $xeSplit = this;
       var props = $xeSplit;
       return Object.assign({}, getConfig().split.itemConfig, props.itemConfig);
+    },
+    computeBarOpts: function computeBarOpts() {
+      var $xeSplit = this;
+      var props = $xeSplit;
+      return Object.assign({}, getConfig().split.barConfig, props.barConfig);
+    },
+    computeActionOpts: function computeActionOpts() {
+      var $xeSplit = this;
+      var props = $xeSplit;
+      return Object.assign({}, getConfig().split.actionConfig, props.actionConfig);
+    },
+    computeIsFoldNext: function computeIsFoldNext() {
+      var $xeSplit = this;
+      var actionOpts = $xeSplit.computeActionOpts;
+      return actionOpts.direction === 'next';
+    },
+    computeBarStyle: function computeBarStyle() {
+      var $xeSplit = this;
+      var barOpts = $xeSplit.computeBarOpts;
+      var width = barOpts.width,
+        height = barOpts.height;
+      var stys = {};
+      if (height) {
+        stys.height = toCssUnit(height);
+      }
+      if (width) {
+        stys.width = toCssUnit(width);
+      }
+      return stys;
     }
   }),
   methods: {
@@ -42328,12 +42366,13 @@ var es_string_split = __webpack_require__(744);
       evnt.preventDefault();
       var vertical = props.vertical;
       var staticItems = reactData.staticItems;
-      var handleEl = evnt.currentTarget;
+      var barEl = evnt.currentTarget;
+      var handleEl = barEl.parentElement;
       var el = $xeSplit.$refs.refElem;
       if (!el) {
         return;
       }
-      var itemId = handleEl.getAttribute('xid');
+      var itemId = handleEl.getAttribute('itemid');
       var itemIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(staticItems, function (item) {
         return item.id === itemId;
       });
@@ -42341,19 +42380,23 @@ var es_string_split = __webpack_require__(744);
       if (!item) {
         return;
       }
+      if (!item.isExpand) {
+        return;
+      }
+      var isFoldNext = $xeSplit.computeIsFoldNext;
       var itemOpts = $xeSplit.computeItemOpts;
       var allMinWidth = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(itemOpts.minWidth);
       var allMinHeight = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(itemOpts.minHeight);
-      var prevItem = staticItems[itemIndex - 1];
-      var prevItemEl = prevItem ? el.querySelector(".vxe-split-item[xid=\"".concat(prevItem.id, "\"]")) : null;
-      var currItemEl = item ? el.querySelector(".vxe-split-item[xid=\"".concat(item.id, "\"]")) : null;
-      var prevWidth = prevItemEl ? prevItemEl.clientWidth : 0;
+      var targetItem = staticItems[itemIndex + (isFoldNext ? 1 : -1)];
+      var targetItemEl = targetItem ? el.querySelector(".vxe-split-item[itemid=\"".concat(targetItem.id, "\"]")) : null;
+      var currItemEl = item ? el.querySelector(".vxe-split-item[itemid=\"".concat(item.id, "\"]")) : null;
+      var targetWidth = targetItemEl ? targetItemEl.clientWidth : 0;
       var currWidth = currItemEl ? currItemEl.clientWidth : 0;
-      var prevHeight = prevItemEl ? prevItemEl.clientHeight : 0;
+      var targetHeight = targetItemEl ? targetItemEl.clientHeight : 0;
       var currHeight = currItemEl ? currItemEl.clientHeight : 0;
-      var prevMinWidth = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(prevItem ? getGlobalDefaultConfig(prevItem.minWidth, allMinWidth) : allMinWidth);
+      var targetMinWidth = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(targetItem ? getGlobalDefaultConfig(targetItem.minWidth, allMinWidth) : allMinWidth);
       var currMinWidth = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(getGlobalDefaultConfig(item.minWidth, allMinWidth));
-      var prevMinHeight = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(prevItem ? getGlobalDefaultConfig(prevItem.minHeight, allMinHeight) : allMinHeight);
+      var targetMinHeight = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(targetItem ? getGlobalDefaultConfig(targetItem.minHeight, allMinHeight) : allMinHeight);
       var currMinHeight = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(getGlobalDefaultConfig(item.minHeight, allMinHeight));
       var disX = evnt.clientX;
       var disY = evnt.clientY;
@@ -42361,50 +42404,214 @@ var es_string_split = __webpack_require__(744);
       document.onmousemove = function (evnt) {
         evnt.preventDefault();
         if (vertical) {
-          var offsetTop = evnt.clientY - disY;
+          var 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;
+                var reHeight = currHeight - offsetTop;
+                targetItem.resizeHeight = targetHeight + offsetTop;
+                item.resizeHeight = reHeight;
+                $xeSplit.dispatchEvent('resize-drag', {
+                  item: 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) {
+                var _reHeight = currHeight - offsetTop;
+                targetItem.resizeHeight = targetHeight + offsetTop;
+                item.resizeHeight = _reHeight;
+                $xeSplit.dispatchEvent('resize-drag', {
+                  item: item,
+                  name: item.name,
+                  offsetHeight: offsetTop,
+                  resizeHeight: _reHeight,
+                  offsetWidth: 0,
+                  resizeWidth: 0
+                }, evnt);
               }
             }
           }
         } else {
-          var offsetLeft = evnt.clientX - disX;
+          var 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;
+                var reWidth = currWidth - offsetLeft;
+                targetItem.resizeWidth = targetWidth + offsetLeft;
+                item.resizeWidth = reWidth;
+                $xeSplit.dispatchEvent('resize-drag', {
+                  item: 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) {
+                var _reWidth = currWidth - offsetLeft;
+                targetItem.resizeWidth = targetWidth + offsetLeft;
+                item.resizeWidth = _reWidth;
+                $xeSplit.dispatchEvent('resize-drag', {
+                  item: item,
+                  name: item.name,
+                  offsetHeight: 0,
+                  resizeHeight: 0,
+                  offsetWidth: offsetLeft,
+                  resizeWidth: _reWidth
+                }, evnt);
               }
             }
           }
         }
       };
-      document.onmouseup = function () {
+      document.onmouseup = function (evnt) {
         document.onmousemove = null;
         document.onmouseup = null;
         removeClass(el, 'is--drag');
+        $xeSplit.dispatchEvent('resize-end', {
+          item: item,
+          name: item.name,
+          resizeHeight: item.resizeHeight,
+          resizeWidth: item.resizeWidth
+        }, evnt);
       };
+      $xeSplit.dispatchEvent('resize-start', {
+        item: item,
+        name: item.name
+      }, evnt);
+    },
+    handleItemActionEvent: function handleItemActionEvent(evnt) {
+      var $xeSplit = this;
+      var props = $xeSplit;
+      var reactData = $xeSplit.reactData;
+      var el = $xeSplit.$refs.refElem;
+      if (!el) {
+        return;
+      }
+      var vertical = props.vertical;
+      var staticItems = reactData.staticItems;
+      var isFoldNext = $xeSplit.computeIsFoldNext;
+      var btnEl = evnt.currentTarget;
+      var handleEl = btnEl.parentElement;
+      var itemId = handleEl.getAttribute('itemid');
+      var itemIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(staticItems, function (item) {
+        return item.id === itemId;
+      });
+      var item = staticItems[itemIndex];
+      var targetItem = staticItems[itemIndex + (isFoldNext ? 1 : -1)];
+      if (item) {
+        var showAction = item.showAction,
+          isExpand = item.isExpand;
+        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: item,
+            name: item.name,
+            targetItem: targetItem,
+            targetName: targetItem ? targetItem.name : '',
+            expanded: item.isExpand
+          }, evnt);
+        }
+      }
+    },
+    handleGlobalResizeEvent: function handleGlobalResizeEvent() {
+      var $xeSplit = this;
+      $xeSplit.recalculate();
+    },
+    getDefaultActionIcon: function getDefaultActionIcon(item) {
+      var $xeSplit = this;
+      var props = $xeSplit;
+      var vertical = props.vertical;
+      var showAction = item.showAction,
+        isExpand = item.isExpand;
+      var isFoldNext = $xeSplit.computeIsFoldNext;
+      var topIcon = 'SPLIT_TOP_ACTION';
+      var bottomIcon = 'SPLIT_BOTTOM_ACTION';
+      var leftIcon = 'SPLIT_LEFT_ACTION';
+      var rightIcon = 'SPLIT_RIGHT_ACTION';
+      if (showAction) {
+        var 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: function renderHandleBar(h, item) {
+      var $xeSplit = this;
+      var barStyle = $xeSplit.computeBarStyle;
+      var actionOpts = $xeSplit.computeActionOpts;
+      var isFoldNext = $xeSplit.computeIsFoldNext;
+      var id = item.id,
+        isExpand = item.isExpand,
+        showAction = item.showAction;
+      var 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: function renderItems(h) {
       var $xeSplit = this;
       var props = $xeSplit;
@@ -42413,52 +42620,55 @@ var es_string_split = __webpack_require__(744);
         padding = props.padding,
         vertical = props.vertical;
       var staticItems = reactData.staticItems;
+      var isFoldNext = $xeSplit.computeIsFoldNext;
       var itemVNs = [];
       staticItems.forEach(function (item, index) {
         var id = item.id,
           slots = item.slots,
           renderHeight = item.renderHeight,
-          renderWidth = item.renderWidth;
+          resizeHeight = item.resizeHeight,
+          foldHeight = item.foldHeight,
+          renderWidth = item.renderWidth,
+          resizeWidth = item.resizeWidth,
+          foldWidth = item.foldWidth,
+          isVisible = item.isVisible,
+          isExpand = item.isExpand;
         var defaultSlot = slots ? slots.default : null;
         var stys = {};
+        var itemWidth = isVisible ? foldWidth || resizeWidth || renderWidth : 0;
+        var 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', {
+        }, [index && !isFoldNext ? $xeSplit.renderHandleBar(h, item) : renderEmptyElement($xeSplit), h('div', {
           attrs: {
-            xid: id
-          },
-          class: 'vxe-split-item-handle',
-          on: {
-            mousedown: $xeSplit.dragEvent
-          }
-        }) : 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, {}) : [])])]));
+        }, defaultSlot ? $xeSplit.callSlot(defaultSlot, {}) : [])]), isFoldNext && index < staticItems.length - 1 ? $xeSplit.renderHandleBar(h, item) : renderEmptyElement($xeSplit)]));
       });
       return h('div', {
         class: 'vxe-split-wrapper'
@@ -42488,6 +42698,20 @@ var es_string_split = __webpack_require__(744);
       }, defaultSlot ? defaultSlot({}) : []), $xeSplit.renderItems(h)]);
     }
   },
+  created: function created() {
+    var $xeSplit = this;
+    globalEvents.on($xeSplit, 'resize', $xeSplit.handleGlobalResizeEvent);
+  },
+  mounted: function mounted() {
+    var $xeSplit = this;
+    $xeSplit.$nextTick(function () {
+      $xeSplit.recalculate();
+    });
+  },
+  beforeDestroy: function beforeDestroy() {
+    var $xeSplit = this;
+    globalEvents.off($xeSplit, 'resize');
+  },
   render: function render(h) {
     return this.renderVN(h);
   }
@@ -42537,12 +42761,15 @@ function destroySplitItem($xeSplit, chunkConfig) {
 
 
 
+
 /* harmony default export */ var split_item = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeSplitItem',
   mixins: [globalMixins.sizeMixin],
   props: {
+    name: [Number, String],
     width: [Number, String],
     height: [Number, String],
+    showAction: Boolean,
     minWidth: {
       type: [Number, String],
       default: function _default() {
@@ -42572,12 +42799,20 @@ function destroySplitItem($xeSplit, chunkConfig) {
     var reactData = {};
     var chunkConfig = {
       id: xID,
+      name: '',
       width: 0,
       height: 0,
       minWidth: 0,
       minHeight: 0,
+      showAction: false,
+      isVisible: true,
+      isExpand: true,
       renderWidth: 0,
+      resizeWidth: 0,
+      foldWidth: 0,
       renderHeight: 0,
+      resizeHeight: 0,
+      foldHeight: 0,
       slots: {}
     };
     return {
@@ -42588,6 +42823,11 @@ function destroySplitItem($xeSplit, chunkConfig) {
   },
   computed: _objectSpread2({}, {}),
   watch: {
+    name: function name(val) {
+      var $xeSplitItem = this;
+      var chunkConfig = $xeSplitItem.chunkConfig;
+      chunkConfig.name = val;
+    },
     width: function width(val) {
       var $xeSplitItem = this;
       var chunkConfig = $xeSplitItem.chunkConfig;
@@ -42607,6 +42847,11 @@ function destroySplitItem($xeSplit, chunkConfig) {
       var $xeSplitItem = this;
       var chunkConfig = $xeSplitItem.chunkConfig;
       chunkConfig.minHeight = val;
+    },
+    showAction: function showAction(val) {
+      var $xeSplitItem = this;
+      var chunkConfig = $xeSplitItem.chunkConfig;
+      chunkConfig.showAction = val;
     }
   },
   methods: {
@@ -42634,12 +42879,12 @@ function destroySplitItem($xeSplit, chunkConfig) {
     var slots = $xeSplitItem.$scopedSlots;
     var chunkConfig = $xeSplitItem.chunkConfig;
     Object.assign(chunkConfig, {
+      name: props.name,
       width: props.width,
       height: props.height,
       minWidth: props.minWidth,
       minHeight: props.minHeight,
-      renderWidth: 0,
-      renderHeight: 0,
+      showAction: props.showAction,
       slots: slots
     });
   },