maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 3.35 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,ref,renderList,toDisplayString,unref,withCtx,withModifiers}from"vue";import{MazChevronLeft}from"@maz-ui/icons/static/MazChevronLeft";import{MazXMark}from"@maz-ui/icons/static/MazXMark";import{formatDate}from"@maz-ui/utils/helpers/formatDate";import dayjs from"dayjs";import '../../assets/MazPickerYearSwitcher.CHznKoll.css';var _hoisted_1={class:`maz-picker-year-switcher`};var _hoisted_2={class:`maz-picker-year-switcher__header`};var _hoisted_3={class:`maz-flex maz-space-x-2`};var _hoisted_4={class:`maz-picker-year-switcher__main`};var MazPickerYearSwitcher_default=_plugin_vue_export_helper_default(defineComponent({__name:`MazPickerYearSwitcher`,props:{color:{type:String,required:!0},locale:{type:String,required:!0},calendarDate:{type:String,required:!0}},emits:[`update:calendar-date`,`close`],setup(__props,{emit:__emit}){let props=__props;let emits=__emit;let currentDateTmp=ref(props.calendarDate);let years=computed(()=>Array.from({length:15},(_v,i)=>i-7).map(yearNumber=>{let currentYear=dayjs(currentDateTmp.value).get(`year`);let dateYear=dayjs(currentDateTmp.value).set(`year`,currentYear+yearNumber);return{label:formatDate(dateYear.format(),props.locale,{year:`numeric`})??dateYear.format(),date:dateYear}}));function selectYear(date){emits(`update:calendar-date`,dayjs(date).format()),emits(`close`)}function previousYears(){currentDateTmp.value=dayjs(currentDateTmp.value).subtract(7,`year`).format()}function nextYears(){currentDateTmp.value=dayjs(currentDateTmp.value).add(7,`year`).format()}return(_ctx,_cache)=>(openBlock(),createElementBlock(`div`,_hoisted_1,[createElementVNode(`div`,_hoisted_2,[createElementVNode(`div`,_hoisted_3,[createVNode(MazBtn_default,{size:`xs`,color:`transparent`,type:`button`,onClick:withModifiers(previousYears,[`stop`])},{default:withCtx(()=>[createVNode(unref(MazChevronLeft),{class:`maz-text-lg`})]),_:1}),createVNode(MazBtn_default,{size:`xs`,color:`transparent`,type:`button`,onClick:withModifiers(nextYears,[`stop`])},{default:withCtx(()=>[createVNode(unref(MazChevronLeft),{class:`maz-rotate-180 maz-text-lg`})]),_:1})]),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`,_hoisted_4,[(openBlock(!0),createElementBlock(Fragment,null,renderList(years.value,year=>(openBlock(),createBlock(MazBtn_default,{key:year.label,size:`sm`,type:`button`,class:normalizeClass({"--is-selected":unref(isSameDate)(year.date,__props.calendarDate,`year`)}),color:unref(isSameDate)(year.date,__props.calendarDate,`year`)?__props.color:`transparent`,onClick:withModifiers($event=>selectYear(year.date),[`stop`])},{default:withCtx(()=>[createTextVNode(toDisplayString(year.label),1)]),_:2},1032,[`class`,`color`,`onClick`]))),128))])]))}}),[[`__scopeId`,`data-v-aca7133c`]]);export{MazPickerYearSwitcher_default as default};