morya-ui 0.1.1

package/dist/mega-menu/style.js

@@ -0,0 +1,4 @@
+import '../theme/styles.css'
+import '../styles/base.css'
+import '../components/Icon/styles.css'
+import '../components/MegaMenu/styles.css'

package/dist/menu/index.js

@@ -0,0 +1,638 @@
+import { t as e } from "../Icon-DfpIfo2L.js";
+import { n as t, t as n } from "../overlay-oR-5MDuE.js";
+import { t as r } from "../overlayPlacement-Cd20JTD_.js";
+import { t as i } from "../useMenuKeyboard-BedmYE4W.js";
+import { t as a } from "../icon-xUOyawgJ.js";
+import { t as o } from "../key-CaQYVkjh.js";
+import { t as s } from "../lastPointer-CRxcUqdd.js";
+import { t as c } from "../Popover-BXSXRV-B.js";
+import { c as l } from "../config-CI8_WBbE.js";
+import "./style.js";
+import { Fragment as u, Teleport as d, Transition as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createVNode as v, defineComponent as y, getCurrentInstance as b, inject as x, nextTick as S, normalizeClass as C, normalizeStyle as w, onBeforeUnmount as ee, openBlock as T, provide as te, reactive as E, ref as D, renderList as O, renderSlot as k, resolveDynamicComponent as ne, toDisplayString as A, unref as j, useSlots as M, watch as N, withCtx as P } from "vue";
+//#region src/shared/menu/tree.ts
+function F(e, t, n = "item") {
+	return o(e, t, n);
+}
+function I(e, t, n = "item") {
+	for (let r = 0; r < e.length; r++) {
+		let i = e[r];
+		if (i.separator) continue;
+		let a = F(i, r, n);
+		if (a === t) return [];
+		if (i.items?.length) {
+			let e = I(i.items, t, `${n}-${r}`);
+			if (e !== null) return [a, ...e];
+		}
+	}
+	return null;
+}
+function re(e, t, n, r = "item") {
+	return e.items?.length ? F(e, n, r) === t || I(e.items, t, `${r}-${n}`) !== null : !1;
+}
+function ie(e, t = "item") {
+	let n = [];
+	for (let r = 0; r < e.length; r++) {
+		let i = e[r];
+		if (i.separator || !i.items?.length) continue;
+		let a = F(i, r, t);
+		n.push(a), n.push(...ie(i.items, `${t}-${r}`));
+	}
+	return n;
+}
+function ae(e, t = "item") {
+	let n = [];
+	for (let r = 0; r < e.length; r++) {
+		let i = e[r];
+		i.separator || !i.items?.length || n.push(F(i, r, t));
+	}
+	return n;
+}
+//#endregion
+//#region src/components/Menu/context.ts
+var oe = Symbol("muMenu");
+//#endregion
+//#region src/shared/optionalRouter.ts
+function se() {
+	let e = b();
+	if (!e) return !1;
+	for (let t of Object.values(e.appContext.provides)) if (t && typeof t == "object" && "resolve" in t && "push" in t) return !0;
+	return !1;
+}
+function ce() {
+	let e = b();
+	return !e || !se() ? null : e.appContext.components.RouterLink ?? null;
+}
+function L(e) {
+	return typeof e == "string" ? e : typeof e.path == "string" ? e.path : typeof e.href == "string" ? e.href : "#";
+}
+function R(e) {
+	return typeof e == "string" ? /^(?:[a-z][a-z\d+\-.]*:)?\/\//i.test(e) || e.startsWith("mailto:") || e.startsWith("tel:") : !1;
+}
+//#endregion
+//#region src/components/Menu/MenuNodes.vue?vue&type=script&setup=true&lang.ts
+var z = {
+	key: 0,
+	class: "m-menu__separator",
+	role: "separator"
+}, B = [
+	"tabindex",
+	"data-m-menu-key",
+	"aria-label",
+	"aria-expanded",
+	"title"
+], le = {
+	key: 0,
+	class: "m-menu__icon",
+	"aria-hidden": "true"
+}, V = { class: "m-menu__label" }, H = {
+	key: 1,
+	class: "m-menu__arrow",
+	"aria-hidden": "true"
+}, ue = {
+	class: "m-menu wk-menu--flyout",
+	role: "menu"
+}, U = [
+	"tabindex",
+	"data-m-menu-key",
+	"aria-expanded",
+	"aria-disabled",
+	"onClick"
+], W = {
+	key: 0,
+	class: "m-menu__icon",
+	"aria-hidden": "true"
+}, G = { class: "m-menu__label" }, K = {
+	class: "m-menu__arrow",
+	"aria-hidden": "true"
+}, de = {
+	key: 0,
+	class: "m-menu__submenu",
+	role: "group"
+}, q = {
+	key: 0,
+	class: "m-menu__icon",
+	"aria-hidden": "true"
+}, fe = { class: "m-menu__label" }, J = /* @__PURE__ */ y({
+	__name: "MenuNodes",
+	props: {
+		items: {},
+		depth: {},
+		prefix: {},
+		flyout: { type: Boolean }
+	},
+	setup(t) {
+		let n = t, r = x(oe);
+		if (!r) throw Error("MenuNodes must be used inside MMenu");
+		let i = r, o = ce(), s = p(() => i.collapsed.value && !n.flyout), l = p(() => i.mode === "horizontal"), d = p(() => (s.value || l.value) && !n.flyout);
+		function y(e, t) {
+			i.setFlyoutOpen(e, t);
+		}
+		function b(e, t) {
+			return i.resolveKey(e, t, n.prefix);
+		}
+		function S(e) {
+			return a(e.icon);
+		}
+		function ee(e, t) {
+			if (e.disabled) {
+				t.preventDefault();
+				return;
+			}
+			i.activate(e), e.to || t.preventDefault();
+		}
+		function te(e, t) {
+			e.disabled || d.value || i.toggleExpand(b(e, t));
+		}
+		function E(e, t) {
+			return i.isExpanded(b(e, t));
+		}
+		function D(e, t) {
+			let r = S(e);
+			return {
+				"m-menu__item-content--selected": i.isSelected(e, t, n.prefix),
+				"m-menu__item-content--child-active": i.isChildActive(e, t, n.prefix),
+				"m-menu__item-content--disabled": !!e.disabled,
+				"m-menu__item-content--collapsed": s.value,
+				"m-menu__item-content--no-icon": !r,
+				"m-menu__item-content--active": i.activeKey.value === b(e, t)
+			};
+		}
+		function k(e, t) {
+			return n.flyout ? 0 : i.tabindexForKey(b(e, t));
+		}
+		function M(e) {
+			if (!(l.value || n.flyout)) return i.paddingStyle(e);
+		}
+		function N(e, t) {
+			return E(e, t) ? "chevron-down" : "chevron-right";
+		}
+		function F(e) {
+			return !!(e.to && o && !R(e.to));
+		}
+		function I(e) {
+			if (!(!e.to || F(e))) return L(e.to);
+		}
+		function re(e) {
+			if (!(!F(e) || !e.to)) return e.to;
+		}
+		return (n, r) => (T(!0), g(u, null, O(t.items, (n, r) => (T(), g(u, { key: b(n, r) }, [n.separator ? (T(), g("div", z)) : n.items?.length ? (T(), g("div", {
+			key: 1,
+			class: C(["m-menu__item wk-menu__item--submenu", { "m-menu__item--horizontal": l.value }]),
+			role: "none"
+		}, [d.value ? (T(), m(c, {
+			key: 0,
+			class: "m-menu__collapsed-popover",
+			"model-value": !!j(i).flyoutOpen[b(n, r)],
+			trigger: l.value ? "click" : "hover",
+			placement: l.value ? "bottom-start" : "right-start",
+			"show-delay": l.value ? 0 : 50,
+			"hide-delay": l.value ? 0 : 80,
+			"onUpdate:modelValue": (e) => y(b(n, r), e)
+		}, {
+			default: P(() => [_("div", {
+				class: C(["m-menu__item-content", D(n, r)]),
+				style: w(M(t.depth)),
+				role: "menuitem",
+				tabindex: k(n, r),
+				"data-m-menu-key": t.flyout ? void 0 : b(n, r),
+				"aria-label": n.label,
+				"aria-haspopup": "menu",
+				"aria-expanded": l.value ? !!j(i).flyoutOpen[b(n, r)] : void 0,
+				title: s.value ? n.label : void 0
+			}, [
+				S(n) ? (T(), g("span", le, [v(e, {
+					name: S(n),
+					size: "sm"
+				}, null, 8, ["name"])])) : h("", !0),
+				_("span", V, A(n.label), 1),
+				l.value ? (T(), g("span", H, [v(e, {
+					name: "chevron-down",
+					size: "sm"
+				})])) : h("", !0)
+			], 14, B)]),
+			content: P(() => [_("div", ue, [v(J, {
+				items: n.items,
+				depth: 0,
+				prefix: `${t.prefix}-${r}`,
+				flyout: ""
+			}, null, 8, ["items", "prefix"])])]),
+			_: 2
+		}, 1032, [
+			"model-value",
+			"trigger",
+			"placement",
+			"show-delay",
+			"hide-delay",
+			"onUpdate:modelValue"
+		])) : (T(), g(u, { key: 1 }, [_("div", {
+			class: C(["m-menu__item-content", D(n, r)]),
+			style: w(M(t.depth)),
+			role: "menuitem",
+			tabindex: k(n, r),
+			"data-m-menu-key": t.flyout ? void 0 : b(n, r),
+			"aria-haspopup": "menu",
+			"aria-expanded": E(n, r),
+			"aria-disabled": n.disabled || void 0,
+			onClick: (e) => te(n, r)
+		}, [
+			S(n) ? (T(), g("span", W, [v(e, {
+				name: S(n),
+				size: "sm"
+			}, null, 8, ["name"])])) : h("", !0),
+			_("span", G, A(n.label), 1),
+			_("span", K, [v(e, {
+				name: N(n, r),
+				size: "sm"
+			}, null, 8, ["name"])])
+		], 14, U), v(f, { name: "m-menu-expand" }, {
+			default: P(() => [E(n, r) ? (T(), g("div", de, [v(J, {
+				items: n.items,
+				depth: t.depth + 1,
+				prefix: `${t.prefix}-${r}`
+			}, null, 8, [
+				"items",
+				"depth",
+				"prefix"
+			])])) : h("", !0)]),
+			_: 2
+		}, 1024)], 64))], 2)) : (T(), g("div", {
+			key: 2,
+			class: C(["m-menu__item", { "m-menu__item--horizontal": l.value }]),
+			role: "none"
+		}, [(T(), m(ne(F(n) ? j(o) : I(n) ? "a" : "div"), {
+			class: C(["m-menu__item-content", D(n, r)]),
+			style: w(M(t.depth)),
+			role: "menuitem",
+			tabindex: k(n, r),
+			"data-m-menu-key": t.flyout ? void 0 : b(n, r),
+			"aria-disabled": n.disabled || void 0,
+			"aria-current": j(i).isSelected(n, r, t.prefix) ? "page" : void 0,
+			title: s.value ? n.label : void 0,
+			href: I(n),
+			to: re(n),
+			onClick: (e) => ee(n, e)
+		}, {
+			default: P(() => [S(n) ? (T(), g("span", q, [v(e, {
+				name: S(n),
+				size: "sm"
+			}, null, 8, ["name"])])) : h("", !0), _("span", fe, A(n.label), 1)]),
+			_: 2
+		}, 1032, [
+			"class",
+			"style",
+			"tabindex",
+			"data-m-menu-key",
+			"aria-disabled",
+			"aria-current",
+			"title",
+			"href",
+			"to",
+			"onClick"
+		]))], 2))], 64))), 128));
+	}
+}), pe = {
+	key: 1,
+	class: "m-menu-popup"
+}, me = /* @__PURE__ */ y({
+	__name: "Menu",
+	props: {
+		model: {},
+		popup: {
+			type: Boolean,
+			default: !1
+		},
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		placement: { default: "bottom-start" },
+		selectedKey: { default: null },
+		collapsed: {
+			type: Boolean,
+			default: !1
+		},
+		collapsedWidth: { default: 80 },
+		indent: { default: 12 },
+		rootIndent: { default: 16 },
+		accordion: {
+			type: Boolean,
+			default: !1
+		},
+		defaultExpandedKeys: { default: () => [] },
+		expandedKeys: {},
+		defaultExpandAll: {
+			type: Boolean,
+			default: !1
+		},
+		mode: { default: "vertical" },
+		inverted: {
+			type: Boolean,
+			default: !1
+		},
+		embedded: {
+			type: Boolean,
+			default: void 0
+		},
+		teleport: {
+			type: Boolean,
+			default: !0
+		},
+		appendTo: {}
+	},
+	emits: [
+		"update:modelValue",
+		"update:selectedKey",
+		"update:expandedKeys",
+		"select"
+	],
+	setup(e, { emit: a }) {
+		let o = e, c = a, u = M(), y = l(), b = D(null), x = D(null), O = D({}), ne = p(() => !!u.default?.()?.length), A = p(() => t(o.popup ? o : { teleport: !1 }, y.value.appendTo)), j = p(() => o.popup && n(o, y.value.appendTo)), se = p(() => o.embedded ?? !o.popup), ce = p(() => o.selectedKey), L = D([]), R = E({});
+		function z(e, t) {
+			R[e] = t;
+		}
+		function B() {
+			for (let e of Object.keys(R)) R[e] = !1;
+		}
+		function le() {
+			let e = x.value?.getBoundingClientRect();
+			if (e && (e.width > 0 || e.height > 0)) return e;
+			let { x: t, y: n } = s();
+			return {
+				left: t,
+				top: n,
+				right: t,
+				bottom: n,
+				width: 0,
+				height: 0
+			};
+		}
+		function V() {
+			!o.popup || !o.modelValue || !j.value || (O.value = r(le(), o.placement, { minWidth: "10rem" }));
+		}
+		function H() {
+			o.modelValue && V();
+		}
+		function ue() {
+			if (o.defaultExpandAll) {
+				L.value = ie(o.model);
+				return;
+			}
+			if (o.defaultExpandedKeys.length) {
+				L.value = [...o.defaultExpandedKeys];
+				return;
+			}
+			if (o.selectedKey) {
+				let e = I(o.model, o.selectedKey);
+				L.value = e ?? [];
+				return;
+			}
+			L.value = [];
+		}
+		ue();
+		let U = p({
+			get: () => o.expandedKeys ?? L.value,
+			set: (e) => {
+				L.value = e, c("update:expandedKeys", e);
+			}
+		}), W = p(() => ae(o.model));
+		function G(e) {
+			return U.value.includes(e);
+		}
+		function K(e) {
+			let t = [...U.value], n = t.indexOf(e);
+			if (n >= 0) t.splice(n, 1);
+			else {
+				if (o.accordion && W.value.includes(e)) {
+					for (let n of [...t]) if (W.value.includes(n) && n !== e) {
+						let e = t.indexOf(n);
+						e >= 0 && t.splice(e, 1);
+					}
+				}
+				t.push(e);
+			}
+			U.value = t;
+		}
+		function de(e) {
+			if (!e) return;
+			let t = I(o.model, e);
+			if (!t?.length) return;
+			let n = /* @__PURE__ */ new Set([...U.value, ...t]);
+			if (o.accordion) for (let e of W.value) n.has(e) && !t.includes(e) && n.delete(e);
+			U.value = Array.from(n);
+		}
+		N(() => o.selectedKey, de);
+		function q(e, t, n) {
+			return F(e, t, n);
+		}
+		function fe(e, t, n) {
+			let r = q(e, t, n);
+			return !!(o.selectedKey && r === o.selectedKey);
+		}
+		function me(e, t, n) {
+			return o.selectedKey ? re(e, o.selectedKey, t, n) : !1;
+		}
+		function he(e) {
+			if (o.mode !== "horizontal" && o.collapsed) return Math.max(0, o.collapsedWidth / 2 - 10);
+		}
+		function ge(e) {
+			if (o.mode === "horizontal") return { paddingInlineStart: `${o.rootIndent}px` };
+			if (o.collapsed) {
+				let t = he(e);
+				return t == null ? void 0 : { paddingInlineStart: `${t}px` };
+			}
+			return { paddingInlineStart: `calc(var(--m-menu-root-indent) + ${e} * var(--m-menu-indent))` };
+		}
+		function _e(e) {
+			if (e.disabled || e.separator) return;
+			e.command?.();
+			let t = e.key ?? e.label ?? null;
+			c("update:selectedKey", t), c("select", e), o.popup && (c("update:modelValue", !1), ve()), o.mode === "horizontal" && B();
+		}
+		function ve() {
+			(x.value?.querySelector("button, [tabindex]") ?? x.value)?.focus({ preventScroll: !0 });
+		}
+		let Y = p(() => {
+			let e = o.collapsed || o.mode === "horizontal", t = [], n = (r, i, a) => {
+				r.forEach((r, o) => {
+					if (r.separator) return;
+					let s = F(r, o, i), c = !!r.items?.length;
+					t.push({
+						item: r,
+						key: s,
+						parentKey: a,
+						hasChildren: c
+					}), c && !e && G(s) && n(r.items, `${i}-${o}`, s);
+				});
+			};
+			return n(o.model, "item", null), t;
+		}), X = i({
+			itemCount: () => Y.value.length,
+			isItemDisabled: (e) => !!Y.value[e]?.item.disabled,
+			orientation: () => o.mode === "horizontal" ? "horizontal" : "vertical",
+			onActivate: (e) => {
+				let t = Y.value[e];
+				if (t) {
+					if (t.hasChildren) {
+						if (o.collapsed || o.mode === "horizontal") {
+							let e = !R[t.key];
+							B(), z(t.key, e);
+						} else K(t.key);
+						return;
+					}
+					_e(t.item);
+				}
+			},
+			onEscape: () => {
+				o.popup ? c("update:modelValue", !1) : B();
+			},
+			returnFocusTo: () => o.popup ? x.value?.querySelector("button, [tabindex]") ?? x.value : null
+		}), Z = p(() => Y.value[X.activeIndex.value]?.key ?? null);
+		function ye(e) {
+			let t = Z.value;
+			return t == null ? Y.value.find((e) => !e.item.disabled)?.key === e ? 0 : -1 : e === t ? 0 : -1;
+		}
+		function be(e) {
+			if (e == null || !b.value) return;
+			let t = b.value.querySelectorAll("[data-m-menu-key]");
+			for (let n of t) if (n.dataset.muMenuKey === e) {
+				n.focus({ preventScroll: !0 });
+				return;
+			}
+		}
+		function Q(e) {
+			let t = Y.value[X.activeIndex.value];
+			if (o.mode !== "horizontal") {
+				if (e.key === "ArrowRight") {
+					if (e.preventDefault(), !t) return;
+					if (t.hasChildren && !o.collapsed) {
+						if (!G(t.key)) K(t.key);
+						else {
+							let e = Y.value.findIndex((e) => e.parentKey === t.key);
+							e >= 0 && X.setActive(e);
+						}
+					}
+					return;
+				}
+				if (e.key === "ArrowLeft") {
+					if (e.preventDefault(), !t) return;
+					if (t.hasChildren && !o.collapsed && G(t.key)) K(t.key);
+					else if (t.parentKey != null) {
+						let e = Y.value.findIndex((e) => e.key === t.parentKey);
+						e >= 0 && X.setActive(e);
+					}
+					return;
+				}
+			} else if (e.key === "ArrowDown") {
+				e.preventDefault(), t?.hasChildren && (B(), z(t.key, !0));
+				return;
+			}
+			X.onKeydown(e);
+		}
+		N(X.activeIndex, () => {
+			S(() => be(Z.value));
+		}), te(oe, {
+			collapsed: p(() => o.collapsed),
+			selectedKey: ce,
+			expandedKeys: U,
+			accordion: o.accordion,
+			indent: o.indent,
+			rootIndent: o.rootIndent,
+			mode: o.mode,
+			inverted: o.inverted,
+			flyoutOpen: R,
+			setFlyoutOpen: z,
+			toggleExpand: K,
+			isExpanded: G,
+			activate: _e,
+			resolveKey: q,
+			isSelected: fe,
+			isChildActive: me,
+			paddingStyle: ge,
+			activeKey: Z,
+			tabindexForKey: ye
+		});
+		function xe(e) {
+			if (!o.popup || !o.modelValue) return;
+			let t = e.target;
+			b.value?.contains(t) || x.value?.contains(t) || c("update:modelValue", !1);
+		}
+		N(() => o.modelValue, (e) => {
+			o.popup && (e ? (S(V), document.addEventListener("click", xe), j.value && (window.addEventListener("resize", H), window.addEventListener("scroll", H, !0))) : (document.removeEventListener("click", xe), window.removeEventListener("resize", H), window.removeEventListener("scroll", H, !0)));
+		}, { immediate: !0 }), ee(() => {
+			document.removeEventListener("click", xe), window.removeEventListener("resize", H), window.removeEventListener("scroll", H, !0);
+		});
+		let Se = p(() => ["m-menu", {
+			"m-menu--popup": o.popup,
+			"m-menu--teleported": j.value,
+			"m-menu--collapsed": o.collapsed,
+			"m-menu--embedded": se.value,
+			"m-menu--horizontal": o.mode === "horizontal",
+			"m-menu--inverted": o.inverted
+		}]), $ = p(() => ({
+			"--m-menu-indent": `${o.indent / 16}rem`,
+			"--m-menu-root-indent": `${o.rootIndent / 16}rem`
+		})), Ce = p(() => j.value ? {
+			...$.value,
+			...O.value
+		} : $.value);
+		return (t, n) => e.popup ? ne.value ? (T(), g("div", pe, [_("div", {
+			ref_key: "triggerEl",
+			ref: x,
+			class: "m-menu-popup__anchor"
+		}, [k(t.$slots, "default")], 512), (T(), m(d, {
+			to: A.value.to,
+			disabled: A.value.disabled
+		}, [v(f, { name: "m-scale-fade" }, {
+			default: P(() => [e.modelValue ? (T(), g("div", {
+				key: 0,
+				ref_key: "root",
+				ref: b,
+				class: C(Se.value),
+				style: w(j.value ? Ce.value : $.value),
+				role: "menu",
+				onKeydown: Q
+			}, [v(J, {
+				items: e.model,
+				depth: 0,
+				prefix: "item"
+			}, null, 8, ["items"])], 38)) : h("", !0)]),
+			_: 1
+		})], 8, ["to", "disabled"]))])) : (T(), m(d, {
+			key: 2,
+			to: A.value.to,
+			disabled: A.value.disabled
+		}, [v(f, { name: "m-scale-fade" }, {
+			default: P(() => [e.modelValue ? (T(), g("div", {
+				key: 0,
+				ref_key: "root",
+				ref: b,
+				class: C(Se.value),
+				style: w(j.value ? {
+					...$.value,
+					...O.value
+				} : $.value),
+				role: "menu",
+				onKeydown: Q
+			}, [v(J, {
+				items: e.model,
+				depth: 0,
+				prefix: "item"
+			}, null, 8, ["items"])], 38)) : h("", !0)]),
+			_: 1
+		})], 8, ["to", "disabled"])) : (T(), g("div", {
+			key: 0,
+			ref_key: "root",
+			ref: b,
+			class: C(Se.value),
+			style: w($.value),
+			role: "menu",
+			onKeydown: Q
+		}, [v(J, {
+			items: e.model,
+			depth: 0,
+			prefix: "item"
+		}, null, 8, ["items"])], 38));
+	}
+});
+//#endregion
+export { me as MMenu };