form-wizard-vue3 - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

dist/form-wizard-vue3.es.js

@@ -21,2 +21,6 @@ import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, normalizeClass, unref, renderSlot, toDisplayString, ref, onMounted, Fragment, renderList, createBlock, createCommentVNode, nextTick } from "vue";
       default: 0
+    },
+    squaredTab: {
+      type: Boolean,
+      default: false
     }
@@ -39,3 +43,4 @@ },
                 "fw-step-active": __props.tab.active,
-                "fw-step-checked": __props.tab.checked
+                "fw-step-checked": __props.tab.checked,
+                "fw-squared-tab": __props.squaredTab
               }
@@ -166,2 +171,6 @@ ]]),
       default: false
+    },
+    squaredTabs: {
+      type: Boolean,
+      default: false
     }
@@ -277,4 +286,5 @@ },
               currentIndex: currentTabIndex.value,
+              squaredTab: __props.squaredTabs,
               onClick: ($event) => navigateToTab(index)
-            }, null, 8, ["tab", "index", "currentIndex", "onClick"]);
+            }, null, 8, ["tab", "index", "currentIndex", "squaredTab", "onClick"]);
           }), 128))
@@ -281,0 +291,0 @@ ]),

dist/form-wizard-vue3.umd.js

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

package.json

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

src/types/wizard.ts

@@ -30,2 +30,3 @@ export interface Tab {
   beforeMount: Function
+  squaredTabs: boolean
 }

No alert changes

Improved metrics

Total package byte prevSize

424960

increased by0.17%

Lines of code

1944

increased by0.67%

No dependency changes