maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
219 lines (218 loc) • 8.45 kB
JavaScript
import { defineComponent as K, defineAsyncComponent as m, computed as b, useSlots as Q, ref as R, openBlock as a, createElementBlock as i, normalizeStyle as U, Fragment as y, renderList as X, normalizeClass as A, createElementVNode as c, createBlock as x, resolveDynamicComponent as P, createCommentVNode as _, renderSlot as v, unref as W, createTextVNode as h, toDisplayString as $, createVNode as Y, withCtx as Z } from "vue";
import '../assets/MazStepper.BbJJgs0b.css';const ee = ["id", "disabled", "onClick"], te = { class: "m-stepper__header__wrapper" }, oe = { class: "m-stepper__count --primary" }, se = { class: "m-stepper__count__circle" }, ne = { class: "m-stepper__header__content" }, ae = { class: "m-stepper__title" }, le = {
key: 0,
class: "m-stepper__subtitle"
}, re = {
key: 0,
class: "m-stepper__right"
}, ie = { class: "m-stepper__content__wrapper" }, ce = /* @__PURE__ */ K({
__name: "MazStepper",
props: {
modelValue: { default: void 0 },
steps: { default: void 0 },
color: { default: "primary" },
disabledNextSteps: { type: Boolean },
disabledPreviousSteps: { type: Boolean },
autoValidateSteps: { type: Boolean },
allStepsOpened: { type: Boolean },
allStepsValidated: { type: Boolean },
canCloseSteps: { type: Boolean }
},
emits: ["update:model-value"],
setup(S, { emit: k }) {
const o = S, C = k, g = m(() => import("./MazIcon.Cq1v4J3r.mjs")), j = m(() => import("./MazExpandAnimation.NRqY0IYX.mjs")), F = m(() => import("./check-circle.Bf7AGSQ-.mjs")), L = m(
() => import("./exclamation-circle.CUk0ZajS.mjs")
), T = m(() => import("./exclamation-triangle.Z6d0ygp8.mjs")), q = b(() => `var(--maz-color-${o.color})`), G = b(() => `var(--maz-color-${o.color}-contrast)`), E = Q(), f = b(
() => Object.keys(E).filter((t) => t.startsWith("content-")).length
), N = R(1), n = b({
get: () => o.modelValue ?? N.value,
set: (t) => {
N.value = t, C("update:model-value", t);
}
});
function V(t) {
return w(t) ? { icon: F, class: "--success" } : O(t) ? { icon: T, class: "--warning" } : z(t) ? { icon: L, class: "--error" } : { class: "--normal" };
}
function d(t) {
var s, e;
return (e = (s = o.steps) == null ? void 0 : s[t - 1]) == null ? void 0 : e.icon;
}
function B(t, s) {
var e, l;
return (l = (e = o.steps) == null ? void 0 : e[s - 1]) == null ? void 0 : l[t];
}
function D(t) {
n.value === t && o.canCloseSteps ? n.value = 0 : t < 1 ? n.value = 1 : t > f.value ? n.value = f.value : n.value = t;
}
function I(t, s) {
var r, p;
const e = t === "titleInfo" ? "title-info" : t, l = Object.keys(E).filter((J) => J.startsWith(`${e}-`)).includes(`${e}-${s}`), u = !!((p = (r = o.steps) == null ? void 0 : r[s - 1]) != null && p[t]);
return l || u;
}
function w(t) {
var u, r;
const s = (r = (u = o.steps) == null ? void 0 : u[t - 1]) == null ? void 0 : r.success, e = z(t) || O(t), l = o.autoValidateSteps && t < n.value && !e;
return s ?? (l || o.allStepsValidated);
}
function M(t) {
var r, p;
const s = (p = (r = o.steps) == null ? void 0 : r[t - 1]) == null ? void 0 : p.disabled, e = n.value === t && !o.canCloseSteps, l = o.disabledNextSteps && t > n.value, u = o.disabledPreviousSteps && t < n.value;
return s ?? (e || l || u || o.allStepsOpened);
}
function z(t) {
var s, e;
return (e = (s = o.steps) == null ? void 0 : s[t - 1]) == null ? void 0 : e.error;
}
function O(t) {
var s, e;
return (e = (s = o.steps) == null ? void 0 : s[t - 1]) == null ? void 0 : e.warning;
}
function H(t) {
return t === f.value;
}
return (t, s) => (a(), i(
"div",
{
class: "m-stepper m-reset-css",
style: U([{ "--round-step-bg-color": q.value, "--round-step-text-color": G.value }])
},
[
(a(!0), i(
y,
null,
X(f.value, (e) => (a(), i(
y,
{ key: e },
[
I("title", e) ? (a(), i("button", {
key: 0,
id: `header-step-${e}`,
type: "button",
disabled: M(e),
class: A(["m-stepper__header", [
{
"--is-current-step": e === n.value || t.allStepsOpened,
"--disabled": e !== n.value && !t.allStepsOpened && M(e)
},
`${V(e).class}`
]]),
onClick: (l) => D(e)
}, [
c("div", te, [
c("span", oe, [
c("div", se, [
V(e).icon ? (a(), x(P(V(e).icon), {
key: 0,
class: "icon maz-text-xl"
})) : _("v-if", !0)
]),
v(t.$slots, `icon-${e}`, {}, () => [
d(e) ? (a(), i(
y,
{ key: 0 },
[
typeof d(e) == "string" ? (a(), x(W(g), {
key: 0,
name: d(e)
}, null, 8, ["name"])) : d(e) ? (a(), x(P(d(e)), { key: 1 })) : _("v-if", !0)
],
64
/* STABLE_FRAGMENT */
)) : (a(), i(
y,
{ key: 1 },
[
h(
$(e),
1
/* TEXT */
)
],
64
/* STABLE_FRAGMENT */
))
], !0)
]),
c("div", ne, [
c("span", ae, [
v(t.$slots, `title-${e}`, {}, () => [
h(
$(B("title", e)),
1
/* TEXT */
)
], !0)
]),
I("subtitle", e) ? (a(), i("span", le, [
v(t.$slots, `subtitle-${e}`, {}, () => [
h(
$(B("subtitle", e)),
1
/* TEXT */
)
], !0)
])) : _("v-if", !0)
])
]),
I("titleInfo", e) ? (a(), i("span", re, [
v(t.$slots, `title-info-${e}`, {}, () => [
h(
$(B("titleInfo", e)),
1
/* TEXT */
)
], !0)
])) : _("v-if", !0)
], 10, ee)) : _("v-if", !0),
c(
"div",
{
class: A(["m-stepper__content", {
"--no-border": H(e)
}])
},
[
Y(W(j), {
"model-value": t.allStepsOpened || n.value === e,
"aria-labelledby": `header-step-${e}`
}, {
default: Z(() => [
c("div", ie, [
v(t.$slots, `content-${e}`, {
validated: w(e),
error: z(e),
warning: O(e),
nextStep: () => D(e + 1),
previousStep: () => D(e - 1)
}, void 0, !0)
])
]),
_: 2
/* DYNAMIC */
}, 1032, ["model-value", "aria-labelledby"])
],
2
/* CLASS */
)
],
64
/* STABLE_FRAGMENT */
))),
128
/* KEYED_FRAGMENT */
))
],
4
/* STYLE */
));
}
}), ue = (S, k) => {
const o = S.__vccOpts || S;
for (const [C, g] of k)
o[C] = g;
return o;
}, pe = /* @__PURE__ */ ue(ce, [["__scopeId", "data-v-4b6c936d"]]);
export {
pe as M,
ue as _
};