maz-ui/dist/chunks/MazPickerCalendarGrid.Ohe2R1xg.js

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import{d as isRangeValue,f as isSameDate,m as isValidDate,o as getFirstDayOfMonth,p as isSameDay,r as getDaysInMonth}from"./utils.BIXHUFDs.js";import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{t as MazBtn_default}from"./MazBtn.DJj8H23m.js";import{Fragment,TransitionGroup,computed,createBlock,createElementBlock,createElementVNode,createVNode,defineComponent,normalizeClass,openBlock,ref,renderList,toDisplayString,useCssVars,watch,withCtx}from"vue";import{debounce}from"@maz-ui/utils/helpers/debounce";import dayjs from"dayjs";import '../assets/MazPickerCalendarGrid.Ba1xBVlX.css';var DaySelect=function(DaySelect){return DaySelect[DaySelect.UNSELECTED=0]=`UNSELECTED`,DaySelect[DaySelect.SELECTED=1]=`SELECTED`,DaySelect[DaySelect.BETWEEN=2]=`BETWEEN`,DaySelect[DaySelect.BETWEEN_HOVERRED=3]=`BETWEEN_HOVERRED`,DaySelect}(DaySelect||{});var MazPickerCalendarGrid_default=_plugin_vue_export_helper_default(defineComponent({__name:`MazPickerCalendarGrid`,props:{modelValue:{type:[String,Object],default:void 0},calendarDate:{type:String,required:!0},hasTime:{type:Boolean,required:!0},locale:{type:String,required:!0},firstDayOfWeek:{type:Number,required:!0},color:{type:String,required:!0},minDate:{type:String,default:void 0},inline:{type:Boolean,required:!0},maxDate:{type:String,default:void 0},disabledWeekly:{type:Array,required:!0},disabledDates:{type:Array,required:!0},hoverredDay:{type:Object,default:void 0},disabled:{type:Boolean,required:!0},range:{type:Boolean,required:!0}},emits:[`update:model-value`,`update:hoverred-day`],setup(__props,{emit:__emit}){useCssVars(_ctx=>({v56c06bd6:hoverColor.value,v50f9c030:hoverTextColor.value}));let props=__props;let emits=__emit;let MazDatePickerGrid=ref();let transitionName=ref(`maz-slidenext`);let calendarDateArray=computed(()=>[props.calendarDate]);let hoverColor=computed(()=>`hsl(var(--maz-${props.color}) / 20%)`);let hoverTextColor=computed(()=>`hsl(var(--maz-${props.color}-foreground))`);let modelValue=computed({get:()=>props.modelValue,set:value=>emits(`update:model-value`,value)});let monthDays=computed(()=>Array.from({length:getDaysInMonth(props.calendarDate)},(_v,i)=>i+1).map(day=>({label:day,date:dayjs(props.calendarDate).set(`date`,day)})));let emptyDaysCount=computed(()=>(getFirstDayOfMonth(props.calendarDate)-props.firstDayOfWeek+7)%7);function setHoverredDay(day){let value=props.modelValue;!value||!isRangeValue(value)||(value.start&&!value.end&&day&&day.isAfter(value.start)?emits(`update:hoverred-day`,day):emits(`update:hoverred-day`))}function isBetweenHoverred(day){let value=props.modelValue;if(!(!value||!isRangeValue(value)||!value.start||!props.hoverredDay))return dayjs(day).isBetween(value.start,props.hoverredDay,`date`,`()`)?DaySelect.BETWEEN_HOVERRED:void 0}function isLastDayHoverred(day){if(props.hoverredDay)return dayjs(day).isSame(props.hoverredDay)}function isFirstDay(day){return props.modelValue&&props.modelValue&&typeof props.modelValue==`object`&&props.modelValue?.start?isSameDate(day,props.modelValue.start,`date`):!1}function isLastDay(day){return props.modelValue&&props.modelValue&&typeof props.modelValue==`object`&&props.modelValue?.end?isSameDate(day,props.modelValue.end,`date`):!1}function getDayButtonColor(date){let value=props.modelValue;if(typeof value==`object`){let isStartDate=value.start?isSameDate(date,value.start,`date`):!1;let isEndDate=value.end?isSameDate(date,value.end,`date`):!1;let isBetweenDates=checkIsBetween(date);return isStartDate||isEndDate||isBetweenDates?props.color:`transparent`}else return checkIsSameDate(date)?props.color:`transparent`}function isSelectedOrBetween(day){if(props.modelValue&&typeof props.modelValue==`object`){if(props.modelValue.start&&isSameDate(day,props.modelValue.start,`date`))return DaySelect.SELECTED;if(props.modelValue.end){if(isSameDate(day,props.modelValue.end,`date`))return DaySelect.SELECTED;if(checkIsBetween(day))return DaySelect.BETWEEN}}else if(checkIsSameDate(day))return DaySelect.SELECTED;return DaySelect.UNSELECTED}function selectDay(value){props.range&&setHoverredDay();let valueFormatted=value.format();if(typeof modelValue.value==`object`){let values=modelValue.value;values.start&&values.end&&(values={start:void 0,end:void 0});let isBeforeStartDate=dayjs(valueFormatted).isBefore(values.start,`date`);modelValue.value=!values.start||isBeforeStartDate?{start:valueFormatted,end:void 0}:{start:values.start,end:valueFormatted}}else modelValue.value=valueFormatted}function checkIsSameDate(day){let value=props.modelValue;return!value||!isValidDate(value)?!1:isSameDate(day,value,`date`)}function checkIsBetween(day){let value=props.modelValue;return!isRangeValue(value)||!value.start||!value.end?!1:dayjs(day).isBetween(value.start,value.end,`date`,`()`)}function isSmallerMinDate(day){return props.minDate?dayjs(day).isBefore(props.minDate,`date`):!1}function isDisabledWeekly(day){return props.disabledWeekly?.length?props.disabledWeekly.some(disabledDay=>isSameDay(day,disabledDay)):!1}function isDisabledDate(day){return props.disabledDates?.length?props.disabledDates.some(disabledDay=>isSameDate(day,disabledDay,`date`)):!1}function isBiggerMaxDate(day){return props.maxDate?dayjs(day).isAfter(props.maxDate,`date`):!1}let removeContainerHeight=debounce(()=>{MazDatePickerGrid.value&&(MazDatePickerGrid.value.style.minHeight=``)},400);function setContainerHeight(){MazDatePickerGrid.value&&(MazDatePickerGrid.value.style.minHeight=`${MazDatePickerGrid.value?.clientHeight||176}px`,removeContainerHeight())}return watch(()=>props.calendarDate,(calendarDate,oldCalendarValue)=>{transitionName.value=dayjs(calendarDate).isAfter(oldCalendarValue,`date`)?`maz-slidenext`:`maz-slideprev`,setContainerHeight()}),(_ctx,_cache)=>(openBlock(),createElementBlock(`div`,{ref_key:`MazDatePickerGrid`,ref:MazDatePickerGrid,class:`maz-picker-calendar-grid`},[createVNode(TransitionGroup,{name:transitionName.value},{default:withCtx(()=>[(openBlock(!0),createElementBlock(Fragment,null,renderList([calendarDateArray.value],(dateArray,dateIndex)=>(openBlock(),createElementBlock(`div`,{key:`${dateArray[dateIndex]}`,class:normalizeClass([`maz-picker-calendar-grid__container`,{"--is-range":__props.range}])},[(openBlock(!0),createElementBlock(Fragment,null,renderList(emptyDaysCount.value,first=>(openBlock(),createElementBlock(`div`,{key:first}))),128)),(openBlock(!0),createElementBlock(Fragment,null,renderList(monthDays.value,({label,date},i)=>(openBlock(),createBlock(MazBtn_default,{key:i,size:`mini`,color:getDayButtonColor(date),type:`button`,block:__props.inline,disabled:__props.disabled||isSmallerMinDate(date)||isBiggerMaxDate(date)||isDisabledWeekly(date)||isDisabledDate(date),class:normalizeClass({"--is-first":isFirstDay(date)&&isSelectedOrBetween(date)===DaySelect.SELECTED,"--is-last":isLastDay(date)&&isSelectedOrBetween(date)===DaySelect.SELECTED,"--is-last-hoverred":isLastDayHoverred(date),"--is-selected":isSelectedOrBetween(date)===DaySelect.SELECTED,"--is-between":isSelectedOrBetween(date)===DaySelect.BETWEEN,"--is-between-hoverred":__props.range?isBetweenHoverred(date)===DaySelect.BETWEEN_HOVERRED:void 0}),onClick:$event=>selectDay(date),onMouseover:$event=>__props.range?setHoverredDay(date):void 0,onMouseleave:_cache[0]||=$event=>__props.range?setHoverredDay():void 0,onFocus:$event=>__props.range?setHoverredDay(date):void 0,onBlur:_cache[1]||=$event=>__props.range?setHoverredDay():void 0},{default:withCtx(()=>[createElementVNode(`span`,null,toDisplayString(label),1)]),_:2},1032,[`color`,`block`,`disabled`,`class`,`onClick`,`onMouseover`,`onFocus`]))),128))],2))),128))]),_:1},8,[`name`])],512))}}),[[`__scopeId`,`data-v-f69e1470`]]);export{MazPickerCalendarGrid_default as t};