morya-ui 0.2.9 → 0.3.0

package/dist/select/index.js

@@ -1,15 +1,18 @@
-import { n as e } from "../useComponentAttrs-BTYEe61P.js";
-import { t } from "../Icon-B6IBrJ5S.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 { c as ie, i as ae, o as oe } from "../config-BdK5ccNT.js";
-import { n as se, t as ce } 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 oe } from "../VirtualScroller-CHoFCmpP.js";
+import { c as se, i as ce, o as le } from "../config-CapALqt3.js";
+import { n as ue, t as de } from "../locale-Bzm2nbEp.js";
 import "./style.js";
-import { Fragment as r, Teleport as le, Transition as ue, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as de, createVNode as l, defineComponent as u, mergeProps as fe, nextTick as pe, normalizeClass as d, normalizeStyle as me, onBeforeUnmount as he, openBlock as f, ref as p, renderList as ge, renderSlot as _e, toDisplayString as m, unref as h, useAttrs as ve, useSlots as ye, vModelText as be, watch as xe, withCtx as Se, withDirectives as Ce, withModifiers as we } from "vue";
+import { Fragment as r, Teleport as fe, Transition as pe, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as me, createVNode as l, defineComponent as u, mergeProps as he, nextTick as ge, normalizeClass as d, normalizeStyle as _e, onBeforeUnmount as ve, openBlock as f, ref as p, renderList as ye, renderSlot as be, toDisplayString as m, unref as h, useAttrs as xe, useSlots as Se, vModelText as Ce, watch as g, withCtx as _, withDirectives as we, withModifiers as Te } from "vue";
 //#region src/components/Select/Select.vue?vue&type=script&setup=true&lang.ts
-var Te = ["for"], Ee = [
+var Ee = ["for"], De = [
 	"id",
 	"tabindex",
 	"aria-expanded",
@@ -19,42 +22,55 @@ var Te = ["for"], Ee = [
 	"aria-disabled",
 	"aria-busy",
 	"aria-multiselectable"
-], De = {
+], Oe = {
 	key: 0,
 	class: "m-select__tags"
-}, Oe = { class: "m-select__tag-label" }, ke = [
+}, ke = { class: "m-select__tag-label" }, Ae = [
 	"aria-label",
 	"disabled",
 	"onClick"
-], Ae = ["aria-label"], je = {
+], je = ["aria-label"], Me = {
 	key: 1,
 	class: "m-select__value"
-}, Me = {
+}, Ne = {
 	key: 2,
 	class: "m-select__spinner",
 	"aria-hidden": "true"
-}, Ne = { class: "m-select__suffix" }, Pe = ["aria-label"], Fe = [
+}, Pe = { class: "m-select__suffix" }, Fe = ["aria-label"], Ie = [
 	"id",
 	"aria-multiselectable",
 	"aria-label"
-], Ie = ["placeholder", "aria-label"], Le = {
+], Le = ["placeholder", "aria-label"], Re = [
+	"aria-selected",
+	"disabled",
+	"onMouseenter",
+	"onClick"
+], ze = {
 	key: 0,
 	class: "m-select__empty",
 	role: "status"
-}, Re = [
+}, Be = [
 	"aria-selected",
 	"disabled",
 	"onMouseenter",
 	"onClick"
-], ze = {
+], Ve = {
 	key: 1,
 	class: "m-select__empty",
 	role: "status"
-}, Be = [
+}, He = {
+	key: 3,
+	class: "m-select__empty",
+	role: "status"
+}, Ue = {
+	key: 4,
+	class: "m-select__empty",
+	role: "status"
+}, We = [
 	"name",
 	"required",
 	"value"
-], Ve = ["id", "role"], g = /* @__PURE__ */ u({
+], Ge = ["id", "role"], Ke = 80, qe = /* @__PURE__ */ u({
 	inheritAttrs: !1,
 	__name: "Select",
 	props: {
@@ -118,6 +134,14 @@ var Te = ["for"], Ee = [
 		appendTo: {},
 		placement: { default: "bottom-start" },
 		pt: {},
+		transition: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		virtual: {
+			type: Boolean,
+			default: void 0
+		},
 		placeholder: {},
 		name: {}
 	},
@@ -130,130 +154,154 @@ var Te = ["for"], Ee = [
 		"search",
 		"create"
 	],
-	setup(u, { emit: g }) {
-		let _ = u, v = g, He = ye(), Ue = ve(), { rootAttrs: We, controlAttrs: Ge } = e(Ue, () => _.pt, { controlKey: "control" }), y = ae("Select"), b = ie(), x = se(), Ke = p(null), S = p(null), C = p(null), w = p(null), T = p(!1), E = p(""), D = p(-1), qe = p({}), O = p([]), Je = ne("m-select"), k = i(() => _.id ?? Je), Ye = i(() => _.emptyMessage ?? x.value.emptyOptions), A = i(() => _.multiple ?? y.value.multiple ?? !1), Xe = i(() => _.tag ?? y.value.tag ?? !1), j = i(() => _.remote ?? y.value.remote ?? !1), M = i(() => _.loading ?? !1), Ze = i(() => _.fluid ?? y.value.fluid ?? !1), Qe = i(() => _.showClear ?? _.clearable ?? y.value.showClear ?? y.value.clearable ?? !1), N = i(() => _.filter ?? y.value.filter ?? !1), $e = oe("Select", () => _.size), et = i(() => n(_, b.value.appendTo)), P = i(() => ee(_, b.value.appendTo)), F = i(() => _.invalid || !!_.errorMessage), I = i(() => _.errorMessage || _.helpText), tt = i(() => !!_.errorMessage || F.value && !!_.helpText), L = i(() => A.value ? Array.isArray(_.modelValue) ? _.modelValue : _.modelValue == null ? [] : [_.modelValue] : _.modelValue == null || Array.isArray(_.modelValue) ? [] : [_.modelValue]), R = i(() => {
-			let e = new Set(_.options.map((e) => String(e.value))), t = [];
+	setup(u, { emit: qe }) {
+		let v = u, y = qe, Je = Se(), Ye = xe(), { rootAttrs: Xe, controlAttrs: Ze } = e(Ye, () => v.pt, { controlKey: "control" }), b = ce("Select"), Qe = se(), { transitionName: $e, transitionCss: et } = n({
+			role: "popup",
+			local: () => v.transition,
+			componentName: "Select",
+			fallback: "scale-fade"
+		}), x = ue(), tt = p(null), S = p(null), C = p(null), w = p(null), T = p(!1), E = p(""), D = p(-1), nt = p({}), O = p([]), rt = ie("m-select"), k = i(() => v.id ?? rt), it = i(() => v.emptyMessage ?? x.value.emptyOptions), A = i(() => v.multiple ?? b.value.multiple ?? !1), at = i(() => v.tag ?? b.value.tag ?? !1), j = i(() => v.remote ?? b.value.remote ?? !1), M = i(() => v.loading ?? !1), ot = i(() => v.fluid ?? b.value.fluid ?? !1), st = i(() => v.showClear ?? v.clearable ?? b.value.showClear ?? b.value.clearable ?? !1), N = i(() => v.filter ?? b.value.filter ?? !1), P = le("Select", () => v.size), ct = i(() => ee(v, Qe.value.appendTo)), F = i(() => te(v, Qe.value.appendTo)), I = i(() => v.invalid || !!v.errorMessage), L = i(() => v.errorMessage || v.helpText), lt = i(() => !!v.errorMessage || I.value && !!v.helpText), R = i(() => A.value ? Array.isArray(v.modelValue) ? v.modelValue : v.modelValue == null ? [] : [v.modelValue] : v.modelValue == null || Array.isArray(v.modelValue) ? [] : [v.modelValue]), z = i(() => {
+			let e = new Set(v.options.map((e) => String(e.value))), t = [];
 			for (let n of O.value) e.has(String(n.value)) || (t.push(n), e.add(String(n.value)));
-			for (let n of L.value) e.has(String(n)) || (t.push({
+			for (let n of R.value) e.has(String(n)) || (t.push({
 				label: String(n),
 				value: n
 			}), e.add(String(n)));
-			return [..._.options, ...t];
+			return [...v.options, ...t];
 		});
-		function nt(e) {
-			return R.value.find((t) => t.value === e);
+		function ut(e) {
+			return z.value.find((t) => t.value === e);
 		}
-		let z = i(() => L.value.map((e) => nt(e) ?? {
+		let B = i(() => R.value.map((e) => ut(e) ?? {
 			label: String(e),
 			value: e
-		})), rt = i(() => {
-			let e = z.value;
-			return _.maxTagCount == null || e.length <= _.maxTagCount ? e : e.slice(0, _.maxTagCount);
-		}), B = i(() => Math.max(0, z.value.length - rt.value.length)), V = i(() => A.value ? void 0 : z.value[0]), it = i(() => V.value?.label ?? _.placeholder ?? x.value.selectPlaceholder), H = i(() => L.value.length > 0), at = i(() => Qe.value && H.value && !_.disabled), U = i(() => E.value.trim()), ot = i(() => !Xe.value || !N.value || !U.value ? !1 : !R.value.some((e) => e.label.toLowerCase() === U.value.toLowerCase() || String(e.value) === U.value)), W = i(() => {
-			if (j.value) return _.options;
-			let e = U.value.toLowerCase();
-			return e ? R.value.filter((t) => t.label.toLowerCase().includes(e)) : R.value;
-		}), G = i(() => ot.value ? [{
-			label: U.value,
-			value: U.value,
+		})), dt = i(() => {
+			let e = B.value;
+			return v.maxTagCount == null || e.length <= v.maxTagCount ? e : e.slice(0, v.maxTagCount);
+		}), V = i(() => Math.max(0, B.value.length - dt.value.length)), H = i(() => A.value ? void 0 : B.value[0]), ft = i(() => H.value?.label ?? v.placeholder ?? x.value.selectPlaceholder), U = i(() => R.value.length > 0), pt = i(() => st.value && U.value && !v.disabled), W = i(() => E.value.trim()), mt = i(() => !at.value || !N.value || !W.value ? !1 : !z.value.some((e) => e.label.toLowerCase() === W.value.toLowerCase() || String(e.value) === W.value)), ht = i(() => {
+			if (j.value) return v.options;
+			let e = W.value.toLowerCase();
+			return e ? z.value.filter((t) => t.label.toLowerCase().includes(e)) : z.value;
+		}), G = i(() => mt.value ? [{
+			label: W.value,
+			value: W.value,
 			created: !0
-		}, ...W.value] : W.value), K = i(() => G.value.filter((e) => !e.disabled)), st = i(() => ce(x.value.createOption, { value: U.value })), ct = i(() => ce(x.value.moreTags, { count: B.value }));
-		function q(e) {
-			return L.value.some((t) => t === e);
-		}
+		}, ...ht.value] : ht.value), K = i(() => G.value.filter((e) => !e.disabled)), gt = i(() => de(x.value.createOption, { value: W.value })), _t = i(() => de(x.value.moreTags, { count: V.value })), q = i(() => v.virtual === !1 ? !1 : v.virtual === !0 || G.value.length >= Ke), vt = i(() => P.value === "small" ? 28 : P.value === "large" ? 40 : 34), yt = i(() => Math.min(240, Math.max(vt.value * 4, G.value.length * vt.value))), bt = p(null);
 		function J(e) {
-			v("update:modelValue", e), v("change", e);
-		}
-		function lt() {
-			if (!P.value || !S.value) return;
-			let e = S.value.getBoundingClientRect();
-			qe.value = te(e, _.placement === "bottom-end" ? "bottom-end" : "bottom-start", { minWidth: `${e.width}px` });
+			return e;
 		}
 		function Y(e) {
-			_.disabled || T.value === e || (T.value = e, e ? (E.value = "", D.value = Math.max(0, K.value.findIndex((e) => !e.created && q(e.value))), v("show"), pe(() => {
-				lt(), N.value ? w.value?.focus({ preventScroll: !0 }) : C.value?.focus({ preventScroll: !0 });
-			})) : (E.value = "", v("hide")));
+			return R.value.some((t) => t === e);
 		}
 		function X(e) {
+			y("update:modelValue", e), y("change", e);
+		}
+		function xt() {
+			if (!F.value || !S.value) return;
+			let e = S.value.getBoundingClientRect();
+			nt.value = ne(e, v.placement === "bottom-end" ? "bottom-end" : "bottom-start", { minWidth: `${e.width}px` });
+		}
+		function Z(e, t = "none") {
+			if (!(v.disabled || T.value === e)) {
+				if (T.value = e, e) {
+					if (E.value = "", t === "none") D.value = -1;
+					else if (t === "last") D.value = Math.max(0, K.value.length - 1);
+					else {
+						let e = K.value.findIndex((e) => !e.created && Y(e.value));
+						D.value = e >= 0 ? e : K.value.length ? 0 : -1;
+					}
+					y("show"), ge(() => {
+						xt(), N.value ? w.value?.focus({ preventScroll: !0 }) : C.value?.focus({ preventScroll: !0 });
+					});
+				} else E.value = "", y("hide");
+			}
+		}
+		function Q(e) {
 			if (!e.disabled) {
 				if (e.created) {
-					ut();
+					St();
 					return;
 				}
 				if (A.value) {
-					J(q(e.value) ? L.value.filter((t) => t !== e.value) : [...L.value, e.value]);
+					X(Y(e.value) ? R.value.filter((t) => t !== e.value) : [...R.value, e.value]);
 					return;
 				}
-				J(e.value), Y(!1), S.value?.focus({ preventScroll: !0 });
+				X(e.value), Z(!1), S.value?.focus({ preventScroll: !0 });
 			}
 		}
-		function ut() {
-			let e = U.value;
-			if (!e || !ot.value) return;
+		function St() {
+			let e = W.value;
+			if (!e || !mt.value) return;
 			let t = {
 				label: e,
 				value: e
 			};
-			O.value.some((e) => e.value === t.value) || (O.value = [...O.value, t]), v("create", t), X({ ...t }), E.value = "";
+			O.value.some((e) => e.value === t.value) || (O.value = [...O.value, t]), y("create", t), Q({ ...t }), E.value = "";
 		}
-		function dt(e, t) {
-			t.stopPropagation(), t.preventDefault(), !(_.disabled || !A.value) && J(L.value.filter((t) => t !== e));
+		function Ct(e, t) {
+			t.stopPropagation(), t.preventDefault(), !(v.disabled || !A.value) && X(R.value.filter((t) => t !== e));
 		}
-		function ft(e) {
-			e?.stopPropagation(), e?.preventDefault(), !(_.disabled || !H.value) && (J(A.value ? [] : void 0), v("clear"), S.value?.focus({ preventScroll: !0 }));
+		function wt(e) {
+			e?.stopPropagation(), e?.preventDefault(), !(v.disabled || !U.value) && (X(A.value ? [] : void 0), y("clear"), S.value?.focus({ preventScroll: !0 }));
 		}
-		function pt(e) {
-			_.disabled || [
+		function Tt(e) {
+			v.disabled || [
 				"Enter",
 				" ",
 				"ArrowDown",
 				"ArrowUp"
-			].includes(e.key) && (e.preventDefault(), T.value || Y(!0));
+			].includes(e.key) && (e.preventDefault(), T.value || Z(!0, e.key === "ArrowUp" ? "last" : "selected"));
 		}
-		function Z(e) {
+		function Et(e) {
 			if (e.key === "Escape") {
-				e.preventDefault(), Y(!1), S.value?.focus({ preventScroll: !0 });
+				e.preventDefault(), Z(!1), S.value?.focus({ preventScroll: !0 });
 				return;
 			}
 			let t = K.value.length;
-			if (t && ((e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), D.value = (D.value + (e.key === "ArrowDown" ? 1 : -1) + t) % t), e.key === "Home" && (e.preventDefault(), D.value = 0), e.key === "End" && (e.preventDefault(), D.value = t - 1), e.key === "Enter" || e.key === " " && e.target !== w.value)) {
+			if (t && ((e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), D.value < 0 ? D.value = e.key === "ArrowDown" ? 0 : t - 1 : D.value = (D.value + (e.key === "ArrowDown" ? 1 : -1) + t) % t), e.key === "Home" && (e.preventDefault(), D.value = 0), e.key === "End" && (e.preventDefault(), D.value = t - 1), e.key === "Enter" || e.key === " " && e.target !== w.value)) {
 				let t = K.value[D.value];
-				t && (e.preventDefault(), X(t));
+				t && (e.preventDefault(), Q(t));
 			}
 		}
-		function Q(e) {
-			T.value && !Ke.value?.contains(e.target) && !C.value?.contains(e.target) && Y(!1);
+		function $(e) {
+			T.value && !tt.value?.contains(e.target) && !C.value?.contains(e.target) && Z(!1);
 		}
-		function $() {
-			T.value && lt();
+		function Dt() {
+			T.value && xt();
 		}
-		return xe(E, (e) => {
-			D.value = K.value.length ? 0 : -1, T.value && (N.value || j.value) && v("search", e);
-		}), xe(T, (e) => {
-			e && j.value && v("search", E.value), e ? (document.addEventListener("click", Q), P.value && (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0))) : (document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
-		}), he(() => {
-			document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0);
-		}), (e, n) => (f(), s("div", fe({
+		return re(() => T.value && F.value, Dt), g(D, (e) => {
+			if (!q.value || e < 0) return;
+			let t = K.value[e];
+			if (!t) return;
+			let n = G.value.findIndex((e) => e.value === t.value && !!e.created == !!t.created);
+			n >= 0 && bt.value?.scrollToIndex(n);
+		}), g(E, (e) => {
+			D.value = K.value.length ? 0 : -1, T.value && (N.value || j.value) && y("search", e);
+		}), g(T, (e) => {
+			e && j.value && y("search", E.value), e ? document.addEventListener("click", $) : document.removeEventListener("click", $);
+		}), ve(() => {
+			document.removeEventListener("click", $);
+		}), (e, n) => (f(), s("div", he({
 			ref_key: "root",
-			ref: Ke
-		}, h(We), { class: ["m-select-field", { "m-select-field--fluid": Ze.value }] }), [
+			ref: tt
+		}, h(Xe), { class: ["m-select-field", { "m-select-field--fluid": ot.value }] }), [
 			u.label ? (f(), s("label", {
 				key: 0,
 				class: "m-select-field__label",
 				for: k.value
-			}, m(u.label), 9, Te)) : o("", !0),
+			}, m(u.label), 9, Ee)) : o("", !0),
 			c("div", { class: d(["m-select__control", {
-				"m-select__control--clearable": at.value,
+				"m-select__control--clearable": pt.value,
 				"m-select__control--open": T.value
-			}]) }, [c("div", fe(h(Ge), {
+			}]) }, [c("div", he(h(Ze), {
 				id: k.value,
 				ref_key: "trigger",
 				ref: S,
-				class: ["m-select", [`m-select--${h($e)}`, {
-					"m-select--invalid": F.value,
+				class: ["m-select", [`m-select--${h(P)}`, {
+					"m-select--invalid": I.value,
 					"m-select--open": T.value,
-					"m-select--placeholder": !H.value,
-					"m-select--fluid": Ze.value,
+					"m-select--placeholder": !U.value,
+					"m-select--fluid": ot.value,
 					"m-select--multiple": A.value,
 					"m-select--disabled": u.disabled,
 					"m-select--loading": M.value
@@ -263,122 +311,169 @@ var Te = ["for"], Ee = [
 				"aria-expanded": T.value,
 				"aria-haspopup": "listbox",
 				"aria-controls": `${k.value}-listbox`,
-				"aria-invalid": F.value || void 0,
-				"aria-describedby": I.value ? `${k.value}-help` : void 0,
+				"aria-invalid": I.value || void 0,
+				"aria-describedby": L.value ? `${k.value}-help` : void 0,
 				"aria-disabled": u.disabled || void 0,
 				"aria-busy": M.value || void 0,
 				"aria-multiselectable": A.value || void 0,
-				onClick: n[0] ||= (e) => Y(!T.value),
-				onKeydown: pt
-			}), [A.value && H.value ? (f(), s("div", De, [(f(!0), s(r, null, ge(rt.value, (e) => (f(), s("span", {
+				onClick: n[0] ||= (e) => Z(!T.value),
+				onKeydown: Tt
+			}), [A.value && U.value ? (f(), s("div", Oe, [(f(!0), s(r, null, ye(dt.value, (e) => (f(), s("span", {
 				key: String(e.value),
 				class: "m-select__tag"
-			}, [c("span", Oe, m(e.label), 1), c("button", {
+			}, [c("span", ke, m(e.label), 1), c("button", {
 				class: "m-select__tag-remove",
 				type: "button",
 				"aria-label": h(x).removeTag,
 				disabled: u.disabled,
-				onClick: (t) => dt(e.value, t)
+				onClick: (t) => Ct(e.value, t)
 			}, [l(t, {
 				name: "close",
 				size: "sm"
-			})], 8, ke)]))), 128)), B.value ? (f(), s("span", {
+			})], 8, Ae)]))), 128)), V.value ? (f(), s("span", {
 				key: 0,
 				class: "m-select__tag m-select__tag--more",
-				"aria-label": ct.value
-			}, " +" + m(B.value), 9, Ae)) : o("", !0)])) : (f(), s("span", je, [h(He).value && H.value && V.value ? _e(e.$slots, "value", { option: V.value }, void 0, void 0, 0) : (f(), s(r, { key: 1 }, [de(m(it.value), 1)], 64))])), M.value ? (f(), s("span", Me)) : o("", !0)], 16, Ee), c("div", Ne, [at.value ? (f(), s("button", {
+				"aria-label": _t.value
+			}, " +" + m(V.value), 9, je)) : o("", !0)])) : (f(), s("span", Me, [h(Je).value && U.value && H.value ? be(e.$slots, "value", { option: H.value }, void 0, void 0, 0) : (f(), s(r, { key: 1 }, [me(m(ft.value), 1)], 64))])), M.value ? (f(), s("span", Ne)) : o("", !0)], 16, De), c("div", Pe, [pt.value ? (f(), s("button", {
 				key: 0,
 				class: "m-select__clear",
 				type: "button",
 				"aria-label": h(x).clear,
-				onClick: ft
+				onClick: wt
 			}, [l(t, {
 				name: "close",
 				class: "m-control-affix-icon"
-			})], 8, Pe)) : o("", !0), c("span", {
+			})], 8, Fe)) : o("", !0), c("span", {
 				class: d(["m-select__indicator", { "m-select__indicator--open": T.value }]),
 				"aria-hidden": "true"
 			}, [l(t, {
 				name: "chevron-down",
 				class: "m-control-affix-icon"
 			})], 2)])], 2),
-			(f(), a(le, {
-				to: et.value.to,
-				disabled: et.value.disabled
-			}, [l(ue, { name: "m-scale-fade" }, {
-				default: Se(() => [T.value ? (f(), s("div", {
+			(f(), a(fe, {
+				to: ct.value.to,
+				disabled: ct.value.disabled
+			}, [l(pe, {
+				name: h($e),
+				css: h(et)
+			}, {
+				default: _(() => [T.value ? (f(), s("div", {
 					key: 0,
 					id: `${k.value}-listbox`,
 					ref_key: "menu",
 					ref: C,
-					class: d(["m-select__menu", [`m-select__menu--${u.placement}`, { "m-select__menu--teleported": P.value }]]),
-					style: me(P.value ? qe.value : void 0),
+					class: d(["m-select__menu", [`m-select__menu--${u.placement}`, { "m-select__menu--teleported": F.value }]]),
+					style: _e(F.value ? nt.value : void 0),
 					role: "listbox",
 					tabindex: "-1",
 					"aria-multiselectable": A.value || void 0,
 					"aria-label": u.label ?? u.placeholder ?? h(x).selectOption,
-					onKeydown: Z
-				}, [N.value ? Ce((f(), s("input", {
-					key: 0,
-					ref_key: "filterInput",
-					ref: w,
-					"onUpdate:modelValue": n[1] ||= (e) => E.value = e,
-					class: "m-select__filter",
-					type: "search",
-					placeholder: h(x).searchPlaceholder,
-					"aria-label": h(x).filterOptions,
-					onClick: n[2] ||= we(() => {}, ["stop"]),
-					onKeydown: we(Z, ["stop"])
-				}, null, 40, Ie)), [[be, E.value]]) : o("", !0), l(re, {
-					class: "m-select__list",
-					"fit-content": "",
-					"wrap-class": "m-select__list-wrap",
-					"view-class": "m-select__list-view"
-				}, {
-					default: Se(() => [
-						M.value ? (f(), s("div", Le, m(h(x).loading), 1)) : o("", !0),
-						(f(!0), s(r, null, ge(G.value, (n) => (f(), s("button", {
-							key: n.created ? `__create:${String(n.value)}` : String(n.value),
+					onKeydown: Et
+				}, [
+					N.value ? we((f(), s("input", {
+						key: 0,
+						ref_key: "filterInput",
+						ref: w,
+						"onUpdate:modelValue": n[1] ||= (e) => E.value = e,
+						class: "m-select__filter",
+						type: "search",
+						placeholder: h(x).searchPlaceholder,
+						"aria-label": h(x).filterOptions,
+						onClick: n[2] ||= Te(() => {}, ["stop"]),
+						onKeydown: Te(Et, ["stop"])
+					}, null, 40, Le)), [[Ce, E.value]]) : o("", !0),
+					q.value && !M.value && G.value.length ? (f(), a(oe, {
+						key: 1,
+						id: `${k.value}-listbox`,
+						ref_key: "virtualList",
+						ref: bt,
+						class: "m-select__list m-select__list--virtual",
+						role: "listbox",
+						"aria-label": u.label ?? u.placeholder ?? h(x).selectOption,
+						items: G.value,
+						"item-size": vt.value,
+						height: yt.value,
+						buffer: 4
+					}, {
+						item: _(({ item: n }) => [c("button", {
 							class: d(["m-select__option", {
-								"m-select__option--selected": !n.created && q(n.value),
-								"m-select__option--highlighted": K.value[D.value]?.value === n.value && !!K.value[D.value]?.created == !!n.created,
-								"m-select__option--create": n.created
+								"m-select__option--selected": !J(n).created && Y(J(n).value),
+								"m-select__option--highlighted": K.value[D.value]?.value === J(n).value && !!K.value[D.value]?.created == !!J(n).created,
+								"m-select__option--create": J(n).created
 							}]),
 							type: "button",
 							role: "option",
-							"aria-selected": n.created ? void 0 : q(n.value),
-							disabled: n.disabled,
-							onMouseenter: (e) => !n.disabled && (D.value = K.value.findIndex((e) => e.value === n.value && !!e.created == !!n.created)),
-							onClick: (e) => X(n)
-						}, [_e(e.$slots, "option", { option: n }, () => [c("span", null, m(n.created ? st.value : n.label), 1)]), !n.created && q(n.value) ? (f(), a(t, {
+							"aria-selected": J(n).created ? void 0 : Y(J(n).value),
+							disabled: J(n).disabled,
+							onMouseenter: (e) => !J(n).disabled && (D.value = K.value.findIndex((e) => e.value === J(n).value && !!e.created == !!J(n).created)),
+							onClick: (e) => Q(J(n))
+						}, [be(e.$slots, "option", { option: J(n) }, () => [c("span", null, m(J(n).created ? gt.value : J(n).label), 1)]), !J(n).created && Y(J(n).value) ? (f(), a(t, {
 							key: 0,
 							class: "m-select__check",
 							name: "check",
 							size: "sm"
-						})) : o("", !0)], 42, Re))), 128)),
-						!G.value.length && !M.value ? (f(), s("div", ze, m(Ye.value), 1)) : o("", !0)
-					]),
-					_: 3
-				})], 46, Fe)) : o("", !0)]),
+						})) : o("", !0)], 42, Re)]),
+						_: 3
+					}, 8, [
+						"id",
+						"aria-label",
+						"items",
+						"item-size",
+						"height"
+					])) : (f(), a(ae, {
+						key: 2,
+						id: `${k.value}-listbox`,
+						class: "m-select__list",
+						"fit-content": "",
+						"wrap-class": "m-select__list-wrap",
+						"view-class": "m-select__list-view"
+					}, {
+						default: _(() => [
+							M.value ? (f(), s("div", ze, m(h(x).loading), 1)) : o("", !0),
+							(f(!0), s(r, null, ye(G.value, (n) => (f(), s("button", {
+								key: n.created ? `__create:${String(n.value)}` : String(n.value),
+								class: d(["m-select__option", {
+									"m-select__option--selected": !n.created && Y(n.value),
+									"m-select__option--highlighted": K.value[D.value]?.value === n.value && !!K.value[D.value]?.created == !!n.created,
+									"m-select__option--create": n.created
+								}]),
+								type: "button",
+								role: "option",
+								"aria-selected": n.created ? void 0 : Y(n.value),
+								disabled: n.disabled,
+								onMouseenter: (e) => !n.disabled && (D.value = K.value.findIndex((e) => e.value === n.value && !!e.created == !!n.created)),
+								onClick: (e) => Q(n)
+							}, [be(e.$slots, "option", { option: n }, () => [c("span", null, m(n.created ? gt.value : n.label), 1)]), !n.created && Y(n.value) ? (f(), a(t, {
+								key: 0,
+								class: "m-select__check",
+								name: "check",
+								size: "sm"
+							})) : o("", !0)], 42, Be))), 128)),
+							!G.value.length && !M.value ? (f(), s("div", Ve, m(it.value), 1)) : o("", !0)
+						]),
+						_: 3
+					}, 8, ["id"])),
+					q.value && M.value ? (f(), s("div", He, m(h(x).loading), 1)) : q.value && !G.value.length && !M.value ? (f(), s("div", Ue, m(it.value), 1)) : o("", !0)
+				], 46, Ie)) : o("", !0)]),
 				_: 3
-			})], 8, ["to", "disabled"])),
+			}, 8, ["name", "css"])], 8, ["to", "disabled"])),
 			u.required ? (f(), s("input", {
 				key: 1,
 				class: "m-select__required-input",
 				tabindex: "-1",
 				"aria-hidden": "true",
 				name: u.name,
-				required: !H.value,
-				value: A.value ? L.value.join(",") : L.value[0]
-			}, null, 8, Be)) : o("", !0),
-			I.value ? (f(), s("span", {
+				required: !U.value,
+				value: A.value ? R.value.join(",") : R.value[0]
+			}, null, 8, We)) : o("", !0),
+			L.value ? (f(), s("span", {
 				key: 2,
 				id: `${k.value}-help`,
-				class: d(["m-select-field__help", { "m-select-field__help--invalid": tt.value }]),
-				role: tt.value ? "alert" : void 0
-			}, m(I.value), 11, Ve)) : o("", !0)
+				class: d(["m-select-field__help", { "m-select-field__help--invalid": lt.value }]),
+				role: lt.value ? "alert" : void 0
+			}, m(L.value), 11, Ge)) : o("", !0)
 		], 16));
 	}
 });
 //#endregion
-export { g as MSelect };
+export { qe as MSelect };