vue-data-ui 3.22.7 → 3.22.8

package/dist/{vue-ui-flow-q_M7O1BK.js → vue-ui-flow-BTUNfWb7.js}

@@ -1,20 +1,20 @@
 import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
-import { Gt as t, Ot as n, Q as r, S as i, Ut as a, W as o, X as s, b as c, i as l, jt as u, n as d, q as f, r as p, t as m, v as h, vt as g, w as _ } from "./lib-EAmk-PgA.js";
-import { t as ee } from "./useConfig-DYM3f6EI.js";
-import { t as v } from "./usePrinter-DnGzpp6Q.js";
-import { n as y, t as b } from "./BaseScanner-DZvpgOjM.js";
-import { t as x } from "./useSvgExport-SVIsDot8.js";
-import { t as S } from "./useNestedProp-D8XqxgOU.js";
-import { t as te } from "./useThemeCheck-C43Tcqmk.js";
-import { t as ne } from "./img-B_abIg0o.js";
-import { n as C } from "./Title-PiTKr6sp.js";
+import { $ as t, G as n, J as r, Kt as i, Mt as a, S as o, T as s, Wt as c, Z as l, b as u, i as d, kt as f, n as p, r as m, t as h, v as g, yt as ee } from "./lib-JqW18y5I.js";
+import { t as te } from "./useConfig-DYM3f6EI.js";
+import { t as _ } from "./usePrinter-CqqHmnBI.js";
+import { n as v, t as y } from "./BaseScanner-DZvpgOjM.js";
+import { t as b } from "./useSvgExport-SVIsDot8.js";
+import { t as x } from "./useNestedProp-DIuuzG1r.js";
+import { t as S } from "./useThemeCheck-C43Tcqmk.js";
+import { t as ne } from "./img-DnP3eXuv.js";
+import { n as C } from "./Title-CcNiYzEo.js";
 import { t as re } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { c as ie } from "./canvas-lib-BOP_HS11.js";
 import { t as ae } from "./useResponsive-BfnK0KxU.js";
 import { t as oe } from "./A11yDataTable-DdRsVULz.js";
 import { t as se } from "./useUserOptionState-DK-_1ddE.js";
 import { t as ce } from "./useChartAccessibility-DYqac8yF.js";
-import { t as le } from "./Legend-kAr7Vqqu.js";
+import { t as le } from "./Legend-ROt6ugzW.js";
 import { t as ue } from "./vue_ui_flow-BewZjjKG.js";
 import { Fragment as de, Teleport as fe, computed as w, createBlock as T, createCommentVNode as E, createElementBlock as D, createElementVNode as O, createSlots as pe, createTextVNode as me, createVNode as he, defineAsyncComponent as k, guardReactiveProps as A, mergeProps as ge, nextTick as _e, normalizeClass as ve, normalizeProps as j, normalizeStyle as M, onMounted as ye, openBlock as N, ref as P, renderList as be, renderSlot as F, resolveDynamicComponent as xe, toDisplayString as Se, toRefs as Ce, unref as I, watch as we, withCtx as L } from "vue";
 //#region src/components/vue-ui-flow.vue
@@ -87,7 +87,7 @@ var Te = /* @__PURE__ */ e({ default: () => Ke }), Ee = ["id"], De = ["id"], Oe
 	},
 	emits: ["copyAlt"],
 	setup(e, { expose: re, emit: Te }) {
-		let Ke = k(() => import("./Tooltip-B8yYfISA.js")), qe = k(() => import("./BaseIcon-_-BX7be3.js").then((e) => e.n)), Je = k(() => import("./vue-ui-accordion-Dzz8XhX3.js").then((e) => e.n)), Ye = k(() => import("./DataTable-CVF7DoZn.js")), Xe = k(() => import("./PenAndPaper-gaV1QPpP.js").then((e) => e.t)), Ze = k(() => import("./UserOptions-BL9VlHop.js").then((e) => e.n)), Qe = k(() => import("./PackageVersion-Dse0n05o.js").then((e) => e.t)), $e = k(() => import("./BaseDraggableDialog-1wwwdwV2.js").then((e) => e.n)), { vue_ui_flow: et } = ee(), { isThemeValid: tt, warnInvalidTheme: nt } = te(), R = e, rt = Te, z = P(o()), B = P(null), it = P(0), at = P(0), ot = P(!1), st = P(""), ct = P(null), lt = P(null), ut = P(null), dt = P(null), ft = P(null), pt = P(!1), mt = P(null), ht = P(null), gt = P(null), _t = P(!1), vt = P(!1), yt = P(null), V = P(null), bt = P({
+		let Ke = k(() => import("./Tooltip-CxOrWlFy.js")), qe = k(() => import("./BaseIcon-C2qlyHc7.js").then((e) => e.n)), Je = k(() => import("./vue-ui-accordion-YyosvEPo.js").then((e) => e.n)), Ye = k(() => import("./DataTable-D9NvewTT.js")), Xe = k(() => import("./PenAndPaper-pcgwlYr2.js").then((e) => e.t)), Ze = k(() => import("./UserOptions-16uF1ayB.js").then((e) => e.n)), Qe = k(() => import("./PackageVersion-DW7zwRcm.js").then((e) => e.t)), $e = k(() => import("./BaseDraggableDialog-DcfGlH8A.js").then((e) => e.n)), { vue_ui_flow: et } = te(), { isThemeValid: tt, warnInvalidTheme: nt } = S(), R = e, rt = Te, z = P(n()), B = P(null), it = P(0), at = P(0), ot = P(!1), st = P(""), ct = P(null), lt = P(null), ut = P(null), dt = P(null), ft = P(null), pt = P(!1), mt = P(null), ht = P(null), gt = P(null), _t = P(!1), vt = P(!1), yt = P(null), V = P(null), bt = P({
 			x: 0,
 			y: 0
 		}), xt = P("pointer"), St = P(!1), Ct = w(() => !!R.dataset && R.dataset.length);
@@ -98,7 +98,7 @@ var Te = /* @__PURE__ */ e({ default: () => Ke }), Ee = ["id"], De = ["id"], Oe
 		function wt(e) {
 			H.value = e, it.value += 1;
 		}
-		let U = P(Pt()), W = w(() => U.value.userOptions.useCursorPointer), Tt = w(() => t({
+		let U = P(Pt()), W = w(() => U.value.userOptions.useCursorPointer), Tt = w(() => i({
 			defaultConfig: {
 				userOptions: { show: !1 },
 				nodeCategories: {
@@ -121,7 +121,7 @@ var Te = /* @__PURE__ */ e({ default: () => Ke }), Ee = ["id"], De = ["id"], Oe
 				} }
 			},
 			userConfig: U.value.skeletonConfig ?? {}
-		})), { loading: Et, FINAL_DATASET: Dt, manualLoading: Ot } = y({
+		})), { loading: Et, FINAL_DATASET: Dt, manualLoading: Ot } = v({
 			...Ce(R),
 			FINAL_CONFIG: U,
 			prepareConfig: Pt,
@@ -163,17 +163,17 @@ var Te = /* @__PURE__ */ e({ default: () => Ke }), Ee = ["id"], De = ["id"], Oe
 					"#AAAAAA"
 				]
 			],
-			skeletonConfig: t({
+			skeletonConfig: i({
 				defaultConfig: U.value,
 				userConfig: Tt.value
 			})
 		}), kt = w(() => !!U.value.debug);
 		function At() {
-			if (n(R.dataset) && (r({
+			if (f(R.dataset) && (t({
 				componentName: "VueUiFlow",
 				type: "dataset",
 				debug: kt.value
-			}), Ot.value = !0), n(R.dataset) || (Ot.value = U.value.loading), U.value.responsive) {
+			}), Ot.value = !0), f(R.dataset) || (Ot.value = U.value.loading), U.value.responsive) {
 				let e = ie(() => {
 					let { width: e, height: t } = ae({
 						chart: B.value,
@@ -190,22 +190,22 @@ var Te = /* @__PURE__ */ e({ default: () => Ke }), Ee = ["id"], De = ["id"], Oe
 		}
 		let { userOptionsVisible: jt, setUserOptionsVisibility: Mt, keepUserOptionState: Nt } = se({ config: U.value }), { svgRef: G } = ce({ config: U.value.style.chart.title });
 		function Pt() {
-			let e = S({
+			let e = x({
 				userConfig: R.config,
 				defaultConfig: et
 			}), t = e, n = e.theme;
 			if (n) if (!tt.value(e)) nt(e), t = e;
 			else {
-				let r = S({
+				let r = x({
 					userConfig: ue[n] || R.config,
 					defaultConfig: e
 				});
 				t = {
-					...S({
+					...x({
 						userConfig: R.config,
 						defaultConfig: r
 					}),
-					customPalette: e.customPalette.length ? e.customPalette : a[n] || u
+					customPalette: e.customPalette.length ? e.customPalette : c[n] || a
 				};
 			}
 			else t = e;
@@ -217,11 +217,11 @@ var Te = /* @__PURE__ */ e({ default: () => Ke }), Ee = ["id"], De = ["id"], Oe
 		}, { deep: !0 }), we(() => R.dataset, (e) => {
 			Array.isArray(e) && e.length > 0 && (Ot.value = !1);
 		}, { deep: !0 });
-		let { isPrinting: Lt, isImaging: Rt, generatePdf: zt, generateImage: Bt } = v({
+		let { isPrinting: Lt, isImaging: Rt, generatePdf: zt, generateImage: Bt } = _({
 			elementId: `flow_${z.value}`,
 			fileName: U.value.style.chart.title.text || "vue-ui-flow",
 			options: U.value.userOptions.print
-		}), Vt = w(() => U.value.userOptions.show && !U.value.style.chart.title.text), Ht = w(() => i(U.value.customPalette)), Ut = w(() => U.value.style.chart.nodes.width), K = P({
+		}), Vt = w(() => U.value.userOptions.show && !U.value.style.chart.title.text), Ht = w(() => o(U.value.customPalette)), Ut = w(() => U.value.style.chart.nodes.width), K = P({
 			showTable: U.value.table.show,
 			showTooltip: U.value.style.chart.tooltip.show
 		});
@@ -234,46 +234,46 @@ var Te = /* @__PURE__ */ e({ default: () => Ke }), Ee = ["id"], De = ["id"], Oe
 		let Wt = w(() => !Dt.value || !Dt.value.length ? [] : Dt.value.map((e, t) => [
 			e[0],
 			e[1],
-			h(e[2]),
-			e[3] ? c(e[3]) : Ht.value[t] || Ht.value[t % Ht.value.length] || u[t] || u[t % u.length]
+			g(e[2]),
+			e[3] ? u(e[3]) : Ht.value[t] || Ht.value[t % Ht.value.length] || a[t] || a[t % a.length]
 		]));
 		function Gt(e) {
-			let t = {}, n = {};
-			function r(e, r) {
+			let t = {}, r = {};
+			function i(e, i) {
 				t[e] || (t[e] = {
 					level: null,
 					inflow: 0,
 					outflow: 0,
 					children: [],
 					color: null,
-					uid: o()
-				}), t[e].level === null && (t[e].level = r), n[r] || (n[r] = []), n[r].includes(e) || n[r].push(e);
+					uid: n()
+				}), t[e].level === null && (t[e].level = i), r[i] || (r[i] = []), r[i].includes(e) || r[i].push(e);
 			}
-			e.forEach(([e, n, i]) => {
+			e.forEach(([e, n, r]) => {
 				let a = t[e]?.level ?? 0, o = a + 1;
-				r(e, a), r(n, o), t[e].children.push({
+				i(e, a), i(n, o), t[e].children.push({
 					target: n,
-					value: i
-				}), t[e].outflow += i, t[n].inflow += i;
+					value: r
+				}), t[e].outflow += r, t[n].inflow += r;
 			});
-			let i = new Set(e.map(([e]) => e)), a = new Set(e.map(([, e]) => e)), s = Array.from(i).filter((e) => !a.has(e)), c = {};
-			s.forEach((e, t) => {
-				c[e] = Ht.value[t] || u[t % u.length];
+			let o = new Set(e.map(([e]) => e)), s = new Set(e.map(([, e]) => e)), c = Array.from(o).filter((e) => !s.has(e)), l = {};
+			c.forEach((e, t) => {
+				l[e] = Ht.value[t] || a[t % a.length];
 			});
-			let l = {};
+			let u = {};
 			e.forEach(([e, t, n, r]) => {
-				r && (l[e] = r, l[t] = r);
+				r && (u[e] = r, u[t] = r);
 			}), Object.keys(t).forEach((e, n) => {
 				let r = U.value.nodeCategories?.[e], i = r ? U.value.nodeCategoryColors?.[r] : null;
-				t[e].color = l[e] || i || (s.includes(e) ? c[e] : null) || u[n % u.length];
+				t[e].color = u[e] || i || (c.includes(e) ? l[e] : null) || a[n % a.length];
 			}), Object.keys(t).forEach((e) => {
 				t[e].value = Math.max(t[e].inflow, t[e].outflow);
 			});
-			let d = Jt.value, f = Yt.value.width, p = Yt.value.height, m = Object.keys(n).map(Number).sort((e, t) => e - t), g = m.length || 1, _ = g > 1 ? f / (g - 1) : 0, ee = Number(Ut.value), v = Number(U.value.style.chart.nodes.gapPx ?? U.value.style.chart.nodes.gap ?? 8), y = Number(U.value.style.chart.nodes.minHeight || 0);
-			function b(e) {
-				let r = n[e], i = r.length;
+			let d = Jt.value, f = Yt.value.width, p = Yt.value.height, m = Object.keys(r).map(Number).sort((e, t) => e - t), h = m.length || 1, ee = h > 1 ? f / (h - 1) : 0, te = Number(Ut.value), _ = Number(U.value.style.chart.nodes.gapPx ?? U.value.style.chart.nodes.gap ?? 8), v = Number(U.value.style.chart.nodes.minHeight || 0);
+			function y(e) {
+				let n = r[e], i = n.length;
 				if (!i) return Infinity;
-				let a = Math.max(0, (i - 1) * v), o = Math.max(0, p - a), s = Math.min(y, i ? o / i : 0), c = 0, l = r.map((e) => t[e].value || 0), u = l.reduce((e, t) => e + t, 0);
+				let a = Math.max(0, (i - 1) * _), o = Math.max(0, p - a), s = Math.min(v, i ? o / i : 0), c = 0, l = n.map((e) => t[e].value || 0), u = l.reduce((e, t) => e + t, 0);
 				for (let e = 0; e < 12; e += 1) {
 					let e = u > 0 ? (o - c) / u : 0, t = [];
 					for (let n = 0; n < l.length; n += 1) {
@@ -286,57 +286,57 @@ var Te = /* @__PURE__ */ e({ default: () => Ke }), Ee = ["id"], De = ["id"], Oe
 				}
 				return u > 0 ? Math.max(0, (o - c) / u) : 0;
 			}
-			let x = m.map(b), S = x.length ? Math.min(...x) : 0, te = {};
+			let b = m.map(y), x = b.length ? Math.min(...b) : 0, S = {};
 			m.forEach((e) => {
-				let r = n[e], i = r.length, a = Math.max(0, (i - 1) * v), s = Math.max(0, p - a), c = Math.min(y, i ? s / i : 0), l = r.map((e) => Math.max(c, (t[e].value || 0) * S)), u = l.reduce((e, t) => e + t, 0) + a, f = Math.max(0, (p - u) / 2);
-				r.forEach((n, r) => {
-					let a = l[r], s = d.left + e * _, c = f;
-					te[n] = {
+				let i = r[e], a = i.length, o = Math.max(0, (a - 1) * _), s = Math.max(0, p - o), c = Math.min(v, a ? s / a : 0), l = i.map((e) => Math.max(c, (t[e].value || 0) * x)), u = l.reduce((e, t) => e + t, 0) + o, f = Math.max(0, (p - u) / 2);
+				i.forEach((r, i) => {
+					let o = l[i], s = d.left + e * ee, c = f;
+					S[r] = {
 						x: s,
 						y: c,
 						absoluteY: c,
-						height: a,
-						i: r,
-						color: t[n].color,
-						value: t[n].value,
-						id: o()
-					}, f += a, r < i - 1 && (f += v);
+						height: o,
+						i,
+						color: t[r].color,
+						value: t[r].value,
+						id: n()
+					}, f += o, i < a - 1 && (f += _);
 				});
 			});
 			let ne = [], C = d.top, re = {}, ie = {};
 			Object.keys(t).forEach((e) => {
-				re[e] = te[e]?.y ?? 0, ie[e] = 0;
+				re[e] = S[e]?.y ?? 0, ie[e] = 0;
 			});
 			let ae = !!U.value.style.chart.links.smooth, oe = .5;
 			return m.forEach((e) => {
-				n[e].forEach((e) => {
-					let n = t[e], r = te[e];
-					if (!n.children || !n.children.length) return;
-					let i = r.y;
-					n.children.forEach(({ target: a, value: s }) => {
-						let c = te[a], l = t[a], u = n.outflow > 0 ? s / n.outflow : 0, d = l.inflow > 0 ? s / l.inflow : 0, f = h(i + C), p = h(i + u * r.height + C), m = re[a], g = m + d * c.height;
-						ie[a] += s;
-						let _ = l.inflow > 0 && ie[a] >= l.inflow - 1e-6, v = c.y + c.height;
-						(_ || g > v - .25) && (g = v);
-						let y = h(m + C), b = h(g + C), x = h(r.x + ee), S = h(c.x), se;
-						if (!ae || S <= x) se = `M ${x} ${f} L ${x} ${p} L ${S} ${b} L ${S} ${y} Z`;
+				r[e].forEach((e) => {
+					let r = t[e], i = S[e];
+					if (!r.children || !r.children.length) return;
+					let a = i.y;
+					r.children.forEach(({ target: o, value: s }) => {
+						let c = S[o], l = t[o], u = r.outflow > 0 ? s / r.outflow : 0, d = l.inflow > 0 ? s / l.inflow : 0, f = g(a + C), p = g(a + u * i.height + C), m = re[o], h = m + d * c.height;
+						ie[o] += s;
+						let ee = l.inflow > 0 && ie[o] >= l.inflow - 1e-6, _ = c.y + c.height;
+						(ee || h > _ - .25) && (h = _);
+						let v = g(m + C), y = g(h + C), b = g(i.x + te), x = g(c.x), se;
+						if (!ae || x <= b) se = `M ${b} ${f} L ${b} ${p} L ${x} ${y} L ${x} ${v} Z`;
 						else {
-							let e = S - x, t = h(x + e * oe), n = h(S - e * oe), r = f, i = y, a = p, o = b;
-							se = `M ${x} ${r} C ${t} ${r}, ${n} ${i}, ${S} ${i} L ${S} ${o} C ${n} ${o}, ${t} ${a}, ${x} ${a} Z`;
+							let e = x - b, t = g(b + e * oe), n = g(x - e * oe), r = f, i = v, a = p, o = y;
+							se = `M ${b} ${r} C ${t} ${r}, ${n} ${i}, ${x} ${i} L ${x} ${o} C ${n} ${o}, ${t} ${a}, ${b} ${a} Z`;
 						}
 						ne.push({
-							id: o(),
+							id: n(),
 							source: e,
-							target: a,
+							target: o,
 							path: se,
 							value: s,
-							sourceColor: n.color,
-							targetColor: t[a].color
-						}), i = p - C, re[a] = g;
+							sourceColor: r.color,
+							targetColor: t[o].color
+						}), a = p - C, re[o] = h;
 					});
 				});
 			}), {
-				nodeCoordinates: te,
+				nodeCoordinates: S,
 				links: ne
 			};
 		}
@@ -376,44 +376,44 @@ var Te = /* @__PURE__ */ e({ default: () => Ke }), Ee = ["id"], De = ["id"], Oe
 				y: n.top + n.height / 2
 			};
 		}
-		function nn(e, t, n = "pointer", r = null) {
-			$.value = [], J.value = Zt(e.name), Y.value = e.name, $t.value = e.id, xt.value = n, yt.value = r, V.value = e.id;
-			let i = e.name, a = Wt.value, o = 0, s = 0, c = [], u = [], d = new Set(a.map(([e]) => e)), p = new Set(a.map(([, e]) => e)), m = Array.from(d).filter((e) => !p.has(e)), h = a.filter(([e]) => m.includes(e)).reduce((e, [t, n, r]) => e + r, 0), _ = {};
+		function nn(e, t, n = "pointer", i = null) {
+			$.value = [], J.value = Zt(e.name), Y.value = e.name, $t.value = e.id, xt.value = n, yt.value = i, V.value = e.id;
+			let a = e.name, o = Wt.value, s = 0, c = 0, l = [], u = [], f = new Set(o.map(([e]) => e)), p = new Set(o.map(([, e]) => e)), m = Array.from(f).filter((e) => !p.has(e)), h = o.filter(([e]) => m.includes(e)).reduce((e, [t, n, r]) => e + r, 0), g = {};
 			q.value.nodes.forEach((e) => {
-				_[e.name] = e.color;
-			}), a.forEach(([e, t, n]) => {
-				t === i && (o += n, c.push({
+				g[e.name] = e.color;
+			}), o.forEach(([e, t, n]) => {
+				t === a && (s += n, l.push({
 					source: e,
 					value: n,
-					color: _[e]
-				})), e === i && (s += n, u.push({
+					color: g[e]
+				})), e === a && (c += n, u.push({
 					target: t,
 					value: n,
-					color: _[t]
+					color: g[t]
 				}));
 			});
-			let ee = h > 0 ? Math.max(o, s) / h * 100 : 0, v = {
-				name: i,
-				inflow: o,
-				outflow: s,
-				from: c,
+			let te = h > 0 ? Math.max(s, c) / h * 100 : 0, _ = {
+				name: a,
+				inflow: s,
+				outflow: c,
+				from: l,
 				to: u,
-				percentOfTotal: ee,
-				color: _[i] || "#000000"
+				percentOfTotal: te,
+				color: g[a] || "#000000"
 			};
 			U.value.events.datapointEnter && U.value.events.datapointEnter({
-				datapoint: v,
+				datapoint: _,
 				seriesIndex: t
 			}), X.value = {
-				datapoint: v,
+				datapoint: _,
 				config: U.value,
 				seriesIndex: t,
 				series: q.value
 			}, ot.value = !0;
-			let y = "", b = U.value.style.chart.tooltip.customFormat;
-			if (Qt.value = !1, g(b)) try {
-				let e = b({
-					datapoint: v,
+			let v = "", y = U.value.style.chart.tooltip.customFormat;
+			if (Qt.value = !1, ee(y)) try {
+				let e = y({
+					datapoint: _,
 					series: q.value,
 					config: U.value
 				});
@@ -422,27 +422,27 @@ var Te = /* @__PURE__ */ e({ default: () => Ke }), Ee = ["id"], De = ["id"], Oe
 				console.warn("Custom format cannot be applied.");
 			}
 			if (!Qt.value) {
-				let e = U.value.style.chart.tooltip.showPercentage ? `<div>${f({
+				let e = U.value.style.chart.tooltip.showPercentage ? `<div>${r({
 					p: U.value.style.chart.tooltip.translations.percentOfTotal,
-					v: v.percentOfTotal,
+					v: _.percentOfTotal,
 					s: "%",
 					r: U.value.style.chart.tooltip.roundingPercentage
 				})}</div>` : "";
-				y += `<div style="width:100%;text-align:center;border-bottom:1px solid ${U.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;"><span style="margin-right:4px; color:${v.color}">⏹</span>${v.name}${e}</div>`, v.from.length && (y += `<div>${U.value.style.chart.tooltip.translations.from}</div>`, v.from.forEach((e) => {
-					y += `<div><span style="color:${e.color}">⏹←</span> ${e.source}: ${l(U.value.style.chart.nodes.labels.formatter, e.value, f({
+				v += `<div style="width:100%;text-align:center;border-bottom:1px solid ${U.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;"><span style="margin-right:4px; color:${_.color}">⏹</span>${_.name}${e}</div>`, _.from.length && (v += `<div>${U.value.style.chart.tooltip.translations.from}</div>`, _.from.forEach((e) => {
+					v += `<div><span style="color:${e.color}">⏹←</span> ${e.source}: ${d(U.value.style.chart.nodes.labels.formatter, e.value, r({
 						p: U.value.style.chart.nodes.labels.prefix,
 						v: e.value,
 						s: U.value.style.chart.nodes.labels.suffix,
 						r: U.value.style.chart.nodes.labels.rounding
 					}))}</div>`;
-				})), v.to.length && (y += `<div style="margin-top:6px;">${U.value.style.chart.tooltip.translations.to}</div>`, v.to.forEach((e) => {
-					y += `<div><span style="color:${e.color}">⏹→</span> ${e.target}: ${l(U.value.style.chart.nodes.labels.formatter, e.value, f({
+				})), _.to.length && (v += `<div style="margin-top:6px;">${U.value.style.chart.tooltip.translations.to}</div>`, _.to.forEach((e) => {
+					v += `<div><span style="color:${e.color}">⏹→</span> ${e.target}: ${d(U.value.style.chart.nodes.labels.formatter, e.value, r({
 						p: U.value.style.chart.nodes.labels.prefix,
 						v: e.value,
 						s: U.value.style.chart.nodes.labels.suffix,
 						r: U.value.style.chart.nodes.labels.rounding
 					}))}</div>`;
-				})), st.value = y;
+				})), st.value = v;
 			}
 			n === "keyboard" && _e(() => {
 				tn(e.id);
@@ -475,7 +475,7 @@ var Te = /* @__PURE__ */ e({ default: () => Ke }), Ee = ["id"], De = ["id"], Oe
 					[e.source],
 					[e.target],
 					[e.value]
-				]), n = _([
+				]), n = s([
 					[U.value.style.chart.title.text],
 					[U.value.style.chart.title.subtitle.text],
 					[
@@ -484,7 +484,7 @@ var Te = /* @__PURE__ */ e({ default: () => Ke }), Ee = ["id"], De = ["id"], Oe
 						[U.value.table.columnNames.value]
 					]
 				].concat(t));
-				e ? e(n) : s({
+				e ? e(n) : l({
 					csvContent: n,
 					title: U.value.style.chart.title.text || "vue-ui-flow"
 				});
@@ -506,7 +506,7 @@ var Te = /* @__PURE__ */ e({ default: () => Ke }), Ee = ["id"], De = ["id"], Oe
 					name: e.target,
 					shape: "square"
 				},
-				f({
+				r({
 					p: U.value.style.chart.nodes.labels.prefix,
 					v: e.value,
 					s: U.value.style.chart.nodes.labels.suffix,
@@ -542,7 +542,7 @@ var Te = /* @__PURE__ */ e({ default: () => Ke }), Ee = ["id"], De = ["id"], Oe
 			...e,
 			index: t,
 			centerX: e.x + Ut.value / 2,
-			centerY: h(e.absoluteY) + U.value.style.chart.padding.top + e.height / 2
+			centerY: g(e.absoluteY) + U.value.style.chart.padding.top + e.height / 2
 		})).sort((e, t) => e.x === t.x ? e.absoluteY - t.absoluteY : e.x - t.x)), Q = w(() => {
 			let e = [];
 			return ln.value.forEach((t) => {
@@ -577,7 +577,7 @@ var Te = /* @__PURE__ */ e({ default: () => Ke }), Ee = ["id"], De = ["id"], Oe
 			let e = new Set(q.value.nodes.map((e) => U.value.nodeCategories[e.name] || "__uncategorized__"));
 			return Array.from(e).map((e) => ({
 				name: e,
-				color: U.value.nodeCategoryColors[e] || u[0],
+				color: U.value.nodeCategoryColors[e] || a[0],
 				shape: "square",
 				count: q.value.nodes.filter((t) => (U.value.nodeCategories[t.name] || "__uncategorized__") === e).length
 			})).map((e, t) => {
@@ -667,7 +667,7 @@ var Te = /* @__PURE__ */ e({ default: () => Ke }), Ee = ["id"], De = ["id"], Oe
 		let Cn = w(() => _n.value.map((e) => ({
 			...e,
 			name: e.display
-		}))), wn = w(() => U.value.style.chart.backgroundColor), Tn = w(() => U.value.style.chart.legend), { exportSvg: En, getSvg: Dn } = x({
+		}))), wn = w(() => U.value.style.chart.backgroundColor), Tn = w(() => U.value.style.chart.legend), { exportSvg: En, getSvg: Dn } = b({
 			svg: G,
 			title: w(() => U.value.style.chart.title),
 			legend: Tn,
@@ -978,7 +978,7 @@ var Te = /* @__PURE__ */ e({ default: () => Ke }), Ee = ["id"], De = ["id"], Oe
 			O("div", Ae, [(N(), D("svg", {
 				ref_key: "svgRef",
 				ref: G,
-				xmlns: I(m),
+				xmlns: I(h),
 				"aria-describedby": `chart-instructions-${z.value}`,
 				viewBox: `0 0 ${Xt.value.width} ${Xt.value.height}`,
 				class: ve({
@@ -1034,8 +1034,8 @@ var Te = /* @__PURE__ */ e({ default: () => Ke }), Ee = ["id"], De = ["id"], Oe
 					"data-a11y-node-id": e.id,
 					class: "vue-ui-flow-node",
 					x: e.x,
-					y: I(h)(e.absoluteY) + U.value.style.chart.padding.top,
-					height: I(h)(e.height),
+					y: I(g)(e.absoluteY) + U.value.style.chart.padding.top,
+					height: I(g)(e.height),
 					width: Ut.value,
 					fill: e.color,
 					stroke: U.value.style.chart.nodes.stroke,
@@ -1045,7 +1045,7 @@ var Te = /* @__PURE__ */ e({ default: () => Ke }), Ee = ["id"], De = ["id"], Oe
 						opacity: J.value ? J.value.includes(e.name) ? 1 : .3 : 1,
 						outline: $t.value !== null && $t.value === e.id ? "2px solid currentColor" : void 0
 					}),
-					"aria-label": `${e.name}: ${I(l)(U.value.style.chart.nodes.labels.formatter, e.value, I(f)({
+					"aria-label": `${e.name}: ${I(d)(U.value.style.chart.nodes.labels.formatter, e.value, I(r)({
 						p: U.value.style.chart.nodes.labels.prefix,
 						v: e.value,
 						s: U.value.style.chart.nodes.labels.suffix,
@@ -1057,22 +1057,22 @@ var Te = /* @__PURE__ */ e({ default: () => Ke }), Ee = ["id"], De = ["id"], Oe
 				}, null, 44, Le))), 256)),
 				U.value.style.chart.nodes.labels.show ? (N(), D("g", Re, [(N(!0), D(de, null, be(q.value.nodes, (e, t) => (N(), D("text", {
 					x: e.x + Ut.value / 2,
-					y: (U.value.style.chart.nodes.labels.showValue ? I(h)(e.absoluteY + e.height / 2 - U.value.style.chart.nodes.labels.fontSize / 4) : e.absoluteY + e.height / 2 + U.value.style.chart.nodes.labels.fontSize / 3) + U.value.style.chart.padding.top,
+					y: (U.value.style.chart.nodes.labels.showValue ? I(g)(e.absoluteY + e.height / 2 - U.value.style.chart.nodes.labels.fontSize / 4) : e.absoluteY + e.height / 2 + U.value.style.chart.nodes.labels.fontSize / 3) + U.value.style.chart.padding.top,
 					"font-size": U.value.style.chart.nodes.labels.fontSize,
-					fill: I(p)(e.color),
+					fill: I(m)(e.color),
 					"text-anchor": "middle",
 					style: M(`pointer-events: none; opacity:${J.value ? +!!J.value.includes(e.name) : 1}`)
-				}, Se(U.value.style.chart.nodes.labels.abbreviation.use ? I(d)({
+				}, Se(U.value.style.chart.nodes.labels.abbreviation.use ? I(p)({
 					source: e.name,
 					length: U.value.style.chart.nodes.labels.abbreviation.length
 				}) : e.name), 13, ze))), 256)), U.value.style.chart.nodes.labels.showValue ? (N(!0), D(de, { key: 0 }, be(q.value.nodes, (e, t) => (N(), D("text", {
 					x: e.x + Ut.value / 2,
-					y: I(h)(e.absoluteY + e.height / 2 + U.value.style.chart.nodes.labels.fontSize / 1.3) + U.value.style.chart.padding.top,
+					y: I(g)(e.absoluteY + e.height / 2 + U.value.style.chart.nodes.labels.fontSize / 1.3) + U.value.style.chart.padding.top,
 					"font-size": U.value.style.chart.nodes.labels.fontSize,
-					fill: I(p)(e.color),
+					fill: I(m)(e.color),
 					"text-anchor": "middle",
 					style: M(`pointer-events: none; opacity:${J.value ? +!!J.value.includes(e.name) : 1}`)
-				}, Se(I(l)(U.value.style.chart.nodes.labels.formatter, e.value, I(f)({
+				}, Se(I(d)(U.value.style.chart.nodes.labels.formatter, e.value, I(r)({
 					p: U.value.style.chart.nodes.labels.prefix,
 					v: e.value,
 					s: U.value.style.chart.nodes.labels.suffix,
@@ -1227,7 +1227,7 @@ var Te = /* @__PURE__ */ e({ default: () => Ke }), Ee = ["id"], De = ["id"], Oe
 				}, null, 8, ["stroke"])], 4)]),
 				key: "1"
 			} : void 0]), 1040)) : E("", !0),
-			F(e.$slots, "skeleton", {}, () => [I(Et) ? (N(), T(b, { key: 0 })) : E("", !0)], !0)
+			F(e.$slots, "skeleton", {}, () => [I(Et) ? (N(), T(y, { key: 0 })) : E("", !0)], !0)
 		], 46, Ee));
 	}
 }, [["__scopeId", "data-v-bab66b99"]]);