vue-data-ui 3.15.12 → 3.16.1

package/dist/vue-ui-flow-zvZylhgr.js

@@ -0,0 +1,1202 @@
+import { defineAsyncComponent as te, ref as r, computed as i, onMounted as Xo, toRefs as qo, watch as Re, openBlock as c, createElementBlock as b, unref as u, normalizeStyle as X, normalizeClass as eo, createElementVNode as H, toDisplayString as he, createBlock as oe, createCommentVNode as w, withCtx as h, renderSlot as v, normalizeProps as E, guardReactiveProps as _, createSlots as to, createVNode as He, Fragment as Pe, renderList as Ie, Teleport as Zo, resolveDynamicComponent as Jo, mergeProps as Qo, createTextVNode as oo, nextTick as dt } from "vue";
+import { j as Ue, t as lo, o as ao, q as el, m as tl, p as q, n as ol, K as S, s as ll, l as pe, X as al, k as We, W as no, a as nl, a0 as sl, a1 as rl, T as ul } from "./lib-DBptbyyI.js";
+import { t as il, u as cl } from "./useResponsive-DfdjqQps.js";
+import { u as dl } from "./useConfig-DO94Aj5s.js";
+import { u as vl } from "./usePrinter-CEpYU3r5.js";
+import { u as fl, B as hl } from "./BaseScanner-BhhkKVoj.js";
+import { u as pl } from "./useSvgExport-ByUukOZt.js";
+import { u as vt } from "./useNestedProp-Bf5XFbs8.js";
+import { u as gl } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as yl } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as ml } from "./useChartAccessibility-9icAAmYg.js";
+import bl from "./img-LXxMLmCg.js";
+import Cl from "./Title-BeMKE1cj.js";
+import kl from "./vue_ui_flow-BErINgox.js";
+import wl from "./Legend-CS7Xo5LK.js";
+import { A as $l } from "./A11yDataTable-KcVAX2cP.js";
+import { _ as Al } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const xl = ["id"], Tl = ["id"], Sl = {
+  key: 2,
+  ref: "noTitle",
+  class: "vue-data-ui-no-title-space",
+  style: "height:36px; width: 100%;background:transparent"
+}, Pl = ["id"], Il = { style: { position: "relative" } }, Nl = ["xmlns", "aria-describedby", "viewBox"], Ol = ["width", "height"], El = ["id"], _l = ["stop-color"], Fl = ["stop-color"], Ml = ["d", "fill", "stroke", "stroke-width"], Dl = ["data-a11y-node-id", "x", "y", "height", "width", "fill", "stroke", "stroke-width", "rx", "aria-label", "onMouseenter", "onMouseleave", "onClick"], Ll = { key: 1 }, Bl = ["x", "y", "font-size", "fill"], Yl = ["x", "y", "font-size", "fill"], zl = {
+  key: 0,
+  style: { position: "absolute", top: "100%", left: "0", width: "100%" },
+  "data-dom-to-png-ignore": "",
+  "aria-hidden": "true"
+}, Rl = {
+  key: 5,
+  class: "vue-data-ui-watermark"
+}, Hl = ["id"], Ul = ["onClick"], Wl = ["innerHTML"], Vl = {
+  __name: "vue-ui-flow",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["copyAlt"],
+  setup(so, { expose: ro, emit: uo }) {
+    const io = te(() => import("./Tooltip-Bf-kM3_A.js")), co = te(() => import("./BaseIcon-Cb3zzG6s.js")), vo = te(() => import("./vue-ui-accordion-nvggWcGN.js")), fo = te(() => import("./DataTable-DT2kIdQ6.js")), ho = te(() => import("./PenAndPaper-Ct3qJ4lA.js")), po = te(() => import("./UserOptions-rW2fRf3V.js")), go = te(() => import("./PackageVersion-DPO-OOVI.js")), yo = te(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_flow: mo } = dl(), { isThemeValid: bo, warnInvalidTheme: Co } = gl(), P = so, ko = uo, U = r(Ue()), V = r(null), ft = r(0), ht = r(0), Ne = r(!1), Ve = r(""), pt = r(null), gt = r(null), yt = r(null), ge = r(null), Oe = r(null), mt = r(!1), ye = r(null), Ge = r(null), wo = r(null), Ee = r(!1), _e = r(!1), me = r(null), de = r(null), bt = r({ x: 0, y: 0 }), je = r("pointer"), Fe = r(!1), Ct = i(() => !!P.dataset && P.dataset.length);
+    Xo(() => {
+      mt.value = !0, wt();
+    });
+    const le = r(!1);
+    function kt(t) {
+      le.value = t, ft.value += 1;
+    }
+    const e = r(Ze()), ve = i(() => e.value.userOptions.useCursorPointer), $o = i(() => lo({
+      defaultConfig: {
+        userOptions: { show: !1 },
+        nodeCategories: {
+          B: "A",
+          C: "B"
+        },
+        nodeCategoryColors: {
+          A: "#CACACA",
+          B: "#AAAAAA"
+        },
+        table: { show: !1 },
+        style: {
+          chart: {
+            backgroundColor: "#99999930",
+            legend: {
+              backgroundColor: "transparent"
+            },
+            nodes: {
+              labels: {
+                show: !1
+              },
+              stroke: "#666666"
+            },
+            links: {
+              stroke: "#666666"
+            }
+          }
+        }
+      },
+      userConfig: e.value.skeletonConfig ?? {}
+    })), { loading: Ke, FINAL_DATASET: Me, manualLoading: Xe } = fl({
+      ...qo(P),
+      FINAL_CONFIG: e,
+      prepareConfig: Ze,
+      skeletonDataset: P.config?.skeletonDataset ?? [
+        ["A", "B", 2, "#CACACA"],
+        ["B", "C", 1, "#CACACA"],
+        ["C", "D", 0.5, "#CACACA"],
+        ["E", "F", 1, "#AAAAAA"],
+        ["F", "G", 0.5, "#AAAAAA"],
+        ["G", "H", 0.25, "#AAAAAA"]
+      ],
+      skeletonConfig: lo({
+        defaultConfig: e.value,
+        userConfig: $o.value
+      })
+    }), Ao = i(() => !!e.value.debug);
+    function wt() {
+      if (ao(P.dataset) && (el({
+        componentName: "VueUiFlow",
+        type: "dataset",
+        debug: Ao.value
+      }), Xe.value = !0), ao(P.dataset) || (Xe.value = e.value.loading), e.value.responsive) {
+        const t = il(() => {
+          const { width: l, height: o } = cl({
+            chart: V.value,
+            title: e.value.style.chart.title.text ? gt.value : null,
+            legend: e.value.style.chart.legend.show ? pt.value : null,
+            source: yt.value
+          });
+          requestAnimationFrame(() => {
+            xt.value = l, Tt.value = o;
+          });
+        });
+        ge.value && (Oe.value && ge.value.unobserve(Oe.value), ge.value.disconnect()), ge.value = new ResizeObserver(t), Oe.value = V.value.parentNode, ge.value.observe(Oe.value);
+      }
+    }
+    const { userOptionsVisible: qe, setUserOptionsVisibility: $t, keepUserOptionState: At } = yl({ config: e.value }), { svgRef: ae } = ml({
+      config: e.value.style.chart.title
+    });
+    function Ze() {
+      const t = vt({
+        userConfig: P.config,
+        defaultConfig: mo
+      });
+      let l = t;
+      const o = t.theme;
+      if (o)
+        if (!bo.value(t))
+          Co(t), l = t;
+        else {
+          const a = vt({
+            userConfig: kl[o] || P.config,
+            defaultConfig: t
+          });
+          l = {
+            ...vt({
+              userConfig: P.config,
+              defaultConfig: a
+            }),
+            customPalette: t.customPalette.length ? t.customPalette : tl[o] || q
+          };
+        }
+      else
+        l = t;
+      return l.nodeCategories = P.config.nodeCategories || {}, l.nodeCategoryColors = P.config.nodeCategoryColors || {}, l;
+    }
+    const xt = r(e.value.style.chart.width), Tt = r(e.value.style.chart.height);
+    Re(
+      () => P.config,
+      (t) => {
+        Ke.value || (e.value = Ze()), qe.value = !e.value.userOptions.showOnChartHover, wt(), ht.value += 1, Y.value.showTable = e.value.table.show;
+      },
+      { deep: !0 }
+    ), Re(() => P.dataset, (t) => {
+      Array.isArray(t) && t.length > 0 && (Xe.value = !1);
+    }, { deep: !0 });
+    const { isPrinting: Je, isImaging: Qe, generatePdf: St, generateImage: Pt } = vl({
+      elementId: `flow_${U.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-flow",
+      options: e.value.userOptions.print
+    }), xo = i(() => e.value.userOptions.show && !e.value.style.chart.title.text), De = i(() => ol(e.value.customPalette)), be = i(() => e.value.style.chart.nodes.width), Y = r({
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    });
+    Re(e, () => {
+      Y.value = {
+        showTable: e.value.table.show,
+        showTooltip: e.value.style.chart.tooltip.show
+      };
+    }, { immediate: !0 });
+    const It = i(() => !Me.value || !Me.value.length ? [] : Me.value.map((t, l) => [
+      t[0],
+      t[1],
+      S(t[2]),
+      t[3] ? ll(t[3]) : De.value[l] || De.value[l % De.value.length] || q[l] || q[l % q.length]
+    ]));
+    function To(t) {
+      const l = {}, o = {};
+      function a(s, d) {
+        l[s] || (l[s] = {
+          level: null,
+          inflow: 0,
+          outflow: 0,
+          children: [],
+          color: null,
+          uid: Ue()
+        }), l[s].level === null && (l[s].level = d), o[d] || (o[d] = []), o[d].includes(s) || o[d].push(s);
+      }
+      t.forEach(([s, d, g]) => {
+        const m = l[s]?.level ?? 0, R = m + 1;
+        a(s, m), a(d, R), l[s].children.push({ target: d, value: g }), l[s].outflow += g, l[d].inflow += g;
+      });
+      const n = new Set(t.map(([s]) => s)), p = new Set(t.map(([, s]) => s)), I = Array.from(n).filter((s) => !p.has(s)), F = {};
+      I.forEach((s, d) => {
+        F[s] = De.value[d] || q[d % q.length];
+      });
+      const z = {};
+      t.forEach(([s, d, g, m]) => {
+        m && (z[s] = m, z[d] = m);
+      }), Object.keys(l).forEach((s, d) => {
+        const g = e.value.nodeCategories?.[s], m = g ? e.value.nodeCategoryColors?.[g] : null;
+        l[s].color = z[s] || m || (I.includes(s) ? F[s] : null) || q[d % q.length];
+      }), Object.keys(l).forEach((s) => {
+        l[s].value = Math.max(l[s].inflow, l[s].outflow);
+      });
+      const W = Ce.value, G = Et.value.width, j = Et.value.height, C = Object.keys(o).map(Number).sort((s, d) => s - d), N = C.length || 1, M = N > 1 ? G / (N - 1) : 0, rt = Number(be.value), Te = Number(
+        e.value.style.chart.nodes.gapPx ?? e.value.style.chart.nodes.gap ?? 8
+      ), O = Number(
+        e.value.style.chart.nodes.minHeight || 0
+      );
+      function Z(s) {
+        const d = o[s], g = d.length;
+        if (!g) return 1 / 0;
+        const m = Math.max(0, (g - 1) * Te), R = Math.max(0, j - m), Q = Math.min(O, g ? R / g : 0);
+        let x = 0, D = d.map((k) => l[k].value || 0), T = D.reduce((k, L) => k + L, 0);
+        for (let k = 0; k < 12; k += 1) {
+          const L = T > 0 ? (R - x) / T : 0, ee = [];
+          for (let B = 0; B < D.length; B += 1) {
+            const K = D[B];
+            K < 0 || K * L < Q && ee.push(B);
+          }
+          if (!ee.length) return Math.max(0, L);
+          for (const B of ee)
+            x += Q, T -= D[B], D[B] = -1;
+          if (T <= 0) return 0;
+        }
+        return T > 0 ? Math.max(0, (R - x) / T) : 0;
+      }
+      const Se = C.map(Z), f = Se.length ? Math.min(...Se) : 0, y = {};
+      C.forEach((s) => {
+        const d = o[s], g = d.length, m = Math.max(0, (g - 1) * Te), R = Math.max(0, j - m), Q = Math.min(O, g ? R / g : 0), x = d.map(
+          (k) => Math.max(Q, (l[k].value || 0) * f)
+        ), D = x.reduce((k, L) => k + L, 0) + m;
+        let T = Math.max(0, (j - D) / 2);
+        d.forEach((k, L) => {
+          const ee = x[L], B = W.left + s * M, K = T;
+          y[k] = {
+            x: B,
+            y: K,
+            absoluteY: K,
+            height: ee,
+            i: L,
+            color: l[k].color,
+            value: l[k].value,
+            id: Ue()
+          }, T += ee, L < g - 1 && (T += Te);
+        });
+      });
+      const J = [], ue = W.top, ut = {}, it = {};
+      Object.keys(l).forEach((s) => {
+        ut[s] = y[s]?.y ?? 0, it[s] = 0;
+      });
+      const Vo = 1e-6, Go = 0.25, jo = !!e.value.style.chart.links.smooth, Ht = 0.5;
+      return C.forEach((s) => {
+        o[s].forEach((g) => {
+          const m = l[g], R = y[g];
+          if (!m.children || !m.children.length) return;
+          let Q = R.y;
+          m.children.forEach(({ target: x, value: D }) => {
+            const T = y[x], k = l[x], L = m.outflow > 0 ? D / m.outflow : 0, ee = k.inflow > 0 ? D / k.inflow : 0, B = S(Q + ue), K = S(
+              Q + L * R.height + ue
+            ), Ut = ut[x];
+            let ze = Ut + ee * T.height;
+            it[x] += D;
+            const Ko = k.inflow > 0 && it[x] >= k.inflow - Vo, Wt = T.y + T.height;
+            (Ko || ze > Wt - Go) && (ze = Wt);
+            const Vt = S(Ut + ue), Gt = S(ze + ue), ie = S(R.x + rt), ce = S(T.x);
+            let ct;
+            if (!jo || ce <= ie)
+              ct = `M ${ie} ${B} L ${ie} ${K} L ${ce} ${Gt} L ${ce} ${Vt} Z`;
+            else {
+              const jt = ce - ie, Kt = S(ie + jt * Ht), Xt = S(ce - jt * Ht), qt = B, Zt = Vt, Jt = K, Qt = Gt;
+              ct = `M ${ie} ${qt} C ${Kt} ${qt}, ${Xt} ${Zt}, ${ce} ${Zt} L ${ce} ${Qt} C ${Xt} ${Qt}, ${Kt} ${Jt}, ${ie} ${Jt} Z`;
+            }
+            J.push({
+              id: Ue(),
+              source: g,
+              target: x,
+              path: ct,
+              value: D,
+              sourceColor: m.color,
+              targetColor: l[x].color
+            }), Q = K - ue, ut[x] = ze;
+          });
+        });
+      }), { nodeCoordinates: y, links: J };
+    }
+    const $ = i(() => {
+      const t = To(Me.value);
+      return {
+        nodes: Object.keys(t.nodeCoordinates).map((l, o) => ({
+          ...t.nodeCoordinates[l],
+          name: l
+        })),
+        links: t.links
+      };
+    }), Nt = i(() => xt.value), Ot = i(() => Tt.value), Ce = i(() => e.value.style.chart.padding), Et = i(() => ({
+      width: Math.max(0, Nt.value - 40 - Ce.value.right - Ce.value.left),
+      height: Math.max(0, Ot.value - Ce.value.top - Ce.value.bottom)
+    })), ke = i(() => ({
+      width: Nt.value,
+      height: Ot.value
+    }));
+    function So(t) {
+      const l = {}, o = {}, a = /* @__PURE__ */ new Set();
+      return It.value.forEach(([n, p, I]) => {
+        l[n] || (l[n] = []), o[p] || (o[p] = []), l[n].push(p), o[p].push(n);
+      }), l[t] && l[t].forEach((n) => a.add(n)), o[t] && o[t].forEach((n) => a.add(n)), Array.from(a).concat(t);
+    }
+    const A = r(null), ne = r(null), we = r(null), Le = r(!1), $e = r(null);
+    function et() {
+      $e.value = null, A.value = null, ne.value = null, Ne.value = !1, me.value = null, de.value = null;
+    }
+    function Po(t) {
+      if (!ae.value || !t) return;
+      const l = ae.value.querySelector(`[data-a11y-node-id="${t}"]`);
+      if (!l) return;
+      const o = l.getBoundingClientRect();
+      bt.value = {
+        x: o.left + o.width / 2,
+        y: o.top + o.height / 2
+      };
+    }
+    function tt(t, l, o = "pointer", a = null) {
+      re.value = [], A.value = So(t.name), ne.value = t.name, $e.value = t.id, je.value = o, me.value = a, de.value = t.id;
+      const n = t.name, p = It.value;
+      let I = 0, F = 0, z = [], W = [];
+      const G = new Set(p.map(([f]) => f)), j = new Set(p.map(([, f]) => f)), C = Array.from(G).filter((f) => !j.has(f)), N = p.filter(([f]) => C.includes(f)).reduce((f, [y, J, ue]) => f + ue, 0), M = {};
+      $.value.nodes.forEach((f) => {
+        M[f.name] = f.color;
+      }), p.forEach(([f, y, J]) => {
+        y === n && (I += J, z.push({ source: f, value: J, color: M[f] })), f === n && (F += J, W.push({ target: y, value: J, color: M[y] }));
+      });
+      const rt = Math.max(I, F), Te = N > 0 ? rt / N * 100 : 0, O = {
+        name: n,
+        inflow: I,
+        outflow: F,
+        from: z,
+        to: W,
+        percentOfTotal: Te,
+        color: M[n] || "#000000"
+      };
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: O, seriesIndex: l }), we.value = { datapoint: O }, Ne.value = !0;
+      let Z = "";
+      const Se = e.value.style.chart.tooltip.customFormat;
+      if (Le.value = !1, ul(Se))
+        try {
+          const f = Se({
+            datapoint: O,
+            series: $.value,
+            config: e.value
+          });
+          typeof f == "string" && (Ve.value = f, Le.value = !0);
+        } catch {
+          console.warn("Custom format cannot be applied.");
+        }
+      if (!Le.value) {
+        const f = e.value.style.chart.tooltip.showPercentage ? `<div>${pe({
+          p: e.value.style.chart.tooltip.translations.percentOfTotal,
+          v: O.percentOfTotal,
+          s: "%",
+          r: e.value.style.chart.tooltip.roundingPercentage
+        })}</div>` : "";
+        Z += `<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:${O.color}">⏹</span>${O.name}${f}</div>`, O.from.length && (Z += `<div>${e.value.style.chart.tooltip.translations.from}</div>`, O.from.forEach((y) => {
+          Z += `<div><span style="color:${y.color}">⏹←</span> ${y.source}: ${We(
+            e.value.style.chart.nodes.labels.formatter,
+            y.value,
+            pe({
+              p: e.value.style.chart.nodes.labels.prefix,
+              v: y.value,
+              s: e.value.style.chart.nodes.labels.suffix,
+              r: e.value.style.chart.nodes.labels.rounding
+            })
+          )}</div>`;
+        })), O.to.length && (Z += `<div style="margin-top:6px;">${e.value.style.chart.tooltip.translations.to}</div>`, O.to.forEach((y) => {
+          Z += `<div><span style="color:${y.color}">⏹→</span> ${y.target}: ${We(
+            e.value.style.chart.nodes.labels.formatter,
+            y.value,
+            pe({
+              p: e.value.style.chart.nodes.labels.prefix,
+              v: y.value,
+              s: e.value.style.chart.nodes.labels.suffix,
+              r: e.value.style.chart.nodes.labels.rounding
+            })
+          )}</div>`;
+        })), Ve.value = Z;
+      }
+      o === "keyboard" && dt(() => {
+        Po(t.id);
+      });
+    }
+    function _t(t) {
+      const l = we.value;
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: l, seriesIndex: t }), !(je.value === "keyboard" && de.value) && ($e.value = null, A.value = null, ne.value = null, Ne.value = !1);
+    }
+    function Ft(t) {
+      const l = we.value;
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: l, seriesIndex: t });
+    }
+    const Mt = i(() => $.value.links.map(
+      ({ source: t, target: l, sourceColor: o, targetColor: a, value: n }) => ({
+        source: t,
+        target: l,
+        sourceColor: o,
+        targetColor: a,
+        value: n
+      })
+    ));
+    function ot(t = null) {
+      dt(() => {
+        const l = Mt.value.map((n, p) => [[n.source], [n.target], [n.value]]), o = [
+          [e.value.style.chart.title.text],
+          [e.value.style.chart.title.subtitle.text],
+          [
+            [e.value.table.columnNames.source],
+            [e.value.table.columnNames.target],
+            [e.value.table.columnNames.value]
+          ]
+        ].concat(l), a = sl(o);
+        t ? t(a) : rl({
+          csvContent: a,
+          title: e.value.style.chart.title.text || "vue-ui-flow"
+        });
+      });
+    }
+    const fe = i(() => {
+      const t = [
+        e.value.table.columnNames.source,
+        e.value.table.columnNames.target,
+        e.value.table.columnNames.value
+      ], l = Mt.value.map((n, p) => [
+        {
+          color: n.sourceColor,
+          name: n.source,
+          shape: "square"
+        },
+        {
+          color: n.targetColor,
+          name: n.target,
+          shape: "square"
+        },
+        pe({
+          p: e.value.style.chart.nodes.labels.prefix,
+          v: n.value,
+          s: e.value.style.chart.nodes.labels.suffix,
+          r: e.value.style.chart.nodes.labels.rounding
+        })
+      ]), o = {
+        th: {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          outline: e.value.table.th.outline
+        },
+        td: {
+          backgroundColor: e.value.table.td.backgroundColor,
+          color: e.value.table.td.color,
+          outline: e.value.table.td.outline
+        },
+        breakpoint: e.value.table.responsiveBreakpoint
+      };
+      return {
+        colNames: [
+          e.value.table.columnNames.source,
+          e.value.table.columnNames.target,
+          e.value.table.columnNames.value
+        ],
+        head: t,
+        body: l,
+        config: o
+      };
+    }), lt = i(() => {
+      const t = fe.value?.colNames ?? [], l = fe.value?.body ?? [];
+      return { headers: t, rows: l };
+    }), Be = i(() => [...$.value.nodes].map((t, l) => ({
+      ...t,
+      index: l,
+      centerX: t.x + be.value / 2,
+      centerY: S(t.absoluteY) + e.value.style.chart.padding.top + t.height / 2
+    })).sort((t, l) => t.x === l.x ? t.absoluteY - l.absoluteY : t.x - l.x)), se = i(() => {
+      const l = [];
+      return Be.value.forEach((o) => {
+        const a = l.find((n) => Math.abs(n.x - o.x) <= 1);
+        a ? a.nodes.push(o) : l.push({
+          x: o.x,
+          nodes: [o]
+        });
+      }), l.forEach((o) => {
+        o.nodes.sort((a, n) => a.absoluteY - n.absoluteY);
+      }), l.sort((o, a) => o.x - a.x);
+    }), Ye = i(() => {
+      const t = /* @__PURE__ */ new Map();
+      return Be.value.forEach((l, o) => {
+        t.set(l.id, o);
+      }), t;
+    });
+    function Io() {
+      return $.value;
+    }
+    function Dt() {
+      Y.value.showTable = !Y.value.showTable;
+    }
+    const Ae = r(!1);
+    function at() {
+      Ae.value = !Ae.value;
+    }
+    function Lt() {
+      Y.value.showTooltip = !Y.value.showTooltip;
+    }
+    const Bt = i(() => {
+      const t = new Set(
+        $.value.nodes.map(
+          (l) => e.value.nodeCategories[l.name] || "__uncategorized__"
+        )
+      );
+      return Array.from(t).map((l) => ({
+        name: l,
+        color: e.value.nodeCategoryColors[l] || q[0],
+        shape: "square",
+        count: $.value.nodes.filter(
+          (o) => (e.value.nodeCategories[o.name] || "__uncategorized__") === l
+        ).length
+      })).map((l, o) => ({
+        ...l,
+        segregate: () => st({ legend: l, i: o }),
+        opacity: re.value.length ? re.value.includes(o) ? 1 : 0.5 : 1,
+        display: `${l.name} (${l.count})`
+      }));
+    }), nt = i(
+      () => Bt.value.filter((t) => t.name !== "__uncategorized__")
+    ), re = r([]);
+    function st({ legend: t, i: l }) {
+      const o = t.name;
+      if (A.value?.every(
+        (a) => e.value.nodeCategories[a] === o
+      )) {
+        A.value = null, ne.value = null, re.value = [];
+        return;
+      }
+      re.value = [l], A.value = $.value.nodes.filter((a) => e.value.nodeCategories[a.name] === o).map((a) => a.name), ne.value = null;
+    }
+    const No = i(() => ({
+      cy: "flow-legend",
+      backgroundColor: e.value.style.chart.legend.backgroundColor,
+      color: e.value.style.chart.legend.color,
+      fontSize: e.value.style.chart.legend.fontSize,
+      paddingBottom: e.value.style.chart.legend.paddingBottom,
+      fontWeight: e.value.style.chart.legend.bold ? "bold" : "normal"
+    }));
+    async function Oo({ scale: t = 2 } = {}) {
+      if (!V.value) return;
+      const { width: l, height: o } = V.value.getBoundingClientRect(), a = l / o, { imageUri: n, base64: p } = await bl({ domElement: V.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: n,
+        base64: p,
+        title: e.value.style.chart.title.text,
+        width: l,
+        height: o,
+        aspectRatio: a
+      };
+    }
+    const xe = i(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, l = Y.value.showTable;
+      return {
+        component: t ? yo : vo,
+        title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
+        props: t ? {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          headerColor: e.value.table.th.color,
+          headerBg: e.value.table.th.backgroundColor,
+          isFullscreen: le.value,
+          fullscreenParent: V.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8),
+          isCursorPointer: ve.value
+        } : {
+          hideDetails: !0,
+          config: {
+            open: l,
+            maxHeight: 1e4,
+            body: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            },
+            head: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            }
+          }
+        }
+      };
+    });
+    Re(() => Y.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && ye.value ? ye.value.open() : "close" in ye.value && ye.value.close());
+    });
+    function Yt() {
+      Y.value.showTable = !1, Ge.value && Ge.value.setTableIconState(!1);
+    }
+    const Eo = i(() => nt.value.map((t) => ({
+      ...t,
+      name: t.display
+    }))), _o = i(() => e.value.style.chart.backgroundColor), Fo = i(() => e.value.style.chart.legend), Mo = i(() => e.value.style.chart.title), { exportSvg: Do, getSvg: Lo } = pl({
+      svg: ae,
+      title: Mo,
+      legend: Fo,
+      legendItems: Eo,
+      backgroundColor: _o
+    });
+    async function zt({ isCb: t }) {
+      _e.value = !0, await dt();
+      try {
+        if (t) {
+          const { blob: l, url: o, text: a, dataUrl: n } = await Lo();
+          await Promise.resolve(e.value.userOptions.callbacks.svg({ blob: l, url: o, text: a, dataUrl: n }));
+        } else
+          await Promise.resolve(Do());
+      } finally {
+        _e.value = !1;
+      }
+    }
+    function Bo(t) {
+      if (t?.stage === "start") {
+        Ee.value = !0;
+        return;
+      }
+      if (t?.stage === "end") {
+        Ee.value = !1;
+        return;
+      }
+      Pt();
+    }
+    async function Rt() {
+      if (ko("copyAlt", {
+        config: e.value,
+        dataset: $.value
+      }), !e.value.userOptions.callbacks.altCopy) {
+        console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
+        return;
+      }
+      await Promise.resolve(e.value.userOptions.callbacks.altCopy({
+        config: e.value,
+        dataset: $.value
+      }));
+    }
+    function Yo(t) {
+      return se.value.findIndex(
+        (l) => l.nodes.some((o) => o.id === t)
+      );
+    }
+    function zo(t, l) {
+      const o = se.value[t];
+      return o ? o.nodes.findIndex((a) => a.id === l) : -1;
+    }
+    function Ro(t, l) {
+      const o = se.value[t];
+      if (!o || !o.nodes.length) return null;
+      let a = o.nodes[0], n = Math.abs(a.centerY - l);
+      for (let p = 1; p < o.nodes.length; p += 1) {
+        const I = o.nodes[p], F = Math.abs(I.centerY - l);
+        F < n && (a = I, n = F);
+      }
+      return a;
+    }
+    function Ho() {
+      me.value = null, de.value = null, Fe.value = !0;
+    }
+    function Uo() {
+      et(), Fe.value = !1;
+    }
+    function Wo(t) {
+      if (!ae.value || Ae.value || document.activeElement !== ae.value || !Be.value.length) return;
+      const l = t.key === "ArrowLeft", o = t.key === "ArrowRight", a = t.key === "ArrowUp", n = t.key === "ArrowDown", p = t.key === "Enter" || t.key === " ", I = t.key === "Escape";
+      if (!l && !o && !a && !n && !p && !I) return;
+      if (t.preventDefault(), t.stopPropagation(), I) {
+        et();
+        return;
+      }
+      if (p) {
+        if (me.value === null) return;
+        Ft(me.value);
+        return;
+      }
+      if (de.value === null) {
+        const C = se.value[0]?.nodes?.[0];
+        if (!C) return;
+        const N = Ye.value.get(C.id) ?? 0;
+        tt(C, N, "keyboard", N);
+        return;
+      }
+      const F = Ye.value.get(de.value);
+      if (F === void 0) return;
+      const z = Be.value[F];
+      if (!z) return;
+      const W = Yo(z.id);
+      if (W < 0) return;
+      let G = null;
+      if (a || n) {
+        const C = zo(W, z.id);
+        if (C < 0) return;
+        const N = se.value[W];
+        if (!N?.nodes?.length) return;
+        let M = C + (n ? 1 : -1);
+        M < 0 && (M = N.nodes.length - 1), M >= N.nodes.length && (M = 0), G = N.nodes[M];
+      }
+      if (l || o) {
+        let C = W + (o ? 1 : -1);
+        C < 0 && (C = se.value.length - 1), C >= se.value.length && (C = 0), G = Ro(C, z.centerY);
+      }
+      if (!G) return;
+      const j = Ye.value.get(G.id);
+      j !== void 0 && tt(G, j, "keyboard", j);
+    }
+    return ro({
+      getData: Io,
+      getImage: Oo,
+      generateCsv: ot,
+      generateImage: Pt,
+      generateSvg: zt,
+      generatePdf: St,
+      toggleTable: Dt,
+      toggleAnnotator: at,
+      toggleTooltip: Lt,
+      drillCategory: st,
+      unselectNode: _t,
+      toggleFullscreen: kt,
+      copyAlt: Rt
+    }), (t, l) => (c(), b("div", {
+      ref_key: "flowChart",
+      ref: V,
+      class: eo(`vue-data-ui-component vue-ui-flow ${le.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      style: X(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      id: `flow_${U.value}`,
+      onMouseenter: l[2] || (l[2] = () => u($t)(!0)),
+      onMouseleave: l[3] || (l[3] = () => {
+        u($t)(!1), Fe.value || et();
+      })
+    }, [
+      H("div", {
+        id: `chart-instructions-${U.value}`,
+        class: "sr-only"
+      }, [
+        H("p", null, he(e.value.a11y.translations.keyboardNavigation), 1)
+      ], 8, Tl),
+      lt.value?.rows?.length ? (c(), oe($l, {
+        key: 0,
+        uid: U.value,
+        head: lt.value.headers,
+        body: lt.value.rows,
+        notice: e.value.a11y.translations.tableAvailable,
+        caption: e.value.a11y.translations.tableCaption
+      }, null, 8, ["uid", "head", "body", "notice", "caption"])) : w("", !0),
+      e.value.userOptions.buttons.annotator ? (c(), oe(u(ho), {
+        key: 1,
+        svgRef: u(ae),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: Ae.value,
+        onClose: at,
+        isCursorPointer: ve.value
+      }, {
+        "annotator-action-close": h(() => [
+          v(t.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": h(({ color: o }) => [
+          v(t.$slots, "annotator-action-color", E(_({ color: o })), void 0, !0)
+        ]),
+        "annotator-action-draw": h(({ mode: o }) => [
+          v(t.$slots, "annotator-action-draw", E(_({ mode: o })), void 0, !0)
+        ]),
+        "annotator-action-undo": h(({ disabled: o }) => [
+          v(t.$slots, "annotator-action-undo", E(_({ disabled: o })), void 0, !0)
+        ]),
+        "annotator-action-redo": h(({ disabled: o }) => [
+          v(t.$slots, "annotator-action-redo", E(_({ disabled: o })), void 0, !0)
+        ]),
+        "annotator-action-delete": h(({ disabled: o }) => [
+          v(t.$slots, "annotator-action-delete", E(_({ disabled: o })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : w("", !0),
+      xo.value ? (c(), b("div", Sl, null, 512)) : w("", !0),
+      e.value.style.chart.title.text ? (c(), b("div", {
+        key: 3,
+        ref_key: "chartTitle",
+        ref: gt,
+        style: "width:100%;background:transparent;padding-bottom:24px"
+      }, [
+        (c(), oe(Cl, {
+          key: `title_${ht.value}`,
+          config: {
+            title: {
+              cy: "flow-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "flow-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : w("", !0),
+      H("div", {
+        id: `legend-top-${U.value}`
+      }, null, 8, Pl),
+      e.value.userOptions.show && Ct.value && (u(At) || u(qe)) ? (c(), oe(u(po), {
+        ref_key: "userOptionsRef",
+        ref: Ge,
+        key: `user_option_${ft.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: u(Je),
+        isImaging: u(Qe),
+        uid: U.value,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasImg: e.value.userOptions.buttons.img,
+        hasSvg: e.value.userOptions.buttons.svg,
+        hasTable: e.value.userOptions.buttons.table,
+        callbacks: e.value.userOptions.callbacks,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        hasAltCopy: e.value.userOptions.buttons.altCopy,
+        isFullscreen: le.value,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: V.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        printScale: e.value.userOptions.print.scale,
+        isAnnotation: Ae.value,
+        hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
+        isTooltip: Y.value.showTooltip,
+        tableDialog: e.value.table.useDialog,
+        isCursorPointer: ve.value,
+        onToggleTooltip: Lt,
+        onToggleFullscreen: kt,
+        onGeneratePdf: u(St),
+        onGenerateCsv: ot,
+        onGenerateImage: Bo,
+        onGenerateSvg: zt,
+        onToggleTable: Dt,
+        onToggleAnnotator: at,
+        onCopyAlt: Rt,
+        style: X({
+          visibility: u(At) ? u(qe) ? "visible" : "hidden" : "visible"
+        })
+      }, to({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: h(({ isOpen: o, color: a }) => [
+            v(t.$slots, "menuIcon", E(_({ isOpen: o, color: a })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: h(() => [
+            v(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: h(() => [
+            v(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: h(() => [
+            v(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: h(() => [
+            v(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: h(() => [
+            v(t.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: h(() => [
+            v(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: h(({ toggleFullscreen: o, isFullscreen: a }) => [
+            v(t.$slots, "optionFullscreen", E(_({ toggleFullscreen: o, isFullscreen: a })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: h(({ toggleAnnotator: o, isAnnotator: a }) => [
+            v(t.$slots, "optionAnnotator", E(_({ toggleAnnotator: o, isAnnotator: a })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0,
+        t.$slots.optionAltCopy ? {
+          name: "optionAltCopy",
+          fn: h(({ altCopy: o }) => [
+            v(t.$slots, "optionAltCopy", E(_({ altCopy: o })), void 0, !0)
+          ]),
+          key: "9"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "callbacks", "hasFullscreen", "hasAltCopy", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "printScale", "isAnnotation", "hasTooltip", "isTooltip", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : w("", !0),
+      H("div", Il, [
+        (c(), b("svg", {
+          ref_key: "svgRef",
+          ref: ae,
+          xmlns: u(al),
+          "aria-describedby": `chart-instructions-${U.value}`,
+          viewBox: `0 0 ${ke.value.width} ${ke.value.height}`,
+          class: eo({
+            "vue-data-ui-fullscreen--on": le.value,
+            "vue-data-ui-fulscreen--off": !le.value
+          }),
+          style: X({
+            maxWidth: "100%",
+            overflow: "visible",
+            background: "transparent",
+            color: e.value.style.chart.color
+          }),
+          tabindex: "0",
+          onFocus: Ho,
+          onBlur: Uo,
+          onKeydown: Wo
+        }, [
+          He(u(go)),
+          t.$slots["chart-background"] ? (c(), b("foreignObject", {
+            key: 0,
+            x: 0,
+            y: 0,
+            width: ke.value.width,
+            height: ke.value.height,
+            style: {
+              pointerEvents: "none"
+            }
+          }, [
+            v(t.$slots, "chart-background", {}, void 0, !0)
+          ], 8, Ol)) : w("", !0),
+          H("defs", null, [
+            (c(!0), b(Pe, null, Ie($.value.links, (o, a) => (c(), b("linearGradient", {
+              id: o.id,
+              x1: "0%",
+              y1: "0%",
+              x2: "100%",
+              y2: "0%"
+            }, [
+              H("stop", {
+                offset: "0%",
+                "stop-color": o.sourceColor
+              }, null, 8, _l),
+              H("stop", {
+                offset: "100%",
+                "stop-color": o.targetColor
+              }, null, 8, Fl)
+            ], 8, El))), 256))
+          ]),
+          (c(!0), b(Pe, null, Ie($.value.links, (o) => (c(), b("path", {
+            class: "vue-ui-flow-link",
+            d: o.path,
+            "stroke-linejoin": "round",
+            "stroke-miterlimit": "1",
+            fill: `url(#${o.id})`,
+            stroke: e.value.style.chart.links.stroke,
+            "stroke-width": e.value.style.chart.links.strokeWidth,
+            style: X(`
+                        opacity:${A.value ? A.value.includes(o.source) && A.value.includes(o.target) ? 1 : 0.3 : ne.value ? [o.target, o.source].includes(ne.value) ? 1 : 0.3 : e.value.style.chart.links.opacity}
+                    `)
+          }, null, 12, Ml))), 256)),
+          (c(!0), b(Pe, null, Ie($.value.nodes, (o, a) => (c(), b("rect", {
+            "data-a11y-node-id": o.id,
+            class: "vue-ui-flow-node",
+            x: o.x,
+            y: u(S)(o.absoluteY) + e.value.style.chart.padding.top,
+            height: u(S)(o.height),
+            width: be.value,
+            fill: o.color,
+            stroke: e.value.style.chart.nodes.stroke,
+            "stroke-width": e.value.style.chart.nodes.strokeWidth,
+            rx: e.value.style.chart.nodes.borderRadius,
+            style: X({
+              opacity: A.value ? A.value.includes(o.name) ? 1 : 0.3 : 1,
+              outline: $e.value !== null && $e.value === o.id ? "2px solid currentColor" : void 0
+            }),
+            "aria-label": `${o.name}: ${u(We)(
+              e.value.style.chart.nodes.labels.formatter,
+              o.value,
+              u(pe)({
+                p: e.value.style.chart.nodes.labels.prefix,
+                v: o.value,
+                s: e.value.style.chart.nodes.labels.suffix,
+                r: e.value.style.chart.nodes.labels.rounding
+              })
+            )}`,
+            onMouseenter: (n) => tt(o, a, "pointer", Ye.value.get(o.id)),
+            onMouseleave: (n) => _t(a),
+            onClick: (n) => Ft(a)
+          }, null, 44, Dl))), 256)),
+          e.value.style.chart.nodes.labels.show ? (c(), b("g", Ll, [
+            (c(!0), b(Pe, null, Ie($.value.nodes, (o, a) => (c(), b("text", {
+              x: o.x + be.value / 2,
+              y: (e.value.style.chart.nodes.labels.showValue ? u(S)(
+                o.absoluteY + o.height / 2 - e.value.style.chart.nodes.labels.fontSize / 4
+              ) : o.absoluteY + o.height / 2 + e.value.style.chart.nodes.labels.fontSize / 3) + e.value.style.chart.padding.top,
+              "font-size": e.value.style.chart.nodes.labels.fontSize,
+              fill: u(no)(o.color),
+              "text-anchor": "middle",
+              style: X(`pointer-events: none; opacity:${A.value ? A.value.includes(o.name) ? 1 : 0 : 1}`)
+            }, he(e.value.style.chart.nodes.labels.abbreviation.use ? u(nl)({
+              source: o.name,
+              length: e.value.style.chart.nodes.labels.abbreviation.length
+            }) : o.name), 13, Bl))), 256)),
+            e.value.style.chart.nodes.labels.showValue ? (c(!0), b(Pe, { key: 0 }, Ie($.value.nodes, (o, a) => (c(), b("text", {
+              x: o.x + be.value / 2,
+              y: u(S)(
+                o.absoluteY + o.height / 2 + e.value.style.chart.nodes.labels.fontSize / 1.3
+              ) + e.value.style.chart.padding.top,
+              "font-size": e.value.style.chart.nodes.labels.fontSize,
+              fill: u(no)(o.color),
+              "text-anchor": "middle",
+              style: X(`pointer-events: none; opacity:${A.value ? A.value.includes(o.name) ? 1 : 0 : 1}`)
+            }, he(u(We)(
+              e.value.style.chart.nodes.labels.formatter,
+              o.value,
+              u(pe)({
+                p: e.value.style.chart.nodes.labels.prefix,
+                v: o.value,
+                s: e.value.style.chart.nodes.labels.suffix,
+                r: e.value.style.chart.nodes.labels.rounding
+              }),
+              { datapoint: o, seriesIndex: a }
+            )), 13, Yl))), 256)) : w("", !0)
+          ])) : w("", !0),
+          v(t.$slots, "svg", {
+            svg: {
+              ...ke.value,
+              isPrintingImg: u(Je) | u(Qe) | Ee.value,
+              isPrintingSvg: _e.value
+            }
+          }, void 0, !0)
+        ], 46, Nl)),
+        t.$slots.hint ? (c(), b("div", zl, [
+          v(t.$slots, "hint", E(_({ hint: e.value.a11y.translations.keyboardNavigation, isVisible: Fe.value })), void 0, !0)
+        ])) : w("", !0)
+      ]),
+      t.$slots.watermark ? (c(), b("div", Rl, [
+        v(t.$slots, "watermark", E(_({ isPrinting: u(Je) || u(Qe) || Ee.value || _e.value })), void 0, !0)
+      ])) : w("", !0),
+      H("div", {
+        id: `legend-bottom-${U.value}`
+      }, null, 8, Hl),
+      mt.value ? (c(), oe(Zo, {
+        key: 6,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${U.value}` : `#legend-bottom-${U.value}`
+      }, [
+        H("div", {
+          ref_key: "chartLegend",
+          ref: pt
+        }, [
+          e.value.style.chart.legend.show && nt.value.length ? (c(), oe(wl, {
+            key: 0,
+            legendSet: nt.value,
+            config: No.value,
+            isCursorPointer: ve.value,
+            onClickMarker: l[0] || (l[0] = (o) => st(o))
+          }, {
+            item: h(({ legend: o, index: a }) => [
+              u(Ke) ? w("", !0) : (c(), b("div", {
+                key: 0,
+                onClick: (n) => o.segregate(),
+                style: X(`opacity:${re.value.length ? re.value.includes(a) ? 1 : 0.5 : 1}`)
+              }, he(o.display), 13, Ul))
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config", "isCursorPointer"])) : w("", !0),
+          v(t.$slots, "legend", { legend: Bt.value }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : w("", !0),
+      t.$slots.source ? (c(), b("div", {
+        key: 7,
+        ref_key: "source",
+        ref: yt,
+        dir: "auto"
+      }, [
+        v(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : w("", !0),
+      He(u(io), {
+        ref_key: "tooltip",
+        ref: wo,
+        teleportTo: e.value.style.chart.tooltip.teleportTo,
+        show: Y.value.showTooltip && Ne.value,
+        backgroundColor: e.value.style.chart.tooltip.backgroundColor,
+        color: e.value.style.chart.tooltip.color,
+        fontSize: e.value.style.chart.tooltip.fontSize,
+        borderRadius: e.value.style.chart.tooltip.borderRadius,
+        borderColor: e.value.style.chart.tooltip.borderColor,
+        borderWidth: e.value.style.chart.tooltip.borderWidth,
+        backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
+        position: e.value.style.chart.tooltip.position,
+        offsetY: e.value.style.chart.tooltip.offsetY,
+        parent: V.value,
+        content: Ve.value,
+        isCustom: Le.value,
+        isFullscreen: le.value,
+        smooth: e.value.style.chart.tooltip.smooth,
+        backdropFilter: e.value.style.chart.tooltip.backdropFilter,
+        smoothForce: e.value.style.chart.tooltip.smoothForce,
+        smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold,
+        isA11yMode: je.value === "keyboard",
+        a11yPosition: bt.value
+      }, {
+        "tooltip-before": h(() => [
+          v(t.$slots, "tooltip-before", E(_({ ...we.value })), void 0, !0)
+        ]),
+        "tooltip-after": h(() => [
+          v(t.$slots, "tooltip-after", E(_({ ...we.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["teleportTo", "show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold", "isA11yMode", "a11yPosition"]),
+      Ct.value && e.value.userOptions.buttons.table ? (c(), oe(Jo(xe.value.component), Qo({ key: 8 }, xe.value.props, {
+        ref_key: "tableUnit",
+        ref: ye,
+        onClose: Yt
+      }), to({
+        content: h(() => [
+          He(u(fo), {
+            colNames: fe.value.colNames,
+            head: fe.value.head,
+            body: fe.value.body,
+            config: fe.value.config,
+            title: e.value.table.useDialog ? "" : xe.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            isCursorPointer: ve.value,
+            onClose: Yt
+          }, {
+            th: h(({ th: o }) => [
+              H("div", {
+                innerHTML: o,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, Wl)
+            ]),
+            td: h(({ td: o }) => [
+              oo(he(o.name || o), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton", "isCursorPointer"])
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: h(() => [
+            oo(he(xe.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: h(() => [
+            H("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: l[1] || (l[1] = (o) => ot(e.value.userOptions.callbacks.csv)),
+              style: X({ cursor: ve.value ? "pointer" : "default" })
+            }, [
+              He(u(co), {
+                name: "fileCsv",
+                stroke: xe.value.props.color
+              }, null, 8, ["stroke"])
+            ], 4)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : w("", !0),
+      v(t.$slots, "skeleton", {}, () => [
+        u(Ke) ? (c(), oe(hl, { key: 0 })) : w("", !0)
+      ], !0)
+    ], 46, xl));
+  }
+}, ia = /* @__PURE__ */ Al(Vl, [["__scopeId", "data-v-3fc63fc6"]]);
+export {
+  ia as default
+};