vue-data-ui 2.6.44-beta.0 → 2.6.44

package/dist/{vue-ui-treemap-BHdWvB2b.js → vue-ui-treemap-Js5dG3BL.js}

@@ -1,19 +1,20 @@
-import { useSlots as it, onMounted as He, computed as C, ref as g, watch as ct, onBeforeUnmount as dt, createElementBlock as b, openBlock as v, unref as y, normalizeStyle as L, normalizeClass as We, createBlock as G, createCommentVNode as _, createElementVNode as O, createVNode as Ee, createSlots as vt, withCtx as T, renderSlot as $, normalizeProps as q, guardReactiveProps as X, Fragment as pe, renderList as fe, mergeProps as Ge, createTextVNode as ue, toDisplayString as j, withModifiers as ht, nextTick as pt } from "vue";
-import { u as ft, c as qe, t as gt, p as S, a as yt, b as mt, o as bt, e as kt, d as ie, i as ce, f as le, X as wt, l as Xe, G as je, x as Ye, q as Ct, r as $t, y as Tt } from "./index-BjeHPQB2.js";
-import { _ as xt } from "./Title-CuyN78xN.js";
-import { u as _t, U as Ot } from "./usePrinter-BDx4dDHp.js";
-import { _ as St } from "./Tooltip-CoZJLSUy.js";
-import { L as Nt } from "./Legend-Bns8n5XI.js";
-import At from "./vue-ui-skeleton-Db5GDVLW.js";
-import { D as It } from "./DataTable-DpYrmdKR.js";
-import Pt from "./vue-ui-accordion-CrDhNoyv.js";
+import { useSlots as it, onMounted as We, computed as C, ref as g, watch as ct, onBeforeUnmount as dt, createElementBlock as m, openBlock as v, unref as y, normalizeStyle as L, normalizeClass as Ee, createBlock as G, createCommentVNode as _, createElementVNode as O, createVNode as fe, createSlots as vt, withCtx as x, renderSlot as $, normalizeProps as q, guardReactiveProps as X, Fragment as ue, renderList as ge, mergeProps as Ge, createTextVNode as ie, toDisplayString as j, withModifiers as ht, nextTick as pt } from "vue";
+import { u as ft, c as qe, t as gt, p as S, a as yt, b as mt, o as bt, e as kt, d as ce, i as de, f as le, X as wt, l as Xe, G as je, x as Ye, q as Ct, r as $t, y as xt } from "./index-DQCJDAtd.js";
+import { _ as Tt } from "./Title-CUTRN3ig.js";
+import { u as _t, U as Ot } from "./usePrinter-FM1PheWO.js";
+import { _ as St } from "./Tooltip-BvEZcxbc.js";
+import { L as Nt } from "./Legend-CNvH8CO_.js";
+import It from "./vue-ui-skeleton-BTfzoolB.js";
+import { D as At } from "./DataTable-CMtUsL3k.js";
+import Pt from "./vue-ui-accordion-BckkmphN.js";
 import { t as zt, u as Ft } from "./useResponsive-vZgZwV-S.js";
-import { u as Ze } from "./useNestedProp-jWaei8o8.js";
-import { _ as Rt } from "./PackageVersion-C-jBIpMs.js";
-import { P as Lt } from "./PenAndPaper-B1x7gtt0.js";
+import { u as Ze } from "./useNestedProp-WD6Qn-jr.js";
+import { _ as Rt } from "./PackageVersion-DpTw0H2K.js";
+import { P as Lt } from "./PenAndPaper-CdyjU7Bn.js";
 import { u as Dt } from "./useUserOptionState-BIvW1Kz7.js";
 import { u as Mt } from "./useChartAccessibility-BWojgys7.js";
-import { _ as Vt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import Vt from "./BaseIcon-BkG8oy7S.js";
+import { _ as Bt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 function Je(n, u) {
   const r = n.length;
   if (r === 0)
@@ -50,7 +51,7 @@ function Ut(n, u, r) {
     return s >= c;
   }
 }
-function Bt(n) {
+function Ht(n) {
   const u = [], r = n.length;
   for (let i = 0; i < r; i += 1) {
     const s = n[i], c = s.length;
@@ -59,50 +60,50 @@ function Bt(n) {
   }
   return u;
 }
-function Ht(n, u) {
+function Wt(n, u) {
   const r = {
     ...u,
     children: n
   };
   return et(r);
 }
-function Wt(n) {
+function Et(n) {
   return (n.x1 - n.x0) * (n.y1 - n.y0);
 }
 function Qe(n, u) {
-  const { width: r, height: i, xOffset: s, yOffset: c } = ge(u), d = n.length, h = n.map((k) => k.normalizedValue || 0).reduce((k, m) => k + m, 0), p = h / i, I = h / r;
+  const { width: r, height: i, xOffset: s, yOffset: c } = ye(u), d = n.length, h = n.map((k) => k.normalizedValue || 0).reduce((k, b) => k + b, 0), p = h / i, A = h / r;
   let N = s, P = c;
   const w = [];
   if (r >= i) {
     for (let k = 0; k < d; k += 1) {
-      const m = n[k], x = P + m.normalizedValue / p, M = {
+      const b = n[k], T = P + b.normalizedValue / p, M = {
         x0: N,
         y0: P,
         x1: N + p,
-        y1: x
-      }, z = Object.assign({}, m, M);
-      P = x, w.push(z);
+        y1: T
+      }, z = Object.assign({}, b, M);
+      P = T, w.push(z);
     }
     return w;
   } else {
     for (let k = 0; k < d; k += 1) {
-      const m = n[k], x = N + m.normalizedValue / I, M = {
+      const b = n[k], T = N + b.normalizedValue / A, M = {
         x0: N,
         y0: P,
-        x1: x,
-        y1: P + I
-      }, z = Object.assign({}, m, M);
-      N = x, w.push(z);
+        x1: T,
+        y1: P + A
+      }, z = Object.assign({}, b, M);
+      N = T, w.push(z);
     }
     return w;
   }
 }
-function Et(n) {
-  const u = ge(n), r = u.width, i = u.height;
+function Gt(n) {
+  const u = ye(n), r = u.width, i = u.height;
   return Math.min(r, i);
 }
-function Gt(n, u) {
-  const r = n.length, i = n.map((p) => p.value ?? 0).reduce((p, I) => p + I, 0), s = u / i, c = [];
+function qt(n, u) {
+  const r = n.length, i = n.map((p) => p.value ?? 0).reduce((p, A) => p + A, 0), s = u / i, c = [];
   let d, h;
   for (let p = 0; p < r; p += 1)
     h = n[p], d = Object.assign({}, h, {
@@ -110,7 +111,7 @@ function Gt(n, u) {
     }), c.push(d);
   return c;
 }
-function ge(n) {
+function ye(n) {
   const { x0: u, y0: r, x1: i, y1: s } = n;
   return {
     xOffset: u,
@@ -119,7 +120,7 @@ function ge(n) {
     height: s - r
   };
 }
-function qt(n, u, r, i) {
+function Xt(n, u, r, i) {
   let s = n, c = u, d = r, h = i;
   for (; ; ) {
     const p = s.length;
@@ -127,8 +128,8 @@ function qt(n, u, r, i) {
       const w = Qe(c, d);
       return h.concat(w);
     }
-    const I = Et(d), N = s[0], P = s.slice(1, p);
-    if (Ut(c, N, I)) {
+    const A = Gt(d), N = s[0], P = s.slice(1, p);
+    if (Ut(c, N, A)) {
       const w = c.concat(N);
       s = P, c = w, d = d, h = h;
     } else {
@@ -136,8 +137,8 @@ function qt(n, u, r, i) {
       let k = 0;
       for (let z = 0; z < w; z += 1)
         k += c[z].normalizedValue;
-      const m = Xt(d, k), x = Qe(c, d), M = h.concat(x);
-      s = s, c = [], d = m, h = M;
+      const b = jt(d, k), T = Qe(c, d), M = h.concat(T);
+      s = s, c = [], d = b, h = M;
     }
   }
 }
@@ -145,17 +146,17 @@ function et(n) {
   if (typeof n.children > "u" || !n.children.length)
     return [n];
   {
-    const u = Gt(
+    const u = qt(
       n.children,
-      Wt(n)
-    ), r = qt(u, [], n, []), i = r.length, s = [];
+      Et(n)
+    ), r = Xt(u, [], n, []), i = r.length, s = [];
     for (let d = 0; d < i; d += 1)
       s.push(et(r[d]));
-    return Bt(s);
+    return Ht(s);
   }
 }
-function Xt(n, u) {
-  const { width: r, height: i, xOffset: s, yOffset: c } = ge(n);
+function jt(n, u) {
+  const { width: r, height: i, xOffset: s, yOffset: c } = ye(n);
   if (r >= i) {
     const d = u / i, h = r - d, p = {
       xOffset: s + d,
@@ -174,20 +175,23 @@ function Xt(n, u) {
     return Ke(p);
   }
 }
-const jt = ["id"], Yt = {
+const Yt = ["id"], Zt = {
   key: 4,
   class: "vue-ui-treemap-breadcrumbs",
   "data-html2canvas-ignore": ""
-}, Zt = ["onClick", "data-last-crumb"], Jt = { class: "vue-ui-treemap-crumb-unit" }, Kt = { class: "vue-ui-treemap-crumb-unit-label" }, Qt = {
+}, Jt = ["onClick", "data-last-crumb"], Kt = { class: "vue-ui-treemap-crumb-unit" }, Qt = { class: "vue-ui-treemap-crumb-unit-label" }, el = {
+  key: 0,
+  style: { width: "24px", display: "flex", "align-items": "center" }
+}, tl = {
   key: 0,
   class: "vue-ui-treemap-crumb-unit-arrow"
-}, el = ["xmlns", "viewBox"], tl = { key: 0 }, ll = ["id"], ol = ["stop-color"], al = ["stop-color"], nl = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width", "onClick", "onMouseenter"], sl = ["x", "y", "height", "width"], rl = {
+}, ll = ["xmlns", "viewBox"], ol = { key: 0 }, al = ["id"], nl = ["stop-color"], sl = ["stop-color"], rl = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width", "onClick", "onMouseenter"], ul = ["x", "y", "height", "width"], il = {
   style: { width: "100%", height: "100%" },
   class: "vue-ui-treemap-cell"
-}, ul = {
+}, cl = {
   key: 6,
   class: "vue-data-ui-watermark"
-}, il = ["onClick"], cl = { key: 0 }, dl = { key: 1 }, vl = ["innerHTML"], hl = {
+}, dl = ["onClick"], vl = { key: 0 }, hl = { key: 1 }, pl = ["innerHTML"], fl = {
   __name: "vue-ui-treemap",
   props: {
     config: {
@@ -206,14 +210,14 @@ const jt = ["id"], Yt = {
   emits: ["selectLegend", "selectDatapoint"],
   setup(n, { expose: u, emit: r }) {
     const { vue_ui_treemap: i } = ft(), s = n, c = r, d = it();
-    He(() => {
+    We(() => {
       d["chart-background"] && console.warn("VueUiTreemap does not support the #chart-background slot.");
     });
-    const h = C(() => !!s.dataset && s.dataset.length), p = C(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent)), I = g(qe()), N = g(!1), P = g(""), w = g(!1), k = g(0), m = g([]), x = g(null), M = g(null), z = g(null), ye = g(null), me = g(null), be = g(0), ke = g(0), we = g(0), e = C({
-      get: () => xe(),
+    const h = C(() => !!s.dataset && s.dataset.length), p = C(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent)), A = g(qe()), N = g(!1), P = g(""), w = g(!1), k = g(0), b = g([]), T = g(null), M = g(null), z = g(null), me = g(null), be = g(null), ke = g(0), we = g(0), Ce = g(0), e = C({
+      get: () => _e(),
       set: (t) => t
-    }), { userOptionsVisible: de, setUserOptionsVisibility: Ce, keepUserOptionState: $e } = Dt({ config: e.value }), { svgRef: Te } = Mt({ config: e.value.style.chart.title });
-    function xe() {
+    }), { userOptionsVisible: ve, setUserOptionsVisibility: $e, keepUserOptionState: xe } = Dt({ config: e.value }), { svgRef: Te } = Mt({ config: e.value.style.chart.title });
+    function _e() {
       const t = Ze({
         userConfig: s.config,
         defaultConfig: i
@@ -227,10 +231,10 @@ const jt = ["id"], Yt = {
       } : t;
     }
     ct(() => s.config, (t) => {
-      e.value = xe(), de.value = !e.value.userOptions.showOnChartHover, be.value += 1, ke.value += 1, we.value += 1, F.value.showTable = e.value.table.show, F.value.showTooltip = e.value.style.chart.tooltip.show;
+      e.value = _e(), ve.value = !e.value.userOptions.showOnChartHover, ke.value += 1, we.value += 1, Ce.value += 1, F.value.showTable = e.value.table.show, F.value.showTooltip = e.value.style.chart.tooltip.show;
     }, { deep: !0 });
-    const { isPrinting: _e, isImaging: Oe, generatePdf: Se, generateImage: Ne } = _t({
-      elementId: `treemap_${I.value}`,
+    const { isPrinting: Oe, isImaging: Se, generatePdf: Ne, generateImage: Ie } = _t({
+      elementId: `treemap_${A.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-treemap",
       options: e.value.userOptions.print
     }), tt = C(() => e.value.userOptions.show && !e.value.style.chart.title.text), oe = C(() => mt(e.value.customPalette)), F = g({
@@ -251,42 +255,42 @@ const jt = ["id"], Yt = {
     }));
     function Ae(t) {
       t.forEach((o, l) => {
-        o.id = qe(), o.color = ie(o.color) || oe.value[l] || S[l] || S[l % S.length], o.children && (o.children.forEach((a) => {
+        o.id = qe(), o.color = ce(o.color) || oe.value[l] || S[l] || S[l % S.length], o.children && (o.children.forEach((a) => {
           a.parentId = o.id, a.color = o.color;
         }), Ae(o.children));
       });
     }
-    const U = g(s.dataset), ae = g(null);
-    He(() => {
+    const B = g(s.dataset), ae = g(null);
+    We(() => {
       lt();
     });
     function lt() {
       if (bt(s.dataset) && kt({
         componentName: "VueUiTreemap",
         type: "dataset"
-      }), Ae(U.value), e.value.responsive) {
+      }), Ae(B.value), e.value.responsive) {
         const t = zt(() => {
           const { width: o, height: l } = Ft({
-            chart: x.value,
+            chart: T.value,
             title: e.value.style.chart.title.text ? M.value : null,
             legend: e.value.style.chart.legend.show ? z.value : null,
-            source: ye.value,
-            noTitle: me.value
+            source: me.value,
+            noTitle: be.value
           });
           requestAnimationFrame(() => {
             V.value.width = o, V.value.height = l;
           });
         });
-        ae.value = new ResizeObserver(t), ae.value.observe(x.value.parentNode);
+        ae.value = new ResizeObserver(t), ae.value.observe(T.value.parentNode);
       }
     }
     dt(() => {
       ae.value && ae.value.disconnect();
     });
-    const Y = g(U.value), Q = C(() => Y.value.map((t, o) => ({
+    const Y = g(B.value), Q = C(() => Y.value.map((t, o) => ({
       ...t,
-      color: ie(t.color) || oe.value[o] || S[o] || S[o % S.length]
-    })).filter((t) => !m.value.includes(t.id))), Z = C(() => U.value.filter((t) => !m.value.includes(t.id)).map((t) => t.value || 0).reduce((t, o) => t + o, 0)), Ie = C({
+      color: ce(t.color) || oe.value[o] || S[o] || S[o % S.length]
+    })).filter((t) => !b.value.includes(t.id))), Z = C(() => B.value.filter((t) => !b.value.includes(t.id)).map((t) => t.value || 0).reduce((t, o) => t + o, 0)), Pe = C({
       get() {
         let t = [...Q.value];
         return e.value.style.chart.layout.sorted && (t = [...Q.value].sort((o, l) => l.value - o.value)), t.map((o) => ({
@@ -297,42 +301,42 @@ const jt = ["id"], Yt = {
         return t;
       }
     });
-    function Pe(t, o) {
+    function ze(t, o) {
       return t.value / o;
     }
     function ot(t, o, l) {
-      const a = e.value.style.chart.layout.rects.colorRatio - Pe(o, l);
+      const a = e.value.style.chart.layout.rects.colorRatio - ze(o, l);
       return Xe(t, a < 0 ? 0 : a);
     }
-    function ze(t, o, l, a) {
-      return t.map((f, B) => {
-        const re = ot(ie(o) || oe.value[B] || S[B] || S[B % S.length], f, a), ut = Pe(f, a);
+    function Fe(t, o, l, a) {
+      return t.map((f, U) => {
+        const re = ot(ce(o) || oe.value[U] || S[U] || S[U % S.length], f, a), ut = ze(f, a);
         return {
           ...f,
           color: re,
           proportion: ut,
           parentName: l,
-          children: f.children ? ze(f.children, re, f.name, a) : void 0
+          children: f.children ? Fe(f.children, re, f.name, a) : void 0
         };
       });
     }
-    const ee = C(() => Ht(
-      Ie.value.map((t, o) => {
+    const ee = C(() => Wt(
+      Pe.value.map((t, o) => {
         const l = t.children ? t.children.reduce((a, f) => a + f.value, 0) : t.value;
         return {
           value: t.value,
           id: t.id,
-          children: t.children ? ze(t.children.sort((a, f) => f.value - a.value), t.color, t.name, l) : void 0,
+          children: t.children ? Fe(t.children.sort((a, f) => f.value - a.value), t.color, t.name, l) : void 0,
           color: t.color,
           name: t.name
         };
       }),
       { x0: H.value.left * 2, y0: H.value.top, x1: H.value.width, y1: H.value.height }
     ));
-    function Fe({ y0: t, y1: o }) {
+    function Re({ y0: t, y1: o }) {
       return o - t <= 0 ? 1e-4 : o - t;
     }
-    function Re({ x0: t, x1: o }) {
+    function Le({ x0: t, x1: o }) {
       return o - t <= 0 ? 1e-4 : o - t;
     }
     function W(t) {
@@ -348,7 +352,7 @@ const jt = ["id"], Yt = {
       width: H.value.vbWidth,
       height: H.value.vbHeight
     }));
-    function K(t, o = U.value) {
+    function K(t, o = B.value) {
       for (const l of o) {
         if (l.id === t)
           return l;
@@ -360,36 +364,36 @@ const jt = ["id"], Yt = {
       }
       return null;
     }
-    const A = g([]), E = C(() => A.value.length > 0);
-    function Le(t) {
+    const I = g([]), E = C(() => I.value.length > 0);
+    function De(t) {
       var l;
       if (!t) {
-        Y.value = U.value.slice(), c("selectDatapoint", void 0), A.value = [];
+        Y.value = B.value.slice(), c("selectDatapoint", void 0), I.value = [];
         return;
       }
       const o = K(t.id);
       if (o && ((l = o.children) != null && l.length))
-        A.value.push(o.id), Y.value = o.children.slice(), c("selectDatapoint", t);
+        I.value.push(o.id), Y.value = o.children.slice(), c("selectDatapoint", t);
       else if (t.parentId) {
-        A.value.push(t.parentId);
+        I.value.push(t.parentId);
         const a = K(t.parentId);
         Y.value = a.children.slice(), c("selectDatapoint", t);
-      } else if (A.value.length > 0) {
-        A.value.pop();
-        const a = A.value[A.value.length - 1];
+      } else if (I.value.length > 0) {
+        I.value.pop();
+        const a = I.value[I.value.length - 1];
         if (a) {
           const f = K(a);
           Y.value = f.children.slice();
         } else
-          Y.value = U.value.slice(), A.value = [], c("selectDatapoint", void 0);
+          Y.value = B.value.slice(), I.value = [], c("selectDatapoint", void 0);
       }
     }
     const te = C(() => {
       const t = [
         { id: null, label: "All" }
       ];
-      if (A.value.length > 0) {
-        let o = K(A.value[A.value.length - 1]);
+      if (I.value.length > 0) {
+        let o = K(I.value[I.value.length - 1]);
         const l = [];
         for (; o; )
           l.unshift(o), o = o.parentId ? K(o.parentId) : null;
@@ -401,14 +405,14 @@ const jt = ["id"], Yt = {
           });
       }
       return t;
-    }), R = g(null), De = C(() => U.value.map((t, o) => ({
+    }), R = g(null), Me = C(() => B.value.map((t, o) => ({
       ...t,
-      color: ie(t.color) || oe.value[o] || S[o] || S[o % S.length],
+      color: ce(t.color) || oe.value[o] || S[o] || S[o % S.length],
       shape: "square"
     })).sort((t, o) => o.value - t.value).map((t, o) => ({
       ...t,
-      proportion: t.value / U.value.map((l) => l.value).reduce((l, a) => l + a, 0),
-      opacity: m.value.includes(t.id) ? 0.5 : 1
+      proportion: t.value / B.value.map((l) => l.value).reduce((l, a) => l + a, 0),
+      opacity: b.value.includes(t.id) ? 0.5 : 1
     }))), nt = C(() => ({
       cy: "treemap-div-legend",
       backgroundColor: e.value.style.chart.legend.backgroundColor,
@@ -417,14 +421,14 @@ const jt = ["id"], Yt = {
       paddingBottom: 12,
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
     }));
-    function Me(t) {
-      E.value = !1, R.value = null, m.value.includes(t.id) ? m.value = m.value.filter((o) => o !== t.id) : m.value.length < s.dataset.length - 1 && m.value.push(t.id), c("selectLegend", Ie.value);
+    function Ve(t) {
+      E.value = !1, R.value = null, b.value.includes(t.id) ? b.value = b.value.filter((o) => o !== t.id) : b.value.length < s.dataset.length - 1 && b.value.push(t.id), c("selectLegend", Pe.value);
     }
-    const ve = g(null);
+    const he = g(null);
     function st({ datapoint: t, seriesIndex: o }) {
-      R.value = t, ve.value = { datapoint: t, seriesIndex: o, config: e.value, series: Q.value };
+      R.value = t, he.value = { datapoint: t, seriesIndex: o, config: e.value, series: Q.value };
       const l = e.value.style.chart.tooltip.customFormat;
-      if (Ye(l) && Tt(() => l({
+      if (Ye(l) && xt(() => l({
         seriesIndex: o,
         datapoint: t,
         series: Q.value,
@@ -438,7 +442,7 @@ const jt = ["id"], Yt = {
         });
       else {
         let a = "";
-        a += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`, a += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><rect x="0" y="0" height="12" width="12" stroke="none" fill="${t.color}"/></svg>`, a += `<b>${ce(
+        a += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`, a += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><rect x="0" y="0" height="12" width="12" stroke="none" fill="${t.color}"/></svg>`, a += `<b>${de(
           e.value.style.chart.layout.labels.formatter,
           t.value,
           le({
@@ -459,7 +463,7 @@ const jt = ["id"], Yt = {
       })), o = ee.value.map((l) => l.value);
       return { head: t, body: o };
     });
-    function Ve() {
+    function Be() {
       pt(() => {
         const t = D.value.head.map((a, f) => [[
           a.name
@@ -472,13 +476,13 @@ const jt = ["id"], Yt = {
         e.value.table.columnNames.series,
         e.value.table.columnNames.value,
         e.value.table.columnNames.percentage
-      ], o = D.value.head.map((f, B) => {
-        const re = ce(
+      ], o = D.value.head.map((f, U) => {
+        const re = de(
           e.value.style.chart.layout.labels.formatter,
-          D.value.body[B],
+          D.value.body[U],
           le({
             p: e.value.style.chart.layout.labels.prefix,
-            v: D.value.body[B],
+            v: D.value.body[U],
             s: e.value.style.chart.layout.labels.suffix,
             r: e.value.table.td.roundingValue
           })
@@ -490,8 +494,8 @@ const jt = ["id"], Yt = {
             shape: "square"
           },
           re,
-          isNaN(D.value.body[B] / Z.value) ? "-" : le({
-            v: D.value.body[B] / Z.value * 100,
+          isNaN(D.value.body[U] / Z.value) ? "-" : le({
+            v: D.value.body[U] / Z.value * 100,
             s: "%",
             r: e.value.table.td.roundingPercentage
           })
@@ -525,29 +529,29 @@ const jt = ["id"], Yt = {
     function Ue() {
       F.value.showTable = !F.value.showTable;
     }
-    function Be() {
+    function He() {
       F.value.showTooltip = !F.value.showTooltip;
     }
     const se = g(!1);
-    function he() {
+    function pe() {
       se.value = !se.value;
     }
     return u({
       getData: rt,
-      generateCsv: Ve,
-      generateImage: Ne,
-      generatePdf: Se,
+      generateCsv: Be,
+      generateImage: Ie,
+      generatePdf: Ne,
       toggleTable: Ue,
-      toggleTooltip: Be,
-      toggleAnnotator: he
-    }), (t, o) => (v(), b("div", {
+      toggleTooltip: He,
+      toggleAnnotator: pe
+    }), (t, o) => (v(), m("div", {
       ref_key: "treemapChart",
-      ref: x,
-      class: We(`vue-ui-treemap ${w.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      ref: T,
+      class: Ee(`vue-ui-treemap ${w.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       style: L(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
-      id: `treemap_${I.value}`,
-      onMouseenter: o[3] || (o[3] = () => y(Ce)(!0)),
-      onMouseleave: o[4] || (o[4] = () => y(Ce)(!1))
+      id: `treemap_${A.value}`,
+      onMouseenter: o[3] || (o[3] = () => y($e)(!0)),
+      onMouseleave: o[4] || (o[4] = () => y($e)(!1))
     }, [
       e.value.userOptions.buttons.annotator ? (v(), G(Lt, {
         key: 0,
@@ -555,23 +559,23 @@ const jt = ["id"], Yt = {
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         active: se.value,
-        onClose: he
+        onClose: pe
       }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : _("", !0),
-      tt.value ? (v(), b("div", {
+      tt.value ? (v(), m("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: me,
+        ref: be,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : _("", !0),
-      e.value.style.chart.title.text ? (v(), b("div", {
+      e.value.style.chart.title.text ? (v(), m("div", {
         key: 2,
         ref_key: "chartTitle",
         ref: M,
         style: L(`width:100%;background:${e.value.style.chart.backgroundColor};padding-bottom:6px`)
       }, [
-        (v(), G(xt, {
-          key: `title_${be.value}`,
+        (v(), G(Tt, {
+          key: `title_${ke.value}`,
           config: {
             title: {
               cy: "treemap-div-title",
@@ -584,14 +588,14 @@ const jt = ["id"], Yt = {
           }
         }, null, 8, ["config"]))
       ], 4)) : _("", !0),
-      e.value.userOptions.show && h.value && (y($e) || y(de)) ? (v(), G(Ot, {
+      e.value.userOptions.show && h.value && (y(xe) || y(ve)) ? (v(), G(Ot, {
         ref: "details",
         key: `user_option_${k.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: y(_e),
-        isImaging: y(Oe),
-        uid: I.value,
+        isPrinting: y(Oe),
+        isImaging: y(Se),
+        uid: A.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasXls: e.value.userOptions.buttons.csv,
@@ -601,115 +605,122 @@ const jt = ["id"], Yt = {
         isFullscreen: w.value,
         isTooltip: F.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: x.value,
+        chartElement: T.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
         isAnnotation: se.value,
         onToggleFullscreen: at,
-        onGeneratePdf: y(Se),
-        onGenerateCsv: Ve,
-        onGenerateImage: y(Ne),
+        onGeneratePdf: y(Ne),
+        onGenerateCsv: Be,
+        onGenerateImage: y(Ie),
         onToggleTable: Ue,
-        onToggleTooltip: Be,
-        onToggleAnnotator: he,
+        onToggleTooltip: He,
+        onToggleAnnotator: pe,
         style: L({
-          visibility: y($e) ? y(de) ? "visible" : "hidden" : "visible"
+          visibility: y(xe) ? y(ve) ? "visible" : "hidden" : "visible"
         })
       }, vt({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: T(({ isOpen: l, color: a }) => [
+          fn: x(({ isOpen: l, color: a }) => [
             $(t.$slots, "menuIcon", q(X({ isOpen: l, color: a })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: T(() => [
+          fn: x(() => [
             $(t.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: T(() => [
+          fn: x(() => [
             $(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: T(() => [
+          fn: x(() => [
             $(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: T(() => [
+          fn: x(() => [
             $(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
-          fn: T(() => [
+          fn: x(() => [
             $(t.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: T(({ toggleFullscreen: l, isFullscreen: a }) => [
+          fn: x(({ toggleFullscreen: l, isFullscreen: a }) => [
             $(t.$slots, "optionFullscreen", q(X({ toggleFullscreen: l, isFullscreen: a })), void 0, !0)
           ]),
           key: "6"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: T(({ toggleAnnotator: l, isAnnotator: a }) => [
+          fn: x(({ toggleAnnotator: l, isAnnotator: a }) => [
             $(t.$slots, "optionAnnotator", q(X({ toggleAnnotator: l, isAnnotator: a })), void 0, !0)
           ]),
           key: "7"
         } : void 0
       ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : _("", !0),
-      te.value.length > 1 ? (v(), b("nav", Yt, [
-        (v(!0), b(pe, null, fe(te.value, (l, a) => (v(), b("span", {
+      te.value.length > 1 ? (v(), m("nav", Zt, [
+        (v(!0), m(ue, null, ge(te.value, (l, a) => (v(), m("span", {
           key: l.id || "root",
           onClick: (f) => a === te.value.length - 1 ? () => {
-          } : Le(l.node),
+          } : De(l.node),
           class: "vue-ui-treemap-crumb",
           "data-last-crumb": a === te.value.length - 1,
           style: L({
             color: e.value.style.chart.color
           })
         }, [
-          O("span", Jt, [
-            O("span", Kt, [
-              $(t.$slots, "breadcrumb-label", Ge({ ref_for: !0 }, { crumb: l }), () => [
-                ue(j(l.label), 1)
+          O("span", Kt, [
+            O("span", Qt, [
+              $(t.$slots, "breadcrumb-label", Ge({ ref_for: !0 }, { crumb: l, isRoot: a === 0 }), () => [
+                a === 0 ? (v(), m("div", el, [
+                  fe(Vt, {
+                    name: "home",
+                    stroke: e.value.style.chart.color
+                  }, null, 8, ["stroke"])
+                ])) : (v(), m(ue, { key: 1 }, [
+                  ie(j(l.label), 1)
+                ], 64))
               ], !0)
             ]),
-            a < te.value.length - 1 ? (v(), b("span", Qt, [
+            a < te.value.length - 1 ? (v(), m("span", tl, [
               $(t.$slots, "breadcrumb-arrow", {}, () => [
-                o[5] || (o[5] = ue(" › "))
+                o[5] || (o[5] = ie(" › "))
               ], !0)
             ])) : _("", !0)
           ])
-        ], 12, Zt))), 128))
+        ], 12, Jt))), 128))
       ])) : _("", !0),
-      h.value ? (v(), b("svg", {
+      h.value ? (v(), m("svg", {
         key: 5,
         ref_key: "svgRef",
         ref: Te,
         xmlns: y(wt),
-        class: We({ "vue-data-ui-fullscreen--on": w.value, "vue-data-ui-fulscreen--off": !w.value, "vue-data-ui-zoom-plus": !E.value, "vue-data-ui-zoom-minus": E.value }),
+        class: Ee({ "vue-data-ui-fullscreen--on": w.value, "vue-data-ui-fulscreen--off": !w.value, "vue-data-ui-zoom-plus": !E.value, "vue-data-ui-zoom-minus": E.value }),
         viewBox: `${J.value.startX} ${J.value.startY} ${J.value.width <= 0 ? 10 : J.value.width} ${J.value.height <= 0 ? 10 : J.value.height}`,
         style: L(`max-width:100%; overflow: hidden; background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        Ee(Rt),
-        (v(!0), b(pe, null, fe(ee.value, (l, a) => (v(), b("g", null, [
-          e.value.style.chart.layout.rects.gradient.show ? (v(), b("defs", tl, [
+        fe(Rt),
+        (v(!0), m(ue, null, ge(ee.value, (l, a) => (v(), m("g", null, [
+          e.value.style.chart.layout.rects.gradient.show ? (v(), m("defs", ol, [
             O("radialGradient", {
               id: `tgrad_${l.id}`,
               gradientTransform: "translate(-1, -1.000001) scale(2, 2)"
@@ -717,25 +728,25 @@ const jt = ["id"], Yt = {
               O("stop", {
                 offset: "18%",
                 "stop-color": l.color
-              }, null, 8, ol),
+              }, null, 8, nl),
               O("stop", {
                 offset: "100%",
                 "stop-color": y(Xe)(l.color, e.value.style.chart.layout.rects.gradient.intensity / 100)
-              }, null, 8, al)
-            ], 8, ll)
+              }, null, 8, sl)
+            ], 8, al)
           ])) : _("", !0)
         ]))), 256)),
-        (v(!0), b(pe, null, fe(ee.value, (l, a) => (v(), b("g", null, [
+        (v(!0), m(ue, null, ge(ee.value, (l, a) => (v(), m("g", null, [
           O("rect", {
             x: l.x0,
             y: l.y0,
-            height: Fe(l),
-            width: Re(l),
+            height: Re(l),
+            width: Le(l),
             fill: p.value ? l.color : e.value.style.chart.layout.rects.gradient.show ? `url(#tgrad_${l.id})` : l.color,
             rx: e.value.style.chart.layout.rects.borderRadius,
             stroke: R.value && R.value.id === l.id ? e.value.style.chart.layout.rects.selected.stroke : e.value.style.chart.layout.rects.stroke,
             "stroke-width": R.value && R.value.id === l.id ? e.value.style.chart.layout.rects.selected.strokeWidth : e.value.style.chart.layout.rects.strokeWidth,
-            onClick: ht((f) => Le(l), ["stop"]),
+            onClick: ht((f) => De(l), ["stop"]),
             onMouseenter: () => st({
               datapoint: l,
               seriesIndex: a
@@ -745,16 +756,16 @@ const jt = ["id"], Yt = {
             }),
             style: L(`opacity:${R.value ? R.value.id === l.id ? 1 : e.value.style.chart.layout.rects.selected.unselectedOpacity : 1}`),
             class: "vue-ui-treemap-rect"
-          }, null, 44, nl),
-          (v(), b("foreignObject", {
+          }, null, 44, rl),
+          (v(), m("foreignObject", {
             x: l.x0,
             y: l.y0,
-            height: Fe(l),
-            width: Re(l),
+            height: Re(l),
+            width: Le(l),
             class: "vue-ui-treemap-cell-foreignObject"
           }, [
-            O("div", rl, [
-              e.value.style.chart.layout.labels.showDefaultLabels && (l.proportion > e.value.style.chart.layout.labels.hideUnderProportion || E.value) ? (v(), b("div", {
+            O("div", il, [
+              e.value.style.chart.layout.labels.showDefaultLabels && (l.proportion > e.value.style.chart.layout.labels.hideUnderProportion || E.value) ? (v(), m("div", {
                 key: 0,
                 class: "vue-ui-treemap-cell-default",
                 style: L(`width:calc(100% - ${W(l) / 1.5}px);text-align:left;line-height:${W(l) < 14 ? 14 : W(l)}px;padding:${W(l) / 3}px; color:${y(je)(l.color)}`)
@@ -765,7 +776,7 @@ const jt = ["id"], Yt = {
                 o[6] || (o[6] = O("br", null, null, -1)),
                 O("span", {
                   style: L(`width:100%;font-size:${W(l)}px;`)
-                }, j(y(ce)(
+                }, j(y(de)(
                   e.value.style.chart.layout.labels.formatter,
                   l.value,
                   y(le)({
@@ -785,14 +796,14 @@ const jt = ["id"], Yt = {
                 textColor: y(je)(l.color)
               }), void 0, !0)
             ])
-          ], 8, sl))
+          ], 8, ul))
         ]))), 256)),
         $(t.$slots, "svg", q(X({ svg: H.value, isZoom: E.value, rect: R.value, config: e.value })), void 0, !0)
-      ], 14, el)) : _("", !0),
-      t.$slots.watermark ? (v(), b("div", ul, [
-        $(t.$slots, "watermark", q(X({ isPrinting: y(_e) || y(Oe) })), void 0, !0)
+      ], 14, ll)) : _("", !0),
+      t.$slots.watermark ? (v(), m("div", cl, [
+        $(t.$slots, "watermark", q(X({ isPrinting: y(Oe) || y(Se) })), void 0, !0)
       ])) : _("", !0),
-      h.value ? _("", !0) : (v(), G(At, {
+      h.value ? _("", !0) : (v(), G(It, {
         key: 7,
         config: {
           type: "treemap",
@@ -809,18 +820,18 @@ const jt = ["id"], Yt = {
         ref: z
       }, [
         e.value.style.chart.legend.show ? (v(), G(Nt, {
-          key: `legend_${we.value}`,
-          legendSet: De.value,
+          key: `legend_${Ce.value}`,
+          legendSet: Me.value,
           config: nt.value,
-          id: `treemap_legend_${I.value}`,
-          onClickMarker: o[1] || (o[1] = ({ legend: l }) => Me(l))
+          id: `treemap_legend_${A.value}`,
+          onClickMarker: o[1] || (o[1] = ({ legend: l }) => Ve(l))
         }, {
-          item: T(({ legend: l, index: a }) => [
+          item: x(({ legend: l, index: a }) => [
             O("div", {
-              onClick: (f) => Me(l),
-              style: L(`opacity:${m.value.includes(l.id) ? 0.5 : 1}`)
+              onClick: (f) => Ve(l),
+              style: L(`opacity:${b.value.includes(l.id) ? 0.5 : 1}`)
             }, [
-              ue(j(l.name) + ": " + j(y(ce)(
+              ie(j(l.name) + ": " + j(y(de)(
                 e.value.style.chart.layout.labels.formatter,
                 l.value,
                 y(le)({
@@ -831,24 +842,24 @@ const jt = ["id"], Yt = {
                 }),
                 { datapoint: l }
               )) + " ", 1),
-              m.value.includes(l.id) ? (v(), b("span", dl, " ( - % ) ")) : (v(), b("span", cl, " (" + j(isNaN(l.value / Z.value) ? "-" : (l.value / Z.value * 100).toFixed(e.value.style.chart.legend.roundingPercentage)) + "%) ", 1))
-            ], 12, il)
+              b.value.includes(l.id) ? (v(), m("span", hl, " ( - % ) ")) : (v(), m("span", vl, " (" + j(isNaN(l.value / Z.value) ? "-" : (l.value / Z.value * 100).toFixed(e.value.style.chart.legend.roundingPercentage)) + "%) ", 1))
+            ], 12, dl)
           ]),
           _: 1
         }, 8, ["legendSet", "config", "id"])) : $(t.$slots, "legend", {
           key: 1,
-          legend: De.value
+          legend: Me.value
         }, void 0, !0)
       ], 512),
-      t.$slots.source ? (v(), b("div", {
+      t.$slots.source ? (v(), m("div", {
         key: 8,
         ref_key: "source",
-        ref: ye,
+        ref: me,
         dir: "auto"
       }, [
         $(t.$slots, "source", {}, void 0, !0)
       ], 512)) : _("", !0),
-      Ee(St, {
+      fe(St, {
         show: F.value.showTooltip && N.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
@@ -859,16 +870,16 @@ const jt = ["id"], Yt = {
         backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: x.value,
+        parent: T.value,
         content: P.value,
         isFullscreen: w.value,
         isCustom: y(Ye)(e.value.style.chart.tooltip.customFormat)
       }, {
-        "tooltip-before": T(() => [
-          $(t.$slots, "tooltip-before", q(X({ ...ve.value })), void 0, !0)
+        "tooltip-before": x(() => [
+          $(t.$slots, "tooltip-before", q(X({ ...he.value })), void 0, !0)
         ]),
-        "tooltip-after": T(() => [
-          $(t.$slots, "tooltip-after", q(X({ ...ve.value })), void 0, !0)
+        "tooltip-after": x(() => [
+          $(t.$slots, "tooltip-after", q(X({ ...he.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
@@ -888,9 +899,9 @@ const jt = ["id"], Yt = {
           }
         }
       }, {
-        content: T(() => [
-          (v(), G(It, {
-            key: `table_${ke.value}`,
+        content: x(() => [
+          (v(), G(At, {
+            key: `table_${we.value}`,
             colNames: ne.value.colNames,
             head: ne.value.head,
             body: ne.value.body,
@@ -898,23 +909,23 @@ const jt = ["id"], Yt = {
             title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
             onClose: o[2] || (o[2] = (l) => F.value.showTable = !1)
           }, {
-            th: T(({ th: l }) => [
+            th: x(({ th: l }) => [
               O("div", {
                 innerHTML: l,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, vl)
+              }, null, 8, pl)
             ]),
-            td: T(({ td: l }) => [
-              ue(j(l.name || l), 1)
+            td: x(({ td: l }) => [
+              ie(j(l.name || l), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
       }, 8, ["config"])) : _("", !0)
-    ], 46, jt));
+    ], 46, Yt));
   }
-}, Al = /* @__PURE__ */ Vt(hl, [["__scopeId", "data-v-2bcbaa56"]]);
+}, zl = /* @__PURE__ */ Bt(fl, [["__scopeId", "data-v-a6058301"]]);
 export {
-  Al as default
+  zl as default
 };