vue-data-ui 3.5.0 → 3.5.1

package/dist/{vue-ui-age-pyramid-CPAP3sNY.js → vue-ui-age-pyramid-Vqa9iYXE.js}

@@ -1,7 +1,7 @@
-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 P, createCommentVNode as h, renderSlot as c, createVNode as ie, createSlots as Fe, withCtx as f, normalizeProps as D, 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, x as p, X as wt, s as ne, i as Pe, a as O, d as I, P as kt, Q as Ct, G as _t, H as At } from "./lib-C_mNZmhD.js";
+import { defineAsyncComponent as $, computed as c, 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 M, createCommentVNode as f, renderSlot as d, createVNode as ie, withCtx as y, normalizeProps as w, guardReactiveProps as k, createSlots as Fe, createElementVNode as h, Fragment as S, renderList as I, toDisplayString as _, 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, x as p, X as wt, s as ne, i as Pe, a as F, d as R, P as kt, Q as Ct, G as At, H as _t } from "./lib-C_mNZmhD.js";
 import { t as De, u as Tt } from "./useResponsive-DfdjqQps.js";
-import { u as Lt, a as Me } from "./useNestedProp-BjZe1Y85.js";
+import { u as Lt, a as Me } from "./useNestedProp-DjGXw6S9.js";
 import { u as $t, B as St } from "./BaseScanner-BgWxam9d.js";
 import { u as zt } from "./usePrinter-DTzqpYKF.js";
 import { u as Ot } from "./useSvgExport-DrjCWun4.js";
@@ -9,7 +9,7 @@ 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 Pt from "./img-BecE5qXd.js";
-import Dt from "./Title-l36lOBMx.js";
+import Dt from "./Title-isbiM8i8.js";
 import { t as Mt } from "./themes-AUNCOb2G.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"], Qt = ["x", "y", "width", "height", "fill", "rx"], Jt = ["x", "y", "width", "height", "fill", "rx"], Kt = { 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 = {
@@ -32,7 +32,7 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
     }
   },
   setup(re, { expose: Ne }) {
-    const Be = T(() => import("./Tooltip-oWCO1HKy.js")), Ee = T(() => import("./BaseIcon-BmMbm4d0.js")), Ue = T(() => import("./vue-ui-accordion-CZ0thhxa.js")), Ge = T(() => import("./DataTable-BT7VF2ua.js")), He = T(() => import("./PenAndPaper-DSvu9dwa.js")), We = T(() => import("./UserOptions-CGnQt6Fd.js")), Ve = T(() => import("./PackageVersion-Cyx_s25h.js")), Xe = T(() => import("./BaseDraggableDialog-ymf2sfB8.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), Q = v(null), e = v(ee()), { loading: pe, FINAL_DATASET: G, manualLoading: J } = $t({
+    const Be = $(() => import("./Tooltip-oWCO1HKy.js")), Ee = $(() => import("./BaseIcon-BmMbm4d0.js")), Ue = $(() => import("./vue-ui-accordion-CqhVCfc2.js")), Ge = $(() => import("./DataTable-BT7VF2ua.js")), He = $(() => import("./PenAndPaper-SZQIAgkg.js")), We = $(() => import("./UserOptions-CGnQt6Fd.js")), Ve = $(() => import("./PackageVersion-DQvyATVa.js")), Xe = $(() => import("./BaseDraggableDialog-ymf2sfB8.js")), { vue_ui_age_pyramid: je } = Lt(), x = re, ve = c(() => !!x.dataset && x.dataset.length), C = v(bt()), j = v(!1), Y = v(""), U = v(null), de = v(0), A = v(null), ye = v(null), he = v(null), ce = v(null), fe = v(0), ge = v(0), q = v(null), N = v(null), Q = v(null), e = v(ee()), { loading: pe, FINAL_DATASET: G, manualLoading: J } = $t({
       ...yt(x),
       FINAL_CONFIG: e,
       prepareConfig: ee,
@@ -99,11 +99,11 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
     }, { deep: !0 }), X(() => x.dataset, (t) => {
       Array.isArray(t) && t.length > 0 && (J.value = !1);
     }, { deep: !0 });
-    const _ = ze(null), F = ze(null);
+    const T = ze(null), P = ze(null);
     ht(() => {
       me();
     });
-    const Ye = y(() => !!e.value.debug);
+    const Ye = c(() => !!e.value.debug);
     function me() {
       if (Re(x.dataset) && (mt({
         componentName: "VueUiAgePyramid",
@@ -112,7 +112,7 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
       }), J.value = !0), Re(x.dataset) || (J.value = e.value.loading), e.value.responsive) {
         const t = De(() => {
           const { width: o, height: l } = Tt({
-            chart: k.value,
+            chart: A.value,
             title: e.value.style.title.text ? ye.value : null,
             source: he.value,
             noTitle: ce.value
@@ -121,17 +121,17 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
             g.value.width = o, g.value.height = l;
           });
         });
-        _.value && (F.value && _.value.unobserve(F.value), _.value.disconnect()), _.value = new ResizeObserver(t), F.value = k.value.parentNode, _.value.observe(F.value);
+        T.value && (P.value && T.value.unobserve(P.value), T.value.disconnect()), T.value = new ResizeObserver(t), P.value = A.value.parentNode, T.value.observe(P.value);
       }
     }
     Oe(() => {
-      _.value && (F.value && _.value.unobserve(F.value), _.value.disconnect());
+      T.value && (P.value && T.value.unobserve(P.value), T.value.disconnect());
     });
-    const { isPrinting: we, isImaging: ke, generatePdf: Ce, generateImage: _e } = zt({
-      elementId: `vue-ui-age-pyramid_${w.value}`,
+    const { isPrinting: we, isImaging: ke, generatePdf: Ce, generateImage: Ae } = zt({
+      elementId: `vue-ui-age-pyramid_${C.value}`,
       fileName: e.value.style.title.text || "vue-ui-age-pyramid",
       options: e.value.userOptions.print
-    }), qe = y(() => e.value.userOptions.show && !e.value.style.title.text), b = v({
+    }), qe = c(() => e.value.userOptions.show && !e.value.style.title.text), b = v({
       showTable: e.value.table.show,
       showTooltip: e.value.style.tooltip.show
     });
@@ -144,7 +144,7 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
     const g = v({
       height: e.value.style.height,
       width: e.value.style.width
-    }), Qe = y(() => g.value.width), Je = y(() => g.value.height), H = v(0), Ke = De((t) => {
+    }), Qe = c(() => g.value.width), Je = c(() => g.value.height), H = v(0), Ke = De((t) => {
       H.value = t;
     }, 100);
     ct((t) => {
@@ -157,7 +157,7 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
     }), Oe(() => {
       H.value = 0;
     });
-    const s = y(() => {
+    const s = c(() => {
       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,
@@ -176,7 +176,7 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
           left: o + t / 2 + e.value.style.layout.centerSlit.width
         }
       };
-    }), Ze = y(() => G.value.map((t) => e.value.style.layout.dataLabels.yAxis.display === "age" ? t[1] : t[0])), A = y(() => {
+    }), Ze = c(() => G.value.map((t) => e.value.style.layout.dataLabels.yAxis.display === "age" ? t[1] : t[0])), L = c(() => {
       const t = et(B.value / 5), o = [], l = [];
       for (let a = 0; a <= 5; a += 1) {
         const r = t * a, m = t * (a - 5);
@@ -199,7 +199,7 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
       let a;
       return t < 0, a = Math.round(t / l) * l, a;
     }
-    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) => ({
+    const B = c(() => Math.max(...G.value.flatMap((t) => t.slice(-2).map((o) => p(o))))), D = c(() => G.value.length), tt = c(() => G.value.map((t) => ({
       segment: t[0],
       age: t[1],
       left: {
@@ -210,8 +210,8 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
         value: t[3],
         proportionToMax: t[3] / B.value
       }
-    }))), $ = 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;
+    }))), z = c(() => tt.value.map((t, o) => {
+      const l = s.value.top + s.value.height / D.value * o, a = s.value.height / D.value - e.value.style.layout.bars.gap;
       return {
         segment: t.segment,
         age: t.age,
@@ -247,11 +247,11 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
       e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: le(o), seriesIndex: t }), U.value = t, te.value = {
         datapoint: o,
         seriesIndex: t,
-        series: $.value,
+        series: z.value,
         config: e.value
       };
       const l = e.value.style.tooltip.customFormat;
-      if (_t(l) && At(() => l({
+      if (At(l) && _t(() => l({
         seriesIndex: t,
         datapoint: {
           segment: o[0],
@@ -259,7 +259,7 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
           left: o[2],
           right: o[3]
         },
-        series: $.value,
+        series: z.value,
         config: e.value
       })))
         Y.value = l({
@@ -270,31 +270,31 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
             left: o[2],
             right: o[3]
           },
-          series: $.value,
+          series: z.value,
           config: e.value
         });
       else {
         let a = "";
-        const r = $.value[t];
-        a += `<div><b>${r.segment}</b></div>`, a += `<div>${e.value.translations.age}: ${O(
+        const r = z.value[t];
+        a += `<div><b>${r.segment}</b></div>`, a += `<div>${e.value.translations.age}: ${F(
           e.value.style.layout.dataLabels.yAxis.formatter,
           p(r.age),
-          I({ v: p(r.age) }),
+          R({ v: p(r.age) }),
           { datapoint: o, seriesIndex: t }
-        )}</div>`, a += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}">`, a += '<div style="display:flex; flex-direction:row;gap:12px">', a += `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center"><svg viewBox="0 0 12 12" height="12" width="12"><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.underlayer}"/><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_left_${w.value})` : e.value.style.layout.bars.left.color}"/></svg><div>${e.value.translations.female}</div><div><b>${O(
+        )}</div>`, a += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}">`, a += '<div style="display:flex; flex-direction:row;gap:12px">', a += `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center"><svg viewBox="0 0 12 12" height="12" width="12"><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.underlayer}"/><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_left_${C.value})` : e.value.style.layout.bars.left.color}"/></svg><div>${e.value.translations.female}</div><div><b>${F(
           e.value.style.layout.dataLabels.xAxis.formatter,
           p(r.left.value),
-          I({ v: p(r.left.value) }),
+          R({ v: p(r.left.value) }),
           { datapoint: o, seriesIndex: t }
-        )}</b></div></div>`, a += `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center"><svg viewBox="0 0 12 12" height="12" width="12"><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.underlayer}"/><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_right_${w.value})` : e.value.style.layout.bars.right.color}"/></svg><div>${e.value.translations.male}</div><div><b>${O(
+        )}</b></div></div>`, a += `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center"><svg viewBox="0 0 12 12" height="12" width="12"><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.underlayer}"/><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_right_${C.value})` : e.value.style.layout.bars.right.color}"/></svg><div>${e.value.translations.male}</div><div><b>${F(
           e.value.style.layout.dataLabels.xAxis.formatter,
           p(r.right.value),
-          I({ v: p(r.right.value) }),
+          R({ v: p(r.right.value) }),
           { datapoint: o, seriesIndex: t }
-        )}</b></div></div>`, a += "</div>", a += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}"><div>${e.value.translations.total}</div><div><b>${O(
+        )}</b></div></div>`, a += "</div>", a += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}"><div>${e.value.translations.total}</div><div><b>${F(
           e.value.style.layout.dataLabels.xAxis.formatter,
           p(r.right.value) + p(r.left.value),
-          I({ v: p(r.right.value) + p(r.left.value) }),
+          R({ v: p(r.right.value) + p(r.left.value) }),
           { datapoint: o, seriesIndex: t }
         )}</b></div></div>`, a += "</div>", Y.value = `<div>${a}</div>`;
       }
@@ -312,7 +312,7 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
         t ? t(r) : Ct({ csvContent: r, title: e.value.style.title.text || "vue-ui-heatmap" });
       });
     }
-    const W = y(() => {
+    const W = c(() => {
       const t = [
         e.value.translations.year,
         e.value.translations.age,
@@ -339,9 +339,9 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
         breakpoint: e.value.table.responsiveBreakpoint
       };
       return { head: t, body: o, config: l, colNames: t };
-    }), S = v(!1);
-    function Ae(t) {
-      S.value = t, de.value += 1;
+    }), O = v(!1);
+    function _e(t) {
+      O.value = t, de.value += 1;
     }
     function Te() {
       b.value.showTable = !b.value.showTable;
@@ -354,8 +354,8 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
       V.value = !V.value;
     }
     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 Pt({ domElement: k.value, base64: !0, img: !0, scale: t });
+      if (!A.value) return;
+      const { width: o, height: l } = A.value.getBoundingClientRect(), a = o / l, { imageUri: r, base64: m } = await Pt({ domElement: A.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: r,
         base64: m,
@@ -365,7 +365,7 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
         aspectRatio: a
       };
     }
-    const it = v([]), ut = v({ start: 0, end: $.value.length });
+    const it = v([]), ut = v({ start: 0, end: z.value.length });
     Rt({
       timeLabelsEls: q,
       timeLabels: it,
@@ -379,7 +379,7 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
       targetClass: ".vue-ui-age-pyramid-x-axis-label",
       rotation: e.value.style.layout.dataLabels.xAxis.autoRotate.angle
     });
-    const E = y(() => {
+    const E = c(() => {
       const t = e.value.table.useDialog && !e.value.table.show, o = b.value.showTable;
       return {
         component: t ? Xe : Ue,
@@ -389,8 +389,8 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
           color: e.value.table.th.color,
           headerColor: e.value.table.th.color,
           headerBg: e.value.table.th.backgroundColor,
-          isFullscreen: S.value,
-          fullscreenParent: k.value,
+          isFullscreen: O.value,
+          fullscreenParent: A.value,
           forcedWidth: Math.min(800, window.innerWidth * 0.8)
         } : {
           hideDetails: !0,
@@ -415,7 +415,7 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
     function $e() {
       b.value.showTable = !1, Q.value && Q.value.setTableIconState(!1);
     }
-    const nt = y(() => e.value.style.backgroundColor), rt = y(() => e.value.style.title), { exportSvg: vt, getSvg: dt } = Ot({
+    const nt = c(() => e.value.style.backgroundColor), rt = c(() => e.value.style.title), { exportSvg: vt, getSvg: dt } = Ot({
       svg: Z,
       title: rt,
       backgroundColor: nt
@@ -431,43 +431,63 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
       getImage: st,
       generatePdf: Ce,
       generateCsv: ae,
-      generateImage: _e,
+      generateImage: Ae,
       generateSvg: Se,
       toggleTable: Te,
       toggleTooltip: Le,
       toggleAnnotator: oe,
-      toggleFullscreen: Ae
+      toggleFullscreen: _e
     }), (t, o) => (i(), n("div", {
-      class: Ie(`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 ${O.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
       ref_key: "agePyramid",
-      ref: k,
-      id: `vue-ui-age-pyramid_${w.value}`,
+      ref: A,
+      id: `vue-ui-age-pyramid_${C.value}`,
       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(), P(u(He), {
+      e.value.userOptions.buttons.annotator ? (i(), M(u(He), {
         key: 0,
         svgRef: u(Z),
         backgroundColor: e.value.style.backgroundColor,
         color: e.value.style.color,
         active: V.value,
         onClose: oe
-      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : h("", !0),
+      }, {
+        "annotator-action-close": y(() => [
+          d(t.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": y(({ color: l }) => [
+          d(t.$slots, "annotator-action-color", w(k({ color: l })), void 0, !0)
+        ]),
+        "annotator-action-draw": y(({ mode: l }) => [
+          d(t.$slots, "annotator-action-draw", w(k({ mode: l })), void 0, !0)
+        ]),
+        "annotator-action-undo": y(({ disabled: l }) => [
+          d(t.$slots, "annotator-action-undo", w(k({ disabled: l })), void 0, !0)
+        ]),
+        "annotator-action-redo": y(({ disabled: l }) => [
+          d(t.$slots, "annotator-action-redo", w(k({ disabled: l })), void 0, !0)
+        ]),
+        "annotator-action-delete": y(({ disabled: l }) => [
+          d(t.$slots, "annotator-action-delete", w(k({ disabled: l })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : f("", !0),
       qe.value ? (i(), n("div", {
         key: 1,
         ref_key: "noTitle",
         ref: ce,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : h("", !0),
+      }, null, 512)) : f("", !0),
       e.value.style.title.text ? (i(), n("div", {
         key: 2,
         ref_key: "chartTitle",
         ref: ye,
         style: "width:100%;background:transparent"
       }, [
-        (i(), P(Dt, {
+        (i(), M(Dt, {
           key: `title_${fe.value}`,
           config: {
             title: {
@@ -480,8 +500,8 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : h("", !0),
-      e.value.userOptions.show && ve.value && (u(xe) || u(K)) ? (i(), P(u(We), {
+      ], 512)) : f("", !0),
+      e.value.userOptions.show && ve.value && (u(xe) || u(K)) ? (i(), M(u(We), {
         ref_key: "userOptionsRef",
         ref: Q,
         key: `user_options_${de.value}`,
@@ -489,7 +509,7 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
         color: e.value.style.color,
         isImaging: u(ke),
         isPrinting: u(we),
-        uid: w.value,
+        uid: C.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasXls: e.value.userOptions.buttons.csv,
@@ -497,20 +517,20 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
         hasSvg: e.value.userOptions.buttons.svg,
         hasTable: e.value.userOptions.buttons.table,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: S.value,
+        isFullscreen: O.value,
         isTooltip: b.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: k.value,
+        chartElement: A.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
         isAnnotation: V.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
         tableDialog: e.value.table.useDialog,
-        onToggleFullscreen: Ae,
+        onToggleFullscreen: _e,
         onGeneratePdf: u(Ce),
         onGenerateCsv: ae,
-        onGenerateImage: u(_e),
+        onGenerateImage: u(Ae),
         onGenerateSvg: Se,
         onToggleTable: Te,
         onToggleTooltip: Le,
@@ -521,73 +541,73 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
       }, Fe({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: f(({ isOpen: l, color: a }) => [
-            c(t.$slots, "menuIcon", D(M({ isOpen: l, color: a })), void 0, !0)
+          fn: y(({ isOpen: l, color: a }) => [
+            d(t.$slots, "menuIcon", w(k({ isOpen: l, color: a })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: f(() => [
-            c(t.$slots, "optionTooltip", {}, void 0, !0)
+          fn: y(() => [
+            d(t.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: f(() => [
-            c(t.$slots, "optionPdf", {}, void 0, !0)
+          fn: y(() => [
+            d(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: f(() => [
-            c(t.$slots, "optionCsv", {}, void 0, !0)
+          fn: y(() => [
+            d(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: f(() => [
-            c(t.$slots, "optionImg", {}, void 0, !0)
+          fn: y(() => [
+            d(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionSvg ? {
           name: "optionSvg",
-          fn: f(() => [
-            c(t.$slots, "optionSvg", {}, void 0, !0)
+          fn: y(() => [
+            d(t.$slots, "optionSvg", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
-          fn: f(() => [
-            c(t.$slots, "optionTable", {}, void 0, !0)
+          fn: y(() => [
+            d(t.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "6"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: f(({ toggleFullscreen: l, isFullscreen: a }) => [
-            c(t.$slots, "optionFullscreen", D(M({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
+          fn: y(({ toggleFullscreen: l, isFullscreen: a }) => [
+            d(t.$slots, "optionFullscreen", w(k({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
           ]),
           key: "7"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: f(({ toggleAnnotator: l, isAnnotator: a }) => [
-            c(t.$slots, "optionAnnotator", D(M({ toggleAnnotator: l, isAnnotator: a })), void 0, !0)
+          fn: y(({ toggleAnnotator: l, isAnnotator: a }) => [
+            d(t.$slots, "optionAnnotator", w(k({ toggleAnnotator: l, isAnnotator: a })), void 0, !0)
           ]),
           key: "8"
         } : void 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),
+      ]), 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"])) : f("", !0),
       (i(), n("svg", {
         ref_key: "svgRef",
         ref: Z,
         xmlns: u(wt),
-        class: Ie({ "vue-data-ui-fullscreen--on": S.value, "vue-data-ui-fulscreen--off": !S.value }),
+        class: Ie({ "vue-data-ui-fullscreen--on": O.value, "vue-data-ui-fulscreen--off": !O.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}`)
       }, [
@@ -602,44 +622,44 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
             pointerEvents: "none"
           }
         }, [
-          c(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, Ut)) : h("", !0),
-        d("defs", null, [
-          d("linearGradient", {
-            id: `age_pyramid_left_${w.value}`,
+          d(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Ut)) : f("", !0),
+        h("defs", null, [
+          h("linearGradient", {
+            id: `age_pyramid_left_${C.value}`,
             x1: "0%",
             y1: "0%",
             x2: "100%",
             y2: "0%"
           }, [
-            d("stop", {
+            h("stop", {
               offset: "0%",
               "stop-color": e.value.style.layout.bars.left.color
             }, null, 8, Ht),
-            d("stop", {
+            h("stop", {
               offset: "100%",
               "stop-color": u(ne)(u(Pe)(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}`,
+          h("linearGradient", {
+            id: `age_pyramid_right_${C.value}`,
             x1: "0%",
             y1: "0%",
             x2: "100%",
             y2: "0%"
           }, [
-            d("stop", {
+            h("stop", {
               offset: "0%",
               "stop-color": u(ne)(u(Pe)(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", {
+            h("stop", {
               offset: "100%",
               "stop-color": e.value.style.layout.bars.right.color
             }, null, 8, jt)
           ], 8, Vt)
         ]),
-        (i(!0), n(L, null, z($.value, (l, a) => (i(), n("g", null, [
-          d("rect", {
+        (i(!0), n(S, null, I(z.value, (l, a) => (i(), n("g", null, [
+          h("rect", {
             x: l.left.x,
             y: l.left.y,
             width: u(p)(l.left.width <= 0 ? 1e-4 : l.left.width),
@@ -647,15 +667,15 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
             fill: e.value.style.layout.bars.gradient.underlayer,
             rx: e.value.style.layout.bars.borderRadius
           }, null, 8, Yt),
-          d("rect", {
+          h("rect", {
             x: l.left.x,
             y: l.left.y,
             width: l.left.width <= 0 ? 1e-4 : l.left.width,
             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,
+            fill: e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_left_${C.value})` : l.left.color,
             rx: e.value.style.layout.bars.borderRadius
           }, null, 8, qt),
-          d("rect", {
+          h("rect", {
             x: l.right.x,
             y: l.right.y,
             width: l.right.width <= 0 ? 1e-4 : l.right.width,
@@ -663,74 +683,74 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
             fill: e.value.style.layout.bars.gradient.underlayer,
             rx: e.value.style.layout.bars.borderRadius
           }, null, 8, Qt),
-          d("rect", {
+          h("rect", {
             x: l.right.x,
             y: l.right.y,
             width: l.right.width <= 0 ? 1e-4 : l.right.width,
             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,
+            fill: e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_right_${C.value})` : l.right.color,
             rx: e.value.style.layout.bars.borderRadius
           }, null, 8, Jt)
         ]))), 256)),
-        d("g", null, [
+        h("g", null, [
           e.value.style.layout.dataLabels.sideTitles.show ? (i(), n("g", Kt, [
-            d("text", {
+            h("text", {
               x: s.value.left,
               y: e.value.style.layout.dataLabels.sideTitles.fontSize,
               fill: e.value.style.layout.dataLabels.sideTitles.useSideColor ? e.value.style.layout.bars.left.color : e.value.style.layout.dataLabels.sideTitles.color,
               "font-size": e.value.style.layout.dataLabels.sideTitles.fontSize,
               "text-anchor": "start",
               "font-weight": e.value.style.layout.dataLabels.sideTitles.bold ? "bold" : "normal"
-            }, C(e.value.translations.female), 9, Zt),
-            d("text", {
+            }, _(e.value.translations.female), 9, Zt),
+            h("text", {
               x: s.value.right,
               y: e.value.style.layout.dataLabels.sideTitles.fontSize,
               fill: e.value.style.layout.dataLabels.sideTitles.useSideColor ? e.value.style.layout.bars.right.color : e.value.style.layout.dataLabels.sideTitles.color,
               "font-size": e.value.style.layout.dataLabels.sideTitles.fontSize,
               "text-anchor": "end",
               "font-weight": e.value.style.layout.dataLabels.sideTitles.bold ? "bold" : "normal"
-            }, C(e.value.translations.male), 9, el)
-          ])) : h("", !0),
+            }, _(e.value.translations.male), 9, el)
+          ])) : f("", !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, [
+            (i(!0), n(S, null, I(Ze.value, (l, a) => (i(), n(S, null, [
               a % e.value.style.layout.dataLabels.yAxis.showEvery === 0 ? (i(), n("text", {
                 key: 0,
                 x: s.value.centerX,
-                y: s.value.top + s.value.height / R.value * a + e.value.style.layout.dataLabels.yAxis.fontSize / 3,
+                y: s.value.top + s.value.height / D.value * a + e.value.style.layout.dataLabels.yAxis.fontSize / 3,
                 "text-anchor": "middle",
                 "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"
-              }, C(u(O)(
+              }, _(u(F)(
                 e.value.style.layout.dataLabels.yAxis.formatter,
                 l,
-                u(I)({ v: l }),
+                u(R)({ v: l }),
                 { datapoint: l, seriesIndex: a }
-              )), 9, ll)) : h("", !0)
+              )), 9, ll)) : f("", !0)
             ], 64))), 256))
-          ])) : h("", !0),
+          ])) : f("", !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,
+              h("line", {
+                x1: L.value.right[0].x,
+                x2: L.value.right.at(-1).x,
                 y1: s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
                 y2: s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
                 stroke: e.value.style.layout.grid.stroke,
                 "stroke-width": e.value.style.layout.grid.strokeWidth,
                 "stroke-linecap": "round"
               }, null, 8, sl),
-              d("line", {
-                x1: A.value.left[0].x,
-                x2: A.value.left.at(-1).x,
+              h("line", {
+                x1: L.value.left[0].x,
+                x2: L.value.left.at(-1).x,
                 y1: s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
                 y2: s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
                 stroke: e.value.style.layout.grid.stroke,
                 "stroke-width": e.value.style.layout.grid.strokeWidth,
                 "stroke-linecap": "round"
               }, null, 8, il)
-            ])) : h("", !0),
-            (i(!0), n(L, null, z(A.value.right, (l, a) => (i(), n("g", null, [
+            ])) : f("", !0),
+            (i(!0), n(S, null, I(L.value.right, (l, a) => (i(), n("g", null, [
               e.value.style.layout.grid.show ? (i(), n("line", {
                 key: 0,
                 x1: l.x,
@@ -740,9 +760,9 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
                 stroke: e.value.style.layout.grid.stroke,
                 "stroke-width": e.value.style.layout.grid.strokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, ul)) : h("", !0)
+              }, null, 8, ul)) : f("", !0)
             ]))), 256)),
-            (i(!0), n(L, null, z(A.value.left, (l, a) => (i(), n("g", null, [
+            (i(!0), n(S, null, I(L.value.left, (l, a) => (i(), n("g", null, [
               e.value.style.layout.grid.show ? (i(), n("line", {
                 key: 0,
                 x1: l.x,
@@ -752,79 +772,79 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
                 stroke: e.value.style.layout.grid.stroke,
                 "stroke-width": e.value.style.layout.grid.strokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, nl)) : h("", !0)
+              }, null, 8, nl)) : f("", !0)
             ]))), 256)),
-            d("g", {
+            h("g", {
               ref_key: "xAxisLabels",
               ref: q
             }, [
-              (i(!0), n(L, null, z(A.value.right, (l, a) => (i(), n("text", {
+              (i(!0), n(S, null, I(L.value.right, (l, a) => (i(), n("text", {
                 class: "vue-ui-age-pyramid-x-axis-label",
                 "font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
                 fill: e.value.style.layout.dataLabels.xAxis.color,
                 "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})`
-              }, C(u(O)(
+              }, _(u(F)(
                 e.value.style.layout.dataLabels.xAxis.formatter,
                 l.value / e.value.style.layout.dataLabels.xAxis.scale,
-                u(I)({
+                u(R)({
                   v: l.value / e.value.style.layout.dataLabels.xAxis.scale
                 }),
                 { datapoint: l, seriesIndex: a }
               )), 9, rl))), 256)),
-              (i(!0), n(L, null, z(A.value.left, (l, a) => (i(), n("text", {
+              (i(!0), n(S, null, I(L.value.left, (l, a) => (i(), n("text", {
                 class: "vue-ui-age-pyramid-x-axis-label",
                 "font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
                 fill: e.value.style.layout.dataLabels.xAxis.color,
                 "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})`
-              }, C(u(O)(
+              }, _(u(F)(
                 e.value.style.layout.dataLabels.xAxis.formatter,
                 l.value / e.value.style.layout.dataLabels.xAxis.scale,
-                u(I)({
+                u(R)({
                   v: l.value / e.value.style.layout.dataLabels.xAxis.scale
                 }),
                 { datapoint: l, seriesIndex: a }
               )), 9, vl))), 256))
             ], 512),
-            d("text", {
+            h("text", {
               x: s.value.right,
               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"
-            }, C(e.value.style.layout.dataLabels.xAxis.translation), 9, dl)
-          ])) : h("", !0)
+            }, _(e.value.style.layout.dataLabels.xAxis.translation), 9, dl)
+          ])) : f("", !0)
         ]),
-        (i(!0), n(L, null, z(re.dataset, (l, a) => (i(), n("g", null, [
-          d("rect", {
+        (i(!0), n(S, null, I(re.dataset, (l, a) => (i(), n("g", null, [
+          h("rect", {
             x: s.value.left,
-            y: s.value.top + s.value.height / R.value * a - e.value.style.layout.bars.gap / 2,
+            y: s.value.top + s.value.height / D.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,
+            height: s.value.height / D.value <= 0 ? 1e-4 : s.value.height / D.value,
             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)),
-        c(t.$slots, "svg", { svg: g.value }, void 0, !0)
+        d(t.$slots, "svg", { svg: g.value }, void 0, !0)
       ], 14, Et)),
       t.$slots.watermark ? (i(), n("div", hl, [
-        c(t.$slots, "watermark", D(M({ isPrinting: u(we) || u(ke) })), void 0, !0)
-      ])) : h("", !0),
-      c(t.$slots, "legend", { legend: $.value }, void 0, !0),
+        d(t.$slots, "watermark", w(k({ isPrinting: u(we) || u(ke) })), void 0, !0)
+      ])) : f("", !0),
+      d(t.$slots, "legend", { legend: z.value }, void 0, !0),
       t.$slots.source ? (i(), n("div", {
         key: 5,
         ref_key: "source",
         ref: he,
         dir: "auto"
       }, [
-        c(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : h("", !0),
+        d(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : f("", !0),
       ie(u(Be), {
         show: b.value.showTooltip && j.value,
         backgroundColor: e.value.style.tooltip.backgroundColor,
@@ -836,30 +856,30 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
         backgroundOpacity: e.value.style.tooltip.backgroundOpacity,
         position: e.value.style.tooltip.position,
         offsetY: e.value.style.tooltip.offsetY,
-        parent: k.value,
+        parent: A.value,
         content: Y.value,
-        isFullscreen: S.value,
+        isFullscreen: O.value,
         isCustom: e.value.style.tooltip.customFormat && typeof e.value.style.tooltip.customFormat == "function",
         smooth: e.value.style.tooltip.smooth,
         backdropFilter: e.value.style.tooltip.backdropFilter,
         smoothForce: e.value.style.tooltip.smoothForce,
         smoothSnapThreshold: e.value.style.tooltip.smoothSnapThreshold
       }, {
-        "tooltip-before": f(() => [
-          c(t.$slots, "tooltip-before", D(M({ ...te.value })), void 0, !0)
+        "tooltip-before": y(() => [
+          d(t.$slots, "tooltip-before", w(k({ ...te.value })), void 0, !0)
         ]),
-        "tooltip-after": f(() => [
-          c(t.$slots, "tooltip-after", D(M({ ...te.value })), void 0, !0)
+        "tooltip-after": y(() => [
+          d(t.$slots, "tooltip-after", w(k({ ...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"]),
-      ve.value && e.value.userOptions.buttons.table ? (i(), P(ft(E.value.component), gt({ key: 6 }, E.value.props, {
+      ve.value && e.value.userOptions.buttons.table ? (i(), M(ft(E.value.component), gt({ key: 6 }, E.value.props, {
         ref_key: "tableUnit",
         ref: N,
         onClose: $e
       }), Fe({
-        content: f(() => [
-          (i(), P(u(Ge), {
+        content: y(() => [
+          (i(), M(u(Ge), {
             key: `table_${ge.value}`,
             colNames: W.value.colNames,
             head: W.value.head,
@@ -869,11 +889,11 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
             withCloseButton: !e.value.table.useDialog,
             onClose: $e
           }, {
-            th: f(({ th: l }) => [
-              ue(C(l), 1)
+            th: y(({ th: l }) => [
+              ue(_(l), 1)
             ]),
-            td: f(({ td: l }) => [
-              ue(C(l), 1)
+            td: y(({ td: l }) => [
+              ue(_(l), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
@@ -882,15 +902,15 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
       }, [
         e.value.table.useDialog ? {
           name: "title",
-          fn: f(() => [
-            ue(C(E.value.title), 1)
+          fn: y(() => [
+            ue(_(E.value.title), 1)
           ]),
           key: "0"
         } : void 0,
         e.value.table.useDialog ? {
           name: "actions",
-          fn: f(() => [
-            d("button", {
+          fn: y(() => [
+            h("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
               onClick: o[0] || (o[0] = (l) => ae(e.value.userOptions.callbacks.csv))
@@ -903,11 +923,11 @@ const Bt = ["id"], Et = ["xmlns", "viewBox"], Ut = ["x", "y", "width", "height"]
           ]),
           key: "1"
         } : void 0
-      ]), 1040)) : h("", !0),
-      u(pe) ? (i(), P(St, { key: 7 })) : h("", !0)
+      ]), 1040)) : f("", !0),
+      u(pe) ? (i(), M(St, { key: 7 })) : f("", !0)
     ], 46, Bt));
   }
-}, Sl = /* @__PURE__ */ Nt(cl, [["__scopeId", "data-v-9c2f0d51"]]);
+}, Sl = /* @__PURE__ */ Nt(cl, [["__scopeId", "data-v-7049b7f2"]]);
 export {
   Sl as default
 };