@dialpad/dialtone/dist/vue3/datepicker-DprRX9AH.cjs

Dialpad's Dialtone design system monorepo

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