Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue3-menus
Advanced tools
vue3-menus - npm Package Compare versions
Comparing version 1.0.16 to 1.0.17
@@ -592,6 +592,2 @@ import { h, resolveComponent, openBlock, createBlock, renderSlot, Fragment, createCommentVNode, createVNode, createTextVNode, toDisplayString, ref, onMounted, nextTick, createApp, pushScopeId, popScopeId, Teleport, Transition, withModifiers, renderList, createSlots, withScopeId, watch } from 'vue'; | ||
| script.install = (app, options = {}) => { | ||
| app.component(options.name || script.name, script); | ||
| }; | ||
| const directive = { | ||
@@ -626,6 +622,2 @@ mounted(el, { value, arg, instance }) { | ||
| if (typeof window !== "undefined" && window.Vue) { | ||
| window.Vue3Menus = install; | ||
| } | ||
| const menusEvent = (event, menus) => $menusEvent(menus, event); | ||
@@ -632,0 +624,0 @@ |
@@ -1,1 +0,1 @@ | ||
| import{h as e,resolveComponent as n,openBlock as t,createBlock as i,renderSlot as o,Fragment as s,createCommentVNode as l,createVNode as u,createTextVNode as a,toDisplayString as m,ref as d,onMounted as c,nextTick as r,createApp as v,pushScopeId as f,popScopeId as p,Teleport as h,Transition as x,withModifiers as b,renderList as y,createSlots as g,withScopeId as I,watch as E}from"vue";var k={name:"menus-item",components:{MenusIcon:{name:"menus-icon",props:{options:{type:[Function,Object],default:{}}},render(){return"function"==typeof this.$props.options?e(this.$props.options):"function"==typeof this.$props.options.node||"object"==typeof this.$props.options.node?e(this.$props.options.node,this.$props.options.option):"object"!=typeof this.$props.options||this.$props.options.node?null:e(this.$props.options)},__file:"src/components/MenusIcon.vue"}},props:{menusItemClass:{type:String,default:null},hasIcon:{type:Boolean,default:!1},item:{type:Object,default:{}},index:{type:Number,default:0},activeIndex:{type:Number,default:-1}},setup:(e,{emit:n,slots:t})=>({slots:t,menusEnter:function(t,i){n("menusEnter",t,i,e.index),t.preventDefault()},menusClick:function(e,n){e.preventDefault(),n.disabled?e.stopPropagation():!n||n.disabled||n.hidden||"function"!=typeof n.click||!1!==(n=n.click(n))&&null!==n||e.stopPropagation()}})};const w={key:0,class:"menus-item-icon"},$={class:"menus-item-label"},T={class:"menus-item-suffix"},L=a("▶"),C={key:3,class:"menus-item-tip"};function M(e,n){var t,i=(n=void 0===n?{}:n).insertAt;e&&"undefined"!=typeof document&&(t=document.head||document.getElementsByTagName("head")[0],(n=document.createElement("style")).type="text/css","top"===i&&t.firstChild?t.insertBefore(n,t.firstChild):t.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e)))}M("\n.menus-item {\n display: flex;\n line-height: 2rem;\n padding: 0 1rem;\n margin: 0;\n font-size: 0.8rem;\n outline: 0;\n align-items: center;\n transition: 0.2s;\n box-sizing: border-box;\n list-style: none;\n border-bottom: 1px solid #00000000;\n}\n.menus-item-divided {\n border-bottom-color: #ebeef5;\n}\n.menus-item .menus-item-icon {\n display: flex;\n margin-right: 0.6rem;\n width: 1rem;\n}\n.menus-item .menus-item-label {\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.menus-item .menus-item-suffix {\n margin-left: 1.5rem;\n font-size: 0.39rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.menus-item-available {\n color: #606266;\n cursor: pointer;\n}\n.menus-item-available:hover {\n background: #ecf5ff;\n color: #409eff;\n}\n.menus-item-disabled {\n color: #c0c4cc;\n cursor: not-allowed;\n}\n.menus-item-active {\n background: #ecf5ff;\n color: #409eff;\n}\n.menus-item-tip {\n font-size: 9px;\n color: #999;\n}\n"),k.render=function(e,d,c,r,v,f){var p=n("MenusIcon");return r.slots.default?(t(),i("div",{key:0,onMouseenter:d[1]||(d[1]=e=>r.menusEnter(e,c.item)),onClick:d[2]||(d[2]=e=>r.menusClick(e,c.item)),onContextmenu:d[3]||(d[3]=e=>r.menusClick(e,c.item))},[o(e.$slots,"default",{item:{activeIndex:c.activeIndex,item:c.item}})],32)):(t(),i("div",{key:1,onMouseenter:d[4]||(d[4]=e=>r.menusEnter(e,c.item)),onClick:d[5]||(d[5]=e=>r.menusClick(e,c.item)),onContextmenu:d[6]||(d[6]=e=>r.menusClick(e,c.item)),style:c.item.style||{},class:["menus-item",c.item.disabled?"menus-item-disabled":"menus-item-available",c.item.divided?"menus-divided":null,c.item.disabled||c.activeIndex!==c.index?null:"menus-item-active",c.menusItemClass]},[c.hasIcon?(t(),i("div",w,[r.slots.icon?o(e.$slots,"icon",{key:0,item:{activeIndex:c.activeIndex,item:c.item}}):c.item.icon?(t(),i(s,{key:1},["string"==typeof c.item.icon?(t(),i("span",{key:0,innerHTML:c.item.icon},null,8,["innerHTML"])):(t(),i(p,{key:1,options:c.item.icon},null,8,["options"]))],64)):l("v-if",!0)])):l("v-if",!0),u("span",$,[r.slots.label?o(e.$slots,"label",{key:0,item:{activeIndex:c.activeIndex,item:c.item}}):(t(),i(s,{key:1},[a(m(c.item.label),1)],64))]),u("div",T,[c.item.children&&r.slots.suffix?o(e.$slots,"suffix",{key:0,item:{activeIndex:c.activeIndex,item:c.item}}):c.item.children?(t(),i(s,{key:1},[L],64)):c.item.tip&&r.slots.suffix?o(e.$slots,"suffix",{key:2,item:{activeIndex:c.activeIndex,item:c.item}}):c.item.tip?(t(),i("span",C,m(c.item.tip),1)):l("v-if",!0)])],38))},k.__file="src/components/MenusItem.vue";var W={name:"menus",components:{MenusItem:k},props:{menus:{type:Array,default:[]},menusStyle:{type:Object,default:{}},menusItemClass:{type:String,default:null},event:{type:Object,default:{}},position:{type:Object,default:{}},minWidth:{type:[Number,String],default:"none"},maxWidth:{type:[Number,String],default:"none"},zIndex:{type:[Number,String],default:3},direction:{type:String,default:"right"},open:{type:Boolean,default:!1}},setup(n,{slots:t}){const i={},o=globalThis.document.documentElement.clientWidth,s=globalThis.document.documentElement.clientHeight,l=n.position.x&&n.position.y?d(n.position):d({x:n.event.clientX,y:n.event.clientY,width:0,height:0}),u=d(null),a=d({left:0,top:0,minWidth:`${n.minWidth}px`,maxWidth:"none"==n.maxWidth?n.maxWidth:`${n.maxWidth}px`,zIndex:n.zIndex}),m=d(n.direction),f=d(-1),p=d(!1),h=d(!1);return c((()=>{p.value=!0,n.menus.forEach((e=>{h.value=h.value||void 0!==e.icon,h.value})),r((()=>{var e,n=u.value.offsetWidth,t=u.value.offsetHeight;"left"===m.value?(e=n,a.value.left=l.value.x-e,m.value="left",a.value.left<0&&(m.value="right",0===l.value.width||void 0===l.value.width?a.value.left=0:a.value.left=l.valuen.x+l.value.width)):(e=o,n=n,a.value.left=l.value.x+l.value.width,m.value="right",a.value.left+n>e&&(m.value="left",0===l.value.width||void 0===l.value.width?a.value.left=e-n:a.value.left=l.value.x-n)),a.value.top=l.value.y,l.value.y+t>s&&(0===l.value.height||void 0===l.value.height?a.value.top=l.value.y-t:a.value.top=s-t)}))})),{open:p,hasIcon:h,menusRef:u,style:a,close:function(){p.value=!1,this&&this.ctx&&this.ctx.instance&&this.ctx.instance.close(),r((()=>{this.$unmount()&&this.$unmount()}))},menusEnter:function(o,s,l){if(f.value=l,!s.disabled){if(i.instance){if(i.index===l)return;i.instance.close.bind(i.instance)(),i.instance=null,i.index=null}if(s.children){var u=o.target.getBoundingClientRect();u=e(W,{...n,menus:s.children||[],direction:m.value,position:{x:u.x+3,y:u.y-8,width:u.width-6,height:u.width}},t);const a=v(u);i.instance=a.mount(globalThis.document.createElement("div")),i.instance.$unmount=a.unmount,i.index=l,o.preventDefault()}}},ctx:i,activeIndex:f,slots:t}}};const S=I("data-v-d65e2e18");f("data-v-d65e2e18");const _={class:"menus_body"};p();const z=S((function(e,a,m,d,c,r){const v=n("MenusItem");return t(),i(h,{to:"body"},[u(x,{name:"menus-fade"},{default:S((()=>[d.open?(t(),i("div",{key:0,ref:"menusRef",class:"menus",style:{...m.menusStyle,top:`${d.style.top}px`,left:`${d.style.left}px`,minWidth:d.style.minWidth,maxWidth:d.style.maxWidth,zIndex:d.style.zIndex},onContextmenu:a[1]||(a[1]=e=>e.preventDefault()),onMousewheel:a[2]||(a[2]=b((()=>{}),["stop"]))},[u("div",_,[(t(!0),i(s,null,y(m.menus,((n,u)=>(t(),i(s,{key:u},[n.hidden?l("v-if",!0):(t(),i(v,{key:0,item:n,index:u,activeIndex:d.activeIndex,onMenusEnter:d.menusEnter,menusItemClass:m.menusItemClass,hasIcon:d.hasIcon},g({_:2},[d.slots.default?{name:"default",fn:S((({item:n})=>[o(e.$slots,"default",{item:n})]))}:void 0,!d.slots.default&&d.slots.icon?{name:"icon",fn:S((({item:n})=>[o(e.$slots,"icon",{item:n})]))}:void 0,!d.slots.default&&d.slots.label?{name:"label",fn:S((({item:n})=>[o(e.$slots,"label",{item:n})]))}:void 0,!d.slots.default&&d.slots.suffix?{name:"suffix",fn:S((({item:n})=>[o(e.$slots,"suffix",{item:n})]))}:void 0]),1032,["item","index","activeIndex","onMenusEnter","menusItemClass","hasIcon"]))],64)))),128))])],36)):l("v-if",!0)])),_:1})])}));M("\n.menus[data-v-d65e2e18] {\n position: fixed;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);\n background: #fff;\n border-radius: 4px;\n padding: 8px 0;\n user-select: none;\n box-sizing: border-box;\n}\n.menus_body[data-v-d65e2e18] {\n display: block;\n}\n.menus-fade-enter-active[data-v-d65e2e18],\n.menus-fade-leave-active[data-v-d65e2e18] {\n transition: opacity 0.1s ease-in-out;\n}\n.menus-fade-enter-from[data-v-d65e2e18],\n.menus-fade-leave-to[data-v-d65e2e18] {\n opacity: 0;\n}\n"),W.render=z,W.__scopeId="data-v-d65e2e18",W.__file="src/components/Menus.vue";var j={name:"vue3-menus",props:{menus:{type:Array,default:[]},menusStyle:{type:Object,default:{}},menusItemClass:{type:String,default:null},event:{type:Object,default:{}},position:{type:Object,default:{}},minWidth:{type:[Number,String],default:"none"},maxWidth:{type:[Number,String],default:"none"},zIndex:{type:[Number,String],default:2},open:{type:Boolean,default:!1}},setup(n,{emit:t,slots:i}){let o=null;function s(){t("update:open",!1),o&&(o.close(),o=null)}return E((()=>n.open),(t=>{if(t){o&&(o.close(),o=null),t=e(W,{...n},i);const l=v(t);o=l.mount(globalThis.document.createElement("div")),o.$unmount=l.unmount,setTimeout((()=>{globalThis.document.addEventListener("click",s),globalThis.document.addEventListener("contextmenu",s),globalThis.document.addEventListener("wheel",s)}),0)}else globalThis.document.removeEventListener("click",s),globalThis.document.removeEventListener("contextmenu",s),globalThis.document.removeEventListener("wheel",s)})),{}},render:()=>null,__file:"src/components/Vue3Menus.vue"};let N=null;function O(){N&&(N.close(),N=null),globalThis.document.removeEventListener("click",O),globalThis.document.removeEventListener("contextmenu",O),globalThis.document.removeEventListener("wheel",O)}function B(e,n){e=e||{},N&&(N.close(),N=null,globalThis.document.removeEventListener("click",O),globalThis.document.removeEventListener("contextmenu",O),globalThis.document.removeEventListener("wheel",O));let t=v(W,{event:n,...e});return N=t.mount(globalThis.document.createElement("div")),N.$unmount=t.unmount,null!=e.prevent&&!e.prevent||n.preventDefault(),setTimeout((()=>{globalThis.document.addEventListener("click",O),globalThis.document.addEventListener("contextmenu",O),globalThis.document.addEventListener("wheel",O)}),0),N}j.install=(e,n={})=>{e.component(n.name||j.name,j)};const D={mounted(e,{value:n,arg:t,instance:i}){void 0===t||"right"===t?e.addEventListener("contextmenu",B.bind(i,n)):"left"===t?e.addEventListener("click",B.bind(i,n)):"all"===t&&(e.addEventListener("contextmenu",B.bind(i,n)),e.addEventListener("click",B.bind(i,n)))},unmounted(e,{arg:n}){void 0===n||"right"===n?e.removeEventListener("contextmenu",B):"left"===n?e.removeEventListener("click",B):"all"===n&&(e.removeEventListener("contextmenu",B),e.removeEventListener("click",B))}},H=function(e,n={}){e.component(n.name||j.name,j),e.directive("menus",D),e.config.globalProperties.$menusEvent=(e,n)=>B(n,e)};"undefined"!=typeof window&&window.Vue&&(window.Vue3Menus=H);const V=(e,n)=>B(n,e);function A(e){e.use(H)}export{j as Vue3Menus,A as default,D as directive,V as menusEvent}; | ||
| import{h as e,resolveComponent as t,openBlock as n,createBlock as i,renderSlot as o,Fragment as s,createCommentVNode as l,createVNode as u,createTextVNode as a,toDisplayString as m,ref as d,onMounted as c,nextTick as r,createApp as v,pushScopeId as f,popScopeId as p,Teleport as h,Transition as x,withModifiers as b,renderList as y,createSlots as g,withScopeId as I,watch as E}from"vue";var k={name:"menus-item",components:{MenusIcon:{name:"menus-icon",props:{options:{type:[Function,Object],default:{}}},render(){return"function"==typeof this.$props.options?e(this.$props.options):"function"==typeof this.$props.options.node||"object"==typeof this.$props.options.node?e(this.$props.options.node,this.$props.options.option):"object"!=typeof this.$props.options||this.$props.options.node?null:e(this.$props.options)},__file:"src/components/MenusIcon.vue"}},props:{menusItemClass:{type:String,default:null},hasIcon:{type:Boolean,default:!1},item:{type:Object,default:{}},index:{type:Number,default:0},activeIndex:{type:Number,default:-1}},setup:(e,{emit:t,slots:n})=>({slots:n,menusEnter:function(n,i){t("menusEnter",n,i,e.index),n.preventDefault()},menusClick:function(e,t){e.preventDefault(),t.disabled?e.stopPropagation():!t||t.disabled||t.hidden||"function"!=typeof t.click||!1!==(t=t.click(t))&&null!==t||e.stopPropagation()}})};const $={key:0,class:"menus-item-icon"},w={class:"menus-item-label"},T={class:"menus-item-suffix"},L=a("▶"),C={key:3,class:"menus-item-tip"};function M(e,t){var n,i=(t=void 0===t?{}:t).insertAt;e&&"undefined"!=typeof document&&(n=document.head||document.getElementsByTagName("head")[0],(t=document.createElement("style")).type="text/css","top"===i&&n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e)))}M("\n.menus-item {\n display: flex;\n line-height: 2rem;\n padding: 0 1rem;\n margin: 0;\n font-size: 0.8rem;\n outline: 0;\n align-items: center;\n transition: 0.2s;\n box-sizing: border-box;\n list-style: none;\n border-bottom: 1px solid #00000000;\n}\n.menus-item-divided {\n border-bottom-color: #ebeef5;\n}\n.menus-item .menus-item-icon {\n display: flex;\n margin-right: 0.6rem;\n width: 1rem;\n}\n.menus-item .menus-item-label {\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.menus-item .menus-item-suffix {\n margin-left: 1.5rem;\n font-size: 0.39rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.menus-item-available {\n color: #606266;\n cursor: pointer;\n}\n.menus-item-available:hover {\n background: #ecf5ff;\n color: #409eff;\n}\n.menus-item-disabled {\n color: #c0c4cc;\n cursor: not-allowed;\n}\n.menus-item-active {\n background: #ecf5ff;\n color: #409eff;\n}\n.menus-item-tip {\n font-size: 9px;\n color: #999;\n}\n"),k.render=function(e,d,c,r,v,f){var p=t("MenusIcon");return r.slots.default?(n(),i("div",{key:0,onMouseenter:d[1]||(d[1]=e=>r.menusEnter(e,c.item)),onClick:d[2]||(d[2]=e=>r.menusClick(e,c.item)),onContextmenu:d[3]||(d[3]=e=>r.menusClick(e,c.item))},[o(e.$slots,"default",{item:{activeIndex:c.activeIndex,item:c.item}})],32)):(n(),i("div",{key:1,onMouseenter:d[4]||(d[4]=e=>r.menusEnter(e,c.item)),onClick:d[5]||(d[5]=e=>r.menusClick(e,c.item)),onContextmenu:d[6]||(d[6]=e=>r.menusClick(e,c.item)),style:c.item.style||{},class:["menus-item",c.item.disabled?"menus-item-disabled":"menus-item-available",c.item.divided?"menus-divided":null,c.item.disabled||c.activeIndex!==c.index?null:"menus-item-active",c.menusItemClass]},[c.hasIcon?(n(),i("div",$,[r.slots.icon?o(e.$slots,"icon",{key:0,item:{activeIndex:c.activeIndex,item:c.item}}):c.item.icon?(n(),i(s,{key:1},["string"==typeof c.item.icon?(n(),i("span",{key:0,innerHTML:c.item.icon},null,8,["innerHTML"])):(n(),i(p,{key:1,options:c.item.icon},null,8,["options"]))],64)):l("v-if",!0)])):l("v-if",!0),u("span",w,[r.slots.label?o(e.$slots,"label",{key:0,item:{activeIndex:c.activeIndex,item:c.item}}):(n(),i(s,{key:1},[a(m(c.item.label),1)],64))]),u("div",T,[c.item.children&&r.slots.suffix?o(e.$slots,"suffix",{key:0,item:{activeIndex:c.activeIndex,item:c.item}}):c.item.children?(n(),i(s,{key:1},[L],64)):c.item.tip&&r.slots.suffix?o(e.$slots,"suffix",{key:2,item:{activeIndex:c.activeIndex,item:c.item}}):c.item.tip?(n(),i("span",C,m(c.item.tip),1)):l("v-if",!0)])],38))},k.__file="src/components/MenusItem.vue";var W={name:"menus",components:{MenusItem:k},props:{menus:{type:Array,default:[]},menusStyle:{type:Object,default:{}},menusItemClass:{type:String,default:null},event:{type:Object,default:{}},position:{type:Object,default:{}},minWidth:{type:[Number,String],default:"none"},maxWidth:{type:[Number,String],default:"none"},zIndex:{type:[Number,String],default:3},direction:{type:String,default:"right"},open:{type:Boolean,default:!1}},setup(t,{slots:n}){const i={},o=globalThis.document.documentElement.clientWidth,s=globalThis.document.documentElement.clientHeight,l=t.position.x&&t.position.y?d(t.position):d({x:t.event.clientX,y:t.event.clientY,width:0,height:0}),u=d(null),a=d({left:0,top:0,minWidth:`${t.minWidth}px`,maxWidth:"none"==t.maxWidth?t.maxWidth:`${t.maxWidth}px`,zIndex:t.zIndex}),m=d(t.direction),f=d(-1),p=d(!1),h=d(!1);return c((()=>{p.value=!0,t.menus.forEach((e=>{h.value=h.value||void 0!==e.icon,h.value})),r((()=>{var e,t=u.value.offsetWidth,n=u.value.offsetHeight;"left"===m.value?(e=t,a.value.left=l.value.x-e,m.value="left",a.value.left<0&&(m.value="right",0===l.value.width||void 0===l.value.width?a.value.left=0:a.value.left=l.valuen.x+l.value.width)):(e=o,t=t,a.value.left=l.value.x+l.value.width,m.value="right",a.value.left+t>e&&(m.value="left",0===l.value.width||void 0===l.value.width?a.value.left=e-t:a.value.left=l.value.x-t)),a.value.top=l.value.y,l.value.y+n>s&&(0===l.value.height||void 0===l.value.height?a.value.top=l.value.y-n:a.value.top=s-n)}))})),{open:p,hasIcon:h,menusRef:u,style:a,close:function(){p.value=!1,this&&this.ctx&&this.ctx.instance&&this.ctx.instance.close(),r((()=>{this.$unmount()&&this.$unmount()}))},menusEnter:function(o,s,l){if(f.value=l,!s.disabled){if(i.instance){if(i.index===l)return;i.instance.close.bind(i.instance)(),i.instance=null,i.index=null}if(s.children){var u=o.target.getBoundingClientRect();u=e(W,{...t,menus:s.children||[],direction:m.value,position:{x:u.x+3,y:u.y-8,width:u.width-6,height:u.width}},n);const a=v(u);i.instance=a.mount(globalThis.document.createElement("div")),i.instance.$unmount=a.unmount,i.index=l,o.preventDefault()}}},ctx:i,activeIndex:f,slots:n}}};const S=I("data-v-d65e2e18");f("data-v-d65e2e18");const _={class:"menus_body"};p();const z=S((function(e,a,m,d,c,r){const v=t("MenusItem");return n(),i(h,{to:"body"},[u(x,{name:"menus-fade"},{default:S((()=>[d.open?(n(),i("div",{key:0,ref:"menusRef",class:"menus",style:{...m.menusStyle,top:`${d.style.top}px`,left:`${d.style.left}px`,minWidth:d.style.minWidth,maxWidth:d.style.maxWidth,zIndex:d.style.zIndex},onContextmenu:a[1]||(a[1]=e=>e.preventDefault()),onMousewheel:a[2]||(a[2]=b((()=>{}),["stop"]))},[u("div",_,[(n(!0),i(s,null,y(m.menus,((t,u)=>(n(),i(s,{key:u},[t.hidden?l("v-if",!0):(n(),i(v,{key:0,item:t,index:u,activeIndex:d.activeIndex,onMenusEnter:d.menusEnter,menusItemClass:m.menusItemClass,hasIcon:d.hasIcon},g({_:2},[d.slots.default?{name:"default",fn:S((({item:t})=>[o(e.$slots,"default",{item:t})]))}:void 0,!d.slots.default&&d.slots.icon?{name:"icon",fn:S((({item:t})=>[o(e.$slots,"icon",{item:t})]))}:void 0,!d.slots.default&&d.slots.label?{name:"label",fn:S((({item:t})=>[o(e.$slots,"label",{item:t})]))}:void 0,!d.slots.default&&d.slots.suffix?{name:"suffix",fn:S((({item:t})=>[o(e.$slots,"suffix",{item:t})]))}:void 0]),1032,["item","index","activeIndex","onMenusEnter","menusItemClass","hasIcon"]))],64)))),128))])],36)):l("v-if",!0)])),_:1})])}));M("\n.menus[data-v-d65e2e18] {\n position: fixed;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);\n background: #fff;\n border-radius: 4px;\n padding: 8px 0;\n user-select: none;\n box-sizing: border-box;\n}\n.menus_body[data-v-d65e2e18] {\n display: block;\n}\n.menus-fade-enter-active[data-v-d65e2e18],\n.menus-fade-leave-active[data-v-d65e2e18] {\n transition: opacity 0.1s ease-in-out;\n}\n.menus-fade-enter-from[data-v-d65e2e18],\n.menus-fade-leave-to[data-v-d65e2e18] {\n opacity: 0;\n}\n"),W.render=z,W.__scopeId="data-v-d65e2e18",W.__file="src/components/Menus.vue";var j={name:"vue3-menus",props:{menus:{type:Array,default:[]},menusStyle:{type:Object,default:{}},menusItemClass:{type:String,default:null},event:{type:Object,default:{}},position:{type:Object,default:{}},minWidth:{type:[Number,String],default:"none"},maxWidth:{type:[Number,String],default:"none"},zIndex:{type:[Number,String],default:2},open:{type:Boolean,default:!1}},setup(t,{emit:n,slots:i}){let o=null;function s(){n("update:open",!1),o&&(o.close(),o=null)}return E((()=>t.open),(n=>{if(n){o&&(o.close(),o=null),n=e(W,{...t},i);const l=v(n);o=l.mount(globalThis.document.createElement("div")),o.$unmount=l.unmount,setTimeout((()=>{globalThis.document.addEventListener("click",s),globalThis.document.addEventListener("contextmenu",s),globalThis.document.addEventListener("wheel",s)}),0)}else globalThis.document.removeEventListener("click",s),globalThis.document.removeEventListener("contextmenu",s),globalThis.document.removeEventListener("wheel",s)})),{}},render:()=>null,__file:"src/components/Vue3Menus.vue"};let N=null;function O(){N&&(N.close(),N=null),globalThis.document.removeEventListener("click",O),globalThis.document.removeEventListener("contextmenu",O),globalThis.document.removeEventListener("wheel",O)}function B(e,t){e=e||{},N&&(N.close(),N=null,globalThis.document.removeEventListener("click",O),globalThis.document.removeEventListener("contextmenu",O),globalThis.document.removeEventListener("wheel",O));let n=v(W,{event:t,...e});return N=n.mount(globalThis.document.createElement("div")),N.$unmount=n.unmount,null!=e.prevent&&!e.prevent||t.preventDefault(),setTimeout((()=>{globalThis.document.addEventListener("click",O),globalThis.document.addEventListener("contextmenu",O),globalThis.document.addEventListener("wheel",O)}),0),N}const D={mounted(e,{value:t,arg:n,instance:i}){void 0===n||"right"===n?e.addEventListener("contextmenu",B.bind(i,t)):"left"===n?e.addEventListener("click",B.bind(i,t)):"all"===n&&(e.addEventListener("contextmenu",B.bind(i,t)),e.addEventListener("click",B.bind(i,t)))},unmounted(e,{arg:t}){void 0===t||"right"===t?e.removeEventListener("contextmenu",B):"left"===t?e.removeEventListener("click",B):"all"===t&&(e.removeEventListener("contextmenu",B),e.removeEventListener("click",B))}},H=function(e,t={}){e.component(t.name||j.name,j),e.directive("menus",D),e.config.globalProperties.$menusEvent=(e,t)=>B(t,e)},A=(e,t)=>B(t,e);function P(e){e.use(H)}export{j as Vue3Menus,P as default,D as directive,A as menusEvent}; |
@@ -596,6 +596,2 @@ (function (global, factory) { | ||
| script.install = (app, options = {}) => { | ||
| app.component(options.name || script.name, script); | ||
| }; | ||
| const directive = { | ||
@@ -630,6 +626,2 @@ mounted(el, { value, arg, instance }) { | ||
| if (typeof window !== "undefined" && window.Vue) { | ||
| window.Vue3Menus = install; | ||
| } | ||
| const menusEvent = (event, menus) => $menusEvent(menus, event); | ||
@@ -636,0 +628,0 @@ |
@@ -1,1 +0,1 @@ | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Vue3Menus={},e.Vue)}(this,(function(e,t){"use strict";var n={name:"menus-item",components:{MenusIcon:n={name:"menus-icon",props:{options:{type:[Function,Object],default:{}}},render(){return"function"==typeof this.$props.options?t.h(this.$props.options):"function"==typeof this.$props.options.node||"object"==typeof this.$props.options.node?t.h(this.$props.options.node,this.$props.options.option):"object"!=typeof this.$props.options||this.$props.options.node?null:t.h(this.$props.options)},__file:"src/components/MenusIcon.vue"}},props:{menusItemClass:{type:String,default:null},hasIcon:{type:Boolean,default:!1},item:{type:Object,default:{}},index:{type:Number,default:0},activeIndex:{type:Number,default:-1}},setup:(e,{emit:t,slots:n})=>({slots:n,menusEnter:function(n,o){t("menusEnter",n,o,e.index),n.preventDefault()},menusClick:function(e,t){e.preventDefault(),t.disabled?e.stopPropagation():!t||t.disabled||t.hidden||"function"!=typeof t.click||!1!==(t=t.click(t))&&null!==t||e.stopPropagation()}})};const o={key:0,class:"menus-item-icon"},i={class:"menus-item-label"},l={class:"menus-item-suffix"},s=t.createTextVNode("▶"),a={key:3,class:"menus-item-tip"};function u(e,t){var n,o=(t=void 0===t?{}:t).insertAt;e&&"undefined"!=typeof document&&(n=document.head||document.getElementsByTagName("head")[0],(t=document.createElement("style")).type="text/css","top"===o&&n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e)))}u("\n.menus-item {\n display: flex;\n line-height: 2rem;\n padding: 0 1rem;\n margin: 0;\n font-size: 0.8rem;\n outline: 0;\n align-items: center;\n transition: 0.2s;\n box-sizing: border-box;\n list-style: none;\n border-bottom: 1px solid #00000000;\n}\n.menus-item-divided {\n border-bottom-color: #ebeef5;\n}\n.menus-item .menus-item-icon {\n display: flex;\n margin-right: 0.6rem;\n width: 1rem;\n}\n.menus-item .menus-item-label {\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.menus-item .menus-item-suffix {\n margin-left: 1.5rem;\n font-size: 0.39rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.menus-item-available {\n color: #606266;\n cursor: pointer;\n}\n.menus-item-available:hover {\n background: #ecf5ff;\n color: #409eff;\n}\n.menus-item-disabled {\n color: #c0c4cc;\n cursor: not-allowed;\n}\n.menus-item-active {\n background: #ecf5ff;\n color: #409eff;\n}\n.menus-item-tip {\n font-size: 9px;\n color: #999;\n}\n"),n.render=function(e,n,u,d,c,m){var r=t.resolveComponent("MenusIcon");return d.slots.default?(t.openBlock(),t.createBlock("div",{key:0,onMouseenter:n[1]||(n[1]=e=>d.menusEnter(e,u.item)),onClick:n[2]||(n[2]=e=>d.menusClick(e,u.item)),onContextmenu:n[3]||(n[3]=e=>d.menusClick(e,u.item))},[t.renderSlot(e.$slots,"default",{item:{activeIndex:u.activeIndex,item:u.item}})],32)):(t.openBlock(),t.createBlock("div",{key:1,onMouseenter:n[4]||(n[4]=e=>d.menusEnter(e,u.item)),onClick:n[5]||(n[5]=e=>d.menusClick(e,u.item)),onContextmenu:n[6]||(n[6]=e=>d.menusClick(e,u.item)),style:u.item.style||{},class:["menus-item",u.item.disabled?"menus-item-disabled":"menus-item-available",u.item.divided?"menus-divided":null,u.item.disabled||u.activeIndex!==u.index?null:"menus-item-active",u.menusItemClass]},[u.hasIcon?(t.openBlock(),t.createBlock("div",o,[d.slots.icon?t.renderSlot(e.$slots,"icon",{key:0,item:{activeIndex:u.activeIndex,item:u.item}}):u.item.icon?(t.openBlock(),t.createBlock(t.Fragment,{key:1},["string"==typeof u.item.icon?(t.openBlock(),t.createBlock("span",{key:0,innerHTML:u.item.icon},null,8,["innerHTML"])):(t.openBlock(),t.createBlock(r,{key:1,options:u.item.icon},null,8,["options"]))],64)):t.createCommentVNode("v-if",!0)])):t.createCommentVNode("v-if",!0),t.createVNode("span",i,[d.slots.label?t.renderSlot(e.$slots,"label",{key:0,item:{activeIndex:u.activeIndex,item:u.item}}):(t.openBlock(),t.createBlock(t.Fragment,{key:1},[t.createTextVNode(t.toDisplayString(u.item.label),1)],64))]),t.createVNode("div",l,[u.item.children&&d.slots.suffix?t.renderSlot(e.$slots,"suffix",{key:0,item:{activeIndex:u.activeIndex,item:u.item}}):u.item.children?(t.openBlock(),t.createBlock(t.Fragment,{key:1},[s],64)):u.item.tip&&d.slots.suffix?t.renderSlot(e.$slots,"suffix",{key:2,item:{activeIndex:u.activeIndex,item:u.item}}):u.item.tip?(t.openBlock(),t.createBlock("span",a,t.toDisplayString(u.item.tip),1)):t.createCommentVNode("v-if",!0)])],38))},n.__file="src/components/MenusItem.vue";var d={name:"menus",components:{MenusItem:n},props:{menus:{type:Array,default:[]},menusStyle:{type:Object,default:{}},menusItemClass:{type:String,default:null},event:{type:Object,default:{}},position:{type:Object,default:{}},minWidth:{type:[Number,String],default:"none"},maxWidth:{type:[Number,String],default:"none"},zIndex:{type:[Number,String],default:3},direction:{type:String,default:"right"},open:{type:Boolean,default:!1}},setup(e,{slots:n}){const o={},i=globalThis.document.documentElement.clientWidth,l=globalThis.document.documentElement.clientHeight,s=e.position.x&&e.position.y?t.ref(e.position):t.ref({x:e.event.clientX,y:e.event.clientY,width:0,height:0}),a=t.ref(null),u=t.ref({left:0,top:0,minWidth:`${e.minWidth}px`,maxWidth:"none"==e.maxWidth?e.maxWidth:`${e.maxWidth}px`,zIndex:e.zIndex}),c=t.ref(e.direction),m=t.ref(-1),r=t.ref(!1),p=t.ref(!1);return t.onMounted((()=>{r.value=!0,e.menus.forEach((e=>{p.value=p.value||void 0!==e.icon,p.value})),t.nextTick((()=>{var e,t=a.value.offsetWidth,n=a.value.offsetHeight;"left"===c.value?(e=t,u.value.left=s.value.x-e,c.value="left",u.value.left<0&&(c.value="right",0===s.value.width||void 0===s.value.width?u.value.left=0:u.value.left=s.valuen.x+s.value.width)):(e=i,t=t,u.value.left=s.value.x+s.value.width,c.value="right",u.value.left+t>e&&(c.value="left",0===s.value.width||void 0===s.value.width?u.value.left=e-t:u.value.left=s.value.x-t)),u.value.top=s.value.y,s.value.y+n>l&&(0===s.value.height||void 0===s.value.height?u.value.top=s.value.y-n:u.value.top=l-n)}))})),{open:r,hasIcon:p,menusRef:a,style:u,close:function(){r.value=!1,this&&this.ctx&&this.ctx.instance&&this.ctx.instance.close(),t.nextTick((()=>{this.$unmount()&&this.$unmount()}))},menusEnter:function(i,l,s){if(m.value=s,!l.disabled){if(o.instance){if(o.index===s)return;o.instance.close.bind(o.instance)(),o.instance=null,o.index=null}if(l.children){var a=i.target.getBoundingClientRect();a=t.h(d,{...e,menus:l.children||[],direction:c.value,position:{x:a.x+3,y:a.y-8,width:a.width-6,height:a.width}},n);const u=t.createApp(a);o.instance=u.mount(globalThis.document.createElement("div")),o.instance.$unmount=u.unmount,o.index=s,i.preventDefault()}}},ctx:o,activeIndex:m,slots:n}}};const c=t.withScopeId("data-v-d65e2e18");t.pushScopeId("data-v-d65e2e18");const m={class:"menus_body"};t.popScopeId(),n=c((function(e,n,o,i,l,s){const a=t.resolveComponent("MenusItem");return t.openBlock(),t.createBlock(t.Teleport,{to:"body"},[t.createVNode(t.Transition,{name:"menus-fade"},{default:c((()=>[i.open?(t.openBlock(),t.createBlock("div",{key:0,ref:"menusRef",class:"menus",style:{...o.menusStyle,top:`${i.style.top}px`,left:`${i.style.left}px`,minWidth:i.style.minWidth,maxWidth:i.style.maxWidth,zIndex:i.style.zIndex},onContextmenu:n[1]||(n[1]=e=>e.preventDefault()),onMousewheel:n[2]||(n[2]=t.withModifiers((()=>{}),["stop"]))},[t.createVNode("div",m,[(t.openBlock(!0),t.createBlock(t.Fragment,null,t.renderList(o.menus,((n,l)=>(t.openBlock(),t.createBlock(t.Fragment,{key:l},[n.hidden?t.createCommentVNode("v-if",!0):(t.openBlock(),t.createBlock(a,{key:0,item:n,index:l,activeIndex:i.activeIndex,onMenusEnter:i.menusEnter,menusItemClass:o.menusItemClass,hasIcon:i.hasIcon},t.createSlots({_:2},[i.slots.default?{name:"default",fn:c((({item:n})=>[t.renderSlot(e.$slots,"default",{item:n})]))}:void 0,!i.slots.default&&i.slots.icon?{name:"icon",fn:c((({item:n})=>[t.renderSlot(e.$slots,"icon",{item:n})]))}:void 0,!i.slots.default&&i.slots.label?{name:"label",fn:c((({item:n})=>[t.renderSlot(e.$slots,"label",{item:n})]))}:void 0,!i.slots.default&&i.slots.suffix?{name:"suffix",fn:c((({item:n})=>[t.renderSlot(e.$slots,"suffix",{item:n})]))}:void 0]),1032,["item","index","activeIndex","onMenusEnter","menusItemClass","hasIcon"]))],64)))),128))])],36)):t.createCommentVNode("v-if",!0)])),_:1})])})),u("\n.menus[data-v-d65e2e18] {\n position: fixed;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);\n background: #fff;\n border-radius: 4px;\n padding: 8px 0;\n user-select: none;\n box-sizing: border-box;\n}\n.menus_body[data-v-d65e2e18] {\n display: block;\n}\n.menus-fade-enter-active[data-v-d65e2e18],\n.menus-fade-leave-active[data-v-d65e2e18] {\n transition: opacity 0.1s ease-in-out;\n}\n.menus-fade-enter-from[data-v-d65e2e18],\n.menus-fade-leave-to[data-v-d65e2e18] {\n opacity: 0;\n}\n"),d.render=n,d.__scopeId="data-v-d65e2e18",d.__file="src/components/Menus.vue";var r={name:"vue3-menus",props:{menus:{type:Array,default:[]},menusStyle:{type:Object,default:{}},menusItemClass:{type:String,default:null},event:{type:Object,default:{}},position:{type:Object,default:{}},minWidth:{type:[Number,String],default:"none"},maxWidth:{type:[Number,String],default:"none"},zIndex:{type:[Number,String],default:2},open:{type:Boolean,default:!1}},setup(e,{emit:n,slots:o}){let i=null;function l(){n("update:open",!1),i&&(i.close(),i=null)}return t.watch((()=>e.open),(n=>{if(n){i&&(i.close(),i=null),n=t.h(d,{...e},o);const s=t.createApp(n);i=s.mount(globalThis.document.createElement("div")),i.$unmount=s.unmount,setTimeout((()=>{globalThis.document.addEventListener("click",l),globalThis.document.addEventListener("contextmenu",l),globalThis.document.addEventListener("wheel",l)}),0)}else globalThis.document.removeEventListener("click",l),globalThis.document.removeEventListener("contextmenu",l),globalThis.document.removeEventListener("wheel",l)})),{}},render:()=>null,__file:"src/components/Vue3Menus.vue"};let p=null;function f(){p&&(p.close(),p=null),globalThis.document.removeEventListener("click",f),globalThis.document.removeEventListener("contextmenu",f),globalThis.document.removeEventListener("wheel",f)}function v(e,n){e=e||{},p&&(p.close(),p=null,globalThis.document.removeEventListener("click",f),globalThis.document.removeEventListener("contextmenu",f),globalThis.document.removeEventListener("wheel",f));let o=t.createApp(d,{event:n,...e});return p=o.mount(globalThis.document.createElement("div")),p.$unmount=o.unmount,null!=e.prevent&&!e.prevent||n.preventDefault(),setTimeout((()=>{globalThis.document.addEventListener("click",f),globalThis.document.addEventListener("contextmenu",f),globalThis.document.addEventListener("wheel",f)}),0),p}function h(e,t={}){e.component(t.name||r.name,r),e.directive("menus",x),e.config.globalProperties.$menusEvent=(e,t)=>v(t,e)}r.install=(e,t={})=>{e.component(t.name||r.name,r)};const x={mounted(e,{value:t,arg:n,instance:o}){void 0===n||"right"===n?e.addEventListener("contextmenu",v.bind(o,t)):"left"===n?e.addEventListener("click",v.bind(o,t)):"all"===n&&(e.addEventListener("contextmenu",v.bind(o,t)),e.addEventListener("click",v.bind(o,t)))},unmounted(e,{arg:t}){void 0===t||"right"===t?e.removeEventListener("contextmenu",v):"left"===t?e.removeEventListener("click",v):"all"===t&&(e.removeEventListener("contextmenu",v),e.removeEventListener("click",v))}};"undefined"!=typeof window&&window.Vue&&(window.Vue3Menus=h),e.Vue3Menus=r,e.default=function(e){e.use(h)},e.directive=x,e.menusEvent=(e,t)=>v(t,e),Object.defineProperty(e,"__esModule",{value:!0})})); | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Vue3Menus={},e.Vue)}(this,(function(e,t){"use strict";var n={name:"menus-item",components:{MenusIcon:n={name:"menus-icon",props:{options:{type:[Function,Object],default:{}}},render(){return"function"==typeof this.$props.options?t.h(this.$props.options):"function"==typeof this.$props.options.node||"object"==typeof this.$props.options.node?t.h(this.$props.options.node,this.$props.options.option):"object"!=typeof this.$props.options||this.$props.options.node?null:t.h(this.$props.options)},__file:"src/components/MenusIcon.vue"}},props:{menusItemClass:{type:String,default:null},hasIcon:{type:Boolean,default:!1},item:{type:Object,default:{}},index:{type:Number,default:0},activeIndex:{type:Number,default:-1}},setup:(e,{emit:t,slots:n})=>({slots:n,menusEnter:function(n,o){t("menusEnter",n,o,e.index),n.preventDefault()},menusClick:function(e,t){e.preventDefault(),t.disabled?e.stopPropagation():!t||t.disabled||t.hidden||"function"!=typeof t.click||!1!==(t=t.click(t))&&null!==t||e.stopPropagation()}})};const o={key:0,class:"menus-item-icon"},i={class:"menus-item-label"},l={class:"menus-item-suffix"},s=t.createTextVNode("▶"),a={key:3,class:"menus-item-tip"};function u(e,t){var n,o=(t=void 0===t?{}:t).insertAt;e&&"undefined"!=typeof document&&(n=document.head||document.getElementsByTagName("head")[0],(t=document.createElement("style")).type="text/css","top"===o&&n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e)))}u("\n.menus-item {\n display: flex;\n line-height: 2rem;\n padding: 0 1rem;\n margin: 0;\n font-size: 0.8rem;\n outline: 0;\n align-items: center;\n transition: 0.2s;\n box-sizing: border-box;\n list-style: none;\n border-bottom: 1px solid #00000000;\n}\n.menus-item-divided {\n border-bottom-color: #ebeef5;\n}\n.menus-item .menus-item-icon {\n display: flex;\n margin-right: 0.6rem;\n width: 1rem;\n}\n.menus-item .menus-item-label {\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.menus-item .menus-item-suffix {\n margin-left: 1.5rem;\n font-size: 0.39rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.menus-item-available {\n color: #606266;\n cursor: pointer;\n}\n.menus-item-available:hover {\n background: #ecf5ff;\n color: #409eff;\n}\n.menus-item-disabled {\n color: #c0c4cc;\n cursor: not-allowed;\n}\n.menus-item-active {\n background: #ecf5ff;\n color: #409eff;\n}\n.menus-item-tip {\n font-size: 9px;\n color: #999;\n}\n"),n.render=function(e,n,u,d,c,m){var r=t.resolveComponent("MenusIcon");return d.slots.default?(t.openBlock(),t.createBlock("div",{key:0,onMouseenter:n[1]||(n[1]=e=>d.menusEnter(e,u.item)),onClick:n[2]||(n[2]=e=>d.menusClick(e,u.item)),onContextmenu:n[3]||(n[3]=e=>d.menusClick(e,u.item))},[t.renderSlot(e.$slots,"default",{item:{activeIndex:u.activeIndex,item:u.item}})],32)):(t.openBlock(),t.createBlock("div",{key:1,onMouseenter:n[4]||(n[4]=e=>d.menusEnter(e,u.item)),onClick:n[5]||(n[5]=e=>d.menusClick(e,u.item)),onContextmenu:n[6]||(n[6]=e=>d.menusClick(e,u.item)),style:u.item.style||{},class:["menus-item",u.item.disabled?"menus-item-disabled":"menus-item-available",u.item.divided?"menus-divided":null,u.item.disabled||u.activeIndex!==u.index?null:"menus-item-active",u.menusItemClass]},[u.hasIcon?(t.openBlock(),t.createBlock("div",o,[d.slots.icon?t.renderSlot(e.$slots,"icon",{key:0,item:{activeIndex:u.activeIndex,item:u.item}}):u.item.icon?(t.openBlock(),t.createBlock(t.Fragment,{key:1},["string"==typeof u.item.icon?(t.openBlock(),t.createBlock("span",{key:0,innerHTML:u.item.icon},null,8,["innerHTML"])):(t.openBlock(),t.createBlock(r,{key:1,options:u.item.icon},null,8,["options"]))],64)):t.createCommentVNode("v-if",!0)])):t.createCommentVNode("v-if",!0),t.createVNode("span",i,[d.slots.label?t.renderSlot(e.$slots,"label",{key:0,item:{activeIndex:u.activeIndex,item:u.item}}):(t.openBlock(),t.createBlock(t.Fragment,{key:1},[t.createTextVNode(t.toDisplayString(u.item.label),1)],64))]),t.createVNode("div",l,[u.item.children&&d.slots.suffix?t.renderSlot(e.$slots,"suffix",{key:0,item:{activeIndex:u.activeIndex,item:u.item}}):u.item.children?(t.openBlock(),t.createBlock(t.Fragment,{key:1},[s],64)):u.item.tip&&d.slots.suffix?t.renderSlot(e.$slots,"suffix",{key:2,item:{activeIndex:u.activeIndex,item:u.item}}):u.item.tip?(t.openBlock(),t.createBlock("span",a,t.toDisplayString(u.item.tip),1)):t.createCommentVNode("v-if",!0)])],38))},n.__file="src/components/MenusItem.vue";var d={name:"menus",components:{MenusItem:n},props:{menus:{type:Array,default:[]},menusStyle:{type:Object,default:{}},menusItemClass:{type:String,default:null},event:{type:Object,default:{}},position:{type:Object,default:{}},minWidth:{type:[Number,String],default:"none"},maxWidth:{type:[Number,String],default:"none"},zIndex:{type:[Number,String],default:3},direction:{type:String,default:"right"},open:{type:Boolean,default:!1}},setup(e,{slots:n}){const o={},i=globalThis.document.documentElement.clientWidth,l=globalThis.document.documentElement.clientHeight,s=e.position.x&&e.position.y?t.ref(e.position):t.ref({x:e.event.clientX,y:e.event.clientY,width:0,height:0}),a=t.ref(null),u=t.ref({left:0,top:0,minWidth:`${e.minWidth}px`,maxWidth:"none"==e.maxWidth?e.maxWidth:`${e.maxWidth}px`,zIndex:e.zIndex}),c=t.ref(e.direction),m=t.ref(-1),r=t.ref(!1),p=t.ref(!1);return t.onMounted((()=>{r.value=!0,e.menus.forEach((e=>{p.value=p.value||void 0!==e.icon,p.value})),t.nextTick((()=>{var e,t=a.value.offsetWidth,n=a.value.offsetHeight;"left"===c.value?(e=t,u.value.left=s.value.x-e,c.value="left",u.value.left<0&&(c.value="right",0===s.value.width||void 0===s.value.width?u.value.left=0:u.value.left=s.valuen.x+s.value.width)):(e=i,t=t,u.value.left=s.value.x+s.value.width,c.value="right",u.value.left+t>e&&(c.value="left",0===s.value.width||void 0===s.value.width?u.value.left=e-t:u.value.left=s.value.x-t)),u.value.top=s.value.y,s.value.y+n>l&&(0===s.value.height||void 0===s.value.height?u.value.top=s.value.y-n:u.value.top=l-n)}))})),{open:r,hasIcon:p,menusRef:a,style:u,close:function(){r.value=!1,this&&this.ctx&&this.ctx.instance&&this.ctx.instance.close(),t.nextTick((()=>{this.$unmount()&&this.$unmount()}))},menusEnter:function(i,l,s){if(m.value=s,!l.disabled){if(o.instance){if(o.index===s)return;o.instance.close.bind(o.instance)(),o.instance=null,o.index=null}if(l.children){var a=i.target.getBoundingClientRect();a=t.h(d,{...e,menus:l.children||[],direction:c.value,position:{x:a.x+3,y:a.y-8,width:a.width-6,height:a.width}},n);const u=t.createApp(a);o.instance=u.mount(globalThis.document.createElement("div")),o.instance.$unmount=u.unmount,o.index=s,i.preventDefault()}}},ctx:o,activeIndex:m,slots:n}}};const c=t.withScopeId("data-v-d65e2e18");t.pushScopeId("data-v-d65e2e18");const m={class:"menus_body"};t.popScopeId(),n=c((function(e,n,o,i,l,s){const a=t.resolveComponent("MenusItem");return t.openBlock(),t.createBlock(t.Teleport,{to:"body"},[t.createVNode(t.Transition,{name:"menus-fade"},{default:c((()=>[i.open?(t.openBlock(),t.createBlock("div",{key:0,ref:"menusRef",class:"menus",style:{...o.menusStyle,top:`${i.style.top}px`,left:`${i.style.left}px`,minWidth:i.style.minWidth,maxWidth:i.style.maxWidth,zIndex:i.style.zIndex},onContextmenu:n[1]||(n[1]=e=>e.preventDefault()),onMousewheel:n[2]||(n[2]=t.withModifiers((()=>{}),["stop"]))},[t.createVNode("div",m,[(t.openBlock(!0),t.createBlock(t.Fragment,null,t.renderList(o.menus,((n,l)=>(t.openBlock(),t.createBlock(t.Fragment,{key:l},[n.hidden?t.createCommentVNode("v-if",!0):(t.openBlock(),t.createBlock(a,{key:0,item:n,index:l,activeIndex:i.activeIndex,onMenusEnter:i.menusEnter,menusItemClass:o.menusItemClass,hasIcon:i.hasIcon},t.createSlots({_:2},[i.slots.default?{name:"default",fn:c((({item:n})=>[t.renderSlot(e.$slots,"default",{item:n})]))}:void 0,!i.slots.default&&i.slots.icon?{name:"icon",fn:c((({item:n})=>[t.renderSlot(e.$slots,"icon",{item:n})]))}:void 0,!i.slots.default&&i.slots.label?{name:"label",fn:c((({item:n})=>[t.renderSlot(e.$slots,"label",{item:n})]))}:void 0,!i.slots.default&&i.slots.suffix?{name:"suffix",fn:c((({item:n})=>[t.renderSlot(e.$slots,"suffix",{item:n})]))}:void 0]),1032,["item","index","activeIndex","onMenusEnter","menusItemClass","hasIcon"]))],64)))),128))])],36)):t.createCommentVNode("v-if",!0)])),_:1})])})),u("\n.menus[data-v-d65e2e18] {\n position: fixed;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);\n background: #fff;\n border-radius: 4px;\n padding: 8px 0;\n user-select: none;\n box-sizing: border-box;\n}\n.menus_body[data-v-d65e2e18] {\n display: block;\n}\n.menus-fade-enter-active[data-v-d65e2e18],\n.menus-fade-leave-active[data-v-d65e2e18] {\n transition: opacity 0.1s ease-in-out;\n}\n.menus-fade-enter-from[data-v-d65e2e18],\n.menus-fade-leave-to[data-v-d65e2e18] {\n opacity: 0;\n}\n"),d.render=n,d.__scopeId="data-v-d65e2e18",d.__file="src/components/Menus.vue";var r={name:"vue3-menus",props:{menus:{type:Array,default:[]},menusStyle:{type:Object,default:{}},menusItemClass:{type:String,default:null},event:{type:Object,default:{}},position:{type:Object,default:{}},minWidth:{type:[Number,String],default:"none"},maxWidth:{type:[Number,String],default:"none"},zIndex:{type:[Number,String],default:2},open:{type:Boolean,default:!1}},setup(e,{emit:n,slots:o}){let i=null;function l(){n("update:open",!1),i&&(i.close(),i=null)}return t.watch((()=>e.open),(n=>{if(n){i&&(i.close(),i=null),n=t.h(d,{...e},o);const s=t.createApp(n);i=s.mount(globalThis.document.createElement("div")),i.$unmount=s.unmount,setTimeout((()=>{globalThis.document.addEventListener("click",l),globalThis.document.addEventListener("contextmenu",l),globalThis.document.addEventListener("wheel",l)}),0)}else globalThis.document.removeEventListener("click",l),globalThis.document.removeEventListener("contextmenu",l),globalThis.document.removeEventListener("wheel",l)})),{}},render:()=>null,__file:"src/components/Vue3Menus.vue"};let p=null;function f(){p&&(p.close(),p=null),globalThis.document.removeEventListener("click",f),globalThis.document.removeEventListener("contextmenu",f),globalThis.document.removeEventListener("wheel",f)}function v(e,n){e=e||{},p&&(p.close(),p=null,globalThis.document.removeEventListener("click",f),globalThis.document.removeEventListener("contextmenu",f),globalThis.document.removeEventListener("wheel",f));let o=t.createApp(d,{event:n,...e});return p=o.mount(globalThis.document.createElement("div")),p.$unmount=o.unmount,null!=e.prevent&&!e.prevent||n.preventDefault(),setTimeout((()=>{globalThis.document.addEventListener("click",f),globalThis.document.addEventListener("contextmenu",f),globalThis.document.addEventListener("wheel",f)}),0),p}function h(e,t={}){e.component(t.name||r.name,r),e.directive("menus",x),e.config.globalProperties.$menusEvent=(e,t)=>v(t,e)}const x={mounted(e,{value:t,arg:n,instance:o}){void 0===n||"right"===n?e.addEventListener("contextmenu",v.bind(o,t)):"left"===n?e.addEventListener("click",v.bind(o,t)):"all"===n&&(e.addEventListener("contextmenu",v.bind(o,t)),e.addEventListener("click",v.bind(o,t)))},unmounted(e,{arg:t}){void 0===t||"right"===t?e.removeEventListener("contextmenu",v):"left"===t?e.removeEventListener("click",v):"all"===t&&(e.removeEventListener("contextmenu",v),e.removeEventListener("click",v))}};e.Vue3Menus=r,e.default=function(e){e.use(h)},e.directive=x,e.menusEvent=(e,t)=>v(t,e),Object.defineProperty(e,"__esModule",{value:!0})})); |
| { | ||
| "name": "vue3-menus", | ||
| "version": "1.0.16", | ||
| "version": "1.0.17", | ||
| "author": "xufangyi", | ||
@@ -5,0 +5,0 @@ "private": false, |
| # vue3-menus | ||
| Vue3.0 自定义右键菜单 | ||
| Vue3.0 自定义右键菜单，支持 Vite2.0 | ||
@@ -34,3 +34,3 @@ Vue3.0 原生实现完全自定义右键菜单组件, 零依赖，可根据可视区域自动调节显示位置，可支持插槽完全重写每一项菜单 | ||
| ## 使用 | ||
| ## 使用（Vite 情况下同样使用） | ||
@@ -350,37 +350,2 @@ CDN引入则不需要 `app.use(Vue3Menus)` | ||
| ## Vite下使用 | ||
| ### 使用方式1 | ||
| ```js | ||
| import { createApp } from 'vue'; | ||
| import App from './App.vue'; | ||
| import Vue3Menus from 'https://esm.sh/vue3-menus@1.0.3'; // 也可以将1.0.3换成其他版本号 | ||
| const app = createApp(App); | ||
| app.mount('#app'); | ||
| ``` | ||
| ### 使用方式2 | ||
| > 在vite配置文件vite.config中进行别名替换 | ||
| ```js | ||
| import { createApp } from 'vue'; | ||
| import App from './App.vue'; | ||
| import Vue3Menus from 'vue3-menus'; | ||
| const app = createApp(App); | ||
| app.mount('#app'); | ||
| ``` | ||
| ```js | ||
| export default { | ||
| resolve: { | ||
| alias: { | ||
| // 其他配置 | ||
| 'vue3-menus': 'https://esm.sh/vue3-menus@1.0.3'// 也可以将1.0.3换成其他版本号 | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
| ## 参数说明 | ||
@@ -416,17 +381,17 @@ | ||
| | 属性 | 描述 | 类型 | 是否必填 | 默认值 | 插槽传入值 | | ||
| | :-----: | :--------------: | :-------: | :------: | :-----: | :-----------------------------------------------: | | ||
| | menus | 菜单列表信息 | `MenusItemOptions[]` | `true` | [] | | ||
| | menusStyle | 菜单容器的样式 | `object` | `false` | {} | | ||
| | menusItemClass | 菜单每一项的`class`名 | `string` | `false` | `null` | | ||
| | event | 鼠标事件信息(指令使用时可以不传) | `Event` | 与`position`必填一项 | {} | | ||
| | position | 手动传入菜单显示位置(指令使用时可以不传) | `{x: number, y: number}` | 与`event`必填一项 | {} | | ||
| | minWidth | 菜单容器最小宽度 | `number` \| `string` | `false` | `none` | | ||
| | maxWidth | 菜单容器最打宽度 | `number` \| `string` | `false` | `none` | | ||
| | zIndex | 菜单层级 | `number` \| `string` | `false` | `3` | | ||
| | open | 控制菜单组件显示: `v-model:open` | `boolean` | `true` | `false` | `false` | | ||
| | default | 默认插槽 | `Slot` | `false` | - | `activeIndex`: 当前选中项, `item`: 当前菜单属性值 | | ||
| | icon | 图标插槽 | `Slot` | `false` | - | `activeIndex`: 当前选中项, `item`: 当前菜单属性值 | | ||
| | label | 菜单标题插槽 | `Slot` | `false` | - | `activeIndex`: 当前选中项, `item`: 当前菜单属性值 | | ||
| | suffix | 菜单后缀插槽 | `Slot` | `false` | - | `activeIndex`: 当前选中项, `item`: 当前菜单属性值 | | ||
| | 属性 | 描述 | 类型 | 是否必填 | 默认值 | 插槽传入值 | | ||
| | :------------: | :--------------------------------------: | :----------------------: | :------------------: | :-----: | :-----------------------------------------------: | | ||
| | menus | 菜单列表信息 | `MenusItemOptions[]` | `true` | [] | | ||
| | menusStyle | 菜单容器的样式 | `object` | `false` | {} | | ||
| | menusItemClass | 菜单每一项的`class`名 | `string` | `false` | `null` | | ||
| | event | 鼠标事件信息(指令使用时可以不传) | `Event` | 与`position`必填一项 | {} | | ||
| | position | 手动传入菜单显示位置(指令使用时可以不传) | `{x: number, y: number}` | 与`event`必填一项 | {} | | ||
| | minWidth | 菜单容器最小宽度 | `number` \| `string` | `false` | `none` | | ||
| | maxWidth | 菜单容器最打宽度 | `number` \| `string` | `false` | `none` | | ||
| | zIndex | 菜单层级 | `number` \| `string` | `false` | `3` | | ||
| | open | 控制菜单组件显示: `v-model:open` | `boolean` | `true` | `false` | `false` | | ||
| | default | 默认插槽 | `Slot` | `false` | - | `activeIndex`: 当前选中项, `item`: 当前菜单属性值 | | ||
| | icon | 图标插槽 | `Slot` | `false` | - | `activeIndex`: 当前选中项, `item`: 当前菜单属性值 | | ||
| | label | 菜单标题插槽 | `Slot` | `false` | - | `activeIndex`: 当前选中项, `item`: 当前菜单属性值 | | ||
| | suffix | 菜单后缀插槽 | `Slot` | `false` | - | `activeIndex`: 当前选中项, `item`: 当前菜单属性值 | | ||
@@ -433,0 +398,0 @@ ### 指令使用配置 |
| import Vue3Menus from './Vue3Menus.vue'; | ||
| import $menusEvent from './event'; | ||
| Vue3Menus.install = (app, options = {}) => { | ||
| app.component(options.name || Vue3Menus.name, Vue3Menus); | ||
| }; | ||
| const directive = { | ||
@@ -37,6 +33,2 @@ mounted(el, { value, arg, instance }) { | ||
| if (typeof window !== "undefined" && window.Vue) { | ||
| window.Vue3Menus = install; | ||
| } | ||
| const menusEvent = (event, menus) => $menusEvent(menus, event); | ||
@@ -43,0 +35,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.98%
103323
- Lines of code
- decreased by-1.38%
1427
- Number of lines in readme file
- decreased by-7.99%
403
No dependency changes