vxe-pc-ui 4.11.32 → 4.11.34

package/packages/context-menu/src/context-menu.ts

@@ -1,7 +1,7 @@
 import { ref, h, reactive, PropType, computed, VNode, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { getConfig, getIcon, getI18n, createEvent, useSize, globalEvents, renderEmptyElement } from '../../ui'
+import { getConfig, getIcon, getI18n, createEvent, useSize, globalEvents, renderEmptyElement, GLOBAL_EVENT_KEYS } from '../../ui'
 import { getLastZIndex, nextSubZIndex, nextZIndex, getFuncText } from '../../ui/src/utils'
 import { getEventTargetNode, toCssUnit } from '../../ui/src/dom'
 import { getSlotVNs } from '../../ui/src/vn'
@@ -81,6 +81,21 @@ export default defineVxeComponent({
       return options || []
     })
 
+    const computeAllFirstMenuList = computed(() => {
+      const menuGroups: VxeContextMenuDefines.MenuFirstOption[] = 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 = computed(() => {
       const { x, y } = props
       return `${x}${y}`
@@ -179,7 +194,7 @@ export default defineVxeComponent({
       return children && children.some((child) => child.visible !== false)
     }
 
-    const handleItemClickEvent = (evnt: MouseEvent, item: VxeContextMenuDefines.MenuFirstOption | VxeContextMenuDefines.MenuChildOption) => {
+    const handleItemClickEvent = (evnt: MouseEvent | KeyboardEvent, item: VxeContextMenuDefines.MenuFirstOption | VxeContextMenuDefines.MenuChildOption) => {
       if (!hasChildMenu(item)) {
         dispatchEvent('option-click', { option: item }, evnt)
         close()
@@ -188,7 +203,17 @@ export default defineVxeComponent({
 
     const handleItemMouseenterEvent = (evnt: MouseEvent, item: VxeContextMenuDefines.MenuFirstOption | VxeContextMenuDefines.MenuChildOption, parentitem?: VxeContextMenuDefines.MenuFirstOption | null) => {
       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 = () => {
@@ -196,6 +221,178 @@ export default defineVxeComponent({
       reactData.activeChildOption = null
     }
 
+    const hasValidItem = (item: VxeContextMenuDefines.MenuFirstOption | VxeContextMenuDefines.MenuChildOption) => {
+      return !item.loading && !item.disabled && item.visible !== false
+    }
+
+    const findNextFirstItem = (allFirstList: VxeContextMenuDefines.MenuFirstOption[], firstItem: VxeContextMenuDefines.MenuFirstOption) => {
+      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 XEUtils.first(allFirstList)
+    }
+
+    const findPrevFirstItem = (allFirstList: VxeContextMenuDefines.MenuFirstOption[], firstItem: VxeContextMenuDefines.MenuFirstOption) => {
+      for (let i = 0; i < allFirstList.length; i++) {
+        const item = allFirstList[i]
+        if (firstItem === item) {
+          if (i > 0) {
+            return allFirstList[i - 1]
+          }
+        }
+      }
+      return XEUtils.last(allFirstList)
+    }
+
+    const findFirstChildItem = (firstItem: VxeContextMenuDefines.MenuFirstOption) => {
+      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: VxeContextMenuDefines.MenuFirstOption, childItem: VxeContextMenuDefines.MenuChildOption) => {
+      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: VxeContextMenuDefines.MenuFirstOption, childItem: VxeContextMenuDefines.MenuChildOption) => {
+      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: MouseEvent) => {
+      const { visible } = reactData
+      if (visible) {
+        const el = refElem.value
+        if (!getEventTargetNode(evnt, el, '').flag) {
+          close()
+        }
+      }
+    }
+
+    const handleGlobalKeydownEvent = (evnt: KeyboardEvent) => {
+      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 = XEUtils.first(allFirstMenuList)
+        }
+      }
+    }
+
     const handleGlobalMousedownEvent = (evnt: MouseEvent) => {
       const { visible } = reactData
       if (visible) {
@@ -206,6 +403,13 @@ export default defineVxeComponent({
       }
     }
 
+    const handleGlobalBlurEvent = () => {
+      const { visible } = reactData
+      if (visible) {
+        close()
+      }
+    }
+
     const tagPrivateMethods: ContextMenuPrivateMethods = {
     }
 
@@ -310,11 +514,13 @@ export default defineVxeComponent({
         menuList.forEach((firstItem, i) => {
           const { children } = firstItem
           const hasChildMenus = children && children.some((child) => child.visible !== false)
+          const isActiveFirst = activeOption === firstItem
           moVNs.push(
             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
@@ -369,11 +575,17 @@ export default defineVxeComponent({
     handleVisible()
 
     onMounted(() => {
+      globalEvents.on($xeContextMenu, 'mousewheel', handleGlobalMousewheelEvent)
+      globalEvents.on($xeContextMenu, 'keydown', handleGlobalKeydownEvent)
       globalEvents.on($xeContextMenu, 'mousedown', handleGlobalMousedownEvent)
+      globalEvents.on($xeContextMenu, 'blur', handleGlobalBlurEvent)
     })
 
     onBeforeUnmount(() => {
+      globalEvents.off($xeContextMenu, 'mousewheel')
+      globalEvents.off($xeContextMenu, 'keydown')
       globalEvents.off($xeContextMenu, 'mousedown')
+      globalEvents.off($xeContextMenu, 'blur')
       XEUtils.assign(reactData, createReactData())
       XEUtils.assign(internalData, createInternalData())
     })

package/packages/tree/src/tree.ts

@@ -1143,6 +1143,7 @@ export default defineVxeComponent({
       if (!lazy || !treeExpandLazyLoadedMaps[nodeid]) {
         handleBaseTreeExpand([node], expanded)
       }
+      dispatchEvent('node-expand', { node, expanded }, evnt)
     }
 
     const updateCheckboxStatus = () => {

package/styles/components/context-menu.scss

@@ -58,7 +58,7 @@
   }
 }
 .vxe-context-menu--first-item {
-  &.is--active {
+  &.is--subactive {
     .vxe-context-menu--children-wrapper {
       display: block;
     }

package/types/components/button-group.d.ts

@@ -74,7 +74,8 @@ export interface ButtonGroupPrivateMethods {
 export interface VxeButtonGroupPrivateMethods extends ButtonGroupPrivateMethods { }
 
 export type VxeButtonGroupEmits = [
-  'click'
+  'click',
+  'contextmenu'
 ]
 
 export namespace VxeButtonGroupDefines {
@@ -86,18 +87,25 @@ export namespace VxeButtonGroupDefines {
     name: VxeButtonPropTypes.Name
     option: VxeButtonProps & Record<string, any>
   }
+
+  export interface ContextmenuParams extends ButtonGroupEventParams {
+    $event: MouseEvent
+  }
 }
 
 export type VxeButtonGroupEventProps = {
   onClick?: VxeButtonGroupEvents.Click
+  onContextmenu?: VxeButtonGroupEvents.Contextmenu
 }
 
 export interface VxeButtonGroupListeners {
   click?: VxeButtonGroupEvents.Click
+  contextmenu?: VxeButtonGroupEvents.Contextmenu
 }
 
 export namespace VxeButtonGroupEvents {
   export type Click = (params: VxeButtonGroupDefines.ClickEventParams) => void
+  export type Contextmenu = (params: VxeButtonGroupDefines.ContextmenuParams) => void
 }
 
 export namespace VxeButtonGroupSlotTypes {

package/types/components/button.d.ts

@@ -213,7 +213,8 @@ export type VxeButtonEmits = [
   'mouseenter',
   'mouseleave',
   'dropdown-click',
-  'dropdownClick'
+  'dropdownClick',
+  'contextmenu'
 ]
 
 export namespace VxeButtonDefines {
@@ -239,6 +240,10 @@ export namespace VxeButtonDefines {
     option: VxeButtonDefines.DownButtonOption | null
   }
   export interface DropdownClickEventParams extends ButtonEventParams, DropdownClickParams { }
+
+  export interface ContextmenuParams extends ButtonEventParams {
+    $event: MouseEvent
+  }
 }
 
 export type VxeButtonEventProps = {
@@ -246,6 +251,7 @@ export type VxeButtonEventProps = {
   onMouseenter?: VxeButtonEvents.Mouseenter
   onMouseleave?: VxeButtonEvents.Mouseleave
   onDropdownClick?: VxeButtonEvents.DropdownClick
+  onContextmenu?: VxeButtonEvents.Contextmenu
 }
 
 export interface VxeButtonListeners {
@@ -253,6 +259,7 @@ export interface VxeButtonListeners {
   mouseenter?: VxeButtonEvents.Mouseenter
   mouseleave?: VxeButtonEvents.Mouseleave
   dropdownClick?: VxeButtonEvents.DropdownClick
+  contextmenu?: VxeButtonEvents.Contextmenu
 }
 
 export namespace VxeButtonEvents {
@@ -260,6 +267,7 @@ export namespace VxeButtonEvents {
   export type Mouseenter = (params: VxeButtonDefines.MouseenterEventParams) => void
   export type Mouseleave = (params: VxeButtonDefines.MouseleaveEventParams) => void
   export type DropdownClick = (params: VxeButtonDefines.DropdownClickParams) => void
+  export type Contextmenu = (params: VxeButtonDefines.ContextmenuParams) => void
 }
 
 export namespace VxeButtonSlotTypes {