UNPKG

h-vue-contextmenu

Version:
1 lines 15 kB
(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={641:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>l});var i=n(435),s=n.n(i),o=n(214),a=n.n(o),u=a()(s());u.push([e.id,".Contextmenu_menu_Oc4YL,.Contextmenu_menu_item_qlPAM,.Contextmenu_menu_item__clickable_uOLrt,.Contextmenu_menu_item__unclickable_UDjfn{box-sizing:border-box}",""]),u.locals={menu:"Contextmenu_menu_Oc4YL",menu_item:"Contextmenu_menu_item_qlPAM",menu_item__clickable:"Contextmenu_menu_item__clickable_uOLrt",menu_item__unclickable:"Contextmenu_menu_item__unclickable_UDjfn"};const l=u},543:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>l});var i=n(435),s=n.n(i),o=n(214),a=n.n(o),u=a()(s());u.push([e.id,".menu[data-v-44f1eda5]{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-44f1eda5]{display:block}.menu_item[data-v-44f1eda5]{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-44f1eda5]{border-bottom-color:#ebeef5}.menu_item .menu_item_icon[data-v-44f1eda5]{margin-right:8px;width:13px}.menu_item .menu_item_label[data-v-44f1eda5]{flex:1}.menu_item .menu_item_expand_icon[data-v-44f1eda5]{margin-left:16px;font-size:6px;width:10px}.menu_item__available[data-v-44f1eda5]{color:#606266;cursor:pointer}.menu_item__available[data-v-44f1eda5]:hover{background:#ecf5ff;color:#409eff}.menu_item__disabled[data-v-44f1eda5]{color:#c0c4cc;cursor:not-allowed}.menu_item_expand[data-v-44f1eda5]{background:#ecf5ff;color:#409eff}",""]);const l=u},389:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>l});var i=n(435),s=n.n(i),o=n(214),a=n.n(o),u=a()(s());u.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 l=u},214: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 u=0;u<this.length;u++){var l=this[u][0];null!=l&&(a[l]=!0)}for(var r=0;r<e.length;r++){var c=[].concat(e[r]);i&&a[c[0]]||("undefined"!==typeof o&&("undefined"===typeof c[5]||(c[1]="@layer".concat(c[5].length>0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=o),n&&(c[2]?(c[1]="@media ".concat(c[2]," {").concat(c[1],"}"),c[2]=n):c[2]=n),s&&(c[4]?(c[1]="@supports (".concat(c[4],") {").concat(c[1],"}"),c[4]=s):c[4]="".concat(s)),t.push(c))}},t}},435:e=>{"use strict";e.exports=function(e){return e[1]}},926:(e,t,n)=>{var i=n(641);i.__esModule&&(i=i.default),"string"===typeof i&&(i=[[e.id,i,""]]),i.locals&&(e.exports=i.locals);var s=n(504).Z;s("077c55e0",i,!0,{sourceMap:!1,shadowMode:!1})},468:(e,t,n)=>{var i=n(543);i.__esModule&&(i=i.default),"string"===typeof i&&(i=[[e.id,i,""]]),i.locals&&(e.exports=i.locals);var s=n(504).Z;s("32199a20",i,!0,{sourceMap:!1,shadowMode:!1})},932:(e,t,n)=>{var i=n(389);i.__esModule&&(i=i.default),"string"===typeof i&&(i=[[e.id,i,""]]),i.locals&&(e.exports=i.locals);var s=n(504).Z;s("6c19acea",i,!0,{sourceMap:!1,shadowMode:!1})},504:(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],u=o[1],l=o[2],r=o[3],c={id:e+":"+s,css:u,media:l,sourceMap:r};i[a]?i[a].parts.push(c):n.push(i[a]={id:a,parts:[c]})}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]),u=null,l=0,r=!1,c=function(){},d=null,m="data-vue-ssr-id",h="undefined"!==typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function p(e,t,n,s){r=n,d=s||{};var a=i(e,t);return f(a),function(t){for(var n=[],s=0;s<a.length;s++){var u=a[s],l=o[u.id];l.refs--,n.push(l)}t?(a=i(e,t),f(a)):a=[];for(s=0;s<n.length;s++){l=n[s];if(0===l.refs){for(var r=0;r<l.parts.length;r++)l.parts[r]();delete o[l.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(v(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(v(n.parts[s]));o[n.id]={id:n.id,refs:1,parts:a}}}}function _(){var e=document.createElement("style");return e.type="text/css",a.appendChild(e),e}function v(e){var t,n,i=document.querySelector("style["+m+'~="'+e.id+'"]');if(i){if(r)return c;i.parentNode.removeChild(i)}if(h){var s=l++;i=u||(u=_()),t=b.bind(null,i,s,!1),n=b.bind(null,i,s,!0)}else i=_(),t=x.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 b(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 x(e,t){var n=t.css,i=t.media,s=t.sourceMap;if(i&&e.setAttribute("media",i),d.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:()=>O}),"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("div")},u=[];function l(e){let t=[];for(let n of document.getElementsByClassName(e)||[])t.push(n);return t}const r=3,c=-8,d="left",m="right",h="contextmenu-submenu",p={data(){return{items:[],position:{x:0,y:0},style:{zIndex:2,minWidth:150},mainMenuInstance:null,customClass:null,mouseListening:!1}},mounted(){const e=o().component(h);this.mainMenuInstance=new e,this.mainMenuInstance.items=this.items,this.mainMenuInstance.commonClass={menu:this.$style.menu,menuItem:this.$style.menu_item,clickableMenuItem:this.$style.menu_item__clickable,unclickableMenuItem:this.$style.menu_item__unclickable},this.mainMenuInstance.position={x:this.position.x,y:this.position.y,width:0,height:0},this.mainMenuInstance.style.minWidth=this.style.minWidth,this.mainMenuInstance.style.zIndex=this.style.zIndex,this.mainMenuInstance.customClass=this.customClass,this.mainMenuInstance.$mount(),document.body.appendChild(this.mainMenuInstance.$el),this.addListener()},destroyed(){this.removeListener(),this.mainMenuInstance&&this.mainMenuInstance.close()},methods:{mousewheelListener(){this.$destroy()},mouseDownListener(e){let t=e.target;const n=l(this.$style.menu);while(!n.find((e=>e===t))&&t.parentElement)t=t.parentElement;n.find((e=>e===t))||this.$destroy()},mouseClickListener(e){let t=e.target;const n=l(this.$style.menu),i=l(this.$style.menu_item),s=l(this.$style.menu_item__unclickable);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.$destroy()}else n.find((e=>e===t))||this.$destroy()},addListener(){this.mouseListening||(document.addEventListener("click",this.mouseClickListener),document.addEventListener("mousedown",this.mouseDownListener),document.addEventListener("mousewheel",this.mousewheelListener),this.mouseListening=!0)},removeListener(){this.mouseListening&&(document.removeEventListener("click",this.mouseClickListener),document.removeEventListener("mousedown",this.mouseDownListener),document.removeEventListener("mousewheel",this.mousewheelListener),this.mouseListening=!1)}}},f=p;var _=i(926),v=i.n(_);function y(e,t,n,i,s,o,a,u){var l,r="function"===typeof e?e.options:e;if(t&&(r.render=t,r.staticRenderFns=n,r._compiled=!0),i&&(r.functional=!0),o&&(r._scopeId="data-v-"+o),a?(l=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)},r._ssrRegister=l):s&&(l=u?function(){s.call(this,(r.functional?this.parent:this).$root.$options.shadowRoot)}:s),l)if(r.functional){r._injectStyles=l;var c=r.render;r.render=function(e,t){return l.call(t),c(e,t)}}else{var d=r.beforeCreate;r.beforeCreate=d?[].concat(d,l):[l]}return{exports:e,options:r}}function b(e){this["$style"]=v().locals||v()}var x=y(f,a,u,!1,b,null,null);const g=x.exports;var C=function(){var e=this,t=e._self._c;return t("transition",{attrs:{name:"contextmenu-submenu-fade"}},[e.visible?t("div",{ref:"menu",class:[e.commonClass.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,class:[e.commonClass.menuItem,e.commonClass.unclickableMenuItem,"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,class:[e.commonClass.menuItem,e.commonClass.unclickableMenuItem,"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.commonClass.menuItem,e.commonClass.clickableMenuItem,"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()])},w=[];const I={name:h,data(){return{commonClass:{menu:null,menuItem:null,clickableMenuItem:null,unclickableMenuItem:null},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:m}},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;if((this.openTrend===d?this.leftOpen:this.rightOpen)(e,t,i),this.style.top=this.position.y,this.position.y+s>t)if(0===this.position.height){this.style.top=this.position.y-s;let e=this.position.y+s-t;this.style.top=this.position.y-e,this.position.y<t/2?this.position.y>s&&(this.style.top=this.position.y):this.position.y>s&&(this.style.top=this.position.y-s)}else 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=m,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=m,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(h);this.activeSubmenu.index=n,this.activeSubmenu.instance=new s,this.activeSubmenu.instance.items=t.children,this.activeSubmenu.instance.openTrend=this.openTrend,this.activeSubmenu.instance.commonClass=this.commonClass,this.activeSubmenu.instance.position={x:i.x+r,y:i.y+c,width:i.width-2*r,height:i.width},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.$refs.menu.remove(),this.visible=!1,this.activeSubmenu.instance&&this.activeSubmenu.instance.close(),this.$nextTick((()=>{this.$destroy()}))}}},M=I;i(468),i(932);var S=y(M,C,w,!1,null,"44f1eda5",null);const k=S.exports,$=o().extend(g);function L(e){let t=null;const n=function(e){let i=new $;i.items=e.items,i.position.x=e.x||0,i.position.y=e.y||0,e.event&&(i.position.x=e.event.clientX,i.position.y=e.event.clientY),i.customClass=e.customClass,e.minWidth&&(i.style.minWidth=e.minWidth),e.zIndex&&(i.style.zIndex=e.zIndex),n.destroy(),t=i,i.$mount()};n.destroy=function(){t&&(t.$destroy(),t=null)},e.prototype.$contextmenu=n}o().component(h,k),window&&window.Vue&&L(window.Vue);const E={install:L},T=E,O=T})(),s})()));