nemesischart 2.0.9 → 2.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,11 +1,11 @@
1
- import { ref as et, shallowRef as jt, onMounted as Vt, onBeforeUnmount as Nt, watch as Rt, openBlock as u, createElementBlock as f, normalizeStyle as x, createElementVNode as S, computed as M, unref as s, normalizeClass as ot, renderSlot as L, createTextVNode as X, toDisplayString as B, createCommentVNode as y, createVNode as ft, Fragment as bt, renderList as ht, withKeys as yt, withModifiers as mt, useCssVars as Pt } from "vue";
2
- import { Chart as Tt, Title as It, Tooltip as Dt, Legend as Wt, Filler as Ot, LineController as Xt, LineElement as Yt, PointElement as Jt, BarController as Qt, BarElement as Ut, PieController as Gt, PolarAreaController as Kt, ArcElement as Zt, CategoryScale as _t, LinearScale as te, RadialLinearScale as ee } from "chart.js";
3
- const nt = (t, m) => {
4
- const e = t.__vccOpts || t;
5
- for (const [p, o] of m)
6
- e[p] = o;
7
- return e;
8
- }, oe = {
1
+ import { ref as _, shallowRef as _e, onMounted as et, onBeforeUnmount as tt, watch as ce, openBlock as v, createElementBlock as x, normalizeStyle as q, createElementVNode as E, computed as F, renderSlot as S, createTextVNode as j, toDisplayString as I, createCommentVNode as B, unref as y, normalizeClass as J, createVNode as P, createSlots as Y, withCtx as z, createBlock as re, Fragment as Me, renderList as De, withKeys as Fe, withModifiers as Le, Teleport as at, useCssVars as ot } from "vue";
2
+ import { Chart as Ie, Title as nt, Tooltip as rt, Legend as lt, Filler as st, LineController as it, LineElement as ct, PointElement as dt, BarController as ut, BarElement as pt, PieController as ft, PolarAreaController as gt, ArcElement as mt, CategoryScale as ht, LinearScale as yt, RadialLinearScale as vt } from "chart.js";
3
+ const W = (e, r) => {
4
+ const t = e.__vccOpts || e;
5
+ for (const [n, a] of r)
6
+ t[n] = a;
7
+ return t;
8
+ }, bt = {
9
9
  __name: "ChartBase",
10
10
  props: {
11
11
  type: { type: String, required: !0 },
@@ -15,144 +15,317 @@ const nt = (t, m) => {
15
15
  height: { type: [String, Number], default: 300 },
16
16
  width: { type: [String, Number], default: null }
17
17
  },
18
- setup(t, { expose: m }) {
19
- Tt.register(
20
- It,
21
- Dt,
22
- Wt,
23
- Ot,
24
- Xt,
25
- Yt,
26
- Jt,
27
- Qt,
28
- Ut,
29
- Gt,
30
- Kt,
31
- Zt,
32
- _t,
33
- te,
34
- ee
18
+ setup(e, { expose: r }) {
19
+ Ie.register(
20
+ nt,
21
+ rt,
22
+ lt,
23
+ st,
24
+ it,
25
+ ct,
26
+ dt,
27
+ ut,
28
+ pt,
29
+ ft,
30
+ gt,
31
+ mt,
32
+ ht,
33
+ yt,
34
+ vt
35
35
  );
36
- const e = t, p = et(null), o = jt(null), k = {
36
+ const t = e, n = _(null), a = _e(null), u = {
37
37
  responsive: !0,
38
38
  maintainAspectRatio: !1,
39
39
  plugins: {
40
40
  legend: { position: "top" }
41
41
  }
42
42
  };
43
- function $() {
44
- return { ...k, ...e.options };
43
+ function c() {
44
+ return { ...u, ...t.options };
45
45
  }
46
- function A() {
47
- p.value && (o.value = new Tt(p.value, {
48
- type: e.type,
49
- data: e.data,
50
- options: $(),
51
- plugins: e.plugins
46
+ function f() {
47
+ n.value && (a.value = new Ie(n.value, {
48
+ type: t.type,
49
+ data: t.data,
50
+ options: c(),
51
+ plugins: t.plugins
52
52
  }));
53
53
  }
54
- function D() {
55
- o.value && (o.value.destroy(), o.value = null);
54
+ function C() {
55
+ a.value && (a.value.destroy(), a.value = null);
56
56
  }
57
- return Vt(A), Nt(D), Rt(
58
- () => e.data,
59
- (R) => {
60
- if (!o.value) return;
61
- o.value.data.labels = R.labels;
62
- const w = o.value.data.datasets, T = R.datasets;
63
- w.length !== T.length ? o.value.data.datasets = T : T.forEach((J, O) => Object.assign(w[O], J)), o.value.update();
57
+ return et(f), tt(C), ce(
58
+ () => t.data,
59
+ (l) => {
60
+ if (!a.value) return;
61
+ a.value.data.labels = l.labels;
62
+ const d = a.value.data.datasets, p = l.datasets;
63
+ d.length !== p.length ? a.value.data.datasets = p : p.forEach((g, b) => Object.assign(d[b], g)), a.value.update();
64
64
  },
65
65
  { deep: !0 }
66
- ), Rt(
67
- () => e.options,
66
+ ), ce(
67
+ () => t.options,
68
68
  () => {
69
- o.value && (o.value.options = $(), o.value.update());
69
+ a.value && (a.value.options = c(), a.value.update());
70
70
  },
71
71
  { deep: !0 }
72
- ), m({ chart: o }), (R, w) => (u(), f("div", {
73
- class: "nc-chart-wrapper w-full",
74
- style: x({
75
- height: typeof t.height == "number" ? `${t.height}px` : t.height,
76
- width: t.width ? typeof t.width == "number" ? `${t.width}px` : t.width : "100%"
72
+ ), ce(
73
+ () => t.type,
74
+ () => {
75
+ C(), f();
76
+ }
77
+ ), r({ chart: a }), (l, d) => (v(), x("div", {
78
+ class: "nc-chart-wrapper",
79
+ style: q({
80
+ height: typeof e.height == "number" ? `${e.height}px` : e.height,
81
+ width: e.width ? typeof e.width == "number" ? `${e.width}px` : e.width : "100%"
77
82
  })
78
83
  }, [
79
- S("canvas", {
84
+ E("canvas", {
80
85
  ref_key: "canvasRef",
81
- ref: p
86
+ ref: n
82
87
  }, null, 512)
83
88
  ], 4));
84
89
  }
85
- }, st = /* @__PURE__ */ nt(oe, [["__scopeId", "data-v-9828990e"]]);
86
- function ae(t) {
87
- const m = t.replace("#", ""), e = m.length === 3 ? m.split("").map((J) => J + J).join("") : m, p = parseInt(e.slice(0, 2), 16) / 255, o = parseInt(e.slice(2, 4), 16) / 255, k = parseInt(e.slice(4, 6), 16) / 255, $ = Math.max(p, o, k), A = Math.min(p, o, k), D = ($ + A) / 2;
88
- if ($ === A) return [0, 0, D * 100];
89
- const R = $ - A, w = D > 0.5 ? R / (2 - $ - A) : R / ($ + A);
90
- let T;
91
- return $ === p ? T = ((o - k) / R + (o < k ? 6 : 0)) / 6 : $ === o ? T = ((k - p) / R + 2) / 6 : T = ((p - o) / R + 4) / 6, [T * 360, w * 100, D * 100];
90
+ }, Q = /* @__PURE__ */ W(bt, [["__scopeId", "data-v-cafc7888"]]);
91
+ function xt(e) {
92
+ const r = e.replace("#", ""), t = r.length === 3 ? r.split("").map((g) => g + g).join("") : r, n = parseInt(t.slice(0, 2), 16) / 255, a = parseInt(t.slice(2, 4), 16) / 255, u = parseInt(t.slice(4, 6), 16) / 255, c = Math.max(n, a, u), f = Math.min(n, a, u), C = (c + f) / 2;
93
+ if (c === f) return [0, 0, C * 100];
94
+ const l = c - f, d = C > 0.5 ? l / (2 - c - f) : l / (c + f);
95
+ let p;
96
+ return c === n ? p = ((a - u) / l + (a < u ? 6 : 0)) / 6 : c === a ? p = ((u - n) / l + 2) / 6 : p = ((n - a) / l + 4) / 6, [p * 360, d * 100, C * 100];
92
97
  }
93
- function ne(t, m, e) {
94
- t /= 360, m /= 100, e /= 100;
95
- const p = e < 0.5 ? e * (1 + m) : e + m - e * m, o = 2 * e - p, k = (R) => (R < 0 && (R += 1), R > 1 && (R -= 1), R < 1 / 6 ? o + (p - o) * 6 * R : R < 1 / 2 ? p : R < 2 / 3 ? o + (p - o) * (2 / 3 - R) * 6 : o), $ = m === 0 ? e : k(t + 1 / 3), A = m === 0 ? e : k(t), D = m === 0 ? e : k(t - 1 / 3);
96
- return "#" + [$, A, D].map((R) => Math.round(R * 255).toString(16).padStart(2, "0")).join("");
98
+ function $t(e, r, t) {
99
+ e /= 360, r /= 100, t /= 100;
100
+ const n = t < 0.5 ? t * (1 + r) : t + r - t * r, a = 2 * t - n, u = (l) => (l < 0 && (l += 1), l > 1 && (l -= 1), l < 1 / 6 ? a + (n - a) * 6 * l : l < 1 / 2 ? n : l < 2 / 3 ? a + (n - a) * (2 / 3 - l) * 6 : a), c = r === 0 ? t : u(e + 1 / 3), f = r === 0 ? t : u(e), C = r === 0 ? t : u(e - 1 / 3);
101
+ return "#" + [c, f, C].map((l) => Math.round(l * 255).toString(16).padStart(2, "0")).join("");
97
102
  }
98
- function xt(t, m = 7) {
99
- if (!(t != null && t.startsWith("#"))) return Array.from({ length: m }, () => t ?? "#3B82F6");
100
- const [e, p] = ae(t), o = 20, k = 72;
101
- return Array.from({ length: m }, ($, A) => {
102
- const D = m === 1 ? 0.5 : A / (m - 1), R = o + D * (k - o), w = Math.max(50, p - Math.max(0, R - 55) * 0.6);
103
- return ne(e, w, R);
103
+ function de(e, r = 7) {
104
+ if (!(e != null && e.startsWith("#"))) return Array.from({ length: r }, () => e ?? "#3B82F6");
105
+ const [t, n] = xt(e), a = 20, u = 72;
106
+ return Array.from({ length: r }, (c, f) => {
107
+ const C = r === 1 ? 0.5 : f / (r - 1), l = a + C * (u - a), d = Math.max(50, n - Math.max(0, l - 55) * 0.6);
108
+ return $t(t, d, l);
104
109
  });
105
110
  }
106
- const le = {
111
+ const Ct = {
107
112
  light: { bg: "#ffffff", text: "#000000", muted: "#64748B", grid: "rgba(15,23,42,0.06)" },
108
113
  dark: { bg: "#000000", text: "#ffffff", muted: "#7b7b7b", grid: "rgba(255,255,255,0.08)" },
109
114
  transparent: { bg: "transparent", text: "inherit", muted: "#7b7b7b", grid: "rgba(127,127,127,0.15)" }
110
115
  };
111
- function j(t, m) {
112
- if (!t) return `rgba(59,130,246,${m})`;
113
- if (t.startsWith("#")) {
114
- const e = t.replace("#", ""), p = e.length === 3 ? e.split("").map((A) => A + A).join("") : e, o = parseInt(p.slice(0, 2), 16), k = parseInt(p.slice(2, 4), 16), $ = parseInt(p.slice(4, 6), 16);
115
- return `rgba(${o},${k},${$},${m})`;
116
+ function D(e, r) {
117
+ if (!e) return `rgba(59,130,246,${r})`;
118
+ if (e.startsWith("#")) {
119
+ const t = e.replace("#", ""), n = t.length === 3 ? t.split("").map((f) => f + f).join("") : t, a = parseInt(n.slice(0, 2), 16), u = parseInt(n.slice(2, 4), 16), c = parseInt(n.slice(4, 6), 16);
120
+ return `rgba(${a},${u},${c},${r})`;
116
121
  }
117
- if (t.startsWith("rgb")) {
118
- const e = t.match(/[\d.]+/g);
119
- if (e && e.length >= 3) return `rgba(${e[0]},${e[1]},${e[2]},${m})`;
122
+ if (e.startsWith("rgb")) {
123
+ const t = e.match(/[\d.]+/g);
124
+ if (t && t.length >= 3) return `rgba(${t[0]},${t[1]},${t[2]},${r})`;
120
125
  }
121
- return t;
126
+ return e;
122
127
  }
123
- function it(t) {
124
- const m = M(() => {
125
- const p = le[t.tema], o = p ? { ...p, bg: t.corFundo || p.bg } : { bg: t.corFundo || t.tema, text: "#F8FAFC", muted: "#7b7b7b", grid: "rgba(255,255,255,0.08)" };
128
+ function G(e) {
129
+ const r = F(() => {
130
+ const n = Ct[e.tema], a = n ? { ...n, bg: e.corFundo || n.bg } : { bg: e.corFundo || e.tema, text: "#F8FAFC", muted: "#7b7b7b", grid: "rgba(255,255,255,0.08)" };
126
131
  return {
127
- ...o,
128
- text: t.corTexto || o.text,
129
- muted: t.corTexto || o.muted
132
+ ...a,
133
+ text: e.corTexto || a.text,
134
+ muted: e.corTexto || a.muted
130
135
  };
131
- }), e = M(() => ({
132
- background: m.value.bg,
133
- color: m.value.text,
134
- borderRadius: typeof t.borderRadius == "number" ? `${t.borderRadius}px` : t.borderRadius,
135
- boxShadow: t.sombra,
136
- border: t.corBorda ? `1px solid ${t.corBorda}` : "none"
136
+ }), t = F(() => ({
137
+ background: r.value.bg,
138
+ color: r.value.text,
139
+ borderRadius: typeof e.borderRadius == "number" ? `${e.borderRadius}px` : e.borderRadius,
140
+ boxShadow: e.sombra,
141
+ border: e.corBorda ? `1px solid ${e.corBorda}` : "none"
137
142
  }));
138
- return { palette: m, cardStyle: e, toRgba: j };
143
+ return { palette: r, cardStyle: t, toRgba: D };
144
+ }
145
+ function ze(e, r) {
146
+ const t = window.getComputedStyle(e);
147
+ let n = "";
148
+ for (let a = 0; a < t.length; a++) {
149
+ const u = t[a];
150
+ let c = t.getPropertyValue(u);
151
+ if (c && c.indexOf("url(") !== -1 && !/url\(["']?data:/.test(c))
152
+ if (u === "background-image" || u === "background" || u === "mask-image" || u === "border-image" || u === "border-image-source")
153
+ c = "none";
154
+ else
155
+ continue;
156
+ n += `${u}:${c};`;
157
+ }
158
+ r.setAttribute("style", n);
159
+ }
160
+ function kt(e, r) {
161
+ ze(e, r);
162
+ const t = e.querySelectorAll("*"), n = r.querySelectorAll("*");
163
+ for (let a = 0; a < t.length; a++)
164
+ n[a] && ze(t[a], n[a]);
165
+ }
166
+ function St(e, r) {
167
+ const t = e.querySelectorAll("canvas"), n = r.querySelectorAll("canvas");
168
+ t.forEach((a, u) => {
169
+ if (!n[u]) return;
170
+ const c = document.createElement("img");
171
+ try {
172
+ c.src = a.toDataURL("image/png");
173
+ } catch {
174
+ return;
175
+ }
176
+ const f = a.getBoundingClientRect();
177
+ c.setAttribute("style", `width:${f.width}px;height:${f.height}px;display:block;`), n[u].replaceWith(c);
178
+ });
179
+ }
180
+ async function At(e, r = {}) {
181
+ if (!e) return;
182
+ const {
183
+ nomeArquivo: t = "componente.png",
184
+ escala: n = 2,
185
+ corFundo: a = null
186
+ } = r, u = e.getBoundingClientRect(), c = Math.ceil(u.width), f = Math.ceil(u.height), C = e.cloneNode(!0);
187
+ kt(e, C), St(e, C), C.style.margin = "0", C.style.transform = "none";
188
+ const l = new XMLSerializer().serializeToString(C), d = `<svg xmlns="http://www.w3.org/2000/svg" width="${c}" height="${f}"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="width:${c}px;height:${f}px;">` + l + "</div></foreignObject></svg>", g = "data:image/svg+xml;base64," + (typeof window < "u" && window.btoa ? window.btoa(unescape(encodeURIComponent(d))) : ""), b = new Image();
189
+ await new Promise((s, $) => {
190
+ b.onload = s, b.onerror = $, b.src = g;
191
+ });
192
+ const m = document.createElement("canvas");
193
+ m.width = c * n, m.height = f * n;
194
+ const k = m.getContext("2d");
195
+ k.scale(n, n), a && (k.fillStyle = a, k.fillRect(0, 0, c, f)), k.drawImage(b, 0, 0);
196
+ let M;
197
+ try {
198
+ M = m.toDataURL("image/png");
199
+ } catch (s) {
200
+ console.error("Falha ao exportar imagem: canvas contaminado.", s);
201
+ return;
202
+ }
203
+ const o = document.createElement("a");
204
+ o.download = t, o.href = M, document.body.appendChild(o), o.click(), document.body.removeChild(o);
205
+ }
206
+ const Ne = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>';
207
+ function K(e, r, t) {
208
+ const n = _(null);
209
+ async function a() {
210
+ await At(n.value, {
211
+ nomeArquivo: e.nomeArquivoExport,
212
+ corFundo: r.value.bg !== "transparent" ? r.value.bg : null
213
+ }), t("exportado");
214
+ }
215
+ return { cardRef: n, onExportar: a, iconeExportar: Ne };
139
216
  }
140
- function pt(t) {
141
- const m = M(() => t.tipoValor === "moeda" ? new Intl.NumberFormat(t.locale, { style: "currency", currency: t.moeda }) : t.tipoValor === "percentual" ? new Intl.NumberFormat(t.locale, { style: "percent", maximumFractionDigits: 2 }) : new Intl.NumberFormat(t.locale, { maximumFractionDigits: 2 }));
142
- function e(p) {
143
- if (p == null) return "";
144
- const o = Number(p);
145
- return Number.isNaN(o) ? String(p) : t.tipoValor === "percentual" ? m.value.format(o / 100) : m.value.format(o);
217
+ const Bt = { class: "nc-topo nc-flex nc-align-items-start nc-justify-content-between nc-gap-3" }, Rt = {
218
+ key: 0,
219
+ class: "nc-legendas-flex nc-flex nc-flex-column"
220
+ }, qt = {
221
+ key: 1,
222
+ class: "nc-actions nc-inline-flex nc-align-items-center nc-gap-2"
223
+ }, wt = ["innerHTML"], Tt = {
224
+ __name: "CardCabecalho",
225
+ props: {
226
+ legenda: { type: String, default: null },
227
+ sublegenda: { type: String, default: null },
228
+ palette: { type: Object, required: !0 },
229
+ textoBotao: { type: String, default: "Ver mais" },
230
+ botaoVisivel: { type: Boolean, default: !1 },
231
+ exportar: { type: Boolean, default: !1 },
232
+ opacidadeLegenda: { type: [Number, String], default: 0.95 }
233
+ },
234
+ emits: ["botaoAcao", "exportar"],
235
+ setup(e, { emit: r }) {
236
+ const t = r, n = Ne;
237
+ return (a, u) => (v(), x("div", Bt, [
238
+ a.$slots.legenda || e.legenda || a.$slots.sublegenda || e.sublegenda ? (v(), x("div", Rt, [
239
+ a.$slots.legenda || e.legenda ? (v(), x("div", {
240
+ key: 0,
241
+ class: "nc-text-xs nc-font-medium",
242
+ style: q({ color: e.palette.text, opacity: e.opacidadeLegenda })
243
+ }, [
244
+ S(a.$slots, "legenda", {}, () => [
245
+ j(I(e.legenda), 1)
246
+ ], !0)
247
+ ], 4)) : B("", !0),
248
+ a.$slots.sublegenda || e.sublegenda ? (v(), x("div", {
249
+ key: 1,
250
+ class: "nc-text-xs",
251
+ style: q({ color: e.palette.muted })
252
+ }, [
253
+ S(a.$slots, "sublegenda", {}, () => [
254
+ j(I(e.sublegenda), 1)
255
+ ], !0)
256
+ ], 4)) : B("", !0)
257
+ ])) : B("", !0),
258
+ a.$slots.actions || e.botaoVisivel || e.exportar ? (v(), x("div", qt, [
259
+ S(a.$slots, "actions", {}, () => [
260
+ e.botaoVisivel ? (v(), x("button", {
261
+ key: 0,
262
+ class: "nc-btn nc-inline-flex nc-align-items-center",
263
+ style: q({ color: e.palette.text, borderColor: y(D)(e.palette.text, 0.18) }),
264
+ onClick: u[0] || (u[0] = (c) => t("botaoAcao"))
265
+ }, [
266
+ E("span", null, I(e.textoBotao), 1)
267
+ ], 4)) : B("", !0)
268
+ ], !0),
269
+ e.exportar ? (v(), x("button", {
270
+ key: 0,
271
+ type: "button",
272
+ class: "nc-exportar nc-inline-flex nc-align-items-center nc-justify-content-center",
273
+ style: q({ color: e.palette.muted, borderColor: y(D)(e.palette.text, 0.18) }),
274
+ title: "Exportar como imagem",
275
+ "aria-label": "Exportar como imagem",
276
+ onClick: u[1] || (u[1] = (c) => t("exportar")),
277
+ innerHTML: y(n)
278
+ }, null, 12, wt)) : B("", !0)
279
+ ])) : B("", !0)
280
+ ]));
281
+ }
282
+ }, ee = /* @__PURE__ */ W(Tt, [["__scopeId", "data-v-35f0d105"]]), Et = { class: "nc-titulos nc-flex nc-flex-column" }, ue = {
283
+ __name: "CardTitulos",
284
+ props: {
285
+ titulo: { type: String, default: null },
286
+ descricao: { type: String, default: null },
287
+ palette: { type: Object, required: !0 }
288
+ },
289
+ setup(e) {
290
+ return (r, t) => (v(), x("div", Et, [
291
+ r.$slots.titulo || e.titulo ? (v(), x("div", {
292
+ key: 0,
293
+ class: "nc-m-0 nc-text-3xl nc-font-semibold",
294
+ style: q({ color: e.palette.text, lineHeight: "33px", letterSpacing: "-1px" })
295
+ }, [
296
+ S(r.$slots, "titulo", {}, () => [
297
+ j(I(e.titulo), 1)
298
+ ])
299
+ ], 4)) : B("", !0),
300
+ r.$slots.descricao || e.descricao ? (v(), x("div", {
301
+ key: 1,
302
+ class: "nc-text-sm nc-mt-1",
303
+ style: q({ color: e.palette.muted })
304
+ }, [
305
+ S(r.$slots, "descricao", {}, () => [
306
+ j(I(e.descricao), 1)
307
+ ])
308
+ ], 4)) : B("", !0)
309
+ ]));
146
310
  }
147
- return { formatador: m, formatar: e };
311
+ };
312
+ function te(e) {
313
+ const r = F(() => e.tipoValor === "moeda" ? new Intl.NumberFormat(e.locale, { style: "currency", currency: e.moeda }) : e.tipoValor === "percentual" ? new Intl.NumberFormat(e.locale, { style: "percent", maximumFractionDigits: 2 }) : new Intl.NumberFormat(e.locale, { maximumFractionDigits: 2 }));
314
+ function t(n) {
315
+ if (n == null) return "";
316
+ const a = Number(n);
317
+ return Number.isNaN(a) ? String(n) : e.tipoValor === "percentual" ? r.value.format(a / 100) : r.value.format(a);
318
+ }
319
+ return { formatador: r, formatar: t };
148
320
  }
149
- function gt(t, { caretFlexivel: m = !1 } = {}) {
150
- let e = t.querySelector(".nc-tt");
151
- if (e) return e;
152
- e = document.createElement("div"), e.className = "nc-tt", Object.assign(e.style, {
321
+ const ne = "1px solid rgba(15,23,42,.06)";
322
+ function pe(e, { caretFlexivel: r = !1 } = {}) {
323
+ let t = e.querySelector(".nc-tt");
324
+ if (t) return t;
325
+ t = document.createElement("div"), t.className = "nc-tt", Object.assign(t.style, {
153
326
  position: "absolute",
154
327
  pointerEvents: "none",
155
- transform: m ? "translateX(-50%)" : "translate(-50%, calc(-100% - 16px))",
328
+ transform: r ? "translateX(-50%)" : "translate(-50%, calc(-100% - 16px))",
156
329
  transition: "opacity .18s ease, left .12s ease, top .12s ease",
157
330
  opacity: "0",
158
331
  background: "#ffffff",
@@ -166,9 +339,9 @@ function gt(t, { caretFlexivel: m = !1 } = {}) {
166
339
  fontFamily: "inherit",
167
340
  textAlign: "left"
168
341
  });
169
- const p = document.createElement("div");
170
- p.className = "nc-tt__caret";
171
- const o = {
342
+ const n = document.createElement("div");
343
+ n.className = "nc-tt__caret";
344
+ const a = {
172
345
  position: "absolute",
173
346
  left: "50%",
174
347
  width: "10px",
@@ -177,120 +350,252 @@ function gt(t, { caretFlexivel: m = !1 } = {}) {
177
350
  transform: "translateX(-50%) rotate(45deg)",
178
351
  borderRadius: "2px"
179
352
  };
180
- m ? Object.assign(p.style, o) : Object.assign(p.style, o, {
353
+ r ? Object.assign(n.style, a) : Object.assign(n.style, a, {
181
354
  bottom: "-5px",
182
355
  borderRight: "1px solid rgba(15,23,42,.06)",
183
356
  borderBottom: "1px solid rgba(15,23,42,.06)"
184
- }), e.appendChild(p);
185
- const k = document.createElement("div");
186
- return k.className = "nc-tt__content", Object.assign(k.style, { position: "relative", background: "#fff", borderRadius: "8px" }), e.appendChild(k), t.appendChild(e), e;
357
+ }), t.appendChild(n);
358
+ const u = document.createElement("div");
359
+ return u.className = "nc-tt__content", Object.assign(u.style, { position: "relative", background: "#fff", borderRadius: "8px" }), t.appendChild(u), e.appendChild(t), t;
187
360
  }
188
- function lt(t) {
189
- const m = t.canvas.parentNode;
190
- return m ? (getComputedStyle(m).position === "static" && (m.style.position = "relative"), m) : null;
361
+ function fe(e) {
362
+ const r = e.canvas.parentNode;
363
+ return r ? (getComputedStyle(r).position === "static" && (r.style.position = "relative"), r) : null;
191
364
  }
192
- function rt(t, m, e, p = 4) {
193
- const o = m / 2;
194
- return t - o < p ? o + p : t + o > e - p ? e - o - p : t;
365
+ function ge(e, r, t, n = 4) {
366
+ const a = r / 2;
367
+ return e - a < n ? a + n : e + a > t - n ? t - a - n : e;
195
368
  }
196
- function qt(t, m) {
197
- const e = window.getComputedStyle(t);
198
- let p = "";
199
- for (let o = 0; o < e.length; o++) {
200
- const k = e[o];
201
- let $ = e.getPropertyValue(k);
202
- if ($ && $.indexOf("url(") !== -1 && !/url\(["']?data:/.test($))
203
- if (k === "background-image" || k === "background" || k === "mask-image" || k === "border-image" || k === "border-image-source")
204
- $ = "none";
205
- else
206
- continue;
207
- p += `${k}:${$};`;
208
- }
209
- m.setAttribute("style", p);
369
+ function me(e) {
370
+ return e ? `<div style="font-size:9px;font-weight:500;color:#94A3B8;letter-spacing:.04em;text-transform:uppercase;line-height:1;margin-bottom:4px;">${e}</div>` : "";
210
371
  }
211
- function re(t, m) {
212
- qt(t, m);
213
- const e = t.querySelectorAll("*"), p = m.querySelectorAll("*");
214
- for (let o = 0; o < e.length; o++)
215
- p[o] && qt(e[o], p[o]);
372
+ function Oe(e) {
373
+ return e ? `<div style="font-size:11px;font-weight:500;color:#64748B;line-height:1.3;margin-top:3px;">${e}</div>` : "";
216
374
  }
217
- function se(t, m) {
218
- const e = t.querySelectorAll("canvas"), p = m.querySelectorAll("canvas");
219
- e.forEach((o, k) => {
220
- if (!p[k]) return;
221
- const $ = document.createElement("img");
222
- try {
223
- $.src = o.toDataURL("image/png");
224
- } catch {
375
+ function he(e, r, { nome: t = "", alinharDireita: n = !1, margemTopo: a = !1 } = {}) {
376
+ const u = t ? `<span style="font-size:11px;color:#64748B;margin-right:6px;">${t}</span>` : "";
377
+ return `<div style="display:flex;align-items:center;gap:6px;${a ? "margin-top:2px;" : ""}"><span style="width:6px;height:6px;border-radius:999px;background:${e};box-shadow:0 0 0 2px ${D(e, 0.15)};flex:0 0 auto;"></span>` + u + `<span style="font-size:12px;font-weight:700;color:#0F172A;letter-spacing:-.01em;line-height:1.1;${n ? "margin-left:auto;" : ""}">${r}</span></div>`;
378
+ }
379
+ function je(e, r) {
380
+ e && (r ? Object.assign(e.style, {
381
+ top: "-5px",
382
+ bottom: "",
383
+ borderLeft: ne,
384
+ borderTop: ne,
385
+ borderRight: "",
386
+ borderBottom: ""
387
+ }) : Object.assign(e.style, {
388
+ top: "",
389
+ bottom: "-5px",
390
+ borderRight: ne,
391
+ borderBottom: ne,
392
+ borderLeft: "",
393
+ borderTop: ""
394
+ }));
395
+ }
396
+ function ye({ corDe: e, valorDe: r, linhasExtrasDe: t = null, deveOcultar: n = () => !1 }) {
397
+ return function(u) {
398
+ const { chart: c, tooltip: f } = u, C = fe(c);
399
+ if (!C) return;
400
+ const l = pe(C);
401
+ if (f.opacity === 0 || n()) {
402
+ l.style.opacity = "0";
225
403
  return;
226
404
  }
227
- const A = o.getBoundingClientRect();
228
- $.setAttribute("style", `width:${A.width}px;height:${A.height}px;display:block;`), p[k].replaceWith($);
229
- });
405
+ const d = f.dataPoints && f.dataPoints[0], p = l.querySelector(".nc-tt__content"), g = d && t ? t(d) : [], b = (Array.isArray(g) ? g : [g]).filter(Boolean);
406
+ p.innerHTML = me((f.title || []).join(" ")) + he(d ? e(d) : "#3B82F6", d ? r(d) : "") + b.map((T) => Oe(T)).join("");
407
+ const { offsetLeft: m, offsetTop: k } = c.canvas;
408
+ l.style.opacity = "1", l.style.visibility = "hidden", l.style.left = "0px", l.style.top = "0px";
409
+ const M = l.offsetWidth, o = l.offsetHeight, s = 4, $ = m + f.caretX, h = k + f.caretY, A = ge($, M, C.clientWidth, s), i = h < o + 16 + s;
410
+ l.style.transform = i ? "translate(-50%, 16px)" : "translate(-50%, calc(-100% - 16px))";
411
+ const R = l.querySelector(".nc-tt__caret");
412
+ if (je(R, i), R) {
413
+ const T = $ - A, w = M / 2, L = Math.max(-w + 8, Math.min(w - 8, T));
414
+ R.style.left = `calc(50% + ${L}px)`;
415
+ }
416
+ l.style.left = A + "px", l.style.top = h + "px", l.style.visibility = "visible";
417
+ };
230
418
  }
231
- async function ct(t, m = {}) {
232
- if (!t) return;
233
- const {
234
- nomeArquivo: e = "componente.png",
235
- escala: p = 2,
236
- corFundo: o = null
237
- } = m, k = t.getBoundingClientRect(), $ = Math.ceil(k.width), A = Math.ceil(k.height), D = t.cloneNode(!0);
238
- re(t, D), se(t, D), D.style.margin = "0", D.style.transform = "none";
239
- const R = new XMLSerializer().serializeToString(D), w = `<svg xmlns="http://www.w3.org/2000/svg" width="${$}" height="${A}"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="width:${$}px;height:${A}px;">` + R + "</div></foreignObject></svg>", J = "data:image/svg+xml;base64," + (typeof window < "u" && window.btoa ? window.btoa(unescape(encodeURIComponent(w))) : ""), O = new Image();
240
- await new Promise((tt, d) => {
241
- O.onload = tt, O.onerror = d, O.src = J;
242
- });
243
- const _ = document.createElement("canvas");
244
- _.width = $ * p, _.height = A * p;
245
- const Q = _.getContext("2d");
246
- Q.scale(p, p), o && (Q.fillStyle = o, Q.fillRect(0, 0, $, A)), Q.drawImage(O, 0, 0);
247
- let Z;
248
- try {
249
- Z = _.toDataURL("image/png");
250
- } catch (tt) {
251
- console.error("Falha ao exportar imagem: canvas contaminado.", tt);
252
- return;
253
- }
254
- const K = document.createElement("a");
255
- K.download = e, K.href = Z, document.body.appendChild(K), K.click(), document.body.removeChild(K);
419
+ function Ft(e, r, t, n, a, u, c) {
420
+ e.fillStyle = r.corRotulo, e.beginPath(), e.roundRect ? e.roundRect(t, n, a, u, c) : (e.moveTo(t + c, n), e.lineTo(t + a - c, n), e.quadraticCurveTo(t + a, n, t + a, n + c), e.lineTo(t + a, n + u - c), e.quadraticCurveTo(t + a, n + u, t + a - c, n + u), e.lineTo(t + c, n + u), e.quadraticCurveTo(t, n + u, t, n + u - c), e.lineTo(t, n + c), e.quadraticCurveTo(t, n, t + c, n)), e.fill(), e.fillStyle = r.corTexto, e.textBaseline = "middle", e.textAlign = "center", e.fillText(r.rotulo, t + a / 2, n + u / 2);
256
421
  }
257
- const dt = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>', ie = { class: "card-linhas__header flex flex-column" }, ce = { class: "card-linhas__topo flex align-items-start justify-content-between gap-3" }, de = {
258
- key: 0,
259
- class: "nc-legendas-flex flex flex-column"
260
- }, ue = {
261
- key: 1,
262
- class: "nc-actions inline-flex align-items-center gap-2"
263
- }, fe = ["innerHTML"], pe = {
264
- key: 0,
265
- class: "card-linhas__titulos mt-3 mb-2 flex flex-column"
266
- }, ge = { class: "card-linhas__chart flex-1" }, ye = {
267
- key: 0,
268
- class: "card-linhas__footer mt-3"
269
- }, me = {
270
- __name: "CardLinhas",
271
- props: {
422
+ function Lt(e) {
423
+ let r = e.querySelector(".nc-tt-linhaRef");
424
+ return r || (r = document.createElement("div"), r.className = "nc-tt-linhaRef", Object.assign(r.style, {
425
+ position: "absolute",
426
+ pointerEvents: "none",
427
+ transform: "translate(-50%, calc(-100% - 12px))",
428
+ transition: "opacity .18s ease, left .12s ease, top .12s ease",
429
+ opacity: "0",
430
+ background: "#ffffff",
431
+ borderRadius: "10px",
432
+ padding: "8px 11px",
433
+ boxShadow: "0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.12)",
434
+ border: "1px solid rgba(15,23,42,.06)",
435
+ whiteSpace: "nowrap",
436
+ zIndex: "11",
437
+ fontFamily: "'Inter', sans-serif",
438
+ textAlign: "left"
439
+ }), e.appendChild(r), r);
440
+ }
441
+ function Pe({ linhasReferencia: e, horizontal: r = () => !1, formatar: t }) {
442
+ const n = F(() => {
443
+ const f = e();
444
+ return f ? (Array.isArray(f) ? f : [f]).filter((l) => l && (typeof l == "number" || typeof l.valor == "number")).map((l) => typeof l == "number" ? { valor: l, rotulo: null, cor: "#0F172A", corRotulo: "#0F172A", corTexto: "#FFFFFF", tracejado: [6, 6], espessura: 1 } : {
445
+ valor: l.valor,
446
+ rotulo: l.rotulo ?? null,
447
+ cor: l.cor || "#0F172A",
448
+ corRotulo: l.corRotulo || l.cor || "#0F172A",
449
+ corTexto: l.corTexto || "#FFFFFF",
450
+ tracejado: l.tracejado || [6, 6],
451
+ espessura: l.espessura ?? 1
452
+ }) : [];
453
+ }), a = [];
454
+ let u = null;
455
+ return {
456
+ linhasNormalizadas: n,
457
+ pluginLinhaReferencia: {
458
+ id: "linhaReferencia",
459
+ afterDatasetsDraw(f) {
460
+ const C = n.value;
461
+ if (a.length = 0, !C.length) return;
462
+ const { ctx: l, chartArea: d, scales: p } = f, g = r(), b = g ? p.x : p.y;
463
+ b && C.forEach((m) => {
464
+ const k = b.getPixelForValue(m.valor);
465
+ if (a.push({ linha: m, pos: k, horizontal: g, chartArea: d }), l.save(), l.beginPath(), l.setLineDash(m.tracejado), l.lineWidth = m.espessura, l.strokeStyle = m.cor, g) {
466
+ if (k < d.left || k > d.right) {
467
+ l.restore();
468
+ return;
469
+ }
470
+ l.moveTo(k, d.top), l.lineTo(k, d.bottom);
471
+ } else {
472
+ if (k < d.top || k > d.bottom) {
473
+ l.restore();
474
+ return;
475
+ }
476
+ l.moveTo(d.left, k), l.lineTo(d.right, k);
477
+ }
478
+ if (l.stroke(), l.setLineDash([]), m.rotulo) {
479
+ l.font = "600 11px 'Inter', sans-serif";
480
+ const M = 8, o = 5, $ = l.measureText(m.rotulo).width, h = 12, A = $ + M * 2, i = h + o * 2, R = i / 2;
481
+ let T, w;
482
+ g ? (T = k - A / 2, w = d.top - i - 6, w < 0 && (w = d.top + 6)) : (T = d.left - A - 6, w = k - i / 2, T < 0 && (T = d.left + 6)), Ft(l, m, T, w, A, i, R);
483
+ }
484
+ l.restore();
485
+ });
486
+ },
487
+ beforeEvent(f, C) {
488
+ if (!a.length) {
489
+ u = null;
490
+ return;
491
+ }
492
+ const l = C.event;
493
+ if (!l || l.type === "mouseout" || l.x == null || l.y == null) {
494
+ u = null;
495
+ return;
496
+ }
497
+ const d = 8;
498
+ let p = null, g = 1 / 0;
499
+ for (const b of a) {
500
+ const m = b.horizontal ? Math.abs(l.x - b.pos) : Math.abs(l.y - b.pos), k = b.horizontal ? l.y >= b.chartArea.top && l.y <= b.chartArea.bottom : l.x >= b.chartArea.left && l.x <= b.chartArea.right;
501
+ m <= d && k && m < g && (g = m, p = b);
502
+ }
503
+ u = p;
504
+ },
505
+ afterEvent(f, C) {
506
+ if (!a.length) return;
507
+ const l = C.event;
508
+ if (!l) return;
509
+ const d = fe(f);
510
+ if (!d) return;
511
+ if (!u) {
512
+ const R = d.querySelector(".nc-tt-linhaRef");
513
+ R && (R.style.opacity = "0");
514
+ return;
515
+ }
516
+ const p = u, g = Lt(d), b = p.linha.cor || "#0F172A";
517
+ g.innerHTML = me(p.linha.rotulo) + he(b, t(p.linha.valor));
518
+ const m = f.canvas;
519
+ g.style.opacity = "1", g.style.visibility = "hidden", g.style.left = "0px", g.style.top = "0px";
520
+ const k = g.offsetWidth, M = g.offsetHeight, o = 4;
521
+ let s, $;
522
+ p.horizontal ? (s = m.offsetLeft + p.pos, $ = m.offsetTop + l.y) : (s = m.offsetLeft + l.x, $ = m.offsetTop + p.pos);
523
+ const h = ge(s, k, d.clientWidth, o);
524
+ let A = $;
525
+ const i = M + 16 + o;
526
+ A < i && (A = i), g.style.left = h + "px", g.style.top = A + "px", g.style.visibility = "visible";
527
+ }
528
+ },
529
+ temLinhaHover: () => !!u
530
+ };
531
+ }
532
+ const It = "0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06)";
533
+ function ve(e, r) {
534
+ if (!r) return e;
535
+ const t = { ...e };
536
+ for (const [n, a] of Object.entries(r))
537
+ t[n] && (t[n] = { ...t[n], default: a });
538
+ return t;
539
+ }
540
+ function Z(e) {
541
+ return ve({
272
542
  legenda: { type: String, default: null },
273
543
  sublegenda: { type: String, default: null },
274
544
  titulo: { type: String, default: null },
275
545
  descricao: { type: String, default: null },
276
546
  tema: { type: String, default: "light" },
277
547
  corFundo: { type: String, default: null },
278
- corDetalhes: { type: String, default: "#3B82F6" },
279
548
  corTexto: { type: String, default: null },
549
+ corBorda: { type: String, default: "#EAE8E8" },
550
+ borderRadius: { type: [String, Number], default: "0.75rem" },
551
+ sombra: { type: String, default: It },
280
552
  textoBotao: { type: String, default: "Ver mais" },
281
- direcao: {
282
- type: String,
283
- default: "top",
284
- validator: (t) => ["top", "bottom", "left", "right"].includes(t)
285
- },
286
553
  botaoVisivel: { type: Boolean, default: !1 },
554
+ exportar: { type: Boolean, default: !1 },
555
+ nomeArquivoExport: { type: String, default: "card.png" }
556
+ }, e);
557
+ }
558
+ function ae(e) {
559
+ return ve({
287
560
  tipoValor: {
288
561
  type: String,
289
562
  default: "numero",
290
- validator: (t) => ["numero", "moeda", "percentual"].includes(t)
563
+ validator: (r) => ["numero", "moeda", "percentual"].includes(r)
291
564
  },
292
565
  locale: { type: String, default: "pt-BR" },
293
- moeda: { type: String, default: "BRL" },
566
+ moeda: { type: String, default: "BRL" }
567
+ }, e);
568
+ }
569
+ function oe(e = "top") {
570
+ return {
571
+ direcao: {
572
+ type: String,
573
+ default: e,
574
+ validator: (r) => ["top", "bottom", "left", "right"].includes(r)
575
+ }
576
+ };
577
+ }
578
+ function Ve(e) {
579
+ return ve({
580
+ rotuloCategoria: { type: String, default: "Categoria" },
581
+ rotuloQuantidade: { type: String, default: "Quantidade" },
582
+ mostrarCabecalho: { type: Boolean, default: !0 },
583
+ itensClicaveis: { type: Boolean, default: !1 },
584
+ // Tooltip nativo (atributo `title`) exibido ao passar o mouse sobre a linha
585
+ // da tabela. `(item, index) => string`. Quando omitido, usa `item.descricao`.
586
+ tooltipLinha: { type: Function, default: null }
587
+ }, e);
588
+ }
589
+ const zt = { class: "card-linhas__header nc-flex nc-flex-column" }, Mt = { class: "card-linhas__chart nc-flex-1" }, Dt = {
590
+ key: 0,
591
+ class: "card-linhas__footer nc-mt-3"
592
+ }, Nt = {
593
+ __name: "CardLinhas",
594
+ props: {
595
+ ...Z({ nomeArquivoExport: "card-linhas.png" }),
596
+ ...ae(),
597
+ ...oe("top"),
598
+ corDetalhes: { type: String, default: "#3B82F6" },
294
599
  data: {
295
600
  type: Array,
296
601
  default: () => [
@@ -309,187 +614,77 @@ const dt = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
309
614
  ]
310
615
  },
311
616
  height: { type: [String, Number], default: 280 },
312
- borderRadius: { type: [String, Number], default: "0.75rem" },
313
- sombra: { type: String, default: "0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06)" },
314
- corBorda: { type: String, default: "#EAE8E8" },
315
617
  linhasReferencia: { type: [Object, Array], default: null },
316
- exportar: { type: Boolean, default: !1 },
317
- nomeArquivoExport: { type: String, default: "card-linhas.png" }
618
+ // Recebe o item original de `data` e retorna texto(s) extra(s) exibidos no
619
+ // tooltip abaixo do valor. Pode devolver uma string ou um array de strings.
620
+ detalheTooltip: { type: Function, default: null }
318
621
  },
319
622
  emits: ["botaoAcao", "exportado"],
320
- setup(t, { emit: m }) {
321
- const e = t, p = m, { palette: o, cardStyle: k } = it(e), { formatar: $ } = pt(e), A = et(null), D = dt;
322
- async function R() {
323
- await ct(A.value, {
324
- nomeArquivo: e.nomeArquivoExport,
325
- corFundo: o.value.bg !== "transparent" ? o.value.bg : null
326
- }), p("exportado");
327
- }
328
- const w = M(() => `card-linhas--${e.direcao}`), T = M(() => e.linhasReferencia ? (Array.isArray(e.linhasReferencia) ? e.linhasReferencia : [e.linhasReferencia]).filter((n) => n && (typeof n == "number" || typeof n.valor == "number")).map((n) => typeof n == "number" ? { valor: n, rotulo: null, cor: "#0F172A", corRotulo: "#0F172A", corTexto: "#FFFFFF", tracejado: [6, 6], espessura: 1 } : {
329
- valor: n.valor,
330
- rotulo: n.rotulo ?? null,
331
- cor: n.cor || "#0F172A",
332
- corRotulo: n.corRotulo || n.cor || "#0F172A",
333
- corTexto: n.corTexto || "#FFFFFF",
334
- tracejado: n.tracejado || [6, 6],
335
- espessura: n.espessura ?? 1
336
- }) : []), J = [];
337
- let O = null;
338
- const Q = [{
339
- id: "linhaReferencia",
340
- afterDatasetsDraw(l) {
341
- const n = T.value;
342
- if (J.length = 0, !n.length) return;
343
- const { ctx: a, chartArea: r, scales: v } = l, i = v.y;
344
- i && n.forEach((g) => {
345
- const c = i.getPixelForValue(g.valor);
346
- if (J.push({ linha: g, pos: c, chartArea: r }), a.save(), a.beginPath(), a.setLineDash(g.tracejado), a.lineWidth = g.espessura, a.strokeStyle = g.cor, c < r.top || c > r.bottom) {
347
- a.restore();
348
- return;
349
- }
350
- if (a.moveTo(r.left, c), a.lineTo(r.right, c), a.stroke(), a.setLineDash([]), g.rotulo) {
351
- a.font = "600 11px 'Inter', sans-serif";
352
- const b = 8, h = 5, q = a.measureText(g.rotulo).width, E = 12, C = q + b * 2, I = E + h * 2, N = I / 2;
353
- let z = r.left - C - 6, H = c - I / 2;
354
- z < 0 && (z = r.left + 6), a.fillStyle = g.corRotulo, a.beginPath(), a.roundRect ? a.roundRect(z, H, C, I, N) : (a.moveTo(z + N, H), a.lineTo(z + C - N, H), a.quadraticCurveTo(z + C, H, z + C, H + N), a.lineTo(z + C, H + I - N), a.quadraticCurveTo(z + C, H + I, z + C - N, H + I), a.lineTo(z + N, H + I), a.quadraticCurveTo(z, H + I, z, H + I - N), a.lineTo(z, H + N), a.quadraticCurveTo(z, H, z + N, H)), a.fill(), a.fillStyle = g.corTexto, a.textBaseline = "middle", a.textAlign = "center", a.fillText(g.rotulo, z + C / 2, H + I / 2);
355
- }
356
- a.restore();
357
- });
358
- },
359
- beforeEvent(l, n) {
360
- if (!J.length) {
361
- O = null;
362
- return;
363
- }
364
- const a = n.event;
365
- if (!a || a.type === "mouseout" || a.x == null || a.y == null) {
366
- O = null;
367
- return;
368
- }
369
- const r = 8;
370
- let v = null, i = 1 / 0;
371
- for (const g of J) {
372
- const c = Math.abs(a.y - g.pos), b = a.x >= g.chartArea.left && a.x <= g.chartArea.right;
373
- c <= r && b && c < i && (i = c, v = g);
374
- }
375
- O = v;
376
- },
377
- afterEvent(l, n) {
378
- if (!J.length) return;
379
- const a = n.event;
380
- if (!a) return;
381
- const r = lt(l);
382
- if (!r) return;
383
- let v = r.querySelector(".nc-tt-linhaRef");
384
- if (!O) {
385
- v && (v.style.opacity = "0");
386
- return;
387
- }
388
- const i = O;
389
- v || (v = document.createElement("div"), v.className = "nc-tt-linhaRef", Object.assign(v.style, {
390
- position: "absolute",
391
- pointerEvents: "none",
392
- transform: "translate(-50%, calc(-100% - 12px))",
393
- transition: "opacity .18s ease, left .12s ease, top .12s ease",
394
- opacity: "0",
395
- background: "#ffffff",
396
- borderRadius: "10px",
397
- padding: "8px 11px",
398
- boxShadow: "0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.12)",
399
- border: "1px solid rgba(15,23,42,.06)",
400
- whiteSpace: "nowrap",
401
- zIndex: "11",
402
- fontFamily: "'Inter', sans-serif",
403
- textAlign: "left"
404
- }), r.appendChild(v));
405
- const g = i.linha.cor || "#0F172A", c = $(i.linha.valor), b = i.linha.rotulo;
406
- v.innerHTML = (b ? `<div style="font-size:9px;font-weight:500;color:#94A3B8;letter-spacing:.04em;text-transform:uppercase;line-height:1;margin-bottom:4px;">${b}</div>` : "") + `<div style="display:flex;align-items:center;gap:6px;"><span style="width:6px;height:6px;border-radius:999px;background:${g};box-shadow:0 0 0 2px ${j(g, 0.15)};flex:0 0 auto;"></span><span style="font-size:12px;font-weight:700;color:#0F172A;letter-spacing:-.01em;line-height:1.1;">${c}</span></div>`;
407
- const h = l.canvas;
408
- v.style.opacity = "1", v.style.visibility = "hidden", v.style.left = "0px", v.style.top = "0px";
409
- const V = v.offsetWidth, q = v.offsetHeight, E = 4, C = h.offsetLeft + a.x, I = h.offsetTop + i.pos, N = rt(C, V, r.clientWidth, E);
410
- let z = I;
411
- const H = q + 16 + E;
412
- z < H && (z = H), v.style.left = N + "px", v.style.top = z + "px", v.style.visibility = "visible";
413
- }
414
- }], Z = M(() => ({
415
- labels: e.data.map((l) => l.rotulo),
623
+ setup(e, { emit: r }) {
624
+ const t = e, n = r, { palette: a, cardStyle: u } = G(t), { formatar: c } = te(t), { cardRef: f, onExportar: C, iconeExportar: l } = K(t, a, n), d = F(() => `card-linhas--${t.direcao}`), { linhasNormalizadas: p, pluginLinhaReferencia: g, temLinhaHover: b } = Pe({
625
+ linhasReferencia: () => t.linhasReferencia,
626
+ formatar: c
627
+ }), m = [g], k = F(() => ({
628
+ labels: t.data.map((s) => s.rotulo),
416
629
  datasets: [
417
630
  {
418
- data: e.data.map((l) => l.quantidade),
419
- borderColor: e.corDetalhes,
631
+ data: t.data.map((s) => s.quantidade),
632
+ borderColor: t.corDetalhes,
420
633
  borderWidth: 3,
421
634
  borderJoinStyle: "round",
422
635
  borderCapStyle: "round",
423
- backgroundColor: (l) => {
424
- const { chart: n } = l, { ctx: a, chartArea: r } = n;
425
- if (!r) return "transparent";
426
- const v = e.corDetalhes || "#0400FF", i = "#7C7C7C", g = a.createLinearGradient(0, r.top, 0, r.bottom);
427
- return g.addColorStop(0.16, j(v, 0.2)), g.addColorStop(1, j(i, 0)), g;
636
+ backgroundColor: (s) => {
637
+ const { chart: $ } = s, { ctx: h, chartArea: A } = $;
638
+ if (!A) return "transparent";
639
+ const i = t.corDetalhes || "#0400FF", R = "#7C7C7C", T = h.createLinearGradient(0, A.top, 0, A.bottom);
640
+ return T.addColorStop(0.16, D(i, 0.2)), T.addColorStop(1, D(R, 0)), T;
428
641
  },
429
642
  fill: !0,
430
643
  tension: 0.45,
431
644
  pointRadius: 0,
432
645
  pointHoverRadius: 6,
433
646
  pointHoverBorderWidth: 3,
434
- pointHoverBackgroundColor: e.corDetalhes,
435
- pointHoverBorderColor: o.value.bg === "transparent" ? "#fff" : o.value.bg,
647
+ pointHoverBackgroundColor: t.corDetalhes,
648
+ pointHoverBorderColor: a.value.bg === "transparent" ? "#fff" : a.value.bg,
436
649
  clip: !1
437
650
  }
438
651
  ]
439
- }));
440
- function K(l) {
441
- const { chart: n, tooltip: a } = l, r = lt(n);
442
- if (!r) return;
443
- const v = gt(r);
444
- if (a.opacity === 0 || O) {
445
- v.style.opacity = "0";
446
- return;
447
- }
448
- const i = a.title || [], g = (a.body || []).flatMap((G) => G.lines), c = v.querySelector(".nc-tt__content"), b = e.corDetalhes || "#3B82F6";
449
- c.innerHTML = `<div style="font-size:9px;font-weight:500;color:#94A3B8;letter-spacing:.04em;text-transform:uppercase;line-height:1;margin-bottom:4px;">${i.join(" ")}</div><div style="display:flex;align-items:center;gap:6px;"><span style="width:6px;height:6px;border-radius:999px;background:${b};box-shadow:0 0 0 2px ${j(b, 0.15)};flex:0 0 auto;"></span><span style="font-size:12px;font-weight:700;color:#0F172A;letter-spacing:-.01em;line-height:1.1;">${g.join(" ")}</span></div>`;
450
- const { offsetLeft: h, offsetTop: V } = n.canvas;
451
- v.style.opacity = "1", v.style.visibility = "hidden", v.style.left = "0px", v.style.top = "0px";
452
- const q = v.offsetWidth, E = v.offsetHeight, C = 4, I = h + a.caretX, N = V + a.caretY, z = rt(I, q, r.clientWidth, C), H = E + 16 + C, F = N < H;
453
- let U;
454
- F ? (v.style.transform = "translateX(-50%) translateY(16px)", U = N) : (v.style.transform = "translate(-50%, calc(-100% - 16px))", U = N), v.style.left = z + "px", v.style.top = U + "px";
455
- const P = v.querySelector(".nc-tt__caret");
456
- if (P) {
457
- const G = I - z, W = q / 2, Y = Math.max(-W + 8, Math.min(W - 8, G));
458
- P.style.left = `calc(50% + ${Y}px)`, F ? (P.style.bottom = "", P.style.top = "-5px", P.style.borderRight = "", P.style.borderBottom = "", P.style.borderLeft = "1px solid rgba(15,23,42,.06)", P.style.borderTop = "1px solid rgba(15,23,42,.06)") : (P.style.top = "", P.style.bottom = "-5px", P.style.borderLeft = "", P.style.borderTop = "", P.style.borderRight = "1px solid rgba(15,23,42,.06)", P.style.borderBottom = "1px solid rgba(15,23,42,.06)");
459
- }
460
- v.style.visibility = "visible";
461
- }
462
- const tt = M(() => ({
652
+ })), M = ye({
653
+ corDe: () => t.corDetalhes || "#3B82F6",
654
+ valorDe: (s) => c(s.parsed.y),
655
+ linhasExtrasDe: t.detalheTooltip ? (s) => t.detalheTooltip(t.data[s.dataIndex], s.dataIndex) : null,
656
+ deveOcultar: b
657
+ }), o = F(() => ({
463
658
  responsive: !0,
464
659
  maintainAspectRatio: !1,
465
660
  interaction: { intersect: !1, mode: "index" },
466
661
  layout: {
467
- padding: { top: T.value.length ? 24 : 0, right: 0, bottom: 0, left: 0 }
662
+ padding: { top: p.value.length ? 24 : 0, right: 0, bottom: 0, left: 0 }
468
663
  },
469
664
  plugins: {
470
665
  legend: { display: !1 },
471
666
  tooltip: {
472
667
  enabled: !1,
473
- external: K,
668
+ external: M,
474
669
  callbacks: {
475
- title: (l) => {
476
- var n;
477
- return ((n = l[0]) == null ? void 0 : n.label) ?? "";
670
+ title: (s) => {
671
+ var $;
672
+ return (($ = s[0]) == null ? void 0 : $.label) ?? "";
478
673
  },
479
- label: (l) => $(l.parsed.y)
674
+ label: (s) => c(s.parsed.y)
480
675
  }
481
676
  }
482
677
  },
483
678
  scales: {
484
679
  x: {
485
680
  display: !0,
486
- afterFit: (l) => {
487
- l.paddingLeft = 0, l.paddingRight = 0;
681
+ afterFit: (s) => {
682
+ s.paddingLeft = 0, s.paddingRight = 0;
488
683
  },
489
684
  grid: { display: !1, drawBorder: !1 },
490
685
  border: { display: !1 },
491
686
  ticks: {
492
- color: o.value.muted,
687
+ color: a.value.muted,
493
688
  font: { size: 10, family: "'Inter', sans-serif" },
494
689
  padding: 8,
495
690
  align: "inner"
@@ -499,142 +694,196 @@ const dt = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
499
694
  display: !1,
500
695
  grid: { display: !1 },
501
696
  beginAtZero: !0,
502
- suggestedMax: T.value.length ? Math.max(...T.value.map((l) => l.valor)) : void 0
697
+ suggestedMax: p.value.length ? Math.max(...p.value.map((s) => s.valor)) : void 0
503
698
  }
504
699
  }
505
700
  }));
506
- function d() {
507
- p("botaoAcao");
508
- }
509
- return (l, n) => (u(), f("div", {
701
+ return (s, $) => (v(), x("div", {
510
702
  ref_key: "cardRef",
511
- ref: A,
512
- class: ot(["card-linhas p-4 flex", w.value]),
513
- style: x(s(k))
703
+ ref: f,
704
+ class: J(["card-linhas nc-p-4 nc-flex", d.value]),
705
+ style: q(y(u))
514
706
  }, [
515
- S("div", ie, [
516
- S("div", ce, [
517
- l.$slots.legenda || t.legenda || l.$slots.sublegenda || t.sublegenda ? (u(), f("div", de, [
518
- l.$slots.legenda || t.legenda ? (u(), f("div", {
519
- key: 0,
520
- class: "text-xs font-medium",
521
- style: x({ color: s(o).text, opacity: 0.85 })
522
- }, [
523
- L(l.$slots, "legenda", {}, () => [
524
- X(B(t.legenda), 1)
525
- ], !0)
526
- ], 4)) : y("", !0),
527
- l.$slots.sublegenda || t.sublegenda ? (u(), f("div", {
528
- key: 1,
529
- class: "text-xs",
530
- style: x({ color: s(o).muted })
531
- }, [
532
- L(l.$slots, "sublegenda", {}, () => [
533
- X(B(t.sublegenda), 1)
534
- ], !0)
535
- ], 4)) : y("", !0)
536
- ])) : y("", !0),
537
- l.$slots.actions || t.botaoVisivel || t.exportar ? (u(), f("div", ue, [
538
- L(l.$slots, "actions", {}, () => [
539
- t.botaoVisivel ? (u(), f("button", {
540
- key: 0,
541
- class: "nc-btn inline-flex align-items-center",
542
- style: x({ color: s(o).text, borderColor: s(j)(s(o).text, 0.18) }),
543
- onClick: d
544
- }, [
545
- S("span", null, B(t.textoBotao), 1)
546
- ], 4)) : y("", !0)
547
- ], !0),
548
- t.exportar ? (u(), f("button", {
549
- key: 0,
550
- type: "button",
551
- class: "nc-exportar inline-flex align-items-center justify-content-center",
552
- style: x({ color: s(o).muted, borderColor: s(j)(s(o).text, 0.18) }),
553
- title: "Exportar como imagem",
554
- "aria-label": "Exportar como imagem",
555
- onClick: R,
556
- innerHTML: s(D)
557
- }, null, 12, fe)) : y("", !0)
558
- ])) : y("", !0)
559
- ]),
560
- l.$slots.titulo || t.titulo || l.$slots.descricao || t.descricao ? (u(), f("div", pe, [
561
- l.$slots.titulo || t.titulo ? (u(), f("div", {
562
- key: 0,
563
- class: "m-0 text-3xl font-semibold",
564
- style: x({ color: s(o).text, lineHeight: "33px", letterSpacing: "-1px" })
565
- }, [
566
- L(l.$slots, "titulo", {}, () => [
567
- X(B(t.titulo), 1)
568
- ], !0)
569
- ], 4)) : y("", !0),
570
- l.$slots.descricao || t.descricao ? (u(), f("div", {
571
- key: 1,
572
- class: "text-sm mt-1",
573
- style: x({ color: s(o).muted })
574
- }, [
575
- L(l.$slots, "descricao", {}, () => [
576
- X(B(t.descricao), 1)
577
- ], !0)
578
- ], 4)) : y("", !0)
579
- ])) : y("", !0)
707
+ E("div", zt, [
708
+ P(ee, {
709
+ class: "card-linhas__topo",
710
+ legenda: s.legenda,
711
+ sublegenda: s.sublegenda,
712
+ palette: y(a),
713
+ "texto-botao": s.textoBotao,
714
+ "botao-visivel": s.botaoVisivel,
715
+ exportar: s.exportar,
716
+ "opacidade-legenda": "0.85",
717
+ onBotaoAcao: $[0] || ($[0] = (h) => n("botaoAcao")),
718
+ onExportar: y(C)
719
+ }, Y({ _: 2 }, [
720
+ s.$slots.legenda ? {
721
+ name: "legenda",
722
+ fn: z(() => [
723
+ S(s.$slots, "legenda", {}, void 0, !0)
724
+ ]),
725
+ key: "0"
726
+ } : void 0,
727
+ s.$slots.sublegenda ? {
728
+ name: "sublegenda",
729
+ fn: z(() => [
730
+ S(s.$slots, "sublegenda", {}, void 0, !0)
731
+ ]),
732
+ key: "1"
733
+ } : void 0,
734
+ s.$slots.actions ? {
735
+ name: "actions",
736
+ fn: z(() => [
737
+ S(s.$slots, "actions", {}, void 0, !0)
738
+ ]),
739
+ key: "2"
740
+ } : void 0
741
+ ]), 1032, ["legenda", "sublegenda", "palette", "texto-botao", "botao-visivel", "exportar", "onExportar"]),
742
+ s.$slots.titulo || s.titulo || s.$slots.descricao || s.descricao ? (v(), re(ue, {
743
+ key: 0,
744
+ class: "card-linhas__titulos nc-mt-3 nc-mb-2",
745
+ titulo: s.titulo,
746
+ descricao: s.descricao,
747
+ palette: y(a)
748
+ }, Y({ _: 2 }, [
749
+ s.$slots.titulo ? {
750
+ name: "titulo",
751
+ fn: z(() => [
752
+ S(s.$slots, "titulo", {}, void 0, !0)
753
+ ]),
754
+ key: "0"
755
+ } : void 0,
756
+ s.$slots.descricao ? {
757
+ name: "descricao",
758
+ fn: z(() => [
759
+ S(s.$slots, "descricao", {}, void 0, !0)
760
+ ]),
761
+ key: "1"
762
+ } : void 0
763
+ ]), 1032, ["titulo", "descricao", "palette"])) : B("", !0)
580
764
  ]),
581
- S("div", ge, [
582
- ft(st, {
765
+ E("div", Mt, [
766
+ P(Q, {
583
767
  type: "line",
584
- data: Z.value,
585
- options: tt.value,
586
- plugins: Q,
587
- height: t.height
768
+ data: k.value,
769
+ options: o.value,
770
+ plugins: m,
771
+ height: e.height
588
772
  }, null, 8, ["data", "options", "height"])
589
773
  ]),
590
- l.$slots.footer ? (u(), f("div", ye, [
591
- L(l.$slots, "footer", {}, void 0, !0)
592
- ])) : y("", !0)
774
+ s.$slots.footer ? (v(), x("div", Dt, [
775
+ S(s.$slots, "footer", {}, void 0, !0)
776
+ ])) : B("", !0)
593
777
  ], 6));
594
778
  }
595
- }, be = /* @__PURE__ */ nt(me, [["__scopeId", "data-v-513bd6fe"]]), he = { class: "card-pizza__topo flex align-items-start justify-content-between gap-3" }, xe = {
596
- key: 0,
597
- class: "nc-legendas-flex flex flex-column"
598
- }, ve = {
599
- key: 1,
600
- class: "nc-actions inline-flex align-items-center gap-2"
601
- }, $e = ["innerHTML"], Se = { class: "card-pizza__corpo flex align-items-center" }, Ce = { class: "nc-tabela flex flex-column" }, ke = { class: "nc-tabela-valor" }, Be = ["role", "tabindex", "onMouseenter", "onFocus", "onClick", "onKeydown"], Ae = { class: "nc-tabela-rotulo inline-flex align-items-center gap-2" }, we = { class: "nc-tabela-valor" }, Re = { class: "card-pizza__chart-wrap flex align-items-center justify-content-center" }, Te = { class: "card-pizza__chart" }, qe = {
779
+ }, Ot = /* @__PURE__ */ W(Nt, [["__scopeId", "data-v-7715a094"]]), jt = { class: "nc-tabela-valor" }, Pt = ["role", "tabindex", "onMouseenter", "onFocus", "onClick", "onKeydown"], Vt = { class: "nc-tabela-rotulo nc-inline-flex nc-align-items-center nc-gap-2" }, Ht = { class: "nc-tabela-valor" }, Wt = {
780
+ __name: "TabelaDados",
781
+ props: {
782
+ data: { type: Array, required: !0 },
783
+ coresAplicadas: { type: Array, required: !0 },
784
+ palette: { type: Object, required: !0 },
785
+ formatar: { type: Function, required: !0 },
786
+ rotuloCategoria: { type: String, default: "Categoria" },
787
+ rotuloQuantidade: { type: String, default: "Quantidade" },
788
+ mostrarCabecalho: { type: Boolean, default: !0 },
789
+ itensClicaveis: { type: Boolean, default: !1 },
790
+ hoverIndex: { type: Number, default: null },
791
+ /** padding-inline aplicado à linha em hover/ativa (difere entre cards). */
792
+ padAtiva: { type: String, default: "0.40rem" },
793
+ /** `(item, index) => string` — tooltip da linha. Padrão: item.descricao. */
794
+ tooltipLinha: { type: Function, default: null }
795
+ },
796
+ emits: ["update:hoverIndex", "itemClicado"],
797
+ setup(e, { emit: r }) {
798
+ const t = e, n = r;
799
+ function a(p, g) {
800
+ t.itensClicaveis && n("itemClicado", { item: p, index: g, cor: t.coresAplicadas[g] });
801
+ }
802
+ function u(p, g) {
803
+ return (t.tooltipLinha ? t.tooltipLinha(p, g) : p == null ? void 0 : p.descricao) || "";
804
+ }
805
+ const c = _({ visivel: !1, texto: "", x: 0, y: 0 });
806
+ function f(p) {
807
+ const b = Math.min(Math.max(p.clientX, 150), window.innerWidth - 150), m = Math.max(p.clientY - 12, 80);
808
+ c.value.x = b, c.value.y = m;
809
+ }
810
+ function C(p, g, b) {
811
+ n("update:hoverIndex", b);
812
+ const m = u(g, b);
813
+ m && (c.value.texto = m, c.value.visivel = !0, f(p));
814
+ }
815
+ function l(p) {
816
+ c.value.visivel && f(p);
817
+ }
818
+ function d() {
819
+ n("update:hoverIndex", null), c.value.visivel = !1;
820
+ }
821
+ return (p, g) => (v(), x("div", {
822
+ class: "nc-tabela nc-flex nc-flex-column",
823
+ style: q({ "--nc-tabela-pad-ativa": e.padAtiva })
824
+ }, [
825
+ e.mostrarCabecalho ? (v(), x("div", {
826
+ key: 0,
827
+ class: "nc-tabela-cab nc-flex nc-align-items-center nc-justify-content-between",
828
+ style: q({ color: e.palette.muted, borderColor: y(D)(e.palette.muted, 0.25) })
829
+ }, [
830
+ E("span", null, I(e.rotuloCategoria), 1),
831
+ E("span", jt, I(e.rotuloQuantidade), 1)
832
+ ], 4)) : B("", !0),
833
+ (v(!0), x(Me, null, De(e.data, (b, m) => (v(), x("div", {
834
+ key: m,
835
+ class: J(["nc-tabela-linha nc-flex nc-align-items-center nc-justify-content-between", { "nc-tabela-linha--clicavel": e.itensClicaveis, "nc-tabela-linha--ativa": e.hoverIndex === m }]),
836
+ style: q({
837
+ color: e.palette.text,
838
+ cursor: e.itensClicaveis ? "pointer" : "default",
839
+ "--nc-linha-bg": y(D)(e.coresAplicadas[m], 0.05),
840
+ "--nc-linha-bg-forte": y(D)(e.coresAplicadas[m], 0.08)
841
+ }),
842
+ role: e.itensClicaveis ? "button" : null,
843
+ tabindex: e.itensClicaveis ? 0 : null,
844
+ onMouseenter: (k) => C(k, b, m),
845
+ onMousemove: l,
846
+ onMouseleave: d,
847
+ onFocus: (k) => n("update:hoverIndex", m),
848
+ onBlur: g[0] || (g[0] = (k) => n("update:hoverIndex", null)),
849
+ onClick: (k) => a(b, m),
850
+ onKeydown: [
851
+ Fe(Le((k) => a(b, m), ["prevent"]), ["enter"]),
852
+ Fe(Le((k) => a(b, m), ["prevent"]), ["space"])
853
+ ]
854
+ }, [
855
+ E("span", Vt, [
856
+ E("span", {
857
+ class: "nc-bolinha",
858
+ style: q({ background: e.coresAplicadas[m] })
859
+ }, null, 4),
860
+ E("span", null, I(b.rotulo), 1)
861
+ ]),
862
+ E("span", Ht, I(e.formatar(b.quantidade)), 1)
863
+ ], 46, Pt))), 128)),
864
+ (v(), re(at, { to: "body" }, [
865
+ c.value.visivel ? (v(), x("div", {
866
+ key: 0,
867
+ class: "nc-tabela-tt",
868
+ style: q({ left: c.value.x + "px", top: c.value.y + "px" })
869
+ }, I(c.value.texto), 5)) : B("", !0)
870
+ ]))
871
+ ], 4));
872
+ }
873
+ }, He = /* @__PURE__ */ W(Wt, [["__scopeId", "data-v-8e7c823a"]]), Xt = { class: "card-pizza__corpo nc-flex nc-align-items-center" }, Ut = { class: "card-pizza__chart-wrap nc-flex nc-align-items-center nc-justify-content-center" }, Yt = { class: "card-pizza__chart" }, Jt = {
602
874
  key: 0,
603
- class: "nc-centro flex flex-column align-items-center justify-content-center"
604
- }, Fe = {
875
+ class: "nc-centro nc-flex nc-flex-column nc-align-items-center nc-justify-content-center"
876
+ }, Qt = {
605
877
  key: 0,
606
- class: "card-pizza__footer mt-3"
607
- }, Ee = {
878
+ class: "card-pizza__footer nc-mt-3"
879
+ }, Gt = {
608
880
  __name: "CardPizza",
609
881
  props: {
610
- legenda: { type: String, default: null },
611
- sublegenda: { type: String, default: null },
612
- titulo: { type: String, default: null },
613
- descricao: { type: String, default: null },
614
- tema: { type: String, default: "light" },
615
- corFundo: { type: String, default: null },
616
- corTexto: { type: String, default: null },
617
- corBorda: { type: String, default: "#EAE8E8" },
618
- borderRadius: { type: [String, Number], default: "0.75rem" },
619
- sombra: { type: String, default: "0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06)" },
882
+ ...Z({ nomeArquivoExport: "card-pizza.png" }),
883
+ ...ae(),
884
+ ...oe("right"),
885
+ ...Ve(),
620
886
  corDetalhes: { type: String, default: "#3B82F6" },
621
- textoBotao: { type: String, default: "Ver mais" },
622
- botaoVisivel: { type: Boolean, default: !1 },
623
- direcao: {
624
- type: String,
625
- default: "right",
626
- validator: (t) => ["left", "right", "top", "bottom"].includes(t)
627
- },
628
- rotuloCategoria: { type: String, default: "Categoria" },
629
- rotuloQuantidade: { type: String, default: "Quantidade" },
630
- mostrarCabecalho: { type: Boolean, default: !0 },
631
- tipoValor: {
632
- type: String,
633
- default: "numero",
634
- validator: (t) => ["numero", "moeda", "percentual"].includes(t)
635
- },
636
- locale: { type: String, default: "pt-BR" },
637
- moeda: { type: String, default: "BRL" },
638
887
  data: {
639
888
  type: Array,
640
889
  default: () => [
@@ -649,28 +898,21 @@ const dt = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
649
898
  },
650
899
  height: { type: [String, Number], default: 260 },
651
900
  cutout: { type: [String, Number], default: "70%" },
652
- exportar: { type: Boolean, default: !1 },
653
- nomeArquivoExport: { type: String, default: "card-pizza.png" },
654
- itensClicaveis: { type: Boolean, default: !1 }
901
+ // Recebe o item original de `data` e retorna texto(s) extra(s) exibidos no
902
+ // tooltip abaixo do valor. Pode devolver uma string ou um array de strings.
903
+ detalheTooltip: { type: Function, default: null }
655
904
  },
656
905
  emits: ["botaoAcao", "exportado", "itemClicado"],
657
- setup(t, { emit: m }) {
658
- const e = t, p = m, { palette: o, cardStyle: k } = it(e), { formatar: $ } = pt(e), A = et(null);
659
- async function D() {
660
- await ct(A.value, {
661
- nomeArquivo: e.nomeArquivoExport,
662
- corFundo: o.value.bg !== "transparent" ? o.value.bg : null
663
- }), p("exportado");
664
- }
665
- const R = M(() => `card-pizza--${e.direcao}`), w = M(() => {
666
- const d = xt(e.corDetalhes, e.data.length);
667
- return e.data.map((l, n) => l.cor ?? d[n]);
668
- }), T = M(() => ({
669
- labels: e.data.map((d) => d.rotulo),
906
+ setup(e, { emit: r }) {
907
+ const t = e, n = r, { palette: a, cardStyle: u } = G(t), { formatar: c } = te(t), { cardRef: f, onExportar: C, iconeExportar: l } = K(t, a, n), d = F(() => `card-pizza--${t.direcao}`), p = F(() => {
908
+ const o = de(t.corDetalhes, t.data.length);
909
+ return t.data.map((s, $) => s.cor ?? o[$]);
910
+ }), g = F(() => ({
911
+ labels: t.data.map((o) => o.rotulo),
670
912
  datasets: [
671
913
  {
672
- data: e.data.map((d) => d.quantidade),
673
- backgroundColor: w.value,
914
+ data: t.data.map((o) => o.quantidade),
915
+ backgroundColor: p.value,
674
916
  borderWidth: 0,
675
917
  borderColor: "transparent",
676
918
  hoverOffset: 6,
@@ -678,226 +920,142 @@ const dt = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
678
920
  spacing: 0
679
921
  }
680
922
  ]
681
- }));
682
- function J(d) {
683
- const { chart: l, tooltip: n } = d, a = lt(l);
684
- if (!a) return;
685
- const r = gt(a);
686
- if (n.opacity === 0) {
687
- r.style.opacity = "0";
688
- return;
689
- }
690
- const v = n.title || [], i = n.dataPoints && n.dataPoints[0], g = i ? w.value[i.dataIndex] : "#3B82F6", c = i ? $(i.parsed) : "", b = r.querySelector(".nc-tt__content");
691
- b.innerHTML = `<div style="font-size:9px;font-weight:500;color:#94A3B8;letter-spacing:.04em;text-transform:uppercase;line-height:1;margin-bottom:4px;">${v.join(" ")}</div><div style="display:flex;align-items:center;gap:6px;"><span style="width:6px;height:6px;border-radius:999px;background:${g};box-shadow:0 0 0 2px ${j(g, 0.15)};flex:0 0 auto;"></span><span style="font-size:12px;font-weight:700;color:#0F172A;letter-spacing:-.01em;line-height:1.1;">${c}</span></div>`;
692
- const { offsetLeft: h, offsetTop: V } = l.canvas;
693
- r.style.opacity = "1", r.style.visibility = "hidden", r.style.left = "0px", r.style.top = "0px";
694
- const q = r.offsetWidth, E = r.offsetHeight, C = 4, I = h + n.caretX, N = V + n.caretY, z = rt(I, q, a.clientWidth, C), H = N < E + 16 + C;
695
- r.style.transform = H ? "translate(-50%, 16px)" : "translate(-50%, calc(-100% - 16px))";
696
- const F = r.querySelector(".nc-tt__caret");
697
- F && (H ? (F.style.bottom = "", F.style.top = "-5px", F.style.borderRight = "", F.style.borderBottom = "", F.style.borderLeft = "1px solid rgba(15,23,42,.06)", F.style.borderTop = "1px solid rgba(15,23,42,.06)") : (F.style.top = "", F.style.bottom = "-5px", F.style.borderLeft = "", F.style.borderTop = "", F.style.borderRight = "1px solid rgba(15,23,42,.06)", F.style.borderBottom = "1px solid rgba(15,23,42,.06)")), r.style.left = z + "px", r.style.top = N + "px", r.style.visibility = "visible";
698
- }
699
- function O(d) {
700
- const l = e.data[d];
701
- l && p("itemClicado", { item: l, index: d, cor: w.value[d] });
702
- }
703
- function _(d, l) {
704
- e.itensClicaveis && p("itemClicado", { item: d, index: l, cor: w.value[l] });
923
+ })), b = ye({
924
+ corDe: (o) => p.value[o.dataIndex],
925
+ valorDe: (o) => c(o.parsed),
926
+ linhasExtrasDe: t.detalheTooltip ? (o) => t.detalheTooltip(t.data[o.dataIndex], o.dataIndex) : null
927
+ }), m = _(null);
928
+ function k(o) {
929
+ n("itemClicado", o);
705
930
  }
706
- const Q = et(null), Z = M(() => ({
931
+ const M = F(() => ({
707
932
  responsive: !0,
708
933
  maintainAspectRatio: !1,
709
- cutout: e.cutout,
934
+ cutout: t.cutout,
710
935
  layout: { padding: 4 },
711
- onHover: (d, l, n) => {
712
- const a = l.length ? l[0].index : null;
713
- Q.value = a, n.canvas.style.cursor = e.itensClicaveis && l.length ? "pointer" : "default";
936
+ onHover: (o, s, $) => {
937
+ m.value = s.length ? s[0].index : null, $.canvas.style.cursor = t.itensClicaveis && s.length ? "pointer" : "default";
714
938
  },
715
- onClick: (d, l) => {
716
- !e.itensClicaveis || !l.length || O(l[0].index);
939
+ onClick: (o, s) => {
940
+ if (!t.itensClicaveis || !s.length) return;
941
+ const $ = s[0].index, h = t.data[$];
942
+ h && k({ item: h, index: $, cor: p.value[$] });
717
943
  },
718
944
  plugins: {
719
945
  legend: { display: !1 },
720
946
  tooltip: {
721
947
  enabled: !1,
722
- external: J,
948
+ external: b,
723
949
  callbacks: {
724
- title: (d) => {
725
- var l;
726
- return ((l = d[0]) == null ? void 0 : l.label) ?? "";
950
+ title: (o) => {
951
+ var s;
952
+ return ((s = o[0]) == null ? void 0 : s.label) ?? "";
727
953
  },
728
- label: (d) => $(d.parsed)
954
+ label: (o) => c(o.parsed)
729
955
  }
730
956
  }
731
957
  }
732
958
  }));
733
- function K() {
734
- p("botaoAcao");
735
- }
736
- const tt = dt;
737
- return (d, l) => (u(), f("div", {
959
+ return (o, s) => (v(), x("div", {
738
960
  ref_key: "cardRef",
739
- ref: A,
740
- class: ot(["card-pizza p-4 flex flex-column", R.value]),
741
- style: x(s(k))
961
+ ref: f,
962
+ class: J(["card-pizza nc-p-4 nc-flex nc-flex-column", d.value]),
963
+ style: q(y(u))
742
964
  }, [
743
- S("div", he, [
744
- d.$slots.legenda || t.legenda || d.$slots.sublegenda || t.sublegenda ? (u(), f("div", xe, [
745
- d.$slots.legenda || t.legenda ? (u(), f("div", {
746
- key: 0,
747
- class: "text-xs font-medium",
748
- style: x({ color: s(o).text, opacity: 0.95 })
749
- }, [
750
- L(d.$slots, "legenda", {}, () => [
751
- X(B(t.legenda), 1)
752
- ], !0)
753
- ], 4)) : y("", !0),
754
- d.$slots.sublegenda || t.sublegenda ? (u(), f("div", {
755
- key: 1,
756
- class: "text-xs",
757
- style: x({ color: s(o).muted })
758
- }, [
759
- L(d.$slots, "sublegenda", {}, () => [
760
- X(B(t.sublegenda), 1)
761
- ], !0)
762
- ], 4)) : y("", !0)
763
- ])) : y("", !0),
764
- d.$slots.actions || t.botaoVisivel || t.exportar ? (u(), f("div", ve, [
765
- L(d.$slots, "actions", {}, () => [
766
- t.botaoVisivel ? (u(), f("button", {
767
- key: 0,
768
- class: "nc-btn inline-flex align-items-center",
769
- style: x({ color: s(o).text, borderColor: s(j)(s(o).text, 0.18) }),
770
- onClick: K
771
- }, [
772
- S("span", null, B(t.textoBotao), 1)
773
- ], 4)) : y("", !0)
774
- ], !0),
775
- t.exportar ? (u(), f("button", {
776
- key: 0,
777
- type: "button",
778
- class: "nc-exportar inline-flex align-items-center justify-content-center",
779
- style: x({ color: s(o).muted, borderColor: s(j)(s(o).text, 0.18) }),
780
- title: "Exportar como imagem",
781
- "aria-label": "Exportar como imagem",
782
- onClick: D,
783
- innerHTML: s(tt)
784
- }, null, 12, $e)) : y("", !0)
785
- ])) : y("", !0)
786
- ]),
787
- S("div", Se, [
788
- S("div", Ce, [
789
- t.mostrarCabecalho ? (u(), f("div", {
790
- key: 0,
791
- class: "nc-tabela-cab flex align-items-center justify-content-between",
792
- style: x({ color: s(o).muted, borderColor: s(j)(s(o).muted, 0.25) })
793
- }, [
794
- S("span", null, B(t.rotuloCategoria), 1),
795
- S("span", ke, B(t.rotuloQuantidade), 1)
796
- ], 4)) : y("", !0),
797
- (u(!0), f(bt, null, ht(t.data, (n, a) => (u(), f("div", {
798
- key: a,
799
- class: ot(["nc-tabela-linha flex align-items-center justify-content-between", { "nc-tabela-linha--clicavel": t.itensClicaveis, "nc-tabela-linha--ativa": Q.value === a }]),
800
- style: x({
801
- color: s(o).text,
802
- cursor: t.itensClicaveis ? "pointer" : "default",
803
- "--nc-linha-bg": s(j)(w.value[a], 0.05),
804
- "--nc-linha-bg-forte": s(j)(w.value[a], 0.08)
805
- }),
806
- role: t.itensClicaveis ? "button" : null,
807
- tabindex: t.itensClicaveis ? 0 : null,
808
- onMouseenter: (r) => Q.value = a,
809
- onMouseleave: l[0] || (l[0] = (r) => Q.value = null),
810
- onFocus: (r) => Q.value = a,
811
- onBlur: l[1] || (l[1] = (r) => Q.value = null),
812
- onClick: (r) => _(n, a),
813
- onKeydown: [
814
- yt(mt((r) => _(n, a), ["prevent"]), ["enter"]),
815
- yt(mt((r) => _(n, a), ["prevent"]), ["space"])
816
- ]
817
- }, [
818
- S("span", Ae, [
819
- S("span", {
820
- class: "nc-bolinha",
821
- style: x({ background: w.value[a] })
822
- }, null, 4),
823
- S("span", null, B(n.rotulo), 1)
824
- ]),
825
- S("span", we, B(s($)(n.quantidade)), 1)
826
- ], 46, Be))), 128))
827
- ]),
828
- S("div", Re, [
829
- S("div", Te, [
830
- ft(st, {
965
+ P(ee, {
966
+ class: "card-pizza__topo",
967
+ legenda: o.legenda,
968
+ sublegenda: o.sublegenda,
969
+ palette: y(a),
970
+ "texto-botao": o.textoBotao,
971
+ "botao-visivel": o.botaoVisivel,
972
+ exportar: o.exportar,
973
+ onBotaoAcao: s[0] || (s[0] = ($) => n("botaoAcao")),
974
+ onExportar: y(C)
975
+ }, Y({ _: 2 }, [
976
+ o.$slots.legenda ? {
977
+ name: "legenda",
978
+ fn: z(() => [
979
+ S(o.$slots, "legenda", {}, void 0, !0)
980
+ ]),
981
+ key: "0"
982
+ } : void 0,
983
+ o.$slots.sublegenda ? {
984
+ name: "sublegenda",
985
+ fn: z(() => [
986
+ S(o.$slots, "sublegenda", {}, void 0, !0)
987
+ ]),
988
+ key: "1"
989
+ } : void 0,
990
+ o.$slots.actions ? {
991
+ name: "actions",
992
+ fn: z(() => [
993
+ S(o.$slots, "actions", {}, void 0, !0)
994
+ ]),
995
+ key: "2"
996
+ } : void 0
997
+ ]), 1032, ["legenda", "sublegenda", "palette", "texto-botao", "botao-visivel", "exportar", "onExportar"]),
998
+ E("div", Xt, [
999
+ P(He, {
1000
+ data: e.data,
1001
+ "cores-aplicadas": p.value,
1002
+ palette: y(a),
1003
+ formatar: y(c),
1004
+ "rotulo-categoria": o.rotuloCategoria,
1005
+ "rotulo-quantidade": o.rotuloQuantidade,
1006
+ "mostrar-cabecalho": o.mostrarCabecalho,
1007
+ "itens-clicaveis": o.itensClicaveis,
1008
+ "tooltip-linha": o.tooltipLinha,
1009
+ "hover-index": m.value,
1010
+ "onUpdate:hoverIndex": s[1] || (s[1] = ($) => m.value = $),
1011
+ onItemClicado: k
1012
+ }, null, 8, ["data", "cores-aplicadas", "palette", "formatar", "rotulo-categoria", "rotulo-quantidade", "mostrar-cabecalho", "itens-clicaveis", "tooltip-linha", "hover-index"]),
1013
+ E("div", Ut, [
1014
+ E("div", Yt, [
1015
+ P(Q, {
831
1016
  type: "doughnut",
832
- data: T.value,
833
- options: Z.value,
834
- height: t.height
1017
+ data: g.value,
1018
+ options: M.value,
1019
+ height: e.height
835
1020
  }, null, 8, ["data", "options", "height"]),
836
- d.$slots.titulo || t.titulo || d.$slots.descricao || t.descricao ? (u(), f("div", qe, [
837
- d.$slots.titulo || t.titulo ? (u(), f("div", {
1021
+ o.$slots.titulo || o.titulo || o.$slots.descricao || o.descricao ? (v(), x("div", Jt, [
1022
+ o.$slots.titulo || o.titulo ? (v(), x("div", {
838
1023
  key: 0,
839
- class: "nc-centro-titulo m-0 font-semibold",
840
- style: x({ color: s(o).text })
1024
+ class: "nc-centro-titulo nc-m-0 nc-font-semibold",
1025
+ style: q({ color: y(a).text })
841
1026
  }, [
842
- L(d.$slots, "titulo", {}, () => [
843
- X(B(t.titulo), 1)
1027
+ S(o.$slots, "titulo", {}, () => [
1028
+ j(I(o.titulo), 1)
844
1029
  ], !0)
845
- ], 4)) : y("", !0),
846
- d.$slots.descricao || t.descricao ? (u(), f("div", {
1030
+ ], 4)) : B("", !0),
1031
+ o.$slots.descricao || o.descricao ? (v(), x("div", {
847
1032
  key: 1,
848
1033
  class: "nc-centro-desc",
849
- style: x({ color: s(o).muted })
1034
+ style: q({ color: y(a).muted })
850
1035
  }, [
851
- L(d.$slots, "descricao", {}, () => [
852
- X(B(t.descricao), 1)
1036
+ S(o.$slots, "descricao", {}, () => [
1037
+ j(I(o.descricao), 1)
853
1038
  ], !0)
854
- ], 4)) : y("", !0)
855
- ])) : y("", !0)
1039
+ ], 4)) : B("", !0)
1040
+ ])) : B("", !0)
856
1041
  ])
857
1042
  ])
858
1043
  ]),
859
- d.$slots.footer ? (u(), f("div", Fe, [
860
- L(d.$slots, "footer", {}, void 0, !0)
861
- ])) : y("", !0)
1044
+ o.$slots.footer ? (v(), x("div", Qt, [
1045
+ S(o.$slots, "footer", {}, void 0, !0)
1046
+ ])) : B("", !0)
862
1047
  ], 6));
863
1048
  }
864
- }, Le = /* @__PURE__ */ nt(Ee, [["__scopeId", "data-v-eda43720"]]), Me = { class: "card-barra__header flex flex-column" }, ze = { class: "card-barra__topo flex align-items-start justify-content-between gap-3" }, He = {
865
- key: 0,
866
- class: "nc-legendas-flex flex flex-column"
867
- }, je = {
868
- key: 1,
869
- class: "nc-actions inline-flex align-items-center gap-2"
870
- }, Ve = ["innerHTML"], Ne = {
871
- key: 0,
872
- class: "card-barra__titulos mt-3 mb-2 flex flex-column"
873
- }, Pe = { class: "card-barra__chart flex-1" }, Ie = {
1049
+ }, Kt = /* @__PURE__ */ W(Gt, [["__scopeId", "data-v-ecbe8798"]]), Zt = { class: "card-barra__header nc-flex nc-flex-column" }, _t = { class: "card-barra__chart nc-flex-1" }, ea = {
874
1050
  key: 0,
875
- class: "card-barra__footer mt-3"
876
- }, De = {
1051
+ class: "card-barra__footer nc-mt-3"
1052
+ }, ta = {
877
1053
  __name: "CardBarra",
878
1054
  props: {
879
- legenda: { type: String, default: null },
880
- sublegenda: { type: String, default: null },
881
- titulo: { type: String, default: null },
882
- descricao: { type: String, default: null },
883
- tema: { type: String, default: "light" },
884
- corFundo: { type: String, default: null },
1055
+ ...Z({ nomeArquivoExport: "card-barra.png" }),
1056
+ ...ae(),
1057
+ ...oe("top"),
885
1058
  corDetalhes: { type: String, default: "#3B82F6" },
886
- corTexto: { type: String, default: null },
887
- textoBotao: { type: String, default: "Ver mais" },
888
- direcao: {
889
- type: String,
890
- default: "top",
891
- validator: (t) => ["top", "bottom", "left", "right"].includes(t)
892
- },
893
- botaoVisivel: { type: Boolean, default: !1 },
894
- tipoValor: {
895
- type: String,
896
- default: "numero",
897
- validator: (t) => ["numero", "moeda", "percentual"].includes(t)
898
- },
899
- locale: { type: String, default: "pt-BR" },
900
- moeda: { type: String, default: "BRL" },
901
1059
  data: {
902
1060
  type: Array,
903
1061
  default: () => [
@@ -923,137 +1081,125 @@ const dt = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
923
1081
  orientacao: {
924
1082
  type: String,
925
1083
  default: "vertical",
926
- validator: (t) => ["vertical", "horizontal"].includes(t)
1084
+ validator: (e) => ["vertical", "horizontal"].includes(e)
927
1085
  },
928
1086
  empilhado: { type: Boolean, default: !1 },
929
1087
  mostrarLegendaSeries: { type: Boolean, default: !0 },
930
1088
  height: { type: [String, Number], default: 280 },
931
- borderRadius: { type: [String, Number], default: "0.75rem" },
932
- sombra: { type: String, default: "0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06)" },
933
- corBorda: { type: String, default: "#EAE8E8" },
934
1089
  larguraBarra: { type: [String, Number], default: 0.92 },
935
1090
  raioBarra: { type: Number, default: 6 },
936
1091
  linhasReferencia: { type: [Object, Array], default: null },
937
- exportar: { type: Boolean, default: !1 },
938
- nomeArquivoExport: { type: String, default: "card-barra.png" },
939
- corHover: { type: String, default: null }
1092
+ corHover: { type: String, default: null },
1093
+ // Recebe o item original (da 1ª série em `data`/`series`) e o índice, e
1094
+ // retorna texto(s) extra(s) exibidos no tooltip abaixo dos valores. Pode
1095
+ // devolver uma string ou um array de strings.
1096
+ detalheTooltip: { type: Function, default: null }
940
1097
  },
941
1098
  emits: ["botaoAcao", "exportado"],
942
- setup(t, { emit: m }) {
943
- Pt((i) => ({
944
- c9bf3d56: T.value
1099
+ setup(e, { emit: r }) {
1100
+ ot((i) => ({
1101
+ v655f41dd: p.value
945
1102
  }));
946
- const e = t, p = m, { palette: o, cardStyle: k } = it(e), { formatar: $ } = pt(e), A = et(null), D = dt;
947
- async function R() {
948
- await ct(A.value, {
949
- nomeArquivo: e.nomeArquivoExport,
950
- corFundo: o.value.bg !== "transparent" ? o.value.bg : null
951
- }), p("exportado");
952
- }
953
- const w = M(() => `card-barra--${e.direcao}`), T = M(
954
- () => typeof e.height == "number" ? `${e.height}px` : e.height
955
- ), J = M(() => e.orientacao === "horizontal"), O = M(() => Array.isArray(e.series) && e.series.length > 0 ? e.series.map((i, g) => ({
956
- nome: i.nome ?? `Série ${g + 1}`,
957
- cor: i.cor || e.cores[g % e.cores.length],
1103
+ const t = e, n = r, { palette: a, cardStyle: u } = G(t), { formatar: c } = te(t), { cardRef: f, onExportar: C, iconeExportar: l } = K(t, a, n), d = F(() => `card-barra--${t.direcao}`), p = F(
1104
+ () => typeof t.height == "number" ? `${t.height}px` : t.height
1105
+ ), g = F(() => t.orientacao === "horizontal"), { linhasNormalizadas: b, pluginLinhaReferencia: m, temLinhaHover: k } = Pe({
1106
+ linhasReferencia: () => t.linhasReferencia,
1107
+ horizontal: () => g.value,
1108
+ formatar: c
1109
+ }), M = [m], o = F(() => Array.isArray(t.series) && t.series.length > 0 ? t.series.map((i, R) => ({
1110
+ nome: i.nome ?? `Série ${R + 1}`,
1111
+ cor: i.cor || t.cores[R % t.cores.length],
958
1112
  dados: Array.isArray(i.dados) ? i.dados : []
959
- })) : [{ nome: e.legenda || "Valores", cor: e.corDetalhes, dados: e.data }]), _ = M(() => {
960
- const i = O.value[0];
961
- return i ? i.dados.map((g) => g.rotulo) : [];
962
- }), Q = M(() => {
963
- const i = O.value, g = i.length - 1, c = typeof e.larguraBarra == "number" ? e.larguraBarra : Number(e.larguraBarra) || 0.6, b = e.raioBarra, h = J.value;
964
- function V(q) {
965
- if (!e.empilhado || i.length === 1) return b;
966
- const E = q === 0, C = q === g;
967
- return h ? {
968
- topLeft: E ? b : 0,
969
- bottomLeft: E ? b : 0,
970
- topRight: C ? b : 0,
971
- bottomRight: C ? b : 0
1113
+ })) : [{ nome: t.legenda || "Valores", cor: t.corDetalhes, dados: t.data }]), s = F(() => {
1114
+ const i = o.value[0];
1115
+ return i ? i.dados.map((R) => R.rotulo) : [];
1116
+ }), $ = F(() => {
1117
+ const i = o.value, R = i.length - 1, T = typeof t.larguraBarra == "number" ? t.larguraBarra : Number(t.larguraBarra) || 0.6, w = t.raioBarra, L = g.value;
1118
+ function H(N) {
1119
+ if (!t.empilhado || i.length === 1) return w;
1120
+ const V = N === 0, O = N === R;
1121
+ return L ? {
1122
+ topLeft: V ? w : 0,
1123
+ bottomLeft: V ? w : 0,
1124
+ topRight: O ? w : 0,
1125
+ bottomRight: O ? w : 0
972
1126
  } : {
973
- bottomLeft: E ? b : 0,
974
- bottomRight: E ? b : 0,
975
- topLeft: C ? b : 0,
976
- topRight: C ? b : 0
1127
+ bottomLeft: V ? w : 0,
1128
+ bottomRight: V ? w : 0,
1129
+ topLeft: O ? w : 0,
1130
+ topRight: O ? w : 0
977
1131
  };
978
1132
  }
979
1133
  return {
980
- labels: _.value,
981
- datasets: i.map((q, E) => ({
982
- label: q.nome,
983
- data: q.dados.map((C) => C.quantidade),
984
- previstos: q.dados.map((C) => C.previsto != null ? C.previsto : null),
985
- backgroundColor: j(q.cor, 0.72),
986
- hoverBackgroundColor: e.corHover || q.cor,
1134
+ labels: s.value,
1135
+ datasets: i.map((N, V) => ({
1136
+ label: N.nome,
1137
+ data: N.dados.map((O) => O.quantidade),
1138
+ previstos: N.dados.map((O) => O.previsto != null ? O.previsto : null),
1139
+ backgroundColor: D(N.cor, 0.72),
1140
+ hoverBackgroundColor: t.corHover || N.cor,
987
1141
  borderWidth: 0,
988
- borderRadius: V(E),
1142
+ borderRadius: H(V),
989
1143
  borderSkipped: !1,
990
1144
  categoryPercentage: 1,
991
- barPercentage: c
1145
+ barPercentage: T
992
1146
  }))
993
1147
  };
994
1148
  });
995
- function Z(i, g) {
996
- g ? Object.assign(i.style, {
997
- top: "-5px",
998
- bottom: "auto",
999
- borderTop: "1px solid rgba(15,23,42,.06)",
1000
- borderLeft: "1px solid rgba(15,23,42,.06)",
1001
- borderRight: "none",
1002
- borderBottom: "none"
1003
- }) : Object.assign(i.style, {
1004
- bottom: "-5px",
1005
- top: "auto",
1006
- borderRight: "1px solid rgba(15,23,42,.06)",
1007
- borderBottom: "1px solid rgba(15,23,42,.06)",
1008
- borderTop: "none",
1009
- borderLeft: "none"
1010
- });
1011
- }
1012
- let K = null;
1013
- function tt(i) {
1014
- var Bt, At;
1015
- const { chart: g, tooltip: c } = i, b = lt(g);
1016
- if (!b) return;
1017
- const h = gt(b, { caretFlexivel: !0 });
1018
- if (c.opacity === 0 || K) {
1019
- h.style.opacity = "0";
1149
+ function h(i) {
1150
+ var qe, we, Te;
1151
+ const { chart: R, tooltip: T } = i, w = fe(R);
1152
+ if (!w) return;
1153
+ const L = pe(w, { caretFlexivel: !0 });
1154
+ if (T.opacity === 0 || k()) {
1155
+ L.style.opacity = "0";
1020
1156
  return;
1021
1157
  }
1022
- const V = c.title || [], q = c.dataPoints || [], E = h.querySelector(".nc-tt__content"), C = q.map((at) => {
1023
- var wt;
1024
- const ut = ((wt = O.value[at.datasetIndex]) == null ? void 0 : wt.cor) || e.corDetalhes, zt = $(J.value ? at.parsed.x : at.parsed.y), Ht = at.dataset.label && O.value.length > 1 ? `<span style="font-size:11px;color:#64748B;margin-right:6px;">${at.dataset.label}</span>` : "";
1025
- return `<div style="display:flex;align-items:center;gap:6px;margin-top:2px;"><span style="width:6px;height:6px;border-radius:999px;background:${ut};box-shadow:0 0 0 2px ${j(ut, 0.15)};flex:0 0 auto;"></span>` + Ht + `<span style="font-size:12px;font-weight:700;color:#0F172A;letter-spacing:-.01em;line-height:1.1;margin-left:auto;">${zt}</span></div>`;
1026
- }).join(""), I = (Bt = q[0]) == null ? void 0 : Bt.dataIndex;
1027
- let N = null;
1028
- if (I != null)
1029
- for (const at of g.data.datasets) {
1030
- const ut = (At = at.previstos) == null ? void 0 : At[I];
1031
- if (ut != null) {
1032
- N = ut;
1158
+ const H = T.dataPoints || [], N = o.value.length > 1, V = H.map((X) => {
1159
+ var Ee;
1160
+ const U = ((Ee = o.value[X.datasetIndex]) == null ? void 0 : Ee.cor) || t.corDetalhes, ie = c(g.value ? X.parsed.x : X.parsed.y);
1161
+ return he(U, ie, {
1162
+ nome: N ? X.dataset.label : "",
1163
+ alinharDireita: !0,
1164
+ margemTopo: !0
1165
+ });
1166
+ }).join(""), O = (qe = H[0]) == null ? void 0 : qe.dataIndex;
1167
+ let le = null;
1168
+ if (O != null)
1169
+ for (const X of R.data.datasets) {
1170
+ const U = (we = X.previstos) == null ? void 0 : we[O];
1171
+ if (U != null) {
1172
+ le = U;
1033
1173
  break;
1034
1174
  }
1035
1175
  }
1036
- const z = N != null ? `<div style="display:flex;align-items:center;gap:6px;margin-top:6px;padding-top:4px;border-top:1px dashed rgba(15,23,42,.08);"><span style="font-size:11px;color:#64748B;margin-right:6px;">Previsto</span><span style="font-size:12px;font-weight:700;color:#0F172A;letter-spacing:-.01em;line-height:1.1;margin-left:auto;">${$(N)}</span></div>` : "";
1037
- E.innerHTML = `<div style="font-size:9px;font-weight:500;color:#94A3B8;letter-spacing:.04em;text-transform:uppercase;line-height:1;margin-bottom:4px;">${V.join(" ")}</div>` + C + z;
1038
- const { offsetLeft: H, offsetTop: F } = g.canvas;
1039
- h.style.opacity = "1", h.style.visibility = "hidden", h.style.left = "0px", h.style.top = "0px";
1040
- const U = h.offsetWidth, P = h.offsetHeight, G = 4, W = H + c.caretX, Y = F + c.caretY, vt = rt(W, U, b.clientWidth, G), Ft = U / 2, $t = 14, St = Y - $t - P, Ct = St < G, Et = Ct ? Y + $t : St, kt = h.querySelector(".nc-tt__caret");
1041
- Z(kt, Ct);
1042
- const Lt = W - (vt - Ft), Mt = Math.max(10, Math.min(U - 10, Lt));
1043
- kt.style.left = Mt + "px", h.style.left = vt + "px", h.style.top = Et + "px", h.style.visibility = "visible";
1176
+ const We = le != null ? `<div style="display:flex;align-items:center;gap:6px;margin-top:6px;padding-top:4px;border-top:1px dashed rgba(15,23,42,.08);"><span style="font-size:11px;color:#64748B;margin-right:6px;">Previsto</span><span style="font-size:12px;font-weight:700;color:#0F172A;letter-spacing:-.01em;line-height:1.1;margin-left:auto;">${c(le)}</span></div>` : "";
1177
+ let be = "";
1178
+ if (t.detalheTooltip && O != null) {
1179
+ const X = (Te = o.value[0]) == null ? void 0 : Te.dados[O], U = t.detalheTooltip(X, O);
1180
+ be = (Array.isArray(U) ? U : [U]).filter(Boolean).map((ie) => Oe(ie)).join("");
1181
+ }
1182
+ const Xe = L.querySelector(".nc-tt__content");
1183
+ Xe.innerHTML = me((T.title || []).join(" ")) + V + We + be;
1184
+ const { offsetLeft: Ue, offsetTop: Ye } = R.canvas;
1185
+ L.style.opacity = "1", L.style.visibility = "hidden", L.style.left = "0px", L.style.top = "0px";
1186
+ const se = L.offsetWidth, Je = L.offsetHeight, xe = 4, $e = Ue + T.caretX, Ce = Ye + T.caretY, ke = ge($e, se, w.clientWidth, xe), Qe = se / 2, Se = 14, Ae = Ce - Se - Je, Be = Ae < xe, Ge = Be ? Ce + Se : Ae, Re = L.querySelector(".nc-tt__caret");
1187
+ je(Re, Be);
1188
+ const Ke = $e - (ke - Qe), Ze = Math.max(10, Math.min(se - 10, Ke));
1189
+ Re.style.left = Ze + "px", L.style.left = ke + "px", L.style.top = Ge + "px", L.style.visibility = "visible";
1044
1190
  }
1045
- const d = M(() => {
1046
- const i = J.value, g = {
1191
+ const A = F(() => {
1192
+ const i = g.value, R = {
1047
1193
  grid: { display: !1, drawBorder: !1 },
1048
1194
  border: { display: !1 },
1049
- ticks: { color: o.value.muted, font: { size: 10, family: "'Inter', sans-serif" }, padding: 8 },
1050
- stacked: e.empilhado
1051
- }, c = {
1195
+ ticks: { color: a.value.muted, font: { size: 10, family: "'Inter', sans-serif" }, padding: 8 },
1196
+ stacked: t.empilhado
1197
+ }, T = {
1052
1198
  display: !1,
1053
1199
  grid: { display: !1 },
1054
1200
  beginAtZero: !0,
1055
- stacked: e.empilhado,
1056
- suggestedMax: n.value.length ? Math.max(...n.value.map((b) => b.valor)) : void 0
1201
+ stacked: t.empilhado,
1202
+ suggestedMax: b.value.length ? Math.max(...b.value.map((w) => w.valor)) : void 0
1057
1203
  };
1058
1204
  return {
1059
1205
  responsive: !0,
@@ -1062,19 +1208,19 @@ const dt = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
1062
1208
  interaction: { intersect: !1, mode: "index", axis: i ? "y" : "x" },
1063
1209
  layout: {
1064
1210
  padding: {
1065
- top: n.value.length && !i ? 24 : 12,
1211
+ top: b.value.length && !i ? 24 : 12,
1066
1212
  right: i ? 12 : 0,
1067
1213
  bottom: 0,
1068
- left: n.value.length && i ? 60 : 0
1214
+ left: b.value.length && i ? 60 : 0
1069
1215
  }
1070
1216
  },
1071
1217
  plugins: {
1072
1218
  legend: {
1073
- display: e.mostrarLegendaSeries && O.value.length > 1,
1219
+ display: t.mostrarLegendaSeries && o.value.length > 1,
1074
1220
  position: "bottom",
1075
1221
  align: "start",
1076
1222
  labels: {
1077
- color: o.value.muted,
1223
+ color: a.value.muted,
1078
1224
  boxWidth: 8,
1079
1225
  boxHeight: 8,
1080
1226
  usePointStyle: !0,
@@ -1085,251 +1231,114 @@ const dt = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
1085
1231
  },
1086
1232
  tooltip: {
1087
1233
  enabled: !1,
1088
- external: tt,
1234
+ external: h,
1089
1235
  callbacks: {
1090
- title: (b) => {
1091
- var h;
1092
- return ((h = b[0]) == null ? void 0 : h.label) ?? "";
1236
+ title: (w) => {
1237
+ var L;
1238
+ return ((L = w[0]) == null ? void 0 : L.label) ?? "";
1093
1239
  },
1094
- label: (b) => $(i ? b.parsed.x : b.parsed.y)
1240
+ label: (w) => c(i ? w.parsed.x : w.parsed.y)
1095
1241
  }
1096
1242
  }
1097
1243
  },
1098
1244
  scales: {
1099
- x: i ? c : g,
1100
- y: i ? g : c
1245
+ x: i ? T : R,
1246
+ y: i ? R : T
1101
1247
  }
1102
1248
  };
1103
1249
  });
1104
- function l() {
1105
- p("botaoAcao");
1106
- }
1107
- const n = M(() => e.linhasReferencia ? (Array.isArray(e.linhasReferencia) ? e.linhasReferencia : [e.linhasReferencia]).filter((g) => g && (typeof g == "number" || typeof g.valor == "number")).map((g) => typeof g == "number" ? { valor: g, rotulo: null, cor: "#0F172A", corRotulo: "#0F172A", corTexto: "#FFFFFF", tracejado: [6, 6], espessura: 1 } : {
1108
- valor: g.valor,
1109
- rotulo: g.rotulo ?? null,
1110
- cor: g.cor || "#0F172A",
1111
- corRotulo: g.corRotulo || g.cor || "#0F172A",
1112
- corTexto: g.corTexto || "#FFFFFF",
1113
- tracejado: g.tracejado || [6, 6],
1114
- espessura: g.espessura ?? 1
1115
- }) : []), a = [], r = {
1116
- id: "linhaReferencia",
1117
- afterDatasetsDraw(i) {
1118
- const g = n.value;
1119
- if (a.length = 0, !g.length) return;
1120
- const { ctx: c, chartArea: b, scales: h } = i, V = J.value, q = V ? h.x : h.y;
1121
- q && g.forEach((E) => {
1122
- const C = q.getPixelForValue(E.valor);
1123
- if (a.push({ linha: E, pos: C, horizontal: V, chartArea: b }), c.save(), c.beginPath(), c.setLineDash(E.tracejado), c.lineWidth = E.espessura, c.strokeStyle = E.cor, V) {
1124
- if (C < b.left || C > b.right) {
1125
- c.restore();
1126
- return;
1127
- }
1128
- c.moveTo(C, b.top), c.lineTo(C, b.bottom);
1129
- } else {
1130
- if (C < b.top || C > b.bottom) {
1131
- c.restore();
1132
- return;
1133
- }
1134
- c.moveTo(b.left, C), c.lineTo(b.right, C);
1135
- }
1136
- if (c.stroke(), c.setLineDash([]), E.rotulo) {
1137
- c.font = "600 11px 'Inter', sans-serif";
1138
- const I = 8, N = 5, H = c.measureText(E.rotulo).width, F = 12, U = H + I * 2, P = F + N * 2, G = P / 2;
1139
- let W, Y;
1140
- V ? (W = C - U / 2, Y = b.top - P - 6, Y < 0 && (Y = b.top + 6)) : (W = b.left - U - 6, Y = C - P / 2, W < 0 && (W = b.left + 6)), c.fillStyle = E.corRotulo, c.beginPath(), c.roundRect ? c.roundRect(W, Y, U, P, G) : (c.moveTo(W + G, Y), c.lineTo(W + U - G, Y), c.quadraticCurveTo(W + U, Y, W + U, Y + G), c.lineTo(W + U, Y + P - G), c.quadraticCurveTo(W + U, Y + P, W + U - G, Y + P), c.lineTo(W + G, Y + P), c.quadraticCurveTo(W, Y + P, W, Y + P - G), c.lineTo(W, Y + G), c.quadraticCurveTo(W, Y, W + G, Y)), c.fill(), c.fillStyle = E.corTexto, c.textBaseline = "middle", c.textAlign = "center", c.fillText(E.rotulo, W + U / 2, Y + P / 2);
1141
- }
1142
- c.restore();
1143
- });
1144
- },
1145
- beforeEvent(i, g) {
1146
- if (!a.length) {
1147
- K = null;
1148
- return;
1149
- }
1150
- const c = g.event;
1151
- if (!c || c.type === "mouseout" || c.x == null || c.y == null) {
1152
- K = null;
1153
- return;
1154
- }
1155
- const b = 8;
1156
- let h = null, V = 1 / 0;
1157
- for (const q of a) {
1158
- const E = q.horizontal ? Math.abs(c.x - q.pos) : Math.abs(c.y - q.pos), C = q.horizontal ? c.y >= q.chartArea.top && c.y <= q.chartArea.bottom : c.x >= q.chartArea.left && c.x <= q.chartArea.right;
1159
- E <= b && C && E < V && (V = E, h = q);
1160
- }
1161
- K = h;
1162
- },
1163
- afterEvent(i, g) {
1164
- if (!a.length) return;
1165
- const c = g.event;
1166
- if (!c) return;
1167
- const b = lt(i);
1168
- if (!b) return;
1169
- let h = b.querySelector(".nc-tt-linhaRef");
1170
- if (!K) {
1171
- h && (h.style.opacity = "0");
1172
- return;
1173
- }
1174
- const V = K;
1175
- h || (h = document.createElement("div"), h.className = "nc-tt-linhaRef", Object.assign(h.style, {
1176
- position: "absolute",
1177
- pointerEvents: "none",
1178
- transform: "translate(-50%, calc(-100% - 12px))",
1179
- transition: "opacity .18s ease, left .12s ease, top .12s ease",
1180
- opacity: "0",
1181
- background: "#ffffff",
1182
- borderRadius: "10px",
1183
- padding: "8px 11px",
1184
- boxShadow: "0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.12)",
1185
- border: "1px solid rgba(15,23,42,.06)",
1186
- whiteSpace: "nowrap",
1187
- zIndex: "11",
1188
- fontFamily: "'Inter', sans-serif",
1189
- textAlign: "left"
1190
- }), b.appendChild(h));
1191
- const q = V.linha.cor || "#0F172A", E = $(V.linha.valor), C = V.linha.rotulo;
1192
- h.innerHTML = (C ? `<div style="font-size:9px;font-weight:500;color:#94A3B8;letter-spacing:.04em;text-transform:uppercase;line-height:1;margin-bottom:4px;">${C}</div>` : "") + `<div style="display:flex;align-items:center;gap:6px;"><span style="width:6px;height:6px;border-radius:999px;background:${q};box-shadow:0 0 0 2px ${j(q, 0.15)};flex:0 0 auto;"></span><span style="font-size:12px;font-weight:700;color:#0F172A;letter-spacing:-.01em;line-height:1.1;">${E}</span></div>`;
1193
- const I = i.canvas;
1194
- h.style.opacity = "1", h.style.visibility = "hidden", h.style.left = "0px", h.style.top = "0px";
1195
- const N = h.offsetWidth, z = h.offsetHeight, H = 4;
1196
- let F, U;
1197
- V.horizontal ? (F = I.offsetLeft + V.pos, U = I.offsetTop + c.y) : (F = I.offsetLeft + c.x, U = I.offsetTop + V.pos);
1198
- const P = rt(F, N, b.clientWidth, H);
1199
- let G = U;
1200
- const W = z + 16 + H;
1201
- G < W && (G = W), h.style.left = P + "px", h.style.top = G + "px", h.style.visibility = "visible";
1202
- }
1203
- }, v = M(() => n.value.length ? [r] : []);
1204
- return (i, g) => (u(), f("div", {
1250
+ return (i, R) => (v(), x("div", {
1205
1251
  ref_key: "cardRef",
1206
- ref: A,
1207
- class: ot(["card-barra p-4 flex", w.value]),
1208
- style: x(s(k))
1252
+ ref: f,
1253
+ class: J(["card-barra nc-p-4 nc-flex", d.value]),
1254
+ style: q(y(u))
1209
1255
  }, [
1210
- S("div", Me, [
1211
- S("div", ze, [
1212
- i.$slots.legenda || t.legenda || i.$slots.sublegenda || t.sublegenda ? (u(), f("div", He, [
1213
- i.$slots.legenda || t.legenda ? (u(), f("div", {
1214
- key: 0,
1215
- class: "text-xs font-medium",
1216
- style: x({ color: s(o).text, opacity: 0.85 })
1217
- }, [
1218
- L(i.$slots, "legenda", {}, () => [
1219
- X(B(t.legenda), 1)
1220
- ], !0)
1221
- ], 4)) : y("", !0),
1222
- i.$slots.sublegenda || t.sublegenda ? (u(), f("div", {
1223
- key: 1,
1224
- class: "text-xs",
1225
- style: x({ color: s(o).muted })
1226
- }, [
1227
- L(i.$slots, "sublegenda", {}, () => [
1228
- X(B(t.sublegenda), 1)
1229
- ], !0)
1230
- ], 4)) : y("", !0)
1231
- ])) : y("", !0),
1232
- i.$slots.actions || t.botaoVisivel || t.exportar ? (u(), f("div", je, [
1233
- L(i.$slots, "actions", {}, () => [
1234
- t.botaoVisivel ? (u(), f("button", {
1235
- key: 0,
1236
- class: "nc-btn inline-flex align-items-center",
1237
- style: x({ color: s(o).text, borderColor: s(j)(s(o).text, 0.18) }),
1238
- onClick: l
1239
- }, [
1240
- S("span", null, B(t.textoBotao), 1)
1241
- ], 4)) : y("", !0)
1242
- ], !0),
1243
- t.exportar ? (u(), f("button", {
1244
- key: 0,
1245
- type: "button",
1246
- class: "nc-exportar inline-flex align-items-center justify-content-center",
1247
- style: x({ color: s(o).muted, borderColor: s(j)(s(o).text, 0.18) }),
1248
- title: "Exportar como imagem",
1249
- "aria-label": "Exportar como imagem",
1250
- onClick: R,
1251
- innerHTML: s(D)
1252
- }, null, 12, Ve)) : y("", !0)
1253
- ])) : y("", !0)
1254
- ]),
1255
- i.$slots.titulo || t.titulo || i.$slots.descricao || t.descricao ? (u(), f("div", Ne, [
1256
- i.$slots.titulo || t.titulo ? (u(), f("div", {
1257
- key: 0,
1258
- class: "m-0 text-3xl font-semibold",
1259
- style: x({ color: s(o).text, lineHeight: "33px", letterSpacing: "-1px" })
1260
- }, [
1261
- L(i.$slots, "titulo", {}, () => [
1262
- X(B(t.titulo), 1)
1263
- ], !0)
1264
- ], 4)) : y("", !0),
1265
- i.$slots.descricao || t.descricao ? (u(), f("div", {
1266
- key: 1,
1267
- class: "text-sm mt-1",
1268
- style: x({ color: s(o).muted })
1269
- }, [
1270
- L(i.$slots, "descricao", {}, () => [
1271
- X(B(t.descricao), 1)
1272
- ], !0)
1273
- ], 4)) : y("", !0)
1274
- ])) : y("", !0)
1256
+ E("div", Zt, [
1257
+ P(ee, {
1258
+ class: "card-barra__topo",
1259
+ legenda: i.legenda,
1260
+ sublegenda: i.sublegenda,
1261
+ palette: y(a),
1262
+ "texto-botao": i.textoBotao,
1263
+ "botao-visivel": i.botaoVisivel,
1264
+ exportar: i.exportar,
1265
+ "opacidade-legenda": "0.85",
1266
+ onBotaoAcao: R[0] || (R[0] = (T) => n("botaoAcao")),
1267
+ onExportar: y(C)
1268
+ }, Y({ _: 2 }, [
1269
+ i.$slots.legenda ? {
1270
+ name: "legenda",
1271
+ fn: z(() => [
1272
+ S(i.$slots, "legenda", {}, void 0, !0)
1273
+ ]),
1274
+ key: "0"
1275
+ } : void 0,
1276
+ i.$slots.sublegenda ? {
1277
+ name: "sublegenda",
1278
+ fn: z(() => [
1279
+ S(i.$slots, "sublegenda", {}, void 0, !0)
1280
+ ]),
1281
+ key: "1"
1282
+ } : void 0,
1283
+ i.$slots.actions ? {
1284
+ name: "actions",
1285
+ fn: z(() => [
1286
+ S(i.$slots, "actions", {}, void 0, !0)
1287
+ ]),
1288
+ key: "2"
1289
+ } : void 0
1290
+ ]), 1032, ["legenda", "sublegenda", "palette", "texto-botao", "botao-visivel", "exportar", "onExportar"]),
1291
+ i.$slots.titulo || i.titulo || i.$slots.descricao || i.descricao ? (v(), re(ue, {
1292
+ key: 0,
1293
+ class: "card-barra__titulos nc-mt-3 nc-mb-2",
1294
+ titulo: i.titulo,
1295
+ descricao: i.descricao,
1296
+ palette: y(a)
1297
+ }, Y({ _: 2 }, [
1298
+ i.$slots.titulo ? {
1299
+ name: "titulo",
1300
+ fn: z(() => [
1301
+ S(i.$slots, "titulo", {}, void 0, !0)
1302
+ ]),
1303
+ key: "0"
1304
+ } : void 0,
1305
+ i.$slots.descricao ? {
1306
+ name: "descricao",
1307
+ fn: z(() => [
1308
+ S(i.$slots, "descricao", {}, void 0, !0)
1309
+ ]),
1310
+ key: "1"
1311
+ } : void 0
1312
+ ]), 1032, ["titulo", "descricao", "palette"])) : B("", !0)
1275
1313
  ]),
1276
- S("div", Pe, [
1277
- ft(st, {
1314
+ E("div", _t, [
1315
+ P(Q, {
1278
1316
  type: "bar",
1279
- data: Q.value,
1280
- options: d.value,
1281
- plugins: v.value,
1317
+ data: $.value,
1318
+ options: A.value,
1319
+ plugins: M,
1282
1320
  height: "100%"
1283
- }, null, 8, ["data", "options", "plugins"])
1321
+ }, null, 8, ["data", "options"])
1284
1322
  ]),
1285
- i.$slots.footer ? (u(), f("div", Ie, [
1286
- L(i.$slots, "footer", {}, void 0, !0)
1287
- ])) : y("", !0)
1323
+ i.$slots.footer ? (v(), x("div", ea, [
1324
+ S(i.$slots, "footer", {}, void 0, !0)
1325
+ ])) : B("", !0)
1288
1326
  ], 6));
1289
1327
  }
1290
- }, We = /* @__PURE__ */ nt(De, [["__scopeId", "data-v-474043e8"]]), Oe = { class: "card-polar__topo flex align-items-start justify-content-between gap-3" }, Xe = {
1291
- key: 0,
1292
- class: "nc-legendas-flex flex flex-column"
1293
- }, Ye = {
1294
- key: 1,
1295
- class: "nc-actions inline-flex align-items-center gap-2"
1296
- }, Je = ["innerHTML"], Qe = { class: "card-polar__corpo flex align-items-center" }, Ue = { class: "nc-tabela flex flex-column" }, Ge = { class: "nc-tabela-valor" }, Ke = ["role", "tabindex", "onMouseenter", "onFocus", "onClick", "onKeydown"], Ze = { class: "nc-tabela-rotulo inline-flex align-items-center gap-2" }, _e = { class: "nc-tabela-valor" }, to = { class: "card-polar__chart-wrap flex align-items-center justify-content-center" }, eo = { class: "card-polar__chart" }, oo = {
1328
+ }, aa = /* @__PURE__ */ W(ta, [["__scopeId", "data-v-857f5e5b"]]), oa = { class: "card-polar__corpo nc-flex nc-align-items-center" }, na = { class: "card-polar__chart-wrap nc-flex nc-align-items-center nc-justify-content-center" }, ra = { class: "card-polar__chart" }, la = {
1297
1329
  key: 0,
1298
1330
  class: "card-polar__centro-bottom"
1299
- }, ao = {
1331
+ }, sa = {
1300
1332
  key: 0,
1301
- class: "card-polar__footer mt-3"
1302
- }, no = {
1333
+ class: "card-polar__footer nc-mt-3"
1334
+ }, ia = {
1303
1335
  __name: "CardPolar",
1304
1336
  props: {
1305
- legenda: { type: String, default: null },
1306
- sublegenda: { type: String, default: null },
1307
- titulo: { type: String, default: null },
1308
- descricao: { type: String, default: null },
1309
- tema: { type: String, default: "light" },
1310
- corFundo: { type: String, default: null },
1311
- corTexto: { type: String, default: null },
1312
- corBorda: { type: String, default: "#EAE8E8" },
1313
- borderRadius: { type: [String, Number], default: "0.75rem" },
1314
- sombra: { type: String, default: "0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06)" },
1337
+ ...Z({ nomeArquivoExport: "card-polar.png" }),
1338
+ ...ae(),
1339
+ ...oe("right"),
1340
+ ...Ve(),
1315
1341
  corDetalhes: { type: String, default: "#3B82F6" },
1316
- textoBotao: { type: String, default: "Ver mais" },
1317
- botaoVisivel: { type: Boolean, default: !1 },
1318
- direcao: {
1319
- type: String,
1320
- default: "right",
1321
- validator: (t) => ["left", "right", "top", "bottom"].includes(t)
1322
- },
1323
- rotuloCategoria: { type: String, default: "Categoria" },
1324
- rotuloQuantidade: { type: String, default: "Quantidade" },
1325
- mostrarCabecalho: { type: Boolean, default: !0 },
1326
- tipoValor: {
1327
- type: String,
1328
- default: "numero",
1329
- validator: (t) => ["numero", "moeda", "percentual"].includes(t)
1330
- },
1331
- locale: { type: String, default: "pt-BR" },
1332
- moeda: { type: String, default: "BRL" },
1333
1342
  data: {
1334
1343
  type: Array,
1335
1344
  default: () => [
@@ -1344,80 +1353,57 @@ const dt = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
1344
1353
  },
1345
1354
  height: { type: [String, Number], default: 260 },
1346
1355
  mostrarLinhasGrade: { type: Boolean, default: !0 },
1347
- exportar: { type: Boolean, default: !1 },
1348
- nomeArquivoExport: { type: String, default: "card-polar.png" },
1349
- itensClicaveis: { type: Boolean, default: !1 }
1356
+ // Recebe o item original de `data` e retorna texto(s) extra(s) exibidos no
1357
+ // tooltip abaixo do valor. Pode devolver uma string ou um array de strings.
1358
+ detalheTooltip: { type: Function, default: null }
1350
1359
  },
1351
1360
  emits: ["botaoAcao", "exportado", "itemClicado"],
1352
- setup(t, { emit: m }) {
1353
- const e = t, p = m, { palette: o, cardStyle: k } = it(e), { formatar: $ } = pt(e), A = et(null), D = dt;
1354
- async function R() {
1355
- await ct(A.value, {
1356
- nomeArquivo: e.nomeArquivoExport,
1357
- corFundo: o.value.bg !== "transparent" ? o.value.bg : null
1358
- }), p("exportado");
1359
- }
1360
- const w = M(() => `card-polar--${e.direcao}`), T = M(() => {
1361
- const d = xt(e.corDetalhes, e.data.length);
1362
- return e.data.map((l, n) => l.cor ?? d[n]);
1363
- }), J = M(() => ({
1364
- labels: e.data.map((d) => d.rotulo),
1361
+ setup(e, { emit: r }) {
1362
+ const t = e, n = r, { palette: a, cardStyle: u } = G(t), { formatar: c } = te(t), { cardRef: f, onExportar: C, iconeExportar: l } = K(t, a, n), d = F(() => `card-polar--${t.direcao}`), p = F(() => {
1363
+ const o = de(t.corDetalhes, t.data.length);
1364
+ return t.data.map((s, $) => s.cor ?? o[$]);
1365
+ }), g = F(() => ({
1366
+ labels: t.data.map((o) => o.rotulo),
1365
1367
  datasets: [
1366
1368
  {
1367
- data: e.data.map((d) => d.quantidade),
1368
- backgroundColor: T.value,
1369
- borderColor: T.value,
1369
+ data: t.data.map((o) => o.quantidade),
1370
+ backgroundColor: p.value,
1371
+ borderColor: p.value,
1370
1372
  borderWidth: 0,
1371
1373
  hoverOffset: 6
1372
1374
  }
1373
1375
  ]
1374
- }));
1375
- function O(d) {
1376
- const { chart: l, tooltip: n } = d, a = lt(l);
1377
- if (!a) return;
1378
- const r = gt(a);
1379
- if (n.opacity === 0) {
1380
- r.style.opacity = "0";
1381
- return;
1382
- }
1383
- const v = n.title || [], i = n.dataPoints && n.dataPoints[0], g = i ? T.value[i.dataIndex] : "#3B82F6", c = i ? $(i.parsed.r ?? i.parsed) : "", b = r.querySelector(".nc-tt__content");
1384
- b.innerHTML = `<div style="font-size:9px;font-weight:500;color:#94A3B8;letter-spacing:.04em;text-transform:uppercase;line-height:1;margin-bottom:4px;">${v.join(" ")}</div><div style="display:flex;align-items:center;gap:6px;"><span style="width:6px;height:6px;border-radius:999px;background:${g};box-shadow:0 0 0 2px ${j(g, 0.15)};flex:0 0 auto;"></span><span style="font-size:12px;font-weight:700;color:#0F172A;letter-spacing:-.01em;line-height:1.1;">${c}</span></div>`;
1385
- const { offsetLeft: h, offsetTop: V } = l.canvas;
1386
- r.style.opacity = "1", r.style.visibility = "hidden", r.style.left = "0px", r.style.top = "0px";
1387
- const q = r.offsetWidth, E = r.offsetHeight, C = 4, I = h + n.caretX, N = V + n.caretY, z = rt(I, q, a.clientWidth, C), H = N < E + 16 + C;
1388
- r.style.transform = H ? "translate(-50%, 16px)" : "translate(-50%, calc(-100% - 16px))";
1389
- const F = r.querySelector(".nc-tt__caret");
1390
- F && (H ? (F.style.bottom = "", F.style.top = "-5px", F.style.borderRight = "", F.style.borderBottom = "", F.style.borderLeft = "1px solid rgba(15,23,42,.06)", F.style.borderTop = "1px solid rgba(15,23,42,.06)") : (F.style.top = "", F.style.bottom = "-5px", F.style.borderLeft = "", F.style.borderTop = "", F.style.borderRight = "1px solid rgba(15,23,42,.06)", F.style.borderBottom = "1px solid rgba(15,23,42,.06)")), r.style.left = z + "px", r.style.top = N + "px", r.style.visibility = "visible";
1376
+ })), b = ye({
1377
+ corDe: (o) => p.value[o.dataIndex],
1378
+ valorDe: (o) => c(o.parsed.r ?? o.parsed),
1379
+ linhasExtrasDe: t.detalheTooltip ? (o) => t.detalheTooltip(t.data[o.dataIndex], o.dataIndex) : null
1380
+ }), m = _(null);
1381
+ function k(o) {
1382
+ n("itemClicado", o);
1391
1383
  }
1392
- function _(d) {
1393
- const l = e.data[d];
1394
- l && p("itemClicado", { item: l, index: d, cor: T.value[d] });
1395
- }
1396
- function Q(d, l) {
1397
- e.itensClicaveis && p("itemClicado", { item: d, index: l, cor: T.value[l] });
1398
- }
1399
- const Z = et(null), K = M(() => ({
1384
+ const M = F(() => ({
1400
1385
  responsive: !0,
1401
1386
  maintainAspectRatio: !1,
1402
1387
  layout: { padding: 4 },
1403
- onHover: (d, l, n) => {
1404
- const a = l.length ? l[0].index : null;
1405
- Z.value = a, n.canvas.style.cursor = e.itensClicaveis && l.length ? "pointer" : "default";
1388
+ onHover: (o, s, $) => {
1389
+ m.value = s.length ? s[0].index : null, $.canvas.style.cursor = t.itensClicaveis && s.length ? "pointer" : "default";
1406
1390
  },
1407
- onClick: (d, l) => {
1408
- !e.itensClicaveis || !l.length || _(l[0].index);
1391
+ onClick: (o, s) => {
1392
+ if (!t.itensClicaveis || !s.length) return;
1393
+ const $ = s[0].index, h = t.data[$];
1394
+ h && k({ item: h, index: $, cor: p.value[$] });
1409
1395
  },
1410
1396
  scales: {
1411
1397
  r: {
1412
1398
  beginAtZero: !0,
1413
1399
  ticks: { display: !1, backdropColor: "transparent" },
1414
1400
  grid: {
1415
- display: e.mostrarLinhasGrade,
1416
- color: j(o.value.muted, 0.18)
1401
+ display: t.mostrarLinhasGrade,
1402
+ color: D(a.value.muted, 0.18)
1417
1403
  },
1418
1404
  angleLines: {
1419
- display: e.mostrarLinhasGrade,
1420
- color: j(o.value.muted, 0.18)
1405
+ display: t.mostrarLinhasGrade,
1406
+ color: D(a.value.muted, 0.18)
1421
1407
  },
1422
1408
  pointLabels: { display: !1 }
1423
1409
  }
@@ -1426,202 +1412,133 @@ const dt = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
1426
1412
  legend: { display: !1 },
1427
1413
  tooltip: {
1428
1414
  enabled: !1,
1429
- external: O,
1415
+ external: b,
1430
1416
  callbacks: {
1431
- title: (d) => {
1432
- var l;
1433
- return ((l = d[0]) == null ? void 0 : l.label) ?? "";
1417
+ title: (o) => {
1418
+ var s;
1419
+ return ((s = o[0]) == null ? void 0 : s.label) ?? "";
1434
1420
  },
1435
- label: (d) => {
1436
- var l;
1437
- return $(((l = d.parsed) == null ? void 0 : l.r) ?? d.parsed);
1421
+ label: (o) => {
1422
+ var s;
1423
+ return c(((s = o.parsed) == null ? void 0 : s.r) ?? o.parsed);
1438
1424
  }
1439
1425
  }
1440
1426
  }
1441
1427
  }
1442
1428
  }));
1443
- function tt() {
1444
- p("botaoAcao");
1445
- }
1446
- return (d, l) => (u(), f("div", {
1429
+ return (o, s) => (v(), x("div", {
1447
1430
  ref_key: "cardRef",
1448
- ref: A,
1449
- class: ot(["card-polar p-4 flex flex-column", w.value]),
1450
- style: x(s(k))
1431
+ ref: f,
1432
+ class: J(["card-polar nc-p-4 nc-flex nc-flex-column", d.value]),
1433
+ style: q(y(u))
1451
1434
  }, [
1452
- S("div", Oe, [
1453
- d.$slots.legenda || t.legenda || d.$slots.sublegenda || t.sublegenda ? (u(), f("div", Xe, [
1454
- d.$slots.legenda || t.legenda ? (u(), f("div", {
1455
- key: 0,
1456
- class: "text-xs font-medium",
1457
- style: x({ color: s(o).text, opacity: 0.95 })
1458
- }, [
1459
- L(d.$slots, "legenda", {}, () => [
1460
- X(B(t.legenda), 1)
1461
- ], !0)
1462
- ], 4)) : y("", !0),
1463
- d.$slots.sublegenda || t.sublegenda ? (u(), f("div", {
1464
- key: 1,
1465
- class: "text-xs",
1466
- style: x({ color: s(o).muted })
1467
- }, [
1468
- L(d.$slots, "sublegenda", {}, () => [
1469
- X(B(t.sublegenda), 1)
1470
- ], !0)
1471
- ], 4)) : y("", !0)
1472
- ])) : y("", !0),
1473
- d.$slots.actions || t.botaoVisivel || t.exportar ? (u(), f("div", Ye, [
1474
- L(d.$slots, "actions", {}, () => [
1475
- t.botaoVisivel ? (u(), f("button", {
1476
- key: 0,
1477
- class: "nc-btn inline-flex align-items-center",
1478
- style: x({ color: s(o).text, borderColor: s(j)(s(o).text, 0.18) }),
1479
- onClick: tt
1480
- }, [
1481
- S("span", null, B(t.textoBotao), 1)
1482
- ], 4)) : y("", !0)
1483
- ], !0),
1484
- t.exportar ? (u(), f("button", {
1485
- key: 0,
1486
- type: "button",
1487
- class: "nc-exportar inline-flex align-items-center justify-content-center",
1488
- style: x({ color: s(o).muted, borderColor: s(j)(s(o).text, 0.18) }),
1489
- title: "Exportar como imagem",
1490
- "aria-label": "Exportar como imagem",
1491
- onClick: R,
1492
- innerHTML: s(D)
1493
- }, null, 12, Je)) : y("", !0)
1494
- ])) : y("", !0)
1495
- ]),
1496
- S("div", Qe, [
1497
- S("div", Ue, [
1498
- t.mostrarCabecalho ? (u(), f("div", {
1499
- key: 0,
1500
- class: "nc-tabela-cab flex align-items-center justify-content-between",
1501
- style: x({ color: s(o).muted, borderColor: s(j)(s(o).muted, 0.25) })
1502
- }, [
1503
- S("span", null, B(t.rotuloCategoria), 1),
1504
- S("span", Ge, B(t.rotuloQuantidade), 1)
1505
- ], 4)) : y("", !0),
1506
- (u(!0), f(bt, null, ht(t.data, (n, a) => (u(), f("div", {
1507
- key: a,
1508
- class: ot(["nc-tabela-linha flex align-items-center justify-content-between", { "nc-tabela-linha--clicavel": t.itensClicaveis, "nc-tabela-linha--ativa": Z.value === a }]),
1509
- style: x({
1510
- color: s(o).text,
1511
- cursor: t.itensClicaveis ? "pointer" : "default",
1512
- "--nc-linha-bg": s(j)(T.value[a], 0.05),
1513
- "--nc-linha-bg-forte": s(j)(T.value[a], 0.08)
1514
- }),
1515
- role: t.itensClicaveis ? "button" : null,
1516
- tabindex: t.itensClicaveis ? 0 : null,
1517
- onMouseenter: (r) => Z.value = a,
1518
- onMouseleave: l[0] || (l[0] = (r) => Z.value = null),
1519
- onFocus: (r) => Z.value = a,
1520
- onBlur: l[1] || (l[1] = (r) => Z.value = null),
1521
- onClick: (r) => Q(n, a),
1522
- onKeydown: [
1523
- yt(mt((r) => Q(n, a), ["prevent"]), ["enter"]),
1524
- yt(mt((r) => Q(n, a), ["prevent"]), ["space"])
1525
- ]
1526
- }, [
1527
- S("span", Ze, [
1528
- S("span", {
1529
- class: "nc-bolinha",
1530
- style: x({ background: T.value[a] })
1531
- }, null, 4),
1532
- S("span", null, B(n.rotulo), 1)
1533
- ]),
1534
- S("span", _e, B(s($)(n.quantidade)), 1)
1535
- ], 46, Ke))), 128))
1536
- ]),
1537
- S("div", to, [
1538
- S("div", eo, [
1539
- ft(st, {
1435
+ P(ee, {
1436
+ class: "card-polar__topo",
1437
+ legenda: o.legenda,
1438
+ sublegenda: o.sublegenda,
1439
+ palette: y(a),
1440
+ "texto-botao": o.textoBotao,
1441
+ "botao-visivel": o.botaoVisivel,
1442
+ exportar: o.exportar,
1443
+ onBotaoAcao: s[0] || (s[0] = ($) => n("botaoAcao")),
1444
+ onExportar: y(C)
1445
+ }, Y({ _: 2 }, [
1446
+ o.$slots.legenda ? {
1447
+ name: "legenda",
1448
+ fn: z(() => [
1449
+ S(o.$slots, "legenda", {}, void 0, !0)
1450
+ ]),
1451
+ key: "0"
1452
+ } : void 0,
1453
+ o.$slots.sublegenda ? {
1454
+ name: "sublegenda",
1455
+ fn: z(() => [
1456
+ S(o.$slots, "sublegenda", {}, void 0, !0)
1457
+ ]),
1458
+ key: "1"
1459
+ } : void 0,
1460
+ o.$slots.actions ? {
1461
+ name: "actions",
1462
+ fn: z(() => [
1463
+ S(o.$slots, "actions", {}, void 0, !0)
1464
+ ]),
1465
+ key: "2"
1466
+ } : void 0
1467
+ ]), 1032, ["legenda", "sublegenda", "palette", "texto-botao", "botao-visivel", "exportar", "onExportar"]),
1468
+ E("div", oa, [
1469
+ P(He, {
1470
+ data: e.data,
1471
+ "cores-aplicadas": p.value,
1472
+ palette: y(a),
1473
+ formatar: y(c),
1474
+ "rotulo-categoria": o.rotuloCategoria,
1475
+ "rotulo-quantidade": o.rotuloQuantidade,
1476
+ "mostrar-cabecalho": o.mostrarCabecalho,
1477
+ "itens-clicaveis": o.itensClicaveis,
1478
+ "tooltip-linha": o.tooltipLinha,
1479
+ "pad-ativa": "0.25rem",
1480
+ "hover-index": m.value,
1481
+ "onUpdate:hoverIndex": s[1] || (s[1] = ($) => m.value = $),
1482
+ onItemClicado: k
1483
+ }, null, 8, ["data", "cores-aplicadas", "palette", "formatar", "rotulo-categoria", "rotulo-quantidade", "mostrar-cabecalho", "itens-clicaveis", "tooltip-linha", "hover-index"]),
1484
+ E("div", na, [
1485
+ E("div", ra, [
1486
+ P(Q, {
1540
1487
  type: "polarArea",
1541
- data: J.value,
1542
- options: K.value,
1543
- height: t.height
1488
+ data: g.value,
1489
+ options: M.value,
1490
+ height: e.height
1544
1491
  }, null, 8, ["data", "options", "height"]),
1545
- d.$slots.titulo || t.titulo || d.$slots.descricao || t.descricao ? (u(), f("div", oo, [
1546
- d.$slots.titulo || t.titulo ? (u(), f("div", {
1492
+ o.$slots.titulo || o.titulo || o.$slots.descricao || o.descricao ? (v(), x("div", la, [
1493
+ o.$slots.titulo || o.titulo ? (v(), x("div", {
1547
1494
  key: 0,
1548
- class: "card-polar__centro-titulo m-0 text-3xl font-semibold",
1549
- style: x({ color: s(o).text, lineHeight: "33px", letterSpacing: "-1px" })
1495
+ class: "card-polar__centro-titulo nc-m-0 nc-text-3xl nc-font-semibold",
1496
+ style: q({ color: y(a).text, lineHeight: "33px", letterSpacing: "-1px" })
1550
1497
  }, [
1551
- L(d.$slots, "titulo", {}, () => [
1552
- X(B(t.titulo), 1)
1498
+ S(o.$slots, "titulo", {}, () => [
1499
+ j(I(o.titulo), 1)
1553
1500
  ], !0)
1554
- ], 4)) : y("", !0),
1555
- d.$slots.descricao || t.descricao ? (u(), f("div", {
1501
+ ], 4)) : B("", !0),
1502
+ o.$slots.descricao || o.descricao ? (v(), x("div", {
1556
1503
  key: 1,
1557
1504
  class: "card-polar__centro-desc",
1558
- style: x({ color: s(o).muted })
1505
+ style: q({ color: y(a).muted })
1559
1506
  }, [
1560
- L(d.$slots, "descricao", {}, () => [
1561
- X(B(t.descricao), 1)
1507
+ S(o.$slots, "descricao", {}, () => [
1508
+ j(I(o.descricao), 1)
1562
1509
  ], !0)
1563
- ], 4)) : y("", !0)
1564
- ])) : y("", !0)
1510
+ ], 4)) : B("", !0)
1511
+ ])) : B("", !0)
1565
1512
  ])
1566
1513
  ])
1567
1514
  ]),
1568
- d.$slots.footer ? (u(), f("div", ao, [
1569
- L(d.$slots, "footer", {}, void 0, !0)
1570
- ])) : y("", !0)
1515
+ o.$slots.footer ? (v(), x("div", sa, [
1516
+ S(o.$slots, "footer", {}, void 0, !0)
1517
+ ])) : B("", !0)
1571
1518
  ], 6));
1572
1519
  }
1573
- }, lo = /* @__PURE__ */ nt(no, [["__scopeId", "data-v-c384afa9"]]), ro = { class: "card-progresso__topo flex align-items-start justify-content-between gap-3" }, so = {
1520
+ }, ca = /* @__PURE__ */ W(ia, [["__scopeId", "data-v-9f63090f"]]), da = { class: "card-progresso__corpo nc-flex nc-align-items-center nc-flex-wrap" }, ua = {
1574
1521
  key: 0,
1575
- class: "nc-legendas-flex flex flex-column"
1576
- }, io = {
1577
- key: 1,
1578
- class: "nc-actions inline-flex align-items-center gap-2"
1579
- }, co = ["innerHTML"], uo = {
1580
- key: 0,
1581
- class: "card-progresso__titulos mt-3 mb-2 flex flex-column"
1582
- }, fo = { class: "card-progresso__corpo flex align-items-center flex-wrap" }, po = {
1583
- key: 0,
1584
- class: "card-progresso__chart-wrap flex align-items-center justify-content-center"
1585
- }, go = { class: "card-progresso__chart" }, yo = { class: "nc-centro flex flex-column align-items-center justify-content-center" }, mo = { class: "card-progresso__lista flex flex-column" }, bo = { class: "card-progresso__item-cab flex align-items-center justify-content-between" }, ho = {
1522
+ class: "card-progresso__chart-wrap nc-flex nc-align-items-center nc-justify-content-center"
1523
+ }, pa = { class: "card-progresso__chart" }, fa = { class: "nc-centro nc-flex nc-flex-column nc-align-items-center nc-justify-content-center" }, ga = { class: "card-progresso__lista nc-flex nc-flex-column" }, ma = { class: "card-progresso__item-cab nc-flex nc-align-items-center nc-justify-content-between" }, ha = {
1586
1524
  key: 0,
1587
- class: "card-progresso__item-valor inline-flex align-items-center gap-2"
1588
- }, xo = { key: 0 }, vo = {
1525
+ class: "card-progresso__item-valor nc-inline-flex nc-align-items-center nc-gap-2"
1526
+ }, ya = { key: 0 }, va = {
1589
1527
  key: 1,
1590
- class: "card-progresso__footer mt-3"
1591
- }, $o = {
1528
+ class: "card-progresso__footer nc-mt-3"
1529
+ }, ba = {
1592
1530
  __name: "CardProgresso",
1593
1531
  props: {
1594
- legenda: { type: String, default: null },
1595
- sublegenda: { type: String, default: null },
1596
- titulo: { type: String, default: null },
1597
- descricao: { type: String, default: null },
1598
- tema: { type: String, default: "light" },
1599
- corFundo: { type: String, default: null },
1600
- corTexto: { type: String, default: null },
1601
- corBorda: { type: String, default: "#EAE8E8" },
1602
- borderRadius: { type: [String, Number], default: "0.75rem" },
1603
- sombra: { type: String, default: "0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06)" },
1532
+ ...Z({ nomeArquivoExport: "card-progresso.png" }),
1533
+ ...ae(),
1534
+ ...oe("top"),
1604
1535
  corDetalhes: { type: String, default: "#3B82F6" },
1605
1536
  corExcesso: { type: String, default: "#EF4444" },
1606
- textoBotao: { type: String, default: "Ver mais" },
1607
- botaoVisivel: { type: Boolean, default: !1 },
1608
- direcao: {
1609
- type: String,
1610
- default: "top",
1611
- validator: (t) => ["top", "bottom", "left", "right"].includes(t)
1612
- },
1613
1537
  formato: {
1614
1538
  type: String,
1615
1539
  default: "linear",
1616
- validator: (t) => ["linear", "circular"].includes(t)
1540
+ validator: (e) => ["linear", "circular"].includes(e)
1617
1541
  },
1618
- tipoValor: {
1619
- type: String,
1620
- default: "numero",
1621
- validator: (t) => ["numero", "moeda", "percentual"].includes(t)
1622
- },
1623
- locale: { type: String, default: "pt-BR" },
1624
- moeda: { type: String, default: "BRL" },
1625
1542
  data: {
1626
1543
  type: Array,
1627
1544
  default: () => [
@@ -1637,45 +1554,34 @@ const dt = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
1637
1554
  alturaBarra: { type: [String, Number], default: 8 },
1638
1555
  raioBarra: { type: [String, Number], default: "999px" },
1639
1556
  height: { type: [String, Number], default: 220 },
1640
- cutout: { type: [String, Number], default: "78%" },
1641
- exportar: { type: Boolean, default: !1 },
1642
- nomeArquivoExport: { type: String, default: "card-progresso.png" }
1557
+ cutout: { type: [String, Number], default: "78%" }
1643
1558
  },
1644
1559
  emits: ["botaoAcao", "exportado"],
1645
- setup(t, { emit: m }) {
1646
- const e = t, p = m, { palette: o, cardStyle: k } = it(e), { formatar: $ } = pt(e), A = et(null), D = dt;
1647
- async function R() {
1648
- await ct(A.value, {
1649
- nomeArquivo: e.nomeArquivoExport,
1650
- corFundo: o.value.bg !== "transparent" ? o.value.bg : null
1651
- }), p("exportado");
1652
- }
1653
- const w = M(() => `card-progresso--${e.direcao}`), T = M(() => {
1654
- const n = xt(e.corDetalhes, e.data.length);
1655
- return e.data.map((a, r) => {
1656
- const v = Number(a.meta ?? e.metaPadrao) || 0, i = Number(a.quantidade) || 0, g = a.cor ?? n[r], c = a.modo === "reducao";
1657
- let b;
1658
- if (c) {
1659
- const h = Number(a.valor_referencia) || 0, V = h - v;
1660
- b = V > 0 ? Math.max(0, Math.min(100, (h - i) / V * 100)) : 0;
1560
+ setup(e, { emit: r }) {
1561
+ const t = e, n = r, { palette: a, cardStyle: u } = G(t), { formatar: c } = te(t), { cardRef: f, onExportar: C, iconeExportar: l } = K(t, a, n), d = F(() => `card-progresso--${t.direcao}`), p = F(() => {
1562
+ const h = de(t.corDetalhes, t.data.length);
1563
+ return t.data.map((A, i) => {
1564
+ const R = Number(A.meta ?? t.metaPadrao) || 0, T = Number(A.quantidade) || 0, w = A.cor ?? h[i], L = A.modo === "reducao";
1565
+ let H;
1566
+ if (L) {
1567
+ const N = Number(A.valor_referencia) || 0, V = N - R;
1568
+ H = V > 0 ? Math.max(0, Math.min(100, (N - T) / V * 100)) : 0;
1661
1569
  } else
1662
- b = v > 0 ? Math.max(0, Math.min(100, i / v * 100)) : 0;
1663
- return { rotulo: a.rotulo, quantidade: i, meta: v, valorReferencia: a.valor_referencia ?? null, cor: g, percentual: b, reducao: c };
1570
+ H = R > 0 ? Math.max(0, Math.min(100, T / R * 100)) : 0;
1571
+ return { rotulo: A.rotulo, quantidade: T, meta: R, valorReferencia: A.valor_referencia ?? null, cor: w, percentual: H, reducao: L };
1664
1572
  });
1665
- }), J = M(
1666
- () => typeof e.alturaBarra == "number" ? `${e.alturaBarra}px` : e.alturaBarra
1667
- ), O = M(
1668
- () => typeof e.raioBarra == "number" ? `${e.raioBarra}px` : e.raioBarra
1669
- );
1670
- M(() => T.value.reduce((n, a) => n + a.quantidade, 0)), M(() => T.value.reduce((n, a) => n + a.meta, 0));
1671
- const _ = M(() => T.value.length ? T.value.reduce((n, a) => n + a.percentual, 0) / T.value.length : 0), Q = M(() => T.value.every((n) => n.reducao)), Z = M(() => {
1672
- const n = Math.min(_.value, 100), a = Math.max(0, 100 - n), r = Q.value ? e.corExcesso : e.corDetalhes;
1573
+ }), g = F(
1574
+ () => typeof t.alturaBarra == "number" ? `${t.alturaBarra}px` : t.alturaBarra
1575
+ ), b = F(
1576
+ () => typeof t.raioBarra == "number" ? `${t.raioBarra}px` : t.raioBarra
1577
+ ), m = F(() => p.value.length ? p.value.reduce((h, A) => h + A.percentual, 0) / p.value.length : 0), k = F(() => p.value.every((h) => h.reducao)), M = F(() => {
1578
+ const h = Math.min(m.value, 100), A = Math.max(0, 100 - h), i = k.value ? t.corExcesso : t.corDetalhes;
1673
1579
  return {
1674
1580
  labels: ["Progresso", "Restante"],
1675
1581
  datasets: [
1676
1582
  {
1677
- data: [n, a],
1678
- backgroundColor: [r, j(o.value.muted, 0.15)],
1583
+ data: [h, A],
1584
+ backgroundColor: [i, D(a.value.muted, 0.15)],
1679
1585
  borderWidth: 0,
1680
1586
  borderColor: "transparent",
1681
1587
  hoverOffset: 0,
@@ -1683,10 +1589,10 @@ const dt = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
1683
1589
  }
1684
1590
  ]
1685
1591
  };
1686
- }), K = M(() => ({
1592
+ }), o = F(() => ({
1687
1593
  responsive: !0,
1688
1594
  maintainAspectRatio: !1,
1689
- cutout: e.cutout,
1595
+ cutout: t.cutout,
1690
1596
  rotation: -90,
1691
1597
  circumference: 360,
1692
1598
  layout: { padding: 4 },
@@ -1695,328 +1601,314 @@ const dt = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewB
1695
1601
  tooltip: { enabled: !1 }
1696
1602
  }
1697
1603
  }));
1698
- function tt(n) {
1699
- const a = A.value;
1700
- if (!a) return;
1701
- getComputedStyle(a).position === "static" && (a.style.position = "relative");
1702
- const r = gt(a);
1703
- r.style.whiteSpace = "normal";
1704
- const v = r.querySelector(".nc-tt__content");
1705
- v.innerHTML = '<span style="font-size:11px;color:#0F172A;display:block;max-width:140px;line-height:1.5;"><strong>Modo Redução</strong>: o progresso aumenta conforme o valor diminui</span>', r.style.opacity = "1", r.style.visibility = "hidden", r.style.left = "0px", r.style.top = "0px", r.offsetWidth;
1706
- const i = n.currentTarget.getBoundingClientRect(), g = a.getBoundingClientRect(), c = i.left - g.left + i.width / 2, b = i.top - g.top;
1707
- r.style.transform = "translate(-50%, calc(-100% - 8px))";
1708
- const h = r.querySelector(".nc-tt__caret");
1709
- h && Object.assign(h.style, {
1604
+ function s(h) {
1605
+ const A = f.value;
1606
+ if (!A) return;
1607
+ getComputedStyle(A).position === "static" && (A.style.position = "relative");
1608
+ const i = pe(A);
1609
+ i.style.whiteSpace = "normal";
1610
+ const R = i.querySelector(".nc-tt__content");
1611
+ R.innerHTML = '<span style="font-size:11px;color:#0F172A;display:block;max-width:140px;line-height:1.5;"><strong>Modo Redução</strong>: o progresso aumenta conforme o valor diminui</span>', i.style.opacity = "1", i.style.visibility = "hidden", i.style.left = "0px", i.style.top = "0px";
1612
+ const T = h.currentTarget.getBoundingClientRect(), w = A.getBoundingClientRect(), L = T.left - w.left + T.width / 2, H = T.top - w.top;
1613
+ i.style.transform = "translate(-50%, calc(-100% - 8px))";
1614
+ const N = i.querySelector(".nc-tt__caret");
1615
+ N && Object.assign(N.style, {
1710
1616
  top: "",
1711
1617
  bottom: "-5px",
1712
1618
  borderLeft: "",
1713
1619
  borderTop: "",
1714
1620
  borderRight: "1px solid rgba(15,23,42,.06)",
1715
1621
  borderBottom: "1px solid rgba(15,23,42,.06)"
1716
- }), r.style.left = c + "px", r.style.top = b + "px", r.style.visibility = "visible";
1622
+ }), i.style.left = L + "px", i.style.top = H + "px", i.style.visibility = "visible";
1717
1623
  }
1718
- function d() {
1719
- var a;
1720
- const n = (a = A.value) == null ? void 0 : a.querySelector(".nc-tt");
1721
- n && (n.style.opacity = "0");
1722
- }
1723
- function l() {
1724
- p("botaoAcao");
1624
+ function $() {
1625
+ var A;
1626
+ const h = (A = f.value) == null ? void 0 : A.querySelector(".nc-tt");
1627
+ h && (h.style.opacity = "0");
1725
1628
  }
1726
- return (n, a) => (u(), f("div", {
1629
+ return (h, A) => (v(), x("div", {
1727
1630
  ref_key: "cardRef",
1728
- ref: A,
1729
- class: ot(["card-progresso p-4 flex flex-column", w.value]),
1730
- style: x(s(k))
1631
+ ref: f,
1632
+ class: J(["card-progresso nc-p-4 nc-flex nc-flex-column", d.value]),
1633
+ style: q(y(u))
1731
1634
  }, [
1732
- S("div", ro, [
1733
- n.$slots.legenda || t.legenda || n.$slots.sublegenda || t.sublegenda ? (u(), f("div", so, [
1734
- n.$slots.legenda || t.legenda ? (u(), f("div", {
1735
- key: 0,
1736
- class: "text-xs font-medium",
1737
- style: x({ color: s(o).text, opacity: 0.95 })
1738
- }, [
1739
- L(n.$slots, "legenda", {}, () => [
1740
- X(B(t.legenda), 1)
1741
- ], !0)
1742
- ], 4)) : y("", !0),
1743
- n.$slots.sublegenda || t.sublegenda ? (u(), f("div", {
1744
- key: 1,
1745
- class: "text-xs",
1746
- style: x({ color: s(o).muted })
1747
- }, [
1748
- L(n.$slots, "sublegenda", {}, () => [
1749
- X(B(t.sublegenda), 1)
1750
- ], !0)
1751
- ], 4)) : y("", !0)
1752
- ])) : y("", !0),
1753
- n.$slots.actions || t.botaoVisivel || t.exportar ? (u(), f("div", io, [
1754
- L(n.$slots, "actions", {}, () => [
1755
- t.botaoVisivel ? (u(), f("button", {
1756
- key: 0,
1757
- class: "nc-btn inline-flex align-items-center",
1758
- style: x({ color: s(o).text, borderColor: s(j)(s(o).text, 0.18) }),
1759
- onClick: l
1760
- }, [
1761
- S("span", null, B(t.textoBotao), 1)
1762
- ], 4)) : y("", !0)
1763
- ], !0),
1764
- t.exportar ? (u(), f("button", {
1765
- key: 0,
1766
- type: "button",
1767
- class: "nc-exportar inline-flex align-items-center justify-content-center",
1768
- style: x({ color: s(o).muted, borderColor: s(j)(s(o).text, 0.18) }),
1769
- title: "Exportar como imagem",
1770
- "aria-label": "Exportar como imagem",
1771
- onClick: R,
1772
- innerHTML: s(D)
1773
- }, null, 12, co)) : y("", !0)
1774
- ])) : y("", !0)
1775
- ]),
1776
- n.$slots.titulo || t.titulo || n.$slots.descricao || t.descricao ? (u(), f("div", uo, [
1777
- n.$slots.titulo || t.titulo ? (u(), f("div", {
1778
- key: 0,
1779
- class: "m-0 text-3xl font-semibold",
1780
- style: x({ color: s(o).text, lineHeight: "33px", letterSpacing: "-1px" })
1781
- }, [
1782
- L(n.$slots, "titulo", {}, () => [
1783
- X(B(t.titulo), 1)
1784
- ], !0)
1785
- ], 4)) : y("", !0),
1786
- n.$slots.descricao || t.descricao ? (u(), f("div", {
1787
- key: 1,
1788
- class: "text-sm mt-1",
1789
- style: x({ color: s(o).muted })
1790
- }, [
1791
- L(n.$slots, "descricao", {}, () => [
1792
- X(B(t.descricao), 1)
1793
- ], !0)
1794
- ], 4)) : y("", !0)
1795
- ])) : y("", !0),
1796
- S("div", fo, [
1797
- t.formato === "circular" ? (u(), f("div", po, [
1798
- S("div", go, [
1799
- ft(st, {
1635
+ P(ee, {
1636
+ class: "card-progresso__topo",
1637
+ legenda: h.legenda,
1638
+ sublegenda: h.sublegenda,
1639
+ palette: y(a),
1640
+ "texto-botao": h.textoBotao,
1641
+ "botao-visivel": h.botaoVisivel,
1642
+ exportar: h.exportar,
1643
+ onBotaoAcao: A[0] || (A[0] = (i) => n("botaoAcao")),
1644
+ onExportar: y(C)
1645
+ }, Y({ _: 2 }, [
1646
+ h.$slots.legenda ? {
1647
+ name: "legenda",
1648
+ fn: z(() => [
1649
+ S(h.$slots, "legenda", {}, void 0, !0)
1650
+ ]),
1651
+ key: "0"
1652
+ } : void 0,
1653
+ h.$slots.sublegenda ? {
1654
+ name: "sublegenda",
1655
+ fn: z(() => [
1656
+ S(h.$slots, "sublegenda", {}, void 0, !0)
1657
+ ]),
1658
+ key: "1"
1659
+ } : void 0,
1660
+ h.$slots.actions ? {
1661
+ name: "actions",
1662
+ fn: z(() => [
1663
+ S(h.$slots, "actions", {}, void 0, !0)
1664
+ ]),
1665
+ key: "2"
1666
+ } : void 0
1667
+ ]), 1032, ["legenda", "sublegenda", "palette", "texto-botao", "botao-visivel", "exportar", "onExportar"]),
1668
+ h.$slots.titulo || h.titulo || h.$slots.descricao || h.descricao ? (v(), re(ue, {
1669
+ key: 0,
1670
+ class: "card-progresso__titulos nc-mt-3 nc-mb-2",
1671
+ titulo: h.titulo,
1672
+ descricao: h.descricao,
1673
+ palette: y(a)
1674
+ }, Y({ _: 2 }, [
1675
+ h.$slots.titulo ? {
1676
+ name: "titulo",
1677
+ fn: z(() => [
1678
+ S(h.$slots, "titulo", {}, void 0, !0)
1679
+ ]),
1680
+ key: "0"
1681
+ } : void 0,
1682
+ h.$slots.descricao ? {
1683
+ name: "descricao",
1684
+ fn: z(() => [
1685
+ S(h.$slots, "descricao", {}, void 0, !0)
1686
+ ]),
1687
+ key: "1"
1688
+ } : void 0
1689
+ ]), 1032, ["titulo", "descricao", "palette"])) : B("", !0),
1690
+ E("div", da, [
1691
+ e.formato === "circular" ? (v(), x("div", ua, [
1692
+ E("div", pa, [
1693
+ P(Q, {
1800
1694
  type: "doughnut",
1801
- data: Z.value,
1802
- options: K.value,
1803
- height: t.height
1695
+ data: M.value,
1696
+ options: o.value,
1697
+ height: e.height
1804
1698
  }, null, 8, ["data", "options", "height"]),
1805
- S("div", yo, [
1806
- S("div", {
1699
+ E("div", fa, [
1700
+ E("div", {
1807
1701
  class: "nc-centro-titulo",
1808
- style: x({ color: Q.value ? e.corExcesso : s(o).text })
1809
- }, B(Math.round(_.value)) + "% ", 5)
1702
+ style: q({ color: k.value ? t.corExcesso : y(a).text })
1703
+ }, I(Math.round(m.value)) + "% ", 5)
1810
1704
  ])
1811
1705
  ])
1812
- ])) : y("", !0),
1813
- S("div", mo, [
1814
- (u(!0), f(bt, null, ht(T.value, (r, v) => (u(), f("div", {
1815
- key: v,
1816
- class: "card-progresso__item flex flex-column"
1706
+ ])) : B("", !0),
1707
+ E("div", ga, [
1708
+ (v(!0), x(Me, null, De(p.value, (i, R) => (v(), x("div", {
1709
+ key: R,
1710
+ class: "card-progresso__item nc-flex nc-flex-column"
1817
1711
  }, [
1818
- S("div", bo, [
1819
- S("span", {
1820
- class: "card-progresso__item-rotulo inline-flex align-items-center gap-2",
1821
- style: x({ color: s(o).text })
1712
+ E("div", ma, [
1713
+ E("span", {
1714
+ class: "card-progresso__item-rotulo nc-inline-flex nc-align-items-center nc-gap-2",
1715
+ style: q({ color: y(a).text })
1822
1716
  }, [
1823
- S("span", {
1717
+ E("span", {
1824
1718
  class: "nc-bolinha",
1825
- style: x({ background: r.cor })
1719
+ style: q({ background: i.cor })
1826
1720
  }, null, 4),
1827
- S("span", null, B(r.rotulo), 1),
1828
- r.reducao ? (u(), f("span", {
1721
+ E("span", null, I(i.rotulo), 1),
1722
+ i.reducao ? (v(), x("span", {
1829
1723
  key: 0,
1830
1724
  class: "card-progresso__item-modo",
1831
- style: x({ color: s(o).muted }),
1832
- onMouseenter: tt,
1833
- onMouseleave: d
1834
- }, "↓", 36)) : y("", !0)
1725
+ style: q({ color: y(a).muted }),
1726
+ onMouseenter: s,
1727
+ onMouseleave: $
1728
+ }, "↓", 36)) : B("", !0)
1835
1729
  ], 4),
1836
- t.mostrarValor || t.mostrarPercentual ? (u(), f("span", ho, [
1837
- t.mostrarValor ? (u(), f("span", {
1730
+ e.mostrarValor || e.mostrarPercentual ? (v(), x("span", ha, [
1731
+ e.mostrarValor ? (v(), x("span", {
1838
1732
  key: 0,
1839
1733
  class: "card-progresso__item-nums",
1840
- style: x({ color: s(o).muted })
1734
+ style: q({ color: y(a).muted })
1841
1735
  }, [
1842
- X(B(s($)(r.quantidade)), 1),
1843
- r.meta ? (u(), f("span", xo, " / " + B(s($)(r.meta)), 1)) : y("", !0)
1844
- ], 4)) : y("", !0),
1845
- t.mostrarPercentual ? (u(), f("span", {
1736
+ j(I(y(c)(i.quantidade)), 1),
1737
+ i.meta ? (v(), x("span", ya, " / " + I(y(c)(i.meta)), 1)) : B("", !0)
1738
+ ], 4)) : B("", !0),
1739
+ e.mostrarPercentual ? (v(), x("span", {
1846
1740
  key: 1,
1847
1741
  class: "card-progresso__item-pct",
1848
- style: x({ background: s(j)(r.cor, 0.12), color: r.cor })
1849
- }, B(Math.round(r.percentual)) + "% ", 5)) : y("", !0)
1850
- ])) : y("", !0)
1742
+ style: q({ background: y(D)(i.cor, 0.12), color: i.cor })
1743
+ }, I(Math.round(i.percentual)) + "% ", 5)) : B("", !0)
1744
+ ])) : B("", !0)
1851
1745
  ]),
1852
- S("div", {
1853
- class: "card-progresso__trilha w-full",
1854
- style: x({
1855
- height: J.value,
1856
- borderRadius: O.value,
1857
- background: r.reducao ? s(j)(e.corExcesso, 0.18) : s(j)(s(o).muted, 0.15)
1746
+ E("div", {
1747
+ class: "card-progresso__trilha nc-w-full",
1748
+ style: q({
1749
+ height: g.value,
1750
+ borderRadius: b.value,
1751
+ background: i.reducao ? y(D)(t.corExcesso, 0.18) : y(D)(y(a).muted, 0.15)
1858
1752
  })
1859
1753
  }, [
1860
- S("div", {
1754
+ E("div", {
1861
1755
  class: "card-progresso__preenchimento",
1862
- style: x({ width: r.percentual + "%", background: r.cor, borderRadius: O.value })
1756
+ style: q({ width: i.percentual + "%", background: i.cor, borderRadius: b.value })
1863
1757
  }, null, 4)
1864
1758
  ], 4)
1865
1759
  ]))), 128))
1866
1760
  ])
1867
1761
  ]),
1868
- n.$slots.footer ? (u(), f("div", vo, [
1869
- L(n.$slots, "footer", {}, void 0, !0)
1870
- ])) : y("", !0)
1762
+ h.$slots.footer ? (v(), x("div", va, [
1763
+ S(h.$slots, "footer", {}, void 0, !0)
1764
+ ])) : B("", !0)
1871
1765
  ], 6));
1872
1766
  }
1873
- }, So = /* @__PURE__ */ nt($o, [["__scopeId", "data-v-f738fbcc"]]), Co = {
1767
+ }, xa = /* @__PURE__ */ W(ba, [["__scopeId", "data-v-8002d271"]]), $a = {
1874
1768
  key: 0,
1875
1769
  class: "card-base__topo"
1876
- }, ko = ["innerHTML"], Bo = { class: "card-base__legendas flex flex-column" }, Ao = {
1770
+ }, Ca = ["innerHTML"], ka = { class: "card-base__legendas nc-flex nc-flex-column" }, Sa = {
1877
1771
  key: 1,
1878
- class: "card-base__titulos flex flex-column"
1879
- }, wo = {
1772
+ class: "card-base__titulos nc-flex nc-flex-column"
1773
+ }, Aa = {
1880
1774
  key: 2,
1881
- class: "card-base__acao flex"
1882
- }, Ro = {
1775
+ class: "card-base__acao nc-flex"
1776
+ }, Ba = {
1883
1777
  key: 3,
1884
1778
  class: "card-base__footer"
1885
- }, To = {
1779
+ }, Ra = {
1886
1780
  __name: "CardBase",
1887
1781
  props: {
1888
- legenda: { type: String, default: null },
1889
- sublegenda: { type: String, default: null },
1890
- titulo: { type: String, default: null },
1891
- descricao: { type: String, default: null },
1892
- tema: { type: String, default: "light" },
1893
- corFundo: { type: String, default: null },
1894
- corTexto: { type: String, default: null },
1895
- corBorda: { type: String, default: "#EAE8E8" },
1896
- borderRadius: { type: [String, Number], default: "0.75rem" },
1897
- sombra: { type: String, default: "none" },
1898
- textoBotao: { type: String, default: "Ver Todos" },
1899
- botaoVisivel: { type: Boolean, default: !0 },
1782
+ ...Z({
1783
+ sombra: "none",
1784
+ textoBotao: "Ver Todos",
1785
+ botaoVisivel: !0,
1786
+ nomeArquivoExport: "card-base.png"
1787
+ }),
1900
1788
  alinhamento: {
1901
1789
  type: String,
1902
1790
  default: "left",
1903
- validator: (t) => ["left", "center", "right"].includes(t)
1904
- },
1905
- exportar: { type: Boolean, default: !1 },
1906
- nomeArquivoExport: { type: String, default: "card-base.png" }
1791
+ validator: (e) => ["left", "center", "right"].includes(e)
1792
+ }
1907
1793
  },
1908
1794
  emits: ["botaoAcao", "exportado"],
1909
- setup(t, { emit: m }) {
1910
- const e = t, p = m, { palette: o, cardStyle: k } = it(e), $ = et(null), A = dt;
1911
- function D() {
1912
- p("botaoAcao");
1913
- }
1914
- async function R() {
1915
- await ct($.value, {
1916
- nomeArquivo: e.nomeArquivoExport,
1917
- corFundo: o.value.bg !== "transparent" ? o.value.bg : null
1918
- }), p("exportado");
1795
+ setup(e, { emit: r }) {
1796
+ const t = e, n = r, { palette: a, cardStyle: u } = G(t), { cardRef: c, onExportar: f, iconeExportar: C } = K(t, a, n);
1797
+ function l() {
1798
+ n("botaoAcao");
1919
1799
  }
1920
- return (w, T) => (u(), f("div", {
1800
+ return (d, p) => (v(), x("div", {
1921
1801
  ref_key: "cardRef",
1922
- ref: $,
1923
- class: ot(["card-base flex flex-column", `card-base--${t.alinhamento}`]),
1924
- style: x(s(k))
1802
+ ref: c,
1803
+ class: J(["card-base nc-flex nc-flex-column", `card-base--${e.alinhamento}`]),
1804
+ style: q(y(u))
1925
1805
  }, [
1926
- t.exportar ? (u(), f("div", Co, [
1927
- S("button", {
1806
+ d.exportar ? (v(), x("div", $a, [
1807
+ E("button", {
1928
1808
  type: "button",
1929
- class: "nc-exportar card-base__exportar inline-flex align-items-center justify-content-center",
1930
- style: x({ color: s(o).muted, borderColor: s(j)(s(o).text === "inherit" ? "#0F172A" : s(o).text, 0.18) }),
1809
+ class: "nc-exportar card-base__exportar nc-inline-flex nc-align-items-center nc-justify-content-center",
1810
+ style: q({ color: y(a).muted, borderColor: y(D)(y(a).text === "inherit" ? "#0F172A" : y(a).text, 0.18) }),
1931
1811
  title: "Exportar como imagem",
1932
1812
  "aria-label": "Exportar como imagem",
1933
- onClick: R,
1934
- innerHTML: s(A)
1935
- }, null, 12, ko)
1936
- ])) : y("", !0),
1937
- S("div", Bo, [
1938
- w.$slots.legenda || t.legenda ? (u(), f("div", {
1813
+ onClick: p[0] || (p[0] = (...g) => y(f) && y(f)(...g)),
1814
+ innerHTML: y(C)
1815
+ }, null, 12, Ca)
1816
+ ])) : B("", !0),
1817
+ E("div", ka, [
1818
+ d.$slots.legenda || d.legenda ? (v(), x("div", {
1939
1819
  key: 0,
1940
- class: "card-base__legenda font-medium text-xs",
1941
- style: x({ color: s(o).text })
1820
+ class: "card-base__legenda nc-font-medium nc-text-xs",
1821
+ style: q({ color: y(a).text })
1942
1822
  }, [
1943
- L(w.$slots, "legenda", {}, () => [
1944
- X(B(t.legenda), 1)
1823
+ S(d.$slots, "legenda", {}, () => [
1824
+ j(I(d.legenda), 1)
1945
1825
  ], !0)
1946
- ], 4)) : y("", !0),
1947
- w.$slots.sublegenda || t.sublegenda ? (u(), f("div", {
1826
+ ], 4)) : B("", !0),
1827
+ d.$slots.sublegenda || d.sublegenda ? (v(), x("div", {
1948
1828
  key: 1,
1949
- class: "card-base__sublegenda text-xs",
1950
- style: x({ color: s(o).muted })
1829
+ class: "card-base__sublegenda nc-text-xs",
1830
+ style: q({ color: y(a).muted })
1951
1831
  }, [
1952
- L(w.$slots, "sublegenda", {}, () => [
1953
- X(B(t.sublegenda), 1)
1832
+ S(d.$slots, "sublegenda", {}, () => [
1833
+ j(I(d.sublegenda), 1)
1954
1834
  ], !0)
1955
- ], 4)) : y("", !0)
1835
+ ], 4)) : B("", !0)
1956
1836
  ]),
1957
- w.$slots.titulo || t.titulo || w.$slots.descricao || t.descricao ? (u(), f("div", Ao, [
1958
- w.$slots.titulo || t.titulo ? (u(), f("div", {
1837
+ d.$slots.titulo || d.titulo || d.$slots.descricao || d.descricao ? (v(), x("div", Sa, [
1838
+ d.$slots.titulo || d.titulo ? (v(), x("div", {
1959
1839
  key: 0,
1960
- class: "card-base__titulo m-0 text-3xl font-semibold",
1961
- style: x({ color: s(o).text, lineHeight: "33px", letterSpacing: "-1px" })
1840
+ class: "card-base__titulo nc-m-0 nc-text-3xl nc-font-semibold",
1841
+ style: q({ color: y(a).text, lineHeight: "33px", letterSpacing: "-1px" })
1962
1842
  }, [
1963
- L(w.$slots, "titulo", {}, () => [
1964
- X(B(t.titulo), 1)
1843
+ S(d.$slots, "titulo", {}, () => [
1844
+ j(I(d.titulo), 1)
1965
1845
  ], !0)
1966
- ], 4)) : y("", !0),
1967
- w.$slots.descricao || t.descricao ? (u(), f("div", {
1846
+ ], 4)) : B("", !0),
1847
+ d.$slots.descricao || d.descricao ? (v(), x("div", {
1968
1848
  key: 1,
1969
- class: "text-sm",
1970
- style: x({ color: s(o).muted })
1849
+ class: "nc-text-sm",
1850
+ style: q({ color: y(a).muted })
1971
1851
  }, [
1972
- L(w.$slots, "descricao", {}, () => [
1973
- X(B(t.descricao), 1)
1852
+ S(d.$slots, "descricao", {}, () => [
1853
+ j(I(d.descricao), 1)
1974
1854
  ], !0)
1975
- ], 4)) : y("", !0)
1976
- ])) : y("", !0),
1977
- w.$slots.acao || t.botaoVisivel ? (u(), f("div", wo, [
1978
- L(w.$slots, "acao", {}, () => [
1979
- t.botaoVisivel ? (u(), f("button", {
1855
+ ], 4)) : B("", !0)
1856
+ ])) : B("", !0),
1857
+ d.$slots.acao || d.botaoVisivel ? (v(), x("div", Aa, [
1858
+ S(d.$slots, "acao", {}, () => [
1859
+ d.botaoVisivel ? (v(), x("button", {
1980
1860
  key: 0,
1981
1861
  type: "button",
1982
- class: "card-base__link text-xs inline-flex align-items-center",
1983
- style: x({ color: s(o).text }),
1984
- onClick: D
1862
+ class: "card-base__link nc-text-xs nc-inline-flex nc-align-items-center",
1863
+ style: q({ color: y(a).text }),
1864
+ onClick: l
1985
1865
  }, [
1986
- S("span", null, B(t.textoBotao), 1),
1987
- T[0] || (T[0] = S("span", {
1866
+ E("span", null, I(d.textoBotao), 1),
1867
+ p[1] || (p[1] = E("span", {
1988
1868
  class: "card-base__chevron",
1989
1869
  "aria-hidden": "true"
1990
1870
  }, "›", -1))
1991
- ], 4)) : y("", !0)
1871
+ ], 4)) : B("", !0)
1992
1872
  ], !0)
1993
- ])) : y("", !0),
1994
- w.$slots.footer ? (u(), f("div", Ro, [
1995
- L(w.$slots, "footer", {}, void 0, !0)
1996
- ])) : y("", !0)
1873
+ ])) : B("", !0),
1874
+ d.$slots.footer ? (v(), x("div", Ba, [
1875
+ S(d.$slots, "footer", {}, void 0, !0)
1876
+ ])) : B("", !0)
1997
1877
  ], 6));
1998
1878
  }
1999
- }, qo = /* @__PURE__ */ nt(To, [["__scopeId", "data-v-d1b84008"]]), Lo = {
2000
- install(t) {
2001
- t.component("ChartBase", st), t.component("CardBase", qo), t.component("CardLinhas", be), t.component("CardPizza", Le), t.component("CardBarra", We), t.component("CardPolar", lo), t.component("CardProgresso", So);
1879
+ }, qa = /* @__PURE__ */ W(Ra, [["__scopeId", "data-v-6fe4b0aa"]]), Ea = {
1880
+ install(e) {
1881
+ e.component("ChartBase", Q), e.component("CardBase", qa), e.component("CardLinhas", Ot), e.component("CardPizza", Kt), e.component("CardBarra", aa), e.component("CardPolar", ca), e.component("CardProgresso", xa);
2002
1882
  }
2003
1883
  };
2004
1884
  export {
2005
- We as CardBarra,
2006
- qo as CardBase,
2007
- be as CardLinhas,
2008
- Le as CardPizza,
2009
- lo as CardPolar,
2010
- So as CardProgresso,
2011
- st as ChartBase,
2012
- dt as ICONE_EXPORTAR_SVG,
2013
- rt as clampHorizontal,
2014
- gt as criarTooltipEl,
2015
- Lo as default,
2016
- ct as exportarElementoComoImagem,
2017
- xt as gerarPaleta,
2018
- lt as prepararTooltipParent,
2019
- j as toRgba,
2020
- pt as useFormatadorValor,
2021
- it as useTema
1885
+ aa as CardBarra,
1886
+ qa as CardBase,
1887
+ Ot as CardLinhas,
1888
+ Kt as CardPizza,
1889
+ ca as CardPolar,
1890
+ xa as CardProgresso,
1891
+ Q as ChartBase,
1892
+ Ne as ICONE_EXPORTAR_SVG,
1893
+ It as SOMBRA_PADRAO,
1894
+ je as aplicarCaretFlip,
1895
+ ge as clampHorizontal,
1896
+ pe as criarTooltipEl,
1897
+ ye as criarTooltipExternoPadrao,
1898
+ Ea as default,
1899
+ At as exportarElementoComoImagem,
1900
+ de as gerarPaleta,
1901
+ fe as prepararTooltipParent,
1902
+ Z as propsCartao,
1903
+ oe as propsDirecao,
1904
+ Ve as propsTabela,
1905
+ ae as propsValor,
1906
+ D as toRgba,
1907
+ Oe as ttLinhaTexto,
1908
+ he as ttLinhaValor,
1909
+ me as ttTitulo,
1910
+ K as useExportarCard,
1911
+ te as useFormatadorValor,
1912
+ Pe as useLinhasReferencia,
1913
+ G as useTema
2022
1914
  };