vccs 0.1.0 → 0.3.0

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

@@ -1,12 +1,15 @@
-import { useIsPanorama as e } from "../../context/PanoramaContextProvider.mjs";
-import { selectAxisViewBox as t } from "../../state/selectors/selectChartOffset.mjs";
-import { implicitXAxis as n, selectAxisScale as r, selectTicksOfAxis as i, selectXAxisPosition as a, selectXAxisSize as o } from "../../state/selectors/axisSelectors.mjs";
-import { useAppDispatch as s, useAppSelector as c } from "../../state/hooks.mjs";
-import { addXAxis as l, removeXAxis as u } from "../../state/cartesianAxisSlice.mjs";
-import { CartesianAxis as d } from "../cartesian-axis/CartesianAxis.mjs";
-import { createVNode as f, defineComponent as p, mergeProps as m, watchEffect as h } from "vue";
+import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
+import { selectAxisViewBox } from "../../state/selectors/selectChartOffset.mjs";
+import { implicitXAxis, selectAxisScale, selectTicksOfAxis, selectXAxisPosition, selectXAxisSize } from "../../state/selectors/axisSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
+import { addXAxis, removeXAxis } from "../../state/cartesianAxisSlice.mjs";
+import { CartesianAxis } from "../cartesian-axis/CartesianAxis.mjs";
+import { createVNode, defineComponent, mergeProps, watchEffect } from "vue";
 //#region src/cartesian/axis/XAxis.tsx
-var g = /* @__PURE__ */ p({
+/**
+* @fileOverview X Axis
+*/
+var XAxisImpl = /* @__PURE__ */ defineComponent({
 	props: {
 		xAxisId: {
 			type: [String, Number],
@@ -14,24 +17,32 @@ var g = /* @__PURE__ */ p({
 		},
 		ticks: Array
 	},
-	inheritAttrs: !1,
-	setup(n, { attrs: s, slots: l }) {
-		let u = e(), p = "xAxis", h = c((e) => r(e, p, n.xAxisId, u)), g = c((e) => o(e, n.xAxisId)), _ = c((e) => a(e, n.xAxisId)), v = c((e) => i(e, p, n.xAxisId, u)), y = c(t);
+	inheritAttrs: false,
+	setup(props, { attrs, slots }) {
+		const isPanorama = useIsPanorama();
+		const axisType = "xAxis";
+		const scale = useAppSelector((state) => selectAxisScale(state, axisType, props.xAxisId, isPanorama));
+		const axisSize = useAppSelector((state) => selectXAxisSize(state, props.xAxisId));
+		const position = useAppSelector((state) => selectXAxisPosition(state, props.xAxisId));
+		const cartesianTickItems = useAppSelector((state) => selectTicksOfAxis(state, axisType, props.xAxisId, isPanorama));
+		const viewBox = useAppSelector(selectAxisViewBox);
 		return () => {
-			let { ticks: e, ...t } = n;
-			return g.value == null || _.value == null ? null : f(d, m(t, s, {
-				viewBox: y.value,
-				scale: h.value,
-				x: _.value?.x,
-				y: _.value?.y,
-				width: g.value?.width,
-				height: g.value?.height,
-				ticks: v.value,
-				class: ["v-charts-xAxis xAxis", s.class]
-			}), { default: () => [l.tick ? { tick: l.tick } : void 0] });
+			const { ticks, ...allOtherProps } = props;
+			if (axisSize.value == null || position.value == null) return null;
+			return createVNode(CartesianAxis, mergeProps(allOtherProps, attrs, {
+				"viewBox": viewBox.value,
+				"scale": scale.value,
+				"x": position.value?.x,
+				"y": position.value?.y,
+				"width": axisSize.value?.width,
+				"height": axisSize.value?.height,
+				"ticks": cartesianTickItems.value,
+				"class": ["v-charts-xAxis xAxis", attrs.class]
+			}), { default: () => [slots.tick ? { tick: slots.tick } : void 0] });
 		};
 	}
-}), _ = /* @__PURE__ */ p({
+});
+var XAxisSettingsDispatcher = /* @__PURE__ */ defineComponent({
 	props: {
 		interval: [String, Number],
 		xAxisId: [String, Number],
@@ -61,94 +72,97 @@ var g = /* @__PURE__ */ p({
 		minTickGap: Number,
 		tick: {
 			type: [Boolean, Object],
-			default: !0
+			default: true
 		},
 		tickFormatter: Function
 	},
-	setup(e, { slots: t }) {
-		let n = s();
-		return h((t) => {
-			let r = {
-				interval: e.interval ?? "preserveEnd",
-				id: e.xAxisId,
-				scale: e.scale,
-				type: e.type,
-				padding: e.padding,
-				allowDataOverflow: e.allowDataOverflow,
-				domain: e.domain,
-				dataKey: e.dataKey,
-				allowDuplicatedCategory: e.allowDuplicatedCategory,
-				allowDecimals: e.allowDecimals,
-				tickCount: e.tickCount,
-				includeHidden: e.includeHidden ?? !1,
-				reversed: e.reversed,
-				ticks: e.ticks,
-				height: e.height,
-				orientation: e.orientation,
-				mirror: e.mirror,
-				hide: e.hide,
-				unit: e.unit,
-				name: e.name,
-				angle: e.angle ?? 0,
-				minTickGap: e.minTickGap ?? 5,
-				tick: e.tick ?? !0,
-				tickFormatter: e.tickFormatter
+	setup(props, { slots: dispatcherSlots }) {
+		const dispatch = useAppDispatch();
+		watchEffect((onCleanup) => {
+			const settings = {
+				interval: props.interval ?? "preserveEnd",
+				id: props.xAxisId,
+				scale: props.scale,
+				type: props.type,
+				padding: props.padding,
+				allowDataOverflow: props.allowDataOverflow,
+				domain: props.domain,
+				dataKey: props.dataKey,
+				allowDuplicatedCategory: props.allowDuplicatedCategory,
+				allowDecimals: props.allowDecimals,
+				tickCount: props.tickCount,
+				includeHidden: props.includeHidden ?? false,
+				reversed: props.reversed,
+				ticks: props.ticks,
+				height: props.height,
+				orientation: props.orientation,
+				mirror: props.mirror,
+				hide: props.hide,
+				unit: props.unit,
+				name: props.name,
+				angle: props.angle ?? 0,
+				minTickGap: props.minTickGap ?? 5,
+				tick: props.tick ?? true,
+				tickFormatter: props.tickFormatter
 			};
-			n(l(r)), t(() => {
-				n(u(r));
+			dispatch(addXAxis(settings));
+			onCleanup(() => {
+				dispatch(removeXAxis(settings));
 			});
-		}), () => f(g, e, { default: () => [t.tick ? { tick: t.tick } : void 0] });
+		});
+		return () => createVNode(XAxisImpl, props, { default: () => [dispatcherSlots.tick ? { tick: dispatcherSlots.tick } : void 0] });
 	}
-}), v = /* @__PURE__ */ p({
+});
+var XAxis = /* @__PURE__ */ defineComponent({
 	name: "XAxis",
 	props: {
 		allowDataOverflow: {
 			type: Boolean,
-			default: n.allowDataOverflow
+			default: implicitXAxis.allowDataOverflow
 		},
 		allowDecimals: {
 			type: Boolean,
-			default: n.allowDecimals
+			default: implicitXAxis.allowDecimals
 		},
 		allowDuplicatedCategory: {
 			type: Boolean,
-			default: n.allowDuplicatedCategory
+			default: implicitXAxis.allowDuplicatedCategory
 		},
 		height: {
 			type: Number,
-			default: n.height
+			default: implicitXAxis.height
 		},
 		hide: {
 			type: Boolean,
-			default: !1
+			default: false
 		},
 		mirror: {
 			type: Boolean,
-			default: n.mirror
+			default: implicitXAxis.mirror
 		},
 		orientation: {
 			type: String,
-			default: n.orientation
+			default: implicitXAxis.orientation
 		},
 		padding: {
 			type: Object,
-			default: n.padding
+			default: implicitXAxis.padding
 		},
 		reversed: {
 			type: Boolean,
-			default: n.reversed
+			default: implicitXAxis.reversed
 		},
 		scale: {
 			type: [String, Function],
-			default: n.scale
+			default: implicitXAxis.scale
 		},
 		tickCount: {
 			type: Number,
-			default: n.tickCount
+			default: implicitXAxis.tickCount
 		},
 		type: {
 			type: String,
-			default: n.type
+			default: implicitXAxis.type
 		},
 		xAxisId: {
 			type: [String, Number],
@@ -165,14 +179,14 @@ var g = /* @__PURE__ */ p({
 		domain: { type: Array },
 		axisLine: {
 			type: Boolean,
-			default: !0
+			default: true
 		},
 		ticks: { type: Array },
 		interval: { type: [String, Number] },
 		unit: { type: String },
 		tickLine: {
 			type: [Boolean, Object],
-			default: !0
+			default: true
 		},
 		tickMargin: Number,
 		minTickGap: {
@@ -181,9 +195,9 @@ var g = /* @__PURE__ */ p({
 		},
 		tickFormatter: Function
 	},
-	setup(e, { attrs: t, slots: n }) {
-		return () => f(_, m(e, t), { default: () => [n.tick ? { tick: n.tick } : void 0] });
+	setup(props, { attrs, slots }) {
+		return () => createVNode(XAxisSettingsDispatcher, mergeProps(props, attrs), { default: () => [slots.tick ? { tick: slots.tick } : void 0] });
 	}
 });
 //#endregion
-export { v as XAxis };
+export { XAxis };

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

@@ -1,34 +1,42 @@
-import { useIsPanorama as e } from "../../context/PanoramaContextProvider.mjs";
-import { selectAxisViewBox as t } from "../../state/selectors/selectChartOffset.mjs";
-import { implicitYAxis as n, selectAxisScale as r, selectTicksOfAxis as i, selectYAxisPosition as a, selectYAxisSize as o } from "../../state/selectors/axisSelectors.mjs";
-import { useAppDispatch as s, useAppSelector as c } from "../../state/hooks.mjs";
-import { addYAxis as l, removeYAxis as u } from "../../state/cartesianAxisSlice.mjs";
-import { CartesianAxis as d } from "../cartesian-axis/CartesianAxis.mjs";
-import { createVNode as f, defineComponent as p, mergeProps as m, watchEffect as h } from "vue";
+import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
+import { selectAxisViewBox } from "../../state/selectors/selectChartOffset.mjs";
+import { implicitYAxis, selectAxisScale, selectTicksOfAxis, selectYAxisPosition, selectYAxisSize } from "../../state/selectors/axisSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
+import { addYAxis, removeYAxis } from "../../state/cartesianAxisSlice.mjs";
+import { CartesianAxis } from "../cartesian-axis/CartesianAxis.mjs";
+import { createVNode, defineComponent, mergeProps, watchEffect } from "vue";
 //#region src/cartesian/axis/YAxis.tsx
-var g = /* @__PURE__ */ p({
+var YAxisImpl = /* @__PURE__ */ defineComponent({
 	props: { yAxisId: {
 		type: [String, Number],
 		default: 0
 	} },
-	inheritAttrs: !1,
-	setup(n, { attrs: s }) {
-		let l = e(), u = "yAxis", p = c((e) => r(e, u, n.yAxisId, l)), h = c((e) => o(e, n.yAxisId)), g = c((e) => a(e, n.yAxisId)), _ = c((e) => i(e, u, n.yAxisId, l)), v = c(t);
+	inheritAttrs: false,
+	setup(props, { attrs }) {
+		const isPanorama = useIsPanorama();
+		const axisType = "yAxis";
+		const scale = useAppSelector((state) => selectAxisScale(state, axisType, props.yAxisId, isPanorama));
+		const axisSize = useAppSelector((state) => selectYAxisSize(state, props.yAxisId));
+		const position = useAppSelector((state) => selectYAxisPosition(state, props.yAxisId));
+		const cartesianTickItems = useAppSelector((state) => selectTicksOfAxis(state, axisType, props.yAxisId, isPanorama));
+		const viewBox = useAppSelector(selectAxisViewBox);
 		return () => {
-			let { ...e } = n;
-			return h.value == null || g.value == null ? null : f(d, m(e, s, {
-				viewBox: v.value,
-				scale: p.value,
-				x: g.value?.x,
-				y: g.value?.y,
-				width: h.value?.width,
-				height: h.value?.height,
-				ticks: _.value,
-				class: ["v-charts-yAxis yAxis", s.class]
+			const { ...allOtherProps } = props;
+			if (axisSize.value == null || position.value == null) return null;
+			return createVNode(CartesianAxis, mergeProps(allOtherProps, attrs, {
+				"viewBox": viewBox.value,
+				"scale": scale.value,
+				"x": position.value?.x,
+				"y": position.value?.y,
+				"width": axisSize.value?.width,
+				"height": axisSize.value?.height,
+				"ticks": cartesianTickItems.value,
+				"class": ["v-charts-yAxis yAxis", attrs.class]
 			}), null);
 		};
 	}
-}), _ = /* @__PURE__ */ p({
+});
+var YAxisSettingsDispatcher = /* @__PURE__ */ defineComponent({
 	props: {
 		interval: [String, Number],
 		yAxisId: {
@@ -55,7 +63,7 @@ var g = /* @__PURE__ */ p({
 		minTickGap: Number,
 		tick: {
 			type: [Boolean, Object],
-			default: !0
+			default: true
 		},
 		tickFormatter: Function,
 		domain: Array,
@@ -68,74 +76,77 @@ var g = /* @__PURE__ */ p({
 			default: void 0
 		}
 	},
-	setup(e) {
-		let t = s();
-		return h((n) => {
-			let r = {
-				...e,
-				interval: e.interval ?? "preserveEnd",
-				id: e.yAxisId,
-				dataKey: e.dataKey,
-				includeHidden: e.includeHidden ?? !1,
-				angle: e.angle ?? 0,
-				minTickGap: e.minTickGap ?? 5,
-				tick: e.tick ?? !0
+	setup(props) {
+		const dispatch = useAppDispatch();
+		watchEffect((onCleanup) => {
+			const settings = {
+				...props,
+				interval: props.interval ?? "preserveEnd",
+				id: props.yAxisId,
+				dataKey: props.dataKey,
+				includeHidden: props.includeHidden ?? false,
+				angle: props.angle ?? 0,
+				minTickGap: props.minTickGap ?? 5,
+				tick: props.tick ?? true
 			};
-			t(l(r)), n(() => {
-				t(u(r));
+			dispatch(addYAxis(settings));
+			onCleanup(() => {
+				dispatch(removeYAxis(settings));
 			});
-		}), () => f(g, e, null);
+		});
+		return () => createVNode(YAxisImpl, props, null);
 	}
-}), v = /* @__PURE__ */ p({
+});
+var YAxis = /* @__PURE__ */ defineComponent({
 	name: "YAxis",
 	props: {
 		allowDataOverflow: {
 			type: Boolean,
-			default: n.allowDataOverflow
+			default: implicitYAxis.allowDataOverflow
 		},
 		allowDecimals: {
 			type: Boolean,
-			default: n.allowDecimals
+			default: implicitYAxis.allowDecimals
 		},
 		allowDuplicatedCategory: {
 			type: Boolean,
-			default: n.allowDuplicatedCategory
+			default: implicitYAxis.allowDuplicatedCategory
 		},
 		width: {
 			type: Number,
-			default: n.width
+			default: implicitYAxis.width
 		},
 		hide: {
 			type: Boolean,
-			default: !1
+			default: false
 		},
 		mirror: {
 			type: Boolean,
-			default: n.mirror
+			default: implicitYAxis.mirror
 		},
 		orientation: {
 			type: String,
-			default: n.orientation
+			default: implicitYAxis.orientation
 		},
 		padding: {
 			type: Object,
-			default: n.padding
+			default: implicitYAxis.padding
 		},
 		reversed: {
 			type: Boolean,
-			default: n.reversed
+			default: implicitYAxis.reversed
 		},
 		scale: {
 			type: [String, Function],
-			default: n.scale
+			default: implicitYAxis.scale
 		},
 		tickCount: {
 			type: Number,
-			default: n.tickCount
+			default: implicitYAxis.tickCount
 		},
 		type: {
 			type: String,
-			default: n.type
+			default: implicitYAxis.type
 		},
 		yAxisId: { type: [String, Number] },
 		dataKey: {
@@ -161,11 +172,11 @@ var g = /* @__PURE__ */ p({
 		},
 		axisLine: {
 			type: [Boolean, Object],
-			default: !0
+			default: true
 		},
 		tickLine: {
 			type: [Boolean, Object],
-			default: !0
+			default: true
 		},
 		tickMargin: Number,
 		minTickGap: {
@@ -173,9 +184,9 @@ var g = /* @__PURE__ */ p({
 			default: 5
 		}
 	},
-	setup(e, { attrs: t }) {
-		return () => f(_, m(e, t), null);
+	setup(props, { attrs }) {
+		return () => createVNode(YAxisSettingsDispatcher, mergeProps(props, attrs), null);
 	}
 });
 //#endregion
-export { v as YAxis };
+export { YAxis };

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

@@ -1,89 +1,96 @@
-import { getValueByDataKey as e } from "../../utils/chart.mjs";
-import { useChartLayout as t } from "../../context/chartLayoutContext.mjs";
-import { Layer as n } from "../../container/Layer.mjs";
-import { provideCartesianLabelListData as r } from "../../context/cartesianLabelListContext.mjs";
-import { LabelList as i } from "../../components/label/LabelList.mjs";
-import { useSetupGraphicalItem as a } from "../../hooks/useSetupGraphicalItem.mjs";
-import { useGraphicalLayerRef as o } from "../../context/graphicalLayerContext.mjs";
-import { BarVueProps as s } from "./type.mjs";
-import { useNeedsClip as c } from "../useNeedsClip.mjs";
-import { useBar as l } from "./hooks/useBar.mjs";
-import { GraphicalItemClipPath as u } from "../GraphicalItemClipPath.mjs";
-import { BarBackground as d } from "./components/BarBackground.mjs";
-import { BarRectangles as f } from "./components/BarRectangles.mjs";
-import { createErrorBarRegistry as p, provideErrorBarContext as m, provideErrorBarRegistry as h } from "../error-bar/ErrorBarContext.mjs";
-import { Cell as g } from "../../components/Cell.mjs";
-import { Fragment as _, Teleport as v, computed as y, createVNode as b, defineComponent as x, isVNode as S, mergeProps as C } from "vue";
+import { getValueByDataKey } from "../../utils/chart.mjs";
+import { useChartLayout } from "../../context/chartLayoutContext.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { provideCartesianLabelListData } from "../../context/cartesianLabelListContext.mjs";
+import { LabelList } from "../../components/label/LabelList.mjs";
+import { useSetupGraphicalItem } from "../../hooks/useSetupGraphicalItem.mjs";
+import { useGraphicalLayerRef } from "../../context/graphicalLayerContext.mjs";
+import { BarVueProps } from "./type.mjs";
+import { useNeedsClip } from "../useNeedsClip.mjs";
+import { useBar } from "./hooks/useBar.mjs";
+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 { extractCellProps, filterOutCells } from "../../utils/cell.mjs";
+import { Teleport, computed, createVNode, defineComponent, isVNode, mergeProps } from "vue";
 //#region src/cartesian/bar/Bar.tsx
-function w(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 T = (t, n) => {
-	let r = Array.isArray(t.value) ? t.value[1] : t.value;
+var errorBarDataPointFormatter = (dataPoint, dataKey) => {
+	const value = Array.isArray(dataPoint.value) ? dataPoint.value[1] : dataPoint.value;
 	return {
-		x: t.x,
-		y: t.y,
-		value: r,
-		errorVal: e(t.payload ?? t, n)
+		x: dataPoint.x,
+		y: dataPoint.y,
+		value,
+		errorVal: getValueByDataKey(dataPoint.payload ?? dataPoint, dataKey)
 	};
-}, E = /* @__PURE__ */ x({
+};
+var Bar = /* @__PURE__ */ defineComponent({
 	name: "Bar",
-	props: s,
-	inheritAttrs: !1,
+	props: BarVueProps,
+	inheritAttrs: false,
 	slots: Object,
-	setup(e, { attrs: s, slots: x }) {
-		let S = p();
-		h(S), a(e, "bar", { errorBars: S.errorBars });
-		let { shouldRender: E, clipPathId: D, barData: O, isAnimating: k, cellProps: A } = l(e, x.shape, x.activeBar), { needClip: j } = c(e.xAxisId, e.yAxisId), M = t(), N = y(() => {
-			let e = O.value?.[0];
-			return e == null || e.height == null || e.width == null ? 0 : M.value === "vertical" ? e.height / 2 : e.width / 2;
+	setup(props, { attrs, slots }) {
+		const errorBarRegistry = createErrorBarRegistry();
+		provideErrorBarRegistry(errorBarRegistry);
+		useSetupGraphicalItem(props, "bar", { errorBars: errorBarRegistry.errorBars });
+		const { shouldRender, clipPathId, barData, isAnimating, cellProps: cellPropsRef } = useBar(props, slots.shape, slots.activeBar);
+		const { needClip } = useNeedsClip(props.xAxisId, props.yAxisId);
+		const layout = useChartLayout();
+		const errorBarOffset = computed(() => {
+			const first = barData.value?.[0];
+			if (first == null || first.height == null || first.width == null) return 0;
+			return layout.value === "vertical" ? first.height / 2 : first.width / 2;
 		});
-		m({
-			data: O,
-			xAxisId: e.xAxisId ?? "xAxis-0",
-			yAxisId: e.yAxisId ?? "yAxis-0",
-			dataPointFormatter: T,
-			errorBarOffset: N
-		}), r(y(() => {
-			if (!(k.value || !O.value)) return O.value.map((t, n) => {
-				let r = A.value?.[n]?.fill ?? t.payload?.fill ?? e.fill;
+		provideErrorBarContext({
+			data: barData,
+			xAxisId: props.xAxisId ?? "xAxis-0",
+			yAxisId: props.yAxisId ?? "yAxis-0",
+			dataPointFormatter: errorBarDataPointFormatter,
+			errorBarOffset
+		});
+		provideCartesianLabelListData(computed(() => {
+			if (isAnimating.value || !barData.value) return void 0;
+			return barData.value.map((entry, i) => {
+				const fill = cellPropsRef.value?.[i]?.fill ?? entry.payload?.fill ?? props.fill;
 				return {
-					x: t.x,
-					y: t.y,
-					width: t.width,
-					height: t.height,
-					value: t.value,
-					payload: t.payload,
-					parentViewBox: t.parentViewBox,
-					...r == null ? {} : { fill: r }
+					x: entry.x,
+					y: entry.y,
+					width: entry.width,
+					height: entry.height,
+					value: entry.value,
+					payload: entry.payload,
+					parentViewBox: entry.parentViewBox,
+					...fill != null ? { fill } : {}
 				};
 			});
 		}));
-		let P = o(null), F = (e) => {
-			let t = [];
-			for (let n of e) n.type === g ? t.push(n.props ?? {}) : n.type === _ && Array.isArray(n.children) && t.push(...F(n.children));
-			return t;
-		}, I = (e) => e.filter((e) => !(e.type === g || e.type === _ && Array.isArray(e.children) && e.children.some((e) => e.type === g)));
+		const graphicalLayerRef = useGraphicalLayerRef(null);
 		return () => {
-			if (!E.value) return null;
-			let t = x.default?.() ?? [], r = F(t);
-			A.value = r;
-			let a = r.length > 0 ? I(t) : t, o = b(n, { class: ["v-charts-bar", s.class] }, { default: () => [
-				j.value && b("defs", null, [b(u, {
-					clipPathId: D,
-					xAxisId: e.xAxisId,
-					yAxisId: e.yAxisId
+			if (!shouldRender.value) return null;
+			const defaultContent = slots.default?.() ?? [];
+			const cells = extractCellProps(defaultContent);
+			cellPropsRef.value = cells;
+			const nonCellContent = cells.length > 0 ? filterOutCells(defaultContent) : defaultContent;
+			const barContent = createVNode(Layer, { "class": ["v-charts-bar", attrs.class] }, { default: () => [
+				needClip.value && createVNode("defs", null, [createVNode(GraphicalItemClipPath, {
+					"clipPathId": clipPathId,
+					"xAxisId": props.xAxisId,
+					"yAxisId": props.yAxisId
 				}, null)]),
-				b(n, {
-					class: "v-charts-bar-rectangles",
-					"clip-path": j.value ? `url(#clipPath-${D})` : null
-				}, { default: () => [e.background && b(d, null, null), b(f, null, null)] }),
-				!k.value && e.label && b(i, C(typeof e.label == "object" ? e.label : {}, { data: O.value }), null),
-				a
+				createVNode(Layer, {
+					"class": "v-charts-bar-rectangles",
+					"clip-path": needClip.value ? `url(#clipPath-${clipPathId})` : null
+				}, { default: () => [props.background && createVNode(BarBackground, null, null), createVNode(BarRectangles, null, null)] }),
+				!isAnimating.value && props.label && createVNode(LabelList, mergeProps(typeof props.label === "object" ? props.label : {}, { "data": barData.value }), null),
+				nonCellContent
 			] });
-			return P?.value ? b(v, { to: P.value }, w(o) ? o : { default: () => [o] }) : o;
+			if (graphicalLayerRef?.value) return createVNode(Teleport, { "to": graphicalLayerRef.value }, _isSlot(barContent) ? barContent : { default: () => [barContent] });
+			return barContent;
 		};
 	}
 });
 //#endregion
-export { E as Bar };
+export { Bar };