@dialpad/dialtone-vue 3.146.0 → 3.147.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-h9MD6WUt.js");
+require("../chunks/popover_constants-XnGWXaxX.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-bvhFNOPu.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 const WEEK_START = 0;
 const MONTH_FORMAT = "MMMM";
@@ -48,15 +48,13 @@ 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);
     }
@@ -66,19 +64,14 @@ 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);
@@ -115,15 +108,11 @@ 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);
@@ -180,10 +169,7 @@ 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);
   }
@@ -272,10 +258,7 @@ 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 {
@@ -304,135 +287,161 @@ 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_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_stack.DtStack), {
+            as: "nav",
+            direction: "row",
+            gap: "200",
+            class: "d-datepicker__nav"
           }, {
-            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"])]),
+            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"])
+            ]),
             _: 1
-          }, 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"]
+          }),
+          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"
           }, {
-            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"])]),
+            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"])
+            ]),
             _: 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
       });
     };
@@ -455,10 +464,7 @@ 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) {
@@ -603,10 +609,7 @@ 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 {
@@ -622,59 +625,70 @@ 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: {
@@ -782,76 +796,58 @@ 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;