vue-data-ui 3.2.7 → 3.3.0

package/dist/{vue-ui-rating-CxIBq7Xr.js → vue-ui-rating-Bo9gSy-z.js}

@@ -1,6 +1,6 @@
 import { ref as $, useSlots as J, onMounted as R, computed as x, watch as Q, createElementBlock as o, openBlock as a, normalizeStyle as s, createCommentVNode as p, createElementVNode as r, toDisplayString as f, unref as n, Fragment as j, renderList as Z, renderSlot as B, mergeProps as O, withKeys as ee } from "vue";
-import { c as te, o as le, f as oe, a as b, d as _, X as z, i as X, j as I } from "./lib-BEpWEyMm.js";
-import { u as ae, a as ie } from "./useNestedProp-BOk-tPdu.js";
+import { c as te, o as le, f as oe, a as b, d as _, X as z, i as X, j as I } from "./lib-GIYcnm0E.js";
+import { u as ae, a as ie } from "./useNestedProp-mxyyqd0B.js";
 import { _ as se } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const ne = {
   key: 0,
@@ -102,7 +102,7 @@ const ne = {
       toggleReadonly: W
     }), (l, i) => (a(), o("div", {
       style: s(`background:${e.value.style.backgroundColor};font-family:${e.value.style.fontFamily};width:100%`),
-      class: "vue-ui-rating",
+      class: "vue-data-ui-component vue-ui-rating",
       onMouseover: i[4] || (i[4] = (t) => S.value = !0),
       onMouseleave: i[5] || (i[5] = (t) => {
         S.value = !1, v.value = void 0;
@@ -344,7 +344,7 @@ const ne = {
       )), 5)) : p("", !0)
     ], 36));
   }
-}, Ne = /* @__PURE__ */ se(Se, [["__scopeId", "data-v-e9ed619f"]]);
+}, Ne = /* @__PURE__ */ se(Se, [["__scopeId", "data-v-cca0c364"]]);
 export {
   Ne as default
 };

package/dist/{vue-ui-relation-circle-BVGAfqBj.js → vue-ui-relation-circle-Qo8FKbL2.js}

@@ -1,20 +1,21 @@
-import { useCssVars as ut, computed as h, defineAsyncComponent as Z, ref as r, toRefs as ot, watch as ee, shallowRef as Le, onMounted as rt, onBeforeUnmount as ct, createElementBlock as n, openBlock as i, unref as u, normalizeStyle as z, createBlock as N, createCommentVNode as f, createSlots as vt, withCtx as M, renderSlot as g, normalizeProps as j, guardReactiveProps as D, normalizeClass as te, createVNode as dt, createElementVNode as ft, Fragment as $, renderList as O, mergeProps as Pe, toDisplayString as U, createTextVNode as ze } from "vue";
-import { c as yt, t as ht, b as gt, p as Oe, e as mt, o as Se, f as Ie, g as pt, X as bt, E as Me, a as le, d as se, D as ae } from "./lib-BEpWEyMm.js";
-import { t as kt, u as wt } from "./useResponsive-DfdjqQps.js";
-import { u as xt, a as Ee } from "./useNestedProp-BOk-tPdu.js";
-import { u as $t, B as At } from "./BaseScanner-BgWxam9d.js";
-import { u as _t } from "./usePrinter-w23K-ezx.js";
-import { u as Ct } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Lt } from "./useChartAccessibility-9icAAmYg.js";
-import { u as Pt } from "./useAutoSizeLabelsInsideViewbox-BVJkib7z.js";
-import zt from "./img-DjWwQXVS.js";
-import Ot from "./Title-DG2nloSB.js";
-import { t as St } from "./themes-Dw-dDudK.js";
-import { _ as It } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["cx", "cy", "r", "stroke", "stroke-width"], Rt = { key: 1 }, Tt = ["stroke", "d", "stroke-width"], Nt = { style: { "pointer-events": "none" } }, jt = ["cx", "cy", "fill", "r", "stroke"], Dt = ["x", "y", "fill", "font-size"], Ut = { key: 2 }, Vt = ["stroke", "stroke-width", "x1", "x2", "y1", "y2"], Gt = { style: { "pointer-events": "none" } }, Wt = ["cx", "cy", "fill", "r", "stroke"], Xt = ["x", "y", "fill", "font-size"], Yt = ["text-anchor", "transform", "x", "y", "font-weight", "font-size", "fill", "text-decoration", "onClick", "onMouseenter", "onMouseleave"], qt = ["cx", "cy", "fill", "stroke", "r", "onClick", "onMouseenter", "onMouseleave"], Ht = {
+import { useCssVars as dt, computed as g, defineAsyncComponent as Z, ref as r, toRefs as ft, watch as ee, shallowRef as Le, onMounted as gt, onBeforeUnmount as yt, createElementBlock as n, openBlock as i, unref as o, normalizeStyle as z, createBlock as j, createCommentVNode as f, createSlots as ht, withCtx as M, renderSlot as h, normalizeProps as D, guardReactiveProps as U, normalizeClass as te, createVNode as mt, createElementVNode as pt, Fragment as $, renderList as O, mergeProps as Pe, toDisplayString as G, createTextVNode as ze } from "vue";
+import { c as bt, t as kt, b as wt, p as Oe, e as xt, o as Se, f as Ie, g as $t, X as At, E as Me, a as le, d as se, D as ae } from "./lib-GIYcnm0E.js";
+import { t as _t, u as Ct } from "./useResponsive-DfdjqQps.js";
+import { u as Lt, a as Ee } from "./useNestedProp-mxyyqd0B.js";
+import { u as Pt, B as zt } from "./BaseScanner-BgWxam9d.js";
+import { u as Ot } from "./usePrinter-DYRFiw7X.js";
+import { u as St } from "./useSvgExport-B7-Vrjtu.js";
+import { u as It } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Mt } from "./useChartAccessibility-9icAAmYg.js";
+import { u as Et } from "./useAutoSizeLabelsInsideViewbox-Csv3pVmh.js";
+import Bt from "./img-6wPuVVtk.js";
+import Ft from "./Title-D17CJXko.js";
+import { t as Tt } from "./themes-Dw-dDudK.js";
+import { _ as Rt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Nt = ["id"], jt = ["xmlns", "viewBox"], Dt = ["width", "height"], Ut = ["cx", "cy", "r", "stroke", "stroke-width"], Gt = { key: 1 }, Vt = ["stroke", "d", "stroke-width"], Wt = { style: { "pointer-events": "none" } }, Xt = ["cx", "cy", "fill", "r", "stroke"], Yt = ["x", "y", "fill", "font-size"], qt = { key: 2 }, Ht = ["stroke", "stroke-width", "x1", "x2", "y1", "y2"], Jt = { style: { "pointer-events": "none" } }, Kt = ["cx", "cy", "fill", "r", "stroke"], Qt = ["x", "y", "fill", "font-size"], Zt = ["text-anchor", "transform", "x", "y", "font-weight", "font-size", "fill", "text-decoration", "onClick", "onMouseenter", "onMouseleave"], el = ["cx", "cy", "fill", "stroke", "r", "onClick", "onMouseenter", "onMouseleave"], tl = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, Jt = {
+}, ll = {
   __name: "vue-ui-relation-circle",
   props: {
     dataset: {
@@ -30,14 +31,14 @@ const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["c
       }
     }
   },
-  setup(Fe, { expose: Be }) {
-    ut((e) => ({
-      v51791a0b: Ye.value,
-      v501dae6a: Xe.value,
-      v2abe5668: qe.value
+  setup(Be, { expose: Fe }) {
+    dt((e) => ({
+      da1d463e: Ye.value,
+      v7926d380: Xe.value,
+      a1d88bbc: qe.value
     }));
-    const Re = Z(() => import("./PenAndPaper-CR8q353D.js")), Te = Z(() => import("./UserOptions-DsTgvAok.js")), Ne = Z(() => import("./PackageVersion-Cwrh45ON.js")), { vue_ui_relation_circle: je } = xt(), m = Fe, De = h(() => !!m.dataset && Object.keys(m.dataset).length), S = r(yt()), ie = r(0), A = r(null), ne = r(null), ue = r(null), oe = r(null), re = r(0), l = r(X()), { loading: ce, FINAL_DATASET: Ue, manualLoading: V } = $t({
-      ...ot(m),
+    const Te = Z(() => import("./PenAndPaper-BxbYiPy4.js")), Re = Z(() => import("./UserOptions-B3vCIe-u.js")), Ne = Z(() => import("./PackageVersion-C9oklnuy.js")), { vue_ui_relation_circle: je } = Lt(), m = Be, De = g(() => !!m.dataset && Object.keys(m.dataset).length), S = r(bt()), ie = r(0), A = r(null), ne = r(null), oe = r(null), ue = r(null), re = r(0), l = r(X()), { loading: ce, FINAL_DATASET: Ue, manualLoading: V } = Pt({
+      ...ft(m),
       FINAL_CONFIG: l,
       prepareConfig: X,
       skeletonDataset: [
@@ -49,7 +50,7 @@ const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["c
         { id: "F", label: "_", relations: ["A"] },
         { id: "G", label: "_", relations: ["A"] }
       ],
-      skeletonConfig: ht({
+      skeletonConfig: kt({
         defaultConfig: l.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -63,7 +64,7 @@ const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["c
           }
         }
       })
-    }), { userOptionsVisible: G, setUserOptionsVisibility: ve, keepUserOptionState: de } = Ct({ config: l.value }), { svgRef: W } = Lt({ config: l.value.style.title });
+    }), { userOptionsVisible: W, setUserOptionsVisibility: ve, keepUserOptionState: de } = It({ config: l.value }), { svgRef: E } = Mt({ config: l.value.style.title });
     function X() {
       const e = Ee({
         userConfig: m.config,
@@ -71,22 +72,22 @@ const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["c
       });
       return e.theme ? {
         ...Ee({
-          userConfig: St.vue_ui_relation_circle[e.theme] || m.config,
+          userConfig: Tt.vue_ui_relation_circle[e.theme] || m.config,
           defaultConfig: e
         }),
-        customPalette: gt[e.theme] || Oe
+        customPalette: wt[e.theme] || Oe
       } : e;
     }
     ee(() => m.config, (e) => {
-      l.value = X(), G.value = !l.value.userOptions.showOnChartHover, _.value = l.value.style.size, y.value = l.value.style.weightLabels.size, F.value = l.value.style.plot.radius, I.value = l.value.style.labels.fontSize, o.value.height = l.value.style.size, o.value.width = l.value.style.size, be(), re.value += 1;
+      l.value = X(), W.value = !l.value.userOptions.showOnChartHover, _.value = l.value.style.size, y.value = l.value.style.weightLabels.size, F.value = l.value.style.plot.radius, I.value = l.value.style.labels.fontSize, u.value.height = l.value.style.size, u.value.width = l.value.style.size, be(), re.value += 1;
     }, { deep: !0 }), ee(() => m.dataset, (e) => {
       Array.isArray(e) && e.length > 0 && (V.value = !1);
     }, { deep: !0 });
-    const { isPrinting: fe, isImaging: ye, generatePdf: he, generateImage: ge } = _t({
+    const { isPrinting: fe, isImaging: ge, generatePdf: ye, generateImage: he } = Ot({
       elementId: `relation_circle_${S.value}`,
       fileName: l.value.style.title.text || "vue-ui-relation-circle",
       options: l.value.userOptions.print
-    }), Ve = h(() => l.value.userOptions.show && !l.value.style.title.text), me = h(() => mt(l.value.customPalette)), k = r([]), p = r([]), d = r({}), b = r([]), Ge = r(0), E = h(() => Ue.value.slice(0, l.value.style.limit).map((e) => {
+    }), Ge = g(() => l.value.userOptions.show && !l.value.style.title.text), me = g(() => xt(l.value.customPalette)), k = r([]), p = r([]), d = r({}), b = r([]), Ve = r(0), B = g(() => Ue.value.slice(0, l.value.style.limit).map((e) => {
       const s = Array.isArray(e.relations) ? e.relations : [];
       return {
         ...e,
@@ -94,31 +95,31 @@ const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["c
         relations: s
       };
     }));
-    ee(E, () => {
+    ee(B, () => {
       k.value = [], p.value = [], Y(), q();
     });
-    const _ = r(l.value.style.size), y = r(l.value.style.weightLabels.size), F = r(l.value.style.plot.radius), I = r(l.value.style.labels.fontSize), o = r({
+    const _ = r(l.value.style.size), y = r(l.value.style.weightLabels.size), F = r(l.value.style.plot.radius), I = r(l.value.style.labels.fontSize), u = r({
       height: l.value.style.size,
       width: l.value.style.size
-    }), C = h({
+    }), C = g({
       get() {
         return _.value * l.value.style.circle.radiusProportion;
       },
       set(e) {
         return e;
       }
-    }), We = h(() => l.value.style.links.curved), Xe = h(() => `${l.value.style.animation.speedMs}ms`), Ye = h(() => C.value * 2), qe = h(() => C.value * 4), w = Le(null), L = Le(null);
-    rt(() => {
+    }), We = g(() => l.value.style.links.curved), Xe = g(() => `${l.value.style.animation.speedMs}ms`), Ye = g(() => C.value * 2), qe = g(() => C.value * 4), w = Le(null), L = Le(null);
+    gt(() => {
       be(), document.getElementById(`relation_circle_${S.value}`).addEventListener("click", we);
     });
-    const pe = h(() => l.value.debug);
+    const pe = g(() => l.value.debug);
     function be() {
       if (Se(m.dataset) ? (Ie({
         componentName: "VueUiRelationCircle",
         type: "dataset",
         debug: pe.value
       }), V.value = !0) : m.dataset.forEach((e, s) => {
-        pt({
+        $t({
           datasetObject: e,
           requiredAttributes: ["id", "label", "relations", "weights"]
         }).forEach((t) => {
@@ -131,15 +132,15 @@ const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["c
           });
         });
       }), Se(m.dataset) || (V.value = l.value.loading), l.value.responsive) {
-        const e = kt(() => {
-          const { width: s, height: t } = wt({
+        const e = _t(() => {
+          const { width: s, height: t } = Ct({
             chart: A.value,
             title: l.value.style.title.text ? ne.value : null,
-            source: ue.value,
-            noTitle: oe.value
+            source: oe.value,
+            noTitle: ue.value
           });
           requestAnimationFrame(() => {
-            _.value = Math.min(s, t), o.value.width = Math.max(0.1, s), o.value.height = Math.max(0.1, t - 12), C.value = _.value * l.value.style.circle.radiusProportion, k.value = [], p.value = [], Y(), q(), ke(), l.value.responsiveProportionalSizing ? (y.value = ae({
+            _.value = Math.min(s, t), u.value.width = Math.max(0.1, s), u.value.height = Math.max(0.1, t - 12), C.value = _.value * l.value.style.circle.radiusProportion, k.value = [], p.value = [], Y(), q(), ke(), l.value.responsiveProportionalSizing ? (y.value = ae({
               relator: _.value,
               adjuster: l.value.style.size,
               source: l.value.style.weightLabels.size,
@@ -165,11 +166,11 @@ const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["c
         k.value = [], p.value = [], Y(), q();
       ke();
     }
-    ct(() => {
+    yt(() => {
       document.getElementById(`relation_circle_${S.value}`).removeEventListener("click", we), w.value && (L.value && w.value.unobserve(L.value), w.value.disconnect());
     });
-    const { autoSizeLabels: ke } = Pt({
-      svgRef: W,
+    const { autoSizeLabels: ke } = Et({
+      svgRef: E,
       fontSize: l.value.style.labels.fontSize,
       minFontSize: l.value.style.labels.minFontSize,
       sizeRef: I,
@@ -180,11 +181,11 @@ const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["c
       s && Array.from(s.classList).includes("vue-ui-user-options") || s && Array.from(s.classList).includes("vue-ui-user-options-summary") || s && Array.from(s.classList).includes("vue-data-ui-button") || s && Array.from(s.classList).includes("vue-ui-relation-circle-legend") || (d.value = {}, b.value = []);
     }
     function Y() {
-      const e = 6.28319 / E.value.length, s = 360 / E.value.length;
+      const e = 6.28319 / B.value.length, s = 360 / B.value.length;
       let t = 0, a = 0;
-      E.value.forEach((c, v) => {
-        const K = c.weights.reduce((it, nt) => it + nt, 0), Q = C.value * Math.cos(t) + o.value.width / 2, at = C.value * Math.sin(t) + o.value.height / 2 + l.value.style.circle.offsetY;
-        k.value.push({ x: Q, y: at, ...c, color: c.color ? c.color : me.value[v] ? me.value[v] : Oe[v], regAngle: a, totalWeight: K }), t += e, a += s;
+      B.value.forEach((c, v) => {
+        const K = c.weights.reduce((ct, vt) => ct + vt, 0), Q = C.value * Math.cos(t) + u.value.width / 2, rt = C.value * Math.sin(t) + u.value.height / 2 + l.value.style.circle.offsetY;
+        k.value.push({ x: Q, y: rt, ...c, color: c.color ? c.color : me.value[v] ? me.value[v] : Oe[v], regAngle: a, totalWeight: K }), t += e, a += s;
       });
     }
     function He(e, s) {
@@ -218,12 +219,12 @@ const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["c
     }
     function Je(e) {
       const s = { x: e.x1, y: e.y1 }, t = { x: e.x2, y: e.y2 }, a = { x: e.x1, y: e.y1 }, c = {
-        x: o.value.width / 2,
-        y: o.value.height / 2 + l.value.style.circle.offsetY
+        x: u.value.width / 2,
+        y: u.value.height / 2 + l.value.style.circle.offsetY
       }, v = 0.5, K = Math.pow(1 - v, 3) * s.x + 3 * Math.pow(1 - v, 2) * v * a.x + 3 * (1 - v) * Math.pow(v, 2) * c.x + Math.pow(v, 3) * t.x, Q = Math.pow(1 - v, 3) * s.y + 3 * Math.pow(1 - v, 2) * v * a.y + 3 * (1 - v) * Math.pow(v, 2) * c.y + Math.pow(v, 3) * t.y;
       return { x: K, y: Q };
     }
-    const Ke = h(() => Math.max(...p.value.map((e) => e.weight)));
+    const Ke = g(() => Math.max(...p.value.map((e) => e.weight)));
     function Qe(e) {
       return Object.hasOwn(d.value, "x") ? b.value.includes(e.id) ? "opacity:1" : "opacity:0.1" : "opacity:1";
     }
@@ -248,15 +249,15 @@ const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["c
     function lt(e) {
       return e.regAngle > 90 && e.regAngle < 270 ? `rotate(${e.regAngle + 180},${e.x},${e.y})` : `rotate(${e.regAngle},${e.x},${e.y})`;
     }
-    const B = r(null);
+    const T = r(null);
     function $e(e, s) {
-      B.value = s, l.value.events.datapointEnter && l.value.events.datapointEnter({ datapoint: e, seriesIndex: s });
+      T.value = s, l.value.events.datapointEnter && l.value.events.datapointEnter({ datapoint: e, seriesIndex: s });
     }
     function Ae(e, s) {
-      B.value = null, l.value.events.datapointLeave && l.value.events.datapointLeave({ datapoint: e, seriesIndex: s });
+      T.value = null, l.value.events.datapointLeave && l.value.events.datapointLeave({ datapoint: e, seriesIndex: s });
     }
     function _e(e, s) {
-      l.value.events.datapointClick && l.value.events.datapointClick({ datapoint: e, seriesIndex: s }), Ge.value = 360 - e.regAngle, d.value.id && e.id === d.value.id ? (d.value = {}, b.value = []) : (d.value = e, b.value = [...e.relations]);
+      l.value.events.datapointClick && l.value.events.datapointClick({ datapoint: e, seriesIndex: s }), Ve.value = 360 - e.regAngle, d.value.id && e.id === d.value.id ? (d.value = {}, b.value = []) : (d.value = e, b.value = [...e.relations]);
     }
     function H(e) {
       const s = e.weight / Ke.value * l.value.style.links.maxWidth;
@@ -266,13 +267,13 @@ const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["c
     function Ce(e) {
       R.value = e, ie.value += 1;
     }
-    const T = r(!1);
+    const N = r(!1);
     function J() {
-      T.value = !T.value;
+      N.value = !N.value;
     }
     async function st({ scale: e = 2 } = {}) {
       if (!A.value) return;
-      const { width: s, height: t } = A.value.getBoundingClientRect(), a = s / t, { imageUri: c, base64: v } = await zt({ domElement: A.value, base64: !0, img: !0, scale: e });
+      const { width: s, height: t } = A.value.getBoundingClientRect(), a = s / t, { imageUri: c, base64: v } = await Bt({ domElement: A.value, base64: !0, img: !0, scale: e });
       return {
         imageUri: c,
         base64: v,
@@ -282,33 +283,45 @@ const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["c
         aspectRatio: a
       };
     }
-    return Be({
+    const at = g(() => l.value.style.backgroundColor), it = g(() => l.value.style.title), { exportSvg: nt, getSvg: ot } = St({
+      svg: E,
+      title: it,
+      backgroundColor: at
+    });
+    async function ut({ isCb: e }) {
+      if (e) {
+        const { blob: s, url: t, text: a, dataUrl: c } = await ot();
+        l.value.userOptions.callbacks.svg({ blob: s, url: t, text: a, dataUrl: c });
+      } else
+        nt();
+    }
+    return Fe({
       getImage: st,
-      generatePdf: he,
-      generateImage: ge,
+      generatePdf: ye,
+      generateImage: he,
       toggleAnnotator: J,
       toggleFullscreen: Ce
     }), (e, s) => (i(), n("div", {
       ref_key: "relationCircleChart",
       ref: A,
-      class: "vue-ui-relation-circle",
+      class: "vue-data-ui-component vue-ui-relation-circle",
       style: z(`width:100%;background:${l.value.style.backgroundColor};text-align:center;${l.value.responsive ? "height: 100%" : ""}`),
       id: `relation_circle_${S.value}`,
-      onMouseenter: s[0] || (s[0] = () => u(ve)(!0)),
-      onMouseleave: s[1] || (s[1] = () => u(ve)(!1))
+      onMouseenter: s[0] || (s[0] = () => o(ve)(!0)),
+      onMouseleave: s[1] || (s[1] = () => o(ve)(!1))
     }, [
-      l.value.userOptions.buttons.annotator ? (i(), N(u(Re), {
+      l.value.userOptions.buttons.annotator ? (i(), j(o(Te), {
         key: 0,
-        svgRef: u(W),
+        svgRef: o(E),
         backgroundColor: l.value.style.backgroundColor,
         color: l.value.style.color,
-        active: T.value,
+        active: N.value,
         onClose: J
       }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : f("", !0),
-      Ve.value ? (i(), n("div", {
+      Ge.value ? (i(), n("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: oe,
+        ref: ue,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : f("", !0),
@@ -318,7 +331,7 @@ const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["c
         ref: ne,
         style: "width:100%;background:transparent"
       }, [
-        (i(), N(Ot, {
+        (i(), j(Ft, {
           key: `title_${re.value}`,
           config: {
             title: {
@@ -332,16 +345,17 @@ const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["c
           }
         }, null, 8, ["config"]))
       ], 512)) : f("", !0),
-      l.value.userOptions.show && De.value && (u(de) || u(G)) ? (i(), N(u(Te), {
+      l.value.userOptions.show && De.value && (o(de) || o(W)) ? (i(), j(o(Re), {
         ref: "details",
         key: `user_options_${ie.value}`,
         backgroundColor: l.value.style.backgroundColor,
         color: l.value.style.color,
-        isPrinting: u(fe),
-        isImaging: u(ye),
+        isPrinting: o(fe),
+        isImaging: o(ge),
         uid: S.value,
         hasPdf: l.value.userOptions.buttons.pdf,
         hasImg: l.value.userOptions.buttons.img,
+        hasSvg: l.value.userOptions.buttons.svg,
         hasFullscreen: l.value.userOptions.buttons.img,
         hasXls: !1,
         isFullscreen: R.value,
@@ -349,97 +363,98 @@ const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["c
         chartElement: A.value,
         position: l.value.userOptions.position,
         hasAnnotator: l.value.userOptions.buttons.annotator,
-        isAnnotation: T.value,
+        isAnnotation: N.value,
         callbacks: l.value.userOptions.callbacks,
         printScale: l.value.userOptions.print.scale,
         onToggleFullscreen: Ce,
-        onGeneratePdf: u(he),
-        onGenerateImage: u(ge),
+        onGeneratePdf: o(ye),
+        onGenerateImage: o(he),
+        onGenerateSvg: ut,
         onToggleAnnotator: J,
         style: z({
-          visibility: u(de) ? u(G) ? "visible" : "hidden" : "visible"
+          visibility: o(de) ? o(W) ? "visible" : "hidden" : "visible"
         })
-      }, vt({ _: 2 }, [
+      }, ht({ _: 2 }, [
         e.$slots.menuIcon ? {
           name: "menuIcon",
           fn: M(({ isOpen: t, color: a }) => [
-            g(e.$slots, "menuIcon", j(D({ isOpen: t, color: a })), void 0, !0)
+            h(e.$slots, "menuIcon", D(U({ isOpen: t, color: a })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         e.$slots.optionPdf ? {
           name: "optionPdf",
           fn: M(() => [
-            g(e.$slots, "optionPdf", {}, void 0, !0)
+            h(e.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         e.$slots.optionImg ? {
           name: "optionImg",
           fn: M(() => [
-            g(e.$slots, "optionImg", {}, void 0, !0)
+            h(e.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         e.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: M(({ toggleFullscreen: t, isFullscreen: a }) => [
-            g(e.$slots, "optionFullscreen", j(D({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
+            h(e.$slots, "optionFullscreen", D(U({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
           ]),
           key: "3"
         } : void 0,
         e.$slots.optionAnnotator ? {
           name: "optionAnnotator",
           fn: M(({ toggleAnnotator: t, isAnnotator: a }) => [
-            g(e.$slots, "optionAnnotator", j(D({ toggleAnnotator: t, isAnnotator: a })), void 0, !0)
+            h(e.$slots, "optionAnnotator", D(U({ toggleAnnotator: t, isAnnotator: a })), void 0, !0)
           ]),
           key: "4"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasSvg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
       (i(), n("svg", {
         ref_key: "svgRef",
-        ref: W,
-        xmlns: u(bt),
+        ref: E,
+        xmlns: o(At),
         class: te([{ "vue-data-ui-fullscreen--on": R.value, "vue-data-ui-fulscreen--off": !R.value }, "relation-circle"]),
-        viewBox: `0 0 ${o.value.width <= 0 ? 10 : o.value.width} ${o.value.height <= 0 ? 10 : o.value.height}`,
+        viewBox: `0 0 ${u.value.width <= 0 ? 10 : u.value.width} ${u.value.height <= 0 ? 10 : u.value.height}`,
         width: "100%",
         style: "user-select:none; background:transparent"
       }, [
-        dt(u(Ne)),
+        mt(o(Ne)),
         e.$slots["chart-background"] ? (i(), n("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
-          width: o.value.width <= 0 ? 10 : o.value.width,
-          height: o.value.height <= 0 ? 10 : o.value.height,
+          width: u.value.width <= 0 ? 10 : u.value.width,
+          height: u.value.height <= 0 ? 10 : u.value.height,
           style: {
             pointerEvents: "none"
           }
         }, [
-          g(e.$slots, "chart-background", {}, void 0, !0)
-        ], 8, Ft)) : f("", !0),
-        ft("circle", {
-          cx: (o.value.width <= 0 ? 1e-4 : o.value.width) / 2,
-          cy: (o.value.height <= 0 ? 1e-4 : o.value.height) / 2 + l.value.style.circle.offsetY,
+          h(e.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Dt)) : f("", !0),
+        pt("circle", {
+          cx: (u.value.width <= 0 ? 1e-4 : u.value.width) / 2,
+          cy: (u.value.height <= 0 ? 1e-4 : u.value.height) / 2 + l.value.style.circle.offsetY,
           r: C.value <= 0 ? 1e-4 : C.value,
           stroke: l.value.style.circle.stroke,
           "stroke-width": l.value.style.circle.strokeWidth,
           fill: "transparent",
           class: "main-circle"
-        }, null, 8, Bt),
-        We.value ? (i(), n("g", Rt, [
+        }, null, 8, Ut),
+        We.value ? (i(), n("g", Gt, [
           (i(!0), n($, null, O(p.value, (t, a) => (i(), n("path", {
             key: `relation_${a}`,
             style: z(xe(t)),
             stroke: x(t),
             class: te(["relation", { "vue-ui-relation-circle-selected": d.value.hasOwnProperty("id") && b.value.includes(t.id) }]),
-            d: `M${t.x1},${t.y1} C${t.x1},${t.y1} ${o.value.width / 2},${o.value.height / 2 + l.value.style.circle.offsetY} ${t.x2},${t.y2}`,
+            d: `M${t.x1},${t.y1} C${t.x1},${t.y1} ${u.value.width / 2},${u.value.height / 2 + l.value.style.circle.offsetY} ${t.x2},${t.y2}`,
             fill: "none",
             "stroke-width": H(t),
             "stroke-linecap": "round"
-          }, null, 14, Tt))), 128)),
-          (i(!0), n($, null, O(p.value, (t, a) => (i(), n("g", Nt, [
-            P(t) ? g(e.$slots, "dataLabel", Pe({
+          }, null, 14, Vt))), 128)),
+          (i(!0), n($, null, O(p.value, (t, a) => (i(), n("g", Wt, [
+            P(t) ? h(e.$slots, "dataLabel", Pe({
               key: 0,
               ref_for: !0
             }, {
@@ -457,27 +472,27 @@ const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["c
               r: y.value,
               stroke: l.value.style.backgroundColor,
               "stroke-width": "1"
-            }, null, 8, jt)) : f("", !0),
+            }, null, 8, Xt)) : f("", !0),
             P(t) && !e.$slots.dataLabel ? (i(), n("text", {
               key: 2,
               x: t.midPointBezier.x,
               y: t.midPointBezier.y + y.value / 3,
-              fill: u(Me)(x(t)),
+              fill: o(Me)(x(t)),
               "text-anchor": "middle",
               "font-size": y.value
-            }, U(u(le)(
+            }, G(o(le)(
               l.value.style.weightLabels.formatter,
               t.weight,
-              u(se)({
+              o(se)({
                 p: l.value.style.weightLabels.prefix,
                 v: t.weight,
                 s: l.value.style.weightLabels.suffix,
                 r: l.value.style.weightLabels.rounding
               }),
               { ...t }
-            )), 9, Dt)) : f("", !0)
+            )), 9, Yt)) : f("", !0)
           ]))), 256))
-        ])) : (i(), n("g", Ut, [
+        ])) : (i(), n("g", qt, [
           (i(!0), n($, null, O(p.value, (t, a) => (i(), n("line", {
             key: `relation_${a}`,
             stroke: x(t),
@@ -489,9 +504,9 @@ const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["c
             y2: t.y2,
             class: te({ "vue-ui-relation-circle-selected": d.value.hasOwnProperty("id") && b.value.includes(t.id) }),
             "stroke-linecap": "round"
-          }, null, 14, Vt))), 128)),
-          (i(!0), n($, null, O(p.value, (t, a) => (i(), n("g", Gt, [
-            P(t) ? g(e.$slots, "dataLabel", Pe({
+          }, null, 14, Ht))), 128)),
+          (i(!0), n($, null, O(p.value, (t, a) => (i(), n("g", Jt, [
+            P(t) ? h(e.$slots, "dataLabel", Pe({
               key: 0,
               ref_for: !0
             }, {
@@ -509,25 +524,25 @@ const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["c
               r: y.value,
               stroke: l.value.style.backgroundColor,
               "stroke-width": "1"
-            }, null, 8, Wt)) : f("", !0),
+            }, null, 8, Kt)) : f("", !0),
             P(t) && !e.$slots.dataLabel && l.value.style.weightLabels.show ? (i(), n("text", {
               key: 2,
               x: t.midPointLine.x,
               y: t.midPointLine.y + y.value / 3,
-              fill: u(Me)(x(t)),
+              fill: o(Me)(x(t)),
               "text-anchor": "middle",
               "font-size": y.value
-            }, U(u(le)(
+            }, G(o(le)(
               l.value.style.weightLabels.formatter,
               t.weight,
-              u(se)({
+              o(se)({
                 p: l.value.style.weightLabels.prefix,
                 v: t.weight,
                 s: l.value.style.weightLabels.suffix,
                 r: l.value.style.weightLabels.rounding
               }),
               { ...t }
-            )), 9, Xt)) : f("", !0)
+            )), 9, Qt)) : f("", !0)
           ]))), 256))
         ])),
         (i(!0), n($, null, O(k.value, (t, a) => (i(), n("text", {
@@ -542,18 +557,18 @@ const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["c
           style: z(`font-family:${l.value.style.fontFamily};${tt(t)}`),
           "font-size": I.value,
           fill: l.value.style.labels.color,
-          "text-decoration": a === B.value ? "underline" : void 0,
+          "text-decoration": a === T.value ? "underline" : void 0,
           onClick: (c) => _e(t, a),
           onMouseenter: (c) => $e(t, a),
           onMouseleave: (c) => Ae(t, a)
         }, [
-          u(ce) ? (i(), n($, { key: 0 }, [
+          o(ce) ? (i(), n($, { key: 0 }, [
             ze(" -------- ")
           ], 64)) : (i(), n($, { key: 1 }, [
-            ze(U(t.label) + " (" + U(u(le)(
+            ze(G(t.label) + " (" + G(o(le)(
               l.value.style.weightLabels.formatter,
               t.totalWeight,
-              u(se)({
+              o(se)({
                 p: l.value.style.weightLabels.prefix,
                 v: t.totalWeight,
                 s: l.value.style.weightLabels.suffix,
@@ -562,7 +577,7 @@ const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["c
               { ...t }
             )) + ") ", 1)
           ], 64))
-        ], 44, Yt))), 128)),
+        ], 44, Zt))), 128)),
         (i(!0), n($, null, O(k.value, (t, a) => (i(), n("circle", {
           cx: t.x,
           cy: t.y,
@@ -572,28 +587,28 @@ const Mt = ["id"], Et = ["xmlns", "viewBox"], Ft = ["width", "height"], Bt = ["c
           fill: l.value.style.plot.useSerieColor ? t.color : l.value.style.plot.color,
           stroke: l.value.style.backgroundColor,
           "stroke-width": "1",
-          r: F.value * (a === B.value ? 2 : 1),
+          r: F.value * (a === T.value ? 2 : 1),
           onClick: (c) => _e(t, a),
           onMouseenter: (c) => $e(t, a),
           onMouseleave: (c) => Ae(t, a)
-        }, null, 44, qt))), 128)),
-        g(e.$slots, "svg", { svg: o.value }, void 0, !0)
-      ], 10, Et)),
-      e.$slots.watermark ? (i(), n("div", Ht, [
-        g(e.$slots, "watermark", j(D({ isPrinting: u(fe) || u(ye) })), void 0, !0)
+        }, null, 44, el))), 128)),
+        h(e.$slots, "svg", { svg: u.value }, void 0, !0)
+      ], 10, jt)),
+      e.$slots.watermark ? (i(), n("div", tl, [
+        h(e.$slots, "watermark", D(U({ isPrinting: o(fe) || o(ge) })), void 0, !0)
       ])) : f("", !0),
       e.$slots.source ? (i(), n("div", {
         key: 5,
         ref_key: "source",
-        ref: ue,
+        ref: oe,
         dir: "auto"
       }, [
-        g(e.$slots, "source", {}, void 0, !0)
+        h(e.$slots, "source", {}, void 0, !0)
       ], 512)) : f("", !0),
-      u(ce) ? (i(), N(At, { key: 6 })) : f("", !0)
-    ], 44, Mt));
+      o(ce) ? (i(), j(zt, { key: 6 })) : f("", !0)
+    ], 44, Nt));
   }
-}, cl = /* @__PURE__ */ It(Jt, [["__scopeId", "data-v-72b30f4c"]]);
+}, ml = /* @__PURE__ */ Rt(ll, [["__scopeId", "data-v-21882da7"]]);
 export {
-  cl as default
+  ml as default
 };