vccs 0.1.0 → 0.3.0

package/dist/es/utils/ReduceCSSCalc.mjs

@@ -1,6 +1,10 @@
-import { isNan as e } from "./validate.mjs";
+import { isNan } from "./validate.mjs";
 //#region src/utils/ReduceCSSCalc.ts
-var t = /(-?\d+(?:\.\d+)?[a-z%]*)([*/])(-?\d+(?:\.\d+)?[a-z%]*)/i, n = /(-?\d+(?:\.\d+)?[a-z%]*)([+-])(-?\d+(?:\.\d+)?[a-z%]*)/i, r = /^px|cm|vh|vw|em|rem|%|mm|in|pt|pc|ex|ch|vmin|vmax|Q$/, i = /(-?\d+(?:\.\d+)?)([a-z%]+)?/i, a = {
+var MULTIPLY_OR_DIVIDE_REGEX = /(-?\d+(?:\.\d+)?[a-z%]*)([*/])(-?\d+(?:\.\d+)?[a-z%]*)/i;
+var ADD_OR_SUBTRACT_REGEX = /(-?\d+(?:\.\d+)?[a-z%]*)([+-])(-?\d+(?:\.\d+)?[a-z%]*)/i;
+var CSS_LENGTH_UNIT_REGEX = /^px|cm|vh|vw|em|rem|%|mm|in|pt|pc|ex|ch|vmin|vmax|Q$/;
+var NUM_SPLIT_REGEX = /(-?\d+(?:\.\d+)?)([a-z%]+)?/i;
+var CONVERSION_RATES = {
 	cm: 96 / 2.54,
 	mm: 96 / 25.4,
 	pt: 96 / 72,
@@ -8,75 +12,103 @@ var t = /(-?\d+(?:\.\d+)?[a-z%]*)([*/])(-?\d+(?:\.\d+)?[a-z%]*)/i, n = /(-?\d+(?
 	in: 96,
 	Q: 96 / (2.54 * 40),
 	px: 1
-}, o = Object.keys(a), s = "NaN";
-function c(e, t) {
-	return e * a[t];
+};
+var FIXED_CSS_LENGTH_UNITS = Object.keys(CONVERSION_RATES);
+var STR_NAN = "NaN";
+function convertToPx(value, unit) {
+	return value * CONVERSION_RATES[unit];
 }
-var l = class t {
-	static parse(e) {
-		let [, n, r] = i.exec(e) ?? [];
-		return new t(parseFloat(n), r ?? "");
+var DecimalCSS = class DecimalCSS {
+	static parse(str) {
+		const [, numStr, unit] = NUM_SPLIT_REGEX.exec(str) ?? [];
+		return new DecimalCSS(parseFloat(numStr), unit ?? "");
 	}
-	constructor(t, n) {
-		this.num = t, this.unit = n, this.num = t, this.unit = n, e(t) && (this.unit = ""), n !== "" && !r.test(n) && (this.num = NaN, this.unit = ""), o.includes(n) && (this.num = c(t, n), this.unit = "px");
+	constructor(num, unit) {
+		this.num = num;
+		this.unit = unit;
+		this.num = num;
+		this.unit = unit;
+		if (isNan(num)) this.unit = "";
+		if (unit !== "" && !CSS_LENGTH_UNIT_REGEX.test(unit)) {
+			this.num = NaN;
+			this.unit = "";
+		}
+		if (FIXED_CSS_LENGTH_UNITS.includes(unit)) {
+			this.num = convertToPx(num, unit);
+			this.unit = "px";
+		}
 	}
-	add(e) {
-		return this.unit === e.unit ? new t(this.num + e.num, this.unit) : new t(NaN, "");
+	add(other) {
+		if (this.unit !== other.unit) return new DecimalCSS(NaN, "");
+		return new DecimalCSS(this.num + other.num, this.unit);
 	}
-	subtract(e) {
-		return this.unit === e.unit ? new t(this.num - e.num, this.unit) : new t(NaN, "");
+	subtract(other) {
+		if (this.unit !== other.unit) return new DecimalCSS(NaN, "");
+		return new DecimalCSS(this.num - other.num, this.unit);
 	}
-	multiply(e) {
-		return this.unit !== "" && e.unit !== "" && this.unit !== e.unit ? new t(NaN, "") : new t(this.num * e.num, this.unit || e.unit);
+	multiply(other) {
+		if (this.unit !== "" && other.unit !== "" && this.unit !== other.unit) return new DecimalCSS(NaN, "");
+		return new DecimalCSS(this.num * other.num, this.unit || other.unit);
 	}
-	divide(e) {
-		return this.unit !== "" && e.unit !== "" && this.unit !== e.unit ? new t(NaN, "") : new t(this.num / e.num, this.unit || e.unit);
+	divide(other) {
+		if (this.unit !== "" && other.unit !== "" && this.unit !== other.unit) return new DecimalCSS(NaN, "");
+		return new DecimalCSS(this.num / other.num, this.unit || other.unit);
 	}
 	toString() {
 		return `${this.num}${this.unit}`;
 	}
 	isNaN() {
-		return e(this.num);
+		return isNan(this.num);
 	}
 };
-function u(e) {
-	if (e.includes(s)) return s;
-	let r = e;
-	for (; r.includes("*") || r.includes("/");) {
-		let [, e, n, i] = t.exec(r) ?? [], a = l.parse(e ?? ""), o = l.parse(i ?? ""), c = n === "*" ? a.multiply(o) : a.divide(o);
-		if (c.isNaN()) return s;
-		r = r.replace(t, c.toString());
+function calculateArithmetic(expr) {
+	if (expr.includes(STR_NAN)) return STR_NAN;
+	let newExpr = expr;
+	while (newExpr.includes("*") || newExpr.includes("/")) {
+		const [, leftOperand, operator, rightOperand] = MULTIPLY_OR_DIVIDE_REGEX.exec(newExpr) ?? [];
+		const lTs = DecimalCSS.parse(leftOperand ?? "");
+		const rTs = DecimalCSS.parse(rightOperand ?? "");
+		const result = operator === "*" ? lTs.multiply(rTs) : lTs.divide(rTs);
+		if (result.isNaN()) return STR_NAN;
+		newExpr = newExpr.replace(MULTIPLY_OR_DIVIDE_REGEX, result.toString());
 	}
-	for (; r.includes("+") || /.-\d+(?:\.\d+)?/.test(r);) {
-		let [, e, t, i] = n.exec(r) ?? [], a = l.parse(e ?? ""), o = l.parse(i ?? ""), c = t === "+" ? a.add(o) : a.subtract(o);
-		if (c.isNaN()) return s;
-		r = r.replace(n, c.toString());
+	while (newExpr.includes("+") || /.-\d+(?:\.\d+)?/.test(newExpr)) {
+		const [, leftOperand, operator, rightOperand] = ADD_OR_SUBTRACT_REGEX.exec(newExpr) ?? [];
+		const lTs = DecimalCSS.parse(leftOperand ?? "");
+		const rTs = DecimalCSS.parse(rightOperand ?? "");
+		const result = operator === "+" ? lTs.add(rTs) : lTs.subtract(rTs);
+		if (result.isNaN()) return STR_NAN;
+		newExpr = newExpr.replace(ADD_OR_SUBTRACT_REGEX, result.toString());
 	}
-	return r;
+	return newExpr;
 }
-var d = /\(([^()]*)\)/;
-function f(e) {
-	let t = e, n;
-	for (; (n = d.exec(t)) != null;) {
-		let [, e] = n;
-		t = t.replace(d, u(e));
+var PARENTHESES_REGEX = /\(([^()]*)\)/;
+function calculateParentheses(expr) {
+	let newExpr = expr;
+	let match;
+	while ((match = PARENTHESES_REGEX.exec(newExpr)) != null) {
+		const [, parentheticalExpression] = match;
+		newExpr = newExpr.replace(PARENTHESES_REGEX, calculateArithmetic(parentheticalExpression));
 	}
-	return t;
+	return newExpr;
 }
-function p(e) {
-	let t = e.replace(/\s+/g, "");
-	return t = f(t), t = u(t), t;
+function evaluateExpression(expression) {
+	let newExpr = expression.replace(/\s+/g, "");
+	newExpr = calculateParentheses(newExpr);
+	newExpr = calculateArithmetic(newExpr);
+	return newExpr;
 }
-function m(e) {
+function safeEvaluateExpression(expression) {
 	try {
-		return p(e);
+		return evaluateExpression(expression);
 	} catch {
-		return s;
+		return STR_NAN;
 	}
 }
-function h(e) {
-	let t = m(e.slice(5, -1));
-	return t === s ? "" : t;
+function reduceCSSCalc(expression) {
+	const result = safeEvaluateExpression(expression.slice(5, -1));
+	if (result === STR_NAN) return "";
+	return result;
 }
 //#endregion
-export { h as reduceCSSCalc };
+export { reduceCSSCalc };

package/dist/es/utils/VueUtils.mjs

@@ -1,18 +1,39 @@
-import { FilteredElementKeyMap as e, SVGElementPropKeys as t } from "../cartesian/cartesian-grid/const.mjs";
-import { EventKeys as n } from "../types/event.mjs";
+import { EventKeys } from "../types/event.mjs";
+import { FilteredElementKeyMap, SVGElementPropKeys } from "../cartesian/cartesian-grid/const.mjs";
 //#region src/utils/VueUtils.ts
-function r(r, i, a, o) {
-	let s = (o && e?.[o]) ?? [];
-	return i.startsWith("data-") || typeof r != "function" && (o && s.includes(i) || t.includes(i)) || a && n.includes(i);
+/**
+* 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
+* @param {string} key property key currently being compared
+* @param {boolean} includeEvents if events are included in spreadable props
+* @param {boolean} svgElementType checks against map of SVG element types to attributes
+* @returns {boolean} is prop valid
+*/
+function isValidSpreadableProp(property, key, includeEvents, svgElementType) {
+	/**
+	* If the svg element type is explicitly included, check against the filtered element key map
+	* to determine if there are attributes that should only exist on that element type.
+	* @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);
 }
-function i(e, t, n) {
-	if (!e || typeof e == "function" || typeof e == "boolean") return null;
-	let i = e;
-	if (typeof i != "object" && typeof i != "function") return null;
-	let a = {};
-	return Object.keys(i).forEach((e) => {
-		r(i?.[e], e, t, n) && (a[e] = i[e]);
-	}), a;
+function filterProps(props, includeEvents, svgElementType) {
+	if (!props || typeof props === "function" || typeof props === "boolean") return null;
+	const inputProps = props;
+	if (typeof inputProps !== "object" && typeof inputProps !== "function") return null;
+	const out = {};
+	/**
+	* Props are blindly spread onto SVG elements. This loop filters out properties that we don't want to spread.
+	* Items filtered out are as follows:
+	*   - functions in properties that are SVG attributes (functions are included when includeEvents is true)
+	*   - props that are SVG attributes but don't matched the passed svgElementType
+	*   - any prop that is not in SVGElementPropKeys (or in EventKeys if includeEvents is true)
+	*/
+	Object.keys(inputProps).forEach((key) => {
+		if (isValidSpreadableProp(inputProps?.[key], key, includeEvents, svgElementType)) out[key] = inputProps[key];
+	});
+	return out;
 }
 //#endregion
-export { i as filterProps };
+export { filterProps };

package/dist/es/utils/attrs.mjs

@@ -1,9 +1,11 @@
-import { isSsr as e } from "./validate.mjs";
+import { isSsr } from "./validate.mjs";
 //#region src/utils/attrs.ts
-var t = {
+var stringCache = {
 	widthCache: {},
 	cacheCount: 0
-}, n = 2e3, r = {
+};
+var MAX_CACHE_NUM = 2e3;
+var SPAN_STYLE = {
 	position: "absolute",
 	top: "-20000px",
 	left: 0,
@@ -11,36 +13,51 @@ var t = {
 	margin: 0,
 	border: "none",
 	whiteSpace: "pre"
-}, i = "v-charts_measurement_span";
-function a(e) {
-	let t = { ...e };
-	return Object.keys(t).forEach((e) => {
-		t[e] || delete t[e];
-	}), t;
+};
+var MEASUREMENT_SPAN_ID = "v-charts_measurement_span";
+function removeInvalidKeys(obj) {
+	const copyObj = { ...obj };
+	Object.keys(copyObj).forEach((key) => {
+		if (!copyObj[key]) delete copyObj[key];
+	});
+	return copyObj;
 }
-function o(o, s = {}) {
-	if (o == null || e) return {
+function getStringSize(text, style = {}) {
+	if (text === void 0 || text === null || isSsr) return {
 		width: 0,
 		height: 0
 	};
-	let c = a(s), l = JSON.stringify({
-		text: o,
-		copyStyle: c
+	const copyStyle = removeInvalidKeys(style);
+	const cacheKey = JSON.stringify({
+		text,
+		copyStyle
 	});
-	if (t.widthCache[l]) return t.widthCache[l];
+	if (stringCache.widthCache[cacheKey]) return stringCache.widthCache[cacheKey];
 	try {
-		let e = document.getElementById(i);
-		e || (e = document.createElement("span"), e.setAttribute("id", i), e.setAttribute("aria-hidden", "true"), document.body.appendChild(e));
-		let a = {
-			...r,
-			...c
+		let measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
+		if (!measurementSpan) {
+			measurementSpan = document.createElement("span");
+			measurementSpan.setAttribute("id", MEASUREMENT_SPAN_ID);
+			measurementSpan.setAttribute("aria-hidden", "true");
+			document.body.appendChild(measurementSpan);
+		}
+		const measurementSpanStyle = {
+			...SPAN_STYLE,
+			...copyStyle
 		};
-		Object.assign(e.style, a), e.textContent = `${o}`;
-		let s = e.getBoundingClientRect(), u = {
-			width: s.width,
-			height: s.height
+		Object.assign(measurementSpan.style, measurementSpanStyle);
+		measurementSpan.textContent = `${text}`;
+		const rect = measurementSpan.getBoundingClientRect();
+		const result = {
+			width: rect.width,
+			height: rect.height
 		};
-		return t.widthCache[l] = u, ++t.cacheCount > n && (t.cacheCount = 0, t.widthCache = {}), u;
+		stringCache.widthCache[cacheKey] = result;
+		if (++stringCache.cacheCount > MAX_CACHE_NUM) {
+			stringCache.cacheCount = 0;
+			stringCache.widthCache = {};
+		}
+		return result;
 	} catch {
 		return {
 			width: 0,
@@ -49,4 +66,4 @@ function o(o, s = {}) {
 	}
 }
 //#endregion
-export { o as getStringSize };
+export { getStringSize };

package/dist/es/utils/cartesian.mjs

@@ -1,22 +1,54 @@
-import { isVisible as e } from "./validate.mjs";
-import { getEveryNthWithCondition as t } from "./tick.mjs";
+import { isVisible } from "./validate.mjs";
+import { getEveryNthWithCondition } from "./tick.mjs";
 //#region src/utils/cartesian.ts
-function n(e) {
-	return (e % 180 + 180) % 180;
+/**
+* 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;
 }
-function r({ width: e, height: t }, r = 0) {
-	let i = n(r) * Math.PI / 180, a = Math.atan(t / e), o = i > a && i < Math.PI - a ? t / Math.sin(i) : e / Math.cos(i);
-	return Math.abs(o);
+/**
+* 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 i(n, r, i, a, o) {
-	let s = (a || []).slice(), { start: c, end: l } = r, u = 0, d = 1, f = c;
-	for (; d <= s.length;) {
-		let r = a?.[u];
-		if (r === void 0) return t(a, d) ?? [];
-		let s = u, p, m = () => (p === void 0 && (p = i(r, s)), p), h = r.coordinate, g = u === 0 || e(n, h, m, f, l);
-		g || (u = 0, f = c, d += 1), g && (f = h + n * (m() / 2 + o), u += d);
+function getEquidistantTicks(sign, boundaries, getTickSize, ticks, minTickGap) {
+	const result = (ticks || []).slice();
+	const { start: initialStart, end } = boundaries;
+	let index = 0;
+	let stepsize = 1;
+	let start = initialStart;
+	while (stepsize <= result.length) {
+		const entry = ticks?.[index];
+		if (entry === void 0) return getEveryNthWithCondition(ticks, stepsize) ?? [];
+		const i = index;
+		let size;
+		const getSize = () => {
+			if (size === void 0) size = getTickSize(entry, i);
+			return size;
+		};
+		const tickCoord = entry.coordinate;
+		const isShow = index === 0 || isVisible(sign, tickCoord, getSize, start, end);
+		if (!isShow) {
+			index = 0;
+			start = initialStart;
+			stepsize += 1;
+		}
+		if (isShow) {
+			start = tickCoord + sign * (getSize() / 2 + minTickGap);
+			index += stepsize;
+		}
 	}
 	return [];
 }
 //#endregion
-export { r as getAngledRectangleWidth, i as getEquidistantTicks };
+export { getAngledRectangleWidth, getEquidistantTicks };

package/dist/es/utils/cell.mjs

@@ -0,0 +1,28 @@
+import { Cell } from "../components/Cell.mjs";
+import { Fragment } from "vue";
+//#region src/utils/cell.ts
+/**
+* Extract Cell VNode props from a VNode tree.
+* Handles Fragment wrapping from v-for.
+*/
+function extractCellProps(vnodes) {
+	const result = [];
+	for (const vnode of vnodes) if (vnode.type === Cell) result.push(vnode.props ?? {});
+	else if (vnode.type === Fragment && Array.isArray(vnode.children)) result.push(...extractCellProps(vnode.children));
+	return result;
+}
+/**
+* Filter out Cell VNodes from a VNode tree, preserving non-Cell siblings.
+* Recursively descends Fragment children to preserve co-located content (e.g. LabelList).
+*/
+function filterOutCells(vnodes) {
+	const result = [];
+	for (const vnode of vnodes) {
+		if (vnode.type === Cell) continue;
+		if (vnode.type === Fragment && Array.isArray(vnode.children)) result.push(...filterOutCells(vnode.children));
+		else result.push(vnode);
+	}
+	return result;
+}
+//#endregion
+export { extractCellProps, filterOutCells };