morya-ui 0.3.1 → 0.3.3

package/dist/context-menu/index.js

@@ -1,109 +1,110 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
 import { t } from "../Icon-od9Ob-Ay.js";
-import { t as n } from "../useMotionTransition-Bxnnb_9u.js";
+import { t as n } from "../useMotionTransition-95Y79FoL.js";
 import { n as r, t as i } from "../overlay-oR-5MDuE.js";
-import { t as a } from "../Scrollbar-DTeJ8P5b.js";
-import { t as o } from "../icon-COrt_N8A.js";
-import { t as s } from "../key-CaQYVkjh.js";
-import { t as c } from "../FlyoutSubmenu-BrUPmJa1.js";
-import { c as l } from "../config-CapALqt3.js";
+import { t as a } from "../useFloatingViewportSync-wLLKIGUA.js";
+import { t as o } from "../Scrollbar-DTeJ8P5b.js";
+import { t as s } from "../icon-COrt_N8A.js";
+import { t as c } from "../key-CaQYVkjh.js";
+import { t as l } from "../FlyoutSubmenu-H_741alW.js";
+import { c as u } from "../config-CapALqt3.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, mergeModels as b, mergeProps as x, nextTick as S, normalizeClass as C, normalizeStyle as w, onBeforeUnmount as T, openBlock as E, ref as D, renderList as O, renderSlot as k, toDisplayString as A, unref as j, useAttrs as M, useModel as N, watch as P, withCtx as F, withModifiers as I } from "vue";
+import { Fragment as d, Teleport as f, Transition as p, computed as m, createBlock as h, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createVNode as y, defineComponent as b, mergeModels as x, mergeProps as S, nextTick as C, normalizeClass as w, normalizeStyle as T, onBeforeUnmount as E, openBlock as D, ref as O, renderList as k, renderSlot as A, toDisplayString as j, unref as M, useAttrs as N, useModel as P, watch as F, withCtx as I, withModifiers as L } from "vue";
 //#region src/components/ContextMenu/ContextMenuNodes.vue?vue&type=script&setup=true&lang.ts
-var L = {
+var R = {
 	key: 0,
 	class: "m-contextmenu__separator",
 	role: "separator"
-}, R = ["onMouseenter"], z = ["disabled"], B = {
+}, z = ["onMouseenter"], B = ["disabled"], V = {
 	key: 0,
 	class: "m-contextmenu__icon",
 	"aria-hidden": "true"
-}, V = { class: "m-contextmenu__label" }, H = {
+}, H = { class: "m-contextmenu__label" }, U = {
 	key: 1,
 	class: "m-contextmenu__shortcut"
-}, U = {
+}, W = {
 	class: "m-contextmenu__caret",
 	"aria-hidden": "true"
-}, W = ["disabled", "onClick"], G = {
+}, G = ["disabled", "onClick"], K = {
 	key: 0,
 	class: "m-contextmenu__icon",
 	"aria-hidden": "true"
-}, K = { class: "m-contextmenu__label" }, q = {
+}, q = { class: "m-contextmenu__label" }, J = {
 	key: 1,
 	class: "m-contextmenu__shortcut"
-}, J = /* @__PURE__ */ y({
+}, Y = /* @__PURE__ */ b({
 	__name: "ContextMenuNodes",
 	props: { items: {} },
 	emits: ["activate"],
 	setup(e, { emit: n }) {
-		let r = D(null), i = D(null), l;
-		function d() {
-			l && clearTimeout(l), l = void 0;
+		let r = O(null), i = O(null), a;
+		function u() {
+			a && clearTimeout(a), a = void 0;
 		}
 		function f() {
-			d(), l = setTimeout(() => {
+			u(), a = setTimeout(() => {
 				r.value = null, i.value = null;
 			}, 150);
 		}
 		function p(e, t) {
-			return s(e, t, "cm");
+			return c(e, t, "cm");
 		}
 		function m(e) {
-			return o(e.icon);
+			return s(e.icon);
 		}
-		function y(e, t) {
-			d(), r.value = e;
+		function h(e, t) {
+			u(), r.value = e;
 			let n = t.currentTarget;
 			i.value = n?.querySelector(".m-contextmenu__item--parent") ?? n;
 		}
 		function b() {
-			d();
+			u();
 		}
 		function x() {
 			f();
 		}
-		return (n, o) => (E(!0), g(u, null, O(e.items, (e, s) => (E(), g(u, { key: p(e, s) }, [e.separator ? (E(), g("div", L)) : e.items?.length ? (E(), g("div", {
+		return (n, a) => (D(!0), _(d, null, k(e.items, (e, s) => (D(), _(d, { key: p(e, s) }, [e.separator ? (D(), _("div", R)) : e.items?.length ? (D(), _("div", {
 			key: 1,
 			class: "m-contextmenu__submenu-wrap",
-			onMouseenter: (e) => y(s, e),
-			onMouseleave: o[1] ||= (e) => f()
-		}, [_("button", {
+			onMouseenter: (e) => h(s, e),
+			onMouseleave: a[1] ||= (e) => f()
+		}, [v("button", {
 			type: "button",
 			class: "m-contextmenu__item m-contextmenu__item--parent",
 			role: "menuitem",
 			disabled: e.disabled
 		}, [
-			m(e) ? (E(), g("span", B, [v(t, {
+			m(e) ? (D(), _("span", V, [y(t, {
 				name: m(e),
 				size: "sm"
-			}, null, 8, ["name"])])) : h("", !0),
-			_("span", V, A(e.label), 1),
-			e.shortcut ? (E(), g("span", H, A(e.shortcut), 1)) : h("", !0),
-			_("span", U, [v(t, {
+			}, null, 8, ["name"])])) : g("", !0),
+			v("span", H, j(e.label), 1),
+			e.shortcut ? (D(), _("span", U, j(e.shortcut), 1)) : g("", !0),
+			v("span", W, [y(t, {
 				name: "chevron-right",
 				size: "sm"
 			})])
-		], 8, z), v(c, {
+		], 8, B), y(l, {
 			open: r.value === s,
 			anchor: r.value === s ? i.value : null,
 			"panel-class": "m-contextmenu__submenu",
 			onEnter: b,
 			onLeave: x
 		}, {
-			default: F(() => [v(a, {
+			default: I(() => [y(o, {
 				class: "m-contextmenu__submenu-scroll",
 				"fit-content": "",
 				"wrap-class": "m-contextmenu__submenu-wrap-inner",
 				"view-class": "m-contextmenu__submenu-view"
 			}, {
-				default: F(() => [v(J, {
+				default: I(() => [y(Y, {
 					items: e.items,
-					onActivate: o[0] ||= (e) => n.$emit("activate", e)
+					onActivate: a[0] ||= (e) => n.$emit("activate", e)
 				}, null, 8, ["items"])]),
 				_: 2
 			}, 1024)]),
 			_: 2
-		}, 1032, ["open", "anchor"])], 40, R)) : (E(), g("button", {
+		}, 1032, ["open", "anchor"])], 40, z)) : (D(), _("button", {
 			key: 2,
 			type: "button",
 			class: "m-contextmenu__item",
@@ -111,18 +112,18 @@ var L = {
 			disabled: e.disabled,
 			onClick: (t) => n.$emit("activate", e)
 		}, [
-			m(e) ? (E(), g("span", G, [v(t, {
+			m(e) ? (D(), _("span", K, [y(t, {
 				name: m(e),
 				size: "sm"
-			}, null, 8, ["name"])])) : h("", !0),
-			_("span", K, A(e.label), 1),
-			e.shortcut ? (E(), g("span", q, A(e.shortcut), 1)) : h("", !0)
-		], 8, W))], 64))), 128));
+			}, null, 8, ["name"])])) : g("", !0),
+			v("span", q, j(e.label), 1),
+			e.shortcut ? (D(), _("span", J, j(e.shortcut), 1)) : g("", !0)
+		], 8, G))], 64))), 128));
 	}
-}), Y = /* @__PURE__ */ y({
+}), X = /* @__PURE__ */ b({
 	inheritAttrs: !1,
 	__name: "ContextMenu",
-	props: /*@__PURE__*/ b({
+	props: /*@__PURE__*/ x({
 		pt: {},
 		model: {},
 		teleport: {
@@ -144,29 +145,29 @@ var L = {
 		positionModifiers: {}
 	}),
 	emits: ["update:modelValue", "update:position"],
-	setup(t, { expose: o }) {
-		let s = t, c = N(t, "modelValue"), y = N(t, "position"), b = M(), { rootAttrs: O } = e(b, () => s.pt), A = l(), { transitionName: L, transitionCss: R } = n({
+	setup(t, { expose: s }) {
+		let c = t, l = P(t, "modelValue"), b = P(t, "position"), x = N(), { rootAttrs: k } = e(x, () => c.pt), j = u(), { transitionName: R, transitionCss: z } = n({
 			role: "popup",
-			local: () => s.transition,
+			local: () => c.transition,
 			componentName: "ContextMenu",
 			fallback: "scale-fade"
-		}), z = D(null), B = D({
+		}), B = O(null), V = O({
 			x: 0,
 			y: 0
-		}), V = p(() => r(s, A.value.appendTo)), H = p(() => i(s, A.value.appendTo)), U = p(() => {
-			let e = y.value ?? B.value;
+		}), H = m(() => r(c, j.value.appendTo)), U = m(() => i(c, j.value.appendTo)), W = m(() => {
+			let e = b.value ?? V.value;
 			return {
 				left: `${e.x}px`,
 				top: `${e.y}px`
 			};
 		});
-		function W(e) {
-			s.model.length && K(e);
+		function G(e) {
+			c.model.length && q(e);
 		}
-		function G() {
-			c.value = !1;
+		function K() {
+			l.value = !1;
 		}
-		function K(e) {
+		function q(e) {
 			let t = "clientX" in e ? {
 				x: e.clientX,
 				y: e.clientY
@@ -174,71 +175,79 @@ var L = {
 				x: e.x,
 				y: e.y
 			};
-			"preventDefault" in e && e.preventDefault(), "stopPropagation" in e && e.stopPropagation(), B.value = t, y.value = t, c.value = !0;
-		}
-		function q(e) {
-			e.disabled || e.separator || (e.command?.(), G());
+			"preventDefault" in e && e.preventDefault(), "stopPropagation" in e && e.stopPropagation(), V.value = t, b.value = t, l.value = !0;
 		}
-		function Y(e) {
-			c.value && z.value && !z.value.contains(e.target) && G();
+		function J(e) {
+			e.disabled || e.separator || (e.command?.(), K());
 		}
 		function X(e) {
-			e.key === "Escape" && G();
+			l.value && B.value && !B.value.contains(e.target) && K();
+		}
+		function Z(e) {
+			e.key === "Escape" && K();
+		}
+		function ee(e) {
+			if (!e || e.type !== "scroll") return !1;
+			let t = e.target;
+			return t instanceof Node ? B.value?.contains(t) ? !0 : t instanceof Element && !!t.closest(".m-contextmenu, .m-contextmenu__submenu") : !1;
+		}
+		function te(e) {
+			!l.value || ee(e) || K();
 		}
-		let Z = 0;
-		function Q() {
-			document.removeEventListener("click", Y), document.removeEventListener("keydown", X), document.removeEventListener("contextmenu", Y);
+		let Q = 0;
+		function $() {
+			document.removeEventListener("click", X), document.removeEventListener("keydown", Z), document.removeEventListener("contextmenu", X);
 		}
-		return P(c, (e) => {
-			if (Q(), !e) return;
-			document.addEventListener("click", Y), document.addEventListener("keydown", X);
-			let t = ++Z;
-			S(() => {
-				t === Z && c.value && document.addEventListener("contextmenu", Y);
+		return F(l, (e) => {
+			if ($(), !e) return;
+			document.addEventListener("click", X), document.addEventListener("keydown", Z);
+			let t = ++Q;
+			C(() => {
+				t === Q && l.value && document.addEventListener("contextmenu", X);
 			});
-		}, { immediate: !0 }), T(() => {
-			Q();
-		}), o({
-			show: K,
-			hide: G
-		}), (e, n) => (E(), g(u, null, [_("div", x(j(O), {
+		}, { immediate: !0 }), a(l, te), E(() => {
+			$();
+		}), s({
+			show: q,
+			hide: K
+		}), (e, n) => (D(), _(d, null, [v("div", S(M(k), {
 			class: "m-contextmenu-anchor",
-			onContextmenu: W
-		}), [k(e.$slots, "default")], 16), (E(), m(d, {
-			to: V.value.to,
-			disabled: V.value.disabled
-		}, [v(f, {
-			name: j(L),
-			css: j(R)
+			onContextmenu: G
+		}), [A(e.$slots, "default")], 16), (D(), h(f, {
+			to: H.value.to,
+			disabled: H.value.disabled
+		}, [y(p, {
+			name: M(R),
+			css: M(z)
 		}, {
-			default: F(() => [c.value ? (E(), g("div", {
+			default: I(() => [l.value ? (D(), _("div", {
 				key: 0,
 				ref_key: "root",
-				ref: z,
-				class: C(["m-contextmenu", { "m-contextmenu--teleported": H.value }]),
+				ref: B,
+				class: w(["m-contextmenu", { "m-contextmenu--teleported": U.value }]),
 				role: "menu",
-				style: w(U.value),
-				onClick: n[0] ||= I(() => {}, ["stop"])
-			}, [v(a, {
+				style: T(W.value),
+				onClick: n[0] ||= L(() => {}, ["stop"])
+			}, [y(o, {
 				class: "m-contextmenu__scroll",
 				"fit-content": "",
 				"wrap-class": "m-contextmenu__scroll-wrap",
 				"view-class": "m-contextmenu__scroll-view"
 			}, {
-				default: F(() => [v(J, {
+				default: I(() => [y(Y, {
 					items: t.model,
-					onActivate: q
+					onActivate: J
 				}, null, 8, ["items"])]),
 				_: 1
-			})], 6)) : h("", !0)]),
+			})], 6)) : g("", !0)]),
 			_: 1
 		}, 8, ["name", "css"])], 8, ["to", "disabled"]))], 64));
 	}
 });
 //#endregion
 //#region src/components/ContextMenu/useContextMenu.ts
-function X() {
-	let e = D(!1), t = D({
+function Z() {
+	let e = O(!1), t = O({
 		x: 0,
 		y: 0
 	});
@@ -264,4 +273,4 @@ function X() {
 	};
 }
 //#endregion
-export { Y as MContextMenu, X as useContextMenu };
+export { X as MContextMenu, Z as useContextMenu };

package/dist/context-menu/style.css

@@ -50,6 +50,10 @@
     --m-font-size-sm: 0.8125rem;
     --m-font-size-md: 0.875rem;
     --m-font-size-lg: 1.125rem;
+    /* Display scale (page titles, KPI figures) */
+    --m-font-size-xl: 1.25rem;
+    --m-font-size-2xl: 1.5rem;
+    --m-font-size-3xl: 1.75rem;
     --m-opacity-disabled: 0.55;
     /* Layering: override --m-z-base via ConfigProvider / createMoryaUI */
     --m-z-base: 1000;
@@ -192,20 +196,10 @@
 
 /*
  * Global motion policy (complements per-component rules):
- * - `reduced` / OS prefers-reduced-motion: keep short paint transitions; stop loops
+ * - `reduced`: keep short paint transitions; stop loops
  *   and layout/transform size animation.
  * - `none`: zero all transition/animation durations.
  */
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) *,
-    html:not([data-m-ignore-reduced-motion]) *::before,
-    html:not([data-m-ignore-reduced-motion]) *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-property: background-color, border-color, color, opacity, box-shadow,
-            outline, fill, stroke, stroke-dashoffset !important;
-    }
-}
 
 [data-m-motion="reduced"] *,
 [data-m-motion="reduced"] *::before,
@@ -615,7 +609,7 @@
 .m-zoom-enter-from,
 .m-zoom-leave-to {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.95);
 }
 
 .m-slide-up-enter-active,
@@ -660,44 +654,6 @@
     transform: translateX(calc(var(--m-motion-distance) * -1));
 }
 
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) .m-fade-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-fade-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-active {
-        transition: none;
-    }
-
-    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-to {
-        transform: none;
-    }
-}
-
 [data-m-motion="reduced"] .m-fade-enter-active,
 [data-m-motion="reduced"] .m-fade-leave-active,
 [data-m-motion="reduced"] .m-scale-fade-enter-active,
@@ -1192,17 +1148,6 @@
     animation: none !important;
 }
 
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) *,
-    html:not([data-m-ignore-reduced-motion]) *::before,
-    html:not([data-m-ignore-reduced-motion]) *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        scroll-behavior: auto !important;
-        transition-duration: 0.01ms !important;
-    }
-}
-
 .m-icon {
     color: currentColor;
     display: inline-flex;
@@ -1247,12 +1192,6 @@
     }
 }
 
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) .m-icon--spin svg {
-        animation: none;
-    }
-}
-
 :root[data-m-motion='none'] .m-icon--spin svg,
 :root[data-m-motion='reduced'] .m-icon--spin svg {
     animation: none;
@@ -1382,14 +1321,6 @@
     opacity: 0;
 }
 
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) .m-scrollbar__thumb,
-    html:not([data-m-ignore-reduced-motion]) .m-scrollbar-fade-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-scrollbar-fade-leave-active {
-        transition: none;
-    }
-}
-
 :root[data-m-motion='none'] .m-scrollbar__thumb,
 :root[data-m-motion='none'] .m-scrollbar-fade-enter-active,
 :root[data-m-motion='none'] .m-scrollbar-fade-leave-active,
@@ -1415,6 +1346,7 @@
     overflow: hidden;
     padding: var(--m-space-1);
     position: fixed;
+    width: max-content;
     z-index: var(--m-z-popper);
 }
 
@@ -1424,8 +1356,7 @@
 }
 
 .m-contextmenu__scroll-view {
-    display: flex;
-    flex-direction: column;
+    display: grid;
     gap: var(--m-contextmenu-item-gap);
 }
 
@@ -1443,31 +1374,32 @@
     cursor: pointer;
     display: flex;
     font-family: var(--m-font-sans);
+    font-size: var(--m-control-font-medium);
     gap: var(--m-space-2);
-    min-height: var(--m-menu-item-height);
-    padding: var(--m-space-2) var(--m-space-3);
-    text-align: start;
+    min-height: var(--m-control-height-medium);
+    padding: 0 var(--m-control-padding-x-medium);
+    text-align: left;
     transition:
         background-color var(--m-motion-fast) var(--m-motion-ease),
-        opacity var(--m-motion-fast) var(--m-motion-ease);
+        color var(--m-motion-fast) var(--m-motion-ease);
+    white-space: nowrap;
     width: 100%;
 }
 
 .m-contextmenu__item:hover:not(:disabled) {
-    background: color-mix(
-        in srgb,
-        var(--m-color-primary) 10%,
-        var(--m-color-surface)
-    );
+    background: color-mix(in srgb, var(--m-color-primary) 10%, transparent);
+    color: var(--m-color-primary);
 }
 
 .m-contextmenu__item:disabled {
+    color: var(--m-color-text-muted);
     cursor: not-allowed;
     opacity: var(--m-opacity-disabled);
 }
 
 .m-contextmenu__item:focus-visible {
-    box-shadow: var(--m-focus-shadow);
+    background: color-mix(in srgb, var(--m-color-primary) 10%, transparent);
+    box-shadow: none;
     outline: none;
 }
 
@@ -1500,6 +1432,10 @@
     flex-shrink: 0;
 }
 
+.m-contextmenu__caret {
+    margin-left: auto;
+}
+
 .m-contextmenu__submenu-wrap {
     position: relative;
 }
@@ -1514,6 +1450,7 @@
     min-width: var(--m-contextmenu-min-width);
     overflow: hidden;
     padding: var(--m-space-1);
+    width: max-content;
 }
 
 .m-contextmenu__submenu--teleported {
@@ -1527,7 +1464,6 @@
 }
 
 .m-contextmenu__submenu-view {
-    display: flex;
-    flex-direction: column;
+    display: grid;
     gap: var(--m-contextmenu-item-gap);
 }

package/dist/data-view/index.js

@@ -1,6 +1,6 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { t } from "../Loading-BSsRs6v9.js";
-import { t as n } from "../Pagination-DrXmzcEy.js";
+import { t } from "../Loading-qS2Yv_gm.js";
+import { t as n } from "../Pagination-Bvv2qvEK.js";
 import { n as r } from "../locale-Bzm2nbEp.js";
 import "./style.js";
 import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createSlots as u, createVNode as d, defineComponent as f, mergeProps as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, unref as y, useAttrs as b, useSlots as x, watch as S, withCtx as C } from "vue";