vccs 0.1.0 → 0.3.0

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 };

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

@@ -1,104 +1,125 @@
-import { isNumber as e, isWellBehavedNumber as t } from "../../utils/validate.mjs";
-import { useAreaContext as n } from "./hooks/useArea.mjs";
-import { Animate as r } from "../../animation/Animate.mjs";
-import { createVNode as i, defineComponent as a, ref as o, watch as s } from "vue";
+import { isNumber, isWellBehavedNumber } from "../../utils/validate.mjs";
+import { useAreaContext } from "./hooks/useArea.mjs";
+import { Animate } from "../../animation/Animate.mjs";
+import { createVNode, defineComponent, ref, watch } from "vue";
 //#region src/cartesian/area/ClipRect.tsx
-var c = /* @__PURE__ */ a({
+var HorizontalRect = /* @__PURE__ */ defineComponent({
 	name: "HorizontalRect",
 	props: {
 		alpha: {
 			type: Number,
-			required: !0
+			required: true
 		},
 		points: {
 			type: Array,
-			required: !0
+			required: true
 		},
 		baseLine: {
 			type: [Number, Array],
-			required: !0
+			required: true
 		},
 		strokeWidth: {
 			type: Number,
-			required: !0
+			required: true
 		}
 	},
-	setup(t) {
-		let { points: n } = t;
+	setup(props) {
+		const { points } = props;
 		return () => {
-			let { alpha: r, baseLine: a, strokeWidth: o } = t, s = n[0].x, c = n[n.length - 1].x, l = r * Math.abs(s - c), u = Math.max(...n.map((e) => e.y || 0));
-			return e(a) ? u = Math.max(a, u) : a && Array.isArray(a) && a.length && (u = Math.max(...a.map((e) => e.y || 0), u)), e(u) ? i("rect", {
-				x: s < c ? s : s - l,
-				y: 0,
-				width: l,
-				height: Math.floor(u + (o ? parseInt(`${o}`, 10) : 1))
-			}, null) : null;
+			const { alpha, baseLine, strokeWidth } = props;
+			const startX = points[0].x;
+			const endX = points[points.length - 1].x;
+			const width = alpha * Math.abs(startX - endX);
+			let maxY = Math.max(...points.map((entry) => entry.y || 0));
+			if (isNumber(baseLine)) maxY = Math.max(baseLine, maxY);
+			else if (baseLine && Array.isArray(baseLine) && baseLine.length) maxY = Math.max(...baseLine.map((entry) => entry.y || 0), maxY);
+			if (isNumber(maxY)) return createVNode("rect", {
+				"x": startX < endX ? startX : startX - width,
+				"y": 0,
+				"width": width,
+				"height": Math.floor(maxY + (strokeWidth ? parseInt(`${strokeWidth}`, 10) : 1))
+			}, null);
+			return null;
 		};
 	}
-}), l = /* @__PURE__ */ a({
+});
+var VerticalRect = /* @__PURE__ */ defineComponent({
 	name: "VerticalRect",
 	props: {
 		alpha: {
 			type: Number,
-			required: !0
+			required: true
 		},
 		points: {
 			type: Array,
-			required: !0
+			required: true
 		},
 		baseLine: {
 			type: [Number, Array],
-			required: !0
+			required: true
 		},
 		strokeWidth: {
 			type: Number,
-			required: !0
+			required: true
 		}
 	},
-	setup(n) {
-		let { points: r } = n;
+	setup(props) {
+		const { points } = props;
 		return () => {
-			let { alpha: a, baseLine: o, strokeWidth: s } = n, c = r[0].y, l = r[r.length - 1].y;
-			if (!t(c) || !t(l)) return null;
-			let u = a * Math.abs(c - l), d = Math.max(...r.map((e) => e.x || 0));
-			return e(o) ? d = Math.max(o, d) : o && Array.isArray(o) && o.length && (d = Math.max(...o.map((e) => e.x || 0), d)), i("rect", {
-				x: 0,
-				y: c < l ? c : c - u,
-				width: d + (s ? parseInt(`${s}`, 10) : 1),
-				height: Math.floor(u)
+			const { alpha, baseLine, strokeWidth } = props;
+			const startY = points[0].y;
+			const endY = points[points.length - 1].y;
+			if (!isWellBehavedNumber(startY) || !isWellBehavedNumber(endY)) return null;
+			const height = alpha * Math.abs(startY - endY);
+			let maxX = Math.max(...points.map((entry) => entry.x || 0));
+			if (isNumber(baseLine)) maxX = Math.max(baseLine, maxX);
+			else if (baseLine && Array.isArray(baseLine) && baseLine.length) maxX = Math.max(...baseLine.map((entry) => entry.x || 0), maxX);
+			return createVNode("rect", {
+				"x": 0,
+				"y": startY < endY ? startY : startY - height,
+				"width": maxX + (strokeWidth ? parseInt(`${strokeWidth}`, 10) : 1),
+				"height": Math.floor(height)
 			}, null);
 		};
 	}
-}), u = /* @__PURE__ */ a({
+});
+var ClipRect = /* @__PURE__ */ defineComponent({
 	name: "ClipRect",
 	setup() {
-		let { points: e, props: t, areaData: a, layout: u, isClipRectAnimating: d } = n(), f = o(!1);
-		s(e, (e) => {
-			e && e.length > 0 && !f.value && (f.value = !0);
-		}, { immediate: !0 });
-		let p = () => {
-			f.value = !1, d.value = !1, t.onAnimationEnd?.();
+		const { points, props, areaData, layout, isClipRectAnimating } = useAreaContext();
+		const isAnimationActive = ref(false);
+		watch(points, (newPoints) => {
+			if (newPoints && newPoints.length > 0 && !isAnimationActive.value) isAnimationActive.value = true;
+		}, { immediate: true });
+		const handleAnimationEnd = () => {
+			isAnimationActive.value = false;
+			isClipRectAnimating.value = false;
+			props.onAnimationEnd?.();
 		};
 		return () => {
-			let n = a.value?.baseLine;
-			return !e.value || e.value.length === 0 ? null : i(r, {
-				isActive: f.value,
-				transition: t.transition,
-				onAnimationStart: t.onAnimationStart,
-				onAnimationEnd: p
-			}, { default: (r) => u.value === "horizontal" ? i(c, {
-				alpha: r,
-				points: e.value,
-				baseLine: n,
-				strokeWidth: t.strokeWidth || 2
-			}, null) : i(l, {
-				alpha: r,
-				points: e.value,
-				baseLine: n,
-				strokeWidth: t.strokeWidth || 2
-			}, null) });
+			const baseLine = areaData.value?.baseLine;
+			if (!points.value || points.value.length === 0) return null;
+			return createVNode(Animate, {
+				"isActive": isAnimationActive.value,
+				"transition": props.transition,
+				"onAnimationStart": props.onAnimationStart,
+				"onAnimationEnd": handleAnimationEnd
+			}, { default: (t) => {
+				if (layout.value === "horizontal") return createVNode(HorizontalRect, {
+					"alpha": t,
+					"points": points.value,
+					"baseLine": baseLine,
+					"strokeWidth": props.strokeWidth || 2
+				}, null);
+				return createVNode(VerticalRect, {
+					"alpha": t,
+					"points": points.value,
+					"baseLine": baseLine,
+					"strokeWidth": props.strokeWidth || 2
+				}, null);
+			} });
 		};
 	}
 });
 //#endregion
-export { u as ClipRect };
+export { ClipRect };