@progress/kendo-vue-layout/menu/components/Menu.js

TODO

/**
 * @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 o=require("vue"),i=require("@progress/kendo-vue-common"),t=require("../utils/itemsIdsUtils.js"),d=require("../utils/prepareInputItemsForInternalWork.js"),I=require("../utils/getNewItemIdUponKeyboardNavigation.js"),n=require("../utils/hoverDelay.js"),a=require("../utils/DirectionHolder.js"),l=require("../utils/MouseOverHandler.js"),u=require("../../package-metadata.js"),m=require("./MenuItemInternal.js"),h=o.defineComponent({name:"KendoMenu",props:{vertical:{type:Boolean,default:!1},items:Array,dir:String,hoverOpenDelay:{type:Number,default:void 0},hoverCloseDelay:{type:Number,default:void 0},openOnClick:Boolean,onSelect:Function,itemRender:[String,Object,Function],linkRender:[String,Object,Function],customCloseItemIds:Array},created(){i.validatePackage(u.packageMetadata),this.mouseOverHandler=new l.MouseOverHandler(this.$props.openOnClick,this.reset,this.onItemMouseOver),this.guid=i.guid(),this.directionHolder=new a.DirectionHolder,this.inputItems=[],this.currentItems=[]},mounted(){this.isFirstRender=!1,this.menuWrapperEl=i.getRef(this,"menuWrapper")},updated(){this.mouseOverHandler.OpenOnClick=this.$props.openOnClick},unmounted(){this.clearItemHoverAndLeaveRequestsIfApplicable()},data(){return{focusedItemId:t.EMPTY_ID,hoveredItemId:t.EMPTY_ID,tabbableItemId:t.ZERO_LEVEL_ZERO_ITEM_ID,isFirstRender:!0}},computed:{menuClassName(){return{"k-widget":!0,"k-reset":!0,"k-header":!0,"k-menu":!0,"k-menu-horizontal":!this.$props.vertical,"k-menu-vertical":this.$props.vertical}}},render(){this.prepareItems(),this.isFirstRender||this.directionHolder.setIsDirectionRightToLeft(this.checkIsDirectionRightToLeft());let e=this.hoveredItemId?this.hoveredItemId:this.focusedItemId?t.getDirectParentId(this.focusedItemId):t.EMPTY_ID;return o.createVNode("div",{class:this.getMenuWrapperClassName(),ref:i.setRef(this,"menuWrapper")},[o.createVNode(m.MenuItemInternalsList,{class:this.menuClassName,"aria-orientation":this.$props.vertical?"vertical":void 0,items:this.currentItems,isMenuVertical:this.$props.vertical,isDirectionRightToLeft:this.directionHolder.getIsDirectionRightToLeft(),focusedItemId:this.focusedItemId,lastItemIdToBeOpened:e,tabbableItemId:this.tabbableItemId,itemRender:i.templateRendering.call(this,this.$props.itemRender,i.getListeners.call(this)),linkRender:i.templateRendering.call(this,this.$props.linkRender,i.getListeners.call(this)),menuGuid:this.guid,onMouseleave:this.onItemMouseLeave,onMouseover:this.onItemMouseOver,onMousedown:this.onItemMouseDown,onKeydown:this.onKeyDown,onFocus:this.onItemFocus,onClick:this.onItemClick,onBlur:this.onItemBlur,originalItemNeeded:this.getInputItem},null)])},methods:{reset(){this.clearItemHoverAndLeaveRequestsIfApplicable(),this.focusedItemId=t.EMPTY_ID,this.hoveredItemId=t.EMPTY_ID,this.tabbableItemId=t.ZERO_LEVEL_ZERO_ITEM_ID},onKeyDown(e){if(this.focusedItemId!==t.EMPTY_ID){const s=t.getItemById(this.focusedItemId,this.currentItems),r=I.getNewItemIdUponKeyboardNavigation(this.currentItems,s.id,e.keyCode,e.key,this.$props.vertical,this.directionHolder.getIsDirectionRightToLeft());s.id!==r&&(e.preventDefault(),this.setFocusedItemId(r)),(e.keyCode===i.Keys.enter||e.keyCode===i.Keys.space)&&!s.disabled&&(this.mouseOverHandler.handleItemSelectedViaKeyboard(),this.dispatchSelectEventIfWired(e,s.id),!e.defaultPrevented&&s.items.length===0&&s.url&&i.canUseDOM&&window.location.assign(s.url))}},onItemMouseOver(e){this.mouseOverHandler.IsMouseOverEnabled&&(this.clearItemHoverAndLeaveRequestsIfApplicable(),this.itemHoverRequest=window.setTimeout(()=>{this.setHoveredItemId(e),this.itemHoverRequest=null},n.getHoverOpenDelay({...this.$props})))},onItemMouseLeave(e){this.mouseOverHandler.IsMouseOverEnabled&&this.isItemWithDefaultClose(e)&&(this.clearItemHoverAndLeaveRequestsIfApplicable(),this.itemLeaveRequest=window.setTimeout(()=>{this.setHoveredItemId(t.EMPTY_ID),this.itemLeaveRequest=null},n.getHoverCloseDelay({...this.$props})))},onItemMouseDown(){this.mouseOverHandler.handleItemMouseDown()},onItemFocus(e){this.setFocusedItemId(e),this.mouseOverHandler.handleItemFocus()},onItemClick(e,s){const r=t.getItemById(s,this.currentItems);r.disabled||(this.setFocusedItemId(s),this.mouseOverHandler.handleItemClick(s,this.isItemWithDefaultClose(s)),this.dispatchSelectEventIfWired(e,s),!e.defaultPrevented&&r.url&&i.canUseDOM&&window.location.assign(r.url))},onItemBlur(e){this.isItemWithDefaultClose(e)&&this.setFocusedItemId(t.EMPTY_ID)},getInputItem(e){return t.getItemById(e,this.inputItems)},setFocusedItemId(e){const s=e===t.EMPTY_ID?this.tabbableItemId:t.getRootParentId(e),r=e===t.EMPTY_ID||t.isIdEmptyOrZeroLevel(this.hoveredItemId)&&t.isIdEmptyOrZeroLevel(e)?this.hoveredItemId:t.EMPTY_ID;this.hoveredItemId=r,this.focusedItemId=e,this.tabbableItemId=s},setHoveredItemId(e){t.isIdEmptyOrZeroLevel(e)&&t.isIdEmptyOrZeroLevel(this.focusedItemId)?this.hoveredItemId=e:(this.hoveredItemId=e,this.focusedItemId=t.EMPTY_ID,this.tabbableItemId=t.ZERO_LEVEL_ZERO_ITEM_ID)},getMenuWrapperClassName(){return{"k-rtl":this.directionHolder.getIsDirectionRightToLeft()}},clearItemHoverAndLeaveRequestsIfApplicable(){this.itemHoverRequest&&(clearTimeout(this.itemHoverRequest),this.itemHoverRequest=null),this.itemLeaveRequest&&(clearTimeout(this.itemLeaveRequest),this.itemLeaveRequest=null)},isItemWithDefaultClose(e){return!this.$props.customCloseItemIds||this.$props.customCloseItemIds.indexOf(e)===-1},checkIsDirectionRightToLeft(){return this.$props.dir!==void 0?this.$props.dir==="rtl":this.menuWrapperEl&&getComputedStyle(this.menuWrapperEl).direction==="rtl"},prepareItems(){const{items:e,inputItems:s}=d.prepareInputItemsForInternalWork.call(this,this.$props.items);this.currentItems=e,this.inputItems=s},dispatchSelectEventIfWired(e,s){this.$emit("select",{event:e,component:this,item:this.getInputItem(s),itemId:s})}}});exports.Menu=h;