@progress/kendo-vue-layout/actionsheet/ActionSheet.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 t=require("vue"),A=require("@progress/kendo-vue-animation"),n=require("@progress/kendo-vue-common"),E=require("../package-metadata.js"),N=require("./ActionSheetItem.js"),V=require("./ActionSheetHeader.js"),x=require("./ActionSheetFooter.js"),O=require("./ActionSheetContent.js");function m(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const T=300,w=t.defineComponent({name:"KendoActionSheet",props:{expand:Boolean,animation:{type:Boolean,default:!0},animationDuration:{type:Number,default:T},animationStyles:Object,tabIndex:Number,items:Array,subTitle:String,title:String,className:String,headerClassName:{type:String,default:void 0},contentClassName:{type:String,default:void 0},headerStyle:{type:String,default:void 0},footerClassName:{type:String,default:void 0},header:[String,Object,Function],content:[String,Object,Function],footer:[String,Object,Function],item:[String,Object,Function],navigatable:{type:Boolean,default:!0},navigatableElements:{type:Array,default:function(){return[]}},actions:Object,onClose:Function},created(){this.bottomPosition={bottom:"0px",width:"100%"},this.guidId=n.guid(),n.validatePackage(E.packageMetadata)},mounted(){this.element=n.getRef(this,"actionSheet"),this.$props.expand&&!this.show&&(this.show=!0)},updated(){if(this.element=n.getRef(this,"actionSheet"),this.$props.expand&&!this.show&&(this.show=!0),this.element&&!this.$props.className&&(this.element.style.setProperty("--kendo-actionsheet-height","auto"),this.element.style.setProperty("--kendo-actionsheet-max-height","none")),this.element&&this.$props.navigatable){const e=this.$props.navigatableElements,s=[".k-actionsheet-item",".k-actionsheet-actions",...[".k-actionsheet-footer",".k-actionsheet-content",".k-actionsheet-titlebar"].map(r=>n.FOCUSABLE_ELEMENTS.concat(e).map(l=>`${r} ${l}`)).flat()];this.navigation=new n.Navigation({tabIndex:this.$props.tabIndex||0,root:this.element,rovingTabIndex:!1,selectors:s,keyboardEvents:{keydown:{Tab:this.onTab,Enter:this.onEnter,Escape:this.onEscape}}}),e.length!==0?this.navigation.focusElement(this.element.querySelector(e[0]),null):this.navigation.focusElement(this.navigation.first,null)}},data(){return{show:!1,slide:!1}},computed:{topGroupItems(){var e;return(e=this.items)==null?void 0:e.filter(o=>!o.group||o.group==="top")},bottomGroupItems(){var e;return(e=this.items)==null?void 0:e.filter(o=>o.group==="bottom")},shouldRenderSeparator(){return this.topGroupItems&&this.topGroupItems.length>0&&this.bottomGroupItems&&this.bottomGroupItems.length>0}},render(){const{title:e,subTitle:o,animationStyles:s,animation:r,expand:l,tabIndex:a,className:f,animationDuration:g,headerClassName:k,contentClassName:y,footerClassName:v,actions:b}=this.$props,I=n.templateRendering.call(this,this.$props.header,n.getListeners.call(this)),d=n.getTemplate.call(this,{h:t.h,template:I,defaultRendering:null}),C=n.templateRendering.call(this,this.$props.content,n.getListeners.call(this)),p=n.getTemplate.call(this,{h:t.h,template:C,defaultRendering:null}),$=n.templateRendering.call(this,this.$props.footer,n.getListeners.call(this)),u=n.getTemplate.call(this,{h:t.h,template:$,defaultRendering:null}),S=t.createVNode("div",{class:n.classNames("k-actionsheet",f,{"k-actionsheet-bottom":!f}),role:"dialog","aria-modal":"true","aria-hidden":!1,"aria-labelledby":this.guidId,ref:n.setRef(this,"actionSheet"),onKeydown:this.handleKeyDown},[this.$props.header&&!e&&!o&&t.createVNode(V.ActionSheetHeader,{headerClassName:k},m(d)?d:{default:()=>[d]}),(e||o)&&t.createVNode("div",{class:"k-actionsheet-titlebar k-text-center"},[t.createVNode("div",{class:"k-actionsheet-titlebar-group k-hbox"},[t.createVNode("div",{class:"k-actionsheet-title",id:this.guidId},[e&&t.createVNode("div",null,[e]),o&&t.createVNode("div",{class:"k-actionsheet-subtitle"},[o])]),b&&t.createVNode("div",{class:"k-actionsheet-actions"},[b])])]),this.$props.content?t.createVNode(O.ActionSheetContent,{contentClassName:y},m(p)?p:{default:()=>[p]}):t.createVNode("div",{class:"k-actionsheet-content"},[t.createVNode("div",{class:"k-list-ul",role:"group"},[this.topGroupItems&&this.topGroupItems.map(function(i,c){const h=n.templateRendering.call(this,this.$props.item||i.content,n.getListeners.call(this));return t.createVNode(N.ActionSheetItem,{style:i.style,class:i.class,title:i.title,description:i.description,disabled:i.disabled,id:c,key:c,item:i,icon:i.icon,svgIcon:i.svgIcon,iconSize:i.iconSize,iconColor:i.iconColor,tabIndex:a||0,content:h,onClick:this.handleItemClick},null)},this)]),this.shouldRenderSeparator&&t.createVNode("hr",{class:"k-hr"},null),t.createVNode("div",{class:"k-list-ul",role:"group"},[this.bottomGroupItems&&this.bottomGroupItems.map(function(i,c){var h;return t.createVNode(N.ActionSheetItem,{style:i.style,class:i.class,id:c+(((h=this.topGroupItems)==null?void 0:h.length)||0),key:c,item:i,title:i.title,description:i.description,disabled:i.disabled,icon:i.icon,svgIcon:i.svgIcon,iconSize:i.iconSize,iconColor:i.iconColor,tabIndex:a||0,onClick:this.handleItemClick},null)},this)])]),this.$props.footer&&t.createVNode(x.ActionSheetFooter,{footerClassName:v},m(u)?u:{default:()=>[u]})]);return this.show&&t.createVNode("div",{class:"k-actionsheet-container"},[t.createVNode("div",{class:"k-overlay",onClick:this.handleOverlayClick},null),r?t.createVNode(A.Slide,{onExited:this.hideActionSheet,direction:"up",componentChildStyle:s||this.bottomPosition,transitionEnterDuration:g,transitionExitDuration:g,appear:l},{default:()=>[l?S:null]}):S])},methods:{handleKeyDown(e){this.$props.navigatable&&this.navigation.triggerKeyboardEvent(e)},onTab(e,o,s){s.preventDefault(),s.shiftKey?o.focusPrevious(e):o.focusNext(e)},handleOverlayClick(e){this.$emit("close",e),this.$props.animation||this.hideActionSheet()},handleItemClick(e){this.$emit("itemselect",e),this.$props.animation||this.hideActionSheet()},onEnter(e,o,s){if(e.ariaDisabled)return;const r=e.className&&e.className.indexOf("k-actionsheet-item")!==-1,l=o.elements.filter(a=>a.className.indexOf("k-actionsheet-item")!==-1);if(r){s.preventDefault();const a=this.$props.items[l.indexOf(e)];this.$emit("itemselect",{syntheticEvent:s,item:a,title:a&&a.title})}this.$props.animation||this.hideActionSheet()},onEscape(e,o,s){s.preventDefault(),this.$emit("close",s),this.$props.animation||this.hideActionSheet()},hideActionSheet(){this.show=!1}}});exports.ActionSheet=w;