vccs 0.0.1 → 0.2.0

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

@@ -0,0 +1,55 @@
+import { isNullish } from "../../utils/validate.mjs";
+import { getValueByDataKey } from "../../utils/chart.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { LabelListVueProps } from "./types.mjs";
+import { parseViewBox } from "./utils.mjs";
+import { Label } from "./Label.mjs";
+import { useLabelLayerRef } from "../../context/labelLayerContext.mjs";
+import { useCartesianLabelListData } from "../../context/cartesianLabelListContext.mjs";
+import { Teleport, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+//#region src/components/label/LabelList.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var LabelList = /* @__PURE__ */ defineComponent({
+	props: LabelListVueProps,
+	setup(props, { attrs, slots }) {
+		const labelLayerRef = useLabelLayerRef(null);
+		const contextData = useCartesianLabelListData(null);
+		return () => {
+			let _slot;
+			const { dataKey, valueAccessor, clockWise, id, ...others } = props;
+			const data = props.data ?? contextData?.value;
+			if (!data || !data.length) return null;
+			const content = createVNode(Layer, { "class": "v-charts-label-list" }, _isSlot(_slot = data.map((entry, index) => {
+				const value = isNullish(dataKey) ? valueAccessor(entry, index) : getValueByDataKey(entry && entry.payload, dataKey);
+				const idProps = isNullish(id) ? void 0 : `${id}-${index}`;
+				const viewBox = parseViewBox(isNullish(clockWise) ? entry : {
+					...entry,
+					clockWise
+				});
+				if (slots.label) return slots.label({
+					...others,
+					...attrs,
+					...viewBox,
+					value,
+					index,
+					key: `label-${index}`
+				});
+				const entryFill = entry.fill != null && !("fill" in others) && !("fill" in attrs) ? entry.fill : void 0;
+				return createVNode(Label, mergeProps(others, attrs, entryFill != null ? { fill: entryFill } : {}, {
+					"id": idProps,
+					"parentViewBox": entry.parentViewBox,
+					"value": value,
+					"viewBox": viewBox,
+					"key": `label-${index}`,
+					"index": index
+				}), null);
+			})) ? _slot : { default: () => [_slot] });
+			if (labelLayerRef?.value) return createVNode(Teleport, { "to": labelLayerRef.value }, _isSlot(content) ? content : { default: () => [content] });
+			return content;
+		};
+	}
+});
+//#endregion
+export { LabelList };

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

@@ -0,0 +1,38 @@
+import { last } from "es-toolkit/compat";
+//#region src/components/label/types.ts
+var defaultAccessor = (entry) => Array.isArray(entry.value) ? last(entry.value) : entry.value;
+var LabelListVueProps = {
+	id: { type: String },
+	data: { type: Array },
+	valueAccessor: {
+		type: Function,
+		default: defaultAccessor
+	},
+	clockWise: { type: Boolean },
+	dataKey: { type: [String, Function] },
+	textBreakAll: { type: Boolean },
+	position: { type: String },
+	offset: { type: Number },
+	angle: { type: Number }
+};
+var LabelVueProps = {
+	id: { type: String },
+	class: {
+		type: String,
+		default: ""
+	},
+	viewBox: { type: Object },
+	parentViewBox: { type: Object },
+	value: { type: [Number, String] },
+	formatter: { type: Function },
+	offset: {
+		type: Number,
+		default: 5
+	},
+	position: { type: [String, Object] },
+	textBreakAll: { type: Boolean },
+	angle: { type: Number },
+	index: { type: Number }
+};
+//#endregion
+export { LabelListVueProps, LabelVueProps };

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

@@ -0,0 +1,265 @@
+import { isNumber, isPercent } from "../../utils/validate.mjs";
+import { uniqueId } from "../../utils/data-utils.mjs";
+import { getPercentValue, mathSign } from "../../utils/data.mjs";
+import { createVNode, mergeProps } from "vue";
+//#region src/components/label/utils.tsx
+function parseViewBox(props) {
+	const { cx, cy, angle, startAngle, endAngle, r, radius, innerRadius, outerRadius, x, y, top, left, width, height, clockWise, labelViewBox } = props;
+	if (labelViewBox) return labelViewBox;
+	if (isNumber(width) && isNumber(height)) {
+		if (isNumber(x) && isNumber(y)) return {
+			x,
+			y,
+			width,
+			height
+		};
+		if (isNumber(top) && isNumber(left)) return {
+			x: top,
+			y: left,
+			width,
+			height
+		};
+	}
+	if (isNumber(x) && isNumber(y)) return {
+		x,
+		y,
+		width: 0,
+		height: 0
+	};
+	if (isNumber(cx) && isNumber(cy)) return {
+		cx,
+		cy,
+		startAngle: startAngle || angle || 0,
+		endAngle: endAngle || angle || 0,
+		innerRadius: innerRadius || 0,
+		outerRadius: outerRadius || radius || r || 0,
+		clockWise
+	};
+	if (props.viewBox) return props.viewBox;
+}
+function isPolar(viewBox) {
+	return "cx" in viewBox && isNumber(viewBox.cx);
+}
+var RADIAN = Math.PI / 180;
+function polarToCartesian(cx, cy, radius, angle) {
+	return {
+		x: cx + Math.cos(-RADIAN * angle) * radius,
+		y: cy + Math.sin(-RADIAN * angle) * radius
+	};
+}
+function getDeltaAngle(startAngle, endAngle) {
+	return mathSign(endAngle - startAngle) * Math.min(Math.abs(endAngle - startAngle), 360);
+}
+function renderRadialLabel(labelProps, position, label, attrs, viewBox) {
+	const { offset = 5, class: className, id: labelId } = labelProps;
+	const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, clockWise } = viewBox;
+	const radius = (innerRadius + outerRadius) / 2;
+	const deltaAngle = getDeltaAngle(startAngle, endAngle);
+	const sign = deltaAngle >= 0 ? 1 : -1;
+	let labelAngle;
+	let direction;
+	switch (position) {
+		case "insideStart":
+			labelAngle = startAngle + sign * offset;
+			direction = clockWise;
+			break;
+		case "insideEnd":
+			labelAngle = endAngle - sign * offset;
+			direction = !clockWise;
+			break;
+		case "end":
+			labelAngle = endAngle + sign * offset;
+			direction = clockWise;
+			break;
+		default: throw new Error(`Unsupported position ${position}`);
+	}
+	direction = deltaAngle <= 0 ? direction : !direction;
+	const startPoint = polarToCartesian(cx, cy, radius, labelAngle);
+	const endPoint = polarToCartesian(cx, cy, radius, labelAngle + (direction ? 1 : -1) * 359);
+	const path = `M${startPoint.x},${startPoint.y} A${radius},${radius},0,1,${direction ? 0 : 1},${endPoint.x},${endPoint.y}`;
+	const id = labelId == null ? uniqueId("v-charts-radial-line-") : labelId;
+	return createVNode("text", mergeProps(attrs, {
+		"dominant-baseline": "central",
+		"class": ["v-charts-radial-bar-label", className]
+	}), [createVNode("defs", null, [createVNode("path", {
+		"id": id,
+		"d": path
+	}, null)]), createVNode("textPath", { "xlink:href": `#${id}` }, [label])]);
+}
+function getAttrsOfPolarLabel(props, viewBox) {
+	const { offset, position } = props;
+	const { cx, cy, innerRadius, outerRadius, startAngle, endAngle } = viewBox ?? props.viewBox;
+	const midAngle = (startAngle + endAngle) / 2;
+	if (position === "outside") {
+		const { x, y } = polarToCartesian(cx, cy, outerRadius + offset, midAngle);
+		return {
+			x,
+			y,
+			textAnchor: x >= cx ? "start" : "end",
+			verticalAnchor: "middle"
+		};
+	}
+	if (position === "center") return {
+		x: cx,
+		y: cy,
+		textAnchor: "middle",
+		verticalAnchor: "middle"
+	};
+	if (position === "centerTop") return {
+		x: cx,
+		y: cy,
+		textAnchor: "middle",
+		verticalAnchor: "start"
+	};
+	if (position === "centerBottom") return {
+		x: cx,
+		y: cy,
+		textAnchor: "middle",
+		verticalAnchor: "end"
+	};
+	const { x, y } = polarToCartesian(cx, cy, (innerRadius + outerRadius) / 2, midAngle);
+	return {
+		x,
+		y,
+		textAnchor: "middle",
+		verticalAnchor: "middle"
+	};
+}
+function getAttrsOfCartesianLabel(props, viewBox) {
+	const { parentViewBox, offset, position } = props;
+	const { x, y, width, height } = viewBox;
+	const verticalSign = height >= 0 ? 1 : -1;
+	const verticalOffset = verticalSign * offset;
+	const verticalEnd = verticalSign > 0 ? "end" : "start";
+	const verticalStart = verticalSign > 0 ? "start" : "end";
+	const horizontalSign = width >= 0 ? 1 : -1;
+	const horizontalOffset = horizontalSign * offset;
+	const horizontalEnd = horizontalSign > 0 ? "end" : "start";
+	const horizontalStart = horizontalSign > 0 ? "start" : "end";
+	if (position === "top") return {
+		x: x + width / 2,
+		y: y - verticalSign * offset,
+		textAnchor: "middle",
+		verticalAnchor: verticalEnd,
+		...parentViewBox ? {
+			height: Math.max(y - parentViewBox.y, 0),
+			width
+		} : {}
+	};
+	if (position === "bottom") return {
+		x: x + width / 2,
+		y: y + height + verticalOffset,
+		textAnchor: "middle",
+		verticalAnchor: verticalStart,
+		...parentViewBox ? {
+			height: Math.max(parentViewBox.y + parentViewBox.height - (y + height), 0),
+			width
+		} : {}
+	};
+	if (position === "left") {
+		const attrs = {
+			x: x - horizontalOffset,
+			y: y + height / 2,
+			textAnchor: horizontalEnd,
+			verticalAnchor: "middle"
+		};
+		return {
+			...attrs,
+			...parentViewBox ? {
+				width: Math.max(attrs.x - parentViewBox.x, 0),
+				height
+			} : {}
+		};
+	}
+	if (position === "right") {
+		const attrs = {
+			x: x + width + horizontalOffset,
+			y: y + height / 2,
+			textAnchor: horizontalStart,
+			verticalAnchor: "middle"
+		};
+		return {
+			...attrs,
+			...parentViewBox ? {
+				width: Math.max(parentViewBox.x + parentViewBox.width - attrs.x, 0),
+				height
+			} : {}
+		};
+	}
+	const sizeAttrs = parentViewBox ? {
+		width,
+		height
+	} : {};
+	if (position === "insideLeft") return {
+		x: x + horizontalOffset,
+		y: y + height / 2,
+		textAnchor: horizontalStart,
+		verticalAnchor: "middle",
+		...sizeAttrs
+	};
+	if (position === "insideRight") return {
+		x: x + width - horizontalOffset,
+		y: y + height / 2,
+		textAnchor: horizontalEnd,
+		verticalAnchor: "middle",
+		...sizeAttrs
+	};
+	if (position === "insideTop") return {
+		x: x + width / 2,
+		y: y + verticalOffset,
+		textAnchor: "middle",
+		verticalAnchor: verticalStart,
+		...sizeAttrs
+	};
+	if (position === "insideBottom") return {
+		x: x + width / 2,
+		y: y + height - verticalOffset,
+		textAnchor: "middle",
+		verticalAnchor: verticalEnd,
+		...sizeAttrs
+	};
+	if (position === "insideTopLeft") return {
+		x: x + horizontalOffset,
+		y: y + verticalOffset,
+		textAnchor: horizontalStart,
+		verticalAnchor: verticalStart,
+		...sizeAttrs
+	};
+	if (position === "insideTopRight") return {
+		x: x + width - horizontalOffset,
+		y: y + verticalOffset,
+		textAnchor: horizontalEnd,
+		verticalAnchor: verticalStart,
+		...sizeAttrs
+	};
+	if (position === "insideBottomLeft") return {
+		x: x + horizontalOffset,
+		y: y + height - verticalOffset,
+		textAnchor: horizontalStart,
+		verticalAnchor: verticalEnd,
+		...sizeAttrs
+	};
+	if (position === "insideBottomRight") return {
+		x: x + width - horizontalOffset,
+		y: y + height - verticalOffset,
+		textAnchor: horizontalEnd,
+		verticalAnchor: verticalEnd,
+		...sizeAttrs
+	};
+	if (!!position && typeof position === "object" && (isNumber(position.x) || isPercent(position.x)) && (isNumber(position.y) || isPercent(position.y))) return {
+		x: x + getPercentValue(position.x, width),
+		y: y + getPercentValue(position.y, height),
+		textAnchor: "end",
+		verticalAnchor: "end",
+		...sizeAttrs
+	};
+	return {
+		x: x + width / 2,
+		y: y + height / 2,
+		textAnchor: "middle",
+		verticalAnchor: "middle",
+		...sizeAttrs
+	};
+}
+//#endregion
+export { getAttrsOfCartesianLabel, getAttrsOfPolarLabel, isPolar, parseViewBox, renderRadialLabel };

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

@@ -0,0 +1,93 @@
+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
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var Legend_default = /* @__PURE__ */ defineComponent({
+	name: "Legend",
+	props: LegendVueProps,
+	setup(props, { slots }) {
+		const { legendRef, processedPayload, outerStyle, legendPortal, syncSettings, syncSize } = useLegend(props);
+		const { getItemStyle, getSvgStyle, formatValue, handleClick, handleMouseEnter, handleMouseLeave } = useLegendContent(props);
+		watchEffect(() => {
+			syncSettings();
+			syncSize();
+		});
+		const renderDefaultContent = () => {
+			if (!processedPayload.value || processedPayload.value.length === 0) return null;
+			const { layout = "horizontal", align = "center", iconSize = 14 } = props;
+			const finalStyle = {
+				padding: 0,
+				margin: 0,
+				textAlign: layout === "horizontal" ? align : "left"
+			};
+			return createVNode("ul", {
+				"class": "v-charts-default-legend",
+				"style": finalStyle
+			}, [processedPayload.value.map((entry, index) => {
+				if (entry.type === "none") return null;
+				return createVNode("li", {
+					"key": `legend-item-${index}`,
+					"class": "v-charts-legend-item",
+					"style": getItemStyle(layout),
+					"tabindex": 0,
+					"role": "button",
+					"aria-label": `Toggle ${formatValue(entry)} series`,
+					"onClick": () => handleClick(entry, index),
+					"onKeydown": (e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							handleClick(entry, index);
+						}
+					},
+					"onMouseenter": () => handleMouseEnter(entry, index),
+					"onMouseleave": () => handleMouseLeave(entry, index)
+				}, [createVNode(Surface, {
+					"width": iconSize,
+					"height": iconSize,
+					"viewBox": {
+						x: 0,
+						y: 0,
+						width: 32,
+						height: 32
+					},
+					"style": getSvgStyle(),
+					"aria-label": `${formatValue(entry)} legend icon`
+				}, { default: () => [createVNode(LegendSymbol, {
+					"type": props.iconType ?? entry.type,
+					"color": entry.inactive ? "#a3a3a3" : entry.color,
+					"size": iconSize,
+					"data": entry
+				}, null)] }), createVNode("span", {
+					"class": "v-charts-legend-item-text",
+					"style": { color: entry.inactive ? "#a3a3a3" : entry.color }
+				}, [formatValue(entry)])]);
+			})]);
+		};
+		const renderContent = () => {
+			if (!processedPayload.value || processedPayload.value.length === 0) return null;
+			const contentProps = {
+				...props,
+				payload: processedPayload.value
+			};
+			if (slots.content) return slots.content(contentProps);
+			return renderDefaultContent();
+		};
+		return () => {
+			if (legendPortal.value == null) return null;
+			const legendElement = createVNode("div", {
+				"class": "v-charts-legend-wrapper",
+				"style": outerStyle.value,
+				"ref": legendRef
+			}, [renderContent()]);
+			return createVNode("foreignObject", null, [createVNode(Teleport, { "to": legendPortal.value }, _isSlot(legendElement) ? legendElement : { default: () => [legendElement] })]);
+		};
+	}
+});
+//#endregion
+export { Legend_default as default };

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

@@ -0,0 +1,62 @@
+import { Symbols } from "../../shape/Symbols.mjs";
+import { createVNode, defineComponent } from "vue";
+var LegendSymbol = /* @__PURE__ */ defineComponent({
+	name: "LegendSymbol",
+	props: {
+		type: String,
+		color: String,
+		size: {
+			type: Number,
+			default: 14
+		},
+		data: { type: Object }
+	},
+	setup(props) {
+		return () => {
+			const { type, color, data } = props;
+			if (type === "none") return null;
+			const halfSize = 32 / 2;
+			const thirdSize = 32 / 3;
+			const sixthSize = 32 / 6;
+			switch (type) {
+				case "line": return createVNode("path", {
+					"stroke-width": 4,
+					"fill": "none",
+					"stroke": color,
+					"d": `M0,${halfSize}h${thirdSize}
+            A${sixthSize},${sixthSize},0,1,1,${2 * thirdSize},${halfSize}
+            H32M${2 * thirdSize},${halfSize}
+            A${sixthSize},${sixthSize},0,1,1,${thirdSize},${halfSize}`,
+					"class": "v-charts-legend-icon"
+				}, null);
+				case "plainline": return createVNode("line", {
+					"stroke-width": 4,
+					"fill": "none",
+					"stroke": color,
+					"stroke-dasharray": data?.payload?.strokeDasharray,
+					"x1": 0,
+					"y1": halfSize,
+					"x2": 32,
+					"y2": halfSize,
+					"class": "v-charts-legend-icon"
+				}, null);
+				case "rect": return createVNode("path", {
+					"stroke": "none",
+					"fill": color,
+					"d": `M0,${32 / 8}h32v${96 / 4}h-32z`,
+					"class": "v-charts-legend-icon"
+				}, null);
+				default: return createVNode(Symbols, {
+					"fill": color,
+					"cx": halfSize,
+					"cy": halfSize,
+					"size": 32,
+					"sizeType": "diameter",
+					"type": type
+				}, null);
+			}
+		};
+	}
+});
+//#endregion
+export { LegendSymbol };

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

@@ -0,0 +1,72 @@
+import { selectLegendPayload } from "../../../state/selectors/legendSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../../../state/hooks.mjs";
+import { useChartHeight, useChartWidth, useMargin } from "../../../context/chartLayoutContext.mjs";
+import { setLegendSettings, setLegendSize } from "../../../state/legendSlice.mjs";
+import { useLegendPortal } from "../../../chart/LegendPortalContext.mjs";
+import { getUniqPayload } from "../../../utils/payload/getUniqPayload.mjs";
+import { defaultUniqBy, getDefaultPosition, getWidthOrHeight } from "../utils.mjs";
+import { computed, ref } from "vue";
+import { sortBy } from "es-toolkit/compat";
+import { useElementBounding } from "@vueuse/core";
+//#region src/components/legend/hooks/useLegend.ts
+function useLegend(props) {
+	const dispatch = useAppDispatch();
+	const contextPayload = useAppSelector(selectLegendPayload);
+	const legendPortalFromContext = useLegendPortal();
+	const margin = useMargin();
+	const chartWidth = useChartWidth();
+	const chartHeight = useChartHeight();
+	const legendRef = ref();
+	const { width: boundingWidth, height: boundingHeight } = useElementBounding(legendRef);
+	const maxWidth = computed(() => chartWidth.value - (margin.value.left || 0) - (margin.value.right || 0));
+	const widthOrHeight = computed(() => getWidthOrHeight(props.layout, props.height, props.width, maxWidth.value));
+	const boundingBox = computed(() => ({
+		width: boundingWidth.value,
+		height: boundingHeight.value
+	}));
+	const processedPayload = computed(() => {
+		if (!contextPayload.value || contextPayload.value.length === 0) return [];
+		let finalPayload = getUniqPayload(contextPayload.value, props.payloadUniqBy, defaultUniqBy);
+		if (props.itemSorter) {
+			if (typeof props.itemSorter === "string") finalPayload = sortBy(finalPayload, props.itemSorter);
+			else if (typeof props.itemSorter === "function") finalPayload = sortBy(finalPayload, props.itemSorter);
+		}
+		return Array.from(finalPayload);
+	});
+	const outerStyle = computed(() => {
+		if (props.portal) return props.wrapperStyle || {};
+		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 legendPortal = computed(() => props.portal ?? legendPortalFromContext?.value);
+	const syncSettings = () => {
+		dispatch(setLegendSettings({
+			layout: props.layout,
+			align: props.align,
+			verticalAlign: props.verticalAlign
+		}));
+	};
+	const syncSize = () => {
+		dispatch(setLegendSize({
+			width: boundingBox.value.width,
+			height: boundingBox.value.height
+		}));
+	};
+	return {
+		legendRef,
+		boundingBox,
+		widthOrHeight,
+		processedPayload,
+		outerStyle,
+		legendPortal,
+		syncSettings,
+		syncSize
+	};
+}
+//#endregion
+export { useLegend };

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

@@ -0,0 +1,68 @@
+//#region src/components/legend/hooks/useLegendContent.ts
+function useLegendContent(props) {
+	const getWrapperStyle = (layout = "horizontal", align = "center", verticalAlign = "bottom") => {
+		return {
+			display: "flex",
+			flexDirection: layout === "horizontal" ? "row" : "column",
+			justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center",
+			alignItems: verticalAlign === "top" ? "flex-start" : verticalAlign === "bottom" ? "flex-end" : "center",
+			flexWrap: "wrap",
+			gap: "8px",
+			...props.wrapperStyle || {}
+		};
+	};
+	const getContentStyle = (layout = "horizontal") => {
+		return {
+			display: "flex",
+			flexDirection: layout === "horizontal" ? "row" : "column",
+			gap: layout === "horizontal" ? "16px" : "8px",
+			...props.contentStyle || {}
+		};
+	};
+	const getItemStyle = (layout = "horizontal") => {
+		return {
+			display: layout === "horizontal" ? "inline-block" : "block",
+			marginRight: "10px"
+		};
+	};
+	const getViewBox = () => {
+		return {
+			x: 0,
+			y: 0,
+			width: 32,
+			height: 32
+		};
+	};
+	const getSvgStyle = () => {
+		return {
+			display: "inline-block",
+			verticalAlign: "middle",
+			marginRight: "4px"
+		};
+	};
+	const formatValue = (entry) => {
+		return props.formatter ? props.formatter(entry.value, entry) : entry.value;
+	};
+	const handleClick = (entry, index) => {
+		props.onClick?.(entry, index);
+	};
+	const handleMouseEnter = (entry, index) => {
+		props.onMouseEnter?.(entry, index);
+	};
+	const handleMouseLeave = (entry, index) => {
+		props.onMouseLeave?.(entry, index);
+	};
+	return {
+		getWrapperStyle,
+		getContentStyle,
+		getItemStyle,
+		getViewBox,
+		getSvgStyle,
+		formatValue,
+		handleClick,
+		handleMouseEnter,
+		handleMouseLeave
+	};
+}
+//#endregion
+export { useLegendContent };

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

@@ -0,0 +1,41 @@
+//#region src/components/legend/type.ts
+var LegendVueProps = {
+	layout: {
+		type: String,
+		default: "horizontal"
+	},
+	align: {
+		type: String,
+		default: "center"
+	},
+	verticalAlign: {
+		type: String,
+		default: "bottom"
+	},
+	width: Number,
+	height: Number,
+	iconSize: {
+		type: Number,
+		default: 14
+	},
+	iconType: String,
+	wrapperStyle: Object,
+	contentStyle: Object,
+	itemStyle: Object,
+	formatter: Function,
+	onClick: Function,
+	onMouseEnter: Function,
+	onMouseLeave: Function,
+	margin: Object,
+	chartWidth: Number,
+	chartHeight: Number,
+	payloadUniqBy: [Boolean, Function],
+	itemSorter: {
+		type: [String, Function],
+		default: "value"
+	},
+	portal: Object,
+	onBBoxUpdate: Function
+};
+//#endregion
+export { LegendVueProps };