vxe-pc-ui 4.5.1 → 4.5.3

package/lib/index.umd.js

@@ -4183,14 +4183,14 @@ function checkDynamic() {
 }
 ;// CONCATENATED MODULE: ./packages/ui/src/log.ts
 
-const log_version = `ui v${"4.5.1"}`;
+const log_version = `ui v${"4.5.2"}`;
 const warnLog = log.create('warn', log_version);
 const errLog = log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
 
-const ui_version = "4.5.1";
+const ui_version = "4.5.2";
 index_esm_VxeUI.uiVersion = ui_version;
 index_esm_VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -4709,7 +4709,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)));
@@ -4857,7 +4862,6 @@ const Alert = VxeAlert;
 /* harmony default export */ var packages_alert = (VxeAlert);
 ;// CONCATENATED MODULE: ./packages/ui/src/dom.ts
 
-const dom_browse = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().browse();
 let tpImgEl;
 function initTpImg() {
   if (!tpImgEl) {
@@ -41464,6 +41468,7 @@ const ListView = VxeListView;
       emit
     } = context;
     const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
+    const browseObj = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().browse();
     const {
       computeSize
     } = useSize(props);
@@ -41608,7 +41613,7 @@ const ListView = VxeListView;
         if (scrollYLoad) {
           const scrollBodyElem = refVirtualWrapper.value;
           const visibleYSize = Math.max(8, Math.ceil(scrollBodyElem.clientHeight / rowHeight));
-          const offsetYSize = sYOpts.oSize ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(sYOpts.oSize) : dom_browse.edge ? 10 : 0;
+          const 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);
@@ -44014,6 +44019,7 @@ const PasswordInput = VxePasswordInput;
 
 
 
+const browseObj = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().browse();
 // 打印
 let printFrame;
 // 默认导出或打印的 HTML 样式
@@ -44068,7 +44074,7 @@ function handlePrint(opts, printHtml = '') {
   printHtml = createHtmlPage(opts, printHtml);
   const blob = getExportBlobByString(printHtml, 'html');
   return new Promise(resolve => {
-    if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().browse().msie) {
+    if (browseObj.msie) {
       removeFrame();
       printFrame = createPrintFrame();
       appendPrintFrame();
@@ -45119,9 +45125,15 @@ const Select = VxeSelect;
       type: Boolean,
       default: () => getConfig().split.border
     },
-    itemConfig: Object
+    padding: {
+      type: Boolean,
+      default: () => getConfig().split.padding
+    },
+    itemConfig: Object,
+    barConfig: Object,
+    actionConfig: Object
   },
-  emits: [],
+  emits: ['action-dblclick', 'action-click', 'resize-start', 'resize-drag', 'resize-end'],
   setup(props, context) {
     const {
       emit,
@@ -45136,8 +45148,36 @@ const Select = VxeSelect;
     const computeItemOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, getConfig().split.itemConfig, props.itemConfig);
     });
+    const computeBarOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, getConfig().split.barConfig, props.barConfig);
+    });
+    const computeActionOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, getConfig().split.actionConfig, props.actionConfig);
+    });
+    const computeIsFoldNext = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const actionOpts = computeActionOpts.value;
+      return actionOpts.direction === 'next';
+    });
+    const computeBarStyle = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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
@@ -45167,6 +45207,40 @@ const Select = VxeSelect;
       }
       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 recalculate = () => {
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
         const {
@@ -45249,30 +45323,35 @@ const Select = VxeSelect;
       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 = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().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 = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(itemOpts.minWidth);
       const allMinHeight = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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;
-      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 = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(prevItem ? getGlobalDefaultConfig(prevItem.minWidth, allMinWidth) : allMinWidth);
+      const targetMinWidth = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(targetItem ? getGlobalDefaultConfig(targetItem.minWidth, allMinWidth) : allMinWidth);
       const currMinWidth = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(getGlobalDefaultConfig(item.minWidth, allMinWidth));
-      const prevMinHeight = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(prevItem ? getGlobalDefaultConfig(prevItem.minHeight, allMinHeight) : allMinHeight);
+      const targetMinHeight = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(targetItem ? getGlobalDefaultConfig(targetItem.minHeight, allMinHeight) : allMinHeight);
       const currMinHeight = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(getGlobalDefaultConfig(item.minHeight, allMinHeight));
       const disX = evnt.clientX;
       const disY = evnt.clientY;
@@ -45280,46 +45359,146 @@ const Select = VxeSelect;
       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);
       };
+      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 = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().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);
+        }
+      }
+    };
+    const handleGlobalResizeEvent = () => {
+      recalculate();
     };
     const splitMethods = {
       dispatchEvent,
@@ -45327,51 +45506,91 @@ const Select = VxeSelect;
     };
     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 (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        itemid: id,
+        class: ['vxe-split-item-handle', isFoldNext ? 'to--next' : 'to--prev']
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-split-item-handle-bar',
+        style: barStyle,
+        onMousedown: dragEvent
+      }), showAction ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        class: 'vxe-split-item-action-btn',
+        ...btnOns
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.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
+          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((0,external_commonjs_vue_commonjs2_vue_root_Vue_.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 ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-          xid: id,
-          class: 'vxe-split-item-handle',
-          onMousedown: dragEvent
-        }) : renderEmptyElement($xeSplit), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-          xid: id,
+        }, [index && !isFoldNext ? renderHandleBar(item) : renderEmptyElement($xeSplit), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          itemid: id,
           class: 'vxe-split-item--wrapper'
-        }, defaultSlot ? callSlot(defaultSlot, {}) : [])]));
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-split-item--inner'
+        }, defaultSlot ? callSlot(defaultSlot, {}) : [])]), isFoldNext && index < staticItems.length - 1 ? renderHandleBar(item) : renderEmptyElement($xeSplit)]));
       });
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-split-wrapper'
@@ -45403,7 +45622,13 @@ const Select = VxeSelect;
       recalculate();
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
-      recalculate();
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        recalculate();
+      });
+      globalEvents.on($xeSplit, 'resize', handleGlobalResizeEvent);
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onUnmounted)(() => {
+      globalEvents.off($xeSplit, 'resize');
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onActivated)(() => {
       recalculate();
@@ -45455,8 +45680,10 @@ function destroySplitItem($xeSplit, chunkConfig) {
 /* harmony default export */ var split_item = ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.defineComponent)({
   name: 'VxeSplitItem',
   props: {
+    name: [Number, String],
     width: [Number, String],
     height: [Number, String],
+    showAction: Boolean,
     minWidth: {
       type: [Number, String],
       default: () => null
@@ -45477,12 +45704,20 @@ function destroySplitItem($xeSplit, chunkConfig) {
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const chunkConfig = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({
       id: xID,
+      name: props.name,
       width: props.width,
       height: props.height,
       minWidth: props.minWidth,
       minHeight: props.minHeight,
+      showAction: props.showAction,
+      isVisible: true,
+      isExpand: true,
       renderWidth: 0,
+      resizeWidth: 0,
+      foldWidth: 0,
       renderHeight: 0,
+      resizeHeight: 0,
+      foldHeight: 0,
       slots: slots
     });
     const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({});
@@ -45515,6 +45750,9 @@ function destroySplitItem($xeSplit, chunkConfig) {
         ref: refElem
       });
     };
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.name, val => {
+      chunkConfig.name = val;
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.width, val => {
       chunkConfig.width = val;
     });
@@ -45527,6 +45765,9 @@ function destroySplitItem($xeSplit, chunkConfig) {
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.minHeight, val => {
       chunkConfig.minHeight = val;
     });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.showAction, val => {
+      chunkConfig.showAction = val;
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
       const elem = refElem.value;
       if ($xeSplit && elem) {