morya-ui 0.1.1 → 0.2.2

package/dist/layout/index.js

@@ -1,10 +1,11 @@
-import { t as e } from "../Icon-DfpIfo2L.js";
-import { r as t, t as n } from "../responsive-DA5bxylA.js";
-import { n as r } from "../locale-DYGhxekd.js";
+import { r as e } from "../useComponentAttrs-BTYEe61P.js";
+import { t } from "../Icon-DfpIfo2L.js";
+import { r as n, t as r } from "../responsive-DA5bxylA.js";
+import { n as i } from "../locale-DYGhxekd.js";
 import "./style.js";
-import { computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, inject as u, normalizeClass as d, normalizeStyle as f, openBlock as p, provide as m, ref as h, renderSlot as g, toValue as _, unref as v, watch as y } from "vue";
+import { computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, inject as d, mergeProps as f, normalizeClass as p, normalizeStyle as m, openBlock as h, provide as g, ref as _, renderSlot as v, toValue as y, unref as b, useAttrs as x, watch as S } from "vue";
 //#region src/components/Layout/composables/useLayoutScroll.ts
-function b(e, t) {
+function C(e, t) {
 	function n(t, n) {
 		let r = e.value;
 		r && (typeof t == "number" ? r.scrollTo(t, n ?? 0) : r.scrollTo(t));
@@ -19,10 +20,12 @@ function b(e, t) {
 }
 //#endregion
 //#region src/components/Layout/context.ts
-var x = Symbol("muLayout"), S = /* @__PURE__ */ l({
+var w = Symbol("muLayout"), T = /* @__PURE__ */ u({
 	name: "MLayout",
+	inheritAttrs: !1,
 	__name: "Layout",
 	props: {
+		pt: {},
 		height: {},
 		width: {},
 		embedded: {
@@ -39,67 +42,67 @@ var x = Symbol("muLayout"), S = /* @__PURE__ */ l({
 		contentStyle: {}
 	},
 	emits: ["scroll"],
-	setup(e, { expose: n, emit: r }) {
-		let a = e, c = r;
-		m(x, {
+	setup(t, { expose: r, emit: i }) {
+		let o = t, l = x(), { rootAttrs: u } = e(l, () => o.pt), d = i;
+		g(w, {
 			get hasSider() {
-				return a.hasSider;
+				return o.hasSider;
 			},
 			get siderPlacement() {
-				return a.siderPlacement;
+				return o.siderPlacement;
 			}
 		});
-		let l = h(null), { scrollTo: u, onScroll: _ } = b(l, c), y = i(() => ({
-			...a.height == null ? {} : { height: t(a.height) },
-			width: a.width == null ? "100%" : t(a.width)
-		})), S = i(() => [
+		let y = _(null), { scrollTo: S, onScroll: T } = C(y, d), E = a(() => ({
+			...o.height == null ? {} : { height: n(o.height) },
+			width: o.width == null ? "100%" : n(o.width)
+		})), D = a(() => [
 			"m-layout",
-			`m-layout--${a.position}-positioned`,
+			`m-layout--${o.position}-positioned`,
 			{
-				"m-layout--embedded": a.embedded,
-				"m-layout--has-sider": a.hasSider,
-				"m-layout--sider-right": a.hasSider && a.siderPlacement === "right"
+				"m-layout--embedded": o.embedded,
+				"m-layout--has-sider": o.hasSider,
+				"m-layout--sider-right": o.hasSider && o.siderPlacement === "right"
 			}
-		]), C = i(() => {
-			if (!a.hasSider) return a.contentStyle;
+		]), O = a(() => {
+			if (!o.hasSider) return o.contentStyle;
 			let e = {
 				display: "flex",
 				flexWrap: "nowrap",
 				width: "100%",
-				flexDirection: a.siderPlacement === "right" ? "row-reverse" : "row"
+				flexDirection: o.siderPlacement === "right" ? "row-reverse" : "row"
 			};
-			return [a.contentStyle, e];
-		}), w = i(() => [
+			return [o.contentStyle, e];
+		}), k = a(() => [
 			"m-layout__scroll",
-			a.contentClass,
-			{ "m-layout__scroll--has-sider": a.hasSider }
+			o.contentClass,
+			{ "m-layout__scroll--has-sider": o.hasSider }
 		]);
-		return n({ scrollTo: u }), (e, t) => (p(), o("div", {
-			class: d(S.value),
-			style: f(y.value)
-		}, [s("div", {
+		return r({ scrollTo: S }), (e, t) => (h(), s("div", f(b(u), {
+			class: D.value,
+			style: E.value
+		}), [c("div", {
 			ref_key: "scrollEl",
-			ref: l,
-			class: d(w.value),
-			style: f(C.value),
-			onScroll: t[0] ||= (...e) => v(_) && v(_)(...e)
-		}, [g(e.$slots, "default")], 38)], 6));
+			ref: y,
+			class: p(k.value),
+			style: m(O.value),
+			onScroll: t[0] ||= (...e) => b(T) && b(T)(...e)
+		}, [v(e.$slots, "default")], 38)], 16));
 	}
 });
 //#endregion
 //#region src/components/Layout/composables/useLayoutRegionStyle.ts
-function C(e, n) {
-	return e == null ? n : t(e) ?? n;
+function E(e, t) {
+	return e == null ? t : n(e) ?? t;
 }
-function w(e) {
-	return i(() => {
-		let n = _(e), r = {
-			padding: C(n.padding, "var(--m-layout-padding, var(--m-space-4))"),
-			borderRadius: C(n.radius, "var(--m-layout-radius, 0)")
+function D(e) {
+	return a(() => {
+		let t = y(e), r = {
+			padding: E(t.padding, "var(--m-layout-padding, var(--m-space-4))"),
+			borderRadius: E(t.radius, "var(--m-layout-radius, 0)")
 		};
-		if (n.heightFallback != null) r.height = C(n.height, n.heightFallback);
-		else if (n.height != null) {
-			let e = t(n.height);
+		if (t.heightFallback != null) r.height = E(t.height, t.heightFallback);
+		else if (t.height != null) {
+			let e = n(t.height);
 			e && (r.height = e);
 		}
 		return r;
@@ -107,10 +110,12 @@ function w(e) {
 }
 //#endregion
 //#region src/components/Layout/LayoutContent.vue
-var T = /* @__PURE__ */ l({
+var O = /* @__PURE__ */ u({
 	name: "MLayoutContent",
+	inheritAttrs: !1,
 	__name: "LayoutContent",
 	props: {
+		pt: {},
 		height: {},
 		padding: {},
 		radius: {},
@@ -123,32 +128,34 @@ var T = /* @__PURE__ */ l({
 		contentStyle: {}
 	},
 	emits: ["scroll"],
-	setup(e, { expose: t, emit: n }) {
-		let r = e, a = n, c = h(null), { scrollTo: l, onScroll: u } = b(c, a), m = w(() => ({
-			height: r.height,
-			padding: r.padding,
-			radius: r.radius
-		})), _ = i(() => [
+	setup(t, { expose: n, emit: r }) {
+		let i = t, o = x(), { rootAttrs: l } = e(o, () => i.pt), u = r, d = _(null), { scrollTo: g, onScroll: y } = C(d, u), S = D(() => ({
+			height: i.height,
+			padding: i.padding,
+			radius: i.radius
+		})), w = a(() => [
 			"m-layout",
 			"m-layout-content",
-			`m-layout--${r.position}-positioned`,
-			{ "m-layout--embedded": r.embedded }
-		]), y = i(() => ["m-layout__scroll", r.contentClass]), x = i(() => r.contentStyle);
-		return t({ scrollTo: l }), (e, t) => (p(), o("main", {
-			class: d(_.value),
-			style: f(v(m))
-		}, [s("div", {
+			`m-layout--${i.position}-positioned`,
+			{ "m-layout--embedded": i.embedded }
+		]), T = a(() => ["m-layout__scroll", i.contentClass]), E = a(() => i.contentStyle);
+		return n({ scrollTo: g }), (e, t) => (h(), s("main", f(b(l), {
+			class: w.value,
+			style: b(S)
+		}), [c("div", {
 			ref_key: "scrollEl",
-			ref: c,
-			class: d(y.value),
-			style: f(x.value),
-			onScroll: t[0] ||= (...e) => v(u) && v(u)(...e)
-		}, [g(e.$slots, "default")], 38)], 6));
+			ref: d,
+			class: p(T.value),
+			style: m(E.value),
+			onScroll: t[0] ||= (...e) => b(y) && b(y)(...e)
+		}, [v(e.$slots, "default")], 38)], 16));
 	}
-}), E = /* @__PURE__ */ l({
+}), k = /* @__PURE__ */ u({
 	name: "MLayoutFooter",
+	inheritAttrs: !1,
 	__name: "LayoutFooter",
 	props: {
+		pt: {},
 		height: {},
 		padding: {},
 		radius: {},
@@ -162,29 +169,31 @@ var T = /* @__PURE__ */ l({
 		},
 		position: { default: "static" }
 	},
-	setup(e) {
-		let t = e, n = w(() => ({
-			height: t.height,
+	setup(t) {
+		let n = t, r = x(), { rootAttrs: i } = e(r, () => n.pt), o = D(() => ({
+			height: n.height,
 			heightFallback: "var(--m-layout-footer-height, 48px)",
-			padding: t.padding,
-			radius: t.radius
-		})), r = i(() => [
+			padding: n.padding,
+			radius: n.radius
+		})), c = a(() => [
 			"m-layout-footer",
-			`m-layout-footer--${t.position}-positioned`,
+			`m-layout-footer--${n.position}-positioned`,
 			{
-				"m-layout-footer--bordered": t.bordered,
-				"m-layout-footer--inverted": t.inverted
+				"m-layout-footer--bordered": n.bordered,
+				"m-layout-footer--inverted": n.inverted
 			}
 		]);
-		return (e, t) => (p(), o("footer", {
-			class: d(r.value),
-			style: f(v(n))
-		}, [g(e.$slots, "default")], 6));
+		return (e, t) => (h(), s("footer", f(b(i), {
+			class: c.value,
+			style: b(o)
+		}), [v(e.$slots, "default")], 16));
 	}
-}), D = /* @__PURE__ */ l({
+}), A = /* @__PURE__ */ u({
 	name: "MLayoutHeader",
+	inheritAttrs: !1,
 	__name: "LayoutHeader",
 	props: {
+		pt: {},
 		height: {},
 		padding: {},
 		radius: {},
@@ -198,67 +207,69 @@ var T = /* @__PURE__ */ l({
 		},
 		position: { default: "static" }
 	},
-	setup(e) {
-		let t = e, n = w(() => ({
-			height: t.height,
+	setup(t) {
+		let n = t, r = x(), { rootAttrs: i } = e(r, () => n.pt), o = D(() => ({
+			height: n.height,
 			heightFallback: "var(--m-layout-header-height, 56px)",
-			padding: t.padding,
-			radius: t.radius
-		})), r = i(() => [
+			padding: n.padding,
+			radius: n.radius
+		})), c = a(() => [
 			"m-layout-header",
-			`m-layout-header--${t.position}-positioned`,
+			`m-layout-header--${n.position}-positioned`,
 			{
-				"m-layout-header--bordered": t.bordered,
-				"m-layout-header--inverted": t.inverted
+				"m-layout-header--bordered": n.bordered,
+				"m-layout-header--inverted": n.inverted
 			}
 		]);
-		return (e, t) => (p(), o("header", {
-			class: d(r.value),
-			style: f(v(n))
-		}, [g(e.$slots, "default")], 6));
+		return (e, t) => (h(), s("header", f(b(i), {
+			class: c.value,
+			style: b(o)
+		}), [v(e.$slots, "default")], 16));
 	}
 });
 //#endregion
 //#region src/components/Layout/composables/useLayoutSiderCollapse.ts
-function O(e, t) {
-	let n = h(e.defaultCollapsed);
-	y(() => e.collapsed, (e) => {
+function j(e, t) {
+	let n = _(e.defaultCollapsed);
+	S(() => e.collapsed, (e) => {
 		e !== void 0 && (n.value = e);
 	});
-	let r = i(() => e.collapsed === void 0 ? n.value : !!e.collapsed);
-	function a() {
+	let r = a(() => e.collapsed === void 0 ? n.value : !!e.collapsed);
+	function i() {
 		let e = !r.value;
 		n.value = e, t("update:collapsed", e), t(e ? "collapse" : "expand");
 	}
 	return {
 		mergedCollapsed: r,
-		toggle: a,
+		toggle: i,
 		uncontrolled: n
 	};
 }
 //#endregion
 //#region src/components/Layout/utils.ts
-function k(e) {
+function M(e) {
 	return e ? e === "bar" || e === !0 ? "bar" : "arrow-circle" : null;
 }
 //#endregion
 //#region src/components/Layout/LayoutSider.vue?vue&type=script&setup=true&lang.ts
-var A = ["aria-expanded", "aria-label"], j = {
+var N = ["aria-expanded", "aria-label"], P = {
 	key: 0,
 	class: "m-layout-sider__arrow",
 	"aria-hidden": "true"
-}, M = {
+}, F = {
 	key: 1,
 	class: "m-layout-sider__bar",
 	"aria-hidden": "true"
-}, N = {
+}, I = {
 	key: 1,
 	class: "m-layout-sider__border",
 	"aria-hidden": "true"
-}, P = /* @__PURE__ */ l({
+}, L = /* @__PURE__ */ u({
 	name: "MLayoutSider",
+	inheritAttrs: !1,
 	__name: "LayoutSider",
 	props: {
+		pt: {},
 		bordered: {
 			type: Boolean,
 			default: !1
@@ -301,63 +312,63 @@ var A = ["aria-expanded", "aria-label"], j = {
 		"after-leave",
 		"scroll"
 	],
-	setup(l, { expose: m, emit: _ }) {
-		let y = l, S = _, C = r(), w = u(x, null), T = h(null), { scrollTo: E, onScroll: D } = b(T, S), { mergedCollapsed: P, toggle: F } = O(y, S), I = i(() => w?.siderPlacement ?? "left"), L = i(() => t(y.width)), R = i(() => t(y.collapsedWidth)), z = i(() => L.value ?? "var(--m-layout-sider-width)"), B = i(() => R.value ?? "var(--m-layout-sider-collapsed-width)"), V = i(() => P.value ? B.value : z.value), H = i(() => k(y.showTrigger)), U = i(() => !P.value || y.showCollapsedContent), W = i(() => [
+	setup(u, { expose: g, emit: y }) {
+		let S = u, T = x(), { rootAttrs: E } = e(T, () => S.pt), D = y, O = i(), k = d(w, null), A = _(null), { scrollTo: L, onScroll: R } = C(A, D), { mergedCollapsed: z, toggle: B } = j(S, D), V = a(() => k?.siderPlacement ?? "left"), H = a(() => n(S.width)), U = a(() => n(S.collapsedWidth)), W = a(() => H.value ?? "var(--m-layout-sider-width)"), G = a(() => U.value ?? "var(--m-layout-sider-collapsed-width)"), K = a(() => z.value ? G.value : W.value), q = a(() => M(S.showTrigger)), J = a(() => !z.value || S.showCollapsedContent), Y = a(() => [
 			"m-layout-sider",
-			`m-layout-sider--${y.position}-positioned`,
-			`m-layout-sider--${I.value}-placement`,
-			`m-layout-sider--collapse-${y.collapseMode}`,
+			`m-layout-sider--${S.position}-positioned`,
+			`m-layout-sider--${V.value}-placement`,
+			`m-layout-sider--collapse-${S.collapseMode}`,
 			{
-				"m-layout-sider--bordered": y.bordered,
-				"m-layout-sider--inverted": y.inverted,
-				"m-layout-sider--collapsed": P.value,
-				"m-layout-sider--show-content": U.value
+				"m-layout-sider--bordered": S.bordered,
+				"m-layout-sider--inverted": S.inverted,
+				"m-layout-sider--collapsed": z.value,
+				"m-layout-sider--show-content": J.value
 			}
-		]), G = i(() => {
-			let e = y.collapseMode === "width", r = {
+		]), X = a(() => {
+			let e = S.collapseMode === "width", t = {
 				minWidth: "0",
-				borderRadius: y.radius == null ? "var(--m-layout-radius, 0)" : t(y.radius),
-				width: e ? V.value : z.value,
-				maxWidth: V.value
+				borderRadius: S.radius == null ? "var(--m-layout-radius, 0)" : n(S.radius),
+				width: e ? K.value : W.value,
+				maxWidth: K.value
 			};
-			return L.value && !n(L.value, "--m-layout-sider-width") && (r["--m-layout-sider-width"] = L.value), R.value && !n(R.value, "--m-layout-sider-collapsed-width") && (r["--m-layout-sider-collapsed-width"] = R.value), r;
-		}), K = i(() => y.padding == null ? "var(--m-layout-padding, var(--m-space-4))" : t(y.padding)), q = i(() => {
-			let e = { padding: K.value };
-			return y.contentStyle == null ? e : [e, y.contentStyle];
-		}), J = i(() => ["m-layout-sider__scroll", y.contentClass]), Y = i(() => P.value ? y.collapsedTriggerClass : y.triggerClass), X = i(() => P.value ? y.collapsedTriggerStyle : y.triggerStyle);
-		function Z(e) {
-			e.propertyName === "max-width" && (P.value ? S("after-leave") : S("after-enter"));
+			return H.value && !r(H.value, "--m-layout-sider-width") && (t["--m-layout-sider-width"] = H.value), U.value && !r(U.value, "--m-layout-sider-collapsed-width") && (t["--m-layout-sider-collapsed-width"] = U.value), t;
+		}), Z = a(() => S.padding == null ? "var(--m-layout-padding, var(--m-space-4))" : n(S.padding)), Q = a(() => {
+			let e = { padding: Z.value };
+			return S.contentStyle == null ? e : [e, S.contentStyle];
+		}), $ = a(() => ["m-layout-sider__scroll", S.contentClass]), ee = a(() => z.value ? S.collapsedTriggerClass : S.triggerClass), te = a(() => z.value ? S.collapsedTriggerStyle : S.triggerStyle);
+		function ne(e) {
+			e.propertyName === "max-width" && (z.value ? D("after-leave") : D("after-enter"));
 		}
-		return m({ scrollTo: E }), (t, n) => (p(), o("aside", {
-			class: d(W.value),
-			style: f(G.value),
-			onTransitionend: Z
-		}, [
-			s("div", {
+		return g({ scrollTo: L }), (e, n) => (h(), s("aside", f(b(E), {
+			class: Y.value,
+			style: X.value,
+			onTransitionend: ne
+		}), [
+			c("div", {
 				ref_key: "scrollEl",
-				ref: T,
-				class: d(J.value),
-				style: f(q.value),
-				onScroll: n[0] ||= (...e) => v(D) && v(D)(...e)
-			}, [g(t.$slots, "default")], 38),
-			H.value ? (p(), o("button", {
+				ref: A,
+				class: p($.value),
+				style: m(Q.value),
+				onScroll: n[0] ||= (...e) => b(R) && b(R)(...e)
+			}, [v(e.$slots, "default")], 38),
+			q.value ? (h(), s("button", {
 				key: 0,
 				type: "button",
-				class: d(["m-layout-sider__trigger", [Y.value, {
-					"m-layout-sider__trigger--bar": H.value === "bar",
-					"m-layout-sider__trigger--arrow-circle": H.value === "arrow-circle"
+				class: p(["m-layout-sider__trigger", [ee.value, {
+					"m-layout-sider__trigger--bar": q.value === "bar",
+					"m-layout-sider__trigger--arrow-circle": q.value === "arrow-circle"
 				}]]),
-				style: f(X.value),
-				"aria-expanded": !v(P),
-				"aria-label": v(P) ? v(C).expand : v(C).collapse,
-				onClick: n[1] ||= (...e) => v(F) && v(F)(...e)
-			}, [H.value === "arrow-circle" ? (p(), o("span", j, [c(e, {
+				style: m(te.value),
+				"aria-expanded": !b(z),
+				"aria-label": b(z) ? b(O).expand : b(O).collapse,
+				onClick: n[1] ||= (...e) => b(B) && b(B)(...e)
+			}, [q.value === "arrow-circle" ? (h(), s("span", P, [l(t, {
 				name: "chevron-right",
 				size: "sm"
-			})])) : (p(), o("span", M, [...n[2] ||= [s("i", { class: "m-layout-sider__bar-top" }, null, -1), s("i", { class: "m-layout-sider__bar-bottom" }, null, -1)]]))], 14, A)) : a("", !0),
-			l.bordered ? (p(), o("div", N)) : a("", !0)
-		], 38));
+			})])) : (h(), s("span", F, [...n[2] ||= [c("i", { class: "m-layout-sider__bar-top" }, null, -1), c("i", { class: "m-layout-sider__bar-bottom" }, null, -1)]]))], 14, N)) : o("", !0),
+			u.bordered ? (h(), s("div", I)) : o("", !0)
+		], 16));
 	}
 });
 //#endregion
-export { S as MLayout, T as MLayoutContent, E as MLayoutFooter, D as MLayoutHeader, P as MLayoutSider, x as M_LAYOUT_KEY };
+export { T as MLayout, O as MLayoutContent, k as MLayoutFooter, A as MLayoutHeader, L as MLayoutSider, w as M_LAYOUT_KEY };