@dialpad/dialtone/dist/vue3/components/datepicker/modules/calendar.vue.js

Dialpad's Dialtone design system monorepo

import { openBlock, createElementBlock, createElementVNode, Fragment, renderList, unref, toDisplayString, createVNode, normalizeClass, withCtx, createTextVNode } from "vue";
import { useCalendar } from "../composables/useCalendar.js";
import DtButton from "../../button/button.vue.js";
const _hoisted_1 = {
  class: "d-datepicker__calendar",
  "aria-labelledby": "calendar-heading"
};
const _hoisted_2 = ["title", "aria-label"];
const _sfc_main = {
  __name: "calendar",
  props: {
    calendarDays: {
      type: Array,
      required: true
    },
    locale: {
      type: String,
      required: true
    },
    selectDayLabel: {
      type: String,
      required: true
    }
  },
  emits: [
    /**
       * Event fired when a date is selected
       *
       * @event select-date
       * @type {Date}
       */
    "select-date",
    /**
       * Will focus the month and year picker
       *
       * @event focus-month-year-picker
       */
    "focus-month-year-picker",
    /**
       * Will close the datepicker
       *
       * @event close-datepicker
       */
    "close-datepicker",
    /**
       * Will go to the next month
       *
       * @event go-to-next-month
       */
    "go-to-next-month",
    /**
       * Will go to the previous month
       *
       * @event go-to-prev-month
       */
    "go-to-prev-month"
  ],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const {
      selectedDay,
      weekDays,
      dayAriaLabel,
      setDayRef,
      handleKeyDown,
      focusFirstDay,
      selectDay
    } = useCalendar(props, emits);
    __expose({
      focusFirstDay
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("table", _hoisted_1, [
        createElementVNode("thead", null, [
          createElementVNode("tr", null, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(weekDays), (day) => {
              return openBlock(), createElementBlock("th", {
                key: day,
                scope: "col",
                class: "d-datepicker__cell d-datepicker__cell--header"
              }, [
                createElementVNode("span", {
                  class: "d-datepicker__weekday",
                  title: day,
                  "aria-label": day
                }, toDisplayString(day), 9, _hoisted_2)
              ]);
            }), 128))
          ])
        ]),
        createElementVNode("tbody", null, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.calendarDays, (week, indexWeek) => {
            return openBlock(), createElementBlock("tr", { key: indexWeek }, [
              (openBlock(true), createElementBlock(Fragment, null, renderList(week.days, (day, indexDays) => {
                return openBlock(), createElementBlock("td", {
                  key: indexWeek + indexDays,
                  class: "d-datepicker__cell",
                  role: "listbox"
                }, [
                  createVNode(unref(DtButton), {
                    ref_for: true,
                    ref: (el) => {
                      if (el) unref(setDayRef)(el, day);
                    },
                    class: normalizeClass(["d-datepicker__day", {
                      "d-datepicker__day--disabled": !day.currentMonth,
                      "d-datepicker__day--selected": unref(selectedDay) ? day.text === unref(selectedDay) && day.currentMonth : day.selected
                    }]),
                    circle: true,
                    size: "sm",
                    importance: "clear",
                    disabled: !day.currentMonth,
                    type: "button",
                    "aria-selected": !!unref(selectedDay) ? day.text === unref(selectedDay) && day.currentMonth : day.selected,
                    "aria-label": unref(dayAriaLabel)(day),
                    role: "option",
                    onClick: ($event) => unref(selectDay)(day),
                    onKeydown: _cache[0] || (_cache[0] = ($event) => unref(handleKeyDown)($event))
                  }, {
                    default: withCtx(() => [
                      createTextVNode(toDisplayString(day.text), 1)
                    ]),
                    _: 2
                  }, 1032, ["disabled", "class", "aria-selected", "aria-label", "onClick"])
                ]);
              }), 128))
            ]);
          }), 128))
        ])
      ]);
    };
  }
};
export {
  _sfc_main as default
};
//# sourceMappingURL=calendar.vue.js.map