maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 7.4 kB
JavaScript
import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{Fragment,computed,createBlock,createCommentVNode,createElementBlock,createElementVNode,createTextVNode,createVNode,defineAsyncComponent,defineComponent,normalizeClass,normalizeStyle,openBlock,ref,renderList,renderSlot,resolveDynamicComponent,toDisplayString,unref,useSlots,withCtx}from"vue";import{MazCheckCircle}from"@maz-ui/icons/lazy/MazCheckCircle";import{MazExclamationCircle}from"@maz-ui/icons/lazy/MazExclamationCircle";import{MazExclamationTriangle}from"@maz-ui/icons/lazy/MazExclamationTriangle";import '../assets/MazStepper.DzJ8QG-O.css';var _hoisted_1=[`id`,`disabled`,`onClick`];var _hoisted_2={class:`m-stepper__header__wrapper`};var _hoisted_3={class:`m-stepper__header__point__wrapper`};var _hoisted_4={class:`m-stepper__count --primary`};var _hoisted_5={class:`m-stepper__count__circle`};var _hoisted_6={class:`m-stepper__header__content`};var _hoisted_7={class:`m-stepper__title`};var _hoisted_8=[`innerHTML`];var _hoisted_9={key:0,class:`m-stepper__subtitle`};var _hoisted_10=[`innerHTML`];var _hoisted_11={key:0,class:`m-stepper__right`};var _hoisted_12=[`innerHTML`];var _hoisted_13={class:`m-stepper__content__wrapper`};var _hoisted_14=[`innerHTML`];var MazStepper_default=_plugin_vue_export_helper_default(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}){let emits=__emit;let MazIcon=defineAsyncComponent(()=>import(`../components/MazIcon.js`));let MazExpandAnimation=defineAsyncComponent(()=>import(`../components/MazExpandAnimation.js`));let roundStepBgColor=computed(()=>`hsl(var(--maz-${__props.color}))`);let roundStepTextColor=computed(()=>`hsl(var(--maz-${__props.color}-foreground))`);let slots=useSlots();let stepCount=computed(()=>Object.keys(slots).filter(slot=>slot.startsWith(`content-`)).length||__props.steps?.filter(step=>step.content).length||0);let localModelValue=ref(1);let 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){let data=property===`titleInfo`?`title-info`:property;let hasSlot=Object.keys(slots).filter(slot=>slot.startsWith(`${data}-`)).includes(`${data}-${step}`);let hasData=!!__props.steps?.[step-1]?.[property];return hasSlot||hasData}function isStepSuccess(step){let isValidated=__props.steps?.[step-1]?.success;let hasErrorOrWarningState=isStepError(step)||isStepWarning(step);return isValidated??(__props.autoValidateSteps&&step<currentStep.value&&!hasErrorOrWarningState||__props.allStepsValidated)}function isStepDisabled(step){return __props.steps?.[step-1]?.disabled??(currentStep.value===step&&!__props.canCloseSteps||__props.disabledNextSteps&&step>currentStep.value||__props.disabledPreviousSteps&&step<currentStep.value||__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(`div`,_hoisted_3,[renderSlot(_ctx.$slots,`point`,{step},()=>[createElementVNode(`span`,_hoisted_4,[createElementVNode(`div`,_hoisted_5,[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(unref(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)])],!0)]),createElementVNode(`div`,_hoisted_6,[createElementVNode(`span`,_hoisted_7,[renderSlot(_ctx.$slots,`title-${step}`,{},()=>[getPropertyInStep(`title`,step)?(openBlock(),createElementBlock(`span`,{key:0,innerHTML:getPropertyInStep(`title`,step)},null,8,_hoisted_8)):createCommentVNode(``,!0)],!0)]),hasDataForStep(`subtitle`,step)?(openBlock(),createElementBlock(`span`,_hoisted_9,[renderSlot(_ctx.$slots,`subtitle-${step}`,{},()=>[getPropertyInStep(`subtitle`,step)?(openBlock(),createElementBlock(`span`,{key:0,innerHTML:getPropertyInStep(`subtitle`,step)},null,8,_hoisted_10)):createCommentVNode(``,!0)],!0)])):createCommentVNode(``,!0)])]),hasDataForStep(`titleInfo`,step)?(openBlock(),createElementBlock(`span`,_hoisted_11,[renderSlot(_ctx.$slots,`title-info-${step}`,{},()=>[getPropertyInStep(`titleInfo`,step)?(openBlock(),createElementBlock(`span`,{key:0,innerHTML:getPropertyInStep(`titleInfo`,step)},null,8,_hoisted_12)):createCommentVNode(``,!0)],!0)])):createCommentVNode(``,!0)],10,_hoisted_1)):createCommentVNode(``,!0),createElementVNode(`div`,{class:normalizeClass([`m-stepper__content`,{"--no-border":isLastStep(step)}])},[createVNode(unref(MazExpandAnimation),{"model-value":__props.allStepsOpened||currentStep.value===step,"aria-labelledby":`header-step-${step}`},{default:withCtx(()=>[createElementVNode(`div`,_hoisted_13,[renderSlot(_ctx.$slots,`content-${step}`,{validated:isStepSuccess(step),error:isStepError(step),warning:isStepWarning(step),nextStep:()=>selectStep(step+1),previousStep:()=>selectStep(step-1)},()=>[getPropertyInStep(`content`,step)?(openBlock(),createElementBlock(`span`,{key:0,innerHTML:getPropertyInStep(`content`,step)},null,8,_hoisted_14)):createCommentVNode(``,!0)],!0)])]),_:2},1032,[`model-value`,`aria-labelledby`])],2)],64))),128))],4))}}),[[`__scopeId`,`data-v-74a3b9ce`]]);export{MazStepper_default as t};