primevue
Version:
PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc
2 lines (1 loc) • 4.71 kB
JavaScript
this.primevue=this.primevue||{},this.primevue.steps=function(e,t,n,i){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a={name:"Steps",extends:{name:"BaseSteps",extends:s(n).default,props:{id:{type:String},model:{type:Array,default:null},readonly:{type:Boolean,default:!0},activeStep:{type:Number,default:0}},style:s(i).default,provide:function(){return{$parentInstance:this}}},emits:["update:activeStep","step-change"],data:function(){return{d_activeStep:this.activeStep}},watch:{activeStep:function(e){this.d_activeStep=e}},mounted:function(){this.findFirstItem().tabIndex="0"},methods:{getPTOptions:function(e,t,n){return this.ptm(e,{context:{item:t,index:n,active:this.isActive(n),disabled:this.isItemDisabled(t,n)}})},onItemClick:function(e,t,n){this.disabled(t)||this.readonly?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),n!==this.d_activeStep&&(this.d_activeStep=n,this.$emit("update:activeStep",this.d_activeStep)),this.$emit("step-change",{originalEvent:e,index:n}))},onItemKeydown:function(e,t){switch(e.code){case"ArrowRight":this.navigateToNextItem(e.target),e.preventDefault();break;case"ArrowLeft":this.navigateToPrevItem(e.target),e.preventDefault();break;case"Home":this.navigateToFirstItem(e.target),e.preventDefault();break;case"End":this.navigateToLastItem(e.target),e.preventDefault();break;case"Tab":break;case"Enter":case"NumpadEnter":case"Space":this.onItemClick(e,t),e.preventDefault()}},navigateToNextItem:function(e){var t=this.findNextItem(e);t&&this.setFocusToMenuitem(e,t)},navigateToPrevItem:function(e){var t=this.findPrevItem(e);t&&this.setFocusToMenuitem(e,t)},navigateToFirstItem:function(e){var t=this.findFirstItem(e);t&&this.setFocusToMenuitem(e,t)},navigateToLastItem:function(e){var t=this.findLastItem(e);t&&this.setFocusToMenuitem(e,t)},findNextItem:function(e){var t=e.parentElement.nextElementSibling;return t?t.children[0]:null},findPrevItem:function(e){var t=e.parentElement.previousElementSibling;return t?t.children[0]:null},findFirstItem:function(){var t=e.DomHandler.findSingle(this.$refs.list,'[data-pc-section="menuitem"]');return t?t.children[0]:null},findLastItem:function(){var t=e.DomHandler.find(this.$refs.list,'[data-pc-section="menuitem"]');return t?t[t.length-1].children[0]:null},setFocusToMenuitem:function(e,t){e.tabIndex="-1",t.tabIndex="0",t.focus()},isActive:function(e){return e===this.d_activeStep},isItemDisabled:function(e,t){return this.disabled(e)||this.readonly&&!this.isActive(t)},visible:function(e){return"function"==typeof e.visible?e.visible():!1!==e.visible},disabled:function(e){return"function"==typeof e.disabled?e.disabled():e.disabled},label:function(e){return"function"==typeof e.label?e.label():e.label},getMenuItemProps:function(e,n){var i=this;return{action:t.mergeProps({class:this.cx("action"),onClick:function(t){return i.onItemClick(t,e)},onKeyDown:function(t){return i.onItemKeydown(t,e)}},this.getPTOptions("action",e,n)),step:t.mergeProps({class:this.cx("step")},this.getPTOptions("step",e,n)),label:t.mergeProps({class:this.cx("label")},this.getPTOptions("label",e,n))}}}},o=["id"],r=["onClick","onKeydown","data-p-highlight","data-p-disabled"];return a.render=function(e,n,i,s,a,l){return t.openBlock(),t.createElementBlock("nav",t.mergeProps({id:e.id,class:e.cx("root")},e.ptm("root"),{"data-pc-name":"steps"}),[t.createElementVNode("ol",t.mergeProps({ref:"list",class:e.cx("menu")},e.ptm("menu")),[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.model,(function(n,i){return t.openBlock(),t.createElementBlock(t.Fragment,{key:l.label(n)+"_"+i.toString()},[l.visible(n)?(t.openBlock(),t.createElementBlock("li",t.mergeProps({key:0,class:[e.cx("menuitem",{item:n,index:i}),n.class],style:n.style,onClick:function(e){return l.onItemClick(e,n,i)},onKeydown:function(e){return l.onItemKeydown(e,n,i)}},l.getPTOptions("menuitem",n,i),{"data-p-highlight":l.isActive(i),"data-p-disabled":l.isItemDisabled(n,i)}),[e.$slots.item?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.$slots.item),{key:1,item:n,index:i,active:i===a.d_activeStep,label:l.label(n),props:l.getMenuItemProps(n,i)},null,8,["item","index","active","label","props"])):(t.openBlock(),t.createElementBlock("span",t.mergeProps({key:0,class:e.cx("action")},l.getPTOptions("action",n,i)),[t.createElementVNode("span",t.mergeProps({class:e.cx("step")},l.getPTOptions("step",n,i)),t.toDisplayString(i+1),17),t.createElementVNode("span",t.mergeProps({class:e.cx("label")},l.getPTOptions("label",n,i)),t.toDisplayString(l.label(n)),17)],16))],16,r)):t.createCommentVNode("",!0)],64)})),128))],16)],16,o)},a}(primevue.utils,Vue,primevue.basecomponent,primevue.steps.style);