@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
3 lines (2 loc) • 4.86 kB
JavaScript
;const t=require("vue"),ee=require("../../../model/common/size/NeonSize.cjs.js"),ae=require("../../../model/common/color/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("../../../utils/common/date/NeonDateUtils.cjs.js"),oe=require("../../../model/presentation/dropdown/NeonDropdownPlacement.cjs.js"),ue=t.defineComponent({name:"NeonDatePicker",components:{NeonButton:ne,NeonDropdown:te,NeonInput:le},props:{id:{type:String},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),v=t.ref(null),f=t.ref(!1),c=t.ref(!1),d=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 e.placeholder||""}),V=(a,n,u)=>r.NeonDateUtils.dmyToIso(a,n,u),m=new Date,h=e.locale||navigator.language,o=t.ref(m.getMonth()),l=t.ref(m.getFullYear()),s=t.ref(Math.floor(l.value/10)*10),b=()=>{o.value=e.modelValue?+e.modelValue.substring(5,7):+m.toLocaleString(h,{month:"numeric"}),l.value=e.modelValue?+e.modelValue.substring(0,4):+m.toLocaleString(h,{year:"numeric"}),s.value=Math.floor(l.value/10)*10};b();const i=t.computed(()=>r.NeonDateUtils.toCalendarConfiguration(e.modelValue,o.value,l.value,s.value,e.locale)),I=t.computed(()=>{const{day:a,month:n,year:u}=i.value.today;return r.NeonDateUtils.dmyToIso(a,n,u)}),O=()=>{if(!e.disabled&&(b(),v.value)){const a=v.value.querySelector(".neon-date-picker__calendar-date--selected");a&&setTimeout(()=>a.focus())}},w=a=>{y("update:modelValue",a)},F=()=>{o.value===1?(o.value=12,l.value=l.value-1):o.value=o.value-1},$=()=>{o.value===12?(o.value=1,l.value=l.value+1):o.value=o.value+1},p=()=>{c.value=!0},N=t.computed(()=>e.min&&e.min>=r.NeonDateUtils.dmyToIso(1,i.value.pageMonth,i.value.pageYear)),S=t.computed(()=>{const{pageYear:a,pageMonth:n,lastDayOfMonth:u}=i.value;return e.max&&e.max<=r.NeonDateUtils.dmyToIso(u,n,a)}),_=t.computed(()=>N.value&&S.value),z=()=>{l.value=l.value-1},B=()=>{l.value=l.value+1},k=()=>{d.value=!0},x=t.computed(()=>e.min&&e.min>=r.NeonDateUtils.dmyToIso(1,1,i.value.pageYear)),Y=t.computed(()=>e.max&&e.max<=r.NeonDateUtils.dmyToIso(31,12,i.value.pageYear)),A=t.computed(()=>x.value&&Y.value),R=()=>{s.value=s.value-10},j=()=>{s.value=s.value+10},E=t.computed(()=>e.min&&e.min>=r.NeonDateUtils.dmyToIso(1,1,Math.floor(i.value.pageYear/10)*10)),G=t.computed(()=>e.max&&e.max<=r.NeonDateUtils.dmyToIso(31,12,Math.floor(i.value.pageYear/10)*10+9)),g=()=>{c.value=!1,d.value=!1},H=()=>{f.value=!1,g()},J=()=>{y("update:modelValue",null),f.value=!1,g()},K=a=>{o.value=a,c.value=!1},Q=a=>{l.value=a,d.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:i,calendarOpen:f,dropdown:T,formattedValue:U,isChangeDateDisabled:_,isChangeYearDisabled:A,isNextDisabled:S,isNextDecadeDisabled:G,isNextYearDisabled:Y,isPreviousDisabled:N,isPreviousDecadeDisabled:E,isPreviousYearDisabled:x,monthSelectionOpen:c,optional:q,today:I,calendarRef:v,yearSelectionOpen:d,changeMonth:p,changeYear:k,clear:J,done:H,emitDate:w,isDisabled:W,isoDate:V,isMonthDisabled:X,isYearDisabled:a=>M.value&&M.value>a||L.value&&L.value<a,toggleCalendar:O,onNext:$,onNextDecade:j,onNextYear:B,onPrevious:F,onPreviousDecade:R,onPreviousYear:z,resetToCalendar:g,selectMonth:K,selectYear:Q}}});module.exports=ue;
//# sourceMappingURL=NeonDatePicker.cjs.js.map