@dialpad/dialtone/dist/vue3/datepicker-LVDRC6Lf.js

Dialpad's Dialtone design system monorepo

import { returnFirstEl as e, warnIfUnmounted as t } from "./common/utils/index.js";
import { DialtoneLocalization as n } from "./localization/index.js";
import r from "./lib/button/button.js";
import i from "./lib/stack/stack.js";
import a from "./lib/tooltip/tooltip.js";
import { INTL_MONTH_FORMAT as o } from "./lib/datepicker/datepicker-constants.js";
import { calculateNextFocusDate as s, calculatePrevFocusDate as c, formatDate as l, formatMonth as u, getCalendarDays as d, getWeekDayNames as f } from "./lib/datepicker/utils.js";
import { Fragment as p, computed as m, createBlock as h, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as y, getCurrentInstance as b, nextTick as x, normalizeClass as S, onMounted as C, openBlock as w, ref as T, renderList as E, toDisplayString as D, unref as O, watch as k, withCtx as A } from "vue";
import { addMonths as j, endOfMonth as M, getDate as N, getMonth as P, getYear as F, set as I, startOfDay as L, startOfMonth as R, subMonths as z } from "date-fns";
import { DtIconChevronLeft as B, DtIconChevronRight as V, DtIconChevronsLeft as H, DtIconChevronsRight as U } from "@dialpad/dialtone-icons/vue3";
//#region components/datepicker/composables/useMonthYearPicker.js
function W(t, r) {
	let i = T(P(t.selectedDate)), a = T(F(t.selectedDate)), s = T(null), c = T(0), l = T([]), f = new n(), p = m(() => d(i.value, a.value, s.value, t.minDate, t.maxDate, t.weekStartsOn)), h = m(() => t.minDate ? M(z(new Date(a.value, i.value, 1), 1)) < L(t.minDate) : !1), g = m(() => t.maxDate ? R(j(new Date(a.value, i.value, 1), 1)) > L(t.maxDate) : !1), _ = m(() => t.minDate ? M(new Date(a.value - 1, i.value, 1)) < L(t.minDate) : !1), v = m(() => t.maxDate ? R(new Date(a.value + 1, i.value, 1)) > L(t.maxDate) : !1);
	k(i, () => {
		C(), r("calendar-days", p.value);
	}, { immediate: !0 }), k(a, () => {
		C(), r("calendar-days", p.value);
	}, { immediate: !0 }), k(() => t.minDate, () => {
		r("calendar-days", p.value);
	}), k(() => t.maxDate, () => {
		r("calendar-days", p.value);
	});
	function y(e) {
		return u(e, o, f.currentLocale);
	}
	function b(e) {
		l.value.includes(e) || l.value.push(e);
	}
	function x() {
		e(l.value[0].$el).focus();
	}
	function S(t) {
		switch (t.key) {
			case "ArrowLeft":
				t.preventDefault(), c.value === 0 ? (c.value = 3, e(l.value[c.value].$el).focus()) : (c.value--, e(l.value[c.value].$el).focus());
				break;
			case "ArrowRight":
				t.preventDefault(), c.value === 3 ? (c.value = 0, e(l.value[c.value].$el).focus()) : (c.value++, e(l.value[c.value].$el).focus());
				break;
			case "ArrowDown":
				t.preventDefault(), r("focus-first-day");
				break;
			case "Tab":
				t.preventDefault(), r("focus-first-day");
				break;
			case "Escape":
				r("close-datepicker");
				break;
		}
	}
	function C() {
		let e = F(t.selectedDate), n = P(t.selectedDate);
		e !== a.value || n !== i.value ? s.value = null : s.value = N(t.selectedDate);
	}
	function w(e) {
		if (e === -1 && h.value || e === 1 && g.value) return;
		(i.value === 0 && e === -1 || i.value === 11 && e === 1) && (a.value += e);
		let n = I(t.selectedDate, {
			month: i.value,
			year: a.value
		});
		i.value = P(e === 1 ? j(n, 1) : z(n, 1));
	}
	function E(e) {
		e === -1 && _.value || e === 1 && v.value || (a.value += e);
	}
	function D() {
		w(1);
	}
	function O() {
		w(-1);
	}
	function A() {
		return `${f.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${f.$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR")} ${a.value - 1}`;
	}
	function B() {
		return `${f.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${f.$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH")} ${y(i.value - 1)}`;
	}
	function V() {
		return `${f.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${f.$t("DIALTONE_DATEPICKER_NEXT_YEAR")} ${a.value + 1}`;
	}
	function H() {
		return `${f.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${f.$t("DIALTONE_DATEPICKER_NEXT_MONTH")} ${y(i.value + 1)}`;
	}
	return {
		selectMonth: i,
		selectYear: a,
		formattedMonth: y,
		setDayRef: b,
		focusMonthYearPicker: x,
		handleKeyDown: S,
		changeMonth: w,
		changeYear: E,
		goToNextMonth: D,
		goToPrevMonth: O,
		isPrevMonthDisabled: h,
		isNextMonthDisabled: g,
		isPrevYearDisabled: _,
		isNextYearDisabled: v,
		previousYearAriaLabel: A,
		previousMonthAriaLabel: B,
		nextYearAriaLabel: V,
		nextMonthAriaLabel: H
	};
}
//#endregion
//#region components/datepicker/modules/month-year-picker.vue
var G = {
	id: "calendar-heading",
	class: "d-datepicker__month-year-title"
}, K = {
	__name: "month-year-picker",
	props: {
		selectedDate: {
			type: Date,
			required: !0
		},
		minDate: {
			type: Date,
			default: null
		},
		maxDate: {
			type: Date,
			default: null
		},
		weekStartsOn: {
			type: Number,
			default: 0,
			validator: (e) => Number.isInteger(e) && e >= 0 && e <= 6
		}
	},
	emits: [
		"calendar-days",
		"focus-first-day",
		"focus-last-day",
		"close-datepicker"
	],
	setup(e, { expose: t, emit: o }) {
		let s = e, c = o, l = new n(), { selectMonth: u, selectYear: d, formattedMonth: f, setDayRef: p, focusMonthYearPicker: m, handleKeyDown: g, changeMonth: v, changeYear: b, goToNextMonth: x, goToPrevMonth: S, isPrevMonthDisabled: T, isNextMonthDisabled: E, isPrevYearDisabled: k, isNextYearDisabled: j, previousYearAriaLabel: M, previousMonthAriaLabel: N, nextMonthAriaLabel: P, nextYearAriaLabel: F } = W(s, c);
		return C(() => {
			m();
		}), t({
			focusMonthYearPicker: m,
			goToNextMonth: x,
			goToPrevMonth: S
		}), (e, t) => (w(), h(O(i), {
			class: "d-datepicker__month-year",
			direction: "row",
			gap: "300"
		}, {
			default: A(() => [
				y(O(i), {
					as: "nav",
					class: "d-datepicker__nav",
					direction: "row",
					gap: "200"
				}, {
					default: A(() => [y(O(a), {
						"fallback-placements": ["top-start", "auto"],
						message: O(l).$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR"),
						placement: "top"
					}, {
						anchor: A(() => [y(O(r), {
							id: "prevYearButton",
							ref: (e) => {
								e && O(p)(e);
							},
							"aria-label": O(M)(),
							circle: !0,
							disabled: O(k),
							class: "d-datepicker__nav-btn",
							importance: "clear",
							kind: "muted",
							size: "xs",
							type: "button",
							onClick: t[0] || (t[0] = (e) => O(b)(-1)),
							onKeydown: t[1] || (t[1] = (e) => O(g)(e))
						}, {
							default: A(() => [y(O(H), { size: "200" })]),
							_: 1
						}, 8, ["aria-label", "disabled"])]),
						_: 1
					}, 8, ["message"]), y(O(a), {
						"fallback-placements": ["top-start", "auto"],
						message: O(l).$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH"),
						placement: "top"
					}, {
						anchor: A(() => [y(O(r), {
							id: "prevMonthButton",
							ref: (e) => {
								e && O(p)(e);
							},
							"aria-label": O(N)(),
							circle: !0,
							disabled: O(T),
							class: "d-datepicker__nav-btn",
							importance: "clear",
							kind: "muted",
							size: "xs",
							type: "button",
							onClick: t[2] || (t[2] = (e) => O(v)(-1)),
							onKeydown: t[3] || (t[3] = (e) => O(g)(e))
						}, {
							default: A(() => [y(O(B), { size: "200" })]),
							_: 1
						}, 8, ["aria-label", "disabled"])]),
						_: 1
					}, 8, ["message"])]),
					_: 1
				}),
				_("div", G, D(O(f)(O(u))) + " " + D(O(d)), 1),
				y(O(i), {
					as: "nav",
					class: "d-datepicker__nav",
					direction: "row",
					gap: "200"
				}, {
					default: A(() => [y(O(a), {
						"fallback-placements": ["top-end", "auto"],
						message: O(l).$t("DIALTONE_DATEPICKER_NEXT_MONTH"),
						placement: "top"
					}, {
						anchor: A(() => [y(O(r), {
							id: "nextMonthButton",
							ref: (e) => {
								e && O(p)(e);
							},
							"aria-label": O(P)(),
							circle: !0,
							disabled: O(E),
							class: "d-datepicker__nav-btn",
							importance: "clear",
							kind: "muted",
							size: "xs",
							type: "button",
							onClick: t[4] || (t[4] = (e) => O(v)(1)),
							onKeydown: t[5] || (t[5] = (e) => O(g)(e))
						}, {
							default: A(() => [y(O(V), { size: "200" })]),
							_: 1
						}, 8, ["aria-label", "disabled"])]),
						_: 1
					}, 8, ["message"]), y(O(a), {
						"fallback-placements": ["top-end", "auto"],
						message: O(l).$t("DIALTONE_DATEPICKER_NEXT_YEAR"),
						placement: "top"
					}, {
						anchor: A(() => [y(O(r), {
							id: "nextYearButton",
							ref: (e) => {
								e && O(p)(e);
							},
							"aria-label": O(F)(),
							circle: !0,
							disabled: O(j),
							class: "d-datepicker__nav-btn",
							importance: "clear",
							kind: "muted",
							size: "xs",
							type: "button",
							onClick: t[6] || (t[6] = (e) => O(b)(1)),
							onKeydown: t[7] || (t[7] = (e) => O(g)(e))
						}, {
							default: A(() => [y(O(U), { size: "200" })]),
							_: 1
						}, 8, ["aria-label", "disabled"])]),
						_: 1
					}, 8, ["message"])]),
					_: 1
				})
			]),
			_: 1
		}));
	}
};
//#endregion
//#region components/datepicker/composables/useCalendar.js
function q(t, r) {
	let i = T(null), a = T(0), u = T([]), d = new n(), p = m(() => f(t.locale, t.weekStartsOn));
	k(() => t.calendarDays, () => {
		a.value = 0, u.value = [], i.value = null;
	});
	function h(e) {
		return d.$t("DIALTONE_DATEPICKER_SELECT_DAY") + ` ${l(e.value, o, d.currentLocale)}`;
	}
	function g(e, t) {
		!u.value.some((t) => t.el === e) && !t.disabled && u.value.push({
			el: e,
			day: t
		});
	}
	function _(t) {
		switch (t.key) {
			case "ArrowUp":
				t.preventDefault(), a.value -= 7;
				try {
					e(u.value[a.value].el.$el).focus();
				} catch {
					let t = c(u.value[a.value + 7].day.value);
					r("go-to-prev-month"), x(() => {
						e(u.value[t - 1].el.$el).focus(), a.value += t - 1;
					});
				}
				break;
			case "ArrowDown":
				t.preventDefault(), a.value += 7;
				try {
					e(u.value[a.value].el.$el).focus();
				} catch {
					let t = s(u.value[a.value - 7].day.value);
					r("go-to-next-month"), x(() => {
						e(u.value[t - 1].el.$el).focus(), a.value += t - 1;
					});
				}
				break;
			case "ArrowLeft":
				t.preventDefault(), a.value > 0 ? (--a.value, e(u.value[a.value].el.$el).focus()) : (r("go-to-prev-month"), y());
				break;
			case "ArrowRight":
				t.preventDefault(), a.value < u.value.length - 1 ? (a.value += 1, e(u.value[a.value].el.$el).focus()) : (r("go-to-next-month"), v());
				break;
			case "Tab":
				t.preventDefault(), r("focus-month-year-picker");
				break;
			case "Escape":
				r("close-datepicker");
				break;
		}
	}
	function v() {
		a.value = 0, x(() => {
			e(u.value[a.value].el.$el).focus();
		});
	}
	function y() {
		x(() => {
			a.value = u.value.length - 1, e(u.value[a.value].el.$el).focus();
		});
	}
	function b(e) {
		e.disabled || (i.value = e.text, r("select-date", e.value));
	}
	return {
		selectedDay: i,
		weekDays: p,
		dayAriaLabel: h,
		setDayRef: g,
		handleKeyDown: _,
		focusFirstDay: v,
		selectDay: b
	};
}
//#endregion
//#region components/datepicker/modules/calendar.vue
var J = {
	class: "d-datepicker__calendar",
	"aria-labelledby": "calendar-heading"
}, Y = ["title", "aria-label"], X = {
	__name: "calendar",
	props: {
		calendarDays: {
			type: Array,
			required: !0
		},
		weekStartsOn: {
			type: Number,
			default: 0,
			validator: (e) => Number.isInteger(e) && e >= 0 && e <= 6
		}
	},
	emits: [
		"select-date",
		"focus-month-year-picker",
		"close-datepicker",
		"go-to-next-month",
		"go-to-prev-month"
	],
	setup(e, { expose: t, emit: n }) {
		let { selectedDay: i, weekDays: a, dayAriaLabel: o, setDayRef: s, handleKeyDown: c, focusFirstDay: l, selectDay: u } = q(e, n);
		return t({ focusFirstDay: l }), (t, n) => (w(), g("table", J, [_("thead", null, [_("tr", null, [(w(!0), g(p, null, E(O(a), (e) => (w(), g("th", {
			key: e,
			scope: "col",
			class: "d-datepicker__cell d-datepicker__cell--header"
		}, [_("span", {
			class: "d-datepicker__weekday",
			title: e,
			"aria-label": e
		}, D(e), 9, Y)]))), 128))])]), _("tbody", null, [(w(!0), g(p, null, E(e.calendarDays, (e, t) => (w(), g("tr", { key: t }, [(w(!0), g(p, null, E(e.days, (e, a) => (w(), g("td", {
			key: t + a,
			class: "d-datepicker__cell",
			role: "listbox"
		}, [y(O(r), {
			ref_for: !0,
			ref: (t) => {
				t && O(s)(t, e);
			},
			class: S(["d-datepicker__day", {
				"d-datepicker__day--disabled": e.disabled,
				"d-datepicker__day--selected": O(i) ? e.text === O(i) && !e.disabled : e.selected
			}]),
			circle: !0,
			size: "sm",
			importance: "clear",
			disabled: e.disabled,
			type: "button",
			"aria-selected": O(i) ? e.text === O(i) && !e.disabled : e.selected,
			"aria-label": O(o)(e),
			role: "option",
			onClick: (t) => O(u)(e),
			onKeydown: n[0] || (n[0] = (e) => O(c)(e))
		}, {
			default: A(() => [v(D(e.text), 1)]),
			_: 2
		}, 1032, [
			"disabled",
			"class",
			"aria-selected",
			"aria-label",
			"onClick"
		])]))), 128))]))), 128))])]));
	}
}, Z = { class: "d-datepicker__hd" }, Q = { class: "d-datepicker__bd" }, $ = {
	__name: "datepicker",
	props: {
		selectedDate: {
			type: Date,
			default: () => /* @__PURE__ */ new Date()
		},
		minDate: {
			type: Date,
			default: null
		},
		maxDate: {
			type: Date,
			default: null,
			validator: (e, t) => e && t.minDate && e < t.minDate ? (console.warn("[DtDatepicker]: maxDate must be after or equal to minDate."), !1) : !0
		},
		weekStartsOn: {
			type: Number,
			default: 0,
			validator: (e) => Number.isInteger(e) && e >= 0 && e <= 6
		}
	},
	emits: ["selected-date", "close-datepicker"],
	setup(n) {
		let r = T([]);
		function a(e) {
			r.value = e;
		}
		return C(() => {
			t(e(b().proxy.$el), "datepicker");
		}), (e, t) => (w(), h(O(i), {
			class: "d-datepicker",
			gap: "400"
		}, {
			default: A(() => [_("div", Z, [y(K, {
				ref: "monthYearPicker",
				"selected-date": n.selectedDate,
				"min-date": n.minDate,
				"max-date": n.maxDate,
				"week-starts-on": n.weekStartsOn,
				onCalendarDays: a,
				onFocusFirstDay: t[0] || (t[0] = (t) => e.$refs.calendar.focusFirstDay()),
				onFocusLastDay: t[1] || (t[1] = (t) => e.$refs.calendar.focusLastDay()),
				onCloseDatepicker: t[2] || (t[2] = (t) => e.$emit("close-datepicker"))
			}, null, 8, [
				"selected-date",
				"min-date",
				"max-date",
				"week-starts-on"
			])]), _("div", Q, [y(X, {
				ref: "calendar",
				"calendar-days": r.value,
				"week-starts-on": n.weekStartsOn,
				onSelectDate: t[3] || (t[3] = (t) => e.$emit("selected-date", t)),
				onFocusMonthYearPicker: t[4] || (t[4] = (t) => e.$refs.monthYearPicker.focusMonthYearPicker()),
				onCloseDatepicker: t[5] || (t[5] = (t) => e.$emit("close-datepicker")),
				onGoToNextMonth: t[6] || (t[6] = (t) => e.$refs.monthYearPicker.goToNextMonth()),
				onGoToPrevMonth: t[7] || (t[7] = (t) => e.$refs.monthYearPicker.goToPrevMonth())
			}, null, 8, ["calendar-days", "week-starts-on"])])]),
			_: 1
		}));
	}
};
//#endregion
export { $ as t };

//# sourceMappingURL=datepicker-LVDRC6Lf.js.map