vue-data-ui 3.15.12 → 3.16.1

package/dist/vue-ui-bump-Brxpu4xV.js

@@ -0,0 +1,1147 @@
+import { defineAsyncComponent as V, computed as y, ref as d, toRefs as aa, onMounted as la, watch as de, shallowRef as et, onBeforeUnmount as tt, watchEffect as at, openBlock as r, createElementBlock as c, normalizeStyle as x, normalizeClass as lt, createElementVNode as W, toDisplayString as B, createBlock as U, createCommentVNode as b, unref as h, withCtx as g, renderSlot as f, normalizeProps as $, guardReactiveProps as S, createSlots as ot, createVNode as Se, Fragment as L, renderList as T, mergeProps as Ae, resolveDynamicComponent as oa, createTextVNode as nt, nextTick as na } from "vue";
+import { j as st, t as ut, m as sa, p as he, n as ua, o as rt, q as it, r as ra, s as ct, k as ia, l as ca, W as vt, a9 as R, c as va, b as da, I as ha, X as ya, Z as Te, a0 as fa, a1 as pa } from "./lib-DBptbyyI.js";
+import { t as dt, u as ma } from "./useResponsive-DfdjqQps.js";
+import { u as ga } from "./useConfig-DO94Aj5s.js";
+import { u as ba, B as ka } from "./BaseScanner-BhhkKVoj.js";
+import { u as Ca } from "./usePrinter-CEpYU3r5.js";
+import { u as wa } from "./useSvgExport-ByUukOZt.js";
+import { u as Me } from "./useNestedProp-Bf5XFbs8.js";
+import { u as La } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as xa } from "./useTimeLabels-C-A2uZKi.js";
+import { u as $a } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Sa } from "./useChartAccessibility-9icAAmYg.js";
+import { u as Aa } from "./useTimeLabelCollider-CIsgDrl9.js";
+import Ta from "./vue_ui_bump-CIht647H.js";
+import Ma from "./Title-BeMKE1cj.js";
+import { A as Pa } from "./A11yDataTable-KcVAX2cP.js";
+import Ia from "./BaseDraggableDialog-CIb-iD9g.js";
+import { _ as za } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Oa = ["id"], Ra = ["id"], _a = { style: { position: "relative" } }, Da = ["xmlns", "aria-describedby", "viewBox"], Na = ["x", "y", "width", "height"], Ha = ["d", "stroke", "stroke-width", "onMouseenter"], Ea = ["d", "stroke", "stroke-width", "onMouseenter", "onMouseleave", "onClick"], Fa = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onMouseenter", "onMouseleave", "onClick"], Va = ["x", "y", "fill", "font-size"], Wa = ["onMouseenter", "onMouseleave", "onClick"], Ba = ["x", "y", "fill", "font-size"], Ua = ["x", "y", "fill", "font-size", "font--weight", "innerHTML", "onMouseenter", "onMouseleave", "onClick"], Xa = ["x", "y", "fill", "font-size", "font--weight", "innerHTML", "onMouseenter", "onMouseleave", "onClick"], Ya = { key: 0 }, ja = { key: 1 }, qa = ["text-anchor", "font-size", "font-weight", "fill", "transform"], Ga = ["text-anchor", "font-size", "fill", "transform", "innerHTML"], Ka = {
+  key: 0,
+  style: { position: "absolute", top: "100%", left: "0", width: "100%" },
+  "data-dom-to-png-ignore": "",
+  "aria-hidden": "true"
+}, Za = {
+  key: 5,
+  class: "vue-data-ui-watermark"
+}, Ja = ["innerHTML"], Qa = {
+  __name: "vue-ui-bump",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["copyAlt"],
+  setup(ht, { expose: yt, emit: ft }) {
+    const pt = V(() => import("./BaseIcon-Cb3zzG6s.js")), mt = V(() => import("./vue-ui-accordion-nvggWcGN.js")), gt = V(() => import("./DataTable-DT2kIdQ6.js")), bt = V(() => import("./PenAndPaper-Ct3qJ4lA.js")), kt = V(() => import("./UserOptions-rW2fRf3V.js")), Ct = V(() => import("./PackageVersion-DPO-OOVI.js")), { vue_ui_bump: wt } = ga(), { isThemeValid: Lt, warnInvalidTheme: xt } = La(), w = ht, $t = ft, le = y({
+      get() {
+        return !!w.dataset && w.dataset.length;
+      },
+      set(t) {
+        return t;
+      }
+    }), M = d(null), N = d(st()), Pe = d(0), Ie = d(null), ze = d(null), Oe = d(null), oe = d(!1), ye = d(!1), Re = d(0), St = d(0), X = d(null), fe = d(null), _e = d(!1), ne = d(!1), se = d(!1), p = d(null), pe = d(null), me = d(null), ge = d(null), P = d(null), be = d(!1), e = d(ke()), Y = y(() => e.value.userOptions.useCursorPointer), At = y(() => ut({
+      defaultConfig: {
+        userOptions: { show: !1 },
+        style: {
+          chart: {
+            backgroundColor: "#99999930",
+            layout: {
+              timeLabels: { show: !1 },
+              lines: {
+                coatingColor: "#4A4A4A"
+              },
+              plots: {
+                stroke: "#4A4A4A",
+                labels: {
+                  show: !1,
+                  displayedValue: "rank"
+                }
+              },
+              nameLabels: {
+                useSerieColor: !0
+              }
+            }
+          }
+        }
+      },
+      userConfig: e.value.skeletonConfig ?? {}
+    })), { loading: ue, FINAL_DATASET: Tt, manualLoading: re } = ba({
+      ...aa(w),
+      FINAL_CONFIG: e,
+      prepareConfig: ke,
+      skeletonDataset: w.config?.skeletonDataset ?? [
+        { name: "————", values: [1, 1, 1, 2, 2, 2, 3, 3, 2, 2], color: "#4A4A4A" },
+        { name: "————", values: [2, 2, 2, 1, 3, 3, 2, 2, 3, 3], color: "#6A6A6A" },
+        { name: "————", values: [3, 3, 3, 3, 1, 1, 1, 1, 1, 1], color: "#8A8A8A" }
+      ],
+      skeletonConfig: ut({
+        defaultConfig: e.value,
+        userConfig: At.value
+      })
+    });
+    la(We);
+    function ke() {
+      const t = Me({
+        userConfig: w.config,
+        defaultConfig: wt
+      });
+      let l = {};
+      const a = t.theme;
+      if (a)
+        if (!Lt.value(t))
+          xt(t), l = t;
+        else {
+          const o = Me({
+            userConfig: Ta[a] || w.config,
+            defaultConfig: t
+          });
+          l = {
+            ...Me({
+              userConfig: w.config,
+              defaultConfig: o
+            }),
+            customPalette: t.customPalette.length ? t.customPalette : sa[a] || he
+          };
+        }
+      else
+        l = t;
+      return l;
+    }
+    const { userOptionsVisible: Ce, setUserOptionsVisibility: De, keepUserOptionState: Ne } = $a({ config: e.value }), { svgRef: j } = Sa({ config: e.value.style.chart.title });
+    function Mt() {
+      _e.value = !0, De(!0);
+    }
+    function Pt() {
+      De(!1), _e.value = !1;
+    }
+    const _ = d({
+      showTable: e.value.table.show
+    });
+    de(e, () => {
+      _.value = {
+        showTable: e.value.table.show
+      };
+    }, { immediate: !0 }), de(() => w.config, (t) => {
+      ue.value || (e.value = ke()), Ce.value = !e.value.userOptions.showOnChartHover, We(), Re.value += 1, St.value += 1, _.value.showTable = e.value.table.show, A.value.width = e.value.style.chart.width, A.value.height = e.value.style.chart.height, A.value.paddingRatio = {
+        top: e.value.style.chart.padding.top / e.value.style.chart.height,
+        right: e.value.style.chart.padding.right / e.value.style.chart.width,
+        bottom: e.value.style.chart.padding.bottom / e.value.style.chart.height,
+        left: e.value.style.chart.padding.left / e.value.style.chart.width
+      };
+    }), de(() => w.dataset, (t) => {
+      Array.isArray(t) && t.length > 0 && (re.value = !1);
+    }, { deep: !0 });
+    const { isPrinting: we, isImaging: Le, generatePdf: He, generateImage: Ee } = Ca({
+      elementId: `bump_${N.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-bump",
+      options: e.value.userOptions.print
+    }), It = y(() => e.value.userOptions.show && !e.value.style.chart.title.text), A = d({
+      width: e.value.style.chart.width,
+      height: e.value.style.chart.height,
+      paddingRatio: {
+        top: e.value.style.chart.padding.top / e.value.style.chart.height,
+        right: e.value.style.chart.padding.right / e.value.style.chart.width,
+        bottom: e.value.style.chart.padding.bottom / e.value.style.chart.height,
+        left: e.value.style.chart.padding.left / e.value.style.chart.width
+      }
+    }), zt = y(() => ua(e.value.customPalette)), I = et(null), H = et(null), Fe = d(null), Ve = y(() => !!e.value.debug);
+    function We() {
+      if (rt(w.dataset) ? (it({
+        componentName: "VueUiBump",
+        type: "dataset",
+        debug: Ve.value
+      }), re.value = !0) : w.dataset.forEach((t, l) => {
+        ra({
+          datasetObject: t,
+          requiredAttributes: ["name", "values"]
+        }).forEach((a) => {
+          le.value = !1, it({
+            componentName: "VueUiBump",
+            type: "datasetSerieAttribute",
+            property: a,
+            index: l,
+            debug: Ve.value
+          }), re.value = !0;
+        });
+      }), rt(w.dataset) || (re.value = e.value.loading), setTimeout(() => {
+        ye.value = !0;
+      }, 10), e.value.responsive) {
+        const t = dt(() => {
+          ye.value = !1;
+          const { width: l, height: a } = ma({
+            chart: M.value,
+            noTitle: ze.value,
+            title: e.value.style.chart.title.text ? Ie.value : null,
+            legend: null,
+            slicer: null,
+            source: Oe.value
+          });
+          requestAnimationFrame(() => {
+            A.value.width = l, A.value.height = a - 12, clearTimeout(Fe.value), Fe.value = setTimeout(() => {
+              ye.value = !0;
+            }, 10);
+          });
+        });
+        I.value && (H.value && I.value.unobserve(H.value), I.value.disconnect()), I.value = new ResizeObserver(t), H.value = M.value.parentNode, I.value.observe(H.value);
+      }
+    }
+    tt(() => {
+      I.value && (H.value && I.value.unobserve(H.value), I.value.disconnect());
+    });
+    const ie = y(() => Tt.value.map((t, l) => {
+      const a = ct(t.color) || zt.value[l] || he[l] || he[l % he.length];
+      return {
+        ...t,
+        absoluteIndex: l,
+        id: st(),
+        color: a
+      };
+    })), E = y(() => Math.max(...ie.value.map((t) => t.values.length)));
+    function Ot(t) {
+      const l = t.map(() => Array(E.value).fill(null));
+      for (let a = 0; a < E.value; a += 1) {
+        const o = t.map((n, s) => ({
+          seriesIndex: s,
+          value: n.values?.[a],
+          previousPosition: a > 0 ? l[s][a - 1] : s
+        })).filter((n) => Number.isFinite(n.value));
+        o.sort((n, s) => s.value !== n.value ? s.value - n.value : n.previousPosition - s.previousPosition);
+        for (let n = 0; n < o.length; n += 1) {
+          const s = o[n];
+          l[s.seriesIndex][a] = n;
+        }
+      }
+      return l;
+    }
+    function Rt() {
+      let t = 0;
+      return pe.value && (t = Array.from(pe.value.querySelectorAll("tspan")).reduce((a, o) => {
+        const n = o.getComputedTextLength();
+        return n > a ? n : a;
+      }, 0)), t;
+    }
+    function _t() {
+      let t = 0;
+      return me.value && (t = Array.from(me.value.querySelectorAll("tspan")).reduce((a, o) => {
+        const n = o.getComputedTextLength();
+        return n > a ? n : a;
+      }, 0)), t;
+    }
+    const Be = d(0), Dt = dt((t) => {
+      Be.value = t;
+    }, 100);
+    at((t) => {
+      const l = ge.value;
+      if (!l) return;
+      const a = new ResizeObserver((o) => {
+        Dt(o[0].contentRect.height);
+      });
+      a.observe(l), t(() => a.disconnect());
+    }), tt(() => {
+      Be.value = 0;
+    });
+    const Nt = y(() => {
+      const t = e.value.style.chart.layout.timeLabels;
+      if (!t.show) return 0;
+      const l = t.fontSize, a = t.rotation, o = Math.PI / 180 * a, n = q.value || [];
+      if (!n.length) return 0;
+      const s = n.reduce((te, ae) => {
+        const ve = String(ae?.text ?? "").split(`
+`).length;
+        return Math.max(te, ve);
+      }, 1), u = n.reduce((te, ae) => {
+        const Qt = String(ae?.text ?? "").split(`
+`).reduce((ea, ta) => Math.max(ea, ta.length), 0);
+        return Math.max(te, Qt);
+      }, 0), v = l * 1.3, m = s * v, k = u * l * (u === 1 ? 1 : 0.6), O = Math.abs(Math.sin(o)) * k + Math.abs(Math.cos(o)) * m, ee = l * 0.3;
+      return Math.max(0, O + Math.abs(t.offsetY) + ee);
+    }), i = y(() => {
+      const { height: t, width: l } = A.value, { right: a, left: o } = A.value.paddingRatio;
+      let n = Rt(), s = _t();
+      const u = e.value.style.chart.padding.top, v = l - l * a - s, m = l * o + n, k = l - l * a - l * o - n - s, O = t - u - e.value.style.chart.padding.bottom - Nt.value, ee = u + O, te = u + O, ae = Math.max(0, t), ve = Math.max(0, l);
+      return {
+        chartHeight: te,
+        chartWidth: ve,
+        top: u,
+        right: Math.max(0, v),
+        bottom: Math.max(0, ee),
+        left: Math.max(0, m),
+        width: Math.max(0, k),
+        height: Math.max(0, O),
+        unitH: Math.max(0, O) / ie.value.length,
+        unitW: Math.max(0, k) / E.value,
+        svgHeight: ae
+      };
+    }), C = y(() => {
+      if (!le.value && !ue.value) return [];
+      const t = Ot(ie.value);
+      return ie.value.map((l, a) => ({
+        ...l,
+        positions: t[a]
+      })).map((l) => {
+        const a = l.positions.map((s, u) => {
+          const v = ia(
+            e.value.style.chart.layout.plots.labels.formatter,
+            l.values[u],
+            ca({
+              p: e.value.style.chart.layout.plots.labels.prefix,
+              v: l.values[u],
+              s: e.value.style.chart.layout.plots.labels.suffix,
+              r: e.value.style.chart.layout.plots.labels.rounding
+            })
+          );
+          return {
+            name: l.name,
+            id: l.id,
+            x: i.value.left + u * i.value.unitW + i.value.unitW / 2,
+            y: i.value.top + s * i.value.unitH + i.value.unitH / 2,
+            value: l.values[u],
+            displayValue: v,
+            rank: l.positions[u] + 1,
+            color: l.color,
+            labelColor: e.value.style.chart.layout.plots.labels.color === "auto" ? vt(l.color) : ct(e.value.style.chart.layout.plots.labels.color) ?? vt(l.color)
+          };
+        }), o = a.filter((s) => R(s.value)), n = e.value.style.chart.layout.lines.smooth ? va(o) : da(o);
+        return {
+          ...l,
+          coordinates: a,
+          path: n
+        };
+      });
+    });
+    y(() => C.value.flatMap((t, l) => t.coordinates.map((a, o) => ({
+      ...a,
+      pointIndex: o,
+      seriesIndex: l,
+      seriesId: t.id,
+      seriesName: t.name,
+      pointId: `${t.id}_${o}`
+    })).filter((a) => R(a.value))));
+    function Ue(t, l, a, o) {
+      const n = t.toSorted((u, v) => u.y - v.y);
+      for (let u = 1; u < n.length; u += 1) {
+        const v = n[u - 1], m = n[u];
+        m.y < v.y + l && (m.y = v.y + l);
+      }
+      const s = n.length - 1;
+      if (s >= 0 && n[s].y > o) {
+        n[s].y = o;
+        for (let u = s - 1; u >= 0; u -= 1) {
+          const v = n[u + 1], m = n[u];
+          m.y > v.y - l && (m.y = v.y - l);
+        }
+      }
+      if (n.length && n[0].y < a) {
+        const u = a - n[0].y;
+        for (let v = 0; v < n.length; v += 1)
+          n[v].y += u;
+      }
+      return n;
+    }
+    const Xe = y(() => {
+      const t = [], l = [];
+      C.value.forEach((m) => {
+        const k = m.coordinates.filter((ee) => Number.isFinite(ee.rank));
+        if (!k.length) return;
+        t.push({ ...k[0] });
+        const O = k[k.length - 1];
+        l.push({ ...O });
+      });
+      const a = e.value.style.chart.layout.nameLabels.fontSize, o = a * 1.4, n = i.value.top + a, s = i.value.bottom - a, u = Ue(
+        l,
+        o,
+        n,
+        s
+      );
+      return {
+        left: Ue(
+          t,
+          o,
+          n,
+          s
+        ),
+        right: u
+      };
+    });
+    function Ht(t) {
+      const l = e.value.style.chart.layout.plots.labels.fontSize * 0.4, a = t.displayValue, o = a.length * (e.value.style.chart.layout.plots.labels.fontSize * (a.length === 1 ? 1 : 0.6)), n = e.value.style.chart.layout.plots.labels.fontSize, s = o + l * 2, u = n + l * 2, v = t.x - s / 2, m = t.y - u / 2, k = e.value.style.chart.layout.plots.strokeWidth;
+      return {
+        x: v - k / 2,
+        y: m - k / 2,
+        width: s + k,
+        height: u + k,
+        fill: t.color,
+        stroke: e.value.style.chart.layout.plots.stroke,
+        "stroke-width": k,
+        rx: u / 2
+      };
+    }
+    const D = d([]);
+    let Ye = 0;
+    at(() => {
+      const t = ++Ye, l = e.value.style.chart.layout.timeLabels, a = l.values, o = l.datetimeFormatter, n = E.value;
+      if (!n || !Array.isArray(a) || a.length === 0) {
+        D.value = [];
+        return;
+      }
+      (async () => {
+        const s = await xa({
+          values: a,
+          maxDatapoints: n,
+          formatter: o,
+          start: 0,
+          end: n
+        });
+        t === Ye && (D.value = s);
+      })();
+    });
+    const Et = y(() => {
+      const t = e.value.style.chart.layout.timeLabels.modulo;
+      return D.value.length ? Math.min(t, [...new Set(D.value.map((l) => l.text))].length) : t;
+    }), q = y(() => {
+      const t = e.value.style.chart.layout.timeLabels, l = D.value || [], a = D.value || [], o = 0, n = null, s = E.value, u = l.map((m) => m?.text ?? ""), v = a.map((m) => m?.text ?? "");
+      return ha(
+        !!t.showOnlyFirstAndLast,
+        !!t.showOnlyAtModulo,
+        Math.max(1, Et.value || 1),
+        u,
+        v,
+        o,
+        n,
+        s
+      );
+    }), Ft = y(() => A.value.width), Vt = y(() => A.value.height), Wt = y(() => ({
+      start: 0,
+      end: E.value
+    })), G = y(() => [...C.value].map((t) => {
+      const l = [...t.coordinates].filter((a) => R(a.value)).at(-1);
+      return {
+        ...t,
+        navigationRank: l?.rank ?? Number.POSITIVE_INFINITY
+      };
+    }).sort((t, l) => t.navigationRank - l.navigationRank));
+    function Bt() {
+      P.value = null, be.value = !0;
+    }
+    function Ut() {
+      qe(), be.value = !1;
+    }
+    function je(t, l) {
+      const a = G.value.length;
+      return a ? t === null || t < 0 || t >= a ? 0 : l === "previous" ? (t - 1 + a) % a : (t + 1) % a : null;
+    }
+    function qe() {
+      if (P.value !== null) {
+        const t = G.value[P.value];
+        t && F(t);
+      }
+      P.value = null, p.value = null;
+    }
+    function Xt(t) {
+      if (!j.value || Z.value || document.activeElement !== j.value || !G.value.length) return;
+      const l = ["ArrowLeft", "ArrowUp"].includes(t.key), a = ["ArrowRight", "ArrowDown"].includes(t.key), o = t.key === "Enter" || t.key === " ", n = t.key === "Escape";
+      if (!l && !a && !o && !n) return;
+      if (t.preventDefault(), t.stopPropagation(), n) {
+        qe();
+        return;
+      }
+      if (o) {
+        if (P.value === null) return;
+        const v = G.value[P.value];
+        if (!v) return;
+        ce(v);
+        return;
+      }
+      let s = P.value;
+      s === null ? s = 0 : l ? s = je(s, "previous") : a && (s = je(s, "next"));
+      const u = G.value[s];
+      u && (P.value = s, z(u, u));
+    }
+    const K = y(() => ({
+      head: Q.value.head,
+      body: C.value.map((t) => [
+        t.name,
+        ...t.coordinates.map((l) => R(l.value) ? `${l.displayValue} (${l.rank})` : "-")
+      ]),
+      caption: e.value.a11y.translations.tableCaption,
+      notice: e.value.a11y.translations.tableAvailable
+    }));
+    Aa({
+      timeLabelsEls: ge,
+      timeLabels: D,
+      slicer: Wt,
+      configRef: e,
+      rotationPath: ["style", "chart", "layout", "timeLabels", "rotation"],
+      autoRotatePath: ["style", "chart", "layout", "timeLabels", "autoRotate", "enable"],
+      isAutoSize: !1,
+      width: Ft,
+      height: Vt,
+      rotation: e.value.style.chart.layout.timeLabels.autoRotate.angle
+    });
+    const Z = d(!1);
+    function xe() {
+      Z.value = !Z.value;
+    }
+    function Ge(t) {
+      oe.value = t, Pe.value += 1;
+    }
+    function Ke() {
+      _.value.showTable = !_.value.showTable;
+    }
+    de(() => _.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && X.value ? X.value.open() : "close" in X.value && X.value.close());
+    });
+    function Ze() {
+      _.value.showTable = !1, fe.value && fe.value.setTableIconState(!1);
+    }
+    function Yt() {
+      return C.value;
+    }
+    function $e(t = null) {
+      const l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], a = ["", ...q.value.map((v) => v?.text ?? "")], o = C.value.map((v) => [
+        v.name,
+        ...v.coordinates.map((m) => `${m.displayValue}`)
+      ]), n = C.value.map((v) => [
+        v.name,
+        ...v.coordinates.map((m) => `${m.rank}`)
+      ]), s = l.concat([[e.value.table.columnNames.values]]).concat([a]).concat(o).concat([[""], [e.value.table.columnNames.ranking], [a]]).concat(n), u = fa(s);
+      t ? t(u) : pa({ csvContent: u, title: e.value.style.chart.title.text || "vue-ui-bump" });
+    }
+    const J = y(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, l = _.value.showTable;
+      return {
+        component: t ? Ia : mt,
+        title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
+        props: t ? {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          headerColor: e.value.table.th.color,
+          headerBg: e.value.table.th.backgroundColor,
+          isFullscreen: oe.value,
+          fullscreenParent: M.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8),
+          isCursorPointer: Y.value
+        } : {
+          hideDetails: !0,
+          config: {
+            open: l,
+            maxHeight: 1e4,
+            body: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            },
+            head: {
+              backgroundColor: e.value.style.chart.backgroundColor,
+              color: e.value.style.chart.color
+            }
+          }
+        }
+      };
+    }), Q = y(() => {
+      const t = [""].concat(q.value.map((n) => n.text)), l = C.value.map((n, s) => [
+        n.name,
+        ...n.coordinates.map((u) => `${u.displayValue} (${u.rank})`)
+      ]), 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
+      }, o = [e.value.table.columnNames.series];
+      return { head: t, body: l, config: a, colNames: o };
+    }), jt = y(() => e.value.style.chart.backgroundColor), qt = y(() => e.value.style.chart.title), { exportSvg: Gt, getSvg: Kt } = wa({
+      svg: j,
+      title: qt,
+      legend: null,
+      legendItems: null,
+      backgroundColor: jt
+    });
+    async function Je({ isCb: t }) {
+      se.value = !0, await na();
+      try {
+        if (t) {
+          const { blob: l, url: a, text: o, dataUrl: n } = await Kt();
+          await Promise.resolve(e.value.userOptions.callbacks.svg({ blob: l, url: a, text: o, dataUrl: n }));
+        } else
+          await Promise.resolve(Gt());
+      } finally {
+        se.value = !1;
+      }
+    }
+    async function Zt({ scale: t = 2 } = {}) {
+      if (!M.value) return;
+      const { width: l, height: a } = M.value.getBoundingClientRect(), o = l / a, { imageUri: n, base64: s } = await img({ domElement: M.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: n,
+        base64: s,
+        title: e.value.style.chart.title.text,
+        width: l,
+        height: a,
+        aspectRatio: o
+      };
+    }
+    function z(t, l) {
+      p.value = l.id, e.value.events.datapointEnter && e.value.events.datapointEnter({
+        datapoint: t,
+        seriesIndex: t?.pointIndex ?? null
+      });
+    }
+    function F(t, l) {
+      p.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({
+        datapoint: t,
+        seriesIndex: t?.pointIndex ?? null
+      });
+    }
+    function ce(t, l) {
+      e.value.events.datapointClick && e.value.events.datapointClick({
+        datapoint: t,
+        seriesIndex: t?.pointIndex ?? null
+      });
+    }
+    function Jt(t) {
+      if (t?.stage === "start") {
+        ne.value = !0;
+        return;
+      }
+      if (t?.stage === "end") {
+        ne.value = !1;
+        return;
+      }
+      Ee();
+    }
+    async function Qe() {
+      if ($t("copyAlt", {
+        config: e.value,
+        dataset: C.value
+      }), !e.value.userOptions.callbacks.altCopy) {
+        console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
+        return;
+      }
+      await Promise.resolve(e.value.userOptions.callbacks.altCopy({
+        config: e.value,
+        dataset: C.value
+      }));
+    }
+    return yt({
+      getData: Yt,
+      getImage: Zt,
+      generatePdf: He,
+      generateCsv: $e,
+      generateImage: Ee,
+      generateSvg: Je,
+      toggleTable: Ke,
+      toggleAnnotator: xe,
+      toggleFullscreen: Ge,
+      copyAlt: Qe
+    }), (t, l) => (r(), c("div", {
+      id: `bump_${N.value}`,
+      ref_key: "bumpChart",
+      ref: M,
+      class: lt({ "vue-data-ui-component": !0, "vue-ui-bump": !0, "vue-data-ui-wrapper-fullscreen": oe.value }),
+      style: x(`background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color};font-family:${e.value.style.fontFamily}; position: relative; ${e.value.responsive ? "height: 100%" : ""}`),
+      onMouseenter: Mt,
+      onMouseleave: Pt
+    }, [
+      W("p", {
+        id: `chart-instructions-${N.value}`,
+        class: "sr-only"
+      }, B(e.value.a11y.translations.keyboardNavigation), 9, Ra),
+      K.value.body.length ? (r(), U(Pa, {
+        key: 0,
+        uid: N.value,
+        head: K.value.head,
+        body: K.value.body,
+        caption: K.value.caption,
+        notice: K.value.notice
+      }, null, 8, ["uid", "head", "body", "caption", "notice"])) : b("", !0),
+      e.value.userOptions.buttons.annotator ? (r(), U(h(bt), {
+        key: 1,
+        svgRef: h(j),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: Z.value,
+        isCursorPointer: Y.value,
+        onClose: xe
+      }, {
+        "annotator-action-close": g(() => [
+          f(t.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": g(({ color: a }) => [
+          f(t.$slots, "annotator-action-color", $(S({ color: a })), void 0, !0)
+        ]),
+        "annotator-action-draw": g(({ mode: a }) => [
+          f(t.$slots, "annotator-action-draw", $(S({ mode: a })), void 0, !0)
+        ]),
+        "annotator-action-undo": g(({ disabled: a }) => [
+          f(t.$slots, "annotator-action-undo", $(S({ disabled: a })), void 0, !0)
+        ]),
+        "annotator-action-redo": g(({ disabled: a }) => [
+          f(t.$slots, "annotator-action-redo", $(S({ disabled: a })), void 0, !0)
+        ]),
+        "annotator-action-delete": g(({ disabled: a }) => [
+          f(t.$slots, "annotator-action-delete", $(S({ disabled: a })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : b("", !0),
+      f(t.$slots, "userConfig", {}, void 0, !0),
+      It.value ? (r(), c("div", {
+        key: 2,
+        ref_key: "noTitle",
+        ref: ze,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : b("", !0),
+      e.value.style.chart.title.text ? (r(), c("div", {
+        key: 3,
+        ref_key: "chartTitle",
+        ref: Ie,
+        style: "width:100%;background:transparent;"
+      }, [
+        (r(), U(Ma, {
+          key: `title_${Re.value}`,
+          config: {
+            title: {
+              cy: "bump-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "bump-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : b("", !0),
+      e.value.userOptions.show && le.value && (h(Ne) || h(Ce)) ? (r(), U(h(kt), {
+        ref_key: "userOptionsRef",
+        ref: fe,
+        key: `user_option_${Pe.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: h(we),
+        isImaging: h(Le),
+        uid: N.value,
+        hasTooltip: !1,
+        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,
+        hasLabel: !1,
+        hasAltCopy: e.value.userOptions.buttons.altCopy,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullcreen: oe.value,
+        chartElement: M.value,
+        position: e.value.userOptions.position,
+        titles: { ...e.value.userOptions.buttonTitles },
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: Z.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        tableDialog: e.value.table.useDialog,
+        isCursorPointer: Y.value,
+        onToggleFullscreen: Ge,
+        onGeneratePdf: h(He),
+        onGenerateCsv: $e,
+        onGenerateImage: Jt,
+        onGenerateSvg: Je,
+        onToggleTable: Ke,
+        onToggleAnnotator: xe,
+        onCopyAlt: Qe,
+        style: x({
+          visibility: h(Ne) ? h(Ce) ? "visible" : "hidden" : "visible"
+        })
+      }, ot({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: g(({ isOpen: a, color: o }) => [
+            f(t.$slots, "menuIcon", $(S({ isOpen: a, color: o })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: g(() => [
+            f(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: g(() => [
+            f(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: g(() => [
+            f(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: g(() => [
+            f(t.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: g(() => [
+            f(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: g(({ toggleFullscreen: a, isFullscreen: o }) => [
+            f(t.$slots, "optionFullscreen", $(S({ toggleFullscreen: a, isFullscreen: o })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: g(({ toggleAnnotator: a, isAnnotator: o }) => [
+            f(t.$slots, "optionAnnotator", $(S({ toggleAnnotator: a, isAnnotator: o })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        t.$slots.optionAltCopy ? {
+          name: "optionAltCopy",
+          fn: g(({ altCopy: a }) => [
+            f(t.$slots, "optionAltCopy", $(S({ altCopy: a })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasAltCopy", "hasFullscreen", "isFullcreen", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : b("", !0),
+      W("div", _a, [
+        (r(), c("svg", {
+          ref_key: "svgRef",
+          ref: j,
+          xmlns: h(ya),
+          "aria-describedby": `chart-instructions-${N.value}`,
+          viewBox: `0 0 ${i.value.chartWidth <= 0 ? 10 : i.value.chartWidth} ${i.value.svgHeight <= 0 ? 10 : i.value.svgHeight}`,
+          class: lt({ "vue-data-ui-loading": h(ue), "no-transition": !e.value.useCssAnimation, "with-transition": e.value.useCssAnimation }),
+          style: x(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`),
+          role: "img",
+          "aria-live": "polite",
+          preserveAspectRatio: "xMidYMid",
+          tabindex: "0",
+          onFocus: Bt,
+          onBlur: Ut,
+          onKeydown: Xt
+        }, [
+          Se(h(Ct)),
+          t.$slots["chart-background"] ? (r(), c("foreignObject", {
+            key: 0,
+            x: i.value.left,
+            y: i.value.top,
+            width: i.value.width <= 0 ? 10 : i.value.width,
+            height: i.value.height <= 0 ? 10 : i.value.height,
+            style: {
+              pointerEvents: "none"
+            }
+          }, [
+            f(t.$slots, "chart-background", {}, void 0, !0)
+          ], 8, Na)) : b("", !0),
+          (r(!0), c(L, null, T(C.value, (a) => (r(), c(L, null, [
+            W("path", {
+              class: "transition-opacity",
+              d: `M${a.path}`,
+              stroke: e.value.style.chart.layout.lines.coatingColor,
+              "stroke-width": e.value.style.chart.layout.lines.strokeWidth + 2,
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              fill: "none",
+              style: x({
+                opacity: p.value == null || p.value === a.id ? 1 : 0.1
+              }),
+              onMouseenter: (o) => p.value = a.id,
+              onMouseleave: l[0] || (l[0] = (o) => p.value = null)
+            }, null, 44, Ha),
+            W("path", {
+              class: "transition-opacity",
+              d: `M${a.path}`,
+              stroke: a.color,
+              "stroke-width": e.value.style.chart.layout.lines.strokeWidth,
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              fill: "none",
+              style: x({
+                opacity: p.value == null || p.value === a.id ? 1 : 0.1
+              }),
+              onMouseenter: (o) => z(a, a),
+              onMouseleave: (o) => F(a),
+              onClick: (o) => ce(a)
+            }, null, 44, Ea)
+          ], 64))), 256)),
+          (r(!0), c(L, null, T(C.value, (a) => (r(), c(L, null, [
+            e.value.style.chart.layout.plots.labels.displayedValue === "rank" ? (r(!0), c(L, { key: 0 }, T(a.coordinates, (o, n) => (r(), c("circle", {
+              class: "transition-opacity",
+              cx: o.x,
+              cy: o.y,
+              r: e.value.style.chart.layout.plots.radius,
+              fill: a.color,
+              stroke: e.value.style.chart.layout.plots.stroke,
+              "stroke-width": e.value.style.chart.layout.plots.strokeWidth,
+              style: x({
+                opacity: p.value == null || p.value === a.id ? 1 : 0.1
+              }),
+              onMouseenter: (s) => z({ ...o, pointIndex: n }, a),
+              onMouseleave: (s) => F({ ...o, pointIndex: n }),
+              onClick: (s) => z({ ...o, pointIndex: n }, a)
+            }, null, 44, Fa))), 256)) : b("", !0),
+            e.value.style.chart.layout.plots.labels.show && e.value.style.chart.layout.plots.labels.displayedValue === "rank" ? (r(!0), c(L, { key: 1 }, T(a.coordinates, (o) => (r(), c("text", {
+              class: "transition-opacity",
+              x: o.x,
+              y: o.y + e.value.style.chart.layout.plots.labels.fontSize / 3,
+              fill: o.labelColor,
+              "font-size": e.value.style.chart.layout.plots.labels.fontSize,
+              "text-anchor": "middle",
+              style: x({
+                userSelect: "none",
+                pointerEvents: "none",
+                opacity: p.value == null || p.value === a.id ? 1 : 0.1
+              })
+            }, B(o.rank), 13, Va))), 256)) : b("", !0),
+            e.value.style.chart.layout.plots.labels.displayedValue === "value" ? (r(!0), c(L, { key: 2 }, T(a.coordinates, (o) => (r(), c(L, null, [
+              h(R)(o.value) ? (r(), c("rect", Ae({
+                key: 0,
+                class: "transition-opacity"
+              }, { ref_for: !0 }, Ht(o), {
+                style: {
+                  opacity: p.value == null || p.value === a.id ? 1 : 0.1
+                },
+                onMouseenter: (n) => z({ ...t.point, pointIndex: t.i }, a),
+                onMouseleave: (n) => F({ ...t.point, pointIndex: t.i }),
+                onClick: (n) => z({ ...t.point, pointIndex: t.i }, a)
+              }), null, 16, Wa)) : b("", !0),
+              h(R)(o.value) && e.value.style.chart.layout.plots.labels.show ? (r(), c("text", {
+                key: 1,
+                class: "transition-opacity",
+                x: o.x,
+                y: o.y + e.value.style.chart.layout.plots.labels.fontSize / 3,
+                fill: o.labelColor,
+                "font-size": e.value.style.chart.layout.plots.labels.fontSize,
+                "text-anchor": "middle",
+                style: x({
+                  userSelect: "none",
+                  pointerEvents: "none",
+                  opacity: p.value == null || p.value === a.id ? 1 : 0.1
+                })
+              }, B(o.displayValue), 13, Ba)) : b("", !0)
+            ], 64))), 256)) : b("", !0)
+          ], 64))), 256)),
+          e.value.style.chart.layout.nameLabels.leftLabels.show ? (r(), c("g", {
+            key: 1,
+            ref_key: "labelsLeft",
+            ref: pe
+          }, [
+            (r(!0), c(L, null, T(Xe.value.left.filter((a) => h(R)(a.value)), (a, o) => (r(), c("text", {
+              class: "transition-opacity",
+              x: i.value.left,
+              y: a.y + e.value.style.chart.layout.nameLabels.fontSize / 3,
+              fill: e.value.style.chart.layout.nameLabels.useSerieColor ? a.color : e.value.style.chart.layout.nameLabels.color,
+              "font-size": e.value.style.chart.layout.nameLabels.fontSize,
+              "font--weight": e.value.style.chart.layout.nameLabels.bold ? "bold" : "normal",
+              "text-anchor": "end",
+              innerHTML: h(Te)({
+                content: a.name,
+                fontSize: e.value.style.chart.layout.nameLabels.fontSize,
+                fill: e.value.style.chart.layout.nameLabels.useSerieColor ? a.color : e.value.style.chart.layout.nameLabels.color,
+                x: i.value.left - e.value.style.chart.layout.nameLabels.offsetX,
+                y: a.y + e.value.style.chart.layout.nameLabels.fontSize / 3,
+                translateY: !0
+              }),
+              style: x({
+                opacity: p.value == null || p.value === a.id ? 1 : 0.1
+              }),
+              onMouseenter: (n) => z(a, a),
+              onMouseleave: (n) => F(a),
+              onClick: (n) => ce(a)
+            }, null, 44, Ua))), 256))
+          ], 512)) : b("", !0),
+          e.value.style.chart.layout.nameLabels.rightLabels.show ? (r(), c("g", {
+            key: 2,
+            ref_key: "labelsRight",
+            ref: me
+          }, [
+            (r(!0), c(L, null, T(Xe.value.right.filter((a) => h(R)(a.value)), (a, o) => (r(), c("text", {
+              class: "transition-opacity",
+              x: i.value.right,
+              y: a.y + e.value.style.chart.layout.nameLabels.fontSize / 3,
+              fill: e.value.style.chart.layout.nameLabels.useSerieColor ? a.color : e.value.style.chart.layout.nameLabels.color,
+              "font-size": e.value.style.chart.layout.nameLabels.fontSize,
+              "font--weight": e.value.style.chart.layout.nameLabels.bold ? "bold" : "normal",
+              "text-anchor": "start",
+              innerHTML: h(Te)({
+                content: a.name,
+                fontSize: e.value.style.chart.layout.nameLabels.fontSize,
+                fill: e.value.style.chart.layout.nameLabels.useSerieColor ? a.color : e.value.style.chart.layout.nameLabels.color,
+                x: i.value.right + e.value.style.chart.layout.nameLabels.offsetX,
+                y: a.y + e.value.style.chart.layout.nameLabels.fontSize / 3,
+                translateY: !0
+              }),
+              style: x({
+                opacity: p.value == null || p.value === a.id ? 1 : 0.1
+              }),
+              onMouseenter: (n) => z(a, a),
+              onMouseleave: (n) => F(a),
+              onClick: (n) => ce(a)
+            }, null, 44, Xa))), 256))
+          ], 512)) : b("", !0),
+          e.value.style.chart.layout.timeLabels.show ? (r(), c("g", {
+            key: 3,
+            ref_key: "timeLabelsEls",
+            ref: ge
+          }, [
+            t.$slots["time-label"] ? (r(), c("g", Ya, [
+              (r(!0), c(L, null, T(q.value, (a, o) => (r(), c("g", null, [
+                f(t.$slots, "time-label", Ae({ ref_for: !0 }, {
+                  x: i.value.unitW * o + i.value.unitW / 2 + i.value.left,
+                  y: i.value.chartHeight + e.value.style.chart.layout.timeLabels.offsetY,
+                  fontSize: e.value.style.chart.layout.timeLabels.fontSize,
+                  fill: e.value.style.chart.layout.timeLabels.color,
+                  transform: `translate(${i.value.unitW * o + i.value.unitW / 2 + i.value.left}, ${i.value.chartHeight + e.value.style.chart.layout.timeLabels.offsetY}), rotate(${e.value.style.chart.layout.timeLabels.rotation})`,
+                  absoluteIndex: a.absoluteIndex,
+                  content: a.text,
+                  textAnchor: e.value.style.chart.layout.timeLabels.rotation > 0 ? "start" : e.value.style.chart.layout.timeLabels.rotation < 0 ? "end" : "middle",
+                  show: !0
+                }), void 0, !0)
+              ]))), 256))
+            ])) : (r(), c("g", ja, [
+              (r(!0), c(L, null, T(q.value, (a, o) => (r(), c("g", null, [
+                String(a.text).includes(`
+`) ? (r(), c("text", {
+                  key: o + "-multi",
+                  "text-anchor": e.value.style.chart.layout.timeLabels.rotation > 0 ? "start" : e.value.style.chart.layout.timeLabels.rotation < 0 ? "end" : "middle",
+                  "font-size": e.value.style.chart.layout.timeLabels.fontSize,
+                  fill: e.value.style.chart.layout.timeLabels.color,
+                  transform: `
+                                        translate(
+                                        ${i.value.unitW * o + i.value.unitW / 2 + i.value.left},
+                                        ${i.value.chartHeight + e.value.style.chart.layout.timeLabels.fontSize * 1.3 + e.value.style.chart.layout.timeLabels.offsetY}
+                                        ),
+                                        rotate(${e.value.style.chart.layout.timeLabels.rotation})
+                                    `,
+                  innerHTML: h(Te)({
+                    content: String(a.text),
+                    fontSize: e.value.style.chart.layout.timeLabels.fontSize,
+                    fill: e.value.style.chart.layout.timeLabels.color,
+                    x: 0,
+                    y: 0
+                  })
+                }, null, 8, Ga)) : (r(), c("text", {
+                  class: "vue-data-ui-time-label",
+                  key: o,
+                  "text-anchor": e.value.style.chart.layout.timeLabels.rotation > 0 ? "start" : e.value.style.chart.layout.timeLabels.rotation < 0 ? "end" : "middle",
+                  "font-size": e.value.style.chart.layout.timeLabels.fontSize,
+                  "font-weight": e.value.style.chart.layout.timeLabels.bold ? "bold" : "normal",
+                  fill: e.value.style.chart.layout.timeLabels.color,
+                  transform: `translate(${i.value.unitW * o + i.value.unitW / 2 + i.value.left}, ${i.value.chartHeight + e.value.style.chart.layout.timeLabels.offsetY}), rotate(${e.value.style.chart.layout.timeLabels.rotation})`
+                }, B(a.text), 9, qa))
+              ]))), 256))
+            ]))
+          ], 512)) : b("", !0),
+          f(t.$slots, "svg", {
+            svg: {
+              drawingArea: i.value,
+              data: C.value,
+              isPrintingImg: h(we) | h(Le) | ne.value,
+              isPrintingSvg: se.value
+            }
+          }, void 0, !0)
+        ], 46, Da)),
+        t.$slots.hint ? (r(), c("div", Ka, [
+          f(t.$slots, "hint", $(S({ hint: e.value.a11y.translations.keyboardNavigation, isVisible: be.value })), void 0, !0)
+        ])) : b("", !0)
+      ]),
+      t.$slots.watermark ? (r(), c("div", Za, [
+        f(t.$slots, "watermark", $(S({ isPrinting: h(we) || h(Le) || ne.value || se.value })), void 0, !0)
+      ])) : b("", !0),
+      le.value && e.value.userOptions.buttons.table ? (r(), U(oa(J.value.component), Ae({ key: 6 }, J.value.props, {
+        ref_key: "tableUnit",
+        ref: X,
+        onClose: Ze
+      }), ot({
+        content: g(() => [
+          Se(h(gt), {
+            colNames: Q.value.colNames,
+            head: Q.value.head,
+            body: Q.value.body,
+            config: Q.value.config,
+            title: e.value.table.useDialog ? "" : J.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            isCursorPointer: Y.value,
+            onClose: Ze
+          }, {
+            th: g(({ th: a }) => [
+              W("div", { innerHTML: a }, null, 8, Ja)
+            ]),
+            td: g(({ td: a }) => [
+              nt(B(a), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton", "isCursorPointer"])
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: g(() => [
+            nt(B(J.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: g(() => [
+            W("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: l[1] || (l[1] = (a) => $e(e.value.userOptions.callbacks.csv)),
+              style: x({ cursor: Y.value ? "pointer" : "default" })
+            }, [
+              Se(h(pt), {
+                name: "fileCsv",
+                stroke: J.value.props.color
+              }, null, 8, ["stroke"])
+            ], 4)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : b("", !0),
+      t.$slots.source ? (r(), c("div", {
+        key: 7,
+        ref_key: "source",
+        ref: Oe,
+        dir: "auto"
+      }, [
+        f(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : b("", !0),
+      f(t.$slots, "skeleton", {}, () => [
+        h(ue) ? (r(), U(ka, { key: 0 })) : b("", !0)
+      ], !0)
+    ], 46, Oa));
+  }
+}, gl = /* @__PURE__ */ za(Qa, [["__scopeId", "data-v-027add95"]]);
+export {
+  gl as default
+};