@progress/kendo-vue-layout/stepper/Stepper.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 d=require("vue"),i=require("@progress/kendo-vue-common"),I=require("./Step.js"),b=require("@progress/kendo-vue-progressbars"),h=require("./contants.js"),S=require("../package-metadata.js"),c=require("./messages/main.js"),V=require("@progress/kendo-vue-intl"),y=d.defineComponent({name:"KendoStepper",model:{event:"changemodel"},inject:{kendoLocalizationService:{default:null}},props:{animationDuration:{type:[Boolean,Number],default:400},dir:String,disabled:Boolean,item:{type:[String,Object,Function,Boolean],default:void 0},items:Array,linear:Boolean,mode:{type:String,default:"steps",validator:function(e){return["steps","labels"].includes(e)}},orientation:{type:String,default:"horizontal",validator:function(e){return["horizontal","vertical"].includes(e)}},value:{type:Number,default:0},progressTotal:{type:Number},progress:{type:Number},modelValue:Number,successIcon:String,errorIcon:String},created(){i.validatePackage(S.packageMetadata),this.focusedIdx=this.computedValue!==void 0?this.computedValue:0},mounted(){this.currentDir=this.$props.dir!==void 0?this.$props.dir:i.isRtl(this.$el)?"rtl":"ltr"},data(){return{currentDir:"ltr",focusedIdx:0,stepper:{},currentFocused:!1}},watch:{value(e){this.focusedIdx=e}},computed:{computedValue(){return this.$props.modelValue!==void 0?this.$props.modelValue:this.$props.value},isVertical(){return this.$props.orientation==="vertical"},numOfSteps(){const{items:e}=this.$props;return e?e.length:0},stepperClasses(){return{"k-stepper":!0,"k-stepper-linear":this.$props.linear}},stepperStyles(){return{display:"grid",gridTemplateColumns:this.isVertical?void 0:"repeat("+this.numOfSteps*2+", 1fr)",gridTemplateRows:this.isVertical?"repeat("+this.numOfSteps*4+", 1fr)":void 0}},listClasses(){return{"k-step-list":!0,"k-step-list-horizontal":!this.isVertical,"k-step-list-vertical":this.isVertical}},listStyles(){return{gridColumnStart:this.isVertical?"":1,gridColumnEnd:this.isVertical?"":-1,gridRowStart:this.isVertical?1:"",gridRowEnd:this.isVertical?-1:""}},progressbarStyles(){return{gridColumnStart:this.isVertical?"":2,gridColumnEnd:this.isVertical?"":this.numOfSteps*2,gridRowStart:this.isVertical?2:"",gridRowEnd:this.isVertical?this.numOfSteps*4-2:""}}},render(){const e=i.getDefaultSlots(this),{animationDuration:t,disabled:s,items:a,orientation:l}=this.$props,n=this.computedValue,p=typeof t=="number"?t:t!==!1?h.DEFAULT_ANIMATION_DURATION:h.NO_ANIMATION,f=V.provideLocalizationService(this).toLanguageString(c.ariaLabel,c.messages[c.ariaLabel]),u=a&&a.map(function(r,o){const m=this.$props.item?i.templateRendering.call(this,this.$props.item,i.getListeners.call(this)):void 0,g=d.createVNode(I.Step,{key:o,index:o,disabled:s||r.disabled,focused:o===this.focusedIdx&&this.currentFocused,current:o===n,onChange:this.handleChange,onFocus:this.handleFocus,class:r.class,style:r.style,icon:r.icon,label:r.label,optional:r.optional,text:r.text,isValid:r.isValid,tabIndex:r.tabIndex,animationDuration:this.animationDuration,isVertical:this.isVertical,item:this.item,linear:this.linear,mode:this.mode,numOfSteps:this.numOfSteps,value:n,successIcon:this.successIcon,errorIcon:this.errorIcon,svgIcon:r.svgIcon,successSvgIcon:r.successSvgIcon,errorSvgIcon:r.errorSvgIcon},null);return i.getTemplate.call(this,{h:d.h,template:m,defaultRendering:g,additionalProps:{...r,disabled:s||r.disabled,focused:o===this.focusedIdx,current:o===n,value:n},additionalListeners:{change:this.handleChange,focus:this.handleFocus}})},this);return d.createVNode("nav",{tabindex:this.currentFocused?-1:0,class:this.stepperClasses,style:this.stepperStyles,dir:this.currentDir,onFocusin:this.handleFocusin,onFocusout:this.handleFocusout,onKeydown:this.handleKeyDown},[d.createVNode("ol",{class:this.listClasses,style:this.listStyles},[u||e]),d.createVNode(b.ProgressBar,{style:this.progressbarStyles,animation:{duration:p},"aria-hidden":!0,"aria-label":f,max:this.progressTotal||this.numOfSteps-1,labelVisible:!1,orientation:l,reverse:l==="vertical",value:this.progress||n,disabled:s,tabIndex:-1},null)])},methods:{focus(){this.$el&&i.focusFirstFocusableChild(this.$el)},dispatchChangeEvent(e,t){const s=t===this.computedValue-1,a=t===this.computedValue,l=t===this.computedValue+1,n=!this.linear||s||a||l;this.computedValue!==t&&!this.disabled&&n&&(this.focusedIdx=t,this.$emit("changemodel",t),this.$emit("update:modelValue",t),this.$emit("change",{component:this,event:e,value:t}))},handleChange(e){let t=e.value;this.dispatchChangeEvent(e,t)},handleFocus(e){this.disabled||this.$emit("focus",e,void 0)},handleEnter(e){const t={component:this,event:e,value:this.focusedIdx};this.dispatchChangeEvent(t,this.focusedIdx)},handleFocusin(){this.currentFocused=!0},handleFocusout(){this.currentFocused=!1},handleKeyDown(e){const t=this.currentDir==="rtl",s=this.focusedIdx,a=this.items.length-1;switch(e.keyCode){case i.Keys.left:e.preventDefault(),!t&&s>0&&(this.focusedIdx=s-1),t&&s<a&&(this.focusedIdx=s+1);break;case i.Keys.right:e.preventDefault(),!t&&s<a&&(this.focusedIdx=s+1),t&&s>0&&(this.focusedIdx=s-1);break;case i.Keys.up:e.preventDefault(),!t&&s>0&&(this.focusedIdx=s-1),t&&s>0&&(this.focusedIdx=s-1);break;case i.Keys.down:e.preventDefault(),!t&&s<a&&(this.focusedIdx=s+1),t&&s<a&&(this.focusedIdx=s+1);break;case i.Keys.home:e.preventDefault(),this.focusedIdx=0;break;case i.Keys.end:e.preventDefault(),this.focusedIdx=a;break;case i.Keys.space:case i.Keys.enter:e.preventDefault(),this.items[s].disabled||this.handleEnter(e);break}}}});exports.Stepper=y;