vccs 0.1.0 → 0.2.0

package/dist/es/components/Tooltip.mjs

@@ -1,38 +1,40 @@
-import { isNumOrStr as e } from "../utils/validate.mjs";
-import { Curve as t } from "../shape/Curve.mjs";
-import { useTooltipEventType as n } from "../state/selectors/selectTooltipEventType.mjs";
-import { setTooltipSettingsState as r } from "../state/tooltipSlice.mjs";
-import { useAppDispatch as i, useAppSelector as a } from "../state/hooks.mjs";
-import { useChartLayout as o, useOffsetInternal as s, useViewBox as c } from "../context/chartLayoutContext.mjs";
-import { selectActiveCoordinate as l, selectActiveLabel as u, selectIsTooltipActive as d, selectTooltipPayload as f, useChartName as p } from "../state/selectors/selectors.mjs";
-import { Rectangle as m } from "../shape/Rectangle.mjs";
-import { useCursorLayerRef as h } from "../context/cursorLayerContext.mjs";
-import { usePortal as g } from "../chart/TooltipPortalContext.mjs";
-import { useAccessibilityLayer as _ } from "../context/accessibilityContext.mjs";
-import { getTooltipTranslate as v } from "../utils/tooltip/translate.mjs";
-import { Cross as y } from "../shape/Cross.mjs";
-import { Sector as b } from "../shape/Sector.mjs";
-import { getCursorPoints as x } from "./utils.mjs";
-import { useTooltipAxisBandSize as S } from "../context/useTooltipAxis.mjs";
-import { useTooltipChartSynchronisation as C } from "../synchronisation/useChartSynchronisation.mjs";
-import { Fragment as w, Teleport as T, computed as E, createVNode as D, defineComponent as O, isVNode as k, reactive as A, ref as j, watch as M, watchEffect as N, watchPostEffect as P } from "vue";
-import { sortBy as F, uniqBy as I } from "es-toolkit/compat";
-import { animate as L } from "motion-v";
-import { useElementBounding as R, useMagicKeys as z, usePreferredReducedMotion as B } from "@vueuse/core";
+import { isNumOrStr } from "../utils/validate.mjs";
+import { Curve } from "../shape/Curve.mjs";
+import { useTooltipEventType } from "../state/selectors/selectTooltipEventType.mjs";
+import { setTooltipSettingsState } from "../state/tooltipSlice.mjs";
+import { useAppDispatch, useAppSelector } from "../state/hooks.mjs";
+import { useChartLayout, useOffsetInternal, useViewBox } from "../context/chartLayoutContext.mjs";
+import { selectActiveCoordinate, selectActiveLabel, selectIsTooltipActive, selectTooltipPayload, useChartName } from "../state/selectors/selectors.mjs";
+import { Rectangle } from "../shape/Rectangle.mjs";
+import { useCursorLayerRef } from "../context/cursorLayerContext.mjs";
+import { usePortal } from "../chart/TooltipPortalContext.mjs";
+import { useAccessibilityLayer } from "../context/accessibilityContext.mjs";
+import { getTooltipTranslate } from "../utils/tooltip/translate.mjs";
+import { Cross } from "../shape/Cross.mjs";
+import { Sector } from "../shape/Sector.mjs";
+import { getCursorPoints } from "./utils.mjs";
+import { useTooltipAxisBandSize } from "../context/useTooltipAxis.mjs";
+import { useTooltipChartSynchronisation } from "../synchronisation/useChartSynchronisation.mjs";
+import { Fragment, Teleport, computed, createVNode, defineComponent, isVNode, reactive, ref, watch, watchEffect, watchPostEffect } from "vue";
+import { sortBy, uniqBy } from "es-toolkit/compat";
+import { animate } from "motion-v";
+import { useElementBounding, useMagicKeys, usePreferredReducedMotion } from "@vueuse/core";
 //#region src/components/Tooltip.tsx
-function V(e) {
-	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !k(e);
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-function H(e) {
-	return e.dataKey;
+function defaultUniqBy(entry) {
+	return entry.dataKey;
 }
-function U(e, t, n) {
-	return t === !0 ? I(e, n) : typeof t == "function" ? I(e, t) : e;
+function getUniqPayload(payload, option, defaultUniqBy) {
+	if (option === true) return uniqBy(payload, defaultUniqBy);
+	if (typeof option === "function") return uniqBy(payload, option);
+	return payload;
 }
-function W(t) {
-	return Array.isArray(t) && e(t[0]) && e(t[1]) ? t.join(" ~ ") : t;
+function defaultFormatter(value) {
+	return Array.isArray(value) && isNumOrStr(value[0]) && isNumOrStr(value[1]) ? value.join(" ~ ") : value;
 }
-var G = /* @__PURE__ */ O({
+var DefaultTooltipContent = /* @__PURE__ */ defineComponent({
 	name: "DefaultTooltipContent",
 	props: {
 		label: [String, Number],
@@ -48,57 +50,66 @@ var G = /* @__PURE__ */ O({
 		itemSorter: [Function, String],
 		formatter: Function
 	},
-	setup(e) {
+	setup(props) {
 		return () => {
-			if (!e.active || !e.payload?.length) return null;
-			let { contentStyle: t, labelStyle: n, itemStyle: r } = e, i = {
+			if (!props.active || !props.payload?.length) return null;
+			const { contentStyle, labelStyle, itemStyle } = props;
+			const finalStyle = {
 				margin: 0,
 				padding: "10px",
 				backgroundColor: "#fff",
 				border: "1px solid #ccc",
 				whiteSpace: "nowrap",
-				...t
-			}, a = {
+				...contentStyle
+			};
+			const finalLabelStyle = {
 				margin: 0,
-				...n
-			}, { itemSorter: o, payload: s, formatter: c } = e, l = o ? F(s, o) : s;
-			return D("div", {
-				class: "v-charts-tooltip-content",
-				style: i
-			}, [e.label && D("div", {
-				class: "v-charts-tooltip-label",
-				style: a
-			}, [e.label]), D("div", { class: "v-charts-tooltip-list" }, [l.map((t, n) => {
-				let i = {
+				...labelStyle
+			};
+			const { itemSorter, payload, formatter } = props;
+			const sortedPayload = itemSorter ? sortBy(payload, itemSorter) : payload;
+			return createVNode("div", {
+				"class": "v-charts-tooltip-content",
+				"style": finalStyle
+			}, [props.label && createVNode("div", {
+				"class": "v-charts-tooltip-label",
+				"style": finalLabelStyle
+			}, [props.label]), createVNode("div", { "class": "v-charts-tooltip-list" }, [sortedPayload.map((entry, index) => {
+				const finalItemStyle = {
 					display: "block",
 					paddingTop: 4,
 					paddingBottom: 4,
-					color: t.color || "#000",
-					...r
-				}, a = t.formatter || c || W, { value: o, name: l } = t, u = o, d = l;
-				if (a) {
-					let e = a(o, l, t, n, s);
-					if (Array.isArray(e)) [u, d] = e;
-					else if (e != null) u = e;
+					color: entry.color || "#000",
+					...itemStyle
+				};
+				const finalFormatter = entry.formatter || formatter || defaultFormatter;
+				const { value, name } = entry;
+				let finalValue = value;
+				let finalName = name;
+				if (finalFormatter) {
+					const formatted = finalFormatter(value, name, entry, index, payload);
+					if (Array.isArray(formatted)) [finalValue, finalName] = formatted;
+					else if (formatted != null) finalValue = formatted;
 					else return null;
 				}
-				return D("div", {
-					key: n,
-					class: "v-charts-tooltip-item",
-					style: i
+				return createVNode("div", {
+					"key": index,
+					"class": "v-charts-tooltip-item",
+					"style": finalItemStyle
 				}, [
-					D("span", {
-						class: "v-charts-tooltip-item-name",
-						style: { color: t.color }
-					}, [t.name]),
-					D("span", { class: "v-charts-tooltip-separator" }, [e.separator]),
-					D("span", { class: "v-charts-tooltip-item-value" }, [u]),
-					D("span", { class: "v-charts-tooltip-item-unit" }, [t.unit || ""])
+					createVNode("span", {
+						"class": "v-charts-tooltip-item-name",
+						"style": { color: entry.color }
+					}, [entry.name]),
+					createVNode("span", { "class": "v-charts-tooltip-separator" }, [props.separator]),
+					createVNode("span", { "class": "v-charts-tooltip-item-value" }, [finalValue]),
+					createVNode("span", { "class": "v-charts-tooltip-item-unit" }, [entry.unit || ""])
 				]);
 			})])]);
 		};
 	}
-}), K = /* @__PURE__ */ O({
+});
+var TooltipBoundingBox = /* @__PURE__ */ defineComponent({
 	name: "TooltipBoundingBox",
 	props: {
 		allowEscapeViewBox: Object,
@@ -119,64 +130,86 @@ var G = /* @__PURE__ */ O({
 		viewBox: Object,
 		style: Object
 	},
-	setup(e, { slots: t }) {
-		let n = j(!1), r = A({
+	setup(props, { slots }) {
+		const dismissed = ref(false);
+		const dismissedAtCoordinate = reactive({
 			x: 0,
 			y: 0
 		});
-		N(() => {
-			(e.coordinate?.x !== r.x || e.coordinate?.y !== r.y) && (n.value = !1);
+		watchEffect(() => {
+			if (props.coordinate?.x !== dismissedAtCoordinate.x || props.coordinate?.y !== dismissedAtCoordinate.y) dismissed.value = false;
 		}, { flush: "post" });
-		let { escape: i } = z();
-		M(i, (t) => {
-			t && (n.value = !0, r.x = e.coordinate?.x ?? 0, r.y = e.coordinate?.y ?? 0);
+		const { escape } = useMagicKeys();
+		watch(escape, (v) => {
+			if (v) {
+				dismissed.value = true;
+				dismissedAtCoordinate.x = props.coordinate?.x ?? 0;
+				dismissedAtCoordinate.y = props.coordinate?.y ?? 0;
+			}
 		});
-		let a = j(), o = R(a, {}), s, c, l = B(), u = E(() => {
-			let { allowEscapeViewBox: t, coordinate: n, position: r, reverseDirection: i, viewBox: a } = e, { cssClasses: c, cssProperties: l, transform: u } = v({
-				allowEscapeViewBox: t,
-				coordinate: n,
-				offsetTopLeft: e.offset,
-				position: r,
-				reverseDirection: i,
+		const el = ref();
+		const lastBoundingBox = useElementBounding(el, {});
+		let preTransform;
+		let animationControls;
+		const reducedMotion = usePreferredReducedMotion();
+		const currentTransform = computed(() => {
+			const { allowEscapeViewBox, coordinate, position, reverseDirection, viewBox } = props;
+			let { cssClasses, cssProperties, transform } = getTooltipTranslate({
+				allowEscapeViewBox,
+				coordinate,
+				offsetTopLeft: props.offset,
+				position,
+				reverseDirection,
 				tooltipBox: {
-					height: o.height.value,
-					width: o.width.value
+					height: lastBoundingBox.height.value,
+					width: lastBoundingBox.width.value
 				},
-				useTranslate3d: !1,
-				viewBox: a
+				useTranslate3d: false,
+				viewBox
 			});
-			return u = !o.height.value && s ? s : u, s = u || s, {
-				cssClasses: c,
-				cssProperties: l,
-				transform: u
+			transform = !lastBoundingBox.height.value && preTransform ? preTransform : transform;
+			preTransform = transform || preTransform;
+			return {
+				cssClasses,
+				cssProperties,
+				transform
 			};
 		});
-		return P((t) => {
-			let n = a.value, r = u.value.transform;
-			!n || !r?.transform || (e.isAnimationActive && l.value !== "reduce" ? c = L(n, { transform: r.transform }, e.transition) : n.style.transform = r.transform, t(() => {
-				c?.stop(), c = void 0;
-			}));
-		}), () => {
-			let { active: r, hasPayload: i, style: o } = e, { cssClasses: s, cssProperties: c } = u.value, l = {
-				...c,
+		watchPostEffect((onCleanup) => {
+			const element = el.value;
+			const transform = currentTransform.value.transform;
+			if (!element || !transform?.transform) return;
+			if (props.isAnimationActive && reducedMotion.value !== "reduce") animationControls = animate(element, { transform: transform.transform }, props.transition);
+			else element.style.transform = transform.transform;
+			onCleanup(() => {
+				animationControls?.stop();
+				animationControls = void 0;
+			});
+		});
+		return () => {
+			const { active, hasPayload, style } = props;
+			const { cssClasses, cssProperties } = currentTransform.value;
+			const boundingBoxStyle = {
+				...cssProperties,
 				pointerEvents: "none",
-				visibility: !n.value && r && i ? "visible" : "hidden",
+				visibility: !dismissed.value && active && hasPayload ? "visible" : "hidden",
 				position: "absolute",
 				top: 0,
 				left: 0,
-				...o
+				...style
 			};
-			return D("div", {
-				role: "tooltip",
+			return createVNode("div", {
+				"role": "tooltip",
 				"aria-live": "polite",
-				tabindex: -1,
-				class: s,
-				style: l,
-				ref: a
-			}, [t.default?.()]);
+				"tabindex": -1,
+				"class": cssClasses,
+				"style": boundingBoxStyle,
+				"ref": el
+			}, [slots.default?.()]);
 		};
 	}
-}), q = /* @__PURE__ */ O({
+});
+var Cursor = /* @__PURE__ */ defineComponent({
 	name: "Cursor",
 	props: {
 		cursor: [Boolean, Object],
@@ -186,70 +219,86 @@ var G = /* @__PURE__ */ O({
 		payload: Array,
 		index: String
 	},
-	setup(e) {
-		let n = s(), r = o(), i = p(), a = S(), c = h(null), l = E(() => x(r.value, e.coordinate, n.value));
+	setup(props) {
+		const offset = useOffsetInternal();
+		const layout = useChartLayout();
+		const chartName = useChartName();
+		const tooltipAxisBandSize = useTooltipAxisBandSize();
+		const cursorLayerRef = useCursorLayerRef(null);
+		const points = computed(() => getCursorPoints(layout.value, props.coordinate, offset.value));
 		return () => {
-			if (!e.cursor || !e.coordinate) return null;
-			let o = i.value === "ScatterChart";
-			if (!o && e.tooltipEventType !== "axis") return null;
-			let s = e.cursor, u = typeof s == "object" ? s : {}, d;
-			if (o) {
-				let { offset: t, ...r } = e.coordinate, { top: i, left: a, width: o, height: s } = n.value, c = {
+			if (!props.cursor || !props.coordinate) return null;
+			const isScatterChart = chartName.value === "ScatterChart";
+			if (!isScatterChart && props.tooltipEventType !== "axis") return null;
+			const cursor = props.cursor;
+			const cursorSvgProps = typeof cursor === "object" ? cursor : {};
+			let cursorElement;
+			if (isScatterChart) {
+				const { offset: _offset, ...coord } = props.coordinate;
+				const { top, left, width, height } = offset.value;
+				const crossProps = {
 					stroke: "#ccc",
 					fill: "none",
-					...r,
-					top: i,
-					left: a,
-					width: o,
-					height: s,
+					...coord,
+					top,
+					left,
+					width,
+					height,
 					class: "v-charts-tooltip-cursor",
 					style: { pointerEvents: "none" },
-					...u
+					...cursorSvgProps
 				};
-				d = e.cursorSlot ? e.cursorSlot(c) : D(y, c, null);
-			} else if (i.value === "BarChart") {
-				let t = a.value ?? 0, i = t / 2, o = e.coordinate, s = n.value, c = {
+				cursorElement = props.cursorSlot ? props.cursorSlot(crossProps) : createVNode(Cross, crossProps, null);
+			} else if (chartName.value === "BarChart") {
+				const bandSize = tooltipAxisBandSize.value ?? 0;
+				const halfSize = bandSize / 2;
+				const coord = props.coordinate;
+				const off = offset.value;
+				const rectProps = {
 					stroke: "none",
 					fill: "#ccc",
-					x: r.value === "horizontal" ? o.x - i : s.left + .5,
-					y: r.value === "horizontal" ? s.top + .5 : o.y - i,
-					width: r.value === "horizontal" ? t : s.width - 1,
-					height: r.value === "horizontal" ? s.height - 1 : t,
+					x: layout.value === "horizontal" ? coord.x - halfSize : off.left + .5,
+					y: layout.value === "horizontal" ? off.top + .5 : coord.y - halfSize,
+					width: layout.value === "horizontal" ? bandSize : off.width - 1,
+					height: layout.value === "horizontal" ? off.height - 1 : bandSize,
 					class: "v-charts-tooltip-cursor",
 					style: { pointerEvents: "none" },
-					...u
+					...cursorSvgProps
 				};
-				d = e.cursorSlot ? e.cursorSlot(c) : D(m, c, null);
-			} else if (r.value === "radial" && e.coordinate?.cx != null) {
-				let t = l.value, n = {
-					cx: t.cx,
-					cy: t.cy,
-					startAngle: t.startAngle,
-					endAngle: t.endAngle,
-					innerRadius: t.radius,
-					outerRadius: t.radius,
+				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 = {
+					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" },
-					...u
+					...cursorSvgProps
 				};
-				d = e.cursorSlot ? e.cursorSlot(n) : D(b, n, null);
+				cursorElement = props.cursorSlot ? props.cursorSlot(sectorProps) : createVNode(Sector, sectorProps, null);
 			} else {
-				let n = {
+				const cursorProps = {
 					stroke: "#ccc",
 					class: ["v-charts-tooltip-cursor"],
-					layout: r.value,
-					points: l.value,
+					layout: layout.value,
+					points: points.value,
 					style: { pointerEvents: "none" },
-					...u
+					...cursorSvgProps
 				};
-				d = e.cursorSlot ? e.cursorSlot(n) : D(t, n, null);
+				cursorElement = props.cursorSlot ? props.cursorSlot(cursorProps) : createVNode(Curve, cursorProps, null);
 			}
-			return c?.value ? D(T, { to: c.value }, V(d) ? d : { default: () => [d] }) : d;
+			if (cursorLayerRef?.value) return createVNode(Teleport, { "to": cursorLayerRef.value }, _isSlot(cursorElement) ? cursorElement : { default: () => [cursorElement] });
+			return cursorElement;
 		};
 	}
-}), J = /* @__PURE__ */ O({
+});
+var Tooltip = /* @__PURE__ */ defineComponent({
 	name: "Tooltip",
 	props: {
 		active: {
@@ -260,23 +309,23 @@ var G = /* @__PURE__ */ O({
 		allowEscapeViewBox: {
 			type: Object,
 			default: () => ({
-				x: !1,
-				y: !1
+				x: false,
+				y: false
 			})
 		},
 		content: [Object, Function],
 		cursor: {
 			type: [Boolean, Object],
-			default: !0
+			default: true
 		},
 		filterNull: {
 			type: Boolean,
-			default: !0
+			default: true
 		},
 		defaultIndex: [Number, String],
 		isAnimationActive: {
 			type: Boolean,
-			default: !0
+			default: true
 		},
 		offset: {
 			type: Number,
@@ -291,8 +340,8 @@ var G = /* @__PURE__ */ O({
 		reverseDirection: {
 			type: Object,
 			default: () => ({
-				x: !1,
-				y: !1
+				x: false,
+				y: false
 			})
 		},
 		shared: {
@@ -333,56 +382,82 @@ var G = /* @__PURE__ */ O({
 		}
 	},
 	slots: Object,
-	setup(e, { slots: t }) {
-		let o = i(), s = E(() => typeof e.defaultIndex == "number" ? String(e.defaultIndex) : e.defaultIndex);
-		N(() => {
-			o(r({
-				shared: e.shared,
-				trigger: e.trigger,
-				axisId: e.axisId,
-				active: e.active,
-				defaultIndex: s.value
+	setup(props, { slots }) {
+		const dispatch = useAppDispatch();
+		const defaultIndexAsString = computed(() => typeof props.defaultIndex === "number" ? String(props.defaultIndex) : props.defaultIndex);
+		watchEffect(() => {
+			dispatch(setTooltipSettingsState({
+				shared: props.shared,
+				trigger: props.trigger,
+				axisId: props.axisId,
+				active: props.active,
+				defaultIndex: defaultIndexAsString.value
 			}));
 		});
-		let p = c(), m = _(), h = n(e.shared), v = a((t) => d(t, h.value, e.trigger, s.value)), y = a((t) => f(t, h.value, e.trigger, s.value)), b = a((t) => u(t, h.value, e.trigger, s.value)), x = a((t) => l(t, h.value, e.trigger, s.value)), S = E(() => y.value ?? []), O = g(), k = E(() => e.portal ?? O?.value), A = E(() => e.active ?? v.value?.isActive), j = E(() => h.value === "axis" ? b.value : void 0), M = [], P = E(() => {
-			if (!A.value) return M;
-			let t = S.value ?? M;
-			return e.filterNull && t.length > 0 && (t = U(t.filter((t) => t.value != null && (t.hide !== !0 || e.includeHidden)), e.payloadUniqBy, H)), t;
-		}), F = E(() => P.value.length > 0), I = E(() => e.content ? e.content : G), L = E(() => ({
-			...e,
-			payload: P.value,
-			label: j.value,
-			active: A.value,
-			coordinate: x.value,
-			accessibilityLayer: m.value
-		})), R = E(() => !!t.content);
-		return C({
-			tooltipEventType: h,
-			trigger: e.trigger,
-			activeCoordinate: x,
-			activeLabel: j,
-			activeIndex: E(() => v.value?.activeIndex),
-			isTooltipActive: A
-		}), () => k.value ? D(w, null, [D("foreignObject", null, [D(T, { to: k.value }, { default: () => [D(K, {
-			allowEscapeViewBox: e.allowEscapeViewBox,
-			isAnimationActive: e.isAnimationActive,
-			active: A.value,
-			coordinate: x.value,
-			hasPayload: F.value,
-			offset: e.offset,
-			position: e.position,
-			reverseDirection: e.reverseDirection,
-			viewBox: p.value,
-			style: e.style
-		}, { default: () => [R.value ? t.content(L.value) : D(I.value, L.value, null)] })] })]), A.value && D(q, {
-			cursor: e.cursor,
-			cursorSlot: t.cursor,
-			tooltipEventType: h.value,
-			coordinate: x.value,
-			payload: S.value,
-			index: v.value?.activeIndex
-		}, null)]) : null;
+		const viewBox = useViewBox();
+		const accessibilityLayer = useAccessibilityLayer();
+		const tooltipEventType = useTooltipEventType(props.shared);
+		const tooltipState = useAppSelector((state) => selectIsTooltipActive(state, tooltipEventType.value, props.trigger, defaultIndexAsString.value));
+		const payloadFromRedux = useAppSelector((state) => selectTooltipPayload(state, tooltipEventType.value, props.trigger, defaultIndexAsString.value));
+		const labelFromRedux = useAppSelector((state) => selectActiveLabel(state, tooltipEventType.value, props.trigger, defaultIndexAsString.value));
+		const coordinate = useAppSelector((state) => selectActiveCoordinate(state, tooltipEventType.value, props.trigger, defaultIndexAsString.value));
+		const payload = computed(() => payloadFromRedux.value ?? []);
+		const tooltipPortalFromContext = usePortal();
+		const tooltipPortal = computed(() => props.portal ?? tooltipPortalFromContext?.value);
+		const finalIsActive = computed(() => props.active ?? tooltipState.value?.isActive);
+		const finalLabel = computed(() => tooltipEventType.value === "axis" ? labelFromRedux.value : void 0);
+		const emptyPayload = [];
+		const finalPayload = computed(() => {
+			if (!finalIsActive.value) return emptyPayload;
+			let result = payload.value ?? emptyPayload;
+			if (props.filterNull && result.length > 0) result = getUniqPayload(result.filter((entry) => entry.value != null && (entry.hide !== true || props.includeHidden)), props.payloadUniqBy, defaultUniqBy);
+			return result;
+		});
+		const hasPayload = computed(() => finalPayload.value.length > 0);
+		const contentComponent = computed(() => {
+			if (props.content) return props.content;
+			return DefaultTooltipContent;
+		});
+		const contentProps = computed(() => ({
+			...props,
+			payload: finalPayload.value,
+			label: finalLabel.value,
+			active: finalIsActive.value,
+			coordinate: coordinate.value,
+			accessibilityLayer: accessibilityLayer.value
+		}));
+		const hasContentSlot = computed(() => !!slots.content);
+		useTooltipChartSynchronisation({
+			tooltipEventType,
+			trigger: props.trigger,
+			activeCoordinate: coordinate,
+			activeLabel: finalLabel,
+			activeIndex: computed(() => tooltipState.value?.activeIndex),
+			isTooltipActive: finalIsActive
+		});
+		return () => {
+			if (!tooltipPortal.value) return null;
+			return createVNode(Fragment, null, [createVNode("foreignObject", null, [createVNode(Teleport, { "to": tooltipPortal.value }, { default: () => [createVNode(TooltipBoundingBox, {
+				"allowEscapeViewBox": props.allowEscapeViewBox,
+				"isAnimationActive": props.isAnimationActive,
+				"active": finalIsActive.value,
+				"coordinate": coordinate.value,
+				"hasPayload": hasPayload.value,
+				"offset": props.offset,
+				"position": props.position,
+				"reverseDirection": props.reverseDirection,
+				"viewBox": viewBox.value,
+				"style": props.style
+			}, { default: () => [hasContentSlot.value ? slots.content(contentProps.value) : createVNode(contentComponent.value, contentProps.value, null)] })] })]), finalIsActive.value && createVNode(Cursor, {
+				"cursor": props.cursor,
+				"cursorSlot": slots.cursor,
+				"tooltipEventType": tooltipEventType.value,
+				"coordinate": coordinate.value,
+				"payload": payload.value,
+				"index": tooltipState.value?.activeIndex
+			}, null)]);
+		};
 	}
 });
 //#endregion
-export { J as default, U as getUniqPayload };
+export { Tooltip as default, getUniqPayload };