vccs 0.1.0 → 0.2.0

package/dist/cartesian/funnel/Funnel.d.ts

@@ -0,0 +1,2 @@
+import { FunnelPropsWithSVG } from './type';
+export declare const Funnel: import('vue').DefineComponent<FunnelPropsWithSVG, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<FunnelPropsWithSVG> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/cartesian/funnel/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Funnel';
+export * from './type';

package/dist/cartesian/funnel/type.d.ts

@@ -1,7 +1,8 @@
+import { AnimationOptions } from 'motion-v';
+import { PropType } from 'vue';
 import { ViewBox } from '../type';
 import { TrapezoidProps } from '../../shape';
-import { Coordinate, DataKey, TooltipType } from '../../types';
-import { AnimationEasing } from '../../types/bar';
+import { Coordinate, DataKey, TooltipType, WithSVGProps } from '../../types';
 import { LegendType } from '../../types/legend';
 export interface FunnelTrapezoidItem extends TrapezoidProps {
     value?: number | string;
@@ -12,15 +13,13 @@ export interface FunnelTrapezoidItem extends TrapezoidProps {
     labelViewBox?: ViewBox;
 }
 export interface FunnelProps {
-    animationBegin?: number;
-    animationDuration?: number;
-    animationEasing?: AnimationEasing;
     className?: string;
     data?: any[];
     dataKey: DataKey<any>;
     hide?: boolean;
     id?: string;
     isAnimationActive?: boolean;
+    transition?: AnimationOptions;
     lastShapeType?: 'triangle' | 'rectangle';
     legendType?: LegendType;
     nameKey?: DataKey<any>;
@@ -29,6 +28,76 @@ export interface FunnelProps {
     reversed?: boolean;
     tooltipType?: TooltipType;
 }
+export declare const FunnelVueProps: {
+    data: {
+        type: PropType<Array<Record<string, unknown>>>;
+        default: any;
+    };
+    dataKey: {
+        type: PropType<DataKey<any>>;
+        required: true;
+    };
+    nameKey: {
+        type: PropType<DataKey<any>>;
+        default: string;
+    };
+    lastShapeType: {
+        type: PropType<"triangle" | "rectangle">;
+        default: string;
+    };
+    reversed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fill: {
+        type: StringConstructor;
+        default: string;
+    };
+    stroke: {
+        type: StringConstructor;
+        default: string;
+    };
+    legendType: {
+        type: PropType<LegendType>;
+        default: string;
+    };
+    tooltipType: {
+        type: PropType<TooltipType>;
+        default: any;
+    };
+    hide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isAnimationActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    transition: {
+        type: PropType<AnimationOptions>;
+        default: () => {
+            duration: number;
+            ease: string;
+        };
+    };
+    onAnimationStart: {
+        type: PropType<() => void>;
+        default: any;
+    };
+    onAnimationEnd: {
+        type: PropType<() => void>;
+        default: any;
+    };
+    className: {
+        type: StringConstructor;
+        default: any;
+    };
+    width: {
+        type: PropType<number | string>;
+        default: any;
+    };
+};
+export type FunnelPropsWithSVG = WithSVGProps<typeof FunnelVueProps>;
 type RealFunnelData = any;
 export type FunnelComposedData = {
     trapezoids: ReadonlyArray<FunnelTrapezoidItem>;

package/dist/cartesian/index.d.ts

@@ -9,3 +9,4 @@ export * from './reference-area';
 export * from './reference-line';
 export * from './scatter';
 export * from './z-axis';
+export * from './funnel';

package/dist/chart/FunnelChart.d.ts

@@ -0,0 +1 @@
+export declare const FunnelChart: import('vue').DefineComponent<import('./generateCategoricalChart').CategoricalChartProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('./generateCategoricalChart').CategoricalChartProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/chart/index.d.ts

@@ -6,3 +6,4 @@ export * from './PieChart';
 export * from './RadarChart';
 export * from './ScatterChart';
 export * from './RadialBarChart';
+export * from './FunnelChart';

package/dist/es/animation/Animate.mjs

@@ -1,16 +1,17 @@
-import { defineComponent as e, onUnmounted as t, ref as n, watch as r } from "vue";
-import { animate as i } from "motion-v";
-import { usePreferredReducedMotion as a } from "@vueuse/core";
+import { defineComponent, onUnmounted, ref, watch } from "vue";
+import { animate } from "motion-v";
+import { usePreferredReducedMotion } from "@vueuse/core";
 //#region src/animation/Animate.tsx
-var o = {
+var DEFAULT_TRANSITION = {
 	duration: .4,
 	ease: "easeOut"
-}, s = /* @__PURE__ */ e({
+};
+var Animate = /* @__PURE__ */ defineComponent({
 	name: "Animate",
 	props: {
 		isActive: {
 			type: Boolean,
-			default: !0
+			default: true
 		},
 		transition: {
 			type: Object,
@@ -37,27 +38,52 @@ var o = {
 			default: 1
 		}
 	},
-	setup(e, { slots: s }) {
-		let c = null, l = n(0), u = a(), d = () => {
-			c && c.stop(), e.onAnimationStart && e.onAnimationStart(), c = i(e.from, e.to, {
-				...o,
-				...e.transition,
-				onUpdate: (t) => {
-					l.value = t, e.onUpdate && e.onUpdate(t);
+	setup(props, { slots }) {
+		let animationControls = null;
+		const currentValue = ref(0);
+		const reducedMotion = usePreferredReducedMotion();
+		const startAnimation = () => {
+			if (animationControls) animationControls.stop();
+			if (props.onAnimationStart) props.onAnimationStart();
+			animationControls = animate(props.from, props.to, {
+				...DEFAULT_TRANSITION,
+				...props.transition,
+				onUpdate: (latest) => {
+					currentValue.value = latest;
+					if (props.onUpdate) props.onUpdate(latest);
 				},
 				onComplete: () => {
-					l.value = 1, e.onAnimationEnd && e.onAnimationEnd();
+					currentValue.value = 1;
+					if (props.onAnimationEnd) props.onAnimationEnd();
 				}
 			});
-		}, f = () => {
-			c &&= (c.stop(), null);
 		};
-		return r([() => e.isActive, u], ([t, n]) => {
-			t ? n === "reduce" ? (f(), e.onAnimationStart && e.onAnimationStart(), l.value = e.to, e.onAnimationEnd && e.onAnimationEnd()) : d() : (f(), l.value = e.to);
-		}, { immediate: !0 }), t(() => {
-			f();
-		}), () => s.default ? s.default(l.value) : null;
+		const stopAnimation = () => {
+			if (animationControls) {
+				animationControls.stop();
+				animationControls = null;
+			}
+		};
+		watch([() => props.isActive, reducedMotion], ([isActive, motion]) => {
+			if (isActive) if (motion === "reduce") {
+				stopAnimation();
+				if (props.onAnimationStart) props.onAnimationStart();
+				currentValue.value = props.to;
+				if (props.onAnimationEnd) props.onAnimationEnd();
+			} else startAnimation();
+			else {
+				stopAnimation();
+				currentValue.value = props.to;
+			}
+		}, { immediate: true });
+		onUnmounted(() => {
+			stopAnimation();
+		});
+		return () => {
+			if (!slots.default) return null;
+			return slots.default(currentValue.value);
+		};
 	}
 });
 //#endregion
-export { s as Animate };
+export { Animate };

package/dist/es/cartesian/GraphicalItemClipPath.mjs

@@ -1,8 +1,8 @@
-import { useOffset as e } from "../context/chartLayoutContext.mjs";
-import { useNeedsClip as t } from "./useNeedsClip.mjs";
-import { createVNode as n, defineComponent as r } from "vue";
+import { useOffset } from "../context/chartLayoutContext.mjs";
+import { useNeedsClip } from "./useNeedsClip.mjs";
+import { createVNode, defineComponent } from "vue";
 //#region src/cartesian/GraphicalItemClipPath.tsx
-var i = /* @__PURE__ */ r({
+var GraphicalItemClipPath = /* @__PURE__ */ defineComponent({
 	name: "GraphicalItemClipPath",
 	props: {
 		xAxisId: {
@@ -15,22 +15,23 @@ var i = /* @__PURE__ */ r({
 		},
 		clipPathId: {
 			type: String,
-			required: !0
+			required: true
 		}
 	},
-	setup(r) {
-		let i = e(), { needClipX: a, needClipY: o, needClip: s } = t(r.xAxisId, r.yAxisId);
+	setup(props) {
+		const offset = useOffset();
+		const { needClipX, needClipY, needClip } = useNeedsClip(props.xAxisId, props.yAxisId);
 		return () => {
-			if (!s) return null;
-			let { left: e, top: t, width: c, height: l } = i.value;
-			return n("clipPath", { id: `clipPath-${r.clipPathId}` }, [n("rect", {
-				x: a ? e : e - c / 2,
-				y: o ? t : t - l / 2,
-				width: a ? c : c * 2,
-				height: o ? l : l * 2
+			if (!needClip) return null;
+			const { left, top, width, height } = offset.value;
+			return createVNode("clipPath", { "id": `clipPath-${props.clipPathId}` }, [createVNode("rect", {
+				"x": needClipX ? left : left - width / 2,
+				"y": needClipY ? top : top - height / 2,
+				"width": needClipX ? width : width * 2,
+				"height": needClipY ? height : height * 2
 			}, null)]);
 		};
 	}
 });
 //#endregion
-export { i as GraphicalItemClipPath };
+export { GraphicalItemClipPath };

package/dist/es/cartesian/area/ActivePoints.mjs

@@ -1,23 +1,23 @@
-import { isNullish as e } from "../../utils/validate.mjs";
-import { selectActiveTooltipIndex as t } from "../../state/selectors/tooltipSelectors.mjs";
-import { useAppSelector as n } from "../../state/hooks.mjs";
-import { Layer as r } from "../../container/Layer.mjs";
-import { Dot as i } from "../../shape/Dot.mjs";
-import { createVNode as a, defineComponent as o, isVNode as s } from "vue";
+import { isNullish } from "../../utils/validate.mjs";
+import { selectActiveTooltipIndex } from "../../state/selectors/tooltipSelectors.mjs";
+import { useAppSelector } from "../../state/hooks.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { Dot } from "../../shape/Dot.mjs";
+import { createVNode, defineComponent, isVNode } from "vue";
 //#region src/cartesian/area/ActivePoints.tsx
-function c(e) {
-	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !s(e);
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-var l = /* @__PURE__ */ o({
+var ActivePoints = /* @__PURE__ */ defineComponent({
 	name: "ActivePoints",
 	props: {
 		points: {
 			type: Array,
-			required: !0
+			required: true
 		},
 		mainColor: {
 			type: String,
-			required: !0
+			required: true
 		},
 		itemDataKey: {
 			type: [
@@ -25,7 +25,7 @@ var l = /* @__PURE__ */ o({
 				Number,
 				Function
 			],
-			required: !0
+			required: true
 		},
 		activeDot: {
 			type: [
@@ -33,42 +33,46 @@ var l = /* @__PURE__ */ o({
 				Boolean,
 				Function
 			],
-			required: !0
+			required: true
 		}
 	},
 	slots: Object,
-	setup(r, { slots: i }) {
-		let a = n(t);
+	setup(props, { slots }) {
+		const activeTooltipIndex = useAppSelector(selectActiveTooltipIndex);
 		return () => {
-			let { points: t } = r;
-			if (!t?.length || e(a.value)) return null;
-			let n = t[Number(a.value)];
-			return e(n) ? null : u({
-				point: n,
-				childIndex: Number(a.value),
-				mainColor: r.mainColor,
-				dataKey: r.itemDataKey,
-				activeDot: r.activeDot,
-				slots: i
+			const { points } = props;
+			if (!points?.length || isNullish(activeTooltipIndex.value)) return null;
+			const activePoint = points[Number(activeTooltipIndex.value)];
+			if (isNullish(activePoint)) return null;
+			return renderActivePoint({
+				point: activePoint,
+				childIndex: Number(activeTooltipIndex.value),
+				mainColor: props.mainColor,
+				dataKey: props.itemDataKey,
+				activeDot: props.activeDot,
+				slots
 			});
 		};
 	}
 });
-function u({ point: e, childIndex: t, mainColor: n, activeDot: o, dataKey: s, slots: l }) {
-	if (o === !1) return null;
-	let u = {
-		index: t,
-		dataKey: s,
-		cx: e.x,
-		cy: e.y,
-		r: 4,
-		fill: n,
+function renderActivePoint({ point, childIndex, mainColor, activeDot, dataKey, slots }) {
+	if (activeDot === false) return null;
+	const dotProps = {
+		"index": childIndex,
+		dataKey,
+		"cx": point.x,
+		"cy": point.y,
+		"r": 4,
+		"fill": mainColor,
 		"stroke-width": 2,
-		stroke: "#fff",
-		payload: e.payload,
-		value: e.value
-	}, d;
-	return d = l.activeDot ? l.activeDot(u) : a(i, u, null), a(r, { class: "v-charts-active-dot" }, c(d) ? d : { default: () => [d] });
+		"stroke": "#fff",
+		"payload": point.payload,
+		"value": point.value
+	};
+	let dot;
+	if (slots.activeDot) dot = slots.activeDot(dotProps);
+	else dot = createVNode(Dot, dotProps, null);
+	return createVNode(Layer, { "class": "v-charts-active-dot" }, _isSlot(dot) ? dot : { default: () => [dot] });
 }
 //#endregion
-export { l as ActivePoints };
+export { ActivePoints };

package/dist/es/cartesian/area/Area.mjs

@@ -1,41 +1,52 @@
-import { AreaVueProps as e } from "./type.mjs";
-import { useArea as t } from "./hooks/useArea.mjs";
-import { Layer as n } from "../../container/Layer.mjs";
-import { StaticArea as r } from "./RenderArea.mjs";
-import { ClipRect as i } from "./ClipRect.mjs";
-import { ActivePoints as a } from "./ActivePoints.mjs";
-import { useSetupGraphicalItem as o } from "../../hooks/useSetupGraphicalItem.mjs";
-import { useGraphicalLayerRef as s } from "../../context/graphicalLayerContext.mjs";
-import { Fragment as c, Teleport as l, createVNode as u, defineComponent as d, isVNode as f } from "vue";
+import { AreaVueProps } from "./type.mjs";
+import { useArea } from "./hooks/useArea.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { StaticArea } from "./RenderArea.mjs";
+import { ClipRect } from "./ClipRect.mjs";
+import { ActivePoints } from "./ActivePoints.mjs";
+import { useSetupGraphicalItem } from "../../hooks/useSetupGraphicalItem.mjs";
+import { useGraphicalLayerRef } from "../../context/graphicalLayerContext.mjs";
+import { Fragment, Teleport, createVNode, defineComponent, isVNode } from "vue";
 //#region src/cartesian/area/Area.tsx
-function p(e) {
-	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !f(e);
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-var m = /* @__PURE__ */ d({
+/**
+* Type-safe Area component with slot types preserved in .d.ts output.
+* The `new () => { $slots }` pattern ensures Volar picks up slot types
+* even when consuming from compiled declarations.
+*/
+var Area = /* @__PURE__ */ defineComponent({
 	name: "Area",
-	props: e,
-	inheritAttrs: !1,
+	props: AreaVueProps,
+	inheritAttrs: false,
 	slots: Object,
-	setup(e, { attrs: d, slots: f }) {
-		o(e, "area");
-		let { shouldRender: m, areaData: g, points: _, clipPathId: v, shouldShowAnimation: y } = t(e, d, f.dot), b = s(null);
+	setup(props, { attrs, slots }) {
+		useSetupGraphicalItem(props, "area");
+		const { shouldRender, areaData, points, clipPathId, shouldShowAnimation } = useArea(props, attrs, slots.dot);
+		const graphicalLayerRef = useGraphicalLayerRef(null);
 		return () => {
-			let t;
-			if (!m.value) return null;
-			let o;
-			f.activeDot && (o = { activeDot: f.activeDot });
-			let s = u(c, null, [u(n, { class: ["v-charts-area", d.class] }, p(t = y.value ? u(n, { key: "area-with-animation" }, { default: () => [u("defs", null, [u("clipPath", { id: `animationClipPath-${v.value}` }, [u(i, null, null)])]), u(n, { "clip-path": `url(#animationClipPath-${v.value})` }, { default: () => [u(r, null, null)] })] }) : u(r, { key: "static-area" }, null)) ? t : { default: () => [t] }), u(a, {
-				points: g.value?.points ?? [],
-				mainColor: h(d.stroke, e.fill),
-				itemDataKey: e.dataKey,
-				activeDot: e.activeDot
-			}, p(o) ? o : { default: () => [o] })]);
-			return b?.value ? u(l, { to: b.value }, p(s) ? s : { default: () => [s] }) : s;
+			let _slot;
+			if (!shouldRender.value) return null;
+			let activeDot;
+			if (slots.activeDot) activeDot = { activeDot: slots.activeDot };
+			const renderAreaContent = () => {
+				if (shouldShowAnimation.value) return createVNode(Layer, { "key": "area-with-animation" }, { default: () => [createVNode("defs", null, [createVNode("clipPath", { "id": `animationClipPath-${clipPathId.value}` }, [createVNode(ClipRect, null, null)])]), createVNode(Layer, { "clip-path": `url(#animationClipPath-${clipPathId.value})` }, { default: () => [createVNode(StaticArea, null, null)] })] });
+				return createVNode(StaticArea, { "key": "static-area" }, null);
+			};
+			const areaContent = createVNode(Fragment, null, [createVNode(Layer, { "class": ["v-charts-area", attrs.class] }, _isSlot(_slot = renderAreaContent()) ? _slot : { default: () => [_slot] }), createVNode(ActivePoints, {
+				"points": areaData.value?.points ?? [],
+				"mainColor": getLegendItemColor(attrs.stroke, props.fill),
+				"itemDataKey": props.dataKey,
+				"activeDot": props.activeDot
+			}, _isSlot(activeDot) ? activeDot : { default: () => [activeDot] })]);
+			if (graphicalLayerRef?.value) return createVNode(Teleport, { "to": graphicalLayerRef.value }, _isSlot(areaContent) ? areaContent : { default: () => [areaContent] });
+			return areaContent;
 		};
 	}
 });
-function h(e, t) {
-	return e && e !== "none" ? e : t;
+function getLegendItemColor(stroke, fill) {
+	return stroke && stroke !== "none" ? stroke : fill;
 }
 //#endregion
-export { m as Area };
+export { Area };