vue-data-ui 3.15.12 → 3.16.1

package/dist/vue-ui-radar-Cmo3p-UA.js

@@ -0,0 +1,1139 @@
+import { defineAsyncComponent as x, computed as p, ref as u, toRefs as aa, watch as $e, shallowRef as ut, onMounted as oa, onBeforeUnmount as la, openBlock as s, createElementBlock as c, unref as i, normalizeStyle as ae, normalizeClass as oe, createElementVNode as b, toDisplayString as R, createBlock as S, createCommentVNode as f, withCtx as d, renderSlot as g, normalizeProps as w, guardReactiveProps as $, createSlots as it, createVNode as re, Fragment as U, renderList as E, Teleport as na, resolveDynamicComponent as sa, mergeProps as ra, createTextVNode as Te, nextTick as Ae } from "vue";
+import { j as ua, t as ct, m as ia, p as M, o as ca, q as W, n as va, s as vt, A as dt, K as da, l as j, k as Pe, X as pa, u as _e, v as ga, ah as pt, r as gt, a0 as ha, a1 as fa, T as ya, U as ma } from "./lib-DBptbyyI.js";
+import { t as ba, u as ka } from "./useResponsive-DfdjqQps.js";
+import { u as Ca } from "./useConfig-DO94Aj5s.js";
+import { u as wa, B as $a } from "./BaseScanner-BhhkKVoj.js";
+import { u as Ta } from "./usePrinter-CEpYU3r5.js";
+import { u as Aa } from "./useSvgExport-ByUukOZt.js";
+import { u as Se } from "./useNestedProp-Bf5XFbs8.js";
+import { u as Pa } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as _a } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Sa } from "./useChartAccessibility-9icAAmYg.js";
+import { u as Oa } from "./useAutoSizeLabelsInsideViewbox-DX7LdvFX.js";
+import Ia from "./img-LXxMLmCg.js";
+import xa from "./Title-BeMKE1cj.js";
+import Fa from "./Legend-CS7Xo5LK.js";
+import Na from "./vue_ui_radar-DryGBOrz.js";
+import { A as La } from "./A11yDataTable-KcVAX2cP.js";
+import { B as Ra } from "./BaseLegendToggle-BQVIawmA.js";
+import { _ as Da } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Va = ["id"], za = ["id"], Ba = ["id"], Ua = { style: { position: "relative" } }, Ea = ["xmlns", "aria-describedby", "viewBox"], Ma = ["width", "height"], Wa = ["id"], Ga = ["stop-color"], Xa = ["stop-color"], Ka = { key: 1 }, Ya = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], ja = { key: 0 }, qa = ["d", "stroke", "stroke-width"], Ha = ["d", "stroke", "stroke-width"], Ja = { key: 2 }, Qa = ["x", "y", "text-anchor", "font-size", "fill", "onMouseenter", "onMouseleave", "onClick"], Za = ["points", "stroke", "stroke-width"], eo = ["points", "stroke", "stroke-width", "fill"], to = { key: 3 }, ao = ["cx", "cy", "fill", "r", "stroke"], oo = {
+  key: 0,
+  style: { position: "absolute", top: "100%", left: "0", width: "100%" },
+  "data-dom-to-png-ignore": "",
+  "aria-hidden": "true"
+}, lo = {
+  key: 5,
+  class: "vue-data-ui-watermark"
+}, no = ["id"], so = ["onClick"], ro = {
+  key: 0,
+  style: { "max-width": "200px", margin: "0 auto" }
+}, uo = {
+  class: "vue-ui-radar-tooltip-datalabel",
+  style: { width: "100%" }
+}, io = { class: "vue-ui-radar-tooltip-datalabel-name" }, co = { key: 0 }, vo = {
+  __name: "vue-ui-radar",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  emits: ["selectLegend", "copyAlt"],
+  setup(ht, { expose: ft, emit: yt }) {
+    const mt = x(() => import("./Tooltip-Bf-kM3_A.js")), bt = x(() => import("./BaseIcon-Cb3zzG6s.js")), kt = x(() => import("./vue-ui-sparkbar-BbYj56c3.js")), Ct = x(() => import("./vue-ui-accordion-nvggWcGN.js")), wt = x(() => import("./DataTable-DT2kIdQ6.js")), $t = x(() => import("./PenAndPaper-Ct3qJ4lA.js")), Tt = x(() => import("./UserOptions-rW2fRf3V.js")), At = x(() => import("./PackageVersion-DPO-OOVI.js")), Pt = x(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_radar: _t } = Ca(), { isThemeValid: St, warnInvalidTheme: Ot } = Pa(), O = ht, Oe = p(() => !!O.dataset && Object.keys(O.dataset).length), m = u(ua()), q = u(!1), ue = u(""), Ie = u(0), I = u(null), xe = u(null), Fe = u(null), Ne = u(null), Le = u(null), Re = u(0), De = u(0), Ve = u(0), ze = u(!1), H = u(null), ie = u(null), le = u(!1), ne = u(!1), A = u(null), Be = u({ x: 0, y: 0 }), J = u("pointer"), ce = u(!1), e = u(pe()), D = p(() => e.value.userOptions.useCursorPointer), It = p(() => ct({
+      defaultConfig: {
+        userOptions: { show: !1 },
+        table: { show: !1 },
+        useCssAnimation: !1,
+        style: {
+          chart: {
+            backgroundColor: "#99999930",
+            layout: {
+              grid: {
+                stroke: "#6A6A6A90"
+              },
+              labels: {
+                dataLabels: { show: !1 }
+              },
+              outerPolygon: {
+                stroke: "#6A6A6A"
+              }
+            },
+            legend: {
+              backgroundColor: "transparent"
+            }
+          }
+        }
+      },
+      userConfig: e.value.skeletonConfig ?? {}
+    })), { loading: ve, FINAL_DATASET: V } = wa({
+      ...aa(O),
+      FINAL_CONFIG: e,
+      prepareConfig: pe,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          await Ae(), k.value.showTable = e.value.table.show;
+        });
+      },
+      skeletonDataset: O.config?.skeletonDataset ?? {
+        categories: [{ name: "_", color: "#6A6A6A" }],
+        series: [
+          { name: "_", values: [0.6], target: 1 },
+          { name: "_", values: [0.6], target: 1 },
+          { name: "_", values: [0.6], target: 1 },
+          { name: "_", values: [0.6], target: 1 },
+          { name: "_", values: [0.6], target: 1 },
+          { name: "_", values: [0.6], target: 1 }
+        ]
+      },
+      skeletonConfig: ct({
+        defaultConfig: e.value,
+        userConfig: It.value
+      })
+    }), { userOptionsVisible: de, setUserOptionsVisibility: Ue, keepUserOptionState: Ee } = _a({ config: e.value }), { svgRef: F } = Sa({ config: e.value.style.chart.title });
+    function pe() {
+      const t = Se({
+        userConfig: O.config,
+        defaultConfig: _t
+      }), o = t.theme;
+      if (!o) return t;
+      if (!St.value(t))
+        return Ot(t), t;
+      const a = Se({
+        userConfig: Na[o] || O.config,
+        defaultConfig: t
+      }), l = Se({
+        userConfig: O.config,
+        defaultConfig: a
+      });
+      return {
+        ...l,
+        customPalette: l.customPalette.length ? l.customPalette : ia[o] || M
+      };
+    }
+    $e(() => O.config, (t) => {
+      e.value = pe(), de.value = !e.value.userOptions.showOnChartHover, Me(), Re.value += 1, De.value += 1, Ve.value += 1, k.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, k.value.showTable = e.value.table.show, k.value.showTooltip = e.value.style.chart.tooltip ? e.value.style.chart.tooltip.show : !1;
+    }, { deep: !0 });
+    const N = ut(null), G = ut(null), z = p(() => e.value.debug);
+    function Me() {
+      if (ca(O.dataset) && W({
+        componentName: "VueUiRadar",
+        type: "dataset",
+        debug: z.value
+      }), e.value.responsive) {
+        const t = ba(() => {
+          const { width: o, height: a } = ka({
+            chart: I.value,
+            title: e.value.style.chart.title.text ? xe.value : null,
+            legend: e.value.style.chart.legend.show ? Fe.value : null,
+            source: Ne.value,
+            noTitle: Le.value
+          });
+          requestAnimationFrame(() => {
+            v.value.width = o, v.value.height = a, Je();
+          });
+        });
+        N.value && (G.value && N.value.unobserve(G.value), N.value.disconnect()), N.value = new ResizeObserver(t), G.value = I.value.parentNode, N.value.observe(G.value);
+      }
+      Je();
+    }
+    oa(() => {
+      ze.value = !0, Me();
+    }), la(() => {
+      N.value && (G.value && N.value.unobserve(G.value), N.value.disconnect());
+    });
+    const { isPrinting: ge, isImaging: he, generatePdf: We, generateImage: Ge } = Ta({
+      elementId: `vue-ui-radar_${m.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-radar",
+      options: e.value.userOptions.print
+    }), xt = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), Xe = p(() => va(e.value.customPalette)), k = u({
+      dataLabels: {
+        show: e.value.style.chart.layout.labels.dataLabels.show
+      },
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.chart.tooltip.show
+    }), Ft = p(() => ({
+      style: {
+        backgroundColor: "#FFFFFF00",
+        animation: {
+          show: e.value.style.chart.tooltip.animation.show,
+          animationFrames: e.value.style.chart.tooltip.animation.animationFrames
+        },
+        labels: {
+          fontSize: e.value.style.chart.tooltip.fontSize,
+          name: {
+            color: e.value.style.chart.tooltip.color
+          }
+        },
+        gutter: {
+          backgroundColor: "#CCCCCC",
+          opacity: 30
+        }
+      }
+    })), v = u({
+      height: 312,
+      width: 512
+    }), Ke = yt, h = u([]), Q = u(null), X = u(!1);
+    function Nt() {
+      h.value.length ? h.value = [] : _.value.forEach((t, o) => {
+        h.value.push(o);
+      });
+    }
+    function se(t) {
+      X.value = !0, h.value.includes(t) ? (Q.value = t, h.value = h.value.filter((o) => o !== t), setTimeout(() => {
+        X.value = !1, Q.value = null;
+      }, 500)) : (h.value.push(t), setTimeout(() => {
+        X.value = !1;
+      }, 500)), Ke("selectLegend", _.value.filter((o, a) => !h.value.includes(a)).map((o) => ({
+        name: o.name,
+        color: o.color,
+        proportion: o.totalProportion
+      })));
+    }
+    function Lt() {
+      return _.value.map((t) => ({
+        name: t.name,
+        color: t.color,
+        proportion: t.totalProportion
+      }));
+    }
+    function Rt() {
+      const t = V.value;
+      if ([null, void 0].includes(t?.categories)) {
+        W({
+          componentName: "VueUiRadar",
+          type: "dataset",
+          debug: z.value
+        }), W({
+          componentName: "VueUiRadar",
+          type: "datasetAttribute",
+          property: "categories ({ name: string; prefix?: string; suffix?: string}[])",
+          debug: z.value
+        });
+        return;
+      }
+      t.categories.length === 0 ? W({
+        componentName: "VueUiRadar",
+        type: "datasetAttributeEmpty",
+        property: "categories",
+        debug: z.value
+      }) : t.categories.forEach((o, a) => {
+        gt({
+          datasetObject: o,
+          requiredAttributes: ["name"]
+        }).forEach((l) => {
+          W({
+            componentName: "VueUiRadar",
+            type: "datasetAttribute",
+            property: `category.${l} at index ${a}`,
+            index: a,
+            debug: z.value
+          });
+        });
+      }), [null, void 0].includes(t?.series) ? W({
+        componentName: "VueUiRadar",
+        type: "datasetAttribute",
+        property: "series ({ name: string; values: number[]; color?: string; target: number}[])",
+        debug: z.value
+      }) : t.series.forEach((o, a) => {
+        gt({
+          datasetObject: o,
+          requiredAttributes: ["name", "values", "target"]
+        }).forEach((l) => {
+          W({
+            componentName: "VueUiRadar",
+            type: "datasetSerieAttribute",
+            key: "series",
+            property: l,
+            index: a,
+            debug: z.value
+          });
+        });
+      });
+    }
+    $e(
+      () => V.value,
+      () => Rt(),
+      { deep: !0, immediate: !0 }
+    );
+    const P = p(() => {
+      const t = Array.isArray(V.value?.categories) ? V.value.categories : [], o = Xe.value ?? M;
+      return t.map((a, l) => ({
+        name: a?.name ?? "",
+        categoryId: `radar_category_${m.value}_${l}`,
+        color: vt(a?.color) || o[l] || M[l % M.length],
+        prefix: a?.prefix ?? "",
+        suffix: a?.suffix ?? ""
+      }));
+    }), T = p(() => V.value.series.map((t, o) => ({
+      ...t,
+      color: vt(t.color) || Xe.value[o] || M[o] || M[o % M.length],
+      serieId: `radar_serie_${m.value}_${o}`,
+      formatter: t.formatter || null,
+      absoluteIndex: o
+    })));
+    function Ye(t) {
+      if (!T.value.length)
+        return e.value.debug && console.warn("VueUiRadar - There are no series to show."), null;
+      const o = _.value.find((a) => a.name === t);
+      return o || (e.value.debug && console.warn(`VueUiRadar - Series name not found "${t}"`), null);
+    }
+    function Dt(t) {
+      const o = Ye(t);
+      o !== null && h.value.includes(o.absoluteIndex) && se(o.absoluteIndex);
+    }
+    function Vt(t) {
+      const o = Ye(t);
+      o !== null && (h.value.includes(o.absoluteIndex) || se(o.absoluteIndex));
+    }
+    const je = p(() => Math.max(...T.value.flatMap((t) => t.values))), qe = p(() => T.value.length), fe = p(() => Math.min(v.value.width, v.value.height) / 3), He = p(() => dt({
+      plot: { x: v.value.width / 2, y: v.value.height / 2 },
+      radius: fe.value,
+      sides: qe.value,
+      rotation: 0
+    })), zt = p(() => {
+      const t = [];
+      for (let o = 0; o < fe.value; o += fe.value / e.value.style.chart.layout.grid.graduations)
+        t.push(o);
+      return t;
+    }), y = p(() => He.value.coordinates.map((t, o) => {
+      const a = T.value[o].values.map((l) => Ut({
+        centerX: v.value.width / 2,
+        centerY: v.value.height / 2,
+        apexX: t.x,
+        apexY: t.y,
+        proportion: l / (T.value[o].target || je.value)
+      }));
+      return {
+        ...t,
+        ...T.value[o],
+        plots: a
+      };
+    }).map((t) => ({
+      ...t,
+      labelX: ye(t).x,
+      labelY: ye(t).y,
+      labelAnchor: ye(t).anchor
+    })));
+    function ye({ x: t, y: o }) {
+      let a = "middle";
+      return t = Math.round(t), o = Math.round(o), t > v.value.width / 2 && (t += 12, a = "start"), t < v.value.width / 2 && (t -= 12, a = "end"), o > v.value.height / 2 + 1 && (o += 20), o < v.value.height / 2 - 1 && (o -= 12), o === v.value.height / 2 && (o += 4), { x: t, y: o, anchor: a };
+    }
+    const Bt = p({
+      get: () => e.value.style.chart.layout.labels.dataLabels.fontSize,
+      set: (t) => t
+    }), { autoSizeLabels: Je } = Oa({
+      svgRef: F,
+      fontSize: e.value.style.chart.layout.labels.dataLabels.fontSize,
+      minFontSize: 6,
+      sizeRef: Bt,
+      labelClass: ".vue-ui-radar-apex-label"
+    });
+    function Ut({ centerX: t, centerY: o, apexX: a, apexY: l, proportion: r }) {
+      return {
+        x: t + (a - t) * r,
+        y: o + (l - o) * r
+      };
+    }
+    const _ = p(() => {
+      const t = T.value.map((o, a) => o.values.map((l) => l / (o.target || je.value)));
+      return P.value.map((o, a) => {
+        const l = da(t.map((r) => r[a]).reduce((r, n) => r + n, 0) / T.value.length);
+        return {
+          ...o,
+          absoluteIndex: a,
+          totalProportion: l,
+          shape: "circle",
+          opacity: h.value.includes(a) ? 0.5 : 1,
+          segregate: () => se(a),
+          isSegregated: h.value.includes(a),
+          display: `${o.name}: ${j({
+            v: (l ?? 0) * 100,
+            s: "%",
+            r: e.value.style.chart.legend.roundingPercentage
+          })}`
+        };
+      });
+    }), Et = p(() => ({
+      cy: "radar-div-legend",
+      backgroundColor: e.value.style.chart.legend.backgroundColor,
+      color: e.value.style.chart.legend.color,
+      fontSize: e.value.style.chart.legend.fontSize,
+      paddingBottom: 12,
+      fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
+    })), K = p(() => {
+      const t = [
+        { name: e.value.translations.datapoint, color: "" },
+        { name: e.value.translations.target, color: "" },
+        ..._.value
+      ], o = V.value.series.map((l) => [
+        l.name,
+        Pe(
+          l.formatter,
+          l.target,
+          j({
+            p: l.prefix,
+            v: l.target,
+            s: l.suffix,
+            r: e.value.table.td.roundingValue
+          })
+        ),
+        ...l.values.map((r, n) => `${Pe(
+          l.formatter,
+          r,
+          j({ p: P.value[n]?.prefix ?? "", v: r, s: P.value[n]?.suffix ?? "", r: e.value.table.td.roundingValue })
+        )} (${isNaN(r / l.target) ? "" : j({
+          v: r / l.target * 100,
+          s: "%",
+          r: e.value.table.td.roundingPercentage
+        })})`)
+      ]), 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
+      };
+      return { head: t, body: o, config: a, colNames: t };
+    }), Y = u(null), me = u([]), be = u(null);
+    function Mt(t, o) {
+      q.value = !1, Y.value = null, A.value = null, J.value = "pointer", e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: o });
+    }
+    function Qe(t, o) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: o });
+    }
+    function Ze(t, o, a = "pointer") {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: o }), J.value = a, A.value = o;
+      const l = P.value.slice();
+      me.value = [], Y.value = o, q.value = !0, be.value = {
+        datapoint: t,
+        seriesIndex: o,
+        series: {
+          categories: l,
+          datapoints: T.value,
+          radar: y.value
+        },
+        config: e.value
+      };
+      const r = e.value.style.chart.tooltip.customFormat;
+      if (ya(r) && ma(() => r({
+        seriesIndex: o,
+        datapoint: t,
+        series: { categories: l, datapoints: T.value, radar: y.value },
+        config: e.value
+      }))) {
+        ue.value = r({
+          seriesIndex: o,
+          datapoint: t,
+          series: { categories: l, datapoints: T.value, radar: y.value },
+          config: e.value
+        });
+        return;
+      }
+      ue.value = `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`;
+      for (let n = 0; n < t.values.length; n += 1)
+        if (!h.value.includes(n)) {
+          const C = l[n], L = t.values[n], te = isNaN(L / t.target) ? 0 : L / t.target * 100, st = Pe(
+            t.formatter,
+            L,
+            j({
+              p: P.value[n].prefix,
+              v: L,
+              s: P.value[n].suffix,
+              r: e.value.style.chart.tooltip.roundingValue
+            }),
+            { datapoint: t }
+          ), rt = j({
+            v: te,
+            s: "%",
+            r: e.value.style.chart.tooltip.roundingPercentage
+          }), ta = e.value.style.chart.tooltip.showValue && e.value.style.chart.tooltip.showPercentage ? `${st} (${rt})` : e.value.style.chart.tooltip.showValue && !e.value.style.chart.tooltip.showPercentage ? st : !e.value.style.chart.tooltip.showValue && e.value.style.chart.tooltip.showPercentage ? `${rt}` : "";
+          me.value.push({
+            name: C?.name ?? `#${n + 1}`,
+            value: t.values[n] / t.target * 100,
+            color: C?.color,
+            suffix: ta,
+            prefix: "",
+            rounding: e.value.style.chart.tooltip.roundingPercentage,
+            formatter: t.formatter
+          });
+        }
+    }
+    function ke(t = null) {
+      Ae(() => {
+        const o = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], a = [[""], [e.value.translations.target], ..._.value.flatMap((C) => [[C.name], ["%"]])], l = V.value.series.map((C, L) => [C.name, C.target, ...C.values.flatMap((te) => [
+          te,
+          isNaN(te / C.target) ? "" : te / C.target * 100
+        ])]), r = o.concat([a]).concat(l), n = ha(r);
+        t ? t(n) : fa({ csvContent: n, title: e.value.style.chart.title.text || "vue-ui-radar" });
+      });
+    }
+    const B = u(!1);
+    function et(t) {
+      B.value = t, Ie.value += 1;
+    }
+    function tt() {
+      k.value.showTable = !k.value.showTable;
+    }
+    function at() {
+      k.value.showTooltip = !k.value.showTooltip;
+    }
+    const Z = u(!1);
+    function Ce() {
+      Z.value = !Z.value;
+    }
+    async function Wt({ scale: t = 2 } = {}) {
+      if (!I.value) return;
+      const { width: o, height: a } = I.value.getBoundingClientRect(), l = o / a, { imageUri: r, base64: n } = await Ia({ domElement: I.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: r,
+        base64: n,
+        title: e.value.style.chart.title.text,
+        width: o,
+        height: a,
+        aspectRatio: l
+      };
+    }
+    const ee = p(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, o = k.value.showTable;
+      return {
+        component: t ? Pt : Ct,
+        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: B.value,
+          fullscreenParent: I.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8),
+          isCursorPointer: D.value
+        } : {
+          hideDetails: !0,
+          config: {
+            open: o,
+            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
+            }
+          }
+        }
+      };
+    });
+    $e(() => k.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && H.value ? H.value.open() : "close" in H.value && H.value.close());
+    });
+    function ot() {
+      k.value.showTable = !1, ie.value && ie.value.setTableIconState(!1);
+    }
+    const Gt = p(() => _.value.map((t) => ({
+      ...t,
+      name: t.display
+    }))), Xt = p(() => e.value.style.chart.backgroundColor), Kt = p(() => e.value.style.chart.legend), Yt = p(() => e.value.style.chart.title), { exportSvg: jt, getSvg: qt } = Aa({
+      svg: F,
+      title: Yt,
+      legend: Kt,
+      legendItems: Gt,
+      backgroundColor: Xt
+    });
+    async function lt({ isCb: t }) {
+      ne.value = !0, await Ae();
+      try {
+        if (t) {
+          const { blob: o, url: a, text: l, dataUrl: r } = await qt();
+          await Promise.resolve(e.value.userOptions.callbacks.svg({ blob: o, url: a, text: l, dataUrl: r }));
+        } else
+          await Promise.resolve(jt());
+      } finally {
+        ne.value = !1;
+      }
+    }
+    function Ht(t) {
+      if (t?.stage === "start") {
+        le.value = !0;
+        return;
+      }
+      if (t?.stage === "end") {
+        le.value = !1;
+        return;
+      }
+      Ge();
+    }
+    async function nt() {
+      if (Ke("copyAlt", {
+        config: e.value,
+        dataset: y.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: y.value
+      }));
+    }
+    function Jt() {
+      A.value = null, ce.value = !0;
+    }
+    function Qt() {
+      A.value = null, J.value = "pointer", q.value = !1, Y.value = null, ce.value = !1;
+    }
+    function Zt(t) {
+      if (!Number.isFinite(t) || !F.value) return;
+      const o = y.value[t];
+      if (!o) return;
+      const a = F.value.getBoundingClientRect();
+      Be.value = {
+        x: a.left + o.labelX / v.value.width * a.width,
+        y: a.top + o.labelY / v.value.height * a.height
+      };
+    }
+    function ea(t) {
+      if (!F.value || Z.value || document.activeElement !== F.value || !y.value.length) return;
+      const o = ["ArrowLeft", "ArrowUp"].includes(t.key), a = ["ArrowRight", "ArrowDown"].includes(t.key), l = t.key === "Enter" || t.key === " ", r = t.key === "Escape";
+      if (!o && !a && !l && !r) return;
+      if (t.preventDefault(), t.stopPropagation(), r) {
+        A.value = null, J.value = "pointer", q.value = !1, Y.value = null;
+        return;
+      }
+      if (l) {
+        if (A.value === null) return;
+        const L = y.value[A.value];
+        if (!L) return;
+        Qe(L, A.value);
+        return;
+      }
+      let n = A.value;
+      n === null || n < 0 || n >= y.value.length ? n = a ? 0 : y.value.length - 1 : a ? (n += 1, n >= y.value.length && (n = 0)) : o && (n -= 1, n < 0 && (n = y.value.length - 1));
+      const C = y.value[n];
+      C && (A.value = n, Zt(n), Ze(C, n, "keyboard"));
+    }
+    const we = p(() => {
+      const t = K.value?.colNames?.map((a) => a.name ?? a) ?? [], o = K.value?.body ?? [];
+      return { headers: t, rows: o };
+    });
+    return ft({
+      getData: Lt,
+      getImage: Wt,
+      generatePdf: We,
+      generateCsv: ke,
+      generateImage: Ge,
+      generateSvg: lt,
+      hideSeries: Vt,
+      showSeries: Dt,
+      toggleTable: tt,
+      toggleTooltip: at,
+      toggleAnnotator: Ce,
+      toggleFullscreen: et,
+      copyAlt: nt
+    }), (t, o) => (s(), c("div", {
+      class: oe(`vue-data-ui-component vue-ui-radar ${B.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      ref_key: "radarChart",
+      ref: I,
+      id: `vue-ui-radar_${m.value}`,
+      style: ae(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height: 100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      onMouseenter: o[2] || (o[2] = () => i(Ue)(!0)),
+      onMouseleave: o[3] || (o[3] = () => i(Ue)(!1))
+    }, [
+      b("div", {
+        id: `chart-instructions-${m.value}`,
+        class: "sr-only"
+      }, [
+        b("p", null, R(e.value.a11y.translations.keyboardNavigation), 1)
+      ], 8, za),
+      we.value?.rows?.length ? (s(), S(La, {
+        key: 0,
+        uid: m.value,
+        head: we.value.headers,
+        body: we.value.rows,
+        notice: e.value.a11y.translations.tableAvailable,
+        caption: e.value.a11y.translations.tableCaption
+      }, null, 8, ["uid", "head", "body", "notice", "caption"])) : f("", !0),
+      e.value.userOptions.buttons.annotator ? (s(), S(i($t), {
+        key: 1,
+        svgRef: i(F),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: Z.value,
+        isCursorPointer: D.value,
+        onClose: Ce
+      }, {
+        "annotator-action-close": d(() => [
+          g(t.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": d(({ color: a }) => [
+          g(t.$slots, "annotator-action-color", w($({ color: a })), void 0, !0)
+        ]),
+        "annotator-action-draw": d(({ mode: a }) => [
+          g(t.$slots, "annotator-action-draw", w($({ mode: a })), void 0, !0)
+        ]),
+        "annotator-action-undo": d(({ disabled: a }) => [
+          g(t.$slots, "annotator-action-undo", w($({ disabled: a })), void 0, !0)
+        ]),
+        "annotator-action-redo": d(({ disabled: a }) => [
+          g(t.$slots, "annotator-action-redo", w($({ disabled: a })), void 0, !0)
+        ]),
+        "annotator-action-delete": d(({ disabled: a }) => [
+          g(t.$slots, "annotator-action-delete", w($({ disabled: a })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : f("", !0),
+      xt.value ? (s(), c("div", {
+        key: 2,
+        ref_key: "noTitle",
+        ref: Le,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : f("", !0),
+      e.value.style.chart.title.text ? (s(), c("div", {
+        key: 3,
+        ref_key: "chartTitle",
+        ref: xe,
+        style: "width:100%;background:transparent;padding-bottom:12px"
+      }, [
+        (s(), S(xa, {
+          key: `title_${Re.value}`,
+          config: {
+            title: {
+              cy: "radar-div-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "radar-div-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : f("", !0),
+      b("div", {
+        id: `legend-top-${m.value}`
+      }, null, 8, Ba),
+      e.value.userOptions.show && Oe.value && (i(Ee) || i(de)) ? (s(), S(i(Tt), {
+        ref_key: "userOptionsRef",
+        ref: ie,
+        key: `user_options_${Ie.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isImaging: i(he),
+        isPrinting: i(ge),
+        uid: m.value,
+        hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasImg: e.value.userOptions.buttons.img,
+        hasSvg: e.value.userOptions.buttons.svg,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasTable: e.value.userOptions.buttons.table,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        hasAltCopy: e.value.userOptions.buttons.altCopy,
+        isFullscreen: B.value,
+        isTooltip: k.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: I.value,
+        position: e.value.userOptions.position,
+        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: D.value,
+        onToggleFullscreen: et,
+        onGeneratePdf: i(We),
+        onGenerateCsv: ke,
+        onGenerateImage: Ht,
+        onGenerateSvg: lt,
+        onToggleTable: tt,
+        onToggleTooltip: at,
+        onToggleAnnotator: Ce,
+        onCopyAlt: nt,
+        style: ae({
+          visibility: i(Ee) ? i(de) ? "visible" : "hidden" : "visible"
+        })
+      }, it({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: d(({ isOpen: a, color: l }) => [
+            g(t.$slots, "menuIcon", w($({ isOpen: a, color: l })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: d(() => [
+            g(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: d(() => [
+            g(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: d(() => [
+            g(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: d(() => [
+            g(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: d(() => [
+            g(t.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: d(() => [
+            g(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: d(({ toggleFullscreen: a, isFullscreen: l }) => [
+            g(t.$slots, "optionFullscreen", w($({ toggleFullscreen: a, isFullscreen: l })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: d(({ toggleAnnotator: a, isAnnotator: l }) => [
+            g(t.$slots, "optionAnnotator", w($({ toggleAnnotator: a, isAnnotator: l })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0,
+        t.$slots.optionAltCopy ? {
+          name: "optionAltCopy",
+          fn: d(({ altCopy: a }) => [
+            g(t.$slots, "optionAltCopy", w($({ altCopy: a })), void 0, !0)
+          ]),
+          key: "9"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasSvg", "hasXls", "hasTable", "hasFullscreen", "hasAltCopy", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : f("", !0),
+      b("div", Ua, [
+        (s(), c("svg", {
+          ref_key: "svgRef",
+          ref: F,
+          xmlns: i(pa),
+          "aria-describedby": `chart-instructions-${m.value}`,
+          class: oe({ "vue-data-ui-fullscreen--on": B.value, "vue-data-ui-fulscreen--off": !B.value }),
+          viewBox: `0 0 ${v.value.width <= 0 ? 10 : v.value.width} ${v.value.height <= 0 ? 10 : v.value.height}`,
+          style: ae(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color}`),
+          tabindex: "0",
+          onFocus: Jt,
+          onBlur: Qt,
+          onKeydown: ea
+        }, [
+          re(i(At)),
+          t.$slots["chart-background"] ? (s(), c("foreignObject", {
+            key: 0,
+            x: 0,
+            y: 0,
+            width: v.value.width <= 0 ? 10 : v.value.width,
+            height: v.value.height <= 0 ? 10 : v.value.height,
+            style: {
+              pointerEvents: "none"
+            }
+          }, [
+            g(t.$slots, "chart-background", {}, void 0, !0)
+          ], 8, Ma)) : f("", !0),
+          b("defs", null, [
+            (s(!0), c(U, null, E(P.value, (a, l) => (s(), c("radialGradient", {
+              cx: "50%",
+              cy: "50%",
+              r: "50%",
+              fx: "50%",
+              fy: "50%",
+              id: `radar_gradient_${m.value}_${l}`
+            }, [
+              b("stop", {
+                offset: "0%",
+                "stop-color": i(_e)(i(ga)(a.color, 0.05), e.value.style.chart.layout.dataPolygon.opacity)
+              }, null, 8, Ga),
+              b("stop", {
+                offset: "100%",
+                "stop-color": i(_e)(a.color, e.value.style.chart.layout.dataPolygon.opacity)
+              }, null, 8, Xa)
+            ], 8, Wa))), 256))
+          ]),
+          e.value.style.chart.layout.grid.show ? (s(), c("g", Ka, [
+            (s(!0), c(U, null, E(y.value, (a) => (s(), c("line", {
+              x1: v.value.width / 2,
+              y1: v.value.height / 2,
+              x2: a.x,
+              y2: a.y,
+              stroke: e.value.style.chart.layout.grid.stroke,
+              "stroke-width": e.value.style.chart.layout.grid.strokeWidth
+            }, null, 8, Ya))), 256)),
+            e.value.style.chart.layout.grid.graduations > 0 ? (s(), c("g", ja, [
+              (s(!0), c(U, null, E(zt.value, (a) => (s(), c("path", {
+                d: i(dt)({
+                  plot: { x: v.value.width / 2, y: v.value.height / 2 },
+                  radius: a,
+                  sides: qe.value,
+                  rotation: 0
+                }).path,
+                fill: "none",
+                stroke: e.value.style.chart.layout.grid.stroke,
+                "stroke-width": e.value.style.chart.layout.grid.strokeWidth
+              }, null, 8, qa))), 256))
+            ])) : f("", !0)
+          ])) : f("", !0),
+          b("path", {
+            d: He.value.path,
+            fill: "none",
+            stroke: e.value.style.chart.layout.outerPolygon.stroke,
+            "stroke-width": e.value.style.chart.layout.outerPolygon.strokeWidth,
+            "stroke-linejoin": "round",
+            "stroke-linecap": "round"
+          }, null, 8, Ha),
+          e.value.style.chart.layout.labels.dataLabels.show ? (s(), c("g", Ja, [
+            (s(!0), c(U, null, E(y.value, (a, l) => (s(), c("text", {
+              class: "vue-ui-radar-apex-label",
+              x: a.labelX,
+              y: a.labelY,
+              "text-anchor": a.labelAnchor,
+              "font-size": e.value.style.chart.layout.labels.dataLabels.fontSize,
+              fill: e.value.style.chart.layout.labels.dataLabels.color,
+              onMouseenter: (r) => Ze(a, l, "pointer"),
+              onMouseleave: (r) => Mt(a, l),
+              onClick: (r) => Qe(a, l)
+            }, R(a.name), 41, Qa))), 256))
+          ])) : f("", !0),
+          (s(!0), c(U, null, E(P.value, (a, l) => (s(), c("g", null, [
+            b("g", null, [
+              e.value.useCssAnimation || !e.value.useCssAnimation && !h.value.includes(l) ? (s(), c("polygon", {
+                key: 0,
+                points: i(pt)(y.value.map((r) => r.plots[l]), !1, !0),
+                stroke: e.value.style.chart.backgroundColor,
+                "stroke-width": e.value.style.chart.layout.dataPolygon.strokeWidth + 1,
+                fill: "none",
+                class: oe({ "animated-out": h.value.includes(l) && e.value.useCssAnimation, "animated-in": X.value && Q.value === l && e.value.useCssAnimation })
+              }, null, 10, Za)) : f("", !0),
+              e.value.useCssAnimation || !e.value.useCssAnimation && !h.value.includes(l) ? (s(), c("polygon", {
+                key: 1,
+                points: i(pt)(y.value.map((r) => r.plots[l]), !1, !0),
+                stroke: a.color,
+                "stroke-width": e.value.style.chart.layout.dataPolygon.strokeWidth,
+                fill: e.value.style.chart.layout.dataPolygon.transparent ? "transparent" : e.value.style.chart.layout.dataPolygon.useGradient ? `url(#radar_gradient_${m.value}_${l})` : i(_e)(a.color, e.value.style.chart.layout.dataPolygon.opacity),
+                class: oe({ "animated-out": h.value.includes(l) && e.value.useCssAnimation, "animated-in": X.value && Q.value === l && e.value.useCssAnimation })
+              }, null, 10, eo)) : f("", !0)
+            ])
+          ]))), 256)),
+          e.value.style.chart.layout.plots.show ? (s(), c("g", to, [
+            (s(!0), c(U, null, E(y.value, (a, l) => (s(), c("g", null, [
+              (s(!0), c(U, null, E(a.plots, (r, n) => (s(), c("circle", {
+                cx: r.x,
+                cy: r.y,
+                fill: h.value.includes(n) ? "transparent" : P.value[n] ? P.value[n].color : "transparent",
+                r: Y.value !== null && Y.value === l ? e.value.style.chart.layout.plots.radius * 1.6 : e.value.style.chart.layout.plots.radius,
+                stroke: h.value.includes(n) ? "transparent" : e.value.style.chart.backgroundColor,
+                "stroke-width": 0.5,
+                class: oe({ "animated-out": h.value.includes(n) && e.value.useCssAnimation, "animated-in": X.value && Q.value === n && e.value.useCssAnimation })
+              }, null, 10, ao))), 256))
+            ]))), 256))
+          ])) : f("", !0),
+          g(t.$slots, "svg", {
+            svg: {
+              ...v.value,
+              isPrintingImg: i(ge) | i(he) | le.value,
+              isPrintingSvg: ne.value
+            }
+          }, void 0, !0)
+        ], 46, Ea)),
+        t.$slots.hint ? (s(), c("div", oo, [
+          g(t.$slots, "hint", w($({ hint: e.value.a11y.translations.keyboardNavigation, isVisible: ce.value })), void 0, !0)
+        ])) : f("", !0)
+      ]),
+      t.$slots.watermark ? (s(), c("div", lo, [
+        g(t.$slots, "watermark", w($({ isPrinting: i(ge) || i(he) || le.value || ne.value })), void 0, !0)
+      ])) : f("", !0),
+      b("div", {
+        id: `legend-bottom-${m.value}`
+      }, null, 8, no),
+      ze.value ? (s(), S(na, {
+        key: 6,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${m.value}` : `#legend-bottom-${m.value}`
+      }, [
+        b("div", {
+          ref_key: "chartLegend",
+          ref: Fe
+        }, [
+          e.value.style.chart.legend.show ? (s(), S(Fa, {
+            key: `legend_${Ve.value}`,
+            legendSet: _.value,
+            config: Et.value,
+            isCursorPointer: D.value,
+            onClickMarker: o[0] || (o[0] = ({ i: a }) => se(a))
+          }, {
+            item: d(({ legend: a, index: l }) => [
+              i(ve) ? f("", !0) : (s(), c("div", {
+                key: 0,
+                onClick: (r) => a.segregate(),
+                style: ae(`opacity:${h.value.includes(l) ? 0.5 : 1}`)
+              }, R(a.display), 13, so))
+            ]),
+            legendToggle: d(() => [
+              _.value.length > 2 && e.value.style.chart.legend.selectAllToggle.show && !i(ve) ? (s(), S(Ra, {
+                key: 0,
+                backgroundColor: e.value.style.chart.legend.selectAllToggle.backgroundColor,
+                color: e.value.style.chart.legend.selectAllToggle.color,
+                fontSize: e.value.style.chart.legend.fontSize,
+                checked: h.value.length > 0,
+                isCursorPointer: D.value,
+                onToggle: Nt
+              }, null, 8, ["backgroundColor", "color", "fontSize", "checked", "isCursorPointer"])) : f("", !0)
+            ]),
+            _: 1
+          }, 8, ["legendSet", "config", "isCursorPointer"])) : g(t.$slots, "legend", {
+            key: 1,
+            legend: _.value
+          }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : f("", !0),
+      t.$slots.source ? (s(), c("div", {
+        key: 7,
+        ref_key: "source",
+        ref: Ne,
+        dir: "auto"
+      }, [
+        g(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : f("", !0),
+      re(i(mt), {
+        teleportTo: e.value.style.chart.tooltip.teleportTo,
+        show: k.value.showTooltip && q.value,
+        backgroundColor: e.value.style.chart.tooltip.backgroundColor,
+        color: e.value.style.chart.tooltip.color,
+        borderRadius: e.value.style.chart.tooltip.borderRadius,
+        borderColor: e.value.style.chart.tooltip.borderColor,
+        borderWidth: e.value.style.chart.tooltip.borderWidth,
+        backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
+        fontSize: e.value.style.chart.tooltip.fontSize,
+        position: e.value.style.chart.tooltip.position,
+        offsetY: e.value.style.chart.tooltip.offsetY,
+        parent: I.value,
+        content: ue.value,
+        isFullscreen: B.value,
+        isCustom: e.value.style.chart.tooltip.customFormat && typeof e.value.style.chart.tooltip.customFormat == "function",
+        smooth: e.value.style.chart.tooltip.smooth,
+        backdropFilter: e.value.style.chart.tooltip.backdropFilter,
+        smoothForce: e.value.style.chart.tooltip.smoothForce,
+        smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThreshold,
+        isA11yMode: J.value === "keyboard",
+        a11yPosition: Be.value
+      }, {
+        "tooltip-before": d(() => [
+          g(t.$slots, "tooltip-before", w($({ ...be.value })), void 0, !0)
+        ]),
+        "tooltip-after": d(() => [
+          ["function"].includes(typeof e.value.style.chart.tooltip.customFormat) ? f("", !0) : (s(), c("div", ro, [
+            re(i(kt), {
+              dataset: me.value,
+              config: Ft.value,
+              backgroundOpacity: 0
+            }, {
+              "data-label": d(({ bar: a }) => [
+                b("div", uo, [
+                  b("span", io, R(a.name + (e.value.style.chart.tooltip.showValue || e.value.style.chart.tooltip.showPercentage ? ":" : "")), 1),
+                  e.value.style.chart.tooltip.showValue || e.value.style.chart.tooltip.showPercentage ? (s(), c("span", co, R(a.suffix), 1)) : f("", !0)
+                ])
+              ]),
+              _: 1
+            }, 8, ["dataset", "config"])
+          ])),
+          g(t.$slots, "tooltip-after", w($({ ...be.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["teleportTo", "show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "fontSize", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold", "isA11yMode", "a11yPosition"]),
+      Oe.value && e.value.userOptions.buttons.table ? (s(), S(sa(ee.value.component), ra({ key: 8 }, ee.value.props, {
+        ref_key: "tableUnit",
+        ref: H,
+        onClose: ot
+      }), it({
+        content: d(() => [
+          (s(), S(i(wt), {
+            key: `table_${De.value}`,
+            colNames: K.value.colNames,
+            head: K.value.head,
+            body: K.value.body,
+            config: K.value.config,
+            title: e.value.table.useDialog ? "" : ee.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            isCursorPointer: D.value,
+            onClose: ot
+          }, {
+            th: d(({ th: a }) => [
+              Te(R(a.name), 1)
+            ]),
+            td: d(({ td: a }) => [
+              Te(R(a), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton", "isCursorPointer"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: d(() => [
+            Te(R(ee.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: d(() => [
+            b("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: o[1] || (o[1] = (a) => ke(e.value.userOptions.callbacks.csv)),
+              style: ae({ cursor: D.value ? "pointer" : "default" })
+            }, [
+              re(i(bt), {
+                name: "fileCsv",
+                stroke: ee.value.props.color
+              }, null, 8, ["stroke"])
+            ], 4)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : f("", !0),
+      g(t.$slots, "skeleton", {}, () => [
+        i(ve) ? (s(), S($a, { key: 0 })) : f("", !0)
+      ], !0)
+    ], 46, Va));
+  }
+}, Fo = /* @__PURE__ */ Da(vo, [["__scopeId", "data-v-b7b15d24"]]);
+export {
+  Fo as default
+};