@progress/kendo-vue-layout
Version:
9 lines (8 loc) • 8.55 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),s=require("@progress/kendo-vue-common"),N=require("@progress/kendo-vue-popup"),p=require("../utils/itemsIdsUtils.js"),l=require("../utils/misc.js"),F=require("./MenuItemLink.js"),L=require("./MenuItemArrow.js"),c=n.defineComponent({name:"KendoMenuItemInternal",emits:{keydown:null,mouseover:null,mouseleave:null,blur:null,focus:null,click:null,mousedown:null},props:{item:Object,focusedItemId:String,lastItemIdToBeOpened:String,tabbableItemId:String,itemRender:[String,Object,Function],linkRender:[String,Object,Function],isMenuVertical:Boolean,isDirectionRightToLeft:Boolean,menuGuid:String,originalItemNeeded:Function},created(){this.itemElement=null,this.prevFocusedItemId=this.$props.focusedItemId,this.isFirstRender=!0,this._anchor=s.guid()},data(){return{opened:!1}},mounted(){this.itemElement=s.getRef(this,"kendoAnchor");const e=this.$props.focusedItemId,t=this.$props.item.id;e&&e===t&&this.itemElement&&this.itemElement.focus(),this.isFirstRender=!1},watch:{focusedItemId:function(e,t){this.prevFocusedItemId=t}},updated(){const e=this.$props.focusedItemId,t=this.$props.item.id;e?this.prevFocusedItemId!==e&&e===t&&!this.itemElement.contains(document.activeElement)&&this.itemElement.focus():document.activeElement===this.itemElement&&this.itemElement.blur()},computed:{hasItems(){return this.$props.item.items.length>0},currentItemRender(){return this.$props.item.render||this.$props.itemRender},currentLinkRender(){return this.$props.item.linkRender||this.$props.linkRender},contentRender(){return this.$props.item.contentParentItemId?this.$props.item.contentRender:null},currentOpened(){const e=this.$props;return this.hasItems&&p.shouldOpenItem(e.item.id,e.lastItemIdToBeOpened)&&!this.isFirstRender},currentFocused(){const e=this.$props.focusedItemId,t=this.$props.item.id;return e===t},popupClassName(){return s.classNames({"k-menu-popup":!0,"k-overflow-visible":!0,"k-rtl":this.$props.isDirectionRightToLeft,[this.item.popupClass]:this.item.popupClass})},menuItemClassName(){const e=this.$props.item;return{"k-item":!0,"k-menu-item":!0,"k-first":p.isFirstItemFromSiblings(e.id),"k-last":e.isLastFromSiblings,"k-disabled":e.disabled,[e.cssClass?e.cssClass:""]:e.cssClass}}},render(){const{icon:e,svgIcon:t,id:r,contentParentItemId:m,items:y,text:a,cssStyle:f,disabled:$,url:g,separator:M}=this.$props.item,o=r,k=function(){const i=m,d=function(u){return s.getTemplate.call(this,{h:n.h,template:this.contentRender,additionalProps:u})};return n.createVNode("div",{class:"k-content",role:"presentation"},[d.call(this,{item:this.handleOriginalItemNeeded(i),itemId:i})])},b=function(){return e||t?n.createVNode(s.Icon,{name:s.getIconName(e),icon:t},null):null},v=function(){return this.hasItems?n.createVNode(L.MenuItemArrow,{itemId:r,verticalMenu:this.$props.isMenuVertical,dir:l.convertBoolDirectionToString(this.$props.isDirectionRightToLeft),key:"2"},null):null},h=this.$props.originalItemNeeded(r),R=function(){const i=n.createVNode("span",{class:"k-menu-link-text"},[a]),d=s.getTemplate.call(this,{h:n.h,template:this.currentItemRender,defaultRendering:i,additionalProps:{item:h,itemId:r,key:"1"}}),u=n.createVNode(F.MenuItemLink,{url:g,opened:this.currentOpened,focused:this.currentFocused},{default:()=>[[b.call(this),d,v.call(this)]]});return s.getTemplate.call(this,{h:n.h,template:this.currentLinkRender,defaultRendering:u,additionalProps:{item:h,itemId:r,opened:this.currentOpened,dir:l.convertBoolDirectionToString(this.$props.isDirectionRightToLeft)}})},O=function(){const{anchorAlign:i,popupAlign:d,collision:u}=l.getPopupSettings(o,this.$props.isMenuVertical,this.$props.isDirectionRightToLeft);return n.createVNode(N.Popup,{anchor:this._anchor,show:this.currentOpened,popupClass:this.popupClassName,anchorAlign:i,popupAlign:d,collision:u,animate:!1,key:"1"},{default:()=>[n.createVNode(I,{parentItemId:o,items:this.$props.item.items,menuGuid:this.$props.menuGuid,focusedItemId:this.$props.focusedItemId,lastItemIdToBeOpened:this.$props.lastItemIdToBeOpened,tabbableItemId:this.$props.tabbableItemId,itemRender:this.$props.itemRender,linkRender:this.$props.linkRender,isMenuVertical:this.$props.isMenuVertical,isDirectionRightToLeft:this.$props.isDirectionRightToLeft,class:"k-group k-menu-group k-menu-group-md k-reset",onMouseover:this.handleItemMouseOver,onMouseleave:this.handleItemMouseLeave,onMousedown:this.handleMouseDown,onBlur:this.handleItemMouseBlur,onFocus:this.handleItemMouseFocus,onClick:this.handleClick,onKeydown:this.handleKeyDown,originalItemNeeded:this.handleOriginalItemNeeded},null)]})},w=n.createVNode("li",{class:"k-separator k-item","aria-hidden":!0,key:o},null);return M?w:n.createVNode("li",{class:this.menuItemClassName,style:f,tabindex:o===this.$props.tabbableItemId?0:-1,onMouseover:this.onMouseOver,onMouseleave:this.onMouseLeave,onMousedown:i=>this.handleMouseDown(i),onFocusout:()=>this.handleBlur(o),onFocusin:()=>this.handleFocus(o),onClick:i=>this.handleClick(i,o),onKeydown:this.handleKeyDown,role:"menuitem","aria-disabled":$?!0:void 0,"aria-haspopup":this.hasItems?!0:void 0,"aria-expanded":this.hasItems?this.currentOpened:void 0,"aria-label":a,"aria-owns":this.currentOpened?l.getDOMElementId(this.$props.menuGuid,o):void 0,ref:s.setRef(this,"kendoAnchor"),key:"0"},[this.contentRender?k.call(this):R.call(this),O.call(this)])},methods:{handleKeyDown(e){this.$emit("keydown",e)},handleItemMouseOver(e){this.$emit("mouseover",e)},handleItemMouseLeave(e){this.$emit("mouseleave",e)},handleItemMouseBlur(e){this.$emit("blur",e)},handleItemMouseFocus(e){this.$emit("focus",e)},handleClick(e,t){this.$emit("click",e,t)},handleBlur(e){this.$emit("blur",e)},handleFocus(e){this.$emit("focus",e)},handleMouseDown(e){this.$emit("mousedown",e)},handleOriginalItemNeeded(e){return this.$props.originalItemNeeded(e)},onMouseOver(e){this.$emit("mouseover",this.$props.item.id),e.stopPropagation()},onMouseLeave(e){this.$emit("mouseleave",this.$props.item.id),e.stopPropagation()}}}),I=n.defineComponent({name:"KendoMenuItemInternalsList",emits:{keydown:null,mouseover:null,mouseleave:null,blur:null,focus:null,click:null,mousedown:null},props:{items:Array,parentItemId:{type:String,default:void 0},focusedItemId:String,lastItemIdToBeOpened:String,tabbableItemId:String,itemRender:[String,Object,Function],linkRender:[String,Object,Function],isMenuVertical:Boolean,isDirectionRightToLeft:Boolean,menuGuid:String,originalItemNeeded:Function},render(){const e=this.$props.parentItemId,t=function(){return this.$props.items.length>0?this.$props.items.map(function(r,m){return n.createVNode(c,{item:r,isMenuVertical:this.$props.isMenuVertical,isDirectionRightToLeft:this.$props.isDirectionRightToLeft,focusedItemId:this.$props.focusedItemId,lastItemIdToBeOpened:this.$props.lastItemIdToBeOpened,tabbableItemId:this.$props.tabbableItemId,itemRender:this.$props.itemRender,linkRender:this.$props.linkRender,menuGuid:this.$props.menuGuid,onMouseover:this.handleItemMouseOver,onMouseleave:this.handleItemMouseLeave,onMousedown:this.handleItemMouseDown,onKeydown:this.handleKeyDown,onBlur:this.handleItemMouseBlur,onFocus:this.handleItemMouseFocus,onClick:this.handleItemMouseClick,originalItemNeeded:this.handleOriginalItemNeeded,key:m},null)},this):null};return n.createVNode("ul",{role:e!==void 0?"menu":"menubar",id:e!==void 0?l.getDOMElementId(this.$props.menuGuid,e):void 0},[t.call(this)])},methods:{handleKeyDown(e){this.$emit("keydown",e)},handleOriginalItemNeeded(e){return this.$props.originalItemNeeded(e)},handleItemMouseOver(e){this.$emit("mouseover",e)},handleItemMouseLeave(e){this.$emit("mouseleave",e)},handleItemMouseDown(e){this.$emit("mousedown",e)},handleItemMouseBlur(e){this.$emit("blur",e)},handleItemMouseFocus(e){this.$emit("focus",e)},handleItemMouseClick(e,t){this.$emit("click",e,t)},onMouseOver(e){this.$props.parentItemId!==void 0&&(this.$emit("mouseover",this.$props.parentItemId),e.stopPropagation())},onMouseLeave(e){this.$props.parentItemId!==void 0&&(this.$emit("mouseleave",this.$props.parentItemId),e.stopPropagation())}}});exports.MenuItemInternal=c;exports.MenuItemInternalsList=I;