@progress/kendo-vue-buttons/ListButton/DropDownButton.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 i=require("vue"),g=require("../Button.js"),s=require("@progress/kendo-vue-common"),y=require("./utils/navigation.js"),b=require("./ButtonItem.js"),k=require("@progress/kendo-vue-popup"),p=require("./utils/popup.js"),$=require("../package-metadata.js"),C=i.defineComponent({name:"KendoDropDownButton",emits:{focus:null,blur:null,itemclick:null,open:null,close:null},props:{accessKey:String,items:{type:Array,default:function(){return[]}},ariaLabel:String,text:String,textField:String,tabIndex:Number,disabled:Boolean,icon:String,svgIcon:Object,iconClass:String,imageUrl:String,popupSettings:Object,itemRender:[String,Object,Function],item:Function,size:{type:String,default:"medium"},shape:{type:String,default:"rectangle",validator:function(e){return[null,"rectangle","square"].includes(e)}},rounded:{type:String,default:"medium"},fillMode:{type:String,default:"solid",validator:function(e){return[null,"flat","link","outline","solid"].includes(e)}},themeColor:{type:String,default:"base",validator:function(e){return[null,"base","dark","error","info","inverse","inverse","light","primary","secondary","success","tertiary","warning"].includes(e)}},opened:{type:Boolean,default:void 0},buttonClass:String,dir:String},created(){this._blurTimeout=null,this._anchor=s.guid(),this.wrapper=null,this.mainButton=null,this.guid=s.guid(),this.buttonsData=[],s.validatePackage($.packageMetadata)},mounted(){this.mainButton=this.$refs[this._anchor],(this.$props.dir===void 0&&this.isRtl()||this.computedOpened)&&this.$forceUpdate()},updated(){this.focused&&this.element()&&(this.mainButton=this.$refs[this._anchor],this.mainButton.focus())},data(){return{currentOpened:!1,focused:!1,focusedIndex:-1}},computed:{computedOpened(){return this.$props.opened===void 0?this.currentOpened:this.$props.opened},wrapperClass(){return{"k-dropdown-button":!0,"k-focus":this.focused}}},setup(){return{kendoAnchorRef:i.ref(null)}},render(){const e=this.isRtl(),t=e?"rtl":void 0,{tabIndex:o,disabled:a}=this.$props,c=s.getDefaultSlots(this);this.buttonsData=this.$props.items;const l=function(){const{item:n,itemRender:r,textField:f}=this.$props;return this.buttonsData.length>0?this.buttonsData.map(function(u,d){const m=typeof u!="string"?{...u,render:s.templateRendering.call(this,u.render,s.getListeners.call(this))}:u;return i.createVNode(b.ButtonItem,{class:"k-menu-item",dataItem:m,textField:f,focused:this.focusedIndex===d,onClick:this.onItemClick,onDown:this.onItemDown,render:s.templateRendering.call(this,r,s.getListeners.call(this)),item:n,index:d,key:d,id:`${this.guid}-${d}`},null)},this):null},h=function(){const{popupSettings:n={},size:r}=this.$props;return i.createVNode(k.Popup,{anchor:this._anchor,show:this.computedOpened,animate:n.animate,popupClass:s.classNames("k-menu-popup",n.popupClass),anchorAlign:n.anchorAlign||p.getAnchorAlign(e),popupAlign:n.popupAlign||p.getPopupAlign(e),style:e?{direction:"rtl"}:void 0},{default:()=>[i.createVNode("ul",{class:`k-group k-menu-group k-reset k-menu-group-${s.kendoThemeMaps.sizeMap[r]||r}`,role:"menu",id:this.guid},[l.call(this)])]})};return i.createVNode("div",{class:this.wrapperClass,onKeydown:this.onKeyDown,onFocusin:this.onFocus,onFocusout:this.onBlur,dir:t},[i.createVNode(g.Button,{size:this.$props.size,shape:this.$props.shape,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,onClick:this.onClickMainButton,onMousedown:this.mouseDown,disabled:a||void 0,tabIndex:o,accessKey:this.$props.accessKey,icon:this.$props.icon,svgIcon:this.$props.svgIcon,iconClass:this.$props.iconClass,class:this.$props.buttonClass,imageUrl:this.$props.imageUrl,dir:t,ref:this._anchor,type:"button","aria-disabled":a,"aria-haspopup":"menu","aria-expanded":this.computedOpened,"aria-label":this.$props.ariaLabel||`${this.$props.text||""} dropdownbutton`,"aria-controls":this.guid,"aria-activedescendant":this.focusedIndex!==void 0&&this.focusedIndex>=0?`${this.guid}-${this.focusedIndex}`:void 0},{default:()=>[this.$props.text,c]}),h.call(this)])},methods:{element(){return this.mainButton},onKeyDown(e){if(e.altKey){!this.computedOpened&&e.keyCode===s.Keys.down?(this.dispatchPopupEvent(e,!0),this.focusedIndex=0,this.currentOpened=!0):this.computedOpened&&e.keyCode===s.Keys.up&&(this.dispatchPopupEvent(e,!1),this.focusedIndex=-1,this.currentOpened=!1);return}if(e.keyCode===s.Keys.enter||e.keyCode===s.Keys.space?(this.focusedIndex!==void 0&&this.focusedIndex>=0&&this.dispatchClickEvent(e,this.focusedIndex),e.preventDefault(),this.focusedIndex=this.computedOpened?-1:0,this.currentOpened=!this.computedOpened,this.dispatchPopupEvent(e,this.currentOpened)):this.computedOpened&&e.keyCode===s.Keys.esc&&(this.focusedIndex=-1,this.currentOpened=!1,this.dispatchPopupEvent(e,this.currentOpened)),this.computedOpened){const t=y(this.focusedIndex,e.keyCode,e.altKey,this.buttonsData.length);this.focusedIndex=t;const o=e.keyCode===s.Keys.up||e.keyCode===s.Keys.down||e.keyCode===s.Keys.left||e.keyCode===s.Keys.right;!e.altKey&&o&&e.preventDefault()}},onFocus(e){this.focused||(this.focused=!0,this.$emit("focus",e,this,void 0)),this.focusedIndex=this.computedOpened?0:-1,clearTimeout(this._blurTimeout)},onBlur(e){clearTimeout(this._blurTimeout),this.createBlurTimeout(e)},createBlurTimeout(e){const t=this;this._blurTimeout=setTimeout(()=>{s.canUseDOM&&document.activeElement!==t.$el&&(t.focused=!1,t.focusedIndex=-1,t.$emit("blur",e,t,void 0),t.computedOpened&&(t.currentOpened=!1,t.dispatchPopupEvent(e,!1)))},200)},onItemClick(e,t){this.focusedIndex=-1,this.currentOpened=!1,this.dispatchClickEvent(e,t),this.dispatchPopupEvent(e,!1)},onItemDown(e){document.activeElement===this.element()&&e.preventDefault()},mouseDown(e){e.preventDefault()},dispatchClickEvent(e,t){this.isItemDisabled(t)||this.$emit("itemclick",{event:e,item:this.buttonsData[t],itemIndex:t})},onClickMainButton(e){if(!this.buttonsData.length)return;const t=!this.computedOpened;this.currentOpened=t,this.focused=!0,this.focusedIndex=t?0:-1,this.dispatchPopupEvent(e,t)},dispatchPopupEvent(e,t){this.$emit(t?"open":"close",e,this,void 0)},isItemDisabled(e){return this.buttonsData[e]?this.buttonsData[e].disabled:this.$props.disabled},isRtl(){return this.$props.dir!==void 0?this.$props.dir==="rtl":!!this.$el&&getComputedStyle(this.$el).direction==="rtl"}}});exports.DropDownButton=C;