@progress/kendo-vue-buttons/FloatingActionButton/FloatingActionButton.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"),s=require("@progress/kendo-vue-common"),I=require("./FloatingActionButtonItem.js"),y=require("../package-metadata.js"),l=require("./utils.js"),x=require("@progress/kendo-vue-popup"),v=i.defineComponent({name:"KendoVueFloatingActionButton",props:{id:String,dir:String,tabIndex:Number,accessKey:String,disabled:{type:Boolean,default:!1},icon:String,svgIcon:Object,iconClass:String,items:[Object,Array],item:[String,Function,Object],text:String,alignOffset:Object,opened:{type:Boolean,default:void 0},align:{type:Object,default:function(){return{vertical:"bottom",horizontal:"end"}}},positionMode:{type:String,default:function(){return"fixed"}},popupSettings:{type:Object,default:function(){return{}}},shape:{type:String,default:function(){return"rectangle"}},rounded:{type:String,default:"full"},fillMode:{type:String,default:"solid",validator:function(e){return[null,"flat","link","outline","solid"].includes(e)}},size:{type:String,default:function(){return"medium"}},themeColor:{type:String,default:function(){return"primary"}}},emits:{click:e=>!0,mousedown:e=>!0,mouseup:e=>!0,open:e=>!0,close:e=>!0,itemclick:e=>!0,focus:e=>!0,blur:e=>!0,keydown:e=>!0},data(){return{currentOpened:!1,currentFocused:!1,focusedIndex:-1,currentDir:"ltr",isRtl:!1}},created(){s.validatePackage(y.packageMetadata),this.element=void 0,this._anchor=s.guid(),this.listId=s.guid(),this.buttonId=s.guid()},mounted(){this.element=this.kendoAnchorRef,this.list=s.getRef(this,"list"),this.popup=s.getRef(this,"popup"),this.currentDir=this.$props.dir!==void 0?this.$props.dir:this.$el&&getComputedStyle(this.$el).direction==="rtl"||!1,this.isRtl=this.currentDir==="rtl",this.opened!==void 0&&l.position(this.$el,this.$props.align,this.$props.alignOffset,this.isRtl)},updated(){l.position(this.$el,this.$props.align,this.$props.alignOffset,this.isRtl),this.currentFocused&&this.element&&this.element.focus()},computed:{buttonClassNames(){const{size:e,icon:t,shape:n,themeColor:o,fillMode:r,rounded:d}=this.$props;return{"k-fab":!0,[`k-fab-${n||"rectangle"}`]:n!==null,[`k-fab-${s.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-rounded-${s.kendoThemeMaps.roundedMap[d]||d}`]:d,[`k-fab-${r}`]:r,[`k-fab-${r}-${o}`]:r&&o,"k-disabled":this.$props.disabled,"k-focus":this.currentFocused,[`k-${this.$props.align.vertical}-${this.$props.align.horizontal}`]:!0}},computedOpened(){return this.$props.opened===void 0?this.currentOpened:this.$props.opened},rootClassNames(){return s.classNames({"k-pos-absolute":this.$props.positionMode==="absolute","k-pos-fixed":this.$props.positionMode==="fixed"})}},methods:{dispatchPopupEvent(e,t){this.$props.items&&this.$emit(t?"open":"close",{event:e,isOpened:!t})},handleClick(e){if(!(!e.target||this.$props.disabled))if(!this.$props.items)this.$emit("click",e,void 0);else{const t=!this.computedOpened;this.currentOpened=t,this.currentFocused=!0,this.focusedIndex=t?0:-1,this.dispatchPopupEvent(e,!this.computedOpened)}},handleFocus(e){this.currentFocused=!0,this.focusedIndex=this.computedOpened?0:-1,this.$emit("focus",{event:e})},handleBlur(e){this.currentFocused=!1,this.currentOpened=!1,this.focusedIndex=-1,this.$emit("blur",{event:e}),this.computedOpened&&this.dispatchPopupEvent(e,!1)},handleMouseDown(e){e.preventDefault(),this.$emit("mousedown",e)},handleMouseUp(e){this.$emit("mouseup",e)},dispatchItemClickEvent(e,t){this.$props.items&&(this.$props.items[t].disabled||this.$emit("itemclick",e,{itemProps:this.$props.items[t],itemIndex:t}))},handleItemClick(e,t){!e.target||!this.$props.items||(this.focusedIndex=t,this.currentOpened=!1,this.dispatchItemClickEvent(e,t),this.dispatchPopupEvent(e,!1))},handleItemDown(e){s.canUseDOM&&document.activeElement===this.element&&e.preventDefault()},handleKeyDown(e){const t=this.focusedIndex,n=this.$props.items?this.$props.items.length-1:-1,o=this.$props.align.vertical==="bottom";switch(e.keyCode){case s.Keys.enter:case s.Keys.space:t>=0&&this.dispatchItemClickEvent(e,t),e.preventDefault(),this.currentOpened=!this.currentOpened,this.focusedIndex=this.currentOpened?-1:0;break;case s.Keys.esc:e.preventDefault(),this.currentOpened=!1,this.focusedIndex=-1;break;case s.Keys.home:e.preventDefault(),this.focusedIndex=0;break;case s.Keys.end:e.preventDefault(),this.focusedIndex=n;break;case s.Keys.down:case s.Keys.right:e.preventDefault(),t<n&&!o&&(this.focusedIndex=t+1),t>0&&o&&(this.focusedIndex=t-1);break;case s.Keys.up:case s.Keys.left:e.preventDefault(),t>0&&!o&&(this.focusedIndex=t-1),t<n&&o&&(this.focusedIndex=t+1);break}this.$emit("keydown",e,void 0)}},setup(){const e=i.ref(null),t=i.ref(null);return{chipRef:e,kendoAnchorRef:t}},render(){const{align:e,disabled:t,icon:n,svgIcon:o,iconClass:r,id:d,items:a,text:c,tabIndex:g,accessKey:b,popupSettings:p}=this.$props,k=s.templateRendering.call(this,this.$props.item,s.getListeners.call(this)),$=function(){return a&&a.map(function(u,h){return i.createVNode(I.FloatingActionButtonItem,{key:h,index:h,id:`${this.listId}-${h}`,disabled:t||u.disabled,focused:this.focusedIndex===h,dataItem:u,item:k,class:s.classNames(u.className,l.getTextDirectionClass(this.currentDir||"ltr",e.horizontal)),onClick:this.handleItemClick,onDown:this.handleItemDown},null)},this)},f=n&&!c,m=(this.element?this.element.offsetWidth:0)/2-32/2;return i.createVNode("div",{class:this.rootClassNames},[i.createVNode("button",{ref:u=>{this.kendoAnchorRef=u},id:d||this.buttonId,role:a?"menubutton":"button",type:"button","aria-disabled":t,"aria-expanded":a?this.computedOpened:void 0,"aria-haspopup":!!a,"aria-label":`${c||""} floatingactionbutton`,"aria-owns":a?this.listId:void 0,"aria-activedescendant":this.focusedIndex>=0&&a?`${this.listId}-${this.focusedIndex}`:void 0,tabindex:s.getTabIndex(g,t),accesskey:b,dir:this.currentDir,disabled:t,class:this.buttonClassNames,onClick:this.handleClick,onMousedown:this.handleMouseDown,onMouseup:this.handleMouseUp,onFocusin:this.handleFocus,onBlur:this.handleBlur,onKeydown:this.handleKeyDown},[n||o?i.createVNode(s.Icon,{name:n,icon:o,class:"k-fab-icon"},null):r?i.createVNode(s.Icon,{class:r},null):null,c&&i.createVNode("span",{class:"k-fab-text"},[c])]),i.createVNode(x.Popup,{ref:s.setRef(this,"popup"),show:this.computedOpened,anchor:this._anchor,animate:p.animate,popupClass:s.classNames("k-popup-transparent k-fab-popup",p.popupClass),anchorAlign:p.anchorAlign||l.getAnchorAlign(e,this.isRtl),popupAlign:p.popupAlign||l.getPopupAlign(e,this.isRtl),style:{boxShadow:"none"}},{default:()=>[i.createVNode("ul",{ref:s.setRef(this,"list"),role:"menu","aria-labelledby":d,id:this.listId,class:s.classNames("k-fab-items",{"k-fab-items-bottom":e.vertical!=="bottom","k-fab-items-top":e.vertical==="bottom"}),style:{paddingLeft:f?m+"px":void 0,paddingRight:f?m+"px":void 0}},[$.call(this)])]})])}});exports.FloatingActionButton=v;