morya-ui 0.2.9 → 0.3.1

package/dist/select/index.js

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