morya-ui 0.2.1 → 0.2.3

package/dist/menu/style.css

@@ -1012,10 +1012,64 @@
     transform: translate(var(--m-motion-distance), -50%);
 }
 
+.m-tooltip {
+    display: inline-flex;
+    position: relative;
+}
+
+.m-tooltip__content {
+    background: var(--m-color-text);
+    border-radius: var(--m-radius-sm);
+    color: var(--m-color-surface);
+    font-family: var(--m-font-sans);
+    font-size: var(--m-font-size-xs);
+    left: 50%;
+    line-height: 1.35;
+    padding: var(--m-space-2) var(--m-space-3);
+    pointer-events: none;
+    position: absolute;
+    transform: translateX(-50%);
+    white-space: nowrap;
+    z-index: var(--m-z-popper);
+}
+
+.m-tooltip__content--top {
+    bottom: calc(100% + var(--m-space-2));
+}
+
+.m-tooltip__content--bottom {
+    top: calc(100% + var(--m-space-2));
+}
+
+.m-tooltip__content--left {
+    left: auto;
+    right: calc(100% + var(--m-space-2));
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.m-tooltip__content--right {
+    left: calc(100% + var(--m-space-2));
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.m-tooltip__content--teleported {
+    bottom: auto;
+    left: auto;
+    position: fixed;
+    right: auto;
+    top: auto;
+    white-space: normal;
+    z-index: var(--m-z-tooltip);
+}
+
 /* —— Menu —— */
 .m-menu {
     --m-menu-indent: var(--m-space-3);
     --m-menu-root-indent: var(--m-space-4);
+    --m-menu-submenu-gap: var(--m-space-2);
+    --m-menu-submenu-inset: var(--m-space-2);
     --m-menu-item-radius: var(--m-radius-md);
     --m-menu-color: transparent;
     --m-menu-item-color-hover: color-mix(
@@ -1224,6 +1278,12 @@
     margin-top: 0.25rem;
 }
 
+.m-menu--collapsed .m-menu__item .m-tooltip,
+.m-menu--collapsed .m-menu__collapsed-popover .m-tooltip {
+    display: flex;
+    width: 100%;
+}
+
 .m-menu--collapsed .m-menu__item-content {
     align-items: center;
     display: flex;
@@ -1382,9 +1442,14 @@
     height: 1rem;
     justify-content: center;
     margin-inline-start: 0.25rem;
+    transition: transform var(--m-motion-fast) var(--m-motion-ease);
     width: 1rem;
 }
 
+.m-menu__arrow--expanded {
+    transform: rotate(90deg);
+}
+
 .m-menu__separator {
     background: var(--m-color-border);
     height: 1px;
@@ -1392,25 +1457,34 @@
 }
 
 .m-menu__submenu {
+    display: grid;
+    grid-template-rows: 1fr;
+}
+
+.m-menu__submenu-inner {
+    min-height: 0;
     overflow: hidden;
+    padding-block-start: var(--m-menu-submenu-gap);
+    padding-inline-start: var(--m-menu-submenu-inset);
 }
 
 .m-menu-expand-enter-active,
 .m-menu-expand-leave-active {
+    overflow: hidden;
     transition:
-        max-height var(--m-motion-normal) var(--m-motion-ease),
+        grid-template-rows var(--m-motion-normal) var(--m-motion-ease),
         opacity var(--m-motion-normal) var(--m-motion-ease);
 }
 
 .m-menu-expand-enter-from,
 .m-menu-expand-leave-to {
-    max-height: 0;
+    grid-template-rows: 0fr;
     opacity: 0;
 }
 
 .m-menu-expand-enter-to,
 .m-menu-expand-leave-from {
-    max-height: 30rem;
+    grid-template-rows: 1fr;
     opacity: 1;
 }
 

package/dist/menu/style.js

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

package/dist/page/index.js

@@ -0,0 +1,176 @@
+import { r as e } from "../useComponentAttrs-BTYEe61P.js";
+import { t } from "../Icon-DfpIfo2L.js";
+import { t as n } from "../Card-BQfmv5Iw.js";
+import { r } from "../responsive-DA5bxylA.js";
+import "./style.js";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, openBlock as p, renderSlot as m, resolveDynamicComponent as h, toDisplayString as g, unref as _, useAttrs as v, useSlots as y, withCtx as b } from "vue";
+//#endregion
+//#region src/components/Page/PageContent.vue
+var x = /* @__PURE__ */ u({
+	name: "MPageContent",
+	inheritAttrs: !1,
+	__name: "PageContent",
+	props: {
+		pt: {},
+		density: { default: "default" },
+		width: { default: "full" }
+	},
+	setup(t) {
+		let n = t, r = v(), { rootAttrs: a } = e(r, () => n.pt), o = i(() => ["m-page-content", {
+			"m-page-content--compact": n.density === "compact",
+			"m-page-content--spacious": n.density === "spacious",
+			"m-page-content--narrow": n.width === "narrow"
+		}]);
+		return (e, t) => (p(), s("div", d(_(a), { class: o.value }), [m(e.$slots, "default")], 16));
+	}
+}), S = ["aria-label"], C = /* @__PURE__ */ u({
+	name: "MPageFilters",
+	inheritAttrs: !1,
+	__name: "PageFilters",
+	props: {
+		pt: {},
+		ariaLabel: {}
+	},
+	setup(t) {
+		let n = t, r = v(), { rootAttrs: i } = e(r, () => n.pt);
+		return (e, n) => (p(), s("section", d(_(i), {
+			class: "m-page-filters",
+			"aria-label": t.ariaLabel
+		}), [m(e.$slots, "default")], 16, S));
+	}
+}), w = { class: "m-page-header__main" }, T = {
+	key: 2,
+	class: "m-page-header__description"
+}, E = {
+	key: 0,
+	class: "m-page-header__actions"
+}, D = /* @__PURE__ */ u({
+	name: "MPageHeader",
+	inheritAttrs: !1,
+	__name: "PageHeader",
+	props: {
+		pt: {},
+		title: {},
+		description: {},
+		headingLevel: { default: 1 }
+	},
+	setup(t) {
+		let n = t, r = v(), { rootAttrs: u } = e(r, () => n.pt), f = y(), x = i(() => `h${n.headingLevel}`), S = i(() => !!f.actions);
+		return (e, n) => (p(), s("header", d(_(u), { class: "m-page-header" }), [c("div", w, [t.title ? (p(), a(h(x.value), {
+			key: 0,
+			class: "m-page-header__title"
+		}, {
+			default: b(() => [l(g(t.title), 1)]),
+			_: 1
+		})) : m(e.$slots, "title", {}, void 0, void 0, 1), t.description ? (p(), s("p", T, g(t.description), 1)) : _(f).description ? m(e.$slots, "description", {}, void 0, void 0, 3) : o("", !0)]), S.value ? (p(), s("div", E, [m(e.$slots, "actions")])) : o("", !0)], 16));
+	}
+}), O = ["aria-label"], k = /* @__PURE__ */ u({
+	name: "MPagePlaceholder",
+	inheritAttrs: !1,
+	__name: "PagePlaceholder",
+	props: {
+		pt: {},
+		description: { default: "" },
+		ariaLabel: { default: "Placeholder" },
+		minHeight: { default: "12rem" }
+	},
+	setup(t) {
+		let n = t, a = v(), { rootAttrs: o } = e(a, () => n.pt), c = i(() => ({ "--m-page-placeholder-min-height": r(n.minHeight) }));
+		return (e, n) => (p(), s("div", d(_(o), {
+			class: "m-page-placeholder",
+			role: "img",
+			"aria-label": t.ariaLabel,
+			style: c.value
+		}), [m(e.$slots, "default", {}, () => [l(g(t.description), 1)])], 16, O));
+	}
+}), A = /* @__PURE__ */ u({
+	name: "MPageSection",
+	inheritAttrs: !1,
+	__name: "PageSection",
+	props: {
+		pt: {},
+		variant: { default: "default" },
+		title: {},
+		headingLevel: { default: 2 }
+	},
+	setup(t) {
+		let n = t, r = v(), { rootAttrs: c } = e(r, () => n.pt), u = i(() => `h${n.headingLevel}`), f = i(() => ["m-page-section", {
+			"m-page-section--muted": n.variant === "muted",
+			"m-page-section--form": n.variant === "form",
+			"m-page-section--actions": n.variant === "actions"
+		}]);
+		return (e, n) => (p(), s("section", d(_(c), { class: f.value }), [t.title ? (p(), a(h(u.value), {
+			key: 0,
+			class: "m-page-section__title"
+		}, {
+			default: b(() => [l(g(t.title), 1)]),
+			_: 1
+		})) : o("", !0), m(e.$slots, "default")], 16));
+	}
+}), j = { class: "m-page-stat__body" }, M = {
+	key: 0,
+	class: "m-page-stat__label"
+}, N = {
+	key: 1,
+	class: "m-page-stat__value"
+}, P = /* @__PURE__ */ u({
+	name: "MPageStat",
+	inheritAttrs: !1,
+	__name: "PageStat",
+	props: {
+		pt: {},
+		label: {},
+		value: {},
+		trend: {},
+		trendSeverity: { default: "primary" },
+		icon: {}
+	},
+	setup(r) {
+		let l = r, u = v(), { rootAttrs: h } = e(u, () => l.pt), y = i(() => ["m-page-stat__trend", `m-page-stat__trend--${l.trendSeverity}`]);
+		return (e, i) => (p(), a(n, d(_(h), {
+			class: "m-page-stat",
+			"aria-label": r.label
+		}), {
+			default: b(() => [c("div", j, [c("div", null, [
+				r.label ? (p(), s("p", M, g(r.label), 1)) : o("", !0),
+				r.value != null && r.value !== "" ? (p(), s("p", N, g(r.value), 1)) : o("", !0),
+				r.trend ? (p(), s("p", {
+					key: 2,
+					class: f(y.value)
+				}, g(r.trend), 3)) : o("", !0),
+				m(e.$slots, "default")
+			]), r.icon ? (p(), a(t, {
+				key: 0,
+				name: r.icon,
+				size: "lg",
+				class: "m-page-stat__icon",
+				"aria-hidden": "true"
+			}, null, 8, ["name"])) : o("", !0)])]),
+			_: 3
+		}, 16, ["aria-label"]));
+	}
+}), F = {
+	key: 2,
+	class: "m-page-toolbar__actions"
+}, I = /* @__PURE__ */ u({
+	name: "MPageToolbar",
+	inheritAttrs: !1,
+	__name: "PageToolbar",
+	props: {
+		pt: {},
+		title: {},
+		headingLevel: { default: 1 }
+	},
+	setup(t) {
+		let n = t, r = v(), { rootAttrs: c } = e(r, () => n.pt), u = y(), f = i(() => `h${n.headingLevel}`), x = i(() => !!u.actions);
+		return (e, n) => (p(), s("header", d(_(c), { class: "m-page-toolbar" }), [t.title ? (p(), a(h(f.value), {
+			key: 0,
+			class: "m-page-toolbar__title"
+		}, {
+			default: b(() => [l(g(t.title), 1)]),
+			_: 1
+		})) : m(e.$slots, "default", {}, void 0, void 0, 1), x.value ? (p(), s("div", F, [m(e.$slots, "actions")])) : o("", !0)], 16));
+	}
+});
+//#endregion
+export { x as MPageContent, C as MPageFilters, D as MPageHeader, k as MPagePlaceholder, A as MPageSection, P as MPageStat, I as MPageToolbar };