vue3-steppy 1.6.1 → 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.
- package/dist/vue3-steppy.cjs.js +2 -2
- package/dist/vue3-steppy.es.js +2 -2
- package/dist/vue3-steppy.umd.js +2 -2
- package/package.json +11 -11
package/dist/vue3-steppy.cjs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
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)}}
|
|
2
|
-
|
|
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.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
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)}}
|
|
2
|
-
|
|
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
3
|
//#region src/components/CheckMark.vue
|
|
4
4
|
var p = {
|
|
5
5
|
__name: "CheckMark",
|
package/dist/vue3-steppy.umd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
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)}}
|
|
2
|
-
|
|
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.
|
|
4
|
+
"version": "1.6.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"private": false,
|
|
7
7
|
"author": "Mike Konstantakos",
|
|
@@ -48,23 +48,23 @@
|
|
|
48
48
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"vue": "^3.5.
|
|
51
|
+
"vue": "^3.5.35"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@eslint/js": "^10.0.1",
|
|
55
55
|
"@rushstack/eslint-patch": "^1.16.1",
|
|
56
|
-
"@typescript-eslint/parser": "^8.
|
|
57
|
-
"@vitejs/plugin-vue": "^6.0.
|
|
56
|
+
"@typescript-eslint/parser": "^8.60.0",
|
|
57
|
+
"@vitejs/plugin-vue": "^6.0.7",
|
|
58
58
|
"@vue/eslint-config-prettier": "^10.2.0",
|
|
59
|
-
"eslint": "10.
|
|
60
|
-
"eslint-plugin-vue": "^10.
|
|
59
|
+
"eslint": "10.4.0",
|
|
60
|
+
"eslint-plugin-vue": "^10.9.1",
|
|
61
61
|
"gh-pages": "^6.3.0",
|
|
62
|
-
"prettier": "^3.8.
|
|
63
|
-
"sass": "^1.
|
|
62
|
+
"prettier": "^3.8.3",
|
|
63
|
+
"sass": "^1.100.0",
|
|
64
64
|
"shx": "^0.4.0",
|
|
65
|
-
"typescript": "^6.0.
|
|
66
|
-
"vite": "^8.0.
|
|
67
|
-
"vite-plugin-css-injected-by-js": "^
|
|
65
|
+
"typescript": "^6.0.3",
|
|
66
|
+
"vite": "^8.0.14",
|
|
67
|
+
"vite-plugin-css-injected-by-js": "^5.0.1",
|
|
68
68
|
"vue-eslint-parser": "^10.4.0"
|
|
69
69
|
},
|
|
70
70
|
"directories": {
|