vccs 0.3.0 → 0.4.0

package/dist/cartesian/axis/XAxis.d.ts

@@ -63,7 +63,7 @@ export declare const XAxis: import('vue').DefineComponent<import('vue').ExtractP
         type: PropType<AxisDomain>;
     };
     axisLine: {
-        type: BooleanConstructor;
+        type: (ObjectConstructor | BooleanConstructor)[];
         default: boolean;
     };
     ticks: {
@@ -146,7 +146,7 @@ export declare const XAxis: import('vue').DefineComponent<import('vue').ExtractP
         type: PropType<AxisDomain>;
     };
     axisLine: {
-        type: BooleanConstructor;
+        type: (ObjectConstructor | BooleanConstructor)[];
         default: boolean;
     };
     ticks: {
@@ -184,6 +184,6 @@ export declare const XAxis: import('vue').DefineComponent<import('vue').ExtractP
     allowDecimals: boolean;
     mirror: boolean;
     minTickGap: number;
-    axisLine: boolean;
+    axisLine: boolean | Record<string, any>;
     tickLine: boolean | Record<string, any>;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/cartesian/cartesian-axis/CartesianAxis.d.ts

@@ -3,7 +3,7 @@ import { VueClassValue } from '../../types/common';
 import { AxisInterval } from '../../types/axis';
 import { RechartsScale } from '../../types/scale';
 import { CartesianTickItem } from '../../types/tick';
-import { PropType } from 'vue';
+import { PropType, SVGAttributes } from 'vue';
 /** The orientation of the axis in correspondence to the chart */
 export type Orientation = 'top' | 'bottom' | 'left' | 'right';
 /** A unit to be appended to a value */
@@ -30,7 +30,7 @@ export interface CartesianAxisProps {
     interval?: AxisInterval;
     angle?: number;
     scale: RechartsScale;
-    axisLine?: string;
+    axisLine?: boolean | SVGAttributes;
 }
 export declare const CartesianAxis: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     x: {
@@ -68,7 +68,7 @@ export declare const CartesianAxis: import('vue').DefineComponent<import('vue').
         default: boolean;
     };
     axisLine: {
-        type: (ObjectConstructor | BooleanConstructor)[];
+        type: PropType<boolean | SVGAttributes>;
         default: () => boolean;
     };
     tickLine: {
@@ -146,7 +146,7 @@ export declare const CartesianAxis: import('vue').DefineComponent<import('vue').
         default: boolean;
     };
     axisLine: {
-        type: (ObjectConstructor | BooleanConstructor)[];
+        type: PropType<boolean | SVGAttributes>;
         default: () => boolean;
     };
     tickLine: {
@@ -203,7 +203,7 @@ export declare const CartesianAxis: import('vue').DefineComponent<import('vue').
     hide: boolean;
     mirror: boolean;
     minTickGap: number;
-    axisLine: boolean | Record<string, any>;
+    axisLine: boolean;
     tickLine: boolean | Record<string, any>;
     tickSize: number;
     tickMargin: number;

package/dist/components/Text.d.ts

@@ -1,4 +1,13 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: SVGTextElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     x: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
@@ -146,4 +155,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     breakAll: boolean;
     maxLines: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, SVGTextElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Tooltip.d.ts

@@ -1,8 +1,9 @@
 import { PropType, SlotsType } from 'vue';
 import { TooltipIndex, TooltipPayload, TooltipPayloadEntry } from '../state/tooltipSlice';
 import { AxisId } from '../state/cartesianAxisSlice';
-import { ChartCoordinate, Coordinate } from '../types';
+import { ChartCoordinate, Coordinate, LayoutType } from '../types';
 import { TooltipTrigger } from '../types/tooltip';
+import { Point } from '../shape';
 export type ContentType = any | ((props: TooltipContentProps) => any);
 export type TooltipContentProps = {
     label?: string | number;
@@ -16,6 +17,49 @@ type AllowInDimension = {
     x: boolean;
     y: boolean;
 };
+type CursorSlotCommon = {
+    class: string | string[];
+    style: {
+        pointerEvents: 'none';
+    };
+    /** Chart area offset — same fields spread by Recharts: left, top, width, height */
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    payload: TooltipPayload;
+    /** Active tooltip index — named payloadIndex to match Recharts */
+    payloadIndex: string | undefined;
+    [key: string]: any;
+};
+export type CrossCursorSlotProps = CursorSlotCommon & {
+    stroke: string;
+    fill: string;
+    x: number;
+    y: number;
+};
+export type RectangleCursorSlotProps = CursorSlotCommon & {
+    stroke: string;
+    fill: string;
+    x: number;
+    y: number;
+};
+export type SectorCursorSlotProps = CursorSlotCommon & {
+    stroke: string;
+    fill: string;
+    cx: number;
+    cy: number;
+    startAngle: number;
+    endAngle: number;
+    innerRadius: number;
+    outerRadius: number;
+};
+export type CurveCursorSlotProps = CursorSlotCommon & {
+    stroke: string;
+    layout: LayoutType;
+    points: ReadonlyArray<Point>;
+};
+export type CursorSlotProps = CrossCursorSlotProps | RectangleCursorSlotProps | SectorCursorSlotProps | CurveCursorSlotProps;
 type UniqueFunc<T> = (entry: T) => unknown;
 export type UniqueOption<T> = boolean | UniqueFunc<T>;
 export declare function getUniqPayload<T>(payload: ReadonlyArray<T>, option: UniqueOption<T>, defaultUniqBy: UniqueFunc<T>): ReadonlyArray<T>;
@@ -244,7 +288,7 @@ export declare const Tooltip: import('vue').DefineComponent<import('vue').Extrac
     readonly filterNull: boolean;
 }, SlotsType<{
     content?: (props: TooltipContentProps) => any;
-    cursor?: (props: Record<string, any>) => any;
+    cursor?: (props: CursorSlotProps) => any;
     default?: () => any;
 }>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default Tooltip;

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/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

@@ -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/components/Text.vue_vue_type_script_setup_true_lang.mjs

@@ -1,6 +1,6 @@
 import { getStringSize } from "../utils/attrs.mjs";
 import { reduceCSSCalc } from "../utils/ReduceCSSCalc.mjs";
-import { Fragment, computed, createElementBlock, defineComponent, normalizeStyle, openBlock, renderList, toDisplayString } from "vue";
+import { Fragment, computed, createElementBlock, defineComponent, normalizeStyle, openBlock, renderList, renderSlot, toDisplayString } from "vue";
 //#region src/components/Text.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"x",
@@ -177,13 +177,13 @@ var Text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 				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) => {
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [(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);
+			}), 128))])], 12, _hoisted_1);
 		};
 	}
 });

package/dist/es/components/Tooltip.mjs

@@ -235,17 +235,15 @@ var Cursor = /* @__PURE__ */ defineComponent({
 			let cursorElement;
 			if (isScatterChart) {
 				const { offset: _offset, ...coord } = props.coordinate;
-				const { top, left, width, height } = offset.value;
 				const crossProps = {
 					stroke: "#ccc",
 					fill: "none",
+					...offset.value,
 					...coord,
-					top,
-					left,
-					width,
-					height,
 					class: "v-charts-tooltip-cursor",
 					style: { pointerEvents: "none" },
+					payload: props.payload ?? [],
+					payloadIndex: props.index,
 					...cursorSvgProps
 				};
 				cursorElement = props.cursorSlot ? props.cursorSlot(crossProps) : createVNode(Cross, crossProps, null);
@@ -255,6 +253,7 @@ var Cursor = /* @__PURE__ */ defineComponent({
 				const coord = props.coordinate;
 				const off = offset.value;
 				const rectProps = {
+					...off,
 					stroke: "none",
 					fill: "#ccc",
 					x: layout.value === "horizontal" ? coord.x - halfSize : off.left + .5,
@@ -263,32 +262,40 @@ var Cursor = /* @__PURE__ */ defineComponent({
 					height: layout.value === "horizontal" ? off.height - 1 : bandSize,
 					class: "v-charts-tooltip-cursor",
 					style: { pointerEvents: "none" },
+					payload: props.payload ?? [],
+					payloadIndex: props.index,
 					...cursorSvgProps
 				};
 				cursorElement = props.cursorSlot ? props.cursorSlot(rectProps) : createVNode(Rectangle, rectProps, null);
 			} else if (layout.value === "radial" && props.coordinate?.cx != null) {
 				const radialPoints = points.value;
 				const sectorProps = {
+					stroke: "#ccc",
+					...offset.value,
 					cx: radialPoints.cx,
 					cy: radialPoints.cy,
 					startAngle: radialPoints.startAngle,
 					endAngle: radialPoints.endAngle,
 					innerRadius: radialPoints.radius,
 					outerRadius: radialPoints.radius,
-					stroke: "#ccc",
 					fill: "none",
 					class: "v-charts-tooltip-cursor",
 					style: { pointerEvents: "none" },
+					payload: props.payload ?? [],
+					payloadIndex: props.index,
 					...cursorSvgProps
 				};
 				cursorElement = props.cursorSlot ? props.cursorSlot(sectorProps) : createVNode(Sector, sectorProps, null);
 			} else {
 				const cursorProps = {
 					stroke: "#ccc",
-					class: ["v-charts-tooltip-cursor"],
+					...offset.value,
 					layout: layout.value,
 					points: points.value,
+					class: ["v-charts-tooltip-cursor"],
 					style: { pointerEvents: "none" },
+					payload: props.payload ?? [],
+					payloadIndex: props.index,
 					...cursorSvgProps
 				};
 				cursorElement = props.cursorSlot ? props.cursorSlot(cursorProps) : createVNode(Curve, cursorProps, null);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vccs",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Composable charting components for Vue 3 — an unofficial port of Recharts",
   "author": "rick-hup",
   "license": "MIT",