vue-data-ui 3.2.7 → 3.3.0

package/dist/{vue-ui-vertical-bar-Y5LefeNg.js → vue-ui-vertical-bar-Hh9gAN5j.js}

@@ -1,23 +1,24 @@
-import { useCssVars as Ut, defineAsyncComponent as K, useSlots as Xt, computed as y, ref as i, toRefs as Wt, watch as Ae, shallowRef as vt, onMounted as ze, nextTick as de, onBeforeUnmount as Gt, createElementBlock as v, openBlock as u, unref as s, normalizeStyle as d, 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 ct, resolveDynamicComponent as Ht, withKeys as jt, createTextVNode as dt } from "vue";
-import { c as qt, t as Yt, b as Kt, p as W, B as Ve, e as Jt, q as L, o as Oe, f as ue, h as Fe, a as pe, d as G, X as Qt, s as Ie, i as Zt, x as ea, y as ta, z as aa, A as la } from "./lib-BEpWEyMm.js";
-import { t as oa, u as na } from "./useResponsive-DfdjqQps.js";
-import { u as ua, a as ht } from "./useNestedProp-BOk-tPdu.js";
-import { u as sa, B as ra } from "./BaseScanner-BgWxam9d.js";
-import { u as ia } from "./usePrinter-w23K-ezx.js";
-import { u as va } from "./useTableResponsive-Cbx-ACcP.js";
-import { u as ca } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as da } from "./useChartAccessibility-9icAAmYg.js";
-import { t as ha } from "./themes-Dw-dDudK.js";
-import pt from "./Legend-BpoFJ8fc.js";
-import pa from "./vue-ui-accordion-CeMTgpl0.js";
-import fa from "./Title-DG2nloSB.js";
-import { _ as ft } from "./Shape-C_C_OmqR.js";
-import ga from "./img-DjWwQXVS.js";
-import { _ as ya } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "width", "height"], _a = ["id"], wa = ["stop-color"], $a = ["stop-color"], Ca = { key: 1 }, Ta = ["x", "y", "width", "height", "fill", "rx"], Sa = ["x", "y", "width", "height", "fill", "rx", "stroke", "stroke-width"], La = ["x", "y", "width", "height", "fill", "rx", "stroke", "stroke-width"], Pa = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Na = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Aa = { class: "vue-ui-horizontal-bar-child-label" }, za = ["x", "y", "text-anchor", "font-size", "fill", "font-weight"], Va = ["x", "y", "font-size", "fill", "font-weight"], Oa = { class: "vue-ui-horizontal-bar-parent-label" }, Fa = ["x", "y", "font-size", "fill", "font-weight"], Ia = ["x", "y", "font-size", "fill", "font-weight"], Ma = ["x", "y", "width", "height", "fill", "onMouseenter", "onMouseleave", "onClick"], Da = {
+import { useCssVars as Kt, defineAsyncComponent as K, useSlots as Jt, computed as g, ref as i, toRefs as Qt, watch as ze, shallowRef as ct, onMounted as Ve, nextTick as he, onBeforeUnmount as Zt, createElementBlock as v, openBlock as u, unref as s, normalizeStyle as d, normalizeClass as X, createBlock as W, createCommentVNode as y, renderSlot as _, createVNode as J, createSlots as pe, withCtx as m, normalizeProps as Q, guardReactiveProps as Z, createElementVNode as n, toDisplayString as h, Fragment as ee, renderList as te, mergeProps as dt, resolveDynamicComponent as ea, withKeys as ta, createTextVNode as ht } from "vue";
+import { c as aa, t as la, b as oa, p as G, B as Ie, e as na, q as L, o as Oe, f as ue, h as Fe, a as se, d as B, X as ua, s as Me, i as sa, x as ra, y as ia, z as va, A as ca } from "./lib-GIYcnm0E.js";
+import { t as da, u as ha } from "./useResponsive-DfdjqQps.js";
+import { u as pa, a as pt } from "./useNestedProp-mxyyqd0B.js";
+import { u as ga, B as fa } from "./BaseScanner-BgWxam9d.js";
+import { u as ya } from "./usePrinter-DYRFiw7X.js";
+import { u as ba } from "./useSvgExport-B7-Vrjtu.js";
+import { u as ma } from "./useTableResponsive-Cbx-ACcP.js";
+import { u as ka } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as xa } from "./useChartAccessibility-9icAAmYg.js";
+import { t as _a } from "./themes-Dw-dDudK.js";
+import gt from "./Legend-DsogCeTb.js";
+import wa from "./vue-ui-accordion-Dch9YrCi.js";
+import $a from "./Title-D17CJXko.js";
+import { _ as ft } from "./Shape-DJG2zW7b.js";
+import Ca from "./img-6wPuVVtk.js";
+import { _ as Ta } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Sa = ["id"], La = ["onClick"], Pa = ["xmlns", "viewBox"], Na = ["x", "width", "height"], Aa = ["id"], za = ["stop-color"], Va = ["stop-color"], Ia = { key: 1 }, Oa = ["x", "y", "width", "height", "fill", "rx"], Fa = ["x", "y", "width", "height", "fill", "rx", "stroke", "stroke-width"], Ma = ["x", "y", "width", "height", "fill", "rx", "stroke", "stroke-width"], Ba = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Da = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ra = { class: "vue-ui-horizontal-bar-child-label" }, Ea = ["x", "y", "text-anchor", "font-size", "fill", "font-weight"], Ua = ["x", "y", "font-size", "fill", "font-weight"], Xa = { class: "vue-ui-horizontal-bar-parent-label" }, Wa = ["x", "y", "font-size", "fill", "font-weight"], Ga = ["x", "y", "font-size", "fill", "font-weight"], Ha = ["x", "y", "width", "height", "fill", "onMouseenter", "onMouseleave", "onClick"], ja = {
   key: 5,
   class: "vue-data-ui-watermark"
-}, Ba = ["onClick"], Ra = { style: "width:100%;padding-top: 36px;position:relative" }, Ea = { class: "vue-ui-data-table" }, Ua = { key: 0 }, Xa = { style: { width: "100%" } }, Wa = ["data-cell"], Ga = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Ha = ["data-cell"], ja = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, qa = ["data-cell"], Ya = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Ka = ["data-cell"], Ja = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, Qa = ["data-cell"], Za = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, el = ["data-cell"], tl = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, al = ["data-cell"], ll = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, ol = {
+}, qa = ["onClick"], Ya = { style: "width:100%;padding-top: 36px;position:relative" }, Ka = { class: "vue-ui-data-table" }, Ja = { key: 0 }, Qa = { style: { width: "100%" } }, 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 = ["data-cell"], ol = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, nl = ["data-cell"], ul = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, sl = ["data-cell"], rl = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, il = ["data-cell"], vl = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, cl = ["data-cell"], dl = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, hl = {
   __name: "vue-ui-vertical-bar",
   props: {
     config: {
@@ -34,35 +35,35 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
     }
   },
   emits: ["selectLegend"],
-  setup(gt, { expose: yt, emit: bt }) {
-    Ut((t) => ({
-      v27fa778f: t.tdo
+  setup(yt, { expose: bt, emit: mt }) {
+    Kt((t) => ({
+      v4fa4c7ee: t.tdo
     }));
-    const mt = K(() => import("./Tooltip-BOXz8skU.js")), Me = K(() => import("./BaseIcon-Bz-1GQhu.js")), kt = K(() => import("./PenAndPaper-CR8q353D.js")), xt = K(() => import("./UserOptions-DsTgvAok.js")), _t = K(() => import("./PackageVersion-Cwrh45ON.js")), wt = K(() => import("./BaseDraggableDialog-CHhZIht2.js")), { vue_ui_vertical_bar: $t } = ua(), Ct = Xt(), b = gt, fe = y({
+    const kt = K(() => import("./Tooltip-CtVdvbZi.js")), Be = K(() => import("./BaseIcon-CtqN7W_g.js")), xt = K(() => import("./PenAndPaper-BxbYiPy4.js")), _t = K(() => import("./UserOptions-B3vCIe-u.js")), wt = K(() => import("./PackageVersion-C9oklnuy.js")), $t = K(() => import("./BaseDraggableDialog-q3pgSDTz.js")), { vue_ui_vertical_bar: Ct } = pa(), Tt = Jt(), b = yt, ge = g({
       get() {
         return !!b.dataset && b.dataset.length;
       },
       set(t) {
         return t;
       }
-    }), S = i(qt()), ge = i(!1), ye = i(""), ae = i(0), Tt = i(null), De = i(0), P = i(null), Be = i(null), be = i(null), Re = i(null), Ee = i(null), Ue = i(0), me = i(0), H = i(null), le = i(null), ke = i(null), St = bt, e = i($e()), Lt = y(() => [
+    }), S = i(aa()), fe = i(!1), ye = i(""), ae = i(0), St = i(null), De = i(0), P = i(null), Re = i(null), be = i(null), Ee = i(null), Ue = i(null), Xe = i(0), me = i(0), H = i(null), le = i(null), ke = i(null), Lt = mt, e = i(Ce()), Pt = g(() => [
       { 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: Xe, FINAL_DATASET: xe, manualLoading: _e } = sa({
-      ...Wt(b),
+    ]), { loading: We, FINAL_DATASET: xe, manualLoading: _e } = ga({
+      ...Qt(b),
       FINAL_CONFIG: e,
-      prepareConfig: $e,
+      prepareConfig: Ce,
       callback: () => {
         Promise.resolve().then(async () => {
           q(), $.value.showTable = e.value.table.show, await F();
         });
       },
-      skeletonDataset: Lt.value,
-      skeletonConfig: Yt({
+      skeletonDataset: Pt.value,
+      skeletonConfig: la({
         defaultConfig: e.value,
         userConfig: {
           useCssAnimation: !1,
@@ -108,42 +109,42 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
           }
         }
       })
-    }), { userOptionsVisible: we, setUserOptionsVisibility: We, keepUserOptionState: Ge } = ca({ config: e.value }), { svgRef: He } = da({ config: e.value.style.chart.title });
-    function $e() {
-      const t = ht({
+    }), { userOptionsVisible: we, setUserOptionsVisibility: Ge, keepUserOptionState: He } = ka({ config: e.value }), { svgRef: $e } = xa({ config: e.value.style.chart.title });
+    function Ce() {
+      const t = pt({
         userConfig: b.config,
-        defaultConfig: $t
+        defaultConfig: Ct
       });
       let l = {};
       return t.theme ? l = {
-        ...ht({
-          userConfig: ha.vue_ui_vertical_bar[t.theme] || b.config,
+        ...pt({
+          userConfig: _a.vue_ui_vertical_bar[t.theme] || b.config,
           defaultConfig: t
         }),
-        customPalette: Kt[t.theme] || W
-      } : l = t, b.config && Ve(b.config, "events.datapointEnter") ? l.events.datapointEnter = b.config.events.datapointEnter : l.events.datapointEnter = null, b.config && Ve(b.config, "events.datapointLeave") ? l.events.datapointLeave = b.config.events.datapointLeave : l.events.datapointLeave = null, b.config && Ve(b.config, "events.datapointClick") ? l.events.datapointClick = b.config.events.datapointClick : l.events.datapointClick = null, l;
+        customPalette: oa[t.theme] || G
+      } : l = t, b.config && Ie(b.config, "events.datapointEnter") ? l.events.datapointEnter = b.config.events.datapointEnter : l.events.datapointEnter = null, b.config && Ie(b.config, "events.datapointLeave") ? l.events.datapointLeave = b.config.events.datapointLeave : l.events.datapointLeave = null, b.config && Ie(b.config, "events.datapointClick") ? l.events.datapointClick = b.config.events.datapointClick : l.events.datapointClick = null, l;
     }
-    Ae(() => b.config, (t) => {
-      Xe.value || (e.value = $e()), we.value = !e.value.userOptions.showOnChartHover, et(), Ue.value += 1, me.value += 1, p.value = e.value.style.chart.layout.bars.height, k.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 }), Ae(() => b.dataset, (t) => {
+    ze(() => b.config, (t) => {
+      We.value || (e.value = Ce()), we.value = !e.value.userOptions.showOnChartHover, et(), Xe.value += 1, me.value += 1, p.value = e.value.style.chart.layout.bars.height, k.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 }), ze(() => b.dataset, (t) => {
       Array.isArray(t) && t.length > 0 && (_e.value = !1), q();
     }, { deep: !0 });
-    const { isPrinting: je, isImaging: qe, generatePdf: Ye, generateImage: Ke } = ia({
+    const { isPrinting: je, isImaging: qe, generatePdf: Ye, generateImage: Ke } = ya({
       elementId: `vue-ui-vertical-bar_${S.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-vertical-bar",
       options: e.value.userOptions.print
-    }), Pt = y(() => e.value.userOptions.show && !e.value.style.chart.title.text), Je = y(() => Jt(e.value.customPalette)), Qe = i(null), Nt = y(() => e.value.table.responsiveBreakpoint), O = vt(null), j = vt(null), se = i("0 0 10 10"), N = y(() => {
-      const [t, l, a, o] = se.value.split(" ").map(Number);
+    }), Nt = g(() => e.value.userOptions.show && !e.value.style.chart.title.text), Je = g(() => na(e.value.customPalette)), Qe = i(null), At = g(() => e.value.table.responsiveBreakpoint), O = ct(null), j = ct(null), re = i("0 0 10 10"), N = g(() => {
+      const [t, l, a, o] = re.value.split(" ").map(Number);
       return { x: t, y: l, width: a, height: o };
     });
-    ze(async () => {
-      await de(), et(), F();
+    Ve(async () => {
+      await he(), et(), F();
     });
     async function F() {
-      if (se.value = `0 0 ${C.value.width} ${r.value.fullHeight}`, !e.value.autoSize || !H.value) return;
+      if (re.value = `0 0 ${C.value.width} ${r.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 g = Math.max(...Array.from(t).flatMap((c) => {
+        const f = Math.max(...Array.from(t).flatMap((c) => {
           const x = c.querySelectorAll("text");
           return x.length ? Array.from(x).map((Y) => Y.getBBox().width) : 0;
         })), w = Math.max(...Array.from(l).flatMap((c) => {
@@ -153,13 +154,13 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
         Array.from(t).forEach((c) => {
           const x = c.querySelectorAll("text");
           Array.from(x).forEach(async (Y) => {
-            Y.setAttribute("x", 0), Y.setAttribute("x", L(-g - w));
+            Y.setAttribute("x", 0), Y.setAttribute("x", L(-f - w));
           });
         });
       }
-      await de();
+      await he();
       const a = H.value ? H.value.getBBox() : 0, o = e.value.style.chart.layout.bars.dataLabels.offsetX;
-      se.value = [
+      re.value = [
         a.x + -o,
         0,
         a.width + o * 2,
@@ -167,7 +168,7 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
       ].join(" ");
     }
     let Ze;
-    ze(() => {
+    Ve(() => {
       P.value && (Ze = new ResizeObserver((t) => {
         for (const l of t) {
           const { width: a, height: o } = l.contentRect;
@@ -180,48 +181,48 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
         }
       }), Ze.observe(P.value.parentElement));
     });
-    const re = y(() => !!e.value.debug), Ce = i(0);
+    const ie = g(() => !!e.value.debug), Te = i(0);
     function et() {
       if (Oe(b.dataset) && (ue({
         componentName: "VueUiVerticalBar",
         type: "dataset",
-        debug: re.value
-      }), fe.value = !1, _e.value = !0), ae.value = xe.value.flatMap((t) => t.children && t.children.length > 0 ? t.children.length : 1).reduce((t, l) => t + l, 0), Oe(b.dataset) || (_e.value = e.value.loading), e.value.responsive) {
-        const t = oa(() => {
-          const { width: l, height: a } = na({
+        debug: ie.value
+      }), ge.value = !1, _e.value = !0), ae.value = xe.value.flatMap((t) => t.children && t.children.length > 0 ? t.children.length : 1).reduce((t, l) => t + l, 0), Oe(b.dataset) || (_e.value = e.value.loading), e.value.responsive) {
+        const t = da(() => {
+          const { width: l, height: a } = ha({
             chart: P.value,
-            title: e.value.style.chart.title.text ? Be.value : null,
+            title: e.value.style.chart.title.text ? Re.value : null,
             legend: e.value.style.chart.legend.show ? be.value : null,
-            source: Re.value,
-            noTitle: Ee.value
+            source: Ee.value,
+            noTitle: Ue.value
           });
-          Ce.value = a / 3, requestAnimationFrame(async () => {
+          Te.value = a / 3, requestAnimationFrame(async () => {
             lt.value = l;
             const o = k.value * (ae.value - 1);
-            p.value = (a - o) / ae.value, await de(), F();
+            p.value = (a - o) / ae.value, await he(), F();
           });
         });
         O.value && (j.value && O.value.unobserve(j.value), O.value.disconnect()), O.value = new ResizeObserver(t), j.value = P.value.parentNode, O.value.observe(j.value), e.value.autoSize && F();
       }
     }
-    Gt(() => {
+    Zt(() => {
       O.value && (j.value && O.value.unobserve(j.value), O.value.disconnect());
     });
     const $ = i({
       showTable: e.value.table.show,
       sortDesc: e.value.style.chart.layout.bars.sort === "desc",
       showTooltip: e.value.style.chart.tooltip.show
-    }), tt = y(() => $.value.sortDesc), I = y(() => (xe.value.forEach((t, l) => {
+    }), tt = g(() => $.value.sortDesc), I = g(() => (xe.value.forEach((t, l) => {
       !t.value && !t.children && ue({
         componentName: "VueUiVerticalBar",
         type: "datasetAttributeEmpty",
         property: `value (index ${l})`,
-        debug: re.value
+        debug: ie.value
       }), t.children && (Oe(t.children) ? ue({
         componentName: "VueUiVerticalBar",
         type: "datasetAttributeEmpty",
         property: `children (index ${l})`,
-        debug: re.value
+        debug: ie.value
       }) : t.children.forEach((a, o) => {
         [null, void 0].includes(a.name) && ue({
           componentName: "VueUiVerticalBar",
@@ -229,25 +230,25 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
           property: "name",
           key: "children",
           index: o,
-          debug: re.value
+          debug: ie.value
         });
       }));
     }), 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((c) => c.value || 0).reduce((c, x) => c + x, 0) : 0), w = g >= 0 ? 1 : -1;
+      const a = `vertical_parent_${l}_${S.value}`, o = t.children && t.children.length > 0, f = L(t.value ? t.value : o ? t.children.map((c) => c.value || 0).reduce((c, x) => c + x, 0) : 0), w = f >= 0 ? 1 : -1;
       return {
         ...t,
         id: a,
         absoluteIndex: l,
         shape: "square",
         opacity: A.value.includes(a) ? 0.5 : 1,
-        value: Math.abs(g),
+        value: Math.abs(f),
         sign: w,
         hasChildren: o,
         isChild: !1,
         segregate: () => oe(a),
         isSegregated: A.value.includes(a),
-        color: Fe(t.color) || Je.value[l] || W[l] || W[l % W.length],
-        children: !t.children || !t.children.length ? [] : t.children.toSorted(ie.value ? () => 0 : (c, x) => tt.value ? x.value - c.value : c.value - x.value).map((c, x) => ({
+        color: Fe(t.color) || Je.value[l] || G[l] || G[l % G.length],
+        children: !t.children || !t.children.length ? [] : t.children.toSorted(ve.value ? () => 0 : (c, x) => tt.value ? x.value - c.value : c.value - x.value).map((c, x) => ({
           ...c,
           value: L(Math.abs(c.value)),
           absoluteIndex: l,
@@ -255,34 +256,34 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
           isChild: !0,
           parentId: a,
           parentName: t.name,
-          parentValue: g,
+          parentValue: f,
           parentSign: w,
           id: `vertical_child_${l}_${x}_${S.value}`,
           childIndex: x,
-          color: Fe(c.color) || Fe(t.color) || Je.value[l] || W[l] || W[l % W.length]
+          color: Fe(c.color) || Fe(t.color) || Je.value[l] || G[l] || G[l % G.length]
         })).map((c, x) => ({
           ...c,
           isFirstChild: x === 0,
           isLastChild: x === t.children.length - 1
         }))
       };
-    }).toSorted(ie.value ? () => 0 : (t, l) => tt.value ? l.value - t.value : t.value - l.value))), at = y(() => ({
+    }).toSorted(ve.value ? () => 0 : (t, l) => tt.value ? l.value - t.value : t.value - l.value))), at = g(() => ({
       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" : ""
-    })), p = i(e.value.style.chart.layout.bars.height), k = i(e.value.style.chart.layout.bars.gap), At = y(() => (p.value + k.value) * ae.value), lt = i(512), C = y(() => ({
+    })), p = i(e.value.style.chart.layout.bars.height), k = i(e.value.style.chart.layout.bars.gap), zt = g(() => (p.value + k.value) * ae.value), lt = i(512), C = g(() => ({
       width: lt.value,
-      height: 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 = y(() => ({
+    })), r = g(() => ({
       fullHeight: C.value.padding.top + C.value.padding.bottom + C.value.height,
       top: C.value.padding.top,
       left: C.value.padding.left,
@@ -301,28 +302,28 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
         if (A.value.length === I.value.length - 1) return;
         A.value.push(t);
       }
-      q(), await de(), e.value.autoSize && F(), St("selectLegend", D.value);
+      q(), await he(), e.value.autoSize && F(), Lt("selectLegend", D.value);
     }
-    const D = y(() => I.value.filter((t) => !A.value.includes(t.id))), V = y(() => D.value.map((t) => Math.abs(t.value)).reduce((t, l) => t + l, 0));
+    const D = g(() => I.value.filter((t) => !A.value.includes(t.id))), V = g(() => D.value.map((t) => Math.abs(t.value)).reduce((t, l) => t + l, 0));
     function ot(t, l = !1, a = 0) {
-      return l ? G({
+      return l ? B({
         v: L(Math.abs(t) / V.value * 100),
         s: "%",
         r: a
       }) : Math.abs(t) / V.value;
     }
-    const B = y(() => D.value.flatMap((t) => t.hasChildren ? t.children : t)), R = y(() => B.value.map((t) => t.sign).includes(-1)), zt = y(() => Math.max(...D.value.flatMap((t) => t.children && t.children.length ? Math.max(...t.children.map((l) => l.value)) : t.value)));
+    const R = g(() => D.value.flatMap((t) => t.hasChildren ? t.children : t)), E = g(() => R.value.map((t) => t.sign).includes(-1)), Vt = g(() => Math.max(...D.value.flatMap((t) => t.children && t.children.length ? Math.max(...t.children.map((l) => l.value)) : t.value)));
     function T(t) {
-      const l = t / zt.value;
-      return r.value.width / (R.value ? 2 : 1) * l;
+      const l = t / Vt.value;
+      return r.value.width / (E.value ? 2 : 1) * l;
     }
-    function Vt(t) {
+    function It(t) {
       return T(t) + r.value.left;
     }
     function ne(t, l) {
-      const a = D.value.find((w) => w.id === t.parentId), o = r.value.top + (k.value + p.value) * l, g = a.children.length * (k.value + p.value);
+      const a = D.value.find((w) => w.id === t.parentId), o = r.value.top + (k.value + p.value) * l, f = a.children.length * (k.value + p.value);
       return {
-        y: o + g / 2 - e.value.style.chart.layout.bars.parentLabels.fontSize,
+        y: o + f / 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) ? "" : ot(a.value, !0, e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage),
@@ -332,23 +333,23 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
     function Ot() {
       return D.value;
     }
-    const Te = i(null), Se = i(null);
+    const Se = i(null), Le = i(null);
     function Ft({ datapoint: t, seriesIndex: l }) {
       e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: l });
     }
-    function It({ 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 Mt({ datapoint: t, seriesIndex: l }) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: l }), St.value = null, fe.value = !1, Se.value = null;
     }
-    function Mt(t, l) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datpoint: t, seriesIndex: l }), Se.value = {
+    function Bt(t, l) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datpoint: t, seriesIndex: l }), Le.value = {
         datapoint: t,
         seriesIndex: l,
         series: I.value,
         config: e.value
-      }, ge.value = !0, Te.value = t.id;
+      }, fe.value = !0, Se.value = t.id;
       let a = "";
-      const o = t.isChild ? t.parentName : t.name, g = t.isChild ? t.name : "", w = e.value.style.chart.tooltip.customFormat;
-      aa(w) && la(() => w({
+      const o = t.isChild ? t.parentName : t.name, f = t.isChild ? t.name : "", w = e.value.style.chart.tooltip.customFormat;
+      va(w) && ca(() => w({
         datapoint: t,
         series: I.value,
         config: e.value,
@@ -359,23 +360,23 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
         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}"/>${Ct.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(
+                <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}"/>${Tt.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>${se(
         e.value.style.chart.layout.bars.dataLabels.value.formatter,
         t.sign === 1 ? t.value : -t.value,
-        G({
+        B({
           p: e.value.style.chart.tooltip.prefix,
           v: t.sign === 1 ? t.value : -t.value,
           s: e.value.style.chart.tooltip.suffix,
           r: e.value.style.chart.tooltip.roundingValue
         }),
         { datapoint: t, seriesIndex: l }
-      )}</b></div>`), e.value.style.chart.tooltip.showPercentage && (a += `<div>${e.value.translations.percentageToTotal} : <b>${G({
+      )}</b></div>`), e.value.style.chart.tooltip.showPercentage && (a += `<div>${e.value.translations.percentageToTotal} : <b>${B({
         v: Math.abs(t.value) / V.value * 100,
         s: "%",
         r: e.value.style.chart.tooltip.roundingPercentage
-      })}</b></div>`, t.isChild && (a += `<div>${e.value.translations.percentageToSerie}: <b>${G({
+      })}</b></div>`, t.isChild && (a += `<div>${e.value.translations.percentageToSerie}: <b>${B({
         v: Math.abs(t.value) / Math.abs(t.parentValue) * 100,
         s: "%",
         r: e.value.style.chart.tooltip.roundingPercentage
@@ -384,10 +385,10 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
     function nt(t, l, a, o) {
       if (!e.value.style.chart.layout.bars.dataLabels.value.show)
         return "";
-      const g = pe(
+      const f = se(
         e.value.style.chart.layout.bars.dataLabels.value.formatter,
         L(o === -1 && t >= 0 ? -t : t),
-        G({
+        B({
           p: e.value.style.chart.layout.bars.dataLabels.value.prefix,
           v: L(o === -1 && t >= 0 ? -t : t),
           s: e.value.style.chart.layout.bars.dataLabels.value.suffix,
@@ -395,9 +396,9 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
         }),
         { datapoint: l, seriesIndex: a }
       ), w = `(${ot(t, !0, e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage)})`;
-      return `${g}${e.value.style.chart.layout.bars.dataLabels.percentage.show ? ` ${w}` : ""}`;
+      return `${f}${e.value.style.chart.layout.bars.dataLabels.percentage.show ? ` ${w}` : ""}`;
     }
-    const z = y(() => {
+    const z = g(() => {
       const t = [
         e.value.translations.parentName,
         e.value.translations.value,
@@ -406,7 +407,7 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
         e.value.translations.value,
         e.value.translations.percentageToSerie,
         e.value.translations.percentageToTotal
-      ], l = B.value.map((a) => a.isChild ? a.isFirstChild ? {
+      ], l = R.value.map((a) => a.isChild ? a.isFirstChild ? {
         color: a.color,
         parentName: a.parentName,
         parentValue: a.parentValue,
@@ -436,7 +437,7 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
       });
       return { head: t, body: l };
     });
-    function Le(t = null) {
+    function Pe(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((c) => [
         c.parentName,
         c.parentValue,
@@ -445,12 +446,12 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
         c.childValue,
         c.childPercentageToParent,
         c.childPercentageToTotal
-      ]), g = l.concat([a]).concat(o), w = ea(g);
-      t ? t(w) : ta({ csvContent: w, title: e.value.style.chart.title.text || "vue-ui-vertical-bar" });
+      ]), f = l.concat([a]).concat(o), w = ra(f);
+      t ? t(w) : ia({ csvContent: w, title: e.value.style.chart.title.text || "vue-ui-vertical-bar" });
     }
-    const E = i(!1);
+    const U = i(!1);
     function ut(t) {
-      E.value = t, De.value += 1;
+      U.value = t, De.value += 1;
     }
     function st() {
       $.value.showTable = !$.value.showTable;
@@ -459,33 +460,33 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
       none: 0,
       asc: 1,
       desc: 2
-    }), M = i(0), ie = i(!1);
-    ze(() => {
+    }), M = i(0), ve = i(!1);
+    Ve(() => {
       ["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 = Dt.value[e.value.style.chart.layout.bars.sort], $.value.sortDesc = M.value === 2, ie.value = M.value === 0;
+      }), M.value = Dt.value[e.value.style.chart.layout.bars.sort], $.value.sortDesc = M.value === 2, ve.value = M.value === 0;
     });
-    function Bt() {
+    function Rt() {
       M.value += 1, M.value > 2 && (M.value = 0);
     }
     function rt() {
-      Bt(), $.value.sortDesc = M.value === 2, ie.value = M.value === 0, q();
+      Rt(), $.value.sortDesc = M.value === 2, ve.value = M.value === 0, q();
     }
     function it() {
       $.value.showTooltip = !$.value.showTooltip;
     }
-    const ve = i(!1);
-    function Pe() {
-      ve.value = !ve.value;
+    const ce = i(!1);
+    function Ne() {
+      ce.value = !ce.value;
     }
-    async function Rt({ scale: t = 2 } = {}) {
+    async function Et({ scale: t = 2 } = {}) {
       if (!P.value) return;
-      const { width: l, height: a } = P.value.getBoundingClientRect(), o = l / a, { imageUri: g, base64: w } = await ga({ domElement: P.value, base64: !0, img: !0, scale: t });
+      const { width: l, height: a } = P.value.getBoundingClientRect(), o = l / a, { imageUri: f, base64: w } = await Ca({ domElement: P.value, base64: !0, img: !0, scale: t });
       return {
-        imageUri: g,
+        imageUri: f,
         base64: w,
         title: e.value.style.chart.title.text,
         width: l,
@@ -493,17 +494,17 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
         aspectRatio: o
       };
     }
-    const ce = y(() => {
+    const de = g(() => {
       const t = e.value.table.useDialog && !e.value.table.show, l = $.value.showTable;
       return {
-        component: t ? wt : pa,
+        component: t ? $t : wa,
         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,
+          isFullscreen: U.value,
           fullscreenParent: P.value,
           forcedWidth: Math.min(800, window.innerWidth * 0.8)
         } : {
@@ -523,59 +524,91 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
         }
       };
     });
-    Ae(() => $.value.showTable, (t) => {
+    ze(() => $.value.showTable, (t) => {
       e.value.table.show || (t && e.value.table.useDialog && le.value ? le.value.open() : "close" in le.value && le.value.close());
     });
-    const { isResponsive: Et } = va(Qe, Nt);
-    function Ne() {
+    const { isResponsive: Ut } = ma(Qe, At);
+    function Ae() {
       $.value.showTable = !1, ke.value && ke.value.setTableIconState(!1);
     }
-    return yt({
+    const Xt = g(() => I.value.map((t, l) => ({
+      ...t,
+      shape: "square",
+      display: `${t.name}: ${se(
+        e.value.style.chart.layout.bars.dataLabels.value.formatter,
+        t.value,
+        B({
+          p: e.value.style.chart.legend.prefix,
+          v: t.value,
+          s: e.value.style.chart.legend.suffix,
+          r: e.value.style.chart.legend.roundingValue
+        }),
+        { datapoint: t, seriesIndex: l }
+      )}`
+    }))), Wt = g(() => e.value.style.chart.backgroundColor), Gt = g(() => e.value.style.chart.legend), Ht = g(() => e.value.style.chart.title), jt = g(() => Xt.value.map((t) => ({
+      ...t,
+      name: t.display
+    }))), { exportSvg: qt, getSvg: Yt } = ba({
+      svg: $e,
+      title: Ht,
+      legend: Gt,
+      legendItems: jt,
+      backgroundColor: Wt
+    });
+    async function vt({ isCb: t }) {
+      if (t) {
+        const { blob: l, url: a, text: o, dataUrl: f } = await Yt();
+        e.value.userOptions.callbacks.svg({ blob: l, url: a, text: o, dataUrl: f });
+      } else
+        qt();
+    }
+    return bt({
       autoSize: F,
       // v3
       getData: Ot,
-      getImage: Rt,
+      getImage: Et,
       recalculateHeight: q,
       generatePdf: Ye,
-      generateCsv: Le,
+      generateCsv: Pe,
       generateImage: Ke,
+      generateSvg: vt,
       toggleTable: st,
       toggleSort: rt,
       toggleTooltip: it,
-      toggleAnnotator: Pe,
+      toggleAnnotator: Ne,
       toggleFullscreen: ut
     }), (t, l) => (u(), v("div", {
-      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" : ""}`),
+      class: X(`vue-data-ui-component vue-ui-vertical-bar ${U.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: P,
       id: `vue-ui-vertical-bar_${S.value}`,
-      style: d(`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[3] || (l[3] = () => s(We)(!0)),
-      onMouseleave: l[4] || (l[4] = () => s(We)(!1))
+      style: d(`padding-top:${e.value.responsive && e.value.autoSize ? `${Te.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% - ${Te.value}px` : "height: 100%" : ""}`),
+      onMouseenter: l[3] || (l[3] = () => s(Ge)(!0)),
+      onMouseleave: l[4] || (l[4] = () => s(Ge)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (u(), X(s(kt), {
+      e.value.userOptions.buttons.annotator ? (u(), W(s(xt), {
         key: 0,
-        svgRef: s(He),
+        svgRef: s($e),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        active: ve.value,
-        onClose: Pe
-      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : f("", !0),
-      Pt.value ? (u(), v("div", {
+        active: ce.value,
+        onClose: Ne
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : y("", !0),
+      Nt.value ? (u(), v("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: Ee,
+        ref: Ue,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : f("", !0),
+      }, null, 512)) : y("", !0),
       e.value.style.chart.title.text ? (u(), v("div", {
         key: 2,
         ref_key: "chartTitle",
-        ref: Be,
+        ref: Re,
         style: "width:100%;background:transparent;padding-bottom:12px"
       }, [
-        (u(), X(fa, {
-          key: `title_${Ue.value}`,
+        (u(), W($a, {
+          key: `title_${Xe.value}`,
           config: {
             title: {
               cy: "vertical-bar-div-title",
@@ -587,8 +620,8 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : f("", !0),
-      e.value.userOptions.show && fe.value && (s(Ge) || s(we)) ? (u(), X(s(xt), {
+      ], 512)) : y("", !0),
+      e.value.userOptions.show && ge.value && (s(He) || s(we)) ? (u(), W(s(_t), {
         ref_key: "userOptionsRef",
         ref: ke,
         key: `user_options_${De.value}`,
@@ -600,32 +633,34 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
+        hasSvg: e.value.userOptions.buttons.svg,
         hasXls: e.value.userOptions.buttons.csv,
         hasTable: e.value.userOptions.buttons.table,
         hasSort: e.value.userOptions.buttons.sort,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: E.value,
+        isFullscreen: U.value,
         isTooltip: $.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
         chartElement: P.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: ve.value,
+        isAnnotation: ce.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
         tableDialog: e.value.table.useDialog,
         onToggleFullscreen: ut,
         onGeneratePdf: s(Ye),
-        onGenerateCsv: Le,
+        onGenerateCsv: Pe,
         onGenerateImage: s(Ke),
+        onGenerateSvg: vt,
         onToggleTable: st,
         onToggleSort: rt,
         onToggleTooltip: it,
-        onToggleAnnotator: Pe,
+        onToggleAnnotator: Ne,
         style: d({
-          visibility: s(Ge) ? s(we) ? "visible" : "hidden" : "visible"
+          visibility: s(He) ? s(we) ? "visible" : "hidden" : "visible"
         })
-      }, he({ _: 2 }, [
+      }, pe({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
           fn: m(({ isOpen: a, color: o }) => [
@@ -696,33 +731,33 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
           ]),
           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", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasSort", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : y("", !0),
       e.value.style.chart.legend.show && e.value.style.chart.legend.position === "top" ? (u(), v("div", {
         key: 4,
         ref_key: "chartLegend",
         ref: be
       }, [
-        (u(), X(pt, {
+        (u(), W(gt, {
           key: `legend_top_${me.value}`,
           legendSet: I.value,
           config: at.value,
           onClickMarker: l[0] || (l[0] = ({ legend: a }) => oe(a.id))
-        }, he({
+        }, pe({
           item: m(({ legend: a, index: o }) => [
             n("div", {
-              onClick: (g) => oe(a.id),
+              onClick: (f) => oe(a.id),
               style: d(`opacity:${A.value.includes(a.id) ? 0.5 : 1}`)
-            }, h(a.name) + ": " + h(s(pe)(
+            }, h(a.name) + ": " + h(s(se)(
               e.value.style.chart.layout.bars.dataLabels.value.formatter,
               a.value,
-              s(G)({
+              s(B)({
                 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, ma)
+            )), 13, La)
           ]),
           _: 2
         }, [
@@ -740,13 +775,13 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
             key: "0"
           } : void 0
         ]), 1032, ["legendSet", "config"]))
-      ], 512)) : f("", !0),
+      ], 512)) : y("", !0),
       (u(), v("svg", {
         ref_key: "svgRef",
-        ref: He,
-        xmlns: s(Qt),
-        class: U({ "vue-data-ui-fullscreen--on": E.value, "vue-data-ui-fulscreen--off": !E.value }),
-        viewBox: se.value,
+        ref: $e,
+        xmlns: s(ua),
+        class: X({ "vue-data-ui-fullscreen--on": U.value, "vue-data-ui-fulscreen--off": !U.value }),
+        viewBox: re.value,
         style: d(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`)
       }, [
         n("g", {
@@ -754,7 +789,7 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
           ref: H,
           class: "vue-data-ui-g"
         }, [
-          J(s(_t)),
+          J(s(wt)),
           t.$slots["chart-background"] ? (u(), v("foreignObject", {
             key: 0,
             x: N.value.x,
@@ -766,8 +801,8 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
             }
           }, [
             _(t.$slots, "chart-background", {}, void 0, !0)
-          ], 8, xa)) : f("", !0),
-          (u(!0), v(ee, null, te(B.value, (a, o) => (u(), v("linearGradient", {
+          ], 8, Na)) : y("", !0),
+          (u(!0), v(ee, null, te(R.value, (a, o) => (u(), v("linearGradient", {
             x1: "0%",
             y1: "0%",
             x2: "100%",
@@ -777,43 +812,43 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
             n("stop", {
               offset: "0%",
               "stop-color": a.color
-            }, null, 8, wa),
+            }, null, 8, za),
             n("stop", {
               offset: "100%",
-              "stop-color": s(Ie)(s(Zt)(a.color, 0.03), 100 - e.value.style.chart.layout.bars.gradientIntensity)
-            }, null, 8, $a)
-          ], 8, _a))), 256)),
-          t.$slots.pattern ? (u(), v("g", Ca, [
-            (u(!0), v(ee, null, te(B.value, (a) => (u(), v("defs", null, [
-              _(t.$slots, "pattern", ct({ ref_for: !0 }, { seriesIndex: a.absoluteIndex, patternId: `pattern_${S.value}_${a.absoluteIndex}` }), void 0, !0)
+              "stop-color": s(Me)(s(sa)(a.color, 0.03), 100 - e.value.style.chart.layout.bars.gradientIntensity)
+            }, null, 8, Va)
+          ], 8, Aa))), 256)),
+          t.$slots.pattern ? (u(), v("g", Ia, [
+            (u(!0), v(ee, null, te(R.value, (a) => (u(), v("defs", null, [
+              _(t.$slots, "pattern", dt({ ref_for: !0 }, { seriesIndex: a.absoluteIndex, patternId: `pattern_${S.value}_${a.absoluteIndex}` }), void 0, !0)
             ]))), 256))
-          ])) : f("", !0),
-          (u(!0), v(ee, null, te(B.value, (a, o) => (u(), v("g", null, [
+          ])) : y("", !0),
+          (u(!0), v(ee, null, te(R.value, (a, o) => (u(), v("g", null, [
             n("rect", {
-              x: s(L)(R.value ? r.value.left + r.value.width / 2 - (a.sign === 1 ? 0 : T(a.value) <= 0 ? 1e-4 : T(a.value)) : r.value.left),
+              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 + (k.value + p.value) * o,
               width: s(L)(T(a.value) <= 0 ? 1e-4 : T(a.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: U({ animated: e.value.useCssAnimation })
-            }, null, 10, Ta)
+              class: X({ animated: e.value.useCssAnimation })
+            }, null, 10, Oa)
           ]))), 256)),
-          (u(!0), v(ee, null, te(B.value, (a, o) => (u(), v("g", null, [
+          (u(!0), v(ee, null, te(R.value, (a, o) => (u(), v("g", null, [
             n("rect", {
-              x: s(L)(R.value ? r.value.left + r.value.width / 2 - (a.sign === 1 ? 0 : T(a.value) <= 0 ? 1e-4 : T(a.value)) : r.value.left),
+              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 + (k.value + p.value) * o,
               width: s(L)(T(a.value) <= 0 ? 1e-4 : T(a.value)),
               height: p.value <= 0 ? 1e-4 : p.value,
-              fill: e.value.style.chart.layout.bars.useGradient ? `url(#vertical_bar_gradient_${S.value}_${o})` : s(Ie)(a.color, e.value.style.chart.layout.bars.fillOpacity),
+              fill: e.value.style.chart.layout.bars.useGradient ? `url(#vertical_bar_gradient_${S.value}_${o})` : s(Me)(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: U({ animated: e.value.useCssAnimation })
-            }, null, 10, Sa),
+              class: X({ animated: e.value.useCssAnimation })
+            }, null, 10, Fa),
             t.$slots.pattern ? (u(), v("rect", {
               key: 0,
-              x: s(L)(R.value ? r.value.left + r.value.width / 2 - (a.sign === 1 ? 0 : T(a.value) <= 0 ? 1e-4 : T(a.value)) : r.value.left),
+              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 + (k.value + p.value) * o,
               width: s(L)(T(a.value) <= 0 ? 1e-4 : T(a.value)),
               height: p.value <= 0 ? 1e-4 : p.value,
@@ -821,9 +856,9 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
               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: U({ animated: e.value.useCssAnimation })
-            }, null, 10, La)) : f("", !0),
-            (!a.isChild || a.isLastChild) && e.value.style.chart.layout.separators.show && o !== B.value.length - 1 ? (u(), v("line", {
+              class: X({ animated: e.value.useCssAnimation })
+            }, null, 10, Ma)) : y("", !0),
+            (!a.isChild || a.isLastChild) && e.value.style.chart.layout.separators.show && o !== R.value.length - 1 ? (u(), v("line", {
               key: 1,
               x1: N.value.x,
               x2: e.value.style.chart.layout.separators.fullWidth ? N.value.width - Math.abs(N.value.x) : r.value.left,
@@ -833,8 +868,8 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
               "stroke-width": e.value.style.chart.layout.separators.strokeWidth,
               "stroke-linecap": "round",
               style: { transition: "none !important", animation: "none !important" }
-            }, null, 8, Pa)) : f("", !0),
-            R.value && e.value.style.chart.layout.separators.show ? (u(), v("line", {
+            }, null, 8, Ba)) : y("", !0),
+            E.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,
@@ -843,16 +878,16 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
               stroke: e.value.style.chart.layout.separators.color,
               "stroke-width": e.value.style.chart.layout.separators.strokeWidth,
               "stroke-linecap": "round"
-            }, null, 8, Na)) : f("", !0),
-            n("g", Aa, [
+            }, null, 8, Da)) : y("", !0),
+            n("g", Ra, [
               n("text", {
-                x: R.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) : Vt(a.value) + 3 + e.value.style.chart.layout.bars.dataLabels.offsetX,
+                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) : It(a.value) + 3 + e.value.style.chart.layout.bars.dataLabels.offsetX,
                 y: r.value.top + (k.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",
+                "text-anchor": !E.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"
-              }, h(nt(a.value, a, o, a.sign)), 9, za),
+              }, h(nt(a.value, a, o, a.sign)), 9, Ea),
               (a.isChild || !a.hasChildren) && e.value.style.chart.layout.bars.nameLabels.show ? (u(), v("text", {
                 key: 0,
                 "text-anchor": "end",
@@ -861,9 +896,9 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
                 "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"
-              }, h(a.name), 9, Va)) : f("", !0)
+              }, h(a.name), 9, Ua)) : y("", !0)
             ]),
-            n("g", Oa, [
+            n("g", Xa, [
               a.isChild && a.childIndex === 0 && e.value.style.chart.layout.bars.parentLabels.show ? (u(), v("text", {
                 key: 0,
                 x: e.value.autoSize ? void 0 : N.value.x + e.value.style.chart.layout.bars.parentLabels.offsetX,
@@ -872,7 +907,7 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
                 fill: e.value.style.chart.layout.bars.parentLabels.color,
                 "font-weight": e.value.style.chart.layout.bars.parentLabels.bold ? "bold" : "normal",
                 "text-anchor": "start"
-              }, h(ne(a, o).name), 9, Fa)) : f("", !0),
+              }, h(ne(a, o).name), 9, Wa)) : y("", !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 : N.value.x + e.value.style.chart.layout.bars.parentLabels.offsetX,
@@ -881,51 +916,51 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
                 fill: e.value.style.chart.layout.bars.parentLabels.color,
                 "font-weight": e.value.style.chart.layout.bars.dataLabels.bold ? "bold" : "normal",
                 "text-anchor": "start"
-              }, h(nt(ne(a, o).value), ne(a, o), o, a.parentSign || a.sign), 9, Ia)) : f("", !0)
+              }, h(nt(ne(a, o).value), ne(a, o), o, a.parentSign || a.sign), 9, Ga)) : y("", !0)
             ]),
             n("rect", {
               x: N.value.x,
               y: r.value.top + (k.value + p.value) * o - k.value / 2,
               width: N.value.width,
               height: p.value + k.value <= 0 ? 1e-4 : p.value + k.value,
-              fill: Te.value === a.id ? s(Ie)(e.value.style.chart.layout.highlighter.color, e.value.style.chart.layout.highlighter.opacity) : "transparent",
-              onMouseenter: (g) => Mt(a, o),
-              onMouseleave: (g) => It({ datapoint: a, seriesIndex: o }),
-              onClick: (g) => Ft({ datapoint: a, seriesIndex: o })
-            }, null, 40, Ma)
+              fill: Se.value === a.id ? s(Me)(e.value.style.chart.layout.highlighter.color, e.value.style.chart.layout.highlighter.opacity) : "transparent",
+              onMouseenter: (f) => Bt(a, o),
+              onMouseleave: (f) => Mt({ datapoint: a, seriesIndex: o }),
+              onClick: (f) => Ft({ datapoint: a, seriesIndex: o })
+            }, null, 40, Ha)
           ]))), 256)),
           _(t.$slots, "svg", { svg: N.value }, void 0, !0)
         ], 512)
-      ], 14, ka)),
-      t.$slots.watermark ? (u(), v("div", Da, [
+      ], 14, Pa)),
+      t.$slots.watermark ? (u(), v("div", ja, [
         _(t.$slots, "watermark", Q(Z({ isPrinting: s(je) || s(qe) })), void 0, !0)
-      ])) : f("", !0),
+      ])) : y("", !0),
       e.value.style.chart.legend.show && e.value.style.chart.legend.position === "bottom" ? (u(), v("div", {
         key: 6,
         ref_key: "chartLegend",
         ref: be
       }, [
-        (u(), X(pt, {
+        (u(), W(gt, {
           key: `legend_bottom_${me.value}`,
           legendSet: I.value,
           config: at.value,
           onClickMarker: l[1] || (l[1] = ({ legend: a }) => oe(a.id))
-        }, he({
+        }, pe({
           item: m(({ legend: a, index: o }) => [
             n("div", {
-              onClick: (g) => oe(a.id),
+              onClick: (f) => oe(a.id),
               style: d(`opacity:${A.value.includes(a.id) ? 0.5 : 1}`)
-            }, h(a.name) + ": " + h(s(pe)(
+            }, h(a.name) + ": " + h(s(se)(
               e.value.style.chart.layout.bars.dataLabels.value.formatter,
               a.value,
-              s(G)({
+              s(B)({
                 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, Ba)
+            )), 13, qa)
           ]),
           _: 2
         }, [
@@ -943,18 +978,18 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
             key: "0"
           } : void 0
         ]), 1032, ["legendSet", "config"]))
-      ], 512)) : f("", !0),
+      ], 512)) : y("", !0),
       _(t.$slots, "legend", { legend: I.value }, void 0, !0),
       t.$slots.source ? (u(), v("div", {
         key: 7,
         ref_key: "source",
-        ref: Re,
+        ref: Ee,
         dir: "auto"
       }, [
         _(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : f("", !0),
-      J(s(mt), {
-        show: $.value.showTooltip && ge.value && A.value.length < b.dataset.length,
+      ], 512)) : y("", !0),
+      J(s(kt), {
+        show: $.value.showTooltip && fe.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,
@@ -966,7 +1001,7 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
         offsetY: e.value.style.chart.tooltip.offsetY,
         parent: P.value,
         content: ye.value,
-        isFullscreen: E.value,
+        isFullscreen: U.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,
@@ -974,18 +1009,18 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
         smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold
       }, {
         "tooltip-before": m(() => [
-          _(t.$slots, "tooltip-before", Q(Z({ ...Se.value })), void 0, !0)
+          _(t.$slots, "tooltip-before", Q(Z({ ...Le.value })), void 0, !0)
         ]),
         "tooltip-after": m(() => [
-          _(t.$slots, "tooltip-after", Q(Z({ ...Se.value })), void 0, !0)
+          _(t.$slots, "tooltip-after", Q(Z({ ...Le.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
-      fe.value && e.value.userOptions.buttons.table ? (u(), X(Ht(ce.value.component), ct({ key: 8 }, ce.value.props, {
+      ge.value && e.value.userOptions.buttons.table ? (u(), W(ea(de.value.component), dt({ key: 8 }, de.value.props, {
         ref_key: "tableUnit",
         ref: le,
-        onClose: Ne
-      }), he({
+        onClose: Ae
+      }), pe({
         content: m(() => [
           n("div", {
             ref_key: "tableContainer",
@@ -993,16 +1028,16 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
             class: "vue-ui-vertical-bar-table atom-data-table",
             style: d(`${e.value.table.useDialog ? "" : "max-height: 300px; margin-top: 24px"}`)
           }, [
-            n("div", Ra, [
-              e.value.table.useDialog ? f("", !0) : (u(), v("div", {
+            n("div", Ya, [
+              e.value.table.useDialog ? y("", !0) : (u(), v("div", {
                 key: 0,
                 role: "button",
                 tabindex: "0",
                 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: Ne,
-                onKeypress: jt(Ne, ["enter"])
+                onClick: Ae,
+                onKeypress: ta(Ae, ["enter"])
               }, [
-                J(s(Me), {
+                J(s(Be), {
                   name: "close",
                   stroke: e.value.table.th.color,
                   "stroke-width": 2
@@ -1010,16 +1045,16 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
               ], 36)),
               n("div", {
                 style: { width: "100%", "container-type": "inline-size" },
-                class: U({ "vue-ui-responsive": s(Et) })
+                class: X({ "vue-ui-responsive": s(Ut) })
               }, [
-                n("table", Ea, [
-                  e.value.table.useDialog ? f("", !0) : (u(), v("caption", {
+                n("table", Ka, [
+                  e.value.table.useDialog ? y("", !0) : (u(), v("caption", {
                     key: 0,
                     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"
                   }, [
-                    dt(h(e.value.style.chart.title.text) + " ", 1),
-                    e.value.style.chart.title.subtitle.text ? (u(), v("span", Ua, h(e.value.style.chart.title.subtitle.text), 1)) : f("", !0)
+                    ht(h(e.value.style.chart.title.text) + " ", 1),
+                    e.value.style.chart.title.subtitle.text ? (u(), v("span", Ja, h(e.value.style.chart.title.subtitle.text), 1)) : y("", !0)
                   ], 4)),
                   n("thead", null, [
                     n("tr", {
@@ -1029,7 +1064,7 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
                       (u(!0), v(ee, null, te(z.value.head, (a) => (u(), v("th", {
                         style: d(`outline:${e.value.table.th.outline}`)
                       }, [
-                        n("div", Xa, h(a), 1)
+                        n("div", Qa, h(a), 1)
                       ], 4))), 256))
                     ], 4),
                     n("tr", null, [
@@ -1058,7 +1093,7 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
                   ]),
                   n("tbody", null, [
                     (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 }),
+                      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: d(`background:${e.value.table.td.backgroundColor};color:${e.value.table.td.color}`)
                     }, [
                       n("td", {
@@ -1066,56 +1101,56 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
                         style: d(`outline:${e.value.table.td.outline};font-variant-numeric: tabular-nums;`),
                         "data-cell": z.value.head[0] ?? ""
                       }, [
-                        n("div", Ga, [
+                        n("div", el, [
                           a.color ? (u(), v("span", {
                             key: 0,
                             style: d(`color:${a.color};margin-right:3px`)
-                          }, "⬤", 4)) : f("", !0),
+                          }, "⬤", 4)) : y("", !0),
                           n("span", null, h(a.parentName), 1)
                         ])
-                      ], 12, Wa),
+                      ], 12, Za),
                       n("td", {
                         class: "vue-ui-data-table__tbody__td",
                         style: d(`outline:${e.value.table.td.outline}`),
                         "data-cell": z.value.head[1] ?? ""
                       }, [
-                        n("div", ja, 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, Ha),
+                        n("div", al, 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, tl),
                       n("td", {
                         class: "vue-ui-data-table__tbody__td",
                         style: d(`outline:${e.value.table.td.outline}`),
                         "data-cell": z.value.head[2] ?? ""
                       }, [
-                        n("div", Ya, h(["", NaN, void 0].includes(a.percentageToTotal) ? "" : `${(a.percentageToTotal * 100).toFixed(e.value.table.td.roundingPercentage)}%`), 1)
-                      ], 12, qa),
+                        n("div", ol, h(["", NaN, void 0].includes(a.percentageToTotal) ? "" : `${(a.percentageToTotal * 100).toFixed(e.value.table.td.roundingPercentage)}%`), 1)
+                      ], 12, ll),
                       n("td", {
                         class: "vue-ui-data-table__tbody__td",
                         style: d(`outline:${e.value.table.td.outline}`),
                         "data-cell": z.value.head[3] ?? ""
                       }, [
-                        n("div", Ja, h(a.childName), 1)
-                      ], 12, Ka),
+                        n("div", ul, h(a.childName), 1)
+                      ], 12, nl),
                       n("td", {
                         class: "vue-ui-data-table__tbody__td",
                         style: d(`outline:${e.value.table.td.outline}`),
                         "data-cell": z.value.head[4] ?? ""
                       }, [
-                        n("div", Za, 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, Qa),
+                        n("div", rl, 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, sl),
                       n("td", {
                         class: "vue-ui-data-table__tbody__td",
                         style: d(`outline:${e.value.table.td.outline}`),
                         "data-cell": z.value.head[5] ?? ""
                       }, [
-                        n("div", tl, h(["", NaN, void 0].includes(a.childPercentageToParent) ? "" : `${(a.childPercentageToParent * 100).toFixed(e.value.table.td.roundingPercentage)}%`), 1)
-                      ], 12, el),
+                        n("div", vl, h(["", NaN, void 0].includes(a.childPercentageToParent) ? "" : `${(a.childPercentageToParent * 100).toFixed(e.value.table.td.roundingPercentage)}%`), 1)
+                      ], 12, il),
                       n("td", {
                         class: "vue-ui-data-table__tbody__td",
                         style: d(`outline:${e.value.table.td.outline}`),
                         "data-cell": z.value.head[6] ?? ""
                       }, [
-                        n("div", ll, h(["", NaN, void 0].includes(a.childPercentageToTotal) ? "" : `${(a.childPercentageToTotal * 100).toFixed(e.value.table.td.roundingPercentage)}%`), 1)
-                      ], 12, al)
+                        n("div", dl, h(["", NaN, void 0].includes(a.childPercentageToTotal) ? "" : `${(a.childPercentageToTotal * 100).toFixed(e.value.table.td.roundingPercentage)}%`), 1)
+                      ], 12, cl)
                     ], 6))), 256))
                   ])
                 ])
@@ -1128,7 +1163,7 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
         e.value.table.useDialog ? {
           name: "title",
           fn: m(() => [
-            dt(h(ce.value.title), 1)
+            ht(h(de.value.title), 1)
           ]),
           key: "0"
         } : void 0,
@@ -1138,21 +1173,21 @@ const ba = ["id"], ma = ["onClick"], ka = ["xmlns", "viewBox"], xa = ["x", "widt
             n("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
-              onClick: l[2] || (l[2] = (a) => Le(e.value.userOptions.callbacks.csv))
+              onClick: l[2] || (l[2] = (a) => Pe(e.value.userOptions.callbacks.csv))
             }, [
-              J(s(Me), {
+              J(s(Be), {
                 name: "excel",
-                stroke: ce.value.props.color
+                stroke: de.value.props.color
               }, null, 8, ["stroke"])
             ])
           ]),
           key: "1"
         } : void 0
-      ]), 1040)) : f("", !0),
-      s(Xe) ? (u(), X(ra, { key: 9 })) : f("", !0)
-    ], 46, ba));
+      ]), 1040)) : y("", !0),
+      s(We) ? (u(), W(fa, { key: 9 })) : y("", !0)
+    ], 46, Sa));
   }
-}, xl = /* @__PURE__ */ ya(ol, [["__scopeId", "data-v-d553ecc0"]]);
+}, Al = /* @__PURE__ */ Ta(hl, [["__scopeId", "data-v-1ea4e17d"]]);
 export {
-  xl as default
+  Al as default
 };