@dialpad/dialtone-vue 3.145.1 → 3.146.0

package/dist/lib/datepicker.cjs

@@ -8,13 +8,13 @@ const lib_button = require("./button.cjs");
 const lib_icon = require("./icon.cjs");
 require("../chunks/stack_constants-SMzMWnAQ.js");
 require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
-require("../chunks/popover_constants-XnGWXaxX.js");
+require("../chunks/popover_constants-h9MD6WUt.js");
 require("tippy.js");
 require("../common/utils.cjs");
 require("../common/constants.cjs");
 require("../chunks/link_constants-x8NwdqmA.js");
 require("@dialpad/dialtone-icons/vue3");
-require("../chunks/icon_constants-QYpmdE0R.js");
+require("../chunks/icon_constants-bvhFNOPu.js");
 require("@dialpad/dialtone-icons/icons.json");
 const WEEK_START = 0;
 const MONTH_FORMAT = "MMMM";
@@ -48,13 +48,15 @@ const getCalendarDays = (month, year, selectedDay) => {
   const firstDate = _parsedGetDate(new Date(year, month));
   const lastDate = _parsedGetDate(new Date(year, month + 1, 0));
   const weekStartsOn = WEEK_START;
-  const firstDateInCalendar = dateFns.startOfWeek(firstDate, { weekStartsOn });
+  const firstDateInCalendar = dateFns.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)
-    )) {
+    weeks.push({
+      days
+    });
+    if (!weeks[weeks.length - 1].days.some((day) => isDateEqual(day.value, lastDate))) {
       const nextDate = dateFns.addDays(date, 7);
       addDaysToWeek(nextDate);
     }
@@ -64,14 +66,19 @@ const getCalendarDays = (month, year, selectedDay) => {
 };
 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);
+    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));
+  return new Intl.DateTimeFormat(locale, {
+    month: monthFormat
+  }).format(new Date(2e3, month, 1));
 };
 const calculateNextFocusDate = (currentDate) => {
   const date = new Date(currentDate);
@@ -108,11 +115,15 @@ function useMonthYearPicker(props, emits) {
   vue.watch(selectMonth, () => {
     highlightDay();
     emits("calendar-days", calendarDays.value);
-  }, { immediate: true });
+  }, {
+    immediate: true
+  });
   vue.watch(selectYear, () => {
     highlightDay();
     emits("calendar-days", calendarDays.value);
-  }, { immediate: true });
+  }, {
+    immediate: true
+  });
   function setDayRef(el) {
     if (!focusRefs.value.includes(el)) {
       focusRefs.value.push(el);
@@ -169,7 +180,10 @@ function useMonthYearPicker(props, emits) {
     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 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);
   }
@@ -258,7 +272,10 @@ const _sfc_main$2 = {
        */
     "close-datepicker"
   ],
-  setup(__props, { expose: __expose, emit: __emit }) {
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
+  }) {
     const props = __props;
     const emits = __emit;
     const {
@@ -287,161 +304,135 @@ const _sfc_main$2 = {
         class: "d-datepicker__month-year",
         gap: "300"
       }, {
-        default: vue.withCtx(() => [
-          vue.createVNode(vue.unref(lib_stack.DtStack), {
-            as: "nav",
-            direction: "row",
-            gap: "200",
-            class: "d-datepicker__nav"
+        default: vue.withCtx(() => [vue.createVNode(vue.unref(lib_stack.DtStack), {
+          as: "nav",
+          direction: "row",
+          gap: "200",
+          class: "d-datepicker__nav"
+        }, {
+          default: vue.withCtx(() => [vue.createVNode(vue.unref(lib_tooltip.DtTooltip), {
+            message: __props.prevYearLabel,
+            placement: "top",
+            "fallback-placements": ["top-start", "auto"]
+          }, {
+            anchor: vue.withCtx(() => [vue.createVNode(vue.unref(lib_button.DtButton), {
+              id: "prevYearButton",
+              ref: (el) => {
+                if (el)
+                  vue.unref(setDayRef)(el);
+              },
+              size: "xs",
+              importance: "clear",
+              kind: "muted",
+              circle: true,
+              class: "d-datepicker__nav-btn",
+              type: "button",
+              "aria-label": `${__props.changeToLabel} ${__props.prevYearLabel} ${vue.unref(selectYear) - 1}`,
+              onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(changeYear)(-1)),
+              onKeydown: _cache[1] || (_cache[1] = ($event) => vue.unref(handleKeyDown)($event))
+            }, {
+              default: vue.withCtx(() => [vue.createVNode(vue.unref(lib_icon.DtIcon), {
+                name: "chevrons-left",
+                size: "200"
+              })]),
+              _: 1
+            }, 8, ["aria-label"])]),
+            _: 1
+          }, 8, ["message"]), vue.createVNode(vue.unref(lib_tooltip.DtTooltip), {
+            message: __props.prevMonthLabel,
+            placement: "top",
+            "fallback-placements": ["top-end", "auto"]
           }, {
-            default: vue.withCtx(() => [
-              vue.createVNode(vue.unref(lib_tooltip.DtTooltip), {
-                message: __props.prevYearLabel,
-                placement: "top",
-                "fallback-placements": ["top-start", "auto"]
-              }, {
-                anchor: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(lib_button.DtButton), {
-                    id: "prevYearButton",
-                    ref: (el) => {
-                      if (el)
-                        vue.unref(setDayRef)(el);
-                    },
-                    size: "xs",
-                    importance: "clear",
-                    kind: "muted",
-                    circle: true,
-                    class: "d-datepicker__nav-btn",
-                    type: "button",
-                    "aria-label": `${__props.changeToLabel} ${__props.prevYearLabel} ${vue.unref(selectYear) - 1}`,
-                    onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(changeYear)(-1)),
-                    onKeydown: _cache[1] || (_cache[1] = ($event) => vue.unref(handleKeyDown)($event))
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(lib_icon.DtIcon), {
-                        name: "chevrons-left",
-                        size: "200"
-                      })
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label"])
-                ]),
-                _: 1
-              }, 8, ["message"]),
-              vue.createVNode(vue.unref(lib_tooltip.DtTooltip), {
-                message: __props.prevMonthLabel,
-                placement: "top",
-                "fallback-placements": ["top-end", "auto"]
-              }, {
-                anchor: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(lib_button.DtButton), {
-                    id: "prevMonthButton",
-                    ref: (el) => {
-                      if (el)
-                        vue.unref(setDayRef)(el);
-                    },
-                    size: "xs",
-                    importance: "clear",
-                    kind: "muted",
-                    circle: true,
-                    class: "d-datepicker__nav-btn",
-                    type: "button",
-                    "aria-label": `${__props.changeToLabel} ${__props.prevMonthLabel} ${vue.unref(formattedMonth)(vue.unref(selectMonth) - 1, vue.unref(INTL_MONTH_FORMAT), __props.locale)}`,
-                    onClick: _cache[2] || (_cache[2] = ($event) => vue.unref(changeMonth)(-1)),
-                    onKeydown: _cache[3] || (_cache[3] = ($event) => vue.unref(handleKeyDown)($event))
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(lib_icon.DtIcon), {
-                        name: "chevron-left",
-                        size: "200"
-                      })
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label"])
-                ]),
-                _: 1
-              }, 8, ["message"])
-            ]),
+            anchor: vue.withCtx(() => [vue.createVNode(vue.unref(lib_button.DtButton), {
+              id: "prevMonthButton",
+              ref: (el) => {
+                if (el)
+                  vue.unref(setDayRef)(el);
+              },
+              size: "xs",
+              importance: "clear",
+              kind: "muted",
+              circle: true,
+              class: "d-datepicker__nav-btn",
+              type: "button",
+              "aria-label": `${__props.changeToLabel} ${__props.prevMonthLabel} ${vue.unref(formattedMonth)(vue.unref(selectMonth) - 1, vue.unref(INTL_MONTH_FORMAT), __props.locale)}`,
+              onClick: _cache[2] || (_cache[2] = ($event) => vue.unref(changeMonth)(-1)),
+              onKeydown: _cache[3] || (_cache[3] = ($event) => vue.unref(handleKeyDown)($event))
+            }, {
+              default: vue.withCtx(() => [vue.createVNode(vue.unref(lib_icon.DtIcon), {
+                name: "chevron-left",
+                size: "200"
+              })]),
+              _: 1
+            }, 8, ["aria-label"])]),
             _: 1
-          }),
-          vue.createElementVNode("div", _hoisted_1$2, vue.toDisplayString(vue.unref(formattedMonth)(vue.unref(selectMonth), vue.unref(INTL_MONTH_FORMAT), __props.locale)) + " " + vue.toDisplayString(vue.unref(selectYear)), 1),
-          vue.createVNode(vue.unref(lib_stack.DtStack), {
-            as: "nav",
-            direction: "row",
-            gap: "200",
-            class: "d-datepicker__nav"
+          }, 8, ["message"])]),
+          _: 1
+        }), vue.createElementVNode("div", _hoisted_1$2, vue.toDisplayString(vue.unref(formattedMonth)(vue.unref(selectMonth), vue.unref(INTL_MONTH_FORMAT), __props.locale)) + " " + vue.toDisplayString(vue.unref(selectYear)), 1), vue.createVNode(vue.unref(lib_stack.DtStack), {
+          as: "nav",
+          direction: "row",
+          gap: "200",
+          class: "d-datepicker__nav"
+        }, {
+          default: vue.withCtx(() => [vue.createVNode(vue.unref(lib_tooltip.DtTooltip), {
+            message: __props.nextMonthLabel,
+            placement: "top",
+            "fallback-placements": ["top-start", "auto"]
           }, {
-            default: vue.withCtx(() => [
-              vue.createVNode(vue.unref(lib_tooltip.DtTooltip), {
-                message: __props.nextMonthLabel,
-                placement: "top",
-                "fallback-placements": ["top-start", "auto"]
-              }, {
-                anchor: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(lib_button.DtButton), {
-                    id: "nextMonthButton",
-                    ref: (el) => {
-                      if (el)
-                        vue.unref(setDayRef)(el);
-                    },
-                    size: "xs",
-                    importance: "clear",
-                    kind: "muted",
-                    circle: true,
-                    class: "d-datepicker__nav-btn",
-                    type: "button",
-                    "aria-label": `${__props.changeToLabel} ${__props.nextMonthLabel} ${vue.unref(formattedMonth)(vue.unref(selectMonth) + 1, vue.unref(INTL_MONTH_FORMAT), __props.locale)}`,
-                    onClick: _cache[4] || (_cache[4] = ($event) => vue.unref(changeMonth)(1)),
-                    onKeydown: _cache[5] || (_cache[5] = ($event) => vue.unref(handleKeyDown)($event))
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(lib_icon.DtIcon), {
-                        name: "chevron-right",
-                        size: "200"
-                      })
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label"])
-                ]),
-                _: 1
-              }, 8, ["message"]),
-              vue.createVNode(vue.unref(lib_tooltip.DtTooltip), {
-                message: __props.nextYearLabel,
-                placement: "top",
-                "fallback-placements": ["top-end", "auto"]
-              }, {
-                anchor: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(lib_button.DtButton), {
-                    id: "nextYearButton",
-                    ref: (el) => {
-                      if (el)
-                        vue.unref(setDayRef)(el);
-                    },
-                    size: "xs",
-                    importance: "clear",
-                    kind: "muted",
-                    circle: true,
-                    class: "d-datepicker__nav-btn",
-                    type: "button",
-                    "aria-label": `${__props.changeToLabel} ${__props.nextYearLabel} ${vue.unref(selectYear) + 1}`,
-                    onClick: _cache[6] || (_cache[6] = ($event) => vue.unref(changeYear)(1)),
-                    onKeydown: _cache[7] || (_cache[7] = ($event) => vue.unref(handleKeyDown)($event))
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(lib_icon.DtIcon), {
-                        name: "chevrons-right",
-                        size: "200"
-                      })
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label"])
-                ]),
-                _: 1
-              }, 8, ["message"])
-            ]),
+            anchor: vue.withCtx(() => [vue.createVNode(vue.unref(lib_button.DtButton), {
+              id: "nextMonthButton",
+              ref: (el) => {
+                if (el)
+                  vue.unref(setDayRef)(el);
+              },
+              size: "xs",
+              importance: "clear",
+              kind: "muted",
+              circle: true,
+              class: "d-datepicker__nav-btn",
+              type: "button",
+              "aria-label": `${__props.changeToLabel} ${__props.nextMonthLabel} ${vue.unref(formattedMonth)(vue.unref(selectMonth) + 1, vue.unref(INTL_MONTH_FORMAT), __props.locale)}`,
+              onClick: _cache[4] || (_cache[4] = ($event) => vue.unref(changeMonth)(1)),
+              onKeydown: _cache[5] || (_cache[5] = ($event) => vue.unref(handleKeyDown)($event))
+            }, {
+              default: vue.withCtx(() => [vue.createVNode(vue.unref(lib_icon.DtIcon), {
+                name: "chevron-right",
+                size: "200"
+              })]),
+              _: 1
+            }, 8, ["aria-label"])]),
             _: 1
-          })
-        ]),
+          }, 8, ["message"]), vue.createVNode(vue.unref(lib_tooltip.DtTooltip), {
+            message: __props.nextYearLabel,
+            placement: "top",
+            "fallback-placements": ["top-end", "auto"]
+          }, {
+            anchor: vue.withCtx(() => [vue.createVNode(vue.unref(lib_button.DtButton), {
+              id: "nextYearButton",
+              ref: (el) => {
+                if (el)
+                  vue.unref(setDayRef)(el);
+              },
+              size: "xs",
+              importance: "clear",
+              kind: "muted",
+              circle: true,
+              class: "d-datepicker__nav-btn",
+              type: "button",
+              "aria-label": `${__props.changeToLabel} ${__props.nextYearLabel} ${vue.unref(selectYear) + 1}`,
+              onClick: _cache[6] || (_cache[6] = ($event) => vue.unref(changeYear)(1)),
+              onKeydown: _cache[7] || (_cache[7] = ($event) => vue.unref(handleKeyDown)($event))
+            }, {
+              default: vue.withCtx(() => [vue.createVNode(vue.unref(lib_icon.DtIcon), {
+                name: "chevrons-right",
+                size: "200"
+              })]),
+              _: 1
+            }, 8, ["aria-label"])]),
+            _: 1
+          }, 8, ["message"])]),
+          _: 1
+        })]),
         _: 1
       });
     };
@@ -464,7 +455,10 @@ function useCalendar(props, emits) {
   }
   function setDayRef(el, day) {
     if (!daysRef.value.some((day2) => day2.el === el) && day.currentMonth) {
-      daysRef.value.push({ el, day });
+      daysRef.value.push({
+        el,
+        day
+      });
     }
   }
   function handleKeyDown(event) {
@@ -609,7 +603,10 @@ const _sfc_main$1 = {
        */
     "go-to-prev-month"
   ],
-  setup(__props, { expose: __expose, emit: __emit }) {
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
+  }) {
     const props = __props;
     const emits = __emit;
     const {
@@ -625,70 +622,59 @@ const _sfc_main$1 = {
       focusFirstDay
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("table", _hoisted_1$1, [
-        vue.createElementVNode("thead", null, [
-          vue.createElementVNode("tr", null, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(weekDays), (day) => {
-              return vue.openBlock(), vue.createElementBlock("th", {
-                key: day,
-                scope: "col",
-                class: "d-datepicker__cell d-datepicker__cell--header"
-              }, [
-                vue.createElementVNode("span", {
-                  class: "d-datepicker__weekday",
-                  title: day,
-                  "aria-label": day
-                }, vue.toDisplayString(day), 9, _hoisted_2$1)
-              ]);
-            }), 128))
-          ])
-        ]),
-        vue.createElementVNode("tbody", null, [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.calendarDays, (week, indexWeek) => {
-            return vue.openBlock(), vue.createElementBlock("tr", { key: indexWeek }, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(week.days, (day, indexDays) => {
-                return vue.openBlock(), vue.createElementBlock("td", {
-                  key: indexWeek + indexDays,
-                  class: "d-datepicker__cell",
-                  role: "listbox"
-                }, [
-                  vue.createVNode(vue.unref(lib_button.DtButton), {
-                    ref_for: true,
-                    ref: (el) => {
-                      if (el)
-                        vue.unref(setDayRef)(el, day);
-                    },
-                    class: vue.normalizeClass(["d-datepicker__day", {
-                      "d-datepicker__day--disabled": !day.currentMonth,
-                      "d-datepicker__day--selected": vue.unref(selectedDay) ? day.text === vue.unref(selectedDay) && day.currentMonth : day.selected
-                    }]),
-                    circle: true,
-                    size: "sm",
-                    importance: "clear",
-                    disabled: !day.currentMonth,
-                    type: "button",
-                    "aria-selected": !!vue.unref(selectedDay) ? day.text === vue.unref(selectedDay) && day.currentMonth : day.selected,
-                    "aria-label": vue.unref(dayAriaLabel)(day),
-                    role: "option",
-                    onClick: ($event) => vue.unref(selectDay)(day),
-                    onKeydown: _cache[0] || (_cache[0] = ($event) => vue.unref(handleKeyDown)($event))
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createTextVNode(vue.toDisplayString(day.text), 1)
-                    ]),
-                    _: 2
-                  }, 1032, ["disabled", "class", "aria-selected", "aria-label", "onClick"])
-                ]);
-              }), 128))
-            ]);
-          }), 128))
-        ])
-      ]);
+      return vue.openBlock(), vue.createElementBlock("table", _hoisted_1$1, [vue.createElementVNode("thead", null, [vue.createElementVNode("tr", null, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(weekDays), (day) => {
+        return vue.openBlock(), vue.createElementBlock("th", {
+          key: day,
+          scope: "col",
+          class: "d-datepicker__cell d-datepicker__cell--header"
+        }, [vue.createElementVNode("span", {
+          class: "d-datepicker__weekday",
+          title: day,
+          "aria-label": day
+        }, vue.toDisplayString(day), 9, _hoisted_2$1)]);
+      }), 128))])]), vue.createElementVNode("tbody", null, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.calendarDays, (week, indexWeek) => {
+        return vue.openBlock(), vue.createElementBlock("tr", {
+          key: indexWeek
+        }, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(week.days, (day, indexDays) => {
+          return vue.openBlock(), vue.createElementBlock("td", {
+            key: indexWeek + indexDays,
+            class: "d-datepicker__cell",
+            role: "listbox"
+          }, [vue.createVNode(vue.unref(lib_button.DtButton), {
+            ref_for: true,
+            ref: (el) => {
+              if (el)
+                vue.unref(setDayRef)(el, day);
+            },
+            class: vue.normalizeClass(["d-datepicker__day", {
+              "d-datepicker__day--disabled": !day.currentMonth,
+              "d-datepicker__day--selected": vue.unref(selectedDay) ? day.text === vue.unref(selectedDay) && day.currentMonth : day.selected
+            }]),
+            circle: true,
+            size: "sm",
+            importance: "clear",
+            disabled: !day.currentMonth,
+            type: "button",
+            "aria-selected": !!vue.unref(selectedDay) ? day.text === vue.unref(selectedDay) && day.currentMonth : day.selected,
+            "aria-label": vue.unref(dayAriaLabel)(day),
+            role: "option",
+            onClick: ($event) => vue.unref(selectDay)(day),
+            onKeydown: _cache[0] || (_cache[0] = ($event) => vue.unref(handleKeyDown)($event))
+          }, {
+            default: vue.withCtx(() => [vue.createTextVNode(vue.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 _hoisted_1 = {
+  class: "d-datepicker__hd"
+};
+const _hoisted_2 = {
+  class: "d-datepicker__bd"
+};
 const _sfc_main = {
   __name: "datepicker",
   props: {
@@ -796,58 +782,76 @@ const _sfc_main = {
         class: "d-datepicker",
         gap: "400"
       }, {
-        default: vue.withCtx(() => [
-          vue.createElementVNode("div", _hoisted_1, [
-            vue.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"])
-          ]),
-          vue.createElementVNode("div", _hoisted_2, [
-            vue.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"])
-          ])
-        ]),
+        default: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_1, [vue.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"])]), vue.createElementVNode("div", _hoisted_2, [vue.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);
+  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);
+  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" };
+  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);
+  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);
+  return new Intl.DateTimeFormat(locale, {
+    year: "2-digit",
+    month: "2-digit",
+    day: "2-digit"
+  }).format(date);
 }
 exports.DtDatepicker = _sfc_main;
 exports.formatLong = formatLong;