@dialpad/dialtone-vue 3.150.0 → 3.150.1

package/dist/components/datepicker/datepicker.vue.js

@@ -0,0 +1,154 @@
+import { ref, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode } from "vue";
+import _sfc_main$2 from "./modules/month-year-picker.vue.js";
+import _sfc_main$3 from "./modules/calendar.vue.js";
+import DtStack from "../stack/stack.vue.js";
+const _hoisted_1 = { class: "d-datepicker__hd" };
+const _hoisted_2 = { class: "d-datepicker__bd" };
+const _sfc_main = {
+  __name: "datepicker",
+  props: {
+    /**
+       * Label for the previous month button
+       *
+       * @type {String}
+       * @example 'Previous month'
+       */
+    prevMonthLabel: {
+      type: String,
+      required: true
+    },
+    /**
+       * Label for the next month button
+       *
+       * @type {String}
+       * @example 'Next month'
+       */
+    nextMonthLabel: {
+      type: String,
+      required: true
+    },
+    /**
+       * Label for the previous year button
+       *
+       * @type {String}
+       * @example 'Previous year'
+       */
+    prevYearLabel: {
+      type: String,
+      required: true
+    },
+    /**
+       * Label for the next year button
+       *
+       * @type {String}
+       * @example 'Next year'
+       */
+    nextYearLabel: {
+      type: String,
+      required: true
+    },
+    /**
+       * Label for the select day button
+       *
+       * @type {String}
+       * @example 'Select day'
+       */
+    selectDayLabel: {
+      type: String,
+      required: true
+    },
+    /**
+       * Label for the change to button
+       *
+       * @type {String}
+       * @example 'Change to'
+       */
+    changeToLabel: {
+      type: String,
+      required: true
+    },
+    /**
+       * Locale for the calendar
+       *
+       * @type {String}
+       */
+    locale: {
+      type: String,
+      default: "en-US"
+    },
+    /**
+       * Selected date
+       *
+       * @type {Date}
+       */
+    selectedDate: {
+      type: Date,
+      default: () => /* @__PURE__ */ new Date()
+    }
+  },
+  emits: [
+    /**
+       * Event fired when a date is selected
+       *
+       * @event selected-date
+       * @type {Date}
+       */
+    "selected-date",
+    /**
+       * Event fired when user presses the esc key
+       *
+       * @event close-datepicker
+       */
+    "close-datepicker"
+  ],
+  setup(__props) {
+    const calendarDays = ref([]);
+    function updateCalendarDays(days) {
+      calendarDays.value = days;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(DtStack), {
+        class: "d-datepicker",
+        gap: "400"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            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"])
+          ]),
+          createElementVNode("div", _hoisted_2, [
+            createVNode(_sfc_main$3, {
+              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
+      });
+    };
+  }
+};
+const _sfc_main$1 = _sfc_main;
+export {
+  _sfc_main$1 as default
+};
+//# sourceMappingURL=datepicker.vue.js.map

package/dist/components/datepicker/datepicker.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker.vue.js","sources":["../../../components/datepicker/datepicker.vue"],"sourcesContent":["<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-stack\n    class=\"d-datepicker\"\n    gap=\"400\"\n  >\n    <div class=\"d-datepicker__hd\">\n      <month-year-picker\n        ref=\"monthYearPicker\"\n        :locale=\"locale\"\n        :prev-month-label=\"prevMonthLabel\"\n        :next-month-label=\"nextMonthLabel\"\n        :prev-year-label=\"prevYearLabel\"\n        :next-year-label=\"nextYearLabel\"\n        :change-to-label=\"changeToLabel\"\n        :selected-date=\"selectedDate\"\n        @calendar-days=\"updateCalendarDays\"\n        @focus-first-day=\"$refs.calendar.focusFirstDay()\"\n        @focus-last-day=\"$refs.calendar.focusLastDay()\"\n        @close-datepicker=\"$emit('close-datepicker')\"\n      />\n    </div>\n    <div class=\"d-datepicker__bd\">\n      <calendar\n        ref=\"calendar\"\n        :locale=\"locale\"\n        :calendar-days=\"calendarDays\"\n        :select-day-label=\"selectDayLabel\"\n        @select-date=\"$emit('selected-date', $event)\"\n        @focus-month-year-picker=\"$refs.monthYearPicker.focusMonthYearPicker()\"\n        @close-datepicker=\"$emit('close-datepicker')\"\n        @go-to-next-month=\"$refs.monthYearPicker.goToNextMonth()\"\n        @go-to-prev-month=\"$refs.monthYearPicker.goToPrevMonth()\"\n      />\n    </div>\n  </dt-stack>\n</template>\n\n<script setup>\nimport MonthYearPicker from './modules/month-year-picker.vue';\nimport Calendar from './modules/calendar.vue';\nimport { DtStack } from '@/components/stack';\n\nimport { ref } from 'vue';\n\ndefineProps({\n  /**\n     * Label for the previous month button\n     *\n     * @type {String}\n     * @example 'Previous month'\n     */\n  prevMonthLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n     * Label for the next month button\n     *\n     * @type {String}\n     * @example 'Next month'\n     */\n  nextMonthLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n     * Label for the previous year button\n     *\n     * @type {String}\n     * @example 'Previous year'\n     */\n  prevYearLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n     * Label for the next year button\n     *\n     * @type {String}\n     * @example 'Next year'\n     */\n  nextYearLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n     * Label for the select day button\n     *\n     * @type {String}\n     * @example 'Select day'\n     */\n  selectDayLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n     * Label for the change to button\n     *\n     * @type {String}\n     * @example 'Change to'\n     */\n  changeToLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n     * Locale for the calendar\n     *\n     * @type {String}\n     */\n  locale: {\n    type: String,\n    default: 'en-US',\n  },\n\n  /**\n     * Selected date\n     *\n     * @type {Date}\n     */\n  selectedDate: {\n    type: Date,\n    default: () => (new Date()),\n  },\n});\n\ndefineEmits([\n  /**\n     * Event fired when a date is selected\n     *\n     * @event selected-date\n     * @type {Date}\n     */\n  'selected-date',\n\n  /**\n     * Event fired when user presses the esc key\n     *\n     * @event close-datepicker\n     */\n  'close-datepicker',\n]);\n\nconst calendarDays = ref([]);\n\nfunction updateCalendarDays (days) {\n  calendarDays.value = days;\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsJA,UAAM,eAAe,IAAI,CAAA,CAAE;AAE3B,aAAS,mBAAoB,MAAM;AACjC,mBAAa,QAAQ;AAAA,IACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/datepicker/datepicker_constants.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const WEEK_START = 0;
+const MONTH_FORMAT = "MMMM";
+const INTL_MONTH_FORMAT = "long";
+exports.INTL_MONTH_FORMAT = INTL_MONTH_FORMAT;
+exports.MONTH_FORMAT = MONTH_FORMAT;
+exports.WEEK_START = WEEK_START;
+//# sourceMappingURL=datepicker_constants.cjs.map

package/dist/components/datepicker/datepicker_constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker_constants.cjs","sources":["../../../components/datepicker/datepicker_constants.js"],"sourcesContent":["/**\n * Week start day\n * 0 - Sunday\n * 1 - Monday\n */\nexport const WEEK_START = 0;\n\nexport const MONTH_FORMAT = 'MMMM';\n\nexport const INTL_MONTH_FORMAT = 'long';\n"],"names":[],"mappings":";;AAKY,MAAC,aAAa;AAEd,MAAC,eAAe;AAEhB,MAAC,oBAAoB;;;;"}

package/dist/components/datepicker/datepicker_constants.js

@@ -0,0 +1,9 @@
+const WEEK_START = 0;
+const MONTH_FORMAT = "MMMM";
+const INTL_MONTH_FORMAT = "long";
+export {
+  INTL_MONTH_FORMAT,
+  MONTH_FORMAT,
+  WEEK_START
+};
+//# sourceMappingURL=datepicker_constants.js.map

package/dist/components/datepicker/datepicker_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker_constants.js","sources":["../../../components/datepicker/datepicker_constants.js"],"sourcesContent":["/**\n * Week start day\n * 0 - Sunday\n * 1 - Monday\n */\nexport const WEEK_START = 0;\n\nexport const MONTH_FORMAT = 'MMMM';\n\nexport const INTL_MONTH_FORMAT = 'long';\n"],"names":[],"mappings":"AAKY,MAAC,aAAa;AAEd,MAAC,eAAe;AAEhB,MAAC,oBAAoB;"}

package/dist/components/datepicker/formatUtils.cjs

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function formatLong(date, locale = "default") {
+  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);
+}
+function formatShort(date, locale = "default", showWeekday = true) {
+  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);
+}
+function formatNumerical(date, locale = "default") {
+  return new Intl.DateTimeFormat(locale, { year: "2-digit", month: "2-digit", day: "2-digit" }).format(date);
+}
+exports.formatLong = formatLong;
+exports.formatMedium = formatMedium;
+exports.formatNoYear = formatNoYear;
+exports.formatNumerical = formatNumerical;
+exports.formatShort = formatShort;
+//# sourceMappingURL=formatUtils.cjs.map

package/dist/components/datepicker/formatUtils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatUtils.cjs","sources":["../../../components/datepicker/formatUtils.js"],"sourcesContent":["export function formatLong (date, locale = 'default') {\n  return new Intl.DateTimeFormat(locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }).format(date);\n}\n\nexport function formatMedium (date, locale = 'default') {\n  return new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long', day: 'numeric' }).format(date);\n}\n\nexport function formatShort (date, locale = 'default', showWeekday = true) {\n  const options = showWeekday ? { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' } : { year: 'numeric', month: 'short', day: 'numeric' };\n  return new Intl.DateTimeFormat(locale, options).format(date);\n}\n\nexport function formatNoYear (date, locale = 'default', abbreviated = false) {\n  const monthFormat = abbreviated ? 'short' : 'long';\n  return new Intl.DateTimeFormat(locale, { month: monthFormat, day: 'numeric' }).format(date);\n}\n\nexport function formatNumerical (date, locale = 'default') {\n  return new Intl.DateTimeFormat(locale, { year: '2-digit', month: '2-digit', day: '2-digit' }).format(date);\n}\n\nexport default {\n  formatLong,\n  formatMedium,\n  formatShort,\n  formatNoYear,\n  formatNumerical,\n};\n"],"names":[],"mappings":";;AAAO,SAAS,WAAY,MAAM,SAAS,WAAW;AACpD,SAAO,IAAI,KAAK,eAAe,QAAQ,EAAE,SAAS,QAAQ,MAAM,WAAW,OAAO,QAAQ,KAAK,UAAW,CAAA,EAAE,OAAO,IAAI;AACzH;AAEO,SAAS,aAAc,MAAM,SAAS,WAAW;AACtD,SAAO,IAAI,KAAK,eAAe,QAAQ,EAAE,MAAM,WAAW,OAAO,QAAQ,KAAK,UAAS,CAAE,EAAE,OAAO,IAAI;AACxG;AAEO,SAAS,YAAa,MAAM,SAAS,WAAW,cAAc,MAAM;AACzE,QAAM,UAAU,cAAc,EAAE,SAAS,SAAS,MAAM,WAAW,OAAO,SAAS,KAAK,UAAW,IAAG,EAAE,MAAM,WAAW,OAAO,SAAS,KAAK;AAC9I,SAAO,IAAI,KAAK,eAAe,QAAQ,OAAO,EAAE,OAAO,IAAI;AAC7D;AAEO,SAAS,aAAc,MAAM,SAAS,WAAW,cAAc,OAAO;AAC3E,QAAM,cAAc,cAAc,UAAU;AAC5C,SAAO,IAAI,KAAK,eAAe,QAAQ,EAAE,OAAO,aAAa,KAAK,UAAW,CAAA,EAAE,OAAO,IAAI;AAC5F;AAEO,SAAS,gBAAiB,MAAM,SAAS,WAAW;AACzD,SAAO,IAAI,KAAK,eAAe,QAAQ,EAAE,MAAM,WAAW,OAAO,WAAW,KAAK,UAAS,CAAE,EAAE,OAAO,IAAI;AAC3G;;;;;;"}

package/dist/components/datepicker/formatUtils.js

@@ -0,0 +1,25 @@
+function formatLong(date, locale = "default") {
+  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);
+}
+function formatShort(date, locale = "default", showWeekday = true) {
+  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);
+}
+function formatNumerical(date, locale = "default") {
+  return new Intl.DateTimeFormat(locale, { year: "2-digit", month: "2-digit", day: "2-digit" }).format(date);
+}
+export {
+  formatLong,
+  formatMedium,
+  formatNoYear,
+  formatNumerical,
+  formatShort
+};
+//# sourceMappingURL=formatUtils.js.map

package/dist/components/datepicker/formatUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatUtils.js","sources":["../../../components/datepicker/formatUtils.js"],"sourcesContent":["export function formatLong (date, locale = 'default') {\n  return new Intl.DateTimeFormat(locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }).format(date);\n}\n\nexport function formatMedium (date, locale = 'default') {\n  return new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long', day: 'numeric' }).format(date);\n}\n\nexport function formatShort (date, locale = 'default', showWeekday = true) {\n  const options = showWeekday ? { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' } : { year: 'numeric', month: 'short', day: 'numeric' };\n  return new Intl.DateTimeFormat(locale, options).format(date);\n}\n\nexport function formatNoYear (date, locale = 'default', abbreviated = false) {\n  const monthFormat = abbreviated ? 'short' : 'long';\n  return new Intl.DateTimeFormat(locale, { month: monthFormat, day: 'numeric' }).format(date);\n}\n\nexport function formatNumerical (date, locale = 'default') {\n  return new Intl.DateTimeFormat(locale, { year: '2-digit', month: '2-digit', day: '2-digit' }).format(date);\n}\n\nexport default {\n  formatLong,\n  formatMedium,\n  formatShort,\n  formatNoYear,\n  formatNumerical,\n};\n"],"names":[],"mappings":"AAAO,SAAS,WAAY,MAAM,SAAS,WAAW;AACpD,SAAO,IAAI,KAAK,eAAe,QAAQ,EAAE,SAAS,QAAQ,MAAM,WAAW,OAAO,QAAQ,KAAK,UAAW,CAAA,EAAE,OAAO,IAAI;AACzH;AAEO,SAAS,aAAc,MAAM,SAAS,WAAW;AACtD,SAAO,IAAI,KAAK,eAAe,QAAQ,EAAE,MAAM,WAAW,OAAO,QAAQ,KAAK,UAAS,CAAE,EAAE,OAAO,IAAI;AACxG;AAEO,SAAS,YAAa,MAAM,SAAS,WAAW,cAAc,MAAM;AACzE,QAAM,UAAU,cAAc,EAAE,SAAS,SAAS,MAAM,WAAW,OAAO,SAAS,KAAK,UAAW,IAAG,EAAE,MAAM,WAAW,OAAO,SAAS,KAAK;AAC9I,SAAO,IAAI,KAAK,eAAe,QAAQ,OAAO,EAAE,OAAO,IAAI;AAC7D;AAEO,SAAS,aAAc,MAAM,SAAS,WAAW,cAAc,OAAO;AAC3E,QAAM,cAAc,cAAc,UAAU;AAC5C,SAAO,IAAI,KAAK,eAAe,QAAQ,EAAE,OAAO,aAAa,KAAK,UAAW,CAAA,EAAE,OAAO,IAAI;AAC5F;AAEO,SAAS,gBAAiB,MAAM,SAAS,WAAW;AACzD,SAAO,IAAI,KAAK,eAAe,QAAQ,EAAE,MAAM,WAAW,OAAO,WAAW,KAAK,UAAS,CAAE,EAAE,OAAO,IAAI;AAC3G;"}

package/dist/components/datepicker/modules/calendar.vue.cjs

@@ -0,0 +1,137 @@
+"use strict";
+const vue = require("vue");
+const useCalendar = require("../composables/useCalendar.cjs");
+const button = require("../../button/button.vue.cjs");
+const _hoisted_1 = {
+  class: "d-datepicker__calendar",
+  "aria-labelledby": "calendar-heading"
+};
+const _hoisted_2 = ["title", "aria-label"];
+const _sfc_main = {
+  __name: "calendar",
+  props: {
+    calendarDays: {
+      type: Array,
+      required: true
+    },
+    locale: {
+      type: String,
+      required: true
+    },
+    selectDayLabel: {
+      type: String,
+      required: true
+    }
+  },
+  emits: [
+    /**
+       * Event fired when a date is selected
+       *
+       * @event select-date
+       * @type {Date}
+       */
+    "select-date",
+    /**
+       * Will focus the month and year picker
+       *
+       * @event focus-month-year-picker
+       */
+    "focus-month-year-picker",
+    /**
+       * Will close the datepicker
+       *
+       * @event close-datepicker
+       */
+    "close-datepicker",
+    /**
+       * Will go to the next month
+       *
+       * @event go-to-next-month
+       */
+    "go-to-next-month",
+    /**
+       * Will go to the previous month
+       *
+       * @event go-to-prev-month
+       */
+    "go-to-prev-month"
+  ],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const {
+      selectedDay,
+      weekDays,
+      dayAriaLabel,
+      setDayRef,
+      handleKeyDown,
+      focusFirstDay,
+      selectDay
+    } = useCalendar.useCalendar(props, emits);
+    __expose({
+      focusFirstDay
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("table", _hoisted_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)
+              ]);
+            }), 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(button), {
+                    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))
+        ])
+      ]);
+    };
+  }
+};
+module.exports = _sfc_main;
+//# sourceMappingURL=calendar.vue.cjs.map

package/dist/components/datepicker/modules/calendar.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.vue.cjs","sources":["../../../../components/datepicker/modules/calendar.vue"],"sourcesContent":["<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <table\n    class=\"d-datepicker__calendar\"\n    aria-labelledby=\"calendar-heading\"\n  >\n    <thead>\n      <tr>\n        <th\n          v-for=\"day in weekDays\"\n          :key=\"day\"\n          scope=\"col\"\n          class=\"d-datepicker__cell d-datepicker__cell--header\"\n        >\n          <span\n            class=\"d-datepicker__weekday\"\n            :title=\"day\"\n            :aria-label=\"day\"\n          > {{ day }}</span>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr\n        v-for=\"(week, indexWeek) in calendarDays\"\n        :key=\"indexWeek\"\n      >\n        <td\n          v-for=\"(day, indexDays) in week.days\"\n          :key=\"indexWeek + indexDays\"\n          class=\"d-datepicker__cell\"\n          role=\"listbox\"\n        >\n          <dt-button\n            :ref=\"el => { if (el) setDayRef(el, day) }\"\n            class=\"d-datepicker__day\"\n            :circle=\"true\"\n            size=\"sm\"\n            importance=\"clear\"\n            :disabled=\"!day.currentMonth\"\n            :class=\"{\n              'd-datepicker__day--disabled': !day.currentMonth,\n              'd-datepicker__day--selected': selectedDay\n                ? ((day.text === selectedDay) && day.currentMonth)\n                : day.selected,\n            }\"\n            type=\"button\"\n            :aria-selected=\"!!selectedDay ? ((day.text === selectedDay) && day.currentMonth) : day.selected\"\n            :aria-label=\"dayAriaLabel(day)\"\n            role=\"option\"\n            @click=\"selectDay(day)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            {{ day.text }}\n          </dt-button>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script setup>\nimport { useCalendar } from '@/components/datepicker/composables/useCalendar.js';\nimport { DtButton } from '@/components/button';\n\nconst props = defineProps({\n  calendarDays: {\n    type: Array,\n    required: true,\n  },\n\n  locale: {\n    type: String,\n    required: true,\n  },\n\n  selectDayLabel: {\n    type: String,\n    required: true,\n  },\n});\n\nconst emits = defineEmits([\n  /**\n     * Event fired when a date is selected\n     *\n     * @event select-date\n     * @type {Date}\n     */\n  'select-date',\n\n  /**\n     * Will focus the month and year picker\n     *\n     * @event focus-month-year-picker\n     */\n  'focus-month-year-picker',\n\n  /**\n     * Will close the datepicker\n     *\n     * @event close-datepicker\n     */\n  'close-datepicker',\n\n  /**\n     * Will go to the next month\n     *\n     * @event go-to-next-month\n     */\n  'go-to-next-month',\n\n  /**\n     * Will go to the previous month\n     *\n     * @event go-to-prev-month\n     */\n  'go-to-prev-month',\n]);\n\nconst {\n  selectedDay,\n  weekDays,\n  dayAriaLabel,\n  setDayRef,\n  handleKeyDown,\n  focusFirstDay,\n  selectDay,\n} = useCalendar(props, emits);\n\ndefineExpose({\n  focusFirstDay,\n});\n</script>\n"],"names":["useCalendar"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA,UAAM,QAAQ;AAiBd,UAAM,QAAQ;AAsCd,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAIA,YAAW,YAAC,OAAO,KAAK;AAE5B,aAAa;AAAA,MACX;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/datepicker/modules/calendar.vue.js

@@ -0,0 +1,138 @@
+import { openBlock, createElementBlock, createElementVNode, Fragment, renderList, unref, toDisplayString, createVNode, normalizeClass, withCtx, createTextVNode } from "vue";
+import { useCalendar } from "../composables/useCalendar.js";
+import DtButton from "../../button/button.vue.js";
+const _hoisted_1 = {
+  class: "d-datepicker__calendar",
+  "aria-labelledby": "calendar-heading"
+};
+const _hoisted_2 = ["title", "aria-label"];
+const _sfc_main = {
+  __name: "calendar",
+  props: {
+    calendarDays: {
+      type: Array,
+      required: true
+    },
+    locale: {
+      type: String,
+      required: true
+    },
+    selectDayLabel: {
+      type: String,
+      required: true
+    }
+  },
+  emits: [
+    /**
+       * Event fired when a date is selected
+       *
+       * @event select-date
+       * @type {Date}
+       */
+    "select-date",
+    /**
+       * Will focus the month and year picker
+       *
+       * @event focus-month-year-picker
+       */
+    "focus-month-year-picker",
+    /**
+       * Will close the datepicker
+       *
+       * @event close-datepicker
+       */
+    "close-datepicker",
+    /**
+       * Will go to the next month
+       *
+       * @event go-to-next-month
+       */
+    "go-to-next-month",
+    /**
+       * Will go to the previous month
+       *
+       * @event go-to-prev-month
+       */
+    "go-to-prev-month"
+  ],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const {
+      selectedDay,
+      weekDays,
+      dayAriaLabel,
+      setDayRef,
+      handleKeyDown,
+      focusFirstDay,
+      selectDay
+    } = useCalendar(props, emits);
+    __expose({
+      focusFirstDay
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("table", _hoisted_1, [
+        createElementVNode("thead", null, [
+          createElementVNode("tr", null, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(weekDays), (day) => {
+              return openBlock(), createElementBlock("th", {
+                key: day,
+                scope: "col",
+                class: "d-datepicker__cell d-datepicker__cell--header"
+              }, [
+                createElementVNode("span", {
+                  class: "d-datepicker__weekday",
+                  title: day,
+                  "aria-label": day
+                }, toDisplayString(day), 9, _hoisted_2)
+              ]);
+            }), 128))
+          ])
+        ]),
+        createElementVNode("tbody", null, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.calendarDays, (week, indexWeek) => {
+            return openBlock(), createElementBlock("tr", { key: indexWeek }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(week.days, (day, indexDays) => {
+                return openBlock(), createElementBlock("td", {
+                  key: indexWeek + indexDays,
+                  class: "d-datepicker__cell",
+                  role: "listbox"
+                }, [
+                  createVNode(unref(DtButton), {
+                    ref_for: true,
+                    ref: (el) => {
+                      if (el) unref(setDayRef)(el, day);
+                    },
+                    class: normalizeClass(["d-datepicker__day", {
+                      "d-datepicker__day--disabled": !day.currentMonth,
+                      "d-datepicker__day--selected": unref(selectedDay) ? day.text === unref(selectedDay) && day.currentMonth : day.selected
+                    }]),
+                    circle: true,
+                    size: "sm",
+                    importance: "clear",
+                    disabled: !day.currentMonth,
+                    type: "button",
+                    "aria-selected": !!unref(selectedDay) ? day.text === unref(selectedDay) && day.currentMonth : day.selected,
+                    "aria-label": unref(dayAriaLabel)(day),
+                    role: "option",
+                    onClick: ($event) => unref(selectDay)(day),
+                    onKeydown: _cache[0] || (_cache[0] = ($event) => unref(handleKeyDown)($event))
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(day.text), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["disabled", "class", "aria-selected", "aria-label", "onClick"])
+                ]);
+              }), 128))
+            ]);
+          }), 128))
+        ])
+      ]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=calendar.vue.js.map

package/dist/components/datepicker/modules/calendar.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.vue.js","sources":["../../../../components/datepicker/modules/calendar.vue"],"sourcesContent":["<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <table\n    class=\"d-datepicker__calendar\"\n    aria-labelledby=\"calendar-heading\"\n  >\n    <thead>\n      <tr>\n        <th\n          v-for=\"day in weekDays\"\n          :key=\"day\"\n          scope=\"col\"\n          class=\"d-datepicker__cell d-datepicker__cell--header\"\n        >\n          <span\n            class=\"d-datepicker__weekday\"\n            :title=\"day\"\n            :aria-label=\"day\"\n          > {{ day }}</span>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr\n        v-for=\"(week, indexWeek) in calendarDays\"\n        :key=\"indexWeek\"\n      >\n        <td\n          v-for=\"(day, indexDays) in week.days\"\n          :key=\"indexWeek + indexDays\"\n          class=\"d-datepicker__cell\"\n          role=\"listbox\"\n        >\n          <dt-button\n            :ref=\"el => { if (el) setDayRef(el, day) }\"\n            class=\"d-datepicker__day\"\n            :circle=\"true\"\n            size=\"sm\"\n            importance=\"clear\"\n            :disabled=\"!day.currentMonth\"\n            :class=\"{\n              'd-datepicker__day--disabled': !day.currentMonth,\n              'd-datepicker__day--selected': selectedDay\n                ? ((day.text === selectedDay) && day.currentMonth)\n                : day.selected,\n            }\"\n            type=\"button\"\n            :aria-selected=\"!!selectedDay ? ((day.text === selectedDay) && day.currentMonth) : day.selected\"\n            :aria-label=\"dayAriaLabel(day)\"\n            role=\"option\"\n            @click=\"selectDay(day)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            {{ day.text }}\n          </dt-button>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script setup>\nimport { useCalendar } from '@/components/datepicker/composables/useCalendar.js';\nimport { DtButton } from '@/components/button';\n\nconst props = defineProps({\n  calendarDays: {\n    type: Array,\n    required: true,\n  },\n\n  locale: {\n    type: String,\n    required: true,\n  },\n\n  selectDayLabel: {\n    type: String,\n    required: true,\n  },\n});\n\nconst emits = defineEmits([\n  /**\n     * Event fired when a date is selected\n     *\n     * @event select-date\n     * @type {Date}\n     */\n  'select-date',\n\n  /**\n     * Will focus the month and year picker\n     *\n     * @event focus-month-year-picker\n     */\n  'focus-month-year-picker',\n\n  /**\n     * Will close the datepicker\n     *\n     * @event close-datepicker\n     */\n  'close-datepicker',\n\n  /**\n     * Will go to the next month\n     *\n     * @event go-to-next-month\n     */\n  'go-to-next-month',\n\n  /**\n     * Will go to the previous month\n     *\n     * @event go-to-prev-month\n     */\n  'go-to-prev-month',\n]);\n\nconst {\n  selectedDay,\n  weekDays,\n  dayAriaLabel,\n  setDayRef,\n  handleKeyDown,\n  focusFirstDay,\n  selectDay,\n} = useCalendar(props, emits);\n\ndefineExpose({\n  focusFirstDay,\n});\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA,UAAM,QAAQ;AAiBd,UAAM,QAAQ;AAsCd,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,YAAY,OAAO,KAAK;AAE5B,aAAa;AAAA,MACX;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}