vue3-steppy/dist/vue3-steppy.umd.js

A customizable Vue 3 Stepper plugin

(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)}})();
(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=()=>{let e=v.step+1;_(`update:step`,e)},x=()=>{let e=v.step-1;_(`update:step`,e)},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`]])});