@czxingyu/xycomponents 0.1.0

package/dist/date-picker/date-picker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,644 @@
+import { resolveSemanticClassNames as e, resolveSemanticStyles as t } from "../core/shared/index.js";
+import { provideXyFormControl as n, useXyFormControl as r } from "../core/control/index.js";
+import { useXyLocale as i } from "../core/locale/index.js";
+import { useOverlayPosition as ee } from "../core/overlay/index.js";
+import a from "../icon/icon.js";
+import te from "../input/input.js";
+import { clampDateToBounds as ne, detectYearQuarterMonthGranularity as re, formatYearQuarterMonthValue as ie, getDatePickerFormat as ae, getMonthRows as oe, getQuarterLabel as se, isDateOutsideBounds as ce, isSamePickerValue as le, normalizeDateForPicker as o, parseDateValue as s, parseFormattedDateValue as ue, parseYearQuarterMonthValue as de, rotateWeekdayLabels as fe, startOfLocaleWeek as pe } from "./utils.js";
+import { Fragment as c, Teleport as me, computed as l, createBlock as he, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as ge, createVNode as p, defineComponent as m, getCurrentInstance as _e, nextTick as h, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as ve, onMounted as ye, openBlock as v, ref as y, renderList as b, renderSlot as x, toDisplayString as S, unref as C, useId as be, watch as xe, withCtx as Se } from "vue";
+import w from "dayjs";
+//#region components/date-picker/date-picker.vue?vue&type=script&setup=true&lang.ts
+var Ce = ["aria-label"], we = ["aria-label", "disabled"], Te = ["aria-label", "disabled"], Ee = {
+	key: 1,
+	class: "xy-date-picker__header-label",
+	"aria-live": "polite"
+}, De = {
+	key: 2,
+	"aria-live": "polite"
+}, Oe = ["aria-label", "disabled"], ke = {
+	key: 0,
+	class: "xy-date-picker__weekdays",
+	"aria-hidden": "true"
+}, Ae = ["aria-label"], je = [
+	"id",
+	"aria-current",
+	"aria-selected",
+	"disabled",
+	"onClick"
+], Me = ["aria-label"], Ne = ["disabled", "onClick"], Pe = [
+	"id",
+	"aria-current",
+	"aria-selected",
+	"disabled",
+	"onClick"
+], Fe = ["aria-label"], Ie = [
+	"id",
+	"aria-current",
+	"aria-selected",
+	"disabled",
+	"onClick"
+], Le = {
+	key: 0,
+	class: "xy-date-picker__presets"
+}, Re = ["onClick"], ze = ["disabled"], Be = /*@__PURE__*/ m({
+	name: "XyDatePicker",
+	__name: "date-picker",
+	props: {
+		allowClear: {
+			type: Boolean,
+			required: !1,
+			default: !0
+		},
+		ariaLabel: {
+			type: String,
+			required: !1,
+			default: ""
+		},
+		autofocus: {
+			type: Boolean,
+			required: !1,
+			default: !1
+		},
+		classNames: {
+			type: [
+				Function,
+				null,
+				Array
+			],
+			required: !1,
+			skipCheck: !0
+		},
+		defaultOpen: {
+			type: Boolean,
+			required: !1,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			required: !1
+		},
+		disabledDate: {
+			type: Function,
+			required: !1
+		},
+		format: {
+			type: String,
+			required: !1
+		},
+		id: {
+			type: String,
+			required: !1
+		},
+		label: {
+			type: String,
+			required: !1
+		},
+		maxDate: {
+			type: null,
+			required: !1
+		},
+		minDate: {
+			type: null,
+			required: !1
+		},
+		modelValue: {
+			type: String,
+			required: !1,
+			default: ""
+		},
+		open: {
+			type: Boolean,
+			required: !1
+		},
+		picker: {
+			type: String,
+			required: !1,
+			default: "date"
+		},
+		placeholder: {
+			type: String,
+			required: !1
+		},
+		placement: {
+			type: String,
+			required: !1,
+			default: "bottomLeft"
+		},
+		presets: {
+			type: Array,
+			required: !1,
+			default: () => []
+		},
+		readonly: {
+			type: Boolean,
+			required: !1
+		},
+		showToday: {
+			type: Boolean,
+			required: !1,
+			default: !0
+		},
+		size: {
+			type: String,
+			required: !1
+		},
+		status: {
+			type: String,
+			required: !1
+		},
+		styles: {
+			type: [
+				Function,
+				null,
+				Array
+			],
+			required: !1,
+			skipCheck: !0
+		},
+		valueFormat: {
+			type: String,
+			required: !1
+		},
+		variant: {
+			type: String,
+			required: !1,
+			default: "outlined"
+		}
+	},
+	emits: [
+		"blur",
+		"change",
+		"clear",
+		"focus",
+		"open-change",
+		"panel-change",
+		"panelChange",
+		"update:modelValue",
+		"update:open"
+	],
+	setup(m, { expose: Be, emit: Ve }) {
+		let T = m, E = Ve, D = r(() => T);
+		n({
+			describedBy: D.describedBy,
+			disabled: D.disabled,
+			id: D.id,
+			labelledBy: D.labelledBy,
+			readonly: D.readonly,
+			size: D.size,
+			status: D.status
+		});
+		let He = _e(), Ue = y(), O = y(), k = y(), We = y(T.defaultOpen), Ge = be(), Ke = `${Ge}-panel`, A = i(), j = l(() => T.picker === "yearQuarterMonth" ? re(T.modelValue) : null), qe = l(() => T.format ? T.format : T.picker === "yearQuarterMonth" ? A.value.datePicker.yearQuarterMonthDisplayFormat(j.value) : ae(T.picker, T.format, "display")), Je = l(() => T.placeholder ?? A.value.datePicker.placeholder), M = l(() => ae(T.picker, T.valueFormat, "value")), Ye = l(() => fe(A.value.datePicker.weekdayLabels, A.value.datePicker.weekStart)), N = l(() => T.picker === "yearQuarterMonth" ? de(T.modelValue) : ue(T.modelValue, M.value)), P = () => ne(N.value ?? w(), T.minDate, T.maxDate), F = y(P()), I = y(P()), L = y(!1), Xe = l(() => Object.prototype.hasOwnProperty.call(He?.vnode.props ?? {}, "open")), R = l(() => Xe.value ? !!T.open : We.value), z = l(() => e(T.classNames, T)), B = l(() => t(T.styles, T)), Ze = l(() => ({
+			clear: z.value.clear,
+			input: z.value.input,
+			suffix: z.value.suffix
+		})), Qe = l(() => ({
+			clear: B.value.clear,
+			input: B.value.input,
+			suffix: B.value.suffix
+		})), { overlayStyle: $e, updatePositionAfterRender: V } = ee({
+			offset: 4,
+			open: R,
+			overlayRef: k,
+			placement: T.placement,
+			triggerRef: Ue
+		}), et = l(() => N.value?.format(qe.value) ?? ""), tt = l(() => {
+			let e = pe(F.value.startOf("month"), A.value.datePicker.weekStart);
+			return Array.from({ length: 42 }, (t, n) => e.add(n, "day"));
+		}), nt = l(() => Array.from({ length: 12 }, (e, t) => F.value.startOf("year").month(t))), rt = l(() => Array.from({ length: 4 }, (e, t) => F.value.startOf("year").quarter(t + 1))), H = l(() => {
+			let e = Math.floor(F.value.year() / 12) * 12;
+			return Array.from({ length: 12 }, (t, n) => F.value.year(e + n).startOf("year"));
+		}), it = l(() => T.picker === "month" ? nt.value : T.picker === "quarter" ? rt.value : T.picker === "year" ? H.value : tt.value), at = l(() => R.value ? W(I.value) : void 0), U = l(() => T.picker === "yearQuarterMonth" ? `${F.value.year()}` : T.picker === "year" ? `${H.value[0]?.year()} - ${H.value[11]?.year()}` : T.picker === "month" || T.picker === "quarter" ? A.value.datePicker.yearLabel(F.value.year()) : A.value.datePicker.yearMonthLabel(F.value.year(), F.value.month() + 1)), ot = l(() => ({
+			...$e.value,
+			minWidth: "280px"
+		})), st = l(() => oe(F.value)), ct = l(() => T.picker === "month" || T.picker === "quarter" || T.picker === "year" || T.picker === "yearQuarterMonth"), lt = l(() => ct.value ? "double-left-outlined" : "left-outlined"), ut = l(() => ct.value ? "double-right-outlined" : "right-outlined"), dt = l(() => T.showToday && (T.picker === "date" || T.picker === "week") || T.presets.length > 0);
+		function W(e) {
+			return `${Ge}-cell-${T.picker}-${e.format("YYYY-MM-DD")}`;
+		}
+		function ft(e) {
+			return (T.picker === "date" || T.picker === "week") && e.month() !== F.value.month();
+		}
+		function G(e) {
+			let t = o(e, T.picker);
+			return ce(t, T.picker, T.minDate, T.maxDate) || !!T.disabledDate?.(t);
+		}
+		function K(e, t) {
+			let n = o(e, t);
+			return ce(n, t, T.minDate, T.maxDate) || !!T.disabledDate?.(n);
+		}
+		function pt(e) {
+			return T.picker !== "yearQuarterMonth" || !N.value || j.value !== "quarter" ? !1 : N.value.year() === F.value.year() && N.value.quarter() === e;
+		}
+		function mt(e) {
+			return T.picker !== "yearQuarterMonth" || !N.value || j.value !== "month" ? !1 : e.isSame(N.value, "month");
+		}
+		function ht() {
+			return T.picker !== "yearQuarterMonth" || !N.value || j.value !== "year" ? !1 : N.value.year() === F.value.year();
+		}
+		function gt(e) {
+			return F.value.startOf("year").quarter(e);
+		}
+		function q(e) {
+			return le(e, N.value, T.picker);
+		}
+		function _t(e) {
+			return e.isSame(e.startOf("week"), "day");
+		}
+		function vt(e) {
+			return e.isSame(e.endOf("week"), "day");
+		}
+		function yt(e) {
+			return le(e, I.value, T.picker);
+		}
+		function J(e) {
+			let t = w();
+			return T.picker === "month" || T.picker === "yearQuarterMonth" ? e.isSame(t, "month") : T.picker === "quarter" ? e.isSame(t, "quarter") : T.picker === "year" ? e.isSame(t, "year") : e.isSame(t, "day");
+		}
+		function bt(e) {
+			return T.picker === "month" ? xt(e) : T.picker === "quarter" ? se(e) : T.picker === "year" ? String(e.year()) : String(e.date());
+		}
+		function xt(e) {
+			return A.value.datePicker.monthLabels[e.month()] ?? String(e.month() + 1);
+		}
+		function Y() {
+			let e = P();
+			F.value = e, I.value = $(e, 1);
+		}
+		function X(e, t = !1) {
+			e && (D.disabled.value || D.readonly.value) || R.value !== e && (Xe.value || (We.value = e), E("update:open", e), E("open-change", e), e ? (Y(), h(V)) : (L.value = !1, t && h(() => O.value?.focus())));
+		}
+		function Z(e, t) {
+			let n = o(e, t);
+			if (K(n, t)) return;
+			let r = ie(n, t);
+			I.value = n, E("update:modelValue", r), E("change", r), D.notifyChange(r), X(!1, !0);
+		}
+		function St() {
+			Z(F.value.startOf("year"), "year");
+		}
+		function Q(e) {
+			if (T.picker === "yearQuarterMonth") {
+				Z(e, "month");
+				return;
+			}
+			let t = o(e, T.picker);
+			if (G(t)) return;
+			let n = t.format(M.value);
+			I.value = t, E("update:modelValue", n), E("change", n), D.notifyChange(n), X(!1, !0);
+		}
+		function Ct() {
+			E("update:modelValue", ""), E("change", ""), E("clear"), D.notifyChange("");
+		}
+		function wt(e) {
+			return T.picker === "yearQuarterMonth" ? F.value.add(e, "year") : T.picker === "year" ? F.value.add(e * 12, "year") : T.picker === "month" || T.picker === "quarter" ? F.value.add(e, "year") : F.value.add(e, "month");
+		}
+		function Tt(e) {
+			if (T.picker === "yearQuarterMonth") return [e.startOf("year"), e.endOf("year")];
+			if (T.picker === "year") {
+				let t = Math.floor(e.year() / 12) * 12;
+				return [e.year(t).startOf("year"), e.year(t + 11).endOf("year")];
+			}
+			return T.picker === "month" || T.picker === "quarter" ? [e.startOf("year"), e.endOf("year")] : [e.startOf("month"), e.endOf("month")];
+		}
+		function Et(e) {
+			let [t, n] = Tt(wt(e)), r = s(T.minDate), i = s(T.maxDate);
+			return !(r && n.isBefore(r, "day") || i && t.isAfter(i, "day"));
+		}
+		function Dt(e) {
+			Et(e) && (F.value = wt(e), I.value = $(F.value, e), E("panelChange", F.value, T.picker), E("panel-change", F.value, T.picker));
+		}
+		function Ot(e) {
+			let t = typeof e.value == "function" ? e.value() : e.value;
+			if (T.picker === "yearQuarterMonth" && typeof t == "string") {
+				let e = de(t);
+				if (e) {
+					let n = re(t);
+					n && Z(e, n);
+					return;
+				}
+			}
+			let n = typeof t == "string" ? ue(t, M.value) ?? s(t) : s(t);
+			n && Q(n);
+		}
+		function $(e, t) {
+			let n = o(e, T.picker), r = T.picker === "yearQuarterMonth" ? "month" : T.picker === "year" ? "year" : T.picker === "quarter" ? "quarter" : T.picker === "month" ? "month" : "day";
+			for (let e = 0; e < 400; e += 1) {
+				if (T.picker === "yearQuarterMonth") {
+					if (!K(n, "month")) return n;
+				} else if (!G(n)) return n;
+				n = n.add(t, r);
+			}
+			return o(e, T.picker);
+		}
+		function kt(e) {
+			if (T.picker === "year") {
+				let t = Math.floor(F.value.year() / 12);
+				Math.floor(e.year() / 12) !== t && (F.value = e);
+			} else T.picker === "month" || T.picker === "quarter" ? e.year() !== F.value.year() && (F.value = e) : e.isSame(F.value, "month") || (F.value = e);
+		}
+		function At(e, t) {
+			let n = e < 0 ? -1 : 1, r = $(I.value.add(e, t), n);
+			I.value = r, kt(r), L.value = !0, h(V);
+		}
+		function jt(e) {
+			let t;
+			if (T.picker === "year") {
+				let n = Math.floor(F.value.year() / 12) * 12;
+				t = F.value.year(e === "start" ? n : n + 11);
+			} else t = T.picker === "quarter" ? F.value.quarter(e === "start" ? 1 : 4) : T.picker === "month" ? F.value.month(e === "start" ? 0 : 11) : I.value[e === "start" ? "startOf" : "endOf"]("week");
+			I.value = $(t, e === "start" ? 1 : -1), kt(I.value), L.value = !0;
+		}
+		function Mt(e) {
+			if (e.key === "Tab") {
+				X(!1);
+				return;
+			}
+			if (e.key === "Escape" && R.value) {
+				e.preventDefault(), X(!1, !0);
+				return;
+			}
+			if (!R.value) {
+				(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), X(!0));
+				return;
+			}
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault(), Q(I.value);
+				return;
+			}
+			if (e.key === "Home" || e.key === "End") {
+				e.preventDefault(), jt(e.key === "Home" ? "start" : "end");
+				return;
+			}
+			if (e.key === "PageUp" || e.key === "PageDown") {
+				e.preventDefault();
+				let t = e.key === "PageUp" ? -1 : 1;
+				At(T.picker === "year" ? t * 12 : t, T.picker === "date" || T.picker === "week" ? "month" : "year");
+				return;
+			}
+			let t = T.picker === "quarter" ? 2 : T.picker === "date" || T.picker === "week" ? 7 : 3, n = T.picker === "year" ? "year" : T.picker === "quarter" ? "quarter" : T.picker === "month" ? "month" : "day", r = e.key === "ArrowLeft" ? -1 : e.key === "ArrowRight" ? 1 : e.key === "ArrowUp" ? -t : e.key === "ArrowDown" ? t : 0;
+			r && (e.preventDefault(), At(r, n));
+		}
+		function Nt(e) {
+			e.target.closest(".xy-input__clear") || X(!0);
+		}
+		function Pt(e) {
+			E("focus", e);
+		}
+		function Ft(e) {
+			h(() => {
+				let t = document.activeElement;
+				k.value?.contains(t) || (E("blur", e), D.notifyBlur(e));
+			});
+		}
+		function It(e) {
+			let t = e.target;
+			Ue.value?.contains(t) || k.value?.contains(t) || X(!1);
+		}
+		return ye(() => {
+			document.addEventListener("pointerdown", It), T.autofocus && O.value?.focus(), R.value && (Y(), h(V));
+		}), ve(() => document.removeEventListener("pointerdown", It)), xe([
+			N,
+			() => T.picker,
+			() => T.minDate,
+			() => T.maxDate
+		], () => {
+			R.value || Y();
+		}), xe(R, (e) => {
+			e && (Y(), h(V));
+		}), Be({
+			blur: () => O.value?.blur(),
+			focus: (e) => O.value?.focus(e),
+			get nativeElement() {
+				return O.value?.input;
+			}
+		}), (e, t) => (v(), d(c, null, [f("span", {
+			ref_key: "triggerRef",
+			ref: Ue,
+			class: g(["xy-date-picker", [
+				{
+					"xy-date-picker--disabled": C(D).disabled.value,
+					"xy-date-picker--open": R.value,
+					"xy-date-picker--readonly": C(D).readonly.value
+				},
+				`xy-date-picker--${C(D).size.value}`,
+				z.value.root
+			]]),
+			style: _(B.value.root),
+			onClick: Nt
+		}, [p(te, {
+			ref_key: "inputRef",
+			ref: O,
+			"allow-clear": m.allowClear,
+			"aria-activedescendant": at.value,
+			"aria-controls": Ke,
+			"aria-expanded": R.value,
+			"aria-haspopup": "grid",
+			"aria-label": m.ariaLabel || m.label || (C(D).labelledBy.value ? void 0 : Je.value),
+			"aria-labelledby": m.ariaLabel || m.label ? void 0 : C(D).labelledBy.value,
+			"class-names": Ze.value,
+			disabled: C(D).disabled.value,
+			id: C(D).id.value,
+			"input-readonly": "",
+			"model-value": et.value,
+			placeholder: Je.value,
+			readonly: C(D).readonly.value,
+			role: "combobox",
+			size: C(D).size.value,
+			status: C(D).status.value,
+			styles: Qe.value,
+			variant: m.variant,
+			onBlur: Ft,
+			onClear: Ct,
+			onFocus: Pt,
+			onKeydown: Mt
+		}, {
+			suffix: Se(() => [x(e.$slots, "suffix", {}, () => [p(a, {
+				class: "xy-date-picker__calendar",
+				name: "calendar-outlined",
+				size: 14,
+				"aria-hidden": "true"
+			})], !0)]),
+			_: 3
+		}, 8, [
+			"allow-clear",
+			"aria-activedescendant",
+			"aria-expanded",
+			"aria-label",
+			"aria-labelledby",
+			"class-names",
+			"disabled",
+			"id",
+			"model-value",
+			"placeholder",
+			"readonly",
+			"size",
+			"status",
+			"styles",
+			"variant"
+		])], 6), (v(), he(me, { to: "body" }, [R.value ? (v(), d("div", {
+			key: 0,
+			id: Ke,
+			ref_key: "panelRef",
+			ref: k,
+			class: g(["xy-date-picker__panel", [z.value.panel, `xy-date-picker__panel--${C(D).size.value}`]]),
+			role: "dialog",
+			"aria-label": C(A).datePicker.calendarPanel(U.value),
+			style: _([ot.value, B.value.panel]),
+			onKeydown: Mt
+		}, [
+			f("header", {
+				class: g(["xy-date-picker__header", z.value.header]),
+				style: _(B.value.header)
+			}, [
+				f("button", {
+					type: "button",
+					class: "xy-date-picker__header-nav",
+					"aria-label": C(A).datePicker.previousPage,
+					disabled: !Et(-1),
+					onClick: t[0] ||= (e) => Dt(-1)
+				}, [p(a, {
+					name: lt.value,
+					size: 12
+				}, null, 8, ["name"])], 8, we),
+				m.picker === "yearQuarterMonth" ? (v(), d("button", {
+					key: 0,
+					type: "button",
+					class: g(["xy-date-picker__year xy-date-picker__year--action", { "is-selected": ht() }]),
+					"aria-label": C(A).datePicker.selectYear,
+					disabled: K(F.value.startOf("year"), "year"),
+					onClick: St
+				}, S(F.value.year()), 11, Te)) : m.picker === "month" || m.picker === "quarter" ? (v(), d("span", Ee, S(C(A).datePicker.yearLabel(F.value.year())), 1)) : (v(), d("strong", De, S(U.value), 1)),
+				f("button", {
+					type: "button",
+					class: "xy-date-picker__header-nav",
+					"aria-label": C(A).datePicker.nextPage,
+					disabled: !Et(1),
+					onClick: t[1] ||= (e) => Dt(1)
+				}, [p(a, {
+					name: ut.value,
+					size: 12
+				}, null, 8, ["name"])], 8, Oe)
+			], 6),
+			m.picker === "date" || m.picker === "week" ? (v(), d("div", ke, [(v(!0), d(c, null, b(Ye.value, (e) => (v(), d("span", { key: e }, S(e), 1))), 128))])) : u("", !0),
+			m.picker === "month" ? (v(), d("div", {
+				key: 1,
+				class: g(["xy-date-picker__grid xy-date-picker__grid--panel xy-date-picker__grid--panel-month", z.value.grid]),
+				role: "grid",
+				"aria-label": U.value,
+				style: _(B.value.grid)
+			}, [(v(!0), d(c, null, b(nt.value, (t) => (v(), d("button", {
+				id: W(t),
+				key: W(t),
+				type: "button",
+				role: "gridcell",
+				"aria-current": J(t) ? "date" : void 0,
+				"aria-selected": q(t),
+				class: g([{
+					"is-active": L.value && yt(t),
+					"is-selected": q(t),
+					"is-today": J(t)
+				}, z.value.cell]),
+				disabled: G(t),
+				style: _(B.value.cell),
+				tabindex: "-1",
+				onClick: (e) => Q(t)
+			}, [x(e.$slots, "cell", {
+				current: J(t),
+				date: t,
+				disabled: G(t),
+				outside: !1,
+				selected: q(t)
+			}, () => [ge(S(xt(t)), 1)], !0)], 14, je))), 128))], 14, Ae)) : m.picker === "yearQuarterMonth" ? (v(), d("div", {
+				key: 2,
+				class: g(["xy-date-picker__grid xy-date-picker__grid--months-yqm", z.value.grid]),
+				role: "grid",
+				"aria-label": U.value,
+				style: _(B.value.grid)
+			}, [(v(!0), d(c, null, b(st.value, (t) => (v(), d(c, { key: t.label }, [f("button", {
+				type: "button",
+				class: g(["xy-date-picker__quarter-label", { "is-selected": pt(t.quarter) }]),
+				disabled: K(gt(t.quarter), "quarter"),
+				onClick: (e) => Z(gt(t.quarter), "quarter")
+			}, S(t.label), 11, Ne), (v(!0), d(c, null, b(t.months, (t) => (v(), d("button", {
+				id: W(t),
+				key: W(t),
+				type: "button",
+				role: "gridcell",
+				"aria-current": J(t) ? "date" : void 0,
+				"aria-selected": mt(t),
+				class: g([{
+					"is-active": L.value && yt(t),
+					"is-selected": mt(t),
+					"is-today": J(t)
+				}, z.value.cell]),
+				disabled: K(t, "month"),
+				style: _(B.value.cell),
+				tabindex: "-1",
+				onClick: (e) => Z(t, "month")
+			}, [x(e.$slots, "cell", {
+				current: J(t),
+				date: t,
+				disabled: K(t, "month"),
+				outside: !1,
+				selected: mt(t)
+			}, () => [ge(S(xt(t)), 1)], !0)], 14, Pe))), 128))], 64))), 128))], 14, Me)) : (v(), d("div", {
+				key: 3,
+				class: g(["xy-date-picker__grid", [{
+					"xy-date-picker__grid--panel": m.picker === "year" || m.picker === "quarter",
+					"xy-date-picker__grid--panel-year": m.picker === "year",
+					"xy-date-picker__grid--panel-quarter": m.picker === "quarter",
+					"xy-date-picker__grid--week": m.picker === "week"
+				}, z.value.grid]]),
+				role: "grid",
+				"aria-label": U.value,
+				style: _(B.value.grid)
+			}, [(v(!0), d(c, null, b(it.value, (t) => (v(), d("button", {
+				id: W(t),
+				key: W(t),
+				type: "button",
+				role: "gridcell",
+				"aria-current": J(t) ? "date" : void 0,
+				"aria-selected": q(t),
+				class: g([{
+					"is-active": L.value && yt(t),
+					"is-outside": ft(t),
+					"is-selected": q(t),
+					"is-today": J(t),
+					"is-week-start": m.picker === "week" && _t(t),
+					"is-week-end": m.picker === "week" && vt(t)
+				}, z.value.cell]),
+				disabled: G(t),
+				style: _(B.value.cell),
+				tabindex: "-1",
+				onClick: (e) => Q(t)
+			}, [x(e.$slots, "cell", {
+				current: J(t),
+				date: t,
+				disabled: G(t),
+				outside: ft(t),
+				selected: q(t)
+			}, () => [ge(S(bt(t)), 1)], !0)], 14, Ie))), 128))], 14, Fe)),
+			dt.value || e.$slots.footer ? (v(), d("footer", {
+				key: 4,
+				class: g(["xy-date-picker__footer", z.value.footer]),
+				style: _(B.value.footer)
+			}, [
+				m.presets.length ? (v(), d("div", Le, [(v(!0), d(c, null, b(m.presets, (e) => (v(), d("button", {
+					key: e.label,
+					type: "button",
+					class: g(z.value.preset),
+					style: _(B.value.preset),
+					onClick: (t) => Ot(e)
+				}, S(e.label), 15, Re))), 128))])) : u("", !0),
+				x(e.$slots, "footer", {}, void 0, !0),
+				m.showToday && (m.picker === "date" || m.picker === "week") ? (v(), d("button", {
+					key: 1,
+					type: "button",
+					disabled: G(C(w)()),
+					onClick: t[2] ||= (e) => Q(C(w)())
+				}, S(C(A).datePicker.today), 9, ze)) : u("", !0)
+			], 6)) : u("", !0)
+		], 46, Ce)) : u("", !0)]))], 64));
+	}
+});
+//#endregion
+export { Be as default };