@dialpad/dialtone-vue 2.157.1-beta.1 → 2.157.1

package/dist/lib/datepicker.js

@@ -1,658 +1,7 @@
-import { startOfWeek, getDay, addMonths, startOfMonth, addDays, 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 { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
-import { DtIcon } from "./icon.js";
-import "../chunks/stack_constants-HraCekPm.js";
-import "../chunks/popover_constants-WsOUIY-m.js";
-import "tippy.js";
-import "../common/utils.js";
-import "../common/constants.js";
-import "vue";
-import "../chunks/link_constants-AfTWrr-n.js";
-import "@dialpad/dialtone-icons/vue2";
-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);
-};
-const _sfc_main$2 = {
-  name: "DtDatepickerMonthYearPicker",
-  components: { DtButton, DtTooltip, DtStack, DtIcon },
-  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"
-  ],
-  data() {
-    return {
-      selectMonth: getMonth(this.selectedDate),
-      selectYear: getYear(this.selectedDate),
-      highlightedDay: null,
-      focusPicker: 0,
-      focusRefs: [],
-      refNames: ["prevYearButtonRef", "prevMonthButtonRef", "nextMonthButtonRef", "nextYearButtonRef"]
-    };
-  },
-  computed: {
-    // Get days for the currently selected month and year and highlight the selected day
-    calendarDays() {
-      return getCalendarDays(this.selectMonth, this.selectYear, this.highlightedDay);
-    },
-    formattedMonth() {
-      return (month) => formatMonth(month, INTL_MONTH_FORMAT, this.locale);
-    }
-  },
-  watch: {
-    selectMonth: {
-      handler() {
-        this.highlightDay();
-        this.$emit("calendar-days", this.calendarDays);
-      },
-      immediate: true
-    },
-    selectYear: {
-      handler() {
-        this.highlightDay();
-        this.$emit("calendar-days", this.calendarDays);
-      },
-      immediate: true
-    }
-  },
-  mounted() {
-    this.setButtonsRef();
-    this.focusMonthYearPicker();
-  },
-  methods: {
-    setButtonsRef() {
-      this.focusRefs = this.refNames.map((refName) => this.$refs[refName]);
-    },
-    focusMonthYearPicker() {
-      this.focusPicker = 0;
-      this.focusRefs[0].$el.focus();
-    },
-    handleKeyDown(event) {
-      switch (event.key) {
-        case "ArrowLeft":
-          event.preventDefault();
-          if (this.focusPicker === 0) {
-            this.focusPicker = 3;
-            this.focusRefs[this.focusPicker].$el.focus();
-          } else {
-            this.focusPicker--;
-            this.focusRefs[this.focusPicker].$el.focus();
-          }
-          break;
-        case "ArrowRight":
-          event.preventDefault();
-          if (this.focusPicker === 3) {
-            this.focusPicker = 0;
-            this.focusRefs[this.focusPicker].$el.focus();
-          } else {
-            this.focusPicker++;
-            this.focusRefs[this.focusPicker].$el.focus();
-          }
-          break;
-        case "ArrowDown":
-          event.preventDefault();
-          this.$emit("focus-first-day");
-          break;
-        case "Tab":
-          event.preventDefault();
-          this.$emit("focus-first-day");
-          break;
-        case "Escape":
-          this.$emit("close-datepicker");
-          break;
-      }
-    },
-    highlightDay() {
-      const year = getYear(this.selectedDate);
-      const month = getMonth(this.selectedDate);
-      if (year !== this.selectYear || month !== this.selectMonth) {
-        this.highlightedDay = null;
-      } else {
-        this.highlightedDay = getDate(this.selectedDate);
-      }
-    },
-    changeMonth(value) {
-      if (this.selectMonth === 0 && value === -1 || this.selectMonth === 11 && value === 1) {
-        this.selectYear += value;
-      }
-      const initialDate = set(this.selectedDate, { month: this.selectMonth, year: this.selectYear });
-      const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);
-      this.selectMonth = getMonth(newDate);
-    },
-    changeYear(value) {
-      this.selectYear = this.selectYear + value;
-    },
-    goToNextMonth() {
-      this.changeMonth(1);
-    },
-    goToPrevMonth() {
-      this.changeMonth(-1);
-    }
-  }
-};
-var _sfc_render$2 = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("dt-stack", { staticClass: "d-datepicker__month-year", attrs: { "direction": "row", "gap": "300" } }, [_c("dt-stack", { staticClass: "d-datepicker__nav", attrs: { "as": "nav", "direction": "row", "gap": "200" } }, [_c("dt-tooltip", { attrs: { "message": _vm.prevYearLabel, "placement": "top", "fallback-placements": ["top-start", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
-    return [_c("dt-button", { ref: _vm.refNames[0], staticClass: "d-datepicker__nav-btn", attrs: { "id": "prevYearButton", "size": "xs", "importance": "clear", "kind": "muted", "circle": true, "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.prevYearLabel} ${_vm.selectYear - 1}` }, on: { "click": function($event) {
-      return _vm.changeYear(-1);
-    }, "keydown": function($event) {
-      return _vm.handleKeyDown($event);
-    } } }, [_c("dt-icon", { attrs: { "name": "chevrons-left", "size": "200" } })], 1)];
-  }, proxy: true }]) }), _c("dt-tooltip", { attrs: { "message": _vm.prevMonthLabel, "placement": "top", "fallback-placements": ["top-end", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
-    return [_c("dt-button", { ref: _vm.refNames[1], staticClass: "d-datepicker__nav-btn", attrs: { "id": "prevMonthButton", "size": "xs", "importance": "clear", "kind": "muted", "circle": true, "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.prevMonthLabel} ${_vm.formattedMonth(_vm.selectMonth - 1)}` }, on: { "click": function($event) {
-      return _vm.changeMonth(-1);
-    }, "keydown": function($event) {
-      return _vm.handleKeyDown($event);
-    } } }, [_c("dt-icon", { attrs: { "name": "chevron-left", "size": "200" } })], 1)];
-  }, proxy: true }]) })], 1), _c("div", { staticClass: "d-datepicker__month-year-title", attrs: { "id": "calendar-heading" } }, [_vm._v(" " + _vm._s(_vm.formattedMonth(_vm.selectMonth)) + " " + _vm._s(_vm.selectYear) + " ")]), _c("dt-stack", { staticClass: "d-datepicker__nav", attrs: { "as": "nav", "direction": "row", "gap": "200" } }, [_c("dt-tooltip", { attrs: { "message": _vm.nextMonthLabel, "placement": "top", "fallback-placements": ["top-start", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
-    return [_c("dt-button", { ref: _vm.refNames[2], staticClass: "d-datepicker__nav-btn", attrs: { "id": "nextMonthButton", "size": "xs", "importance": "clear", "circle": true, "kind": "muted", "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.nextMonthLabel} ${_vm.formattedMonth(_vm.selectMonth + 1)}` }, on: { "click": function($event) {
-      return _vm.changeMonth(1);
-    }, "keydown": function($event) {
-      return _vm.handleKeyDown($event);
-    } } }, [_c("dt-icon", { attrs: { "name": "chevron-right", "size": "200" } })], 1)];
-  }, proxy: true }]) }), _c("dt-tooltip", { attrs: { "message": _vm.nextYearLabel, "placement": "top", "fallback-placements": ["top-end", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
-    return [_c("dt-button", { ref: _vm.refNames[3], staticClass: "d-datepicker__nav-btn", attrs: { "id": "nextYearButton", "size": "xs", "kind": "muted", "circle": true, "importance": "clear", "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.nextYearLabel} ${_vm.selectYear + 1}` }, on: { "click": function($event) {
-      return _vm.changeYear(1);
-    }, "keydown": function($event) {
-      return _vm.handleKeyDown($event);
-    } } }, [_c("dt-icon", { attrs: { "name": "chevrons-right", "size": "200" } })], 1)];
-  }, proxy: true }]) })], 1)], 1);
-};
-var _sfc_staticRenderFns$2 = [];
-var __component__$2 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$2,
-  _sfc_render$2,
-  _sfc_staticRenderFns$2,
-  false,
-  null,
-  null,
-  null,
-  null
-);
-const MonthYearPicker = __component__$2.exports;
-const _sfc_main$1 = {
-  name: "DtDatepickerCalendar",
-  components: { DtButton },
-  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"
-  ],
-  data() {
-    return {
-      // local selectedDay to override the received by props calendarDays
-      selectedDay: null,
-      focusDay: 0,
-      daysRef: []
-    };
-  },
-  computed: {
-    weekDays() {
-      return getWeekDayNames(this.locale, WEEK_START);
-    }
-  },
-  watch: {
-    calendarDays() {
-      this.focusDay = 0;
-      this.selectedDay = null;
-      this.daysRef = [];
-      this.$nextTick(() => {
-        this.daysRef = [];
-        this.setDayRef();
-      });
-    }
-  },
-  methods: {
-    dayAriaLabel(day) {
-      return `${this.selectDayLabel} ${day.text} ${format(day.value, MONTH_FORMAT)} ${getYear(day.value)}`;
-    },
-    setDayRef(el, day) {
-      this.calendarDays.forEach((week, weekIndex) => {
-        week.days.forEach((day2, dayIndex) => {
-          const refKey = `buttonRef_${weekIndex}_${dayIndex}`;
-          const dayButton = this.$refs[refKey];
-          if (dayButton && day2.currentMonth) {
-            this.daysRef.push({ el: dayButton[0], day: day2 });
-          }
-        });
-      });
-    },
-    handleKeyDown(event) {
-      switch (event.key) {
-        case "ArrowUp":
-          event.preventDefault();
-          this.focusDay -= 7;
-          try {
-            this.daysRef[this.focusDay].el.$el.focus();
-          } catch (error) {
-            const prevFocusDate = calculatePrevFocusDate(this.daysRef[this.focusDay + 7].day.value);
-            this.$emit("go-to-prev-month");
-            this.$nextTick(() => {
-              this.setDayRef();
-              this.daysRef[prevFocusDate - 1].el.$el.focus();
-              this.focusDay += prevFocusDate - 1;
-            });
-          }
-          break;
-        case "ArrowDown":
-          event.preventDefault();
-          this.focusDay += 7;
-          try {
-            this.daysRef[this.focusDay].el.$el.focus();
-          } catch (error) {
-            const nextFocusDate = calculateNextFocusDate(this.daysRef[this.focusDay - 7].day.value);
-            this.$emit("go-to-next-month");
-            this.$nextTick(() => {
-              this.setDayRef();
-              this.daysRef[nextFocusDate - 1].el.$el.focus();
-              this.focusDay += nextFocusDate - 1;
-            });
-          }
-          break;
-        case "ArrowLeft":
-          event.preventDefault();
-          if (this.focusDay > 0) {
-            this.focusDay -= 1;
-            this.daysRef[this.focusDay].el.$el.focus();
-          } else {
-            this.$emit("go-to-prev-month");
-            this.$nextTick(() => {
-              this.focusLastDay();
-            });
-          }
-          break;
-        case "ArrowRight":
-          event.preventDefault();
-          if (this.focusDay < this.daysRef.length - 1) {
-            this.focusDay += 1;
-            this.daysRef[this.focusDay].el.$el.focus();
-          } else {
-            this.$emit("go-to-next-month");
-            this.$nextTick(() => {
-              this.focusFirstDay();
-            });
-          }
-          break;
-        case "Tab":
-          event.preventDefault();
-          this.$emit("focus-month-year-picker");
-          break;
-        case "Escape":
-          this.$emit("close-datepicker");
-          break;
-      }
-    },
-    focusFirstDay() {
-      this.focusDay = 0;
-      this.$nextTick(() => {
-        this.daysRef[this.focusDay].el.$el.focus();
-      });
-    },
-    focusLastDay() {
-      this.$nextTick(() => {
-        this.focusDay = this.daysRef.length - 1;
-        this.daysRef[this.focusDay].el.$el.focus();
-      });
-    },
-    selectDay(day) {
-      if (!day.currentMonth) {
-        return;
-      }
-      this.selectedDay = day.text;
-      this.$emit("select-date", day.value);
-    }
-  }
-};
-var _sfc_render$1 = function render2() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("table", { staticClass: "d-datepicker__calendar", attrs: { "aria-labelledby": "calendar-heading" } }, [_c("thead", [_c("tr", _vm._l(_vm.weekDays, function(day) {
-    return _c("th", { key: day, staticClass: "d-datepicker__cell d-datepicker__cell--header", attrs: { "scope": "col" } }, [_c("span", { staticClass: "d-datepicker__weekday", attrs: { "title": day, "aria-label": day } }, [_vm._v(" " + _vm._s(day))])]);
-  }), 0)]), _c("tbody", _vm._l(_vm.calendarDays, function(week, indexWeek) {
-    return _c("tr", { key: indexWeek }, _vm._l(week.days, function(day, indexDays) {
-      return _c("td", { key: indexWeek + indexDays, staticClass: "d-datepicker__cell", attrs: { "role": "listbox" } }, [_c("dt-button", { ref: `buttonRef_${indexWeek}_${indexDays}`, refInFor: true, staticClass: "d-datepicker__day", class: {
-        "d-datepicker__day--disabled": !day.currentMonth,
-        "d-datepicker__day--selected": _vm.selectedDay ? day.text === _vm.selectedDay && day.currentMonth : day.selected
-      }, attrs: { "circle": true, "size": "sm", "importance": "clear", "disabled": !day.currentMonth, "type": "button", "aria-selected": !!_vm.selectedDay ? day.text === _vm.selectedDay && day.currentMonth : day.selected, "aria-label": _vm.dayAriaLabel(day), "role": "option" }, on: { "click": function($event) {
-        return _vm.selectDay(day);
-      }, "keydown": function($event) {
-        return _vm.handleKeyDown($event);
-      } } }, [_vm._v(" " + _vm._s(day.text) + " ")])], 1);
-    }), 0);
-  }), 0)]);
-};
-var _sfc_staticRenderFns$1 = [];
-var __component__$1 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$1,
-  _sfc_render$1,
-  _sfc_staticRenderFns$1,
-  false,
-  null,
-  null,
-  null,
-  null
-);
-const Calendar = __component__$1.exports;
-const _sfc_main = {
-  name: "DtDatepicker",
-  components: { DtStack, MonthYearPicker, Calendar },
-  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"
-  ],
-  data() {
-    return {
-      calendarDays: []
-    };
-  },
-  methods: {
-    updateCalendarDays(days) {
-      this.calendarDays = days;
-    }
-  }
-};
-var _sfc_render = function render3() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("dt-stack", { staticClass: "d-datepicker", attrs: { "gap": "400" } }, [_c("div", { staticClass: "d-datepicker__hd" }, [_c("month-year-picker", { ref: "monthYearPicker", attrs: { "locale": _vm.locale, "prev-month-label": _vm.prevMonthLabel, "next-month-label": _vm.nextMonthLabel, "prev-year-label": _vm.prevYearLabel, "next-year-label": _vm.nextYearLabel, "change-to-label": _vm.changeToLabel, "selected-date": _vm.selectedDate }, on: { "calendar-days": _vm.updateCalendarDays, "focus-first-day": function($event) {
-    return _vm.$refs.calendar.focusFirstDay();
-  }, "focus-last-day": function($event) {
-    return _vm.$refs.calendar.focusLastDay();
-  }, "close-datepicker": function($event) {
-    return _vm.$emit("close-datepicker");
-  } } })], 1), _c("div", { staticClass: "d-datepicker__bd" }, [_c("calendar", { ref: "calendar", attrs: { "locale": _vm.locale, "calendar-days": _vm.calendarDays, "select-day-label": _vm.selectDayLabel }, on: { "select-date": function($event) {
-    return _vm.$emit("selected-date", $event);
-  }, "focus-month-year-picker": function($event) {
-    return _vm.$refs.monthYearPicker.focusMonthYearPicker();
-  }, "close-datepicker": function($event) {
-    return _vm.$emit("close-datepicker");
-  }, "go-to-next-month": function($event) {
-    return _vm.$refs.monthYearPicker.goToNextMonth();
-  }, "go-to-prev-month": function($event) {
-    return _vm.$refs.monthYearPicker.goToPrevMonth();
-  } } })], 1)]);
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
-const datepicker = __component__.exports;
-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 {
-  datepicker as DtDatepicker,
+  default2 as DtDatepicker,
   formatLong,
   formatMedium,
   formatNoYear,