UNPKG

@aotearoan/neon

Version:

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

3 lines (2 loc) 4.81 kB
"use strict";const t=require("vue"),ee=require("../../../common/enums/NeonSize.cjs.js"),ae=require("../../../common/enums/NeonFunctionalColor.cjs.js"),te=require("../../presentation/dropdown/NeonDropdown.vue.cjs.js"),ne=require("../button/NeonButton.vue.cjs.js"),le=require("../input/NeonInput.vue.cjs.js"),r=require("../../../common/utils/NeonDateUtils.cjs.js"),oe=require("../../../common/enums/NeonDropdownPlacement.cjs.js"),ue=t.defineComponent({name:"NeonDatePicker",components:{NeonButton:ne,NeonDropdown:te,NeonInput:le},props:{modelValue:{type:String,default:null},locale:{type:String,default:null},disabled:{type:Boolean,default:!1},size:{type:String,default:ee.NeonSize.Medium},color:{type:String,default:ae.NeonFunctionalColor.Primary},min:{type:String,default:null},max:{type:String,default:null},placement:{type:String,default:oe.NeonDropdownPlacement.BottomLeft},disabledDates:{type:Array,default:()=>[]},placeholder:{type:String,required:!1},openCalendarLabel:{type:String,default:"Open calendar"},doneLabel:{type:String,default:"Done"},clearLabel:{type:String,default:"Clear"},changeMonthLabel:{type:String,default:"Change month"},previousMonthLabel:{type:String,default:"Previous month"},nextMonthLabel:{type:String,default:"Next month"},changeYearLabel:{type:String,default:"Change year"},previousYearLabel:{type:String,default:"Previous year"},nextYearLabel:{type:String,default:"Next year"},previousDecadeLabel:{type:String,default:"Previous decade"},nextDecadeLabel:{type:String,default:"Next decade"}},setup(e,{emit:y}){const D=t.useAttrs(),q=!D.required,T=t.ref(null),f=t.ref(null),c=t.ref(!1),d=t.ref(!1),m=t.ref(!1),U=t.computed(()=>{if(e.modelValue){const a=r.NeonDateUtils.stringToNeonDate(e.modelValue,e.locale,!0);if(a){const{dayFormatted:n,monthShortName:u,yearFormatted:Z}=a;return`${n} ${u} ${Z}`}}return""}),V=(a,n,u)=>r.NeonDateUtils.dmyToIso(a,n,u),v=new Date,b=e.locale||navigator.language,o=t.ref(v.getMonth()),l=t.ref(v.getFullYear()),i=t.ref(Math.floor(l.value/10)*10),h=()=>{o.value=e.modelValue?+e.modelValue.substring(5,7):+v.toLocaleString(b,{month:"numeric"}),l.value=e.modelValue?+e.modelValue.substring(0,4):+v.toLocaleString(b,{year:"numeric"}),i.value=Math.floor(l.value/10)*10};h();const s=t.computed(()=>r.NeonDateUtils.toCalendarConfiguration(e.modelValue,o.value,l.value,i.value,e.locale)),I=t.computed(()=>{const{day:a,month:n,year:u}=s.value.today;return r.NeonDateUtils.dmyToIso(a,n,u)}),O=()=>{if(!e.disabled&&(h(),c.value=!0,f.value)){const a=f.value.querySelector(".neon-date-picker__calendar-date--selected");a&&setTimeout(()=>a.focus())}},p=a=>{y("update:modelValue",a)},w=()=>{o.value===1?(o.value=12,l.value=l.value-1):o.value=o.value-1},F=()=>{o.value===12?(o.value=1,l.value=l.value+1):o.value=o.value+1},$=()=>{d.value=!0},N=t.computed(()=>e.min&&e.min>=r.NeonDateUtils.dmyToIso(1,s.value.pageMonth,s.value.pageYear)),x=t.computed(()=>{const{pageYear:a,pageMonth:n,lastDayOfMonth:u}=s.value;return e.max&&e.max<=r.NeonDateUtils.dmyToIso(u,n,a)}),_=t.computed(()=>N.value&&x.value),z=()=>{l.value=l.value-1},B=()=>{l.value=l.value+1},k=()=>{m.value=!0},S=t.computed(()=>e.min&&e.min>=r.NeonDateUtils.dmyToIso(1,1,s.value.pageYear)),Y=t.computed(()=>e.max&&e.max<=r.NeonDateUtils.dmyToIso(31,12,s.value.pageYear)),A=t.computed(()=>S.value&&Y.value),R=()=>{i.value=i.value-10},j=()=>{i.value=i.value+10},E=t.computed(()=>e.min&&e.min>=r.NeonDateUtils.dmyToIso(1,1,Math.floor(s.value.pageYear/10)*10)),G=t.computed(()=>e.max&&e.max<=r.NeonDateUtils.dmyToIso(31,12,Math.floor(s.value.pageYear/10)*10+9)),g=()=>{d.value=!1,m.value=!1},H=()=>{c.value=!1,g()},J=()=>{y("update:modelValue",null),c.value=!1,g()},K=a=>{o.value=a,d.value=!1},Q=a=>{l.value=a,m.value=!1},W=a=>{var n;return((n=e.disabledDates)==null?void 0:n.indexOf(a))>=0||e.min&&e.min>a||e.max&&e.max<a},X=(a,n)=>{const u=`${a}-${n<10?"0"+n:n}`;return C.value&&C.value>u||P.value&&P.value<u},M=t.computed(()=>e.min?+e.min.substring(0,4):null),C=t.computed(()=>e.min?e.min.substring(0,7):null),L=t.computed(()=>e.max?+e.max.substring(0,4):null),P=t.computed(()=>e.max?e.max.substring(0,7):null);return{attrs:D,calendar:s,calendarOpen:c,dropdown:T,formattedValue:U,isChangeDateDisabled:_,isChangeYearDisabled:A,isNextDisabled:x,isNextDecadeDisabled:G,isNextYearDisabled:Y,isPreviousDisabled:N,isPreviousDecadeDisabled:E,isPreviousYearDisabled:S,monthSelectionOpen:d,optional:q,today:I,calendarRef:f,yearSelectionOpen:m,changeMonth:$,changeYear:k,clear:J,done:H,emitDate:p,isDisabled:W,isoDate:V,isMonthDisabled:X,isYearDisabled:a=>M.value&&M.value>a||L.value&&L.value<a,openCalendar:O,onNext:F,onNextDecade:j,onNextYear:B,onPrevious:w,onPreviousDecade:R,onPreviousYear:z,resetToCalendar:g,selectMonth:K,selectYear:Q}}});module.exports=ue; //# sourceMappingURL=NeonDatePicker.cjs.js.map