vue-data-ui 2.4.49 → 2.4.51

package/dist/{vue-ui-vertical-bar-BZR4YOLh.js → vue-ui-vertical-bar-8iL1xiaz.js}

@@ -1,21 +1,22 @@
-import { useCssVars as Ze, computed as b, ref as r, watch as Me, onMounted as et, onBeforeUnmount as tt, openBlock as u, createElementBlock as i, normalizeClass as X, normalizeStyle as c, createBlock as M, createCommentVNode as g, unref as h, createSlots as at, withCtx as k, renderSlot as _, normalizeProps as U, guardReactiveProps as H, createElementVNode as n, toDisplayString as d, createVNode as re, Fragment as W, renderList as j, withKeys as lt, createTextVNode as ot } from "vue";
-import { u as nt, c as ut, t as st, a as rt, p as O, b as it, o as Oe, e as Z, v as S, d as ie, i as ee, f as I, X as dt, s as de, w as ct, x as vt, y as ht, q as pt, r as gt } from "./index-igxqCP2w.js";
-import { t as yt, u as ft } from "./useResponsive-CoxXLe23.js";
-import { _ as bt } from "./Title-DED-PQ7X.js";
-import { u as mt, U as _t } from "./usePrinter-CnZYDQXB.js";
-import { _ as kt } from "./Tooltip-CHseiJu8.js";
-import { L as Ie } from "./Legend-FZN9UHoI.js";
-import xt from "./vue-ui-skeleton-CWjNNx-k.js";
-import $t from "./BaseIcon-CaYP30Aq.js";
-import Ct from "./vue-ui-accordion-lF7yVkiT.js";
-import { u as Ae } from "./useNestedProp-CSVnZVwZ.js";
-import { _ as wt } from "./PackageVersion-DYk2hOG1.js";
-import { P as Tt } from "./PenAndPaper-BfgS_5ux.js";
-import { _ as Lt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Nt = ["id"], Pt = ["onClick"], St = ["xmlns", "viewBox"], Vt = ["id"], Ft = ["stop-color"], zt = ["stop-color"], Mt = ["x", "y", "width", "height", "fill", "rx"], Ot = ["x", "y", "width", "height", "fill", "rx", "stroke", "stroke-width"], It = ["x2", "y1", "y2", "stroke", "stroke-width"], At = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Bt = ["x", "y", "text-anchor", "font-size", "fill", "font-weight"], Dt = ["x", "y", "font-size", "fill", "font-weight"], Rt = ["x", "y", "font-size", "fill", "font-weight"], Xt = ["x", "y", "font-size", "fill", "font-weight"], Et = ["y", "width", "height", "fill", "onMouseenter"], Gt = {
+import { useCssVars as at, computed as b, ref as r, watch as Ae, onMounted as lt, onBeforeUnmount as ot, openBlock as u, createElementBlock as i, normalizeClass as U, normalizeStyle as d, unref as c, createBlock as O, createCommentVNode as y, createSlots as nt, withCtx as k, renderSlot as _, normalizeProps as G, guardReactiveProps as H, createElementVNode as n, toDisplayString as v, createVNode as re, Fragment as W, renderList as j, withKeys as ut, createTextVNode as st } from "vue";
+import { u as rt, c as it, t as dt, a as ct, p as z, b as vt, o as Be, e as Z, v as S, d as ie, i as ee, f as I, X as ht, s as de, w as pt, x as yt, y as gt, q as ft, r as bt } from "./index-BbPeL8Gp.js";
+import { t as mt, u as _t } from "./useResponsive-CoxXLe23.js";
+import { _ as kt } from "./Title-aSAft5dl.js";
+import { u as xt, U as $t } from "./usePrinter-DaybDVqP.js";
+import { _ as Ct } from "./Tooltip-smutPF--.js";
+import { L as De } from "./Legend-BLaZxMge.js";
+import wt from "./vue-ui-skeleton-Bniq21d9.js";
+import Tt from "./BaseIcon-CmiukQBl.js";
+import Lt from "./vue-ui-accordion-5d5iVpr7.js";
+import { u as Re } from "./useNestedProp-BN8claGG.js";
+import { _ as Nt } from "./PackageVersion-CxJghxYD.js";
+import { P as Pt } from "./PenAndPaper-ZdZEumki.js";
+import { u as St } from "./useUserOptionState-BIvW1Kz7.js";
+import { _ as Vt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Ft = ["id"], Mt = ["onClick"], Ot = ["xmlns", "viewBox"], zt = ["id"], It = ["stop-color"], At = ["stop-color"], Bt = ["x", "y", "width", "height", "fill", "rx"], Dt = ["x", "y", "width", "height", "fill", "rx", "stroke", "stroke-width"], Rt = ["x2", "y1", "y2", "stroke", "stroke-width"], Ut = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Xt = ["x", "y", "text-anchor", "font-size", "fill", "font-weight"], Et = ["x", "y", "font-size", "fill", "font-weight"], Gt = ["x", "y", "font-size", "fill", "font-weight"], Ht = ["x", "y", "font-size", "fill", "font-weight"], Wt = ["y", "width", "height", "fill", "onMouseenter"], jt = {
   key: 6,
   class: "vue-data-ui-watermark"
-}, Ut = ["onClick"], Ht = { style: "width:100%;padding-top: 36px;position:relative" }, Wt = { class: "vue-ui-data-table" }, jt = { key: 0 }, Yt = { style: { width: "100%" } }, qt = ["data-cell"], Kt = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Jt = ["data-cell"], Qt = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Zt = ["data-cell"], ea = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, ta = ["data-cell"], aa = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, la = ["data-cell"], oa = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, na = ["data-cell"], ua = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, sa = ["data-cell"], ra = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, ia = {
+}, Yt = ["onClick"], qt = { style: "width:100%;padding-top: 36px;position:relative" }, Kt = { class: "vue-ui-data-table" }, Jt = { key: 0 }, Qt = { style: { width: "100%" } }, Zt = ["data-cell"], ea = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, ta = ["data-cell"], aa = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, la = ["data-cell"], oa = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, na = ["data-cell"], ua = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, sa = ["data-cell"], ra = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, ia = ["data-cell"], da = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, ca = ["data-cell"], va = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, ha = {
   __name: "vue-ui-vertical-bar",
   props: {
     config: {
@@ -32,76 +33,76 @@ const Nt = ["id"], Pt = ["onClick"], St = ["xmlns", "viewBox"], Vt = ["id"], Ft
     }
   },
   emits: ["selectLegend"],
-  setup(Be, { expose: De, emit: Re }) {
-    const C = Be;
-    Ze((t) => ({
-      "56cbc011": t.tdo
+  setup(Ue, { expose: Xe, emit: Ee }) {
+    const C = Ue;
+    at((t) => ({
+      "443c2c5a": t.tdo
     }));
-    const { vue_ui_vertical_bar: Xe } = nt(), Y = b(() => !!C.dataset && C.dataset.length), V = r(ut()), Ee = r(null), te = r(!1), ae = r(""), q = r(0), Ge = r(null), ce = r(0), A = r(null), ve = r(null), le = r(null), he = r(null), pe = r(null), ge = r(0), oe = r(0), e = b({
-      get: () => ye(),
+    const { vue_ui_vertical_bar: Ge } = rt(), Y = b(() => !!C.dataset && C.dataset.length), V = r(it()), He = r(null), te = r(!1), ae = r(""), q = r(0), We = r(null), ce = r(0), A = r(null), ve = r(null), le = r(null), he = r(null), pe = r(null), ye = r(0), oe = r(0), e = b({
+      get: () => me(),
       set: (t) => t
-    });
-    function ye() {
-      const t = Ae({
+    }), { userOptionsVisible: ge, setUserOptionsVisibility: fe, keepUserOptionState: be } = St({ config: e.value });
+    function me() {
+      const t = Re({
         userConfig: C.config,
-        defaultConfig: Xe
+        defaultConfig: Ge
       });
       return t.theme ? {
-        ...Ae({
-          userConfig: st.vue_ui_vertical_bar[t.theme] || C.config,
+        ...Re({
+          userConfig: dt.vue_ui_vertical_bar[t.theme] || C.config,
           defaultConfig: t
         }),
-        customPalette: rt[t.theme] || O
+        customPalette: ct[t.theme] || z
       } : t;
     }
-    Me(() => C.config, (t) => {
-      e.value = ye(), Ce(), ge.value += 1, oe.value += 1, v.value = e.value.style.chart.layout.bars.height, y.value = e.value.style.chart.layout.bars.gap;
-    }, { deep: !0 }), Me(() => C.dataset, J, { deep: !0 });
-    const { isPrinting: fe, isImaging: be, generatePdf: me, generateImage: _e } = mt({
+    Ae(() => C.config, (t) => {
+      e.value = me(), Le(), ye.value += 1, oe.value += 1, h.value = e.value.style.chart.layout.bars.height, g.value = e.value.style.chart.layout.bars.gap;
+    }, { deep: !0 }), Ae(() => C.dataset, J, { deep: !0 });
+    const { isPrinting: _e, isImaging: ke, generatePdf: xe, generateImage: $e } = xt({
       elementId: `vue-ui-vertical-bar_${V.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-vertical-bar"
-    }), Ue = b(() => e.value.userOptions.show && !e.value.style.chart.title.text), ke = b(() => it(e.value.customPalette)), xe = r(null), $e = r(!1), He = b(() => e.value.table.responsiveBreakpoint), K = r(null);
-    et(() => {
-      Ce();
+    }), je = b(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ce = b(() => vt(e.value.customPalette)), we = r(null), Te = r(!1), Ye = b(() => e.value.table.responsiveBreakpoint), K = r(null);
+    lt(() => {
+      Le();
     });
-    function Ce() {
-      if (Oe(C.dataset) && Z({
+    function Le() {
+      if (Be(C.dataset) && Z({
         componentName: "VueUiVerticalBar",
         type: "dataset"
-      }), q.value = C.dataset.flatMap((t) => t.children && t.children.length > 0 ? t.children.length : 1).reduce((t, l) => t + l, 0), We(), e.value.responsive) {
-        const t = yt(() => {
-          const { width: l, height: a } = ft({
+      }), q.value = C.dataset.flatMap((t) => t.children && t.children.length > 0 ? t.children.length : 1).reduce((t, l) => t + l, 0), qe(), e.value.responsive) {
+        const t = mt(() => {
+          const { width: l, height: a } = _t({
             chart: A.value,
             title: e.value.style.chart.title.text ? ve.value : null,
             legend: e.value.style.chart.legend.show ? le.value : null,
             source: he.value,
             noTitle: pe.value
           });
-          Le.value = l, v.value = a / q.value - y.value * 2;
+          Se.value = l, h.value = a / q.value - g.value * 2;
         });
         K.value = new ResizeObserver(t), K.value.observe(A.value.parentNode);
       }
     }
-    tt(() => {
+    ot(() => {
       K.value && K.value.disconnect();
     });
-    function We() {
+    function qe() {
       new ResizeObserver((l) => {
         l.forEach((a) => {
-          $e.value = a.contentRect.width < He.value;
+          Te.value = a.contentRect.width < Ye.value;
         });
-      }).observe(xe.value);
+      }).observe(we.value);
     }
     const $ = r({
       showTable: e.value.table.show,
       sortDesc: e.value.style.chart.layout.bars.sort === "desc",
       showTooltip: e.value.style.chart.tooltip.show
-    }), we = b(() => $.value.sortDesc), F = b(() => (C.dataset.forEach((t, l) => {
+    }), Ne = b(() => $.value.sortDesc), F = b(() => (C.dataset.forEach((t, l) => {
       !t.value && !t.children && Z({
         componentName: "VueUiVerticalBar",
         type: "datasetAttributeEmpty",
         property: `value (index ${l})`
-      }), t.children && (Oe(t.children) ? Z({
+      }), t.children && (Be(t.children) ? Z({
         componentName: "VueUiVerticalBar",
         type: "datasetAttributeEmpty",
         property: `children (index ${l})`
@@ -125,10 +126,10 @@ const Nt = ["id"], Pt = ["onClick"], St = ["xmlns", "viewBox"], Vt = ["id"], Ft
         sign: p,
         hasChildren: o,
         isChild: !1,
-        segregate: () => E(a),
+        segregate: () => X(a),
         isSegregated: T.value.includes(a),
-        color: ie(t.color) || ke.value[l] || O[l] || O[l % O.length],
-        children: !t.children || !t.children.length ? [] : t.children.toSorted((x, N) => we.value ? N.value - x.value : x.value - N.value).map((x, N) => ({
+        color: ie(t.color) || Ce.value[l] || z[l] || z[l % z.length],
+        children: !t.children || !t.children.length ? [] : t.children.toSorted((x, N) => Ne.value ? N.value - x.value : x.value - N.value).map((x, N) => ({
           ...x,
           value: S(Math.abs(x.value)),
           sign: x.value >= 0 ? 1 : -1,
@@ -139,23 +140,23 @@ const Nt = ["id"], Pt = ["onClick"], St = ["xmlns", "viewBox"], Vt = ["id"], Ft
           parentSign: p,
           id: `vertical_child_${l}_${N}_${V.value}`,
           childIndex: N,
-          color: ie(x.color) || ie(t.color) || ke.value[l] || O[l] || O[l % O.length]
+          color: ie(x.color) || ie(t.color) || Ce.value[l] || z[l] || z[l % z.length]
         })).map((x, N) => ({
           ...x,
           isFirstChild: N === 0,
           isLastChild: N === t.children.length - 1
         }))
       };
-    }).toSorted((t, l) => we.value ? l.value - t.value : t.value - l.value))), Te = b(() => ({
+    }).toSorted((t, l) => Ne.value ? l.value - t.value : t.value - l.value))), Pe = b(() => ({
       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" : ""
-    })), v = r(e.value.style.chart.layout.bars.height), y = r(e.value.style.chart.layout.bars.gap), je = b(() => (v.value + y.value) * q.value), Le = r(512), f = b(() => ({
-      width: Le.value,
-      height: je.value,
+    })), h = r(e.value.style.chart.layout.bars.height), g = r(e.value.style.chart.layout.bars.gap), Ke = b(() => (h.value + g.value) * q.value), Se = r(512), f = b(() => ({
+      width: Se.value,
+      height: Ke.value,
       padding: {
         top: 12,
         left: 128 + e.value.style.chart.layout.bars.offsetX,
@@ -171,43 +172,43 @@ const Nt = ["id"], Pt = ["onClick"], St = ["xmlns", "viewBox"], Vt = ["id"], Ft
       width: f.value.width - (f.value.padding.left + f.value.padding.right)
     }));
     function J() {
-      q.value = z.value.flatMap((t) => t.children && t.children.length > 0 ? t.children.length : 1).reduce((t, l) => t + l, 0);
+      q.value = M.value.flatMap((t) => t.children && t.children.length > 0 ? t.children.length : 1).reduce((t, l) => t + l, 0);
     }
     const T = r([]);
-    function E(t) {
-      T.value.includes(t) ? T.value = T.value.filter((l) => l !== t) : T.value.push(t), J(), Re("selectLegend", z.value);
+    function X(t) {
+      T.value.includes(t) ? T.value = T.value.filter((l) => l !== t) : T.value.push(t), J(), Ee("selectLegend", M.value);
     }
-    const z = b(() => F.value.filter((t) => !T.value.includes(t.id))), L = b(() => z.value.map((t) => Math.abs(t.value)).reduce((t, l) => t + l, 0));
-    function Ne(t, l = !1, a = 0) {
+    const M = b(() => F.value.filter((t) => !T.value.includes(t.id))), L = b(() => M.value.map((t) => Math.abs(t.value)).reduce((t, l) => t + l, 0));
+    function Ve(t, l = !1, a = 0) {
       return l ? I({
         v: S(Math.abs(t) / L.value * 100),
         s: "%",
         r: a
       }) : Math.abs(t) / L.value;
     }
-    const B = b(() => z.value.flatMap((t) => t.hasChildren ? t.children : t)), D = b(() => B.value.map((t) => t.sign).includes(-1)), Ye = b(() => Math.max(...z.value.flatMap((t) => t.children && t.children.length ? Math.max(...t.children.map((l) => l.value)) : t.value)));
+    const B = b(() => M.value.flatMap((t) => t.hasChildren ? t.children : t)), D = b(() => B.value.map((t) => t.sign).includes(-1)), Je = b(() => Math.max(...M.value.flatMap((t) => t.children && t.children.length ? Math.max(...t.children.map((l) => l.value)) : t.value)));
     function P(t) {
-      const l = t / Ye.value;
+      const l = t / Je.value;
       return s.value.width / (D.value ? 2 : 1) * l;
     }
-    function qe(t) {
+    function Qe(t) {
       return P(t) + s.value.left;
     }
-    function G(t, l) {
-      const a = z.value.find((p) => p.id === t.parentId), o = s.value.top + (y.value + v.value) * l, m = a.children.length * (y.value + v.value);
+    function E(t, l) {
+      const a = M.value.find((p) => p.id === t.parentId), o = s.value.top + (g.value + h.value) * l, m = a.children.length * (g.value + h.value);
       return {
         y: o + m / 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 / L.value) ? "" : Ne(a.value, !0, e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage),
+        percentageToTotal: isNaN(a.value / L.value) ? "" : Ve(a.value, !0, e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage),
         sign: a.sign
       };
     }
-    function Ke() {
-      return z.value;
+    function Ze() {
+      return M.value;
     }
     const ne = r(null), ue = r(null);
-    function Je(t, l) {
+    function et(t, l) {
       ue.value = {
         datapoint: t,
         seriesIndex: l,
@@ -216,7 +217,7 @@ const Nt = ["id"], Pt = ["onClick"], St = ["xmlns", "viewBox"], Vt = ["id"], Ft
       }, te.value = !0, ne.value = t.id;
       let a = "";
       const o = t.isChild ? t.parentName : t.name, m = t.isChild ? t.name : "", p = e.value.style.chart.tooltip.customFormat;
-      vt(p) && ht(() => p({
+      yt(p) && gt(() => p({
         datapoint: t,
         series: F.value,
         config: e.value,
@@ -249,7 +250,7 @@ const Nt = ["id"], Pt = ["onClick"], St = ["xmlns", "viewBox"], Vt = ["id"], Ft
         r: e.value.style.chart.tooltip.roundingPercentage
       })}</b></div>`)), ae.value = `<div style="text-align:left">${a}</div>`);
     }
-    function Pe(t, l, a, o) {
+    function Fe(t, l, a, o) {
       if (!e.value.style.chart.layout.bars.dataLabels.value.show)
         return "";
       const m = ee(
@@ -262,7 +263,7 @@ const Nt = ["id"], Pt = ["onClick"], St = ["xmlns", "viewBox"], Vt = ["id"], Ft
           r: e.value.style.chart.layout.bars.dataLabels.value.roundingValue
         }),
         { datapoint: l, seriesIndex: a }
-      ), p = `(${Ne(t, !0, e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage)})`;
+      ), p = `(${Ve(t, !0, e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage)})`;
       return `${m}${e.value.style.chart.layout.bars.dataLabels.percentage.show ? ` ${p}` : ""}`;
     }
     const w = b(() => {
@@ -304,7 +305,7 @@ const Nt = ["id"], Pt = ["onClick"], St = ["xmlns", "viewBox"], Vt = ["id"], Ft
       });
       return { head: t, body: l };
     });
-    function Se() {
+    function Me() {
       const t = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], l = w.value.head, a = w.value.body.map((p) => [
         p.parentName,
         p.parentValue,
@@ -313,66 +314,68 @@ const Nt = ["id"], Pt = ["onClick"], St = ["xmlns", "viewBox"], Vt = ["id"], Ft
         p.childValue,
         p.childPercentageToParent,
         p.childPercentageToTotal
-      ]), o = t.concat([l]).concat(a), m = pt(o);
-      gt({ csvContent: m, title: e.value.style.chart.title.text || "vue-ui-vertical-bar" });
+      ]), o = t.concat([l]).concat(a), m = ft(o);
+      bt({ csvContent: m, title: e.value.style.chart.title.text || "vue-ui-vertical-bar" });
     }
     const R = r(!1);
-    function Qe(t) {
+    function tt(t) {
       R.value = t, ce.value += 1;
     }
-    function Ve() {
+    function Oe() {
       $.value.showTable = !$.value.showTable;
     }
-    function Fe() {
+    function ze() {
       $.value.sortDesc = !$.value.sortDesc, J();
     }
-    function ze() {
+    function Ie() {
       $.value.showTooltip = !$.value.showTooltip;
     }
     const Q = r(!1);
     function se() {
       Q.value = !Q.value;
     }
-    return De({
-      getData: Ke,
+    return Xe({
+      getData: Ze,
       recalculateHeight: J,
-      generatePdf: me,
-      generateCsv: Se,
-      generateImage: _e,
-      toggleTable: Ve,
-      toggleSort: Fe,
-      toggleTooltip: ze,
+      generatePdf: xe,
+      generateCsv: Me,
+      generateImage: $e,
+      toggleTable: Oe,
+      toggleSort: ze,
+      toggleTooltip: Ie,
       toggleAnnotator: se
     }), (t, l) => (u(), i("div", {
-      class: X(`vue-ui-vertical-bar ${R.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      class: U(`vue-ui-vertical-bar ${R.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       ref_key: "verticalBarChart",
       ref: A,
       id: `vue-ui-vertical-bar_${V.value}`,
-      style: c(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`)
+      style: d(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height: 100%" : ""}`),
+      onMouseenter: l[5] || (l[5] = () => c(fe)(!0)),
+      onMouseleave: l[6] || (l[6] = () => c(fe)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (u(), M(Tt, {
+      e.value.userOptions.buttons.annotator ? (u(), O(Pt, {
         key: 0,
         parent: A.value,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         active: Q.value,
         onClose: se
-      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : g("", !0),
-      Ue.value ? (u(), i("div", {
+      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : y("", !0),
+      je.value ? (u(), i("div", {
         key: 1,
         ref_key: "noTitle",
         ref: pe,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : g("", !0),
+      }, null, 512)) : y("", !0),
       e.value.style.chart.title.text ? (u(), i("div", {
         key: 2,
         ref_key: "chartTitle",
         ref: ve,
         style: "width:100%;background:transparent;padding-bottom:12px"
       }, [
-        (u(), M(bt, {
-          key: `title_${ge.value}`,
+        (u(), O(kt, {
+          key: `title_${ye.value}`,
           config: {
             title: {
               cy: "vertical-bar-div-title",
@@ -384,15 +387,15 @@ const Nt = ["id"], Pt = ["onClick"], St = ["xmlns", "viewBox"], Vt = ["id"], Ft
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : g("", !0),
-      e.value.userOptions.show && Y.value ? (u(), M(_t, {
+      ], 512)) : y("", !0),
+      e.value.userOptions.show && Y.value && (c(be) || c(ge)) ? (u(), O($t, {
         ref_key: "details",
-        ref: Ee,
+        ref: He,
         key: `user_options_${ce.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isImaging: h(be),
-        isPrinting: h(fe),
+        isImaging: c(ke),
+        isPrinting: c(_e),
         uid: V.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
@@ -408,15 +411,18 @@ const Nt = ["id"], Pt = ["onClick"], St = ["xmlns", "viewBox"], Vt = ["id"], Ft
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
         isAnnotation: Q.value,
-        onToggleFullscreen: Qe,
-        onGeneratePdf: h(me),
-        onGenerateCsv: Se,
-        onGenerateImage: h(_e),
-        onToggleTable: Ve,
-        onToggleSort: Fe,
-        onToggleTooltip: ze,
-        onToggleAnnotator: se
-      }, at({ _: 2 }, [
+        onToggleFullscreen: tt,
+        onGeneratePdf: c(xe),
+        onGenerateCsv: Me,
+        onGenerateImage: c($e),
+        onToggleTable: Oe,
+        onToggleSort: ze,
+        onToggleTooltip: Ie,
+        onToggleAnnotator: se,
+        style: d({
+          visibility: c(be) ? c(ge) ? "visible" : "hidden" : "visible"
+        })
+      }, nt({ _: 2 }, [
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
           fn: k(() => [
@@ -469,57 +475,57 @@ const Nt = ["id"], Pt = ["onClick"], St = ["xmlns", "viewBox"], Vt = ["id"], Ft
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: k(({ toggleFullscreen: a, isFullscreen: o }) => [
-            _(t.$slots, "optionFullscreen", U(H({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
+            _(t.$slots, "optionFullscreen", G(H({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
           ]),
           key: "7"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
           fn: k(({ toggleAnnotator: a, isAnnotator: o }) => [
-            _(t.$slots, "optionAnnotator", U(H({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
+            _(t.$slots, "optionAnnotator", G(H({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
           ]),
           key: "8"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasSort", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage"])) : g("", !0),
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasSort", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
       e.value.style.chart.legend.show && e.value.style.chart.legend.position === "top" ? (u(), i("div", {
         key: 4,
         ref_key: "chartLegend",
         ref: le
       }, [
-        (u(), M(Ie, {
+        (u(), O(De, {
           key: `legend_top_${oe.value}`,
           legendSet: F.value,
-          config: Te.value,
-          onClickMarker: l[0] || (l[0] = ({ legend: a }) => E(a.id))
+          config: Pe.value,
+          onClickMarker: l[0] || (l[0] = ({ legend: a }) => X(a.id))
         }, {
           item: k(({ legend: a, index: o }) => [
             n("div", {
               "data-cy-legend-item": "",
-              onClick: (m) => E(a.id),
-              style: c(`opacity:${T.value.includes(a.id) ? 0.5 : 1}`)
-            }, d(a.name) + ": " + d(h(ee)(
+              onClick: (m) => X(a.id),
+              style: d(`opacity:${T.value.includes(a.id) ? 0.5 : 1}`)
+            }, v(a.name) + ": " + v(c(ee)(
               e.value.style.chart.layout.bars.dataLabels.value.formatter,
               a.value,
-              h(I)({
+              c(I)({
                 p: e.value.style.chart.legend.prefix,
                 v: a.value,
                 s: e.value.style.chart.legend.suffix,
                 r: e.value.style.chart.legend.roundingValue
               }),
               { datapoint: a, seriesIndex: o }
-            )), 13, Pt)
+            )), 13, Mt)
           ]),
           _: 1
         }, 8, ["legendSet", "config"]))
-      ], 512)) : g("", !0),
+      ], 512)) : y("", !0),
       Y.value ? (u(), i("svg", {
         key: 5,
-        xmlns: h(dt),
-        class: X({ "vue-data-ui-fullscreen--on": R.value, "vue-data-ui-fulscreen--off": !R.value }),
+        xmlns: c(ht),
+        class: U({ "vue-data-ui-fullscreen--on": R.value, "vue-data-ui-fulscreen--off": !R.value }),
         viewBox: `0 0 ${f.value.width <= 0 ? 10 : f.value.width} ${s.value.fullHeight <= 0 ? 10 : s.value.fullHeight}`,
-        style: c(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
+        style: d(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        re(wt),
+        re(Nt),
         (u(!0), i(W, null, j(B.value, (a, o) => (u(), i("linearGradient", {
           x1: "0%",
           y1: "0%",
@@ -530,45 +536,45 @@ const Nt = ["id"], Pt = ["onClick"], St = ["xmlns", "viewBox"], Vt = ["id"], Ft
           n("stop", {
             offset: "0%",
             "stop-color": a.color
-          }, null, 8, Ft),
+          }, null, 8, It),
           n("stop", {
             offset: "100%",
-            "stop-color": h(de)(h(ct)(a.color, 0.03), 100 - e.value.style.chart.layout.bars.gradientIntensity)
-          }, null, 8, zt)
-        ], 8, Vt))), 256)),
+            "stop-color": c(de)(c(pt)(a.color, 0.03), 100 - e.value.style.chart.layout.bars.gradientIntensity)
+          }, null, 8, At)
+        ], 8, zt))), 256)),
         (u(!0), i(W, null, j(B.value, (a, o) => (u(), i("g", null, [
           n("rect", {
-            x: h(S)(D.value ? s.value.left + s.value.width / 2 - (a.sign === 1 ? 0 : P(a.value) <= 0 ? 1e-4 : P(a.value)) : s.value.left),
-            y: s.value.top + (y.value + v.value) * o,
-            width: h(S)(P(a.value) <= 0 ? 1e-4 : P(a.value)),
-            height: v.value <= 0 ? 1e-4 : v.value,
+            x: c(S)(D.value ? s.value.left + s.value.width / 2 - (a.sign === 1 ? 0 : P(a.value) <= 0 ? 1e-4 : P(a.value)) : s.value.left),
+            y: s.value.top + (g.value + h.value) * o,
+            width: c(S)(P(a.value) <= 0 ? 1e-4 : P(a.value)),
+            height: h.value <= 0 ? 1e-4 : h.value,
             fill: e.value.style.chart.layout.bars.underlayerColor,
             rx: e.value.style.chart.layout.bars.borderRadius,
-            class: X({ animated: e.value.useCssAnimation })
-          }, null, 10, Mt)
+            class: U({ animated: e.value.useCssAnimation })
+          }, null, 10, Bt)
         ]))), 256)),
         (u(!0), i(W, null, j(B.value, (a, o) => (u(), i("g", null, [
           n("rect", {
-            x: h(S)(D.value ? s.value.left + s.value.width / 2 - (a.sign === 1 ? 0 : P(a.value) <= 0 ? 1e-4 : P(a.value)) : s.value.left),
-            y: s.value.top + (y.value + v.value) * o,
-            width: h(S)(P(a.value) <= 0 ? 1e-4 : P(a.value)),
-            height: v.value <= 0 ? 1e-4 : v.value,
-            fill: e.value.style.chart.layout.bars.useGradient ? `url(#vertical_bar_gradient_${V.value}_${o})` : h(de)(a.color, e.value.style.chart.layout.bars.fillOpacity),
+            x: c(S)(D.value ? s.value.left + s.value.width / 2 - (a.sign === 1 ? 0 : P(a.value) <= 0 ? 1e-4 : P(a.value)) : s.value.left),
+            y: s.value.top + (g.value + h.value) * o,
+            width: c(S)(P(a.value) <= 0 ? 1e-4 : P(a.value)),
+            height: h.value <= 0 ? 1e-4 : h.value,
+            fill: e.value.style.chart.layout.bars.useGradient ? `url(#vertical_bar_gradient_${V.value}_${o})` : c(de)(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: X({ animated: e.value.useCssAnimation })
-          }, null, 10, Ot),
+            class: U({ animated: e.value.useCssAnimation })
+          }, null, 10, Dt),
           (!a.isChild || a.isLastChild) && e.value.style.chart.layout.separators.show && o !== B.value.length - 1 ? (u(), i("line", {
             key: 0,
             x1: 0,
             x2: s.value.left,
-            y1: v.value + y.value / 2 + s.value.top + (y.value + v.value) * o,
-            y2: v.value + y.value / 2 + s.value.top + (y.value + v.value) * o,
+            y1: h.value + g.value / 2 + s.value.top + (g.value + h.value) * o,
+            y2: h.value + g.value / 2 + s.value.top + (g.value + h.value) * o,
             stroke: e.value.style.chart.layout.separators.color,
             "stroke-width": e.value.style.chart.layout.separators.strokeWidth,
             "stroke-linecap": "round"
-          }, null, 8, It)) : g("", !0),
+          }, null, 8, Rt)) : y("", !0),
           D.value && e.value.style.chart.layout.separators.show ? (u(), i("line", {
             key: 1,
             x1: s.value.left + s.value.width / 2,
@@ -578,61 +584,61 @@ const Nt = ["id"], Pt = ["onClick"], St = ["xmlns", "viewBox"], Vt = ["id"], Ft
             stroke: e.value.style.chart.layout.separators.color,
             "stroke-width": e.value.style.chart.layout.separators.strokeWidth,
             "stroke-linecap": "round"
-          }, null, 8, At)) : g("", !0),
+          }, null, 8, Ut)) : y("", !0),
           n("text", {
-            x: D.value ? s.value.left + s.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) : qe(a.value) + 3 + e.value.style.chart.layout.bars.dataLabels.offsetX,
-            y: s.value.top + (y.value + v.value) * o + v.value / 2 + e.value.style.chart.layout.bars.dataLabels.fontSize / 2,
+            x: D.value ? s.value.left + s.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) : Qe(a.value) + 3 + e.value.style.chart.layout.bars.dataLabels.offsetX,
+            y: s.value.top + (g.value + h.value) * o + h.value / 2 + e.value.style.chart.layout.bars.dataLabels.fontSize / 2,
             "text-anchor": !D.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"
-          }, d(Pe(a.value, a, o, a.sign)), 9, Bt),
+          }, v(Fe(a.value, a, o, a.sign)), 9, Xt),
           (a.isChild || !a.hasChildren) && e.value.style.chart.layout.bars.nameLabels.show ? (u(), i("text", {
             key: 2,
             "text-anchor": "end",
             x: s.value.left - 3 + e.value.style.chart.layout.bars.nameLabels.offsetX,
-            y: s.value.top + (y.value + v.value) * o + v.value / 2 + e.value.style.chart.layout.bars.nameLabels.fontSize / 2,
+            y: s.value.top + (g.value + h.value) * o + h.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"
-          }, d(a.name), 9, Dt)) : g("", !0),
+          }, v(a.name), 9, Et)) : y("", !0),
           a.isChild && a.childIndex === 0 && e.value.style.chart.layout.bars.parentLabels.show ? (u(), i("text", {
             key: 3,
             x: 3 + e.value.style.chart.layout.bars.parentLabels.offsetX,
-            y: G(a, o).y,
+            y: E(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"
-          }, d(G(a, o).name), 9, Rt)) : g("", !0),
+          }, v(E(a, o).name), 9, Gt)) : y("", !0),
           a.isChild && a.childIndex === 0 && e.value.style.chart.layout.bars.parentLabels.show ? (u(), i("text", {
             key: 4,
             x: 3 + e.value.style.chart.layout.bars.parentLabels.offsetX,
-            y: G(a, o).y + e.value.style.chart.layout.bars.parentLabels.fontSize + 6,
+            y: E(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"
-          }, d(Pe(G(a, o).value), G(a, o), o, a.parentSign || a.sign), 9, Xt)) : g("", !0),
+          }, v(Fe(E(a, o).value), E(a, o), o, a.parentSign || a.sign), 9, Ht)) : y("", !0),
           n("rect", {
             "data-cy-trap": "",
             x: 0,
-            y: s.value.top + (y.value + v.value) * o - y.value / 2,
+            y: s.value.top + (g.value + h.value) * o - g.value / 2,
             width: f.value.width <= 0 ? 1e-4 : f.value.width,
-            height: v.value + y.value <= 0 ? 1e-4 : v.value + y.value,
-            fill: ne.value === a.id ? h(de)(e.value.style.chart.layout.highlighter.color, e.value.style.chart.layout.highlighter.opacity) : "transparent",
-            onMouseenter: (m) => Je(a, o),
+            height: h.value + g.value <= 0 ? 1e-4 : h.value + g.value,
+            fill: ne.value === a.id ? c(de)(e.value.style.chart.layout.highlighter.color, e.value.style.chart.layout.highlighter.opacity) : "transparent",
+            onMouseenter: (m) => et(a, o),
             onMouseleave: l[1] || (l[1] = (m) => {
-              Ge.value = null, te.value = !1, ne.value = null;
+              We.value = null, te.value = !1, ne.value = null;
             })
-          }, null, 40, Et)
+          }, null, 40, Wt)
         ]))), 256)),
         _(t.$slots, "svg", { svg: f.value }, void 0, !0)
-      ], 14, St)) : g("", !0),
-      t.$slots.watermark ? (u(), i("div", Gt, [
-        _(t.$slots, "watermark", U(H({ isPrinting: h(fe) || h(be) })), void 0, !0)
-      ])) : g("", !0),
-      Y.value ? g("", !0) : (u(), M(xt, {
+      ], 14, Ot)) : y("", !0),
+      t.$slots.watermark ? (u(), i("div", jt, [
+        _(t.$slots, "watermark", G(H({ isPrinting: c(_e) || c(ke) })), void 0, !0)
+      ])) : y("", !0),
+      Y.value ? y("", !0) : (u(), O(wt, {
         key: 7,
         config: {
           type: "verticalBar",
@@ -652,31 +658,31 @@ const Nt = ["id"], Pt = ["onClick"], St = ["xmlns", "viewBox"], Vt = ["id"], Ft
         ref_key: "chartLegend",
         ref: le
       }, [
-        (u(), M(Ie, {
+        (u(), O(De, {
           key: `legend_bottom_${oe.value}`,
           legendSet: F.value,
-          config: Te.value,
-          onClickMarker: l[2] || (l[2] = ({ legend: a }) => E(a.id))
+          config: Pe.value,
+          onClickMarker: l[2] || (l[2] = ({ legend: a }) => X(a.id))
         }, {
           item: k(({ legend: a, index: o }) => [
             n("div", {
-              onClick: (m) => E(a.id),
-              style: c(`opacity:${T.value.includes(a.id) ? 0.5 : 1}`)
-            }, d(a.name) + ": " + d(h(ee)(
+              onClick: (m) => X(a.id),
+              style: d(`opacity:${T.value.includes(a.id) ? 0.5 : 1}`)
+            }, v(a.name) + ": " + v(c(ee)(
               e.value.style.chart.layout.bars.dataLabels.value.formatter,
               a.value,
-              h(I)({
+              c(I)({
                 p: e.value.style.chart.legend.prefix,
                 v: a.value,
                 s: e.value.style.chart.legend.suffix,
                 r: e.value.style.chart.legend.roundingValue
               }),
               { datapoint: a, seriesIndex: o }
-            )), 13, Ut)
+            )), 13, Yt)
           ]),
           _: 1
         }, 8, ["legendSet", "config"]))
-      ], 512)) : g("", !0),
+      ], 512)) : y("", !0),
       _(t.$slots, "legend", { legend: F.value }, void 0, !0),
       t.$slots.source ? (u(), i("div", {
         key: 9,
@@ -685,8 +691,8 @@ const Nt = ["id"], Pt = ["onClick"], St = ["xmlns", "viewBox"], Vt = ["id"], Ft
         dir: "auto"
       }, [
         _(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : g("", !0),
-      re(kt, {
+      ], 512)) : y("", !0),
+      re(Ct, {
         show: $.value.showTooltip && te.value && T.value.length < C.dataset.length,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
@@ -703,14 +709,14 @@ const Nt = ["id"], Pt = ["onClick"], St = ["xmlns", "viewBox"], Vt = ["id"], Ft
         isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function"
       }, {
         "tooltip-before": k(() => [
-          _(t.$slots, "tooltip-before", U(H({ ...ue.value })), void 0, !0)
+          _(t.$slots, "tooltip-before", G(H({ ...ue.value })), void 0, !0)
         ]),
         "tooltip-after": k(() => [
-          _(t.$slots, "tooltip-after", U(H({ ...ue.value })), void 0, !0)
+          _(t.$slots, "tooltip-after", G(H({ ...ue.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
-      Y.value ? (u(), M(Ct, {
+      Y.value ? (u(), O(Lt, {
         key: 10,
         hideDetails: "",
         config: {
@@ -729,18 +735,18 @@ const Nt = ["id"], Pt = ["onClick"], St = ["xmlns", "viewBox"], Vt = ["id"], Ft
         content: k(() => [
           n("div", {
             ref_key: "tableContainer",
-            ref: xe,
+            ref: we,
             class: "vue-ui-vertical-bar-table"
           }, [
-            n("div", Ht, [
+            n("div", qt, [
               n("div", {
                 role: "button",
                 tabindex: "0",
-                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};`),
+                style: d(`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) => $.value.showTable = !1),
-                onKeypress: l[4] || (l[4] = lt((a) => $.value.showTable = !1, ["enter"]))
+                onKeypress: l[4] || (l[4] = ut((a) => $.value.showTable = !1, ["enter"]))
               }, [
-                re($t, {
+                re(Tt, {
                   name: "close",
                   stroke: e.value.table.th.color,
                   "stroke-width": 2
@@ -748,111 +754,111 @@ const Nt = ["id"], Pt = ["onClick"], St = ["xmlns", "viewBox"], Vt = ["id"], Ft
               ], 36),
               n("div", {
                 style: { width: "100%", "container-type": "inline-size" },
-                class: X({ "vue-ui-responsive": $e.value })
+                class: U({ "vue-ui-responsive": Te.value })
               }, [
-                n("table", Wt, [
+                n("table", Kt, [
                   n("caption", {
-                    style: c({ backgroundColor: e.value.table.th.backgroundColor, color: e.value.table.th.color, outline: e.value.table.th.outline }),
+                    style: d({ backgroundColor: e.value.table.th.backgroundColor, color: e.value.table.th.color, outline: e.value.table.th.outline }),
                     class: "vue-ui-data-table__caption"
                   }, [
-                    ot(d(e.value.style.chart.title.text) + " ", 1),
-                    e.value.style.chart.title.subtitle.text ? (u(), i("span", jt, d(e.value.style.chart.title.subtitle.text), 1)) : g("", !0)
+                    st(v(e.value.style.chart.title.text) + " ", 1),
+                    e.value.style.chart.title.subtitle.text ? (u(), i("span", Jt, v(e.value.style.chart.title.subtitle.text), 1)) : y("", !0)
                   ], 4),
                   n("thead", null, [
                     n("tr", {
                       role: "row",
-                      style: c(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color}`)
+                      style: d(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color}`)
                     }, [
                       (u(!0), i(W, null, j(w.value.head, (a) => (u(), i("th", {
-                        style: c(`outline:${e.value.table.th.outline}`)
+                        style: d(`outline:${e.value.table.th.outline}`)
                       }, [
-                        n("div", Yt, d(a), 1)
+                        n("div", Qt, v(a), 1)
                       ], 4))), 256))
                     ], 4),
                     n("tr", null, [
                       n("th", {
-                        style: c(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                        style: d(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
                       }, null, 4),
                       n("th", {
-                        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`)
-                      }, "∑ " + d(e.value.table.td.prefix) + d(isNaN(L.value) ? "" : L.value.toFixed(e.value.table.td.roundingValue)) + d(e.value.table.td.suffix), 5),
+                        style: d(`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`)
+                      }, "∑ " + v(e.value.table.td.prefix) + v(isNaN(L.value) ? "" : L.value.toFixed(e.value.table.td.roundingValue)) + v(e.value.table.td.suffix), 5),
                       n("th", {
-                        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`)
+                        style: d(`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: c(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                        style: d(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
                       }, null, 4),
                       n("th", {
-                        style: c(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                        style: d(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
                       }, null, 4),
                       n("th", {
-                        style: c(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                        style: d(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
                       }, null, 4),
                       n("th", {
-                        style: c(`background:${e.value.table.th.backgroundColor};color:${e.value.table.th.color};outline:${e.value.table.th.outline}`)
+                        style: d(`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), i(W, null, j(w.value.body, (a, o) => (u(), i("tr", {
-                      class: X({ "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}`)
+                      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: d(`background:${e.value.table.td.backgroundColor};color:${e.value.table.td.color}`)
                     }, [
                       n("td", {
                         class: "vue-ui-data-table__tbody__td",
-                        style: c(`outline:${e.value.table.td.outline};font-variant-numeric: tabular-nums;`),
+                        style: d(`outline:${e.value.table.td.outline};font-variant-numeric: tabular-nums;`),
                         "data-cell": w.value.head[0] ?? ""
                       }, [
-                        n("div", Kt, [
+                        n("div", ea, [
                           a.color ? (u(), i("span", {
                             key: 0,
-                            style: c(`color:${a.color};margin-right:3px`)
-                          }, "⬤", 4)) : g("", !0),
-                          n("span", null, d(a.parentName), 1)
+                            style: d(`color:${a.color};margin-right:3px`)
+                          }, "⬤", 4)) : y("", !0),
+                          n("span", null, v(a.parentName), 1)
                         ])
-                      ], 12, qt),
+                      ], 12, Zt),
                       n("td", {
                         class: "vue-ui-data-table__tbody__td",
-                        style: c(`outline:${e.value.table.td.outline}`),
+                        style: d(`outline:${e.value.table.td.outline}`),
                         "data-cell": w.value.head[1] ?? ""
                       }, [
-                        n("div", Qt, d(e.value.table.td.prefix) + d(["", NaN, void 0].includes(a.parentValue) ? "" : a.parentValue.toFixed(e.value.table.td.roundingValue)) + d(e.value.table.td.suffix), 1)
-                      ], 12, Jt),
+                        n("div", aa, v(e.value.table.td.prefix) + v(["", NaN, void 0].includes(a.parentValue) ? "" : a.parentValue.toFixed(e.value.table.td.roundingValue)) + v(e.value.table.td.suffix), 1)
+                      ], 12, ta),
                       n("td", {
                         class: "vue-ui-data-table__tbody__td",
-                        style: c(`outline:${e.value.table.td.outline}`),
+                        style: d(`outline:${e.value.table.td.outline}`),
                         "data-cell": w.value.head[2] ?? ""
                       }, [
-                        n("div", ea, d(["", NaN, void 0].includes(a.percentageToTotal) ? "" : `${(a.percentageToTotal * 100).toFixed(e.value.table.td.roundingPercentage)}%`), 1)
-                      ], 12, Zt),
+                        n("div", oa, v(["", NaN, void 0].includes(a.percentageToTotal) ? "" : `${(a.percentageToTotal * 100).toFixed(e.value.table.td.roundingPercentage)}%`), 1)
+                      ], 12, la),
                       n("td", {
                         class: "vue-ui-data-table__tbody__td",
-                        style: c(`outline:${e.value.table.td.outline}`),
+                        style: d(`outline:${e.value.table.td.outline}`),
                         "data-cell": w.value.head[3] ?? ""
                       }, [
-                        n("div", aa, d(a.childName), 1)
-                      ], 12, ta),
+                        n("div", ua, v(a.childName), 1)
+                      ], 12, na),
                       n("td", {
                         class: "vue-ui-data-table__tbody__td",
-                        style: c(`outline:${e.value.table.td.outline}`),
+                        style: d(`outline:${e.value.table.td.outline}`),
                         "data-cell": w.value.head[4] ?? ""
                       }, [
-                        n("div", oa, d(e.value.table.td.prefix) + d(["", NaN, void 0].includes(a.childValue) ? "" : a.childValue.toFixed(e.value.table.td.roundingValue)) + d(e.value.table.td.suffix), 1)
-                      ], 12, la),
+                        n("div", ra, v(e.value.table.td.prefix) + v(["", NaN, void 0].includes(a.childValue) ? "" : a.childValue.toFixed(e.value.table.td.roundingValue)) + v(e.value.table.td.suffix), 1)
+                      ], 12, sa),
                       n("td", {
                         class: "vue-ui-data-table__tbody__td",
-                        style: c(`outline:${e.value.table.td.outline}`),
+                        style: d(`outline:${e.value.table.td.outline}`),
                         "data-cell": w.value.head[5] ?? ""
                       }, [
-                        n("div", ua, d(["", NaN, void 0].includes(a.childPercentageToParent) ? "" : `${(a.childPercentageToParent * 100).toFixed(e.value.table.td.roundingPercentage)}%`), 1)
-                      ], 12, na),
+                        n("div", da, v(["", NaN, void 0].includes(a.childPercentageToParent) ? "" : `${(a.childPercentageToParent * 100).toFixed(e.value.table.td.roundingPercentage)}%`), 1)
+                      ], 12, ia),
                       n("td", {
                         class: "vue-ui-data-table__tbody__td",
-                        style: c(`outline:${e.value.table.td.outline}`),
+                        style: d(`outline:${e.value.table.td.outline}`),
                         "data-cell": w.value.head[6] ?? ""
                       }, [
-                        n("div", ra, d(["", NaN, void 0].includes(a.childPercentageToTotal) ? "" : `${(a.childPercentageToTotal * 100).toFixed(e.value.table.td.roundingPercentage)}%`), 1)
-                      ], 12, sa)
+                        n("div", va, v(["", NaN, void 0].includes(a.childPercentageToTotal) ? "" : `${(a.childPercentageToTotal * 100).toFixed(e.value.table.td.roundingPercentage)}%`), 1)
+                      ], 12, ca)
                     ], 6))), 256))
                   ])
                 ])
@@ -861,10 +867,10 @@ const Nt = ["id"], Pt = ["onClick"], St = ["xmlns", "viewBox"], Vt = ["id"], Ft
           ], 512)
         ]),
         _: 1
-      }, 8, ["config"])) : g("", !0)
-    ], 14, Nt));
+      }, 8, ["config"])) : y("", !0)
+    ], 46, Ft));
   }
-}, Ca = /* @__PURE__ */ Lt(ia, [["__scopeId", "data-v-8427a305"]]);
+}, Pa = /* @__PURE__ */ Vt(ha, [["__scopeId", "data-v-bbce86e4"]]);
 export {
-  Ca as default
+  Pa as default
 };