@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
111 lines (110 loc) • 3.63 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
const dateFns = require("date-fns");
const utils = require("../utils.cjs");
const common_utils = require("../../../common/utils.cjs");
function useMonthYearPicker(props, emits) {
const selectMonth = vue.ref(dateFns.getMonth(props.selectedDate));
const selectYear = vue.ref(dateFns.getYear(props.selectedDate));
const highlightedDay = vue.ref(null);
const focusPicker = vue.ref(0);
const focusRefs = vue.ref([]);
const calendarDays = vue.computed(() => {
return utils.getCalendarDays(selectMonth.value, selectYear.value, highlightedDay.value);
});
const formattedMonth = vue.computed(() => {
return (month, format, locale) => utils.formatMonth(month, format, locale);
});
vue.watch(selectMonth, () => {
highlightDay();
emits("calendar-days", calendarDays.value);
}, { immediate: true });
vue.watch(selectYear, () => {
highlightDay();
emits("calendar-days", calendarDays.value);
}, { immediate: true });
function setDayRef(el) {
if (!focusRefs.value.includes(el)) {
focusRefs.value.push(el);
}
}
function focusMonthYearPicker() {
common_utils.returnFirstEl(focusRefs.value[0].$el).focus();
}
function handleKeyDown(event) {
switch (event.key) {
case "ArrowLeft":
event.preventDefault();
if (focusPicker.value === 0) {
focusPicker.value = 3;
common_utils.returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();
} else {
focusPicker.value--;
common_utils.returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();
}
break;
case "ArrowRight":
event.preventDefault();
if (focusPicker.value === 3) {
focusPicker.value = 0;
common_utils.returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();
} else {
focusPicker.value++;
common_utils.returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();
}
break;
case "ArrowDown":
event.preventDefault();
emits("focus-first-day");
break;
case "Tab":
event.preventDefault();
emits("focus-first-day");
break;
case "Escape":
emits("close-datepicker");
break;
}
}
function highlightDay() {
const year = dateFns.getYear(props.selectedDate);
const month = dateFns.getMonth(props.selectedDate);
if (year !== selectYear.value || month !== selectMonth.value) {
highlightedDay.value = null;
} else {
highlightedDay.value = dateFns.getDate(props.selectedDate);
}
}
function changeMonth(value) {
if (selectMonth.value === 0 && value === -1 || selectMonth.value === 11 && value === 1) {
selectYear.value += value;
}
const initialDate = dateFns.set(props.selectedDate, { month: selectMonth.value, year: selectYear.value });
const newDate = value === 1 ? dateFns.addMonths(initialDate, 1) : dateFns.subMonths(initialDate, 1);
selectMonth.value = dateFns.getMonth(newDate);
}
function changeYear(value) {
selectYear.value = selectYear.value + value;
}
function goToNextMonth() {
changeMonth(1);
}
function goToPrevMonth() {
changeMonth(-1);
}
return {
selectMonth,
selectYear,
formattedMonth,
setDayRef,
focusMonthYearPicker,
handleKeyDown,
changeMonth,
changeYear,
goToNextMonth,
goToPrevMonth
};
}
exports.useMonthYearPicker = useMonthYearPicker;
//# sourceMappingURL=useMonthYearPicker.cjs.map