maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 2.91 kB
JavaScript
import{f as isSameDate}from"../../chunks/utils.BIXHUFDs.js";import{t as _plugin_vue_export_helper_default}from"../../chunks/_plugin-vue_export-helper.ChmETRGw.js";import{t as MazBtn_default}from"../../chunks/MazBtn.DJj8H23m.js";import{Fragment,computed,createBlock,createElementBlock,createElementVNode,createTextVNode,createVNode,defineComponent,normalizeClass,openBlock,renderList,toDisplayString,unref,withCtx,withModifiers}from"vue";import{MazXMark}from"@maz-ui/icons/static/MazXMark";import{formatDate}from"@maz-ui/utils/helpers/formatDate";import dayjs from"dayjs";import{capitalize}from"@maz-ui/utils/helpers/capitalize";import '../../assets/MazPickerMonthSwitcher.DmvmIgYw.css';var _hoisted_1={class:`maz-picker-month-switcher`};var _hoisted_2={class:`maz-picker-month-switcher__header`};var MazPickerMonthSwitcher_default=_plugin_vue_export_helper_default(defineComponent({__name:`MazPickerMonthSwitcher`,props:{calendarDate:{type:String,required:!0},color:{type:String,required:!0},locale:{type:String,required:!0},double:{type:Boolean,required:!0}},emits:[`update:calendar-date`,`close`],setup(__props,{emit:__emit}){let props=__props;let emits=__emit;let months=computed(()=>Array.from({length:12},(_v,i)=>i).map(monthNumber=>{let monthDate=dayjs(props.calendarDate).set(`month`,monthNumber);return props.double?{label:`${capitalize(formatDate(monthDate.format(),props.locale,{month:`short`})??monthDate.add(1,`month`).format())} - ${capitalize(formatDate(monthDate.add(1,`month`).format(),props.locale,{month:`short`})??monthDate.add(1,`month`).format())}`,date:monthDate}:{label:capitalize(formatDate(monthDate.format(),props.locale,{month:`long`})??monthDate.format()),date:monthDate}}));function selectMonth(date){emits(`update:calendar-date`,date.format()),emits(`close`)}return(_ctx,_cache)=>(openBlock(),createElementBlock(`div`,_hoisted_1,[createElementVNode(`div`,_hoisted_2,[createVNode(MazBtn_default,{size:`xs`,color:`transparent`,type:`button`,onClick:_cache[0]||=withModifiers($event=>_ctx.$emit(`close`,$event),[`stop`])},{default:withCtx(()=>[createVNode(unref(MazXMark),{class:`maz-text-lg`})]),_:1})]),createElementVNode(`div`,{class:normalizeClass([`maz-picker-month-switcher__main`,{"--has-double":__props.double}])},[(openBlock(!0),createElementBlock(Fragment,null,renderList(months.value,month=>(openBlock(),createBlock(MazBtn_default,{key:month.label,size:props.double?`sm`:`xs`,class:normalizeClass({"--is-selected":unref(isSameDate)(month.date,__props.calendarDate,`month`)}),color:unref(isSameDate)(month.date,__props.calendarDate,`month`)?__props.color:`transparent`,type:`button`,onClick:withModifiers($event=>selectMonth(month.date),[`stop`])},{default:withCtx(()=>[createTextVNode(toDisplayString(month.label),1)]),_:2},1032,[`size`,`class`,`color`,`onClick`]))),128))],2)]))}}),[[`__scopeId`,`data-v-806fdb41`]]);export{MazPickerMonthSwitcher_default as default};