vue3-form-wizard/dist/vue3-form-wizard.umd.js

vue3-form-wizard is a vue based component with no external depenendcies which simplifies tab wizard management.

/*
 * vue3-form-wizard
 * Creator:parsa jiravand
 * vue3-form-wizard is a vue based component with no external depenendcies which simplifies tab wizard management.
 * v0.3.4
 * MIT License
 */

(function(b,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(b=typeof globalThis<"u"?globalThis:b||self,e(b.Vue3FormWizard={},b.Vue))})(this,(function(b,e){"use strict";const Z={class:"wizard-btn",tabindex:"-1",type:"button"},_={},z=e.defineComponent({..._,setup(a){return(c,d)=>(e.openBlock(),e.createElementBlock("button",Z,[e.renderSlot(c.$slots,"default")]))}}),ee=["tabindex","id","aria-controls","aria-disabled","aria-selected"],te=["innerHTML"],ae=["innerHTML"],oe={},V=e.defineComponent({...oe,props:{tab:null,transition:{default:""},index:{default:0},disableBackOnClickStep:{type:Boolean,default:!1}},setup(a){const c=a,d=e.computed(()=>({backgroundColor:c.tab.color})),i=e.computed(()=>c.tab.active?{}:{color:c.tab.color}),m=e.computed(()=>({borderColor:c.tab.color})),n=e.computed(()=>({borderColor:c.tab.errorColor,backgroundColor:c.tab.errorColor})),u=e.computed(()=>({color:c.tab.validationError?c.tab.errorColor:c.tab.color})),f=e.computed(()=>c.tab.shape==="square"),r=e.computed(()=>c.tab.shape==="tab"),g=e.computed(()=>c.disableBackOnClickStep?"cursor: default":"");return(p,T)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass({active:a.tab.active})},[e.createElementVNode("a",{class:e.normalizeClass({disabled:!a.tab.checked}),style:e.normalizeStyle(e.unref(g))},[e.createElementVNode("div",{class:e.normalizeClass(["wizard-icon-circle md",{checked:a.tab.checked,square_shape:e.unref(f),tab_shape:e.unref(r)}]),role:"tab",tabindex:a.tab.checked?0:"",id:`step-${a.tab.tabId}`,"aria-controls":a.tab.tabId,"aria-disabled":a.tab.active,"aria-selected":a.tab.active,style:e.normalizeStyle([a.tab.checked?e.unref(m):{},a.tab.validationError?e.unref(n):{}])},[a.tab.active?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["wizard-icon-container",{square_shape:e.unref(f),tab_shape:e.unref(r)}]),style:e.normalizeStyle([e.unref(d),a.tab.validationError?e.unref(n):{}])},[e.renderSlot(p.$slots,"active-step",{},()=>[a.tab.customIcon?(e.openBlock(),e.createElementBlock("span",{key:0,class:"wizard-icon",innerHTML:a.tab.customIcon},null,8,te)):(e.openBlock(),e.createElementBlock("i",{key:1,class:e.normalizeClass([a.tab.icon?a.tab.icon:"","wizard-icon"]),style:e.normalizeStyle(a.tab.checked?e.unref(i):"")},e.toDisplayString(a.tab.icon?null:a.index+1),7))])],6)):e.renderSlot(p.$slots,"default",{key:1},()=>[a.tab.customIcon?(e.openBlock(),e.createElementBlock("span",{key:0,class:"wizard-icon",innerHTML:a.tab.customIcon},null,8,ae)):(e.openBlock(),e.createElementBlock("i",{key:1,class:e.normalizeClass([a.tab.icon?a.tab.icon:"","wizard-icon"]),style:e.normalizeStyle(a.tab.checked?e.unref(i):"")},e.toDisplayString(a.tab.icon?null:a.index+1),7))])],14,ee),e.renderSlot(p.$slots,"title",{},()=>[e.createElementVNode("span",{class:e.normalizeClass(["stepTitle",{active:a.tab.active,has_error:a.tab.validationError}]),style:e.normalizeStyle([a.tab.active||a.tab.checked?e.unref(u):{},{"margin-top":"5px"}])},e.toDisplayString(a.tab.title),7)]),e.renderSlot(p.$slots,"customIcon")],6)],2))}});function ne(){return document.activeElement?.id||""}function M(a=[]){const c=ne();return a.findIndex(i=>i.tabId===c)}function O(a){const c=document.getElementById(a);c&&c.focus()}function le(a){return a&&typeof a.then=="function"}const re=["id","onKeyup"],ce={key:0,class:"wizard-header"},ie={class:"wizard-title"},se={class:"category"},de={class:"wizard-navigation"},ue={key:0,class:"wizard-progress-with-circle"},fe={class:"wizard-tab-content"},pe={key:1,class:"wizard-card-footer clearfix"},be={key:0,class:"wizard-footer-left"},me=["onKeyup"],he={class:"wizard-footer-right"},ge=["onKeyup"],ke=["onKeyup"],D=e.defineComponent({props:{id:{default:void 0},title:{default:"Awesome Wizard"},subtitle:{default:"Split a complicated flow in multiple steps"},nextButtonText:{default:"Next"},backButtonText:{default:"Back"},finishButtonText:{default:"Finish"},hideButtons:{type:Boolean,default:!1},validateOnBack:{type:Boolean,default:!1},color:{default:"#e74c3c"},errorColor:{default:"#8b0000"},shape:{default:"circle"},layout:{default:"horizontal"},stepsClasses:{default:""},stepSize:{default:"md"},transition:{default:""},startIndex:{default:0},disableBackOnClickStep:{type:Boolean,default:!1},disableBack:{type:Boolean,default:!1}},emits:{"on-change":(a,c)=>!0,"update:startIndex":a=>!0,"on-complete":()=>!0,"on-loading":a=>!0,"on-error":a=>!0,"on-validate":(a,c)=>!0},setup(a,{expose:c,emit:d}){const i=a,m=e.computed(()=>i.id||"fw_"+new Date().valueOf()),n=e.ref(0),u=e.ref(0),f=e.ref(!1),r=e.ref([]);let g=null;g=e.getCurrentInstance(),console.log("Component instance captured:",!!g),console.log("Router available in global properties:",!!g?.appContext?.config?.globalProperties?.$router);const p=e.computed(()=>r.value.length),T=e.computed(()=>n.value===p.value-1),$=e.computed(()=>i.layout==="vertical"),N=e.computed(()=>n.value!==0),h=e.computed(()=>1/(p.value*2)*100),F=e.computed(()=>{let t=0;return n.value>0?t=h.value*(n.value*2+1):t=h.value,t}),Be=e.computed(()=>({backgroundColor:i.color,width:`${F.value}%`,color:i.color})),w=e.computed(()=>({backgroundColor:i.color,borderColor:i.color,color:"white"})),y=e.computed(()=>({nextTab:S,prevTab:x,activeTabIndex:n.value,isLastStep:T.value,fillButtonStyle:w.value})),P=(t,o)=>{d("on-change",t,o),d("update:startIndex",o)},L=(t,o)=>{const l=p.value;t.tabId=`${t.title.replace(/ /g,"")}${l}`;const s={...t,updateActiveState:o};r.value.splice(l,0,s),l<n.value+1&&(u.value=l,C(n.value+1,l))},j=t=>{const o=r.value.indexOf(t);o>-1&&(o===n.value&&(u.value=n.value-1,C(n.value,n.value-1)),o<n.value&&(u.value=n.value-1,n.value=n.value-1,P(n.value+1,n.value)),r.value.splice(o,1))},Se=()=>{u.value=0,r.value.forEach(t=>{t.checked=!1}),B(0)},ze=()=>{u.value=r.value.length-1,r.value.forEach(t=>{t.checked=!0})},B=t=>{const o=t>n.value;if(t<=u.value){const l=()=>{o&&t-n.value>1?(C(n.value,n.value+1),I(n.value,l)):(C(n.value,t),G(n.value))};o?I(n.value,l):(E(null),l())}return t<=u.value},S=()=>{const t=()=>{if(n.value<p.value-1){const o=n.value+1;C(n.value,o),G(o)}else d("on-complete")};I(n.value,t)},x=()=>{const t=()=>{n.value>0&&(E(null),C(n.value,n.value-1))};i.validateOnBack?I(n.value,t):t()},q=()=>{const t=M(r.value);if(t!==-1&&t<r.value.length-1){const o=r.value[t+1];o.checked&&O(o.tabId)}},H=()=>{const t=M(r.value);if(t!==-1&&t>0){const o=r.value[t-1].tabId;O(o)}},R=t=>{f.value=t,d("on-loading",t)},E=t=>{r.value[n.value].validationError=t,d("on-error",t)},Te=(t,o)=>{E(null),le(t)?(R(!0),t.then(l=>{R(!1),U(l===!0,o)}).catch(l=>{R(!1),E(l)})):U(t===!0,o)},U=(t,o)=>{d("on-validate",t,n.value),t?o():r.value[n.value].validationError="error"},I=(t,o)=>{if(f.value)return;const l=r.value[t];if(l&&l.beforeChange!==void 0){const s=l.beforeChange();Te(s,o)}else o()},G=t=>{if(f.value)return;const o=r.value[t];o&&o.afterChange!==void 0&&o.afterChange()},C=(t,o,l=!0)=>{const s=r.value[t],k=r.value[o];return s&&(s.active=!1),k&&(k.active=!0),l&&n.value!==o&&P(t,o),n.value=o,K(n.value),!0},$e=t=>{if(t.route&&typeof t.route=="string"){const o=g;if(!o){console.warn("Component instance not available for route navigation");return}let l=null;if(o?.appContext.config.globalProperties.$router&&(l=o.appContext.config.globalProperties.$router),!l&&o?.proxy?.$router&&(l=o.proxy.$router),!l&&o?.appContext.app&&"$router"in o.appContext.app&&(l=o.appContext.app.$router),!l)try{const s=o?.provides?.$router||o?.parent?.provides?.$router;s&&(l=s)}catch(s){console.log("Injection method failed:",s)}l?(o?.appContext.config.globalProperties.$route?.path||o?.proxy?.$route?.path||(o?.appContext.app&&"$route"in o.appContext.app?o.appContext.app.$route?.path:void 0))!==t.route&&l.push(t.route).catch(k=>{console.warn("Route navigation failed:",k)}):console.warn("Vue Router not found. Make sure to install vue-router and use app.use(router)")}},we=t=>{let o=-1;const l=r.value.find((s,k)=>{const Y=s.route===t;return Y&&(o=k),Y});l&&!l.active&&(o>n.value,B(o))},J=()=>{r.value.forEach(t=>{t.active=!1,t.updateActiveState&&t.updateActiveState(!1)})},v=t=>{J();const o=r.value[t];o&&(o.active=!0,o.checked=!0,o.updateActiveState&&o.updateActiveState(!0),$e(o))},K=t=>{v(t),t>u.value&&(u.value=t),n.value=t},Q=()=>{r.value.length>0&&i.startIndex===0&&v(n.value),i.startIndex<r.value.length?K(i.startIndex):console.warn(`Prop startIndex set to ${i.startIndex} is greater than the number of tabs - ${r.value.length}. Make sure that the starting index is less than the number of tabs registered`)};c({emitTabChange:P,addTab:L,removeTab:j,reset:Se,activateAll:ze,navigateToTab:B,nextTab:S,prevTab:x,focusNextTab:q,focusPrevTab:H,changeTab:C,deactivateTabs:J,activateTab:v,initializeTabs:Q}),e.provide("addTab",L),e.provide("removeTab",j),e.watch(()=>i.startIndex,t=>{t<r.value.length&&K(t)});const X=e.ref("");let A=null;const xe=()=>{const t=g;if(!t){console.warn("Component instance not available for route watching");return}let o=null;t?.appContext.config.globalProperties.$route?o=t.appContext.config.globalProperties.$route:t?.proxy?.$route?o=t.proxy.$route:t?.appContext.app&&"$route"in t.appContext.app&&(o=t.appContext.app.$route),o?A=e.watch(()=>o.path,l=>{l!==X.value&&(X.value=l,we(l))},{immediate:!0}):console.warn("Vue Router not detected. Route-based navigation will not work.")};return e.onMounted(()=>{Q(),xe()}),e.onBeforeUnmount(()=>{A&&A()}),(t,o)=>(e.openBlock(),e.createElementBlock("div",{id:e.unref(m),class:e.normalizeClass(["vue-form-wizard",[a.stepSize,{vertical:e.unref($)}]]),onKeyup:[e.withKeys(q,["right"]),e.withKeys(H,["left"])]},[t.$slots.title?(e.openBlock(),e.createElementBlock("div",ce,[e.renderSlot(t.$slots,"title",{},()=>[e.createElementVNode("h4",ie,e.toDisplayString(a.title),1),e.createElementVNode("p",se,e.toDisplayString(a.subtitle),1)])])):e.createCommentVNode("",!0),e.createElementVNode("div",de,[e.unref($)?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",ue,[e.createElementVNode("div",{class:"wizard-progress-bar",style:e.normalizeStyle(e.unref(Be))},null,4)])),e.createElementVNode("ul",{class:e.normalizeClass(["wizard-nav wizard-nav-pills",a.stepsClasses]),role:"tablist"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value,(l,s)=>e.renderSlot(t.$slots,"step",{tab:l,index:s,navigateToTab:B,stepSize:a.stepSize,transition:a.transition},()=>[e.createVNode(V,{tab:l,"step-size":a.stepSize,onClick:k=>a.disableBackOnClickStep||a.disableBack?!1:B(s),onKeyup:e.withKeys(k=>B(s),["enter"]),transition:a.transition,index:s,"disable-back-on-click-step":a.disableBack?!0:a.disableBackOnClickStep},null,8,["tab","step-size","onClick","onKeyup","transition","index","disable-back-on-click-step"])])),256))],2),e.createElementVNode("div",fe,[e.renderSlot(t.$slots,"default",e.normalizeProps(e.guardReactiveProps(e.unref(y))))])]),a.hideButtons?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",pe,[e.renderSlot(t.$slots,"footer",e.normalizeProps(e.guardReactiveProps(e.unref(y))),()=>[a.disableBack?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",be,[e.unref(N)?(e.openBlock(),e.createElementBlock("span",{key:0,onClick:x,onKeyup:e.withKeys(x,["enter"]),role:"button",tabindex:"0"},[e.renderSlot(t.$slots,"prev",e.normalizeProps(e.guardReactiveProps(e.unref(y))),()=>[e.createVNode(z,{style:e.normalizeStyle(e.unref(w)),disabled:f.value},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.backButtonText),1)]),_:1},8,["style","disabled"])])],40,me)):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"custom-buttons-left",e.normalizeProps(e.guardReactiveProps(e.unref(y))))])),e.createElementVNode("div",he,[e.renderSlot(t.$slots,"custom-buttons-right",e.normalizeProps(e.guardReactiveProps(e.unref(y)))),e.unref(T)?(e.openBlock(),e.createElementBlock("span",{key:0,onClick:S,onKeyup:e.withKeys(S,["enter"]),role:"button",tabindex:"0"},[e.renderSlot(t.$slots,"finish",e.normalizeProps(e.guardReactiveProps(e.unref(y))),()=>[e.createVNode(z,{style:e.normalizeStyle(e.unref(w))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.finishButtonText),1)]),_:1},8,["style"])])],40,ge)):(e.openBlock(),e.createElementBlock("span",{key:1,onClick:S,onKeyup:e.withKeys(S,["enter"]),role:"button",tabindex:"0"},[e.renderSlot(t.$slots,"next",e.normalizeProps(e.guardReactiveProps(e.unref(y))),()=>[e.createVNode(z,{style:e.normalizeStyle(e.unref(w)),disabled:f.value},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.nextButtonText),1)]),_:1},8,["style","disabled"])])],40,ke))])])]))],42,re))}}),ye=["id","aria-hidden","aria-labelledby"],W=e.defineComponent({props:{title:{default:""},icon:{default:""},customIcon:{default:""},lazy:{type:Boolean,default:!1},beforeChange:null,afterChange:null,route:null,additionalInfo:{default:()=>({})}},setup(a){const c=a,d=e.inject("addTab"),i=e.inject("removeTab"),m=e.ref(!1),n=e.ref(null),u=e.ref(!1),f=e.ref(""),r=e.getCurrentInstance(),g=e.computed(()=>r?.parent?.props?.shape||"circle"),p=e.computed(()=>r?.parent?.props?.color||"#e74c3c"),T=e.computed(()=>r?.parent?.props?.errorColor||"#8b0000"),$=e.computed(()=>({title:c.title,icon:c.icon,customIcon:c.customIcon,beforeChange:c.beforeChange,afterChange:c.afterChange,route:c.route,active:m.value,checked:u.value,validationError:n.value,tabId:f.value,color:p.value,errorColor:T.value,shape:g.value})),N=h=>{m.value=h};return e.onMounted(()=>{d&&d($.value,N)}),e.onBeforeUnmount(()=>{i&&i($.value)}),(h,F)=>!a.lazy||m.value?e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:0,class:"wizard-tab-container",role:"tabpanel",id:f.value,"aria-hidden":!m.value,"aria-labelledby":`step-${f.value}`},[e.renderSlot(h.$slots,"default",{active:m.value}),e.renderSlot(h.$slots,"customIcon")],8,ye)),[[e.vShow,m.value]]):e.createCommentVNode("",!0)}}),Ce={install(a){a.component("form-wizard",D),a.component("tab-content",W),a.component("wizard-button",z),a.component("wizard-step",V)}};b.FormWizard=D,b.TabContent=W,b.WizardButton=z,b.WizardStep=V,b.default=Ce,Object.defineProperties(b,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));