maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 18.8 kB
JavaScript
import{a as getDefaultsShortcuts,c as getISODate,d as isRangeValue,g as isValueDisabledWeekly,h as isValueDisabledDate,l as getRangeFormattedDate,s as getFormattedDate,t as checkValueWithMinMaxDates,u as getRangeISODate,v as __commonJSMin,y as __toESM}from"./utils.BIXHUFDs.js";import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{t as MazPopover_default}from"./MazPopover.BTvrYenI.js";import{t as MazPickerContainer_default}from"./MazPickerContainer.CssaCr65.js";import{computed,createBlock,createCommentVNode,createVNode,defineAsyncComponent,defineComponent,mergeModels,mergeProps,normalizeClass,normalizeStyle,onBeforeMount,openBlock,ref,renderSlot,unref,useModel,useTemplateRef,vShow,watch,withCtx,withDirectives}from"vue";import{useTranslations}from"@maz-ui/translations/composables/useTranslations";import{MazChevronDown}from"@maz-ui/icons/static/MazChevronDown";import{MazCalendar}from"@maz-ui/icons/lazy/MazCalendar";import{MazClock}from"@maz-ui/icons/lazy/MazClock";import{formatDate}from"@maz-ui/utils/helpers/formatDate";import dayjs from"dayjs";import '../assets/MazDatePicker.C4xZKtSy.css';var require_customParseFormat=__commonJSMin(((exports,module)=>{(function(e,t){typeof exports==`object`&&module!==void 0?module.exports=t():typeof define==`function`&&define.amd?define(t):(e=typeof globalThis<`u`?globalThis:e||self).dayjs_plugin_customParseFormat=t()})(exports,(function(){var e={LTS:`h:mm:ss A`,LT:`h:mm A`,L:`MM/DD/YYYY`,LL:`MMMM D, YYYY`,LLL:`MMMM D, YYYY h:mm A`,LLLL:`dddd, MMMM D, YYYY h:mm A`},t=/(\[[^[]*\])|([-_:/.,()\s]+)|(A|a|Q|YYYY|YY?|ww?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g,n=/\d/,r=/\d\d/,i=/\d\d?/,o=/\d*[^-_:/,()\s\d]+/,s={},a=function(e){return(e=+e)+(e>68?1900:2e3)};var f=function(e){return function(t){this[e]=+t}},h=[/[+-]\d\d:?(\d\d)?|Z/,function(e){(this.zone||={}).offset=function(e){if(!e||e===`Z`)return 0;var t=e.match(/([+-]|\d\d)/g),n=60*t[1]+(+t[2]||0);return n===0?0:t[0]===`+`?-n:n}(e)}],u=function(e){var t=s[e];return t&&(t.indexOf?t:t.s.concat(t.f))},d=function(e,t){var n,r=s.meridiem;if(r){for(var i=1;i<=24;i+=1)if(e.indexOf(r(i,0,t))>-1){n=i>12;break}}else n=e===(t?`pm`:`PM`);return n},c={A:[o,function(e){this.afternoon=d(e,!1)}],a:[o,function(e){this.afternoon=d(e,!0)}],Q:[n,function(e){this.month=3*(e-1)+1}],S:[n,function(e){this.milliseconds=100*e}],SS:[r,function(e){this.milliseconds=10*e}],SSS:[/\d{3}/,function(e){this.milliseconds=+e}],s:[i,f(`seconds`)],ss:[i,f(`seconds`)],m:[i,f(`minutes`)],mm:[i,f(`minutes`)],H:[i,f(`hours`)],h:[i,f(`hours`)],HH:[i,f(`hours`)],hh:[i,f(`hours`)],D:[i,f(`day`)],DD:[r,f(`day`)],Do:[o,function(e){var t=s.ordinal,n=e.match(/\d+/);if(this.day=n[0],t)for(var r=1;r<=31;r+=1)t(r).replace(/\[|\]/g,``)===e&&(this.day=r)}],w:[i,f(`week`)],ww:[r,f(`week`)],M:[i,f(`month`)],MM:[r,f(`month`)],MMM:[o,function(e){var t=u(`months`),n=(u(`monthsShort`)||t.map((function(e){return e.slice(0,3)}))).indexOf(e)+1;if(n<1)throw Error();this.month=n%12||n}],MMMM:[o,function(e){var t=u(`months`).indexOf(e)+1;if(t<1)throw Error();this.month=t%12||t}],Y:[/[+-]?\d+/,f(`year`)],YY:[r,function(e){this.year=a(e)}],YYYY:[/\d{4}/,f(`year`)],Z:h,ZZ:h};function l(n){for(var r=n,i=s&&s.formats,o=(n=r.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g,(function(t,n,r){var o=r&&r.toUpperCase();return n||i[r]||e[r]||i[o].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g,(function(e,t,n){return t||n.slice(1)}))}))).match(t),a=o.length,f=0;f<a;f+=1){var h=o[f],u=c[h],d=u&&u[0],l=u&&u[1];o[f]=l?{regex:d,parser:l}:h.replace(/^\[|\]$/g,``)}return function(e){for(var t={},n=0,r=0;n<a;n+=1){var i=o[n];if(typeof i==`string`)r+=i.length;else{var s=i.regex,f=i.parser,h=e.slice(r),u=s.exec(h)[0];f.call(t,u),e=e.replace(u,``)}}return function(e){var t=e.afternoon;if(t!==void 0){var n=e.hours;t?n<12&&(e.hours+=12):n===12&&(e.hours=0),delete e.afternoon}}(t),t}}return function(e,t,n){n.p.customParseFormat=!0,e&&e.parseTwoDigitYear&&(a=e.parseTwoDigitYear);var r=t.prototype,i=r.parse;r.parse=function(e){var t=e.date,r=e.utc,o=e.args;this.$u=r;var a=o[1];if(typeof a==`string`){var f=!0===o[2],h=!0===o[3],u=f||h,d=o[2];h&&(d=o[2]),s=this.$locale(),!f&&d&&(s=n.Ls[d]),this.$d=function(e,t,n,r){try{if([`x`,`X`].indexOf(t)>-1)return new Date((t===`X`?1e3:1)*e);var i=l(t)(e),o=i.year,s=i.month,a=i.day,f=i.hours,h=i.minutes,u=i.seconds,d=i.milliseconds,c=i.zone,m=i.week,M=new Date,Y=a||(o||s?1:M.getDate()),p=o||M.getFullYear(),v=0;o&&!s||(v=s>0?s-1:M.getMonth());var D,w=f||0,g=h||0,y=u||0,L=d||0;return c?new Date(Date.UTC(p,v,Y,w,g,y,L+60*c.offset*1e3)):n?new Date(Date.UTC(p,v,Y,w,g,y,L)):(D=new Date(p,v,Y,w,g,y,L),m&&(D=r(D).week(m).toDate()),D)}catch{return new Date(``)}}(t,a,r,n),this.init(),d&&!0!==d&&(this.$L=this.locale(d).$L),u&&t!=this.format(a)&&(this.$d=new Date(``)),s={}}else if(a instanceof Array)for(var c=a.length,m=1;m<=c;m+=1){o[1]=a[m-1];var M=n.apply(this,o);if(M.isValid()){this.$d=M.$d,this.$L=M.$L,this.init();break}m===c&&(this.$d=new Date(``))}else i.call(this,e)}}}))}));var require_isBetween=__commonJSMin(((exports,module)=>{(function(e,i){typeof exports==`object`&&module!==void 0?module.exports=i():typeof define==`function`&&define.amd?define(i):(e=typeof globalThis<`u`?globalThis:e||self).dayjs_plugin_isBetween=i()})(exports,(function(){return function(e,i,t){i.prototype.isBetween=function(e,i,s,f){var n=t(e),o=t(i),r=(f||=`()`)[0]===`(`,u=f[1]===`)`;return(r?this.isAfter(n,s):!this.isBefore(n,s))&&(u?this.isBefore(o,s):!this.isAfter(o,s))||(r?this.isBefore(n,s):!this.isAfter(n,s))&&(u?this.isAfter(o,s):!this.isBefore(o,s))}}}))}));var import_customParseFormat=__toESM(require_customParseFormat(),1);var import_isBetween=__toESM(require_isBetween(),1);var MazDatePicker_default=_plugin_vue_export_helper_default(defineComponent({inheritAttrs:!1,__name:`MazDatePicker`,props:mergeModels({id:{},style:{type:[Boolean,null,String,Object,Array]},class:{type:[Boolean,null,String,Object,Array]},inputProps:{},modelValue:{},format:{default:`YYYY-MM-DD`},open:{type:Boolean,default:!1},label:{},placeholder:{},inputDateFormat:{default:()=>({dateStyle:`medium`,timeStyle:`short`})},inputDateTransformer:{},locale:{},hideHeader:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},firstDayOfWeek:{default:0},autoClose:{type:Boolean,default:!1},customElementSelector:{},double:{type:Boolean,default:!1},inline:{type:Boolean,default:!1},color:{default:`primary`},pickerPosition:{default:`auto`},pickerPreferPosition:{default:`bottom-start`},pickerFallbackPosition:{default:`top-start`},time:{type:Boolean,default:!1},onlyTime:{type:Boolean,default:!1},minuteInterval:{default:5},useBrowserLocale:{type:Boolean,default:!0},fetchLocal:{type:Boolean,default:!0},shortcuts:{type:[Array,Boolean],default:!0},shortcut:{},minDate:{default:void 0},maxDate:{default:void 0},minMaxAuto:{type:Boolean,default:!0},disabledWeekly:{default:()=>[]},disabledDates:{default:()=>[]},disabledHours:{default:()=>[]},block:{type:Boolean},range:{type:Boolean,default:!1},transition:{default:`scale-fade`}},{locale:{default:void 0},localeModifiers:{},open:{default:!1},openModifiers:{}}),emits:mergeModels([`update:model-value`,`close`],[`update:locale`,`update:open`]),setup(__props,{emit:__emit}){let props=__props;let emits=__emit;let{t,locale}=useTranslations();dayjs.extend(import_customParseFormat.default),dayjs.extend(import_isBetween.default);let MazInput=defineAsyncComponent(()=>import(`../components/MazInput.js`));let instanceId=useInstanceUniqId({componentName:`MazDatePicker`,providedId:props.id});function isRangeModelValue(value){return typeof value==`object`&&!!value}let currentValue=computed({get:()=>isRangeModelValue(props.modelValue)||props.range?{start:isRangeModelValue(props.modelValue)&&props.modelValue.start?dayjs(props.modelValue.start,props.format).format():void 0,end:isRangeModelValue(props.modelValue)&&props.modelValue.end?dayjs(props.modelValue.end,props.format).format():void 0}:typeof props.modelValue==`string`&&props.modelValue?dayjs(props.modelValue,props.format).format():void 0,set:value=>{if(props.disabled)return;emitValue(props.range&&!isRangeValue(value)?{start:value,end:void 0}:value);let isRangeMode=isRangeModelValue(value)||props.range;props.autoClose&&(!isRangeMode||isRangeMode&&isRangeModelValue(value)&&value.end)&&closeCalendar()}});let hasTime=computed(()=>props.time||props.onlyTime);let hasDouble=computed(()=>props.double&&!props.onlyTime);let hasDate=computed(()=>!props.onlyTime);let isRangeMode=computed(()=>isRangeModelValue(currentValue.value)||props.range);let internalShortcuts=computed(()=>!isRangeMode.value||props.shortcuts===!1?!1:props.shortcuts&&Array.isArray(props.shortcuts)?props.shortcuts:getDefaultsShortcuts({lastSevenDays:t(`datePicker.shortcuts.lastSevenDays`),lastThirtyDays:t(`datePicker.shortcuts.lastThirtyDays`),thisWeek:t(`datePicker.shortcuts.thisWeek`),lastWeek:t(`datePicker.shortcuts.lastWeek`),thisMonth:t(`datePicker.shortcuts.thisMonth`),thisYear:t(`datePicker.shortcuts.thisYear`),lastYear:t(`datePicker.shortcuts.lastYear`)}));let localeModel=useModel(__props,`locale`);localeModel.value=props.locale??locale.value;let containerUniqueId=computed(()=>`MazDatePickerContainer-${instanceId.value}`);let popoverRef=useTemplateRef(`popover`);onBeforeMount(()=>{isRangeMode.value&&hasTime.value&&console.error(`[maz-ui](MazDatePicker) You can't use time picker with range picker`),hasTime.value&&!(props.format.includes(`h`)||props.format.includes(`H`))&&console.error(`[maz-ui](MazDatePicker) When you use the time picker, you must provided a format with time - Ex: "YYYY-MM-DD HH:mm"`),props.format.includes(`h`)&&!(props.format.includes(`a`)||props.format.includes(`A`))&&console.error(`[maz-ui](MazDatePicker) if you use the 12 format "h" or "hh", you must add "a" or "A" at the end of the format - Ex: "YYYY-MM-DD hh:mm a"`)});function getCalendarDate(value){let baseDate=(isRangeModelValue(value)?value.start:value)??dayjs().format();return props.minDate&&dayjs(baseDate).isBefore(props.minDate)?props.minDate:props.maxDate&&dayjs(baseDate).isAfter(props.maxDate)?props.minDate??props.maxDate:baseDate}let calendarDate=ref(getCalendarDate(currentValue.value));let isHour12=computed(()=>props.format.includes(`a`)||props.format.includes(`A`)||props.format.includes(`h`));let formatterOptions=computed(()=>({...props.inputDateFormat,timeStyle:hasTime.value?props.inputDateFormat.timeStyle??`short`:void 0,hour12:hasTime.value?props.inputDateFormat.hour12??isHour12.value:void 0}));let inputValue=computed(()=>{if(!currentValue.value)return;let formattedDate;return props.onlyTime&&typeof currentValue.value==`string`&¤tValue.value?formattedDate=currentValue.value?formatDate(dayjs(currentValue.value).format(),localeModel.value,{timeStyle:formatterOptions.value.timeStyle,hour12:formatterOptions.value.hour12}):void 0:isRangeMode.value&&isRangeValue(currentValue.value)?formattedDate=getRangeFormattedDate({value:currentValue.value,locale:localeModel.value,options:formatterOptions.value}):typeof currentValue.value==`string`&¤tValue.value&&(formattedDate=getFormattedDate({value:dayjs(currentValue.value).format(),locale:localeModel.value,options:formatterOptions.value})),props.inputDateTransformer&&formattedDate?props.inputDateTransformer({formattedDate,value:props.modelValue,locale:localeModel.value}):formattedDate});let hasPickerOpen=useModel(__props,`open`);function closeCalendar(){popoverRef.value?.close(),emits(`close`)}function checkMinMaxValues(value){if(!(!props.minDate&&!props.maxDate)){if(!isRangeMode.value&&(typeof value==`string`&&value||!value)){let{newValue,newCurrentDate}=checkValueWithMinMaxDates({value,minDate:props.minDate,maxDate:props.maxDate,format:props.format,minMaxAuto:props.minMaxAuto});newValue&&emitValue(newValue),newCurrentDate&&setCalendarDate(newCurrentDate)}else if(isRangeMode.value&&isRangeValue(value)){let newStartValue=value.start;let newEndValue=value.end;if(value.start){let{newValue,newCurrentDate}=checkValueWithMinMaxDates({value:value.start,minDate:props.minDate,maxDate:props.maxDate,format:props.format,minMaxAuto:props.minMaxAuto});newValue&&(newStartValue=newValue),newCurrentDate&&setCalendarDate(newCurrentDate)}if(value.end){let{newValue}=checkValueWithMinMaxDates({value:value.end,minDate:props.minDate,maxDate:props.maxDate,format:props.format,minMaxAuto:props.minMaxAuto});newValue&&(newEndValue=newValue)}emitValue({start:newStartValue,end:newEndValue})}}}function setCalendarDate(value){value&&!dayjs(calendarDate.value).isSame(value,`month`)&&(calendarDate.value=value)}function emitValue(value){if(isRangeMode.value&&(isRangeModelValue(value)||value===void 0)){let newValue=getRangeISODate(value,props.format)??{start:void 0,end:void 0};emits(`update:model-value`,newValue),newValue.start&&setCalendarDate(newValue.start)}else (typeof value==`string`&&value||value===void 0)&&emits(`update:model-value`,getISODate(value,props.format))}return watch(()=>[currentValue.value,props.minDate,props.maxDate],(values,oldValues)=>{let value=values[0];let oldValue=oldValues?.[0];isRangeModelValue(value)&&(value.start||value.end)?(!oldValue||isRangeModelValue(oldValue)&&(oldValue.start!==value.start||oldValue.end!==value.end))&&(emitValue(value),checkMinMaxValues(value)):typeof value==`string`&&value&&value!==oldValue&&(emitValue(value),checkMinMaxValues(value))},{immediate:!0}),watch(()=>[currentValue.value,props.disabledWeekly,props.disabledDates],values=>{let value=values[0];let disabledWeekly=values[1];let disabledDates=values[2];isRangeModelValue(value)&&(value.start||value.end)?((value.start&&isValueDisabledWeekly({value:value.start,disabledWeekly})||value.start&&isValueDisabledDate({value:value.start,disabledDates})||value.end&&isValueDisabledWeekly({value:value.end,disabledWeekly})||value.end&&isValueDisabledDate({value:value.end,disabledDates}))&&(currentValue.value={start:void 0,end:void 0}),(value.end&&isValueDisabledWeekly({value:value.end,disabledWeekly})||value.end&&isValueDisabledDate({value:value.end,disabledDates}))&&(currentValue.value={start:value.start,end:void 0})):typeof value==`string`&&value&&(isValueDisabledWeekly({value,disabledWeekly})||isValueDisabledDate({value,disabledDates}))&&(currentValue.value=void 0)},{immediate:!0}),(_ctx,_cache)=>__props.inline?(openBlock(),createBlock(MazPickerContainer_default,{key:1,id:containerUniqueId.value,modelValue:currentValue.value,"onUpdate:modelValue":_cache[3]||=$event=>currentValue.value=$event,"calendar-date":calendarDate.value,"onUpdate:calendarDate":_cache[4]||=$event=>calendarDate.value=$event,color:__props.color,locale:localeModel.value,"has-date":hasDate.value,double:hasDouble.value,"has-time":hasTime.value,"formatter-options":formatterOptions.value,"hide-header":__props.hideHeader,"min-date":__props.minDate,format:__props.format,"is-hour12":isHour12.value,"max-date":__props.maxDate,"disabled-weekly":__props.disabledWeekly,inline:__props.inline,"first-day-of-week":__props.firstDayOfWeek,shortcuts:internalShortcuts.value,shortcut:__props.shortcut,disabled:__props.disabled,"disabled-hours":__props.disabledHours,"disabled-dates":__props.disabledDates,"minute-interval":__props.minuteInterval,range:isRangeMode.value,onClose:closeCalendar},null,8,[`id`,`modelValue`,`calendar-date`,`color`,`locale`,`has-date`,`double`,`has-time`,`formatter-options`,`hide-header`,`min-date`,`format`,`is-hour12`,`max-date`,`disabled-weekly`,`inline`,`first-day-of-week`,`shortcuts`,`shortcut`,`disabled`,`disabled-hours`,`disabled-dates`,`minute-interval`,`range`])):(openBlock(),createBlock(MazPopover_default,{key:0,id:`${unref(instanceId)}-popover`,ref:`popover`,modelValue:hasPickerOpen.value,"onUpdate:modelValue":_cache[2]||=$event=>hasPickerOpen.value=$event,class:normalizeClass([`m-date-picker m-reset-css`,[`m-date-picker--${__props.color}`,{"--is-open":hasPickerOpen.value,"--is-disabled":__props.disabled},props.class]]),style:normalizeStyle(__props.style),offset:0,trigger:`click`,transition:__props.transition,disabled:__props.disabled,block:__props.block,position:__props.pickerPosition,"prefer-position":__props.pickerPreferPosition,"fallback-position":__props.pickerFallbackPosition,"position-reference":`#${unref(instanceId)}-popover .m-input-wrapper`},{trigger:withCtx(({isOpen,close,open:openPicker,toggle:togglePicker})=>[renderSlot(_ctx.$slots,`trigger`,{isOpen,close,open:openPicker,toggle:togglePicker},()=>[withDirectives(createVNode(unref(MazInput),mergeProps({id:unref(instanceId),"model-value":inputValue.value,readonly:``},{...__props.inputProps,..._ctx.$attrs},{block:``,autocomplete:`off`,class:`m-date-picker__input`,label:__props.label,disabled:__props.disabled,placeholder:__props.placeholder,color:__props.color}),{"left-icon":withCtx(()=>[hasDate.value?(openBlock(),createBlock(unref(MazCalendar),{key:0,class:`maz-text-xl`})):hasTime.value?(openBlock(),createBlock(unref(MazClock),{key:1,class:`maz-text-xl`})):createCommentVNode(``,!0)]),"right-icon":withCtx(()=>[createVNode(unref(MazChevronDown),{class:`m-date-picker__button__chevron maz-text-lg`})]),_:1},16,[`id`,`model-value`,`label`,`disabled`,`placeholder`,`color`]),[[vShow,!__props.customElementSelector&&!__props.inline]])],!0)]),default:withCtx(()=>[createVNode(MazPickerContainer_default,{id:containerUniqueId.value,modelValue:currentValue.value,"onUpdate:modelValue":_cache[0]||=$event=>currentValue.value=$event,"calendar-date":calendarDate.value,"onUpdate:calendarDate":_cache[1]||=$event=>calendarDate.value=$event,color:__props.color,locale:localeModel.value,"has-date":hasDate.value,double:hasDouble.value,"has-time":hasTime.value,"formatter-options":formatterOptions.value,"hide-header":__props.hideHeader,"min-date":__props.minDate,format:__props.format,"is-hour12":isHour12.value,"max-date":__props.maxDate,"disabled-weekly":__props.disabledWeekly,inline:__props.inline,"first-day-of-week":__props.firstDayOfWeek,shortcuts:internalShortcuts.value,shortcut:__props.shortcut,disabled:__props.disabled,"disabled-hours":__props.disabledHours,"disabled-dates":__props.disabledDates,"minute-interval":__props.minuteInterval,range:isRangeMode.value,onClose:closeCalendar},null,8,[`id`,`modelValue`,`calendar-date`,`color`,`locale`,`has-date`,`double`,`has-time`,`formatter-options`,`hide-header`,`min-date`,`format`,`is-hour12`,`max-date`,`disabled-weekly`,`inline`,`first-day-of-week`,`shortcuts`,`shortcut`,`disabled`,`disabled-hours`,`disabled-dates`,`minute-interval`,`range`])]),_:3},8,[`id`,`modelValue`,`style`,`class`,`transition`,`disabled`,`block`,`position`,`prefer-position`,`fallback-position`,`position-reference`]))}}),[[`__scopeId`,`data-v-1dc4bd2f`]]);export{MazDatePicker_default as t};