UNPKG

6.01 kBJavaScriptView Raw
1import{normalizeComponent as e}from"vue-runtime-helpers";var t={inserted(e,t,n){const i=n.context.$refs[t.arg]||n.context.$refs[t.value],s="[object Array]"===Object.prototype.toString.call(i)?i[0]:i;s.addRef({el:e,vnode:n}),s.$contextmenuId=e.id||s._uid}};const n={name:"VContextmenu",provide(){return{$$contextmenu:this}},props:{eventType:{type:String,default:"contextmenu"},theme:{type:String,default:"default"},autoPlacement:{type:Boolean,default:!0},disabled:Boolean},data:()=>({visible:!1,references:[],style:{top:0,left:0}}),computed:{clickOutsideHandler(){return this.visible?this.hide:()=>{}},isClick(){return"click"===this.eventType},contextmenuCls(){return["v-contextmenu",`v-contextmenu--${this.theme}`]}},watch:{visible(e){e?(this.$emit("show",this),document.body.addEventListener("click",this.handleBodyClick)):(this.$emit("hide",this),document.body.removeEventListener("click",this.handleBodyClick))}},mounted(){document.body.appendChild(this.$el),window.$$VContextmenu?window.$$VContextmenu[this.$contextmenuId]=this:window.$$VContextmenu={[this.$contextmenuId]:this}},beforeDestroy(){document.body.removeChild(this.$el),delete window.$$VContextmenu[this.$contextmenuId],this.references.forEach(e=>{e.el.removeEventListener(this.eventType,this.handleReferenceContextmenu)}),document.body.removeEventListener("click",this.handleBodyClick)},methods:{addRef(e){this.references.push(e),e.el.addEventListener(this.eventType,this.handleReferenceContextmenu)},handleReferenceContextmenu(e){if(e.preventDefault(),this.disabled)return;const t=this.references.find(t=>t.el.contains(e.target));this.$emit("contextmenu",t?t.vnode:null);const n=e.pageX,i=e.pageY;this.show(),this.$nextTick(()=>{const e={top:i,left:n};if(this.autoPlacement){const t=this.$refs.contextmenu.clientWidth,s=this.$refs.contextmenu.clientHeight;s+i>=window.innerHeight&&(e.top-=s),t+n>=window.innerWidth&&(e.left-=t)}this.style={top:`${e.top}px`,left:`${e.left}px`}})},handleBodyClick(e){this.$el.contains(e.target)||this.isClick&&this.references.some(t=>t.el.contains(e.target))||(this.visible=!1)},show(e){Object.keys(window.$$VContextmenu).forEach(e=>{e!==this.$contextmenuId&&window.$$VContextmenu[e].hide()}),e&&(this.style={top:`${e.top}px`,left:`${e.left}px`}),this.visible=!0},hide(){this.visible=!1},hideAll(){Object.keys(window.$$VContextmenu).forEach(e=>{window.$$VContextmenu[e].hide()})}}};var i=function(){var e=this.$createElement;return(this._self._c||e)("ul",{directives:[{name:"show",rawName:"v-show",value:this.visible,expression:"visible"}],ref:"contextmenu",class:this.contextmenuCls,style:this.style},[this._t("default")],2)};i._withStripped=!0;const s=e({render:i,staticRenderFns:[]},void 0,n,void 0,!1,void 0,!1,void 0,void 0,void 0);const o={name:"VContextmenuItem",inject:["$$contextmenu"],props:{divider:Boolean,disabled:Boolean,autoHide:{type:Boolean,default:!0}},data:()=>({hover:!1}),computed:{classname(){return{"v-contextmenu-item":!this.divider,"v-contextmenu-item--hover":this.hover,"v-contextmenu-item--disabled":this.disabled}}},methods:{handleMouseenter(e){this.disabled||(this.hover=!0,this.$emit("mouseenter",this,e))},handleMouseleave(e){this.disabled||(this.hover=!1,this.$emit("mouseleave",this,e))},handleClick(e){this.disabled||(this.$emit("click",this,e),this.autoHide&&this.$$contextmenu.hide())}}};var d=function(){var e=this.$createElement,t=this._self._c||e;return this.divider?t("li",{staticClass:"v-contextmenu-divider"}):t("li",{class:this.classname,on:{click:this.handleClick,mouseenter:this.handleMouseenter,mouseleave:this.handleMouseleave}},[this._t("default")],2)};d._withStripped=!0;const h=e({render:d,staticRenderFns:[]},void 0,o,void 0,!1,void 0,!1,void 0,void 0,void 0);const u={name:"VContextmenuSubmenu",props:{title:String,disabled:Boolean},data:()=>({hover:!1,submenuPlacement:[]}),computed:{classname(){return{"v-contextmenu-item":!0,"v-contextmenu-submenu":!0,"v-contextmenu-item--hover":this.hover,"v-contextmenu-item--disabled":this.disabled}},submenuCls(){return["v-contextmenu",...this.submenuPlacement]}},methods:{handleMouseenter(e){if(this.disabled)return;const{target:t}=e,n=t.getBoundingClientRect();this.hover=!0,this.$emit("mouseenter",this,e),this.$nextTick(()=>{const e=this.$refs.submenu.clientWidth,t=this.$refs.submenu.clientHeight,i=[];n.right+e>=window.innerWidth?i.push("left"):i.push("right"),n.bottom+t>=window.innerHeight?i.push("bottom"):i.push("top"),this.submenuPlacement=i})},handleMouseleave(e){this.disabled||(this.hover=!1,this.$emit("mouseleave",this,e))}}};var l=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("li",{class:e.classname,on:{mouseenter:e.handleMouseenter,mouseleave:e.handleMouseleave}},[n("span",{staticClass:"v-contextmenu-submenu__title"},[e._t("title",[e._v(e._s(e.title))]),e._v(" "),n("span",{staticClass:"v-contextmenu-iconfont v-contextmenu-submenu__icon"})],2),e._v(" "),n("ul",{directives:[{name:"show",rawName:"v-show",value:e.hover,expression:"hover"}],ref:"submenu",class:e.submenuCls},[e._t("default")],2)])};l._withStripped=!0;const r=e({render:l,staticRenderFns:[]},void 0,u,void 0,!1,void 0,!1,void 0,void 0,void 0);const a={name:"VContextmenuGroup",props:{maxWidth:[Number,String]},computed:{menusStyle(){if(!this.maxWidth)return null;return{"max-width":"number"==typeof this.maxWidth?`${this.maxWidth}px`:this.maxWidth,"overflow-x":"auto"}}}};var m=function(){var e=this.$createElement,t=this._self._c||e;return t("li",{staticClass:"v-contextmenu-group"},[t("ul",{staticClass:"v-contextmenu-group__menus",style:this.menusStyle},[this._t("default")],2)])};m._withStripped=!0;const c=e({render:m,staticRenderFns:[]},void 0,a,void 0,!1,void 0,!1,void 0,void 0,void 0),v=e=>{e.directive("contextmenu",t),e.component(s.name,s),e.component(h.name,h),e.component(r.name,r),e.component(c.name,c)};"undefined"!=typeof window&&window.Vue&&v(window.Vue);var p={install:v};export default p;export{s as Contextmenu,c as ContextmenuGroup,h as ContextmenuItem,r as ContextmenuSubmenu,t as directive};