vccs 0.5.0 → 1.0.0-beta.1

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

@@ -12,9 +12,11 @@ var LabelListVueProps = {
 	clockWise: { type: Boolean },
 	dataKey: { type: [String, Function] },
 	textBreakAll: { type: Boolean },
-	position: { type: String },
+	position: { type: [String, Object] },
 	offset: { type: Number },
-	angle: { type: Number }
+	angle: { type: Number },
+	/** Writes the label text. Receives the raw value, which can be `null` or an object in messy data. */
+	formatter: { type: Function }
 };
 var LabelVueProps = {
 	id: { type: String },
@@ -23,7 +25,6 @@ var LabelVueProps = {
 		default: ""
 	},
 	viewBox: { type: Object },
-	parentViewBox: { type: Object },
 	value: { type: [Number, String] },
 	formatter: { type: Function },
 	offset: {
@@ -32,8 +33,12 @@ var LabelVueProps = {
 	},
 	position: { type: [String, Object] },
 	textBreakAll: { type: Boolean },
-	angle: { type: Number },
+	angle: { type: Number }
+};
+var LabelViewVueProps = {
+	...LabelVueProps,
+	parentViewBox: { type: Object },
 	index: { type: Number }
 };
 //#endregion
-export { LabelListVueProps, LabelVueProps };
+export { LabelListVueProps, LabelViewVueProps, LabelVueProps };

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

@@ -1,6 +1,6 @@
 import { isNumber, isPercent } from "../../utils/validate.mjs";
-import { uniqueId } from "../../utils/data-utils.mjs";
 import { getPercentValue, mathSign } from "../../utils/data.mjs";
+import { polarToCartesian } from "../../utils/polar.mjs";
 import { createVNode, mergeProps } from "vue";
 //#region src/components/label/utils.tsx
 function parseViewBox(props) {
@@ -37,20 +37,36 @@ function parseViewBox(props) {
 	};
 	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) {
+/** A label's box with every field set: missing sizes and angles are 0. */
+/**
+* Fills the fields a caller's `viewBox` leaves out, once, so position math never reads
+* `undefined` and renders NaN. A box with a numeric `cx` is polar.
+*/
+function normalizeViewBox(viewBox) {
+	if ("cx" in viewBox && isNumber(viewBox.cx)) return {
+		cx: viewBox.cx,
+		cy: viewBox.cy ?? 0,
+		innerRadius: viewBox.innerRadius ?? 0,
+		outerRadius: viewBox.outerRadius ?? 0,
+		startAngle: viewBox.startAngle ?? 0,
+		endAngle: viewBox.endAngle ?? 0,
+		clockWise: viewBox.clockWise ?? false
+	};
+	const box = viewBox;
 	return {
-		x: cx + Math.cos(-RADIAN * angle) * radius,
-		y: cy + Math.sin(-RADIAN * angle) * radius
+		x: box.x ?? 0,
+		y: box.y ?? 0,
+		width: box.width ?? 0,
+		height: box.height ?? 0
 	};
 }
+function isPolar(viewBox) {
+	return "cx" in viewBox;
+}
 function getDeltaAngle(startAngle, endAngle) {
 	return mathSign(endAngle - startAngle) * Math.min(Math.abs(endAngle - startAngle), 360);
 }
-function renderRadialLabel(labelProps, position, label, attrs, viewBox) {
+function renderRadialLabel(labelProps, position, label, attrs, viewBox, generatedId) {
 	const { offset = 5, class: className, id: labelId } = labelProps;
 	const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, clockWise } = viewBox;
 	const radius = (innerRadius + outerRadius) / 2;
@@ -77,8 +93,8 @@ function renderRadialLabel(labelProps, position, label, attrs, viewBox) {
 	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, {
+	const id = labelId ?? generatedId;
+	return createVNode("text", mergeProps({ "data-slot": "label" }, attrs, {
 		"dominant-baseline": "central",
 		"class": ["v-charts-radial-bar-label", className]
 	}), [createVNode("defs", null, [createVNode("path", {
@@ -87,8 +103,8 @@ function renderRadialLabel(labelProps, position, label, attrs, viewBox) {
 	}, 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 { offset = 5, position } = props;
+	const { cx, cy, innerRadius, outerRadius, startAngle, endAngle } = viewBox;
 	const midAngle = (startAngle + endAngle) / 2;
 	if (position === "outside") {
 		const { x, y } = polarToCartesian(cx, cy, outerRadius + offset, midAngle);
@@ -117,7 +133,8 @@ function getAttrsOfPolarLabel(props, viewBox) {
 		textAnchor: "middle",
 		verticalAnchor: "end"
 	};
-	const { x, y } = polarToCartesian(cx, cy, (innerRadius + outerRadius) / 2, midAngle);
+	const r = (innerRadius + outerRadius) / 2;
+	const { x, y } = polarToCartesian(cx, cy, r, midAngle);
 	return {
 		x,
 		y,
@@ -126,7 +143,9 @@ function getAttrsOfPolarLabel(props, viewBox) {
 	};
 }
 function getAttrsOfCartesianLabel(props, viewBox) {
-	const { parentViewBox, offset, position } = props;
+	const { offset = 5, position } = props;
+	const parent = props.parentViewBox && normalizeViewBox(props.parentViewBox);
+	const parentViewBox = parent && !isPolar(parent) ? parent : void 0;
 	const { x, y, width, height } = viewBox;
 	const verticalSign = height >= 0 ? 1 : -1;
 	const verticalOffset = verticalSign * offset;
@@ -246,9 +265,10 @@ function getAttrsOfCartesianLabel(props, viewBox) {
 		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),
+	const at = typeof position === "object" ? position : void 0;
+	if (at?.x != null && at.y != null && (isNumber(at.x) || isPercent(at.x)) && (isNumber(at.y) || isPercent(at.y))) return {
+		x: x + getPercentValue(at.x, width),
+		y: y + getPercentValue(at.y, height),
 		textAnchor: "end",
 		verticalAnchor: "end",
 		...sizeAttrs
@@ -262,4 +282,4 @@ function getAttrsOfCartesianLabel(props, viewBox) {
 	};
 }
 //#endregion
-export { getAttrsOfCartesianLabel, getAttrsOfPolarLabel, isPolar, parseViewBox, renderRadialLabel };
+export { getAttrsOfCartesianLabel, getAttrsOfPolarLabel, isPolar, normalizeViewBox, parseViewBox, renderRadialLabel };

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

@@ -1,52 +1,83 @@
+import { useChart } from "../../model/chart.mjs";
+import { useLayerTeleport } from "../../hooks/useLayerTeleport.mjs";
+import { useDeferredView } from "../../hooks/deferredView.mjs";
 import Surface from "../../container/Surface.mjs";
 import { LegendVueProps } from "./type.mjs";
+import { isOutsidePosition } from "../../cartesian/getCartesianPosition.mjs";
+import { getLayoutForPosition } from "./utils.mjs";
 import { useLegend } from "./hooks/useLegend.mjs";
 import { useLegendContent } from "./hooks/useLegendContent.mjs";
 import { LegendSymbol } from "./LegendSymbol.mjs";
-import { Teleport, createVNode, defineComponent, isVNode, watchEffect } from "vue";
+import { computed, createVNode, defineComponent, h, shallowRef, watch } 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();
-		});
+var legendItemEvent = (_entry, _index, _event) => true;
+var legendEmits = {
+	"update:hidden": (_hidden) => true,
+	"click": legendItemEvent,
+	"mouseenter": legendItemEvent,
+	"mouseleave": legendItemEvent,
+	"bbox-update": (_box) => true
+};
+var LegendView = /* @__PURE__ */ defineComponent({
+	name: "LegendView",
+	emits: legendEmits,
+	inheritAttrs: false,
+	props: {
+		item: {
+			type: Object,
+			required: true
+		},
+		svgAttrs: {
+			type: Object,
+			required: true
+		}
+	},
+	setup(view, { slots, emit }) {
+		const teleport = useLayerTeleport();
+		const props = view.item;
+		view.svgAttrs;
+		const { legendRef, processedPayload, outerStyle, legendPortal, resolvedLayout, positionViewBox, boundingBox } = useLegend(props);
+		const { getItemStyle, getSvgStyle, formatValue } = useLegendContent(props);
+		watch(boundingBox, (box) => emit("bbox-update", box), { immediate: true });
+		const activateItem = (entry, index, event) => {
+			if (props.hidden !== void 0 && entry.dataKey !== void 0) {
+				const key = String(entry.dataKey);
+				emit("update:hidden", props.hidden.includes(key) ? props.hidden.filter((item) => item !== key) : [...props.hidden, key]);
+			}
+			emit("click", entry, index, event);
+		};
 		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"
-			};
+			const { align = "center", iconSize = 14 } = props;
+			const layout = resolvedLayout.value;
 			return createVNode("ul", {
 				"class": "v-charts-default-legend",
-				"style": finalStyle
+				"style": {
+					padding: "0px",
+					margin: "0px",
+					textAlign: layout === "horizontal" ? align : "left"
+				}
 			}, [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",
+					"onMouseenter": (event) => emit("mouseenter", entry, index, event),
+					"onMouseleave": (event) => emit("mouseleave", entry, index, event)
+				}, [createVNode("button", {
+					"type": "button",
 					"aria-label": `Toggle ${formatValue(entry)} series`,
-					"onClick": () => handleClick(entry, index),
-					"onKeydown": (e) => {
-						if (e.key === "Enter" || e.key === " ") {
-							e.preventDefault();
-							handleClick(entry, index);
-						}
+					"aria-pressed": !entry.inactive,
+					"style": {
+						padding: 0,
+						border: 0,
+						background: "none",
+						font: "inherit",
+						color: "var(--v-charts-text, #666)",
+						cursor: "pointer"
 					},
-					"onMouseenter": () => handleMouseEnter(entry, index),
-					"onMouseleave": () => handleMouseLeave(entry, index)
+					"onClick": (event) => activateItem(entry, index, event)
 				}, [createVNode(Surface, {
 					"width": iconSize,
 					"height": iconSize,
@@ -60,34 +91,70 @@ var Legend_default = /* @__PURE__ */ defineComponent({
 					"aria-label": `${formatValue(entry)} legend icon`
 				}, { default: () => [createVNode(LegendSymbol, {
 					"type": props.iconType ?? entry.type,
-					"color": entry.inactive ? "#a3a3a3" : entry.color,
+					"color": entry.inactive ? "var(--v-charts-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)])]);
+					"style": { color: "var(--v-charts-text, #666)" }
+				}, [formatValue(entry)])])]);
 			})]);
 		};
 		const renderContent = () => {
 			if (!processedPayload.value || processedPayload.value.length === 0) return null;
 			const contentProps = {
 				...props,
+				layout: resolvedLayout.value,
 				payload: processedPayload.value
 			};
 			if (slots.content) return slots.content(contentProps);
 			return renderDefaultContent();
 		};
 		return () => {
-			if (legendPortal.value == null) return null;
+			if (props.position != null && positionViewBox.value == null) return null;
 			const legendElement = createVNode("div", {
+				"data-slot": "legend",
 				"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] })]);
+			return createVNode("foreignObject", null, [teleport(legendElement, legendPortal)]);
 		};
 	}
 });
+var Legend = /* @__PURE__ */ defineComponent({
+	name: "Legend",
+	inheritAttrs: false,
+	emits: legendEmits,
+	slots: Object,
+	props: LegendVueProps,
+	setup(props, { attrs, slots, emit }) {
+		const measuredSize = shallowRef();
+		useChart().legend.register(computed(() => ({
+			hidden: props.hidden,
+			size: props.to == null && (props.position == null || isOutsidePosition(props.position)) ? measuredSize.value : void 0,
+			settings: {
+				layout: props.layout && props.layout !== "auto" ? props.layout : getLayoutForPosition(props.position),
+				align: props.align,
+				verticalAlign: props.verticalAlign,
+				position: props.position,
+				offset: props.offset
+			}
+		})));
+		const View = useDeferredView(LegendView);
+		return () => h(View, {
+			"item": props,
+			"svgAttrs": attrs,
+			"onUpdate:hidden": (hidden) => emit("update:hidden", hidden),
+			"onClick": (entry, index, event) => emit("click", entry, index, event),
+			"onMouseenter": (entry, index, event) => emit("mouseenter", entry, index, event),
+			"onMouseleave": (entry, index, event) => emit("mouseleave", entry, index, event),
+			"onBbox-update": (box) => {
+				measuredSize.value = box ?? void 0;
+				emit("bbox-update", box);
+			}
+		}, slots);
+	}
+});
 //#endregion
-export { Legend_default as default };
+export { Legend as default };

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

@@ -15,7 +15,7 @@ var LegendSymbol = /* @__PURE__ */ defineComponent({
 		return () => {
 			const { type, color, data } = props;
 			if (type === "none") return null;
-			const halfSize = 32 / 2;
+			const halfSize = 16;
 			const thirdSize = 32 / 3;
 			const sixthSize = 32 / 6;
 			switch (type) {
@@ -43,7 +43,7 @@ var LegendSymbol = /* @__PURE__ */ defineComponent({
 				case "rect": return createVNode("path", {
 					"stroke": "none",
 					"fill": color,
-					"d": `M0,${32 / 8}h32v${96 / 4}h-32z`,
+					"d": `M0,4h32v24h-32z`,
 					"class": "v-charts-legend-icon"
 				}, null);
 				default: return createVNode(Symbols, {

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

@@ -1,29 +1,39 @@
-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 { useChartPresentation } from "../../../model/presentation.mjs";
+import { useChart } from "../../../model/chart.mjs";
+import { useCanMeasureText, useChartLayer } from "../../../model/runtime.mjs";
+import { toPx } from "../../../utils/style.mjs";
 import { getUniqPayload } from "../../../utils/payload/getUniqPayload.mjs";
-import { defaultUniqBy, getDefaultPosition, getWidthOrHeight } from "../utils.mjs";
+import { getCartesianPosition, isOutsidePosition } from "../../../cartesian/getCartesianPosition.mjs";
+import { cartesianPositionToCSSTranslate } from "../../../cartesian/cartesianPositionToCSSTranslate.mjs";
+import { defaultUniqBy, getDefaultPosition, getLayoutForPosition, getOutsidePositionOffset, 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 chart = useChart();
+	const canMeasureText = useCanMeasureText();
+	const contextPayload = chart.legend.payload;
+	const legendPortalFromContext = useChartLayer("portal");
+	const margin = useChartPresentation().margin;
+	const chartWidth = useChartPresentation().width;
+	const chartHeight = useChartPresentation().height;
+	const viewBox = useChartPresentation().viewBox;
+	const legendArea = chart.legendArea;
 	const legendRef = ref();
-	const { width: boundingWidth, height: boundingHeight } = useElementBounding(legendRef);
+	const measuredLegendRef = computed(() => canMeasureText.value ? legendRef.value : void 0);
+	const { width: boundingWidth, height: boundingHeight } = useElementBounding(measuredLegendRef);
+	const resolvedLayout = computed(() => props.layout && props.layout !== "auto" ? props.layout : getLayoutForPosition(props.position));
 	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 widthOrHeight = computed(() => getWidthOrHeight(resolvedLayout.value, props.height, props.width, maxWidth.value));
 	const boundingBox = computed(() => ({
-		width: boundingWidth.value,
-		height: boundingHeight.value
+		width: canMeasureText.value ? boundingWidth.value : 0,
+		height: canMeasureText.value ? boundingHeight.value : 0
 	}));
+	const positionViewBox = computed(() => {
+		if (props.position == null) return null;
+		return isOutsidePosition(props.position) ? legendArea.value : viewBox.value;
+	});
 	const processedPayload = computed(() => {
 		if (!contextPayload.value || contextPayload.value.length === 0) return [];
 		let finalPayload = getUniqPayload(contextPayload.value, props.payloadUniqBy, defaultUniqBy);
@@ -33,44 +43,54 @@ function useLegend(props) {
 		}
 		return Array.from(finalPayload);
 	});
-	const outerStyle = computed(() => {
-		const userStyle = props.wrapperStyle ? { ...props.wrapperStyle } : {};
-		if (props.portal) return userStyle;
-		const baseStyle = {
-			position: "absolute",
-			width: widthOrHeight.value?.width ? `${widthOrHeight.value.width}px` : props.width ? `${props.width}px` : "auto",
-			height: widthOrHeight.value?.height ? `${widthOrHeight.value.height}px` : props.height ? `${props.height}px` : "auto"
-		};
-		const positionStyle = getDefaultPosition(userStyle, props, margin.value, chartWidth.value, chartHeight.value, boundingBox.value);
+	const positionStyle = computed(() => {
+		if (props.position == null || positionViewBox.value == null) return;
+		const positionResult = getCartesianPosition({
+			viewBox: positionViewBox.value,
+			position: props.position,
+			offset: props.offset ?? 0
+		});
+		const outsidePositionOffset = getOutsidePositionOffset(props.position, props.offset ?? 0, boundingBox.value);
+		const positionMaxWidth = resolvedLayout.value === "vertical" ? (positionViewBox.value.width ?? 0) / 2 : positionViewBox.value.width ?? 0;
+		const positionMaxHeight = resolvedLayout.value === "horizontal" ? (positionViewBox.value.height ?? 0) / 2 : positionViewBox.value.height ?? 0;
 		return {
-			...baseStyle,
-			...positionStyle,
-			...userStyle
+			width: "max-content",
+			height: "max-content",
+			maxWidth: `${positionMaxWidth}px`,
+			maxHeight: `${positionMaxHeight}px`,
+			overflowY: "auto",
+			top: `${positionResult.y + (outsidePositionOffset.top ?? 0)}px`,
+			left: `${positionResult.x + (outsidePositionOffset.left ?? 0)}px`,
+			transform: cartesianPositionToCSSTranslate(positionResult.horizontalAnchor, positionResult.verticalAnchor)
 		};
 	});
-	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
+		outerStyle: computed(() => {
+			const userStyle = props.wrapperStyle ? { ...props.wrapperStyle } : {};
+			if (props.to) return userStyle;
+			const baseStyle = {
+				position: "absolute",
+				width: toPx(widthOrHeight.value?.width || props.width || "auto"),
+				height: toPx(widthOrHeight.value?.height || props.height || "auto")
+			};
+			const calculatedPositionStyle = positionStyle.value ?? getDefaultPosition(userStyle, {
+				layout: resolvedLayout.value,
+				align: props.align,
+				verticalAlign: props.verticalAlign
+			}, margin.value, chartWidth.value, chartHeight.value, boundingBox.value);
+			return {
+				...baseStyle,
+				...calculatedPositionStyle,
+				...userStyle
+			};
+		}),
+		legendPortal: computed(() => props.to ?? legendPortalFromContext?.value),
+		resolvedLayout,
+		positionViewBox
 	};
 }
 //#endregion

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

@@ -43,25 +43,13 @@ function useLegendContent(props) {
 	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
+		formatValue
 	};
 }
 //#endregion

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

@@ -1,8 +1,9 @@
 //#region src/components/legend/type.ts
 var LegendVueProps = {
+	hidden: Array,
 	layout: {
 		type: String,
-		default: "horizontal"
+		default: "auto"
 	},
 	align: {
 		type: String,
@@ -12,6 +13,21 @@ var LegendVueProps = {
 		type: String,
 		default: "bottom"
 	},
+	/**
+	* The position of the legend relative to the chart.
+	* If this is defined, it overrides `align` and `verticalAlign`.
+	*/
+	position: {
+		type: [String, Object],
+		default: void 0
+	},
+	/**
+	* The offset to the specified `position`. Direction of the offset depends on the position.
+	*/
+	offset: {
+		type: Number,
+		default: 0
+	},
 	width: Number,
 	height: Number,
 	iconSize: {
@@ -23,19 +39,13 @@ var LegendVueProps = {
 	contentStyle: Object,
 	itemStyle: Object,
 	formatter: Function,
-	onClick: Function,
-	onMouseEnter: Function,
-	onMouseLeave: Function,
-	margin: Object,
-	chartWidth: Number,
-	chartHeight: Number,
 	payloadUniqBy: [Boolean, Function],
+	/** Sort entries. By default they keep the order of the data (Pie) or of the series. */
 	itemSorter: {
 		type: [String, Function],
-		default: "value"
+		default: void 0
 	},
-	portal: Object,
-	onBBoxUpdate: Function
+	to: [String, Object]
 };
 //#endregion
 export { LegendVueProps };

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

@@ -1,13 +1,28 @@
 import { isNumber } from "../../utils/validate.mjs";
 //#region src/components/legend/utils.ts
+function getLayoutForPosition(position) {
+	if (position === "left" || position === "right" || position === "insideLeft" || position === "insideRight") return "vertical";
+	return "horizontal";
+}
+function getOutsidePositionOffset(position, offset, box) {
+	if (position === "top") return { top: box.height + offset };
+	if (position === "bottom") return { top: -box.height - offset };
+	if (position === "left") return { left: box.width + offset };
+	if (position === "right") return { left: -box.width - offset };
+	return {};
+}
 function getDefaultPosition(style, props, margin, chartWidth, chartHeight, box) {
 	const { layout, align, verticalAlign } = props;
 	let hPos = {};
 	let vPos = {};
-	if (!style || (style.left === void 0 || style.left === null) && (style.right === void 0 || style.right === null)) if (align === "center" && layout === "vertical") hPos = { left: `${((chartWidth || 0) - box.width) / 2}px` };
-	else hPos = align === "right" ? { right: `${margin?.right || 0}px` } : { left: `${margin?.left || 0}px` };
-	if (!style || (style.top === void 0 || style.top === null) && (style.bottom === void 0 || style.bottom === null)) if (verticalAlign === "middle") vPos = { top: `${((chartHeight || 0) - box.height) / 2}px` };
-	else vPos = verticalAlign === "bottom" ? { bottom: `${margin?.bottom || 0}px` } : { top: `${margin?.top || 0}px` };
+	if (!style || (style.left === void 0 || style.left === null) && (style.right === void 0 || style.right === null)) {
+		if (align === "center" && layout === "vertical") hPos = { left: `${((chartWidth || 0) - box.width) / 2}px` };
+		else hPos = align === "right" ? { right: `${margin?.right || 0}px` } : { left: `${margin?.left || 0}px` };
+	}
+	if (!style || (style.top === void 0 || style.top === null) && (style.bottom === void 0 || style.bottom === null)) {
+		if (verticalAlign === "middle") vPos = { top: `${((chartHeight || 0) - box.height) / 2}px` };
+		else vPos = verticalAlign === "bottom" ? { bottom: `${margin?.bottom || 0}px` } : { top: `${margin?.top || 0}px` };
+	}
 	return {
 		...hPos,
 		...vPos
@@ -22,4 +37,4 @@ function defaultUniqBy(entry) {
 	return entry.value;
 }
 //#endregion
-export { defaultUniqBy, getDefaultPosition, getWidthOrHeight };
+export { defaultUniqBy, getDefaultPosition, getLayoutForPosition, getOutsidePositionOffset, getWidthOrHeight };