morya-ui 0.2.9 → 0.3.1

package/dist/cascade-select/index.js

@@ -1,14 +1,16 @@
-import { n as e } from "../useComponentAttrs-BTYEe61P.js";
-import { t } from "../Icon-B6IBrJ5S.js";
-import { n, t as r } from "../overlay-oR-5MDuE.js";
+import { i as e } from "../useComponentAttrs-e-5QAjdw.js";
+import { t } from "../Icon-od9Ob-Ay.js";
+import { t as n } from "../useMotionTransition-Bxnnb_9u.js";
+import { n as r, t as i } from "../overlay-oR-5MDuE.js";
 import { t as ee } from "../overlayPlacement-Cd20JTD_.js";
-import { t as te } from "../useMenuKeyboard-BedmYE4W.js";
-import { t as ne } from "../useMId-BXFYayPP.js";
-import { t as re } from "../Scrollbar-BYnCO8fv.js";
-import { c as ie, i as ae, o as oe } from "../config-BdK5ccNT.js";
-import { n as se } from "../locale-B36KH7c3.js";
+import { t as te } from "../useFloatingViewportSync-DZdJ7W8n.js";
+import { t as ne } from "../useMenuKeyboard-BedmYE4W.js";
+import { t as re } from "../useMId-BXFYayPP.js";
+import { t as ie } from "../Scrollbar-DTeJ8P5b.js";
+import { c as ae, i as oe, o as se } from "../config-CapALqt3.js";
+import { n as ce } from "../locale-Bzm2nbEp.js";
 import "./style.js";
-import { Fragment as i, Teleport as ce, Transition as le, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeProps as f, nextTick as p, normalizeClass as m, normalizeStyle as ue, onBeforeUnmount as de, openBlock as h, ref as g, renderList as fe, renderSlot as _, toDisplayString as v, unref as y, useAttrs as pe, useSlots as me, watch as b, withCtx as x } from "vue";
+import { Fragment as a, Teleport as le, Transition as ue, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, mergeProps as p, nextTick as m, normalizeClass as h, normalizeStyle as de, onBeforeUnmount as fe, openBlock as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, useAttrs as pe, useSlots as me, watch as S, withCtx as C } from "vue";
 //#region src/components/CascadeSelect/CascadeSelect.vue?vue&type=script&setup=true&lang.ts
 var he = ["for"], ge = [
 	"id",
@@ -23,8 +25,9 @@ var he = ["for"], ge = [
 }, ve = { class: "m-select__suffix" }, ye = ["aria-label"], be = ["id"], xe = ["id"], Se = [
 	"disabled",
 	"aria-selected",
+	"onMouseenter",
 	"onClick"
-], Ce = /* @__PURE__ */ d({
+], w = /* @__PURE__ */ f({
 	inheritAttrs: !1,
 	__name: "CascadeSelect",
 	props: {
@@ -61,252 +64,278 @@ var he = ["for"], ge = [
 		},
 		appendTo: {},
 		pt: {},
+		transition: {
+			type: [String, Boolean],
+			default: void 0
+		},
 		placeholder: { default: void 0 },
 		name: {}
 	},
 	emits: ["update:modelValue", "clear"],
-	setup(d, { emit: Ce }) {
-		let S = d, C = Ce, we = pe(), { rootAttrs: Te, controlAttrs: Ee } = e(we, () => S.pt, { controlKey: "control" }), De = me(), w = ae("CascadeSelect"), T = ie(), E = se(), Oe = oe("CascadeSelect", () => S.size), D = g(!1), O = g(null), k = g(null), A = g(null), ke = g({}), j = g([]), Ae = ne("m-cascadeselect"), M = a(() => S.id ?? Ae), N = a(() => n(S, T.value.appendTo)), P = a(() => r(S, T.value.appendTo)), je = a(() => S.clearable ?? w.value.clearable ?? !1), Me = a(() => S.fluid ?? w.value.fluid ?? !1), F = a(() => S.invalid || !!S.errorMessage), I = a(() => S.errorMessage || S.helpText), Ne = a(() => !!S.errorMessage || F.value && !!S.helpText), L = a(() => S.modelValue != null), R = a(() => je.value && L.value && !S.disabled), Pe = a(() => W(S.options, S.modelValue) ?? S.placeholder ?? E.value.selectPlaceholder);
-		function z(e, t) {
+	setup(f, { emit: w }) {
+		let T = f, E = w, Ce = pe(), { rootAttrs: we, controlAttrs: Te } = e(Ce, () => T.pt, { controlKey: "control" }), Ee = me(), D = oe("CascadeSelect"), O = ae(), { transitionName: De, transitionCss: Oe } = n({
+			role: "popup",
+			local: () => T.transition,
+			componentName: "CascadeSelect",
+			fallback: "scale-fade"
+		}), k = ce(), ke = se("CascadeSelect", () => T.size), A = _(!1), j = _(null), M = _(null), N = _(null), P = _({}), F = _([]), Ae = re("m-cascadeselect"), I = o(() => T.id ?? Ae), L = o(() => r(T, O.value.appendTo)), R = o(() => i(T, O.value.appendTo)), je = o(() => T.clearable ?? D.value.clearable ?? !1), Me = o(() => T.fluid ?? D.value.fluid ?? !1), z = o(() => T.invalid || !!T.errorMessage), B = o(() => T.errorMessage || T.helpText), Ne = o(() => !!T.errorMessage || z.value && !!T.helpText), V = o(() => T.modelValue != null), H = o(() => je.value && V.value && !T.disabled), Pe = o(() => J(T.options, T.modelValue) ?? T.placeholder ?? k.value.selectPlaceholder);
+		function U(e, t) {
 			if (t != null) for (let n of e) {
 				if (n.value === t) return n;
 				if (n.children?.length) {
-					let e = z(n.children, t);
+					let e = U(n.children, t);
 					if (e) return e;
 				}
 			}
 		}
-		let B = a(() => z(S.options, S.modelValue)), V = g(0), H = a(() => `${M.value}-panel`), U = te({
-			itemCount: () => j.value[V.value]?.length ?? 0,
-			isItemDisabled: (e) => !!j.value[V.value]?.[e]?.disabled,
-			enabled: D,
-			onActivate: (e) => Ie(e),
+		let W = o(() => U(T.options, T.modelValue)), G = _(0), K = o(() => `${I.value}-panel`), q = ne({
+			itemCount: () => F.value[G.value]?.length ?? 0,
+			isItemDisabled: (e) => !!F.value[G.value]?.[e]?.disabled,
+			enabled: A,
+			onActivate: (e) => Ve(e),
 			onEscape: () => {
-				D.value = !1;
+				A.value = !1;
 			},
-			returnFocusTo: k
+			returnFocusTo: M
 		});
-		function W(e, t) {
+		function J(e, t) {
 			if (t == null) return null;
 			for (let n of e) {
 				if (n.value === t) return n.label;
 				if (n.children?.length) {
-					let e = W(n.children, t);
+					let e = J(n.children, t);
 					if (e) return e;
 				}
 			}
 			return null;
 		}
-		function G() {
-			if (!k.value) return;
-			let e = k.value.getBoundingClientRect(), t = `${e.width}px`;
-			ke.value = P.value ? ee(e, "bottom-start", {
-				minWidth: t,
-				width: t
-			}) : {
-				minWidth: t,
-				width: t
-			};
+		function Y() {
+			if (!M.value) return;
+			let e = M.value.getBoundingClientRect(), t = `${e.width}px`;
+			P.value = R.value ? ee(e, "bottom-start", { minWidth: t }) : { minWidth: t };
 		}
-		function K(e, t) {
+		function X(e, t) {
 			for (let n of e) {
 				if (n.value === t) return [e];
 				if (n.children?.length) {
-					let r = K(n.children, t);
+					let r = X(n.children, t);
 					if (r) return [e, ...r];
 				}
 			}
 			return null;
 		}
-		function q() {
-			let e = U.activeIndex.value;
-			e < 0 || ((A.value?.querySelectorAll(".m-cascadeselect__column")[V.value])?.querySelectorAll(".m-cascadeselect__option")[e])?.focus({ preventScroll: !0 });
+		function Z() {
+			let e = q.activeIndex.value;
+			e < 0 || ((N.value?.querySelectorAll(".m-cascadeselect__column")[G.value])?.querySelectorAll(".m-cascadeselect__option")[e])?.focus({ preventScroll: !0 });
 		}
-		function J() {
-			D.value = !0;
-			let e = S.modelValue == null ? null : K(S.options, S.modelValue);
-			j.value = e ?? [S.options], V.value = j.value.length - 1;
-			let t = (j.value[V.value] ?? []).findIndex((e) => e.value === S.modelValue);
-			U.setActive(t), t < 0 && U.moveFirst(), p(() => {
-				G(), q();
-			});
+		function Fe(e, t, n) {
+			return q.activeIndex.value >= 0 && t === G.value && n === q.activeIndex.value;
+		}
+		function Ie(e, t) {
+			return e.children != null && e.children === F.value[t + 1];
 		}
-		function Fe() {
-			if (!S.disabled) {
-				if (D.value) {
-					D.value = !1;
+		function Le(e, t, n) {
+			e.disabled || (G.value = t, q.setActive(n));
+		}
+		function Re(e = !1) {
+			A.value = !0;
+			let t = T.modelValue == null ? null : X(T.options, T.modelValue);
+			if (F.value = t ?? [T.options], G.value = F.value.length - 1, e) {
+				let e = (F.value[G.value] ?? []).findIndex((e) => e.value === T.modelValue);
+				e >= 0 ? q.setActive(e) : q.moveFirst(), m(() => {
+					Y(), Z();
+				});
+			} else q.setActive(-1), m(() => Y());
+		}
+		function ze() {
+			if (!T.disabled) {
+				if (A.value) {
+					A.value = !1;
 					return;
 				}
-				J();
+				Re(!1);
 			}
 		}
-		function Y(e, t) {
-			Z(e, t), V.value = t + 1, p(() => {
-				U.moveFirst(), q();
+		function Be(e, t) {
+			Q(e, t), G.value = t + 1, m(() => {
+				q.moveFirst(), Z();
 			});
 		}
-		function Ie(e) {
-			let t = j.value[V.value]?.[e];
+		function Ve(e) {
+			let t = F.value[G.value]?.[e];
 			if (!(!t || t.disabled)) {
 				if (t.children?.length) {
-					Y(t, V.value);
+					Be(t, G.value);
 					return;
 				}
-				Z(t, V.value);
+				Q(t, G.value);
 			}
 		}
-		function X(e) {
-			if (D.value) {
+		function He(e) {
+			if (A.value) {
 				if (e.key === "ArrowRight") {
 					e.preventDefault();
-					let t = j.value[V.value]?.[U.activeIndex.value];
-					t?.children?.length && !t.disabled && Y(t, V.value);
+					let t = F.value[G.value]?.[q.activeIndex.value];
+					t?.children?.length && !t.disabled && Be(t, G.value);
 					return;
 				}
 				if (e.key === "ArrowLeft") {
-					if (e.preventDefault(), V.value > 0) {
-						let e = j.value[V.value];
-						--V.value;
-						let t = (j.value[V.value] ?? []).findIndex((t) => t.children === e);
-						U.setActive(t >= 0 ? t : 0), q();
+					if (e.preventDefault(), G.value > 0) {
+						let e = F.value[G.value];
+						--G.value;
+						let t = (F.value[G.value] ?? []).findIndex((t) => t.children === e);
+						q.setActive(t >= 0 ? t : 0), Z();
 					}
 					return;
 				}
-				U.onKeydown(e);
+				q.onKeydown(e);
 			}
 		}
-		function Le(e) {
-			if (!S.disabled) {
-				if (!D.value) {
-					(e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), J());
+		function Ue(e) {
+			if (!T.disabled) {
+				if (!A.value) {
+					(e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), Re(!0));
 					return;
 				}
-				X(e);
+				He(e);
 			}
 		}
-		b([U.activeIndex, V], () => {
-			D.value && q();
+		S([q.activeIndex, G], () => {
+			A.value && Z();
 		});
-		function Re(e) {
-			e.stopPropagation(), e.preventDefault(), !(S.disabled || !L.value) && (C("update:modelValue", null), C("clear"), k.value?.focus({ preventScroll: !0 }));
+		function We(e) {
+			e.stopPropagation(), e.preventDefault(), !(T.disabled || !V.value) && (E("update:modelValue", null), E("clear"), M.value?.focus({ preventScroll: !0 }));
 		}
-		function Z(e, t) {
+		function Q(e, t) {
 			if (!e.disabled) {
 				if (e.children?.length) {
-					j.value = [...j.value.slice(0, t + 1), e.children], p(() => G());
+					F.value = [...F.value.slice(0, t + 1), e.children], m(() => Y());
 					return;
 				}
-				C("update:modelValue", e.value), D.value = !1, k.value?.focus({ preventScroll: !0 });
+				E("update:modelValue", e.value), A.value = !1, M.value?.focus({ preventScroll: !0 });
 			}
 		}
-		function Q(e) {
+		function $(e) {
 			let t = e.target;
-			O.value?.contains(t) || A.value?.contains(t) || (D.value = !1);
+			j.value?.contains(t) || N.value?.contains(t) || (A.value = !1);
 		}
-		function $() {
-			D.value && G();
+		function Ge() {
+			A.value && Y();
 		}
-		return b(D, (e) => {
-			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));
-		}), de(() => {
-			document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0);
-		}), (e, n) => (h(), c("div", f({
+		return te(() => A.value && R.value, Ge), S(A, (e) => {
+			e ? document.addEventListener("click", $) : document.removeEventListener("click", $);
+		}), fe(() => {
+			document.removeEventListener("click", $);
+		}), (e, n) => (g(), l("div", p({
 			ref_key: "root",
-			ref: O
-		}, y(Te), { class: ["m-select-field m-cascadeselect", [`m-cascadeselect--${y(Oe)}`, {
+			ref: j
+		}, x(we), { class: ["m-select-field m-cascadeselect", [`m-cascadeselect--${x(ke)}`, {
 			"m-select-field--fluid": Me.value,
-			"m-cascadeselect--disabled": d.disabled,
-			"m-cascadeselect--open": D.value
+			"m-cascadeselect--disabled": f.disabled,
+			"m-cascadeselect--open": A.value
 		}]] }), [
-			d.label ? (h(), c("label", {
+			f.label ? (g(), l("label", {
 				key: 0,
 				class: "m-select-field__label",
-				for: M.value
-			}, v(d.label), 9, he)) : s("", !0),
-			l("div", { class: m(["m-cascadeselect__control m-select__control", {
-				"m-select__control--clearable": R.value,
-				"m-select__control--open": D.value
-			}]) }, [l("button", f(y(Ee), {
-				id: M.value,
+				for: I.value
+			}, b(f.label), 9, he)) : c("", !0),
+			u("div", { class: h(["m-cascadeselect__control m-select__control", {
+				"m-select__control--clearable": H.value,
+				"m-select__control--open": A.value
+			}]) }, [u("button", p(x(Te), {
+				id: I.value,
 				ref_key: "trigger",
-				ref: k,
+				ref: M,
 				type: "button",
 				class: ["m-cascadeselect__trigger", {
-					"m-cascadeselect__trigger--invalid": F.value,
-					"m-cascadeselect__trigger--placeholder": !L.value
+					"m-cascadeselect__trigger--invalid": z.value,
+					"m-cascadeselect__trigger--placeholder": !V.value
 				}],
 				role: "combobox",
-				disabled: d.disabled,
-				"aria-expanded": D.value,
-				"aria-controls": D.value ? H.value : void 0,
-				"aria-invalid": F.value || void 0,
-				"aria-describedby": I.value ? `${M.value}-help` : void 0,
+				disabled: f.disabled,
+				"aria-expanded": A.value,
+				"aria-controls": A.value ? K.value : void 0,
+				"aria-invalid": z.value || void 0,
+				"aria-describedby": B.value ? `${I.value}-help` : void 0,
 				"aria-haspopup": "listbox",
-				onClick: Fe,
-				onKeydown: Le
-			}), [y(De).value && L.value && B.value ? _(e.$slots, "value", { option: B.value }, void 0, void 0, 0) : (h(), c("span", _e, v(Pe.value), 1))], 16, ge), l("div", ve, [R.value ? (h(), c("button", {
+				onClick: ze,
+				onKeydown: Ue
+			}), [x(Ee).value && V.value && W.value ? y(e.$slots, "value", { option: W.value }, void 0, void 0, 0) : (g(), l("span", _e, b(Pe.value), 1))], 16, ge), u("div", ve, [H.value ? (g(), l("button", {
 				key: 0,
 				class: "m-select__clear",
 				type: "button",
-				"aria-label": y(E).clear,
-				onClick: Re
-			}, [u(t, {
+				"aria-label": x(k).clear,
+				onClick: We
+			}, [d(t, {
 				name: "close",
 				class: "m-control-affix-icon"
-			})], 8, ye)) : s("", !0), l("span", {
-				class: m(["m-select__indicator", { "m-select__indicator--open": D.value }]),
+			})], 8, ye)) : c("", !0), u("span", {
+				class: h(["m-select__indicator", { "m-select__indicator--open": A.value }]),
 				"aria-hidden": "true"
-			}, [u(t, {
+			}, [d(t, {
 				name: "chevron-down",
 				class: "m-control-affix-icon"
 			})], 2)])], 2),
-			I.value ? (h(), c("p", {
+			B.value ? (g(), l("p", {
 				key: 1,
-				id: `${M.value}-help`,
-				class: m(["m-select-field__help", { "m-select-field__help--invalid": Ne.value }])
-			}, v(I.value), 11, be)) : s("", !0),
-			(h(), o(ce, {
-				to: N.value.to,
-				disabled: N.value.disabled
-			}, [u(le, { name: "m-scale-fade" }, {
-				default: x(() => [D.value ? (h(), c("div", {
+				id: `${I.value}-help`,
+				class: h(["m-select-field__help", { "m-select-field__help--invalid": Ne.value }])
+			}, b(B.value), 11, be)) : c("", !0),
+			(g(), s(le, {
+				to: L.value.to,
+				disabled: L.value.disabled
+			}, [d(ue, {
+				name: x(De),
+				css: x(Oe)
+			}, {
+				default: C(() => [A.value ? (g(), l("div", {
 					key: 0,
-					id: H.value,
+					id: K.value,
 					ref_key: "panel",
-					ref: A,
-					class: m(["m-cascadeselect__panel", { "m-cascadeselect__panel--teleported": P.value }]),
-					style: ue(ke.value),
+					ref: N,
+					class: h(["m-cascadeselect__panel", { "m-cascadeselect__panel--teleported": R.value }]),
+					style: de(P.value),
 					role: "listbox",
-					onKeydown: X
-				}, [(h(!0), c(i, null, fe(j.value, (n, r) => (h(), o(re, {
+					onKeydown: He
+				}, [(g(!0), l(a, null, v(F.value, (n, r) => (g(), s(ie, {
 					key: r,
 					tag: "ul",
 					class: "m-cascadeselect__column",
 					"fit-content": "",
+					"max-height": "var(--m-cascadeselect-column-max-height)",
 					"view-class": "m-cascadeselect__column-list"
 				}, {
-					default: x(() => [(h(!0), c(i, null, fe(n, (n) => (h(), c("li", { key: String(n.value) }, [l("button", {
+					default: C(() => [(g(!0), l(a, null, v(n, (n, i) => (g(), l("li", { key: String(n.value) }, [u("button", {
 						type: "button",
-						class: m(["m-cascadeselect__option", {
-							"m-cascadeselect__option--selected": n.value === d.modelValue,
+						class: h(["m-cascadeselect__option", {
+							"m-cascadeselect__option--selected": n.value === f.modelValue,
+							"m-cascadeselect__option--in-path": Ie(n, r),
+							"m-cascadeselect__option--highlighted": Fe(n, r, i),
 							"m-cascadeselect__option--parent": !!n.children?.length
 						}]),
 						disabled: n.disabled,
 						role: "option",
-						"aria-selected": n.value === d.modelValue,
-						onClick: (e) => Z(n, r)
-					}, [_(e.$slots, "option", { option: n }, () => [l("span", null, v(n.label), 1)]), n.children?.length ? (h(), o(t, {
+						"aria-selected": n.value === f.modelValue,
+						onMouseenter: (e) => Le(n, r, i),
+						onClick: (e) => Q(n, r)
+					}, [y(e.$slots, "option", { option: n }, () => [u("span", null, b(n.label), 1)]), n.value === f.modelValue ? (g(), s(t, {
 						key: 0,
+						class: "m-cascadeselect__check",
+						name: "check",
+						size: "sm",
+						"aria-hidden": "true"
+					})) : n.children?.length ? (g(), s(t, {
+						key: 1,
 						name: "chevron-right",
 						size: "sm",
 						"aria-hidden": "true"
-					})) : s("", !0)], 10, Se)]))), 128))]),
+					})) : c("", !0)], 42, Se)]))), 128))]),
 					_: 2
-				}, 1024))), 128))], 46, xe)) : s("", !0)]),
+				}, 1024))), 128))], 46, xe)) : c("", !0)]),
 				_: 3
-			})], 8, ["to", "disabled"]))
+			}, 8, ["name", "css"])], 8, ["to", "disabled"]))
 		], 16));
 	}
 });
 //#endregion
-export { Ce as MCascadeSelect };
+export { w as MCascadeSelect };