vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/chart/Treemap.mjs

@@ -1,112 +1,102 @@
-import { addTooltipEntrySettings, mouseLeaveItem, removeTooltipEntrySettings, setActiveClickItemIndex, setActiveMouseOverItemIndex } from "../state/tooltipSlice.mjs";
-import { useAppDispatch } from "../state/hooks.mjs";
+import { toFiniteNumber } from "../utils/validate.mjs";
+import { useTooltipController } from "../model/tooltip.mjs";
+import { useTrackedData } from "../hooks/useTrackedData.mjs";
+import { labelColor } from "../utils/labelColor.mjs";
+import { seriesColor, seriesForeground } from "../utils/theme.mjs";
+import { useCanMeasureText } from "../model/runtime.mjs";
 import { Layer } from "../container/Layer.mjs";
+import { getValueByDataKey } from "../utils/chart.mjs";
+import { useAnimationCallbacks } from "../animation/useAnimationCallbacks.mjs";
+import { cascadeReveal } from "../animation/motion.mjs";
+import { useKeyedTransition } from "../animation/useKeyedTransition.mjs";
+import { labelOpacity } from "../animation/ridingLabels.mjs";
 import { getStringSize } from "../utils/attrs.mjs";
-import { Animate } from "../animation/Animate.mjs";
-import { createRechartsStore } from "../state/store.mjs";
-import { ChartsWrapper } from "./ChartsWrapper.mjs";
-import Surface from "../container/Surface.mjs";
+import { forwardsHtmlAttributes } from "../utils/attributes.mjs";
+import { chartEmits, chartListeners } from "../events/componentEvents.mjs";
+import { chartSizeProps } from "../hooks/useResponsiveSize.mjs";
+import { standaloneChartOptions } from "./shell.mjs";
+import { ChartShell, useChartShell } from "./ChartShell.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";
+import { computed, createTextVNode, createVNode, defineComponent, isVNode, mergeProps, reactive, ref, toRaw, toRefs } from "vue";
 //#region src/chart/Treemap.tsx
-var DEFAULT_COLORS = [
-	"#8889DD",
-	"#9597E4",
-	"#8DC77B",
-	"#A5D297",
-	"#E2CF45",
-	"#F8C12D",
-	"#F89C24",
-	"#F56E1A"
-];
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
 /**
 * 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;
+	const val = toFiniteNumber(getValueByDataKey(item, dataKey));
+	return val != null && 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
+/** One walk over the tree builds the totals and the path lookups for the tooltip. */
+function indexTree(items, dataKey, nameKey) {
+	const index = {
+		totals: {},
+		pathByRow: /* @__PURE__ */ new Map(),
+		pathByName: /* @__PURE__ */ new Map()
 	};
+	let order = 0;
+	const walk = (level, parent) => level.forEach((item, i) => {
+		const path = `${parent}children[${i}]`;
+		const at = {
+			path,
+			order: order++
+		};
+		index.totals[path] = sumValues(item, dataKey);
+		const row = toRaw(item);
+		if (!index.pathByRow.has(row)) index.pathByRow.set(row, at);
+		const name = getValueByDataKey(item, nameKey);
+		if (!index.pathByName.has(name)) index.pathByName.set(name, at);
+		if (item.children?.length) walk(item.children, `${path}.`);
+	});
+	walk(items, "");
+	return index;
 }
 var TreemapVueProps = {
+	title: {
+		type: String,
+		default: "Treemap"
+	},
+	desc: String,
 	data: {
 		type: Array,
 		required: true
 	},
 	dataKey: {
-		type: String,
+		type: [
+			String,
+			Number,
+			Function
+		],
 		default: "value"
 	},
 	nameKey: {
-		type: String,
+		type: [
+			String,
+			Number,
+			Function
+		],
 		default: "name"
 	},
-	width: {
-		type: Number,
-		required: true
-	},
-	height: {
-		type: Number,
-		required: true
-	},
-	aspectRatio: {
+	tileAspectRatio: {
 		type: Number,
 		default: 4 / 3
 	},
 	fill: {
 		type: String,
-		default: "#808080"
+		default: seriesColor(0)
 	},
 	stroke: {
 		type: String,
-		default: "#fff"
+		default: "var(--v-charts-background, #fff)"
 	},
 	type: {
 		type: String,
 		default: "flat"
 	},
-	colorPanel: {
+	colors: {
 		type: Array,
 		default: void 0
 	},
@@ -116,238 +106,282 @@ var TreemapVueProps = {
 	},
 	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;
+var treemapEmits = {
+	"node-click": (_node, _index, _event) => true,
+	"node-mouseenter": (_node, _index, _event) => true,
+	"node-mouseleave": (_node, _index, _event) => true,
+	"animation-start": () => true,
+	"animation-end": () => true
+};
+function useTreemap(props, slots, emit) {
+	const tooltip = useTooltipController();
+	const canMeasureText = useCanMeasureText();
+	const breadcrumbTrail = ref([]);
+	const currentData = ref(null);
+	const trackedData = useTrackedData(() => props.type === "nest" ? currentData.value ?? props.data : props.data);
+	const isNestMode = computed(() => props.type === "nest");
+	const nestCurrentData = computed(() => {
+		if (!isNestMode.value) return null;
+		return trackedData.value ?? [];
+	});
+	function computeNestLevelData(data) {
+		return data.map((item) => {
+			const aggregatedValue = sumValues(item, props.dataKey);
+			const { children: _, ...rest } = item;
+			return {
+				...rest,
+				value: aggregatedValue
+			};
+		});
+	}
+	const nodes = computed(() => {
+		const dataToLayout = isNestMode.value ? computeNestLevelData(nestCurrentData.value ?? []) : trackedData.value ?? [];
+		return computeTreemapLayout({
+			data: dataToLayout,
+			width: props.width,
+			height: props.height,
+			dataKey: isNestMode.value ? "value" : props.dataKey,
+			nameKey: props.nameKey,
+			tileAspectRatio: props.tileAspectRatio,
+			colors: props.colors
 		});
-		function computeNestLevelData(data) {
-			return data.map((item) => {
-				const aggregatedValue = sumValues(item, props.dataKey);
-				const { children: _, ...rest } = item;
-				return {
-					...rest,
-					[props.dataKey]: aggregatedValue
-				};
+	});
+	const nodePaths = computed(() => {
+		const paths = /* @__PURE__ */ new Map();
+		const visit = (data, parent) => {
+			data.forEach((item, index) => {
+				const path = `${parent}/${String(getValueByDataKey(item, props.nameKey) ?? index)}`;
+				paths.set(toRaw(item), path);
+				if (Array.isArray(item.children)) visit(item.children, path);
 			});
-		}
-		const nodes = computed(() => {
-			return computeTreemapLayout({
-				data: isNestMode.value ? computeNestLevelData(nestCurrentData.value ?? props.data) : props.data,
-				width: props.width,
-				height: props.height,
+		};
+		visit(props.data, "root");
+		return paths;
+	});
+	const callbacks = useAnimationCallbacks(() => emit("animation-start"), () => emit("animation-end"));
+	const { items } = useKeyedTransition(() => nodes.value.map((node) => ({
+		...node,
+		path: nodePaths.value.get(toRaw(node.payload)) ?? nodePaths.value.get(toRaw((trackedData.value ?? []).find((item) => getValueByDataKey(item, props.nameKey) === node.name) ?? {})) ?? node.name,
+		opacity: 1
+	})), {
+		key: (node, index) => node.path || index,
+		interpolate: (from, to, t) => ({
+			...to,
+			x: from.x + (to.x - from.x) * t,
+			y: from.y + (to.y - from.y) * t,
+			width: from.width + (to.width - from.width) * t,
+			height: from.height + (to.height - from.height) * t,
+			opacity: Math.min(1, Math.max(0, (from.opacity ?? 1) + ((to.opacity ?? 1) - (from.opacity ?? 1)) * t))
+		}),
+		enterFrom: (to) => ({
+			...to,
+			x: to.x + to.width / 2,
+			y: to.y + to.height / 2,
+			width: 0,
+			height: 0
+		}),
+		exitTo: (from) => ({
+			...from,
+			x: from.x + from.width / 2,
+			y: from.y + from.height / 2,
+			width: 0,
+			height: 0
+		}),
+		reveal: () => cascadeReveal(nodes.value),
+		isActive: () => props.isAnimationActive,
+		transition: () => props.transition,
+		onEnd: callbacks.onEnd,
+		onStart: callbacks.onStart
+	});
+	const tooltipTree = computed(() => {
+		const data = isNestMode.value ? nestCurrentData.value ?? [] : trackedData.value ?? [];
+		return {
+			data: { children: data },
+			...indexTree(data, props.dataKey, props.nameKey)
+		};
+	});
+	function tooltipPathOf(node) {
+		const { pathByRow, pathByName } = tooltipTree.value;
+		const byRow = pathByRow.get(toRaw(node.payload));
+		const byName = isNestMode.value ? pathByName.get(node.name) : void 0;
+		return (byName && (!byRow || byName.order < byRow.order) ? byName : byRow)?.path;
+	}
+	const tooltipConfiguration = computed(() => {
+		return {
+			dataDefinedOnItem: tooltipTree.value.data,
+			values: tooltipTree.value.totals,
+			positions: void 0,
+			keyboardItems: [...nodes.value.entries()].sort(([, a], [, b]) => a.y + a.height / 2 - b.y - b.height / 2 || a.x + a.width / 2 - b.x - b.width / 2).map(([index, node]) => ({
+				identity: node.payload,
+				index,
+				payloadKey: tooltipPathOf(node),
+				coordinate: {
+					x: node.x + node.width / 2,
+					y: node.y + node.height / 2
+				},
+				onClick: (event) => handleNodeClick(node, index, event)
+			})),
+			settings: {
+				stroke: props.stroke,
+				strokeWidth: void 0,
+				fill: props.fill,
 				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);
+				name: void 0,
+				hide: false,
+				type: void 0,
+				color: props.fill,
+				unit: ""
 			}
-			animationKey.value++;
+		};
+	});
+	tooltip.entries.register(tooltipConfiguration);
+	function handleNestClick(node, index, e) {
+		const sourceData = nestCurrentData.value ?? [];
+		const clickedItem = sourceData.find((item) => getValueByDataKey(item, props.nameKey) === node.name);
+		if (clickedItem?.children && clickedItem.children.length > 0) {
+			breadcrumbTrail.value = [...breadcrumbTrail.value, {
+				name: getValueByDataKey(clickedItem, props.nameKey) ?? clickedItem.name,
+				data: sourceData
+			}];
+			currentData.value = clickedItem.children;
 		}
-		function getNodeFill(node) {
-			return node.color ?? props.fill;
+		emit("node-click", node, index, e);
+	}
+	function navigateToBreadcrumb(index) {
+		if (index < 0) {
+			currentData.value = null;
+			breadcrumbTrail.value = [];
+		} else {
+			const entry = breadcrumbTrail.value[index];
+			currentData.value = entry.data;
+			breadcrumbTrail.value = breadcrumbTrail.value.slice(0, index);
 		}
-		function handleNodeMouseEnter(node, e) {
-			const tooltipIndex = getTooltipIndex(node);
-			const activeCoordinate = {
+	}
+	function getNodeFill(node) {
+		return node.color ?? seriesColor(node.entryIndex);
+	}
+	function handleNodeMouseEnter(node, index, e) {
+		const coordinate = {
+			x: node.x + node.width / 2,
+			y: node.y + node.height / 2
+		};
+		tooltip.activate("hover", {
+			type: "item",
+			configuration: tooltipConfiguration.value,
+			index: nodes.value.findIndex((candidate) => toRaw(candidate.payload) === toRaw(node.payload)),
+			coordinate
+		});
+		emit("node-mouseenter", node, index, e);
+	}
+	function handleNodeMouseLeave(node, index, e) {
+		tooltip.clear("hover", "item");
+		emit("node-mouseleave", node, index, e);
+	}
+	function handleNodeClick(node, index, e) {
+		if (isNestMode.value) handleNestClick(node, index, e);
+		else {
+			const coordinate = {
 				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])]))]);
+			tooltip.activate("click", {
+				type: "item",
+				configuration: tooltipConfiguration.value,
+				index: nodes.value.findIndex((candidate) => toRaw(candidate.payload) === toRaw(node.payload)),
+				coordinate
+			});
+			emit("node-click", node, index, e);
 		}
-		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)) })] })] })]);
 	}
-});
+	function renderNode({ opacity, ...node }, index, key, labelFade) {
+		const nodeFill = getNodeFill(node);
+		const labelFill = node.color == null ? seriesForeground(node.entryIndex) : labelColor(nodeFill);
+		const fade = opacity != null && opacity < 1 ? opacity : void 0;
+		const nodeProps = {
+			...node,
+			index,
+			fill: nodeFill,
+			stroke: props.stroke
+		};
+		if (slots.content) return createVNode("g", {
+			"key": key,
+			"class": "v-charts-treemap-node",
+			"style": { transformOrigin: `${node.x}px ${node.y}px` },
+			"opacity": fade,
+			"onClick": (e) => handleNodeClick(node, index, e),
+			"onMouseenter": (e) => handleNodeMouseEnter(node, index, e),
+			"onMouseleave": (e) => handleNodeMouseLeave(node, index, e)
+		}, [slots.content(nodeProps)]);
+		const arrow = isNestMode.value && (() => {
+			const item = (nestCurrentData.value ?? []).find((d) => getValueByDataKey(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": labelFill
+		}, null) : null;
+		const nameSize = node.width > 20 && node.height > 20 ? getStringSize(node.name, { fontSize: "14px" }, canMeasureText.value) : {
+			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": labelFill,
+			"font-size": 14,
+			"opacity": labelFade
+		}, [node.name]) : null;
+		return createVNode("g", {
+			"key": key,
+			"class": "v-charts-treemap-node",
+			"style": { transformOrigin: `${node.x}px ${node.y}px` },
+			"opacity": fade,
+			"onClick": (e) => handleNodeClick(node, index, e),
+			"onMouseenter": (e) => handleNodeMouseEnter(node, index, e),
+			"onMouseleave": (e) => handleNodeMouseLeave(node, index, 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",
+			"style": { color: "var(--v-charts-text, #666)" }
+		}, [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])]))]);
+	}
+	const renderChart = () => {
+		let _slot;
+		return createVNode(Layer, {
+			"data-slot": "series",
+			"class": "v-charts-treemap"
+		}, _isSlot(_slot = items.value.map((item, index) => renderNode(item.value, index, item.key, labelOpacity(item)))) ? _slot : { default: () => [_slot] });
+	};
+	return {
+		renderChart,
+		renderBreadcrumb
+	};
+}
 /**
 * Treemap chart — hierarchical data visualization using nested rectangles.
 *
@@ -360,20 +394,43 @@ var TreemapInner = /* @__PURE__ */ defineComponent({
 * </Treemap>
 * ```
 */
-var Treemap = /* @__PURE__ */ defineComponent({
+var Treemap = /* @__PURE__ */ forwardsHtmlAttributes(/* @__PURE__ */ defineComponent({
 	name: "Treemap",
-	props: TreemapVueProps,
+	props: {
+		...TreemapVueProps,
+		...chartSizeProps
+	},
+	inheritAttrs: false,
+	emits: {
+		...chartEmits,
+		...treemapEmits
+	},
 	slots: Object,
-	setup(props, { slots }) {
-		provideStore({ store: createRechartsStore({ options: treemapOptions }, "Treemap") });
+	setup(props, { slots, emit, attrs }) {
+		const size = useChartShell(props, standaloneChartOptions("Treemap"));
+		function setupContent() {
+			const { renderChart, renderBreadcrumb } = useTreemap(reactive({
+				...toRefs(props),
+				width: size.effectiveWidth,
+				height: size.effectiveHeight
+			}), slots, emit);
+			return {
+				svg: renderChart,
+				before: renderBreadcrumb
+			};
+		}
 		return () => {
 			if (!props.data || props.data.length === 0) return null;
-			return createVNode(ChartsWrapper, {
-				"width": props.width,
-				"height": props.height
-			}, { default: () => [createVNode(TreemapInner, props, { content: slots.content }), slots.default?.()] });
+			return createVNode(ChartShell, mergeProps(attrs, chartListeners(emit), {
+				"size": size,
+				"root": "wrapper",
+				"setupContent": setupContent,
+				"accessibilityLayer": true,
+				"title": props.title,
+				"desc": props.desc
+			}), { default: slots.default });
 		};
 	}
-});
+}));
 //#endregion
-export { Treemap, TreemapVueProps, treemapPayloadSearcher };
+export { Treemap };