vue-data-ui 3.15.12 → 3.16.1

package/dist/vue-ui-3d-bar-BaFpQnd5.js

@@ -0,0 +1,1597 @@
+import { defineAsyncComponent as Z, computed as M, ref as m, toRefs as Xt, watch as Oe, onMounted as Kt, openBlock as c, createElementBlock as v, unref as s, normalizeStyle as j, normalizeClass as rt, createElementVNode as d, toDisplayString as N, createBlock as Y, createCommentVNode as p, withCtx as C, renderSlot as _, normalizeProps as z, guardReactiveProps as L, createSlots as ut, createVNode as it, Fragment as T, renderList as F, withKeys as dt, withModifiers as ct, mergeProps as Be, resolveDynamicComponent as qt, createTextVNode as vt, nextTick as Ie } from "vue";
+import { j as ht, t as ft, m as Zt, p as $e, n as Yt, s as Jt, o as Qt, q as me, r as Ne, x as G, a4 as pt, K as el, l as B, X as tl, u as w, w as J, k as be, a5 as gt, a6 as _e, a7 as U, a0 as ll, a1 as ol } from "./lib-DBptbyyI.js";
+import { t as al, u as nl } from "./useResponsive-DfdjqQps.js";
+import { u as sl } from "./useConfig-DO94Aj5s.js";
+import { u as rl, B as ul } from "./BaseScanner-BhhkKVoj.js";
+import { u as il } from "./usePrinter-CEpYU3r5.js";
+import { u as dl } from "./useSvgExport-ByUukOZt.js";
+import { u as je } from "./useNestedProp-Bf5XFbs8.js";
+import { u as cl } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as vl } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as hl } from "./useChartAccessibility-9icAAmYg.js";
+import fl from "./img-LXxMLmCg.js";
+import pl from "./Title-BeMKE1cj.js";
+import gl from "./vue_ui_3d_bar-CL0iX8Qi.js";
+import { A as yl } from "./A11yDataTable-KcVAX2cP.js";
+import { _ as kl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const $l = ["id"], ml = ["id"], bl = {
+  "aria-live": "polite",
+  class: "sr-only"
+}, _l = { style: { position: "relative" } }, wl = ["xmlns", "viewBox", "aria-describedby"], xl = ["width", "height"], Cl = ["id"], Pl = ["stop-color"], Al = ["stop-color"], Ml = ["id"], Tl = ["stop-color"], Fl = ["stop-color"], Sl = ["id"], Dl = ["stop-color"], Ol = ["stop-color"], Bl = ["id"], Il = ["stop-color"], Nl = ["stop-color"], jl = ["id"], zl = ["stop-color"], Ll = ["stop-color"], El = ["stop-color"], Vl = ["stop-color"], Wl = ["stop-color"], Rl = { key: 1 }, Gl = ["id"], Ul = ["stop-color"], Hl = ["stop-color"], Xl = ["id"], Kl = ["stop-color"], ql = ["stop-color"], Zl = ["id"], Yl = ["stop-color"], Jl = ["stop-color"], Ql = ["id"], eo = ["x", "y", "font-size", "font-weight", "fill"], to = ["x", "y"], lo = ["cx", "cy", "stroke", "opacity"], oo = ["d", "stroke"], ao = ["d", "stroke"], no = { key: 4 }, so = { key: 0 }, ro = ["stroke-dasharray", "d", "stroke", "stroke-width"], uo = ["stroke-dasharray", "d", "stroke", "stroke-width"], io = ["stroke-dasharray", "d", "stroke", "stroke-width"], co = ["stroke-dasharray", "d", "stroke", "stroke-width"], vo = { key: 1 }, ho = ["d", "stroke", "stroke-width", "fill"], fo = ["d", "stroke", "stroke-width", "fill"], po = ["d", "stroke", "stroke-width", "fill"], go = { key: 2 }, yo = ["aria-label"], ko = ["d", "fill", "onMouseenter", "onClick", "onMouseout"], $o = ["d", "fill", "onMouseenter", "onClick", "onMouseout"], mo = ["d", "fill", "onMouseenter", "onClick", "onMouseout"], bo = ["d", "onMouseenter", "onClick", "onMouseout"], _o = ["d"], wo = ["d", "stroke"], xo = ["onClick"], Co = ["stroke", "d"], Po = ["cx", "cy", "fill", "stroke"], Ao = ["x", "y", "width", "height"], Mo = ["x", "y", "width", "height"], To = { key: 3 }, Fo = ["d", "stroke"], So = ["d", "fill", "stroke"], Do = { key: 0 }, Oo = ["text-anchor", "x", "y", "fill", "font-size", "font-weight"], Bo = ["text-anchor", "x", "y", "fill", "font-size", "font-weight"], Io = { key: 4 }, No = ["d", "fill", "stroke"], jo = { key: 5 }, zo = { key: 0 }, Lo = ["stroke-dasharray", "d", "stroke", "stroke-width"], Eo = ["stroke-dasharray", "d", "stroke", "stroke-width"], Vo = ["stroke-dasharray", "d", "stroke", "stroke-width"], Wo = ["stroke-dasharray", "d", "stroke", "stroke-width"], Ro = ["d", "stroke", "stroke-width", "fill"], Go = ["d", "stroke", "stroke-width", "fill"], Uo = ["d"], Ho = { key: 1 }, Xo = ["aria-label"], Ko = ["id"], qo = ["stop-color"], Zo = ["stop-color"], Yo = ["id"], Jo = ["stop-color"], Qo = ["stop-color"], ea = ["stop-color"], ta = ["stop-color"], la = ["stop-color"], oa = ["onMouseenter", "onClick", "onMouseout", "d", "fill"], aa = ["onMouseenter", "onClick", "onMouseout", "d"], na = ["onMouseenter", "onClick", "onMouseout", "d", "fill"], sa = ["onClick"], ra = ["stroke", "d"], ua = ["cx", "cy", "fill", "stroke"], ia = ["x", "y", "width", "height"], da = ["x", "y", "width", "height"], ca = { key: 3 }, va = ["d", "stroke"], ha = ["d", "fill", "stroke"], fa = { key: 0 }, pa = ["text-anchor", "x", "y", "fill", "font-size", "font-weight"], ga = ["text-anchor", "x", "y", "fill", "font-size", "font-weight"], ya = { key: 4 }, ka = ["d", "fill", "stroke"], $a = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, ma = ["innerHTML"], ba = {
+  __name: "vue-ui-3d-bar",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  emits: ["selectDatapoint", "copyAlt"],
+  setup(yt, { expose: kt, emit: $t }) {
+    const mt = Z(() => import("./BaseIcon-Cb3zzG6s.js")), bt = Z(() => import("./vue-ui-accordion-nvggWcGN.js")), _t = Z(() => import("./DataTable-DT2kIdQ6.js")), wt = Z(() => import("./PenAndPaper-Ct3qJ4lA.js")), xt = Z(() => import("./UserOptions-rW2fRf3V.js")), Ct = Z(() => import("./PackageVersion-DPO-OOVI.js")), Pt = Z(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_3d_bar: At } = sl(), { isThemeValid: Mt, warnInvalidTheme: Tt } = cl(), O = yt, ce = $t, ze = M(() => !!O.dataset && Object.keys(O.dataset).length), A = m(ht()), V = m(null), I = m(!1), Le = m(0), Ee = m(0), Ve = m(null), se = m(null), ve = m(null), We = m(null), H = m(!1), re = m(null), we = m(null), he = m(!1), fe = m(!1), E = m(null), X = m(""), e = m(Ce()), pe = M(() => e.value.userOptions.useCursorPointer), Ft = M(() => ft({
+      defaultConfig: {
+        customPalette: ["#808080", "#ADADAD", "#DBDBDB"],
+        userOptions: { show: !1 },
+        table: { show: !1 },
+        style: {
+          chart: {
+            backgroundColor: "#99999930",
+            color: "#6A6A6A",
+            bar: {
+              color: "#ADADAD",
+              stroke: "#6A6A6A"
+            },
+            box: {
+              stroke: "#6A6A6A"
+            }
+          }
+        }
+      },
+      userConfig: e.value.skeletonConfig ?? {}
+    })), { loading: Q, FINAL_DATASET: D } = rl({
+      ...Xt(O),
+      FINAL_CONFIG: e,
+      prepareConfig: Ce,
+      callback: () => {
+        Promise.resolve().then(async () => {
+          await Ie(), Ke();
+        });
+      },
+      skeletonDataset: O.config?.skeletonDataset ?? {
+        series: [
+          {
+            name: "_",
+            value: 21,
+            breakdown: [
+              { name: "_", value: 13 },
+              { name: "_", value: 8 }
+            ]
+          },
+          {
+            name: "_",
+            value: 13,
+            breakdown: [
+              { name: "_", value: 8 },
+              { name: "_", value: 5 }
+            ]
+          },
+          {
+            name: "_",
+            value: 8,
+            breakdown: [
+              { name: "_", value: 5 },
+              { name: "_", value: 3 }
+            ]
+          }
+        ]
+      },
+      skeletonConfig: ft({
+        defaultConfig: e.value,
+        userConfig: Ft.value
+      })
+    }), { userOptionsVisible: xe, setUserOptionsVisibility: Re, keepUserOptionState: Ge } = vl({ config: e.value }), { svgRef: ue } = hl({ config: e.value.style.chart.title });
+    function Ce() {
+      const o = je({
+        userConfig: O.config,
+        defaultConfig: At
+      }), a = o.theme;
+      if (!a) return o;
+      if (!Mt.value(o))
+        return Tt(o), o;
+      const t = je({
+        userConfig: gl[a] || O.config,
+        defaultConfig: o
+      }), i = je({
+        userConfig: O.config,
+        defaultConfig: t
+      });
+      return {
+        ...i,
+        customPalette: i.customPalette.length ? i.customPalette : Zt[a] || $e
+      };
+    }
+    Oe(() => O.config, (o) => {
+      Q.value || (e.value = Ce()), xe.value = !e.value.userOptions.showOnChartHover, qe(), Le.value += 1, Ee.value += 1, K.value.showTable = e.value.table.show;
+    }, { deep: !0 });
+    const { isPrinting: Pe, isImaging: Ae, generatePdf: Ue, generateImage: He } = il({
+      elementId: `3d_bar_${A.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-3d-bar",
+      options: e.value.userOptions.print
+    }), St = M(() => Yt(e.value.customPalette)), K = m({
+      showTable: e.value.table.show
+    });
+    Oe(e, () => {
+      K.value = {
+        showTable: e.value.table.show
+      };
+    }, { immediate: !0 });
+    const x = M(() => D.value.series && D.value.series.length), Me = m(e.value.style.chart.box.dimensions.width * (x.value ? 2 : 1)), Xe = m(e.value.style.chart.box.dimensions.height), n = M(() => ({
+      height: Xe.value,
+      width: Me.value,
+      absoluteWidth: Me.value,
+      top: e.value.style.chart.box.dimensions.top,
+      bottom: e.value.style.chart.box.dimensions.bottom,
+      left: e.value.style.chart.box.dimensions.left,
+      right: e.value.style.chart.box.dimensions.right,
+      perspective: e.value.style.chart.box.dimensions.perspective
+    })), y = M(() => {
+      if (x.value) {
+        const o = D.value.series.map((l) => l.value || 0).reduce((l, r) => l + r, 0), a = D.value.series.map((l, r) => ({
+          ...l,
+          seriesIndex: r,
+          id: ht(),
+          proportion: (l.value || 0) / o,
+          color: Jt(l.color) || St.value[r] || $e[r] || $e[r % $e.length],
+          breakdown: l.breakdown ? l.breakdown.sort((u, $) => $.value - u.value) : null
+        })).sort((l, r) => r.value - l.value), t = [];
+        let i = 0;
+        for (let l = 0; l < a.length; l += 1)
+          t.push({
+            ...a[l],
+            fill: Dt(i, a[l].proportion, a[l].breakdown, a[l].color)
+          }), i += a[l].proportion;
+        return t;
+      }
+      return null;
+    }), W = M(() => {
+      const o = n.value.width / 2;
+      return {
+        right: `M${o},${n.value.top} ${n.value.width - n.value.right}, ${n.value.top + n.value.perspective} ${n.value.width - n.value.right},${n.value.height - n.value.bottom - n.value.perspective} ${o},${n.value.height - n.value.bottom}`,
+        left: `M${o},${n.value.top} ${n.value.left},${n.value.top + n.value.perspective} ${n.value.left},${n.value.height - n.value.bottom - n.value.perspective} ${o},${n.value.height - n.value.bottom}`,
+        side: `M${o},${n.value.height - n.value.bottom} ${o},${n.value.top + n.value.perspective * 2}`,
+        topSides: `M${n.value.left},${n.value.top + n.value.perspective} ${o},${n.value.top + n.value.perspective * 2} ${n.value.width - n.value.right},${n.value.top + n.value.perspective}`,
+        tubeTop: `M${n.value.left},${n.value.top + n.value.perspective} C ${n.value.left},${n.value.top - n.value.perspective / 3} ${n.value.width - n.value.right},${n.value.top - n.value.perspective / 3} ${n.value.width - n.value.right},${n.value.top + n.value.perspective} C ${n.value.width - n.value.right},${n.value.top + n.value.perspective * 2.3} ${n.value.left},${n.value.top + n.value.perspective * 2.3} ${n.value.left},${n.value.top + n.value.perspective}`,
+        tubeLeft: `M${n.value.left},${n.value.top + n.value.perspective} ${n.value.left},${n.value.height - n.value.bottom - n.value.perspective}`,
+        tubeRight: `M${n.value.width - n.value.right},${n.value.top + n.value.perspective} ${n.value.width - n.value.right},${n.value.height - n.value.bottom - n.value.perspective}`,
+        tubeBottom: `M${n.value.width - n.value.right},${n.value.height - n.value.bottom - n.value.perspective} C ${n.value.width - n.value.right},${n.value.height} ${n.value.left},${n.value.height} ${n.value.left},${n.value.height - n.value.bottom - n.value.perspective}`
+      };
+    }), ee = m(e.value.style.chart.animation.use ? 0 : D.value.percentage);
+    function Ke() {
+      let o = 0, a = e.value.style.chart.animation.speed, t = 5e-3 * e.value.style.chart.animation.acceleration;
+      function i() {
+        ee.value += a + o, o += t, ee.value < D.value.percentage ? requestAnimationFrame(i) : ee.value = D.value.percentage;
+      }
+      e.value.style.chart.animation.use && (ee.value = 0, i());
+    }
+    Kt(() => {
+      qe(), Ke();
+    });
+    const ge = M(() => !!e.value.debug);
+    function qe() {
+      if (Qt(O.dataset) ? me({
+        componentName: "VueUi3dBar",
+        type: "dataset",
+        debug: ge.value
+      }) : O.dataset.series ? O.dataset.series.forEach((o, a) => {
+        Ne({
+          datasetObject: o,
+          requiredAttributes: ["name", "value"]
+        }).forEach((t) => {
+          me({
+            componentName: "VueUi3dBar",
+            type: "datasetSerieAttribute",
+            property: t,
+            index: a,
+            debug: ge.value
+          });
+        }), o.breakdown && o.breakdown.forEach((t, i) => {
+          Ne({
+            datasetObject: t,
+            requiredAttributes: ["name", "value"]
+          }).forEach((l) => {
+            me({
+              componentName: "VueUi3dBar",
+              type: "datasetSerieAttribute",
+              property: l,
+              index: `${a} - ${i}`,
+              debug: ge.value
+            });
+          });
+        });
+      }) : Ne({
+        datasetObject: O.dataset,
+        requiredAttributes: ["percentage"]
+      }).forEach((o) => {
+        me({
+          componentName: "VueUi3dBar",
+          type: "datasetAttribute",
+          property: o,
+          debug: ge.value
+        });
+      }), e.value.responsive) {
+        const o = al(() => {
+          const { width: a, height: t } = nl({
+            chart: V.value,
+            title: e.value.style.chart.title.text ? Ve.value : null,
+            source: We.value
+          });
+          requestAnimationFrame(() => {
+            Xe.value = t - 12, Me.value = a;
+          });
+        });
+        se.value && (ve.value && se.value.unobserve(ve.value), se.value.disconnect()), se.value = new ResizeObserver(o), ve.value = V.value.parentNode, se.value.observe(ve.value);
+      }
+    }
+    const te = M(() => n.value.width / 4);
+    function Dt(o, a, t, i) {
+      const l = n.value.height - n.value.bottom - n.value.top - n.value.perspective * 2, { width: r, height: u, bottom: $, right: R, left: k, perspective: g } = n.value, f = x.value ? r / 4 : r / 2, P = f * 2 + k, h = $ + l * o, De = u - h - g - l * a / 2, Gt = De > n.value.height / 2 ? "top" : "bottom", ot = u * 0.25, Ut = !!t;
+      let at = null, nt = null;
+      return Ut && (t = t.map((st, Ht) => ({
+        ...st,
+        value: st.value || 0,
+        color: G(i, Ht / t.length)
+      })), at = pt(
+        { series: t },
+        r / 2 + r / 5,
+        Gt === "top" ? De - ot : De + ot,
+        r / 10,
+        r / 10,
+        1.99999,
+        2,
+        1,
+        360,
+        105.25,
+        r / 20
+      ), nt = pt(
+        { series: t },
+        r - P + r / 14,
+        u - h - g - l * a / 2,
+        r / 40,
+        r / 40,
+        1.99999,
+        2,
+        1,
+        360,
+        105.25,
+        r / 40
+      )), {
+        donut: at,
+        miniDonut: nt,
+        donutR: r / 20,
+        CENTER_X: f,
+        sidePointer: {
+          x: r - P,
+          x2: r - P + r / 14,
+          xText: r - P + r / 9,
+          y: u - h - g - l * a / 2,
+          topY: u - h - g - l * a,
+          height: l * a
+        },
+        apexBottom: { y: u - h, x: f },
+        apexTop: { y: u - h - l * a, x: f },
+        right: `M${f},${u - h} ${f},${u - h - l * a} ${r - P},${u - h - g - l * a} ${r - P},${u - h - g}Z`,
+        left: `M${f},${u - h} ${f},${u - h - l * a} ${k}, ${u - h - g - l * a} ${k},${u - h - g}Z`,
+        liningTop: `M${k},${u - h - g - l * a} ${f},${u - h - l * a} ${r - P},${u - h - g - l * a}`,
+        liningTopShade: `M${k},${u - h - g - l * a - 0.5} ${f},${u - h - l * a - 0.5} ${r - P},${u - h - g - l * a - 0.5}`,
+        top: `M${f},${u - h - l * a} ${k},${u - h - g - l * a} ${f},${u - h - g * 2 - l * a} ${r - P},${u - h - g - l * a} Z`,
+        tubeTop: `M${k},${u - h - l * a - g} C ${k},${u - h - l * a - g * 2.5} ${r - P},${u - h - l * a - g * 2.5} ${r - P},${u - h - l * a - g} C ${r - P},${u - h - l * a + g / 2} ${k},${u - h - l * a + g / 2} ${k},${u - h - l * a - g}`,
+        bottomTubeTop: `M ${r - P - 0.5},${u - h - g} C ${r - P - 0.5},${u - h + g / 2} ${k},${u - h + g / 2} ${k + 0.5},${u - h - g}`,
+        tubeBody: `M
+        ${k},${u - h - l * a - g} 
+        C ${k},${u - h - l * a + g / 2} 
+        ${r - P},${u - h - l * a + g / 2} 
+        ${r - P},${u - h - l * a - g} 
+        L${r - P},${u - h - g}
+        C 
+        ${r - P},${u - h + g / 2}
+        ${k},${u - h + g / 2}
+        ${k},${u - h - g}Z`
+      };
+    }
+    const le = M(() => {
+      const o = el(ee.value / 100), a = n.value.height - n.value.bottom - n.value.top - n.value.perspective * 2, { width: t, height: i, bottom: l, right: r, left: u, perspective: $ } = n.value, R = x.value ? t / 4 : t / 2, k = x.value ? R * 2 + u : r, f = l + a * 0;
+      return {
+        right: `M${R},${i - f} ${R},${i - f - a * o} ${t - k},${i - f - $ - a * o} ${t - k},${i - f - $}Z`,
+        left: `M${R},${i - f} ${R},${i - f - a * o} ${u}, ${i - f - $ - a * o} ${u},${i - f - $}Z`,
+        top: `M${R},${i - f - a * o} ${u},${i - f - $ - a * o} ${R},${i - f - $ * 2 - a * o} ${t - k},${i - f - $ - a * o} Z`,
+        tubeTop: `M${u},${i - f - a * o - $} C ${u},${i - f - a * o - $ * 2.5} ${t - k},${i - f - a * o - $ * 2.5} ${t - k},${i - f - a * o - $} C ${t - k},${i - f - a * o + $ / 2} ${u},${i - f - a * o + $ / 2} ${u},${i - f - a * o - $}`,
+        tubeBody: `M
+        ${u},${i - f - a * o - $} 
+        C ${u},${i - f - a * o + $ / 2} 
+        ${t - k},${i - f - a * o + $ / 2} 
+        ${t - k},${i - f - a * o - $} 
+        L${t - k},${i - $ * 1.5}
+        C 
+        ${t - k},${i}
+        ${u},${i}
+        ${u},${i - f - $}Z`
+      };
+    }), b = m(null);
+    function S(o, a = !1) {
+      e.value.events.datapointEnter && !a && e.value.events.datapointEnter({ datapoint: o, seriesIndex: o.seriesIndex }), e.value.events.datapointClick && a && e.value.events.datapointClick({ datapoint: o, seriesIndex: o.seriesIndex }), ce("selectDatapoint", o);
+      const t = y.value?.findIndex((i) => i.id === o.id) ?? null;
+      t !== null && t !== -1 && (E.value = t, X.value = de(o)), a || (b.value = o.id), a && I.value && (I.value = !1), a && !I.value && (I.value = !0);
+    }
+    function q(o) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: o, seriesIndex: o.seriesIndex }), !I.value && (b.value = null, E.value = null, X.value = "");
+    }
+    function oe(o, a, t = !1) {
+      const i = D.value.series.map((u) => u.value || 0).reduce((u, $) => u + $, 0), l = isNaN(o.value / i) ? 0 : o.value / i * 100, r = isNaN(o.value / Ze(a)) ? 0 : o.value / Ze(a) * 100;
+      return t ? r : l.toFixed(0) + "%";
+    }
+    function Ze(o) {
+      return [...o].map((a) => a.value).reduce((a, t) => a + t, 0);
+    }
+    const ye = m(!1);
+    function Ye(o) {
+      ye.value = o;
+    }
+    function Ot() {
+      return x.value ? y.value : D.value.percentage;
+    }
+    const ae = M(() => {
+      if (x.value) {
+        const o = y.value.flatMap((t) => t.breakdown && t.breakdown.length ? [{ name: t.name, color: t.color }, ...t.breakdown.map((i, l) => ({
+          name: i.name,
+          color: G(t.color, l / t.breakdown.length)
+        }))] : {
+          name: t.name,
+          color: t.color
+        }), a = y.value.flatMap((t) => t.breakdown && t.breakdown.length ? [t.value, ...t.breakdown.map((i) => i.value)] : t.value);
+        return { head: o, body: a };
+      } else
+        return null;
+    });
+    function Te(o = null) {
+      if (!x.value) {
+        console.warn("VueUi3dBar : CSV download is only available in stack mode (providing dataset.series instead of dataset.percentage)");
+        return;
+      }
+      Ie(() => {
+        const a = y.value.map((r) => r.value).reduce((r, u) => r + u, 0), t = ae.value.head.map((r, u) => [[
+          r.name
+        ], [ae.value.body[u]], [isNaN(ae.value.body[u] / a) ? "-" : ae.value.body[u] / a * 100]]), i = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[""], ["val"], ["%"]]].concat(t), l = ll(i);
+        o ? o(l) : ol({ csvContent: l, title: e.value.style.chart.title.text || "vue-ui-3d-bar" });
+      });
+    }
+    const ne = M(() => {
+      if (!x.value || !Array.isArray(y.value) || !y.value.length)
+        return {
+          colNames: [],
+          head: [],
+          body: [],
+          a11yBody: [],
+          config: {
+            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,
+            shape: e.value.style.shape === "tube" ? "circle" : "square"
+          }
+        };
+      const o = y.value.reduce((l, r) => l + r.value, 0), a = [
+        ' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>',
+        B({
+          p: e.value.style.chart.legend.prefix,
+          v: o,
+          s: e.value.style.chart.legend.suffix,
+          r: e.value.table.td.roundingValue
+        }),
+        "100%"
+      ], t = ae.value.head.map((l, r) => {
+        const u = ae.value.body[r];
+        return [
+          {
+            color: l.color,
+            name: l.name
+          },
+          B({
+            p: e.value.style.chart.legend.prefix,
+            v: u,
+            s: e.value.style.chart.legend.suffix,
+            r: e.value.table.td.roundingValue
+          }),
+          isNaN(u / o) ? "-" : B({
+            v: u / o * 100,
+            s: "%",
+            r: e.value.table.td.roundingPercentage
+          })
+        ];
+      }), i = t.map((l) => l.map((r, u) => u === 0 ? r.name : r));
+      return {
+        colNames: [
+          e.value.table.columnNames.series,
+          e.value.table.columnNames.value,
+          e.value.table.columnNames.percentage
+        ],
+        head: a,
+        body: t,
+        a11yBody: i,
+        config: {
+          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,
+          shape: e.value.style.shape === "tube" ? "circle" : "square"
+        }
+      };
+    });
+    function Je() {
+      K.value.showTable = !K.value.showTable;
+    }
+    const ke = m(!1);
+    function Fe() {
+      ke.value = !ke.value;
+    }
+    async function Bt({ scale: o = 2 } = {}) {
+      if (!V.value) return;
+      const { width: a, height: t } = V.value.getBoundingClientRect(), i = a / t, { imageUri: l, base64: r } = await fl({ domElement: V.value, base64: !0, img: !0, scale: o });
+      return {
+        imageUri: l,
+        base64: r,
+        title: e.value.style.chart.title.text,
+        width: a,
+        height: t,
+        aspectRatio: i
+      };
+    }
+    const ie = M(() => {
+      const o = e.value.table.useDialog && !e.value.table.show, a = K.value.showTable;
+      return {
+        component: o ? Pt : bt,
+        title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? `: ${e.value.style.chart.title.subtitle.text}` : ""}`,
+        props: o ? {
+          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: ye.value,
+          fullscreenParent: V.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8)
+        } : {
+          hideDetails: !0,
+          config: {
+            open: a,
+            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
+            }
+          }
+        }
+      };
+    });
+    Oe(() => K.value.showTable, (o) => {
+      e.value.table.show || (o && e.value.table.useDialog && re.value ? re.value.open() : "close" in re.value && re.value.close());
+    });
+    function Qe() {
+      K.value.showTable = !1, we.value && we.value.setTableIconState(!1);
+    }
+    const It = M(() => e.value.style.chart.backgroundColor), Nt = M(() => e.value.style.chart.title), { exportSvg: jt, getSvg: zt } = dl({
+      svg: ue,
+      title: Nt,
+      backgroundColor: It
+    });
+    async function et({ isCb: o }) {
+      he.value = !0, await Ie();
+      try {
+        if (o) {
+          const { blob: a, url: t, text: i, dataUrl: l } = await zt();
+          await Promise.resolve(e.value.userOptions.callbacks.svg({ blob: a, url: t, text: i, dataUrl: l }));
+        } else
+          await Promise.resolve(jt());
+      } finally {
+        he.value = !1;
+      }
+    }
+    function Lt(o) {
+      if (o?.stage === "start") {
+        fe.value = !0;
+        return;
+      }
+      if (o?.stage === "end") {
+        fe.value = !1;
+        return;
+      }
+      He();
+    }
+    async function tt() {
+      if (ce("copyAlt", {
+        config: e.value,
+        dataset: D.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: D.value }));
+    }
+    function Et() {
+      E.value = null, X.value = "", I.value = !1, b.value = null;
+    }
+    function de(o) {
+      if (!o) return "";
+      const a = B({
+        p: e.value.style.chart.legend.prefix,
+        v: o.value,
+        s: e.value.style.chart.legend.suffix,
+        r: e.value.style.chart.legend.roundingValue
+      }), t = B({
+        v: o.proportion * 100,
+        s: "%",
+        r: e.value.style.chart.legend.roundingPercentage
+      });
+      return `${o.name}: ${a}, ${t}`;
+    }
+    function lt(o) {
+      if (!x.value || !y.value?.length) return;
+      const a = y.value[o];
+      a && (E.value = o, b.value = a.id, X.value = de(a));
+    }
+    function Vt() {
+      H.value = !0, !(!x.value || !y.value?.length) && E.value === null && lt(0);
+    }
+    function Wt() {
+      H.value = !1, I.value || (E.value = null, b.value = null, X.value = "");
+    }
+    function Rt(o) {
+      if (!x.value || !y.value?.length || !ue.value || document.activeElement !== ue.value) return;
+      const a = ["ArrowLeft", "ArrowDown"].includes(o.key), t = ["ArrowRight", "ArrowUp"].includes(o.key), i = o.key === "Enter" || o.key === " ", l = o.key === "Escape";
+      if (!a && !t && !i && !l) return;
+      if (o.preventDefault(), o.stopPropagation(), l) {
+        Et();
+        return;
+      }
+      if (i) {
+        if (E.value === null) return;
+        const u = y.value[E.value];
+        if (!u) return;
+        S(u, !0), X.value = `${de(u)} selected`;
+        return;
+      }
+      let r = E.value;
+      r === null || r < 0 || r >= y.value.length ? r = t ? 0 : y.value.length - 1 : t ? (r += 1, r >= y.value.length && (r = 0)) : a && (r -= 1, r < 0 && (r = y.value.length - 1)), lt(r);
+    }
+    const Se = M(() => ({
+      headers: ne.value?.colNames ?? [],
+      rows: ne.value?.a11yBody ?? []
+    }));
+    return kt({
+      getImage: Bt,
+      generateCsv: Te,
+      generatePdf: Ue,
+      generateImage: He,
+      generateSvg: et,
+      getData: Ot,
+      toggleTable: Je,
+      toggleAnnotator: Fe,
+      toggleFullscreen: Ye,
+      copyAlt: tt
+    }), (o, a) => (c(), v("div", {
+      ref_key: "bar3dChart",
+      ref: V,
+      class: rt("vue-data-ui-component vue-ui-3d-bar"),
+      style: j(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      id: `3d_bar_${A.value}`,
+      onMouseenter: a[8] || (a[8] = () => s(Re)(!0)),
+      onMouseleave: a[9] || (a[9] = () => s(Re)(!1))
+    }, [
+      d("div", {
+        id: `chart-instructions-${A.value}`,
+        class: "sr-only"
+      }, [
+        d("p", null, N(e.value.a11y.translations.keyboardNavigation), 1)
+      ], 8, ml),
+      d("div", bl, N(X.value), 1),
+      Se.value?.rows?.length ? (c(), Y(yl, {
+        key: 0,
+        uid: A.value,
+        head: Se.value.headers,
+        body: Se.value.rows,
+        notice: e.value.a11y.translations.tableAvailable,
+        caption: e.value.a11y.translations.tableCaption
+      }, null, 8, ["uid", "head", "body", "notice", "caption"])) : p("", !0),
+      e.value.userOptions.buttons.annotator ? (c(), Y(s(wt), {
+        key: 1,
+        svgRef: s(ue),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: ke.value,
+        isCursorPointer: pe.value,
+        onClose: Fe
+      }, {
+        "annotator-action-close": C(() => [
+          _(o.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": C(({ color: t }) => [
+          _(o.$slots, "annotator-action-color", z(L({ color: t })), void 0, !0)
+        ]),
+        "annotator-action-draw": C(({ mode: t }) => [
+          _(o.$slots, "annotator-action-draw", z(L({ mode: t })), void 0, !0)
+        ]),
+        "annotator-action-undo": C(({ disabled: t }) => [
+          _(o.$slots, "annotator-action-undo", z(L({ disabled: t })), void 0, !0)
+        ]),
+        "annotator-action-redo": C(({ disabled: t }) => [
+          _(o.$slots, "annotator-action-redo", z(L({ disabled: t })), void 0, !0)
+        ]),
+        "annotator-action-delete": C(({ disabled: t }) => [
+          _(o.$slots, "annotator-action-delete", z(L({ disabled: t })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : p("", !0),
+      e.value.style.chart.title.text ? (c(), v("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: Ve,
+        style: "width:100%;background:transparent"
+      }, [
+        (c(), Y(pl, {
+          key: `title_${Le.value}`,
+          config: {
+            title: {
+              cy: "3dBar-div-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "3dBar-div-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : p("", !0),
+      e.value.userOptions.show && ze.value && (s(Ge) || s(xe)) ? (c(), Y(s(xt), {
+        key: 3,
+        ref_key: "userOptionsRef",
+        ref: we,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: s(Pe),
+        isImaging: s(Ae),
+        uid: A.value,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasTable: !!x.value && e.value.userOptions.buttons.table,
+        hasXls: !!x.value && e.value.userOptions.buttons.csv,
+        hasImg: e.value.userOptions.buttons.img,
+        hasSvg: e.value.userOptions.buttons.svg,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        hasAltCopy: e.value.userOptions.buttons.altCopy,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: V.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: ke.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        tableDialog: e.value.table.useDialog,
+        isCursorPointer: pe.value,
+        onToggleFullscreen: Ye,
+        onGeneratePdf: s(Ue),
+        onGenerateCsv: Te,
+        onGenerateImage: Lt,
+        onGenerateSvg: et,
+        onToggleTable: Je,
+        onToggleAnnotator: Fe,
+        onCopyAlt: tt,
+        style: j({
+          visibility: s(Ge) ? s(xe) ? "visible" : "hidden" : "visible"
+        })
+      }, ut({ _: 2 }, [
+        o.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: C(({ isOpen: t, color: i }) => [
+            _(o.$slots, "menuIcon", z(L({ isOpen: t, color: i })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        o.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: C(() => [
+            _(o.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        o.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: C(() => [
+            _(o.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        o.$slots.optionImg ? {
+          name: "optionImg",
+          fn: C(() => [
+            _(o.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        o.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: C(() => [
+            _(o.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        o.$slots.optionTable ? {
+          name: "optionTable",
+          fn: C(() => [
+            _(o.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        o.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: C(({ toggleFullscreen: t, isFullscreen: i }) => [
+            _(o.$slots, "optionFullscreen", z(L({ toggleFullscreen: t, isFullscreen: i })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        o.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: C(({ toggleAnnotator: t, isAnnotator: i }) => [
+            _(o.$slots, "optionAnnotator", z(L({ toggleAnnotator: t, isAnnotator: i })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        o.$slots.optionAltCopy ? {
+          name: "optionAltCopy",
+          fn: C(({ altCopy: t }) => [
+            _(o.$slots, "optionAltCopy", z(L({ altCopy: t })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasTable", "hasXls", "hasImg", "hasSvg", "hasFullscreen", "hasAltCopy", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : p("", !0),
+      d("div", _l, [
+        (c(), v("svg", {
+          ref_key: "svgRef",
+          ref: ue,
+          xmlns: s(tl),
+          class: rt({ "vue-data-ui-fullscreen--on": ye.value, "vue-data-ui-fulscreen--off": !ye.value, animated: e.value.useCssAnimation }),
+          viewBox: `0 0 ${n.value.absoluteWidth} ${n.value.height}`,
+          style: j(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`),
+          tabindex: "0",
+          "aria-describedby": `chart-instructions-${A.value}`,
+          onFocus: Vt,
+          onBlur: Wt,
+          onKeydown: Rt
+        }, [
+          it(s(Ct)),
+          o.$slots["chart-background"] ? (c(), v("foreignObject", {
+            key: 0,
+            x: 0,
+            y: 0,
+            width: n.value.absoluteWidth,
+            height: n.value.height,
+            style: {
+              pointerEvents: "none"
+            }
+          }, [
+            _(o.$slots, "chart-background", {}, void 0, !0)
+          ], 8, xl)) : p("", !0),
+          d("defs", null, [
+            d("radialGradient", {
+              id: `gradient_top${A.value}`
+            }, [
+              d("stop", {
+                offset: "0%",
+                "stop-color": s(w)(e.value.style.chart.backgroundColor, 0)
+              }, null, 8, Pl),
+              d("stop", {
+                offset: "100%",
+                "stop-color": e.value.style.chart.bar.color
+              }, null, 8, Al)
+            ], 8, Cl),
+            d("radialGradient", {
+              id: `gradient_tube_top${A.value}`
+            }, [
+              d("stop", {
+                offset: "0%",
+                "stop-color": s(w)(s(G)(e.value.style.chart.bar.color, 0.5), 80)
+              }, null, 8, Tl),
+              d("stop", {
+                offset: "100%",
+                "stop-color": s(w)(s(J)(e.value.style.chart.bar.color, 0.1), 80)
+              }, null, 8, Fl)
+            ], 8, Ml),
+            d("radialGradient", {
+              id: `gradient_left${A.value}`
+            }, [
+              d("stop", {
+                offset: "0%",
+                "stop-color": s(w)(e.value.style.chart.backgroundColor, 0)
+              }, null, 8, Dl),
+              d("stop", {
+                offset: "100%",
+                "stop-color": s(w)(e.value.style.chart.bar.color, 20)
+              }, null, 8, Ol)
+            ], 8, Sl),
+            d("radialGradient", {
+              id: `gradient_right${A.value}`
+            }, [
+              d("stop", {
+                offset: "0%",
+                "stop-color": s(w)(e.value.style.chart.backgroundColor, 0)
+              }, null, 8, Il),
+              d("stop", {
+                offset: "100%",
+                "stop-color": s(w)(e.value.style.chart.bar.color, 20)
+              }, null, 8, Nl)
+            ], 8, Bl),
+            d("linearGradient", {
+              id: `gradient_tube_body${A.value}`,
+              x1: "0%",
+              y1: "0%",
+              x2: "100%",
+              y2: "0%"
+            }, [
+              d("stop", {
+                offset: "0%",
+                "stop-color": `${e.value.style.chart.bar.color}`
+              }, null, 8, zl),
+              d("stop", {
+                offset: "10%",
+                "stop-color": s(w)(s(J)(e.value.style.chart.bar.color, 0.7), 100)
+              }, null, 8, Ll),
+              d("stop", {
+                offset: "25%",
+                "stop-color": s(w)(s(J)(e.value.style.chart.bar.color, 0.5), 100)
+              }, null, 8, El),
+              d("stop", {
+                offset: "75%",
+                "stop-color": s(w)(e.value.style.chart.bar.color, 80)
+              }, null, 8, Vl),
+              d("stop", {
+                offset: "100%",
+                "stop-color": s(w)(s(G)(e.value.style.chart.bar.color, 0.7), 100)
+              }, null, 8, Wl)
+            ], 8, jl)
+          ]),
+          x.value ? (c(), v("defs", Rl, [
+            (c(!0), v(T, null, F(y.value, (t) => (c(), v("radialGradient", {
+              id: `grad_top_${t.id}`
+            }, [
+              d("stop", {
+                offset: "0%",
+                "stop-color": s(w)(s(G)(t.color, 0.5), 80)
+              }, null, 8, Ul),
+              d("stop", {
+                offset: "100%",
+                "stop-color": t.color
+              }, null, 8, Hl)
+            ], 8, Gl))), 256)),
+            (c(!0), v(T, null, F(y.value, (t) => (c(), v("linearGradient", {
+              id: `grad_left_${t.id}`
+            }, [
+              d("stop", {
+                offset: "0%",
+                "stop-color": s(w)(t.color, 80)
+              }, null, 8, Kl),
+              d("stop", {
+                offset: "100%",
+                "stop-color": s(w)(s(J)(t.color, 0.5), 100)
+              }, null, 8, ql)
+            ], 8, Xl))), 256)),
+            (c(!0), v(T, null, F(y.value, (t) => (c(), v("linearGradient", {
+              id: `grad_right_${t.id}`
+            }, [
+              d("stop", {
+                offset: "2%",
+                "stop-color": s(w)(s(G)(t.color, 0.5), 100)
+              }, null, 8, Yl),
+              d("stop", {
+                offset: "100%",
+                "stop-color": s(w)(t.color, 80)
+              }, null, 8, Jl)
+            ], 8, Zl))), 256)),
+            d("linearGradient", {
+              x1: "0%",
+              y1: "0%",
+              x2: "0%",
+              y2: "100%",
+              id: `vertical_line_${A.value}`
+            }, [...a[10] || (a[10] = [
+              d("stop", {
+                offset: "0%",
+                "stop-color": "#FFFFFF"
+              }, null, -1),
+              d("stop", {
+                offset: "100%",
+                "stop-color": "#FFFFFF33"
+              }, null, -1)
+            ])], 8, Ql)
+          ])) : p("", !0),
+          e.value.style.chart.dataLabel.show && ![null, void 0].includes(s(D).percentage) && [null, void 0].includes(s(D).series) ? (c(), v("text", {
+            key: 2,
+            x: n.value.width / 2,
+            y: n.value.top - e.value.style.chart.dataLabel.fontSize / 2,
+            "font-size": e.value.style.chart.dataLabel.fontSize,
+            "font-weight": e.value.style.chart.dataLabel.bold ? "bold" : "normal",
+            fill: e.value.style.chart.dataLabel.color,
+            "text-anchor": "middle"
+          }, N(s(B)({
+            v: ee.value,
+            s: "%",
+            r: e.value.style.chart.dataLabel.rounding
+          })), 9, eo)) : p("", !0),
+          I.value ? (c(), v("g", {
+            key: 3,
+            role: "button",
+            tabindex: "0",
+            "aria-label": "Clear selection",
+            onClick: a[0] || (a[0] = (t) => {
+              I.value = !1, b.value = null;
+            }),
+            onKeydown: [
+              a[1] || (a[1] = dt(ct((t) => {
+                I.value = !1, b.value = null;
+              }, ["prevent"]), ["enter"])),
+              a[2] || (a[2] = dt(ct((t) => {
+                I.value = !1, b.value = null;
+              }, ["prevent"]), ["space"]))
+            ],
+            onFocus: a[3] || (a[3] = (t) => H.value = !0),
+            onBlur: a[4] || (a[4] = (t) => H.value = !1),
+            onMouseenter: a[5] || (a[5] = (t) => H.value = !0),
+            onMouseleave: a[6] || (a[6] = (t) => H.value = !1),
+            class: "svg-btn",
+            "data-dom-to-png-ignore": "",
+            style: j({
+              cursor: pe.value ? "pointer" : "default",
+              outline: "none"
+            })
+          }, [
+            a[11] || (a[11] = d("title", null, "Clear selection", -1)),
+            d("rect", {
+              x: te.value - 12,
+              y: n.value.top - 24,
+              width: 24,
+              height: 24,
+              fill: "transparent",
+              "pointer-events": "all"
+            }, null, 8, to),
+            d("circle", {
+              cx: te.value,
+              cy: n.value.top - 12,
+              r: "10",
+              fill: "none",
+              stroke: e.value.style.chart.color,
+              "stroke-width": "2",
+              "vector-effect": "non-scaling-stroke",
+              opacity: H.value ? 0.5 : 0
+            }, null, 8, lo),
+            d("path", {
+              d: `M${te.value - 6},${n.value.top - 18} ${te.value + 6},${n.value.top - 6}`,
+              stroke: e.value.style.chart.color,
+              "stroke-linecap": "round",
+              "stroke-width": "2",
+              "vector-effect": "non-scaling-stroke"
+            }, null, 8, oo),
+            d("path", {
+              d: `M${te.value + 6},${n.value.top - 18} ${te.value - 6},${n.value.top - 6}`,
+              stroke: e.value.style.chart.color,
+              "stroke-linecap": "round",
+              "stroke-width": "2",
+              "vector-effect": "non-scaling-stroke"
+            }, null, 8, ao)
+          ], 36)) : p("", !0),
+          !e.value.style.shape || e.value.style.shape === "bar" ? (c(), v("g", no, [
+            x.value ? p("", !0) : (c(), v("g", so, [
+              d("path", {
+                "stroke-dasharray": e.value.style.chart.box.strokeDasharray,
+                d: W.value.right,
+                stroke: e.value.style.chart.box.stroke,
+                "stroke-width": e.value.style.chart.box.strokeWidth,
+                "stroke-linejoin": "round",
+                "stroke-linecap": "round",
+                fill: "none"
+              }, null, 8, ro),
+              d("path", {
+                "stroke-dasharray": e.value.style.chart.box.strokeDasharray,
+                d: W.value.left,
+                stroke: e.value.style.chart.box.stroke,
+                "stroke-width": e.value.style.chart.box.strokeWidth,
+                "stroke-linejoin": "round",
+                "stroke-linecap": "round",
+                fill: "none"
+              }, null, 8, uo),
+              d("path", {
+                "stroke-dasharray": e.value.style.chart.box.strokeDasharray,
+                d: W.value.side,
+                stroke: e.value.style.chart.box.stroke,
+                "stroke-width": e.value.style.chart.box.strokeWidth,
+                "stroke-linejoin": "round",
+                "stroke-linecap": "round",
+                fill: "none"
+              }, null, 8, io),
+              d("path", {
+                "stroke-dasharray": e.value.style.chart.box.strokeDasharray,
+                d: W.value.topSides,
+                stroke: e.value.style.chart.box.stroke,
+                "stroke-width": e.value.style.chart.box.strokeWidth,
+                "stroke-linejoin": "round",
+                "stroke-linecap": "round",
+                fill: "none"
+              }, null, 8, co)
+            ])),
+            x.value ? p("", !0) : (c(), v("g", vo, [
+              d("path", {
+                d: le.value.right,
+                stroke: e.value.style.chart.bar.stroke,
+                "stroke-width": e.value.style.chart.bar.strokeWidth,
+                "stroke-linejoin": "round",
+                "stroke-linecap": "round",
+                fill: `url(#gradient_right${A.value})`
+              }, null, 8, ho),
+              d("path", {
+                d: le.value.left,
+                stroke: e.value.style.chart.bar.stroke,
+                "stroke-width": e.value.style.chart.bar.strokeWidth,
+                "stroke-linejoin": "round",
+                "stroke-linecap": "round",
+                fill: `url(#gradient_left${A.value})`
+              }, null, 8, fo),
+              d("path", {
+                d: le.value.top,
+                stroke: e.value.style.chart.bar.stroke,
+                "stroke-width": e.value.style.chart.bar.strokeWidth,
+                "stroke-linejoin": "round",
+                "stroke-linecap": "round",
+                fill: `url(#gradient_top${A.value})`
+              }, null, 8, po)
+            ])),
+            x.value ? (c(), v("g", go, [
+              (c(!0), v(T, null, F(y.value, (t, i) => (c(), v("g", {
+                style: j(`opacity:${b.value ? b.value === t.id ? 1 : 0.3 : 1}`),
+                class: "vue-ui-3d-bar-stack",
+                role: "img",
+                "aria-label": de(t)
+              }, [
+                d("path", {
+                  d: t.fill.right,
+                  fill: `url(#grad_right_${t.id})`,
+                  onMouseenter: (l) => S(t),
+                  onClick: (l) => S(t, !0),
+                  onMouseout: (l) => q(t)
+                }, null, 40, ko),
+                d("path", {
+                  d: t.fill.left,
+                  fill: `url(#grad_left_${t.id})`,
+                  onMouseenter: (l) => S(t),
+                  onClick: (l) => S(t, !0),
+                  onMouseout: (l) => q(t)
+                }, null, 40, $o),
+                d("path", {
+                  d: t.fill.top,
+                  fill: `url(#grad_top_${t.id})`,
+                  onMouseenter: (l) => S(t),
+                  onClick: (l) => S(t, !0),
+                  onMouseout: (l) => q(t)
+                }, null, 40, mo),
+                d("path", {
+                  d: t.fill.liningTop,
+                  stroke: "#FFFFFF",
+                  "stroke-width": "0.5",
+                  "stroke-linecap": "round",
+                  fill: "none",
+                  onMouseenter: (l) => S(t),
+                  onClick: (l) => S(t, !0),
+                  onMouseout: (l) => q(t)
+                }, null, 40, bo),
+                d("path", {
+                  d: `M ${t.fill.apexTop.x},${t.fill.apexTop.y} ${t.fill.apexBottom.x},${t.fill.apexBottom.y}`,
+                  stroke: "#FFFFFF",
+                  "stroke-width": "0.5",
+                  "stroke-linecap": "round"
+                }, null, 8, _o)
+              ], 12, yo))), 256)),
+              (c(!0), v(T, null, F(y.value, (t, i) => (c(), v("g", null, [
+                i !== y.value.length - 1 ? (c(), v("path", {
+                  key: 0,
+                  d: t.fill.liningTopShade,
+                  stroke: e.value.style.chart.bar.shadeColor,
+                  "stroke-width": "0.5",
+                  "stroke-linecap": "round",
+                  fill: "none",
+                  style: { "pointer-events": "none" }
+                }, null, 8, wo)) : p("", !0)
+              ]))), 256)),
+              (c(!0), v(T, null, F(y.value, (t, i) => (c(), v("g", {
+                style: j(`opacity:${b.value ? b.value === t.id ? 1 : 0 : t.proportion * 100 > e.value.style.chart.legend.hideUnderPercentage ? 1 : 0}`),
+                onClick: (l) => ce("selectDatapoint", t)
+              }, [
+                d("path", {
+                  stroke: e.value.style.chart.color,
+                  "stroke-dasharray": "1",
+                  "stroke-width": "0.5",
+                  "stroke-linecap": "round",
+                  d: `M${t.fill.sidePointer.x},${t.fill.sidePointer.y} ${t.fill.sidePointer.x2},${t.fill.sidePointer.y}`
+                }, null, 8, Co),
+                !t.fill.miniDonut || b.value ? (c(), v("circle", {
+                  key: 0,
+                  cx: t.fill.sidePointer.x2,
+                  cy: t.fill.sidePointer.y,
+                  r: 2,
+                  fill: t.color,
+                  stroke: e.value.style.chart.backgroundColor
+                }, null, 8, Po)) : p("", !0),
+                s(Q) ? (c(), v("rect", {
+                  key: 1,
+                  x: t.fill.sidePointer.xText,
+                  y: t.fill.sidePointer.y - e.value.style.chart.legend.fontSize / 2,
+                  width: n.value.width / 3,
+                  height: e.value.style.chart.legend.fontSize,
+                  fill: "#6A6A6A80",
+                  rx: "3"
+                }, null, 8, Ao)) : p("", !0),
+                s(Q) ? p("", !0) : (c(), v("foreignObject", {
+                  key: 2,
+                  x: t.fill.sidePointer.xText,
+                  y: t.fill.sidePointer.y - e.value.style.chart.legend.fontSize,
+                  width: n.value.absoluteWidth / 3,
+                  height: e.value.style.chart.legend.fontSize * 2,
+                  style: { overflow: "visible", position: "relative" }
+                }, [
+                  e.value.style.chart.legend.showDefault ? (c(), v("div", {
+                    key: 0,
+                    style: j(`height: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items:center;justify-content: flex-start; font-size:${e.value.style.chart.legend.fontSize}px; text-align:left; line-height: ${e.value.style.chart.legend.fontSize}px; color:${e.value.style.chart.legend.color}; font-weight:${e.value.style.chart.legend.bold ? "bold" : "normal"}`)
+                  }, N(s(be)(
+                    e.value.style.chart.dataLabel.formatter,
+                    t.value,
+                    `${t.name}: ${s(B)({ v: t.proportion * 100, s: "%", r: e.value.style.chart.legend.roundingPercentage })} (${s(B)({
+                      p: e.value.style.chart.legend.prefix,
+                      v: t.value,
+                      s: e.value.style.chart.legend.suffix,
+                      r: e.value.style.chart.legend.roundingValue
+                    })})`,
+                    { datapoint: t, seriesIndex: i, type: "barDatapoint" }
+                  )), 5)) : p("", !0),
+                  _(o.$slots, "legend", Be({ ref_for: !0 }, { datapoint: t, config: e.value, dataset: y.value }), void 0, !0)
+                ], 8, Mo)),
+                t.fill.donut && b.value === t.id ? (c(), v("g", To, [
+                  (c(!0), v(T, null, F(t.fill.donut, (l, r) => (c(), v("g", null, [
+                    oe(l, t.fill.donut, !0) > 6 ? (c(), v("path", {
+                      key: 0,
+                      d: s(gt)(l, { x: l.cx, y: l.cy }, 0, 8, !1, !0, 10),
+                      stroke: l.color,
+                      class: "vue-ui-donut-arc-path",
+                      "stroke-width": "0.5",
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      fill: "none"
+                    }, null, 8, Fo)) : p("", !0)
+                  ]))), 256)),
+                  (c(!0), v(T, null, F(t.fill.donut, (l, r) => (c(), v("path", {
+                    class: "vue-ui-donut-arc-path",
+                    d: l.arcSlice,
+                    fill: `${l.color}`,
+                    stroke: e.value.style.chart.backgroundColor,
+                    "stroke-width": 1
+                  }, null, 8, So))), 256)),
+                  (c(!0), v(T, null, F(t.fill.donut, (l, r) => (c(), v("g", null, [
+                    oe(l, t.fill.donut, !0) > 6 ? (c(), v("g", Do, [
+                      d("text", {
+                        "text-anchor": s(U)(l, !0, 0).anchor,
+                        x: s(U)(l, !0, 2).x,
+                        y: s(_e)(l, 12, 12),
+                        fill: e.value.style.chart.legend.color,
+                        "font-size": e.value.style.chart.legend.fontSize / 1.5,
+                        "font-weight": e.value.style.chart.legend.bold ? "bold" : "normal"
+                      }, N(s(be)(
+                        e.value.style.chart.dataLabel.formatter,
+                        l.value,
+                        `${oe(l, t.fill.donut)} (${s(B)({
+                          p: e.value.style.chart.legend.prefix,
+                          v: l.value,
+                          s: e.value.style.chart.legend.suffix,
+                          r: e.value.style.chart.legend.roundingValue
+                        })})`,
+                        { datapoint: l, seriesIndex: r, type: "donutDatapoint" }
+                      )), 9, Oo),
+                      d("text", {
+                        "text-anchor": s(U)(l).anchor,
+                        x: s(U)(l, !0, 2).x,
+                        y: s(_e)(l, 12, 12) + e.value.style.chart.legend.fontSize / 1.5,
+                        fill: e.value.style.chart.legend.color,
+                        "font-size": e.value.style.chart.legend.fontSize / 1.5,
+                        "font-weight": e.value.style.chart.legend.bold ? "bold" : "normal"
+                      }, N(l.name), 9, Bo)
+                    ])) : p("", !0)
+                  ]))), 256))
+                ])) : p("", !0),
+                t.fill.miniDonut && !b.value ? (c(), v("g", Io, [
+                  (c(!0), v(T, null, F(t.fill.miniDonut, (l, r) => (c(), v("path", {
+                    class: "vue-ui-donut-arc-path",
+                    d: l.arcSlice,
+                    fill: `${l.color}`,
+                    stroke: e.value.style.chart.backgroundColor,
+                    "stroke-width": 0.5
+                  }, null, 8, No))), 256))
+                ])) : p("", !0)
+              ], 12, xo))), 256))
+            ])) : p("", !0)
+          ])) : p("", !0),
+          e.value.style.shape === "tube" ? (c(), v("g", jo, [
+            x.value ? p("", !0) : (c(), v("g", zo, [
+              d("path", {
+                "stroke-dasharray": e.value.style.chart.box.strokeDasharray,
+                d: W.value.tubeTop,
+                stroke: e.value.style.chart.box.stroke,
+                "stroke-width": e.value.style.chart.box.strokeWidth,
+                "stroke-linejoin": "round",
+                "stroke-linecap": "round",
+                fill: "none"
+              }, null, 8, Lo),
+              d("path", {
+                "stroke-dasharray": e.value.style.chart.box.strokeDasharray,
+                d: W.value.tubeLeft,
+                stroke: e.value.style.chart.box.stroke,
+                "stroke-width": e.value.style.chart.box.strokeWidth,
+                "stroke-linejoin": "round",
+                "stroke-linecap": "round",
+                fill: "none"
+              }, null, 8, Eo),
+              d("path", {
+                "stroke-dasharray": e.value.style.chart.box.strokeDasharray,
+                d: W.value.tubeRight,
+                stroke: e.value.style.chart.box.stroke,
+                "stroke-width": e.value.style.chart.box.strokeWidth,
+                "stroke-linejoin": "round",
+                "stroke-linecap": "round",
+                fill: "none"
+              }, null, 8, Vo),
+              d("path", {
+                "stroke-dasharray": e.value.style.chart.box.strokeDasharray,
+                d: W.value.tubeBottom,
+                stroke: e.value.style.chart.box.stroke,
+                "stroke-width": e.value.style.chart.box.strokeWidth,
+                "stroke-linejoin": "round",
+                "stroke-linecap": "round",
+                fill: "none"
+              }, null, 8, Wo),
+              d("path", {
+                d: le.value.tubeTop,
+                stroke: e.value.style.chart.bar.stroke,
+                "stroke-width": e.value.style.chart.bar.strokeWidth,
+                "stroke-linejoin": "round",
+                "stroke-linecap": "round",
+                fill: `url(#gradient_tube_top${A.value})`
+              }, null, 8, Ro),
+              d("path", {
+                d: le.value.tubeBody,
+                stroke: e.value.style.chart.bar.stroke,
+                "stroke-width": e.value.style.chart.bar.strokeWidth,
+                "stroke-linejoin": "round",
+                "stroke-linecap": "round",
+                fill: `url(#gradient_tube_body${A.value})`
+              }, null, 8, Go),
+              d("path", {
+                d: le.value.tubeTop,
+                stroke: "#FFFFFF",
+                "stroke-width": 0.5,
+                "stroke-linejoin": "round",
+                "stroke-linecap": "round",
+                fill: "none"
+              }, null, 8, Uo)
+            ])),
+            x.value ? (c(), v("g", Ho, [
+              (c(!0), v(T, null, F(y.value, (t, i) => (c(), v("g", {
+                style: j(`opacity:${b.value ? b.value === t.id ? 1 : 0.3 : 1}`),
+                class: "vue-ui-3d-bar-stack",
+                role: "img",
+                "aria-label": de(t)
+              }, [
+                d("defs", null, [
+                  d("radialGradient", {
+                    id: `gradient_tube_top_${t.id}`,
+                    fx: "10%",
+                    cy: "55%"
+                  }, [
+                    d("stop", {
+                      offset: "0%",
+                      "stop-color": s(w)(s(G)(t.color, 0.5), 80)
+                    }, null, 8, qo),
+                    d("stop", {
+                      offset: "100%",
+                      "stop-color": s(w)(s(J)(t.color, 0.1), 80)
+                    }, null, 8, Zo)
+                  ], 8, Ko),
+                  d("linearGradient", {
+                    id: `gradient_tube_body_${t.id}`,
+                    x1: "0%",
+                    y1: "0%",
+                    x2: "100%",
+                    y2: "0%"
+                  }, [
+                    d("stop", {
+                      offset: "0%",
+                      "stop-color": `${t.color}`
+                    }, null, 8, Jo),
+                    d("stop", {
+                      offset: "10%",
+                      "stop-color": s(w)(s(J)(t.color, 0.7), 100)
+                    }, null, 8, Qo),
+                    d("stop", {
+                      offset: "25%",
+                      "stop-color": s(w)(s(J)(t.color, 0.5), 100)
+                    }, null, 8, ea),
+                    d("stop", {
+                      offset: "75%",
+                      "stop-color": s(w)(t.color, 80)
+                    }, null, 8, ta),
+                    d("stop", {
+                      offset: "100%",
+                      "stop-color": s(w)(s(G)(t.color, 0.7), 100)
+                    }, null, 8, la)
+                  ], 8, Yo)
+                ]),
+                d("path", {
+                  onMouseenter: (l) => S(t),
+                  onClick: (l) => S(t, !0),
+                  onMouseout: (l) => q(t),
+                  d: t.fill.tubeBody,
+                  stroke: "#FFFFFF",
+                  "stroke-width": 0.5,
+                  "stroke-linejoin": "round",
+                  "stroke-linecap": "round",
+                  fill: `url(#gradient_tube_body_${t.id})`
+                }, null, 40, oa),
+                i > 0 ? (c(), v("path", {
+                  key: 0,
+                  onMouseenter: (l) => S(t),
+                  onClick: (l) => S(t, !0),
+                  onMouseout: (l) => q(t),
+                  d: t.fill.bottomTubeTop,
+                  stroke: "#000000",
+                  "stroke-width": 0.5,
+                  "stroke-linejoin": "round",
+                  "stroke-linecap": "round",
+                  fill: "none"
+                }, null, 40, aa)) : p("", !0),
+                d("path", {
+                  onMouseenter: (l) => S(t),
+                  onClick: (l) => S(t, !0),
+                  onMouseout: (l) => q(t),
+                  d: t.fill.tubeTop,
+                  stroke: "#FFFFFF",
+                  "stroke-width": 0.5,
+                  "stroke-linejoin": "round",
+                  "stroke-linecap": "round",
+                  fill: `url(#gradient_tube_top_${t.id})`
+                }, null, 40, na)
+              ], 12, Xo))), 256)),
+              (c(!0), v(T, null, F(y.value, (t, i) => (c(), v("g", {
+                style: j(`opacity:${b.value ? b.value === t.id ? 1 : 0 : t.proportion * 100 > e.value.style.chart.legend.hideUnderPercentage ? 1 : 0}`),
+                onClick: (l) => ce("selectDatapoint", t)
+              }, [
+                d("path", {
+                  stroke: e.value.style.chart.color,
+                  "stroke-dasharray": "1",
+                  "stroke-width": "0.5",
+                  "stroke-linecap": "round",
+                  d: `M${t.fill.sidePointer.x},${t.fill.sidePointer.y} ${t.fill.sidePointer.x2},${t.fill.sidePointer.y}`
+                }, null, 8, ra),
+                !t.fill.miniDonut || b.value ? (c(), v("circle", {
+                  key: 0,
+                  cx: t.fill.sidePointer.x2,
+                  cy: t.fill.sidePointer.y,
+                  r: 2,
+                  fill: t.color,
+                  stroke: e.value.style.chart.backgroundColor
+                }, null, 8, ua)) : p("", !0),
+                s(Q) ? (c(), v("rect", {
+                  key: 1,
+                  x: t.fill.sidePointer.xText,
+                  y: t.fill.sidePointer.y - e.value.style.chart.legend.fontSize / 2,
+                  width: n.value.width / 3,
+                  height: e.value.style.chart.legend.fontSize,
+                  fill: "#6A6A6A80",
+                  rx: "3"
+                }, null, 8, ia)) : p("", !0),
+                s(Q) ? p("", !0) : (c(), v("foreignObject", {
+                  key: 2,
+                  x: t.fill.sidePointer.xText,
+                  y: t.fill.sidePointer.y - e.value.style.chart.legend.fontSize,
+                  width: n.value.absoluteWidth / 3,
+                  height: e.value.style.chart.legend.fontSize * 2,
+                  style: { overflow: "visible", position: "relative" }
+                }, [
+                  e.value.style.chart.legend.showDefault ? (c(), v("div", {
+                    key: 0,
+                    style: j(`height: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items:center;justify-content: flex-start; font-size:${e.value.style.chart.legend.fontSize}px; text-align:left; line-height: ${e.value.style.chart.legend.fontSize}px; color:${e.value.style.chart.legend.color};font-weight:${e.value.style.chart.legend.bold ? "bold" : "normal"}`)
+                  }, N(s(be)(
+                    e.value.style.chart.dataLabel.formatter,
+                    t.value,
+                    `${t.name}: ${s(B)({ v: t.proportion * 100, s: "%", r: e.value.style.chart.legend.roundingPercentage })} (${s(B)({
+                      p: e.value.style.chart.legend.prefix,
+                      v: t.value,
+                      s: e.value.style.chart.legend.suffix,
+                      r: e.value.style.chart.legend.roundingValue
+                    })})`,
+                    { datapoint: t, seriesIndex: i, type: "barDatapoint" }
+                  )), 5)) : p("", !0),
+                  _(o.$slots, "legend", Be({ ref_for: !0 }, { datapoint: t, config: e.value, dataset: y.value }), void 0, !0)
+                ], 8, da)),
+                t.fill.donut && b.value === t.id ? (c(), v("g", ca, [
+                  (c(!0), v(T, null, F(t.fill.donut, (l, r) => (c(), v("g", null, [
+                    oe(l, t.fill.donut, !0) > 6 ? (c(), v("path", {
+                      key: 0,
+                      d: s(gt)(l, { x: l.cx, y: l.cy }, 0, 8, !1, !0, 10),
+                      stroke: l.color,
+                      class: "vue-ui-donut-arc-path",
+                      "stroke-width": "0.5",
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      fill: "none"
+                    }, null, 8, va)) : p("", !0)
+                  ]))), 256)),
+                  (c(!0), v(T, null, F(t.fill.donut, (l, r) => (c(), v("path", {
+                    class: "vue-ui-donut-arc-path",
+                    d: l.arcSlice,
+                    fill: `${l.color}`,
+                    stroke: e.value.style.chart.backgroundColor,
+                    "stroke-width": 1
+                  }, null, 8, ha))), 256)),
+                  (c(!0), v(T, null, F(t.fill.donut, (l, r) => (c(), v("g", null, [
+                    oe(l, t.fill.donut, !0) > 6 ? (c(), v("g", fa, [
+                      d("text", {
+                        "text-anchor": s(U)(l, !0, 0).anchor,
+                        x: s(U)(l, !0, 2).x,
+                        y: s(_e)(l, 12, 12),
+                        fill: e.value.style.chart.legend.color,
+                        "font-size": e.value.style.chart.legend.fontSize / 1.5,
+                        "font-weight": e.value.style.chart.legend.bold ? "bold" : "normal"
+                      }, N(s(be)(
+                        e.value.style.chart.dataLabel.formatter,
+                        l.value,
+                        `${oe(l, t.fill.donut)} (${s(B)({
+                          p: e.value.style.chart.legend.prefix,
+                          v: l.value,
+                          s: e.value.style.chart.legend.suffix,
+                          r: e.value.style.chart.legend.roundingValue
+                        })})`,
+                        { datapoint: l, seriesIndex: r, type: "donutDatapoint" }
+                      )), 9, pa),
+                      d("text", {
+                        "text-anchor": s(U)(l).anchor,
+                        x: s(U)(l, !0, 2).x,
+                        y: s(_e)(l, 12, 12) + e.value.style.chart.legend.fontSize / 1.5,
+                        fill: e.value.style.chart.legend.color,
+                        "font-size": e.value.style.chart.legend.fontSize / 1.5,
+                        "font-weight": e.value.style.chart.legend.bold ? "bold" : "normal"
+                      }, N(l.name), 9, ga)
+                    ])) : p("", !0)
+                  ]))), 256))
+                ])) : p("", !0),
+                t.fill.miniDonut && !b.value ? (c(), v("g", ya, [
+                  (c(!0), v(T, null, F(t.fill.miniDonut, (l, r) => (c(), v("path", {
+                    class: "vue-ui-donut-arc-path",
+                    d: l.arcSlice,
+                    fill: `${l.color}`,
+                    stroke: e.value.style.chart.backgroundColor,
+                    "stroke-width": 0.5
+                  }, null, 8, ka))), 256))
+                ])) : p("", !0)
+              ], 12, sa))), 256))
+            ])) : p("", !0)
+          ])) : p("", !0),
+          _(o.$slots, "svg", {
+            svg: {
+              ...n.value,
+              isPrintingImg: s(Pe) | s(Ae) | fe.value,
+              isPrintingSvg: he.value
+            }
+          }, void 0, !0)
+        ], 46, wl))
+      ]),
+      o.$slots.watermark ? (c(), v("div", $a, [
+        _(o.$slots, "watermark", z(L({ isPrinting: s(Pe) || s(Ae) || he.value || fe.value })), void 0, !0)
+      ])) : p("", !0),
+      o.$slots.source ? (c(), v("div", {
+        key: 5,
+        ref_key: "source",
+        ref: We,
+        dir: "auto"
+      }, [
+        _(o.$slots, "source", {}, void 0, !0)
+      ], 512)) : p("", !0),
+      ze.value && x.value && e.value.userOptions.buttons.table ? (c(), Y(qt(ie.value.component), Be({ key: 6 }, ie.value.props, {
+        ref_key: "tableUnit",
+        ref: re,
+        onClose: Qe
+      }), ut({
+        content: C(() => [
+          (c(), Y(s(_t), {
+            key: `table_${Ee.value}`,
+            colNames: ne.value.colNames,
+            head: ne.value.head,
+            body: ne.value.body,
+            config: ne.value.config,
+            title: e.value.table.useDialog ? "" : ie.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            isCursorPointer: pe.value,
+            onClose: Qe
+          }, {
+            th: C(({ th: t }) => [
+              d("div", {
+                innerHTML: t,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, ma)
+            ]),
+            td: C(({ td: t }) => [
+              vt(N(t.name || t), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton", "isCursorPointer"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: C(() => [
+            vt(N(ie.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: C(() => [
+            d("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: a[7] || (a[7] = (t) => Te(e.value.userOptions.callbacks.csv))
+            }, [
+              it(s(mt), {
+                name: "fileCsv",
+                stroke: ie.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : p("", !0),
+      _(o.$slots, "skeleton", {}, () => [
+        s(Q) ? (c(), Y(ul, { key: 0 })) : p("", !0)
+      ], !0)
+    ], 44, $l));
+  }
+}, La = /* @__PURE__ */ kl(ba, [["__scopeId", "data-v-3ffa78a4"]]);
+export {
+  La as default
+};