@gkucmierz/nano-ui 1.2.2 → 1.5.0
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/README.md +55 -0
- package/dist/nano-ui.css +1 -1
- package/dist/nano-ui.js +1167 -113
- package/package.json +18 -4
package/dist/nano-ui.js
CHANGED
|
@@ -1,120 +1,218 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Fragment as e, Teleport as t, Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, nextTick as u, normalizeClass as d, normalizeStyle as f, onMounted as p, onUnmounted as m, openBlock as h, reactive as g, ref as _, renderList as v, renderSlot as y, resolveDirective as b, toDisplayString as x, unref as S, watch as C, withCtx as w, withDirectives as T, withKeys as E, withModifiers as D } from "vue";
|
|
2
|
+
//#region node_modules/@gkucmierz/analytics/dist/analytics.js
|
|
3
|
+
var O = new class {
|
|
4
|
+
constructor() {
|
|
5
|
+
this.appId = null, this.serverUrl = null, this.sessionId = null, this.isRealUser = !1, this.sessionActive = !1, this.eventQueue = [], this.botFlags = [];
|
|
6
|
+
}
|
|
7
|
+
init(e, t) {
|
|
8
|
+
this.appId = e, this.serverUrl = t || "", this.checkBotStatus(), this.sessionId = sessionStorage.getItem("analytics_session_id"), this.sessionId || (this.sessionId = this.uuidv4(), sessionStorage.setItem("analytics_session_id", this.sessionId)), sessionStorage.getItem("analytics_session_active") === "true" ? (this.isRealUser = !0, this.activateSession()) : this.setupInteractionListeners(), this.track("pageview", {
|
|
9
|
+
path: window.location.pathname,
|
|
10
|
+
referrer: document.referrer
|
|
11
|
+
}), this.setupUnloadTracking();
|
|
12
|
+
}
|
|
13
|
+
checkBotStatus() {
|
|
14
|
+
typeof navigator > "u" || (navigator.webdriver && this.botFlags.push("webdriver"), window.outerWidth === 0 && window.outerHeight === 0 && this.botFlags.push("zero-dimensions"), /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor) && !window.chrome && this.botFlags.push("missing-chrome-object"), !/Mobi|Android|iPhone|iPad/i.test(navigator.userAgent) && (!navigator.plugins || navigator.plugins.length === 0) && this.botFlags.push("no-plugins-on-desktop"));
|
|
15
|
+
}
|
|
16
|
+
setupInteractionListeners() {
|
|
17
|
+
let e = () => {
|
|
18
|
+
this.isRealUser || (this.isRealUser = !0, sessionStorage.setItem("analytics_session_active", "true"), this.activateSession(), t());
|
|
19
|
+
}, t = () => {
|
|
20
|
+
window.removeEventListener("mousemove", e), window.removeEventListener("keydown", e), window.removeEventListener("scroll", e), window.removeEventListener("touchstart", e);
|
|
21
|
+
};
|
|
22
|
+
window.addEventListener("mousemove", e, {
|
|
23
|
+
once: !0,
|
|
24
|
+
passive: !0
|
|
25
|
+
}), window.addEventListener("keydown", e, {
|
|
26
|
+
once: !0,
|
|
27
|
+
passive: !0
|
|
28
|
+
}), window.addEventListener("scroll", e, {
|
|
29
|
+
once: !0,
|
|
30
|
+
passive: !0
|
|
31
|
+
}), window.addEventListener("touchstart", e, {
|
|
32
|
+
once: !0,
|
|
33
|
+
passive: !0
|
|
34
|
+
}), setTimeout(() => {
|
|
35
|
+
this.isRealUser || (this.botFlags.push("no-interaction-timeout"), this.activateSession(!0));
|
|
36
|
+
}, 8e3);
|
|
37
|
+
}
|
|
38
|
+
activateSession(e = !1) {
|
|
39
|
+
if (this.sessionActive) return;
|
|
40
|
+
this.sessionActive = !0;
|
|
41
|
+
let t = {
|
|
42
|
+
sessionId: this.sessionId,
|
|
43
|
+
appId: this.appId,
|
|
44
|
+
userAgent: navigator.userAgent,
|
|
45
|
+
screenWidth: window.screen.width,
|
|
46
|
+
screenHeight: window.screen.height,
|
|
47
|
+
isBot: e || this.botFlags.length > 0 ? 1 : 0,
|
|
48
|
+
botFlags: this.botFlags.join(","),
|
|
49
|
+
startedAt: (/* @__PURE__ */ new Date()).toISOString()
|
|
50
|
+
};
|
|
51
|
+
this.send("/api/session", t);
|
|
52
|
+
let n = [...this.eventQueue];
|
|
53
|
+
this.eventQueue = [], n.forEach((e) => {
|
|
54
|
+
this.send("/api/event", e);
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
track(e, t = {}) {
|
|
58
|
+
let n = {
|
|
59
|
+
sessionId: this.sessionId,
|
|
60
|
+
eventType: e === "pageview" ? "pageview" : "custom",
|
|
61
|
+
eventName: e,
|
|
62
|
+
timestamp: (/* @__PURE__ */ new Date()).toISOString(),
|
|
63
|
+
metaData: JSON.stringify(t)
|
|
64
|
+
};
|
|
65
|
+
this.sessionActive ? this.send("/api/event", n) : this.eventQueue.push(n);
|
|
66
|
+
}
|
|
67
|
+
send(e, t) {
|
|
68
|
+
if (!this.serverUrl) return;
|
|
69
|
+
let n = `${this.serverUrl}${e}`, r = JSON.stringify(t);
|
|
70
|
+
try {
|
|
71
|
+
if (navigator.sendBeacon) {
|
|
72
|
+
let e = new Blob([r], { type: "application/json" });
|
|
73
|
+
navigator.sendBeacon(n, e);
|
|
74
|
+
} else fetch(n, {
|
|
75
|
+
method: "POST",
|
|
76
|
+
headers: { "Content-Type": "application/json" },
|
|
77
|
+
body: r,
|
|
78
|
+
keepalive: !0
|
|
79
|
+
}).catch(() => {});
|
|
80
|
+
} catch {}
|
|
81
|
+
}
|
|
82
|
+
setupUnloadTracking() {
|
|
83
|
+
let e = Date.now();
|
|
84
|
+
window.addEventListener("visibilitychange", () => {
|
|
85
|
+
if (document.visibilityState === "hidden") {
|
|
86
|
+
let t = Math.round((Date.now() - e) / 1e3);
|
|
87
|
+
this.track("session_duration", { duration: t });
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
uuidv4() {
|
|
92
|
+
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(e) {
|
|
93
|
+
var t = Math.random() * 16 | 0;
|
|
94
|
+
return (e == "x" ? t : t & 3 | 8).toString(16);
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
}();
|
|
98
|
+
typeof window < "u" && (window.Analytics = O);
|
|
99
|
+
//#endregion
|
|
2
100
|
//#region src/directives/ripple.js
|
|
3
|
-
var
|
|
101
|
+
var k = { mounted(e, t) {
|
|
4
102
|
e.style.position = "relative", e.style.overflow = "hidden", e.addEventListener("click", function(n) {
|
|
5
103
|
let r = e.getBoundingClientRect(), i = n.clientX - r.left, a = n.clientY - r.top, o = document.createElement("span"), s = Math.max(r.width, r.height), c = s / 2;
|
|
6
104
|
o.style.width = o.style.height = `${s}px`, o.style.left = `${i - c}px`, o.style.top = `${a - c}px`, o.classList.add("ripple"), t.value && typeof t.value == "string" && (o.style.backgroundColor = t.value), e.appendChild(o), setTimeout(() => {
|
|
7
105
|
o.remove();
|
|
8
106
|
}, 600);
|
|
9
107
|
});
|
|
10
|
-
} },
|
|
108
|
+
} }, A = g({
|
|
11
109
|
isVisible: !1,
|
|
12
110
|
text: "",
|
|
13
111
|
customClass: "",
|
|
14
112
|
targetRect: null
|
|
15
113
|
});
|
|
16
|
-
function
|
|
114
|
+
function j(e, t) {
|
|
17
115
|
if (!t) return;
|
|
18
116
|
let n = typeof t == "object" ? t.text : t, r = typeof t == "object" && t.class || "";
|
|
19
117
|
if (!n) return;
|
|
20
118
|
e.hasAttribute("aria-label") || e.setAttribute("aria-label", n);
|
|
21
119
|
let i = e.getBoundingClientRect();
|
|
22
|
-
|
|
120
|
+
A.targetRect = {
|
|
23
121
|
top: i.top,
|
|
24
122
|
left: i.left,
|
|
25
123
|
width: i.width,
|
|
26
124
|
bottom: i.bottom,
|
|
27
125
|
right: i.right
|
|
28
|
-
},
|
|
126
|
+
}, A.text = n, A.customClass = r, A.isVisible = !0;
|
|
29
127
|
}
|
|
30
|
-
typeof window < "u" && window.addEventListener("scroll",
|
|
128
|
+
typeof window < "u" && window.addEventListener("scroll", M, {
|
|
31
129
|
passive: !0,
|
|
32
130
|
capture: !0
|
|
33
131
|
});
|
|
34
|
-
function
|
|
35
|
-
|
|
132
|
+
function M() {
|
|
133
|
+
A.isVisible = !1;
|
|
36
134
|
}
|
|
37
135
|
//#endregion
|
|
38
136
|
//#region src/directives/tooltip.js
|
|
39
|
-
var
|
|
137
|
+
var N = {
|
|
40
138
|
mounted(e, t) {
|
|
41
139
|
e._tooltipOptions = t.value;
|
|
42
140
|
let n = null, r = !1;
|
|
43
141
|
e._handleMouseEnter = () => {
|
|
44
|
-
r ||
|
|
142
|
+
r || j(e, e._tooltipOptions);
|
|
45
143
|
}, e._handleMouseLeave = () => {
|
|
46
|
-
r ||
|
|
144
|
+
r || M();
|
|
47
145
|
}, e._handleFocus = () => {
|
|
48
|
-
r ||
|
|
146
|
+
r || j(e, e._tooltipOptions);
|
|
49
147
|
}, e._handleBlur = () => {
|
|
50
|
-
r ||
|
|
148
|
+
r || M();
|
|
51
149
|
}, e._handleTouchStart = () => {
|
|
52
150
|
r = !0, n && clearTimeout(n), n = setTimeout(() => {
|
|
53
|
-
|
|
151
|
+
j(e, e._tooltipOptions);
|
|
54
152
|
}, 400);
|
|
55
153
|
}, e._handleTouchEnd = () => {
|
|
56
|
-
n && clearTimeout(n),
|
|
154
|
+
n && clearTimeout(n), M(), setTimeout(() => {
|
|
57
155
|
r = !1;
|
|
58
156
|
}, 500);
|
|
59
157
|
}, e._handleTouchCancel = () => {
|
|
60
|
-
n && clearTimeout(n),
|
|
158
|
+
n && clearTimeout(n), M(), setTimeout(() => {
|
|
61
159
|
r = !1;
|
|
62
160
|
}, 500);
|
|
63
161
|
}, e._handleContextMenu = (t) => {
|
|
64
162
|
let n = typeof e._tooltipOptions == "object" ? e._tooltipOptions.text : e._tooltipOptions;
|
|
65
|
-
r &&
|
|
163
|
+
r && A.isVisible && A.text === n && t.preventDefault();
|
|
66
164
|
}, e.addEventListener("mouseenter", e._handleMouseEnter), e.addEventListener("mouseleave", e._handleMouseLeave), e.addEventListener("focus", e._handleFocus), e.addEventListener("blur", e._handleBlur), e.addEventListener("touchstart", e._handleTouchStart, { passive: !0 }), e.addEventListener("touchend", e._handleTouchEnd), e.addEventListener("touchmove", e._handleTouchCancel, { passive: !0 }), e.addEventListener("touchcancel", e._handleTouchCancel), e.addEventListener("contextmenu", e._handleContextMenu);
|
|
67
165
|
},
|
|
68
166
|
updated(e, t) {
|
|
69
167
|
e._tooltipOptions = t.value;
|
|
70
168
|
let n = typeof t.value == "object" ? t.value.text : t.value;
|
|
71
|
-
|
|
169
|
+
A.isVisible && A.text !== n && (e.matches(":hover") || document.activeElement === e) && j(e, t.value);
|
|
72
170
|
},
|
|
73
171
|
unmounted(e) {
|
|
74
|
-
e._handleMouseEnter && (e.removeEventListener("mouseenter", e._handleMouseEnter), e.removeEventListener("mouseleave", e._handleMouseLeave), e.removeEventListener("focus", e._handleFocus), e.removeEventListener("blur", e._handleBlur), e.removeEventListener("touchstart", e._handleTouchStart), e.removeEventListener("touchend", e._handleTouchEnd), e.removeEventListener("touchmove", e._handleTouchCancel), e.removeEventListener("touchcancel", e._handleTouchCancel), e.removeEventListener("contextmenu", e._handleContextMenu)),
|
|
172
|
+
e._handleMouseEnter && (e.removeEventListener("mouseenter", e._handleMouseEnter), e.removeEventListener("mouseleave", e._handleMouseLeave), e.removeEventListener("focus", e._handleFocus), e.removeEventListener("blur", e._handleBlur), e.removeEventListener("touchstart", e._handleTouchStart), e.removeEventListener("touchend", e._handleTouchEnd), e.removeEventListener("touchmove", e._handleTouchCancel), e.removeEventListener("touchcancel", e._handleTouchCancel), e.removeEventListener("contextmenu", e._handleContextMenu)), M();
|
|
75
173
|
}
|
|
76
|
-
},
|
|
174
|
+
}, P = (e, t) => {
|
|
77
175
|
let n = e.__vccOpts || e;
|
|
78
176
|
for (let [e, r] of t) n[e] = r;
|
|
79
177
|
return n;
|
|
80
|
-
}
|
|
178
|
+
}, F = /* @__PURE__ */ P({
|
|
81
179
|
__name: "GlobalTooltip",
|
|
82
180
|
setup(e) {
|
|
83
|
-
let t =
|
|
84
|
-
return
|
|
181
|
+
let t = _(null), n = _(0), r = _(0), i = _(0), a = _(!1);
|
|
182
|
+
return C(() => A.isVisible, async (e) => {
|
|
85
183
|
if (e) {
|
|
86
|
-
if (await
|
|
87
|
-
let e =
|
|
88
|
-
|
|
89
|
-
let p = e.left + e.width / 2, m = p -
|
|
90
|
-
m < 8 ? m = 8 : m +
|
|
91
|
-
let h = p - (m +
|
|
184
|
+
if (await u(), !t.value || !A.targetRect) return;
|
|
185
|
+
let e = A.targetRect, o = t.value.getBoundingClientRect(), s = window.innerWidth, c = window.innerHeight, l = e.top, d = c - e.bottom, f = e.top - o.height - 8;
|
|
186
|
+
a.value = !1, (f < 8 || l < o.height + 8 && d > l) && (f = e.bottom + 8, a.value = !0), f + o.height > c - 8 && (f = c - o.height - 8), f < 8 && (f = 8);
|
|
187
|
+
let p = e.left + e.width / 2, m = p - o.width / 2;
|
|
188
|
+
m < 8 ? m = 8 : m + o.width > s - 8 && (m = s - o.width - 8);
|
|
189
|
+
let h = p - (m + o.width / 2), g = o.width / 2 - 12;
|
|
92
190
|
h > g && (h = g), h < -g && (h = -g), i.value = h, n.value = m, r.value = f;
|
|
93
191
|
}
|
|
94
|
-
}), (e, s) => (
|
|
192
|
+
}), (e, s) => (h(), o("div", {
|
|
95
193
|
ref_key: "tooltipRef",
|
|
96
194
|
ref: t,
|
|
97
|
-
class:
|
|
195
|
+
class: d([
|
|
98
196
|
"global-tooltip",
|
|
99
197
|
{
|
|
100
|
-
visible:
|
|
101
|
-
"tooltip-bottom":
|
|
198
|
+
visible: S(A).isVisible,
|
|
199
|
+
"tooltip-bottom": a.value
|
|
102
200
|
},
|
|
103
|
-
|
|
201
|
+
S(A).customClass
|
|
104
202
|
]),
|
|
105
|
-
style:
|
|
203
|
+
style: f({
|
|
106
204
|
transform: `translate(${n.value}px, ${r.value}px)`,
|
|
107
205
|
"--arrow-offset": `${i.value}px`
|
|
108
206
|
})
|
|
109
|
-
},
|
|
207
|
+
}, x(S(A).text), 7));
|
|
110
208
|
}
|
|
111
|
-
}, [["__scopeId", "data-v-37c91a21"]]),
|
|
209
|
+
}, [["__scopeId", "data-v-37c91a21"]]), I = { class: "nano-modal-title" }, L = {
|
|
112
210
|
key: 1,
|
|
113
211
|
class: "nano-modal-body"
|
|
114
|
-
},
|
|
212
|
+
}, R = {
|
|
115
213
|
key: 2,
|
|
116
214
|
class: "nano-modal-footer"
|
|
117
|
-
},
|
|
215
|
+
}, z = { class: "nano-modal-actions" }, B = {
|
|
118
216
|
__name: "NanoModal",
|
|
119
217
|
props: {
|
|
120
218
|
visible: {
|
|
@@ -195,80 +293,80 @@ var k = {
|
|
|
195
293
|
"ok",
|
|
196
294
|
"cancel"
|
|
197
295
|
],
|
|
198
|
-
setup(
|
|
199
|
-
let
|
|
296
|
+
setup(e, { emit: p }) {
|
|
297
|
+
let g = e, v = p, S = _(null), O = _(null), k = _(null), A = _(null), j = _(null), M = _(null), N = _(!1), P = _(!1), F = 0, B = 0, ee = 0, te = 0, V = 0, ne = 0, re = 0, ie = 0, ae = r(() => {
|
|
200
298
|
let e = {};
|
|
201
|
-
return
|
|
202
|
-
}),
|
|
203
|
-
if (
|
|
204
|
-
if (
|
|
299
|
+
return j.value === null ? (e.maxWidth = typeof g.width == "number" ? `${g.width}px` : g.width, e.width = "100%") : (e.width = `${j.value}px`, e.maxWidth = "none"), M.value === null ? g.height !== "auto" && (e.height = typeof g.height == "number" ? `${g.height}px` : g.height) : (e.height = `${M.value}px`, e.maxHeight = "none"), k.value !== null && A.value !== null && (e.position = "absolute", e.left = `${k.value}px`, e.top = `${A.value}px`, e.transform = "none", e.margin = "0"), e;
|
|
300
|
+
}), oe = (e) => {
|
|
301
|
+
if (g.draggable && !(e.target.tagName === "BUTTON" || e.target.closest("button"))) {
|
|
302
|
+
if (N.value = !0, F = e.clientX, B = e.clientY, k.value === null) {
|
|
205
303
|
let e = O.value.getBoundingClientRect();
|
|
206
|
-
k.value = e.left, A.value = e.top,
|
|
304
|
+
k.value = e.left, A.value = e.top, j.value === null && (j.value = e.width), M.value === null && (M.value = e.height);
|
|
207
305
|
}
|
|
208
|
-
|
|
306
|
+
ee = k.value, te = A.value, window.addEventListener("mousemove", se), window.addEventListener("mouseup", ce);
|
|
209
307
|
}
|
|
210
|
-
},
|
|
211
|
-
if (!
|
|
212
|
-
let t =
|
|
308
|
+
}, se = (e) => {
|
|
309
|
+
if (!N.value) return;
|
|
310
|
+
let t = ee + (e.clientX - F), n = te + (e.clientY - B), r = window.innerWidth, i = window.innerHeight, a = O.value.getBoundingClientRect();
|
|
213
311
|
t < 0 && (t = 0), n < 0 && (n = 0), t + a.width > r && (t = r - a.width), n + a.height > i && (n = i - a.height), k.value = t, A.value = n;
|
|
214
|
-
},
|
|
215
|
-
|
|
216
|
-
},
|
|
217
|
-
if (!
|
|
218
|
-
e.preventDefault(), e.stopPropagation(),
|
|
312
|
+
}, ce = () => {
|
|
313
|
+
N.value = !1, window.removeEventListener("mousemove", se), window.removeEventListener("mouseup", ce);
|
|
314
|
+
}, le = (e) => {
|
|
315
|
+
if (!g.resizable) return;
|
|
316
|
+
e.preventDefault(), e.stopPropagation(), P.value = !0, V = e.clientX, ne = e.clientY;
|
|
219
317
|
let t = O.value.getBoundingClientRect();
|
|
220
|
-
k.value === null && (k.value = t.left, A.value = t.top),
|
|
221
|
-
},
|
|
222
|
-
if (!
|
|
223
|
-
let t =
|
|
224
|
-
t <
|
|
318
|
+
k.value === null && (k.value = t.left, A.value = t.top), re = t.width, ie = t.height, window.addEventListener("mousemove", ue), window.addEventListener("mouseup", de);
|
|
319
|
+
}, ue = (e) => {
|
|
320
|
+
if (!P.value) return;
|
|
321
|
+
let t = re + (e.clientX - V), n = ie + (e.clientY - ne);
|
|
322
|
+
t < g.minWidth && (t = g.minWidth), n < g.minHeight && (n = g.minHeight);
|
|
225
323
|
let r = window.innerWidth - k.value, i = window.innerHeight - A.value;
|
|
226
|
-
t > r && (t = r), n > i && (n = i),
|
|
227
|
-
},
|
|
228
|
-
|
|
229
|
-
},
|
|
230
|
-
|
|
324
|
+
t > r && (t = r), n > i && (n = i), j.value = t, M.value = n;
|
|
325
|
+
}, de = () => {
|
|
326
|
+
P.value = !1, window.removeEventListener("mousemove", ue), window.removeEventListener("mouseup", de);
|
|
327
|
+
}, fe = (e) => {
|
|
328
|
+
g.visible && e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), pe());
|
|
231
329
|
};
|
|
232
|
-
|
|
233
|
-
e ? (k.value = null, A.value = null,
|
|
234
|
-
}),
|
|
235
|
-
document.body.style.overflow = "", window.removeEventListener("keydown",
|
|
330
|
+
C(() => g.visible, async (e) => {
|
|
331
|
+
e ? (k.value = null, A.value = null, j.value = null, M.value = null, document.body.style.overflow = "hidden", window.addEventListener("keydown", fe, { capture: !0 }), await u(), S.value && S.value.focus()) : (document.body.style.overflow = "", window.removeEventListener("keydown", fe, { capture: !0 }), ce(), de());
|
|
332
|
+
}), m(() => {
|
|
333
|
+
document.body.style.overflow = "", window.removeEventListener("keydown", fe, { capture: !0 }), ce(), de();
|
|
236
334
|
});
|
|
237
|
-
let
|
|
238
|
-
|
|
239
|
-
},
|
|
240
|
-
|
|
335
|
+
let pe = () => v("close"), me = () => {
|
|
336
|
+
g.closeOnBackdrop && pe();
|
|
337
|
+
}, he = () => v("ok"), ge = () => {
|
|
338
|
+
v("cancel"), pe();
|
|
241
339
|
};
|
|
242
|
-
return (
|
|
243
|
-
let
|
|
244
|
-
return
|
|
245
|
-
default:
|
|
340
|
+
return (r, u) => {
|
|
341
|
+
let p = b("ripple");
|
|
342
|
+
return h(), i(t, { to: "body" }, [l(n, { name: "nano-modal-fade" }, {
|
|
343
|
+
default: w(() => [e.visible ? (h(), o("div", {
|
|
246
344
|
key: 0,
|
|
247
|
-
class:
|
|
248
|
-
onClick:
|
|
249
|
-
onKeydown:
|
|
345
|
+
class: d(["nano-modal-overlay", { "nano-glass": e.glassmorphism }]),
|
|
346
|
+
onClick: D(me, ["self"]),
|
|
347
|
+
onKeydown: u[1] ||= E(D((...e) => r.handleEsc && r.handleEsc(...e), ["stop"]), ["esc"]),
|
|
250
348
|
tabindex: "-1",
|
|
251
349
|
ref_key: "modalOverlay",
|
|
252
|
-
ref:
|
|
253
|
-
}, [
|
|
254
|
-
class:
|
|
255
|
-
"is-dragging":
|
|
256
|
-
"is-resizing":
|
|
350
|
+
ref: S
|
|
351
|
+
}, [s("div", {
|
|
352
|
+
class: d(["nano-modal-window", {
|
|
353
|
+
"is-dragging": N.value,
|
|
354
|
+
"is-resizing": P.value
|
|
257
355
|
}]),
|
|
258
|
-
style:
|
|
356
|
+
style: f(ae.value),
|
|
259
357
|
ref_key: "modalWindow",
|
|
260
358
|
ref: O
|
|
261
359
|
}, [
|
|
262
|
-
|
|
360
|
+
e.showHeader ? (h(), o("div", {
|
|
263
361
|
key: 0,
|
|
264
|
-
class:
|
|
265
|
-
onMousedown:
|
|
266
|
-
}, [
|
|
362
|
+
class: d(["nano-modal-header", { "is-draggable": e.draggable }]),
|
|
363
|
+
onMousedown: oe
|
|
364
|
+
}, [y(r.$slots, "header", {}, () => [s("h2", I, x(e.title), 1)]), s("button", {
|
|
267
365
|
class: "nano-modal-close-btn",
|
|
268
|
-
onClick:
|
|
366
|
+
onClick: D(pe, ["stop"]),
|
|
269
367
|
"aria-label": "Close",
|
|
270
|
-
onMousedown:
|
|
271
|
-
}, [...
|
|
368
|
+
onMousedown: u[0] ||= D(() => {}, ["stop"])
|
|
369
|
+
}, [...u[2] ||= [s("svg", {
|
|
272
370
|
xmlns: "http://www.w3.org/2000/svg",
|
|
273
371
|
width: "24",
|
|
274
372
|
height: "24",
|
|
@@ -278,51 +376,1007 @@ var k = {
|
|
|
278
376
|
"stroke-width": "2",
|
|
279
377
|
"stroke-linecap": "round",
|
|
280
378
|
"stroke-linejoin": "round"
|
|
281
|
-
}, [
|
|
379
|
+
}, [s("line", {
|
|
282
380
|
x1: "18",
|
|
283
381
|
y1: "6",
|
|
284
382
|
x2: "6",
|
|
285
383
|
y2: "18"
|
|
286
|
-
}),
|
|
384
|
+
}), s("line", {
|
|
287
385
|
x1: "6",
|
|
288
386
|
y1: "6",
|
|
289
387
|
x2: "18",
|
|
290
388
|
y2: "18"
|
|
291
|
-
})], -1)]], 32)], 34)) :
|
|
292
|
-
|
|
293
|
-
|
|
389
|
+
})], -1)]], 32)], 34)) : a("", !0),
|
|
390
|
+
e.showBody ? (h(), o("div", L, [y(r.$slots, "body")])) : a("", !0),
|
|
391
|
+
e.showFooter ? (h(), o("div", R, [y(r.$slots, "footer", {}, () => [s("div", z, [e.showCancel ? T((h(), o("button", {
|
|
294
392
|
key: 0,
|
|
295
393
|
class: "nano-btn nano-btn-secondary",
|
|
296
|
-
onClick:
|
|
297
|
-
}, [
|
|
394
|
+
onClick: ge
|
|
395
|
+
}, [c(x(e.cancelText), 1)])), [[p]]) : a("", !0), e.showOk ? T((h(), o("button", {
|
|
298
396
|
key: 1,
|
|
299
|
-
class:
|
|
300
|
-
onClick:
|
|
301
|
-
}, [
|
|
302
|
-
|
|
397
|
+
class: d(["nano-btn", "nano-btn-" + e.okVariant]),
|
|
398
|
+
onClick: he
|
|
399
|
+
}, [c(x(e.okText), 1)], 2)), [[p]]) : a("", !0)])])])) : a("", !0),
|
|
400
|
+
e.resizable ? (h(), o("div", {
|
|
303
401
|
key: 3,
|
|
304
402
|
class: "nano-modal-resizer",
|
|
305
|
-
onMousedown:
|
|
306
|
-
}, [...
|
|
403
|
+
onMousedown: le
|
|
404
|
+
}, [...u[3] ||= [s("svg", {
|
|
307
405
|
width: "10",
|
|
308
406
|
height: "10",
|
|
309
407
|
viewBox: "0 0 10 10",
|
|
310
408
|
fill: "none",
|
|
311
409
|
xmlns: "http://www.w3.org/2000/svg"
|
|
312
|
-
}, [
|
|
410
|
+
}, [s("path", {
|
|
313
411
|
d: "M9 1V9H1",
|
|
314
412
|
stroke: "currentColor",
|
|
315
413
|
"stroke-width": "2",
|
|
316
414
|
"stroke-linecap": "round",
|
|
317
415
|
"stroke-linejoin": "round"
|
|
318
|
-
})], -1)]], 32)) :
|
|
319
|
-
], 6)], 34)) :
|
|
416
|
+
})], -1)]], 32)) : a("", !0)
|
|
417
|
+
], 6)], 34)) : a("", !0)]),
|
|
320
418
|
_: 3
|
|
321
419
|
})]);
|
|
322
420
|
};
|
|
323
421
|
}
|
|
324
|
-
},
|
|
325
|
-
|
|
422
|
+
}, ee = ["viewBox"], te = { key: 0 }, V = [
|
|
423
|
+
"id",
|
|
424
|
+
"x1",
|
|
425
|
+
"y1",
|
|
426
|
+
"x2",
|
|
427
|
+
"y2"
|
|
428
|
+
], ne = ["stop-color"], re = ["stop-color"], ie = [
|
|
429
|
+
"id",
|
|
430
|
+
"y1",
|
|
431
|
+
"y2"
|
|
432
|
+
], ae = ["stop-color"], oe = ["stop-color"], se = [
|
|
433
|
+
"id",
|
|
434
|
+
"y1",
|
|
435
|
+
"y2"
|
|
436
|
+
], ce = ["stop-color"], le = ["stop-color"], ue = { key: 1 }, de = ["x", "y"], fe = { key: 2 }, pe = ["d", "fill"], me = ["d", "stroke"], he = ["d", "fill"], ge = ["d", "fill"], _e = ["d", "fill"], ve = ["d", "stroke"], ye = ["d", "fill"], be = ["d", "stroke"], xe = ["d", "stroke-width"], Se = ["transform"], Ce = ["font-size"], we = ["font-size"], Te = ["d", "fill"], Ee = ["d", "stroke"], De = ["d", "fill"], Oe = ["d", "fill"], ke = ["d", "fill"], Ae = ["d", "stroke"], je = ["d", "fill"], Me = ["d", "stroke"], Ne = ["d", "stroke-width"], Pe = ["onMouseenter", "onClick"], Fe = ["d"], Ie = ["d"], Le = ["onMouseenter", "onClick"], Re = ["d", "stroke"], ze = ["y", "fill"], Be = ["onMouseenter", "onClick"], Ve = ["d", "stroke"], He = ["y", "fill"], H = /* @__PURE__ */ P({
|
|
437
|
+
__name: "ThreeDDonutChart",
|
|
438
|
+
props: {
|
|
439
|
+
data: {
|
|
440
|
+
type: Array,
|
|
441
|
+
required: !0
|
|
442
|
+
},
|
|
443
|
+
isExpanded: {
|
|
444
|
+
type: Boolean,
|
|
445
|
+
default: !1
|
|
446
|
+
},
|
|
447
|
+
hoveredItemId: {
|
|
448
|
+
type: [String, Number],
|
|
449
|
+
default: null
|
|
450
|
+
},
|
|
451
|
+
centerValue: {
|
|
452
|
+
type: [String, Number],
|
|
453
|
+
default: ""
|
|
454
|
+
},
|
|
455
|
+
centerLabel: {
|
|
456
|
+
type: String,
|
|
457
|
+
default: ""
|
|
458
|
+
},
|
|
459
|
+
emptyText: {
|
|
460
|
+
type: String,
|
|
461
|
+
default: ""
|
|
462
|
+
},
|
|
463
|
+
currentLowFxMode: {
|
|
464
|
+
type: Boolean,
|
|
465
|
+
default: !1
|
|
466
|
+
},
|
|
467
|
+
immediate: {
|
|
468
|
+
type: Boolean,
|
|
469
|
+
default: !1
|
|
470
|
+
},
|
|
471
|
+
rotationAngle: {
|
|
472
|
+
type: Number,
|
|
473
|
+
default: -90
|
|
474
|
+
},
|
|
475
|
+
autoRotate: {
|
|
476
|
+
type: Boolean,
|
|
477
|
+
default: !1
|
|
478
|
+
},
|
|
479
|
+
slopeRatio: {
|
|
480
|
+
type: Number,
|
|
481
|
+
default: .5
|
|
482
|
+
},
|
|
483
|
+
aggregateOthers: {
|
|
484
|
+
type: Boolean,
|
|
485
|
+
default: !1
|
|
486
|
+
},
|
|
487
|
+
othersThreshold: {
|
|
488
|
+
type: Number,
|
|
489
|
+
default: .01
|
|
490
|
+
},
|
|
491
|
+
othersLabel: {
|
|
492
|
+
type: String,
|
|
493
|
+
default: "Other"
|
|
494
|
+
},
|
|
495
|
+
othersColor: {
|
|
496
|
+
type: String,
|
|
497
|
+
default: "#64748b"
|
|
498
|
+
},
|
|
499
|
+
valueDecimals: {
|
|
500
|
+
type: Number,
|
|
501
|
+
default: void 0
|
|
502
|
+
},
|
|
503
|
+
selectedItemId: {
|
|
504
|
+
type: [String, Number],
|
|
505
|
+
default: null
|
|
506
|
+
},
|
|
507
|
+
selectable: {
|
|
508
|
+
type: Boolean,
|
|
509
|
+
default: !1
|
|
510
|
+
},
|
|
511
|
+
is3D: {
|
|
512
|
+
type: Boolean,
|
|
513
|
+
default: !0
|
|
514
|
+
},
|
|
515
|
+
showLabels: {
|
|
516
|
+
type: Boolean,
|
|
517
|
+
default: !0
|
|
518
|
+
},
|
|
519
|
+
thickness: {
|
|
520
|
+
type: Number,
|
|
521
|
+
default: .5,
|
|
522
|
+
validator: (e) => e >= 0 && e <= 1
|
|
523
|
+
},
|
|
524
|
+
showCenterText: {
|
|
525
|
+
type: Boolean,
|
|
526
|
+
default: !0
|
|
527
|
+
},
|
|
528
|
+
centerValueFormatter: {
|
|
529
|
+
type: Function,
|
|
530
|
+
default: null
|
|
531
|
+
}
|
|
532
|
+
},
|
|
533
|
+
emits: ["update:hoveredItemId", "update:selectedItemId"],
|
|
534
|
+
setup(t, { expose: n, emit: i }) {
|
|
535
|
+
let c = t, l = i, g = null, y = _(null), b = _(null), S = r({
|
|
536
|
+
get() {
|
|
537
|
+
return c.selectedItemId !== void 0 && c.selectedItemId !== null ? c.selectedItemId : b.value;
|
|
538
|
+
},
|
|
539
|
+
set(e) {
|
|
540
|
+
b.value = e, l("update:selectedItemId", e);
|
|
541
|
+
}
|
|
542
|
+
}), w = r(() => j.value ? null : y.value === null ? c.selectable ? S.value : null : y.value), T = !1, E = (e) => {
|
|
543
|
+
!c.selectable || j.value || (T = !0, S.value === e ? S.value = null : S.value = e);
|
|
544
|
+
}, D = (e) => {
|
|
545
|
+
j.value || (y.value = e);
|
|
546
|
+
}, O = _(null), k = (e) => {
|
|
547
|
+
if (c.selectable) {
|
|
548
|
+
if (T) {
|
|
549
|
+
T = !1;
|
|
550
|
+
return;
|
|
551
|
+
}
|
|
552
|
+
O.value && O.value.contains(e.target) && (S.value = null);
|
|
553
|
+
}
|
|
554
|
+
}, A = _([]), j = r(() => (c.data || []).filter((e) => e.value > .001).length <= 1), M = [
|
|
555
|
+
"#3b82f6",
|
|
556
|
+
"#10b981",
|
|
557
|
+
"#a855f7",
|
|
558
|
+
"#f59e0b",
|
|
559
|
+
"#ec4899",
|
|
560
|
+
"#14b8a6",
|
|
561
|
+
"#f43f5e",
|
|
562
|
+
"#6366f1"
|
|
563
|
+
], N = (e, t = .6) => {
|
|
564
|
+
if (!e) return "#000000";
|
|
565
|
+
let n = 0, r = 0, i = 0, a = 1;
|
|
566
|
+
if (e.startsWith("#")) {
|
|
567
|
+
let t = e.slice(1);
|
|
568
|
+
t.length === 3 ? (n = parseInt(t[0] + t[0], 16), r = parseInt(t[1] + t[1], 16), i = parseInt(t[2] + t[2], 16)) : t.length === 6 && (n = parseInt(t.slice(0, 2), 16), r = parseInt(t.slice(2, 4), 16), i = parseInt(t.slice(4, 6), 16));
|
|
569
|
+
} else if (e.startsWith("rgb")) {
|
|
570
|
+
let t = e.match(/\d+(\.\d+)?/g);
|
|
571
|
+
t && (n = parseInt(t[0]), r = parseInt(t[1]), i = parseInt(t[2]), t[3] && (a = parseFloat(t[3])));
|
|
572
|
+
} else return e;
|
|
573
|
+
return n = Math.floor(n * t), r = Math.floor(r * t), i = Math.floor(i * t), `rgba(${n}, ${r}, ${i}, ${a})`;
|
|
574
|
+
}, P = (e, t = 1.2) => {
|
|
575
|
+
if (!e) return "#ffffff";
|
|
576
|
+
let n = 0, r = 0, i = 0, a = 1;
|
|
577
|
+
if (e.startsWith("#")) {
|
|
578
|
+
let t = e.slice(1);
|
|
579
|
+
t.length === 3 ? (n = parseInt(t[0] + t[0], 16), r = parseInt(t[1] + t[1], 16), i = parseInt(t[2] + t[2], 16)) : t.length === 6 && (n = parseInt(t.slice(0, 2), 16), r = parseInt(t.slice(2, 4), 16), i = parseInt(t.slice(4, 6), 16));
|
|
580
|
+
} else if (e.startsWith("rgb")) {
|
|
581
|
+
let t = e.match(/\d+(\.\d+)?/g);
|
|
582
|
+
t && (n = parseInt(t[0]), r = parseInt(t[1]), i = parseInt(t[2]), t[3] && (a = parseFloat(t[3])));
|
|
583
|
+
} else return e;
|
|
584
|
+
return n = Math.min(255, Math.floor(n * t)), r = Math.min(255, Math.floor(r * t)), i = Math.min(255, Math.floor(i * t)), `rgba(${n}, ${r}, ${i}, ${a})`;
|
|
585
|
+
}, F = (e, t) => e.color ? e.color : M[t % M.length], I = (e, t, n, r) => {
|
|
586
|
+
if (e.length === 0) return;
|
|
587
|
+
e.sort((e, t) => e.desiredY - t.desiredY);
|
|
588
|
+
for (let t = 1; t < e.length; t++) e[t].finalY < e[t - 1].finalY + 15 && (e[t].finalY = e[t - 1].finalY + 15);
|
|
589
|
+
let i = n - 15;
|
|
590
|
+
if (e[e.length - 1].finalY > i) {
|
|
591
|
+
e[e.length - 1].finalY = i;
|
|
592
|
+
for (let t = e.length - 2; t >= 0; t--) e[t].finalY > e[t + 1].finalY - 15 && (e[t].finalY = e[t + 1].finalY - 15);
|
|
593
|
+
}
|
|
594
|
+
if (e[0].finalY < 15) {
|
|
595
|
+
e[0].finalY = 15;
|
|
596
|
+
for (let t = 1; t < e.length; t++) e[t].finalY < e[t - 1].finalY + 15 && (e[t].finalY = e[t - 1].finalY + 15);
|
|
597
|
+
}
|
|
598
|
+
}, L = (e) => typeof e == "number" ? c.valueDecimals !== void 0 && c.valueDecimals !== null ? e.toFixed(c.valueDecimals) : Number(e.toFixed(10)) : e, R = (e, t = 15) => e ? e.length > t ? e.slice(0, t - 1) + "…" : e : "", z = (e) => String(e).replace(/[^a-zA-Z0-9_-]/g, "_"), B = r(() => {
|
|
599
|
+
let e = c.data || [];
|
|
600
|
+
if (e.length === 0) return [];
|
|
601
|
+
let t = e.reduce((e, t) => e + (t.value || 0), 0);
|
|
602
|
+
if (!c.aggregateOthers) return e.map((e) => {
|
|
603
|
+
let n = e.value || 0, r = t > 0 ? Math.round(n / t * 100) : 0;
|
|
604
|
+
return {
|
|
605
|
+
...e,
|
|
606
|
+
percentage: r
|
|
607
|
+
};
|
|
608
|
+
});
|
|
609
|
+
if (t === 0) return e.map((e) => ({
|
|
610
|
+
...e,
|
|
611
|
+
percentage: 0
|
|
612
|
+
}));
|
|
613
|
+
let n = t * c.othersThreshold, r = [], i = 0;
|
|
614
|
+
if (e.forEach((e) => {
|
|
615
|
+
(e.value || 0) < n ? i += e.value || 0 : r.push({ ...e });
|
|
616
|
+
}), i > 0) {
|
|
617
|
+
let t = r.findIndex((e) => e.id === "other" || e.name.toLowerCase() === c.othersLabel.toLowerCase());
|
|
618
|
+
t === -1 ? r.push({
|
|
619
|
+
id: "other",
|
|
620
|
+
name: c.othersLabel,
|
|
621
|
+
value: i,
|
|
622
|
+
color: c.othersColor,
|
|
623
|
+
unit: e[0]?.unit || "x"
|
|
624
|
+
}) : r[t].value += i;
|
|
625
|
+
}
|
|
626
|
+
let a = r.reduce((e, t) => e + (t.value || 0), 0);
|
|
627
|
+
return r.map((e) => {
|
|
628
|
+
let t = e.value || 0, n = a > 0 ? Math.round(t / a * 100) : 0;
|
|
629
|
+
return {
|
|
630
|
+
...e,
|
|
631
|
+
percentage: n
|
|
632
|
+
};
|
|
633
|
+
});
|
|
634
|
+
}), H = r(() => A.value.reduce((e, t) => e + t.value, 0)), Ue = r(() => {
|
|
635
|
+
if (c.centerValue !== void 0 && c.centerValue !== "") return c.centerValue;
|
|
636
|
+
let e = nt.value.find((e) => e.item.id === w.value);
|
|
637
|
+
return e ? c.centerValueFormatter ? c.centerValueFormatter(e.item.value, e.item) : L(e.item.value) : c.centerValueFormatter ? c.centerValueFormatter(H.value, null) : c.valueDecimals === void 0 ? Math.round(H.value) : L(H.value);
|
|
638
|
+
}), We = r(() => {
|
|
639
|
+
let e = nt.value.find((e) => e.item.id === w.value);
|
|
640
|
+
return e ? R(e.item.name, 12).toUpperCase() : (c.centerLabel || "").toUpperCase();
|
|
641
|
+
}), Ge = (e, t = !1) => {
|
|
642
|
+
let n = new Map(A.value.map((e) => [e.id, e])), r = new Map(e.map((e) => [e.id, e])), i = [];
|
|
643
|
+
e.forEach((e) => {
|
|
644
|
+
let r = n.get(e.id);
|
|
645
|
+
r ? i.push({
|
|
646
|
+
id: e.id,
|
|
647
|
+
name: e.name,
|
|
648
|
+
value: t ? e.value : r.value,
|
|
649
|
+
startValue: r.value,
|
|
650
|
+
targetValue: e.value,
|
|
651
|
+
startPercentage: r.percentage || 0,
|
|
652
|
+
targetPercentage: e.percentage || 0,
|
|
653
|
+
percentage: t ? e.percentage || 0 : r.percentage || 0,
|
|
654
|
+
color: e.color,
|
|
655
|
+
unit: e.unit
|
|
656
|
+
}) : i.push({
|
|
657
|
+
id: e.id,
|
|
658
|
+
name: e.name,
|
|
659
|
+
value: 0,
|
|
660
|
+
startValue: 0,
|
|
661
|
+
targetValue: e.value,
|
|
662
|
+
startPercentage: 0,
|
|
663
|
+
targetPercentage: e.percentage || 0,
|
|
664
|
+
percentage: t && e.percentage || 0,
|
|
665
|
+
color: e.color,
|
|
666
|
+
unit: e.unit
|
|
667
|
+
});
|
|
668
|
+
}), A.value.forEach((e) => {
|
|
669
|
+
r.has(e.id) || i.push({
|
|
670
|
+
id: e.id,
|
|
671
|
+
name: e.name,
|
|
672
|
+
value: t ? 0 : e.value,
|
|
673
|
+
startValue: e.value,
|
|
674
|
+
targetValue: 0,
|
|
675
|
+
startPercentage: e.percentage || 0,
|
|
676
|
+
targetPercentage: 0,
|
|
677
|
+
percentage: t ? 0 : e.percentage || 0,
|
|
678
|
+
color: e.color,
|
|
679
|
+
unit: e.unit
|
|
680
|
+
});
|
|
681
|
+
}), A.value = i, t && (A.value = A.value.filter((e) => e.targetValue > 0));
|
|
682
|
+
}, Ke = (e, t = -90) => {
|
|
683
|
+
if (!e || e.length === 0) return t;
|
|
684
|
+
let n = e.reduce((e, t) => e + (t.value || 0), 0);
|
|
685
|
+
if (n === 0) return t;
|
|
686
|
+
let r = 0, i = e.map((e) => {
|
|
687
|
+
let t = (e.value || 0) / n * Math.PI * 2, i = r + t / 2;
|
|
688
|
+
return r += t, { originalMidAngleNoRot: i };
|
|
689
|
+
}), a = t, o = Infinity, s = Infinity;
|
|
690
|
+
for (let e = -180; e <= 180; e += 2) {
|
|
691
|
+
let n = e * Math.PI / 180, r = 0, c = 0;
|
|
692
|
+
i.forEach((e) => {
|
|
693
|
+
let t = e.originalMidAngleNoRot + n;
|
|
694
|
+
Math.cos(t) < 0 ? r++ : c++;
|
|
695
|
+
});
|
|
696
|
+
let l = Math.abs(r - c), u = Math.abs(e - t);
|
|
697
|
+
l < o ? (o = l, a = e, s = u) : l === o && u < s && (a = e, s = u);
|
|
698
|
+
}
|
|
699
|
+
return a;
|
|
700
|
+
}, qe = r(() => c.autoRotate && B.value && B.value.length > 0 ? Ke(B.value, c.rotationAngle) : c.rotationAngle), U = _(qe.value), W = _(!1), Je = _(!1), Ye = null, G = c.is3D, K = _(c.isExpanded ? 380 : 60), q = _(c.isExpanded ? 160 : 60), J = _(c.isExpanded ? 180 : 48), Y = _(c.isExpanded ? G ? 180 * c.slopeRatio : 180 : G ? 48 * c.slopeRatio : 48), X = _(c.isExpanded ? 180 * (1 - c.thickness) : 48 * (1 - c.thickness)), Z = _(c.isExpanded ? G ? 180 * (1 - c.thickness) * c.slopeRatio : 180 * (1 - c.thickness) : G ? 48 * (1 - c.thickness) * c.slopeRatio : 48 * (1 - c.thickness)), Xe = c.isExpanded && G ? 32 : 0, Q = _(G && c.slopeRatio > .5 ? Xe * (2 - 2 * c.slopeRatio) : Xe), Ze = _(c.isExpanded ? 760 : 120), Qe = _(c.isExpanded ? 320 : 120), $ = _(c.isExpanded && c.showLabels ? 1 : 0), $e = r(() => {
|
|
701
|
+
let e = (J.value - 48) / 132;
|
|
702
|
+
return 13 + 6 * Math.max(0, Math.min(1, e));
|
|
703
|
+
}), et = r(() => {
|
|
704
|
+
let e = (J.value - 48) / 132;
|
|
705
|
+
return 7 + 1.5 * Math.max(0, Math.min(1, e));
|
|
706
|
+
}), tt = r(() => q.value - Q.value / 2), nt = r(() => {
|
|
707
|
+
let e = A.value, t = H.value;
|
|
708
|
+
if (t === 0) return [];
|
|
709
|
+
let n = [], r = U.value * Math.PI / 180, i = K.value;
|
|
710
|
+
q.value;
|
|
711
|
+
let a = J.value, o = Y.value, s = X.value, l = Z.value, u = Q.value, d = tt.value, f = e.filter((e) => e.value > .001);
|
|
712
|
+
if (f.length === 1) {
|
|
713
|
+
let t = f[0], n = e.indexOf(t), r = F(t, n), p = `M ${i - a} ${d} A ${a} ${o} 0 0 1 ${i + a} ${d} A ${a} ${o} 0 0 1 ${i - a} ${d} M ${i - s} ${d} A ${s} ${l} 0 0 0 ${i + s} ${d} A ${s} ${l} 0 0 0 ${i - s} ${d} Z`, m = "", h = "";
|
|
714
|
+
u > 0 && (m = `M ${i + a} ${d} A ${a} ${o} 0 0 1 ${i - a} ${d} L ${i - a} ${d + u} A ${a} ${o} 0 0 0 ${i + a} ${d + u} Z`, h = `M ${i - s} ${d} A ${s} ${l} 0 0 1 ${i + s} ${d} L ${i + s} ${d + u} A ${s} ${l} 0 0 0 ${i - s} ${d + u} Z`);
|
|
715
|
+
let g = `M ${i - a} ${d} A ${a} ${o} 0 0 1 ${i + a} ${d} L ${i + s} ${d} A ${s} ${l} 0 0 0 ${i - s} ${d} Z`, _ = `M ${i - a} ${d} A ${a} ${o} 0 0 1 ${i + a} ${d} M ${i + s} ${d} A ${s} ${l} 0 0 0 ${i - s} ${d}`, v = h, y = `M ${i + a} ${d} A ${a} ${o} 0 0 1 ${i - a} ${d} L ${i - s} ${d} A ${s} ${l} 0 0 0 ${i + s} ${d} Z`, b = `M ${i + a} ${d} A ${a} ${o} 0 0 1 ${i - a} ${d} M ${i - s} ${d} A ${s} ${l} 0 0 0 ${i + s} ${d}`, x = m, S = U.value * Math.PI / 180 + Math.PI, C = i + a * Math.cos(S), w = d + o * Math.sin(S), T = i + (a + 25) * Math.cos(S), E = d + (o + 35 * c.slopeRatio) * Math.sin(S), D = i + (a + s) / 2 * Math.cos(S), O = d + (o + l) / 2 * Math.sin(S), k = a - s, A = o - l;
|
|
716
|
+
return [{
|
|
717
|
+
item: t,
|
|
718
|
+
index: n,
|
|
719
|
+
color: r,
|
|
720
|
+
isSingleSlice: !0,
|
|
721
|
+
midAngle: 3 * Math.PI / 2,
|
|
722
|
+
originalMidAngle: S,
|
|
723
|
+
originalTopPath: g,
|
|
724
|
+
fullTopPath: p,
|
|
725
|
+
hoverPath: p,
|
|
726
|
+
originalOuterWallPath: m,
|
|
727
|
+
originalInnerWallPath: v,
|
|
728
|
+
topStrokePath: _,
|
|
729
|
+
outerWallStrokePath: "",
|
|
730
|
+
innerWallStrokePath: v,
|
|
731
|
+
midY: d - o,
|
|
732
|
+
topPath: g,
|
|
733
|
+
outerWallPath: "",
|
|
734
|
+
innerWallPath: v,
|
|
735
|
+
startCutPath: "",
|
|
736
|
+
endCutPath: "",
|
|
737
|
+
x0: C,
|
|
738
|
+
y0: w,
|
|
739
|
+
x1: T,
|
|
740
|
+
y1: E,
|
|
741
|
+
topGradX1: D - k / 2,
|
|
742
|
+
topGradY1: O - A / 2,
|
|
743
|
+
topGradX2: D + k / 2,
|
|
744
|
+
topGradY2: O + A / 2,
|
|
745
|
+
wallY1: d,
|
|
746
|
+
wallY2: d + u
|
|
747
|
+
}, {
|
|
748
|
+
item: t,
|
|
749
|
+
index: n,
|
|
750
|
+
color: r,
|
|
751
|
+
isSingleSlice: !0,
|
|
752
|
+
midAngle: Math.PI / 2,
|
|
753
|
+
originalMidAngle: S,
|
|
754
|
+
originalTopPath: y,
|
|
755
|
+
fullTopPath: p,
|
|
756
|
+
hoverPath: p,
|
|
757
|
+
originalOuterWallPath: m,
|
|
758
|
+
originalInnerWallPath: "",
|
|
759
|
+
topStrokePath: b,
|
|
760
|
+
outerWallStrokePath: x,
|
|
761
|
+
innerWallStrokePath: "",
|
|
762
|
+
midY: d + o,
|
|
763
|
+
topPath: y,
|
|
764
|
+
outerWallPath: x,
|
|
765
|
+
innerWallPath: "",
|
|
766
|
+
startCutPath: "",
|
|
767
|
+
endCutPath: "",
|
|
768
|
+
x0: C,
|
|
769
|
+
y0: w,
|
|
770
|
+
x1: T,
|
|
771
|
+
y1: E,
|
|
772
|
+
topGradX1: D - k / 2,
|
|
773
|
+
topGradY1: O - A / 2,
|
|
774
|
+
topGradX2: D + k / 2,
|
|
775
|
+
topGradY2: O + A / 2,
|
|
776
|
+
wallY1: d,
|
|
777
|
+
wallY2: d + u
|
|
778
|
+
}];
|
|
779
|
+
}
|
|
780
|
+
return e.forEach((e, f) => {
|
|
781
|
+
let p = e.value / t * Math.PI * 2;
|
|
782
|
+
if (p <= 0) return;
|
|
783
|
+
p >= Math.PI * 2 - .001 && (p = Math.PI * 2 - .001);
|
|
784
|
+
let m = r, h = r + p, g = m + p / 2, _ = F(e, f), v = i + a * Math.cos(m), y = d + o * Math.sin(m), b = i + a * Math.cos(h), x = d + o * Math.sin(h), S = i + s * Math.cos(h), C = d + l * Math.sin(h), w = i + s * Math.cos(m), T = d + l * Math.sin(m), E = +(p > Math.PI), D = `M ${v} ${y} A ${a} ${o} 0 ${E} 1 ${b} ${x} L ${S} ${C} A ${s} ${l} 0 ${E} 0 ${w} ${T} Z`, O = u > 0 ? `M ${v} ${y} A ${a} ${o} 0 ${E} 1 ${b} ${x} L ${b} ${x + u} A ${a} ${o} 0 ${E} 0 ${v} ${y + u} Z` : "", k = u > 0 ? `M ${w} ${T} A ${s} ${l} 0 ${E} 1 ${S} ${C} L ${S} ${C + u} A ${s} ${l} 0 ${E} 0 ${w} ${T + u} Z` : "", A = ((e) => {
|
|
785
|
+
let t = e % (Math.PI * 2);
|
|
786
|
+
return t < 0 && (t += Math.PI * 2), t;
|
|
787
|
+
})(m), j = A + p, M = [], N = Math.ceil(A / Math.PI), P = Math.floor(j / Math.PI);
|
|
788
|
+
for (let e = N; e <= P; e++) M.push(e * Math.PI);
|
|
789
|
+
let I = [{
|
|
790
|
+
start: A,
|
|
791
|
+
end: j
|
|
792
|
+
}];
|
|
793
|
+
M.forEach((e) => {
|
|
794
|
+
let t = [];
|
|
795
|
+
I.forEach((n) => {
|
|
796
|
+
n.start < e && n.end > e ? (t.push({
|
|
797
|
+
start: n.start,
|
|
798
|
+
end: Math.min(n.end, e + 2e-4)
|
|
799
|
+
}), t.push({
|
|
800
|
+
start: Math.max(n.start, e - 2e-4),
|
|
801
|
+
end: n.end
|
|
802
|
+
})) : t.push(n);
|
|
803
|
+
}), I = t;
|
|
804
|
+
}), I.forEach((t) => {
|
|
805
|
+
let r = t.start, p = t.end, m = (r + p) / 2, h = i + a * Math.cos(r), v = d + o * Math.sin(r), y = i + a * Math.cos(p), b = d + o * Math.sin(p), x = i + s * Math.cos(p), S = d + l * Math.sin(p), C = i + s * Math.cos(r), w = d + l * Math.sin(r), T = +(p - r > Math.PI), E = `M ${h} ${v} A ${a} ${o} 0 ${T} 1 ${y} ${b} L ${x} ${S} A ${s} ${l} 0 ${T} 0 ${C} ${w} Z`, M = Math.abs(p - j) >= .001, N = Math.abs(r - A) >= .001, P = "";
|
|
806
|
+
M ? (P = `M ${h} ${v} A ${a} ${o} 0 ${T} 1 ${y} ${b} M ${x} ${S} A ${s} ${l} 0 ${T} 0 ${C} ${w}`, N || (P += ` L ${h} ${v}`)) : (P = `M ${h} ${v} A ${a} ${o} 0 ${T} 1 ${y} ${b} L ${x} ${S} A ${s} ${l} 0 ${T} 0 ${C} ${w}`, N || (P += " Z"));
|
|
807
|
+
let F = "", I = "", L = "", R = "", z = "", B = "";
|
|
808
|
+
u > 0 && (F = `M ${h} ${v} A ${a} ${o} 0 ${T} 1 ${y} ${b} L ${y} ${b + u} A ${a} ${o} 0 ${T} 0 ${h} ${v + u} Z`, I = `M ${C} ${w} A ${s} ${l} 0 ${T} 1 ${x} ${S} L ${x} ${S + u} A ${s} ${l} 0 ${T} 0 ${C} ${w + u} Z`, M ? (L = `M ${h} ${v} A ${a} ${o} 0 ${T} 1 ${y} ${b} M ${y} ${b + u} A ${a} ${o} 0 ${T} 0 ${h} ${v + u}`, N || (L += ` L ${h} ${v}`)) : (L = `M ${h} ${v} A ${a} ${o} 0 ${T} 1 ${y} ${b} L ${y} ${b + u} A ${a} ${o} 0 ${T} 0 ${h} ${v + u}`, N || (L += " Z")), M ? (R = `M ${C} ${w} A ${s} ${l} 0 ${T} 1 ${x} ${S} M ${x} ${S + u} A ${s} ${l} 0 ${T} 0 ${C} ${w + u}`, N || (R += ` L ${C} ${w}`)) : (R = `M ${C} ${w} A ${s} ${l} 0 ${T} 1 ${x} ${S} L ${x} ${S + u} A ${s} ${l} 0 ${T} 0 ${C} ${w + u}`, N || (R += " Z")), Math.abs(r - A) < .001 && (z = `M ${h} ${v} L ${C} ${w} L ${C} ${w + u} L ${h} ${v + u} Z`), Math.abs(p - j) < .001 && (B = `M ${y} ${b} L ${x} ${S} L ${x} ${S + u} L ${y} ${b + u} Z`));
|
|
809
|
+
let ee = d + o * Math.sin(m), te = i + a * Math.cos(g), V = d + o * Math.sin(g), ne = i + (a + 25) * Math.cos(g), re = d + (o + 35 * c.slopeRatio) * Math.sin(g), ie = i + (a + s) / 2 * Math.cos(g), ae = d + (o + l) / 2 * Math.sin(g), oe = a - s, se = o - l;
|
|
810
|
+
n.push({
|
|
811
|
+
item: e,
|
|
812
|
+
index: f,
|
|
813
|
+
color: _,
|
|
814
|
+
midAngle: m,
|
|
815
|
+
originalMidAngle: g,
|
|
816
|
+
originalTopPath: D,
|
|
817
|
+
originalOuterWallPath: O,
|
|
818
|
+
originalInnerWallPath: k,
|
|
819
|
+
topStrokePath: P,
|
|
820
|
+
outerWallStrokePath: L,
|
|
821
|
+
innerWallStrokePath: R,
|
|
822
|
+
midY: ee,
|
|
823
|
+
topPath: E,
|
|
824
|
+
outerWallPath: F,
|
|
825
|
+
innerWallPath: I,
|
|
826
|
+
startCutPath: z,
|
|
827
|
+
endCutPath: B,
|
|
828
|
+
x0: te,
|
|
829
|
+
y0: V,
|
|
830
|
+
x1: ne,
|
|
831
|
+
y1: re,
|
|
832
|
+
topGradX1: ie - oe / 2,
|
|
833
|
+
topGradY1: ae - se / 2,
|
|
834
|
+
topGradX2: ie + oe / 2,
|
|
835
|
+
topGradY2: ae + se / 2,
|
|
836
|
+
wallY1: V,
|
|
837
|
+
wallY2: V + u
|
|
838
|
+
});
|
|
839
|
+
}), r += p;
|
|
840
|
+
}), n.sort((e, t) => {
|
|
841
|
+
let n = w.value === e.item.id, r = w.value === t.item.id;
|
|
842
|
+
return n && !r ? 1 : !n && r ? -1 : e.midY - t.midY;
|
|
843
|
+
});
|
|
844
|
+
}), rt = r(() => {
|
|
845
|
+
let e = /* @__PURE__ */ new Set(), t = [];
|
|
846
|
+
return nt.value.forEach((n) => {
|
|
847
|
+
e.has(n.item.id) || (e.add(n.item.id), t.push(n));
|
|
848
|
+
}), t;
|
|
849
|
+
}), it = (e) => w.value === e.item.id ? { transform: `translate(${10 * Math.cos(e.originalMidAngle)}px, ${10 * Math.sin(e.originalMidAngle)}px)` } : {}, at = r(() => {
|
|
850
|
+
if ($.value <= .001) return {
|
|
851
|
+
left: [],
|
|
852
|
+
right: []
|
|
853
|
+
};
|
|
854
|
+
let e = [], t = [];
|
|
855
|
+
return rt.value.forEach((n) => {
|
|
856
|
+
let r = Math.cos(n.originalMidAngle) < 0, i = Math.sin(n.originalMidAngle) > 0, a = Q.value, o = n.y0 + (i ? a : 0), s = n.y1 + (i ? a : 0), c = {
|
|
857
|
+
item: n.item,
|
|
858
|
+
index: n.index,
|
|
859
|
+
color: n.color,
|
|
860
|
+
x0: n.x0,
|
|
861
|
+
y0: o,
|
|
862
|
+
x1: n.x1,
|
|
863
|
+
y1: s,
|
|
864
|
+
desiredY: s,
|
|
865
|
+
finalY: s,
|
|
866
|
+
isLeft: r,
|
|
867
|
+
originalMidAngle: n.originalMidAngle
|
|
868
|
+
};
|
|
869
|
+
r ? e.push(c) : t.push(c);
|
|
870
|
+
}), I(e, 144, 320, 1), I(t, 144, 320, 1), {
|
|
871
|
+
left: e,
|
|
872
|
+
right: t
|
|
873
|
+
};
|
|
874
|
+
}), ot = r(() => at.value.left), st = r(() => at.value.right), ct = (e) => {
|
|
875
|
+
let t = w.value === e.item.id, n = e.x0, r = e.y0, i = e.finalY;
|
|
876
|
+
if (t) {
|
|
877
|
+
let t = 10 * Math.cos(e.originalMidAngle || 0), a = 10 * Math.sin(e.originalMidAngle || 0);
|
|
878
|
+
n += t, r += a, i -= 5;
|
|
879
|
+
}
|
|
880
|
+
let a = n + 30 * Math.cos(e.originalMidAngle || 0), o = r + 30 * Math.sin(e.originalMidAngle || 0), s = e.isLeft, c = Math.sin(e.originalMidAngle || 0) < 0, l = K.value, u = J.value, d = s ? l - u - 15 : l + u + 15, f = s ? Math.min(d, a - 30) : Math.max(d, a + 30);
|
|
881
|
+
return `M ${n} ${r} C ${a} ${o}, ${f} ${c ? Math.min(o, i) : Math.max(o, i)}, ${s ? 90 : 670} ${i}`;
|
|
882
|
+
}, lt = (e = 450) => {
|
|
883
|
+
if (c.currentLowFxMode || c.immediate) {
|
|
884
|
+
A.value.forEach((e) => {
|
|
885
|
+
e.value = e.targetValue, e.percentage = e.targetPercentage === void 0 ? 0 : e.targetPercentage;
|
|
886
|
+
}), A.value = A.value.filter((e) => e.targetValue > 0), U.value = qe.value;
|
|
887
|
+
let e = c.is3D;
|
|
888
|
+
K.value = c.isExpanded ? 380 : 60, q.value = c.isExpanded ? 160 : 60, J.value = c.isExpanded ? 180 : 48, Y.value = c.isExpanded ? e ? 180 * c.slopeRatio : 180 : e ? 48 * c.slopeRatio : 48, X.value = c.isExpanded ? 180 * (1 - c.thickness) : 48 * (1 - c.thickness), Z.value = c.isExpanded ? e ? 180 * (1 - c.thickness) * c.slopeRatio : 180 * (1 - c.thickness) : e ? 48 * (1 - c.thickness) * c.slopeRatio : 48 * (1 - c.thickness);
|
|
889
|
+
let t = c.isExpanded && e ? 32 : 0;
|
|
890
|
+
Q.value = e && c.slopeRatio > .5 ? t * (2 - 2 * c.slopeRatio) : t, Ze.value = c.isExpanded ? 760 : 120, Qe.value = c.isExpanded ? 320 : 120, $.value = c.isExpanded && c.showLabels ? 1 : 0, W.value = !1;
|
|
891
|
+
return;
|
|
892
|
+
}
|
|
893
|
+
g && cancelAnimationFrame(g), W.value = !0;
|
|
894
|
+
let t = performance.now(), n = U.value, r = qe.value, i = K.value, a = q.value, o = J.value, s = Y.value, l = X.value, u = Z.value, d = Q.value, f = Ze.value, p = Qe.value, m = $.value, h = c.is3D, _ = c.isExpanded ? 380 : 60, v = c.isExpanded ? 160 : 60, y = c.isExpanded ? 180 : 48, b = c.isExpanded ? h ? 180 * c.slopeRatio : 180 : h ? 48 * c.slopeRatio : 48, x = c.isExpanded ? 180 * (1 - c.thickness) : 48 * (1 - c.thickness), S = c.isExpanded ? h ? 180 * (1 - c.thickness) * c.slopeRatio : 180 * (1 - c.thickness) : h ? 48 * (1 - c.thickness) * c.slopeRatio : 48 * (1 - c.thickness), C = c.isExpanded && h ? 32 : 0, w = h && c.slopeRatio > .5 ? C * (2 - 2 * c.slopeRatio) : C, T = c.isExpanded ? 760 : 120, E = c.isExpanded ? 320 : 120, D = c.isExpanded && c.showLabels ? 1 : 0, O = (c) => {
|
|
895
|
+
let h = c - t, C = Math.min(1, h / e), k = 1 - (1 - C) ** 3;
|
|
896
|
+
A.value.forEach((e) => {
|
|
897
|
+
e.value = e.startValue + (e.targetValue - e.startValue) * k;
|
|
898
|
+
let t = e.startPercentage === void 0 ? 0 : e.startPercentage, n = e.targetPercentage === void 0 ? 0 : e.targetPercentage;
|
|
899
|
+
e.percentage = Math.round(t + (n - t) * k);
|
|
900
|
+
}), U.value = n + (r - n) * k, K.value = i + (_ - i) * k, q.value = a + (v - a) * k, J.value = o + (y - o) * k, Y.value = s + (b - s) * k, X.value = l + (x - l) * k, Z.value = u + (S - u) * k, Q.value = d + (w - d) * k, Ze.value = f + (T - f) * k, Qe.value = p + (E - p) * k, $.value = m + (D - m) * k, C < 1 ? g = requestAnimationFrame(O) : (g = null, A.value.forEach((e) => {
|
|
901
|
+
e.value = e.targetValue, e.percentage = e.targetPercentage === void 0 ? 0 : e.targetPercentage;
|
|
902
|
+
}), A.value = A.value.filter((e) => e.targetValue > 0), K.value = _, q.value = v, J.value = y, Y.value = b, X.value = x, Z.value = S, Q.value = w, Ze.value = T, Qe.value = E, $.value = D, W.value = !1);
|
|
903
|
+
};
|
|
904
|
+
g = requestAnimationFrame(O);
|
|
905
|
+
}, ut = (e) => {
|
|
906
|
+
if (e.isSingleSlice) return !0;
|
|
907
|
+
let t = nt.value, n = -1;
|
|
908
|
+
for (let r = t.length - 1; r >= 0; r--) if (t[r].item.id === e.item.id) {
|
|
909
|
+
n = r;
|
|
910
|
+
break;
|
|
911
|
+
}
|
|
912
|
+
return t.indexOf(e) === n;
|
|
913
|
+
};
|
|
914
|
+
return C(B, (e) => {
|
|
915
|
+
let t = c.immediate || c.currentLowFxMode;
|
|
916
|
+
Ge(e || [], t), t || lt();
|
|
917
|
+
}, {
|
|
918
|
+
deep: !0,
|
|
919
|
+
immediate: !0
|
|
920
|
+
}), C(() => c.rotationAngle, () => {
|
|
921
|
+
Je.value = !0, Ye && clearTimeout(Ye), Ye = setTimeout(() => {
|
|
922
|
+
Je.value = !1;
|
|
923
|
+
}, 100);
|
|
924
|
+
}), C(qe, (e) => {
|
|
925
|
+
c.immediate || c.currentLowFxMode ? U.value = e : lt();
|
|
926
|
+
}), C(() => c.isExpanded, () => {
|
|
927
|
+
u(() => {
|
|
928
|
+
lt();
|
|
929
|
+
});
|
|
930
|
+
}), C(() => c.is3D, () => {
|
|
931
|
+
u(() => {
|
|
932
|
+
lt();
|
|
933
|
+
});
|
|
934
|
+
}), C(() => c.showLabels, () => {
|
|
935
|
+
u(() => {
|
|
936
|
+
lt();
|
|
937
|
+
});
|
|
938
|
+
}), C(() => c.slopeRatio, (e) => {
|
|
939
|
+
if (c.is3D) {
|
|
940
|
+
Y.value = c.isExpanded ? 180 * e : 48;
|
|
941
|
+
let t = c.isExpanded ? 180 : 48, n = c.isExpanded ? 180 * e : 48;
|
|
942
|
+
X.value = t * (1 - c.thickness), Z.value = n * (1 - c.thickness);
|
|
943
|
+
let r = c.isExpanded ? 32 : 0;
|
|
944
|
+
Q.value = e > .5 ? r * (2 - 2 * e) : r;
|
|
945
|
+
}
|
|
946
|
+
}), C(() => c.thickness, (e) => {
|
|
947
|
+
let t = c.is3D, n = c.isExpanded ? 180 : 48, r = c.isExpanded ? t ? 180 * c.slopeRatio : 180 : t ? 48 * c.slopeRatio : 48;
|
|
948
|
+
X.value = n * (1 - e), Z.value = r * (1 - e);
|
|
949
|
+
}), C(() => c.hoveredItemId, (e) => {
|
|
950
|
+
y.value !== e && (y.value = e);
|
|
951
|
+
}), C(y, (e) => {
|
|
952
|
+
c.hoveredItemId !== e && l("update:hoveredItemId", e);
|
|
953
|
+
}), p(() => {
|
|
954
|
+
document.addEventListener("click", k), u(() => {
|
|
955
|
+
lt();
|
|
956
|
+
});
|
|
957
|
+
}), m(() => {
|
|
958
|
+
document.removeEventListener("click", k), g && cancelAnimationFrame(g);
|
|
959
|
+
}), n({ redraw: () => {
|
|
960
|
+
g && cancelAnimationFrame(g), g = null, A.value.forEach((e) => {
|
|
961
|
+
e.value = e.targetValue;
|
|
962
|
+
}), A.value = A.value.filter((e) => e.targetValue > 0);
|
|
963
|
+
} }), (n, r) => (h(), o("div", {
|
|
964
|
+
ref_key: "wrapperRef",
|
|
965
|
+
ref: O,
|
|
966
|
+
class: d(["donut-canvas-wrapper", {
|
|
967
|
+
"is-expanded": t.isExpanded,
|
|
968
|
+
"no-transitions": W.value || Je.value
|
|
969
|
+
}])
|
|
970
|
+
}, [(h(), o("svg", {
|
|
971
|
+
viewBox: `0 0 ${Ze.value} ${Qe.value}`,
|
|
972
|
+
class: "items-svg-chart",
|
|
973
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
974
|
+
}, [B.value && B.value.length > 0 ? (h(), o("defs", te, [
|
|
975
|
+
(h(!0), o(e, null, v(rt.value, (e) => (h(), o("linearGradient", {
|
|
976
|
+
key: "top-grad-" + z(e.item.id),
|
|
977
|
+
id: "top-grad-" + z(e.item.id),
|
|
978
|
+
gradientUnits: "userSpaceOnUse",
|
|
979
|
+
x1: e.topGradX1,
|
|
980
|
+
y1: e.topGradY1,
|
|
981
|
+
x2: e.topGradX2,
|
|
982
|
+
y2: e.topGradY2
|
|
983
|
+
}, [s("stop", {
|
|
984
|
+
offset: "0%",
|
|
985
|
+
"stop-color": P(e.color, 1.15)
|
|
986
|
+
}, null, 8, ne), s("stop", {
|
|
987
|
+
offset: "100%",
|
|
988
|
+
"stop-color": N(e.color, .85)
|
|
989
|
+
}, null, 8, re)], 8, V))), 128)),
|
|
990
|
+
(h(!0), o(e, null, v(rt.value, (e) => (h(), o("linearGradient", {
|
|
991
|
+
key: "outer-grad-" + z(e.item.id),
|
|
992
|
+
id: "outer-grad-" + z(e.item.id),
|
|
993
|
+
gradientUnits: "userSpaceOnUse",
|
|
994
|
+
x1: "0",
|
|
995
|
+
y1: e.wallY1,
|
|
996
|
+
x2: "0",
|
|
997
|
+
y2: e.wallY2
|
|
998
|
+
}, [s("stop", {
|
|
999
|
+
offset: "0%",
|
|
1000
|
+
"stop-color": N(e.color, .75)
|
|
1001
|
+
}, null, 8, ae), s("stop", {
|
|
1002
|
+
offset: "100%",
|
|
1003
|
+
"stop-color": N(e.color, .5)
|
|
1004
|
+
}, null, 8, oe)], 8, ie))), 128)),
|
|
1005
|
+
(h(!0), o(e, null, v(rt.value, (e) => (h(), o("linearGradient", {
|
|
1006
|
+
key: "inner-grad-" + z(e.item.id),
|
|
1007
|
+
id: "inner-grad-" + z(e.item.id),
|
|
1008
|
+
gradientUnits: "userSpaceOnUse",
|
|
1009
|
+
x1: "0",
|
|
1010
|
+
y1: e.wallY1,
|
|
1011
|
+
x2: "0",
|
|
1012
|
+
y2: e.wallY2
|
|
1013
|
+
}, [s("stop", {
|
|
1014
|
+
offset: "0%",
|
|
1015
|
+
"stop-color": N(e.color, .6)
|
|
1016
|
+
}, null, 8, ce), s("stop", {
|
|
1017
|
+
offset: "100%",
|
|
1018
|
+
"stop-color": N(e.color, .4)
|
|
1019
|
+
}, null, 8, le)], 8, se))), 128))
|
|
1020
|
+
])) : a("", !0), !B.value || B.value.length === 0 ? (h(), o("g", ue, [s("text", {
|
|
1021
|
+
x: t.isExpanded ? 380 : 60,
|
|
1022
|
+
y: t.isExpanded ? 160 : 60,
|
|
1023
|
+
fill: "#64748b",
|
|
1024
|
+
"font-size": "12",
|
|
1025
|
+
"font-family": "system-ui, -apple-system, sans-serif",
|
|
1026
|
+
"text-anchor": "middle",
|
|
1027
|
+
"dominant-baseline": "middle"
|
|
1028
|
+
}, x(t.emptyText || "No data"), 9, de)])) : (h(), o("g", fe, [
|
|
1029
|
+
(h(!0), o(e, null, v(nt.value.filter((e) => e.midY < tt.value), (e) => (h(), o("g", {
|
|
1030
|
+
key: "slice-sub-back-" + e.item.id + "-" + e.midAngle,
|
|
1031
|
+
class: d(["slice-group-3d", {
|
|
1032
|
+
"is-hovered": w.value === e.item.id,
|
|
1033
|
+
"is-dimmed": w.value !== null && w.value !== e.item.id
|
|
1034
|
+
}]),
|
|
1035
|
+
style: f(it(e))
|
|
1036
|
+
}, [
|
|
1037
|
+
t.isExpanded && e.innerWallPath ? (h(), o("path", {
|
|
1038
|
+
key: 0,
|
|
1039
|
+
d: e.innerWallPath,
|
|
1040
|
+
fill: `url(#inner-grad-${z(e.item.id)})`
|
|
1041
|
+
}, null, 8, pe)) : a("", !0),
|
|
1042
|
+
t.isExpanded && e.innerWallStrokePath ? (h(), o("path", {
|
|
1043
|
+
key: 1,
|
|
1044
|
+
d: e.innerWallStrokePath,
|
|
1045
|
+
fill: "none",
|
|
1046
|
+
stroke: `url(#inner-grad-${z(e.item.id)})`,
|
|
1047
|
+
"stroke-width": "0.8",
|
|
1048
|
+
"stroke-linejoin": "round"
|
|
1049
|
+
}, null, 8, me)) : a("", !0),
|
|
1050
|
+
t.isExpanded && e.startCutPath ? (h(), o("path", {
|
|
1051
|
+
key: 2,
|
|
1052
|
+
d: e.startCutPath,
|
|
1053
|
+
fill: N(e.color, .65)
|
|
1054
|
+
}, null, 8, he)) : a("", !0),
|
|
1055
|
+
t.isExpanded && e.endCutPath ? (h(), o("path", {
|
|
1056
|
+
key: 3,
|
|
1057
|
+
d: e.endCutPath,
|
|
1058
|
+
fill: N(e.color, .75)
|
|
1059
|
+
}, null, 8, ge)) : a("", !0),
|
|
1060
|
+
t.isExpanded && e.outerWallPath ? (h(), o("path", {
|
|
1061
|
+
key: 4,
|
|
1062
|
+
d: e.outerWallPath,
|
|
1063
|
+
fill: `url(#outer-grad-${z(e.item.id)})`
|
|
1064
|
+
}, null, 8, _e)) : a("", !0),
|
|
1065
|
+
t.isExpanded && e.outerWallStrokePath ? (h(), o("path", {
|
|
1066
|
+
key: 5,
|
|
1067
|
+
d: e.outerWallStrokePath,
|
|
1068
|
+
fill: "none",
|
|
1069
|
+
stroke: `url(#outer-grad-${z(e.item.id)})`,
|
|
1070
|
+
"stroke-width": "0.8",
|
|
1071
|
+
"stroke-linejoin": "round"
|
|
1072
|
+
}, null, 8, ve)) : a("", !0),
|
|
1073
|
+
ut(e) ? (h(), o("path", {
|
|
1074
|
+
key: 6,
|
|
1075
|
+
d: e.originalTopPath,
|
|
1076
|
+
fill: `url(#top-grad-${z(e.item.id)})`
|
|
1077
|
+
}, null, 8, ye)) : a("", !0),
|
|
1078
|
+
ut(e) ? (h(), o("path", {
|
|
1079
|
+
key: 7,
|
|
1080
|
+
d: e.topStrokePath,
|
|
1081
|
+
fill: "none",
|
|
1082
|
+
stroke: `url(#top-grad-${z(e.item.id)})`,
|
|
1083
|
+
"stroke-width": "0.8",
|
|
1084
|
+
"stroke-linejoin": "round"
|
|
1085
|
+
}, null, 8, be)) : a("", !0),
|
|
1086
|
+
ut(e) ? (h(), o("path", {
|
|
1087
|
+
key: 8,
|
|
1088
|
+
d: e.topStrokePath,
|
|
1089
|
+
fill: "none",
|
|
1090
|
+
stroke: "rgba(255, 255, 255, 0.16)",
|
|
1091
|
+
"stroke-width": t.isExpanded ? .8 : .5,
|
|
1092
|
+
"stroke-linejoin": "round"
|
|
1093
|
+
}, null, 8, xe)) : a("", !0)
|
|
1094
|
+
], 6))), 128)),
|
|
1095
|
+
c.showCenterText ? (h(), o("g", {
|
|
1096
|
+
key: 0,
|
|
1097
|
+
transform: `translate(${K.value}, ${q.value})`,
|
|
1098
|
+
class: "center-text-group"
|
|
1099
|
+
}, [s("text", {
|
|
1100
|
+
x: "0",
|
|
1101
|
+
y: "-3",
|
|
1102
|
+
class: "center-text-value",
|
|
1103
|
+
"font-size": $e.value,
|
|
1104
|
+
"font-weight": "bold",
|
|
1105
|
+
"font-family": "'JetBrains Mono', monospace",
|
|
1106
|
+
"text-anchor": "middle",
|
|
1107
|
+
"dominant-baseline": "middle"
|
|
1108
|
+
}, x(Ue.value), 9, Ce), s("text", {
|
|
1109
|
+
x: "0",
|
|
1110
|
+
y: "10",
|
|
1111
|
+
class: "center-text-label",
|
|
1112
|
+
"font-size": et.value,
|
|
1113
|
+
"font-family": "system-ui, -apple-system, sans-serif",
|
|
1114
|
+
"font-weight": "600",
|
|
1115
|
+
"text-anchor": "middle",
|
|
1116
|
+
"dominant-baseline": "middle"
|
|
1117
|
+
}, x(We.value), 9, we)], 8, Se)) : a("", !0),
|
|
1118
|
+
(h(!0), o(e, null, v(nt.value.filter((e) => e.midY >= tt.value), (e) => (h(), o("g", {
|
|
1119
|
+
key: "slice-sub-front-" + e.item.id + "-" + e.midAngle,
|
|
1120
|
+
class: d(["slice-group-3d", {
|
|
1121
|
+
"is-hovered": w.value === e.item.id,
|
|
1122
|
+
"is-dimmed": w.value !== null && w.value !== e.item.id
|
|
1123
|
+
}]),
|
|
1124
|
+
style: f(it(e))
|
|
1125
|
+
}, [
|
|
1126
|
+
t.isExpanded && e.innerWallPath ? (h(), o("path", {
|
|
1127
|
+
key: 0,
|
|
1128
|
+
d: e.innerWallPath,
|
|
1129
|
+
fill: `url(#inner-grad-${z(e.item.id)})`
|
|
1130
|
+
}, null, 8, Te)) : a("", !0),
|
|
1131
|
+
t.isExpanded && e.innerWallStrokePath ? (h(), o("path", {
|
|
1132
|
+
key: 1,
|
|
1133
|
+
d: e.innerWallStrokePath,
|
|
1134
|
+
fill: "none",
|
|
1135
|
+
stroke: `url(#inner-grad-${z(e.item.id)})`,
|
|
1136
|
+
"stroke-width": "0.8",
|
|
1137
|
+
"stroke-linejoin": "round"
|
|
1138
|
+
}, null, 8, Ee)) : a("", !0),
|
|
1139
|
+
t.isExpanded && e.startCutPath ? (h(), o("path", {
|
|
1140
|
+
key: 2,
|
|
1141
|
+
d: e.startCutPath,
|
|
1142
|
+
fill: N(e.color, .65)
|
|
1143
|
+
}, null, 8, De)) : a("", !0),
|
|
1144
|
+
t.isExpanded && e.endCutPath ? (h(), o("path", {
|
|
1145
|
+
key: 3,
|
|
1146
|
+
d: e.endCutPath,
|
|
1147
|
+
fill: N(e.color, .75)
|
|
1148
|
+
}, null, 8, Oe)) : a("", !0),
|
|
1149
|
+
t.isExpanded && e.outerWallPath ? (h(), o("path", {
|
|
1150
|
+
key: 4,
|
|
1151
|
+
d: e.outerWallPath,
|
|
1152
|
+
fill: `url(#outer-grad-${z(e.item.id)})`
|
|
1153
|
+
}, null, 8, ke)) : a("", !0),
|
|
1154
|
+
t.isExpanded && e.outerWallStrokePath ? (h(), o("path", {
|
|
1155
|
+
key: 5,
|
|
1156
|
+
d: e.outerWallStrokePath,
|
|
1157
|
+
fill: "none",
|
|
1158
|
+
stroke: `url(#outer-grad-${z(e.item.id)})`,
|
|
1159
|
+
"stroke-width": "0.8",
|
|
1160
|
+
"stroke-linejoin": "round"
|
|
1161
|
+
}, null, 8, Ae)) : a("", !0),
|
|
1162
|
+
ut(e) ? (h(), o("path", {
|
|
1163
|
+
key: 6,
|
|
1164
|
+
d: e.originalTopPath,
|
|
1165
|
+
fill: `url(#top-grad-${z(e.item.id)})`
|
|
1166
|
+
}, null, 8, je)) : a("", !0),
|
|
1167
|
+
ut(e) ? (h(), o("path", {
|
|
1168
|
+
key: 7,
|
|
1169
|
+
d: e.topStrokePath,
|
|
1170
|
+
fill: "none",
|
|
1171
|
+
stroke: `url(#top-grad-${z(e.item.id)})`,
|
|
1172
|
+
"stroke-width": "0.8",
|
|
1173
|
+
"stroke-linejoin": "round"
|
|
1174
|
+
}, null, 8, Me)) : a("", !0),
|
|
1175
|
+
ut(e) ? (h(), o("path", {
|
|
1176
|
+
key: 8,
|
|
1177
|
+
d: e.topStrokePath,
|
|
1178
|
+
fill: "none",
|
|
1179
|
+
stroke: "rgba(255, 255, 255, 0.16)",
|
|
1180
|
+
"stroke-width": t.isExpanded ? .8 : .5,
|
|
1181
|
+
"stroke-linejoin": "round"
|
|
1182
|
+
}, null, 8, Ne)) : a("", !0)
|
|
1183
|
+
], 6))), 128)),
|
|
1184
|
+
(h(!0), o(e, null, v(rt.value, (e) => (h(), o("g", {
|
|
1185
|
+
key: "hover-trigger-" + e.item.id,
|
|
1186
|
+
class: "hover-trigger-group",
|
|
1187
|
+
style: f({ cursor: c.selectable && !j.value ? "pointer" : "default" }),
|
|
1188
|
+
onMouseenter: (t) => D(e.item.id),
|
|
1189
|
+
onMouseleave: r[0] ||= (e) => y.value = null,
|
|
1190
|
+
onClick: (t) => E(e.item.id)
|
|
1191
|
+
}, [s("path", {
|
|
1192
|
+
d: e.hoverPath || e.originalTopPath,
|
|
1193
|
+
fill: "transparent"
|
|
1194
|
+
}, null, 8, Fe), e.originalOuterWallPath ? (h(), o("path", {
|
|
1195
|
+
key: 0,
|
|
1196
|
+
d: e.originalOuterWallPath,
|
|
1197
|
+
fill: "transparent"
|
|
1198
|
+
}, null, 8, Ie)) : a("", !0)], 44, Pe))), 128)),
|
|
1199
|
+
s("g", {
|
|
1200
|
+
class: "labels-layer",
|
|
1201
|
+
style: f({
|
|
1202
|
+
opacity: $.value,
|
|
1203
|
+
pointerEvents: $.value > .01 ? "auto" : "none"
|
|
1204
|
+
})
|
|
1205
|
+
}, [(h(!0), o(e, null, v(ot.value, (e, t) => (h(), o("g", {
|
|
1206
|
+
key: "label-left-" + e.item.id,
|
|
1207
|
+
class: d(["label-group", {
|
|
1208
|
+
"is-hovered": w.value === e.item.id,
|
|
1209
|
+
"is-dimmed": w.value !== null && w.value !== e.item.id
|
|
1210
|
+
}]),
|
|
1211
|
+
onMouseenter: (t) => D(e.item.id),
|
|
1212
|
+
onMouseleave: r[1] ||= (e) => y.value = null,
|
|
1213
|
+
onClick: (t) => E(e.item.id),
|
|
1214
|
+
style: f({ cursor: c.selectable && !j.value ? "pointer" : "default" })
|
|
1215
|
+
}, [s("path", {
|
|
1216
|
+
d: ct(e),
|
|
1217
|
+
fill: "none",
|
|
1218
|
+
stroke: e.color,
|
|
1219
|
+
"stroke-width": "1.2"
|
|
1220
|
+
}, null, 8, Re), s("text", {
|
|
1221
|
+
x: "85",
|
|
1222
|
+
y: e.finalY,
|
|
1223
|
+
fill: e.color,
|
|
1224
|
+
"font-size": "11",
|
|
1225
|
+
"font-weight": "600",
|
|
1226
|
+
"font-family": "system-ui, -apple-system, sans-serif",
|
|
1227
|
+
"text-anchor": "end",
|
|
1228
|
+
"dominant-baseline": "middle",
|
|
1229
|
+
style: f(w.value === e.item.id ? "transform: translate(0, -5px);" : "")
|
|
1230
|
+
}, x(R(e.item.name, 24)) + " " + x(L(e.item.value)) + " " + x(e.item.unit || "") + " (" + x(e.item.percentage) + "%) ", 13, ze)], 46, Le))), 128)), (h(!0), o(e, null, v(st.value, (e, t) => (h(), o("g", {
|
|
1231
|
+
key: "label-right-" + e.item.id,
|
|
1232
|
+
class: d(["label-group", {
|
|
1233
|
+
"is-hovered": w.value === e.item.id,
|
|
1234
|
+
"is-dimmed": w.value !== null && w.value !== e.item.id
|
|
1235
|
+
}]),
|
|
1236
|
+
onMouseenter: (t) => D(e.item.id),
|
|
1237
|
+
onMouseleave: r[2] ||= (e) => y.value = null,
|
|
1238
|
+
onClick: (t) => E(e.item.id),
|
|
1239
|
+
style: f({ cursor: c.selectable && !j.value ? "pointer" : "default" })
|
|
1240
|
+
}, [s("path", {
|
|
1241
|
+
d: ct(e),
|
|
1242
|
+
fill: "none",
|
|
1243
|
+
stroke: e.color,
|
|
1244
|
+
"stroke-width": "1.2"
|
|
1245
|
+
}, null, 8, Ve), s("text", {
|
|
1246
|
+
x: "675",
|
|
1247
|
+
y: e.finalY,
|
|
1248
|
+
fill: e.color,
|
|
1249
|
+
"font-size": "11",
|
|
1250
|
+
"font-weight": "600",
|
|
1251
|
+
"font-family": "system-ui, -apple-system, sans-serif",
|
|
1252
|
+
"text-anchor": "start",
|
|
1253
|
+
"dominant-baseline": "middle",
|
|
1254
|
+
style: f(w.value === e.item.id ? "transform: translate(0, -5px);" : "")
|
|
1255
|
+
}, x(R(e.item.name, 24)) + " " + x(L(e.item.value)) + " " + x(e.item.unit || "") + " (" + x(e.item.percentage) + "%) ", 13, He)], 46, Be))), 128))], 4)
|
|
1256
|
+
]))], 8, ee))], 2));
|
|
1257
|
+
}
|
|
1258
|
+
}, [["__scopeId", "data-v-a055ea0b"]]), Ue = { class: "nano-scrub-label" }, We = {
|
|
1259
|
+
key: 0,
|
|
1260
|
+
class: "nano-scrub-overlay"
|
|
1261
|
+
}, Ge = {
|
|
1262
|
+
key: 1,
|
|
1263
|
+
class: "nano-scrub-svg-line"
|
|
1264
|
+
}, Ke = [
|
|
1265
|
+
"x1",
|
|
1266
|
+
"y1",
|
|
1267
|
+
"x2",
|
|
1268
|
+
"y2"
|
|
1269
|
+
], qe = { class: "nano-scrub-popup-val" }, U = { class: "nano-scrub-popup-res" }, W = /* @__PURE__ */ P({
|
|
1270
|
+
__name: "PrecisionScrubber",
|
|
1271
|
+
props: {
|
|
1272
|
+
modelValue: {
|
|
1273
|
+
type: Number,
|
|
1274
|
+
required: !0
|
|
1275
|
+
},
|
|
1276
|
+
min: {
|
|
1277
|
+
type: Number,
|
|
1278
|
+
default: 0
|
|
1279
|
+
},
|
|
1280
|
+
max: {
|
|
1281
|
+
type: Number,
|
|
1282
|
+
required: !0
|
|
1283
|
+
},
|
|
1284
|
+
label: {
|
|
1285
|
+
type: String,
|
|
1286
|
+
default: "↔ Hold & Drag to Scrub (Pull Down to Fine-Tune) ↕"
|
|
1287
|
+
},
|
|
1288
|
+
formatValue: {
|
|
1289
|
+
type: Function,
|
|
1290
|
+
default: (e) => String(e)
|
|
1291
|
+
}
|
|
1292
|
+
},
|
|
1293
|
+
emits: ["update:modelValue"],
|
|
1294
|
+
setup(n, { emit: c }) {
|
|
1295
|
+
let l = n, u = c, d = _(null), p = _(!1), m = _(!1), g = _(0), v = _(0), y = _(0), b = _(0), S = _(0), C = _(0), w = _(0), T = _(""), E = _({
|
|
1296
|
+
left: 0,
|
|
1297
|
+
width: 0
|
|
1298
|
+
}), D = r(() => {
|
|
1299
|
+
let e = l.max - l.min;
|
|
1300
|
+
return e <= 0 ? 0 : (l.modelValue - l.min) / e * 100;
|
|
1301
|
+
}), O = r(() => l.formatValue(l.modelValue)), k = (e) => {
|
|
1302
|
+
if (e.button !== 0 || l.max - l.min <= 0) return;
|
|
1303
|
+
p.value = !0, m.value = !1;
|
|
1304
|
+
let t = e.currentTarget.getBoundingClientRect();
|
|
1305
|
+
E.value = {
|
|
1306
|
+
left: t.left,
|
|
1307
|
+
width: t.width
|
|
1308
|
+
};
|
|
1309
|
+
let n = e.clientX;
|
|
1310
|
+
g.value = n, v.value = l.modelValue, S.value = l.modelValue, y.value = n, b.value = e.clientY, C.value = n, w.value = e.clientY, T.value = "Coarse (Full range)", document.addEventListener("mousemove", A), document.addEventListener("mouseup", j), e.preventDefault();
|
|
1311
|
+
}, A = (e) => {
|
|
1312
|
+
if (!p.value) return;
|
|
1313
|
+
C.value = e.clientX, w.value = e.clientY;
|
|
1314
|
+
let t = e.clientY - b.value, n = Math.abs(t), r = l.max - l.min;
|
|
1315
|
+
if (!(r <= 0)) if (!m.value && n >= 15 && (m.value = !0, y.value = e.clientX, Math.abs(e.clientX - g.value) < 8 ? S.value = v.value : S.value = l.modelValue), m.value) {
|
|
1316
|
+
let e = Math.max(0, Math.abs(t) - 15), n = .25, r = 1.08, i = e + (r ** +e - 1), a = Math.round(-Math.sign(t) * n * i), o = S.value + a;
|
|
1317
|
+
o > l.max && (o = l.max), o < l.min && (o = l.min), u("update:modelValue", o);
|
|
1318
|
+
let s = n * (1 + r ** +e * Math.log(r));
|
|
1319
|
+
s >= 1e9 ? T.value = `Coarse (±${M(Math.round(s))} / px)` : s >= 1e6 ? T.value = `Medium (±${M(Math.round(s))} / px)` : s >= 1 ? T.value = `Fine (±${M(Math.round(s))} / px)` : T.value = `Ultra-Fine (±1 index per ${Math.round(1 / s)}px)`;
|
|
1320
|
+
} else {
|
|
1321
|
+
let t = E.value, n = t.width - 16, i = Math.min(1, Math.max(0, (e.clientX - t.left - 8) / n));
|
|
1322
|
+
u("update:modelValue", l.min + Math.round(i * r)), T.value = "Coarse (Full range)";
|
|
1323
|
+
}
|
|
1324
|
+
}, j = (e) => {
|
|
1325
|
+
if (p.value && !m.value) {
|
|
1326
|
+
let t = l.max - l.min;
|
|
1327
|
+
if (t > 0 && E.value.width > 0) {
|
|
1328
|
+
let n = E.value, r = n.width - 16, i = Math.min(1, Math.max(0, (e.clientX - n.left - 8) / r));
|
|
1329
|
+
u("update:modelValue", l.min + Math.round(i * t));
|
|
1330
|
+
}
|
|
1331
|
+
}
|
|
1332
|
+
p.value = !1, document.removeEventListener("mousemove", A), document.removeEventListener("mouseup", j);
|
|
1333
|
+
}, M = (e) => String(e).replace(/\B(?=(\d{3})+(?!\d))/g, " ");
|
|
1334
|
+
return (r, c) => (h(), o(e, null, [s("div", {
|
|
1335
|
+
class: "nano-scrub-track",
|
|
1336
|
+
onMousedown: k,
|
|
1337
|
+
ref_key: "trackRef",
|
|
1338
|
+
ref: d
|
|
1339
|
+
}, [s("div", {
|
|
1340
|
+
class: "nano-scrub-progress",
|
|
1341
|
+
style: f({ width: D.value + "%" })
|
|
1342
|
+
}, null, 4), s("span", Ue, x(n.label), 1)], 544), (h(), i(t, { to: "body" }, [p.value ? (h(), o("div", We, [
|
|
1343
|
+
m.value ? (h(), o("div", {
|
|
1344
|
+
key: 0,
|
|
1345
|
+
class: "nano-scrub-anchor",
|
|
1346
|
+
style: f({
|
|
1347
|
+
left: y.value + "px",
|
|
1348
|
+
top: b.value + "px"
|
|
1349
|
+
})
|
|
1350
|
+
}, null, 4)) : a("", !0),
|
|
1351
|
+
m.value ? (h(), o("svg", Ge, [s("line", {
|
|
1352
|
+
x1: y.value,
|
|
1353
|
+
y1: b.value,
|
|
1354
|
+
x2: C.value,
|
|
1355
|
+
y2: w.value,
|
|
1356
|
+
stroke: "#00e5ff",
|
|
1357
|
+
"stroke-dasharray": "4,4",
|
|
1358
|
+
"stroke-width": "1.5",
|
|
1359
|
+
opacity: "0.6"
|
|
1360
|
+
}, null, 8, Ke)])) : a("", !0),
|
|
1361
|
+
s("div", {
|
|
1362
|
+
class: "nano-scrub-popup",
|
|
1363
|
+
style: f({
|
|
1364
|
+
left: C.value + 15 + "px",
|
|
1365
|
+
top: w.value + 15 + "px"
|
|
1366
|
+
})
|
|
1367
|
+
}, [
|
|
1368
|
+
c[0] ||= s("div", { class: "nano-scrub-popup-title" }, "Scrubbing Mode", -1),
|
|
1369
|
+
s("div", qe, x(O.value), 1),
|
|
1370
|
+
s("div", U, x(T.value), 1)
|
|
1371
|
+
], 4)
|
|
1372
|
+
])) : a("", !0)]))], 64));
|
|
1373
|
+
}
|
|
1374
|
+
}, [["__scopeId", "data-v-5ed42841"]]);
|
|
1375
|
+
//#endregion
|
|
1376
|
+
//#region src/index.js
|
|
1377
|
+
O.init("nano-ui", "https://analytics.7u.pl");
|
|
1378
|
+
var Je = { install(e) {
|
|
1379
|
+
e.directive("ripple", k), e.directive("tooltip", N), e.component("GlobalTooltip", F), e.component("NanoModal", B), e.component("ThreeDDonutChart", H), e.component("PrecisionScrubber", W);
|
|
326
1380
|
} };
|
|
327
1381
|
//#endregion
|
|
328
|
-
export {
|
|
1382
|
+
export { F as GlobalTooltip, B as NanoModal, W as PrecisionScrubber, k as Ripple, H as ThreeDDonutChart, Je as default, M as hideTooltip, j as showTooltip, N as tooltipDirective, A as tooltipState };
|