vxe-pc-ui 4.11.33 → 4.11.35

package/lib/index.umd.js

@@ -3636,6 +3636,8 @@ const VxeDynamics = defineVxeComponent({
               optionClick(params);
             }
           }
+        }, {
+          events: undefined
         });
       }
       return [modals.length ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
@@ -3659,14 +3661,14 @@ function checkDynamic() {
 }
 ;// CONCATENATED MODULE: ./packages/ui/src/log.ts
 
-const log_version = `ui v${"4.11.33"}`;
+const log_version = `ui v${"4.11.35"}`;
 const warnLog = log.create('warn', log_version);
 const errLog = log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
 
-const ui_version = "4.11.33";
+const ui_version = "4.11.35";
 index_esm_VxeUI.uiVersion = ui_version;
 index_esm_VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -3736,7 +3738,9 @@ setConfig({
     }
   },
   collapsePane: {},
-  contextMenu: {},
+  contextMenu: {
+    autoLocate: true
+  },
   countdown: {},
   colorPicker: {
     type: 'rgb',
@@ -7335,7 +7339,7 @@ const VxeButtonComponent = defineVxeComponent({
       default: null
     }
   },
-  emits: ['click', 'mouseenter', 'mouseleave', 'dropdown-click', 'dropdownClick'],
+  emits: ['click', 'mouseenter', 'mouseleave', 'dropdown-click', 'dropdownClick', 'contextmenu'],
   setup(props, context) {
     const {
       slots,
@@ -7613,6 +7617,9 @@ const VxeButtonComponent = defineVxeComponent({
     const mouseleaveEvent = evnt => {
       dispatchEvent('mouseleave', {}, evnt);
     };
+    const contextmenuEvent = evnt => {
+      dispatchEvent('contextmenu', {}, evnt);
+    };
     const clickTargetEvent = evnt => {
       const {
         loading,
@@ -7849,7 +7856,9 @@ const VxeButtonComponent = defineVxeComponent({
         return renderEmptyElement($xeButton);
       }
       if (dropdownsSlot || downBtnList.length) {
-        const btnOns = {};
+        const btnOns = {
+          onContextmenu: contextmenuEvent
+        };
         const panelOns = {};
         if (trigger === 'hover') {
           // hover 触发
@@ -7977,7 +7986,8 @@ const VxeButtonComponent = defineVxeComponent({
           to: routerLink,
           onClick: clickEvent,
           onMouseenter: mouseenterEvent,
-          onMouseleave: mouseleaveEvent
+          onMouseleave: mouseleaveEvent,
+          onContextmenu: contextmenuEvent
         }, {
           default() {
             return renderContent();
@@ -8002,7 +8012,8 @@ const VxeButtonComponent = defineVxeComponent({
         disabled: btnDisabled || loading,
         onClick: clickEvent,
         onMouseenter: mouseenterEvent,
-        onMouseleave: mouseleaveEvent
+        onMouseleave: mouseleaveEvent,
+        onContextmenu: contextmenuEvent
       }, renderContent());
     };
     $xeButton.renderVN = renderVN;
@@ -8063,7 +8074,7 @@ const Button = VxeButton;
       default: () => getConfig().buttonGroup.size || getConfig().size
     }
   },
-  emits: ['click'],
+  emits: ['click', 'contextmenu'],
   setup(props, context) {
     const {
       slots,
@@ -8083,12 +8094,13 @@ const Button = VxeButton;
     const {
       computePermissionInfo
     } = usePermission(props);
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, createEvent(evnt, {
+        $buttonGroup: $xeButtonGroup
+      }, params));
+    };
     const buttonGroupMethods = {
-      dispatchEvent(type, params, evnt) {
-        emit(type, createEvent(evnt, {
-          $buttonGroup: $xeButtonGroup
-        }, params));
-      }
+      dispatchEvent
     };
     const buttonGroupPrivateMethods = {
       handleClick(params, evnt) {
@@ -8105,6 +8117,9 @@ const Button = VxeButton;
         }, evnt);
       }
     };
+    const contextmenuEvent = evnt => {
+      dispatchEvent('contextmenu', {}, evnt);
+    };
     Object.assign($xeButtonGroup, buttonGroupMethods, buttonGroupPrivateMethods);
     const renderVN = () => {
       const {
@@ -8122,7 +8137,8 @@ const Button = VxeButton;
           $buttonGroup: $xeButtonGroup
         }) : className : '', {
           'is--vertical': vertical
-        }]
+        }],
+        onContextmenu: contextmenuEvent
       }, defaultSlot ? defaultSlot({}) : options ? options.map((item, index) => {
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(src_button, {
           key: index,
@@ -17438,7 +17454,7 @@ function context_menu_createReactData() {
       left: '',
       zIndex: 0
     },
-    childPos: ''
+    childOffsetX: 0
   };
 }
 /* harmony default export */ var context_menu = (defineVxeComponent({
@@ -17453,6 +17469,10 @@ function context_menu_createReactData() {
     options: Array,
     x: [Number, String],
     y: [Number, String],
+    autoLocate: {
+      type: Boolean,
+      default: () => getConfig().contextMenu.autoLocate
+    },
     zIndex: [Number, String],
     position: {
       type: String,
@@ -17488,6 +17508,20 @@ function context_menu_createReactData() {
       } = props;
       return options || [];
     });
+    const computeAllFirstMenuList = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const menuGroups = computeMenuGroups.value;
+      const firstList = [];
+      for (let i = 0; i < menuGroups.length; i++) {
+        const list = menuGroups[i];
+        for (let j = 0; j < list.length; j++) {
+          const firstItem = list[j];
+          if (hasValidItem(firstItem)) {
+            firstList.push(firstItem);
+          }
+        }
+      }
+      return firstList;
+    });
     const computeTopAndLeft = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
         x,
@@ -17521,7 +17555,7 @@ function context_menu_createReactData() {
       } = reactData;
       const value = true;
       reactData.visible = value;
-      updateLocate();
+      handleLocate();
       updateZindex();
       if (modelValue !== value) {
         emitModel(value);
@@ -17534,7 +17568,9 @@ function context_menu_createReactData() {
           visible: value
         }, null);
       }
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
+        updateLocate();
+      });
     };
     const close = () => {
       const {
@@ -17558,7 +17594,7 @@ function context_menu_createReactData() {
       }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
     };
-    const updateLocate = () => {
+    const handleLocate = () => {
       const {
         x,
         y
@@ -17568,6 +17604,7 @@ function context_menu_createReactData() {
       } = reactData;
       popupStyle.left = toCssUnit(x || 0);
       popupStyle.top = toCssUnit(y || 0);
+      updateLocate();
     };
     const updateZindex = () => {
       const {
@@ -17586,6 +17623,67 @@ function context_menu_createReactData() {
         }
       }
     };
+    const updateLocate = () => {
+      const {
+        autoLocate,
+        position
+      } = props;
+      const {
+        popupStyle
+      } = reactData;
+      if (autoLocate) {
+        const wrapperEl = refElem.value;
+        if (wrapperEl) {
+          const {
+            visibleWidth,
+            visibleHeight
+          } = getDomNode();
+          const wrapperStyle = getComputedStyle(wrapperEl);
+          const offsetTop = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(wrapperStyle.top);
+          const offsetLeft = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(wrapperStyle.left);
+          const wrapperWidth = wrapperEl.offsetWidth;
+          const wrapperHeight = wrapperEl.offsetHeight;
+          if (position === 'absolute') {
+            //
+          } else {
+            if (offsetTop + wrapperHeight > visibleHeight) {
+              popupStyle.top = `${Math.max(0, offsetTop - wrapperHeight)}px`;
+            }
+            if (offsetLeft + wrapperWidth > visibleWidth) {
+              popupStyle.left = `${Math.max(0, offsetLeft - wrapperWidth)}px`;
+            }
+          }
+        }
+      }
+      updateChildLocate();
+    };
+    const updateChildLocate = () => {
+      const wrapperEl = refElem.value;
+      if (wrapperEl) {
+        const {
+          visibleWidth
+        } = getDomNode();
+        const owSize = 2;
+        const handleStyle = () => {
+          const wrapperStyle = getComputedStyle(wrapperEl);
+          const offsetLeft = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(wrapperStyle.left);
+          const wrapperWidth = wrapperEl.offsetWidth;
+          const childEl = wrapperEl.querySelector('.vxe-context-menu--children-wrapper');
+          const childWidth = childEl ? childEl.offsetWidth : wrapperWidth;
+          if (offsetLeft + wrapperWidth > visibleWidth - childWidth) {
+            // 往左
+            reactData.childOffsetX = -childWidth + owSize;
+          } else {
+            // 往右
+            reactData.childOffsetX = wrapperWidth - owSize;
+          }
+        };
+        handleStyle();
+        (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+          handleStyle();
+        });
+      }
+    };
     const handleVisible = () => {
       const {
         modelValue
@@ -17617,12 +17715,193 @@ function context_menu_createReactData() {
     };
     const handleItemMouseenterEvent = (evnt, item, parentitem) => {
       reactData.activeOption = parentitem || item;
-      reactData.activeChildOption = parentitem ? item : null;
+      if (parentitem) {
+        reactData.activeOption = parentitem;
+        reactData.activeChildOption = item;
+      } else {
+        reactData.activeOption = item;
+        if (hasChildMenu(item)) {
+          reactData.activeChildOption = findFirstChildItem(item);
+          (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+            updateChildLocate();
+          });
+        } else {
+          reactData.activeChildOption = null;
+        }
+      }
     };
     const handleItemMouseleaveEvent = () => {
       reactData.activeOption = null;
       reactData.activeChildOption = null;
     };
+    const hasValidItem = item => {
+      return !item.loading && !item.disabled && item.visible !== false;
+    };
+    const findNextFirstItem = (allFirstList, firstItem) => {
+      for (let i = 0; i < allFirstList.length; i++) {
+        const item = allFirstList[i];
+        if (firstItem === item) {
+          const nextItem = allFirstList[i + 1];
+          if (nextItem) {
+            return nextItem;
+          }
+        }
+      }
+      return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().first(allFirstList);
+    };
+    const findPrevFirstItem = (allFirstList, firstItem) => {
+      for (let i = 0; i < allFirstList.length; i++) {
+        const item = allFirstList[i];
+        if (firstItem === item) {
+          if (i > 0) {
+            return allFirstList[i - 1];
+          }
+        }
+      }
+      return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().last(allFirstList);
+    };
+    const findFirstChildItem = firstItem => {
+      const {
+        children
+      } = firstItem;
+      if (children) {
+        for (let i = 0; i < children.length; i++) {
+          const item = children[i];
+          if (hasValidItem(item)) {
+            return item;
+          }
+        }
+      }
+      return null;
+    };
+    const findPrevChildItem = (firstItem, childItem) => {
+      const {
+        children
+      } = firstItem;
+      let prevValidItem = null;
+      if (children) {
+        for (let i = 0; i < children.length; i++) {
+          const item = children[i];
+          if (childItem === item) {
+            break;
+          }
+          if (hasValidItem(item)) {
+            prevValidItem = item;
+          }
+        }
+        if (!prevValidItem) {
+          for (let len = children.length - 1; len >= 0; len--) {
+            const item = children[len];
+            if (hasValidItem(item)) {
+              return item;
+            }
+          }
+        }
+      }
+      return prevValidItem;
+    };
+    const findNextChildItem = (firstItem, childItem) => {
+      const {
+        children
+      } = firstItem;
+      let firstValidItem = null;
+      if (children) {
+        let isMetch = false;
+        for (let i = 0; i < children.length; i++) {
+          const item = children[i];
+          if (!firstValidItem) {
+            if (hasValidItem(item)) {
+              firstValidItem = item;
+            }
+          }
+          if (isMetch) {
+            if (hasValidItem(item)) {
+              return item;
+            }
+          } else {
+            isMetch = childItem === item;
+          }
+        }
+      }
+      return firstValidItem;
+    };
+    const handleGlobalMousewheelEvent = evnt => {
+      const {
+        visible
+      } = reactData;
+      if (visible) {
+        const el = refElem.value;
+        if (!getEventTargetNode(evnt, el, '').flag) {
+          close();
+        }
+      }
+    };
+    const handleGlobalKeydownEvent = evnt => {
+      const {
+        visible,
+        activeOption,
+        activeChildOption
+      } = reactData;
+      const allFirstMenuList = computeAllFirstMenuList.value;
+      if (visible) {
+        const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
+        const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
+        const isLeftArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_LEFT);
+        const isRightArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_RIGHT);
+        const isEnter = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ENTER);
+        const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
+        if (isEsc) {
+          close();
+          return;
+        }
+        // 回车选中
+        if (isEnter) {
+          if (activeOption || activeChildOption) {
+            evnt.preventDefault();
+            evnt.stopPropagation();
+            if (!activeChildOption && hasChildMenu(activeOption)) {
+              reactData.activeChildOption = findFirstChildItem(activeOption);
+              updateChildLocate();
+              return;
+            }
+            handleItemClickEvent(evnt, activeChildOption || activeOption);
+            return;
+          }
+        }
+        // 方向键操作
+        if (activeChildOption) {
+          if (isUpArrow) {
+            evnt.preventDefault();
+            reactData.activeChildOption = findPrevChildItem(activeOption, activeChildOption);
+            updateChildLocate();
+          } else if (isDwArrow) {
+            evnt.preventDefault();
+            reactData.activeChildOption = findNextChildItem(activeOption, activeChildOption);
+            updateChildLocate();
+          } else if (isLeftArrow) {
+            evnt.preventDefault();
+            reactData.activeChildOption = null;
+          }
+        } else if (activeOption) {
+          evnt.preventDefault();
+          if (isUpArrow) {
+            reactData.activeOption = findPrevFirstItem(allFirstMenuList, activeOption);
+          } else if (isDwArrow) {
+            reactData.activeOption = findNextFirstItem(allFirstMenuList, activeOption);
+          } else {
+            if (hasChildMenu(activeOption)) {
+              if (isRightArrow) {
+                reactData.activeChildOption = findFirstChildItem(activeOption);
+                updateChildLocate();
+              }
+            }
+          }
+        } else {
+          evnt.preventDefault();
+          reactData.activeOption = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().first(allFirstMenuList);
+        }
+      }
+    };
     const handleGlobalMousedownEvent = evnt => {
       const {
         visible
@@ -17634,6 +17913,14 @@ function context_menu_createReactData() {
         }
       }
     };
+    const handleGlobalBlurEvent = () => {
+      const {
+        visible
+      } = reactData;
+      if (visible) {
+        close();
+      }
+    };
     const tagPrivateMethods = {};
     Object.assign($xeContextMenu, tagMethods, tagPrivateMethods);
     const renderMenuItem = (item, parentItem, hasChildMenus) => {
@@ -17697,7 +17984,8 @@ function context_menu_createReactData() {
     const renderMenus = () => {
       const {
         activeOption,
-        activeChildOption
+        activeChildOption,
+        childOffsetX
       } = reactData;
       const menuGroups = computeMenuGroups.value;
       const mgVNs = [];
@@ -17708,13 +17996,19 @@ function context_menu_createReactData() {
             children
           } = firstItem;
           const hasChildMenus = children && children.some(child => child.visible !== false);
+          const isActiveFirst = activeOption === firstItem;
+          const showChild = isActiveFirst && !!activeChildOption;
           moVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
             key: `${gIndex}_${i}`,
             class: ['vxe-context-menu--item-wrapper vxe-context-menu--first-item', firstItem.className || '', {
-              'is--active': activeOption === firstItem
+              'is--active': isActiveFirst,
+              'is--subactive': isActiveFirst && !!activeChildOption
             }]
-          }, [hasChildMenus ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-            class: 'vxe-context-menu--children-wrapper'
+          }, [hasChildMenus && showChild ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            class: 'vxe-context-menu--children-wrapper',
+            style: {
+              transform: `translate(${childOffsetX}px, -5px)`
+            }
           }, children.map(twoItem => {
             return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
               class: ['vxe-context-menu--item-wrapper vxe-context-menu--child-item', twoItem.className || '', {
@@ -17738,13 +18032,12 @@ function context_menu_createReactData() {
       } = props;
       const {
         visible,
-        popupStyle,
-        childPos
+        popupStyle
       } = reactData;
       const vSize = computeSize.value;
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refElem,
-        class: ['vxe-context-menu vxe-context-menu--wrapper', position === 'absolute' ? 'is--' + position : 'is--fixed', `cp--${childPos === 'left' ? childPos : 'right'}`, className || '', {
+        class: ['vxe-context-menu vxe-context-menu--wrapper', position === 'absolute' ? 'is--' + position : 'is--fixed', className || '', {
           [`size--${vSize}`]: vSize,
           'is--visible': visible
         }],
@@ -17752,17 +18045,26 @@ function context_menu_createReactData() {
       }, (destroyOnClose ? visible : true) ? renderMenus() : []);
     };
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeTopAndLeft, () => {
-      updateLocate();
+      handleLocate();
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        updateLocate();
+      });
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, () => {
       handleVisible();
     });
     handleVisible();
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
+      globalEvents.on($xeContextMenu, 'mousewheel', handleGlobalMousewheelEvent);
+      globalEvents.on($xeContextMenu, 'keydown', handleGlobalKeydownEvent);
       globalEvents.on($xeContextMenu, 'mousedown', handleGlobalMousedownEvent);
+      globalEvents.on($xeContextMenu, 'blur', handleGlobalBlurEvent);
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
+      globalEvents.off($xeContextMenu, 'mousewheel');
+      globalEvents.off($xeContextMenu, 'keydown');
       globalEvents.off($xeContextMenu, 'mousedown');
+      globalEvents.off($xeContextMenu, 'blur');
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(reactData, context_menu_createReactData());
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(internalData, context_menu_createInternalData());
     });
@@ -17810,8 +18112,8 @@ const ContextMenuController = {
     evnt.preventDefault();
     evnt.stopPropagation();
     const opts = Object.assign({}, options);
-    const x = evnt.clientX;
-    const y = evnt.clientY;
+    const x = evnt.clientX + 1;
+    const y = evnt.clientY + 1;
     openMenu(opts, x, y);
   },
   close() {