vue3-steppy 1.0.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Mike Konstantakos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,178 @@
+<h1 align="center">Steppy</h1>
+
+<h4 align="center">A simple Stepper component for Vue 3</h4>
+
+<p align="center">
+  <a href="">
+    <img src=""
+         alt="npm">
+  </a>
+</p>
+
+<p align="center">
+  <a href="#demo">Demo</a> •
+  <a href="#key-features">Key Features</a> •
+  <a href="#how-to-use">How To Use</a> •
+  <a href="#credits">Credits</a> •
+  <a href="#license">License</a>
+</p>
+
+## Demo
+
+You can try a live demo [here](https://laximas.github.io/vue3-steppy/)
+
+## Key Features
+
+* Keep track of current step
+* Change step content
+* Configure finalization
+* Customizable
+    - Colors
+    - Titles
+    - Icons
+    - Button text
+
+## How To Use
+Install
+```bash
+$ npm install vue3-steppy
+```
+Import
+```js
+import {Steppy} from 'vue3-steppy'
+```
+Template
+```html
+<Steppo v-model:step="step">
+  <template #1><!-- Step 1 Content --></template>
+  <template #2><!-- Step 2 Content --></template>
+  <template #3><!-- Step 3 Content --></template>
+</Steppo>
+```
+API Props
+```js
+/**
+ * Contains the current step. Very similar to a
+ * `value` attribute on an input. In most cases, you'll want
+ * to set this as a two-way binding, using the `v-model` directive.
+ * @type {Number}
+ */
+step: {
+  type: Number,
+  default: 1
+},
+
+/**
+ * Contains the steps with custom titles and icons.
+ * @type {Array}
+ * 
+ * @param {Image} iconSuccess - You can point to an imported icon from you assets like:
+ * import CheckMark from '../assets/check-mark.png'
+ * If you set it to null, a default SVG will be used with primary color 1.
+ * 
+ * @param {boolean} isValid - Used to determine if the user can move to the next step.
+ */
+tabs: {
+  type: Array,
+  default: reactive([
+    {
+      title: 'Step 1',
+      iconSuccess: null,
+      isValid: true
+    },
+    {
+      title: 'Step 2',
+      iconSuccess: null,
+      isValid: true
+    },
+    {
+      title: 'Step 3',
+      iconSuccess: null,
+      isValid: true
+    }
+  ])
+},
+
+/**
+ * Function that will run after all steps are completed (done button is clicked).
+ * @type {Object}
+ */
+finalize: {
+  type: Function,
+default: function () {
+    return {}
+  }
+},
+
+/**
+ * Text for back button.
+ * @type {String}
+ */
+backText: {
+  type: String,
+default: 'Back'
+},
+
+/**
+ * Text for next button.
+ * @type {String}
+ */
+nextText: {
+  type: String,
+default: 'Next'
+},
+
+/**
+ * Text for done button.
+ * @type {String}
+ */
+doneText: {
+  type: String,
+default: 'Done'
+},
+
+/**
+ * Primary Color 1
+ * @type {String}
+ */
+,
+primaryColor1: {
+  type: String,
+  default: 'orange'
+},
+
+/**
+ * Primary Color 2
+ * @type {String}
+ */
+,
+primaryColor2: {
+  type: String,
+  default: '#C5C5C5'
+}
+```
+
+## Credits
+
+This software uses the following open source packages:
+
+- [Vue 3](https://vuejs.org)
+- [Vite](https://vitejs.dev)
+- [core-js](https://www.npmjs.com/package/core-js)
+- [sass](https://www.npmjs.com/package/sass)
+- [sass-loader](https://www.npmjs.com/package/sass-loader)
+- [node-sass](https://www.npmjs.com/package/node-sass)
+- [gh-pages](https://www.npmjs.com/package/gh-pages)
+
+## Support
+
+<a href="https://www.buymeacoffee.com/laximas" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
+
+## License
+
+[MIT](https://github.com/Laximas/vue3-steppy/blob/main/LICENSE.md)
+
+---
+
+> GitHub [Laximas](https://github.com/Laximas) &nbsp;&middot;&nbsp;
+> LinkedIn [Mike Konstantakos](https://www.linkedin.com/in/mike-konstantakos/)

package/dist/vue3-steppy.js

@@ -0,0 +1,157 @@
+(function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.appendChild(document.createTextNode("body[data-v-ba058e75]{background-image:linear-gradient(60deg,#abecd6 0%,#fbed96 100%);color:#fff;width:100%;height:100vh;display:flex;align-items:center;justify-content:center;font-family:sans-serif}.tx-default-2[data-v-ba058e75]{color:var(--primaryColor1);font-weight:600}.wrapper-steppy[data-v-ba058e75]{background-color:#fff;padding:60px;border-radius:32px;box-shadow:#00000017}.steppy[data-v-ba058e75]{display:flex;align-items:center;justify-content:space-between;width:auto;position:relative;z-index:0;margin-bottom:5px}.steppy-progress[data-v-ba058e75]{position:absolute;background-color:var(--primaryColor2);height:2px;z-index:-1;left:0;right:0;margin:0 auto}.steppy-progress-bar[data-v-ba058e75]{position:absolute;left:0;height:100%;width:0;background-color:var(--primaryColor1);transition:all .5s ease}.steppy-item[data-v-ba058e75]{display:flex;flex-direction:column;align-items:center;color:var(--primaryColor2);transition:all .5s ease}.steppy-item-counter[data-v-ba058e75]{height:68px;width:68px;display:grid;place-items:center;background-color:#fff;border-radius:100%;border:2px solid var(--primaryColor2);position:relative}.steppy-item-counter .icon-success[data-v-ba058e75]{position:absolute;opacity:0;transform:scale(0);width:24px;transition:all .5s ease}.steppy-item-counter .number[data-v-ba058e75]{font-size:22px;transition:all .5s ease}.steppy-item-title[data-v-ba058e75]{position:absolute;text-align:center;font-size:14px;bottom:-43px}.steppy-item.success .steppy-item-counter[data-v-ba058e75]{border-color:var(--primaryColor1);background-color:#fff;color:#fff;font-weight:600}.steppy-item.success .steppy-item-counter .icon-success[data-v-ba058e75]{opacity:1;transform:scale(1)}.steppy-item.success .steppy-item-counter .number[data-v-ba058e75]{opacity:0;transform:scale(0)}.steppy-item.success .steppy-item-title[data-v-ba058e75]{color:var(--primaryColor1)}.steppy-item.current .steppy-item-counter[data-v-ba058e75]{border-color:var(--primaryColor1);background-color:var(--primaryColor1);color:#fff;font-weight:600}.steppy-item.current .steppy-item-title[data-v-ba058e75]{color:#818181}.steppy-pane[data-v-ba058e75]{color:#333;text-align:center;padding:25px;box-shadow:0 0 10px #0000004d;margin:60px 0 20px}.controls[data-v-ba058e75]{display:flex}.btn[data-v-ba058e75]{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-ba058e75]:disabled{opacity:.5;pointer-events:none}.btn--default-2[data-v-ba058e75]{background-color:var(--primaryColor1);border-color:var(--primaryColor1);color:#fff;margin-left:auto}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+import { openBlock as e, createElementBlock as s, normalizeStyle as d, createElementVNode as c, reactive as g, computed as _, unref as b, Fragment as m, renderList as k, normalizeClass as C, createBlock as v, toDisplayString as a, renderSlot as x, createCommentVNode as f } from "vue";
+const V = /* @__PURE__ */ c("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), z = [
+  V
+], T = {
+  __name: "CheckMark",
+  props: {
+    color: {
+      type: String,
+      default: "black"
+    }
+  },
+  setup(n) {
+    return (r, t) => (e(), s("svg", {
+      viewBox: "0 0 24 24",
+      style: d({ fill: n.color })
+    }, z, 4));
+  }
+};
+const B = (n, r) => {
+  const t = n.__vccOpts || n;
+  for (const [i, u] of r)
+    t[i] = u;
+  return t;
+}, M = { class: "steppy" }, N = { class: "steppy-progress" }, $ = { class: "steppy-item-counter" }, w = ["src"], D = { class: "number" }, E = { class: "steppy-item-title" }, F = {
+  key: 0,
+  class: "steppy-pane"
+}, A = { class: "controls" }, I = ["disabled"], L = ["disabled"], O = {
+  __name: "Steppy",
+  props: {
+    step: {
+      type: Number,
+      default: 1
+    },
+    tabs: {
+      type: Array,
+      default: g([
+        {
+          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"
+    },
+    primaryColor1: {
+      type: String,
+      default: "orange"
+    },
+    primaryColor2: {
+      type: String,
+      default: "#C5C5C5"
+    }
+  },
+  emits: ["update:step"],
+  setup(n, { emit: r }) {
+    const t = n, i = _(() => ({
+      "--primaryColor1": t.primaryColor1,
+      "--primaryColor2": t.primaryColor2
+    })), u = () => {
+      const l = t.step + 1;
+      r("update:step", l);
+    }, S = () => {
+      const l = t.step - 1;
+      r("update:step", l);
+    }, h = _(() => 100 / (t.tabs.length - 1) * (t.step - 1) + "%");
+    return (l, y) => (e(), s("div", {
+      class: "wrapper-steppy",
+      style: d(b(i))
+    }, [
+      c("div", M, [
+        c("div", N, [
+          c("div", {
+            class: "steppy-progress-bar",
+            style: d("width:" + b(h))
+          }, null, 4)
+        ]),
+        (e(!0), s(m, null, k(t.tabs, (o, p) => (e(), s("div", {
+          class: C(["steppy-item", { current: t.step === p + 1, success: t.step > p + 1 }]),
+          key: p
+        }, [
+          c("div", $, [
+            o.iconSuccess ? (e(), s("img", {
+              key: 0,
+              class: "icon-success",
+              src: o.iconSuccess,
+              alt: "Check Mark"
+            }, null, 8, w)) : (e(), v(T, {
+              key: 1,
+              class: "icon-success",
+              color: n.primaryColor1,
+              alt: "Check Mark"
+            }, null, 8, ["color"])),
+            c("span", D, a(p + 1), 1)
+          ]),
+          c("span", E, a(o.title), 1)
+        ], 2))), 128))
+      ]),
+      (e(!0), s(m, null, k(t.tabs.length, (o) => (e(), s("div", {
+        class: "steppy-content",
+        key: o
+      }, [
+        t.step === o ? (e(), s("div", F, [
+          x(l.$slots, o, {}, void 0, !0)
+        ])) : f("", !0)
+      ]))), 128)),
+      c("div", A, [
+        t.step !== 1 ? (e(), s("button", {
+          key: 0,
+          class: "btn",
+          onClick: S
+        }, a(t.backText), 1)) : f("", !0),
+        t.step !== t.tabs.length ? (e(), s("button", {
+          key: 1,
+          class: "btn btn--default-2",
+          onClick: u,
+          disabled: !t.tabs[t.step - 1].isValid
+        }, a(t.nextText), 9, I)) : (e(), s("button", {
+          key: 2,
+          class: "btn btn--default-2",
+          onClick: y[0] || (y[0] = (...o) => n.finalize && n.finalize(...o)),
+          disabled: !t.tabs[t.step - 1].isValid
+        }, a(t.doneText), 9, L))
+      ])
+    ], 4));
+  }
+}, j = /* @__PURE__ */ B(O, [["__scopeId", "data-v-ba058e75"]]);
+export {
+  j as Steppy
+};

package/dist/vue3-steppy.umd.cjs

@@ -0,0 +1,2 @@
+(function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.appendChild(document.createTextNode("body[data-v-ba058e75]{background-image:linear-gradient(60deg,#abecd6 0%,#fbed96 100%);color:#fff;width:100%;height:100vh;display:flex;align-items:center;justify-content:center;font-family:sans-serif}.tx-default-2[data-v-ba058e75]{color:var(--primaryColor1);font-weight:600}.wrapper-steppy[data-v-ba058e75]{background-color:#fff;padding:60px;border-radius:32px;box-shadow:#00000017}.steppy[data-v-ba058e75]{display:flex;align-items:center;justify-content:space-between;width:auto;position:relative;z-index:0;margin-bottom:5px}.steppy-progress[data-v-ba058e75]{position:absolute;background-color:var(--primaryColor2);height:2px;z-index:-1;left:0;right:0;margin:0 auto}.steppy-progress-bar[data-v-ba058e75]{position:absolute;left:0;height:100%;width:0;background-color:var(--primaryColor1);transition:all .5s ease}.steppy-item[data-v-ba058e75]{display:flex;flex-direction:column;align-items:center;color:var(--primaryColor2);transition:all .5s ease}.steppy-item-counter[data-v-ba058e75]{height:68px;width:68px;display:grid;place-items:center;background-color:#fff;border-radius:100%;border:2px solid var(--primaryColor2);position:relative}.steppy-item-counter .icon-success[data-v-ba058e75]{position:absolute;opacity:0;transform:scale(0);width:24px;transition:all .5s ease}.steppy-item-counter .number[data-v-ba058e75]{font-size:22px;transition:all .5s ease}.steppy-item-title[data-v-ba058e75]{position:absolute;text-align:center;font-size:14px;bottom:-43px}.steppy-item.success .steppy-item-counter[data-v-ba058e75]{border-color:var(--primaryColor1);background-color:#fff;color:#fff;font-weight:600}.steppy-item.success .steppy-item-counter .icon-success[data-v-ba058e75]{opacity:1;transform:scale(1)}.steppy-item.success .steppy-item-counter .number[data-v-ba058e75]{opacity:0;transform:scale(0)}.steppy-item.success .steppy-item-title[data-v-ba058e75]{color:var(--primaryColor1)}.steppy-item.current .steppy-item-counter[data-v-ba058e75]{border-color:var(--primaryColor1);background-color:var(--primaryColor1);color:#fff;font-weight:600}.steppy-item.current .steppy-item-title[data-v-ba058e75]{color:#818181}.steppy-pane[data-v-ba058e75]{color:#333;text-align:center;padding:25px;box-shadow:0 0 10px #0000004d;margin:60px 0 20px}.controls[data-v-ba058e75]{display:flex}.btn[data-v-ba058e75]{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-ba058e75]:disabled{opacity:.5;pointer-events:none}.btn--default-2[data-v-ba058e75]{background-color:var(--primaryColor1);border-color:var(--primaryColor1);color:#fff;margin-left:auto}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n["vue3-steppy"]={},n.Vue))})(this,function(n,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(s){return(l,t)=>(e.openBlock(),e.createElementBlock("svg",{viewBox:"0 0 24 24",style:e.normalizeStyle({fill:s.color})},d,4))}},z="",m=(s,l)=>{const t=s.__vccOpts||s;for(const[a,p]of l)t[a]=p;return t},k={class:"steppy"},_={class:"steppy-progress"},f={class:"steppy-item-counter"},S=["src"],b={class:"number"},u={class:"steppy-item-title"},B={key:0,class:"steppy-pane"},g={class:"controls"},h=["disabled"],C=["disabled"],E={__name:"Steppy",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"},primaryColor1:{type:String,default:"orange"},primaryColor2:{type:String,default:"#C5C5C5"}},emits:["update:step"],setup(s,{emit:l}){const t=s,a=e.computed(()=>({"--primaryColor1":t.primaryColor1,"--primaryColor2":t.primaryColor2})),p=()=>{const c=t.step+1;l("update:step",c)},N=()=>{const c=t.step-1;l("update:step",c)},x=e.computed(()=>100/(t.tabs.length-1)*(t.step-1)+"%");return(c,i)=>(e.openBlock(),e.createElementBlock("div",{class:"wrapper-steppy",style:e.normalizeStyle(e.unref(a))},[e.createElementVNode("div",k,[e.createElementVNode("div",_,[e.createElementVNode("div",{class:"steppy-progress-bar",style:e.normalizeStyle("width:"+e.unref(x))},null,4)]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.tabs,(o,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",f,[o.iconSuccess?(e.openBlock(),e.createElementBlock("img",{key:0,class:"icon-success",src:o.iconSuccess,alt:"Check Mark"},null,8,S)):(e.openBlock(),e.createBlock(y,{key:1,class:"icon-success",color:s.primaryColor1,alt:"Check Mark"},null,8,["color"])),e.createElementVNode("span",b,e.toDisplayString(r+1),1)]),e.createElementVNode("span",u,e.toDisplayString(o.title),1)],2))),128))]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.tabs.length,o=>(e.openBlock(),e.createElementBlock("div",{class:"steppy-content",key:o},[t.step===o?(e.openBlock(),e.createElementBlock("div",B,[e.renderSlot(c.$slots,o,{},void 0,!0)])):e.createCommentVNode("",!0)]))),128)),e.createElementVNode("div",g,[t.step!==1?(e.openBlock(),e.createElementBlock("button",{key:0,class:"btn",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",onClick:p,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",onClick:i[0]||(i[0]=(...o)=>s.finalize&&s.finalize(...o)),disabled:!t.tabs[t.step-1].isValid},e.toDisplayString(t.doneText),9,C))])],4))}},V=m(E,[["__scopeId","data-v-ba058e75"]]);n.Steppy=V,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "vue3-steppy",
+  "description": "A simple Vue 3 Stepper plugin",
+  "version": "1.0.0",
+  "type": "module",
+  "private": false,
+  "author": "Mike Konstantakos",
+  "homepage": "https://laximas.github.io/vue3-steppy/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Laximas/vue3-steppy.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Laximas/vue3-steppy/issues"
+  },
+  "keywords": [
+    "vue3",
+    "vue",
+    "stepper",
+    "steppy",
+    "vue-stepper",
+    "vue-steppy",
+    "vue3-stepper",
+    "vue3-steppy"
+  ],
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/vue3-steppy.umd.cjs",
+  "module": "./dist/vue3-steppy.js",
+  "exports": {
+    ".": {
+      "import": "./dist/vue3-steppy.js",
+      "require": "./dist/vue3-steppy.umd.cjs"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d dist",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "core-js": "^3.8.3",
+    "vite-plugin-css-injected-by-js": "^2.4.0",
+    "vue": "^3.2.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "gh-pages": "^5.0.0",
+    "node-sass": "^8.0.0",
+    "sass": "^1.57.1",
+    "sass-loader": "^13.2.0",
+    "vite": "^4.0.0"
+  },
+  "directories": {
+    "lib": "lib"
+  }
+}