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