vectis-ui 0.1.0 → 0.8.0

package/dist/components/VDatePicker/VDatePicker.vue_vue_type_script_setup_true_lang.js

@@ -1,60 +1,71 @@
-import { useLocale as e, useMessages as t } from "../../i18n/state.js";
+import { useMessages as e, useResolvedLocale as t } from "../../i18n/state.js";
 import n from "../VIcon/VIcon.js";
 import r from "../VButton/VButton.js";
 import i from "../VIconButton/VIconButton.js";
-import { chevron_left as a } from "../VIcon/icons/chevron_left.js";
+import { useAriaLabel as a } from "../../composables/useAriaLabel.js";
+import { chevron_left as o } from "../VIcon/icons/chevron_left.js";
 import { chevron_right as ee } from "../VIcon/icons/chevron_right.js";
 import { clamp as te } from "../../utils/number.js";
 import { resolveMatcher as ne } from "../../utils/matcher.js";
 import { toggleValue as re } from "../../utils/array.js";
 import { arrow_drop_down as ie } from "../VIcon/icons/arrow_drop_down.js";
 import { arrow_drop_up as ae } from "../VIcon/icons/arrow_drop_up.js";
-import { addDays as oe, addMonths as o, buildMonthGrid as se, clampISO as s, compareISO as c, daysInMonth as l, firstDayOfWeekFor as ce, formatISO as le, isSameISO as u, isValidISO as ue, isWithin as de, isoOf as d, monthName as fe, monthNamesCompact as pe, parseISO as f, weekdayNames as me } from "../../utils/date.js";
-import { dayStep as he, gridDelta as ge } from "./keyboard.js";
-import { Fragment as p, computed as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as y, defineComponent as b, mergeModels as x, nextTick as S, normalizeStyle as _e, onMounted as ve, openBlock as C, ref as w, renderList as T, renderSlot as E, toDisplayString as D, unref as O, useId as ye, useModel as be, vShow as xe, watch as Se, withCtx as Ce, withDirectives as we } from "vue";
+import { addDays as oe, addMonths as s, buildMonthGrid as se, clampISO as ce, compareISO as c, daysInMonth as le, firstDayOfWeekFor as ue, formatISO as de, isDateAllowed as fe, isSameISO as l, isValidISO as u, isoOf as d, monthName as pe, monthNamesCompact as me, parseISO as f, weekdayNames as he } from "../../utils/date.js";
+import { dayStep as ge, gridDelta as _e } from "./keyboard.js";
+import "../../utils/hostWarns.js";
+import { Fragment as p, computed as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createTextVNode as ve, createVNode as v, defineComponent as y, mergeModels as b, mergeProps as ye, nextTick as x, normalizeStyle as be, onMounted as xe, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useId as Se, useModel as Ce, vShow as we, watch as Te, withCtx as O, withDirectives as Ee } from "vue";
 //#region src/components/VDatePicker/VDatePicker.vue?vue&type=script&setup=true&lang.ts
-var Te = ["data-view", "data-selection"], Ee = { class: "v-date-picker-header" }, De = { class: "v-date-picker-nav" }, Oe = { class: "v-date-picker-nav" }, ke = ["aria-label", "aria-multiselectable"], Ae = {
+var De = [
+	"aria-label",
+	"data-view",
+	"data-selection",
+	"data-disabled",
+	"data-readonly"
+], Oe = { class: "v-date-picker-header" }, ke = { class: "v-date-picker-nav" }, Ae = { class: "v-date-picker-nav" }, je = ["aria-label", "aria-multiselectable"], Me = {
 	class: "v-date-picker-weekdays",
 	role: "row"
-}, je = ["aria-label"], Me = [
+}, Ne = ["aria-label"], Pe = [
 	"aria-selected",
 	"data-in-range",
 	"data-range-start",
 	"data-range-end"
-], Ne = [
+], Fe = [
 	"id",
 	"tabindex",
 	"data-outside",
 	"data-selected",
 	"data-today",
+	"data-unavailable",
+	"disabled",
 	"aria-disabled",
 	"aria-current",
 	"onClick",
 	"onPointerenter",
 	"onFocus"
-], Pe = { class: "v-date-picker-day-num" }, Fe = {
+], Ie = { class: "v-date-picker-day-num" }, Le = {
 	key: 0,
 	class: "v-date-picker-dots",
 	"aria-hidden": "true"
-}, Ie = ["data-disabled"], Le = { class: "v-date-picker-day-num" }, Re = ["aria-label"], ze = [
+}, Re = ["data-disabled"], ze = { class: "v-date-picker-day-num" }, Be = ["aria-label"], Ve = [
 	"id",
 	"tabindex",
 	"data-selected",
 	"aria-selected",
 	"disabled",
 	"onClick"
-], Be = ["aria-label"], Ve = [
+], He = ["aria-label"], Ue = [
 	"id",
 	"tabindex",
 	"data-selected",
 	"aria-selected",
+	"disabled",
 	"onClick"
-], He = {
+], We = {
 	key: 2,
 	class: "v-date-picker-footer"
-}, Ue = /*@__PURE__*/ b({
+}, k = /*@__PURE__*/ y({
 	__name: "VDatePicker",
-	props: /*@__PURE__*/ x({
+	props: /*@__PURE__*/ b({
 		selection: { default: "single" },
 		locale: { default: void 0 },
 		firstDayOfWeek: { default: void 0 },
@@ -72,32 +83,43 @@ var Te = ["data-view", "data-selection"], Ee = { class: "v-date-picker-header" }
 			type: Boolean,
 			default: !1
 		},
-		events: { default: void 0 }
+		events: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		label: { default: void 0 }
 	}, {
 		modelValue: { default: null },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ x(["select"], ["update:modelValue"]),
-	setup(b, { expose: x, emit: Ue }) {
-		let k = b, A = be(b, "modelValue"), We = Ue, j = ye(), M = t(), Ge = e(), N = m(() => k.locale ?? Ge.value), P = m(() => k.firstDayOfWeek ?? ce(N.value)), Ke = m(() => me(N.value, P.value, "short")), qe = m(() => me(N.value, P.value, "long")), F = m(() => pe(N.value)), I = m(() => k.selection === "single" && typeof A.value == "string" && ue(A.value) ? A.value : null), L = m(() => k.selection === "range" && A.value && typeof A.value == "object" && !Array.isArray(A.value) ? A.value : {
+	emits: /*@__PURE__*/ b(["select"], ["update:modelValue"]),
+	setup(y, { expose: b, emit: k }) {
+		let A = y, j = Ce(y, "modelValue"), Ge = k, M = Se(), N = e(), Ke = a(() => A.label ?? N.value.datePicker.label), P = t(() => A.locale), F = m(() => A.firstDayOfWeek ?? ue(P.value)), qe = m(() => he(P.value, F.value, "short")), Je = m(() => he(P.value, F.value, "long")), Ye = m(() => me(P.value)), I = m(() => A.selection === "single" && typeof j.value == "string" && u(j.value) ? j.value : null), L = m(() => A.selection === "range" && j.value && typeof j.value == "object" && !Array.isArray(j.value) ? j.value : {
 			start: null,
 			end: null
-		}), R = m(() => k.selection === "multiple" && Array.isArray(A.value) ? A.value : []);
-		function Je() {
-			return I.value ? I.value : L.value.start ? L.value.start : R.value[0] ? R.value[0] : s(le(/* @__PURE__ */ new Date()), k.min, k.max);
+		}), R = m(() => A.selection === "multiple" && Array.isArray(j.value) ? j.value : []);
+		function Xe() {
+			if (I.value) return I.value;
+			let e = L.value.start;
+			return e && u(e) ? e : R.value.find(u) || ce(de(/* @__PURE__ */ new Date()), A.min, A.max);
 		}
-		let z = w(Je()), B = w("days"), V = m(() => f(z.value)?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()), H = m(() => f(z.value)?.getMonth() ?? 0), U = m(() => fe(N.value, H.value, "long")), Ye = m(() => `${U.value} ${V.value}`), Xe = w(null);
-		ve(() => {
-			Xe.value = le(/* @__PURE__ */ new Date());
+		let z = C(Xe()), B = C("days"), V = m(() => f(z.value)?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()), H = m(() => f(z.value)?.getMonth() ?? 0), Ze = m(() => pe(P.value, H.value)), Qe = m(() => `${Ze.value} ${V.value}`), U = C(null);
+		xe(() => {
+			U.value = de(/* @__PURE__ */ new Date());
 		});
-		let Ze = m(() => ne(k.disabledDates)), Qe = m(() => {
+		let $e = m(() => ne(A.disabledDates)), et = m(() => {
 			let e = /* @__PURE__ */ new Map();
-			for (let t of k.events ?? []) {
+			for (let t of A.events ?? []) {
 				let n = e.get(t.date) ?? [];
 				n.push(t), e.set(t.date, n);
 			}
 			return e;
-		}), W = w(null);
+		}), W = C(null);
 		function G(e, t) {
 			return c(e, t) <= 0 ? {
 				start: e,
@@ -108,7 +130,7 @@ var Te = ["data-view", "data-selection"], Ee = { class: "v-date-picker-header" }
 			};
 		}
 		let K = m(() => {
-			if (k.selection !== "range") return {
+			if (A.selection !== "range") return {
 				start: null,
 				end: null
 			};
@@ -120,239 +142,254 @@ var Te = ["data-view", "data-selection"], Ee = { class: "v-date-picker-header" }
 				end: e.end
 			};
 		});
-		function $e(e) {
-			return k.selection === "single" ? u(e, I.value) : k.selection === "multiple" ? R.value.includes(e) : u(e, K.value.start) || u(e, K.value.end);
+		function tt(e) {
+			return A.selection === "single" ? l(e, I.value) : A.selection === "multiple" ? R.value.includes(e) : l(e, K.value.start) || l(e, K.value.end);
 		}
-		function et(e) {
+		function nt(e) {
 			let { start: t, end: n } = K.value;
 			return !!t && !!n && c(e, t) >= 0 && c(e, n) <= 0;
 		}
-		let q = m(() => se(V.value, H.value, P.value).map((e) => {
-			let t = e.adjacent === null, n = t || k.showAdjacentDays || k.selectAdjacentDays, r = t || k.selectAdjacentDays, i = !de(e.iso, k.min, k.max) || Ze.value(e.iso), a = n ? r ? "button" : "static" : "empty";
+		let rt = m(() => se(V.value, H.value, F.value)), it = [], q = m(() => rt.value.map((e) => {
+			let t = e.adjacent === null, n = t || A.showAdjacentDays || A.selectAdjacentDays, r = t || A.selectAdjacentDays, i = !fe(e.iso, A.min, A.max, $e.value), a = n ? r ? "button" : "static" : "empty", o = et.value.get(e.iso) ?? it;
 			return {
 				iso: e.iso,
-				day: f(e.iso)?.getDate() ?? 0,
+				day: e.day,
 				kind: a,
 				inMonth: t,
 				disabled: i,
-				selected: a === "button" && !i && $e(e.iso),
-				rangeStart: k.selection === "range" && u(e.iso, K.value.start),
-				rangeEnd: k.selection === "range" && u(e.iso, K.value.end),
-				inRange: k.selection === "range" && et(e.iso),
-				today: u(e.iso, Xe.value),
-				events: Qe.value.get(e.iso) ?? []
+				selected: a === "button" && !i && tt(e.iso),
+				rangeStart: A.selection === "range" && l(e.iso, K.value.start),
+				rangeEnd: A.selection === "range" && l(e.iso, K.value.end),
+				inRange: A.selection === "range" && nt(e.iso),
+				today: l(e.iso, U.value),
+				events: o,
+				dots: o.length > 3 ? o.slice(0, 3) : o
+			};
+		}));
+		function at(e) {
+			return {
+				iso: e.iso,
+				day: e.day,
+				inMonth: e.inMonth,
+				disabled: e.disabled,
+				selected: e.selected,
+				today: e.today,
+				inRange: e.inRange,
+				events: e.events
 			};
-		})), tt = m(() => {
+		}
+		let ot = m(() => {
 			let e = [];
 			for (let t = 0; t < q.value.length; t += 7) e.push(q.value.slice(t, t + 7));
 			return e;
 		});
 		function J(e, t) {
-			let n = d(e, t, 1), r = d(e, t, l(e, t));
-			return (!k.max || c(n, k.max) <= 0) && (!k.min || c(r, k.min) >= 0);
+			let n = d(e, t, 1), r = d(e, t, le(e, t));
+			return (!A.max || c(n, A.max) <= 0) && (!A.min || c(r, A.min) >= 0);
 		}
-		let nt = m(() => {
-			let e = f(o(z.value, -1));
-			return J(e.getFullYear(), e.getMonth());
-		}), rt = m(() => {
-			let e = f(o(z.value, 1));
-			return J(e.getFullYear(), e.getMonth());
-		}), it = m(() => !k.min || c(d(V.value - 1, 11, 31), k.min) >= 0), at = m(() => !k.max || c(d(V.value + 1, 0, 1), k.max) <= 0), ot = (e) => `${j}-d-${e}`;
-		function Y(e) {
-			S(() => document.getElementById(ot(e))?.focus());
+		let st = m(() => H.value === 0 ? J(V.value - 1, 11) : J(V.value, H.value - 1)), ct = m(() => H.value === 11 ? J(V.value + 1, 0) : J(V.value, H.value + 1)), lt = m(() => !A.min || c(d(V.value - 1, 11, 31), A.min) >= 0), ut = m(() => !A.max || c(d(V.value + 1, 0, 1), A.max) <= 0), dt = (e) => `${M}-d-${e}`;
+		function Y(e, t) {
+			x(() => document.getElementById(dt(e))?.focus(t));
 		}
 		function X(e, t = !1) {
-			z.value = s(e, k.min, k.max), t && B.value === "days" && Y(z.value);
+			A.disabled || (z.value = ce(e, A.min, A.max), t && B.value === "days" && Y(z.value));
 		}
-		function st(e) {
-			X(o(z.value, e));
+		function ft(e) {
+			X(s(z.value, e));
 		}
-		function ct(e) {
-			X(o(z.value, e * 12));
+		function pt(e) {
+			X(s(z.value, e * 12));
 		}
-		function lt(e) {
+		function mt(e) {
 			let t = B.value === e ? "days" : e;
-			B.value = t, t === "months" ? (Z.value = H.value, S(() => Q(H.value)?.focus())) : t === "years" ? ($.value = V.value, S(() => {
-				let e = yt(V.value);
+			B.value = t, t === "months" ? (Z.value = H.value, x(() => bt(H.value)?.focus())) : t === "years" ? (Q.value = V.value, x(() => {
+				let e = Ot(V.value);
 				e?.scrollIntoView?.({ block: "center" }), e?.focus();
 			})) : B.value === "days" && Y(z.value);
 		}
-		function ut(e) {
-			if (!(e.kind !== "button" || e.disabled)) {
-				if (z.value = e.iso, k.selection === "single") A.value = e.iso;
-				else if (k.selection === "multiple") A.value = re(R.value, e.iso).sort(c);
-				else {
-					let t = L.value;
-					!t.start || t.start && t.end ? A.value = {
-						start: e.iso,
-						end: null
-					} : A.value = G(t.start, e.iso);
-				}
-				We("select", A.value);
+		function ht(e) {
+			if (A.disabled || A.readonly || e.kind !== "button" || e.disabled) return;
+			z.value = e.iso;
+			let t;
+			if (A.selection === "single") t = e.iso;
+			else if (A.selection === "multiple") t = re(R.value, e.iso).sort(c);
+			else {
+				let n = L.value;
+				t = !n.start || n.end ? {
+					start: e.iso,
+					end: null
+				} : G(n.start, e.iso);
 			}
+			j.value = t, Ge("select", t);
 		}
-		function dt(e) {
+		function gt(e) {
 			if (e.key === "Enter" || e.key === " ") {
 				e.preventDefault();
 				let t = q.value.find((e) => e.iso === z.value);
-				t && ut(t);
+				t && ht(t);
 				return;
 			}
-			let t = (f(z.value).getDay() - P.value + 7) % 7, n = he(e.key, e.shiftKey, t);
-			n && (e.preventDefault(), X("days" in n ? oe(z.value, n.days) : o(z.value, n.months), !0));
+			let t = (f(z.value).getDay() - F.value + 7) % 7, n = ge(e.key, e.shiftKey, t);
+			n && (e.preventDefault(), X("days" in n ? oe(z.value, n.days) : s(z.value, n.months), !0));
 		}
-		let Z = w(H.value), Q = (e) => document.getElementById(`${j}-m-${e}`);
-		function ft(e) {
-			return J(V.value, e);
+		function _t(e, t) {
+			X(d(e, t, Math.min(f(z.value).getDate(), le(e, t)))), B.value = "days", Y(z.value);
 		}
-		function pt(e) {
-			if (!ft(e)) return;
-			let t = Math.min(f(z.value).getDate(), l(V.value, e));
-			X(d(V.value, e, t)), B.value = "days", Y(z.value);
-		}
-		function mt(e) {
+		function vt(e, t, n, r, i) {
 			if (e.key === "Enter" || e.key === " ") {
-				e.preventDefault(), pt(Z.value);
+				e.preventDefault(), i(n.value);
 				return;
 			}
-			let t = ge(e.key);
-			t !== void 0 && (e.preventDefault(), Z.value = te(Z.value + t, 0, 11), Q(Z.value)?.focus());
+			let a = _e(e.key);
+			a !== void 0 && (e.preventDefault(), n.value = t[te(t.indexOf(n.value) + a, 0, t.length - 1)] ?? n.value, r(n.value)?.focus());
+		}
+		let yt = Array.from({ length: 12 }, (e, t) => t), Z = C(H.value), bt = (e) => document.getElementById(`${M}-m-${e}`);
+		function xt(e) {
+			return J(V.value, e);
 		}
-		let ht = (e) => Array.from({ length: Math.ceil(e.length / 3) }, (t, n) => e.slice(n * 3, n * 3 + 3)), gt = m(() => ht(F.value.map((e, t) => ({
+		function St(e) {
+			xt(e) && _t(V.value, e);
+		}
+		let Ct = (e) => vt(e, yt, Z, bt, St), wt = (e) => Array.from({ length: Math.ceil(e.length / 3) }, (t, n) => e.slice(n * 3, n * 3 + 3)), Tt = m(() => wt(Ye.value.map((e, t) => ({
 			name: e,
 			i: t
-		})))), _t = m(() => {
-			let e = f(k.min)?.getFullYear() ?? V.value - 100, t = f(k.max)?.getFullYear() ?? V.value + 100, n = [];
+		})))), Et = m(() => {
+			let e = f(A.min)?.getFullYear() ?? V.value - 100, t = f(A.max)?.getFullYear() ?? V.value + 100, n = [];
 			for (let r = e; r <= t; r++) n.push(r);
 			return n;
-		}), vt = m(() => ht(_t.value)), $ = w(V.value), yt = (e) => document.getElementById(`${j}-y-${e}`);
-		function bt(e) {
-			let t = H.value;
-			X(d(e, t, Math.min(f(z.value).getDate(), l(e, t)))), B.value = "days", Y(z.value);
-		}
-		function xt(e) {
-			if (e.key === "Enter" || e.key === " ") {
-				e.preventDefault(), bt($.value);
-				return;
-			}
-			let t = ge(e.key);
-			if (t === void 0) return;
-			e.preventDefault();
-			let n = _t.value, r = te(n.indexOf($.value) + t, 0, n.length - 1);
-			$.value = n[r] ?? $.value, yt($.value)?.focus();
-		}
-		Se(() => [
+		}), Dt = m(() => wt(Et.value)), Q = C(V.value), Ot = (e) => document.getElementById(`${M}-y-${e}`), $ = (e) => _t(e, H.value), kt = (e) => vt(e, Et.value, Q, Ot, $);
+		Te(() => [
 			I.value,
 			L.value.start,
 			R.value[0]
 		], () => {
 			let e = I.value ?? L.value.start ?? R.value[0];
-			if (e && ue(e)) {
+			if (e && u(e)) {
 				let t = f(e);
 				(t.getFullYear() !== V.value || t.getMonth() !== H.value) && (z.value = e);
 			}
 		});
-		function St() {
-			B.value = "days", Y(z.value);
+		function At(e) {
+			B.value = "days", Y(z.value, e);
+		}
+		function jt() {
+			B.value = "days", W.value = null, z.value = Xe();
 		}
-		return x({ focus: St }), (e, t) => (C(), g("div", {
+		return b({
+			focus: At,
+			reset: jt
+		}), (e, t) => (S(), g("div", {
 			class: "v-date-picker",
+			role: "group",
+			"aria-label": D(Ke),
 			"data-view": B.value,
-			"data-selection": b.selection,
+			"data-selection": y.selection,
+			"data-disabled": y.disabled ? "" : void 0,
+			"data-readonly": y.readonly ? "" : void 0,
 			onPointerleave: t[6] ||= (e) => W.value = null
 		}, [
-			_("div", Ee, [_("div", De, [
-				y(i, {
-					icon: O(a),
-					label: O(M).datePicker.previousMonth,
+			_("div", Oe, [_("div", ke, [
+				v(i, {
+					label: D(N).datePicker.previousMonth,
 					size: "sm",
-					disabled: !nt.value,
-					onClick: t[0] ||= (e) => st(-1)
-				}, null, 8, [
-					"icon",
-					"label",
-					"disabled"
-				]),
-				y(r, {
+					disabled: y.disabled || !st.value,
+					onClick: t[0] ||= (e) => ft(-1)
+				}, {
+					default: O(() => [v(n, {
+						name: D(o),
+						mirrored: ""
+					}, null, 8, ["name"])]),
+					_: 1
+				}, 8, ["label", "disabled"]),
+				v(r, {
 					variant: "ghost",
 					tone: "neutral",
 					size: "sm",
 					class: "v-date-picker-view-toggle",
+					disabled: y.disabled,
 					"aria-expanded": B.value === "months",
-					"aria-label": U.value,
-					onClick: t[1] ||= (e) => lt("months")
+					"aria-label": Ze.value,
+					onClick: t[1] ||= (e) => mt("months")
 				}, {
-					default: Ce(() => [v(D(F.value[H.value]) + " ", 1), y(n, {
-						name: B.value === "months" ? O(ae) : O(ie),
+					default: O(() => [ve(E(Ye.value[H.value]) + " ", 1), v(n, {
+						name: B.value === "months" ? D(ae) : D(ie),
 						"aria-hidden": "true"
 					}, null, 8, ["name"])]),
 					_: 1
-				}, 8, ["aria-expanded", "aria-label"]),
-				y(i, {
-					icon: O(ee),
-					label: O(M).datePicker.nextMonth,
+				}, 8, [
+					"disabled",
+					"aria-expanded",
+					"aria-label"
+				]),
+				v(i, {
+					label: D(N).datePicker.nextMonth,
 					size: "sm",
-					disabled: !rt.value,
-					onClick: t[2] ||= (e) => st(1)
-				}, null, 8, [
-					"icon",
-					"label",
-					"disabled"
-				])
-			]), _("div", Oe, [
-				y(i, {
-					icon: O(a),
-					label: O(M).datePicker.previousYear,
+					disabled: y.disabled || !ct.value,
+					onClick: t[2] ||= (e) => ft(1)
+				}, {
+					default: O(() => [v(n, {
+						name: D(ee),
+						mirrored: ""
+					}, null, 8, ["name"])]),
+					_: 1
+				}, 8, ["label", "disabled"])
+			]), _("div", Ae, [
+				v(i, {
+					label: D(N).datePicker.previousYear,
 					size: "sm",
-					disabled: !it.value,
-					onClick: t[3] ||= (e) => ct(-1)
-				}, null, 8, [
-					"icon",
-					"label",
-					"disabled"
-				]),
-				y(r, {
+					disabled: y.disabled || !lt.value,
+					onClick: t[3] ||= (e) => pt(-1)
+				}, {
+					default: O(() => [v(n, {
+						name: D(o),
+						mirrored: ""
+					}, null, 8, ["name"])]),
+					_: 1
+				}, 8, ["label", "disabled"]),
+				v(r, {
 					variant: "ghost",
 					tone: "neutral",
 					size: "sm",
 					class: "v-date-picker-view-toggle",
+					disabled: y.disabled,
 					"aria-expanded": B.value === "years",
-					onClick: t[4] ||= (e) => lt("years")
+					onClick: t[4] ||= (e) => mt("years")
 				}, {
-					default: Ce(() => [v(D(V.value) + " ", 1), y(n, {
-						name: B.value === "years" ? O(ae) : O(ie),
+					default: O(() => [ve(E(V.value) + " ", 1), v(n, {
+						name: B.value === "years" ? D(ae) : D(ie),
 						"aria-hidden": "true"
 					}, null, 8, ["name"])]),
 					_: 1
-				}, 8, ["aria-expanded"]),
-				y(i, {
-					icon: O(ee),
-					label: O(M).datePicker.nextYear,
+				}, 8, ["disabled", "aria-expanded"]),
+				v(i, {
+					label: D(N).datePicker.nextYear,
 					size: "sm",
-					disabled: !at.value,
-					onClick: t[5] ||= (e) => ct(1)
-				}, null, 8, [
-					"icon",
-					"label",
-					"disabled"
-				])
+					disabled: y.disabled || !ut.value,
+					onClick: t[5] ||= (e) => pt(1)
+				}, {
+					default: O(() => [v(n, {
+						name: D(ee),
+						mirrored: ""
+					}, null, 8, ["name"])]),
+					_: 1
+				}, 8, ["label", "disabled"])
 			])]),
-			we(_("div", {
+			Ee(_("div", {
 				class: "v-date-picker-grid",
 				role: "grid",
-				"aria-label": Ye.value,
-				"aria-multiselectable": b.selection === "multiple" ? "true" : void 0,
-				onKeydown: dt
-			}, [_("div", Ae, [(C(!0), g(p, null, T(Ke.value, (e, t) => (C(), g("span", {
+				"aria-label": Qe.value,
+				"aria-multiselectable": y.selection === "multiple" ? "true" : void 0,
+				onKeydown: gt
+			}, [_("div", Me, [(S(!0), g(p, null, w(qe.value, (e, t) => (S(), g("span", {
 				key: e,
 				class: "v-date-picker-weekday",
 				role: "columnheader",
-				"aria-label": qe.value[t]
-			}, D(e), 9, je))), 128))]), (C(!0), g(p, null, T(tt.value, (t, n) => (C(), g("div", {
+				"aria-label": Je.value[t]
+			}, E(e), 9, Ne))), 128))]), (S(!0), g(p, null, w(ot.value, (t, n) => (S(), g("div", {
 				key: n,
 				class: "v-date-picker-week",
 				role: "row"
-			}, [(C(!0), g(p, null, T(t, (t) => (C(), g("div", {
+			}, [(S(!0), g(p, null, w(t, (t) => (S(), g("div", {
 				key: t.iso,
 				class: "v-date-picker-cell",
 				role: "gridcell",
@@ -360,59 +397,43 @@ var Te = ["data-view", "data-selection"], Ee = { class: "v-date-picker-header" }
 				"data-in-range": t.inRange ? "" : void 0,
 				"data-range-start": t.rangeStart ? "" : void 0,
 				"data-range-end": t.rangeEnd ? "" : void 0
-			}, [t.kind === "button" ? (C(), g("button", {
+			}, [t.kind === "button" ? (S(), g("button", {
 				key: 0,
-				id: ot(t.iso),
+				id: dt(t.iso),
 				type: "button",
 				class: "v-date-picker-day",
 				tabindex: t.iso === z.value ? 0 : -1,
 				"data-outside": t.inMonth ? void 0 : "",
 				"data-selected": t.selected ? "" : void 0,
 				"data-today": t.today ? "" : void 0,
-				"aria-disabled": t.disabled ? "true" : void 0,
+				"data-unavailable": t.disabled ? "" : void 0,
+				disabled: y.disabled,
+				"aria-disabled": t.disabled || y.readonly ? "true" : void 0,
 				"aria-current": t.today ? "date" : void 0,
-				onClick: (e) => ut(t),
+				onClick: (e) => ht(t),
 				onPointerenter: (e) => W.value = t.iso,
 				onFocus: (e) => W.value = t.iso
-			}, [E(e.$slots, "day", {
-				iso: t.iso,
-				day: t.day,
-				inMonth: t.inMonth,
-				disabled: t.disabled,
-				selected: t.selected,
-				today: t.today,
-				inRange: t.inRange,
-				events: t.events
-			}, () => [_("span", Pe, D(t.day), 1)]), t.events.length ? (C(), g("span", Fe, [(C(!0), g(p, null, T(t.events.slice(0, 3), (e, t) => (C(), g("span", {
+			}, [T(e.$slots, "day", ye({ ref_for: !0 }, at(t)), () => [_("span", Ie, E(t.day), 1)]), t.dots.length ? (S(), g("span", Le, [(S(!0), g(p, null, w(t.dots, (e, t) => (S(), g("span", {
 				key: t,
 				class: "v-date-picker-dot",
-				style: _e(e.color ? { "--date-picker-dot-color": e.color } : void 0)
-			}, null, 4))), 128))])) : h("", !0)], 40, Ne)) : t.kind === "static" ? (C(), g("span", {
+				style: be(e.color ? { "--date-picker-dot-color": e.color } : void 0)
+			}, null, 4))), 128))])) : h("", !0)], 40, Fe)) : t.kind === "static" ? (S(), g("span", {
 				key: 1,
 				class: "v-date-picker-day v-date-picker-day--static",
 				"data-disabled": t.disabled ? "" : void 0
-			}, [E(e.$slots, "day", {
-				iso: t.iso,
-				day: t.day,
-				inMonth: t.inMonth,
-				disabled: t.disabled,
-				selected: t.selected,
-				today: t.today,
-				inRange: t.inRange,
-				events: t.events
-			}, () => [_("span", Le, D(t.day), 1)])], 8, Ie)) : h("", !0)], 8, Me))), 128))]))), 128))], 40, ke), [[xe, B.value === "days"]]),
-			B.value === "months" ? (C(), g("div", {
+			}, [T(e.$slots, "day", ye({ ref_for: !0 }, at(t)), () => [_("span", ze, E(t.day), 1)])], 8, Re)) : h("", !0)], 8, Pe))), 128))]))), 128))], 40, je), [[we, B.value === "days"]]),
+			B.value === "months" ? (S(), g("div", {
 				key: 0,
 				class: "v-date-picker-view",
 				role: "grid",
-				"aria-label": O(M).datePicker.monthPicker,
-				onKeydown: mt
-			}, [(C(!0), g(p, null, T(gt.value, (e, t) => (C(), g("div", {
+				"aria-label": D(N).datePicker.monthPicker,
+				onKeydown: Ct
+			}, [(S(!0), g(p, null, w(Tt.value, (e, t) => (S(), g("div", {
 				key: t,
 				class: "v-date-picker-view-row",
 				role: "row"
-			}, [(C(!0), g(p, null, T(e, ({ name: e, i: t }) => (C(), g("button", {
-				id: `${O(j)}-m-${t}`,
+			}, [(S(!0), g(p, null, w(e, ({ name: e, i: t }) => (S(), g("button", {
+				id: `${D(M)}-m-${t}`,
 				key: e,
 				type: "button",
 				class: "v-date-picker-view-cell",
@@ -420,35 +441,36 @@ var Te = ["data-view", "data-selection"], Ee = { class: "v-date-picker-header" }
 				tabindex: t === Z.value ? 0 : -1,
 				"data-selected": t === H.value ? "" : void 0,
 				"aria-selected": t === H.value ? "true" : void 0,
-				disabled: !ft(t),
-				onClick: (e) => pt(t)
-			}, D(e), 9, ze))), 128))]))), 128))], 40, Re)) : h("", !0),
-			B.value === "years" ? (C(), g("div", {
+				disabled: y.disabled || !xt(t),
+				onClick: (e) => St(t)
+			}, E(e), 9, Ve))), 128))]))), 128))], 40, Be)) : h("", !0),
+			B.value === "years" ? (S(), g("div", {
 				key: 1,
 				class: "v-date-picker-view v-date-picker-view--years",
 				role: "grid",
-				"aria-label": O(M).datePicker.yearPicker,
-				onKeydown: xt
-			}, [(C(!0), g(p, null, T(vt.value, (e, t) => (C(), g("div", {
+				"aria-label": D(N).datePicker.yearPicker,
+				onKeydown: kt
+			}, [(S(!0), g(p, null, w(Dt.value, (e, t) => (S(), g("div", {
 				key: t,
 				class: "v-date-picker-view-row",
 				role: "row"
-			}, [(C(!0), g(p, null, T(e, (e) => (C(), g("button", {
-				id: `${O(j)}-y-${e}`,
+			}, [(S(!0), g(p, null, w(e, (e) => (S(), g("button", {
+				id: `${D(M)}-y-${e}`,
 				key: e,
 				type: "button",
 				class: "v-date-picker-view-cell",
 				role: "gridcell",
-				tabindex: e === $.value ? 0 : -1,
+				tabindex: e === Q.value ? 0 : -1,
 				"data-selected": e === V.value ? "" : void 0,
 				"aria-selected": e === V.value ? "true" : void 0,
-				onClick: (t) => bt(e)
-			}, D(e), 9, Ve))), 128))]))), 128))], 40, Be)) : h("", !0),
-			e.$slots.footer ? (C(), g("div", He, [E(e.$slots, "footer")])) : h("", !0)
-		], 40, Te));
+				disabled: y.disabled,
+				onClick: (t) => $(e)
+			}, E(e), 9, Ue))), 128))]))), 128))], 40, He)) : h("", !0),
+			e.$slots.footer ? (S(), g("div", We, [T(e.$slots, "footer")])) : h("", !0)
+		], 40, De));
 	}
 });
 //#endregion
-export { Ue as default };
+export { k as default };
 
 //# sourceMappingURL=VDatePicker.vue_vue_type_script_setup_true_lang.js.map