@jcdecor/vue 0.1.0 → 0.1.6

package/README.md

@@ -2,12 +2,12 @@
 
 Design System da **JC Decor** para Vue 3: tema, tokens e componentes construídos sobre o [Mantine Vue](https://mantine-vue.dev) (porte comunitário do Mantine). É o irmão do [`@jcdecor/ui`](../ui) (React): mesmos tokens, mesmo CSS, mesmos nomes de componentes.
 
-- 🎨 Paleta da marca em rampas OKLCH com contraste WCAG AA, Poppins, spacing, raios e sombras (tokens compartilhados com o React)
-- 🌗 Tema claro (padrão) e escuro, lembrado no localStorage, com variáveis CSS `--ds-*`
-- 🧩 Todo o `@mantine-vue/core` reexportado já temado, mais `KpiCard`, `Tag`, `PromoBanner`, `TopNav`, `DataTable`, `ProductCard`, `PriceTag`…
-- 💬 `@jcdecor/vue/chat`: bolhas, conversa, composer, lista de conversas e layout de atendimento
-- 📊 `@jcdecor/vue/charts`: gráficos do `@mantine-vue/charts` (ECharts) na paleta da marca, em pt-BR, claro/escuro
-- 🛡️ `@jcdecor/vue/brand`: logos e ilustrações SVG recoloríveis
+- Paleta da marca em rampas OKLCH com contraste WCAG AA, Poppins, spacing, raios e sombras (tokens compartilhados com o React)
+- Tema claro (padrão) e escuro, lembrado no localStorage, com variáveis CSS `--ds-*`
+- Todo o `@mantine-vue/core` reexportado já temado, mais `KpiCard`, `Tag`, `PromoBanner`, `TopNav`, `DataTable`, `ProductCard`, `PriceTag`…
+- `@jcdecor/vue/chat`: bolhas, conversa, composer, lista de conversas e layout de atendimento
+- `@jcdecor/vue/charts`: gráficos do `@mantine-vue/charts` (ECharts) na paleta da marca, em pt-BR, claro/escuro
+- `@jcdecor/vue/brand`: logos e ilustrações SVG recoloríveis
 
 ## Instalação
 
@@ -65,4 +65,4 @@ const favorite = ref(false);
 - `DataTable` aceita `#cell-<coluna>="{ row, index }"` além de `column.render`.
 - Gráficos usam ECharts (canvas): as cores da marca são convertidas para hex e trocam sozinhas com o tema; a altura é `height` (`h` é aceito como alias).
 
-Documentação: https://jc-decor.github.io/design-system/instalacao-vue · Playground: https://jc-decor.github.io/design-system/vue/
+Documentação: https://jc-decor.github.io/design-system/instalacao-vue — escolha **Vue** no seletor do topo para ver todos os exemplos, códigos e playgrounds em Vue.

package/dist/charts.js

@@ -1,19 +1,19 @@
-import { t as e } from "./themeDefaults-Ckd05FUY.js";
+import { n as e } from "./themeDefaults-C4raY1h-.js";
 import { c as t, l as n, n as r, o as i, r as a, u as o } from "./tokens-CDSk_JkY.js";
 import { a as s, d as c } from "./format-D40SMATK.js";
 import { Group as l, SegmentedControl as u, Text as d, hasNode as f, resolveNode as p, useComputedColorScheme as m, useMantineTheme as h } from "@mantine-vue/core";
-import { computed as g, defineComponent as _, h as v, inject as y, provide as b, ref as x, toValue as S } from "vue";
-import { THEME_KEY as C } from "vue-echarts";
-import { AreaChart as w, BarChart as ee, BarsList as te, BubbleChart as ne, CandlestickChart as re, ChartLegend as ie, ChartTooltip as ae, CompositeChart as oe, DonutChart as se, FunnelChart as ce, GaugeChart as le, Heatmap as ue, LineChart as de, MatrixChart as fe, PieChart as pe, RadarChart as T, RadialBarChart as E, SankeyChart as D, ScatterChart as O, Sparkline as k, Treemap as A, WaffleChart as j } from "@mantine-vue/charts";
+import { computed as g, defineComponent as _, h as v, inject as ee, nextTick as y, onMounted as b, onUpdated as x, provide as S, ref as C, toValue as w } from "vue";
+import { THEME_KEY as T } from "vue-echarts";
+import { AreaChart as te, BarChart as ne, BarsList as re, BubbleChart as ie, CandlestickChart as ae, ChartLegend as oe, ChartTooltip as se, CompositeChart as ce, DonutChart as le, FunnelChart as ue, GaugeChart as de, Heatmap as fe, LineChart as pe, MatrixChart as me, PieChart as E, RadarChart as D, RadialBarChart as O, SankeyChart as k, ScatterChart as A, Sparkline as j, Treemap as M, WaffleChart as N } from "@mantine-vue/charts";
 //#region src/charts/echartsTheme.ts
-var M = (e) => !!e && typeof e == "object" && !Array.isArray(e) && Object.getPrototypeOf(e) === Object.prototype;
-function N(e, t) {
-	if (!M(t)) return e;
+var P = (e) => !!e && typeof e == "object" && !Array.isArray(e) && Object.getPrototypeOf(e) === Object.prototype;
+function F(e, t) {
+	if (!P(t)) return e;
 	let n = { ...e };
-	for (let [e, r] of Object.entries(t)) r !== void 0 && (n[e] = M(r) && M(n[e]) ? N(n[e], r) : r);
+	for (let [e, r] of Object.entries(t)) r !== void 0 && (n[e] = P(r) && P(n[e]) ? F(n[e], r) : r);
 	return n;
 }
-function P(e, n = {}) {
+function I(e, n = {}) {
 	let a = o[e], s = {
 		axisLine: { lineStyle: { color: a.borderSoft } },
 		axisTick: {
@@ -112,46 +112,46 @@ function P(e, n = {}) {
 }
 //#endregion
 //#region src/charts/palette.ts
-function F(e) {
+function L(e) {
 	return a[e % a.length];
 }
-function I(e) {
+function R(e) {
 	return e.map((e, t) => ({
 		...e,
-		color: e.color ?? F(t)
+		color: e.color ?? L(t)
 	}));
 }
-var L = (e) => s(e), R = /^var\(\s*--jc-chart-(\d+)\s*(?:,[^)]*)?\)$/, z = /^var\(\s*--mantine-color-([a-z][\w]*)-(\d)\s*\)$/i, B = /^([a-z][\w]*)(?:\.(\d))?$/i;
-function me(e, t) {
+var z = (e) => s(e), he = /^var\(\s*--jc-chart-(\d+)\s*(?:,[^)]*)?\)$/, ge = /^var\(\s*--mantine-color-([a-z][\w]*)-(\d)\s*\)$/i, _e = /^([a-z][\w]*)(?:\.(\d))?$/i;
+function ve(e, t) {
 	let n = e.primaryShade;
 	return typeof n == "number" ? n : n?.[t] ?? 6;
 }
-function V(e, t, n) {
+function B(e, t, n) {
 	if (typeof e != "string") return;
 	let i = e.trim();
 	if (!i) return;
-	let a = R.exec(i);
+	let a = he.exec(i);
 	if (a) {
 		let e = r[n], t = Number(a[1]) - 1;
 		return t >= 0 ? e[t % e.length] : i;
 	}
-	let o = z.exec(i);
+	let o = ge.exec(i);
 	if (o) return t.colors[o[1]]?.[Number(o[2])] ?? i;
 	if (i === "white" && t.white) return t.white;
 	if (i === "black" && t.black) return t.black;
-	let s = B.exec(i);
+	let s = _e.exec(i);
 	if (s) {
 		let e = t.colors[s[1]];
-		if (e) return e[s[2] === void 0 ? me(t, n) : Number(s[2])] ?? i;
+		if (e) return e[s[2] === void 0 ? ve(t, n) : Number(s[2])] ?? i;
 	}
 	return i;
 }
-function H(e, t) {
+function V(e, t) {
 	let n = r[t];
 	return n[e % n.length];
 }
-function U() {
-	let e = h(), t = m("light"), n = g(() => t.value === "dark" ? "dark" : "light"), i = g(() => o[n.value]), a = g(() => r[n.value]), s = (t) => V(t, e.value, n.value), c = (e) => H(e, n.value);
+function H() {
+	let e = h(), t = m("light"), n = g(() => t.value === "dark" ? "dark" : "light"), i = g(() => o[n.value]), a = g(() => r[n.value]), s = (t) => B(t, e.value, n.value), c = (e) => V(e, n.value);
 	return {
 		scheme: n,
 		tokens: i,
@@ -166,38 +166,47 @@ function U() {
 }
 //#endregion
 //#region src/charts/charts.ts
-var he = (e) => e.replace(/-([a-z])/g, (e, t) => t.toUpperCase()), ge = /* @__PURE__ */ new Set([
+var ye = (e) => e.replace(/-([a-z])/g, (e, t) => t.toUpperCase()), be = /* @__PURE__ */ new Set([
 	"connectNulls",
 	"roundCaps",
 	"autoresize",
 	"loading"
-]), _e = (e) => ge.has(e) || /^with[A-Z]/.test(e);
-function ve(e) {
+]), xe = (e) => be.has(e) || /^with[A-Z]/.test(e);
+function U(e) {
 	let t = {};
 	for (let [n, r] of Object.entries(e)) {
-		let e = n.startsWith("data-") || n.startsWith("aria-") ? n : he(n);
-		t[e] = r === "" && _e(e) ? !0 : r;
+		let e = n.startsWith("data-") || n.startsWith("aria-") ? n : ye(n);
+		t[e] = r === "" && xe(e) ? !0 : r;
 	}
 	return t;
 }
-var ye = (e) => Object.fromEntries(Object.entries(e).filter(([, e]) => e !== void 0)), W = (e) => Array.isArray(e) ? e : void 0, G = (e) => typeof e == "string" ? e : void 0, K = (e) => typeof e == "function" ? e : L;
+var Se = (e) => Object.fromEntries(Object.entries(e).filter(([, e]) => e !== void 0)), W = (e) => Array.isArray(e) ? e : void 0, G = (e) => typeof e == "string" ? e : void 0, K = (e) => typeof e == "function" ? e : z;
 function q(e, t, n) {
 	return _({
 		name: `Jc${e}`,
 		inheritAttrs: !1,
 		props: n.props ?? {},
 		setup(e, { attrs: r, slots: i, expose: a }) {
-			let o = U(), s = y(C, null), c = g(() => N(P(o.scheme.value, n.themeOptions?.(e)), S(s)));
-			b(C, c);
-			let l = x();
-			return a({
+			let o = H(), s = ee(T, null), c = g(() => F(I(o.scheme.value, n.themeOptions?.(e)), w(s)));
+			S(T, c);
+			let l = C(), u = /* @__PURE__ */ new WeakSet(), d = () => {
+				let t = n.patch && l.value?.getEchartsInstance?.();
+				if (!t || u.has(t)) return;
+				u.add(t);
+				let i = () => n.patch(t, {
+					...e,
+					...U(r)
+				});
+				t.on("rendered", i), i();
+			};
+			return n.patch && (b(() => y(d)), x(() => y(d))), a({
 				getEchartsInstance: () => l.value?.getEchartsInstance?.(),
 				resize: () => l.value?.resize?.(),
 				setOption: (e) => l.value?.setOption?.(e)
 			}), () => {
 				let { h: a, ...s } = {
-					...ye(e),
-					...ve(r)
+					...Se(e),
+					...U(r)
 				};
 				s.height === void 0 && a !== void 0 && (s.height = a);
 				let c = {
@@ -232,9 +241,9 @@ function J(e, t, { c: n, t: r }) {
 		valueFormatter: s,
 		textColor: a,
 		gridColor: o,
-		xAxisProps: N(d ? u : l, t.xAxisProps),
-		yAxisProps: N(d ? l : u, t.yAxisProps),
-		rightYAxisProps: N(u, t.rightYAxisProps),
+		xAxisProps: F(d ? u : l, t.xAxisProps),
+		yAxisProps: F(d ? l : u, t.yAxisProps),
+		rightYAxisProps: F(u, t.rightYAxisProps),
 		referenceLines: Y(t.referenceLines, n, r.text3),
 		referenceAreas: Y(t.referenceAreas, n, r.text3),
 		referenceDots: Y(t.referenceDots, n, r.text3),
@@ -247,8 +256,8 @@ function Y(e, t, n) {
 		color: t.resolve(e.color) ?? n
 	}));
 }
-function be(e, t) {
-	return N({ valueFormatter: (e) => t(Number(e)) }, e.tooltipProps);
+function Ce(e, t) {
+	return F({ valueFormatter: (e) => t(Number(e)) }, e.tooltipProps);
 }
 var X = {
 	light: [
@@ -263,17 +272,29 @@ var X = {
 		n.horizon[500],
 		n.horizon[300]
 	]
-}, xe = q("LineChart", de, { build: (e, t) => J({
+}, we = q("LineChart", pe, { build: (e, t) => J({
 	height: 280,
 	curveType: "monotone",
 	strokeWidth: 2.5
-}, e, t) }), Se = q("AreaChart", w, { build: (e, t) => J({
-	height: 280,
-	curveType: "monotone",
-	strokeWidth: 2.5,
-	fillOpacity: .25
-}, e, t) });
-function Ce(e) {
+}, e, t) }), Te = q("AreaChart", te, {
+	props: { fillOpacity: {
+		type: Number,
+		default: void 0
+	} },
+	patch: (e, t) => {
+		let n = e.getOption().series ?? [];
+		if (!n.some((e) => e.type === "line" && !e.areaStyle)) return;
+		let r = typeof t.fillOpacity == "number" ? t.fillOpacity : .25;
+		e.setOption({ series: n.map((e) => e.type === "line" && !e.areaStyle ? { areaStyle: { opacity: r } } : {}) });
+	},
+	build: (e, t) => J({
+		height: 280,
+		curveType: "monotone",
+		strokeWidth: 2.5,
+		fillOpacity: .25
+	}, e, t)
+});
+function Ee(e) {
 	let t = e.barProps && typeof e.barProps == "object" ? e.barProps : {}, n = t.radius ?? t.borderRadius;
 	if (Array.isArray(n)) return n;
 	let r = e.type === "stacked" || e.type === "percent", i = typeof n == "number" ? n : r ? 0 : 4;
@@ -289,7 +310,7 @@ function Ce(e) {
 		0
 	];
 }
-var we = q("BarChart", ee, {
+var De = q("BarChart", ne, {
 	props: {
 		type: String,
 		orientation: String,
@@ -298,12 +319,12 @@ var we = q("BarChart", ee, {
 			default: void 0
 		}
 	},
-	themeOptions: (e) => ({ barRadius: Ce(e) }),
+	themeOptions: (e) => ({ barRadius: Ee(e) }),
 	build: (e, t) => J({ height: 280 }, e, t)
-}), Te = q("CompositeChart", oe, { build: (e, t) => J({
+}), Oe = q("CompositeChart", ce, { build: (e, t) => J({
 	height: 280,
 	curveType: "monotone"
-}, e, t) }), Ee = q("RadarChart", T, { build: (e, { c: t }) => ({
+}, e, t) }), ke = q("RadarChart", D, { build: (e, { c: t }) => ({
 	height: 300,
 	...e,
 	series: t.withPalette(W(e.series))
@@ -312,19 +333,21 @@ function Z(e, t, { c: n, t: r }) {
 	let i = K(t.valueFormatter);
 	return {
 		height: typeof t.size == "number" ? t.size : 160,
+		...typeof t.size == "number" && { width: t.size },
 		withTooltip: !0,
+		chartLabelFontSize: 14,
 		...e,
 		...t,
 		valueFormatter: i,
-		tooltipProps: be(t, i),
+		tooltipProps: Ce(t, i),
 		chartLabelColor: n.resolve(G(t.chartLabelColor)) ?? r.text,
 		data: n.withPalette(W(t.data))
 	};
 }
-var De = q("DonutChart", se, { build: (e, t) => Z({
+var Ae = q("DonutChart", le, { build: (e, t) => Z({
 	paddingAngle: 2,
 	thickness: 52
-}, e, t) }), Oe = q("PieChart", pe, { build: (e, t) => Z({}, e, t) }), ke = q("Sparkline", k, { build: (e, { c: t }) => {
+}, e, t) }), je = q("PieChart", E, { build: (e, t) => Z({}, e, t) }), Me = q("Sparkline", j, { build: (e, { c: t }) => {
 	let n = e.trendColors;
 	return {
 		height: 48,
@@ -335,21 +358,21 @@ var De = q("DonutChart", se, { build: (e, t) => Z({
 		color: t.resolve(G(e.color)) ?? t.color(0),
 		trendColors: n && Object.fromEntries(Object.entries(n).map(([e, n]) => [e, t.resolve(n)]))
 	};
-} }), Ae = q("ScatterChart", O, { build: (e, { c: t }) => ({
+} }), Ne = q("ScatterChart", A, { build: (e, { c: t }) => ({
 	...e,
 	series: t.withPalette(W(e.series))
-}) }), je = q("BubbleChart", ne, { build: (e, { c: t }) => ({
-	valueFormatter: L,
+}) }), Pe = q("BubbleChart", ie, { build: (e, { c: t }) => ({
+	valueFormatter: z,
 	...e,
 	color: t.resolve(G(e.color)) ?? t.color(0)
-}) }), Me = q("FunnelChart", ce, { build: (e, { c: t }) => ({
-	valueFormatter: L,
+}) }), Fe = q("FunnelChart", ue, { build: (e, { c: t }) => ({
+	valueFormatter: z,
 	...e,
 	data: t.withPalette(W(e.data))
-}) }), Ne = q("RadialBarChart", E, { build: (e, { c: t }) => ({
+}) }), Q = q("RadialBarChart", O, { build: (e, { c: t }) => ({
 	...e,
 	data: t.withPalette(W(e.data))
-}) }), Pe = q("BarsList", te, {
+}) }), Ie = q("BarsList", re, {
 	themeOptions: () => ({ barRadius: [
 		0,
 		4,
@@ -357,20 +380,20 @@ var De = q("DonutChart", se, { build: (e, t) => Z({
 		0
 	] }),
 	build: (e, { c: t, t: n }) => ({
-		valueFormatter: L,
+		valueFormatter: z,
 		...e,
 		barColor: t.resolve(G(e.barColor)) ?? t.color(0),
 		textColor: t.resolve(G(e.textColor) ?? G(e.barTextColor)) ?? n.text2
 	})
-}), Fe = q("Heatmap", ue, { build: (e, { c: t, scheme: n }) => ({
+}), Le = q("Heatmap", fe, { build: (e, { c: t, scheme: n }) => ({
 	...e,
 	colors: (W(e.colors) ?? X[n]).map((e) => t.resolve(e) ?? e)
-}) }), Q = q("MatrixChart", fe, { build: (e, { c: t, t: n, scheme: r }) => ({
+}) }), Re = q("MatrixChart", me, { build: (e, { c: t, t: n, scheme: r }) => ({
 	...e,
 	colors: (W(e.colors) ?? X[r]).map((e) => t.resolve(e) ?? e),
 	emptyColor: t.resolve(G(e.emptyColor)) ?? n.surface2
-}) }), Ie = q("GaugeChart", le, { build: (e, { c: t, t: n }) => ({
-	valueFormatter: L,
+}) }), ze = q("GaugeChart", de, { build: (e, { c: t, t: n }) => ({
+	valueFormatter: z,
 	...e,
 	filledColor: t.resolve(G(e.filledColor)) ?? t.color(0),
 	trackColor: t.resolve(G(e.trackColor)) ?? n.borderSoft,
@@ -379,15 +402,15 @@ var De = q("DonutChart", se, { build: (e, t) => Z({
 		...e,
 		color: t.resolve(e.color) ?? t.color(n)
 	}))
-}) }), Le = q("WaffleChart", j, { build: (e, { c: t, t: n }) => ({
+}) }), Be = q("WaffleChart", N, { build: (e, { c: t, t: n }) => ({
 	...e,
 	data: t.withPalette(W(e.data)),
 	emptyColor: t.resolve(G(e.emptyColor)) ?? n.borderSoft
-}) }), Re = q("Treemap", A, { build: (e, { c: t }) => ({
-	valueFormatter: L,
+}) }), Ve = q("Treemap", M, { build: (e, { c: t }) => ({
+	valueFormatter: z,
 	...e,
 	data: t.withPalette(W(e.data))
-}) }), ze = q("SankeyChart", D, { build: (e, { c: t }) => {
+}) }), He = q("SankeyChart", k, { build: (e, { c: t }) => {
 	let n = (e) => e && t.withPalette(e).map((e) => ({
 		...e,
 		itemStyle: {
@@ -396,19 +419,19 @@ var De = q("DonutChart", se, { build: (e, t) => Z({
 		}
 	}));
 	return {
-		valueFormatter: L,
+		valueFormatter: z,
 		...e,
 		...e.nodes !== void 0 && { nodes: n(W(e.nodes)) },
 		...e.data !== void 0 && { data: n(W(e.data)) }
 	};
-} }), Be = q("CandlestickChart", re, { build: (e, { c: t }) => ({
+} }), Ue = q("CandlestickChart", ae, { build: (e, { c: t }) => ({
 	...e,
 	upColor: t.resolve(G(e.upColor) ?? "evergreen"),
 	downColor: t.resolve(G(e.downColor) ?? "danger")
 }) }), $ = {
 	type: null,
 	default: void 0
-}, Ve = _({
+}, We = _({
 	name: "ChartCard",
 	inheritAttrs: !1,
 	props: {
@@ -468,6 +491,6 @@ var De = q("DonutChart", se, { build: (e, t) => Z({
 	}
 });
 //#endregion
-export { Se as AreaChart, we as BarChart, Pe as BarsList, je as BubbleChart, Be as CandlestickChart, Ve as ChartCard, ie as ChartLegend, ae as ChartTooltip, Te as CompositeChart, De as DonutChart, Me as FunnelChart, Ie as GaugeChart, Fe as Heatmap, xe as LineChart, Q as MatrixChart, Oe as PieChart, Ee as RadarChart, Ne as RadialBarChart, ze as SankeyChart, Ae as ScatterChart, ke as Sparkline, Re as Treemap, Le as WaffleChart, r as chartColors, a as chartPalette, P as createJcEChartsTheme, N as mergeChartOptions, F as paletteColor, H as paletteHex, L as ptBRValueFormatter, V as resolveChartColor, U as useJcChartColors, I as withPalette };
+export { Te as AreaChart, De as BarChart, Ie as BarsList, Pe as BubbleChart, Ue as CandlestickChart, We as ChartCard, oe as ChartLegend, se as ChartTooltip, Oe as CompositeChart, Ae as DonutChart, Fe as FunnelChart, ze as GaugeChart, Le as Heatmap, we as LineChart, Re as MatrixChart, je as PieChart, ke as RadarChart, Q as RadialBarChart, He as SankeyChart, Ne as ScatterChart, Me as Sparkline, Ve as Treemap, Be as WaffleChart, r as chartColors, a as chartPalette, I as createJcEChartsTheme, F as mergeChartOptions, L as paletteColor, V as paletteHex, z as ptBRValueFormatter, B as resolveChartColor, H as useJcChartColors, R as withPalette };
 
 //# sourceMappingURL=charts.js.map