@dialpad/dialtone 9.130.0 → 9.131.0

package/dist/vue3/lib/datepicker/datepicker.js

@@ -1,93 +1,93 @@
-import { ref as b, computed as B, watch as F, onMounted as V, openBlock as E, createBlock as G, unref as e, withCtx as k, createVNode as i, createElementVNode as M, toDisplayString as P, nextTick as N, createElementBlock as g, Fragment as x, renderList as Y, normalizeClass as q, createTextVNode as W, getCurrentInstance as j } from "vue";
+import { ref as E, computed as B, watch as F, onMounted as V, createBlock as G, openBlock as $, unref as e, withCtx as m, createVNode as i, createElementVNode as M, toDisplayString as P, nextTick as N, createElementBlock as g, Fragment as x, renderList as Y, normalizeClass as q, createTextVNode as W, getCurrentInstance as j } from "vue";
 import { DtIconChevronsLeft as J, DtIconChevronLeft as Q, DtIconChevronRight as Z, DtIconChevronsRight as ee } from "@dialpad/dialtone-icons/vue3";
 import { getMonth as K, getYear as S, getDate as te, set as ae, addMonths as ne, subMonths as re } from "date-fns";
-import { getCalendarDays as le, formatMonth as oe, getWeekDayNames as se, formatDate as ce, calculateNextFocusDate as ue, calculatePrevFocusDate as ie } from "./utils.js";
+import { getCalendarDays as le, formatMonth as oe, getWeekDayNames as se, calculateNextFocusDate as ce, calculatePrevFocusDate as ue, formatDate as ie } from "./utils.js";
 import { INTL_MONTH_FORMAT as U, WEEK_START as de } from "./datepicker-constants.js";
-import { returnFirstEl as D, warnIfUnmounted as fe } from "../../common/utils/index.js";
+import { returnFirstEl as p, warnIfUnmounted as fe } from "../../common/utils/index.js";
 import { DialtoneLocalization as z } from "../../localization/index.js";
 import R from "../stack/stack.js";
 import w from "../tooltip/tooltip.js";
 import I from "../button/button.js";
-function ve(d, o) {
-  const s = b(K(d.selectedDate)), t = b(S(d.selectedDate)), n = b(null), r = b(0), m = b([]), v = new z(), T = B(() => le(s.value, t.value, n.value));
-  F(s, () => {
-    l(), o("calendar-days", T.value);
+function ve(d, s) {
+  const c = E(K(d.selectedDate)), t = E(S(d.selectedDate)), n = E(null), r = E(0), D = E([]), v = new z(), b = B(() => le(c.value, t.value, n.value));
+  F(c, () => {
+    l(), s("calendar-days", b.value);
   }, { immediate: !0 }), F(t, () => {
-    l(), o("calendar-days", T.value);
+    l(), s("calendar-days", b.value);
   }, { immediate: !0 });
-  function _(a) {
+  function k(a) {
     return oe(a, U, v.currentLocale);
   }
-  function y(a) {
-    m.value.includes(a) || m.value.push(a);
+  function h(a) {
+    D.value.includes(a) || D.value.push(a);
   }
-  function h() {
-    D(m.value[0].$el).focus();
+  function _() {
+    p(D.value[0].$el).focus();
   }
   function A(a) {
     switch (a.key) {
       case "ArrowLeft":
-        a.preventDefault(), r.value === 0 ? (r.value = 3, D(m.value[r.value].$el).focus()) : (r.value--, D(m.value[r.value].$el).focus());
+        a.preventDefault(), r.value === 0 ? (r.value = 3, p(D.value[r.value].$el).focus()) : (r.value--, p(D.value[r.value].$el).focus());
         break;
       case "ArrowRight":
-        a.preventDefault(), r.value === 3 ? (r.value = 0, D(m.value[r.value].$el).focus()) : (r.value++, D(m.value[r.value].$el).focus());
+        a.preventDefault(), r.value === 3 ? (r.value = 0, p(D.value[r.value].$el).focus()) : (r.value++, p(D.value[r.value].$el).focus());
         break;
       case "ArrowDown":
-        a.preventDefault(), o("focus-first-day");
+        a.preventDefault(), s("focus-first-day");
         break;
       case "Tab":
-        a.preventDefault(), o("focus-first-day");
+        a.preventDefault(), s("focus-first-day");
         break;
       case "Escape":
-        o("close-datepicker");
+        s("close-datepicker");
         break;
     }
   }
   function l() {
     const a = S(d.selectedDate), L = K(d.selectedDate);
-    a !== t.value || L !== s.value ? n.value = null : n.value = te(d.selectedDate);
+    a !== t.value || L !== c.value ? n.value = null : n.value = te(d.selectedDate);
   }
-  function u(a) {
-    (s.value === 0 && a === -1 || s.value === 11 && a === 1) && (t.value += a);
-    const L = ae(d.selectedDate, { month: s.value, year: t.value }), X = a === 1 ? ne(L, 1) : re(L, 1);
-    s.value = K(X);
+  function o(a) {
+    (c.value === 0 && a === -1 || c.value === 11 && a === 1) && (t.value += a);
+    const L = ae(d.selectedDate, { month: c.value, year: t.value }), X = a === 1 ? ne(L, 1) : re(L, 1);
+    c.value = K(X);
   }
-  function p(a) {
+  function T(a) {
     t.value = t.value + a;
   }
   function f() {
-    u(1);
+    o(1);
   }
   function C() {
-    u(-1);
+    o(-1);
   }
-  function $() {
+  function y() {
     return `${v.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${v.$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR")} ${t.value - 1}`;
   }
   function O() {
-    return `${v.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${v.$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH")} ${_(s.value - 1)}`;
+    return `${v.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${v.$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH")} ${k(c.value - 1)}`;
   }
   function H() {
     return `${v.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${v.$t("DIALTONE_DATEPICKER_NEXT_YEAR")} ${t.value + 1}`;
   }
-  function c() {
-    return `${v.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${v.$t("DIALTONE_DATEPICKER_NEXT_MONTH")} ${_(s.value + 1)}`;
+  function u() {
+    return `${v.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${v.$t("DIALTONE_DATEPICKER_NEXT_MONTH")} ${k(c.value + 1)}`;
   }
   return {
-    selectMonth: s,
+    selectMonth: c,
     selectYear: t,
-    formattedMonth: _,
-    setDayRef: y,
-    focusMonthYearPicker: h,
+    formattedMonth: k,
+    setDayRef: h,
+    focusMonthYearPicker: _,
     handleKeyDown: A,
-    changeMonth: u,
-    changeYear: p,
+    changeMonth: o,
+    changeYear: T,
     goToNextMonth: f,
     goToPrevMonth: C,
-    previousYearAriaLabel: $,
+    previousYearAriaLabel: y,
     previousMonthAriaLabel: O,
     nextYearAriaLabel: H,
-    nextMonthAriaLabel: c
+    nextMonthAriaLabel: u
   };
 }
 const pe = {
@@ -128,52 +128,52 @@ const pe = {
        */
     "close-datepicker"
   ],
-  setup(d, { expose: o, emit: s }) {
-    const t = d, n = s, r = new z(), {
-      selectMonth: m,
+  setup(d, { expose: s, emit: c }) {
+    const t = d, n = c, r = new z(), {
+      selectMonth: D,
       selectYear: v,
-      formattedMonth: T,
-      setDayRef: _,
-      focusMonthYearPicker: y,
-      handleKeyDown: h,
+      formattedMonth: b,
+      setDayRef: k,
+      focusMonthYearPicker: h,
+      handleKeyDown: _,
       changeMonth: A,
       changeYear: l,
-      goToNextMonth: u,
-      goToPrevMonth: p,
+      goToNextMonth: o,
+      goToPrevMonth: T,
       previousYearAriaLabel: f,
       previousMonthAriaLabel: C,
-      nextMonthAriaLabel: $,
+      nextMonthAriaLabel: y,
       nextYearAriaLabel: O
     } = ve(t, n);
     return V(() => {
-      y();
-    }), o({
-      focusMonthYearPicker: y,
-      goToNextMonth: u,
-      goToPrevMonth: p
-    }), (H, c) => (E(), G(e(R), {
+      h();
+    }), s({
+      focusMonthYearPicker: h,
+      goToNextMonth: o,
+      goToPrevMonth: T
+    }), (H, u) => ($(), G(e(R), {
       class: "d-datepicker__month-year",
       direction: "row",
       gap: "300"
     }, {
-      default: k(() => [
+      default: m(() => [
         i(e(R), {
           as: "nav",
           class: "d-datepicker__nav",
           direction: "row",
           gap: "200"
         }, {
-          default: k(() => [
+          default: m(() => [
             i(e(w), {
               "fallback-placements": ["top-start", "auto"],
               message: e(r).$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR"),
               placement: "top"
             }, {
-              anchor: k(() => [
+              anchor: m(() => [
                 i(e(I), {
                   id: "prevYearButton",
                   ref: (a) => {
-                    a && e(_)(a);
+                    a && e(k)(a);
                   },
                   "aria-label": e(f)(),
                   circle: !0,
@@ -182,10 +182,10 @@ const pe = {
                   kind: "muted",
                   size: "xs",
                   type: "button",
-                  onClick: c[0] || (c[0] = (a) => e(l)(-1)),
-                  onKeydown: c[1] || (c[1] = (a) => e(h)(a))
+                  onClick: u[0] || (u[0] = (a) => e(l)(-1)),
+                  onKeydown: u[1] || (u[1] = (a) => e(_)(a))
                 }, {
-                  default: k(() => [
+                  default: m(() => [
                     i(e(J), { size: "200" })
                   ]),
                   _: 1
@@ -198,11 +198,11 @@ const pe = {
               message: e(r).$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH"),
               placement: "top"
             }, {
-              anchor: k(() => [
+              anchor: m(() => [
                 i(e(I), {
                   id: "prevMonthButton",
                   ref: (a) => {
-                    a && e(_)(a);
+                    a && e(k)(a);
                   },
                   "aria-label": e(C)(),
                   circle: !0,
@@ -211,10 +211,10 @@ const pe = {
                   kind: "muted",
                   size: "xs",
                   type: "button",
-                  onClick: c[2] || (c[2] = (a) => e(A)(-1)),
-                  onKeydown: c[3] || (c[3] = (a) => e(h)(a))
+                  onClick: u[2] || (u[2] = (a) => e(A)(-1)),
+                  onKeydown: u[3] || (u[3] = (a) => e(_)(a))
                 }, {
-                  default: k(() => [
+                  default: m(() => [
                     i(e(Q), { size: "200" })
                   ]),
                   _: 1
@@ -225,36 +225,36 @@ const pe = {
           ]),
           _: 1
         }),
-        M("div", pe, P(e(T)(e(m))) + " " + P(e(v)), 1),
+        M("div", pe, P(e(b)(e(D))) + " " + P(e(v)), 1),
         i(e(R), {
           as: "nav",
           class: "d-datepicker__nav",
           direction: "row",
           gap: "200"
         }, {
-          default: k(() => [
+          default: m(() => [
             i(e(w), {
               "fallback-placements": ["top-end", "auto"],
               message: e(r).$t("DIALTONE_DATEPICKER_NEXT_MONTH"),
               placement: "top"
             }, {
-              anchor: k(() => [
+              anchor: m(() => [
                 i(e(I), {
                   id: "nextMonthButton",
                   ref: (a) => {
-                    a && e(_)(a);
+                    a && e(k)(a);
                   },
-                  "aria-label": e($)(),
+                  "aria-label": e(y)(),
                   circle: !0,
                   class: "d-datepicker__nav-btn",
                   importance: "clear",
                   kind: "muted",
                   size: "xs",
                   type: "button",
-                  onClick: c[4] || (c[4] = (a) => e(A)(1)),
-                  onKeydown: c[5] || (c[5] = (a) => e(h)(a))
+                  onClick: u[4] || (u[4] = (a) => e(A)(1)),
+                  onKeydown: u[5] || (u[5] = (a) => e(_)(a))
                 }, {
-                  default: k(() => [
+                  default: m(() => [
                     i(e(Z), { size: "200" })
                   ]),
                   _: 1
@@ -267,11 +267,11 @@ const pe = {
               message: e(r).$t("DIALTONE_DATEPICKER_NEXT_YEAR"),
               placement: "top"
             }, {
-              anchor: k(() => [
+              anchor: m(() => [
                 i(e(I), {
                   id: "nextYearButton",
                   ref: (a) => {
-                    a && e(_)(a);
+                    a && e(k)(a);
                   },
                   "aria-label": e(O)(),
                   circle: !0,
@@ -280,10 +280,10 @@ const pe = {
                   kind: "muted",
                   size: "xs",
                   type: "button",
-                  onClick: c[6] || (c[6] = (a) => e(l)(1)),
-                  onKeydown: c[7] || (c[7] = (a) => e(h)(a))
+                  onClick: u[6] || (u[6] = (a) => e(l)(1)),
+                  onKeydown: u[7] || (u[7] = (a) => e(_)(a))
                 }, {
-                  default: k(() => [
+                  default: m(() => [
                     i(e(ee), { size: "200" })
                   ]),
                   _: 1
@@ -299,75 +299,75 @@ const pe = {
     }));
   }
 };
-function me(d, o) {
-  const s = b(null), t = b(0), n = b([]), r = new z(), m = B(() => se(d.locale, de));
+function me(d, s) {
+  const c = E(null), t = E(0), n = E([]), r = new z(), D = B(() => se(d.locale, de));
   F(() => d.calendarDays, () => {
-    t.value = 0, n.value = [], s.value = null;
+    t.value = 0, n.value = [], c.value = null;
   });
   function v(l) {
-    return r.$t("DIALTONE_DATEPICKER_SELECT_DAY") + ` ${ce(l.value, U, r.currentLocale)}`;
+    return r.$t("DIALTONE_DATEPICKER_SELECT_DAY") + ` ${ie(l.value, U, r.currentLocale)}`;
   }
-  function T(l, u) {
-    !n.value.some((p) => p.el === l) && u.currentMonth && n.value.push({ el: l, day: u });
+  function b(l, o) {
+    !n.value.some((T) => T.el === l) && o.currentMonth && n.value.push({ el: l, day: o });
   }
-  function _(l) {
+  function k(l) {
     switch (l.key) {
       case "ArrowUp":
         l.preventDefault(), t.value -= 7;
         try {
-          D(n.value[t.value].el.$el).focus();
+          p(n.value[t.value].el.$el).focus();
         } catch {
-          const p = ie(n.value[t.value + 7].day.value);
-          o("go-to-prev-month"), N(() => {
-            D(n.value[p - 1].el.$el).focus(), t.value += p - 1;
+          const o = ue(n.value[t.value + 7].day.value);
+          s("go-to-prev-month"), N(() => {
+            p(n.value[o - 1].el.$el).focus(), t.value += o - 1;
           });
         }
         break;
       case "ArrowDown":
         l.preventDefault(), t.value += 7;
         try {
-          D(n.value[t.value].el.$el).focus();
+          p(n.value[t.value].el.$el).focus();
         } catch {
-          const p = ue(n.value[t.value - 7].day.value);
-          o("go-to-next-month"), N(() => {
-            D(n.value[p - 1].el.$el).focus(), t.value += p - 1;
+          const o = ce(n.value[t.value - 7].day.value);
+          s("go-to-next-month"), N(() => {
+            p(n.value[o - 1].el.$el).focus(), t.value += o - 1;
           });
         }
         break;
       case "ArrowLeft":
-        l.preventDefault(), t.value > 0 ? (t.value -= 1, D(n.value[t.value].el.$el).focus()) : (o("go-to-prev-month"), h());
+        l.preventDefault(), t.value > 0 ? (t.value -= 1, p(n.value[t.value].el.$el).focus()) : (s("go-to-prev-month"), _());
         break;
       case "ArrowRight":
-        l.preventDefault(), t.value < n.value.length - 1 ? (t.value += 1, D(n.value[t.value].el.$el).focus()) : (o("go-to-next-month"), y());
+        l.preventDefault(), t.value < n.value.length - 1 ? (t.value += 1, p(n.value[t.value].el.$el).focus()) : (s("go-to-next-month"), h());
         break;
       case "Tab":
-        l.preventDefault(), o("focus-month-year-picker");
+        l.preventDefault(), s("focus-month-year-picker");
         break;
       case "Escape":
-        o("close-datepicker");
+        s("close-datepicker");
         break;
     }
   }
-  function y() {
+  function h() {
     t.value = 0, N(() => {
-      D(n.value[t.value].el.$el).focus();
+      p(n.value[t.value].el.$el).focus();
     });
   }
-  function h() {
+  function _() {
     N(() => {
-      t.value = n.value.length - 1, D(n.value[t.value].el.$el).focus();
+      t.value = n.value.length - 1, p(n.value[t.value].el.$el).focus();
     });
   }
   function A(l) {
-    l.currentMonth && (s.value = l.text, o("select-date", l.value));
+    l.currentMonth && (c.value = l.text, s("select-date", l.value));
   }
   return {
-    selectedDay: s,
-    weekDays: m,
+    selectedDay: c,
+    weekDays: D,
     dayAriaLabel: v,
-    setDayRef: T,
-    handleKeyDown: _,
-    focusFirstDay: y,
+    setDayRef: b,
+    handleKeyDown: k,
+    focusFirstDay: h,
     selectDay: A
   };
 }
@@ -415,45 +415,45 @@ const ke = {
        */
     "go-to-prev-month"
   ],
-  setup(d, { expose: o, emit: s }) {
-    const t = d, n = s, {
+  setup(d, { expose: s, emit: c }) {
+    const t = d, n = c, {
       selectedDay: r,
-      weekDays: m,
+      weekDays: D,
       dayAriaLabel: v,
-      setDayRef: T,
-      handleKeyDown: _,
-      focusFirstDay: y,
-      selectDay: h
+      setDayRef: b,
+      handleKeyDown: k,
+      focusFirstDay: h,
+      selectDay: _
     } = me(t, n);
-    return o({
-      focusFirstDay: y
-    }), (A, l) => (E(), g("table", ke, [
+    return s({
+      focusFirstDay: h
+    }), (A, l) => ($(), g("table", ke, [
       M("thead", null, [
         M("tr", null, [
-          (E(!0), g(x, null, Y(e(m), (u) => (E(), g("th", {
-            key: u,
+          ($(!0), g(x, null, Y(e(D), (o) => ($(), g("th", {
+            key: o,
             scope: "col",
             class: "d-datepicker__cell d-datepicker__cell--header"
           }, [
             M("span", {
               class: "d-datepicker__weekday",
-              title: u,
-              "aria-label": u
-            }, P(u), 9, _e)
+              title: o,
+              "aria-label": o
+            }, P(o), 9, _e)
           ]))), 128))
         ])
       ]),
       M("tbody", null, [
-        (E(!0), g(x, null, Y(d.calendarDays, (u, p) => (E(), g("tr", { key: p }, [
-          (E(!0), g(x, null, Y(u.days, (f, C) => (E(), g("td", {
-            key: p + C,
+        ($(!0), g(x, null, Y(d.calendarDays, (o, T) => ($(), g("tr", { key: T }, [
+          ($(!0), g(x, null, Y(o.days, (f, C) => ($(), g("td", {
+            key: T + C,
             class: "d-datepicker__cell",
             role: "listbox"
           }, [
             i(e(I), {
               ref_for: !0,
-              ref: ($) => {
-                $ && e(T)($, f);
+              ref: (y) => {
+                y && e(b)(y, f);
               },
               class: q(["d-datepicker__day", {
                 "d-datepicker__day--disabled": !f.currentMonth,
@@ -467,10 +467,10 @@ const ke = {
               "aria-selected": e(r) ? f.text === e(r) && f.currentMonth : f.selected,
               "aria-label": e(v)(f),
               role: "option",
-              onClick: ($) => e(h)(f),
-              onKeydown: l[0] || (l[0] = ($) => e(_)($))
+              onClick: (y) => e(_)(f),
+              onKeydown: l[0] || (l[0] = (y) => e(k)(y))
             }, {
-              default: k(() => [
+              default: m(() => [
                 W(P(f.text), 1)
               ]),
               _: 2
@@ -509,23 +509,23 @@ const ke = {
     "close-datepicker"
   ],
   setup(d) {
-    const o = b([]);
-    function s(t) {
-      o.value = t;
+    const s = E([]);
+    function c(t) {
+      s.value = t;
     }
     return V(() => {
       const t = j();
-      fe(D(t.proxy.$el), "datepicker");
-    }), (t, n) => (E(), G(e(R), {
+      fe(p(t.proxy.$el), "datepicker");
+    }), (t, n) => ($(), G(e(R), {
       class: "d-datepicker",
       gap: "400"
     }, {
-      default: k(() => [
+      default: m(() => [
         M("div", ye, [
           i(De, {
             ref: "monthYearPicker",
             "selected-date": d.selectedDate,
-            onCalendarDays: s,
+            onCalendarDays: c,
             onFocusFirstDay: n[0] || (n[0] = (r) => t.$refs.calendar.focusFirstDay()),
             onFocusLastDay: n[1] || (n[1] = (r) => t.$refs.calendar.focusLastDay()),
             onCloseDatepicker: n[2] || (n[2] = (r) => t.$emit("close-datepicker"))
@@ -534,7 +534,7 @@ const ke = {
         M("div", $e, [
           i(he, {
             ref: "calendar",
-            "calendar-days": o.value,
+            "calendar-days": s.value,
             onSelectDate: n[3] || (n[3] = (r) => t.$emit("selected-date", r)),
             onFocusMonthYearPicker: n[4] || (n[4] = (r) => t.$refs.monthYearPicker.focusMonthYearPicker()),
             onCloseDatepicker: n[5] || (n[5] = (r) => t.$emit("close-datepicker")),