@w3cways/vue2-context-menu
Version:
Vue2 contextmenu
1 lines • 13.3 kB
JavaScript
(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["contextmenu"]=t(require("vue")):e["contextmenu"]=t(e["Vue"])})("undefined"!==typeof self?self:this,(e=>(()=>{var t={620:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>c});var i=n(93),s=n.n(i),o=n(466),a=n.n(o),r=a()(s());r.push([e.id,".menu[data-v-a4ecc568]{position:fixed;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);background:#fff;border-radius:4px;padding:8px 0}.menu_body[data-v-a4ecc568]{display:block}.menu_item[data-v-a4ecc568]{list-style:none;line-height:32px;padding:0 16px;margin:0;font-size:13px;outline:0;display:flex;align-items:center;transition:.2s;border-bottom:1px solid #00000000}.menu_item__divided[data-v-a4ecc568]{border-bottom-color:#ebeef5}.menu_item .menu_item_icon[data-v-a4ecc568]{margin-right:8px;width:13px}.menu_item .menu_item_label[data-v-a4ecc568]{flex:1}.menu_item .menu_item_expand_icon[data-v-a4ecc568]{margin-left:16px;font-size:6px;width:10px}.menu_item__available[data-v-a4ecc568]{color:#606266;cursor:pointer}.menu_item__available[data-v-a4ecc568]:hover{background:#ecf5ff;color:#409eff}.menu_item__disabled[data-v-a4ecc568]{color:#c0c4cc;cursor:not-allowed}.menu_item_expand[data-v-a4ecc568]{background:#ecf5ff;color:#409eff}",""]);const c=r},741:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>c});var i=n(93),s=n.n(i),o=n(466),a=n.n(o),r=a()(s());r.push([e.id,".contextmenu-submenu-fade-enter-active,.contextmenu-submenu-fade-leave-active{transition:opacity .1s}.contextmenu-submenu-fade-enter,.contextmenu-submenu-fade-leave-to{opacity:0}",""]);const c=r},466:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",i="undefined"!==typeof t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),i&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),i&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,i,s,o){"string"===typeof e&&(e=[[null,e,void 0]]);var a={};if(i)for(var r=0;r<this.length;r++){var c=this[r][0];null!=c&&(a[c]=!0)}for(var u=0;u<e.length;u++){var d=[].concat(e[u]);i&&a[d[0]]||("undefined"!==typeof o&&("undefined"===typeof d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=o),n&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=n):d[2]=n),s&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=s):d[4]="".concat(s)),t.push(d))}},t}},93:e=>{"use strict";e.exports=function(e){return e[1]}},733:(e,t,n)=>{var i=n(620);i.__esModule&&(i=i.default),"string"===typeof i&&(i=[[e.id,i,""]]),i.locals&&(e.exports=i.locals);var s=n(740).Z;s("e2ab0fea",i,!0,{sourceMap:!1,shadowMode:!1})},876:(e,t,n)=>{var i=n(741);i.__esModule&&(i=i.default),"string"===typeof i&&(i=[[e.id,i,""]]),i.locals&&(e.exports=i.locals);var s=n(740).Z;s("dcb9a3fe",i,!0,{sourceMap:!1,shadowMode:!1})},740:(e,t,n)=>{"use strict";function i(e,t){for(var n=[],i={},s=0;s<t.length;s++){var o=t[s],a=o[0],r=o[1],c=o[2],u=o[3],d={id:e+":"+s,css:r,media:c,sourceMap:u};i[a]?i[a].parts.push(d):n.push(i[a]={id:a,parts:[d]})}return n}n.d(t,{Z:()=>p});var s="undefined"!==typeof document;if("undefined"!==typeof DEBUG&&DEBUG&&!s)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var o={},a=s&&(document.head||document.getElementsByTagName("head")[0]),r=null,c=0,u=!1,d=function(){},l=null,m="data-vue-ssr-id",h="undefined"!==typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function p(e,t,n,s){u=n,l=s||{};var a=i(e,t);return f(a),function(t){for(var n=[],s=0;s<a.length;s++){var r=a[s],c=o[r.id];c.refs--,n.push(c)}t?(a=i(e,t),f(a)):a=[];for(s=0;s<n.length;s++){c=n[s];if(0===c.refs){for(var u=0;u<c.parts.length;u++)c.parts[u]();delete o[c.id]}}}}function f(e){for(var t=0;t<e.length;t++){var n=e[t],i=o[n.id];if(i){i.refs++;for(var s=0;s<i.parts.length;s++)i.parts[s](n.parts[s]);for(;s<n.parts.length;s++)i.parts.push(_(n.parts[s]));i.parts.length>n.parts.length&&(i.parts.length=n.parts.length)}else{var a=[];for(s=0;s<n.parts.length;s++)a.push(_(n.parts[s]));o[n.id]={id:n.id,refs:1,parts:a}}}}function v(){var e=document.createElement("style");return e.type="text/css",a.appendChild(e),e}function _(e){var t,n,i=document.querySelector("style["+m+'~="'+e.id+'"]');if(i){if(u)return d;i.parentNode.removeChild(i)}if(h){var s=c++;i=r||(r=v()),t=x.bind(null,i,s,!1),n=x.bind(null,i,s,!0)}else i=v(),t=b.bind(null,i),n=function(){i.parentNode.removeChild(i)};return t(e),function(i){if(i){if(i.css===e.css&&i.media===e.media&&i.sourceMap===e.sourceMap)return;t(e=i)}else n()}}var y=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}();function x(e,t,n,i){var s=n?"":i.css;if(e.styleSheet)e.styleSheet.cssText=y(t,s);else{var o=document.createTextNode(s),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(o,a[t]):e.appendChild(o)}}function b(e,t){var n=t.css,i=t.media,s=t.sourceMap;if(i&&e.setAttribute("media",i),l.ssrId&&e.setAttribute(m,t.id),s&&(n+="\n/*# sourceURL="+s.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(s))))+" */"),e.styleSheet)e.styleSheet.cssText=n;else{while(e.firstChild)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}},203:t=>{"use strict";t.exports=e}},n={};function i(e){var s=n[e];if(void 0!==s)return s.exports;var o=n[e]={id:e,exports:{}};return t[e](o,o.exports,i),o.exports}(()=>{i.n=e=>{var t=e&&e.__esModule?()=>e["default"]:()=>e;return i.d(t,{a:t}),t}})(),(()=>{i.d=(e,t)=>{for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})}})(),(()=>{i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t)})(),(()=>{i.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}})(),(()=>{i.p=""})();var s={};return(()=>{"use strict";if(i.r(s),i.d(s,{default:()=>M}),"undefined"!==typeof window){var e=window.document.currentScript,t=e&&e.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);t&&(i.p=t[1])}var n=i(203),o=i.n(n),a=function(){var e=this,t=e._self._c;return t("transition",{attrs:{name:"contextmenu-submenu-fade"}},[e.visible?t("div",{ref:"menu",class:[e.CLASS_MENU,"menu",e.customClass],style:{left:e.style.left+"px",top:e.style.top+"px",minWidth:e.style.minWidth+"px",zIndex:e.style.zIndex},on:{contextmenu:e=>e.preventDefault()}},[t("div",{staticClass:"menu_body"},[e._l(e.items,(function(n,i){return[n.hidden?e._e():[n.disabled?t("div",{key:i+"_disabled",class:[e.CLASS_MENU_ITEM,e.CLASS_MENU_ITEM_UNCLICKABLE,"menu_item","menu_item__disabled",n.divided?"menu_item__divided":null]},[e.hasIcon?t("div",{staticClass:"menu_item_icon"},[n.icon?t("i",{class:n.icon}):e._e()]):e._e(),t("span",{staticClass:"menu_item_label"},[e._v(e._s(n.label))]),t("div",{staticClass:"menu_item_expand_icon"})]):n.children?t("div",{key:i+"_children",class:[e.CLASS_MENU_ITEM,e.CLASS_MENU_ITEM_UNCLICKABLE,"menu_item","menu_item__available",e.activeSubmenu.index===i?"menu_item_expand":null,n.divided?"menu_item__divided":null],on:{mouseenter:t=>e.enterItem(t,n,i)}},[e.hasIcon?t("div",{staticClass:"menu_item_icon"},[n.icon?t("i",{class:n.icon}):e._e()]):e._e(),t("span",{staticClass:"menu_item_label"},[e._v(e._s(n.label))]),t("div",{staticClass:"menu_item_expand_icon"},[e._v("▶")])]):t("div",{key:i,class:[e.CLASS_MENU_ITEM,e.CLASS_MENU_ITEM_CLICKABLE,"menu_item","menu_item__available",n.divided?"menu_item__divided":null],on:{mouseenter:t=>e.enterItem(t,n,i),click:function(t){return e.itemClick(n)}}},[e.hasIcon?t("div",{staticClass:"menu_item_icon"},[n.icon?t("i",{class:n.icon}):e._e()]):e._e(),t("span",{staticClass:"menu_item_label"},[e._v(e._s(n.label))]),t("div",{staticClass:"menu_item_expand_icon"})])]]}))],2)]):e._e()])},r=[];const c=3,u=-8,d="left",l="right",m="contextmenu-submenu",h="contextmenu_menu",p="contextmenu_menu_item",f="contextmenu_menu_item_clickable",v="contextmenu_menu_item_unclickable",_={name:m,data(){return{CLASS_MENU:h,CLASS_MENU_ITEM:p,CLASS_MENU_ITEM_CLICKABLE:f,CLASS_MENU_ITEM_UNCLICKABLE:v,activeSubmenu:{index:null,instance:null},items:[],position:{x:0,y:0,width:0,height:0},style:{left:0,top:0,zIndex:2,minWidth:150},customClass:null,visible:!1,hasIcon:!1,openTrend:l}},mounted(){this.visible=!0;for(let e of this.items)if(e.icon){this.hasIcon=!0;break}this.$nextTick((()=>{const e=document.documentElement.clientWidth,t=document.documentElement.clientHeight,n=this.$refs.menu,i=n.offsetWidth,s=n.offsetHeight;(this.openTrend===d?this.leftOpen:this.rightOpen)(e,t,i),this.style.top=this.position.y,this.position.y+s>t&&(0===this.position.height?this.style.top=this.position.y/t>.5?this.position.y-s:this.position.y:this.style.top=t-s)}))},methods:{leftOpen(e,t,n){this.style.left=this.position.x-n,this.openTrend=d,this.style.left<0&&(this.openTrend=l,0===this.position.width?this.style.left=0:this.style.left=this.position.x+this.position.width)},rightOpen(e,t,n){this.style.left=this.position.x+this.position.width,this.openTrend=l,this.style.left+n>e&&(this.openTrend=d,0===this.position.width?this.style.left=e-n:this.style.left=this.position.x-n)},enterItem(e,t,n){if(!this.visible)return;if(this.activeSubmenu.instance){if(this.activeSubmenu.index===n)return;this.activeSubmenu.instance.close(),this.activeSubmenu.instance=null,this.activeSubmenu.index=null}if(!t.children)return;const i=e.target.getBoundingClientRect(),s=o().component(m);this.activeSubmenu.index=n,this.activeSubmenu.instance=new s,this.activeSubmenu.instance.items=t.children,this.activeSubmenu.instance.openTrend=this.openTrend,this.activeSubmenu.instance.position={x:i.x+c,y:i.y+u,width:i.width-2*c,height:i.height-2*u},this.activeSubmenu.instance.style.minWidth="number"===typeof t.minWidth?t.minWidth:this.style.minWidth,this.activeSubmenu.instance.style.zIndex=this.style.zIndex,this.activeSubmenu.instance.customClass="string"===typeof t.customClass?t.customClass:this.customClass,this.activeSubmenu.instance.$mount(),document.body.appendChild(this.activeSubmenu.instance.$el)},itemClick(e){if(this.visible)return!e||e.disabled||e.hidden||"function"!==typeof e.onClick?void 0:e.onClick()},close(){this.visible=!1,this.activeSubmenu.instance&&this.activeSubmenu.instance.close(),this.$nextTick((()=>{this.$destroy()}))}}},y=_;i(733),i(876);function x(e,t,n,i,s,o,a,r){var c,u="function"===typeof e?e.options:e;if(t&&(u.render=t,u.staticRenderFns=n,u._compiled=!0),i&&(u.functional=!0),o&&(u._scopeId="data-v-"+o),a?(c=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),s&&s.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},u._ssrRegister=c):s&&(c=r?function(){s.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:s),c)if(u.functional){u._injectStyles=c;var d=u.render;u.render=function(e,t){return c.call(t),d(e,t)}}else{var l=u.beforeCreate;u.beforeCreate=l?[].concat(l,c):[c]}return{exports:e,options:u}}var b=x(y,a,r,!1,null,"a4ecc568",null);const C=b.exports;function g(e){let t=[];for(let n of document.getElementsByClassName(e)||[])t.push(n);return t}o().component(m,C);class S{constructor(e){const t=o().component(m);this.instance=new t,this.instance.items=e.items,this.instance.position={x:e.event&&e.event.clientX||e.x||0,y:e.event&&e.event.clientY||e.y||0,width:0,height:0},e.minWidth&&(this.instance.style.minWidth=e.minWidth),e.zIndex&&(this.instance.style.zIndex=e.zIndex),this.instance.customClass=e.customClass,this.instance.$mount(),document.body.appendChild(this.instance.$el),this.addListener()}mousewheelListener(e){this.close()}mouseDownListener(e){let t=e.target;const n=g(h);while(!n.find((e=>e===t))&&t.parentElement)t=t.parentElement;n.find((e=>e===t))||this.close()}mouseClickListener(e){let t=e.target;const n=g(h),i=g(p),s=g(v);while(!n.find((e=>e===t))&&!i.find((e=>e===t))&&t.parentElement)t=t.parentElement;if(i.find((e=>e===t))){if(0!==e.button||s.find((e=>e===t)))return;this.close()}else n.find((e=>e===t))||this.close()}addListener(){this.mouseClickListenerProxy=e=>this.mouseClickListener(e),this.mouseDownListenerProxy=e=>this.mouseDownListener(e),this.mousewheelListenerProxy=e=>this.mousewheelListener(e),document.addEventListener("click",this.mouseClickListenerProxy),document.addEventListener("mousedown",this.mouseDownListenerProxy),document.addEventListener("mousewheel",this.mousewheelListenerProxy)}removeListener(){document.removeEventListener("click",this.mouseClickListenerProxy),document.removeEventListener("mousedown",this.mouseDownListenerProxy),document.removeEventListener("mousewheel",this.mousewheelListenerProxy)}close(){this.removeListener(),this.instance.close()}}function w(e){let t=null;const n=function(e){n.destroy(),t=new S(e)};n.destroy=function(){t&&(t.close(),t=null)},e.prototype.$contextmenu=n}window&&window.Vue&&w(window.Vue);const L={install:w},E=L,M=E})(),s})()));