vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/shape/Sector.mjs

@@ -1,6 +1,7 @@
-import { classProp } from "../types/common.mjs";
 import { getPercentValue, mathSign } from "../utils/data.mjs";
 import { RADIAN, polarToCartesian } from "../utils/polar.mjs";
+import { classProp } from "../types/common.mjs";
+import { svgAttrs } from "../utils/VueUtils.mjs";
 import { createVNode, defineComponent, mergeProps } from "vue";
 //#region src/shape/Sector.tsx
 /**
@@ -45,6 +46,7 @@ var SectorVueProps = {
 	},
 	class: classProp
 };
+/** Resolved sector geometry, also used for the RadialBar background. */
 function getDeltaAngle(startAngle, endAngle) {
 	return mathSign(endAngle - startAngle) * Math.min(Math.abs(endAngle - startAngle), 359.999);
 }
@@ -134,16 +136,17 @@ function getSectorWithCorner(cx, cy, innerRadius, outerRadius, cornerRadius, for
 var Sector = /* @__PURE__ */ defineComponent({
 	name: "Sector",
 	props: SectorVueProps,
+	inheritAttrs: false,
 	setup(props, { attrs }) {
 		return () => {
 			const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, cornerRadius, forceCornerRadius, cornerIsExternal } = props;
-			if (outerRadius <= 0 || outerRadius < innerRadius || startAngle === endAngle) return null;
+			if (cx == null || cy == null || innerRadius == null || outerRadius == null || startAngle == null || endAngle == null || cornerRadius == null || outerRadius <= 0 || outerRadius < innerRadius || startAngle === endAngle) return null;
 			const deltaRadius = outerRadius - innerRadius;
 			const cr = getPercentValue(cornerRadius, deltaRadius, 0, true);
 			let path;
-			if (cr > 0 && Math.abs(startAngle - endAngle) < 360) path = getSectorWithCorner(cx, cy, innerRadius, outerRadius, Math.min(cr, deltaRadius / 2), forceCornerRadius, cornerIsExternal, startAngle, endAngle);
+			if (cr > 0 && Math.abs(startAngle - endAngle) < 360) path = getSectorWithCorner(cx, cy, innerRadius, outerRadius, Math.min(cr, deltaRadius / 2), forceCornerRadius ?? false, cornerIsExternal ?? false, startAngle, endAngle);
 			else path = getSectorPath(cx, cy, innerRadius, outerRadius, startAngle, endAngle);
-			return createVNode("path", mergeProps(attrs, {
+			return createVNode("path", mergeProps(svgAttrs(attrs), {
 				"class": ["v-charts-sector", props.class],
 				"d": path
 			}), null);

package/dist/es/shape/Symbols.mjs

@@ -1,7 +1,8 @@
 import { isNumber } from "../utils/validate.mjs";
+import { svgAttrs } from "../utils/VueUtils.mjs";
 import { createVNode, mergeProps } from "vue";
-import { symbol, symbolCircle, symbolCross, symbolDiamond, symbolSquare, symbolStar, symbolTriangle, symbolWye } from "victory-vendor/d3-shape";
 import { upperFirst } from "es-toolkit/compat";
+import { symbol, symbolCircle, symbolCross, symbolDiamond, symbolSquare, symbolStar, symbolTriangle, symbolWye } from "d3-shape";
 //#region src/shape/Symbols.tsx
 var symbolFactories = {
 	symbolCircle,
@@ -13,10 +14,10 @@ var symbolFactories = {
 	symbolWye
 };
 var RADIAN = Math.PI / 180;
-var getSymbolFactory = (type) => {
+function getSymbolFactory(type) {
 	return symbolFactories[`symbol${upperFirst(type)}`] || symbolCircle;
-};
-var calculateAreaSize = (size, sizeType, type) => {
+}
+function calculateAreaSize(size, sizeType, type) {
 	if (sizeType === "area") return size;
 	switch (type) {
 		case "cross": return 5 * size * size / 9;
@@ -30,18 +31,22 @@ var calculateAreaSize = (size, sizeType, type) => {
 		case "wye": return (21 - 10 * Math.sqrt(3)) * size * size / 8;
 		default: return Math.PI * size * size / 4;
 	}
-};
+}
+var pathCache = /* @__PURE__ */ new Map();
 function Symbols(props) {
 	const { type = "circle", size = 64, sizeType = "area", cx, cy, class: className, ...rest } = props;
 	let realType = "circle";
 	if (typeof type === "string") realType = type;
 	const getPath = () => {
+		const cacheKey = `${realType}|${sizeType}|${size}`;
+		if (pathCache.has(cacheKey)) return pathCache.get(cacheKey);
 		const symbolFactory = getSymbolFactory(realType);
-		const s = symbol().type(symbolFactory).size(calculateAreaSize(size, sizeType, realType))();
-		if (s === null) return;
+		const s = symbol().type(symbolFactory).size(calculateAreaSize(size, sizeType, realType))() ?? void 0;
+		if (pathCache.size > 500) pathCache.clear();
+		pathCache.set(cacheKey, s);
 		return s;
 	};
-	if (isNumber(cx) && isNumber(cy) && isNumber(size)) return createVNode("path", mergeProps(rest, {
+	if (isNumber(cx) && isNumber(cy) && isNumber(size)) return createVNode("path", mergeProps(svgAttrs(rest), {
 		"class": ["v-charts-symbols", className].filter(Boolean).join(" "),
 		"transform": `translate(${cx}, ${cy})`,
 		"d": getPath()

package/dist/es/shape/Trapezoid.mjs

@@ -1,4 +1,5 @@
 import { classProp } from "../types/common.mjs";
+import { svgAttrs } from "../utils/VueUtils.mjs";
 import { createVNode, defineComponent, mergeProps } from "vue";
 //#region src/shape/Trapezoid.tsx
 var TrapezoidVueProps = {
@@ -35,11 +36,12 @@ function getTrapezoidPath(x, y, upperWidth, lowerWidth, height) {
 var Trapezoid = /* @__PURE__ */ defineComponent({
 	name: "Trapezoid",
 	props: TrapezoidVueProps,
+	inheritAttrs: false,
 	setup(props, { attrs }) {
 		return () => {
 			const { x, y, upperWidth, lowerWidth, height } = props;
 			if (x !== +x || y !== +y || upperWidth !== +upperWidth || lowerWidth !== +lowerWidth || height !== +height || height === 0) return null;
-			return createVNode("path", mergeProps(attrs, {
+			return createVNode("path", mergeProps(svgAttrs(attrs), {
 				"class": ["v-charts-trapezoid", props.class],
 				"d": getTrapezoidPath(x, y, upperWidth, lowerWidth, height)
 			}), null);

package/dist/es/typed.mjs

@@ -0,0 +1,9 @@
+//#region src/typed.ts
+/** Select runtime components while giving their keys and item payloads a row type. */
+function defineChartComponents() {
+	return function selectComponents(components) {
+		return components;
+	};
+}
+//#endregion
+export { defineChartComponents };

package/dist/es/types/base.mjs

@@ -0,0 +1,6 @@
+//#region src/types/base.ts
+function isPolarCoordinate(coordinate) {
+	return "cx" in coordinate && "angle" in coordinate;
+}
+//#endregion
+export { isPolarCoordinate };

package/dist/es/utils/ReduceCSSCalc.mjs

@@ -8,9 +8,9 @@ var CONVERSION_RATES = {
 	cm: 96 / 2.54,
 	mm: 96 / 25.4,
 	pt: 96 / 72,
-	pc: 96 / 6,
+	pc: 16,
 	in: 96,
-	Q: 96 / (2.54 * 40),
+	Q: 96 / 101.6,
 	px: 1
 };
 var FIXED_CSS_LENGTH_UNITS = Object.keys(CONVERSION_RATES);

package/dist/es/utils/VueUtils.mjs

@@ -1,6 +1,8 @@
 import { EventKeys } from "../types/event.mjs";
-import { FilteredElementKeyMap, SVGElementPropKeys } from "../cartesian/cartesian-grid/const.mjs";
+import { FilteredElementKeyMap, SVGElementPropKeys } from "./svg.mjs";
 //#region src/utils/VueUtils.ts
+var svgKeys = new Set(SVGElementPropKeys);
+var eventKeys = new Set(EventKeys);
 /**
 * Checks if the property is valid to spread onto an SVG element or onto a specific component
 * @param {unknown} property property value currently being compared
@@ -16,7 +18,7 @@ function isValidSpreadableProp(property, key, includeEvents, svgElementType) {
 	* @todo Add an internal cjs version of https://github.com/wooorm/svg-element-attributes for full coverage.
 	*/
 	const matchingElementTypeKeys = (svgElementType && FilteredElementKeyMap?.[svgElementType]) ?? [];
-	return key.startsWith("data-") || typeof property !== "function" && (svgElementType && matchingElementTypeKeys.includes(key) || SVGElementPropKeys.includes(key)) || includeEvents && EventKeys.includes(key);
+	return key.startsWith("data-") || typeof property !== "function" && (svgElementType && matchingElementTypeKeys.includes(key) || svgKeys.has(key)) || includeEvents && eventKeys.has(key);
 }
 function filterProps(props, includeEvents, svgElementType) {
 	if (!props || typeof props === "function" || typeof props === "boolean") return null;
@@ -35,5 +37,89 @@ function filterProps(props, includeEvents, svgElementType) {
 	});
 	return out;
 }
+var mixedCaseAttributes = /* @__PURE__ */ new Set([
+	"viewBox",
+	"preserveAspectRatio",
+	"gradientUnits",
+	"gradientTransform",
+	"patternUnits",
+	"patternContentUnits",
+	"patternTransform",
+	"clipPathUnits",
+	"markerWidth",
+	"markerHeight",
+	"markerUnits",
+	"refX",
+	"refY",
+	"textLength",
+	"lengthAdjust",
+	"startOffset",
+	"spreadMethod",
+	"stdDeviation",
+	"baseFrequency",
+	"numOctaves",
+	"tableValues",
+	"kernelMatrix",
+	"kernelUnitLength",
+	"pathLength",
+	"maskUnits",
+	"maskContentUnits",
+	"filterUnits",
+	"primitiveUnits",
+	"xChannelSelector",
+	"yChannelSelector",
+	"stitchTiles",
+	"surfaceScale",
+	"specularExponent",
+	"specularConstant",
+	"diffuseConstant",
+	"pointsAtX",
+	"pointsAtY",
+	"pointsAtZ",
+	"limitingConeAngle",
+	"edgeMode",
+	"targetX",
+	"targetY",
+	"repeatCount",
+	"repeatDur",
+	"calcMode",
+	"keyTimes",
+	"keySplines",
+	"keyPoints",
+	"attributeName",
+	"attributeType",
+	"systemLanguage",
+	"requiredExtensions"
+]);
+var keyKinds = /* @__PURE__ */ new Map();
+function kindOf(key) {
+	let kind = keyKinds.get(key);
+	if (kind === void 0) {
+		const name = mixedCaseAttributes.has(key) ? key : key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+		kind = /^on[A-Z]/.test(key) ? "listener" : key === "class" || key === "style" || key === "points" || key.startsWith("data-") || key.startsWith("aria-") ? "keep" : svgKeys.has(key) || svgKeys.has(name) || svgKeys.has(key.replace(/-([a-z])/g, (_, c) => c.toUpperCase())) || key === "transform" ? { name } : "drop";
+		keyKinds.set(key, kind);
+	}
+	return kind;
+}
+/**
+* The attributes of `source` that belong on an SVG element, under their SVG names. Chart data
+* passed along as props (payload, dataKey, tooltipPosition…) never reaches the DOM.
+* Vue listeners (onClick, onMouseenter) are kept.
+*/
+function svgAttrs(source) {
+	const out = {};
+	if (!source) return out;
+	for (const key in source) {
+		const value = source[key];
+		if (value === void 0) continue;
+		const kind = kindOf(key);
+		if (kind === "drop") continue;
+		if (kind === "listener") {
+			if (typeof value === "function" || Array.isArray(value)) out[key] = value;
+		} else if (kind === "keep") out[key] = value;
+		else if (typeof value !== "function" && typeof value !== "object") out[kind.name] = value;
+	}
+	return out;
+}
 //#endregion
-export { filterProps };
+export { filterProps, svgAttrs };

package/dist/es/utils/attributes.mjs

@@ -0,0 +1,18 @@
+//#region src/utils/attributes.ts
+/**
+* Marks a component that forwards undeclared attributes (`stroke-dasharray`, `data-*`,
+* `aria-*`) to its root SVG element, so strict templates (`strictTemplates`) accept them.
+* Runtime behaviour is unchanged: Vue already forwards these attributes. `@__NO_SIDE_EFFECTS__`
+* tells bundlers that a call can be dropped, so an unused wrapped component is tree-shaken.
+*/
+/* @__NO_SIDE_EFFECTS__ */
+function forwardsSvgAttributes(component) {
+	return component;
+}
+/** Like `forwardsSvgAttributes`, for components whose root is an HTML element. */
+/* @__NO_SIDE_EFFECTS__ */
+function forwardsHtmlAttributes(component) {
+	return component;
+}
+//#endregion
+export { forwardsHtmlAttributes, forwardsSvgAttributes };

package/dist/es/utils/attrs.mjs

@@ -1,16 +1,15 @@
-import { Global } from "./Global.mjs";
+import { isServer } from "./env.mjs";
 //#region src/utils/attrs.ts
-var stringCache = {
-	widthCache: {},
-	cacheCount: 0
-};
-var MAX_CACHE_NUM = 2e3;
+var MAX_CACHE_NUM = 2e4;
+var sizeCache = /* @__PURE__ */ new Map();
+var styleKeys = /* @__PURE__ */ new WeakMap();
+var appliedStyleKey;
 var SPAN_STYLE = {
 	position: "absolute",
 	top: "-20000px",
-	left: 0,
-	padding: 0,
-	margin: 0,
+	left: "0px",
+	padding: "0px",
+	margin: "0px",
 	border: "none",
 	whiteSpace: "pre"
 };
@@ -22,17 +21,23 @@ function removeInvalidKeys(obj) {
 	});
 	return copyObj;
 }
-function getStringSize(text, style = {}) {
-	if (text === void 0 || text === null || Global.isSsr) return {
+function styleKeyOf(style) {
+	let key = styleKeys.get(style);
+	if (key === void 0) {
+		key = JSON.stringify(removeInvalidKeys(style));
+		styleKeys.set(style, key);
+	}
+	return key;
+}
+function getStringSize(text, style = {}, canMeasure = !isServer()) {
+	if (text === void 0 || text === null || !canMeasure) return {
 		width: 0,
 		height: 0
 	};
-	const copyStyle = removeInvalidKeys(style);
-	const cacheKey = JSON.stringify({
-		text,
-		copyStyle
-	});
-	if (stringCache.widthCache[cacheKey]) return stringCache.widthCache[cacheKey];
+	const styleKey = styleKeyOf(style);
+	const cacheKey = `${styleKey}\u0000${text}`;
+	const cached = sizeCache.get(cacheKey);
+	if (cached) return cached;
 	try {
 		let measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
 		if (!measurementSpan) {
@@ -40,23 +45,30 @@ function getStringSize(text, style = {}) {
 			measurementSpan.setAttribute("id", MEASUREMENT_SPAN_ID);
 			measurementSpan.setAttribute("aria-hidden", "true");
 			document.body.appendChild(measurementSpan);
+			appliedStyleKey = void 0;
+		}
+		if (appliedStyleKey !== styleKey) {
+			measurementSpan.removeAttribute("style");
+			Object.assign(measurementSpan.style, {
+				...SPAN_STYLE,
+				...removeInvalidKeys(style)
+			});
+			appliedStyleKey = styleKey;
 		}
-		const measurementSpanStyle = {
-			...SPAN_STYLE,
-			...copyStyle
-		};
-		Object.assign(measurementSpan.style, measurementSpanStyle);
 		measurementSpan.textContent = `${text}`;
 		const rect = measurementSpan.getBoundingClientRect();
 		const result = {
 			width: rect.width,
 			height: rect.height
 		};
-		stringCache.widthCache[cacheKey] = result;
-		if (++stringCache.cacheCount > MAX_CACHE_NUM) {
-			stringCache.cacheCount = 0;
-			stringCache.widthCache = {};
+		if (sizeCache.size >= MAX_CACHE_NUM) {
+			let drop = MAX_CACHE_NUM / 4;
+			for (const key of sizeCache.keys()) {
+				sizeCache.delete(key);
+				if (--drop <= 0) break;
+			}
 		}
+		sizeCache.set(cacheKey, result);
 		return result;
 	} catch {
 		return {

package/dist/es/utils/cartesian.mjs

@@ -1,26 +1,6 @@
 import { isVisible } from "./validate.mjs";
 import { getEveryNthWithCondition } from "./tick.mjs";
 //#region src/utils/cartesian.ts
-/**
-* Normalizes the angle so that 0 <= angle < 180.
-* @param {number} angle Angle in degrees.
-* @return {number} the normalized angle with a value of at least 0 and never greater or equal to 180.
-*/
-function normalizeAngle(angle) {
-	return (angle % 180 + 180) % 180;
-}
-/**
-* Calculates the width of the largest horizontal line that fits inside a rectangle that is displayed at an angle.
-* @param {object} size Width and height of the text in a horizontal position.
-* @param {number} angle Angle in degrees in which the text is displayed.
-* @return {number} The width of the largest horizontal line that fits inside a rectangle that is displayed at an angle.
-*/
-function getAngledRectangleWidth({ width, height }, angle = 0) {
-	const angleRadians = normalizeAngle(angle) * Math.PI / 180;
-	const angleThreshold = Math.atan(height / width);
-	const angledWidth = angleRadians > angleThreshold && angleRadians < Math.PI - angleThreshold ? height / Math.sin(angleRadians) : width / Math.cos(angleRadians);
-	return Math.abs(angledWidth);
-}
 function getEquidistantTicks(sign, boundaries, getTickSize, ticks, minTickGap) {
 	const result = (ticks || []).slice();
 	const { start: initialStart, end } = boundaries;
@@ -51,4 +31,4 @@ function getEquidistantTicks(sign, boundaries, getTickSize, ticks, minTickGap) {
 	return [];
 }
 //#endregion
-export { getAngledRectangleWidth, getEquidistantTicks };
+export { getEquidistantTicks };

package/dist/es/utils/cell.mjs

@@ -24,5 +24,17 @@ function filterOutCells(vnodes) {
 	}
 	return result;
 }
+/**
+* Stores the Cell props read during a render, but only when they changed: a new but equal array
+* would re-run everything that reads it (legend payloads, geometry) on every render.
+*/
+function assignCells(target, cells) {
+	const current = target.value;
+	if (!(current.length === cells.length && cells.every((cell, i) => {
+		const before = current[i];
+		const keys = Object.keys(cell);
+		return keys.length === Object.keys(before).length && keys.every((key) => Object.is(cell[key], before[key]));
+	}))) target.value = cells;
+}
 //#endregion
-export { extractCellProps, filterOutCells };
+export { assignCells, extractCellProps, filterOutCells };