morya-ui 0.3.0 → 0.3.1

package/dist/select/index.js

@@ -1,18 +1,18 @@
 import { i as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { t } from "../Icon-lcN1rS87.js";
+import { t } from "../Icon-od9Ob-Ay.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 { n as r, t as ee } from "../overlay-oR-5MDuE.js";
+import { t as te } from "../overlayPlacement-Cd20JTD_.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 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";
+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 Ee = ["for"], De = [
+var Te = ["for"], Ee = [
 	"id",
 	"tabindex",
 	"aria-expanded",
@@ -22,55 +22,69 @@ var Ee = ["for"], De = [
 	"aria-disabled",
 	"aria-busy",
 	"aria-multiselectable"
-], Oe = {
+], De = {
 	key: 0,
 	class: "m-select__tags"
-}, ke = { class: "m-select__tag-label" }, Ae = [
+}, Oe = { class: "m-select__tag-label" }, ke = [
 	"aria-label",
 	"disabled",
 	"onClick"
-], je = ["aria-label"], Me = {
+], Ae = ["aria-label"], je = {
 	key: 1,
 	class: "m-select__value"
-}, Ne = {
+}, Me = {
 	key: 2,
 	class: "m-select__spinner",
 	"aria-hidden": "true"
-}, Pe = { class: "m-select__suffix" }, Fe = ["aria-label"], Ie = [
+}, Ne = { class: "m-select__suffix" }, Pe = ["aria-label"], Fe = [
 	"id",
 	"aria-multiselectable",
 	"aria-label"
-], Le = ["placeholder", "aria-label"], Re = [
+], 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"
-], ze = {
+], Be = {
 	key: 0,
 	class: "m-select__empty",
 	role: "status"
-}, Be = [
+}, Ve = {
+	key: 0,
+	class: "m-select__group-label",
+	role: "presentation"
+}, He = [
 	"aria-selected",
 	"disabled",
 	"onMouseenter",
 	"onClick"
-], Ve = {
+], Ue = {
 	key: 1,
 	class: "m-select__empty",
 	role: "status"
-}, He = {
-	key: 3,
+}, We = {
+	key: 4,
 	class: "m-select__empty",
 	role: "status"
-}, Ue = {
-	key: 4,
+}, Ge = {
+	key: 5,
 	class: "m-select__empty",
 	role: "status"
-}, We = [
+}, Ke = {
+	key: 6,
+	class: "m-select__footer"
+}, qe = [
 	"name",
 	"required",
 	"value"
-], Ge = ["id", "role"], Ke = 80, qe = /* @__PURE__ */ u({
+], Je = ["id", "role"], Ye = 80, Xe = /* @__PURE__ */ d({
 	inheritAttrs: !1,
 	__name: "Select",
 	props: {
@@ -154,265 +168,317 @@ var Ee = ["for"], De = [
 		"search",
 		"create"
 	],
-	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({
+	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: () => v.transition,
+			local: () => y.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 R.value) e.has(String(n)) || (t.push({
+		}), 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 [...v.options, ...t];
+			return [...V.value, ...t];
 		});
-		function ut(e) {
-			return z.value.find((t) => t.value === e);
+		function mt(e) {
+			return pt.value.find((t) => t.value === e);
 		}
-		let B = i(() => R.value.map((e) => ut(e) ?? {
+		let H = a(() => B.value.map((e) => mt(e) ?? {
 			label: String(e),
 			value: e
-		})), 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
-		}, ...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) {
+		})), 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 Ot(e) {
+			return e.label;
+		}
 		function Y(e) {
-			return R.value.some((t) => t === e);
+			return e.option;
 		}
 		function X(e) {
-			y("update:modelValue", e), y("change", e);
+			return B.value.some((t) => t === 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) {
+			b("update:modelValue", e), b("change", e);
 		}
-		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);
+		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 = K.value.findIndex((e) => !e.created && Y(e.value));
-						D.value = e >= 0 ? e : K.value.length ? 0 : -1;
+						let e = q.value.findIndex((e) => !e.created && X(e.value));
+						k.value = e >= 0 ? e : q.value.length ? 0 : -1;
 					}
-					y("show"), ge(() => {
-						xt(), N.value ? w.value?.focus({ preventScroll: !0 }) : C.value?.focus({ preventScroll: !0 });
+					b("show"), he(() => {
+						kt(), F.value ? E.value?.focus({ preventScroll: !0 }) : T.value?.focus({ preventScroll: !0 });
 					});
-				} else E.value = "", y("hide");
+				} else O.value = "", b("hide");
 			}
 		}
-		function Q(e) {
+		function $(e) {
 			if (!e.disabled) {
 				if (e.created) {
-					St();
+					At();
 					return;
 				}
-				if (A.value) {
-					X(Y(e.value) ? R.value.filter((t) => t !== e.value) : [...R.value, e.value]);
+				if (M.value) {
+					Z(X(e.value) ? B.value.filter((t) => t !== e.value) : [...B.value, e.value]);
 					return;
 				}
-				X(e.value), Z(!1), S.value?.focus({ preventScroll: !0 });
+				Z(e.value), Q(!1), w.value?.focus({ preventScroll: !0 });
 			}
 		}
-		function St() {
+		function At() {
 			let e = W.value;
-			if (!e || !mt.value) return;
+			if (!e || !bt.value) return;
 			let t = {
 				label: e,
 				value: e
 			};
-			O.value.some((e) => e.value === t.value) || (O.value = [...O.value, t]), y("create", t), Q({ ...t }), E.value = "";
+			A.value.some((e) => e.value === t.value) || (A.value = [...A.value, t]), b("create", t), $({ ...t }), O.value = "";
 		}
-		function Ct(e, t) {
-			t.stopPropagation(), t.preventDefault(), !(v.disabled || !A.value) && X(R.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 wt(e) {
-			e?.stopPropagation(), e?.preventDefault(), !(v.disabled || !U.value) && (X(A.value ? [] : void 0), y("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 Tt(e) {
-			v.disabled || [
+		function Nt(e) {
+			y.disabled || [
 				"Enter",
 				" ",
 				"ArrowDown",
 				"ArrowUp"
-			].includes(e.key) && (e.preventDefault(), T.value || Z(!0, e.key === "ArrowUp" ? "last" : "selected"));
+			].includes(e.key) && (e.preventDefault(), D.value || Q(!0, e.key === "ArrowUp" ? "last" : "selected"));
 		}
-		function Et(e) {
+		function Pt(e) {
 			if (e.key === "Escape") {
-				e.preventDefault(), Z(!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 < 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(), Q(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 $(e) {
-			T.value && !tt.value?.contains(e.target) && !C.value?.contains(e.target) && Z(!1);
+		function Ft(e) {
+			D.value && !it.value?.contains(e.target) && !T.value?.contains(e.target) && Q(!1);
 		}
-		function Dt() {
-			T.value && xt();
+		function It() {
+			D.value && kt();
 		}
-		return re(() => T.value && F.value, Dt), g(D, (e) => {
-			if (!q.value || e < 0) return;
-			let t = K.value[e];
+		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.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({
+			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: tt
-		}, h(Xe), { class: ["m-select-field", { "m-select-field--fluid": ot.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, Ee)) : o("", !0),
-			c("div", { class: d(["m-select__control", {
-				"m-select__control--clearable": pt.value,
-				"m-select__control--open": T.value
-			}]) }, [c("div", he(h(Ze), {
-				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(P)}`, {
-					"m-select--invalid": I.value,
-					"m-select--open": T.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": ot.value,
-					"m-select--multiple": A.value,
-					"m-select--disabled": u.disabled,
-					"m-select--loading": M.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": 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) => 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", {
+				"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", ke, 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) => Ct(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, Ae)]))), 128)), V.value ? (f(), s("span", {
+			})], 8, ke)]))), 128)), gt.value ? (p(), c("span", {
 				key: 0,
 				class: "m-select__tag m-select__tag--more",
-				"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", {
+				"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: wt
-			}, [l(t, {
+				"aria-label": _(C).clear,
+				onClick: Mt
+			}, [u(t, {
 				name: "close",
 				class: "m-control-affix-icon"
-			})], 8, Fe)) : 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(fe, {
-				to: ct.value.to,
-				disabled: ct.value.disabled
-			}, [l(pe, {
-				name: h($e),
-				css: h(et)
+			(p(), o(de, {
+				to: dt.value.to,
+				disabled: dt.value.disabled
+			}, [u(fe, {
+				name: _(nt),
+				css: _(rt)
 			}, {
-				default: _(() => [T.value ? (f(), s("div", {
+				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": F.value }]]),
-					style: _e(F.value ? nt.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: Et
+					"aria-multiselectable": M.value || void 0,
+					"aria-label": d.label ?? d.placeholder ?? _(C).selectOption,
+					onKeydown: Pt
 				}, [
-					N.value ? we((f(), s("input", {
-						key: 0,
+					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: w,
-						"onUpdate:modelValue": n[1] ||= (e) => E.value = e,
+						ref: E,
+						"onUpdate:modelValue": n[1] ||= (e) => O.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`,
+						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: bt,
+						ref: Et,
 						class: "m-select__list m-select__list--virtual",
 						role: "listbox",
-						"aria-label": u.label ?? u.placeholder ?? h(x).selectOption,
+						"aria-label": d.label ?? d.placeholder ?? _(C).selectOption,
 						items: G.value,
-						"item-size": vt.value,
-						height: yt.value,
+						"item-size": wt.value,
+						height: Tt.value,
 						buffer: 4
 					}, {
-						item: _(({ item: n }) => [c("button", {
-							class: d(["m-select__option", {
-								"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
+						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": 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, {
+							"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)]),
+						})) : s("", !0)], 42, ze))]),
 						_: 3
 					}, 8, [
 						"id",
@@ -420,60 +486,61 @@ var Ee = ["for"], De = [
 						"items",
 						"item-size",
 						"height"
-					])) : (f(), a(ae, {
-						key: 2,
-						id: `${k.value}-listbox`,
+					])) : (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: _(() => [
-							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
+						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.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, {
+								"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"
-							})) : o("", !0)], 42, Be))), 128)),
-							!G.value.length && !M.value ? (f(), s("div", Ve, m(it.value), 1)) : o("", !0)
+							})) : s("", !0)], 42, He))], 64))), 128)),
+							!K.value.length && !P.value ? (p(), c("div", Ue, g(st.value), 1)) : s("", !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)]),
+					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, ["name", "css"])], 8, ["to", "disabled"])),
-			u.required ? (f(), s("input", {
+			d.required ? (p(), c("input", {
 				key: 1,
 				class: "m-select__required-input",
 				tabindex: "-1",
 				"aria-hidden": "true",
-				name: u.name,
+				name: d.name,
 				required: !U.value,
-				value: A.value ? R.value.join(",") : R.value[0]
-			}, null, 8, We)) : o("", !0),
-			L.value ? (f(), s("span", {
+				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": lt.value }]),
-				role: lt.value ? "alert" : void 0
-			}, m(L.value), 11, Ge)) : 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 { qe as MSelect };
+export { Xe as MSelect };