@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"),u=require("./utils.js"),x=require("@progress/kendo-vue-popup"),O=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:null,mousedown:null,mouseup:null,open:null,close:null,itemclick:null,focus:null,blur:null,keydown:null},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&&u.position(this.$el,this.$props.align,this.$props.alignOffset,this.isRtl)},updated(){u.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:d,rounded:r}=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[r]||r}`]:r,[`k-fab-${d}`]:d,[`k-fab-${d}-${o}`]:d&&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",e,void 0)},handleBlur(e){this.currentFocused=!1,this.currentOpened=!1,this.focusedIndex=-1,this.$emit("blur",e,void 0),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:d,id:r,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(l,h){return i.createVNode(I.FloatingActionButtonItem,{key:h,index:h,id:`${this.listId}-${h}`,disabled:t||l.disabled,focused:this.focusedIndex===h,dataItem:l,item:k,class:s.classNames(l.className,u.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:l=>{this.kendoAnchorRef=l},id:r||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):d?i.createVNode(s.Icon,{class:d},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||u.getAnchorAlign(e,this.isRtl),popupAlign:p.popupAlign||u.getPopupAlign(e,this.isRtl),style:{boxShadow:"none"}},{default:()=>[i.createVNode("ul",{ref:s.setRef(this,"list"),role:"menu","aria-labelledby":r,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=O;