form-wizard-vue3 - npm Package Compare versions

Comparing version 0.2.2 to 0.3.2

dist/form-wizard-vue3.es.js

@@ -8,2 +8,3 @@ import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, normalizeClass, unref, renderSlot, toDisplayString, ref, onMounted, Fragment, renderList, createBlock, createCommentVNode, nextTick } from "vue";
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "WizardStep",
   props: {
@@ -31,3 +32,3 @@ tab: {
     const progressActive = computed(() => props.currentIndex > props.index);
-    const iconClass = computed(() => `bi bi-${props.tab.icon}`);
+    const iconClass = computed(() => `pi pi-${props.tab.icon}`);
     return (_ctx, _cache) => {
@@ -92,2 +93,3 @@ return openBlock(), createElementBlock("li", null, [
 const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Wizard",
   props: {
@@ -114,3 +116,3 @@ id: {
           title: "Step 3",
-          icon: "pen"
+          icon: "pencil"
         }
@@ -185,20 +187,29 @@ ]
     let tabs = ref([]);
-    const backButtonOptions = Object.assign({
-      text: "Back",
-      icon: "arrow-left",
-      hideText: false,
-      hideIcon: false
-    }, props.backButton);
-    const nextButtonOptions = Object.assign({
-      text: "Next",
-      icon: "arrow-right",
-      hideText: false,
-      hideIcon: false
-    }, props.nextButton);
-    const doneButtonOptions = Object.assign({
-      text: "Done",
-      icon: "arrow-right",
-      hideText: false,
-      hideIcon: false
-    }, props.doneButton);
+    const backButtonOptions = Object.assign(
+      {
+        text: "Back",
+        icon: "arrow-left",
+        hideText: false,
+        hideIcon: false
+      },
+      props.backButton
+    );
+    const nextButtonOptions = Object.assign(
+      {
+        text: "Next",
+        icon: "arrow-right",
+        hideText: false,
+        hideIcon: false
+      },
+      props.nextButton
+    );
+    const doneButtonOptions = Object.assign(
+      {
+        text: "Done",
+        icon: "arrow-right",
+        hideText: false,
+        hideIcon: false
+      },
+      props.doneButton
+    );
     onMounted(() => {
@@ -271,3 +282,3 @@ setDefaultValues();
     };
-    const getIconClass = (iconName) => `bi bi-${iconName}`;
+    const getIconClass = (iconName) => `pi pi-${iconName}`;
     return (_ctx, _cache) => {
@@ -274,0 +285,0 @@ return openBlock(), createElementBlock("div", {

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"],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"}})});
+(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({__name:"WizardStep",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(()=>`pi pi-${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"},S={class:"fw-body-container"},I={key:0,class:"fw-footer"},$={class:"fw-footer-left"},z={class:"fw-btn fw-btn-back"},_={key:0},O={class:"fw-footer-right"},j={class:"fw-btn"},q={key:0},D={class:"fw-btn"},M={key:0},W=e.defineComponent({__name:"Wizard",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:"pencil"}]},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),p=Object.assign({text:"Done",icon:"arrow-right",hideText:!1,hideIcon:!1},a.doneButton);e.onMounted(()=>{L()});const A=e.computed(()=>n.value!==0),F=e.computed(()=>n.value===r.value),L=()=>{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(),u(t)},P=async()=>{if(n.value===0)return;const t=n.value-1,l=n.value;s("change",t,l),await a.beforeChange(),u(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(),u(l)},u=async t=>{n.value=t,h(),await e.nextTick(),await a.beforeMount()},m=t=>`pi pi-${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",S,[e.renderSlot(t.$slots,"default")])]),o.hideButtons?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",I,[e.renderSlot(t.$slots,"footer",{},()=>[e.createElementVNode("div",$,[e.unref(A)?(e.openBlock(),e.createElementBlock("span",{key:0,role:"button",onClick:P},[e.renderSlot(t.$slots,"back",{},()=>[e.createElementVNode("button",z,[e.createElementVNode("i",{class:e.normalizeClass(m(e.unref(f).icon))},null,2),e.unref(f).hideText?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",_,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(F)?(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",q,e.toDisplayString(e.unref(p).text),1)),e.createElementVNode("i",{class:e.normalizeClass(m(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",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(m(e.unref(b).icon))},null,2)])])]))])])]))])],10,E))}});c.default=W,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package.json

 {
   "name": "form-wizard-vue3",
-  "version": "0.2.2",
+  "version": "0.3.2",
   "main": "./dist/form-wizard-vue3.umd.js",
@@ -12,3 +12,6 @@ "module": "./dist/form-wizard-vue3.es.js",
     "test": "vitest",
-    "coverage": "vitest run --coverage"
+    "coverage": "vitest run --coverage",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:serve": "vitepress serve docs"
   },
@@ -33,10 +36,11 @@ "keywords": [
     "jsdom": "^19.0.0",
+    "path": "^0.12.7",
+    "primeicons": "^5.0.0",
     "sass": "^1.52.0",
     "typescript": "^4.5.4",
     "vite": "^2.9.9",
+    "vitepress": "^1.0.0-alpha.12",
     "vitest": "0.12.9",
-    "vue-tsc": "^0.34.7",
-    "bootstrap-icons": "^1.8.3",
-    "path": "^0.12.7",
-    "vue": "^3.2.25"
+    "vue": "^3.2.25",
+    "vue-tsc": "^0.34.7"
   },
@@ -43,0 +47,0 @@ "license": "MIT",

No alert changes

Improved metrics

Total package byte prevSize

765485

increased by80.09%

Lines of code

3283

increased by68.88%

Worsened metrics

Dev dependency count

15

increased by7.14%

No dependency changes