morya-ui 0.1.1 → 0.2.2

package/dist/date-picker/index.js

@@ -1,29 +1,33 @@
-import { t as e } from "../Icon-DfpIfo2L.js";
-import { t } from "../useMId-BXFYayPP.js";
-import { n, t as r } from "../overlay-oR-5MDuE.js";
-import { t as i } from "../overlayPlacement-Cd20JTD_.js";
-import { c as a, o } from "../config-CI8_WBbE.js";
-import { n as s, t as ee } from "../locale-DYGhxekd.js";
+import { n as e } from "../useComponentAttrs-BTYEe61P.js";
+import { t } from "../Icon-DfpIfo2L.js";
+import { t as n } from "../useMId-BXFYayPP.js";
+import { n as r, t as i } from "../overlay-oR-5MDuE.js";
+import { t as a } from "../overlayPlacement-Cd20JTD_.js";
+import { c as o, o as s } from "../config-CI8_WBbE.js";
+import { n as ee, t as te } from "../locale-DYGhxekd.js";
 import "./style.js";
-import { Fragment as c, Teleport as te, Transition as ne, computed as l, createBlock as re, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, nextTick as h, normalizeClass as g, normalizeStyle as ie, onBeforeUnmount as ae, openBlock as _, ref as v, renderList as y, renderSlot as oe, toDisplayString as b, unref as x, watch as se, withCtx as ce, withKeys as le, withModifiers as S } from "vue";
+import { Fragment as c, Teleport as ne, Transition as re, computed as l, createBlock as ie, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, mergeProps as ae, nextTick as h, normalizeClass as g, normalizeStyle as oe, onBeforeUnmount as se, openBlock as _, ref as v, renderList as y, renderSlot as ce, toDisplayString as b, unref as x, useAttrs as le, watch as ue, withCtx as de, withKeys as fe, withModifiers as S } from "vue";
 //#region src/components/DatePicker/DatePicker.vue?vue&type=script&setup=true&lang.ts
-var ue = ["for"], de = [
+var pe = ["for"], me = [
 	"id",
 	"value",
 	"placeholder",
+	"name",
+	"autocomplete",
+	"autofocus",
 	"disabled",
 	"aria-invalid",
 	"aria-expanded",
 	"aria-controls",
 	"aria-describedby",
 	"onKeydown"
-], fe = ["aria-label", "disabled"], pe = ["id"], me = ["id", "aria-label"], he = {
+], he = ["aria-label", "disabled"], ge = ["id"], _e = ["id", "aria-label"], ve = {
 	key: 0,
 	class: "m-datepicker__shortcuts"
-}, ge = ["onClick"], _e = { class: "m-datepicker__calendar" }, ve = { class: "m-datepicker__header" }, ye = ["aria-label"], be = { class: "m-datepicker__month" }, xe = ["aria-label"], Se = {
+}, ye = ["onClick"], be = { class: "m-datepicker__calendar" }, xe = { class: "m-datepicker__header" }, Se = ["aria-label"], Ce = { class: "m-datepicker__month" }, we = ["aria-label"], Te = {
 	class: "m-datepicker__weekdays",
 	"aria-hidden": "true"
-}, Ce = ["aria-label"], we = [
+}, Ee = ["aria-label"], De = [
 	"aria-selected",
 	"data-m-date",
 	"tabindex",
@@ -31,6 +35,7 @@ var ue = ["for"], de = [
 	"onClick",
 	"onMouseenter"
 ], C = /* @__PURE__ */ m({
+	inheritAttrs: !1,
 	__name: "DatePicker",
 	props: {
 		modelValue: { default: null },
@@ -65,7 +70,11 @@ var ue = ["for"], de = [
 			type: Boolean,
 			default: !0
 		},
-		appendTo: {}
+		appendTo: {},
+		pt: {},
+		name: {},
+		autocomplete: {},
+		autofocus: { type: Boolean }
 	},
 	emits: [
 		"update:modelValue",
@@ -75,7 +84,7 @@ var ue = ["for"], de = [
 		"change"
 	],
 	setup(m, { emit: C }) {
-		let w = m, T = C, E = a(), D = s(), Te = o("DatePicker", () => w.size), O = v(!1), k = v(null), A = v(null), j = v(null), M = v(null), Ee = v({}), N = v((/* @__PURE__ */ new Date()).getFullYear()), P = v((/* @__PURE__ */ new Date()).getMonth()), F = v(G(/* @__PURE__ */ new Date())), I = v(null), L = v(null), De = t("m-datepicker"), R = l(() => w.id ?? De), Oe = l(() => `${R.value}-panel`), ke = l(() => n(w, E.value.appendTo)), z = l(() => r(w, E.value.appendTo)), B = l(() => w.type === "daterange"), Ae = l(() => w.invalid || !!w.errorMessage), V = l(() => w.errorMessage || w.helpText), je = l(() => !!w.errorMessage || w.invalid && !!w.helpText);
+		let w = m, T = C, Oe = le(), { rootAttrs: ke, controlAttrs: Ae } = e(Oe, () => w.pt), E = o(), D = ee(), je = s("DatePicker", () => w.size), O = v(!1), k = v(null), A = v(null), j = v(null), M = v(null), Me = v({}), N = v((/* @__PURE__ */ new Date()).getFullYear()), P = v((/* @__PURE__ */ new Date()).getMonth()), F = v(G(/* @__PURE__ */ new Date())), I = v(null), L = v(null), Ne = n("m-datepicker"), R = l(() => w.id ?? Ne), Pe = l(() => `${R.value}-panel`), Fe = l(() => r(w, E.value.appendTo)), z = l(() => i(w, E.value.appendTo)), B = l(() => w.type === "daterange"), Ie = l(() => w.invalid || !!w.errorMessage), V = l(() => w.errorMessage || w.helpText), Le = l(() => !!w.errorMessage || w.invalid && !!w.helpText);
 		function H(e) {
 			if (e == null || e === "") return null;
 			if (e instanceof Date) return Number.isNaN(e.getTime()) ? null : e;
@@ -93,7 +102,7 @@ var ue = ["for"], de = [
 		function G(e) {
 			return new Date(e.getFullYear(), e.getMonth(), e.getDate());
 		}
-		function Me(e) {
+		function Re(e) {
 			if (e == null || e === "") return {
 				start: null,
 				end: null
@@ -108,15 +117,15 @@ var ue = ["for"], de = [
 				end: t
 			};
 		}
-		let K = l(() => Me(w.modelValue)), Ne = l(() => H(w.minDate)), Pe = l(() => H(w.maxDate)), q = l(() => {
+		let K = l(() => Re(w.modelValue)), ze = l(() => H(w.minDate)), Be = l(() => H(w.maxDate)), q = l(() => {
 			let { start: e, end: t } = K.value;
 			return e ? !B.value || !t ? W(e) : `${W(e)} – ${W(t)}` : "";
-		}), Fe = l(() => w.placeholder ?? (B.value ? D.value.dateRangePlaceholder : D.value.datePickerPlaceholder)), Ie = l(() => ee(D.value.monthYear, {
+		}), Ve = l(() => w.placeholder ?? (B.value ? D.value.dateRangePlaceholder : D.value.datePickerPlaceholder)), He = l(() => te(D.value.monthYear, {
 			year: N.value,
 			month: P.value + 1,
 			monthName: D.value.monthNames[P.value] ?? String(P.value + 1)
 		}));
-		function Le() {
+		function Ue() {
 			let e = I.value ?? K.value.start, t = I.value ? L.value ?? I.value : K.value.end;
 			if (!e) return {
 				start: null,
@@ -135,7 +144,7 @@ var ue = ["for"], de = [
 				end: n
 			};
 		}
-		let Re = l(() => {
+		let We = l(() => {
 			let e = new Date(N.value, P.value, 1).getDay(), t = new Date(N.value, P.value + 1, 0).getDate(), n = [];
 			for (let t = 0; t < e; t++) {
 				let r = new Date(N.value, P.value, -e + t + 1);
@@ -150,8 +159,8 @@ var ue = ["for"], de = [
 		});
 		function J(e, t) {
 			let n = G(e), r = !1;
-			Ne.value && n < G(Ne.value) && (r = !0), Pe.value && n > G(Pe.value) && (r = !0);
-			let i = Le(), a = n.getTime(), o = !!(i.start && a === i.start.getTime()), s = !!(i.end && a === i.end.getTime()), ee = !!(B.value && i.start && i.end && a > i.start.getTime() && a < i.end.getTime());
+			ze.value && n < G(ze.value) && (r = !0), Be.value && n > G(Be.value) && (r = !0);
+			let i = Ue(), a = n.getTime(), o = !!(i.start && a === i.start.getTime()), s = !!(i.end && a === i.end.getTime()), ee = !!(B.value && i.start && i.end && a > i.start.getTime() && a < i.end.getTime());
 			return {
 				date: n,
 				inMonth: t,
@@ -162,9 +171,9 @@ var ue = ["for"], de = [
 				rangeEnd: s
 			};
 		}
-		let ze = l(() => [
+		let Ge = l(() => [
 			"m-datepicker",
-			`m-datepicker--${Te.value}`,
+			`m-datepicker--${je.value}`,
 			{
 				"m-datepicker--fluid": w.fluid,
 				"m-datepicker--disabled": w.disabled,
@@ -173,28 +182,28 @@ var ue = ["for"], de = [
 				"m-datepicker--range": B.value
 			}
 		]);
-		function Be() {
+		function Ke() {
 			let e = K.value.start ?? /* @__PURE__ */ new Date();
 			N.value = e.getFullYear(), P.value = e.getMonth();
 		}
-		function Ve() {
+		function qe() {
 			if (!z.value || !A.value) return;
 			let e = A.value.getBoundingClientRect();
-			Ee.value = i(e, "bottom-start", { minWidth: `${e.width}px` });
+			Me.value = a(e, "bottom-start", { minWidth: `${e.width}px` });
 		}
-		function He(e) {
-			w.disabled || e === O.value || (O.value = e, e && (I.value = null, L.value = null, Be(), F.value = G(K.value.start ?? /* @__PURE__ */ new Date()), h(() => Ve())));
+		function Je(e) {
+			w.disabled || e === O.value || (O.value = e, e && (I.value = null, L.value = null, Ke(), F.value = G(K.value.start ?? /* @__PURE__ */ new Date()), h(() => qe())));
 		}
 		function Y() {
-			He(!O.value);
+			Je(!O.value);
 		}
-		function Ue() {
+		function Ye() {
 			P.value === 0 ? (P.value = 11, --N.value) : --P.value;
 		}
-		function We() {
+		function Xe() {
 			P.value === 11 ? (P.value = 0, N.value += 1) : P.value += 1;
 		}
-		function Ge(e, t) {
+		function Ze(e, t) {
 			if (t || w.disabled) return;
 			if (F.value = G(e), !B.value) {
 				T("update:modelValue", U(e)), T("change", U(e)), O.value = !1, j.value?.focus({ preventScroll: !0 });
@@ -207,7 +216,7 @@ var ue = ["for"], de = [
 			let n = I.value, r = e, [i, a] = n.getTime() <= r.getTime() ? [n, r] : [r, n], o = [U(i), U(a)];
 			T("update:modelValue", o), T("change", o), I.value = null, L.value = null, O.value = !1, j.value?.focus({ preventScroll: !0 });
 		}
-		function Ke(e) {
+		function Qe(e) {
 			if (w.disabled) return;
 			let t = typeof e.value == "function" ? e.value() : e.value;
 			if (Array.isArray(t)) {
@@ -223,7 +232,7 @@ var ue = ["for"], de = [
 			}
 			O.value = !1;
 		}
-		function qe() {
+		function $e() {
 			w.disabled || !w.clearable || (T("update:modelValue", null), T("clear"));
 		}
 		function X(e) {
@@ -233,31 +242,31 @@ var ue = ["for"], de = [
 		function Z(e) {
 			e.key === "Escape" && (O.value = !1, j.value?.focus({ preventScroll: !0 }));
 		}
-		function Je(e, t) {
+		function et(e, t) {
 			return new Date(e.getFullYear(), e.getMonth(), e.getDate() + t);
 		}
-		function Ye(e) {
+		function tt(e) {
 			return G(e).getTime() === F.value.getTime();
 		}
-		function Xe() {
+		function nt() {
 			M.value?.querySelector(`[data-m-date="${U(F.value)}"]`)?.focus({ preventScroll: !0 });
 		}
 		function Q(e) {
 			let t = G(e);
-			F.value = t, (t.getFullYear() !== N.value || t.getMonth() !== P.value) && (N.value = t.getFullYear(), P.value = t.getMonth()), h(Xe);
+			F.value = t, (t.getFullYear() !== N.value || t.getMonth() !== P.value) && (N.value = t.getFullYear(), P.value = t.getMonth()), h(nt);
 		}
-		function Ze(e) {
+		function rt(e) {
 			let t = e.key;
 			if (t === "Enter") {
 				e.preventDefault();
-				let t = Re.value.find((e) => e.date.getTime() === F.value.getTime());
-				t && Ge(t.date, t.disabled);
+				let t = We.value.find((e) => e.date.getTime() === F.value.getTime());
+				t && Ze(t.date, t.disabled);
 				return;
 			}
 			if (t === "Home" || t === "End") {
 				e.preventDefault();
 				let n = F.value.getDay();
-				Q(Je(F.value, t === "Home" ? -n : 6 - n));
+				Q(et(F.value, t === "Home" ? -n : 6 - n));
 				return;
 			}
 			if (t === "PageUp" || t === "PageDown") {
@@ -267,33 +276,32 @@ var ue = ["for"], de = [
 				return;
 			}
 			let n = t === "ArrowLeft" ? -1 : t === "ArrowRight" ? 1 : t === "ArrowUp" ? -7 : t === "ArrowDown" ? 7 : 0;
-			n !== 0 && (e.preventDefault(), Q(Je(F.value, n)));
+			n !== 0 && (e.preventDefault(), Q(et(F.value, n)));
 		}
 		function $() {
-			O.value && Ve();
+			O.value && qe();
 		}
-		return se(O, async (e) => {
-			e ? (T("show"), document.addEventListener("click", X), document.addEventListener("keydown", Z), z.value && (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0)), await h(), Xe()) : (T("hide"), document.removeEventListener("click", X), document.removeEventListener("keydown", Z), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
-		}), ae(() => {
+		return ue(O, async (e) => {
+			e ? (T("show"), document.addEventListener("click", X), document.addEventListener("keydown", Z), z.value && (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0)), await h(), nt()) : (T("hide"), document.removeEventListener("click", X), document.removeEventListener("keydown", Z), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
+		}), se(() => {
 			document.removeEventListener("click", X), document.removeEventListener("keydown", Z), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0);
-		}), (t, n) => (_(), d("div", {
+		}), (e, n) => (_(), d("div", ae({
 			ref_key: "root",
-			ref: k,
-			class: g(ze.value)
-		}, [
+			ref: k
+		}, x(ke), { class: Ge.value }), [
 			m.label ? (_(), d("label", {
 				key: 0,
 				class: "m-datepicker__label",
 				for: R.value
-			}, b(m.label), 9, ue)) : u("", !0),
+			}, b(m.label), 9, pe)) : u("", !0),
 			f("div", {
 				ref_key: "triggerEl",
 				ref: A,
 				class: "m-datepicker__control"
-			}, [oe(t.$slots, "trigger", {
+			}, [ce(e.$slots, "trigger", {
 				value: q.value,
 				open: O.value
-			}, () => [f("input", {
+			}, () => [f("input", ae(x(Ae), {
 				id: R.value,
 				ref_key: "inputEl",
 				ref: j,
@@ -302,36 +310,39 @@ var ue = ["for"], de = [
 				role: "combobox",
 				readonly: "",
 				value: q.value,
-				placeholder: Fe.value,
+				placeholder: Ve.value,
+				name: m.name,
+				autocomplete: m.autocomplete,
+				autofocus: m.autofocus || void 0,
 				disabled: m.disabled,
-				"aria-invalid": Ae.value || void 0,
+				"aria-invalid": Ie.value || void 0,
 				"aria-expanded": O.value,
-				"aria-controls": O.value ? Oe.value : void 0,
+				"aria-controls": O.value ? Pe.value : void 0,
 				"aria-describedby": V.value ? `${R.value}-help` : void 0,
 				"aria-haspopup": "dialog",
 				onClick: Y,
-				onKeydown: [le(S(Y, ["prevent"]), ["enter"]), le(S(Y, ["prevent"]), ["space"])]
-			}, null, 40, de), m.clearable && q.value ? (_(), d("button", {
+				onKeydown: [fe(S(Y, ["prevent"]), ["enter"]), fe(S(Y, ["prevent"]), ["space"])]
+			}), null, 16, me), m.clearable && q.value ? (_(), d("button", {
 				key: 0,
 				type: "button",
 				class: "m-datepicker__clear",
 				"aria-label": x(D).clearDate,
 				disabled: m.disabled,
-				onClick: S(qe, ["stop"])
-			}, [p(e, {
+				onClick: S($e, ["stop"])
+			}, [p(t, {
 				name: "close",
 				size: "sm"
-			})], 8, fe)) : u("", !0)])], 512),
+			})], 8, he)) : u("", !0)])], 512),
 			V.value ? (_(), d("p", {
 				key: 1,
 				id: `${R.value}-help`,
-				class: g(["m-datepicker__help", { "m-datepicker__help--invalid": je.value }])
-			}, b(V.value), 11, pe)) : u("", !0),
-			(_(), re(te, {
-				to: ke.value.to,
-				disabled: ke.value.disabled
-			}, [p(ne, { name: "m-scale-fade" }, {
-				default: ce(() => [O.value ? (_(), d("div", {
+				class: g(["m-datepicker__help", { "m-datepicker__help--invalid": Le.value }])
+			}, b(V.value), 11, ge)) : u("", !0),
+			(_(), ie(ne, {
+				to: Fe.value.to,
+				disabled: Fe.value.disabled
+			}, [p(re, { name: "m-scale-fade" }, {
+				default: de(() => [O.value ? (_(), d("div", {
 					key: 0,
 					ref_key: "panel",
 					ref: M,
@@ -339,44 +350,44 @@ var ue = ["for"], de = [
 						"m-datepicker__panel--teleported": z.value,
 						"m-datepicker__panel--with-shortcuts": m.shortcuts.length
 					}]),
-					style: ie(z.value ? Ee.value : void 0),
-					id: Oe.value,
+					style: oe(z.value ? Me.value : void 0),
+					id: Pe.value,
 					role: "dialog",
 					"aria-label": x(D).datePicker
-				}, [m.shortcuts.length ? (_(), d("div", he, [(_(!0), d(c, null, y(m.shortcuts, (e) => (_(), d("button", {
+				}, [m.shortcuts.length ? (_(), d("div", ve, [(_(!0), d(c, null, y(m.shortcuts, (e) => (_(), d("button", {
 					key: e.label,
 					type: "button",
 					class: "m-datepicker__shortcut",
-					onClick: (t) => Ke(e)
-				}, b(e.label), 9, ge))), 128))])) : u("", !0), f("div", _e, [
-					f("div", ve, [
+					onClick: (t) => Qe(e)
+				}, b(e.label), 9, ye))), 128))])) : u("", !0), f("div", be, [
+					f("div", xe, [
 						f("button", {
 							type: "button",
 							class: "m-datepicker__nav",
 							"aria-label": x(D).prevMonth,
-							onClick: Ue
-						}, [p(e, {
+							onClick: Ye
+						}, [p(t, {
 							name: "chevron-left",
 							size: "sm"
-						})], 8, ye),
-						f("span", be, b(Ie.value), 1),
+						})], 8, Se),
+						f("span", Ce, b(He.value), 1),
 						f("button", {
 							type: "button",
 							class: "m-datepicker__nav",
 							"aria-label": x(D).nextMonth,
-							onClick: We
-						}, [p(e, {
+							onClick: Xe
+						}, [p(t, {
 							name: "chevron-right",
 							size: "sm"
-						})], 8, xe)
+						})], 8, we)
 					]),
-					f("div", Se, [(_(!0), d(c, null, y(x(D).weekdays, (e) => (_(), d("span", { key: e }, b(e), 1))), 128))]),
+					f("div", Te, [(_(!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": Ie.value,
-						onKeydown: Ze
-					}, [(_(!0), d(c, null, y(Re.value, (e) => (_(), d("button", {
+						"aria-label": He.value,
+						onKeydown: rt
+					}, [(_(!0), d(c, null, y(We.value, (e) => (_(), d("button", {
 						key: e.date.toISOString(),
 						type: "button",
 						class: g(["m-datepicker__day", {
@@ -389,15 +400,15 @@ var ue = ["for"], de = [
 						role: "gridcell",
 						"aria-selected": e.selected,
 						"data-m-date": U(e.date),
-						tabindex: Ye(e.date) && !e.disabled ? 0 : -1,
+						tabindex: tt(e.date) && !e.disabled ? 0 : -1,
 						disabled: e.disabled,
-						onClick: (t) => Ge(e.date, e.disabled),
+						onClick: (t) => Ze(e.date, e.disabled),
 						onMouseenter: (t) => B.value && I.value && (L.value = e.date)
-					}, b(e.date.getDate()), 43, we))), 128))], 40, Ce)
-				])], 14, me)) : u("", !0)]),
+					}, b(e.date.getDate()), 43, De))), 128))], 40, Ee)
+				])], 14, _e)) : u("", !0)]),
 				_: 1
 			})], 8, ["to", "disabled"]))
-		], 2));
+		], 16));
 	}
 });
 //#endregion