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

package/dist/{vue-ui-ridgeline-Dydqo68b.js → vue-ui-ridgeline-DcOstg2I.js}

@@ -1,17 +1,18 @@
-import { defineAsyncComponent as M, computed as f, ref as c, shallowRef as Ee, onMounted as zt, onBeforeUnmount as Nt, watch as He, createElementBlock as n, openBlock as r, unref as u, normalizeStyle as P, normalizeClass as Y, createBlock as T, createCommentVNode as v, renderSlot as p, createElementVNode as d, createSlots as Ve, withCtx as m, normalizeProps as q, guardReactiveProps as J, createVNode as Be, Fragment as g, renderList as C, mergeProps as Ue, toDisplayString as E, createTextVNode as Ge, nextTick as Lt } from "vue";
-import { u as Dt, c as ie, o as It, e as ce, g as We, b as Ft, d as Rt, p as K, al as je, a8 as Xt, T as Ye, U as Et, V as Ht, X as Vt, G as Bt, i as Q, f as Z, t as Ut, a as Gt, q as Wt, r as jt, J as Yt } from "./index-BiHmNd1-.js";
-import { u as qt } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Jt } from "./useChartAccessibility-9icAAmYg.js";
-import { u as Kt } from "./usePrinter-CRCbl1WG.js";
-import { t as Qt, u as Zt } from "./useResponsive-JZ9xq-JV.js";
-import { u as qe } from "./useNestedProp-tRqS0ZAM.js";
-import el from "./Legend-DFunFf8i.js";
-import tl from "./Title-B5qqUI3M.js";
+import { defineAsyncComponent as S, computed as g, ref as c, shallowRef as Ee, onMounted as St, onBeforeUnmount as zt, watch as He, createElementBlock as n, openBlock as r, unref as u, normalizeStyle as M, normalizeClass as Y, createBlock as P, createCommentVNode as v, renderSlot as p, createElementVNode as d, createSlots as Ve, withCtx as m, normalizeProps as q, guardReactiveProps as J, createVNode as Be, Fragment as f, renderList as C, mergeProps as Ue, toDisplayString as H, createTextVNode as Ge, nextTick as Nt } from "vue";
+import { u as Lt, c as ie, o as Dt, e as ce, g as We, b as Ft, d as It, p as K, al as je, a8 as Rt, T as Ye, U as Xt, V as Et, X as Ht, G as Vt, i as Q, f as Z, t as Bt, a as Ut, q as Gt, r as Wt, J as jt } from "./index-CaxNz2cE.js";
+import { u as Yt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as qt } from "./useChartAccessibility-9icAAmYg.js";
+import { u as Jt } from "./usePrinter-BprQttno.js";
+import { t as Kt, u as Qt } from "./useResponsive-JZ9xq-JV.js";
+import { u as qe } from "./useNestedProp-DpK9-Xt0.js";
+import Zt from "./Legend-iNd1Vv1J.js";
+import el from "./Title-BTCPUIcD.js";
+import tl from "./Shape-CTyy5HJi.js";
 import { _ as ll } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"], nl = ["stop-color"], ul = ["stop-color"], il = ["stop-color"], cl = ["id"], vl = ["stop-color"], hl = ["stop-color"], dl = ["stop-color"], yl = ["stop-color"], gl = { key: 0 }, fl = ["fill", "d"], pl = ["stroke", "stroke-width", "d"], ml = ["fill", "d"], bl = ["stroke", "stroke-dasharray", "stroke-width", "d"], xl = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-dasharray"], kl = ["cx", "cy", "stroke", "stroke-width", "r", "fill"], Al = ["x", "y", "font-size", "font-weight", "fill", "text-decoration", "onMouseenter", "onClick"], Cl = { key: 0 }, wl = ["font-size", "fill", "font-weight", "transform", "text-anchor"], $l = ["x", "y", "width", "height", "onMouseenter", "onClick"], _l = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Ml = ["cx", "cy", "stroke", "stroke-width", "r", "fill"], Pl = ["x", "y", "text-anchor", "font-size", "fill"], Tl = {
+const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"], nl = ["stop-color"], ul = ["stop-color"], il = ["stop-color"], cl = ["id"], vl = ["stop-color"], hl = ["stop-color"], dl = ["stop-color"], yl = ["stop-color"], fl = { key: 0 }, gl = ["fill", "d"], pl = ["stroke", "stroke-width", "d"], ml = ["fill", "d"], bl = ["stroke", "stroke-dasharray", "stroke-width", "d"], xl = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-dasharray"], kl = ["cx", "cy", "stroke", "stroke-width", "r", "fill"], Al = ["x", "y", "font-size", "font-weight", "fill", "text-decoration", "onMouseenter", "onClick"], Cl = { key: 0 }, wl = ["font-size", "fill", "font-weight", "transform", "text-anchor"], $l = ["x", "y", "width", "height", "onMouseenter", "onClick"], _l = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], Ml = ["cx", "cy", "stroke", "stroke-width", "r", "fill"], Pl = ["x", "y", "text-anchor", "font-size", "fill"], Tl = {
   key: 5,
   class: "vue-data-ui-watermark"
-}, Sl = ["onClick"], Ol = ["innerHTML"], zl = {
+}, Ol = ["onClick"], Sl = ["innerHTML"], zl = {
   __name: "vue-ui-ridgeline",
   props: {
     config: {
@@ -29,28 +30,28 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
   },
   emits: ["selectLegend", "selectDatapoint", "selectX"],
   setup(Je, { expose: Ke, emit: Qe }) {
-    const Ze = M(() => import("./vue-ui-accordion-CmCs2yR2.js")), et = M(() => import("./BaseDraggableDialog-BMlyvt7E.js")), tt = M(() => import("./DataTable-Cv9CIz-a.js")), lt = M(() => import("./PackageVersion-CLY-udAA.js")), at = M(() => import("./PenAndPaper-B9na2mbr.js")), ot = M(() => import("./Shape-D3w9qas1.js")), st = M(() => import("./vue-ui-skeleton-CbYQYRvD.js")), rt = M(() => import("./UserOptions-Ddy6CuLC.js")), nt = M(() => import("./vue-ui-xy-9e_epIN4.js")), { vue_ui_ridgeline: ut } = Dt(), x = Je, z = f({
+    const Ze = S(() => import("./vue-ui-accordion-BZ16n4QT.js")), et = S(() => import("./BaseDraggableDialog-DyUBiw-C.js")), tt = S(() => import("./DataTable-bcUa-A_V.js")), lt = S(() => import("./PackageVersion-BVH19wf6.js")), at = S(() => import("./PenAndPaper-U4bWifCe.js")), ot = S(() => import("./vue-ui-skeleton-C2paDc2u.js")), st = S(() => import("./UserOptions-yZJ8noVU.js")), rt = S(() => import("./vue-ui-xy-BbYuna1k.js")), { vue_ui_ridgeline: nt } = Lt(), x = Je, z = g({
       get() {
         return !!x.dataset && x.dataset.length;
       },
       set(l) {
         return l;
       }
-    }), ee = Qe, G = c(null), ve = c(null), he = c(null), S = Ee(null), I = Ee(null), de = c(null), ye = c(null), ge = c(0), it = c(0), fe = c(0), w = c(ie()), pe = c(0), ct = c(0), me = c(512), h = c(null), F = c(null), te = c(null), be = c(0);
+    }), ee = Qe, V = c(null), ve = c(null), he = c(null), T = Ee(null), F = Ee(null), de = c(null), ye = c(null), fe = c(0), ut = c(0), ge = c(0), w = c(ie()), pe = c(0), it = c(0), me = c(512), h = c(null), I = c(null), te = c(null), be = c(0);
     function xe() {
       const l = qe({
         userConfig: x.config,
-        defaultConfig: ut
+        defaultConfig: nt
       });
       return l.theme ? {
         ...qe({
-          userConfig: Gt.vue_ui_ridgeline[l.theme] || x.config,
+          userConfig: Ut.vue_ui_ridgeline[l.theme] || x.config,
           defaultConfig: l
         }),
-        customPalette: Ut[l.theme] || K
+        customPalette: Bt[l.theme] || K
       } : l;
     }
-    const e = f({
+    const e = g({
       get: () => xe(),
       set: (l) => l
     }), $ = c(Math.min(
@@ -60,10 +61,10 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
       userOptionsVisible: le,
       setUserOptionsVisibility: ke,
       keepUserOptionState: Ae
-    } = qt({ config: e.value }), { svgRef: ae } = Jt({ config: e.value.style.chart.title });
-    zt(oe);
+    } = Yt({ config: e.value }), { svgRef: ae } = qt({ config: e.value.style.chart.title });
+    St(oe);
     function oe() {
-      if (It(x.dataset) ? ce({
+      if (Dt(x.dataset) ? ce({
         componentName: "VueUiRidgeline",
         type: "dataset"
       }) : x.dataset.forEach((l, s) => {
@@ -90,13 +91,13 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
             });
           });
         });
-      }), ct.value = x.dataset.length, $.value = Math.min(
+      }), it.value = x.dataset.length, $.value = Math.min(
         e.value.style.chart.areas.height,
         e.value.style.chart.areas.rowHeight
       ), e.value.responsive) {
-        const l = Qt(() => {
-          const { width: s, height: t } = Zt({
-            chart: G.value,
+        const l = Kt(() => {
+          const { width: s, height: t } = Qt({
+            chart: V.value,
             title: e.value.style.chart.title.text ? ve.value : null,
             legend: e.value.style.chart.legend.show ? he.value : null,
             source: de.value,
@@ -107,56 +108,56 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
             me.value = s, $.value = t / x.dataset.length, be.value = t;
           });
         });
-        S.value && (I.value && S.value.unobserve(I.value), S.value.disconnect()), S.value = new ResizeObserver(l), I.value = G.value.parentNode, S.value.observe(I.value);
+        T.value && (F.value && T.value.unobserve(F.value), T.value.disconnect()), T.value = new ResizeObserver(l), F.value = V.value.parentNode, T.value.observe(F.value);
       }
     }
-    Nt(() => {
-      S.value && (I.value && S.value.unobserve(I.value), S.value.disconnect());
+    zt(() => {
+      T.value && (F.value && T.value.unobserve(F.value), T.value.disconnect());
     });
-    const { isPrinting: Ce, isImaging: we, generatePdf: $e, generateImage: _e } = Kt({
+    const { isPrinting: Ce, isImaging: we, generatePdf: $e, generateImage: _e } = Jt({
       elementId: `vue-ui-ridgeline_${w.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-ridgeline",
       options: e.value.userOptions.print
-    }), vt = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), ht = f(() => Ft(e.value.customPalette)), H = c({
+    }), ct = g(() => e.value.userOptions.show && !e.value.style.chart.title.text), vt = g(() => Ft(e.value.customPalette)), B = c({
       showTable: e.value.table.show
     });
     He(() => x.config, (l) => {
-      e.value = xe(), le.value = !e.value.userOptions.showOnChartHover, oe(), ge.value += 1, fe.value += 1, $.value = Math.min(
+      e.value = xe(), le.value = !e.value.userOptions.showOnChartHover, oe(), fe.value += 1, ge.value += 1, $.value = Math.min(
         e.value.style.chart.areas.height,
         e.value.style.chart.areas.rowHeight
-      ), H.value.showTable = e.value.table.show;
+      ), B.value.showTable = e.value.table.show;
     }, { deep: !0 }), He(() => x.dataset, oe, { deep: !0 });
-    const se = f(() => e.value.style.chart.areas.height / e.value.style.chart.areas.rowHeight);
+    const se = g(() => e.value.style.chart.areas.height / e.value.style.chart.areas.rowHeight);
     function Me(l) {
       O.value.includes(l) ? O.value = O.value.filter((s) => s !== l) : O.value.push(l), ee("selectLegend", X.value);
     }
-    const _ = f(() => z.value ? x.dataset.map((l, s) => ({
+    const _ = g(() => z.value ? x.dataset.map((l, s) => ({
       ...l,
-      labelLen: gt(l.name, e.value.style.chart.yAxis.labels.fontSize),
+      labelLen: yt(l.name, e.value.style.chart.yAxis.labels.fontSize),
       uid: ie(),
       datapoints: l.datapoints.map((t, o) => {
-        const a = t.color ? Rt(t.color) : ht.value[o] || K[o] || K[o % K.length], i = je(t.name);
+        const a = t.color ? It(t.color) : vt.value[o] || K[o] || K[o % K.length], i = je(t.name);
         return {
           ...t,
           color: a,
           id: i
         };
       })
-    })) : []), Pe = f(() => e.value.style.chart.padding.top + $.value * x.dataset.length + $.value * se.value), k = f(() => ({
+    })) : []), Pe = g(() => e.value.style.chart.padding.top + $.value * x.dataset.length + $.value * se.value), k = g(() => ({
       fullHeight: y.value.padding.top + y.value.padding.bottom + y.value.height,
       top: y.value.padding.top,
       left: y.value.padding.left,
       right: y.value.width - y.value.padding.right,
       bottom: y.value.padding.top + y.value.height,
       width: y.value.width - (y.value.padding.left + y.value.padding.right)
-    })), y = f(() => {
+    })), y = g(() => {
       const l = e.value.style.chart.padding;
       return {
         width: me.value,
         height: Pe.value,
         padding: l
       };
-    }), R = f(() => {
+    }), R = g(() => {
       const l = Math.max(..._.value.map((i) => i.labelLen)), s = Math.max(..._.value.flatMap((i) => i.datapoints.map((A) => A.values.length))), t = y.value.padding.left + l + 16 + e.value.style.chart.yAxis.labels.offsetX, o = (k.value.width - t) / s, a = [];
       for (let i = 0; i < s; i += 1)
         a.push({
@@ -170,62 +171,62 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
         });
       return a;
     });
-    function dt(l) {
+    function ht(l) {
       ee("selectX", _.value.map((s) => s.datapoints.map((t) => ({
         dp: t,
         selected: t.values[l.index]
       }))));
     }
-    function yt(l, s) {
+    function dt(l, s) {
       return l.length * s / 2 + s;
     }
     function Te(l, s, t) {
-      const o = yt(s, t);
+      const o = dt(s, t);
       return l + o > k.value.right;
     }
-    function gt(l, s, t = "sans-serif") {
+    function yt(l, s, t = "sans-serif") {
       const a = document.createElement("canvas").getContext("2d"), i = typeof s == "number" ? `${s}px` : s;
       return a.font = `${i} ${t}`, a.measureText(l).width;
     }
-    const X = f(() => {
+    const X = g(() => {
       $.value;
       const l = Math.max(..._.value.map((b) => b.labelLen)), s = Math.max(..._.value.flatMap((b) => b.datapoints.map((N) => N.values.length))), t = Math.max(..._.value.flatMap((b) => b.datapoints.flatMap((N) => N.values))), o = Math.min(..._.value.flatMap((b) => b.datapoints.flatMap((N) => N.values))), a = y.value.padding.left + l + 16 + e.value.style.chart.yAxis.labels.offsetX, i = (k.value.width - a) / s, A = Math.abs(Math.min(o, 0)), De = t + A;
-      function Ie(b) {
+      function Fe(b) {
         return isNaN(b / De) ? 0 : b / De;
       }
       return _.value.map((b, N) => {
-        const Fe = k.value.top + $.value * N, L = k.value.top + Fe + $.value * se.value * (1 - Ie(A));
+        const Ie = k.value.top + $.value * N, L = k.value.top + Ie + $.value * se.value * (1 - Fe(A));
         return {
           ...b,
           label: {
             x: a - e.value.style.chart.yAxis.labels.fontSize,
             y: L
           },
-          datapoints: b.datapoints.map((B) => {
-            const D = B.values.map((U, Mt) => {
-              const Pt = isNaN(U) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(U) ? 0 : U || 0, Tt = a + i * Mt, St = k.value.top + Fe + $.value * se.value * (1 - Ie(Pt + A)), Ot = U === Math.max(...B.values);
+          datapoints: b.datapoints.map((U) => {
+            const D = U.values.map((G, _t) => {
+              const Mt = isNaN(G) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(G) ? 0 : G || 0, Pt = a + i * _t, Tt = k.value.top + Ie + $.value * se.value * (1 - Fe(Mt + A)), Ot = G === Math.max(...U.values);
               return {
-                x: Tt,
-                y: St,
-                value: U,
+                x: Pt,
+                y: Tt,
+                value: G,
                 isMaxPoint: Ot,
                 zero: L
               };
-            }), Ct = `${Xt(D, L, !1, !1)}`, wt = `M ${a},${L} ${Ye(D)} ${D.at(-1).x},${L}`, $t = `M ${a},${L} ${D.at(-1).x},${L}`, Re = `M ${Et(D)}`, Xe = `M ${Ye(D)}`, _t = Ht(
+            }), At = `${Rt(D, L, !1, !1)}`, Ct = `M ${a},${L} ${Ye(D)} ${D.at(-1).x},${L}`, wt = `M ${a},${L} ${D.at(-1).x},${L}`, Re = `M ${Xt(D)}`, Xe = `M ${Ye(D)}`, $t = Et(
               e.value.style.chart.areas.smooth ? Re : Xe
             );
             return {
-              ...B,
+              ...U,
               uid: ie(),
               plots: D,
-              smoothPath: Ct,
-              straightPath: wt,
-              zeroPath: $t,
-              pathLength: _t,
+              smoothPath: At,
+              straightPath: Ct,
+              zeroPath: wt,
+              pathLength: $t,
               smoothPathRidge: Re,
               straightPathRidge: Xe
             };
-          }).filter((B) => !O.value.includes(B.id))
+          }).filter((U) => !O.value.includes(U.id))
         };
       });
     }), O = c([]);
@@ -246,27 +247,27 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
         });
       }), Array.from(s.values());
     }
-    const re = f(() => ft(_.value)), pt = f(() => ({
+    const re = g(() => ft(_.value)), gt = g(() => ({
       cy: "donut-div-legend",
       backgroundColor: e.value.style.chart.legend.backgroundColor,
       color: e.value.style.chart.legend.color,
       fontSize: e.value.style.chart.legend.fontSize,
       paddingBottom: 12,
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
-    })), V = c(!1);
-    function mt(l) {
-      V.value = l, pe.value += 1;
+    })), E = c(!1);
+    function pt(l) {
+      E.value = l, pe.value += 1;
     }
-    const Se = c({}), Oe = c([]);
-    function bt(l) {
-      ee("selectDatapoint", l), e.value.style.chart.dialog.show && (Oe.value = l.datapoints.map((s) => ({
+    const Oe = c({}), Se = c([]);
+    function mt(l) {
+      ee("selectDatapoint", l), e.value.style.chart.dialog.show && (Se.value = l.datapoints.map((s) => ({
         name: s.name,
         color: s.color,
         type: "line",
         useArea: !0,
         smooth: e.value.style.chart.areas.smooth,
         series: s.values
-      })), F.value = l, Se.value = Yt({
+      })), I.value = l, Oe.value = jt({
         ...e.value.style.chart.dialog.xyChart,
         responsive: !0,
         // Overriding 
@@ -292,10 +293,10 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
       }), te.value && te.value.open());
     }
     const ne = c(null);
-    function xt(l) {
+    function bt(l) {
       ne.value = l;
     }
-    function kt() {
+    function xt() {
       ne.value = null;
     }
     const W = c(!1);
@@ -303,9 +304,9 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
       W.value = !W.value;
     }
     function ze() {
-      H.value.showTable = !H.value.showTable;
+      B.value.showTable = !B.value.showTable;
     }
-    const Ne = f(() => ({ body: X.value.flatMap((t) => t.datapoints.flatMap((o) => ({
+    const Ne = g(() => ({ body: X.value.flatMap((t) => t.datapoints.flatMap((o) => ({
       ...o,
       rowName: `${t.name}: ${o.name}`
     }))).map((t) => [
@@ -314,7 +315,7 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
         color: t.color
       },
       ...t.values
-    ]) })), j = f(() => {
+    ]) })), j = g(() => {
       const l = [
         e.value.table.columnNames.series,
         ...e.value.style.chart.xAxis.labels.values
@@ -342,25 +343,25 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
       };
     });
     function Le() {
-      Lt(() => {
+      Nt(() => {
         const l = [
           [e.value.table.columnNames.series, ...e.value.style.chart.xAxis.labels.values.map((o) => [o])],
           ...Ne.value.body.map((o, a) => [o[0].name, ...o.slice(1)])
         ], s = [
           [e.value.style.chart.title.text],
           [e.value.style.chart.title.subtitle.text]
-        ].concat(l), t = Wt(s);
-        jt({
+        ].concat(l), t = Gt(s);
+        Wt({
           csvContent: t,
           title: e.value.style.chart.title.text || "vue-ui-ridgeline"
         });
       });
     }
-    function At() {
+    function kt() {
       return X.value;
     }
     return Ke({
-      getData: At,
+      getData: kt,
       generateImage: _e,
       generatePdf: $e,
       generateCsv: Le,
@@ -368,10 +369,10 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
       toggleTable: ze
     }), (l, s) => (r(), n("div", {
       ref_key: "ridgelineChart",
-      ref: G,
-      class: Y(`vue-ui-ridgeline ${V.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      ref: V,
+      class: Y(`vue-ui-ridgeline ${E.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
       id: `vue-ui-ridgeline_${w.value}`,
-      style: P({
+      style: M({
         fontFamily: e.value.style.fontFamily,
         width: "100%",
         textAlign: "center",
@@ -381,7 +382,7 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
       onMouseenter: s[4] || (s[4] = () => u(ke)(!0)),
       onMouseleave: s[5] || (s[5] = () => u(ke)(!1))
     }, [
-      e.value.userOptions.buttons.annotator && u(ae) ? (r(), T(u(at), {
+      e.value.userOptions.buttons.annotator && u(ae) ? (r(), P(u(at), {
         key: 0,
         color: e.value.style.chart.color,
         backgroundColor: e.value.style.chart.backgroundColor,
@@ -390,7 +391,7 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
         onClose: ue
       }, null, 8, ["color", "backgroundColor", "active", "svgRef"])) : v("", !0),
       p(l.$slots, "userConfig", {}, void 0, !0),
-      vt.value ? (r(), n("div", {
+      ct.value ? (r(), n("div", {
         key: 1,
         ref_key: "noTitle",
         ref: ye,
@@ -403,8 +404,8 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
         ref: ve,
         style: "width:100%;background:transparent;padding-bottom:24px"
       }, [
-        (r(), T(tl, {
-          key: `title_${ge.value}`,
+        (r(), P(el, {
+          key: `title_${fe.value}`,
           config: {
             title: {
               cy: "ridgeline-div-title",
@@ -417,7 +418,7 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
           }
         }, null, 8, ["config"]))
       ], 512)) : v("", !0),
-      e.value.userOptions.show && z.value && (u(Ae) || u(le)) ? (r(), T(u(rt), {
+      e.value.userOptions.show && z.value && (u(Ae) || u(le)) ? (r(), P(u(st), {
         ref: "details",
         key: `user_option_${pe.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
@@ -432,17 +433,17 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
         hasTable: e.value.userOptions.buttons.table,
         hasLabel: !1,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: V.value,
-        chartElement: G.value,
+        isFullscreen: E.value,
+        chartElement: V.value,
         position: e.value.userOptions.position,
         isTooltip: !1,
         titles: { ...e.value.userOptions.buttonTitles },
         hasAnnotator: e.value.userOptions.buttons.annotator,
         isAnnotation: W.value,
-        style: P({
+        style: M({
           visibility: u(Ae) ? u(le) ? "visible" : "hidden" : "visible"
         }),
-        onToggleFullscreen: mt,
+        onToggleFullscreen: pt,
         onGeneratePdf: u($e),
         onGenerateCsv: Le,
         onGenerateImage: u(_e),
@@ -510,14 +511,14 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
         key: 4,
         ref_key: "svgRef",
         ref: ae,
-        xmlns: u(Vt),
-        class: Y({ "vue-data-ui-fullscreen--on": V.value, "vue-data-ui-fulscreen--off": !V.value }),
+        xmlns: u(Ht),
+        class: Y({ "vue-data-ui-fullscreen--on": E.value, "vue-data-ui-fulscreen--off": !E.value }),
         viewBox: `0 0 ${y.value.width <= 0 ? 10 : y.value.width} ${k.value.fullHeight <= 0 ? 10 : k.value.fullHeight}`,
-        style: P(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color};${e.value.responsive ? `height: ${be.value}px; width: 100%;` : ""}`)
+        style: M(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color};${e.value.responsive ? `height: ${be.value}px; width: 100%;` : ""}`)
       }, [
         Be(u(lt)),
         d("defs", null, [
-          (r(!0), n(g, null, C(re.value, (t, o) => (r(), n("linearGradient", {
+          (r(!0), n(f, null, C(re.value, (t, o) => (r(), n("linearGradient", {
             id: `gradient-${t.id}-${w.value}`,
             x1: "50%",
             y1: "0%",
@@ -545,8 +546,8 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
               "stop-opacity": "0.1"
             }, null, 8, il)
           ], 8, sl))), 256)),
-          (r(!0), n(g, null, C(X.value, (t, o) => (r(), n(g, null, [
-            (r(!0), n(g, null, C(t.datapoints, (a, i) => (r(), n("linearGradient", {
+          (r(!0), n(f, null, C(X.value, (t, o) => (r(), n(f, null, [
+            (r(!0), n(f, null, C(t.datapoints, (a, i) => (r(), n("linearGradient", {
               key: `grad${a.id}`,
               id: `gradient-single-${w.value}-${a.uid}`,
               x1: "50%",
@@ -577,13 +578,13 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
             ], 8, cl))), 128))
           ], 64))), 256))
         ]),
-        (r(!0), n(g, null, C(X.value, (t, o) => (r(), n("g", {
+        (r(!0), n(f, null, C(X.value, (t, o) => (r(), n("g", {
           key: `ds-${o}`
         }, [
-          (r(!0), n(g, null, C(t.datapoints, (a, i) => (r(), n("g", {
+          (r(!0), n(f, null, C(t.datapoints, (a, i) => (r(), n("g", {
             key: a.id
           }, [
-            l.$slots.pattern ? (r(), n("g", gl, [
+            l.$slots.pattern ? (r(), n("g", fl, [
               d("defs", null, [
                 p(l.$slots, "pattern", Ue({ ref_for: !0 }, { datapointIndex: o, seriesIndex: i, patternId: `pattern_${w.value}_${a.uid}` }), void 0, !0)
               ])
@@ -593,10 +594,10 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
               stroke: "none",
               "stroke-linecap": "round",
               d: e.value.style.chart.areas.smooth ? a.smoothPath : a.straightPath,
-              style: P({
+              style: M({
                 opacity: e.value.style.chart.areas.opacity
               })
-            }, null, 12, fl),
+            }, null, 12, gl),
             d("path", {
               fill: "none",
               stroke: e.value.style.chart.areas.stroke.useSerieColor ? a.color : e.value.style.chart.areas.stroke.color,
@@ -605,7 +606,7 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
               class: Y({ "vue-ui-ridgeline-animate": e.value.useCssAnimation }),
-              style: P({
+              style: M({
                 strokeDasharray: a.pathLength,
                 strokeDashoffset: e.value.useCssAnimation ? a.pathLength : 0
               })
@@ -617,7 +618,7 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
               class: Y({ "vue-ui-ridgeline-animate": e.value.useCssAnimation }),
-              style: P({
+              style: M({
                 strokeDasharray: a.pathLength,
                 strokeDashoffset: e.value.useCssAnimation ? a.pathLength : 0
               })
@@ -630,14 +631,14 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
               d: a.zeroPath,
               "stroke-linecap": "round"
             }, null, 8, bl)) : v("", !0),
-            e.value.style.chart.areas.maxPoint.show && a.plots.length > 1 ? (r(!0), n(g, { key: 2 }, C(a.plots, (A) => (r(), n(g, null, [
+            e.value.style.chart.areas.maxPoint.show && a.plots.length > 1 ? (r(!0), n(f, { key: 2 }, C(a.plots, (A) => (r(), n(f, null, [
               A.isMaxPoint ? (r(), n("line", {
                 key: 0,
                 x1: A.x,
                 y1: A.y,
                 x2: A.x,
                 y2: A.zero,
-                stroke: e.value.style.chart.areas.maxPoint.adaptStrokeToBackground ? u(Bt)(a.color) : e.value.style.chart.areas.maxPoint.stroke,
+                stroke: e.value.style.chart.areas.maxPoint.adaptStrokeToBackground ? u(Vt)(a.color) : e.value.style.chart.areas.maxPoint.stroke,
                 "stroke-width": e.value.style.chart.areas.maxPoint.strokeWidth,
                 "stroke-linecap": "round",
                 "stroke-dasharray": e.value.style.chart.areas.maxPoint.strokeDasharray
@@ -663,17 +664,17 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
             "font-size": e.value.style.chart.yAxis.labels.fontSize,
             "font-weight": e.value.style.chart.yAxis.labels.bold ? "bold" : "normal",
             fill: e.value.style.chart.yAxis.labels.color,
-            style: P({
+            style: M({
               cursor: e.value.style.chart.dialog.show ? "pointer" : "default"
             }),
-            "text-decoration": e.value.style.chart.dialog.show && (ne.value === o || F.value && t.uid === F.value.uid) ? "underline" : "",
-            onMouseenter: (a) => xt(o),
-            onMouseleave: kt,
-            onClick: (a) => bt(t)
-          }, E(t.name), 45, Al)
+            "text-decoration": e.value.style.chart.dialog.show && (ne.value === o || I.value && t.uid === I.value.uid) ? "underline" : "",
+            onMouseenter: (a) => bt(o),
+            onMouseleave: xt,
+            onClick: (a) => mt(t)
+          }, H(t.name), 45, Al)
         ]))), 128)),
         e.value.style.chart.xAxis.labels.values.length ? (r(), n("g", Cl, [
-          (r(!0), n(g, null, C(R.value, (t, o) => p(l.$slots, "time-label", Ue({ ref_for: !0 }, {
+          (r(!0), n(f, null, C(R.value, (t, o) => p(l.$slots, "time-label", Ue({ ref_for: !0 }, {
             show: t && !e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && !e.value.style.chart.xAxis.labels.showOnlyAtModulo || t && e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && (o === 0 || o === R.value.length - 1) || t && h.value && h.value.index === o || t && !e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && e.value.style.chart.xAxis.labels.showOnlyAtModulo && o % Math.floor(R.value.length / e.value.style.chart.xAxis.labels.modulo) === 0,
             fontSize: e.value.style.chart.xAxis.labels.fontSize,
             content: t.label,
@@ -690,14 +691,14 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
               "font-weight": e.value.style.chart.xAxis.labels.bold ? "bold" : "normal",
               transform: `translate(${t.selectorX}, ${k.value.top + t.height + e.value.style.chart.xAxis.labels.offsetY}), rotate(${e.value.style.chart.xAxis.labels.rotation})`,
               "text-anchor": e.value.style.chart.xAxis.labels.rotation > 0 ? "start" : e.value.style.chart.xAxis.labels.rotation < 0 ? "end" : "middle",
-              style: P({
+              style: M({
                 opacity: h.value ? h.value.index === o ? 1 : 0.2 : 1
               })
-            }, E(t.label), 13, wl)) : v("", !0)
+            }, H(t.label), 13, wl)) : v("", !0)
           ], !0)), 256))
         ])) : v("", !0),
         d("g", null, [
-          (r(!0), n(g, null, C(R.value, (t, o) => (r(), n("rect", {
+          (r(!0), n(f, null, C(R.value, (t, o) => (r(), n("rect", {
             x: t.x,
             y: t.y,
             width: t.width < 0 ? 0.1 : t.width,
@@ -705,7 +706,7 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
             fill: "transparent",
             onMouseenter: (a) => h.value = t,
             onMouseleave: s[0] || (s[0] = (a) => h.value = null),
-            onClick: () => dt(t)
+            onClick: () => ht(t)
           }, null, 40, $l))), 256)),
           e.value.style.chart.selector.show && h.value ? (r(), n("line", {
             key: 0,
@@ -719,9 +720,9 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
             "stroke-linecap": "round",
             style: { pointerEvents: "none" }
           }, null, 8, _l)) : v("", !0),
-          h.value ? (r(!0), n(g, { key: 1 }, C(X.value, (t) => (r(), n(g, null, [
-            (r(!0), n(g, null, C(t.datapoints, (o) => (r(), n(g, null, [
-              (r(!0), n(g, null, C(o.plots, (a, i) => (r(), n(g, null, [
+          h.value ? (r(!0), n(f, { key: 1 }, C(X.value, (t) => (r(), n(f, null, [
+            (r(!0), n(f, null, C(t.datapoints, (o) => (r(), n(f, null, [
+              (r(!0), n(f, null, C(o.plots, (a, i) => (r(), n(f, null, [
                 h.value && h.value.index === i ? (r(), n("circle", {
                   key: 0,
                   cx: a.x,
@@ -770,7 +771,7 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
                   style: {
                     pointerEvents: "none"
                   }
-                }, E(u(Q)(
+                }, H(u(Q)(
                   e.value.style.chart.selector.labels.formatter,
                   a.value,
                   u(Z)({
@@ -789,7 +790,7 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
       l.$slots.watermark ? (r(), n("div", Tl, [
         p(l.$slots, "watermark", q(J({ isPrinting: u(Ce) || u(we) })), void 0, !0)
       ])) : v("", !0),
-      z.value ? v("", !0) : (r(), T(u(st), {
+      z.value ? v("", !0) : (r(), P(u(ot), {
         key: 6,
         config: {
           type: "ridgeline",
@@ -805,24 +806,24 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
         ref_key: "chartLegend",
         ref: he
       }, [
-        e.value.style.chart.legend.show ? (r(), T(el, {
-          key: `legend_${fe.value}`,
+        e.value.style.chart.legend.show ? (r(), P(Zt, {
+          key: `legend_${ge.value}`,
           legendSet: re.value,
-          config: pt.value,
+          config: gt.value,
           onClickMarker: s[1] || (s[1] = ({ legend: t }) => Me(t.id))
         }, Ve({
           item: m(({ legend: t }) => [
             d("div", {
-              style: P(`opacity:${O.value.includes(t.id) ? 0.5 : 1}`),
+              style: M(`opacity:${O.value.includes(t.id) ? 0.5 : 1}`),
               onClick: (o) => t.segregate()
-            }, E(t.name), 13, Sl)
+            }, H(t.name), 13, Ol)
           ]),
           _: 2
         }, [
           l.$slots.pattern ? {
             name: "legend-pattern",
             fn: m(({ legend: t, index: o }) => [
-              Be(u(ot), {
+              Be(tl, {
                 shape: t.shape,
                 radius: 30,
                 stroke: "none",
@@ -843,11 +844,11 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
       }, [
         p(l.$slots, "source", {}, void 0, !0)
       ], 512)) : v("", !0),
-      z.value ? (r(), T(u(Ze), {
+      z.value ? (r(), P(u(Ze), {
         key: 8,
         hideDetails: "",
         config: {
-          open: H.value.showTable,
+          open: B.value.showTable,
           maxHeight: 1e4,
           body: {
             backgroundColor: e.value.style.chart.backgroundColor,
@@ -860,20 +861,20 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
         }
       }, {
         content: m(() => [
-          (r(), T(u(tt), {
-            key: `table_${it.value}`,
+          (r(), P(u(tt), {
+            key: `table_${ut.value}`,
             colNames: j.value.colNames,
             head: j.value.head,
             body: j.value.body,
             config: j.value.config,
             title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` :${e.value.style.chart.title.subtitle.text}` : ""}`,
-            onClose: s[2] || (s[2] = (t) => H.value.showTable = !1)
+            onClose: s[2] || (s[2] = (t) => B.value.showTable = !1)
           }, {
             th: m(({ th: t }) => [
-              d("div", { innerHTML: t }, null, 8, Ol)
+              d("div", { innerHTML: t }, null, 8, Sl)
             ]),
             td: m(({ td: t }) => [
-              Ge(E(t.name ? t.name : u(Q)(
+              Ge(H(t.name ? t.name : u(Q)(
                 e.value.style.chart.selector.labels.formatter,
                 t,
                 u(Z)({
@@ -889,31 +890,33 @@ const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["id"], rl = ["stop-color"],
         ]),
         _: 1
       }, 8, ["config"])) : v("", !0),
-      e.value.style.chart.dialog.show ? (r(), T(u(et), {
+      e.value.style.chart.dialog.show ? (r(), P(u(et), {
         key: 9,
         ref_key: "dialog",
         ref: te,
-        onClose: s[3] || (s[3] = (t) => F.value = null),
+        onClose: s[3] || (s[3] = (t) => I.value = null),
         backgroundColor: e.value.style.chart.dialog.backgroundColor,
         color: e.value.style.chart.dialog.color,
         headerBg: e.value.style.chart.dialog.header.backgroundColor,
-        headerColor: e.value.style.chart.dialog.header.color
+        headerColor: e.value.style.chart.dialog.header.color,
+        isFullscreen: E.value,
+        fullscreenParent: V.value
       }, {
         title: m(() => [
-          Ge(E(F.value.name), 1)
+          Ge(H(I.value.name), 1)
         ]),
         default: m(() => [
-          F.value ? (r(), T(u(nt), {
+          I.value ? (r(), P(u(rt), {
             key: 0,
-            config: Se.value,
-            dataset: Oe.value
+            config: Oe.value,
+            dataset: Se.value
           }, null, 8, ["config", "dataset"])) : v("", !0)
         ]),
         _: 1
-      }, 8, ["backgroundColor", "color", "headerBg", "headerColor"])) : v("", !0)
+      }, 8, ["backgroundColor", "color", "headerBg", "headerColor", "isFullscreen", "fullscreenParent"])) : v("", !0)
     ], 46, al));
   }
-}, Bl = /* @__PURE__ */ ll(zl, [["__scopeId", "data-v-403f8970"]]);
+}, Ul = /* @__PURE__ */ ll(zl, [["__scopeId", "data-v-507d68a0"]]);
 export {
-  Bl as default
+  Ul as default
 };