vxe-pc-ui 4.11.29 → 4.11.31

package/lib/vxe-segmented/style/style.css

@@ -40,10 +40,11 @@
 
 .vxe-segmented--content {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
+  padding: 0.4em 0;
   transition: color 0.3s;
 }
 
@@ -74,7 +75,8 @@
   border-radius: 1em;
 }
 .vxe-segmented.type--default .vxe-segmented--content, .vxe-segmented.type--round .vxe-segmented--content {
-  min-height: 2em;
+  min-height: 2.2em;
+  height: 100%;
 }
 .vxe-segmented.type--default .vxe-segmented--item:hover, .vxe-segmented.type--round .vxe-segmented--item:hover {
   background-color: var(--vxe-ui-segmented-item-hover-background-color);
@@ -146,7 +148,7 @@
   border-radius: var(--vxe-ui-base-border-radius);
 }
 .vxe-segmented.type--inside .vxe-segmented--content {
-  min-height: 1.6em;
+  min-height: 1.8em;
 }
 .vxe-segmented.type--inside .vxe-segmented--inner {
   padding: 0.2em;

package/lib/vxe-segmented/style/style.min.css

@@ -1 +1 @@
-.vxe-segmented{display:block;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-segmented--group{display:inline-flex;position:relative;background-color:var(--vxe-ui-segmented-item-background-color)}.vxe-segmented--inner{width:100%;position:relative;display:flex;flex-direction:row;white-space:nowrap}.vxe-segmented--item{display:block;padding:0 .8em;margin:0}.vxe-segmented--item:not(.is--disabled){cursor:pointer}.vxe-segmented--input{position:absolute;width:0;height:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none}.vxe-segmented--content{display:flex;flex-direction:row;align-items:center;justify-content:center;text-align:center;transition:color .3s}.vxe-segmented--label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-segmented--selected{display:none;position:absolute;top:0;left:0;width:0;height:100%;transition:all .3s;pointer-events:none}.vxe-segmented.type--round .vxe-segmented--group{border-radius:1em}.vxe-segmented.type--round .vxe-segmented--selected{border-radius:1em}.vxe-segmented.type--round .vxe-segmented--item:hover{border-radius:1em}.vxe-segmented.type--default .vxe-segmented--content,.vxe-segmented.type--round .vxe-segmented--content{min-height:2em}.vxe-segmented.type--default .vxe-segmented--item:hover,.vxe-segmented.type--round .vxe-segmented--item:hover{background-color:var(--vxe-ui-segmented-item-hover-background-color)}.vxe-segmented.type--default .vxe-segmented--item.is--checked .vxe-segmented--content,.vxe-segmented.type--round .vxe-segmented--item.is--checked .vxe-segmented--content{color:#fff}.vxe-segmented.type--default .vxe-segmented--selected,.vxe-segmented.type--round .vxe-segmented--selected{background-color:var(--vxe-ui-font-primary-color)}.vxe-segmented.type--default.theme--primary .vxe-segmented--group,.vxe-segmented.type--round.theme--primary .vxe-segmented--group{background-color:var(--vxe-ui-font-primary-tinge-color)}.vxe-segmented.type--default.theme--primary .vxe-segmented--selected,.vxe-segmented.type--round.theme--primary .vxe-segmented--selected{background-color:var(--vxe-ui-font-primary-color)}.vxe-segmented.type--default.theme--primary .vxe-segmented--item.is--checked,.vxe-segmented.type--round.theme--primary .vxe-segmented--item.is--checked{color:#fff}.vxe-segmented.type--default.theme--success .vxe-segmented--group,.vxe-segmented.type--round.theme--success .vxe-segmented--group{background-color:var(--vxe-ui-status-success-tinge-color)}.vxe-segmented.type--default.theme--success .vxe-segmented--selected,.vxe-segmented.type--round.theme--success .vxe-segmented--selected{background-color:var(--vxe-ui-status-success-color)}.vxe-segmented.type--default.theme--success .vxe-segmented--item.is--checked,.vxe-segmented.type--round.theme--success .vxe-segmented--item.is--checked{color:#fff}.vxe-segmented.type--default.theme--info .vxe-segmented--group,.vxe-segmented.type--round.theme--info .vxe-segmented--group{background-color:var(--vxe-ui-status-info-tinge-color)}.vxe-segmented.type--default.theme--info .vxe-segmented--selected,.vxe-segmented.type--round.theme--info .vxe-segmented--selected{background-color:var(--vxe-ui-status-info-color)}.vxe-segmented.type--default.theme--info .vxe-segmented--item.is--checked,.vxe-segmented.type--round.theme--info .vxe-segmented--item.is--checked{color:#fff}.vxe-segmented.type--default.theme--warning .vxe-segmented--group,.vxe-segmented.type--round.theme--warning .vxe-segmented--group{background-color:var(--vxe-ui-status-warning-tinge-color)}.vxe-segmented.type--default.theme--warning .vxe-segmented--selected,.vxe-segmented.type--round.theme--warning .vxe-segmented--selected{background-color:var(--vxe-ui-status-warning-color)}.vxe-segmented.type--default.theme--warning .vxe-segmented--item.is--checked,.vxe-segmented.type--round.theme--warning .vxe-segmented--item.is--checked{color:#fff}.vxe-segmented.type--default.theme--danger .vxe-segmented--group,.vxe-segmented.type--round.theme--danger .vxe-segmented--group{background-color:var(--vxe-ui-status-danger-tinge-color)}.vxe-segmented.type--default.theme--danger .vxe-segmented--selected,.vxe-segmented.type--round.theme--danger .vxe-segmented--selected{background-color:var(--vxe-ui-status-danger-color)}.vxe-segmented.type--default.theme--danger .vxe-segmented--item.is--checked,.vxe-segmented.type--round.theme--danger .vxe-segmented--item.is--checked{color:#fff}.vxe-segmented.type--default.theme--error .vxe-segmented--group,.vxe-segmented.type--round.theme--error .vxe-segmented--group{background-color:var(--vxe-ui-status-error-tinge-color)}.vxe-segmented.type--default.theme--error .vxe-segmented--selected,.vxe-segmented.type--round.theme--error .vxe-segmented--selected{background-color:var(--vxe-ui-status-error-color)}.vxe-segmented.type--default.theme--error .vxe-segmented--item.is--checked,.vxe-segmented.type--round.theme--error .vxe-segmented--item.is--checked{color:#fff}.vxe-segmented.type--default .vxe-segmented--group,.vxe-segmented.type--inside .vxe-segmented--group{border-radius:var(--vxe-ui-base-border-radius)}.vxe-segmented.type--default .vxe-segmented--selected,.vxe-segmented.type--inside .vxe-segmented--selected{border-radius:var(--vxe-ui-base-border-radius)}.vxe-segmented.type--inside .vxe-segmented--content{min-height:1.6em}.vxe-segmented.type--inside .vxe-segmented--inner{padding:.2em}.vxe-segmented.type--inside .vxe-segmented--item:hover .vxe-segmented--content{color:var(--vxe-ui-font-primary-color)}.vxe-segmented.type--inside .vxe-segmented--item.is--checked .vxe-segmented--content{color:var(--vxe-ui-font-primary-color)}.vxe-segmented.type--inside .vxe-segmented--selected{top:.2em;height:calc(100% - .4em);background-color:#fff}.vxe-segmented.type--inside.theme--primary .vxe-segmented--item.is--checked{color:var(--vxe-ui-font-primary-tinge-color)}.vxe-segmented.type--inside.theme--success .vxe-segmented--item.is--checked{color:var(--vxe-ui-status-success-tinge-color)}.vxe-segmented.type--inside.theme--info .vxe-segmented--item.is--checked{color:var(--vxe-ui-status-info-tinge-color)}.vxe-segmented.type--inside.theme--warning .vxe-segmented--item.is--checked{color:var(--vxe-ui-status-warning-tinge-color)}.vxe-segmented.type--inside.theme--danger .vxe-segmented--item.is--checked{color:var(--vxe-ui-status-danger-tinge-color)}.vxe-segmented.type--inside.theme--error .vxe-segmented--item.is--checked{color:var(--vxe-ui-status-error-tinge-color)}.vxe-segmented{font-size:var(--vxe-ui-font-size-default)}.vxe-segmented.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-segmented.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-segmented.size--mini{font-size:var(--vxe-ui-font-size-mini)}
+.vxe-segmented{display:block;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-segmented--group{display:inline-flex;position:relative;background-color:var(--vxe-ui-segmented-item-background-color)}.vxe-segmented--inner{width:100%;position:relative;display:flex;flex-direction:row;white-space:nowrap}.vxe-segmented--item{display:block;padding:0 .8em;margin:0}.vxe-segmented--item:not(.is--disabled){cursor:pointer}.vxe-segmented--input{position:absolute;width:0;height:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none}.vxe-segmented--content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:.4em 0;transition:color .3s}.vxe-segmented--label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-segmented--selected{display:none;position:absolute;top:0;left:0;width:0;height:100%;transition:all .3s;pointer-events:none}.vxe-segmented.type--round .vxe-segmented--group{border-radius:1em}.vxe-segmented.type--round .vxe-segmented--selected{border-radius:1em}.vxe-segmented.type--round .vxe-segmented--item:hover{border-radius:1em}.vxe-segmented.type--default .vxe-segmented--content,.vxe-segmented.type--round .vxe-segmented--content{min-height:2.2em;height:100%}.vxe-segmented.type--default .vxe-segmented--item:hover,.vxe-segmented.type--round .vxe-segmented--item:hover{background-color:var(--vxe-ui-segmented-item-hover-background-color)}.vxe-segmented.type--default .vxe-segmented--item.is--checked .vxe-segmented--content,.vxe-segmented.type--round .vxe-segmented--item.is--checked .vxe-segmented--content{color:#fff}.vxe-segmented.type--default .vxe-segmented--selected,.vxe-segmented.type--round .vxe-segmented--selected{background-color:var(--vxe-ui-font-primary-color)}.vxe-segmented.type--default.theme--primary .vxe-segmented--group,.vxe-segmented.type--round.theme--primary .vxe-segmented--group{background-color:var(--vxe-ui-font-primary-tinge-color)}.vxe-segmented.type--default.theme--primary .vxe-segmented--selected,.vxe-segmented.type--round.theme--primary .vxe-segmented--selected{background-color:var(--vxe-ui-font-primary-color)}.vxe-segmented.type--default.theme--primary .vxe-segmented--item.is--checked,.vxe-segmented.type--round.theme--primary .vxe-segmented--item.is--checked{color:#fff}.vxe-segmented.type--default.theme--success .vxe-segmented--group,.vxe-segmented.type--round.theme--success .vxe-segmented--group{background-color:var(--vxe-ui-status-success-tinge-color)}.vxe-segmented.type--default.theme--success .vxe-segmented--selected,.vxe-segmented.type--round.theme--success .vxe-segmented--selected{background-color:var(--vxe-ui-status-success-color)}.vxe-segmented.type--default.theme--success .vxe-segmented--item.is--checked,.vxe-segmented.type--round.theme--success .vxe-segmented--item.is--checked{color:#fff}.vxe-segmented.type--default.theme--info .vxe-segmented--group,.vxe-segmented.type--round.theme--info .vxe-segmented--group{background-color:var(--vxe-ui-status-info-tinge-color)}.vxe-segmented.type--default.theme--info .vxe-segmented--selected,.vxe-segmented.type--round.theme--info .vxe-segmented--selected{background-color:var(--vxe-ui-status-info-color)}.vxe-segmented.type--default.theme--info .vxe-segmented--item.is--checked,.vxe-segmented.type--round.theme--info .vxe-segmented--item.is--checked{color:#fff}.vxe-segmented.type--default.theme--warning .vxe-segmented--group,.vxe-segmented.type--round.theme--warning .vxe-segmented--group{background-color:var(--vxe-ui-status-warning-tinge-color)}.vxe-segmented.type--default.theme--warning .vxe-segmented--selected,.vxe-segmented.type--round.theme--warning .vxe-segmented--selected{background-color:var(--vxe-ui-status-warning-color)}.vxe-segmented.type--default.theme--warning .vxe-segmented--item.is--checked,.vxe-segmented.type--round.theme--warning .vxe-segmented--item.is--checked{color:#fff}.vxe-segmented.type--default.theme--danger .vxe-segmented--group,.vxe-segmented.type--round.theme--danger .vxe-segmented--group{background-color:var(--vxe-ui-status-danger-tinge-color)}.vxe-segmented.type--default.theme--danger .vxe-segmented--selected,.vxe-segmented.type--round.theme--danger .vxe-segmented--selected{background-color:var(--vxe-ui-status-danger-color)}.vxe-segmented.type--default.theme--danger .vxe-segmented--item.is--checked,.vxe-segmented.type--round.theme--danger .vxe-segmented--item.is--checked{color:#fff}.vxe-segmented.type--default.theme--error .vxe-segmented--group,.vxe-segmented.type--round.theme--error .vxe-segmented--group{background-color:var(--vxe-ui-status-error-tinge-color)}.vxe-segmented.type--default.theme--error .vxe-segmented--selected,.vxe-segmented.type--round.theme--error .vxe-segmented--selected{background-color:var(--vxe-ui-status-error-color)}.vxe-segmented.type--default.theme--error .vxe-segmented--item.is--checked,.vxe-segmented.type--round.theme--error .vxe-segmented--item.is--checked{color:#fff}.vxe-segmented.type--default .vxe-segmented--group,.vxe-segmented.type--inside .vxe-segmented--group{border-radius:var(--vxe-ui-base-border-radius)}.vxe-segmented.type--default .vxe-segmented--selected,.vxe-segmented.type--inside .vxe-segmented--selected{border-radius:var(--vxe-ui-base-border-radius)}.vxe-segmented.type--inside .vxe-segmented--content{min-height:1.8em}.vxe-segmented.type--inside .vxe-segmented--inner{padding:.2em}.vxe-segmented.type--inside .vxe-segmented--item:hover .vxe-segmented--content{color:var(--vxe-ui-font-primary-color)}.vxe-segmented.type--inside .vxe-segmented--item.is--checked .vxe-segmented--content{color:var(--vxe-ui-font-primary-color)}.vxe-segmented.type--inside .vxe-segmented--selected{top:.2em;height:calc(100% - .4em);background-color:#fff}.vxe-segmented.type--inside.theme--primary .vxe-segmented--item.is--checked{color:var(--vxe-ui-font-primary-tinge-color)}.vxe-segmented.type--inside.theme--success .vxe-segmented--item.is--checked{color:var(--vxe-ui-status-success-tinge-color)}.vxe-segmented.type--inside.theme--info .vxe-segmented--item.is--checked{color:var(--vxe-ui-status-info-tinge-color)}.vxe-segmented.type--inside.theme--warning .vxe-segmented--item.is--checked{color:var(--vxe-ui-status-warning-tinge-color)}.vxe-segmented.type--inside.theme--danger .vxe-segmented--item.is--checked{color:var(--vxe-ui-status-danger-tinge-color)}.vxe-segmented.type--inside.theme--error .vxe-segmented--item.is--checked{color:var(--vxe-ui-status-error-tinge-color)}.vxe-segmented{font-size:var(--vxe-ui-font-size-default)}.vxe-segmented.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-segmented.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-segmented.size--mini{font-size:var(--vxe-ui-font-size-mini)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.11.29",
+  "version": "4.11.31",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

package/packages/backtop/src/backtop.ts

@@ -1,4 +1,4 @@
-import { ref, h, reactive, PropType, watch, onMounted, nextTick, computed, onBeforeUnmount, onUnmounted } from 'vue'
+import { ref, h, reactive, PropType, watch, onMounted, nextTick, computed, onBeforeUnmount } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, getIcon, createEvent, useSize, renderEmptyElement } from '../../ui'
@@ -248,9 +248,6 @@ export default defineVxeComponent({
     onBeforeUnmount(() => {
       removeScrollEvent()
       XEUtils.assign(reactData, createReactData())
-    })
-
-    onUnmounted(() => {
       XEUtils.assign(internalData, createInternalData())
     })
 

package/packages/button/src/button.ts

@@ -8,7 +8,7 @@ import { getSlotVNs } from '../../ui/src/vn'
 import { warnLog } from '../../ui/src/log'
 import VxeTooltipComponent from '../../tooltip/src/tooltip'
 
-import type { VxeButtonConstructor, VxeButtonPropTypes, VxeButtonEmits, ButtonReactData, ButtonMethods, VxeButtonDefines, ButtonPrivateRef, ButtonInternalData, VxeButtonGroupConstructor, VxeButtonGroupPrivateMethods, VxeDrawerConstructor, VxeDrawerMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, ValueOf } from '../../../types'
+import type { VxeButtonConstructor, VxeButtonPropTypes, VxeButtonEmits, ButtonReactData, ButtonMethods, VxeButtonDefines, ButtonPrivateRef, ButtonInternalData, VxeButtonGroupConstructor, VxeButtonGroupPrivateMethods, VxeDrawerConstructor, VxeDrawerMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, ValueOf, VxeTreeConstructor, VxeTreePrivateMethods } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
 
 const VxeButtonComponent = defineVxeComponent({
@@ -93,6 +93,10 @@ const VxeButtonComponent = defineVxeComponent({
     prefixTooltip: Object as PropType<VxeButtonPropTypes.PrefixTooltip>,
     suffixTooltip: Object as PropType<VxeButtonPropTypes.SuffixTooltip>,
     options: Array as PropType<VxeButtonPropTypes.Options>,
+    showDropdownIcon: {
+      type: Boolean,
+      default: () => getConfig().button.showDropdownIcon
+    },
     /**
      * 在下拉面板关闭时销毁内容
      */
@@ -121,6 +125,7 @@ const VxeButtonComponent = defineVxeComponent({
     const $xeModal = inject<(VxeModalConstructor & VxeModalMethods)| null>('$xeModal', null)
     const $xeDrawer = inject<(VxeDrawerConstructor & VxeDrawerMethods) | null>('$xeDrawer', null)
     const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null)
+    const $xeTree = inject<(VxeTreeConstructor & VxeTreePrivateMethods) | null>('$xeTree', null)
     const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods)| null>('$xeForm', null)
     const $xeButtonGroup = inject<(VxeButtonGroupConstructor & VxeButtonGroupPrivateMethods) | null>('$xeButtonGroup', null)
 
@@ -171,7 +176,7 @@ const VxeButtonComponent = defineVxeComponent({
         if (XEUtils.isBoolean(globalTransfer)) {
           return globalTransfer
         }
-        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+        if ($xeTable || $xeTree || $xeModal || $xeDrawer || $xeForm) {
           return true
         }
       }
@@ -592,7 +597,7 @@ const VxeButtonComponent = defineVxeComponent({
     Object.assign($xeButton, buttonMethods)
 
     const renderVN = () => {
-      const { className, popupClassName, trigger, title, routerLink, type, destroyOnClose, name, loading } = props
+      const { className, popupClassName, trigger, title, routerLink, type, destroyOnClose, name, loading, showDropdownIcon } = props
       const { initialized, isAniVisible, visiblePanel } = reactData
       const isFormBtn = computeIsFormBtn.value
       const btnMode = computeBtnMode.value
@@ -648,11 +653,13 @@ const VxeButtonComponent = defineVxeComponent({
               ...btnOns
             }, {
               default () {
-                return renderContent().concat([
-                  h('i', {
-                    class: `vxe-button--dropdown-arrow ${getIcon().BUTTON_DROPDOWN}`
-                  })
-                ])
+                return renderContent().concat(showDropdownIcon
+                  ? [
+                      h('i', {
+                        class: `vxe-button--dropdown-arrow ${getIcon().BUTTON_DROPDOWN}`
+                      })
+                    ]
+                  : [])
               }
             })
             : h('button', {
@@ -671,11 +678,13 @@ const VxeButtonComponent = defineVxeComponent({
               disabled: btnDisabled || loading,
               onClick: clickTargetEvent,
               ...btnOns
-            }, renderContent().concat([
-              h('i', {
-                class: `vxe-button--dropdown-arrow ${getIcon().BUTTON_DROPDOWN}`
-              })
-            ])),
+            }, renderContent().concat(showDropdownIcon
+              ? [
+                  h('i', {
+                    class: `vxe-button--dropdown-arrow ${getIcon().BUTTON_DROPDOWN}`
+                  })
+                ]
+              : [])),
           h(Teleport, {
             to: 'body',
             disabled: btnTransfer ? !initialized : true

package/packages/components.ts

@@ -25,6 +25,7 @@ import VxeCol from './col'
 import VxeCollapse from './collapse'
 import VxeCollapsePane from './collapse-pane'
 import VxeColorPicker from './color-picker'
+import VxeContextMenu from './context-menu'
 import VxeCountdown from './countdown'
 import VxeDatePanel from './date-panel'
 import VxeDatePicker from './date-picker'
@@ -122,6 +123,7 @@ const components = [
   VxeCollapse,
   VxeCollapsePane,
   VxeColorPicker,
+  VxeContextMenu,
   VxeCountdown,
   VxeDatePanel,
   VxeDatePicker,
@@ -236,6 +238,7 @@ export * from './col'
 export * from './collapse'
 export * from './collapse-pane'
 export * from './color-picker'
+export * from './context-menu'
 export * from './countdown'
 export * from './date-panel'
 export * from './date-picker'

package/packages/context-menu/index.ts

@@ -0,0 +1,54 @@
+import { App } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeContextMenuComponent from './src/context-menu'
+import { dynamicApp, dynamicStore, checkDynamic } from '../dynamics'
+
+import type { VxeContextMenuDefines } from '../../types'
+
+export const VxeContextMenu = Object.assign({}, VxeContextMenuComponent, {
+  install (app: App) {
+    app.component(VxeContextMenuComponent.name as string, VxeContextMenuComponent)
+  }
+})
+
+function openMenu (opts: VxeContextMenuDefines.ContextMenuOpenOptions, x: number, y :number) {
+  dynamicStore.globalContextMenu = {
+    modelValue: true,
+    options: opts.options,
+    className: opts.className,
+    size: opts.size,
+    zIndex: opts.zIndex,
+    x,
+    y,
+    position: 'fixed',
+    destroyOnClose: true,
+    transfer: false,
+    events: opts.events
+  }
+  checkDynamic()
+}
+
+export const ContextMenuController = {
+  open (options: VxeContextMenuDefines.ContextMenuOpenOptions) {
+    const opts = Object.assign({ x: 0, y: 0 }, options)
+    openMenu(opts, opts.x, opts.y)
+  },
+  openByEvent (evnt: MouseEvent, options: VxeContextMenuDefines.ContextMenuEventOpenOptions) {
+    evnt.preventDefault()
+    evnt.stopPropagation()
+    const opts = Object.assign({}, options)
+    const x = evnt.clientX
+    const y = evnt.clientY
+    openMenu(opts, x, y)
+  },
+  close () {
+    dynamicStore.globalContextMenu = null
+  }
+}
+
+dynamicApp.use(VxeContextMenu)
+VxeUI.component(VxeContextMenuComponent)
+VxeUI.contextMenu = ContextMenuController
+
+export const ContextMenu = VxeContextMenu
+export default VxeContextMenu

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

@@ -0,0 +1,388 @@
+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 { getLastZIndex, nextSubZIndex, nextZIndex, getFuncText } from '../../ui/src/utils'
+import { 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'
+
+function createInternalData (): ContextMenuInternalData {
+  return {
+  }
+}
+
+function createReactData (): ContextMenuReactData {
+  return {
+    visible: false,
+    activeOption: null,
+    activeChildOption: null,
+    popupStyle: {
+      top: '',
+      left: '',
+      zIndex: 0
+    },
+    childPos: ''
+  }
+}
+
+export default defineVxeComponent({
+  name: 'VxeContextMenu',
+  props: {
+    modelValue: Boolean as PropType<VxeContextMenuPropTypes.ModelValue>,
+    className: String as PropType<VxeContextMenuPropTypes.ClassName>,
+    size: {
+      type: String as PropType<VxeContextMenuPropTypes.Size>,
+      default: () => getConfig().contextMenu.size || getConfig().size
+    },
+    options: Array as PropType<VxeContextMenuPropTypes.Options>,
+    x: [Number, String] as PropType<VxeContextMenuPropTypes.X>,
+    y: [Number, String] as PropType<VxeContextMenuPropTypes.Y>,
+    zIndex: [Number, String] as PropType<VxeContextMenuPropTypes.ZIndex>,
+    position: {
+      type: String as PropType<VxeContextMenuPropTypes.Position>,
+      default: () => getConfig().contextMenu.position
+    },
+    destroyOnClose: {
+      type: Boolean as PropType<VxeContextMenuPropTypes.DestroyOnClose>,
+      default: () => getConfig().contextMenu.destroyOnClose
+    },
+    transfer: {
+      type: Boolean as PropType<VxeContextMenuPropTypes.Transfer>,
+      default: () => getConfig().contextMenu.transfer
+    }
+  },
+  emits: [
+    'update:modelValue',
+    'option-click',
+    'change',
+    'show',
+    'hide'
+  ] as VxeContextMenuEmits,
+  setup (props, context) {
+    const { emit } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const { computeSize } = useSize(props)
+
+    const internalData = createInternalData()
+    const reactData = reactive(createReactData())
+
+    const refMaps: ContextMenuPrivateRef = {
+      refElem
+    }
+
+    const computeMenuGroups = computed(() => {
+      const { options } = props
+      return options || []
+    })
+
+    const computeTopAndLeft = computed(() => {
+      const { x, y } = props
+      return `${x}${y}`
+    })
+
+    const computeMaps: VxeContextMenuPrivateComputed = {
+    }
+
+    const $xeContextMenu = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeContextMenuConstructor & VxeContextMenuPrivateMethods
+
+    const dispatchEvent = (type: ValueOf<VxeContextMenuEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $contextMenu: $xeContextMenu }, params))
+    }
+
+    const emitModel = (value: any) => {
+      emit('update:modelValue', value)
+    }
+
+    const open = () => {
+      const { modelValue } = props
+      const { visible } = reactData
+      const value = true
+      reactData.visible = value
+      updateLocate()
+      updateZindex()
+      if (modelValue !== value) {
+        emitModel(value)
+        dispatchEvent('change', { value }, null)
+      }
+      if (visible !== value) {
+        dispatchEvent('show', { visible: value }, null)
+      }
+      return nextTick()
+    }
+
+    const close = () => {
+      const { modelValue } = props
+      const { visible } = reactData
+      const value = false
+      reactData.visible = value
+      if (modelValue !== value) {
+        emitModel(value)
+        dispatchEvent('change', { value }, null)
+      }
+      if (visible !== value) {
+        dispatchEvent('hide', { visible: value }, null)
+      }
+      return nextTick()
+    }
+
+    const updateLocate = () => {
+      const { x, y } = props
+      const { popupStyle } = reactData
+      popupStyle.left = toCssUnit(x || 0)
+      popupStyle.top = toCssUnit(y || 0)
+    }
+
+    const updateZindex = () => {
+      const { zIndex, transfer } = props
+      const { popupStyle } = reactData
+      const menuZIndex = popupStyle.zIndex
+      if (zIndex) {
+        popupStyle.zIndex = XEUtils.toNumber(zIndex)
+      } else {
+        if (menuZIndex < getLastZIndex()) {
+          popupStyle.zIndex = transfer ? nextSubZIndex() : nextZIndex()
+        }
+      }
+    }
+
+    const handleVisible = () => {
+      const { modelValue } = props
+      if (modelValue) {
+        open()
+      } else {
+        close()
+      }
+    }
+
+    const tagMethods: ContextMenuMethods = {
+      dispatchEvent,
+      open,
+      close
+    }
+
+    const handleItemClickEvent = (evnt: MouseEvent, item: VxeContextMenuDefines.MenuFirstOption | VxeContextMenuDefines.MenuChildOption) => {
+      dispatchEvent('option-click', { option: item }, evnt)
+      close()
+    }
+
+    const handleItemMouseenterEvent = (evnt: MouseEvent, item: VxeContextMenuDefines.MenuFirstOption | VxeContextMenuDefines.MenuChildOption, parentitem?: VxeContextMenuDefines.MenuFirstOption) => {
+      reactData.activeOption = parentitem || item
+      reactData.activeChildOption = parentitem ? item : null
+    }
+
+    const handleItemMouseleaveEvent = () => {
+      reactData.activeOption = null
+      reactData.activeChildOption = null
+    }
+
+    const handleGlobalMousedownEvent = (evnt: MouseEvent) => {
+      const { visible } = reactData
+      if (visible) {
+        const el = refElem.value
+        if (!getEventTargetNode(evnt, el, '').flag) {
+          close()
+        }
+      }
+    }
+
+    const tagPrivateMethods: ContextMenuPrivateMethods = {
+    }
+
+    Object.assign($xeContextMenu, tagMethods, tagPrivateMethods)
+
+    const renderMenuItem = (item: VxeContextMenuDefines.MenuFirstOption | VxeContextMenuDefines.MenuChildOption, hasChildMenus?: boolean) => {
+      const { visible, disabled, loading } = item
+      if (visible === false) {
+        return renderEmptyElement($xeContextMenu)
+      }
+      const prefixOpts = Object.assign({}, item.prefixConfig)
+      const prefixIcon = prefixOpts.icon || item.prefixIcon
+      const suffixOpts = Object.assign({}, item.suffixConfig)
+      const suffixIcon = suffixOpts.icon || item.suffixIcon
+      const menuContent = loading ? getI18n('vxe.contextMenu.loadingText') : getFuncText(item.name)
+      return h('div', {
+        class: ['vxe-context-menu--item-inner', {
+          'is--disabled': disabled,
+          'is--loading': loading
+        }]
+      }, [
+        h('div', {
+          class: ['vxe-context-menu--item-prefix', prefixOpts.className || '']
+        }, loading
+          ? [
+              h('span', {
+                key: '1'
+              }, [
+                h('i', {
+                  class: getIcon().CONTEXT_MENU_OPTION_LOADING
+                })
+              ])
+            ]
+          : [
+              prefixIcon && XEUtils.isFunction(prefixIcon)
+                ? h('span', {
+                  key: '2'
+                }, getSlotVNs(prefixIcon({})))
+                : h('span', {
+                  key: '3'
+                }, [
+                  h('i', {
+                    class: prefixIcon
+                  })
+                ]),
+              prefixOpts.content
+                ? h('span', {
+                  key: '4'
+                }, `${prefixOpts.content || ''}`)
+                : renderEmptyElement($xeContextMenu)
+            ]),
+        h('div', {
+          class: 'vxe-context-menu--item-label'
+        }, menuContent),
+        !loading && (suffixIcon || suffixOpts.content)
+          ? h('div', {
+            class: ['vxe-context-menu--item-suffix', suffixOpts.className || '']
+          }, [
+            suffixIcon && XEUtils.isFunction(suffixIcon)
+              ? h('span', {
+                key: '2'
+              }, getSlotVNs(suffixIcon({})))
+              : h('span', {
+                key: '3'
+              }, [
+                h('i', {
+                  class: suffixIcon
+                })
+              ]),
+            suffixOpts.content
+              ? h('span', {
+                key: '4'
+              }, `${suffixOpts.content || ''}`)
+              : renderEmptyElement($xeContextMenu)
+          ])
+          : renderEmptyElement($xeContextMenu),
+        hasChildMenus
+          ? h('div', {
+            class: 'vxe-context-menu--item-subicon'
+          }, [
+            h('i', {
+              class: getIcon().CONTEXT_MENU_CHILDREN
+            })
+          ])
+          : renderEmptyElement($xeContextMenu)
+      ])
+    }
+
+    const renderMenus = () => {
+      const { activeOption, activeChildOption } = reactData
+      const menuGroups = computeMenuGroups.value
+      const mgVNs: VNode[] = []
+      menuGroups.forEach((menuList, gIndex) => {
+        const moVNs: VNode[] = []
+        menuList.forEach((firstItem, i) => {
+          const { children } = firstItem
+          const hasChildMenus = children && children.some((child) => child.visible !== false)
+          moVNs.push(
+            h('div', {
+              key: `${gIndex}_${i}`,
+              class: ['vxe-context-menu--item-wrapper vxe-context-menu--first-item', {
+                'is--active': activeOption === firstItem
+              }],
+              onClick (evnt) {
+                handleItemClickEvent(evnt, firstItem)
+              },
+              onMouseenter (evnt) {
+                handleItemMouseenterEvent(evnt, firstItem)
+              },
+              onMouseleave: handleItemMouseleaveEvent
+            }, [
+              hasChildMenus
+                ? h('div', {
+                  class: 'vxe-context-menu--children-wrapper'
+                }, children.map(twoItem => {
+                  return h('div', {
+                    class: ['vxe-context-menu--item-wrapper vxe-context-menu--child-item', {
+                      'is--active': activeChildOption === twoItem
+                    }],
+                    onClick (evnt) {
+                      handleItemClickEvent(evnt, twoItem)
+                    },
+                    onMouseenter (evnt) {
+                      handleItemMouseenterEvent(evnt, twoItem, firstItem)
+                    },
+                    onMouseleave: handleItemMouseleaveEvent
+                  }, [
+                    renderMenuItem(twoItem)
+                  ])
+                }))
+                : renderEmptyElement($xeContextMenu),
+              renderMenuItem(firstItem, hasChildMenus)
+            ])
+          )
+        })
+        mgVNs.push(
+          h('div', {
+            key: gIndex,
+            class: 'vxe-context-menu--group-wrapper'
+          }, moVNs)
+        )
+      })
+      return mgVNs
+    }
+
+    const renderVN = () => {
+      const { className, position, destroyOnClose } = props
+      const { visible, popupStyle, childPos } = reactData
+      const vSize = computeSize.value
+      return h('div', {
+        ref: refElem,
+        class: ['vxe-context-menu vxe-context-menu--wrapper', position === 'fixed' ? ('is--' + position) : 'is--absolute', `cp--${childPos === 'left' ? childPos : 'right'}`, className || '', {
+          [`size--${vSize}`]: vSize,
+          'is--visible': visible
+        }],
+        style: popupStyle
+      }, (destroyOnClose ? visible : true) ? renderMenus() : [])
+    }
+
+    watch(computeTopAndLeft, () => {
+      updateLocate()
+    })
+
+    watch(() => props.modelValue, () => {
+      handleVisible()
+    })
+
+    handleVisible()
+
+    onMounted(() => {
+      globalEvents.on($xeContextMenu, 'mousedown', handleGlobalMousedownEvent)
+    })
+
+    onBeforeUnmount(() => {
+      globalEvents.off($xeContextMenu, 'mousedown')
+      XEUtils.assign(reactData, createReactData())
+      XEUtils.assign(internalData, createInternalData())
+    })
+
+    $xeContextMenu.renderVN = renderVN
+
+    return $xeContextMenu
+  },
+  render () {
+    return this.renderVN()
+  }
+})