vue3-steppy
Version:
A customizable Vue 3 Stepper plugin
188 lines (187 loc) • 8.26 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){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)}})();
import { createElementBlock as s, openBlock as e, normalizeStyle as u, createElementVNode as r, reactive as v, computed as y, Fragment as f, renderList as m, normalizeClass as C, createBlock as x, toDisplayString as a, createCommentVNode as k, renderSlot as z } from "vue";
const V = {
__name: "CheckMark",
props: {
color: {
type: String,
default: "black"
}
},
setup(l) {
return (i, o) => (e(), s("svg", {
viewBox: "0 0 24 24",
style: u({ fill: l.color })
}, o[0] || (o[0] = [
r("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));
}
}, B = (l, i) => {
const o = l.__vccOpts || l;
for (const [t, d] of i)
o[t] = d;
return o;
}, T = { class: "steppy" }, N = { class: "steppy-progress" }, $ = ["src"], w = { class: "number" }, M = { class: "steppy-item-title" }, D = {
key: 0,
class: "steppy-pane"
}, E = { class: "controls" }, F = ["disabled"], A = ["disabled"], I = {
key: 0,
class: "loader"
}, L = { key: 1 }, O = {
__name: "Vue3Steppy",
props: {
step: {
type: Number,
default: 1
},
tabs: {
type: Array,
default: v([
{
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(l, { emit: i }) {
const o = i, t = l, d = y(() => ({
"--primaryColor1": t.primaryColor1,
"--primaryColor2": t.primaryColor2,
"--backgroundColor": t.backgroundColor,
"--circleSize": `${t.circleSize}px`
})), S = () => {
const c = t.step + 1;
o("update:step", c);
}, g = () => {
const c = t.step - 1;
o("update:step", c);
}, _ = y(() => 100 / (t.tabs.length - 1) * (t.step - 1) + "%"), h = y(() => ({
height: `${t.circleSize}px`,
width: `${t.circleSize}px`
}));
return (c, b) => (e(), s("div", {
class: "wrapper-steppy",
style: u(d.value)
}, [
r("div", T, [
r("div", N, [
r("div", {
class: "steppy-progress-bar",
style: u("width:" + _.value)
}, null, 4)
]),
(e(!0), s(f, null, m(t.tabs, (n, p) => (e(), s("div", {
class: C(["steppy-item", {
current: t.step === p + 1,
success: t.step > p + 1
}]),
key: p
}, [
r("div", {
class: "steppy-item-counter",
style: u(h.value)
}, [
n.iconSuccess ? (e(), s("img", {
key: 0,
class: "icon-success",
src: n.iconSuccess,
alt: "Check Mark"
}, null, 8, $)) : (e(), x(V, {
key: 1,
class: "icon-success",
color: l.primaryColor1,
alt: "Check Mark"
}, null, 8, ["color"])),
r("span", w, a(p + 1), 1)
], 4),
r("span", M, a(n.title), 1)
], 2))), 128))
]),
(e(!0), s(f, null, m(t.tabs.length, (n) => (e(), s("div", {
class: "steppy-content",
key: n
}, [
t.step === n ? (e(), s("div", D, [
z(c.$slots, n, {}, void 0, !0)
])) : k("", !0)
]))), 128)),
r("div", E, [
t.step !== 1 ? (e(), s("button", {
key: 0,
class: "btn",
type: "button",
onClick: g
}, a(t.backText), 1)) : k("", !0),
t.step !== t.tabs.length ? (e(), s("button", {
key: 1,
class: "btn btn--default-2",
type: "button",
onClick: S,
disabled: !t.tabs[t.step - 1].isValid
}, a(t.nextText), 9, F)) : (e(), s("button", {
key: 2,
class: "btn btn--default-2",
type: "button",
onClick: b[0] || (b[0] = (...n) => l.finalize && l.finalize(...n)),
disabled: !t.tabs[t.step - 1].isValid || l.loading
}, [
l.loading ? (e(), s("span", I)) : (e(), s("span", L, a(t.doneText), 1))
], 8, A))
])
], 4));
}
}, j = /* @__PURE__ */ B(O, [["__scopeId", "data-v-8a738045"]]);
export {
j as Steppy
};