UNPKG

primevue

Version:

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![npm version](https://badge.fury.io/js/primevue.svg)](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

2 lines (1 loc) 7.75 kB
import{ZIndexUtils as e,DomHandler as t,ConnectedOverlayScrollHandler as i}from"primevue/utils";import n from"primevue/overlayeventbus";import l from"primevue/ripple";import{resolveComponent as s,resolveDirective as r,openBlock as a,createElementBlock as o,normalizeClass as c,normalizeStyle as d,Fragment as u,createBlock as m,withCtx as p,withDirectives as h,createElementVNode as b,toDisplayString as v,resolveDynamicComponent as y,createCommentVNode as k,Teleport as f,createVNode as g,Transition as C,mergeProps as L,renderList as x,renderSlot as E,createTextVNode as z}from"vue";var A={name:"Menuitem",inheritAttrs:!1,emits:["click"],props:{item:null,template:null,exact:null},methods:{onClick(e,t){this.$emit("click",{originalEvent:e,item:this.item,navigate:t})},linkClass(e,t){return["p-menuitem-link",{"p-disabled":this.disabled(e),"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},visible(){return"function"==typeof this.item.visible?this.item.visible():!1!==this.item.visible},disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label(){return"function"==typeof this.item.label?this.item.label():this.item.label}},computed:{containerClass(){return["p-menuitem",this.item.class]}},directives:{ripple:l}};const S=["href","onClick"],w={class:"p-menuitem-text"},O=["href","target","tabindex"],$={class:"p-menuitem-text"};A.render=function(e,t,i,n,l,f){const g=s("router-link"),C=r("ripple");return f.visible()?(a(),o("li",{key:0,class:c(f.containerClass),role:"none",style:d(i.item.style)},[i.template?(a(),m(y(i.template),{key:1,item:i.item},null,8,["item"])):(a(),o(u,{key:0},[i.item.to&&!f.disabled(i.item)?(a(),m(g,{key:0,to:i.item.to,custom:""},{default:p((({navigate:e,href:t,isActive:n,isExactActive:l})=>[h((a(),o("a",{href:t,onClick:t=>f.onClick(t,e),class:c(f.linkClass(i.item,{isActive:n,isExactActive:l})),role:"menuitem"},[b("span",{class:c(["p-menuitem-icon",i.item.icon])},null,2),b("span",w,v(f.label()),1)],10,S)),[[C]])])),_:1},8,["to"])):h((a(),o("a",{key:1,href:i.item.url,class:c(f.linkClass(i.item)),onClick:t[0]||(t[0]=(...e)=>f.onClick&&f.onClick(...e)),target:i.item.target,role:"menuitem",tabindex:f.disabled(i.item)?null:"0"},[b("span",{class:c(["p-menuitem-icon",i.item.icon])},null,2),b("span",$,v(f.label()),1)],10,O)),[[C]])],64))],6)):k("",!0)};var H={name:"Menu",emits:["show","hide"],inheritAttrs:!1,props:{popup:{type:Boolean,default:!1},model:{type:Array,default:null},appendTo:{type:String,default:"body"},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},exact:{type:Boolean,default:!0}},data:()=>({overlayVisible:!1}),target:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,beforeUnmount(){this.unbindResizeListener(),this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.target=null,this.container&&this.autoZIndex&&e.clear(this.container),this.container=null},methods:{itemClick(e){const t=e.item;this.disabled(t)||(t.command&&t.command(e),t.to&&e.navigate&&e.navigate(e.originalEvent),this.hide())},toggle(e){this.overlayVisible?this.hide():this.show(e)},show(e){this.overlayVisible=!0,this.target=e.currentTarget},hide(){this.overlayVisible=!1,this.target=null},onEnter(t){this.alignOverlay(),this.bindOutsideClickListener(),this.bindResizeListener(),this.bindScrollListener(),this.autoZIndex&&e.set("menu",t,this.baseZIndex+this.$primevue.config.zIndex.menu),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.unbindScrollListener(),this.$emit("hide")},onAfterLeave(t){this.autoZIndex&&e.clear(t)},alignOverlay(){t.absolutePosition(this.container,this.target),this.container.style.minWidth=t.getOuterWidth(this.target)+"px"},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&this.container&&!this.container.contains(e.target)&&!this.isTargetClicked(e)&&this.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new i(this.target,(()=>{this.overlayVisible&&this.hide()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&this.hide()},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(e){return this.target&&(this.target===e.target||this.target.contains(e.target))},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label,containerRef(e){this.container=e},onOverlayClick(e){n.emit("overlay-click",{originalEvent:e,target:this.target})}},computed:{containerClass(){return["p-menu p-component",{"p-menu-overlay":this.popup,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]}},components:{Menuitem:A}};const T={class:"p-menu-list p-reset",role:"menu"},V={key:0,class:"p-submenu-header"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===i&&n.firstChild?n.insertBefore(l,n.firstChild):n.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-menu-overlay {\n position: absolute;\n top: 0;\n left: 0;\n}\n.p-menu ul {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.p-menu .p-menuitem-link {\n cursor: pointer;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n text-decoration: none;\n overflow: hidden;\n position: relative;\n}\n.p-menu .p-menuitem-text {\n line-height: 1;\n}\n"),H.render=function(e,t,i,n,l,r){const h=s("Menuitem");return a(),m(f,{to:i.appendTo,disabled:!i.popup},[g(C,{name:"p-connected-overlay",onEnter:r.onEnter,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave},{default:p((()=>[!i.popup||l.overlayVisible?(a(),o("div",L({key:0,ref:r.containerRef,class:r.containerClass},e.$attrs,{onClick:t[0]||(t[0]=(...e)=>r.onOverlayClick&&r.onOverlayClick(...e))}),[b("ul",T,[(a(!0),o(u,null,x(i.model,((t,n)=>(a(),o(u,{key:r.label(t)+n.toString()},[t.items&&r.visible(t)&&!t.separator?(a(),o(u,{key:0},[t.items?(a(),o("li",V,[E(e.$slots,"item",{item:t},(()=>[z(v(r.label(t)),1)]))])):k("",!0),(a(!0),o(u,null,x(t.items,((t,l)=>(a(),o(u,{key:t.label+n+l},[r.visible(t)&&!t.separator?(a(),m(h,{key:0,item:t,onClick:r.itemClick,template:e.$slots.item,exact:i.exact},null,8,["item","onClick","template","exact"])):r.visible(t)&&t.separator?(a(),o("li",{class:c(["p-menu-separator",t.class]),style:d(t.style),key:"separator"+n+l,role:"separator"},null,6)):k("",!0)],64)))),128))],64)):r.visible(t)&&t.separator?(a(),o("li",{class:c(["p-menu-separator",t.class]),style:d(t.style),key:"separator"+n.toString(),role:"separator"},null,6)):(a(),m(h,{key:r.label(t)+n.toString(),item:t,onClick:r.itemClick,template:e.$slots.item,exact:i.exact},null,8,["item","onClick","template","exact"]))],64)))),128))])],16)):k("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])],8,["to","disabled"])};export{H as default};