vue-data-ui 3.6.0 → 3.7.0

package/dist/vue-ui-age-pyramid-C-fwZRYE.js

@@ -0,0 +1,960 @@
+import { defineAsyncComponent as $, computed as h, ref as d, toRefs as Ct, watch as j, shallowRef as De, onMounted as kt, onBeforeUnmount as Oe, watchEffect as At, createElementBlock as u, openBlock as i, unref as r, normalizeStyle as se, normalizeClass as ze, createBlock as R, createCommentVNode as f, renderSlot as v, createVNode as ie, withCtx as c, normalizeProps as C, guardReactiveProps as k, createSlots as Be, createElementVNode as y, Fragment as F, renderList as O, toDisplayString as T, resolveDynamicComponent as wt, mergeProps as Tt, createTextVNode as re, nextTick as _t } from "vue";
+import { c as Lt, t as $t, o as Ie, g as Ft, M as b, X as St, s as ue, h as Ee, a as z, d as B, u as Dt, q as Ot, x as zt, R as Bt } from "./lib-C5BH09_g.js";
+import { t as Re, u as It } from "./useResponsive-DfdjqQps.js";
+import { u as Et, a as ne } from "./useNestedProp-CWo6bftQ.js";
+import { u as Rt, B as Pt } from "./BaseScanner-BgWxam9d.js";
+import { u as Mt } from "./usePrinter-DCJzEiS8.js";
+import { u as Nt } from "./useSvgExport-DrjCWun4.js";
+import { u as Ut } from "./useThemeCheck-DGJ31Vi5.js";
+import { u as Gt } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Ht } from "./useChartAccessibility-9icAAmYg.js";
+import { u as Vt } from "./useTimeLabelCollider-CIsgDrl9.js";
+import Wt from "./img-DUzJeMlr.js";
+import jt from "./Title-DfFUb9hd.js";
+import { _ as Xt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Pe = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC", layout: { grid: { stroke: "#5A5A5A" }, dataLabels: { sideTitles: { color: "#CCCCCC" }, xAxis: { color: "#CCCCCC" }, yAxis: { color: "#CCCCCC" } } }, highlighter: { color: "#CCCCCC" }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#1A1A1A", backgroundOpacity: 70, color: "#CCCCCC", borderColor: "#5A5A5A" } }, table: { th: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, td: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, Me = { style: { backgroundColor: "#FFF8E1", color: "#424242", layout: { grid: { stroke: "#5D4037" }, dataLabels: { sideTitles: { color: "#424242" }, xAxis: { color: "#424242" }, yAxis: { color: "#424242" } }, bars: { borderRadius: 0, gap: 1, left: { color: "#F57C00" }, right: { color: "#D32F2F" }, gradient: { show: !1 } } }, highlighter: { color: "#424242" }, title: { color: "#424242", subtitle: { color: "#757575" } }, tooltip: { backgroundColor: "#FFECB3", backgroundOpacity: 30, color: "#424242", borderColor: "#FF8A65" } }, table: { th: { backgroundColor: "#FFF8E1", color: "#424242" }, td: { backgroundColor: "#FFF8E1", color: "#424242" } } }, Ne = { style: { backgroundColor: "#1E1E1E", color: "#BDBDBD", layout: { grid: { stroke: "#5D4037" }, dataLabels: { sideTitles: { color: "#BDBDBD" }, xAxis: { color: "#BDBDBD" }, yAxis: { color: "#BDBDBD" } }, bars: { borderRadius: 0, gap: 1, left: { color: "#F57C00" }, right: { color: "#D32F2F" }, gradient: { show: !1 } } }, highlighter: { color: "#FFF8E1" }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, tooltip: { backgroundColor: "#1E1E1E", backgroundOpacity: 30, color: "#FFF8E1", borderColor: "#FF8A65" } }, table: { th: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, td: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } } }, Ue = { style: { backgroundColor: "#1A1A1A", color: "#99AA99", layout: { grid: { stroke: "#5F6A5F" }, dataLabels: { sideTitles: { color: "#AACCAA" }, xAxis: { color: "#5F6A5F" }, yAxis: { color: "#5F6A5F" } }, bars: { borderRadius: 0, gap: 1, left: { color: "#668066" }, right: { color: "#66CC66" }, gradient: { show: !1 } } }, highlighter: { color: "#66CC66" }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#2A2F2A", color: "#AACCAA", borderColor: "#66CC66" } }, table: { th: { backgroundColor: "#1A1A1A", color: "#99AA99" }, td: { backgroundColor: "#1A1A1A", color: "#AACCAA" } } }, Ge = { style: { backgroundColor: "#fbfafa", color: "#8A9892", layout: { grid: { stroke: "#5F6A5F" }, dataLabels: { sideTitles: { color: "#8A9892" }, xAxis: { show: !1 }, yAxis: { show: !1 } }, bars: { borderRadius: 6, gap: 1, left: { color: "#DCB482" }, right: { color: "#B9B99D" }, gradient: { show: !0 } } }, highlighter: { color: "#8F837A" }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } }, tooltip: { backgroundColor: "#fbfafa", color: "#8A9892" } }, table: { th: { backgroundColor: "#fbfafa", color: "#8F837A" }, td: { backgroundColor: "#fbfafa", color: "#8F837A" } } }, He = { style: { backgroundColor: "#f6f6fb", color: "#50606C", layout: { grid: { stroke: "#5F6A5F" }, dataLabels: { sideTitles: { color: "#61747E" }, xAxis: { color: "#61747E" }, yAxis: { color: "#61747E" } }, bars: { borderRadius: 0, gap: 1, left: { color: "#A1B5A3" }, right: { color: "#7DA9B5" }, gradient: { show: !0, intensity: 10 } } }, highlighter: { color: "#7DA9B5" }, title: { color: "#50606C", subtitle: { color: "#718890" } }, tooltip: { backgroundColor: "#f6f6fb", color: "#50606C" } }, table: { th: { backgroundColor: "#f6f6fb", color: "#50606C" }, td: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, Ve = {
+  default: {},
+  dark: Pe,
+  celebration: Me,
+  celebrationNight: Ne,
+  hack: Ue,
+  zen: Ge,
+  concrete: He
+}, Ml = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  celebration: Me,
+  celebrationNight: Ne,
+  concrete: He,
+  dark: Pe,
+  default: Ve,
+  hack: Ue,
+  zen: Ge
+}, Symbol.toStringTag, { value: "Module" })), Yt = ["id"], qt = ["xmlns", "viewBox"], Jt = ["x", "y", "width", "height"], Kt = ["id"], Qt = ["stop-color"], Zt = ["stop-color"], el = ["id"], tl = ["stop-color"], ll = ["stop-color"], ol = ["x", "y", "width", "height", "fill", "rx"], al = ["x", "y", "width", "height", "fill", "rx"], sl = ["x", "y", "width", "height", "fill", "rx"], il = ["x", "y", "width", "height", "fill", "rx"], rl = { key: 0 }, ul = ["x", "y", "fill", "font-size", "font-weight"], nl = ["x", "y", "fill", "font-size", "font-weight"], dl = { key: 1 }, vl = ["x", "y", "font-size", "fill", "font-weight"], cl = { key: 2 }, yl = { key: 0 }, hl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], fl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], gl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], bl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], pl = ["font-size", "fill", "text-anchor", "font-weight", "transform"], xl = ["font-size", "fill", "text-anchor", "font-weight", "transform"], ml = ["x", "y", "font-size", "fill", "font-weight"], Cl = ["x", "y", "width", "height", "fill", "onMouseover", "onMouseleave", "onClick"], kl = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, Al = {
+  __name: "vue-ui-age-pyramid",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  setup(de, { expose: We }) {
+    const je = $(() => import("./Tooltip-WD0Ros6G.js")), Xe = $(() => import("./BaseIcon-CofSxalQ.js")), Ye = $(() => import("./vue-ui-accordion-DSdZUn2C.js")), qe = $(() => import("./DataTable-CHaOCmsE.js")), Je = $(() => import("./PenAndPaper-HCZQTkqi.js")), Ke = $(() => import("./UserOptions-B3I-s3Lw.js")), Qe = $(() => import("./PackageVersion-Bq_mtsqr.js")), Ze = $(() => import("./BaseDraggableDialog-CRF94NJQ.js")), { vue_ui_age_pyramid: et } = Et(), { isThemeValid: tt, warnInvalidTheme: lt } = Ut(), p = de, ve = h(() => !!p.dataset && p.dataset.length), A = d(Lt()), X = d(!1), Y = d(""), U = d(null), ce = d(0), w = d(null), ye = d(null), he = d(null), fe = d(null), ge = d(0), be = d(0), q = d(null), P = d(null), J = d(null), e = d(ee()), { loading: pe, FINAL_DATASET: G, manualLoading: K } = Rt({
+      ...Ct(p),
+      FINAL_CONFIG: e,
+      prepareConfig: ee,
+      skeletonDataset: [
+        ["_", 9, 2, 2],
+        ["_", 8, 3, 3],
+        ["_", 7, 5, 5],
+        ["_", 6, 8, 8],
+        ["_", 5, 13, 13],
+        ["_", 4, 21, 21],
+        ["_", 3, 34, 34],
+        ["_", 2, 55, 55],
+        ["_", 1, 89, 89],
+        ["_", 0, 144, 144]
+      ],
+      skeletonConfig: $t({
+        defaultConfig: e.value,
+        userConfig: {
+          userOptions: { show: !1 },
+          table: { show: !1 },
+          translations: {
+            male: "",
+            female: ""
+          },
+          style: {
+            backgroundColor: "#99999930",
+            layout: {
+              bars: {
+                left: { color: "#CACACA" },
+                right: { color: "#999999" }
+              },
+              dataLabels: {
+                xAxis: {
+                  fontSize: 0,
+                  scale: 1e3,
+                  translation: ""
+                },
+                yAxis: {
+                  show: !1
+                }
+              },
+              grid: {
+                stroke: "#6A6A6A"
+              }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: Q, setUserOptionsVisibility: xe, keepUserOptionState: me } = Gt({ config: e.value }), { svgRef: Z } = Ht({ config: e.value.style.title });
+    function ee() {
+      const t = ne({
+        userConfig: p.config,
+        defaultConfig: et
+      }), a = t.theme;
+      if (!a) return t;
+      if (!tt.value(t))
+        return lt(t), t;
+      const l = ne({
+        userConfig: Ve[a] || p.config,
+        defaultConfig: t
+      });
+      return ne({
+        userConfig: p.config,
+        defaultConfig: l
+      });
+    }
+    j(() => p.config, (t) => {
+      pe.value || (e.value = ee()), Q.value = !e.value.userOptions.showOnChartHover, Ce(), ge.value += 1, be.value += 1, x.value.showTable = e.value.table.show, x.value.showTooltip = e.value.style.tooltip.show;
+    }, { deep: !0 }), j(() => p.dataset, (t) => {
+      Array.isArray(t) && t.length > 0 && (K.value = !1);
+    }, { deep: !0 });
+    const _ = De(null), I = De(null);
+    kt(() => {
+      Ce();
+    });
+    const ot = h(() => !!e.value.debug);
+    function Ce() {
+      if (Ie(p.dataset) && (Ft({
+        componentName: "VueUiAgePyramid",
+        type: "dataset",
+        debug: ot.value
+      }), K.value = !0), Ie(p.dataset) || (K.value = e.value.loading), e.value.responsive) {
+        const t = Re(() => {
+          const { width: a, height: l } = It({
+            chart: w.value,
+            title: e.value.style.title.text ? ye.value : null,
+            source: he.value,
+            noTitle: fe.value
+          });
+          requestAnimationFrame(() => {
+            g.value.width = a, g.value.height = l;
+          });
+        });
+        _.value && (I.value && _.value.unobserve(I.value), _.value.disconnect()), _.value = new ResizeObserver(t), I.value = w.value.parentNode, _.value.observe(I.value);
+      }
+    }
+    Oe(() => {
+      _.value && (I.value && _.value.unobserve(I.value), _.value.disconnect());
+    });
+    const { isPrinting: ke, isImaging: Ae, generatePdf: we, generateImage: Te } = Mt({
+      elementId: `vue-ui-age-pyramid_${A.value}`,
+      fileName: e.value.style.title.text || "vue-ui-age-pyramid",
+      options: e.value.userOptions.print
+    }), at = h(() => e.value.userOptions.show && !e.value.style.title.text), x = d({
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.tooltip.show
+    });
+    j(e, () => {
+      x.value = {
+        showTable: e.value.table.show,
+        showTooltip: e.value.style.tooltip.show
+      };
+    }, { immediate: !0 });
+    const g = d({
+      height: e.value.style.height,
+      width: e.value.style.width
+    }), st = h(() => g.value.width), it = h(() => g.value.height), H = d(0), rt = Re((t) => {
+      H.value = t;
+    }, 100);
+    At((t) => {
+      const a = q.value;
+      if (!a) return;
+      const l = new ResizeObserver((o) => {
+        rt(o[0].contentRect.height);
+      });
+      l.observe(a), t(() => l.disconnect());
+    }), Oe(() => {
+      H.value = 0;
+    });
+    const s = h(() => {
+      const t = g.value.width - e.value.style.layout.padding.right - e.value.style.layout.padding.left, a = e.value.style.layout.padding.left, l = g.value.width - e.value.style.layout.padding.right;
+      return {
+        top: e.value.style.layout.padding.top + e.value.style.layout.dataLabels.sideTitles.fontSize + e.value.style.layout.dataLabels.sideTitles.offsetY + 12,
+        left: a,
+        right: l,
+        bottom: g.value.height - e.value.style.layout.padding.bottom - H.value,
+        width: t,
+        height: g.value.height - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom - H.value - e.value.style.layout.dataLabels.sideTitles.fontSize - e.value.style.layout.dataLabels.sideTitles.offsetY - 12,
+        centerX: e.value.style.layout.padding.left + t / 2,
+        leftChart: {
+          width: t / 2 - e.value.style.layout.centerSlit.width,
+          right: a + t / 2 - e.value.style.layout.centerSlit.width
+        },
+        rightChart: {
+          width: t / 2 - e.value.style.layout.centerSlit.width,
+          left: a + t / 2 + e.value.style.layout.centerSlit.width
+        }
+      };
+    }), ut = h(() => G.value.map((t) => e.value.style.layout.dataLabels.yAxis.display === "age" ? t[1] : t[0])), L = h(() => {
+      const t = nt(M.value / 5), a = [], l = [];
+      for (let o = 0; o <= 5; o += 1) {
+        const n = t * o, m = t * (o - 5);
+        a.push({
+          value: n,
+          x: s.value.left + s.value.width / 2 + e.value.style.layout.centerSlit.width + n / M.value * s.value.leftChart.width
+        }), l.push({
+          value: Math.abs(m),
+          x: s.value.left + s.value.width / 2 + m / M.value * s.value.leftChart.width - e.value.style.layout.centerSlit.width
+        });
+      }
+      return {
+        right: a,
+        left: l
+      };
+    });
+    function nt(t) {
+      if (t === 0) return 0;
+      const l = 10 ** Math.floor(Math.log10(Math.abs(t)));
+      let o;
+      return t < 0, o = Math.round(t / l) * l, o;
+    }
+    const M = h(() => Math.max(...G.value.flatMap((t) => t.slice(-2).map((a) => b(a))))), E = h(() => G.value.length), dt = h(() => G.value.map((t) => ({
+      segment: t[0],
+      age: t[1],
+      left: {
+        value: t[2],
+        proportionToMax: t[2] / M.value
+      },
+      right: {
+        value: t[3],
+        proportionToMax: t[3] / M.value
+      }
+    }))), S = h(() => dt.value.map((t, a) => {
+      const l = s.value.top + s.value.height / E.value * a, o = s.value.height / E.value - e.value.style.layout.bars.gap;
+      return {
+        segment: t.segment,
+        age: t.age,
+        left: {
+          ...t.left,
+          y: l,
+          color: e.value.style.layout.bars.left.color,
+          x: s.value.leftChart.right - t.left.proportionToMax * s.value.leftChart.width,
+          width: b(t.left.proportionToMax * s.value.leftChart.width),
+          height: o
+        },
+        right: {
+          ...t.right,
+          y: l,
+          color: e.value.style.layout.bars.right.color,
+          x: s.value.rightChart.left,
+          width: b(t.right.proportionToMax * s.value.rightChart.width),
+          height: o
+        }
+      };
+    })), te = d(null);
+    function le(t) {
+      const [a, l, o, n] = t;
+      return { segment: a, index: l, left: o, right: n };
+    }
+    function vt(t, a) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: le(a), seriesIndex: t });
+    }
+    function ct(t, a) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: le(a), seriesIndex: t }), U.value = null, X.value = !1;
+    }
+    function yt(t, a) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: le(a), seriesIndex: t }), U.value = t, te.value = {
+        datapoint: a,
+        seriesIndex: t,
+        series: S.value,
+        config: e.value
+      };
+      const l = e.value.style.tooltip.customFormat;
+      if (zt(l) && Bt(() => l({
+        seriesIndex: t,
+        datapoint: {
+          segment: a[0],
+          index: a[1],
+          left: a[2],
+          right: a[3]
+        },
+        series: S.value,
+        config: e.value
+      })))
+        Y.value = l({
+          seriesIndex: t,
+          datapoint: {
+            segment: a[0],
+            index: a[1],
+            left: a[2],
+            right: a[3]
+          },
+          series: S.value,
+          config: e.value
+        });
+      else {
+        let o = "";
+        const n = S.value[t];
+        o += `<div><b>${n.segment}</b></div>`, o += `<div>${e.value.translations.age}: ${z(
+          e.value.style.layout.dataLabels.yAxis.formatter,
+          b(n.age),
+          B({ v: b(n.age) }),
+          { datapoint: a, seriesIndex: t }
+        )}</div>`, o += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}">`, o += '<div style="display:flex; flex-direction:row;gap:12px">', o += `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center"><svg viewBox="0 0 12 12" height="12" width="12"><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.underlayer}"/><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_left_${A.value})` : e.value.style.layout.bars.left.color}"/></svg><div>${e.value.translations.female}</div><div><b>${z(
+          e.value.style.layout.dataLabels.xAxis.formatter,
+          b(n.left.value),
+          B({ v: b(n.left.value) }),
+          { datapoint: a, seriesIndex: t }
+        )}</b></div></div>`, o += `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center"><svg viewBox="0 0 12 12" height="12" width="12"><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.underlayer}"/><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_right_${A.value})` : e.value.style.layout.bars.right.color}"/></svg><div>${e.value.translations.male}</div><div><b>${z(
+          e.value.style.layout.dataLabels.xAxis.formatter,
+          b(n.right.value),
+          B({ v: b(n.right.value) }),
+          { datapoint: a, seriesIndex: t }
+        )}</b></div></div>`, o += "</div>", o += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}"><div>${e.value.translations.total}</div><div><b>${z(
+          e.value.style.layout.dataLabels.xAxis.formatter,
+          b(n.right.value) + b(n.left.value),
+          B({ v: b(n.right.value) + b(n.left.value) }),
+          { datapoint: a, seriesIndex: t }
+        )}</b></div></div>`, o += "</div>", Y.value = `<div>${o}</div>`;
+      }
+      X.value = !0;
+    }
+    function oe(t = null) {
+      _t(() => {
+        const a = [e.value.translations.year, e.value.translations.age, e.value.translations.female, e.value.translations.male, e.value.translations.total], l = p.dataset.map((m) => [
+          m[0],
+          m[1],
+          m[2],
+          m[3],
+          m[2] ?? 0 + m[3] ?? 0
+        ]), o = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([a]).concat(l), n = Dt(o);
+        t ? t(n) : Ot({ csvContent: n, title: e.value.style.title.text || "vue-ui-heatmap" });
+      });
+    }
+    const V = h(() => {
+      const t = [
+        e.value.translations.year,
+        e.value.translations.age,
+        e.value.translations.female,
+        e.value.translations.male,
+        e.value.translations.total
+      ], a = p.dataset.map((o) => [
+        o[0],
+        o[1],
+        o[2] == null ? "" : o[2].toLocaleString(),
+        o[3] == null ? "" : o[3].toLocaleString(),
+        (o[2] ?? 0 + o[3] ?? 0).toLocaleString()
+      ]), l = {
+        th: {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          outline: e.value.table.th.outline
+        },
+        td: {
+          backgroundColor: e.value.table.td.backgroundColor,
+          color: e.value.table.td.color,
+          outline: e.value.table.td.outline
+        },
+        breakpoint: e.value.table.responsiveBreakpoint
+      };
+      return { head: t, body: a, config: l, colNames: t };
+    }), D = d(!1);
+    function _e(t) {
+      D.value = t, ce.value += 1;
+    }
+    function Le() {
+      x.value.showTable = !x.value.showTable;
+    }
+    function $e() {
+      x.value.showTooltip = !x.value.showTooltip;
+    }
+    const W = d(!1);
+    function ae() {
+      W.value = !W.value;
+    }
+    async function ht({ scale: t = 2 } = {}) {
+      if (!w.value) return;
+      const { width: a, height: l } = w.value.getBoundingClientRect(), o = a / l, { imageUri: n, base64: m } = await Wt({ domElement: w.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: n,
+        base64: m,
+        title: e.value.style.title.text,
+        width: a,
+        height: l,
+        aspectRatio: o
+      };
+    }
+    const ft = d([]), gt = d({ start: 0, end: S.value.length });
+    Vt({
+      timeLabelsEls: q,
+      timeLabels: ft,
+      slicer: gt,
+      configRef: e,
+      rotationPath: ["style", "layout", "dataLabels", "xAxis", "rotation"],
+      autoRotatePath: ["style", "layout", "dataLabels", "xAxis", "autoRotate", "enable"],
+      isAutoSize: !1,
+      width: st,
+      height: it,
+      targetClass: ".vue-ui-age-pyramid-x-axis-label",
+      rotation: e.value.style.layout.dataLabels.xAxis.autoRotate.angle
+    });
+    const N = h(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, a = x.value.showTable;
+      return {
+        component: t ? Ze : Ye,
+        title: `${e.value.style.title.text}${e.value.style.title.subtitle.text ? `: ${e.value.style.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: D.value,
+          fullscreenParent: w.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8)
+        } : {
+          hideDetails: !0,
+          config: {
+            open: a,
+            maxHeight: 1e4,
+            body: {
+              backgroundColor: e.value.style.backgroundColor,
+              color: e.value.style.color
+            },
+            head: {
+              backgroundColor: e.value.style.backgroundColor,
+              color: e.value.style.color
+            }
+          }
+        }
+      };
+    });
+    j(() => x.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && P.value ? P.value.open() : "close" in P.value && P.value.close());
+    });
+    function Fe() {
+      x.value.showTable = !1, J.value && J.value.setTableIconState(!1);
+    }
+    const bt = h(() => e.value.style.backgroundColor), pt = h(() => e.value.style.title), { exportSvg: xt, getSvg: mt } = Nt({
+      svg: Z,
+      title: pt,
+      backgroundColor: bt
+    });
+    async function Se({ isCb: t }) {
+      if (t) {
+        const { blob: a, url: l, text: o, dataUrl: n } = await mt();
+        e.value.userOptions.callbacks.svg({ blob: a, url: l, text: o, dataUrl: n });
+      } else
+        xt();
+    }
+    return We({
+      getImage: ht,
+      generatePdf: we,
+      generateCsv: oe,
+      generateImage: Te,
+      generateSvg: Se,
+      toggleTable: Le,
+      toggleTooltip: $e,
+      toggleAnnotator: ae,
+      toggleFullscreen: _e
+    }), (t, a) => (i(), u("div", {
+      class: ze(`vue-data-ui-component vue-ui-age-pyramid ${D.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      ref_key: "agePyramid",
+      ref: w,
+      id: `vue-ui-age-pyramid_${A.value}`,
+      style: se(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
+      onMouseenter: a[1] || (a[1] = () => r(xe)(!0)),
+      onMouseleave: a[2] || (a[2] = () => r(xe)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (i(), R(r(Je), {
+        key: 0,
+        svgRef: r(Z),
+        backgroundColor: e.value.style.backgroundColor,
+        color: e.value.style.color,
+        active: W.value,
+        onClose: ae
+      }, {
+        "annotator-action-close": c(() => [
+          v(t.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": c(({ color: l }) => [
+          v(t.$slots, "annotator-action-color", C(k({ color: l })), void 0, !0)
+        ]),
+        "annotator-action-draw": c(({ mode: l }) => [
+          v(t.$slots, "annotator-action-draw", C(k({ mode: l })), void 0, !0)
+        ]),
+        "annotator-action-undo": c(({ disabled: l }) => [
+          v(t.$slots, "annotator-action-undo", C(k({ disabled: l })), void 0, !0)
+        ]),
+        "annotator-action-redo": c(({ disabled: l }) => [
+          v(t.$slots, "annotator-action-redo", C(k({ disabled: l })), void 0, !0)
+        ]),
+        "annotator-action-delete": c(({ disabled: l }) => [
+          v(t.$slots, "annotator-action-delete", C(k({ disabled: l })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active"])) : f("", !0),
+      at.value ? (i(), u("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: fe,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : f("", !0),
+      e.value.style.title.text ? (i(), u("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: ye,
+        style: "width:100%;background:transparent"
+      }, [
+        (i(), R(jt, {
+          key: `title_${ge.value}`,
+          config: {
+            title: {
+              cy: "pyramid-div-title",
+              ...e.value.style.title
+            },
+            subtitle: {
+              cy: "pyramid-div-subtitle",
+              ...e.value.style.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : f("", !0),
+      e.value.userOptions.show && ve.value && (r(me) || r(Q)) ? (i(), R(r(Ke), {
+        ref_key: "userOptionsRef",
+        ref: J,
+        key: `user_options_${ce.value}`,
+        backgroundColor: e.value.style.backgroundColor,
+        color: e.value.style.color,
+        isImaging: r(Ae),
+        isPrinting: r(ke),
+        uid: A.value,
+        hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.tooltip.show,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasImg: e.value.userOptions.buttons.img,
+        hasSvg: e.value.userOptions.buttons.svg,
+        hasTable: e.value.userOptions.buttons.table,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: D.value,
+        isTooltip: x.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: w.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: W.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        tableDialog: e.value.table.useDialog,
+        onToggleFullscreen: _e,
+        onGeneratePdf: r(we),
+        onGenerateCsv: oe,
+        onGenerateImage: r(Te),
+        onGenerateSvg: Se,
+        onToggleTable: Le,
+        onToggleTooltip: $e,
+        onToggleAnnotator: ae,
+        style: se({
+          visibility: r(me) ? r(Q) ? "visible" : "hidden" : "visible"
+        })
+      }, Be({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: c(({ isOpen: l, color: o }) => [
+            v(t.$slots, "menuIcon", C(k({ isOpen: l, color: o })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: c(() => [
+            v(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: c(() => [
+            v(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: c(() => [
+            v(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: c(() => [
+            v(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: c(() => [
+            v(t.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: c(() => [
+            v(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: c(({ toggleFullscreen: l, isFullscreen: o }) => [
+            v(t.$slots, "optionFullscreen", C(k({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: c(({ toggleAnnotator: l, isAnnotator: o }) => [
+            v(t.$slots, "optionAnnotator", C(k({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
+      (i(), u("svg", {
+        ref_key: "svgRef",
+        ref: Z,
+        xmlns: r(St),
+        class: ze({ "vue-data-ui-fullscreen--on": D.value, "vue-data-ui-fulscreen--off": !D.value }),
+        viewBox: `0 0 ${g.value.width <= 0 ? 10 : g.value.width} ${g.value.height <= 0 ? 10 : g.value.height}`,
+        style: se(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`)
+      }, [
+        ie(r(Qe)),
+        t.$slots["chart-background"] ? (i(), u("foreignObject", {
+          key: 0,
+          x: s.value.left,
+          y: s.value.top,
+          width: Math.max(0.1, s.value.width),
+          height: Math.max(0.1, s.value.height),
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          v(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, Jt)) : f("", !0),
+        y("defs", null, [
+          y("linearGradient", {
+            id: `age_pyramid_left_${A.value}`,
+            x1: "0%",
+            y1: "0%",
+            x2: "100%",
+            y2: "0%"
+          }, [
+            y("stop", {
+              offset: "0%",
+              "stop-color": e.value.style.layout.bars.left.color
+            }, null, 8, Qt),
+            y("stop", {
+              offset: "100%",
+              "stop-color": r(ue)(r(Ee)(e.value.style.layout.bars.left.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
+            }, null, 8, Zt)
+          ], 8, Kt),
+          y("linearGradient", {
+            id: `age_pyramid_right_${A.value}`,
+            x1: "0%",
+            y1: "0%",
+            x2: "100%",
+            y2: "0%"
+          }, [
+            y("stop", {
+              offset: "0%",
+              "stop-color": r(ue)(r(Ee)(e.value.style.layout.bars.right.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
+            }, null, 8, tl),
+            y("stop", {
+              offset: "100%",
+              "stop-color": e.value.style.layout.bars.right.color
+            }, null, 8, ll)
+          ], 8, el)
+        ]),
+        (i(!0), u(F, null, O(S.value, (l, o) => (i(), u("g", null, [
+          y("rect", {
+            x: l.left.x,
+            y: l.left.y,
+            width: r(b)(l.left.width <= 0 ? 1e-4 : l.left.width),
+            height: l.left.height <= 0 ? 1e-4 : l.left.height,
+            fill: e.value.style.layout.bars.gradient.underlayer,
+            rx: e.value.style.layout.bars.borderRadius
+          }, null, 8, ol),
+          y("rect", {
+            x: l.left.x,
+            y: l.left.y,
+            width: l.left.width <= 0 ? 1e-4 : l.left.width,
+            height: l.left.height <= 0 ? 1e-4 : l.left.height,
+            fill: e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_left_${A.value})` : l.left.color,
+            rx: e.value.style.layout.bars.borderRadius
+          }, null, 8, al),
+          y("rect", {
+            x: l.right.x,
+            y: l.right.y,
+            width: l.right.width <= 0 ? 1e-4 : l.right.width,
+            height: l.right.height <= 0 ? 1e-4 : l.right.height,
+            fill: e.value.style.layout.bars.gradient.underlayer,
+            rx: e.value.style.layout.bars.borderRadius
+          }, null, 8, sl),
+          y("rect", {
+            x: l.right.x,
+            y: l.right.y,
+            width: l.right.width <= 0 ? 1e-4 : l.right.width,
+            height: l.right.height <= 0 ? 1e-4 : l.right.height,
+            fill: e.value.style.layout.bars.gradient.show ? `url(#age_pyramid_right_${A.value})` : l.right.color,
+            rx: e.value.style.layout.bars.borderRadius
+          }, null, 8, il)
+        ]))), 256)),
+        y("g", null, [
+          e.value.style.layout.dataLabels.sideTitles.show ? (i(), u("g", rl, [
+            y("text", {
+              x: s.value.left,
+              y: e.value.style.layout.dataLabels.sideTitles.fontSize,
+              fill: e.value.style.layout.dataLabels.sideTitles.useSideColor ? e.value.style.layout.bars.left.color : e.value.style.layout.dataLabels.sideTitles.color,
+              "font-size": e.value.style.layout.dataLabels.sideTitles.fontSize,
+              "text-anchor": "start",
+              "font-weight": e.value.style.layout.dataLabels.sideTitles.bold ? "bold" : "normal"
+            }, T(e.value.translations.female), 9, ul),
+            y("text", {
+              x: s.value.right,
+              y: e.value.style.layout.dataLabels.sideTitles.fontSize,
+              fill: e.value.style.layout.dataLabels.sideTitles.useSideColor ? e.value.style.layout.bars.right.color : e.value.style.layout.dataLabels.sideTitles.color,
+              "font-size": e.value.style.layout.dataLabels.sideTitles.fontSize,
+              "text-anchor": "end",
+              "font-weight": e.value.style.layout.dataLabels.sideTitles.bold ? "bold" : "normal"
+            }, T(e.value.translations.male), 9, nl)
+          ])) : f("", !0),
+          e.value.style.layout.dataLabels.yAxis.show ? (i(), u("g", dl, [
+            (i(!0), u(F, null, O(ut.value, (l, o) => (i(), u(F, null, [
+              o % e.value.style.layout.dataLabels.yAxis.showEvery === 0 ? (i(), u("text", {
+                key: 0,
+                x: s.value.centerX,
+                y: s.value.top + s.value.height / E.value * o + e.value.style.layout.dataLabels.yAxis.fontSize / 3,
+                "text-anchor": "middle",
+                "font-size": e.value.style.layout.dataLabels.yAxis.fontSize,
+                fill: e.value.style.layout.dataLabels.yAxis.color,
+                "font-weight": e.value.style.layout.dataLabels.yAxis.bold ? "bold" : "normal"
+              }, T(r(z)(
+                e.value.style.layout.dataLabels.yAxis.formatter,
+                l,
+                r(B)({ v: l }),
+                { datapoint: l, seriesIndex: o }
+              )), 9, vl)) : f("", !0)
+            ], 64))), 256))
+          ])) : f("", !0),
+          e.value.style.layout.dataLabels.xAxis.show ? (i(), u("g", cl, [
+            e.value.style.layout.grid.show ? (i(), u("g", yl, [
+              y("line", {
+                x1: L.value.right[0].x,
+                x2: L.value.right.at(-1).x,
+                y1: s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
+                y2: s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
+                stroke: e.value.style.layout.grid.stroke,
+                "stroke-width": e.value.style.layout.grid.strokeWidth,
+                "stroke-linecap": "round"
+              }, null, 8, hl),
+              y("line", {
+                x1: L.value.left[0].x,
+                x2: L.value.left.at(-1).x,
+                y1: s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
+                y2: s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
+                stroke: e.value.style.layout.grid.stroke,
+                "stroke-width": e.value.style.layout.grid.strokeWidth,
+                "stroke-linecap": "round"
+              }, null, 8, fl)
+            ])) : f("", !0),
+            (i(!0), u(F, null, O(L.value.right, (l, o) => (i(), u("g", null, [
+              e.value.style.layout.grid.show ? (i(), u("line", {
+                key: 0,
+                x1: l.x,
+                x2: l.x,
+                y1: s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
+                y2: s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2 + 4,
+                stroke: e.value.style.layout.grid.stroke,
+                "stroke-width": e.value.style.layout.grid.strokeWidth,
+                "stroke-linecap": "round"
+              }, null, 8, gl)) : f("", !0)
+            ]))), 256)),
+            (i(!0), u(F, null, O(L.value.left, (l, o) => (i(), u("g", null, [
+              e.value.style.layout.grid.show ? (i(), u("line", {
+                key: 0,
+                x1: l.x,
+                x2: l.x,
+                y1: s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2,
+                y2: s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize / 2 + 4,
+                stroke: e.value.style.layout.grid.stroke,
+                "stroke-width": e.value.style.layout.grid.strokeWidth,
+                "stroke-linecap": "round"
+              }, null, 8, bl)) : f("", !0)
+            ]))), 256)),
+            y("g", {
+              ref_key: "xAxisLabels",
+              ref: q
+            }, [
+              (i(!0), u(F, null, O(L.value.right, (l, o) => (i(), u("text", {
+                class: "vue-ui-age-pyramid-x-axis-label",
+                "font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
+                fill: e.value.style.layout.dataLabels.xAxis.color,
+                "text-anchor": e.value.style.layout.dataLabels.xAxis.rotation > 0 ? "start" : e.value.style.layout.dataLabels.xAxis.rotation < 0 ? "end" : "middle",
+                "font-weight": e.value.style.layout.dataLabels.xAxis.bold ? "bold" : "normal",
+                transform: `translate(${l.x}, ${s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize * 2}) rotate(${e.value.style.layout.dataLabels.xAxis.rotation})`
+              }, T(r(z)(
+                e.value.style.layout.dataLabels.xAxis.formatter,
+                l.value / e.value.style.layout.dataLabels.xAxis.scale,
+                r(B)({
+                  v: l.value / e.value.style.layout.dataLabels.xAxis.scale
+                }),
+                { datapoint: l, seriesIndex: o }
+              )), 9, pl))), 256)),
+              (i(!0), u(F, null, O(L.value.left, (l, o) => (i(), u("text", {
+                class: "vue-ui-age-pyramid-x-axis-label",
+                "font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
+                fill: e.value.style.layout.dataLabels.xAxis.color,
+                "text-anchor": e.value.style.layout.dataLabels.xAxis.rotation > 0 ? "start" : e.value.style.layout.dataLabels.xAxis.rotation < 0 ? "end" : "middle",
+                "font-weight": e.value.style.layout.dataLabels.xAxis.bold ? "bold" : "normal",
+                transform: `translate(${l.x}, ${s.value.bottom + e.value.style.layout.dataLabels.xAxis.fontSize * 2}) rotate(${e.value.style.layout.dataLabels.xAxis.rotation})`
+              }, T(r(z)(
+                e.value.style.layout.dataLabels.xAxis.formatter,
+                l.value / e.value.style.layout.dataLabels.xAxis.scale,
+                r(B)({
+                  v: l.value / e.value.style.layout.dataLabels.xAxis.scale
+                }),
+                { datapoint: l, seriesIndex: o }
+              )), 9, xl))), 256))
+            ], 512),
+            y("text", {
+              x: s.value.right,
+              y: g.value.height,
+              "text-anchor": "end",
+              "font-size": e.value.style.layout.dataLabels.xAxis.fontSize,
+              fill: e.value.style.layout.dataLabels.xAxis.color,
+              "font-weight": e.value.style.layout.dataLabels.xAxis.bold ? "bold" : "normal"
+            }, T(e.value.style.layout.dataLabels.xAxis.translation), 9, ml)
+          ])) : f("", !0)
+        ]),
+        (i(!0), u(F, null, O(de.dataset, (l, o) => (i(), u("g", null, [
+          y("rect", {
+            x: s.value.left,
+            y: s.value.top + s.value.height / E.value * o - e.value.style.layout.bars.gap / 2,
+            width: s.value.width <= 0 ? 1e-4 : s.value.width,
+            height: s.value.height / E.value <= 0 ? 1e-4 : s.value.height / E.value,
+            fill: U.value !== null && U.value === o ? r(ue)(e.value.style.highlighter.color, e.value.style.highlighter.opacity) : "transparent",
+            onMouseover: (n) => yt(o, l),
+            onMouseleave: (n) => ct(o, l),
+            onClick: (n) => vt(o, l)
+          }, null, 40, Cl)
+        ]))), 256)),
+        v(t.$slots, "svg", { svg: g.value }, void 0, !0)
+      ], 14, qt)),
+      t.$slots.watermark ? (i(), u("div", kl, [
+        v(t.$slots, "watermark", C(k({ isPrinting: r(ke) || r(Ae) })), void 0, !0)
+      ])) : f("", !0),
+      v(t.$slots, "legend", { legend: S.value }, void 0, !0),
+      t.$slots.source ? (i(), u("div", {
+        key: 5,
+        ref_key: "source",
+        ref: he,
+        dir: "auto"
+      }, [
+        v(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : f("", !0),
+      ie(r(je), {
+        show: x.value.showTooltip && X.value,
+        backgroundColor: e.value.style.tooltip.backgroundColor,
+        color: e.value.style.tooltip.color,
+        borderRadius: e.value.style.tooltip.borderRadius,
+        borderColor: e.value.style.tooltip.borderColor,
+        borderWidth: e.value.style.tooltip.borderWidth,
+        fontSize: e.value.style.tooltip.fontSize,
+        backgroundOpacity: e.value.style.tooltip.backgroundOpacity,
+        position: e.value.style.tooltip.position,
+        offsetY: e.value.style.tooltip.offsetY,
+        parent: w.value,
+        content: Y.value,
+        isFullscreen: D.value,
+        isCustom: e.value.style.tooltip.customFormat && typeof e.value.style.tooltip.customFormat == "function",
+        smooth: e.value.style.tooltip.smooth,
+        backdropFilter: e.value.style.tooltip.backdropFilter,
+        smoothForce: e.value.style.tooltip.smoothForce,
+        smoothSnapThreshold: e.value.style.tooltip.smoothSnapThreshold
+      }, {
+        "tooltip-before": c(() => [
+          v(t.$slots, "tooltip-before", C(k({ ...te.value })), void 0, !0)
+        ]),
+        "tooltip-after": c(() => [
+          v(t.$slots, "tooltip-after", C(k({ ...te.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold"]),
+      ve.value && e.value.userOptions.buttons.table ? (i(), R(wt(N.value.component), Tt({ key: 6 }, N.value.props, {
+        ref_key: "tableUnit",
+        ref: P,
+        onClose: Fe
+      }), Be({
+        content: c(() => [
+          (i(), R(r(qe), {
+            key: `table_${be.value}`,
+            colNames: V.value.colNames,
+            head: V.value.head,
+            body: V.value.body,
+            config: V.value.config,
+            title: e.value.table.useDialog ? "" : N.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            onClose: Fe
+          }, {
+            th: c(({ th: l }) => [
+              re(T(l), 1)
+            ]),
+            td: c(({ td: l }) => [
+              re(T(l), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: c(() => [
+            re(T(N.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: c(() => [
+            y("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: a[0] || (a[0] = (l) => oe(e.value.userOptions.callbacks.csv))
+            }, [
+              ie(r(Xe), {
+                name: "excel",
+                stroke: N.value.props.color
+              }, null, 8, ["stroke"])
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : f("", !0),
+      r(pe) ? (i(), R(Pt, { key: 7 })) : f("", !0)
+    ], 46, Yt));
+  }
+}, wl = /* @__PURE__ */ Xt(Al, [["__scopeId", "data-v-ef1314b3"]]), Nl = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: wl
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Ml as a,
+  Nl as b,
+  wl as v
+};