morya-ui 0.2.9 → 0.3.0

package/dist/menubar/index.js

@@ -1,45 +1,47 @@
-import { r as e } from "../useComponentAttrs-BTYEe61P.js";
-import { t } from "../Icon-B6IBrJ5S.js";
-import { n, t as r } from "../overlay-oR-5MDuE.js";
-import { t as ee } from "../overlayPlacement-Cd20JTD_.js";
-import { t as i } from "../useMenuKeyboard-BedmYE4W.js";
-import { t as te } from "../Scrollbar-BYnCO8fv.js";
-import { t as ne } from "../icon-iOBeyIRp.js";
-import { c as re } from "../config-BdK5ccNT.js";
-import { n as ie } from "../locale-B36KH7c3.js";
+import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
+import { t } from "../Icon-lcN1rS87.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 r } from "../useMenuKeyboard-BedmYE4W.js";
+import { t as ie } from "../Scrollbar-DTeJ8P5b.js";
+import { t as ae } from "../icon-DWXkh-RM.js";
+import { c as oe } from "../config-CapALqt3.js";
+import { n as i } from "../locale-Bzm2nbEp.js";
 import "./style.js";
-import { Fragment as a, Teleport as ae, Transition as oe, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as se, createTextVNode as u, createVNode as d, defineComponent as f, mergeProps as ce, nextTick as p, normalizeClass as m, normalizeStyle as le, onBeforeUnmount as ue, onMounted as h, openBlock as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, useAttrs as de, watch as S, withCtx as C, withModifiers as w } from "vue";
+import { Fragment as a, Teleport as se, Transition as ce, computed as o, createBlock as le, createCommentVNode as s, createElementBlock as c, createElementVNode as ue, createTextVNode as l, createVNode as u, defineComponent as d, mergeProps as de, nextTick as f, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as fe, onMounted as pe, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, useAttrs as me, watch as x, withCtx as S, withModifiers as C } from "vue";
 //#region src/components/Menubar/Menubar.vue?vue&type=script&setup=true&lang.ts
-var fe = ["aria-label"], pe = {
+var he = ["aria-label"], ge = {
 	key: 0,
 	class: "m-menubar__start"
-}, me = [
+}, _e = [
 	"disabled",
 	"tabindex",
 	"aria-expanded",
 	"aria-haspopup",
 	"onClick",
 	"onFocus"
-], he = {
+], ve = {
 	key: 0,
 	class: "m-menubar__icon",
 	"aria-hidden": "true"
-}, ge = {
+}, ye = {
 	key: 1,
 	class: "m-menubar__caret",
 	"aria-hidden": "true"
-}, _e = [
+}, be = [
 	"disabled",
 	"tabindex",
 	"onClick"
-], T = {
+], xe = {
 	key: 0,
 	class: "m-menubar__icon",
 	"aria-hidden": "true"
-}, ve = {
+}, Se = {
 	key: 1,
 	class: "m-menubar__end"
-}, E = /* @__PURE__ */ f({
+}, w = /* @__PURE__ */ d({
 	inheritAttrs: !1,
 	__name: "Menubar",
 	props: {
@@ -50,201 +52,211 @@ var fe = ["aria-label"], pe = {
 			type: Boolean,
 			default: !0
 		},
-		appendTo: {}
+		appendTo: {},
+		transition: {
+			type: [String, Boolean],
+			default: void 0
+		}
 	},
 	emits: ["update:selectedKey", "select"],
-	setup(f, { emit: E }) {
-		let D = f, O = E, ye = de(), { rootAttrs: be } = e(ye, () => D.pt), k = re(), A = ie(), j = _(null), M = _(null), N = _([]), P = _({}), F = o(() => n(D, k.value.appendTo)), I = o(() => r(D, k.value.appendTo));
-		function xe(e, t) {
-			N.value[t] = e instanceof HTMLElement ? e : null;
-		}
-		function L() {
-			if (!I.value || j.value == null) return;
-			let e = N.value[j.value];
+	setup(d, { emit: w }) {
+		let T = d, E = w, D = me(), { rootAttrs: O } = e(D, () => T.pt), k = oe(), { transitionName: A, transitionCss: j } = n({
+			role: "popup",
+			local: () => T.transition,
+			componentName: "Menubar",
+			fallback: "scale-fade"
+		}), Ce = i(), M = g(null), N = g(null), P = g([]), F = g({}), I = o(() => ee(T, k.value.appendTo)), L = o(() => te(T, k.value.appendTo));
+		function we(e, t) {
+			P.value[t] = e instanceof HTMLElement ? e : null;
+		}
+		function R() {
+			if (!L.value || M.value == null) return;
+			let e = P.value[M.value];
 			if (!e) return;
 			let t = e.getBoundingClientRect();
-			P.value = ee(t, "bottom-start", { gap: 4 });
-		}
-		function R(e) {
-			return e.key ?? e.label;
+			F.value = ne(t, "bottom-start", { gap: 4 });
 		}
 		function z(e) {
-			return !!(D.selectedKey && R(e) === D.selectedKey);
+			return e.key ?? e.label;
 		}
 		function B(e) {
-			return ne(e.icon);
+			return !!(T.selectedKey && z(e) === T.selectedKey);
 		}
 		function V(e) {
-			e.disabled || (e.command?.(), O("update:selectedKey", R(e)), O("select", e));
+			return ae(e.icon);
 		}
-		function H(e, t) {
+		function H(e) {
+			e.disabled || (e.command?.(), E("update:selectedKey", z(e)), E("select", e));
+		}
+		function U(e, t) {
 			if (!t.disabled) {
-				if (W.setActive(e), !t.items?.length) {
-					V(t), j.value = null;
+				if (G.setActive(e), !t.items?.length) {
+					H(t), M.value = null;
 					return;
 				}
-				j.value = j.value === e ? null : e, j.value != null && p(() => L());
+				M.value = M.value === e ? null : e, M.value != null && f(() => R());
 			}
 		}
-		let U = o(() => j.value == null ? [] : D.model[j.value]?.items ?? []), W = i({
-			itemCount: () => D.model.length,
-			isItemDisabled: (e) => !!D.model[e]?.disabled,
+		let W = o(() => M.value == null ? [] : T.model[M.value]?.items ?? []), G = r({
+			itemCount: () => T.model.length,
+			isItemDisabled: (e) => !!T.model[e]?.disabled,
 			orientation: "horizontal",
 			initialActiveIndex: 0,
 			onActivate: (e) => {
-				let t = D.model[e];
-				t && H(e, t);
+				let t = T.model[e];
+				t && U(e, t);
 			}
-		}), G = i({
-			itemCount: () => U.value.length,
-			isItemDisabled: (e) => !!U.value[e]?.disabled,
-			enabled: () => j.value != null,
+		}), K = r({
+			itemCount: () => W.value.length,
+			isItemDisabled: (e) => !!W.value[e]?.disabled,
+			enabled: () => M.value != null,
 			onActivate: (e) => {
-				let t = U.value[e];
-				t && Z(t);
+				let t = W.value[e];
+				t && Q(t);
 			}
 		});
-		function K(e) {
-			N.value[e]?.focus({ preventScroll: !0 });
+		function q(e) {
+			P.value[e]?.focus({ preventScroll: !0 });
 		}
-		function Se() {
-			return M.value?.querySelector(".m-menubar__submenu") || document.querySelector(".m-menubar__submenu--teleported");
+		function Te() {
+			return N.value?.querySelector(".m-menubar__submenu") || document.querySelector(".m-menubar__submenu--teleported");
 		}
-		function q() {
-			let e = G.activeIndex.value;
-			e < 0 || Se()?.querySelectorAll(".m-menubar__subitem")[e]?.focus({ preventScroll: !0 });
+		function J() {
+			let e = K.activeIndex.value;
+			e < 0 || Te()?.querySelectorAll(".m-menubar__subitem")[e]?.focus({ preventScroll: !0 });
 		}
-		function J(e = !1) {
-			let t = j.value;
-			j.value = null, G.reset(), e && t != null && K(t);
+		function Y(e = !1) {
+			let t = M.value;
+			M.value = null, K.reset(), e && t != null && q(t);
 		}
-		function Y(e, t = !1) {
-			j.value = e, W.setActive(e), p(() => {
-				L(), t && (G.moveFirst(), q());
+		function X(e, t = !1) {
+			M.value = e, G.setActive(e), f(() => {
+				R(), t && (K.moveFirst(), J());
 			});
 		}
-		function X(e) {
-			W.move(e);
-			let t = W.activeIndex.value, n = D.model[t];
-			j.value != null && (n?.items?.length ? Y(t, !0) : J()), K(t);
+		function Z(e) {
+			G.move(e);
+			let t = G.activeIndex.value, n = T.model[t];
+			M.value != null && (n?.items?.length ? X(t, !0) : Y()), q(t);
 		}
-		function Ce(e) {
+		function Ee(e) {
 			if (e.key === "Escape") {
-				j.value != null && (e.preventDefault(), J(!0));
+				M.value != null && (e.preventDefault(), Y(!0));
 				return;
 			}
 			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
 				e.preventDefault();
-				let t = W.activeIndex.value, n = D.model[t];
-				n?.items?.length && !n.disabled && Y(t, !0);
+				let t = G.activeIndex.value, n = T.model[t];
+				n?.items?.length && !n.disabled && X(t, !0);
 				return;
 			}
 			if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
-				e.preventDefault(), X(e.key === "ArrowRight" ? 1 : -1);
+				e.preventDefault(), Z(e.key === "ArrowRight" ? 1 : -1);
 				return;
 			}
-			W.onKeydown(e);
+			G.onKeydown(e);
 		}
-		function we(e) {
+		function De(e) {
 			if (e.stopPropagation(), e.key === "Escape") {
-				e.preventDefault(), J(!0);
+				e.preventDefault(), Y(!0);
 				return;
 			}
 			if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
-				e.preventDefault(), X(e.key === "ArrowRight" ? 1 : -1);
+				e.preventDefault(), Z(e.key === "ArrowRight" ? 1 : -1);
 				return;
 			}
-			G.onKeydown(e);
+			K.onKeydown(e);
 		}
-		function Z(e) {
-			V(e), J(!0);
+		function Q(e) {
+			H(e), Y(!0);
 		}
-		S(W.activeIndex, (e) => {
-			e >= 0 && j.value == null && K(e);
-		}), S(G.activeIndex, () => {
-			j.value != null && q();
+		x(G.activeIndex, (e) => {
+			e >= 0 && M.value == null && q(e);
+		}), x(K.activeIndex, () => {
+			M.value != null && J();
 		});
-		function Q(e) {
+		function $(e) {
 			let t = e.target;
-			M.value?.contains(t) || document.querySelector(".m-menubar__submenu--teleported")?.contains(t) || J();
+			N.value?.contains(t) || document.querySelector(".m-menubar__submenu--teleported")?.contains(t) || Y();
 		}
-		function $() {
-			j.value != null && L();
+		function Oe() {
+			M.value != null && R();
 		}
-		return S(j, (e) => {
-			e != null && I.value ? (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0)) : (window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
-		}), h(() => document.addEventListener("click", Q)), ue(() => {
-			document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0);
-		}), (e, n) => (g(), l("nav", ce(x(be), {
+		return re(() => M.value != null && L.value, Oe), pe(() => document.addEventListener("click", $)), fe(() => {
+			document.removeEventListener("click", $);
+		}), (e, n) => (h(), c("nav", de(b(O), {
 			ref_key: "root",
-			ref: M,
+			ref: N,
 			class: "m-menubar",
-			"aria-label": x(A).menubar,
-			onKeydown: Ce
+			"aria-label": b(Ce).menubar,
+			onKeydown: Ee
 		}), [
-			e.$slots.start ? (g(), l("div", pe, [y(e.$slots, "start")])) : c("", !0),
-			(g(!0), l(a, null, v(f.model, (e, n) => (g(), l("div", {
+			e.$slots.start ? (h(), c("div", ge, [v(e.$slots, "start")])) : s("", !0),
+			(h(!0), c(a, null, _(d.model, (e, n) => (h(), c("div", {
 				key: `${e.label}-${n}`,
-				class: m(["m-menubar__item", {
-					"m-menubar__item--open": j.value === n,
-					"m-menubar__item--selected": z(e)
+				class: p(["m-menubar__item", {
+					"m-menubar__item--open": M.value === n,
+					"m-menubar__item--selected": B(e)
 				}])
-			}, [se("button", {
+			}, [ue("button", {
 				ref_for: !0,
-				ref: (e) => xe(e, n),
+				ref: (e) => we(e, n),
 				type: "button",
-				class: m(["m-menubar__trigger", { "m-menubar__trigger--selected": z(e) }]),
+				class: p(["m-menubar__trigger", { "m-menubar__trigger--selected": B(e) }]),
 				disabled: e.disabled,
-				tabindex: x(W).tabindexFor(n),
-				"aria-expanded": e.items?.length ? j.value === n : void 0,
+				tabindex: b(G).tabindexFor(n),
+				"aria-expanded": e.items?.length ? M.value === n : void 0,
 				"aria-haspopup": e.items?.length ? "menu" : void 0,
-				onClick: w((t) => H(n, e), ["stop"]),
-				onFocus: (e) => x(W).setActive(n)
+				onClick: C((t) => U(n, e), ["stop"]),
+				onFocus: (e) => b(G).setActive(n)
 			}, [
-				B(e) ? (g(), l("span", he, [d(t, {
-					name: B(e),
+				V(e) ? (h(), c("span", ve, [u(t, {
+					name: V(e),
 					size: "sm"
-				}, null, 8, ["name"])])) : c("", !0),
-				u(" " + b(e.label) + " ", 1),
-				e.items?.length ? (g(), l("span", ge, [d(t, {
+				}, null, 8, ["name"])])) : s("", !0),
+				l(" " + y(e.label) + " ", 1),
+				e.items?.length ? (h(), c("span", ye, [u(t, {
 					name: "chevron-down",
 					size: "sm"
-				})])) : c("", !0)
-			], 42, me), (g(), s(ae, {
-				to: F.value.to,
-				disabled: F.value.disabled
-			}, [d(oe, { name: "m-scale-fade" }, {
-				default: C(() => [e.items?.length && j.value === n ? (g(), l("div", {
+				})])) : s("", !0)
+			], 42, _e), (h(), le(se, {
+				to: I.value.to,
+				disabled: I.value.disabled
+			}, [u(ce, {
+				name: b(A),
+				css: b(j)
+			}, {
+				default: S(() => [e.items?.length && M.value === n ? (h(), c("div", {
 					key: 0,
-					class: m(["m-menubar__submenu", { "m-menubar__submenu--teleported": I.value }]),
-					style: le(I.value ? P.value : void 0),
+					class: p(["m-menubar__submenu", { "m-menubar__submenu--teleported": L.value }]),
+					style: m(L.value ? F.value : void 0),
 					role: "menu",
-					onKeydown: we
-				}, [d(te, {
+					onKeydown: De
+				}, [u(ie, {
 					class: "m-menubar__submenu-scroll",
 					"fit-content": "",
 					"wrap-class": "m-menubar__submenu-wrap",
 					"view-class": "m-menubar__submenu-view"
 				}, {
-					default: C(() => [(g(!0), l(a, null, v(e.items, (e, n) => (g(), l("button", {
+					default: S(() => [(h(!0), c(a, null, _(e.items, (e, n) => (h(), c("button", {
 						key: `${e.label}-${n}`,
 						type: "button",
-						class: m(["m-menubar__subitem", { "m-menubar__subitem--selected": z(e) }]),
+						class: p(["m-menubar__subitem", { "m-menubar__subitem--selected": B(e) }]),
 						role: "menuitem",
 						disabled: e.disabled,
-						tabindex: x(G).tabindexFor(n),
-						onClick: w((t) => Z(e), ["stop"])
-					}, [B(e) ? (g(), l("span", T, [d(t, {
-						name: B(e),
+						tabindex: b(K).tabindexFor(n),
+						onClick: C((t) => Q(e), ["stop"])
+					}, [V(e) ? (h(), c("span", xe, [u(t, {
+						name: V(e),
 						size: "sm"
-					}, null, 8, ["name"])])) : c("", !0), u(" " + b(e.label), 1)], 10, _e))), 128))]),
+					}, null, 8, ["name"])])) : s("", !0), l(" " + y(e.label), 1)], 10, be))), 128))]),
 					_: 2
-				}, 1024)], 38)) : c("", !0)]),
+				}, 1024)], 38)) : s("", !0)]),
 				_: 2
-			}, 1024)], 8, ["to", "disabled"]))], 2))), 128)),
-			e.$slots.end ? (g(), l("div", ve, [y(e.$slots, "end")])) : c("", !0)
-		], 16, fe));
+			}, 1032, ["name", "css"])], 8, ["to", "disabled"]))], 2))), 128)),
+			e.$slots.end ? (h(), c("div", Se, [v(e.$slots, "end")])) : s("", !0)
+		], 16, he));
 	}
 });
 //#endregion
-export { E as MMenubar };
+export { w as MMenubar };