vccs 0.1.0 → 0.2.0

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

@@ -1,89 +1,111 @@
-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 { Cell } from "../../components/Cell.mjs";
+import { Fragment, 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);
+		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 (!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 };

package/dist/es/cartesian/bar/components/BarBackground.mjs

@@ -1,29 +1,32 @@
-import { Layer as e } from "../../../container/Layer.mjs";
-import { useBarContext as t } from "../hooks/useBar.mjs";
-import { Rectangle as n } from "../../../shape/Rectangle.mjs";
-import { Fragment as r, createVNode as i, defineComponent as a } from "vue";
+import { Layer } from "../../../container/Layer.mjs";
+import { useBarContext } from "../hooks/useBar.mjs";
+import { Rectangle } from "../../../shape/Rectangle.mjs";
+import { Fragment, createVNode, defineComponent } from "vue";
 //#region src/cartesian/bar/components/BarBackground.tsx
-var o = /* @__PURE__ */ a({
+var BarBackground = /* @__PURE__ */ defineComponent({
 	name: "BarBackground",
-	inheritAttrs: !1,
-	setup(a, { attrs: o }) {
-		let { props: s, data: c } = t();
+	inheritAttrs: false,
+	setup(_, { attrs }) {
+		const { props, data: barData } = useBarContext();
 		return () => {
-			let t = c.value, a = s.background;
-			return !a || !t ? null : i(r, null, [t.map((t, r) => {
-				let { value: o, background: s, tooltipPosition: c, ...l } = t;
-				if (!s) return null;
-				let u = typeof a == "object" ? a : {}, d = {
-					option: a,
-					...l,
+			const data = barData.value;
+			const backgroundFromProps = props.background;
+			if (!backgroundFromProps || !data) return null;
+			return createVNode(Fragment, null, [data.map((entry, i) => {
+				const { value, background: backgroundFromDataEntry, tooltipPosition, ...rest } = entry;
+				if (!backgroundFromDataEntry) return null;
+				const backgroundObjectProps = typeof backgroundFromProps === "object" ? backgroundFromProps : {};
+				const barRectangleProps = {
+					option: backgroundFromProps,
+					...rest,
 					fill: "#eee",
-					...s,
-					...u
+					...backgroundFromDataEntry,
+					...backgroundObjectProps
 				};
-				return i(e, { key: `background-bar-${r}` }, { default: () => [i(n, d, null)] });
+				return createVNode(Layer, { "key": `background-bar-${i}` }, { default: () => [createVNode(Rectangle, barRectangleProps, null)] });
 			})]);
 		};
 	}
 });
 //#endregion
-export { o as BarBackground };
+export { BarBackground };

package/dist/es/cartesian/bar/components/BarRectangles.mjs

@@ -1,106 +1,143 @@
-import { mouseLeaveItem as e, setActiveClickItemIndex as t, setActiveMouseOverItemIndex as n } from "../../../state/tooltipSlice.mjs";
-import { selectActiveTooltipDataKey as r, selectActiveTooltipIndex as i } from "../../../state/selectors/tooltipSelectors.mjs";
-import { useAppDispatch as a, useAppSelector as o } from "../../../state/hooks.mjs";
-import { filterProps as s } from "../../../utils/VueUtils.mjs";
-import { Layer as c } from "../../../container/Layer.mjs";
-import { Animate as l } from "../../../animation/Animate.mjs";
-import { useBarContext as u } from "../hooks/useBar.mjs";
-import { Rectangle as d } from "../../../shape/Rectangle.mjs";
-import { Fragment as f, createVNode as p, defineComponent as m, isVNode as h } from "vue";
+import { mouseLeaveItem, setActiveClickItemIndex, setActiveMouseOverItemIndex } from "../../../state/tooltipSlice.mjs";
+import { selectActiveTooltipDataKey, selectActiveTooltipIndex } from "../../../state/selectors/tooltipSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../../../state/hooks.mjs";
+import { filterProps } from "../../../utils/VueUtils.mjs";
+import { Layer } from "../../../container/Layer.mjs";
+import { Animate } from "../../../animation/Animate.mjs";
+import { useBarContext } from "../hooks/useBar.mjs";
+import { Rectangle } from "../../../shape/Rectangle.mjs";
+import { Fragment, createVNode, defineComponent, isVNode } from "vue";
 //#region src/cartesian/bar/components/BarRectangles.tsx
-function g(e) {
-	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !h(e);
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-var _ = /* @__PURE__ */ m({
+var BarRectangles = /* @__PURE__ */ defineComponent({
 	name: "BarRectangles",
-	inheritAttrs: !1,
-	setup(m) {
-		let h = a(), _ = o(i), v = o(r), y = null, b = 0, { props: x, data: S, layout: C, isAnimating: w, shapeSlot: T, activeBarSlot: E, cellProps: D } = u(), { dataKey: O, isAnimationActive: k, onAnimationStart: A, onAnimationEnd: j, activeBar: M, activeIndex: N } = x, P = (e, t) => (r) => {
-			h(n({
-				activeDataKey: O,
-				activeIndex: String(t),
+	inheritAttrs: false,
+	setup(_) {
+		const dispatch = useAppDispatch();
+		const activeIndex = useAppSelector(selectActiveTooltipIndex);
+		const activeDataKey = useAppSelector(selectActiveTooltipDataKey);
+		let previousRectangles = null;
+		let animationId = 0;
+		const { props, data: barData, layout, isAnimating, shapeSlot, activeBarSlot, cellProps } = useBarContext();
+		const { dataKey, isAnimationActive, onAnimationStart, onAnimationEnd, activeBar, activeIndex: activeIndexProp } = props;
+		const onMouseEnterFromContext = (entry, index) => (e) => {
+			dispatch(setActiveMouseOverItemIndex({
+				activeDataKey: dataKey,
+				activeIndex: String(index),
 				activeCoordinate: {
-					x: e.tooltipPosition.x,
-					y: e.tooltipPosition.y
+					x: entry.tooltipPosition.x,
+					y: entry.tooltipPosition.y
 				}
 			}));
-		}, F = (t, n) => (t) => {
-			h(e());
-		}, I = (e, n) => (r) => {
-			h(t({
-				activeDataKey: O,
-				activeIndex: String(n),
+		};
+		const onMouseLeaveFromContext = (entry, index) => (e) => {
+			dispatch(mouseLeaveItem());
+		};
+		const onClickFromContext = (entry, index) => (e) => {
+			dispatch(setActiveClickItemIndex({
+				activeDataKey: dataKey,
+				activeIndex: String(index),
 				activeCoordinate: {
-					x: e.tooltipPosition.x,
-					y: e.tooltipPosition.y
+					x: entry.tooltipPosition.x,
+					y: entry.tooltipPosition.y
 				}
 			}));
-		}, L = s(x, !1), R = (e, t) => (n) => e + (t - e) * n, z = (e) => e ? p(f, null, [e.map((e, t) => {
-			let n, r = M !== !1 || N != null || !!E, i = N == null ? r && String(t) === _.value && (v.value == null || O === v.value) : r && t === N, a = i && typeof M == "object" ? M : {}, o = e.payload?.fill, s = D.value?.[t], l = {
-				...L,
-				...o ? { fill: o } : {},
-				...e,
-				...s ?? {},
-				...i ? a : {},
-				isActive: i,
-				index: t,
-				dataKey: O
-			};
-			return p(c, {
-				key: `rectangle-${e?.x}-${e?.y}-${e?.value}-${t}`,
-				class: "v-charts-bar-rectangle",
-				onMouseenter: P(e, t),
-				onMouseleave: F(e, t),
-				onClick: I(e, t)
-			}, g(n = i && E ? E(l) : T ? T(l) : p(d, l, null)) ? n : { default: () => [n] });
-		})]) : null;
+		};
+		const baseProps = filterProps(props, false);
+		const interpolateNumber = (from, to) => (t) => from + (to - from) * t;
+		const renderRectangles = (data) => {
+			if (!data) return null;
+			return createVNode(Fragment, null, [data.map((entry, i) => {
+				let _slot;
+				const activeEnabled = activeBar !== false || activeIndexProp != null || !!activeBarSlot;
+				const isActive = activeIndexProp != null ? activeEnabled && i === activeIndexProp : activeEnabled && String(i) === activeIndex.value && (activeDataKey.value == null || dataKey === activeDataKey.value);
+				const activeBarProps = isActive && typeof activeBar === "object" ? activeBar : {};
+				const entryFill = entry.payload?.fill;
+				const cellPropsForIndex = cellProps.value?.[i];
+				const barRectangleProps = {
+					...baseProps,
+					...entryFill ? { fill: entryFill } : {},
+					...entry,
+					...cellPropsForIndex ?? {},
+					...isActive ? activeBarProps : {},
+					isActive,
+					index: i,
+					dataKey
+				};
+				const renderShape = () => {
+					if (isActive && activeBarSlot) return activeBarSlot(barRectangleProps);
+					if (shapeSlot) return shapeSlot(barRectangleProps);
+					return createVNode(Rectangle, barRectangleProps, null);
+				};
+				return createVNode(Layer, {
+					"key": `rectangle-${entry?.x}-${entry?.y}-${entry?.value}-${i}`,
+					"class": "v-charts-bar-rectangle",
+					"onMouseenter": onMouseEnterFromContext(entry, i),
+					"onMouseleave": onMouseLeaveFromContext(entry, i),
+					"onClick": onClickFromContext(entry, i)
+				}, _isSlot(_slot = renderShape()) ? _slot : { default: () => [_slot] });
+			})]);
+		};
 		return () => {
-			let e = S.value;
-			if (!e) return null;
-			if (k && y !== e) {
-				let t = y;
-				return b++, w.value = !0, p(l, {
-					key: b,
-					transition: x.transition,
-					isActive: k,
-					onAnimationStart: A,
-					onAnimationEnd: () => {
-						w.value = !1, j?.();
+			const data = barData.value;
+			if (!data) return null;
+			if (isAnimationActive && previousRectangles !== data) {
+				const prevData = previousRectangles;
+				animationId++;
+				isAnimating.value = true;
+				return createVNode(Animate, {
+					"key": animationId,
+					"transition": props.transition,
+					"isActive": isAnimationActive,
+					"onAnimationStart": onAnimationStart,
+					"onAnimationEnd": () => {
+						isAnimating.value = false;
+						onAnimationEnd?.();
 					}
-				}, { default: (n) => {
-					let r = n === 1 ? e : e.map((e, r) => {
-						let i = t?.[r];
-						if (i && i.stackedBarStart === e.stackedBarStart) {
-							let t = R(i.x || 0, e.x || 0), r = R(i.y || 0, e.y || 0), a = R(i.width, e.width), o = R(i.height, e.height);
+				}, { default: (t) => {
+					const stepData = t === 1 ? data : data.map((entry, index) => {
+						const prev = prevData?.[index];
+						if (prev && prev.stackedBarStart === entry.stackedBarStart) {
+							const interpolatorX = interpolateNumber(prev.x || 0, entry.x || 0);
+							const interpolatorY = interpolateNumber(prev.y || 0, entry.y || 0);
+							const interpolatorWidth = interpolateNumber(prev.width, entry.width);
+							const interpolatorHeight = interpolateNumber(prev.height, entry.height);
 							return {
-								...e,
-								x: t(n),
-								y: r(n),
-								width: a(n),
-								height: o(n)
+								...entry,
+								x: interpolatorX(t),
+								y: interpolatorY(t),
+								width: interpolatorWidth(t),
+								height: interpolatorHeight(t)
 							};
 						}
-						if (C.value === "horizontal") {
-							let t = R(0, e.height)(n), r = R(e.stackedBarStart, e.y)(n);
+						if (layout.value === "horizontal") {
+							const h = interpolateNumber(0, entry.height)(t);
+							const y = interpolateNumber(entry.stackedBarStart, entry.y)(t);
 							return {
-								...e,
-								y: r,
-								height: t
+								...entry,
+								y,
+								height: h
 							};
 						}
-						let a = R(0, e.width)(n), o = R(e.stackedBarStart, e.x)(n);
+						const w = interpolateNumber(0, entry.width)(t);
+						const x = interpolateNumber(entry.stackedBarStart, entry.x)(t);
 						return {
-							...e,
-							width: a,
-							x: o
+							...entry,
+							width: w,
+							x
 						};
 					});
-					return n > 0 && (y = r), p("g", null, [z(r)]);
+					if (t > 0) previousRectangles = stepData;
+					return createVNode("g", null, [renderRectangles(stepData)]);
 				} });
 			}
-			return w.value = !1, y = e, p("g", null, [z(e)]);
+			isAnimating.value = false;
+			previousRectangles = data;
+			return createVNode("g", null, [renderRectangles(data)]);
 		};
 	}
 });
 //#endregion
-export { _ as BarRectangles };
+export { BarRectangles };

package/dist/es/cartesian/bar/hooks/useBar.mjs

@@ -1,41 +1,53 @@
-import { uniqueId as e } from "../../../utils/data-utils.mjs";
-import { useIsPanorama as t } from "../../../context/PanoramaContextProvider.mjs";
-import { getNormalizedStackId as n } from "../../../utils/chart.mjs";
-import { useAppSelector as r } from "../../../state/hooks.mjs";
-import { useChartLayout as i } from "../../../context/chartLayoutContext.mjs";
-import { useNeedsClip as a } from "../../useNeedsClip.mjs";
-import { selectBarRectangles as o } from "../../../state/selectors/barSelectors.mjs";
-import { computed as s, ref as c, shallowRef as l, useAttrs as u } from "vue";
-import { createContext as d } from "motion-v";
+import { uniqueId } from "../../../utils/data-utils.mjs";
+import { useIsPanorama } from "../../../context/PanoramaContextProvider.mjs";
+import { getNormalizedStackId } from "../../../utils/chart.mjs";
+import { useAppSelector } from "../../../state/hooks.mjs";
+import { useChartLayout } from "../../../context/chartLayoutContext.mjs";
+import { useNeedsClip } from "../../useNeedsClip.mjs";
+import { selectBarRectangles } from "../../../state/selectors/barSelectors.mjs";
+import { computed, ref, shallowRef, useAttrs } from "vue";
+import { createContext } from "motion-v";
 //#region src/cartesian/bar/hooks/useBar.ts
-var [f, p] = d("BarContext");
-function m(d, f, m) {
-	let h = t(), g = u(), _ = i(), { needClip: v } = a(d.xAxisId, d.yAxisId), y = s(() => ({
-		barSize: d.barSize,
-		data: d.data,
-		dataKey: d.dataKey,
-		maxBarSize: d.maxBarSize,
-		minPointSize: d.minPointSize,
-		stackId: n(d.stackId)
-	})), b = r((e) => o(e, d.xAxisId, d.yAxisId, h, y.value)), x = s(() => (_.value === "vertical" || _.value === "horizontal") && !d.hide), S = e("v-charts-bar-"), C = c(!1), w = l([]);
-	return p({
-		clipPathId: S,
-		layout: _,
-		props: d,
-		attrs: g,
-		data: b,
-		isAnimating: C,
-		shapeSlot: f,
-		activeBarSlot: m,
-		cellProps: w
-	}), {
-		shouldRender: x,
-		needClip: v,
-		clipPathId: S,
-		barData: b,
-		isAnimating: C,
-		cellProps: w
+var [useBarContext, provideBarContext] = createContext("BarContext");
+function useBar(props, shapeSlot, activeBarSlot) {
+	const isPanorama = useIsPanorama();
+	const attrs = useAttrs();
+	const layout = useChartLayout();
+	const { needClip } = useNeedsClip(props.xAxisId, props.yAxisId);
+	const barSettings = computed(() => ({
+		barSize: props.barSize,
+		data: props.data,
+		dataKey: props.dataKey,
+		maxBarSize: props.maxBarSize,
+		minPointSize: props.minPointSize,
+		stackId: getNormalizedStackId(props.stackId)
+	}));
+	const rects = useAppSelector((state) => selectBarRectangles(state, props.xAxisId, props.yAxisId, isPanorama, barSettings.value));
+	const shouldRender = computed(() => {
+		return (layout.value === "vertical" || layout.value === "horizontal") && !props.hide;
+	});
+	const clipPathId = uniqueId("v-charts-bar-");
+	const isAnimating = ref(false);
+	const cellPropsRef = shallowRef([]);
+	provideBarContext({
+		clipPathId,
+		layout,
+		props,
+		attrs,
+		data: rects,
+		isAnimating,
+		shapeSlot,
+		activeBarSlot,
+		cellProps: cellPropsRef
+	});
+	return {
+		shouldRender,
+		needClip,
+		clipPathId,
+		barData: rects,
+		isAnimating,
+		cellProps: cellPropsRef
 	};
 }
 //#endregion
-export { m as useBar, f as useBarContext };
+export { useBar, useBarContext };

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

@@ -1,5 +1,5 @@
 //#region src/cartesian/bar/type.ts
-var e = {
+var BarVueProps = {
 	class: {
 		type: String,
 		default: void 0
@@ -15,7 +15,7 @@ var e = {
 			Number,
 			Function
 		],
-		required: !0
+		required: true
 	},
 	fill: {
 		type: String,
@@ -49,11 +49,11 @@ var e = {
 	maxBarSize: { type: Number },
 	hide: {
 		type: Boolean,
-		default: !1
+		default: false
 	},
 	background: {
 		type: [Boolean, Object],
-		default: !1
+		default: false
 	},
 	radius: {
 		type: [Number, Array],
@@ -69,7 +69,7 @@ var e = {
 	},
 	isAnimationActive: {
 		type: Boolean,
-		default: !0
+		default: true
 	},
 	activeBar: {
 		type: [
@@ -77,7 +77,7 @@ var e = {
 			Boolean,
 			Function
 		],
-		default: !1
+		default: false
 	},
 	activeIndex: {
 		type: Number,
@@ -120,12 +120,12 @@ var e = {
 	},
 	needClip: {
 		type: Boolean,
-		default: !1
+		default: false
 	},
 	label: {
 		type: [Boolean, Object],
-		default: !1
+		default: false
 	}
 };
 //#endregion
-export { e as BarVueProps };
+export { BarVueProps };