vccs 0.2.0 → 0.4.0

package/dist/es/chart/Treemap.mjs

@@ -0,0 +1,379 @@
+import { addTooltipEntrySettings, mouseLeaveItem, removeTooltipEntrySettings, setActiveClickItemIndex, setActiveMouseOverItemIndex } from "../state/tooltipSlice.mjs";
+import { useAppDispatch } from "../state/hooks.mjs";
+import { Layer } from "../container/Layer.mjs";
+import { getStringSize } from "../utils/attrs.mjs";
+import { Animate } from "../animation/Animate.mjs";
+import { createRechartsStore } from "../state/store.mjs";
+import { RechartsWrapper } from "./RechartsWrapper.mjs";
+import Surface from "../container/Surface.mjs";
+import { computeTreemapLayout } from "./treemapUtils.mjs";
+import { Fragment, computed, createTextVNode, createVNode, defineComponent, ref, watchEffect } from "vue";
+import { provideStore } from "@reduxjs/vue-redux";
+import { get } from "lodash-es";
+//#region src/chart/Treemap.tsx
+var DEFAULT_COLORS = [
+	"#8889DD",
+	"#9597E4",
+	"#8DC77B",
+	"#A5D297",
+	"#E2CF45",
+	"#F8C12D",
+	"#F89C24",
+	"#F56E1A"
+];
+/**
+* Recursively sum all descendant values for a given dataKey.
+*/
+function sumValues(item, dataKey) {
+	if (item.children && item.children.length > 0) return item.children.reduce((sum, child) => sum + sumValues(child, dataKey), 0);
+	const val = item[dataKey];
+	return typeof val === "number" && val > 0 ? val : 0;
+}
+/**
+* Tooltip payload searcher for Treemap — navigates nested node structure
+* using a path string like 'children[0].children[1]'.
+*/
+var treemapPayloadSearcher = (data, activeIndex) => {
+	if (!data || !activeIndex) return void 0;
+	return get(data, activeIndex);
+};
+var treemapOptions = {
+	chartName: "Treemap",
+	defaultTooltipEventType: "item",
+	validateTooltipEventTypes: ["item"],
+	tooltipPayloadSearcher: treemapPayloadSearcher,
+	eventEmitter: void 0
+};
+/**
+* Build a hierarchical node structure with tooltipIndex paths for tooltip lookup.
+*/
+function buildNodeTree(data, dataKey, nameKey, parentIndex = "") {
+	return {
+		children: data.map((item, i) => {
+			const tooltipIndex = `${parentIndex}children[${i}]`;
+			if (item.children && item.children.length > 0) {
+				const childTree = buildNodeTree(item.children, dataKey, nameKey, `${tooltipIndex}.`);
+				return {
+					...item,
+					tooltipIndex,
+					...childTree
+				};
+			}
+			return {
+				...item,
+				tooltipIndex,
+				value: sumValues(item, dataKey)
+			};
+		}),
+		name: "root",
+		tooltipIndex: parentIndex
+	};
+}
+var TreemapVueProps = {
+	data: {
+		type: Array,
+		required: true
+	},
+	dataKey: {
+		type: String,
+		default: "value"
+	},
+	nameKey: {
+		type: String,
+		default: "name"
+	},
+	width: {
+		type: Number,
+		required: true
+	},
+	height: {
+		type: Number,
+		required: true
+	},
+	aspectRatio: {
+		type: Number,
+		default: 4 / 3
+	},
+	fill: {
+		type: String,
+		default: "#808080"
+	},
+	stroke: {
+		type: String,
+		default: "#fff"
+	},
+	type: {
+		type: String,
+		default: "flat"
+	},
+	colorPanel: {
+		type: Array,
+		default: void 0
+	},
+	isAnimationActive: {
+		type: Boolean,
+		default: true
+	},
+	transition: {
+		type: Object,
+		default: () => ({
+			duration: .8,
+			ease: "easeOut"
+		})
+	},
+	onClick: {
+		type: Function,
+		default: void 0
+	},
+	onMouseEnter: {
+		type: Function,
+		default: void 0
+	},
+	onMouseLeave: {
+		type: Function,
+		default: void 0
+	}
+};
+/**
+* Inner component that has access to the Redux store (provided by Treemap wrapper).
+*/
+var TreemapInner = /* @__PURE__ */ defineComponent({
+	name: "TreemapInner",
+	props: TreemapVueProps,
+	slots: Object,
+	setup(props, { slots }) {
+		const dispatch = useAppDispatch();
+		const colors = computed(() => props.colorPanel ?? DEFAULT_COLORS);
+		const breadcrumbTrail = ref([]);
+		const currentData = ref(null);
+		const animationKey = ref(0);
+		const isNestMode = computed(() => props.type === "nest");
+		const nestCurrentData = computed(() => {
+			if (!isNestMode.value) return null;
+			return currentData.value ?? props.data;
+		});
+		function computeNestLevelData(data) {
+			return data.map((item) => {
+				const aggregatedValue = sumValues(item, props.dataKey);
+				const { children: _, ...rest } = item;
+				return {
+					...rest,
+					[props.dataKey]: aggregatedValue
+				};
+			});
+		}
+		const nodes = computed(() => {
+			return computeTreemapLayout({
+				data: isNestMode.value ? computeNestLevelData(nestCurrentData.value ?? props.data) : props.data,
+				width: props.width,
+				height: props.height,
+				dataKey: props.dataKey,
+				nameKey: props.nameKey,
+				aspectRatio: props.aspectRatio,
+				colorPanel: colors.value
+			});
+		});
+		const nodeTree = computed(() => {
+			return buildNodeTree(isNestMode.value ? nestCurrentData.value ?? props.data : props.data, props.dataKey, props.nameKey);
+		});
+		watchEffect((onCleanup) => {
+			const tooltipEntrySettings = {
+				dataDefinedOnItem: nodeTree.value,
+				positions: void 0,
+				settings: {
+					stroke: props.stroke,
+					strokeWidth: void 0,
+					fill: props.fill,
+					dataKey: props.dataKey,
+					nameKey: props.nameKey,
+					name: void 0,
+					hide: false,
+					type: void 0,
+					color: props.fill,
+					unit: ""
+				}
+			};
+			dispatch(addTooltipEntrySettings(tooltipEntrySettings));
+			onCleanup(() => {
+				dispatch(removeTooltipEntrySettings(tooltipEntrySettings));
+			});
+		});
+		function getTooltipIndex(node) {
+			const data = isNestMode.value ? nestCurrentData.value ?? props.data : props.data;
+			const idx = data.findIndex((item) => item[props.nameKey] === node.name);
+			if (idx >= 0) return `children[${idx}]`;
+			for (let i = 0; i < data.length; i++) if (data[i].children) {
+				const childIdx = data[i].children.findIndex((c) => c[props.nameKey] === node.name);
+				if (childIdx >= 0) return `children[${i}].children[${childIdx}]`;
+			}
+			return `children[0]`;
+		}
+		function handleNestClick(node, e) {
+			const sourceData = nestCurrentData.value ?? props.data;
+			const clickedItem = sourceData.find((item) => item[props.nameKey] === node.name);
+			if (clickedItem?.children && clickedItem.children.length > 0) {
+				breadcrumbTrail.value = [...breadcrumbTrail.value, {
+					name: clickedItem[props.nameKey] ?? clickedItem.name,
+					data: sourceData
+				}];
+				currentData.value = clickedItem.children;
+				animationKey.value++;
+			}
+			props.onClick?.(node, e);
+		}
+		function navigateToBreadcrumb(index) {
+			if (index < 0) {
+				currentData.value = null;
+				breadcrumbTrail.value = [];
+			} else {
+				currentData.value = breadcrumbTrail.value[index].data;
+				breadcrumbTrail.value = breadcrumbTrail.value.slice(0, index);
+			}
+			animationKey.value++;
+		}
+		function getNodeFill(node) {
+			return node.color ?? props.fill;
+		}
+		function handleNodeMouseEnter(node, e) {
+			const tooltipIndex = getTooltipIndex(node);
+			const activeCoordinate = {
+				x: node.x + node.width / 2,
+				y: node.y + node.height / 2
+			};
+			dispatch(setActiveMouseOverItemIndex({
+				activeIndex: tooltipIndex,
+				activeDataKey: props.dataKey,
+				activeCoordinate
+			}));
+			props.onMouseEnter?.(node, e);
+		}
+		function handleNodeMouseLeave(node, e) {
+			dispatch(mouseLeaveItem());
+			props.onMouseLeave?.(node, e);
+		}
+		function handleNodeClick(node, e) {
+			if (isNestMode.value) handleNestClick(node, e);
+			else {
+				const tooltipIndex = getTooltipIndex(node);
+				const activeCoordinate = {
+					x: node.x + node.width / 2,
+					y: node.y + node.height / 2
+				};
+				dispatch(setActiveClickItemIndex({
+					activeIndex: tooltipIndex,
+					activeDataKey: props.dataKey,
+					activeCoordinate
+				}));
+				props.onClick?.(node, e);
+			}
+		}
+		function renderNodeAtProgress(node, index, progress) {
+			const nodeFill = getNodeFill(node);
+			const translateX = (-node.x - node.width) * (1 - progress);
+			const transform = progress < 1 ? `translate(${translateX}, 0)` : void 0;
+			const nodeProps = {
+				...node,
+				index,
+				fill: nodeFill,
+				stroke: props.stroke
+			};
+			if (slots.content) return createVNode("g", {
+				"key": `node-${index}`,
+				"class": "v-charts-treemap-node",
+				"style": { transformOrigin: `${node.x}px ${node.y}px` },
+				"transform": transform,
+				"onClick": (e) => handleNodeClick(node, e),
+				"onMouseenter": (e) => handleNodeMouseEnter(node, e),
+				"onMouseleave": (e) => handleNodeMouseLeave(node, e)
+			}, [slots.content(nodeProps)]);
+			const arrow = isNestMode.value && (() => {
+				const item = (nestCurrentData.value ?? props.data).find((d) => d[props.nameKey] === node.name);
+				return item?.children && item.children.length > 0;
+			})() && node.width > 10 && node.height > 10 ? createVNode("polygon", {
+				"points": `${node.x + 2},${node.y + node.height / 2} ${node.x + 6},${node.y + node.height / 2 + 3} ${node.x + 2},${node.y + node.height / 2 + 6}`,
+				"fill": "#fff"
+			}, null) : null;
+			const nameSize = node.width > 20 && node.height > 20 ? getStringSize(node.name, { fontSize: "14px" }) : {
+				width: Infinity,
+				height: Infinity
+			};
+			const text = node.width > 20 && node.height > 20 && nameSize.width < node.width && nameSize.height < node.height ? createVNode("text", {
+				"x": node.x + 8,
+				"y": node.y + node.height / 2 + 7,
+				"fill": "#fff",
+				"font-size": 14
+			}, [node.name]) : null;
+			return createVNode("g", {
+				"key": `node-${index}`,
+				"class": "v-charts-treemap-node",
+				"style": { transformOrigin: `${node.x}px ${node.y}px` },
+				"transform": transform,
+				"onClick": (e) => handleNodeClick(node, e),
+				"onMouseenter": (e) => handleNodeMouseEnter(node, e),
+				"onMouseleave": (e) => handleNodeMouseLeave(node, e)
+			}, [
+				createVNode("rect", {
+					"x": node.x,
+					"y": node.y,
+					"width": node.width,
+					"height": node.height,
+					"fill": nodeFill,
+					"stroke": props.stroke
+				}, null),
+				arrow,
+				text
+			]);
+		}
+		function renderBreadcrumb() {
+			if (!isNestMode.value || breadcrumbTrail.value.length === 0) return null;
+			return createVNode("div", { "class": "v-charts-treemap-breadcrumb" }, [createVNode("span", {
+				"class": "v-charts-treemap-breadcrumb-item",
+				"style": { cursor: "pointer" },
+				"onClick": () => navigateToBreadcrumb(-1)
+			}, [createTextVNode("Root")]), breadcrumbTrail.value.map((entry, i) => createVNode("span", { "key": i }, [createVNode("span", { "style": { margin: "0 4px" } }, [createTextVNode("/")]), createVNode("span", {
+				"class": "v-charts-treemap-breadcrumb-item",
+				"style": { cursor: "pointer" },
+				"onClick": () => navigateToBreadcrumb(i)
+			}, [entry.name])]))]);
+		}
+		return () => createVNode(Fragment, null, [renderBreadcrumb(), createVNode(Surface, {
+			"width": props.width,
+			"height": props.height
+		}, { default: () => [createVNode(Layer, { "class": "v-charts-treemap" }, { default: () => [createVNode(Animate, {
+			"key": animationKey.value,
+			"isActive": props.isAnimationActive,
+			"from": 0,
+			"to": 1,
+			"transition": props.transition
+		}, { default: (progress) => nodes.value.map((node, index) => renderNodeAtProgress(node, index, progress)) })] })] })]);
+	}
+});
+/**
+* Treemap chart — hierarchical data visualization using nested rectangles.
+*
+* Supports `<Tooltip>` as a child component (same pattern as BarChart, LineChart, etc.).
+*
+* Usage:
+* ```vue
+* <Treemap :data="data" data-key="value" :width="600" :height="400">
+*   <Tooltip />
+* </Treemap>
+* ```
+*/
+var Treemap = /* @__PURE__ */ defineComponent({
+	name: "Treemap",
+	props: TreemapVueProps,
+	slots: Object,
+	setup(props, { slots }) {
+		provideStore({ store: createRechartsStore({ options: treemapOptions }, "Treemap") });
+		return () => {
+			if (!props.data || props.data.length === 0) return null;
+			return createVNode(RechartsWrapper, {
+				"width": props.width,
+				"height": props.height
+			}, { default: () => [createVNode(TreemapInner, props, { content: slots.content }), slots.default?.()] });
+		};
+	}
+});
+//#endregion
+export { Treemap, TreemapVueProps, treemapPayloadSearcher };

package/dist/es/chart/generateCategoricalChart.mjs

@@ -1,3 +1,4 @@
+import { classProp } from "../types/common.mjs";
 import { validateWidthHeight } from "../utils/validate.mjs";
 import { provideClipPathId } from "./provideClipPathId.mjs";
 import { createRechartsStore } from "../state/store.mjs";
@@ -34,7 +35,7 @@ var CategoricalProps = {
 		default: 4
 	},
 	barSize: { type: [Number, String] },
-	class: { type: String },
+	class: classProp,
 	compact: { type: Boolean },
 	cx: { type: [Number, String] },
 	cy: { type: [Number, String] },
@@ -130,7 +131,7 @@ function generateCategoricalChart({ chartName, defaultProps = {}, defaultTooltip
 					}), { default: () => [createVNode(ClipPath_default, { "clipPathId": clipPathId }, null), slots.default?.()] })
 				]);
 				if (props.accessibilityLayer) {
-					attributes.tabIndex = props.tabIndex ?? 0;
+					attributes.tabindex = props.tabIndex ?? 0;
 					attributes.role = props.role ?? "application";
 				}
 				const eventHandlerAttrs = {};

package/dist/es/chart/treemapUtils.mjs

@@ -0,0 +1,32 @@
+import { hierarchy, treemap, treemapSquarify } from "d3-hierarchy";
+//#region src/chart/treemapUtils.ts
+function computeTreemapLayout(options) {
+	const { data, width, height, dataKey, aspectRatio = 4 / 3, nameKey = "name", colorPanel } = options;
+	if (!data || data.length === 0 || width <= 0 || height <= 0) return [];
+	const root = hierarchy({ children: data }).sum((d) => {
+		if (d.children && d.children.length > 0) return 0;
+		const val = d[dataKey];
+		return typeof val === "number" && val > 0 ? val : 0;
+	}).sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
+	treemap().size([width, height]).tile(treemapSquarify.ratio(aspectRatio)).round(true)(root);
+	return root.leaves().map((leaf) => {
+		const d = leaf.data;
+		let ancestor = leaf;
+		while (ancestor.depth > 1 && ancestor.parent) ancestor = ancestor.parent;
+		const rootIndex = ancestor.parent ? ancestor.parent.children.indexOf(ancestor) : 0;
+		return {
+			x: leaf.x0,
+			y: leaf.y0,
+			width: leaf.x1 - leaf.x0,
+			height: leaf.y1 - leaf.y0,
+			depth: leaf.depth,
+			name: d[nameKey] ?? "",
+			value: leaf.value ?? 0,
+			payload: d,
+			root: rootIndex,
+			color: colorPanel ? colorPanel[rootIndex % colorPanel.length] : void 0
+		};
+	});
+}
+//#endregion
+export { computeTreemapLayout };

package/dist/es/components/Customized.mjs

@@ -0,0 +1,43 @@
+import { selectChartOffset } from "../state/selectors/selectChartOffset.mjs";
+import { selectUnfilteredCartesianItems } from "../state/selectors/axisSelectors.mjs";
+import { useAppSelector } from "../state/hooks.mjs";
+import { useChartHeight, useChartWidth } from "../context/chartLayoutContext.mjs";
+import { computed, defineComponent } from "vue";
+//#region src/components/Customized.tsx
+var Customized = /* @__PURE__ */ defineComponent({
+	name: "Customized",
+	inheritAttrs: false,
+	slots: Object,
+	setup(_props, { slots }) {
+		const chartWidth = useChartWidth();
+		const chartHeight = useChartHeight();
+		const offset = useAppSelector(selectChartOffset);
+		const cartesianItems = useAppSelector(selectUnfilteredCartesianItems);
+		const polarItems = useAppSelector((state) => state.graphicalItems.polarItems);
+		const formattedGraphicalItems = computed(() => {
+			const items = [];
+			for (const item of cartesianItems.value) items.push({
+				type: item.type,
+				dataKey: item.dataKey,
+				props: item
+			});
+			for (const item of polarItems.value) items.push({
+				type: item.type,
+				dataKey: item.dataKey,
+				props: item
+			});
+			return items;
+		});
+		return () => {
+			if (!slots.default) return null;
+			return slots.default({
+				formattedGraphicalItems: formattedGraphicalItems.value,
+				chartWidth: chartWidth.value,
+				chartHeight: chartHeight.value,
+				offset: offset.value
+			});
+		};
+	}
+});
+//#endregion
+export { Customized };

package/dist/es/components/Text.vue_vue_type_script_setup_true_lang.mjs

@@ -1,6 +1,6 @@
 import { getStringSize } from "../utils/attrs.mjs";
 import { reduceCSSCalc } from "../utils/ReduceCSSCalc.mjs";
-import { Fragment, computed, createElementBlock, defineComponent, normalizeStyle, openBlock, renderList, toDisplayString } from "vue";
+import { Fragment, computed, createElementBlock, defineComponent, normalizeStyle, openBlock, renderList, renderSlot, toDisplayString } from "vue";
 //#region src/components/Text.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"x",
@@ -177,13 +177,13 @@ var Text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 				fill: props.fill && props.fill.includes("url") ? "#808080" : props.fill,
 				class: "v-charts-text",
 				style: normalizeStyle(props.style)
-			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(wordsByLines.value, (line, index) => {
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(wordsByLines.value, (line, index) => {
 				return openBlock(), createElementBlock("tspan", {
 					key: index,
 					x: x.value,
 					dy: index === 0 ? startDy.value : props.lineHeight
 				}, toDisplayString(line.words.join(props.breakAll ? "" : " ")), 9, _hoisted_2);
-			}), 128))], 12, _hoisted_1);
+			}), 128))])], 12, _hoisted_1);
 		};
 	}
 });

package/dist/es/components/Tooltip.mjs

@@ -235,17 +235,15 @@ var Cursor = /* @__PURE__ */ defineComponent({
 			let cursorElement;
 			if (isScatterChart) {
 				const { offset: _offset, ...coord } = props.coordinate;
-				const { top, left, width, height } = offset.value;
 				const crossProps = {
 					stroke: "#ccc",
 					fill: "none",
+					...offset.value,
 					...coord,
-					top,
-					left,
-					width,
-					height,
 					class: "v-charts-tooltip-cursor",
 					style: { pointerEvents: "none" },
+					payload: props.payload ?? [],
+					payloadIndex: props.index,
 					...cursorSvgProps
 				};
 				cursorElement = props.cursorSlot ? props.cursorSlot(crossProps) : createVNode(Cross, crossProps, null);
@@ -255,6 +253,7 @@ var Cursor = /* @__PURE__ */ defineComponent({
 				const coord = props.coordinate;
 				const off = offset.value;
 				const rectProps = {
+					...off,
 					stroke: "none",
 					fill: "#ccc",
 					x: layout.value === "horizontal" ? coord.x - halfSize : off.left + .5,
@@ -263,32 +262,40 @@ var Cursor = /* @__PURE__ */ defineComponent({
 					height: layout.value === "horizontal" ? off.height - 1 : bandSize,
 					class: "v-charts-tooltip-cursor",
 					style: { pointerEvents: "none" },
+					payload: props.payload ?? [],
+					payloadIndex: props.index,
 					...cursorSvgProps
 				};
 				cursorElement = props.cursorSlot ? props.cursorSlot(rectProps) : createVNode(Rectangle, rectProps, null);
 			} else if (layout.value === "radial" && props.coordinate?.cx != null) {
 				const radialPoints = points.value;
 				const sectorProps = {
+					stroke: "#ccc",
+					...offset.value,
 					cx: radialPoints.cx,
 					cy: radialPoints.cy,
 					startAngle: radialPoints.startAngle,
 					endAngle: radialPoints.endAngle,
 					innerRadius: radialPoints.radius,
 					outerRadius: radialPoints.radius,
-					stroke: "#ccc",
 					fill: "none",
 					class: "v-charts-tooltip-cursor",
 					style: { pointerEvents: "none" },
+					payload: props.payload ?? [],
+					payloadIndex: props.index,
 					...cursorSvgProps
 				};
 				cursorElement = props.cursorSlot ? props.cursorSlot(sectorProps) : createVNode(Sector, sectorProps, null);
 			} else {
 				const cursorProps = {
 					stroke: "#ccc",
-					class: ["v-charts-tooltip-cursor"],
+					...offset.value,
 					layout: layout.value,
 					points: points.value,
+					class: ["v-charts-tooltip-cursor"],
 					style: { pointerEvents: "none" },
+					payload: props.payload ?? [],
+					payloadIndex: props.index,
 					...cursorSvgProps
 				};
 				cursorElement = props.cursorSlot ? props.cursorSlot(cursorProps) : createVNode(Curve, cursorProps, null);

package/dist/es/components/label/types.mjs

@@ -1,3 +1,4 @@
+import { classProp } from "../../types/common.mjs";
 import { last } from "es-toolkit/compat";
 //#region src/components/label/types.ts
 var defaultAccessor = (entry) => Array.isArray(entry.value) ? last(entry.value) : entry.value;
@@ -18,7 +19,7 @@ var LabelListVueProps = {
 var LabelVueProps = {
 	id: { type: String },
 	class: {
-		type: String,
+		...classProp,
 		default: ""
 	},
 	viewBox: { type: Object },

package/dist/es/components/legend/Legend.mjs

@@ -1,7 +1,7 @@
+import Surface from "../../container/Surface.mjs";
 import { LegendVueProps } from "./type.mjs";
 import { useLegend } from "./hooks/useLegend.mjs";
 import { useLegendContent } from "./hooks/useLegendContent.mjs";
-import Surface from "../../container/Surface.mjs";
 import { LegendSymbol } from "./LegendSymbol.mjs";
 import { Teleport, createVNode, defineComponent, isVNode, watchEffect } from "vue";
 //#region src/components/legend/Legend.tsx

package/dist/es/components/legend/hooks/useLegend.mjs

@@ -34,14 +34,19 @@ function useLegend(props) {
 		return Array.from(finalPayload);
 	});
 	const outerStyle = computed(() => {
-		if (props.portal) return props.wrapperStyle || {};
+		const userStyle = props.wrapperStyle ? { ...props.wrapperStyle } : {};
+		if (props.portal) return userStyle;
 		const baseStyle = {
 			position: "absolute",
 			width: widthOrHeight.value?.width ? `${widthOrHeight.value.width}px` : props.width ? `${props.width}px` : "auto",
 			height: widthOrHeight.value?.height ? `${widthOrHeight.value.height}px` : props.height ? `${props.height}px` : "auto"
 		};
-		const positionStyle = getDefaultPosition(props.wrapperStyle, props, margin.value, chartWidth.value, chartHeight.value, boundingBox.value);
-		return Object.assign({}, baseStyle, positionStyle, props.wrapperStyle || {});
+		const positionStyle = getDefaultPosition(userStyle, props, margin.value, chartWidth.value, chartHeight.value, boundingBox.value);
+		return {
+			...baseStyle,
+			...positionStyle,
+			...userStyle
+		};
 	});
 	const legendPortal = computed(() => props.portal ?? legendPortalFromContext?.value);
 	const syncSettings = () => {

package/dist/es/container/Surface.mjs

@@ -1,3 +1,4 @@
+import { classProp } from "../types/common.mjs";
 import { createVNode, defineComponent, mergeProps } from "vue";
 //#region src/container/Surface.tsx
 /**
@@ -18,10 +19,7 @@ var Surface = /* @__PURE__ */ defineComponent({
 			type: Object,
 			default: void 0
 		},
-		class: {
-			type: String,
-			default: void 0
-		},
+		class: classProp,
 		style: {
 			type: Object,
 			default: void 0