vue-data-ui 3.2.8 → 3.3.1

package/dist/{vue-ui-candlestick-g6PO_L_7.js → vue-ui-candlestick-B7EjAlSi.js}

@@ -1,22 +1,23 @@
-import { defineAsyncComponent as R, computed as g, ref as r, toRefs as Et, watch as te, shallowRef as Ke, onMounted as Mt, onBeforeUnmount as Qe, watchEffect as Ut, nextTick as we, createElementBlock as i, openBlock as s, unref as u, normalizeStyle as Ae, normalizeClass as T, createBlock as N, createCommentVNode as p, createElementVNode as y, createVNode as Ce, createSlots as Ze, withCtx as b, renderSlot as m, normalizeProps as B, guardReactiveProps as V, Fragment as E, renderList as M, toDisplayString as Y, resolveDynamicComponent as Wt, mergeProps as Ht, createTextVNode as et } from "vue";
-import { c as Gt, t as Xt, B as le, o as tt, f as U, C as jt, q, d as L, X as Yt, i as ae, s as qt, D as lt, x as Jt, y as Kt, z as Qt, A as Zt } from "./lib-BEpWEyMm.js";
-import { t as at, u as el } from "./useResponsive-DfdjqQps.js";
-import { u as tl, a as ot } from "./useNestedProp-BOk-tPdu.js";
-import { u as ll } from "./usePrinter-w23K-ezx.js";
-import { u as al, B as ol } from "./BaseScanner-BgWxam9d.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-DjWwQXVS.js";
-import vl from "./Title-DG2nloSB.js";
-import { t as dl } from "./themes-Dw-dDudK.js";
-import { S as cl } from "./Slicer-BA2GhOmY.js";
-import { _ as yl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "width", "height"], pl = { key: 1 }, bl = ["id"], ml = ["stop-color"], xl = ["stop-color"], kl = ["stop-color"], wl = ["id"], Al = ["stop-color"], Cl = ["stop-color"], _l = ["stop-color"], zl = { key: 0 }, $l = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Sl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Tl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ll = ["x", "y", "font-size", "fill", "font-weight"], Il = ["transform", "text-anchor", "font-size", "fill", "font-weight"], Rl = ["transform", "text-anchor", "font-size", "fill", "font-weight"], Fl = ["x", "y", "width", "height", "fill", "rx"], Ol = { key: 0 }, Dl = ["cx", "cy", "r", "fill"], Pl = ["cx", "cy", "r", "fill"], Nl = { key: 1 }, Bl = ["x", "y", "width", "height", "rx", "fill"], Vl = ["x", "y", "width", "height", "fill", "rx"], El = ["x", "y", "height", "width", "fill", "rx"], Ml = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width"], Ul = ["x", "y", "height", "width", "fill", "onMouseover", "onMouseleave", "onClick"], Wl = {
+import { defineAsyncComponent as R, computed as h, ref as r, toRefs as Gt, watch as te, shallowRef as Qe, onMounted as Xt, onBeforeUnmount as Ze, watchEffect as jt, nextTick as Ae, createElementBlock as i, openBlock as s, unref as u, normalizeStyle as Ce, normalizeClass as T, createBlock as N, createCommentVNode as p, createElementVNode as y, createVNode as _e, createSlots as et, withCtx as m, renderSlot as x, normalizeProps as B, guardReactiveProps as E, Fragment as V, renderList as M, toDisplayString as Y, resolveDynamicComponent as Yt, mergeProps as qt, createTextVNode as tt } from "vue";
+import { c as Jt, t as Kt, B as le, o as lt, f as U, C as Qt, q, d as L, X as Zt, i as ae, s as el, D as at, x as tl, y as ll, z as al, A as ol } from "./lib-CEjkWSLj.js";
+import { t as ot, u as sl } from "./useResponsive-DfdjqQps.js";
+import { u as ul, a as st } from "./useNestedProp-Ce3PwN8T.js";
+import { u as il } from "./usePrinter-DJ1iH-F_.js";
+import { u as nl, B as rl } from "./BaseScanner-BgWxam9d.js";
+import { u as vl } from "./useSvgExport-DrjCWun4.js";
+import { u as dl } from "./useTimeLabels-BGFjWgrv.js";
+import { u as cl } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as yl } from "./useChartAccessibility-9icAAmYg.js";
+import { u as hl } from "./useTimeLabelCollider-CIsgDrl9.js";
+import fl from "./img-J2dLIr8Y.js";
+import gl from "./Title-Camz1Lce.js";
+import { t as pl } from "./themes-Dw-dDudK.js";
+import { S as bl } from "./Slicer-Znzt0gSE.js";
+import { _ as ml } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const xl = ["id"], kl = ["xmlns", "aria-label", "viewBox"], wl = ["x", "y", "width", "height"], Al = { key: 1 }, Cl = ["id"], _l = ["stop-color"], zl = ["stop-color"], $l = ["stop-color"], Sl = ["id"], Tl = ["stop-color"], Ll = ["stop-color"], Il = ["stop-color"], Rl = { key: 0 }, Fl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ol = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Dl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Pl = ["x", "y", "font-size", "fill", "font-weight"], Nl = ["transform", "text-anchor", "font-size", "fill", "font-weight"], Bl = ["transform", "text-anchor", "font-size", "fill", "font-weight"], El = ["x", "y", "width", "height", "fill", "rx"], Vl = { key: 0 }, Ml = ["cx", "cy", "r", "fill"], Ul = ["cx", "cy", "r", "fill"], Wl = { key: 1 }, Hl = ["x", "y", "width", "height", "rx", "fill"], Gl = ["x", "y", "width", "height", "fill", "rx"], Xl = ["x", "y", "height", "width", "fill", "rx"], jl = ["x", "y", "height", "width", "fill", "rx", "stroke", "stroke-width"], Yl = ["x", "y", "height", "width", "fill", "onMouseover", "onMouseleave", "onClick"], ql = {
   key: 4,
   class: "vue-data-ui-watermark"
-}, Hl = ["innerHTML"], Gl = {
+}, Jl = ["innerHTML"], Kl = {
   __name: "vue-ui-candlestick",
   props: {
     config: {
@@ -32,14 +33,14 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
       }
     }
   },
-  setup(st, { expose: ut }) {
-    const it = R(() => import("./BaseIcon-Bz-1GQhu.js")), nt = R(() => import("./Tooltip-BOXz8skU.js")), rt = R(() => import("./vue-ui-accordion-CDIzGCG1.js")), vt = R(() => import("./DataTable-BvjacRbw.js")), dt = R(() => import("./PenAndPaper-CR8q353D.js")), ct = R(() => import("./UserOptions-DsTgvAok.js")), yt = R(() => import("./PackageVersion-C40g0Rfc.js")), ht = R(() => import("./BaseDraggableDialog-CHhZIht2.js")), { vue_ui_candlestick: ft } = tl(), h = st, oe = g(() => !!h.dataset && h.dataset.length), z = r(!1), se = r(null), A = r(Gt()), ue = r(!1), ie = r(""), ne = r(void 0), _e = r(0), $ = r(null), ze = r(null), $e = r(null), Se = r(null), Te = r(null), Le = r(null), J = r(0), Ie = r(0), Re = r(0), re = r(null), H = r(null), G = r(null), ve = r(null), e = r(ye()), { loading: S, FINAL_DATASET: C, manualLoading: de } = al({
-      ...Et(h),
+  setup(ut, { expose: it }) {
+    const nt = R(() => import("./BaseIcon-eZbszQrv.js")), rt = R(() => import("./Tooltip-VOcQEHa4.js")), vt = R(() => import("./vue-ui-accordion-VTP418mC.js")), dt = R(() => import("./DataTable-yAMEyP6y.js")), ct = R(() => import("./PenAndPaper-Bo-lMUik.js")), yt = R(() => import("./UserOptions-CSja1SGU.js")), ht = R(() => import("./PackageVersion-BfykJm_B.js")), ft = R(() => import("./BaseDraggableDialog-CVGErydD.js")), { vue_ui_candlestick: gt } = ul(), f = ut, oe = h(() => !!f.dataset && f.dataset.length), z = r(!1), se = r(null), A = r(Jt()), ue = r(!1), ie = r(""), ne = r(void 0), ze = r(0), $ = r(null), $e = r(null), Se = r(null), Te = r(null), Le = r(null), Ie = r(null), J = r(0), Re = r(0), Fe = r(0), re = r(null), H = r(null), G = r(null), ve = r(null), e = r(he()), { loading: S, FINAL_DATASET: C, manualLoading: de } = nl({
+      ...Gt(f),
       FINAL_CONFIG: e,
-      prepareConfig: ye,
+      prepareConfig: he,
       callback: () => {
         Promise.resolve().then(async () => {
-          await pe();
+          await be();
         });
       },
       skeletonDataset: [
@@ -56,7 +57,7 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
         [17304192e5, 890, 2330, 550, 1950, 3770],
         [17330112e5, 1440, 3770, 890, 3200, 5100]
       ],
-      skeletonConfig: Xt({
+      skeletonConfig: Kt({
         defaultConfig: e.value,
         userConfig: {
           useCssAnimation: !1,
@@ -97,23 +98,23 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
           }
         }
       })
-    }), { userOptionsVisible: ce, setUserOptionsVisibility: Fe, keepUserOptionState: Oe } = ul({ config: e.value }), { svgRef: De } = il({ config: e.value.style.title });
-    function ye() {
-      const t = ot({
-        userConfig: h.config,
-        defaultConfig: ft
+    }), { userOptionsVisible: ce, setUserOptionsVisibility: Oe, keepUserOptionState: De } = cl({ config: e.value }), { svgRef: ye } = yl({ config: e.value.style.title });
+    function he() {
+      const t = st({
+        userConfig: f.config,
+        defaultConfig: gt
       });
       let a = {};
       return t.theme ? a = {
-        ...ot({
-          userConfig: dl.vue_ui_candlestick[t.theme] || h.config,
+        ...st({
+          userConfig: pl.vue_ui_candlestick[t.theme] || f.config,
           defaultConfig: t
         })
-      } : 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;
+      } : a = t, f.config && le(f.config, "style.zoom.startIndex") ? a.style.zoom.startIndex = f.config.style.zoom.startIndex : a.style.zoom.startIndex = null, f.config && le(f.config, "style.zoom.endIndex") ? a.style.zoom.endIndex = f.config.style.zoom.endIndex : a.style.zoom.endIndex = null, f.config && le(f.config, "style.layout.grid.yAxis.scale.min") ? a.style.layout.grid.yAxis.scale.min = f.config.style.layout.grid.yAxis.scale.min : a.style.layout.grid.yAxis.scale.min = null, f.config && le(f.config, "style.layout.grid.yAxis.scale.max") ? a.style.layout.grid.yAxis.scale.max = f.config.style.layout.grid.yAxis.scale.max : a.style.layout.grid.yAxis.scale.max = null, a;
     }
-    te(() => h.config, (t) => {
-      S.value || (e.value = ye()), ce.value = !e.value.userOptions.showOnChartHover, Pe(), J.value += 1, Re.value += 1, Ie.value += 1, k.value.showTable = e.value.table.show, k.value.showTooltip = e.value.style.tooltip.show;
-    }, { deep: !0 }), te(() => h.dataset, (t) => {
+    te(() => f.config, (t) => {
+      S.value || (e.value = he()), ce.value = !e.value.userOptions.showOnChartHover, Pe(), J.value += 1, Fe.value += 1, Re.value += 1, k.value.showTable = e.value.table.show, k.value.showTooltip = e.value.style.tooltip.show;
+    }, { deep: !0 }), te(() => f.dataset, (t) => {
       Array.isArray(t) && t.length > 0 && (de.value = !1), v.value.start = 0, v.value.end = t.length, J.value += 1;
     }, { deep: !0 });
     const c = r({
@@ -121,37 +122,37 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
       width: e.value.style.width,
       xAxisFontSize: e.value.style.layout.grid.xAxis.dataLabels.fontSize,
       yAxisFontSize: e.value.style.layout.grid.yAxis.dataLabels.fontSize
-    }), I = Ke(null), W = Ke(null);
-    Mt(() => {
+    }), I = Qe(null), W = Qe(null);
+    Xt(() => {
       Pe();
     });
-    const F = g(() => !!e.value.debug);
+    const F = h(() => !!e.value.debug);
     function Pe() {
-      if (tt(h.dataset) && (U({
+      if (lt(f.dataset) && (U({
         componentName: "VueUiCandlestick",
         type: "dataset",
         debug: F.value
-      }), de.value = !0), tt(h.dataset) || (de.value = e.value.loading), setTimeout(() => {
+      }), de.value = !0), lt(f.dataset) || (de.value = e.value.loading), setTimeout(() => {
         z.value = !0;
       }, 10), e.value.responsive) {
-        const a = at(() => {
+        const a = ot(() => {
           z.value = !1;
-          const { width: l, height: o } = el({
+          const { width: l, height: o } = sl({
             chart: $.value,
-            title: e.value.style.title.text ? ze.value : null,
-            slicer: Se.value,
-            legend: $e.value,
-            source: Te.value,
-            noTitle: Le.value
+            title: e.value.style.title.text ? $e.value : null,
+            slicer: Te.value,
+            legend: Se.value,
+            source: Le.value,
+            noTitle: Ie.value
           });
           requestAnimationFrame(() => {
-            c.value.width = l, c.value.height = o - 12, e.value.responsiveProportionalSizing ? (c.value.xAxisFontSize = lt({
+            c.value.width = l, c.value.height = o - 12, e.value.responsiveProportionalSizing ? (c.value.xAxisFontSize = at({
               relator: Math.min(l, o),
               adjuster: e.value.style.width,
               source: e.value.style.layout.grid.xAxis.dataLabels.fontSize,
               threshold: 6,
               fallback: 6
-            }), c.value.yAxisFontSize = lt({
+            }), c.value.yAxisFontSize = at({
               relator: Math.min(l, o),
               adjuster: e.value.style.width,
               source: e.value.style.layout.grid.yAxis.dataLabels.fontSize,
@@ -164,59 +165,59 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
         });
         I.value && (W.value && I.value.unobserve(W.value), I.value.disconnect()), I.value = new ResizeObserver(a), W.value = $.value.parentNode, I.value.observe(W.value);
       }
-      pe();
+      be();
     }
-    Qe(() => {
+    Ze(() => {
       I.value && (W.value && I.value.unobserve(W.value), I.value.disconnect());
     });
-    const { isPrinting: Ne, isImaging: Be, generatePdf: Ve, generateImage: Ee } = ll({
+    const { isPrinting: Ne, isImaging: Be, generatePdf: Ee, generateImage: Ve } = il({
       elementId: `vue-ui-candlestick_${A.value}`,
       fileName: e.value.style.title.text || "vue-ui-candlestick",
       options: e.value.userOptions.print
-    }), gt = g(() => e.value.userOptions.show && !e.value.style.title.text), k = r({
+    }), pt = h(() => e.value.userOptions.show && !e.value.style.title.text), k = r({
       showTable: e.value.table.show,
       showTooltip: e.value.style.tooltip.show
-    }), he = r(0), pt = at((t) => {
-      he.value = t;
+    }), fe = r(0), bt = ot((t) => {
+      fe.value = t;
     }, 100);
-    Ut((t) => {
+    jt((t) => {
       const a = H.value;
       if (!a) return;
       const l = new ResizeObserver((o) => {
-        pt(o[0].contentRect.height);
+        bt(o[0].contentRect.height);
       });
       l.observe(a), t(() => l.disconnect());
-    }), Qe(() => {
-      he.value = 0;
+    }), Ze(() => {
+      fe.value = 0;
     });
-    const Me = g(() => {
+    const Me = h(() => {
       let t = 0;
-      return H.value && (t = he.value + c.value.xAxisFontSize), t;
+      return H.value && (t = fe.value + c.value.xAxisFontSize), t;
     });
-    function bt() {
+    function mt() {
       let t = e.value.style.layout.grid.yAxis.dataLabels.offsetX;
-      return re.value && (t = Array.from(re.value.querySelectorAll("text")).reduce((o, x) => {
-        const f = x.getComputedTextLength();
-        return f > o ? f : o;
+      return re.value && (t = Array.from(re.value.querySelectorAll("text")).reduce((o, b) => {
+        const g = b.getComputedTextLength();
+        return g > o ? g : o;
       }, 0)), t + 13;
     }
-    const n = g(() => {
-      const { top: t, right: a, bottom: l, left: o } = e.value.style.layout.padding, x = bt(), f = 12;
+    const n = h(() => {
+      const { top: t, right: a, bottom: l, left: o } = e.value.style.layout.padding, b = mt(), g = 12;
       return {
-        top: t + f,
+        top: t + g,
         right: c.value.width - a,
-        left: o + x,
+        left: o + b,
         bottom: c.value.height - l - Me.value,
-        width: c.value.width - o - a - x,
-        height: c.value.height - t - l - Me.value - f
+        width: c.value.width - o - a - b,
+        height: c.value.height - t - l - Me.value - g
       };
-    }), X = g(() => C.value.length), v = r({
+    }), X = h(() => C.value.length), v = r({
       start: 0,
       end: X.value
-    }), Ue = g(() => C.value.map((t, a) => ({
+    }), Ue = h(() => C.value.map((t, a) => ({
       ...t,
       absoluteIndex: a
-    })).slice(v.value.start, v.value.end)), fe = g(() => (C.value.forEach((t, a) => {
+    })).slice(v.value.start, v.value.end)), ge = h(() => (C.value.forEach((t, a) => {
       [null, void 0].includes(t[0]) && U({
         componentName: "VueUiCandlestick",
         type: "datasetAttribute",
@@ -262,13 +263,13 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
       low: t[3],
       last: t[4],
       volume: t[5]
-    })))), d = g(() => n.value.width / Ue.value.length), We = g(() => {
-      const t = e.value.style.layout.grid.yAxis.scale.max === null ? Math.max(...fe.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 = h(() => n.value.width / Ue.value.length), We = h(() => {
+      const t = e.value.style.layout.grid.yAxis.scale.max === null ? Math.max(...ge.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
       };
-    }), _ = g(() => jt(We.value.min, We.value.max, e.value.style.layout.grid.yAxis.dataLabels.steps));
+    }), _ = h(() => Qt(We.value.min, We.value.max, e.value.style.layout.grid.yAxis.dataLabels.steps));
     function K(t, a) {
       return {
         ...t,
@@ -277,53 +278,53 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
         value: q(t)
       };
     }
-    const w = g(() => fe.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), P = t.last > t.open;
+    const w = h(() => ge.value.map((t, a) => {
+      const l = K(t.open, a), o = K(t.high, a), b = K(t.low, a), g = K(t.last, a), P = t.last > t.open;
       return {
         period: t.period,
         open: l,
         high: o,
-        low: x,
-        last: f,
+        low: b,
+        last: g,
         volume: t.volume,
         isBullish: P,
         absoluteIndex: t.absoluteIndex
       };
     }));
-    function mt(t) {
+    function xt(t) {
       return q((t - _.value.min) / (_.value.max - _.value.min));
     }
-    const xt = g(() => _.value.ticks.map((t) => ({
-      y: n.value.bottom - n.value.height * mt(t),
+    const kt = h(() => _.value.ticks.map((t) => ({
+      y: n.value.bottom - n.value.height * xt(t),
       value: q(t)
-    }))), kt = g(() => fe.value.map((t) => t.period)), O = g(() => sl({
+    }))), wt = h(() => ge.value.map((t) => t.period)), O = h(() => dl({
       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
-    })), He = g(() => e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? {
+    })), He = h(() => 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: 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]
-    }), ge = r(null);
-    function wt(t, a) {
+    }), pe = r(null);
+    function At(t, a) {
       e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: a, seriesIndex: t + v.value.start });
     }
-    function At(t, a) {
+    function Ct(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 Ct(t, a) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: a, seriesIndex: t + v.value.start }), ne.value = t, ge.value = {
+    function _t(t, a) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: a, seriesIndex: t + v.value.start }), ne.value = t, pe.value = {
         datapoint: a,
         seriesIndex: t,
         series: w.value,
         config: e.value
       };
       const l = e.value.style.tooltip.customFormat;
-      if (Qt(l) && Zt(() => l({
+      if (al(l) && ol(() => l({
         seriesIndex: t,
         datapoint: a,
         series: w.value,
@@ -337,79 +338,79 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
         });
       else if (e.value.style.tooltip.show) {
         let o = "";
-        const { period: x, open: f, high: P, low: xe, last: ke, volume: ee, isBullish: Je } = w.value[t], { period: Xl, open: Lt, high: It, low: Rt, last: Ft, volume: Ot } = e.value.translations, Dt = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? O.value[t].text : x;
+        const { period: b, open: g, high: P, low: ke, last: we, volume: ee, isBullish: Ke } = w.value[t], { period: Ql, open: Dt, high: Pt, low: Nt, last: Bt, volume: Et } = e.value.translations, Vt = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? O.value[t].text : b;
         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 ? Je ? `url(#bullish_gradient_${A.value})` : `url(#bearish_gradient_${A.value})` : Je ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish}"/></svg>${Dt}</div>`, o += `${Ot} : <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 = L({
+                fill="${e.value.style.layout.candle.gradient.show ? Ke ? `url(#bullish_gradient_${A.value})` : `url(#bearish_gradient_${A.value})` : Ke ? e.value.style.layout.candle.colors.bullish : e.value.style.layout.candle.colors.bearish}"/></svg>${Vt}</div>`, o += `${Et} : <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 Mt = L({
           p: e.value.style.tooltip.prefix,
-          v: f.value,
+          v: g.value,
           s: e.value.style.tooltip.suffix,
           r: e.value.style.tooltip.roundingValue
         });
-        o += `<div>${Lt}: <b>${Pt}</b></div>`;
-        const Nt = L({
+        o += `<div>${Dt}: <b>${Mt}</b></div>`;
+        const Ut = L({
           p: e.value.style.tooltip.prefix,
           v: P.value,
           s: e.value.style.tooltip.suffix,
           r: e.value.style.tooltip.roundingValue
         });
-        o += `<div>${It}: <b>${Nt}</b></div>`;
-        const Bt = L({
+        o += `<div>${Pt}: <b>${Ut}</b></div>`;
+        const Wt = L({
           p: e.value.style.tooltip.prefix,
-          v: xe.value,
+          v: ke.value,
           s: e.value.style.tooltip.suffix,
           r: e.value.style.tooltip.roundingValue
         });
-        o += `<div>${Rt}: <b>${Bt}</b></div>`;
-        const Vt = L({
+        o += `<div>${Nt}: <b>${Wt}</b></div>`;
+        const Ht = L({
           p: e.value.style.tooltip.prefix,
-          v: ke.value,
+          v: we.value,
           s: e.value.style.tooltip.suffix,
           r: e.value.style.tooltip.roundingValue
         });
-        o += `<div>${Ft}: <b>${Vt}</b></div>`, o += "</div>", ie.value = `<div style="text-align:right">${o}</div>`;
+        o += `<div>${Bt}: <b>${Ht}</b></div>`, o += "</div>", ie.value = `<div style="text-align:right">${o}</div>`;
       }
       ue.value = !0;
     }
-    function _t() {
-      pe();
+    function zt() {
+      be();
     }
     const Ge = r(null);
-    async function pe() {
-      await we(), await we();
+    async function be() {
+      await Ae(), await Ae();
       const { startIndex: t, endIndex: a } = e.value.style.zoom, l = Ge.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(zt(a + 1)) : (v.value.end = o, l.setEndValue(o))) : (v.value = { start: 0, end: o }, J.value += 1);
+      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 zt(t) {
+    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 be(t = null) {
-      we(() => {
-        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, P) => [
-          e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? O.value[P].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), x = Jt(o);
-        t ? t(x) : Kt({ csvContent: x, title: e.value.style.title.text || "vue-ui-candlestick" });
+    function me(t = null) {
+      Ae(() => {
+        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((g, P) => [
+          e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? O.value[P].text : g.period,
+          g.open.value,
+          g.high.value,
+          g.low.value,
+          g.last.value,
+          g.volume
+        ]), o = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([a]).concat(l), b = tl(o);
+        t ? t(b) : ll({ csvContent: b, title: e.value.style.title.text || "vue-ui-candlestick" });
       });
     }
-    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, P = L({
+    const Q = h(() => {
+      const t = w.value.map((o, b) => {
+        const g = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? O.value[b].text : o.period, P = L({
           p: e.value.table.td.prefix,
           v: o.open.value,
           s: e.value.table.td.suffix,
           r: e.value.table.td.roundingValue
-        }), xe = L({
+        }), ke = L({
           p: e.value.table.td.prefix,
           v: o.high.value,
           s: e.value.table.td.suffix,
           r: e.value.table.td.roundingValue
-        }), ke = L({
+        }), we = L({
           p: e.value.table.td.prefix,
           v: o.low.value,
           s: e.value.table.td.suffix,
@@ -421,10 +422,10 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
           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_${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}`,
+          `<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> ${g}`,
           P,
-          xe,
           ke,
+          we,
           ee,
           `${isNaN(o.volume) ? "-" : o.volume.toLocaleString()}`
         ];
@@ -451,7 +452,7 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
       return { head: l, body: t, config: a, colNames: l };
     }), D = r(!1);
     function Xe(t) {
-      D.value = t, _e.value += 1;
+      D.value = t, ze.value += 1;
     }
     function je() {
       k.value.showTable = !k.value.showTable;
@@ -460,23 +461,23 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
       k.value.showTooltip = !k.value.showTooltip;
     }
     const Z = r(!1);
-    function me() {
+    function xe() {
       Z.value = !Z.value;
     }
-    async function $t({ scale: t = 2 } = {}) {
+    async function St({ scale: t = 2 } = {}) {
       if (!$.value) return;
-      const { width: a, height: l } = $.value.getBoundingClientRect(), o = a / l, { imageUri: x, base64: f } = await rl({ domElement: $.value, base64: !0, img: !0, scale: t });
+      const { width: a, height: l } = $.value.getBoundingClientRect(), o = a / l, { imageUri: b, base64: g } = await fl({ domElement: $.value, base64: !0, img: !0, scale: t });
       return {
-        imageUri: x,
-        base64: f,
+        imageUri: b,
+        base64: g,
         title: e.value.style.title.text,
         width: a,
         height: l,
         aspectRatio: o
       };
     }
-    const St = g(() => c.value.width), Tt = g(() => c.value.height);
-    nl({
+    const Tt = h(() => c.value.width), Lt = h(() => c.value.height);
+    hl({
       timeLabelsEls: H,
       timeLabels: O,
       slicer: v,
@@ -485,18 +486,18 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
       autoRotatePath: ["style", "layout", "grid", "xAxis", "dataLabels", "autoRotate", "enable"],
       isAutoSize: !1,
       rotation: e.value.style.layout.grid.xAxis.dataLabels.autoRotate.angle,
-      width: St,
-      height: Tt
+      width: Tt,
+      height: Lt
     }), te(e, () => {
       k.value = {
         showTable: e.value.table.show,
         showTooltip: e.value.style.tooltip.show
       };
     }, { immediate: !0 });
-    const j = g(() => {
+    const j = h(() => {
       const t = e.value.table.useDialog && !e.value.table.show, a = k.value.showTable;
       return {
-        component: t ? ht : rt,
+        component: t ? ft : vt,
         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,
@@ -529,47 +530,60 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
     function qe() {
       k.value.showTable = !1, ve.value && ve.value.setTableIconState(!1);
     }
-    return ut({
-      getImage: $t,
-      generatePdf: Ve,
-      generateCsv: be,
-      generateImage: Ee,
+    const It = h(() => e.value.style.backgroundColor), Rt = h(() => e.value.style.title), { exportSvg: Ft, getSvg: Ot } = vl({
+      svg: ye,
+      title: Rt,
+      backgroundColor: It
+    });
+    async function Je({ isCb: t }) {
+      if (t) {
+        const { blob: a, url: l, text: o, dataUrl: b } = await Ot();
+        e.value.userOptions.callbacks.svg({ blob: a, url: l, text: o, dataUrl: b });
+      } else
+        Ft();
+    }
+    return it({
+      getImage: St,
+      generatePdf: Ee,
+      generateCsv: me,
+      generateImage: Ve,
+      generateSvg: Je,
       toggleTable: je,
       toggleTooltip: Ye,
-      toggleAnnotator: me,
+      toggleAnnotator: xe,
       toggleFullscreen: Xe
     }), (t, a) => (s(), i("div", {
       ref_key: "candlestickChart",
       ref: $,
       class: T(`vue-data-ui-component vue-ui-candlestick ${D.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
-      style: Ae(`position:relative;font-family:${e.value.style.fontFamily}; text-align:center;background:${e.value.style.backgroundColor}; ${e.value.responsive ? "height: 100%" : ""}`),
+      style: Ce(`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[3] || (a[3] = () => u(Fe)(!0)),
-      onMouseleave: a[4] || (a[4] = () => u(Fe)(!1))
+      onMouseenter: a[3] || (a[3] = () => u(Oe)(!0)),
+      onMouseleave: a[4] || (a[4] = () => u(Oe)(!1))
     }, [
-      e.value.userOptions.buttons.annotator ? (s(), N(u(dt), {
+      e.value.userOptions.buttons.annotator ? (s(), N(u(ct), {
         key: 0,
-        svgRef: u(De),
+        svgRef: u(ye),
         backgroundColor: e.value.style.backgroundColor,
         color: e.value.style.color,
         active: Z.value,
-        onClose: me
+        onClose: xe
       }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : p("", !0),
-      gt.value ? (s(), i("div", {
+      pt.value ? (s(), i("div", {
         key: 1,
         ref_key: "noTitle",
-        ref: Le,
+        ref: Ie,
         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: ze,
+        ref: $e,
         style: "width:100%;background:transparent"
       }, [
-        (s(), N(vl, {
-          key: `title_${Re.value}`,
+        (s(), N(gl, {
+          key: `title_${Fe.value}`,
           config: {
             title: {
               cy: "candlestick-div-title",
@@ -582,10 +596,10 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
           }
         }, null, 8, ["config"]))
       ], 512)) : p("", !0),
-      e.value.userOptions.show && oe.value && (u(Oe) || u(ce)) ? (s(), N(u(ct), {
+      e.value.userOptions.show && oe.value && (u(De) || u(ce)) ? (s(), N(u(yt), {
         ref_key: "userOptionsRef",
         ref: ve,
-        key: `user_options_${_e.value}`,
+        key: `user_options_${ze.value}`,
         backgroundColor: e.value.style.backgroundColor,
         color: e.value.style.color,
         isImaging: u(Be),
@@ -594,6 +608,7 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
         hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.tooltip.show,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
+        hasSvg: e.value.userOptions.buttons.svg,
         hasXls: e.value.userOptions.buttons.csv,
         hasTable: e.value.userOptions.buttons.table,
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
@@ -608,83 +623,84 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
         printScale: e.value.userOptions.print.scale,
         tableDialog: e.value.table.useDialog,
         onToggleFullscreen: Xe,
-        onGeneratePdf: u(Ve),
-        onGenerateCsv: be,
-        onGenerateImage: u(Ee),
+        onGeneratePdf: u(Ee),
+        onGenerateCsv: me,
+        onGenerateImage: u(Ve),
+        onGenerateSvg: Je,
         onToggleTable: je,
         onToggleTooltip: Ye,
-        onToggleAnnotator: me,
-        style: Ae({
-          visibility: u(Oe) ? u(ce) ? "visible" : "hidden" : "visible"
+        onToggleAnnotator: xe,
+        style: Ce({
+          visibility: u(De) ? u(ce) ? "visible" : "hidden" : "visible"
         })
-      }, Ze({ _: 2 }, [
+      }, et({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
-          fn: b(({ isOpen: l, color: o }) => [
-            m(t.$slots, "menuIcon", B(V({ isOpen: l, color: o })), void 0, !0)
+          fn: m(({ isOpen: l, color: o }) => [
+            x(t.$slots, "menuIcon", B(E({ isOpen: l, color: o })), void 0, !0)
           ]),
           key: "0"
         } : void 0,
         t.$slots.optionTooltip ? {
           name: "optionTooltip",
-          fn: b(() => [
-            m(t.$slots, "optionTooltip", {}, void 0, !0)
+          fn: m(() => [
+            x(t.$slots, "optionTooltip", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         t.$slots.optionPdf ? {
           name: "optionPdf",
-          fn: b(() => [
-            m(t.$slots, "optionPdf", {}, void 0, !0)
+          fn: m(() => [
+            x(t.$slots, "optionPdf", {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         t.$slots.optionCsv ? {
           name: "optionCsv",
-          fn: b(() => [
-            m(t.$slots, "optionCsv", {}, void 0, !0)
+          fn: m(() => [
+            x(t.$slots, "optionCsv", {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         t.$slots.optionImg ? {
           name: "optionImg",
-          fn: b(() => [
-            m(t.$slots, "optionImg", {}, void 0, !0)
+          fn: m(() => [
+            x(t.$slots, "optionImg", {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         t.$slots.optionTable ? {
           name: "optionTable",
-          fn: b(() => [
-            m(t.$slots, "optionTable", {}, void 0, !0)
+          fn: m(() => [
+            x(t.$slots, "optionTable", {}, void 0, !0)
           ]),
           key: "5"
         } : void 0,
         t.$slots.optionFullscreen ? {
           name: "optionFullscreen",
-          fn: b(({ toggleFullscreen: l, isFullscreen: o }) => [
-            m(t.$slots, "optionFullscreen", B(V({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
+          fn: m(({ toggleFullscreen: l, isFullscreen: o }) => [
+            x(t.$slots, "optionFullscreen", B(E({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
           ]),
           key: "6"
         } : void 0,
         t.$slots.optionAnnotator ? {
           name: "optionAnnotator",
-          fn: b(({ toggleAnnotator: l, isAnnotator: o }) => [
-            m(t.$slots, "optionAnnotator", B(V({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
+          fn: m(({ toggleAnnotator: l, isAnnotator: o }) => [
+            x(t.$slots, "optionAnnotator", B(E({ 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", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : p("", !0),
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : p("", !0),
       (s(), i("svg", {
         ref_key: "svgRef",
-        ref: De,
-        xmlns: u(Yt),
+        ref: ye,
+        xmlns: u(Zt),
         "aria-label": e.value.style.title.text || "candlestick chart",
         class: T({ "vue-data-ui-fullscreen--on": D.value, "vue-data-ui-fulscreen--off": !D.value }),
         viewBox: `0 0 ${c.value.width <= 0 ? 10 : c.value.width} ${c.value.height <= 0 ? 10 : c.value.height}`,
-        style: Ae(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
+        style: Ce(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
       }, [
-        Ce(u(yt)),
+        _e(u(ht)),
         t.$slots["chart-background"] ? (s(), i("foreignObject", {
           key: 0,
           x: n.value.left,
@@ -695,9 +711,9 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
             pointerEvents: "none"
           }
         }, [
-          m(t.$slots, "chart-background", {}, void 0, !0)
-        ], 8, gl)) : p("", !0),
-        w.value.length > 0 ? (s(), i("g", pl, [
+          x(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, wl)) : p("", !0),
+        w.value.length > 0 ? (s(), i("g", Al, [
           y("defs", null, [
             y("linearGradient", {
               id: `bearish_gradient_${A.value}`,
@@ -707,16 +723,16 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
               y("stop", {
                 offset: "0%",
                 "stop-color": e.value.style.layout.candle.colors.bearish
-              }, null, 8, ml),
+              }, null, 8, _l),
               y("stop", {
                 offset: "50%",
                 "stop-color": `${u(ae)(e.value.style.layout.candle.colors.bearish, 0.02)}DE`
-              }, null, 8, xl),
+              }, null, 8, zl),
               y("stop", {
                 offset: "100%",
                 "stop-color": `${u(ae)(e.value.style.layout.candle.colors.bearish, 0.05)}66`
-              }, null, 8, kl)
-            ], 8, bl),
+              }, null, 8, $l)
+            ], 8, Cl),
             y("linearGradient", {
               id: `bullish_gradient_${A.value}`,
               x2: "0%",
@@ -725,18 +741,18 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
               y("stop", {
                 offset: "0%",
                 "stop-color": e.value.style.layout.candle.colors.bullish
-              }, null, 8, Al),
+              }, null, 8, Tl),
               y("stop", {
                 offset: "50%",
                 "stop-color": `${u(ae)(e.value.style.layout.candle.colors.bullish, 0.02)}DE`
-              }, null, 8, Cl),
+              }, null, 8, Ll),
               y("stop", {
                 offset: "100%",
                 "stop-color": `${u(ae)(e.value.style.layout.candle.colors.bullish, 0.05)}66`
-              }, null, 8, _l)
-            ], 8, wl)
+              }, null, 8, Il)
+            ], 8, Sl)
           ]),
-          e.value.style.layout.grid.show ? (s(), i("g", zl, [
+          e.value.style.layout.grid.show ? (s(), i("g", Rl, [
             y("line", {
               x1: n.value.left,
               x2: n.value.left,
@@ -745,7 +761,7 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
               stroke: e.value.style.layout.grid.stroke,
               "stroke-width": e.value.style.layout.grid.strokeWidth,
               "stroke-linecap": "round"
-            }, null, 8, $l),
+            }, null, 8, Fl),
             y("line", {
               x1: n.value.left,
               x2: n.value.right,
@@ -754,14 +770,14 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
               stroke: e.value.style.layout.grid.stroke,
               "stroke-width": e.value.style.layout.grid.strokeWidth,
               "stroke-linecap": "round"
-            }, null, 8, Sl)
+            }, null, 8, Ol)
           ])) : p("", !0),
           e.value.style.layout.grid.yAxis.dataLabels.show ? (s(), i("g", {
             key: 1,
             ref_key: "scaleLabels",
             ref: re
           }, [
-            (s(!0), i(E, null, M(xt.value, (l, o) => (s(), i("g", null, [
+            (s(!0), i(V, null, M(kt.value, (l, o) => (s(), i("g", null, [
               l.value >= _.value.min && l.value <= _.value.max ? (s(), i("line", {
                 key: 0,
                 x1: n.value.left,
@@ -771,7 +787,7 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
                 stroke: e.value.style.layout.grid.stroke,
                 "stroke-width": e.value.style.layout.grid.strokeWidth,
                 "stroke-linecap": "round"
-              }, null, 8, Tl)) : p("", !0),
+              }, null, 8, Dl)) : 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,
@@ -785,7 +801,7 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
                 v: l.value,
                 s: e.value.style.layout.grid.yAxis.dataLabels.suffix,
                 r: e.value.style.layout.grid.yAxis.dataLabels.roundingValue
-              })), 9, Ll)) : p("", !0)
+              })), 9, Pl)) : 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", {
@@ -793,7 +809,7 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
             ref_key: "timeLabelsEls",
             ref: H
           }, [
-            (s(!0), i(E, null, M(kt.value, (l, o) => (s(), i("g", null, [
+            (s(!0), i(V, null, M(wt.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 + c.value.xAxisFontSize * 1.5}), rotate(${e.value.style.layout.grid.xAxis.dataLabels.rotation})`,
@@ -801,7 +817,7 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
                 "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"
-              }, Y(l), 9, Il)
+              }, Y(l), 9, Nl)
             ]))), 256))
           ], 512)) : p("", !0),
           e.value.style.layout.grid.xAxis.dataLabels.show && e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? (s(), i("g", {
@@ -809,7 +825,7 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
             ref_key: "timeLabelsEls",
             ref: H
           }, [
-            (s(!0), i(E, null, M(O.value, (l, o) => (s(), i("g", null, [
+            (s(!0), i(V, 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 + c.value.xAxisFontSize * 1.5}), rotate(${e.value.style.layout.grid.xAxis.dataLabels.rotation})`,
@@ -817,11 +833,11 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
                 "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"
-              }, Y(l.text), 9, Rl)
+              }, Y(l.text), 9, Bl)
             ]))), 256))
           ], 512)) : p("", !0),
           y("g", null, [
-            (s(!0), i(E, null, M(w.value, (l, o) => (s(), i("g", null, [
+            (s(!0), i(V, 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,
@@ -831,24 +847,24 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
                 stroke: "none",
                 rx: e.value.style.layout.wick.strokeWidth / 2,
                 class: T({ "vue-data-ui-transition": z.value && !u(S) })
-              }, null, 10, Fl),
-              e.value.style.layout.wick.extremity.shape === "circle" ? (s(), i("g", Ol, [
+              }, null, 10, El),
+              e.value.style.layout.wick.extremity.shape === "circle" ? (s(), i("g", Vl, [
                 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: T({ "vue-data-ui-transition": z.value && !u(S) })
-                }, null, 10, Dl),
+                }, null, 10, Ml),
                 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: T({ "vue-data-ui-transition": z.value && !u(S) })
-                }, null, 10, Pl)
+                }, null, 10, Ul)
               ])) : p("", !0),
-              e.value.style.layout.wick.extremity.shape === "line" ? (s(), i("g", Nl, [
+              e.value.style.layout.wick.extremity.shape === "line" ? (s(), i("g", Wl, [
                 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,
@@ -858,7 +874,7 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
                   fill: e.value.style.layout.wick.extremity.color,
                   stroke: "none",
                   class: T({ "vue-data-ui-transition": z.value && !u(S) })
-                }, null, 10, Bl),
+                }, null, 10, Hl),
                 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,
@@ -868,12 +884,12 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
                   stroke: "none",
                   rx: e.value.style.layout.wick.strokeWidth / 2,
                   class: T({ "vue-data-ui-transition": z.value && !u(S) })
-                }, null, 10, Vl)
+                }, null, 10, Gl)
               ])) : p("", !0)
             ]))), 256))
           ]),
           y("g", null, [
-            (s(!0), i(E, null, M(w.value, (l, o) => (s(), i("rect", {
+            (s(!0), i(V, 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),
@@ -882,8 +898,8 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
               rx: e.value.style.layout.candle.borderRadius,
               stroke: "none",
               class: T({ "vue-data-ui-transition": z.value && !u(S) })
-            }, null, 10, El))), 256)),
-            (s(!0), i(E, null, M(w.value, (l, o) => (s(), i("rect", {
+            }, null, 10, Xl))), 256)),
+            (s(!0), i(V, 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),
@@ -895,32 +911,32 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
               class: T({ "vue-data-ui-transition": z.value && !u(S) })
-            }, null, 10, Ml))), 256))
+            }, null, 10, jl))), 256))
           ]),
           y("g", null, [
-            (s(!0), i(E, null, M(w.value, (l, o) => (s(), i("rect", {
+            (s(!0), i(V, 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: ne.value === o ? u(qt)(e.value.style.layout.selector.color, e.value.style.layout.selector.opacity) : "transparent",
-              onMouseover: () => Ct(o, l),
-              onMouseleave: () => At(o, l),
-              onClick: () => wt(o, l)
-            }, null, 40, Ul))), 256))
+              fill: ne.value === o ? u(el)(e.value.style.layout.selector.color, e.value.style.layout.selector.opacity) : "transparent",
+              onMouseover: () => _t(o, l),
+              onMouseleave: () => Ct(o, l),
+              onClick: () => At(o, l)
+            }, null, 40, Yl))), 256))
           ])
         ])) : p("", !0),
-        m(t.$slots, "svg", { svg: c.value }, void 0, !0)
-      ], 14, fl)),
-      t.$slots.watermark ? (s(), i("div", Wl, [
-        m(t.$slots, "watermark", B(V({ isPrinting: u(Ne) || u(Be) })), void 0, !0)
+        x(t.$slots, "svg", { svg: c.value }, void 0, !0)
+      ], 14, kl)),
+      t.$slots.watermark ? (s(), i("div", ql, [
+        x(t.$slots, "watermark", B(E({ isPrinting: u(Ne) || u(Be) })), void 0, !0)
       ])) : p("", !0),
       e.value.style.zoom.show && oe.value ? (s(), i("div", {
         key: 5,
         ref_key: "chartSlicer",
-        ref: Se
+        ref: Te
       }, [
-        (s(), N(cl, {
+        (s(), N(bl, {
           ref_key: "slicerComponent",
           ref: Ge,
           key: `slicer_${J.value}`,
@@ -947,29 +963,29 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
           enableSelectionDrag: e.value.style.zoom.enableSelectionDrag,
           focusOnDrag: e.value.style.zoom.focusOnDrag,
           focusRangeRatio: e.value.style.zoom.focusRangeRatio,
-          onReset: _t
+          onReset: zt
         }, {
-          "reset-action": b(({ reset: l }) => [
-            m(t.$slots, "reset-action", B(V({ reset: l })), void 0, !0)
+          "reset-action": m(({ reset: l }) => [
+            x(t.$slots, "reset-action", B(E({ 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", "focusOnDrag", "focusRangeRatio"]))
       ], 512)) : p("", !0),
       y("div", {
         ref_key: "chartLegend",
-        ref: $e
+        ref: Se
       }, [
-        m(t.$slots, "legend", { legend: w.value }, void 0, !0)
+        x(t.$slots, "legend", { legend: w.value }, void 0, !0)
       ], 512),
       t.$slots.source ? (s(), i("div", {
         key: 6,
         ref_key: "source",
-        ref: Te,
+        ref: Le,
         dir: "auto"
       }, [
-        m(t.$slots, "source", {}, void 0, !0)
+        x(t.$slots, "source", {}, void 0, !0)
       ], 512)) : p("", !0),
-      Ce(u(nt), {
+      _e(u(rt), {
         show: k.value.showTooltip && ue.value,
         backgroundColor: e.value.style.tooltip.backgroundColor,
         color: e.value.style.tooltip.color,
@@ -989,22 +1005,22 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
         smoothForce: e.value.style.tooltip.smoothForce,
         smoothSnapThreshold: e.value.style.tooltip.smoothSnapThreshold
       }, {
-        "tooltip-before": b(() => [
-          m(t.$slots, "tooltip-before", B(V({ ...ge.value })), void 0, !0)
+        "tooltip-before": m(() => [
+          x(t.$slots, "tooltip-before", B(E({ ...pe.value })), void 0, !0)
         ]),
-        "tooltip-after": b(() => [
-          m(t.$slots, "tooltip-after", B(V({ ...ge.value })), void 0, !0)
+        "tooltip-after": m(() => [
+          x(t.$slots, "tooltip-after", B(E({ ...pe.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
-      oe.value && e.value.userOptions.buttons.table ? (s(), N(Wt(j.value.component), Ht({ key: 7 }, j.value.props, {
+      oe.value && e.value.userOptions.buttons.table ? (s(), N(Yt(j.value.component), qt({ key: 7 }, j.value.props, {
         ref_key: "tableUnit",
         ref: G,
         onClose: qe
-      }), Ze({
-        content: b(() => [
-          (s(), N(u(vt), {
-            key: `table_${Ie.value}`,
+      }), et({
+        content: m(() => [
+          (s(), N(u(dt), {
+            key: `table_${Re.value}`,
             colNames: Q.value.colNames,
             head: Q.value.head,
             body: Q.value.body,
@@ -1013,11 +1029,11 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
             withCloseButton: !e.value.table.useDialog,
             onClose: qe
           }, {
-            th: b(({ th: l }) => [
-              et(Y(l), 1)
+            th: m(({ th: l }) => [
+              tt(Y(l), 1)
             ]),
-            td: b(({ td: l }) => [
-              y("div", { innerHTML: l }, null, 8, Hl)
+            td: m(({ td: l }) => [
+              y("div", { innerHTML: l }, null, 8, Jl)
             ]),
             _: 1
           }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
@@ -1026,20 +1042,20 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
       }, [
         e.value.table.useDialog ? {
           name: "title",
-          fn: b(() => [
-            et(Y(j.value.title), 1)
+          fn: m(() => [
+            tt(Y(j.value.title), 1)
           ]),
           key: "0"
         } : void 0,
         e.value.table.useDialog ? {
           name: "actions",
-          fn: b(() => [
+          fn: m(() => [
             y("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
-              onClick: a[2] || (a[2] = (l) => be(e.value.userOptions.callbacks.csv))
+              onClick: a[2] || (a[2] = (l) => me(e.value.userOptions.callbacks.csv))
             }, [
-              Ce(u(it), {
+              _e(u(nt), {
                 name: "excel",
                 stroke: j.value.props.color
               }, null, 8, ["stroke"])
@@ -1048,10 +1064,10 @@ const hl = ["id"], fl = ["xmlns", "aria-label", "viewBox"], gl = ["x", "y", "wid
           key: "1"
         } : void 0
       ]), 1040)) : p("", !0),
-      u(S) ? (s(), N(ol, { key: 8 })) : p("", !0)
-    ], 46, hl));
+      u(S) ? (s(), N(rl, { key: 8 })) : p("", !0)
+    ], 46, xl));
   }
-}, na = /* @__PURE__ */ yl(Gl, [["__scopeId", "data-v-334caea2"]]);
+}, fa = /* @__PURE__ */ ml(Kl, [["__scopeId", "data-v-2c20d4e0"]]);
 export {
-  na as default
+  fa as default
 };