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.
- package/components/Chart/BarChart.vue.js +384 -0
- package/components/Chart/BarChart.vue2.js +4 -0
- package/components/Chart/CircleChart.vue.js +137 -0
- package/components/Chart/CircleChart.vue2.js +4 -0
- package/components/Chart/GaugeChart.vue.js +443 -0
- package/components/Chart/GaugeChart.vue2.js +4 -0
- package/components/Chart/LineChart.vue.js +7 -0
- package/components/Chart/LineChart.vue2.js +326 -0
- package/components/Chart/PieChart.vue.js +203 -0
- package/components/Chart/PieChart.vue2.js +4 -0
- package/components/Chart/utils.js +91 -0
- package/components/ColorPicker/ColorIro.vue.js +41 -40
- package/components/Dropdown/Dropdown.vue.d.ts +1 -1
- package/components/Dropdown/Dropdown.vue.js +69 -69
- package/components/Dropdown/DropdownMenu.vue.d.ts +2 -0
- package/components/Dropdown/DropdownMenu.vue.js +2 -2
- package/components/Dropdown/DropdownMenu.vue2.js +21 -20
- package/components/Footer/Footer.vue.js +35 -0
- package/components/Footer/Footer.vue2.js +4 -0
- package/components/Footer/Variant1.vue.js +178 -0
- package/components/Footer/Variant1.vue2.js +4 -0
- package/components/Footer/Variant2.vue.js +177 -0
- package/components/Footer/Variant2.vue2.js +4 -0
- package/components/Footer/Variant3.vue.js +82 -0
- package/components/Footer/Variant3.vue2.js +4 -0
- package/components/Kanban/KanbanBoard.vue.js +1 -1
- package/components/Kanban/KanbanBoard.vue2.js +50 -49
- package/components/Navbar/Navbar.vue.d.ts +4 -90
- package/components/Navbar/Navbar.vue.js +37 -625
- package/components/Navbar/NavbarLayoutClassic.vue.d.ts +61 -0
- package/components/Navbar/NavbarLayoutClassic.vue.js +268 -0
- package/components/Navbar/NavbarLayoutClassic.vue2.js +4 -0
- package/components/Navbar/NavbarLayoutDashboard.vue.d.ts +37 -0
- package/components/Navbar/NavbarLayoutDashboard.vue.js +157 -0
- package/components/Navbar/NavbarLayoutDashboard.vue2.js +4 -0
- package/components/Navbar/NavbarLayoutDock.vue.d.ts +37 -0
- package/components/Navbar/NavbarLayoutDock.vue.js +156 -0
- package/components/Navbar/NavbarLayoutDock.vue2.js +4 -0
- package/components/Navbar/NavbarLayoutSidebarFirst.vue.d.ts +36 -0
- package/components/Navbar/NavbarLayoutSidebarFirst.vue.js +151 -0
- package/components/Navbar/NavbarLayoutSidebarFirst.vue2.js +4 -0
- package/components/Navbar/NavbarStandalone.vue.d.ts +48 -0
- package/components/Navbar/NavbarStandalone.vue.js +183 -0
- package/components/Navbar/NavbarStandalone.vue2.js +4 -0
- package/components/Navbar/useNavbar.d.ts +36 -0
- package/components/Navbar/useNavbar.js +134 -0
- package/components/RichTextEditor/RichTextEditor.vue.js +332 -0
- package/components/RichTextEditor/RichTextEditor.vue3.js +5 -0
- package/components/RichTextEditor/RichTextLinkPopover.vue.js +107 -0
- package/components/RichTextEditor/RichTextLinkPopover.vue3.js +5 -0
- package/components/RichTextEditor/RichTextReader.vue.js +7 -0
- package/components/RichTextEditor/RichTextReader.vue2.js +19 -0
- package/components/RichTextEditor/RichTextToolbar.vue.js +330 -0
- package/components/RichTextEditor/RichTextToolbar.vue3.js +5 -0
- package/components/RichTextEditor/composables/useRichTextImageUpload.js +77 -0
- package/components/RichTextEditor/composables/useRichTextLinks.js +120 -0
- package/components/Splitter/Splitter.vue.js +3 -3
- package/core/config.d.ts +2 -2
- package/index.d.ts +3 -0
- package/index.js +332 -315
- package/package.json +1 -1
- package/style.css +1 -1
- 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,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
|
+
};
|