vxe-pc-ui 4.11.33 → 4.11.35

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

@@ -1,9 +1,9 @@
 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 { getDomNode, getEventTargetNode, toCssUnit } from '../../ui/src/dom'
 import { getSlotVNs } from '../../ui/src/vn'
 
 import type { ContextMenuInternalData, ContextMenuReactData, VxeContextMenuPropTypes, VxeContextMenuDefines, ContextMenuPrivateRef, VxeContextMenuEmits, VxeContextMenuPrivateComputed, ContextMenuMethods, ContextMenuPrivateMethods, VxeContextMenuConstructor, VxeContextMenuPrivateMethods, ValueOf } from '../../../types'
@@ -23,7 +23,7 @@ function createReactData (): ContextMenuReactData {
       left: '',
       zIndex: 0
     },
-    childPos: ''
+    childOffsetX: 0
   }
 }
 
@@ -39,6 +39,10 @@ export default defineVxeComponent({
     options: Array as PropType<VxeContextMenuPropTypes.Options>,
     x: [Number, String] as PropType<VxeContextMenuPropTypes.X>,
     y: [Number, String] as PropType<VxeContextMenuPropTypes.Y>,
+    autoLocate: {
+      type: Boolean as PropType<VxeContextMenuPropTypes.AutoLocate>,
+      default: () => getConfig().contextMenu.autoLocate
+    },
     zIndex: [Number, String] as PropType<VxeContextMenuPropTypes.ZIndex>,
     position: {
       type: String as PropType<VxeContextMenuPropTypes.Position>,
@@ -81,6 +85,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}`
@@ -112,7 +131,7 @@ export default defineVxeComponent({
       const { visible } = reactData
       const value = true
       reactData.visible = value
-      updateLocate()
+      handleLocate()
       updateZindex()
       if (modelValue !== value) {
         emitModel(value)
@@ -121,7 +140,9 @@ export default defineVxeComponent({
       if (visible !== value) {
         dispatchEvent('show', { visible: value }, null)
       }
-      return nextTick()
+      return nextTick().then(() => {
+        updateLocate()
+      })
     }
 
     const close = () => {
@@ -139,11 +160,12 @@ export default defineVxeComponent({
       return nextTick()
     }
 
-    const updateLocate = () => {
+    const handleLocate = () => {
       const { x, y } = props
       const { popupStyle } = reactData
       popupStyle.left = toCssUnit(x || 0)
       popupStyle.top = toCssUnit(y || 0)
+      updateLocate()
     }
 
     const updateZindex = () => {
@@ -159,6 +181,60 @@ export default defineVxeComponent({
       }
     }
 
+    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 = XEUtils.toNumber(wrapperStyle.top)
+          const offsetLeft = XEUtils.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 = XEUtils.toNumber(wrapperStyle.left)
+          const wrapperWidth = wrapperEl.offsetWidth
+          const childEl = wrapperEl.querySelector<HTMLDivElement>('.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()
+        nextTick(() => {
+          handleStyle()
+        })
+      }
+    }
+
     const handleVisible = () => {
       const { modelValue } = props
       if (modelValue) {
@@ -179,7 +255,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 +264,20 @@ 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)
+          nextTick(() => {
+            updateChildLocate()
+          })
+        } else {
+          reactData.activeChildOption = null
+        }
+      }
     }
 
     const handleItemMouseleaveEvent = () => {
@@ -196,6 +285,170 @@ 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, 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 = XEUtils.first(allFirstMenuList)
+        }
+      }
+    }
+
     const handleGlobalMousedownEvent = (evnt: MouseEvent) => {
       const { visible } = reactData
       if (visible) {
@@ -206,6 +459,13 @@ export default defineVxeComponent({
       }
     }
 
+    const handleGlobalBlurEvent = () => {
+      const { visible } = reactData
+      if (visible) {
+        close()
+      }
+    }
+
     const tagPrivateMethods: ContextMenuPrivateMethods = {
     }
 
@@ -302,7 +562,7 @@ export default defineVxeComponent({
     }
 
     const renderMenus = () => {
-      const { activeOption, activeChildOption } = reactData
+      const { activeOption, activeChildOption, childOffsetX } = reactData
       const menuGroups = computeMenuGroups.value
       const mgVNs: VNode[] = []
       menuGroups.forEach((menuList, gIndex) => {
@@ -310,16 +570,22 @@ export default defineVxeComponent({
         menuList.forEach((firstItem, i) => {
           const { children } = firstItem
           const hasChildMenus = children && children.some((child) => child.visible !== false)
+          const isActiveFirst = activeOption === firstItem
+          const showChild = isActiveFirst && !!activeChildOption
           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
+              hasChildMenus && showChild
                 ? h('div', {
-                  class: 'vxe-context-menu--children-wrapper'
+                  class: 'vxe-context-menu--children-wrapper',
+                  style: {
+                    transform: `translate(${childOffsetX}px, -5px)`
+                  }
                 }, children.map(twoItem => {
                   return h('div', {
                     class: ['vxe-context-menu--item-wrapper vxe-context-menu--child-item', twoItem.className || '', {
@@ -346,11 +612,11 @@ export default defineVxeComponent({
 
     const renderVN = () => {
       const { className, position, destroyOnClose } = props
-      const { visible, popupStyle, childPos } = reactData
+      const { visible, popupStyle } = reactData
       const vSize = computeSize.value
       return 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
         }],
@@ -359,7 +625,10 @@ export default defineVxeComponent({
     }
 
     watch(computeTopAndLeft, () => {
-      updateLocate()
+      handleLocate()
+      nextTick(() => {
+        updateLocate()
+      })
     })
 
     watch(() => props.modelValue, () => {
@@ -369,11 +638,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/dynamics/index.ts

@@ -54,7 +54,7 @@ const VxeDynamics = defineVxeComponent({
               optionClick(params)
             }
           }
-        })
+        }, { events: undefined })
       }
       return [
         modals.length

package/packages/ui/index.ts

@@ -80,7 +80,9 @@ setConfig({
     }
   },
   collapsePane: {},
-  contextMenu: {},
+  contextMenu: {
+    autoLocate: true
+  },
   countdown: {},
   colorPicker: {
     type: 'rgb',

package/styles/components/context-menu.scss

@@ -12,16 +12,6 @@
   &.is--absolute {
     position: absolute;
   }
-  &.cp--left {
-    .vxe-context-menu--children-wrapper {
-      left: calc(-100% + 2px);
-    }
-  }
-  &.cp--right {
-    .vxe-context-menu--children-wrapper {
-      left: calc(100% - 2px);
-    }
-  }
 }
 
 .vxe-context-menu--group-wrapper {
@@ -45,7 +35,7 @@
 .vxe-context-menu--children-wrapper {
   display: none;
   position: absolute;
-  transform: translateY(-5px);
+  transform: translate(0, -5px);
 }
 
 .vxe-context-menu--item-wrapper {
@@ -58,7 +48,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 {

package/types/components/context-menu.d.ts

@@ -31,6 +31,7 @@ export namespace VxeContextMenuPropTypes {
   export type Size = VxeComponentSizeType
   export type Options = VxeContextMenuDefines.MenuFirstOption[][]
   export type Position = null | '' | 'absolute' | 'fixed'
+  export type AutoLocate = boolean
   export type ZIndex = string | number
   export type DestroyOnClose = boolean
   export type Transfer = boolean
@@ -44,6 +45,7 @@ export type VxeContextMenuProps = {
   size?: VxeContextMenuPropTypes.Size
   options?: VxeContextMenuPropTypes.Options
   position?: VxeContextMenuPropTypes.Position
+  autoLocate?: VxeContextMenuPropTypes.AutoLocate
   zIndex?: VxeContextMenuPropTypes.ZIndex
   destroyOnClose?: VxeContextMenuPropTypes.DestroyOnClose
   transfer?: VxeContextMenuPropTypes.Transfer
@@ -65,7 +67,7 @@ export interface ContextMenuReactData {
     left: string
     zIndex: number
   }
-  childPos: '' | 'left' | 'right'
+  childOffsetX: number
 }
 
 export interface ContextMenuMethods {

package/types/components/table-module/filter.d.ts

@@ -96,6 +96,10 @@ export interface TableFilterPrivateMethods<D = any> {
    * @private
    */
   triggerFilterEvent(evnt: any, column: any, params: any): void
+  /**
+   * @private
+   */
+  handleOpenFilterColumn(evnt: any, btnEl: HTMLElement | null, cellEl: HTMLElement, column: any, params: any): void
   /**
    * @private
    */