@well-insight/ui 0.1.8 → 0.1.10

package/dist/layout/index.js

@@ -8,6 +8,8 @@ var x = Symbol("wiLayout"), S = /* @__PURE__ */ c({
 	name: "WiLayout",
 	__name: "Layout",
 	props: {
+		height: {},
+		width: {},
 		embedded: {
 			type: Boolean,
 			default: !1
@@ -27,90 +29,99 @@ var x = Symbol("wiLayout"), S = /* @__PURE__ */ c({
 		contentStyle: {}
 	},
 	emits: ["scroll"],
-	setup(e, { expose: n, emit: a }) {
-		let s = e, c = a;
+	setup(n, { expose: a, emit: s }) {
+		let c = n, l = s;
 		m(x, {
 			get hasSider() {
-				return s.hasSider;
+				return c.hasSider;
 			},
 			get siderPlacement() {
-				return s.siderPlacement;
+				return c.siderPlacement;
 			}
 		});
-		let l = v("scrollEl"), h = v("scrollbarRef"), _ = r(() => [
+		let h = v("scrollEl"), _ = v("scrollbarRef"), y = r(() => ({
+			height: c.height == null ? "var(--wi-layout-height, 100%)" : e(c.height),
+			width: c.width == null ? "100%" : e(c.width)
+		})), S = r(() => [
 			"wi-layout",
-			`wi-layout--${s.position}-positioned`,
+			`wi-layout--${c.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--embedded": c.embedded,
+				"wi-layout--has-sider": c.hasSider,
+				"wi-layout--sider-right": c.hasSider && c.siderPlacement === "right",
+				"wi-layout--custom-scrollbar": !c.nativeScrollbar
 			}
-		]), y = r(() => {
-			if (!s.hasSider) return s.contentStyle;
+		]), C = r(() => {
+			if (!c.hasSider) return c.contentStyle;
 			let e = {
 				display: "flex",
 				flexWrap: "nowrap",
 				width: "100%",
-				flexDirection: s.siderPlacement === "right" ? "row-reverse" : "row"
+				flexDirection: c.siderPlacement === "right" ? "row-reverse" : "row"
 			};
-			return [s.contentStyle, e];
-		}), S = r(() => [
+			return [c.contentStyle, e];
+		}), 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);
+			c.contentClass,
+			{ "wi-layout__scroll--has-sider": c.hasSider }
+		]), T = r(() => {
+			let e = c.scrollbarProps?.viewClass, t = w.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];
+		}), E = r(() => {
+			let e = c.scrollbarProps?.viewStyle;
+			return e == null || e === "" ? C.value : [C.value, e];
 		});
-		function T(e, t) {
-			if (s.nativeScrollbar) {
-				let n = l.value;
+		function D(e, t) {
+			if (c.nativeScrollbar) {
+				let n = h.value;
 				if (!n) return;
 				typeof e == "number" ? n.scrollTo(e, t ?? 0) : n.scrollTo(e);
 				return;
 			}
-			let n = h.value;
+			let n = _.value;
 			n && (typeof e == "number" ? n.scrollTo(e, t ?? 0) : n.scrollTo(e));
 		}
-		function E(e) {
-			c("scroll", e);
+		function O(e) {
+			l("scroll", e);
 		}
-		function D() {
-			let e = h.value?.wrapRef;
+		function k() {
+			let e = _.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);
+			Object.defineProperty(t, "target", { value: e }), Object.defineProperty(t, "currentTarget", { value: e }), l("scroll", t);
 		}
-		return n({ scrollTo: T }), (n, r) => (p(), o("div", { class: d(_.value) }, [e.nativeScrollbar ? (p(), o("div", {
+		return a({ scrollTo: D }), (e, r) => (p(), o("div", {
+			class: d(S.value),
+			style: f(y.value)
+		}, [n.nativeScrollbar ? (p(), o("div", {
 			key: 0,
 			ref_key: "scrollEl",
-			ref: l,
-			class: d(S.value),
-			style: f(y.value),
-			onScroll: E
-		}, [g(n.$slots, "default")], 38)) : (p(), i(t, u({
+			ref: h,
+			class: d(w.value),
+			style: f(C.value),
+			onScroll: O
+		}, [g(e.$slots, "default")], 38)) : (p(), i(t, u({
 			key: 1,
 			ref_key: "scrollbarRef",
-			ref: h,
+			ref: _,
 			class: "wi-layout__scrollbar",
 			height: "100%"
-		}, e.scrollbarProps, {
-			"view-class": C.value,
-			"view-style": w.value,
-			onScroll: D
+		}, n.scrollbarProps, {
+			"view-class": T.value,
+			"view-style": E.value,
+			onScroll: k
 		}), {
-			default: b(() => [g(n.$slots, "default")]),
+			default: b(() => [g(e.$slots, "default")]),
 			_: 3
-		}, 16, ["view-class", "view-style"]))], 2));
+		}, 16, ["view-class", "view-style"]))], 6));
 	}
 }), C = /* @__PURE__ */ c({
 	name: "WiLayoutContent",
 	__name: "LayoutContent",
 	props: {
+		height: {},
+		padding: {},
+		radius: {},
 		embedded: {
 			type: Boolean,
 			default: !1
@@ -125,67 +136,77 @@ var x = Symbol("wiLayout"), S = /* @__PURE__ */ c({
 		contentStyle: {}
 	},
 	emits: ["scroll"],
-	setup(e, { expose: n, emit: a }) {
-		let s = e, c = a, l = v("scrollEl"), m = v("scrollbarRef"), h = r(() => [
+	setup(n, { expose: a, emit: s }) {
+		let c = n, l = s, m = v("scrollEl"), h = v("scrollbarRef"), _ = r(() => ({
+			...c.height == null ? {} : { height: e(c.height) },
+			padding: c.padding == null ? "var(--wi-layout-padding, var(--wi-space-4))" : e(c.padding),
+			borderRadius: c.radius == null ? "var(--wi-layout-radius, 0)" : e(c.radius)
+		})), y = r(() => [
 			"wi-layout",
 			"wi-layout-content",
-			`wi-layout--${s.position}-positioned`,
+			`wi-layout--${c.position}-positioned`,
 			{
-				"wi-layout--embedded": s.embedded,
-				"wi-layout--custom-scrollbar": !s.nativeScrollbar
+				"wi-layout--embedded": c.embedded,
+				"wi-layout--custom-scrollbar": !c.nativeScrollbar
 			}
-		]), _ = r(() => ["wi-layout__scroll", s.contentClass]), y = r(() => s.contentStyle), x = r(() => {
-			let e = s.scrollbarProps?.viewClass, t = _.value.filter(Boolean);
+		]), x = r(() => ["wi-layout__scroll", c.contentClass]), S = r(() => c.contentStyle), C = r(() => {
+			let e = c.scrollbarProps?.viewClass, t = x.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];
+		}), w = r(() => {
+			let e = c.scrollbarProps?.viewStyle;
+			return e == null || e === "" ? S.value : [S.value, e];
 		});
-		function C(e, t) {
-			if (s.nativeScrollbar) {
-				let n = l.value;
+		function T(e, t) {
+			if (c.nativeScrollbar) {
+				let n = m.value;
 				if (!n) return;
 				typeof e == "number" ? n.scrollTo(e, t ?? 0) : n.scrollTo(e);
 				return;
 			}
-			let n = m.value;
+			let n = h.value;
 			n && (typeof e == "number" ? n.scrollTo(e, t ?? 0) : n.scrollTo(e));
 		}
-		function w(e) {
-			c("scroll", e);
+		function E(e) {
+			l("scroll", e);
 		}
-		function T() {
-			let e = m.value?.wrapRef;
+		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);
+			Object.defineProperty(t, "target", { value: e }), Object.defineProperty(t, "currentTarget", { value: e }), l("scroll", t);
 		}
-		return n({ scrollTo: C }), (n, r) => (p(), o("main", { class: d(h.value) }, [e.nativeScrollbar ? (p(), o("div", {
+		return a({ scrollTo: T }), (e, r) => (p(), o("main", {
+			class: d(y.value),
+			style: f(_.value)
+		}, [n.nativeScrollbar ? (p(), o("div", {
 			key: 0,
 			ref_key: "scrollEl",
-			ref: l,
-			class: d(_.value),
-			style: f(y.value),
-			onScroll: w
-		}, [g(n.$slots, "default")], 38)) : (p(), i(t, u({
+			ref: m,
+			class: d(x.value),
+			style: f(S.value),
+			onScroll: E
+		}, [g(e.$slots, "default")], 38)) : (p(), i(t, u({
 			key: 1,
 			ref_key: "scrollbarRef",
-			ref: m,
+			ref: h,
 			class: "wi-layout__scrollbar",
 			height: "100%"
-		}, e.scrollbarProps, {
-			"view-class": x.value,
-			"view-style": S.value,
-			onScroll: T
+		}, n.scrollbarProps, {
+			"view-class": C.value,
+			"view-style": w.value,
+			onScroll: D
 		}), {
-			default: b(() => [g(n.$slots, "default")]),
+			default: b(() => [g(e.$slots, "default")]),
 			_: 3
-		}, 16, ["view-class", "view-style"]))], 2));
+		}, 16, ["view-class", "view-style"]))], 6));
 	}
 }), w = /* @__PURE__ */ c({
 	name: "WiLayoutFooter",
 	__name: "LayoutFooter",
 	props: {
+		height: {},
+		padding: {},
+		radius: {},
 		bordered: {
 			type: Boolean,
 			default: !1
@@ -196,24 +217,34 @@ var x = Symbol("wiLayout"), S = /* @__PURE__ */ c({
 		},
 		position: { default: "static" }
 	},
-	setup(e) {
-		let t = e, n = r(() => [
+	setup(t) {
+		let n = t, i = r(() => ({
+			minHeight: n.height == null ? "var(--wi-layout-footer-height, 48px)" : e(n.height),
+			padding: n.padding == null ? "var(--wi-layout-padding, var(--wi-space-4))" : e(n.padding),
+			borderRadius: n.radius == null ? "var(--wi-layout-radius, 0)" : e(n.radius)
+		})), a = r(() => [
 			"wi-layout-footer",
-			`wi-layout-footer--${t.position}-positioned`,
+			`wi-layout-footer--${n.position}-positioned`,
 			{
-				"wi-layout-footer--bordered": t.bordered,
-				"wi-layout-footer--inverted": t.inverted
+				"wi-layout-footer--bordered": n.bordered,
+				"wi-layout-footer--inverted": n.inverted
 			}
 		]);
-		return (e, t) => (p(), o("footer", { class: d(n.value) }, [g(e.$slots, "default")], 2));
+		return (e, t) => (p(), o("footer", {
+			class: d(a.value),
+			style: f(i.value)
+		}, [g(e.$slots, "default")], 6));
 	}
 }), T = /* @__PURE__ */ c({
 	name: "WiLayoutHeader",
 	__name: "LayoutHeader",
 	props: {
+		height: {},
+		padding: {},
+		radius: {},
 		bordered: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
 		inverted: {
 			type: Boolean,
@@ -221,16 +252,23 @@ var x = Symbol("wiLayout"), S = /* @__PURE__ */ c({
 		},
 		position: { default: "static" }
 	},
-	setup(e) {
-		let t = e, n = r(() => [
+	setup(t) {
+		let n = t, i = r(() => ({
+			minHeight: n.height == null ? "var(--wi-layout-header-height, 56px)" : e(n.height),
+			padding: n.padding == null ? "var(--wi-layout-padding, var(--wi-space-4))" : e(n.padding),
+			borderRadius: n.radius == null ? "var(--wi-layout-radius, 0)" : e(n.radius)
+		})), a = r(() => [
 			"wi-layout-header",
-			`wi-layout-header--${t.position}-positioned`,
+			`wi-layout-header--${n.position}-positioned`,
 			{
-				"wi-layout-header--bordered": t.bordered,
-				"wi-layout-header--inverted": t.inverted
+				"wi-layout-header--bordered": n.bordered,
+				"wi-layout-header--inverted": n.inverted
 			}
 		]);
-		return (e, t) => (p(), o("header", { class: d(n.value) }, [g(e.$slots, "default")], 2));
+		return (e, t) => (p(), o("header", {
+			class: d(a.value),
+			style: f(i.value)
+		}, [g(e.$slots, "default")], 6));
 	}
 }), E = ["aria-expanded", "aria-label"], D = {
 	key: 0,
@@ -257,8 +295,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,
@@ -298,7 +338,7 @@ var x = Symbol("wiLayout"), S = /* @__PURE__ */ c({
 		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 I = r(() => A?.siderPlacement ?? "left"), L = r(() => e(C.width) ?? "var(--wi-layout-sider-width)"), 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(() => [
@@ -315,7 +355,9 @@ var x = Symbol("wiLayout"), S = /* @__PURE__ */ c({
 			}
 		]), H = r(() => ({
 			width: L.value,
-			maxWidth: R.value
+			maxWidth: R.value,
+			padding: C.padding == null ? "var(--wi-layout-padding, var(--wi-space-4))" : e(C.padding),
+			borderRadius: C.radius == null ? "var(--wi-layout-radius, 0)" : e(C.radius)
 		})), U = r(() => {
 			let e = C.contentStyle;
 			return C.collapseMode === "transform" ? [e, { minWidth: L.value }] : e;