vccs 0.1.0 → 0.2.0

package/dist/es/container/Layer.mjs

@@ -1,12 +1,14 @@
-import { filterProps as e } from "../utils/VueUtils.mjs";
-import { createVNode as t, defineComponent as n, mergeProps as r } from "vue";
+import { filterProps } from "../utils/VueUtils.mjs";
+import { createVNode, defineComponent, mergeProps } from "vue";
 //#region src/container/Layer.tsx
-var i = /* @__PURE__ */ n({
+var Layer = /* @__PURE__ */ defineComponent({
 	name: "VChartsLayer",
-	inheritAttrs: !1,
-	setup(n, { attrs: i, slots: a }) {
-		return () => t("g", r(i, e(i, !0), { class: "v-charts-layer" }), [a.default?.()]);
+	inheritAttrs: false,
+	setup(_, { attrs, slots }) {
+		return () => {
+			return createVNode("g", mergeProps(attrs, filterProps(attrs, true), { "class": "v-charts-layer" }), [slots.default?.()]);
+		};
 	}
 });
 //#endregion
-export { i as Layer };
+export { Layer };

package/dist/es/container/ResponsiveContainer.mjs

@@ -1,5 +1,5 @@
-import e from "./ResponsiveContainer.vue_vue_type_script_setup_true_lang.mjs";
+import ResponsiveContainer_vue_vue_type_script_setup_true_lang_default from "./ResponsiveContainer.vue_vue_type_script_setup_true_lang.mjs";
 //#region src/container/ResponsiveContainer.vue
-var t = e;
+var ResponsiveContainer_default = ResponsiveContainer_vue_vue_type_script_setup_true_lang_default;
 //#endregion
-export { t as default };
+export { ResponsiveContainer_default as default };

package/dist/es/container/ResponsiveContainer.vue_vue_type_script_setup_true_lang.mjs

@@ -1,12 +1,13 @@
-import { isPercent as e } from "../utils/validate.mjs";
-import { normalizeStyle as t } from "../utils/style.mjs";
-import { provideSizeContext as n } from "./useSizeContext.mjs";
-import { Fragment as r, cloneVNode as i, computed as a, createBlock as o, createElementBlock as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, onMounted as d, onUnmounted as f, openBlock as p, ref as m, resolveDynamicComponent as h, toRef as g, useSlots as _ } from "vue";
-import { useThrottleFn as v } from "@vueuse/core";
+import { isPercent } from "../utils/validate.mjs";
+import { normalizeStyle as normalizeStyle$1 } from "../utils/style.mjs";
+import { provideSizeContext } from "./useSizeContext.mjs";
+import { Fragment, cloneVNode, computed, createBlock, createElementBlock, defineComponent, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, resolveDynamicComponent, toRef, useSlots } from "vue";
+import { useThrottleFn } from "@vueuse/core";
 //#region src/container/ResponsiveContainer.vue?vue&type=script&setup=true&lang.ts
-var y = ["id"], b = /* @__PURE__ */ c({
+var _hoisted_1 = ["id"];
+var ResponsiveContainer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	name: "ResponsiveContainer",
-	inheritAttrs: !1,
+	inheritAttrs: false,
 	__name: "ResponsiveContainer",
 	props: {
 		aspect: {},
@@ -25,88 +26,119 @@ var y = ["id"], b = /* @__PURE__ */ c({
 		style: {},
 		onResize: {}
 	},
-	setup(c) {
-		let b = c, x = _(), S = g(b, "debounce"), C = m({
-			width: b.initialDimension.width,
-			height: b.initialDimension.height
-		}), w = a(() => e(b.width) ? C.value.width : b.width), T = a(() => {
-			let t = e(b.height) ? C.value.height : b.height;
-			return b.aspect && b.aspect > 0 && (b.width && (b.height == null || b.height === "auto") ? t = w.value / b.aspect : b.height && (b.width == null || b.width)), t;
-		}), E = a(() => {
-			let e = w.value;
-			return b.aspect && b.aspect > 0 && b.height && (b.width == null || b.width === "auto") && (e = T.value * b.aspect), e;
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const debounce = toRef(props, "debounce");
+		const sizes = ref({
+			width: props.initialDimension.width,
+			height: props.initialDimension.height
 		});
-		n({
-			sizes: C,
-			calculatedWidth: E,
-			calculatedHeight: T
+		const calculatedWidth = computed(() => {
+			return isPercent(props.width) ? sizes.value.width : props.width;
 		});
-		function D(e, t) {
-			let n = Math.round(e), r = Math.round(t), { width: i, height: a } = C.value;
-			i === n && a === r || (C.value = {
-				width: n,
-				height: r
-			});
+		const calculatedHeight = computed(() => {
+			let height = isPercent(props.height) ? sizes.value.height : props.height;
+			if (props.aspect && props.aspect > 0) {
+				if (props.width && (props.height == null || props.height === "auto")) height = calculatedWidth.value / props.aspect;
+				else if (props.height && (props.width == null || props.width === "auto")) {}
+			}
+			return height;
+		});
+		const finalCalculatedWidth = computed(() => {
+			let width = calculatedWidth.value;
+			if (props.aspect && props.aspect > 0) {
+				if (props.height && (props.width == null || props.width === "auto")) width = calculatedHeight.value * props.aspect;
+			}
+			return width;
+		});
+		provideSizeContext({
+			sizes,
+			calculatedWidth: finalCalculatedWidth,
+			calculatedHeight
+		});
+		function setContainerSize(width, height) {
+			const roundedWidth = Math.round(width);
+			const roundedHeight = Math.round(height);
+			const { width: containerWidth, height: containerHeight } = sizes.value;
+			if (containerWidth === roundedWidth && containerHeight === roundedHeight) return;
+			sizes.value = {
+				width: roundedWidth,
+				height: roundedHeight
+			};
 		}
-		let O = v((e) => {
-			let { width: t, height: n } = e[0].contentRect;
-			D(t, n), b.onResize?.(t, n);
-		}, S, !0, !1), k = m(), A = null;
-		d(() => {
-			A = new ResizeObserver(O);
-			let { width: e, height: t } = k.value.getBoundingClientRect() ?? {
+		const handleResize = useThrottleFn((entries) => {
+			const { width: containerWidth, height: containerHeight } = entries[0].contentRect;
+			setContainerSize(containerWidth, containerHeight);
+			props.onResize?.(containerWidth, containerHeight);
+		}, debounce, true, false);
+		const containerRef = ref();
+		let observer = null;
+		onMounted(() => {
+			observer = new ResizeObserver(handleResize);
+			const { width: containerWidth, height: containerHeight } = containerRef.value.getBoundingClientRect() ?? {
 				width: 0,
 				height: 0
 			};
-			D(e, t), A.observe(k.value);
-		}), f(() => {
-			A?.disconnect();
+			setContainerSize(containerWidth, containerHeight);
+			observer.observe(containerRef.value);
+		});
+		onUnmounted(() => {
+			observer?.disconnect();
 		});
-		let j = a(() => {
-			let { width: e, height: t } = C.value;
-			return e >= 0 && t >= 0;
+		const isReady = computed(() => {
+			const { width: containerWidth, height: containerHeight } = sizes.value;
+			return containerWidth >= 0 && containerHeight >= 0;
 		});
-		function M(e) {
-			let t = [];
-			for (let n of e) n.type === r && Array.isArray(n.children) ? t.push(...M(n.children)) : t.push(n);
-			return t;
+		function flattenSlotChildren(vnodes) {
+			const result = [];
+			for (const vnode of vnodes) if (vnode.type === Fragment && Array.isArray(vnode.children)) result.push(...flattenSlotChildren(vnode.children));
+			else result.push(vnode);
+			return result;
 		}
-		function N() {
-			if (!j.value) return;
-			let e = E.value, n = T.value, r = x.default?.();
-			if (r) return M(r).map((r, a) => i(r, {
-				width: e,
-				height: n,
-				key: r.key || `responsive-child-${a}`,
-				style: {
-					...t({
-						maxHeight: C.value.height,
-						maxWidth: C.value.width
-					}),
-					height: "100%",
-					width: "100%",
-					...r.props?.style
-				}
-			}));
+		function renderChildren() {
+			if (!isReady.value) return;
+			const calculatedWidthValue = finalCalculatedWidth.value;
+			const calculatedHeightValue = calculatedHeight.value;
+			const rawChildren = slots.default?.();
+			if (!rawChildren) return void 0;
+			return flattenSlotChildren(rawChildren).map((child, index) => {
+				return cloneVNode(child, {
+					width: calculatedWidthValue,
+					height: calculatedHeightValue,
+					key: child.key || `responsive-child-${index}`,
+					style: {
+						...normalizeStyle$1({
+							maxHeight: sizes.value.height,
+							maxWidth: sizes.value.width
+						}),
+						height: "100%",
+						width: "100%",
+						...child.props?.style
+					}
+				});
+			});
 		}
-		let P = a(() => ({
-			...b.style,
-			...t({
-				width: b.width,
-				height: b.height,
-				minWidth: b.minWidth,
-				minHeight: b.minHeight,
-				maxHeight: b.maxHeight
+		const containerStyle = computed(() => ({
+			...props.style,
+			...normalizeStyle$1({
+				width: props.width,
+				height: props.height,
+				minWidth: props.minWidth,
+				minHeight: props.minHeight,
+				maxHeight: props.maxHeight
 			})
 		}));
-		return (e, t) => (p(), s("div", {
-			id: e.id ? `${e.id}` : void 0,
-			ref_key: "containerRef",
-			ref: k,
-			class: l(["vcharts-responsive-container", [b.class]]),
-			style: u(P.value)
-		}, [(p(), o(h(() => N())))], 14, y));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: _ctx.id ? `${_ctx.id}` : void 0,
+				ref_key: "containerRef",
+				ref: containerRef,
+				class: normalizeClass(["vcharts-responsive-container", [props.class]]),
+				style: normalizeStyle(containerStyle.value)
+			}, [(openBlock(), createBlock(resolveDynamicComponent(() => renderChildren())))], 14, _hoisted_1);
+		};
 	}
 });
 //#endregion
-export { b as default };
+export { ResponsiveContainer_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/container/Surface.mjs

@@ -1,15 +1,18 @@
-import { createVNode as e, defineComponent as t, mergeProps as n } from "vue";
+import { createVNode, defineComponent, mergeProps } from "vue";
 //#region src/container/Surface.tsx
-var r = /* @__PURE__ */ t({
+/**
+* @fileOverview Surface component for SVG rendering
+*/
+var Surface = /* @__PURE__ */ defineComponent({
 	name: "Surface",
 	props: {
 		width: {
 			type: Number,
-			required: !0
+			required: true
 		},
 		height: {
 			type: Number,
-			required: !0
+			required: true
 		},
 		viewBox: {
 			type: Object,
@@ -32,27 +35,28 @@ var r = /* @__PURE__ */ t({
 			default: void 0
 		}
 	},
-	setup(t, { slots: r, attrs: i }) {
+	setup(props, { slots, attrs }) {
 		return () => {
-			let { width: a, height: o, viewBox: s, class: c, style: l, title: u, desc: d, ...f } = t, p = s || {
-				width: a,
-				height: o,
+			const { width, height, viewBox, class: className, style, title, desc, ...rest } = props;
+			const svgView = viewBox || {
+				width,
+				height,
 				x: 0,
 				y: 0
 			};
-			return e("svg", n({
-				class: ["vcharts-surface", c],
-				width: a,
-				height: o,
-				style: l,
-				viewBox: `${p.x} ${p.y} ${p.width} ${p.height}`
-			}, f, i), [
-				u && e("title", null, [u]),
-				d && e("desc", null, [d]),
-				r.default?.()
+			return createVNode("svg", mergeProps({
+				"class": ["vcharts-surface", className],
+				"width": width,
+				"height": height,
+				"style": style,
+				"viewBox": `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`
+			}, rest, attrs), [
+				title && createVNode("title", null, [title]),
+				desc && createVNode("desc", null, [desc]),
+				slots.default?.()
 			]);
 		};
 	}
 });
 //#endregion
-export { r as default };
+export { Surface as default };

package/dist/es/container/useSizeContext.mjs

@@ -1,5 +1,5 @@
-import { createContext as e } from "../utils/createContext.mjs";
+import { createContext } from "../utils/createContext.mjs";
 //#region src/container/useSizeContext.ts
-var [t, n] = e("SizeContext");
+var [useSizeContext, provideSizeContext] = createContext("SizeContext");
 //#endregion
-export { n as provideSizeContext };
+export { provideSizeContext };

package/dist/es/context/ChartDataContextProvider.mjs

@@ -1,21 +1,27 @@
-import { useAppDispatch as e } from "../state/hooks.mjs";
-import { setChartData as t } from "../state/chartDataSlice.mjs";
-import { defineComponent as n, onUnmounted as r, watch as i } from "vue";
+import { useAppDispatch } from "../state/hooks.mjs";
+import { setChartData } from "../state/chartDataSlice.mjs";
+import { defineComponent, onUnmounted, watch } from "vue";
 //#region src/context/ChartDataContextProvider.ts
-var a = n({
+/**
+* ChartDataContextProvider for Vue
+* Sets chartData in store on mount/update, clears on unmount. Renders nothing.
+*/
+var ChartDataContextProvider = defineComponent({
 	name: "ChartDataContextProvider",
 	props: { chartData: {
 		type: Array,
-		required: !0
+		required: true
 	} },
-	setup(n) {
-		let a = e();
-		return i(() => n.chartData, (e) => {
-			a(t(Array.from(e)));
-		}, { immediate: !0 }), r(() => {
-			a(t(void 0));
-		}), () => null;
+	setup(props) {
+		const dispatch = useAppDispatch();
+		watch(() => props.chartData, (val) => {
+			dispatch(setChartData(Array.from(val)));
+		}, { immediate: true });
+		onUnmounted(() => {
+			dispatch(setChartData(void 0));
+		});
+		return () => null;
 	}
 });
 //#endregion
-export { a as ChartDataContextProvider };
+export { ChartDataContextProvider };

package/dist/es/context/PanoramaContextProvider.mjs

@@ -1,19 +1,24 @@
-import { createContext as e } from "../utils/createContext.mjs";
-import { defineComponent as t } from "vue";
+import { createContext } from "../utils/createContext.mjs";
+import { defineComponent } from "vue";
 //#region src/context/PanoramaContextProvider.ts
-var [n, r] = e("PanoramaContext");
-function i() {
-	return n(!1);
+var [injectPanorama, providePanoramaContext] = createContext("PanoramaContext");
+/**
+* useIsPanorama composable
+* Returns the injected isPanorama value (default: false)
+*/
+function useIsPanorama() {
+	return injectPanorama(false);
 }
-t({
+defineComponent({
 	name: "PanoramaContextProvider",
 	props: { isPanorama: {
 		type: Boolean,
-		required: !0
+		required: true
 	} },
-	setup(e, { slots: t }) {
-		return r(!0), () => t.default?.();
+	setup(props, { slots }) {
+		providePanoramaContext(true);
+		return () => slots.default?.();
 	}
 });
 //#endregion
-export { i as useIsPanorama };
+export { useIsPanorama };

package/dist/es/context/accessibilityContext.mjs

@@ -1,5 +1,5 @@
-import { useAppSelector as e } from "../state/hooks.mjs";
+import { useAppSelector } from "../state/hooks.mjs";
 //#region src/context/accessibilityContext.tsx
-var t = () => e((e) => e.rootProps.accessibilityLayer);
+var useAccessibilityLayer = () => useAppSelector((state) => state.rootProps.accessibilityLayer);
 //#endregion
-export { t as useAccessibilityLayer };
+export { useAccessibilityLayer };

package/dist/es/context/cartesianLabelListContext.mjs

@@ -1,5 +1,5 @@
-import { createContext as e } from "../utils/createContext.mjs";
+import { createContext } from "../utils/createContext.mjs";
 //#region src/context/cartesianLabelListContext.ts
-var [t, n] = e("CartesianLabelListContext");
+var [useCartesianLabelListData, provideCartesianLabelListData] = createContext("CartesianLabelListContext");
 //#endregion
-export { n as provideCartesianLabelListData, t as useCartesianLabelListData };
+export { provideCartesianLabelListData, useCartesianLabelListData };

package/dist/es/context/chartLayoutContext.mjs

@@ -1,46 +1,49 @@
-import { useIsPanorama as e } from "./PanoramaContextProvider.mjs";
-import { selectChartHeight as t, selectChartWidth as n } from "../state/selectors/containerSelectors.mjs";
-import { selectChartOffset as r, selectChartViewBox as i } from "../state/selectors/selectChartOffset.mjs";
-import { selectBrushDimensions as a, selectBrushSettings as o } from "../state/selectors/brushSelectors.mjs";
-import { selectChartLayout as s } from "../state/selectors/common.mjs";
-import { useAppSelector as c } from "../state/hooks.mjs";
-import { selectChartOffsetInternal as l } from "../state/selectors/selectChartOffsetInternal.mjs";
-import { computed as u } from "vue";
+import { useIsPanorama } from "./PanoramaContextProvider.mjs";
+import { selectChartHeight, selectChartWidth } from "../state/selectors/containerSelectors.mjs";
+import { selectChartOffset, selectChartViewBox } from "../state/selectors/selectChartOffset.mjs";
+import { selectBrushDimensions, selectBrushSettings } from "../state/selectors/brushSelectors.mjs";
+import { selectChartLayout } from "../state/selectors/common.mjs";
+import { useAppSelector } from "../state/hooks.mjs";
+import { selectChartOffsetInternal } from "../state/selectors/selectChartOffsetInternal.mjs";
+import { computed } from "vue";
 //#region src/context/chartLayoutContext.tsx
-function d() {
-	return c(r);
+function useOffset() {
+	return useAppSelector(selectChartOffset);
 }
-var f = () => c(s);
-function p() {
-	let t = e(), n = c(i), r = c(a), s = c(o);
-	return u(() => {
-		if (!t || !r.value || !s.value) return n.value;
-		let e = s.value.padding;
+var useChartLayout = () => useAppSelector(selectChartLayout);
+function useViewBox() {
+	const panorama = useIsPanorama();
+	const rootViewBox = useAppSelector(selectChartViewBox);
+	const brushDimensions = useAppSelector(selectBrushDimensions);
+	const brushPadding = useAppSelector(selectBrushSettings);
+	return computed(() => {
+		if (!panorama || !brushDimensions.value || !brushPadding.value) return rootViewBox.value;
+		const padding = brushPadding.value.padding;
 		return {
-			width: r.value.width - e.left - e.right,
-			height: r.value.height - e.top - e.bottom,
-			x: e.left,
-			y: e.top
+			width: brushDimensions.value.width - padding.left - padding.right,
+			height: brushDimensions.value.height - padding.top - padding.bottom,
+			x: padding.left,
+			y: padding.top
 		};
 	});
 }
-function m() {
-	return c(n);
+function useChartWidth() {
+	return useAppSelector(selectChartWidth);
 }
-function h() {
-	return c(t);
+function useChartHeight() {
+	return useAppSelector(selectChartHeight);
 }
-function g() {
-	return c(l);
+function useOffsetInternal() {
+	return useAppSelector(selectChartOffsetInternal);
 }
-var _ = {
+var manyComponentsThrowErrorsIfMarginIsUndefined = {
 	top: 0,
 	right: 0,
 	bottom: 0,
 	left: 0
 };
-function v() {
-	return c((e) => e.layout.margin ?? _);
+function useMargin() {
+	return useAppSelector((state) => state.layout.margin ?? manyComponentsThrowErrorsIfMarginIsUndefined);
 }
 //#endregion
-export { h as useChartHeight, f as useChartLayout, m as useChartWidth, v as useMargin, d as useOffset, g as useOffsetInternal, p as useViewBox };
+export { useChartHeight, useChartLayout, useChartWidth, useMargin, useOffset, useOffsetInternal, useViewBox };

package/dist/es/context/cursorLayerContext.mjs

@@ -1,5 +1,5 @@
-import { createContext as e } from "../utils/createContext.mjs";
+import { createContext } from "../utils/createContext.mjs";
 //#region src/context/cursorLayerContext.ts
-var [t, n] = e("CursorLayerContext");
+var [useCursorLayerRef, provideCursorLayerRef] = createContext("CursorLayerContext");
 //#endregion
-export { n as provideCursorLayerRef, t as useCursorLayerRef };
+export { provideCursorLayerRef, useCursorLayerRef };

package/dist/es/context/graphicalLayerContext.mjs

@@ -1,5 +1,5 @@
-import { createContext as e } from "../utils/createContext.mjs";
+import { createContext } from "../utils/createContext.mjs";
 //#region src/context/graphicalLayerContext.ts
-var [t, n] = e("GraphicalLayerContext");
+var [useGraphicalLayerRef, provideGraphicalLayerRef] = createContext("GraphicalLayerContext");
 //#endregion
-export { n as provideGraphicalLayerRef, t as useGraphicalLayerRef };
+export { provideGraphicalLayerRef, useGraphicalLayerRef };

package/dist/es/context/labelLayerContext.mjs

@@ -1,5 +1,5 @@
-import { createContext as e } from "../utils/createContext.mjs";
+import { createContext } from "../utils/createContext.mjs";
 //#region src/context/labelLayerContext.ts
-var [t, n] = e("LabelLayerContext");
+var [useLabelLayerRef, provideLabelLayerRef] = createContext("LabelLayerContext");
 //#endregion
-export { n as provideLabelLayerRef, t as useLabelLayerRef };
+export { provideLabelLayerRef, useLabelLayerRef };

package/dist/es/context/polarLabelViewBoxContext.mjs

@@ -1,8 +1,8 @@
-import { computed as e, inject as t } from "vue";
+import { computed, inject } from "vue";
 //#region src/context/polarLabelViewBoxContext.ts
-var n = Symbol("polar-label-view-box");
-function r() {
-	return t(n, e(() => void 0));
+var POLAR_LABEL_VIEW_BOX_KEY = Symbol("polar-label-view-box");
+function usePolarLabelViewBox() {
+	return inject(POLAR_LABEL_VIEW_BOX_KEY, computed(() => void 0));
 }
 //#endregion
-export { n as POLAR_LABEL_VIEW_BOX_KEY, r as usePolarLabelViewBox };
+export { POLAR_LABEL_VIEW_BOX_KEY, usePolarLabelViewBox };

package/dist/es/context/useTooltipAxis.mjs

@@ -1,15 +1,17 @@
-import { getBandSizeOfAxis as e } from "../utils/chart.mjs";
-import { selectTooltipAxis as t, selectTooltipAxisScale as n, selectTooltipAxisTicks as r } from "../state/selectors/tooltipSelectors.mjs";
-import { useAppSelector as i } from "../state/hooks.mjs";
-import { computed as a } from "vue";
+import { getBandSizeOfAxis } from "../utils/chart.mjs";
+import { selectTooltipAxis, selectTooltipAxisScale, selectTooltipAxisTicks } from "../state/selectors/tooltipSelectors.mjs";
+import { useAppSelector } from "../state/hooks.mjs";
+import { computed } from "vue";
 //#region src/context/useTooltipAxis.ts
-var o = () => i(t);
-function s() {
-	let t = o(), s = i(r), c = i(n);
-	return a(() => e({
-		...t.value,
-		scale: c.value
-	}, s.value));
+var useTooltipAxis = () => useAppSelector(selectTooltipAxis);
+function useTooltipAxisBandSize() {
+	const tooltipAxis = useTooltipAxis();
+	const tooltipTicks = useAppSelector(selectTooltipAxisTicks);
+	const tooltipAxisScale = useAppSelector(selectTooltipAxisScale);
+	return computed(() => getBandSizeOfAxis({
+		...tooltipAxis.value,
+		scale: tooltipAxisScale.value
+	}, tooltipTicks.value));
 }
 //#endregion
-export { s as useTooltipAxisBandSize };
+export { useTooltipAxisBandSize };