vue-data-ui 3.0.2 → 3.0.4

package/dist/{vue-ui-quadrant-CLQqKyzu.js → vue-ui-quadrant-qQkLdaFk.js}

@@ -1,31 +1,31 @@
-import { defineAsyncComponent as D, computed as g, ref as y, toRefs as gt, watch as Qe, shallowRef as Je, onMounted as mt, onBeforeUnmount as xt, createElementBlock as n, openBlock as s, unref as i, normalizeStyle as _, normalizeClass as T, createBlock as R, createCommentVNode as c, createElementVNode as h, createVNode as he, createSlots as $t, withCtx as m, renderSlot as x, normalizeProps as U, guardReactiveProps as G, Fragment as C, renderList as X, toDisplayString as L, createTextVNode as kt, nextTick as Lt } from "vue";
-import { u as wt, c as je, t as _t, a as qt, p as ye, b as Ct, o as St, f as Q, d as zt, e as Tt, Y as At, k as F, i as B, X as Xt, s as ue, x as Wt, Z as Yt, I as Mt, F as Nt, v as Ot, w as Rt, y as Ft, z as Bt } from "./index-B9Ct1B_p.js";
-import { t as Vt, u as Pt } from "./useResponsive-DfdjqQps.js";
-import { u as Ht } from "./usePrinter-DcZXg1hH.js";
-import { u as Ze } from "./useNestedProp-C0gKxLur.js";
-import { u as It } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Et } from "./useChartAccessibility-9icAAmYg.js";
-import Dt from "./img-Cv4nScI0.js";
-import Ut from "./Title-CntvKJss.js";
-import { _ as Ke } from "./Shape-0sW2StrO.js";
-import Gt from "./Legend-CQsASoei.js";
-import { u as Qt, B as Jt } from "./useLoading-D7YHNtLX.js";
-import { _ as jt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "height"], tl = ["id"], ll = ["stop-color"], al = ["stop-color"], ul = { key: 1 }, ol = ["fill", "x", "y", "height", "width", "stroke-width", "stroke", "rx"], sl = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], rl = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], nl = { key: 2 }, il = ["points", "fill"], vl = ["points", "fill"], dl = ["points", "fill"], cl = ["points", "fill"], hl = { key: 3 }, yl = ["y", "fill", "font-size"], bl = ["x", "y", "fill", "font-size"], fl = ["x", "y", "fill", "font-size"], pl = ["y", "fill", "font-size"], gl = { key: 4 }, ml = ["x", "y", "font-size", "fill"], xl = ["x", "y", "font-size", "fill"], $l = ["x", "y", "font-size", "fill"], kl = ["id", "font-size", "transform", "fill"], Ll = ["id", "font-size", "transform", "fill"], wl = ["id", "font-size", "transform", "fill"], _l = { key: 5 }, ql = ["fill", "points"], Cl = ["x", "y", "width", "height"], Sl = ["x", "y", "width", "height"], zl = ["x", "y", "width", "height"], Tl = ["x", "y", "width", "height"], Al = {
+import { defineAsyncComponent as D, computed as g, ref as y, toRefs as mt, watch as Je, shallowRef as je, onMounted as xt, onBeforeUnmount as $t, createElementBlock as n, openBlock as s, unref as i, normalizeStyle as q, normalizeClass as T, createBlock as X, createCommentVNode as h, createElementVNode as c, createVNode as he, createSlots as kt, withCtx as m, renderSlot as x, normalizeProps as U, guardReactiveProps as G, Fragment as S, renderList as W, toDisplayString as L, Teleport as Lt, createTextVNode as wt, nextTick as _t } from "vue";
+import { u as qt, c as Ze, t as Ct, a as St, p as ye, b as zt, o as Tt, f as Q, d as At, e as Xt, Y as Wt, k as F, i as B, X as Yt, s as ue, x as Mt, Z as Nt, I as Ot, F as Rt, v as Ft, w as Bt, y as Vt, z as Pt } from "./index-q-LPw2IT.js";
+import { t as Ht, u as It } from "./useResponsive-DfdjqQps.js";
+import { u as Et } from "./usePrinter-DX7efa1s.js";
+import { u as Ke } from "./useNestedProp-04aFeUYu.js";
+import { u as Dt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Ut } from "./useChartAccessibility-9icAAmYg.js";
+import Gt from "./img-Ctts6JQb.js";
+import Qt from "./Title-B55R8CAZ.js";
+import { _ as et } from "./Shape-DHIaJs9G.js";
+import Jt from "./Legend-DcDSkq99.js";
+import { u as jt, B as Zt } from "./useLoading-D7YHNtLX.js";
+import { _ as Kt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const el = ["id"], tl = ["id"], ll = ["xmlns", "viewBox", "id"], al = ["x", "y", "width", "height"], ul = ["id"], ol = ["stop-color"], sl = ["stop-color"], rl = { key: 1 }, nl = ["fill", "x", "y", "height", "width", "stroke-width", "stroke", "rx"], il = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], vl = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], dl = { key: 2 }, cl = ["points", "fill"], hl = ["points", "fill"], yl = ["points", "fill"], bl = ["points", "fill"], fl = { key: 3 }, pl = ["y", "fill", "font-size"], gl = ["x", "y", "fill", "font-size"], ml = ["x", "y", "fill", "font-size"], xl = ["y", "fill", "font-size"], $l = { key: 4 }, kl = ["x", "y", "font-size", "fill"], Ll = ["x", "y", "font-size", "fill"], wl = ["x", "y", "font-size", "fill"], _l = ["id", "font-size", "transform", "fill"], ql = ["id", "font-size", "transform", "fill"], Cl = ["id", "font-size", "transform", "fill"], Sl = { key: 5 }, zl = ["fill", "points"], Tl = ["x", "y", "width", "height"], Al = ["x", "y", "width", "height"], Xl = ["x", "y", "width", "height"], Wl = ["x", "y", "width", "height"], Yl = {
   key: 0,
   style: { "pointer-events": "none" }
-}, Xl = ["x", "y", "font-size", "fill"], Wl = ["x", "y", "font-size", "fill", "innerHTML"], Yl = { key: 0 }, Ml = ["x", "y", "onMouseover", "onMouseleave", "onClick"], Nl = {
+}, Ml = ["x", "y", "font-size", "fill"], Nl = ["x", "y", "font-size", "fill", "innerHTML"], Ol = { key: 0 }, Rl = ["x", "y", "onMouseover", "onMouseleave", "onClick"], Fl = {
   key: 8,
   class: "vue-ui-dna"
-}, Ol = ["points", "fill"], Rl = ["points", "fill"], Fl = ["points", "fill"], Bl = ["points", "fill"], Vl = { key: 9 }, Pl = ["x", "y", "font-size", "fill", "font-weight"], Hl = { key: 10 }, Il = ["x", "y", "fill"], El = ["x", "y", "fill"], Dl = ["x", "y", "fill"], Ul = ["x", "y", "fill"], Gl = ["stroke", "d"], Ql = ["stroke", "d"], Jl = {
+}, Bl = ["points", "fill"], Vl = ["points", "fill"], Pl = ["points", "fill"], Hl = ["points", "fill"], Il = { key: 9 }, El = ["x", "y", "font-size", "fill", "font-weight"], Dl = { key: 10 }, Ul = ["x", "y", "fill"], Gl = ["x", "y", "fill"], Ql = ["x", "y", "fill"], Jl = ["x", "y", "fill"], jl = ["stroke", "d"], Zl = ["stroke", "d"], Kl = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, jl = ["onClick"], Zl = {
+}, ea = ["id"], ta = ["onClick"], la = {
   key: 0,
   height: "14",
   width: "14",
   viewBox: "0 0 20 20"
-}, Kl = ["innerHTML"], ea = {
+}, aa = ["innerHTML"], ua = {
   __name: "vue-ui-quadrant",
   props: {
     config: {
@@ -42,9 +42,9 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
     }
   },
   emits: ["selectPlot", "selectSide", "selectLegend"],
-  setup(et, { expose: tt, emit: lt }) {
-    const at = D(() => import("./Tooltip-DF8e4iB9.js")), ut = D(() => import("./vue-ui-accordion-B31QK9Hj.js")), ot = D(() => import("./DataTable-osx68WLA.js")), st = D(() => import("./PenAndPaper-CdXspg5R.js")), rt = D(() => import("./UserOptions-DQyIO0ts.js")), nt = D(() => import("./PackageVersion-DZGrOKw5.js")), { vue_ui_quadrant: it } = wt(), W = et, be = g(() => !!W.dataset && W.dataset.length), z = y(je()), oe = lt, vt = y(null), se = y(!1), re = y(""), fe = y(0), p = y(!1), Y = y(null), pe = y(null), ge = y(null), me = y(null), xe = y(null), $e = y(0), ke = y(0), Le = y(0), t = y(ie()), { loading: we, FINAL_DATASET: _e } = Qt({
-      ...gt(W),
+  setup(tt, { expose: lt, emit: at }) {
+    const ut = D(() => import("./Tooltip-BMOddG-M.js")), ot = D(() => import("./vue-ui-accordion-D46i_gkB.js")), st = D(() => import("./DataTable-rj9-mAwF.js")), rt = D(() => import("./PenAndPaper-BJ0hcgsa.js")), nt = D(() => import("./UserOptions-DVzyjG-W.js")), it = D(() => import("./PackageVersion-5ZjKSIei.js")), { vue_ui_quadrant: vt } = qt(), Y = tt, be = g(() => !!Y.dataset && Y.dataset.length), w = y(Ze()), oe = at, dt = y(null), se = y(!1), re = y(""), fe = y(0), p = y(!1), M = y(null), pe = y(null), ge = y(null), me = y(null), xe = y(null), $e = y(0), ke = y(0), Le = y(0), we = y(!1), t = y(ie()), { loading: _e, FINAL_DATASET: qe } = jt({
+      ...mt(Y),
       FINAL_CONFIG: t,
       prepareConfig: ie,
       skeletonDataset: [
@@ -69,7 +69,7 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
           ]
         }
       ],
-      skeletonConfig: _t({
+      skeletonConfig: Ct({
         defaultConfig: t.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -107,30 +107,30 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
           }
         }
       })
-    }), { userOptionsVisible: ne, setUserOptionsVisibility: qe, keepUserOptionState: Ce } = It({ config: t.value }), { svgRef: Se } = Et({ config: t.value.style.chart.title });
+    }), { userOptionsVisible: ne, setUserOptionsVisibility: Ce, keepUserOptionState: Se } = Dt({ config: t.value }), { svgRef: ze } = Ut({ config: t.value.style.chart.title });
     function ie() {
-      const l = Ze({
-        userConfig: W.config,
-        defaultConfig: it
+      const l = Ke({
+        userConfig: Y.config,
+        defaultConfig: vt
       });
       return l.theme ? {
-        ...Ze({
-          userConfig: Ct.vue_ui_quadrant[l.theme] || W.config,
+        ...Ke({
+          userConfig: zt.vue_ui_quadrant[l.theme] || Y.config,
           defaultConfig: l
         }),
-        customPalette: qt[l.theme] || ye
+        customPalette: St[l.theme] || ye
       } : l;
     }
-    Qe(() => W.config, (l) => {
-      t.value = ie(), ne.value = !t.value.userOptions.showOnChartHover, ze(), $e.value += 1, ke.value += 1, Le.value += 1, $.value.plotLabels.show = t.value.style.chart.layout.labels.plotLabels.show, $.value.showTable = t.value.table.show, $.value.showTooltip = t.value.style.chart.tooltip.show;
+    Je(() => Y.config, (l) => {
+      t.value = ie(), ne.value = !t.value.userOptions.showOnChartHover, Te(), $e.value += 1, ke.value += 1, Le.value += 1, $.value.plotLabels.show = t.value.style.chart.layout.labels.plotLabels.show, $.value.showTable = t.value.table.show, $.value.showTooltip = t.value.style.chart.tooltip.show;
     }, { deep: !0 });
-    const M = Je(null), P = Je(null), H = g(() => t.value.debug);
-    function ze() {
-      if (St(W.dataset) ? Q({
+    const N = je(null), P = je(null), H = g(() => t.value.debug);
+    function Te() {
+      if (Tt(Y.dataset) ? Q({
         componentName: "VueUiQuadrant",
         type: "dataset",
         debug: H.value
-      }) : W.dataset.forEach((l, u) => {
+      }) : Y.dataset.forEach((l, u) => {
         [null, void 0].includes(l.name) && Q({
           componentName: "VueUiQuadrant",
           type: "datasetSerieAttribute",
@@ -154,9 +154,9 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
           });
         });
       }), t.value.responsive) {
-        const l = Vt(() => {
-          const { width: u, height: a } = Pt({
-            chart: Y.value,
+        const l = Ht(() => {
+          const { width: u, height: a } = It({
+            chart: M.value,
             title: t.value.style.chart.title.text ? pe.value : null,
             legend: t.value.style.chart.legend.show ? ge.value : null,
             source: me.value,
@@ -166,19 +166,19 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
             e.value.height = a, e.value.usableHeight = a - k.value * 2, e.value.width = u, e.value.usableWidth = u - k.value * 2, e.value.top = k.value, e.value.left = k.value, e.value.right = u - k.value, e.value.bottom = a - k.value, e.value.centerX = u / 2, e.value.centerY = a - a / 2, e.value.padding = k.value;
           });
         });
-        M.value && (P.value && M.value.unobserve(P.value), M.value.disconnect()), M.value = new ResizeObserver(l), P.value = Y.value.parentNode, M.value.observe(P.value);
+        N.value && (P.value && N.value.unobserve(P.value), N.value.disconnect()), N.value = new ResizeObserver(l), P.value = M.value.parentNode, N.value.observe(P.value);
       }
     }
-    mt(() => {
-      ze();
-    }), xt(() => {
-      M.value && (P.value && M.value.unobserve(P.value), M.value.disconnect());
+    xt(() => {
+      we.value = !0, Te();
+    }), $t(() => {
+      N.value && (P.value && N.value.unobserve(P.value), N.value.disconnect());
     });
-    const { isPrinting: Te, isImaging: Ae, generatePdf: Xe, generateImage: We } = Ht({
-      elementId: `vue-ui-quadrant_${z.value}`,
+    const { isPrinting: Ae, isImaging: Xe, generatePdf: We, generateImage: Ye } = Et({
+      elementId: `vue-ui-quadrant_${w.value}`,
       fileName: t.value.style.chart.title.text || "vue-ui-quadrant",
       options: t.value.userOptions.print
-    }), dt = g(() => t.value.userOptions.show && !t.value.style.chart.title.text), Ye = g(() => zt(t.value.customPalette)), $ = y({
+    }), ct = g(() => t.value.userOptions.show && !t.value.style.chart.title.text), Me = g(() => At(t.value.customPalette)), $ = y({
       plotLabels: {
         show: t.value.style.chart.layout.labels.plotLabels.show
       },
@@ -201,7 +201,7 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
       startX: 0,
       startY: 0
     });
-    Qe(() => e.value, (l) => {
+    Je(() => e.value, (l) => {
       l && (v.value = {
         ...JSON.parse(JSON.stringify(e.value)),
         startX: 0,
@@ -249,7 +249,7 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
         default:
           return { x: 0, y: 0, text: "", fontSize: 0, fill: "none", bold: !1 };
       }
-    }), ct = y(null), Z = y(!1);
+    }), ht = y(null), Z = y(!1);
     function J({ targetX: l, targetY: u, targetW: a, targetH: o, side: r }) {
       d.value && j(r);
       const b = {
@@ -259,12 +259,12 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
         h: o - v.value.height
       }, f = t.value.zoomAnimationFrames;
       let A = 0;
-      function Ge() {
-        Z.value = !0, v.value.startX += b.x / f, v.value.startY += b.y / f, v.value.width += b.w / f, v.value.height += b.h / f, A += 1, A < f ? ct.value = requestAnimationFrame(Ge) : Z.value = !1;
+      function Qe() {
+        Z.value = !0, v.value.startX += b.x / f, v.value.startY += b.y / f, v.value.width += b.w / f, v.value.height += b.h / f, A += 1, A < f ? ht.value = requestAnimationFrame(Qe) : Z.value = !1;
       }
-      Ge();
+      Qe();
     }
-    function N(l) {
+    function O(l) {
       if (!Z.value)
         if (p.value && d.value === l)
           J({
@@ -318,7 +318,7 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
           p.value = !0;
         }
     }
-    const ht = g(() => {
+    const yt = g(() => {
       const l = t.value.style.chart.layout.grid.graduations.steps, u = e.value.usableWidth / (l * 2), a = e.value.top, o = [];
       for (let r = 0; r < l; r += 1)
         o.push({
@@ -329,7 +329,7 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
           opacity: Math.round((r + 1) / l * 20)
         });
       return o;
-    }), q = g(() => {
+    }), C = g(() => {
       let l = t.value.style.chart.layout.grid.xAxis.max, u = t.value.style.chart.layout.grid.xAxis.min, a = t.value.style.chart.layout.grid.yAxis.max, o = t.value.style.chart.layout.grid.yAxis.min;
       return t.value.style.chart.layout.grid.xAxis.auto && (l = Math.max(...I.value.flatMap((r) => r.series.map((b) => b.x))), u = Math.min(...I.value.flatMap((r) => r.series.map((b) => b.x)))), t.value.style.chart.layout.grid.yAxis.auto && (a = Math.max(...I.value.flatMap((r) => r.series.map((b) => b.y))), o = Math.min(...I.value.flatMap((r) => r.series.map((b) => b.y)))), {
         x: {
@@ -341,29 +341,29 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
           min: o
         }
       };
-    }), O = y([]), I = g(() => _e.value.map((l, u) => ({
+    }), R = y([]), I = g(() => qe.value.map((l, u) => ({
       ...l,
-      series: At({
+      series: Wt({
         data: l.series,
         threshold: t.value.downsample.threshold
       }),
-      id: `cat_${u}_${z.value}`,
-      color: Tt(l.color) || Ye.value[u] || ye[u]
-    }))), yt = g(() => I.value.filter((l) => !O.value.includes(l.id))), bt = g(() => I.value.map((l, u) => ({
+      id: `cat_${u}_${w.value}`,
+      color: Xt(l.color) || Me.value[u] || ye[u]
+    }))), bt = g(() => I.value.filter((l) => !R.value.includes(l.id))), ft = g(() => I.value.map((l, u) => ({
       ...l,
       shape: l.shape || "circle",
       series: l.series.map((a) => ({
         ...a,
-        x: Me(a.x),
-        y: Ne(a.y),
+        x: Ne(a.x),
+        y: Oe(a.y),
         xValue: a.x,
         yValue: a.y,
-        quadrantSide: Re({ x: a.x, y: a.y }),
+        quadrantSide: Fe({ x: a.x, y: a.y }),
         categoryName: l.name,
         shape: l.shape,
         color: l.color
       }))
-    }))), S = g(() => (_e.value.forEach((l, u) => {
+    }))), z = g(() => (qe.value.forEach((l, u) => {
       l.series.forEach((a, o) => {
         [null, void 0].includes(a.x) && Q({
           componentName: "VueUiQuadrant",
@@ -381,43 +381,43 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
           debug: H.value
         });
       });
-    }), yt.value.map((l, u) => ({
+    }), bt.value.map((l, u) => ({
       ...l,
       shape: l.shape || "circle",
-      color: l.color || Ye.value[u] || ye[u],
+      color: l.color || Me.value[u] || ye[u],
       series: l.series.map((a) => ({
         ...a,
-        x: Me(a.x),
-        y: Ne(a.y),
+        x: Ne(a.x),
+        y: Oe(a.y),
         xValue: a.x,
         yValue: a.y,
-        quadrantSide: Re({ x: a.x, y: a.y }),
+        quadrantSide: Fe({ x: a.x, y: a.y }),
         categoryName: l.name,
         shape: l.shape,
         color: l.color,
-        uid: je()
+        uid: Ze()
       }))
     }))));
-    function Me(l) {
+    function Ne(l) {
       if (l >= 0) {
-        const u = l / q.value.x.max;
+        const u = l / C.value.x.max;
         return e.value.centerX + e.value.usableWidth / 2 * u;
       } else {
-        const u = Math.abs(l) / Math.abs(q.value.x.min);
+        const u = Math.abs(l) / Math.abs(C.value.x.min);
         return e.value.centerX - e.value.usableWidth / 2 * u;
       }
     }
-    function Ne(l) {
+    function Oe(l) {
       if (l >= 0) {
-        const u = l / q.value.y.max;
+        const u = l / C.value.y.max;
         return e.value.centerY + (1 - e.value.usableHeight / 2 * u);
       } else {
-        const u = Math.abs(l) / Math.abs(q.value.y.min);
+        const u = Math.abs(l) / Math.abs(C.value.y.min);
         return e.value.centerY - (1 - e.value.usableHeight / 2 * u);
       }
     }
     const K = g(() => {
-      const l = S.value.flatMap((f) => f.series.map((A) => ({
+      const l = z.value.flatMap((f) => f.series.map((A) => ({
         x: A.xValue,
         y: A.yValue,
         name: A.name,
@@ -472,19 +472,19 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
       return { head: l, body: u, config: a, colNames: l };
     });
     function ve(l) {
-      O.value.includes(l) ? O.value = O.value.filter((a) => a !== l) : O.value.push(l);
-      const u = Pe();
+      R.value.includes(l) ? R.value = R.value.filter((a) => a !== l) : R.value.push(l);
+      const u = He();
       oe("selectLegend", u);
     }
-    const Oe = g(() => bt.value.map((l) => ({
+    const Re = g(() => ft.value.map((l) => ({
       name: l.name,
       shape: l.shape,
       color: l.color,
       id: l.id,
-      opacity: O.value.includes(l.id) ? 0.5 : 1,
+      opacity: R.value.includes(l.id) ? 0.5 : 1,
       segregate: () => ve(l.id),
-      isSegregated: O.value.includes(l.id)
-    }))), ft = g(() => ({
+      isSegregated: R.value.includes(l.id)
+    }))), pt = g(() => ({
       cy: "quadrant-div-legend",
       backgroundColor: t.value.style.chart.legend.backgroundColor,
       color: t.value.style.chart.legend.color,
@@ -492,7 +492,7 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
       paddingBottom: 12,
       fontWeight: t.value.style.chart.legend.bold ? "bold" : ""
     }));
-    function Re(l) {
+    function Fe(l) {
       switch (!0) {
         case (l.x >= 0 && l.y >= 0):
           return "tr";
@@ -507,27 +507,27 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
       }
     }
     const te = y(null), le = y(null), de = y(null);
-    function Fe(l, u, a) {
+    function Be(l, u, a) {
       t.value.events.datapointEnter && t.value.events.datapointEnter({ datapoint: u, seriesIndex: a }), te.value = u.uid, le.value = {
         color: l.color,
         shape: l.shape
       }, de.value = {
         datapoint: u,
         seriesIndex: a,
-        series: S.value,
+        series: z.value,
         config: t.value
       }, se.value = !0;
       const o = t.value.style.chart.tooltip.customFormat;
-      if (Ft(o) && Bt(() => o({
+      if (Vt(o) && Pt(() => o({
         seriesIndex: a,
         datapoint: u,
-        series: S.value,
+        series: z.value,
         config: t.value
       })))
         re.value = o({
           seriesIndex: a,
           datapoint: u,
-          series: S.value,
+          series: z.value,
           config: t.value
         });
       else {
@@ -551,10 +551,10 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
         )}</b></div>`, re.value = `<div style="text-align:left;font-size:${t.value.style.chart.tooltip.fontSize}px">${r}</div>`;
       }
     }
-    function Be(l, u) {
+    function Ve(l, u) {
       se.value = !1, te.value = null, le.value = null, t.value.events.datapointLeave && t.value.events.datapointLeave({ datapoint: l, seriesIndex: u });
     }
-    function Ve(l, u, a) {
+    function Pe(l, u, a) {
       t.value.events.datapointClick && t.value.events.datapointClick({ datapoint: u, seriesIndex: a });
       const o = {
         category: l.name,
@@ -569,7 +569,7 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
     }
     function j(l) {
       if (!l) return;
-      const u = S.value.flatMap((o) => o.series.filter((r) => r.quadrantSide === l).map((r) => ({
+      const u = z.value.flatMap((o) => o.series.filter((r) => r.quadrantSide === l).map((r) => ({
         category: r.categoryName,
         itemName: r.name,
         x: r.xValue,
@@ -581,7 +581,7 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
       };
       oe("selectSide", a);
     }
-    const w = g(() => ({
+    const _ = g(() => ({
       TL: {
         tl: {
           x: e.value.left + e.value.usableWidth / 4 - 20,
@@ -687,8 +687,8 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
         }
       }
     }));
-    function Pe() {
-      return S.value.map((l) => ({
+    function He() {
+      return z.value.map((l) => ({
         color: l.color,
         name: l.name,
         shape: l.shape,
@@ -701,32 +701,32 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
         }))
       }));
     }
-    function He(l = null) {
-      Lt(() => {
-        const u = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [""]], a = K.value.head, o = K.value.body, r = u.concat([a]).concat(o), b = Ot(r);
-        l ? l(b) : Rt({ csvContent: b, title: t.value.style.chart.title.text || "vue-ui-quadrant" });
+    function Ie(l = null) {
+      _t(() => {
+        const u = [[t.value.style.chart.title.text], [t.value.style.chart.title.subtitle.text], [""]], a = K.value.head, o = K.value.body, r = u.concat([a]).concat(o), b = Ft(r);
+        l ? l(b) : Bt({ csvContent: b, title: t.value.style.chart.title.text || "vue-ui-quadrant" });
       });
     }
     const E = y(!1);
-    function Ie(l) {
+    function Ee(l) {
       E.value = l, fe.value += 1;
     }
-    function Ee() {
+    function De() {
       $.value.showTable = !$.value.showTable;
     }
-    function De() {
+    function Ue() {
       $.value.plotLabels.show = !$.value.plotLabels.show;
     }
-    function Ue() {
+    function Ge() {
       $.value.showTooltip = !$.value.showTooltip;
     }
     const ae = y(!1);
     function ce() {
       ae.value = !ae.value;
     }
-    async function pt({ scale: l = 2 } = {}) {
-      if (!Y.value) return;
-      const { width: u, height: a } = Y.value.getBoundingClientRect(), o = u / a, { imageUri: r, base64: b } = await Dt({ domElement: Y.value, base64: !0, img: !0, scale: l });
+    async function gt({ scale: l = 2 } = {}) {
+      if (!M.value) return;
+      const { width: u, height: a } = M.value.getBoundingClientRect(), o = u / a, { imageUri: r, base64: b } = await Gt({ domElement: M.value, base64: !0, img: !0, scale: l });
       return {
         imageUri: r,
         base64: b,
@@ -736,48 +736,48 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
         aspectRatio: o
       };
     }
-    return tt({
-      getData: Pe,
-      getImage: pt,
-      generatePdf: Xe,
-      generateCsv: He,
-      generateImage: We,
-      toggleTable: Ee,
-      toggleLabels: De,
-      toggleTooltip: Ue,
+    return lt({
+      getData: He,
+      getImage: gt,
+      generatePdf: We,
+      generateCsv: Ie,
+      generateImage: Ye,
+      toggleTable: De,
+      toggleLabels: Ue,
+      toggleTooltip: Ge,
       toggleAnnotator: ce,
-      toggleFullscreen: Ie
+      toggleFullscreen: Ee
     }), (l, u) => (s(), n("div", {
       class: T(`vue-ui-quadrant ${E.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${t.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       ref_key: "quadrantChart",
-      ref: Y,
-      id: `vue-ui-quadrant_${z.value}`,
-      style: _(`font-family:${t.value.style.fontFamily};width:100%; text-align:center;background:${t.value.style.chart.backgroundColor};${t.value.responsive ? "height: 100%" : ""}`),
-      onMouseenter: u[14] || (u[14] = () => i(qe)(!0)),
-      onMouseleave: u[15] || (u[15] = () => i(qe)(!1))
+      ref: M,
+      id: `vue-ui-quadrant_${w.value}`,
+      style: q(`font-family:${t.value.style.fontFamily};width:100%; text-align:center;background:${t.value.style.chart.backgroundColor};${t.value.responsive ? "height: 100%" : ""}`),
+      onMouseenter: u[14] || (u[14] = () => i(Ce)(!0)),
+      onMouseleave: u[15] || (u[15] = () => i(Ce)(!1))
     }, [
-      t.value.userOptions.buttons.annotator ? (s(), R(i(st), {
+      t.value.userOptions.buttons.annotator ? (s(), X(i(rt), {
         key: 0,
-        svgRef: i(Se),
+        svgRef: i(ze),
         backgroundColor: t.value.style.chart.backgroundColor,
         color: t.value.style.chart.color,
         active: ae.value,
         onClose: ce
-      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : c("", !0),
-      dt.value ? (s(), n("div", {
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : h("", !0),
+      ct.value ? (s(), n("div", {
         key: 1,
         ref_key: "noTitle",
         ref: xe,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : c("", !0),
+      }, null, 512)) : h("", !0),
       t.value.style.chart.title.text ? (s(), n("div", {
         key: 2,
         ref_key: "chartTitle",
         ref: pe,
         style: "width:100%;background:transparent;padding-bottom:12px"
       }, [
-        (s(), R(Ut, {
+        (s(), X(Qt, {
           key: `table_${$e.value}`,
           config: {
             title: {
@@ -790,16 +790,19 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : c("", !0),
-      t.value.userOptions.show && be.value && (i(Ce) || i(ne)) ? (s(), R(i(rt), {
+      ], 512)) : h("", !0),
+      c("div", {
+        id: `legend-top-${w.value}`
+      }, null, 8, tl),
+      t.value.userOptions.show && be.value && (i(Se) || i(ne)) ? (s(), X(i(nt), {
         ref_key: "details",
-        ref: vt,
+        ref: dt,
         key: `user_options_${fe.value}`,
         backgroundColor: t.value.style.chart.backgroundColor,
         color: t.value.style.chart.color,
-        isImaging: i(Ae),
-        isPrinting: i(Te),
-        uid: z.value,
+        isImaging: i(Xe),
+        isPrinting: i(Ae),
+        uid: w.value,
         hasTooltip: t.value.userOptions.buttons.tooltip && t.value.style.chart.tooltip.show,
         hasPdf: t.value.userOptions.buttons.pdf,
         hasImg: t.value.userOptions.buttons.img,
@@ -810,24 +813,24 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
         isFullscreen: E.value,
         isTooltip: $.value.showTooltip,
         titles: { ...t.value.userOptions.buttonTitles },
-        chartElement: Y.value,
+        chartElement: M.value,
         position: t.value.userOptions.position,
         hasAnnotator: t.value.userOptions.buttons.annotator,
         isAnnotation: ae.value,
         callbacks: t.value.userOptions.callbacks,
         printScale: t.value.userOptions.print.scale,
-        onToggleFullscreen: Ie,
-        onGeneratePdf: i(Xe),
-        onGenerateCsv: He,
-        onGenerateImage: i(We),
-        onToggleTable: Ee,
-        onToggleLabels: De,
-        onToggleTooltip: Ue,
+        onToggleFullscreen: Ee,
+        onGeneratePdf: i(We),
+        onGenerateCsv: Ie,
+        onGenerateImage: i(Ye),
+        onToggleTable: De,
+        onToggleLabels: Ue,
+        onToggleTooltip: Ge,
         onToggleAnnotator: ce,
-        style: _({
-          visibility: i(Ce) ? i(ne) ? "visible" : "hidden" : "visible"
+        style: q({
+          visibility: i(Se) ? i(ne) ? "visible" : "hidden" : "visible"
         })
-      }, $t({ _: 2 }, [
+      }, kt({ _: 2 }, [
         l.$slots.menuIcon ? {
           name: "menuIcon",
           fn: m(({ isOpen: a, color: o }) => [
@@ -891,17 +894,17 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
           ]),
           key: "8"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : c("", !0),
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasLabel", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
       (s(), n("svg", {
         ref_key: "svgRef",
-        ref: Se,
-        xmlns: i(Xt),
+        ref: ze,
+        xmlns: i(Yt),
         class: T({ "vue-data-ui-fullscreen--on": E.value, "vue-data-ui-fulscreen--off": !E.value }),
         viewBox: `${v.value.startX} ${v.value.startY} ${v.value.width} ${v.value.height}`,
-        style: _(`max-width:100%;overflow:hidden;background:transparent;color:${t.value.style.chart.color}`),
-        id: `svg_${z.value}`
+        style: q(`max-width:100%;overflow:hidden;background:transparent;color:${t.value.style.chart.color}`),
+        id: `svg_${w.value}`
       }, [
-        he(i(nt)),
+        he(i(it)),
         l.$slots["chart-background"] ? (s(), n("foreignObject", {
           key: 0,
           x: v.value.startX,
@@ -913,28 +916,28 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
           }
         }, [
           x(l.$slots, "chart-background", {}, void 0, !0)
-        ], 8, el)) : c("", !0),
-        h("defs", null, [
-          (s(!0), n(C, null, X(S.value, (a, o) => (s(), n("radialGradient", {
+        ], 8, al)) : h("", !0),
+        c("defs", null, [
+          (s(!0), n(S, null, W(z.value, (a, o) => (s(), n("radialGradient", {
             cx: "50%",
             cy: "50%",
             r: "50%",
             fx: "50%",
             fy: "50%",
-            id: `quadrant_gradient_${z.value}_${o}`
+            id: `quadrant_gradient_${w.value}_${o}`
           }, [
-            h("stop", {
+            c("stop", {
               offset: "0%",
-              "stop-color": i(ue)(i(Wt)(a.color, 0.05), t.value.style.chart.layout.areas.opacity)
-            }, null, 8, ll),
-            h("stop", {
+              "stop-color": i(ue)(i(Mt)(a.color, 0.05), t.value.style.chart.layout.areas.opacity)
+            }, null, 8, ol),
+            c("stop", {
               offset: "100%",
               "stop-color": i(ue)(a.color, t.value.style.chart.layout.areas.opacity)
-            }, null, 8, al)
-          ], 8, tl))), 256))
+            }, null, 8, sl)
+          ], 8, ul))), 256))
         ]),
-        t.value.style.chart.layout.grid.graduations.show ? (s(), n("g", ul, [
-          (s(!0), n(C, null, X(ht.value, (a) => (s(), n("rect", {
+        t.value.style.chart.layout.grid.graduations.show ? (s(), n("g", rl, [
+          (s(!0), n(S, null, W(yt.value, (a) => (s(), n("rect", {
             fill: t.value.style.chart.layout.grid.graduations.fill ? i(ue)(t.value.style.chart.layout.grid.graduations.color, a.opacity) : "none",
             x: a.x,
             y: a.y,
@@ -943,47 +946,47 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
             "stroke-width": t.value.style.chart.layout.grid.graduations.strokeWidth,
             stroke: t.value.style.chart.layout.grid.graduations.stroke,
             rx: t.value.style.chart.layout.grid.graduations.roundingForce
-          }, null, 8, ol))), 256))
-        ])) : c("", !0),
-        h("line", {
+          }, null, 8, nl))), 256))
+        ])) : h("", !0),
+        c("line", {
           x1: e.value.left,
           y1: e.value.centerY,
           x2: e.value.right,
           y2: e.value.centerY,
           stroke: t.value.style.chart.layout.grid.stroke,
           "stroke-width": t.value.style.chart.layout.grid.strokeWidth
-        }, null, 8, sl),
-        h("line", {
+        }, null, 8, il),
+        c("line", {
           x1: e.value.centerX,
           y1: e.value.top,
           x2: e.value.centerX,
           y2: e.value.bottom,
           stroke: t.value.style.chart.layout.grid.stroke,
           "stroke-width": t.value.style.chart.layout.grid.strokeWidth
-        }, null, 8, rl),
-        t.value.style.chart.layout.grid.showArrows ? (s(), n("g", nl, [
-          h("polygon", {
+        }, null, 8, vl),
+        t.value.style.chart.layout.grid.showArrows ? (s(), n("g", dl, [
+          c("polygon", {
             points: `${e.value.right - 8},${e.value.centerY - 6} ${e.value.right},${e.value.centerY} ${e.value.right - 8},${e.value.centerY + 6}`,
             fill: t.value.style.chart.layout.grid.stroke,
             stroke: "none"
-          }, null, 8, il),
-          h("polygon", {
+          }, null, 8, cl),
+          c("polygon", {
             points: `${e.value.left + 8},${e.value.centerY - 6} ${e.value.left},${e.value.centerY} ${e.value.left + 8},${e.value.centerY + 6}`,
             fill: t.value.style.chart.layout.grid.stroke,
             stroke: "none"
-          }, null, 8, vl),
-          h("polygon", {
+          }, null, 8, hl),
+          c("polygon", {
             points: `${e.value.centerX - 6},${e.value.top + 8} ${e.value.centerX},${e.value.top} ${e.value.centerX + 6},${e.value.top + 8}`,
             fill: t.value.style.chart.layout.grid.stroke,
             stroke: "none"
-          }, null, 8, dl),
-          h("polygon", {
+          }, null, 8, yl),
+          c("polygon", {
             points: `${e.value.centerX - 6},${e.value.bottom - 8} ${e.value.centerX},${e.value.bottom} ${e.value.centerX + 6},${e.value.bottom - 8}`,
             fill: t.value.style.chart.layout.grid.stroke,
             stroke: "none"
-          }, null, 8, cl)
-        ])) : c("", !0),
-        t.value.style.chart.layout.labels.quadrantLabels.show && !p.value ? (s(), n("g", hl, [
+          }, null, 8, bl)
+        ])) : h("", !0),
+        t.value.style.chart.layout.labels.quadrantLabels.show && !p.value ? (s(), n("g", fl, [
           t.value.style.chart.layout.labels.quadrantLabels.tl.text ? (s(), n("text", {
             key: 0,
             x: 0,
@@ -991,9 +994,9 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
             "text-anchor": "start",
             fill: t.value.style.chart.layout.labels.quadrantLabels.tl.color,
             "font-size": t.value.style.chart.layout.labels.quadrantLabels.tl.fontSize,
-            style: _(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.tl.bold ? "bold" : ""}`),
+            style: q(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.tl.bold ? "bold" : ""}`),
             onClick: u[0] || (u[0] = (a) => j("tl"))
-          }, L(t.value.style.chart.layout.labels.quadrantLabels.tl.text), 13, yl)) : c("", !0),
+          }, L(t.value.style.chart.layout.labels.quadrantLabels.tl.text), 13, pl)) : h("", !0),
           t.value.style.chart.layout.labels.quadrantLabels.tr.text ? (s(), n("text", {
             key: 1,
             x: e.value.width,
@@ -1001,9 +1004,9 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
             "text-anchor": "end",
             fill: t.value.style.chart.layout.labels.quadrantLabels.tr.color,
             "font-size": t.value.style.chart.layout.labels.quadrantLabels.tr.fontSize,
-            style: _(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.tr.bold ? "bold" : ""}`),
+            style: q(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.tr.bold ? "bold" : ""}`),
             onClick: u[1] || (u[1] = (a) => j("tr"))
-          }, L(t.value.style.chart.layout.labels.quadrantLabels.tr.text), 13, bl)) : c("", !0),
+          }, L(t.value.style.chart.layout.labels.quadrantLabels.tr.text), 13, gl)) : h("", !0),
           t.value.style.chart.layout.labels.quadrantLabels.br.text ? (s(), n("text", {
             key: 2,
             x: e.value.width,
@@ -1011,9 +1014,9 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
             "text-anchor": "end",
             fill: t.value.style.chart.layout.labels.quadrantLabels.br.color,
             "font-size": t.value.style.chart.layout.labels.quadrantLabels.br.fontSize,
-            style: _(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.br.bold ? "bold" : ""}`),
+            style: q(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.br.bold ? "bold" : ""}`),
             onClick: u[2] || (u[2] = (a) => j("br"))
-          }, L(t.value.style.chart.layout.labels.quadrantLabels.br.text), 13, fl)) : c("", !0),
+          }, L(t.value.style.chart.layout.labels.quadrantLabels.br.text), 13, ml)) : h("", !0),
           t.value.style.chart.layout.labels.quadrantLabels.bl.text ? (s(), n("text", {
             key: 3,
             x: 0,
@@ -1021,12 +1024,12 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
             "text-anchor": "start",
             fill: t.value.style.chart.layout.labels.quadrantLabels.bl.color,
             "font-size": t.value.style.chart.layout.labels.quadrantLabels.bl.fontSize,
-            style: _(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.bl.bold ? "bold" : ""}`),
+            style: q(`font-weight:${t.value.style.chart.layout.labels.quadrantLabels.bl.bold ? "bold" : ""}`),
             onClick: u[3] || (u[3] = (a) => j("bl"))
-          }, L(t.value.style.chart.layout.labels.quadrantLabels.bl.text), 13, pl)) : c("", !0)
-        ])) : c("", !0),
-        t.value.style.chart.layout.labels.axisLabels.show ? (s(), n("g", gl, [
-          h("text", {
+          }, L(t.value.style.chart.layout.labels.quadrantLabels.bl.text), 13, xl)) : h("", !0)
+        ])) : h("", !0),
+        t.value.style.chart.layout.labels.axisLabels.show ? (s(), n("g", $l, [
+          c("text", {
             x: e.value.centerX,
             y: e.value.top - e.value.padding / 6,
             "text-anchor": "middle",
@@ -1034,20 +1037,20 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
             fill: t.value.style.chart.layout.labels.axisLabels.color.positive
           }, L(i(F)(
             t.value.style.chart.layout.labels.plotLabels.y.formatter,
-            q.value.y.max,
+            C.value.y.max,
             i(B)({
-              v: q.value.y.max,
+              v: C.value.y.max,
               r: t.value.style.chart.layout.labels.plotLabels.rounding
             })
-          )), 9, ml),
-          h("text", {
+          )), 9, kl),
+          c("text", {
             x: e.value.centerX,
             y: e.value.top - e.value.padding / 2,
             "text-anchor": "middle",
             "font-size": t.value.style.chart.layout.labels.axisLabels.fontSize,
             fill: t.value.style.chart.layout.labels.axisLabels.color.positive
-          }, L(t.value.style.chart.layout.grid.yAxis.name), 9, xl),
-          h("text", {
+          }, L(t.value.style.chart.layout.grid.yAxis.name), 9, Ll),
+          c("text", {
             x: e.value.centerX,
             y: e.value.bottom + e.value.padding * 0.35,
             "text-anchor": "middle",
@@ -1055,118 +1058,118 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
             fill: t.value.style.chart.layout.labels.axisLabels.color.negative
           }, L(i(F)(
             t.value.style.chart.layout.labels.plotLabels.y.formatter,
-            q.value.y.min,
+            C.value.y.min,
             i(B)({
-              v: q.value.y.min,
+              v: C.value.y.min,
               r: t.value.style.chart.layout.labels.plotLabels.rounding
             })
-          )), 9, $l),
-          h("text", {
-            id: `xLabelMin_${z.value}`,
+          )), 9, wl),
+          c("text", {
+            id: `xLabelMin_${w.value}`,
             "text-anchor": "middle",
             "font-size": t.value.style.chart.layout.labels.axisLabels.fontSize,
             transform: `translate(${e.value.padding - t.value.style.chart.layout.labels.axisLabels.fontSize}, ${e.value.height / 2}), rotate(-90)`,
             fill: t.value.style.chart.layout.labels.axisLabels.color.negative
           }, L(i(F)(
             t.value.style.chart.layout.labels.plotLabels.x.formatter,
-            q.value.x.min,
+            C.value.x.min,
             i(B)({
-              v: q.value.x.min,
+              v: C.value.x.min,
               r: t.value.style.chart.layout.labels.plotLabels.rounding
             })
-          )), 9, kl),
-          h("text", {
-            id: `xLabelMax_${z.value}`,
+          )), 9, _l),
+          c("text", {
+            id: `xLabelMax_${w.value}`,
             "text-anchor": "middle",
             "font-size": t.value.style.chart.layout.labels.axisLabels.fontSize,
             transform: `translate(${e.value.width - e.value.padding + t.value.style.chart.layout.labels.axisLabels.fontSize}, ${e.value.height / 2}), rotate(90)`,
             fill: t.value.style.chart.layout.labels.axisLabels.color.positive
           }, L(i(F)(
             t.value.style.chart.layout.labels.plotLabels.x.formatter,
-            q.value.x.max,
+            C.value.x.max,
             i(B)({
-              v: q.value.x.max,
+              v: C.value.x.max,
               r: t.value.style.chart.layout.labels.plotLabels.rounding
             })
-          )), 9, Ll),
-          h("text", {
-            id: `xLabelMaxName_${z.value}`,
+          )), 9, ql),
+          c("text", {
+            id: `xLabelMaxName_${w.value}`,
             "text-anchor": "middle",
             "font-size": t.value.style.chart.layout.labels.axisLabels.fontSize,
             transform: `translate(${e.value.width - t.value.style.chart.layout.labels.axisLabels.fontSize}, ${e.value.height / 2}), rotate(90)`,
             fill: t.value.style.chart.layout.labels.axisLabels.color.positive
-          }, L(t.value.style.chart.layout.grid.xAxis.name), 9, wl)
-        ])) : c("", !0),
-        t.value.style.chart.layout.areas.show ? (s(), n("g", _l, [
-          (s(!0), n(C, null, X(S.value, (a, o) => (s(), n("g", null, [
+          }, L(t.value.style.chart.layout.grid.xAxis.name), 9, Cl)
+        ])) : h("", !0),
+        t.value.style.chart.layout.areas.show ? (s(), n("g", Sl, [
+          (s(!0), n(S, null, W(z.value, (a, o) => (s(), n("g", null, [
             a.series.length > 2 ? (s(), n("polygon", {
               key: 0,
               "data-cy-quadrant-area": "",
-              fill: t.value.style.chart.layout.areas.useGradient ? `url(#quadrant_gradient_${z.value}_${o})` : i(ue)(a.color, t.value.style.chart.layout.areas.opacity),
-              points: i(Yt)(a)
-            }, null, 8, ql)) : c("", !0)
+              fill: t.value.style.chart.layout.areas.useGradient ? `url(#quadrant_gradient_${w.value}_${o})` : i(ue)(a.color, t.value.style.chart.layout.areas.opacity),
+              points: i(Nt)(a)
+            }, null, 8, zl)) : h("", !0)
           ]))), 256))
-        ])) : c("", !0),
-        h("g", null, [
-          h("rect", {
-            onClick: u[4] || (u[4] = (a) => N("TL")),
+        ])) : h("", !0),
+        c("g", null, [
+          c("rect", {
+            onClick: u[4] || (u[4] = (a) => O("TL")),
             x: e.value.left,
             y: e.value.top,
             width: e.value.usableWidth / 2 <= 0 ? 1e-3 : e.value.usableWidth / 2,
             height: e.value.usableHeight / 2 <= 0 ? 1e-3 : e.value.usableHeight / 2,
             fill: "transparent",
             class: T({ "vue-data-ui-zoom-plus": !p.value, "vue-data-ui-zoom-minus": p.value })
-          }, null, 10, Cl),
-          h("rect", {
-            onClick: u[5] || (u[5] = (a) => N("TR")),
+          }, null, 10, Tl),
+          c("rect", {
+            onClick: u[5] || (u[5] = (a) => O("TR")),
             x: e.value.centerX,
             y: e.value.top,
             width: e.value.usableWidth / 2 <= 0 ? 1e-3 : e.value.usableWidth / 2,
             height: e.value.usableHeight / 2 <= 0 ? 1e-3 : e.value.usableHeight / 2,
             fill: "transparent",
             class: T({ "vue-data-ui-zoom-plus": !p.value, "vue-data-ui-zoom-minus": p.value })
-          }, null, 10, Sl),
-          h("rect", {
-            onClick: u[6] || (u[6] = (a) => N("BR")),
+          }, null, 10, Al),
+          c("rect", {
+            onClick: u[6] || (u[6] = (a) => O("BR")),
             x: e.value.centerX,
             y: e.value.centerY,
             width: e.value.usableWidth / 2 <= 0 ? 1e-3 : e.value.usableWidth / 2,
             height: e.value.usableHeight / 2 <= 0 ? 1e-3 : e.value.usableHeight / 2,
             fill: "transparent",
             class: T({ "vue-data-ui-zoom-plus": !p.value, "vue-data-ui-zoom-minus": p.value })
-          }, null, 10, zl),
-          h("rect", {
-            onClick: u[7] || (u[7] = (a) => N("BL")),
+          }, null, 10, Xl),
+          c("rect", {
+            onClick: u[7] || (u[7] = (a) => O("BL")),
             x: e.value.left,
             y: e.value.centerY,
             width: e.value.usableWidth / 2 <= 0 ? 1e-3 : e.value.usableWidth / 2,
             height: e.value.usableHeight / 2 <= 0 ? 1e-3 : e.value.usableHeight / 2,
             fill: "transparent",
             class: T({ "vue-data-ui-zoom-plus": !p.value, "vue-data-ui-zoom-minus": p.value })
-          }, null, 10, Tl)
+          }, null, 10, Wl)
         ]),
-        t.value.style.chart.layout.labels.plotLabels.showAsTag ? (s(), n(C, { key: 7 }, [
-          $.value.plotLabels.show ? (s(), n("g", Yl, [
-            (s(!0), n(C, null, X(S.value, (a, o) => (s(), n(C, null, [
-              (s(!0), n(C, null, X(a.series, (r) => (s(), n("foreignObject", {
+        t.value.style.chart.layout.labels.plotLabels.showAsTag ? (s(), n(S, { key: 7 }, [
+          $.value.plotLabels.show ? (s(), n("g", Ol, [
+            (s(!0), n(S, null, W(z.value, (a, o) => (s(), n(S, null, [
+              (s(!0), n(S, null, W(a.series, (r) => (s(), n("foreignObject", {
                 style: { overflow: "visible" },
                 height: "10",
                 width: "100",
                 x: r.x - 50,
                 y: r.y - t.value.style.chart.layout.labels.plotLabels.fontSize,
-                onMouseover: (b) => Fe(a, r, o),
-                onMouseleave: (b) => Be(r, o),
-                onClick: (b) => Ve(a, r, o)
+                onMouseover: (b) => Be(a, r, o),
+                onMouseleave: (b) => Ve(r, o),
+                onClick: (b) => Pe(a, r, o)
               }, [
-                h("div", {
-                  style: _(`color:${i(Nt)(a.color)};margin: 0 auto; font-size:${t.value.style.chart.layout.labels.plotLabels.fontSize}px; text-align:center;background:${a.color}; padding: 2px 4px; border-radius: 12px; height: fit-content;`)
+                c("div", {
+                  style: q(`color:${i(Rt)(a.color)};margin: 0 auto; font-size:${t.value.style.chart.layout.labels.plotLabels.fontSize}px; text-align:center;background:${a.color}; padding: 2px 4px; border-radius: 12px; height: fit-content;`)
                 }, L(r.name), 5)
-              ], 40, Ml))), 256))
+              ], 40, Rl))), 256))
             ], 64))), 256))
-          ])) : c("", !0)
-        ], 64)) : (s(), n(C, { key: 6 }, [
-          (s(!0), n(C, null, X(S.value, (a, o) => (s(), n("g", null, [
-            (s(!0), n(C, null, X(a.series, (r) => (s(), R(Ke, {
+          ])) : h("", !0)
+        ], 64)) : (s(), n(S, { key: 6 }, [
+          (s(!0), n(S, null, W(z.value, (a, o) => (s(), n("g", null, [
+            (s(!0), n(S, null, W(a.series, (r) => (s(), X(et, {
               color: a.color,
               isSelected: te.value && r.uid === te.value,
               plot: r,
@@ -1174,14 +1177,14 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
               shape: a.shape,
               stroke: t.value.style.chart.layout.plots.outline ? t.value.style.chart.layout.plots.outlineColor : "none",
               strokeWidth: t.value.style.chart.layout.plots.outlineWidth,
-              onMouseenter: (b) => Fe(a, r, o),
-              onMouseleave: (b) => Be(r, o),
-              onClick: (b) => Ve(a, r, o)
+              onMouseenter: (b) => Be(a, r, o),
+              onMouseleave: (b) => Ve(r, o),
+              onClick: (b) => Pe(a, r, o)
             }, null, 8, ["color", "isSelected", "plot", "radius", "shape", "stroke", "strokeWidth", "onMouseenter", "onMouseleave", "onClick"]))), 256))
           ]))), 256)),
-          $.value.plotLabels.show ? (s(), n("g", Al, [
-            (s(!0), n(C, null, X(S.value, (a) => (s(), n("g", null, [
-              (s(!0), n(C, null, X(a.series, (o) => (s(), n("g", null, [
+          $.value.plotLabels.show ? (s(), n("g", Yl, [
+            (s(!0), n(S, null, W(z.value, (a) => (s(), n("g", null, [
+              (s(!0), n(S, null, W(a.series, (o) => (s(), n("g", null, [
                 String(o.name).includes(`
 `) ? (s(), n("text", {
                   key: 1,
@@ -1190,152 +1193,160 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
                   "text-anchor": "middle",
                   "font-size": t.value.style.chart.layout.labels.plotLabels.fontSize / (p.value ? 1.5 : 1),
                   fill: t.value.style.chart.layout.labels.plotLabels.color,
-                  innerHTML: i(Mt)({
+                  innerHTML: i(Ot)({
                     content: String(o.name),
                     fontSize: t.value.style.chart.layout.labels.plotLabels.fontSize / (p.value ? 1.5 : 1),
                     fill: t.value.style.chart.layout.labels.plotLabels.color,
                     x: o.x,
                     y: o.y + t.value.style.chart.layout.labels.plotLabels.offsetY + t.value.style.chart.layout.plots.radius
                   })
-                }, null, 8, Wl)) : (s(), n("text", {
+                }, null, 8, Nl)) : (s(), n("text", {
                   key: 0,
                   x: o.x,
                   y: o.y + t.value.style.chart.layout.labels.plotLabels.offsetY + t.value.style.chart.layout.plots.radius,
                   "text-anchor": "middle",
                   "font-size": t.value.style.chart.layout.labels.plotLabels.fontSize / (p.value ? 1.5 : 1),
                   fill: t.value.style.chart.layout.labels.plotLabels.color
-                }, L(o.name), 9, Xl))
+                }, L(o.name), 9, Ml))
               ]))), 256))
             ]))), 256))
-          ])) : c("", !0)
+          ])) : h("", !0)
         ], 64)),
-        p.value ? (s(), n("g", Nl, [
+        p.value ? (s(), n("g", Fl, [
           d.value === "TL" ? (s(), n("polygon", {
             key: 0,
             points: `${e.value.left - 1},${e.value.centerY} ${e.value.centerX},${e.value.centerY} ${e.value.centerX},${e.value.top - 1} ${e.value.right},${e.value.top - 1} ${e.value.right},${e.value.bottom} ${e.value.left - 1},${e.value.bottom} ${e.value.left - 1},${e.value.centerY}`,
             fill: t.value.style.chart.backgroundColor,
             style: { opacity: "1" }
-          }, null, 8, Ol)) : c("", !0),
+          }, null, 8, Bl)) : h("", !0),
           d.value === "TR" ? (s(), n("polygon", {
             key: 1,
             points: `${e.value.left},${e.value.top - 1} ${e.value.centerX},${e.value.top - 1} ${e.value.centerX},${e.value.centerY} ${e.value.right + 1},${e.value.centerY} ${e.value.right + 1},${e.value.bottom} ${e.value.left},${e.value.bottom} ${e.value.left},${e.value.top - 1}`,
             fill: t.value.style.chart.backgroundColor,
             style: { opacity: "1" }
-          }, null, 8, Rl)) : c("", !0),
+          }, null, 8, Vl)) : h("", !0),
           d.value === "BR" ? (s(), n("polygon", {
             key: 2,
             points: `${e.value.left},${e.value.top} ${e.value.right + 1},${e.value.top} ${e.value.right + 1},${e.value.centerY} ${e.value.centerX},${e.value.centerY} ${e.value.centerX},${e.value.bottom + 1} ${e.value.left},${e.value.bottom + 1} ${e.value.left},${e.value.top}`,
             fill: t.value.style.chart.backgroundColor,
             style: { opacity: "1" }
-          }, null, 8, Fl)) : c("", !0),
+          }, null, 8, Pl)) : h("", !0),
           d.value === "BL" ? (s(), n("polygon", {
             key: 3,
             points: `${e.value.left - 1},${e.value.top} ${e.value.right},${e.value.top} ${e.value.right},${e.value.bottom + 1} ${e.value.centerX},${e.value.bottom + 1} ${e.value.centerX},${e.value.centerY} ${e.value.left - 1},${e.value.centerY} ${e.value.left - 1},${e.value.top}`,
             fill: t.value.style.chart.backgroundColor,
             style: { opacity: "1" }
-          }, null, 8, Bl)) : c("", !0)
-        ])) : c("", !0),
-        d.value && !Z.value ? (s(), n("g", Vl, [
-          h("text", {
+          }, null, 8, Hl)) : h("", !0)
+        ])) : h("", !0),
+        d.value && !Z.value ? (s(), n("g", Il, [
+          c("text", {
             x: V.value.x,
             y: V.value.y - V.value.fontSize / 1.5,
             "font-size": V.value.fontSize / 1.5,
             fill: V.value.fill,
             "text-anchor": "middle",
             "font-weight": V.value.bold ? "bold" : "normal"
-          }, L(V.value.text), 9, Pl)
-        ])) : c("", !0),
-        p.value && d.value ? (s(), n("g", Hl, [
-          h("rect", {
-            x: w.value[d.value].tl.x,
-            y: w.value[d.value].tl.y,
+          }, L(V.value.text), 9, El)
+        ])) : h("", !0),
+        p.value && d.value ? (s(), n("g", Dl, [
+          c("rect", {
+            x: _.value[d.value].tl.x,
+            y: _.value[d.value].tl.y,
             height: "20",
             width: "20",
-            fill: w.value[d.value].tl.fill,
-            style: _(`cursor: pointer; opacity: ${d.value === "TL" ? 1 : 0.2}`),
-            onClick: u[8] || (u[8] = (a) => N("TL")),
+            fill: _.value[d.value].tl.fill,
+            style: q(`cursor: pointer; opacity: ${d.value === "TL" ? 1 : 0.2}`),
+            onClick: u[8] || (u[8] = (a) => O("TL")),
             class: T({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": d.value !== "TL" })
-          }, null, 14, Il),
-          h("rect", {
-            x: w.value[d.value].tr.x,
-            y: w.value[d.value].tr.y,
+          }, null, 14, Ul),
+          c("rect", {
+            x: _.value[d.value].tr.x,
+            y: _.value[d.value].tr.y,
             height: "20",
             width: "20",
-            fill: w.value[d.value].tr.fill,
-            style: _(`cursor: pointer; opacity: ${d.value === "TR" ? 1 : 0.2}`),
-            onClick: u[9] || (u[9] = (a) => N("TR")),
+            fill: _.value[d.value].tr.fill,
+            style: q(`cursor: pointer; opacity: ${d.value === "TR" ? 1 : 0.2}`),
+            onClick: u[9] || (u[9] = (a) => O("TR")),
             class: T({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": d.value !== "TR" })
-          }, null, 14, El),
-          h("rect", {
-            x: w.value[d.value].br.x,
-            y: w.value[d.value].br.y,
+          }, null, 14, Gl),
+          c("rect", {
+            x: _.value[d.value].br.x,
+            y: _.value[d.value].br.y,
             height: "20",
             width: "20",
-            fill: w.value[d.value].br.fill,
-            style: _(`cursor: pointer; opacity: ${d.value === "BR" ? 1 : 0.2}`),
-            onClick: u[10] || (u[10] = (a) => N("BR")),
+            fill: _.value[d.value].br.fill,
+            style: q(`cursor: pointer; opacity: ${d.value === "BR" ? 1 : 0.2}`),
+            onClick: u[10] || (u[10] = (a) => O("BR")),
             class: T({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": d.value !== "BR" })
-          }, null, 14, Dl),
-          h("rect", {
-            x: w.value[d.value].bl.x,
-            y: w.value[d.value].bl.y,
+          }, null, 14, Ql),
+          c("rect", {
+            x: _.value[d.value].bl.x,
+            y: _.value[d.value].bl.y,
             height: "20",
             width: "20",
-            fill: w.value[d.value].bl.fill,
-            style: _(`cursor: pointer; opacity: ${d.value === "BL" ? 1 : 0.2}`),
-            onClick: u[11] || (u[11] = (a) => N("BL")),
+            fill: _.value[d.value].bl.fill,
+            style: q(`cursor: pointer; opacity: ${d.value === "BL" ? 1 : 0.2}`),
+            onClick: u[11] || (u[11] = (a) => O("BL")),
             class: T({ "vue-ui-quadrant-mini-map-cell": !0, "vue-ui-quadrant-mini-map-cell-selectable": d.value !== "BL" })
-          }, null, 14, Ul),
-          h("path", {
+          }, null, 14, Jl),
+          c("path", {
             class: "vue-ui-quadrant-minimap-crosshairs",
             stroke: t.value.style.chart.backgroundColor,
             "stroke-width": 1,
-            d: w.value[d.value].crosshairs.horizontal
-          }, null, 8, Gl),
-          h("path", {
+            d: _.value[d.value].crosshairs.horizontal
+          }, null, 8, jl),
+          c("path", {
             class: "vue-ui-quadrant-minimap-crosshairs",
             stroke: t.value.style.chart.backgroundColor,
             "stroke-width": 1,
-            d: w.value[d.value].crosshairs.vertical
-          }, null, 8, Ql)
-        ])) : c("", !0),
+            d: _.value[d.value].crosshairs.vertical
+          }, null, 8, Zl)
+        ])) : h("", !0),
         x(l.$slots, "svg", { svg: e.value }, void 0, !0)
-      ], 14, Kt)),
-      l.$slots.watermark ? (s(), n("div", Jl, [
-        x(l.$slots, "watermark", U(G({ isPrinting: i(Te) || i(Ae) })), void 0, !0)
-      ])) : c("", !0),
-      h("div", {
-        ref_key: "chartLegend",
-        ref: ge
+      ], 14, ll)),
+      l.$slots.watermark ? (s(), n("div", Kl, [
+        x(l.$slots, "watermark", U(G({ isPrinting: i(Ae) || i(Xe) })), void 0, !0)
+      ])) : h("", !0),
+      c("div", {
+        id: `legend-bottom-${w.value}`
+      }, null, 8, ea),
+      we.value ? (s(), X(Lt, {
+        key: 5,
+        to: t.value.style.chart.legend.position === "top" ? `#legend-top-${w.value}` : `#legend-bottom-${w.value}`
       }, [
-        t.value.style.chart.legend.show ? (s(), R(Gt, {
-          key: `legend_${Le.value}`,
-          legendSet: Oe.value,
-          config: ft.value,
-          onClickMarker: u[12] || (u[12] = ({ legend: a }) => ve(a.id))
-        }, {
-          item: m(({ legend: a }) => [
-            i(we) ? c("", !0) : (s(), n("div", {
-              key: 0,
-              onClick: (o) => ve(a.id),
-              style: _(`opacity:${O.value.includes(a.id) ? 0.5 : 1}`)
-            }, L(a.name), 13, jl))
-          ]),
-          _: 1
-        }, 8, ["legendSet", "config"])) : x(l.$slots, "legend", {
-          key: 1,
-          legend: Oe.value
-        }, void 0, !0)
-      ], 512),
+        c("div", {
+          ref_key: "chartLegend",
+          ref: ge
+        }, [
+          t.value.style.chart.legend.show ? (s(), X(Jt, {
+            key: `legend_${Le.value}`,
+            legendSet: Re.value,
+            config: pt.value,
+            onClickMarker: u[12] || (u[12] = ({ legend: a }) => ve(a.id))
+          }, {
+            item: m(({ legend: a }) => [
+              i(_e) ? h("", !0) : (s(), n("div", {
+                key: 0,
+                onClick: (o) => ve(a.id),
+                style: q(`opacity:${R.value.includes(a.id) ? 0.5 : 1}`)
+              }, L(a.name), 13, ta))
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config"])) : x(l.$slots, "legend", {
+            key: 1,
+            legend: Re.value
+          }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : h("", !0),
       l.$slots.source ? (s(), n("div", {
-        key: 5,
+        key: 6,
         ref_key: "source",
         ref: me,
         dir: "auto"
       }, [
         x(l.$slots, "source", {}, void 0, !0)
-      ], 512)) : c("", !0),
-      he(i(at), {
+      ], 512)) : h("", !0),
+      he(i(ut), {
         show: $.value.showTooltip && se.value,
         backgroundColor: t.value.style.chart.tooltip.backgroundColor,
         color: t.value.style.chart.tooltip.color,
@@ -1346,7 +1357,7 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
         backgroundOpacity: t.value.style.chart.tooltip.backgroundOpacity,
         position: t.value.style.chart.tooltip.position,
         offsetY: t.value.style.chart.tooltip.offsetY,
-        parent: Y.value,
+        parent: M.value,
         content: re.value,
         isFullscreen: E.value,
         isCustom: t.value.style.chart.tooltip.customFormat && typeof t.value.style.chart.tooltip.customFormat == "function",
@@ -1360,8 +1371,8 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
           x(l.$slots, "tooltip-after", U(G({ ...de.value })), void 0, !0)
         ]),
         default: m(() => [
-          t.value.style.chart.tooltip.showShape ? (s(), n("svg", Zl, [
-            he(Ke, {
+          t.value.style.chart.tooltip.showShape ? (s(), n("svg", la, [
+            he(et, {
               plot: { x: 10, y: 10 },
               shape: le.value.shape,
               color: le.value.color,
@@ -1369,12 +1380,12 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
               stroke: t.value.style.chart.layout.plots.outline ? t.value.style.chart.layout.plots.outlineColor : "none",
               "stroke-width": t.value.style.chart.layout.plots.outlineWidth
             }, null, 8, ["shape", "color", "stroke", "stroke-width"])
-          ])) : c("", !0)
+          ])) : h("", !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter"]),
-      be.value ? (s(), R(i(ut), {
-        key: 6,
+      be.value ? (s(), X(i(ot), {
+        key: 7,
         hideDetails: "",
         config: {
           open: $.value.showTable,
@@ -1390,7 +1401,7 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
         }
       }, {
         content: m(() => [
-          (s(), R(i(ot), {
+          (s(), X(i(st), {
             key: `table_${ke.value}`,
             colNames: ee.value.colNames,
             head: ee.value.head,
@@ -1400,22 +1411,22 @@ const Zt = ["id"], Kt = ["xmlns", "viewBox", "id"], el = ["x", "y", "width", "he
             onClose: u[13] || (u[13] = (a) => $.value.showTable = !1)
           }, {
             th: m(({ th: a }) => [
-              kt(L(a), 1)
+              wt(L(a), 1)
             ]),
             td: m(({ td: a }) => [
-              h("div", {
+              c("div", {
                 innerHTML: a.name || a
-              }, null, 8, Kl)
+              }, null, 8, aa)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
-      }, 8, ["config"])) : c("", !0),
-      i(we) ? (s(), R(Jt, { key: 7 })) : c("", !0)
-    ], 46, Zt));
+      }, 8, ["config"])) : h("", !0),
+      i(_e) ? (s(), X(Zt, { key: 8 })) : h("", !0)
+    ], 46, el));
   }
-}, ya = /* @__PURE__ */ jt(ea, [["__scopeId", "data-v-d487f824"]]);
+}, ga = /* @__PURE__ */ Kt(ua, [["__scopeId", "data-v-a675d946"]]);
 export {
-  ya as default
+  ga as default
 };