vue-data-ui 3.2.8 → 3.3.1

package/dist/{vue-ui-age-pyramid-T09D0LHr.js → vue-ui-age-pyramid-MULKSv5c.js}

@@ -1,20 +1,21 @@
-import { defineAsyncComponent as T, computed as g, ref as v, toRefs as ut, watch as X, shallowRef as Se, onMounted as nt, onBeforeUnmount as ze, watchEffect as rt, createElementBlock as n, openBlock as i, unref as u, normalizeStyle as oe, normalizeClass as Oe, createBlock as D, createCommentVNode as y, renderSlot as h, createVNode as se, createSlots as Ie, withCtx as c, normalizeProps as P, guardReactiveProps as M, createElementVNode as d, Fragment as L, renderList as z, toDisplayString as _, resolveDynamicComponent as vt, mergeProps as dt, createTextVNode as ie, nextTick as yt } from "vue";
-import { c as ht, t as ct, o as Fe, f as ft, q as p, X as gt, s as ue, i as Re, a as O, d as I, x as pt, y as bt, z as xt, A as mt } from "./lib-BEpWEyMm.js";
-import { t as De, u as wt } from "./useResponsive-DfdjqQps.js";
-import { u as kt, a as Pe } from "./useNestedProp-BOk-tPdu.js";
-import { u as _t, B as Ct } from "./BaseScanner-BgWxam9d.js";
-import { u as At } from "./usePrinter-w23K-ezx.js";
-import { u as Tt } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Lt } from "./useChartAccessibility-9icAAmYg.js";
-import { u as $t } from "./useTimeLabelCollider-CIsgDrl9.js";
-import St from "./img-DjWwQXVS.js";
-import zt from "./Title-DG2nloSB.js";
-import { t as Ot } from "./themes-Dw-dDudK.js";
-import { _ as It } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"], Pt = ["id"], Mt = ["stop-color"], Nt = ["stop-color"], Bt = ["id"], Et = ["stop-color"], Ut = ["stop-color"], Gt = ["x", "y", "width", "height", "fill", "rx"], Ht = ["x", "y", "width", "height", "fill", "rx"], Wt = ["x", "y", "width", "height", "fill", "rx"], Vt = ["x", "y", "width", "height", "fill", "rx"], Xt = { key: 0 }, jt = ["x", "y", "fill", "font-size", "font-weight"], Yt = ["x", "y", "fill", "font-size", "font-weight"], qt = { key: 1 }, Jt = ["x", "y", "font-size", "fill", "font-weight"], Kt = { key: 2 }, Qt = { key: 0 }, Zt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], el = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], tl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ll = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], al = ["font-size", "fill", "text-anchor", "font-weight", "transform"], ol = ["font-size", "fill", "text-anchor", "font-weight", "transform"], sl = ["x", "y", "font-size", "fill", "font-weight"], il = ["x", "y", "width", "height", "fill", "onMouseover", "onMouseleave", "onClick"], ul = {
+import { defineAsyncComponent as T, computed as y, ref as v, toRefs as yt, watch as X, shallowRef as ze, onMounted as ht, onBeforeUnmount as Oe, watchEffect as ct, createElementBlock as n, openBlock as i, unref as u, normalizeStyle as se, normalizeClass as Ie, createBlock as D, createCommentVNode as h, renderSlot as c, createVNode as ie, createSlots as Fe, withCtx as f, normalizeProps as P, guardReactiveProps as M, createElementVNode as d, Fragment as L, renderList as z, toDisplayString as C, resolveDynamicComponent as ft, mergeProps as gt, createTextVNode as ue, nextTick as pt } from "vue";
+import { c as bt, t as xt, o as Re, f as mt, q as p, X as wt, s as ne, i as De, a as O, d as I, x as kt, y as Ct, z as _t, A as At } from "./lib-CEjkWSLj.js";
+import { t as Pe, u as Tt } from "./useResponsive-DfdjqQps.js";
+import { u as Lt, a as Me } from "./useNestedProp-Ce3PwN8T.js";
+import { u as $t, B as St } from "./BaseScanner-BgWxam9d.js";
+import { u as zt } from "./usePrinter-DJ1iH-F_.js";
+import { u as Ot } from "./useSvgExport-DrjCWun4.js";
+import { u as It } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Ft } from "./useChartAccessibility-9icAAmYg.js";
+import { u as Rt } from "./useTimeLabelCollider-CIsgDrl9.js";
+import Dt from "./img-J2dLIr8Y.js";
+import Pt from "./Title-Camz1Lce.js";
+import { t as Mt } from "./themes-Dw-dDudK.js";
+import { _ as Nt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"], Gt = ["id"], Ht = ["stop-color"], Wt = ["stop-color"], Vt = ["id"], Xt = ["stop-color"], jt = ["stop-color"], Yt = ["x", "y", "width", "height", "fill", "rx"], qt = ["x", "y", "width", "height", "fill", "rx"], Jt = ["x", "y", "width", "height", "fill", "rx"], Kt = ["x", "y", "width", "height", "fill", "rx"], Qt = { key: 0 }, Zt = ["x", "y", "fill", "font-size", "font-weight"], el = ["x", "y", "fill", "font-size", "font-weight"], tl = { key: 1 }, ll = ["x", "y", "font-size", "fill", "font-weight"], al = { key: 2 }, ol = { key: 0 }, sl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], il = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ul = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], nl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], rl = ["font-size", "fill", "text-anchor", "font-weight", "transform"], vl = ["font-size", "fill", "text-anchor", "font-weight", "transform"], dl = ["x", "y", "font-size", "fill", "font-weight"], yl = ["x", "y", "width", "height", "fill", "onMouseover", "onMouseleave", "onClick"], hl = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, nl = {
+}, cl = {
   __name: "vue-ui-age-pyramid",
   props: {
     config: {
@@ -30,11 +31,11 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
       }
     }
   },
-  setup(ne, { expose: Me }) {
-    const Ne = T(() => import("./Tooltip-BOXz8skU.js")), Be = T(() => import("./BaseIcon-Bz-1GQhu.js")), Ee = T(() => import("./vue-ui-accordion-CDIzGCG1.js")), Ue = T(() => import("./DataTable-BvjacRbw.js")), Ge = T(() => import("./PenAndPaper-CR8q353D.js")), He = T(() => import("./UserOptions-DsTgvAok.js")), We = T(() => import("./PackageVersion-C40g0Rfc.js")), Ve = T(() => import("./BaseDraggableDialog-CHhZIht2.js")), { vue_ui_age_pyramid: Xe } = kt(), x = ne, re = g(() => !!x.dataset && x.dataset.length), w = v(ht()), j = v(!1), Y = v(""), U = v(null), ve = v(0), k = v(null), de = v(null), ye = v(null), he = v(null), ce = v(0), fe = v(0), q = v(null), N = v(null), J = v(null), e = v(Z()), { loading: ge, FINAL_DATASET: G, manualLoading: K } = _t({
-      ...ut(x),
+  setup(re, { expose: Ne }) {
+    const Be = T(() => import("./Tooltip-VOcQEHa4.js")), Ee = T(() => import("./BaseIcon-eZbszQrv.js")), Ue = T(() => import("./vue-ui-accordion-VTP418mC.js")), Ge = T(() => import("./DataTable-yAMEyP6y.js")), He = T(() => import("./PenAndPaper-Bo-lMUik.js")), We = T(() => import("./UserOptions-CSja1SGU.js")), Ve = T(() => import("./PackageVersion-BfykJm_B.js")), Xe = T(() => import("./BaseDraggableDialog-CVGErydD.js")), { vue_ui_age_pyramid: je } = Lt(), x = re, ve = y(() => !!x.dataset && x.dataset.length), w = v(bt()), j = v(!1), Y = v(""), U = v(null), de = v(0), k = v(null), ye = v(null), he = v(null), ce = v(null), fe = v(0), ge = v(0), q = v(null), N = v(null), J = v(null), e = v(ee()), { loading: pe, FINAL_DATASET: G, manualLoading: K } = $t({
+      ...yt(x),
       FINAL_CONFIG: e,
-      prepareConfig: Z,
+      prepareConfig: ee,
       skeletonDataset: [
         ["_", 9, 2, 2],
         ["_", 8, 3, 3],
@@ -47,7 +48,7 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
         ["_", 1, 89, 89],
         ["_", 0, 144, 144]
       ],
-      skeletonConfig: ct({
+      skeletonConfig: xt({
         defaultConfig: e.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -80,57 +81,57 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
           }
         }
       })
-    }), { userOptionsVisible: Q, setUserOptionsVisibility: pe, keepUserOptionState: be } = Tt({ config: e.value }), { svgRef: xe } = Lt({ config: e.value.style.title });
-    function Z() {
-      const t = Pe({
+    }), { userOptionsVisible: Q, setUserOptionsVisibility: be, keepUserOptionState: xe } = It({ config: e.value }), { svgRef: Z } = Ft({ config: e.value.style.title });
+    function ee() {
+      const t = Me({
         userConfig: x.config,
-        defaultConfig: Xe
+        defaultConfig: je
       });
       return t.theme ? {
-        ...Pe({
-          userConfig: Ot.vue_ui_age_pyramid[t.theme] || x.config,
+        ...Me({
+          userConfig: Mt.vue_ui_age_pyramid[t.theme] || x.config,
           defaultConfig: t
         })
       } : t;
     }
     X(() => x.config, (t) => {
-      ge.value || (e.value = Z()), Q.value = !e.value.userOptions.showOnChartHover, me(), ce.value += 1, fe.value += 1, b.value.showTable = e.value.table.show, b.value.showTooltip = e.value.style.tooltip.show;
+      pe.value || (e.value = ee()), Q.value = !e.value.userOptions.showOnChartHover, me(), fe.value += 1, ge.value += 1, b.value.showTable = e.value.table.show, b.value.showTooltip = e.value.style.tooltip.show;
     }, { deep: !0 }), X(() => x.dataset, (t) => {
       Array.isArray(t) && t.length > 0 && (K.value = !1);
     }, { deep: !0 });
-    const C = Se(null), F = Se(null);
-    nt(() => {
+    const _ = ze(null), F = ze(null);
+    ht(() => {
       me();
     });
-    const je = g(() => !!e.value.debug);
+    const Ye = y(() => !!e.value.debug);
     function me() {
-      if (Fe(x.dataset) && (ft({
+      if (Re(x.dataset) && (mt({
         componentName: "VueUiAgePyramid",
         type: "dataset",
-        debug: je.value
-      }), K.value = !0), Fe(x.dataset) || (K.value = e.value.loading), e.value.responsive) {
-        const t = De(() => {
-          const { width: o, height: l } = wt({
+        debug: Ye.value
+      }), K.value = !0), Re(x.dataset) || (K.value = e.value.loading), e.value.responsive) {
+        const t = Pe(() => {
+          const { width: o, height: l } = Tt({
             chart: k.value,
-            title: e.value.style.title.text ? de.value : null,
-            source: ye.value,
-            noTitle: he.value
+            title: e.value.style.title.text ? ye.value : null,
+            source: he.value,
+            noTitle: ce.value
           });
           requestAnimationFrame(() => {
-            f.value.width = o, f.value.height = l;
+            g.value.width = o, g.value.height = l;
           });
         });
-        C.value && (F.value && C.value.unobserve(F.value), C.value.disconnect()), C.value = new ResizeObserver(t), F.value = k.value.parentNode, C.value.observe(F.value);
+        _.value && (F.value && _.value.unobserve(F.value), _.value.disconnect()), _.value = new ResizeObserver(t), F.value = k.value.parentNode, _.value.observe(F.value);
       }
     }
-    ze(() => {
-      C.value && (F.value && C.value.unobserve(F.value), C.value.disconnect());
+    Oe(() => {
+      _.value && (F.value && _.value.unobserve(F.value), _.value.disconnect());
     });
-    const { isPrinting: we, isImaging: ke, generatePdf: _e, generateImage: Ce } = At({
+    const { isPrinting: we, isImaging: ke, generatePdf: Ce, generateImage: _e } = zt({
       elementId: `vue-ui-age-pyramid_${w.value}`,
       fileName: e.value.style.title.text || "vue-ui-age-pyramid",
       options: e.value.userOptions.print
-    }), Ye = g(() => e.value.userOptions.show && !e.value.style.title.text), b = v({
+    }), qe = y(() => e.value.userOptions.show && !e.value.style.title.text), b = v({
       showTable: e.value.table.show,
       showTooltip: e.value.style.tooltip.show
     });
@@ -140,31 +141,31 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
         showTooltip: e.value.style.tooltip.show
       };
     }, { immediate: !0 });
-    const f = v({
+    const g = v({
       height: e.value.style.height,
       width: e.value.style.width
-    }), qe = g(() => f.value.width), Je = g(() => f.value.height), H = v(0), Ke = De((t) => {
+    }), Je = y(() => g.value.width), Ke = y(() => g.value.height), H = v(0), Qe = Pe((t) => {
       H.value = t;
     }, 100);
-    rt((t) => {
+    ct((t) => {
       const o = q.value;
       if (!o) return;
       const l = new ResizeObserver((a) => {
-        Ke(a[0].contentRect.height);
+        Qe(a[0].contentRect.height);
       });
       l.observe(o), t(() => l.disconnect());
-    }), ze(() => {
+    }), Oe(() => {
       H.value = 0;
     });
-    const s = g(() => {
-      const t = f.value.width - e.value.style.layout.padding.right - e.value.style.layout.padding.left, o = e.value.style.layout.padding.left, l = f.value.width - e.value.style.layout.padding.right;
+    const s = y(() => {
+      const t = g.value.width - e.value.style.layout.padding.right - e.value.style.layout.padding.left, o = e.value.style.layout.padding.left, l = g.value.width - e.value.style.layout.padding.right;
       return {
         top: e.value.style.layout.padding.top + e.value.style.layout.dataLabels.sideTitles.fontSize + e.value.style.layout.dataLabels.sideTitles.offsetY + 12,
         left: o,
         right: l,
-        bottom: f.value.height - e.value.style.layout.padding.bottom - H.value,
+        bottom: g.value.height - e.value.style.layout.padding.bottom - H.value,
         width: t,
-        height: f.value.height - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom - H.value - e.value.style.layout.dataLabels.sideTitles.fontSize - e.value.style.layout.dataLabels.sideTitles.offsetY - 12,
+        height: g.value.height - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom - H.value - e.value.style.layout.dataLabels.sideTitles.fontSize - e.value.style.layout.dataLabels.sideTitles.offsetY - 12,
         centerX: e.value.style.layout.padding.left + t / 2,
         leftChart: {
           width: t / 2 - e.value.style.layout.centerSlit.width,
@@ -175,8 +176,8 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
           left: o + t / 2 + e.value.style.layout.centerSlit.width
         }
       };
-    }), Qe = g(() => G.value.map((t) => e.value.style.layout.dataLabels.yAxis.display === "age" ? t[1] : t[0])), A = g(() => {
-      const t = Ze(B.value / 5), o = [], l = [];
+    }), Ze = y(() => G.value.map((t) => e.value.style.layout.dataLabels.yAxis.display === "age" ? t[1] : t[0])), A = y(() => {
+      const t = et(B.value / 5), o = [], l = [];
       for (let a = 0; a <= 5; a += 1) {
         const r = t * a, m = t * (a - 5);
         o.push({
@@ -192,13 +193,13 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
         left: l
       };
     });
-    function Ze(t) {
+    function et(t) {
       if (t === 0) return 0;
       const l = 10 ** Math.floor(Math.log10(Math.abs(t)));
       let a;
       return t < 0, a = Math.round(t / l) * l, a;
     }
-    const B = g(() => Math.max(...G.value.flatMap((t) => t.slice(-2).map((o) => p(o))))), R = g(() => G.value.length), et = g(() => G.value.map((t) => ({
+    const B = y(() => Math.max(...G.value.flatMap((t) => t.slice(-2).map((o) => p(o))))), R = y(() => G.value.length), tt = y(() => G.value.map((t) => ({
       segment: t[0],
       age: t[1],
       left: {
@@ -209,7 +210,7 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
         value: t[3],
         proportionToMax: t[3] / B.value
       }
-    }))), $ = g(() => et.value.map((t, o) => {
+    }))), $ = y(() => tt.value.map((t, o) => {
       const l = s.value.top + s.value.height / R.value * o, a = s.value.height / R.value - e.value.style.layout.bars.gap;
       return {
         segment: t.segment,
@@ -231,26 +232,26 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
           height: a
         }
       };
-    })), ee = v(null);
-    function te(t) {
+    })), te = v(null);
+    function le(t) {
       const [o, l, a, r] = t;
       return { segment: o, index: l, left: a, right: r };
     }
-    function tt(t, o) {
-      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: te(o), seriesIndex: t });
-    }
     function lt(t, o) {
-      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: te(o), seriesIndex: t }), U.value = null, j.value = !1;
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: le(o), seriesIndex: t });
     }
     function at(t, o) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: te(o), seriesIndex: t }), U.value = t, ee.value = {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: le(o), seriesIndex: t }), U.value = null, j.value = !1;
+    }
+    function ot(t, o) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: le(o), seriesIndex: t }), U.value = t, te.value = {
         datapoint: o,
         seriesIndex: t,
         series: $.value,
         config: e.value
       };
       const l = e.value.style.tooltip.customFormat;
-      if (xt(l) && mt(() => l({
+      if (_t(l) && At(() => l({
         seriesIndex: t,
         datapoint: {
           segment: o[0],
@@ -299,19 +300,19 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
       }
       j.value = !0;
     }
-    function le(t = null) {
-      yt(() => {
+    function ae(t = null) {
+      pt(() => {
         const o = [e.value.translations.year, e.value.translations.age, e.value.translations.female, e.value.translations.male, e.value.translations.total], l = x.dataset.map((m) => [
           m[0],
           m[1],
           m[2],
           m[3],
           m[2] ?? 0 + m[3] ?? 0
-        ]), a = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([o]).concat(l), r = pt(a);
-        t ? t(r) : bt({ csvContent: r, title: e.value.style.title.text || "vue-ui-heatmap" });
+        ]), a = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([o]).concat(l), r = kt(a);
+        t ? t(r) : Ct({ csvContent: r, title: e.value.style.title.text || "vue-ui-heatmap" });
       });
     }
-    const W = g(() => {
+    const W = y(() => {
       const t = [
         e.value.translations.year,
         e.value.translations.age,
@@ -340,7 +341,7 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
       return { head: t, body: o, config: l, colNames: t };
     }), S = v(!1);
     function Ae(t) {
-      S.value = t, ve.value += 1;
+      S.value = t, de.value += 1;
     }
     function Te() {
       b.value.showTable = !b.value.showTable;
@@ -349,12 +350,12 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
       b.value.showTooltip = !b.value.showTooltip;
     }
     const V = v(!1);
-    function ae() {
+    function oe() {
       V.value = !V.value;
     }
-    async function ot({ scale: t = 2 } = {}) {
+    async function st({ scale: t = 2 } = {}) {
       if (!k.value) return;
-      const { width: o, height: l } = k.value.getBoundingClientRect(), a = o / l, { imageUri: r, base64: m } = await St({ domElement: k.value, base64: !0, img: !0, scale: t });
+      const { width: o, height: l } = k.value.getBoundingClientRect(), a = o / l, { imageUri: r, base64: m } = await Dt({ domElement: k.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: r,
         base64: m,
@@ -364,24 +365,24 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
         aspectRatio: a
       };
     }
-    const st = v([]), it = v({ start: 0, end: $.value.length });
-    $t({
+    const it = v([]), ut = v({ start: 0, end: $.value.length });
+    Rt({
       timeLabelsEls: q,
-      timeLabels: st,
-      slicer: it,
+      timeLabels: it,
+      slicer: ut,
       configRef: e,
       rotationPath: ["style", "layout", "dataLabels", "xAxis", "rotation"],
       autoRotatePath: ["style", "layout", "dataLabels", "xAxis", "autoRotate", "enable"],
       isAutoSize: !1,
-      width: qe,
-      height: Je,
+      width: Je,
+      height: Ke,
       targetClass: ".vue-ui-age-pyramid-x-axis-label",
       rotation: e.value.style.layout.dataLabels.xAxis.autoRotate.angle
     });
-    const E = g(() => {
+    const E = y(() => {
       const t = e.value.table.useDialog && !e.value.table.show, o = b.value.showTable;
       return {
-        component: t ? Ve : Ee,
+        component: t ? Xe : Ue,
         title: `${e.value.style.title.text}${e.value.style.title.subtitle.text ? `: ${e.value.style.title.subtitle.text}` : ""}`,
         props: t ? {
           backgroundColor: e.value.table.th.backgroundColor,
@@ -414,47 +415,60 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
     function $e() {
       b.value.showTable = !1, J.value && J.value.setTableIconState(!1);
     }
-    return Me({
-      getImage: ot,
-      generatePdf: _e,
-      generateCsv: le,
-      generateImage: Ce,
+    const nt = y(() => e.value.style.backgroundColor), rt = y(() => e.value.style.title), { exportSvg: vt, getSvg: dt } = Ot({
+      svg: Z,
+      title: rt,
+      backgroundColor: nt
+    });
+    async function Se({ isCb: t }) {
+      if (t) {
+        const { blob: o, url: l, text: a, dataUrl: r } = await dt();
+        e.value.userOptions.callbacks.svg({ blob: o, url: l, text: a, dataUrl: r });
+      } else
+        vt();
+    }
+    return Ne({
+      getImage: st,
+      generatePdf: Ce,
+      generateCsv: ae,
+      generateImage: _e,
+      generateSvg: Se,
       toggleTable: Te,
       toggleTooltip: Le,
-      toggleAnnotator: ae,
+      toggleAnnotator: oe,
       toggleFullscreen: Ae
     }), (t, o) => (i(), n("div", {
-      class: Oe(`vue-data-ui-component vue-ui-age-pyramid ${S.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      class: Ie(`vue-data-ui-component vue-ui-age-pyramid ${S.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
       ref_key: "agePyramid",
       ref: k,
       id: `vue-ui-age-pyramid_${w.value}`,
-      style: oe(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
-      onMouseenter: o[1] || (o[1] = () => u(pe)(!0)),
-      onMouseleave: o[2] || (o[2] = () => u(pe)(!1))
+      style: se(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
+      onMouseenter: o[1] || (o[1] = () => u(be)(!0)),
+      onMouseleave: o[2] || (o[2] = () => u(be)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (i(), D(u(Ge), {
+      e.value.userOptions.buttons.annotator ? (i(), D(u(He), {
         key: 0,
-        svgRef: u(xe),
+        svgRef: u(Z),
         backgroundColor: e.value.style.backgroundColor,
         color: e.value.style.color,
         active: V.value,
-        onClose: ae
-      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : y("", !0),
-      Ye.value ? (i(), n("div", {
+        onClose: oe
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : h("", !0),
+      qe.value ? (i(), n("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: he,
+        ref: ce,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : y("", !0),
+      }, null, 512)) : h("", !0),
       e.value.style.title.text ? (i(), n("div", {
         key: 2,
         ref_key: "chartTitle",
-        ref: de,
+        ref: ye,
         style: "width:100%;background:transparent"
       }, [
-        (i(), D(zt, {
-          key: `title_${ce.value}`,
+        (i(), D(Pt, {
+          key: `title_${fe.value}`,
           config: {
             title: {
               cy: "pyramid-div-title",
@@ -466,11 +480,11 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : y("", !0),
-      e.value.userOptions.show && re.value && (u(be) || u(Q)) ? (i(), D(u(He), {
+      ], 512)) : h("", !0),
+      e.value.userOptions.show && ve.value && (u(xe) || u(Q)) ? (i(), D(u(We), {
         ref_key: "userOptionsRef",
         ref: J,
-        key: `user_options_${ve.value}`,
+        key: `user_options_${de.value}`,
         backgroundColor: e.value.style.backgroundColor,
         color: e.value.style.color,
         isImaging: u(ke),
@@ -480,6 +494,7 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
         hasPdf: e.value.userOptions.buttons.pdf,
         hasXls: e.value.userOptions.buttons.csv,
         hasImg: e.value.userOptions.buttons.img,
+        hasSvg: e.value.userOptions.buttons.svg,
         hasTable: e.value.userOptions.buttons.table,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         isFullscreen: S.value,
@@ -493,82 +508,83 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
         printScale: e.value.userOptions.print.scale,
         tableDialog: e.value.table.useDialog,
         onToggleFullscreen: Ae,
-        onGeneratePdf: u(_e),
-        onGenerateCsv: le,
-        onGenerateImage: u(Ce),
+        onGeneratePdf: u(Ce),
+        onGenerateCsv: ae,
+        onGenerateImage: u(_e),
+        onGenerateSvg: Se,
         onToggleTable: Te,
         onToggleTooltip: Le,
-        onToggleAnnotator: ae,
-        style: oe({
-          visibility: u(be) ? u(Q) ? "visible" : "hidden" : "visible"
+        onToggleAnnotator: oe,
+        style: se({
+          visibility: u(xe) ? u(Q) ? "visible" : "hidden" : "visible"
         })
-      }, Ie({ _: 2 }, [
+      }, Fe({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: c(({ isOpen: l, color: a }) => [
-            h(t.$slots, "menuIcon", P(M({ isOpen: l, color: a })), void 0, !0)
+          fn: f(({ isOpen: l, color: a }) => [
+            c(t.$slots, "menuIcon", P(M({ isOpen: l, color: a })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: c(() => [
-            h(t.$slots, "optionTooltip", {}, void 0, !0)
+          fn: f(() => [
+            c(t.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: c(() => [
-            h(t.$slots, "optionPdf", {}, void 0, !0)
+          fn: f(() => [
+            c(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: c(() => [
-            h(t.$slots, "optionCsv", {}, void 0, !0)
+          fn: f(() => [
+            c(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: c(() => [
-            h(t.$slots, "optionImg", {}, void 0, !0)
+          fn: f(() => [
+            c(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
-          fn: c(() => [
-            h(t.$slots, "optionTable", {}, void 0, !0)
+          fn: f(() => [
+            c(t.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: c(({ toggleFullscreen: l, isFullscreen: a }) => [
-            h(t.$slots, "optionFullscreen", P(M({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
+          fn: f(({ toggleFullscreen: l, isFullscreen: a }) => [
+            c(t.$slots, "optionFullscreen", P(M({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
           ]),
           key: "6"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: c(({ toggleAnnotator: l, isAnnotator: a }) => [
-            h(t.$slots, "optionAnnotator", P(M({ toggleAnnotator: l, isAnnotator: a })), void 0, !0)
+          fn: f(({ toggleAnnotator: l, isAnnotator: a }) => [
+            c(t.$slots, "optionAnnotator", P(M({ toggleAnnotator: l, isAnnotator: a })), void 0, !0)
           ]),
           key: "7"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
       (i(), n("svg", {
         ref_key: "svgRef",
-        ref: xe,
-        xmlns: u(gt),
-        class: Oe({ "vue-data-ui-fullscreen--on": S.value, "vue-data-ui-fulscreen--off": !S.value }),
-        viewBox: `0 0 ${f.value.width <= 0 ? 10 : f.value.width} ${f.value.height <= 0 ? 10 : f.value.height}`,
-        style: oe(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
+        ref: Z,
+        xmlns: u(wt),
+        class: Ie({ "vue-data-ui-fullscreen--on": S.value, "vue-data-ui-fulscreen--off": !S.value }),
+        viewBox: `0 0 ${g.value.width <= 0 ? 10 : g.value.width} ${g.value.height <= 0 ? 10 : g.value.height}`,
+        style: se(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
       }, [
-        se(u(We)),
+        ie(u(Ve)),
         t.$slots["chart-background"] ? (i(), n("foreignObject", {
           key: 0,
           x: s.value.left,
@@ -579,8 +595,8 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
             pointerEvents: "none"
           }
         }, [
-          h(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, Dt)) : y("", !0),
+          c(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Ut)) : h("", !0),
         d("defs", null, [
           d("linearGradient", {
             id: `age_pyramid_left_${w.value}`,
@@ -592,12 +608,12 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
             d("stop", {
               offset: "0%",
               "stop-color": e.value.style.layout.bars.left.color
-            }, null, 8, Mt),
+            }, null, 8, Ht),
             d("stop", {
               offset: "100%",
-              "stop-color": u(ue)(u(Re)(e.value.style.layout.bars.left.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
-            }, null, 8, Nt)
-          ], 8, Pt),
+              "stop-color": u(ne)(u(De)(e.value.style.layout.bars.left.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
+            }, null, 8, Wt)
+          ], 8, Gt),
           d("linearGradient", {
             id: `age_pyramid_right_${w.value}`,
             x1: "0%",
@@ -607,13 +623,13 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
           }, [
             d("stop", {
               offset: "0%",
-              "stop-color": u(ue)(u(Re)(e.value.style.layout.bars.right.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
-            }, null, 8, Et),
+              "stop-color": u(ne)(u(De)(e.value.style.layout.bars.right.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
+            }, null, 8, Xt),
             d("stop", {
               offset: "100%",
               "stop-color": e.value.style.layout.bars.right.color
-            }, null, 8, Ut)
-          ], 8, Bt)
+            }, null, 8, jt)
+          ], 8, Vt)
         ]),
         (i(!0), n(L, null, z($.value, (l, a) => (i(), n("g", null, [
           d("rect", {
@@ -623,7 +639,7 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
             height: l.left.height <= 0 ? 1e-4 : l.left.height,
             fill: e.value.style.layout.bars.gradient.underlayer,
             rx: e.value.style.layout.bars.borderRadius
-          }, null, 8, Gt),
+          }, null, 8, Yt),
           d("rect", {
             x: l.left.x,
             y: l.left.y,
@@ -631,7 +647,7 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
             height: l.left.height <= 0 ? 1e-4 : l.left.height,
             fill: e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_left_${w.value})` : l.left.color,
             rx: e.value.style.layout.bars.borderRadius
-          }, null, 8, Ht),
+          }, null, 8, qt),
           d("rect", {
             x: l.right.x,
             y: l.right.y,
@@ -639,7 +655,7 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
             height: l.right.height <= 0 ? 1e-4 : l.right.height,
             fill: e.value.style.layout.bars.gradient.underlayer,
             rx: e.value.style.layout.bars.borderRadius
-          }, null, 8, Wt),
+          }, null, 8, Jt),
           d("rect", {
             x: l.right.x,
             y: l.right.y,
@@ -647,10 +663,10 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
             height: l.right.height <= 0 ? 1e-4 : l.right.height,
             fill: e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_right_${w.value})` : l.right.color,
             rx: e.value.style.layout.bars.borderRadius
-          }, null, 8, Vt)
+          }, null, 8, Kt)
         ]))), 256)),
         d("g", null, [
-          e.value.style.layout.dataLabels.sideTitles.show ? (i(), n("g", Xt, [
+          e.value.style.layout.dataLabels.sideTitles.show ? (i(), n("g", Qt, [
             d("text", {
               x: s.value.left,
               y: e.value.style.layout.dataLabels.sideTitles.fontSize,
@@ -658,7 +674,7 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
               "font-size": e.value.style.layout.dataLabels.sideTitles.fontSize,
               "text-anchor": "start",
               "font-weight": e.value.style.layout.dataLabels.sideTitles.bold ? "bold" : "normal"
-            }, _(e.value.translations.female), 9, jt),
+            }, C(e.value.translations.female), 9, Zt),
             d("text", {
               x: s.value.right,
               y: e.value.style.layout.dataLabels.sideTitles.fontSize,
@@ -666,10 +682,10 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
               "font-size": e.value.style.layout.dataLabels.sideTitles.fontSize,
               "text-anchor": "end",
               "font-weight": e.value.style.layout.dataLabels.sideTitles.bold ? "bold" : "normal"
-            }, _(e.value.translations.male), 9, Yt)
-          ])) : y("", !0),
-          e.value.style.layout.dataLabels.yAxis.show ? (i(), n("g", qt, [
-            (i(!0), n(L, null, z(Qe.value, (l, a) => (i(), n(L, null, [
+            }, C(e.value.translations.male), 9, el)
+          ])) : h("", !0),
+          e.value.style.layout.dataLabels.yAxis.show ? (i(), n("g", tl, [
+            (i(!0), n(L, null, z(Ze.value, (l, a) => (i(), n(L, null, [
               a % e.value.style.layout.dataLabels.yAxis.showEvery === 0 ? (i(), n("text", {
                 key: 0,
                 x: s.value.centerX,
@@ -678,16 +694,16 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
                 "font-size": e.value.style.layout.dataLabels.yAxis.fontSize,
                 fill: e.value.style.layout.dataLabels.yAxis.color,
                 "font-weight": e.value.style.layout.dataLabels.yAxis.bold ? "bold" : "normal"
-              }, _(u(O)(
+              }, C(u(O)(
                 e.value.style.layout.dataLabels.yAxis.formatter,
                 l,
                 u(I)({ v: l }),
                 { datapoint: l, seriesIndex: a }
-              )), 9, Jt)) : y("", !0)
+              )), 9, ll)) : h("", !0)
             ], 64))), 256))
-          ])) : y("", !0),
-          e.value.style.layout.dataLabels.xAxis.show ? (i(), n("g", Kt, [
-            e.value.style.layout.grid.show ? (i(), n("g", Qt, [
+          ])) : h("", !0),
+          e.value.style.layout.dataLabels.xAxis.show ? (i(), n("g", al, [
+            e.value.style.layout.grid.show ? (i(), n("g", ol, [
               d("line", {
                 x1: A.value.right[0].x,
                 x2: A.value.right.at(-1).x,
@@ -696,7 +712,7 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
                 stroke: e.value.style.layout.grid.stroke,
                 "stroke-width": e.value.style.layout.grid.strokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, Zt),
+              }, null, 8, sl),
               d("line", {
                 x1: A.value.left[0].x,
                 x2: A.value.left.at(-1).x,
@@ -705,8 +721,8 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
                 stroke: e.value.style.layout.grid.stroke,
                 "stroke-width": e.value.style.layout.grid.strokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, el)
-            ])) : y("", !0),
+              }, null, 8, il)
+            ])) : h("", !0),
             (i(!0), n(L, null, z(A.value.right, (l, a) => (i(), n("g", null, [
               e.value.style.layout.grid.show ? (i(), n("line", {
                 key: 0,
@@ -717,7 +733,7 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
                 stroke: e.value.style.layout.grid.stroke,
                 "stroke-width": e.value.style.layout.grid.strokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, tl)) : y("", !0)
+              }, null, 8, ul)) : h("", !0)
             ]))), 256)),
             (i(!0), n(L, null, z(A.value.left, (l, a) => (i(), n("g", null, [
               e.value.style.layout.grid.show ? (i(), n("line", {
@@ -729,7 +745,7 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
                 stroke: e.value.style.layout.grid.stroke,
                 "stroke-width": e.value.style.layout.grid.strokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, ll)) : y("", !0)
+              }, null, 8, nl)) : h("", !0)
             ]))), 256)),
             d("g", {
               ref_key: "xAxisLabels",
@@ -742,14 +758,14 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
                 "text-anchor": e.value.style.layout.dataLabels.xAxis.rotation > 0 ? "start" : e.value.style.layout.dataLabels.xAxis.rotation < 0 ? "end" : "middle",
                 "font-weight": e.value.style.layout.dataLabels.xAxis.bold ? "bold" : "normal",
                 transform: `translate(${l.x}, ${s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize * 2}) rotate(${e.value.style.layout.dataLabels.xAxis.rotation})`
-              }, _(u(O)(
+              }, C(u(O)(
                 e.value.style.layout.dataLabels.xAxis.formatter,
                 l.value / e.value.style.layout.dataLabels.xAxis.scale,
                 u(I)({
                   v: l.value / e.value.style.layout.dataLabels.xAxis.scale
                 }),
                 { datapoint: l, seriesIndex: a }
-              )), 9, al))), 256)),
+              )), 9, rl))), 256)),
               (i(!0), n(L, null, z(A.value.left, (l, a) => (i(), n("text", {
                 class: "vue-ui-age-pyramid-x-axis-label",
                 "font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
@@ -757,52 +773,52 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
                 "text-anchor": e.value.style.layout.dataLabels.xAxis.rotation > 0 ? "start" : e.value.style.layout.dataLabels.xAxis.rotation < 0 ? "end" : "middle",
                 "font-weight": e.value.style.layout.dataLabels.xAxis.bold ? "bold" : "normal",
                 transform: `translate(${l.x}, ${s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize * 2}) rotate(${e.value.style.layout.dataLabels.xAxis.rotation})`
-              }, _(u(O)(
+              }, C(u(O)(
                 e.value.style.layout.dataLabels.xAxis.formatter,
                 l.value / e.value.style.layout.dataLabels.xAxis.scale,
                 u(I)({
                   v: l.value / e.value.style.layout.dataLabels.xAxis.scale
                 }),
                 { datapoint: l, seriesIndex: a }
-              )), 9, ol))), 256))
+              )), 9, vl))), 256))
             ], 512),
             d("text", {
               x: s.value.right,
-              y: f.value.height,
+              y: g.value.height,
               "text-anchor": "end",
               "font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
               fill: e.value.style.layout.dataLabels.xAxis.color,
               "font-weight": e.value.style.layout.dataLabels.xAxis.bold ? "bold" : "normal"
-            }, _(e.value.style.layout.dataLabels.xAxis.translation), 9, sl)
-          ])) : y("", !0)
+            }, C(e.value.style.layout.dataLabels.xAxis.translation), 9, dl)
+          ])) : h("", !0)
         ]),
-        (i(!0), n(L, null, z(ne.dataset, (l, a) => (i(), n("g", null, [
+        (i(!0), n(L, null, z(re.dataset, (l, a) => (i(), n("g", null, [
           d("rect", {
             x: s.value.left,
             y: s.value.top + s.value.height / R.value * a - e.value.style.layout.bars.gap / 2,
             width: s.value.width <= 0 ? 1e-4 : s.value.width,
             height: s.value.height / R.value <= 0 ? 1e-4 : s.value.height / R.value,
-            fill: U.value !== null && U.value === a ? u(ue)(e.value.style.highlighter.color, e.value.style.highlighter.opacity) : "transparent",
-            onMouseover: (r) => at(a, l),
-            onMouseleave: (r) => lt(a, l),
-            onClick: (r) => tt(a, l)
-          }, null, 40, il)
+            fill: U.value !== null && U.value === a ? u(ne)(e.value.style.highlighter.color, e.value.style.highlighter.opacity) : "transparent",
+            onMouseover: (r) => ot(a, l),
+            onMouseleave: (r) => at(a, l),
+            onClick: (r) => lt(a, l)
+          }, null, 40, yl)
         ]))), 256)),
-        h(t.$slots, "svg", { svg: f.value }, void 0, !0)
-      ], 14, Rt)),
-      t.$slots.watermark ? (i(), n("div", ul, [
-        h(t.$slots, "watermark", P(M({ isPrinting: u(we) || u(ke) })), void 0, !0)
-      ])) : y("", !0),
-      h(t.$slots, "legend", { legend: $.value }, void 0, !0),
+        c(t.$slots, "svg", { svg: g.value }, void 0, !0)
+      ], 14, Et)),
+      t.$slots.watermark ? (i(), n("div", hl, [
+        c(t.$slots, "watermark", P(M({ isPrinting: u(we) || u(ke) })), void 0, !0)
+      ])) : h("", !0),
+      c(t.$slots, "legend", { legend: $.value }, void 0, !0),
       t.$slots.source ? (i(), n("div", {
         key: 5,
         ref_key: "source",
-        ref: ye,
+        ref: he,
         dir: "auto"
       }, [
-        h(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : y("", !0),
-      se(u(Ne), {
+        c(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : h("", !0),
+      ie(u(Be), {
         show: b.value.showTooltip && j.value,
         backgroundColor: e.value.style.tooltip.backgroundColor,
         color: e.value.style.tooltip.color,
@@ -822,22 +838,22 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
         smoothForce: e.value.style.tooltip.smoothForce,
         smoothSnapThreshold: e.value.style.tooltip.smoothSnapThreshold
       }, {
-        "tooltip-before": c(() => [
-          h(t.$slots, "tooltip-before", P(M({ ...ee.value })), void 0, !0)
+        "tooltip-before": f(() => [
+          c(t.$slots, "tooltip-before", P(M({ ...te.value })), void 0, !0)
         ]),
-        "tooltip-after": c(() => [
-          h(t.$slots, "tooltip-after", P(M({ ...ee.value })), void 0, !0)
+        "tooltip-after": f(() => [
+          c(t.$slots, "tooltip-after", P(M({ ...te.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
-      re.value && e.value.userOptions.buttons.table ? (i(), D(vt(E.value.component), dt({ key: 6 }, E.value.props, {
+      ve.value && e.value.userOptions.buttons.table ? (i(), D(ft(E.value.component), gt({ key: 6 }, E.value.props, {
         ref_key: "tableUnit",
         ref: N,
         onClose: $e
-      }), Ie({
-        content: c(() => [
-          (i(), D(u(Ue), {
-            key: `table_${fe.value}`,
+      }), Fe({
+        content: f(() => [
+          (i(), D(u(Ge), {
+            key: `table_${ge.value}`,
             colNames: W.value.colNames,
             head: W.value.head,
             body: W.value.body,
@@ -846,11 +862,11 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
             withCloseButton: !e.value.table.useDialog,
             onClose: $e
           }, {
-            th: c(({ th: l }) => [
-              ie(_(l), 1)
+            th: f(({ th: l }) => [
+              ue(C(l), 1)
             ]),
-            td: c(({ td: l }) => [
-              ie(_(l), 1)
+            td: f(({ td: l }) => [
+              ue(C(l), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
@@ -859,20 +875,20 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
       }, [
         e.value.table.useDialog ? {
           name: "title",
-          fn: c(() => [
-            ie(_(E.value.title), 1)
+          fn: f(() => [
+            ue(C(E.value.title), 1)
           ]),
           key: "0"
         } : void 0,
         e.value.table.useDialog ? {
           name: "actions",
-          fn: c(() => [
+          fn: f(() => [
             d("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
-              onClick: o[0] || (o[0] = (l) => le(e.value.userOptions.callbacks.csv))
+              onClick: o[0] || (o[0] = (l) => ae(e.value.userOptions.callbacks.csv))
             }, [
-              se(u(Be), {
+              ie(u(Ee), {
                 name: "excel",
                 stroke: E.value.props.color
               }, null, 8, ["stroke"])
@@ -880,11 +896,11 @@ const Ft = ["id"], Rt = ["xmlns", "viewBox"], Dt = ["x", "y", "width", "height"]
           ]),
           key: "1"
         } : void 0
-      ]), 1040)) : y("", !0),
-      u(ge) ? (i(), D(Ct, { key: 7 })) : y("", !0)
-    ], 46, Ft));
+      ]), 1040)) : h("", !0),
+      u(pe) ? (i(), D(St, { key: 7 })) : h("", !0)
+    ], 46, Bt));
   }
-}, kl = /* @__PURE__ */ It(nl, [["__scopeId", "data-v-278bbc54"]]);
+}, Sl = /* @__PURE__ */ Nt(cl, [["__scopeId", "data-v-060928e4"]]);
 export {
-  kl as default
+  Sl as default
 };