vue3-steppy 1.3.2 → 1.5.0

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 (7) hide show
  1. package/README.md +21 -135
  2. package/dist/vue3-steppy.cjs.js +2 -0
  3. package/dist/vue3-steppy.d.ts +21 -0
  4. package/dist/vue3-steppy.umd.js +2 -0
  5. package/package.json +16 -12
  6. package/dist/vue3-steppy.umd.cjs +0 -2
  7. /package/dist/{vue3-steppy.js → vue3-steppy.es.js} +0 -0
package/README.md CHANGED
@@ -24,6 +24,7 @@ You can try a live demo [here](https://laximas.github.io/vue3-steppy/)
24
24
  * Change step content
25
25
  * Configure finalization
26
26
  * Show loading spinner
27
+ * Typescript support
27
28
  * Customizable
28
29
  - Colors
29
30
  - Titles
@@ -40,141 +41,25 @@ Import
40
41
  ```js
41
42
  import {Steppy} from 'vue3-steppy'
42
43
  ```
43
- Template
44
- ```html
45
- <Steppy v-model:step="step">
46
- <template #1><!-- Step 1 Content --></template>
47
- <template #2><!-- Step 2 Content --></template>
48
- <template #3><!-- Step 3 Content --></template>
49
- </Steppy>
50
- ```
51
- API Props
52
- ```js
53
- /**
54
- * Contains the current step. Very similar to a
55
- * `value` attribute on an input. In most cases, you'll want
56
- * to set this as a two-way binding, using the `v-model` directive.
57
- * @type {Number}
58
- */
59
- step: {
60
- type: Number,
61
- default: 1
62
- }
63
-
64
- /**
65
- * Contains the steps with custom titles and icons.
66
- * @type {Array}
67
- *
68
- * @param {Image} iconSuccess - You can point to an imported icon from you assets like:
69
- * import CheckMark from '../assets/check-mark.png'
70
- * If you set it to null, a default SVG will be used with primary color 1.
71
- *
72
- * @param {boolean} isValid - Used to determine if the user can move to the next step.
73
- */
74
- tabs: {
75
- type: Array,
76
- default: reactive([
77
- {
78
- title: 'Step 1',
79
- iconSuccess: null,
80
- isValid: true
81
- },
82
- {
83
- title: 'Step 2',
84
- iconSuccess: null,
85
- isValid: true
86
- },
87
- {
88
- title: 'Step 3',
89
- iconSuccess: null,
90
- isValid: true
91
- }
92
- ])
93
- }
94
-
95
- /**
96
- * Function that will run after all steps are completed (done button is clicked).
97
- * @type {Function}
98
- */
99
- finalize: {
100
- type: Function,
101
- default: function () {
102
- return {}
103
- }
104
- }
105
-
106
- /**
107
- * Text for back button.
108
- * @type {String}
109
- */
110
- backText: {
111
- type: String,
112
- default: 'Back'
113
- }
114
-
115
- /**
116
- * Text for next button.
117
- * @type {String}
118
- */
119
- nextText: {
120
- type: String,
121
- default: 'Next'
122
- }
123
-
124
- /**
125
- * Text for done button.
126
- * @type {String}
127
- */
128
- doneText: {
129
- type: String,
130
- default: 'Done'
131
- }
132
-
133
- /**
134
- * Show loading spinner on done button
135
- * @type {Boolean}
136
- */
137
- loading: {
138
- type: Boolean,
139
- default: false
140
- }
141
-
142
- /**
143
- * Primary Color 1
144
- * @type {String}
145
- */
146
- primaryColor1: {
147
- type: String,
148
- default: 'orange'
149
- }
150
-
151
- /**
152
- * Background Color of the content box
153
- * @type {String}
154
- */
155
- backgroundColor: {
156
- type: String,
157
- default: "#fff",
158
- },
159
-
160
- /**
161
- * Primary Color 2
162
- * @type {String}
163
- */
164
- primaryColor2: {
165
- type: String,
166
- default: '#fff'
167
- }
168
-
169
- /**
170
- * Adjust the size of the circles
171
- * @type {Number}
172
- */
173
- circleSize: {
174
- type: Number,
175
- default: 68,
176
- }
177
- ```
44
+
45
+ For an implementation example, see the [App.vue](./src/App.vue) file in the repository.
46
+
47
+ ## Props
48
+
49
+ | Prop | Type | Default | Description |
50
+ |-------------------|----------|------------|-----------------------------------------------------------------------------|
51
+ | `step` | Number | `1` | The current step number. |
52
+ | `tabs` | Array | `[]` | Array of step objects with titles and flags for validity and success icons. |
53
+ | `finalize` | Function | `() => {}` | Function to call when the final step is completed. |
54
+ | `backText` | String | `"Back"` | Text displayed on the back button. |
55
+ | `nextText` | String | `"Next"` | Text displayed on the next button. |
56
+ | `doneText` | String | `"Done"` | Text displayed on the done button. |
57
+ | `loading` | Boolean | `false` | Indicates whether the final step is in a loading state. |
58
+ | `primaryColor1` | String | `"orange"` | Primary color for the stepper's theme. |
59
+ | `primaryColor2` | String | `"#fff"` | Secondary color for the stepper's theme. |
60
+ | `backgroundColor` | String | `"#fff"` | Background color for the stepper. |
61
+ | `circleSize` | Number | `68` | Size of the circles in the step indicators. |
62
+
178
63
 
179
64
  ## Dependencies
180
65
 
@@ -184,6 +69,7 @@ This software uses the following open source packages:
184
69
 
185
70
  #### Dev Dependencies
186
71
  - [Vite](https://vitejs.dev)
72
+ - [Typescript](https://www.typescriptlang.org/)
187
73
  - [sass](https://www.npmjs.com/package/sass)
188
74
  - [Eslint](https://eslint.org)
189
75
  - [Prettier](https://prettier.io)
package/dist/vue3-steppy.cjs.js ADDED
@@ -0,0 +1,2 @@
1
+ (function(){"use strict";try{if(typeof document!="undefined"){var t=document.createElement("style");t.appendChild(document.createTextNode("body[data-v-8a738045]{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;font-family:sans-serif}.tx-default-2[data-v-8a738045]{color:var(--primaryColor1);font-weight:600}.wrapper-steppy[data-v-8a738045]{padding:60px}.steppy[data-v-8a738045]{display:flex;align-items:center;justify-content:space-between;width:auto;position:relative;z-index:0;margin-bottom:5px}.steppy-progress[data-v-8a738045]{position:absolute;background-color:#c5c5c5;height:2px;z-index:-1;left:0;right:0;margin:0 auto}.steppy-progress-bar[data-v-8a738045]{position:absolute;left:0;height:100%;width:0;background-color:var(--primaryColor1);transition:all .5s ease}.steppy-item[data-v-8a738045]{display:flex;flex-direction:column;align-items:center;color:#c5c5c5;transition:all .5s ease}.steppy-item-counter[data-v-8a738045]{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-8a738045]{position:absolute;opacity:0;transform:scale(0);width:24px;transition:all .5s ease}.steppy-item-counter .number[data-v-8a738045]{font-size:22px;transition:all .5s ease}.steppy-item-title[data-v-8a738045]{position:absolute;text-align:center;font-size:14px;bottom:-43px}.steppy-item.success .steppy-item-counter[data-v-8a738045]{border-color:var(--primaryColor1);font-weight:600;height:var(--circleSize);width:var(--circleSize)}.steppy-item.success .steppy-item-counter .icon-success[data-v-8a738045]{opacity:1;transform:scale(1);width:calc(var(--circleSize) * .35)}.steppy-item.success .steppy-item-counter .number[data-v-8a738045]{opacity:0;transform:scale(0);font-size:calc(var(--circleSize) * .32)}.steppy-item.success .steppy-item-title[data-v-8a738045]{color:var(--primaryColor1)}.steppy-item.current .steppy-item-counter[data-v-8a738045]{border-color:var(--primaryColor1);background-color:var(--primaryColor1);color:#fff;font-weight:600}.steppy-item.current .steppy-item-title[data-v-8a738045]{color:#818181}.steppy-pane[data-v-8a738045]{color:#333;text-align:center;background-color:var(--backgroundColor);border-radius:15px;padding:25px;box-shadow:0 0 10px #0000004d;margin:60px 0 20px}.controls[data-v-8a738045]{display:flex}.btn[data-v-8a738045]{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-8a738045]:disabled{opacity:.5;pointer-events:none}.btn--default-2[data-v-8a738045]{background-color:var(--primaryColor1);border-color:var(--primaryColor1);color:#fff;margin-left:auto}.loader[data-v-8a738045]{width:20px;height:20px;border:2px solid #fff;border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation-8a738045 1s linear infinite}@keyframes rotation-8a738045{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=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),k=[m],_={__name:"CheckMark",props:{color:{type:String,default:"black"}},setup(o){return(n,s)=>(e.openBlock(),e.createElementBlock("svg",{viewBox:"0 0 24 24",style:e.normalizeStyle({fill:o.color})},k,4))}};const S=(o,n)=>{const s=o.__vccOpts||o;for(const[t,a]of n)s[t]=a;return s},b={class:"steppy"},g={class:"steppy-progress"},f=["src"],B={class:"number"},h={class:"steppy-item-title"},v={key:0,class:"steppy-pane"},E={class:"controls"},C=["disabled"],V=["disabled"],z={key:0,class:"loader"},N={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}},emits:["update:step"],setup(o,{emit:n}){const s=n,t=o,a=e.computed(()=>({"--primaryColor1":t.primaryColor1,"--primaryColor2":t.primaryColor2,"--backgroundColor":t.backgroundColor,"--circleSize":`${t.circleSize}px`})),p=()=>{const c=t.step+1;s("update:step",c)},u=()=>{const c=t.step-1;s("update:step",c)},d=e.computed(()=>100/(t.tabs.length-1)*(t.step-1)+"%"),y=e.computed(()=>({height:`${t.circleSize}px`,width:`${t.circleSize}px`}));return(c,i)=>(e.openBlock(),e.createElementBlock("div",{class:"wrapper-steppy",style:e.normalizeStyle(a.value)},[e.createElementVNode("div",b,[e.createElementVNode("div",g,[e.createElementVNode("div",{class:"steppy-progress-bar",style:e.normalizeStyle("width:"+d.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,f)):(e.openBlock(),e.createBlock(_,{key:1,class:"icon-success",color:o.primaryColor1,alt:"Check Mark"},null,8,["color"])),e.createElementVNode("span",B,e.toDisplayString(r+1),1)],4),e.createElementVNode("span",h,e.toDisplayString(l.title),1)],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",v,[e.renderSlot(c.$slots,l,{},void 0,!0)])):e.createCommentVNode("",!0)]))),128)),e.createElementVNode("div",E,[t.step!==1?(e.openBlock(),e.createElementBlock("button",{key:0,class:"btn",type:"button",onClick:u},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",z)):(e.openBlock(),e.createElementBlock("span",N,e.toDisplayString(t.doneText),1))],8,V))])],4))}},T=S(x,[["__scopeId","data-v-8a738045"]]);exports.Steppy=T;
package/dist/vue3-steppy.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ declare module '@/components/Vue3Steppy.vue' {
2
+ import { DefineComponent } from 'vue';
3
+
4
+ export interface SteppyProps {
5
+ step: number;
6
+ tabs: Array<{ title: string; iconSuccess?: string; isValid: boolean; }>;
7
+ finalize: () => void;
8
+ backText: string;
9
+ nextText: string;
10
+ doneText: string;
11
+ loading: boolean;
12
+ primaryColor1: string;
13
+ primaryColor2: string;
14
+ backgroundColor: string;
15
+ circleSize: number;
16
+ }
17
+
18
+ const Steppy: DefineComponent<SteppyProps>;
19
+
20
+ export default Steppy;
21
+ }
package/dist/vue3-steppy.umd.js ADDED
@@ -0,0 +1,2 @@
1
+ (function(){"use strict";try{if(typeof document!="undefined"){var t=document.createElement("style");t.appendChild(document.createTextNode("body[data-v-8a738045]{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;font-family:sans-serif}.tx-default-2[data-v-8a738045]{color:var(--primaryColor1);font-weight:600}.wrapper-steppy[data-v-8a738045]{padding:60px}.steppy[data-v-8a738045]{display:flex;align-items:center;justify-content:space-between;width:auto;position:relative;z-index:0;margin-bottom:5px}.steppy-progress[data-v-8a738045]{position:absolute;background-color:#c5c5c5;height:2px;z-index:-1;left:0;right:0;margin:0 auto}.steppy-progress-bar[data-v-8a738045]{position:absolute;left:0;height:100%;width:0;background-color:var(--primaryColor1);transition:all .5s ease}.steppy-item[data-v-8a738045]{display:flex;flex-direction:column;align-items:center;color:#c5c5c5;transition:all .5s ease}.steppy-item-counter[data-v-8a738045]{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-8a738045]{position:absolute;opacity:0;transform:scale(0);width:24px;transition:all .5s ease}.steppy-item-counter .number[data-v-8a738045]{font-size:22px;transition:all .5s ease}.steppy-item-title[data-v-8a738045]{position:absolute;text-align:center;font-size:14px;bottom:-43px}.steppy-item.success .steppy-item-counter[data-v-8a738045]{border-color:var(--primaryColor1);font-weight:600;height:var(--circleSize);width:var(--circleSize)}.steppy-item.success .steppy-item-counter .icon-success[data-v-8a738045]{opacity:1;transform:scale(1);width:calc(var(--circleSize) * .35)}.steppy-item.success .steppy-item-counter .number[data-v-8a738045]{opacity:0;transform:scale(0);font-size:calc(var(--circleSize) * .32)}.steppy-item.success .steppy-item-title[data-v-8a738045]{color:var(--primaryColor1)}.steppy-item.current .steppy-item-counter[data-v-8a738045]{border-color:var(--primaryColor1);background-color:var(--primaryColor1);color:#fff;font-weight:600}.steppy-item.current .steppy-item-title[data-v-8a738045]{color:#818181}.steppy-pane[data-v-8a738045]{color:#333;text-align:center;background-color:var(--backgroundColor);border-radius:15px;padding:25px;box-shadow:0 0 10px #0000004d;margin:60px 0 20px}.controls[data-v-8a738045]{display:flex}.btn[data-v-8a738045]{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-8a738045]:disabled{opacity:.5;pointer-events:none}.btn--default-2[data-v-8a738045]{background-color:var(--primaryColor1);border-color:var(--primaryColor1);color:#fff;margin-left:auto}.loader[data-v-8a738045]{width:20px;height:20px;border:2px solid #fff;border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation-8a738045 1s linear infinite}@keyframes rotation-8a738045{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=[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)],y={__name:"CheckMark",props:{color:{type:String,default:"black"}},setup(o){return(r,n)=>(e.openBlock(),e.createElementBlock("svg",{viewBox:"0 0 24 24",style:e.normalizeStyle({fill:o.color})},d,4))}},M="",m=(o,r)=>{const n=o.__vccOpts||o;for(const[t,i]of r)n[t]=i;return n},k={class:"steppy"},f={class:"steppy-progress"},_=["src"],u={class:"number"},S={class:"steppy-item-title"},b={key:0,class:"steppy-pane"},g={class:"controls"},B=["disabled"],h=["disabled"],E={key:0,class:"loader"},V={key:1},C={__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}},emits:["update:step"],setup(o,{emit:r}){const n=r,t=o,i=e.computed(()=>({"--primaryColor1":t.primaryColor1,"--primaryColor2":t.primaryColor2,"--backgroundColor":t.backgroundColor,"--circleSize":`${t.circleSize}px`})),x=()=>{const c=t.step+1;n("update:step",c)},N=()=>{const c=t.step-1;n("update:step",c)},T=e.computed(()=>100/(t.tabs.length-1)*(t.step-1)+"%"),$=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",k,[e.createElementVNode("div",f,[e.createElementVNode("div",{class:"steppy-progress-bar",style:e.normalizeStyle("width:"+T.value)},null,4)]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.tabs,(s,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($.value)},[s.iconSuccess?(e.openBlock(),e.createElementBlock("img",{key:0,class:"icon-success",src:s.iconSuccess,alt:"Check Mark"},null,8,_)):(e.openBlock(),e.createBlock(y,{key:1,class:"icon-success",color:o.primaryColor1,alt:"Check Mark"},null,8,["color"])),e.createElementVNode("span",u,e.toDisplayString(a+1),1)],4),e.createElementVNode("span",S,e.toDisplayString(s.title),1)],2))),128))]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.tabs.length,s=>(e.openBlock(),e.createElementBlock("div",{class:"steppy-content",key:s},[t.step===s?(e.openBlock(),e.createElementBlock("div",b,[e.renderSlot(c.$slots,s,{},void 0,!0)])):e.createCommentVNode("",!0)]))),128)),e.createElementVNode("div",g,[t.step!==1?(e.openBlock(),e.createElementBlock("button",{key:0,class:"btn",type:"button",onClick:N},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:x,disabled:!t.tabs[t.step-1].isValid},e.toDisplayString(t.nextText),9,B)):(e.openBlock(),e.createElementBlock("button",{key:2,class:"btn btn--default-2",type:"button",onClick:p[0]||(p[0]=(...s)=>o.finalize&&o.finalize(...s)),disabled:!t.tabs[t.step-1].isValid||o.loading},[o.loading?(e.openBlock(),e.createElementBlock("span",E)):(e.openBlock(),e.createElementBlock("span",V,e.toDisplayString(t.doneText),1))],8,h))])],4))}},z=m(C,[["__scopeId","data-v-8a738045"]]);l.Steppy=z,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
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.3.2",
4
+ "version": "1.5.0",
5
5
  "type": "module",
6
6
  "private": false,
7
7
  "author": "Mike Konstantakos",
@@ -27,35 +27,39 @@
27
27
  "files": [
28
28
  "dist"
29
29
  ],
30
- "main": "./dist/vue3-steppy.umd.cjs",
31
- "module": "./dist/vue3-steppy.js",
30
+ "main": "./dist/vue3-steppy.cjs.js",
31
+ "module": "./dist/vue3-steppy.es.js",
32
+ "types": "./dist/vue3-steppy.d.ts",
33
+ "typings": "./dist/vue3-steppy.d.ts",
32
34
  "exports": {
33
35
  ".": {
34
- "import": "./dist/vue3-steppy.js",
35
- "require": "./dist/vue3-steppy.umd.cjs"
36
+ "import": "./dist/vue3-steppy.es.js",
37
+ "require": "./dist/vue3-steppy.cjs.js",
38
+ "default": "./dist/vue3-steppy.umd.js"
36
39
  }
37
40
  },
38
41
  "scripts": {
39
42
  "dev": "vite",
40
- "build": "vite build",
43
+ "build": "vite build && shx cp ./src/vue3-steppy.d.ts dist",
41
44
  "predeploy": "npm run build",
42
45
  "deploy": "gh-pages -d dist",
43
46
  "preview": "vite preview",
44
47
  "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
45
48
  },
46
49
  "dependencies": {
47
- "vue": "^3.4.15"
50
+ "vue": "^3.4.21"
48
51
  },
49
52
  "devDependencies": {
50
- "@rushstack/eslint-patch": "^1.7.0",
53
+ "@rushstack/eslint-patch": "^1.8.0",
51
54
  "@vitejs/plugin-vue": "^4.6.2",
52
- "@vue/cli-service": "~5.0.8",
53
55
  "@vue/eslint-config-prettier": "^7.1.0",
54
- "eslint": "^8.56.0",
55
- "eslint-plugin-vue": "^9.20.1",
56
+ "eslint": "^8.57.0",
57
+ "eslint-plugin-vue": "^9.23.0",
56
58
  "gh-pages": "^5.0.0",
57
59
  "prettier": "^2.8.8",
58
- "sass": "^1.70.0",
60
+ "sass": "^1.72.0",
61
+ "shx": "^0.3.4",
62
+ "typescript": "^5.4.3",
59
63
  "vite": "^4.5.2",
60
64
  "vite-plugin-css-injected-by-js": "^2.4.0"
61
65
  },
package/dist/vue3-steppy.umd.cjs DELETED
@@ -1,2 +0,0 @@
1
- (function(){"use strict";try{if(typeof document!="undefined"){var t=document.createElement("style");t.appendChild(document.createTextNode("body[data-v-8a738045]{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;font-family:sans-serif}.tx-default-2[data-v-8a738045]{color:var(--primaryColor1);font-weight:600}.wrapper-steppy[data-v-8a738045]{padding:60px}.steppy[data-v-8a738045]{display:flex;align-items:center;justify-content:space-between;width:auto;position:relative;z-index:0;margin-bottom:5px}.steppy-progress[data-v-8a738045]{position:absolute;background-color:#c5c5c5;height:2px;z-index:-1;left:0;right:0;margin:0 auto}.steppy-progress-bar[data-v-8a738045]{position:absolute;left:0;height:100%;width:0;background-color:var(--primaryColor1);transition:all .5s ease}.steppy-item[data-v-8a738045]{display:flex;flex-direction:column;align-items:center;color:#c5c5c5;transition:all .5s ease}.steppy-item-counter[data-v-8a738045]{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-8a738045]{position:absolute;opacity:0;transform:scale(0);width:24px;transition:all .5s ease}.steppy-item-counter .number[data-v-8a738045]{font-size:22px;transition:all .5s ease}.steppy-item-title[data-v-8a738045]{position:absolute;text-align:center;font-size:14px;bottom:-43px}.steppy-item.success .steppy-item-counter[data-v-8a738045]{border-color:var(--primaryColor1);font-weight:600;height:var(--circleSize);width:var(--circleSize)}.steppy-item.success .steppy-item-counter .icon-success[data-v-8a738045]{opacity:1;transform:scale(1);width:calc(var(--circleSize) * .35)}.steppy-item.success .steppy-item-counter .number[data-v-8a738045]{opacity:0;transform:scale(0);font-size:calc(var(--circleSize) * .32)}.steppy-item.success .steppy-item-title[data-v-8a738045]{color:var(--primaryColor1)}.steppy-item.current .steppy-item-counter[data-v-8a738045]{border-color:var(--primaryColor1);background-color:var(--primaryColor1);color:#fff;font-weight:600}.steppy-item.current .steppy-item-title[data-v-8a738045]{color:#818181}.steppy-pane[data-v-8a738045]{color:#333;text-align:center;background-color:var(--backgroundColor);border-radius:15px;padding:25px;box-shadow:0 0 10px #0000004d;margin:60px 0 20px}.controls[data-v-8a738045]{display:flex}.btn[data-v-8a738045]{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-8a738045]:disabled{opacity:.5;pointer-events:none}.btn--default-2[data-v-8a738045]{background-color:var(--primaryColor1);border-color:var(--primaryColor1);color:#fff;margin-left:auto}.loader[data-v-8a738045]{width:20px;height:20px;border:2px solid #fff;border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation-8a738045 1s linear infinite}@keyframes rotation-8a738045{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["vue3-steppy"]={},l.Vue))})(this,function(l,e){"use strict";const d=[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)],y={__name:"CheckMark",props:{color:{type:String,default:"black"}},setup(o){return(r,n)=>(e.openBlock(),e.createElementBlock("svg",{viewBox:"0 0 24 24",style:e.normalizeStyle({fill:o.color})},d,4))}},M="",m=(o,r)=>{const n=o.__vccOpts||o;for(const[t,i]of r)n[t]=i;return n},k={class:"steppy"},f={class:"steppy-progress"},_=["src"],u={class:"number"},S={class:"steppy-item-title"},b={key:0,class:"steppy-pane"},g={class:"controls"},B=["disabled"],h=["disabled"],E={key:0,class:"loader"},V={key:1},C={__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}},emits:["update:step"],setup(o,{emit:r}){const n=r,t=o,i=e.computed(()=>({"--primaryColor1":t.primaryColor1,"--primaryColor2":t.primaryColor2,"--backgroundColor":t.backgroundColor,"--circleSize":`${t.circleSize}px`})),x=()=>{const c=t.step+1;n("update:step",c)},N=()=>{const c=t.step-1;n("update:step",c)},T=e.computed(()=>100/(t.tabs.length-1)*(t.step-1)+"%"),$=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",k,[e.createElementVNode("div",f,[e.createElementVNode("div",{class:"steppy-progress-bar",style:e.normalizeStyle("width:"+T.value)},null,4)]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.tabs,(s,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($.value)},[s.iconSuccess?(e.openBlock(),e.createElementBlock("img",{key:0,class:"icon-success",src:s.iconSuccess,alt:"Check Mark"},null,8,_)):(e.openBlock(),e.createBlock(y,{key:1,class:"icon-success",color:o.primaryColor1,alt:"Check Mark"},null,8,["color"])),e.createElementVNode("span",u,e.toDisplayString(a+1),1)],4),e.createElementVNode("span",S,e.toDisplayString(s.title),1)],2))),128))]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.tabs.length,s=>(e.openBlock(),e.createElementBlock("div",{class:"steppy-content",key:s},[t.step===s?(e.openBlock(),e.createElementBlock("div",b,[e.renderSlot(c.$slots,s,{},void 0,!0)])):e.createCommentVNode("",!0)]))),128)),e.createElementVNode("div",g,[t.step!==1?(e.openBlock(),e.createElementBlock("button",{key:0,class:"btn",type:"button",onClick:N},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:x,disabled:!t.tabs[t.step-1].isValid},e.toDisplayString(t.nextText),9,B)):(e.openBlock(),e.createElementBlock("button",{key:2,class:"btn btn--default-2",type:"button",onClick:p[0]||(p[0]=(...s)=>o.finalize&&o.finalize(...s)),disabled:!t.tabs[t.step-1].isValid||o.loading},[o.loading?(e.openBlock(),e.createElementBlock("span",E)):(e.openBlock(),e.createElementBlock("span",V,e.toDisplayString(t.doneText),1))],8,h))])],4))}},z=m(C,[["__scopeId","data-v-8a738045"]]);l.Steppy=z,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
/package/dist/{vue3-steppy.js → vue3-steppy.es.js} RENAMED
File without changes