vue-data-ui 3.0.23 → 3.1.1

package/dist/{vue-ui-age-pyramid-CkXXNN79.js → vue-ui-age-pyramid-rZFdUsgz.js}

@@ -1,19 +1,19 @@
-import { defineAsyncComponent as R, computed as g, ref as v, toRefs as tt, watch as Z, shallowRef as _e, onMounted as lt, onBeforeUnmount as Ae, watchEffect as at, createElementBlock as n, openBlock as i, unref as u, normalizeStyle as ee, normalizeClass as Le, createBlock as M, createCommentVNode as y, renderSlot as h, createVNode as Ce, createSlots as ot, withCtx as p, normalizeProps as P, guardReactiveProps as N, createElementVNode as d, Fragment as L, renderList as $, toDisplayString as C, createTextVNode as Te, nextTick as st } from "vue";
-import { u as it, c as ut, t as nt, b as rt, o as $e, f as vt, h as f, X as dt, s as te, x as Se, k as S, i as z, v as yt, w as ht, y as ct, z as ft } from "./index-BEuUtONc.js";
-import { t as ze, u as gt } from "./useResponsive-DfdjqQps.js";
-import { u as Ie } from "./useNestedProp-DhLFhguL.js";
-import { u as pt } from "./usePrinter-DiB0_UNt.js";
-import { u as bt } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as xt } from "./useChartAccessibility-9icAAmYg.js";
-import mt from "./Title-D_e0SFWS.js";
-import wt from "./img-z5p1gGfY.js";
-import { u as kt } from "./useTimeLabelCollider-CIsgDrl9.js";
-import { u as _t, B as At } from "./useLoading-D7YHNtLX.js";
-import { _ as Lt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"], St = ["id"], zt = ["stop-color"], It = ["stop-color"], Ot = ["id"], Ft = ["stop-color"], Rt = ["stop-color"], Mt = ["x", "y", "width", "height", "fill", "rx"], Pt = ["x", "y", "width", "height", "fill", "rx"], Nt = ["x", "y", "width", "height", "fill", "rx"], Et = ["x", "y", "width", "height", "fill", "rx"], Dt = { key: 0 }, Bt = ["x", "y", "fill", "font-size", "font-weight"], Gt = ["x", "y", "fill", "font-size", "font-weight"], Ht = { key: 1 }, Ut = ["x", "y", "font-size", "fill", "font-weight"], Vt = { key: 2 }, Wt = { key: 0 }, Xt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], jt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Yt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], qt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Jt = ["font-size", "fill", "text-anchor", "font-weight", "transform"], Kt = ["font-size", "fill", "text-anchor", "font-weight", "transform"], Qt = ["x", "y", "font-size", "fill", "font-weight"], Zt = ["x", "y", "width", "height", "fill", "onMouseover", "onMouseleave", "onClick"], el = {
+import { defineAsyncComponent as L, computed as g, ref as v, toRefs as it, watch as X, shallowRef as Te, onMounted as ut, onBeforeUnmount as $e, watchEffect as nt, createElementBlock as n, openBlock as i, unref as u, normalizeStyle as ae, normalizeClass as Se, createBlock as P, createCommentVNode as y, renderSlot as h, createVNode as oe, createSlots as ze, withCtx as c, normalizeProps as M, guardReactiveProps as D, createElementVNode as d, Fragment as T, renderList as z, toDisplayString as C, resolveDynamicComponent as rt, mergeProps as vt, createTextVNode as se, nextTick as dt } from "vue";
+import { u as yt, c as ht, t as ct, b as ft, o as Ie, f as gt, h as p, X as pt, s as ie, x as Oe, k as I, i as O, v as bt, w as xt, y as mt, z as wt } from "./index-BKQqb9lF.js";
+import { t as Fe, u as kt } from "./useResponsive-DfdjqQps.js";
+import { u as Ct, B as _t } from "./BaseScanner-BgWxam9d.js";
+import { u as At } from "./usePrinter-BzuXiubT.js";
+import { u as Re } from "./useNestedProp-aBOhgs4U.js";
+import { u as Lt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Tt } from "./useChartAccessibility-9icAAmYg.js";
+import { u as $t } from "./useTimeLabelCollider-CIsgDrl9.js";
+import St from "./img-gBDz7xQQ.js";
+import zt from "./Title-Dz-j6ERs.js";
+import { _ as It } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Ot = ["id"], Ft = ["xmlns", "viewBox"], Rt = ["x", "y", "width", "height"], Pt = ["id"], Mt = ["stop-color"], Dt = ["stop-color"], Nt = ["id"], Bt = ["stop-color"], Et = ["stop-color"], Ut = ["x", "y", "width", "height", "fill", "rx"], Gt = ["x", "y", "width", "height", "fill", "rx"], Ht = ["x", "y", "width", "height", "fill", "rx"], Wt = ["x", "y", "width", "height", "fill", "rx"], Vt = { key: 0 }, Xt = ["x", "y", "fill", "font-size", "font-weight"], jt = ["x", "y", "fill", "font-size", "font-weight"], Yt = { key: 1 }, qt = ["x", "y", "font-size", "fill", "font-weight"], Jt = { key: 2 }, Kt = { key: 0 }, Qt = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], 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 = ["font-size", "fill", "text-anchor", "font-weight", "transform"], al = ["font-size", "fill", "text-anchor", "font-weight", "transform"], ol = ["x", "y", "font-size", "fill", "font-weight"], sl = ["x", "y", "width", "height", "fill", "onMouseover", "onMouseleave", "onClick"], il = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, tl = {
+}, ul = {
   __name: "vue-ui-age-pyramid",
   props: {
     config: {
@@ -29,11 +29,11 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"]
       }
     }
   },
-  setup(le, { expose: Oe }) {
-    const Fe = R(() => import("./vue-ui-accordion-B4YfUjZ5.js")), Re = R(() => import("./DataTable-nO6ydJO2.js")), Me = R(() => import("./PackageVersion-B6M-3jRt.js")), Pe = R(() => import("./PenAndPaper-zym5uEeN.js")), Ne = R(() => import("./Tooltip-DjVoFYj1.js")), Ee = R(() => import("./UserOptions-z0NWZ7aQ.js")), { vue_ui_age_pyramid: De } = it(), b = le, ae = g(() => !!b.dataset && b.dataset.length), w = v(ut()), Be = v(null), V = v(!1), W = v(""), D = v(null), oe = v(0), k = v(null), se = v(null), ie = v(null), ue = v(null), ne = v(0), re = v(0), X = v(null), e = v(q()), { loading: ve, FINAL_DATASET: B, manualLoading: j } = _t({
-      ...tt(b),
+  setup(ue, { expose: Pe }) {
+    const Me = L(() => import("./Tooltip-BTGOEC7w.js")), De = L(() => import("./BaseIcon-DLesaZpW.js")), Ne = L(() => import("./vue-ui-accordion-B5QeV3BK.js")), Be = L(() => import("./DataTable-BAf4Obr9.js")), Ee = L(() => import("./PenAndPaper-B6OvfyHH.js")), Ue = L(() => import("./UserOptions-CsDlFB0L.js")), Ge = L(() => import("./PackageVersion-Cv_ypT0N.js")), He = L(() => import("./BaseDraggableDialog-B2BQC0-h.js")), { vue_ui_age_pyramid: We } = yt(), x = ue, ne = g(() => !!x.dataset && x.dataset.length), w = v(ht()), Ve = v(null), j = v(!1), Y = v(""), U = v(null), re = v(0), k = v(null), ve = v(null), de = v(null), ye = v(null), he = v(0), ce = v(0), q = v(null), N = v(null), e = v(Q()), { loading: fe, FINAL_DATASET: G, manualLoading: J } = Ct({
+      ...it(x),
       FINAL_CONFIG: e,
-      prepareConfig: q,
+      prepareConfig: Q,
       skeletonDataset: [
         ["_", 9, 2, 2],
         ["_", 8, 3, 3],
@@ -46,7 +46,7 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"]
         ["_", 1, 89, 89],
         ["_", 0, 144, 144]
       ],
-      skeletonConfig: nt({
+      skeletonConfig: ct({
         defaultConfig: e.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -79,91 +79,91 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"]
           }
         }
       })
-    }), { userOptionsVisible: Y, setUserOptionsVisibility: de, keepUserOptionState: ye } = bt({ config: e.value }), { svgRef: he } = xt({ config: e.value.style.title });
-    function q() {
-      const t = Ie({
-        userConfig: b.config,
-        defaultConfig: De
+    }), { userOptionsVisible: K, setUserOptionsVisibility: ge, keepUserOptionState: pe } = Lt({ config: e.value }), { svgRef: be } = Tt({ config: e.value.style.title });
+    function Q() {
+      const t = Re({
+        userConfig: x.config,
+        defaultConfig: We
       });
       return t.theme ? {
-        ...Ie({
-          userConfig: rt.vue_ui_age_pyramid[t.theme] || b.config,
+        ...Re({
+          userConfig: ft.vue_ui_age_pyramid[t.theme] || x.config,
           defaultConfig: t
         })
       } : t;
     }
-    Z(() => b.config, (t) => {
-      ve.value || (e.value = q()), Y.value = !e.value.userOptions.showOnChartHover, ce(), ne.value += 1, re.value += 1, x.value.showTable = e.value.table.show, x.value.showTooltip = e.value.style.tooltip.show;
-    }, { deep: !0 }), Z(() => b.dataset, (t) => {
-      Array.isArray(t) && t.length > 0 && (j.value = !1);
+    X(() => x.config, (t) => {
+      fe.value || (e.value = Q()), K.value = !e.value.userOptions.showOnChartHover, xe(), he.value += 1, ce.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 && (J.value = !1);
     }, { deep: !0 });
-    const _ = _e(null), I = _e(null);
-    lt(() => {
-      ce();
+    const _ = Te(null), F = Te(null);
+    ut(() => {
+      xe();
     });
-    const Ge = g(() => !!e.value.debug);
-    function ce() {
-      if ($e(b.dataset) && (vt({
+    const Xe = g(() => !!e.value.debug);
+    function xe() {
+      if (Ie(x.dataset) && (gt({
         componentName: "VueUiAgePyramid",
         type: "dataset",
-        debug: Ge.value
-      }), j.value = !0), $e(b.dataset) || (j.value = e.value.loading), e.value.responsive) {
-        const t = ze(() => {
-          const { width: o, height: l } = gt({
+        debug: Xe.value
+      }), J.value = !0), Ie(x.dataset) || (J.value = e.value.loading), e.value.responsive) {
+        const t = Fe(() => {
+          const { width: o, height: l } = kt({
             chart: k.value,
-            title: e.value.style.title.text ? se.value : null,
-            source: ie.value,
-            noTitle: ue.value
+            title: e.value.style.title.text ? ve.value : null,
+            source: de.value,
+            noTitle: ye.value
           });
           requestAnimationFrame(() => {
-            c.value.width = o, c.value.height = l;
+            f.value.width = o, f.value.height = l;
           });
         });
-        _.value && (I.value && _.value.unobserve(I.value), _.value.disconnect()), _.value = new ResizeObserver(t), I.value = k.value.parentNode, _.value.observe(I.value);
+        _.value && (F.value && _.value.unobserve(F.value), _.value.disconnect()), _.value = new ResizeObserver(t), F.value = k.value.parentNode, _.value.observe(F.value);
       }
     }
-    Ae(() => {
-      _.value && (I.value && _.value.unobserve(I.value), _.value.disconnect());
+    $e(() => {
+      _.value && (F.value && _.value.unobserve(F.value), _.value.disconnect());
     });
-    const { isPrinting: fe, isImaging: ge, generatePdf: pe, generateImage: be } = pt({
+    const { isPrinting: me, isImaging: we, generatePdf: ke, generateImage: Ce } = At({
       elementId: `vue-ui-age-pyramid_${w.value}`,
       fileName: e.value.style.title.text || "vue-ui-age-pyramid",
       options: e.value.userOptions.print
-    }), He = g(() => e.value.userOptions.show && !e.value.style.title.text), x = v({
+    }), je = g(() => e.value.userOptions.show && !e.value.style.title.text), b = v({
       showTable: e.value.table.show,
       showTooltip: e.value.style.tooltip.show
     });
-    Z(e, () => {
-      x.value = {
+    X(e, () => {
+      b.value = {
         showTable: e.value.table.show,
         showTooltip: e.value.style.tooltip.show
       };
     }, { immediate: !0 });
-    const c = v({
+    const f = v({
       height: e.value.style.height,
       width: e.value.style.width
-    }), Ue = g(() => c.value.width), Ve = g(() => c.value.height), G = v(0), We = ze((t) => {
-      G.value = t;
+    }), Ye = g(() => f.value.width), qe = g(() => f.value.height), H = v(0), Je = Fe((t) => {
+      H.value = t;
     }, 100);
-    at((t) => {
-      const o = X.value;
+    nt((t) => {
+      const o = q.value;
       if (!o) return;
       const l = new ResizeObserver((a) => {
-        We(a[0].contentRect.height);
+        Je(a[0].contentRect.height);
       });
       l.observe(o), t(() => l.disconnect());
-    }), Ae(() => {
-      G.value = 0;
+    }), $e(() => {
+      H.value = 0;
     });
     const s = g(() => {
-      const t = c.value.width - e.value.style.layout.padding.right - e.value.style.layout.padding.left, o = e.value.style.layout.padding.left, l = c.value.width - e.value.style.layout.padding.right;
+      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;
       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: c.value.height - e.value.style.layout.padding.bottom - G.value,
+        bottom: f.value.height - e.value.style.layout.padding.bottom - H.value,
         width: t,
-        height: c.value.height - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom - G.value - e.value.style.layout.dataLabels.sideTitles.fontSize - e.value.style.layout.dataLabels.sideTitles.offsetY - 12,
+        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,
         centerX: e.value.style.layout.padding.left + t / 2,
         leftChart: {
           width: t / 2 - e.value.style.layout.centerSlit.width,
@@ -174,16 +174,16 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"]
           left: o + t / 2 + e.value.style.layout.centerSlit.width
         }
       };
-    }), Xe = g(() => B.value.map((t) => e.value.style.layout.dataLabels.yAxis.display === "age" ? t[1] : t[0])), A = g(() => {
-      const t = je(E.value / 5), o = [], l = [];
+    }), Ke = g(() => G.value.map((t) => e.value.style.layout.dataLabels.yAxis.display === "age" ? t[1] : t[0])), A = g(() => {
+      const t = Qe(B.value / 5), o = [], l = [];
       for (let a = 0; a <= 5; a += 1) {
         const r = t * a, m = t * (a - 5);
         o.push({
           value: r,
-          x: s.value.left + s.value.width / 2 + e.value.style.layout.centerSlit.width + r / E.value * s.value.leftChart.width
+          x: s.value.left + s.value.width / 2 + e.value.style.layout.centerSlit.width + r / B.value * s.value.leftChart.width
         }), l.push({
           value: Math.abs(m),
-          x: s.value.left + s.value.width / 2 + m / E.value * s.value.leftChart.width - e.value.style.layout.centerSlit.width
+          x: s.value.left + s.value.width / 2 + m / B.value * s.value.leftChart.width - e.value.style.layout.centerSlit.width
         });
       }
       return {
@@ -191,25 +191,25 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"]
         left: l
       };
     });
-    function je(t) {
+    function Qe(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 E = g(() => Math.max(...B.value.flatMap((t) => t.slice(-2).map((o) => f(o))))), O = g(() => B.value.length), Ye = g(() => B.value.map((t) => ({
+    const B = g(() => Math.max(...G.value.flatMap((t) => t.slice(-2).map((o) => p(o))))), R = g(() => G.value.length), Ze = g(() => G.value.map((t) => ({
       segment: t[0],
       age: t[1],
       left: {
         value: t[2],
-        proportionToMax: t[2] / E.value
+        proportionToMax: t[2] / B.value
       },
       right: {
         value: t[3],
-        proportionToMax: t[3] / E.value
+        proportionToMax: t[3] / B.value
       }
-    }))), T = g(() => Ye.value.map((t, o) => {
-      const l = s.value.top + s.value.height / O.value * o, a = s.value.height / O.value - e.value.style.layout.bars.gap;
+    }))), $ = g(() => Ze.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,
         age: t.age,
@@ -218,7 +218,7 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"]
           y: l,
           color: e.value.style.layout.bars.left.color,
           x: s.value.leftChart.right - t.left.proportionToMax * s.value.leftChart.width,
-          width: f(t.left.proportionToMax * s.value.leftChart.width),
+          width: p(t.left.proportionToMax * s.value.leftChart.width),
           height: a
         },
         right: {
@@ -226,30 +226,30 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"]
           y: l,
           color: e.value.style.layout.bars.right.color,
           x: s.value.rightChart.left,
-          width: f(t.right.proportionToMax * s.value.rightChart.width),
+          width: p(t.right.proportionToMax * s.value.rightChart.width),
           height: a
         }
       };
-    })), J = v(null);
-    function K(t) {
+    })), Z = v(null);
+    function ee(t) {
       const [o, l, a, r] = t;
       return { segment: o, index: l, left: a, right: r };
     }
-    function qe(t, o) {
-      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: K(o), seriesIndex: t });
+    function et(t, o) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: ee(o), seriesIndex: t });
     }
-    function Je(t, o) {
-      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: K(o), seriesIndex: t }), D.value = null, V.value = !1;
+    function tt(t, o) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: ee(o), seriesIndex: t }), U.value = null, j.value = !1;
     }
-    function Ke(t, o) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: K(o), seriesIndex: t }), D.value = t, J.value = {
+    function lt(t, o) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: ee(o), seriesIndex: t }), U.value = t, Z.value = {
         datapoint: o,
         seriesIndex: t,
-        series: T.value,
+        series: $.value,
         config: e.value
       };
       const l = e.value.style.tooltip.customFormat;
-      if (ct(l) && ft(() => l({
+      if (mt(l) && wt(() => l({
         seriesIndex: t,
         datapoint: {
           segment: o[0],
@@ -257,10 +257,10 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"]
           left: o[2],
           right: o[3]
         },
-        series: T.value,
+        series: $.value,
         config: e.value
       })))
-        W.value = l({
+        Y.value = l({
           seriesIndex: t,
           datapoint: {
             segment: o[0],
@@ -268,56 +268,56 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"]
             left: o[2],
             right: o[3]
           },
-          series: T.value,
+          series: $.value,
           config: e.value
         });
       else {
         let a = "";
-        const r = T.value[t];
-        a += `<div><b>${r.segment}</b></div>`, a += `<div>${e.value.translations.age}: ${S(
+        const r = $.value[t];
+        a += `<div><b>${r.segment}</b></div>`, a += `<div>${e.value.translations.age}: ${I(
           e.value.style.layout.dataLabels.yAxis.formatter,
-          f(r.age),
-          z({ v: f(r.age) }),
+          p(r.age),
+          O({ 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>${S(
+        )}</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>${I(
           e.value.style.layout.dataLabels.xAxis.formatter,
-          f(r.left.value),
-          z({ v: f(r.left.value) }),
+          p(r.left.value),
+          O({ 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>${S(
+        )}</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>${I(
           e.value.style.layout.dataLabels.xAxis.formatter,
-          f(r.right.value),
-          z({ v: f(r.right.value) }),
+          p(r.right.value),
+          O({ 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>${S(
+        )}</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>${I(
           e.value.style.layout.dataLabels.xAxis.formatter,
-          f(r.right.value) + f(r.left.value),
-          z({ v: f(r.right.value) + f(r.left.value) }),
+          p(r.right.value) + p(r.left.value),
+          O({ v: p(r.right.value) + p(r.left.value) }),
           { datapoint: o, seriesIndex: t }
-        )}</b></div></div>`, a += "</div>", W.value = `<div>${a}</div>`;
+        )}</b></div></div>`, a += "</div>", Y.value = `<div>${a}</div>`;
       }
-      V.value = !0;
+      j.value = !0;
     }
-    function xe(t = null) {
-      st(() => {
-        const o = [e.value.translations.year, e.value.translations.age, e.value.translations.female, e.value.translations.male, e.value.translations.total], l = b.dataset.map((m) => [
+    function te(t = null) {
+      dt(() => {
+        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 = yt(a);
-        t ? t(r) : ht({ 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 = bt(a);
+        t ? t(r) : xt({ csvContent: r, title: e.value.style.title.text || "vue-ui-heatmap" });
       });
     }
-    const H = g(() => {
+    const W = g(() => {
       const t = [
         e.value.translations.year,
         e.value.translations.age,
         e.value.translations.female,
         e.value.translations.male,
         e.value.translations.total
-      ], o = b.dataset.map((a) => [
+      ], o = x.dataset.map((a) => [
         a[0],
         a[1],
         a[2] == null ? "" : a[2].toLocaleString(),
@@ -337,23 +337,23 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"]
         breakpoint: e.value.table.responsiveBreakpoint
       };
       return { head: t, body: o, config: l, colNames: t };
-    }), F = v(!1);
-    function me(t) {
-      F.value = t, oe.value += 1;
+    }), S = v(!1);
+    function _e(t) {
+      S.value = t, re.value += 1;
     }
-    function we() {
-      x.value.showTable = !x.value.showTable;
+    function Ae() {
+      b.value.showTable = !b.value.showTable;
     }
-    function ke() {
-      x.value.showTooltip = !x.value.showTooltip;
+    function Le() {
+      b.value.showTooltip = !b.value.showTooltip;
     }
-    const U = v(!1);
-    function Q() {
-      U.value = !U.value;
+    const V = v(!1);
+    function le() {
+      V.value = !V.value;
     }
-    async function Qe({ scale: t = 2 } = {}) {
+    async function at({ scale: t = 2 } = {}) {
       if (!k.value) return;
-      const { width: o, height: l } = k.value.getBoundingClientRect(), a = o / l, { imageUri: r, base64: m } = await wt({ 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 St({ domElement: k.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: r,
         base64: m,
@@ -363,60 +363,93 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"]
         aspectRatio: a
       };
     }
-    const Ze = v([]), et = v({ start: 0, end: T.value.length });
-    return kt({
-      timeLabelsEls: X,
-      timeLabels: Ze,
-      slicer: et,
+    const ot = v([]), st = v({ start: 0, end: $.value.length });
+    $t({
+      timeLabelsEls: q,
+      timeLabels: ot,
+      slicer: st,
       configRef: e,
       rotationPath: ["style", "layout", "dataLabels", "xAxis", "rotation"],
       autoRotatePath: ["style", "layout", "dataLabels", "xAxis", "autoRotate", "enable"],
       isAutoSize: !1,
-      width: Ue,
-      height: Ve,
+      width: Ye,
+      height: qe,
       targetClass: ".vue-ui-age-pyramid-x-axis-label",
       rotation: e.value.style.layout.dataLabels.xAxis.autoRotate.angle
-    }), Oe({
-      getImage: Qe,
-      generatePdf: pe,
-      generateCsv: xe,
-      generateImage: be,
-      toggleTable: we,
-      toggleTooltip: ke,
-      toggleAnnotator: Q,
-      toggleFullscreen: me
+    });
+    const E = g(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, o = b.value.showTable;
+      return {
+        component: t ? He : Ne,
+        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,
+          color: e.value.table.th.color,
+          headerColor: e.value.table.th.color,
+          headerBg: e.value.table.th.backgroundColor,
+          isFullscreen: S.value,
+          fullscreenParent: k.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8)
+        } : {
+          hideDetails: !0,
+          config: {
+            open: o,
+            maxHeight: 1e4,
+            body: {
+              backgroundColor: e.value.style.backgroundColor,
+              color: e.value.style.color
+            },
+            head: {
+              backgroundColor: e.value.style.backgroundColor,
+              color: e.value.style.color
+            }
+          }
+        }
+      };
+    });
+    return X(() => b.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && N.value ? N.value.open() : "close" in N.value && N.value.close());
+    }), Pe({
+      getImage: at,
+      generatePdf: ke,
+      generateCsv: te,
+      generateImage: Ce,
+      toggleTable: Ae,
+      toggleTooltip: Le,
+      toggleAnnotator: le,
+      toggleFullscreen: _e
     }), (t, o) => (i(), n("div", {
-      class: Le(`vue-ui-age-pyramid ${F.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      class: Se(`vue-ui-age-pyramid ${S.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
       ref_key: "agePyramid",
       ref: k,
       id: `vue-ui-age-pyramid_${w.value}`,
-      style: ee(`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(de)(!0)),
-      onMouseleave: o[2] || (o[2] = () => u(de)(!1))
+      style: ae(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
+      onMouseenter: o[3] || (o[3] = () => u(ge)(!0)),
+      onMouseleave: o[4] || (o[4] = () => u(ge)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (i(), M(u(Pe), {
+      e.value.userOptions.buttons.annotator ? (i(), P(u(Ee), {
         key: 0,
-        svgRef: u(he),
+        svgRef: u(be),
         backgroundColor: e.value.style.backgroundColor,
         color: e.value.style.color,
-        active: U.value,
-        onClose: Q
+        active: V.value,
+        onClose: le
       }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : y("", !0),
-      He.value ? (i(), n("div", {
+      je.value ? (i(), n("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: ue,
+        ref: ye,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : y("", !0),
       e.value.style.title.text ? (i(), n("div", {
         key: 2,
         ref_key: "chartTitle",
-        ref: se,
+        ref: ve,
         style: "width:100%;background:transparent"
       }, [
-        (i(), M(mt, {
-          key: `title_${ne.value}`,
+        (i(), P(zt, {
+          key: `title_${he.value}`,
           config: {
             title: {
               cy: "pyramid-div-title",
@@ -429,14 +462,14 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"]
           }
         }, null, 8, ["config"]))
       ], 512)) : y("", !0),
-      e.value.userOptions.show && ae.value && (u(ye) || u(Y)) ? (i(), M(u(Ee), {
+      e.value.userOptions.show && ne.value && (u(pe) || u(K)) ? (i(), P(u(Ue), {
         ref_key: "details",
-        ref: Be,
-        key: `user_options_${oe.value}`,
+        ref: Ve,
+        key: `user_options_${re.value}`,
         backgroundColor: e.value.style.backgroundColor,
         color: e.value.style.color,
-        isImaging: u(ge),
-        isPrinting: u(fe),
+        isImaging: u(we),
+        isPrinting: u(me),
         uid: w.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
@@ -444,92 +477,92 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"]
         hasImg: e.value.userOptions.buttons.img,
         hasTable: e.value.userOptions.buttons.table,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: F.value,
-        isTooltip: x.value.showTooltip,
+        isFullscreen: S.value,
+        isTooltip: b.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
         chartElement: k.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: U.value,
+        isAnnotation: V.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
-        onToggleFullscreen: me,
-        onGeneratePdf: u(pe),
-        onGenerateCsv: xe,
-        onGenerateImage: u(be),
-        onToggleTable: we,
-        onToggleTooltip: ke,
-        onToggleAnnotator: Q,
-        style: ee({
-          visibility: u(ye) ? u(Y) ? "visible" : "hidden" : "visible"
+        onToggleFullscreen: _e,
+        onGeneratePdf: u(ke),
+        onGenerateCsv: te,
+        onGenerateImage: u(Ce),
+        onToggleTable: Ae,
+        onToggleTooltip: Le,
+        onToggleAnnotator: le,
+        style: ae({
+          visibility: u(pe) ? u(K) ? "visible" : "hidden" : "visible"
         })
-      }, ot({ _: 2 }, [
+      }, ze({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: p(({ isOpen: l, color: a }) => [
-            h(t.$slots, "menuIcon", P(N({ isOpen: l, color: a })), void 0, !0)
+          fn: c(({ isOpen: l, color: a }) => [
+            h(t.$slots, "menuIcon", M(D({ isOpen: l, color: a })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: p(() => [
+          fn: c(() => [
             h(t.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: p(() => [
+          fn: c(() => [
             h(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: p(() => [
+          fn: c(() => [
             h(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: p(() => [
+          fn: c(() => [
             h(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
-          fn: p(() => [
+          fn: c(() => [
             h(t.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: p(({ toggleFullscreen: l, isFullscreen: a }) => [
-            h(t.$slots, "optionFullscreen", P(N({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
+          fn: c(({ toggleFullscreen: l, isFullscreen: a }) => [
+            h(t.$slots, "optionFullscreen", M(D({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
           ]),
           key: "6"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: p(({ toggleAnnotator: l, isAnnotator: a }) => [
-            h(t.$slots, "optionAnnotator", P(N({ toggleAnnotator: l, isAnnotator: a })), void 0, !0)
+          fn: c(({ toggleAnnotator: l, isAnnotator: a }) => [
+            h(t.$slots, "optionAnnotator", M(D({ 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", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
       (i(), n("svg", {
         ref_key: "svgRef",
-        ref: he,
-        xmlns: u(dt),
-        class: Le({ "vue-data-ui-fullscreen--on": F.value, "vue-data-ui-fulscreen--off": !F.value }),
-        viewBox: `0 0 ${c.value.width <= 0 ? 10 : c.value.width} ${c.value.height <= 0 ? 10 : c.value.height}`,
-        style: ee(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
+        ref: be,
+        xmlns: u(pt),
+        class: Se({ "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: ae(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
       }, [
-        Ce(u(Me)),
+        oe(u(Ge)),
         t.$slots["chart-background"] ? (i(), n("foreignObject", {
           key: 0,
           x: s.value.left,
@@ -541,7 +574,7 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"]
           }
         }, [
           h(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, $t)) : y("", !0),
+        ], 8, Rt)) : y("", !0),
         d("defs", null, [
           d("linearGradient", {
             id: `age_pyramid_left_${w.value}`,
@@ -553,12 +586,12 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"]
             d("stop", {
               offset: "0%",
               "stop-color": e.value.style.layout.bars.left.color
-            }, null, 8, zt),
+            }, null, 8, Mt),
             d("stop", {
               offset: "100%",
-              "stop-color": u(te)(u(Se)(e.value.style.layout.bars.left.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
-            }, null, 8, It)
-          ], 8, St),
+              "stop-color": u(ie)(u(Oe)(e.value.style.layout.bars.left.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
+            }, null, 8, Dt)
+          ], 8, Pt),
           d("linearGradient", {
             id: `age_pyramid_right_${w.value}`,
             x1: "0%",
@@ -568,23 +601,23 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"]
           }, [
             d("stop", {
               offset: "0%",
-              "stop-color": u(te)(u(Se)(e.value.style.layout.bars.right.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
-            }, null, 8, Ft),
+              "stop-color": u(ie)(u(Oe)(e.value.style.layout.bars.right.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
+            }, null, 8, Bt),
             d("stop", {
               offset: "100%",
               "stop-color": e.value.style.layout.bars.right.color
-            }, null, 8, Rt)
-          ], 8, Ot)
+            }, null, 8, Et)
+          ], 8, Nt)
         ]),
-        (i(!0), n(L, null, $(T.value, (l, a) => (i(), n("g", null, [
+        (i(!0), n(T, null, z($.value, (l, a) => (i(), n("g", null, [
           d("rect", {
             x: l.left.x,
             y: l.left.y,
-            width: u(f)(l.left.width <= 0 ? 1e-4 : l.left.width),
+            width: u(p)(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.underlayer,
             rx: e.value.style.layout.bars.borderRadius
-          }, null, 8, Mt),
+          }, null, 8, Ut),
           d("rect", {
             x: l.left.x,
             y: l.left.y,
@@ -592,7 +625,7 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["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, Pt),
+          }, null, 8, Gt),
           d("rect", {
             x: l.right.x,
             y: l.right.y,
@@ -600,7 +633,7 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["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, Nt),
+          }, null, 8, Ht),
           d("rect", {
             x: l.right.x,
             y: l.right.y,
@@ -608,10 +641,10 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["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, Et)
+          }, null, 8, Wt)
         ]))), 256)),
         d("g", null, [
-          e.value.style.layout.dataLabels.sideTitles.show ? (i(), n("g", Dt, [
+          e.value.style.layout.dataLabels.sideTitles.show ? (i(), n("g", Vt, [
             d("text", {
               x: s.value.left,
               y: e.value.style.layout.dataLabels.sideTitles.fontSize,
@@ -619,7 +652,7 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["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"
-            }, C(e.value.translations.female), 9, Bt),
+            }, C(e.value.translations.female), 9, Xt),
             d("text", {
               x: s.value.right,
               y: e.value.style.layout.dataLabels.sideTitles.fontSize,
@@ -627,28 +660,28 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["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"
-            }, C(e.value.translations.male), 9, Gt)
+            }, C(e.value.translations.male), 9, jt)
           ])) : y("", !0),
-          e.value.style.layout.dataLabels.yAxis.show ? (i(), n("g", Ht, [
-            (i(!0), n(L, null, $(Xe.value, (l, a) => (i(), n(L, null, [
+          e.value.style.layout.dataLabels.yAxis.show ? (i(), n("g", Yt, [
+            (i(!0), n(T, null, z(Ke.value, (l, a) => (i(), n(T, 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 / O.value * a + e.value.style.layout.dataLabels.yAxis.fontSize / 3,
+                y: s.value.top + s.value.height / R.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(S)(
+              }, C(u(I)(
                 e.value.style.layout.dataLabels.yAxis.formatter,
                 l,
-                u(z)({ v: l }),
+                u(O)({ v: l }),
                 { datapoint: l, seriesIndex: a }
-              )), 9, Ut)) : y("", !0)
+              )), 9, qt)) : y("", !0)
             ], 64))), 256))
           ])) : y("", !0),
-          e.value.style.layout.dataLabels.xAxis.show ? (i(), n("g", Vt, [
-            e.value.style.layout.grid.show ? (i(), n("g", Wt, [
+          e.value.style.layout.dataLabels.xAxis.show ? (i(), n("g", Jt, [
+            e.value.style.layout.grid.show ? (i(), n("g", Kt, [
               d("line", {
                 x1: A.value.right[0].x,
                 x2: A.value.right.at(-1).x,
@@ -657,7 +690,7 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"]
                 stroke: e.value.style.layout.grid.stroke,
                 "stroke-width": e.value.style.layout.grid.strokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, Xt),
+              }, null, 8, Qt),
               d("line", {
                 x1: A.value.left[0].x,
                 x2: A.value.left.at(-1).x,
@@ -666,9 +699,9 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"]
                 stroke: e.value.style.layout.grid.stroke,
                 "stroke-width": e.value.style.layout.grid.strokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, jt)
+              }, null, 8, Zt)
             ])) : y("", !0),
-            (i(!0), n(L, null, $(A.value.right, (l, a) => (i(), n("g", null, [
+            (i(!0), n(T, null, z(A.value.right, (l, a) => (i(), n("g", null, [
               e.value.style.layout.grid.show ? (i(), n("line", {
                 key: 0,
                 x1: l.x,
@@ -678,9 +711,9 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"]
                 stroke: e.value.style.layout.grid.stroke,
                 "stroke-width": e.value.style.layout.grid.strokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, Yt)) : y("", !0)
+              }, null, 8, el)) : y("", !0)
             ]))), 256)),
-            (i(!0), n(L, null, $(A.value.left, (l, a) => (i(), n("g", null, [
+            (i(!0), n(T, null, z(A.value.left, (l, a) => (i(), n("g", null, [
               e.value.style.layout.grid.show ? (i(), n("line", {
                 key: 0,
                 x1: l.x,
@@ -690,81 +723,81 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"]
                 stroke: e.value.style.layout.grid.stroke,
                 "stroke-width": e.value.style.layout.grid.strokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, qt)) : y("", !0)
+              }, null, 8, tl)) : y("", !0)
             ]))), 256)),
             d("g", {
               ref_key: "xAxisLabels",
-              ref: X
+              ref: q
             }, [
-              (i(!0), n(L, null, $(A.value.right, (l, a) => (i(), n("text", {
+              (i(!0), n(T, null, z(A.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(S)(
+              }, C(u(I)(
                 e.value.style.layout.dataLabels.xAxis.formatter,
                 l.value / e.value.style.layout.dataLabels.xAxis.scale,
-                u(z)({
+                u(O)({
                   v: l.value / e.value.style.layout.dataLabels.xAxis.scale
                 }),
                 { datapoint: l, seriesIndex: a }
-              )), 9, Jt))), 256)),
-              (i(!0), n(L, null, $(A.value.left, (l, a) => (i(), n("text", {
+              )), 9, ll))), 256)),
+              (i(!0), n(T, 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,
                 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(S)(
+              }, C(u(I)(
                 e.value.style.layout.dataLabels.xAxis.formatter,
                 l.value / e.value.style.layout.dataLabels.xAxis.scale,
-                u(z)({
+                u(O)({
                   v: l.value / e.value.style.layout.dataLabels.xAxis.scale
                 }),
                 { datapoint: l, seriesIndex: a }
-              )), 9, Kt))), 256))
+              )), 9, al))), 256))
             ], 512),
             d("text", {
               x: s.value.right,
-              y: c.value.height,
+              y: f.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, Qt)
+            }, C(e.value.style.layout.dataLabels.xAxis.translation), 9, ol)
           ])) : y("", !0)
         ]),
-        (i(!0), n(L, null, $(le.dataset, (l, a) => (i(), n("g", null, [
+        (i(!0), n(T, null, z(ue.dataset, (l, a) => (i(), n("g", null, [
           d("rect", {
             x: s.value.left,
-            y: s.value.top + s.value.height / O.value * a - e.value.style.layout.bars.gap / 2,
+            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 / O.value <= 0 ? 1e-4 : s.value.height / O.value,
-            fill: D.value !== null && D.value === a ? u(te)(e.value.style.highlighter.color, e.value.style.highlighter.opacity) : "transparent",
-            onMouseover: (r) => Ke(a, l),
-            onMouseleave: (r) => Je(a, l),
-            onClick: (r) => qe(a, l)
-          }, null, 40, Zt)
+            height: s.value.height / R.value <= 0 ? 1e-4 : s.value.height / R.value,
+            fill: U.value !== null && U.value === a ? u(ie)(e.value.style.highlighter.color, e.value.style.highlighter.opacity) : "transparent",
+            onMouseover: (r) => lt(a, l),
+            onMouseleave: (r) => tt(a, l),
+            onClick: (r) => et(a, l)
+          }, null, 40, sl)
         ]))), 256)),
-        h(t.$slots, "svg", { svg: c.value }, void 0, !0)
-      ], 14, Tt)),
-      t.$slots.watermark ? (i(), n("div", el, [
-        h(t.$slots, "watermark", P(N({ isPrinting: u(fe) || u(ge) })), void 0, !0)
+        h(t.$slots, "svg", { svg: f.value }, void 0, !0)
+      ], 14, Ft)),
+      t.$slots.watermark ? (i(), n("div", il, [
+        h(t.$slots, "watermark", M(D({ isPrinting: u(me) || u(we) })), void 0, !0)
       ])) : y("", !0),
-      h(t.$slots, "legend", { legend: T.value }, void 0, !0),
+      h(t.$slots, "legend", { legend: $.value }, void 0, !0),
       t.$slots.source ? (i(), n("div", {
         key: 5,
         ref_key: "source",
-        ref: ie,
+        ref: de,
         dir: "auto"
       }, [
         h(t.$slots, "source", {}, void 0, !0)
       ], 512)) : y("", !0),
-      Ce(u(Ne), {
-        show: x.value.showTooltip && V.value,
+      oe(u(Me), {
+        show: b.value.showTooltip && j.value,
         backgroundColor: e.value.style.tooltip.backgroundColor,
         color: e.value.style.tooltip.color,
         borderRadius: e.value.style.tooltip.borderRadius,
@@ -775,61 +808,75 @@ const Ct = ["id"], Tt = ["xmlns", "viewBox"], $t = ["x", "y", "width", "height"]
         position: e.value.style.tooltip.position,
         offsetY: e.value.style.tooltip.offsetY,
         parent: k.value,
-        content: W.value,
-        isFullscreen: F.value,
+        content: Y.value,
+        isFullscreen: S.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
       }, {
-        "tooltip-before": p(() => [
-          h(t.$slots, "tooltip-before", P(N({ ...J.value })), void 0, !0)
+        "tooltip-before": c(() => [
+          h(t.$slots, "tooltip-before", M(D({ ...Z.value })), void 0, !0)
         ]),
-        "tooltip-after": p(() => [
-          h(t.$slots, "tooltip-after", P(N({ ...J.value })), void 0, !0)
+        "tooltip-after": c(() => [
+          h(t.$slots, "tooltip-after", M(D({ ...Z.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter"]),
-      ae.value ? (i(), M(u(Fe), {
-        key: 6,
-        hideDetails: "",
-        config: {
-          open: x.value.showTable,
-          maxHeight: 1e4,
-          body: {
-            backgroundColor: e.value.style.backgroundColor,
-            color: e.value.style.color
-          },
-          head: {
-            backgroundColor: e.value.style.backgroundColor,
-            color: e.value.style.color
-          }
-        }
-      }, {
-        content: p(() => [
-          (i(), M(u(Re), {
-            key: `table_${re.value}`,
-            colNames: H.value.colNames,
-            head: H.value.head,
-            body: H.value.body,
-            config: H.value.config,
-            title: `${e.value.style.title.text}${e.value.style.title.subtitle.text ? ` : ${e.value.style.title.subtitle.text}` : ""}`,
-            onClose: o[0] || (o[0] = (l) => x.value.showTable = !1)
+      ne.value ? (i(), P(rt(E.value.component), vt({ key: 6 }, E.value.props, {
+        ref_key: "tableUnit",
+        ref: N,
+        onClose: o[2] || (o[2] = (l) => b.value.showTable = !1)
+      }), ze({
+        content: c(() => [
+          (i(), P(u(Be), {
+            key: `table_${ce.value}`,
+            colNames: W.value.colNames,
+            head: W.value.head,
+            body: W.value.body,
+            config: W.value.config,
+            title: e.value.table.useDialog ? "" : E.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: o[1] || (o[1] = (l) => b.value.showTable = !1)
           }, {
-            th: p(({ th: l }) => [
-              Te(C(l), 1)
+            th: c(({ th: l }) => [
+              se(C(l), 1)
             ]),
-            td: p(({ td: l }) => [
-              Te(C(l), 1)
+            td: c(({ td: l }) => [
+              se(C(l), 1)
             ]),
             _: 1
-          }, 8, ["colNames", "head", "body", "config", "title"]))
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
         ]),
-        _: 1
-      }, 8, ["config"])) : y("", !0),
-      u(ve) ? (i(), M(At, { key: 7 })) : y("", !0)
-    ], 46, Ct));
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: c(() => [
+            se(C(E.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: c(() => [
+            d("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: o[0] || (o[0] = (l) => te(e.value.userOptions.callbacks.csv))
+            }, [
+              oe(u(De), {
+                name: "excel",
+                stroke: E.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : y("", !0),
+      u(fe) ? (i(), P(_t, { key: 7 })) : y("", !0)
+    ], 46, Ot));
   }
-}, cl = /* @__PURE__ */ Lt(tl, [["__scopeId", "data-v-3cd08557"]]);
+}, ml = /* @__PURE__ */ It(ul, [["__scopeId", "data-v-97c2a040"]]);
 export {
-  cl as default
+  ml as default
 };