@dialpad/dialtone/dist/vue3/components/datepicker/composables/useCalendar.cjs

Dialpad's Dialtone design system monorepo

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
const utils = require("../utils.cjs");
const datepicker_constants = require("../datepicker_constants.cjs");
const dateFns = require("date-fns");
const common_utils = require("../../../common/utils.cjs");
function useCalendar(props, emits) {
  const selectedDay = vue.ref(null);
  const focusDay = vue.ref(0);
  const daysRef = vue.ref([]);
  const weekDays = vue.computed(() => {
    return utils.getWeekDayNames(props.locale, datepicker_constants.WEEK_START);
  });
  vue.watch(() => props.calendarDays, () => {
    focusDay.value = 0;
    daysRef.value = [];
    selectedDay.value = null;
  });
  function dayAriaLabel(day) {
    return `${props.selectDayLabel} ${day.text} ${dateFns.format(day.value, datepicker_constants.MONTH_FORMAT)} ${dateFns.getYear(day.value)}`;
  }
  function setDayRef(el, day) {
    if (!daysRef.value.some((day2) => day2.el === el) && day.currentMonth) {
      daysRef.value.push({ el, day });
    }
  }
  function handleKeyDown(event) {
    switch (event.key) {
      case "ArrowUp":
        event.preventDefault();
        focusDay.value -= 7;
        try {
          common_utils.returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();
        } catch (error) {
          const prevFocusDate = utils.calculatePrevFocusDate(daysRef.value[focusDay.value + 7].day.value);
          emits("go-to-prev-month");
          vue.nextTick(() => {
            common_utils.returnFirstEl(daysRef.value[prevFocusDate - 1].el.$el).focus();
            focusDay.value += prevFocusDate - 1;
          });
        }
        break;
      case "ArrowDown":
        event.preventDefault();
        focusDay.value += 7;
        try {
          common_utils.returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();
        } catch (error) {
          const nextFocusDate = utils.calculateNextFocusDate(daysRef.value[focusDay.value - 7].day.value);
          emits("go-to-next-month");
          vue.nextTick(() => {
            common_utils.returnFirstEl(daysRef.value[nextFocusDate - 1].el.$el).focus();
            focusDay.value += nextFocusDate - 1;
          });
        }
        break;
      case "ArrowLeft":
        event.preventDefault();
        if (focusDay.value > 0) {
          focusDay.value -= 1;
          common_utils.returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();
        } else {
          emits("go-to-prev-month");
          focusLastDay();
        }
        break;
      case "ArrowRight":
        event.preventDefault();
        if (focusDay.value < daysRef.value.length - 1) {
          focusDay.value += 1;
          common_utils.returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();
        } else {
          emits("go-to-next-month");
          focusFirstDay();
        }
        break;
      case "Tab":
        event.preventDefault();
        emits("focus-month-year-picker");
        break;
      case "Escape":
        emits("close-datepicker");
        break;
    }
  }
  function focusFirstDay() {
    focusDay.value = 0;
    vue.nextTick(() => {
      common_utils.returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();
    });
  }
  function focusLastDay() {
    vue.nextTick(() => {
      focusDay.value = daysRef.value.length - 1;
      common_utils.returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();
    });
  }
  function selectDay(day) {
    if (!day.currentMonth) {
      return;
    }
    selectedDay.value = day.text;
    emits("select-date", day.value);
  }
  return {
    selectedDay,
    weekDays,
    dayAriaLabel,
    setDayRef,
    handleKeyDown,
    focusFirstDay,
    selectDay
  };
}
exports.useCalendar = useCalendar;
//# sourceMappingURL=useCalendar.cjs.map