vccs 0.1.0 → 0.3.0

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

@@ -1,13 +1,19 @@
-import { isNumber as e } from "../../utils/validate.mjs";
-import { filterProps as t } from "../../utils/VueUtils.mjs";
-import { Layer as n } from "../../container/Layer.mjs";
-import r from "../../components/Text.mjs";
-import { Label as i } from "../../components/label/Label.mjs";
-import { getTicks as a } from "../utils/get-ticks.mjs";
-import { createVNode as o, defineComponent as s, mergeProps as c, reactive as l } from "vue";
-import { get as u } from "es-toolkit/compat";
+import { isNumber } from "../../utils/validate.mjs";
+import { filterProps } from "../../utils/VueUtils.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import Text_default from "../../components/Text.mjs";
+import { Label } from "../../components/label/Label.mjs";
+import { getTicks } from "../utils/get-ticks.mjs";
+import { createVNode, defineComponent, mergeProps, reactive } from "vue";
+import { get } from "es-toolkit/compat";
 //#region src/cartesian/cartesian-axis/CartesianAxis.tsx
-var d = /* @__PURE__ */ s({
+/**
+* @fileOverview Cartesian Axis
+*/
+/** The orientation of the axis in correspondence to the chart */
+/** A unit to be appended to a value */
+/** The formatter function of tick */
+var CartesianAxis = /* @__PURE__ */ defineComponent({
 	name: "CartesianAxis",
 	props: {
 		x: {
@@ -42,19 +48,19 @@ var d = /* @__PURE__ */ s({
 		},
 		tick: {
 			type: Boolean,
-			default: !0
+			default: true
 		},
 		axisLine: {
 			type: [Boolean, Object],
-			default: () => !0
+			default: () => true
 		},
 		tickLine: {
 			type: [Boolean, Object],
-			default: () => !0
+			default: () => true
 		},
 		mirror: {
 			type: Boolean,
-			default: !1
+			default: false
 		},
 		tickMargin: {
 			type: Number,
@@ -86,161 +92,205 @@ var d = /* @__PURE__ */ s({
 			default: "#666"
 		}
 	},
-	inheritAttrs: !1,
-	setup(s, { attrs: d, slots: f }) {
-		let p = l({
+	inheritAttrs: false,
+	setup(props, { attrs, slots }) {
+		const state = reactive({
 			fontSize: "",
 			letterSpacing: ""
-		}), m = (t) => {
-			let { x: n, y: r, width: i, height: a, orientation: o, tickSize: c, mirror: l, tickMargin: u } = s, d, f, p, m, h, g, _ = l ? -1 : 1, v = t.tickSize || c, y = e(t.tickCoord) ? t.tickCoord : t.coordinate;
-			switch (o) {
+		});
+		const getTickLineCoord = (data) => {
+			const { x, y, width, height, orientation, tickSize, mirror, tickMargin } = props;
+			let x1, x2, y1, y2, tx, ty;
+			const sign = mirror ? -1 : 1;
+			const finalTickSize = data.tickSize || tickSize;
+			const tickCoord = isNumber(data.tickCoord) ? data.tickCoord : data.coordinate;
+			switch (orientation) {
 				case "top":
-					d = f = t.coordinate, m = r + +!l * a, p = m - _ * v, g = p - _ * u, h = y;
+					x1 = x2 = data.coordinate;
+					y2 = y + +!mirror * height;
+					y1 = y2 - sign * finalTickSize;
+					ty = y1 - sign * tickMargin;
+					tx = tickCoord;
 					break;
 				case "left":
-					p = m = t.coordinate, f = n + +!l * i, d = f - _ * v, h = d - _ * u, g = y;
+					y1 = y2 = data.coordinate;
+					x2 = x + +!mirror * width;
+					x1 = x2 - sign * finalTickSize;
+					tx = x1 - sign * tickMargin;
+					ty = tickCoord;
 					break;
 				case "right":
-					p = m = t.coordinate, f = n + +l * i, d = f + _ * v, h = d + _ * u, g = y;
+					y1 = y2 = data.coordinate;
+					x2 = x + +mirror * width;
+					x1 = x2 + sign * finalTickSize;
+					tx = x1 + sign * tickMargin;
+					ty = tickCoord;
 					break;
 				default:
-					d = f = t.coordinate, m = r + +l * a, p = m + _ * v, g = p + _ * u, h = y;
+					x1 = x2 = data.coordinate;
+					y2 = y + +mirror * height;
+					y1 = y2 + sign * finalTickSize;
+					ty = y1 + sign * tickMargin;
+					tx = tickCoord;
 					break;
 			}
 			return {
 				line: {
-					x1: d,
-					y1: p,
-					x2: f,
-					y2: m
+					x1,
+					y1,
+					x2,
+					y2
 				},
 				tick: {
-					x: h,
-					y: g
+					x: tx,
+					y: ty
 				}
 			};
-		}, h = () => {
-			let { orientation: e, mirror: t } = s, n;
-			switch (e) {
+		};
+		const getTickTextAnchor = () => {
+			const { orientation, mirror } = props;
+			let textAnchor;
+			switch (orientation) {
 				case "left":
-					n = t ? "start" : "end";
+					textAnchor = mirror ? "start" : "end";
 					break;
 				case "right":
-					n = t ? "end" : "start";
+					textAnchor = mirror ? "end" : "start";
 					break;
 				default:
-					n = "middle";
+					textAnchor = "middle";
 					break;
 			}
-			return n;
-		}, g = () => {
-			let { orientation: e, mirror: t } = s;
-			switch (e) {
+			return textAnchor;
+		};
+		const getTickVerticalAnchor = () => {
+			const { orientation, mirror } = props;
+			switch (orientation) {
 				case "left":
 				case "right": return "middle";
-				case "top": return t ? "start" : "end";
-				default: return t ? "end" : "start";
+				case "top": return mirror ? "start" : "end";
+				default: return mirror ? "end" : "start";
 			}
-		}, _ = () => {
-			let { x: e, y: n, width: r, height: i, orientation: a, mirror: l, axisLine: d } = s, f = {
-				...t(s, !1),
-				...t(d, !1),
+		};
+		const renderAxisLine = () => {
+			const { x, y, width, height, orientation, mirror, axisLine } = props;
+			let lineProps = {
+				...filterProps(props, false),
+				...filterProps(axisLine, false),
 				fill: "none",
 				x1: 0,
 				y1: 0,
 				x2: 0,
 				y2: 0
 			};
-			if (a === "top" || a === "bottom") {
-				let t = +(a === "top" && !l || a === "bottom" && l);
-				f = {
-					...f,
-					x1: e,
-					y1: n + t * i,
-					x2: e + r,
-					y2: n + t * i
+			if (orientation === "top" || orientation === "bottom") {
+				const needHeight = +(orientation === "top" && !mirror || orientation === "bottom" && mirror);
+				lineProps = {
+					...lineProps,
+					x1: x,
+					y1: y + needHeight * height,
+					x2: x + width,
+					y2: y + needHeight * height
 				};
 			} else {
-				let t = +(a === "left" && !l || a === "right" && l);
-				f = {
-					...f,
-					x1: e + t * r,
-					y1: n,
-					x2: e + t * r,
-					y2: n + i
+				const needWidth = +(orientation === "left" && !mirror || orientation === "right" && mirror);
+				lineProps = {
+					...lineProps,
+					x1: x + needWidth * width,
+					y1: y,
+					x2: x + needWidth * width,
+					y2: y + height
 				};
 			}
-			return o("line", c(f, { class: ["v-charts-cartesian-axis-line", u(d, "class")] }), null);
+			return createVNode("line", mergeProps(lineProps, { "class": ["v-charts-cartesian-axis-line", get(axisLine, "class")] }), null);
 		};
-		function v(e, t) {
-			return o(r, c(e, {
-				class: ["v-charts-cartesian-axis-tick-value", e.class],
-				value: t
+		function renderTickItem(props, value) {
+			const className = ["v-charts-cartesian-axis-tick-value", props.class];
+			return createVNode(Text_default, mergeProps(props, {
+				"class": className,
+				"value": value
 			}), null);
 		}
-		let y = (e, r, i) => {
-			let { tickLine: s, stroke: l, tick: d, tickFormatter: p, unit: _ } = e, y = a(e, r, i), b = h(), x = g(), S = t(e, !1), C = t(d, !1), w = {
-				...S,
+		const renderTicks = (props, fontSize, letterSpacing) => {
+			const { tickLine, stroke, tick, tickFormatter, unit } = props;
+			const finalTicks = getTicks(props, fontSize, letterSpacing);
+			const textAnchor = getTickTextAnchor();
+			const verticalAnchor = getTickVerticalAnchor();
+			const axisProps = filterProps(props, false);
+			const customTickProps = filterProps(tick, false);
+			const tickLineProps = {
+				...axisProps,
 				fill: "none",
-				...t(s, !1)
-			}, T = y.map((e, t) => {
-				let { line: r, tick: i } = m(e), a = {
-					textAnchor: b,
-					verticalAnchor: x,
-					...S,
+				...filterProps(tickLine, false)
+			};
+			const items = finalTicks.map((entry, i) => {
+				const { line: lineCoord, tick: tickCoord } = getTickLineCoord(entry);
+				const tickProps = {
+					textAnchor,
+					verticalAnchor,
+					...axisProps,
 					stroke: "none",
-					fill: l,
-					...C,
-					...i,
-					index: t,
-					payload: e,
-					visibleTicksCount: y.length,
-					tickFormatter: p
+					fill: stroke,
+					...customTickProps,
+					...tickCoord,
+					index: i,
+					payload: entry,
+					visibleTicksCount: finalTicks.length,
+					tickFormatter
 				};
-				return o(n, {
-					class: "v-charts-cartesian-axis-tick",
-					key: `tick-${e.value}-${e.coordinate}-${e.tickCoord}`
-				}, { default: () => [s && o("line", c(w, r, { class: ["v-charts-cartesian-axis-tick-line", u(s, "class")] }), null), d && (f.tick ? f.tick({
-					...a,
-					value: e.value
-				}) : v(a, `${typeof p == "function" ? p(e.value, t) : e.value}${_ || ""}`))] });
+				return createVNode(Layer, {
+					"class": "v-charts-cartesian-axis-tick",
+					"key": `tick-${entry.value}-${entry.coordinate}-${entry.tickCoord}`
+				}, { default: () => [tickLine && createVNode("line", mergeProps(tickLineProps, lineCoord, { "class": ["v-charts-cartesian-axis-tick-line", get(tickLine, "class")] }), null), tick && (slots.tick ? slots.tick({
+					...tickProps,
+					value: entry.value
+				}) : renderTickItem(tickProps, `${typeof tickFormatter === "function" ? tickFormatter(entry.value, i) : entry.value}${unit || ""}`))] });
 			});
-			return T.length > 0 ? o("g", { class: "v-charts-cartesian-axis-ticks" }, [T]) : null;
-		}, b = () => {
-			let { label: e, x: t, y: n, width: r, height: a } = s;
-			if (!e) return null;
-			let l = {
-				x: t,
-				y: n,
-				width: r,
-				height: a
+			return items.length > 0 ? createVNode("g", { "class": "v-charts-cartesian-axis-ticks" }, [items]) : null;
+		};
+		const renderLabel = () => {
+			const { label, x, y, width, height } = props;
+			if (!label) return null;
+			const axisViewBox = {
+				x,
+				y,
+				width,
+				height
 			};
-			return typeof e == "string" || typeof e == "number" ? o(i, {
-				value: e,
-				viewBox: l
-			}, null) : typeof e == "object" ? o(i, c(e, { viewBox: l }), null) : null;
+			if (typeof label === "string" || typeof label === "number") return createVNode(Label, {
+				"value": label,
+				"viewBox": axisViewBox
+			}, null);
+			if (typeof label === "object") return createVNode(Label, mergeProps(label, { "viewBox": axisViewBox }), null);
+			return null;
 		};
 		return () => {
-			let { axisLine: e, width: t, height: r, hide: i } = s;
-			return i || t != null && t <= 0 || r != null && r <= 0 ? null : o(n, {
-				class: ["v-charts-cartesian-axis", d.class],
-				ref: (e) => {
-					let t = e?.$el;
-					if (t) {
-						let e = t?.getElementsByClassName("v-charts-cartesian-axis-tick-value")[0];
-						if (e) {
-							let t = window.getComputedStyle(e).fontSize, n = window.getComputedStyle(e).letterSpacing;
-							(t !== p.fontSize || n !== p.letterSpacing) && (p.fontSize = window.getComputedStyle(e).fontSize, p.letterSpacing = window.getComputedStyle(e).letterSpacing);
+			const { axisLine, width, height, hide } = props;
+			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],
+				"ref": (ref) => {
+					const elm = ref?.$el;
+					if (elm) {
+						const tick = elm?.getElementsByClassName("v-charts-cartesian-axis-tick-value")[0];
+						if (tick) {
+							const calculatedFontSize = window.getComputedStyle(tick).fontSize;
+							const calculatedLetterSpacing = window.getComputedStyle(tick).letterSpacing;
+							if (calculatedFontSize !== state.fontSize || calculatedLetterSpacing !== state.letterSpacing) {
+								state.fontSize = window.getComputedStyle(tick).fontSize;
+								state.letterSpacing = window.getComputedStyle(tick).letterSpacing;
+							}
 						}
 					}
 				}
 			}, { default: () => [
-				e && _(),
-				y(s, p.fontSize, p.letterSpacing),
-				b()
+				axisLine && renderAxisLine(),
+				renderTicks(props, state.fontSize, state.letterSpacing),
+				renderLabel()
 			] });
 		};
 	}
 });
 //#endregion
-export { d as CartesianAxis };
+export { CartesianAxis };

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

@@ -1,8 +1,8 @@
-import { createVNode as e, defineComponent as t } from "vue";
+import { createVNode, defineComponent } from "vue";
 //#region src/cartesian/cartesian-grid/Background.tsx
-var n = /* @__PURE__ */ t({
+var Background = /* @__PURE__ */ defineComponent({
 	name: "Background",
-	inheritAttrs: !1,
+	inheritAttrs: false,
 	props: {
 		fill: String,
 		fillOpacity: Number,
@@ -12,19 +12,22 @@ var n = /* @__PURE__ */ t({
 		height: Number,
 		ry: Number
 	},
-	setup(t) {
-		return () => !t.fill || t.fill === "none" ? null : e("rect", {
-			x: t.x,
-			y: t.y,
-			ry: t.ry,
-			width: t.width,
-			height: t.height,
-			stroke: "none",
-			fill: t.fill,
-			"fill-opacity": t.fillOpacity,
-			class: "v-charts-cartesian-grid-bg"
-		}, null);
+	setup(props) {
+		return () => {
+			if (!props.fill || props.fill === "none") return null;
+			return createVNode("rect", {
+				"x": props.x,
+				"y": props.y,
+				"ry": props.ry,
+				"width": props.width,
+				"height": props.height,
+				"stroke": "none",
+				"fill": props.fill,
+				"fill-opacity": props.fillOpacity,
+				"class": "v-charts-cartesian-grid-bg"
+			}, null);
+		};
 	}
 });
 //#endregion
-export { n as default };
+export { Background as default };