vue-data-ui 3.1.0 → 3.1.2

package/dist/{vue-ui-funnel-B0QOfZRz.js → vue-ui-funnel-BlsKhHbk.js}

@@ -1,17 +1,17 @@
-import { useCssVars as je, computed as d, defineAsyncComponent as x, ref as h, shallowRef as ke, onMounted as He, onBeforeUnmount as Xe, watch as Ce, createElementBlock as i, openBlock as n, unref as s, normalizeStyle as A, normalizeClass as N, createBlock as P, createCommentVNode as b, createSlots as we, withCtx as m, renderSlot as g, normalizeProps as G, guardReactiveProps as j, createVNode as $e, createElementVNode as C, mergeProps as H, Fragment as X, renderList as W, toDisplayString as U, resolveDynamicComponent as We, createTextVNode as xe, nextTick as Ye } from "vue";
-import { u as qe, c as Je, o as Ke, f as Le, g as Qe, e as Ze, l as et, k as Y, i as q, X as tt, F as at, E as ee, b as lt, v as st, w as ot } from "./index-CDQbCd41.js";
-import { t as nt, u as rt } from "./useResponsive-DfdjqQps.js";
-import { u as ut } from "./usePrinter-Bnl1YeUU.js";
-import { u as _e } from "./useNestedProp-BPEHGiYX.js";
-import { u as it } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as ct } from "./useChartAccessibility-9icAAmYg.js";
-import vt from "./img-JOqdlnUs.js";
-import dt from "./Title-Dq2_Z9kR.js";
-import { _ as ht } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const ft = ["id"], bt = ["xmlns", "viewBox"], mt = ["width", "height"], gt = ["id"], yt = ["stop-color"], pt = ["stop-color"], kt = ["stop-color"], Ct = ["stroke", "stroke-width"], wt = ["stroke", "stroke-width"], $t = ["x", "y", "font-size", "fill", "font-weight"], xt = ["points", "fill"], Lt = ["stroke", "stroke-width", "rx"], _t = ["x", "y", "font-size", "fill", "font-weight"], Tt = ["x", "y", "font-size", "fill", "font-weight"], At = {
+import { useCssVars as Xe, computed as h, defineAsyncComponent as x, ref as c, shallowRef as we, onMounted as We, onBeforeUnmount as Ye, watch as $e, createElementBlock as i, openBlock as n, unref as s, normalizeStyle as T, normalizeClass as N, createBlock as I, createCommentVNode as b, createSlots as xe, withCtx as m, renderSlot as g, normalizeProps as G, guardReactiveProps as j, createVNode as Le, createElementVNode as C, mergeProps as H, Fragment as X, renderList as W, toDisplayString as U, resolveDynamicComponent as qe, createTextVNode as _e, nextTick as Je } from "vue";
+import { u as Ke, c as Qe, o as Ze, f as Te, g as et, e as tt, l as at, k as Y, i as q, X as lt, F as st, E as te, b as ot, v as nt, w as ut } from "./index-BFqW8WA0.js";
+import { t as rt, u as it } from "./useResponsive-DfdjqQps.js";
+import { u as ct } from "./usePrinter-DDIKRiOp.js";
+import { u as Ae } from "./useNestedProp-BSZCnuGl.js";
+import { u as vt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as dt } from "./useChartAccessibility-9icAAmYg.js";
+import ht from "./img-DvuphHeJ.js";
+import ft from "./Title-AGmmsSi_.js";
+import { _ as bt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const mt = ["id"], gt = ["xmlns", "viewBox"], yt = ["width", "height"], pt = ["id"], kt = ["stop-color"], Ct = ["stop-color"], wt = ["stop-color"], $t = ["stroke", "stroke-width"], xt = ["stroke", "stroke-width"], Lt = ["x", "y", "font-size", "fill", "font-weight"], _t = ["points", "fill"], Tt = ["stroke", "stroke-width", "rx"], At = ["x", "y", "font-size", "fill", "font-weight"], Ot = ["x", "y", "font-size", "fill", "font-weight"], St = {
   key: 5,
   class: "vue-data-ui-watermark"
-}, Ot = ["innerHTML"], St = {
+}, Dt = ["innerHTML"], zt = {
   __name: "vue-ui-funnel",
   props: {
     config: {
@@ -27,22 +27,22 @@ const ft = ["id"], bt = ["xmlns", "viewBox"], mt = ["width", "height"], gt = ["i
       }
     }
   },
-  setup(Te, { expose: Ae }) {
-    je((t) => ({
-      "37f515f8": Ee.value
+  setup(Oe, { expose: Se }) {
+    Xe((t) => ({
+      "1f851877": Ge.value
     }));
-    const Oe = x(() => import("./BaseIcon-DHtro8us.js")), Se = x(() => import("./vue-ui-skeleton-CFxBU2-p.js")), ze = x(() => import("./vue-ui-accordion-Bf_LHFFX.js")), De = x(() => import("./DataTable-DJjA2_wf.js")), Ne = x(() => import("./UserOptions-BuGfCdAY.js")), Pe = x(() => import("./PenAndPaper-B7QEDgx4.js")), Ie = x(() => import("./PackageVersion-DU12WH3O.js")), Fe = x(() => import("./BaseDraggableDialog-O7900pGp.js")), { vue_ui_funnel: Be } = qe(), y = Te, w = h(null), I = h(Je()), te = h(0), ae = h(0), le = h(0), se = h(null), oe = h(null), ne = h(null), $ = ke(null), O = ke(null), L = h(!1), F = h(null), S = d(() => !!y.dataset && y.dataset.length);
-    He(re);
+    const De = x(() => import("./BaseIcon-BLg8FaQ2.js")), ze = x(() => import("./vue-ui-skeleton-CeyaKpZd.js")), Ne = x(() => import("./vue-ui-accordion-Cv747Pg6.js")), Ie = x(() => import("./DataTable-BRN1-1ob.js")), Pe = x(() => import("./UserOptions-DEFwuQIo.js")), Fe = x(() => import("./PenAndPaper-TgGWddgD.js")), Re = x(() => import("./PackageVersion-Jz9FlNXl.js")), Be = x(() => import("./BaseDraggableDialog-Dkpr-qUQ.js")), { vue_ui_funnel: Me } = Ke(), y = Oe, w = c(null), P = c(Qe()), ae = c(0), le = c(0), se = c(0), oe = c(null), ne = c(null), ue = c(null), $ = we(null), A = we(null), L = c(!1), F = c(null), J = c(null), O = h(() => !!y.dataset && y.dataset.length);
+    We(re);
     function re() {
-      if (Ke(y.dataset) ? Le({
+      if (Ze(y.dataset) ? Te({
         componentName: "VueUiFunnel",
         type: "dataset"
       }) : y.dataset.forEach((t, l) => {
-        Qe({
+        et({
           datasetObject: t,
           requiredAttributes: ["name", "value"]
         }).forEach((a) => {
-          S.value = !1, Le({
+          O.value = !1, Te({
             componentName: "VueUiFunnel",
             type: "datasetSerieAttribute",
             property: a,
@@ -50,96 +50,96 @@ const ft = ["id"], bt = ["xmlns", "viewBox"], mt = ["width", "height"], gt = ["i
           });
         });
       }), e.value.responsive) {
-        const t = nt(() => {
-          const { width: l, height: a } = rt({
+        const t = rt(() => {
+          const { width: l, height: a } = it({
             chart: w.value,
-            title: e.value.style.chart.title.text ? ne.value : null,
-            source: oe.value,
-            noTitle: se.value
+            title: e.value.style.chart.title.text ? ue.value : null,
+            source: ne.value,
+            noTitle: oe.value
           });
           requestAnimationFrame(() => {
-            v.value.height = a, v.value.width = l, k.value = me(), e.value.responsiveProportionalSizing ? (c.value.circles = ee({
+            d.value.height = a, d.value.width = l, k.value = ge(), e.value.responsiveProportionalSizing ? (v.value.circles = te({
               relator: Math.min(l, a),
               adjuster: 600,
               source: e.value.style.chart.circles.dataLabels.fontSize,
               threshold: 10,
               fallback: 10
-            }), c.value.names = ee({
+            }), v.value.names = te({
               relator: Math.min(l, a),
               adjuster: 600,
               source: e.value.style.chart.bars.dataLabels.name.fontSize,
               threshold: 10,
               fallback: 10
-            }), c.value.values = ee({
+            }), v.value.values = te({
               relator: Math.min(l, a),
               adjuster: 600,
               source: e.value.style.chart.bars.dataLabels.value.fontSize,
               threshold: 10,
               fallback: 10
-            })) : (c.value.circles = e.value.style.chart.circles.dataLabels.fontSize, c.value.names = e.value.style.chart.bars.dataLabels.name.fontSize, c.value.values = e.value.style.chart.bars.dataLabels.value.fontSize);
+            })) : (v.value.circles = e.value.style.chart.circles.dataLabels.fontSize, v.value.names = e.value.style.chart.bars.dataLabels.name.fontSize, v.value.values = e.value.style.chart.bars.dataLabels.value.fontSize);
           });
         });
-        $.value && (O.value && $.value.unobserve(O.value), $.value.disconnect()), $.value = new ResizeObserver(t), O.value = w.value.parentNode, $.value.observe(O.value);
+        $.value && (A.value && $.value.unobserve(A.value), $.value.disconnect()), $.value = new ResizeObserver(t), A.value = w.value.parentNode, $.value.observe(A.value);
       }
     }
-    Xe(() => {
-      $.value && (O.value && $.value.unobserve(O.value), $.value.disconnect());
+    Ye(() => {
+      $.value && (A.value && $.value.unobserve(A.value), $.value.disconnect());
     });
-    function ue() {
-      const t = _e({
+    function ie() {
+      const t = Ae({
         userConfig: y.config,
-        defaultConfig: Be
+        defaultConfig: Me
       });
       return t.theme ? {
-        ..._e({
-          userConfig: lt.vue_ui_funnel[t.theme] || y.config,
+        ...Ae({
+          userConfig: ot.vue_ui_funnel[t.theme] || y.config,
           defaultConfig: t
         })
       } : t;
     }
-    const e = d({
-      get: () => ue(),
+    const e = h({
+      get: () => ie(),
       set: (t) => t
-    }), { userOptionsVisible: J, setUserOptionsVisibility: ie, keepUserOptionState: ce } = it({ config: e.value }), { svgRef: ve } = ct({ config: e.value.style.chart.title });
-    Ce(() => y.config, (t) => {
-      e.value = ue(), J.value = !e.value.userOptions.showOnChartHover, re(), ae.value += 1, le.value += 1, c.value.circles = e.value.style.chart.circles.dataLabels.fontSize, c.value.names = e.value.style.chart.bars.dataLabels.name.fontSize, c.value.values = e.value.style.chart.bars.dataLabels.value.fontSize, _.value.showTable = e.value.table.show;
+    }), { userOptionsVisible: K, setUserOptionsVisibility: ce, keepUserOptionState: ve } = vt({ config: e.value }), { svgRef: de } = dt({ config: e.value.style.chart.title });
+    $e(() => y.config, (t) => {
+      e.value = ie(), K.value = !e.value.userOptions.showOnChartHover, re(), le.value += 1, se.value += 1, v.value.circles = e.value.style.chart.circles.dataLabels.fontSize, v.value.names = e.value.style.chart.bars.dataLabels.name.fontSize, v.value.values = e.value.style.chart.bars.dataLabels.value.fontSize, S.value.showTable = e.value.table.show;
     }, { deep: !0 });
-    const { isPrinting: de, isImaging: he, generatePdf: fe, generateImage: be } = ut({
-      elementId: `funnel_${I.value}`,
+    const { isPrinting: he, isImaging: fe, generatePdf: be, generateImage: me } = ct({
+      elementId: `funnel_${P.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-funnel",
       options: e.value.userOptions.print
-    }), Re = d(() => e.value.userOptions.show && !e.value.style.chart.title.text), _ = h({
+    }), Ue = h(() => e.value.userOptions.show && !e.value.style.chart.title.text), S = c({
       showTable: e.value.table.show
-    }), c = h({
+    }), v = c({
       circles: e.value.style.chart.circles.dataLabels.fontSize,
       names: e.value.style.chart.bars.dataLabels.name.fontSize,
       values: e.value.style.chart.bars.dataLabels.value.fontSize
-    }), v = d({
+    }), d = h({
       get: () => ({
         height: e.value.style.chart.height,
         width: e.value.style.chart.width
       }),
       set: (t) => t
-    }), p = d(() => S.value ? y.dataset.map((t, l) => ({
+    }), p = h(() => O.value ? y.dataset.map((t, l) => ({
       ...t,
-      color: t.color ? Ze(t.color) : et(e.value.style.chart.bars.defaultColor, l / y.dataset.length)
+      color: t.color ? tt(t.color) : at(e.value.style.chart.bars.defaultColor, l / y.dataset.length)
     })) : []);
     setTimeout(() => {
       L.value = !0;
     }, p.value.length * 150);
-    function me() {
+    function ge() {
       const t = e.value.style.chart.padding.left, l = e.value.style.chart.padding.top;
       return {
         left: t,
         top: l,
-        right: v.value.width - e.value.style.chart.padding.right,
-        bottom: v.value.height - e.value.style.chart.padding.bottom,
-        width: v.value.width - t - e.value.style.chart.padding.right,
-        height: v.value.height - l - e.value.style.chart.padding.bottom
+        right: d.value.width - e.value.style.chart.padding.right,
+        bottom: d.value.height - e.value.style.chart.padding.bottom,
+        width: d.value.width - t - e.value.style.chart.padding.right,
+        height: d.value.height - l - e.value.style.chart.padding.bottom
       };
     }
-    const k = h(me()), z = d(() => k.value.height / y.dataset.length), T = d(() => z.value * e.value.style.chart.bars.gapRatio), ge = d(() => k.value.width * e.value.style.chart.barCircleSpacingRatio), r = d(() => p.value.map((t, l) => {
-      const a = z.value - T.value, o = k.value.top + T.value / 2 * l + (z.value - T.value / 2) * l + T.value / 2, f = t.value / p.value[0].value, u = (k.value.width - a - ge.value) * (t.value / p.value[0].value);
+    const k = c(ge()), D = h(() => k.value.height / y.dataset.length), _ = h(() => D.value * e.value.style.chart.bars.gapRatio), ye = h(() => k.value.width * e.value.style.chart.barCircleSpacingRatio), u = h(() => p.value.map((t, l) => {
+      const a = D.value - _.value, o = k.value.top + _.value / 2 * l + (D.value - _.value / 2) * l + _.value / 2, f = t.value / p.value[0].value, r = (k.value.width - a - ye.value) * (t.value / p.value[0].value);
       return {
         ...t,
         cx: k.value.left + a / 2,
@@ -149,65 +149,65 @@ const ft = ["id"], bt = ["xmlns", "viewBox"], mt = ["width", "height"], gt = ["i
         height: Math.max(a, 0),
         proportion: f,
         r: Math.max(a / 2, 0),
-        width: Math.max(u, 0),
-        x: k.value.left + a + ge.value,
+        width: Math.max(r, 0),
+        x: k.value.left + a + ye.value,
         y: o
       };
-    })), Me = d(() => {
-      const t = r.value.map((l) => `${l.x + l.width},${l.y + (z.value - T.value) / 2}`);
-      return `${r.value[0].x},${r.value[0].y + (z.value - T.value) / 2} ${t.toString()} ${r.value.at(-1).x},${r.value.at(-1).y + (z.value - T.value) / 2}`;
-    }), Ue = d(() => ({
-      x1: r.value[0].cx,
-      y1: r.value[0].cy,
-      x2: r.value.at(-1).cx,
-      y2: r.value.at(-1).cy
-    })), D = h(!1);
-    function ye(t) {
-      D.value = t, te.value += 1;
+    })), Ee = h(() => {
+      const t = u.value.map((l) => `${l.x + l.width},${l.y + (D.value - _.value) / 2}`);
+      return `${u.value[0].x},${u.value[0].y + (D.value - _.value) / 2} ${t.toString()} ${u.value.at(-1).x},${u.value.at(-1).y + (D.value - _.value) / 2}`;
+    }), Ve = h(() => ({
+      x1: u.value[0].cx,
+      y1: u.value[0].cy,
+      x2: u.value.at(-1).cx,
+      y2: u.value.at(-1).cy
+    })), z = c(!1);
+    function pe(t) {
+      z.value = t, ae.value += 1;
     }
-    const Ee = d(() => `${p.value.length * 150}ms`), E = h(!1);
-    function K() {
+    const Ge = h(() => `${p.value.length * 150}ms`), E = c(!1);
+    function Q() {
       E.value = !E.value;
     }
-    function pe() {
-      _.value.showTable = !_.value.showTable;
+    function ke() {
+      S.value.showTable = !S.value.showTable;
     }
-    const B = d(() => {
+    const R = h(() => {
       const t = p.value.map((a) => ({
         name: a.name,
         color: a.color
       })), l = p.value.map((a) => a.value);
       return { head: t, body: l };
-    }), V = d(() => {
+    }), V = h(() => {
       const t = [
         e.value.table.columnNames.series,
         e.value.table.columnNames.value,
         e.value.table.columnNames.percentage
-      ], l = B.value.head.map((f, u) => {
+      ], l = R.value.head.map((f, r) => {
         const M = Y(
           e.value.style.chart.bars.dataLabels.value.formatter,
-          B.value.body[u],
+          R.value.body[r],
           q({
             p: e.value.style.chart.bars.dataLabels.value.prefix,
-            v: B.value.body[u],
+            v: R.value.body[r],
             s: e.value.style.chart.bars.dataLabels.value.suffix,
             r: e.value.table.td.roundingValue
           }),
-          { datapoint: r.value[u] }
-        ), Z = Y(
+          { datapoint: u.value[r] }
+        ), ee = Y(
           e.value.style.chart.circles.dataLabels.formatter,
-          r.value[u].proportion * 100,
+          u.value[r].proportion * 100,
           q({
-            v: r.value[u].proportion * 100,
+            v: u.value[r].proportion * 100,
             s: "%",
             r: e.value.table.td.roundingPercentage
           }),
-          { datapoint: r.value[u] }
+          { datapoint: u.value[r] }
         );
         return [
           { color: f.color, name: f.name },
           M,
-          Z
+          ee
         ];
       }), a = {
         th: {
@@ -233,40 +233,40 @@ const ft = ["id"], bt = ["xmlns", "viewBox"], mt = ["width", "height"], gt = ["i
         config: a
       };
     });
-    function Q(t = null) {
-      Ye(() => {
-        const l = B.value.head.map((f, u) => [[
+    function Z(t = null) {
+      Je(() => {
+        const l = R.value.head.map((f, r) => [[
           f.name
-        ], [B.value.body[u]], [r.value[u].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 = st(a);
-        t ? t(o) : ot({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-funnel" });
+        ], [R.value.body[r]], [u.value[r].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 = nt(a);
+        t ? t(o) : ut({ csvContent: o, title: e.value.style.chart.title.text || "vue-ui-funnel" });
       });
     }
-    function Ve() {
+    function je() {
       return p.value;
     }
-    async function Ge({ scale: t = 2 } = {}) {
+    async function He({ scale: t = 2 } = {}) {
       if (!w.value) return;
-      const { width: l, height: a } = w.value.getBoundingClientRect(), o = l / a, { imageUri: f, base64: u } = await vt({ domElement: w.value, base64: !0, img: !0, scale: t });
+      const { width: l, height: a } = w.value.getBoundingClientRect(), o = l / a, { imageUri: f, base64: r } = await ht({ domElement: w.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: f,
-        base64: u,
+        base64: r,
         title: e.value.style.chart.title.text,
         width: l,
         height: a,
         aspectRatio: o
       };
     }
-    const R = d(() => {
-      const t = e.value.table.useDialog && !e.value.table.show, l = _.value.showTable;
+    const B = h(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, l = S.value.showTable;
       return {
-        component: t ? Fe : ze,
+        component: t ? Be : Ne,
         title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
         props: t ? {
           backgroundColor: e.value.table.th.backgroundColor,
           color: e.value.table.th.color,
           headerColor: e.value.table.th.color,
           headerBg: e.value.table.th.backgroundColor,
-          isFullscreen: D.value,
+          isFullscreen: z.value,
           fullscreenParent: w.value,
           forcedWidth: Math.min(800, window.innerWidth * 0.8)
         } : {
@@ -286,49 +286,53 @@ const ft = ["id"], bt = ["xmlns", "viewBox"], mt = ["width", "height"], gt = ["i
         }
       };
     });
-    return Ce(() => _.value.showTable, (t) => {
+    $e(() => S.value.showTable, (t) => {
       e.value.table.show || (t && e.value.table.useDialog && F.value ? F.value.open() : "close" in F.value && F.value.close());
-    }), Ae({
-      getData: Ve,
-      getImage: Ge,
-      generatePdf: fe,
-      generateCsv: Q,
-      generateImage: be,
-      toggleTable: pe,
-      toggleAnnotator: K,
-      toggleFullscreen: ye
+    });
+    function Ce() {
+      S.value.showTable = !1, J.value && J.value.setTableIconState(!1);
+    }
+    return Se({
+      getData: je,
+      getImage: He,
+      generatePdf: be,
+      generateCsv: Z,
+      generateImage: me,
+      toggleTable: ke,
+      toggleAnnotator: Q,
+      toggleFullscreen: pe
     }), (t, l) => (n(), i("div", {
       ref_key: "funnelChart",
       ref: w,
-      class: N(`vue-ui-funnel ${D.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
-      style: A(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height:100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
-      id: `funnel_${I.value}`,
-      onMouseenter: l[3] || (l[3] = () => s(ie)(!0)),
-      onMouseleave: l[4] || (l[4] = () => s(ie)(!1))
+      class: N(`vue-ui-funnel ${z.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: T(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height:100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      id: `funnel_${P.value}`,
+      onMouseenter: l[1] || (l[1] = () => s(ce)(!0)),
+      onMouseleave: l[2] || (l[2] = () => s(ce)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (n(), P(s(Pe), {
+      e.value.userOptions.buttons.annotator ? (n(), I(s(Fe), {
         key: 0,
-        svgRef: s(ve),
+        svgRef: s(de),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
         active: E.value,
-        onClose: K
+        onClose: Q
       }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : b("", !0),
-      Re.value ? (n(), i("div", {
+      Ue.value ? (n(), i("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: se,
+        ref: oe,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : b("", !0),
       e.value.style.chart.title.text ? (n(), i("div", {
         key: 2,
         ref_key: "chartTitle",
-        ref: ne,
+        ref: ue,
         style: "width:100%;background:transparent;padding-bottom:24px"
       }, [
-        (n(), P(dt, {
-          key: `title_${ae.value}`,
+        (n(), I(ft, {
+          key: `title_${le.value}`,
           config: {
             title: {
               cy: "funnel-div-title",
@@ -341,14 +345,15 @@ const ft = ["id"], bt = ["xmlns", "viewBox"], mt = ["width", "height"], gt = ["i
           }
         }, null, 8, ["config"]))
       ], 512)) : b("", !0),
-      e.value.userOptions.show && S.value && (s(ce) || s(J)) ? (n(), P(s(Ne), {
-        ref: "details",
-        key: `user_option_${te.value}`,
+      e.value.userOptions.show && O.value && (s(ve) || s(K)) ? (n(), I(s(Pe), {
+        ref_key: "userOptionsRef",
+        ref: J,
+        key: `user_option_${ae.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: s(de),
-        isImaging: s(he),
-        uid: I.value,
+        isPrinting: s(he),
+        isImaging: s(fe),
+        uid: P.value,
         hasTooltip: !1,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
@@ -356,7 +361,7 @@ const ft = ["id"], bt = ["xmlns", "viewBox"], mt = ["width", "height"], gt = ["i
         hasTable: e.value.userOptions.buttons.table,
         hasLabel: !1,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: D.value,
+        isFullscreen: z.value,
         chartElement: w.value,
         position: e.value.userOptions.position,
         titles: { ...e.value.userOptions.buttonTitles },
@@ -364,16 +369,17 @@ const ft = ["id"], bt = ["xmlns", "viewBox"], mt = ["width", "height"], gt = ["i
         isAnnotation: E.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
-        onToggleAnnotator: K,
-        onToggleFullscreen: ye,
-        onGeneratePdf: s(fe),
-        onGenerateImage: s(be),
-        onToggleTable: pe,
-        onGenerateCsv: Q,
-        style: A({
-          visibility: s(ce) ? s(J) ? "visible" : "hidden" : "visible"
+        tableDialog: e.value.table.useDialog,
+        onToggleAnnotator: Q,
+        onToggleFullscreen: pe,
+        onGeneratePdf: s(be),
+        onGenerateImage: s(me),
+        onToggleTable: ke,
+        onGenerateCsv: Z,
+        style: T({
+          visibility: s(ve) ? s(K) ? "visible" : "hidden" : "visible"
         })
-      }, we({ _: 2 }, [
+      }, xe({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
           fn: m(({ isOpen: a, color: o }) => [
@@ -423,32 +429,32 @@ const ft = ["id"], bt = ["xmlns", "viewBox"], mt = ["width", "height"], gt = ["i
           ]),
           key: "6"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : b("", !0),
-      S.value ? (n(), i("svg", {
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : b("", !0),
+      O.value ? (n(), i("svg", {
         key: 4,
         ref_key: "svgRef",
-        ref: ve,
-        xmlns: s(tt),
-        class: N({ "vue-data-ui-fullscreen--on": D.value, "vue-data-ui-fulscreen--off": !D.value }),
-        viewBox: `0 0 ${v.value.width <= 0 ? 10 : v.value.width} ${v.value.height <= 0 ? 10 : v.value.height}`,
-        style: A(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
+        ref: de,
+        xmlns: s(lt),
+        class: N({ "vue-data-ui-fullscreen--on": z.value, "vue-data-ui-fulscreen--off": !z.value }),
+        viewBox: `0 0 ${d.value.width <= 0 ? 10 : d.value.width} ${d.value.height <= 0 ? 10 : d.value.height}`,
+        style: T(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        $e(s(Ie)),
+        Le(s(Re)),
         t.$slots["chart-background"] ? (n(), i("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
-          width: v.value.width <= 0 ? 10 : v.value.width,
-          height: v.value.height <= 0 ? 10 : v.value.height,
+          width: d.value.width <= 0 ? 10 : d.value.width,
+          height: d.value.height <= 0 ? 10 : d.value.height,
           style: {
             pointerEvents: "none"
           }
         }, [
           g(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, mt)) : b("", !0),
+        ], 8, yt)) : b("", !0),
         C("defs", null, [
           C("linearGradient", {
-            id: `funnel_area_${I.value}`,
+            id: `funnel_area_${P.value}`,
             x1: "0%",
             x2: "100%",
             y1: "0%",
@@ -458,18 +464,18 @@ const ft = ["id"], bt = ["xmlns", "viewBox"], mt = ["width", "height"], gt = ["i
               offset: "0%",
               "stop-color": e.value.style.chart.backgroundColor,
               "stop-opacity": 0
-            }, null, 8, yt),
+            }, null, 8, kt),
             C("stop", {
               offset: "20%",
               "stop-color": e.value.style.chart.area.color
-            }, null, 8, pt),
+            }, null, 8, Ct),
             C("stop", {
               offset: "100%",
               "stop-color": e.value.style.chart.area.color
-            }, null, 8, kt)
-          ], 8, gt)
+            }, null, 8, wt)
+          ], 8, pt)
         ]),
-        e.value.style.chart.circleLinks.show ? (n(), i("line", H({ key: 1 }, Ue.value, {
+        e.value.style.chart.circleLinks.show ? (n(), i("line", H({ key: 1 }, Ve.value, {
           stroke: e.value.style.chart.circleLinks.color,
           "stroke-width": 12 * e.value.style.chart.circleLinks.widthRatio,
           "stroke-linecap": "round",
@@ -480,8 +486,8 @@ const ft = ["id"], bt = ["xmlns", "viewBox"], mt = ["width", "height"], gt = ["i
             strokeDasharray: e.value.useCssAnimation ? k.value.height : 0,
             strokeDashoffset: e.value.useCssAnimation ? k.value.height : 0
           }
-        }), null, 16, Ct)) : b("", !0),
-        (n(!0), i(X, null, W(r.value, ({ cx: a, cy: o, r: f, fill: u }, M) => (n(), i("circle", H({ ref_for: !0 }, { cx: a, cy: o, r: f, fill: u }, {
+        }), null, 16, $t)) : b("", !0),
+        (n(!0), i(X, null, W(u.value, ({ cx: a, cy: o, r: f, fill: r }, M) => (n(), i("circle", H({ ref_for: !0 }, { cx: a, cy: o, r: f, fill: r }, {
           stroke: e.value.style.chart.circles.stroke,
           "stroke-width": e.value.style.chart.circles.strokeWidth,
           class: {
@@ -490,18 +496,18 @@ const ft = ["id"], bt = ["xmlns", "viewBox"], mt = ["width", "height"], gt = ["i
           style: {
             animationDelay: `${150 * M}ms`
           }
-        }), null, 16, wt))), 256)),
-        (n(!0), i(X, null, W(r.value, (a, o) => (n(), i("text", {
+        }), null, 16, xt))), 256)),
+        (n(!0), i(X, null, W(u.value, (a, o) => (n(), i("text", {
           x: a.cx,
-          y: a.cy + c.value.circles / 3 + e.value.style.chart.circles.dataLabels.offsetY,
+          y: a.cy + v.value.circles / 3 + e.value.style.chart.circles.dataLabels.offsetY,
           "text-anchor": "middle",
-          "font-size": c.value.circles,
-          fill: e.value.style.chart.circles.dataLabels.adaptColorToBackground ? s(at)(a.color) : e.value.style.chart.circles.dataLabels.color,
+          "font-size": v.value.circles,
+          fill: e.value.style.chart.circles.dataLabels.adaptColorToBackground ? s(st)(a.color) : e.value.style.chart.circles.dataLabels.color,
           "font-weight": e.value.style.chart.circles.dataLabels.bold ? "bold" : "normal",
           class: N({
             animated: e.value.useCssAnimation && !L.value
           }),
-          style: A({
+          style: T({
             animationDelay: `${150 * o}ms`
           })
         }, U(s(Y)(
@@ -513,19 +519,19 @@ const ft = ["id"], bt = ["xmlns", "viewBox"], mt = ["width", "height"], gt = ["i
             r: e.value.style.chart.circles.dataLabels.rounding
           }),
           { datapoint: a }
-        )), 15, $t))), 256)),
+        )), 15, Lt))), 256)),
         e.value.style.chart.area.show ? (n(), i("polygon", {
           key: 2,
-          points: Me.value,
-          fill: `url(#funnel_area_${I.value})`,
+          points: Ee.value,
+          fill: `url(#funnel_area_${P.value})`,
           class: N({
             animated: e.value.useCssAnimation && !L.value
           }),
-          style: A({
+          style: T({
             transition: e.value.useCssAnimation ? `all ${150 * p.value.length}ms ease-in` : "none"
           })
-        }, null, 14, xt)) : b("", !0),
-        (n(!0), i(X, null, W(r.value, ({ x: a, y: o, height: f, width: u, fill: M }, Z) => (n(), i("rect", H({ ref_for: !0 }, { x: a, y: o, height: f, width: u, fill: M }, {
+        }, null, 14, _t)) : b("", !0),
+        (n(!0), i(X, null, W(u.value, ({ x: a, y: o, height: f, width: r, fill: M }, ee) => (n(), i("rect", H({ ref_for: !0 }, { x: a, y: o, height: f, width: r, fill: M }, {
           stroke: e.value.style.chart.bars.stroke,
           "stroke-width": e.value.style.chart.bars.strokeWidth,
           rx: e.value.style.chart.bars.borderRadius,
@@ -533,35 +539,35 @@ const ft = ["id"], bt = ["xmlns", "viewBox"], mt = ["width", "height"], gt = ["i
             animated: e.value.useCssAnimation && !L.value
           },
           style: {
-            animationDelay: `${150 * Z}ms`
+            animationDelay: `${150 * ee}ms`
           }
-        }), null, 16, Lt))), 256)),
-        (n(!0), i(X, null, W(r.value, (a, o) => (n(), i("g", null, [
+        }), null, 16, Tt))), 256)),
+        (n(!0), i(X, null, W(u.value, (a, o) => (n(), i("g", null, [
           C("text", {
             x: a.x + a.width + e.value.style.chart.bars.dataLabels.name.offsetX + 12,
-            y: a.cy - c.value.names / 2 + e.value.style.chart.bars.dataLabels.name.offsetY,
+            y: a.cy - v.value.names / 2 + e.value.style.chart.bars.dataLabels.name.offsetY,
             "text-anchor": "start",
-            "font-size": c.value.names,
+            "font-size": v.value.names,
             fill: e.value.style.chart.bars.dataLabels.name.color,
             "font-weight": e.value.style.chart.bars.dataLabels.name.bold ? "bold" : "normal",
             class: N({
               animated: e.value.useCssAnimation && !L.value
             }),
-            style: A({
+            style: T({
               animationDelay: `${150 * o}ms`
             })
-          }, U(a.name), 15, _t),
+          }, U(a.name), 15, At),
           C("text", {
             x: a.x + a.width + e.value.style.chart.bars.dataLabels.value.offsetX + 12,
-            y: a.cy + c.value.values + e.value.style.chart.bars.dataLabels.value.offsetY,
+            y: a.cy + v.value.values + e.value.style.chart.bars.dataLabels.value.offsetY,
             "text-anchor": "start",
-            "font-size": c.value.values,
+            "font-size": v.value.values,
             fill: e.value.style.chart.bars.dataLabels.value.color,
             "font-weight": e.value.style.chart.bars.dataLabels.value.bold ? "bold" : "normal",
             class: N({
               animated: e.value.useCssAnimation && !L.value
             }),
-            style: A({
+            style: T({
               animationDelay: `${150 * o}ms`
             })
           }, U(s(Y)(
@@ -574,14 +580,14 @@ const ft = ["id"], bt = ["xmlns", "viewBox"], mt = ["width", "height"], gt = ["i
               r: e.value.style.chart.bars.dataLabels.value.rounding
             }),
             { datapoint: a }
-          )), 15, Tt)
+          )), 15, Ot)
         ]))), 256)),
-        g(t.$slots, "svg", { svg: v.value }, void 0, !0)
-      ], 14, bt)) : b("", !0),
-      t.$slots.watermark ? (n(), i("div", At, [
-        g(t.$slots, "watermark", G(j({ isPrinting: s(de) || s(he) })), void 0, !0)
+        g(t.$slots, "svg", { svg: d.value }, void 0, !0)
+      ], 14, gt)) : b("", !0),
+      t.$slots.watermark ? (n(), i("div", St, [
+        g(t.$slots, "watermark", G(j({ isPrinting: s(he) || s(fe) })), void 0, !0)
       ])) : b("", !0),
-      S.value ? b("", !0) : (n(), P(s(Se), {
+      O.value ? b("", !0) : (n(), I(s(ze), {
         key: 6,
         config: {
           type: "verticalBar",
@@ -599,35 +605,35 @@ const ft = ["id"], bt = ["xmlns", "viewBox"], mt = ["width", "height"], gt = ["i
       t.$slots.source ? (n(), i("div", {
         key: 7,
         ref_key: "source",
-        ref: oe,
+        ref: ne,
         dir: "auto"
       }, [
         g(t.$slots, "source", {}, void 0, !0)
       ], 512)) : b("", !0),
-      S.value ? (n(), P(We(R.value.component), H({ key: 8 }, R.value.props, {
+      O.value ? (n(), I(qe(B.value.component), H({ key: 8 }, B.value.props, {
         ref_key: "tableUnit",
         ref: F,
-        onClose: l[2] || (l[2] = (a) => _.value.showTable = !1)
-      }), we({
+        onClose: Ce
+      }), xe({
         content: m(() => [
-          (n(), P(s(De), {
-            key: `table_${le.value}`,
+          (n(), I(s(Ie), {
+            key: `table_${se.value}`,
             colNames: V.value.colNames,
             head: V.value.head,
             body: V.value.body,
             config: V.value.config,
-            title: e.value.table.useDialog ? "" : R.value.title,
+            title: e.value.table.useDialog ? "" : B.value.title,
             withCloseButton: !e.value.table.useDialog,
-            onClose: l[1] || (l[1] = (a) => _.value.showTable = !1)
+            onClose: Ce
           }, {
             th: m(({ th: a }) => [
               C("div", {
                 innerHTML: a,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, Ot)
+              }, null, 8, Dt)
             ]),
             td: m(({ td: a }) => [
-              xe(U(a.name ? a.name : a), 1)
+              _e(U(a.name ? a.name : a), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
@@ -637,7 +643,7 @@ const ft = ["id"], bt = ["xmlns", "viewBox"], mt = ["width", "height"], gt = ["i
         e.value.table.useDialog ? {
           name: "title",
           fn: m(() => [
-            xe(U(R.value.title), 1)
+            _e(U(B.value.title), 1)
           ]),
           key: "0"
         } : void 0,
@@ -647,20 +653,20 @@ const ft = ["id"], bt = ["xmlns", "viewBox"], mt = ["width", "height"], gt = ["i
             C("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
-              onClick: l[0] || (l[0] = (a) => Q(e.value.userOptions.callbacks.csv))
+              onClick: l[0] || (l[0] = (a) => Z(e.value.userOptions.callbacks.csv))
             }, [
-              $e(s(Oe), {
+              Le(s(De), {
                 name: "excel",
-                stroke: R.value.props.color
+                stroke: B.value.props.color
               }, null, 8, ["stroke"])
             ])
           ]),
           key: "1"
         } : void 0
       ]), 1040)) : b("", !0)
-    ], 46, ft));
+    ], 46, mt));
   }
-}, Et = /* @__PURE__ */ ht(St, [["__scopeId", "data-v-9bbf1be0"]]);
+}, Gt = /* @__PURE__ */ bt(zt, [["__scopeId", "data-v-2f7f46c4"]]);
 export {
-  Et as default
+  Gt as default
 };