vue-data-ui 2.17.0 → 2.17.2

package/dist/{vue-ui-relation-circle-CYoFNekk.js → vue-ui-relation-circle-DsEYbNs_.js}

@@ -1,14 +1,14 @@
-import { useCssVars as Ke, computed as y, defineAsyncComponent as F, ref as o, watch as Qe, shallowRef as be, onMounted as Ze, onBeforeUnmount as et, createElementBlock as n, openBlock as i, unref as a, normalizeStyle as O, createBlock as R, createCommentVNode as d, createSlots as tt, withCtx as S, renderSlot as h, normalizeProps as B, guardReactiveProps as T, normalizeClass as H, createVNode as lt, createElementVNode as st, Fragment as z, renderList as A, mergeProps as we, toDisplayString as N } from "vue";
-import { u as it, c as at, t as nt, p as xe, a as rt, b as ut, o as ot, e as $e, g as ct, X as vt, F as _e, i as J, f as K, E as Q } from "./index-pPGk-uhD.js";
-import { t as dt, u as ft } from "./useResponsive-DfdjqQps.js";
-import { u as Ce } from "./useNestedProp-DjACxgdZ.js";
-import { u as yt } from "./usePrinter-DDHcrl0A.js";
+import { useCssVars as Ke, computed as y, defineAsyncComponent as E, ref as o, watch as Qe, shallowRef as be, onMounted as Ze, onBeforeUnmount as et, createElementBlock as r, openBlock as i, unref as n, normalizeStyle as O, createBlock as F, createCommentVNode as v, createSlots as tt, withCtx as S, renderSlot as h, normalizeProps as B, guardReactiveProps as T, normalizeClass as H, createVNode as lt, createElementVNode as st, Fragment as z, renderList as A, mergeProps as we, toDisplayString as N } from "vue";
+import { u as it, c as at, t as nt, p as xe, a as rt, b as ut, o as ot, e as $e, g as ct, X as dt, F as _e, i as J, f as K, E as Q } from "./index-JzUbx__y.js";
+import { t as vt, u as ft } from "./useResponsive-DfdjqQps.js";
+import { u as Ce } from "./useNestedProp-D_jd2dz9.js";
+import { u as yt } from "./usePrinter-CsyliflB.js";
 import { u as ht } from "./useUserOptionState-BIvW1Kz7.js";
 import { u as gt } from "./useChartAccessibility-9icAAmYg.js";
-import mt from "./Title-B-2bV0SW.js";
-import pt from "./img-Y_hYz-ZC.js";
+import mt from "./Title-BQb7X_OR.js";
+import pt from "./img-D0DpKcFX.js";
 import { _ as kt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const bt = ["id"], wt = ["xmlns", "viewBox"], xt = ["width", "height"], $t = ["cx", "cy", "r", "stroke", "stroke-width"], _t = { key: 1 }, Ct = ["stroke", "d", "stroke-width"], Pt = { style: { "pointer-events": "none" } }, Lt = ["cx", "cy", "fill", "r", "stroke"], Ot = ["x", "y", "fill", "font-size"], zt = { key: 2 }, At = ["stroke", "stroke-width", "x1", "x2", "y1", "y2"], It = { style: { "pointer-events": "none" } }, St = ["cx", "cy", "fill", "r", "stroke"], Mt = ["x", "y", "fill", "font-size"], Et = ["text-anchor", "transform", "x", "y", "onClick", "font-weight", "font-size", "fill"], Ft = ["cx", "cy", "fill", "stroke", "onClick", "r"], Rt = {
+const bt = ["id"], wt = ["xmlns", "viewBox"], xt = ["width", "height"], $t = ["cx", "cy", "r", "stroke", "stroke-width"], _t = { key: 1 }, Ct = ["stroke", "d", "stroke-width"], Pt = { style: { "pointer-events": "none" } }, Lt = ["cx", "cy", "fill", "r", "stroke"], Ot = ["x", "y", "fill", "font-size"], zt = { key: 2 }, At = ["stroke", "stroke-width", "x1", "x2", "y1", "y2"], It = { style: { "pointer-events": "none" } }, St = ["cx", "cy", "fill", "r", "stroke"], Mt = ["x", "y", "fill", "font-size"], Rt = ["text-anchor", "transform", "x", "y", "onClick", "font-weight", "font-size", "fill"], Et = ["cx", "cy", "fill", "stroke", "onClick", "r"], Ft = {
   key: 5,
   class: "vue-data-ui-watermark"
 }, Bt = {
@@ -29,11 +29,11 @@ const bt = ["id"], wt = ["xmlns", "viewBox"], xt = ["width", "height"], $t = ["c
   },
   setup(Pe, { expose: Le }) {
     Ke((e) => ({
-      "1a17a60b": Be.value,
-      "4e963a6a": Re.value,
-      "05cc60cc": Te.value
+      "695b7171": Be.value,
+      "7699e2d0": Fe.value,
+      d96a2a9c: Te.value
     }));
-    const Oe = F(() => import("./PackageVersion-5TR4ocqp.js")), ze = F(() => import("./PenAndPaper-D6AqipIO.js")), Ae = F(() => import("./vue-ui-skeleton-DJPjyNYn.js")), Ie = F(() => import("./UserOptions-Dd34lEKb.js")), { vue_ui_relation_circle: Se } = it(), k = Pe, j = y(() => !!k.dataset && Object.keys(k.dataset).length), I = o(at()), Z = o(0), _ = o(null), ee = o(null), te = o(null), le = o(null), se = o(0), l = y({
+    const Oe = E(() => import("./PackageVersion-CIX1W_aa.js")), ze = E(() => import("./PenAndPaper-CqJ4wudB.js")), Ae = E(() => import("./vue-ui-skeleton-B4KQLEQy.js")), Ie = E(() => import("./UserOptions-lneAyZKu.js")), { vue_ui_relation_circle: Se } = it(), k = Pe, j = y(() => !!k.dataset && Object.keys(k.dataset).length), I = o(at()), Z = o(0), x = o(null), ee = o(null), te = o(null), le = o(null), se = o(0), l = y({
       get: () => re(),
       set: (e) => e
     }), { userOptionsVisible: U, setUserOptionsVisibility: ie, keepUserOptionState: ae } = ht({ config: l.value }), { svgRef: ne } = gt({ config: l.value.style.title });
@@ -53,21 +53,21 @@ const bt = ["id"], wt = ["xmlns", "viewBox"], xt = ["width", "height"], $t = ["c
     Qe(() => k.config, (e) => {
       l.value = re(), U.value = !l.value.userOptions.showOnChartHover, fe(), se.value += 1;
     }, { deep: !0 });
-    const { isPrinting: ue, isImaging: oe, generatePdf: ce, generateImage: ve } = yt({
+    const { isPrinting: ue, isImaging: oe, generatePdf: ce, generateImage: de } = yt({
       elementId: `relation_circle_${I.value}`,
       fileName: l.value.style.title.text || "vue-ui-relation-circle",
       options: l.value.userOptions.print
-    }), Me = y(() => l.value.userOptions.show && !l.value.style.title.text), de = y(() => ut(l.value.customPalette)), x = o([]), m = o([]), c = o({}), p = o([]), Ee = o(0), V = y(() => k.dataset.slice(0, l.value.style.limit)), C = o(l.value.style.size), g = o(l.value.style.weightLabels.size), G = o(l.value.style.plot.radius), W = o(l.value.style.labels.fontSize), u = o({
+    }), Me = y(() => l.value.userOptions.show && !l.value.style.title.text), ve = y(() => ut(l.value.customPalette)), $ = o([]), m = o([]), d = o({}), p = o([]), Re = o(0), V = y(() => k.dataset.slice(0, l.value.style.limit)), C = o(l.value.style.size), g = o(l.value.style.weightLabels.size), G = o(l.value.style.plot.radius), W = o(l.value.style.labels.fontSize), u = o({
       height: l.value.style.size,
       width: l.value.style.size
-    }), $ = y({
+    }), _ = y({
       get() {
         return C.value * l.value.style.circle.radiusProportion;
       },
       set(e) {
         return e;
       }
-    }), Fe = y(() => l.value.style.links.curved), Re = y(() => `${l.value.style.animation.speedMs}ms`), Be = y(() => $.value * 2), Te = y(() => $.value * 4), b = be(null), P = be(null);
+    }), Ee = y(() => l.value.style.links.curved), Fe = y(() => `${l.value.style.animation.speedMs}ms`), Be = y(() => _.value * 2), Te = y(() => _.value * 4), b = be(null), P = be(null);
     Ze(() => {
       fe(), document.getElementById(`relation_circle_${I.value}`).addEventListener("click", ye);
     });
@@ -88,15 +88,15 @@ const bt = ["id"], wt = ["xmlns", "viewBox"], xt = ["width", "height"], $t = ["c
           });
         });
       }), l.value.responsive) {
-        const e = dt(() => {
+        const e = vt(() => {
           const { width: s, height: t } = ft({
-            chart: _.value,
+            chart: x.value,
             title: l.value.style.title.text ? ee.value : null,
             source: te.value,
             noTitle: le.value
           });
           requestAnimationFrame(() => {
-            C.value = Math.min(s, t), u.value.width = s, u.value.height = t, $.value = C.value * l.value.style.circle.radiusProportion, x.value = [], m.value = [], he(), ge(), l.value.responsiveProportionalSizing ? (g.value = Q({
+            C.value = Math.min(s, t), u.value.width = s, u.value.height = t, _.value = C.value * l.value.style.circle.radiusProportion, $.value = [], m.value = [], he(), ge(), l.value.responsiveProportionalSizing ? (g.value = Q({
               relator: C.value,
               adjuster: l.value.style.size,
               source: l.value.style.weightLabels.size,
@@ -117,32 +117,32 @@ const bt = ["id"], wt = ["xmlns", "viewBox"], xt = ["width", "height"], $t = ["c
             })) : (g.value = l.value.style.weightLabels.size, G.value = l.value.style.plot.radius, W.value = l.value.style.labels.fontSize);
           });
         });
-        b.value && (P.value && b.value.unobserve(P.value), b.value.disconnect()), b.value = new ResizeObserver(e), P.value = _.value.parentNode, b.value.observe(P.value);
+        b.value && (P.value && b.value.unobserve(P.value), b.value.disconnect()), b.value = new ResizeObserver(e), P.value = x.value.parentNode, b.value.observe(P.value);
       } else
-        x.value = [], m.value = [], he(), ge();
+        $.value = [], m.value = [], he(), ge();
     }
     et(() => {
       document.getElementById(`relation_circle_${I.value}`).removeEventListener("click", ye), b.value && (P.value && b.value.unobserve(P.value), b.value.disconnect());
     });
     function ye(e) {
       const s = e.target;
-      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") || (c.value = {}, p.value = []);
+      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 = {}, p.value = []);
     }
     function he() {
       const e = 6.28319 / V.value.length, s = 360 / V.value.length;
-      let t = 0, r = 0;
-      V.value.forEach((f, v) => {
-        const Y = f.weights.reduce((He, Je) => He + Je, 0), q = $.value * Math.cos(t) + u.value.width / 2, qe = $.value * Math.sin(t) + u.value.height / 2 + l.value.style.circle.offsetY;
-        x.value.push({ x: q, y: qe, ...f, color: f.color ? f.color : de.value[v] ? de.value[v] : xe[v], regAngle: r, totalWeight: Y }), t += e, r += s;
+      let t = 0, a = 0;
+      V.value.forEach((f, c) => {
+        const Y = f.weights.reduce((He, Je) => He + Je, 0), q = _.value * Math.cos(t) + u.value.width / 2, qe = _.value * Math.sin(t) + u.value.height / 2 + l.value.style.circle.offsetY;
+        $.value.push({ x: q, y: qe, ...f, color: f.color ? f.color : ve.value[c] ? ve.value[c] : xe[c], regAngle: a, totalWeight: Y }), t += e, a += s;
       });
     }
     function Ne(e, s) {
-      const t = (e.x + s.x) / 2, r = (e.y + s.y) / 2;
-      return { x: t, y: r };
+      const t = (e.x + s.x) / 2, a = (e.y + s.y) / 2;
+      return { x: t, y: a };
     }
     function ge() {
-      m.value = [], x.value.forEach((e) => {
-        x.value.filter((t) => t.relations.includes(e.id)).forEach((t, r) => {
+      m.value = [], $.value.forEach((e) => {
+        $.value.filter((t) => t.relations.includes(e.id)).forEach((t, a) => {
           const f = t.relations.indexOf(e.id);
           m.value.push({
             weight: t.weights[f] ? t.weights[f] : 0,
@@ -166,24 +166,24 @@ const bt = ["id"], wt = ["xmlns", "viewBox"], xt = ["width", "height"], $t = ["c
       });
     }
     function je(e) {
-      const s = { x: e.x1, y: e.y1 }, t = { x: e.x2, y: e.y2 }, r = { x: e.x1, y: e.y1 }, f = {
+      const s = { x: e.x1, y: e.y1 }, t = { x: e.x2, y: e.y2 }, a = { x: e.x1, y: e.y1 }, f = {
         x: u.value.width / 2,
         y: u.value.height / 2 + l.value.style.circle.offsetY
-      }, v = 0.5, Y = Math.pow(1 - v, 3) * s.x + 3 * Math.pow(1 - v, 2) * v * r.x + 3 * (1 - v) * Math.pow(v, 2) * f.x + Math.pow(v, 3) * t.x, q = Math.pow(1 - v, 3) * s.y + 3 * Math.pow(1 - v, 2) * v * r.y + 3 * (1 - v) * Math.pow(v, 2) * f.y + Math.pow(v, 3) * t.y;
+      }, c = 0.5, Y = Math.pow(1 - c, 3) * s.x + 3 * Math.pow(1 - c, 2) * c * a.x + 3 * (1 - c) * Math.pow(c, 2) * f.x + Math.pow(c, 3) * t.x, q = Math.pow(1 - c, 3) * s.y + 3 * Math.pow(1 - c, 2) * c * a.y + 3 * (1 - c) * Math.pow(c, 2) * f.y + Math.pow(c, 3) * t.y;
       return { x: Y, y: q };
     }
     const Ue = y(() => Math.max(...m.value.map((e) => e.weight)));
     function Ve(e) {
-      return Object.hasOwn(c.value, "x") ? p.value.includes(e.id) ? "opacity:1" : "opacity:0.1" : "opacity:1";
+      return Object.hasOwn(d.value, "x") ? p.value.includes(e.id) ? "opacity:1" : "opacity:0.1" : "opacity:1";
     }
     function w(e) {
       return e.colorSource;
     }
     function me(e) {
-      return Object.hasOwn(c.value, "x") ? p.value.includes(e.id) && e.relationId === `${e.id}_${c.value.id}` || e.relationId === `${c.value.id}_${e.id}` ? `opacity:1;stroke-width:${D(e)}` : "opacity: 0" : "opacity: 1";
+      return Object.hasOwn(d.value, "x") ? p.value.includes(e.id) && e.relationId === `${e.id}_${d.value.id}` || e.relationId === `${d.value.id}_${e.id}` ? `opacity:1;stroke-width:${D(e)}` : "opacity: 0" : "opacity: 1";
     }
     function L(e) {
-      return Object.hasOwn(c.value, "x") ? !!(p.value.includes(e.id) && e.relationId === `${e.id}_${c.value.id}` || e.relationId === `${c.value.id}_${e.id}`) : !1;
+      return Object.hasOwn(d.value, "x") ? !!(p.value.includes(e.id) && e.relationId === `${e.id}_${d.value.id}` || e.relationId === `${d.value.id}_${e.id}`) : !1;
     }
     function Ge(e) {
       return e.regAngle > 90 && e.regAngle < 270 ? "end" : "start";
@@ -192,13 +192,13 @@ const bt = ["id"], wt = ["xmlns", "viewBox"], xt = ["width", "height"], $t = ["c
       return e.regAngle > 90 && e.regAngle < 270 ? e.x - 5 : e.x + 5;
     }
     function De(e) {
-      return Object.hasOwn(c.value, "x") ? c.value.id === e.id || p.value.includes(e.id) ? "opacity:1" : "opacity:0.2" : "opacity:1";
+      return Object.hasOwn(d.value, "x") ? d.value.id === e.id || p.value.includes(e.id) ? "opacity:1" : "opacity:0.2" : "opacity:1";
     }
     function Xe(e) {
       return e.regAngle > 90 && e.regAngle < 270 ? `rotate(${e.regAngle + 180},${e.x},${e.y})` : `rotate(${e.regAngle},${e.x},${e.y})`;
     }
     function pe(e) {
-      Ee.value = 360 - e.regAngle, c.value.id && e.id === c.value.id ? (c.value = {}, p.value = []) : (c.value = e, p.value = [...e.relations]);
+      Re.value = 360 - e.regAngle, d.value.id && e.id === d.value.id ? (d.value = {}, p.value = []) : (d.value = e, p.value = [...e.relations]);
     }
     function D(e) {
       const s = e.weight / Ue.value * l.value.style.links.maxWidth;
@@ -208,52 +208,59 @@ const bt = ["id"], wt = ["xmlns", "viewBox"], xt = ["width", "height"], $t = ["c
     function ke(e) {
       M.value = e, Z.value += 1;
     }
-    const E = o(!1);
+    const R = o(!1);
     function X() {
-      E.value = !E.value;
+      R.value = !R.value;
     }
     async function Ye({ scale: e = 2 } = {}) {
-      if (!_.value) return;
-      const { imageUri: s, base64: t } = await pt({ domElement: _.value, base64: !0, img: !0, scale: e });
-      return { imageUri: s, base64: t };
+      if (!x.value) return;
+      const { width: s, height: t } = x.value.getBoundingClientRect(), a = s / t, { imageUri: f, base64: c } = await pt({ domElement: x.value, base64: !0, img: !0, scale: e });
+      return {
+        imageUri: f,
+        base64: c,
+        title: l.value.style.title.text,
+        width: s,
+        height: t,
+        aspectRatio: a
+      };
     }
     return Le({
       getImage: Ye,
       generatePdf: ce,
-      generateImage: ve,
+      generateImage: de,
       toggleAnnotator: X,
       toggleFullscreen: ke
-    }), (e, s) => (i(), n("div", {
+    }), (e, s) => (i(), r("div", {
       ref_key: "relationCircleChart",
-      ref: _,
+      ref: x,
       class: "vue-ui-relation-circle",
       style: O(`width:100%;background:${l.value.style.backgroundColor};text-align:center;${l.value.responsive ? "height: 100%" : ""}`),
       id: `relation_circle_${I.value}`,
-      onMouseenter: s[0] || (s[0] = () => a(ie)(!0)),
-      onMouseleave: s[1] || (s[1] = () => a(ie)(!1))
+      onMouseenter: s[0] || (s[0] = () => n(ie)(!0)),
+      onMouseleave: s[1] || (s[1] = () => n(ie)(!1))
     }, [
-      l.value.userOptions.buttons.annotator ? (i(), R(a(ze), {
+      l.value.userOptions.buttons.annotator ? (i(), F(n(ze), {
         key: 0,
-        svgRef: a(ne),
+        svgRef: n(ne),
         backgroundColor: l.value.style.backgroundColor,
         color: l.value.style.color,
-        active: E.value,
+        active: R.value,
         onClose: X
-      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : d("", !0),
-      Me.value ? (i(), n("div", {
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : v("", !0),
+      Me.value ? (i(), r("div", {
         key: 1,
         ref_key: "noTitle",
         ref: le,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : d("", !0),
-      l.value.style.title.text ? (i(), n("div", {
+      }, null, 512)) : v("", !0),
+      l.value.style.title.text ? (i(), r("div", {
         key: 2,
         ref_key: "chartTitle",
         ref: ee,
         style: "width:100%;background:transparent"
       }, [
-        (i(), R(mt, {
+        (i(), F(mt, {
           key: `title_${se.value}`,
           config: {
             title: {
@@ -266,14 +273,14 @@ const bt = ["id"], wt = ["xmlns", "viewBox"], xt = ["width", "height"], $t = ["c
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : d("", !0),
-      l.value.userOptions.show && j.value && (a(ae) || a(U)) ? (i(), R(a(Ie), {
+      ], 512)) : v("", !0),
+      l.value.userOptions.show && j.value && (n(ae) || n(U)) ? (i(), F(n(Ie), {
         ref: "details",
         key: `user_options_${Z.value}`,
         backgroundColor: l.value.style.backgroundColor,
         color: l.value.style.color,
-        isPrinting: a(ue),
-        isImaging: a(oe),
+        isPrinting: n(ue),
+        isImaging: n(oe),
         uid: I.value,
         hasPdf: l.value.userOptions.buttons.pdf,
         hasImg: l.value.userOptions.buttons.img,
@@ -281,24 +288,24 @@ const bt = ["id"], wt = ["xmlns", "viewBox"], xt = ["width", "height"], $t = ["c
         hasXls: !1,
         isFullscreen: M.value,
         titles: { ...l.value.userOptions.buttonTitles },
-        chartElement: _.value,
+        chartElement: x.value,
         position: l.value.userOptions.position,
         hasAnnotator: l.value.userOptions.buttons.annotator,
-        isAnnotation: E.value,
+        isAnnotation: R.value,
         callbacks: l.value.userOptions.callbacks,
         printScale: l.value.userOptions.print.scale,
         onToggleFullscreen: ke,
-        onGeneratePdf: a(ce),
-        onGenerateImage: a(ve),
+        onGeneratePdf: n(ce),
+        onGenerateImage: n(de),
         onToggleAnnotator: X,
         style: O({
-          visibility: a(ae) ? a(U) ? "visible" : "hidden" : "visible"
+          visibility: n(ae) ? n(U) ? "visible" : "hidden" : "visible"
         })
       }, tt({ _: 2 }, [
         e.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: S(({ isOpen: t, color: r }) => [
-            h(e.$slots, "menuIcon", B(T({ isOpen: t, color: r })), void 0, !0)
+          fn: S(({ isOpen: t, color: a }) => [
+            h(e.$slots, "menuIcon", B(T({ isOpen: t, color: a })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
@@ -318,31 +325,31 @@ const bt = ["id"], wt = ["xmlns", "viewBox"], xt = ["width", "height"], $t = ["c
         } : void 0,
         e.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: S(({ toggleFullscreen: t, isFullscreen: r }) => [
-            h(e.$slots, "optionFullscreen", B(T({ toggleFullscreen: t, isFullscreen: r })), void 0, !0)
+          fn: S(({ toggleFullscreen: t, isFullscreen: a }) => [
+            h(e.$slots, "optionFullscreen", B(T({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
           ]),
           key: "3"
         } : void 0,
         e.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: S(({ toggleAnnotator: t, isAnnotator: r }) => [
-            h(e.$slots, "optionAnnotator", B(T({ toggleAnnotator: t, isAnnotator: r })), void 0, !0)
+          fn: S(({ toggleAnnotator: t, isAnnotator: a }) => [
+            h(e.$slots, "optionAnnotator", B(T({ 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"])) : d("", !0),
-      j.value ? (i(), n("svg", {
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : v("", !0),
+      j.value ? (i(), r("svg", {
         key: 4,
         ref_key: "svgRef",
         ref: ne,
-        xmlns: a(vt),
+        xmlns: n(dt),
         class: H([{ "vue-data-ui-fullscreen--on": M.value, "vue-data-ui-fulscreen--off": !M.value }, "relation-circle"]),
         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"
       }, [
-        lt(a(Oe)),
-        e.$slots["chart-background"] ? (i(), n("foreignObject", {
+        lt(n(Oe)),
+        e.$slots["chart-background"] ? (i(), r("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
@@ -353,28 +360,28 @@ const bt = ["id"], wt = ["xmlns", "viewBox"], xt = ["width", "height"], $t = ["c
           }
         }, [
           h(e.$slots, "chart-background", {}, void 0, !0)
-        ], 8, xt)) : d("", !0),
+        ], 8, xt)) : v("", !0),
         st("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: $.value <= 0 ? 1e-4 : $.value,
+          r: _.value <= 0 ? 1e-4 : _.value,
           stroke: l.value.style.circle.stroke,
           "stroke-width": l.value.style.circle.strokeWidth,
           fill: "transparent",
           class: "main-circle"
         }, null, 8, $t),
-        Fe.value ? (i(), n("g", _t, [
-          (i(!0), n(z, null, A(m.value, (t, r) => (i(), n("path", {
-            key: `relation_${r}`,
+        Ee.value ? (i(), r("g", _t, [
+          (i(!0), r(z, null, A(m.value, (t, a) => (i(), r("path", {
+            key: `relation_${a}`,
             style: O(me(t)),
             stroke: w(t),
-            class: H(["relation", { "vue-ui-relation-circle-selected": c.value.hasOwnProperty("id") && p.value.includes(t.id) }]),
+            class: H(["relation", { "vue-ui-relation-circle-selected": d.value.hasOwnProperty("id") && p.value.includes(t.id) }]),
             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": D(t),
             "stroke-linecap": "round"
           }, null, 14, Ct))), 128)),
-          (i(!0), n(z, null, A(m.value, (t, r) => (i(), n("g", Pt, [
+          (i(!0), r(z, null, A(m.value, (t, a) => (i(), r("g", Pt, [
             L(t) ? h(e.$slots, "dataLabel", we({
               key: 0,
               ref_for: !0
@@ -384,8 +391,8 @@ const bt = ["id"], wt = ["xmlns", "viewBox"], xt = ["width", "height"], $t = ["c
               color: w(t),
               weight: t.weight,
               fontSize: g.value
-            }), void 0, !0) : d("", !0),
-            L(t) && !e.$slots.dataLabel ? (i(), n("circle", {
+            }), void 0, !0) : v("", !0),
+            L(t) && !e.$slots.dataLabel ? (i(), r("circle", {
               key: 1,
               cx: t.midPointBezier.x,
               cy: t.midPointBezier.y,
@@ -393,29 +400,29 @@ const bt = ["id"], wt = ["xmlns", "viewBox"], xt = ["width", "height"], $t = ["c
               r: g.value,
               stroke: l.value.style.backgroundColor,
               "stroke-width": "1"
-            }, null, 8, Lt)) : d("", !0),
-            L(t) && !e.$slots.dataLabel ? (i(), n("text", {
+            }, null, 8, Lt)) : v("", !0),
+            L(t) && !e.$slots.dataLabel ? (i(), r("text", {
               key: 2,
               x: t.midPointBezier.x,
               y: t.midPointBezier.y + g.value / 3,
-              fill: a(_e)(w(t)),
+              fill: n(_e)(w(t)),
               "text-anchor": "middle",
               "font-size": g.value
-            }, N(a(J)(
+            }, N(n(J)(
               l.value.style.weightLabels.formatter,
               t.weight,
-              a(K)({
+              n(K)({
                 p: l.value.style.weightLabels.prefix,
                 v: t.weight,
                 s: l.value.style.weightLabels.suffix,
                 r: l.value.style.weightLabels.rounding
               }),
               { ...t }
-            )), 9, Ot)) : d("", !0)
+            )), 9, Ot)) : v("", !0)
           ]))), 256))
-        ])) : (i(), n("g", zt, [
-          (i(!0), n(z, null, A(m.value, (t, r) => (i(), n("line", {
-            key: `relation_${r}`,
+        ])) : (i(), r("g", zt, [
+          (i(!0), r(z, null, A(m.value, (t, a) => (i(), r("line", {
+            key: `relation_${a}`,
             stroke: w(t),
             "stroke-width": D(t),
             style: O(me(t)),
@@ -423,10 +430,10 @@ const bt = ["id"], wt = ["xmlns", "viewBox"], xt = ["width", "height"], $t = ["c
             x2: t.x2,
             y1: t.y1,
             y2: t.y2,
-            class: H({ "vue-ui-relation-circle-selected": c.value.hasOwnProperty("id") && p.value.includes(t.id) }),
+            class: H({ "vue-ui-relation-circle-selected": d.value.hasOwnProperty("id") && p.value.includes(t.id) }),
             "stroke-linecap": "round"
           }, null, 14, At))), 128)),
-          (i(!0), n(z, null, A(m.value, (t, r) => (i(), n("g", It, [
+          (i(!0), r(z, null, A(m.value, (t, a) => (i(), r("g", It, [
             L(t) ? h(e.$slots, "dataLabel", we({
               key: 0,
               ref_for: !0
@@ -436,8 +443,8 @@ const bt = ["id"], wt = ["xmlns", "viewBox"], xt = ["width", "height"], $t = ["c
               color: w(t),
               weight: t.weight,
               fontSize: g.value
-            }), void 0, !0) : d("", !0),
-            L(t) && !e.$slots.dataLabel && l.value.style.weightLabels.show ? (i(), n("circle", {
+            }), void 0, !0) : v("", !0),
+            L(t) && !e.$slots.dataLabel && l.value.style.weightLabels.show ? (i(), r("circle", {
               key: 1,
               cx: t.midPointLine.x,
               cy: t.midPointLine.y,
@@ -445,29 +452,29 @@ const bt = ["id"], wt = ["xmlns", "viewBox"], xt = ["width", "height"], $t = ["c
               r: g.value,
               stroke: l.value.style.backgroundColor,
               "stroke-width": "1"
-            }, null, 8, St)) : d("", !0),
-            L(t) && !e.$slots.dataLabel && l.value.style.weightLabels.show ? (i(), n("text", {
+            }, null, 8, St)) : v("", !0),
+            L(t) && !e.$slots.dataLabel && l.value.style.weightLabels.show ? (i(), r("text", {
               key: 2,
               x: t.midPointLine.x,
               y: t.midPointLine.y + g.value / 3,
-              fill: a(_e)(w(t)),
+              fill: n(_e)(w(t)),
               "text-anchor": "middle",
               "font-size": g.value
-            }, N(a(J)(
+            }, N(n(J)(
               l.value.style.weightLabels.formatter,
               t.weight,
-              a(K)({
+              n(K)({
                 p: l.value.style.weightLabels.prefix,
                 v: t.weight,
                 s: l.value.style.weightLabels.suffix,
                 r: l.value.style.weightLabels.rounding
               }),
               { ...t }
-            )), 9, Mt)) : d("", !0)
+            )), 9, Mt)) : v("", !0)
           ]))), 256))
         ])),
-        (i(!0), n(z, null, A(x.value, (t, r) => (i(), n("text", {
-          key: `plot_text_${r}`,
+        (i(!0), r(z, null, A($.value, (t, a) => (i(), r("text", {
+          key: `plot_text_${a}`,
           "text-anchor": Ge(t),
           transform: Xe(t),
           x: We(t),
@@ -475,25 +482,25 @@ const bt = ["id"], wt = ["xmlns", "viewBox"], xt = ["width", "height"], $t = ["c
           onClick: (f) => pe(t),
           class: "vue-ui-relation-circle-legend",
           "transform-origin": "start",
-          "font-weight": c.value.id === t.id ? "900" : "400",
+          "font-weight": d.value.id === t.id ? "900" : "400",
           style: O(`font-family:${l.value.style.fontFamily};${De(t)}`),
           "font-size": W.value,
           fill: l.value.style.labels.color
-        }, N(t.label) + " (" + N(a(J)(
+        }, N(t.label) + " (" + N(n(J)(
           l.value.style.weightLabels.formatter,
           t.totalWeight,
-          a(K)({
+          n(K)({
             p: l.value.style.weightLabels.prefix,
             v: t.totalWeight,
             s: l.value.style.weightLabels.suffix,
             r: l.value.style.weightLabels.rounding
           }),
           { ...t }
-        )) + ") ", 13, Et))), 128)),
-        (i(!0), n(z, null, A(x.value, (t, r) => (i(), n("circle", {
+        )) + ") ", 13, Rt))), 128)),
+        (i(!0), r(z, null, A($.value, (t, a) => (i(), r("circle", {
           cx: t.x,
           cy: t.y,
-          key: `plot_${r}`,
+          key: `plot_${a}`,
           style: O(Ve(t)),
           class: "vue-ui-relation-circle-plot",
           fill: l.value.style.plot.useSerieColor ? t.color : l.value.style.plot.color,
@@ -501,21 +508,21 @@ const bt = ["id"], wt = ["xmlns", "viewBox"], xt = ["width", "height"], $t = ["c
           "stroke-width": "1",
           onClick: (f) => pe(t),
           r: G.value
-        }, null, 12, Ft))), 128)),
+        }, null, 12, Et))), 128)),
         h(e.$slots, "svg", { svg: u.value }, void 0, !0)
-      ], 10, wt)) : d("", !0),
-      e.$slots.watermark ? (i(), n("div", Rt, [
-        h(e.$slots, "watermark", B(T({ isPrinting: a(ue) || a(oe) })), void 0, !0)
-      ])) : d("", !0),
-      e.$slots.source ? (i(), n("div", {
+      ], 10, wt)) : v("", !0),
+      e.$slots.watermark ? (i(), r("div", Ft, [
+        h(e.$slots, "watermark", B(T({ isPrinting: n(ue) || n(oe) })), void 0, !0)
+      ])) : v("", !0),
+      e.$slots.source ? (i(), r("div", {
         key: 6,
         ref_key: "source",
         ref: te,
         dir: "auto"
       }, [
         h(e.$slots, "source", {}, void 0, !0)
-      ], 512)) : d("", !0),
-      j.value ? d("", !0) : (i(), R(a(Ae), {
+      ], 512)) : v("", !0),
+      j.value ? v("", !0) : (i(), F(n(Ae), {
         key: 7,
         config: {
           type: "relationCircle",
@@ -529,7 +536,7 @@ const bt = ["id"], wt = ["xmlns", "viewBox"], xt = ["width", "height"], $t = ["c
       }, null, 8, ["config"]))
     ], 44, bt));
   }
-}, qt = /* @__PURE__ */ kt(Bt, [["__scopeId", "data-v-8c1db423"]]);
+}, qt = /* @__PURE__ */ kt(Bt, [["__scopeId", "data-v-a4e381eb"]]);
 export {
   qt as default
 };