vxe-pc-ui 4.11.32 → 4.11.34

package/es/tree/src/tree.js

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

package/es/ui/index.js

@@ -1,7 +1,7 @@
 import { VxeUI, setConfig, setIcon } from '@vxe-ui/core';
 import { dynamicApp } from '../dynamics';
 import { warnLog } from './src/log';
-export const version = "4.11.32";
+export const version = "4.11.34";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 export function config(options) {

package/es/ui/src/log.js

@@ -1,4 +1,4 @@
 import { log } from '@vxe-ui/core';
-const version = `ui v${"4.11.32"}`;
+const version = `ui v${"4.11.34"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);

package/es/vxe-context-menu/style.css

@@ -58,7 +58,7 @@
   background-color: rgba(0, 0, 0, 0.1);
 }
 
-.vxe-context-menu--first-item.is--active .vxe-context-menu--children-wrapper {
+.vxe-context-menu--first-item.is--subactive .vxe-context-menu--children-wrapper {
   display: block;
 }
 

package/es/vxe-context-menu/style.min.css

@@ -1 +1 @@
-.vxe-context-menu{display:none;top:0;left:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-context-menu.is--visible{display:block}.vxe-context-menu.is--fixed{position:fixed}.vxe-context-menu.is--absolute{position:absolute}.vxe-context-menu.cp--left .vxe-context-menu--children-wrapper{left:calc(-100% + 2px)}.vxe-context-menu.cp--right .vxe-context-menu--children-wrapper{left:calc(100% - 2px)}.vxe-context-menu--group-wrapper{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-context-menu--group-wrapper:first-child{border:0}.vxe-context-menu--children-wrapper,.vxe-context-menu--wrapper{padding:0;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);border:1px solid var(--vxe-ui-base-popup-border-color);background-color:var(--vxe-ui-layout-background-color);border-radius:var(--vxe-ui-base-border-radius);box-shadow:0 0 12px 0 rgba(0,0,0,.3)}.vxe-context-menu--children-wrapper{display:none;position:absolute;transform:translateY(-5px)}.vxe-context-menu--item-wrapper{position:relative;min-width:12em;max-width:20em;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-context-menu--item-wrapper.is--active{background-color:rgba(0,0,0,.1)}.vxe-context-menu--first-item.is--active .vxe-context-menu--children-wrapper{display:block}.vxe-context-menu--item-inner{height:var(--vxe-ui-context-menu-option-height);display:flex;align-items:center;padding:0 .8em;cursor:pointer}.vxe-context-menu--item-inner.is--loading{opacity:.5;cursor:progress}.vxe-context-menu--item-inner.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-context-menu--item-prefix{min-width:1em;text-align:center}.vxe-context-menu--item-prefix,.vxe-context-menu--item-suffix{flex-shrink:0;font-size:.9em}.vxe-context-menu--item-label{font-size:.9em;padding:0 .5em;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-context-menu{font-size:var(--vxe-ui-font-size-default)}.vxe-context-menu.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-context-menu.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-context-menu.size--mini{font-size:var(--vxe-ui-font-size-mini)}
+.vxe-context-menu{display:none;top:0;left:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-context-menu.is--visible{display:block}.vxe-context-menu.is--fixed{position:fixed}.vxe-context-menu.is--absolute{position:absolute}.vxe-context-menu.cp--left .vxe-context-menu--children-wrapper{left:calc(-100% + 2px)}.vxe-context-menu.cp--right .vxe-context-menu--children-wrapper{left:calc(100% - 2px)}.vxe-context-menu--group-wrapper{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-context-menu--group-wrapper:first-child{border:0}.vxe-context-menu--children-wrapper,.vxe-context-menu--wrapper{padding:0;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);border:1px solid var(--vxe-ui-base-popup-border-color);background-color:var(--vxe-ui-layout-background-color);border-radius:var(--vxe-ui-base-border-radius);box-shadow:0 0 12px 0 rgba(0,0,0,.3)}.vxe-context-menu--children-wrapper{display:none;position:absolute;transform:translateY(-5px)}.vxe-context-menu--item-wrapper{position:relative;min-width:12em;max-width:20em;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-context-menu--item-wrapper.is--active{background-color:rgba(0,0,0,.1)}.vxe-context-menu--first-item.is--subactive .vxe-context-menu--children-wrapper{display:block}.vxe-context-menu--item-inner{height:var(--vxe-ui-context-menu-option-height);display:flex;align-items:center;padding:0 .8em;cursor:pointer}.vxe-context-menu--item-inner.is--loading{opacity:.5;cursor:progress}.vxe-context-menu--item-inner.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-context-menu--item-prefix{min-width:1em;text-align:center}.vxe-context-menu--item-prefix,.vxe-context-menu--item-suffix{flex-shrink:0;font-size:.9em}.vxe-context-menu--item-label{font-size:.9em;padding:0 .5em;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-context-menu{font-size:var(--vxe-ui-font-size-default)}.vxe-context-menu.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-context-menu.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-context-menu.size--mini{font-size:var(--vxe-ui-font-size-mini)}

package/lib/button/src/button-group.js

@@ -28,7 +28,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       default: () => (0, _ui.getConfig)().buttonGroup.size || (0, _ui.getConfig)().size
     }
   },
-  emits: ['click'],
+  emits: ['click', 'contextmenu'],
   setup(props, context) {
     const {
       slots,
@@ -48,12 +48,13 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const {
       computePermissionInfo
     } = (0, _ui.usePermission)(props);
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, (0, _ui.createEvent)(evnt, {
+        $buttonGroup: $xeButtonGroup
+      }, params));
+    };
     const buttonGroupMethods = {
-      dispatchEvent(type, params, evnt) {
-        emit(type, (0, _ui.createEvent)(evnt, {
-          $buttonGroup: $xeButtonGroup
-        }, params));
-      }
+      dispatchEvent
     };
     const buttonGroupPrivateMethods = {
       handleClick(params, evnt) {
@@ -69,6 +70,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }), evnt);
       }
     };
+    const contextmenuEvent = evnt => {
+      dispatchEvent('contextmenu', {}, evnt);
+    };
     Object.assign($xeButtonGroup, buttonGroupMethods, buttonGroupPrivateMethods);
     const renderVN = () => {
       const {
@@ -86,7 +90,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           $buttonGroup: $xeButtonGroup
         }) : className : '', {
           'is--vertical': vertical
-        }]
+        }],
+        onContextmenu: contextmenuEvent
       }, defaultSlot ? defaultSlot({}) : options ? options.map((item, index) => {
         return (0, _vue.h)(_button.default, Object.assign({
           key: index

package/lib/button/src/button-group.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_ui=require("../../ui"),_xeUtils=_interopRequireDefault(require("xe-utils")),_button=_interopRequireDefault(require("./button"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeButtonGroup",props:{options:Array,mode:String,status:String,round:Boolean,vertical:Boolean,circle:Boolean,align:String,className:[String,Function],disabled:Boolean,permissionCode:[String,Number],size:{type:String,default:()=>(0,_ui.getConfig)().buttonGroup.size||(0,_ui.getConfig)().size}},emits:["click"],setup(n,e){const{slots:o,emit:u}=e;var t=_xeUtils.default.uniqueId(),i=(0,_vue.reactive)({});const r={},s={xID:t,props:n,context:e,reactData:i,getComputeMaps:()=>r},a=((0,_ui.useSize)(n),(0,_ui.usePermission)(n))["computePermissionInfo"],l={dispatchEvent(e,t,i){u(e,(0,_ui.createEvent)(i,{$buttonGroup:s},t))}};Object.assign(s,l,{handleClick(e,t){var i=n["options"];const u=e["name"];i=i?i.find(e=>e.name===u):null;l.dispatchEvent("click",Object.assign(Object.assign({},e),{option:i}),t)}});return s.renderVN=()=>{var{className:e,options:t,vertical:i}=n,u=a.value,r=o.default;return u.visible?(0,_vue.h)("div",{class:["vxe-button-group",e?_xeUtils.default.isFunction(e)?e({$buttonGroup:s}):e:"",{"is--vertical":i}]},r?r({}):t?t.map((e,t)=>(0,_vue.h)(_button.default,Object.assign({key:t},e))):[]):(0,_ui.renderEmptyElement)(s)},(0,_vue.provide)("$xeButtonGroup",s),s},render(){return this.renderVN()}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_ui=require("../../ui"),_xeUtils=_interopRequireDefault(require("xe-utils")),_button=_interopRequireDefault(require("./button"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeButtonGroup",props:{options:Array,mode:String,status:String,round:Boolean,vertical:Boolean,circle:Boolean,align:String,className:[String,Function],disabled:Boolean,permissionCode:[String,Number],size:{type:String,default:()=>(0,_ui.getConfig)().buttonGroup.size||(0,_ui.getConfig)().size}},emits:["click","contextmenu"],setup(r,e){const{slots:o,emit:n}=e;var t=_xeUtils.default.uniqueId(),i=(0,_vue.reactive)({});const u={},s={xID:t,props:r,context:e,reactData:i,getComputeMaps:()=>u},a=((0,_ui.useSize)(r),(0,_ui.usePermission)(r))["computePermissionInfo"],l=(e,t,i)=>{n(e,(0,_ui.createEvent)(i,{$buttonGroup:s},t))},c={dispatchEvent:l},p=e=>{l("contextmenu",{},e)};Object.assign(s,c,{handleClick(e,t){var i=r["options"];const n=e["name"];i=i?i.find(e=>e.name===n):null;c.dispatchEvent("click",Object.assign(Object.assign({},e),{option:i}),t)}});return s.renderVN=()=>{var{className:e,options:t,vertical:i}=r,n=a.value,u=o.default;return n.visible?(0,_vue.h)("div",{class:["vxe-button-group",e?_xeUtils.default.isFunction(e)?e({$buttonGroup:s}):e:"",{"is--vertical":i}],onContextmenu:p},u?u({}):t?t.map((e,t)=>(0,_vue.h)(_button.default,Object.assign({key:t},e))):[]):(0,_ui.renderEmptyElement)(s)},(0,_vue.provide)("$xeButtonGroup",s),s},render(){return this.renderVN()}});

package/lib/button/src/button.js

@@ -115,7 +115,7 @@ const VxeButtonComponent = (0, _comp.defineVxeComponent)({
       default: null
     }
   },
-  emits: ['click', 'mouseenter', 'mouseleave', 'dropdown-click', 'dropdownClick'],
+  emits: ['click', 'mouseenter', 'mouseleave', 'dropdown-click', 'dropdownClick', 'contextmenu'],
   setup(props, context) {
     const {
       slots,
@@ -393,6 +393,9 @@ const VxeButtonComponent = (0, _comp.defineVxeComponent)({
     const mouseleaveEvent = evnt => {
       dispatchEvent('mouseleave', {}, evnt);
     };
+    const contextmenuEvent = evnt => {
+      dispatchEvent('contextmenu', {}, evnt);
+    };
     const clickTargetEvent = evnt => {
       const {
         loading,
@@ -629,7 +632,9 @@ const VxeButtonComponent = (0, _comp.defineVxeComponent)({
         return (0, _ui.renderEmptyElement)($xeButton);
       }
       if (dropdownsSlot || downBtnList.length) {
-        const btnOns = {};
+        const btnOns = {
+          onContextmenu: contextmenuEvent
+        };
         const panelOns = {};
         if (trigger === 'hover') {
           // hover 触发
@@ -754,7 +759,8 @@ const VxeButtonComponent = (0, _comp.defineVxeComponent)({
           to: routerLink,
           onClick: clickEvent,
           onMouseenter: mouseenterEvent,
-          onMouseleave: mouseleaveEvent
+          onMouseleave: mouseleaveEvent,
+          onContextmenu: contextmenuEvent
         }, {
           default() {
             return renderContent();
@@ -779,7 +785,8 @@ const VxeButtonComponent = (0, _comp.defineVxeComponent)({
         disabled: btnDisabled || loading,
         onClick: clickEvent,
         onMouseenter: mouseenterEvent,
-        onMouseleave: mouseleaveEvent
+        onMouseleave: mouseleaveEvent,
+        onContextmenu: contextmenuEvent
       }, renderContent());
     };
     $xeButton.renderVN = renderVN;

package/lib/button/src/button.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_vn=require("../../ui/src/vn"),_log=require("../../ui/src/log"),_tooltip=_interopRequireDefault(require("../../tooltip/src/tooltip"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const VxeButtonComponent=(0,_comp.defineVxeComponent)({name:"VxeButton",props:{type:String,mode:String,className:[String,Function],popupClassName:[String,Function],size:{type:String,default:()=>(0,_ui.getConfig)().button.size||(0,_ui.getConfig)().size},zIndex:Number,name:[String,Number],routerLink:Object,permissionCode:[String,Number],content:String,placement:String,status:String,title:String,icon:String,iconRender:Object,prefixIcon:String,prefixRender:Object,suffixIcon:String,suffixRender:Object,round:Boolean,circle:Boolean,disabled:Boolean,loading:Boolean,trigger:{type:String,default:()=>(0,_ui.getConfig)().button.trigger},align:String,prefixTooltip:Object,suffixTooltip:Object,options:Array,showDropdownIcon:{type:Boolean,default:()=>(0,_ui.getConfig)().button.showDropdownIcon},destroyOnClose:{type:Boolean,default:()=>(0,_ui.getConfig)().button.destroyOnClose},transfer:{type:Boolean,default:null}},emits:["click","mouseenter","mouseleave","dropdown-click","dropdownClick"],setup(O,e){const{slots:I,emit:i}=e,n=(0,_vue.inject)("$xeModal",null),o=(0,_vue.inject)("$xeDrawer",null),u=(0,_vue.inject)("$xeTable",null),s=(0,_vue.inject)("$xeTree",null),l=(0,_vue.inject)("$xeForm",null),a=(0,_vue.inject)("$xeButtonGroup",null);var t=_xeUtils.default.uniqueId();const N=(0,_ui.useSize)(O)["computeSize"],P=(0,_ui.usePermission)(O)["computePermissionInfo"],S=(0,_vue.reactive)({initialized:!1,visiblePanel:!1,isAniVisible:!1,isActivated:!1,panelIndex:0,panelStyle:{},panelPlacement:""}),r={showTime:void 0,tooltipTimeout:void 0},B=(0,_vue.ref)(),j=(0,_vue.ref)(),z=(0,_vue.ref)(),c={refElem:B},$={xID:t,props:O,context:e,reactData:S,internalData:r,getRefMaps:()=>c};const V=(0,_vue.computed)(()=>{var e=O["transfer"];if(null===e){var t=(0,_ui.getConfig)().button.transfer;if(_xeUtils.default.isBoolean(t))return t;if(u||s||n||o||l)return!0}return e}),E=(0,_vue.computed)(()=>{var e=O["disabled"],t=P.value;return e||t.disabled}),M=(0,_vue.computed)(()=>{var e=O["type"];return!!e&&-1<["submit","reset","button"].indexOf(e)}),U=(0,_vue.computed)(()=>{var{type:e,mode:t}=O;return"text"===t||"text"===e||a&&"text"===a.props.mode?"text":"button"}),D=(0,_vue.computed)(()=>{var e=O["status"];return e||(a?a.props.status:"")}),W=(0,_vue.computed)(()=>{var e=O["align"];return e||!!a&&a.props.align}),Z=(0,_vue.computed)(()=>{var e=O["round"];return e||!!a&&a.props.round}),J=(0,_vue.computed)(()=>{var e=O["circle"];return e||!!a&&a.props.circle}),K=(0,_vue.computed)(()=>{var e=O["options"];return e?e.filter(e=>{e=e.permissionCode;return!e||_ui.permission.checkVisible(e)}):[]}),_=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().button.prefixTooltip,O.prefixTooltip)),b=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().button.suffixTooltip,O.suffixTooltip)),p=()=>{var e=O["zIndex"];e?S.panelIndex=e:S.panelIndex<(0,_utils.getLastZIndex)()&&(S.panelIndex=(0,_utils.nextZIndex)())},v=()=>{const n=O["placement"],i=S["panelIndex"],o=j.value,u=z.value,s=V.value;var e=()=>{var e=(0,_dom.updatePanelPlacement)(o,u,{placement:n,teleportTo:s}),t=Object.assign(e.style,{zIndex:i});S.panelStyle=t,S.panelPlacement=e.placement};return e(),(0,_vue.nextTick)().then(e)},q=e=>{a&&a.handleClick({name:O.name},e),H("click",{$event:e},e)},Q=e=>{0===e.button&&e.stopPropagation()},X=e=>{var t=e.currentTarget;const n=z.value;var{flag:t,targetElem:i}=(0,_dom.getEventTargetNode)(e,t,"vxe-button");t&&(n&&(n.dataset.active="N"),S.visiblePanel=!1,setTimeout(()=>{n&&"Y"===n.dataset.active||(S.isAniVisible=!1)},350),H("dropdown-click",{name:i.getAttribute("name"),option:null},e))},A=()=>{const e=z.value;e&&(e.dataset.active="Y",S.isAniVisible=!0,setTimeout(()=>{"Y"===e.dataset.active&&(S.visiblePanel=!0,p(),v(),setTimeout(()=>{S.visiblePanel&&v()},50))},20))},ee=e=>{var t=O["loading"];E.value||t||(d(),R(e))},te=e=>{Y(),F(e)},R=e=>{H("mouseenter",{},e)},F=e=>{H("mouseleave",{},e)},L=e=>{var{loading:t,trigger:n}=O;E.value||t||("click"===n&&(S.visiblePanel?Y:d)(),q(e))},d=()=>{var e=O["trigger"];const t=z.value;return t&&(t.dataset.active="Y",S.initialized||(S.initialized=!0),r.showTime=setTimeout(()=>{"Y"===t.dataset.active?A():S.isAniVisible=!1},"click"===e?50:250)),(0,_vue.nextTick)()},Y=()=>{const e=z.value;return clearTimeout(r.showTime),e?(e.dataset.active="N",setTimeout(()=>{"Y"!==e.dataset.active&&(S.visiblePanel=!1,setTimeout(()=>{"Y"!==e.dataset.active&&(S.isAniVisible=!1)},350))},100)):(S.isAniVisible=!1,S.visiblePanel=!1),(0,_vue.nextTick)()},ne=()=>{Y()},m=(e,t)=>(0,_vue.h)(_tooltip.default,{useHTML:e.useHTML,content:e.content,enterable:e.enterable,theme:e.theme},{default(){return(0,_vue.h)("span",{class:`vxe-button--item vxe-button--tooltip-${t}-icon`},[(0,_vue.h)("i",{class:e.icon||(0,_ui.getIcon)().BUTTON_TOOLTIP_ICON})])}}),G=()=>{var{content:e,suffixIcon:t,loading:n,prefixTooltip:i,suffixTooltip:o,suffixRender:u}=O,s=O.prefixIcon||O.icon,l=O.prefixRender||O.iconRender,a=_.value,r=b.value,c=I.prefix||I.icon,v=I.suffix,d=I.default,p=[];return i&&p.push(m(a,"prefix")),n?p.push((0,_vue.h)("i",{class:["vxe-button--item vxe-button--loading-icon",(0,_ui.getIcon)().BUTTON_LOADING]})):c?p.push((0,_vue.h)("span",{class:"vxe-button--item vxe-button--custom-prefix-icon"},c({}))):l?(a=(i=_ui.renderer.get(l.name))?i.renderButtonPrefix:null,p.push((0,_vue.h)("span",{class:["vxe-button--item vxe-button--custom-prefix-icon"]},a?(0,_vn.getSlotVNs)(a(l,{$button:$})):[]))):s&&p.push((0,_vue.h)("i",{class:["vxe-button--item vxe-button--prefix-icon",s]})),d?p.push((0,_vue.h)("span",{class:"vxe-button--item vxe-button--content"},d({}))):e&&p.push((0,_vue.h)("span",{class:"vxe-button--item vxe-button--content"},(0,_utils.getFuncText)(e))),v?p.push((0,_vue.h)("span",{class:"vxe-button--item vxe-button--custom-suffix-icon"},v({}))):u?(c=(n=_ui.renderer.get(u.name))?n.renderButtonSuffix:null,p.push((0,_vue.h)("span",{class:["vxe-button--item vxe-button--custom-suffix-icon"]},c?(0,_vn.getSlotVNs)(c(u,{$button:$})):[]))):t&&p.push((0,_vue.h)("i",{class:["vxe-button--item vxe-button--suffix-icon",t]})),o&&p.push(m(r,"suffix")),p},H=(e,t,n)=>{i(e,(0,_ui.createEvent)(n,{$button:$},t))},x=(t={dispatchEvent:H,openPanel:d,closePanel:Y,focus(){var e=j.value;return e&&e.focus(),(0,_vue.nextTick)()},blur(){var e=j.value;return e&&e.blur(),(0,_vue.nextTick)()}},e=>{var t=z.value;S.visiblePanel&&!(0,_dom.getEventTargetNode)(e,t).flag&&Y()}),f=e=>{var t,n=E.value,i=S["visiblePanel"];n||(n=B.value,t=z.value,S.isActivated=(0,_dom.getEventTargetNode)(e,n).flag||(0,_dom.getEventTargetNode)(e,t).flag,i&&!S.isActivated&&Y())},g=()=>{var e=S["visiblePanel"];e&&v()};Object.assign($,t);return $.renderVN=()=>{const{className:e,popupClassName:t,trigger:n,title:i,routerLink:o,type:u,destroyOnClose:s,name:l,loading:a,showDropdownIcon:r}=O;var{initialized:c,isAniVisible:v,visiblePanel:d}=S,p=M.value;const m=U.value;var _=D.value;const b=Z.value;var x=W.value;const f=J.value;var g,h=V.value,T=E.value,y=P.value,C=K.value,w=N.value,k=I.dropdowns;return y.visible?k||C.length?(y={},g={},"hover"===n&&(y.onMouseenter=ee,y.onMouseleave=te,g.onMouseenter=A,g.onMouseleave=ne),(0,_vue.h)("div",{ref:B,class:["vxe-button--dropdown",e?_xeUtils.default.isFunction(e)?e({$button:$}):e:"",{["size--"+w]:w,"is--active":d}]},[o?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),Object.assign({ref:j,class:["vxe-button","vxe-button--link","type--"+m,x?"align--"+x:"",e?_xeUtils.default.isFunction(e)?e({$button:$}):e:"",{["size--"+w]:w,["theme--"+_]:_,"is--round":b,"is--circle":f,"is--disabled":T||a,"is--loading":a}],title:i,name:l,type:p?u:"button",disabled:T||a,to:o,onClick:L},y),{default(){return G().concat(r?[(0,_vue.h)("i",{class:"vxe-button--dropdown-arrow "+(0,_ui.getIcon)().BUTTON_DROPDOWN})]:[])}}):(0,_vue.h)("button",Object.assign({ref:j,class:["vxe-button","type--"+m,x?"align--"+x:"",e?_xeUtils.default.isFunction(e)?e({$button:$}):e:"",{["size--"+w]:w,["theme--"+_]:_,"is--round":b,"is--circle":f,"is--disabled":T||a,"is--loading":a}],title:i,name:l,type:p?u:"button",disabled:T||a,onClick:L},y),G().concat(r?[(0,_vue.h)("i",{class:"vxe-button--dropdown-arrow "+(0,_ui.getIcon)().BUTTON_DROPDOWN})]:[])),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!h||!c},[(0,_vue.h)("div",Object.assign({ref:z,class:["vxe-button--dropdown-panel",t?_xeUtils.default.isFunction(t)?t({$button:$}):t:"",{["size--"+w]:w,"is--transfer":h,"ani--leave":v,"ani--enter":d}],placement:S.panelPlacement,style:S.panelStyle},g),c&&(d||v)?[k?(0,_vue.h)("div",{class:"vxe-button--dropdown-wrapper",onMousedown:Q,onClick:X},c&&(!s||d||v)?k({}):[]):(0,_vue.h)("div",{class:"vxe-button--dropdown-wrapper"},c&&(!s||d||v)?C.map((i,e)=>(0,_vue.h)(VxeButtonComponent,{key:e,type:i.type,mode:i.mode||m,className:i.className,name:i.name,routerLink:i.routerLink,permissionCode:i.permissionCode,title:i.title,content:i.content,status:i.status,icon:i.icon,round:_xeUtils.default.isBoolean(i.round)?i.round:"text"!==m&&b,circle:_xeUtils.default.isBoolean(i.circle)?i.circle:"text"!==m&&f,disabled:i.disabled,loading:i.loading,align:i.align,onClick(e){var t=e,n=i;t=e.$event,Y(),H("dropdown-click",{name:n.name,option:n},t)}})):[])]:[])])])):o?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),{ref:j,class:["vxe-button","vxe-button--link","type--"+m,x?"align--"+x:"",e?_xeUtils.default.isFunction(e)?e({$button:$}):e:"",{["size--"+w]:w,["theme--"+_]:_,"is--round":b,"is--circle":f,"is--disabled":T||a,"is--loading":a}],title:i,name:l,type:p?u:"button",disabled:T||a,to:o,onClick:q,onMouseenter:R,onMouseleave:F},{default(){return G()}}):(0,_vue.h)("button",{ref:j,class:["vxe-button","type--"+m,x?"align--"+x:"",e?_xeUtils.default.isFunction(e)?e({$button:$}):e:"",{["size--"+w]:w,["theme--"+_]:_,"is--round":b,"is--circle":f,"is--disabled":T||a,"is--loading":a}],title:i,name:l,type:p?u:"button",disabled:T||a,onClick:q,onMouseenter:R,onMouseleave:F},G()):(0,_ui.renderEmptyElement)($)},(0,_vue.onMounted)(()=>{"text"===O.type&&(0,_log.warnLog)("vxe.error.delProp",["[button] type=text","mode=text"]),_ui.globalEvents.on($,"mousewheel",x),_ui.globalEvents.on($,"mousedown",f),_ui.globalEvents.on($,"resize",g)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off($,"mousewheel"),_ui.globalEvents.off($,"mousedown"),_ui.globalEvents.off($,"resize")}),$},render(){return this.renderVN()}});var _default=exports.default=VxeButtonComponent;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_vn=require("../../ui/src/vn"),_log=require("../../ui/src/log"),_tooltip=_interopRequireDefault(require("../../tooltip/src/tooltip"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const VxeButtonComponent=(0,_comp.defineVxeComponent)({name:"VxeButton",props:{type:String,mode:String,className:[String,Function],popupClassName:[String,Function],size:{type:String,default:()=>(0,_ui.getConfig)().button.size||(0,_ui.getConfig)().size},zIndex:Number,name:[String,Number],routerLink:Object,permissionCode:[String,Number],content:String,placement:String,status:String,title:String,icon:String,iconRender:Object,prefixIcon:String,prefixRender:Object,suffixIcon:String,suffixRender:Object,round:Boolean,circle:Boolean,disabled:Boolean,loading:Boolean,trigger:{type:String,default:()=>(0,_ui.getConfig)().button.trigger},align:String,prefixTooltip:Object,suffixTooltip:Object,options:Array,showDropdownIcon:{type:Boolean,default:()=>(0,_ui.getConfig)().button.showDropdownIcon},destroyOnClose:{type:Boolean,default:()=>(0,_ui.getConfig)().button.destroyOnClose},transfer:{type:Boolean,default:null}},emits:["click","mouseenter","mouseleave","dropdown-click","dropdownClick","contextmenu"],setup(O,e){const{slots:I,emit:i}=e,n=(0,_vue.inject)("$xeModal",null),o=(0,_vue.inject)("$xeDrawer",null),u=(0,_vue.inject)("$xeTable",null),s=(0,_vue.inject)("$xeTree",null),l=(0,_vue.inject)("$xeForm",null),a=(0,_vue.inject)("$xeButtonGroup",null);var t=_xeUtils.default.uniqueId();const N=(0,_ui.useSize)(O)["computeSize"],P=(0,_ui.usePermission)(O)["computePermissionInfo"],S=(0,_vue.reactive)({initialized:!1,visiblePanel:!1,isAniVisible:!1,isActivated:!1,panelIndex:0,panelStyle:{},panelPlacement:""}),r={showTime:void 0,tooltipTimeout:void 0},B=(0,_vue.ref)(),j=(0,_vue.ref)(),z=(0,_vue.ref)(),c={refElem:B},$={xID:t,props:O,context:e,reactData:S,internalData:r,getRefMaps:()=>c};const V=(0,_vue.computed)(()=>{var e=O["transfer"];if(null===e){var t=(0,_ui.getConfig)().button.transfer;if(_xeUtils.default.isBoolean(t))return t;if(u||s||n||o||l)return!0}return e}),E=(0,_vue.computed)(()=>{var e=O["disabled"],t=P.value;return e||t.disabled}),M=(0,_vue.computed)(()=>{var e=O["type"];return!!e&&-1<["submit","reset","button"].indexOf(e)}),U=(0,_vue.computed)(()=>{var{type:e,mode:t}=O;return"text"===t||"text"===e||a&&"text"===a.props.mode?"text":"button"}),W=(0,_vue.computed)(()=>{var e=O["status"];return e||(a?a.props.status:"")}),Z=(0,_vue.computed)(()=>{var e=O["align"];return e||!!a&&a.props.align}),J=(0,_vue.computed)(()=>{var e=O["round"];return e||!!a&&a.props.round}),K=(0,_vue.computed)(()=>{var e=O["circle"];return e||!!a&&a.props.circle}),Q=(0,_vue.computed)(()=>{var e=O["options"];return e?e.filter(e=>{e=e.permissionCode;return!e||_ui.permission.checkVisible(e)}):[]}),_=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().button.prefixTooltip,O.prefixTooltip)),b=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().button.suffixTooltip,O.suffixTooltip)),p=()=>{var e=O["zIndex"];e?S.panelIndex=e:S.panelIndex<(0,_utils.getLastZIndex)()&&(S.panelIndex=(0,_utils.nextZIndex)())},v=()=>{const n=O["placement"],i=S["panelIndex"],o=j.value,u=z.value,s=V.value;var e=()=>{var e=(0,_dom.updatePanelPlacement)(o,u,{placement:n,teleportTo:s}),t=Object.assign(e.style,{zIndex:i});S.panelStyle=t,S.panelPlacement=e.placement};return e(),(0,_vue.nextTick)().then(e)},D=e=>{a&&a.handleClick({name:O.name},e),H("click",{$event:e},e)},X=e=>{0===e.button&&e.stopPropagation()},ee=e=>{var t=e.currentTarget;const n=z.value;var{flag:t,targetElem:i}=(0,_dom.getEventTargetNode)(e,t,"vxe-button");t&&(n&&(n.dataset.active="N"),S.visiblePanel=!1,setTimeout(()=>{n&&"Y"===n.dataset.active||(S.isAniVisible=!1)},350),H("dropdown-click",{name:i.getAttribute("name"),option:null},e))},q=()=>{const e=z.value;e&&(e.dataset.active="Y",S.isAniVisible=!0,setTimeout(()=>{"Y"===e.dataset.active&&(S.visiblePanel=!0,p(),v(),setTimeout(()=>{S.visiblePanel&&v()},50))},20))},te=e=>{var t=O["loading"];E.value||t||(d(),A(e))},ne=e=>{Y(),R(e)},A=e=>{H("mouseenter",{},e)},R=e=>{H("mouseleave",{},e)},F=e=>{H("contextmenu",{},e)},L=e=>{var{loading:t,trigger:n}=O;E.value||t||("click"===n&&(S.visiblePanel?Y:d)(),D(e))},d=()=>{var e=O["trigger"];const t=z.value;return t&&(t.dataset.active="Y",S.initialized||(S.initialized=!0),r.showTime=setTimeout(()=>{"Y"===t.dataset.active?q():S.isAniVisible=!1},"click"===e?50:250)),(0,_vue.nextTick)()},Y=()=>{const e=z.value;return clearTimeout(r.showTime),e?(e.dataset.active="N",setTimeout(()=>{"Y"!==e.dataset.active&&(S.visiblePanel=!1,setTimeout(()=>{"Y"!==e.dataset.active&&(S.isAniVisible=!1)},350))},100)):(S.isAniVisible=!1,S.visiblePanel=!1),(0,_vue.nextTick)()},ie=()=>{Y()},m=(e,t)=>(0,_vue.h)(_tooltip.default,{useHTML:e.useHTML,content:e.content,enterable:e.enterable,theme:e.theme},{default(){return(0,_vue.h)("span",{class:`vxe-button--item vxe-button--tooltip-${t}-icon`},[(0,_vue.h)("i",{class:e.icon||(0,_ui.getIcon)().BUTTON_TOOLTIP_ICON})])}}),G=()=>{var{content:e,suffixIcon:t,loading:n,prefixTooltip:i,suffixTooltip:o,suffixRender:u}=O,s=O.prefixIcon||O.icon,l=O.prefixRender||O.iconRender,a=_.value,r=b.value,c=I.prefix||I.icon,v=I.suffix,d=I.default,p=[];return i&&p.push(m(a,"prefix")),n?p.push((0,_vue.h)("i",{class:["vxe-button--item vxe-button--loading-icon",(0,_ui.getIcon)().BUTTON_LOADING]})):c?p.push((0,_vue.h)("span",{class:"vxe-button--item vxe-button--custom-prefix-icon"},c({}))):l?(a=(i=_ui.renderer.get(l.name))?i.renderButtonPrefix:null,p.push((0,_vue.h)("span",{class:["vxe-button--item vxe-button--custom-prefix-icon"]},a?(0,_vn.getSlotVNs)(a(l,{$button:$})):[]))):s&&p.push((0,_vue.h)("i",{class:["vxe-button--item vxe-button--prefix-icon",s]})),d?p.push((0,_vue.h)("span",{class:"vxe-button--item vxe-button--content"},d({}))):e&&p.push((0,_vue.h)("span",{class:"vxe-button--item vxe-button--content"},(0,_utils.getFuncText)(e))),v?p.push((0,_vue.h)("span",{class:"vxe-button--item vxe-button--custom-suffix-icon"},v({}))):u?(c=(n=_ui.renderer.get(u.name))?n.renderButtonSuffix:null,p.push((0,_vue.h)("span",{class:["vxe-button--item vxe-button--custom-suffix-icon"]},c?(0,_vn.getSlotVNs)(c(u,{$button:$})):[]))):t&&p.push((0,_vue.h)("i",{class:["vxe-button--item vxe-button--suffix-icon",t]})),o&&p.push(m(r,"suffix")),p},H=(e,t,n)=>{i(e,(0,_ui.createEvent)(n,{$button:$},t))},x=(t={dispatchEvent:H,openPanel:d,closePanel:Y,focus(){var e=j.value;return e&&e.focus(),(0,_vue.nextTick)()},blur(){var e=j.value;return e&&e.blur(),(0,_vue.nextTick)()}},e=>{var t=z.value;S.visiblePanel&&!(0,_dom.getEventTargetNode)(e,t).flag&&Y()}),f=e=>{var t,n=E.value,i=S["visiblePanel"];n||(n=B.value,t=z.value,S.isActivated=(0,_dom.getEventTargetNode)(e,n).flag||(0,_dom.getEventTargetNode)(e,t).flag,i&&!S.isActivated&&Y())},g=()=>{var e=S["visiblePanel"];e&&v()};Object.assign($,t);return $.renderVN=()=>{const{className:e,popupClassName:t,trigger:n,title:i,routerLink:o,type:u,destroyOnClose:s,name:l,loading:a,showDropdownIcon:r}=O;var{initialized:c,isAniVisible:v,visiblePanel:d}=S,p=M.value;const m=U.value;var _=W.value;const b=J.value;var x=Z.value;const f=K.value;var g,h=V.value,T=E.value,C=P.value,y=Q.value,w=N.value,k=I.dropdowns;return C.visible?k||y.length?(C={onContextmenu:F},g={},"hover"===n&&(C.onMouseenter=te,C.onMouseleave=ne,g.onMouseenter=q,g.onMouseleave=ie),(0,_vue.h)("div",{ref:B,class:["vxe-button--dropdown",e?_xeUtils.default.isFunction(e)?e({$button:$}):e:"",{["size--"+w]:w,"is--active":d}]},[o?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),Object.assign({ref:j,class:["vxe-button","vxe-button--link","type--"+m,x?"align--"+x:"",e?_xeUtils.default.isFunction(e)?e({$button:$}):e:"",{["size--"+w]:w,["theme--"+_]:_,"is--round":b,"is--circle":f,"is--disabled":T||a,"is--loading":a}],title:i,name:l,type:p?u:"button",disabled:T||a,to:o,onClick:L},C),{default(){return G().concat(r?[(0,_vue.h)("i",{class:"vxe-button--dropdown-arrow "+(0,_ui.getIcon)().BUTTON_DROPDOWN})]:[])}}):(0,_vue.h)("button",Object.assign({ref:j,class:["vxe-button","type--"+m,x?"align--"+x:"",e?_xeUtils.default.isFunction(e)?e({$button:$}):e:"",{["size--"+w]:w,["theme--"+_]:_,"is--round":b,"is--circle":f,"is--disabled":T||a,"is--loading":a}],title:i,name:l,type:p?u:"button",disabled:T||a,onClick:L},C),G().concat(r?[(0,_vue.h)("i",{class:"vxe-button--dropdown-arrow "+(0,_ui.getIcon)().BUTTON_DROPDOWN})]:[])),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!h||!c},[(0,_vue.h)("div",Object.assign({ref:z,class:["vxe-button--dropdown-panel",t?_xeUtils.default.isFunction(t)?t({$button:$}):t:"",{["size--"+w]:w,"is--transfer":h,"ani--leave":v,"ani--enter":d}],placement:S.panelPlacement,style:S.panelStyle},g),c&&(d||v)?[k?(0,_vue.h)("div",{class:"vxe-button--dropdown-wrapper",onMousedown:X,onClick:ee},c&&(!s||d||v)?k({}):[]):(0,_vue.h)("div",{class:"vxe-button--dropdown-wrapper"},c&&(!s||d||v)?y.map((i,e)=>(0,_vue.h)(VxeButtonComponent,{key:e,type:i.type,mode:i.mode||m,className:i.className,name:i.name,routerLink:i.routerLink,permissionCode:i.permissionCode,title:i.title,content:i.content,status:i.status,icon:i.icon,round:_xeUtils.default.isBoolean(i.round)?i.round:"text"!==m&&b,circle:_xeUtils.default.isBoolean(i.circle)?i.circle:"text"!==m&&f,disabled:i.disabled,loading:i.loading,align:i.align,onClick(e){var t=e,n=i;t=e.$event,Y(),H("dropdown-click",{name:n.name,option:n},t)}})):[])]:[])])])):o?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),{ref:j,class:["vxe-button","vxe-button--link","type--"+m,x?"align--"+x:"",e?_xeUtils.default.isFunction(e)?e({$button:$}):e:"",{["size--"+w]:w,["theme--"+_]:_,"is--round":b,"is--circle":f,"is--disabled":T||a,"is--loading":a}],title:i,name:l,type:p?u:"button",disabled:T||a,to:o,onClick:D,onMouseenter:A,onMouseleave:R,onContextmenu:F},{default(){return G()}}):(0,_vue.h)("button",{ref:j,class:["vxe-button","type--"+m,x?"align--"+x:"",e?_xeUtils.default.isFunction(e)?e({$button:$}):e:"",{["size--"+w]:w,["theme--"+_]:_,"is--round":b,"is--circle":f,"is--disabled":T||a,"is--loading":a}],title:i,name:l,type:p?u:"button",disabled:T||a,onClick:D,onMouseenter:A,onMouseleave:R,onContextmenu:F},G()):(0,_ui.renderEmptyElement)($)},(0,_vue.onMounted)(()=>{"text"===O.type&&(0,_log.warnLog)("vxe.error.delProp",["[button] type=text","mode=text"]),_ui.globalEvents.on($,"mousewheel",x),_ui.globalEvents.on($,"mousedown",f),_ui.globalEvents.on($,"resize",g)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off($,"mousewheel"),_ui.globalEvents.off($,"mousedown"),_ui.globalEvents.off($,"resize")}),$},render(){return this.renderVN()}});var _default=exports.default=VxeButtonComponent;

package/lib/context-menu/src/context-menu.js

@@ -75,6 +75,20 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = props;
       return options || [];
     });
+    const computeAllFirstMenuList = (0, _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, _vue.computed)(() => {
       const {
         x,
@@ -204,12 +218,199 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     };
     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 _xeUtils.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 _xeUtils.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 (!(0, _dom.getEventTargetNode)(evnt, el, '').flag) {
+          close();
+        }
+      }
+    };
+    const handleGlobalKeydownEvent = evnt => {
+      const {
+        visible,
+        childPos,
+        activeOption,
+        activeChildOption
+      } = reactData;
+      const allFirstMenuList = computeAllFirstMenuList.value;
+      if (visible) {
+        const isLeftArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_LEFT);
+        const isUpArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_UP);
+        const isRightArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_RIGHT);
+        const isDwArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_DOWN);
+        const isEnter = _ui.globalEvents.hasKey(evnt, _ui.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.default.first(allFirstMenuList);
+        }
+      }
+    };
     const handleGlobalMousedownEvent = evnt => {
       const {
         visible
@@ -221,6 +422,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }
       }
     };
+    const handleGlobalBlurEvent = () => {
+      const {
+        visible
+      } = reactData;
+      if (visible) {
+        close();
+      }
+    };
     const tagPrivateMethods = {};
     Object.assign($xeContextMenu, tagMethods, tagPrivateMethods);
     const renderMenuItem = (item, parentItem, hasChildMenus) => {
@@ -295,10 +504,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             children
           } = firstItem;
           const hasChildMenus = children && children.some(child => child.visible !== false);
+          const isActiveFirst = activeOption === firstItem;
           moVNs.push((0, _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, _vue.h)('div', {
             class: 'vxe-context-menu--children-wrapper'
@@ -346,10 +557,16 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     });
     handleVisible();
     (0, _vue.onMounted)(() => {
+      _ui.globalEvents.on($xeContextMenu, 'mousewheel', handleGlobalMousewheelEvent);
+      _ui.globalEvents.on($xeContextMenu, 'keydown', handleGlobalKeydownEvent);
       _ui.globalEvents.on($xeContextMenu, 'mousedown', handleGlobalMousedownEvent);
+      _ui.globalEvents.on($xeContextMenu, 'blur', handleGlobalBlurEvent);
     });
     (0, _vue.onBeforeUnmount)(() => {
+      _ui.globalEvents.off($xeContextMenu, 'mousewheel');
+      _ui.globalEvents.off($xeContextMenu, 'keydown');
       _ui.globalEvents.off($xeContextMenu, 'mousedown');
+      _ui.globalEvents.off($xeContextMenu, 'blur');
       _xeUtils.default.assign(reactData, createReactData());
       _xeUtils.default.assign(internalData, createInternalData());
     });

package/lib/context-menu/src/context-menu.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_dom=require("../../ui/src/dom"),_vn=require("../../ui/src/vn");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function createInternalData(){return{}}function createReactData(){return{visible:!1,activeOption:null,activeChildOption:null,popupStyle:{top:"",left:"",zIndex:0},childPos:""}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeContextMenu",props:{modelValue:Boolean,className:String,size:{type:String,default:()=>(0,_ui.getConfig)().contextMenu.size||(0,_ui.getConfig)().size},options:Array,x:[Number,String],y:[Number,String],zIndex:[Number,String],position:{type:String,default:()=>(0,_ui.getConfig)().contextMenu.position},destroyOnClose:{type:Boolean,default:()=>(0,_ui.getConfig)().contextMenu.destroyOnClose},transfer:{type:Boolean,default:()=>(0,_ui.getConfig)().contextMenu.transfer}},emits:["update:modelValue","option-click","change","show","hide"],setup(a,e){const i=e["emit"];var t=_xeUtils.default.uniqueId();const l=(0,_vue.ref)(),r=(0,_ui.useSize)(a)["computeSize"],n=createInternalData(),c=(0,_vue.reactive)(createReactData()),u={refElem:l},v=(0,_vue.computed)(()=>{var e=a["options"];return e||[]});var s=(0,_vue.computed)(()=>{var{x:e,y:t}=a;return""+e+t});const o={},d={xID:t,props:a,context:e,reactData:c,getRefMaps:()=>u,getComputeMaps:()=>o},p=(e,t,n)=>{i(e,(0,_ui.createEvent)(n,{$contextMenu:d},t))},_=e=>{i("update:modelValue",e)},m=()=>{var e=a["modelValue"],t=c["visible"],n=!0;c.visible=n,f();{var{zIndex:i,transfer:u}=a,s=c.popupStyle,o=s.zIndex;i?s.zIndex=_xeUtils.default.toNumber(i):o<(0,_utils.getLastZIndex)()&&(s.zIndex=(u?(0,_utils.nextSubZIndex):(0,_utils.nextZIndex))())}return e!==n&&(_(n),p("change",{value:n},null)),t!==n&&p("show",{visible:n},null),(0,_vue.nextTick)()},x=()=>{var e=a["modelValue"],t=c["visible"],n=!1;return e!==(c.visible=n)&&(_(n),p("change",{value:n},null)),t!==n&&p("hide",{visible:n},null),(0,_vue.nextTick)()},f=()=>{var{x:e,y:t}=a,n=c["popupStyle"];n.left=(0,_dom.toCssUnit)(e||0),n.top=(0,_dom.toCssUnit)(t||0)},h=()=>{var e=a["modelValue"];(e?m:x)()};t={dispatchEvent:p,open:m,close:x};const g=()=>{c.activeOption=null,c.activeChildOption=null},y=e=>{var t=c["visible"];t&&(t=l.value,(0,_dom.getEventTargetNode)(e,t,"").flag||x())};Object.assign(d,t,{});const b=(i,u,e)=>{var t,n,s,o,{visible:a,disabled:l,loading:r}=i;return!1===a?(0,_ui.renderEmptyElement)(d):(t=(a=Object.assign({},i.prefixConfig)).icon||i.prefixIcon,s=(n=Object.assign({},i.suffixConfig)).icon||i.suffixIcon,o=r?(0,_ui.getI18n)("vxe.contextMenu.loadingText"):(0,_utils.getFuncText)(i.name),(0,_vue.h)("div",{class:["vxe-context-menu--item-inner",{"is--disabled":l,"is--loading":r}],onClick(e){var t;e=e,(e=>{e=e.children;return e&&e.some(e=>!1!==e.visible)})(t=i)||(p("option-click",{option:t},e),x())},onMouseenter(e){var t,n;t=i,n=u,c.activeOption=n||t,c.activeChildOption=n?t:null},onMouseleave:g},[(0,_vue.h)("div",{class:["vxe-context-menu--item-prefix",a.className||""]},r?[(0,_vue.h)("span",{key:"1"},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().CONTEXT_MENU_OPTION_LOADING})])]:[t&&_xeUtils.default.isFunction(t)?(0,_vue.h)("span",{key:"2"},(0,_vn.getSlotVNs)(t({}))):(0,_vue.h)("span",{key:"3"},[(0,_vue.h)("i",{class:t})]),a.content?(0,_vue.h)("span",{key:"4"},""+(a.content||"")):(0,_ui.renderEmptyElement)(d)]),(0,_vue.h)("div",{class:"vxe-context-menu--item-label"},o),r||!s&&!n.content?(0,_ui.renderEmptyElement)(d):(0,_vue.h)("div",{class:["vxe-context-menu--item-suffix",n.className||""]},[s&&_xeUtils.default.isFunction(s)?(0,_vue.h)("span",{key:"2"},(0,_vn.getSlotVNs)(s({}))):(0,_vue.h)("span",{key:"3"},[(0,_vue.h)("i",{class:s})]),n.content?(0,_vue.h)("span",{key:"4"},""+(n.content||"")):(0,_ui.renderEmptyElement)(d)]),e?(0,_vue.h)("div",{class:"vxe-context-menu--item-subicon"},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().CONTEXT_MENU_CHILDREN})]):(0,_ui.renderEmptyElement)(d)]))};return(0,_vue.watch)(s,()=>{f()}),(0,_vue.watch)(()=>a.modelValue,()=>{h()}),h(),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(d,"mousedown",y)}),(0,_vue.onBeforeUnmount)(()=>{_ui.globalEvents.off(d,"mousedown"),_xeUtils.default.assign(c,createReactData()),_xeUtils.default.assign(n,createInternalData())}),d.renderVN=()=>{var{className:e,position:t,destroyOnClose:n}=a,{visible:i,popupStyle:u,childPos:s}=c,o=r.value;return(0,_vue.h)("div",{ref:l,class:["vxe-context-menu vxe-context-menu--wrapper","absolute"===t?"is--"+t:"is--fixed","cp--"+("left"===s?s:"right"),e||"",{["size--"+o]:o,"is--visible":i}],style:u},!n||i?(()=>{const{activeOption:o,activeChildOption:a}=c;var e=v.value;const t=[];return e.forEach((e,u)=>{const s=[];e.forEach((t,e)=>{var n=t["children"],i=n&&n.some(e=>!1!==e.visible);s.push((0,_vue.h)("div",{key:u+"_"+e,class:["vxe-context-menu--item-wrapper vxe-context-menu--first-item",t.className||"",{"is--active":o===t}]},[i?(0,_vue.h)("div",{class:"vxe-context-menu--children-wrapper"},n.map(e=>(0,_vue.h)("div",{class:["vxe-context-menu--item-wrapper vxe-context-menu--child-item",e.className||"",{"is--active":a===e}]},[b(e,t)]))):(0,_ui.renderEmptyElement)(d),b(t,null,i)]))}),t.push((0,_vue.h)("div",{key:u,class:"vxe-context-menu--group-wrapper"},s))}),t})():[])},d},render(){return this.renderVN()}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_dom=require("../../ui/src/dom"),_vn=require("../../ui/src/vn");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function createInternalData(){return{}}function createReactData(){return{visible:!1,activeOption:null,activeChildOption:null,popupStyle:{top:"",left:"",zIndex:0},childPos:""}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeContextMenu",props:{modelValue:Boolean,className:String,size:{type:String,default:()=>(0,_ui.getConfig)().contextMenu.size||(0,_ui.getConfig)().size},options:Array,x:[Number,String],y:[Number,String],zIndex:[Number,String],position:{type:String,default:()=>(0,_ui.getConfig)().contextMenu.position},destroyOnClose:{type:Boolean,default:()=>(0,_ui.getConfig)().contextMenu.destroyOnClose},transfer:{type:Boolean,default:()=>(0,_ui.getConfig)().contextMenu.transfer}},emits:["update:modelValue","option-click","change","show","hide"],setup(o,e){const n=e["emit"];var t=_xeUtils.default.uniqueId();const r=(0,_vue.ref)(),s=(0,_ui.useSize)(o)["computeSize"],i=createInternalData(),v=(0,_vue.reactive)(createReactData()),l={refElem:r},c=(0,_vue.computed)(()=>{var e=o["options"];return e||[]}),_=(0,_vue.computed)(()=>{var t=c.value,i=[];for(let e=0;e<t.length;e++){var n=t[e];for(let e=0;e<n.length;e++){var l=n[e];y(l)&&i.push(l)}}return i});var u=(0,_vue.computed)(()=>{var{x:e,y:t}=o;return""+e+t});const a={},d={xID:t,props:o,context:e,reactData:v,getRefMaps:()=>l,getComputeMaps:()=>a},p=(e,t,i)=>{n(e,(0,_ui.createEvent)(i,{$contextMenu:d},t))},f=e=>{n("update:modelValue",e)},m=()=>{var e=o["modelValue"],t=v["visible"];v.visible=!0,x();{var{zIndex:i,transfer:n}=o,l=v.popupStyle,u=l.zIndex;i?l.zIndex=_xeUtils.default.toNumber(i):u<(0,_utils.getLastZIndex)()&&(l.zIndex=(n?(0,_utils.nextSubZIndex):(0,_utils.nextZIndex))())}return!0!==e&&(f(!0),p("change",{value:!0},null)),!0!==t&&p("show",{visible:!0},null),(0,_vue.nextTick)()},h=()=>{var e=o["modelValue"],t=v["visible"];return(v.visible=!1)!==e&&(f(!1),p("change",{value:!1},null)),!1!==t&&p("hide",{visible:!1},null),(0,_vue.nextTick)()},x=()=>{var{x:e,y:t}=o,i=v["popupStyle"];i.left=(0,_dom.toCssUnit)(e||0),i.top=(0,_dom.toCssUnit)(t||0)},g=()=>{var e=o["modelValue"];(e?m:h)()};t={dispatchEvent:p,open:m,close:h};const E=e=>{e=e.children;return e&&e.some(e=>!1!==e.visible)},b=(e,t)=>{E(t)||(p("option-click",{option:t},e),h())},O=()=>{v.activeOption=null,v.activeChildOption=null},y=e=>!e.loading&&!e.disabled&&!1!==e.visible,C=e=>{var t=e["children"];if(t)for(let e=0;e<t.length;e++){var i=t[e];if(y(i))return i}return null},N=e=>{var t=v["visible"];t&&(t=r.value,(0,_dom.getEventTargetNode)(e,t,"").flag||h())},I=e=>{var{visible:t,childPos:i,activeOption:n,activeChildOption:l}=v,u=_.value;if(t){var t=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_LEFT),a=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_UP),o=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_RIGHT),r=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN),s=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ENTER);if(s&&(n||l))return e.preventDefault(),e.stopPropagation(),!l&&E(n)?void(v.activeChildOption=C(n)):void b(e,l||n);l?a?(e.preventDefault(),v.activeChildOption=((e,t)=>{var i=e["children"];let n=null;if(i){for(let e=0;e<i.length;e++){var l=i[e];if(t===l)break;y(l)&&(n=l)}if(!n)for(let e=i.length-1;0<=e;e--){var u=i[e];if(y(u))return u}}return n})(n,l)):r?(e.preventDefault(),v.activeChildOption=((e,i)=>{var n=e["children"];let l=null;if(n){let t=!1;for(let e=0;e<n.length;e++){var u=n[e];if(l||y(u)&&(l=u),t){if(y(u))return u}else t=i===u}}return l})(n,l)):t?(e.preventDefault(),"left"!==i&&(v.activeChildOption=null)):o&&(e.preventDefault(),"left"===i)&&(v.activeChildOption=null):n?(e.preventDefault(),a?v.activeOption=((t,i)=>{for(let e=0;e<t.length;e++){var n=t[e];if(i===n&&0<e)return t[e-1]}return _xeUtils.default.last(t)})(u,n):r?v.activeOption=((t,i)=>{for(let e=0;e<t.length;e++)if(i===t[e]){var n=t[e+1];if(n)return n}return _xeUtils.default.first(t)})(u,n):E(n)&&("left"===i?t&&(v.activeChildOption=C(n)):o&&(v.activeChildOption=C(n)))):(e.preventDefault(),v.activeOption=_xeUtils.default.first(u))}},D=e=>{var t=v["visible"];t&&(t=r.value,(0,_dom.getEventTargetNode)(e,t,"").flag||h())},S=()=>{var e=v["visible"];e&&h()};Object.assign(d,t,{});const T=(n,l,e)=>{var t,i,u,a,{visible:o,disabled:r,loading:s}=n;return!1===o?(0,_ui.renderEmptyElement)(d):(t=(o=Object.assign({},n.prefixConfig)).icon||n.prefixIcon,u=(i=Object.assign({},n.suffixConfig)).icon||n.suffixIcon,a=s?(0,_ui.getI18n)("vxe.contextMenu.loadingText"):(0,_utils.getFuncText)(n.name),(0,_vue.h)("div",{class:["vxe-context-menu--item-inner",{"is--disabled":r,"is--loading":s}],onClick(e){b(e,n)},onMouseenter(e){var t,i;t=n,i=l,v.activeOption=i||t,i?(v.activeOption=i,v.activeChildOption=t):(v.activeOption=t,E(t)?v.activeChildOption=C(t):v.activeChildOption=null)},onMouseleave:O},[(0,_vue.h)("div",{class:["vxe-context-menu--item-prefix",o.className||""]},s?[(0,_vue.h)("span",{key:"1"},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().CONTEXT_MENU_OPTION_LOADING})])]:[t&&_xeUtils.default.isFunction(t)?(0,_vue.h)("span",{key:"2"},(0,_vn.getSlotVNs)(t({}))):(0,_vue.h)("span",{key:"3"},[(0,_vue.h)("i",{class:t})]),o.content?(0,_vue.h)("span",{key:"4"},""+(o.content||"")):(0,_ui.renderEmptyElement)(d)]),(0,_vue.h)("div",{class:"vxe-context-menu--item-label"},a),s||!u&&!i.content?(0,_ui.renderEmptyElement)(d):(0,_vue.h)("div",{class:["vxe-context-menu--item-suffix",i.className||""]},[u&&_xeUtils.default.isFunction(u)?(0,_vue.h)("span",{key:"2"},(0,_vn.getSlotVNs)(u({}))):(0,_vue.h)("span",{key:"3"},[(0,_vue.h)("i",{class:u})]),i.content?(0,_vue.h)("span",{key:"4"},""+(i.content||"")):(0,_ui.renderEmptyElement)(d)]),e?(0,_vue.h)("div",{class:"vxe-context-menu--item-subicon"},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().CONTEXT_MENU_CHILDREN})]):(0,_ui.renderEmptyElement)(d)]))};return(0,_vue.watch)(u,()=>{x()}),(0,_vue.watch)(()=>o.modelValue,()=>{g()}),g(),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(d,"mousewheel",N),_ui.globalEvents.on(d,"keydown",I),_ui.globalEvents.on(d,"mousedown",D),_ui.globalEvents.on(d,"blur",S)}),(0,_vue.onBeforeUnmount)(()=>{_ui.globalEvents.off(d,"mousewheel"),_ui.globalEvents.off(d,"keydown"),_ui.globalEvents.off(d,"mousedown"),_ui.globalEvents.off(d,"blur"),_xeUtils.default.assign(v,createReactData()),_xeUtils.default.assign(i,createInternalData())}),d.renderVN=()=>{var{className:e,position:t,destroyOnClose:i}=o,{visible:n,popupStyle:l,childPos:u}=v,a=s.value;return(0,_vue.h)("div",{ref:r,class:["vxe-context-menu vxe-context-menu--wrapper","absolute"===t?"is--"+t:"is--fixed","cp--"+("left"===u?u:"right"),e||"",{["size--"+a]:a,"is--visible":n}],style:l},!i||n?(()=>{const{activeOption:o,activeChildOption:r}=v;var e=c.value;const t=[];return e.forEach((e,u)=>{const a=[];e.forEach((t,e)=>{var i=t["children"],n=i&&i.some(e=>!1!==e.visible),l=o===t;a.push((0,_vue.h)("div",{key:u+"_"+e,class:["vxe-context-menu--item-wrapper vxe-context-menu--first-item",t.className||"",{"is--active":l,"is--subactive":l&&!!r}]},[n?(0,_vue.h)("div",{class:"vxe-context-menu--children-wrapper"},i.map(e=>(0,_vue.h)("div",{class:["vxe-context-menu--item-wrapper vxe-context-menu--child-item",e.className||"",{"is--active":r===e}]},[T(e,t)]))):(0,_ui.renderEmptyElement)(d),T(t,null,n)]))}),t.push((0,_vue.h)("div",{key:u,class:"vxe-context-menu--group-wrapper"},a))}),t})():[])},d},render(){return this.renderVN()}});

package/lib/context-menu/style/style.css

@@ -58,7 +58,7 @@
   background-color: rgba(0, 0, 0, 0.1);
 }
 
-.vxe-context-menu--first-item.is--active .vxe-context-menu--children-wrapper {
+.vxe-context-menu--first-item.is--subactive .vxe-context-menu--children-wrapper {
   display: block;
 }
 

package/lib/context-menu/style/style.min.css

@@ -1 +1 @@
-.vxe-context-menu{display:none;top:0;left:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-context-menu.is--visible{display:block}.vxe-context-menu.is--fixed{position:fixed}.vxe-context-menu.is--absolute{position:absolute}.vxe-context-menu.cp--left .vxe-context-menu--children-wrapper{left:calc(-100% + 2px)}.vxe-context-menu.cp--right .vxe-context-menu--children-wrapper{left:calc(100% - 2px)}.vxe-context-menu--group-wrapper{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-context-menu--group-wrapper:first-child{border:0}.vxe-context-menu--children-wrapper,.vxe-context-menu--wrapper{padding:0;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);border:1px solid var(--vxe-ui-base-popup-border-color);background-color:var(--vxe-ui-layout-background-color);border-radius:var(--vxe-ui-base-border-radius);box-shadow:0 0 12px 0 rgba(0,0,0,.3)}.vxe-context-menu--children-wrapper{display:none;position:absolute;transform:translateY(-5px)}.vxe-context-menu--item-wrapper{position:relative;min-width:12em;max-width:20em;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-context-menu--item-wrapper.is--active{background-color:rgba(0,0,0,.1)}.vxe-context-menu--first-item.is--active .vxe-context-menu--children-wrapper{display:block}.vxe-context-menu--item-inner{height:var(--vxe-ui-context-menu-option-height);display:flex;align-items:center;padding:0 .8em;cursor:pointer}.vxe-context-menu--item-inner.is--loading{opacity:.5;cursor:progress}.vxe-context-menu--item-inner.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-context-menu--item-prefix{min-width:1em;text-align:center}.vxe-context-menu--item-prefix,.vxe-context-menu--item-suffix{flex-shrink:0;font-size:.9em}.vxe-context-menu--item-label{font-size:.9em;padding:0 .5em;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-context-menu{font-size:var(--vxe-ui-font-size-default)}.vxe-context-menu.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-context-menu.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-context-menu.size--mini{font-size:var(--vxe-ui-font-size-mini)}
+.vxe-context-menu{display:none;top:0;left:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-context-menu.is--visible{display:block}.vxe-context-menu.is--fixed{position:fixed}.vxe-context-menu.is--absolute{position:absolute}.vxe-context-menu.cp--left .vxe-context-menu--children-wrapper{left:calc(-100% + 2px)}.vxe-context-menu.cp--right .vxe-context-menu--children-wrapper{left:calc(100% - 2px)}.vxe-context-menu--group-wrapper{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-context-menu--group-wrapper:first-child{border:0}.vxe-context-menu--children-wrapper,.vxe-context-menu--wrapper{padding:0;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);border:1px solid var(--vxe-ui-base-popup-border-color);background-color:var(--vxe-ui-layout-background-color);border-radius:var(--vxe-ui-base-border-radius);box-shadow:0 0 12px 0 rgba(0,0,0,.3)}.vxe-context-menu--children-wrapper{display:none;position:absolute;transform:translateY(-5px)}.vxe-context-menu--item-wrapper{position:relative;min-width:12em;max-width:20em;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-context-menu--item-wrapper.is--active{background-color:rgba(0,0,0,.1)}.vxe-context-menu--first-item.is--subactive .vxe-context-menu--children-wrapper{display:block}.vxe-context-menu--item-inner{height:var(--vxe-ui-context-menu-option-height);display:flex;align-items:center;padding:0 .8em;cursor:pointer}.vxe-context-menu--item-inner.is--loading{opacity:.5;cursor:progress}.vxe-context-menu--item-inner.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-context-menu--item-prefix{min-width:1em;text-align:center}.vxe-context-menu--item-prefix,.vxe-context-menu--item-suffix{flex-shrink:0;font-size:.9em}.vxe-context-menu--item-label{font-size:.9em;padding:0 .5em;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-context-menu{font-size:var(--vxe-ui-font-size-default)}.vxe-context-menu.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-context-menu.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-context-menu.size--mini{font-size:var(--vxe-ui-font-size-mini)}