vccs 0.2.0 → 0.4.0

package/dist/components/label/Label.d.ts

@@ -5,8 +5,8 @@ export declare const Label: import('vue').DefineComponent<import('vue').ExtractP
         type: StringConstructor;
     };
     class: {
-        type: StringConstructor;
         default: string;
+        type: import('vue').PropType<import('../../types').VueClassValue>;
     };
     viewBox: {
         type: import('vue').PropType<import('./types').ViewBox>;
@@ -43,8 +43,8 @@ export declare const Label: import('vue').DefineComponent<import('vue').ExtractP
         type: StringConstructor;
     };
     class: {
-        type: StringConstructor;
         default: string;
+        type: import('vue').PropType<import('../../types').VueClassValue>;
     };
     viewBox: {
         type: import('vue').PropType<import('./types').ViewBox>;
@@ -75,7 +75,7 @@ export declare const Label: import('vue').DefineComponent<import('vue').ExtractP
         type: NumberConstructor;
     };
 }>> & Readonly<{}>, {
-    class: string;
+    class: import('../../types').VueClassValue;
     offset: number;
     textBreakAll: boolean;
 }, SlotsType<LabelSlots>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/label/types.d.ts

@@ -48,8 +48,8 @@ export declare const LabelVueProps: {
         type: StringConstructor;
     };
     class: {
-        type: StringConstructor;
         default: string;
+        type: PropType<import('../../types').VueClassValue>;
     };
     viewBox: {
         type: PropType<ViewBox>;

package/dist/container/Surface.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties, SVGAttributes } from 'vue';
+import { VueClassValue } from '../types';
 interface ViewBox {
     x?: number;
     y?: number;
@@ -9,7 +10,7 @@ declare const Surface: import('vue').DefineComponent<Omit<SVGAttributes, "viewBo
     width: number;
     height: number;
     viewBox?: ViewBox;
-    class?: string;
+    class?: VueClassValue;
     style?: CSSProperties;
     title?: string;
     desc?: string;
@@ -17,7 +18,7 @@ declare const Surface: import('vue').DefineComponent<Omit<SVGAttributes, "viewBo
     width: number;
     height: number;
     viewBox?: ViewBox;
-    class?: string;
+    class?: VueClassValue;
     style?: CSSProperties;
     title?: string;
     desc?: string;

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

@@ -1,3 +1,4 @@
+import { classProp } from "../../types/common.mjs";
 import { CurveVueProps } from "../../shape/Curve.mjs";
 //#region src/cartesian/area/type.ts
 var AreaVueProps = {
@@ -127,10 +128,7 @@ var AreaVueProps = {
 		default: 0
 	},
 	name: { type: [String, Number] },
-	class: {
-		type: String,
-		default: void 0
-	}
+	class: classProp
 };
 //#endregion
 export { AreaVueProps };

package/dist/es/cartesian/axis/XAxis.mjs

@@ -37,7 +37,7 @@ var XAxisImpl = /* @__PURE__ */ defineComponent({
 				"width": axisSize.value?.width,
 				"height": axisSize.value?.height,
 				"ticks": cartesianTickItems.value,
-				"class": ["v-charts-xAxis xAxis", attrs.class]
+				"class": ["v-charts-xAxis xAxis"]
 			}), { default: () => [slots.tick ? { tick: slots.tick } : void 0] });
 		};
 	}
@@ -178,7 +178,7 @@ var XAxis = /* @__PURE__ */ defineComponent({
 		},
 		domain: { type: Array },
 		axisLine: {
-			type: Boolean,
+			type: [Boolean, Object],
 			default: true
 		},
 		ticks: { type: Array },

package/dist/es/cartesian/axis/YAxis.mjs

@@ -31,7 +31,7 @@ var YAxisImpl = /* @__PURE__ */ defineComponent({
 				"width": axisSize.value?.width,
 				"height": axisSize.value?.height,
 				"ticks": cartesianTickItems.value,
-				"class": ["v-charts-yAxis yAxis", attrs.class]
+				"class": ["v-charts-yAxis yAxis"]
 			}), null);
 		};
 	}

package/dist/es/cartesian/bar/Bar.mjs

@@ -12,8 +12,8 @@ import { GraphicalItemClipPath } from "../GraphicalItemClipPath.mjs";
 import { BarBackground } from "./components/BarBackground.mjs";
 import { BarRectangles } from "./components/BarRectangles.mjs";
 import { createErrorBarRegistry, provideErrorBarContext, provideErrorBarRegistry } from "../error-bar/ErrorBarContext.mjs";
-import { Cell } from "../../components/Cell.mjs";
-import { Fragment, Teleport, computed, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+import { extractCellProps, filterOutCells } from "../../utils/cell.mjs";
+import { Teleport, computed, createVNode, defineComponent, isVNode, mergeProps } from "vue";
 //#region src/cartesian/bar/Bar.tsx
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
@@ -68,21 +68,6 @@ var Bar = /* @__PURE__ */ defineComponent({
 			});
 		}));
 		const graphicalLayerRef = useGraphicalLayerRef(null);
-		const 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;
-		};
-		const 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;
-		};
 		return () => {
 			if (!shouldRender.value) return null;
 			const defaultContent = slots.default?.() ?? [];

package/dist/es/cartesian/bar/type.mjs

@@ -1,9 +1,7 @@
+import { classProp } from "../../types/common.mjs";
 //#region src/cartesian/bar/type.ts
 var BarVueProps = {
-	class: {
-		type: String,
-		default: void 0
-	},
+	class: classProp,
 	barSize: { type: [String, Number] },
 	data: {
 		type: Array,
@@ -99,18 +97,6 @@ var BarVueProps = {
 		type: [String, Number],
 		default: 0
 	},
-	animationBegin: {
-		type: Number,
-		default: 0
-	},
-	animationDuration: {
-		type: Number,
-		default: 1500
-	},
-	animationEasing: {
-		type: String,
-		default: "ease"
-	},
 	transition: {
 		type: Object,
 		default: {

package/dist/es/cartesian/cartesian-axis/CartesianAxis.mjs

@@ -92,8 +92,7 @@ var CartesianAxis = /* @__PURE__ */ defineComponent({
 			default: "#666"
 		}
 	},
-	inheritAttrs: false,
-	setup(props, { attrs, slots }) {
+	setup(props, { slots }) {
 		const state = reactive({
 			fontSize: "",
 			letterSpacing: ""
@@ -269,7 +268,7 @@ var CartesianAxis = /* @__PURE__ */ defineComponent({
 			if (hide) return null;
 			if (width != null && width <= 0 || height != null && height <= 0) return null;
 			return createVNode(Layer, {
-				"class": ["v-charts-cartesian-axis", attrs.class],
+				"class": ["v-charts-cartesian-axis"],
 				"ref": (ref) => {
 					const elm = ref?.$el;
 					if (elm) {

package/dist/es/cartesian/cartesian-grid/const.mjs

@@ -90,7 +90,7 @@ var SVGElementPropKeys = [
 	"target",
 	"width",
 	"role",
-	"tabIndex",
+	"tabindex",
 	"accentHeight",
 	"accumulate",
 	"additive",
@@ -266,11 +266,17 @@ var SVGElementPropKeys = [
 	"stroke",
 	"stroke-dasharray",
 	"strokeDashoffset",
+	"stroke-dashoffset",
 	"strokeLinecap",
+	"stroke-linecap",
 	"strokeLinejoin",
+	"stroke-linejoin",
 	"strokeMiterlimit",
+	"stroke-miterlimit",
 	"strokeOpacity",
+	"stroke-opacity",
 	"strokeWidth",
+	"stroke-width",
 	"surfaceScale",
 	"systemLanguage",
 	"tableValues",

package/dist/es/cartesian/funnel/Funnel.mjs

@@ -7,27 +7,12 @@ import { Animate } from "../../animation/Animate.mjs";
 import { SetPolarGraphicalItem } from "../../state/SetGraphicalItem.mjs";
 import { SetLegendPayload } from "../../state/SetLegendPayload.mjs";
 import { SetTooltipEntrySettings } from "../../state/SetTooltipEntrySettings.mjs";
-import { Cell } from "../../components/Cell.mjs";
+import { extractCellProps, filterOutCells } from "../../utils/cell.mjs";
 import { Trapezoid } from "../../shape/Trapezoid.mjs";
 import { selectFunnelTrapezoids } from "../../state/selectors/funnelSelectors.mjs";
 import { FunnelVueProps } from "./type.mjs";
-import { Fragment, computed, createVNode, defineComponent, mergeProps, shallowRef } from "vue";
+import { computed, createVNode, defineComponent, mergeProps, shallowRef } from "vue";
 //#region src/cartesian/funnel/Funnel.tsx
-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;
-}
-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;
-}
 var Funnel = /* @__PURE__ */ defineComponent({
 	name: "Funnel",
 	props: FunnelVueProps,
@@ -123,7 +108,7 @@ var Funnel = /* @__PURE__ */ defineComponent({
 			cellPropsRef.value = cells;
 			const nonCellContent = cells.length > 0 ? filterOutCells(defaultContent) : defaultContent;
 			const stroke = attrs.stroke ?? props.stroke;
-			return createVNode(Layer, { "class": ["v-charts-funnel", props.className] }, { default: () => [createVNode(Animate, {
+			return createVNode(Layer, { "class": ["v-charts-funnel", props.class] }, { default: () => [createVNode(Animate, {
 				"isActive": props.isAnimationActive,
 				"from": 0,
 				"to": 1,

package/dist/es/cartesian/funnel/type.mjs

@@ -1,3 +1,4 @@
+import { classProp } from "../../types/common.mjs";
 //#region src/cartesian/funnel/type.ts
 var FunnelVueProps = {
 	data: {
@@ -67,14 +68,11 @@ var FunnelVueProps = {
 		type: Function,
 		default: void 0
 	},
-	className: {
-		type: String,
-		default: void 0
-	},
 	width: {
 		type: [Number, String],
 		default: void 0
-	}
+	},
+	class: classProp
 };
 //#endregion
 export { FunnelVueProps };

package/dist/es/cartesian/line/type.mjs

@@ -1,3 +1,4 @@
+import { classProp } from "../../types/common.mjs";
 import { CurveVueProps } from "../../shape/Curve.mjs";
 //#region src/cartesian/line/type.ts
 var LineVueProps = {
@@ -10,12 +11,6 @@ var LineVueProps = {
 		],
 		default: true
 	},
-	animationDuration: { type: Number },
-	animationEasing: { type: String },
-	animationBegin: {
-		type: Number,
-		default: 0
-	},
 	animationId: { type: String },
 	isAnimationActive: {
 		type: Boolean,
@@ -106,7 +101,7 @@ var LineVueProps = {
 		default: 0
 	},
 	name: { type: [String, Number] },
-	class: { type: String }
+	class: classProp
 };
 //#endregion
 export { LineVueProps };

package/dist/es/cartesian/reference-area/ReferenceArea.mjs

@@ -1,4 +1,5 @@
-import { isNumOrStr, isWellBehavedNumber } from "../../utils/validate.mjs";
+import { classProp } from "../../types/common.mjs";
+import { isNumOrStr } from "../../utils/validate.mjs";
 import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
 import { selectAxisScale } from "../../state/selectors/axisSelectors.mjs";
 import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
@@ -7,22 +8,8 @@ import { Label } from "../../components/label/Label.mjs";
 import { Rectangle } from "../../shape/Rectangle.mjs";
 import { addArea, removeArea } from "../../state/referenceElementsSlice.mjs";
 import { useClipPathId } from "../../chart/provideClipPathId.mjs";
+import { rangeMax, rangeMin, scaleValue } from "../../utils/scale.mjs";
 import { computed, createVNode, defineComponent, mergeProps, onMounted, onUnmounted, reactive } from "vue";
-//#region src/cartesian/reference-area/ReferenceArea.tsx
-function scaleValue(scale, value, position) {
-	const coord = scale(value);
-	if (!isWellBehavedNumber(coord)) return void 0;
-	const bandwidth = scale.bandwidth?.() ?? 0;
-	return position === "start" ? coord : coord + bandwidth;
-}
-function rangeMin(scale) {
-	const r = scale.range();
-	return Math.min(r[0], r[1]);
-}
-function rangeMax(scale) {
-	const r = scale.range();
-	return Math.max(r[0], r[1]);
-}
 var ReferenceArea = /* @__PURE__ */ defineComponent({
 	name: "ReferenceArea",
 	props: {
@@ -79,14 +66,11 @@ var ReferenceArea = /* @__PURE__ */ defineComponent({
 			type: String,
 			default: "discard"
 		},
-		className: {
-			type: String,
-			default: void 0
-		},
 		radius: {
 			type: [Number, Array],
 			default: 0
-		}
+		},
+		class: classProp
 	},
 	inheritAttrs: false,
 	setup(props, { attrs }) {
@@ -144,7 +128,7 @@ var ReferenceArea = /* @__PURE__ */ defineComponent({
 			};
 			const labelValue = props.label;
 			const labelProps = typeof labelValue === "object" && labelValue !== null ? labelValue : {};
-			return createVNode(Layer, { "class": ["v-charts-reference-area", props.className] }, { default: () => [createVNode(Rectangle, mergeProps(svgAttrs, {
+			return createVNode(Layer, { "class": ["v-charts-reference-area", props.class] }, { default: () => [createVNode(Rectangle, mergeProps(svgAttrs, {
 				"clip-path": clipPath,
 				"x": r.x,
 				"y": r.y,

package/dist/es/cartesian/reference-dot/ReferenceDot.mjs

@@ -0,0 +1,134 @@
+import { isNumOrStr } from "../../utils/validate.mjs";
+import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
+import { selectAxisScale } from "../../state/selectors/axisSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { Dot } from "../../shape/Dot.mjs";
+import { Label } from "../../components/label/Label.mjs";
+import { addDot, removeDot } from "../../state/referenceElementsSlice.mjs";
+import { useClipPathId } from "../../chart/provideClipPathId.mjs";
+import { isInRange, scaleCoord } from "../../utils/scale.mjs";
+import { computed, createVNode, defineComponent, mergeProps, onMounted, onUnmounted, reactive } from "vue";
+var ReferenceDot = /* @__PURE__ */ defineComponent({
+	name: "ReferenceDot",
+	props: {
+		x: {
+			type: [Number, String],
+			default: void 0
+		},
+		y: {
+			type: [Number, String],
+			default: void 0
+		},
+		r: {
+			type: Number,
+			default: 10
+		},
+		xAxisId: {
+			type: [Number, String],
+			default: 0
+		},
+		yAxisId: {
+			type: [Number, String],
+			default: 0
+		},
+		fill: {
+			type: String,
+			default: "#fff"
+		},
+		stroke: {
+			type: String,
+			default: "#ccc"
+		},
+		label: {
+			type: [
+				String,
+				Number,
+				Boolean,
+				Object
+			],
+			default: void 0
+		},
+		ifOverflow: {
+			type: String,
+			default: "discard"
+		}
+	},
+	inheritAttrs: false,
+	slots: Object,
+	setup(props, { attrs, slots }) {
+		const dispatch = useAppDispatch();
+		const isPanorama = useIsPanorama();
+		const clipPathId = useClipPathId();
+		const settings = reactive({
+			xAxisId: props.xAxisId,
+			yAxisId: props.yAxisId,
+			ifOverflow: props.ifOverflow,
+			x: props.x,
+			y: props.y,
+			r: props.r
+		});
+		onMounted(() => {
+			dispatch(addDot(settings));
+		});
+		onUnmounted(() => {
+			dispatch(removeDot(settings));
+		});
+		const xAxisScale = useAppSelector((state) => selectAxisScale(state, "xAxis", props.xAxisId, isPanorama));
+		const yAxisScale = useAppSelector((state) => selectAxisScale(state, "yAxis", props.yAxisId, isPanorama));
+		const dotCoord = computed(() => {
+			const xScale = xAxisScale.value;
+			const yScale = yAxisScale.value;
+			if (!xScale || !yScale) return null;
+			if (!isNumOrStr(props.x) || !isNumOrStr(props.y)) return null;
+			const cx = scaleCoord(xScale, props.x);
+			const cy = scaleCoord(yScale, props.y);
+			if (cx == null || cy == null) return null;
+			if (props.ifOverflow === "discard") {
+				if (!isInRange(xScale, cx) || !isInRange(yScale, cy)) return null;
+			}
+			return {
+				cx,
+				cy
+			};
+		});
+		return () => {
+			const coord = dotCoord.value;
+			if (!coord) return null;
+			const { cx, cy } = coord;
+			const clipPath = props.ifOverflow === "hidden" ? `url(#${clipPathId})` : void 0;
+			const { class: userClass, ...restAttrs } = attrs;
+			const svgAttrs = {
+				...restAttrs,
+				fill: props.fill,
+				stroke: props.stroke
+			};
+			const labelViewBox = {
+				x: cx - props.r,
+				y: cy - props.r,
+				width: props.r * 2,
+				height: props.r * 2
+			};
+			const labelValue = props.label;
+			const labelProps = typeof labelValue === "object" && labelValue !== null ? labelValue : {};
+			const shapeProps = {
+				...svgAttrs,
+				cx,
+				cy,
+				r: props.r,
+				clipPath
+			};
+			return createVNode(Layer, { "class": ["v-charts-reference-dot", userClass] }, { default: () => [slots.shape ? slots.shape(shapeProps) : createVNode(Dot, mergeProps(svgAttrs, {
+				"cx": cx,
+				"cy": cy,
+				"r": props.r,
+				"clip-path": clipPath
+			}), null), labelValue != null && labelValue !== false && createVNode(Label, mergeProps({
+				"viewBox": labelViewBox,
+				"value": typeof labelValue === "string" || typeof labelValue === "number" ? labelValue : void 0
+			}, labelProps), null)] });
+		};
+	}
+});
+//#endregion
+export { ReferenceDot };

package/dist/es/cartesian/reference-line/ReferenceLine.mjs

@@ -1,3 +1,4 @@
+import { classProp } from "../../types/common.mjs";
 import { isNumOrStr, isWellBehavedNumber } from "../../utils/validate.mjs";
 import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
 import { selectAxisScale, selectXAxisSettings, selectYAxisSettings } from "../../state/selectors/axisSelectors.mjs";
@@ -7,19 +8,8 @@ import { Layer } from "../../container/Layer.mjs";
 import { Label } from "../../components/label/Label.mjs";
 import { addLine, removeLine } from "../../state/referenceElementsSlice.mjs";
 import { useClipPathId } from "../../chart/provideClipPathId.mjs";
+import { isInRange, scaleCoord } from "../../utils/scale.mjs";
 import { computed, createVNode, defineComponent, mergeProps, onMounted, onUnmounted, reactive } from "vue";
-//#region src/cartesian/reference-line/ReferenceLine.tsx
-function scaleCoord(scale, value) {
-	const coord = scale(value);
-	if (!isWellBehavedNumber(coord)) return;
-	return coord + (scale.bandwidth?.() ?? 0) / 2;
-}
-function isInRange(scale, coord) {
-	const r = scale.range();
-	const min = Math.min(r[0], r[1]);
-	const max = Math.max(r[0], r[1]);
-	return coord >= min && coord <= max;
-}
 var ReferenceLine = /* @__PURE__ */ defineComponent({
 	name: "ReferenceLine",
 	props: {
@@ -64,10 +54,7 @@ var ReferenceLine = /* @__PURE__ */ defineComponent({
 			type: String,
 			default: "discard"
 		},
-		className: {
-			type: String,
-			default: void 0
-		}
+		class: classProp
 	},
 	inheritAttrs: false,
 	setup(props, { attrs }) {
@@ -135,9 +122,9 @@ var ReferenceLine = /* @__PURE__ */ defineComponent({
 			const clipPath = props.ifOverflow === "hidden" ? `url(#${clipPathId})` : void 0;
 			const svgAttrs = {
 				...attrs,
-				stroke: props.stroke,
+				"stroke": props.stroke,
 				"stroke-width": props.strokeWidth,
-				fill: props.fill
+				"fill": props.fill
 			};
 			const labelViewBox = {
 				x: Math.min(p1.x, p2.x),
@@ -147,7 +134,7 @@ var ReferenceLine = /* @__PURE__ */ defineComponent({
 			};
 			const labelValue = props.label;
 			const labelProps = typeof labelValue === "object" && labelValue !== null ? labelValue : {};
-			return createVNode(Layer, { "class": ["v-charts-reference-line", props.className] }, { default: () => [createVNode("line", mergeProps(svgAttrs, {
+			return createVNode(Layer, { "class": ["v-charts-reference-line", props.class] }, { default: () => [createVNode("line", mergeProps(svgAttrs, {
 				"clip-path": clipPath,
 				"x1": p1.x,
 				"y1": p1.y,

package/dist/es/chart/RechartsWrapper.mjs

@@ -1,3 +1,4 @@
+import { classProp } from "../types/common.mjs";
 import { getChartPointer } from "../utils/chart.mjs";
 import { mouseLeaveChart } from "../state/tooltipSlice.mjs";
 import { useAppDispatch } from "../state/hooks.mjs";
@@ -14,7 +15,7 @@ import { createVNode, defineComponent, ref } from "vue";
 var RechartsWrapper = /* @__PURE__ */ defineComponent({
 	name: "RechartsWrapper",
 	props: {
-		class: { type: String },
+		class: classProp,
 		height: {
 			type: Number,
 			required: true