@dialpad/dialtone/dist/vue3/lib/datepicker/datepicker.cjs

Dialpad's Dialtone design system monorepo

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),f=require("../../common/utils/index.cjs"),L=require("@dialpad/dialtone-icons/vue3"),$=require("./datepicker-constants.cjs"),k=require("date-fns"),x=require("./utils.cjs"),N=require("../stack/stack.cjs"),w=require("../tooltip/tooltip.cjs"),M=require("../button/button.cjs");function F(r,c){const s=e.ref(k.getMonth(r.selectedDate)),t=e.ref(k.getYear(r.selectedDate)),n=e.ref(null),o=e.ref(0),d=e.ref([]),b=e.computed(()=>x.getCalendarDays(s.value,t.value,n.value)),p=e.computed(()=>(a,h,T)=>x.formatMonth(a,h,T));e.watch(s,()=>{u(),c("calendar-days",b.value)},{immediate:!0}),e.watch(t,()=>{u(),c("calendar-days",b.value)},{immediate:!0});function m(a){d.value.includes(a)||d.value.push(a)}function y(){f.returnFirstEl(d.value[0].$el).focus()}function g(a){switch(a.key){case"ArrowLeft":a.preventDefault(),o.value===0?(o.value=3,f.returnFirstEl(d.value[o.value].$el).focus()):(o.value--,f.returnFirstEl(d.value[o.value].$el).focus());break;case"ArrowRight":a.preventDefault(),o.value===3?(o.value=0,f.returnFirstEl(d.value[o.value].$el).focus()):(o.value++,f.returnFirstEl(d.value[o.value].$el).focus());break;case"ArrowDown":a.preventDefault(),c("focus-first-day");break;case"Tab":a.preventDefault(),c("focus-first-day");break;case"Escape":c("close-datepicker");break}}function u(){const a=k.getYear(r.selectedDate),h=k.getMonth(r.selectedDate);a!==t.value||h!==s.value?n.value=null:n.value=k.getDate(r.selectedDate)}function v(a){(s.value===0&&a===-1||s.value===11&&a===1)&&(t.value+=a);const h=k.set(r.selectedDate,{month:s.value,year:t.value}),T=a===1?k.addMonths(h,1):k.subMonths(h,1);s.value=k.getMonth(T)}function i(a){t.value=t.value+a}function D(){v(1)}function l(){v(-1)}return{selectMonth:s,selectYear:t,formattedMonth:p,setDayRef:m,focusMonthYearPicker:y,handleKeyDown:g,changeMonth:v,changeYear:i,goToNextMonth:D,goToPrevMonth:l}}const C={id:"calendar-heading",class:"d-datepicker__month-year-title"},E={__name:"month-year-picker",props:{locale:{type:String,required:!0},prevMonthLabel:{type:String,required:!0},nextMonthLabel:{type:String,required:!0},prevYearLabel:{type:String,required:!0},nextYearLabel:{type:String,required:!0},changeToLabel:{type:String,required:!0},selectedDate:{type:Date,required:!0}},emits:["calendar-days","focus-first-day","focus-last-day","close-datepicker"],setup(r,{expose:c,emit:s}){const t=r,n=s,{selectMonth:o,selectYear:d,formattedMonth:b,setDayRef:p,focusMonthYearPicker:m,handleKeyDown:y,changeMonth:g,changeYear:u,goToNextMonth:v,goToPrevMonth:i}=F(t,n);return e.onMounted(()=>{m()}),c({focusMonthYearPicker:m,goToNextMonth:v,goToPrevMonth:i}),(D,l)=>(e.openBlock(),e.createBlock(e.unref(N.default),{direction:"row",class:"d-datepicker__month-year",gap:"300"},{default:e.withCtx(()=>[e.createVNode(e.unref(N.default),{as:"nav",direction:"row",gap:"200",class:"d-datepicker__nav"},{default:e.withCtx(()=>[e.createVNode(e.unref(w.default),{message:r.prevYearLabel,placement:"top","fallback-placements":["top-start","auto"]},{anchor:e.withCtx(()=>[e.createVNode(e.unref(M.default),{id:"prevYearButton",ref:a=>{a&&e.unref(p)(a)},size:"xs",importance:"clear",kind:"muted",circle:!0,class:"d-datepicker__nav-btn",type:"button","aria-label":`${r.changeToLabel} ${r.prevYearLabel} ${e.unref(d)-1}`,onClick:l[0]||(l[0]=a=>e.unref(u)(-1)),onKeydown:l[1]||(l[1]=a=>e.unref(y)(a))},{default:e.withCtx(()=>[e.createVNode(e.unref(L.DtIconChevronsLeft),{size:"200"})]),_:1},8,["aria-label"])]),_:1},8,["message"]),e.createVNode(e.unref(w.default),{message:r.prevMonthLabel,placement:"top","fallback-placements":["top-end","auto"]},{anchor:e.withCtx(()=>[e.createVNode(e.unref(M.default),{id:"prevMonthButton",ref:a=>{a&&e.unref(p)(a)},size:"xs",importance:"clear",kind:"muted",circle:!0,class:"d-datepicker__nav-btn",type:"button","aria-label":`${r.changeToLabel} ${r.prevMonthLabel} ${e.unref(b)(e.unref(o)-1,e.unref($.INTL_MONTH_FORMAT),r.locale)}`,onClick:l[2]||(l[2]=a=>e.unref(g)(-1)),onKeydown:l[3]||(l[3]=a=>e.unref(y)(a))},{default:e.withCtx(()=>[e.createVNode(e.unref(L.DtIconChevronLeft),{size:"200"})]),_:1},8,["aria-label"])]),_:1},8,["message"])]),_:1}),e.createElementVNode("div",C,e.toDisplayString(e.unref(b)(e.unref(o),e.unref($.INTL_MONTH_FORMAT),r.locale))+" "+e.toDisplayString(e.unref(d)),1),e.createVNode(e.unref(N.default),{as:"nav",direction:"row",gap:"200",class:"d-datepicker__nav"},{default:e.withCtx(()=>[e.createVNode(e.unref(w.default),{message:r.nextMonthLabel,placement:"top","fallback-placements":["top-start","auto"]},{anchor:e.withCtx(()=>[e.createVNode(e.unref(M.default),{id:"nextMonthButton",ref:a=>{a&&e.unref(p)(a)},size:"xs",importance:"clear",kind:"muted",circle:!0,class:"d-datepicker__nav-btn",type:"button","aria-label":`${r.changeToLabel} ${r.nextMonthLabel} ${e.unref(b)(e.unref(o)+1,e.unref($.INTL_MONTH_FORMAT),r.locale)}`,onClick:l[4]||(l[4]=a=>e.unref(g)(1)),onKeydown:l[5]||(l[5]=a=>e.unref(y)(a))},{default:e.withCtx(()=>[e.createVNode(e.unref(L.DtIconChevronRight),{size:"200"})]),_:1},8,["aria-label"])]),_:1},8,["message"]),e.createVNode(e.unref(w.default),{message:r.nextYearLabel,placement:"top","fallback-placements":["top-end","auto"]},{anchor:e.withCtx(()=>[e.createVNode(e.unref(M.default),{id:"nextYearButton",ref:a=>{a&&e.unref(p)(a)},size:"xs",importance:"clear",kind:"muted",circle:!0,class:"d-datepicker__nav-btn",type:"button","aria-label":`${r.changeToLabel} ${r.nextYearLabel} ${e.unref(d)+1}`,onClick:l[6]||(l[6]=a=>e.unref(u)(1)),onKeydown:l[7]||(l[7]=a=>e.unref(y)(a))},{default:e.withCtx(()=>[e.createVNode(e.unref(L.DtIconChevronsRight),{size:"200"})]),_:1},8,["aria-label"])]),_:1},8,["message"])]),_:1})]),_:1}))}};function Y(r,c){const s=e.ref(null),t=e.ref(0),n=e.ref([]),o=e.computed(()=>x.getWeekDayNames(r.locale,$.WEEK_START));e.watch(()=>r.calendarDays,()=>{t.value=0,n.value=[],s.value=null});function d(u){return`${r.selectDayLabel} ${u.text} ${k.format(u.value,$.MONTH_FORMAT)} ${k.getYear(u.value)}`}function b(u,v){!n.value.some(i=>i.el===u)&&v.currentMonth&&n.value.push({el:u,day:v})}function p(u){switch(u.key){case"ArrowUp":u.preventDefault(),t.value-=7;try{f.returnFirstEl(n.value[t.value].el.$el).focus()}catch{const i=x.calculatePrevFocusDate(n.value[t.value+7].day.value);c("go-to-prev-month"),e.nextTick(()=>{f.returnFirstEl(n.value[i-1].el.$el).focus(),t.value+=i-1})}break;case"ArrowDown":u.preventDefault(),t.value+=7;try{f.returnFirstEl(n.value[t.value].el.$el).focus()}catch{const i=x.calculateNextFocusDate(n.value[t.value-7].day.value);c("go-to-next-month"),e.nextTick(()=>{f.returnFirstEl(n.value[i-1].el.$el).focus(),t.value+=i-1})}break;case"ArrowLeft":u.preventDefault(),t.value>0?(t.value-=1,f.returnFirstEl(n.value[t.value].el.$el).focus()):(c("go-to-prev-month"),y());break;case"ArrowRight":u.preventDefault(),t.value<n.value.length-1?(t.value+=1,f.returnFirstEl(n.value[t.value].el.$el).focus()):(c("go-to-next-month"),m());break;case"Tab":u.preventDefault(),c("focus-month-year-picker");break;case"Escape":c("close-datepicker");break}}function m(){t.value=0,e.nextTick(()=>{f.returnFirstEl(n.value[t.value].el.$el).focus()})}function y(){e.nextTick(()=>{t.value=n.value.length-1,f.returnFirstEl(n.value[t.value].el.$el).focus()})}function g(u){u.currentMonth&&(s.value=u.text,c("select-date",u.value))}return{selectedDay:s,weekDays:o,dayAriaLabel:d,setDayRef:b,handleKeyDown:p,focusFirstDay:m,selectDay:g}}const q={class:"d-datepicker__calendar","aria-labelledby":"calendar-heading"},V=["title","aria-label"],S={__name:"calendar",props:{calendarDays:{type:Array,required:!0},locale:{type:String,required:!0},selectDayLabel:{type:String,required:!0}},emits:["select-date","focus-month-year-picker","close-datepicker","go-to-next-month","go-to-prev-month"],setup(r,{expose:c,emit:s}){const t=r,n=s,{selectedDay:o,weekDays:d,dayAriaLabel:b,setDayRef:p,handleKeyDown:m,focusFirstDay:y,selectDay:g}=Y(t,n);return c({focusFirstDay:y}),(u,v)=>(e.openBlock(),e.createElementBlock("table",q,[e.createElementVNode("thead",null,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(d),i=>(e.openBlock(),e.createElementBlock("th",{key:i,scope:"col",class:"d-datepicker__cell d-datepicker__cell--header"},[e.createElementVNode("span",{class:"d-datepicker__weekday",title:i,"aria-label":i},e.toDisplayString(i),9,V)]))),128))])]),e.createElementVNode("tbody",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.calendarDays,(i,D)=>(e.openBlock(),e.createElementBlock("tr",{key:D},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.days,(l,a)=>(e.openBlock(),e.createElementBlock("td",{key:D+a,class:"d-datepicker__cell",role:"listbox"},[e.createVNode(e.unref(M.default),{ref_for:!0,ref:h=>{h&&e.unref(p)(h,l)},class:e.normalizeClass(["d-datepicker__day",{"d-datepicker__day--disabled":!l.currentMonth,"d-datepicker__day--selected":e.unref(o)?l.text===e.unref(o)&&l.currentMonth:l.selected}]),circle:!0,size:"sm",importance:"clear",disabled:!l.currentMonth,type:"button","aria-selected":e.unref(o)?l.text===e.unref(o)&&l.currentMonth:l.selected,"aria-label":e.unref(b)(l),role:"option",onClick:h=>e.unref(g)(l),onKeydown:v[0]||(v[0]=h=>e.unref(m)(h))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.text),1)]),_:2},1032,["disabled","class","aria-selected","aria-label","onClick"])]))),128))]))),128))])]))}},B={class:"d-datepicker__hd"},P={class:"d-datepicker__bd"},A={__name:"datepicker",props:{prevMonthLabel:{type:String,required:!0},nextMonthLabel:{type:String,required:!0},prevYearLabel:{type:String,required:!0},nextYearLabel:{type:String,required:!0},selectDayLabel:{type:String,required:!0},changeToLabel:{type:String,required:!0},locale:{type:String,default:"en-US"},selectedDate:{type:Date,default:()=>new Date}},emits:["selected-date","close-datepicker"],setup(r){const c=e.ref([]);function s(t){c.value=t}return e.onMounted(()=>{const t=e.getCurrentInstance();f.warnIfUnmounted(f.returnFirstEl(t.proxy.$el),"datepicker")}),(t,n)=>(e.openBlock(),e.createBlock(e.unref(N.default),{class:"d-datepicker",gap:"400"},{default:e.withCtx(()=>[e.createElementVNode("div",B,[e.createVNode(E,{ref:"monthYearPicker",locale:r.locale,"prev-month-label":r.prevMonthLabel,"next-month-label":r.nextMonthLabel,"prev-year-label":r.prevYearLabel,"next-year-label":r.nextYearLabel,"change-to-label":r.changeToLabel,"selected-date":r.selectedDate,onCalendarDays:s,onFocusFirstDay:n[0]||(n[0]=o=>t.$refs.calendar.focusFirstDay()),onFocusLastDay:n[1]||(n[1]=o=>t.$refs.calendar.focusLastDay()),onCloseDatepicker:n[2]||(n[2]=o=>t.$emit("close-datepicker"))},null,8,["locale","prev-month-label","next-month-label","prev-year-label","next-year-label","change-to-label","selected-date"])]),e.createElementVNode("div",P,[e.createVNode(S,{ref:"calendar",locale:r.locale,"calendar-days":c.value,"select-day-label":r.selectDayLabel,onSelectDate:n[3]||(n[3]=o=>t.$emit("selected-date",o)),onFocusMonthYearPicker:n[4]||(n[4]=o=>t.$refs.monthYearPicker.focusMonthYearPicker()),onCloseDatepicker:n[5]||(n[5]=o=>t.$emit("close-datepicker")),onGoToNextMonth:n[6]||(n[6]=o=>t.$refs.monthYearPicker.goToNextMonth()),onGoToPrevMonth:n[7]||(n[7]=o=>t.$refs.monthYearPicker.goToPrevMonth())},null,8,["locale","calendar-days","select-day-label"])])]),_:1}))}};exports.default=A;
//# sourceMappingURL=datepicker.cjs.map