maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
155 lines (154 loc) • 8.49 kB
JavaScript
import { defineComponent, computed, useSlots, ref, createElementBlock, openBlock, normalizeStyle, Fragment, renderList, createCommentVNode, createElementVNode, normalizeClass, renderSlot, createBlock, resolveDynamicComponent, createTextVNode, toDisplayString, createVNode, withCtx } from "vue";
import { MazCheckCircle, MazExclamationTriangle, MazExclamationCircle } from "@maz-ui/icons";
import MazExpandAnimation from "./MazExpandAnimation.js";
import MazIcon from "./MazIcon.js";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazStepper.lKRkBZZK.css';const _hoisted_1 = ["id", "disabled", "onClick"], _hoisted_2 = { class: "m-stepper__header__wrapper" }, _hoisted_3 = { class: "m-stepper__count --primary" }, _hoisted_4 = { class: "m-stepper__count__circle" }, _hoisted_5 = { class: "m-stepper__header__content" }, _hoisted_6 = { class: "m-stepper__title" }, _hoisted_7 = {
key: 0,
class: "m-stepper__subtitle"
}, _hoisted_8 = {
key: 0,
class: "m-stepper__right"
}, _hoisted_9 = { class: "m-stepper__content__wrapper" }, _sfc_main = /* @__PURE__ */ defineComponent({
__name: "MazStepper",
props: {
modelValue: {},
steps: {},
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(__props, { emit: __emit }) {
const emits = __emit, roundStepBgColor = computed(() => `hsl(var(--maz-${__props.color}))`), roundStepTextColor = computed(() => `hsl(var(--maz-${__props.color}-foreground))`), slots = useSlots(), stepCount = computed(
() => Object.keys(slots).filter((slot) => slot.startsWith("content-")).length
), localModelValue = ref(1), currentStep = computed({
get: () => __props.modelValue ?? localModelValue.value,
set: (value) => {
localModelValue.value = value, emits("update:model-value", value);
}
});
function getStepStateData(step) {
return isStepSuccess(step) ? { icon: MazCheckCircle, class: "--success" } : isStepWarning(step) ? { icon: MazExclamationTriangle, class: "--warning" } : isStepError(step) ? { icon: MazExclamationCircle, class: "--error" } : { class: "--normal" };
}
function getStepIcon(step) {
return __props.steps?.[step - 1]?.icon;
}
function getPropertyInStep(property, step) {
return __props.steps?.[step - 1]?.[property];
}
function selectStep(step) {
currentStep.value === step && __props.canCloseSteps ? currentStep.value = 0 : step < 1 ? currentStep.value = 1 : step > stepCount.value ? currentStep.value = stepCount.value : currentStep.value = step;
}
function hasDataForStep(property, step) {
const data = property === "titleInfo" ? "title-info" : property, hasSlot = Object.keys(slots).filter((slot) => slot.startsWith(`${data}-`)).includes(`${data}-${step}`), hasData = !!__props.steps?.[step - 1]?.[property];
return hasSlot || hasData;
}
function isStepSuccess(step) {
const isValidated = __props.steps?.[step - 1]?.success, hasErrorOrWarningState = isStepError(step) || isStepWarning(step), isAutoValidated = __props.autoValidateSteps && step < currentStep.value && !hasErrorOrWarningState;
return isValidated ?? (isAutoValidated || __props.allStepsValidated);
}
function isStepDisabled(step) {
const isDisabled = __props.steps?.[step - 1]?.disabled, isCurrentStepDisabled = currentStep.value === step && !__props.canCloseSteps, isAutoDisabledNext = __props.disabledNextSteps && step > currentStep.value, isAutoDisabledPrevious = __props.disabledPreviousSteps && step < currentStep.value;
return isDisabled ?? (isCurrentStepDisabled || isAutoDisabledNext || isAutoDisabledPrevious || __props.allStepsOpened);
}
function isStepError(step) {
return __props.steps?.[step - 1]?.error;
}
function isStepWarning(step) {
return __props.steps?.[step - 1]?.warning;
}
function isLastStep(step) {
return step === stepCount.value;
}
return (_ctx, _cache) => (openBlock(), createElementBlock("div", {
class: "m-stepper m-reset-css",
style: normalizeStyle([{ "--round-step-bg-color": roundStepBgColor.value, "--round-step-text-color": roundStepTextColor.value }])
}, [
(openBlock(!0), createElementBlock(Fragment, null, renderList(stepCount.value, (step) => (openBlock(), createElementBlock(Fragment, { key: step }, [
hasDataForStep("title", step) ? (openBlock(), createElementBlock("button", {
key: 0,
id: `header-step-${step}`,
type: "button",
disabled: isStepDisabled(step),
class: normalizeClass(["m-stepper__header", [
{
"--is-current-step": step === currentStep.value || __props.allStepsOpened,
"--disabled": step !== currentStep.value && !__props.allStepsOpened && isStepDisabled(step)
},
`${getStepStateData(step).class}`
]]),
onClick: ($event) => selectStep(step)
}, [
createElementVNode("div", _hoisted_2, [
createElementVNode("span", _hoisted_3, [
createElementVNode("div", _hoisted_4, [
getStepStateData(step).icon ? (openBlock(), createBlock(resolveDynamicComponent(getStepStateData(step).icon), {
key: 0,
class: "icon maz-text-xl"
})) : createCommentVNode("", !0)
]),
renderSlot(_ctx.$slots, `icon-${step}`, {}, () => [
getStepIcon(step) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
typeof getStepIcon(step) == "string" ? (openBlock(), createBlock(MazIcon, {
key: 0,
name: getStepIcon(step)
}, null, 8, ["name"])) : getStepIcon(step) ? (openBlock(), createBlock(resolveDynamicComponent(getStepIcon(step)), { key: 1 })) : createCommentVNode("", !0)
], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
createTextVNode(toDisplayString(step), 1)
], 64))
], !0)
]),
createElementVNode("div", _hoisted_5, [
createElementVNode("span", _hoisted_6, [
renderSlot(_ctx.$slots, `title-${step}`, {}, () => [
createTextVNode(toDisplayString(getPropertyInStep("title", step)), 1)
], !0)
]),
hasDataForStep("subtitle", step) ? (openBlock(), createElementBlock("span", _hoisted_7, [
renderSlot(_ctx.$slots, `subtitle-${step}`, {}, () => [
createTextVNode(toDisplayString(getPropertyInStep("subtitle", step)), 1)
], !0)
])) : createCommentVNode("", !0)
])
]),
hasDataForStep("titleInfo", step) ? (openBlock(), createElementBlock("span", _hoisted_8, [
renderSlot(_ctx.$slots, `title-info-${step}`, {}, () => [
createTextVNode(toDisplayString(getPropertyInStep("titleInfo", step)), 1)
], !0)
])) : createCommentVNode("", !0)
], 10, _hoisted_1)) : createCommentVNode("", !0),
createElementVNode("div", {
class: normalizeClass(["m-stepper__content", {
"--no-border": isLastStep(step)
}])
}, [
createVNode(MazExpandAnimation, {
"model-value": __props.allStepsOpened || currentStep.value === step,
"aria-labelledby": `header-step-${step}`
}, {
default: withCtx(() => [
createElementVNode("div", _hoisted_9, [
renderSlot(_ctx.$slots, `content-${step}`, {
validated: isStepSuccess(step),
error: isStepError(step),
warning: isStepWarning(step),
nextStep: () => selectStep(step + 1),
previousStep: () => selectStep(step - 1)
}, void 0, !0)
])
]),
_: 2
}, 1032, ["model-value", "aria-labelledby"])
], 2)
], 64))), 128))
], 4));
}
}), MazStepper = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-99251223"]]);
export {
MazStepper as default
};