vue-data-ui 3.0.23 → 3.1.1

package/dist/{vue-ui-candlestick-CIn0xZm0.js → vue-ui-candlestick-CGVtDKqZ.js}

@@ -1,21 +1,21 @@
-import { defineAsyncComponent as D, computed as g, ref as r, toRefs as Rt, watch as pe, shallowRef as Xe, onMounted as Ot, onBeforeUnmount as je, watchEffect as Nt, nextTick as be, createElementBlock as i, openBlock as s, unref as u, normalizeStyle as me, normalizeClass as S, createBlock as N, createCommentVNode as p, createElementVNode as c, createVNode as Ye, createSlots as Pt, withCtx as x, renderSlot as b, normalizeProps as P, guardReactiveProps as E, Fragment as V, renderList as B, toDisplayString as Q, createTextVNode as Et } from "vue";
-import { u as Vt, c as Bt, t as Mt, b as Ut, C as Z, o as qe, f as M, D as Wt, h as X, i as L, X as Dt, x as ee, s as Ht, E as Je, v as Gt, w as Xt, y as jt, z as Yt } from "./index-BEuUtONc.js";
-import { t as Ke, u as qt } from "./useResponsive-DfdjqQps.js";
-import { u as Qe } from "./useNestedProp-DhLFhguL.js";
-import { u as Jt } from "./usePrinter-DiB0_UNt.js";
-import { u as Kt } from "./useUserOptionState-BIvW1Kz7.js";
-import { u as Qt } from "./useChartAccessibility-9icAAmYg.js";
-import { u as Zt, B as el } from "./useLoading-D7YHNtLX.js";
-import tl from "./Title-D_e0SFWS.js";
-import { S as ll } from "./Slicer-BTIFUO4x.js";
-import { u as al } from "./useTimeLabels-BGFjWgrv.js";
-import ol from "./img-z5p1gGfY.js";
-import { u as sl } from "./useTimeLabelCollider-CIsgDrl9.js";
-import { _ as ul } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const il = ["id"], nl = ["xmlns", "aria-label", "viewBox"], rl = ["x", "y", "width", "height"], vl = { key: 1 }, dl = ["id"], yl = ["stop-color"], cl = ["stop-color"], hl = ["stop-color"], fl = ["id"], gl = ["stop-color"], pl = ["stop-color"], bl = ["stop-color"], ml = { key: 0 }, xl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], kl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], wl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Al = ["x", "y", "font-size", "fill", "font-weight"], _l = ["transform", "text-anchor", "font-size", "fill", "font-weight"], Cl = ["transform", "text-anchor", "font-size", "fill", "font-weight"], $l = ["x", "y", "width", "height", "fill", "rx"], zl = { key: 0 }, Sl = ["cx", "cy", "r", "fill"], Ll = ["cx", "cy", "r", "fill"], Tl = { key: 1 }, Il = ["x", "y", "width", "height", "rx", "fill"], Fl = ["x", "y", "width", "height", "fill", "rx"], Rl = ["x", "y", "height", "width", "fill", "rx"], Ol = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width"], Nl = ["x", "y", "height", "width", "fill", "onMouseover", "onMouseleave", "onClick"], Pl = {
+import { defineAsyncComponent as F, computed as g, ref as r, toRefs as Vt, watch as te, shallowRef as qe, onMounted as Dt, onBeforeUnmount as Je, watchEffect as Mt, nextTick as ke, createElementBlock as i, openBlock as s, unref as u, normalizeStyle as we, normalizeClass as L, createBlock as B, createCommentVNode as p, createElementVNode as y, createVNode as Ae, createSlots as Ke, withCtx as b, renderSlot as m, normalizeProps as E, guardReactiveProps as V, Fragment as D, renderList as M, toDisplayString as Y, resolveDynamicComponent as Ut, mergeProps as Wt, createTextVNode as Qe } from "vue";
+import { u as Ht, c as Gt, t as Xt, b as jt, C as le, o as Ze, f as U, D as Yt, h as q, i as T, X as qt, x as ae, s as Jt, E as et, v as Kt, w as Qt, y as Zt, z as el } from "./index-BKQqb9lF.js";
+import { t as tt, u as tl } from "./useResponsive-DfdjqQps.js";
+import { u as ll } from "./usePrinter-BzuXiubT.js";
+import { u as al, B as ol } from "./BaseScanner-BgWxam9d.js";
+import { u as lt } from "./useNestedProp-aBOhgs4U.js";
+import { u as sl } from "./useTimeLabels-BGFjWgrv.js";
+import { u as ul } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as il } from "./useChartAccessibility-9icAAmYg.js";
+import { u as nl } from "./useTimeLabelCollider-CIsgDrl9.js";
+import rl from "./img-gBDz7xQQ.js";
+import vl from "./Title-Dz-j6ERs.js";
+import { S as dl } from "./Slicer-6w3K8gAc.js";
+import { _ as cl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const yl = ["id"], hl = ["xmlns", "aria-label", "viewBox"], fl = ["x", "y", "width", "height"], gl = { key: 1 }, pl = ["id"], bl = ["stop-color"], ml = ["stop-color"], xl = ["stop-color"], kl = ["id"], wl = ["stop-color"], Al = ["stop-color"], Cl = ["stop-color"], _l = { key: 0 }, $l = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], zl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Sl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ll = ["x", "y", "font-size", "fill", "font-weight"], Tl = ["transform", "text-anchor", "font-size", "fill", "font-weight"], Il = ["transform", "text-anchor", "font-size", "fill", "font-weight"], Fl = ["x", "y", "width", "height", "fill", "rx"], Rl = { key: 0 }, Ol = ["cx", "cy", "r", "fill"], Pl = ["cx", "cy", "r", "fill"], Nl = { key: 1 }, Bl = ["x", "y", "width", "height", "rx", "fill"], El = ["x", "y", "width", "height", "fill", "rx"], Vl = ["x", "y", "height", "width", "fill", "rx"], Dl = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width"], Ml = ["x", "y", "height", "width", "fill", "onMouseover", "onMouseleave", "onClick"], Ul = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, El = ["innerHTML"], Vl = {
+}, Wl = ["innerHTML"], Hl = {
   __name: "vue-ui-candlestick",
   props: {
     config: {
@@ -31,14 +31,14 @@ const il = ["id"], nl = ["xmlns", "aria-label", "viewBox"], rl = ["x", "y", "wid
       }
     }
   },
-  setup(Ze, { expose: et }) {
-    const tt = D(() => import("./vue-ui-accordion-B4YfUjZ5.js")), lt = D(() => import("./DataTable-nO6ydJO2.js")), at = D(() => import("./PackageVersion-B6M-3jRt.js")), ot = D(() => import("./PenAndPaper-zym5uEeN.js")), st = D(() => import("./Tooltip-DjVoFYj1.js")), ut = D(() => import("./UserOptions-z0NWZ7aQ.js")), { vue_ui_candlestick: it } = Vt(), h = Ze, te = g(() => !!h.dataset && h.dataset.length), $ = r(!1), le = r(null), w = r(Bt()), nt = r(null), ae = r(!1), oe = r(""), se = r(void 0), xe = r(0), T = r(null), ke = r(null), we = r(null), Ae = r(null), _e = r(null), Ce = r(null), j = r(0), $e = r(0), ze = r(0), ue = r(null), H = r(null), e = r(re()), { loading: z, FINAL_DATASET: A, manualLoading: ie } = Zt({
-      ...Rt(h),
+  setup(at, { expose: ot }) {
+    const st = F(() => import("./BaseIcon-DLesaZpW.js")), ut = F(() => import("./Tooltip-BTGOEC7w.js")), it = F(() => import("./vue-ui-accordion-B5QeV3BK.js")), nt = F(() => import("./DataTable-BAf4Obr9.js")), rt = F(() => import("./PenAndPaper-B6OvfyHH.js")), vt = F(() => import("./UserOptions-CsDlFB0L.js")), dt = F(() => import("./PackageVersion-Cv_ypT0N.js")), ct = F(() => import("./BaseDraggableDialog-B2BQC0-h.js")), { vue_ui_candlestick: yt } = Ht(), h = at, oe = g(() => !!h.dataset && h.dataset.length), $ = r(!1), se = r(null), A = r(Gt()), ht = r(null), ue = r(!1), ie = r(""), ne = r(void 0), Ce = r(0), z = r(null), _e = r(null), $e = r(null), ze = r(null), Se = r(null), Le = r(null), J = r(0), Te = r(0), Ie = r(0), re = r(null), H = r(null), G = r(null), e = r(ce()), { loading: S, FINAL_DATASET: C, manualLoading: ve } = al({
+      ...Vt(h),
       FINAL_CONFIG: e,
-      prepareConfig: re,
+      prepareConfig: ce,
       callback: () => {
         Promise.resolve().then(async () => {
-          await ce();
+          await ge();
         });
       },
       skeletonDataset: [
@@ -55,7 +55,7 @@ const il = ["id"], nl = ["xmlns", "aria-label", "viewBox"], rl = ["x", "y", "wid
         [17304192e5, 890, 2330, 550, 1950, 3770],
         [17330112e5, 1440, 3770, 890, 3200, 5100]
       ],
-      skeletonConfig: Mt({
+      skeletonConfig: Xt({
         defaultConfig: e.value,
         userConfig: {
           useCssAnimation: !1,
@@ -96,164 +96,164 @@ const il = ["id"], nl = ["xmlns", "aria-label", "viewBox"], rl = ["x", "y", "wid
           }
         }
       })
-    }), { userOptionsVisible: ne, setUserOptionsVisibility: Se, keepUserOptionState: Le } = Kt({ config: e.value }), { svgRef: Te } = Qt({ config: e.value.style.title });
-    function re() {
-      const t = Qe({
+    }), { userOptionsVisible: de, setUserOptionsVisibility: Fe, keepUserOptionState: Re } = ul({ config: e.value }), { svgRef: Oe } = il({ config: e.value.style.title });
+    function ce() {
+      const t = lt({
         userConfig: h.config,
-        defaultConfig: it
+        defaultConfig: yt
       });
       let a = {};
       return t.theme ? a = {
-        ...Qe({
-          userConfig: Ut.vue_ui_candlestick[t.theme] || h.config,
+        ...lt({
+          userConfig: jt.vue_ui_candlestick[t.theme] || h.config,
           defaultConfig: t
         })
-      } : a = t, h.config && Z(h.config, "style.zoom.startIndex") ? a.style.zoom.startIndex = h.config.style.zoom.startIndex : a.style.zoom.startIndex = null, h.config && Z(h.config, "style.zoom.endIndex") ? a.style.zoom.endIndex = h.config.style.zoom.endIndex : a.style.zoom.endIndex = null, h.config && Z(h.config, "style.layout.grid.yAxis.scale.min") ? a.style.layout.grid.yAxis.scale.min = h.config.style.layout.grid.yAxis.scale.min : a.style.layout.grid.yAxis.scale.min = null, h.config && Z(h.config, "style.layout.grid.yAxis.scale.max") ? a.style.layout.grid.yAxis.scale.max = h.config.style.layout.grid.yAxis.scale.max : a.style.layout.grid.yAxis.scale.max = null, a;
+      } : a = t, h.config && le(h.config, "style.zoom.startIndex") ? a.style.zoom.startIndex = h.config.style.zoom.startIndex : a.style.zoom.startIndex = null, h.config && le(h.config, "style.zoom.endIndex") ? a.style.zoom.endIndex = h.config.style.zoom.endIndex : a.style.zoom.endIndex = null, h.config && le(h.config, "style.layout.grid.yAxis.scale.min") ? a.style.layout.grid.yAxis.scale.min = h.config.style.layout.grid.yAxis.scale.min : a.style.layout.grid.yAxis.scale.min = null, h.config && le(h.config, "style.layout.grid.yAxis.scale.max") ? a.style.layout.grid.yAxis.scale.max = h.config.style.layout.grid.yAxis.scale.max : a.style.layout.grid.yAxis.scale.max = null, a;
     }
-    pe(() => h.config, (t) => {
-      z.value || (e.value = re()), ne.value = !e.value.userOptions.showOnChartHover, Ie(), j.value += 1, ze.value += 1, $e.value += 1, _.value.showTable = e.value.table.show, _.value.showTooltip = e.value.style.tooltip.show;
-    }, { deep: !0 }), pe(() => h.dataset, (t) => {
-      Array.isArray(t) && t.length > 0 && (ie.value = !1), v.value.start = 0, v.value.end = t.length, j.value += 1;
+    te(() => h.config, (t) => {
+      S.value || (e.value = ce()), de.value = !e.value.userOptions.showOnChartHover, Pe(), J.value += 1, Ie.value += 1, Te.value += 1, k.value.showTable = e.value.table.show, k.value.showTooltip = e.value.style.tooltip.show;
+    }, { deep: !0 }), te(() => h.dataset, (t) => {
+      Array.isArray(t) && t.length > 0 && (ve.value = !1), v.value.start = 0, v.value.end = t.length, J.value += 1;
     }, { deep: !0 });
-    const y = r({
+    const c = r({
       height: e.value.style.height,
       width: e.value.style.width,
       xAxisFontSize: e.value.style.layout.grid.xAxis.dataLabels.fontSize,
       yAxisFontSize: e.value.style.layout.grid.yAxis.dataLabels.fontSize
-    }), I = Xe(null), U = Xe(null);
-    Ot(() => {
-      Ie();
+    }), I = qe(null), W = qe(null);
+    Dt(() => {
+      Pe();
     });
-    const F = g(() => !!e.value.debug);
-    function Ie() {
-      if (qe(h.dataset) && (M({
+    const R = g(() => !!e.value.debug);
+    function Pe() {
+      if (Ze(h.dataset) && (U({
         componentName: "VueUiCandlestick",
         type: "dataset",
-        debug: F.value
-      }), ie.value = !0), qe(h.dataset) || (ie.value = e.value.loading), setTimeout(() => {
+        debug: R.value
+      }), ve.value = !0), Ze(h.dataset) || (ve.value = e.value.loading), setTimeout(() => {
         $.value = !0;
       }, 10), e.value.responsive) {
-        const a = Ke(() => {
+        const a = tt(() => {
           $.value = !1;
-          const { width: l, height: o } = qt({
-            chart: T.value,
-            title: e.value.style.title.text ? ke.value : null,
-            slicer: Ae.value,
-            legend: we.value,
-            source: _e.value,
-            noTitle: Ce.value
+          const { width: l, height: o } = tl({
+            chart: z.value,
+            title: e.value.style.title.text ? _e.value : null,
+            slicer: ze.value,
+            legend: $e.value,
+            source: Se.value,
+            noTitle: Le.value
           });
           requestAnimationFrame(() => {
-            y.value.width = l, y.value.height = o - 12, e.value.responsiveProportionalSizing ? (y.value.xAxisFontSize = Je({
+            c.value.width = l, c.value.height = o - 12, e.value.responsiveProportionalSizing ? (c.value.xAxisFontSize = et({
               relator: Math.min(l, o),
               adjuster: e.value.style.width,
               source: e.value.style.layout.grid.xAxis.dataLabels.fontSize,
               threshold: 6,
               fallback: 6
-            }), y.value.yAxisFontSize = Je({
+            }), c.value.yAxisFontSize = et({
               relator: Math.min(l, o),
               adjuster: e.value.style.width,
               source: e.value.style.layout.grid.yAxis.dataLabels.fontSize,
               threshold: 6,
               fallback: 6
-            })) : (y.value.xAxisFontSize = e.value.style.layout.grid.xAxis.dataLabels.fontSize, y.value.yAxisFontSize = e.value.style.layout.grid.yAxis.dataLabels.fontSize), le.value && clearTimeout(le.value), le.value = setTimeout(() => {
+            })) : (c.value.xAxisFontSize = e.value.style.layout.grid.xAxis.dataLabels.fontSize, c.value.yAxisFontSize = e.value.style.layout.grid.yAxis.dataLabels.fontSize), se.value && clearTimeout(se.value), se.value = setTimeout(() => {
               $.value = !0;
             }, 10);
           });
         });
-        I.value && (U.value && I.value.unobserve(U.value), I.value.disconnect()), I.value = new ResizeObserver(a), U.value = T.value.parentNode, I.value.observe(U.value);
+        I.value && (W.value && I.value.unobserve(W.value), I.value.disconnect()), I.value = new ResizeObserver(a), W.value = z.value.parentNode, I.value.observe(W.value);
       }
-      ce();
+      ge();
     }
-    je(() => {
-      I.value && (U.value && I.value.unobserve(U.value), I.value.disconnect());
+    Je(() => {
+      I.value && (W.value && I.value.unobserve(W.value), I.value.disconnect());
     });
-    const { isPrinting: Fe, isImaging: Re, generatePdf: Oe, generateImage: Ne } = Jt({
-      elementId: `vue-ui-candlestick_${w.value}`,
+    const { isPrinting: Ne, isImaging: Be, generatePdf: Ee, generateImage: Ve } = ll({
+      elementId: `vue-ui-candlestick_${A.value}`,
       fileName: e.value.style.title.text || "vue-ui-candlestick",
       options: e.value.userOptions.print
-    }), rt = g(() => e.value.userOptions.show && !e.value.style.title.text), _ = r({
+    }), ft = g(() => e.value.userOptions.show && !e.value.style.title.text), k = r({
       showTable: e.value.table.show,
       showTooltip: e.value.style.tooltip.show
-    }), ve = r(0), vt = Ke((t) => {
-      ve.value = t;
+    }), ye = r(0), gt = tt((t) => {
+      ye.value = t;
     }, 100);
-    Nt((t) => {
+    Mt((t) => {
       const a = H.value;
       if (!a) return;
       const l = new ResizeObserver((o) => {
-        vt(o[0].contentRect.height);
+        gt(o[0].contentRect.height);
       });
       l.observe(a), t(() => l.disconnect());
-    }), je(() => {
-      ve.value = 0;
+    }), Je(() => {
+      ye.value = 0;
     });
-    const Pe = g(() => {
+    const De = g(() => {
       let t = 0;
-      return H.value && (t = ve.value + y.value.xAxisFontSize), t;
+      return H.value && (t = ye.value + c.value.xAxisFontSize), t;
     });
-    function dt() {
+    function pt() {
       let t = e.value.style.layout.grid.yAxis.dataLabels.offsetX;
-      return ue.value && (t = Array.from(ue.value.querySelectorAll("text")).reduce((o, m) => {
-        const f = m.getComputedTextLength();
+      return re.value && (t = Array.from(re.value.querySelectorAll("text")).reduce((o, x) => {
+        const f = x.getComputedTextLength();
         return f > o ? f : o;
       }, 0)), t + 13;
     }
     const n = g(() => {
-      const { top: t, right: a, bottom: l, left: o } = e.value.style.layout.padding, m = dt(), f = 12;
+      const { top: t, right: a, bottom: l, left: o } = e.value.style.layout.padding, x = pt(), f = 12;
       return {
         top: t + f,
-        right: y.value.width - a,
-        left: o + m,
-        bottom: y.value.height - l - Pe.value,
-        width: y.value.width - o - a - m,
-        height: y.value.height - t - l - Pe.value - f
+        right: c.value.width - a,
+        left: o + x,
+        bottom: c.value.height - l - De.value,
+        width: c.value.width - o - a - x,
+        height: c.value.height - t - l - De.value - f
       };
-    }), G = g(() => A.value.length), v = r({
+    }), X = g(() => C.value.length), v = r({
       start: 0,
-      end: G.value
-    }), Ee = g(() => A.value.map((t, a) => ({
+      end: X.value
+    }), Me = g(() => C.value.map((t, a) => ({
       ...t,
       absoluteIndex: a
-    })).slice(v.value.start, v.value.end)), de = g(() => (A.value.forEach((t, a) => {
-      [null, void 0].includes(t[0]) && M({
+    })).slice(v.value.start, v.value.end)), he = g(() => (C.value.forEach((t, a) => {
+      [null, void 0].includes(t[0]) && U({
         componentName: "VueUiCandlestick",
         type: "datasetAttribute",
         property: "period (index 0)",
         index: a,
-        debug: F.value
-      }), [null, void 0].includes(t[1]) && M({
+        debug: R.value
+      }), [null, void 0].includes(t[1]) && U({
         componentName: "VueUiCandlestick",
         type: "datasetAttribute",
         property: "open (index 1)",
         index: a,
-        debug: F.value
-      }), [null, void 0].includes(t[2]) && M({
+        debug: R.value
+      }), [null, void 0].includes(t[2]) && U({
         componentName: "VueUiCandlestick",
         type: "datasetAttribute",
         property: "high (index 2)",
         index: a,
-        debug: F.value
-      }), [null, void 0].includes(t[3]) && M({
+        debug: R.value
+      }), [null, void 0].includes(t[3]) && U({
         componentName: "VueUiCandlestick",
         type: "datasetAttribute",
         property: "low (index 3)",
         index: a,
-        debug: F.value
-      }), [null, void 0].includes(t[4]) && M({
+        debug: R.value
+      }), [null, void 0].includes(t[4]) && U({
         componentName: "VueUiCandlestick",
         type: "datasetAttribute",
         property: "last (index 4)",
         index: a,
-        debug: F.value
-      }), [null, void 0].includes(t[5]) && M({
+        debug: R.value
+      }), [null, void 0].includes(t[5]) && U({
         componentName: "VueUiCandlestick",
         type: "datasetAttribute",
         property: "volume (index 5)",
         index: a,
-        debug: F.value
+        debug: R.value
       });
-    }), Ee.value.map((t) => ({
+    }), Me.value.map((t) => ({
       absoluteIndex: t.absoluteIndex,
       period: t[0],
       open: t[1],
@@ -261,170 +261,170 @@ const il = ["id"], nl = ["xmlns", "aria-label", "viewBox"], rl = ["x", "y", "wid
       low: t[3],
       last: t[4],
       volume: t[5]
-    })))), d = g(() => n.value.width / Ee.value.length), Ve = g(() => {
-      const t = e.value.style.layout.grid.yAxis.scale.max === null ? Math.max(...de.value.map((l) => l.high)) : e.value.style.layout.grid.yAxis.scale.max, a = e.value.style.layout.grid.yAxis.scale.min === null ? 0 : e.value.style.layout.grid.yAxis.scale.min;
+    })))), d = g(() => n.value.width / Me.value.length), Ue = g(() => {
+      const t = e.value.style.layout.grid.yAxis.scale.max === null ? Math.max(...he.value.map((l) => l.high)) : e.value.style.layout.grid.yAxis.scale.max, a = e.value.style.layout.grid.yAxis.scale.min === null ? 0 : e.value.style.layout.grid.yAxis.scale.min;
       return {
         max: t,
         min: a
       };
-    }), C = g(() => Wt(Ve.value.min, Ve.value.max, e.value.style.layout.grid.yAxis.dataLabels.steps));
-    function Y(t, a) {
+    }), _ = g(() => Yt(Ue.value.min, Ue.value.max, e.value.style.layout.grid.yAxis.dataLabels.steps));
+    function K(t, a) {
       return {
         ...t,
-        x: X(n.value.left + a * d.value + d.value / 2),
-        y: X(n.value.top + (1 - (t - C.value.min) / (C.value.max - C.value.min)) * n.value.height),
-        value: X(t)
+        x: q(n.value.left + a * d.value + d.value / 2),
+        y: q(n.value.top + (1 - (t - _.value.min) / (_.value.max - _.value.min)) * n.value.height),
+        value: q(t)
       };
     }
-    const k = g(() => de.value.map((t, a) => {
-      const l = Y(t.open, a), o = Y(t.high, a), m = Y(t.low, a), f = Y(t.last, a), O = t.last > t.open;
+    const w = g(() => he.value.map((t, a) => {
+      const l = K(t.open, a), o = K(t.high, a), x = K(t.low, a), f = K(t.last, a), N = t.last > t.open;
       return {
         period: t.period,
         open: l,
         high: o,
-        low: m,
+        low: x,
         last: f,
         volume: t.volume,
-        isBullish: O,
+        isBullish: N,
         absoluteIndex: t.absoluteIndex
       };
     }));
-    function yt(t) {
-      return X((t - C.value.min) / (C.value.max - C.value.min));
+    function bt(t) {
+      return q((t - _.value.min) / (_.value.max - _.value.min));
     }
-    const ct = g(() => C.value.ticks.map((t) => ({
-      y: n.value.bottom - n.value.height * yt(t),
-      value: X(t)
-    }))), ht = g(() => de.value.map((t) => t.period)), R = g(() => al({
-      values: A.value.map((t) => t[0]),
-      maxDatapoints: A.value.length,
+    const mt = g(() => _.value.ticks.map((t) => ({
+      y: n.value.bottom - n.value.height * bt(t),
+      value: q(t)
+    }))), xt = g(() => he.value.map((t) => t.period)), O = g(() => sl({
+      values: C.value.map((t) => t[0]),
+      maxDatapoints: C.value.length,
       formatter: e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter,
       start: v.value.start,
       end: v.value.end
-    })), Be = g(() => e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? {
-      start: R.value.find((t) => t.absoluteIndex === v.value.start).text,
-      end: R.value.find((t) => t.absoluteIndex === v.value.end - 1).text
+    })), We = g(() => e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? {
+      start: O.value.find((t) => t.absoluteIndex === v.value.start).text,
+      end: O.value.find((t) => t.absoluteIndex === v.value.end - 1).text
     } : {
-      start: A.value[v.value.start] ? A.value[v.value.start][0] : A.value[0][0],
-      end: A.value[v.value.end - 1] ? A.value[v.value.end - 1][0] : A.value.at(-1)[0]
-    }), ye = r(null);
-    function ft(t, a) {
+      start: C.value[v.value.start] ? C.value[v.value.start][0] : C.value[0][0],
+      end: C.value[v.value.end - 1] ? C.value[v.value.end - 1][0] : C.value.at(-1)[0]
+    }), fe = r(null);
+    function kt(t, a) {
       e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: a, seriesIndex: t + v.value.start });
     }
-    function gt(t, a) {
-      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: a, seriesIndex: t + v.value.start }), se.value = void 0, ae.value = !1;
+    function wt(t, a) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: a, seriesIndex: t + v.value.start }), ne.value = void 0, ue.value = !1;
     }
-    function pt(t, a) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: a, seriesIndex: t + v.value.start }), se.value = t, ye.value = {
+    function At(t, a) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: a, seriesIndex: t + v.value.start }), ne.value = t, fe.value = {
         datapoint: a,
         seriesIndex: t,
-        series: k.value,
+        series: w.value,
         config: e.value
       };
       const l = e.value.style.tooltip.customFormat;
-      if (jt(l) && Yt(() => l({
+      if (Zt(l) && el(() => l({
         seriesIndex: t,
         datapoint: a,
-        series: k.value,
+        series: w.value,
         config: e.value
       })))
-        oe.value = l({
+        ie.value = l({
           seriesIndex: t,
           datapoint: a,
-          series: k.value,
+          series: w.value,
           config: e.value
         });
       else if (e.value.style.tooltip.show) {
         let o = "";
-        const { period: m, open: f, high: O, low: fe, last: ge, volume: K, isBullish: Ge } = k.value[t], { period: Bl, open: At, high: _t, low: Ct, last: $t, volume: zt } = e.value.translations, St = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? R.value[t].text : m;
+        const { period: x, open: f, high: N, low: me, last: xe, volume: ee, isBullish: Ye } = w.value[t], { period: Gl, open: Lt, high: Tt, low: It, last: Ft, volume: Rt } = e.value.translations, Ot = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? O.value[t].text : x;
         o += `<div><svg style="margin-right:6px" viewBox="0 0 12 12" height="12" width="12"><rect x="0" y="0" height="12" width="12" rx="${e.value.style.layout.candle.borderRadius * 3}" stroke="${e.value.style.layout.candle.stroke}" stroke-width="${e.value.style.layout.candle.strokeWidth}" 
-                fill="${e.value.style.layout.candle.gradient.show ? Ge ? `url(#bullish_gradient_${w.value})` : `url(#bearish_gradient_${w.value})` : Ge ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish}"/></svg>${St}</div>`, o += `${zt} : <b>${isNaN(K) ? "-" : Number(K.toFixed(e.value.style.tooltip.roundingValue)).toLocaleString()}</b>`, o += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}">`;
-        const Lt = L({
+                fill="${e.value.style.layout.candle.gradient.show ? Ye ? `url(#bullish_gradient_${A.value})` : `url(#bearish_gradient_${A.value})` : Ye ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish}"/></svg>${Ot}</div>`, o += `${Rt} : <b>${isNaN(ee) ? "-" : Number(ee.toFixed(e.value.style.tooltip.roundingValue)).toLocaleString()}</b>`, o += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}">`;
+        const Pt = T({
           p: e.value.style.tooltip.prefix,
           v: f.value,
           s: e.value.style.tooltip.suffix,
           r: e.value.style.tooltip.roundingValue
         });
-        o += `<div>${At}: <b>${Lt}</b></div>`;
-        const Tt = L({
+        o += `<div>${Lt}: <b>${Pt}</b></div>`;
+        const Nt = T({
           p: e.value.style.tooltip.prefix,
-          v: O.value,
+          v: N.value,
           s: e.value.style.tooltip.suffix,
           r: e.value.style.tooltip.roundingValue
         });
-        o += `<div>${_t}: <b>${Tt}</b></div>`;
-        const It = L({
+        o += `<div>${Tt}: <b>${Nt}</b></div>`;
+        const Bt = T({
           p: e.value.style.tooltip.prefix,
-          v: fe.value,
+          v: me.value,
           s: e.value.style.tooltip.suffix,
           r: e.value.style.tooltip.roundingValue
         });
-        o += `<div>${Ct}: <b>${It}</b></div>`;
-        const Ft = L({
+        o += `<div>${It}: <b>${Bt}</b></div>`;
+        const Et = T({
           p: e.value.style.tooltip.prefix,
-          v: ge.value,
+          v: xe.value,
           s: e.value.style.tooltip.suffix,
           r: e.value.style.tooltip.roundingValue
         });
-        o += `<div>${$t}: <b>${Ft}</b></div>`, o += "</div>", oe.value = `<div style="text-align:right">${o}</div>`;
+        o += `<div>${Ft}: <b>${Et}</b></div>`, o += "</div>", ie.value = `<div style="text-align:right">${o}</div>`;
       }
-      ae.value = !0;
+      ue.value = !0;
     }
-    function bt() {
-      ce();
+    function Ct() {
+      ge();
     }
-    const Me = r(null);
-    async function ce() {
-      await be(), await be();
-      const { startIndex: t, endIndex: a } = e.value.style.zoom, l = Me.value, o = G.value;
-      v.value = { start: 0, end: o }, (t != null || a != null) && l ? (t != null ? l.setStartValue(t) : (v.value.start = 0, l.setStartValue(0)), a != null ? l.setEndValue(mt(a + 1)) : (v.value.end = o, l.setEndValue(o))) : (v.value = { start: 0, end: o }, j.value += 1);
+    const He = r(null);
+    async function ge() {
+      await ke(), await ke();
+      const { startIndex: t, endIndex: a } = e.value.style.zoom, l = He.value, o = X.value;
+      v.value = { start: 0, end: o }, (t != null || a != null) && l ? (t != null ? l.setStartValue(t) : (v.value.start = 0, l.setStartValue(0)), a != null ? l.setEndValue(_t(a + 1)) : (v.value.end = o, l.setEndValue(o))) : (v.value = { start: 0, end: o }, J.value += 1);
     }
-    function mt(t) {
-      const a = G.value;
+    function _t(t) {
+      const a = X.value;
       return t > a ? a : t < 0 || e.value.style.zoom.startIndex !== null && t < e.value.style.zoom.startIndex ? e.value.style.zoom.startIndex !== null ? e.value.style.zoom.startIndex + 1 : 1 : t;
     }
-    function Ue(t = null) {
-      be(() => {
-        const a = [e.value.translations.period, e.value.translations.open, e.value.translations.high, e.value.translations.low, e.value.translations.last, e.value.translations.volume], l = k.value.map((f, O) => [
-          e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? R.value[O].text : f.period,
+    function pe(t = null) {
+      ke(() => {
+        const a = [e.value.translations.period, e.value.translations.open, e.value.translations.high, e.value.translations.low, e.value.translations.last, e.value.translations.volume], l = w.value.map((f, N) => [
+          e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? O.value[N].text : f.period,
           f.open.value,
           f.high.value,
           f.low.value,
           f.last.value,
           f.volume
-        ]), o = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([a]).concat(l), m = Gt(o);
-        t ? t(m) : Xt({ csvContent: m, title: e.value.style.title.text || "vue-ui-candlestick" });
+        ]), o = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([a]).concat(l), x = Kt(o);
+        t ? t(x) : Qt({ csvContent: x, title: e.value.style.title.text || "vue-ui-candlestick" });
       });
     }
-    const q = g(() => {
-      const t = k.value.map((o, m) => {
-        const f = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? R.value[m].text : o.period, O = L({
+    const Q = g(() => {
+      const t = w.value.map((o, x) => {
+        const f = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? O.value[x].text : o.period, N = T({
           p: e.value.table.td.prefix,
           v: o.open.value,
           s: e.value.table.td.suffix,
           r: e.value.table.td.roundingValue
-        }), fe = L({
+        }), me = T({
           p: e.value.table.td.prefix,
           v: o.high.value,
           s: e.value.table.td.suffix,
           r: e.value.table.td.roundingValue
-        }), ge = L({
+        }), xe = T({
           p: e.value.table.td.prefix,
           v: o.low.value,
           s: e.value.table.td.suffix,
           r: e.value.table.td.roundingValue
-        }), K = L({
+        }), ee = T({
           p: e.value.table.td.prefix,
           v: o.last.value,
           s: e.value.table.td.suffix,
           r: e.value.table.td.roundingValue
         });
         return [
-          `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" height="12" width="12" style="margin-right: 6px"><rect x="0" y="0" height="12" width="12" rx="${e.value.style.layout.candle.borderRadius * 3}" fill="${e.value.style.layout.candle.gradient.show ? o.isBullish ? `url(#bullish_gradient_${w.value}` : `url(#bearish_gradient_${w.value})` : o.isBullish ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish}"/></svg> ${f}`,
-          O,
-          fe,
-          ge,
-          K,
+          `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" height="12" width="12" style="margin-right: 6px"><rect x="0" y="0" height="12" width="12" rx="${e.value.style.layout.candle.borderRadius * 3}" fill="${e.value.style.layout.candle.gradient.show ? o.isBullish ? `url(#bullish_gradient_${A.value}` : `url(#bearish_gradient_${A.value})` : o.isBullish ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish}"/></svg> ${f}`,
+          N,
+          me,
+          xe,
+          ee,
           `${isNaN(o.volume) ? "-" : o.volume.toLocaleString()}`
         ];
       }), a = {
@@ -448,25 +448,25 @@ const il = ["id"], nl = ["xmlns", "aria-label", "viewBox"], rl = ["x", "y", "wid
         e.value.translations.volume
       ];
       return { head: l, body: t, config: a, colNames: l };
-    }), W = r(!1);
-    function We(t) {
-      W.value = t, xe.value += 1;
+    }), P = r(!1);
+    function Ge(t) {
+      P.value = t, Ce.value += 1;
     }
-    function De() {
-      _.value.showTable = !_.value.showTable;
+    function Xe() {
+      k.value.showTable = !k.value.showTable;
     }
-    function He() {
-      _.value.showTooltip = !_.value.showTooltip;
+    function je() {
+      k.value.showTooltip = !k.value.showTooltip;
     }
-    const J = r(!1);
-    function he() {
-      J.value = !J.value;
+    const Z = r(!1);
+    function be() {
+      Z.value = !Z.value;
     }
-    async function xt({ scale: t = 2 } = {}) {
-      if (!T.value) return;
-      const { width: a, height: l } = T.value.getBoundingClientRect(), o = a / l, { imageUri: m, base64: f } = await ol({ domElement: T.value, base64: !0, img: !0, scale: t });
+    async function $t({ scale: t = 2 } = {}) {
+      if (!z.value) return;
+      const { width: a, height: l } = z.value.getBoundingClientRect(), o = a / l, { imageUri: x, base64: f } = await rl({ domElement: z.value, base64: !0, img: !0, scale: t });
       return {
-        imageUri: m,
+        imageUri: x,
         base64: f,
         title: e.value.style.title.text,
         width: a,
@@ -474,64 +474,97 @@ const il = ["id"], nl = ["xmlns", "aria-label", "viewBox"], rl = ["x", "y", "wid
         aspectRatio: o
       };
     }
-    const kt = g(() => y.value.width), wt = g(() => y.value.height);
-    return sl({
+    const zt = g(() => c.value.width), St = g(() => c.value.height);
+    nl({
       timeLabelsEls: H,
-      timeLabels: R,
+      timeLabels: O,
       slicer: v,
       configRef: e,
       rotationPath: ["style", "layout", "grid", "xAxis", "dataLabels", "rotation"],
       autoRotatePath: ["style", "layout", "grid", "xAxis", "dataLabels", "autoRotate", "enable"],
       isAutoSize: !1,
       rotation: e.value.style.layout.grid.xAxis.dataLabels.autoRotate.angle,
-      width: kt,
-      height: wt
-    }), pe(e, () => {
-      _.value = {
+      width: zt,
+      height: St
+    }), te(e, () => {
+      k.value = {
         showTable: e.value.table.show,
         showTooltip: e.value.style.tooltip.show
       };
-    }, { immediate: !0 }), et({
-      getImage: xt,
-      generatePdf: Oe,
-      generateCsv: Ue,
-      generateImage: Ne,
-      toggleTable: De,
-      toggleTooltip: He,
-      toggleAnnotator: he,
-      toggleFullscreen: We
+    }, { immediate: !0 });
+    const j = g(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, a = k.value.showTable;
+      return {
+        component: t ? ct : it,
+        title: `${e.value.style.title.text}${e.value.style.title.subtitle.text ? `: ${e.value.style.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: P.value,
+          fullscreenParent: z.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8)
+        } : {
+          hideDetails: !0,
+          config: {
+            open: a,
+            maxHeight: 1e4,
+            body: {
+              backgroundColor: e.value.style.backgroundColor,
+              color: e.value.style.color
+            },
+            head: {
+              backgroundColor: e.value.style.backgroundColor,
+              color: e.value.style.color
+            }
+          }
+        }
+      };
+    });
+    return te(() => k.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && G.value ? G.value.open() : "close" in G.value && G.value.close());
+    }), ot({
+      getImage: $t,
+      generatePdf: Ee,
+      generateCsv: pe,
+      generateImage: Ve,
+      toggleTable: Xe,
+      toggleTooltip: je,
+      toggleAnnotator: be,
+      toggleFullscreen: Ge
     }), (t, a) => (s(), i("div", {
       ref_key: "candlestickChart",
-      ref: T,
-      class: S(`vue-ui-candlestick ${W.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
-      style: me(`position:relative;font-family:${e.value.style.fontFamily}; text-align:center;background:${e.value.style.backgroundColor}; ${e.value.responsive ? "height: 100%" : ""}`),
-      id: `vue-ui-candlestick_${w.value}`,
-      onMouseenter: a[3] || (a[3] = () => u(Se)(!0)),
-      onMouseleave: a[4] || (a[4] = () => u(Se)(!1))
+      ref: z,
+      class: L(`vue-ui-candlestick ${P.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: we(`position:relative;font-family:${e.value.style.fontFamily}; text-align:center;background:${e.value.style.backgroundColor}; ${e.value.responsive ? "height: 100%" : ""}`),
+      id: `vue-ui-candlestick_${A.value}`,
+      onMouseenter: a[5] || (a[5] = () => u(Fe)(!0)),
+      onMouseleave: a[6] || (a[6] = () => u(Fe)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (s(), N(u(ot), {
+      e.value.userOptions.buttons.annotator ? (s(), B(u(rt), {
         key: 0,
-        svgRef: u(Te),
+        svgRef: u(Oe),
         backgroundColor: e.value.style.backgroundColor,
         color: e.value.style.color,
-        active: J.value,
-        onClose: he
+        active: Z.value,
+        onClose: be
       }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : p("", !0),
-      rt.value ? (s(), i("div", {
+      ft.value ? (s(), i("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: Ce,
+        ref: Le,
         class: "vue-data-ui-no-title-space",
         style: "height:36px; width: 100%;background:transparent"
       }, null, 512)) : p("", !0),
       e.value.style.title.text ? (s(), i("div", {
         key: 2,
         ref_key: "chartTitle",
-        ref: ke,
+        ref: _e,
         style: "width:100%;background:transparent"
       }, [
-        (s(), N(tl, {
-          key: `title_${ze.value}`,
+        (s(), B(vl, {
+          key: `title_${Ie.value}`,
           config: {
             title: {
               cy: "candlestick-div-title",
@@ -544,108 +577,108 @@ const il = ["id"], nl = ["xmlns", "aria-label", "viewBox"], rl = ["x", "y", "wid
           }
         }, null, 8, ["config"]))
       ], 512)) : p("", !0),
-      e.value.userOptions.show && te.value && (u(Le) || u(ne)) ? (s(), N(u(ut), {
+      e.value.userOptions.show && oe.value && (u(Re) || u(de)) ? (s(), B(u(vt), {
         ref_key: "details",
-        ref: nt,
-        key: `user_options_${xe.value}`,
+        ref: ht,
+        key: `user_options_${Ce.value}`,
         backgroundColor: e.value.style.backgroundColor,
         color: e.value.style.color,
-        isImaging: u(Re),
-        isPrinting: u(Fe),
-        uid: w.value,
+        isImaging: u(Be),
+        isPrinting: u(Ne),
+        uid: A.value,
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
         hasXls: e.value.userOptions.buttons.csv,
         hasTable: e.value.userOptions.buttons.table,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
-        isFullscreen: W.value,
-        isTooltip: _.value.showTooltip,
+        isFullscreen: P.value,
+        isTooltip: k.value.showTooltip,
         titles: { ...e.value.userOptions.buttonTitles },
-        chartElement: T.value,
+        chartElement: z.value,
         position: e.value.userOptions.position,
         hasAnnotator: e.value.userOptions.buttons.annotator,
-        isAnnotation: J.value,
+        isAnnotation: Z.value,
         callbacks: e.value.userOptions.callbacks,
         printScale: e.value.userOptions.print.scale,
-        onToggleFullscreen: We,
-        onGeneratePdf: u(Oe),
-        onGenerateCsv: Ue,
-        onGenerateImage: u(Ne),
-        onToggleTable: De,
-        onToggleTooltip: He,
-        onToggleAnnotator: he,
-        style: me({
-          visibility: u(Le) ? u(ne) ? "visible" : "hidden" : "visible"
+        onToggleFullscreen: Ge,
+        onGeneratePdf: u(Ee),
+        onGenerateCsv: pe,
+        onGenerateImage: u(Ve),
+        onToggleTable: Xe,
+        onToggleTooltip: je,
+        onToggleAnnotator: be,
+        style: we({
+          visibility: u(Re) ? u(de) ? "visible" : "hidden" : "visible"
         })
-      }, Pt({ _: 2 }, [
+      }, Ke({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: x(({ isOpen: l, color: o }) => [
-            b(t.$slots, "menuIcon", P(E({ isOpen: l, color: o })), void 0, !0)
+          fn: b(({ isOpen: l, color: o }) => [
+            m(t.$slots, "menuIcon", E(V({ isOpen: l, color: o })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: x(() => [
-            b(t.$slots, "optionTooltip", {}, void 0, !0)
+          fn: b(() => [
+            m(t.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: x(() => [
-            b(t.$slots, "optionPdf", {}, void 0, !0)
+          fn: b(() => [
+            m(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: x(() => [
-            b(t.$slots, "optionCsv", {}, void 0, !0)
+          fn: b(() => [
+            m(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: x(() => [
-            b(t.$slots, "optionImg", {}, void 0, !0)
+          fn: b(() => [
+            m(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
-          fn: x(() => [
-            b(t.$slots, "optionTable", {}, void 0, !0)
+          fn: b(() => [
+            m(t.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: x(({ toggleFullscreen: l, isFullscreen: o }) => [
-            b(t.$slots, "optionFullscreen", P(E({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
+          fn: b(({ toggleFullscreen: l, isFullscreen: o }) => [
+            m(t.$slots, "optionFullscreen", E(V({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
           ]),
           key: "6"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: x(({ toggleAnnotator: l, isAnnotator: o }) => [
-            b(t.$slots, "optionAnnotator", P(E({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
+          fn: b(({ toggleAnnotator: l, isAnnotator: o }) => [
+            m(t.$slots, "optionAnnotator", E(V({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
           ]),
           key: "7"
         } : void 0
       ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : p("", !0),
       (s(), i("svg", {
         ref_key: "svgRef",
-        ref: Te,
-        xmlns: u(Dt),
+        ref: Oe,
+        xmlns: u(qt),
         "aria-label": e.value.style.title.text || "candlestick chart",
-        class: S({ "vue-data-ui-fullscreen--on": W.value, "vue-data-ui-fulscreen--off": !W.value }),
-        viewBox: `0 0 ${y.value.width <= 0 ? 10 : y.value.width} ${y.value.height <= 0 ? 10 : y.value.height}`,
-        style: me(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
+        class: L({ "vue-data-ui-fullscreen--on": P.value, "vue-data-ui-fulscreen--off": !P.value }),
+        viewBox: `0 0 ${c.value.width <= 0 ? 10 : c.value.width} ${c.value.height <= 0 ? 10 : c.value.height}`,
+        style: we(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
       }, [
-        Ye(u(at)),
+        Ae(u(dt)),
         t.$slots["chart-background"] ? (s(), i("foreignObject", {
           key: 0,
           x: n.value.left,
@@ -656,49 +689,49 @@ const il = ["id"], nl = ["xmlns", "aria-label", "viewBox"], rl = ["x", "y", "wid
             pointerEvents: "none"
           }
         }, [
-          b(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, rl)) : p("", !0),
-        k.value.length > 0 ? (s(), i("g", vl, [
-          c("defs", null, [
-            c("linearGradient", {
-              id: `bearish_gradient_${w.value}`,
+          m(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, fl)) : p("", !0),
+        w.value.length > 0 ? (s(), i("g", gl, [
+          y("defs", null, [
+            y("linearGradient", {
+              id: `bearish_gradient_${A.value}`,
               x2: "0%",
               y2: "100%"
             }, [
-              c("stop", {
+              y("stop", {
                 offset: "0%",
                 "stop-color": e.value.style.layout.candle.colors.bearish
-              }, null, 8, yl),
-              c("stop", {
+              }, null, 8, bl),
+              y("stop", {
                 offset: "50%",
-                "stop-color": `${u(ee)(e.value.style.layout.candle.colors.bearish, 0.02)}DE`
-              }, null, 8, cl),
-              c("stop", {
+                "stop-color": `${u(ae)(e.value.style.layout.candle.colors.bearish, 0.02)}DE`
+              }, null, 8, ml),
+              y("stop", {
                 offset: "100%",
-                "stop-color": `${u(ee)(e.value.style.layout.candle.colors.bearish, 0.05)}66`
-              }, null, 8, hl)
-            ], 8, dl),
-            c("linearGradient", {
-              id: `bullish_gradient_${w.value}`,
+                "stop-color": `${u(ae)(e.value.style.layout.candle.colors.bearish, 0.05)}66`
+              }, null, 8, xl)
+            ], 8, pl),
+            y("linearGradient", {
+              id: `bullish_gradient_${A.value}`,
               x2: "0%",
               y2: "100%"
             }, [
-              c("stop", {
+              y("stop", {
                 offset: "0%",
                 "stop-color": e.value.style.layout.candle.colors.bullish
-              }, null, 8, gl),
-              c("stop", {
+              }, null, 8, wl),
+              y("stop", {
                 offset: "50%",
-                "stop-color": `${u(ee)(e.value.style.layout.candle.colors.bullish, 0.02)}DE`
-              }, null, 8, pl),
-              c("stop", {
+                "stop-color": `${u(ae)(e.value.style.layout.candle.colors.bullish, 0.02)}DE`
+              }, null, 8, Al),
+              y("stop", {
                 offset: "100%",
-                "stop-color": `${u(ee)(e.value.style.layout.candle.colors.bullish, 0.05)}66`
-              }, null, 8, bl)
-            ], 8, fl)
+                "stop-color": `${u(ae)(e.value.style.layout.candle.colors.bullish, 0.05)}66`
+              }, null, 8, Cl)
+            ], 8, kl)
           ]),
-          e.value.style.layout.grid.show ? (s(), i("g", ml, [
-            c("line", {
+          e.value.style.layout.grid.show ? (s(), i("g", _l, [
+            y("line", {
               x1: n.value.left,
               x2: n.value.left,
               y1: n.value.top,
@@ -706,8 +739,8 @@ const il = ["id"], nl = ["xmlns", "aria-label", "viewBox"], rl = ["x", "y", "wid
               stroke: e.value.style.layout.grid.stroke,
               "stroke-width": e.value.style.layout.grid.strokeWidth,
               "stroke-linecap": "round"
-            }, null, 8, xl),
-            c("line", {
+            }, null, 8, $l),
+            y("line", {
               x1: n.value.left,
               x2: n.value.right,
               y1: n.value.bottom,
@@ -715,15 +748,15 @@ const il = ["id"], nl = ["xmlns", "aria-label", "viewBox"], rl = ["x", "y", "wid
               stroke: e.value.style.layout.grid.stroke,
               "stroke-width": e.value.style.layout.grid.strokeWidth,
               "stroke-linecap": "round"
-            }, null, 8, kl)
+            }, null, 8, zl)
           ])) : p("", !0),
           e.value.style.layout.grid.yAxis.dataLabels.show ? (s(), i("g", {
             key: 1,
             ref_key: "scaleLabels",
-            ref: ue
+            ref: re
           }, [
-            (s(!0), i(V, null, B(ct.value, (l, o) => (s(), i("g", null, [
-              l.value >= C.value.min && l.value <= C.value.max ? (s(), i("line", {
+            (s(!0), i(D, null, M(mt.value, (l, o) => (s(), i("g", null, [
+              l.value >= _.value.min && l.value <= _.value.max ? (s(), i("line", {
                 key: 0,
                 x1: n.value.left,
                 x2: n.value.left - 5,
@@ -732,21 +765,21 @@ const il = ["id"], nl = ["xmlns", "aria-label", "viewBox"], rl = ["x", "y", "wid
                 stroke: e.value.style.layout.grid.stroke,
                 "stroke-width": e.value.style.layout.grid.strokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, wl)) : p("", !0),
-              l.value >= C.value.min && l.value <= C.value.max ? (s(), i("text", {
+              }, null, 8, Sl)) : p("", !0),
+              l.value >= _.value.min && l.value <= _.value.max ? (s(), i("text", {
                 key: 1,
                 x: n.value.left - 8 + e.value.style.layout.grid.yAxis.dataLabels.offsetX,
-                y: l.y + y.value.yAxisFontSize / 3,
-                "font-size": y.value.yAxisFontSize,
+                y: l.y + c.value.yAxisFontSize / 3,
+                "font-size": c.value.yAxisFontSize,
                 "text-anchor": "end",
                 fill: e.value.style.layout.grid.yAxis.dataLabels.color,
                 "font-weight": e.value.style.layout.grid.yAxis.dataLabels.bold ? "bold" : "normal"
-              }, Q(u(L)({
+              }, Y(u(T)({
                 p: e.value.style.layout.grid.yAxis.dataLabels.prefix,
                 v: l.value,
                 s: e.value.style.layout.grid.yAxis.dataLabels.suffix,
                 r: e.value.style.layout.grid.yAxis.dataLabels.roundingValue
-              })), 9, Al)) : p("", !0)
+              })), 9, Ll)) : p("", !0)
             ]))), 256))
           ], 512)) : p("", !0),
           e.value.style.layout.grid.xAxis.dataLabels.show && !e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? (s(), i("g", {
@@ -754,15 +787,15 @@ const il = ["id"], nl = ["xmlns", "aria-label", "viewBox"], rl = ["x", "y", "wid
             ref_key: "timeLabelsEls",
             ref: H
           }, [
-            (s(!0), i(V, null, B(ht.value, (l, o) => (s(), i("g", null, [
-              c("text", {
+            (s(!0), i(D, null, M(xt.value, (l, o) => (s(), i("g", null, [
+              y("text", {
                 class: "vue-data-ui-time-label",
-                transform: `translate(${n.value.left + d.value * o + d.value / 2}, ${n.value.bottom + y.value.xAxisFontSize * 1.5}), rotate(${e.value.style.layout.grid.xAxis.dataLabels.rotation})`,
+                transform: `translate(${n.value.left + d.value * o + d.value / 2}, ${n.value.bottom + c.value.xAxisFontSize * 1.5}), rotate(${e.value.style.layout.grid.xAxis.dataLabels.rotation})`,
                 "text-anchor": e.value.style.layout.grid.xAxis.dataLabels.rotation > 0 ? "start" : e.value.style.layout.grid.xAxis.dataLabels.rotation < 0 ? "end" : "middle",
-                "font-size": y.value.xAxisFontSize,
+                "font-size": c.value.xAxisFontSize,
                 fill: e.value.style.layout.grid.xAxis.dataLabels.color,
                 "font-weight": e.value.style.layout.grid.xAxis.dataLabels.bold ? "bold" : "normal"
-              }, Q(l), 9, _l)
+              }, Y(l), 9, Tl)
             ]))), 256))
           ], 512)) : p("", !0),
           e.value.style.layout.grid.xAxis.dataLabels.show && e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? (s(), i("g", {
@@ -770,20 +803,20 @@ const il = ["id"], nl = ["xmlns", "aria-label", "viewBox"], rl = ["x", "y", "wid
             ref_key: "timeLabelsEls",
             ref: H
           }, [
-            (s(!0), i(V, null, B(R.value, (l, o) => (s(), i("g", null, [
-              c("text", {
+            (s(!0), i(D, null, M(O.value, (l, o) => (s(), i("g", null, [
+              y("text", {
                 class: "vue-data-ui-time-label",
-                transform: `translate(${n.value.left + d.value * o + d.value / 2}, ${n.value.bottom + y.value.xAxisFontSize * 1.5}), rotate(${e.value.style.layout.grid.xAxis.dataLabels.rotation})`,
+                transform: `translate(${n.value.left + d.value * o + d.value / 2}, ${n.value.bottom + c.value.xAxisFontSize * 1.5}), rotate(${e.value.style.layout.grid.xAxis.dataLabels.rotation})`,
                 "text-anchor": e.value.style.layout.grid.xAxis.dataLabels.rotation > 0 ? "start" : e.value.style.layout.grid.xAxis.dataLabels.rotation < 0 ? "end" : "middle",
-                "font-size": y.value.xAxisFontSize,
+                "font-size": c.value.xAxisFontSize,
                 fill: e.value.style.layout.grid.xAxis.dataLabels.color,
                 "font-weight": e.value.style.layout.grid.xAxis.dataLabels.bold ? "bold" : "normal"
-              }, Q(l.text), 9, Cl)
+              }, Y(l.text), 9, Il)
             ]))), 256))
           ], 512)) : p("", !0),
-          c("g", null, [
-            (s(!0), i(V, null, B(k.value, (l, o) => (s(), i("g", null, [
-              c("rect", {
+          y("g", null, [
+            (s(!0), i(D, null, M(w.value, (l, o) => (s(), i("g", null, [
+              y("rect", {
                 x: l.open.x - e.value.style.layout.wick.strokeWidth / 2,
                 y: l.high.y,
                 width: e.value.style.layout.wick.strokeWidth,
@@ -791,26 +824,26 @@ const il = ["id"], nl = ["xmlns", "aria-label", "viewBox"], rl = ["x", "y", "wid
                 fill: e.value.style.layout.wick.stroke,
                 stroke: "none",
                 rx: e.value.style.layout.wick.strokeWidth / 2,
-                class: S({ "vue-data-ui-transition": $.value && !u(z) })
-              }, null, 10, $l),
-              e.value.style.layout.wick.extremity.shape === "circle" ? (s(), i("g", zl, [
-                c("circle", {
+                class: L({ "vue-data-ui-transition": $.value && !u(S) })
+              }, null, 10, Fl),
+              e.value.style.layout.wick.extremity.shape === "circle" ? (s(), i("g", Rl, [
+                y("circle", {
                   cx: l.high.x,
                   cy: l.high.y,
                   r: e.value.style.layout.wick.extremity.size === "auto" ? d.value / 20 : e.value.style.layout.wick.extremity.size,
                   fill: e.value.style.layout.wick.extremity.color,
-                  class: S({ "vue-data-ui-transition": $.value && !u(z) })
-                }, null, 10, Sl),
-                c("circle", {
+                  class: L({ "vue-data-ui-transition": $.value && !u(S) })
+                }, null, 10, Ol),
+                y("circle", {
                   cx: l.low.x,
                   cy: l.low.y,
                   r: e.value.style.layout.wick.extremity.size === "auto" ? d.value / 20 : e.value.style.layout.wick.extremity.size,
                   fill: e.value.style.layout.wick.extremity.color,
-                  class: S({ "vue-data-ui-transition": $.value && !u(z) })
-                }, null, 10, Ll)
+                  class: L({ "vue-data-ui-transition": $.value && !u(S) })
+                }, null, 10, Pl)
               ])) : p("", !0),
-              e.value.style.layout.wick.extremity.shape === "line" ? (s(), i("g", Tl, [
-                c("rect", {
+              e.value.style.layout.wick.extremity.shape === "line" ? (s(), i("g", Nl, [
+                y("rect", {
                   x: l.high.x - (e.value.style.layout.wick.extremity.size === "auto" ? d.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2,
                   y: l.high.y - e.value.style.layout.wick.strokeWidth / 2,
                   width: Math.abs(l.high.x - (e.value.style.layout.wick.extremity.size === "auto" ? d.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2 - (l.high.x + (e.value.style.layout.wick.extremity.size === "auto" ? d.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2)),
@@ -818,9 +851,9 @@ const il = ["id"], nl = ["xmlns", "aria-label", "viewBox"], rl = ["x", "y", "wid
                   rx: e.value.style.layout.wick.strokeWidth / 2,
                   fill: e.value.style.layout.wick.extremity.color,
                   stroke: "none",
-                  class: S({ "vue-data-ui-transition": $.value && !u(z) })
-                }, null, 10, Il),
-                c("rect", {
+                  class: L({ "vue-data-ui-transition": $.value && !u(S) })
+                }, null, 10, Bl),
+                y("rect", {
                   x: l.low.x - (e.value.style.layout.wick.extremity.size === "auto" ? d.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2,
                   y: l.low.y - e.value.style.layout.wick.strokeWidth / 2,
                   width: Math.abs(l.low.x - (e.value.style.layout.wick.extremity.size === "auto" ? d.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2 - (l.low.x + (e.value.style.layout.wick.extremity.size === "auto" ? d.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2)),
@@ -828,13 +861,13 @@ const il = ["id"], nl = ["xmlns", "aria-label", "viewBox"], rl = ["x", "y", "wid
                   fill: e.value.style.layout.wick.extremity.color,
                   stroke: "none",
                   rx: e.value.style.layout.wick.strokeWidth / 2,
-                  class: S({ "vue-data-ui-transition": $.value && !u(z) })
-                }, null, 10, Fl)
+                  class: L({ "vue-data-ui-transition": $.value && !u(S) })
+                }, null, 10, El)
               ])) : p("", !0)
             ]))), 256))
           ]),
-          c("g", null, [
-            (s(!0), i(V, null, B(k.value, (l, o) => (s(), i("rect", {
+          y("g", null, [
+            (s(!0), i(D, null, M(w.value, (l, o) => (s(), i("rect", {
               x: l.open.x - d.value / 2 + d.value * (1 - e.value.style.layout.candle.widthRatio) / 2,
               y: l.isBullish ? l.last.y : l.open.y,
               height: Math.abs(l.last.y - l.open.y) <= 0 ? 1e-4 : Math.abs(l.last.y - l.open.y),
@@ -842,59 +875,59 @@ const il = ["id"], nl = ["xmlns", "aria-label", "viewBox"], rl = ["x", "y", "wid
               fill: e.value.style.layout.candle.gradient.underlayer,
               rx: e.value.style.layout.candle.borderRadius,
               stroke: "none",
-              class: S({ "vue-data-ui-transition": $.value && !u(z) })
-            }, null, 10, Rl))), 256)),
-            (s(!0), i(V, null, B(k.value, (l, o) => (s(), i("rect", {
+              class: L({ "vue-data-ui-transition": $.value && !u(S) })
+            }, null, 10, Vl))), 256)),
+            (s(!0), i(D, null, M(w.value, (l, o) => (s(), i("rect", {
               x: l.open.x - d.value / 2 + d.value * (1 - e.value.style.layout.candle.widthRatio) / 2,
               y: l.isBullish ? l.last.y : l.open.y,
               height: Math.abs(l.last.y - l.open.y) <= 0 ? 1e-4 : Math.abs(l.last.y - l.open.y),
               width: d.value * e.value.style.layout.candle.widthRatio <= 0 ? 1e-4 : d.value * e.value.style.layout.candle.widthRatio,
-              fill: l.isBullish ? e.value.style.layout.candle.gradient.show ? `url(#bullish_gradient_${w.value})` : e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.gradient.show ? `url(#bearish_gradient_${w.value})` : e.value.style.layout.candle.colors.bearish,
+              fill: l.isBullish ? e.value.style.layout.candle.gradient.show ? `url(#bullish_gradient_${A.value})` : e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.gradient.show ? `url(#bearish_gradient_${A.value})` : e.value.style.layout.candle.colors.bearish,
               rx: e.value.style.layout.candle.borderRadius,
               stroke: e.value.style.layout.candle.stroke,
               "stroke-width": e.value.style.layout.candle.strokeWidth,
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
-              class: S({ "vue-data-ui-transition": $.value && !u(z) })
-            }, null, 10, Ol))), 256))
+              class: L({ "vue-data-ui-transition": $.value && !u(S) })
+            }, null, 10, Dl))), 256))
           ]),
-          c("g", null, [
-            (s(!0), i(V, null, B(k.value, (l, o) => (s(), i("rect", {
+          y("g", null, [
+            (s(!0), i(D, null, M(w.value, (l, o) => (s(), i("rect", {
               x: n.value.left + o * d.value,
               y: n.value.top,
               height: n.value.height <= 0 ? 1e-4 : n.value.height,
               width: d.value <= 0 ? 1e-4 : d.value,
-              fill: se.value === o ? u(Ht)(e.value.style.layout.selector.color, e.value.style.layout.selector.opacity) : "transparent",
-              onMouseover: () => pt(o, l),
-              onMouseleave: () => gt(o, l),
-              onClick: () => ft(o, l)
-            }, null, 40, Nl))), 256))
+              fill: ne.value === o ? u(Jt)(e.value.style.layout.selector.color, e.value.style.layout.selector.opacity) : "transparent",
+              onMouseover: () => At(o, l),
+              onMouseleave: () => wt(o, l),
+              onClick: () => kt(o, l)
+            }, null, 40, Ml))), 256))
           ])
         ])) : p("", !0),
-        b(t.$slots, "svg", { svg: y.value }, void 0, !0)
-      ], 14, nl)),
-      t.$slots.watermark ? (s(), i("div", Pl, [
-        b(t.$slots, "watermark", P(E({ isPrinting: u(Fe) || u(Re) })), void 0, !0)
+        m(t.$slots, "svg", { svg: c.value }, void 0, !0)
+      ], 14, hl)),
+      t.$slots.watermark ? (s(), i("div", Ul, [
+        m(t.$slots, "watermark", E(V({ isPrinting: u(Ne) || u(Be) })), void 0, !0)
       ])) : p("", !0),
-      e.value.style.zoom.show && te.value ? (s(), i("div", {
+      e.value.style.zoom.show && oe.value ? (s(), i("div", {
         key: 5,
         ref_key: "chartSlicer",
-        ref: Ae
+        ref: ze
       }, [
-        (s(), N(ll, {
+        (s(), B(dl, {
           ref_key: "slicerComponent",
-          ref: Me,
-          key: `slicer_${j.value}`,
+          ref: He,
+          key: `slicer_${J.value}`,
           background: e.value.style.zoom.color,
           borderColor: e.value.style.backgroundColor,
           fontSize: e.value.style.zoom.fontSize,
           useResetSlot: e.value.style.zoom.useResetSlot,
-          labelLeft: Be.value.start,
-          labelRight: Be.value.end,
+          labelLeft: We.value.start,
+          labelRight: We.value.end,
           textColor: e.value.style.color,
           inputColor: e.value.style.zoom.color,
           selectColor: e.value.style.zoom.highlightColor,
-          max: G.value,
+          max: X.value,
           min: 0,
           valueStart: v.value.start,
           valueEnd: v.value.end,
@@ -903,33 +936,33 @@ const il = ["id"], nl = ["xmlns", "aria-label", "viewBox"], rl = ["x", "y", "wid
           end: v.value.end,
           "onUpdate:end": a[1] || (a[1] = (l) => v.value.end = l),
           refreshStartPoint: e.value.style.zoom.startIndex !== null ? e.value.style.zoom.startIndex : 0,
-          refreshEndPoint: e.value.style.zoom.endIndex !== null ? e.value.style.zoom.endIndex + 1 : G.value,
+          refreshEndPoint: e.value.style.zoom.endIndex !== null ? e.value.style.zoom.endIndex + 1 : X.value,
           enableRangeHandles: e.value.style.zoom.enableRangeHandles,
           enableSelectionDrag: e.value.style.zoom.enableSelectionDrag,
-          onReset: bt
+          onReset: Ct
         }, {
-          "reset-action": x(({ reset: l }) => [
-            b(t.$slots, "reset-action", P(E({ reset: l })), void 0, !0)
+          "reset-action": b(({ reset: l }) => [
+            m(t.$slots, "reset-action", E(V({ reset: l })), void 0, !0)
           ]),
           _: 3
         }, 8, ["background", "borderColor", "fontSize", "useResetSlot", "labelLeft", "labelRight", "textColor", "inputColor", "selectColor", "max", "valueStart", "valueEnd", "start", "end", "refreshStartPoint", "refreshEndPoint", "enableRangeHandles", "enableSelectionDrag"]))
       ], 512)) : p("", !0),
-      c("div", {
+      y("div", {
         ref_key: "chartLegend",
-        ref: we
+        ref: $e
       }, [
-        b(t.$slots, "legend", { legend: k.value }, void 0, !0)
+        m(t.$slots, "legend", { legend: w.value }, void 0, !0)
       ], 512),
       t.$slots.source ? (s(), i("div", {
         key: 6,
         ref_key: "source",
-        ref: _e,
+        ref: Se,
         dir: "auto"
       }, [
-        b(t.$slots, "source", {}, void 0, !0)
+        m(t.$slots, "source", {}, void 0, !0)
       ], 512)) : p("", !0),
-      Ye(u(st), {
-        show: _.value.showTooltip && ae.value,
+      Ae(u(ut), {
+        show: k.value.showTooltip && ue.value,
         backgroundColor: e.value.style.tooltip.backgroundColor,
         color: e.value.style.tooltip.color,
         borderRadius: e.value.style.tooltip.borderRadius,
@@ -939,62 +972,76 @@ const il = ["id"], nl = ["xmlns", "aria-label", "viewBox"], rl = ["x", "y", "wid
         backgroundOpacity: e.value.style.tooltip.backgroundOpacity,
         position: e.value.style.tooltip.position,
         offsetY: e.value.style.tooltip.offsetY,
-        parent: T.value,
-        content: oe.value,
-        isFullscreen: W.value,
+        parent: z.value,
+        content: ie.value,
+        isFullscreen: P.value,
         isCustom: e.value.style.tooltip.customFormat && typeof e.value.style.tooltip.customFormat == "function",
         smooth: e.value.style.tooltip.smooth,
         backdropFilter: e.value.style.tooltip.backdropFilter
       }, {
-        "tooltip-before": x(() => [
-          b(t.$slots, "tooltip-before", P(E({ ...ye.value })), void 0, !0)
+        "tooltip-before": b(() => [
+          m(t.$slots, "tooltip-before", E(V({ ...fe.value })), void 0, !0)
         ]),
-        "tooltip-after": x(() => [
-          b(t.$slots, "tooltip-after", P(E({ ...ye.value })), void 0, !0)
+        "tooltip-after": b(() => [
+          m(t.$slots, "tooltip-after", E(V({ ...fe.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter"]),
-      te.value ? (s(), N(u(tt), {
-        key: 7,
-        hideDetails: "",
-        config: {
-          open: _.value.showTable,
-          maxHeight: 1e4,
-          body: {
-            backgroundColor: e.value.style.backgroundColor,
-            color: e.value.style.color
-          },
-          head: {
-            backgroundColor: e.value.style.backgroundColor,
-            color: e.value.style.color
-          }
-        }
-      }, {
-        content: x(() => [
-          (s(), N(u(lt), {
-            key: `table_${$e.value}`,
-            colNames: q.value.colNames,
-            head: q.value.head,
-            body: q.value.body,
-            config: q.value.config,
-            title: `${e.value.style.title.text}${e.value.style.title.subtitle.text ? ` : ${e.value.style.title.subtitle.text}` : ""}`,
-            onClose: a[2] || (a[2] = (l) => _.value.showTable = !1)
+      oe.value ? (s(), B(Ut(j.value.component), Wt({ key: 7 }, j.value.props, {
+        ref_key: "tableUnit",
+        ref: G,
+        onClose: a[4] || (a[4] = (l) => k.value.showTable = !1)
+      }), Ke({
+        content: b(() => [
+          (s(), B(u(nt), {
+            key: `table_${Te.value}`,
+            colNames: Q.value.colNames,
+            head: Q.value.head,
+            body: Q.value.body,
+            config: Q.value.config,
+            title: e.value.table.useDialog ? "" : j.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: a[3] || (a[3] = (l) => k.value.showTable = !1)
           }, {
-            th: x(({ th: l }) => [
-              Et(Q(l), 1)
+            th: b(({ th: l }) => [
+              Qe(Y(l), 1)
             ]),
-            td: x(({ td: l }) => [
-              c("div", { innerHTML: l }, null, 8, El)
+            td: b(({ td: l }) => [
+              y("div", { innerHTML: l }, null, 8, Wl)
             ]),
             _: 1
-          }, 8, ["colNames", "head", "body", "config", "title"]))
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
         ]),
-        _: 1
-      }, 8, ["config"])) : p("", !0),
-      u(z) ? (s(), N(el, { key: 8 })) : p("", !0)
-    ], 46, il));
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: b(() => [
+            Qe(Y(j.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: b(() => [
+            y("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: a[2] || (a[2] = (l) => pe(e.value.userOptions.callbacks.csv))
+            }, [
+              Ae(u(st), {
+                name: "excel",
+                stroke: j.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : p("", !0),
+      u(S) ? (s(), B(ol, { key: 8 })) : p("", !0)
+    ], 46, yl));
   }
-}, ea = /* @__PURE__ */ ul(Vl, [["__scopeId", "data-v-cf6a1ffe"]]);
+}, ua = /* @__PURE__ */ cl(Hl, [["__scopeId", "data-v-edf6444a"]]);
 export {
-  ea as default
+  ua as default
 };