vccs 0.0.1 → 0.2.0

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

@@ -0,0 +1,191 @@
+import { getStringSize } from "../utils/attrs.mjs";
+import { reduceCSSCalc } from "../utils/ReduceCSSCalc.mjs";
+import { Fragment, computed, createElementBlock, defineComponent, normalizeStyle, openBlock, renderList, toDisplayString } from "vue";
+//#region src/components/Text.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"x",
+	"y",
+	"transform",
+	"text-anchor",
+	"fill"
+];
+var _hoisted_2 = ["x", "dy"];
+var Text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Text",
+	props: {
+		x: {
+			type: [Number, String],
+			default: 0
+		},
+		y: {
+			type: [Number, String],
+			default: 0
+		},
+		dx: {
+			type: Number,
+			default: void 0
+		},
+		dy: {
+			type: Number,
+			default: void 0
+		},
+		lineHeight: {
+			type: [Number, String],
+			default: "1em"
+		},
+		capHeight: {
+			type: [Number, String],
+			default: "0.71em"
+		},
+		scaleToFit: {
+			type: Boolean,
+			default: false
+		},
+		textAnchor: {
+			type: String,
+			default: "start"
+		},
+		verticalAnchor: {
+			type: String,
+			default: "end"
+		},
+		fill: {
+			type: String,
+			default: "#808080"
+		},
+		angle: {
+			type: Number,
+			default: 0
+		},
+		style: {
+			type: Object,
+			default: () => ({})
+		},
+		breakAll: {
+			type: Boolean,
+			default: false
+		},
+		maxLines: {
+			type: Number,
+			default: void 0
+		},
+		width: {
+			type: [Number, String],
+			default: void 0
+		},
+		value: {
+			type: [String, Number],
+			default: ""
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const BREAKING_SPACES = /[ \f\n\r\t\v\u2028\u2029]+/;
+		function calculateWordWidths(children, breakAll, style) {
+			let words = [];
+			if (children !== void 0 && children !== null) words = breakAll ? children.toString().split("") : children.toString().split(BREAKING_SPACES);
+			return {
+				wordsWithComputedWidth: words.map((word) => ({
+					word,
+					width: getStringSize(word, style).width
+				})),
+				spaceWidth: breakAll ? 0 : getStringSize("\xA0", style).width
+			};
+		}
+		function calculateWordsByLines(maxLines, value, style, breakAll, initialWordsWithComputedWidth, spaceWidth, lineWidth, scaleToFit) {
+			const shouldLimitLines = typeof maxLines === "number";
+			const text = value;
+			const calculate = (words = []) => {
+				return words.reduce((result, { word, width }) => {
+					const currentLine = result[result.length - 1];
+					if (currentLine && (lineWidth == null || scaleToFit || currentLine.width + width + spaceWidth < Number(lineWidth))) {
+						currentLine.words.push(word);
+						currentLine.width += width + spaceWidth;
+					} else result.push({
+						words: [word],
+						width
+					});
+					return result;
+				}, []);
+			};
+			const originalResult = calculate(initialWordsWithComputedWidth);
+			const findLongestLine = (words) => words.reduce((a, b) => a.width > b.width ? a : b);
+			if (!shouldLimitLines || scaleToFit) return originalResult;
+			if (!(originalResult.length > maxLines || findLongestLine(originalResult).width > Number(lineWidth))) return originalResult;
+			const suffix = "…";
+			const checkOverflow = (index) => {
+				const { wordsWithComputedWidth } = calculateWordWidths(text.slice(0, index) + suffix, breakAll, style);
+				const result = calculate(wordsWithComputedWidth);
+				return [result.length > maxLines || findLongestLine(result).width > Number(lineWidth), result];
+			};
+			let start = 0;
+			let end = text.length - 1;
+			let iterations = 0;
+			let trimmedResult;
+			while (start <= end && iterations <= text.length - 1) {
+				const middle = Math.floor((start + end) / 2);
+				const [doesPrevOverflow, result] = checkOverflow(middle - 1);
+				const [doesMiddleOverflow] = checkOverflow(middle);
+				if (!doesPrevOverflow && !doesMiddleOverflow) start = middle + 1;
+				if (doesPrevOverflow && doesMiddleOverflow) end = middle - 1;
+				if (!doesPrevOverflow && doesMiddleOverflow) {
+					trimmedResult = result;
+					break;
+				}
+				iterations++;
+			}
+			return trimmedResult || originalResult;
+		}
+		function getWordsByLines({ width, scaleToFit, value, style, breakAll, maxLines }) {
+			if (width || scaleToFit) {
+				const wordWidths = calculateWordWidths(value, breakAll, style);
+				const wordsWithComputedWidth = wordWidths.wordsWithComputedWidth;
+				const spaceWidth = wordWidths.spaceWidth;
+				return calculateWordsByLines(maxLines, value, style, breakAll, wordsWithComputedWidth, spaceWidth, width, scaleToFit);
+			}
+			return [{ words: value !== void 0 && value !== null ? value.toString().split(BREAKING_SPACES) : [] }];
+		}
+		const wordsByLines = computed(() => getWordsByLines({
+			width: props.width,
+			scaleToFit: props.scaleToFit,
+			value: props.value,
+			style: props.style,
+			breakAll: props.breakAll,
+			maxLines: props.maxLines
+		}));
+		const x = computed(() => Number(props.x) + (typeof props.dx === "number" ? props.dx : 0));
+		const y = computed(() => Number(props.y) + (typeof props.dy === "number" ? props.dy : 0));
+		const startDy = computed(() => {
+			switch (props.verticalAnchor) {
+				case "start": return reduceCSSCalc(`calc(${props.capHeight})`);
+				case "middle": return reduceCSSCalc(`calc(${(wordsByLines.value.length - 1) / 2} * -${props.lineHeight} + (${props.capHeight} / 2))`);
+				default: return reduceCSSCalc(`calc(${wordsByLines.value.length - 1} * -${props.lineHeight})`);
+			}
+		});
+		const transforms = computed(() => {
+			const arr = [];
+			if (props.scaleToFit && wordsByLines.value[0]?.width && props.width) arr.push(`scale(${Number(props.width) / wordsByLines.value[0].width})`);
+			if (props.angle) arr.push(`rotate(${props.angle}, ${x.value}, ${y.value})`);
+			return arr.join(" ");
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("text", {
+				x: x.value,
+				y: y.value,
+				transform: transforms.value || void 0,
+				"text-anchor": props.textAnchor,
+				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) => {
+				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);
+		};
+	}
+});
+//#endregion
+export { Text_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/components/Tooltip.mjs

@@ -0,0 +1,463 @@
+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 _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+function defaultUniqBy(entry) {
+	return entry.dataKey;
+}
+function getUniqPayload(payload, option, defaultUniqBy) {
+	if (option === true) return uniqBy(payload, defaultUniqBy);
+	if (typeof option === "function") return uniqBy(payload, option);
+	return payload;
+}
+function defaultFormatter(value) {
+	return Array.isArray(value) && isNumOrStr(value[0]) && isNumOrStr(value[1]) ? value.join(" ~ ") : value;
+}
+var DefaultTooltipContent = /* @__PURE__ */ defineComponent({
+	name: "DefaultTooltipContent",
+	props: {
+		label: [String, Number],
+		payload: Array,
+		active: Boolean,
+		separator: {
+			type: String,
+			default: " : "
+		},
+		contentStyle: Object,
+		labelStyle: Object,
+		itemStyle: Object,
+		itemSorter: [Function, String],
+		formatter: Function
+	},
+	setup(props) {
+		return () => {
+			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",
+				...contentStyle
+			};
+			const finalLabelStyle = {
+				margin: 0,
+				...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: 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 createVNode("div", {
+					"key": index,
+					"class": "v-charts-tooltip-item",
+					"style": finalItemStyle
+				}, [
+					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 || ""])
+				]);
+			})])]);
+		};
+	}
+});
+var TooltipBoundingBox = /* @__PURE__ */ defineComponent({
+	name: "TooltipBoundingBox",
+	props: {
+		allowEscapeViewBox: Object,
+		isAnimationActive: Boolean,
+		transition: {
+			type: Object,
+			default: () => ({
+				duration: .4,
+				ease: "easeOut"
+			})
+		},
+		active: Boolean,
+		coordinate: Object,
+		hasPayload: Boolean,
+		offset: Number,
+		position: Object,
+		reverseDirection: Object,
+		viewBox: Object,
+		style: Object
+	},
+	setup(props, { slots }) {
+		const dismissed = ref(false);
+		const dismissedAtCoordinate = reactive({
+			x: 0,
+			y: 0
+		});
+		watchEffect(() => {
+			if (props.coordinate?.x !== dismissedAtCoordinate.x || props.coordinate?.y !== dismissedAtCoordinate.y) dismissed.value = false;
+		}, { flush: "post" });
+		const { escape } = useMagicKeys();
+		watch(escape, (v) => {
+			if (v) {
+				dismissed.value = true;
+				dismissedAtCoordinate.x = props.coordinate?.x ?? 0;
+				dismissedAtCoordinate.y = props.coordinate?.y ?? 0;
+			}
+		});
+		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: lastBoundingBox.height.value,
+					width: lastBoundingBox.width.value
+				},
+				useTranslate3d: false,
+				viewBox
+			});
+			transform = !lastBoundingBox.height.value && preTransform ? preTransform : transform;
+			preTransform = transform || preTransform;
+			return {
+				cssClasses,
+				cssProperties,
+				transform
+			};
+		});
+		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: !dismissed.value && active && hasPayload ? "visible" : "hidden",
+				position: "absolute",
+				top: 0,
+				left: 0,
+				...style
+			};
+			return createVNode("div", {
+				"role": "tooltip",
+				"aria-live": "polite",
+				"tabindex": -1,
+				"class": cssClasses,
+				"style": boundingBoxStyle,
+				"ref": el
+			}, [slots.default?.()]);
+		};
+	}
+});
+var Cursor = /* @__PURE__ */ defineComponent({
+	name: "Cursor",
+	props: {
+		cursor: [Boolean, Object],
+		cursorSlot: Function,
+		tooltipEventType: String,
+		coordinate: Object,
+		payload: Array,
+		index: String
+	},
+	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 (!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",
+					...coord,
+					top,
+					left,
+					width,
+					height,
+					class: "v-charts-tooltip-cursor",
+					style: { pointerEvents: "none" },
+					...cursorSvgProps
+				};
+				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: 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" },
+					...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 = {
+					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" },
+					...cursorSvgProps
+				};
+				cursorElement = props.cursorSlot ? props.cursorSlot(sectorProps) : createVNode(Sector, sectorProps, null);
+			} else {
+				const cursorProps = {
+					stroke: "#ccc",
+					class: ["v-charts-tooltip-cursor"],
+					layout: layout.value,
+					points: points.value,
+					style: { pointerEvents: "none" },
+					...cursorSvgProps
+				};
+				cursorElement = props.cursorSlot ? props.cursorSlot(cursorProps) : createVNode(Curve, cursorProps, null);
+			}
+			if (cursorLayerRef?.value) return createVNode(Teleport, { "to": cursorLayerRef.value }, _isSlot(cursorElement) ? cursorElement : { default: () => [cursorElement] });
+			return cursorElement;
+		};
+	}
+});
+var Tooltip = /* @__PURE__ */ defineComponent({
+	name: "Tooltip",
+	props: {
+		active: {
+			type: Boolean,
+			default: void 0
+		},
+		includeHidden: Boolean,
+		allowEscapeViewBox: {
+			type: Object,
+			default: () => ({
+				x: false,
+				y: false
+			})
+		},
+		content: [Object, Function],
+		cursor: {
+			type: [Boolean, Object],
+			default: true
+		},
+		filterNull: {
+			type: Boolean,
+			default: true
+		},
+		defaultIndex: [Number, String],
+		isAnimationActive: {
+			type: Boolean,
+			default: true
+		},
+		offset: {
+			type: Number,
+			default: 10
+		},
+		payloadUniqBy: [Boolean, Function],
+		portal: {
+			type: Object,
+			default: void 0
+		},
+		position: Object,
+		reverseDirection: {
+			type: Object,
+			default: () => ({
+				x: false,
+				y: false
+			})
+		},
+		shared: {
+			type: [Boolean, void 0],
+			default: void 0
+		},
+		trigger: {
+			type: String,
+			default: "hover"
+		},
+		style: {
+			type: Object,
+			default: () => ({})
+		},
+		axisId: {
+			type: [String, Number],
+			default: 0
+		},
+		contentStyle: {
+			type: Object,
+			default: () => ({})
+		},
+		itemStyle: {
+			type: Object,
+			default: () => ({})
+		},
+		labelStyle: {
+			type: Object,
+			default: () => ({})
+		},
+		itemSorter: {
+			type: String,
+			default: "name"
+		},
+		separator: {
+			type: String,
+			default: " : "
+		}
+	},
+	slots: Object,
+	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
+			}));
+		});
+		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 { Tooltip as default, getUniqPayload };

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

@@ -0,0 +1,40 @@
+import { isNullish } from "../../utils/validate.mjs";
+import { useViewBox } from "../../context/chartLayoutContext.mjs";
+import { LabelVueProps } from "./types.mjs";
+import { usePolarLabelViewBox } from "../../context/polarLabelViewBoxContext.mjs";
+import { getAttrsOfCartesianLabel, getAttrsOfPolarLabel, isPolar, renderRadialLabel } from "./utils.mjs";
+import Text_default from "../Text.mjs";
+import { createVNode, defineComponent, mergeProps } from "vue";
+//#region src/components/label/Label.tsx
+var Label = /* @__PURE__ */ defineComponent({
+	name: "Label",
+	props: LabelVueProps,
+	slots: Object,
+	setup(props, { slots, attrs }) {
+		const viewBoxFromContext = useViewBox();
+		const polarLabelViewBox = usePolarLabelViewBox();
+		return () => {
+			const { viewBox: viewBoxFromProps, value, position, textBreakAll, formatter } = props;
+			const viewBox = viewBoxFromProps || polarLabelViewBox.value || viewBoxFromContext.value;
+			if (!viewBox || isNullish(value) && !slots.content) return null;
+			const isPolarLabel = isPolar(viewBox);
+			if (slots.content) return slots.content({
+				...props,
+				viewBox
+			});
+			let label = value;
+			if (typeof formatter === "function") label = formatter(label);
+			if (isPolarLabel && (position === "insideStart" || position === "insideEnd" || position === "end")) return renderRadialLabel(props, position, label, attrs, viewBox);
+			const positionAttrs = isPolarLabel ? getAttrsOfPolarLabel(props, viewBox) : getAttrsOfCartesianLabel(props, viewBox);
+			const textAnchor = attrs.textAnchor != null && (attrs.textAnchor === "start" || attrs.textAnchor === "middle" || attrs.textAnchor === "end") ? attrs.textAnchor : positionAttrs.textAnchor;
+			return createVNode(Text_default, mergeProps({ "class": ["v-charts-label", props.class] }, attrs, positionAttrs, {
+				"textAnchor": textAnchor,
+				"angle": props.angle,
+				"breakAll": textBreakAll,
+				"value": label
+			}), null);
+		};
+	}
+});
+//#endregion
+export { Label };