@well-insight/ui 0.1.9 → 0.1.11

package/dist/layout/index.js

@@ -1,13 +1,30 @@
-import { n as e } from "../responsive-BLgfEhDG.js";
-import { t } from "../Scrollbar-D-bR2noX.js";
-import { n } from "../locale-CYkJyRd1.js";
+import { t as e } from "../Icon-DHGs8l-M.js";
+import { n as t } from "../responsive-BLgfEhDG.js";
+import { n } from "../locale-DxAvgqgB.js";
 import "./style.js";
-import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, inject as l, mergeProps as u, normalizeClass as d, normalizeStyle as f, openBlock as p, provide as m, ref as h, renderSlot as g, unref as _, useTemplateRef as v, watch as y, withCtx as b } from "vue";
+import { computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, inject as l, normalizeClass as u, normalizeStyle as d, openBlock as f, provide as p, ref as m, renderSlot as h, toValue as g, unref as _, useTemplateRef as v, watch as y } from "vue";
+//#region src/components/Layout/composables/useLayoutScroll.ts
+function b(e, t) {
+	function n(t, n) {
+		let r = e.value;
+		r && (typeof t == "number" ? r.scrollTo(t, n ?? 0) : r.scrollTo(t));
+	}
+	function r(e) {
+		t("scroll", e);
+	}
+	return {
+		scrollTo: n,
+		onScroll: r
+	};
+}
+//#endregion
 //#region src/components/Layout/context.ts
 var x = Symbol("wiLayout"), S = /* @__PURE__ */ c({
 	name: "WiLayout",
 	__name: "Layout",
 	props: {
+		height: {},
+		width: {},
 		embedded: {
 			type: Boolean,
 			default: !1
@@ -18,18 +35,13 @@ var x = Symbol("wiLayout"), S = /* @__PURE__ */ c({
 			default: !1
 		},
 		siderPlacement: { default: "left" },
-		nativeScrollbar: {
-			type: Boolean,
-			default: !0
-		},
-		scrollbarProps: {},
 		contentClass: {},
 		contentStyle: {}
 	},
 	emits: ["scroll"],
-	setup(e, { expose: n, emit: a }) {
-		let s = e, c = a;
-		m(x, {
+	setup(e, { expose: n, emit: i }) {
+		let s = e, c = i;
+		p(x, {
 			get hasSider() {
 				return s.hasSider;
 			},
@@ -37,16 +49,18 @@ var x = Symbol("wiLayout"), S = /* @__PURE__ */ c({
 				return s.siderPlacement;
 			}
 		});
-		let l = v("scrollEl"), h = v("scrollbarRef"), _ = r(() => [
+		let l = v("scrollEl"), { scrollTo: m, onScroll: g } = b(l, c), y = r(() => ({
+			height: s.height == null ? "var(--wi-layout-height, 100%)" : t(s.height),
+			width: s.width == null ? "100%" : t(s.width)
+		})), S = r(() => [
 			"wi-layout",
 			`wi-layout--${s.position}-positioned`,
 			{
 				"wi-layout--embedded": s.embedded,
 				"wi-layout--has-sider": s.hasSider,
-				"wi-layout--sider-right": s.hasSider && s.siderPlacement === "right",
-				"wi-layout--custom-scrollbar": !s.nativeScrollbar
+				"wi-layout--sider-right": s.hasSider && s.siderPlacement === "right"
 			}
-		]), y = r(() => {
+		]), C = r(() => {
 			if (!s.hasSider) return s.contentStyle;
 			let e = {
 				display: "flex",
@@ -55,137 +69,89 @@ var x = Symbol("wiLayout"), S = /* @__PURE__ */ c({
 				flexDirection: s.siderPlacement === "right" ? "row-reverse" : "row"
 			};
 			return [s.contentStyle, e];
-		}), S = r(() => [
+		}), w = r(() => [
 			"wi-layout__scroll",
 			s.contentClass,
 			{ "wi-layout__scroll--has-sider": s.hasSider }
-		]), C = r(() => {
-			let e = s.scrollbarProps?.viewClass, t = S.value.filter(Boolean);
-			return e == null || e === "" ? t : Array.isArray(e) ? [...t, ...e] : [...t, e];
-		}), w = r(() => {
-			let e = s.scrollbarProps?.viewStyle;
-			return e == null || e === "" ? y.value : [y.value, e];
-		});
-		function T(e, t) {
-			if (s.nativeScrollbar) {
-				let n = l.value;
-				if (!n) return;
-				typeof e == "number" ? n.scrollTo(e, t ?? 0) : n.scrollTo(e);
-				return;
-			}
-			let n = h.value;
-			n && (typeof e == "number" ? n.scrollTo(e, t ?? 0) : n.scrollTo(e));
-		}
-		function E(e) {
-			c("scroll", e);
-		}
-		function D() {
-			let e = h.value?.wrapRef;
-			if (!e) return;
-			let t = new Event("scroll");
-			Object.defineProperty(t, "target", { value: e }), Object.defineProperty(t, "currentTarget", { value: e }), c("scroll", t);
-		}
-		return n({ scrollTo: T }), (n, r) => (p(), o("div", { class: d(_.value) }, [e.nativeScrollbar ? (p(), o("div", {
-			key: 0,
+		]);
+		return n({ scrollTo: m }), (e, t) => (f(), a("div", {
+			class: u(S.value),
+			style: d(y.value)
+		}, [o("div", {
 			ref_key: "scrollEl",
 			ref: l,
-			class: d(S.value),
-			style: f(y.value),
-			onScroll: E
-		}, [g(n.$slots, "default")], 38)) : (p(), i(t, u({
-			key: 1,
-			ref_key: "scrollbarRef",
-			ref: h,
-			class: "wi-layout__scrollbar",
-			height: "100%"
-		}, e.scrollbarProps, {
-			"view-class": C.value,
-			"view-style": w.value,
-			onScroll: D
-		}), {
-			default: b(() => [g(n.$slots, "default")]),
-			_: 3
-		}, 16, ["view-class", "view-style"]))], 2));
+			class: u(w.value),
+			style: d(C.value),
+			onScroll: t[0] ||= (...e) => _(g) && _(g)(...e)
+		}, [h(e.$slots, "default")], 38)], 6));
 	}
-}), C = /* @__PURE__ */ c({
+});
+//#endregion
+//#region src/components/Layout/composables/useLayoutRegionStyle.ts
+function C(e, n) {
+	return e == null ? n : t(e) ?? n;
+}
+function w(e) {
+	return r(() => {
+		let n = g(e), r = {
+			padding: C(n.padding, "var(--wi-layout-padding, var(--wi-space-4))"),
+			borderRadius: C(n.radius, "var(--wi-layout-radius, 0)")
+		};
+		if (n.heightFallback != null) r.height = C(n.height, n.heightFallback);
+		else if (n.height != null) {
+			let e = t(n.height);
+			e && (r.height = e);
+		}
+		return r;
+	});
+}
+//#endregion
+//#region src/components/Layout/LayoutContent.vue
+var T = /* @__PURE__ */ c({
 	name: "WiLayoutContent",
 	__name: "LayoutContent",
 	props: {
+		height: {},
+		padding: {},
+		radius: {},
 		embedded: {
 			type: Boolean,
 			default: !1
 		},
 		position: { default: "static" },
-		nativeScrollbar: {
-			type: Boolean,
-			default: !0
-		},
-		scrollbarProps: {},
 		contentClass: {},
 		contentStyle: {}
 	},
 	emits: ["scroll"],
-	setup(e, { expose: n, emit: a }) {
-		let s = e, c = a, l = v("scrollEl"), m = v("scrollbarRef"), h = r(() => [
+	setup(e, { expose: t, emit: n }) {
+		let i = e, s = n, c = v("scrollEl"), { scrollTo: l, onScroll: p } = b(c, s), m = w(() => ({
+			height: i.height,
+			padding: i.padding,
+			radius: i.radius
+		})), g = r(() => [
 			"wi-layout",
 			"wi-layout-content",
-			`wi-layout--${s.position}-positioned`,
-			{
-				"wi-layout--embedded": s.embedded,
-				"wi-layout--custom-scrollbar": !s.nativeScrollbar
-			}
-		]), _ = r(() => ["wi-layout__scroll", s.contentClass]), y = r(() => s.contentStyle), x = r(() => {
-			let e = s.scrollbarProps?.viewClass, t = _.value.filter(Boolean);
-			return e == null || e === "" ? t : Array.isArray(e) ? [...t, ...e] : [...t, e];
-		}), S = r(() => {
-			let e = s.scrollbarProps?.viewStyle;
-			return e == null || e === "" ? y.value : [y.value, e];
-		});
-		function C(e, t) {
-			if (s.nativeScrollbar) {
-				let n = l.value;
-				if (!n) return;
-				typeof e == "number" ? n.scrollTo(e, t ?? 0) : n.scrollTo(e);
-				return;
-			}
-			let n = m.value;
-			n && (typeof e == "number" ? n.scrollTo(e, t ?? 0) : n.scrollTo(e));
-		}
-		function w(e) {
-			c("scroll", e);
-		}
-		function T() {
-			let e = m.value?.wrapRef;
-			if (!e) return;
-			let t = new Event("scroll");
-			Object.defineProperty(t, "target", { value: e }), Object.defineProperty(t, "currentTarget", { value: e }), c("scroll", t);
-		}
-		return n({ scrollTo: C }), (n, r) => (p(), o("main", { class: d(h.value) }, [e.nativeScrollbar ? (p(), o("div", {
-			key: 0,
+			`wi-layout--${i.position}-positioned`,
+			{ "wi-layout--embedded": i.embedded }
+		]), y = r(() => ["wi-layout__scroll", i.contentClass]), x = r(() => i.contentStyle);
+		return t({ scrollTo: l }), (e, t) => (f(), a("main", {
+			class: u(g.value),
+			style: d(_(m))
+		}, [o("div", {
 			ref_key: "scrollEl",
-			ref: l,
-			class: d(_.value),
-			style: f(y.value),
-			onScroll: w
-		}, [g(n.$slots, "default")], 38)) : (p(), i(t, u({
-			key: 1,
-			ref_key: "scrollbarRef",
-			ref: m,
-			class: "wi-layout__scrollbar",
-			height: "100%"
-		}, e.scrollbarProps, {
-			"view-class": x.value,
-			"view-style": S.value,
-			onScroll: T
-		}), {
-			default: b(() => [g(n.$slots, "default")]),
-			_: 3
-		}, 16, ["view-class", "view-style"]))], 2));
+			ref: c,
+			class: u(y.value),
+			style: d(x.value),
+			onScroll: t[0] ||= (...e) => _(p) && _(p)(...e)
+		}, [h(e.$slots, "default")], 38)], 6));
 	}
-}), w = /* @__PURE__ */ c({
+}), E = /* @__PURE__ */ c({
 	name: "WiLayoutFooter",
 	__name: "LayoutFooter",
 	props: {
+		height: {},
+		padding: {},
+		radius: {},
 		bordered: {
 			type: Boolean,
 			default: !1
@@ -197,7 +163,12 @@ var x = Symbol("wiLayout"), S = /* @__PURE__ */ c({
 		position: { default: "static" }
 	},
 	setup(e) {
-		let t = e, n = r(() => [
+		let t = e, n = w(() => ({
+			height: t.height,
+			heightFallback: "var(--wi-layout-footer-height, 48px)",
+			padding: t.padding,
+			radius: t.radius
+		})), i = r(() => [
 			"wi-layout-footer",
 			`wi-layout-footer--${t.position}-positioned`,
 			{
@@ -205,15 +176,21 @@ var x = Symbol("wiLayout"), S = /* @__PURE__ */ c({
 				"wi-layout-footer--inverted": t.inverted
 			}
 		]);
-		return (e, t) => (p(), o("footer", { class: d(n.value) }, [g(e.$slots, "default")], 2));
+		return (e, t) => (f(), a("footer", {
+			class: u(i.value),
+			style: d(_(n))
+		}, [h(e.$slots, "default")], 6));
 	}
-}), T = /* @__PURE__ */ c({
+}), D = /* @__PURE__ */ c({
 	name: "WiLayoutHeader",
 	__name: "LayoutHeader",
 	props: {
+		height: {},
+		padding: {},
+		radius: {},
 		bordered: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
 		inverted: {
 			type: Boolean,
@@ -222,7 +199,12 @@ var x = Symbol("wiLayout"), S = /* @__PURE__ */ c({
 		position: { default: "static" }
 	},
 	setup(e) {
-		let t = e, n = r(() => [
+		let t = e, n = w(() => ({
+			height: t.height,
+			heightFallback: "var(--wi-layout-header-height, 56px)",
+			padding: t.padding,
+			radius: t.radius
+		})), i = r(() => [
 			"wi-layout-header",
 			`wi-layout-header--${t.position}-positioned`,
 			{
@@ -230,21 +212,50 @@ var x = Symbol("wiLayout"), S = /* @__PURE__ */ c({
 				"wi-layout-header--inverted": t.inverted
 			}
 		]);
-		return (e, t) => (p(), o("header", { class: d(n.value) }, [g(e.$slots, "default")], 2));
+		return (e, t) => (f(), a("header", {
+			class: u(i.value),
+			style: d(_(n))
+		}, [h(e.$slots, "default")], 6));
 	}
-}), E = ["aria-expanded", "aria-label"], D = {
+});
+//#endregion
+//#region src/components/Layout/composables/useLayoutSiderCollapse.ts
+function O(e, t) {
+	let n = m(e.defaultCollapsed);
+	y(() => e.collapsed, (e) => {
+		e !== void 0 && (n.value = e);
+	});
+	let i = r(() => e.collapsed === void 0 ? n.value : !!e.collapsed);
+	function a() {
+		let e = !i.value;
+		n.value = e, t("update:collapsed", e), t(e ? "collapse" : "expand");
+	}
+	return {
+		mergedCollapsed: i,
+		toggle: a,
+		uncontrolled: n
+	};
+}
+//#endregion
+//#region src/components/Layout/utils.ts
+function k(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 = {
 	key: 0,
 	class: "wi-layout-sider__arrow",
 	"aria-hidden": "true"
-}, O = {
+}, M = {
 	key: 1,
 	class: "wi-layout-sider__bar",
 	"aria-hidden": "true"
-}, k = {
-	key: 3,
+}, N = {
+	key: 1,
 	class: "wi-layout-sider__border",
 	"aria-hidden": "true"
-}, A = /* @__PURE__ */ c({
+}, P = /* @__PURE__ */ c({
 	name: "WiLayoutSider",
 	__name: "LayoutSider",
 	props: {
@@ -257,8 +268,10 @@ var x = Symbol("wiLayout"), S = /* @__PURE__ */ c({
 			default: !1
 		},
 		position: { default: "static" },
-		width: { default: 272 },
-		collapsedWidth: { default: 48 },
+		width: { default: "var(--wi-layout-sider-width)" },
+		collapsedWidth: { default: "var(--wi-layout-sider-collapsed-width)" },
+		padding: {},
+		radius: {},
 		collapsed: { type: Boolean },
 		defaultCollapsed: {
 			type: Boolean,
@@ -277,11 +290,6 @@ var x = Symbol("wiLayout"), S = /* @__PURE__ */ c({
 		triggerStyle: {},
 		collapsedTriggerClass: {},
 		collapsedTriggerStyle: {},
-		nativeScrollbar: {
-			type: Boolean,
-			default: !0
-		},
-		scrollbarProps: {},
 		contentClass: {},
 		contentStyle: {}
 	},
@@ -293,106 +301,65 @@ var x = Symbol("wiLayout"), S = /* @__PURE__ */ c({
 		"after-leave",
 		"scroll"
 	],
-	setup(c, { expose: m, emit: S }) {
-		let C = c, w = S, T = n(), A = l(x, null), j = h(C.defaultCollapsed), M = v("scrollEl"), N = v("scrollbarRef"), P = r(() => C.collapsed !== void 0), F = r(() => P.value ? !!C.collapsed : j.value);
-		y(() => C.collapsed, (e) => {
-			e !== void 0 && (j.value = e);
-		});
-		let I = r(() => A?.siderPlacement ?? "left"), L = r(() => e(C.width) ?? "272px"), R = r(() => e(F.value ? C.collapsedWidth : C.width)), z = r(() => {
-			let e = C.showTrigger;
-			return e ? e === "bar" || e === !0 ? "bar" : "arrow-circle" : null;
-		}), B = r(() => !F.value || C.showCollapsedContent), V = r(() => [
+	setup(c, { expose: p, emit: m }) {
+		let g = c, y = m, S = n(), C = l(x, null), w = v("scrollEl"), { scrollTo: T, onScroll: E } = b(w, y), { mergedCollapsed: D, toggle: P } = O(g, y), F = r(() => C?.siderPlacement ?? "left"), I = r(() => t(g.width) ?? "var(--wi-layout-sider-width)"), L = r(() => t(g.collapsedWidth) ?? "var(--wi-layout-sider-collapsed-width)"), R = r(() => D.value ? L.value : I.value), z = r(() => k(g.showTrigger)), B = r(() => !D.value || g.showCollapsedContent), V = r(() => [
 			"wi-layout-sider",
-			`wi-layout-sider--${C.position}-positioned`,
-			`wi-layout-sider--${I.value}-placement`,
-			`wi-layout-sider--collapse-${C.collapseMode}`,
+			`wi-layout-sider--${g.position}-positioned`,
+			`wi-layout-sider--${F.value}-placement`,
+			`wi-layout-sider--collapse-${g.collapseMode}`,
 			{
-				"wi-layout-sider--bordered": C.bordered,
-				"wi-layout-sider--inverted": C.inverted,
-				"wi-layout-sider--collapsed": F.value,
-				"wi-layout-sider--show-content": B.value,
-				"wi-layout-sider--custom-scrollbar": !C.nativeScrollbar
-			}
-		]), H = r(() => ({
-			width: L.value,
-			maxWidth: R.value
-		})), U = r(() => {
-			let e = C.contentStyle;
-			return C.collapseMode === "transform" ? [e, { minWidth: L.value }] : e;
-		}), W = r(() => ["wi-layout-sider__scroll", C.contentClass]), G = r(() => {
-			let e = C.scrollbarProps?.viewClass, t = W.value.filter(Boolean);
-			return e == null || e === "" ? t : Array.isArray(e) ? [...t, ...e] : [...t, e];
-		}), K = r(() => {
-			let e = C.scrollbarProps?.viewStyle;
-			return e == null || e === "" ? U.value : [U.value, e];
-		}), q = r(() => F.value ? C.collapsedTriggerClass : C.triggerClass), J = r(() => F.value ? C.collapsedTriggerStyle : C.triggerStyle);
-		function Y() {
-			let e = !F.value;
-			j.value = e, w("update:collapsed", e), w(e ? "collapse" : "expand");
-		}
-		function X(e) {
-			e.propertyName === "max-width" && (F.value ? w("after-leave") : w("after-enter"));
-		}
-		function Z(e) {
-			w("scroll", e);
-		}
-		function Q() {
-			let e = N.value?.wrapRef;
-			if (!e) return;
-			let t = new Event("scroll");
-			Object.defineProperty(t, "target", { value: e }), Object.defineProperty(t, "currentTarget", { value: e }), w("scroll", t);
-		}
-		function $(e, t) {
-			if (C.nativeScrollbar) {
-				let n = M.value;
-				if (!n) return;
-				typeof e == "number" ? n.scrollTo(e, t ?? 0) : n.scrollTo(e);
-				return;
+				"wi-layout-sider--bordered": g.bordered,
+				"wi-layout-sider--inverted": g.inverted,
+				"wi-layout-sider--collapsed": D.value,
+				"wi-layout-sider--show-content": B.value
 			}
-			let n = N.value;
-			n && (typeof e == "number" ? n.scrollTo(e, t ?? 0) : n.scrollTo(e));
+		]), H = r(() => {
+			let e = g.collapseMode === "width";
+			return {
+				"--wi-layout-sider-width": I.value,
+				"--wi-layout-sider-collapsed-width": L.value,
+				width: e ? R.value : I.value,
+				maxWidth: R.value,
+				minWidth: "0",
+				borderRadius: g.radius == null ? "var(--wi-layout-radius, 0)" : t(g.radius)
+			};
+		}), U = r(() => g.padding == null ? "var(--wi-layout-padding, var(--wi-space-4))" : t(g.padding)), W = r(() => {
+			let e = { padding: U.value };
+			return g.contentStyle == null ? e : [e, g.contentStyle];
+		}), G = r(() => ["wi-layout-sider__scroll", g.contentClass]), K = r(() => D.value ? g.collapsedTriggerClass : g.triggerClass), q = r(() => D.value ? g.collapsedTriggerStyle : g.triggerStyle);
+		function J(e) {
+			e.propertyName === "max-width" && (D.value ? y("after-leave") : y("after-enter"));
 		}
-		return m({ scrollTo: $ }), (e, n) => (p(), o("aside", {
-			class: d(V.value),
-			style: f(H.value),
-			onTransitionend: X
+		return p({ scrollTo: T }), (t, n) => (f(), a("aside", {
+			class: u(V.value),
+			style: d(H.value),
+			onTransitionend: J
 		}, [
-			c.nativeScrollbar ? (p(), o("div", {
-				key: 0,
+			o("div", {
 				ref_key: "scrollEl",
-				ref: M,
-				class: d(W.value),
-				style: f(U.value),
-				onScroll: Z
-			}, [g(e.$slots, "default")], 38)) : (p(), i(t, u({
-				key: 1,
-				ref_key: "scrollbarRef",
-				ref: N,
-				class: "wi-layout-sider__scrollbar",
-				height: "100%"
-			}, c.scrollbarProps, {
-				"view-class": G.value,
-				"view-style": K.value,
-				onScroll: Q
-			}), {
-				default: b(() => [g(e.$slots, "default")]),
-				_: 3
-			}, 16, ["view-class", "view-style"])),
-			z.value ? (p(), o("button", {
-				key: 2,
+				ref: w,
+				class: u(G.value),
+				style: d(W.value),
+				onScroll: n[0] ||= (...e) => _(E) && _(E)(...e)
+			}, [h(t.$slots, "default")], 38),
+			z.value ? (f(), a("button", {
+				key: 0,
 				type: "button",
-				class: d(["wi-layout-sider__trigger", [q.value, {
+				class: u(["wi-layout-sider__trigger", [K.value, {
 					"wi-layout-sider__trigger--bar": z.value === "bar",
 					"wi-layout-sider__trigger--arrow-circle": z.value === "arrow-circle"
 				}]]),
-				style: f(J.value),
-				"aria-expanded": !F.value,
-				"aria-label": F.value ? _(T).expand : _(T).collapse,
-				onClick: Y
-			}, [z.value === "arrow-circle" ? (p(), o("span", D, " › ")) : (p(), o("span", O, [...n[0] ||= [s("i", { class: "wi-layout-sider__bar-top" }, null, -1), s("i", { class: "wi-layout-sider__bar-bottom" }, null, -1)]]))], 14, E)) : a("", !0),
-			c.bordered ? (p(), o("div", k)) : a("", !0)
+				style: d(q.value),
+				"aria-expanded": !_(D),
+				"aria-label": _(D) ? _(S).expand : _(S).collapse,
+				onClick: n[1] ||= (...e) => _(P) && _(P)(...e)
+			}, [z.value === "arrow-circle" ? (f(), a("span", j, [s(e, {
+				name: "chevron-right",
+				size: "sm"
+			})])) : (f(), a("span", M, [...n[2] ||= [o("i", { class: "wi-layout-sider__bar-top" }, null, -1), o("i", { class: "wi-layout-sider__bar-bottom" }, null, -1)]]))], 14, A)) : i("", !0),
+			c.bordered ? (f(), a("div", N)) : i("", !0)
 		], 38));
 	}
 });
 //#endregion
-export { x as WI_LAYOUT_KEY, S as WiLayout, C as WiLayoutContent, w as WiLayoutFooter, T as WiLayoutHeader, A as WiLayoutSider };
+export { x as WI_LAYOUT_KEY, S as WiLayout, T as WiLayoutContent, E as WiLayoutFooter, D as WiLayoutHeader, P as WiLayoutSider };