@progress/kendo-vue-buttons/ListButton/SplitButton.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"),c=require("../Button.js"),i=require("@progress/kendo-vue-common"),b=require("./ButtonItem.js"),y=require("./utils/navigation.js"),k=require("@progress/kendo-vue-popup"),p=require("./utils/popup.js"),$=require("@progress/kendo-svg-icons"),C=require("../package-metadata.js"),I=o.defineComponent({name:"KendoSplitButton",emits:{focus:e=>!0,blur:e=>!0,buttonclick:e=>!0,itemclick:e=>!0,open:e=>!0,close:e=>!0},props:{accessKey:String,ariaLabel:String,text:String,items:{type:Array,default:function(){return[]}},textField:String,tabIndex:Number,disabled:Boolean,icon:String,svgIcon:Object,size:{type:String,default:"medium"},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},iconClass:String,imageUrl:String,popupSettings:Object,itemRender:[String,Function,Object],item:[String,Function,Object],className:String,buttonClass:String,dir:String},data(){return{focused:!1,focusedIndex:-1,currentOpened:!1}},created(){this._blurTimeout=null,this._anchor=i.guid(),this.mainButton=null,this.guid=i.guid(),this.buttonsData=[],i.validatePackage(C.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())},computed:{computedOpened(){return this.$props.opened===void 0?this.currentOpened:this.$props.opened},wrapperClass(){return{"k-split-button":!0,"k-button-group":!0,"k-focus":this.focused}}},setup(){return{kendoAnchorRef:o.ref(null)}},render(){this.buttonsData=this.$props.items;const e=this.isRtl(),t=e?"rtl":void 0,{tabIndex:s,disabled:r}=this.$props,l=i.getDefaultSlots(this),h=function(){const{item:n,itemRender:u,textField:m}=this.$props;return this.buttonsData.length>0?this.buttonsData.map(function(d,a){const g=typeof d!="string"?{...d,render:i.templateRendering.call(this,d.render,i.getListeners.call(this))}:d;return o.createVNode(b.ButtonItem,{class:"k-menu-item",role:"menuitem",dataItem:g,textField:m,focused:this.focusedIndex===a,onClick:this.onItemClick,onDown:this.onItemDown,render:i.templateRendering.call(this,u,i.getListeners.call(this)),item:n,key:a,index:a,id:`${this.guid}-${a}`},null)},this):null},f=function(){const{popupSettings:n={},size:u}=this.$props;return o.createVNode(k.Popup,{anchor:this._anchor,show:this.computedOpened,animate:n.animate,popupClass:i.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:()=>[o.createVNode("ul",{class:`k-group k-menu-group k-reset k-menu-group-${i.kendoThemeMaps.sizeMap[u]||u}`,role:"menu",id:this.guid,"aria-labelledby":this._anchor},[h.call(this)])]})};return o.createVNode("div",{class:this.wrapperClass,onKeydown:this.onKeyDown,onFocusin:this.onFocus,onFocusout:this.onBlur,dir:t},[o.createVNode(c.Button,{size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,onClick:n=>this.onItemClick(n,-1),disabled:r||void 0,tabIndex:s,accessKey:this.$props.accessKey,class:this.$props.buttonClass,icon:this.$props.icon,svgIcon:this.$props.svgIcon,iconClass:this.$props.iconClass,imageUrl:this.$props.imageUrl,dir:t,id:this._anchor,ref:this._anchor,type:"button","aria-disabled":r,"aria-haspopup":"menu","aria-expanded":this.computedOpened,"aria-label":this.$props.ariaLabel||`${this.$props.text||""} splitbutton`,"aria-controls":this.guid,"aria-activedescendant":this.focusedIndex!==void 0&&this.focusedIndex>=0?`${this.guid}-${this.focusedIndex}`:void 0},{default:()=>[this.$props.text,l]}),o.createVNode(c.Button,{svgIcon:$.caretAltDownIcon,size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode,themeColor:this.$props.themeColor,icon:"caret-alt-down",disabled:r||void 0,tabIndex:-1,onClick:this.onSplitPartClick,onMousedown:this.onDownSplitPart,onPointerdown:this.onDownSplitPart,dir:t,"aria-label":"menu toggling button"},null),f.call(this)])},methods:{element(){return this.mainButton},onKeyDown(e){if(e.altKey){!this.computedOpened&&e.keyCode===i.Keys.down?(this.dispatchPopupEvent(e,!0),this.focusedIndex=0,this.currentOpened=!0):this.computedOpened&&e.keyCode===i.Keys.up&&(this.dispatchPopupEvent(e,!1),this.focusedIndex=-1,this.currentOpened=!1);return}let t;if(e.keyCode===i.Keys.enter||e.keyCode===i.Keys.space?(e.preventDefault(),this.dispatchClickEvent(e,this.focusedIndex),this.focusedIndex!==void 0&&this.focusedIndex>=0&&(t={focusedIndex:this.computedOpened?-1:0,currentOpened:!this.computedOpened},this.dispatchPopupEvent(e,t.currentOpened))):this.computedOpened&&e.keyCode===i.Keys.esc&&(t={focusedIndex:-1,currentOpened:!1},this.dispatchPopupEvent(e,t.currentOpened)),this.computedOpened){const s=y(this.focusedIndex,e.keyCode,e.altKey,this.buttonsData.length);s!==this.focusedIndex&&(t=t||{},t.focusedIndex=s);const r=e.keyCode===i.Keys.up||e.keyCode===i.Keys.down||e.keyCode===i.Keys.left||e.keyCode===i.Keys.right;!e.altKey&&r&&e.preventDefault()}t&&(this.focusedIndex=t.focusedIndex,this.focused=t.focused,t.currentOpened!==void 0&&(this.currentOpened=t.currentOpened))},onFocus(e){this.focused||(this.$emit("focus",{event:e}),this.focused=!0),this.focusedIndex=-1,clearTimeout(this._blurTimeout)},onItemClick(e,t){const s=this.computedOpened;s&&(this.focusedIndex=0,this.currentOpened=!1),this.dispatchClickEvent(e,t),s&&this.dispatchPopupEvent(e,!1)},onBlur(e){clearTimeout(this._blurTimeout),this.createBlurTimeout(e)},createBlurTimeout(e){const t=this;this._blurTimeout=setTimeout(()=>{i.canUseDOM&&document.activeElement!==t.mainButton&&(t.focused=!1,t.focusedIndex=-1,t.$emit("blur",{event:e}),t.computedOpened&&(t.currentOpened=!1,t.dispatchPopupEvent(e,!1)))},200)},dispatchClickEvent(e,t){this.isItemDisabled(t)||(t===-1?this.$emit("buttonclick",{event:e}):this.$emit("itemclick",{event:e,component:this,item:this.buttonsData[t],itemIndex:t}))},onSplitPartClick(e){if(this.buttonsData.length){const t=!this.computedOpened;this.dispatchPopupEvent(e,t),this.focusedIndex=t?0:-1,this.currentOpened=t,this.focused=!0}},onDownSplitPart(e){e.preventDefault(),this.element()&&document.activeElement!==this.element()&&this.element().focus()},onItemDown(e){document.activeElement===this.element()&&e.preventDefault()},dispatchPopupEvent(e,t){const s={event:e};this.$emit(t?"open":"close",s)},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.SplitButton=I;