UNPKG

@imengyu/vue3-context-menu

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