@dialpad/dialtone-vue/dist/lib/datepicker/datepicker.cjs

Vue component library for Dialpad's design system Dialtone

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