primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 6.1 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 o=s(t),a=n.useStyle("\n.p-steps {\n position: relative;\n}\n\n.p-steps .p-steps-list {\n padding: 0;\n margin: 0;\n list-style-type: none;\n display: flex;\n}\n\n.p-steps-item {\n position: relative;\n display: flex;\n justify-content: center;\n flex: 1 1 auto;\n overflow: hidden;\n}\n\n.p-steps-item .p-menuitem-link {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n text-decoration: none;\n}\n\n.p-steps.p-steps-readonly .p-steps-item {\n cursor: auto;\n}\n\n.p-steps-item.p-steps-current .p-menuitem-link {\n cursor: default;\n}\n\n.p-steps-title {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n}\n\n.p-steps-number {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.p-steps-title {\n display: block;\n}\n",{name:"steps",manual:!0}),r={name:"Steps",extends:{name:"BaseSteps",extends:o.default,props:{id:{type:String},model:{type:Array,default:null},readonly:{type:Boolean,default:!0},exact:{type:Boolean,default:!0}},css:{classes:{root:function(e){return["p-steps p-component",{"p-readonly":e.props.readonly}]},menu:"p-steps-list",menuitem:function(e){var t=e.instance,n=e.item;return["p-steps-item",{"p-highlight p-steps-current":t.isActive(n),"p-disabled":t.isItemDisabled(n)}]},action:function(e){return["p-menuitem-link",{"router-link-active":e.isActive,"router-link-active-exact":e.props.exact&&e.isExactActive}]},step:"p-steps-number",label:"p-steps-title"},loadStyle:a.load},provide:function(){return{$parentInstance:this}}},mounted:function(){this.findFirstItem().tabIndex="0"},methods:{getPTOptions:function(e,t,n){return this.ptm(e,{context:{item:t,index:n,active:this.isActive(t),disabled:this.isItemDisabled(t)}})},onItemClick:function(e,t,n){this.disabled(t)||this.readonly?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.to&&n&&n(e))},onItemKeydown:function(e,t,n){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"Space":this.onItemClick(e,t,n),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.to&&this.$router.resolve(e.to).path===this.$route.path},isItemDisabled:function(e){return this.disabled(e)||this.readonly&&!this.isActive(e)},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}}},l=["id"],c=["data-p-highlight","data-p-disabled"],p=["href","aria-current","onClick","onKeydown"],m=["onKeydown"];return r.render=function(e,t,n,s,o,a){var r=i.resolveComponent("router-link");return i.openBlock(),i.createElementBlock("nav",i.mergeProps({id:e.id,class:e.cx("root")},e.ptm("root"),{"data-pc-name":"steps"}),[i.createElementVNode("ol",i.mergeProps({ref:"list",class:e.cx("menu")},e.ptm("menu")),[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(e.model,(function(t,n){return i.openBlock(),i.createElementBlock(i.Fragment,{key:t.to},[a.visible(t)?(i.openBlock(),i.createElementBlock("li",i.mergeProps({key:0,class:[e.cx("menuitem",{item:t}),t.class],style:t.style},a.getPTOptions("menuitem",t,n),{"data-p-highlight":a.isActive(t),"data-p-disabled":a.isItemDisabled(t)}),[e.$slots.item?(i.openBlock(),i.createBlock(i.resolveDynamicComponent(e.$slots.item),{key:1,item:t},null,8,["item"])):(i.openBlock(),i.createElementBlock(i.Fragment,{key:0},[a.isItemDisabled(t)?(i.openBlock(),i.createElementBlock("span",i.mergeProps({key:1,class:e.cx("action"),onKeydown:function(e){return a.onItemKeydown(e,t)}},a.getPTOptions("action",t,n)),[i.createElementVNode("span",i.mergeProps({class:e.cx("step")},a.getPTOptions("step",t,n)),i.toDisplayString(n+1),17),i.createElementVNode("span",i.mergeProps({class:e.cx("label")},a.getPTOptions("label",t,n)),i.toDisplayString(a.label(t)),17)],16,m)):(i.openBlock(),i.createBlock(r,{key:0,to:t.to,custom:""},{default:i.withCtx((function(s){var o=s.navigate,r=s.isExactActive;return[i.createElementVNode("a",i.mergeProps({href:s.href,class:e.cx("action",{isActive:s.isActive,isExactActive:r}),tabindex:-1,"aria-current":r?"step":void 0,onClick:function(e){return a.onItemClick(e,t,o)},onKeydown:function(e){return a.onItemKeydown(e,t,o)}},a.getPTOptions("action",t,n)),[i.createElementVNode("span",i.mergeProps({class:e.cx("step")},a.getPTOptions("step",t,n)),i.toDisplayString(n+1),17),i.createElementVNode("span",i.mergeProps({class:e.cx("label")},a.getPTOptions("label",t,n)),i.toDisplayString(a.label(t)),17)],16,p)]})),_:2},1032,["to"]))],64))],16,c)):i.createCommentVNode("",!0)],64)})),128))],16)],16,l)},r}(primevue.utils,primevue.basecomponent,primevue.usestyle,Vue);