vue3-form-wizard - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8

dist/vue3-form-wizard.es.js

@@ -5,8 +5,8 @@ /*
  * vue3-form-wizard is a vue based component with no external depenendcies which simplifies tab wizard management.
- * v0.1.6
+ * v0.1.8
  * MIT License
  */
 
-import { openBlock as o, createElementBlock as d, renderSlot as l, normalizeClass as h, createElementVNode as c, normalizeStyle as b, toDisplayString as u, resolveComponent as p, withKeys as T, createCommentVNode as g, Fragment as P, renderList as A, createVNode as x, normalizeProps as f, guardReactiveProps as v, withCtx as S, createTextVNode as C, withDirectives as L, vShow as V } from "vue";
-const m = (t, a) => {
+import { openBlock as o, createElementBlock as d, renderSlot as l, normalizeClass as h, createElementVNode as c, normalizeStyle as b, toDisplayString as u, resolveComponent as p, withKeys as T, createCommentVNode as g, Fragment as P, renderList as A, createVNode as m, normalizeProps as f, guardReactiveProps as v, withCtx as S, createTextVNode as C, withDirectives as L, vShow as V } from "vue";
+const x = (t, a) => {
   const e = t.__vccOpts || t;
@@ -26,3 +26,3 @@ for (const [n, s] of a)
 }
-const _ = /* @__PURE__ */ m(N, [["render", O]]), K = {
+const _ = /* @__PURE__ */ x(N, [["render", O]]), K = {
   name: "wizard-step",
@@ -141,3 +141,3 @@ props: {
 }
-const w = /* @__PURE__ */ m(K, [["render", W]]);
+const w = /* @__PURE__ */ x(K, [["render", W]]);
 function j() {
@@ -297,3 +297,3 @@ return document.activeElement.id;
       const a = this.tabCount;
-      t.tabId = `${t.title.replace(/ /g, "")}${a}`, console.log(t), this.tabs.splice(a, 0, t), a < this.activeTabIndex + 1 && (this.maxStep = a, this.changeTab(this.activeTabIndex + 1, a));
+      t.tabId = `${t.title.replace(/ /g, "")}${a}`, this.tabs.splice(a, 0, t), a < this.activeTabIndex + 1 && (this.maxStep = a, this.changeTab(this.activeTabIndex + 1, a));
     },
@@ -475,3 +475,3 @@ removeTab(t) {
         }, () => [
-          x(B, {
+          m(B, {
             tab: r,
@@ -501,3 +501,3 @@ "step-size": e.stepSize,
             l(t.$slots, "prev", f(v(i.slotProps)), () => [
-              x(I, {
+              m(I, {
                 style: b(i.fillButtonStyle),
@@ -525,3 +525,3 @@ disabled: s.loading
             l(t.$slots, "finish", f(v(i.slotProps)), () => [
-              x(I, {
+              m(I, {
                 style: b(i.fillButtonStyle)
@@ -543,3 +543,3 @@ }, {
             l(t.$slots, "next", f(v(i.slotProps)), () => [
-              x(I, {
+              m(I, {
                 style: b(i.fillButtonStyle),
@@ -560,3 +560,3 @@ disabled: s.loading
 }
-const it = /* @__PURE__ */ m(D, [["render", at]]), st = {
+const it = /* @__PURE__ */ x(D, [["render", at]]), st = {
   name: "tab-content",
@@ -637,3 +637,3 @@ props: {
 }
-const lt = /* @__PURE__ */ m(st, [["render", rt]]), dt = {
+const lt = /* @__PURE__ */ x(st, [["render", rt]]), dt = {
   install(t) {
@@ -640,0 +640,0 @@ t.component("form-wizard", it), t.component("tab-content", lt), t.component("wizard-button", _), t.component("wizard-step", w);

dist/vue3-form-wizard.umd.js

@@ -5,6 +5,6 @@ /*
  * vue3-form-wizard is a vue based component with no external depenendcies which simplifies tab wizard management.
- * v0.1.6
+ * v0.1.8
  * MIT License
  */
 
-(function(o,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(o=typeof globalThis<"u"?globalThis:o||self,t(o.Vue3FormWizard={},o.Vue))})(this,function(o,t){"use strict";const c=(e,i)=>{const a=e.__vccOpts||e;for(const[s,r]of i)a[s]=r;return a},u={},S={class:"wizard-btn",tabindex:"-1",type:"button"};function x(e,i,a,s,r,n){return t.openBlock(),t.createElementBlock("button",S,[t.renderSlot(e.$slots,"default")])}const h=c(u,[["render",x]]),p={name:"wizard-step",props:{tab:{type:Object,default:()=>{}},transition:{type:String,default:""},index:{type:Number,default:0}},computed:{iconActiveStyleBg(){return{backgroundColor:this.tab.color}},iconActiveStyle(){if(!this.tab.active)return{color:this.tab.color}},stepCheckedStyle(){return{borderColor:this.tab.color}},errorStyle(){return{borderColor:this.tab.errorColor,backgroundColor:this.tab.errorColor}},stepTitleStyle(){return{color:this.tab.validationError?this.tab.errorColor:this.tab.color}},isStepSquare(){return this.tab.shape==="square"},isTabShape(){return this.tab.shape==="tab"}}},k=["tabindex","id","aria-controls","aria-disabled","aria-selected"],C=["innerHTML"],z=["innerHTML"];function I(e,i,a,s,r,n){return t.openBlock(),t.createElementBlock("li",{class:t.normalizeClass({active:a.tab.active})},[t.createElementVNode("a",{href:"javascript:void(0)",class:t.normalizeClass({disabled:!a.tab.checked})},[t.createElementVNode("div",{class:t.normalizeClass(["wizard-icon-circle md",{checked:a.tab.checked,square_shape:n.isStepSquare,tab_shape:n.isTabShape}]),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:t.normalizeStyle([a.tab.checked?n.stepCheckedStyle:{},a.tab.validationError?n.errorStyle:{}])},[a.tab.active?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["wizard-icon-container",{square_shape:n.isStepSquare,tab_shape:n.isTabShape}]),style:t.normalizeStyle([n.iconActiveStyleBg,a.tab.validationError?n.errorStyle:{}])},[t.renderSlot(e.$slots,"active-step",{},()=>[a.tab.customIcon?(t.openBlock(),t.createElementBlock("span",{key:0,class:"wizard-icon",innerHTML:a.tab.customIcon},null,8,C)):(t.openBlock(),t.createElementBlock("i",{key:1,class:t.normalizeClass([a.tab.icon?a.tab.icon:"","wizard-icon"]),style:t.normalizeStyle(a.tab.checked?n.iconActiveStyle:"")},t.toDisplayString(a.tab.icon?null:a.index+1),7))])],6)):t.renderSlot(e.$slots,"default",{key:1},()=>[a.tab.customIcon?(t.openBlock(),t.createElementBlock("span",{key:0,class:"wizard-icon",innerHTML:a.tab.customIcon},null,8,z)):(t.openBlock(),t.createElementBlock("i",{key:1,class:t.normalizeClass([a.tab.icon?a.tab.icon:"","wizard-icon"]),style:t.normalizeStyle(a.tab.checked?n.iconActiveStyle:"")},t.toDisplayString(a.tab.icon?null:a.index+1),7))])],14,k),t.renderSlot(e.$slots,"title",{},()=>[t.createElementVNode("span",{class:t.normalizeClass(["stepTitle",{active:a.tab.active,has_error:a.tab.validationError}]),style:t.normalizeStyle([a.tab.active||a.tab.checked?n.stepTitleStyle:{},{"margin-top":"5px"}])},t.toDisplayString(a.tab.title),7)]),t.renderSlot(e.$slots,"customIcon")],2)],2)}const b=c(p,[["render",I]]);function B(){return document.activeElement.id}function T(e=[]){let i=B();return e.findIndex(s=>s.tabId===i)}function m(e){document.getElementById(e).focus()}function w(e){return e.then&&typeof e.then=="function"}const G="",_={name:"form-wizard",components:{WizardButton:h,WizardStep:b},props:{id:{type:String,default:"fw_"+new Date().valueOf()},title:{type:String,default:"Awesome Wizard"},subtitle:{type:String,default:"Split a complicated flow in multiple steps"},nextButtonText:{type:String,default:"Next"},backButtonText:{type:String,default:"Back"},finishButtonText:{type:String,default:"Finish"},hideButtons:{type:Boolean,default:!1},validateOnBack:Boolean,color:{type:String,default:"#e74c3c"},errorColor:{type:String,default:"#8b0000"},shape:{type:String,default:"circle"},layout:{type:String,default:"horizontal"},stepsClasses:{type:[String,Array],default:""},stepSize:{type:String,default:"md",validator:e=>["xs","sm","md","lg"].indexOf(e)!==-1},transition:{type:String,default:""},startIndex:{type:Number,default:0,validator:e=>e>=0}},provide(){return{addTab:this.addTab,removeTab:this.removeTab}},data(){return{activeTabIndex:0,currentPercentage:0,maxStep:0,loading:!1,tabs:[]}},computed:{slotProps(){return{nextTab:this.nextTab,prevTab:this.prevTab,activeTabIndex:this.activeTabIndex,isLastStep:this.isLastStep,fillButtonStyle:this.fillButtonStyle}},tabCount(){return this.tabs.length},isLastStep(){return this.activeTabIndex===this.tabCount-1},isVertical(){return this.layout==="vertical"},displayPrevButton(){return this.activeTabIndex!==0},stepPercentage(){return 1/(this.tabCount*2)*100},progressBarStyle(){return{backgroundColor:this.color,width:`${this.progress}%`,color:this.color}},fillButtonStyle(){return{backgroundColor:this.color,borderColor:this.color,color:"white"}},progress(){let e=0;if(this.activeTabIndex>0){let i=1,a=2;e=this.stepPercentage*(this.activeTabIndex*a+i)}else e=this.stepPercentage;return e}},methods:{emitTabChange(e,i){this.$emit("on-change",e,i),this.$emit("update:startIndex",i)},addTab(e){const i=this.tabCount;e.tabId=`${e.title.replace(/ /g,"")}${i}`,console.log(e),this.tabs.splice(i,0,e),i<this.activeTabIndex+1&&(this.maxStep=i,this.changeTab(this.activeTabIndex+1,i))},removeTab(e){const i=this.tabs,a=i.indexOf(e);a>-1&&(a===this.activeTabIndex&&(this.maxStep=this.activeTabIndex-1,this.changeTab(this.activeTabIndex,this.activeTabIndex-1)),a<this.activeTabIndex&&(this.maxStep=this.activeTabIndex-1,this.activeTabIndex=this.activeTabIndex-1,this.emitTabChange(this.activeTabIndex+1,this.activeTabIndex)),i.splice(a,1))},reset(){this.maxStep=0,this.tabs.forEach(e=>{e.checked=!1}),this.navigateToTab(0)},activateAll(){this.maxStep=this.tabs.length-1,this.tabs.forEach(e=>{e.checked=!0})},navigateToTab(e){let i=e>this.activeTabIndex;if(e<=this.maxStep){let a=()=>{i&&e-this.activeTabIndex>1?(this.changeTab(this.activeTabIndex,this.activeTabIndex+1),this.beforeTabChange(this.activeTabIndex,a)):(this.changeTab(this.activeTabIndex,e),this.afterTabChange(this.activeTabIndex))};i?this.beforeTabChange(this.activeTabIndex,a):(this.setValidationError(null),a())}return e<=this.maxStep},nextTab(){let e=()=>{this.activeTabIndex<this.tabCount-1?(this.changeTab(this.activeTabIndex,this.activeTabIndex+1),this.afterTabChange(this.activeTabIndex)):this.$emit("on-complete")};this.beforeTabChange(this.activeTabIndex,e)},prevTab(){let e=()=>{this.activeTabIndex>0&&(this.setValidationError(null),this.changeTab(this.activeTabIndex,this.activeTabIndex-1))};this.validateOnBack?this.beforeTabChange(this.activeTabIndex,e):e()},focusNextTab(){let e=T(this.tabs);if(e!==-1&&e<this.tabs.length-1){let i=this.tabs[e+1];i.checked&&m(i.tabId)}},focusPrevTab(){let e=T(this.tabs);if(e!==-1&&e>0){let i=this.tabs[e-1].tabId;m(i)}},setLoading(e){this.loading=e,this.$emit("on-loading",e)},setValidationError(e){this.tabs[this.activeTabIndex].validationError=e,this.$emit("on-error",e)},validateBeforeChange(e,i){if(this.setValidationError(null),w(e))this.setLoading(!0),e.then(a=>{this.setLoading(!1);let s=a===!0;this.executeBeforeChange(s,i)}).catch(a=>{this.setLoading(!1),this.setValidationError(a)});else{let a=e===!0;this.executeBeforeChange(a,i)}},executeBeforeChange(e,i){this.$emit("on-validate",e,this.activeTabIndex),e?i():this.tabs[this.activeTabIndex].validationError="error"},beforeTabChange(e,i){if(this.loading)return;let a=this.tabs[e];if(a&&a.beforeChange!==void 0){let s=a.beforeChange();this.validateBeforeChange(s,i)}else i()},afterTabChange(e){if(this.loading)return;let i=this.tabs[e];i&&i.afterChange!==void 0&&i.afterChange()},changeTab(e,i,a=!0){let s=this.tabs[e],r=this.tabs[i];return s&&(s.active=!1),r&&(r.active=!0),a&&this.activeTabIndex!==i&&this.emitTabChange(e,i),this.activeTabIndex=i,this.activateTabAndCheckStep(this.activeTabIndex),!0},tryChangeRoute(e){this.$router&&e.route&&this.$router.push(e.route)},checkRouteChange(e){let i=-1,a=this.tabs.find((s,r)=>{let n=s.route===e;return n&&(i=r),n});if(a&&!a.active){const s=i>this.activeTabIndex;this.navigateToTab(i,s)}},deactivateTabs(){this.tabs.forEach(e=>{e.active=!1})},activateTab(e){this.deactivateTabs();let i=this.tabs[e];i&&(i.active=!0,i.checked=!0,this.tryChangeRoute(i))},activateTabAndCheckStep(e){this.activateTab(e),e>this.maxStep&&(this.maxStep=e),this.activeTabIndex=e},initializeTabs(){this.tabs.length>0&&this.startIndex===0&&this.activateTab(this.activeTabIndex),this.startIndex<this.tabs.length?this.activateTabAndCheckStep(this.startIndex):window.console.warn(`Prop startIndex set to ${this.startIndex} is greater than the number of tabs - ${this.tabs.length}. Make sure that the starting index is less than the number of tabs registered`)}},mounted(){this.initializeTabs()},watch:{"$route.path"(e){this.checkRouteChange(e)}}},E=["id"],v={key:0,class:"wizard-header"},P={class:"wizard-title"},V={class:"category"},N={class:"wizard-navigation"},A={key:0,class:"wizard-progress-with-circle"},L={class:"wizard-tab-content"},R={key:1,class:"wizard-card-footer clearfix"},F={class:"wizard-footer-left"},K={class:"wizard-footer-right"};function D(e,i,a,s,r,n){const q=t.resolveComponent("wizard-step"),f=t.resolveComponent("wizard-button");return t.openBlock(),t.createElementBlock("div",{id:a.id?a.id:"",class:t.normalizeClass(["vue-form-wizard",[a.stepSize,{vertical:n.isVertical}]]),onKeyup:[i[6]||(i[6]=t.withKeys((...l)=>n.focusNextTab&&n.focusNextTab(...l),["right"])),i[7]||(i[7]=t.withKeys((...l)=>n.focusPrevTab&&n.focusPrevTab(...l),["left"]))]},[e.$slots.title?(t.openBlock(),t.createElementBlock("div",v,[t.renderSlot(e.$slots,"title",{},()=>[t.createElementVNode("h4",P,t.toDisplayString(a.title),1),t.createElementVNode("p",V,t.toDisplayString(a.subtitle),1)])])):t.createCommentVNode("",!0),t.createElementVNode("div",N,[n.isVertical?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("div",A,[t.createElementVNode("div",{class:"wizard-progress-bar",style:t.normalizeStyle(n.progressBarStyle)},null,4)])),t.createElementVNode("ul",{class:t.normalizeClass(["wizard-nav wizard-nav-pills",a.stepsClasses]),role:"tablist"},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(r.tabs,(l,d)=>t.renderSlot(e.$slots,"step",{tab:l,index:d,navigateToTab:n.navigateToTab,stepSize:a.stepSize,transition:a.transition},()=>[t.createVNode(q,{tab:l,"step-size":a.stepSize,onClick:H=>n.navigateToTab(d),onKeyup:t.withKeys(H=>n.navigateToTab(d),["enter"]),transition:a.transition,index:d},null,8,["tab","step-size","onClick","onKeyup","transition","index"])])),256))],2),t.createElementVNode("div",L,[t.renderSlot(e.$slots,"default",t.normalizeProps(t.guardReactiveProps(n.slotProps)))])]),a.hideButtons?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("div",R,[t.renderSlot(e.$slots,"footer",t.normalizeProps(t.guardReactiveProps(n.slotProps)),()=>[t.createElementVNode("div",F,[n.displayPrevButton?(t.openBlock(),t.createElementBlock("span",{key:0,onClick:i[0]||(i[0]=(...l)=>n.prevTab&&n.prevTab(...l)),onKeyup:i[1]||(i[1]=t.withKeys((...l)=>n.prevTab&&n.prevTab(...l),["enter"])),role:"button",tabindex:"0"},[t.renderSlot(e.$slots,"prev",t.normalizeProps(t.guardReactiveProps(n.slotProps)),()=>[t.createVNode(f,{style:t.normalizeStyle(n.fillButtonStyle),disabled:r.loading},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(a.backButtonText),1)]),_:1},8,["style","disabled"])])],32)):t.createCommentVNode("",!0),t.renderSlot(e.$slots,"custom-buttons-left",t.normalizeProps(t.guardReactiveProps(n.slotProps)))]),t.createElementVNode("div",K,[t.renderSlot(e.$slots,"custom-buttons-right",t.normalizeProps(t.guardReactiveProps(n.slotProps))),n.isLastStep?(t.openBlock(),t.createElementBlock("span",{key:0,onClick:i[2]||(i[2]=(...l)=>n.nextTab&&n.nextTab(...l)),onKeyup:i[3]||(i[3]=t.withKeys((...l)=>n.nextTab&&n.nextTab(...l),["enter"])),role:"button",tabindex:"0"},[t.renderSlot(e.$slots,"finish",t.normalizeProps(t.guardReactiveProps(n.slotProps)),()=>[t.createVNode(f,{style:t.normalizeStyle(n.fillButtonStyle)},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(a.finishButtonText),1)]),_:1},8,["style"])])],32)):(t.openBlock(),t.createElementBlock("span",{key:1,onClick:i[4]||(i[4]=(...l)=>n.nextTab&&n.nextTab(...l)),onKeyup:i[5]||(i[5]=t.withKeys((...l)=>n.nextTab&&n.nextTab(...l),["enter"])),role:"button",tabindex:"0"},[t.renderSlot(e.$slots,"next",t.normalizeProps(t.guardReactiveProps(n.slotProps)),()=>[t.createVNode(f,{style:t.normalizeStyle(n.fillButtonStyle),disabled:r.loading},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(a.nextButtonText),1)]),_:1},8,["style","disabled"])])],32))])])]))],42,E)}const g=c(_,[["render",D]]),O={name:"tab-content",props:{title:{type:String,default:""},icon:{type:String,default:""},customIcon:{type:String,default:""},lazy:{type:Boolean,default:!1},beforeChange:{type:Function},afterChange:{type:Function},route:{type:[String,Object]},additionalInfo:{type:Object,default:()=>{}}},inject:["addTab","removeTab"],data(){return{active:!1,validationError:null,checked:!1,tabId:""}},computed:{shape(){return this.$parent.shape},color(){return this.$parent.color},errorColor(){return this.$parent.errorColor}},mounted(){this.addTab(this)},destroyed(){this.$el&&this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el),this.removeTab(this)}},W=["id","aria-hidden","aria-labelledby"];function M(e,i,a,s,r,n){return!a.lazy||r.active?t.withDirectives((t.openBlock(),t.createElementBlock("div",{key:0,class:"wizard-tab-container",role:"tabpanel",id:r.tabId,"aria-hidden":!r.active,"aria-labelledby":`step-${r.tabId}`},[t.renderSlot(e.$slots,"default",{active:r.active}),t.renderSlot(e.$slots,"customIcon")],8,W)),[[t.vShow,r.active]]):t.createCommentVNode("",!0)}const y=c(O,[["render",M]]),j={install(e){e.component("form-wizard",g),e.component("tab-content",y),e.component("wizard-button",h),e.component("wizard-step",b)}};o.FormWizard=g,o.TabContent=y,o.WizardButton=h,o.WizardStep=b,o.default=j,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(o,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(o=typeof globalThis<"u"?globalThis:o||self,t(o.Vue3FormWizard={},o.Vue))})(this,function(o,t){"use strict";const c=(e,i)=>{const a=e.__vccOpts||e;for(const[s,r]of i)a[s]=r;return a},u={},S={class:"wizard-btn",tabindex:"-1",type:"button"};function x(e,i,a,s,r,n){return t.openBlock(),t.createElementBlock("button",S,[t.renderSlot(e.$slots,"default")])}const h=c(u,[["render",x]]),p={name:"wizard-step",props:{tab:{type:Object,default:()=>{}},transition:{type:String,default:""},index:{type:Number,default:0}},computed:{iconActiveStyleBg(){return{backgroundColor:this.tab.color}},iconActiveStyle(){if(!this.tab.active)return{color:this.tab.color}},stepCheckedStyle(){return{borderColor:this.tab.color}},errorStyle(){return{borderColor:this.tab.errorColor,backgroundColor:this.tab.errorColor}},stepTitleStyle(){return{color:this.tab.validationError?this.tab.errorColor:this.tab.color}},isStepSquare(){return this.tab.shape==="square"},isTabShape(){return this.tab.shape==="tab"}}},k=["tabindex","id","aria-controls","aria-disabled","aria-selected"],C=["innerHTML"],z=["innerHTML"];function I(e,i,a,s,r,n){return t.openBlock(),t.createElementBlock("li",{class:t.normalizeClass({active:a.tab.active})},[t.createElementVNode("a",{href:"javascript:void(0)",class:t.normalizeClass({disabled:!a.tab.checked})},[t.createElementVNode("div",{class:t.normalizeClass(["wizard-icon-circle md",{checked:a.tab.checked,square_shape:n.isStepSquare,tab_shape:n.isTabShape}]),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:t.normalizeStyle([a.tab.checked?n.stepCheckedStyle:{},a.tab.validationError?n.errorStyle:{}])},[a.tab.active?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["wizard-icon-container",{square_shape:n.isStepSquare,tab_shape:n.isTabShape}]),style:t.normalizeStyle([n.iconActiveStyleBg,a.tab.validationError?n.errorStyle:{}])},[t.renderSlot(e.$slots,"active-step",{},()=>[a.tab.customIcon?(t.openBlock(),t.createElementBlock("span",{key:0,class:"wizard-icon",innerHTML:a.tab.customIcon},null,8,C)):(t.openBlock(),t.createElementBlock("i",{key:1,class:t.normalizeClass([a.tab.icon?a.tab.icon:"","wizard-icon"]),style:t.normalizeStyle(a.tab.checked?n.iconActiveStyle:"")},t.toDisplayString(a.tab.icon?null:a.index+1),7))])],6)):t.renderSlot(e.$slots,"default",{key:1},()=>[a.tab.customIcon?(t.openBlock(),t.createElementBlock("span",{key:0,class:"wizard-icon",innerHTML:a.tab.customIcon},null,8,z)):(t.openBlock(),t.createElementBlock("i",{key:1,class:t.normalizeClass([a.tab.icon?a.tab.icon:"","wizard-icon"]),style:t.normalizeStyle(a.tab.checked?n.iconActiveStyle:"")},t.toDisplayString(a.tab.icon?null:a.index+1),7))])],14,k),t.renderSlot(e.$slots,"title",{},()=>[t.createElementVNode("span",{class:t.normalizeClass(["stepTitle",{active:a.tab.active,has_error:a.tab.validationError}]),style:t.normalizeStyle([a.tab.active||a.tab.checked?n.stepTitleStyle:{},{"margin-top":"5px"}])},t.toDisplayString(a.tab.title),7)]),t.renderSlot(e.$slots,"customIcon")],2)],2)}const b=c(p,[["render",I]]);function B(){return document.activeElement.id}function T(e=[]){let i=B();return e.findIndex(s=>s.tabId===i)}function m(e){document.getElementById(e).focus()}function w(e){return e.then&&typeof e.then=="function"}const G="",_={name:"form-wizard",components:{WizardButton:h,WizardStep:b},props:{id:{type:String,default:"fw_"+new Date().valueOf()},title:{type:String,default:"Awesome Wizard"},subtitle:{type:String,default:"Split a complicated flow in multiple steps"},nextButtonText:{type:String,default:"Next"},backButtonText:{type:String,default:"Back"},finishButtonText:{type:String,default:"Finish"},hideButtons:{type:Boolean,default:!1},validateOnBack:Boolean,color:{type:String,default:"#e74c3c"},errorColor:{type:String,default:"#8b0000"},shape:{type:String,default:"circle"},layout:{type:String,default:"horizontal"},stepsClasses:{type:[String,Array],default:""},stepSize:{type:String,default:"md",validator:e=>["xs","sm","md","lg"].indexOf(e)!==-1},transition:{type:String,default:""},startIndex:{type:Number,default:0,validator:e=>e>=0}},provide(){return{addTab:this.addTab,removeTab:this.removeTab}},data(){return{activeTabIndex:0,currentPercentage:0,maxStep:0,loading:!1,tabs:[]}},computed:{slotProps(){return{nextTab:this.nextTab,prevTab:this.prevTab,activeTabIndex:this.activeTabIndex,isLastStep:this.isLastStep,fillButtonStyle:this.fillButtonStyle}},tabCount(){return this.tabs.length},isLastStep(){return this.activeTabIndex===this.tabCount-1},isVertical(){return this.layout==="vertical"},displayPrevButton(){return this.activeTabIndex!==0},stepPercentage(){return 1/(this.tabCount*2)*100},progressBarStyle(){return{backgroundColor:this.color,width:`${this.progress}%`,color:this.color}},fillButtonStyle(){return{backgroundColor:this.color,borderColor:this.color,color:"white"}},progress(){let e=0;if(this.activeTabIndex>0){let i=1,a=2;e=this.stepPercentage*(this.activeTabIndex*a+i)}else e=this.stepPercentage;return e}},methods:{emitTabChange(e,i){this.$emit("on-change",e,i),this.$emit("update:startIndex",i)},addTab(e){const i=this.tabCount;e.tabId=`${e.title.replace(/ /g,"")}${i}`,this.tabs.splice(i,0,e),i<this.activeTabIndex+1&&(this.maxStep=i,this.changeTab(this.activeTabIndex+1,i))},removeTab(e){const i=this.tabs,a=i.indexOf(e);a>-1&&(a===this.activeTabIndex&&(this.maxStep=this.activeTabIndex-1,this.changeTab(this.activeTabIndex,this.activeTabIndex-1)),a<this.activeTabIndex&&(this.maxStep=this.activeTabIndex-1,this.activeTabIndex=this.activeTabIndex-1,this.emitTabChange(this.activeTabIndex+1,this.activeTabIndex)),i.splice(a,1))},reset(){this.maxStep=0,this.tabs.forEach(e=>{e.checked=!1}),this.navigateToTab(0)},activateAll(){this.maxStep=this.tabs.length-1,this.tabs.forEach(e=>{e.checked=!0})},navigateToTab(e){let i=e>this.activeTabIndex;if(e<=this.maxStep){let a=()=>{i&&e-this.activeTabIndex>1?(this.changeTab(this.activeTabIndex,this.activeTabIndex+1),this.beforeTabChange(this.activeTabIndex,a)):(this.changeTab(this.activeTabIndex,e),this.afterTabChange(this.activeTabIndex))};i?this.beforeTabChange(this.activeTabIndex,a):(this.setValidationError(null),a())}return e<=this.maxStep},nextTab(){let e=()=>{this.activeTabIndex<this.tabCount-1?(this.changeTab(this.activeTabIndex,this.activeTabIndex+1),this.afterTabChange(this.activeTabIndex)):this.$emit("on-complete")};this.beforeTabChange(this.activeTabIndex,e)},prevTab(){let e=()=>{this.activeTabIndex>0&&(this.setValidationError(null),this.changeTab(this.activeTabIndex,this.activeTabIndex-1))};this.validateOnBack?this.beforeTabChange(this.activeTabIndex,e):e()},focusNextTab(){let e=T(this.tabs);if(e!==-1&&e<this.tabs.length-1){let i=this.tabs[e+1];i.checked&&m(i.tabId)}},focusPrevTab(){let e=T(this.tabs);if(e!==-1&&e>0){let i=this.tabs[e-1].tabId;m(i)}},setLoading(e){this.loading=e,this.$emit("on-loading",e)},setValidationError(e){this.tabs[this.activeTabIndex].validationError=e,this.$emit("on-error",e)},validateBeforeChange(e,i){if(this.setValidationError(null),w(e))this.setLoading(!0),e.then(a=>{this.setLoading(!1);let s=a===!0;this.executeBeforeChange(s,i)}).catch(a=>{this.setLoading(!1),this.setValidationError(a)});else{let a=e===!0;this.executeBeforeChange(a,i)}},executeBeforeChange(e,i){this.$emit("on-validate",e,this.activeTabIndex),e?i():this.tabs[this.activeTabIndex].validationError="error"},beforeTabChange(e,i){if(this.loading)return;let a=this.tabs[e];if(a&&a.beforeChange!==void 0){let s=a.beforeChange();this.validateBeforeChange(s,i)}else i()},afterTabChange(e){if(this.loading)return;let i=this.tabs[e];i&&i.afterChange!==void 0&&i.afterChange()},changeTab(e,i,a=!0){let s=this.tabs[e],r=this.tabs[i];return s&&(s.active=!1),r&&(r.active=!0),a&&this.activeTabIndex!==i&&this.emitTabChange(e,i),this.activeTabIndex=i,this.activateTabAndCheckStep(this.activeTabIndex),!0},tryChangeRoute(e){this.$router&&e.route&&this.$router.push(e.route)},checkRouteChange(e){let i=-1,a=this.tabs.find((s,r)=>{let n=s.route===e;return n&&(i=r),n});if(a&&!a.active){const s=i>this.activeTabIndex;this.navigateToTab(i,s)}},deactivateTabs(){this.tabs.forEach(e=>{e.active=!1})},activateTab(e){this.deactivateTabs();let i=this.tabs[e];i&&(i.active=!0,i.checked=!0,this.tryChangeRoute(i))},activateTabAndCheckStep(e){this.activateTab(e),e>this.maxStep&&(this.maxStep=e),this.activeTabIndex=e},initializeTabs(){this.tabs.length>0&&this.startIndex===0&&this.activateTab(this.activeTabIndex),this.startIndex<this.tabs.length?this.activateTabAndCheckStep(this.startIndex):window.console.warn(`Prop startIndex set to ${this.startIndex} is greater than the number of tabs - ${this.tabs.length}. Make sure that the starting index is less than the number of tabs registered`)}},mounted(){this.initializeTabs()},watch:{"$route.path"(e){this.checkRouteChange(e)}}},E=["id"],v={key:0,class:"wizard-header"},P={class:"wizard-title"},V={class:"category"},N={class:"wizard-navigation"},A={key:0,class:"wizard-progress-with-circle"},L={class:"wizard-tab-content"},R={key:1,class:"wizard-card-footer clearfix"},F={class:"wizard-footer-left"},K={class:"wizard-footer-right"};function D(e,i,a,s,r,n){const q=t.resolveComponent("wizard-step"),f=t.resolveComponent("wizard-button");return t.openBlock(),t.createElementBlock("div",{id:a.id?a.id:"",class:t.normalizeClass(["vue-form-wizard",[a.stepSize,{vertical:n.isVertical}]]),onKeyup:[i[6]||(i[6]=t.withKeys((...l)=>n.focusNextTab&&n.focusNextTab(...l),["right"])),i[7]||(i[7]=t.withKeys((...l)=>n.focusPrevTab&&n.focusPrevTab(...l),["left"]))]},[e.$slots.title?(t.openBlock(),t.createElementBlock("div",v,[t.renderSlot(e.$slots,"title",{},()=>[t.createElementVNode("h4",P,t.toDisplayString(a.title),1),t.createElementVNode("p",V,t.toDisplayString(a.subtitle),1)])])):t.createCommentVNode("",!0),t.createElementVNode("div",N,[n.isVertical?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("div",A,[t.createElementVNode("div",{class:"wizard-progress-bar",style:t.normalizeStyle(n.progressBarStyle)},null,4)])),t.createElementVNode("ul",{class:t.normalizeClass(["wizard-nav wizard-nav-pills",a.stepsClasses]),role:"tablist"},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(r.tabs,(l,d)=>t.renderSlot(e.$slots,"step",{tab:l,index:d,navigateToTab:n.navigateToTab,stepSize:a.stepSize,transition:a.transition},()=>[t.createVNode(q,{tab:l,"step-size":a.stepSize,onClick:H=>n.navigateToTab(d),onKeyup:t.withKeys(H=>n.navigateToTab(d),["enter"]),transition:a.transition,index:d},null,8,["tab","step-size","onClick","onKeyup","transition","index"])])),256))],2),t.createElementVNode("div",L,[t.renderSlot(e.$slots,"default",t.normalizeProps(t.guardReactiveProps(n.slotProps)))])]),a.hideButtons?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("div",R,[t.renderSlot(e.$slots,"footer",t.normalizeProps(t.guardReactiveProps(n.slotProps)),()=>[t.createElementVNode("div",F,[n.displayPrevButton?(t.openBlock(),t.createElementBlock("span",{key:0,onClick:i[0]||(i[0]=(...l)=>n.prevTab&&n.prevTab(...l)),onKeyup:i[1]||(i[1]=t.withKeys((...l)=>n.prevTab&&n.prevTab(...l),["enter"])),role:"button",tabindex:"0"},[t.renderSlot(e.$slots,"prev",t.normalizeProps(t.guardReactiveProps(n.slotProps)),()=>[t.createVNode(f,{style:t.normalizeStyle(n.fillButtonStyle),disabled:r.loading},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(a.backButtonText),1)]),_:1},8,["style","disabled"])])],32)):t.createCommentVNode("",!0),t.renderSlot(e.$slots,"custom-buttons-left",t.normalizeProps(t.guardReactiveProps(n.slotProps)))]),t.createElementVNode("div",K,[t.renderSlot(e.$slots,"custom-buttons-right",t.normalizeProps(t.guardReactiveProps(n.slotProps))),n.isLastStep?(t.openBlock(),t.createElementBlock("span",{key:0,onClick:i[2]||(i[2]=(...l)=>n.nextTab&&n.nextTab(...l)),onKeyup:i[3]||(i[3]=t.withKeys((...l)=>n.nextTab&&n.nextTab(...l),["enter"])),role:"button",tabindex:"0"},[t.renderSlot(e.$slots,"finish",t.normalizeProps(t.guardReactiveProps(n.slotProps)),()=>[t.createVNode(f,{style:t.normalizeStyle(n.fillButtonStyle)},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(a.finishButtonText),1)]),_:1},8,["style"])])],32)):(t.openBlock(),t.createElementBlock("span",{key:1,onClick:i[4]||(i[4]=(...l)=>n.nextTab&&n.nextTab(...l)),onKeyup:i[5]||(i[5]=t.withKeys((...l)=>n.nextTab&&n.nextTab(...l),["enter"])),role:"button",tabindex:"0"},[t.renderSlot(e.$slots,"next",t.normalizeProps(t.guardReactiveProps(n.slotProps)),()=>[t.createVNode(f,{style:t.normalizeStyle(n.fillButtonStyle),disabled:r.loading},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(a.nextButtonText),1)]),_:1},8,["style","disabled"])])],32))])])]))],42,E)}const g=c(_,[["render",D]]),O={name:"tab-content",props:{title:{type:String,default:""},icon:{type:String,default:""},customIcon:{type:String,default:""},lazy:{type:Boolean,default:!1},beforeChange:{type:Function},afterChange:{type:Function},route:{type:[String,Object]},additionalInfo:{type:Object,default:()=>{}}},inject:["addTab","removeTab"],data(){return{active:!1,validationError:null,checked:!1,tabId:""}},computed:{shape(){return this.$parent.shape},color(){return this.$parent.color},errorColor(){return this.$parent.errorColor}},mounted(){this.addTab(this)},destroyed(){this.$el&&this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el),this.removeTab(this)}},W=["id","aria-hidden","aria-labelledby"];function M(e,i,a,s,r,n){return!a.lazy||r.active?t.withDirectives((t.openBlock(),t.createElementBlock("div",{key:0,class:"wizard-tab-container",role:"tabpanel",id:r.tabId,"aria-hidden":!r.active,"aria-labelledby":`step-${r.tabId}`},[t.renderSlot(e.$slots,"default",{active:r.active}),t.renderSlot(e.$slots,"customIcon")],8,W)),[[t.vShow,r.active]]):t.createCommentVNode("",!0)}const y=c(O,[["render",M]]),j={install(e){e.component("form-wizard",g),e.component("tab-content",y),e.component("wizard-button",h),e.component("wizard-step",b)}};o.FormWizard=g,o.TabContent=y,o.WizardButton=h,o.WizardStep=b,o.default=j,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package.json

@@ -5,3 +5,3 @@ {
   "author": "parsa jiravand",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "vue3-form-wizard is a vue based component with no external depenendcies which simplifies tab wizard management.",
@@ -8,0 +8,0 @@ "license": "MIT",

No alert changes

Worsened metrics

Total package byte prevSize

57943

decreased by-0.05%

No dependency changes