vlite3 1.1.8 → 1.1.10

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.
Files changed (63) hide show
  1. package/components/Chart/BarChart.vue.js +384 -0
  2. package/components/Chart/BarChart.vue2.js +4 -0
  3. package/components/Chart/CircleChart.vue.js +137 -0
  4. package/components/Chart/CircleChart.vue2.js +4 -0
  5. package/components/Chart/GaugeChart.vue.js +443 -0
  6. package/components/Chart/GaugeChart.vue2.js +4 -0
  7. package/components/Chart/LineChart.vue.js +7 -0
  8. package/components/Chart/LineChart.vue2.js +326 -0
  9. package/components/Chart/PieChart.vue.js +203 -0
  10. package/components/Chart/PieChart.vue2.js +4 -0
  11. package/components/Chart/utils.js +91 -0
  12. package/components/ColorPicker/ColorIro.vue.js +41 -40
  13. package/components/Dropdown/Dropdown.vue.d.ts +1 -1
  14. package/components/Dropdown/Dropdown.vue.js +69 -69
  15. package/components/Dropdown/DropdownMenu.vue.d.ts +2 -0
  16. package/components/Dropdown/DropdownMenu.vue.js +2 -2
  17. package/components/Dropdown/DropdownMenu.vue2.js +21 -20
  18. package/components/Footer/Footer.vue.js +35 -0
  19. package/components/Footer/Footer.vue2.js +4 -0
  20. package/components/Footer/Variant1.vue.js +178 -0
  21. package/components/Footer/Variant1.vue2.js +4 -0
  22. package/components/Footer/Variant2.vue.js +177 -0
  23. package/components/Footer/Variant2.vue2.js +4 -0
  24. package/components/Footer/Variant3.vue.js +82 -0
  25. package/components/Footer/Variant3.vue2.js +4 -0
  26. package/components/Kanban/KanbanBoard.vue.js +1 -1
  27. package/components/Kanban/KanbanBoard.vue2.js +50 -49
  28. package/components/Navbar/Navbar.vue.d.ts +4 -90
  29. package/components/Navbar/Navbar.vue.js +37 -625
  30. package/components/Navbar/NavbarLayoutClassic.vue.d.ts +61 -0
  31. package/components/Navbar/NavbarLayoutClassic.vue.js +268 -0
  32. package/components/Navbar/NavbarLayoutClassic.vue2.js +4 -0
  33. package/components/Navbar/NavbarLayoutDashboard.vue.d.ts +37 -0
  34. package/components/Navbar/NavbarLayoutDashboard.vue.js +157 -0
  35. package/components/Navbar/NavbarLayoutDashboard.vue2.js +4 -0
  36. package/components/Navbar/NavbarLayoutDock.vue.d.ts +37 -0
  37. package/components/Navbar/NavbarLayoutDock.vue.js +156 -0
  38. package/components/Navbar/NavbarLayoutDock.vue2.js +4 -0
  39. package/components/Navbar/NavbarLayoutSidebarFirst.vue.d.ts +36 -0
  40. package/components/Navbar/NavbarLayoutSidebarFirst.vue.js +151 -0
  41. package/components/Navbar/NavbarLayoutSidebarFirst.vue2.js +4 -0
  42. package/components/Navbar/NavbarStandalone.vue.d.ts +48 -0
  43. package/components/Navbar/NavbarStandalone.vue.js +183 -0
  44. package/components/Navbar/NavbarStandalone.vue2.js +4 -0
  45. package/components/Navbar/useNavbar.d.ts +36 -0
  46. package/components/Navbar/useNavbar.js +134 -0
  47. package/components/RichTextEditor/RichTextEditor.vue.js +332 -0
  48. package/components/RichTextEditor/RichTextEditor.vue3.js +5 -0
  49. package/components/RichTextEditor/RichTextLinkPopover.vue.js +107 -0
  50. package/components/RichTextEditor/RichTextLinkPopover.vue3.js +5 -0
  51. package/components/RichTextEditor/RichTextReader.vue.js +7 -0
  52. package/components/RichTextEditor/RichTextReader.vue2.js +19 -0
  53. package/components/RichTextEditor/RichTextToolbar.vue.js +330 -0
  54. package/components/RichTextEditor/RichTextToolbar.vue3.js +5 -0
  55. package/components/RichTextEditor/composables/useRichTextImageUpload.js +77 -0
  56. package/components/RichTextEditor/composables/useRichTextLinks.js +120 -0
  57. package/components/Splitter/Splitter.vue.js +3 -3
  58. package/core/config.d.ts +2 -2
  59. package/index.d.ts +3 -0
  60. package/index.js +332 -315
  61. package/package.json +1 -1
  62. package/style.css +1 -1
  63. package/types/navbar.type.d.ts +1 -1
@@ -0,0 +1,384 @@
1
+ import { defineComponent as se, ref as G, computed as f, onMounted as ie, watch as ce, onUnmounted as ve, openBlock as n, createElementBlock as u, Fragment as d, renderList as h, createElementVNode as w, normalizeStyle as _, createTextVNode as de, toDisplayString as p, createCommentVNode as m, unref as k, withDirectives as he, vShow as fe, createBlock as me, Teleport as ye } from "vue";
2
+ import { CHART_COLORS as xe, getColor as J, formatNumber as R, niceYTicks as ge, animateProgress as $e } from "./utils.js";
3
+ const be = {
4
+ key: 0,
5
+ class: "flex flex-wrap gap-x-4 gap-y-1 mb-3 pl-14"
6
+ }, pe = ["width", "height"], ke = ["id"], we = ["stop-color"], Le = ["stop-color"], Me = ["id"], Ve = ["stop-color"], Ce = ["stop-color"], Be = ["transform"], Ye = ["y1", "x2", "y2", "stroke-opacity"], Re = ["y"], Xe = ["d", "fill", "opacity"], Oe = ["x", "y"], ze = ["x", "y", "text-anchor", "transform"], Se = ["y1", "x2", "y2", "stroke-opacity"], Ae = ["y2", "stroke-opacity"], Ge = ["transform"], Te = ["x1", "x2", "y2", "stroke-opacity"], We = ["x"], Pe = ["y"], He = ["d", "fill", "opacity"], Ne = ["x", "y"], Qe = ["y2", "stroke-opacity"], Ze = ["y1", "x2", "y2", "stroke-opacity"], De = { class: "font-medium text-xs mb-1.5" }, Ee = {
7
+ key: 0,
8
+ class: "text-muted-foreground"
9
+ }, Fe = { class: "font-semibold" }, _e = /* @__PURE__ */ se({
10
+ __name: "BarChart",
11
+ props: {
12
+ data: {},
13
+ datasets: {},
14
+ labels: {},
15
+ height: { default: 300 },
16
+ orientation: { default: "vertical" },
17
+ barRadius: { default: 6 },
18
+ showGrid: { type: Boolean, default: !0 },
19
+ showLegend: { type: Boolean, default: !0 },
20
+ showTooltip: { type: Boolean, default: !0 },
21
+ showValues: { type: Boolean, default: !1 },
22
+ colors: { default: () => xe },
23
+ animate: { type: Boolean, default: !0 },
24
+ formatValue: {},
25
+ showXAxis: { type: Boolean, default: !0 },
26
+ showYAxis: { type: Boolean, default: !0 },
27
+ showXLabels: { type: Boolean, default: !0 },
28
+ showYLabels: { type: Boolean, default: !0 },
29
+ gridOpacity: { default: 0.07 },
30
+ axisOpacity: { default: 0.1 }
31
+ },
32
+ setup(i) {
33
+ const s = i, T = G(), z = G(600), g = f(() => s.datasets?.length ? s.datasets.map((l, e) => ({
34
+ label: l.label,
35
+ color: l.color ?? J(s.colors, e),
36
+ values: l.data
37
+ })) : [
38
+ {
39
+ label: "",
40
+ color: "",
41
+ // will use per-bar color from data
42
+ values: (s.data ?? []).map((l) => l.value)
43
+ }
44
+ ]), $ = f(() => g.value.length > 1 || !!s.datasets?.length), v = f(() => s.labels?.length ? s.labels : s.datasets?.length ? g.value[0]?.values.map((t, l) => String(l + 1)) ?? [] : (s.data ?? []).map((t) => t.label)), S = f(() => {
45
+ if (s.orientation !== "vertical" || !s.showXLabels || v.value.length === 0) return !1;
46
+ const t = Math.max(2, Math.floor(z.value / 65));
47
+ return v.value.length > t;
48
+ }), b = f(() => {
49
+ const t = (o) => String(o).length;
50
+ if (s.orientation === "horizontal") {
51
+ const o = s.showYLabels ? Math.max(2, ...v.value.map((y) => t(y))) * 6.5 : 0, r = s.showYLabels ? Math.max(24, o + 12) : 8;
52
+ let M = 16;
53
+ if (s.showValues) {
54
+ const y = g.value.flatMap((C) => C.values), V = Math.max(2, ...y.map((C) => t(s.formatValue ? s.formatValue(C) : R(C)))) * 6.5;
55
+ M = Math.max(16, V + 8);
56
+ }
57
+ return {
58
+ // top holds the value-tick labels that float above; collapse when hidden
59
+ top: s.showXLabels ? 16 : 4,
60
+ right: M,
61
+ bottom: 0,
62
+ left: r
63
+ };
64
+ }
65
+ const l = s.showYLabels ? Math.max(2, ...B.value.map((o) => t(s.formatValue ? s.formatValue(o) : R(o)))) * 6.5 : 0, e = s.showYLabels ? Math.max(24, l + 12) : 8;
66
+ let a = s.showXLabels ? 24 : 6;
67
+ return s.showXLabels && S.value && (a = Math.max(2, ...v.value.map((r) => String(r).length)) * 6.5 * 0.7 + 16), {
68
+ top: 24,
69
+ right: 0,
70
+ bottom: a,
71
+ left: e
72
+ };
73
+ }), x = f(() => Math.max(0, z.value - b.value.left - b.value.right)), c = f(() => Math.max(0, s.height - b.value.top - b.value.bottom)), Z = f(() => {
74
+ if (s.orientation !== "vertical") return 1;
75
+ const t = S.value ? 25 : 65, l = Math.max(2, Math.floor(x.value / t));
76
+ return Math.ceil(v.value.length / l);
77
+ }), K = (t) => {
78
+ if (s.orientation !== "vertical") return !0;
79
+ const l = v.value.length;
80
+ return Z.value <= 1 || t === 0 || t === l - 1 ? !0 : l - 1 - t < Z.value * 0.7 ? !1 : t % Z.value === 0;
81
+ }, W = f(
82
+ () => (s.data ?? []).map((t, l) => t.color ?? J(s.colors, l))
83
+ ), ee = f(() => g.value.flatMap((t) => t.values)), j = f(() => Math.max(...ee.value) || 1), B = f(() => ge(0, j.value, 5)), L = f(() => B.value[B.value.length - 1] || j.value), P = G(s.animate ? 0 : 1);
84
+ let D = null;
85
+ function q() {
86
+ D?.(), P.value = 0, D = $e(800, (t) => P.value = t);
87
+ }
88
+ ie(() => {
89
+ te(), s.animate && q();
90
+ }), ce(() => [s.data, s.datasets], () => {
91
+ s.animate && q();
92
+ }, { deep: !0 }), ve(() => {
93
+ D?.(), E?.disconnect();
94
+ });
95
+ let E = null;
96
+ function te() {
97
+ T.value && (E = new ResizeObserver((t) => {
98
+ z.value = t[0].contentRect.width || 600;
99
+ }), E.observe(T.value), z.value = T.value.clientWidth || 600);
100
+ }
101
+ const le = f(() => {
102
+ const t = v.value.length;
103
+ if (t === 0) return [];
104
+ const l = x.value / t, e = g.value.length, a = l * 0.2, o = l - a * 2, r = $.value ? o / e : o;
105
+ return v.value.map((M, y) => {
106
+ const V = y * l + a, C = g.value.map((H, N) => {
107
+ const Q = H.values[y] ?? 0, A = Q / L.value * c.value * P.value, F = V + N * r, I = c.value - A, U = $.value ? H.color : W.value[y];
108
+ return { val: Q, bh: A, x: F, y: I, w: r - ($.value ? 2 : 0), color: U };
109
+ });
110
+ return { label: M, bars: C };
111
+ });
112
+ }), ae = f(() => {
113
+ const t = v.value.length;
114
+ if (t === 0) return [];
115
+ const l = c.value / t, e = g.value.length, a = l * 0.2, o = l - a * 2, r = $.value ? o / e : o, M = L.value;
116
+ return v.value.map((y, V) => {
117
+ const C = V * l + a, H = g.value.map((N, Q) => {
118
+ const A = N.values[V] ?? 0, F = A / M * x.value * P.value, I = C + Q * r, U = $.value ? N.color : W.value[V];
119
+ return { val: A, bw: F, x: 0, y: I, h: r - ($.value ? 2 : 0), color: U };
120
+ });
121
+ return { label: y, bars: H };
122
+ });
123
+ }), Y = G(null), X = G(null);
124
+ function oe(t) {
125
+ if (!s.showTooltip) return;
126
+ const l = t.currentTarget.getBoundingClientRect(), e = t.clientX - l.left - b.value.left, a = t.clientY - l.top - b.value.top, o = v.value.length;
127
+ if (o === 0) return;
128
+ let r;
129
+ s.orientation === "vertical" ? r = Math.floor(e / x.value * o) : r = Math.floor(a / c.value * o), r = Math.max(0, Math.min(o - 1, r)), X.value = r;
130
+ const M = g.value.map((y, V) => ({
131
+ color: $.value ? y.color : W.value[r],
132
+ label: y.label,
133
+ value: s.formatValue ? s.formatValue(y.values[r]) : R(y.values[r])
134
+ }));
135
+ Y.value = {
136
+ x: t.clientX,
137
+ y: t.clientY,
138
+ label: v.value[r],
139
+ items: M
140
+ };
141
+ }
142
+ function ne() {
143
+ Y.value = null, X.value = null;
144
+ }
145
+ function ue(t, l, e, a, o) {
146
+ const r = Math.min(o, e / 2, a / 2);
147
+ return r <= 0 || a <= 0 ? `M${t},${l + a} L${t},${l} L${t + e},${l} L${t + e},${l + a} Z` : `M${t},${l + a} L${t},${l + r} Q${t},${l} ${t + r},${l} L${t + e - r},${l} Q${t + e},${l} ${t + e},${l + r} L${t + e},${l + a} Z`;
148
+ }
149
+ function re(t, l, e, a, o) {
150
+ const r = Math.min(o, e / 2, a / 2);
151
+ return r <= 0 || e <= 0 ? `M${t},${l} L${t + e},${l} L${t + e},${l + a} L${t},${l + a} Z` : `M${t},${l} L${t + e - r},${l} Q${t + e},${l} ${t + e},${l + r} L${t + e},${l + a - r} Q${t + e},${l + a} ${t + e - r},${l + a} L${t},${l + a} Z`;
152
+ }
153
+ const O = Math.random().toString(36).slice(2, 7);
154
+ return (t, l) => (n(), u("div", {
155
+ ref_key: "containerRef",
156
+ ref: T,
157
+ class: "vlite-bar-chart w-full select-none"
158
+ }, [
159
+ i.showLegend && $.value ? (n(), u("div", be, [
160
+ (n(!0), u(d, null, h(g.value, (e) => (n(), u("div", {
161
+ key: e.label,
162
+ class: "flex items-center gap-1.5 text-xs text-muted-foreground"
163
+ }, [
164
+ w("span", {
165
+ class: "w-2.5 h-2.5 rounded-sm inline-block",
166
+ style: _({ backgroundColor: e.color })
167
+ }, null, 4),
168
+ de(" " + p(e.label), 1)
169
+ ]))), 128))
170
+ ])) : m("", !0),
171
+ (n(), u("svg", {
172
+ width: z.value,
173
+ height: i.height,
174
+ role: "img",
175
+ "aria-label": "Bar chart",
176
+ class: "overflow-visible",
177
+ onMousemove: oe,
178
+ onMouseleave: ne
179
+ }, [
180
+ w("defs", null, [
181
+ (n(!0), u(d, null, h(g.value, (e, a) => (n(), u("linearGradient", {
182
+ key: a,
183
+ id: `bgrad-${k(O)}-${a}`,
184
+ x1: "0",
185
+ y1: "0",
186
+ x2: "0",
187
+ y2: "1"
188
+ }, [
189
+ w("stop", {
190
+ offset: "0%",
191
+ "stop-color": e.color,
192
+ "stop-opacity": "1"
193
+ }, null, 8, we),
194
+ w("stop", {
195
+ offset: "100%",
196
+ "stop-color": e.color,
197
+ "stop-opacity": "0.7"
198
+ }, null, 8, Le)
199
+ ], 8, ke))), 128)),
200
+ (n(!0), u(d, null, h(W.value, (e, a) => (n(), u("linearGradient", {
201
+ key: `sc-${a}`,
202
+ id: `bgrad-single-${k(O)}-${a}`,
203
+ x1: "0",
204
+ y1: "0",
205
+ x2: "0",
206
+ y2: "1"
207
+ }, [
208
+ w("stop", {
209
+ offset: "0%",
210
+ "stop-color": e,
211
+ "stop-opacity": "1"
212
+ }, null, 8, Ve),
213
+ w("stop", {
214
+ offset: "100%",
215
+ "stop-color": e,
216
+ "stop-opacity": "0.7"
217
+ }, null, 8, Ce)
218
+ ], 8, Me))), 128))
219
+ ]),
220
+ i.orientation === "vertical" ? (n(), u("g", {
221
+ key: 0,
222
+ transform: `translate(${b.value.left},${b.value.top})`
223
+ }, [
224
+ i.showGrid ? (n(!0), u(d, { key: 0 }, h(B.value, (e) => (n(), u("line", {
225
+ key: e,
226
+ x1: 0,
227
+ y1: c.value - e / L.value * c.value,
228
+ x2: x.value,
229
+ y2: c.value - e / L.value * c.value,
230
+ stroke: "currentColor",
231
+ "stroke-opacity": i.gridOpacity,
232
+ "stroke-width": "1"
233
+ }, null, 8, Ye))), 128)) : m("", !0),
234
+ i.showYLabels ? (n(!0), u(d, { key: 1 }, h(B.value, (e) => (n(), u("text", {
235
+ key: `yt-${e}`,
236
+ x: -10,
237
+ y: c.value - e / L.value * c.value,
238
+ "text-anchor": "end",
239
+ "dominant-baseline": "middle",
240
+ "font-size": "11",
241
+ class: "fill-muted-foreground"
242
+ }, p(i.formatValue ? i.formatValue(e) : k(R)(e)), 9, Re))), 128)) : m("", !0),
243
+ (n(!0), u(d, null, h(le.value, (e, a) => (n(), u("g", { key: a }, [
244
+ (n(!0), u(d, null, h(e.bars, (o, r) => (n(), u("path", {
245
+ key: r,
246
+ d: ue(o.x, o.y, o.w, o.bh, i.barRadius),
247
+ fill: $.value ? `url(#bgrad-${k(O)}-${r})` : `url(#bgrad-single-${k(O)}-${a})`,
248
+ opacity: X.value !== null && X.value !== a ? 0.5 : 1,
249
+ class: "transition-opacity duration-150"
250
+ }, null, 8, Xe))), 128)),
251
+ i.showValues ? (n(!0), u(d, { key: 0 }, h(e.bars, (o, r) => (n(), u("text", {
252
+ key: `vl-${r}`,
253
+ x: o.x + o.w / 2,
254
+ y: o.y - 6,
255
+ "text-anchor": "middle",
256
+ "font-size": "10",
257
+ "font-weight": "600",
258
+ class: "fill-foreground"
259
+ }, p(i.formatValue ? i.formatValue(o.val) : k(R)(o.val)), 9, Oe))), 128)) : m("", !0)
260
+ ]))), 128)),
261
+ i.showXLabels ? (n(!0), u(d, { key: 2 }, h(v.value, (e, a) => he((n(), u("text", {
262
+ key: `xl-${a}`,
263
+ x: (a + 0.5) * (x.value / v.value.length),
264
+ y: c.value + (S.value ? 12 : 16),
265
+ "text-anchor": S.value ? "end" : "middle",
266
+ transform: S.value ? `rotate(-45, ${(a + 0.5) * (x.value / v.value.length)}, ${c.value + 12})` : void 0,
267
+ "font-size": "11",
268
+ class: "fill-muted-foreground"
269
+ }, p(e), 9, ze)), [
270
+ [fe, K(a)]
271
+ ])), 128)) : m("", !0),
272
+ i.showXAxis ? (n(), u("line", {
273
+ key: 3,
274
+ x1: 0,
275
+ y1: c.value,
276
+ x2: x.value,
277
+ y2: c.value,
278
+ stroke: "currentColor",
279
+ "stroke-opacity": i.axisOpacity
280
+ }, null, 8, Se)) : m("", !0),
281
+ i.showYAxis ? (n(), u("line", {
282
+ key: 4,
283
+ x1: 0,
284
+ y1: 0,
285
+ x2: 0,
286
+ y2: c.value,
287
+ stroke: "currentColor",
288
+ "stroke-opacity": i.axisOpacity
289
+ }, null, 8, Ae)) : m("", !0)
290
+ ], 8, Be)) : (n(), u("g", {
291
+ key: 1,
292
+ transform: `translate(${b.value.left},${b.value.top})`
293
+ }, [
294
+ i.showGrid ? (n(!0), u(d, { key: 0 }, h(B.value, (e) => (n(), u("line", {
295
+ key: e,
296
+ x1: e / L.value * x.value,
297
+ y1: 0,
298
+ x2: e / L.value * x.value,
299
+ y2: c.value,
300
+ stroke: "currentColor",
301
+ "stroke-opacity": i.gridOpacity,
302
+ "stroke-width": "1"
303
+ }, null, 8, Te))), 128)) : m("", !0),
304
+ i.showXLabels ? (n(!0), u(d, { key: 1 }, h(B.value, (e) => (n(), u("text", {
305
+ key: `xt-${e}`,
306
+ x: e / L.value * x.value,
307
+ y: -8,
308
+ "text-anchor": "middle",
309
+ "font-size": "11",
310
+ class: "fill-muted-foreground"
311
+ }, p(i.formatValue ? i.formatValue(e) : k(R)(e)), 9, We))), 128)) : m("", !0),
312
+ i.showYLabels ? (n(!0), u(d, { key: 2 }, h(v.value, (e, a) => (n(), u("text", {
313
+ key: `yl-${a}`,
314
+ x: -12,
315
+ y: (a + 0.5) * (c.value / v.value.length),
316
+ "text-anchor": "end",
317
+ "dominant-baseline": "middle",
318
+ "font-size": "11",
319
+ class: "fill-muted-foreground"
320
+ }, p(e), 9, Pe))), 128)) : m("", !0),
321
+ (n(!0), u(d, null, h(ae.value, (e, a) => (n(), u("g", { key: a }, [
322
+ (n(!0), u(d, null, h(e.bars, (o, r) => (n(), u("path", {
323
+ key: r,
324
+ d: re(o.x, o.y, o.bw, o.h, i.barRadius),
325
+ fill: $.value ? `url(#bgrad-${k(O)}-${r})` : `url(#bgrad-single-${k(O)}-${a})`,
326
+ opacity: X.value !== null && X.value !== a ? 0.5 : 1,
327
+ class: "transition-opacity duration-150"
328
+ }, null, 8, He))), 128)),
329
+ i.showValues ? (n(!0), u(d, { key: 0 }, h(e.bars, (o, r) => (n(), u("text", {
330
+ key: `hvl-${r}`,
331
+ x: o.bw + 6,
332
+ y: o.y + o.h / 2,
333
+ "dominant-baseline": "middle",
334
+ "font-size": "10",
335
+ "font-weight": "600",
336
+ class: "fill-foreground"
337
+ }, p(i.formatValue ? i.formatValue(o.val) : k(R)(o.val)), 9, Ne))), 128)) : m("", !0)
338
+ ]))), 128)),
339
+ i.showYAxis ? (n(), u("line", {
340
+ key: 3,
341
+ x1: 0,
342
+ y1: 0,
343
+ x2: 0,
344
+ y2: c.value,
345
+ stroke: "currentColor",
346
+ "stroke-opacity": i.axisOpacity
347
+ }, null, 8, Qe)) : m("", !0),
348
+ i.showXAxis ? (n(), u("line", {
349
+ key: 4,
350
+ x1: 0,
351
+ y1: c.value,
352
+ x2: x.value,
353
+ y2: c.value,
354
+ stroke: "currentColor",
355
+ "stroke-opacity": i.axisOpacity
356
+ }, null, 8, Ze)) : m("", !0)
357
+ ], 8, Ge))
358
+ ], 40, pe)),
359
+ (n(), me(ye, { to: "body" }, [
360
+ Y.value ? (n(), u("div", {
361
+ key: 0,
362
+ class: "vlite-chart-tooltip",
363
+ style: _({ left: `${Y.value.x + 12}px`, top: `${Y.value.y - 10}px` })
364
+ }, [
365
+ w("div", De, p(Y.value.label), 1),
366
+ (n(!0), u(d, null, h(Y.value.items, (e) => (n(), u("div", {
367
+ key: e.label,
368
+ class: "flex items-center gap-1.5 text-xs"
369
+ }, [
370
+ w("span", {
371
+ class: "w-2 h-2 rounded-sm shrink-0",
372
+ style: _({ backgroundColor: e.color })
373
+ }, null, 4),
374
+ e.label ? (n(), u("span", Ee, p(e.label) + ":", 1)) : m("", !0),
375
+ w("span", Fe, p(e.value), 1)
376
+ ]))), 128))
377
+ ], 4)) : m("", !0)
378
+ ]))
379
+ ], 512));
380
+ }
381
+ });
382
+ export {
383
+ _e as default
384
+ };
@@ -0,0 +1,4 @@
1
+ import f from "./BarChart.vue.js";
2
+ export {
3
+ f as default
4
+ };
@@ -0,0 +1,137 @@
1
+ import { defineComponent as p, computed as l, ref as S, onMounted as B, watch as W, onUnmounted as P, openBlock as o, createElementBlock as r, createElementVNode as n, unref as w, normalizeStyle as z, renderSlot as j, toDisplayString as y, createCommentVNode as f } from "vue";
2
+ import { resolveColor as A, animateProgress as D } from "./utils.js";
3
+ const E = { class: "vlite-circle-chart inline-flex flex-col items-center gap-2 select-none" }, N = ["width", "height", "aria-label"], O = ["id"], G = ["stop-color"], I = ["stop-color"], U = ["cx", "cy", "r", "stroke", "stroke-width"], q = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap"], F = ["x", "y", "width", "height"], H = {
4
+ xmlns: "http://www.w3.org/1999/xhtml",
5
+ class: "w-full h-full flex flex-col items-center justify-center text-center"
6
+ }, J = {
7
+ key: 0,
8
+ class: "text-center"
9
+ }, K = {
10
+ key: 0,
11
+ class: "text-sm font-medium text-foreground"
12
+ }, L = {
13
+ key: 1,
14
+ class: "text-xs text-muted-foreground"
15
+ }, T = /* @__PURE__ */ p({
16
+ __name: "CircleChart",
17
+ props: {
18
+ value: {},
19
+ max: { default: 100 },
20
+ size: { default: 160 },
21
+ strokeWidth: { default: 12 },
22
+ color: { default: "primary" },
23
+ gradient: { type: Boolean, default: !0 },
24
+ label: {},
25
+ sublabel: {},
26
+ showValue: { type: Boolean, default: !0 },
27
+ formatValue: {},
28
+ animate: { type: Boolean, default: !0 },
29
+ trackColor: {},
30
+ lineCap: { default: "round" }
31
+ },
32
+ setup(e) {
33
+ const t = e, g = Math.random().toString(36).slice(2, 7), h = l(() => (t.size - t.strokeWidth) / 2), m = l(() => 2 * Math.PI * h.value), c = l(() => t.size / 2), u = l(() => t.size / 2), s = l(() => Math.max(0, Math.min(100, t.value / t.max * 100))), d = S(t.animate ? 0 : s.value);
34
+ let v = null;
35
+ function b() {
36
+ v?.();
37
+ const a = s.value, i = d.value;
38
+ v = D(1e3, (M) => {
39
+ d.value = i + (a - i) * M;
40
+ });
41
+ }
42
+ B(() => {
43
+ t.animate && b();
44
+ }), W(s, () => {
45
+ t.animate && b();
46
+ }), P(() => v?.());
47
+ const C = l(() => {
48
+ const a = d.value / 100 * m.value;
49
+ return m.value - a;
50
+ }), k = l(() => A(t.color ?? "primary")), V = l(() => {
51
+ const a = {
52
+ primary: "#818cf8",
53
+ success: "#34d399",
54
+ warning: "#fbbf24",
55
+ danger: "#fb7185",
56
+ info: "#60a5fa"
57
+ }, i = t.color ?? "primary";
58
+ return a[i] ?? k.value;
59
+ }), x = l(() => t.formatValue ? t.formatValue(t.value, s.value) : `${Math.round(d.value)}%`), $ = l(() => t.trackColor || "var(--color-muted)");
60
+ return (a, i) => (o(), r("div", E, [
61
+ (o(), r("svg", {
62
+ width: e.size,
63
+ height: e.size,
64
+ role: "img",
65
+ "aria-label": `${x.value} progress`
66
+ }, [
67
+ n("defs", null, [
68
+ n("linearGradient", {
69
+ id: `cg-${w(g)}`,
70
+ x1: "1",
71
+ y1: "0",
72
+ x2: "0",
73
+ y2: "1"
74
+ }, [
75
+ n("stop", {
76
+ offset: "0%",
77
+ "stop-color": V.value
78
+ }, null, 8, G),
79
+ n("stop", {
80
+ offset: "100%",
81
+ "stop-color": k.value
82
+ }, null, 8, I)
83
+ ], 8, O)
84
+ ]),
85
+ n("circle", {
86
+ cx: c.value,
87
+ cy: u.value,
88
+ r: h.value,
89
+ fill: "none",
90
+ stroke: $.value,
91
+ "stroke-width": e.strokeWidth,
92
+ "stroke-linecap": "butt"
93
+ }, null, 8, U),
94
+ n("circle", {
95
+ cx: c.value,
96
+ cy: u.value,
97
+ r: h.value,
98
+ fill: "none",
99
+ stroke: e.gradient ? `url(#cg-${w(g)})` : k.value,
100
+ "stroke-width": e.strokeWidth,
101
+ "stroke-dasharray": m.value,
102
+ "stroke-dashoffset": C.value,
103
+ "stroke-linecap": e.lineCap,
104
+ transform: "rotate(-90)",
105
+ style: z({ transformOrigin: `${c.value}px ${u.value}px` })
106
+ }, null, 12, q),
107
+ (o(), r("foreignObject", {
108
+ x: c.value - e.size * 0.35,
109
+ y: u.value - e.size * 0.35,
110
+ width: e.size * 0.7,
111
+ height: e.size * 0.7
112
+ }, [
113
+ n("div", H, [
114
+ j(a.$slots, "center", {
115
+ value: e.value,
116
+ percentage: s.value,
117
+ displayValue: x.value
118
+ }, () => [
119
+ e.showValue ? (o(), r("span", {
120
+ key: 0,
121
+ class: "font-bold text-foreground leading-tight",
122
+ style: z({ fontSize: `${e.size * 0.16}px` })
123
+ }, y(x.value), 5)) : f("", !0)
124
+ ])
125
+ ])
126
+ ], 8, F))
127
+ ], 8, N)),
128
+ e.label || e.sublabel ? (o(), r("div", J, [
129
+ e.label ? (o(), r("p", K, y(e.label), 1)) : f("", !0),
130
+ e.sublabel ? (o(), r("p", L, y(e.sublabel), 1)) : f("", !0)
131
+ ])) : f("", !0)
132
+ ]));
133
+ }
134
+ });
135
+ export {
136
+ T as default
137
+ };
@@ -0,0 +1,4 @@
1
+ import f from "./CircleChart.vue.js";
2
+ export {
3
+ f as default
4
+ };