@dialpad/dialtone-vue 3.218.3 → 3.219.0-next.2

package/dist/lib/datepicker/datepicker.js

@@ -1,5 +1,5 @@
-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 { ref as E, computed as N, watch as I, 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 C, 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 ie, DtIconChevronsRight as ue } from "@dialpad/dialtone-icons/vue";
 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";
@@ -7,10 +7,10 @@ import { returnFirstEl as v, warnIfUnmounted as pe } from "../../common/utils/in
 import { DialtoneLocalization as U } from "../../localization/index.js";
 import R from "../stack/stack.js";
 import P from "../tooltip/tooltip.js";
-import I from "../button/button.js";
+import x 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,
+  const i = E(G(n.selectedDate)), a = E(q(n.selectedDate)), l = E(null), r = E(0), m = E([]), D = new U(), h = N(() => fe(
+    i.value,
     a.value,
     l.value,
     n.minDate,
@@ -18,34 +18,34 @@ function ye(n, o) {
     n.weekStartsOn
   )), b = N(() => {
     if (!n.minDate) return !1;
-    const e = j(new Date(a.value, u.value, 1), 1);
+    const e = j(new Date(a.value, i.value, 1), 1);
     return J(e) < L(n.minDate);
   }), _ = N(() => {
     if (!n.maxDate) return !1;
-    const e = Q(new Date(a.value, u.value, 1), 1);
+    const e = Q(new Date(a.value, i.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);
+    const e = new Date(a.value - 1, i.value, 1);
     return J(e) < L(n.minDate);
   }), T = N(() => {
     if (!n.maxDate) return !1;
-    const e = new Date(a.value + 1, u.value, 1);
+    const e = new Date(a.value + 1, i.value, 1);
     return W(e) > L(n.maxDate);
   });
-  x(u, () => {
+  I(i, () => {
     M(), o("calendar-days", h.value);
-  }, { immediate: !0 }), x(a, () => {
+  }, { immediate: !0 }), I(a, () => {
     M(), o("calendar-days", h.value);
-  }, { immediate: !0 }), x(() => n.minDate, () => {
+  }, { immediate: !0 }), I(() => n.minDate, () => {
     o("calendar-days", h.value);
-  }), x(() => n.maxDate, () => {
+  }), I(() => n.maxDate, () => {
     o("calendar-days", h.value);
   });
   function s(e) {
     return De(e, te, D.currentLocale);
   }
-  function i(e) {
+  function u(e) {
     m.value.includes(e) || m.value.push(e);
   }
   function A() {
@@ -71,52 +71,52 @@ function ye(n, o) {
     }
   }
   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);
+    const e = q(n.selectedDate), O = G(n.selectedDate);
+    e !== a.value || O !== i.value ? l.value = null : l.value = ce(n.selectedDate);
   }
   function y(e) {
     if (e === -1 && b.value || e === 1 && _.value) return;
-    (u.value === 0 && e === -1 || u.value === 11 && e === 1) && (a.value += e);
-    const C = de(n.selectedDate, { month: u.value, year: a.value }), ae = e === 1 ? Q(C, 1) : j(C, 1);
-    u.value = G(ae);
+    (i.value === 0 && e === -1 || i.value === 11 && e === 1) && (a.value += e);
+    const O = de(n.selectedDate, { month: i.value, year: a.value }), ae = e === 1 ? Q(O, 1) : j(O, 1);
+    i.value = G(ae);
   }
   function K(e) {
     e === -1 && p.value || e === 1 && T.value || (a.value = a.value + e);
   }
-  function S() {
+  function z() {
     y(1);
   }
-  function F() {
+  function S() {
     y(-1);
   }
-  function z() {
+  function F() {
     return `${D.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${D.$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR")} ${a.value - 1}`;
   }
   function H() {
-    return `${D.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${D.$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH")} ${s(u.value - 1)}`;
+    return `${D.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${D.$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH")} ${s(i.value - 1)}`;
   }
   function X() {
     return `${D.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${D.$t("DIALTONE_DATEPICKER_NEXT_YEAR")} ${a.value + 1}`;
   }
   function c() {
-    return `${D.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${D.$t("DIALTONE_DATEPICKER_NEXT_MONTH")} ${s(u.value + 1)}`;
+    return `${D.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${D.$t("DIALTONE_DATEPICKER_NEXT_MONTH")} ${s(i.value + 1)}`;
   }
   return {
-    selectMonth: u,
+    selectMonth: i,
     selectYear: a,
     formattedMonth: s,
-    setDayRef: i,
+    setDayRef: u,
     focusMonthYearPicker: A,
     handleKeyDown: f,
     changeMonth: y,
     changeYear: K,
-    goToNextMonth: S,
-    goToPrevMonth: F,
+    goToNextMonth: z,
+    goToPrevMonth: S,
     isPrevMonthDisabled: b,
     isNextMonthDisabled: _,
     isPrevYearDisabled: p,
     isNextYearDisabled: T,
-    previousYearAriaLabel: z,
+    previousYearAriaLabel: F,
     previousMonthAriaLabel: H,
     nextYearAriaLabel: X,
     nextMonthAriaLabel: c
@@ -173,8 +173,8 @@ const he = {
        */
     "close-datepicker"
   ],
-  setup(n, { expose: o, emit: u }) {
-    const a = n, l = u, r = new U(), {
+  setup(n, { expose: o, emit: i }) {
+    const a = n, l = i, r = new U(), {
       selectMonth: m,
       selectYear: D,
       formattedMonth: h,
@@ -183,34 +183,34 @@ const he = {
       handleKeyDown: p,
       changeMonth: T,
       changeYear: s,
-      goToNextMonth: i,
+      goToNextMonth: u,
       goToPrevMonth: A,
       isPrevMonthDisabled: f,
       isNextMonthDisabled: M,
       isPrevYearDisabled: y,
       isNextYearDisabled: K,
-      previousYearAriaLabel: S,
-      previousMonthAriaLabel: F,
-      nextMonthAriaLabel: z,
+      previousYearAriaLabel: z,
+      previousMonthAriaLabel: S,
+      nextMonthAriaLabel: F,
       nextYearAriaLabel: H
     } = ye(a, l);
     return Z(() => {
       _();
     }), o({
       focusMonthYearPicker: _,
-      goToNextMonth: i,
+      goToNextMonth: u,
       goToPrevMonth: A
     }), (X, c) => ($(), ee(t(R), {
       class: "d-datepicker__month-year",
       direction: "row",
-      gap: "300"
+      gap: "50"
     }, {
       default: k(() => [
         d(t(R), {
           as: "nav",
           class: "d-datepicker__nav",
           direction: "row",
-          gap: "200"
+          gap: "25"
         }, {
           default: k(() => [
             d(t(P), {
@@ -219,24 +219,23 @@ const he = {
               placement: "top"
             }, {
               anchor: k(() => [
-                d(t(I), {
+                d(t(x), {
                   id: "prevYearButton",
                   ref: (e) => {
                     e && t(b)(e);
                   },
-                  "aria-label": t(S)(),
-                  circle: !0,
+                  "aria-label": t(z)(),
                   disabled: t(y),
+                  kind: "muted",
                   class: "d-datepicker__nav-btn",
                   importance: "clear",
-                  kind: "muted",
-                  size: "xs",
+                  size: 100,
                   type: "button",
                   onClick: c[0] || (c[0] = (e) => t(s)(-1)),
                   onKeydown: c[1] || (c[1] = (e) => t(p)(e))
                 }, {
-                  default: k(() => [
-                    d(t(oe), { size: "200" })
+                  icon: k(({ iconSize: e }) => [
+                    d(t(oe), { size: e }, null, 8, ["size"])
                   ]),
                   _: 1
                 }, 8, ["aria-label", "disabled"])
@@ -249,24 +248,23 @@ const he = {
               placement: "top"
             }, {
               anchor: k(() => [
-                d(t(I), {
+                d(t(x), {
                   id: "prevMonthButton",
                   ref: (e) => {
                     e && t(b)(e);
                   },
-                  "aria-label": t(F)(),
-                  circle: !0,
+                  "aria-label": t(S)(),
                   disabled: t(f),
                   class: "d-datepicker__nav-btn",
                   importance: "clear",
                   kind: "muted",
-                  size: "xs",
+                  size: 100,
                   type: "button",
                   onClick: c[2] || (c[2] = (e) => t(T)(-1)),
                   onKeydown: c[3] || (c[3] = (e) => t(p)(e))
                 }, {
-                  default: k(() => [
-                    d(t(se), { size: "200" })
+                  icon: k(({ iconSize: e }) => [
+                    d(t(se), { size: e }, null, 8, ["size"])
                   ]),
                   _: 1
                 }, 8, ["aria-label", "disabled"])
@@ -281,7 +279,7 @@ const he = {
           as: "nav",
           class: "d-datepicker__nav",
           direction: "row",
-          gap: "200"
+          gap: "25"
         }, {
           default: k(() => [
             d(t(P), {
@@ -290,24 +288,23 @@ const he = {
               placement: "top"
             }, {
               anchor: k(() => [
-                d(t(I), {
+                d(t(x), {
                   id: "nextMonthButton",
                   ref: (e) => {
                     e && t(b)(e);
                   },
-                  "aria-label": t(z)(),
-                  circle: !0,
+                  "aria-label": t(F)(),
                   disabled: t(M),
                   class: "d-datepicker__nav-btn",
                   importance: "clear",
                   kind: "muted",
-                  size: "xs",
+                  size: 100,
                   type: "button",
                   onClick: c[4] || (c[4] = (e) => t(T)(1)),
                   onKeydown: c[5] || (c[5] = (e) => t(p)(e))
                 }, {
-                  default: k(() => [
-                    d(t(ue), { size: "200" })
+                  icon: k(({ iconSize: e }) => [
+                    d(t(ie), { size: e }, null, 8, ["size"])
                   ]),
                   _: 1
                 }, 8, ["aria-label", "disabled"])
@@ -320,24 +317,23 @@ const he = {
               placement: "top"
             }, {
               anchor: k(() => [
-                d(t(I), {
+                d(t(x), {
                   id: "nextYearButton",
                   ref: (e) => {
                     e && t(b)(e);
                   },
                   "aria-label": t(H)(),
-                  circle: !0,
                   disabled: t(K),
                   class: "d-datepicker__nav-btn",
                   importance: "clear",
                   kind: "muted",
-                  size: "xs",
+                  size: 100,
                   type: "button",
                   onClick: c[6] || (c[6] = (e) => t(s)(1)),
                   onKeydown: c[7] || (c[7] = (e) => t(p)(e))
                 }, {
-                  default: k(() => [
-                    d(t(ie), { size: "200" })
+                  icon: k(({ iconSize: e }) => [
+                    d(t(ue), { size: e }, null, 8, ["size"])
                   ]),
                   _: 1
                 }, 8, ["aria-label", "disabled"])
@@ -353,15 +349,15 @@ const he = {
   }
 };
 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;
+  const i = E(null), a = E(0), l = E([]), r = new U(), m = N(() => ve(r.currentLocale, n.weekStartsOn));
+  I(() => n.calendarDays, () => {
+    a.value = 0, l.value = [], i.value = null;
   });
   function D(s) {
     return r.$t("DIALTONE_DATEPICKER_SELECT_DAY") + ` ${be(s.value, te, r.currentLocale)}`;
   }
-  function h(s, i) {
-    !l.value.some((A) => A.el === s) && !i.disabled && l.value.push({ el: s, day: i });
+  function h(s, u) {
+    !l.value.some((A) => A.el === s) && !u.disabled && l.value.push({ el: s, day: u });
   }
   function b(s) {
     switch (s.key) {
@@ -370,9 +366,9 @@ function $e(n, o) {
         try {
           v(l.value[a.value].el.$el).focus();
         } catch {
-          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;
+          const u = ke(l.value[a.value + 7].day.value);
+          o("go-to-prev-month"), C(() => {
+            v(l.value[u - 1].el.$el).focus(), a.value += u - 1;
           });
         }
         break;
@@ -381,9 +377,9 @@ function $e(n, o) {
         try {
           v(l.value[a.value].el.$el).focus();
         } catch {
-          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;
+          const u = me(l.value[a.value - 7].day.value);
+          o("go-to-next-month"), C(() => {
+            v(l.value[u - 1].el.$el).focus(), a.value += u - 1;
           });
         }
         break;
@@ -402,20 +398,20 @@ function $e(n, o) {
     }
   }
   function _() {
-    a.value = 0, O(() => {
+    a.value = 0, C(() => {
       v(l.value[a.value].el.$el).focus();
     });
   }
   function p() {
-    O(() => {
+    C(() => {
       a.value = l.value.length - 1, v(l.value[a.value].el.$el).focus();
     });
   }
   function T(s) {
-    s.disabled || (u.value = s.text, o("select-date", s.value));
+    s.disabled || (i.value = s.text, o("select-date", s.value));
   }
   return {
-    selectedDay: u,
+    selectedDay: i,
     weekDays: m,
     dayAriaLabel: D,
     setDayRef: h,
@@ -473,8 +469,8 @@ const Ee = {
        */
     "go-to-prev-month"
   ],
-  setup(n, { expose: o, emit: u }) {
-    const a = n, l = u, {
+  setup(n, { expose: o, emit: i }) {
+    const a = n, l = i, {
       selectedDay: r,
       weekDays: m,
       dayAriaLabel: D,
@@ -488,27 +484,27 @@ const Ee = {
     }), (T, s) => ($(), g("table", Ee, [
       w("thead", null, [
         w("tr", null, [
-          ($(!0), g(B, null, V(t(m), (i) => ($(), g("th", {
-            key: i,
+          ($(!0), g(B, null, V(t(m), (u) => ($(), g("th", {
+            key: u,
             scope: "col",
             class: "d-datepicker__cell d-datepicker__cell--header"
           }, [
             w("span", {
               class: "d-datepicker__weekday",
-              title: i,
-              "aria-label": i
-            }, Y(i), 9, Te)
+              title: u,
+              "aria-label": u
+            }, Y(u), 9, Te)
           ]))), 128))
         ])
       ]),
       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", {
+        ($(!0), g(B, null, V(n.calendarDays, (u, A) => ($(), g("tr", { key: A }, [
+          ($(!0), g(B, null, V(u.days, (f, M) => ($(), g("td", {
             key: A + M,
             class: "d-datepicker__cell",
             role: "listbox"
           }, [
-            d(t(I), {
+            d(t(x), {
               ref_for: !0,
               ref: (y) => {
                 y && t(h)(y, f);
@@ -517,8 +513,8 @@ const Ee = {
                 "d-datepicker__day--disabled": f.disabled,
                 "d-datepicker__day--selected": t(r) ? f.text === t(r) && !f.disabled : f.selected
               }]),
-              circle: !0,
-              size: "sm",
+              size: 200,
+              kind: "muted",
               importance: "clear",
               disabled: f.disabled,
               type: "button",
@@ -538,7 +534,9 @@ const Ee = {
       ])
     ]));
   }
-}, ge = { class: "d-datepicker__hd" }, we = { class: "d-datepicker__bd" }, Ke = {
+}, ge = { class: "d-datepicker__hd" }, we = { class: "d-datepicker__bd" }, Ke = /* @__PURE__ */ Object.assign({
+  name: "DtDatepicker"
+}, {
   __name: "datepicker",
   props: {
     /**
@@ -599,7 +597,7 @@ const Ee = {
   ],
   setup(n) {
     const o = E([]);
-    function u(a) {
+    function i(a) {
       o.value = a;
     }
     return Z(() => {
@@ -607,7 +605,7 @@ const Ee = {
       pe(v(a.proxy.$el), "datepicker");
     }), (a, l) => ($(), ee(t(R), {
       class: "d-datepicker",
-      gap: "400"
+      gap: "100"
     }, {
       default: k(() => [
         w("div", ge, [
@@ -617,7 +615,7 @@ const Ee = {
             "min-date": n.minDate,
             "max-date": n.maxDate,
             "week-starts-on": n.weekStartsOn,
-            onCalendarDays: u,
+            onCalendarDays: i,
             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"))
@@ -639,7 +637,7 @@ const Ee = {
       _: 1
     }));
   }
-};
+});
 export {
   Ke as default
 };