vue-data-ui 3.0.22 → 3.1.0

package/dist/vue-ui-chord-CquhRjf0.js

@@ -0,0 +1,1100 @@
+import { useCssVars as Gt, defineAsyncComponent as W, ref as v, shallowRef as nt, toRefs as Wt, watch as Me, computed as $, onMounted as st, onBeforeUnmount as rt, createElementBlock as i, openBlock as r, unref as d, normalizeStyle as F, normalizeClass as R, createBlock as j, createCommentVNode as h, renderSlot as w, createElementVNode as I, createSlots as xe, withCtx as x, normalizeProps as de, guardReactiveProps as he, withModifiers as ut, createVNode as fe, Fragment as z, renderList as q, mergeProps as it, toDisplayString as H, Teleport as qt, resolveDynamicComponent as Ht, createTextVNode as ct, nextTick as vt } from "vue";
+import { u as Qt, c as Ae, t as Zt, a as Jt, p as ge, b as Kt, o as ea, f as dt, g as ta, d as aa, e as oa, X as la, F as na, i as Ie, a0 as sa, ab as ra, v as ua, w as ia, k as ca } from "./index-CDQbCd41.js";
+import { t as va, u as da } from "./useResponsive-DfdjqQps.js";
+import { u as ha, B as fa } from "./BaseScanner-BgWxam9d.js";
+import { u as ga } from "./usePrinter-Bnl1YeUU.js";
+import { u as ht } from "./useNestedProp-BPEHGiYX.js";
+import { u as ba } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as pa } from "./useChartAccessibility-9icAAmYg.js";
+import ma from "./img-JOqdlnUs.js";
+import { _ as ya } from "./Shape-Dj2Hl33H.js";
+import ka from "./Title-Dq2_Z9kR.js";
+import $a from "./Legend-2-dC7DVb.js";
+import { _ as wa } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Ca = ["id"], Ma = ["id"], xa = ["xmlns", "viewBox"], Aa = ["width", "height"], Ia = { key: 1 }, Pa = ["id", "d"], _a = { key: 2 }, Ta = ["transform"], Ba = ["d", "fill", "stroke", "stroke-width", "onMouseenter", "onMouseleave", "onClick"], Sa = ["d", "fill", "stroke", "stroke-width"], Oa = ["d", "fill"], La = ["d", "fill", "stroke", "stroke-width", "onMouseenter", "onClick", "onMouseleave"], Da = ["d", "fill", "stroke", "stroke-width"], Ea = ["d", "fill", "stroke", "stroke-width"], Na = ["d", "fill", "stroke", "stroke-width"], Fa = { key: 0 }, Ra = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], za = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], Ua = ["cx", "cy", "r", "stroke", "stroke-width", "fill"], Xa = ["transform", "fill", "text-anchor", "font-size", "font-weight"], Va = { key: 1 }, ja = ["font-size", "font-weight", "fill"], Ya = ["href"], Ga = ["transform", "text-anchor", "font-size", "font-weight", "fill", "innerHTML"], Wa = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, qa = ["id"], Ha = ["onClick"], Qa = {
+  key: 7,
+  "data-dom-to-png-ignore": "",
+  class: "reset-wrapper"
+}, Za = { style: { "text-align": "right", width: "100%" } }, Ja = {
+  __name: "vue-ui-chord",
+  props: {
+    dataset: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  emits: ["selectLegend", "selectGroup", "selectRibbon"],
+  setup(ft, { expose: gt, emit: bt }) {
+    Gt((t) => ({
+      "8b4d975e": t.slicerColor
+    }));
+    const pt = W(() => import("./vue-ui-accordion-Bf_LHFFX.js")), Pe = W(() => import("./BaseIcon-DHtro8us.js")), mt = W(() => import("./DataTable-DJjA2_wf.js")), yt = W(() => import("./PackageVersion-DU12WH3O.js")), kt = W(() => import("./PenAndPaper-B7QEDgx4.js")), $t = W(() => import("./UserOptions-BuGfCdAY.js")), wt = W(() => import("./BaseDraggableDialog-O7900pGp.js")), { vue_ui_chord: Ct } = Qt(), S = ft, ne = bt, E = v(!!S.dataset && Object.hasOwn(S.dataset, "matrix")), k = v(Ae()), C = v(null), p = v(null), g = v(null), _e = v(0), O = v(null), Te = v(null), Be = v(null), Se = v(null), Oe = v(null), be = v(0), pe = v(0), me = v(0), Q = v(!1), U = nt(null), Z = nt(null), Le = v(!1), J = v(null), e = v(ke()), { loading: De, FINAL_DATASET: M, manualLoading: K } = ha({
+      ...Wt(S),
+      FINAL_CONFIG: e,
+      prepareConfig: ke,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          await vt(), X.value.showTable = e.value.table.show;
+        });
+      },
+      skeletonDataset: {
+        matrix: [
+          [12e3, 6e3, 9e3, 3e3],
+          [2e3, 1e4, 2e3, 6001],
+          [8e3, 1600, 8e3, 8001],
+          [1e3, 1e3, 1e3, 7001]
+        ],
+        labels: [],
+        colors: ["#DBDBDB", "#C4C4C4", "#ADADAD", "#969696"]
+      },
+      skeletonConfig: Zt({
+        defaultConfig: e.value,
+        userConfig: {
+          useCssAnimation: !1,
+          userOptions: { show: !1 },
+          table: { show: !1 },
+          style: {
+            chart: {
+              backgroundColor: "#99999930",
+              legend: {
+                backgroundColor: "transparent"
+              },
+              arcs: {
+                stroke: "#6A6A6A",
+                labels: {
+                  show: !1
+                }
+              },
+              ribbons: {
+                stroke: "#6A6A6A",
+                underlayerOpacity: 0,
+                labels: {
+                  show: !1
+                }
+              }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: ye, setUserOptionsVisibility: Ee, keepUserOptionState: Ne } = ba({ config: e.value }), { svgRef: ee } = pa({ config: e.value.style.chart.title }), { isPrinting: Fe, isImaging: Re, generatePdf: ze, generateImage: Ue } = ga({
+      elementId: `chord_${k.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-chord",
+      options: e.value.userOptions.print
+    }), X = v({
+      showTable: e.value.table.show
+    });
+    function ke() {
+      const t = ht({
+        userConfig: S.config,
+        defaultConfig: Ct
+      });
+      return t.theme ? {
+        ...ht({
+          userConfig: Kt.vue_ui_chord[t.theme] || S.config,
+          defaultConfig: t
+        }),
+        customPalette: Jt[t.theme] || ge
+      } : t;
+    }
+    Me(() => S.config, (t) => {
+      De.value || (e.value = ke()), ye.value = !e.value.userOptions.showOnChartHover, $e(), be.value += 1, pe.value += 1, me.value += 1, P.value = e.value.initialRotation, X.value.showTable = e.value.table.show;
+    }, { deep: !0 });
+    const Xe = $(() => e.value.debug);
+    Me(() => S.dataset, () => {
+      Ve(), $e(), be.value += 1, pe.value += 1, me.value += 1;
+    });
+    function Ve() {
+      if (ea(S.dataset)) {
+        dt({
+          componentName: "VueUiChord",
+          type: "dataset",
+          debug: Xe.value
+        }), E.value = !1, K.value = !0;
+        return;
+      }
+      const t = ta({
+        datasetObject: S.dataset,
+        requiredAttributes: ["matrix"]
+      });
+      if (t.length) {
+        t.forEach((s) => {
+          dt({
+            componentName: "VueUiChord",
+            type: "datasetAttribute",
+            property: s,
+            debug: Xe.value
+          });
+        }), E.value = !1, K.value = !0;
+        return;
+      }
+      const o = S.dataset.matrix;
+      if (!Array.isArray(o) || o.length < 2) {
+        console.warn(`VueUiChord: dataset.matrix requires a minimum of 2 datapoints, for example:
+        
+matrix:[
+    [1, 1],
+    [1, 1]
+]`), E.value = !1, K.value = !0;
+        return;
+      }
+      const a = o.length, l = o.findIndex((s) => !Array.isArray(s) || s.length !== a);
+      if (l !== -1) {
+        console.warn(
+          `VueUiChord - Invalid matrix: dataset.matrix at index ${l} has ${Array.isArray(o[l]) ? o[l].length : "NaN"} elements instead of the required ${a}
+
+dataset.matrix[${l}] = [${Array.isArray(o[l]) ? o[l].toString() : "invalid"}]`
+        ), E.value = !1, K.value = !0;
+        return;
+      }
+      E.value = !0, K.value = !1;
+    }
+    function $e() {
+      if (Ve(), e.value.responsive) {
+        const t = va(() => {
+          const { width: o, height: a, heightNoTitle: l, heightSource: s, heightTitle: n, heightLegend: u } = da({
+            chart: O.value,
+            title: e.value.style.chart.title.text ? Te.value : null,
+            legend: e.value.style.chart.legend.show ? Be.value : null,
+            source: Se.value,
+            noTitle: Oe.value
+          }), f = n + u + s + l;
+          o < a ? O.value.style.width = "100%" : (O.value.style.height = "100%", ee.value.style.height = `calc(100% - ${f}px)`);
+        }, 100);
+        U.value && (Z.value && U.value.unobserve(Z.value), U.value.disconnect()), U.value = new ResizeObserver(t), Z.value = O.value.parentNode, U.value.observe(Z.value), t();
+      }
+      je.value = setTimeout(() => {
+        Q.value = !0;
+      }, 500);
+    }
+    function Mt() {
+      if (!M.value || !Object.hasOwn(M.value, "matrix") || M.value.matrix.length < 2) {
+        console.warn(`VueUiChord: dataset.matrix requires a minimum of 2 datapoints, for example:
+
+matrix:[
+  [1, 1],
+  [1, 1]
+]`), E.value = !1;
+        return;
+      }
+      M.value.matrix.forEach((t, o) => {
+        t.length !== M.value.matrix.length && (console.warn(`VueUiChord - Invalid matrix: dataset.matrix at index ${o} has ${t.length} elements instead of the required ${M.value.matrix.length}
+
+dataset.matrix[${o}] = [${t.toString()}] has a length of ${t.length} but should have the same length as the matrix itself (${M.value.matrix.length})`), E.value = !1);
+      });
+    }
+    const je = v(null);
+    st(() => {
+      Le.value = !0, $e();
+    });
+    const L = v({
+      height: 600,
+      width: 600
+    }), xt = $(() => e.value.userOptions.show && !e.value.style.chart.title.text), At = $(() => aa(e.value.customPalette)), b = $(() => ({
+      inner: L.value.width * 0.3 * e.value.style.chart.arcs.innerRadiusRatio,
+      outer: L.value.width * 0.34 * e.value.style.chart.arcs.outerRadiusRatio
+    })), It = $(() => e.value.style.chart.arcs.padAngle / 100), m = $(() => ({
+      matrix: M.value.matrix ?? [[0]],
+      labels: M.value.labels ?? [""],
+      colors: M.value.colors && Array.isArray(M.value.colors) && M.value.colors.length ? M.value.colors.map((t) => oa(t)) : M.value.matrix.map((t, o) => At.value[o] || ge[o] || ge[o % ge.length])
+    }));
+    function Pt(t, o) {
+      const a = t.length, l = b.value.inner, s = new Array(a).fill(0);
+      let n = 0;
+      for (let c = 0; c < a; c += 1)
+        for (let y = 0; y < a; y += 1)
+          s[c] += t[c][y], n += t[c][y];
+      const u = (2 * Math.PI - o * a) / n, f = [];
+      let _ = 0;
+      for (let c = 0; c < a; c += 1) {
+        const y = _, B = y + s[c] * u;
+        f.push({
+          index: c,
+          pattern: `pattern_${k.value}_${c}`,
+          startAngle: y,
+          endAngle: B,
+          name: m.value.labels[c],
+          id: Ae(),
+          color: m.value.colors[c],
+          proportion: s[c] / n
+        }), _ = B + o;
+      }
+      const T = [];
+      for (let c = 0; c < a; c += 1) {
+        const y = t[c].map((D, V) => ({ j: V, v: D }));
+        y.sort((D, V) => V.v - D.v);
+        let B = f[c].startAngle;
+        for (const { j: D, v: V } of y) {
+          const G = B, le = G + V * u;
+          T.push({
+            index: c,
+            subIndex: D,
+            pattern: `pattern_${k.value}_${c}`,
+            startAngle: G,
+            endAngle: le,
+            value: V,
+            groupName: m.value.labels[c],
+            groupId: f[c].id,
+            groupColor: m.value.colors[c],
+            midAngle: (G + le) / 2,
+            midBaseX: Math.cos((G + le) / 2 - Math.PI / 2) * l,
+            midBaseY: Math.sin((G + le) / 2 - Math.PI / 2) * l
+          }), B = le;
+        }
+      }
+      const N = [];
+      for (const c of T) {
+        const y = T.find(
+          (B) => B.index === c.subIndex && B.subIndex === c.index
+        );
+        N.push({ source: c, target: y, id: Ae() });
+      }
+      return { groups: f, chords: N };
+    }
+    const A = $(() => {
+      const t = Pt(m.value.matrix, It.value);
+      return Mt(), t.chords.sort(
+        (o, a) => Math.max(a.source.value, a.target.value) - Math.max(o.source.value, o.target.value)
+      ), t;
+    }), _t = $(() => {
+      const t = b.value.outer + e.value.style.chart.ribbons.labels.offset + 12, a = e.value.style.chart.ribbons.labels.fontSize * 0.6, l = [];
+      if (p.value) {
+        const n = p.value;
+        if (n.source.value) {
+          const u = String(n.source.value);
+          l.push({
+            id: n.id + "-src",
+            theta: n.source.midAngle,
+            w: u.length * a / t,
+            midBaseX: n.source.midBaseX,
+            midBaseY: n.source.midBaseY,
+            groupColor: n.source.groupColor,
+            value: n.source.value
+          });
+        }
+        if (n.target && n.target.value && n.target.value !== n.source.value) {
+          const u = String(n.target.value);
+          l.push({
+            id: n.id + "-tgt",
+            theta: n.target.midAngle,
+            w: u.length * a / t,
+            midBaseX: n.target.midBaseX,
+            midBaseY: n.target.midBaseY,
+            groupColor: n.target.groupColor,
+            value: n.target.value
+          });
+        }
+        return l;
+      }
+      function s(n) {
+        A.value.chords.filter((u) => u.source.groupId === n && u.source.value).forEach((u) => {
+          {
+            const f = String(u.source.value);
+            l.push({
+              id: u.id + "-src",
+              theta: u.source.midAngle,
+              w: f.length * a / t,
+              midBaseX: u.source.midBaseX,
+              midBaseY: u.source.midBaseY,
+              groupColor: u.source.groupColor,
+              value: u.source.value
+            });
+          }
+          if (u.target && u.target.value && u.target.value !== u.source.value) {
+            const f = String(u.target.value);
+            l.push({
+              id: u.id + "-tgt",
+              theta: u.target.midAngle,
+              w: f.length * a / t,
+              midBaseX: u.target.midBaseX,
+              midBaseY: u.target.midBaseY,
+              groupColor: u.target.groupColor,
+              value: u.target.value
+            });
+          }
+        });
+      }
+      return g.value && s(g.value), C.value && s(C.value.id), l;
+    }), Tt = $(() => {
+      const t = _t.value.map((s) => ({ ...s })).sort((s, n) => s.theta - n.theta), o = e.value.style.chart.ribbons.labels.minSeparationDeg * Math.PI / 180;
+      let a = !0, l = 0;
+      for (; a && l++ < 10; ) {
+        a = !1;
+        for (let f = 1; f < t.length; f += 1) {
+          const _ = t[f - 1], T = t[f], N = _.theta + _.w + o;
+          T.theta < N && (T.theta = N, a = !0);
+        }
+        const s = t[0], n = t[t.length - 1], u = n.theta + n.w + o - 2 * Math.PI;
+        s.theta < u && (s.theta = u, a = !0);
+      }
+      return t;
+    });
+    function Ye(t, o, a, l) {
+      const s = t - Math.PI / 2, n = o - Math.PI / 2, u = Math.cos(s) * a, f = Math.sin(s) * a, _ = Math.cos(n) * a, T = Math.sin(n) * a, N = Math.cos(n) * l, c = Math.sin(n) * l, y = Math.cos(s) * l, B = Math.sin(s) * l, D = o - t > Math.PI ? 1 : 0;
+      return `M${u},${f} A${a},${a} 0 ${D} 1 ${_},${T} L${N},${c} A${l},${l} 0 ${D} 0 ${y},${B} Z`;
+    }
+    function se(t, o) {
+      const a = b.value.inner, l = t.startAngle - Math.PI / 2, s = t.endAngle - Math.PI / 2, n = o.startAngle - Math.PI / 2, u = o.endAngle - Math.PI / 2, f = Math.cos(l) * a, _ = Math.sin(l) * a, T = Math.cos(s) * a, N = Math.sin(s) * a, c = Math.cos(n) * a, y = Math.sin(n) * a, B = Math.cos(u) * a, D = Math.sin(u) * a, V = t.endAngle - t.startAngle > Math.PI ? 1 : 0, G = o.endAngle - o.startAngle > Math.PI ? 1 : 0;
+      return `M${f},${_}A${a},${a} 0 ${V} 1 ${T},${N}Q0,0 ${c},${y}A${a},${a} 0 ${G} 1 ${B},${D}Q0,0 ${f},${_}Z`;
+    }
+    const Ge = $(() => P.value * Math.PI / 180);
+    function Bt(t) {
+      return (t.startAngle + t.endAngle) / 2;
+    }
+    function St(t) {
+      return ((Bt(t) + Ge.value) % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI);
+    }
+    function Ot(t) {
+      let o = t + Ge.value;
+      return o = (o % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI), o > Math.PI ? "end" : "start";
+    }
+    function Lt(t) {
+      const o = t - Math.PI / 2, a = Math.cos(o) * (b.value.outer + e.value.style.chart.arcs.labels.offset + 24), l = Math.sin(o) * (b.value.outer + e.value.style.chart.arcs.labels.offset + 24);
+      return `translate(${a},${l})`;
+    }
+    function Dt(t, o, a) {
+      const l = t - Math.PI / 2, s = o - Math.PI / 2, n = Math.cos(l) * a, u = Math.sin(l) * a, f = Math.cos(s) * a, _ = Math.sin(s) * a, T = o - t > Math.PI ? 1 : 0;
+      return `M${n},${u} A${a},${a} 0 ${T} 1 ${f},${_}`;
+    }
+    const P = v(e.value.initialRotation), te = v(!1);
+    let We = 0, qe = 0;
+    function He(t) {
+      const o = ee.value.getBoundingClientRect(), a = o.left + o.width / 2, l = o.top + o.height / 2, s = t.clientX ?? t.touches[0].clientX, n = t.clientY ?? t.touches[0].clientY;
+      return Math.atan2(n - l, s - a);
+    }
+    function Qe(t) {
+      !e.value.enableRotation || ae.value || (t.preventDefault(), te.value = !0, We = P.value, qe = He(t));
+    }
+    function re(t) {
+      if (!te.value) return;
+      const o = He(t);
+      P.value = We + (o - qe) * 180 / Math.PI;
+    }
+    function ue() {
+      te.value = !1;
+    }
+    function Ze(t) {
+      return ca(
+        e.value.style.chart.ribbons.labels.formatter,
+        t,
+        Ie({
+          p: e.value.style.chart.ribbons.labels.prefix,
+          v: t,
+          s: e.value.style.chart.ribbons.labels.suffix,
+          r: e.value.style.chart.ribbons.labels.rounding
+        })
+      );
+    }
+    st(() => {
+      window.addEventListener("mousemove", re), window.addEventListener("mouseup", ue), window.addEventListener("touchmove", re, { passive: !1 }), window.addEventListener("touchend", ue);
+    }), rt(() => {
+      window.removeEventListener("mousemove", re), window.removeEventListener("mouseup", ue), window.removeEventListener("touchmove", re), window.removeEventListener("touchend", ue), clearTimeout(je.value), U.value && (Z.value && U.value.unobserve(Z.value), U.value.disconnect());
+    });
+    const ie = v(!1);
+    function Je(t) {
+      ie.value = t, _e.value += 1;
+    }
+    function Et(t, o) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: o }), !g.value && (C.value = t);
+    }
+    function Nt(t, o) {
+      C.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: o });
+    }
+    function Ft(t, o) {
+      ne("selectGroup", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: o });
+    }
+    function Rt(t, o) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: o }), !g.value && (p.value = t);
+    }
+    function zt(t, o) {
+      p.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: o });
+    }
+    function Ut(t, o) {
+      ne("selectRibbon", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: o });
+    }
+    function Ke(t) {
+      return !g.value && !C.value && !p.value ? 0.8 : (g.value ? g.value === t.source.groupId : C.value ? C.value.id === t.source.groupId : p.value?.id === t.id) ? 1 : 0.1;
+    }
+    function et(t) {
+      return !g.value && !C.value && !p.value || (g.value ? g.value === t.id : C.value ? C.value.id === t.id : [p.value?.source.groupId, p.value?.target.groupId].includes(t.id)) ? 1 : 0.3;
+    }
+    const ae = v(!1);
+    function we() {
+      ae.value = !ae.value;
+    }
+    function tt() {
+      X.value.showTable = !X.value.showTable;
+    }
+    function Xt() {
+      return A.value;
+    }
+    const Y = v(null);
+    function at() {
+      const t = e.value.initialRotation;
+      Y.value !== null && cancelAnimationFrame(Y.value);
+      const o = () => {
+        P.value += (t - P.value) * 0.05, Math.abs(P.value - t) < 0.1 ? (P.value = t, Y.value = null) : Y.value = requestAnimationFrame(o);
+      };
+      Y.value = requestAnimationFrame(o);
+    }
+    rt(() => {
+      Y.value !== null && cancelAnimationFrame(Y.value);
+    });
+    function ot(t) {
+      t === g.value ? (g.value = null, ne("selectLegend", null)) : (g.value = t, ne("selectLegend", A.value.groups.find((o) => o.id === t)));
+    }
+    const lt = $(() => A.value.groups.map((t, o) => ({
+      name: t.name,
+      color: t.color,
+      shape: "circle",
+      patternIndex: o,
+      pattern: `pattern_${k.value}_${o}`,
+      id: t.id,
+      select: () => ot(t.id),
+      opacity: g.value ? g.value === t.id ? 1 : 0.3 : 1
+    }))), Vt = $(() => ({
+      cy: "chord-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" : ""
+    })), ce = $(() => {
+      const t = A.value.groups.map((a, l) => ({
+        name: a.name || l,
+        color: a.color
+      })), o = m.value.matrix;
+      return { head: t, body: o };
+    }), ve = $(() => {
+      const t = [{ name: "", color: null }, ...ce.value.head], o = ce.value.body.map((s, n) => [
+        ce.value.head[n],
+        ...ce.value.body[n]
+      ]), 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 {
+        colNames: t,
+        head: t,
+        body: o,
+        config: a
+      };
+    });
+    function Ce(t = null) {
+      vt(() => {
+        const o = m.value.matrix.map((s, n) => [
+          [m.value.labels[n] || n],
+          s
+        ]), a = [
+          [e.value.style.chart.title.text],
+          [e.value.style.chart.title.subtitle.text],
+          [
+            [""],
+            ...m.value.labels.map((s, n) => [s || n])
+          ]
+        ].concat(o), l = ua(a);
+        t ? t(l) : ia({ csvContent: l, title: e.value.style.chart.title.text || "vue-ui-chord" });
+      });
+    }
+    async function jt({ scale: t = 2 } = {}) {
+      if (!O.value) return;
+      const { width: o, height: a } = O.value.getBoundingClientRect(), l = o / a, { imageUri: s, base64: n } = await ma({ domElement: O.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: s,
+        base64: n,
+        title: e.value.style.chart.title.text,
+        width: o,
+        height: a,
+        aspectRatio: l
+      };
+    }
+    function Yt(t, o) {
+      return `${m.value.labels[o]}${e.value.style.chart.arcs.labels.showPercentage ? Ie({
+        p: " (",
+        v: isNaN(t.proportion) ? 0 : t.proportion * 100,
+        s: "%)",
+        r: e.value.style.chart.arcs.labels.roundingPercentage
+      }) : ""}`;
+    }
+    const oe = $(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, o = X.value.showTable;
+      return {
+        component: t ? wt : pt,
+        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: ie.value,
+          fullscreenParent: O.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8)
+        } : {
+          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
+            }
+          }
+        }
+      };
+    });
+    return Me(() => X.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && J.value ? J.value.open() : "close" in J.value && J.value.close());
+    }), gt({
+      getData: Xt,
+      getImage: jt,
+      generateCsv: Ce,
+      generateImage: Ue,
+      generatePdf: ze,
+      toggleAnnotator: we,
+      toggleTable: tt,
+      toggleFullscreen: Je
+    }), (t, o) => (r(), i("div", {
+      ref_key: "chordChart",
+      ref: O,
+      class: R({
+        "vue-ui-chord": !0,
+        "vue-data-ui-wrapper-fullscreen": ie.value,
+        "vue-data-ui-responsive": e.value.responsive
+      }),
+      style: F(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      id: `chord_${k.value}`,
+      onMouseenter: o[4] || (o[4] = () => d(Ee)(!0)),
+      onMouseleave: o[5] || (o[5] = () => d(Ee)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator && d(ee) ? (r(), j(d(kt), {
+        key: 0,
+        color: e.value.style.chart.color,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        active: ae.value,
+        svgRef: d(ee),
+        onClose: we
+      }, null, 8, ["color", "backgroundColor", "active", "svgRef"])) : h("", !0),
+      w(t.$slots, "userConfig", {}, void 0, !0),
+      xt.value ? (r(), i("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: Oe,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : h("", !0),
+      e.value.style.chart.title.text ? (r(), i("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: Te,
+        style: "width:100%;background:transparent;padding-bottom:24px"
+      }, [
+        (r(), j(ka, {
+          key: `title_${be.value}`,
+          config: {
+            title: {
+              cy: "chord-div-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "chord-div-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : h("", !0),
+      I("div", {
+        id: `legend-top-${k.value}`
+      }, null, 8, Ma),
+      e.value.userOptions.show && E.value && (d(Ne) || d(ye)) ? (r(), j(d($t), {
+        ref: "details",
+        key: `user_option_${_e.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: d(Fe),
+        isImaging: d(Re),
+        uid: k.value,
+        hasTooltip: !1,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasImg: e.value.userOptions.buttons.img,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasTable: e.value.userOptions.buttons.table,
+        hasLabel: !1,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: ie.value,
+        chartElement: O.value,
+        position: e.value.userOptions.position,
+        titles: { ...e.value.userOptions.buttonTitles },
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: ae.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        onToggleFullscreen: Je,
+        onGeneratePdf: d(ze),
+        onGenerateCsv: Ce,
+        onGenerateImage: d(Ue),
+        onToggleTable: tt,
+        onToggleAnnotator: we,
+        style: F({
+          visibility: d(Ne) ? d(ye) ? "visible" : "hidden" : "visible"
+        })
+      }, xe({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: x(({ isOpen: a, color: l }) => [
+            w(t.$slots, "menuIcon", de(he({ isOpen: a, color: l })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: x(() => [
+            w(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: x(() => [
+            w(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: x(() => [
+            w(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: x(() => [
+            w(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: x(({ toggleFullscreen: a, isFullscreen: l }) => [
+            w(t.$slots, "optionFullscreen", de(he({ toggleFullscreen: a, isFullscreen: l })), void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: x(({ toggleAnnotator: a, isAnnotator: l }) => [
+            w(t.$slots, "optionAnnotator", de(he({ toggleAnnotator: a, isAnnotator: l })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : h("", !0),
+      (r(), i("svg", {
+        xmlns: d(la),
+        ref_key: "svgRef",
+        ref: ee,
+        viewBox: `0 0 ${L.value.width} ${L.value.height}`,
+        preserveAspectRatio: "xMidYMid meet",
+        style: {
+          overflow: "visible"
+        },
+        class: R({ "vue-ui-chord-rotating": te.value, "vue-ui-chord-idle": !te.value }),
+        onMousedown: ut(Qe, ["prevent"]),
+        onTouchstart: ut(Qe, ["prevent"])
+      }, [
+        fe(d(yt)),
+        t.$slots["chart-background"] ? (r(), i("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: L.value.width <= 0 ? 10 : L.value.width,
+          height: L.value.height <= 0 ? 10 : L.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          w(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Aa)) : h("", !0),
+        e.value.style.chart.arcs.labels.curved ? (r(), i("defs", Ia, [
+          (r(!0), i(z, null, q(A.value.groups, (a, l) => (r(), i("path", {
+            key: `labelPath-${l}`,
+            id: `labelPath-${l}_${k.value}`,
+            d: Dt(
+              a.startAngle,
+              a.endAngle,
+              (b.value.inner + b.value.outer) / 2 + e.value.style.chart.arcs.labels.offset
+            ),
+            fill: "none"
+          }, null, 8, Pa))), 128))
+        ])) : h("", !0),
+        t.$slots.pattern ? (r(), i("g", _a, [
+          (r(!0), i(z, null, q(A.value.groups, (a, l) => (r(), i("defs", null, [
+            w(t.$slots, "pattern", it({ ref_for: !0 }, { seriesIndex: a.index, patternId: `pattern_${k.value}_${l}` }), void 0, !0)
+          ]))), 256))
+        ])) : h("", !0),
+        I("g", {
+          transform: `translate(${L.value.width / 2}, ${L.value.height / 2}) rotate(${P.value})`
+        }, [
+          (r(!0), i(z, null, q(A.value.groups, (a, l) => (r(), i("g", null, [
+            (r(), i("path", {
+              class: R({ "vue-ui-chord-arc": !0, "vue-ui-chord-arc-animated": e.value.useCssAnimation && !Q.value }),
+              key: `arc-${l}`,
+              d: Ye(
+                a.startAngle,
+                a.endAngle,
+                b.value.outer,
+                b.value.inner
+              ),
+              fill: m.value.colors[l],
+              stroke: e.value.style.chart.arcs.stroke,
+              "stroke-width": e.value.style.chart.arcs.strokeWidth,
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              style: F({
+                opacity: et(a)
+              }),
+              onMouseenter: (s) => Et(a, l),
+              onMouseleave: (s) => Nt(a, l),
+              onClick: (s) => Ft(a, l)
+            }, null, 46, Ba)),
+            t.$slots.pattern ? (r(), i("path", {
+              class: R({ "vue-ui-chord-arc": !0, "vue-ui-chord-arc-animated": e.value.useCssAnimation && !Q.value }),
+              key: `arc-${l}`,
+              d: Ye(
+                a.startAngle,
+                a.endAngle,
+                b.value.outer,
+                b.value.inner
+              ),
+              fill: `url(#${a.pattern})`,
+              stroke: e.value.style.chart.arcs.stroke,
+              "stroke-width": e.value.style.chart.arcs.strokeWidth,
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              style: F({
+                opacity: et(a),
+                pointerEvents: "none"
+              })
+            }, null, 14, Sa)) : h("", !0)
+          ]))), 256)),
+          I("g", null, [
+            (r(!0), i(z, null, q(C.value ? A.value.chords.filter((a) => a.source.groupId === C.value.id) : g.value ? A.value.chords.filter((a) => a.source.groupId === g.value) : A.value.chords, (a, l) => (r(), i(z, {
+              key: `ribbon-${a.id}`
+            }, [
+              a.source.value ? (r(), i("path", {
+                key: 0,
+                class: R({ "vue-ui-chord-ribbon": !0, "vue-ui-chord-ribbon-animated": e.value.useCssAnimation && !Q.value }),
+                d: se(a.source, a.target),
+                fill: e.value.style.chart.backgroundColor,
+                style: F({ opacity: e.value.style.chart.ribbons.underlayerOpacity })
+              }, null, 14, Oa)) : h("", !0),
+              a.source.value ? (r(), i("path", {
+                key: 1,
+                class: R({ "vue-ui-chord-ribbon": !0, "vue-ui-chord-ribbon-animated": e.value.useCssAnimation && !Q.value }),
+                d: se(a.source, a.target),
+                fill: m.value.colors[a.source.index],
+                stroke: e.value.style.chart.ribbons.stroke,
+                "stroke-width": e.value.style.chart.ribbons.strokeWidth,
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                style: F({ opacity: Ke(a) }),
+                onMouseenter: (s) => Rt({
+                  ...a,
+                  path: se(a.source, a.target),
+                  color: m.value.colors[a.source.index]
+                }, l),
+                onClick: (s) => Ut({
+                  ...a,
+                  color: m.value.colors[a.source.index]
+                }, l),
+                onMouseleave: (s) => zt({
+                  ...a,
+                  color: m.value.colors[a.source.index]
+                }, l)
+              }, null, 46, La)) : h("", !0),
+              a.source.value && t.$slots.pattern ? (r(), i("path", {
+                key: 2,
+                class: R({ "vue-ui-chord-ribbon": !0, "vue-ui-chord-ribbon-animated": e.value.useCssAnimation && !Q.value }),
+                d: se(a.source, a.target),
+                fill: `url(#pattern_${k.value}_${a.source.index})`,
+                stroke: e.value.style.chart.ribbons.stroke,
+                "stroke-width": e.value.style.chart.ribbons.strokeWidth,
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                style: F({
+                  opacity: Ke(a),
+                  pointerEvents: "none"
+                })
+              }, null, 14, Da)) : h("", !0)
+            ], 64))), 128)),
+            p.value ? (r(), i("path", {
+              key: 0,
+              d: p.value.path,
+              fill: p.value.color,
+              stroke: e.value.style.chart.ribbons.stroke,
+              "stroke-width": e.value.style.chart.ribbons.strokeWidth,
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              class: R({ "vue-ui-chord-ribbon": !0 }),
+              style: {
+                pointerEvents: "none"
+              }
+            }, null, 8, Ea)) : h("", !0),
+            p.value && t.$slots.pattern ? (r(), i("path", {
+              key: 1,
+              d: p.value.path,
+              fill: `url(#${p.value.source.pattern})`,
+              stroke: e.value.style.chart.ribbons.stroke,
+              "stroke-width": e.value.style.chart.ribbons.strokeWidth,
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              class: R({ "vue-ui-chord-ribbon": !0 }),
+              style: {
+                pointerEvents: "none"
+              }
+            }, null, 8, Na)) : h("", !0)
+          ]),
+          (C.value || p.value || g.value) && e.value.style.chart.ribbons.labels.show ? (r(), i("g", Fa, [
+            (r(!0), i(z, null, q(Tt.value, (a) => (r(), i(z, {
+              key: a.id
+            }, [
+              I("line", {
+                x1: a.midBaseX,
+                y1: a.midBaseY,
+                x2: Math.cos(a.theta - Math.PI / 2) * (b.value.outer + e.value.style.chart.ribbons.labels.offset + 12),
+                y2: Math.sin(a.theta - Math.PI / 2) * (b.value.outer + e.value.style.chart.ribbons.labels.offset + 12),
+                stroke: e.value.style.chart.backgroundColor,
+                "stroke-width": e.value.style.chart.ribbons.labels.connector.strokeWidth * 3,
+                "pointer-events": "none"
+              }, null, 8, Ra),
+              I("line", {
+                x1: a.midBaseX,
+                y1: a.midBaseY,
+                x2: Math.cos(a.theta - Math.PI / 2) * (b.value.outer + e.value.style.chart.ribbons.labels.offset + 12),
+                y2: Math.sin(a.theta - Math.PI / 2) * (b.value.outer + e.value.style.chart.ribbons.labels.offset + 12),
+                stroke: e.value.style.chart.ribbons.labels.connector.stroke,
+                "stroke-width": e.value.style.chart.ribbons.labels.connector.strokeWidth,
+                "pointer-events": "none"
+              }, null, 8, za),
+              e.value.style.chart.ribbons.labels.marker.show ? (r(), i("circle", {
+                key: 0,
+                cx: Math.cos(a.theta - Math.PI / 2) * (b.value.outer + e.value.style.chart.ribbons.labels.offset + 12),
+                cy: Math.sin(a.theta - Math.PI / 2) * (b.value.outer + e.value.style.chart.ribbons.labels.offset + 12),
+                r: e.value.style.chart.ribbons.labels.marker.radius,
+                stroke: e.value.style.chart.ribbons.labels.marker.stroke,
+                "stroke-width": e.value.style.chart.ribbons.labels.marker.strokeWidth,
+                fill: a.groupColor,
+                "pointer-events": "none"
+              }, null, 8, Ua)) : h("", !0),
+              I("text", {
+                transform: `
+                            translate(
+                                ${Math.cos(a.theta - Math.PI / 2) * (b.value.outer + e.value.style.chart.ribbons.labels.offset + 24)},
+                                ${Math.sin(a.theta - Math.PI / 2) * (b.value.outer + e.value.style.chart.ribbons.labels.offset + 24)}
+                            ) rotate(${-P.value})
+                            `,
+                fill: e.value.style.chart.ribbons.labels.useSerieColor ? a.groupColor : e.value.style.chart.ribbons.labels.color,
+                "text-anchor": Ot(a.theta),
+                "font-size": e.value.style.chart.ribbons.labels.fontSize,
+                "font-weight": e.value.style.chart.ribbons.labels.bold ? "bold" : "normal",
+                dy: ".35em",
+                "pointer-events": "none"
+              }, H(Ze(a.value)), 9, Xa)
+            ], 64))), 128))
+          ])) : h("", !0),
+          e.value.style.chart.arcs.labels.show ? (r(), i("g", Va, [
+            e.value.style.chart.arcs.labels.curved ? (r(!0), i(z, { key: 0 }, q(A.value.groups, (a, l) => (r(), i("text", {
+              class: "vue-ui-chord-label-curved",
+              key: `curved-label-${l}`,
+              "font-size": e.value.style.chart.arcs.labels.fontSize,
+              "font-weight": e.value.style.chart.arcs.labels.bold ? "bold" : "normal",
+              fill: e.value.style.chart.arcs.labels.adaptColorToBackground ? d(na)(m.value.colors[l]) : e.value.style.chart.arcs.labels.color
+            }, [
+              I("textPath", {
+                href: `#labelPath-${l}_${k.value}`,
+                startOffset: "50%",
+                "text-anchor": "middle"
+              }, H(m.value.labels[l]) + H(e.value.style.chart.arcs.labels.showPercentage ? d(Ie)({
+                p: " (",
+                v: isNaN(a.proportion) ? 0 : a.proportion * 100,
+                s: "%)",
+                r: e.value.style.chart.arcs.labels.roundingPercentage
+              }) : ""), 9, Ya)
+            ], 8, ja))), 128)) : !C.value && !p.value && !g.value ? (r(!0), i(z, { key: 1 }, q(A.value.groups, (a, l) => (r(), i("text", {
+              class: "vue-ui-chord-label-straight",
+              key: `label-${l}`,
+              transform: `
+                                ${Lt((a.startAngle + a.endAngle) / 2)}
+                                rotate(${-P.value})
+                            `,
+              dy: ".35em",
+              "text-anchor": St(a) > Math.PI ? "end" : "start",
+              "font-size": e.value.style.chart.arcs.labels.fontSize,
+              "font-weight": e.value.style.chart.arcs.labels.bold ? "bold" : "normal",
+              fill: e.value.style.chart.arcs.labels.color,
+              innerHTML: d(sa)({
+                content: d(ra)(Yt(a, l)),
+                fontSize: e.value.style.chart.arcs.labels.fontSize,
+                fill: e.value.style.chart.arcs.labels.color,
+                x: 0,
+                y: 0
+              })
+            }, null, 8, Ga))), 128)) : h("", !0)
+          ])) : h("", !0)
+        ], 8, Ta),
+        w(t.$slots, "svg", { svg: { height: 600, width: 600 } }, void 0, !0)
+      ], 42, xa)),
+      t.$slots.watermark ? (r(), i("div", Wa, [
+        w(t.$slots, "watermark", de(he({ isPrinting: d(Fe) || d(Re) })), void 0, !0)
+      ])) : h("", !0),
+      I("div", {
+        id: `legend-bottom-${k.value}`
+      }, null, 8, qa),
+      Le.value ? (r(), j(qt, {
+        key: 5,
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${k.value}` : `#legend-bottom-${k.value}`
+      }, [
+        I("div", {
+          ref_key: "chartLegend",
+          ref: Be
+        }, [
+          e.value.style.chart.legend.show ? (r(), j($a, {
+            key: `legend_${me.value}`,
+            legendSet: lt.value,
+            config: Vt.value,
+            onClickMarker: o[0] || (o[0] = ({ legend: a }) => ot(a.id))
+          }, xe({
+            item: x(({ legend: a }) => [
+              I("div", {
+                style: F({
+                  opacity: g.value ? g.value === a.id ? 1 : 0.3 : 1
+                }),
+                onClick: (l) => a.select()
+              }, H(a.name), 13, Ha)
+            ]),
+            _: 2
+          }, [
+            t.$slots.pattern ? {
+              name: "legend-pattern",
+              fn: x(({ legend: a, index: l }) => [
+                fe(ya, {
+                  shape: a.shape,
+                  radius: 30,
+                  stroke: "none",
+                  plot: { x: 30, y: 30 },
+                  fill: `url(#pattern_${k.value}_${l})`
+                }, null, 8, ["shape", "fill"])
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["legendSet", "config"])) : h("", !0),
+          w(t.$slots, "legend", { legend: lt.value }, void 0, !0)
+        ], 512)
+      ], 8, ["to"])) : h("", !0),
+      t.$slots.source ? (r(), i("div", {
+        key: 6,
+        ref_key: "source",
+        ref: Se,
+        dir: "auto"
+      }, [
+        w(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : h("", !0),
+      P.value !== e.value.initialRotation ? (r(), i("div", Qa, [
+        w(t.$slots, "reset-action", { reset: at }, () => [
+          I("button", {
+            "data-cy-reset": "",
+            tabindex: "0",
+            role: "button",
+            class: "vue-data-ui-refresh-button",
+            style: F({
+              background: e.value.style.chart.backgroundColor
+            }),
+            onClick: at
+          }, [
+            fe(d(Pe), {
+              name: "refresh",
+              stroke: e.value.style.chart.color
+            }, null, 8, ["stroke"])
+          ], 4)
+        ], !0)
+      ])) : h("", !0),
+      E.value ? (r(), j(Ht(oe.value.component), it({ key: 8 }, oe.value.props, {
+        ref_key: "tableUnit",
+        ref: J,
+        onClose: o[3] || (o[3] = (a) => X.value.showTable = !1)
+      }), xe({
+        content: x(() => [
+          (r(), j(d(mt), {
+            key: `table_${pe.value}`,
+            colNames: ve.value.colNames,
+            head: ve.value.head,
+            body: ve.value.body,
+            config: ve.value.config,
+            title: e.value.table.useDialog ? "" : oe.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: o[2] || (o[2] = (a) => X.value.showTable = !1)
+          }, {
+            th: x(({ th: a }) => [
+              ct(H(a.name), 1)
+            ]),
+            td: x(({ td: a }) => [
+              I("div", Za, H(a.name ? a.name : Ze(a)), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: x(() => [
+            ct(H(oe.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: x(() => [
+            I("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: o[1] || (o[1] = (a) => Ce(e.value.userOptions.callbacks.csv))
+            }, [
+              fe(d(Pe), {
+                name: "excel",
+                stroke: oe.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : h("", !0),
+      d(De) ? (r(), j(fa, { key: 9 })) : h("", !0)
+    ], 46, Ca));
+  }
+}, ho = /* @__PURE__ */ wa(Ja, [["__scopeId", "data-v-c55191c9"]]);
+export {
+  ho as default
+};