vccs 0.1.0 → 0.2.0

package/dist/es/chart/generateCategoricalChart.mjs

@@ -1,27 +1,29 @@
-import { validateWidthHeight as e } from "../utils/validate.mjs";
-import { provideClipPathId as t } from "./provideClipPathId.mjs";
-import { createRechartsStore as n } from "../state/store.mjs";
-import r from "./Surface.mjs";
-import { ChartDataContextProvider as i } from "../context/ChartDataContextProvider.mjs";
-import a from "../container/ClipPath.mjs";
-import { RechartsWrapper as o } from "./RechartsWrapper.mjs";
-import { FULL_WIDTH_AND_HEIGHT as s } from "./const.mjs";
-import { ReportMainChartProps as c } from "../state/ReportMainChartProps.mjs";
-import l from "../state/ReportChartProps.mjs";
-import { applyDefaultProps as u } from "../utils/props.mjs";
-import { ReportPolarOptions as d } from "../state/ReportPolarOptions.mjs";
-import { Fragment as f, createVNode as p, defineComponent as m, mergeProps as h } from "vue";
-import { provideStore as g } from "@reduxjs/vue-redux";
+import { validateWidthHeight } from "../utils/validate.mjs";
+import { provideClipPathId } from "./provideClipPathId.mjs";
+import { createRechartsStore } from "../state/store.mjs";
+import Surface_default from "./Surface.mjs";
+import { ChartDataContextProvider } from "../context/ChartDataContextProvider.mjs";
+import ClipPath_default from "../container/ClipPath.mjs";
+import { RechartsWrapper } from "./RechartsWrapper.mjs";
+import { FULL_WIDTH_AND_HEIGHT } from "./const.mjs";
+import { ReportMainChartProps } from "../state/ReportMainChartProps.mjs";
+import ReportChartProps_default from "../state/ReportChartProps.mjs";
+import { applyDefaultProps } from "../utils/props.mjs";
+import { ReportPolarOptions } from "../state/ReportPolarOptions.mjs";
+import { Fragment, createVNode, defineComponent, mergeProps } from "vue";
+import { provideStore } from "@reduxjs/vue-redux";
 //#region src/chart/generateCategoricalChart.tsx
-var _ = "horizontal", v = {
+var defaultLayout = "horizontal";
+var defaultMargin = {
 	top: 5,
 	right: 5,
 	bottom: 5,
 	left: 5
-}, y = {
+};
+var CategoricalProps = {
 	accessibilityLayer: {
 		type: Boolean,
-		default: !0
+		default: true
 	},
 	barCategoryGap: {
 		type: [Number, String],
@@ -52,17 +54,17 @@ var _ = "horizontal", v = {
 	innerRadius: { type: [Number, String] },
 	layout: {
 		type: String,
-		default: _
+		default: defaultLayout
 	},
 	margin: {
 		type: Object,
-		default: () => v
+		default: () => defaultMargin
 	},
 	maxBarSize: { type: Number },
 	outerRadius: { type: [Number, String] },
 	reverseStackOrder: {
 		type: Boolean,
-		default: !1
+		default: false
 	},
 	role: { type: String },
 	stackOffset: {
@@ -82,85 +84,92 @@ var _ = "horizontal", v = {
 	width: { type: Number },
 	to: { type: [String, Object] }
 };
-function b({ chartName: b, defaultProps: x = {}, defaultTooltipEventType: S = "axis", validateTooltipEventTypes: C = ["axis"], tooltipPayloadSearcher: w }) {
-	return /* @__PURE__ */ m({
-		name: b,
-		props: u(y, x),
-		setup(u, { attrs: m, slots: y }) {
-			g({ store: n({ options: {
-				chartName: b,
-				defaultTooltipEventType: S,
-				validateTooltipEventTypes: C,
-				tooltipPayloadSearcher: w,
+function generateCategoricalChart({ chartName, defaultProps = {}, defaultTooltipEventType = "axis", validateTooltipEventTypes = ["axis"], tooltipPayloadSearcher }) {
+	return /* @__PURE__ */ defineComponent({
+		name: chartName,
+		props: applyDefaultProps(CategoricalProps, defaultProps),
+		setup(props, { attrs, slots }) {
+			provideStore({ store: createRechartsStore({ options: {
+				chartName,
+				defaultTooltipEventType,
+				validateTooltipEventTypes,
+				tooltipPayloadSearcher,
 				eventEmitter: void 0
-			} }, u.id ?? b) });
-			let T = t(u);
+			} }, props.id ?? chartName) });
+			const clipPathId = provideClipPathId(props);
 			return () => {
-				let { compact: t, width: n, height: g, title: b, desc: S, ...C } = u, w = { ...m };
-				if (!e({
-					width: n,
-					height: g
+				const { compact, width, height, title, desc, ...rest } = props;
+				const attributes = { ...attrs };
+				if (!validateWidthHeight({
+					width,
+					height
 				})) return null;
-				let E = u.layout ?? x.layout ?? _, D = E === "centric" || E === "radial";
-				if (t) return p(f, null, [
-					p(i, { chartData: u.data }, null),
-					p(c, {
-						width: n,
-						height: g,
-						layout: E,
-						margin: u.margin ?? v
+				const layout = props.layout ?? defaultProps.layout ?? defaultLayout;
+				const isPolarChart = layout === "centric" || layout === "radial";
+				if (compact) return createVNode(Fragment, null, [
+					createVNode(ChartDataContextProvider, { "chartData": props.data }, null),
+					createVNode(ReportMainChartProps, {
+						"width": width,
+						"height": height,
+						"layout": layout,
+						"margin": props.margin ?? defaultMargin
 					}, null),
-					D && p(d, {
-						cx: u.cx ?? "50%",
-						cy: u.cy ?? "50%",
-						startAngle: u.startAngle ?? x.startAngle ?? 90,
-						endAngle: u.endAngle ?? x.endAngle ?? -270,
-						innerRadius: u.innerRadius ?? 0,
-						outerRadius: u.outerRadius ?? "80%"
+					isPolarChart && createVNode(ReportPolarOptions, {
+						"cx": props.cx ?? "50%",
+						"cy": props.cy ?? "50%",
+						"startAngle": props.startAngle ?? defaultProps.startAngle ?? 90,
+						"endAngle": props.endAngle ?? defaultProps.endAngle ?? -270,
+						"innerRadius": props.innerRadius ?? 0,
+						"outerRadius": props.outerRadius ?? "80%"
 					}, null),
-					p(r, h(m, C, {
-						width: n,
-						height: g,
-						title: b,
-						desc: S
-					}), { default: () => [p(a, { clipPathId: T }, null), y.default?.()] })
+					createVNode(Surface_default, mergeProps(attrs, rest, {
+						"width": width,
+						"height": height,
+						"title": title,
+						"desc": desc
+					}), { default: () => [createVNode(ClipPath_default, { "clipPathId": clipPathId }, null), slots.default?.()] })
 				]);
-				u.accessibilityLayer && (w.tabIndex = u.tabIndex ?? 0, w.role = u.role ?? "application");
-				let O = {}, k = {};
-				for (let [e, t] of Object.entries(w)) e.startsWith("on") && typeof t == "function" ? O[e] = t : k[e] = t;
-				return p(f, null, [
-					p(i, { chartData: u.data }, null),
-					p(c, {
-						width: n,
-						height: g,
-						layout: E,
-						margin: u.margin ?? v
+				if (props.accessibilityLayer) {
+					attributes.tabIndex = props.tabIndex ?? 0;
+					attributes.role = props.role ?? "application";
+				}
+				const eventHandlerAttrs = {};
+				const svgAttributes = {};
+				for (const [key, value] of Object.entries(attributes)) if (key.startsWith("on") && typeof value === "function") eventHandlerAttrs[key] = value;
+				else svgAttributes[key] = value;
+				return createVNode(Fragment, null, [
+					createVNode(ChartDataContextProvider, { "chartData": props.data }, null),
+					createVNode(ReportMainChartProps, {
+						"width": width,
+						"height": height,
+						"layout": layout,
+						"margin": props.margin ?? defaultMargin
 					}, null),
-					D && p(d, {
-						cx: u.cx ?? "50%",
-						cy: u.cy ?? "50%",
-						startAngle: u.startAngle ?? x.startAngle ?? 90,
-						endAngle: u.endAngle ?? x.endAngle ?? -270,
-						innerRadius: u.innerRadius ?? 0,
-						outerRadius: u.outerRadius ?? "80%"
+					isPolarChart && createVNode(ReportPolarOptions, {
+						"cx": props.cx ?? "50%",
+						"cy": props.cy ?? "50%",
+						"startAngle": props.startAngle ?? defaultProps.startAngle ?? 90,
+						"endAngle": props.endAngle ?? defaultProps.endAngle ?? -270,
+						"innerRadius": props.innerRadius ?? 0,
+						"outerRadius": props.outerRadius ?? "80%"
 					}, null),
-					p(o, h({
-						style: u.style,
-						class: u.class,
-						width: n,
-						height: g
-					}, O), { default: () => [p(r, h(k, {
-						width: n,
-						height: g,
-						title: b,
-						desc: S,
-						style: s
-					}), { default: () => [p(a, { clipPathId: T }, null), y.default?.()] }), y.tooltip?.()] }),
-					p(l, u, null)
+					createVNode(RechartsWrapper, mergeProps({
+						"style": props.style,
+						"class": props.class,
+						"width": width,
+						"height": height
+					}, eventHandlerAttrs), { default: () => [createVNode(Surface_default, mergeProps(svgAttributes, {
+						"width": width,
+						"height": height,
+						"title": title,
+						"desc": desc,
+						"style": FULL_WIDTH_AND_HEIGHT
+					}), { default: () => [createVNode(ClipPath_default, { "clipPathId": clipPathId }, null), slots.default?.()] }), slots.tooltip?.()] }),
+					createVNode(ReportChartProps_default, props, null)
 				]);
 			};
 		}
 	});
 }
 //#endregion
-export { b as generateCategoricalChart };
+export { generateCategoricalChart };

package/dist/es/chart/provideClipPathId.mjs

@@ -1,10 +1,15 @@
-import { uniqueId as e } from "../utils/data-utils.mjs";
-import { createContext as t } from "../utils/createContext.mjs";
+import { uniqueId } from "../utils/data-utils.mjs";
+import { createContext } from "../utils/createContext.mjs";
 //#region src/chart/provideClipPathId.ts
-var [n, r] = t("clipPathId");
-function i(t) {
-	let n = `${t.id ?? e("v-charts")}-clip`;
-	return r(n), n;
+var [useClipPathId, provideClipPathIdRaw] = createContext("clipPathId");
+/**
+* Provide the clipPathId to child components.
+* @param props - The props object from the chart component
+*/
+function provideClipPathId(props) {
+	const clipPathId = `${props.id ?? uniqueId("v-charts")}-clip`;
+	provideClipPathIdRaw(clipPathId);
+	return clipPathId;
 }
 //#endregion
-export { i as provideClipPathId, n as useClipPathId };
+export { provideClipPathId, useClipPathId };

package/dist/es/components/Cell.mjs

@@ -1,11 +1,23 @@
-import { defineComponent as e } from "vue";
+import { defineComponent } from "vue";
 //#region src/components/Cell.tsx
-var t = /* @__PURE__ */ e({
+/**
+* Cell is a marker component used to define per-item colors and styles.
+* It renders nothing — parent components (Bar, Pie, etc.) read Cell
+* children from the default slot and apply their props by index.
+*
+* Usage:
+* ```vue
+* <Bar data-key="value">
+*   <Cell v-for="(entry, index) in data" :key="index" :fill="COLORS[index]" />
+* </Bar>
+* ```
+*/
+var Cell = /* @__PURE__ */ defineComponent({
 	name: "Cell",
-	inheritAttrs: !1,
+	inheritAttrs: false,
 	setup() {
 		return () => null;
 	}
 });
 //#endregion
-export { t as Cell };
+export { Cell };

package/dist/es/components/Text.mjs

@@ -1,5 +1,5 @@
-import e from "./Text.vue_vue_type_script_setup_true_lang.mjs";
+import Text_vue_vue_type_script_setup_true_lang_default from "./Text.vue_vue_type_script_setup_true_lang.mjs";
 //#region src/components/Text.vue
-var t = e;
+var Text_default = Text_vue_vue_type_script_setup_true_lang_default;
 //#endregion
-export { t as default };
+export { Text_default as default };

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

@@ -1,14 +1,16 @@
-import { getStringSize as e } from "../utils/attrs.mjs";
-import { reduceCSSCalc as t } from "../utils/ReduceCSSCalc.mjs";
-import { Fragment as n, computed as r, createElementBlock as i, defineComponent as a, normalizeStyle as o, openBlock as s, renderList as c, toDisplayString as l } from "vue";
+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 u = [
+var _hoisted_1 = [
 	"x",
 	"y",
 	"transform",
 	"text-anchor",
 	"fill"
-], d = ["x", "dy"], f = /* @__PURE__ */ a({
+];
+var _hoisted_2 = ["x", "dy"];
+var Text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Text",
 	props: {
 		x: {
@@ -37,7 +39,7 @@ var u = [
 		},
 		scaleToFit: {
 			type: Boolean,
-			default: !1
+			default: false
 		},
 		textAnchor: {
 			type: String,
@@ -61,7 +63,7 @@ var u = [
 		},
 		breakAll: {
 			type: Boolean,
-			default: !1
+			default: false
 		},
 		maxLines: {
 			type: Number,
@@ -76,79 +78,114 @@ var u = [
 			default: ""
 		}
 	},
-	setup(a) {
-		let f = a, p = /[ \f\n\r\t\v\u2028\u2029]+/;
-		function m(t, n, r) {
-			let i = [];
-			return t != null && (i = n ? t.toString().split("") : t.toString().split(p)), {
-				wordsWithComputedWidth: i.map((t) => ({
-					word: t,
-					width: e(t, r).width
+	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: n ? 0 : e("\xA0", r).width
+				spaceWidth: breakAll ? 0 : getStringSize("\xA0", style).width
 			};
 		}
-		function h(e, t, n, r, i, a, o, s) {
-			let c = typeof e == "number", l = t, u = (e = []) => e.reduce((e, { word: t, width: n }) => {
-				let r = e[e.length - 1];
-				return r && (o == null || s || r.width + n + a < Number(o)) ? (r.words.push(t), r.width += n + a) : e.push({
-					words: [t],
-					width: n
-				}), e;
-			}, []), d = u(i), f = (e) => e.reduce((e, t) => e.width > t.width ? e : t);
-			if (!c || s || !(d.length > e || f(d).width > Number(o))) return d;
-			let p = (t) => {
-				let { wordsWithComputedWidth: i } = m(l.slice(0, t) + "…", r, n), a = u(i);
-				return [a.length > e || f(a).width > Number(o), a];
-			}, h = 0, g = l.length - 1, _ = 0, v;
-			for (; h <= g && _ <= l.length - 1;) {
-				let e = Math.floor((h + g) / 2), [t, n] = p(e - 1), [r] = p(e);
-				if (!t && !r && (h = e + 1), t && r && (g = e - 1), !t && r) {
-					v = n;
+		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 v || d;
+			return trimmedResult || originalResult;
 		}
-		function g({ width: e, scaleToFit: t, value: n, style: r, breakAll: i, maxLines: a }) {
-			if (e || t) {
-				let o = m(n, i, r), s = o.wordsWithComputedWidth, c = o.spaceWidth;
-				return h(a, n, r, i, s, c, e, t);
+		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: n == null ? [] : n.toString().split(p) }];
+			return [{ words: value !== void 0 && value !== null ? value.toString().split(BREAKING_SPACES) : [] }];
 		}
-		let _ = r(() => g({
-			width: f.width,
-			scaleToFit: f.scaleToFit,
-			value: f.value,
-			style: f.style,
-			breakAll: f.breakAll,
-			maxLines: f.maxLines
-		})), v = r(() => Number(f.x) + (typeof f.dx == "number" ? f.dx : 0)), y = r(() => Number(f.y) + (typeof f.dy == "number" ? f.dy : 0)), b = r(() => {
-			switch (f.verticalAnchor) {
-				case "start": return t(`calc(${f.capHeight})`);
-				case "middle": return t(`calc(${(_.value.length - 1) / 2} * -${f.lineHeight} + (${f.capHeight} / 2))`);
-				default: return t(`calc(${_.value.length - 1} * -${f.lineHeight})`);
+		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})`);
 			}
-		}), x = r(() => {
-			let e = [];
-			return f.scaleToFit && _.value[0]?.width && f.width && e.push(`scale(${Number(f.width) / _.value[0].width})`), f.angle && e.push(`rotate(${f.angle}, ${v.value}, ${y.value})`), e.join(" ");
 		});
-		return (e, t) => (s(), i("text", {
-			x: v.value,
-			y: y.value,
-			transform: x.value || void 0,
-			"text-anchor": f.textAnchor,
-			fill: f.fill && f.fill.includes("url") ? "#808080" : f.fill,
-			class: "v-charts-text",
-			style: o(f.style)
-		}, [(s(!0), i(n, null, c(_.value, (e, t) => (s(), i("tspan", {
-			key: t,
-			x: v.value,
-			dy: t === 0 ? b.value : f.lineHeight
-		}, l(e.words.join(f.breakAll ? "" : " ")), 9, d))), 128))], 12, u));
+		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 { f as default };
+export { Text_vue_vue_type_script_setup_true_lang_default as default };