vxe-pc-ui 4.11.33 → 4.11.34

package/lib/index.umd.js

@@ -3659,14 +3659,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.34"}`;
 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.34";
 index_esm_VxeUI.uiVersion = ui_version;
 index_esm_VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -7335,7 +7335,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 +7613,9 @@ const VxeButtonComponent = defineVxeComponent({
     const mouseleaveEvent = evnt => {
       dispatchEvent('mouseleave', {}, evnt);
     };
+    const contextmenuEvent = evnt => {
+      dispatchEvent('contextmenu', {}, evnt);
+    };
     const clickTargetEvent = evnt => {
       const {
         loading,
@@ -7849,7 +7852,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 +7982,8 @@ const VxeButtonComponent = defineVxeComponent({
           to: routerLink,
           onClick: clickEvent,
           onMouseenter: mouseenterEvent,
-          onMouseleave: mouseleaveEvent
+          onMouseleave: mouseleaveEvent,
+          onContextmenu: contextmenuEvent
         }, {
           default() {
             return renderContent();
@@ -8002,7 +8008,8 @@ const VxeButtonComponent = defineVxeComponent({
         disabled: btnDisabled || loading,
         onClick: clickEvent,
         onMouseenter: mouseenterEvent,
-        onMouseleave: mouseleaveEvent
+        onMouseleave: mouseleaveEvent,
+        onContextmenu: contextmenuEvent
       }, renderContent());
     };
     $xeButton.renderVN = renderVN;
@@ -8063,7 +8070,7 @@ const Button = VxeButton;
       default: () => getConfig().buttonGroup.size || getConfig().size
     }
   },
-  emits: ['click'],
+  emits: ['click', 'contextmenu'],
   setup(props, context) {
     const {
       slots,
@@ -8083,12 +8090,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 +8113,9 @@ const Button = VxeButton;
         }, evnt);
       }
     };
+    const contextmenuEvent = evnt => {
+      dispatchEvent('contextmenu', {}, evnt);
+    };
     Object.assign($xeButtonGroup, buttonGroupMethods, buttonGroupPrivateMethods);
     const renderVN = () => {
       const {
@@ -8122,7 +8133,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,
@@ -17488,6 +17500,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,
@@ -17617,12 +17643,199 @@ 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);
+        } 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,
+        childPos,
+        activeOption,
+        activeChildOption
+      } = reactData;
+      const allFirstMenuList = computeAllFirstMenuList.value;
+      if (visible) {
+        const isLeftArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_LEFT);
+        const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
+        const isRightArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_RIGHT);
+        const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
+        const isEnter = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ENTER);
+        // 回车选中
+        if (isEnter) {
+          if (activeOption || activeChildOption) {
+            evnt.preventDefault();
+            evnt.stopPropagation();
+            if (!activeChildOption && hasChildMenu(activeOption)) {
+              reactData.activeChildOption = findFirstChildItem(activeOption);
+              return;
+            }
+            handleItemClickEvent(evnt, activeChildOption || activeOption);
+            return;
+          }
+        }
+        // 方向键操作
+        if (activeChildOption) {
+          if (isUpArrow) {
+            evnt.preventDefault();
+            reactData.activeChildOption = findPrevChildItem(activeOption, activeChildOption);
+          } else if (isDwArrow) {
+            evnt.preventDefault();
+            reactData.activeChildOption = findNextChildItem(activeOption, activeChildOption);
+          } else if (isLeftArrow) {
+            evnt.preventDefault();
+            if (childPos === 'left') {
+              // 无操作
+            } else {
+              reactData.activeChildOption = null;
+            }
+          } else if (isRightArrow) {
+            evnt.preventDefault();
+            if (childPos === 'left') {
+              reactData.activeChildOption = null;
+            } else {
+              // 无操作
+            }
+          }
+        } 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 (childPos === 'left') {
+                if (isLeftArrow) {
+                  reactData.activeChildOption = findFirstChildItem(activeOption);
+                }
+              } else {
+                if (isRightArrow) {
+                  reactData.activeChildOption = findFirstChildItem(activeOption);
+                }
+              }
+            }
+          }
+        } 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 +17847,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) => {
@@ -17708,10 +17929,12 @@ function context_menu_createReactData() {
             children
           } = firstItem;
           const hasChildMenus = children && children.some(child => child.visible !== false);
+          const isActiveFirst = activeOption === firstItem;
           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'
@@ -17759,10 +17982,16 @@ function context_menu_createReactData() {
     });
     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());
     });