maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 8.24 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,defineAsyncComponent,defineComponent,mergeProps,normalizeClass,normalizeStyle,onBeforeUnmount,onMounted,openBlock,ref,renderList,renderSlot,toDisplayString,toHandlers,unref,useId,useSlots,watch}from"vue";import '../assets/MazTimeline.DHiUKlPx.css';var _hoisted_1=[`aria-label`];var _hoisted_2=[`role`,`aria-label`,`aria-current`,`aria-disabled`,`tabindex`];var _hoisted_3={class:`m-timeline-indicator`,"aria-hidden":`true`};var _hoisted_4={key:0,class:`m-timeline-check-icon`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`3`,"stroke-linecap":`round`,"stroke-linejoin":`round`};var _hoisted_5={key:2,class:`m-timeline-step-number`};var _hoisted_6={key:0,class:`m-timeline-content`};var _hoisted_7={key:0,class:`m-timeline-title`};var _hoisted_8={key:1,class:`m-timeline-subtitle`};var MazTimeline_default=_plugin_vue_export_helper_default(defineComponent({__name:`MazTimeline`,props:{modelValue:{default:()=>void 0},steps:{},direction:{default:`auto`},breakpoint:{default:`768px`},color:{default:`primary`},size:{default:`md`},showStepNumbers:{type:Boolean,default:!0},autoValidateSteps:{type:Boolean,default:!0},clickable:{type:Boolean,default:!1},animated:{type:Boolean,default:!0},roundedSize:{default:`base`}},emits:[`update:modelValue`,`click-step`],setup(__props,{emit:__emit}){let emit=__emit;let MazIcon=defineAsyncComponent(()=>import(`../components/MazIcon.js`));let slots=useSlots();let instanceId=useId();let isVertical=ref(!1);let mediaQuery;function cleanupMediaQuery(){mediaQuery&&=(mediaQuery.removeEventListener(`change`,onMediaChange),void 0)}function setupMediaQuery(){cleanupMediaQuery(),__props.direction===`auto`?(mediaQuery=globalThis.matchMedia(`(min-width: ${__props.breakpoint})`),mediaQuery.addEventListener(`change`,onMediaChange),isVertical.value=!mediaQuery.matches):isVertical.value=__props.direction===`vertical`}function onMediaChange(event){isVertical.value=!event.matches}onMounted(()=>{setupMediaQuery()}),onBeforeUnmount(()=>{cleanupMediaQuery()}),watch(()=>[__props.direction,__props.breakpoint],()=>setupMediaQuery());function getStepState(step,index){return step.state?step.state:__props.modelValue===void 0?`pending`:index<__props.modelValue?`completed`:index===__props.modelValue?`active`:`pending`}function isStepActive(step,index){return getStepState(step,index)===`active`}function isStepCompleted(step,index){return getStepState(step,index)===`completed`}function isConnectorCompleted(index){return isStepCompleted(__props.steps[index],index)}function isConnectorActive(index){return isStepActive(__props.steps[index],index)}let colorStyles=computed(()=>({"--m-timeline-color":`var(--maz-${__props.color}-700)`,"--m-timeline-color-dark":`var(--maz-${__props.color}-400)`,"--m-timeline-bg":`var(--maz-${__props.color})`,"--m-timeline-fg":`var(--maz-${__props.color}-foreground)`}));let stateColorMap={completed:`success`,active:``,error:`destructive`,warning:`warning`,pending:``};function getStateStyle(state){let mappedColor=stateColorMap[state];if(!(!mappedColor||state===`active`))return{"--m-timeline-state-color":`var(--maz-${mappedColor}-700)`,"--m-timeline-state-color-dark":`var(--maz-${mappedColor}-400)`,"--m-timeline-state-bg":`var(--maz-${mappedColor})`,"--m-timeline-state-fg":`var(--maz-${mappedColor}-foreground)`}}function getStepAriaLabel(step,index){let state=getStepState(step,index);let title=step.title?`, ${step.title}`:``;return`Step ${index+1}${title}: ${state}`}function getStepRole(step){return __props.clickable&&!step.disabled?`button`:void 0}function getStepTabindex(step){return __props.clickable&&!step.disabled?0:void 0}function onStepClick(step,index){!__props.clickable||step.disabled||(emit(`update:modelValue`,index),emit(`click-step`,{step,index}))}function onStepKeydown(event,step,index){if(!__props.clickable||step.disabled)return;if(event.key===`Enter`||event.key===` `){event.preventDefault(),onStepClick(step,index);return}let isHorizontal=!isVertical.value;let nextKey=isHorizontal?`ArrowRight`:`ArrowDown`;let prevKey=isHorizontal?`ArrowLeft`:`ArrowUp`;let targetIndex;event.key===nextKey?targetIndex=findNextEnabledStep(index,1):event.key===prevKey&&(targetIndex=findNextEnabledStep(index,-1)),targetIndex!==void 0&&(event.preventDefault(),(event.currentTarget.closest(`.m-timeline`)?.querySelectorAll(`.m-timeline-step`))?.[targetIndex]?.focus())}function findNextEnabledStep(fromIndex,direction){let index=fromIndex+direction;for(;index>=0&&index<__props.steps.length;){if(!__props.steps[index].disabled)return index;index+=direction}}let hasCheckIcon=computed(()=>__props.autoValidateSteps);return(_ctx,_cache)=>(openBlock(),createElementBlock(`div`,{class:normalizeClass([`m-timeline m-reset-css`,[`--${__props.size}`,`--rounded-${__props.roundedSize}`,{"--vertical":isVertical.value,"--horizontal":!isVertical.value,"--clickable":__props.clickable,"--animated":__props.animated}]]),role:`list`,"aria-label":_ctx.$attrs[`aria-label`]??`Timeline`,style:normalizeStyle(colorStyles.value)},[(openBlock(!0),createElementBlock(Fragment,null,renderList(__props.steps,(step,index)=>(openBlock(),createElementBlock(`div`,{key:`${unref(instanceId)}-step-${index}`,class:normalizeClass([`m-timeline-item`,{"--last":index===__props.steps.length-1}])},[createElementVNode(`div`,mergeProps({class:[`m-timeline-step`,[`--${getStepState(step,index)}`,{"--disabled":step.disabled}]],role:getStepRole(step)??`listitem`,"aria-label":getStepAriaLabel(step,index),"aria-current":isStepActive(step,index)?`step`:void 0,"aria-disabled":step.disabled||void 0,tabindex:getStepTabindex(step),style:getStateStyle(getStepState(step,index))},toHandlers(__props.clickable?{click:()=>onStepClick(step,index),keydown:e=>onStepKeydown(e,step,index)}:{},!0)),[createElementVNode(`div`,_hoisted_3,[renderSlot(_ctx.$slots,`indicator`,{step,index,state:getStepState(step,index),isActive:isStepActive(step,index),isCompleted:isStepCompleted(step,index)},()=>[hasCheckIcon.value&&isStepCompleted(step,index)?(openBlock(),createElementBlock(`svg`,_hoisted_4,[..._cache[0]||=[createElementVNode(`polyline`,{points:`20 6 9 17 4 12`},null,-1)]])):step.icon?(openBlock(),createElementBlock(Fragment,{key:1},[typeof step.icon==`string`?(openBlock(),createBlock(unref(MazIcon),{key:0,name:step.icon,class:`m-timeline-step-icon`},null,8,[`name`])):(openBlock(),createBlock(unref(MazIcon),{key:1,icon:step.icon,class:`m-timeline-step-icon`},null,8,[`icon`]))],64)):__props.showStepNumbers?(openBlock(),createElementBlock(`span`,_hoisted_5,toDisplayString(index+1),1)):createCommentVNode(``,!0)],!0)]),step.title||step.subtitle||unref(slots).title||unref(slots).subtitle||unref(slots).content?(openBlock(),createElementBlock(`div`,_hoisted_6,[renderSlot(_ctx.$slots,`content`,{step,index,state:getStepState(step,index),isActive:isStepActive(step,index),isCompleted:isStepCompleted(step,index)},()=>[step.title||unref(slots).title?(openBlock(),createElementBlock(`p`,_hoisted_7,[renderSlot(_ctx.$slots,`title`,{step,index,state:getStepState(step,index)},()=>[createTextVNode(toDisplayString(step.title),1)],!0)])):createCommentVNode(``,!0),step.subtitle||unref(slots).subtitle?(openBlock(),createElementBlock(`p`,_hoisted_8,[renderSlot(_ctx.$slots,`subtitle`,{step,index,state:getStepState(step,index)},()=>[createTextVNode(toDisplayString(step.subtitle),1)],!0)])):createCommentVNode(``,!0)],!0)])):createCommentVNode(``,!0)],16,_hoisted_2),index<__props.steps.length-1?(openBlock(),createElementBlock(`div`,{key:0,class:normalizeClass([`m-timeline-connector`,{"--completed":isConnectorCompleted(index),"--active":isConnectorActive(index)}]),"aria-hidden":`true`},[renderSlot(_ctx.$slots,`connector`,{index,isCompleted:isConnectorCompleted(index),isActive:isConnectorActive(index)},()=>[_cache[1]||=createElementVNode(`div`,{class:`m-timeline-connector-track`},[createElementVNode(`div`,{class:`m-timeline-connector-fill`})],-1)],!0)],2)):createCommentVNode(``,!0)],2))),128))],14,_hoisted_1))}}),[[`__scopeId`,`data-v-78e67b79`]]);export{MazTimeline_default as t};