vccs 0.2.0 → 0.3.0

package/dist/cartesian/scatter/Scatter.d.ts

@@ -148,11 +148,11 @@ export declare const Scatter: import('vue').DefineComponent<import('vue').Extrac
     xAxisId: string | number;
     line: boolean | Record<string, any>;
     dataKey: DataKey<any>;
+    transition: AnimationOptions;
     name: string | number;
     data: readonly Record<string, any>[];
     label: boolean | Record<string, any>;
     hide: boolean;
-    transition: AnimationOptions;
     tooltipType: "none";
     legendType: string;
     isAnimationActive: boolean;

package/dist/chart/RechartsWrapper.d.ts

@@ -2,7 +2,8 @@ import { CSSProperties, PropType } from 'vue';
 import { CategoricalChartFunc } from '../types';
 export declare const RechartsWrapper: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     class: {
-        type: StringConstructor;
+        type: PropType<import('../types').VueClassValue>;
+        default: any;
     };
     height: {
         type: NumberConstructor;
@@ -50,7 +51,8 @@ export declare const RechartsWrapper: import('vue').DefineComponent<import('vue'
     };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     class: {
-        type: StringConstructor;
+        type: PropType<import('../types').VueClassValue>;
+        default: any;
     };
     height: {
         type: NumberConstructor;
@@ -96,4 +98,6 @@ export declare const RechartsWrapper: import('vue').DefineComponent<import('vue'
         type: NumberConstructor;
         required: true;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{}>, {
+    class: import('../types').VueClassValue;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/chart/Surface.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties } from 'vue';
+import { VueClassValue } from '../types';
 interface SurfaceProps {
     width: number;
     height: number;
@@ -8,7 +9,7 @@ interface SurfaceProps {
         width?: number;
         height?: number;
     };
-    class?: string;
+    class?: VueClassValue;
     style?: CSSProperties;
     title?: string;
     desc?: string;

package/dist/chart/Treemap.d.ts

@@ -0,0 +1,237 @@
+import { PropType, SlotsType } from 'vue';
+import { AnimationOptions } from 'motion-v';
+import { TooltipPayloadSearcher } from '../state/tooltipSlice';
+import { TreemapLayoutNode } from './treemapUtils';
+export interface TreemapContentSlotProps extends TreemapLayoutNode {
+    index: number;
+    fill: string;
+    stroke: string;
+}
+export interface TreemapSlots {
+    content?: (props: TreemapContentSlotProps) => any;
+    default?: () => any;
+}
+/**
+ * Tooltip payload searcher for Treemap — navigates nested node structure
+ * using a path string like 'children[0].children[1]'.
+ */
+export declare const treemapPayloadSearcher: TooltipPayloadSearcher;
+export declare const TreemapVueProps: {
+    data: {
+        type: PropType<Record<string, any>[]>;
+        required: true;
+    };
+    dataKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    nameKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: NumberConstructor;
+        required: true;
+    };
+    height: {
+        type: NumberConstructor;
+        required: true;
+    };
+    aspectRatio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fill: {
+        type: StringConstructor;
+        default: string;
+    };
+    stroke: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: PropType<"flat" | "nest">;
+        default: string;
+    };
+    colorPanel: {
+        type: PropType<string[]>;
+        default: any;
+    };
+    isAnimationActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    transition: {
+        type: PropType<AnimationOptions>;
+        default: () => {
+            duration: number;
+            ease: "easeOut";
+        };
+    };
+    onClick: {
+        type: PropType<(node: any, e: MouseEvent) => void>;
+        default: any;
+    };
+    onMouseEnter: {
+        type: PropType<(node: any, e: MouseEvent) => void>;
+        default: any;
+    };
+    onMouseLeave: {
+        type: PropType<(node: any, e: MouseEvent) => void>;
+        default: any;
+    };
+};
+/**
+ * Treemap chart — hierarchical data visualization using nested rectangles.
+ *
+ * Supports `<Tooltip>` as a child component (same pattern as BarChart, LineChart, etc.).
+ *
+ * Usage:
+ * ```vue
+ * <Treemap :data="data" data-key="value" :width="600" :height="400">
+ *   <Tooltip />
+ * </Treemap>
+ * ```
+ */
+export declare const Treemap: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    data: {
+        type: PropType<Record<string, any>[]>;
+        required: true;
+    };
+    dataKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    nameKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: NumberConstructor;
+        required: true;
+    };
+    height: {
+        type: NumberConstructor;
+        required: true;
+    };
+    aspectRatio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fill: {
+        type: StringConstructor;
+        default: string;
+    };
+    stroke: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: PropType<"flat" | "nest">;
+        default: string;
+    };
+    colorPanel: {
+        type: PropType<string[]>;
+        default: any;
+    };
+    isAnimationActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    transition: {
+        type: PropType<AnimationOptions>;
+        default: () => {
+            duration: number;
+            ease: "easeOut";
+        };
+    };
+    onClick: {
+        type: PropType<(node: any, e: MouseEvent) => void>;
+        default: any;
+    };
+    onMouseEnter: {
+        type: PropType<(node: any, e: MouseEvent) => void>;
+        default: any;
+    };
+    onMouseLeave: {
+        type: PropType<(node: any, e: MouseEvent) => void>;
+        default: any;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    data: {
+        type: PropType<Record<string, any>[]>;
+        required: true;
+    };
+    dataKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    nameKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: NumberConstructor;
+        required: true;
+    };
+    height: {
+        type: NumberConstructor;
+        required: true;
+    };
+    aspectRatio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fill: {
+        type: StringConstructor;
+        default: string;
+    };
+    stroke: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: PropType<"flat" | "nest">;
+        default: string;
+    };
+    colorPanel: {
+        type: PropType<string[]>;
+        default: any;
+    };
+    isAnimationActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    transition: {
+        type: PropType<AnimationOptions>;
+        default: () => {
+            duration: number;
+            ease: "easeOut";
+        };
+    };
+    onClick: {
+        type: PropType<(node: any, e: MouseEvent) => void>;
+        default: any;
+    };
+    onMouseEnter: {
+        type: PropType<(node: any, e: MouseEvent) => void>;
+        default: any;
+    };
+    onMouseLeave: {
+        type: PropType<(node: any, e: MouseEvent) => void>;
+        default: any;
+    };
+}>> & Readonly<{}>, {
+    fill: string;
+    type: "flat" | "nest";
+    dataKey: string;
+    aspectRatio: number;
+    stroke: string;
+    transition: AnimationOptions;
+    onClick: (node: any, e: MouseEvent) => void;
+    nameKey: string;
+    isAnimationActive: boolean;
+    onMouseEnter: (node: any, e: MouseEvent) => void;
+    onMouseLeave: (node: any, e: MouseEvent) => void;
+    colorPanel: string[];
+}, SlotsType<TreemapSlots>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/chart/generateCategoricalChart.d.ts

@@ -19,7 +19,8 @@ export declare const CategoricalProps: {
         type: (NumberConstructor | StringConstructor)[];
     };
     class: {
-        type: StringConstructor;
+        type: PropType<import('../types').VueClassValue>;
+        default: any;
     };
     compact: {
         type: BooleanConstructor;

package/dist/chart/index.d.ts

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

package/dist/chart/treemapUtils.d.ts

@@ -0,0 +1,22 @@
+export interface TreemapLayoutNode {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    depth: number;
+    name: string;
+    value: number;
+    payload: Record<string, any>;
+    color?: string;
+    root: number;
+}
+export interface TreemapLayoutOptions {
+    data: Record<string, any>[];
+    width: number;
+    height: number;
+    dataKey: string;
+    aspectRatio?: number;
+    nameKey?: string;
+    colorPanel?: string[];
+}
+export declare function computeTreemapLayout(options: TreemapLayoutOptions): TreemapLayoutNode[];

package/dist/components/Customized.d.ts

@@ -0,0 +1,23 @@
+import { SlotsType } from 'vue';
+import { CartesianGraphicalItemSettings, PolarGraphicalItemSettings } from '../state/graphicalItemsSlice';
+import { DataKey } from '../types';
+export interface FormattedGraphicalItem {
+    type: string;
+    dataKey: DataKey<any> | undefined;
+    props: CartesianGraphicalItemSettings | PolarGraphicalItemSettings;
+}
+export interface CustomizedSlotProps {
+    formattedGraphicalItems: FormattedGraphicalItem[];
+    chartWidth: number;
+    chartHeight: number;
+    offset: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}
+export interface CustomizedSlots {
+    default?: (props: CustomizedSlotProps) => any;
+}
+export declare const Customized: import('vue').DefineComponent<{}, () => any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, SlotsType<CustomizedSlots>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/Text.d.ts

@@ -134,13 +134,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     x: string | number;
     y: string | number;
     value: string | number;
-    style: Record<string, any>;
-    dx: number;
-    dy: number;
-    angle: number;
     lineHeight: string | number;
     textAnchor: string;
     capHeight: string | number;
+    dx: number;
+    dy: number;
+    style: Record<string, any>;
+    angle: number;
     scaleToFit: boolean;
     verticalAnchor: string;
     breakAll: boolean;

package/dist/components/Tooltip.d.ts

@@ -224,9 +224,9 @@ export declare const Tooltip: import('vue').DefineComponent<import('vue').Extrac
         readonly default: " : ";
     };
 }>> & Readonly<{}>, {
-    readonly style: Record<string, any>;
     readonly cursor: boolean | object;
     readonly offset: number;
+    readonly style: Record<string, any>;
     readonly isAnimationActive: boolean;
     readonly includeHidden: boolean;
     readonly active: boolean;

package/dist/components/index.d.ts

@@ -1,4 +1,6 @@
 export * from './Cell';
+export * from './Customized';
 export * from './label';
 export * from './legend';
+export { default as Text } from './Text';
 export * from './Tooltip';

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/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-grid/const.mjs

@@ -90,7 +90,7 @@ var SVGElementPropKeys = [
 	"target",
 	"width",
 	"role",
-	"tabIndex",
+	"tabindex",
 	"accentHeight",
 	"accumulate",
 	"additive",

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