vue-data-ui 3.0.22 → 3.1.0

package/dist/{vue-ui-vertical-bar-CK2j09gJ.js → vue-ui-vertical-bar-DHqWeDIf.js}

@@ -1,21 +1,21 @@
-import { useCssVars as Mt, defineAsyncComponent as le, useSlots as Bt, computed as b, ref as i, toRefs as Rt, watch as nt, shallowRef as ut, onMounted as Te, nextTick as ve, onBeforeUnmount as Et, createElementBlock as v, openBlock as u, unref as s, normalizeStyle as h, normalizeClass as D, createBlock as X, createCommentVNode as y, renderSlot as x, createVNode as oe, createSlots as Se, withCtx as w, normalizeProps as K, guardReactiveProps as J, createElementVNode as n, toDisplayString as p, Fragment as Q, renderList as Z, mergeProps as Dt, withKeys as Xt, createTextVNode as Ut } from "vue";
-import { u as Gt, c as Wt, t as Ht, a as jt, p as U, b as qt, C as Le, d as Yt, h as L, o as Pe, f as ne, e as Ne, k as de, i as G, X as Kt, s as Ae, x as Jt, v as Qt, w as Zt, y as ea, z as ta } from "./index-BHb_mcWF.js";
-import { t as aa, u as la } from "./useResponsive-DfdjqQps.js";
-import { u as st } from "./useNestedProp-aC9S6EFJ.js";
-import { u as oa } from "./usePrinter-B7rhbRrT.js";
-import { u as na } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as ua } from "./useChartAccessibility-9icAAmYg.js";
-import sa from "./vue-ui-accordion-DsnF0JuK.js";
-import rt from "./Legend-DkU3at-b.js";
-import ra from "./Title-BL-IjQmj.js";
-import { _ as it } from "./Shape-C3J8aKNH.js";
-import ia from "./img-DsVqerdt.js";
-import { u as va, B as da } from "./useLoading-D7YHNtLX.js";
-import { _ as ca } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const ha = ["id"], pa = ["onClick"], fa = ["xmlns", "viewBox"], ya = ["x", "width", "height"], ga = ["id"], ba = ["stop-color"], ma = ["stop-color"], ka = { key: 1 }, xa = ["x", "y", "width", "height", "fill", "rx"], _a = ["x", "y", "width", "height", "fill", "rx", "stroke", "stroke-width"], wa = ["x", "y", "width", "height", "fill", "rx", "stroke", "stroke-width"], $a = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ca = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ta = { class: "vue-ui-horizontal-bar-child-label" }, Sa = ["x", "y", "text-anchor", "font-size", "fill", "font-weight"], La = ["x", "y", "font-size", "fill", "font-weight"], Pa = { class: "vue-ui-horizontal-bar-parent-label" }, Na = ["x", "y", "font-size", "fill", "font-weight"], Aa = ["x", "y", "font-size", "fill", "font-weight"], za = ["x", "y", "width", "height", "fill", "onMouseenter", "onMouseleave", "onClick"], Va = {
+import { useCssVars as Ut, defineAsyncComponent as K, useSlots as Xt, computed as y, ref as r, toRefs as Wt, watch as Ne, shallowRef as it, onMounted as Ae, nextTick as ce, onBeforeUnmount as Gt, createElementBlock as v, openBlock as u, unref as s, normalizeStyle as c, normalizeClass as U, createBlock as X, createCommentVNode as f, renderSlot as _, createVNode as J, createSlots as he, withCtx as m, normalizeProps as Q, guardReactiveProps as Z, createElementVNode as n, toDisplayString as h, Fragment as ee, renderList as te, mergeProps as vt, resolveDynamicComponent as Ht, withKeys as jt, createTextVNode as dt } from "vue";
+import { u as qt, c as Yt, t as Kt, a as Jt, p as W, b as Qt, C as ze, d as Zt, h as L, o as Ve, f as ue, e as Ie, k as pe, i as G, X as ea, s as Oe, x as ta, v as aa, w as la, y as oa, z as na } from "./index-CDQbCd41.js";
+import { t as ua, u as sa } from "./useResponsive-DfdjqQps.js";
+import { u as ra, B as ia } from "./BaseScanner-BgWxam9d.js";
+import { u as va } from "./usePrinter-Bnl1YeUU.js";
+import { u as ct } from "./useNestedProp-BPEHGiYX.js";
+import { u as da } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as ca } from "./useChartAccessibility-9icAAmYg.js";
+import ht from "./Legend-2-dC7DVb.js";
+import ha from "./vue-ui-accordion-Bf_LHFFX.js";
+import pa from "./Title-Dq2_Z9kR.js";
+import { _ as pt } from "./Shape-Dj2Hl33H.js";
+import fa from "./img-JOqdlnUs.js";
+import { _ as ga } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const ya = ["id"], ba = ["onClick"], ma = ["xmlns", "viewBox"], ka = ["x", "width", "height"], xa = ["id"], wa = ["stop-color"], _a = ["stop-color"], $a = { key: 1 }, Ca = ["x", "y", "width", "height", "fill", "rx"], Ta = ["x", "y", "width", "height", "fill", "rx", "stroke", "stroke-width"], Sa = ["x", "y", "width", "height", "fill", "rx", "stroke", "stroke-width"], La = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Pa = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Na = { class: "vue-ui-horizontal-bar-child-label" }, Aa = ["x", "y", "text-anchor", "font-size", "fill", "font-weight"], za = ["x", "y", "font-size", "fill", "font-weight"], Va = { class: "vue-ui-horizontal-bar-parent-label" }, Ia = ["x", "y", "font-size", "fill", "font-weight"], Oa = ["x", "y", "font-size", "fill", "font-weight"], Fa = ["x", "y", "width", "height", "fill", "onMouseenter", "onMouseleave", "onClick"], Ma = {
   key: 5,
   class: "vue-data-ui-watermark"
-}, Ia = ["onClick"], Oa = { style: "width:100%;padding-top: 36px;position:relative" }, Fa = { class: "vue-ui-data-table" }, Ma = { key: 0 }, Ba = { style: { width: "100%" } }, Ra = ["data-cell"], Ea = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Da = ["data-cell"], Xa = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Ua = ["data-cell"], Ga = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Wa = ["data-cell"], Ha = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, ja = ["data-cell"], qa = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Ya = ["data-cell"], Ka = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Ja = ["data-cell"], Qa = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Za = {
+}, Ba = ["onClick"], Da = { style: "width:100%;padding-top: 36px;position:relative" }, Ra = { class: "vue-ui-data-table" }, Ea = { key: 0 }, Ua = { style: { width: "100%" } }, Xa = ["data-cell"], Wa = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Ga = ["data-cell"], Ha = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, ja = ["data-cell"], qa = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Ya = ["data-cell"], Ka = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Ja = ["data-cell"], Qa = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Za = ["data-cell"], el = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, tl = ["data-cell"], al = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, ll = {
   __name: "vue-ui-vertical-bar",
   props: {
     config: {
@@ -32,35 +32,35 @@ const ha = ["id"], pa = ["onClick"], fa = ["xmlns", "viewBox"], ya = ["x", "widt
     }
   },
   emits: ["selectLegend"],
-  setup(vt, { expose: dt, emit: ct }) {
-    Mt((t) => ({
-      dd2a8d00: t.tdo
+  setup(ft, { expose: gt, emit: yt }) {
+    Ut((t) => ({
+      d072bdee: t.tdo
     }));
-    const ht = le(() => import("./BaseIcon-B717hnWR.js")), pt = le(() => import("./PackageVersion-CE7HSich.js")), ft = le(() => import("./PenAndPaper-BMHsOtT8.js")), yt = le(() => import("./Tooltip-CCnDaboi.js")), gt = le(() => import("./UserOptions-BWMV0_Ze.js")), { vue_ui_vertical_bar: bt } = Gt(), mt = Bt(), g = vt, ce = b({
+    const bt = K(() => import("./Tooltip-Y219DXZO.js")), Fe = K(() => import("./BaseIcon-DHtro8us.js")), mt = K(() => import("./PenAndPaper-B7QEDgx4.js")), kt = K(() => import("./UserOptions-BuGfCdAY.js")), xt = K(() => import("./PackageVersion-DU12WH3O.js")), wt = K(() => import("./BaseDraggableDialog-O7900pGp.js")), { vue_ui_vertical_bar: _t } = qt(), $t = Xt(), b = ft, fe = y({
       get() {
-        return !!g.dataset && g.dataset.length;
+        return !!b.dataset && b.dataset.length;
       },
       set(t) {
         return t;
       }
-    }), S = i(Wt()), kt = i(null), he = i(!1), pe = i(""), ee = i(0), xt = i(null), ze = i(0), z = i(null), Ve = i(null), fe = i(null), Ie = i(null), Oe = i(null), Fe = i(0), ye = i(0), W = i(null), _t = ct, e = i(xe()), wt = b(() => [
+    }), S = r(Yt()), Ct = r(null), ge = r(!1), ye = r(""), ae = r(0), Tt = r(null), Me = r(0), P = r(null), Be = r(null), be = r(null), De = r(null), Re = r(null), Ee = r(0), me = r(0), H = r(null), le = r(null), St = yt, e = r($e()), Lt = y(() => [
       { name: "", value: 6, color: "#d9d9d9" },
       { name: "", value: 5, color: "#d9d9d9" },
       { name: "", value: 4, color: "#d9d9d9" },
       { name: "", value: 3, color: "#d9d9d9" },
       { name: "", value: 2, color: "#d9d9d9" },
       { name: "", value: 1, color: "#d9d9d9" }
-    ]), { loading: ge, FINAL_DATASET: be, manualLoading: me } = va({
-      ...Rt(g),
+    ]), { loading: ke, FINAL_DATASET: xe, manualLoading: we } = ra({
+      ...Wt(b),
       FINAL_CONFIG: e,
-      prepareConfig: xe,
+      prepareConfig: $e,
       callback: () => {
         Promise.resolve().then(async () => {
-          j(), await O();
+          q(), k.value.showTable = e.value.table.show, await O();
         });
       },
-      skeletonDataset: wt.value,
-      skeletonConfig: Ht({
+      skeletonDataset: Lt.value,
+      skeletonConfig: Kt({
         defaultConfig: e.value,
         userConfig: {
           useCssAnimation: !1,
@@ -106,154 +106,154 @@ const ha = ["id"], pa = ["onClick"], fa = ["xmlns", "viewBox"], ya = ["x", "widt
           }
         }
       })
-    }), { userOptionsVisible: ke, setUserOptionsVisibility: Me, keepUserOptionState: Be } = na({ config: e.value }), { svgRef: Re } = ua({ config: e.value.style.chart.title });
-    function xe() {
-      const t = st({
-        userConfig: g.config,
-        defaultConfig: bt
+    }), { userOptionsVisible: _e, setUserOptionsVisibility: Ue, keepUserOptionState: Xe } = da({ config: e.value }), { svgRef: We } = ca({ config: e.value.style.chart.title });
+    function $e() {
+      const t = ct({
+        userConfig: b.config,
+        defaultConfig: _t
       });
       let l = {};
       return t.theme ? l = {
-        ...st({
-          userConfig: qt.vue_ui_vertical_bar[t.theme] || g.config,
+        ...ct({
+          userConfig: Qt.vue_ui_vertical_bar[t.theme] || b.config,
           defaultConfig: t
         }),
-        customPalette: jt[t.theme] || U
-      } : l = t, g.config && Le(g.config, "events.datapointEnter") ? l.events.datapointEnter = g.config.events.datapointEnter : l.events.datapointEnter = null, g.config && Le(g.config, "events.datapointLeave") ? l.events.datapointLeave = g.config.events.datapointLeave : l.events.datapointLeave = null, g.config && Le(g.config, "events.datapointClick") ? l.events.datapointClick = g.config.events.datapointClick : l.events.datapointClick = null, l;
+        customPalette: Jt[t.theme] || W
+      } : l = t, b.config && ze(b.config, "events.datapointEnter") ? l.events.datapointEnter = b.config.events.datapointEnter : l.events.datapointEnter = null, b.config && ze(b.config, "events.datapointLeave") ? l.events.datapointLeave = b.config.events.datapointLeave : l.events.datapointLeave = null, b.config && ze(b.config, "events.datapointClick") ? l.events.datapointClick = b.config.events.datapointClick : l.events.datapointClick = null, l;
     }
-    nt(() => g.config, (t) => {
-      ge.value || (e.value = xe()), ke.value = !e.value.userOptions.showOnChartHover, qe(), Fe.value += 1, ye.value += 1, c.value = e.value.style.chart.layout.bars.height, m.value = e.value.style.chart.layout.bars.gap, $.value.showTable = e.value.table.show, $.value.sortDesc = e.value.style.chart.layout.bars.sort === "desc", $.value.showTooltip = e.value.style.chart.tooltip.show;
-    }, { deep: !0 }), nt(() => g.dataset, (t) => {
-      Array.isArray(t) && t.length > 0 && (me.value = !1), j();
+    Ne(() => b.config, (t) => {
+      ke.value || (e.value = $e()), _e.value = !e.value.userOptions.showOnChartHover, Ze(), Ee.value += 1, me.value += 1, p.value = e.value.style.chart.layout.bars.height, x.value = e.value.style.chart.layout.bars.gap, k.value.showTable = e.value.table.show, k.value.sortDesc = e.value.style.chart.layout.bars.sort === "desc", k.value.showTooltip = e.value.style.chart.tooltip.show;
+    }, { deep: !0 }), Ne(() => b.dataset, (t) => {
+      Array.isArray(t) && t.length > 0 && (we.value = !1), q();
     }, { deep: !0 });
-    const { isPrinting: Ee, isImaging: De, generatePdf: Xe, generateImage: Ue } = oa({
+    const { isPrinting: Ge, isImaging: He, generatePdf: je, generateImage: qe } = va({
       elementId: `vue-ui-vertical-bar_${S.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-vertical-bar",
       options: e.value.userOptions.print
-    }), $t = b(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ge = b(() => Yt(e.value.customPalette)), We = i(null), He = i(!1), Ct = b(() => e.value.table.responsiveBreakpoint), I = ut(null), H = ut(null), ue = i("0 0 10 10"), P = b(() => {
-      const [t, l, a, o] = ue.value.split(" ").map(Number);
+    }), Pt = y(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ye = y(() => Zt(e.value.customPalette)), Ke = r(null), Je = r(!1), Nt = y(() => e.value.table.responsiveBreakpoint), I = it(null), j = it(null), se = r("0 0 10 10"), N = y(() => {
+      const [t, l, a, o] = se.value.split(" ").map(Number);
       return { x: t, y: l, width: a, height: o };
     });
-    Te(async () => {
-      await ve(), qe(), O();
+    Ae(async () => {
+      await ce(), Ze(), O();
     });
     async function O() {
-      if (ue.value = `0 0 ${C.value.width} ${r.value.fullHeight}`, !e.value.autoSize || !W.value) return;
-      const t = W.value.querySelectorAll(".vue-ui-horizontal-bar-parent-label"), l = W.value.querySelectorAll(".vue-ui-horizontal-bar-child-label");
+      if (se.value = `0 0 ${C.value.width} ${i.value.fullHeight}`, !e.value.autoSize || !H.value) return;
+      const t = H.value.querySelectorAll(".vue-ui-horizontal-bar-parent-label"), l = H.value.querySelectorAll(".vue-ui-horizontal-bar-child-label");
       if (t && t.length) {
-        const f = Math.max(...Array.from(t).flatMap((d) => {
-          const k = d.querySelectorAll("text");
-          return k.length ? Array.from(k).map((Y) => Y.getBBox().width) : 0;
-        })), _ = Math.max(...Array.from(l).flatMap((d) => {
-          const k = d.querySelectorAll("text");
-          return k.length ? Array.from(k).map((Y) => Y.getBBox().width) : 0;
+        const g = Math.max(...Array.from(t).flatMap((d) => {
+          const w = d.querySelectorAll("text");
+          return w.length ? Array.from(w).map((Y) => Y.getBBox().width) : 0;
+        })), $ = Math.max(...Array.from(l).flatMap((d) => {
+          const w = d.querySelectorAll("text");
+          return w.length ? Array.from(w).map((Y) => Y.getBBox().width) : 0;
         }));
         Array.from(t).forEach((d) => {
-          const k = d.querySelectorAll("text");
-          Array.from(k).forEach(async (Y) => {
-            Y.setAttribute("x", 0), Y.setAttribute("x", L(-f - _));
+          const w = d.querySelectorAll("text");
+          Array.from(w).forEach(async (Y) => {
+            Y.setAttribute("x", 0), Y.setAttribute("x", L(-g - $));
           });
         });
       }
-      await ve();
-      const a = W.value ? W.value.getBBox() : 0, o = e.value.style.chart.layout.bars.dataLabels.offsetX;
-      ue.value = [
+      await ce();
+      const a = H.value ? H.value.getBBox() : 0, o = e.value.style.chart.layout.bars.dataLabels.offsetX;
+      se.value = [
         a.x + -o,
         0,
         a.width + o * 2,
-        r.value.fullHeight
+        i.value.fullHeight
       ].join(" ");
     }
-    let je;
-    Te(() => {
-      z.value && (je = new ResizeObserver((t) => {
+    let Qe;
+    Ae(() => {
+      P.value && (Qe = new ResizeObserver((t) => {
         for (const l of t) {
           const { width: a, height: o } = l.contentRect;
           if (a > 0 && o > 0) {
             Promise.resolve().then(async () => {
-              j(), await O();
+              q(), await O();
             });
             break;
           }
         }
-      }), je.observe(z.value.parentElement));
+      }), Qe.observe(P.value.parentElement));
     });
-    const se = b(() => !!e.value.debug), _e = i(0);
-    function qe() {
-      if (Pe(g.dataset) && (ne({
+    const re = y(() => !!e.value.debug), Ce = r(0);
+    function Ze() {
+      if (Ve(b.dataset) && (ue({
         componentName: "VueUiVerticalBar",
         type: "dataset",
-        debug: se.value
-      }), ce.value = !1, me.value = !0), ee.value = be.value.flatMap((t) => t.children && t.children.length > 0 ? t.children.length : 1).reduce((t, l) => t + l, 0), Tt(), Pe(g.dataset) || (me.value = e.value.loading), e.value.responsive) {
-        const t = aa(() => {
-          const { width: l, height: a } = la({
-            chart: z.value,
-            title: e.value.style.chart.title.text ? Ve.value : null,
-            legend: e.value.style.chart.legend.show ? fe.value : null,
-            source: Ie.value,
-            noTitle: Oe.value
+        debug: re.value
+      }), fe.value = !1, we.value = !0), ae.value = xe.value.flatMap((t) => t.children && t.children.length > 0 ? t.children.length : 1).reduce((t, l) => t + l, 0), At(), Ve(b.dataset) || (we.value = e.value.loading), e.value.responsive) {
+        const t = ua(() => {
+          const { width: l, height: a } = sa({
+            chart: P.value,
+            title: e.value.style.chart.title.text ? Be.value : null,
+            legend: e.value.style.chart.legend.show ? be.value : null,
+            source: De.value,
+            noTitle: Re.value
           });
-          _e.value = a / 3, requestAnimationFrame(async () => {
-            Je.value = l;
-            const o = m.value * (ee.value - 1);
-            c.value = (a - o) / ee.value, await ve(), O();
+          Ce.value = a / 3, requestAnimationFrame(async () => {
+            at.value = l;
+            const o = x.value * (ae.value - 1);
+            p.value = (a - o) / ae.value, await ce(), O();
           });
         });
-        I.value && (H.value && I.value.unobserve(H.value), I.value.disconnect()), I.value = new ResizeObserver(t), H.value = z.value.parentNode, I.value.observe(H.value), e.value.autoSize && O();
+        I.value && (j.value && I.value.unobserve(j.value), I.value.disconnect()), I.value = new ResizeObserver(t), j.value = P.value.parentNode, I.value.observe(j.value), e.value.autoSize && O();
       }
     }
-    Et(() => {
-      I.value && (H.value && I.value.unobserve(H.value), I.value.disconnect());
+    Gt(() => {
+      I.value && (j.value && I.value.unobserve(j.value), I.value.disconnect());
     });
-    function Tt() {
-      if (ge.value) return;
+    function At() {
+      if (ke.value) return;
       new ResizeObserver((l) => {
         l.forEach((a) => {
-          He.value = a.contentRect.width < Ct.value;
+          Je.value = a.contentRect.width < Nt.value;
         });
-      }).observe(We.value);
+      }).observe(Ke.value);
     }
-    const $ = i({
+    const k = r({
       showTable: e.value.table.show,
       sortDesc: e.value.style.chart.layout.bars.sort === "desc",
       showTooltip: e.value.style.chart.tooltip.show
-    }), Ye = b(() => $.value.sortDesc), F = b(() => (be.value.forEach((t, l) => {
-      !t.value && !t.children && ne({
+    }), et = y(() => k.value.sortDesc), F = y(() => (xe.value.forEach((t, l) => {
+      !t.value && !t.children && ue({
         componentName: "VueUiVerticalBar",
         type: "datasetAttributeEmpty",
         property: `value (index ${l})`,
-        debug: se.value
-      }), t.children && (Pe(t.children) ? ne({
+        debug: re.value
+      }), t.children && (Ve(t.children) ? ue({
         componentName: "VueUiVerticalBar",
         type: "datasetAttributeEmpty",
         property: `children (index ${l})`,
-        debug: se.value
+        debug: re.value
       }) : t.children.forEach((a, o) => {
-        [null, void 0].includes(a.name) && ne({
+        [null, void 0].includes(a.name) && ue({
           componentName: "VueUiVerticalBar",
           type: "datasetSerieAttribute",
           property: "name",
           key: "children",
           index: o,
-          debug: se.value
+          debug: re.value
         });
       }));
-    }), be.value.map((t, l) => {
-      const a = `vertical_parent_${l}_${S.value}`, o = t.children && t.children.length > 0, f = L(t.value ? t.value : o ? t.children.map((d) => d.value || 0).reduce((d, k) => d + k, 0) : 0), _ = f >= 0 ? 1 : -1;
+    }), xe.value.map((t, l) => {
+      const a = `vertical_parent_${l}_${S.value}`, o = t.children && t.children.length > 0, g = L(t.value ? t.value : o ? t.children.map((d) => d.value || 0).reduce((d, w) => d + w, 0) : 0), $ = g >= 0 ? 1 : -1;
       return {
         ...t,
         id: a,
         absoluteIndex: l,
         shape: "square",
-        opacity: N.value.includes(a) ? 0.5 : 1,
-        value: Math.abs(f),
-        sign: _,
+        opacity: A.value.includes(a) ? 0.5 : 1,
+        value: Math.abs(g),
+        sign: $,
         hasChildren: o,
         isChild: !1,
-        segregate: () => te(a),
-        isSegregated: N.value.includes(a),
-        color: Ne(t.color) || Ge.value[l] || U[l] || U[l % U.length],
-        children: !t.children || !t.children.length ? [] : t.children.toSorted(re.value ? () => 0 : (d, k) => Ye.value ? k.value - d.value : d.value - k.value).map((d, k) => ({
+        segregate: () => oe(a),
+        isSegregated: A.value.includes(a),
+        color: Ie(t.color) || Ye.value[l] || W[l] || W[l % W.length],
+        children: !t.children || !t.children.length ? [] : t.children.toSorted(ie.value ? () => 0 : (d, w) => et.value ? w.value - d.value : d.value - w.value).map((d, w) => ({
           ...d,
           value: L(Math.abs(d.value)),
           absoluteIndex: l,
@@ -261,34 +261,34 @@ const ha = ["id"], pa = ["onClick"], fa = ["xmlns", "viewBox"], ya = ["x", "widt
           isChild: !0,
           parentId: a,
           parentName: t.name,
-          parentValue: f,
-          parentSign: _,
-          id: `vertical_child_${l}_${k}_${S.value}`,
-          childIndex: k,
-          color: Ne(d.color) || Ne(t.color) || Ge.value[l] || U[l] || U[l % U.length]
-        })).map((d, k) => ({
+          parentValue: g,
+          parentSign: $,
+          id: `vertical_child_${l}_${w}_${S.value}`,
+          childIndex: w,
+          color: Ie(d.color) || Ie(t.color) || Ye.value[l] || W[l] || W[l % W.length]
+        })).map((d, w) => ({
           ...d,
-          isFirstChild: k === 0,
-          isLastChild: k === t.children.length - 1
+          isFirstChild: w === 0,
+          isLastChild: w === t.children.length - 1
         }))
       };
-    }).toSorted(re.value ? () => 0 : (t, l) => Ye.value ? l.value - t.value : t.value - l.value))), Ke = b(() => ({
+    }).toSorted(ie.value ? () => 0 : (t, l) => et.value ? l.value - t.value : t.value - l.value))), tt = y(() => ({
       cy: "vertical-bar-div-legend",
       backgroundColor: e.value.style.chart.legend.backgroundColor,
       color: e.value.style.chart.legend.color,
       fontSize: e.value.style.chart.legend.fontSize,
       paddingBottom: 12,
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
-    })), c = i(e.value.style.chart.layout.bars.height), m = i(e.value.style.chart.layout.bars.gap), St = b(() => (c.value + m.value) * ee.value), Je = i(512), C = b(() => ({
-      width: Je.value,
-      height: St.value,
+    })), p = r(e.value.style.chart.layout.bars.height), x = r(e.value.style.chart.layout.bars.gap), zt = y(() => (p.value + x.value) * ae.value), at = r(512), C = y(() => ({
+      width: at.value,
+      height: zt.value,
       padding: {
         top: 12,
         left: (e.value.autoSize ? 0 : 128) + e.value.style.chart.layout.bars.offsetX,
         right: (e.value.autoSize ? 0 : 64) + e.value.style.chart.layout.bars.paddingRight,
         bottom: 12
       }
-    })), r = b(() => ({
+    })), i = y(() => ({
       fullHeight: C.value.padding.top + C.value.padding.bottom + C.value.height,
       top: C.value.padding.top,
       left: C.value.padding.left,
@@ -296,78 +296,78 @@ const ha = ["id"], pa = ["onClick"], fa = ["xmlns", "viewBox"], ya = ["x", "widt
       bottom: C.value.padding.top + C.value.height,
       width: C.value.width - (C.value.padding.left + C.value.padding.right)
     }));
-    async function j() {
-      ee.value = B.value.flatMap((t) => t.children && t.children.length > 0 ? t.children.length : 1).reduce((t, l) => t + l, 0), e.value.autoSize && await O();
+    async function q() {
+      ae.value = B.value.flatMap((t) => t.children && t.children.length > 0 ? t.children.length : 1).reduce((t, l) => t + l, 0), e.value.autoSize && await O();
     }
-    const N = i([]);
-    async function te(t) {
-      if (N.value.includes(t))
-        N.value = N.value.filter((l) => l !== t);
+    const A = r([]);
+    async function oe(t) {
+      if (A.value.includes(t))
+        A.value = A.value.filter((l) => l !== t);
       else {
-        if (N.value.length === F.value.length - 1) return;
-        N.value.push(t);
+        if (A.value.length === F.value.length - 1) return;
+        A.value.push(t);
       }
-      j(), await ve(), e.value.autoSize && O(), _t("selectLegend", B.value);
+      q(), await ce(), e.value.autoSize && O(), St("selectLegend", B.value);
     }
-    const B = b(() => F.value.filter((t) => !N.value.includes(t.id))), V = b(() => B.value.map((t) => Math.abs(t.value)).reduce((t, l) => t + l, 0));
-    function Qe(t, l = !1, a = 0) {
+    const B = y(() => F.value.filter((t) => !A.value.includes(t.id))), V = y(() => B.value.map((t) => Math.abs(t.value)).reduce((t, l) => t + l, 0));
+    function lt(t, l = !1, a = 0) {
       return l ? G({
         v: L(Math.abs(t) / V.value * 100),
         s: "%",
         r: a
       }) : Math.abs(t) / V.value;
     }
-    const R = b(() => B.value.flatMap((t) => t.hasChildren ? t.children : t)), E = b(() => R.value.map((t) => t.sign).includes(-1)), Lt = b(() => Math.max(...B.value.flatMap((t) => t.children && t.children.length ? Math.max(...t.children.map((l) => l.value)) : t.value)));
+    const D = y(() => B.value.flatMap((t) => t.hasChildren ? t.children : t)), R = y(() => D.value.map((t) => t.sign).includes(-1)), Vt = y(() => Math.max(...B.value.flatMap((t) => t.children && t.children.length ? Math.max(...t.children.map((l) => l.value)) : t.value)));
     function T(t) {
-      const l = t / Lt.value;
-      return r.value.width / (E.value ? 2 : 1) * l;
+      const l = t / Vt.value;
+      return i.value.width / (R.value ? 2 : 1) * l;
     }
-    function Pt(t) {
-      return T(t) + r.value.left;
+    function It(t) {
+      return T(t) + i.value.left;
     }
-    function ae(t, l) {
-      const a = B.value.find((_) => _.id === t.parentId), o = r.value.top + (m.value + c.value) * l, f = a.children.length * (m.value + c.value);
+    function ne(t, l) {
+      const a = B.value.find(($) => $.id === t.parentId), o = i.value.top + (x.value + p.value) * l, g = a.children.length * (x.value + p.value);
       return {
-        y: o + f / 2 - e.value.style.chart.layout.bars.parentLabels.fontSize,
+        y: o + g / 2 - e.value.style.chart.layout.bars.parentLabels.fontSize,
         name: a.name,
         value: [void 0, NaN, null].includes(a.value) ? "" : a.sign === 1 ? a.value : -a.value,
-        percentageToTotal: isNaN(a.value / V.value) ? "" : Qe(a.value, !0, e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage),
+        percentageToTotal: isNaN(a.value / V.value) ? "" : lt(a.value, !0, e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage),
         sign: a.sign
       };
     }
-    function Nt() {
+    function Ot() {
       return B.value;
     }
-    const we = i(null), $e = i(null);
-    function At({ datapoint: t, seriesIndex: l }) {
+    const Te = r(null), Se = r(null);
+    function Ft({ datapoint: t, seriesIndex: l }) {
       e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: l });
     }
-    function zt({ datapoint: t, seriesIndex: l }) {
-      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: l }), xt.value = null, he.value = !1, we.value = null;
+    function Mt({ datapoint: t, seriesIndex: l }) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: l }), Tt.value = null, ge.value = !1, Te.value = null;
     }
-    function Vt(t, l) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datpoint: t, seriesIndex: l }), $e.value = {
+    function Bt(t, l) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datpoint: t, seriesIndex: l }), Se.value = {
         datapoint: t,
         seriesIndex: l,
         series: F.value,
         config: e.value
-      }, he.value = !0, we.value = t.id;
+      }, ge.value = !0, Te.value = t.id;
       let a = "";
-      const o = t.isChild ? t.parentName : t.name, f = t.isChild ? t.name : "", _ = e.value.style.chart.tooltip.customFormat;
-      ea(_) && ta(() => _({
+      const o = t.isChild ? t.parentName : t.name, g = t.isChild ? t.name : "", $ = e.value.style.chart.tooltip.customFormat;
+      oa($) && na(() => $({
         datapoint: t,
         series: F.value,
         config: e.value,
         seriesIndex: l
-      })) ? pe.value = _({
+      })) ? ye.value = $({
         datapoint: t,
         series: F.value,
         config: e.value,
         seriesIndex: l
       }) : (a += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;text-align:left;">
-                <div style="display:flex;align-items:center;gap:4px;"><svg viewBox="0 0 60 60" height="14" width="14"><rect x="0" y="0" height="60" width="60" rx="5" stroke="none" fill="${t.color}"/>${mt.pattern ? `<rect x="0" y="0" height="60" width="60" rx="5" stroke="none" fill="url(#pattern_${S.value}_${t.absoluteIndex})"/>` : ""}</svg> ${o}</div>
-                ${f ? `<div>${f}</div>` : ""}
-            </div>`, e.value.style.chart.tooltip.showValue && (a += `<div>${e.value.translations.value}: <b>${de(
+                <div style="display:flex;align-items:center;gap:4px;"><svg viewBox="0 0 60 60" height="14" width="14"><rect x="0" y="0" height="60" width="60" rx="5" stroke="none" fill="${t.color}"/>${$t.pattern ? `<rect x="0" y="0" height="60" width="60" rx="5" stroke="none" fill="url(#pattern_${S.value}_${t.absoluteIndex})"/>` : ""}</svg> ${o}</div>
+                ${g ? `<div>${g}</div>` : ""}
+            </div>`, e.value.style.chart.tooltip.showValue && (a += `<div>${e.value.translations.value}: <b>${pe(
         e.value.style.chart.layout.bars.dataLabels.value.formatter,
         t.sign === 1 ? t.value : -t.value,
         G({
@@ -385,12 +385,12 @@ const ha = ["id"], pa = ["onClick"], fa = ["xmlns", "viewBox"], ya = ["x", "widt
         v: Math.abs(t.value) / Math.abs(t.parentValue) * 100,
         s: "%",
         r: e.value.style.chart.tooltip.roundingPercentage
-      })}</b></div>`)), pe.value = `<div style="text-align:left">${a}</div>`);
+      })}</b></div>`)), ye.value = `<div style="text-align:left">${a}</div>`);
     }
-    function Ze(t, l, a, o) {
+    function ot(t, l, a, o) {
       if (!e.value.style.chart.layout.bars.dataLabels.value.show)
         return "";
-      const f = de(
+      const g = pe(
         e.value.style.chart.layout.bars.dataLabels.value.formatter,
         L(o === -1 && t >= 0 ? -t : t),
         G({
@@ -400,10 +400,10 @@ const ha = ["id"], pa = ["onClick"], fa = ["xmlns", "viewBox"], ya = ["x", "widt
           r: e.value.style.chart.layout.bars.dataLabels.value.roundingValue
         }),
         { datapoint: l, seriesIndex: a }
-      ), _ = `(${Qe(t, !0, e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage)})`;
-      return `${f}${e.value.style.chart.layout.bars.dataLabels.percentage.show ? ` ${_}` : ""}`;
+      ), $ = `(${lt(t, !0, e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage)})`;
+      return `${g}${e.value.style.chart.layout.bars.dataLabels.percentage.show ? ` ${$}` : ""}`;
     }
-    const A = b(() => {
+    const z = y(() => {
       const t = [
         e.value.translations.parentName,
         e.value.translations.value,
@@ -412,7 +412,7 @@ const ha = ["id"], pa = ["onClick"], fa = ["xmlns", "viewBox"], ya = ["x", "widt
         e.value.translations.value,
         e.value.translations.percentageToSerie,
         e.value.translations.percentageToTotal
-      ], l = R.value.map((a) => a.isChild ? a.isFirstChild ? {
+      ], l = D.value.map((a) => a.isChild ? a.isFirstChild ? {
         color: a.color,
         parentName: a.parentName,
         parentValue: a.parentValue,
@@ -442,8 +442,8 @@ const ha = ["id"], pa = ["onClick"], fa = ["xmlns", "viewBox"], ya = ["x", "widt
       });
       return { head: t, body: l };
     });
-    function et(t = null) {
-      const l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], a = A.value.head, o = A.value.body.map((d) => [
+    function Le(t = null) {
+      const l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], a = z.value.head, o = z.value.body.map((d) => [
         d.parentName,
         d.parentValue,
         d.percentageToTotal,
@@ -451,100 +451,132 @@ const ha = ["id"], pa = ["onClick"], fa = ["xmlns", "viewBox"], ya = ["x", "widt
         d.childValue,
         d.childPercentageToParent,
         d.childPercentageToTotal
-      ]), f = l.concat([a]).concat(o), _ = Qt(f);
-      t ? t(_) : Zt({ csvContent: _, title: e.value.style.chart.title.text || "vue-ui-vertical-bar" });
+      ]), g = l.concat([a]).concat(o), $ = aa(g);
+      t ? t($) : la({ csvContent: $, title: e.value.style.chart.title.text || "vue-ui-vertical-bar" });
     }
-    const q = i(!1);
-    function tt(t) {
-      q.value = t, ze.value += 1;
+    const E = r(!1);
+    function nt(t) {
+      E.value = t, Me.value += 1;
     }
-    function at() {
-      $.value.showTable = !$.value.showTable;
+    function ut() {
+      k.value.showTable = !k.value.showTable;
     }
-    const It = i({
+    const Dt = r({
       none: 0,
       asc: 1,
       desc: 2
-    }), M = i(0), re = i(!1);
-    Te(() => {
-      ["none", "asc", "desc"].includes(e.value.style.chart.layout.bars.sort) || ne({
+    }), M = r(0), ie = r(!1);
+    Ae(() => {
+      ["none", "asc", "desc"].includes(e.value.style.chart.layout.bars.sort) || ue({
         componentName: "VueUiVerticalBar",
         type: "attributeWrongValue",
         property: "style.chart.layout.bars.sort",
         key: e.value.style.chart.layout.bars.sort
-      }), M.value = It.value[e.value.style.chart.layout.bars.sort], $.value.sortDesc = M.value === 2, re.value = M.value === 0;
+      }), M.value = Dt.value[e.value.style.chart.layout.bars.sort], k.value.sortDesc = M.value === 2, ie.value = M.value === 0;
     });
-    function Ot() {
+    function Rt() {
       M.value += 1, M.value > 2 && (M.value = 0);
     }
-    function lt() {
-      Ot(), $.value.sortDesc = M.value === 2, re.value = M.value === 0, j();
+    function st() {
+      Rt(), k.value.sortDesc = M.value === 2, ie.value = M.value === 0, q();
     }
-    function ot() {
-      $.value.showTooltip = !$.value.showTooltip;
+    function rt() {
+      k.value.showTooltip = !k.value.showTooltip;
     }
-    const ie = i(!1);
-    function Ce() {
-      ie.value = !ie.value;
+    const ve = r(!1);
+    function Pe() {
+      ve.value = !ve.value;
     }
-    async function Ft({ scale: t = 2 } = {}) {
-      if (!z.value) return;
-      const { width: l, height: a } = z.value.getBoundingClientRect(), o = l / a, { imageUri: f, base64: _ } = await ia({ domElement: z.value, base64: !0, img: !0, scale: t });
+    async function Et({ scale: t = 2 } = {}) {
+      if (!P.value) return;
+      const { width: l, height: a } = P.value.getBoundingClientRect(), o = l / a, { imageUri: g, base64: $ } = await fa({ domElement: P.value, base64: !0, img: !0, scale: t });
       return {
-        imageUri: f,
-        base64: _,
+        imageUri: g,
+        base64: $,
         title: e.value.style.chart.title.text,
         width: l,
         height: a,
         aspectRatio: o
       };
     }
-    return dt({
+    const de = y(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, l = k.value.showTable;
+      return {
+        component: t ? wt : ha,
+        title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.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: E.value,
+          fullscreenParent: P.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8)
+        } : {
+          hideDetails: !0,
+          config: {
+            open: l,
+            maxHeight: 1e4,
+            body: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            },
+            head: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            }
+          }
+        }
+      };
+    });
+    return Ne(() => k.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && le.value ? le.value.open() : "close" in le.value && le.value.close());
+    }), gt({
       autoSize: O,
       // v3
-      getData: Nt,
-      getImage: Ft,
-      recalculateHeight: j,
-      generatePdf: Xe,
-      generateCsv: et,
-      generateImage: Ue,
-      toggleTable: at,
-      toggleSort: lt,
-      toggleTooltip: ot,
-      toggleAnnotator: Ce,
-      toggleFullscreen: tt
+      getData: Ot,
+      getImage: Et,
+      recalculateHeight: q,
+      generatePdf: je,
+      generateCsv: Le,
+      generateImage: qe,
+      toggleTable: ut,
+      toggleSort: st,
+      toggleTooltip: rt,
+      toggleAnnotator: Pe,
+      toggleFullscreen: nt
     }), (t, l) => (u(), v("div", {
-      class: D(`vue-ui-vertical-bar ${q.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"} ${e.value.responsive && e.value.autoSize ? "vue-ui-vertical-bar-autosize" : ""}`),
+      class: U(`vue-ui-vertical-bar ${E.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"} ${e.value.responsive && e.value.autoSize ? "vue-ui-vertical-bar-autosize" : ""}`),
       ref_key: "verticalBarChart",
-      ref: z,
+      ref: P,
       id: `vue-ui-vertical-bar_${S.value}`,
-      style: h(`padding-top:${e.value.responsive && e.value.autoSize ? `${_e.value / 2}px` : "0"}; font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? e.value.autoSize ? `height:calc(100% - ${_e.value}px` : "height: 100%" : ""}`),
-      onMouseenter: l[4] || (l[4] = () => s(Me)(!0)),
-      onMouseleave: l[5] || (l[5] = () => s(Me)(!1))
+      style: c(`padding-top:${e.value.responsive && e.value.autoSize ? `${Ce.value / 2}px` : "0"}; font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? e.value.autoSize ? `height:calc(100% - ${Ce.value}px` : "height: 100%" : ""}`),
+      onMouseenter: l[6] || (l[6] = () => s(Ue)(!0)),
+      onMouseleave: l[7] || (l[7] = () => s(Ue)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (u(), X(s(ft), {
+      e.value.userOptions.buttons.annotator ? (u(), X(s(mt), {
         key: 0,
-        svgRef: s(Re),
+        svgRef: s(We),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        active: ie.value,
-        onClose: Ce
-      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : y("", !0),
-      $t.value ? (u(), v("div", {
+        active: ve.value,
+        onClose: Pe
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : f("", !0),
+      Pt.value ? (u(), v("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: Oe,
+        ref: Re,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : y("", !0),
+      }, null, 512)) : f("", !0),
       e.value.style.chart.title.text ? (u(), v("div", {
         key: 2,
         ref_key: "chartTitle",
-        ref: Ve,
+        ref: Be,
         style: "width:100%;background:transparent;padding-bottom:12px"
       }, [
-        (u(), X(ra, {
-          key: `title_${Fe.value}`,
+        (u(), X(pa, {
+          key: `title_${Ee.value}`,
           config: {
             title: {
               cy: "vertical-bar-div-title",
@@ -556,15 +588,15 @@ const ha = ["id"], pa = ["onClick"], fa = ["xmlns", "viewBox"], ya = ["x", "widt
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : y("", !0),
-      e.value.userOptions.show && ce.value && (s(Be) || s(ke)) ? (u(), X(s(gt), {
+      ], 512)) : f("", !0),
+      e.value.userOptions.show && fe.value && (s(Xe) || s(_e)) ? (u(), X(s(kt), {
         ref_key: "details",
-        ref: kt,
-        key: `user_options_${ze.value}`,
+        ref: Ct,
+        key: `user_options_${Me.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isImaging: s(De),
-        isPrinting: s(Ee),
+        isImaging: s(He),
+        isPrinting: s(Ge),
         uid: S.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
@@ -573,114 +605,114 @@ const ha = ["id"], pa = ["onClick"], fa = ["xmlns", "viewBox"], ya = ["x", "widt
         hasTable: e.value.userOptions.buttons.table,
         hasSort: e.value.userOptions.buttons.sort,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: q.value,
-        isTooltip: $.value.showTooltip,
+        isFullscreen: E.value,
+        isTooltip: k.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: z.value,
+        chartElement: P.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: ie.value,
+        isAnnotation: ve.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
-        onToggleFullscreen: tt,
-        onGeneratePdf: s(Xe),
-        onGenerateCsv: et,
-        onGenerateImage: s(Ue),
-        onToggleTable: at,
-        onToggleSort: lt,
-        onToggleTooltip: ot,
-        onToggleAnnotator: Ce,
-        style: h({
-          visibility: s(Be) ? s(ke) ? "visible" : "hidden" : "visible"
+        onToggleFullscreen: nt,
+        onGeneratePdf: s(je),
+        onGenerateCsv: Le,
+        onGenerateImage: s(qe),
+        onToggleTable: ut,
+        onToggleSort: st,
+        onToggleTooltip: rt,
+        onToggleAnnotator: Pe,
+        style: c({
+          visibility: s(Xe) ? s(_e) ? "visible" : "hidden" : "visible"
         })
-      }, Se({ _: 2 }, [
+      }, he({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: w(({ isOpen: a, color: o }) => [
-            x(t.$slots, "menuIcon", K(J({ isOpen: a, color: o })), void 0, !0)
+          fn: m(({ isOpen: a, color: o }) => [
+            _(t.$slots, "menuIcon", Q(Z({ isOpen: a, color: o })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: w(() => [
-            x(t.$slots, "optionTooltip", {}, void 0, !0)
+          fn: m(() => [
+            _(t.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: w(() => [
-            x(t.$slots, "optionPdf", {}, void 0, !0)
+          fn: m(() => [
+            _(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: w(() => [
-            x(t.$slots, "optionCsv", {}, void 0, !0)
+          fn: m(() => [
+            _(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: w(() => [
-            x(t.$slots, "optionImg", {}, void 0, !0)
+          fn: m(() => [
+            _(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
-          fn: w(() => [
-            x(t.$slots, "optionTable", {}, void 0, !0)
+          fn: m(() => [
+            _(t.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         t.$slots.optionLabels ? {
           name: "optionLabels",
-          fn: w(() => [
-            x(t.$slots, "optionLabels", {}, void 0, !0)
+          fn: m(() => [
+            _(t.$slots, "optionLabels", {}, void 0, !0)
           ]),
           key: "6"
         } : void 0,
         t.$slots.optionSort ? {
           name: "optionSort",
-          fn: w(() => [
-            x(t.$slots, "optionSort", {}, void 0, !0)
+          fn: m(() => [
+            _(t.$slots, "optionSort", {}, void 0, !0)
           ]),
           key: "7"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: w(({ toggleFullscreen: a, isFullscreen: o }) => [
-            x(t.$slots, "optionFullscreen", K(J({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
+          fn: m(({ toggleFullscreen: a, isFullscreen: o }) => [
+            _(t.$slots, "optionFullscreen", Q(Z({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
           ]),
           key: "8"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: w(({ toggleAnnotator: a, isAnnotator: o }) => [
-            x(t.$slots, "optionAnnotator", K(J({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
+          fn: m(({ toggleAnnotator: a, isAnnotator: o }) => [
+            _(t.$slots, "optionAnnotator", Q(Z({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
           ]),
           key: "9"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasSort", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasSort", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
       e.value.style.chart.legend.show && e.value.style.chart.legend.position === "top" ? (u(), v("div", {
         key: 4,
         ref_key: "chartLegend",
-        ref: fe
+        ref: be
       }, [
-        (u(), X(rt, {
-          key: `legend_top_${ye.value}`,
+        (u(), X(ht, {
+          key: `legend_top_${me.value}`,
           legendSet: F.value,
-          config: Ke.value,
-          onClickMarker: l[0] || (l[0] = ({ legend: a }) => te(a.id))
-        }, Se({
-          item: w(({ legend: a, index: o }) => [
+          config: tt.value,
+          onClickMarker: l[0] || (l[0] = ({ legend: a }) => oe(a.id))
+        }, he({
+          item: m(({ legend: a, index: o }) => [
             n("div", {
-              onClick: (f) => te(a.id),
-              style: h(`opacity:${N.value.includes(a.id) ? 0.5 : 1}`)
-            }, p(a.name) + ": " + p(s(de)(
+              onClick: (g) => oe(a.id),
+              style: c(`opacity:${A.value.includes(a.id) ? 0.5 : 1}`)
+            }, h(a.name) + ": " + h(s(pe)(
               e.value.style.chart.layout.bars.dataLabels.value.formatter,
               a.value,
               s(G)({
@@ -690,14 +722,14 @@ const ha = ["id"], pa = ["onClick"], fa = ["xmlns", "viewBox"], ya = ["x", "widt
                 r: e.value.style.chart.legend.roundingValue
               }),
               { datapoint: a, seriesIndex: o }
-            )), 13, pa)
+            )), 13, ba)
           ]),
           _: 2
         }, [
           t.$slots.pattern ? {
             name: "legend-pattern",
-            fn: w(({ legend: a, index: o }) => [
-              oe(it, {
+            fn: m(({ legend: a, index: o }) => [
+              J(pt, {
                 shape: a.shape,
                 radius: 30,
                 stroke: "none",
@@ -708,34 +740,34 @@ const ha = ["id"], pa = ["onClick"], fa = ["xmlns", "viewBox"], ya = ["x", "widt
             key: "0"
           } : void 0
         ]), 1032, ["legendSet", "config"]))
-      ], 512)) : y("", !0),
+      ], 512)) : f("", !0),
       (u(), v("svg", {
         ref_key: "svgRef",
-        ref: Re,
-        xmlns: s(Kt),
-        class: D({ "vue-data-ui-fullscreen--on": q.value, "vue-data-ui-fulscreen--off": !q.value }),
-        viewBox: ue.value,
-        style: h(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
+        ref: We,
+        xmlns: s(ea),
+        class: U({ "vue-data-ui-fullscreen--on": E.value, "vue-data-ui-fulscreen--off": !E.value }),
+        viewBox: se.value,
+        style: c(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
       }, [
         n("g", {
           ref_key: "G",
-          ref: W,
+          ref: H,
           class: "vue-data-ui-g"
         }, [
-          oe(s(pt)),
+          J(s(xt)),
           t.$slots["chart-background"] ? (u(), v("foreignObject", {
             key: 0,
-            x: P.value.x,
+            x: N.value.x,
             y: 0,
-            width: P.value.width,
-            height: P.value.height,
+            width: N.value.width,
+            height: N.value.height,
             style: {
               pointerEvents: "none"
             }
           }, [
-            x(t.$slots, "chart-background", {}, void 0, !0)
-          ], 8, ya)) : y("", !0),
-          (u(!0), v(Q, null, Z(R.value, (a, o) => (u(), v("linearGradient", {
+            _(t.$slots, "chart-background", {}, void 0, !0)
+          ], 8, ka)) : f("", !0),
+          (u(!0), v(ee, null, te(D.value, (a, o) => (u(), v("linearGradient", {
             x1: "0%",
             y1: "0%",
             x2: "100%",
@@ -745,145 +777,145 @@ const ha = ["id"], pa = ["onClick"], fa = ["xmlns", "viewBox"], ya = ["x", "widt
             n("stop", {
               offset: "0%",
               "stop-color": a.color
-            }, null, 8, ba),
+            }, null, 8, wa),
             n("stop", {
               offset: "100%",
-              "stop-color": s(Ae)(s(Jt)(a.color, 0.03), 100 - e.value.style.chart.layout.bars.gradientIntensity)
-            }, null, 8, ma)
-          ], 8, ga))), 256)),
-          t.$slots.pattern ? (u(), v("g", ka, [
-            (u(!0), v(Q, null, Z(R.value, (a) => (u(), v("defs", null, [
-              x(t.$slots, "pattern", Dt({ ref_for: !0 }, { seriesIndex: a.absoluteIndex, patternId: `pattern_${S.value}_${a.absoluteIndex}` }), void 0, !0)
+              "stop-color": s(Oe)(s(ta)(a.color, 0.03), 100 - e.value.style.chart.layout.bars.gradientIntensity)
+            }, null, 8, _a)
+          ], 8, xa))), 256)),
+          t.$slots.pattern ? (u(), v("g", $a, [
+            (u(!0), v(ee, null, te(D.value, (a) => (u(), v("defs", null, [
+              _(t.$slots, "pattern", vt({ ref_for: !0 }, { seriesIndex: a.absoluteIndex, patternId: `pattern_${S.value}_${a.absoluteIndex}` }), void 0, !0)
             ]))), 256))
-          ])) : y("", !0),
-          (u(!0), v(Q, null, Z(R.value, (a, o) => (u(), v("g", null, [
+          ])) : f("", !0),
+          (u(!0), v(ee, null, te(D.value, (a, o) => (u(), v("g", null, [
             n("rect", {
-              x: s(L)(E.value ? r.value.left + r.value.width / 2 - (a.sign === 1 ? 0 : T(a.value) <= 0 ? 1e-4 : T(a.value)) : r.value.left),
-              y: r.value.top + (m.value + c.value) * o,
+              x: s(L)(R.value ? i.value.left + i.value.width / 2 - (a.sign === 1 ? 0 : T(a.value) <= 0 ? 1e-4 : T(a.value)) : i.value.left),
+              y: i.value.top + (x.value + p.value) * o,
               width: s(L)(T(a.value) <= 0 ? 1e-4 : T(a.value)),
-              height: c.value <= 0 ? 1e-4 : c.value,
+              height: p.value <= 0 ? 1e-4 : p.value,
               fill: e.value.style.chart.layout.bars.underlayerColor,
               rx: e.value.style.chart.layout.bars.borderRadius,
-              class: D({ animated: e.value.useCssAnimation })
-            }, null, 10, xa)
+              class: U({ animated: e.value.useCssAnimation })
+            }, null, 10, Ca)
           ]))), 256)),
-          (u(!0), v(Q, null, Z(R.value, (a, o) => (u(), v("g", null, [
+          (u(!0), v(ee, null, te(D.value, (a, o) => (u(), v("g", null, [
             n("rect", {
-              x: s(L)(E.value ? r.value.left + r.value.width / 2 - (a.sign === 1 ? 0 : T(a.value) <= 0 ? 1e-4 : T(a.value)) : r.value.left),
-              y: r.value.top + (m.value + c.value) * o,
+              x: s(L)(R.value ? i.value.left + i.value.width / 2 - (a.sign === 1 ? 0 : T(a.value) <= 0 ? 1e-4 : T(a.value)) : i.value.left),
+              y: i.value.top + (x.value + p.value) * o,
               width: s(L)(T(a.value) <= 0 ? 1e-4 : T(a.value)),
-              height: c.value <= 0 ? 1e-4 : c.value,
-              fill: e.value.style.chart.layout.bars.useGradient ? `url(#vertical_bar_gradient_${S.value}_${o})` : s(Ae)(a.color, e.value.style.chart.layout.bars.fillOpacity),
+              height: p.value <= 0 ? 1e-4 : p.value,
+              fill: e.value.style.chart.layout.bars.useGradient ? `url(#vertical_bar_gradient_${S.value}_${o})` : s(Oe)(a.color, e.value.style.chart.layout.bars.fillOpacity),
               rx: e.value.style.chart.layout.bars.borderRadius,
               stroke: e.value.style.chart.layout.bars.useStroke ? a.color : "none",
               "stroke-width": e.value.style.chart.layout.bars.useStroke ? e.value.style.chart.layout.bars.strokeWidth : 0,
-              class: D({ animated: e.value.useCssAnimation })
-            }, null, 10, _a),
+              class: U({ animated: e.value.useCssAnimation })
+            }, null, 10, Ta),
             t.$slots.pattern ? (u(), v("rect", {
               key: 0,
-              x: s(L)(E.value ? r.value.left + r.value.width / 2 - (a.sign === 1 ? 0 : T(a.value) <= 0 ? 1e-4 : T(a.value)) : r.value.left),
-              y: r.value.top + (m.value + c.value) * o,
+              x: s(L)(R.value ? i.value.left + i.value.width / 2 - (a.sign === 1 ? 0 : T(a.value) <= 0 ? 1e-4 : T(a.value)) : i.value.left),
+              y: i.value.top + (x.value + p.value) * o,
               width: s(L)(T(a.value) <= 0 ? 1e-4 : T(a.value)),
-              height: c.value <= 0 ? 1e-4 : c.value,
+              height: p.value <= 0 ? 1e-4 : p.value,
               fill: `url(#pattern_${S.value}_${a.absoluteIndex})`,
               rx: e.value.style.chart.layout.bars.borderRadius,
               stroke: e.value.style.chart.layout.bars.useStroke ? a.color : "none",
               "stroke-width": e.value.style.chart.layout.bars.useStroke ? e.value.style.chart.layout.bars.strokeWidth : 0,
-              class: D({ animated: e.value.useCssAnimation })
-            }, null, 10, wa)) : y("", !0),
-            (!a.isChild || a.isLastChild) && e.value.style.chart.layout.separators.show && o !== R.value.length - 1 ? (u(), v("line", {
+              class: U({ animated: e.value.useCssAnimation })
+            }, null, 10, Sa)) : f("", !0),
+            (!a.isChild || a.isLastChild) && e.value.style.chart.layout.separators.show && o !== D.value.length - 1 ? (u(), v("line", {
               key: 1,
-              x1: P.value.x,
-              x2: e.value.style.chart.layout.separators.fullWidth ? P.value.width - Math.abs(P.value.x) : r.value.left,
-              y1: c.value + m.value / 2 + r.value.top + (m.value + c.value) * o,
-              y2: c.value + m.value / 2 + r.value.top + (m.value + c.value) * o,
+              x1: N.value.x,
+              x2: e.value.style.chart.layout.separators.fullWidth ? N.value.width - Math.abs(N.value.x) : i.value.left,
+              y1: p.value + x.value / 2 + i.value.top + (x.value + p.value) * o,
+              y2: p.value + x.value / 2 + i.value.top + (x.value + p.value) * o,
               stroke: e.value.style.chart.layout.separators.color,
               "stroke-width": e.value.style.chart.layout.separators.strokeWidth,
               "stroke-linecap": "round",
               style: { transition: "none !important", animation: "none !important" }
-            }, null, 8, $a)) : y("", !0),
-            E.value && e.value.style.chart.layout.separators.show ? (u(), v("line", {
+            }, null, 8, La)) : f("", !0),
+            R.value && e.value.style.chart.layout.separators.show ? (u(), v("line", {
               key: 2,
-              x1: r.value.left + r.value.width / 2,
-              x2: r.value.left + r.value.width / 2,
-              y1: r.value.top,
-              y2: r.value.bottom,
+              x1: i.value.left + i.value.width / 2,
+              x2: i.value.left + i.value.width / 2,
+              y1: i.value.top,
+              y2: i.value.bottom,
               stroke: e.value.style.chart.layout.separators.color,
               "stroke-width": e.value.style.chart.layout.separators.strokeWidth,
               "stroke-linecap": "round"
-            }, null, 8, Ca)) : y("", !0),
-            n("g", Ta, [
+            }, null, 8, Pa)) : f("", !0),
+            n("g", Na, [
               n("text", {
-                x: E.value ? r.value.left + r.value.width / 2 + (a.sign === 1 ? -12 : 12) + (a.sign === 1 ? -e.value.style.chart.layout.bars.dataLabels.offsetX : e.value.style.chart.layout.bars.dataLabels.offsetX) : Pt(a.value) + 3 + e.value.style.chart.layout.bars.dataLabels.offsetX,
-                y: r.value.top + (m.value + c.value) * o + c.value / 2 + e.value.style.chart.layout.bars.dataLabels.fontSize / 2,
-                "text-anchor": !E.value || a.sign === -1 ? "start" : "end",
+                x: R.value ? i.value.left + i.value.width / 2 + (a.sign === 1 ? -12 : 12) + (a.sign === 1 ? -e.value.style.chart.layout.bars.dataLabels.offsetX : e.value.style.chart.layout.bars.dataLabels.offsetX) : It(a.value) + 3 + e.value.style.chart.layout.bars.dataLabels.offsetX,
+                y: i.value.top + (x.value + p.value) * o + p.value / 2 + e.value.style.chart.layout.bars.dataLabels.fontSize / 2,
+                "text-anchor": !R.value || a.sign === -1 ? "start" : "end",
                 "font-size": e.value.style.chart.layout.bars.dataLabels.fontSize,
                 fill: e.value.style.chart.layout.bars.dataLabels.color,
                 "font-weight": e.value.style.chart.layout.bars.dataLabels.bold ? "bold" : "normal"
-              }, p(Ze(a.value, a, o, a.sign)), 9, Sa),
+              }, h(ot(a.value, a, o, a.sign)), 9, Aa),
               (a.isChild || !a.hasChildren) && e.value.style.chart.layout.bars.nameLabels.show ? (u(), v("text", {
                 key: 0,
                 "text-anchor": "end",
-                x: r.value.left - 3 + e.value.style.chart.layout.bars.nameLabels.offsetX,
-                y: r.value.top + (m.value + c.value) * o + c.value / 2 + e.value.style.chart.layout.bars.nameLabels.fontSize / 2,
+                x: i.value.left - 3 + e.value.style.chart.layout.bars.nameLabels.offsetX,
+                y: i.value.top + (x.value + p.value) * o + p.value / 2 + e.value.style.chart.layout.bars.nameLabels.fontSize / 2,
                 "font-size": e.value.style.chart.layout.bars.nameLabels.fontSize,
                 fill: e.value.style.chart.layout.bars.nameLabels.color,
                 "font-weight": e.value.style.chart.layout.bars.nameLabels.bold ? "bold" : "normal"
-              }, p(a.name), 9, La)) : y("", !0)
+              }, h(a.name), 9, za)) : f("", !0)
             ]),
-            n("g", Pa, [
+            n("g", Va, [
               a.isChild && a.childIndex === 0 && e.value.style.chart.layout.bars.parentLabels.show ? (u(), v("text", {
                 key: 0,
-                x: e.value.autoSize ? void 0 : P.value.x + e.value.style.chart.layout.bars.parentLabels.offsetX,
-                y: ae(a, o).y,
+                x: e.value.autoSize ? void 0 : N.value.x + e.value.style.chart.layout.bars.parentLabels.offsetX,
+                y: ne(a, o).y,
                 "font-size": e.value.style.chart.layout.bars.parentLabels.fontSize,
                 fill: e.value.style.chart.layout.bars.parentLabels.color,
                 "font-weight": e.value.style.chart.layout.bars.parentLabels.bold ? "bold" : "normal",
                 "text-anchor": "start"
-              }, p(ae(a, o).name), 9, Na)) : y("", !0),
+              }, h(ne(a, o).name), 9, Ia)) : f("", !0),
               a.isChild && a.childIndex === 0 && e.value.style.chart.layout.bars.parentLabels.show ? (u(), v("text", {
                 key: 1,
-                x: e.value.autoSize ? void 0 : P.value.x + e.value.style.chart.layout.bars.parentLabels.offsetX,
-                y: ae(a, o).y + e.value.style.chart.layout.bars.parentLabels.fontSize + 6,
+                x: e.value.autoSize ? void 0 : N.value.x + e.value.style.chart.layout.bars.parentLabels.offsetX,
+                y: ne(a, o).y + e.value.style.chart.layout.bars.parentLabels.fontSize + 6,
                 "font-size": e.value.style.chart.layout.bars.parentLabels.fontSize,
                 fill: e.value.style.chart.layout.bars.parentLabels.color,
                 "font-weight": e.value.style.chart.layout.bars.dataLabels.bold ? "bold" : "normal",
                 "text-anchor": "start"
-              }, p(Ze(ae(a, o).value), ae(a, o), o, a.parentSign || a.sign), 9, Aa)) : y("", !0)
+              }, h(ot(ne(a, o).value), ne(a, o), o, a.parentSign || a.sign), 9, Oa)) : f("", !0)
             ]),
             n("rect", {
-              x: P.value.x,
-              y: r.value.top + (m.value + c.value) * o - m.value / 2,
-              width: P.value.width,
-              height: c.value + m.value <= 0 ? 1e-4 : c.value + m.value,
-              fill: we.value === a.id ? s(Ae)(e.value.style.chart.layout.highlighter.color, e.value.style.chart.layout.highlighter.opacity) : "transparent",
-              onMouseenter: (f) => Vt(a, o),
-              onMouseleave: (f) => zt({ datapoint: a, seriesIndex: o }),
-              onClick: (f) => At({ datapoint: a, seriesIndex: o })
-            }, null, 40, za)
+              x: N.value.x,
+              y: i.value.top + (x.value + p.value) * o - x.value / 2,
+              width: N.value.width,
+              height: p.value + x.value <= 0 ? 1e-4 : p.value + x.value,
+              fill: Te.value === a.id ? s(Oe)(e.value.style.chart.layout.highlighter.color, e.value.style.chart.layout.highlighter.opacity) : "transparent",
+              onMouseenter: (g) => Bt(a, o),
+              onMouseleave: (g) => Mt({ datapoint: a, seriesIndex: o }),
+              onClick: (g) => Ft({ datapoint: a, seriesIndex: o })
+            }, null, 40, Fa)
           ]))), 256)),
-          x(t.$slots, "svg", { svg: P.value }, void 0, !0)
+          _(t.$slots, "svg", { svg: N.value }, void 0, !0)
         ], 512)
-      ], 14, fa)),
-      t.$slots.watermark ? (u(), v("div", Va, [
-        x(t.$slots, "watermark", K(J({ isPrinting: s(Ee) || s(De) })), void 0, !0)
-      ])) : y("", !0),
+      ], 14, ma)),
+      t.$slots.watermark ? (u(), v("div", Ma, [
+        _(t.$slots, "watermark", Q(Z({ isPrinting: s(Ge) || s(He) })), void 0, !0)
+      ])) : f("", !0),
       e.value.style.chart.legend.show && e.value.style.chart.legend.position === "bottom" ? (u(), v("div", {
         key: 6,
         ref_key: "chartLegend",
-        ref: fe
+        ref: be
       }, [
-        (u(), X(rt, {
-          key: `legend_bottom_${ye.value}`,
+        (u(), X(ht, {
+          key: `legend_bottom_${me.value}`,
           legendSet: F.value,
-          config: Ke.value,
-          onClickMarker: l[1] || (l[1] = ({ legend: a }) => te(a.id))
-        }, Se({
-          item: w(({ legend: a, index: o }) => [
+          config: tt.value,
+          onClickMarker: l[1] || (l[1] = ({ legend: a }) => oe(a.id))
+        }, he({
+          item: m(({ legend: a, index: o }) => [
             n("div", {
-              onClick: (f) => te(a.id),
-              style: h(`opacity:${N.value.includes(a.id) ? 0.5 : 1}`)
-            }, p(a.name) + ": " + p(s(de)(
+              onClick: (g) => oe(a.id),
+              style: c(`opacity:${A.value.includes(a.id) ? 0.5 : 1}`)
+            }, h(a.name) + ": " + h(s(pe)(
               e.value.style.chart.layout.bars.dataLabels.value.formatter,
               a.value,
               s(G)({
@@ -893,14 +925,14 @@ const ha = ["id"], pa = ["onClick"], fa = ["xmlns", "viewBox"], ya = ["x", "widt
                 r: e.value.style.chart.legend.roundingValue
               }),
               { datapoint: a, seriesIndex: o }
-            )), 13, Ia)
+            )), 13, Ba)
           ]),
           _: 2
         }, [
           t.$slots.pattern ? {
             name: "legend-pattern",
-            fn: w(({ legend: a, index: o }) => [
-              oe(it, {
+            fn: m(({ legend: a, index: o }) => [
+              J(pt, {
                 shape: a.shape,
                 radius: 30,
                 stroke: "none",
@@ -911,18 +943,18 @@ const ha = ["id"], pa = ["onClick"], fa = ["xmlns", "viewBox"], ya = ["x", "widt
             key: "0"
           } : void 0
         ]), 1032, ["legendSet", "config"]))
-      ], 512)) : y("", !0),
-      x(t.$slots, "legend", { legend: F.value }, void 0, !0),
+      ], 512)) : f("", !0),
+      _(t.$slots, "legend", { legend: F.value }, void 0, !0),
       t.$slots.source ? (u(), v("div", {
         key: 7,
         ref_key: "source",
-        ref: Ie,
+        ref: De,
         dir: "auto"
       }, [
-        x(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : y("", !0),
-      oe(s(yt), {
-        show: $.value.showTooltip && he.value && N.value.length < g.dataset.length,
+        _(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : f("", !0),
+      J(s(bt), {
+        show: k.value.showTooltip && ge.value && A.value.length < b.dataset.length,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         borderRadius: e.value.style.chart.tooltip.borderRadius,
@@ -932,177 +964,193 @@ const ha = ["id"], pa = ["onClick"], fa = ["xmlns", "viewBox"], ya = ["x", "widt
         backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: z.value,
-        content: pe.value,
-        isFullscreen: q.value,
+        parent: P.value,
+        content: ye.value,
+        isFullscreen: E.value,
         isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
         smooth: e.value.style.chart.tooltip.smooth,
         backdropFilter: e.value.style.chart.tooltip.backdropFilter
       }, {
-        "tooltip-before": w(() => [
-          x(t.$slots, "tooltip-before", K(J({ ...$e.value })), void 0, !0)
+        "tooltip-before": m(() => [
+          _(t.$slots, "tooltip-before", Q(Z({ ...Se.value })), void 0, !0)
         ]),
-        "tooltip-after": w(() => [
-          x(t.$slots, "tooltip-after", K(J({ ...$e.value })), void 0, !0)
+        "tooltip-after": m(() => [
+          _(t.$slots, "tooltip-after", Q(Z({ ...Se.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter"]),
-      ce.value ? (u(), X(sa, {
-        key: 8,
-        hideDetails: "",
-        config: {
-          open: $.value.showTable,
-          maxHeight: 1e4,
-          body: {
-            backgroundColor: e.value.style.chart.backgroundColor,
-            color: e.value.style.chart.color
-          },
-          head: {
-            backgroundColor: e.value.style.chart.backgroundColor,
-            color: e.value.style.chart.color
-          }
-        }
-      }, {
-        content: w(() => [
+      fe.value ? (u(), X(Ht(de.value.component), vt({ key: 8 }, de.value.props, {
+        ref_key: "tableUnit",
+        ref: le,
+        onClose: l[5] || (l[5] = (a) => k.value.showTable = !1)
+      }), he({
+        content: m(() => [
           n("div", {
             ref_key: "tableContainer",
-            ref: We,
-            class: "vue-ui-vertical-bar-table atom-data-table"
+            ref: Ke,
+            class: "vue-ui-vertical-bar-table atom-data-table",
+            style: c(`${e.value.table.useDialog ? "" : "max-height: 300px; margin-top: 24px"}`)
           }, [
-            n("div", Oa, [
-              n("div", {
+            n("div", Da, [
+              e.value.table.useDialog ? f("", !0) : (u(), v("div", {
+                key: 0,
                 role: "button",
                 tabindex: "0",
-                style: h(`width:32px; position: absolute; top: 0; right:4px; padding: 0 0px; display: flex; align-items:center;justify-content:center;height: 36px; width: 32px; cursor:pointer; background:${e.value.table.th.backgroundColor};`),
-                onClick: l[2] || (l[2] = (a) => $.value.showTable = !1),
-                onKeypress: l[3] || (l[3] = Xt((a) => $.value.showTable = !1, ["enter"]))
+                style: c(`width:32px; position: absolute; top: 0; right:4px; padding: 0 0px; display: flex; align-items:center;justify-content:center;height: 36px; width: 32px; cursor:pointer; background:${e.value.table.th.backgroundColor};`),
+                onClick: l[3] || (l[3] = (a) => k.value.showTable = !1),
+                onKeypress: l[4] || (l[4] = jt((a) => k.value.showTable = !1, ["enter"]))
               }, [
-                oe(s(ht), {
+                J(s(Fe), {
                   name: "close",
                   stroke: e.value.table.th.color,
                   "stroke-width": 2
                 }, null, 8, ["stroke"])
-              ], 36),
+              ], 36)),
               n("div", {
                 style: { width: "100%", "container-type": "inline-size" },
-                class: D({ "vue-ui-responsive": He.value })
+                class: U({ "vue-ui-responsive": Je.value })
               }, [
-                n("table", Fa, [
-                  n("caption", {
-                    style: h({ backgroundColor: e.value.table.th.backgroundColor, color: e.value.table.th.color, outline: e.value.table.th.outline }),
+                n("table", Ra, [
+                  e.value.table.useDialog ? f("", !0) : (u(), v("caption", {
+                    key: 0,
+                    style: c({ backgroundColor: e.value.table.th.backgroundColor, color: e.value.table.th.color, outline: e.value.table.th.outline }),
                     class: "vue-ui-data-table__caption"
                   }, [
-                    Ut(p(e.value.style.chart.title.text) + " ", 1),
-                    e.value.style.chart.title.subtitle.text ? (u(), v("span", Ma, p(e.value.style.chart.title.subtitle.text), 1)) : y("", !0)
-                  ], 4),
+                    dt(h(e.value.style.chart.title.text) + " ", 1),
+                    e.value.style.chart.title.subtitle.text ? (u(), v("span", Ea, h(e.value.style.chart.title.subtitle.text), 1)) : f("", !0)
+                  ], 4)),
                   n("thead", null, [
                     n("tr", {
                       role: "row",
-                      style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color}`)
+                      style: c(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color}`)
                     }, [
-                      (u(!0), v(Q, null, Z(A.value.head, (a) => (u(), v("th", {
-                        style: h(`outline:${e.value.table.th.outline}`)
+                      (u(!0), v(ee, null, te(z.value.head, (a) => (u(), v("th", {
+                        style: c(`outline:${e.value.table.th.outline}`)
                       }, [
-                        n("div", Ba, p(a), 1)
+                        n("div", Ua, h(a), 1)
                       ], 4))), 256))
                     ], 4),
                     n("tr", null, [
                       n("th", {
-                        style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                        style: c(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
                       }, null, 4),
                       n("th", {
-                        style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline};text-align:right;padding-right:5px;font-weight:bold`)
-                      }, "∑ " + p(e.value.table.td.prefix) + p(isNaN(V.value) ? "" : V.value.toFixed(e.value.table.td.roundingValue)) + p(e.value.table.td.suffix), 5),
+                        style: c(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline};text-align:right;padding-right:5px;font-weight:bold`)
+                      }, "∑ " + h(e.value.table.td.prefix) + h(isNaN(V.value) ? "" : V.value.toFixed(e.value.table.td.roundingValue)) + h(e.value.table.td.suffix), 5),
                       n("th", {
-                        style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline};text-align:right;padding-right:5px;font-weight:bold`)
+                        style: c(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline};text-align:right;padding-right:5px;font-weight:bold`)
                       }, "100%", 4),
                       n("th", {
-                        style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                        style: c(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
                       }, null, 4),
                       n("th", {
-                        style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                        style: c(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
                       }, null, 4),
                       n("th", {
-                        style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                        style: c(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
                       }, null, 4),
                       n("th", {
-                        style: h(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                        style: c(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
                       }, null, 4)
                     ])
                   ]),
                   n("tbody", null, [
-                    (u(!0), v(Q, null, Z(A.value.body, (a, o) => (u(), v("tr", {
-                      class: D({ "vue-ui-data-table__tbody__row": !0, "vue-ui-data-table__tbody__row-even": o % 2 === 0, "vue-ui-data-table__tbody__row-odd": o % 2 !== 0 }),
-                      style: h(`background:${e.value.table.td.backgroundColor};color:${e.value.table.td.color}`)
+                    (u(!0), v(ee, null, te(z.value.body, (a, o) => (u(), v("tr", {
+                      class: U({ "vue-ui-data-table__tbody__row": !0, "vue-ui-data-table__tbody__row-even": o % 2 === 0, "vue-ui-data-table__tbody__row-odd": o % 2 !== 0 }),
+                      style: c(`background:${e.value.table.td.backgroundColor};color:${e.value.table.td.color}`)
                     }, [
                       n("td", {
                         class: "vue-ui-data-table__tbody__td",
-                        style: h(`outline:${e.value.table.td.outline};font-variant-numeric: tabular-nums;`),
-                        "data-cell": A.value.head[0] ?? ""
+                        style: c(`outline:${e.value.table.td.outline};font-variant-numeric: tabular-nums;`),
+                        "data-cell": z.value.head[0] ?? ""
                       }, [
-                        n("div", Ea, [
+                        n("div", Wa, [
                           a.color ? (u(), v("span", {
                             key: 0,
-                            style: h(`color:${a.color};margin-right:3px`)
-                          }, "⬤", 4)) : y("", !0),
-                          n("span", null, p(a.parentName), 1)
+                            style: c(`color:${a.color};margin-right:3px`)
+                          }, "⬤", 4)) : f("", !0),
+                          n("span", null, h(a.parentName), 1)
                         ])
-                      ], 12, Ra),
+                      ], 12, Xa),
                       n("td", {
                         class: "vue-ui-data-table__tbody__td",
-                        style: h(`outline:${e.value.table.td.outline}`),
-                        "data-cell": A.value.head[1] ?? ""
+                        style: c(`outline:${e.value.table.td.outline}`),
+                        "data-cell": z.value.head[1] ?? ""
                       }, [
-                        n("div", Xa, p(e.value.table.td.prefix) + p(["", NaN, void 0].includes(a.parentValue) ? "" : a.parentValue.toFixed(e.value.table.td.roundingValue)) + p(e.value.table.td.suffix), 1)
-                      ], 12, Da),
+                        n("div", Ha, h(e.value.table.td.prefix) + h(["", NaN, void 0].includes(a.parentValue) ? "" : a.parentValue.toFixed(e.value.table.td.roundingValue)) + h(e.value.table.td.suffix), 1)
+                      ], 12, Ga),
                       n("td", {
                         class: "vue-ui-data-table__tbody__td",
-                        style: h(`outline:${e.value.table.td.outline}`),
-                        "data-cell": A.value.head[2] ?? ""
+                        style: c(`outline:${e.value.table.td.outline}`),
+                        "data-cell": z.value.head[2] ?? ""
                       }, [
-                        n("div", Ga, p(["", NaN, void 0].includes(a.percentageToTotal) ? "" : `${(a.percentageToTotal * 100).toFixed(e.value.table.td.roundingPercentage)}%`), 1)
-                      ], 12, Ua),
+                        n("div", qa, h(["", NaN, void 0].includes(a.percentageToTotal) ? "" : `${(a.percentageToTotal * 100).toFixed(e.value.table.td.roundingPercentage)}%`), 1)
+                      ], 12, ja),
                       n("td", {
                         class: "vue-ui-data-table__tbody__td",
-                        style: h(`outline:${e.value.table.td.outline}`),
-                        "data-cell": A.value.head[3] ?? ""
+                        style: c(`outline:${e.value.table.td.outline}`),
+                        "data-cell": z.value.head[3] ?? ""
                       }, [
-                        n("div", Ha, p(a.childName), 1)
-                      ], 12, Wa),
+                        n("div", Ka, h(a.childName), 1)
+                      ], 12, Ya),
                       n("td", {
                         class: "vue-ui-data-table__tbody__td",
-                        style: h(`outline:${e.value.table.td.outline}`),
-                        "data-cell": A.value.head[4] ?? ""
+                        style: c(`outline:${e.value.table.td.outline}`),
+                        "data-cell": z.value.head[4] ?? ""
                       }, [
-                        n("div", qa, p(e.value.table.td.prefix) + p(["", NaN, void 0].includes(a.childValue) ? "" : a.childValue.toFixed(e.value.table.td.roundingValue)) + p(e.value.table.td.suffix), 1)
-                      ], 12, ja),
+                        n("div", Qa, h(e.value.table.td.prefix) + h(["", NaN, void 0].includes(a.childValue) ? "" : a.childValue.toFixed(e.value.table.td.roundingValue)) + h(e.value.table.td.suffix), 1)
+                      ], 12, Ja),
                       n("td", {
                         class: "vue-ui-data-table__tbody__td",
-                        style: h(`outline:${e.value.table.td.outline}`),
-                        "data-cell": A.value.head[5] ?? ""
+                        style: c(`outline:${e.value.table.td.outline}`),
+                        "data-cell": z.value.head[5] ?? ""
                       }, [
-                        n("div", Ka, p(["", NaN, void 0].includes(a.childPercentageToParent) ? "" : `${(a.childPercentageToParent * 100).toFixed(e.value.table.td.roundingPercentage)}%`), 1)
-                      ], 12, Ya),
+                        n("div", el, h(["", NaN, void 0].includes(a.childPercentageToParent) ? "" : `${(a.childPercentageToParent * 100).toFixed(e.value.table.td.roundingPercentage)}%`), 1)
+                      ], 12, Za),
                       n("td", {
                         class: "vue-ui-data-table__tbody__td",
-                        style: h(`outline:${e.value.table.td.outline}`),
-                        "data-cell": A.value.head[6] ?? ""
+                        style: c(`outline:${e.value.table.td.outline}`),
+                        "data-cell": z.value.head[6] ?? ""
                       }, [
-                        n("div", Qa, p(["", NaN, void 0].includes(a.childPercentageToTotal) ? "" : `${(a.childPercentageToTotal * 100).toFixed(e.value.table.td.roundingPercentage)}%`), 1)
-                      ], 12, Ja)
+                        n("div", al, h(["", NaN, void 0].includes(a.childPercentageToTotal) ? "" : `${(a.childPercentageToTotal * 100).toFixed(e.value.table.td.roundingPercentage)}%`), 1)
+                      ], 12, tl)
                     ], 6))), 256))
                   ])
                 ])
               ], 2)
             ])
-          ], 512)
+          ], 4)
         ]),
-        _: 1
-      }, 8, ["config"])) : y("", !0),
-      s(ge) ? (u(), X(da, { key: 9 })) : y("", !0)
-    ], 46, ha));
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: m(() => [
+            dt(h(de.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: m(() => [
+            n("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: l[2] || (l[2] = (a) => Le(e.value.userOptions.callbacks.csv))
+            }, [
+              J(s(Fe), {
+                name: "excel",
+                stroke: de.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : f("", !0),
+      s(ke) ? (u(), X(ia, { key: 9 })) : f("", !0)
+    ], 46, ya));
   }
-}, pl = /* @__PURE__ */ ca(Za, [["__scopeId", "data-v-fa1761f3"]]);
+}, bl = /* @__PURE__ */ ga(ll, [["__scopeId", "data-v-7dfdd878"]]);
 export {
-  pl as default
+  bl as default
 };