vue-data-ui 3.2.8 → 3.3.0

package/dist/{vue-ui-molecule-D0Kr_w-v.js → vue-ui-molecule-CGDBEAkX.js}

@@ -1,34 +1,35 @@
-import { useCssVars as ht, defineAsyncComponent as h, computed as b, onMounted as pt, ref as r, toRefs as ft, watch as E, nextTick as U, createElementBlock as C, openBlock as u, unref as a, normalizeStyle as M, normalizeClass as _e, createBlock as w, createCommentVNode as g, createVNode as I, createSlots as Oe, withCtx as c, renderSlot as v, normalizeProps as T, guardReactiveProps as $, createElementVNode as P, Fragment as mt, renderList as gt, resolveDynamicComponent as bt, mergeProps as Ct, createTextVNode as De, toDisplayString as Ie } from "vue";
-import { o as yt, f as At, c as Pe, t as kt, b as wt, p as Fe, e as Tt, R as $t, X as _t, m as Ot, k as Dt, h as Se, x as It, y as Pt, z as Ft, A as St } from "./lib-BEpWEyMm.js";
-import { u as Nt, a as Ne } from "./useNestedProp-BOk-tPdu.js";
-import { u as Lt, B as Bt } from "./BaseScanner-BgWxam9d.js";
-import { u as xt } from "./usePrinter-w23K-ezx.js";
-import { u as Rt } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Et } from "./useChartAccessibility-9icAAmYg.js";
-import Ut from "./img-DjWwQXVS.js";
-import { t as Mt } from "./themes-Dw-dDudK.js";
-import { u as zt } from "./usePanZoom-BVca3eMk.js";
-import { _ as Ht } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Vt = ["id"], Gt = {
+import { useCssVars as bt, defineAsyncComponent as h, computed as p, onMounted as Ct, ref as r, toRefs as yt, watch as U, nextTick as M, createElementBlock as C, openBlock as u, unref as a, normalizeStyle as z, normalizeClass as Oe, createBlock as w, createCommentVNode as b, createVNode as D, createSlots as Se, withCtx as c, renderSlot as v, normalizeProps as T, guardReactiveProps as $, createElementVNode as I, Fragment as At, renderList as kt, resolveDynamicComponent as wt, mergeProps as Tt, createTextVNode as De, toDisplayString as Ie } from "vue";
+import { o as $t, f as _t, c as Pe, t as Ot, b as St, p as Fe, e as Dt, R as It, X as Pt, m as Ft, k as Nt, h as Ne, x as Lt, y as xt, z as Bt, A as Rt } from "./lib-GIYcnm0E.js";
+import { u as Et, a as Le } from "./useNestedProp-mxyyqd0B.js";
+import { u as Ut, B as Mt } from "./BaseScanner-BgWxam9d.js";
+import { u as zt } from "./usePrinter-DYRFiw7X.js";
+import { u as Ht } from "./useSvgExport-B7-Vrjtu.js";
+import { u as Vt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Gt } from "./useChartAccessibility-9icAAmYg.js";
+import Wt from "./img-6wPuVVtk.js";
+import { t as Xt } from "./themes-Dw-dDudK.js";
+import { u as jt } from "./usePanZoom-BVca3eMk.js";
+import { _ as Yt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Zt = ["id"], qt = {
   key: 1,
   ref: "noTitle",
   class: "vue-data-ui-no-title-space",
   style: "height:36px; width: 100%;background:transparent"
-}, Wt = {
+}, Jt = {
   key: 2,
   style: "width:100%;background:transparent;"
-}, Xt = ["xmlns", "viewBox"], jt = ["width", "height"], Yt = ["id"], Zt = ["stop-color"], qt = ["stop-color"], Jt = {
+}, Kt = ["xmlns", "viewBox"], Qt = ["width", "height"], eo = ["id"], to = ["stop-color"], oo = ["stop-color"], lo = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, Kt = {
+}, ao = {
   key: 5,
   "data-dom-to-png-ignore": "",
   class: "reset-wrapper"
-}, Qt = {
+}, so = {
   key: 6,
   ref: "source",
   dir: "auto"
-}, eo = ["innerHTML"], to = {
+}, no = ["innerHTML"], ro = {
   __name: "vue-ui-molecule",
   props: {
     config: {
@@ -45,24 +46,24 @@ const Vt = ["id"], Gt = {
     }
   },
   emits: ["selectNode"],
-  setup(Le, { expose: Be, emit: xe }) {
-    ht((t) => ({
-      v47c70422: t.slicerColor
+  setup(xe, { expose: Be, emit: Re }) {
+    bt((t) => ({
+      v09141ae0: t.slicerColor
     }));
-    const Re = h(() => import("./Title-DG2nloSB.js")), Ee = h(() => import("./Tooltip-BOXz8skU.js")), te = h(() => import("./BaseIcon-Bz-1GQhu.js")), Ue = h(() => import("./vue-ui-accordion-CDIzGCG1.js")), Me = h(() => import("./DataTable-BvjacRbw.js")), ze = h(() => import("./PenAndPaper-CR8q353D.js")), He = h(() => import("./UserOptions-DsTgvAok.js")), Ve = h(() => import("./PackageVersion-C40g0Rfc.js")), Ge = h(() => import("./RecursiveLinks-00zGWPf9.js")), We = h(() => import("./RecursiveLabels-Bgcv0pzu.js")), Xe = h(() => import("./RecursiveCircles-BcLb1aRS.js")), je = h(() => import("./BaseDraggableDialog-CHhZIht2.js")), { vue_ui_molecule: Ye } = Nt(), A = Le, Ze = xe, oe = b(() => !!A.dataset && A.dataset.length);
-    pt(() => {
+    const Ee = h(() => import("./Title-D17CJXko.js")), Ue = h(() => import("./Tooltip-CtVdvbZi.js")), te = h(() => import("./BaseIcon-CtqN7W_g.js")), Me = h(() => import("./vue-ui-accordion-Dch9YrCi.js")), ze = h(() => import("./DataTable-BeI6gYJX.js")), He = h(() => import("./PenAndPaper-BxbYiPy4.js")), Ve = h(() => import("./UserOptions-B3vCIe-u.js")), Ge = h(() => import("./PackageVersion-C9oklnuy.js")), We = h(() => import("./RecursiveLinks-00zGWPf9.js")), Xe = h(() => import("./RecursiveLabels-Bgcv0pzu.js")), je = h(() => import("./RecursiveCircles-BcLb1aRS.js")), Ye = h(() => import("./BaseDraggableDialog-q3pgSDTz.js")), { vue_ui_molecule: Ze } = Et(), A = xe, qe = Re, oe = p(() => !!A.dataset && A.dataset.length);
+    Ct(() => {
       le();
     });
-    const qe = b(() => e.value.debug);
+    const Je = p(() => e.value.debug);
     function le() {
-      yt(A.dataset) && At({
+      $t(A.dataset) && _t({
         componentName: "VueUiMolecule",
         type: "dataset",
-        debug: qe.value
+        debug: Je.value
       });
     }
-    const z = r(Pe()), H = r(!1), B = r(""), k = r(null), ae = r(0), se = r(0), ne = r(0), F = r(null), V = r(null), e = r(Y()), { loading: G, FINAL_DATASET: W } = Lt({
-      ...ft(A),
+    const H = r(Pe()), V = r(!1), x = r(""), k = r(null), ae = r(0), se = r(0), ne = r(0), P = r(null), G = r(null), e = r(Y()), { loading: W, FINAL_DATASET: X } = Ut({
+      ...yt(A),
       FINAL_CONFIG: e,
       prepareConfig: Y,
       skeletonDataset: [
@@ -103,7 +104,7 @@ const Vt = ["id"], Gt = {
           ]
         }
       ],
-      skeletonConfig: kt({
+      skeletonConfig: Ot({
         defaultConfig: e.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -117,39 +118,39 @@ const Vt = ["id"], Gt = {
           }
         }
       })
-    }), { userOptionsVisible: X, setUserOptionsVisibility: re, keepUserOptionState: ie } = Rt({ config: e.value }), { svgRef: j } = Et({ config: e.value.style.chart.title });
+    }), { userOptionsVisible: j, setUserOptionsVisibility: re, keepUserOptionState: ie } = Vt({ config: e.value }), { svgRef: B } = Gt({ config: e.value.style.chart.title });
     function Y() {
-      const t = Ne({
+      const t = Le({
         userConfig: A.config,
-        defaultConfig: Ye
+        defaultConfig: Ze
       });
       return t.theme ? {
-        ...Ne({
-          userConfig: Mt.vue_ui_molecule[t.theme] || A.config,
+        ...Le({
+          userConfig: Xt.vue_ui_molecule[t.theme] || A.config,
           defaultConfig: t
         }),
-        customPalette: wt[t.theme] || Fe
+        customPalette: St[t.theme] || Fe
       } : t;
     }
-    E(() => A.config, (t) => {
-      e.value = Y(), X.value = !e.value.userOptions.showOnChartHover, le(), se.value += 1, ne.value += 1, d.value.showTable = e.value.table.show, d.value.showTooltip = e.value.style.chart.tooltip.show;
+    U(() => A.config, (t) => {
+      e.value = Y(), j.value = !e.value.userOptions.showOnChartHover, le(), se.value += 1, ne.value += 1, d.value.showTable = e.value.table.show, d.value.showTooltip = e.value.style.chart.tooltip.show;
     }, { deep: !0 });
-    const ue = r(0), Je = () => {
+    const ue = r(0), Ke = () => {
       ue.value += 1;
     };
-    E([() => G.value, () => W.value], async ([t]) => {
-      t || (await U(), p.value = fe(), await U(), Je(), await U(), ut({ x: 0, y: 0, width: 400, height: 400 }), K(!1));
+    U([() => W.value, () => X.value], async ([t]) => {
+      t || (await M(), f.value = fe(), await M(), Ke(), await M(), ct({ x: 0, y: 0, width: 400, height: 400 }), K(!1));
     }, { flush: "post", deep: !1 });
-    const { isPrinting: ce, isImaging: ve, generatePdf: de, generateImage: he } = xt({
-      elementId: `cluster_${z.value}`,
+    const { isPrinting: ce, isImaging: ve, generatePdf: de, generateImage: he } = zt({
+      elementId: `cluster_${H.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-molecule",
       options: e.value.userOptions.print
-    }), Ke = b(() => e.value.userOptions.show && !e.value.style.chart.title.text), Qe = b(() => Tt(e.value.customPalette)), d = r({
+    }), Qe = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), et = p(() => Dt(e.value.customPalette)), d = r({
       showTable: e.value.table.show,
       showDataLabels: !0,
       showTooltip: e.value.style.chart.tooltip.show
     });
-    E(e, () => {
+    U(e, () => {
       d.value = {
         showTable: e.value.table.show,
         showDataLabels: !0,
@@ -160,7 +161,7 @@ const Vt = ["id"], Gt = {
       return Array.isArray(t) && t.length > 0 && t[0].nodes ? pe(t[0].nodes, l + 1) : l;
     }
     function fe() {
-      const t = pe(W.value);
+      const t = pe(X.value);
       let l = 100, o = l;
       for (let n = 0; n < t; n += 1)
         l /= 1, o += l;
@@ -169,40 +170,40 @@ const Vt = ["id"], Gt = {
         width: o
       };
     }
-    const p = r(fe());
-    function me(t, l = { x: -p.value.width / 2.43, y: p.value.height / 2 }, o = p.value.width / 1.1, n = 24, s = 0, i = 0, f = "#BBBBBB", Q = 0) {
+    const f = r(fe());
+    function me(t, l = { x: -f.value.width / 2.43, y: f.value.height / 2 }, o = f.value.width / 1.1, n = 24, s = 0, i = 0, m = "#BBBBBB", Q = 0) {
       if (!Array.isArray(t) || t.length === 0) return t;
-      const dt = Dt({
+      const gt = Nt({
         plot: l,
         radius: o,
         sides: t.length,
         rotation: s
       });
-      return t.forEach((m, we) => {
-        const Te = dt.coordinates[we], $e = m.color ? (() => {
-          let ee = Se(m.color);
+      return t.forEach((g, Te) => {
+        const $e = gt.coordinates[Te], _e = g.color ? (() => {
+          let ee = Ne(g.color);
           return ee.startsWith("#") ? ee : `#${ee}`;
         })() : null;
-        let D;
-        $e ? D = $e : Q === 0 ? D = f : Q === 1 ? (D = Qe.value[i] || Fe[i] || f, i += 1) : D = f, m.polygonPath = { coordinates: [Te] }, m.circleRadius = n, m.color = D, m.uid = Pe(), Array.isArray(m.nodes) && m.nodes.length && (m.nodes = me(
-          m.nodes,
-          Te,
+        let S;
+        _e ? S = _e : Q === 0 ? S = m : Q === 1 ? (S = et.value[i] || Fe[i] || m, i += 1) : S = m, g.polygonPath = { coordinates: [$e] }, g.circleRadius = n, g.color = S, g.uid = Pe(), Array.isArray(g.nodes) && g.nodes.length && (g.nodes = me(
+          g.nodes,
+          $e,
           o / 2.9,
           n / 2.2,
-          s + Math.PI * we / m.nodes.length,
+          s + Math.PI * Te / g.nodes.length,
           i,
-          D,
+          S,
           Q + 1
         ));
       }), t;
     }
-    function et(t) {
+    function tt(t) {
       const l = /* @__PURE__ */ new Set();
       function o(s) {
         s.forEach((i) => {
           if (!i.color) return;
-          let f = i.color;
-          /^#?[0-9A-F]{6}$/i.test(f) || (f = Se(f)), f.startsWith("#") || (f = `#${f}`), l.add(f), Array.isArray(i.nodes) && i.nodes.length && o(i.nodes);
+          let m = i.color;
+          /^#?[0-9A-F]{6}$/i.test(m) || (m = Ne(m)), m.startsWith("#") || (m = `#${m}`), l.add(m), Array.isArray(i.nodes) && i.nodes.length && o(i.nodes);
         });
       }
       o(t);
@@ -212,11 +213,11 @@ const Vt = ["id"], Gt = {
         n[s] = `gradient_${i}`;
       }), n;
     }
-    const tt = b(() => et(y.value)), y = b(() => {
-      const t = $t(W.value);
+    const ot = p(() => tt(y.value)), y = p(() => {
+      const t = It(X.value);
       return me(t);
     }), Z = r(null);
-    function ot(t) {
+    function lt(t) {
       Z.value = {
         datapoint: t,
         seriesIndex: -1,
@@ -224,13 +225,13 @@ const Vt = ["id"], Gt = {
         config: e.value
       };
       const l = e.value.style.chart.tooltip.customFormat;
-      if (Ft(l) && St(() => l({
+      if (Bt(l) && Rt(() => l({
         seriesIndex: -1,
         datapoint: t,
         series: y.value,
         config: e.value
       })))
-        B.value = l({
+        x.value = l({
           seriesIndex: -1,
           // well, ok
           datapoint: t,
@@ -239,14 +240,14 @@ const Vt = ["id"], Gt = {
         });
       else {
         let o = "";
-        o += `<div style="display:flex;align-items:center;gap:3px"><div style="color:${t.color}">⬤</div><div>${t.name}</div></div>`, t.details && (o += `<div style="width:100%;border-top:1px solid ${e.value.style.chart.tooltip.borderColor};margin-top: 2px">${t.details}</div>`), B.value = `<div style="font-family:inherit">${o}</div>`;
+        o += `<div style="display:flex;align-items:center;gap:3px"><div style="color:${t.color}">⬤</div><div>${t.name}</div></div>`, t.details && (o += `<div style="width:100%;border-top:1px solid ${e.value.style.chart.tooltip.borderColor};margin-top: 2px">${t.details}</div>`), x.value = `<div style="font-family:inherit">${o}</div>`;
       }
     }
-    const x = r(null), S = r(null), ge = r(null);
-    function lt(t) {
-      ge.value = x.value, x.value = t, t ? e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: -1 }) : e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: ge.value || x.value, seriesIndex: -1 }), t ? (H.value = !0, ot(t), S.value = t.uid) : (H.value = !1, B.value = "", S.value = null);
-    }
+    const R = r(null), F = r(null), ge = r(null);
     function at(t) {
+      ge.value = R.value, R.value = t, t ? e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: -1 }) : e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: ge.value || R.value, seriesIndex: -1 }), t ? (V.value = !0, lt(t), F.value = t.uid) : (V.value = !1, x.value = "", F.value = null);
+    }
+    function st(t) {
       const l = [];
       function o(n) {
         n.forEach((s) => {
@@ -261,12 +262,12 @@ const Vt = ["id"], Gt = {
       }
       return o(t), l;
     }
-    const st = b(() => at(y.value)), _ = b(() => {
+    const nt = p(() => st(y.value)), _ = p(() => {
       const t = [
         e.value.table.translations.nodeName,
         e.value.table.translations.details,
         e.value.table.translations.ancestor
-      ], l = st.value.map((s, i) => [
+      ], l = nt.value.map((s, i) => [
         {
           color: s.color,
           name: s.name
@@ -298,12 +299,12 @@ const Vt = ["id"], Gt = {
       };
     });
     function q(t = null) {
-      U(() => {
-        const l = _.value.body.map((s, i) => [[s[0].name], [s[1]], [s[2]]]), o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[..._.value.head]]].concat(l), n = It(o);
-        t ? t(n) : Pt({ csvContent: n, title: e.value.style.chart.title.text || "vue-ui-molecule" });
+      M(() => {
+        const l = _.value.body.map((s, i) => [[s[0].name], [s[1]], [s[2]]]), o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[..._.value.head]]].concat(l), n = Lt(o);
+        t ? t(n) : xt({ csvContent: n, title: e.value.style.chart.title.text || "vue-ui-molecule" });
       });
     }
-    function nt() {
+    function rt() {
       return y.value;
     }
     const O = r(!1);
@@ -323,18 +324,18 @@ const Vt = ["id"], Gt = {
     function J() {
       N.value = !N.value;
     }
-    const rt = b(() => !N.value), { viewBox: R, resetZoom: K, isZoom: it, setInitialViewBox: ut } = zt(j, {
+    const it = p(() => !N.value), { viewBox: E, resetZoom: K, isZoom: ut, setInitialViewBox: ct } = jt(B, {
       x: 0,
       y: 0,
-      width: Math.max(10, p.value.width),
-      height: Math.max(10, p.value.height)
-    }, e.value.style.chart.zoom.speed, rt);
-    function ct(t) {
-      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: -1 }), Ze("selectNode", t);
+      width: Math.max(10, f.value.width),
+      height: Math.max(10, f.value.height)
+    }, e.value.style.chart.zoom.speed, it);
+    function vt(t) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: -1 }), qe("selectNode", t);
     }
-    async function vt({ scale: t = 2 } = {}) {
+    async function dt({ scale: t = 2 } = {}) {
       if (!k.value) return;
-      const { width: l, height: o } = k.value.getBoundingClientRect(), n = l / o, { imageUri: s, base64: i } = await Ut({ domElement: k.value, base64: !0, img: !0, scale: t });
+      const { width: l, height: o } = k.value.getBoundingClientRect(), n = l / o, { imageUri: s, base64: i } = await Wt({ domElement: k.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: s,
         base64: i,
@@ -344,10 +345,10 @@ const Vt = ["id"], Gt = {
         aspectRatio: n
       };
     }
-    const L = b(() => {
+    const L = p(() => {
       const t = e.value.table.useDialog && !e.value.table.show, l = d.value.showTable;
       return {
-        component: t ? je : Ue,
+        component: t ? Ye : Me,
         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,
@@ -374,18 +375,31 @@ const Vt = ["id"], Gt = {
         }
       };
     });
-    E(() => d.value.showTable, (t) => {
-      e.value.table.show || (t && e.value.table.useDialog && F.value ? F.value.open() : "close" in F.value && F.value.close());
+    U(() => d.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && P.value ? P.value.open() : "close" in P.value && P.value.close());
     });
     function ke() {
-      d.value.showTable = !1, V.value && V.value.setTableIconState(!1);
+      d.value.showTable = !1, G.value && G.value.setTableIconState(!1);
+    }
+    const ht = p(() => e.value.style.chart.backgroundColor), pt = p(() => e.value.style.chart.title), { exportSvg: ft, getSvg: mt } = Ht({
+      svg: B,
+      title: pt,
+      backgroundColor: ht
+    });
+    async function we({ isCb: t }) {
+      if (t) {
+        const { blob: l, url: o, text: n, dataUrl: s } = await mt();
+        e.value.userOptions.callbacks.svg({ blob: l, url: o, text: n, dataUrl: s });
+      } else
+        ft();
     }
     return Be({
-      getData: nt,
-      getImage: vt,
+      getData: rt,
+      getImage: dt,
       generatePdf: de,
       generateCsv: q,
       generateImage: he,
+      generateSvg: we,
       toggleTable: Ce,
       toggleLabels: ye,
       toggleTooltip: Ae,
@@ -394,25 +408,25 @@ const Vt = ["id"], Gt = {
     }), (t, l) => (u(), C("div", {
       ref_key: "moleculeChart",
       ref: k,
-      class: _e(`vue-data-ui-component vue-ui-molecule ${O.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
-      style: M(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
-      id: `cluster_${z.value}`,
+      class: Oe(`vue-data-ui-component vue-ui-molecule ${O.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      style: z(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      id: `cluster_${H.value}`,
       onMouseleave: l[2] || (l[2] = (o) => {
-        x.value = null, S.value = null, a(re)(!1);
+        R.value = null, F.value = null, a(re)(!1);
       }),
       onMouseenter: l[3] || (l[3] = () => a(re)(!0))
     }, [
-      e.value.userOptions.buttons.annotator ? (u(), w(a(ze), {
+      e.value.userOptions.buttons.annotator ? (u(), w(a(He), {
         key: 0,
-        svgRef: a(j),
+        svgRef: a(B),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         active: N.value,
         onClose: J
-      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : g("", !0),
-      Ke.value ? (u(), C("div", Gt, null, 512)) : g("", !0),
-      e.value.style.chart.title.text ? (u(), C("div", Wt, [
-        (u(), w(a(Re), {
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : b("", !0),
+      Qe.value ? (u(), C("div", qt, null, 512)) : b("", !0),
+      e.value.style.chart.title.text ? (u(), C("div", Jt, [
+        (u(), w(a(Ee), {
           key: `title_${se.value}`,
           config: {
             title: {
@@ -425,20 +439,21 @@ const Vt = ["id"], Gt = {
             }
           }
         }, null, 8, ["config"]))
-      ])) : g("", !0),
-      e.value.userOptions.show && oe.value && (a(ie) || a(X)) ? (u(), w(a(He), {
+      ])) : b("", !0),
+      e.value.userOptions.show && oe.value && (a(ie) || a(j)) ? (u(), w(a(Ve), {
         ref_key: "userOptionsRef",
-        ref: V,
+        ref: G,
         key: `user_options_${ae.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         isPrinting: a(ce),
         isImaging: a(ve),
-        uid: z.value,
+        uid: H.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         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,
         hasLabel: e.value.userOptions.buttons.labels,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
@@ -455,14 +470,15 @@ const Vt = ["id"], Gt = {
         onGeneratePdf: a(de),
         onGenerateCsv: q,
         onGenerateImage: a(he),
+        onGenerateSvg: we,
         onToggleTable: Ce,
         onToggleLabels: ye,
         onToggleTooltip: Ae,
         onToggleAnnotator: J,
-        style: M({
-          visibility: a(ie) ? a(X) ? "visible" : "hidden" : "visible"
+        style: z({
+          visibility: a(ie) ? a(j) ? "visible" : "hidden" : "visible"
         })
-      }, Oe({ _: 2 }, [
+      }, Se({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
           fn: c(({ isOpen: o, color: n }) => [
@@ -526,31 +542,31 @@ const Vt = ["id"], Gt = {
           ]),
           key: "8"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : g("", !0),
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : b("", !0),
       (u(), C("svg", {
         ref_key: "svgRef",
-        ref: j,
+        ref: B,
         key: `svg_${ue.value}`,
-        xmlns: a(_t),
-        viewBox: `${a(R).x} ${a(R).y} ${a(R).width} ${a(R).height}`,
-        class: _e({ "vue-data-ui-fullscreen--on": O.value, "vue-data-ui-fulscreen--off": !O.value }),
-        style: M(`overflow: hidden; background:transparent;color:${e.value.style.chart.color}`)
+        xmlns: a(Pt),
+        viewBox: `${a(E).x} ${a(E).y} ${a(E).width} ${a(E).height}`,
+        class: Oe({ "vue-data-ui-fullscreen--on": O.value, "vue-data-ui-fulscreen--off": !O.value }),
+        style: z(`overflow: hidden; background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        I(a(Ve)),
+        D(a(Ge)),
         t.$slots["chart-background"] ? (u(), C("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
-          width: p.value.width <= 0 ? 10 : p.value.width,
-          height: p.value.height <= 0 ? 10 : p.value.height,
+          width: f.value.width <= 0 ? 10 : f.value.width,
+          height: f.value.height <= 0 ? 10 : f.value.height,
           style: {
             pointerEvents: "none"
           }
         }, [
           v(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, jt)) : g("", !0),
-        P("defs", null, [
-          (u(!0), C(mt, null, gt(Object.keys(tt.value), (o) => (u(), C("radialGradient", {
+        ], 8, Qt)) : b("", !0),
+        I("defs", null, [
+          (u(!0), C(At, null, kt(Object.keys(ot.value), (o) => (u(), C("radialGradient", {
             id: `gradient_${o}`,
             cx: "50%",
             cy: "30%",
@@ -558,69 +574,69 @@ const Vt = ["id"], Gt = {
             fx: "50%",
             fy: "50%"
           }, [
-            P("stop", {
+            I("stop", {
               offset: "0%",
-              "stop-color": a(Ot)(o, 0.5)
-            }, null, 8, Zt),
-            P("stop", {
+              "stop-color": a(Ft)(o, 0.5)
+            }, null, 8, to),
+            I("stop", {
               offset: "100%",
               "stop-color": o
-            }, null, 8, qt)
-          ], 8, Yt))), 256))
+            }, null, 8, oo)
+          ], 8, eo))), 256))
         ]),
-        I(a(Ge), {
+        D(a(We), {
           dataset: y.value,
           color: e.value.style.chart.links.stroke,
           backgroundColor: e.value.style.chart.backgroundColor
         }, null, 8, ["dataset", "color", "backgroundColor"]),
-        I(a(Xe), {
+        D(a(je), {
           dataset: y.value,
-          hoveredUid: S.value,
+          hoveredUid: F.value,
           stroke: e.value.style.chart.nodes.stroke,
           strokeHovered: e.value.style.chart.nodes.strokeHovered,
-          onClick: ct,
-          onHover: lt
+          onClick: vt,
+          onHover: at
         }, {
           node: c(({ node: o }) => [
             v(t.$slots, "node", T($({ node: o })), void 0, !0)
           ]),
           _: 3
         }, 8, ["dataset", "hoveredUid", "stroke", "strokeHovered"]),
-        d.value.showDataLabels && !a(G) ? (u(), w(a(We), {
+        d.value.showDataLabels && !a(W) ? (u(), w(a(Xe), {
           key: 1,
           dataset: y.value,
           color: e.value.style.chart.color,
-          hoveredUid: S.value
-        }, null, 8, ["dataset", "color", "hoveredUid"])) : g("", !0),
-        v(t.$slots, "svg", { svg: p.value }, void 0, !0)
-      ], 14, Xt)),
-      t.$slots.watermark ? (u(), C("div", Jt, [
+          hoveredUid: F.value
+        }, null, 8, ["dataset", "color", "hoveredUid"])) : b("", !0),
+        v(t.$slots, "svg", { svg: f.value }, void 0, !0)
+      ], 14, Kt)),
+      t.$slots.watermark ? (u(), C("div", lo, [
         v(t.$slots, "watermark", T($({ isPrinting: a(ce) || a(ve) })), void 0, !0)
-      ])) : g("", !0),
-      a(it) ? (u(), C("div", Kt, [
+      ])) : b("", !0),
+      a(ut) ? (u(), C("div", ao, [
         v(t.$slots, "reset-action", { reset: a(K) }, () => [
-          P("button", {
+          I("button", {
             "data-cy-reset": "",
             tabindex: "0",
             role: "button",
             class: "vue-data-ui-refresh-button",
-            style: M({
+            style: z({
               background: e.value.style.chart.backgroundColor
             }),
             onClick: l[0] || (l[0] = (o) => a(K)(!0))
           }, [
-            I(a(te), {
+            D(a(te), {
               name: "refresh",
               stroke: e.value.style.chart.color
             }, null, 8, ["stroke"])
           ], 4)
         ], !0)
-      ])) : g("", !0),
-      t.$slots.source ? (u(), C("div", Qt, [
+      ])) : b("", !0),
+      t.$slots.source ? (u(), C("div", so, [
         v(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : g("", !0),
-      I(a(Ee), {
-        show: d.value.showTooltip && H.value,
+      ], 512)) : b("", !0),
+      D(a(Ue), {
+        show: d.value.showTooltip && V.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         borderRadius: e.value.style.chart.tooltip.borderRadius,
@@ -631,7 +647,7 @@ const Vt = ["id"], Gt = {
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
         parent: k.value,
-        content: B.value,
+        content: x.value,
         isFullscreen: O.value,
         isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
         smooth: e.value.style.chart.tooltip.smooth,
@@ -647,13 +663,13 @@ const Vt = ["id"], Gt = {
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
-      oe.value && e.value.userOptions.buttons.table ? (u(), w(bt(L.value.component), Ct({ key: 7 }, L.value.props, {
+      oe.value && e.value.userOptions.buttons.table ? (u(), w(wt(L.value.component), Tt({ key: 7 }, L.value.props, {
         ref_key: "tableUnit",
-        ref: F,
+        ref: P,
         onClose: ke
-      }), Oe({
+      }), Se({
         content: c(() => [
-          (u(), w(a(Me), {
+          (u(), w(a(ze), {
             key: `table_${ne.value}`,
             colNames: _.value.colNames,
             head: _.value.head,
@@ -664,10 +680,10 @@ const Vt = ["id"], Gt = {
             onClose: ke
           }, {
             th: c(({ th: o }) => [
-              P("div", {
+              I("div", {
                 innerHTML: o,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, eo)
+              }, null, 8, no)
             ]),
             td: c(({ td: o }) => [
               De(Ie(o.name || o), 1)
@@ -687,12 +703,12 @@ const Vt = ["id"], Gt = {
         e.value.table.useDialog ? {
           name: "actions",
           fn: c(() => [
-            P("button", {
+            I("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
               onClick: l[1] || (l[1] = (o) => q(e.value.userOptions.callbacks.csv))
             }, [
-              I(a(te), {
+              D(a(te), {
                 name: "excel",
                 stroke: L.value.props.color
               }, null, 8, ["stroke"])
@@ -700,11 +716,11 @@ const Vt = ["id"], Gt = {
           ]),
           key: "1"
         } : void 0
-      ]), 1040)) : g("", !0),
-      a(G) ? (u(), w(Bt, { key: 8 })) : g("", !0)
-    ], 46, Vt));
+      ]), 1040)) : b("", !0),
+      a(W) ? (u(), w(Mt, { key: 8 })) : b("", !0)
+    ], 46, Zt));
   }
-}, po = /* @__PURE__ */ Ht(to, [["__scopeId", "data-v-46a0f025"]]);
+}, Ao = /* @__PURE__ */ Yt(ro, [["__scopeId", "data-v-b73208de"]]);
 export {
-  po as default
+  Ao as default
 };