morya-ui 0.3.8 → 0.4.1

package/dist/Select-DxMlpgc5.js

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