form-wizard-vue3 - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/form-wizard-vue3.es.js

@@ -37,3 +37,4 @@ import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, normalizeClass, unref, renderSlot, toDisplayString, ref, onMounted, Fragment, renderList, createBlock, createCommentVNode } from "vue";
               {
-                "fw-step-active": __props.tab.active
+                "fw-step-active": __props.tab.active,
+                "fw-step-checked": __props.tab.checked
               }
@@ -225,3 +226,4 @@ ]]),
         }
-        tab.active = index <= currentTabIndex.value;
+        tab.checked = index < currentTabIndex.value;
+        tab.active = index === currentTabIndex.value;
       }
@@ -228,0 +230,0 @@ };

dist/form-wizard-vue3.umd.js

@@ -1,1 +0,1 @@
-(function(s,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis!="undefined"?globalThis:s||self,e(s["form-wizard-vue3"]={},s.Vue))})(this,function(s,e){"use strict";var H="";const B={class:"fw-list-wrapper"},y=["id"],g={class:"fw-step-container"},w={key:1},E=e.defineComponent({props:{tab:{type:Object,default:()=>{}},index:{type:Number,default:0},currentIndex:{type:Number,default:0}},setup(n){const a=n,l=e.computed(()=>a.currentIndex>a.index),c=e.computed(()=>`bi bi-${a.tab.icon}`);return(t,r)=>(e.openBlock(),e.createElementBlock("li",null,[e.createElementVNode("div",{class:e.normalizeClass(["fw-list-progress",{"fw-list-progress-active":e.unref(l)}])},null,2),e.createElementVNode("div",B,[e.createElementVNode("div",{id:`step-${n.tab.id}`,class:e.normalizeClass(["fw-list-wrapper-icon",[{"fw-step-active":n.tab.active}]]),role:"tab"},[e.createElementVNode("div",g,[e.renderSlot(t.$slots,"active-step",{},()=>[a.tab.icon?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(e.unref(c))},null,2)):(e.openBlock(),e.createElementBlock("i",w,e.toDisplayString(n.index+1),1))])])],10,y),e.renderSlot(t.$slots,"title",{},()=>[e.createElementVNode("span",{class:e.normalizeClass(["fw-step-title",{active:n.tab.active}])},e.toDisplayString(n.tab.title),3)])])]))}}),x=["id"],C={class:"fw-body-list",role:"tablist"},N={class:"fw-body"},V={class:"fw-body-content"},T={class:"fw-body-container"},S={key:0,class:"fw-footer"},$={class:"fw-footer-left"},_={class:"fw-btn fw-btn-back"},z={key:0},I={class:"fw-footer-right"},O={class:"fw-btn"},j={key:0},D={class:"fw-btn"},W={key:0},A=e.defineComponent({props:{id:{type:String,default:"fw-"+new Date().valueOf()},customTabs:{type:Array,default:()=>[{id:0,title:"Step 1",icon:"map"},{id:1,title:"Step 2",icon:"check"},{id:2,title:"Step 3",icon:"pen"}]},nextButton:{type:Object,default:function(){return{}}},backButton:{type:Object,default:function(){return{}}},doneButton:{type:Object,default:function(){return{}}},hideButtons:{type:Boolean,default:!1},startIndex:{type:Number,default:0,validator:n=>n>=0},verticalTabs:{type:Boolean,default:!1},beforeChange:{type:Function,default:()=>{}},navigableTabs:{type:Boolean,default:!1},scrollableTabs:{type:Boolean,default:!1},cardBackground:{type:Boolean,default:!1}},emits:["change","completeWizard"],setup(n,{emit:a}){const l=n;let c=e.ref(),t=e.ref(0),r=e.ref([]);const d=Object.assign({text:"Back",icon:"arrow-left",hideText:!1,hideIcon:!1},l.backButton),f=Object.assign({text:"Next",icon:"arrow-right",hideText:!1,hideIcon:!1},l.nextButton),m=Object.assign({text:"Done",icon:"arrow-right",hideText:!1,hideIcon:!1},l.doneButton);e.onMounted(()=>{L()});const M=e.computed(()=>t.value!==0),F=e.computed(()=>t.value===c.value),L=()=>{r.value=l.customTabs,c.value=r.value.length-1,t.value=l.startIndex,i(),a("change",t.value)},p=()=>{if(t.value===c.value){q();return}t.value=t.value+1,i(),l.beforeChange(),a("change",t.value)},P=()=>{t.value!==0&&(t.value=t.value-1,i(),l.beforeChange(),a("change",t.value))},i=()=>{for(const[o,u]of r.value.entries()){if(o===c.value+1)return;u.active=o<=t.value}},q=()=>{a("completeWizard",t.value)},G=o=>{!l.navigableTabs||(t.value=o,i(),l.beforeChange(),a("change",t.value))},b=o=>`bi bi-${o}`;return(o,u)=>(e.openBlock(),e.createElementBlock("div",{id:n.id,class:e.normalizeClass(["form-wizard-vue",[{"fw-vertical":n.verticalTabs},{"fw-overflow-scroll":n.scrollableTabs},{"fw-card":n.cardBackground}]])},[e.createElementVNode("ul",C,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value,(k,h)=>(e.openBlock(),e.createBlock(E,{key:k.id,tab:k,index:h,currentIndex:t.value,onClick:J=>G(h)},null,8,["tab","index","currentIndex","onClick"]))),128))]),e.createElementVNode("div",N,[e.createElementVNode("div",V,[e.createElementVNode("div",T,[e.renderSlot(o.$slots,"default")])]),n.hideButtons?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",S,[e.renderSlot(o.$slots,"footer",{},()=>[e.createElementVNode("div",$,[e.unref(M)?(e.openBlock(),e.createElementBlock("span",{key:0,role:"button",onClick:P},[e.renderSlot(o.$slots,"back",{},()=>[e.createElementVNode("button",_,[e.createElementVNode("i",{class:e.normalizeClass(b(e.unref(d).icon))},null,2),e.unref(d).hideText?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",z,e.toDisplayString(e.unref(d).text),1))])])])):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"custom-buttons-left")]),e.createElementVNode("div",I,[e.renderSlot(o.$slots,"custom-buttons-right"),e.unref(F)?(e.openBlock(),e.createElementBlock("span",{key:0,role:"button",onClick:p},[e.renderSlot(o.$slots,"done",{},()=>[e.createElementVNode("button",O,[e.unref(m).hideText?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",j,e.toDisplayString(e.unref(m).text),1)),e.createElementVNode("i",{class:e.normalizeClass(b(e.unref(m).icon))},null,2)])])])):(e.openBlock(),e.createElementBlock("span",{key:1,role:"button",onClick:p},[e.renderSlot(o.$slots,"next",{},()=>[e.createElementVNode("button",D,[e.unref(f).hideText?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",W,e.toDisplayString(e.unref(f).text),1)),e.createElementVNode("i",{class:e.normalizeClass(b(e.unref(f).icon))},null,2)])])]))])])]))])],10,x))}});s.default=A,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(s,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis!="undefined"?globalThis:s||self,e(s["form-wizard-vue3"]={},s.Vue))})(this,function(s,e){"use strict";var H="";const B={class:"fw-list-wrapper"},y=["id"],g={class:"fw-step-container"},w={key:1},E=e.defineComponent({props:{tab:{type:Object,default:()=>{}},index:{type:Number,default:0},currentIndex:{type:Number,default:0}},setup(n){const a=n,l=e.computed(()=>a.currentIndex>a.index),c=e.computed(()=>`bi bi-${a.tab.icon}`);return(t,r)=>(e.openBlock(),e.createElementBlock("li",null,[e.createElementVNode("div",{class:e.normalizeClass(["fw-list-progress",{"fw-list-progress-active":e.unref(l)}])},null,2),e.createElementVNode("div",B,[e.createElementVNode("div",{id:`step-${n.tab.id}`,class:e.normalizeClass(["fw-list-wrapper-icon",[{"fw-step-active":n.tab.active,"fw-step-checked":n.tab.checked}]]),role:"tab"},[e.createElementVNode("div",g,[e.renderSlot(t.$slots,"active-step",{},()=>[a.tab.icon?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass(e.unref(c))},null,2)):(e.openBlock(),e.createElementBlock("i",w,e.toDisplayString(n.index+1),1))])])],10,y),e.renderSlot(t.$slots,"title",{},()=>[e.createElementVNode("span",{class:e.normalizeClass(["fw-step-title",{active:n.tab.active}])},e.toDisplayString(n.tab.title),3)])])]))}}),x=["id"],C={class:"fw-body-list",role:"tablist"},N={class:"fw-body"},V={class:"fw-body-content"},T={class:"fw-body-container"},S={key:0,class:"fw-footer"},$={class:"fw-footer-left"},_={class:"fw-btn fw-btn-back"},z={key:0},I={class:"fw-footer-right"},O={class:"fw-btn"},j={key:0},D={class:"fw-btn"},W={key:0},A=e.defineComponent({props:{id:{type:String,default:"fw-"+new Date().valueOf()},customTabs:{type:Array,default:()=>[{id:0,title:"Step 1",icon:"map"},{id:1,title:"Step 2",icon:"check"},{id:2,title:"Step 3",icon:"pen"}]},nextButton:{type:Object,default:function(){return{}}},backButton:{type:Object,default:function(){return{}}},doneButton:{type:Object,default:function(){return{}}},hideButtons:{type:Boolean,default:!1},startIndex:{type:Number,default:0,validator:n=>n>=0},verticalTabs:{type:Boolean,default:!1},beforeChange:{type:Function,default:()=>{}},navigableTabs:{type:Boolean,default:!1},scrollableTabs:{type:Boolean,default:!1},cardBackground:{type:Boolean,default:!1}},emits:["change","completeWizard"],setup(n,{emit:a}){const l=n;let c=e.ref(),t=e.ref(0),r=e.ref([]);const d=Object.assign({text:"Back",icon:"arrow-left",hideText:!1,hideIcon:!1},l.backButton),f=Object.assign({text:"Next",icon:"arrow-right",hideText:!1,hideIcon:!1},l.nextButton),b=Object.assign({text:"Done",icon:"arrow-right",hideText:!1,hideIcon:!1},l.doneButton);e.onMounted(()=>{L()});const M=e.computed(()=>t.value!==0),F=e.computed(()=>t.value===c.value),L=()=>{r.value=l.customTabs,c.value=r.value.length-1,t.value=l.startIndex,i(),a("change",t.value)},u=()=>{if(t.value===c.value){q();return}t.value=t.value+1,i(),l.beforeChange(),a("change",t.value)},P=()=>{t.value!==0&&(t.value=t.value-1,i(),l.beforeChange(),a("change",t.value))},i=()=>{for(const[o,p]of r.value.entries()){if(o===c.value+1)return;p.checked=o<t.value,p.active=o===t.value}},q=()=>{a("completeWizard",t.value)},G=o=>{!l.navigableTabs||(t.value=o,i(),l.beforeChange(),a("change",t.value))},m=o=>`bi bi-${o}`;return(o,p)=>(e.openBlock(),e.createElementBlock("div",{id:n.id,class:e.normalizeClass(["form-wizard-vue",[{"fw-vertical":n.verticalTabs},{"fw-overflow-scroll":n.scrollableTabs},{"fw-card":n.cardBackground}]])},[e.createElementVNode("ul",C,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value,(k,h)=>(e.openBlock(),e.createBlock(E,{key:k.id,tab:k,index:h,currentIndex:t.value,onClick:J=>G(h)},null,8,["tab","index","currentIndex","onClick"]))),128))]),e.createElementVNode("div",N,[e.createElementVNode("div",V,[e.createElementVNode("div",T,[e.renderSlot(o.$slots,"default")])]),n.hideButtons?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",S,[e.renderSlot(o.$slots,"footer",{},()=>[e.createElementVNode("div",$,[e.unref(M)?(e.openBlock(),e.createElementBlock("span",{key:0,role:"button",onClick:P},[e.renderSlot(o.$slots,"back",{},()=>[e.createElementVNode("button",_,[e.createElementVNode("i",{class:e.normalizeClass(m(e.unref(d).icon))},null,2),e.unref(d).hideText?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",z,e.toDisplayString(e.unref(d).text),1))])])])):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"custom-buttons-left")]),e.createElementVNode("div",I,[e.renderSlot(o.$slots,"custom-buttons-right"),e.unref(F)?(e.openBlock(),e.createElementBlock("span",{key:0,role:"button",onClick:u},[e.renderSlot(o.$slots,"done",{},()=>[e.createElementVNode("button",O,[e.unref(b).hideText?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",j,e.toDisplayString(e.unref(b).text),1)),e.createElementVNode("i",{class:e.normalizeClass(m(e.unref(b).icon))},null,2)])])])):(e.openBlock(),e.createElementBlock("span",{key:1,role:"button",onClick:u},[e.renderSlot(o.$slots,"next",{},()=>[e.createElementVNode("button",D,[e.unref(f).hideText?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",W,e.toDisplayString(e.unref(f).text),1)),e.createElementVNode("i",{class:e.normalizeClass(m(e.unref(f).icon))},null,2)])])]))])])]))])],10,x))}});s.default=A,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package.json

 {
   "name": "form-wizard-vue3",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "main": "./dist/form-wizard-vue3.umd.js",
@@ -5,0 +5,0 @@ "module": "./dist/form-wizard-vue3.es.js",

README.md

 # Form Wizard Vue3
 
-Form Wizard Vue 3 is a simple stepper/wizard component. It can be easily customized, has no dependencies, works in harmony with your libraries.
+Form Wizard Vue 3 is a simple stepper/wizard component. It can be easily customized, has no dependencies, works in harmony with your components.
 [![Coverage Status](https://codecov.io/gh/bahadirsofuoglu/form-wizard-vue3/branch/master/graph/badge.svg)](https://codecov.io/gh/bahadirsofuoglu/form-wizard-vue3)
@@ -10,3 +10,3 @@
 
-- **Apı Documentation - Coming soon...**
+- **Documentation - coming soon**
 - **[Live Demo](https://stackblitz.com/edit/vue-1bngkw?file=src/App.vue)**
@@ -13,0 +13,0 @@

src/types/wizard.ts

@@ -6,2 +6,3 @@ export interface Tab {
   active?: boolean
+  checked?: boolean
 }
@@ -8,0 +9,0 @@

No alert changes

Improved metrics

Total package byte prevSize

422710

increased by0.11%

Lines of code

1912

increased by0.16%

No dependency changes