morya-ui 0.2.2 → 0.2.4

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 };