vue-data-ui 3.10.0 → 3.10.1

package/dist/{vue-ui-funnel-CWSmOHEt.js → vue-ui-funnel-Dijfg4TW.js}

@@ -1,36 +1,40 @@
-import { useCssVars as rt, computed as v, defineAsyncComponent as F, ref as f, shallowRef as $e, onMounted as nt, onBeforeUnmount as ut, watch as Le, createElementBlock as d, openBlock as r, unref as s, normalizeStyle as x, normalizeClass as z, createBlock as N, createCommentVNode as m, withCtx as n, renderSlot as i, normalizeProps as k, guardReactiveProps as A, createSlots as Fe, createVNode as De, createElementVNode as w, mergeProps as H, Fragment as X, renderList as W, toDisplayString as V, resolveDynamicComponent as it, createTextVNode as _e, nextTick as ct } from "vue";
-import { c as vt, o as dt, g as xe, l as ft, m as ht, q as bt, a as q, d as Y, X as gt, x as mt, a2 as ae, v as pt, r as yt } from "./lib-2iaAPQ_c.js";
-import { t as Ct, u as kt } from "./useResponsive-DfdjqQps.js";
-import { u as At, a as le } from "./useNestedProp-BCt4DMkT.js";
-import { u as wt } from "./usePrinter-ChVMpU2f.js";
-import { u as $t } from "./useSvgExport-ByUukOZt.js";
-import { u as Lt } from "./useThemeCheck-DGJ31Vi5.js";
-import { u as Ft } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Dt } from "./useChartAccessibility-9icAAmYg.js";
-import _t from "./img-CqYIrJ8I.js";
-import xt from "./Title-B5L2jweB.js";
-import { _ as St } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } }, style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", area: { color: "#3A3A3A" }, bars: { stroke: "#1A1A1A", dataLabels: { name: { color: "#CCCCCC" }, value: { color: "#CCCCCC" } } }, circles: { stroke: "#1A1A1A" }, circleLinks: { color: "#3A3A3A" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } } } } }, Te = { table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } }, style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", area: { color: "#D32F2F20" }, bars: { defaultColor: "#E64A19", stroke: "#FFF8E1", dataLabels: { name: { color: "#424242" }, value: { color: "#424242" } } }, circles: { stroke: "#FFF8E1" }, circleLinks: { color: "#D32F2F40" }, title: { color: "#424242", subtitle: { color: "#757575" } } } } }, Oe = { table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } }, style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", area: { color: "#D32F2F20" }, bars: { defaultColor: "#E64A19", stroke: "#1E1E1E", dataLabels: { name: { color: "#BDBDBD" }, value: { color: "#BDBDBD" } } }, circles: { stroke: "#1E1E1E" }, circleLinks: { color: "#D32F2F60" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } } } } }, Be = { table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } }, style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", area: { color: "#66CC6620" }, bars: { defaultColor: "#66CC66", stroke: "#1A1A1A", dataLabels: { name: { color: "#99AA99" }, value: { color: "#99AA99" } } }, circles: { stroke: "#1A1A1A" }, circleLinks: { color: "#66CC6620" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } } } } }, Ee = { table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } }, style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", area: { color: "#8F837A20" }, bars: { defaultColor: "#8F837A", stroke: "#fbfafa", dataLabels: { name: { color: "#8A9892" }, value: { color: "#8A9892" } } }, circles: { stroke: "#fbfafa" }, circleLinks: { color: "#8F837A20" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } } } } }, ze = { table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } }, style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", area: { color: "#8A989230" }, bars: { defaultColor: "#61747E", stroke: "#50606C", dataLabels: { name: { color: "#50606C" }, value: { color: "#50606C" } } }, circles: { stroke: "#50606C" }, circleLinks: { color: "#8A989230" }, title: { color: "#50606C", subtitle: { color: "#718890" } } } } }, Ne = {
+import { useCssVars as ut, computed as v, defineAsyncComponent as D, ref as f, shallowRef as $e, onMounted as it, onBeforeUnmount as ct, watch as Le, createElementBlock as d, openBlock as r, unref as s, normalizeStyle as x, normalizeClass as z, createBlock as N, createCommentVNode as m, withCtx as n, renderSlot as i, normalizeProps as k, guardReactiveProps as A, createSlots as De, createVNode as Fe, createElementVNode as w, mergeProps as H, Fragment as X, renderList as W, toDisplayString as V, resolveDynamicComponent as vt, createTextVNode as _e, nextTick as dt } from "vue";
+import { c as ft, o as ht, g as xe, l as bt, m as gt, q as mt, a as q, d as Y, X as Ct, x as pt, a2 as ae, v as yt, r as kt } from "./lib-CVHM9FhP.js";
+import { t as At, u as wt } from "./useResponsive-DfdjqQps.js";
+import { u as $t, a as le } from "./useNestedProp-Ckf_2P_V.js";
+import { u as Lt } from "./usePrinter-1NmjuP-i.js";
+import { u as Dt } from "./useSvgExport-ByUukOZt.js";
+import { u as Ft } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as _t } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as xt } from "./useChartAccessibility-9icAAmYg.js";
+import St from "./img-6fNF_rG0.js";
+import Tt from "./Title-NgeRXqRA.js";
+import { _ as Ot } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Se = { userOptions: { show: !1 } }, Te = { userOptions: { show: !1 }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } }, style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", area: { color: "#3A3A3A" }, bars: { stroke: "#1A1A1A", dataLabels: { name: { color: "#CCCCCC" }, value: { color: "#CCCCCC" } } }, circles: { stroke: "#1A1A1A" }, circleLinks: { color: "#3A3A3A" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } } } } }, Oe = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } }, style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", area: { color: "#3A3A3A" }, bars: { stroke: "#1A1A1A", dataLabels: { name: { color: "#CCCCCC" }, value: { color: "#CCCCCC" } } }, circles: { stroke: "#1A1A1A" }, circleLinks: { color: "#3A3A3A" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } } } } }, Be = { table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } }, style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", area: { color: "#D32F2F20" }, bars: { defaultColor: "#E64A19", stroke: "#FFF8E1", dataLabels: { name: { color: "#424242" }, value: { color: "#424242" } } }, circles: { stroke: "#FFF8E1" }, circleLinks: { color: "#D32F2F40" }, title: { color: "#424242", subtitle: { color: "#757575" } } } } }, Ee = { table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } }, style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", area: { color: "#D32F2F20" }, bars: { defaultColor: "#E64A19", stroke: "#1E1E1E", dataLabels: { name: { color: "#BDBDBD" }, value: { color: "#BDBDBD" } } }, circles: { stroke: "#1E1E1E" }, circleLinks: { color: "#D32F2F60" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } } } } }, ze = { table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } }, style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", area: { color: "#66CC6620" }, bars: { defaultColor: "#66CC66", stroke: "#1A1A1A", dataLabels: { name: { color: "#99AA99" }, value: { color: "#99AA99" } } }, circles: { stroke: "#1A1A1A" }, circleLinks: { color: "#66CC6620" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } } } } }, Ne = { table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } }, style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", area: { color: "#8F837A20" }, bars: { defaultColor: "#8F837A", stroke: "#fbfafa", dataLabels: { name: { color: "#8A9892" }, value: { color: "#8A9892" } } }, circles: { stroke: "#fbfafa" }, circleLinks: { color: "#8F837A20" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } } } } }, Pe = { table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } }, style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", area: { color: "#8A989230" }, bars: { defaultColor: "#61747E", stroke: "#50606C", dataLabels: { name: { color: "#50606C" }, value: { color: "#50606C" } } }, circles: { stroke: "#50606C" }, circleLinks: { color: "#8A989230" }, title: { color: "#50606C", subtitle: { color: "#718890" } } } } }, Ie = {
   default: {},
-  dark: Se,
-  celebration: Te,
-  celebrationNight: Oe,
-  hack: Be,
-  zen: Ee,
-  concrete: ze
-}, na = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  minimal: Se,
+  minimalDark: Te,
+  dark: Oe,
+  celebration: Be,
+  celebrationNight: Ee,
+  hack: ze,
+  zen: Ne,
+  concrete: Pe
+}, ia = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  celebration: Te,
-  celebrationNight: Oe,
-  concrete: ze,
-  dark: Se,
-  default: Ne,
-  hack: Be,
-  zen: Ee
-}, Symbol.toStringTag, { value: "Module" })), Tt = ["id"], Ot = ["xmlns", "viewBox"], Bt = ["width", "height"], Et = ["id"], zt = ["stop-color"], Nt = ["stop-color"], Pt = ["stop-color"], It = ["stroke", "stroke-width"], Rt = ["stroke", "stroke-width"], Mt = ["x", "y", "font-size", "fill", "font-weight"], Ut = ["points", "fill"], Vt = ["stroke", "stroke-width", "rx"], jt = ["x", "y", "font-size", "fill", "font-weight"], Gt = ["x", "y", "font-size", "fill", "font-weight"], Ht = {
+  celebration: Be,
+  celebrationNight: Ee,
+  concrete: Pe,
+  dark: Oe,
+  default: Ie,
+  hack: ze,
+  minimal: Se,
+  minimalDark: Te,
+  zen: Ne
+}, Symbol.toStringTag, { value: "Module" })), Bt = ["id"], Et = ["xmlns", "viewBox"], zt = ["width", "height"], Nt = ["id"], Pt = ["stop-color"], It = ["stop-color"], Rt = ["stop-color"], Mt = ["stroke", "stroke-width"], Ut = ["stroke", "stroke-width"], Vt = ["x", "y", "font-size", "fill", "font-weight"], jt = ["points", "fill"], Gt = ["stroke", "stroke-width", "rx"], Ht = ["x", "y", "font-size", "fill", "font-weight"], Xt = ["x", "y", "font-size", "fill", "font-weight"], Wt = {
   key: 5,
   class: "vue-data-ui-watermark"
-}, Xt = ["innerHTML"], Wt = {
+}, qt = ["innerHTML"], Yt = {
   __name: "vue-ui-funnel",
   props: {
     config: {
@@ -46,18 +50,18 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
       }
     }
   },
-  setup(Pe, { expose: Ie }) {
-    rt((t) => ({
-      v1175b36b: Ze.value
+  setup(Re, { expose: Me }) {
+    ut((t) => ({
+      v1175b36b: tt.value
     }));
-    const Re = F(() => import("./BaseIcon-B9bGT7HU.js")), Me = F(() => import("./vue-ui-skeleton-CdpD_Zjk.js")), Ue = F(() => import("./vue-ui-accordion-CAXPDm31.js")), Ve = F(() => import("./DataTable-DEwh__D8.js")), je = F(() => import("./UserOptions-5pXc4J-c.js")), Ge = F(() => import("./PenAndPaper-CulSakut.js")), He = F(() => import("./PackageVersion-C-JOGZBL.js")), Xe = F(() => import("./BaseDraggableDialog-O2XSymlZ.js")), { vue_ui_funnel: We } = At(), { isThemeValid: qe, warnInvalidTheme: Ye } = Lt(), p = Pe, $ = f(null), P = f(vt()), oe = f(0), se = f(0), re = f(0), ne = f(null), ue = f(null), ie = f(null), L = $e(null), S = $e(null), D = f(!1), I = f(null), J = f(null), T = v(() => !!p.dataset && p.dataset.length);
-    nt(ce);
+    const Ue = D(() => import("./BaseIcon-4uOct8re.js")), Ve = D(() => import("./vue-ui-skeleton-199nlzz-.js")), je = D(() => import("./vue-ui-accordion-DFKaB_05.js")), Ge = D(() => import("./DataTable-DyoDzNNY.js")), He = D(() => import("./UserOptions-CX7Xsusk.js")), Xe = D(() => import("./PenAndPaper-LTuSTmWE.js")), We = D(() => import("./PackageVersion-D6MO5wwI.js")), qe = D(() => import("./BaseDraggableDialog-BQYfVNu8.js")), { vue_ui_funnel: Ye } = $t(), { isThemeValid: Je, warnInvalidTheme: Ke } = Ft(), C = Re, $ = f(null), P = f(ft()), oe = f(0), se = f(0), re = f(0), ne = f(null), ue = f(null), ie = f(null), L = $e(null), S = $e(null), F = f(!1), I = f(null), J = f(null), T = v(() => !!C.dataset && C.dataset.length);
+    it(ce);
     function ce() {
-      if (dt(p.dataset) ? xe({
+      if (ht(C.dataset) ? xe({
         componentName: "VueUiFunnel",
         type: "dataset"
-      }) : p.dataset.forEach((t, l) => {
-        ft({
+      }) : C.dataset.forEach((t, l) => {
+        bt({
           datasetObject: t,
           requiredAttributes: ["name", "value"]
         }).forEach((a) => {
@@ -69,15 +73,15 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
           });
         });
       }), e.value.responsive) {
-        const t = Ct(() => {
-          const { width: l, height: a } = kt({
+        const t = At(() => {
+          const { width: l, height: a } = wt({
             chart: $.value,
             title: e.value.style.chart.title.text ? ie.value : null,
             source: ue.value,
             noTitle: ne.value
           });
           requestAnimationFrame(() => {
-            b.value.height = a, b.value.width = l, C.value = pe(), e.value.responsiveProportionalSizing ? (h.value.circles = ae({
+            b.value.height = a, b.value.width = l, y.value = Ce(), e.value.responsiveProportionalSizing ? (h.value.circles = ae({
               relator: Math.min(l, a),
               adjuster: 600,
               source: e.value.style.chart.circles.dataLabels.fontSize,
@@ -101,38 +105,38 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
         L.value && (S.value && L.value.unobserve(S.value), L.value.disconnect()), L.value = new ResizeObserver(t), S.value = $.value.parentNode, L.value.observe(S.value);
       }
     }
-    ut(() => {
+    ct(() => {
       L.value && (S.value && L.value.unobserve(S.value), L.value.disconnect());
     });
     function ve() {
       const t = le({
-        userConfig: p.config,
-        defaultConfig: We
+        userConfig: C.config,
+        defaultConfig: Ye
       }), l = t.theme;
       if (!l) return t;
-      if (!qe.value(t))
-        return Ye(t), t;
+      if (!Je.value(t))
+        return Ke(t), t;
       const a = le({
-        userConfig: Ne[l] || p.config,
+        userConfig: Ie[l] || C.config,
         defaultConfig: t
       });
       return le({
-        userConfig: p.config,
+        userConfig: C.config,
         defaultConfig: a
       });
     }
     const e = v({
       get: () => ve(),
       set: (t) => t
-    }), { userOptionsVisible: K, setUserOptionsVisibility: de, keepUserOptionState: fe } = Ft({ config: e.value }), { svgRef: Q } = Dt({ config: e.value.style.chart.title });
-    Le(() => p.config, (t) => {
+    }), { userOptionsVisible: K, setUserOptionsVisibility: de, keepUserOptionState: fe } = _t({ config: e.value }), { svgRef: Q } = xt({ config: e.value.style.chart.title });
+    Le(() => C.config, (t) => {
       e.value = ve(), K.value = !e.value.userOptions.showOnChartHover, ce(), se.value += 1, re.value += 1, h.value.circles = e.value.style.chart.circles.dataLabels.fontSize, h.value.names = e.value.style.chart.bars.dataLabels.name.fontSize, h.value.values = e.value.style.chart.bars.dataLabels.value.fontSize, O.value.showTable = e.value.table.show;
     }, { deep: !0 });
-    const { isPrinting: he, isImaging: be, generatePdf: ge, generateImage: me } = wt({
+    const { isPrinting: he, isImaging: be, generatePdf: ge, generateImage: me } = Lt({
       elementId: `funnel_${P.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-funnel",
       options: e.value.userOptions.print
-    }), Je = v(() => e.value.userOptions.show && !e.value.style.chart.title.text), O = f({
+    }), Qe = v(() => e.value.userOptions.show && !e.value.style.chart.title.text), O = f({
       showTable: e.value.table.show
     }), h = f({
       circles: e.value.style.chart.circles.dataLabels.fontSize,
@@ -144,14 +148,14 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
         width: e.value.style.chart.width
       }),
       set: (t) => t
-    }), y = v(() => T.value ? p.dataset.map((t, l) => ({
+    }), p = v(() => T.value ? C.dataset.map((t, l) => ({
       ...t,
-      color: t.color ? ht(t.color) : bt(e.value.style.chart.bars.defaultColor, l / p.dataset.length)
+      color: t.color ? gt(t.color) : mt(e.value.style.chart.bars.defaultColor, l / C.dataset.length)
     })) : []);
     setTimeout(() => {
-      D.value = !0;
-    }, y.value.length * 150);
-    function pe() {
+      F.value = !0;
+    }, p.value.length * 150);
+    function Ce() {
       const t = e.value.style.chart.padding.left, l = e.value.style.chart.padding.top;
       return {
         left: t,
@@ -162,11 +166,11 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
         height: b.value.height - l - e.value.style.chart.padding.bottom
       };
     }
-    const C = f(pe()), B = v(() => C.value.height / p.dataset.length), _ = v(() => B.value * e.value.style.chart.bars.gapRatio), ye = v(() => C.value.width * e.value.style.chart.barCircleSpacingRatio), u = v(() => y.value.map((t, l) => {
-      const a = B.value - _.value, o = C.value.top + _.value / 2 * l + (B.value - _.value / 2) * l + _.value / 2, g = t.value / y.value[0].value, c = (C.value.width - a - ye.value) * (t.value / y.value[0].value);
+    const y = f(Ce()), B = v(() => y.value.height / C.dataset.length), _ = v(() => B.value * e.value.style.chart.bars.gapRatio), pe = v(() => y.value.width * e.value.style.chart.barCircleSpacingRatio), u = v(() => p.value.map((t, l) => {
+      const a = B.value - _.value, o = y.value.top + _.value / 2 * l + (B.value - _.value / 2) * l + _.value / 2, g = t.value / p.value[0].value, c = (y.value.width - a - pe.value) * (t.value / p.value[0].value);
       return {
         ...t,
-        cx: C.value.left + a / 2,
+        cx: y.value.left + a / 2,
         cy: o + a / 2,
         datapointIndex: l,
         fill: t.color,
@@ -174,22 +178,22 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
         proportion: g,
         r: Math.max(a / 2, 0),
         width: Math.max(c, 0),
-        x: C.value.left + a + ye.value,
+        x: y.value.left + a + pe.value,
         y: o
       };
-    })), Ke = v(() => {
+    })), Ze = v(() => {
       const t = u.value.map((l) => `${l.x + l.width},${l.y + (B.value - _.value) / 2}`);
       return `${u.value[0].x},${u.value[0].y + (B.value - _.value) / 2} ${t.toString()} ${u.value.at(-1).x},${u.value.at(-1).y + (B.value - _.value) / 2}`;
-    }), Qe = v(() => ({
+    }), et = v(() => ({
       x1: u.value[0].cx,
       y1: u.value[0].cy,
       x2: u.value.at(-1).cx,
       y2: u.value.at(-1).cy
     })), E = f(!1);
-    function Ce(t) {
+    function ye(t) {
       E.value = t, oe.value += 1;
     }
-    const Ze = v(() => `${y.value.length * 150}ms`), j = f(!1);
+    const tt = v(() => `${p.value.length * 150}ms`), j = f(!1);
     function Z() {
       j.value = !j.value;
     }
@@ -197,10 +201,10 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
       O.value.showTable = !O.value.showTable;
     }
     const R = v(() => {
-      const t = y.value.map((a) => ({
+      const t = p.value.map((a) => ({
         name: a.name,
         color: a.color
-      })), l = y.value.map((a) => a.value);
+      })), l = p.value.map((a) => a.value);
       return { head: t, body: l };
     }), G = v(() => {
       const t = [
@@ -258,19 +262,19 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
       };
     });
     function ee(t = null) {
-      ct(() => {
+      dt(() => {
         const l = R.value.head.map((g, c) => [[
           g.name
-        ], [R.value.body[c]], [u.value[c].proportion * 100]]), a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[e.value.table.columnNames.series], [e.value.table.columnNames.value], ["%"]]].concat(l), o = pt(a);
-        t ? t(o) : yt({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-funnel" });
+        ], [R.value.body[c]], [u.value[c].proportion * 100]]), a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[e.value.table.columnNames.series], [e.value.table.columnNames.value], ["%"]]].concat(l), o = yt(a);
+        t ? t(o) : kt({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-funnel" });
       });
     }
-    function et() {
-      return y.value;
+    function at() {
+      return p.value;
     }
-    async function tt({ scale: t = 2 } = {}) {
+    async function lt({ scale: t = 2 } = {}) {
       if (!$.value) return;
-      const { width: l, height: a } = $.value.getBoundingClientRect(), o = l / a, { imageUri: g, base64: c } = await _t({ domElement: $.value, base64: !0, img: !0, scale: t });
+      const { width: l, height: a } = $.value.getBoundingClientRect(), o = l / a, { imageUri: g, base64: c } = await St({ domElement: $.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: g,
         base64: c,
@@ -283,7 +287,7 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
     const M = v(() => {
       const t = e.value.table.useDialog && !e.value.table.show, l = O.value.showTable;
       return {
-        component: t ? Xe : Ue,
+        component: t ? qe : je,
         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,
@@ -316,28 +320,28 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
     function Ae() {
       O.value.showTable = !1, J.value && J.value.setTableIconState(!1);
     }
-    const at = v(() => e.value.style.chart.backgroundColor), lt = v(() => e.value.style.chart.title), { exportSvg: ot, getSvg: st } = $t({
+    const ot = v(() => e.value.style.chart.backgroundColor), st = v(() => e.value.style.chart.title), { exportSvg: rt, getSvg: nt } = Dt({
       svg: Q,
-      title: lt,
-      backgroundColor: at
+      title: st,
+      backgroundColor: ot
     });
     async function we({ isCb: t }) {
       if (t) {
-        const { blob: l, url: a, text: o, dataUrl: g } = await st();
+        const { blob: l, url: a, text: o, dataUrl: g } = await nt();
         e.value.userOptions.callbacks.svg({ blob: l, url: a, text: o, dataUrl: g });
       } else
-        ot();
+        rt();
     }
-    return Ie({
-      getData: et,
-      getImage: tt,
+    return Me({
+      getData: at,
+      getImage: lt,
       generatePdf: ge,
       generateCsv: ee,
       generateImage: me,
       generateSvg: we,
       toggleTable: ke,
       toggleAnnotator: Z,
-      toggleFullscreen: Ce
+      toggleFullscreen: ye
     }), (t, l) => (r(), d("div", {
       ref_key: "funnelChart",
       ref: $,
@@ -347,7 +351,7 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
       onMouseenter: l[1] || (l[1] = () => s(de)(!0)),
       onMouseleave: l[2] || (l[2] = () => s(de)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (r(), N(s(Ge), {
+      e.value.userOptions.buttons.annotator ? (r(), N(s(Xe), {
         key: 0,
         svgRef: s(Q),
         backgroundColor: e.value.style.chart.backgroundColor,
@@ -375,7 +379,7 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
         ]),
         _: 3
       }, 8, ["svgRef", "backgroundColor", "color", "active"])) : m("", !0),
-      Je.value ? (r(), d("div", {
+      Qe.value ? (r(), d("div", {
         key: 1,
         ref_key: "noTitle",
         ref: ne,
@@ -388,7 +392,7 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
         ref: ie,
         style: "width:100%;background:transparent;padding-bottom:24px"
       }, [
-        (r(), N(xt, {
+        (r(), N(Tt, {
           key: `title_${se.value}`,
           config: {
             title: {
@@ -402,7 +406,7 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
           }
         }, null, 8, ["config"]))
       ], 512)) : m("", !0),
-      e.value.userOptions.show && T.value && (s(fe) || s(K)) ? (r(), N(s(je), {
+      e.value.userOptions.show && T.value && (s(fe) || s(K)) ? (r(), N(s(He), {
         ref_key: "userOptionsRef",
         ref: J,
         key: `user_option_${oe.value}`,
@@ -429,7 +433,7 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
         printScale: e.value.userOptions.print.scale,
         tableDialog: e.value.table.useDialog,
         onToggleAnnotator: Z,
-        onToggleFullscreen: Ce,
+        onToggleFullscreen: ye,
         onGeneratePdf: s(ge),
         onGenerateImage: s(me),
         onGenerateSvg: we,
@@ -438,7 +442,7 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
         style: x({
           visibility: s(fe) ? s(K) ? "visible" : "hidden" : "visible"
         })
-      }, Fe({ _: 2 }, [
+      }, De({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
           fn: n(({ isOpen: a, color: o }) => [
@@ -500,12 +504,12 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
         key: 4,
         ref_key: "svgRef",
         ref: Q,
-        xmlns: s(gt),
+        xmlns: s(Ct),
         class: z({ "vue-data-ui-fullscreen--on": E.value, "vue-data-ui-fulscreen--off": !E.value }),
         viewBox: `0 0 ${b.value.width <= 0 ? 10 : b.value.width} ${b.value.height <= 0 ? 10 : b.value.height}`,
         style: x(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        De(s(He)),
+        Fe(s(We)),
         t.$slots["chart-background"] ? (r(), d("foreignObject", {
           key: 0,
           x: 0,
@@ -517,7 +521,7 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
           }
         }, [
           i(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, Bt)) : m("", !0),
+        ], 8, zt)) : m("", !0),
         w("defs", null, [
           w("linearGradient", {
             id: `funnel_area_${P.value}`,
@@ -530,18 +534,18 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
               offset: "0%",
               "stop-color": e.value.style.chart.backgroundColor,
               "stop-opacity": 0
-            }, null, 8, zt),
+            }, null, 8, Pt),
             w("stop", {
               offset: "20%",
               "stop-color": e.value.style.chart.area.color
-            }, null, 8, Nt),
+            }, null, 8, It),
             w("stop", {
               offset: "100%",
               "stop-color": e.value.style.chart.area.color
-            }, null, 8, Pt)
-          ], 8, Et)
+            }, null, 8, Rt)
+          ], 8, Nt)
         ]),
-        e.value.style.chart.circleLinks.show ? (r(), d("line", H({ key: 1 }, Qe.value, {
+        e.value.style.chart.circleLinks.show ? (r(), d("line", H({ key: 1 }, et.value, {
           stroke: e.value.style.chart.circleLinks.color,
           "stroke-width": 12 * e.value.style.chart.circleLinks.widthRatio,
           "stroke-linecap": "round",
@@ -549,29 +553,29 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
             animated: e.value.useCssAnimation
           },
           style: {
-            strokeDasharray: e.value.useCssAnimation ? C.value.height : 0,
-            strokeDashoffset: e.value.useCssAnimation ? C.value.height : 0
+            strokeDasharray: e.value.useCssAnimation ? y.value.height : 0,
+            strokeDashoffset: e.value.useCssAnimation ? y.value.height : 0
           }
-        }), null, 16, It)) : m("", !0),
+        }), null, 16, Mt)) : m("", !0),
         (r(!0), d(X, null, W(u.value, ({ cx: a, cy: o, r: g, fill: c }, U) => (r(), d("circle", H({ ref_for: !0 }, { cx: a, cy: o, r: g, fill: c }, {
           stroke: e.value.style.chart.circles.stroke,
           "stroke-width": e.value.style.chart.circles.strokeWidth,
           class: {
-            animated: e.value.useCssAnimation && !D.value
+            animated: e.value.useCssAnimation && !F.value
           },
           style: {
             animationDelay: `${150 * U}ms`
           }
-        }), null, 16, Rt))), 256)),
+        }), null, 16, Ut))), 256)),
         (r(!0), d(X, null, W(u.value, (a, o) => (r(), d("text", {
           x: a.cx,
           y: a.cy + h.value.circles / 3 + e.value.style.chart.circles.dataLabels.offsetY,
           "text-anchor": "middle",
           "font-size": h.value.circles,
-          fill: e.value.style.chart.circles.dataLabels.adaptColorToBackground ? s(mt)(a.color) : e.value.style.chart.circles.dataLabels.color,
+          fill: e.value.style.chart.circles.dataLabels.adaptColorToBackground ? s(pt)(a.color) : e.value.style.chart.circles.dataLabels.color,
           "font-weight": e.value.style.chart.circles.dataLabels.bold ? "bold" : "normal",
           class: z({
-            animated: e.value.useCssAnimation && !D.value
+            animated: e.value.useCssAnimation && !F.value
           }),
           style: x({
             animationDelay: `${150 * o}ms`
@@ -585,29 +589,29 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
             r: e.value.style.chart.circles.dataLabels.rounding
           }),
           { datapoint: a }
-        )), 15, Mt))), 256)),
+        )), 15, Vt))), 256)),
         e.value.style.chart.area.show ? (r(), d("polygon", {
           key: 2,
-          points: Ke.value,
+          points: Ze.value,
           fill: `url(#funnel_area_${P.value})`,
           class: z({
-            animated: e.value.useCssAnimation && !D.value
+            animated: e.value.useCssAnimation && !F.value
           }),
           style: x({
-            transition: e.value.useCssAnimation ? `all ${150 * y.value.length}ms ease-in` : "none"
+            transition: e.value.useCssAnimation ? `all ${150 * p.value.length}ms ease-in` : "none"
           })
-        }, null, 14, Ut)) : m("", !0),
+        }, null, 14, jt)) : m("", !0),
         (r(!0), d(X, null, W(u.value, ({ x: a, y: o, height: g, width: c, fill: U }, te) => (r(), d("rect", H({ ref_for: !0 }, { x: a, y: o, height: g, width: c, fill: U }, {
           stroke: e.value.style.chart.bars.stroke,
           "stroke-width": e.value.style.chart.bars.strokeWidth,
           rx: e.value.style.chart.bars.borderRadius,
           class: {
-            animated: e.value.useCssAnimation && !D.value
+            animated: e.value.useCssAnimation && !F.value
           },
           style: {
             animationDelay: `${150 * te}ms`
           }
-        }), null, 16, Vt))), 256)),
+        }), null, 16, Gt))), 256)),
         (r(!0), d(X, null, W(u.value, (a, o) => (r(), d("g", null, [
           w("text", {
             x: a.x + a.width + e.value.style.chart.bars.dataLabels.name.offsetX + 12,
@@ -617,12 +621,12 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
             fill: e.value.style.chart.bars.dataLabels.name.color,
             "font-weight": e.value.style.chart.bars.dataLabels.name.bold ? "bold" : "normal",
             class: z({
-              animated: e.value.useCssAnimation && !D.value
+              animated: e.value.useCssAnimation && !F.value
             }),
             style: x({
               animationDelay: `${150 * o}ms`
             })
-          }, V(a.name), 15, jt),
+          }, V(a.name), 15, Ht),
           w("text", {
             x: a.x + a.width + e.value.style.chart.bars.dataLabels.value.offsetX + 12,
             y: a.cy + h.value.values + e.value.style.chart.bars.dataLabels.value.offsetY,
@@ -631,7 +635,7 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
             fill: e.value.style.chart.bars.dataLabels.value.color,
             "font-weight": e.value.style.chart.bars.dataLabels.value.bold ? "bold" : "normal",
             class: z({
-              animated: e.value.useCssAnimation && !D.value
+              animated: e.value.useCssAnimation && !F.value
             }),
             style: x({
               animationDelay: `${150 * o}ms`
@@ -646,14 +650,14 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
               r: e.value.style.chart.bars.dataLabels.value.rounding
             }),
             { datapoint: a }
-          )), 15, Gt)
+          )), 15, Xt)
         ]))), 256)),
         i(t.$slots, "svg", { svg: b.value }, void 0, !0)
-      ], 14, Ot)) : m("", !0),
-      t.$slots.watermark ? (r(), d("div", Ht, [
+      ], 14, Et)) : m("", !0),
+      t.$slots.watermark ? (r(), d("div", Wt, [
         i(t.$slots, "watermark", k(A({ isPrinting: s(he) || s(be) })), void 0, !0)
       ])) : m("", !0),
-      T.value ? m("", !0) : (r(), N(s(Me), {
+      T.value ? m("", !0) : (r(), N(s(Ve), {
         key: 6,
         config: {
           type: "verticalBar",
@@ -676,13 +680,13 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
       }, [
         i(t.$slots, "source", {}, void 0, !0)
       ], 512)) : m("", !0),
-      T.value && e.value.userOptions.buttons.table ? (r(), N(it(M.value.component), H({ key: 8 }, M.value.props, {
+      T.value && e.value.userOptions.buttons.table ? (r(), N(vt(M.value.component), H({ key: 8 }, M.value.props, {
         ref_key: "tableUnit",
         ref: I,
         onClose: Ae
-      }), Fe({
+      }), De({
         content: n(() => [
-          (r(), N(s(Ve), {
+          (r(), N(s(Ge), {
             key: `table_${re.value}`,
             colNames: G.value.colNames,
             head: G.value.head,
@@ -696,7 +700,7 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
               w("div", {
                 innerHTML: a,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, Xt)
+              }, null, 8, qt)
             ]),
             td: n(({ td: a }) => [
               _e(V(a.name ? a.name : a), 1)
@@ -721,7 +725,7 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
               class: "vue-ui-user-options-button",
               onClick: l[0] || (l[0] = (a) => ee(e.value.userOptions.callbacks.csv))
             }, [
-              De(s(Re), {
+              Fe(s(Ue), {
                 name: "excel",
                 stroke: M.value.props.color
               }, null, 8, ["stroke"])
@@ -730,14 +734,14 @@ const Se = { table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td:
           key: "1"
         } : void 0
       ]), 1040)) : m("", !0)
-    ], 46, Tt));
+    ], 46, Bt));
   }
-}, qt = /* @__PURE__ */ St(Wt, [["__scopeId", "data-v-fb155766"]]), ua = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Jt = /* @__PURE__ */ Ot(Yt, [["__scopeId", "data-v-fb155766"]]), ca = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: qt
+  default: Jt
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  na as a,
-  ua as b,
-  qt as v
+  ia as a,
+  ca as b,
+  Jt as v
 };