morya-ui 0.3.0 → 0.3.2

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,
@@ -529,9 +523,13 @@
     border-radius: var(--m-radius-md);
     box-shadow: var(--m-shadow-md);
     max-height: var(--m-dropdown-submenu-max-height);
+    max-width: calc(100vw - 2 * var(--m-space-4));
     min-width: 10rem;
     overflow: hidden;
     padding: var(--m-space-1);
+    /* Same as .m-dropdown__menu: size to content instead of being clamped
+       by the space left of the anchor in the viewport. */
+    width: max-content;
 }
 
 .m-dropdown__submenu--teleported {
@@ -611,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,
@@ -656,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,
@@ -1188,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;
@@ -1243,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;
@@ -1378,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,

package/dist/data-view/index.js

@@ -1,27 +1,24 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { t } from "../Pagination-CVrH8Ypi.js";
-import { t as n } from "../ProgressSpinner-BeWVF6Jv.js";
+import { t } from "../Loading-BSsRs6v9.js";
+import { t as n } from "../Pagination-CqpC5EAs.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, defineComponent as u, mergeProps as d, openBlock as f, ref as p, renderList as m, renderSlot as h, toDisplayString as g, unref as _, useAttrs as v, useSlots as y, watch as b } from "vue";
+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";
 //#region src/components/DataView/DataView.vue?vue&type=script&setup=true&lang.ts
-var x = {
+var w = {
 	key: 0,
 	class: "m-dataview__header"
-}, S = { class: "m-dataview__content" }, C = {
+}, T = { class: "m-dataview__content" }, E = {
 	key: 0,
 	class: "m-dataview__list"
-}, w = {
+}, D = {
 	key: 0,
 	class: "m-dataview__grid"
-}, T = {
+}, O = {
 	key: 2,
-	class: "m-dataview__loading"
-}, E = { class: "m-dataview__loading-body" }, D = {
-	key: 3,
 	class: "m-dataview__message",
 	role: "status"
-}, O = { class: "m-dataview__empty-text" }, k = /* @__PURE__ */ u({
+}, k = { class: "m-dataview__empty-text" }, A = /* @__PURE__ */ f({
 	inheritAttrs: !1,
 	__name: "DataView",
 	props: {
@@ -55,49 +52,52 @@ var x = {
 		] }
 	},
 	emits: ["update:page"],
-	setup(u, { emit: k }) {
-		let A = u, j = k, M = v(), { rootAttrs: N } = e(M, () => A.pt), P = r(), F = y(), I = p(1), L = a({
-			get: () => A.page ?? I.value,
+	setup(f, { emit: A }) {
+		let j = f, M = A, N = b(), { rootAttrs: P } = e(N, () => j.pt), F = r(), I = x(), L = h(1), R = a({
+			get: () => j.page ?? L.value,
 			set: (e) => {
-				I.value = e, j("update:page", e);
+				L.value = e, M("update:page", e);
 			}
-		}), R = a(() => {
-			if (!A.paginator) return A.value;
-			let e = (L.value - 1) * A.rows;
-			return A.value.slice(e, e + A.rows);
-		}), z = a(() => !A.value.length), B = a(() => A.emptyMessage ?? P.value.emptyMessage), V = a(() => ["m-dataview", `m-dataview--${A.layout}`]);
-		return b(() => [A.rows, A.paginator], () => {
-			L.value = 1;
-		}), b(() => A.value.length, (e) => {
-			if (!A.paginator || e === 0) return;
-			let t = Math.max(1, Math.ceil(e / A.rows));
-			L.value > t && (L.value = t);
-		}), (e, r) => (f(), c("div", d(_(N), { class: V.value }), [
-			_(F).header ? (f(), c("div", x, [h(e.$slots, "header")])) : s("", !0),
-			l("div", S, [
-				u.layout === "list" ? h(e.$slots, "list", { items: R.value }, () => [R.value.length ? (f(), c("ul", C, [(f(!0), c(i, null, m(R.value, (e, t) => (f(), c("li", {
+		}), z = a(() => {
+			if (!j.paginator) return j.value;
+			let e = (R.value - 1) * j.rows;
+			return j.value.slice(e, e + j.rows);
+		}), B = a(() => !j.value.length), V = a(() => j.emptyMessage ?? F.value.emptyMessage), H = a(() => ["m-dataview", `m-dataview--${j.layout}`]);
+		return S(() => [j.rows, j.paginator], () => {
+			R.value = 1;
+		}), S(() => j.value.length, (e) => {
+			if (!j.paginator || e === 0) return;
+			let t = Math.max(1, Math.ceil(e / j.rows));
+			R.value > t && (R.value = t);
+		}), (e, r) => (m(), c("div", p(y(P), { class: H.value }), [
+			y(I).header ? (m(), c("div", w, [_(e.$slots, "header")])) : s("", !0),
+			d(t, {
+				loading: f.loading,
+				size: "sm"
+			}, u({
+				default: C(() => [l("div", T, [f.layout === "list" ? _(e.$slots, "list", { items: z.value }, () => [z.value.length ? (m(), c("ul", E, [(m(!0), c(i, null, g(z.value, (e, t) => (m(), c("li", {
 					key: t,
 					class: "m-dataview__list-item"
-				}, g(e), 1))), 128))])) : s("", !0)], void 0, 0) : h(e.$slots, "grid", { items: R.value }, () => [R.value.length ? (f(), c("div", w, [(f(!0), c(i, null, m(R.value, (e, t) => (f(), c("div", {
+				}, v(e), 1))), 128))])) : s("", !0)], void 0, 0) : _(e.$slots, "grid", { items: z.value }, () => [z.value.length ? (m(), c("div", D, [(m(!0), c(i, null, g(z.value, (e, t) => (m(), c("div", {
 					key: t,
 					class: "m-dataview__grid-item"
-				}, g(e), 1))), 128))])) : s("", !0)], void 0, 1),
-				u.loading ? (f(), c("div", T, [r[1] ||= l("div", { class: "m-dataview__loading-mask" }, null, -1), l("div", E, [_(F).loading ? h(e.$slots, "loading", {}, void 0, void 0, 0) : (f(), o(n, {
-					key: 1,
-					size: "sm"
-				}))])])) : s("", !0),
-				z.value && !u.loading ? (f(), c("div", D, [h(e.$slots, "empty", {}, () => [l("p", O, g(B.value), 1)])])) : s("", !0)
-			]),
-			u.paginator ? (f(), o(t, {
+				}, v(e), 1))), 128))])) : s("", !0)], void 0, 1), B.value && !f.loading ? (m(), c("div", O, [_(e.$slots, "empty", {}, () => [l("p", k, v(V.value), 1)])])) : s("", !0)])]),
+				_: 2
+			}, [y(I).loading ? {
+				name: "indicator",
+				fn: C(() => [_(e.$slots, "loading")]),
+				key: "0"
+			} : void 0]), 1032, ["loading"]),
+			f.paginator ? (m(), o(n, {
 				key: 1,
-				modelValue: L.value,
-				"onUpdate:modelValue": r[0] ||= (e) => L.value = e,
+				modelValue: R.value,
+				"onUpdate:modelValue": r[0] ||= (e) => R.value = e,
 				class: "m-dataview__paginator",
-				"total-records": u.value.length,
-				rows: u.rows,
-				disabled: u.disabled,
-				"show-size-picker": u.showSizePicker,
-				"page-sizes": u.pageSizes
+				"total-records": f.value.length,
+				rows: f.rows,
+				disabled: f.disabled,
+				"show-size-picker": f.showSizePicker,
+				"page-sizes": f.pageSizes
 			}, null, 8, [
 				"modelValue",
 				"total-records",
@@ -110,4 +110,4 @@ var x = {
 	}
 });
 //#endregion
-export { k as MDataView };
+export { A as MDataView };