vue-data-ui 3.0.0-next.9 → 3.0.0

package/dist/vue-ui-candlestick-Dw0U4uIQ.js

@@ -0,0 +1,1000 @@
+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 L, 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 S, 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-BtNwOUja.js";
+import { t as Ke, u as qt } from "./useResponsive-DfdjqQps.js";
+import { u as Qe } from "./useNestedProp-f2H3m6Yj.js";
+import { u as Jt } from "./usePrinter-DUNjpQNe.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-BGu6gEd2.js";
+import { S as ll } from "./Slicer-MID8pgT3.js";
+import { u as al } from "./useTimeLabels-DkzmKfZn.js";
+import ol from "./img-DrR839Ot.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 }, Ll = ["cx", "cy", "r", "fill"], Sl = ["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 = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, El = ["innerHTML"], Vl = {
+  __name: "vue-ui-candlestick",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  setup(Ze, { expose: et }) {
+    const tt = D(() => import("./vue-ui-accordion-BKUrAowe.js")), lt = D(() => import("./DataTable-BSSXpM7w.js")), at = D(() => import("./PackageVersion-CJ6Vd7V5.js")), ot = D(() => import("./PenAndPaper-D3zudcNI.js")), st = D(() => import("./Tooltip-Bh2zYSoM.js")), ut = D(() => import("./UserOptions-Ck8fz9f4.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),
+      FINAL_CONFIG: e,
+      prepareConfig: re,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          await ce();
+        });
+      },
+      skeletonDataset: [
+        [17040672e5, 10, 20, 2, 10, 30],
+        [17067456e5, 10, 30, 5, 20, 50],
+        [17092512e5, 20, 50, 10, 30, 80],
+        [17119296e5, 30, 80, 20, 50, 130],
+        [17145216e5, 50, 130, 30, 100, 210],
+        [17172e8, 80, 210, 50, 150, 340],
+        [1719792e6, 130, 340, 80, 280, 550],
+        [17224704e5, 210, 550, 130, 450, 890],
+        [17251488e5, 340, 890, 210, 750, 1440],
+        [17277408e5, 550, 1440, 340, 1230, 2330],
+        [17304192e5, 890, 2330, 550, 1950, 3770],
+        [17330112e5, 1440, 3770, 890, 3200, 5100]
+      ],
+      skeletonConfig: Mt({
+        defaultConfig: e.value,
+        userConfig: {
+          useCssAnimation: !1,
+          userOptions: { show: !1 },
+          table: { show: !1 },
+          style: {
+            backgroundColor: "#99999930",
+            layout: {
+              candle: {
+                colors: {
+                  bearish: "#BABABA",
+                  bullish: "#CACACA"
+                }
+              },
+              grid: {
+                stroke: "#6A6A6A",
+                yAxis: {
+                  dataLabels: { show: !1 },
+                  scale: {
+                    min: null,
+                    max: null
+                  }
+                }
+              },
+              wick: {
+                stroke: "#6A6A6A",
+                extremity: {
+                  color: "#6A6A6A"
+                }
+              }
+            },
+            tooltip: { show: !1 },
+            zoom: {
+              show: !1,
+              startIndex: null,
+              endIndex: null
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: ne, setUserOptionsVisibility: Le, keepUserOptionState: Se } = Kt({ config: e.value }), { svgRef: Te } = Qt({ config: e.value.style.title });
+    function re() {
+      const t = Qe({
+        userConfig: h.config,
+        defaultConfig: it
+      });
+      let a = {};
+      return t.theme ? a = {
+        ...Qe({
+          userConfig: Ut.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;
+    }
+    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), y.value.start = 0, y.value.end = t.length, j.value += 1;
+    }, { deep: !0 });
+    const d = 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();
+    });
+    const F = g(() => !!e.value.debug);
+    function Ie() {
+      if (qe(h.dataset) && (M({
+        componentName: "VueUiCandlestick",
+        type: "dataset",
+        debug: F.value
+      }), ie.value = !0), qe(h.dataset) || (ie.value = e.value.loading), setTimeout(() => {
+        $.value = !0;
+      }, 10), e.value.responsive) {
+        const a = Ke(() => {
+          $.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
+          });
+          requestAnimationFrame(() => {
+            d.value.width = l, d.value.height = o - 12, e.value.responsiveProportionalSizing ? (d.value.xAxisFontSize = Je({
+              relator: Math.min(l, o),
+              adjuster: e.value.style.width,
+              source: e.value.style.layout.grid.xAxis.dataLabels.fontSize,
+              threshold: 6,
+              fallback: 6
+            }), d.value.yAxisFontSize = Je({
+              relator: Math.min(l, o),
+              adjuster: e.value.style.width,
+              source: e.value.style.layout.grid.yAxis.dataLabels.fontSize,
+              threshold: 6,
+              fallback: 6
+            })) : (d.value.xAxisFontSize = e.value.style.layout.grid.xAxis.dataLabels.fontSize, d.value.yAxisFontSize = e.value.style.layout.grid.yAxis.dataLabels.fontSize), le.value && clearTimeout(le.value), le.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);
+      }
+      ce();
+    }
+    je(() => {
+      I.value && (U.value && I.value.unobserve(U.value), I.value.disconnect());
+    });
+    const { isPrinting: Fe, isImaging: Re, generatePdf: Oe, generateImage: Ne } = Jt({
+      elementId: `vue-ui-candlestick_${w.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({
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.tooltip.show
+    }), ve = r(0), vt = Ke((t) => {
+      ve.value = t;
+    }, 100);
+    Nt((t) => {
+      const a = H.value;
+      if (!a) return;
+      const l = new ResizeObserver((o) => {
+        vt(o[0].contentRect.height);
+      });
+      l.observe(a), t(() => l.disconnect());
+    }), je(() => {
+      ve.value = 0;
+    });
+    const Pe = g(() => {
+      let t = 0;
+      return H.value && (t = ve.value + d.value.xAxisFontSize), t;
+    });
+    function dt() {
+      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 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;
+      return {
+        top: t + f,
+        right: d.value.width - a,
+        left: o + m,
+        bottom: d.value.height - l - Pe.value,
+        width: d.value.width - o - a - m,
+        height: d.value.height - t - l - Pe.value - f
+      };
+    }), G = g(() => A.value.length), y = r({
+      start: 0,
+      end: G.value
+    }), Ee = g(() => A.value.map((t, a) => ({
+      ...t,
+      absoluteIndex: a
+    })).slice(y.value.start, y.value.end)), de = g(() => (A.value.forEach((t, a) => {
+      [null, void 0].includes(t[0]) && M({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "period (index 0)",
+        index: a,
+        debug: F.value
+      }), [null, void 0].includes(t[1]) && M({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "open (index 1)",
+        index: a,
+        debug: F.value
+      }), [null, void 0].includes(t[2]) && M({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "high (index 2)",
+        index: a,
+        debug: F.value
+      }), [null, void 0].includes(t[3]) && M({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "low (index 3)",
+        index: a,
+        debug: F.value
+      }), [null, void 0].includes(t[4]) && M({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "last (index 4)",
+        index: a,
+        debug: F.value
+      }), [null, void 0].includes(t[5]) && M({
+        componentName: "VueUiCandlestick",
+        type: "datasetAttribute",
+        property: "volume (index 5)",
+        index: a,
+        debug: F.value
+      });
+    }), Ee.value.map((t) => ({
+      absoluteIndex: t.absoluteIndex,
+      period: t[0],
+      open: t[1],
+      high: t[2],
+      low: t[3],
+      last: t[4],
+      volume: t[5]
+    })))), v = 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;
+      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) {
+      return {
+        ...t,
+        x: X(n.value.left + a * v.value + v.value / 2),
+        y: X(n.value.top + (1 - (t - C.value.min) / (C.value.max - C.value.min)) * n.value.height),
+        value: X(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;
+      return {
+        period: t.period,
+        open: l,
+        high: o,
+        low: m,
+        last: f,
+        volume: t.volume,
+        isBullish: O,
+        absoluteIndex: t.absoluteIndex
+      };
+    }));
+    function yt(t) {
+      return X((t - C.value.min) / (C.value.max - C.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,
+      formatter: e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter,
+      start: y.value.start,
+      end: y.value.end
+    })), Be = g(() => e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? {
+      start: R.value.find((t) => t.absoluteIndex === y.value.start).text,
+      end: R.value.find((t) => t.absoluteIndex === y.value.end - 1).text
+    } : {
+      start: A.value[y.value.start] ? A.value[y.value.start][0] : A.value[0][0],
+      end: A.value[y.value.end - 1] ? A.value[y.value.end - 1][0] : A.value.at(-1)[0]
+    }), ye = r(null);
+    function ft(t, a) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: a, seriesIndex: t + y.value.start });
+    }
+    function gt(t, a) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: a, seriesIndex: t + y.value.start }), se.value = void 0, ae.value = !1;
+    }
+    function pt(t, a) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: a, seriesIndex: t + y.value.start }), se.value = t, ye.value = {
+        datapoint: a,
+        seriesIndex: t,
+        series: k.value,
+        config: e.value
+      };
+      const l = e.value.style.tooltip.customFormat;
+      if (jt(l) && Yt(() => l({
+        seriesIndex: t,
+        datapoint: a,
+        series: k.value,
+        config: e.value
+      })))
+        oe.value = l({
+          seriesIndex: t,
+          datapoint: a,
+          series: k.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, Lt = e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? R.value[t].text : m;
+        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>${Lt}</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 St = S({
+          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>${St}</b></div>`;
+        const Tt = S({
+          p: e.value.style.tooltip.prefix,
+          v: O.value,
+          s: e.value.style.tooltip.suffix,
+          r: e.value.style.tooltip.roundingValue
+        });
+        o += `<div>${_t}: <b>${Tt}</b></div>`;
+        const It = S({
+          p: e.value.style.tooltip.prefix,
+          v: fe.value,
+          s: e.value.style.tooltip.suffix,
+          r: e.value.style.tooltip.roundingValue
+        });
+        o += `<div>${Ct}: <b>${It}</b></div>`;
+        const Ft = S({
+          p: e.value.style.tooltip.prefix,
+          v: ge.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>`;
+      }
+      ae.value = !0;
+    }
+    function bt() {
+      ce();
+    }
+    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;
+      (t != null || a != null) && l ? (t != null && l.setStartValue(t), a != null && l.setEndValue(mt(a + 1))) : (y.value = { start: 0, end: o }, j.value += 1);
+    }
+    function mt(t) {
+      const a = G.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,
+          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" });
+      });
+    }
+    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 = S({
+          p: e.value.table.td.prefix,
+          v: o.open.value,
+          s: e.value.table.td.suffix,
+          r: e.value.table.td.roundingValue
+        }), fe = S({
+          p: e.value.table.td.prefix,
+          v: o.high.value,
+          s: e.value.table.td.suffix,
+          r: e.value.table.td.roundingValue
+        }), ge = S({
+          p: e.value.table.td.prefix,
+          v: o.low.value,
+          s: e.value.table.td.suffix,
+          r: e.value.table.td.roundingValue
+        }), K = S({
+          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,
+          `${isNaN(o.volume) ? "-" : o.volume.toLocaleString()}`
+        ];
+      }), a = {
+        th: {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          outline: e.value.table.th.outline
+        },
+        td: {
+          backgroundColor: e.value.table.td.backgroundColor,
+          color: e.value.table.td.color,
+          outline: e.value.table.td.outline
+        },
+        breakpoint: e.value.table.responsiveBreakpoint
+      }, l = [
+        e.value.translations.period,
+        e.value.translations.open,
+        e.value.translations.high,
+        e.value.translations.low,
+        e.value.translations.last,
+        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;
+    }
+    function De() {
+      _.value.showTable = !_.value.showTable;
+    }
+    function He() {
+      _.value.showTooltip = !_.value.showTooltip;
+    }
+    const J = r(!1);
+    function he() {
+      J.value = !J.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 });
+      return {
+        imageUri: m,
+        base64: f,
+        title: e.value.style.title.text,
+        width: a,
+        height: l,
+        aspectRatio: o
+      };
+    }
+    const kt = g(() => d.value.width), wt = g(() => d.value.height);
+    return sl({
+      timeLabelsEls: H,
+      timeLabels: R,
+      slicer: y,
+      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 = {
+        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
+    }), (t, a) => (s(), i("div", {
+      ref_key: "candlestickChart",
+      ref: T,
+      class: L(`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(Le)(!0)),
+      onMouseleave: a[4] || (a[4] = () => u(Le)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (s(), N(u(ot), {
+        key: 0,
+        svgRef: u(Te),
+        backgroundColor: e.value.style.backgroundColor,
+        color: e.value.style.color,
+        active: J.value,
+        onClose: he
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : p("", !0),
+      rt.value ? (s(), i("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: Ce,
+        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,
+        style: "width:100%;background:transparent"
+      }, [
+        (s(), N(tl, {
+          key: `title_${ze.value}`,
+          config: {
+            title: {
+              cy: "candlestick-div-title",
+              ...e.value.style.title
+            },
+            subtitle: {
+              cy: "candlestick-div-subtitle",
+              ...e.value.style.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : p("", !0),
+      e.value.userOptions.show && te.value && (u(Se) || u(ne)) ? (s(), N(u(ut), {
+        ref_key: "details",
+        ref: nt,
+        key: `user_options_${xe.value}`,
+        backgroundColor: e.value.style.backgroundColor,
+        color: e.value.style.color,
+        isImaging: u(Re),
+        isPrinting: u(Fe),
+        uid: w.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,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: T.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: J.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(Se) ? u(ne) ? "visible" : "hidden" : "visible"
+        })
+      }, Pt({ _: 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)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: x(() => [
+            b(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: x(() => [
+            b(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: x(() => [
+            b(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: x(() => [
+            b(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: x(() => [
+            b(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)
+          ]),
+          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)
+          ]),
+          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),
+        "aria-label": e.value.style.title.text || "candlestick chart",
+        class: L({ "vue-data-ui-fullscreen--on": W.value, "vue-data-ui-fulscreen--off": !W.value }),
+        viewBox: `0 0 ${d.value.width <= 0 ? 10 : d.value.width} ${d.value.height <= 0 ? 10 : d.value.height}`,
+        style: me(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
+      }, [
+        Ye(u(at)),
+        t.$slots["chart-background"] ? (s(), i("foreignObject", {
+          key: 0,
+          x: n.value.left,
+          y: n.value.top,
+          width: Math.max(0.1, n.value.width),
+          height: Math.max(0.1, n.value.height),
+          style: {
+            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}`,
+              x2: "0%",
+              y2: "100%"
+            }, [
+              c("stop", {
+                offset: "0%",
+                "stop-color": e.value.style.layout.candle.colors.bearish
+              }, null, 8, yl),
+              c("stop", {
+                offset: "50%",
+                "stop-color": `${u(ee)(e.value.style.layout.candle.colors.bearish, 0.02)}DE`
+              }, null, 8, cl),
+              c("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}`,
+              x2: "0%",
+              y2: "100%"
+            }, [
+              c("stop", {
+                offset: "0%",
+                "stop-color": e.value.style.layout.candle.colors.bullish
+              }, null, 8, gl),
+              c("stop", {
+                offset: "50%",
+                "stop-color": `${u(ee)(e.value.style.layout.candle.colors.bullish, 0.02)}DE`
+              }, null, 8, pl),
+              c("stop", {
+                offset: "100%",
+                "stop-color": `${u(ee)(e.value.style.layout.candle.colors.bullish, 0.05)}66`
+              }, null, 8, bl)
+            ], 8, fl)
+          ]),
+          e.value.style.layout.grid.show ? (s(), i("g", ml, [
+            c("line", {
+              x1: n.value.left,
+              x2: n.value.left,
+              y1: n.value.top,
+              y2: n.value.bottom,
+              stroke: e.value.style.layout.grid.stroke,
+              "stroke-width": e.value.style.layout.grid.strokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, xl),
+            c("line", {
+              x1: n.value.left,
+              x2: n.value.right,
+              y1: n.value.bottom,
+              y2: n.value.bottom,
+              stroke: e.value.style.layout.grid.stroke,
+              "stroke-width": e.value.style.layout.grid.strokeWidth,
+              "stroke-linecap": "round"
+            }, null, 8, kl)
+          ])) : p("", !0),
+          e.value.style.layout.grid.yAxis.dataLabels.show ? (s(), i("g", {
+            key: 1,
+            ref_key: "scaleLabels",
+            ref: ue
+          }, [
+            (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", {
+                key: 0,
+                x1: n.value.left,
+                x2: n.value.left - 5,
+                y1: l.y,
+                y2: l.y,
+                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", {
+                key: 1,
+                x: n.value.left - 8 + e.value.style.layout.grid.yAxis.dataLabels.offsetX,
+                y: l.y + d.value.yAxisFontSize / 3,
+                "font-size": d.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(S)({
+                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)
+            ]))), 256))
+          ], 512)) : p("", !0),
+          e.value.style.layout.grid.xAxis.dataLabels.show && !e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? (s(), i("g", {
+            key: 2,
+            ref_key: "timeLabelsEls",
+            ref: H
+          }, [
+            (s(!0), i(V, null, B(ht.value, (l, o) => (s(), i("g", null, [
+              c("text", {
+                class: "vue-data-ui-time-label",
+                transform: `translate(${n.value.left + v.value * o + v.value / 2}, ${n.value.bottom + d.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": d.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)
+            ]))), 256))
+          ], 512)) : p("", !0),
+          e.value.style.layout.grid.xAxis.dataLabels.show && e.value.style.layout.grid.xAxis.dataLabels.datetimeFormatter.enable ? (s(), i("g", {
+            key: 3,
+            ref_key: "timeLabelsEls",
+            ref: H
+          }, [
+            (s(!0), i(V, null, B(R.value, (l, o) => (s(), i("g", null, [
+              c("text", {
+                class: "vue-data-ui-time-label",
+                transform: `translate(${n.value.left + v.value * o + v.value / 2}, ${n.value.bottom + d.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": d.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)
+            ]))), 256))
+          ], 512)) : p("", !0),
+          c("g", null, [
+            (s(!0), i(V, null, B(k.value, (l, o) => (s(), i("g", null, [
+              c("rect", {
+                x: l.open.x - e.value.style.layout.wick.strokeWidth / 2,
+                y: l.high.y,
+                width: e.value.style.layout.wick.strokeWidth,
+                height: Math.abs(l.high.y - l.low.y),
+                fill: e.value.style.layout.wick.stroke,
+                stroke: "none",
+                rx: e.value.style.layout.wick.strokeWidth / 2,
+                class: L({ "vue-data-ui-transition": $.value && !u(z) })
+              }, null, 10, $l),
+              e.value.style.layout.wick.extremity.shape === "circle" ? (s(), i("g", zl, [
+                c("circle", {
+                  cx: l.high.x,
+                  cy: l.high.y,
+                  r: e.value.style.layout.wick.extremity.size === "auto" ? v.value / 20 : e.value.style.layout.wick.extremity.size,
+                  fill: e.value.style.layout.wick.extremity.color,
+                  class: L({ "vue-data-ui-transition": $.value && !u(z) })
+                }, null, 10, Ll),
+                c("circle", {
+                  cx: l.low.x,
+                  cy: l.low.y,
+                  r: e.value.style.layout.wick.extremity.size === "auto" ? v.value / 20 : e.value.style.layout.wick.extremity.size,
+                  fill: e.value.style.layout.wick.extremity.color,
+                  class: L({ "vue-data-ui-transition": $.value && !u(z) })
+                }, null, 10, Sl)
+              ])) : p("", !0),
+              e.value.style.layout.wick.extremity.shape === "line" ? (s(), i("g", Tl, [
+                c("rect", {
+                  x: l.high.x - (e.value.style.layout.wick.extremity.size === "auto" ? v.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" ? v.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" ? v.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2)),
+                  height: e.value.style.layout.wick.strokeWidth,
+                  rx: e.value.style.layout.wick.strokeWidth / 2,
+                  fill: e.value.style.layout.wick.extremity.color,
+                  stroke: "none",
+                  class: L({ "vue-data-ui-transition": $.value && !u(z) })
+                }, null, 10, Il),
+                c("rect", {
+                  x: l.low.x - (e.value.style.layout.wick.extremity.size === "auto" ? v.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" ? v.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" ? v.value * e.value.style.layout.candle.widthRatio : e.value.style.layout.wick.extremity.size) / 2)),
+                  height: e.value.style.layout.wick.strokeWidth,
+                  fill: e.value.style.layout.wick.extremity.color,
+                  stroke: "none",
+                  rx: e.value.style.layout.wick.strokeWidth / 2,
+                  class: L({ "vue-data-ui-transition": $.value && !u(z) })
+                }, null, 10, Fl)
+              ])) : p("", !0)
+            ]))), 256))
+          ]),
+          c("g", null, [
+            (s(!0), i(V, null, B(k.value, (l, o) => (s(), i("rect", {
+              x: l.open.x - v.value / 2 + v.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: v.value * e.value.style.layout.candle.widthRatio <= 0 ? 1e-4 : v.value * e.value.style.layout.candle.widthRatio,
+              fill: e.value.style.layout.candle.gradient.underlayer,
+              rx: e.value.style.layout.candle.borderRadius,
+              stroke: "none",
+              class: L({ "vue-data-ui-transition": $.value && !u(z) })
+            }, null, 10, Rl))), 256)),
+            (s(!0), i(V, null, B(k.value, (l, o) => (s(), i("rect", {
+              x: l.open.x - v.value / 2 + v.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: v.value * e.value.style.layout.candle.widthRatio <= 0 ? 1e-4 : v.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,
+              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: L({ "vue-data-ui-transition": $.value && !u(z) })
+            }, null, 10, Ol))), 256))
+          ]),
+          c("g", null, [
+            (s(!0), i(V, null, B(k.value, (l, o) => (s(), i("rect", {
+              x: n.value.left + o * v.value,
+              y: n.value.top,
+              height: n.value.height <= 0 ? 1e-4 : n.value.height,
+              width: v.value <= 0 ? 1e-4 : v.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))
+          ])
+        ])) : p("", !0),
+        b(t.$slots, "svg", { svg: d.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)
+      ])) : p("", !0),
+      e.value.style.zoom.show && te.value ? (s(), i("div", {
+        key: 5,
+        ref_key: "chartSlicer",
+        ref: Ae
+      }, [
+        (s(), N(ll, {
+          ref_key: "slicerComponent",
+          ref: Me,
+          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,
+          textColor: e.value.style.color,
+          inputColor: e.value.style.zoom.color,
+          selectColor: e.value.style.zoom.highlightColor,
+          max: G.value,
+          min: 0,
+          valueStart: y.value.start,
+          valueEnd: y.value.end,
+          start: y.value.start,
+          "onUpdate:start": a[0] || (a[0] = (l) => y.value.start = l),
+          end: y.value.end,
+          "onUpdate:end": a[1] || (a[1] = (l) => y.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,
+          enableRangeHandles: e.value.style.zoom.enableRangeHandles,
+          enableSelectionDrag: e.value.style.zoom.enableSelectionDrag,
+          onReset: bt
+        }, {
+          "reset-action": x(({ reset: l }) => [
+            b(t.$slots, "reset-action", P(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"]))
+      ], 512)) : p("", !0),
+      c("div", {
+        ref_key: "chartLegend",
+        ref: we
+      }, [
+        b(t.$slots, "legend", { legend: k.value }, void 0, !0)
+      ], 512),
+      t.$slots.source ? (s(), i("div", {
+        key: 6,
+        ref_key: "source",
+        ref: _e,
+        dir: "auto"
+      }, [
+        b(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : p("", !0),
+      Ye(u(st), {
+        show: _.value.showTooltip && ae.value,
+        backgroundColor: e.value.style.tooltip.backgroundColor,
+        color: e.value.style.tooltip.color,
+        borderRadius: e.value.style.tooltip.borderRadius,
+        borderColor: e.value.style.tooltip.borderColor,
+        borderWidth: e.value.style.tooltip.borderWidth,
+        fontSize: e.value.style.tooltip.fontSize,
+        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,
+        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-after": x(() => [
+          b(t.$slots, "tooltip-after", P(E({ ...ye.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)
+          }, {
+            th: x(({ th: l }) => [
+              Et(Q(l), 1)
+            ]),
+            td: x(({ td: l }) => [
+              c("div", { innerHTML: l }, null, 8, El)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"]))
+        ]),
+        _: 1
+      }, 8, ["config"])) : p("", !0),
+      u(z) ? (s(), N(el, { key: 8 })) : p("", !0)
+    ], 46, il));
+  }
+}, ea = /* @__PURE__ */ ul(Vl, [["__scopeId", "data-v-38d694dc"]]);
+export {
+  ea as default
+};