accessibleprimevue/steps/steps.esm.min.js

Note: This is the forked version of the Primefaces/PrimeVue repository. Since V3 has reached its EOL this is use to fix identified accessibility bugs in the v3 version of primevue. PrimeVue is an open source UI library for Vue featuring a rich set of 80+

import{DomHandler as t}from"primevue/utils";import{mergeProps as e,openBlock as i,createElementBlock as n,createElementVNode as s,Fragment as a,renderList as o,toDisplayString as r,createBlock as l,resolveDynamicComponent as c,createCommentVNode as u}from"vue";import d from"primevue/basecomponent";import m from"primevue/steps/style";var p={name:"Steps",extends:{name:"BaseSteps",extends:d,props:{id:{type:String},model:{type:Array,default:null},readonly:{type:Boolean,default:!0},activeStep:{type:Number,default:0}},style:m,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,emits:["update:activeStep","step-change"],data:function(){return{d_activeStep:this.activeStep}},watch:{activeStep:function(t){this.d_activeStep=t}},mounted:function(){var t=this.findFirstItem();t&&(t.tabIndex="0")},methods:{getPTOptions:function(t,e,i){return this.ptm(t,{context:{item:e,index:i,active:this.isActive(i),disabled:this.isItemDisabled(e,i)}})},onItemClick:function(t,e,i){this.disabled(e)||this.readonly?t.preventDefault():(e.command&&e.command({originalEvent:t,item:e}),i!==this.d_activeStep&&(this.d_activeStep=i,this.$emit("update:activeStep",this.d_activeStep)),this.$emit("step-change",{originalEvent:t,index:i}))},onItemKeydown:function(t,e){switch(t.code){case"ArrowRight":this.navigateToNextItem(t.target),t.preventDefault();break;case"ArrowLeft":this.navigateToPrevItem(t.target),t.preventDefault();break;case"Home":this.navigateToFirstItem(t.target),t.preventDefault();break;case"End":this.navigateToLastItem(t.target),t.preventDefault();break;case"Tab":break;case"Enter":case"NumpadEnter":case"Space":this.onItemClick(t,e),t.preventDefault()}},navigateToNextItem:function(t){var e=this.findNextItem(t);e&&this.setFocusToMenuitem(t,e)},navigateToPrevItem:function(t){var e=this.findPrevItem(t);e&&this.setFocusToMenuitem(t,e)},navigateToFirstItem:function(t){var e=this.findFirstItem(t);e&&this.setFocusToMenuitem(t,e)},navigateToLastItem:function(t){var e=this.findLastItem(t);e&&this.setFocusToMenuitem(t,e)},findNextItem:function(t){var e=t.parentElement.nextElementSibling;return e?e.children[0]:null},findPrevItem:function(t){var e=t.parentElement.previousElementSibling;return e?e.children[0]:null},findFirstItem:function(){var e=t.findSingle(this.$refs.list,'[data-pc-section="menuitem"]');return e?e.children[0]:null},findLastItem:function(){var e=t.find(this.$refs.list,'[data-pc-section="menuitem"]');return e?e[e.length-1].children[0]:null},setFocusToMenuitem:function(t,e){t.tabIndex="-1",e.tabIndex="0",e.focus()},isActive:function(t){return t===this.d_activeStep},isItemDisabled:function(t,e){return this.disabled(t)||this.readonly&&!this.isActive(e)},visible:function(t){return"function"==typeof t.visible?t.visible():!1!==t.visible},disabled:function(t){return"function"==typeof t.disabled?t.disabled():t.disabled},label:function(t){return"function"==typeof t.label?t.label():t.label},getMenuItemProps:function(t,i){var n=this;return{action:e({class:this.cx("action"),onClick:function(e){return n.onItemClick(e,t)},onKeyDown:function(e){return n.onItemKeydown(e,t)}},this.getPTOptions("action",t,i)),step:e({class:this.cx("step")},this.getPTOptions("step",t,i)),label:e({class:this.cx("label")},this.getPTOptions("label",t,i))}}}},f=["id"],v=["aria-current","onClick","onKeydown","data-p-highlight","data-p-disabled"];p.render=function(t,d,m,p,h,b){return i(),n("nav",e({id:t.id,class:t.cx("root")},t.ptmi("root")),[s("ol",e({ref:"list",class:t.cx("menu")},t.ptm("menu")),[(i(!0),n(a,null,o(t.model,(function(o,d){return i(),n(a,{key:b.label(o)+"_"+d.toString()},[b.visible(o)?(i(),n("li",e({key:0,class:[t.cx("menuitem",{item:o,index:d}),o.class],style:o.style,"aria-current":b.isActive(d)?"step":void 0,onClick:function(t){return b.onItemClick(t,o,d)},onKeydown:function(t){return b.onItemKeydown(t,o,d)}},b.getPTOptions("menuitem",o,d),{"data-p-highlight":b.isActive(d),"data-p-disabled":b.isItemDisabled(o,d)}),[t.$slots.item?(i(),l(c(t.$slots.item),{key:1,item:o,index:d,active:d===h.d_activeStep,label:b.label(o),props:b.getMenuItemProps(o,d)},null,8,["item","index","active","label","props"])):(i(),n("span",e({key:0,class:t.cx("action")},b.getPTOptions("action",o,d)),[s("span",e({class:t.cx("step")},b.getPTOptions("step",o,d)),r(d+1),17),s("span",e({class:t.cx("label")},b.getPTOptions("label",o,d)),r(b.label(o)),17)],16))],16,v)):u("",!0)],64)})),128))],16)],16,f)};export{p as default};