form-wizard-vue3 - npm Package Compare versions

Comparing version 0.3.3 to 1.0.0

dist/form-wizard-vue3.es.js

@@ -1,8 +0,3 @@
-import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, normalizeClass, unref, renderSlot, toDisplayString, ref, onMounted, Fragment, renderList, createBlock, createCommentVNode, nextTick } from "vue";
-var formWizardVue3 = "";
-const _hoisted_1$1 = { class: "fw-list-wrapper" };
-const _hoisted_2$1 = ["id"];
-const _hoisted_3$1 = { class: "fw-step-container" };
-const _hoisted_4$1 = { key: 1 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+import { defineComponent as k, computed as u, openBlock as l, createElementBlock as c, normalizeClass as p, unref as f, createCommentVNode as h, createElementVNode as i, renderSlot as d, toDisplayString as x, ref as y, onMounted as V, Fragment as D, renderList as W, createBlock as A, createVNode as g, nextTick as F } from "vue";
+const M = { class: "fw-list-wrapper" }, E = ["id"], L = { class: "fw-step-container" }, G = { key: 1 }, H = /* @__PURE__ */ k({
   __name: "WizardStep",
@@ -25,68 +20,81 @@ props: {
       type: Boolean,
-      default: false
+      default: !1
+    },
+    showProgress: {
+      type: Boolean,
+      default: !0
     }
   },
-  setup(__props) {
-    const props = __props;
-    const progressActive = computed(() => props.currentIndex > props.index);
-    const iconClass = computed(() => `pi pi-${props.tab.icon}`);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("li", null, [
-        createElementVNode("div", {
-          class: normalizeClass(["fw-list-progress", { "fw-list-progress-active": unref(progressActive) }])
-        }, null, 2),
-        createElementVNode("div", _hoisted_1$1, [
-          createElementVNode("div", {
-            id: `step-${__props.tab.id}`,
-            class: normalizeClass(["fw-list-wrapper-icon", [
-              {
-                "fw-step-active": __props.tab.active,
-                "fw-step-checked": __props.tab.checked,
-                "fw-squared-tab": __props.squaredTab
-              }
-            ]]),
-            role: "tab"
-          }, [
-            createElementVNode("div", _hoisted_3$1, [
-              renderSlot(_ctx.$slots, "active-step", {}, () => [
-                props.tab.icon ? (openBlock(), createElementBlock("i", {
-                  key: 0,
-                  class: normalizeClass(unref(iconClass))
-                }, null, 2)) : (openBlock(), createElementBlock("i", _hoisted_4$1, toDisplayString(__props.index + 1), 1))
-              ])
+  setup(e) {
+    const s = e, n = u(() => s.currentIndex > s.index), r = u(() => `pi pi-${s.tab.icon}`);
+    return (t, b) => (l(), c("li", null, [
+      e.showProgress ? (l(), c("div", {
+        key: 0,
+        class: p(["fw-list-progress", { "fw-list-progress-active": f(n) }])
+      }, null, 2)) : h("", !0),
+      i("div", M, [
+        i("div", {
+          id: `step-${e.tab.id}`,
+          class: p(["fw-list-wrapper-icon", [
+            {
+              "fw-step-active": e.tab.active,
+              "fw-step-checked": e.tab.checked,
+              "fw-squared-tab": e.squaredTab
+            }
+          ]]),
+          role: "tab"
+        }, [
+          i("div", L, [
+            d(t.$slots, "active-step", {}, () => [
+              s.tab.icon ? (l(), c("i", {
+                key: 0,
+                class: p(f(r))
+              }, null, 2)) : (l(), c("i", G, x(e.index + 1), 1))
             ])
-          ], 10, _hoisted_2$1),
-          renderSlot(_ctx.$slots, "title", {}, () => [
-            createElementVNode("span", {
-              class: normalizeClass(["fw-step-title", {
-                active: __props.tab.active
-              }])
-            }, toDisplayString(__props.tab.title), 3)
           ])
+        ], 10, E),
+        d(t.$slots, "title", {}, () => [
+          i("span", {
+            class: p(["fw-step-title", {
+              active: e.tab.active
+            }])
+          }, x(e.tab.title), 3)
         ])
-      ]);
-    };
+      ])
+    ]));
   }
-});
-const _hoisted_1 = ["id"];
-const _hoisted_2 = {
+}), J = ["disabled"], K = { key: 0 }, T = /* @__PURE__ */ k({
+  __name: "Button",
+  props: {
+    options: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    }
+  },
+  setup(e) {
+    const s = e, n = (t) => `pi pi-${t}`, r = u(() => [
+      "fw-btn",
+      {
+        "fw-btn-disabled": s.options.disabled
+      }
+    ]);
+    return (t, b) => (l(), c("button", {
+      class: p(f(r)),
+      disabled: e.options.disabled
+    }, [
+      e.options.hideText ? h("", !0) : (l(), c("span", K, x(e.options.text), 1)),
+      i("i", {
+        class: p(n(e.options.icon))
+      }, null, 2)
+    ], 10, J));
+  }
+}), Q = ["id"], R = {
   class: "fw-body-list",
   role: "tablist"
-};
-const _hoisted_3 = { class: "fw-body" };
-const _hoisted_4 = { class: "fw-body-content" };
-const _hoisted_5 = { class: "fw-body-container" };
-const _hoisted_6 = {
+}, U = { class: "fw-body" }, X = { class: "fw-body-content" }, Y = { class: "fw-body-container" }, Z = {
   key: 0,
   class: "fw-footer"
-};
-const _hoisted_7 = { class: "fw-footer-left" };
-const _hoisted_8 = { class: "fw-btn fw-btn-back" };
-const _hoisted_9 = { key: 0 };
-const _hoisted_10 = { class: "fw-footer-right" };
-const _hoisted_11 = { class: "fw-btn" };
-const _hoisted_12 = { key: 0 };
-const _hoisted_13 = { class: "fw-btn" };
-const _hoisted_14 = { key: 0 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+}, _ = { class: "fw-footer-left" }, ee = { class: "fw-footer-right" }, ne = /* @__PURE__ */ k({
   __name: "Wizard",
@@ -138,3 +146,3 @@ props: {
       type: Boolean,
-      default: false
+      default: !1
     },
@@ -144,9 +152,7 @@ startIndex: {
       default: 0,
-      validator: (value) => {
-        return value >= 0;
-      }
+      validator: (e) => e >= 0
     },
     verticalTabs: {
       type: Boolean,
-      default: false
+      default: !1
     },
@@ -165,201 +171,156 @@ beforeChange: {
       type: Boolean,
-      default: false
+      default: !1
     },
     scrollableTabs: {
       type: Boolean,
-      default: false
+      default: !1
     },
     cardBackground: {
       type: Boolean,
-      default: false
+      default: !1
     },
     squaredTabs: {
       type: Boolean,
-      default: false
+      default: !1
+    },
+    showProgress: {
+      type: Boolean,
+      default: !0
     }
   },
   emits: ["change", "complete:wizard", "updated:tabs"],
-  setup(__props, { emit }) {
-    const props = __props;
-    let maxTabIndex = ref();
-    let currentTabIndex = ref(0);
-    let tabs = ref([]);
-    const backButtonOptions = Object.assign(
+  setup(e, { emit: s }) {
+    const n = e;
+    let r = y(), t = y(0), b = y([]);
+    const $ = u(() => Object.assign(
       {
         text: "Back",
         icon: "arrow-left",
-        hideText: false,
-        hideIcon: false
+        hideText: !1,
+        hideIcon: !1,
+        disabled: !1
       },
-      props.backButton
-    );
-    const nextButtonOptions = Object.assign(
+      n.backButton
+    )), C = u(() => Object.assign(
       {
         text: "Next",
         icon: "arrow-right",
-        hideText: false,
-        hideIcon: false
+        hideText: !1,
+        hideIcon: !1,
+        disabled: !1
       },
-      props.nextButton
-    );
-    const doneButtonOptions = Object.assign(
+      n.nextButton
+    )), O = u(() => Object.assign(
       {
         text: "Done",
-        icon: "arrow-right",
-        hideText: false,
-        hideIcon: false
+        icon: "check",
+        hideText: !1,
+        hideIcon: !1,
+        disabled: !1
       },
-      props.doneButton
-    );
-    onMounted(() => {
-      setDefaultValues();
+      n.doneButton
+    ));
+    V(() => {
+      S();
     });
-    const displayPrevTab = computed(() => {
-      return currentTabIndex.value !== 0;
-    });
-    const isLastStep = computed(() => {
-      return currentTabIndex.value === maxTabIndex.value;
-    });
-    const setDefaultValues = () => {
-      tabs.value = props.customTabs;
-      maxTabIndex.value = tabs.value.length - 1;
-      currentTabIndex.value = props.startIndex;
-      setActiveIndex();
-      emit("change", currentTabIndex.value);
-    };
-    const nextTab = async () => {
-      if (currentTabIndex.value === maxTabIndex.value) {
-        completeWizard();
+    const j = u(() => t.value !== 0), z = u(() => t.value === r.value), S = () => {
+      b.value = n.customTabs, r.value = b.value.length - 1, t.value = n.startIndex, m(), s("change", t.value);
+    }, B = async () => {
+      if (t.value === r.value) {
+        N();
         return;
       }
-      const newTabIndex = currentTabIndex.value + 1;
-      const oldTabIndex = currentTabIndex.value;
-      emit("change", newTabIndex, oldTabIndex);
-      await props.beforeChange();
-      changeTab(newTabIndex);
-    };
-    const prevTab = async () => {
-      if (currentTabIndex.value === 0) {
+      const a = t.value + 1, o = t.value;
+      s("change", a, o), await n.beforeChange(), w(a);
+    }, q = async () => {
+      if (t.value === 0)
         return;
-      }
-      const newTabIndex = currentTabIndex.value - 1;
-      const oldTabIndex = currentTabIndex.value;
-      emit("change", newTabIndex, oldTabIndex);
-      await props.beforeChange();
-      changeTab(newTabIndex);
-    };
-    const setActiveIndex = () => {
-      for (const [index, tab] of tabs.value.entries()) {
-        if (index === maxTabIndex.value + 1) {
+      const a = t.value - 1, o = t.value;
+      s("change", a, o), await n.beforeChange(), w(a);
+    }, m = () => {
+      const a = b.value.entries();
+      for (const [o, v] of a) {
+        if (o === r.value + 1)
           return;
-        }
-        tab.checked = index < currentTabIndex.value;
-        tab.active = index === currentTabIndex.value;
+        v.checked = o < t.value, v.active = o === t.value;
       }
-      emit("updated:tabs", tabs.value, currentTabIndex.value);
-    };
-    const completeWizard = () => {
-      const newTabIndex = currentTabIndex.value;
-      const oldTabIndex = currentTabIndex.value - 1;
-      emit("complete:wizard", newTabIndex, oldTabIndex);
-    };
-    const navigateToTab = async (index) => {
-      if (!props.navigableTabs)
+      s("updated:tabs", b.value, t.value);
+    }, N = () => {
+      const a = t.value, o = t.value - 1;
+      s("complete:wizard", a, o);
+    }, P = async (a) => {
+      if (!n.navigableTabs)
         return;
-      const newTabIndex = index;
-      const oldTabIndex = currentTabIndex.value;
-      emit("change", newTabIndex, oldTabIndex);
-      await props.beforeChange();
-      changeTab(newTabIndex);
+      const o = a, v = t.value;
+      s("change", o, v), await n.beforeChange(), w(o);
+    }, w = async (a) => {
+      t.value = a, m(), await F(), await n.beforeMount();
     };
-    const changeTab = async (newTabIndex) => {
-      currentTabIndex.value = newTabIndex;
-      setActiveIndex();
-      await nextTick();
-      await props.beforeMount();
-    };
-    const getIconClass = (iconName) => `pi pi-${iconName}`;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        id: __props.id,
-        class: normalizeClass(["form-wizard-vue", [
-          { "fw-vertical": __props.verticalTabs },
-          { "fw-overflow-scroll": __props.scrollableTabs },
-          { "fw-card": __props.cardBackground }
-        ]])
-      }, [
-        createElementVNode("ul", _hoisted_2, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(tabs.value, (tab, index) => {
-            return openBlock(), createBlock(_sfc_main$1, {
-              key: tab.id,
-              tab,
-              index,
-              currentIndex: currentTabIndex.value,
-              squaredTab: __props.squaredTabs,
-              onClick: ($event) => navigateToTab(index)
-            }, null, 8, ["tab", "index", "currentIndex", "squaredTab", "onClick"]);
-          }), 128))
+    return (a, o) => (l(), c("div", {
+      id: e.id,
+      class: p(["form-wizard-vue", [
+        { "fw-vertical": e.verticalTabs },
+        { "fw-overflow-scroll": e.scrollableTabs },
+        { "fw-card": e.cardBackground }
+      ]])
+    }, [
+      i("ul", R, [
+        (l(!0), c(D, null, W(b.value, (v, I) => (l(), A(H, {
+          key: v.id,
+          tab: v,
+          index: I,
+          currentIndex: t.value,
+          squaredTab: e.squaredTabs,
+          showProgress: e.showProgress,
+          onClick: (te) => P(I)
+        }, null, 8, ["tab", "index", "currentIndex", "squaredTab", "showProgress", "onClick"]))), 128))
+      ]),
+      i("div", U, [
+        i("div", X, [
+          i("div", Y, [
+            d(a.$slots, "default")
+          ])
         ]),
-        createElementVNode("div", _hoisted_3, [
-          createElementVNode("div", _hoisted_4, [
-            createElementVNode("div", _hoisted_5, [
-              renderSlot(_ctx.$slots, "default")
+        e.hideButtons ? h("", !0) : (l(), c("div", Z, [
+          d(a.$slots, "footer", {}, () => [
+            i("div", _, [
+              f(j) ? (l(), c("span", {
+                key: 0,
+                role: "button",
+                onClick: q
+              }, [
+                d(a.$slots, "back", {}, () => [
+                  g(T, { options: f($) }, null, 8, ["options"])
+                ])
+              ])) : h("", !0),
+              d(a.$slots, "custom-buttons-left")
+            ]),
+            i("div", ee, [
+              d(a.$slots, "custom-buttons-right"),
+              f(z) ? (l(), c("span", {
+                key: 0,
+                role: "button",
+                onClick: B
+              }, [
+                d(a.$slots, "done", {}, () => [
+                  g(T, { options: f(O) }, null, 8, ["options"])
+                ])
+              ])) : (l(), c("div", {
+                key: 1,
+                role: "button",
+                onClick: B
+              }, [
+                d(a.$slots, "next", {}, () => [
+                  g(T, { options: f(C) }, null, 8, ["options"])
+                ])
+              ]))
             ])
-          ]),
-          !__props.hideButtons ? (openBlock(), createElementBlock("div", _hoisted_6, [
-            renderSlot(_ctx.$slots, "footer", {}, () => [
-              createElementVNode("div", _hoisted_7, [
-                unref(displayPrevTab) ? (openBlock(), createElementBlock("span", {
-                  key: 0,
-                  role: "button",
-                  onClick: prevTab
-                }, [
-                  renderSlot(_ctx.$slots, "back", {}, () => [
-                    createElementVNode("button", _hoisted_8, [
-                      createElementVNode("i", {
-                        class: normalizeClass(getIconClass(unref(backButtonOptions).icon))
-                      }, null, 2),
-                      !unref(backButtonOptions).hideText ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(unref(backButtonOptions).text), 1)) : createCommentVNode("", true)
-                    ])
-                  ])
-                ])) : createCommentVNode("", true),
-                renderSlot(_ctx.$slots, "custom-buttons-left")
-              ]),
-              createElementVNode("div", _hoisted_10, [
-                renderSlot(_ctx.$slots, "custom-buttons-right"),
-                unref(isLastStep) ? (openBlock(), createElementBlock("span", {
-                  key: 0,
-                  role: "button",
-                  onClick: nextTab
-                }, [
-                  renderSlot(_ctx.$slots, "done", {}, () => [
-                    createElementVNode("button", _hoisted_11, [
-                      !unref(doneButtonOptions).hideText ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(unref(doneButtonOptions).text), 1)) : createCommentVNode("", true),
-                      createElementVNode("i", {
-                        class: normalizeClass(getIconClass(unref(doneButtonOptions).icon))
-                      }, null, 2)
-                    ])
-                  ])
-                ])) : (openBlock(), createElementBlock("span", {
-                  key: 1,
-                  role: "button",
-                  onClick: nextTab
-                }, [
-                  renderSlot(_ctx.$slots, "next", {}, () => [
-                    createElementVNode("button", _hoisted_13, [
-                      !unref(nextButtonOptions).hideText ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(unref(nextButtonOptions).text), 1)) : createCommentVNode("", true),
-                      createElementVNode("i", {
-                        class: normalizeClass(getIconClass(unref(nextButtonOptions).icon))
-                      }, null, 2)
-                    ])
-                  ])
-                ]))
-              ])
-            ])
-          ])) : createCommentVNode("", true)
-        ])
-      ], 10, _hoisted_1);
-    };
+          ])
+        ]))
+      ])
+    ], 10, Q));
   }
 });
-export { _sfc_main as default };
+export {
+  ne as default
+};

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

package.json

 {
   "name": "form-wizard-vue3",
-  "version": "0.3.3",
+  "version": "1.0.0",
   "main": "./dist/form-wizard-vue3.umd.js",
@@ -29,17 +29,21 @@ "module": "./dist/form-wizard-vue3.es.js",
   "devDependencies": {
-    "@types/node": "^17.0.42",
-    "@vitejs/plugin-vue": "^2.3.3",
+    "@babel/types": "^7.20.2",
+    "@types/node": "^18.11.9",
+    "@vitejs/plugin-vue": "^3.2.0",
     "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^11.0.0",
     "@vue/test-utils": "2.0.0",
+    "@vue/tsconfig": "^0.1.3",
     "c8": "^7.11.3",
+    "eslint": "^8.22.0",
     "jsdom": "^19.0.0",
     "path": "^0.12.7",
-    "primeicons": "^5.0.0",
+    "primeicons": "^6.0.1",
     "sass": "^1.52.0",
     "typescript": "^4.5.4",
-    "vite": "^2.9.9",
+    "vite": "^3.2.3",
     "vitepress": "^1.0.0-alpha.12",
     "vitest": "0.12.9",
     "vue": "^3.2.25",
-    "vue-tsc": "^0.34.7"
+    "vue-tsc": "^1.0.9"
   },
@@ -46,0 +50,0 @@ "license": "MIT",

src/types/wizard.ts

@@ -14,2 +14,3 @@ export interface Tab {
   hideIcon: boolean
+  disabled: boolean
 }
@@ -16,0 +17,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

860201

increased by12.34%

Number of package files

15

increased by7.14%

Lines of code

3626

increased by10.45%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Dev dependency count

19

increased by26.67%

No dependency changes