morya-ui 0.2.8 → 0.3.0

package/dist/auto-complete/index.js

@@ -1,16 +1,19 @@
-import { n as e } from "../useComponentAttrs-BTYEe61P.js";
-import { t } from "../Icon-DfpIfo2L.js";
-import { n, t as ee } from "../overlay-oR-5MDuE.js";
-import { t as te } from "../overlayPlacement-Cd20JTD_.js";
-import { t as ne } from "../useMId-BXFYayPP.js";
-import { t as re } from "../Scrollbar-BYnCO8fv.js";
-import { t as ie } from "../useFieldFeedback-C5qIqYMK.js";
-import { c as ae, o as r } from "../config-BdK5ccNT.js";
-import { n as i } from "../locale-B36KH7c3.js";
+import { i as e } from "../useComponentAttrs-e-5QAjdw.js";
+import { t } from "../Icon-lcN1rS87.js";
+import { t as n } from "../useMotionTransition-Bxnnb_9u.js";
+import { n as ee, t as te } from "../overlay-oR-5MDuE.js";
+import { t as ne } from "../overlayPlacement-Cd20JTD_.js";
+import { t as re } from "../useFloatingViewportSync-DZdJ7W8n.js";
+import { t as ie } from "../useMId-BXFYayPP.js";
+import { t as ae } from "../Scrollbar-DTeJ8P5b.js";
+import { t as r } from "../useFieldFeedback-C5qIqYMK.js";
+import { t as i } from "../VirtualScroller-CHoFCmpP.js";
+import { c as oe, o as se } from "../config-CapALqt3.js";
+import { n as ce } from "../locale-Bzm2nbEp.js";
 import "./style.js";
-import { Fragment as a, Teleport as o, Transition as oe, computed as s, createBlock as se, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, mergeProps as m, nextTick as h, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as ce, openBlock as v, ref as y, renderList as le, renderSlot as b, toDisplayString as x, unref as S, useAttrs as ue, watch as C, withCtx as w, withModifiers as de } from "vue";
+import { Fragment as le, Teleport as ue, Transition as de, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeProps as p, nextTick as m, normalizeClass as h, normalizeStyle as fe, onBeforeUnmount as pe, openBlock as g, ref as _, renderList as me, renderSlot as v, toDisplayString as y, unref as b, useAttrs as he, watch as x, withCtx as S, withModifiers as C } from "vue";
 //#region src/components/AutoComplete/AutoComplete.vue?vue&type=script&setup=true&lang.ts
-var fe = ["for"], pe = [
+var ge = ["for"], _e = [
 	"id",
 	"value",
 	"placeholder",
@@ -22,17 +25,25 @@ var fe = ["for"], pe = [
 	"aria-busy",
 	"aria-invalid",
 	"aria-describedby"
-], me = {
+], ve = {
 	key: 0,
 	class: "m-autocomplete__spinner",
 	"aria-hidden": "true"
-}, he = ["aria-label"], ge = ["aria-label", "disabled"], _e = {
+}, ye = ["aria-label"], be = ["aria-label", "disabled"], xe = [
+	"aria-selected",
+	"onMouseenter",
+	"onMousedown"
+], Se = {
 	key: 0,
 	class: "m-autocomplete__status"
-}, ve = {
+}, Ce = {
 	key: 1,
 	class: "m-autocomplete__status"
-}, T = ["aria-selected", "onMousedown"], ye = ["id", "role"], E = /* @__PURE__ */ p({
+}, we = [
+	"aria-selected",
+	"onMouseenter",
+	"onMousedown"
+], Te = ["id", "role"], Ee = 80, w = /* @__PURE__ */ f({
 	inheritAttrs: !1,
 	__name: "AutoComplete",
 	props: {
@@ -70,6 +81,14 @@ var fe = ["for"], pe = [
 		},
 		appendTo: {},
 		pt: {},
+		transition: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		virtual: {
+			type: Boolean,
+			default: void 0
+		},
 		placeholder: { default: "" },
 		name: {},
 		autocomplete: {},
@@ -80,188 +99,230 @@ var fe = ["for"], pe = [
 		"complete",
 		"clear"
 	],
-	setup(p, { emit: E }) {
-		let D = p, O = E, k = ue(), { rootAttrs: A, controlAttrs: j } = e(k, () => D.pt), M = ae(), N = i(), P = r("AutoComplete", () => D.size), be = ne("m-autocomplete"), F = s(() => D.id ?? be), { isInvalid: I, feedbackText: L, feedbackIsError: R } = ie(D), xe = s(() => D.emptyMessage ?? N.value.emptyOptions), z = y(!1), B = y(null), V = y(null), H = y(null), U = y({}), W = y(-1), G = s(() => n(D, M.value.appendTo)), K = s(() => ee(D, M.value.appendTo));
-		function Se(e) {
+	setup(f, { emit: w }) {
+		let T = f, E = w, D = he(), { rootAttrs: O, controlAttrs: De } = e(D, () => T.pt), k = oe(), { transitionName: Oe, transitionCss: ke } = n({
+			role: "popup",
+			local: () => T.transition,
+			componentName: "AutoComplete",
+			fallback: "scale-fade"
+		}), A = ce(), j = se("AutoComplete", () => T.size), Ae = ie("m-autocomplete"), M = a(() => T.id ?? Ae), { isInvalid: N, feedbackText: P, feedbackIsError: F } = r(T), je = a(() => T.emptyMessage ?? A.value.emptyOptions), I = _(!1), L = _(null), R = _(null), z = _(null), B = _({}), V = _(-1), H = a(() => ee(T, k.value.appendTo)), U = a(() => te(T, k.value.appendTo));
+		function Me(e) {
 			return typeof e == "string" ? {
 				label: e,
 				value: e
 			} : e;
 		}
-		let q = s(() => D.suggestions.map(Se)), J = s(() => {
-			let e = (D.modelValue ?? "").trim().toLowerCase();
-			return e ? q.value.filter((t) => t.label.toLowerCase().includes(e) || t.value.toLowerCase().includes(e)) : q.value;
-		}), Ce = s(() => D.clearable && !!D.modelValue && !D.disabled), we = s(() => [
+		let W = a(() => T.suggestions.map(Me)), G = a(() => {
+			let e = (T.modelValue ?? "").trim().toLowerCase();
+			return e ? W.value.filter((t) => t.label.toLowerCase().includes(e) || t.value.toLowerCase().includes(e)) : W.value;
+		}), K = a(() => T.virtual === !1 ? !1 : T.virtual === !0 || G.value.length >= Ee), q = a(() => j.value === "small" ? 28 : j.value === "large" ? 40 : 34), Ne = a(() => Math.min(240, Math.max(q.value * 4, G.value.length * q.value))), J = _(null);
+		function Y(e) {
+			return e;
+		}
+		let Pe = a(() => T.clearable && !!T.modelValue && !T.disabled), Fe = a(() => [
 			"m-autocomplete",
-			`m-autocomplete--${P.value}`,
+			`m-autocomplete--${j.value}`,
 			{
-				"m-autocomplete--disabled": D.disabled,
-				"m-autocomplete--open": z.value,
-				"m-autocomplete--loading": D.loading,
-				"m-autocomplete--invalid": I.value
+				"m-autocomplete--disabled": T.disabled,
+				"m-autocomplete--open": I.value,
+				"m-autocomplete--loading": T.loading,
+				"m-autocomplete--invalid": N.value
 			}
 		]);
-		function Y() {
-			if (!K.value || !V.value) return;
-			let e = V.value.getBoundingClientRect(), t = `${e.width}px`;
-			U.value = te(e, "bottom-start", {
+		function X() {
+			if (!U.value || !R.value) return;
+			let e = R.value.getBoundingClientRect(), t = `${e.width}px`;
+			B.value = ne(e, "bottom-start", {
 				minWidth: t,
 				width: t
 			});
 		}
-		function X(e) {
-			O("complete", e), z.value = !0, W.value = J.value.length ? 0 : -1, h(() => Y());
+		function Z(e, t = !1) {
+			E("complete", e), I.value = !0, V.value = t && G.value.length ? 0 : -1, m(() => X());
 		}
-		function Te(e) {
-			if (D.disabled) return;
+		function Ie(e) {
+			if (T.disabled) return;
 			let t = e.target.value;
-			O("update:modelValue", t), X(t);
+			E("update:modelValue", t), Z(t);
 		}
-		function Z(e) {
-			D.disabled || (O("update:modelValue", e.value), z.value = !1);
+		function Q(e) {
+			T.disabled || (E("update:modelValue", e.value), I.value = !1);
 		}
-		function Ee() {
-			D.disabled || (O("update:modelValue", ""), O("clear"), X(""));
+		function Le() {
+			T.disabled || (E("update:modelValue", ""), E("clear"), Z(""));
 		}
-		function De() {
-			if (!D.disabled) {
-				if (z.value) {
-					z.value = !1;
+		function Re() {
+			if (!T.disabled) {
+				if (I.value) {
+					I.value = !1;
 					return;
 				}
-				X(D.modelValue ?? "");
+				Z(T.modelValue ?? "");
 			}
 		}
-		function Oe(e) {
-			if (!z.value && (e.key === "ArrowDown" || e.key === "Enter")) {
-				X(D.modelValue ?? "");
+		function ze(e) {
+			if (!I.value && (e.key === "ArrowDown" || e.key === "Enter")) {
+				Z(T.modelValue ?? "", !0);
 				return;
 			}
-			if (z.value) {
+			if (I.value) {
 				if (e.key === "Escape") {
-					z.value = !1;
+					I.value = !1;
 					return;
 				}
 				if (e.key === "ArrowDown" || e.key === "ArrowUp") {
 					e.preventDefault();
-					let t = J.value.length;
+					let t = G.value.length;
 					if (!t) return;
-					let n = e.key === "ArrowDown" ? 1 : -1;
-					W.value = (W.value + n + t) % t;
+					if (V.value < 0) V.value = e.key === "ArrowDown" ? 0 : t - 1;
+					else {
+						let n = e.key === "ArrowDown" ? 1 : -1;
+						V.value = (V.value + n + t) % t;
+					}
 				}
-				if (e.key === "Enter" && W.value >= 0) {
+				if (e.key === "Enter" && V.value >= 0) {
 					e.preventDefault();
-					let t = J.value[W.value];
-					t != null && Z(t);
+					let t = G.value[V.value];
+					t != null && Q(t);
 				}
 			}
 		}
-		function Q(e) {
+		function $(e) {
 			let t = e.target;
-			B.value?.contains(t) || H.value?.contains(t) || (z.value = !1);
+			L.value?.contains(t) || z.value?.contains(t) || (I.value = !1);
 		}
-		function $() {
-			z.value && Y();
+		function Be() {
+			I.value && X();
 		}
-		C(z, async (e) => {
-			e ? (document.addEventListener("click", Q), K.value && (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0)), await h(), Y()) : (document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
-		}), C(J, (e) => {
-			e.length ? W.value >= e.length && (W.value = 0) : W.value = -1;
-		}), ce(() => {
-			document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0);
+		re(() => I.value && U.value, Be), x(V, (e) => {
+			!K.value || e < 0 || J.value?.scrollToIndex(e);
+		}), x(I, async (e) => {
+			e ? (document.addEventListener("click", $), await m(), X()) : document.removeEventListener("click", $);
+		}), x(G, (e) => {
+			e.length ? V.value >= e.length && (V.value = 0) : V.value = -1;
+		}), pe(() => {
+			document.removeEventListener("click", $);
 		});
-		let ke = s(() => z.value);
-		return (e, n) => (v(), l("div", m({
+		let Ve = a(() => I.value);
+		return (e, n) => (g(), c("div", p({
 			ref_key: "root",
-			ref: B
-		}, S(A), { class: "m-select-field" }), [
-			p.label ? (v(), l("label", {
+			ref: L
+		}, b(O), { class: "m-select-field" }), [
+			f.label ? (g(), c("label", {
 				key: 0,
 				class: "m-select-field__label",
-				for: F.value
-			}, x(p.label), 9, fe)) : c("", !0),
-			u("div", { class: g(we.value) }, [u("div", {
+				for: M.value
+			}, y(f.label), 9, ge)) : s("", !0),
+			l("div", { class: h(Fe.value) }, [l("div", {
 				ref_key: "trigger",
-				ref: V,
+				ref: R,
 				class: "m-autocomplete__control"
 			}, [
-				u("input", m(S(j), {
-					id: F.value,
+				l("input", p(b(De), {
+					id: M.value,
 					class: "m-autocomplete__input",
 					type: "text",
 					role: "combobox",
-					value: p.modelValue,
-					placeholder: p.placeholder,
-					name: p.name,
-					autocomplete: p.autocomplete,
-					autofocus: p.autofocus || void 0,
-					disabled: p.disabled,
-					"aria-expanded": z.value,
-					"aria-busy": p.loading || void 0,
-					"aria-invalid": S(I) || void 0,
-					"aria-describedby": S(L) ? `${F.value}-help` : void 0,
+					value: f.modelValue,
+					placeholder: f.placeholder,
+					name: f.name,
+					autocomplete: f.autocomplete,
+					autofocus: f.autofocus || void 0,
+					disabled: f.disabled,
+					"aria-expanded": I.value,
+					"aria-busy": f.loading || void 0,
+					"aria-invalid": b(N) || void 0,
+					"aria-describedby": b(P) ? `${M.value}-help` : void 0,
 					"aria-autocomplete": "list",
-					onInput: Te,
-					onKeydown: Oe,
-					onFocus: n[0] ||= (e) => X(p.modelValue ?? "")
-				}), null, 16, pe),
-				p.loading ? (v(), l("span", me)) : Ce.value ? (v(), l("button", {
+					onInput: Ie,
+					onKeydown: ze,
+					onFocus: n[0] ||= (e) => Z(f.modelValue ?? "")
+				}), null, 16, _e),
+				f.loading ? (g(), c("span", ve)) : Pe.value ? (g(), c("button", {
 					key: 1,
 					type: "button",
 					class: "m-autocomplete__clear",
-					"aria-label": S(N).clearInput,
-					onClick: Ee
-				}, [f(t, {
+					"aria-label": b(A).clearInput,
+					onClick: Le
+				}, [d(t, {
 					name: "close",
 					size: "sm"
-				})], 8, he)) : c("", !0),
-				p.dropdown ? (v(), l("button", {
+				})], 8, ye)) : s("", !0),
+				f.dropdown ? (g(), c("button", {
 					key: 2,
 					type: "button",
 					class: "m-autocomplete__dropdown",
-					"aria-label": S(N).showSuggestions,
-					disabled: p.disabled,
-					onClick: De
-				}, [f(t, {
+					"aria-label": b(A).showSuggestions,
+					disabled: f.disabled,
+					onClick: Re
+				}, [d(t, {
 					name: "chevron-down",
 					size: "sm"
-				})], 8, ge)) : c("", !0)
-			], 512), (v(), se(o, {
-				to: G.value.to,
-				disabled: G.value.disabled
-			}, [f(oe, { name: "m-scale-fade" }, {
-				default: w(() => [ke.value ? (v(), l("div", {
+				})], 8, be)) : s("", !0)
+			], 512), (g(), o(ue, {
+				to: H.value.to,
+				disabled: H.value.disabled
+			}, [d(de, {
+				name: b(Oe),
+				css: b(ke)
+			}, {
+				default: S(() => [Ve.value ? (g(), c("div", {
 					key: 0,
 					ref_key: "panel",
-					ref: H,
-					class: g(["m-autocomplete__panel", { "m-autocomplete__panel--teleported": K.value }]),
-					style: _(K.value ? U.value : void 0)
-				}, [f(re, {
+					ref: z,
+					class: h(["m-autocomplete__panel", { "m-autocomplete__panel--teleported": U.value }]),
+					style: fe(U.value ? B.value : void 0)
+				}, [K.value && G.value.length && !f.loading ? (g(), o(i, {
+					key: 0,
+					ref_key: "virtualList",
+					ref: J,
+					class: "m-autocomplete__panel-scroll m-autocomplete__panel-scroll--virtual",
+					role: "listbox",
+					items: G.value,
+					"item-size": q.value,
+					height: Ne.value,
+					buffer: 4
+				}, {
+					item: S(({ item: t, index: n }) => [l("div", {
+						class: h(["m-autocomplete__item", { "m-autocomplete__item--active": n === V.value }]),
+						role: "option",
+						"aria-selected": n === V.value,
+						onMouseenter: (e) => V.value = n,
+						onMousedown: C((e) => Q(Y(t)), ["prevent"])
+					}, [v(e.$slots, "item", { option: Y(t) }, () => [u(y(Y(t).label), 1)])], 42, xe)]),
+					_: 3
+				}, 8, [
+					"items",
+					"item-size",
+					"height"
+				])) : (g(), o(ae, {
+					key: 1,
 					tag: "ul",
 					role: "listbox",
 					class: "m-autocomplete__panel-scroll",
 					"fit-content": "",
 					"view-class": "m-autocomplete__panel-list"
 				}, {
-					default: w(() => [p.loading && !J.value.length ? (v(), l("li", _e, x(S(N).loading), 1)) : J.value.length ? c("", !0) : (v(), l("li", ve, [b(e.$slots, "empty", {}, () => [d(x(xe.value), 1)])])), (v(!0), l(a, null, le(J.value, (t, n) => (v(), l("li", {
+					default: S(() => [f.loading && !G.value.length ? (g(), c("li", Se, y(b(A).loading), 1)) : G.value.length ? s("", !0) : (g(), c("li", Ce, [v(e.$slots, "empty", {}, () => [u(y(je.value), 1)])])), (g(!0), c(le, null, me(G.value, (t, n) => (g(), c("li", {
 						key: `${t.value}-${n}`,
-						class: g(["m-autocomplete__item", { "m-autocomplete__item--active": n === W.value }]),
+						class: h(["m-autocomplete__item", { "m-autocomplete__item--active": n === V.value }]),
 						role: "option",
-						"aria-selected": n === W.value,
-						onMousedown: de((e) => Z(t), ["prevent"])
-					}, [b(e.$slots, "item", { option: t }, () => [d(x(t.label), 1)])], 42, T))), 128))]),
+						"aria-selected": n === V.value,
+						onMouseenter: (e) => V.value = n,
+						onMousedown: C((e) => Q(t), ["prevent"])
+					}, [v(e.$slots, "item", { option: t }, () => [u(y(t.label), 1)])], 42, we))), 128))]),
 					_: 3
-				})], 6)) : c("", !0)]),
+				}))], 6)) : s("", !0)]),
 				_: 3
-			})], 8, ["to", "disabled"]))], 2),
-			S(L) ? (v(), l("span", {
+			}, 8, ["name", "css"])], 8, ["to", "disabled"]))], 2),
+			b(P) ? (g(), c("span", {
 				key: 1,
-				id: `${F.value}-help`,
-				class: g(["m-select-field__help", { "m-select-field__help--invalid": S(R) }]),
-				role: S(R) ? "alert" : void 0
-			}, x(S(L)), 11, ye)) : c("", !0)
+				id: `${M.value}-help`,
+				class: h(["m-select-field__help", { "m-select-field__help--invalid": b(F) }]),
+				role: b(F) ? "alert" : void 0
+			}, y(b(P)), 11, Te)) : s("", !0)
 		], 16));
 	}
 });
 //#endregion
-export { E as MAutoComplete };
+export { w as MAutoComplete };