morya-ui 0.3.8 → 0.4.0

package/dist/calendar/index.js

@@ -0,0 +1,304 @@
+import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
+import { a as t, o as n, s as r } from "../dateUtils-D8qKPhos.js";
+import { t as i } from "../Segmented-BRMSmXCl.js";
+import { t as a } from "../Select-DzfyO0FE.js";
+import { n as ee, t as te } from "../locale-Dnk0UIie.js";
+import "./style.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, guardReactiveProps as ne, mergeProps as m, normalizeClass as h, normalizeProps as g, openBlock as _, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, useAttrs as C, useSlots as w, watch as T } from "vue";
+//#region src/components/Calendar/calendarUtils.ts
+function E(e, t) {
+	return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
+}
+function D(e, t) {
+	return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth();
+}
+function re(e) {
+	let t = n(e);
+	t.setDate(t.getDate() + 4 - (t.getDay() || 7));
+	let r = new Date(t.getFullYear(), 0, 1);
+	return Math.ceil(((t.getTime() - r.getTime()) / 864e5 + 1) / 7);
+}
+function O(e, t, r) {
+	let i = new Date(t, r + 1, 0).getDate(), a = Math.min(e.getDate(), i);
+	return n(new Date(t, r, a));
+}
+//#endregion
+//#region src/components/Calendar/Calendar.vue?vue&type=script&setup=true&lang.ts
+var ie = { class: "m-calendar__header" }, ae = { class: "m-calendar__header-main" }, oe = ["aria-label"], se = {
+	class: "m-calendar__weekdays",
+	role: "row"
+}, ce = {
+	key: 0,
+	class: "m-calendar__week-label",
+	"aria-hidden": "true"
+}, le = {
+	key: 0,
+	class: "m-calendar__week-num",
+	role: "rowheader"
+}, ue = [
+	"disabled",
+	"aria-label",
+	"aria-selected",
+	"onClick"
+], de = { class: "m-calendar__cell-value" }, fe = {
+	key: 0,
+	class: "m-calendar__cell-content"
+}, pe = ["aria-label"], me = { class: "m-calendar__months" }, k = [
+	"disabled",
+	"aria-label",
+	"aria-selected",
+	"onClick"
+], A = { class: "m-calendar__cell-value" }, j = {
+	key: 0,
+	class: "m-calendar__cell-content"
+}, M = /* @__PURE__ */ p({
+	inheritAttrs: !1,
+	__name: "Calendar",
+	props: {
+		pt: {},
+		modelValue: { default: null },
+		mode: {},
+		fullscreen: {
+			type: Boolean,
+			default: !0
+		},
+		showWeek: {
+			type: Boolean,
+			default: !1
+		},
+		disabledDate: {},
+		validRange: {}
+	},
+	emits: [
+		"update:modelValue",
+		"update:mode",
+		"select",
+		"panelChange",
+		"change"
+	],
+	setup(p, { emit: M }) {
+		let N = p, P = M, F = C(), I = w(), L = ee(), { rootAttrs: R } = e(F, () => N.pt), z = v("month"), B = v(n(/* @__PURE__ */ new Date())), V = s(() => N.mode ?? z.value), H = s(() => {
+			let e = t(N.modelValue);
+			return e ? n(e.date) : null;
+		}), U = s(() => n(/* @__PURE__ */ new Date())), W = s(() => {
+			if (!N.validRange) return {
+				start: null,
+				end: null
+			};
+			let e = t(N.validRange[0])?.date ?? null, r = t(N.validRange[1])?.date ?? null;
+			return {
+				start: e ? n(e) : null,
+				end: r ? n(r) : null
+			};
+		});
+		function he() {
+			let e = H.value ?? U.value;
+			B.value = n(e);
+		}
+		T(() => N.modelValue, he, { immediate: !0 });
+		function G(e) {
+			let t = n(e);
+			if (N.disabledDate?.(t)) return !0;
+			let { start: r, end: i } = W.value;
+			return !!(r && t < r || i && t > i);
+		}
+		function ge(e) {
+			return N.modelValue instanceof Date ? n(e) : r(n(e));
+		}
+		function K(e, t) {
+			P("panelChange", n(e), t);
+		}
+		function q(e) {
+			let t = e;
+			N.mode === void 0 && (z.value = t), P("update:mode", t), K(B.value, t);
+		}
+		function J(e, t = !0) {
+			let r = n(e);
+			if (G(r)) return;
+			let i = ge(r);
+			P("update:modelValue", i), P("change", i), t && P("select", r);
+		}
+		function Y(e) {
+			let t = _e(e);
+			B.value = t, N.modelValue != null && J(t, !1), K(t, V.value);
+		}
+		function _e(e) {
+			let t = n(e), { start: r, end: i } = W.value;
+			return r && t < r && (t = r), i && t > i && (t = i), t;
+		}
+		let ve = s(() => {
+			let e = B.value.getFullYear(), t = e - 10, n = e + 10, { start: r, end: i } = W.value;
+			r && (t = r.getFullYear()), i && (n = i.getFullYear());
+			let a = [];
+			for (let e = t; e <= n; e++) a.push({
+				label: String(e),
+				value: e
+			});
+			return a;
+		}), ye = s(() => {
+			let e = B.value.getFullYear(), t = 0, n = 11, { start: r, end: i } = W.value;
+			return r && r.getFullYear() === e && (t = r.getMonth()), i && i.getFullYear() === e && (n = i.getMonth()), L.value.monthNames.map((e, t) => ({
+				label: e,
+				value: t
+			})).filter((e, r) => r >= t && r <= n);
+		}), be = s(() => {
+			let e = L.value.name?.startsWith("zh");
+			return [{
+				label: e ? "月" : "Month",
+				value: "month"
+			}, {
+				label: e ? "年" : "Year",
+				value: "year"
+			}];
+		}), X = s(() => N.fullscreen ? void 0 : "small"), Z = s(() => {
+			let e = B.value.getFullYear(), t = B.value.getMonth(), n = new Date(e, t, 1).getDay(), r = new Date(e, t + 1, 0).getDate(), i = [];
+			for (let r = 0; r < n; r++) {
+				let a = new Date(e, t, -n + r + 1);
+				i.push(Q(a, !1));
+			}
+			for (let n = 1; n <= r; n++) i.push(Q(new Date(e, t, n), !0));
+			for (; i.length % 7 != 0 || i.length < 42;) {
+				let e = i[i.length - 1].date, t = new Date(e.getFullYear(), e.getMonth(), e.getDate() + 1);
+				i.push(Q(t, !1));
+			}
+			return i;
+		});
+		function Q(e, t) {
+			let r = n(e);
+			return {
+				date: r,
+				inMonth: t,
+				disabled: G(r),
+				selected: H.value != null && E(r, H.value),
+				today: E(r, U.value)
+			};
+		}
+		let $ = s(() => {
+			let e = [];
+			for (let t = 0; t < Z.value.length; t += 7) e.push(Z.value.slice(t, t + 7));
+			return e;
+		}), xe = s(() => L.value.monthNames.map((e, t) => {
+			let r = n(new Date(B.value.getFullYear(), t, 1));
+			return {
+				date: r,
+				label: e,
+				index: t,
+				disabled: G(r),
+				selected: H.value != null && D(r, H.value),
+				today: D(r, U.value)
+			};
+		})), Se = s(() => ["m-calendar", {
+			"m-calendar--fullscreen": N.fullscreen,
+			"m-calendar--card": !N.fullscreen,
+			"m-calendar--week": N.showWeek
+		}]), Ce = s(() => te(L.value.monthYear, {
+			year: B.value.getFullYear(),
+			month: B.value.getMonth() + 1,
+			monthName: L.value.monthNames[B.value.getMonth()] ?? ""
+		}));
+		function we(e) {
+			let t = Number(Array.isArray(e) ? e[0] : e);
+			Y(O(B.value, t, B.value.getMonth()));
+		}
+		function Te(e) {
+			let t = Number(Array.isArray(e) ? e[0] : e);
+			Y(O(B.value, B.value.getFullYear(), t));
+		}
+		function Ee(e) {
+			B.value = n(e), J(e), H.value && !D(e, H.value) && K(B.value, V.value);
+		}
+		function De(e) {
+			let t = n(new Date(B.value.getFullYear(), e, 1));
+			G(t) || (B.value = t, q("month"), N.modelValue == null ? P("select", t) : J(t, !0), K(t, "month"));
+		}
+		function Oe(e) {
+			Y(e), N.modelValue != null && J(e);
+		}
+		let ke = s(() => ({
+			value: B.value,
+			mode: V.value,
+			onChange: Oe,
+			onModeChange: q
+		}));
+		return (e, t) => (_(), u("div", m(S(R), { class: Se.value }), [d("div", ie, [b(e.$slots, "header", g(ne(ke.value)), () => [d("div", ae, [f(a, {
+			class: "m-calendar__year-select",
+			"model-value": B.value.getFullYear(),
+			options: ve.value,
+			size: X.value,
+			"onUpdate:modelValue": we
+		}, null, 8, [
+			"model-value",
+			"options",
+			"size"
+		]), V.value === "month" ? (_(), c(a, {
+			key: 0,
+			class: "m-calendar__month-select",
+			"model-value": B.value.getMonth(),
+			options: ye.value,
+			size: X.value,
+			"onUpdate:modelValue": Te
+		}, null, 8, [
+			"model-value",
+			"options",
+			"size"
+		])) : l("", !0)]), f(i, {
+			class: "m-calendar__mode-switch",
+			"model-value": V.value,
+			options: be.value,
+			size: X.value,
+			"onUpdate:modelValue": q
+		}, null, 8, [
+			"model-value",
+			"options",
+			"size"
+		])])]), V.value === "month" ? (_(), u("div", {
+			key: 0,
+			class: "m-calendar__body",
+			role: "grid",
+			"aria-label": Ce.value
+		}, [d("div", se, [p.showWeek ? (_(), u("span", ce)) : l("", !0), (_(!0), u(o, null, y(S(L).weekdays, (e, t) => (_(), u("span", {
+			key: t,
+			class: "m-calendar__weekday",
+			role: "columnheader"
+		}, x(e), 1))), 128))]), (_(!0), u(o, null, y($.value, (t, n) => (_(), u("div", {
+			key: n,
+			class: "m-calendar__row",
+			role: "row"
+		}, [p.showWeek ? (_(), u("span", le, x(S(re)(t[0].date)), 1)) : l("", !0), (_(!0), u(o, null, y(t, (t) => (_(), u("div", {
+			key: t.date.getTime(),
+			class: "m-calendar__cell-wrap",
+			role: "gridcell"
+		}, [d("button", {
+			type: "button",
+			class: h(["m-calendar__cell m-calendar__cell--date", {
+				"m-calendar__cell--other": !t.inMonth,
+				"m-calendar__cell--selected": t.selected,
+				"m-calendar__cell--today": t.today,
+				"m-calendar__cell--disabled": t.disabled
+			}]),
+			disabled: t.disabled,
+			"aria-label": S(r)(t.date),
+			"aria-selected": t.selected,
+			onClick: (e) => Ee(t.date)
+		}, [d("span", de, x(t.date.getDate()), 1), S(I).dateCell ? (_(), u("span", fe, [b(e.$slots, "dateCell", { date: t.date })])) : l("", !0)], 10, ue)]))), 128))]))), 128))], 8, oe)) : (_(), u("div", {
+			key: 1,
+			class: "m-calendar__body m-calendar__body--months",
+			role: "grid",
+			"aria-label": String(B.value.getFullYear())
+		}, [d("div", me, [(_(!0), u(o, null, y(xe.value, (t) => (_(), u("button", {
+			key: t.index,
+			type: "button",
+			class: h(["m-calendar__cell m-calendar__cell--month", {
+				"m-calendar__cell--selected": t.selected,
+				"m-calendar__cell--today": t.today,
+				"m-calendar__cell--disabled": t.disabled
+			}]),
+			disabled: t.disabled,
+			"aria-label": t.label,
+			"aria-selected": t.selected,
+			onClick: (e) => De(t.index)
+		}, [d("span", A, x(t.label), 1), S(I).monthCell ? (_(), u("span", j, [b(e.$slots, "monthCell", { date: t.date })])) : l("", !0)], 10, k))), 128))])], 8, pe))], 16));
+	}
+});
+//#endregion
+export { M as MCalendar };