morya-ui 0.2.2 → 0.2.4

package/dist/layout/index.js

@@ -1,13 +1,37 @@
 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 { t as n } from "../Scrollbar-DoNZvgX2.js";
+import { r, t as i } from "../responsive-DA5bxylA.js";
+import { n as a } from "../locale-DYGhxekd.js";
 import "./style.js";
-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";
+import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, inject as p, mergeProps as m, normalizeClass as h, normalizeStyle as g, openBlock as _, provide as v, ref as y, renderSlot as b, toValue as x, unref as S, useAttrs as C, watch as w, withCtx as T } from "vue";
+//#region src/components/Layout/context.ts
+var E = Symbol("muLayout"), D = /* @__PURE__ */ f({
+	__name: "LayoutScrollContext",
+	props: {
+		hasSider: { type: Boolean },
+		siderPlacement: {}
+	},
+	setup(e) {
+		let t = e;
+		return v(E, {
+			get hasSider() {
+				return t.hasSider;
+			},
+			get siderPlacement() {
+				return t.siderPlacement;
+			}
+		}), (e, t) => b(e.$slots, "default");
+	}
+});
+//#endregion
 //#region src/components/Layout/composables/useLayoutScroll.ts
-function C(e, t) {
+function O(e) {
+	if (e) return "wrapRef" in e ? e.wrapRef : e;
+}
+function k(e, t) {
 	function n(t, n) {
-		let r = e.value;
+		let r = O(e.value);
 		r && (typeof t == "number" ? r.scrollTo(t, n ?? 0) : r.scrollTo(t));
 	}
 	function r(e) {
@@ -19,8 +43,59 @@ function C(e, t) {
 	};
 }
 //#endregion
-//#region src/components/Layout/context.ts
-var w = Symbol("muLayout"), T = /* @__PURE__ */ u({
+//#region src/components/Layout/LayoutScrollRegion.vue
+var A = /* @__PURE__ */ f({
+	name: "MLayoutScrollRegion",
+	inheritAttrs: !1,
+	__name: "LayoutScrollRegion",
+	props: {
+		scrollbarRootClass: { default: "m-layout__scrollbar" },
+		scrollClass: {},
+		scrollStyle: {},
+		viewClass: {},
+		viewStyle: {},
+		hasSider: {
+			type: Boolean,
+			default: !1
+		},
+		siderPlacement: { default: "left" }
+	},
+	emits: ["scroll"],
+	setup(e, { expose: t, emit: r }) {
+		let i = e, a = r, c = p(E, null), l = o(() => i.hasSider || (c?.hasSider ?? !1)), u = o(() => i.siderPlacement ?? c?.siderPlacement ?? "left"), f = y(), { scrollTo: m, onScroll: g } = k(o(() => f.value), a), v = o(() => C(i.scrollClass)), x = o(() => C(["m-layout__scroll-view", i.viewClass]));
+		function S() {
+			g(new Event("scroll"));
+		}
+		function C(e) {
+			return e == null ? [] : typeof e == "string" ? e.split(/\s+/).filter(Boolean) : Array.isArray(e) ? e.flatMap((e) => typeof e == "string" ? e.split(/\s+/).filter(Boolean) : e && typeof e == "object" ? Object.entries(e).filter(([, e]) => e).map(([e]) => e) : []) : Object.entries(e).filter(([, e]) => e).map(([e]) => e);
+		}
+		return t({ scrollTo: m }), (t, r) => (_(), s(n, {
+			ref_key: "scrollbarRef",
+			ref: f,
+			class: h([e.scrollbarRootClass, "m-scrollbar--fill"]),
+			"wrap-class": v.value,
+			"wrap-style": e.scrollStyle,
+			"view-class": x.value,
+			"view-style": e.viewStyle,
+			onScroll: S
+		}, {
+			default: T(() => [d(D, {
+				"has-sider": l.value,
+				"sider-placement": u.value
+			}, {
+				default: T(() => [b(t.$slots, "default")]),
+				_: 3
+			}, 8, ["has-sider", "sider-placement"])]),
+			_: 3
+		}, 8, [
+			"class",
+			"wrap-class",
+			"wrap-style",
+			"view-class",
+			"view-style"
+		]));
+	}
+}), j = /* @__PURE__ */ f({
 	name: "MLayout",
 	inheritAttrs: !1,
 	__name: "Layout",
@@ -39,78 +114,94 @@ var w = Symbol("muLayout"), T = /* @__PURE__ */ u({
 		},
 		siderPlacement: { default: "left" },
 		contentClass: {},
-		contentStyle: {}
+		contentStyle: {},
+		fillViewport: {
+			type: Boolean,
+			default: !1
+		}
 	},
 	emits: ["scroll"],
-	setup(t, { expose: r, emit: i }) {
-		let o = t, l = x(), { rootAttrs: u } = e(l, () => o.pt), d = i;
-		g(w, {
+	setup(t, { expose: n, emit: i }) {
+		let a = t, s = C(), { rootAttrs: c } = e(s, () => a.pt), u = i;
+		v(E, {
 			get hasSider() {
-				return o.hasSider;
+				return a.hasSider;
 			},
 			get siderPlacement() {
-				return o.siderPlacement;
+				return a.siderPlacement;
 			}
 		});
-		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(() => [
+		let f = y(), p = o(() => ({
+			...a.height == null ? {} : { height: r(a.height) },
+			width: a.width == null ? "100%" : r(a.width)
+		})), h = o(() => [
 			"m-layout",
-			`m-layout--${o.position}-positioned`,
+			`m-layout--${a.position}-positioned`,
 			{
-				"m-layout--embedded": o.embedded,
-				"m-layout--has-sider": o.hasSider,
-				"m-layout--sider-right": o.hasSider && o.siderPlacement === "right"
+				"m-layout--embedded": a.embedded,
+				"m-layout--fill-viewport": a.fillViewport,
+				"m-layout--has-sider": a.hasSider,
+				"m-layout--sider-right": a.hasSider && a.siderPlacement === "right"
 			}
-		]), O = a(() => {
-			if (!o.hasSider) return o.contentStyle;
-			let e = {
-				display: "flex",
-				flexWrap: "nowrap",
-				width: "100%",
-				flexDirection: o.siderPlacement === "right" ? "row-reverse" : "row"
-			};
-			return [o.contentStyle, e];
-		}), k = a(() => [
+		]), g = o(() => ({
+			display: "flex",
+			flexWrap: "nowrap",
+			width: "100%",
+			flexDirection: a.siderPlacement === "right" ? "row-reverse" : "row"
+		})), x = o(() => a.contentStyle), w = o(() => a.hasSider ? g.value : void 0), D = o(() => [
 			"m-layout__scroll",
-			o.contentClass,
-			{ "m-layout__scroll--has-sider": o.hasSider }
-		]);
-		return r({ scrollTo: S }), (e, t) => (h(), s("div", f(b(u), {
-			class: D.value,
-			style: E.value
-		}), [c("div", {
-			ref_key: "scrollEl",
-			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));
+			a.contentClass,
+			{ "m-layout__scroll--has-sider": a.hasSider }
+		]), O = o(() => ({ "m-layout__scroll-view--has-sider": a.hasSider }));
+		return n({ scrollTo: ((...e) => f.value?.scrollTo(...e)) }), (e, n) => (_(), l("div", m(S(c), {
+			class: h.value,
+			style: p.value
+		}), [d(A, {
+			ref_key: "scrollRegionRef",
+			ref: f,
+			"has-sider": t.hasSider,
+			"sider-placement": t.siderPlacement,
+			"scrollbar-root-class": "m-layout__scrollbar",
+			"scroll-class": D.value,
+			"scroll-style": x.value,
+			"view-class": O.value,
+			"view-style": w.value,
+			onScroll: n[0] ||= (e) => u("scroll", e)
+		}, {
+			default: T(() => [b(e.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"has-sider",
+			"sider-placement",
+			"scroll-class",
+			"scroll-style",
+			"view-class",
+			"view-style"
+		])], 16));
 	}
 });
 //#endregion
 //#region src/components/Layout/composables/useLayoutRegionStyle.ts
-function E(e, t) {
-	return e == null ? t : n(e) ?? t;
+function M(e, t) {
+	return e == null ? t : r(e) ?? t;
 }
-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)")
+function N(e) {
+	return o(() => {
+		let t = x(e), n = {
+			padding: M(t.padding, "var(--m-layout-padding, var(--m-space-4))"),
+			borderRadius: M(t.radius, "var(--m-layout-radius, 0)")
 		};
-		if (t.heightFallback != null) r.height = E(t.height, t.heightFallback);
+		if (t.heightFallback != null) n.height = M(t.height, t.heightFallback);
 		else if (t.height != null) {
-			let e = n(t.height);
-			e && (r.height = e);
+			let e = r(t.height);
+			e && (n.height = e);
 		}
-		return r;
+		return n;
 	});
 }
 //#endregion
 //#region src/components/Layout/LayoutContent.vue
-var O = /* @__PURE__ */ u({
+var P = /* @__PURE__ */ f({
 	name: "MLayoutContent",
 	inheritAttrs: !1,
 	__name: "LayoutContent",
@@ -129,28 +220,32 @@ var O = /* @__PURE__ */ u({
 	},
 	emits: ["scroll"],
 	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(() => ({
+		let i = t, a = C(), { rootAttrs: s } = e(a, () => i.pt), c = r, u = y(), f = N(() => ({
 			height: i.height,
 			padding: i.padding,
 			radius: i.radius
-		})), w = a(() => [
+		})), p = o(() => [
 			"m-layout",
 			"m-layout-content",
 			`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: d,
-			class: p(T.value),
-			style: m(E.value),
-			onScroll: t[0] ||= (...e) => b(y) && b(y)(...e)
-		}, [v(e.$slots, "default")], 38)], 16));
+		]), h = o(() => ["m-layout__scroll", i.contentClass]), g = o(() => i.contentStyle);
+		return n({ scrollTo: ((...e) => u.value?.scrollTo(...e)) }), (e, t) => (_(), l("main", m(S(s), {
+			class: p.value,
+			style: S(f)
+		}), [d(A, {
+			ref_key: "scrollRegionRef",
+			ref: u,
+			"scrollbar-root-class": "m-layout__scrollbar",
+			"scroll-class": h.value,
+			"scroll-style": g.value,
+			onScroll: t[0] ||= (e) => c("scroll", e)
+		}, {
+			default: T(() => [b(e.$slots, "default")]),
+			_: 3
+		}, 8, ["scroll-class", "scroll-style"])], 16));
 	}
-}), k = /* @__PURE__ */ u({
+}), F = /* @__PURE__ */ f({
 	name: "MLayoutFooter",
 	inheritAttrs: !1,
 	__name: "LayoutFooter",
@@ -170,12 +265,12 @@ var O = /* @__PURE__ */ u({
 		position: { default: "static" }
 	},
 	setup(t) {
-		let n = t, r = x(), { rootAttrs: i } = e(r, () => n.pt), o = D(() => ({
+		let n = t, r = C(), { rootAttrs: i } = e(r, () => n.pt), a = N(() => ({
 			height: n.height,
 			heightFallback: "var(--m-layout-footer-height, 48px)",
 			padding: n.padding,
 			radius: n.radius
-		})), c = a(() => [
+		})), s = o(() => [
 			"m-layout-footer",
 			`m-layout-footer--${n.position}-positioned`,
 			{
@@ -183,12 +278,12 @@ var O = /* @__PURE__ */ u({
 				"m-layout-footer--inverted": n.inverted
 			}
 		]);
-		return (e, t) => (h(), s("footer", f(b(i), {
-			class: c.value,
-			style: b(o)
-		}), [v(e.$slots, "default")], 16));
+		return (e, t) => (_(), l("footer", m(S(i), {
+			class: s.value,
+			style: S(a)
+		}), [b(e.$slots, "default")], 16));
 	}
-}), A = /* @__PURE__ */ u({
+}), I = /* @__PURE__ */ f({
 	name: "MLayoutHeader",
 	inheritAttrs: !1,
 	__name: "LayoutHeader",
@@ -208,12 +303,12 @@ var O = /* @__PURE__ */ u({
 		position: { default: "static" }
 	},
 	setup(t) {
-		let n = t, r = x(), { rootAttrs: i } = e(r, () => n.pt), o = D(() => ({
+		let n = t, r = C(), { rootAttrs: i } = e(r, () => n.pt), a = N(() => ({
 			height: n.height,
 			heightFallback: "var(--m-layout-header-height, 56px)",
 			padding: n.padding,
 			radius: n.radius
-		})), c = a(() => [
+		})), s = o(() => [
 			"m-layout-header",
 			`m-layout-header--${n.position}-positioned`,
 			{
@@ -221,20 +316,20 @@ var O = /* @__PURE__ */ u({
 				"m-layout-header--inverted": n.inverted
 			}
 		]);
-		return (e, t) => (h(), s("header", f(b(i), {
-			class: c.value,
-			style: b(o)
-		}), [v(e.$slots, "default")], 16));
+		return (e, t) => (_(), l("header", m(S(i), {
+			class: s.value,
+			style: S(a)
+		}), [b(e.$slots, "default")], 16));
 	}
 });
 //#endregion
 //#region src/components/Layout/composables/useLayoutSiderCollapse.ts
-function j(e, t) {
-	let n = _(e.defaultCollapsed);
-	S(() => e.collapsed, (e) => {
+function L(e, t) {
+	let n = y(e.defaultCollapsed);
+	w(() => e.collapsed, (e) => {
 		e !== void 0 && (n.value = e);
 	});
-	let r = a(() => e.collapsed === void 0 ? n.value : !!e.collapsed);
+	let r = o(() => 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");
@@ -247,24 +342,24 @@ function j(e, t) {
 }
 //#endregion
 //#region src/components/Layout/utils.ts
-function M(e) {
+function R(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 N = ["aria-expanded", "aria-label"], P = {
+var z = ["aria-expanded", "aria-label"], B = {
 	key: 0,
 	class: "m-layout-sider__arrow",
 	"aria-hidden": "true"
-}, F = {
+}, V = {
 	key: 1,
 	class: "m-layout-sider__bar",
 	"aria-hidden": "true"
-}, I = {
+}, H = {
 	key: 1,
 	class: "m-layout-sider__border",
 	"aria-hidden": "true"
-}, L = /* @__PURE__ */ u({
+}, U = /* @__PURE__ */ f({
 	name: "MLayoutSider",
 	inheritAttrs: !1,
 	__name: "LayoutSider",
@@ -312,63 +407,67 @@ var N = ["aria-expanded", "aria-label"], P = {
 		"after-leave",
 		"scroll"
 	],
-	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(() => [
+	setup(n, { expose: s, emit: f }) {
+		let v = n, x = C(), { rootAttrs: w } = e(x, () => v.pt), D = f, O = a(), k = p(E, null), j = y(), { mergedCollapsed: M, toggle: N } = L(v, D), P = o(() => k?.siderPlacement ?? "left"), F = o(() => r(v.width)), I = o(() => r(v.collapsedWidth)), U = o(() => F.value ?? "var(--m-layout-sider-width)"), W = o(() => I.value ?? "var(--m-layout-sider-collapsed-width)"), G = o(() => M.value ? W.value : U.value), K = o(() => R(v.showTrigger)), q = o(() => !M.value || v.showCollapsedContent), J = o(() => [
 			"m-layout-sider",
-			`m-layout-sider--${S.position}-positioned`,
-			`m-layout-sider--${V.value}-placement`,
-			`m-layout-sider--collapse-${S.collapseMode}`,
+			`m-layout-sider--${v.position}-positioned`,
+			`m-layout-sider--${P.value}-placement`,
+			`m-layout-sider--collapse-${v.collapseMode}`,
 			{
-				"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
+				"m-layout-sider--bordered": v.bordered,
+				"m-layout-sider--inverted": v.inverted,
+				"m-layout-sider--collapsed": M.value,
+				"m-layout-sider--show-content": q.value
 			}
-		]), X = a(() => {
-			let e = S.collapseMode === "width", t = {
+		]), Y = o(() => {
+			let e = v.collapseMode === "width", t = {
 				minWidth: "0",
-				borderRadius: S.radius == null ? "var(--m-layout-radius, 0)" : n(S.radius),
-				width: e ? K.value : W.value,
-				maxWidth: K.value
+				borderRadius: v.radius == null ? "var(--m-layout-radius, 0)" : r(v.radius),
+				width: e ? G.value : U.value,
+				maxWidth: G.value
 			};
-			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 F.value && !i(F.value, "--m-layout-sider-width") && (t["--m-layout-sider-width"] = F.value), I.value && !i(I.value, "--m-layout-sider-collapsed-width") && (t["--m-layout-sider-collapsed-width"] = I.value), t;
+		}), X = o(() => v.padding == null ? "var(--m-layout-padding, var(--m-space-4))" : r(v.padding)), Z = o(() => {
+			let e = { padding: X.value };
+			return v.contentStyle == null ? e : [e, v.contentStyle];
+		}), Q = o(() => ["m-layout-sider__scroll", v.contentClass]), $ = o(() => M.value ? v.collapsedTriggerClass : v.triggerClass), ee = o(() => M.value ? v.collapsedTriggerStyle : v.triggerStyle);
+		function te(e) {
+			e.propertyName === "max-width" && (M.value ? D("after-leave") : D("after-enter"));
 		}
-		return g({ scrollTo: L }), (e, n) => (h(), s("aside", f(b(E), {
-			class: Y.value,
-			style: X.value,
-			onTransitionend: ne
+		return s({ scrollTo: ((...e) => j.value?.scrollTo(...e)) }), (e, r) => (_(), l("aside", m(S(w), {
+			class: J.value,
+			style: Y.value,
+			onTransitionend: te
 		}), [
-			c("div", {
-				ref_key: "scrollEl",
-				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", {
+			d(A, {
+				ref_key: "scrollRegionRef",
+				ref: j,
+				"scrollbar-root-class": "m-layout-sider__scrollbar",
+				"scroll-class": Q.value,
+				"scroll-style": Z.value,
+				onScroll: r[0] ||= (e) => D("scroll", e)
+			}, {
+				default: T(() => [b(e.$slots, "default")]),
+				_: 3
+			}, 8, ["scroll-class", "scroll-style"]),
+			K.value ? (_(), l("button", {
 				key: 0,
 				type: "button",
-				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"
+				class: h(["m-layout-sider__trigger", [$.value, {
+					"m-layout-sider__trigger--bar": K.value === "bar",
+					"m-layout-sider__trigger--arrow-circle": K.value === "arrow-circle"
 				}]]),
-				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, {
+				style: g(ee.value),
+				"aria-expanded": !S(M),
+				"aria-label": S(M) ? S(O).expand : S(O).collapse,
+				onClick: r[1] ||= (...e) => S(N) && S(N)(...e)
+			}, [K.value === "arrow-circle" ? (_(), l("span", B, [d(t, {
 				name: "chevron-right",
 				size: "sm"
-			})])) : (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)
+			})])) : (_(), l("span", V, [...r[2] ||= [u("i", { class: "m-layout-sider__bar-top" }, null, -1), u("i", { class: "m-layout-sider__bar-bottom" }, null, -1)]]))], 14, z)) : c("", !0),
+			n.bordered ? (_(), l("div", H)) : c("", !0)
 		], 16));
 	}
 });
 //#endregion
-export { T as MLayout, O as MLayoutContent, k as MLayoutFooter, A as MLayoutHeader, L as MLayoutSider, w as M_LAYOUT_KEY };
+export { j as MLayout, P as MLayoutContent, F as MLayoutFooter, I as MLayoutHeader, U as MLayoutSider, E as M_LAYOUT_KEY };