@dialpad/dialtone-vue 3.204.1 → 3.205.0

package/dist/lib/datepicker/datepicker.js

@@ -1,38 +1,45 @@
-import { ref as E, computed as N, watch as w, onMounted as Z, openBlock as $, createBlock as ee, unref as t, withCtx as p, createVNode as d, createElementVNode as M, toDisplayString as O, nextTick as L, createElementBlock as g, Fragment as B, renderList as V, normalizeClass as ne, createTextVNode as le, getCurrentInstance as re } from "vue";
+import { ref as E, computed as N, watch as x, onMounted as Z, openBlock as $, createBlock as ee, unref as t, withCtx as k, createVNode as d, createElementVNode as w, toDisplayString as Y, nextTick as O, createElementBlock as g, Fragment as B, renderList as V, normalizeClass as ne, createTextVNode as le, getCurrentInstance as re } from "vue";
 import { DtIconChevronsLeft as oe, DtIconChevronLeft as se, DtIconChevronRight as ue, DtIconChevronsRight as ie } from "@dialpad/dialtone-icons/vue3";
-import { getMonth as G, getYear as q, subMonths as W, endOfMonth as j, startOfDay as P, addMonths as J, startOfMonth as Q, getDate as ce, set as de } from "date-fns";
-import { getCalendarDays as fe, formatMonth as De, getWeekDayNames as ve, calculateNextFocusDate as me, calculatePrevFocusDate as pe, formatDate as ke } from "./utils.js";
-import { INTL_MONTH_FORMAT as te, WEEK_START as be } from "./datepicker-constants.js";
-import { returnFirstEl as v, warnIfUnmounted as ye } from "../../common/utils/index.js";
+import { getMonth as G, getYear as q, subMonths as j, endOfMonth as J, startOfDay as L, addMonths as Q, startOfMonth as W, getDate as ce, set as de } from "date-fns";
+import { getCalendarDays as fe, formatMonth as De, getWeekDayNames as ve, calculateNextFocusDate as me, calculatePrevFocusDate as ke, formatDate as be } from "./utils.js";
+import { INTL_MONTH_FORMAT as te } from "./datepicker-constants.js";
+import { returnFirstEl as v, warnIfUnmounted as pe } from "../../common/utils/index.js";
 import { DialtoneLocalization as U } from "../../localization/index.js";
-import Y from "../stack/stack.js";
-import R from "../tooltip/tooltip.js";
-import C from "../button/button.js";
-function he(l, o) {
-  const u = E(G(l.selectedDate)), a = E(q(l.selectedDate)), n = E(null), r = E(0), m = E([]), D = new U(), h = N(() => fe(u.value, a.value, n.value, l.minDate, l.maxDate)), k = N(() => {
-    if (!l.minDate) return !1;
-    const e = W(new Date(a.value, u.value, 1), 1);
-    return j(e) < P(l.minDate);
+import R from "../stack/stack.js";
+import P from "../tooltip/tooltip.js";
+import I from "../button/button.js";
+function ye(n, o) {
+  const u = E(G(n.selectedDate)), a = E(q(n.selectedDate)), l = E(null), r = E(0), m = E([]), D = new U(), h = N(() => fe(
+    u.value,
+    a.value,
+    l.value,
+    n.minDate,
+    n.maxDate,
+    n.weekStartsOn
+  )), b = N(() => {
+    if (!n.minDate) return !1;
+    const e = j(new Date(a.value, u.value, 1), 1);
+    return J(e) < L(n.minDate);
   }), _ = N(() => {
-    if (!l.maxDate) return !1;
-    const e = J(new Date(a.value, u.value, 1), 1);
-    return Q(e) > P(l.maxDate);
-  }), b = N(() => {
-    if (!l.minDate) return !1;
+    if (!n.maxDate) return !1;
+    const e = Q(new Date(a.value, u.value, 1), 1);
+    return W(e) > L(n.maxDate);
+  }), p = N(() => {
+    if (!n.minDate) return !1;
     const e = new Date(a.value - 1, u.value, 1);
-    return j(e) < P(l.minDate);
+    return J(e) < L(n.minDate);
   }), T = N(() => {
-    if (!l.maxDate) return !1;
+    if (!n.maxDate) return !1;
     const e = new Date(a.value + 1, u.value, 1);
-    return Q(e) > P(l.maxDate);
+    return W(e) > L(n.maxDate);
   });
-  w(u, () => {
-    x(), o("calendar-days", h.value);
-  }, { immediate: !0 }), w(a, () => {
-    x(), o("calendar-days", h.value);
-  }, { immediate: !0 }), w(() => l.minDate, () => {
+  x(u, () => {
+    M(), o("calendar-days", h.value);
+  }, { immediate: !0 }), x(a, () => {
+    M(), o("calendar-days", h.value);
+  }, { immediate: !0 }), x(() => n.minDate, () => {
     o("calendar-days", h.value);
-  }), w(() => l.maxDate, () => {
+  }), x(() => n.maxDate, () => {
     o("calendar-days", h.value);
   });
   function s(e) {
@@ -63,29 +70,29 @@ function he(l, o) {
         break;
     }
   }
-  function x() {
-    const e = q(l.selectedDate), I = G(l.selectedDate);
-    e !== a.value || I !== u.value ? n.value = null : n.value = ce(l.selectedDate);
+  function M() {
+    const e = q(n.selectedDate), C = G(n.selectedDate);
+    e !== a.value || C !== u.value ? l.value = null : l.value = ce(n.selectedDate);
   }
   function y(e) {
-    if (e === -1 && k.value || e === 1 && _.value) return;
+    if (e === -1 && b.value || e === 1 && _.value) return;
     (u.value === 0 && e === -1 || u.value === 11 && e === 1) && (a.value += e);
-    const I = de(l.selectedDate, { month: u.value, year: a.value }), ae = e === 1 ? J(I, 1) : W(I, 1);
+    const C = de(n.selectedDate, { month: u.value, year: a.value }), ae = e === 1 ? Q(C, 1) : j(C, 1);
     u.value = G(ae);
   }
   function K(e) {
-    e === -1 && b.value || e === 1 && T.value || (a.value = a.value + e);
+    e === -1 && p.value || e === 1 && T.value || (a.value = a.value + e);
   }
-  function F() {
+  function S() {
     y(1);
   }
-  function z() {
+  function F() {
     y(-1);
   }
-  function H() {
+  function z() {
     return `${D.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${D.$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR")} ${a.value - 1}`;
   }
-  function S() {
+  function H() {
     return `${D.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${D.$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH")} ${s(u.value - 1)}`;
   }
   function X() {
@@ -103,22 +110,22 @@ function he(l, o) {
     handleKeyDown: f,
     changeMonth: y,
     changeYear: K,
-    goToNextMonth: F,
-    goToPrevMonth: z,
-    isPrevMonthDisabled: k,
+    goToNextMonth: S,
+    goToPrevMonth: F,
+    isPrevMonthDisabled: b,
     isNextMonthDisabled: _,
-    isPrevYearDisabled: b,
+    isPrevYearDisabled: p,
     isNextYearDisabled: T,
-    previousYearAriaLabel: H,
-    previousMonthAriaLabel: S,
+    previousYearAriaLabel: z,
+    previousMonthAriaLabel: H,
     nextYearAriaLabel: X,
     nextMonthAriaLabel: c
   };
 }
-const _e = {
+const he = {
   id: "calendar-heading",
   class: "d-datepicker__month-year-title"
-}, $e = {
+}, _e = {
   __name: "month-year-picker",
   props: {
     selectedDate: {
@@ -132,6 +139,11 @@ const _e = {
     maxDate: {
       type: Date,
       default: null
+    },
+    weekStartsOn: {
+      type: Number,
+      default: 0,
+      validator: (n) => Number.isInteger(n) && n >= 0 && n <= 6
     }
   },
   emits: [
@@ -161,58 +173,58 @@ const _e = {
        */
     "close-datepicker"
   ],
-  setup(l, { expose: o, emit: u }) {
-    const a = l, n = u, r = new U(), {
+  setup(n, { expose: o, emit: u }) {
+    const a = n, l = u, r = new U(), {
       selectMonth: m,
       selectYear: D,
       formattedMonth: h,
-      setDayRef: k,
+      setDayRef: b,
       focusMonthYearPicker: _,
-      handleKeyDown: b,
+      handleKeyDown: p,
       changeMonth: T,
       changeYear: s,
       goToNextMonth: i,
       goToPrevMonth: A,
       isPrevMonthDisabled: f,
-      isNextMonthDisabled: x,
+      isNextMonthDisabled: M,
       isPrevYearDisabled: y,
       isNextYearDisabled: K,
-      previousYearAriaLabel: F,
-      previousMonthAriaLabel: z,
-      nextMonthAriaLabel: H,
-      nextYearAriaLabel: S
-    } = he(a, n);
+      previousYearAriaLabel: S,
+      previousMonthAriaLabel: F,
+      nextMonthAriaLabel: z,
+      nextYearAriaLabel: H
+    } = ye(a, l);
     return Z(() => {
       _();
     }), o({
       focusMonthYearPicker: _,
       goToNextMonth: i,
       goToPrevMonth: A
-    }), (X, c) => ($(), ee(t(Y), {
+    }), (X, c) => ($(), ee(t(R), {
       class: "d-datepicker__month-year",
       direction: "row",
       gap: "300"
     }, {
-      default: p(() => [
-        d(t(Y), {
+      default: k(() => [
+        d(t(R), {
           as: "nav",
           class: "d-datepicker__nav",
           direction: "row",
           gap: "200"
         }, {
-          default: p(() => [
-            d(t(R), {
+          default: k(() => [
+            d(t(P), {
               "fallback-placements": ["top-start", "auto"],
               message: t(r).$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR"),
               placement: "top"
             }, {
-              anchor: p(() => [
-                d(t(C), {
+              anchor: k(() => [
+                d(t(I), {
                   id: "prevYearButton",
                   ref: (e) => {
-                    e && t(k)(e);
+                    e && t(b)(e);
                   },
-                  "aria-label": t(F)(),
+                  "aria-label": t(S)(),
                   circle: !0,
                   disabled: t(y),
                   class: "d-datepicker__nav-btn",
@@ -221,9 +233,9 @@ const _e = {
                   size: "xs",
                   type: "button",
                   onClick: c[0] || (c[0] = (e) => t(s)(-1)),
-                  onKeydown: c[1] || (c[1] = (e) => t(b)(e))
+                  onKeydown: c[1] || (c[1] = (e) => t(p)(e))
                 }, {
-                  default: p(() => [
+                  default: k(() => [
                     d(t(oe), { size: "200" })
                   ]),
                   _: 1
@@ -231,18 +243,18 @@ const _e = {
               ]),
               _: 1
             }, 8, ["message"]),
-            d(t(R), {
+            d(t(P), {
               "fallback-placements": ["top-start", "auto"],
               message: t(r).$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH"),
               placement: "top"
             }, {
-              anchor: p(() => [
-                d(t(C), {
+              anchor: k(() => [
+                d(t(I), {
                   id: "prevMonthButton",
                   ref: (e) => {
-                    e && t(k)(e);
+                    e && t(b)(e);
                   },
-                  "aria-label": t(z)(),
+                  "aria-label": t(F)(),
                   circle: !0,
                   disabled: t(f),
                   class: "d-datepicker__nav-btn",
@@ -251,9 +263,9 @@ const _e = {
                   size: "xs",
                   type: "button",
                   onClick: c[2] || (c[2] = (e) => t(T)(-1)),
-                  onKeydown: c[3] || (c[3] = (e) => t(b)(e))
+                  onKeydown: c[3] || (c[3] = (e) => t(p)(e))
                 }, {
-                  default: p(() => [
+                  default: k(() => [
                     d(t(se), { size: "200" })
                   ]),
                   _: 1
@@ -264,37 +276,37 @@ const _e = {
           ]),
           _: 1
         }),
-        M("div", _e, O(t(h)(t(m))) + " " + O(t(D)), 1),
-        d(t(Y), {
+        w("div", he, Y(t(h)(t(m))) + " " + Y(t(D)), 1),
+        d(t(R), {
           as: "nav",
           class: "d-datepicker__nav",
           direction: "row",
           gap: "200"
         }, {
-          default: p(() => [
-            d(t(R), {
+          default: k(() => [
+            d(t(P), {
               "fallback-placements": ["top-end", "auto"],
               message: t(r).$t("DIALTONE_DATEPICKER_NEXT_MONTH"),
               placement: "top"
             }, {
-              anchor: p(() => [
-                d(t(C), {
+              anchor: k(() => [
+                d(t(I), {
                   id: "nextMonthButton",
                   ref: (e) => {
-                    e && t(k)(e);
+                    e && t(b)(e);
                   },
-                  "aria-label": t(H)(),
+                  "aria-label": t(z)(),
                   circle: !0,
-                  disabled: t(x),
+                  disabled: t(M),
                   class: "d-datepicker__nav-btn",
                   importance: "clear",
                   kind: "muted",
                   size: "xs",
                   type: "button",
                   onClick: c[4] || (c[4] = (e) => t(T)(1)),
-                  onKeydown: c[5] || (c[5] = (e) => t(b)(e))
+                  onKeydown: c[5] || (c[5] = (e) => t(p)(e))
                 }, {
-                  default: p(() => [
+                  default: k(() => [
                     d(t(ue), { size: "200" })
                   ]),
                   _: 1
@@ -302,18 +314,18 @@ const _e = {
               ]),
               _: 1
             }, 8, ["message"]),
-            d(t(R), {
+            d(t(P), {
               "fallback-placements": ["top-end", "auto"],
               message: t(r).$t("DIALTONE_DATEPICKER_NEXT_YEAR"),
               placement: "top"
             }, {
-              anchor: p(() => [
-                d(t(C), {
+              anchor: k(() => [
+                d(t(I), {
                   id: "nextYearButton",
                   ref: (e) => {
-                    e && t(k)(e);
+                    e && t(b)(e);
                   },
-                  "aria-label": t(S)(),
+                  "aria-label": t(H)(),
                   circle: !0,
                   disabled: t(K),
                   class: "d-datepicker__nav-btn",
@@ -322,9 +334,9 @@ const _e = {
                   size: "xs",
                   type: "button",
                   onClick: c[6] || (c[6] = (e) => t(s)(1)),
-                  onKeydown: c[7] || (c[7] = (e) => t(b)(e))
+                  onKeydown: c[7] || (c[7] = (e) => t(p)(e))
                 }, {
-                  default: p(() => [
+                  default: k(() => [
                     d(t(ie), { size: "200" })
                   ]),
                   _: 1
@@ -340,46 +352,46 @@ const _e = {
     }));
   }
 };
-function Ee(l, o) {
-  const u = E(null), a = E(0), n = E([]), r = new U(), m = N(() => ve(l.locale, be));
-  w(() => l.calendarDays, () => {
-    a.value = 0, n.value = [], u.value = null;
+function $e(n, o) {
+  const u = E(null), a = E(0), l = E([]), r = new U(), m = N(() => ve(n.locale, n.weekStartsOn));
+  x(() => n.calendarDays, () => {
+    a.value = 0, l.value = [], u.value = null;
   });
   function D(s) {
-    return r.$t("DIALTONE_DATEPICKER_SELECT_DAY") + ` ${ke(s.value, te, r.currentLocale)}`;
+    return r.$t("DIALTONE_DATEPICKER_SELECT_DAY") + ` ${be(s.value, te, r.currentLocale)}`;
   }
   function h(s, i) {
-    !n.value.some((A) => A.el === s) && !i.disabled && n.value.push({ el: s, day: i });
+    !l.value.some((A) => A.el === s) && !i.disabled && l.value.push({ el: s, day: i });
   }
-  function k(s) {
+  function b(s) {
     switch (s.key) {
       case "ArrowUp":
         s.preventDefault(), a.value -= 7;
         try {
-          v(n.value[a.value].el.$el).focus();
+          v(l.value[a.value].el.$el).focus();
         } catch {
-          const i = pe(n.value[a.value + 7].day.value);
-          o("go-to-prev-month"), L(() => {
-            v(n.value[i - 1].el.$el).focus(), a.value += i - 1;
+          const i = ke(l.value[a.value + 7].day.value);
+          o("go-to-prev-month"), O(() => {
+            v(l.value[i - 1].el.$el).focus(), a.value += i - 1;
           });
         }
         break;
       case "ArrowDown":
         s.preventDefault(), a.value += 7;
         try {
-          v(n.value[a.value].el.$el).focus();
+          v(l.value[a.value].el.$el).focus();
         } catch {
-          const i = me(n.value[a.value - 7].day.value);
-          o("go-to-next-month"), L(() => {
-            v(n.value[i - 1].el.$el).focus(), a.value += i - 1;
+          const i = me(l.value[a.value - 7].day.value);
+          o("go-to-next-month"), O(() => {
+            v(l.value[i - 1].el.$el).focus(), a.value += i - 1;
           });
         }
         break;
       case "ArrowLeft":
-        s.preventDefault(), a.value > 0 ? (a.value -= 1, v(n.value[a.value].el.$el).focus()) : (o("go-to-prev-month"), b());
+        s.preventDefault(), a.value > 0 ? (a.value -= 1, v(l.value[a.value].el.$el).focus()) : (o("go-to-prev-month"), p());
         break;
       case "ArrowRight":
-        s.preventDefault(), a.value < n.value.length - 1 ? (a.value += 1, v(n.value[a.value].el.$el).focus()) : (o("go-to-next-month"), _());
+        s.preventDefault(), a.value < l.value.length - 1 ? (a.value += 1, v(l.value[a.value].el.$el).focus()) : (o("go-to-next-month"), _());
         break;
       case "Tab":
         s.preventDefault(), o("focus-month-year-picker");
@@ -390,13 +402,13 @@ function Ee(l, o) {
     }
   }
   function _() {
-    a.value = 0, L(() => {
-      v(n.value[a.value].el.$el).focus();
+    a.value = 0, O(() => {
+      v(l.value[a.value].el.$el).focus();
     });
   }
-  function b() {
-    L(() => {
-      a.value = n.value.length - 1, v(n.value[a.value].el.$el).focus();
+  function p() {
+    O(() => {
+      a.value = l.value.length - 1, v(l.value[a.value].el.$el).focus();
     });
   }
   function T(s) {
@@ -407,20 +419,25 @@ function Ee(l, o) {
     weekDays: m,
     dayAriaLabel: D,
     setDayRef: h,
-    handleKeyDown: k,
+    handleKeyDown: b,
     focusFirstDay: _,
     selectDay: T
   };
 }
-const Te = {
+const Ee = {
   class: "d-datepicker__calendar",
   "aria-labelledby": "calendar-heading"
-}, Ae = ["title", "aria-label"], ge = {
+}, Te = ["title", "aria-label"], Ae = {
   __name: "calendar",
   props: {
     calendarDays: {
       type: Array,
       required: !0
+    },
+    weekStartsOn: {
+      type: Number,
+      default: 0,
+      validator: (n) => Number.isInteger(n) && n >= 0 && n <= 6
     }
   },
   emits: [
@@ -456,42 +473,42 @@ const Te = {
        */
     "go-to-prev-month"
   ],
-  setup(l, { expose: o, emit: u }) {
-    const a = l, n = u, {
+  setup(n, { expose: o, emit: u }) {
+    const a = n, l = u, {
       selectedDay: r,
       weekDays: m,
       dayAriaLabel: D,
       setDayRef: h,
-      handleKeyDown: k,
+      handleKeyDown: b,
       focusFirstDay: _,
-      selectDay: b
-    } = Ee(a, n);
+      selectDay: p
+    } = $e(a, l);
     return o({
       focusFirstDay: _
-    }), (T, s) => ($(), g("table", Te, [
-      M("thead", null, [
-        M("tr", null, [
+    }), (T, s) => ($(), g("table", Ee, [
+      w("thead", null, [
+        w("tr", null, [
           ($(!0), g(B, null, V(t(m), (i) => ($(), g("th", {
             key: i,
             scope: "col",
             class: "d-datepicker__cell d-datepicker__cell--header"
           }, [
-            M("span", {
+            w("span", {
               class: "d-datepicker__weekday",
               title: i,
               "aria-label": i
-            }, O(i), 9, Ae)
+            }, Y(i), 9, Te)
           ]))), 128))
         ])
       ]),
-      M("tbody", null, [
-        ($(!0), g(B, null, V(l.calendarDays, (i, A) => ($(), g("tr", { key: A }, [
-          ($(!0), g(B, null, V(i.days, (f, x) => ($(), g("td", {
-            key: A + x,
+      w("tbody", null, [
+        ($(!0), g(B, null, V(n.calendarDays, (i, A) => ($(), g("tr", { key: A }, [
+          ($(!0), g(B, null, V(i.days, (f, M) => ($(), g("td", {
+            key: A + M,
             class: "d-datepicker__cell",
             role: "listbox"
           }, [
-            d(t(C), {
+            d(t(I), {
               ref_for: !0,
               ref: (y) => {
                 y && t(h)(y, f);
@@ -508,11 +525,11 @@ const Te = {
               "aria-selected": t(r) ? f.text === t(r) && !f.disabled : f.selected,
               "aria-label": t(D)(f),
               role: "option",
-              onClick: (y) => t(b)(f),
-              onKeydown: s[0] || (s[0] = (y) => t(k)(y))
+              onClick: (y) => t(p)(f),
+              onKeydown: s[0] || (s[0] = (y) => t(b)(y))
             }, {
-              default: p(() => [
-                le(O(f.text), 1)
+              default: k(() => [
+                le(Y(f.text), 1)
               ]),
               _: 2
             }, 1032, ["disabled", "class", "aria-selected", "aria-label", "onClick"])
@@ -521,7 +538,7 @@ const Te = {
       ])
     ]));
   }
-}, Me = { class: "d-datepicker__hd" }, xe = { class: "d-datepicker__bd" }, Fe = {
+}, ge = { class: "d-datepicker__hd" }, we = { class: "d-datepicker__bd" }, Ke = {
   __name: "datepicker",
   props: {
     /**
@@ -552,7 +569,17 @@ const Te = {
     maxDate: {
       type: Date,
       default: null,
-      validator: (l, o) => l && o.minDate && l < o.minDate ? (console.warn("[DtDatepicker]: maxDate must be after or equal to minDate."), !1) : !0
+      validator: (n, o) => n && o.minDate && n < o.minDate ? (console.warn("[DtDatepicker]: maxDate must be after or equal to minDate."), !1) : !0
+    },
+    /**
+       * Day the week starts on. 0 = Sunday, 1 = Monday, ... 6 = Saturday.
+       *
+       * @values 0, 1, 2, 3, 4, 5, 6
+       */
+    weekStartsOn: {
+      type: Number,
+      default: 0,
+      validator: (n) => Number.isInteger(n) && n >= 0 && n <= 6
     }
   },
   emits: [
@@ -570,41 +597,43 @@ const Te = {
        */
     "close-datepicker"
   ],
-  setup(l) {
+  setup(n) {
     const o = E([]);
     function u(a) {
       o.value = a;
     }
     return Z(() => {
       const a = re();
-      ye(v(a.proxy.$el), "datepicker");
-    }), (a, n) => ($(), ee(t(Y), {
+      pe(v(a.proxy.$el), "datepicker");
+    }), (a, l) => ($(), ee(t(R), {
       class: "d-datepicker",
       gap: "400"
     }, {
-      default: p(() => [
-        M("div", Me, [
-          d($e, {
+      default: k(() => [
+        w("div", ge, [
+          d(_e, {
             ref: "monthYearPicker",
-            "selected-date": l.selectedDate,
-            "min-date": l.minDate,
-            "max-date": l.maxDate,
+            "selected-date": n.selectedDate,
+            "min-date": n.minDate,
+            "max-date": n.maxDate,
+            "week-starts-on": n.weekStartsOn,
             onCalendarDays: u,
-            onFocusFirstDay: n[0] || (n[0] = (r) => a.$refs.calendar.focusFirstDay()),
-            onFocusLastDay: n[1] || (n[1] = (r) => a.$refs.calendar.focusLastDay()),
-            onCloseDatepicker: n[2] || (n[2] = (r) => a.$emit("close-datepicker"))
-          }, null, 8, ["selected-date", "min-date", "max-date"])
+            onFocusFirstDay: l[0] || (l[0] = (r) => a.$refs.calendar.focusFirstDay()),
+            onFocusLastDay: l[1] || (l[1] = (r) => a.$refs.calendar.focusLastDay()),
+            onCloseDatepicker: l[2] || (l[2] = (r) => a.$emit("close-datepicker"))
+          }, null, 8, ["selected-date", "min-date", "max-date", "week-starts-on"])
         ]),
-        M("div", xe, [
-          d(ge, {
+        w("div", we, [
+          d(Ae, {
             ref: "calendar",
             "calendar-days": o.value,
-            onSelectDate: n[3] || (n[3] = (r) => a.$emit("selected-date", r)),
-            onFocusMonthYearPicker: n[4] || (n[4] = (r) => a.$refs.monthYearPicker.focusMonthYearPicker()),
-            onCloseDatepicker: n[5] || (n[5] = (r) => a.$emit("close-datepicker")),
-            onGoToNextMonth: n[6] || (n[6] = (r) => a.$refs.monthYearPicker.goToNextMonth()),
-            onGoToPrevMonth: n[7] || (n[7] = (r) => a.$refs.monthYearPicker.goToPrevMonth())
-          }, null, 8, ["calendar-days"])
+            "week-starts-on": n.weekStartsOn,
+            onSelectDate: l[3] || (l[3] = (r) => a.$emit("selected-date", r)),
+            onFocusMonthYearPicker: l[4] || (l[4] = (r) => a.$refs.monthYearPicker.focusMonthYearPicker()),
+            onCloseDatepicker: l[5] || (l[5] = (r) => a.$emit("close-datepicker")),
+            onGoToNextMonth: l[6] || (l[6] = (r) => a.$refs.monthYearPicker.goToNextMonth()),
+            onGoToPrevMonth: l[7] || (l[7] = (r) => a.$refs.monthYearPicker.goToPrevMonth())
+          }, null, 8, ["calendar-days", "week-starts-on"])
         ])
       ]),
       _: 1
@@ -612,6 +641,6 @@ const Te = {
   }
 };
 export {
-  Fe as default
+  Ke as default
 };
 //# sourceMappingURL=datepicker.js.map