vue-data-ui 2.17.0 → 2.17.2

package/dist/{vue-ui-flow-C2dqXvrU.js → vue-ui-flow-BeLwkeHo.js}

@@ -1,12 +1,12 @@
-import { defineAsyncComponent as E, computed as p, onMounted as it, ref as y, watch as ct, createElementBlock as g, openBlock as d, unref as r, normalizeStyle as L, normalizeClass as He, createBlock as B, createCommentVNode as _, createElementVNode as D, createVNode as de, createSlots as dt, withCtx as w, renderSlot as b, normalizeProps as R, guardReactiveProps as U, Fragment as W, renderList as j, toDisplayString as X, createTextVNode as vt, nextTick as ft } from "vue";
-import { u as ht, o as pt, e as gt, c as ve, t as mt, p as S, a as yt, b as bt, v as $, d as kt, f as q, X as Ct, F as Ye, L as wt, i as fe, q as $t, r as Tt, x as xt } from "./index-pPGk-uhD.js";
-import { u as Be } from "./useNestedProp-DjACxgdZ.js";
-import { u as _t } from "./usePrinter-DDHcrl0A.js";
+import { defineAsyncComponent as E, computed as p, onMounted as it, ref as y, watch as ct, createElementBlock as g, openBlock as d, unref as r, normalizeStyle as L, normalizeClass as He, createBlock as R, createCommentVNode as _, createElementVNode as D, createVNode as de, createSlots as dt, withCtx as w, renderSlot as b, normalizeProps as U, guardReactiveProps as V, Fragment as W, renderList as j, toDisplayString as X, createTextVNode as vt, nextTick as ft } from "vue";
+import { u as ht, o as pt, e as gt, c as ve, t as mt, p as S, a as yt, b as bt, v as $, d as kt, f as q, X as Ct, F as Ye, L as wt, i as fe, q as $t, r as xt, x as Tt } from "./index-JzUbx__y.js";
+import { u as Be } from "./useNestedProp-D_jd2dz9.js";
+import { u as _t } from "./usePrinter-CsyliflB.js";
 import { u as Nt } from "./useUserOptionState-BIvW1Kz7.js";
 import { u as Ot } from "./useChartAccessibility-9icAAmYg.js";
-import St from "./Legend-Bxlv67uY.js";
-import Ft from "./Title-B-2bV0SW.js";
-import Pt from "./img-Y_hYz-ZC.js";
+import St from "./Legend-1R-B-7st.js";
+import Ft from "./Title-BQb7X_OR.js";
+import Pt from "./img-D0DpKcFX.js";
 import { _ as Lt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const It = ["id"], At = {
   key: 1,
@@ -16,7 +16,7 @@ const It = ["id"], At = {
 }, Et = {
   key: 2,
   style: "width:100%;background:transparent;padding-bottom:24px"
-}, zt = ["xmlns", "viewBox"], Mt = ["width", "height"], Ht = ["id"], Yt = ["stop-color"], Bt = ["stop-color"], Dt = ["d", "fill", "stroke", "stroke-width"], Rt = ["x", "y", "height", "width", "fill", "stroke", "stroke-width", "onMouseenter"], Ut = ["x", "y", "font-size", "fill"], Vt = ["x", "y", "font-size", "fill"], Gt = {
+}, zt = ["xmlns", "viewBox"], Mt = ["width", "height"], Ht = ["id"], Yt = ["stop-color"], Bt = ["stop-color"], Rt = ["d", "fill", "stroke", "stroke-width"], Dt = ["x", "y", "height", "width", "fill", "stroke", "stroke-width", "onMouseenter"], Ut = ["x", "y", "font-size", "fill"], Vt = ["x", "y", "font-size", "fill"], Gt = {
   key: 4,
   class: "vue-data-ui-watermark"
 }, Wt = ["onClick"], jt = {
@@ -39,20 +39,20 @@ const It = ["id"], At = {
       }
     }
   },
-  setup(De, { expose: Re }) {
-    const Ue = E(() => import("./vue-ui-accordion-CVnA550V.js")), Ve = E(() => import("./DataTable-D0VYDhfx.js")), Ge = E(() => import("./PackageVersion-5TR4ocqp.js")), We = E(() => import("./PenAndPaper-D6AqipIO.js")), je = E(() => import("./vue-ui-skeleton-DJPjyNYn.js")), Xe = E(() => import("./Tooltip-CoQnTnr-.js")), qe = E(() => import("./UserOptions-Dd34lEKb.js")), { vue_ui_flow: Ze } = ht(), T = De, te = p(() => !!T.dataset && T.dataset.length);
+  setup(Re, { expose: De }) {
+    const Ue = E(() => import("./vue-ui-accordion-CcTUbiHq.js")), Ve = E(() => import("./DataTable-6BxhjBzt.js")), Ge = E(() => import("./PackageVersion-CIX1W_aa.js")), We = E(() => import("./PenAndPaper-CqJ4wudB.js")), je = E(() => import("./vue-ui-skeleton-B4KQLEQy.js")), Xe = E(() => import("./Tooltip-BTnTpPdO.js")), qe = E(() => import("./UserOptions-lneAyZKu.js")), { vue_ui_flow: Ze } = ht(), x = Re, te = p(() => !!x.dataset && x.dataset.length);
     it(() => {
       he();
     });
     function he() {
-      pt(T.dataset) && gt({
+      pt(x.dataset) && gt({
         componentName: "VueUiFlow",
         type: "dataset"
       });
     }
-    const oe = y(ve()), V = y(null), pe = y(0), ge = y(0), le = y(!1), ae = y(""), Je = y(null), z = y(!1);
+    const oe = y(ve()), z = y(null), pe = y(0), ge = y(0), le = y(!1), ae = y(""), Je = y(null), M = y(!1);
     function me(t) {
-      z.value = t, pe.value += 1;
+      M.value = t, pe.value += 1;
     }
     const e = p({
       get: () => Ce(),
@@ -62,33 +62,33 @@ const It = ["id"], At = {
     });
     function Ce() {
       const t = Be({
-        userConfig: T.config,
+        userConfig: x.config,
         defaultConfig: Ze
       });
       let l = t;
       return t.theme ? l = {
         ...Be({
-          userConfig: yt.vue_ui_flow[t.theme] || T.config,
+          userConfig: yt.vue_ui_flow[t.theme] || x.config,
           defaultConfig: t
         }),
         customPalette: mt[t.theme] || S
-      } : l = t, l.nodeCategories = T.config.nodeCategories || {}, l.nodeCategoryColors = T.config.nodeCategoryColors || {}, l;
+      } : l = t, l.nodeCategories = x.config.nodeCategories || {}, l.nodeCategoryColors = x.config.nodeCategoryColors || {}, l;
     }
     ct(
-      () => T.config,
+      () => x.config,
       (t) => {
         e.value = Ce(), ne.value = !e.value.userOptions.showOnChartHover, he(), ge.value += 1, N.value.showTable = e.value.table.show;
       },
       { deep: !0 }
     );
-    const { isPrinting: we, isImaging: $e, generatePdf: Te, generateImage: xe } = _t({
+    const { isPrinting: we, isImaging: $e, generatePdf: xe, generateImage: Te } = _t({
       elementId: `flow_${oe.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-flow",
       options: e.value.userOptions.print
-    }), Ke = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), Z = p(() => bt(e.value.customPalette)), _e = p(() => e.value.style.chart.nodes.gap), M = p(() => e.value.style.chart.nodes.width), N = y({
+    }), Ke = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), Z = p(() => bt(e.value.customPalette)), _e = p(() => e.value.style.chart.nodes.gap), H = p(() => e.value.style.chart.nodes.width), N = y({
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
-    }), Qe = p(() => e.value.style.chart.links.width), se = p(() => !T.dataset || !T.dataset.length ? [] : T.dataset.map((t, l) => [
+    }), Qe = p(() => e.value.style.chart.links.width), se = p(() => !x.dataset || !x.dataset.length ? [] : x.dataset.map((t, l) => [
       t[0],
       t[1],
       $(t[2]),
@@ -98,8 +98,8 @@ const It = ["id"], At = {
       function l(a) {
         t[a] || (t[a] = { inflow: 0, outflow: 0 });
       }
-      se.value.forEach(([a, s, h]) => {
-        l(a), l(s), t[a].outflow += h, t[s].inflow += h;
+      se.value.forEach(([a, s, f]) => {
+        l(a), l(s), t[a].outflow += f, t[s].inflow += f;
       });
       let o = 0;
       for (const a in t) {
@@ -130,18 +130,18 @@ const It = ["id"], At = {
         const v = l[n]?.level ?? 0, C = v + 1;
         a(n, v), a(u, C), l[n].children || (l[n].children = []), l[n].children.push({ target: u, value: c }), l[n].outflow += c, l[u].inflow += c;
       });
-      const s = new Set(t.map(([n]) => n)), h = new Set(t.map(([, n]) => n)), F = Array.from(s).filter((n) => !h.has(n)), Y = {};
+      const s = new Set(t.map(([n]) => n)), f = new Set(t.map(([, n]) => n)), F = Array.from(s).filter((n) => !f.has(n)), B = {};
       F.forEach((n, u) => {
-        Y[n] = Z.value[u] || S[u % S.length];
+        B[n] = Z.value[u] || S[u % S.length];
       });
-      const x = {};
+      const T = {};
       t.forEach(([n, u, c, v]) => {
-        v && (x[n] = v, x[u] = v);
+        v && (T[n] = v, T[u] = v);
       }), Object.keys(l).forEach((n, u) => {
         const c = e.value.nodeCategories?.[n], v = c ? e.value.nodeCategoryColors?.[c] : null;
-        l[n].color = x[n] || // 1) explicit
+        l[n].color = T[n] || // 1) explicit
         v || // 2) category
-        (F.includes(n) ? Y[n] : null) || // 3) root
+        (F.includes(n) ? B[n] : null) || // 3) root
         S[u % S.length];
       });
       for (const n in l)
@@ -169,18 +169,18 @@ const It = ["id"], At = {
         let u = O[n].absoluteY + e.value.style.chart.padding.top;
         const c = l[n], v = O[n];
         c.children && c.children.forEach(({ target: C, value: i }) => {
-          const f = O[C], P = l[C], ee = $(u), ze = $(
+          const h = O[C], P = l[C], ee = $(u), ze = $(
             u + i / c.outflow * v.height
           ), ce = $(
-            f.y + e.value.style.chart.padding.top
+            h.y + e.value.style.chart.padding.top
           ), Me = $(
-            ce + i / P.inflow * f.height
+            ce + i / P.inflow * h.height
           );
           A.push({
             id: ve(),
             source: n,
             target: C,
-            path: `M ${$(v.x + M.value)} ${ee} L ${$(v.x + M.value)} ${ze} L ${$(f.x)} ${Me} L ${$(f.x)} ${ce} Z`,
+            path: `M ${$(v.x + H.value)} ${ee} L ${$(v.x + H.value)} ${ze} L ${$(h.x)} ${Me} L ${$(h.x)} ${ce} Z`,
             value: i,
             sourceColor: c.color,
             targetColor: P.color
@@ -190,7 +190,7 @@ const It = ["id"], At = {
       return { nodeCoordinates: O, links: A };
     }
     const m = p(() => {
-      const t = ot(T.dataset);
+      const t = ot(x.dataset);
       return {
         nodes: Object.keys(t.nodeCoordinates).map((l, o) => ({
           ...t.nodeCoordinates[l],
@@ -203,39 +203,39 @@ const It = ["id"], At = {
     function lt(t) {
       const l = {};
       for (const a in t) {
-        const { x: s, height: h } = t[a];
-        l[s] || (l[s] = 0), l[s] += h + _e.value;
+        const { x: s, height: f } = t[a];
+        l[s] || (l[s] = 0), l[s] += f + _e.value;
       }
       return Math.max(...Object.values(l));
     }
     const G = p(() => {
-      const { top: t, right: l, bottom: o, left: a } = e.value.style.chart.padding, s = Math.max(...m.value.nodes.map((x) => x.x)), h = a + s + M.value + l, F = Math.max(
-        ...m.value.nodes.map((x) => x.absoluteY + x.height)
-      ), Y = t + F + o;
-      return { width: h, height: Y };
+      const { top: t, right: l, bottom: o, left: a } = e.value.style.chart.padding, s = Math.max(...m.value.nodes.map((T) => T.x)), f = a + s + H.value + l, F = Math.max(
+        ...m.value.nodes.map((T) => T.absoluteY + T.height)
+      ), B = t + F + o;
+      return { width: f, height: B };
     });
     function at(t) {
       const l = {}, o = {}, a = /* @__PURE__ */ new Set();
-      return se.value.forEach(([s, h, F]) => {
-        l[s] || (l[s] = []), o[h] || (o[h] = []), l[s].push(h), o[h].push(s);
+      return se.value.forEach(([s, f, F]) => {
+        l[s] || (l[s] = []), o[f] || (o[f] = []), l[s].push(f), o[f].push(s);
       }), l[t] && l[t].forEach((s) => a.add(s)), o[t] && o[t].forEach((s) => a.add(s)), Array.from(a).concat(t);
     }
-    const k = y(null), H = y(null), re = y(null), J = y(!1);
+    const k = y(null), Y = y(null), re = y(null), J = y(!1);
     function nt(t) {
-      I.value = [], k.value = at(t.name), H.value = t.name;
+      I.value = [], k.value = at(t.name), Y.value = t.name;
       const l = t.name, o = se.value;
-      let a = 0, s = 0, h = [], F = [];
-      const Y = new Set(o.map(([i]) => i)), x = new Set(o.map(([, i]) => i)), Ee = Array.from(Y).filter((i) => !x.has(i)), O = o.filter(([i]) => Ee.includes(i)).reduce((i, [f, P, ee]) => i + ee, 0), A = {};
+      let a = 0, s = 0, f = [], F = [];
+      const B = new Set(o.map(([i]) => i)), T = new Set(o.map(([, i]) => i)), Ee = Array.from(B).filter((i) => !T.has(i)), O = o.filter(([i]) => Ee.includes(i)).reduce((i, [h, P, ee]) => i + ee, 0), A = {};
       m.value.nodes.forEach((i) => {
         A[i.name] = i.color;
-      }), o.forEach(([i, f, P]) => {
-        f === l && (a += P, h.push({ source: i, value: P, color: A[i] })), i === l && (s += P, F.push({ target: f, value: P, color: A[f] }));
+      }), o.forEach(([i, h, P]) => {
+        h === l && (a += P, f.push({ source: i, value: P, color: A[i] })), i === l && (s += P, F.push({ target: h, value: P, color: A[h] }));
       });
       const n = Math.max(a, s), u = O > 0 ? n / O * 100 : 0, c = {
         name: l,
         inflow: a,
         outflow: s,
-        from: h,
+        from: f,
         to: F,
         percentOfTotal: u,
         color: A[l] || "#000000"
@@ -243,7 +243,7 @@ const It = ["id"], At = {
       re.value = { datapoint: c }, le.value = !0;
       let v = "";
       const C = e.value.style.chart.tooltip.customFormat;
-      if (J.value = !1, xt(C))
+      if (J.value = !1, Tt(C))
         try {
           const i = C({
             datapoint: c,
@@ -261,24 +261,24 @@ const It = ["id"], At = {
           s: "%",
           r: e.value.style.chart.tooltip.roundingPercentage
         })}</div>` : "";
-        v += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;"><span style="margin-right:4px; color:${c.color}">⏹</span>${c.name}${i}</div>`, c.from.length && (v += `<div>${e.value.style.chart.tooltip.translations.from}</div>`, c.from.forEach((f) => {
-          v += `<div><span style="color:${f.color}">⏹←</span> ${f.source}: ${fe(
+        v += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;"><span style="margin-right:4px; color:${c.color}">⏹</span>${c.name}${i}</div>`, c.from.length && (v += `<div>${e.value.style.chart.tooltip.translations.from}</div>`, c.from.forEach((h) => {
+          v += `<div><span style="color:${h.color}">⏹←</span> ${h.source}: ${fe(
             e.value.style.chart.nodes.labels.formatter,
-            f.value,
+            h.value,
             q({
               p: e.value.style.chart.nodes.labels.prefix,
-              v: f.value,
+              v: h.value,
               s: e.value.style.chart.nodes.labels.suffix,
               r: e.value.style.chart.nodes.labels.rounding
             })
           )}</div>`;
-        })), c.to.length && (v += `<div style="margin-top:6px;">${e.value.style.chart.tooltip.translations.to}</div>`, c.to.forEach((f) => {
-          v += `<div><span style="color:${f.color}">⏹→</span> ${f.target}: ${fe(
+        })), c.to.length && (v += `<div style="margin-top:6px;">${e.value.style.chart.tooltip.translations.to}</div>`, c.to.forEach((h) => {
+          v += `<div><span style="color:${h.color}">⏹→</span> ${h.target}: ${fe(
             e.value.style.chart.nodes.labels.formatter,
-            f.value,
+            h.value,
             q({
               p: e.value.style.chart.nodes.labels.prefix,
-              v: f.value,
+              v: h.value,
               s: e.value.style.chart.nodes.labels.suffix,
               r: e.value.style.chart.nodes.labels.rounding
             })
@@ -287,7 +287,7 @@ const It = ["id"], At = {
       }
     }
     function Oe() {
-      k.value = null, H.value = null, le.value = !1;
+      k.value = null, Y.value = null, le.value = !1;
     }
     const Se = p(() => m.value.links.map(
       ({ source: t, target: l, sourceColor: o, targetColor: a, value: s }) => ({
@@ -300,7 +300,7 @@ const It = ["id"], At = {
     ));
     function Fe(t = null) {
       ft(() => {
-        const l = Se.value.map((s, h) => [[s.source], [s.target], [s.value]]), o = [
+        const l = Se.value.map((s, f) => [[s.source], [s.target], [s.value]]), o = [
           [e.value.style.chart.title.text],
           [e.value.style.chart.title.subtitle.text],
           [
@@ -309,7 +309,7 @@ const It = ["id"], At = {
             [e.value.table.columnNames.value]
           ]
         ].concat(l), a = $t(o);
-        t ? t(a) : Tt({
+        t ? t(a) : xt({
           csvContent: a,
           title: e.value.style.chart.title.text || "vue-ui-flow"
         });
@@ -320,7 +320,7 @@ const It = ["id"], At = {
         e.value.table.columnNames.source,
         e.value.table.columnNames.target,
         e.value.table.columnNames.value
-      ], l = Se.value.map((s, h) => [
+      ], l = Se.value.map((s, f) => [
         {
           color: s.sourceColor,
           name: s.source
@@ -398,10 +398,10 @@ const It = ["id"], At = {
       if (k.value?.every(
         (a) => e.value.nodeCategories[a] === o
       )) {
-        k.value = null, H.value = null, I.value = [];
+        k.value = null, Y.value = null, I.value = [];
         return;
       }
-      I.value = [l], k.value = m.value.nodes.filter((a) => e.value.nodeCategories[a.name] === o).map((a) => a.name), H.value = null;
+      I.value = [l], k.value = m.value.nodes.filter((a) => e.value.nodeCategories[a.name] === o).map((a) => a.name), Y.value = null;
     }
     const rt = p(() => ({
       cy: "flow-legend",
@@ -412,16 +412,23 @@ const It = ["id"], At = {
       fontWeight: e.value.style.chart.legend.bold ? "bold" : "normal"
     }));
     async function ut({ scale: t = 2 } = {}) {
-      if (!V.value) return;
-      const { imageUri: l, base64: o } = await Pt({ domElement: V.value, base64: !0, img: !0, scale: t });
-      return { imageUri: l, base64: o };
+      if (!z.value) return;
+      const { width: l, height: o } = z.value.getBoundingClientRect(), a = l / o, { imageUri: s, base64: f } = await Pt({ domElement: z.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: s,
+        base64: f,
+        title: e.value.style.chart.title.text,
+        width: l,
+        height: o,
+        aspectRatio: a
+      };
     }
-    return Re({
+    return De({
       getData: st,
       getImage: ut,
       generateCsv: Fe,
-      generateImage: xe,
-      generatePdf: Te,
+      generateImage: Te,
+      generatePdf: xe,
       toggleTable: Pe,
       toggleAnnotator: ue,
       toggleTooltip: Le,
@@ -430,14 +437,14 @@ const It = ["id"], At = {
       toggleFullscreen: me
     }), (t, l) => (d(), g("div", {
       ref_key: "flowChart",
-      ref: V,
-      class: He(`vue-ui-flow ${z.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      ref: z,
+      class: He(`vue-ui-flow ${M.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
       style: L(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
       id: `flow_${oe.value}`,
       onMouseenter: l[3] || (l[3] = () => r(ye)(!0)),
       onMouseleave: l[4] || (l[4] = () => r(ye)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (d(), B(r(We), {
+      e.value.userOptions.buttons.annotator ? (d(), R(r(We), {
         key: 0,
         svgRef: r(ke),
         backgroundColor: e.value.style.chart.backgroundColor,
@@ -447,7 +454,7 @@ const It = ["id"], At = {
       }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : _("", !0),
       Ke.value ? (d(), g("div", At, null, 512)) : _("", !0),
       e.value.style.chart.title.text ? (d(), g("div", Et, [
-        (d(), B(Ft, {
+        (d(), R(Ft, {
           key: `title_${ge.value}`,
           config: {
             title: {
@@ -461,7 +468,7 @@ const It = ["id"], At = {
           }
         }, null, 8, ["config"]))
       ])) : _("", !0),
-      e.value.userOptions.show && te.value && (r(be) || r(ne)) ? (d(), B(r(qe), {
+      e.value.userOptions.show && te.value && (r(be) || r(ne)) ? (d(), R(r(qe), {
         ref: "details",
         key: `user_option_${pe.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
@@ -475,9 +482,9 @@ const It = ["id"], At = {
         hasTable: e.value.userOptions.buttons.table,
         callbacks: e.value.userOptions.callbacks,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: z.value,
+        isFullscreen: M.value,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: V.value,
+        chartElement: z.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
         printScale: e.value.userOptions.print.scale,
@@ -486,9 +493,9 @@ const It = ["id"], At = {
         isTooltip: N.value.showTooltip,
         onToggleTooltip: Le,
         onToggleFullscreen: me,
-        onGeneratePdf: r(Te),
+        onGeneratePdf: r(xe),
         onGenerateCsv: Fe,
-        onGenerateImage: r(xe),
+        onGenerateImage: r(Te),
         onToggleTable: Pe,
         onToggleAnnotator: ue,
         style: L({
@@ -498,7 +505,7 @@ const It = ["id"], At = {
         t.$slots.menuIcon ? {
           name: "menuIcon",
           fn: w(({ isOpen: o, color: a }) => [
-            b(t.$slots, "menuIcon", R(U({ isOpen: o, color: a })), void 0, !0)
+            b(t.$slots, "menuIcon", U(V({ isOpen: o, color: a })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
@@ -540,14 +547,14 @@ const It = ["id"], At = {
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: w(({ toggleFullscreen: o, isFullscreen: a }) => [
-            b(t.$slots, "optionFullscreen", R(U({ toggleFullscreen: o, isFullscreen: a })), void 0, !0)
+            b(t.$slots, "optionFullscreen", U(V({ toggleFullscreen: o, isFullscreen: a })), void 0, !0)
           ]),
           key: "6"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
           fn: w(({ toggleAnnotator: o, isAnnotator: a }) => [
-            b(t.$slots, "optionAnnotator", R(U({ toggleAnnotator: o, isAnnotator: a })), void 0, !0)
+            b(t.$slots, "optionAnnotator", U(V({ toggleAnnotator: o, isAnnotator: a })), void 0, !0)
           ]),
           key: "7"
         } : void 0
@@ -558,8 +565,8 @@ const It = ["id"], At = {
         xmlns: r(Ct),
         viewBox: `0 0 ${G.value.width} ${G.value.height}`,
         class: He({
-          "vue-data-ui-fullscreen--on": z.value,
-          "vue-data-ui-fulscreen--off": !z.value
+          "vue-data-ui-fullscreen--on": M.value,
+          "vue-data-ui-fulscreen--off": !M.value
         }),
         style: L(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
       }, [
@@ -601,24 +608,24 @@ const It = ["id"], At = {
           stroke: e.value.style.chart.links.stroke,
           "stroke-width": e.value.style.chart.links.strokeWidth,
           style: L(`
-                    opacity:${k.value ? k.value.includes(o.source) && k.value.includes(o.target) ? 1 : 0.3 : H.value ? [o.target, o.source].includes(H.value) ? 1 : 0.3 : e.value.style.chart.links.opacity}
+                    opacity:${k.value ? k.value.includes(o.source) && k.value.includes(o.target) ? 1 : 0.3 : Y.value ? [o.target, o.source].includes(Y.value) ? 1 : 0.3 : e.value.style.chart.links.opacity}
                 `)
-        }, null, 12, Dt))), 256)),
+        }, null, 12, Rt))), 256)),
         (d(!0), g(W, null, j(m.value.nodes, (o, a) => (d(), g("rect", {
           class: "vue-ui-flow-node",
           x: o.x,
           y: r($)(o.absoluteY) + e.value.style.chart.padding.top,
           height: r($)(o.height),
-          width: M.value,
+          width: H.value,
           fill: o.color,
           stroke: e.value.style.chart.nodes.stroke,
           "stroke-width": e.value.style.chart.nodes.strokeWidth,
           onMouseenter: (s) => nt(o),
           onMouseleave: l[0] || (l[0] = (s) => Oe()),
           style: L(`opacity:${k.value ? k.value.includes(o.name) ? 1 : 0.3 : 1}`)
-        }, null, 44, Rt))), 256)),
+        }, null, 44, Dt))), 256)),
         (d(!0), g(W, null, j(m.value.nodes, (o, a) => (d(), g("text", {
-          x: o.x + M.value / 2,
+          x: o.x + H.value / 2,
           y: r($)(
             o.absoluteY + o.height / 2 - e.value.style.chart.nodes.labels.fontSize / 4
           ) + e.value.style.chart.padding.top,
@@ -631,7 +638,7 @@ const It = ["id"], At = {
           length: e.value.style.chart.nodes.labels.abbreviation.length
         }) : o.name), 13, Ut))), 256)),
         (d(!0), g(W, null, j(m.value.nodes, (o, a) => (d(), g("text", {
-          x: o.x + M.value / 2,
+          x: o.x + H.value / 2,
           y: r($)(
             o.absoluteY + o.height / 2 + e.value.style.chart.nodes.labels.fontSize
           ) + e.value.style.chart.padding.top,
@@ -653,9 +660,9 @@ const It = ["id"], At = {
         b(t.$slots, "svg", { svg: G.value }, void 0, !0)
       ], 14, zt)),
       t.$slots.watermark ? (d(), g("div", Gt, [
-        b(t.$slots, "watermark", R(U({ isPrinting: r(we) || r($e) })), void 0, !0)
+        b(t.$slots, "watermark", U(V({ isPrinting: r(we) || r($e) })), void 0, !0)
       ])) : _("", !0),
-      te.value ? _("", !0) : (d(), B(r(je), {
+      te.value ? _("", !0) : (d(), R(r(je), {
         key: 5,
         config: {
           type: "flow",
@@ -668,7 +675,7 @@ const It = ["id"], At = {
         ref_key: "chartLegend",
         ref: Je
       }, [
-        e.value.style.chart.legend.show && Ae.value.length ? (d(), B(St, {
+        e.value.style.chart.legend.show && Ae.value.length ? (d(), R(St, {
           key: 0,
           legendSet: Ae.value,
           config: rt.value,
@@ -698,20 +705,20 @@ const It = ["id"], At = {
         backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: V.value,
+        parent: z.value,
         content: ae.value,
         isCustom: J.value,
-        isFullscreen: z.value
+        isFullscreen: M.value
       }, {
         "tooltip-before": w(() => [
-          b(t.$slots, "tooltip-before", R(U({ ...re.value })), void 0, !0)
+          b(t.$slots, "tooltip-before", U(V({ ...re.value })), void 0, !0)
         ]),
         "tooltip-after": w(() => [
-          b(t.$slots, "tooltip-after", R(U({ ...re.value })), void 0, !0)
+          b(t.$slots, "tooltip-after", U(V({ ...re.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen"]),
-      te.value ? (d(), B(r(Ue), {
+      te.value ? (d(), R(r(Ue), {
         key: 7,
         hideDetails: "",
         config: {
@@ -752,7 +759,7 @@ const It = ["id"], At = {
       }, 8, ["config"])) : _("", !0)
     ], 46, It));
   }
-}, so = /* @__PURE__ */ Lt(qt, [["__scopeId", "data-v-5c035177"]]);
+}, so = /* @__PURE__ */ Lt(qt, [["__scopeId", "data-v-3da6170d"]]);
 export {
   so as default
 };