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

Dialpad's Dialtone design system monorepo

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("@dialpad/dialtone-icons/vue2"),n=require("date-fns"),i=require("./utils.cjs"),u=require("./datepicker-constants.cjs"),d=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),f=require("../button/button.cjs"),p=require("../tooltip/tooltip.cjs"),_=require("../stack/stack.cjs"),D=require("../../common/mixins/localization.cjs"),y=require("../../common/utils/index.cjs"),k={name:"DtDatepickerMonthYearPicker",components:{DtButton:f.default,DtTooltip:p.default,DtStack:_.default,DtIconChevronLeft:h.DtIconChevronLeft,DtIconChevronsLeft:h.DtIconChevronsLeft,DtIconChevronRight:h.DtIconChevronRight,DtIconChevronsRight:h.DtIconChevronsRight},mixins:[D.default],props:{selectedDate:{type:Date,required:!0}},emits:["calendar-days","focus-first-day","focus-last-day","close-datepicker"],data(){return{selectMonth:n.getMonth(this.selectedDate),selectYear:n.getYear(this.selectedDate),highlightedDay:null,focusPicker:0,focusRefs:[],refNames:["prevYearButtonRef","prevMonthButtonRef","nextMonthButtonRef","nextYearButtonRef"]}},computed:{calendarDays(){return i.getCalendarDays(this.selectMonth,this.selectYear,this.highlightedDay)},formattedMonth(){return s=>i.formatMonth(s,u.INTL_MONTH_FORMAT,this.i18n.currentLocale)},previousYearAriaLabel(){return`${this.i18n.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${this.i18n.$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR")} ${this.selectYear-1}`},previousMonthAriaLabel(){return`${this.i18n.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${this.i18n.$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH")} ${this.formattedMonth(this.selectMonth-1)}`},nextYearAriaLabel(){return`${this.i18n.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${this.i18n.$t("DIALTONE_DATEPICKER_NEXT_YEAR")} ${this.selectYear+1}`},nextMonthAriaLabel(){return`${this.i18n.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${this.i18n.$t("DIALTONE_DATEPICKER_NEXT_MONTH")} ${this.formattedMonth(this.selectMonth+1)}`}},watch:{selectMonth:{handler(){this.highlightDay(),this.$emit("calendar-days",this.calendarDays)},immediate:!0},selectYear:{handler(){this.highlightDay(),this.$emit("calendar-days",this.calendarDays)},immediate:!0}},mounted(){this.setButtonsRef(),this.focusMonthYearPicker()},methods:{setButtonsRef(){this.focusRefs=this.refNames.map(s=>this.$refs[s])},focusMonthYearPicker(){this.focusPicker=0,this.focusRefs[0].$el.focus()},handleKeyDown(s){switch(s.key){case"ArrowLeft":s.preventDefault(),this.focusPicker===0?(this.focusPicker=3,this.focusRefs[this.focusPicker].$el.focus()):(this.focusPicker--,this.focusRefs[this.focusPicker].$el.focus());break;case"ArrowRight":s.preventDefault(),this.focusPicker===3?(this.focusPicker=0,this.focusRefs[this.focusPicker].$el.focus()):(this.focusPicker++,this.focusRefs[this.focusPicker].$el.focus());break;case"ArrowDown":s.preventDefault(),this.$emit("focus-first-day");break;case"Tab":s.preventDefault(),this.$emit("focus-first-day");break;case"Escape":this.$emit("close-datepicker");break}},highlightDay(){const s=n.getYear(this.selectedDate),e=n.getMonth(this.selectedDate);s!==this.selectYear||e!==this.selectMonth?this.highlightedDay=null:this.highlightedDay=n.getDate(this.selectedDate)},changeMonth(s){(this.selectMonth===0&&s===-1||this.selectMonth===11&&s===1)&&(this.selectYear+=s);const e=n.set(this.selectedDate,{month:this.selectMonth,year:this.selectYear}),t=s===1?n.addMonths(e,1):n.subMonths(e,1);this.selectMonth=n.getMonth(t)},changeYear(s){this.selectYear=this.selectYear+s},goToNextMonth(){this.changeMonth(1)},goToPrevMonth(){this.changeMonth(-1)}}};var m=function(){var e=this,t=e._self._c;return t("dt-stack",{staticClass:"d-datepicker__month-year",attrs:{direction:"row",gap:"300"}},[t("dt-stack",{staticClass:"d-datepicker__nav",attrs:{as:"nav",direction:"row",gap:"200"}},[t("dt-tooltip",{attrs:{"fallback-placements":["top-start","auto"],message:e.i18n.$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR"),placement:"top"},scopedSlots:e._u([{key:"anchor",fn:function(){return[t("dt-button",{ref:e.refNames[0],staticClass:"d-datepicker__nav-btn",attrs:{id:"prevYearButton","aria-label":e.previousYearAriaLabel,circle:"",importance:"clear",kind:"muted",size:"xs",type:"button"},on:{click:function(a){return e.changeYear(-1)},keydown:function(a){return e.handleKeyDown(a)}}},[t("dt-icon-chevrons-left",{attrs:{size:"200"}})],1)]},proxy:!0}])}),t("dt-tooltip",{attrs:{"fallback-placements":["top-start","auto"],message:e.i18n.$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH"),placement:"top"},scopedSlots:e._u([{key:"anchor",fn:function(){return[t("dt-button",{ref:e.refNames[1],staticClass:"d-datepicker__nav-btn",attrs:{id:"prevMonthButton","aria-label":e.previousMonthAriaLabel,circle:"",importance:"clear",kind:"muted",size:"xs",type:"button"},on:{click:function(a){return e.changeMonth(-1)},keydown:function(a){return e.handleKeyDown(a)}}},[t("dt-icon-chevron-left",{attrs:{size:"200"}})],1)]},proxy:!0}])})],1),t("div",{staticClass:"d-datepicker__month-year-title",attrs:{id:"calendar-heading"}},[e._v(" "+e._s(e.formattedMonth(e.selectMonth))+" "+e._s(e.selectYear)+" ")]),t("dt-stack",{staticClass:"d-datepicker__nav",attrs:{as:"nav",direction:"row",gap:"200"}},[t("dt-tooltip",{attrs:{"fallback-placements":["top-end","auto"],message:e.i18n.$t("DIALTONE_DATEPICKER_NEXT_MONTH"),placement:"top"},scopedSlots:e._u([{key:"anchor",fn:function(){return[t("dt-button",{ref:e.refNames[2],staticClass:"d-datepicker__nav-btn",attrs:{id:"nextMonthButton","aria-label":e.nextMonthAriaLabel,circle:"",importance:"clear",kind:"muted",size:"xs",type:"button"},on:{click:function(a){return e.changeMonth(1)},keydown:function(a){return e.handleKeyDown(a)}}},[t("dt-icon-chevron-right",{attrs:{size:"200"}})],1)]},proxy:!0}])}),t("dt-tooltip",{attrs:{"fallback-placements":["top-end","auto"],message:e.i18n.$t("DIALTONE_DATEPICKER_NEXT_YEAR"),placement:"top"},scopedSlots:e._u([{key:"anchor",fn:function(){return[t("dt-button",{ref:e.refNames[3],staticClass:"d-datepicker__nav-btn",attrs:{id:"nextYearButton","aria-label":e.nextYearAriaLabel,circle:"",importance:"clear",kind:"muted",size:"xs",type:"button"},on:{click:function(a){return e.changeYear(1)},keydown:function(a){return e.handleKeyDown(a)}}},[t("dt-icon-chevrons-right",{attrs:{size:"200"}})],1)]},proxy:!0}])})],1)],1)},$=[],v=d.n(k,m,$);const R=v.exports,b={name:"DtDatepickerCalendar",components:{DtButton:f.default},mixins:[D.default],props:{calendarDays:{type:Array,required:!0}},emits:["select-date","focus-month-year-picker","close-datepicker"],data(){return{selectedDay:null,focusDay:0,daysRef:[]}},computed:{weekDays(){return i.getWeekDayNames(this.i18n.currentLocale,u.WEEK_START)}},watch:{calendarDays(){this.focusDay=0,this.selectedDay=null,this.daysRef=[],this.$nextTick(()=>{this.daysRef=[],this.setDayRef()})}},methods:{dayAriaLabel(s){return this.i18n.$t("DIALTONE_DATEPICKER_SELECT_DAY")+` ${i.formatDate(s.value,u.INTL_MONTH_FORMAT,this.i18n.currentLocale)}`},setDayRef(s,e){this.calendarDays.forEach((t,a)=>{t.days.forEach((c,r)=>{const l=`buttonRef_${a}_${r}`,o=this.$refs[l];o&&c.currentMonth&&this.daysRef.push({el:o[0],day:c})})})},handleKeyDown(s){switch(s.key){case"ArrowUp":s.preventDefault(),this.focusDay-=7;try{this.daysRef[this.focusDay].el.$el.focus()}catch{const t=i.calculatePrevFocusDate(this.daysRef[this.focusDay+7].day.value);this.$emit("go-to-prev-month"),this.$nextTick(()=>{this.setDayRef(),this.daysRef[t-1].el.$el.focus(),this.focusDay+=t-1})}break;case"ArrowDown":s.preventDefault(),this.focusDay+=7;try{this.daysRef[this.focusDay].el.$el.focus()}catch{const t=i.calculateNextFocusDate(this.daysRef[this.focusDay-7].day.value);this.$emit("go-to-next-month"),this.$nextTick(()=>{this.setDayRef(),this.daysRef[t-1].el.$el.focus(),this.focusDay+=t-1})}break;case"ArrowLeft":s.preventDefault(),this.focusDay>0?(this.focusDay-=1,this.daysRef[this.focusDay].el.$el.focus()):(this.$emit("go-to-prev-month"),this.$nextTick(()=>{this.focusLastDay()}));break;case"ArrowRight":s.preventDefault(),this.focusDay<this.daysRef.length-1?(this.focusDay+=1,this.daysRef[this.focusDay].el.$el.focus()):(this.$emit("go-to-next-month"),this.$nextTick(()=>{this.focusFirstDay()}));break;case"Tab":s.preventDefault(),this.$emit("focus-month-year-picker");break;case"Escape":this.$emit("close-datepicker");break}},focusFirstDay(){this.focusDay=0,this.$nextTick(()=>{this.daysRef[this.focusDay].el.$el.focus()})},focusLastDay(){this.$nextTick(()=>{this.focusDay=this.daysRef.length-1,this.daysRef[this.focusDay].el.$el.focus()})},selectDay(s){s.currentMonth&&(this.selectedDay=s.text,this.$emit("select-date",s.value))}}};var g=function(){var e=this,t=e._self._c;return t("table",{staticClass:"d-datepicker__calendar",attrs:{"aria-labelledby":"calendar-heading"}},[t("thead",[t("tr",e._l(e.weekDays,function(a){return t("th",{key:a,staticClass:"d-datepicker__cell d-datepicker__cell--header",attrs:{scope:"col"}},[t("span",{staticClass:"d-datepicker__weekday",attrs:{title:a,"aria-label":a}},[e._v(" "+e._s(a))])])}),0)]),t("tbody",e._l(e.calendarDays,function(a,c){return t("tr",{key:c},e._l(a.days,function(r,l){return t("td",{key:c+l,staticClass:"d-datepicker__cell",attrs:{role:"listbox"}},[t("dt-button",{ref:`buttonRef_${c}_${l}`,refInFor:!0,staticClass:"d-datepicker__day",class:{"d-datepicker__day--disabled":!r.currentMonth,"d-datepicker__day--selected":e.selectedDay?r.text===e.selectedDay&&r.currentMonth:r.selected},attrs:{circle:!0,size:"sm",importance:"clear",disabled:!r.currentMonth,type:"button","aria-selected":e.selectedDay?r.text===e.selectedDay&&r.currentMonth:r.selected,"aria-label":e.dayAriaLabel(r),role:"option"},on:{click:function(o){return e.selectDay(r)},keydown:function(o){return e.handleKeyDown(o)}}},[e._v(" "+e._s(r.text)+" ")])],1)}),0)}),0)])},E=[],T=d.n(b,g,E);const M=T.exports,A={name:"DtDatepicker",components:{DtStack:_.default,MonthYearPicker:R,Calendar:M},props:{selectedDate:{type:Date,default:()=>new Date}},emits:["selected-date","close-datepicker"],data(){return{calendarDays:[]}},mounted(){y.warnIfUnmounted(this.$el,this.$options.name)},methods:{updateCalendarDays(s){this.calendarDays=s}}};var C=function(){var e=this,t=e._self._c;return t("dt-stack",{staticClass:"d-datepicker",attrs:{gap:"400"}},[t("div",{staticClass:"d-datepicker__hd"},[t("month-year-picker",{ref:"monthYearPicker",attrs:{"selected-date":e.selectedDate},on:{"calendar-days":e.updateCalendarDays,"focus-first-day":function(a){return e.$refs.calendar.focusFirstDay()},"focus-last-day":function(a){return e.$refs.calendar.focusLastDay()},"close-datepicker":function(a){return e.$emit("close-datepicker")}}})],1),t("div",{staticClass:"d-datepicker__bd"},[t("calendar",{ref:"calendar",attrs:{"calendar-days":e.calendarDays},on:{"select-date":function(a){return e.$emit("selected-date",a)},"focus-month-year-picker":function(a){return e.$refs.monthYearPicker.focusMonthYearPicker()},"close-datepicker":function(a){return e.$emit("close-datepicker")},"go-to-next-month":function(a){return e.$refs.monthYearPicker.goToNextMonth()},"go-to-prev-month":function(a){return e.$refs.monthYearPicker.goToPrevMonth()}}})],1)])},I=[],P=d.n(A,C,I);const x=P.exports;exports.default=x;
//# sourceMappingURL=datepicker.cjs.map