morya-ui 0.3.1 → 0.3.2

package/dist/select/index.js

@@ -1,546 +1,3 @@
-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 "../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 { t as e } from "../Select-CKGrSoaC.js";
 import "./style.js";
-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",
-	"tabindex",
-	"aria-expanded",
-	"aria-controls",
-	"aria-invalid",
-	"aria-describedby",
-	"aria-disabled",
-	"aria-busy",
-	"aria-multiselectable"
-], De = {
-	key: 0,
-	class: "m-select__tags"
-}, Oe = { class: "m-select__tag-label" }, ke = [
-	"aria-label",
-	"disabled",
-	"onClick"
-], Ae = ["aria-label"], je = {
-	key: 1,
-	class: "m-select__value"
-}, Me = {
-	key: 2,
-	class: "m-select__spinner",
-	"aria-hidden": "true"
-}, Ne = { class: "m-select__suffix" }, Pe = ["aria-label"], Fe = [
-	"id",
-	"aria-multiselectable",
-	"aria-label"
-], 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"
-}, Ve = {
-	key: 0,
-	class: "m-select__group-label",
-	role: "presentation"
-}, He = [
-	"aria-selected",
-	"disabled",
-	"onMouseenter",
-	"onClick"
-], Ue = {
-	key: 1,
-	class: "m-select__empty",
-	role: "status"
-}, 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"
-], Je = ["id", "role"], Ye = 80, Xe = /* @__PURE__ */ d({
-	inheritAttrs: !1,
-	__name: "Select",
-	props: {
-		modelValue: { default: void 0 },
-		options: {},
-		label: {},
-		helpText: {},
-		invalid: {
-			type: Boolean,
-			default: !1
-		},
-		errorMessage: {},
-		id: {},
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		required: {
-			type: Boolean,
-			default: !1
-		},
-		size: {},
-		fluid: {
-			type: Boolean,
-			default: void 0
-		},
-		multiple: {
-			type: Boolean,
-			default: void 0
-		},
-		tag: {
-			type: Boolean,
-			default: void 0
-		},
-		remote: {
-			type: Boolean,
-			default: void 0
-		},
-		loading: {
-			type: Boolean,
-			default: void 0
-		},
-		maxTagCount: {},
-		showClear: {
-			type: Boolean,
-			default: void 0
-		},
-		clearable: {
-			type: Boolean,
-			default: void 0
-		},
-		emptyMessage: {},
-		filter: {
-			type: Boolean,
-			default: void 0
-		},
-		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",
-		"create"
-	],
-	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 [...V.value, ...t];
-		});
-		function mt(e) {
-			return pt.value.find((t) => t.value === e);
-		}
-		let H = a(() => B.value.map((e) => mt(e) ?? {
-			label: String(e),
-			value: 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 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) {
-					At();
-					return;
-				}
-				if (M.value) {
-					Z(X(e.value) ? B.value.filter((t) => t !== e.value) : [...B.value, e.value]);
-					return;
-				}
-				Z(e.value), Q(!1), w.value?.focus({ preventScroll: !0 });
-			}
-		}
-		function At() {
-			let e = W.value;
-			if (!e || !bt.value) return;
-			let t = {
-				label: e,
-				value: e
-			};
-			A.value.some((e) => e.value === t.value) || (A.value = [...A.value, t]), b("create", t), $({ ...t }), O.value = "";
-		}
-		function jt(e, t) {
-			t.stopPropagation(), t.preventDefault(), !(y.disabled || !M.value) && Z(B.value.filter((t) => t !== e));
-		}
-		function Mt(e) {
-			e?.stopPropagation(), e?.preventDefault(), !(y.disabled || !U.value) && (Z(M.value ? [] : void 0), b("clear"), w.value?.focus({ preventScroll: !0 }));
-		}
-		function Nt(e) {
-			y.disabled || [
-				"Enter",
-				" ",
-				"ArrowDown",
-				"ArrowUp"
-			].includes(e.key) && (e.preventDefault(), D.value || Q(!0, e.key === "ArrowUp" ? "last" : "selected"));
-		}
-		function Pt(e) {
-			if (e.key === "Escape") {
-				e.preventDefault(), Q(!1), w.value?.focus({ preventScroll: !0 });
-				return;
-			}
-			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 Ft(e) {
-			D.value && !it.value?.contains(e.target) && !T.value?.contains(e.target) && Q(!1);
-		}
-		function It() {
-			D.value && kt();
-		}
-		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: 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: 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: 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: d.disabled ? -1 : 0,
-				"aria-expanded": D.value,
-				"aria-haspopup": "listbox",
-				"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"
-			}, [l("span", Oe, g(e.label), 1), l("button", {
-				class: "m-select__tag-remove",
-				type: "button",
-				"aria-label": _(C).removeTag,
-				disabled: d.disabled,
-				onClick: (t) => jt(e.value, t)
-			}, [u(t, {
-				name: "close",
-				size: "sm"
-			})], 8, ke)]))), 128)), gt.value ? (p(), c("span", {
-				key: 0,
-				class: "m-select__tag m-select__tag--more",
-				"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": _(C).clear,
-				onClick: Mt
-			}, [u(t, {
-				name: "close",
-				class: "m-control-affix-icon"
-			})], 8, Pe)) : s("", !0), l("span", {
-				class: f(["m-select__indicator", { "m-select__indicator--open": D.value }]),
-				"aria-hidden": "true"
-			}, [u(t, {
-				name: "chevron-down",
-				class: "m-control-affix-icon"
-			})], 2)])], 2),
-			(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: `${j.value}-listbox`,
-					ref_key: "menu",
-					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": 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": 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"
-						})) : 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, ["name", "css"])], 8, ["to", "disabled"])),
-			d.required ? (p(), c("input", {
-				key: 1,
-				class: "m-select__required-input",
-				tabindex: "-1",
-				"aria-hidden": "true",
-				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: `${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 { Xe as MSelect };
+export { e as MSelect };