vue-data-ui 3.0.23 → 3.1.0

package/dist/{vue-ui-strip-plot-Cm8Zr6RE.js → vue-ui-strip-plot-CYAWwYOM.js}

@@ -1,20 +1,20 @@
-import { defineAsyncComponent as I, computed as p, ref as v, toRefs as mt, watch as ce, shallowRef as Ee, onMounted as gt, onBeforeUnmount as Ge, watchEffect as xt, createElementBlock as n, openBlock as r, unref as i, normalizeStyle as j, normalizeClass as W, createBlock as T, createCommentVNode as c, createVNode as Be, createSlots as kt, withCtx as b, renderSlot as y, normalizeProps as M, guardReactiveProps as F, createElementVNode as k, Fragment as m, renderList as C, toDisplayString as S, mergeProps as wt, createTextVNode as At, nextTick as Lt } from "vue";
-import { u as Ct, c as he, t as _t, a as $t, p as O, b as Tt, o as He, f as de, g as Ve, d as St, e as Ue, h as Ot, D as zt, i as Y, X as Pt, k as pe, I as Nt, ab as It, l as Mt, j as Ft, y as Xe, E as Dt, v as Rt, w as Wt, z as Et } from "./index-BEuUtONc.js";
-import { t as je, u as Gt } from "./useResponsive-DfdjqQps.js";
-import { u as Bt, B as Ht } from "./useLoading-D7YHNtLX.js";
-import { u as Vt } from "./usePrinter-DiB0_UNt.js";
-import { u as Ye } from "./useNestedProp-DhLFhguL.js";
-import { u as Ut } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Xt } from "./useChartAccessibility-9icAAmYg.js";
-import { u as jt } from "./useTimeLabelCollider-CIsgDrl9.js";
-import Yt from "./img-z5p1gGfY.js";
-import { _ as qt } from "./Shape-CYVs2kYz.js";
-import Jt from "./Title-D_e0SFWS.js";
-import { _ as Kt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Qt = ["id"], Zt = ["xmlns", "viewBox"], el = ["x", "y", "width", "height"], tl = { key: 1 }, ll = { key: 0 }, al = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], ol = { key: 1 }, sl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], rl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ul = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], nl = ["x", "y", "fill", "font-size"], il = ["transform", "font-size", "fill", "text-anchor"], vl = ["transform", "font-size", "fill", "text-anchor", "innerHTML"], cl = ["fill", "font-size", "transform"], hl = ["fill", "font-size", "x", "y"], dl = ["x1", "x2", "y1", "y2", "stroke"], pl = ["cx", "cy", "fill"], fl = ["cx", "cy", "fill"], yl = ["id"], bl = ["stop-color"], ml = ["stop-color"], gl = ["stop-color"], xl = { key: 0 }, kl = ["x", "y", "font-size", "fill"], wl = {
+import { defineAsyncComponent as L, computed as p, ref as v, toRefs as Lt, watch as q, shallowRef as He, onMounted as _t, onBeforeUnmount as Ue, watchEffect as $t, createElementBlock as n, openBlock as r, unref as i, normalizeStyle as J, normalizeClass as E, createBlock as z, createCommentVNode as h, createVNode as fe, createSlots as Ve, withCtx as b, renderSlot as y, normalizeProps as I, guardReactiveProps as M, createElementVNode as m, Fragment as g, renderList as _, toDisplayString as $, mergeProps as Xe, resolveDynamicComponent as Tt, createTextVNode as je, nextTick as St } from "vue";
+import { u as Ot, c as be, t as zt, a as Pt, p as P, b as Dt, o as Ye, f as ye, g as qe, d as Nt, e as Je, h as It, D as Mt, i as K, X as Ft, k as me, I as Rt, ab as Wt, l as Bt, j as Et, y as Ke, E as Gt, v as Ht, w as Ut, z as Vt } from "./index-CDQbCd41.js";
+import { t as Qe, u as Xt } from "./useResponsive-DfdjqQps.js";
+import { u as jt, B as Yt } from "./BaseScanner-BgWxam9d.js";
+import { u as qt } from "./usePrinter-Bnl1YeUU.js";
+import { u as Ze } from "./useNestedProp-BPEHGiYX.js";
+import { u as Jt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Kt } from "./useChartAccessibility-9icAAmYg.js";
+import { u as Qt } from "./useTimeLabelCollider-CIsgDrl9.js";
+import Zt from "./img-JOqdlnUs.js";
+import { _ as el } from "./Shape-Dj2Hl33H.js";
+import tl from "./Title-Dq2_Z9kR.js";
+import { _ as ll } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const al = ["id"], ol = ["xmlns", "viewBox"], sl = ["x", "y", "width", "height"], rl = { key: 1 }, ul = { key: 0 }, nl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], il = { key: 1 }, vl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], cl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], hl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], dl = ["x", "y", "fill", "font-size"], pl = ["transform", "font-size", "fill", "text-anchor"], fl = ["transform", "font-size", "fill", "text-anchor", "innerHTML"], bl = ["fill", "font-size", "transform"], yl = ["fill", "font-size", "x", "y"], ml = ["x1", "x2", "y1", "y2", "stroke"], gl = ["cx", "cy", "fill"], xl = ["cx", "cy", "fill"], kl = ["id"], wl = ["stop-color"], Cl = ["stop-color"], Al = ["stop-color"], Ll = { key: 0 }, _l = ["x", "y", "font-size", "fill"], $l = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, Al = ["innerHTML"], Ll = {
+}, Tl = ["innerHTML"], Sl = {
   __name: "vue-ui-strip-plot",
   props: {
     config: {
@@ -31,18 +31,18 @@ const Qt = ["id"], Zt = ["xmlns", "viewBox"], el = ["x", "y", "width", "height"]
     }
   },
   emits: ["selectDatapoint"],
-  setup(qe, { expose: Je, emit: Ke }) {
-    const Qe = I(() => import("./Tooltip-DjVoFYj1.js")), Ze = I(() => import("./vue-ui-accordion-B4YfUjZ5.js")), et = I(() => import("./DataTable-nO6ydJO2.js")), tt = I(() => import("./UserOptions-z0NWZ7aQ.js")), lt = I(() => import("./PenAndPaper-zym5uEeN.js")), at = I(() => import("./PackageVersion-B6M-3jRt.js")), { vue_ui_strip_plot: ot } = Ct(), g = qe, st = Ke, E = p({
+  setup(et, { expose: tt, emit: lt }) {
+    const at = L(() => import("./Tooltip-Y219DXZO.js")), ot = L(() => import("./BaseIcon-DHtro8us.js")), st = L(() => import("./vue-ui-accordion-Bf_LHFFX.js")), rt = L(() => import("./DataTable-DJjA2_wf.js")), ut = L(() => import("./UserOptions-BuGfCdAY.js")), nt = L(() => import("./PenAndPaper-B7QEDgx4.js")), it = L(() => import("./PackageVersion-DU12WH3O.js")), vt = L(() => import("./BaseDraggableDialog-O7900pGp.js")), { vue_ui_strip_plot: ct } = Ot(), x = et, ht = lt, G = p({
       get() {
-        return !!g.dataset && g.dataset.length;
+        return !!x.dataset && x.dataset.length;
       },
       set(t) {
         return t;
       }
-    }), q = v(he()), fe = v(0), J = v(!1), K = v(""), A = v(null), ye = v(null), be = v(null), me = v(null), ge = v(!1), xe = v(0), ke = v(0), Q = v(null), Z = v(null), G = v(null), ee = v(null), e = v(oe()), { loading: te, FINAL_DATASET: we, manualLoading: le } = Bt({
-      ...mt(g),
+    }), Q = v(be()), ge = v(0), Z = v(!1), ee = v(""), w = v(null), xe = v(null), ke = v(null), we = v(null), Ce = v(!1), Ae = v(0), Le = v(0), F = v(null), te = v(null), le = v(null), H = v(null), ae = v(null), e = v(ue()), { loading: oe, FINAL_DATASET: _e, manualLoading: se } = jt({
+      ...Lt(x),
       FINAL_CONFIG: e,
-      prepareConfig: oe,
+      prepareConfig: ue,
       skeletonDataset: [
         {
           name: "_",
@@ -90,7 +90,7 @@ const Qt = ["id"], Zt = ["xmlns", "viewBox"], el = ["x", "y", "width", "height"]
           ]
         }
       ],
-      skeletonConfig: _t({
+      skeletonConfig: zt({
         defaultConfig: e.value,
         userConfig: {
           userOptions: { show: !1 },
@@ -129,253 +129,253 @@ const Qt = ["id"], Zt = ["xmlns", "viewBox"], el = ["x", "y", "width", "height"]
           }
         }
       })
-    }), { userOptionsVisible: ae, setUserOptionsVisibility: Ae, keepUserOptionState: Le } = Ut({ config: e.value }), { svgRef: Ce } = Xt({ config: e.value.style.chart.title });
-    function oe() {
-      const t = Ye({
-        userConfig: g.config,
-        defaultConfig: ot
+    }), { userOptionsVisible: re, setUserOptionsVisibility: $e, keepUserOptionState: Te } = Jt({ config: e.value }), { svgRef: Se } = Kt({ config: e.value.style.chart.title });
+    function ue() {
+      const t = Ze({
+        userConfig: x.config,
+        defaultConfig: ct
       });
       return t.theme ? {
-        ...Ye({
-          userConfig: Tt.vue_ui_strip_plot[t.theme] || g.config,
+        ...Ze({
+          userConfig: Dt.vue_ui_strip_plot[t.theme] || x.config,
           defaultConfig: t
         }),
-        customPalette: $t[t.theme] || O
+        customPalette: Pt[t.theme] || P
       } : t;
     }
-    ce(() => g.config, async (t) => {
-      te.value || (e.value = oe()), ae.value = !e.value.userOptions.showOnChartHover, _e(), xe.value += 1, ke.value += 1, d.value.dataLabels.show = e.value.style.chart.labels.bestPlotLabel.show, d.value.showTable = e.value.table.show, d.value.showTooltip = e.value.style.chart.tooltip.show, _.value = e.value.style.chart.width, w.value = e.value.style.chart.height, R.value = e.value.style.chart.plots.radius;
-    }, { deep: !0 }), ce(() => g.dataset, (t) => {
-      Array.isArray(t) && t.length > 0 && (le.value = !1);
+    q(() => x.config, async (t) => {
+      oe.value || (e.value = ue()), re.value = !e.value.userOptions.showOnChartHover, Oe(), Ae.value += 1, Le.value += 1, c.value.dataLabels.show = e.value.style.chart.labels.bestPlotLabel.show, c.value.showTable = e.value.table.show, c.value.showTooltip = e.value.style.chart.tooltip.show, T.value = e.value.style.chart.width, C.value = e.value.style.chart.height, W.value = e.value.style.chart.plots.radius;
+    }, { deep: !0 }), q(() => x.dataset, (t) => {
+      Array.isArray(t) && t.length > 0 && (se.value = !1);
     }, { deep: !0 });
-    const L = Ee(null), z = Ee(null);
-    gt(() => {
-      _e();
+    const A = He(null), D = He(null);
+    _t(() => {
+      Oe();
     });
-    const se = p(() => !!e.value.debug);
-    function _e() {
-      if (He(g.dataset) ? (de({
+    const ne = p(() => !!e.value.debug);
+    function Oe() {
+      if (Ye(x.dataset) ? (ye({
         componentName: "VueUiStripPlot",
         type: "dataset",
-        debug: se.value
-      }), le.value = !0) : g.dataset.forEach((t, a) => {
-        Ve({
+        debug: ne.value
+      }), se.value = !0) : x.dataset.forEach((t, a) => {
+        qe({
           datasetObject: t,
           requiredAttributes: ["name", "plots"]
         }).forEach((l) => {
-          E.value = !1, de({
+          G.value = !1, ye({
             componentName: "VueUiStripPlot",
             type: "datasetSerieAttribute",
             property: l,
             index: a,
-            debug: se.value
+            debug: ne.value
           });
         }), t.plots && t.plots.forEach((l, s) => {
-          Ve({
+          qe({
             datasetObject: l,
             requiredAttributes: ["name", "value"]
           }).forEach((u) => {
-            E.value = !1, de({
+            G.value = !1, ye({
               componentName: "VueUiStripPlot",
               type: "datasetSerieAttribute",
               property: u,
               index: `${a},${s}`,
-              debug: se.value
+              debug: ne.value
             });
           });
         });
-      }), He(g.dataset) || (le.value = e.value.loading), e.value.responsive) {
-        const t = je(() => {
-          const { width: a, height: l } = Gt({
-            chart: A.value,
-            title: e.value.style.chart.title.text ? ye.value : null,
-            source: be.value,
-            noTitle: me.value
+      }), Ye(x.dataset) || (se.value = e.value.loading), e.value.responsive) {
+        const t = Qe(() => {
+          const { width: a, height: l } = Xt({
+            chart: w.value,
+            title: e.value.style.chart.title.text ? xe.value : null,
+            source: ke.value,
+            noTitle: we.value
           });
           requestAnimationFrame(() => {
-            ut.value = l, _.value = Math.max(0.1, a), w.value = Math.max(0.1, l - 12), e.value.responsiveProportionalSizing ? R.value = Dt({
+            pt.value = l, T.value = Math.max(0.1, a), C.value = Math.max(0.1, l - 12), e.value.responsiveProportionalSizing ? W.value = Gt({
               relator: Math.min(l, a),
               adjuster: 600,
               source: e.value.style.chart.plots.radius,
               threshold: 6,
               fallback: 6
-            }) : R.value = e.value.style.chart.plots.radius;
+            }) : W.value = e.value.style.chart.plots.radius;
           });
         });
-        L.value && (z.value && L.value.unobserve(z.value), L.value.disconnect()), L.value = new ResizeObserver(t), z.value = A.value.parentNode, L.value.observe(z.value);
+        A.value && (D.value && A.value.unobserve(D.value), A.value.disconnect()), A.value = new ResizeObserver(t), D.value = w.value.parentNode, A.value.observe(D.value);
       }
-      ge.value = !0, setTimeout(() => {
-        D.value = !1;
-      }, vt.value * 50);
+      Ce.value = !0, setTimeout(() => {
+        R.value = !1;
+      }, yt.value * 50);
     }
-    Ge(() => {
-      L.value && (z.value && L.value.unobserve(z.value), L.value.disconnect());
+    Ue(() => {
+      A.value && (D.value && A.value.unobserve(D.value), A.value.disconnect());
     });
-    const { isPrinting: $e, isImaging: Te, generatePdf: Se, generateImage: Oe } = Vt({
-      elementId: `strip-plot_${q.value}`,
+    const { isPrinting: ze, isImaging: Pe, generatePdf: De, generateImage: Ne } = qt({
+      elementId: `strip-plot_${Q.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-strip-plot",
       options: e.value.userOptions.print
-    }), rt = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), ze = p(() => St(e.value.customPalette)), D = v(e.value.useCssAnimation), P = v({
+    }), dt = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ie = p(() => Nt(e.value.customPalette)), R = v(e.value.useCssAnimation), N = v({
       top: e.value.style.chart.padding.top,
       bottom: e.value.style.chart.padding.bottom,
       left: e.value.style.chart.padding.left,
       right: e.value.style.chart.padding.right
-    }), _ = v(e.value.style.chart.width), w = v(e.value.style.chart.height), ut = v(e.value.style.chart.height), R = v(e.value.style.chart.plots.radius), d = v({
+    }), T = v(e.value.style.chart.width), C = v(e.value.style.chart.height), pt = v(e.value.style.chart.height), W = v(e.value.style.chart.plots.radius), c = v({
       showTable: e.value.table.show,
       dataLabels: {
         show: e.value.style.chart.labels.bestPlotLabel.show
       },
       showTooltip: e.value.style.chart.tooltip.show
     });
-    ce(e, () => {
-      d.value = {
+    q(e, () => {
+      c.value = {
         showTable: e.value.table.show,
         dataLabels: {
           show: e.value.style.chart.labels.bestPlotLabel.show
         },
         showTooltip: e.value.style.chart.tooltip.show
-      }, _.value = e.value.style.chart.width, w.value = e.value.style.chart.height, R.value = e.value.style.chart.plots.radius;
+      }, T.value = e.value.style.chart.width, C.value = e.value.style.chart.height, W.value = e.value.style.chart.plots.radius;
     }, { immediate: !0 });
-    const re = p(() => Math.min(R.value, o.value.stripWidth / 2 * 0.9));
-    function nt() {
+    const ie = p(() => Math.min(W.value, o.value.stripWidth / 2 * 0.9));
+    function ft() {
       let t = 0;
-      ee.value && (t = Array.from(ee.value.querySelectorAll("text")).reduce((s, u) => {
+      ae.value && (t = Array.from(ae.value.querySelectorAll("text")).reduce((s, u) => {
         const f = u.getComputedTextLength();
         return f > s ? f : s;
       }, 0));
-      const a = Z.value ? Z.value.getBoundingClientRect().width : 0;
+      const a = le.value ? le.value.getBoundingClientRect().width : 0;
       return t + a + (a ? 24 : 0);
     }
-    const ue = v(0), it = je((t) => {
-      ue.value = t;
+    const ve = v(0), bt = Qe((t) => {
+      ve.value = t;
     }, 100);
-    xt((t) => {
-      const a = G.value;
+    $t((t) => {
+      const a = H.value;
       if (!a) return;
       const l = new ResizeObserver((s) => {
-        it(s[0].contentRect.height);
+        bt(s[0].contentRect.height);
       });
       l.observe(a), t(() => l.disconnect());
-    }), Ge(() => {
-      ue.value = 0;
+    }), Ue(() => {
+      ve.value = 0;
     });
-    const Pe = p(() => {
+    const Me = p(() => {
       let t = 0;
-      Q.value && (t = Q.value.getBBox().height + e.value.style.chart.labels.axis.fontSize / 3 + 12 + e.value.style.chart.labels.axis.xLabelOffsetY);
+      te.value && (t = te.value.getBBox().height + e.value.style.chart.labels.axis.fontSize / 3 + 12 + e.value.style.chart.labels.axis.xLabelOffsetY);
       let a = 0;
-      return G.value && (a = ue.value + 12), t + a;
+      return H.value && (a = ve.value + 12), t + a;
     }), o = p(() => {
-      const t = nt(), a = _.value - t - e.value.style.chart.padding.left - e.value.style.chart.padding.right - e.value.style.chart.labels.axis.yLabelOffsetX - 5;
+      const t = ft(), a = T.value - t - e.value.style.chart.padding.left - e.value.style.chart.padding.right - e.value.style.chart.labels.axis.yLabelOffsetX - 5;
       return {
-        left: P.value.left + t + e.value.style.chart.labels.axis.yLabelOffsetX + 5,
-        right: _.value - P.value.right,
-        top: P.value.top,
-        bottom: w.value - P.value.bottom - Pe.value,
+        left: N.value.left + t + e.value.style.chart.labels.axis.yLabelOffsetX + 5,
+        right: T.value - N.value.right,
+        top: N.value.top,
+        bottom: C.value - N.value.bottom - Me.value,
         width: a,
-        height: w.value - P.value.top - P.value.bottom - Pe.value,
-        stripWidth: a / we.value.length,
-        absoluteHeight: w.value
+        height: C.value - N.value.top - N.value.bottom - Me.value,
+        stripWidth: a / _e.value.length,
+        absoluteHeight: C.value
       };
-    }), B = p(() => we.value.map((t, a) => {
-      const l = he();
+    }), U = p(() => _e.value.map((t, a) => {
+      const l = be();
       return {
         ...t,
         id: l,
-        color: t.color ? Ue(t.color) : ze.value[a] || O[a] || O[a % O.length],
+        color: t.color ? Je(t.color) : Ie.value[a] || P[a] || P[a % P.length],
         plots: t.plots.map((s, u) => ({
           ...s,
-          value: Ot(s.value),
+          value: It(s.value),
           parentId: l,
           parentName: t.name,
           parentIndex: a,
           plotIndex: u,
-          color: t.color ? Ue(t.color) : ze.value[a] || O[a] || O[a % O.length],
-          id: he()
+          color: t.color ? Je(t.color) : Ie.value[a] || P[a] || P[a % P.length],
+          id: be()
         })).sort((s, u) => s.value - u.value)
       };
-    })), x = p(() => (B.value || []).map((t, a) => ({
+    })), k = p(() => (U.value || []).map((t, a) => ({
       ...t,
       plots: t.plots.map((l) => ({
         ...l,
         x: o.value.left + (a + 1) * o.value.stripWidth - o.value.stripWidth / 2
       }))
-    }))), vt = p(() => Math.max(...x.value.map((t) => t.plots.length))), ne = p(() => {
-      const t = x.value.flatMap((a) => a.plots.map((l) => l.value));
+    }))), yt = p(() => Math.max(...k.value.map((t) => t.plots.length))), ce = p(() => {
+      const t = k.value.flatMap((a) => a.plots.map((l) => l.value));
       return {
         max: Math.max(...t),
         min: Math.min(...t)
       };
-    }), $ = p(() => zt(ne.value.min < 0 ? ne.value.min : 0, ne.value.max, e.value.style.chart.grid.scaleSteps)), ct = p(() => (x.value || []).map((t, a) => ({
+    }), S = p(() => Mt(ce.value.min < 0 ? ce.value.min : 0, ce.value.max, e.value.style.chart.grid.scaleSteps)), mt = p(() => (k.value || []).map((t, a) => ({
       ...t,
       plots: t.plots.map((l) => ({
         ...l,
-        y: o.value.bottom - (l.value + Math.abs($.value.min)) / ($.value.max + Math.abs($.value.min)) * o.value.height
+        y: o.value.bottom - (l.value + Math.abs(S.value.min)) / (S.value.max + Math.abs(S.value.min)) * o.value.height
       }))
-    }))), Ne = p(() => $.value.ticks.map((t) => ({
-      y: o.value.bottom - o.value.height * ((t + Math.abs($.value.min)) / ($.value.max + Math.abs($.value.min))),
+    }))), Fe = p(() => S.value.ticks.map((t) => ({
+      y: o.value.bottom - o.value.height * ((t + Math.abs(S.value.min)) / (S.value.max + Math.abs(S.value.min))),
       x1: o.value.left,
       x2: o.value.right,
       value: t
-    }))), ie = v(null), h = v(null);
-    function ht({ datapoint: t, seriesIndex: a }) {
-      J.value = !1, h.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a });
+    }))), he = v(null), d = v(null);
+    function gt({ datapoint: t, seriesIndex: a }) {
+      Z.value = !1, d.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a });
     }
-    function dt({ datapoint: t, seriesIndex: a }) {
-      st("selectDatapoint", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a });
+    function xt({ datapoint: t, seriesIndex: a }) {
+      ht("selectDatapoint", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a });
     }
-    function pt({ datapoint: t, seriesIndex: a }) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a }), ie.value = { datapoint: t, seriesIndex: a, config: e.value, series: B.value }, J.value = !0, h.value = t;
+    function kt({ datapoint: t, seriesIndex: a }) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a }), he.value = { datapoint: t, seriesIndex: a, config: e.value, series: U.value }, Z.value = !0, d.value = t;
       const l = e.value.style.chart.tooltip.customFormat;
-      if (Xe(l) && Et(() => l({
+      if (Ke(l) && Vt(() => l({
         seriesIndex: a,
         datapoint: t,
-        series: B.value,
+        series: U.value,
         config: e.value
       })))
-        K.value = l({
+        ee.value = l({
           seriesIndex: a,
           datapoint: t,
-          series: B.value,
+          series: U.value,
           config: e.value
         });
       else {
         let s = "";
-        s += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${e.value.style.chart.plots.gradient.show ? `url(#${t.parentId})` : t.color}"/></svg>${t.name}</div>`, s += `<div>${pe(
+        s += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${e.value.style.chart.plots.gradient.show ? `url(#${t.parentId})` : t.color}"/></svg>${t.name}</div>`, s += `<div>${me(
           e.value.style.chart.labels.formatter,
           t.value,
-          Y({
+          K({
             p: e.value.style.chart.labels.prefix,
             v: t.value,
             s: e.value.style.chart.labels.suffix,
             r: e.value.style.chart.tooltip.roundingValue
           }),
           { datapoint: t, seriesIndex: a }
-        )}</div>`, K.value = `<div>${s}</div>`;
+        )}</div>`, ee.value = `<div>${s}</div>`;
       }
     }
-    const H = p(() => {
-      const t = x.value.flatMap((l) => JSON.parse(JSON.stringify(l.plots)).sort((s, u) => u.value - s.value).map((s) => ({
+    const V = p(() => {
+      const t = k.value.flatMap((l) => JSON.parse(JSON.stringify(l.plots)).sort((s, u) => u.value - s.value).map((s) => ({
         name: `${l.name} - ${s.name}`,
         color: s.color
-      }))), a = x.value.flatMap((l) => JSON.parse(JSON.stringify(l.plots)).sort((s, u) => u.value - s.value).map((s) => s.value));
+      }))), a = k.value.flatMap((l) => JSON.parse(JSON.stringify(l.plots)).sort((s, u) => u.value - s.value).map((s) => s.value));
       return { head: t, body: a };
     });
-    function Ie(t = null) {
-      Lt(() => {
-        const a = H.value.head.map((u, f) => [[
+    function de(t = null) {
+      St(() => {
+        const a = V.value.head.map((u, f) => [[
           u.name
-        ], [H.value.body[f]]]), 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(a), s = Rt(l);
-        t ? t(s) : Wt({ csvContent: s, title: e.value.style.chart.title.text || "vue-ui-strip-plot" });
+        ], [V.value.body[f]]]), 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(a), s = Ht(l);
+        t ? t(s) : Ut({ csvContent: s, title: e.value.style.chart.title.text || "vue-ui-strip-plot" });
       });
     }
-    const V = p(() => {
+    const X = p(() => {
       const t = [
         e.value.table.columnNames.series,
         e.value.table.columnNames.value
-      ], a = H.value.head.map((u, f) => {
-        const X = Y({
+      ], a = V.value.head.map((u, f) => {
+        const Y = K({
           p: e.value.style.chart.labels.prefix,
-          v: H.value.body[f],
+          v: V.value.body[f],
           s: e.value.style.chart.labels.suffix,
           r: e.value.table.td.roundingValue
         });
@@ -384,7 +384,7 @@ const Qt = ["id"], Zt = ["xmlns", "viewBox"], el = ["x", "y", "width", "height"]
             color: u.color,
             name: u.name
           },
-          X
+          Y
         ];
       }), l = {
         th: {
@@ -408,29 +408,29 @@ const Qt = ["id"], Zt = ["xmlns", "viewBox"], el = ["x", "y", "width", "height"]
         body: a,
         config: l
       };
-    }), N = v(!1);
-    function Me(t) {
-      N.value = t, fe.value += 1;
+    }), O = v(!1);
+    function Re(t) {
+      O.value = t, ge.value += 1;
     }
-    function ft() {
-      return x.value;
+    function wt() {
+      return k.value;
     }
-    function Fe() {
-      d.value.showTable = !d.value.showTable;
+    function We() {
+      c.value.showTable = !c.value.showTable;
     }
-    function De() {
-      d.value.dataLabels.show = !d.value.dataLabels.show;
+    function Be() {
+      c.value.dataLabels.show = !c.value.dataLabels.show;
     }
-    function Re() {
-      d.value.showTooltip = !d.value.showTooltip;
+    function Ee() {
+      c.value.showTooltip = !c.value.showTooltip;
     }
-    const U = v(!1);
-    function ve() {
-      U.value = !U.value;
+    const j = v(!1);
+    function pe() {
+      j.value = !j.value;
     }
-    async function yt({ scale: t = 2 } = {}) {
-      if (!A.value) return;
-      const { width: a, height: l } = A.value.getBoundingClientRect(), s = a / l, { imageUri: u, base64: f } = await Yt({ domElement: A.value, base64: !0, img: !0, scale: t });
+    async function Ct({ scale: t = 2 } = {}) {
+      if (!w.value) return;
+      const { width: a, height: l } = w.value.getBoundingClientRect(), s = a / l, { imageUri: u, base64: f } = await Zt({ domElement: w.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: u,
         base64: f,
@@ -440,62 +440,95 @@ const Qt = ["id"], Zt = ["xmlns", "viewBox"], el = ["x", "y", "width", "height"]
         aspectRatio: s
       };
     }
-    const We = p(() => x.value.map((t) => t.name)), bt = v({ start: 0, end: x.value.length });
-    return jt({
-      timeLabelsEls: G,
-      timeLabels: We,
-      slicer: bt,
+    const Ge = p(() => k.value.map((t) => t.name)), At = v({ start: 0, end: k.value.length });
+    Qt({
+      timeLabelsEls: H,
+      timeLabels: Ge,
+      slicer: At,
       configRef: e,
       rotationPath: ["style", "chart", "labels", "xAxisLabels", "rotation"],
       autoRotatePath: ["style", "chart", "labels", "xAxisLabels", "autoRotate", "enable"],
       isAutoSize: !1,
-      width: _,
-      height: w,
+      width: T,
+      height: C,
       targetClass: ".vue-ui-strip-plot-category-name",
       rotation: e.value.style.chart.labels.xAxisLabels.autoRotate.angle
-    }), Je({
-      getData: ft,
-      getImage: yt,
-      generatePdf: Se,
-      generateCsv: Ie,
-      generateImage: Oe,
-      toggleTable: Fe,
-      toggleLabels: De,
-      toggleTooltip: Re,
-      toggleAnnotator: ve,
-      toggleFullscreen: Me
+    });
+    const B = p(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, a = c.value.showTable;
+      return {
+        component: t ? vt : st,
+        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: O.value,
+          fullscreenParent: w.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8)
+        } : {
+          hideDetails: !0,
+          config: {
+            open: a,
+            maxHeight: 1e4,
+            body: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            },
+            head: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            }
+          }
+        }
+      };
+    });
+    return q(() => c.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && F.value ? F.value.open() : "close" in F.value && F.value.close());
+    }), tt({
+      getData: wt,
+      getImage: Ct,
+      generatePdf: De,
+      generateCsv: de,
+      generateImage: Ne,
+      toggleTable: We,
+      toggleLabels: Be,
+      toggleTooltip: Ee,
+      toggleAnnotator: pe,
+      toggleFullscreen: Re
     }), (t, a) => (r(), n("div", {
       ref_key: "stripPlotChart",
-      ref: A,
-      class: W(`vue-ui-strip-plot ${N.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
-      style: j(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
-      id: `strip-plot_${q.value}`,
-      onMouseenter: a[1] || (a[1] = () => i(Ae)(!0)),
-      onMouseleave: a[2] || (a[2] = () => i(Ae)(!1))
+      ref: w,
+      class: E(`vue-ui-strip-plot ${O.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: J(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
+      id: `strip-plot_${Q.value}`,
+      onMouseenter: a[3] || (a[3] = () => i($e)(!0)),
+      onMouseleave: a[4] || (a[4] = () => i($e)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (r(), T(i(lt), {
+      e.value.userOptions.buttons.annotator ? (r(), z(i(nt), {
         key: 0,
-        svgRef: i(Ce),
+        svgRef: i(Se),
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        active: U.value,
-        onClose: ve
-      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : c("", !0),
-      rt.value ? (r(), n("div", {
+        active: j.value,
+        onClose: pe
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : h("", !0),
+      dt.value ? (r(), n("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: me,
+        ref: we,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
-      }, null, 512)) : c("", !0),
+      }, null, 512)) : h("", !0),
       e.value.style.chart.title.text ? (r(), n("div", {
         key: 2,
         ref_key: "chartTitle",
-        ref: ye,
+        ref: xe,
         style: "width:100%;background:transparent;padding-bottom:24px"
       }, [
-        (r(), T(Jt, {
-          key: `title_${xe.value}`,
+        (r(), z(tl, {
+          key: `title_${Ae.value}`,
           config: {
             title: {
               cy: "donut-div-title",
@@ -507,15 +540,15 @@ const Qt = ["id"], Zt = ["xmlns", "viewBox"], el = ["x", "y", "width", "height"]
             }
           }
         }, null, 8, ["config"]))
-      ], 512)) : c("", !0),
-      e.value.userOptions.show && E.value && (i(Le) || i(ae)) ? (r(), T(i(tt), {
+      ], 512)) : h("", !0),
+      e.value.userOptions.show && G.value && (i(Te) || i(re)) ? (r(), z(i(ut), {
         ref: "details",
-        key: `user_option_${fe.value}`,
+        key: `user_option_${ge.value}`,
         backgroundColor: e.value.style.chart.backgroundColor,
         color: e.value.style.chart.color,
-        isPrinting: i($e),
-        isImaging: i(Te),
-        uid: q.value,
+        isPrinting: i(ze),
+        isImaging: i(Pe),
+        uid: Q.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasXls: e.value.userOptions.buttons.csv,
@@ -523,31 +556,31 @@ const Qt = ["id"], Zt = ["xmlns", "viewBox"], el = ["x", "y", "width", "height"]
         hasTable: e.value.userOptions.buttons.table,
         hasLabel: e.value.userOptions.buttons.labels,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isTooltip: d.value.showTooltip,
-        isFullscreen: N.value,
+        isTooltip: c.value.showTooltip,
+        isFullscreen: O.value,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: A.value,
+        chartElement: w.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: U.value,
+        isAnnotation: j.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
-        onToggleFullscreen: Me,
-        onGeneratePdf: i(Se),
-        onGenerateCsv: Ie,
-        onGenerateImage: i(Oe),
-        onToggleTable: Fe,
-        onToggleLabels: De,
-        onToggleTooltip: Re,
-        onToggleAnnotator: ve,
-        style: j({
-          visibility: i(Le) ? i(ae) ? "visible" : "hidden" : "visible"
+        onToggleFullscreen: Re,
+        onGeneratePdf: i(De),
+        onGenerateCsv: de,
+        onGenerateImage: i(Ne),
+        onToggleTable: We,
+        onToggleLabels: Be,
+        onToggleTooltip: Ee,
+        onToggleAnnotator: pe,
+        style: J({
+          visibility: i(Te) ? i(re) ? "visible" : "hidden" : "visible"
         })
-      }, kt({ _: 2 }, [
+      }, Ve({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
           fn: b(({ isOpen: l, color: s }) => [
-            y(t.$slots, "menuIcon", M(F({ isOpen: l, color: s })), void 0, !0)
+            y(t.$slots, "menuIcon", I(M({ isOpen: l, color: s })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
@@ -596,27 +629,27 @@ const Qt = ["id"], Zt = ["xmlns", "viewBox"], el = ["x", "y", "width", "height"]
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
           fn: b(({ toggleFullscreen: l, isFullscreen: s }) => [
-            y(t.$slots, "optionFullscreen", M(F({ toggleFullscreen: l, isFullscreen: s })), void 0, !0)
+            y(t.$slots, "optionFullscreen", I(M({ toggleFullscreen: l, isFullscreen: s })), void 0, !0)
           ]),
           key: "7"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
           fn: b(({ toggleAnnotator: l, isAnnotator: s }) => [
-            y(t.$slots, "optionAnnotator", M(F({ toggleAnnotator: l, isAnnotator: s })), void 0, !0)
+            y(t.$slots, "optionAnnotator", I(M({ toggleAnnotator: l, isAnnotator: s })), void 0, !0)
           ]),
           key: "8"
         } : void 0
-      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : c("", !0),
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
       (r(), n("svg", {
         ref_key: "svgRef",
-        ref: Ce,
-        xmlns: i(Pt),
-        class: W({ "vue-data-ui-fullscreen--on": N.value, "vue-data-ui-fulscreen--off": !N.value }),
-        viewBox: `0 0 ${_.value} ${w.value}`,
-        style: j(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};`)
+        ref: Se,
+        xmlns: i(Ft),
+        class: E({ "vue-data-ui-fullscreen--on": O.value, "vue-data-ui-fulscreen--off": !O.value }),
+        viewBox: `0 0 ${T.value} ${C.value}`,
+        style: J(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};`)
       }, [
-        Be(i(at)),
+        fe(i(it)),
         t.$slots["chart-background"] ? (r(), n("foreignObject", {
           key: 0,
           x: o.value.left,
@@ -628,10 +661,10 @@ const Qt = ["id"], Zt = ["xmlns", "viewBox"], el = ["x", "y", "width", "height"]
           }
         }, [
           y(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, el)) : c("", !0),
-        e.value.style.chart.grid.show ? (r(), n("g", tl, [
-          e.value.style.chart.grid.horizontalGrid.show ? (r(), n("g", ll, [
-            (r(!0), n(m, null, C(Ne.value, (l) => (r(), n("line", {
+        ], 8, sl)) : h("", !0),
+        e.value.style.chart.grid.show ? (r(), n("g", rl, [
+          e.value.style.chart.grid.horizontalGrid.show ? (r(), n("g", ul, [
+            (r(!0), n(g, null, _(Fe.value, (l) => (r(), n("line", {
               x1: l.x1,
               x2: l.x2,
               y1: l.y,
@@ -640,10 +673,10 @@ const Qt = ["id"], Zt = ["xmlns", "viewBox"], el = ["x", "y", "width", "height"]
               "stroke-width": e.value.style.chart.grid.horizontalGrid.strokeWidth,
               "stroke-dasharray": e.value.style.chart.grid.horizontalGrid.strokeDasharray,
               "stroke-linecap": "round"
-            }, null, 8, al))), 256))
-          ])) : c("", !0),
-          e.value.style.chart.grid.verticalGrid.show ? (r(), n("g", ol, [
-            (r(!0), n(m, null, C(x.value, (l, s) => (r(), n("line", {
+            }, null, 8, nl))), 256))
+          ])) : h("", !0),
+          e.value.style.chart.grid.verticalGrid.show ? (r(), n("g", il, [
+            (r(!0), n(g, null, _(k.value, (l, s) => (r(), n("line", {
               x1: o.value.left + (s + 1) * o.value.stripWidth,
               x2: o.value.left + (s + 1) * o.value.stripWidth,
               y1: o.value.top,
@@ -652,9 +685,9 @@ const Qt = ["id"], Zt = ["xmlns", "viewBox"], el = ["x", "y", "width", "height"]
               "stroke-width": e.value.style.chart.grid.verticalGrid.strokeWidth,
               "stroke-dasharray": e.value.style.chart.grid.verticalGrid.strokeDasharray,
               "stroke-linecap": "round"
-            }, null, 8, sl))), 256))
-          ])) : c("", !0),
-          k("line", {
+            }, null, 8, vl))), 256))
+          ])) : h("", !0),
+          m("line", {
             x1: o.value.left,
             x2: o.value.left,
             y1: o.value.top,
@@ -662,8 +695,8 @@ const Qt = ["id"], Zt = ["xmlns", "viewBox"], el = ["x", "y", "width", "height"]
             stroke: e.value.style.chart.grid.stroke,
             "stroke-width": e.value.style.chart.grid.strokeWidth,
             "stroke-linecap": "round"
-          }, null, 8, rl),
-          k("line", {
+          }, null, 8, cl),
+          m("line", {
             x1: o.value.left,
             x2: o.value.right,
             y1: o.value.bottom,
@@ -671,37 +704,37 @@ const Qt = ["id"], Zt = ["xmlns", "viewBox"], el = ["x", "y", "width", "height"]
             stroke: e.value.style.chart.grid.stroke,
             "stroke-width": e.value.style.chart.grid.strokeWidth,
             "stroke-linecap": "round"
-          }, null, 8, ul)
-        ])) : c("", !0),
+          }, null, 8, hl)
+        ])) : h("", !0),
         e.value.style.chart.labels.yAxisLabels.show ? (r(), n("g", {
           key: 2,
           ref_key: "scaleLabels",
-          ref: ee
+          ref: ae
         }, [
-          (r(!0), n(m, null, C(Ne.value, (l, s) => (r(), n("text", {
+          (r(!0), n(g, null, _(Fe.value, (l, s) => (r(), n("text", {
             x: l.x1 + e.value.style.chart.labels.yAxisLabels.offsetX - 5,
             y: l.y + e.value.style.chart.labels.yAxisLabels.fontSize / 3,
             fill: e.value.style.chart.labels.yAxisLabels.color,
             "font-size": e.value.style.chart.labels.yAxisLabels.fontSize,
             "text-anchor": "end"
-          }, S(i(pe)(
+          }, $(i(me)(
             e.value.style.chart.labels.formatter,
             l.value,
-            i(Y)({
+            i(K)({
               p: e.value.style.chart.labels.prefix,
               v: l.value,
               s: e.value.style.chart.labels.suffix,
               r: e.value.style.chart.labels.yAxisLabels.rounding
             }),
             { datapoint: l, seriesIndex: s }
-          )), 9, nl))), 256))
-        ], 512)) : c("", !0),
+          )), 9, dl))), 256))
+        ], 512)) : h("", !0),
         e.value.style.chart.labels.xAxisLabels.show ? (r(), n("g", {
           key: 3,
           ref_key: "timeLabelsEls",
-          ref: G
+          ref: H
         }, [
-          (r(!0), n(m, null, C(We.value, (l, s) => (r(), n("g", null, [
+          (r(!0), n(g, null, _(Ge.value, (l, s) => (r(), n("g", null, [
             String(l).includes(`
 `) ? (r(), n("text", {
               key: 1,
@@ -710,139 +743,139 @@ const Qt = ["id"], Zt = ["xmlns", "viewBox"], el = ["x", "y", "width", "height"]
               "font-size": e.value.style.chart.labels.xAxisLabels.fontSize,
               fill: e.value.style.chart.labels.xAxisLabels.color,
               "text-anchor": e.value.style.chart.labels.xAxisLabels.rotation > 0 ? "start" : e.value.style.chart.labels.xAxisLabels.rotation < 0 ? "end" : "middle",
-              innerHTML: i(Nt)({
-                content: i(It)(String(l)),
+              innerHTML: i(Rt)({
+                content: i(Wt)(String(l)),
                 fontSize: e.value.style.chart.labels.xAxisLabels.fontSize,
                 fill: e.value.style.chart.labels.xAxisLabels.color,
                 x: 0,
                 y: 0
               })
-            }, null, 8, vl)) : (r(), n("text", {
+            }, null, 8, fl)) : (r(), n("text", {
               key: 0,
               class: "vue-ui-strip-plot-category-name",
               transform: `translate(${o.value.left + (s + 1) * o.value.stripWidth - o.value.stripWidth / 2}, ${o.value.bottom + e.value.style.chart.labels.xAxisLabels.fontSize * 2 + e.value.style.chart.labels.xAxisLabels.offsetY}), rotate(${e.value.style.chart.labels.xAxisLabels.rotation})`,
               "font-size": e.value.style.chart.labels.xAxisLabels.fontSize,
               fill: e.value.style.chart.labels.xAxisLabels.color,
               "text-anchor": e.value.style.chart.labels.xAxisLabels.rotation > 0 ? "start" : e.value.style.chart.labels.xAxisLabels.rotation < 0 ? "end" : "middle"
-            }, S(String(l)), 9, il))
+            }, $(String(l)), 9, pl))
           ]))), 256))
-        ], 512)) : c("", !0),
+        ], 512)) : h("", !0),
         e.value.style.chart.labels.axis.yLabel ? (r(), n("text", {
           key: 4,
           ref_key: "yAxisLabel",
-          ref: Z,
+          ref: le,
           fill: e.value.style.chart.labels.axis.color,
           "font-size": e.value.style.chart.labels.axis.fontSize,
           transform: `translate(${e.value.style.chart.labels.axis.fontSize}, ${o.value.top + o.value.height / 2}) rotate(-90)`,
           "text-anchor": "middle"
-        }, S(e.value.style.chart.labels.axis.yLabel), 9, cl)) : c("", !0),
+        }, $(e.value.style.chart.labels.axis.yLabel), 9, bl)) : h("", !0),
         e.value.style.chart.labels.axis.xLabel ? (r(), n("text", {
           key: 5,
           ref_key: "xAxisLabel",
-          ref: Q,
+          ref: te,
           fill: e.value.style.chart.labels.axis.color,
           "font-size": e.value.style.chart.labels.axis.fontSize,
           x: o.value.left + o.value.width / 2,
-          y: w.value - e.value.style.chart.labels.axis.fontSize / 3,
+          y: C.value - e.value.style.chart.labels.axis.fontSize / 3,
           "text-anchor": "middle"
-        }, S(e.value.style.chart.labels.axis.xLabel), 9, hl)) : c("", !0),
-        h.value ? (r(), n(m, { key: 6 }, [
-          k("line", {
+        }, $(e.value.style.chart.labels.axis.xLabel), 9, yl)) : h("", !0),
+        d.value ? (r(), n(g, { key: 6 }, [
+          m("line", {
             x1: o.value.left,
             x2: o.value.right,
-            y1: h.value.y,
-            y2: h.value.y,
-            stroke: h.value.color,
+            y1: d.value.y,
+            y2: d.value.y,
+            stroke: d.value.color,
             "stroke-width": 1,
-            class: W({ "select-circle": e.value.useCssAnimation })
-          }, null, 10, dl),
-          k("circle", {
+            class: E({ "select-circle": e.value.useCssAnimation })
+          }, null, 10, ml),
+          m("circle", {
             cx: o.value.left,
-            cy: h.value.y,
+            cy: d.value.y,
             r: 3,
-            fill: h.value.color,
-            class: W({ "select-circle": e.value.useCssAnimation })
-          }, null, 10, pl),
-          k("circle", {
+            fill: d.value.color,
+            class: E({ "select-circle": e.value.useCssAnimation })
+          }, null, 10, gl),
+          m("circle", {
             cx: o.value.right,
-            cy: h.value.y,
+            cy: d.value.y,
             r: 3,
-            fill: h.value.color,
-            class: W({ "select-circle": e.value.useCssAnimation })
-          }, null, 10, fl)
-        ], 64)) : c("", !0),
-        k("defs", null, [
-          (r(!0), n(m, null, C(x.value, (l) => (r(), n("radialGradient", {
+            fill: d.value.color,
+            class: E({ "select-circle": e.value.useCssAnimation })
+          }, null, 10, xl)
+        ], 64)) : h("", !0),
+        m("defs", null, [
+          (r(!0), n(g, null, _(k.value, (l) => (r(), n("radialGradient", {
             id: l.id,
             fy: "30%"
           }, [
-            k("stop", {
+            m("stop", {
               offset: "10%",
-              "stop-color": i(Mt)(l.color, e.value.style.chart.plots.gradient.intensity / 100)
-            }, null, 8, bl),
-            k("stop", {
+              "stop-color": i(Bt)(l.color, e.value.style.chart.plots.gradient.intensity / 100)
+            }, null, 8, wl),
+            m("stop", {
               offset: "90%",
-              "stop-color": i(Ft)(l.color, 0.1)
-            }, null, 8, ml),
-            k("stop", {
+              "stop-color": i(Et)(l.color, 0.1)
+            }, null, 8, Cl),
+            m("stop", {
               offset: "100%",
               "stop-color": l.color
-            }, null, 8, gl)
-          ], 8, yl))), 256))
+            }, null, 8, Al)
+          ], 8, kl))), 256))
         ]),
-        (r(!0), n(m, null, C(ct.value, (l, s) => (r(), n(m, null, [
-          (r(!0), n(m, null, C(l.plots, (u, f) => (r(), T(qt, wt({ ref_for: !0 }, t.$attrs, {
-            plot: { x: u.x, y: ge.value ? u.y : o.value.top },
-            radius: h.value && h.value.id === u.id ? re.value * 1.5 : re.value,
+        (r(!0), n(g, null, _(mt.value, (l, s) => (r(), n(g, null, [
+          (r(!0), n(g, null, _(l.plots, (u, f) => (r(), z(el, Xe({ ref_for: !0 }, t.$attrs, {
+            plot: { x: u.x, y: Ce.value ? u.y : o.value.top },
+            radius: d.value && d.value.id === u.id ? ie.value * 1.5 : ie.value,
             shape: e.value.style.chart.plots.shape,
             stroke: e.value.style.chart.plots.stroke,
             strokeWidth: e.value.style.chart.plots.strokeWidth,
             color: e.value.style.chart.plots.gradient.show ? `url(#${l.id})` : l.color,
-            style: `transition: all 0.2s ease-in-out; opacity:${h.value ? h.value.id === u.id ? 1 : 0.2 : e.value.style.chart.plots.opacity};${D.value ? `transition-delay:${f * 50}ms` : ""}`,
-            class: { "vue-ui-strip-plot-animated": e.value.useCssAnimation && D.value && !i(te), "vue-ui-strip-plot-select-circle": e.value.useCssAnimation && !D.value },
-            onMouseenter: (X) => pt({ datapoint: u, seriesIndex: f }),
-            onMouseleave: (X) => ht({ datapoint: u, seriesIndex: f }),
-            onClick: (X) => dt({ datapoint: u, seriesIndex: f })
+            style: `transition: all 0.2s ease-in-out; opacity:${d.value ? d.value.id === u.id ? 1 : 0.2 : e.value.style.chart.plots.opacity};${R.value ? `transition-delay:${f * 50}ms` : ""}`,
+            class: { "vue-ui-strip-plot-animated": e.value.useCssAnimation && R.value && !i(oe), "vue-ui-strip-plot-select-circle": e.value.useCssAnimation && !R.value },
+            onMouseenter: (Y) => kt({ datapoint: u, seriesIndex: f }),
+            onMouseleave: (Y) => gt({ datapoint: u, seriesIndex: f }),
+            onClick: (Y) => xt({ datapoint: u, seriesIndex: f })
           }), null, 16, ["plot", "radius", "shape", "stroke", "strokeWidth", "color", "style", "class", "onMouseenter", "onMouseleave", "onClick"]))), 256)),
-          d.value.dataLabels.show ? (r(), n("g", xl, [
-            (r(!0), n(m, null, C(l.plots, (u, f) => (r(), n(m, null, [
-              f === l.plots.length - 1 || h.value && h.value.id === u.id && !d.value.showTooltip ? (r(), n("text", {
+          c.value.dataLabels.show ? (r(), n("g", Ll, [
+            (r(!0), n(g, null, _(l.plots, (u, f) => (r(), n(g, null, [
+              f === l.plots.length - 1 || d.value && d.value.id === u.id && !c.value.showTooltip ? (r(), n("text", {
                 key: 0,
                 x: u.x,
-                y: u.y + e.value.style.chart.labels.bestPlotLabel.offsetY - re.value * (h.value && h.value.id === u.id && !d.value.showTooltip ? 2 : 1.5),
+                y: u.y + e.value.style.chart.labels.bestPlotLabel.offsetY - ie.value * (d.value && d.value.id === u.id && !c.value.showTooltip ? 2 : 1.5),
                 "font-size": e.value.style.chart.labels.bestPlotLabel.fontSize,
                 fill: e.value.style.chart.labels.bestPlotLabel.color,
                 "text-anchor": "middle",
-                style: j(`opacity:${e.value.useCssAnimation && D.value ? 0 : 1};transition:opacity 0.2s ease-in;`)
-              }, S(u.name) + " " + S(e.value.style.chart.labels.bestPlotLabel.showValue ? i(pe)(
+                style: J(`opacity:${e.value.useCssAnimation && R.value ? 0 : 1};transition:opacity 0.2s ease-in;`)
+              }, $(u.name) + " " + $(e.value.style.chart.labels.bestPlotLabel.showValue ? i(me)(
                 e.value.style.chart.labels.formatter,
                 u.value,
-                i(Y)({
+                i(K)({
                   p: `(${e.value.style.chart.labels.prefix}`,
                   v: u.value,
                   s: `${e.value.style.chart.labels.suffix})`,
                   r: e.value.style.chart.labels.bestPlotLabel.rounding
                 }),
                 { datapoint: u, seriesIndex: f }
-              ) : ""), 13, kl)) : c("", !0)
+              ) : ""), 13, _l)) : h("", !0)
             ], 64))), 256))
-          ])) : c("", !0)
+          ])) : h("", !0)
         ], 64))), 256)),
         y(t.$slots, "svg", { svg: o.value }, void 0, !0)
-      ], 14, Zt)),
-      t.$slots.watermark ? (r(), n("div", wl, [
-        y(t.$slots, "watermark", M(F({ isPrinting: i($e) || i(Te) })), void 0, !0)
-      ])) : c("", !0),
+      ], 14, ol)),
+      t.$slots.watermark ? (r(), n("div", $l, [
+        y(t.$slots, "watermark", I(M({ isPrinting: i(ze) || i(Pe) })), void 0, !0)
+      ])) : h("", !0),
       t.$slots.source ? (r(), n("div", {
         key: 5,
         ref_key: "source",
-        ref: be,
+        ref: ke,
         dir: "auto"
       }, [
         y(t.$slots, "source", {}, void 0, !0)
-      ], 512)) : c("", !0),
-      Be(i(Qe), {
-        show: d.value.showTooltip && J.value,
+      ], 512)) : h("", !0),
+      fe(i(at), {
+        show: c.value.showTooltip && Z.value,
         backgroundColor: e.value.style.chart.tooltip.backgroundColor,
         color: e.value.style.chart.tooltip.color,
         borderRadius: e.value.style.chart.tooltip.borderRadius,
@@ -852,65 +885,79 @@ const Qt = ["id"], Zt = ["xmlns", "viewBox"], el = ["x", "y", "width", "height"]
         backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: A.value,
-        content: K.value,
-        isFullscreen: N.value,
-        isCustom: i(Xe)(e.value.style.chart.tooltip.customFormat),
+        parent: w.value,
+        content: ee.value,
+        isFullscreen: O.value,
+        isCustom: i(Ke)(e.value.style.chart.tooltip.customFormat),
         smooth: e.value.style.chart.tooltip.smooth,
         backdropFilter: e.value.style.chart.tooltip.backdropFilter
       }, {
         "tooltip-before": b(() => [
-          y(t.$slots, "tooltip-before", M(F({ ...ie.value })), void 0, !0)
+          y(t.$slots, "tooltip-before", I(M({ ...he.value })), void 0, !0)
         ]),
         "tooltip-after": b(() => [
-          y(t.$slots, "tooltip-after", M(F({ ...ie.value })), void 0, !0)
+          y(t.$slots, "tooltip-after", I(M({ ...he.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter"]),
-      E.value ? (r(), T(i(Ze), {
-        key: 6,
-        hideDetails: "",
-        config: {
-          open: d.value.showTable,
-          maxHeight: 1e4,
-          body: {
-            backgroundColor: e.value.style.chart.backgroundColor,
-            color: e.value.style.chart.color
-          },
-          head: {
-            backgroundColor: e.value.style.chart.backgroundColor,
-            color: e.value.style.chart.color
-          }
-        }
-      }, {
+      G.value ? (r(), z(Tt(B.value.component), Xe({ key: 6 }, B.value.props, {
+        ref_key: "tableUnit",
+        ref: F,
+        onClose: a[2] || (a[2] = (l) => c.value.showTable = !1)
+      }), Ve({
         content: b(() => [
-          (r(), T(i(et), {
-            key: `table_${ke.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: a[0] || (a[0] = (l) => d.value.showTable = !1)
+          (r(), z(i(rt), {
+            key: `table_${Le.value}`,
+            colNames: X.value.colNames,
+            head: X.value.head,
+            body: X.value.body,
+            config: X.value.config,
+            title: e.value.table.useDialog ? "" : B.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: a[1] || (a[1] = (l) => c.value.showTable = !1)
           }, {
             th: b(({ th: l }) => [
-              k("div", {
+              m("div", {
                 innerHTML: l,
                 style: { display: "flex", "align-items": "center" }
-              }, null, 8, Al)
+              }, null, 8, Tl)
             ]),
             td: b(({ td: l }) => [
-              At(S(l.name || l), 1)
+              je($(l.name || l), 1)
             ]),
             _: 1
-          }, 8, ["colNames", "head", "body", "config", "title"]))
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
         ]),
-        _: 1
-      }, 8, ["config"])) : c("", !0),
-      i(te) ? (r(), T(Ht, { key: 7 })) : c("", !0)
-    ], 46, Qt));
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: b(() => [
+            je($(B.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: b(() => [
+            m("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: a[0] || (a[0] = (l) => de(e.value.userOptions.callbacks.csv))
+            }, [
+              fe(i(ot), {
+                name: "excel",
+                stroke: B.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : h("", !0),
+      i(oe) ? (r(), z(Yt, { key: 7 })) : h("", !0)
+    ], 46, al));
   }
-}, Rl = /* @__PURE__ */ Kt(Ll, [["__scopeId", "data-v-1a2bfe64"]]);
+}, Hl = /* @__PURE__ */ ll(Sl, [["__scopeId", "data-v-86b9afd3"]]);
 export {
-  Rl as default
+  Hl as default
 };