maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 4.74 kB
JavaScript
import{t as _plugin_vue_export_helper_default}from"../../chunks/_plugin-vue_export-helper.ChmETRGw.js";import{Fragment,TransitionGroup,computed,createCommentVNode,createElementBlock,createVNode,defineComponent,normalizeClass,openBlock,ref,renderList,toDisplayString,watch,withCtx}from"vue";import{formatDate}from"@maz-ui/utils/helpers/formatDate";import dayjs from"dayjs";import{capitalize}from"@maz-ui/utils/helpers/capitalize";import '../../assets/MazPickerHeader.B5IM2AdI.css';var _hoisted_1={key:0,class:`m-date-picker-header__date`};var MazPickerHeader_default=_plugin_vue_export_helper_default(defineComponent({__name:`MazPickerHeader`,props:{modelValue:{},color:{},locale:{},hideShortcuts:{type:Boolean},double:{type:Boolean},hasDate:{type:Boolean},hasTime:{type:Boolean},formatterOptions:{}},setup(__props){let refDate=computed(()=>typeof __props.modelValue==`string`?__props.modelValue:__props.modelValue?.start);let transitionName=ref(`maz-slidevnext`);let year=computed(()=>__props.modelValue&&typeof __props.modelValue==`object`?`${__props.modelValue.start?formatDate(__props.modelValue.start,__props.locale,{year:`numeric`,timeZone:__props.formatterOptions.timeZone}):`...`} - ${__props.modelValue.end?formatDate(__props.modelValue.end,__props.locale,{year:`numeric`,timeZone:__props.formatterOptions.timeZone}):`...`}`:typeof __props.modelValue==`string`?formatDate(__props.modelValue,__props.locale,{year:`numeric`,timeZone:__props.formatterOptions.timeZone}):`-`);let yearArray=computed(()=>__props.hasDate?[year.value]:void 0);let dateString=computed(()=>{if(__props.modelValue&&typeof __props.modelValue==`object`&&(__props.modelValue.start||__props.modelValue.end)){let dateOption=__props.hideShortcuts&&!__props.double?`short`:`long`;return`${__props.modelValue.start?capitalize(formatDate(__props.modelValue.start,__props.locale,{weekday:dateOption,month:dateOption,day:`numeric`,timeZone:__props.formatterOptions.timeZone})??__props.modelValue.start):`...`} - ${__props.modelValue.end?capitalize(formatDate(__props.modelValue.end,__props.locale,{weekday:dateOption,month:dateOption,day:`numeric`,timeZone:__props.formatterOptions.timeZone})??__props.modelValue.end):`...`}`}else if(typeof __props.modelValue==`string`){let formattedDate=formatDate(__props.modelValue,__props.locale,{weekday:`long`,month:`long`,day:`numeric`,timeZone:__props.formatterOptions.timeZone});return formattedDate?capitalize(formattedDate):void 0}return`-`});let dateStringArray=computed(()=>__props.hasDate?[dateString.value]:void 0);let timeValue=computed(()=>refDate.value?formatDate(refDate.value,__props.locale,{timeStyle:`short`,timeZone:__props.formatterOptions.timeZone,hour12:__props.formatterOptions.hour12}):void 0);let timeArray=computed(()=>__props.hasTime?[timeValue.value]:void 0);return watch(()=>__props.modelValue,(modelValue,oldModelValue)=>{let currentValue=typeof modelValue==`object`?modelValue.start:modelValue;let oldValue=typeof oldModelValue==`object`?oldModelValue.start:oldModelValue;transitionName.value=dayjs(currentValue).isAfter(oldValue,`date`)||dayjs(currentValue).isSame(oldValue,`date`)?`maz-slidevnext`:`maz-slidevprev`}),(_ctx,_cache)=>(openBlock(),createElementBlock(`div`,{class:normalizeClass([`m-date-picker-header`,[`--${__props.color}`]])},[__props.hasDate?(openBlock(),createElementBlock(`div`,_hoisted_1,[createVNode(TransitionGroup,{name:transitionName.value,tag:`div`,class:`m-date-picker-header__year-transition`},{default:withCtx(()=>[(openBlock(!0),createElementBlock(Fragment,null,renderList(yearArray.value,(y,yi)=>(openBlock(),createElementBlock(`span`,{key:`${y}-${yi}`,class:`m-date-picker-header__year-text`},toDisplayString(y),1))),128))]),_:1},8,[`name`]),createVNode(TransitionGroup,{name:transitionName.value,tag:`div`,class:`m-date-picker-header__date-transition`},{default:withCtx(()=>[(openBlock(!0),createElementBlock(Fragment,null,renderList(dateStringArray.value,(d,di)=>(openBlock(),createElementBlock(`span`,{key:`${d}-${di}`,class:`m-date-picker-header__date-text`},toDisplayString(d),1))),128))]),_:1},8,[`name`])])):createCommentVNode(``,!0),timeArray.value?(openBlock(),createElementBlock(`div`,{key:1,class:normalizeClass([`m-date-picker-header__time`,{"--has-date":__props.hasDate}])},[createVNode(TransitionGroup,{name:transitionName.value,tag:`div`,class:`m-date-picker-header__time-transition`},{default:withCtx(()=>[(openBlock(!0),createElementBlock(Fragment,null,renderList(timeArray.value,(t,ti)=>(openBlock(),createElementBlock(`span`,{key:`${t}-${ti}`,class:`m-date-picker-header__time-text`},toDisplayString(t),1))),128))]),_:1},8,[`name`])],2)):createCommentVNode(``,!0)],2))}}),[[`__scopeId`,`data-v-523d752c`]]);export{MazPickerHeader_default as default};