morya-ui 0.3.8 → 0.4.0

package/dist/date-picker/index.js

@@ -1,429 +1,3 @@
-import { i as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { t } from "../Icon-od9Ob-Ay.js";
-import { t as n } from "../useMotionTransition-tW0yeJsy.js";
-import { n as r, t as i } from "../overlay-oR-5MDuE.js";
-import { t as a } from "../overlayPlacement-qwEJPVS4.js";
-import { t as o } from "../useFloatingViewportSync-wLLKIGUA.js";
-import { t as s } from "../useMId-BXFYayPP.js";
-import { c as ee, o as te } from "../config-De8ueCY-.js";
-import { n as ne, t as re } from "../locale-xavS6-Hw.js";
+import { t as e } from "../DatePicker-CSoMFEvh.js";
 import "./style.js";
-import { Fragment as c, Teleport as ie, Transition as ae, computed as l, createBlock as oe, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, mergeProps as se, nextTick as h, normalizeClass as g, normalizeStyle as ce, onBeforeUnmount as le, openBlock as _, ref as v, renderList as y, renderSlot as ue, toDisplayString as b, unref as x, useAttrs as de, watch as fe, withCtx as pe, withKeys as me, withModifiers as S } from "vue";
-//#region src/components/DatePicker/DatePicker.vue?vue&type=script&setup=true&lang.ts
-var he = ["for"], ge = [
-	"id",
-	"value",
-	"placeholder",
-	"name",
-	"autocomplete",
-	"autofocus",
-	"disabled",
-	"aria-invalid",
-	"aria-expanded",
-	"aria-controls",
-	"aria-describedby",
-	"onKeydown"
-], _e = ["aria-label", "disabled"], ve = ["id"], ye = ["id", "aria-label"], be = {
-	key: 0,
-	class: "m-datepicker__shortcuts"
-}, xe = ["onClick"], Se = { class: "m-datepicker__calendar" }, Ce = { class: "m-datepicker__header" }, we = ["aria-label"], Te = { class: "m-datepicker__month" }, Ee = ["aria-label"], De = {
-	class: "m-datepicker__weekdays",
-	"aria-hidden": "true"
-}, Oe = ["aria-label"], ke = [
-	"aria-selected",
-	"data-m-date",
-	"tabindex",
-	"disabled",
-	"onClick",
-	"onMouseenter"
-], C = /* @__PURE__ */ m({
-	inheritAttrs: !1,
-	__name: "DatePicker",
-	props: {
-		modelValue: { default: null },
-		type: { default: "date" },
-		label: {},
-		id: { default: void 0 },
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		invalid: {
-			type: Boolean,
-			default: !1
-		},
-		fluid: {
-			type: Boolean,
-			default: !1
-		},
-		size: {},
-		minDate: {},
-		maxDate: {},
-		placeholder: { default: void 0 },
-		errorMessage: { default: void 0 },
-		helpText: { default: void 0 },
-		format: { default: "YYYY-MM-DD" },
-		clearable: {
-			type: Boolean,
-			default: !0
-		},
-		shortcuts: { default: () => [] },
-		teleport: {
-			type: Boolean,
-			default: !0
-		},
-		appendTo: {},
-		pt: {},
-		transition: {
-			type: [String, Boolean],
-			default: void 0
-		},
-		name: {},
-		autocomplete: {},
-		autofocus: { type: Boolean }
-	},
-	emits: [
-		"update:modelValue",
-		"clear",
-		"show",
-		"hide",
-		"change"
-	],
-	setup(m, { emit: C }) {
-		let w = m, T = C, Ae = de(), { rootAttrs: je, controlAttrs: Me } = e(Ae, () => w.pt), E = ee(), { transitionName: Ne, transitionCss: Pe } = n({
-			role: "popup",
-			local: () => w.transition,
-			componentName: "DatePicker",
-			fallback: "scale-fade"
-		}), D = ne(), Fe = te("DatePicker", () => w.size), O = v(!1), Ie = v(null), k = v(null), A = v(null), j = v(null), Le = v({}), M = v((/* @__PURE__ */ new Date()).getFullYear()), N = v((/* @__PURE__ */ new Date()).getMonth()), P = v(W(/* @__PURE__ */ new Date())), F = v(null), I = v(null), Re = s("m-datepicker"), L = l(() => w.id ?? Re), ze = l(() => `${L.value}-panel`), Be = l(() => r(w, E.value.appendTo)), R = l(() => i(w, E.value.appendTo)), z = l(() => w.type === "daterange"), Ve = l(() => w.invalid || !!w.errorMessage), B = l(() => w.errorMessage || w.helpText), He = l(() => !!w.errorMessage || w.invalid && !!w.helpText);
-		function V(e) {
-			if (e == null || e === "") return null;
-			if (e instanceof Date) return Number.isNaN(e.getTime()) ? null : e;
-			let t = /^(\d{4})-(\d{2})-(\d{2})/.exec(e);
-			if (t) return new Date(Number(t[1]), Number(t[2]) - 1, Number(t[3]));
-			let n = new Date(e);
-			return Number.isNaN(n.getTime()) ? null : n;
-		}
-		function H(e) {
-			return `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
-		}
-		function U(e) {
-			return w.format.replaceAll("YYYY", String(e.getFullYear())).replaceAll("MM", String(e.getMonth() + 1).padStart(2, "0")).replaceAll("DD", String(e.getDate()).padStart(2, "0"));
-		}
-		function W(e) {
-			return new Date(e.getFullYear(), e.getMonth(), e.getDate());
-		}
-		function Ue(e) {
-			if (e == null || e === "") return {
-				start: null,
-				end: null
-			};
-			if (Array.isArray(e)) return {
-				start: V(e[0]),
-				end: V(e[1])
-			};
-			let t = V(e);
-			return {
-				start: t,
-				end: t
-			};
-		}
-		let G = l(() => Ue(w.modelValue)), We = l(() => V(w.minDate)), Ge = l(() => V(w.maxDate)), K = l(() => {
-			let { start: e, end: t } = G.value;
-			return e ? !z.value || !t ? U(e) : `${U(e)} – ${U(t)}` : "";
-		}), Ke = l(() => w.placeholder ?? (z.value ? D.value.dateRangePlaceholder : D.value.datePickerPlaceholder)), qe = l(() => re(D.value.monthYear, {
-			year: M.value,
-			month: N.value + 1,
-			monthName: D.value.monthNames[N.value] ?? String(N.value + 1)
-		}));
-		function Je() {
-			let e = F.value ?? G.value.start, t = F.value ? I.value ?? F.value : G.value.end;
-			if (!e) return {
-				start: null,
-				end: null
-			};
-			if (!t) return {
-				start: W(e),
-				end: W(e)
-			};
-			let n = W(e), r = W(t);
-			return n.getTime() <= r.getTime() ? {
-				start: n,
-				end: r
-			} : {
-				start: r,
-				end: n
-			};
-		}
-		let Ye = l(() => {
-			let e = new Date(M.value, N.value, 1).getDay(), t = new Date(M.value, N.value + 1, 0).getDate(), n = [];
-			for (let t = 0; t < e; t++) {
-				let r = new Date(M.value, N.value, -e + t + 1);
-				n.push(q(r, !1));
-			}
-			for (let e = 1; e <= t; e++) n.push(q(new Date(M.value, N.value, e), !0));
-			for (; n.length % 7 != 0 || n.length < 42;) {
-				let e = n[n.length - 1].date, t = new Date(e.getFullYear(), e.getMonth(), e.getDate() + 1);
-				n.push(q(t, !1));
-			}
-			return n;
-		});
-		function q(e, t) {
-			let n = W(e), r = !1;
-			We.value && n < W(We.value) && (r = !0), Ge.value && n > W(Ge.value) && (r = !0);
-			let i = Je(), a = n.getTime(), o = !!(i.start && a === i.start.getTime()), s = !!(i.end && a === i.end.getTime()), ee = !!(z.value && i.start && i.end && a > i.start.getTime() && a < i.end.getTime());
-			return {
-				date: n,
-				inMonth: t,
-				disabled: r,
-				selected: o || s,
-				inRange: ee,
-				rangeStart: o,
-				rangeEnd: s
-			};
-		}
-		let Xe = l(() => [
-			"m-datepicker",
-			`m-datepicker--${Fe.value}`,
-			{
-				"m-datepicker--fluid": w.fluid,
-				"m-datepicker--disabled": w.disabled,
-				"m-datepicker--invalid": w.invalid,
-				"m-datepicker--open": O.value,
-				"m-datepicker--range": z.value
-			}
-		]);
-		function Ze() {
-			let e = G.value.start ?? /* @__PURE__ */ new Date();
-			M.value = e.getFullYear(), N.value = e.getMonth();
-		}
-		function Qe() {
-			if (!R.value || !k.value) return;
-			let e = k.value.getBoundingClientRect();
-			Le.value = a(e, "bottom-start", { minWidth: `${e.width}px` });
-		}
-		function $e(e) {
-			w.disabled || e === O.value || (O.value = e, e && (F.value = null, I.value = null, Ze(), P.value = W(G.value.start ?? /* @__PURE__ */ new Date()), h(() => Qe())));
-		}
-		function J() {
-			$e(!O.value);
-		}
-		function et() {
-			N.value === 0 ? (N.value = 11, --M.value) : --N.value;
-		}
-		function tt() {
-			N.value === 11 ? (N.value = 0, M.value += 1) : N.value += 1;
-		}
-		function Y(e, t) {
-			if (t || w.disabled) return;
-			if (P.value = W(e), !z.value) {
-				T("update:modelValue", H(e)), T("change", H(e)), O.value = !1, A.value?.focus({ preventScroll: !0 });
-				return;
-			}
-			if (!F.value) {
-				F.value = e, I.value = e;
-				return;
-			}
-			let n = F.value, r = e, [i, a] = n.getTime() <= r.getTime() ? [n, r] : [r, n], o = [H(i), H(a)];
-			T("update:modelValue", o), T("change", o), F.value = null, I.value = null, O.value = !1, A.value?.focus({ preventScroll: !0 });
-		}
-		function nt(e) {
-			if (w.disabled) return;
-			let t = typeof e.value == "function" ? e.value() : e.value;
-			if (Array.isArray(t)) {
-				let e = V(t[0]), n = V(t[1]);
-				if (!e || !n) return;
-				let [r, i] = e.getTime() <= n.getTime() ? [e, n] : [n, e], a = z.value ? [H(r), H(i)] : H(r);
-				T("update:modelValue", a), T("change", a);
-			} else {
-				let e = V(t);
-				if (!e) return;
-				let n = z.value ? [H(e), H(e)] : H(e);
-				T("update:modelValue", n), T("change", n);
-			}
-			O.value = !1;
-		}
-		function rt() {
-			w.disabled || !w.clearable || (T("update:modelValue", null), T("clear"));
-		}
-		function X(e) {
-			let t = e.target;
-			Ie.value?.contains(t) || j.value?.contains(t) || (O.value = !1);
-		}
-		function Z(e) {
-			e.key === "Escape" && (O.value = !1, A.value?.focus({ preventScroll: !0 }));
-		}
-		function it(e, t) {
-			return new Date(e.getFullYear(), e.getMonth(), e.getDate() + t);
-		}
-		function at(e) {
-			return W(e).getTime() === P.value.getTime();
-		}
-		function Q() {
-			j.value?.querySelector(`[data-m-date="${H(P.value)}"]`)?.focus({ preventScroll: !0 });
-		}
-		function $(e) {
-			let t = W(e);
-			P.value = t, (t.getFullYear() !== M.value || t.getMonth() !== N.value) && (M.value = t.getFullYear(), N.value = t.getMonth()), h(Q);
-		}
-		function ot(e) {
-			let t = e.key;
-			if (t === "Enter") {
-				e.preventDefault();
-				let t = Ye.value.find((e) => e.date.getTime() === P.value.getTime());
-				t && Y(t.date, t.disabled);
-				return;
-			}
-			if (t === "Home" || t === "End") {
-				e.preventDefault();
-				let n = P.value.getDay();
-				$(it(P.value, t === "Home" ? -n : 6 - n));
-				return;
-			}
-			if (t === "PageUp" || t === "PageDown") {
-				e.preventDefault();
-				let n = new Date(P.value);
-				n.setMonth(n.getMonth() + (t === "PageUp" ? -1 : 1)), $(n);
-				return;
-			}
-			let n = t === "ArrowLeft" ? -1 : t === "ArrowRight" ? 1 : t === "ArrowUp" ? -7 : t === "ArrowDown" ? 7 : 0;
-			n !== 0 && (e.preventDefault(), $(it(P.value, n)));
-		}
-		function st() {
-			O.value && Qe();
-		}
-		return o(() => O.value && R.value, st), fe(O, async (e) => {
-			e ? (T("show"), document.addEventListener("click", X), document.addEventListener("keydown", Z), await h(), Q()) : (T("hide"), document.removeEventListener("click", X), document.removeEventListener("keydown", Z));
-		}), le(() => {
-			document.removeEventListener("click", X), document.removeEventListener("keydown", Z);
-		}), (e, n) => (_(), d("div", se({
-			ref_key: "root",
-			ref: Ie
-		}, x(je), { class: Xe.value }), [
-			m.label ? (_(), d("label", {
-				key: 0,
-				class: "m-datepicker__label",
-				for: L.value
-			}, b(m.label), 9, he)) : u("", !0),
-			f("div", {
-				ref_key: "triggerEl",
-				ref: k,
-				class: "m-datepicker__control"
-			}, [ue(e.$slots, "trigger", {
-				value: K.value,
-				open: O.value
-			}, () => [f("input", se(x(Me), {
-				id: L.value,
-				ref_key: "inputEl",
-				ref: A,
-				class: "m-datepicker__input",
-				type: "text",
-				role: "combobox",
-				readonly: "",
-				value: K.value,
-				placeholder: Ke.value,
-				name: m.name,
-				autocomplete: m.autocomplete,
-				autofocus: m.autofocus || void 0,
-				disabled: m.disabled,
-				"aria-invalid": Ve.value || void 0,
-				"aria-expanded": O.value,
-				"aria-controls": O.value ? ze.value : void 0,
-				"aria-describedby": B.value ? `${L.value}-help` : void 0,
-				"aria-haspopup": "dialog",
-				onClick: J,
-				onKeydown: [me(S(J, ["prevent"]), ["enter"]), me(S(J, ["prevent"]), ["space"])]
-			}), null, 16, ge), m.clearable && K.value ? (_(), d("button", {
-				key: 0,
-				type: "button",
-				class: "m-datepicker__clear",
-				"aria-label": x(D).clearDate,
-				disabled: m.disabled,
-				onClick: S(rt, ["stop"])
-			}, [p(t, {
-				name: "close",
-				size: "sm"
-			})], 8, _e)) : u("", !0)])], 512),
-			B.value ? (_(), d("p", {
-				key: 1,
-				id: `${L.value}-help`,
-				class: g(["m-datepicker__help", { "m-datepicker__help--invalid": He.value }])
-			}, b(B.value), 11, ve)) : u("", !0),
-			(_(), oe(ie, {
-				to: Be.value.to,
-				disabled: Be.value.disabled
-			}, [p(ae, {
-				name: x(Ne),
-				css: x(Pe)
-			}, {
-				default: pe(() => [O.value ? (_(), d("div", {
-					key: 0,
-					id: ze.value,
-					ref_key: "panel",
-					ref: j,
-					class: g(["m-datepicker__panel", {
-						"m-datepicker__panel--teleported": R.value,
-						"m-datepicker__panel--with-shortcuts": m.shortcuts.length
-					}]),
-					style: ce(R.value ? Le.value : void 0),
-					role: "dialog",
-					"aria-label": x(D).datePicker
-				}, [m.shortcuts.length ? (_(), d("div", be, [(_(!0), d(c, null, y(m.shortcuts, (e) => (_(), d("button", {
-					key: e.label,
-					type: "button",
-					class: "m-datepicker__shortcut",
-					onClick: (t) => nt(e)
-				}, b(e.label), 9, xe))), 128))])) : u("", !0), f("div", Se, [
-					f("div", Ce, [
-						f("button", {
-							type: "button",
-							class: "m-datepicker__nav",
-							"aria-label": x(D).prevMonth,
-							onClick: et
-						}, [p(t, {
-							name: "chevron-left",
-							size: "sm"
-						})], 8, we),
-						f("span", Te, b(qe.value), 1),
-						f("button", {
-							type: "button",
-							class: "m-datepicker__nav",
-							"aria-label": x(D).nextMonth,
-							onClick: tt
-						}, [p(t, {
-							name: "chevron-right",
-							size: "sm"
-						})], 8, Ee)
-					]),
-					f("div", De, [(_(!0), d(c, null, y(x(D).weekdays, (e) => (_(), d("span", { key: e }, b(e), 1))), 128))]),
-					f("div", {
-						class: "m-datepicker__grid",
-						role: "grid",
-						"aria-label": qe.value,
-						onKeydown: ot
-					}, [(_(!0), d(c, null, y(Ye.value, (e) => (_(), d("button", {
-						key: e.date.toISOString(),
-						type: "button",
-						class: g(["m-datepicker__day", {
-							"m-datepicker__day--other": !e.inMonth,
-							"m-datepicker__day--selected": e.selected,
-							"m-datepicker__day--in-range": e.inRange,
-							"m-datepicker__day--range-start": e.rangeStart,
-							"m-datepicker__day--range-end": e.rangeEnd
-						}]),
-						role: "gridcell",
-						"aria-selected": e.selected,
-						"data-m-date": H(e.date),
-						tabindex: at(e.date) && !e.disabled ? 0 : -1,
-						disabled: e.disabled,
-						onClick: (t) => Y(e.date, e.disabled),
-						onMouseenter: (t) => z.value && F.value && (I.value = e.date)
-					}, b(e.date.getDate()), 43, ke))), 128))], 40, Oe)
-				])], 14, ye)) : u("", !0)]),
-				_: 1
-			}, 8, ["name", "css"])], 8, ["to", "disabled"]))
-		], 16));
-	}
-});
-//#endregion
-export { C as MDatePicker };
+export { e as MDatePicker };