vue3-steppy 1.6.0 → 1.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/vue3-steppy.cjs.js +2 -2
  2. package/dist/vue3-steppy.d.ts +8 -3
  3. package/dist/vue3-steppy.es.js +168 -198
  4. package/dist/vue3-steppy.umd.js +2 -2
  5. package/package.json +16 -12
package/dist/vue3-steppy.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- (function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode("body[data-v-5df030ab]{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;font-family:sans-serif}.tx-default-2[data-v-5df030ab]{color:var(--primaryColor1);font-weight:600}.wrapper-steppy[data-v-5df030ab]{padding:60px}.steppy[data-v-5df030ab]{display:flex;align-items:center;justify-content:space-between;width:auto;position:relative;z-index:0;margin-bottom:5px}.steppy-progress[data-v-5df030ab]{position:absolute;background-color:#c5c5c5;height:2px;z-index:-1;left:0;right:0;margin:0 auto}.steppy-progress-bar[data-v-5df030ab]{position:absolute;left:0;height:100%;width:0;background-color:var(--primaryColor1);transition:all .5s ease}.steppy-item[data-v-5df030ab]{display:flex;flex-direction:column;align-items:center;color:#c5c5c5;transition:all .5s ease}.steppy-item-counter[data-v-5df030ab]{height:68px;width:68px;display:grid;place-items:center;background-color:var(--primaryColor2);border-radius:100%;border:2px solid #c5c5c5;position:relative}.steppy-item-counter .icon-success[data-v-5df030ab]{position:absolute;opacity:0;transform:scale(0);width:24px;transition:all .5s ease}.steppy-item-counter .number[data-v-5df030ab]{font-size:22px;transition:all .5s ease}.steppy-item .steppy-item-text[data-v-5df030ab]{position:absolute;text-align:center;bottom:-58px;width:100%;display:flex;flex-direction:column;align-items:center;gap:2px}.steppy-item .steppy-item-title[data-v-5df030ab]{font-size:14px;font-weight:500}.steppy-item .steppy-item-description[data-v-5df030ab]{font-size:12px;color:#999;transition:all .5s ease}.steppy-item.success .steppy-item-counter[data-v-5df030ab]{border-color:var(--primaryColor1);font-weight:600;height:var(--circleSize);width:var(--circleSize)}.steppy-item.success .steppy-item-counter .icon-success[data-v-5df030ab]{opacity:1;transform:scale(1);width:calc(var(--circleSize) * .35)}.steppy-item.success .steppy-item-counter .number[data-v-5df030ab]{opacity:0;transform:scale(0);font-size:calc(var(--circleSize) * .32)}.steppy-item.success .steppy-item-title[data-v-5df030ab]{color:var(--primaryColor1)}.steppy-item.success .steppy-item-description[data-v-5df030ab]{color:var(--primaryColor1);opacity:.7}.steppy-item.current .steppy-item-counter[data-v-5df030ab]{border-color:var(--primaryColor1);background-color:var(--primaryColor1);color:#fff;font-weight:600}.steppy-item.current .steppy-item-title[data-v-5df030ab]{color:#818181}.steppy-item.current .steppy-item-description[data-v-5df030ab]{color:#999}.steppy-pane[data-v-5df030ab]{color:#333;text-align:center;background-color:var(--backgroundColor);border-radius:15px;padding:25px;box-shadow:0 0 10px #0000004d;margin:var(--contentMarginTop) 0 20px 0}.controls[data-v-5df030ab]{display:flex}.btn[data-v-5df030ab]{display:flex;justify-content:center;align-items:center;padding:6px 16px;text-align:center;vertical-align:middle;cursor:pointer;line-height:1.5;transition:all .15s;border-radius:4px;width:fit-content;font-size:.75rem;color:#333;background-color:#f0f0f0;border:1px solid #f0f0f0}.btn[data-v-5df030ab]:disabled{opacity:.5;pointer-events:none}.btn--default-2[data-v-5df030ab]{background-color:var(--primaryColor1);border-color:var(--primaryColor1);color:#fff;margin-left:auto}.loader[data-v-5df030ab]{width:20px;height:20px;border:2px solid #fff;border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation-5df030ab 1s linear infinite}@keyframes rotation-5df030ab{0%{transform:rotate(0)}to{transform:rotate(360deg)}}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
2
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),m={__name:"CheckMark",props:{color:{type:String,default:"black"}},setup(o){return(c,s)=>(e.openBlock(),e.createElementBlock("svg",{viewBox:"0 0 24 24",style:e.normalizeStyle({fill:o.color})},[...s[0]||(s[0]=[e.createElementVNode("path",{d:"M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"},null,-1)])],4))}},k=(o,c)=>{const s=o.__vccOpts||o;for(const[t,a]of c)s[t]=a;return s},S={class:"steppy"},g={class:"steppy-progress"},b=["src"],f={class:"number"},B={class:"steppy-item-text"},_={class:"steppy-item-title"},E={key:0,class:"steppy-item-description"},h={key:0,class:"steppy-pane"},v={class:"controls"},C=["disabled"],V=["disabled"],N={key:0,class:"loader"},z={key:1},x={__name:"Vue3Steppy",props:{step:{type:Number,default:1},tabs:{type:Array,default:e.reactive([{title:"Step 1",iconSuccess:null,isValid:!0},{title:"Step 2",iconSuccess:null,isValid:!0},{title:"Step 3",iconSuccess:null,isValid:!0}])},finalize:{type:Function,default:function(){return{}}},backText:{type:String,default:"Back"},nextText:{type:String,default:"Next"},doneText:{type:String,default:"Done"},loading:{type:Boolean,default:!1},primaryColor1:{type:String,default:"orange"},primaryColor2:{type:String,default:"#fff"},backgroundColor:{type:String,default:"#fff"},circleSize:{type:Number,default:68},contentMarginTop:{type:Number,default:100}},emits:["update:step"],setup(o,{emit:c}){const s=c,t=o,a=e.computed(()=>({"--primaryColor1":t.primaryColor1,"--primaryColor2":t.primaryColor2,"--backgroundColor":t.backgroundColor,"--circleSize":`${t.circleSize}px`,"--contentMarginTop":`${t.contentMarginTop}px`})),p=()=>{const n=t.step+1;s("update:step",n)},d=()=>{const n=t.step-1;s("update:step",n)},u=e.computed(()=>100/(t.tabs.length-1)*(t.step-1)+"%"),y=e.computed(()=>({height:`${t.circleSize}px`,width:`${t.circleSize}px`}));return(n,i)=>(e.openBlock(),e.createElementBlock("div",{class:"wrapper-steppy",style:e.normalizeStyle(a.value)},[e.createElementVNode("div",S,[e.createElementVNode("div",g,[e.createElementVNode("div",{class:"steppy-progress-bar",style:e.normalizeStyle("width:"+u.value)},null,4)]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.tabs,(l,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["steppy-item",{current:t.step===r+1,success:t.step>r+1}]),key:r},[e.createElementVNode("div",{class:"steppy-item-counter",style:e.normalizeStyle(y.value)},[l.iconSuccess?(e.openBlock(),e.createElementBlock("img",{key:0,class:"icon-success",src:l.iconSuccess,alt:"Check Mark"},null,8,b)):(e.openBlock(),e.createBlock(m,{key:1,class:"icon-success",color:o.primaryColor1,alt:"Check Mark"},null,8,["color"])),e.createElementVNode("span",f,e.toDisplayString(r+1),1)],4),e.createElementVNode("div",B,[e.createElementVNode("span",_,e.toDisplayString(l.title),1),l.description?(e.openBlock(),e.createElementBlock("span",E,e.toDisplayString(l.description),1)):e.createCommentVNode("",!0)])],2))),128))]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.tabs.length,l=>(e.openBlock(),e.createElementBlock("div",{class:"steppy-content",key:l},[t.step===l?(e.openBlock(),e.createElementBlock("div",h,[e.renderSlot(n.$slots,l,{},void 0,!0)])):e.createCommentVNode("",!0)]))),128)),e.createElementVNode("div",v,[t.step!==1?(e.openBlock(),e.createElementBlock("button",{key:0,class:"btn",type:"button",onClick:d},e.toDisplayString(t.backText),1)):e.createCommentVNode("",!0),t.step!==t.tabs.length?(e.openBlock(),e.createElementBlock("button",{key:1,class:"btn btn--default-2",type:"button",onClick:p,disabled:!t.tabs[t.step-1].isValid},e.toDisplayString(t.nextText),9,C)):(e.openBlock(),e.createElementBlock("button",{key:2,class:"btn btn--default-2",type:"button",onClick:i[0]||(i[0]=(...l)=>o.finalize&&o.finalize(...l)),disabled:!t.tabs[t.step-1].isValid||o.loading},[o.loading?(e.openBlock(),e.createElementBlock("span",N)):(e.openBlock(),e.createElementBlock("span",z,e.toDisplayString(t.doneText),1))],8,V))])],4))}},T=k(x,[["__scopeId","data-v-5df030ab"]]);exports.Steppy=T;
1
+ (function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`body[data-v-dc56ec53]{justify-content:center;align-items:center;width:100%;height:100vh;font-family:sans-serif;display:flex}.tx-default-2[data-v-dc56ec53]{color:var(--primaryColor1);font-weight:600}.wrapper-steppy[data-v-dc56ec53]{padding:60px}.steppy[data-v-dc56ec53]{z-index:0;justify-content:space-between;align-items:center;width:auto;margin-bottom:5px;display:flex;position:relative}.steppy-progress[data-v-dc56ec53]{z-index:-1;background-color:#c5c5c5;height:2px;margin:0 auto;position:absolute;left:0;right:0}.steppy-progress-bar[data-v-dc56ec53]{background-color:var(--primaryColor1);width:0;height:100%;transition:all .5s;position:absolute;left:0}.steppy-item[data-v-dc56ec53]{color:#c5c5c5;flex-direction:column;align-items:center;transition:all .5s;display:flex}.steppy-item-counter[data-v-dc56ec53]{background-color:var(--primaryColor2);border:2px solid #c5c5c5;border-radius:100%;place-items:center;width:68px;height:68px;display:grid;position:relative}.steppy-item-counter .icon-success[data-v-dc56ec53]{opacity:0;width:24px;transition:all .5s;position:absolute;transform:scale(0)}.steppy-item-counter .number[data-v-dc56ec53]{font-size:22px;transition:all .5s}.steppy-item .steppy-item-text[data-v-dc56ec53]{text-align:center;flex-direction:column;align-items:center;gap:2px;width:100%;display:flex;position:absolute;bottom:-58px}.steppy-item .steppy-item-title[data-v-dc56ec53]{font-size:14px;font-weight:500}.steppy-item .steppy-item-description[data-v-dc56ec53]{color:#999;font-size:12px;transition:all .5s}.steppy-item.success .steppy-item-counter[data-v-dc56ec53]{border-color:var(--primaryColor1);height:var(--circleSize);width:var(--circleSize);font-weight:600}.steppy-item.success .steppy-item-counter .icon-success[data-v-dc56ec53]{opacity:1;width:calc(var(--circleSize) * .35);transform:scale(1)}.steppy-item.success .steppy-item-counter .number[data-v-dc56ec53]{opacity:0;font-size:calc(var(--circleSize) * .32);transform:scale(0)}.steppy-item.success .steppy-item-title[data-v-dc56ec53]{color:var(--primaryColor1)}.steppy-item.success .steppy-item-description[data-v-dc56ec53]{color:var(--primaryColor1);opacity:.7}.steppy-item.current .steppy-item-counter[data-v-dc56ec53]{border-color:var(--primaryColor1);background-color:var(--primaryColor1);color:#fff;font-weight:600}.steppy-item.current .steppy-item-title[data-v-dc56ec53]{color:#818181}.steppy-item.current .steppy-item-description[data-v-dc56ec53]{color:#999}.steppy-pane[data-v-dc56ec53]{color:#333;text-align:center;background-color:var(--backgroundColor);margin:var(--contentMarginTop) 0 20px 0;border-radius:15px;padding:25px;box-shadow:0 0 10px #0000004d}.controls[data-v-dc56ec53]{display:flex}.btn[data-v-dc56ec53]{text-align:center;vertical-align:middle;cursor:pointer;color:#333;background-color:#f0f0f0;border:1px solid #f0f0f0;border-radius:4px;justify-content:center;align-items:center;width:fit-content;padding:6px 16px;font-size:.75rem;line-height:1.5;transition:all .15s;display:flex}.btn[data-v-dc56ec53]:disabled{opacity:.5;pointer-events:none}.btn--default-2[data-v-dc56ec53]{background-color:var(--primaryColor1);border-color:var(--primaryColor1);color:#fff;margin-left:auto}.loader[data-v-dc56ec53]{box-sizing:border-box;border:2px solid #fff;border-bottom-color:#0000;border-radius:50%;width:20px;height:20px;animation:1s linear infinite rotation-dc56ec53;display:inline-block}@keyframes rotation-dc56ec53{0%{transform:rotate(0)}to{transform:rotate(360deg)}}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
2
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("vue");var t={__name:`CheckMark`,props:{color:{type:String,default:`black`}},setup(t){return(n,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(`svg`,{viewBox:`0 0 24 24`,style:(0,e.normalizeStyle)({fill:t.color})},[...r[0]||=[(0,e.createElementVNode)(`path`,{d:`M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z`},null,-1)]],4))}},n=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},r={class:`steppy`},i={class:`steppy-progress`},a=[`src`],o={class:`number`},s={class:`steppy-item-text`},c={class:`steppy-item-title`},l={key:0,class:`steppy-item-description`},u={key:0,class:`steppy-pane`},d={class:`controls`},f=[`disabled`],p=[`disabled`],m={key:0,class:`loader`},h={key:1},g=n({__name:`Vue3Steppy`,props:{step:{type:Number,default:1},tabs:{type:Array,default:(0,e.reactive)([{title:`Step 1`,iconSuccess:null,isValid:!0},{title:`Step 2`,iconSuccess:null,isValid:!0},{title:`Step 3`,iconSuccess:null,isValid:!0}])},finalize:{type:Function,default:function(){return{}}},backText:{type:String,default:`Back`},nextText:{type:String,default:`Next`},doneText:{type:String,default:`Done`},loading:{type:Boolean,default:!1},primaryColor1:{type:String,default:`orange`},primaryColor2:{type:String,default:`#fff`},backgroundColor:{type:String,default:`#fff`},circleSize:{type:Number,default:68},contentMarginTop:{type:Number,default:60}},emits:[`update:step`],setup(n,{emit:g}){let _=g,v=n,y=(0,e.computed)(()=>({"--primaryColor1":v.primaryColor1,"--primaryColor2":v.primaryColor2,"--backgroundColor":v.backgroundColor,"--circleSize":`${v.circleSize}px`,"--contentMarginTop":`${v.contentMarginTop}px`})),b=()=>{_(`update:step`,v.step+1)},x=()=>{_(`update:step`,v.step-1)},S=(0,e.computed)(()=>100/(v.tabs.length-1)*(v.step-1)+`%`),C=(0,e.computed)(()=>({height:`${v.circleSize}px`,width:`${v.circleSize}px`}));return(g,_)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{class:`wrapper-steppy`,style:(0,e.normalizeStyle)(y.value)},[(0,e.createElementVNode)(`div`,r,[(0,e.createElementVNode)(`div`,i,[(0,e.createElementVNode)(`div`,{class:`steppy-progress-bar`,style:(0,e.normalizeStyle)(`width:`+S.value)},null,4)]),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(v.tabs,(r,i)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{class:(0,e.normalizeClass)([`steppy-item`,{current:v.step===i+1,success:v.step>i+1}]),key:i},[(0,e.createElementVNode)(`div`,{class:`steppy-item-counter`,style:(0,e.normalizeStyle)(C.value)},[r.iconSuccess?((0,e.openBlock)(),(0,e.createElementBlock)(`img`,{key:0,class:`icon-success`,src:r.iconSuccess,alt:`Check Mark`},null,8,a)):((0,e.openBlock)(),(0,e.createBlock)(t,{key:1,class:`icon-success`,color:n.primaryColor1,alt:`Check Mark`},null,8,[`color`])),(0,e.createElementVNode)(`span`,o,(0,e.toDisplayString)(i+1),1)],4),(0,e.createElementVNode)(`div`,s,[(0,e.createElementVNode)(`span`,c,(0,e.toDisplayString)(r.title),1),r.description?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,l,(0,e.toDisplayString)(r.description),1)):(0,e.createCommentVNode)(``,!0)])],2))),128))]),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(v.tabs.length,t=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{class:`steppy-content`,key:t},[v.step===t?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,u,[(0,e.renderSlot)(g.$slots,t,{},void 0,!0)])):(0,e.createCommentVNode)(``,!0)]))),128)),(0,e.createElementVNode)(`div`,d,[v.step===1?(0,e.createCommentVNode)(``,!0):((0,e.openBlock)(),(0,e.createElementBlock)(`button`,{key:0,class:`btn`,type:`button`,onClick:x},(0,e.toDisplayString)(v.backText),1)),v.step===v.tabs.length?((0,e.openBlock)(),(0,e.createElementBlock)(`button`,{key:2,class:`btn btn--default-2`,type:`button`,onClick:_[0]||=(...e)=>n.finalize&&n.finalize(...e),disabled:!v.tabs[v.step-1].isValid||n.loading},[n.loading?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,m)):((0,e.openBlock)(),(0,e.createElementBlock)(`span`,h,(0,e.toDisplayString)(v.doneText),1))],8,p)):((0,e.openBlock)(),(0,e.createElementBlock)(`button`,{key:1,class:`btn btn--default-2`,type:`button`,onClick:b,disabled:!v.tabs[v.step-1].isValid},(0,e.toDisplayString)(v.nextText),9,f))])],4))}},[[`__scopeId`,`data-v-dc56ec53`]]);exports.Steppy=g;
package/dist/vue3-steppy.d.ts CHANGED
@@ -1,9 +1,14 @@
1
- declare module '@/components/Vue3Steppy.vue' {
2
- import { DefineComponent } from 'vue';
1
+ declare module "@/components/Vue3Steppy.vue" {
2
+ import { DefineComponent } from "vue";
3
3
 
4
4
  export interface SteppyProps {
5
5
  step: number;
6
- tabs: Array<{ title: string; description?: string; iconSuccess?: string; isValid: boolean; }>;
6
+ tabs: Array<{
7
+ title: string;
8
+ description?: string;
9
+ iconSuccess?: string;
10
+ isValid: boolean;
11
+ }>;
7
12
  finalize: () => void;
8
13
  backText: string;
9
14
  nextText: string;
package/dist/vue3-steppy.es.js CHANGED
@@ -1,198 +1,168 @@
1
- (function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode("body[data-v-5df030ab]{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;font-family:sans-serif}.tx-default-2[data-v-5df030ab]{color:var(--primaryColor1);font-weight:600}.wrapper-steppy[data-v-5df030ab]{padding:60px}.steppy[data-v-5df030ab]{display:flex;align-items:center;justify-content:space-between;width:auto;position:relative;z-index:0;margin-bottom:5px}.steppy-progress[data-v-5df030ab]{position:absolute;background-color:#c5c5c5;height:2px;z-index:-1;left:0;right:0;margin:0 auto}.steppy-progress-bar[data-v-5df030ab]{position:absolute;left:0;height:100%;width:0;background-color:var(--primaryColor1);transition:all .5s ease}.steppy-item[data-v-5df030ab]{display:flex;flex-direction:column;align-items:center;color:#c5c5c5;transition:all .5s ease}.steppy-item-counter[data-v-5df030ab]{height:68px;width:68px;display:grid;place-items:center;background-color:var(--primaryColor2);border-radius:100%;border:2px solid #c5c5c5;position:relative}.steppy-item-counter .icon-success[data-v-5df030ab]{position:absolute;opacity:0;transform:scale(0);width:24px;transition:all .5s ease}.steppy-item-counter .number[data-v-5df030ab]{font-size:22px;transition:all .5s ease}.steppy-item .steppy-item-text[data-v-5df030ab]{position:absolute;text-align:center;bottom:-58px;width:100%;display:flex;flex-direction:column;align-items:center;gap:2px}.steppy-item .steppy-item-title[data-v-5df030ab]{font-size:14px;font-weight:500}.steppy-item .steppy-item-description[data-v-5df030ab]{font-size:12px;color:#999;transition:all .5s ease}.steppy-item.success .steppy-item-counter[data-v-5df030ab]{border-color:var(--primaryColor1);font-weight:600;height:var(--circleSize);width:var(--circleSize)}.steppy-item.success .steppy-item-counter .icon-success[data-v-5df030ab]{opacity:1;transform:scale(1);width:calc(var(--circleSize) * .35)}.steppy-item.success .steppy-item-counter .number[data-v-5df030ab]{opacity:0;transform:scale(0);font-size:calc(var(--circleSize) * .32)}.steppy-item.success .steppy-item-title[data-v-5df030ab]{color:var(--primaryColor1)}.steppy-item.success .steppy-item-description[data-v-5df030ab]{color:var(--primaryColor1);opacity:.7}.steppy-item.current .steppy-item-counter[data-v-5df030ab]{border-color:var(--primaryColor1);background-color:var(--primaryColor1);color:#fff;font-weight:600}.steppy-item.current .steppy-item-title[data-v-5df030ab]{color:#818181}.steppy-item.current .steppy-item-description[data-v-5df030ab]{color:#999}.steppy-pane[data-v-5df030ab]{color:#333;text-align:center;background-color:var(--backgroundColor);border-radius:15px;padding:25px;box-shadow:0 0 10px #0000004d;margin:var(--contentMarginTop) 0 20px 0}.controls[data-v-5df030ab]{display:flex}.btn[data-v-5df030ab]{display:flex;justify-content:center;align-items:center;padding:6px 16px;text-align:center;vertical-align:middle;cursor:pointer;line-height:1.5;transition:all .15s;border-radius:4px;width:fit-content;font-size:.75rem;color:#333;background-color:#f0f0f0;border:1px solid #f0f0f0}.btn[data-v-5df030ab]:disabled{opacity:.5;pointer-events:none}.btn--default-2[data-v-5df030ab]{background-color:var(--primaryColor1);border-color:var(--primaryColor1);color:#fff;margin-left:auto}.loader[data-v-5df030ab]{width:20px;height:20px;border:2px solid #fff;border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation-5df030ab 1s linear infinite}@keyframes rotation-5df030ab{0%{transform:rotate(0)}to{transform:rotate(360deg)}}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
2
- import { openBlock as e, createElementBlock as s, normalizeStyle as u, createElementVNode as l, reactive as v, computed as y, Fragment as m, renderList as k, normalizeClass as C, createBlock as x, toDisplayString as r, createCommentVNode as b, renderSlot as z } from "vue";
3
- const V = {
4
- __name: "CheckMark",
5
- props: {
6
- color: {
7
- type: String,
8
- default: "black"
9
- }
10
- },
11
- setup(n) {
12
- return (i, c) => (e(), s("svg", {
13
- viewBox: "0 0 24 24",
14
- style: u({ fill: n.color })
15
- }, [...c[0] || (c[0] = [
16
- l("path", { d: "M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" }, null, -1)
17
- ])], 4));
18
- }
19
- }, T = (n, i) => {
20
- const c = n.__vccOpts || n;
21
- for (const [t, d] of i)
22
- c[t] = d;
23
- return c;
24
- }, M = { class: "steppy" }, B = { class: "steppy-progress" }, N = ["src"], $ = { class: "number" }, w = { class: "steppy-item-text" }, D = { class: "steppy-item-title" }, E = {
25
- key: 0,
26
- class: "steppy-item-description"
27
- }, F = {
28
- key: 0,
29
- class: "steppy-pane"
30
- }, A = { class: "controls" }, I = ["disabled"], L = ["disabled"], O = {
31
- key: 0,
32
- class: "loader"
33
- }, P = { key: 1 }, j = {
34
- __name: "Vue3Steppy",
35
- props: {
36
- step: {
37
- type: Number,
38
- default: 1
39
- },
40
- tabs: {
41
- type: Array,
42
- default: v([
43
- {
44
- title: "Step 1",
45
- iconSuccess: null,
46
- isValid: !0
47
- },
48
- {
49
- title: "Step 2",
50
- iconSuccess: null,
51
- isValid: !0
52
- },
53
- {
54
- title: "Step 3",
55
- iconSuccess: null,
56
- isValid: !0
57
- }
58
- ])
59
- },
60
- finalize: {
61
- type: Function,
62
- default: function() {
63
- return {};
64
- }
65
- },
66
- backText: {
67
- type: String,
68
- default: "Back"
69
- },
70
- nextText: {
71
- type: String,
72
- default: "Next"
73
- },
74
- doneText: {
75
- type: String,
76
- default: "Done"
77
- },
78
- loading: {
79
- type: Boolean,
80
- default: !1
81
- },
82
- primaryColor1: {
83
- type: String,
84
- default: "orange"
85
- },
86
- primaryColor2: {
87
- type: String,
88
- default: "#fff"
89
- },
90
- backgroundColor: {
91
- type: String,
92
- default: "#fff"
93
- },
94
- circleSize: {
95
- type: Number,
96
- default: 68
97
- },
98
- contentMarginTop: {
99
- type: Number,
100
- default: 100
101
- }
102
- },
103
- emits: ["update:step"],
104
- setup(n, { emit: i }) {
105
- const c = i, t = n, d = y(() => ({
106
- "--primaryColor1": t.primaryColor1,
107
- "--primaryColor2": t.primaryColor2,
108
- "--backgroundColor": t.backgroundColor,
109
- "--circleSize": `${t.circleSize}px`,
110
- "--contentMarginTop": `${t.contentMarginTop}px`
111
- })), g = () => {
112
- const a = t.step + 1;
113
- c("update:step", a);
114
- }, S = () => {
115
- const a = t.step - 1;
116
- c("update:step", a);
117
- }, _ = y(() => 100 / (t.tabs.length - 1) * (t.step - 1) + "%"), h = y(() => ({
118
- height: `${t.circleSize}px`,
119
- width: `${t.circleSize}px`
120
- }));
121
- return (a, f) => (e(), s("div", {
122
- class: "wrapper-steppy",
123
- style: u(d.value)
124
- }, [
125
- l("div", M, [
126
- l("div", B, [
127
- l("div", {
128
- class: "steppy-progress-bar",
129
- style: u("width:" + _.value)
130
- }, null, 4)
131
- ]),
132
- (e(!0), s(m, null, k(t.tabs, (o, p) => (e(), s("div", {
133
- class: C(["steppy-item", {
134
- current: t.step === p + 1,
135
- success: t.step > p + 1
136
- }]),
137
- key: p
138
- }, [
139
- l("div", {
140
- class: "steppy-item-counter",
141
- style: u(h.value)
142
- }, [
143
- o.iconSuccess ? (e(), s("img", {
144
- key: 0,
145
- class: "icon-success",
146
- src: o.iconSuccess,
147
- alt: "Check Mark"
148
- }, null, 8, N)) : (e(), x(V, {
149
- key: 1,
150
- class: "icon-success",
151
- color: n.primaryColor1,
152
- alt: "Check Mark"
153
- }, null, 8, ["color"])),
154
- l("span", $, r(p + 1), 1)
155
- ], 4),
156
- l("div", w, [
157
- l("span", D, r(o.title), 1),
158
- o.description ? (e(), s("span", E, r(o.description), 1)) : b("", !0)
159
- ])
160
- ], 2))), 128))
161
- ]),
162
- (e(!0), s(m, null, k(t.tabs.length, (o) => (e(), s("div", {
163
- class: "steppy-content",
164
- key: o
165
- }, [
166
- t.step === o ? (e(), s("div", F, [
167
- z(a.$slots, o, {}, void 0, !0)
168
- ])) : b("", !0)
169
- ]))), 128)),
170
- l("div", A, [
171
- t.step !== 1 ? (e(), s("button", {
172
- key: 0,
173
- class: "btn",
174
- type: "button",
175
- onClick: S
176
- }, r(t.backText), 1)) : b("", !0),
177
- t.step !== t.tabs.length ? (e(), s("button", {
178
- key: 1,
179
- class: "btn btn--default-2",
180
- type: "button",
181
- onClick: g,
182
- disabled: !t.tabs[t.step - 1].isValid
183
- }, r(t.nextText), 9, I)) : (e(), s("button", {
184
- key: 2,
185
- class: "btn btn--default-2",
186
- type: "button",
187
- onClick: f[0] || (f[0] = (...o) => n.finalize && n.finalize(...o)),
188
- disabled: !t.tabs[t.step - 1].isValid || n.loading
189
- }, [
190
- n.loading ? (e(), s("span", O)) : (e(), s("span", P, r(t.doneText), 1))
191
- ], 8, L))
192
- ])
193
- ], 4));
194
- }
195
- }, G = /* @__PURE__ */ T(j, [["__scopeId", "data-v-5df030ab"]]);
196
- export {
197
- G as Steppy
198
- };
1
+ (function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`body[data-v-dc56ec53]{justify-content:center;align-items:center;width:100%;height:100vh;font-family:sans-serif;display:flex}.tx-default-2[data-v-dc56ec53]{color:var(--primaryColor1);font-weight:600}.wrapper-steppy[data-v-dc56ec53]{padding:60px}.steppy[data-v-dc56ec53]{z-index:0;justify-content:space-between;align-items:center;width:auto;margin-bottom:5px;display:flex;position:relative}.steppy-progress[data-v-dc56ec53]{z-index:-1;background-color:#c5c5c5;height:2px;margin:0 auto;position:absolute;left:0;right:0}.steppy-progress-bar[data-v-dc56ec53]{background-color:var(--primaryColor1);width:0;height:100%;transition:all .5s;position:absolute;left:0}.steppy-item[data-v-dc56ec53]{color:#c5c5c5;flex-direction:column;align-items:center;transition:all .5s;display:flex}.steppy-item-counter[data-v-dc56ec53]{background-color:var(--primaryColor2);border:2px solid #c5c5c5;border-radius:100%;place-items:center;width:68px;height:68px;display:grid;position:relative}.steppy-item-counter .icon-success[data-v-dc56ec53]{opacity:0;width:24px;transition:all .5s;position:absolute;transform:scale(0)}.steppy-item-counter .number[data-v-dc56ec53]{font-size:22px;transition:all .5s}.steppy-item .steppy-item-text[data-v-dc56ec53]{text-align:center;flex-direction:column;align-items:center;gap:2px;width:100%;display:flex;position:absolute;bottom:-58px}.steppy-item .steppy-item-title[data-v-dc56ec53]{font-size:14px;font-weight:500}.steppy-item .steppy-item-description[data-v-dc56ec53]{color:#999;font-size:12px;transition:all .5s}.steppy-item.success .steppy-item-counter[data-v-dc56ec53]{border-color:var(--primaryColor1);height:var(--circleSize);width:var(--circleSize);font-weight:600}.steppy-item.success .steppy-item-counter .icon-success[data-v-dc56ec53]{opacity:1;width:calc(var(--circleSize) * .35);transform:scale(1)}.steppy-item.success .steppy-item-counter .number[data-v-dc56ec53]{opacity:0;font-size:calc(var(--circleSize) * .32);transform:scale(0)}.steppy-item.success .steppy-item-title[data-v-dc56ec53]{color:var(--primaryColor1)}.steppy-item.success .steppy-item-description[data-v-dc56ec53]{color:var(--primaryColor1);opacity:.7}.steppy-item.current .steppy-item-counter[data-v-dc56ec53]{border-color:var(--primaryColor1);background-color:var(--primaryColor1);color:#fff;font-weight:600}.steppy-item.current .steppy-item-title[data-v-dc56ec53]{color:#818181}.steppy-item.current .steppy-item-description[data-v-dc56ec53]{color:#999}.steppy-pane[data-v-dc56ec53]{color:#333;text-align:center;background-color:var(--backgroundColor);margin:var(--contentMarginTop) 0 20px 0;border-radius:15px;padding:25px;box-shadow:0 0 10px #0000004d}.controls[data-v-dc56ec53]{display:flex}.btn[data-v-dc56ec53]{text-align:center;vertical-align:middle;cursor:pointer;color:#333;background-color:#f0f0f0;border:1px solid #f0f0f0;border-radius:4px;justify-content:center;align-items:center;width:fit-content;padding:6px 16px;font-size:.75rem;line-height:1.5;transition:all .15s;display:flex}.btn[data-v-dc56ec53]:disabled{opacity:.5;pointer-events:none}.btn--default-2[data-v-dc56ec53]{background-color:var(--primaryColor1);border-color:var(--primaryColor1);color:#fff;margin-left:auto}.loader[data-v-dc56ec53]{box-sizing:border-box;border:2px solid #fff;border-bottom-color:#0000;border-radius:50%;width:20px;height:20px;animation:1s linear infinite rotation-dc56ec53;display:inline-block}@keyframes rotation-dc56ec53{0%{transform:rotate(0)}to{transform:rotate(360deg)}}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
2
+ import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, normalizeClass as o, normalizeStyle as s, openBlock as c, reactive as l, renderList as u, renderSlot as d, toDisplayString as f } from "vue";
3
+ //#region src/components/CheckMark.vue
4
+ var p = {
5
+ __name: "CheckMark",
6
+ props: { color: {
7
+ type: String,
8
+ default: "black"
9
+ } },
10
+ setup(e) {
11
+ return (t, n) => (c(), i("svg", {
12
+ viewBox: "0 0 24 24",
13
+ style: s({ fill: e.color })
14
+ }, [...n[0] ||= [a("path", { d: "M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" }, null, -1)]], 4));
15
+ }
16
+ }, m = (e, t) => {
17
+ let n = e.__vccOpts || e;
18
+ for (let [e, r] of t) n[e] = r;
19
+ return n;
20
+ }, h = { class: "steppy" }, g = { class: "steppy-progress" }, _ = ["src"], v = { class: "number" }, y = { class: "steppy-item-text" }, b = { class: "steppy-item-title" }, x = {
21
+ key: 0,
22
+ class: "steppy-item-description"
23
+ }, S = {
24
+ key: 0,
25
+ class: "steppy-pane"
26
+ }, C = { class: "controls" }, w = ["disabled"], T = ["disabled"], E = {
27
+ key: 0,
28
+ class: "loader"
29
+ }, D = { key: 1 }, O = /* @__PURE__ */ m({
30
+ __name: "Vue3Steppy",
31
+ props: {
32
+ step: {
33
+ type: Number,
34
+ default: 1
35
+ },
36
+ tabs: {
37
+ type: Array,
38
+ default: l([
39
+ {
40
+ title: "Step 1",
41
+ iconSuccess: null,
42
+ isValid: !0
43
+ },
44
+ {
45
+ title: "Step 2",
46
+ iconSuccess: null,
47
+ isValid: !0
48
+ },
49
+ {
50
+ title: "Step 3",
51
+ iconSuccess: null,
52
+ isValid: !0
53
+ }
54
+ ])
55
+ },
56
+ finalize: {
57
+ type: Function,
58
+ default: function() {
59
+ return {};
60
+ }
61
+ },
62
+ backText: {
63
+ type: String,
64
+ default: "Back"
65
+ },
66
+ nextText: {
67
+ type: String,
68
+ default: "Next"
69
+ },
70
+ doneText: {
71
+ type: String,
72
+ default: "Done"
73
+ },
74
+ loading: {
75
+ type: Boolean,
76
+ default: !1
77
+ },
78
+ primaryColor1: {
79
+ type: String,
80
+ default: "orange"
81
+ },
82
+ primaryColor2: {
83
+ type: String,
84
+ default: "#fff"
85
+ },
86
+ backgroundColor: {
87
+ type: String,
88
+ default: "#fff"
89
+ },
90
+ circleSize: {
91
+ type: Number,
92
+ default: 68
93
+ },
94
+ contentMarginTop: {
95
+ type: Number,
96
+ default: 60
97
+ }
98
+ },
99
+ emits: ["update:step"],
100
+ setup(l, { emit: m }) {
101
+ let O = m, k = l, A = t(() => ({
102
+ "--primaryColor1": k.primaryColor1,
103
+ "--primaryColor2": k.primaryColor2,
104
+ "--backgroundColor": k.backgroundColor,
105
+ "--circleSize": `${k.circleSize}px`,
106
+ "--contentMarginTop": `${k.contentMarginTop}px`
107
+ })), j = () => {
108
+ O("update:step", k.step + 1);
109
+ }, M = () => {
110
+ O("update:step", k.step - 1);
111
+ }, N = t(() => 100 / (k.tabs.length - 1) * (k.step - 1) + "%"), P = t(() => ({
112
+ height: `${k.circleSize}px`,
113
+ width: `${k.circleSize}px`
114
+ }));
115
+ return (t, m) => (c(), i("div", {
116
+ class: "wrapper-steppy",
117
+ style: s(A.value)
118
+ }, [
119
+ a("div", h, [a("div", g, [a("div", {
120
+ class: "steppy-progress-bar",
121
+ style: s("width:" + N.value)
122
+ }, null, 4)]), (c(!0), i(e, null, u(k.tabs, (e, t) => (c(), i("div", {
123
+ class: o(["steppy-item", {
124
+ current: k.step === t + 1,
125
+ success: k.step > t + 1
126
+ }]),
127
+ key: t
128
+ }, [a("div", {
129
+ class: "steppy-item-counter",
130
+ style: s(P.value)
131
+ }, [e.iconSuccess ? (c(), i("img", {
132
+ key: 0,
133
+ class: "icon-success",
134
+ src: e.iconSuccess,
135
+ alt: "Check Mark"
136
+ }, null, 8, _)) : (c(), n(p, {
137
+ key: 1,
138
+ class: "icon-success",
139
+ color: l.primaryColor1,
140
+ alt: "Check Mark"
141
+ }, null, 8, ["color"])), a("span", v, f(t + 1), 1)], 4), a("div", y, [a("span", b, f(e.title), 1), e.description ? (c(), i("span", x, f(e.description), 1)) : r("", !0)])], 2))), 128))]),
142
+ (c(!0), i(e, null, u(k.tabs.length, (e) => (c(), i("div", {
143
+ class: "steppy-content",
144
+ key: e
145
+ }, [k.step === e ? (c(), i("div", S, [d(t.$slots, e, {}, void 0, !0)])) : r("", !0)]))), 128)),
146
+ a("div", C, [k.step === 1 ? r("", !0) : (c(), i("button", {
147
+ key: 0,
148
+ class: "btn",
149
+ type: "button",
150
+ onClick: M
151
+ }, f(k.backText), 1)), k.step === k.tabs.length ? (c(), i("button", {
152
+ key: 2,
153
+ class: "btn btn--default-2",
154
+ type: "button",
155
+ onClick: m[0] ||= (...e) => l.finalize && l.finalize(...e),
156
+ disabled: !k.tabs[k.step - 1].isValid || l.loading
157
+ }, [l.loading ? (c(), i("span", E)) : (c(), i("span", D, f(k.doneText), 1))], 8, T)) : (c(), i("button", {
158
+ key: 1,
159
+ class: "btn btn--default-2",
160
+ type: "button",
161
+ onClick: j,
162
+ disabled: !k.tabs[k.step - 1].isValid
163
+ }, f(k.nextText), 9, w))])
164
+ ], 4));
165
+ }
166
+ }, [["__scopeId", "data-v-dc56ec53"]]);
167
+ //#endregion
168
+ export { O as Steppy };
package/dist/vue3-steppy.umd.js CHANGED
@@ -1,2 +1,2 @@
1
- (function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode("body[data-v-5df030ab]{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;font-family:sans-serif}.tx-default-2[data-v-5df030ab]{color:var(--primaryColor1);font-weight:600}.wrapper-steppy[data-v-5df030ab]{padding:60px}.steppy[data-v-5df030ab]{display:flex;align-items:center;justify-content:space-between;width:auto;position:relative;z-index:0;margin-bottom:5px}.steppy-progress[data-v-5df030ab]{position:absolute;background-color:#c5c5c5;height:2px;z-index:-1;left:0;right:0;margin:0 auto}.steppy-progress-bar[data-v-5df030ab]{position:absolute;left:0;height:100%;width:0;background-color:var(--primaryColor1);transition:all .5s ease}.steppy-item[data-v-5df030ab]{display:flex;flex-direction:column;align-items:center;color:#c5c5c5;transition:all .5s ease}.steppy-item-counter[data-v-5df030ab]{height:68px;width:68px;display:grid;place-items:center;background-color:var(--primaryColor2);border-radius:100%;border:2px solid #c5c5c5;position:relative}.steppy-item-counter .icon-success[data-v-5df030ab]{position:absolute;opacity:0;transform:scale(0);width:24px;transition:all .5s ease}.steppy-item-counter .number[data-v-5df030ab]{font-size:22px;transition:all .5s ease}.steppy-item .steppy-item-text[data-v-5df030ab]{position:absolute;text-align:center;bottom:-58px;width:100%;display:flex;flex-direction:column;align-items:center;gap:2px}.steppy-item .steppy-item-title[data-v-5df030ab]{font-size:14px;font-weight:500}.steppy-item .steppy-item-description[data-v-5df030ab]{font-size:12px;color:#999;transition:all .5s ease}.steppy-item.success .steppy-item-counter[data-v-5df030ab]{border-color:var(--primaryColor1);font-weight:600;height:var(--circleSize);width:var(--circleSize)}.steppy-item.success .steppy-item-counter .icon-success[data-v-5df030ab]{opacity:1;transform:scale(1);width:calc(var(--circleSize) * .35)}.steppy-item.success .steppy-item-counter .number[data-v-5df030ab]{opacity:0;transform:scale(0);font-size:calc(var(--circleSize) * .32)}.steppy-item.success .steppy-item-title[data-v-5df030ab]{color:var(--primaryColor1)}.steppy-item.success .steppy-item-description[data-v-5df030ab]{color:var(--primaryColor1);opacity:.7}.steppy-item.current .steppy-item-counter[data-v-5df030ab]{border-color:var(--primaryColor1);background-color:var(--primaryColor1);color:#fff;font-weight:600}.steppy-item.current .steppy-item-title[data-v-5df030ab]{color:#818181}.steppy-item.current .steppy-item-description[data-v-5df030ab]{color:#999}.steppy-pane[data-v-5df030ab]{color:#333;text-align:center;background-color:var(--backgroundColor);border-radius:15px;padding:25px;box-shadow:0 0 10px #0000004d;margin:var(--contentMarginTop) 0 20px 0}.controls[data-v-5df030ab]{display:flex}.btn[data-v-5df030ab]{display:flex;justify-content:center;align-items:center;padding:6px 16px;text-align:center;vertical-align:middle;cursor:pointer;line-height:1.5;transition:all .15s;border-radius:4px;width:fit-content;font-size:.75rem;color:#333;background-color:#f0f0f0;border:1px solid #f0f0f0}.btn[data-v-5df030ab]:disabled{opacity:.5;pointer-events:none}.btn--default-2[data-v-5df030ab]{background-color:var(--primaryColor1);border-color:var(--primaryColor1);color:#fff;margin-left:auto}.loader[data-v-5df030ab]{width:20px;height:20px;border:2px solid #fff;border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation-5df030ab 1s linear infinite}@keyframes rotation-5df030ab{0%{transform:rotate(0)}to{transform:rotate(360deg)}}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
2
- (function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.Vue3Steppy={},l.Vue))})(this,(function(l,e){"use strict";const d={__name:"CheckMark",props:{color:{type:String,default:"black"}},setup(o){return(r,s)=>(e.openBlock(),e.createElementBlock("svg",{viewBox:"0 0 24 24",style:e.normalizeStyle({fill:o.color})},[...s[0]||(s[0]=[e.createElementVNode("path",{d:"M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"},null,-1)])],4))}},y=(o,r)=>{const s=o.__vccOpts||o;for(const[t,i]of r)s[t]=i;return s},m={class:"steppy"},k={class:"steppy-progress"},f=["src"],S={class:"number"},b={class:"steppy-item-text"},g={class:"steppy-item-title"},u={key:0,class:"steppy-item-description"},B={key:0,class:"steppy-pane"},_={class:"controls"},h=["disabled"],E=["disabled"],V={key:0,class:"loader"},C={key:1},N={__name:"Vue3Steppy",props:{step:{type:Number,default:1},tabs:{type:Array,default:e.reactive([{title:"Step 1",iconSuccess:null,isValid:!0},{title:"Step 2",iconSuccess:null,isValid:!0},{title:"Step 3",iconSuccess:null,isValid:!0}])},finalize:{type:Function,default:function(){return{}}},backText:{type:String,default:"Back"},nextText:{type:String,default:"Next"},doneText:{type:String,default:"Done"},loading:{type:Boolean,default:!1},primaryColor1:{type:String,default:"orange"},primaryColor2:{type:String,default:"#fff"},backgroundColor:{type:String,default:"#fff"},circleSize:{type:Number,default:68},contentMarginTop:{type:Number,default:100}},emits:["update:step"],setup(o,{emit:r}){const s=r,t=o,i=e.computed(()=>({"--primaryColor1":t.primaryColor1,"--primaryColor2":t.primaryColor2,"--backgroundColor":t.backgroundColor,"--circleSize":`${t.circleSize}px`,"--contentMarginTop":`${t.contentMarginTop}px`})),z=()=>{const c=t.step+1;s("update:step",c)},T=()=>{const c=t.step-1;s("update:step",c)},M=e.computed(()=>100/(t.tabs.length-1)*(t.step-1)+"%"),D=e.computed(()=>({height:`${t.circleSize}px`,width:`${t.circleSize}px`}));return(c,p)=>(e.openBlock(),e.createElementBlock("div",{class:"wrapper-steppy",style:e.normalizeStyle(i.value)},[e.createElementVNode("div",m,[e.createElementVNode("div",k,[e.createElementVNode("div",{class:"steppy-progress-bar",style:e.normalizeStyle("width:"+M.value)},null,4)]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.tabs,(n,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["steppy-item",{current:t.step===a+1,success:t.step>a+1}]),key:a},[e.createElementVNode("div",{class:"steppy-item-counter",style:e.normalizeStyle(D.value)},[n.iconSuccess?(e.openBlock(),e.createElementBlock("img",{key:0,class:"icon-success",src:n.iconSuccess,alt:"Check Mark"},null,8,f)):(e.openBlock(),e.createBlock(d,{key:1,class:"icon-success",color:o.primaryColor1,alt:"Check Mark"},null,8,["color"])),e.createElementVNode("span",S,e.toDisplayString(a+1),1)],4),e.createElementVNode("div",b,[e.createElementVNode("span",g,e.toDisplayString(n.title),1),n.description?(e.openBlock(),e.createElementBlock("span",u,e.toDisplayString(n.description),1)):e.createCommentVNode("",!0)])],2))),128))]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.tabs.length,n=>(e.openBlock(),e.createElementBlock("div",{class:"steppy-content",key:n},[t.step===n?(e.openBlock(),e.createElementBlock("div",B,[e.renderSlot(c.$slots,n,{},void 0,!0)])):e.createCommentVNode("",!0)]))),128)),e.createElementVNode("div",_,[t.step!==1?(e.openBlock(),e.createElementBlock("button",{key:0,class:"btn",type:"button",onClick:T},e.toDisplayString(t.backText),1)):e.createCommentVNode("",!0),t.step!==t.tabs.length?(e.openBlock(),e.createElementBlock("button",{key:1,class:"btn btn--default-2",type:"button",onClick:z,disabled:!t.tabs[t.step-1].isValid},e.toDisplayString(t.nextText),9,h)):(e.openBlock(),e.createElementBlock("button",{key:2,class:"btn btn--default-2",type:"button",onClick:p[0]||(p[0]=(...n)=>o.finalize&&o.finalize(...n)),disabled:!t.tabs[t.step-1].isValid||o.loading},[o.loading?(e.openBlock(),e.createElementBlock("span",V)):(e.openBlock(),e.createElementBlock("span",C,e.toDisplayString(t.doneText),1))],8,E))])],4))}},x=y(N,[["__scopeId","data-v-5df030ab"]]);l.Steppy=x,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
1
+ (function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`body[data-v-dc56ec53]{justify-content:center;align-items:center;width:100%;height:100vh;font-family:sans-serif;display:flex}.tx-default-2[data-v-dc56ec53]{color:var(--primaryColor1);font-weight:600}.wrapper-steppy[data-v-dc56ec53]{padding:60px}.steppy[data-v-dc56ec53]{z-index:0;justify-content:space-between;align-items:center;width:auto;margin-bottom:5px;display:flex;position:relative}.steppy-progress[data-v-dc56ec53]{z-index:-1;background-color:#c5c5c5;height:2px;margin:0 auto;position:absolute;left:0;right:0}.steppy-progress-bar[data-v-dc56ec53]{background-color:var(--primaryColor1);width:0;height:100%;transition:all .5s;position:absolute;left:0}.steppy-item[data-v-dc56ec53]{color:#c5c5c5;flex-direction:column;align-items:center;transition:all .5s;display:flex}.steppy-item-counter[data-v-dc56ec53]{background-color:var(--primaryColor2);border:2px solid #c5c5c5;border-radius:100%;place-items:center;width:68px;height:68px;display:grid;position:relative}.steppy-item-counter .icon-success[data-v-dc56ec53]{opacity:0;width:24px;transition:all .5s;position:absolute;transform:scale(0)}.steppy-item-counter .number[data-v-dc56ec53]{font-size:22px;transition:all .5s}.steppy-item .steppy-item-text[data-v-dc56ec53]{text-align:center;flex-direction:column;align-items:center;gap:2px;width:100%;display:flex;position:absolute;bottom:-58px}.steppy-item .steppy-item-title[data-v-dc56ec53]{font-size:14px;font-weight:500}.steppy-item .steppy-item-description[data-v-dc56ec53]{color:#999;font-size:12px;transition:all .5s}.steppy-item.success .steppy-item-counter[data-v-dc56ec53]{border-color:var(--primaryColor1);height:var(--circleSize);width:var(--circleSize);font-weight:600}.steppy-item.success .steppy-item-counter .icon-success[data-v-dc56ec53]{opacity:1;width:calc(var(--circleSize) * .35);transform:scale(1)}.steppy-item.success .steppy-item-counter .number[data-v-dc56ec53]{opacity:0;font-size:calc(var(--circleSize) * .32);transform:scale(0)}.steppy-item.success .steppy-item-title[data-v-dc56ec53]{color:var(--primaryColor1)}.steppy-item.success .steppy-item-description[data-v-dc56ec53]{color:var(--primaryColor1);opacity:.7}.steppy-item.current .steppy-item-counter[data-v-dc56ec53]{border-color:var(--primaryColor1);background-color:var(--primaryColor1);color:#fff;font-weight:600}.steppy-item.current .steppy-item-title[data-v-dc56ec53]{color:#818181}.steppy-item.current .steppy-item-description[data-v-dc56ec53]{color:#999}.steppy-pane[data-v-dc56ec53]{color:#333;text-align:center;background-color:var(--backgroundColor);margin:var(--contentMarginTop) 0 20px 0;border-radius:15px;padding:25px;box-shadow:0 0 10px #0000004d}.controls[data-v-dc56ec53]{display:flex}.btn[data-v-dc56ec53]{text-align:center;vertical-align:middle;cursor:pointer;color:#333;background-color:#f0f0f0;border:1px solid #f0f0f0;border-radius:4px;justify-content:center;align-items:center;width:fit-content;padding:6px 16px;font-size:.75rem;line-height:1.5;transition:all .15s;display:flex}.btn[data-v-dc56ec53]:disabled{opacity:.5;pointer-events:none}.btn--default-2[data-v-dc56ec53]{background-color:var(--primaryColor1);border-color:var(--primaryColor1);color:#fff;margin-left:auto}.loader[data-v-dc56ec53]{box-sizing:border-box;border:2px solid #fff;border-bottom-color:#0000;border-radius:50%;width:20px;height:20px;animation:1s linear infinite rotation-dc56ec53;display:inline-block}@keyframes rotation-dc56ec53{0%{transform:rotate(0)}to{transform:rotate(360deg)}}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
2
+ (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.Vue3Steppy={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n={__name:`CheckMark`,props:{color:{type:String,default:`black`}},setup(e){return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,{viewBox:`0 0 24 24`,style:(0,t.normalizeStyle)({fill:e.color})},[...r[0]||=[(0,t.createElementVNode)(`path`,{d:`M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z`},null,-1)]],4))}},r=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},i={class:`steppy`},a={class:`steppy-progress`},o=[`src`],s={class:`number`},c={class:`steppy-item-text`},l={class:`steppy-item-title`},u={key:0,class:`steppy-item-description`},d={key:0,class:`steppy-pane`},f={class:`controls`},p=[`disabled`],m=[`disabled`],h={key:0,class:`loader`},g={key:1};e.Steppy=r({__name:`Vue3Steppy`,props:{step:{type:Number,default:1},tabs:{type:Array,default:(0,t.reactive)([{title:`Step 1`,iconSuccess:null,isValid:!0},{title:`Step 2`,iconSuccess:null,isValid:!0},{title:`Step 3`,iconSuccess:null,isValid:!0}])},finalize:{type:Function,default:function(){return{}}},backText:{type:String,default:`Back`},nextText:{type:String,default:`Next`},doneText:{type:String,default:`Done`},loading:{type:Boolean,default:!1},primaryColor1:{type:String,default:`orange`},primaryColor2:{type:String,default:`#fff`},backgroundColor:{type:String,default:`#fff`},circleSize:{type:Number,default:68},contentMarginTop:{type:Number,default:60}},emits:[`update:step`],setup(e,{emit:r}){let _=r,v=e,y=(0,t.computed)(()=>({"--primaryColor1":v.primaryColor1,"--primaryColor2":v.primaryColor2,"--backgroundColor":v.backgroundColor,"--circleSize":`${v.circleSize}px`,"--contentMarginTop":`${v.contentMarginTop}px`})),b=()=>{_(`update:step`,v.step+1)},x=()=>{_(`update:step`,v.step-1)},S=(0,t.computed)(()=>100/(v.tabs.length-1)*(v.step-1)+`%`),C=(0,t.computed)(()=>({height:`${v.circleSize}px`,width:`${v.circleSize}px`}));return(r,_)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`wrapper-steppy`,style:(0,t.normalizeStyle)(y.value)},[(0,t.createElementVNode)(`div`,i,[(0,t.createElementVNode)(`div`,a,[(0,t.createElementVNode)(`div`,{class:`steppy-progress-bar`,style:(0,t.normalizeStyle)(`width:`+S.value)},null,4)]),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(v.tabs,(r,i)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)([`steppy-item`,{current:v.step===i+1,success:v.step>i+1}]),key:i},[(0,t.createElementVNode)(`div`,{class:`steppy-item-counter`,style:(0,t.normalizeStyle)(C.value)},[r.iconSuccess?((0,t.openBlock)(),(0,t.createElementBlock)(`img`,{key:0,class:`icon-success`,src:r.iconSuccess,alt:`Check Mark`},null,8,o)):((0,t.openBlock)(),(0,t.createBlock)(n,{key:1,class:`icon-success`,color:e.primaryColor1,alt:`Check Mark`},null,8,[`color`])),(0,t.createElementVNode)(`span`,s,(0,t.toDisplayString)(i+1),1)],4),(0,t.createElementVNode)(`div`,c,[(0,t.createElementVNode)(`span`,l,(0,t.toDisplayString)(r.title),1),r.description?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,u,(0,t.toDisplayString)(r.description),1)):(0,t.createCommentVNode)(``,!0)])],2))),128))]),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(v.tabs.length,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`steppy-content`,key:e},[v.step===e?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,d,[(0,t.renderSlot)(r.$slots,e,{},void 0,!0)])):(0,t.createCommentVNode)(``,!0)]))),128)),(0,t.createElementVNode)(`div`,f,[v.step===1?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:0,class:`btn`,type:`button`,onClick:x},(0,t.toDisplayString)(v.backText),1)),v.step===v.tabs.length?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:2,class:`btn btn--default-2`,type:`button`,onClick:_[0]||=(...t)=>e.finalize&&e.finalize(...t),disabled:!v.tabs[v.step-1].isValid||e.loading},[e.loading?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,h)):((0,t.openBlock)(),(0,t.createElementBlock)(`span`,g,(0,t.toDisplayString)(v.doneText),1))],8,m)):((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:1,class:`btn btn--default-2`,type:`button`,onClick:b,disabled:!v.tabs[v.step-1].isValid},(0,t.toDisplayString)(v.nextText),9,p))])],4))}},[[`__scopeId`,`data-v-dc56ec53`]])});
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "vue3-steppy",
3
3
  "description": "A customizable Vue 3 Stepper plugin",
4
- "version": "1.6.0",
4
+ "version": "1.6.2",
5
5
  "type": "module",
6
6
  "private": false,
7
7
  "author": "Mike Konstantakos",
@@ -41,27 +41,31 @@
41
41
  "scripts": {
42
42
  "dev": "vite",
43
43
  "build": "vite build && shx cp ./src/vue3-steppy.d.ts dist",
44
- "predeploy": "npm run build",
44
+ "build:demo": "bash build-demo.sh",
45
+ "predeploy": "npm run build:demo",
45
46
  "deploy": "gh-pages -d dist",
46
47
  "preview": "vite preview",
47
- "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
48
+ "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix"
48
49
  },
49
50
  "dependencies": {
50
- "vue": "^3.5.30"
51
+ "vue": "^3.5.35"
51
52
  },
52
53
  "devDependencies": {
54
+ "@eslint/js": "^10.0.1",
53
55
  "@rushstack/eslint-patch": "^1.16.1",
54
- "@vitejs/plugin-vue": "^6.0.4",
56
+ "@typescript-eslint/parser": "^8.60.0",
57
+ "@vitejs/plugin-vue": "^6.0.7",
55
58
  "@vue/eslint-config-prettier": "^10.2.0",
56
- "eslint": "10.0.3",
57
- "eslint-plugin-vue": "^10.8.0",
59
+ "eslint": "10.4.0",
60
+ "eslint-plugin-vue": "^10.9.1",
58
61
  "gh-pages": "^6.3.0",
59
- "prettier": "^3.8.1",
60
- "sass": "^1.97.3",
62
+ "prettier": "^3.8.3",
63
+ "sass": "^1.100.0",
61
64
  "shx": "^0.4.0",
62
- "typescript": "^5.9.3",
63
- "vite": "^7.3.1",
64
- "vite-plugin-css-injected-by-js": "^4.0.1"
65
+ "typescript": "^6.0.3",
66
+ "vite": "^8.0.14",
67
+ "vite-plugin-css-injected-by-js": "^5.0.1",
68
+ "vue-eslint-parser": "^10.4.0"
65
69
  },
66
70
  "directories": {
67
71
  "lib": "lib"