morya-ui 0.2.3 → 0.2.4

package/dist/menu/style.js

@@ -2,5 +2,6 @@ import '../theme/styles.css'
 import '../styles/base.css'
 import '../components/Icon/styles.css'
 import '../components/Popover/styles.css'
+import '../components/Scrollbar/styles.css'
 import '../components/Tooltip/styles.css'
 import '../components/Menu/styles.css'

package/dist/menubar/index.js

@@ -1,44 +1,45 @@
 import { r as e } from "../useComponentAttrs-BTYEe61P.js";
 import { t } from "../Icon-DfpIfo2L.js";
-import { n, t as ee } from "../overlay-oR-5MDuE.js";
-import { t as te } from "../overlayPlacement-Cd20JTD_.js";
-import { t as r } from "../useMenuKeyboard-BedmYE4W.js";
-import { t as i } from "../icon-xUOyawgJ.js";
-import { c as a } from "../config-CI8_WBbE.js";
-import { n as ne } from "../locale-DYGhxekd.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-DoNZvgX2.js";
+import { t as ne } from "../icon-xUOyawgJ.js";
+import { c as re } from "../config-CI8_WBbE.js";
+import { n as ie } from "../locale-DYGhxekd.js";
 import "./style.js";
-import { Fragment as o, Teleport as re, Transition as ie, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as ae, createTextVNode as d, createVNode as f, defineComponent as p, mergeProps as oe, nextTick as m, normalizeClass as h, normalizeStyle as se, onBeforeUnmount as ce, onMounted as g, openBlock as _, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, useAttrs as le, watch as C, withCtx as ue, withModifiers as w } from "vue";
+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";
 //#region src/components/Menubar/Menubar.vue?vue&type=script&setup=true&lang.ts
-var de = ["aria-label"], fe = {
+var fe = ["aria-label"], pe = {
 	key: 0,
 	class: "m-menubar__start"
-}, pe = [
+}, me = [
 	"disabled",
 	"tabindex",
 	"aria-expanded",
 	"aria-haspopup",
 	"onClick",
 	"onFocus"
-], me = {
+], he = {
 	key: 0,
 	class: "m-menubar__icon",
 	"aria-hidden": "true"
-}, T = {
+}, ge = {
 	key: 1,
 	class: "m-menubar__caret",
 	"aria-hidden": "true"
-}, he = [
+}, _e = [
 	"disabled",
 	"tabindex",
 	"onClick"
-], ge = {
+], T = {
 	key: 0,
 	class: "m-menubar__icon",
 	"aria-hidden": "true"
-}, _e = {
+}, ve = {
 	key: 1,
 	class: "m-menubar__end"
-}, E = /* @__PURE__ */ p({
+}, E = /* @__PURE__ */ f({
 	inheritAttrs: !1,
 	__name: "Menubar",
 	props: {
@@ -52,9 +53,9 @@ var de = ["aria-label"], fe = {
 		appendTo: {}
 	},
 	emits: ["update:selectedKey", "select"],
-	setup(p, { emit: E }) {
-		let D = p, ve = le(), { rootAttrs: ye } = e(ve, () => D.pt), O = E, k = a(), A = ne(), j = v(null), M = v(null), N = v([]), P = v({}), F = s(() => n(D, k.value.appendTo)), I = s(() => ee(D, k.value.appendTo));
-		function be(e, t) {
+	setup(f, { emit: E }) {
+		let D = f, ye = de(), { rootAttrs: be } = e(ye, () => D.pt), O = E, 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() {
@@ -62,7 +63,7 @@ var de = ["aria-label"], fe = {
 			let e = N.value[j.value];
 			if (!e) return;
 			let t = e.getBoundingClientRect();
-			P.value = te(t, "bottom-start", { gap: 4 });
+			P.value = ee(t, "bottom-start", { gap: 4 });
 		}
 		function R(e) {
 			return e.key ?? e.label;
@@ -71,7 +72,7 @@ var de = ["aria-label"], fe = {
 			return !!(D.selectedKey && R(e) === D.selectedKey);
 		}
 		function B(e) {
-			return i(e.icon);
+			return ne(e.icon);
 		}
 		function V(e) {
 			e.disabled || (e.command?.(), O("update:selectedKey", R(e)), O("select", e));
@@ -82,10 +83,10 @@ var de = ["aria-label"], fe = {
 					V(t), j.value = null;
 					return;
 				}
-				j.value = j.value === e ? null : e, j.value != null && m(() => L());
+				j.value = j.value === e ? null : e, j.value != null && p(() => L());
 			}
 		}
-		let U = s(() => j.value == null ? [] : D.model[j.value]?.items ?? []), W = r({
+		let U = o(() => j.value == null ? [] : D.model[j.value]?.items ?? []), W = i({
 			itemCount: () => D.model.length,
 			isItemDisabled: (e) => !!D.model[e]?.disabled,
 			orientation: "horizontal",
@@ -94,7 +95,7 @@ var de = ["aria-label"], fe = {
 				let t = D.model[e];
 				t && H(e, t);
 			}
-		}), G = r({
+		}), G = i({
 			itemCount: () => U.value.length,
 			isItemDisabled: (e) => !!U.value[e]?.disabled,
 			enabled: () => j.value != null,
@@ -106,19 +107,19 @@ var de = ["aria-label"], fe = {
 		function K(e) {
 			N.value[e]?.focus({ preventScroll: !0 });
 		}
-		function xe() {
+		function Se() {
 			return M.value?.querySelector(".m-menubar__submenu") || document.querySelector(".m-menubar__submenu--teleported");
 		}
 		function q() {
 			let e = G.activeIndex.value;
-			e < 0 || xe()?.querySelectorAll(".m-menubar__subitem")[e]?.focus({ preventScroll: !0 });
+			e < 0 || Se()?.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, t = !1) {
-			j.value = e, W.setActive(e), m(() => {
+			j.value = e, W.setActive(e), p(() => {
 				L(), t && (G.moveFirst(), q());
 			});
 		}
@@ -127,7 +128,7 @@ var de = ["aria-label"], fe = {
 			let t = W.activeIndex.value, n = D.model[t];
 			j.value != null && (n?.items?.length ? Y(t, !0) : J()), K(t);
 		}
-		function Se(e) {
+		function Ce(e) {
 			if (e.key === "Escape") {
 				j.value != null && (e.preventDefault(), J(!0));
 				return;
@@ -144,7 +145,7 @@ var de = ["aria-label"], fe = {
 			}
 			W.onKeydown(e);
 		}
-		function Ce(e) {
+		function we(e) {
 			if (e.stopPropagation(), e.key === "Escape") {
 				e.preventDefault(), J(!0);
 				return;
@@ -158,9 +159,9 @@ var de = ["aria-label"], fe = {
 		function Z(e) {
 			V(e), J(!0);
 		}
-		C(W.activeIndex, (e) => {
+		S(W.activeIndex, (e) => {
 			e >= 0 && j.value == null && K(e);
-		}), C(G.activeIndex, () => {
+		}), S(G.activeIndex, () => {
 			j.value != null && q();
 		});
 		function Q(e) {
@@ -170,71 +171,79 @@ var de = ["aria-label"], fe = {
 		function $() {
 			j.value != null && L();
 		}
-		return C(j, (e) => {
+		return S(j, (e) => {
 			e != null && I.value ? (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0)) : (window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
-		}), g(() => document.addEventListener("click", Q)), ce(() => {
+		}), h(() => document.addEventListener("click", Q)), ue(() => {
 			document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0);
-		}), (e, n) => (_(), u("nav", oe(S(ye), {
+		}), (e, n) => (g(), l("nav", ce(x(be), {
 			ref_key: "root",
 			ref: M,
 			class: "m-menubar",
-			"aria-label": S(A).menubar,
-			onKeydown: Se
+			"aria-label": x(A).menubar,
+			onKeydown: Ce
 		}), [
-			e.$slots.start ? (_(), u("div", fe, [b(e.$slots, "start")])) : l("", !0),
-			(_(!0), u(o, null, y(p.model, (e, n) => (_(), u("div", {
+			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", {
 				key: `${e.label}-${n}`,
-				class: h(["m-menubar__item", {
+				class: m(["m-menubar__item", {
 					"m-menubar__item--open": j.value === n,
 					"m-menubar__item--selected": z(e)
 				}])
-			}, [ae("button", {
+			}, [se("button", {
 				ref_for: !0,
-				ref: (e) => be(e, n),
+				ref: (e) => xe(e, n),
 				type: "button",
-				class: h(["m-menubar__trigger", { "m-menubar__trigger--selected": z(e) }]),
+				class: m(["m-menubar__trigger", { "m-menubar__trigger--selected": z(e) }]),
 				disabled: e.disabled,
-				tabindex: S(W).tabindexFor(n),
+				tabindex: x(W).tabindexFor(n),
 				"aria-expanded": e.items?.length ? j.value === n : void 0,
 				"aria-haspopup": e.items?.length ? "menu" : void 0,
 				onClick: w((t) => H(n, e), ["stop"]),
-				onFocus: (e) => S(W).setActive(n)
+				onFocus: (e) => x(W).setActive(n)
 			}, [
-				B(e) ? (_(), u("span", me, [f(t, {
+				B(e) ? (g(), l("span", he, [d(t, {
 					name: B(e),
 					size: "sm"
-				}, null, 8, ["name"])])) : l("", !0),
-				d(" " + x(e.label) + " ", 1),
-				e.items?.length ? (_(), u("span", T, [f(t, {
+				}, null, 8, ["name"])])) : c("", !0),
+				u(" " + b(e.label) + " ", 1),
+				e.items?.length ? (g(), l("span", ge, [d(t, {
 					name: "chevron-down",
 					size: "sm"
-				})])) : l("", !0)
-			], 42, pe), (_(), c(re, {
+				})])) : c("", !0)
+			], 42, me), (g(), s(ae, {
 				to: F.value.to,
 				disabled: F.value.disabled
-			}, [f(ie, { name: "m-scale-fade" }, {
-				default: ue(() => [e.items?.length && j.value === n ? (_(), u("div", {
+			}, [d(oe, { name: "m-scale-fade" }, {
+				default: C(() => [e.items?.length && j.value === n ? (g(), l("div", {
 					key: 0,
-					class: h(["m-menubar__submenu", { "m-menubar__submenu--teleported": I.value }]),
-					style: se(I.value ? P.value : void 0),
+					class: m(["m-menubar__submenu", { "m-menubar__submenu--teleported": I.value }]),
+					style: le(I.value ? P.value : void 0),
 					role: "menu",
-					onKeydown: Ce
-				}, [(_(!0), u(o, null, y(e.items, (e, n) => (_(), u("button", {
-					key: `${e.label}-${n}`,
-					type: "button",
-					class: h(["m-menubar__subitem", { "m-menubar__subitem--selected": z(e) }]),
-					role: "menuitem",
-					disabled: e.disabled,
-					tabindex: S(G).tabindexFor(n),
-					onClick: w((t) => Z(e), ["stop"])
-				}, [B(e) ? (_(), u("span", ge, [f(t, {
-					name: B(e),
-					size: "sm"
-				}, null, 8, ["name"])])) : l("", !0), d(" " + x(e.label), 1)], 10, he))), 128))], 38)) : l("", !0)]),
+					onKeydown: we
+				}, [d(te, {
+					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", {
+						key: `${e.label}-${n}`,
+						type: "button",
+						class: m(["m-menubar__subitem", { "m-menubar__subitem--selected": z(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),
+						size: "sm"
+					}, null, 8, ["name"])])) : c("", !0), u(" " + b(e.label), 1)], 10, _e))), 128))]),
+					_: 2
+				}, 1024)], 38)) : c("", !0)]),
 				_: 2
 			}, 1024)], 8, ["to", "disabled"]))], 2))), 128)),
-			e.$slots.end ? (_(), u("div", _e, [b(e.$slots, "end")])) : l("", !0)
-		], 16, de));
+			e.$slots.end ? (g(), l("div", ve, [y(e.$slots, "end")])) : c("", !0)
+		], 16, fe));
 	}
 });
 //#endregion