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) 9.99 kB
"use strict";var e=require("primevue/utils"),t=require("primevue/overlayeventbus"),i=require("primevue/ripple"),n=require("vue");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=l(t),o={name:"TieredMenuSub",emits:["leaf-click","keydown-item"],props:{model:{type:Array,default:null},root:{type:Boolean,default:!1},popup:{type:Boolean,default:!1},parentActive:{type:Boolean,default:!1},template:{type:Object,default:null}},documentClickListener:null,watch:{parentActive(e){e||(this.activeItem=null)}},data:()=>({activeItem:null}),updated(){this.root&&this.activeItem&&this.bindDocumentClickListener()},beforeUnmount(){this.unbindDocumentClickListener()},methods:{onItemMouseEnter(e,t){t.disabled?e.preventDefault():this.root?(this.activeItem||this.popup)&&(this.activeItem=t):this.activeItem=t},onItemClick(e,t,i){t.disabled?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.items&&(this.activeItem&&t===this.activeItem?this.activeItem=null:this.activeItem=t),t.items||this.onLeafClick(),t.to&&i&&i(e))},onLeafClick(){this.activeItem=null,this.$emit("leaf-click")},onItemKeyDown(e,t){let i=e.currentTarget.parentElement;switch(e.which){case 40:var n=this.findNextItem(i);n&&n.children[0].focus(),e.preventDefault();break;case 38:var l=this.findPrevItem(i);l&&l.children[0].focus(),e.preventDefault();break;case 39:t.items&&(this.activeItem=t,setTimeout((()=>{i.children[1].children[0].children[0].focus()}),50)),e.preventDefault()}this.$emit("keydown-item",{originalEvent:e,element:i})},onChildItemKeyDown(e){37===e.originalEvent.which&&(this.activeItem=null,e.element.parentElement.previousElementSibling.focus())},findNextItem(t){let i=t.nextElementSibling;return i?e.DomHandler.hasClass(i,"p-disabled")||!e.DomHandler.hasClass(i,"p-menuitem")?this.findNextItem(i):i:null},findPrevItem(t){let i=t.previousElementSibling;return i?e.DomHandler.hasClass(i,"p-disabled")||!e.DomHandler.hasClass(i,"p-menuitem")?this.findPrevItem(i):i:null},getItemClass(e){return["p-menuitem",e.class,{"p-menuitem-active":this.activeItem===e}]},getLinkClass:e=>["p-menuitem-link",{"p-disabled":e.disabled}],bindDocumentClickListener(){this.documentClickListener||(this.documentClickListener=e=>{this.$el&&!this.$el.contains(e.target)&&(this.activeItem=null,this.unbindDocumentClickListener())},document.addEventListener("click",this.documentClickListener))},unbindDocumentClickListener(){this.documentClickListener&&(document.removeEventListener("click",this.documentClickListener),this.documentClickListener=null)},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible},computed:{containerClass(){return{"p-submenu-list":!this.root}}},directives:{ripple:l(i).default}};const r={class:"p-menuitem-text"},a={class:"p-menuitem-text"},c={key:0,class:"p-submenu-icon pi pi-angle-right"};o.render=function(e,t,i,l,s,o){const d=n.resolveComponent("router-link"),u=n.resolveComponent("TieredMenuSub",!0),m=n.resolveDirective("ripple");return n.openBlock(),n.createBlock("ul",{ref:"element",class:o.containerClass,role:"'menubar' : 'menu'","aria-orientation":"horizontal"},[(n.openBlock(!0),n.createBlock(n.Fragment,null,n.renderList(i.model,((e,t)=>(n.openBlock(),n.createBlock(n.Fragment,{key:e.label+t.toString()},[o.visible(e)&&!e.separator?(n.openBlock(),n.createBlock("li",{key:0,class:o.getItemClass(e),style:e.style,onMouseenter:t=>o.onItemMouseEnter(t,e),role:"none"},[i.template?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(i.template),{key:1,item:e},null,8,["item"])):(n.openBlock(),n.createBlock(n.Fragment,{key:0},[e.to&&!e.disabled?(n.openBlock(),n.createBlock(d,{key:0,to:e.to,custom:""},{default:n.withCtx((({navigate:t,href:i})=>[n.withDirectives(n.createVNode("a",{href:i,onClick:i=>o.onItemClick(i,e,t),class:o.getLinkClass(e),onKeydown:t=>o.onItemKeyDown(t,e),role:"menuitem"},[n.createVNode("span",{class:["p-menuitem-icon",e.icon]},null,2),n.createVNode("span",r,n.toDisplayString(e.label),1)],42,["href","onClick","onKeydown"]),[[m]])])),_:2},1032,["to"])):n.withDirectives((n.openBlock(),n.createBlock("a",{key:1,href:e.url,class:o.getLinkClass(e),target:e.target,"aria-haspopup":null!=e.items,"aria-expanded":e===s.activeItem,onClick:t=>o.onItemClick(t,e),onKeydown:t=>o.onItemKeyDown(t,e),role:"menuitem",tabindex:e.disabled?null:"0"},[n.createVNode("span",{class:["p-menuitem-icon",e.icon]},null,2),n.createVNode("span",a,n.toDisplayString(e.label),1),e.items?(n.openBlock(),n.createBlock("span",c)):n.createCommentVNode("",!0)],42,["href","target","aria-haspopup","aria-expanded","onClick","onKeydown","tabindex"])),[[m]])],64)),o.visible(e)&&e.items?(n.openBlock(),n.createBlock(u,{model:e.items,key:e.label+"_sub_",template:i.template,onLeafClick:o.onLeafClick,onKeydownItem:o.onChildItemKeyDown,parentActive:e===s.activeItem},null,8,["model","template","onLeafClick","onKeydownItem","parentActive"])):n.createCommentVNode("",!0)],46,["onMouseenter"])):n.createCommentVNode("",!0),o.visible(e)&&e.separator?(n.openBlock(),n.createBlock("li",{class:["p-menu-separator",e.class],style:e.style,key:"separator"+t.toString(),role:"separator"},null,6)):n.createCommentVNode("",!0)],64)))),128))],2)};var d={name:"TieredMenu",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}},target:null,container:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,data:()=>({visible:!1}),beforeUnmount(){this.unbindResizeListener(),this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.target=null,this.container&&this.autoZIndex&&e.ZIndexUtils.clear(this.container),this.container=null},methods:{itemClick(e){const t=e.item;t.command&&(t.command(e),e.originalEvent.preventDefault()),this.hide()},toggle(e){this.visible?this.hide():this.show(e)},show(e){this.visible=!0,this.target=e.currentTarget},hide(){this.visible=!1},onEnter(t){this.alignOverlay(),this.bindOutsideClickListener(),this.bindResizeListener(),this.bindScrollListener(),this.autoZIndex&&e.ZIndexUtils.set("menu",t,this.baseZIndex+this.$primevue.config.zIndex.menu)},onLeave(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.unbindScrollListener()},onAfterLeave(t){this.autoZIndex&&e.ZIndexUtils.clear(t)},alignOverlay(){e.DomHandler.absolutePosition(this.container,this.target),this.container.style.minWidth=e.DomHandler.getOuterWidth(this.target)+"px"},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.visible&&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 e.ConnectedOverlayScrollHandler(this.target,(()=>{this.visible&&this.hide()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.visible&&this.hide()},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(){return this.target&&(this.target===event.target||this.target.contains(event.target))},onLeafClick(){this.popup&&this.hide()},containerRef(e){this.container=e},onOverlayClick(e){s.default.emit("overlay-click",{originalEvent:e,target:this.target})}},computed:{containerClass(){return["p-tieredmenu p-component",{"p-tieredmenu-overlay":this.popup,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]}},components:{TieredMenuSub:o}};!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-tieredmenu-overlay {\n position: absolute;\n}\n.p-tieredmenu ul {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.p-tieredmenu .p-submenu-list {\n position: absolute;\n min-width: 100%;\n z-index: 1;\n display: none;\n}\n.p-tieredmenu .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-tieredmenu .p-menuitem-text {\n line-height: 1;\n}\n.p-tieredmenu .p-menuitem {\n position: relative;\n}\n.p-tieredmenu .p-menuitem-link .p-submenu-icon {\n margin-left: auto;\n}\n.p-tieredmenu .p-menuitem-active > .p-submenu-list {\n display: block;\n left: 100%;\n top: 0;\n}\n"),d.render=function(e,t,i,l,s,o){const r=n.resolveComponent("TieredMenuSub");return n.openBlock(),n.createBlock(n.Teleport,{to:i.appendTo,disabled:!i.popup},[n.createVNode(n.Transition,{name:"p-connected-overlay",onEnter:o.onEnter,onLeave:o.onLeave,onAfterLeave:o.onAfterLeave},{default:n.withCtx((()=>[!i.popup||s.visible?(n.openBlock(),n.createBlock("div",n.mergeProps({key:0,ref:o.containerRef,class:o.containerClass},e.$attrs,{onClick:t[1]||(t[1]=(...e)=>o.onOverlayClick&&o.onOverlayClick(...e))}),[n.createVNode(r,{model:i.model,root:!0,popup:i.popup,onLeafClick:o.onLeafClick,template:e.$slots.item},null,8,["model","popup","onLeafClick","template"])],16)):n.createCommentVNode("",!0)])),_:1},8,["onEnter","onLeave","onAfterLeave"])],8,["to","disabled"])},module.exports=d;