maz-ui/dist/components/MazDatePicker/MazPickerTime.js

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

import{_ as scrollToTarget,n as findNearestNumberInList}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,defineComponent,nextTick,normalizeClass,normalizeStyle,onMounted,openBlock,ref,renderList,toDisplayString,watch,withCtx,withModifiers}from"vue";import dayjs from"dayjs";import '../../assets/MazPickerTime.BCxs9J4Q.css';var _hoisted_1={class:`m-date-picker-time__column__items`};var MazPickerTime_default=_plugin_vue_export_helper_default(defineComponent({__name:`MazPickerTime`,props:{modelValue:{type:[String,Object],default:void 0},formatterOptions:{type:Object,required:!0},color:{type:String,required:!0},hasDate:{type:Boolean,required:!0},minuteInterval:{type:Number,required:!0},disabledHours:{type:Array,default:void 0},format:{type:String,required:!0},isHour12:{type:Boolean,required:!0},minDate:{type:String,default:void 0},maxDate:{type:String,default:void 0},disabled:{type:Boolean,required:!0}},emits:[`update:model-value`],setup(__props,{emit:__emit}){let props=__props;let emits=__emit;let currentDate=computed({get:()=>props.modelValue,set:value=>{emits(`update:model-value`,value)}});let hours=computed(()=>Array.from({length:props.isHour12?12:24},(_v,i)=>i).map(hour=>{let hourBase=hour+ +!!props.isHour12;let hour12or24=getHour12or24(hourBase);let hourValue=dayjs(currentDate.value).set(`hour`,hour12or24);let isDisabled=isDisableHour(hour12or24)||(props.minDate&&currentDate.value?dayjs(props.minDate).isAfter(hourValue,`hour`):!1)||(props.maxDate&&currentDate.value?dayjs(props.maxDate).isBefore(hourValue,`hour`):!1);return{label:`${hourBase<10?`0`:``}${hourBase}`,value:dayjs(currentDate.value).set(`hour`,hour12or24),isDisabled}}));let minutes=computed(()=>{let length=Math.floor(60/props.minuteInterval)-0;return Array.from({length},(_v,i)=>i*props.minuteInterval).map(minute=>{let minuteValue=dayjs(currentDate.value).set(`minute`,minute);let isDisabled=(props.minDate&&currentDate.value?dayjs(props.minDate).isAfter(minuteValue,`minute`):!1)||(props.maxDate&&currentDate.value?dayjs(props.maxDate).isBefore(minuteValue,`minute`):!1);return{label:`${minute<10?`0`:``}${minute}`,value:minuteValue,isDisabled}})});let currentHour=computed(()=>typeof currentDate.value==`string`?findNearestHour(dayjs(currentDate.value).get(`hour`)):void 0);let currentMinute=computed(()=>typeof currentDate.value==`string`?findNearestNumberInList(minutes.value.map(({value})=>value.get(`minute`)),dayjs(currentDate.value).get(`minute`)):void 0);let currentAmpm=computed(()=>typeof currentHour.value==`number`?currentHour.value>=12?`pm`:`am`:void 0);let ampm=computed(()=>props.isHour12?[{label:`AM`,value:`am`},{label:`PM`,value:`pm`}]:[]);let columns=computed(()=>{let columns=[{identifier:`hour`,values:hours.value},{identifier:`minute`,values:minutes.value}];return props.isHour12&&columns.push({identifier:`ampm`,values:ampm.value}),columns});function findNearestHour(hour){if(!props.disabledHours)return hour;let nearHour=findNearestNumberInList(Array.from({length:24},(_v,i)=>i).filter(hour=>!props.disabledHours?.includes(hour)||!0),hour);return nearHour!==hour&&selectTime(`hour`,dayjs(currentDate.value).set(`hour`,nearHour)),nearHour}let MazDatePickerTime=ref();let spacerHeight=ref();function getHour12or24(hourValue){if(props.isHour12){let newValue=currentAmpm.value===`pm`?hourValue+12:hourValue;return newValue===12?0:newValue===24?12:newValue}else return hourValue}function setSpacerHeight(){if(!MazDatePickerTime.value)return;let itemHeight=MazDatePickerTime.value.querySelector(`.m-date-picker-time__column .m-btn`)?.offsetHeight;spacerHeight.value=MazDatePickerTime.value.offsetHeight/2-itemHeight/2}onMounted(()=>{setSpacerHeight(),scrollColumns(!1)}),watch(()=>props.modelValue,async(value,oldValue)=>{value!==oldValue&&(await nextTick(),scrollColumns(!0))},{immediate:!0});function scrollColumns(hasSmoothEffect){scrollColumn(`hour`,hasSmoothEffect),scrollColumn(`minute`,hasSmoothEffect),props.isHour12&&scrollColumn(`ampm`,hasSmoothEffect)}function isDisableHour(value){return(props.disabledHours&&props.disabledHours.includes(value))??!1}function isSelected(identifier,value){return value===`am`||value===`pm`?currentAmpm.value===value:identifier===`hour`?currentHour.value===value.get(identifier):identifier===`minute`?currentMinute.value===value.get(identifier):!1}async function scrollColumn(identifier,hasSmoothEffect=!0){if(!MazDatePickerTime.value)return;let column=MazDatePickerTime.value.querySelector(`.m-date-picker-time__column__${identifier}`);let selectedButton=MazDatePickerTime.value.querySelector(`.m-date-picker-time__column__${identifier} .--is-selected`);spacerHeight.value&&column&&selectedButton&&MazDatePickerTime.value&&(await nextTick(),scrollToTarget(column,selectedButton,spacerHeight.value,hasSmoothEffect))}async function selectTime(identifier,value){let newDate=dayjs(currentDate.value);if(identifier===`hour`&&typeof value==`object`&&(currentDate.value=newDate.set(`hour`,value.get(`hour`)).format()),identifier===`minute`&&typeof value==`object`&&(currentDate.value=newDate.set(`minute`,value.get(`minute`)).format()),identifier===`ampm`&&(currentAmpm.value!==value||!currentHour.value)&&(value===`am`&&(currentDate.value=newDate.set(`hour`,newDate.get(`hour`)).subtract(12,`hour`).format()),value===`pm`)){let baseHour=newDate.get(`hour`);let newHour=baseHour+12>12&&baseHour+12<24?baseHour+12:baseHour===0?12:baseHour;currentDate.value=newDate.set(`hour`,newHour).format()}await nextTick(),scrollColumn(identifier)}return(_ctx,_cache)=>(openBlock(),createElementBlock(`div`,{ref_key:`MazDatePickerTime`,ref:MazDatePickerTime,class:normalizeClass([`m-date-picker-time`,{"--has-date":__props.hasDate}])},[(openBlock(!0),createElementBlock(Fragment,null,renderList(columns.value,({values,identifier},i)=>(openBlock(),createElementBlock(`div`,{key:i,class:normalizeClass([`m-date-picker-time__column`,[`m-date-picker-time__column__${identifier}`]])},[createElementVNode(`div`,{style:normalizeStyle({height:`${spacerHeight.value}px`}),class:`m-date-picker-time__column__spacer`},null,4),createElementVNode(`div`,_hoisted_1,[(openBlock(!0),createElementBlock(Fragment,null,renderList(values,({value,label,isDisabled},unitIndex)=>(openBlock(),createBlock(MazBtn_default,{key:unitIndex,size:`xs`,color:isSelected(identifier,value)?__props.color:`transparent`,class:normalizeClass({"--is-selected":isSelected(identifier,value)}),disabled:isDisabled||__props.disabled,type:`button`,onClick:withModifiers($event=>selectTime(identifier,value),[`stop`])},{default:withCtx(()=>[createTextVNode(toDisplayString(label),1)]),_:2},1032,[`color`,`class`,`disabled`,`onClick`]))),128))]),createElementVNode(`div`,{style:normalizeStyle({height:`${spacerHeight.value}px`}),class:`m-date-picker-time__column__spacer`},null,4)],2))),128))],2))}}),[[`__scopeId`,`data-v-44865410`]]);export{MazPickerTime_default as default};