@dialpad/dialtone-vue 3.150.0 → 3.150.1

package/dist/lib/datepicker.js

@@ -1,854 +1,7 @@
-import { ref, computed, watch, onMounted, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, toDisplayString, nextTick, createElementBlock, Fragment, renderList, normalizeClass, createTextVNode } from "vue";
-import { startOfWeek, addDays, getDay, addMonths, startOfMonth, getDate, endOfMonth, subMonths, getMonth, isEqual, getYear, set, format } from "date-fns";
-import { DtStack } from "./stack.js";
-import { DtTooltip } from "./tooltip.js";
-import { DtButton } from "./button.js";
-import { DtIcon } from "./icon.js";
-import "../chunks/stack_constants-HraCekPm.js";
-import "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
-import "../chunks/popover_constants-WsOUIY-m.js";
-import "tippy.js";
-import "../common/utils.js";
-import "../common/constants.js";
-import "../chunks/link_constants-AfTWrr-n.js";
-import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-H9ahUVCG.js";
-import "@dialpad/dialtone-icons/icons.js";
-const WEEK_START = 0;
-const MONTH_FORMAT = "MMMM";
-const INTL_MONTH_FORMAT = "long";
-const _parsedGetDate = (value) => value ? new Date(value) : /* @__PURE__ */ new Date();
-const getWeekDays = (startDay, month, selectedDay) => {
-  const startDate = _parsedGetDate(JSON.parse(JSON.stringify(startDay)));
-  const dates = [];
-  for (let i = 0; i < 7; i++) {
-    const next = addDays(startDate, i);
-    const isNext = getMonth(next) !== month;
-    dates.push({
-      text: next.getDate(),
-      value: next,
-      currentMonth: !isNext,
-      isFirstDayOfMonth: next.getDate() === 1 && !isNext,
-      // will be selected if the date is the same as the selected day and is from the current month
-      selected: selectedDay ? next.getDate() === selectedDay && !isNext : false
-    });
-  }
-  return dates;
-};
-const isDateEqual = (date, dateToCompare) => {
-  if (!date || !dateToCompare) {
-    return false;
-  }
-  return isEqual(date, dateToCompare);
-};
-const getCalendarDays = (month, year, selectedDay) => {
-  const weeks = [];
-  const firstDate = _parsedGetDate(new Date(year, month));
-  const lastDate = _parsedGetDate(new Date(year, month + 1, 0));
-  const weekStartsOn = WEEK_START;
-  const firstDateInCalendar = startOfWeek(firstDate, { weekStartsOn });
-  const addDaysToWeek = (date) => {
-    const days = getWeekDays(date, month, selectedDay);
-    weeks.push({ days });
-    if (!weeks[weeks.length - 1].days.some(
-      (day) => isDateEqual(day.value, lastDate)
-    )) {
-      const nextDate = addDays(date, 7);
-      addDaysToWeek(nextDate);
-    }
-  };
-  addDaysToWeek(firstDateInCalendar);
-  return weeks;
-};
-const getWeekDayNames = (locale, weekStart) => {
-  const days = [1, 2, 3, 4, 5, 6, 7].map((day) => {
-    return new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`2017-01-0${day}T00:00:00+00:00`)).slice(0, 2);
-  });
-  const beforeWeekStart = days.slice(0, weekStart);
-  const afterWeekStart = days.slice(weekStart + 1, days.length);
-  return [days[weekStart]].concat(...afterWeekStart).concat(...beforeWeekStart);
-};
-const formatMonth = (month, monthFormat, locale) => {
-  return new Intl.DateTimeFormat(locale, { month: monthFormat }).format(new Date(2e3, month, 1));
-};
-const calculateNextFocusDate = (currentDate) => {
-  const date = new Date(currentDate);
-  const currentWeekday = getDay(date);
-  const nextMonthDate = addMonths(date, 1);
-  const nextMonthStart = startOfMonth(nextMonthDate);
-  const nextMonthStartWeekday = getDay(nextMonthStart);
-  const dayDifference = (currentWeekday - nextMonthStartWeekday + 7) % 7;
-  const focusDate = addDays(nextMonthStart, dayDifference);
-  return getDate(focusDate);
-};
-const calculatePrevFocusDate = (currentDate) => {
-  const date = new Date(currentDate);
-  const currentWeekday = getDay(date);
-  const lastDayOfPrevMonth = endOfMonth(subMonths(date, 1));
-  let focusDate = lastDayOfPrevMonth;
-  while (getDay(focusDate) !== currentWeekday) {
-    focusDate = addDays(focusDate, -1);
-  }
-  return getDate(focusDate);
-};
-function useMonthYearPicker(props, emits) {
-  const selectMonth = ref(getMonth(props.selectedDate));
-  const selectYear = ref(getYear(props.selectedDate));
-  const highlightedDay = ref(null);
-  const focusPicker = ref(0);
-  const focusRefs = ref([]);
-  const calendarDays = computed(() => {
-    return getCalendarDays(selectMonth.value, selectYear.value, highlightedDay.value);
-  });
-  const formattedMonth = computed(() => {
-    return (month, format2, locale) => formatMonth(month, format2, locale);
-  });
-  watch(selectMonth, () => {
-    highlightDay();
-    emits("calendar-days", calendarDays.value);
-  }, { immediate: true });
-  watch(selectYear, () => {
-    highlightDay();
-    emits("calendar-days", calendarDays.value);
-  }, { immediate: true });
-  function setDayRef(el) {
-    if (!focusRefs.value.includes(el)) {
-      focusRefs.value.push(el);
-    }
-  }
-  function focusMonthYearPicker() {
-    focusRefs.value[0].$el.focus();
-  }
-  function handleKeyDown(event) {
-    switch (event.key) {
-      case "ArrowLeft":
-        event.preventDefault();
-        if (focusPicker.value === 0) {
-          focusPicker.value = 3;
-          focusRefs.value[focusPicker.value].$el.focus();
-        } else {
-          focusPicker.value--;
-          focusRefs.value[focusPicker.value].$el.focus();
-        }
-        break;
-      case "ArrowRight":
-        event.preventDefault();
-        if (focusPicker.value === 3) {
-          focusPicker.value = 0;
-          focusRefs.value[focusPicker.value].$el.focus();
-        } else {
-          focusPicker.value++;
-          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 = getYear(props.selectedDate);
-    const month = getMonth(props.selectedDate);
-    if (year !== selectYear.value || month !== selectMonth.value) {
-      highlightedDay.value = null;
-    } else {
-      highlightedDay.value = getDate(props.selectedDate);
-    }
-  }
-  function changeMonth(value) {
-    if (selectMonth.value === 0 && value === -1 || selectMonth.value === 11 && value === 1) {
-      selectYear.value += value;
-    }
-    const initialDate = set(props.selectedDate, { month: selectMonth.value, year: selectYear.value });
-    const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);
-    selectMonth.value = 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
-  };
-}
-const _hoisted_1$2 = {
-  id: "calendar-heading",
-  class: "d-datepicker__month-year-title"
-};
-const _sfc_main$2 = {
-  __name: "month-year-picker",
-  props: {
-    locale: {
-      type: String,
-      required: true
-    },
-    prevMonthLabel: {
-      type: String,
-      required: true
-    },
-    nextMonthLabel: {
-      type: String,
-      required: true
-    },
-    prevYearLabel: {
-      type: String,
-      required: true
-    },
-    nextYearLabel: {
-      type: String,
-      required: true
-    },
-    changeToLabel: {
-      type: String,
-      required: true
-    },
-    selectedDate: {
-      type: Date,
-      required: true
-    }
-  },
-  emits: [
-    /**
-       * Will retrieve the calendar days of the given date
-       *
-       * @event calendar-days
-       * @type {Array}
-       */
-    "calendar-days",
-    /**
-       * Will focus first day in calendar
-       *
-       * @event focus-first-day
-       */
-    "focus-first-day",
-    /**
-       * Will focus last day in calendar
-       *
-       * @event focus-last-day
-       */
-    "focus-last-day",
-    /**
-       * Will close the datepicker
-       *
-       * @event close-datepicker
-       */
-    "close-datepicker"
-  ],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const {
-      selectMonth,
-      selectYear,
-      formattedMonth,
-      setDayRef,
-      focusMonthYearPicker,
-      handleKeyDown,
-      changeMonth,
-      changeYear,
-      goToNextMonth,
-      goToPrevMonth
-    } = useMonthYearPicker(props, emits);
-    onMounted(() => {
-      focusMonthYearPicker();
-    });
-    __expose({
-      focusMonthYearPicker,
-      goToNextMonth,
-      goToPrevMonth
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(DtStack), {
-        direction: "row",
-        class: "d-datepicker__month-year",
-        gap: "300"
-      }, {
-        default: withCtx(() => [
-          createVNode(unref(DtStack), {
-            as: "nav",
-            direction: "row",
-            gap: "200",
-            class: "d-datepicker__nav"
-          }, {
-            default: withCtx(() => [
-              createVNode(unref(DtTooltip), {
-                message: __props.prevYearLabel,
-                placement: "top",
-                "fallback-placements": ["top-start", "auto"]
-              }, {
-                anchor: withCtx(() => [
-                  createVNode(unref(DtButton), {
-                    id: "prevYearButton",
-                    ref: (el) => {
-                      if (el)
-                        unref(setDayRef)(el);
-                    },
-                    size: "xs",
-                    importance: "clear",
-                    kind: "muted",
-                    circle: true,
-                    class: "d-datepicker__nav-btn",
-                    type: "button",
-                    "aria-label": `${__props.changeToLabel} ${__props.prevYearLabel} ${unref(selectYear) - 1}`,
-                    onClick: _cache[0] || (_cache[0] = ($event) => unref(changeYear)(-1)),
-                    onKeydown: _cache[1] || (_cache[1] = ($event) => unref(handleKeyDown)($event))
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(unref(DtIcon), {
-                        name: "chevrons-left",
-                        size: "200"
-                      })
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label"])
-                ]),
-                _: 1
-              }, 8, ["message"]),
-              createVNode(unref(DtTooltip), {
-                message: __props.prevMonthLabel,
-                placement: "top",
-                "fallback-placements": ["top-end", "auto"]
-              }, {
-                anchor: withCtx(() => [
-                  createVNode(unref(DtButton), {
-                    id: "prevMonthButton",
-                    ref: (el) => {
-                      if (el)
-                        unref(setDayRef)(el);
-                    },
-                    size: "xs",
-                    importance: "clear",
-                    kind: "muted",
-                    circle: true,
-                    class: "d-datepicker__nav-btn",
-                    type: "button",
-                    "aria-label": `${__props.changeToLabel} ${__props.prevMonthLabel} ${unref(formattedMonth)(unref(selectMonth) - 1, unref(INTL_MONTH_FORMAT), __props.locale)}`,
-                    onClick: _cache[2] || (_cache[2] = ($event) => unref(changeMonth)(-1)),
-                    onKeydown: _cache[3] || (_cache[3] = ($event) => unref(handleKeyDown)($event))
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(unref(DtIcon), {
-                        name: "chevron-left",
-                        size: "200"
-                      })
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label"])
-                ]),
-                _: 1
-              }, 8, ["message"])
-            ]),
-            _: 1
-          }),
-          createElementVNode("div", _hoisted_1$2, toDisplayString(unref(formattedMonth)(unref(selectMonth), unref(INTL_MONTH_FORMAT), __props.locale)) + " " + toDisplayString(unref(selectYear)), 1),
-          createVNode(unref(DtStack), {
-            as: "nav",
-            direction: "row",
-            gap: "200",
-            class: "d-datepicker__nav"
-          }, {
-            default: withCtx(() => [
-              createVNode(unref(DtTooltip), {
-                message: __props.nextMonthLabel,
-                placement: "top",
-                "fallback-placements": ["top-start", "auto"]
-              }, {
-                anchor: withCtx(() => [
-                  createVNode(unref(DtButton), {
-                    id: "nextMonthButton",
-                    ref: (el) => {
-                      if (el)
-                        unref(setDayRef)(el);
-                    },
-                    size: "xs",
-                    importance: "clear",
-                    kind: "muted",
-                    circle: true,
-                    class: "d-datepicker__nav-btn",
-                    type: "button",
-                    "aria-label": `${__props.changeToLabel} ${__props.nextMonthLabel} ${unref(formattedMonth)(unref(selectMonth) + 1, unref(INTL_MONTH_FORMAT), __props.locale)}`,
-                    onClick: _cache[4] || (_cache[4] = ($event) => unref(changeMonth)(1)),
-                    onKeydown: _cache[5] || (_cache[5] = ($event) => unref(handleKeyDown)($event))
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(unref(DtIcon), {
-                        name: "chevron-right",
-                        size: "200"
-                      })
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label"])
-                ]),
-                _: 1
-              }, 8, ["message"]),
-              createVNode(unref(DtTooltip), {
-                message: __props.nextYearLabel,
-                placement: "top",
-                "fallback-placements": ["top-end", "auto"]
-              }, {
-                anchor: withCtx(() => [
-                  createVNode(unref(DtButton), {
-                    id: "nextYearButton",
-                    ref: (el) => {
-                      if (el)
-                        unref(setDayRef)(el);
-                    },
-                    size: "xs",
-                    importance: "clear",
-                    kind: "muted",
-                    circle: true,
-                    class: "d-datepicker__nav-btn",
-                    type: "button",
-                    "aria-label": `${__props.changeToLabel} ${__props.nextYearLabel} ${unref(selectYear) + 1}`,
-                    onClick: _cache[6] || (_cache[6] = ($event) => unref(changeYear)(1)),
-                    onKeydown: _cache[7] || (_cache[7] = ($event) => unref(handleKeyDown)($event))
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(unref(DtIcon), {
-                        name: "chevrons-right",
-                        size: "200"
-                      })
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label"])
-                ]),
-                _: 1
-              }, 8, ["message"])
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      });
-    };
-  }
-};
-function useCalendar(props, emits) {
-  const selectedDay = ref(null);
-  const focusDay = ref(0);
-  const daysRef = ref([]);
-  const weekDays = computed(() => {
-    return getWeekDayNames(props.locale, WEEK_START);
-  });
-  watch(() => props.calendarDays, () => {
-    focusDay.value = 0;
-    daysRef.value = [];
-    selectedDay.value = null;
-  });
-  function dayAriaLabel(day) {
-    return `${props.selectDayLabel} ${day.text} ${format(day.value, MONTH_FORMAT)} ${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 {
-          daysRef.value[focusDay.value].el.$el.focus();
-        } catch (error) {
-          const prevFocusDate = calculatePrevFocusDate(daysRef.value[focusDay.value + 7].day.value);
-          emits("go-to-prev-month");
-          nextTick(() => {
-            daysRef.value[prevFocusDate - 1].el.$el.focus();
-            focusDay.value += prevFocusDate - 1;
-          });
-        }
-        break;
-      case "ArrowDown":
-        event.preventDefault();
-        focusDay.value += 7;
-        try {
-          daysRef.value[focusDay.value].el.$el.focus();
-        } catch (error) {
-          const nextFocusDate = calculateNextFocusDate(daysRef.value[focusDay.value - 7].day.value);
-          emits("go-to-next-month");
-          nextTick(() => {
-            daysRef.value[nextFocusDate - 1].el.$el.focus();
-            focusDay.value += nextFocusDate - 1;
-          });
-        }
-        break;
-      case "ArrowLeft":
-        event.preventDefault();
-        if (focusDay.value > 0) {
-          focusDay.value -= 1;
-          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;
-          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;
-    nextTick(() => {
-      daysRef.value[focusDay.value].el.$el.focus();
-    });
-  }
-  function focusLastDay() {
-    nextTick(() => {
-      focusDay.value = daysRef.value.length - 1;
-      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
-  };
-}
-const _hoisted_1$1 = {
-  class: "d-datepicker__calendar",
-  "aria-labelledby": "calendar-heading"
-};
-const _hoisted_2$1 = ["title", "aria-label"];
-const _sfc_main$1 = {
-  __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$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$1)
-              ]);
-            }), 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))
-        ])
-      ]);
-    };
-  }
-};
-const _hoisted_1 = { class: "d-datepicker__hd" };
-const _hoisted_2 = { class: "d-datepicker__bd" };
-const _sfc_main = {
-  __name: "datepicker",
-  props: {
-    /**
-       * Label for the previous month button
-       *
-       * @type {String}
-       * @example 'Previous month'
-       */
-    prevMonthLabel: {
-      type: String,
-      required: true
-    },
-    /**
-       * Label for the next month button
-       *
-       * @type {String}
-       * @example 'Next month'
-       */
-    nextMonthLabel: {
-      type: String,
-      required: true
-    },
-    /**
-       * Label for the previous year button
-       *
-       * @type {String}
-       * @example 'Previous year'
-       */
-    prevYearLabel: {
-      type: String,
-      required: true
-    },
-    /**
-       * Label for the next year button
-       *
-       * @type {String}
-       * @example 'Next year'
-       */
-    nextYearLabel: {
-      type: String,
-      required: true
-    },
-    /**
-       * Label for the select day button
-       *
-       * @type {String}
-       * @example 'Select day'
-       */
-    selectDayLabel: {
-      type: String,
-      required: true
-    },
-    /**
-       * Label for the change to button
-       *
-       * @type {String}
-       * @example 'Change to'
-       */
-    changeToLabel: {
-      type: String,
-      required: true
-    },
-    /**
-       * Locale for the calendar
-       *
-       * @type {String}
-       */
-    locale: {
-      type: String,
-      default: "en-US"
-    },
-    /**
-       * Selected date
-       *
-       * @type {Date}
-       */
-    selectedDate: {
-      type: Date,
-      default: () => /* @__PURE__ */ new Date()
-    }
-  },
-  emits: [
-    /**
-       * Event fired when a date is selected
-       *
-       * @event selected-date
-       * @type {Date}
-       */
-    "selected-date",
-    /**
-       * Event fired when user presses the esc key
-       *
-       * @event close-datepicker
-       */
-    "close-datepicker"
-  ],
-  setup(__props) {
-    const calendarDays = ref([]);
-    function updateCalendarDays(days) {
-      calendarDays.value = days;
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(DtStack), {
-        class: "d-datepicker",
-        gap: "400"
-      }, {
-        default: withCtx(() => [
-          createElementVNode("div", _hoisted_1, [
-            createVNode(_sfc_main$2, {
-              ref: "monthYearPicker",
-              locale: __props.locale,
-              "prev-month-label": __props.prevMonthLabel,
-              "next-month-label": __props.nextMonthLabel,
-              "prev-year-label": __props.prevYearLabel,
-              "next-year-label": __props.nextYearLabel,
-              "change-to-label": __props.changeToLabel,
-              "selected-date": __props.selectedDate,
-              onCalendarDays: updateCalendarDays,
-              onFocusFirstDay: _cache[0] || (_cache[0] = ($event) => _ctx.$refs.calendar.focusFirstDay()),
-              onFocusLastDay: _cache[1] || (_cache[1] = ($event) => _ctx.$refs.calendar.focusLastDay()),
-              onCloseDatepicker: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("close-datepicker"))
-            }, null, 8, ["locale", "prev-month-label", "next-month-label", "prev-year-label", "next-year-label", "change-to-label", "selected-date"])
-          ]),
-          createElementVNode("div", _hoisted_2, [
-            createVNode(_sfc_main$1, {
-              ref: "calendar",
-              locale: __props.locale,
-              "calendar-days": calendarDays.value,
-              "select-day-label": __props.selectDayLabel,
-              onSelectDate: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("selected-date", $event)),
-              onFocusMonthYearPicker: _cache[4] || (_cache[4] = ($event) => _ctx.$refs.monthYearPicker.focusMonthYearPicker()),
-              onCloseDatepicker: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("close-datepicker")),
-              onGoToNextMonth: _cache[6] || (_cache[6] = ($event) => _ctx.$refs.monthYearPicker.goToNextMonth()),
-              onGoToPrevMonth: _cache[7] || (_cache[7] = ($event) => _ctx.$refs.monthYearPicker.goToPrevMonth())
-            }, null, 8, ["locale", "calendar-days", "select-day-label"])
-          ])
-        ]),
-        _: 1
-      });
-    };
-  }
-};
-function formatLong(date, locale = "default") {
-  return new Intl.DateTimeFormat(locale, { weekday: "long", year: "numeric", month: "long", day: "numeric" }).format(date);
-}
-function formatMedium(date, locale = "default") {
-  return new Intl.DateTimeFormat(locale, { year: "numeric", month: "long", day: "numeric" }).format(date);
-}
-function formatShort(date, locale = "default", showWeekday = true) {
-  const options = showWeekday ? { weekday: "short", year: "numeric", month: "short", day: "numeric" } : { year: "numeric", month: "short", day: "numeric" };
-  return new Intl.DateTimeFormat(locale, options).format(date);
-}
-function formatNoYear(date, locale = "default", abbreviated = false) {
-  const monthFormat = abbreviated ? "short" : "long";
-  return new Intl.DateTimeFormat(locale, { month: monthFormat, day: "numeric" }).format(date);
-}
-function formatNumerical(date, locale = "default") {
-  return new Intl.DateTimeFormat(locale, { year: "2-digit", month: "2-digit", day: "2-digit" }).format(date);
-}
+import { default as default2 } from "../components/datepicker/datepicker.vue.js";
+import { formatLong, formatMedium, formatNoYear, formatNumerical, formatShort } from "../components/datepicker/formatUtils.js";
 export {
-  _sfc_main as DtDatepicker,
+  default2 as DtDatepicker,
   formatLong,
   formatMedium,
   formatNoYear,