vue-data-ui 2.12.5 → 2.12.7-beta.0

package/dist/{vue-ui-funnel-CcDOoxp8.js → vue-ui-funnel-DFxcmAB5.js}

@@ -1,21 +1,16 @@
-import { useCssVars as Le, computed as v, onMounted as Te, ref as c, watch as Ae, createElementBlock as u, openBlock as s, unref as n, normalizeStyle as _, normalizeClass as T, createBlock as A, createCommentVNode as f, createSlots as Ne, withCtx as g, renderSlot as b, normalizeProps as M, guardReactiveProps as R, createVNode as Oe, createElementVNode as C, mergeProps as q, Fragment as V, renderList as B, toDisplayString as U, createTextVNode as ze, nextTick as Se } from "vue";
-import { u as Fe, o as Ie, e as me, g as Pe, c as De, d as Me, l as Re, i as E, f as G, X as Ve, G as Be, F as Y, a as Ue, q as Ee, r as Ge } from "./index-vjCxtaM0.js";
-import { u as be } from "./useNestedProp-Du1hnYFA.js";
-import { u as je, U as He } from "./usePrinter-CcgJXHIK.js";
-import { _ as Xe } from "./Title-xO1jFsSw.js";
-import { _ as qe } from "./PenAndPaper-DLsvRwoD.js";
-import { D as Ye } from "./DataTable-CicthvOV.js";
-import We from "./vue-ui-accordion-CAN430Oy.js";
-import { t as Je, u as Ke } from "./useResponsive-JZ9xq-JV.js";
-import Qe from "./vue-ui-skeleton-DfOIDTJM.js";
-import { u as Ze } from "./useUserOptionState-BIvW1Kz7.js";
-import { _ as et } from "./PackageVersion-Cw2caN1c.js";
-import { u as tt } from "./useChartAccessibility-BWojgys7.js";
-import { _ as at } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const lt = ["id"], st = ["xmlns", "viewBox"], ot = ["width", "height"], nt = ["id"], rt = ["stop-color"], ut = ["stop-color"], it = ["stop-color"], ct = ["stroke", "stroke-width"], vt = ["stroke", "stroke-width"], dt = ["x", "y", "font-size", "fill", "font-weight"], ht = ["points", "fill"], ft = ["stroke", "stroke-width", "rx"], mt = ["x", "y", "font-size", "fill", "font-weight"], bt = ["x", "y", "font-size", "fill", "font-weight"], yt = {
+import { useCssVars as Ie, computed as c, defineAsyncComponent as N, ref as v, shallowRef as ye, onMounted as De, onBeforeUnmount as Re, watch as Me, createElementBlock as u, openBlock as o, unref as s, normalizeStyle as _, normalizeClass as O, createBlock as z, createCommentVNode as f, createSlots as Ve, withCtx as g, renderSlot as m, normalizeProps as B, guardReactiveProps as E, createVNode as Be, createElementVNode as w, mergeProps as J, Fragment as U, renderList as G, toDisplayString as j, createTextVNode as Ee, nextTick as Ue } from "vue";
+import { u as Ge, c as je, o as He, e as ge, g as Xe, d as qe, l as Ye, i as H, f as X, X as We, G as Je, F as K, a as Ke, q as Qe, r as Ze } from "./index-BiHmNd1-.js";
+import { u as pe } from "./useNestedProp-tRqS0ZAM.js";
+import { u as et } from "./usePrinter-CRCbl1WG.js";
+import { t as tt, u as at } from "./useResponsive-JZ9xq-JV.js";
+import { u as lt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as st } from "./useChartAccessibility-9icAAmYg.js";
+import ot from "./Title-B5qqUI3M.js";
+import { _ as nt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const rt = ["id"], ut = ["xmlns", "viewBox"], it = ["width", "height"], ct = ["id"], vt = ["stop-color"], dt = ["stop-color"], ht = ["stop-color"], ft = ["stroke", "stroke-width"], bt = ["stroke", "stroke-width"], mt = ["x", "y", "font-size", "fill", "font-weight"], yt = ["points", "fill"], gt = ["stroke", "stroke-width", "rx"], pt = ["x", "y", "font-size", "fill", "font-weight"], kt = ["x", "y", "font-size", "fill", "font-weight"], Ct = {
   key: 5,
   class: "vue-data-ui-watermark"
-}, gt = ["innerHTML"], pt = {
+}, wt = ["innerHTML"], $t = {
   __name: "vue-ui-funnel",
   props: {
     config: {
@@ -31,22 +26,22 @@ const lt = ["id"], st = ["xmlns", "viewBox"], ot = ["width", "height"], nt = ["i
       }
     }
   },
-  setup(ye, { expose: ge }) {
-    Le((t) => ({
-      "58a5200a": _e.value
+  setup(ke, { expose: Ce }) {
+    Ie((t) => ({
+      "4791aede": Pe.value
     }));
-    const { vue_ui_funnel: pe } = Fe(), y = ye, x = v(() => !!y.dataset && y.dataset.length);
-    Te(W);
-    function W() {
-      if (Ie(y.dataset) ? me({
+    const we = N(() => import("./vue-ui-accordion-CmCs2yR2.js")), $e = N(() => import("./DataTable-Cv9CIz-a.js")), xe = N(() => import("./PackageVersion-CLY-udAA.js")), _e = N(() => import("./PenAndPaper-B9na2mbr.js")), Le = N(() => import("./vue-ui-skeleton-CbYQYRvD.js")), Ae = N(() => import("./UserOptions-Ddy6CuLC.js")), { vue_ui_funnel: Te } = Ge(), y = ke, R = v(null), S = v(je()), Q = v(0), Z = v(0), ee = v(0), te = v(null), ae = v(null), le = v(null), C = ye(null), L = ye(null), $ = v(!1), A = c(() => !!y.dataset && y.dataset.length);
+    De(se);
+    function se() {
+      if (He(y.dataset) ? ge({
         componentName: "VueUiFunnel",
         type: "dataset"
       }) : y.dataset.forEach((t, l) => {
-        Pe({
+        Xe({
           datasetObject: t,
           requiredAttributes: ["name", "value"]
         }).forEach((a) => {
-          x.value = !1, me({
+          A.value = !1, ge({
             componentName: "VueUiFunnel",
             type: "datasetSerieAttribute",
             property: a,
@@ -54,27 +49,27 @@ const lt = ["id"], st = ["xmlns", "viewBox"], ot = ["width", "height"], nt = ["i
           });
         });
       }), e.value.responsive) {
-        const t = Je(() => {
-          const { width: l, height: a } = Ke({
-            chart: I.value,
-            title: e.value.style.chart.title.text ? te.value : null,
-            source: ee.value,
-            noTitle: Z.value
+        const t = tt(() => {
+          const { width: l, height: a } = at({
+            chart: R.value,
+            title: e.value.style.chart.title.text ? le.value : null,
+            source: ae.value,
+            noTitle: te.value
           });
           requestAnimationFrame(() => {
-            i.value.height = a, i.value.width = l, k.value = ve(), d.value.circles = Y({
+            i.value.height = a, i.value.width = l, k.value = he(), d.value.circles = K({
               relator: Math.min(l, a),
               adjuster: 600,
               source: e.value.style.chart.circles.dataLabels.fontSize,
               threshold: 10,
               fallback: 10
-            }), d.value.names = Y({
+            }), d.value.names = K({
               relator: Math.min(l, a),
               adjuster: 600,
               source: e.value.style.chart.bars.dataLabels.name.fontSize,
               threshold: 10,
               fallback: 10
-            }), d.value.values = Y({
+            }), d.value.values = K({
               relator: Math.min(l, a),
               adjuster: 600,
               source: e.value.style.chart.bars.dataLabels.value.fontSize,
@@ -83,53 +78,55 @@ const lt = ["id"], st = ["xmlns", "viewBox"], ot = ["width", "height"], nt = ["i
             });
           });
         });
-        ae.value = new ResizeObserver(t), ae.value.observe(I.value.parentNode);
+        C.value && (L.value && C.value.unobserve(L.value), C.value.disconnect()), C.value = new ResizeObserver(t), L.value = R.value.parentNode, C.value.observe(L.value);
       }
     }
-    const I = c(null), N = c(De()), J = c(0), K = c(0), Q = c(0), Z = c(null), ee = c(null), te = c(null), ae = c(null), w = c(!1);
-    function le() {
-      const t = be({
+    Re(() => {
+      C.value && (L.value && C.value.unobserve(L.value), C.value.disconnect());
+    });
+    function oe() {
+      const t = pe({
         userConfig: y.config,
-        defaultConfig: pe
+        defaultConfig: Te
       });
       return t.theme ? {
-        ...be({
-          userConfig: Ue.vue_ui_funnel[t.theme] || y.config,
+        ...pe({
+          userConfig: Ke.vue_ui_funnel[t.theme] || y.config,
           defaultConfig: t
         })
       } : t;
     }
-    const e = v({
-      get: () => le(),
+    const e = c({
+      get: () => oe(),
       set: (t) => t
-    }), { userOptionsVisible: j, setUserOptionsVisibility: se, keepUserOptionState: oe } = Ze({ config: e.value }), { svgRef: ne } = tt({ config: e.value.style.chart.title });
-    Ae(() => y.config, (t) => {
-      e.value = le(), j.value = !e.value.userOptions.showOnChartHover, W(), K.value += 1, Q.value += 1, d.value.circles = e.value.style.chart.circles.dataLabels.fontSize, d.value.names = e.value.style.chart.bars.dataLabels.name.fontSize, d.value.values = e.value.style.chart.bars.dataLabels.value.fontSize, O.value.showTable = e.value.table.show;
+    }), { userOptionsVisible: q, setUserOptionsVisibility: ne, keepUserOptionState: re } = lt({ config: e.value }), { svgRef: ue } = st({ config: e.value.style.chart.title });
+    Me(() => y.config, (t) => {
+      e.value = oe(), q.value = !e.value.userOptions.showOnChartHover, se(), Z.value += 1, ee.value += 1, d.value.circles = e.value.style.chart.circles.dataLabels.fontSize, d.value.names = e.value.style.chart.bars.dataLabels.name.fontSize, d.value.values = e.value.style.chart.bars.dataLabels.value.fontSize, P.value.showTable = e.value.table.show;
     }, { deep: !0 });
-    const { isPrinting: re, isImaging: ue, generatePdf: ie, generateImage: ce } = je({
-      elementId: `funnel_${N.value}`,
+    const { isPrinting: ie, isImaging: ce, generatePdf: ve, generateImage: de } = et({
+      elementId: `funnel_${S.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-funnel",
       options: e.value.userOptions.print
-    }), ke = v(() => e.value.userOptions.show && !e.value.style.chart.title.text), O = c({
+    }), Ne = c(() => e.value.userOptions.show && !e.value.style.chart.title.text), P = v({
       showTable: e.value.table.show
-    }), d = c({
+    }), d = v({
       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
-    }), i = v({
+    }), i = c({
       get: () => ({
         height: e.value.style.chart.height,
         width: e.value.style.chart.width
       }),
       set: (t) => t
-    }), p = v(() => x.value ? y.dataset.map((t, l) => ({
+    }), p = c(() => A.value ? y.dataset.map((t, l) => ({
       ...t,
-      color: t.color ? Me(t.color) : Re(e.value.style.chart.bars.defaultColor, l / y.dataset.length)
+      color: t.color ? qe(t.color) : Ye(e.value.style.chart.bars.defaultColor, l / y.dataset.length)
     })) : []);
     setTimeout(() => {
-      w.value = !0;
+      $.value = !0;
     }, p.value.length * 150);
-    function ve() {
+    function he() {
       const t = e.value.style.chart.padding.left, l = e.value.style.chart.padding.top;
       return {
         left: t,
@@ -140,66 +137,66 @@ const lt = ["id"], st = ["xmlns", "viewBox"], ot = ["width", "height"], nt = ["i
         height: i.value.height - l - e.value.style.chart.padding.bottom
       };
     }
-    const k = c(ve()), L = v(() => k.value.height / y.dataset.length), $ = v(() => L.value * e.value.style.chart.bars.gapRatio), de = v(() => k.value.width * e.value.style.chart.barCircleSpacingRatio), r = v(() => p.value.map((t, l) => {
-      const a = L.value - $.value, o = k.value.top + $.value / 2 * l + (L.value - $.value / 2) * l + $.value / 2, m = t.value / p.value[0].value, h = (k.value.width - a - de.value) * (t.value / p.value[0].value);
+    const k = v(he()), T = c(() => k.value.height / y.dataset.length), x = c(() => T.value * e.value.style.chart.bars.gapRatio), fe = c(() => k.value.width * e.value.style.chart.barCircleSpacingRatio), r = c(() => p.value.map((t, l) => {
+      const a = T.value - x.value, n = k.value.top + x.value / 2 * l + (T.value - x.value / 2) * l + x.value / 2, b = t.value / p.value[0].value, h = (k.value.width - a - fe.value) * (t.value / p.value[0].value);
       return {
         ...t,
         cx: k.value.left + a / 2,
-        cy: o + a / 2,
+        cy: n + a / 2,
         datapointIndex: l,
         fill: t.color,
         height: Math.max(a, 0),
-        proportion: m,
+        proportion: b,
         r: Math.max(a / 2, 0),
         width: Math.max(h, 0),
-        x: k.value.left + a + de.value,
-        y: o
+        x: k.value.left + a + fe.value,
+        y: n
       };
-    })), Ce = v(() => {
-      const t = r.value.map((l) => `${l.x + l.width},${l.y + (L.value - $.value) / 2}`);
-      return `${r.value[0].x},${r.value[0].y + (L.value - $.value) / 2} ${t.toString()} ${r.value.at(-1).x},${r.value.at(-1).y + (L.value - $.value) / 2}`;
-    }), we = v(() => ({
+    })), Oe = c(() => {
+      const t = r.value.map((l) => `${l.x + l.width},${l.y + (T.value - x.value) / 2}`);
+      return `${r.value[0].x},${r.value[0].y + (T.value - x.value) / 2} ${t.toString()} ${r.value.at(-1).x},${r.value.at(-1).y + (T.value - x.value) / 2}`;
+    }), ze = c(() => ({
       x1: r.value[0].cx,
       y1: r.value[0].cy,
       x2: r.value.at(-1).cx,
       y2: r.value.at(-1).cy
-    })), z = c(!1);
-    function $e(t) {
-      z.value = t, J.value += 1;
+    })), F = v(!1);
+    function Se(t) {
+      F.value = t, Q.value += 1;
     }
-    const _e = v(() => `${p.value.length * 150}ms`), P = c(!1);
-    function H() {
-      P.value = !P.value;
+    const Pe = c(() => `${p.value.length * 150}ms`), M = v(!1);
+    function Y() {
+      M.value = !M.value;
     }
-    function he() {
-      O.value.showTable = !O.value.showTable;
+    function be() {
+      P.value.showTable = !P.value.showTable;
     }
-    const S = v(() => {
+    const I = c(() => {
       const t = p.value.map((a) => ({
         name: a.name,
         color: a.color
       })), l = p.value.map((a) => a.value);
       return { head: t, body: l };
-    }), D = v(() => {
+    }), V = c(() => {
       const t = [
         e.value.table.columnNames.series,
         e.value.table.columnNames.value,
         e.value.table.columnNames.percentage
-      ], l = S.value.head.map((m, h) => {
-        const F = E(
+      ], l = I.value.head.map((b, h) => {
+        const D = H(
           e.value.style.chart.bars.dataLabels.value.formatter,
-          S.value.body[h],
-          G({
+          I.value.body[h],
+          X({
             p: e.value.style.chart.bars.dataLabels.value.prefix,
-            v: S.value.body[h],
+            v: I.value.body[h],
             s: e.value.style.chart.bars.dataLabels.value.suffix,
             r: e.value.table.td.roundingValue
           }),
           { datapoint: r.value[h] }
-        ), X = E(
+        ), W = H(
           e.value.style.chart.circles.dataLabels.formatter,
           r.value[h].proportion * 100,
-          G({
+          X({
             v: r.value[h].proportion * 100,
             s: "%",
             r: e.value.table.td.roundingPercentage
@@ -207,9 +204,9 @@ const lt = ["id"], st = ["xmlns", "viewBox"], ot = ["width", "height"], nt = ["i
           { datapoint: r.value[h] }
         );
         return [
-          { color: m.color, name: m.name },
-          F,
-          X
+          { color: b.color, name: b.name },
+          D,
+          W
         ];
       }), a = {
         th: {
@@ -235,56 +232,56 @@ const lt = ["id"], st = ["xmlns", "viewBox"], ot = ["width", "height"], nt = ["i
         config: a
       };
     });
-    function fe() {
-      Se(() => {
-        const t = S.value.head.map((o, m) => [[
-          o.name
-        ], [S.value.body[m]], [r.value[m].proportion * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[e.value.table.columnNames.series], [e.value.table.columnNames.value], ["%"]]].concat(t), a = Ee(l);
-        Ge({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-funnel" });
+    function me() {
+      Ue(() => {
+        const t = I.value.head.map((n, b) => [[
+          n.name
+        ], [I.value.body[b]], [r.value[b].proportion * 100]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[e.value.table.columnNames.series], [e.value.table.columnNames.value], ["%"]]].concat(t), a = Qe(l);
+        Ze({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-funnel" });
       });
     }
-    function xe() {
+    function Fe() {
       return p.value;
     }
-    return ge({
-      getData: xe,
-      generatePdf: ie,
-      generateCsv: fe,
-      generateImage: ce,
-      toggleTable: he,
-      toggleAnnotator: H
-    }), (t, l) => (s(), u("div", {
+    return Ce({
+      getData: Fe,
+      generatePdf: ve,
+      generateCsv: me,
+      generateImage: de,
+      toggleTable: be,
+      toggleAnnotator: Y
+    }), (t, l) => (o(), u("div", {
       ref_key: "funnelChart",
-      ref: I,
-      class: T(`vue-ui-funnel ${z.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      ref: R,
+      class: O(`vue-ui-funnel ${F.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
       style: _(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height:100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
-      id: `funnel_${N.value}`,
-      onMouseenter: l[1] || (l[1] = () => n(se)(!0)),
-      onMouseleave: l[2] || (l[2] = () => n(se)(!1))
+      id: `funnel_${S.value}`,
+      onMouseenter: l[1] || (l[1] = () => s(ne)(!0)),
+      onMouseleave: l[2] || (l[2] = () => s(ne)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (s(), A(qe, {
+      e.value.userOptions.buttons.annotator ? (o(), z(s(_e), {
         key: 0,
-        svgRef: n(ne),
+        svgRef: s(ue),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        active: P.value,
-        onClose: H
+        active: M.value,
+        onClose: Y
       }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : f("", !0),
-      ke.value ? (s(), u("div", {
+      Ne.value ? (o(), u("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: Z,
+        ref: te,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : f("", !0),
-      e.value.style.chart.title.text ? (s(), u("div", {
+      e.value.style.chart.title.text ? (o(), u("div", {
         key: 2,
         ref_key: "chartTitle",
-        ref: te,
+        ref: le,
         style: "width:100%;background:transparent;padding-bottom:24px"
       }, [
-        (s(), A(Xe, {
-          key: `title_${K.value}`,
+        (o(), z(ot, {
+          key: `title_${Z.value}`,
           config: {
             title: {
               cy: "funnel-div-title",
@@ -297,14 +294,14 @@ const lt = ["id"], st = ["xmlns", "viewBox"], ot = ["width", "height"], nt = ["i
           }
         }, null, 8, ["config"]))
       ], 512)) : f("", !0),
-      e.value.userOptions.show && x.value && (n(oe) || n(j)) ? (s(), A(He, {
+      e.value.userOptions.show && A.value && (s(re) || s(q)) ? (o(), z(s(Ae), {
         ref: "details",
-        key: `user_option_${J.value}`,
+        key: `user_option_${Q.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: n(re),
-        isImaging: n(ue),
-        uid: N.value,
+        isPrinting: s(ie),
+        isImaging: s(ce),
+        uid: S.value,
         hasTooltip: !1,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
@@ -312,83 +309,83 @@ const lt = ["id"], st = ["xmlns", "viewBox"], ot = ["width", "height"], nt = ["i
         hasTable: e.value.userOptions.buttons.table,
         hasLabel: !1,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: z.value,
-        chartElement: I.value,
+        isFullscreen: F.value,
+        chartElement: R.value,
         position: e.value.userOptions.position,
         titles: { ...e.value.userOptions.buttonTitles },
         hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: P.value,
-        onToggleAnnotator: H,
-        onToggleFullscreen: $e,
-        onGeneratePdf: n(ie),
-        onGenerateImage: n(ce),
-        onToggleTable: he,
-        onGenerateCsv: fe,
+        isAnnotation: M.value,
+        onToggleAnnotator: Y,
+        onToggleFullscreen: Se,
+        onGeneratePdf: s(ve),
+        onGenerateImage: s(de),
+        onToggleTable: be,
+        onGenerateCsv: me,
         style: _({
-          visibility: n(oe) ? n(j) ? "visible" : "hidden" : "visible"
+          visibility: s(re) ? s(q) ? "visible" : "hidden" : "visible"
         })
-      }, Ne({ _: 2 }, [
+      }, Ve({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: g(({ isOpen: a, color: o }) => [
-            b(t.$slots, "menuIcon", M(R({ isOpen: a, color: o })), void 0, !0)
+          fn: g(({ isOpen: a, color: n }) => [
+            m(t.$slots, "menuIcon", B(E({ isOpen: a, color: n })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
           fn: g(() => [
-            b(t.$slots, "optionPdf", {}, void 0, !0)
+            m(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
           fn: g(() => [
-            b(t.$slots, "optionCsv", {}, void 0, !0)
+            m(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
           fn: g(() => [
-            b(t.$slots, "optionImg", {}, void 0, !0)
+            m(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
           fn: g(() => [
-            b(t.$slots, "optionTable", {}, void 0, !0)
+            m(t.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: g(({ toggleFullscreen: a, isFullscreen: o }) => [
-            b(t.$slots, "optionFullscreen", M(R({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
+          fn: g(({ toggleFullscreen: a, isFullscreen: n }) => [
+            m(t.$slots, "optionFullscreen", B(E({ toggleFullscreen: a, isFullscreen: n })), void 0, !0)
           ]),
           key: "5"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: g(({ toggleAnnotator: a, isAnnotator: o }) => [
-            b(t.$slots, "optionAnnotator", M(R({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
+          fn: g(({ toggleAnnotator: a, isAnnotator: n }) => [
+            m(t.$slots, "optionAnnotator", B(E({ toggleAnnotator: a, isAnnotator: n })), void 0, !0)
           ]),
           key: "6"
         } : void 0
       ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
-      x.value ? (s(), u("svg", {
+      A.value ? (o(), u("svg", {
         key: 4,
         ref_key: "svgRef",
-        ref: ne,
-        xmlns: n(Ve),
-        class: T({ "vue-data-ui-fullscreen--on": z.value, "vue-data-ui-fulscreen--off": !z.value }),
+        ref: ue,
+        xmlns: s(We),
+        class: O({ "vue-data-ui-fullscreen--on": F.value, "vue-data-ui-fulscreen--off": !F.value }),
         viewBox: `0 0 ${i.value.width <= 0 ? 10 : i.value.width} ${i.value.height <= 0 ? 10 : i.value.height}`,
         style: _(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
       }, [
-        Oe(et),
-        t.$slots["chart-background"] ? (s(), u("foreignObject", {
+        Be(s(xe)),
+        t.$slots["chart-background"] ? (o(), u("foreignObject", {
           key: 0,
           x: 0,
           y: 0,
@@ -398,32 +395,32 @@ const lt = ["id"], st = ["xmlns", "viewBox"], ot = ["width", "height"], nt = ["i
             pointerEvents: "none"
           }
         }, [
-          b(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, ot)) : f("", !0),
-        C("defs", null, [
-          C("linearGradient", {
-            id: `funnel_area_${N.value}`,
+          m(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, it)) : f("", !0),
+        w("defs", null, [
+          w("linearGradient", {
+            id: `funnel_area_${S.value}`,
             x1: "0%",
             x2: "100%",
             y1: "0%",
             y2: "0%"
           }, [
-            C("stop", {
+            w("stop", {
               offset: "0%",
               "stop-color": e.value.style.chart.backgroundColor,
               "stop-opacity": 0
-            }, null, 8, rt),
-            C("stop", {
+            }, null, 8, vt),
+            w("stop", {
               offset: "20%",
               "stop-color": e.value.style.chart.area.color
-            }, null, 8, ut),
-            C("stop", {
+            }, null, 8, dt),
+            w("stop", {
               offset: "100%",
               "stop-color": e.value.style.chart.area.color
-            }, null, 8, it)
-          ], 8, nt)
+            }, null, 8, ht)
+          ], 8, ct)
         ]),
-        e.value.style.chart.circleLinks.show ? (s(), u("line", q({ key: 1 }, we.value, {
+        e.value.style.chart.circleLinks.show ? (o(), u("line", J({ key: 1 }, ze.value, {
           stroke: e.value.style.chart.circleLinks.color,
           "stroke-width": 12 * e.value.style.chart.circleLinks.widthRatio,
           "stroke-linecap": "round",
@@ -434,108 +431,108 @@ const lt = ["id"], st = ["xmlns", "viewBox"], ot = ["width", "height"], nt = ["i
             strokeDasharray: e.value.useCssAnimation ? k.value.height : 0,
             strokeDashoffset: e.value.useCssAnimation ? k.value.height : 0
           }
-        }), null, 16, ct)) : f("", !0),
-        (s(!0), u(V, null, B(r.value, ({ cx: a, cy: o, r: m, fill: h }, F) => (s(), u("circle", q({ ref_for: !0 }, { cx: a, cy: o, r: m, fill: h }, {
+        }), null, 16, ft)) : f("", !0),
+        (o(!0), u(U, null, G(r.value, ({ cx: a, cy: n, r: b, fill: h }, D) => (o(), u("circle", J({ ref_for: !0 }, { cx: a, cy: n, r: b, fill: h }, {
           stroke: e.value.style.chart.circles.stroke,
           "stroke-width": e.value.style.chart.circles.strokeWidth,
           class: {
-            animated: e.value.useCssAnimation && !w.value
+            animated: e.value.useCssAnimation && !$.value
           },
           style: {
-            animationDelay: `${150 * F}ms`
+            animationDelay: `${150 * D}ms`
           }
-        }), null, 16, vt))), 256)),
-        (s(!0), u(V, null, B(r.value, (a, o) => (s(), u("text", {
+        }), null, 16, bt))), 256)),
+        (o(!0), u(U, null, G(r.value, (a, n) => (o(), u("text", {
           x: a.cx,
           y: a.cy + d.value.circles / 3 + e.value.style.chart.circles.dataLabels.offsetY,
           "text-anchor": "middle",
           "font-size": d.value.circles,
-          fill: e.value.style.chart.circles.dataLabels.adaptColorToBackground ? n(Be)(a.color) : e.value.style.chart.circles.dataLabels.color,
+          fill: e.value.style.chart.circles.dataLabels.adaptColorToBackground ? s(Je)(a.color) : e.value.style.chart.circles.dataLabels.color,
           "font-weight": e.value.style.chart.circles.dataLabels.bold ? "bold" : "normal",
-          class: T({
-            animated: e.value.useCssAnimation && !w.value
+          class: O({
+            animated: e.value.useCssAnimation && !$.value
           }),
           style: _({
-            animationDelay: `${150 * o}ms`
+            animationDelay: `${150 * n}ms`
           })
-        }, U(n(E)(
+        }, j(s(H)(
           e.value.style.chart.circles.dataLabels.formatter,
           a.proportion * 100,
-          n(G)({
+          s(X)({
             v: a.proportion * 100,
             s: "%",
             r: e.value.style.chart.circles.dataLabels.rounding
           }),
           { datapoint: a }
-        )), 15, dt))), 256)),
-        e.value.style.chart.area.show ? (s(), u("polygon", {
+        )), 15, mt))), 256)),
+        e.value.style.chart.area.show ? (o(), u("polygon", {
           key: 2,
-          points: Ce.value,
-          fill: `url(#funnel_area_${N.value})`,
-          class: T({
-            animated: e.value.useCssAnimation && !w.value
+          points: Oe.value,
+          fill: `url(#funnel_area_${S.value})`,
+          class: O({
+            animated: e.value.useCssAnimation && !$.value
           }),
           style: _({
             transition: e.value.useCssAnimation ? `all ${150 * p.value.length}ms ease-in` : "none"
           })
-        }, null, 14, ht)) : f("", !0),
-        (s(!0), u(V, null, B(r.value, ({ x: a, y: o, height: m, width: h, fill: F }, X) => (s(), u("rect", q({ ref_for: !0 }, { x: a, y: o, height: m, width: h, fill: F }, {
+        }, null, 14, yt)) : f("", !0),
+        (o(!0), u(U, null, G(r.value, ({ x: a, y: n, height: b, width: h, fill: D }, W) => (o(), u("rect", J({ ref_for: !0 }, { x: a, y: n, height: b, width: h, fill: D }, {
           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 && !w.value
+            animated: e.value.useCssAnimation && !$.value
           },
           style: {
-            animationDelay: `${150 * X}ms`
+            animationDelay: `${150 * W}ms`
           }
-        }), null, 16, ft))), 256)),
-        (s(!0), u(V, null, B(r.value, (a, o) => (s(), u("g", null, [
-          C("text", {
+        }), null, 16, gt))), 256)),
+        (o(!0), u(U, null, G(r.value, (a, n) => (o(), u("g", null, [
+          w("text", {
             x: a.x + a.width + e.value.style.chart.bars.dataLabels.name.offsetX + 12,
             y: a.cy - d.value.names / 2 + e.value.style.chart.bars.dataLabels.name.offsetY,
             "text-anchor": "start",
             "font-size": d.value.names,
             fill: e.value.style.chart.bars.dataLabels.name.color,
             "font-weight": e.value.style.chart.bars.dataLabels.name.bold ? "bold" : "normal",
-            class: T({
-              animated: e.value.useCssAnimation && !w.value
+            class: O({
+              animated: e.value.useCssAnimation && !$.value
             }),
             style: _({
-              animationDelay: `${150 * o}ms`
+              animationDelay: `${150 * n}ms`
             })
-          }, U(a.name), 15, mt),
-          C("text", {
+          }, j(a.name), 15, pt),
+          w("text", {
             x: a.x + a.width + e.value.style.chart.bars.dataLabels.value.offsetX + 12,
             y: a.cy + d.value.values + e.value.style.chart.bars.dataLabels.value.offsetY,
             "text-anchor": "start",
             "font-size": d.value.values,
             fill: e.value.style.chart.bars.dataLabels.value.color,
             "font-weight": e.value.style.chart.bars.dataLabels.value.bold ? "bold" : "normal",
-            class: T({
-              animated: e.value.useCssAnimation && !w.value
+            class: O({
+              animated: e.value.useCssAnimation && !$.value
             }),
             style: _({
-              animationDelay: `${150 * o}ms`
+              animationDelay: `${150 * n}ms`
             })
-          }, U(n(E)(
+          }, j(s(H)(
             e.value.style.chart.bars.dataLabels.value.formatter,
             a.value,
-            n(G)({
+            s(X)({
               p: e.value.style.chart.bars.dataLabels.value.prefix,
               v: a.value,
               s: e.value.style.chart.bars.dataLabels.value.suffix,
               r: e.value.style.chart.bars.dataLabels.value.rounding
             }),
             { datapoint: a }
-          )), 15, bt)
+          )), 15, kt)
         ]))), 256)),
-        b(t.$slots, "svg", { svg: i.value }, void 0, !0)
-      ], 14, st)) : f("", !0),
-      t.$slots.watermark ? (s(), u("div", yt, [
-        b(t.$slots, "watermark", M(R({ isPrinting: n(re) || n(ue) })), void 0, !0)
+        m(t.$slots, "svg", { svg: i.value }, void 0, !0)
+      ], 14, ut)) : f("", !0),
+      t.$slots.watermark ? (o(), u("div", Ct, [
+        m(t.$slots, "watermark", B(E({ isPrinting: s(ie) || s(ce) })), void 0, !0)
       ])) : f("", !0),
-      x.value ? f("", !0) : (s(), A(Qe, {
+      A.value ? f("", !0) : (o(), z(s(Le), {
         key: 6,
         config: {
           type: "verticalBar",
@@ -550,19 +547,19 @@ const lt = ["id"], st = ["xmlns", "viewBox"], ot = ["width", "height"], nt = ["i
           }
         }
       }, null, 8, ["config"])),
-      t.$slots.source ? (s(), u("div", {
+      t.$slots.source ? (o(), u("div", {
         key: 7,
         ref_key: "source",
-        ref: ee,
+        ref: ae,
         dir: "auto"
       }, [
-        b(t.$slots, "source", {}, void 0, !0)
+        m(t.$slots, "source", {}, void 0, !0)
       ], 512)) : f("", !0),
-      x.value ? (s(), A(We, {
+      A.value ? (o(), z(s(we), {
         key: 8,
         hideDetails: "",
         config: {
-          open: O.value.showTable,
+          open: P.value.showTable,
           maxHeight: 1e4,
           body: {
             backgroundColor: e.value.style.chart.backgroundColor,
@@ -575,32 +572,32 @@ const lt = ["id"], st = ["xmlns", "viewBox"], ot = ["width", "height"], nt = ["i
         }
       }, {
         content: g(() => [
-          (s(), A(Ye, {
-            key: `table_${Q.value}`,
-            colNames: D.value.colNames,
-            head: D.value.head,
-            body: D.value.body,
-            config: D.value.config,
+          (o(), z(s($e), {
+            key: `table_${ee.value}`,
+            colNames: V.value.colNames,
+            head: V.value.head,
+            body: V.value.body,
+            config: V.value.config,
             title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
-            onClose: l[0] || (l[0] = (a) => O.value.showTable = !1)
+            onClose: l[0] || (l[0] = (a) => P.value.showTable = !1)
           }, {
             th: g(({ th: a }) => [
-              C("div", {
+              w("div", {
                 innerHTML: a,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, gt)
+              }, null, 8, wt)
             ]),
             td: g(({ td: a }) => [
-              ze(U(a.name ? a.name : a), 1)
+              Ee(j(a.name ? a.name : a), 1)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title"]))
         ]),
         _: 1
       }, 8, ["config"])) : f("", !0)
-    ], 46, lt));
+    ], 46, rt));
   }
-}, It = /* @__PURE__ */ at(pt, [["__scopeId", "data-v-1f0bddfb"]]);
+}, Pt = /* @__PURE__ */ nt($t, [["__scopeId", "data-v-0278272f"]]);
 export {
-  It as default
+  Pt as default
 };