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