UNPKG

@imengyu/vue3-context-menu

Version:
3 lines (2 loc) 35.7 kB
(function(z,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(z=typeof globalThis<"u"?globalThis:z||self,e(z["vue3-context-menu"]={},z.Vue))})(this,function(z,e){"use strict";let U=null;function Re(){return U!==null}function He(t){U&&fe(),U=t}function de(t){t===U&&(U=null)}function fe(){U&&(U.closeMenu(),U=null)}const D={defaultDirection:"br",defaultMinWidth:100,defaultMaxWidth:600,defaultZindex:100,defaultZoom:1,defaultAdjustPadding:{x:0,y:10}};function X(t,s){let r=t.offsetTop;return t.offsetParent!=null&&t.offsetParent!=s&&(r-=t.offsetParent.scrollTop,r+=X(t.offsetParent,s)),r}function Z(t,s){let r=t.offsetLeft;return t.offsetParent!=null&&t.offsetParent!=s&&(r-=t.offsetParent.scrollLeft,r+=Z(t.offsetParent,s)),r}function Oe(t,s,r,i){return{x:Z(t,i)+s,y:X(t,i)+r}}const se="mx-menu-default-container",Pe="mx-menu-container-";let Ee=0;function he(t){const{getContainer:s,zIndex:r}=t;if(s){const h=typeof s=="function"?s():s;if(h){let n=h.getAttribute("id");return n||(n=Pe+Ee++,h.setAttribute("id",n)),{eleId:n,container:h,isNew:!1}}}let i=document.getElementById(se);return i||(i=document.createElement("div"),i.setAttribute("id",se),i.setAttribute("class","mx-menu-ghost-host fullscreen"),document.body.appendChild(i)),i.style.zIndex=(r==null?void 0:r.toString())||D.defaultZindex.toString(),{eleId:se,container:i,isNew:!0}}function me(t){return typeof t=="number"?`${t}px`:t}const K=e.defineComponent({props:{vnode:{type:null},data:{type:null,default:null}},setup(t){const{vnode:s,data:r}=e.toRefs(t);return()=>typeof s.value=="function"?s.value(r.value):s.value}});function $e(t,s){const r={...t};return delete r[s],r}var Ne=Object.defineProperty,Te=(t,s,r)=>s in t?Ne(t,s,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[s]=r,pe=(t,s,r)=>Te(t,typeof s!="symbol"?s+"":s,r);class ge{constructor(s,r){pe(this,"x",0),pe(this,"y",0),this.x=s||0,this.y=r||0}set(s,r){this.x=s,this.y=r}substract(s){this.x-=s.x,this.y-=s.y}}function Ce(t){const{onDown:s,onMove:r,onUp:i}=t,h=new ge,n=new ge;let B;function u(f){f.stopPropagation(),n.set(f.x,f.y),n.substract(h),r(h,n,f,B)}function C(f){i(f,B),h.set(0,0),document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",C)}return(f,S)=>s(f,S)?(B=S,h.set(f.x,f.y),document.addEventListener("mousemove",u),document.addEventListener("mouseup",C),f.stopPropagation(),!0):!1}function je(t,s){let r=0;return{start(){r>0&&clearInterval(r),r=setInterval(()=>{r=0,s()},t)},stop(){r>0&&(clearInterval(r),r=0)}}}const Q=[],be=je(100,()=>{for(const t of Q)t()});function Le(t,s,r,i){let h=0,n=0;function B(){t.value&&(s&&h!==t.value.offsetWidth&&s(t.value.offsetWidth),r&&n!==t.value.offsetHeight&&r(t.value.offsetHeight),i&&(h!==t.value.offsetWidth||n!==t.value.offsetHeight)&&i(t.value.offsetWidth,t.value.offsetHeight),h=t.value.offsetWidth,n=t.value.offsetHeight)}return{startResizeChecker(){be.start(),Q.push(B)},stopResizeChecker(){const u=Q.indexOf(B);u>=0&&Q.splice(u,1),Q.length===0&&be.stop()}}}const ke=140,Fe=70,ze=e.defineComponent({__name:"ScrollRect",props:{scroll:{type:String,default:"both"},scrollBarAlwaysShow:{type:Boolean,default:!1},scrollBarBackgroundClickable:{type:Boolean,default:!1},height:{type:Number,default:void 0},width:{type:Number,default:void 0},maxHeight:{type:Number,default:void 0},maxWidth:{type:Number,default:void 0},containerClass:{type:String,default:""},containerStyle:{type:null}},emits:["scroll","resized"],setup(t,{expose:s,emit:r}){const i=t,h=r,n=e.ref(),B=e.ref(),u=e.ref(),C=e.ref(),f=e.ref(),S=e.ref(),W=e.ref(!1),O=e.computed(()=>i.scroll==="horizontal"||i.scroll==="both"),v=e.computed(()=>i.scroll==="vertical"||i.scroll==="both"),x=e.reactive({show:!1,size:0,sizeRaw:0,pos:0}),k=e.reactive({show:!1,size:0,sizeRaw:0,pos:0});let I=0,c=0,m=0,p=0,d=null;const R={attributes:!0,childList:!0};function g(){if(n.value){if(x.show){const o=n.value.offsetWidth/n.value.scrollWidth;x.sizeRaw=o*n.value.offsetWidth,x.size=o*100,x.pos=n.value.scrollLeft/(n.value.scrollWidth-n.value.offsetWidth)*(100-x.size),o>=1&&(x.show=!1)}if(k.show){const o=n.value.offsetHeight/n.value.scrollHeight;k.sizeRaw=o*n.value.offsetHeight,k.size=o*100,k.pos=n.value.scrollTop/(n.value.scrollHeight-n.value.offsetHeight)*(100-k.size),o>=1&&(k.show=!1)}h("scroll",n.value.scrollLeft,n.value.scrollTop)}}function b(o=!1){if(!n.value)return;let l=O.value,H=v.value;const A=l&&(I!==n.value.scrollWidth||m!==n.value.offsetWidth),j=v&&(c!==n.value.scrollHeight||p!==n.value.offsetHeight);if(!o&&!A&&!j)return;const Y=window.getComputedStyle(n.value);(Y.overflow==="hidden"||Y.overflowX==="hidden")&&(l=!1),(Y.overflow==="hidden"||Y.overflowY==="hidden")&&(H=!1),x.show=l,k.show=H,g(),m=n.value.offsetWidth,p=n.value.offsetHeight,I=n.value.scrollWidth,c=n.value.scrollHeight,h("resized",I,c)}function _(o){var l;i.scroll=="horizontal"&&(o.deltaMode==0&&((l=n.value)==null||l.scrollTo({left:n.value.scrollLeft+(o.deltaY>0?ke:-140),behavior:"smooth"})),o.preventDefault(),o.stopPropagation())}function N(o){var l;o.deltaMode==0&&((l=n.value)==null||l.scrollTo({left:n.value.scrollLeft+(o.deltaY>0?ke:-140),behavior:"smooth"}),o.preventDefault(),o.stopPropagation())}function $(o){var l;o.deltaMode==0&&((l=n.value)==null||l.scrollTo({top:n.value.scrollTop+(o.deltaY>0?Fe:-70),behavior:"smooth"}),o.preventDefault(),o.stopPropagation())}let V=0,E=0,M=0,P=0;const L=Ce({onDown(o){return!u.value||!f.value?!1:(V=o.offsetX,E=o.x-o.offsetX-f.value.offsetLeft,o.preventDefault(),W.value=!0,!0)},onMove(o,l,H){n.value&&u.value&&(w(H.x-V-E),H.preventDefault(),H.stopPropagation())},onUp(){W.value=!1}}),T=Ce({onDown(o){return!C.value||!S.value?!1:(M=o.offsetY,P=o.y-o.offsetY-S.value.offsetTop,o.preventDefault(),W.value=!0,!0)},onMove(o,l,H){n.value&&C.value&&(G(H.y-M-P),H.preventDefault(),H.stopPropagation())},onUp(){W.value=!1}});function F(o){n.value&&(n.value.scrollLeft=o/100*(n.value.scrollWidth-n.value.offsetWidth))}function q(o){n.value&&(n.value.scrollLeft=o/100*(n.value.scrollHeight-n.value.offsetHeight))}function w(o){n.value&&(n.value.scrollLeft=o/(n.value.offsetWidth-x.sizeRaw)*(n.value.scrollWidth-n.value.offsetWidth))}function G(o){n.value&&(n.value.scrollTop=o/(n.value.offsetHeight-k.sizeRaw)*(n.value.scrollHeight-n.value.offsetHeight))}function ve(o){i.scrollBarBackgroundClickable&&w(o.offsetX-x.sizeRaw/2)}function le(o){i.scrollBarBackgroundClickable&&G(o.offsetY-k.sizeRaw/2)}const{startResizeChecker:a,stopResizeChecker:y}=Le(n,()=>b(),()=>b());return e.onMounted(()=>{e.nextTick(()=>{setTimeout(()=>b(!0),200),b(!0),a(),d=new MutationObserver(()=>b()),d.observe(n.value,R)})}),e.onBeforeUnmount(()=>{y(),d&&(d.disconnect(),d=null)}),s({refreshScrollState(){b(!0)},getScrollContainer(){return n.value},scrollTo(o,l){var H;(H=n.value)==null||H.scrollTo(o,l)},scrollToTop(){var o;(o=n.value)==null||o.scrollTo(0,0)},scrollToBottom(){var o;(o=n.value)==null||o.scrollTo(n.value.scrollWidth,n.value.scrollHeight)}}),(o,l)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"scrollrect",ref:B,class:e.normalizeClass(["vue-scroll-rect",t.scrollBarAlwaysShow?"always-show-scrollbar":"",t.scrollBarBackgroundClickable?"background-clickable":"",W.value?"dragging":""]),style:e.normalizeStyle({width:t.width?`${t.width}px`:void 0,height:t.height?`${t.height}px`:void 0}),onWheel:_},[e.createElementVNode("div",{ref_key:"container",ref:n,class:e.normalizeClass(["scroll-content",t.scroll,t.containerClass]),style:e.normalizeStyle({maxWidth:t.maxWidth?`${t.maxWidth}px`:void 0,maxHeight:t.maxHeight?`${t.maxHeight}px`:void 0,...t.containerStyle}),onScroll:g},[e.renderSlot(o.$slots,"default")],38),x.show?e.renderSlot(o.$slots,"scrollBarX",{key:0,scrollBarValue:x,onScroll:F},()=>[e.createElementVNode("div",{ref_key:"scrollBarRefX",ref:u,class:"scrollbar horizontal",onClick:ve,onWheel:N},[e.createElementVNode("div",{class:"thumb",ref_key:"scrollBarThumbRefX",ref:f,style:e.normalizeStyle({left:`${x.pos}%`,width:`${x.size}%`}),onMousedown:l[0]||(l[0]=(...H)=>e.unref(L)&&e.unref(L)(...H)),onWheel:N},null,36)],544)]):e.createCommentVNode("",!0),k.show?e.renderSlot(o.$slots,"scrollBarY",{key:1,scrollBarValue:k,onScroll:q},()=>[k.show?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"scrollBarRefY",ref:C,class:"scrollbar vertical",onClick:le,onWheel:$},[e.createElementVNode("div",{class:"thumb",ref_key:"scrollBarThumbRefY",ref:S,style:e.normalizeStyle({top:`${k.pos}%`,height:`${k.size}%`}),onMousedown:l[1]||(l[1]=(...H)=>e.unref(T)&&e.unref(T)(...H)),onWheel:$},null,36)],544)):e.createCommentVNode("",!0)]):e.createCommentVNode("",!0)],38))}}),ne=(t,s)=>{const r=t.__vccOpts||t;for(const[i,h]of s)r[i]=h;return r},Ae={},Ve={class:"mx-checked-mark","aria-hidden":"true",viewBox:"0 0 1024 1024"},De=[e.createElementVNode("path",{d:"M129.3,428.6L52,512l345,372.5l575-620.8l-69.5-75L400.4,718.2L129.3,428.6z"},null,-1)];function Ke(t,s){return e.openBlock(),e.createElementBlock("svg",Ve,De)}const Ye=ne(Ae,[["render",Ke]]),Ue={},Xe={class:"mx-right-arrow","aria-hidden":"true",viewBox:"0 0 1024 1024"},Ze=[e.createElementVNode("path",{d:"M307.018 49.445c11.517 0 23.032 4.394 31.819 13.18L756.404 480.18c8.439 8.438 13.181 19.885 13.181 31.82s-4.741 23.38-13.181 31.82L338.838 961.376c-17.574 17.573-46.065 17.573-63.64-0.001-17.573-17.573-17.573-46.065 0.001-63.64L660.944 512 275.198 126.265c-17.574-17.573-17.574-46.066-0.001-63.64C283.985 53.839 295.501 49.445 307.018 49.445z"},null,-1)];function Ge(t,s){return e.openBlock(),e.createElementBlock("svg",Xe,Ze)}const qe=ne(Ue,[["render",Ge]]),Je={class:"mx-item-row"},Qe=["xlink:href"],et={key:1,class:"label"},tt={class:"mx-item-row"},nt={class:"mx-shortcut"},oe=e.defineComponent({__name:"ContextMenuItem",props:{disabled:{type:Boolean,default:!1},hidden:{type:Boolean,default:!1},customRender:{type:Function,default:null},customClass:{type:String,default:""},clickHandler:{type:Function,default:null},label:{type:[String,Object,Function],default:""},icon:{type:[String,Object,Function],default:""},iconFontClass:{type:String,default:"iconfont"},checked:{type:Boolean,default:!1},shortcut:{type:String,default:""},svgIcon:{type:String,default:""},svgProps:{type:Object,default:null},preserveIconWidth:{type:Boolean,default:!0},showRightArrow:{type:Boolean,default:!1},hasChildren:{type:Boolean,default:!1},clickClose:{type:Boolean,default:!0},clickableWhenHasChildren:{type:Boolean,default:!1},rawMenuItem:{type:Object,default:void 0}},emits:["click","subMenuOpen","subMenuClose"],setup(t,{expose:s,emit:r}){const i=t,h=r,{clickHandler:n,clickClose:B,clickableWhenHasChildren:u,disabled:C,hidden:f,label:S,icon:W,iconFontClass:O,showRightArrow:v,shortcut:x,hasChildren:k}=e.toRefs(i),I=e.ref(!1),c=e.ref(!1),m=e.ref(),p=e.inject("globalOptions"),d=e.inject("globalHasSlot"),R=e.inject("globalRenderSlot"),g=e.inject("globalCloseMenu"),b=e.inject("menuContext"),_={getSubMenuInstance:()=>{},showSubMenu:()=>I.value?(b.markActiveMenuItem(_,!0),!0):k.value?($(),!0):!1,hideSubMenu:()=>{b.closeOtherSubMenu()},isDisabledOrHidden:()=>C.value||f.value,getElement:()=>m.value,focus:()=>c.value=!0,blur:()=>c.value=!1,click:N};e.provide("menuItemInstance",_),e.onMounted(()=>{b.isMenuItemDataCollectedFlag()?e.nextTick(()=>{let M=0;const P=b.getElement();if(P){let L=0;for(let T=0;T<P.children.length;T++){const F=P.children[T];if(F.getAttribute("data-type")==="ContextMenuItem"){if(F===m.value){M=L;break}L++}}}b.addChildMenuItem(_,M)}):b.addChildMenuItem(_)}),e.onBeforeUnmount(()=>{b.removeChildMenuItem(_)});function N(M){if(!C.value){if(M){const P=M.target;if(P.classList.contains("mx-context-no-clickable")||p.value.ignoreClickClassName&&P.classList.contains(p.value.ignoreClickClassName))return;if(p.value.clickCloseClassName&&P.classList.contains(p.value.clickCloseClassName)){M.stopPropagation(),g(i.rawMenuItem);return}}k.value?u.value?(typeof n.value=="function"&&n.value(M),h("click",M)):I.value||$():(typeof n.value=="function"&&n.value(M),h("click",M),B.value&&g(i.rawMenuItem))}}function $(M){c.value=!1,b.checkCloseOtherSubMenuTimeOut()||b.closeOtherSubMenu(),C.value||(b.markActiveMenuItem(_),k.value&&(M||b.markThisOpenedByKeyBoard(),b.addOpenedSubMenu(V),I.value=!0,e.nextTick(()=>h("subMenuOpen",_))))}function V(){c.value=!1,I.value=!1,h("subMenuClose",_)}function E(){return{disabled:C.value,label:S.value,icon:W.value,iconFontClass:O.value,showRightArrow:v.value,clickClose:B.value,clickableWhenHasChildren:u.value,shortcut:x.value,theme:p.value.theme,isOpen:I,hasChildren:k,onClick:N,onMouseEnter:$,closeMenu:g}}return s(_),(M,P)=>e.unref(f)?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:"mx-context-menu-item-wrapper",ref_key:"menuItemRef",ref:m,"data-type":"ContextMenuItem"},[e.unref(d)("itemRender")?(e.openBlock(),e.createBlock(e.unref(K),{key:0,vnode:()=>e.unref(R)("itemRender",E())},null,8,["vnode"])):t.customRender?(e.openBlock(),e.createBlock(e.unref(K),{key:1,vnode:t.customRender,data:E()},null,8,["vnode","data"])):(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(["mx-context-menu-item",e.unref(C)?"disabled":"",c.value?"keyboard-focus":"",t.customClass?" "+t.customClass:"",I.value?"open":""]),onClick:N,onMouseenter:$},[e.renderSlot(M.$slots,"default",{},()=>[e.createElementVNode("div",Je,[e.createElementVNode("div",{class:e.normalizeClass(["mx-icon-placeholder",t.preserveIconWidth?"preserve-width":""])},[e.renderSlot(M.$slots,"icon",{},()=>[e.unref(d)("itemIconRender")?(e.openBlock(),e.createBlock(e.unref(K),{key:0,vnode:()=>e.unref(R)("itemIconRender",E())},null,8,["vnode"])):typeof t.svgIcon=="string"&&t.svgIcon?(e.openBlock(),e.createElementBlock("svg",e.mergeProps({key:1,class:"icon svg"},t.svgProps),[e.createElementVNode("use",{"xlink:href":t.svgIcon},null,8,Qe)],16)):typeof e.unref(W)!="string"?(e.openBlock(),e.createBlock(e.unref(K),{key:2,vnode:e.unref(W),data:e.unref(W)},null,8,["vnode","data"])):typeof e.unref(W)=="string"&&e.unref(W)!==""?(e.openBlock(),e.createElementBlock("i",{key:3,class:e.normalizeClass(e.unref(W)+" icon "+e.unref(O)+" "+e.unref(p).iconFontClass)},null,2)):e.createCommentVNode("",!0)]),t.checked?e.renderSlot(M.$slots,"check",{key:0},()=>[e.unref(d)("itemCheckRender")?(e.openBlock(),e.createBlock(e.unref(K),{key:0,vnode:()=>e.unref(R)("itemCheckRender",E())},null,8,["vnode"])):e.createCommentVNode("",!0),e.createVNode(Ye)]):e.createCommentVNode("",!0)],2),e.renderSlot(M.$slots,"label",{},()=>[e.unref(d)("itemLabelRender")?(e.openBlock(),e.createBlock(e.unref(K),{key:0,vnode:()=>e.unref(R)("itemLabelRender",E())},null,8,["vnode"])):typeof e.unref(S)=="string"?(e.openBlock(),e.createElementBlock("span",et,e.toDisplayString(e.unref(S)),1)):(e.openBlock(),e.createBlock(e.unref(K),{key:2,vnode:e.unref(S),data:e.unref(S)},null,8,["vnode","data"]))])]),e.createElementVNode("div",tt,[e.unref(x)||M.$slots.shortcut?e.renderSlot(M.$slots,"shortcut",{key:0},()=>[e.unref(d)("itemShortcutRender")?(e.openBlock(),e.createBlock(e.unref(K),{key:0,vnode:()=>e.unref(R)("itemShortcutRender",E())},null,8,["vnode"])):e.createCommentVNode("",!0),e.createElementVNode("span",nt,e.toDisplayString(e.unref(x)),1)]):e.createCommentVNode("",!0),e.unref(v)?e.renderSlot(M.$slots,"rightArrow",{key:1},()=>[e.unref(d)("itemRightArrowRender")?(e.openBlock(),e.createBlock(e.unref(K),{key:0,vnode:()=>e.unref(R)("itemRightArrowRender",E())},null,8,["vnode"])):e.createCommentVNode("",!0),e.createVNode(qe)]):e.createCommentVNode("",!0)])])],34)),e.renderSlot(M.$slots,"submenu",{context:_,show:I.value})],512))}}),ot=e.defineComponent({name:"ContextMenuSperator",components:{VNodeRender:K},setup(){const t=e.inject("globalHasSlot"),s=e.inject("globalRenderSlot");return{globalHasSlot:t,globalRenderSlot:s}}}),lt={key:1,class:"mx-context-menu-item-sperator mx-context-no-clickable"};function st(t,s,r,i,h,n){const B=e.resolveComponent("VNodeRender");return t.globalHasSlot("separatorRender")?(e.openBlock(),e.createBlock(B,{key:0,vnode:()=>t.globalRenderSlot("separatorRender",{})},null,8,["vnode"])):(e.openBlock(),e.createElementBlock("div",lt))}const J=ne(ot,[["render",st]]),re=e.defineComponent({__name:"ContextSubMenu",props:{items:{type:Object,default:null},show:{type:Boolean,default:!1},maxHeight:{type:Number,default:0},maxWidth:{type:[String,Number],default:0},minWidth:{type:[String,Number],default:0},adjustPosition:{type:Boolean,default:!0},direction:{type:String,default:"br"},parentMenuItemContext:{type:Object,default:null}},emits:["closeAnimFinished"],setup(t,{expose:s,emit:r}){const i=t,h=r,n=e.ref(!1),B=e.inject("globalGetMenuHostId",""),u=e.inject("menuContext"),C=e.inject("globalOptions");e.inject("globalHasSlot"),e.inject("globalRenderSlot");const{zIndex:f,getParentWidth:S,getParentHeight:W,getZoom:O}=u,{adjustPosition:v}=e.toRefs(i),x=e.ref(),k=e.ref(),I=e.ref(),c=[],m=e.inject("globalSetCurrentSubMenu"),p=[];let d=null,R=0;function g(){d&&d.blur()}function b(a,y){if(a){for(let o=y!==void 0?y:0;o<p.length;o++)if(!p[o].isDisabledOrHidden()){_(o);break}}else for(let o=y!==void 0?y:p.length-1;o>=0;o--)if(!p[o].isDisabledOrHidden()){_(o);break}}function _(a){var o;if(d&&g(),a!==void 0&&(d=p[Math.max(0,Math.min(a,p.length-1))]),!d)return;d.focus();const y=d.getElement();y&&((o=x.value)==null||o.scrollTo(0,Math.min(Math.max(-T.value,-y.offsetTop-y.offsetHeight+F.value),0)))}function N(){m($)}const $={isTopLevel:()=>u.getParentContext()===null,closeSelfAndActiveParent:()=>{const a=M.getParentContext();if(a){a.closeOtherSubMenu();const y=a.getSubMenuInstanceContext();if(y)return y.focusCurrentItem(),!0}return!1},closeCurrentSubMenu:()=>{var a;return(a=M.getParentContext())==null?void 0:a.closeOtherSubMenu()},moveCurrentItemFirst:()=>b(!0),moveCurrentItemLast:()=>b(!1),moveCurrentItemDown:()=>b(!0,d?p.indexOf(d)+1:0),moveCurrentItemUp:()=>b(!1,d?p.indexOf(d)-1:0),focusCurrentItem:()=>_(),openCurrentItemSubMenu:()=>d?d==null?void 0:d.showSubMenu():!1,triggerCurrentItemClick:a=>d==null?void 0:d.click(a)};let V=!1,E=!1;const M={zIndex:f+1,container:u.container,adjustPadding:C.value.adjustPadding||D.defaultAdjustPadding,getParentWidth:()=>{var a;return((a=I.value)==null?void 0:a.offsetWidth)||0},getParentHeight:()=>{var a;return((a=I.value)==null?void 0:a.offsetHeight)||0},getPositon:()=>[w.value.x,w.value.y],getZoom:()=>C.value.zoom||D.defaultZoom,addOpenedSubMenu(a){c.push(a)},closeOtherSubMenu(){c.forEach(a=>a()),c.splice(0,c.length),m($)},checkCloseOtherSubMenuTimeOut(){return R?(clearTimeout(R),R=0,!0):!1},closeOtherSubMenuWithTimeOut(){R=setTimeout(()=>{R=0,this.closeOtherSubMenu()},200)},addChildMenuItem:(a,y)=>{y===void 0?p.push(a):p.splice(y,0,a)},removeChildMenuItem:a=>{p.splice(p.indexOf(a),1),a.getSubMenuInstance=()=>{}},markActiveMenuItem:(a,y=!1)=>{g(),d=a,y&&_()},markThisOpenedByKeyBoard:()=>{V=!0},isOpenedByKeyBoardFlag:()=>V?(V=!1,!0):!1,isMenuItemDataCollectedFlag:()=>E,getElement:()=>I.value||null,getParentContext:()=>u,getSubMenuInstanceContext:()=>$};e.provide("menuContext",M);const P={getChildItem:a=>p[a],getMenuDimensions:()=>k.value?{width:k.value.offsetWidth,height:k.value.offsetHeight}:{width:0,height:0},getSubmenuRoot:()=>k.value,getMenu:()=>I.value,getScrollValue:()=>{var a,y;return((y=(a=x.value)==null?void 0:a.getScrollContainer())==null?void 0:y.scrollTop)||0},setScrollValue:a=>{var y;return(y=x.value)==null?void 0:y.scrollTo(0,a)},getScrollHeight:()=>T.value,adjustPosition:()=>{G()},getMaxHeight:()=>F.value,getPosition:()=>w.value,setPosition:(a,y)=>{w.value.x=a,w.value.y=y}},L=e.inject("menuItemInstance",void 0);L&&(L.getSubMenuInstance=()=>P);const T=e.ref(0),F=e.ref(0),q=e.ref(!1),w=e.ref({x:0,y:0});function G(){e.nextTick(()=>{const a=I.value,y=k.value;if(a&&y&&x.value){const{container:o}=u,l=(S==null?void 0:S())??0,H=(W==null?void 0:W())??0,A=getComputedStyle(y),j=parseFloat(A.paddingLeft),Y=parseFloat(A.paddingTop),ie=H>0?Y:0,mt=document.documentElement.scrollHeight/O(),pt=document.documentElement.scrollWidth/O(),gt=Math.min(pt,o.offsetWidth),we=Math.min(mt,o.offsetHeight);let ce=Z(a,o),ue=X(a,o);i.direction.includes("l")?w.value.x-=a.offsetWidth+j:i.direction.includes("r")?w.value.x+=l+j:(w.value.x+=l/2,w.value.x-=(a.offsetWidth+j)/2),i.direction.includes("t")?w.value.y-=(a.offsetHeight+Y*2)/O():i.direction.includes("b")?w.value.y-=Y/O():w.value.y-=(a.offsetHeight+Y)/2/O(),e.nextTick(()=>{var We,_e;ce=Z(a,o),ue=X(a,o);const Be=((_e=(We=x.value)==null?void 0:We.getScrollContainer())==null?void 0:_e.scrollHeight)||0,Ct=i.maxHeight;T.value=i.maxHeight?Math.min(Be,i.maxHeight):Be;const bt=ce+a.offsetWidth-gt,Ie=ue+T.value+ie*2-we;if(q.value=Ie>0,v.value&&bt>0){const ee=l+a.offsetWidth-j,te=ce;ee>te?w.value.x-=te:w.value.x-=ee}if(q.value){if(v.value){const ee=Ie,te=ue;ee>te?w.value.y-=te-ie:w.value.y-=ee-ie}F.value=we-(w.value.y+Y)}else F.value=Ct||0})}a==null||a.focus({preventScroll:!0}),u.isOpenedByKeyBoardFlag()&&b(!0),E=!0})}function ve(){}function le(){var y;const a=(y=i.parentMenuItemContext)==null?void 0:y.getElement();if(a){const o=Z(a,u.container),l=X(a,u.container);w.value.x=o,w.value.y=l}else{const[o,l]=u.getPositon();w.value.x=o,w.value.y=l}G()}return e.watch(()=>i.show,a=>{a?le():void 0}),e.onMounted(()=>{n.value=!0,m($),le()}),e.onBeforeUnmount(()=>{n.value=!1,L&&(L.getSubMenuInstance=()=>{})}),s(P),(a,y)=>{const o=e.resolveComponent("ContextSubMenu",!0);return n.value?(e.openBlock(),e.createBlock(e.Teleport,{key:0,to:`#${e.unref(B)}`},[e.createVNode(e.Transition,e.mergeProps({appear:""},e.unref(C).menuTransitionProps||{duration:10},{onAfterLeave:y[0]||(y[0]=l=>h("closeAnimFinished"))}),{default:e.withCtx(()=>[t.show?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0,ref_key:"submenuRoot",ref:k},a.$attrs,{class:["mx-context-menu",e.unref(C).customClass?e.unref(C).customClass:"",e.unref(C).theme??""],style:{maxWidth:t.maxWidth?e.unref(me)(t.maxWidth):`${e.unref(D).defaultMaxWidth}px`,minWidth:t.minWidth?e.unref(me)(t.minWidth):`${e.unref(D).defaultMinWidth}px`,zIndex:e.unref(f),left:`${w.value.x}px`,top:`${w.value.y}px`},"data-type":"ContextSubMenu",onClick:N}),[e.createVNode(e.unref(ze),{ref_key:"scrollRectRef",ref:x,scroll:"vertical",maxHeight:F.value,containerClass:"mx-context-menu-scroll"},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(["mx-context-menu-items"]),ref_key:"menu",ref:I},[e.renderSlot(a.$slots,"default",{},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,(l,H)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:H},[l.hidden!==!0&&l.divided==="up"?(e.openBlock(),e.createBlock(J,{key:0})):e.createCommentVNode("",!0),l.hidden!==!0&&l.divided==="self"?(e.openBlock(),e.createBlock(J,{key:1})):(e.openBlock(),e.createBlock(oe,{key:2,clickHandler:l.onClick?A=>l.onClick(A):void 0,disabled:typeof l.disabled=="object"?l.disabled.value:l.disabled,hidden:typeof l.hidden=="object"?l.hidden.value:l.hidden,icon:l.icon,iconFontClass:l.iconFontClass,svgIcon:l.svgIcon,svgProps:l.svgProps,label:l.label,customRender:l.customRender,customClass:l.customClass,checked:typeof l.checked=="object"?l.checked.value:l.checked,shortcut:l.shortcut,clickClose:l.clickClose,clickableWhenHasChildren:l.clickableWhenHasChildren,preserveIconWidth:l.preserveIconWidth!==void 0?l.preserveIconWidth:e.unref(C).preserveIconWidth,showRightArrow:l.children&&l.children.length>0,hasChildren:l.children&&l.children.length>0,rawMenuItem:l,onSubMenuOpen:A=>{var j;return(j=l.onSubMenuOpen)==null?void 0:j.call(l,A)},onSubMenuClose:A=>{var j;return(j=l.onSubMenuClose)==null?void 0:j.call(l,A)}},e.createSlots({_:2},[l.children&&l.children.length>0?{name:"submenu",fn:e.withCtx(({context:A,show:j})=>[e.createVNode(o,{show:j,parentMenuItemContext:A,items:l.children,maxWidth:l.maxWidth,minWidth:l.minWidth,maxHeight:l.maxHeight,adjustPosition:l.adjustSubMenuPosition!==void 0?l.adjustSubMenuPosition:e.unref(C).adjustPosition,direction:l.direction!==void 0?l.direction:e.unref(C).direction},null,8,["show","parentMenuItemContext","items","maxWidth","minWidth","maxHeight","adjustPosition","direction"])]),key:"0"}:void 0]),1032,["clickHandler","disabled","hidden","icon","iconFontClass","svgIcon","svgProps","label","customRender","customClass","checked","shortcut","clickClose","clickableWhenHasChildren","preserveIconWidth","showRightArrow","hasChildren","rawMenuItem","onSubMenuOpen","onSubMenuClose"])),l.hidden!==!0&&(l.divided==="down"||l.divided===!0)?(e.openBlock(),e.createBlock(J,{key:3})):e.createCommentVNode("",!0)],64))),128))])],512)]),_:3},8,["maxHeight"])],16)):e.createCommentVNode("",!0)]),_:3},16)],8,["to"])):e.createCommentVNode("",!0)}}}),xt="",ye=e.defineComponent({__name:"ContextSubMenuWrapper",props:{options:{type:Object,default:null},show:{type:null,default:null},container:{type:Object,default:null},isFullScreenContainer:{type:Boolean,default:!0}},emits:["close","closeAnimFinished"],setup(t,{expose:s,emit:r}){const i=t,h=r,n=e.useSlots(),B=e.ref(),{options:u,show:C,container:f}=e.toRefs(i);e.onMounted(()=>{C.value&&O()}),e.onBeforeUnmount(()=>{I()}),e.watch(C,g=>{g?O():(de(S),I())});const S={closeMenu:v,isClosed:x,getMenuRef:()=>B.value,getMenuDimensions:()=>{var g;return((g=B.value)==null?void 0:g.getMenuDimensions())??{width:0,height:0}}};let W=!1;function O(){k(),He(S)}function v(g){W=!0,h("close",g),u.value.menuTransitionProps||h("closeAnimFinished"),de(S)}function x(){return W}function k(){setTimeout(()=>{document.addEventListener("click",d,!0),document.addEventListener("contextmenu",d,!0),document.addEventListener("scroll",p,!0),!i.isFullScreenContainer&&f.value&&f.value.addEventListener("scroll",p,!0),u.value.keyboardControl!==!1&&document.addEventListener("keydown",m,!0)},50)}function I(){document.removeEventListener("contextmenu",d,!0),document.removeEventListener("click",d,!0),document.removeEventListener("scroll",p,!0),!i.isFullScreenContainer&&f.value&&f.value.removeEventListener("scroll",p,!0),u.value.keyboardControl!==!1&&document.removeEventListener("keydown",m,!0)}const c=e.ref();e.provide("globalSetCurrentSubMenu",g=>c.value=g),e.provide("globalGetMenuHostId",f.value.id);function m(g){var _,N,$,V,E,M,P,L,T,F,q,w,G;let b=!0;switch(g.key){case"Escape":{((_=c.value)==null?void 0:_.isTopLevel())===!1?(N=c.value)==null||N.closeCurrentSubMenu():v();break}case"ArrowDown":($=c.value)==null||$.moveCurrentItemDown();break;case"ArrowUp":(V=c.value)==null||V.moveCurrentItemUp();break;case"Home":(E=c.value)==null||E.moveCurrentItemFirst();break;case"End":(M=c.value)==null||M.moveCurrentItemLast();break;case"ArrowLeft":{(P=c.value)!=null&&P.closeSelfAndActiveParent()||(T=(L=u.value).onKeyFocusMoveLeft)==null||T.call(L);break}case"ArrowRight":(F=c.value)!=null&&F.openCurrentItemSubMenu()||(w=(q=u.value).onKeyFocusMoveRight)==null||w.call(q);break;case"Enter":(G=c.value)==null||G.triggerCurrentItemClick(g);break;default:b=!1;break}b&&c.value&&(g.stopPropagation(),g.preventDefault())}function p(g){u.value.closeWhenScroll!==!1&&R(g.target,null)}function d(g){R(g.target,g)}function R(g,b){var _,N;for(;g;){if(g.classList&&g.classList.contains("mx-context-menu"))return;g=g.parentNode}b?u.value.clickCloseOnOutside!==!1?(I(),v()):(N=(_=u.value).onClickOnOutside)==null||N.call(_,b):(I(),v())}return e.provide("globalOptions",u),e.provide("globalCloseMenu",v),e.provide("globalIsFullScreenContainer",i.isFullScreenContainer),e.provide("globalHasSlot",g=>n[g]!==void 0),e.provide("globalRenderSlot",(g,b)=>e.renderSlot(n,g,{...b},()=>[e.h("span","Render slot failed")],!1)),e.provide("menuContext",{zIndex:u.value.zIndex||D.defaultZindex,container:f.value,adjustPadding:{x:0,y:0},getZoom:()=>u.value.zoom||D.defaultZoom,getParentWidth:()=>0,getParentHeight:()=>0,getPositon:()=>[u.value.x,u.value.y],closeOtherSubMenuWithTimeOut:()=>{},checkCloseOtherSubMenuTimeOut:()=>!1,addOpenedSubMenu:()=>{},closeOtherSubMenu:()=>{},getParentContext:()=>null,getSubMenuInstanceContext:()=>null,getElement:()=>null,addChildMenuItem:()=>{},removeChildMenuItem:()=>{},markActiveMenuItem:()=>{},markThisOpenedByKeyBoard:()=>{},isOpenedByKeyBoardFlag:()=>!1,isMenuItemDataCollectedFlag:()=>!1}),s(S),(g,b)=>(e.openBlock(),e.createBlock(re,{ref_key:"submenuInstance",ref:B,show:e.unref(C),items:e.unref(u).items,adjustPosition:e.unref(u).adjustPosition,maxWidth:e.unref(u).maxWidth||e.unref(D).defaultMaxWidth,minWidth:e.unref(u).minWidth||e.unref(D).defaultMinWidth,maxHeight:e.unref(u).maxHeight,direction:e.unref(u).direction||e.unref(D).defaultDirection,onCloseAnimFinished:b[0]||(b[0]=_=>h("closeAnimFinished"))},{default:e.withCtx(()=>[e.renderSlot(g.$slots,"default")]),_:3},8,["show","items","adjustPosition","maxWidth","minWidth","maxHeight","direction"]))}}),Mt="",xe=e.defineComponent({__name:"ContextMenu",props:{options:{type:Object,default:null},show:{type:Boolean,default:!1}},emits:["update:show","close"],setup(t,{expose:s,emit:r}){const i=r,h=t,{options:n,show:B}=e.toRefs(h),{isNew:u,container:C,eleId:f}=he(n.value),S=e.ref(null),W=e.useSlots();function O(v){var x,k;i("update:show",!1),i("close"),(k=(x=n.value).onClose)==null||k.call(x,v)}return s({closeMenu:()=>i("update:show",!1),isClosed:()=>!B.value,getMenuRef:()=>{var v;return(v=S.value)==null?void 0:v.getMenuRef()},getMenuDimensions:()=>{var v;return((v=S.value)==null?void 0:v.getMenuDimensions())??{width:0,height:0}}}),(v,x)=>(e.openBlock(),e.createBlock(e.Teleport,{to:`#${e.unref(f)}`},[e.createVNode(ye,{ref_key:"menuRef",ref:S,options:e.unref(n),show:e.unref(B),container:e.unref(C),isFullScreenContainer:!e.unref(u),onClose:O},e.createSlots({_:2},[e.renderList(e.unref(W),(k,I)=>({name:I,fn:e.withCtx(c=>[e.renderSlot(v.$slots,I,e.normalizeProps(e.guardReactiveProps(c)))])}))]),1032,["options","show","container","isFullScreenContainer"])],8,["to"]))}}),Me=e.defineComponent({name:"ContextMenuGroup",props:{disabled:{type:Boolean,default:!1},hidden:{type:Boolean,default:!1},clickHandler:{type:Function,default:null},label:{type:String,default:""},icon:{type:String,default:""},iconFontClass:{type:String,default:"iconfont"},checked:{type:Boolean,default:!1},shortcut:{type:String,default:""},svgIcon:{type:String,default:""},svgProps:{type:Object,default:null},preserveIconWidth:{type:Boolean,default:!0},showRightArrow:{type:Boolean,default:!1},clickClose:{type:Boolean,default:!0},adjustSubMenuPosition:{type:Boolean,default:void 0},maxHeight:{type:[String,Number],default:0},maxWidth:{type:[String,Number],default:0},minWidth:{type:[String,Number],default:0}},setup(t,s){const r=e.inject("globalOptions"),{adjustSubMenuPosition:i,maxWidth:h,minWidth:n,maxHeight:B}=e.toRefs(t),u=typeof i.value<"u"?i.value:r.value.adjustPosition,C=e.ref(),f=e.ref();return s.expose({getSubMenuRef:()=>C.value,getMenuItemRef:()=>f.value}),()=>e.h(oe,{...t,ref:f,showRightArrow:!0,maxWidth:void 0,minWidth:void 0,maxHeight:void 0,adjustSubMenuPosition:void 0,hasChildren:typeof s.slots.default!==void 0},s.slots.default?{submenu:S=>e.h(re,{ref:C,show:S.show,maxWidth:h.value,minWidth:n.value,maxHeight:B.value,adjustPosition:u,parentMenuItemContext:S.context},{default:s.slots.default}),...$e(s.slots,"default")}:s.slots)}});function rt(t,s,r,i){const h=e.ref(!0),n=e.h(ye,{options:t,show:h,container:s,isFullScreenContainer:!r,onCloseAnimFinished:()=>{e.render(null,s)},onClose:B=>{var u;(u=t.onClose)==null||u.call(t,B),h.value=!1}},i);return e.render(n,s),n.component}function Se(t,s){const r=he(t);return rt(t,r.container,r.isNew,s).exposed}const ae={install(t){t.config.globalProperties.$contextmenu=Se,t.component("ContextMenu",xe),t.component("ContextMenuItem",oe),t.component("ContextMenuGroup",Me),t.component("ContextMenuSperator",J),t.component("ContextMenuSeparator",J),t.component("ContextSubMenu",re)},showContextMenu(t,s){return Se(t,s)},isAnyContextMenuOpen(){return Re()},closeContextMenu:fe,transformMenuPosition:Oe},at={},it={class:"mx-menu-bar-icon-menu",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"200",height:"200"},ct=[e.createElementVNode("path",{d:"M133.310936 296.552327l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949 0-19.781623-15.997312-35.950949-35.950949-35.950949L133.310936 224.650428c-19.781623 0-35.950949 16.169326-35.950949 35.950949C97.359987 280.383 113.529313 296.552327 133.310936 296.552327z"},null,-1),e.createElementVNode("path",{d:"M890.51705 476.135058 133.310936 476.135058c-19.781623 0-35.950949 16.169326-35.950949 35.950949 0 19.781623 16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949C926.467999 492.304384 910.298673 476.135058 890.51705 476.135058z"},null,-1),e.createElementVNode("path",{d:"M890.51705 727.447673 133.310936 727.447673c-19.781623 0-35.950949 15.997312-35.950949 35.950949s16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-15.997312 35.950949-35.950949S910.298673 727.447673 890.51705 727.447673z"},null,-1)];function ut(t,s){return e.openBlock(),e.createElementBlock("svg",it,ct)}const dt=ne(at,[["render",ut]]),ft=["onClick","onMouseenter"],ht=e.defineComponent({__name:"MenuBar",props:{options:{type:Object,default:null}},setup(t){const s=t,r=e.ref(),i=e.ref(!1),h=e.ref([]),n=e.ref(null);function B(){i.value=!0}function u(){i.value=!1}e.onMounted(()=>{h.value=s.options.items||[]}),e.watch(()=>s.options,()=>{h.value=s.options.items||[]});let C=null,f=-1;function S(){f<h.value.length-1?f++:f=0,v(f,h.value[f])}function W(){f>0?f--:f=h.value.length-1,v(f,h.value[f])}function O(c){const m=s.options.barPopDirection??"bl";let p=0,d=0;return m.startsWith("b")?d=X(c)+c.offsetHeight:m.startsWith("t")?d=X(c):d=X(c)+c.offsetHeight/2,m.endsWith("l")?p=Z(c):m.startsWith("r")?p=Z(c)+c.offsetWidth:p=Z(c)+c.offsetWidth/2,{x:p,y:d+5}}function v(c,m){var d;if(f=c,!m.children)return;C&&(C.closeMenu(),C=null,i.value=!0),n.value=m;const p=(d=r.value)==null?void 0:d.children[c];if(p){const{x:R,y:g}=O(p);C=ae.showContextMenu({...s.options,items:m.children,x:R,y:g,onKeyFocusMoveLeft(){W()},onKeyFocusMoveRight(){S()},onClose(){n.value==m&&(i.value=!1,n.value=null),typeof m.onSubMenuClose=="function"&&m.onSubMenuClose(void 0)}}),C&&typeof m.onSubMenuOpen=="function"&&m.onSubMenuOpen(void 0)}}function x(){f=0;const c=r.value;if(c){const{x:m,y:p}=O(c);C=ae.showContextMenu({...s.options,x:m,y:p})}}function k(c,m){m?(i.value=!0,v(c,m),m.onClick&&(m.clickableWhenHasChildren===!0&&m.children&&m.children.length>0||!m.children||m.children.length===0)&&m.onClick()):x()}function I(c,m){i.value&&v(c,m)}return(c,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["mx-menu-bar",t.options.theme??"",t.options.mini?"mini":""]),onFocus:B,onBlur:u},[e.renderSlot(c.$slots,"prefix"),t.options.mini?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"menuBarContent",ref:r,class:"mx-menu-bar-content"},[e.createElementVNode("div",{class:"mx-menu-bar-item",onClick:m[0]||(m[0]=p=>k(0,null))},[e.createVNode(dt)])],512)):(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"menuBarContent",ref:r,class:"mx-menu-bar-content"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.value,(p,d)=>(e.openBlock(),e.createElementBlock("div",{key:d,class:e.normalizeClass(["mx-menu-bar-item",p==n.value?"active":""]),onClick:R=>k(d,p),onMouseenter:R=>I(d,p)},e.toDisplayString(p.label),43,ft))),128))],512)),e.renderSlot(c.$slots,"suffix")],34))}}),Bt="";z.ContextMenu=xe,z.ContextMenuGroup=Me,z.ContextMenuItem=oe,z.ContextMenuSeparator=J,z.MenuBar=ht,z.default=ae,Object.defineProperties(z,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); //# sourceMappingURL=vue3-context-menu.umd.js.map