vue-data-ui 2.3.74 → 2.3.75

package/dist/{vue-ui-treemap-BCc5sQLB.js → vue-ui-treemap-CoaK3wBl.js}

@@ -1,16 +1,16 @@
-import { computed as C, ref as y, onMounted as He, onBeforeUnmount as Ue, openBlock as m, createElementBlock as k, normalizeClass as xe, normalizeStyle as M, createVNode as re, createCommentVNode as V, createBlock as te, unref as b, createSlots as Ge, withCtx as T, renderSlot as _, normalizeProps as G, guardReactiveProps as X, Fragment as $e, renderList as Te, createElementVNode as O, toDisplayString as q, createTextVNode as _e, nextTick as Xe, pushScopeId as qe, popScopeId as je } from "vue";
-import { u as Ye, c as Oe, t as Ze, a as Je, p as x, b as Ke, o as Qe, e as et, d as le, i as oe, f as Z, X as tt, l as Se, E as Ne, x as ze, y as lt, q as ot, r as at } from "./index-C8SH0f2u.js";
-import { _ as nt } from "./Title-DZjnxQdN.js";
-import { u as st, U as rt } from "./usePrinter-Dj50NAxo.js";
-import { _ as ut } from "./Tooltip--kgFEVZs.js";
-import { L as it } from "./Legend-Cj7T-DqJ.js";
-import ct from "./vue-ui-skeleton-B4eWLjH3.js";
-import { D as dt } from "./DataTable-CKdV-L0e.js";
-import vt from "./vue-ui-accordion-YHleIgkV.js";
-import { t as ht, u as ft } from "./useResponsive-NZB-WLRF.js";
-import { u as Ie } from "./useNestedProp-lS_T5lM3.js";
-import { _ as pt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-function Pe(a, i) {
+import { computed as C, ref as y, watch as qe, onMounted as je, onBeforeUnmount as Ye, openBlock as m, createElementBlock as k, normalizeClass as _e, normalizeStyle as V, createBlock as X, createCommentVNode as B, unref as b, createSlots as Ze, withCtx as T, renderSlot as _, normalizeProps as q, guardReactiveProps as j, Fragment as Oe, renderList as Se, createElementVNode as O, toDisplayString as Y, createTextVNode as Ne, createVNode as Je, nextTick as Ke, pushScopeId as Qe, popScopeId as et } from "vue";
+import { u as tt, c as ze, t as lt, a as ot, p as x, b as at, o as nt, e as st, d as oe, i as ae, f as K, X as rt, l as Ie, E as Pe, x as Fe, y as ut, q as it, r as ct } from "./index-Cm4Iry5c.js";
+import { _ as dt } from "./Title-C26I_HC3.js";
+import { u as vt, U as ht } from "./usePrinter-B8RnF8_q.js";
+import { _ as ft } from "./Tooltip-CH8GmDCG.js";
+import { L as pt } from "./Legend-DX1kv21U.js";
+import gt from "./vue-ui-skeleton-C1oUnz7R.js";
+import { D as yt } from "./DataTable-CQANRZju.js";
+import mt from "./vue-ui-accordion-Cb6XBCbu.js";
+import { t as bt, u as wt } from "./useResponsive-NZB-WLRF.js";
+import { u as Le } from "./useNestedProp-CurQIHTa.js";
+import { _ as Ct } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+function Re(a, i) {
   const s = a.length;
   if (s === 0)
     throw new Error(`Max aspect ratio cannot be computed: ${a} is an empty array`);
@@ -26,7 +26,7 @@ function Pe(a, i) {
     );
   }
 }
-function Fe(a) {
+function De(a) {
   const { xOffset: i, yOffset: s, width: n, height: r } = a;
   return {
     x0: i,
@@ -35,18 +35,18 @@ function Fe(a) {
     y1: s + r
   };
 }
-function gt(a, i, s) {
+function kt(a, i, s) {
   if (a.length === 0)
     return !0;
   {
-    const n = a.concat(i), r = Pe(
+    const n = a.concat(i), r = Re(
       a,
       s
-    ), c = Pe(n, s);
+    ), c = Re(n, s);
     return r >= c;
   }
 }
-function yt(a) {
+function xt(a) {
   const i = [], s = a.length;
   for (let n = 0; n < s; n += 1) {
     const r = a[n], c = r.length;
@@ -55,49 +55,49 @@ function yt(a) {
   }
   return i;
 }
-function mt(a, i) {
+function $t(a, i) {
   const s = {
     ...i,
     children: a
   };
-  return Re(s);
+  return Me(s);
 }
-function bt(a) {
+function Tt(a) {
   return (a.x1 - a.x0) * (a.y1 - a.y0);
 }
-function Le(a, i) {
+function Ae(a, i) {
   const { width: s, height: n, xOffset: r, yOffset: c } = ue(i), d = a.length, h = a.map((p) => p.normalizedValue || 0).reduce((p, $) => p + $, 0), v = h / n, S = h / s;
   let w = r, N = c;
   const f = [];
   if (s >= n) {
     for (let p = 0; p < d; p += 1) {
-      const $ = a[p], z = N + $.normalizedValue / v, e = {
+      const $ = a[p], z = N + $.normalizedValue / v, R = {
         x0: w,
         y0: N,
         x1: w + v,
         y1: z
-      }, I = Object.assign({}, $, e);
+      }, I = Object.assign({}, $, R);
       N = z, f.push(I);
     }
     return f;
   } else {
     for (let p = 0; p < d; p += 1) {
-      const $ = a[p], z = w + $.normalizedValue / S, e = {
+      const $ = a[p], z = w + $.normalizedValue / S, R = {
         x0: w,
         y0: N,
         x1: z,
         y1: N + S
-      }, I = Object.assign({}, $, e);
+      }, I = Object.assign({}, $, R);
       w = z, f.push(I);
     }
     return f;
   }
 }
-function wt(a) {
+function _t(a) {
   const i = ue(a), s = i.width, n = i.height;
   return Math.min(s, n);
 }
-function Ct(a, i) {
+function Ot(a, i) {
   const s = a.length, n = a.map((v) => v.value ?? 0).reduce((v, S) => v + S, 0), r = i / n, c = [];
   let d, h;
   for (let v = 0; v < s; v += 1)
@@ -115,16 +115,16 @@ function ue(a) {
     height: r - s
   };
 }
-function kt(a, i, s, n) {
+function St(a, i, s, n) {
   let r = a, c = i, d = s, h = n;
   for (; ; ) {
     const v = r.length;
     if (v === 0) {
-      const f = Le(c, d);
+      const f = Ae(c, d);
       return h.concat(f);
     }
-    const S = wt(d), w = r[0], N = r.slice(1, v);
-    if (gt(c, w, S)) {
+    const S = _t(d), w = r[0], N = r.slice(1, v);
+    if (kt(c, w, S)) {
       const f = c.concat(w);
       r = N, c = f, d = d, h = h;
     } else {
@@ -132,25 +132,25 @@ function kt(a, i, s, n) {
       let p = 0;
       for (let I = 0; I < f; I += 1)
         p += c[I].normalizedValue;
-      const $ = xt(d, p), z = Le(c, d), e = h.concat(z);
-      r = r, c = [], d = $, h = e;
+      const $ = Nt(d, p), z = Ae(c, d), R = h.concat(z);
+      r = r, c = [], d = $, h = R;
     }
   }
 }
-function Re(a) {
+function Me(a) {
   if (typeof a.children > "u" || !a.children.length)
     return [a];
   {
-    const i = Ct(
+    const i = Ot(
       a.children,
-      bt(a)
-    ), s = kt(i, [], a, []), n = s.length, r = [];
+      Tt(a)
+    ), s = St(i, [], a, []), n = s.length, r = [];
     for (let d = 0; d < n; d += 1)
-      r.push(Re(s[d]));
-    return yt(r);
+      r.push(Me(s[d]));
+    return xt(r);
   }
 }
-function xt(a, i) {
+function Nt(a, i) {
   const { width: s, height: n, xOffset: r, yOffset: c } = ue(a);
   if (s >= n) {
     const d = i / n, h = s - d, v = {
@@ -159,7 +159,7 @@ function xt(a, i) {
       width: h,
       height: n
     };
-    return Fe(v);
+    return De(v);
   } else {
     const d = i / s, h = n - d, v = {
       xOffset: r,
@@ -167,16 +167,16 @@ function xt(a, i) {
       width: s,
       height: h
     };
-    return Fe(v);
+    return De(v);
   }
 }
-const $t = (a) => (qe("data-v-61b57d4b"), a = a(), je(), a), Tt = ["id"], _t = ["xmlns", "viewBox"], Ot = { key: 0 }, St = ["id"], Nt = ["stop-color"], zt = ["stop-color"], It = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width", "onClick", "onMouseenter"], Pt = ["x", "y", "height", "width"], Ft = {
+const zt = (a) => (Qe("data-v-440c85e2"), a = a(), et(), a), It = ["id"], Pt = ["xmlns", "viewBox"], Ft = { key: 0 }, Lt = ["id"], Rt = ["stop-color"], Dt = ["stop-color"], At = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width", "onClick", "onMouseenter"], Mt = ["x", "y", "height", "width"], Vt = {
   style: { width: "100%", height: "100%" },
   class: "vue-ui-treemap-cell"
-}, Lt = /* @__PURE__ */ $t(() => /* @__PURE__ */ O("br", null, null, -1)), Rt = {
+}, Bt = /* @__PURE__ */ zt(() => /* @__PURE__ */ O("br", null, null, -1)), Wt = {
   key: 3,
   class: "vue-data-ui-watermark"
-}, Dt = ["onClick"], At = { key: 0 }, Mt = { key: 1 }, Vt = ["innerHTML"], Bt = {
+}, Et = ["onClick"], Ht = { key: 0 }, Ut = { key: 1 }, Gt = ["innerHTML"], Xt = {
   __name: "vue-ui-treemap",
   props: {
     config: {
@@ -194,70 +194,82 @@ const $t = (a) => (qe("data-v-61b57d4b"), a = a(), je(), a), Tt = ["id"], _t = [
   },
   emits: ["selectLegend", "selectDatapoint"],
   setup(a, { expose: i, emit: s }) {
-    const n = a, { vue_ui_treemap: r } = Ye(), c = C(() => !!n.dataset && n.dataset.length), d = C(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent)), h = y(Oe()), v = y(!1), S = y(""), w = y(!1), N = y(0), f = y([]), p = y(null), $ = y(null), z = y(null), e = C(() => {
-      const t = Ie({
+    const n = a, { vue_ui_treemap: r } = tt(), c = C(() => !!n.dataset && n.dataset.length), d = C(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent)), h = y(ze()), v = y(!1), S = y(""), w = y(!1), N = y(0), f = y([]), p = y(null), $ = y(null), z = y(null), R = y(0), I = y(0), ie = y(0), e = C({
+      get: () => ce(),
+      set: (t) => t
+    });
+    function ce() {
+      const t = Le({
         userConfig: n.config,
         defaultConfig: r
       });
       return t.theme ? {
-        ...Ie({
-          userConfig: Ze.vue_ui_treemap[t.theme] || n.config,
+        ...Le({
+          userConfig: lt.vue_ui_treemap[t.theme] || n.config,
           defaultConfig: t
         }),
-        customPalette: Je[t.theme] || x
+        customPalette: ot[t.theme] || x
       } : t;
-    }), { isPrinting: I, isImaging: ie, generatePdf: ce, generateImage: de } = st({
+    }
+    qe(() => n.config, (t) => {
+      e.value = ce(), R.value += 1, I.value += 1, ie.value += 1;
+    }, { deep: !0 });
+    const { isPrinting: de, isImaging: ve, generatePdf: he, generateImage: fe } = vt({
       elementId: `treemap_${h.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-treemap"
-    }), J = C(() => Ke(e.value.customPalette)), R = y({
+    }), Q = C(() => at(e.value.customPalette)), D = y({
       showTable: e.value.table.show,
       showTooltip: e.value.style.chart.tooltip.show
-    }), D = y({
+    }), A = y({
       height: e.value.style.chart.height,
       width: e.value.style.chart.width
-    }), B = C(() => ({
-      bottom: D.value.height - e.value.style.chart.padding.bottom,
-      height: D.value.height - e.value.style.chart.padding.top - e.value.style.chart.padding.bottom,
+    }), W = C(() => ({
+      bottom: A.value.height - e.value.style.chart.padding.bottom,
+      height: A.value.height - e.value.style.chart.padding.top - e.value.style.chart.padding.bottom,
       left: e.value.style.chart.padding.left,
-      right: D.value.width - e.value.style.chart.padding.right,
+      right: A.value.width - e.value.style.chart.padding.right,
       top: e.value.style.chart.padding.top,
-      vbHeight: D.value.height,
-      vbWidth: D.value.width,
-      width: D.value.width - e.value.style.chart.padding.left - e.value.style.chart.padding.right
+      vbHeight: A.value.height,
+      vbWidth: A.value.width,
+      width: A.value.width - e.value.style.chart.padding.left - e.value.style.chart.padding.right
     }));
-    function ve(t) {
+    function pe(t) {
       t.forEach((o, l) => {
-        o.id = Oe(), o.color = le(o.color) || J.value[l] || x[l] || x[l % x.length], o.children && (o.children.forEach((u) => {
+        o.id = ze(), o.color = oe(o.color) || Q.value[l] || x[l] || x[l % x.length], o.children && (o.children.forEach((u) => {
           u.parentId = o.id, u.color = o.color;
-        }), ve(o.children));
+        }), pe(o.children));
       });
     }
-    const W = y(n.dataset), K = y(null);
-    He(() => {
-      if (Qe(n.dataset) && et({
+    const E = y(n.dataset), ee = y(null);
+    je(() => {
+      Ve();
+    });
+    function Ve() {
+      if (nt(n.dataset) && st({
         componentName: "VueUiTreemap",
         type: "dataset"
-      }), ve(W.value), e.value.responsive) {
-        const t = ht(() => {
-          const { width: o, height: l } = ft({
+      }), pe(E.value), e.value.responsive) {
+        const t = bt(() => {
+          const { width: o, height: l } = wt({
             chart: p.value,
             title: e.value.style.chart.title.text ? $.value : null,
             legend: e.value.style.chart.legend.show ? z.value : null
           });
-          D.value.width = o, D.value.height = l;
+          A.value.width = o, A.value.height = l;
         });
-        K.value = new ResizeObserver(t), K.value.observe(p.value.parentNode);
+        ee.value = new ResizeObserver(t), ee.value.observe(p.value.parentNode);
       }
-    }), Ue(() => {
-      K.value && K.value.disconnect();
+    }
+    Ye(() => {
+      ee.value && ee.value.disconnect();
     });
-    const ae = y(W.value), j = C(() => ae.value.map((t, o) => ({
+    const ne = y(E.value), Z = C(() => ne.value.map((t, o) => ({
       ...t,
-      color: le(t.color) || J.value[o] || x[o] || x[o % x.length]
-    })).filter((t) => !f.value.includes(t.id))), H = C(() => W.value.filter((t) => !f.value.includes(t.id)).map((t) => t.value || 0).reduce((t, o) => t + o, 0)), he = C({
+      color: oe(t.color) || Q.value[o] || x[o] || x[o % x.length]
+    })).filter((t) => !f.value.includes(t.id))), U = C(() => E.value.filter((t) => !f.value.includes(t.id)).map((t) => t.value || 0).reduce((t, o) => t + o, 0)), ge = C({
       get() {
-        let t = [...j.value];
-        return e.value.style.chart.layout.sorted && (t = [...j.value].sort((o, l) => l.value - o.value)), t.map((o) => ({
+        let t = [...Z.value];
+        return e.value.style.chart.layout.sorted && (t = [...Z.value].sort((o, l) => l.value - o.value)), t.map((o) => ({
           ...o
         }));
       },
@@ -265,88 +277,88 @@ const $t = (a) => (qe("data-v-61b57d4b"), a = a(), je(), a), Tt = ["id"], _t = [
         return t;
       }
     });
-    function fe(t, o) {
+    function ye(t, o) {
       return t.value / o;
     }
-    function De(t, o, l) {
-      const u = e.value.style.chart.layout.rects.colorRatio - fe(o, l);
-      return Se(t, u < 0 ? 0 : u);
+    function Be(t, o, l) {
+      const u = e.value.style.chart.layout.rects.colorRatio - ye(o, l);
+      return Ie(t, u < 0 ? 0 : u);
     }
-    function pe(t, o, l, u) {
-      return t.map((g, A) => {
-        const ee = De(le(o) || J.value[A] || x[A] || x[A % x.length], g, u), Ee = fe(g, u);
+    function me(t, o, l, u) {
+      return t.map((g, M) => {
+        const le = Be(oe(o) || Q.value[M] || x[M] || x[M % x.length], g, u), Xe = ye(g, u);
         return {
           ...g,
-          color: ee,
-          proportion: Ee,
+          color: le,
+          proportion: Xe,
           parentName: l,
-          children: g.children ? pe(g.children, ee, g.name, u) : void 0
+          children: g.children ? me(g.children, le, g.name, u) : void 0
         };
       });
     }
-    const Y = C(() => mt(
-      he.value.map((t, o) => {
+    const J = C(() => $t(
+      ge.value.map((t, o) => {
         const l = t.children ? t.children.reduce((u, g) => u + g.value, 0) : t.value;
         return {
           value: t.value,
           id: t.id,
-          children: t.children ? pe(t.children.sort((u, g) => g.value - u.value), t.color, t.name, l) : void 0,
+          children: t.children ? me(t.children.sort((u, g) => g.value - u.value), t.color, t.name, l) : void 0,
           color: t.color,
           name: t.name
         };
       }),
-      { x0: B.value.left * 2, y0: B.value.top, x1: B.value.width, y1: B.value.height }
+      { x0: W.value.left * 2, y0: W.value.top, x1: W.value.width, y1: W.value.height }
     ));
-    function ge({ y0: t, y1: o }) {
+    function be({ y0: t, y1: o }) {
       return o - t <= 0 ? 1e-4 : o - t;
     }
-    function ye({ x0: t, x1: o }) {
+    function we({ x0: t, x1: o }) {
       return o - t <= 0 ? 1e-4 : o - t;
     }
-    function E(t) {
+    function H(t) {
       const o = e.value.style.chart.layout.labels.fontSize * (t.proportion * 2 > 1 ? 1 : t.proportion * 2);
       return o < e.value.style.chart.layout.labels.minFontSize ? e.value.style.chart.layout.labels.minFontSize : o;
     }
-    function Ae(t) {
+    function We(t) {
       w.value = t, N.value += 1;
     }
-    const U = C(() => ({
+    const G = C(() => ({
       startX: 0,
       startY: 0,
-      width: B.value.vbWidth,
-      height: B.value.vbHeight
+      width: W.value.vbWidth,
+      height: W.value.vbHeight
     })), P = y(!1);
-    function ne(t, o = W.value) {
+    function se(t, o = E.value) {
       for (const l of o) {
         if (l.id === t)
           return l;
         if (l.children) {
-          const u = ne(t, l.children);
+          const u = se(t, l.children);
           if (u)
             return u;
         }
       }
       return null;
     }
-    function Me(t) {
+    function Ee(t) {
       if (P.value)
-        s("selectDatapoint", void 0), ae.value = W.value;
+        s("selectDatapoint", void 0), ne.value = E.value;
       else {
-        if (s("selectDatapoint", t), !ne(t.parentId))
+        if (s("selectDatapoint", t), !se(t.parentId))
           return;
-        ae.value = [ne(t.parentId)];
+        ne.value = [se(t.parentId)];
       }
       P.value = !P.value;
     }
-    const F = y(null), me = C(() => W.value.map((t, o) => ({
+    const F = y(null), Ce = C(() => E.value.map((t, o) => ({
       ...t,
-      color: le(t.color) || J.value[o] || x[o] || x[o % x.length],
+      color: oe(t.color) || Q.value[o] || x[o] || x[o % x.length],
       shape: "square"
     })).sort((t, o) => o.value - t.value).map((t, o) => ({
       ...t,
-      proportion: t.value / W.value.map((l) => l.value).reduce((l, u) => l + u, 0),
+      proportion: t.value / E.value.map((l) => l.value).reduce((l, u) => l + u, 0),
       opacity: f.value.includes(t.id) ? 0.5 : 1
-    }))), Ve = C(() => ({
+    }))), He = C(() => ({
       cy: "treemap-div-legend",
       backgroundColor: e.value.style.chart.legend.backgroundColor,
       color: e.value.style.chart.legend.color,
@@ -354,31 +366,31 @@ const $t = (a) => (qe("data-v-61b57d4b"), a = a(), je(), a), Tt = ["id"], _t = [
       paddingBottom: 12,
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
     }));
-    function be(t) {
-      P.value = !1, F.value = null, f.value.includes(t.id) ? f.value = f.value.filter((o) => o !== t.id) : f.value.length < n.dataset.length - 1 && f.value.push(t.id), s("selectLegend", he.value);
+    function ke(t) {
+      P.value = !1, F.value = null, f.value.includes(t.id) ? f.value = f.value.filter((o) => o !== t.id) : f.value.length < n.dataset.length - 1 && f.value.push(t.id), s("selectLegend", ge.value);
     }
-    const se = y(null);
-    function Be({ datapoint: t, seriesIndex: o }) {
-      F.value = t, se.value = { datapoint: t, seriesIndex: o, config: e.value, series: j.value };
+    const re = y(null);
+    function Ue({ datapoint: t, seriesIndex: o }) {
+      F.value = t, re.value = { datapoint: t, seriesIndex: o, config: e.value, series: Z.value };
       const l = e.value.style.chart.tooltip.customFormat;
-      if (ze(l) && lt(() => l({
+      if (Fe(l) && ut(() => l({
         seriesIndex: o,
         datapoint: t,
-        series: j.value,
+        series: Z.value,
         config: e.value
       })))
         S.value = l({
           seriesIndex: o,
           datapoint: t,
-          series: j.value,
+          series: Z.value,
           config: e.value
         });
       else {
         let u = "";
-        u += `<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>`, u += `<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>`, u += `<b>${oe(
+        u += `<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>`, u += `<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>`, u += `<b>${ae(
           e.value.style.chart.layout.labels.formatter,
           t.value,
-          Z({
+          K({
             p: e.value.style.chart.layout.labels.prefix,
             v: t.value,
             s: e.value.style.chart.layout.labels.suffix,
@@ -390,32 +402,32 @@ const $t = (a) => (qe("data-v-61b57d4b"), a = a(), je(), a), Tt = ["id"], _t = [
       v.value = !0;
     }
     const L = C(() => {
-      const t = Y.value.map((l) => ({
+      const t = J.value.map((l) => ({
         name: l.name,
         color: l.color
-      })), o = Y.value.map((l) => l.value);
+      })), o = J.value.map((l) => l.value);
       return { head: t, body: o };
     });
-    function we() {
-      Xe(() => {
+    function xe() {
+      Ke(() => {
         const t = L.value.head.map((u, g) => [[
           u.name
-        ], [L.value.body[g]], [isNaN(L.value.body[g] / H.value) ? "-" : L.value.body[g] / H.value * 100]]), o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(t), l = ot(o);
-        at({ csvContent: l, title: e.value.style.chart.title.text || "vue-ui-treemap" });
+        ], [L.value.body[g]], [isNaN(L.value.body[g] / U.value) ? "-" : L.value.body[g] / U.value * 100]]), o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(t), l = it(o);
+        ct({ csvContent: l, title: e.value.style.chart.title.text || "vue-ui-treemap" });
       });
     }
-    const Q = C(() => {
+    const te = C(() => {
       const t = [
         e.value.table.columnNames.series,
         e.value.table.columnNames.value,
         e.value.table.columnNames.percentage
-      ], o = L.value.head.map((g, A) => {
-        const ee = oe(
+      ], o = L.value.head.map((g, M) => {
+        const le = ae(
           e.value.style.chart.layout.labels.formatter,
-          L.value.body[A],
-          Z({
+          L.value.body[M],
+          K({
             p: e.value.style.chart.layout.labels.prefix,
-            v: L.value.body[A],
+            v: L.value.body[M],
             s: e.value.style.chart.layout.labels.suffix,
             r: e.value.table.td.roundingValue
           })
@@ -426,9 +438,9 @@ const $t = (a) => (qe("data-v-61b57d4b"), a = a(), je(), a), Tt = ["id"], _t = [
             name: g.name,
             shape: "square"
           },
-          ee,
-          isNaN(L.value.body[A] / H.value) ? "-" : Z({
-            v: L.value.body[A] / H.value * 100,
+          le,
+          isNaN(L.value.body[M] / U.value) ? "-" : K({
+            v: L.value.body[M] / U.value * 100,
             s: "%",
             r: e.value.table.td.roundingPercentage
           })
@@ -456,36 +468,37 @@ const $t = (a) => (qe("data-v-61b57d4b"), a = a(), je(), a), Tt = ["id"], _t = [
         config: l
       };
     });
-    function We() {
-      return Y.value;
+    function Ge() {
+      return J.value;
     }
-    function Ce() {
-      R.value.showTable = !R.value.showTable;
+    function $e() {
+      D.value.showTable = !D.value.showTable;
     }
-    function ke() {
-      R.value.showTooltip = !R.value.showTooltip;
+    function Te() {
+      D.value.showTooltip = !D.value.showTooltip;
     }
     return i({
-      getData: We,
-      generateCsv: we,
-      generateImage: de,
-      generatePdf: ce,
-      toggleTable: Ce,
-      toggleTooltip: ke
+      getData: Ge,
+      generateCsv: xe,
+      generateImage: fe,
+      generatePdf: he,
+      toggleTable: $e,
+      toggleTooltip: Te
     }), (t, o) => (m(), k("div", {
       ref_key: "treemapChart",
       ref: p,
-      class: xe(`vue-ui-treemap ${w.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
-      style: M(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;${e.value.style.chart.title.text ? "" : "padding-top:36px"};background:${e.value.style.chart.backgroundColor}`),
+      class: _e(`vue-ui-treemap ${w.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: V(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;${e.value.style.chart.title.text ? "" : "padding-top:36px"};background:${e.value.style.chart.backgroundColor}`),
       id: `treemap_${h.value}`
     }, [
       e.value.style.chart.title.text ? (m(), k("div", {
         key: 0,
         ref_key: "chartTitle",
         ref: $,
-        style: M(`width:100%;background:${e.value.style.chart.backgroundColor};padding-bottom:6px`)
+        style: V(`width:100%;background:${e.value.style.chart.backgroundColor};padding-bottom:6px`)
       }, [
-        re(nt, {
+        (m(), X(dt, {
+          key: `title_${R.value}`,
           config: {
             title: {
               cy: "treemap-div-title",
@@ -496,15 +509,15 @@ const $t = (a) => (qe("data-v-61b57d4b"), a = a(), je(), a), Tt = ["id"], _t = [
               ...e.value.style.chart.title.subtitle
             }
           }
-        }, null, 8, ["config"])
-      ], 4)) : V("", !0),
-      e.value.userOptions.show && c.value ? (m(), te(rt, {
+        }, null, 8, ["config"]))
+      ], 4)) : B("", !0),
+      e.value.userOptions.show && c.value ? (m(), X(ht, {
         ref: "details",
         key: `user_option_${N.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: b(I),
-        isImaging: b(ie),
+        isPrinting: b(de),
+        isImaging: b(ve),
         uid: h.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
@@ -513,16 +526,16 @@ const $t = (a) => (qe("data-v-61b57d4b"), a = a(), je(), a), Tt = ["id"], _t = [
         hasTable: e.value.userOptions.buttons.table,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         isFullscreen: w.value,
-        isTooltip: R.value.showTooltip,
+        isTooltip: D.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
         chartElement: p.value,
-        onToggleFullscreen: Ae,
-        onGeneratePdf: b(ce),
-        onGenerateCsv: we,
-        onGenerateImage: b(de),
-        onToggleTable: Ce,
-        onToggleTooltip: ke
-      }, Ge({ _: 2 }, [
+        onToggleFullscreen: We,
+        onGeneratePdf: b(he),
+        onGenerateCsv: xe,
+        onGenerateImage: b(fe),
+        onToggleTable: $e,
+        onToggleTooltip: Te
+      }, Ze({ _: 2 }, [
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
           fn: T(() => [
@@ -561,20 +574,20 @@ const $t = (a) => (qe("data-v-61b57d4b"), a = a(), je(), a), Tt = ["id"], _t = [
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: T(({ toggleFullscreen: l, isFullscreen: u }) => [
-            _(t.$slots, "optionFullscreen", G(X({ toggleFullscreen: l, isFullscreen: u })), void 0, !0)
+            _(t.$slots, "optionFullscreen", q(j({ toggleFullscreen: l, isFullscreen: u })), void 0, !0)
           ]),
           key: "5"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : V("", !0),
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : B("", !0),
       c.value ? (m(), k("svg", {
         key: 2,
-        xmlns: b(tt),
-        class: xe({ "vue-data-ui-fullscreen--on": w.value, "vue-data-ui-fulscreen--off": !w.value, "vue-data-ui-zoom-plus": !P.value, "vue-data-ui-zoom-minus": P.value }),
-        viewBox: `${U.value.startX} ${U.value.startY} ${U.value.width <= 0 ? 10 : U.value.width} ${U.value.height <= 0 ? 10 : U.value.height}`,
-        style: M(`max-width:100%; overflow: hidden; background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color}`)
+        xmlns: b(rt),
+        class: _e({ "vue-data-ui-fullscreen--on": w.value, "vue-data-ui-fulscreen--off": !w.value, "vue-data-ui-zoom-plus": !P.value, "vue-data-ui-zoom-minus": P.value }),
+        viewBox: `${G.value.startX} ${G.value.startY} ${G.value.width <= 0 ? 10 : G.value.width} ${G.value.height <= 0 ? 10 : G.value.height}`,
+        style: V(`max-width:100%; overflow: hidden; background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color}`)
       }, [
-        (m(!0), k($e, null, Te(Y.value, (l, u) => (m(), k("g", null, [
-          e.value.style.chart.layout.rects.gradient.show ? (m(), k("defs", Ot, [
+        (m(!0), k(Oe, null, Se(J.value, (l, u) => (m(), k("g", null, [
+          e.value.style.chart.layout.rects.gradient.show ? (m(), k("defs", Ft, [
             O("radialGradient", {
               id: `tgrad_${l.id}`,
               gradientTransform: "translate(-1, -1.000001) scale(2, 2)"
@@ -582,58 +595,58 @@ const $t = (a) => (qe("data-v-61b57d4b"), a = a(), je(), a), Tt = ["id"], _t = [
               O("stop", {
                 offset: "18%",
                 "stop-color": l.color
-              }, null, 8, Nt),
+              }, null, 8, Rt),
               O("stop", {
                 offset: "100%",
-                "stop-color": b(Se)(l.color, e.value.style.chart.layout.rects.gradient.intensity / 100)
-              }, null, 8, zt)
-            ], 8, St)
-          ])) : V("", !0)
+                "stop-color": b(Ie)(l.color, e.value.style.chart.layout.rects.gradient.intensity / 100)
+              }, null, 8, Dt)
+            ], 8, Lt)
+          ])) : B("", !0)
         ]))), 256)),
-        (m(!0), k($e, null, Te(Y.value, (l, u) => (m(), k("g", null, [
+        (m(!0), k(Oe, null, Se(J.value, (l, u) => (m(), k("g", null, [
           O("rect", {
             x: l.x0,
             y: l.y0,
-            height: ge(l),
-            width: ye(l),
+            height: be(l),
+            width: we(l),
             fill: d.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: F.value && F.value.id === l.id ? e.value.style.chart.layout.rects.selected.stroke : e.value.style.chart.layout.rects.stroke,
             "stroke-width": F.value && F.value.id === l.id ? e.value.style.chart.layout.rects.selected.strokeWidth : e.value.style.chart.layout.rects.strokeWidth,
-            onClick: (g) => Me(l),
-            onMouseenter: () => Be({
+            onClick: (g) => Ee(l),
+            onMouseenter: () => Ue({
               datapoint: l,
               seriesIndex: u
             }),
             onMouseleave: o[0] || (o[0] = (g) => {
               F.value = null, v.value = !1;
             }),
-            style: M(`opacity:${F.value ? F.value.id === l.id ? 1 : e.value.style.chart.layout.rects.selected.unselectedOpacity : 1}`),
+            style: V(`opacity:${F.value ? F.value.id === l.id ? 1 : e.value.style.chart.layout.rects.selected.unselectedOpacity : 1}`),
             class: "vue-ui-treemap-rect"
-          }, null, 44, It),
+          }, null, 44, At),
           (m(), k("foreignObject", {
             x: l.x0,
             y: l.y0,
-            height: ge(l),
-            width: ye(l),
+            height: be(l),
+            width: we(l),
             class: "vue-ui-treemap-cell-foreignObject"
           }, [
-            O("div", Ft, [
+            O("div", Vt, [
               e.value.style.chart.layout.labels.showDefaultLabels && (l.proportion > e.value.style.chart.layout.labels.hideUnderProportion || P.value) ? (m(), k("div", {
                 key: 0,
                 class: "vue-ui-treemap-cell-default",
-                style: M(`width:calc(100% - ${E(l) / 1.5}px);text-align:left;line-height:${E(l) < 14 ? 14 : E(l)}px;padding:${E(l) / 3}px; color:${b(Ne)(l.color)}`)
+                style: V(`width:calc(100% - ${H(l) / 1.5}px);text-align:left;line-height:${H(l) < 14 ? 14 : H(l)}px;padding:${H(l) / 3}px; color:${b(Pe)(l.color)}`)
               }, [
                 O("span", {
-                  style: M(`width:100%;font-size:${E(l)}px;`)
-                }, q(l.name), 5),
-                Lt,
+                  style: V(`width:100%;font-size:${H(l)}px;`)
+                }, Y(l.name), 5),
+                Bt,
                 O("span", {
-                  style: M(`width:100%;font-size:${E(l)}px;`)
-                }, q(b(oe)(
+                  style: V(`width:100%;font-size:${H(l)}px;`)
+                }, Y(b(ae)(
                   e.value.style.chart.layout.labels.formatter,
                   l.value,
-                  b(Z)({
+                  b(K)({
                     p: e.value.style.chart.layout.labels.prefix,
                     v: l.value,
                     s: e.value.style.chart.layout.labels.suffix,
@@ -641,23 +654,23 @@ const $t = (a) => (qe("data-v-61b57d4b"), a = a(), je(), a), Tt = ["id"], _t = [
                   }),
                   { datapoint: l }
                 )), 5)
-              ], 4)) : V("", !0),
-              _(t.$slots, "rect", G(X({
+              ], 4)) : B("", !0),
+              _(t.$slots, "rect", q(j({
                 rect: l,
                 shouldShow: l.proportion > e.value.style.chart.layout.labels.hideUnderProportion || P.value,
-                fontSize: E(l),
+                fontSize: H(l),
                 isZoom: P.value,
-                textColor: b(Ne)(l.color)
+                textColor: b(Pe)(l.color)
               })), void 0, !0)
             ])
-          ], 8, Pt))
+          ], 8, Mt))
         ]))), 256)),
-        _(t.$slots, "svg", G(X({ svg: B.value, isZoom: P.value, rect: F.value, config: e.value })), void 0, !0)
-      ], 14, _t)) : V("", !0),
-      t.$slots.watermark ? (m(), k("div", Rt, [
-        _(t.$slots, "watermark", G(X({ isPrinting: b(I) || b(ie) })), void 0, !0)
-      ])) : V("", !0),
-      c.value ? V("", !0) : (m(), te(ct, {
+        _(t.$slots, "svg", q(j({ svg: W.value, isZoom: P.value, rect: F.value, config: e.value })), void 0, !0)
+      ], 14, Pt)) : B("", !0),
+      t.$slots.watermark ? (m(), k("div", Wt, [
+        _(t.$slots, "watermark", q(j({ isPrinting: b(de) || b(ve) })), void 0, !0)
+      ])) : B("", !0),
+      c.value ? B("", !0) : (m(), X(gt, {
         key: 4,
         config: {
           type: "treemap",
@@ -673,22 +686,22 @@ const $t = (a) => (qe("data-v-61b57d4b"), a = a(), je(), a), Tt = ["id"], _t = [
         ref_key: "chartLegend",
         ref: z
       }, [
-        e.value.style.chart.legend.show ? (m(), te(it, {
-          key: 0,
-          legendSet: me.value,
-          config: Ve.value,
+        e.value.style.chart.legend.show ? (m(), X(pt, {
+          key: `legend_${ie.value}`,
+          legendSet: Ce.value,
+          config: He.value,
           id: `treemap_legend_${h.value}`,
-          onClickMarker: o[1] || (o[1] = ({ legend: l }) => be(l))
+          onClickMarker: o[1] || (o[1] = ({ legend: l }) => ke(l))
         }, {
           item: T(({ legend: l, index: u }) => [
             O("div", {
-              onClick: (g) => be(l),
-              style: M(`opacity:${f.value.includes(l.id) ? 0.5 : 1}`)
+              onClick: (g) => ke(l),
+              style: V(`opacity:${f.value.includes(l.id) ? 0.5 : 1}`)
             }, [
-              _e(q(l.name) + ": " + q(b(oe)(
+              Ne(Y(l.name) + ": " + Y(b(ae)(
                 e.value.style.chart.layout.labels.formatter,
                 l.value,
-                b(Z)({
+                b(K)({
                   p: e.value.style.chart.layout.labels.prefix,
                   v: l.value,
                   s: e.value.style.chart.layout.labels.suffix,
@@ -696,17 +709,17 @@ const $t = (a) => (qe("data-v-61b57d4b"), a = a(), je(), a), Tt = ["id"], _t = [
                 }),
                 { datapoint: l }
               )) + " ", 1),
-              f.value.includes(l.id) ? (m(), k("span", Mt, " ( - % ) ")) : (m(), k("span", At, " (" + q(isNaN(l.value / H.value) ? "-" : (l.value / H.value * 100).toFixed(e.value.style.chart.legend.roundingPercentage)) + "%) ", 1))
-            ], 12, Dt)
+              f.value.includes(l.id) ? (m(), k("span", Ut, " ( - % ) ")) : (m(), k("span", Ht, " (" + Y(isNaN(l.value / U.value) ? "-" : (l.value / U.value * 100).toFixed(e.value.style.chart.legend.roundingPercentage)) + "%) ", 1))
+            ], 12, Et)
           ]),
           _: 1
         }, 8, ["legendSet", "config", "id"])) : _(t.$slots, "legend", {
           key: 1,
-          legend: me.value
+          legend: Ce.value
         }, void 0, !0)
       ], 512),
-      re(ut, {
-        show: R.value.showTooltip && v.value,
+      Je(ft, {
+        show: D.value.showTooltip && v.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         fontSize: e.value.style.chart.tooltip.fontSize,
@@ -718,21 +731,21 @@ const $t = (a) => (qe("data-v-61b57d4b"), a = a(), je(), a), Tt = ["id"], _t = [
         offsetY: e.value.style.chart.tooltip.offsetY,
         parent: p.value,
         content: S.value,
-        isCustom: b(ze)(e.value.style.chart.tooltip.customFormat)
+        isCustom: b(Fe)(e.value.style.chart.tooltip.customFormat)
       }, {
         "tooltip-before": T(() => [
-          _(t.$slots, "tooltip-before", G(X({ ...se.value })), void 0, !0)
+          _(t.$slots, "tooltip-before", q(j({ ...re.value })), void 0, !0)
         ]),
         "tooltip-after": T(() => [
-          _(t.$slots, "tooltip-after", G(X({ ...se.value })), void 0, !0)
+          _(t.$slots, "tooltip-after", q(j({ ...re.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom"]),
-      c.value ? (m(), te(vt, {
+      c.value ? (m(), X(mt, {
         key: 5,
         hideDetails: "",
         config: {
-          open: R.value.showTable,
+          open: D.value.showTable,
           maxHeight: 1e4,
           body: {
             backgroundColor: e.value.style.chart.backgroundColor,
@@ -745,31 +758,32 @@ const $t = (a) => (qe("data-v-61b57d4b"), a = a(), je(), a), Tt = ["id"], _t = [
         }
       }, {
         content: T(() => [
-          re(dt, {
-            colNames: Q.value.colNames,
-            head: Q.value.head,
-            body: Q.value.body,
-            config: Q.value.config,
+          (m(), X(yt, {
+            key: `table_${I.value}`,
+            colNames: te.value.colNames,
+            head: te.value.head,
+            body: te.value.body,
+            config: te.value.config,
             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) => R.value.showTable = !1)
+            onClose: o[2] || (o[2] = (l) => D.value.showTable = !1)
           }, {
             th: T(({ th: l }) => [
               O("div", {
                 innerHTML: l,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, Vt)
+              }, null, 8, Gt)
             ]),
             td: T(({ td: l }) => [
-              _e(q(l.name || l), 1)
+              Ne(Y(l.name || l), 1)
             ]),
             _: 1
-          }, 8, ["colNames", "head", "body", "config", "title"])
+          }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
-      }, 8, ["config"])) : V("", !0)
-    ], 14, Tt));
+      }, 8, ["config"])) : B("", !0)
+    ], 14, It));
   }
-}, Qt = /* @__PURE__ */ pt(Bt, [["__scopeId", "data-v-61b57d4b"]]);
+}, nl = /* @__PURE__ */ Ct(Xt, [["__scopeId", "data-v-440c85e2"]]);
 export {
-  Qt as default
+  nl as default
 };