morya-ui 0.1.1 → 0.2.2

package/dist/select/index.js

@@ -1,14 +1,15 @@
-import { t as e } from "../Icon-DfpIfo2L.js";
-import { t } from "../useMId-BXFYayPP.js";
-import { n, t as ee } from "../overlay-oR-5MDuE.js";
-import { t as te } from "../overlayPlacement-Cd20JTD_.js";
-import { t as ne } from "../Scrollbar-BGCxnXaQ.js";
-import { c as re, i as ie, o as ae } from "../config-CI8_WBbE.js";
-import { n as oe, t as se } from "../locale-DYGhxekd.js";
+import { n as e } from "../useComponentAttrs-BTYEe61P.js";
+import { t } from "../Icon-DfpIfo2L.js";
+import { t as n } from "../useMId-BXFYayPP.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 "../Scrollbar-DoNZvgX2.js";
+import { c as ie, i as ae, o as oe } from "../config-CI8_WBbE.js";
+import { n as se, t as ce } from "../locale-DYGhxekd.js";
 import "./style.js";
-import { Fragment as r, Teleport as ce, Transition as le, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as ue, createVNode as l, defineComponent as u, nextTick as de, normalizeClass as d, normalizeStyle as fe, onBeforeUnmount as pe, openBlock as f, ref as p, renderList as me, renderSlot as he, toDisplayString as m, unref as h, useSlots as ge, vModelText as _e, watch as ve, withCtx as ye, withDirectives as be, withModifiers as xe } from "vue";
+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";
 //#region src/components/Select/Select.vue?vue&type=script&setup=true&lang.ts
-var Se = ["for"], Ce = [
+var Te = ["for"], Ee = [
 	"id",
 	"tabindex",
 	"aria-expanded",
@@ -18,38 +19,43 @@ var Se = ["for"], Ce = [
 	"aria-disabled",
 	"aria-busy",
 	"aria-multiselectable"
-], we = {
+], De = {
 	key: 0,
 	class: "m-select__tags"
-}, Te = { class: "m-select__tag-label" }, Ee = [
+}, Oe = { class: "m-select__tag-label" }, ke = [
 	"aria-label",
 	"disabled",
 	"onClick"
-], De = ["aria-label"], Oe = {
+], Ae = ["aria-label"], je = {
 	key: 1,
 	class: "m-select__value"
-}, ke = {
+}, Me = {
 	key: 2,
 	class: "m-select__spinner",
 	"aria-hidden": "true"
-}, Ae = { class: "m-select__suffix" }, je = ["aria-label"], Me = [
+}, Ne = { class: "m-select__suffix" }, Pe = ["aria-label"], Fe = [
 	"id",
 	"aria-multiselectable",
 	"aria-label"
-], Ne = ["placeholder", "aria-label"], Pe = {
+], Ie = ["placeholder", "aria-label"], Le = {
 	key: 0,
 	class: "m-select__empty",
 	role: "status"
-}, Fe = [
+}, Re = [
 	"aria-selected",
 	"disabled",
 	"onMouseenter",
 	"onClick"
-], Ie = {
+], ze = {
 	key: 1,
 	class: "m-select__empty",
 	role: "status"
-}, Le = ["required", "value"], Re = ["id", "role"], g = /* @__PURE__ */ u({
+}, Be = [
+	"name",
+	"required",
+	"value"
+], Ve = ["id", "role"], g = /* @__PURE__ */ u({
+	inheritAttrs: !1,
 	__name: "Select",
 	props: {
 		modelValue: { default: void 0 },
@@ -62,7 +68,6 @@ var Se = ["for"], Ce = [
 		},
 		errorMessage: {},
 		id: {},
-		placeholder: {},
 		disabled: {
 			type: Boolean,
 			default: !1
@@ -111,7 +116,10 @@ var Se = ["for"], Ce = [
 			default: !0
 		},
 		appendTo: {},
-		placement: { default: "bottom-start" }
+		placement: { default: "bottom-start" },
+		pt: {},
+		placeholder: {},
+		name: {}
 	},
 	emits: [
 		"update:modelValue",
@@ -123,7 +131,7 @@ var Se = ["for"], Ce = [
 		"create"
 	],
 	setup(u, { emit: g }) {
-		let _ = u, v = g, ze = ge(), y = ie("Select"), b = re(), x = oe(), Be = p(null), S = p(null), C = p(null), w = p(null), T = p(!1), E = p(""), D = p(-1), Ve = p({}), O = p([]), He = t("m-select"), k = i(() => _.id ?? He), Ue = i(() => _.emptyMessage ?? x.value.emptyOptions), A = i(() => _.multiple ?? y.value.multiple ?? !1), We = i(() => _.tag ?? y.value.tag ?? !1), j = i(() => _.remote ?? y.value.remote ?? !1), M = i(() => _.loading ?? !1), Ge = i(() => _.fluid ?? y.value.fluid ?? !1), Ke = i(() => _.showClear ?? _.clearable ?? y.value.showClear ?? y.value.clearable ?? !1), N = i(() => _.filter ?? y.value.filter ?? !1), qe = ae("Select", () => _.size), Je = i(() => n(_, b.value.appendTo)), P = i(() => ee(_, b.value.appendTo)), F = i(() => _.invalid || !!_.errorMessage), I = i(() => _.errorMessage || _.helpText), Ye = 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 _ = 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 = n("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(() => ee(_, b.value.appendTo)), P = i(() => te(_, 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({
@@ -132,44 +140,44 @@ var Se = ["for"], Ce = [
 			}), e.add(String(n)));
 			return [..._.options, ...t];
 		});
-		function Xe(e) {
+		function nt(e) {
 			return R.value.find((t) => t.value === e);
 		}
-		let z = i(() => L.value.map((e) => Xe(e) ?? {
+		let z = i(() => L.value.map((e) => nt(e) ?? {
 			label: String(e),
 			value: e
-		})), Ze = i(() => {
+		})), 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 - Ze.value.length)), V = i(() => A.value ? void 0 : z.value[0]), Qe = i(() => V.value?.label ?? _.placeholder ?? x.value.selectPlaceholder), H = i(() => L.value.length > 0), $e = i(() => Ke.value && H.value && !_.disabled), U = i(() => E.value.trim()), W = i(() => !We.value || !N.value || !U.value ? !1 : !R.value.some((e) => e.label.toLowerCase() === U.value.toLowerCase() || String(e.value) === U.value)), et = i(() => {
+		}), 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(() => W.value ? [{
+		}), G = i(() => ot.value ? [{
 			label: U.value,
 			value: U.value,
 			created: !0
-		}, ...et.value] : et.value), K = i(() => G.value.filter((e) => !e.disabled)), tt = i(() => se(x.value.createOption, { value: U.value })), nt = i(() => se(x.value.moreTags, { count: B.value }));
+		}, ...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);
 		}
-		function rt() {
+		function lt() {
 			if (!P.value || !S.value) return;
 			let e = S.value.getBoundingClientRect();
-			Ve.value = te(e, _.placement === "bottom-end" ? "bottom-end" : "bottom-start", { minWidth: `${e.width}px` });
+			qe.value = ne(e, _.placement === "bottom-end" ? "bottom-end" : "bottom-start", { minWidth: `${e.width}px` });
 		}
 		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"), de(() => {
-				rt(), N.value ? w.value?.focus({ preventScroll: !0 }) : C.value?.focus({ preventScroll: !0 });
+			_.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")));
 		}
 		function X(e) {
 			if (!e.disabled) {
 				if (e.created) {
-					it();
+					ut();
 					return;
 				}
 				if (A.value) {
@@ -179,22 +187,22 @@ var Se = ["for"], Ce = [
 				J(e.value), Y(!1), S.value?.focus({ preventScroll: !0 });
 			}
 		}
-		function it() {
+		function ut() {
 			let e = U.value;
-			if (!e || !W.value) return;
+			if (!e || !ot.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 = "";
 		}
-		function at(e, t) {
+		function dt(e, t) {
 			t.stopPropagation(), t.preventDefault(), !(_.disabled || !A.value) && J(L.value.filter((t) => t !== e));
 		}
-		function ot(e) {
+		function ft(e) {
 			e?.stopPropagation(), e?.preventDefault(), !(_.disabled || !H.value) && (J(A.value ? [] : void 0), v("clear"), S.value?.focus({ preventScroll: !0 }));
 		}
-		function st(e) {
+		function pt(e) {
 			_.disabled || [
 				"Enter",
 				" ",
@@ -214,43 +222,42 @@ var Se = ["for"], Ce = [
 			}
 		}
 		function Q(e) {
-			T.value && !Be.value?.contains(e.target) && !C.value?.contains(e.target) && Y(!1);
+			T.value && !Ke.value?.contains(e.target) && !C.value?.contains(e.target) && Y(!1);
 		}
 		function $() {
-			T.value && rt();
+			T.value && lt();
 		}
-		return ve(E, (e) => {
+		return xe(E, (e) => {
 			D.value = K.value.length ? 0 : -1, T.value && (N.value || j.value) && v("search", e);
-		}), ve(T, (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));
-		}), pe(() => {
+		}), he(() => {
 			document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0);
-		}), (t, n) => (f(), s("div", {
+		}), (e, n) => (f(), s("div", fe({
 			ref_key: "root",
-			ref: Be,
-			class: d(["m-select-field", { "m-select-field--fluid": Ge.value }])
-		}, [
+			ref: Ke
+		}, h(We), { class: ["m-select-field", { "m-select-field--fluid": Ze.value }] }), [
 			u.label ? (f(), s("label", {
 				key: 0,
 				class: "m-select-field__label",
 				for: k.value
-			}, m(u.label), 9, Se)) : o("", !0),
+			}, m(u.label), 9, Te)) : o("", !0),
 			c("div", { class: d(["m-select__control", {
-				"m-select__control--clearable": $e.value,
+				"m-select__control--clearable": at.value,
 				"m-select__control--open": T.value
-			}]) }, [c("div", {
+			}]) }, [c("div", fe(h(Ge), {
 				id: k.value,
 				ref_key: "trigger",
 				ref: S,
-				class: d(["m-select", [`m-select--${h(qe)}`, {
+				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": Ge.value,
+					"m-select--fluid": Ze.value,
 					"m-select--multiple": A.value,
 					"m-select--disabled": u.disabled,
 					"m-select--loading": M.value
-				}]]),
+				}]],
 				role: "combobox",
 				tabindex: u.disabled ? -1 : 0,
 				"aria-expanded": T.value,
@@ -262,56 +269,56 @@ var Se = ["for"], Ce = [
 				"aria-busy": M.value || void 0,
 				"aria-multiselectable": A.value || void 0,
 				onClick: n[0] ||= (e) => Y(!T.value),
-				onKeydown: st
-			}, [A.value && H.value ? (f(), s("div", we, [(f(!0), s(r, null, me(Ze.value, (t) => (f(), s("span", {
-				key: String(t.value),
+				onKeydown: pt
+			}), [A.value && H.value ? (f(), s("div", De, [(f(!0), s(r, null, ge(rt.value, (e) => (f(), s("span", {
+				key: String(e.value),
 				class: "m-select__tag"
-			}, [c("span", Te, m(t.label), 1), c("button", {
+			}, [c("span", Oe, m(e.label), 1), c("button", {
 				class: "m-select__tag-remove",
 				type: "button",
 				"aria-label": h(x).removeTag,
 				disabled: u.disabled,
-				onClick: (e) => at(t.value, e)
-			}, [l(e, {
+				onClick: (t) => dt(e.value, t)
+			}, [l(t, {
 				name: "close",
 				size: "sm"
-			})], 8, Ee)]))), 128)), B.value ? (f(), s("span", {
+			})], 8, ke)]))), 128)), B.value ? (f(), s("span", {
 				key: 0,
-				class: "m-select__tag wk-select__tag--more",
-				"aria-label": nt.value
-			}, " +" + m(B.value), 9, De)) : o("", !0)])) : (f(), s("span", Oe, [h(ze).value && H.value && V.value ? he(t.$slots, "value", { option: V.value }, void 0, void 0, 0) : (f(), s(r, { key: 1 }, [ue(m(Qe.value), 1)], 64))])), M.value ? (f(), s("span", ke)) : o("", !0)], 42, Ce), c("div", Ae, [$e.value ? (f(), s("button", {
+				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", {
 				key: 0,
 				class: "m-select__clear",
 				type: "button",
 				"aria-label": h(x).clear,
-				onClick: ot
-			}, [l(e, {
+				onClick: ft
+			}, [l(t, {
 				name: "close",
 				class: "m-control-affix-icon"
-			})], 8, je)) : o("", !0), c("span", {
+			})], 8, Pe)) : o("", !0), c("span", {
 				class: d(["m-select__indicator", { "m-select__indicator--open": T.value }]),
 				"aria-hidden": "true"
-			}, [l(e, {
+			}, [l(t, {
 				name: "chevron-down",
 				class: "m-control-affix-icon"
 			})], 2)])], 2),
-			(f(), a(ce, {
-				to: Je.value.to,
-				disabled: Je.value.disabled
-			}, [l(le, { name: "m-scale-fade" }, {
-				default: ye(() => [T.value ? (f(), s("div", {
+			(f(), a(le, {
+				to: et.value.to,
+				disabled: et.value.disabled
+			}, [l(ue, { name: "m-scale-fade" }, {
+				default: Se(() => [T.value ? (f(), s("div", {
 					key: 0,
 					id: `${k.value}-listbox`,
 					ref_key: "menu",
 					ref: C,
 					class: d(["m-select__menu", [`m-select__menu--${u.placement}`, { "m-select__menu--teleported": P.value }]]),
-					style: fe(P.value ? Ve.value : void 0),
+					style: me(P.value ? qe.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 ? be((f(), s("input", {
+				}, [N.value ? Ce((f(), s("input", {
 					key: 0,
 					ref_key: "filterInput",
 					ref: w,
@@ -320,17 +327,17 @@ var Se = ["for"], Ce = [
 					type: "search",
 					placeholder: h(x).searchPlaceholder,
 					"aria-label": h(x).filterOptions,
-					onClick: n[2] ||= xe(() => {}, ["stop"]),
-					onKeydown: xe(Z, ["stop"])
-				}, null, 40, Ne)), [[_e, E.value]]) : o("", !0), l(ne, {
+					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: ye(() => [
-						M.value ? (f(), s("div", Pe, m(h(x).loading), 1)) : o("", !0),
-						(f(!0), s(r, null, me(G.value, (n) => (f(), s("button", {
+					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),
@@ -343,16 +350,16 @@ var Se = ["for"], Ce = [
 							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)
-						}, [he(t.$slots, "option", { option: n }, () => [c("span", null, m(n.created ? tt.value : n.label), 1)]), !n.created && q(n.value) ? (f(), a(e, {
+						}, [_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, {
 							key: 0,
 							class: "m-select__check",
 							name: "check",
 							size: "sm"
-						})) : o("", !0)], 42, Fe))), 128)),
-						!G.value.length && !M.value ? (f(), s("div", Ie, m(Ue.value), 1)) : o("", !0)
+						})) : o("", !0)], 42, Re))), 128)),
+						!G.value.length && !M.value ? (f(), s("div", ze, m(Ye.value), 1)) : o("", !0)
 					]),
 					_: 3
-				})], 46, Me)) : o("", !0)]),
+				})], 46, Fe)) : o("", !0)]),
 				_: 3
 			})], 8, ["to", "disabled"])),
 			u.required ? (f(), s("input", {
@@ -360,16 +367,17 @@ var Se = ["for"], Ce = [
 				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, Le)) : o("", !0),
+			}, null, 8, Be)) : o("", !0),
 			I.value ? (f(), s("span", {
 				key: 2,
 				id: `${k.value}-help`,
-				class: d(["m-select-field__help", { "m-select-field__help--invalid": Ye.value }]),
-				role: Ye.value ? "alert" : void 0
-			}, m(I.value), 11, Re)) : o("", !0)
-		], 2));
+				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)
+		], 16));
 	}
 });
 //#endregion