vue-data-ui 3.15.12 → 3.16.1

package/dist/vue-ui-age-pyramid-CRM498Pc.js

@@ -0,0 +1,1069 @@
+import { defineAsyncComponent as I, computed as g, ref as r, toRefs as Mt, watch as ee, shallowRef as We, onMounted as Nt, onBeforeUnmount as Ke, watchEffect as Et, openBlock as u, createElementBlock as v, unref as n, normalizeStyle as te, normalizeClass as Xe, createElementVNode as c, toDisplayString as T, createBlock as R, createCommentVNode as p, withCtx as f, renderSlot as y, normalizeProps as w, guardReactiveProps as k, createSlots as je, createVNode as he, Fragment as O, renderList as M, resolveDynamicComponent as Bt, mergeProps as Ut, createTextVNode as ge, nextTick as pe } from "vue";
+import { j as Vt, t as Ye, o as qe, q as Gt, K as x, X as Ht, u as be, v as Je, k as N, l as E, a0 as Wt, a1 as Kt, T as Xt, U as jt, a3 as Yt } from "./lib-DBptbyyI.js";
+import { t as Qe, u as qt } from "./useResponsive-DfdjqQps.js";
+import { u as Jt } from "./useConfig-DO94Aj5s.js";
+import { u as Qt, B as Zt } from "./BaseScanner-BhhkKVoj.js";
+import { u as el } from "./usePrinter-CEpYU3r5.js";
+import { u as tl } from "./useSvgExport-ByUukOZt.js";
+import { u as me } from "./useNestedProp-Bf5XFbs8.js";
+import { u as ll } from "./useThemeCheck-D1ZYXUwG.js";
+import { u as al } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as ol } from "./useChartAccessibility-9icAAmYg.js";
+import { u as sl } from "./useTimeLabelCollider-CIsgDrl9.js";
+import il from "./img-LXxMLmCg.js";
+import ul from "./Title-BeMKE1cj.js";
+import nl from "./vue_ui_age_pyramid-8H8WSL7J.js";
+import { A as rl } from "./A11yDataTable-KcVAX2cP.js";
+import { _ as vl } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const dl = ["id"], yl = ["id"], cl = { style: { position: "relative" } }, fl = ["xmlns", "viewBox", "aria-describedby"], hl = ["x", "y", "width", "height"], gl = ["id"], pl = ["stop-color"], bl = ["stop-color"], ml = ["id"], xl = ["stop-color"], wl = ["stop-color"], kl = ["x", "y", "width", "height", "fill", "rx"], Cl = ["x", "y", "width", "height", "fill", "rx"], Al = ["x", "y", "width", "height", "fill", "rx"], Tl = ["x", "y", "width", "height", "fill", "rx"], $l = { key: 0 }, Ll = ["x", "y", "fill", "font-size", "font-weight"], _l = ["x", "y", "fill", "font-size", "font-weight"], Sl = { key: 1 }, Il = ["x", "y", "font-size", "fill", "font-weight"], Ol = { key: 2 }, Pl = { key: 0 }, zl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Fl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Dl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Rl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], Ml = ["font-size", "fill", "text-anchor", "font-weight", "transform"], Nl = ["font-size", "fill", "text-anchor", "font-weight", "transform"], El = ["x", "y", "font-size", "fill", "font-weight"], Bl = ["x", "y", "width", "height", "fill", "onMouseover", "onMouseleave", "onClick"], Ul = {
+  key: 0,
+  style: { position: "absolute", top: "100%", left: "0", width: "100%" },
+  "data-dom-to-png-ignore": "",
+  "aria-hidden": "true"
+}, Vl = {
+  key: 5,
+  class: "vue-data-ui-watermark"
+}, Gl = {
+  __name: "vue-ui-age-pyramid",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["copyAlt"],
+  setup(xe, { expose: Ze, emit: et }) {
+    const tt = I(() => import("./Tooltip-Bf-kM3_A.js")), lt = I(() => import("./BaseIcon-Cb3zzG6s.js")), at = I(() => import("./vue-ui-accordion-nvggWcGN.js")), ot = I(() => import("./DataTable-DT2kIdQ6.js")), st = I(() => import("./PenAndPaper-Ct3qJ4lA.js")), it = I(() => import("./UserOptions-rW2fRf3V.js")), ut = I(() => import("./PackageVersion-DPO-OOVI.js")), nt = I(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_age_pyramid: rt } = Jt(), { isThemeValid: vt, warnInvalidTheme: dt } = ll(), b = xe, yt = et, we = g(() => !!b.dataset && b.dataset.length), C = r(Vt()), V = r(!1), le = r(""), P = r(null), ke = r(0), $ = r(null), Ce = r(null), Ae = r(null), Te = r(null), $e = r(0), Le = r(0), ae = r(null), G = r(null), oe = r(null), q = r(!1), J = r(!1), L = r(null), _e = r({ x: 0, y: 0 }), H = r("pointer"), se = r(!1), e = r(ne()), W = g(() => e.value.userOptions.useCursorPointer), ct = g(() => Ye({
+      defaultConfig: {
+        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"
+            }
+          }
+        }
+      },
+      userConfig: e.value.skeletonConfig ?? {}
+    })), { loading: Se, FINAL_DATASET: Q, manualLoading: ie } = Qt({
+      ...Mt(b),
+      FINAL_CONFIG: e,
+      prepareConfig: ne,
+      skeletonDataset: b.config?.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: Ye({
+        defaultConfig: e.value,
+        userConfig: ct.value
+      })
+    }), { userOptionsVisible: ue, setUserOptionsVisibility: Ie, keepUserOptionState: Oe } = al({ config: e.value }), { svgRef: z } = ol({ config: e.value.style.title });
+    function ne() {
+      const t = me({
+        userConfig: b.config,
+        defaultConfig: rt
+      }), a = t.theme;
+      if (!a) return t;
+      if (!vt.value(t))
+        return dt(t), t;
+      const l = me({
+        userConfig: nl[a] || b.config,
+        defaultConfig: t
+      });
+      return me({
+        userConfig: b.config,
+        defaultConfig: l
+      });
+    }
+    ee(() => b.config, (t) => {
+      Se.value || (e.value = ne()), ue.value = !e.value.userOptions.showOnChartHover, Pe(), $e.value += 1, Le.value += 1, A.value.showTable = e.value.table.show, A.value.showTooltip = e.value.style.tooltip.show;
+    }, { deep: !0 }), ee(() => b.dataset, (t) => {
+      Array.isArray(t) && t.length > 0 && (ie.value = !1);
+    }, { deep: !0 });
+    const _ = We(null), B = We(null);
+    Nt(() => {
+      Pe();
+    });
+    const ft = g(() => !!e.value.debug);
+    function Pe() {
+      if (qe(b.dataset) && (Gt({
+        componentName: "VueUiAgePyramid",
+        type: "dataset",
+        debug: ft.value
+      }), ie.value = !0), qe(b.dataset) || (ie.value = e.value.loading), e.value.responsive) {
+        const t = Qe(() => {
+          const { width: a, height: l } = qt({
+            chart: $.value,
+            title: e.value.style.title.text ? Ce.value : null,
+            source: Ae.value,
+            noTitle: Te.value
+          });
+          requestAnimationFrame(() => {
+            m.value.width = a, m.value.height = l;
+          });
+        });
+        _.value && (B.value && _.value.unobserve(B.value), _.value.disconnect()), _.value = new ResizeObserver(t), B.value = $.value.parentNode, _.value.observe(B.value);
+      }
+    }
+    Ke(() => {
+      _.value && (B.value && _.value.unobserve(B.value), _.value.disconnect());
+    });
+    const { isPrinting: re, isImaging: ve, generatePdf: ze, generateImage: Fe } = el({
+      elementId: `vue-ui-age-pyramid_${C.value}`,
+      fileName: e.value.style.title.text || "vue-ui-age-pyramid",
+      options: e.value.userOptions.print
+    }), ht = g(() => e.value.userOptions.show && !e.value.style.title.text), A = r({
+      showTable: e.value.table.show,
+      showTooltip: e.value.style.tooltip.show
+    });
+    ee(e, () => {
+      A.value = {
+        showTable: e.value.table.show,
+        showTooltip: e.value.style.tooltip.show
+      };
+    }, { immediate: !0 });
+    const m = r({
+      height: e.value.style.height,
+      width: e.value.style.width
+    }), gt = g(() => m.value.width), pt = g(() => m.value.height), Z = r(0), bt = Qe((t) => {
+      Z.value = t;
+    }, 100);
+    Et((t) => {
+      const a = ae.value;
+      if (!a) return;
+      const l = new ResizeObserver((o) => {
+        bt(o[0].contentRect.height);
+      });
+      l.observe(a), t(() => l.disconnect());
+    }), Ke(() => {
+      Z.value = 0;
+    });
+    const s = g(() => {
+      const t = m.value.width - e.value.style.layout.padding.right - e.value.style.layout.padding.left, a = e.value.style.layout.padding.left, l = m.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: m.value.height - e.value.style.layout.padding.bottom - Z.value,
+        width: t,
+        height: m.value.height - e.value.style.layout.padding.top - e.value.style.layout.padding.bottom - Z.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
+        }
+      };
+    }), mt = g(() => Q.value.map((t) => e.value.style.layout.dataLabels.yAxis.display === "age" ? t[1] : t[0])), S = g(() => {
+      const t = xt(K.value / 5), a = [], l = [];
+      for (let o = 0; o <= 5; o += 1) {
+        const d = t * o, i = t * (o - 5);
+        a.push({
+          value: d,
+          x: s.value.left + s.value.width / 2 + e.value.style.layout.centerSlit.width + d / K.value * s.value.leftChart.width
+        }), l.push({
+          value: Math.abs(i),
+          x: s.value.left + s.value.width / 2 + i / K.value * s.value.leftChart.width - e.value.style.layout.centerSlit.width
+        });
+      }
+      return {
+        right: a,
+        left: l
+      };
+    });
+    function xt(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 K = g(() => Math.max(...Q.value.flatMap((t) => t.slice(-2).map((a) => x(a))))), U = g(() => Q.value.length), wt = g(() => Q.value.map((t) => ({
+      segment: t[0],
+      age: t[1],
+      left: {
+        value: t[2],
+        proportionToMax: t[2] / K.value
+      },
+      right: {
+        value: t[3],
+        proportionToMax: t[3] / K.value
+      }
+    }))), h = g(() => wt.value.map((t, a) => {
+      const l = s.value.top + s.value.height / U.value * a, o = s.value.height / U.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: x(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: x(t.right.proportionToMax * s.value.rightChart.width),
+          height: o
+        }
+      };
+    })), de = r(null);
+    function ye(t) {
+      const [a, l, o, d] = t;
+      return { segment: a, index: l, left: o, right: d };
+    }
+    function De(t, a) {
+      e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: ye(a), seriesIndex: t });
+    }
+    function kt(t, a) {
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: ye(a), seriesIndex: t }), !(H.value === "keyboard" && L.value === t) && (P.value = null, V.value = !1);
+    }
+    function Ct(t) {
+      if (!z.value) return;
+      const a = h.value[t];
+      if (!a) return;
+      const l = Yt(
+        s.value.left + s.value.width / 2,
+        a.left.y + a.left.height / 2,
+        z.value
+      );
+      l && (_e.value = l);
+    }
+    function Re(t, a, l = "pointer") {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: ye(a), seriesIndex: t }), P.value = t, L.value = t, H.value = l, de.value = {
+        datapoint: a,
+        seriesIndex: t,
+        series: h.value,
+        config: e.value
+      };
+      const o = e.value.style.tooltip.customFormat;
+      if (Xt(o) && jt(() => o({
+        seriesIndex: t,
+        datapoint: {
+          segment: a[0],
+          index: a[1],
+          left: a[2],
+          right: a[3]
+        },
+        series: h.value,
+        config: e.value
+      })))
+        le.value = o({
+          seriesIndex: t,
+          datapoint: {
+            segment: a[0],
+            index: a[1],
+            left: a[2],
+            right: a[3]
+          },
+          series: h.value,
+          config: e.value
+        });
+      else {
+        let d = "";
+        const i = h.value[t];
+        d += `<div><b>${i.segment}</b></div>`, d += `<div>${e.value.translations.age}: ${N(
+          e.value.style.layout.dataLabels.yAxis.formatter,
+          x(i.age),
+          E({ v: x(i.age) }),
+          { datapoint: a, seriesIndex: t }
+        )}</div>`, d += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid ${e.value.style.tooltip.borderColor}">`, d += '<div style="display:flex; flex-direction:row;gap:12px">', d += `<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_${C.value})` : e.value.style.layout.bars.left.color}"/></svg><div>${e.value.translations.female}</div><div><b>${N(
+          e.value.style.layout.dataLabels.xAxis.formatter,
+          x(i.left.value),
+          E({ v: x(i.left.value) }),
+          { datapoint: a, seriesIndex: t }
+        )}</b></div></div>`, d += `<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_${C.value})` : e.value.style.layout.bars.right.color}"/></svg><div>${e.value.translations.male}</div><div><b>${N(
+          e.value.style.layout.dataLabels.xAxis.formatter,
+          x(i.right.value),
+          E({ v: x(i.right.value) }),
+          { datapoint: a, seriesIndex: t }
+        )}</b></div></div>`, d += "</div>", d += `<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>${N(
+          e.value.style.layout.dataLabels.xAxis.formatter,
+          x(i.right.value) + x(i.left.value),
+          E({ v: x(i.right.value) + x(i.left.value) }),
+          { datapoint: a, seriesIndex: t }
+        )}</b></div></div>`, d += "</div>", le.value = `<div>${d}</div>`;
+      }
+      V.value = !0, l === "keyboard" && pe(() => {
+        Ct(t);
+      });
+    }
+    function ce(t = null) {
+      pe(() => {
+        const a = [e.value.translations.year, e.value.translations.age, e.value.translations.female, e.value.translations.male, e.value.translations.total], l = b.dataset.map((i) => [
+          i[0],
+          i[1],
+          i[2],
+          i[3],
+          i[2] ?? 0 + i[3] ?? 0
+        ]), o = [[e.value.style.title.text], [e.value.style.title.subtitle.text], [[""], [""], [""]]].concat([a]).concat(l), d = Wt(o);
+        t ? t(d) : Kt({ csvContent: d, title: e.value.style.title.text || "vue-ui-heatmap" });
+      });
+    }
+    const F = g(() => {
+      const t = [
+        e.value.translations.year,
+        e.value.translations.age,
+        e.value.translations.female,
+        e.value.translations.male,
+        e.value.translations.total
+      ], a = b.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 = r(!1);
+    function Me(t) {
+      D.value = t, ke.value += 1;
+    }
+    function Ne() {
+      A.value.showTable = !A.value.showTable;
+    }
+    function Ee() {
+      A.value.showTooltip = !A.value.showTooltip;
+    }
+    const X = r(!1);
+    function fe() {
+      X.value = !X.value;
+    }
+    async function At({ scale: t = 2 } = {}) {
+      if (!$.value) return;
+      const { width: a, height: l } = $.value.getBoundingClientRect(), o = a / l, { imageUri: d, base64: i } = await il({ domElement: $.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: d,
+        base64: i,
+        title: e.value.style.title.text,
+        width: a,
+        height: l,
+        aspectRatio: o
+      };
+    }
+    const Tt = r([]), $t = r({ start: 0, end: h.value.length });
+    sl({
+      timeLabelsEls: ae,
+      timeLabels: Tt,
+      slicer: $t,
+      configRef: e,
+      rotationPath: ["style", "layout", "dataLabels", "xAxis", "rotation"],
+      autoRotatePath: ["style", "layout", "dataLabels", "xAxis", "autoRotate", "enable"],
+      isAutoSize: !1,
+      width: gt,
+      height: pt,
+      targetClass: ".vue-ui-age-pyramid-x-axis-label",
+      rotation: e.value.style.layout.dataLabels.xAxis.autoRotate.angle
+    });
+    const j = g(() => {
+      const t = e.value.table.useDialog && !e.value.table.show, a = A.value.showTable;
+      return {
+        component: t ? nt : at,
+        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: $.value,
+          forcedWidth: Math.min(800, window.innerWidth * 0.8),
+          isCursorPointer: W.value
+        } : {
+          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
+            }
+          }
+        }
+      };
+    });
+    ee(() => A.value.showTable, (t) => {
+      e.value.table.show || (t && e.value.table.useDialog && G.value ? G.value.open() : "close" in G.value && G.value.close());
+    });
+    function Be() {
+      A.value.showTable = !1, oe.value && oe.value.setTableIconState(!1);
+    }
+    const Lt = g(() => e.value.style.backgroundColor), _t = g(() => e.value.style.title), { exportSvg: St, getSvg: It } = tl({
+      svg: z,
+      title: _t,
+      backgroundColor: Lt
+    });
+    async function Ue({ isCb: t }) {
+      J.value = !0, await pe();
+      try {
+        if (t) {
+          const { blob: a, url: l, text: o, dataUrl: d } = await It();
+          await Promise.resolve(e.value.userOptions.callbacks.svg({ blob: a, url: l, text: o, dataUrl: d }));
+        } else
+          await Promise.resolve(St());
+      } finally {
+        J.value = !1;
+      }
+    }
+    function Ot(t) {
+      if (t?.stage === "start") {
+        q.value = !0;
+        return;
+      }
+      if (t?.stage === "end") {
+        q.value = !1;
+        return;
+      }
+      Fe();
+    }
+    async function Ve() {
+      if (yt("copyAlt", {
+        config: e.value,
+        dataset: h.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: h.value
+      }));
+    }
+    function Pt() {
+      se.value = !0;
+    }
+    function zt() {
+      P.value = null, L.value = null, H.value = "pointer", V.value = !1, se.value = !1;
+    }
+    function Ft(t) {
+      if (!z.value || X.value || document.activeElement !== z.value || !h.value.length) return;
+      const a = ["ArrowUp", "ArrowLeft"].includes(t.key), l = ["ArrowDown", "ArrowRight"].includes(t.key), o = t.key === "Enter" || t.key === " ", d = t.key === "Escape";
+      if (!a && !l && !o && !d) return;
+      if (t.preventDefault(), t.stopPropagation(), d) {
+        P.value = null, L.value = null, H.value = "pointer", V.value = !1;
+        return;
+      }
+      if (o) {
+        if (L.value === null) return;
+        const He = b.dataset[L.value];
+        if (!He) return;
+        De(L.value, He);
+        return;
+      }
+      let i = L.value;
+      const Y = P.value, Dt = i !== null && i >= 0 && i < h.value.length, Rt = Y !== null && Y >= 0 && Y < h.value.length;
+      Dt ? a ? i = i - 1 < 0 ? h.value.length - 1 : i - 1 : l && (i = i + 1 > h.value.length - 1 ? 0 : i + 1) : Rt ? (i = l ? Y + 1 : Y - 1, i >= h.value.length && (i = 0), i < 0 && (i = h.value.length - 1)) : l ? i = 0 : i = h.value.length - 1;
+      const Ge = b.dataset[i];
+      Ge && Re(i, Ge, "keyboard");
+    }
+    return Ze({
+      getImage: At,
+      generatePdf: ze,
+      generateCsv: ce,
+      generateImage: Fe,
+      generateSvg: Ue,
+      toggleTable: Ne,
+      toggleTooltip: Ee,
+      toggleAnnotator: fe,
+      toggleFullscreen: Me,
+      copyAlt: Ve
+    }), (t, a) => (u(), v("div", {
+      class: Xe(`vue-data-ui-component vue-ui-age-pyramid ${D.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      ref_key: "agePyramid",
+      ref: $,
+      id: `vue-ui-age-pyramid_${C.value}`,
+      style: te(`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] = () => n(Ie)(!0)),
+      onMouseleave: a[2] || (a[2] = () => n(Ie)(!1))
+    }, [
+      c("div", {
+        id: `chart-instructions-${C.value}`,
+        class: "sr-only"
+      }, [
+        c("p", null, T(e.value.a11y.translations.keyboardNavigation), 1)
+      ], 8, yl),
+      F.value?.body?.length ? (u(), R(rl, {
+        key: 0,
+        uid: C.value,
+        head: F.value.head,
+        body: F.value.body,
+        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 ? (u(), R(n(st), {
+        key: 1,
+        svgRef: n(z),
+        backgroundColor: e.value.style.backgroundColor,
+        color: e.value.style.color,
+        active: X.value,
+        isCursorPointer: W.value,
+        onClose: fe
+      }, {
+        "annotator-action-close": f(() => [
+          y(t.$slots, "annotator-action-close", {}, void 0, !0)
+        ]),
+        "annotator-action-color": f(({ color: l }) => [
+          y(t.$slots, "annotator-action-color", w(k({ color: l })), void 0, !0)
+        ]),
+        "annotator-action-draw": f(({ mode: l }) => [
+          y(t.$slots, "annotator-action-draw", w(k({ mode: l })), void 0, !0)
+        ]),
+        "annotator-action-undo": f(({ disabled: l }) => [
+          y(t.$slots, "annotator-action-undo", w(k({ disabled: l })), void 0, !0)
+        ]),
+        "annotator-action-redo": f(({ disabled: l }) => [
+          y(t.$slots, "annotator-action-redo", w(k({ disabled: l })), void 0, !0)
+        ]),
+        "annotator-action-delete": f(({ disabled: l }) => [
+          y(t.$slots, "annotator-action-delete", w(k({ disabled: l })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["svgRef", "backgroundColor", "color", "active", "isCursorPointer"])) : p("", !0),
+      ht.value ? (u(), v("div", {
+        key: 2,
+        ref_key: "noTitle",
+        ref: Te,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : p("", !0),
+      e.value.style.title.text ? (u(), v("div", {
+        key: 3,
+        ref_key: "chartTitle",
+        ref: Ce,
+        style: "width:100%;background:transparent"
+      }, [
+        (u(), R(ul, {
+          key: `title_${$e.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)) : p("", !0),
+      e.value.userOptions.show && we.value && (n(Oe) || n(ue)) ? (u(), R(n(it), {
+        ref_key: "userOptionsRef",
+        ref: oe,
+        key: `user_options_${ke.value}`,
+        backgroundColor: e.value.style.backgroundColor,
+        color: e.value.style.color,
+        isImaging: n(ve),
+        isPrinting: n(re),
+        uid: C.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,
+        hasAltCopy: e.value.userOptions.buttons.altCopy,
+        isFullscreen: D.value,
+        isTooltip: A.value.showTooltip,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: $.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: X.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        tableDialog: e.value.table.useDialog,
+        isCursorPointer: W.value,
+        onToggleFullscreen: Me,
+        onGeneratePdf: n(ze),
+        onGenerateCsv: ce,
+        onGenerateImage: Ot,
+        onGenerateSvg: Ue,
+        onToggleTable: Ne,
+        onToggleTooltip: Ee,
+        onToggleAnnotator: fe,
+        onCopyAlt: Ve,
+        style: te({
+          visibility: n(Oe) ? n(ue) ? "visible" : "hidden" : "visible"
+        })
+      }, je({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: f(({ isOpen: l, color: o }) => [
+            y(t.$slots, "menuIcon", w(k({ isOpen: l, color: o })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: f(() => [
+            y(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: f(() => [
+            y(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: f(() => [
+            y(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: f(() => [
+            y(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionSvg ? {
+          name: "optionSvg",
+          fn: f(() => [
+            y(t.$slots, "optionSvg", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: f(() => [
+            y(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: f(({ toggleFullscreen: l, isFullscreen: o }) => [
+            y(t.$slots, "optionFullscreen", w(k({ toggleFullscreen: l, isFullscreen: o })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: f(({ toggleAnnotator: l, isAnnotator: o }) => [
+            y(t.$slots, "optionAnnotator", w(k({ toggleAnnotator: l, isAnnotator: o })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0,
+        t.$slots.optionAltCopy ? {
+          name: "optionAltCopy",
+          fn: f(({ altCopy: l }) => [
+            y(t.$slots, "optionAltCopy", w(k({ altCopy: l })), void 0, !0)
+          ]),
+          key: "9"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasSvg", "hasTable", "hasFullscreen", "hasAltCopy", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "tableDialog", "isCursorPointer", "onGeneratePdf", "style"])) : p("", !0),
+      c("div", cl, [
+        (u(), v("svg", {
+          ref_key: "svgRef",
+          ref: z,
+          xmlns: n(Ht),
+          class: Xe({ "vue-data-ui-fullscreen--on": D.value, "vue-data-ui-fulscreen--off": !D.value }),
+          viewBox: `0 0 ${m.value.width <= 0 ? 10 : m.value.width} ${m.value.height <= 0 ? 10 : m.value.height}`,
+          style: te(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.color}`),
+          tabindex: "0",
+          "aria-describedby": `chart-instructions-${C.value}`,
+          onFocus: Pt,
+          onBlur: zt,
+          onKeydown: Ft
+        }, [
+          he(n(ut)),
+          t.$slots["chart-background"] ? (u(), v("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"
+            }
+          }, [
+            y(t.$slots, "chart-background", {}, void 0, !0)
+          ], 8, hl)) : p("", !0),
+          c("defs", null, [
+            c("linearGradient", {
+              id: `age_pyramid_left_${C.value}`,
+              x1: "0%",
+              y1: "0%",
+              x2: "100%",
+              y2: "0%"
+            }, [
+              c("stop", {
+                offset: "0%",
+                "stop-color": e.value.style.layout.bars.left.color
+              }, null, 8, pl),
+              c("stop", {
+                offset: "100%",
+                "stop-color": n(be)(n(Je)(e.value.style.layout.bars.left.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
+              }, null, 8, bl)
+            ], 8, gl),
+            c("linearGradient", {
+              id: `age_pyramid_right_${C.value}`,
+              x1: "0%",
+              y1: "0%",
+              x2: "100%",
+              y2: "0%"
+            }, [
+              c("stop", {
+                offset: "0%",
+                "stop-color": n(be)(n(Je)(e.value.style.layout.bars.right.color, e.value.style.layout.bars.gradient.shiftHue), 100 - e.value.style.layout.bars.gradient.intensity)
+              }, null, 8, xl),
+              c("stop", {
+                offset: "100%",
+                "stop-color": e.value.style.layout.bars.right.color
+              }, null, 8, wl)
+            ], 8, ml)
+          ]),
+          (u(!0), v(O, null, M(h.value, (l, o) => (u(), v("g", null, [
+            c("rect", {
+              x: l.left.x,
+              y: l.left.y,
+              width: n(x)(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, kl),
+            c("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_${C.value})` : l.left.color,
+              rx: e.value.style.layout.bars.borderRadius
+            }, null, 8, Cl),
+            c("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, Al),
+            c("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_${C.value})` : l.right.color,
+              rx: e.value.style.layout.bars.borderRadius
+            }, null, 8, Tl)
+          ]))), 256)),
+          c("g", null, [
+            e.value.style.layout.dataLabels.sideTitles.show ? (u(), v("g", $l, [
+              c("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, Ll),
+              c("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, _l)
+            ])) : p("", !0),
+            e.value.style.layout.dataLabels.yAxis.show ? (u(), v("g", Sl, [
+              (u(!0), v(O, null, M(mt.value, (l, o) => (u(), v(O, null, [
+                o % e.value.style.layout.dataLabels.yAxis.showEvery === 0 ? (u(), v("text", {
+                  key: 0,
+                  x: s.value.centerX,
+                  y: s.value.top + s.value.height / U.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(n(N)(
+                  e.value.style.layout.dataLabels.yAxis.formatter,
+                  l,
+                  n(E)({ v: l }),
+                  { datapoint: l, seriesIndex: o }
+                )), 9, Il)) : p("", !0)
+              ], 64))), 256))
+            ])) : p("", !0),
+            e.value.style.layout.dataLabels.xAxis.show ? (u(), v("g", Ol, [
+              e.value.style.layout.grid.show ? (u(), v("g", Pl, [
+                c("line", {
+                  x1: S.value.right[0].x,
+                  x2: S.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, zl),
+                c("line", {
+                  x1: S.value.left[0].x,
+                  x2: S.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)
+              ])) : p("", !0),
+              (u(!0), v(O, null, M(S.value.right, (l, o) => (u(), v("g", null, [
+                e.value.style.layout.grid.show ? (u(), v("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, Dl)) : p("", !0)
+              ]))), 256)),
+              (u(!0), v(O, null, M(S.value.left, (l, o) => (u(), v("g", null, [
+                e.value.style.layout.grid.show ? (u(), v("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, Rl)) : p("", !0)
+              ]))), 256)),
+              c("g", {
+                ref_key: "xAxisLabels",
+                ref: ae
+              }, [
+                (u(!0), v(O, null, M(S.value.right, (l, o) => (u(), v("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(n(N)(
+                  e.value.style.layout.dataLabels.xAxis.formatter,
+                  l.value / e.value.style.layout.dataLabels.xAxis.scale,
+                  n(E)({
+                    v: l.value / e.value.style.layout.dataLabels.xAxis.scale
+                  }),
+                  { datapoint: l, seriesIndex: o }
+                )), 9, Ml))), 256)),
+                (u(!0), v(O, null, M(S.value.left, (l, o) => (u(), v("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(n(N)(
+                  e.value.style.layout.dataLabels.xAxis.formatter,
+                  l.value / e.value.style.layout.dataLabels.xAxis.scale,
+                  n(E)({
+                    v: l.value / e.value.style.layout.dataLabels.xAxis.scale
+                  }),
+                  { datapoint: l, seriesIndex: o }
+                )), 9, Nl))), 256))
+              ], 512),
+              c("text", {
+                x: s.value.right,
+                y: m.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, El)
+            ])) : p("", !0)
+          ]),
+          (u(!0), v(O, null, M(xe.dataset, (l, o) => (u(), v("g", null, [
+            c("rect", {
+              x: s.value.left,
+              y: s.value.top + s.value.height / U.value * o - e.value.style.layout.bars.gap / 2,
+              width: s.value.width <= 0 ? 1e-4 : s.value.width,
+              height: s.value.height / U.value <= 0 ? 1e-4 : s.value.height / U.value,
+              fill: P.value !== null && P.value === o ? n(be)(e.value.style.highlighter.color, e.value.style.highlighter.opacity) : "transparent",
+              onMouseover: (d) => Re(o, l, "pointer"),
+              onMouseleave: (d) => kt(o, l),
+              onClick: (d) => De(o, l)
+            }, null, 40, Bl)
+          ]))), 256)),
+          y(t.$slots, "svg", {
+            svg: {
+              ...m.value,
+              isPrintingImg: n(re) | n(ve) | q.value,
+              isPrintingSvg: J.value
+            }
+          }, void 0, !0)
+        ], 46, fl)),
+        t.$slots.hint ? (u(), v("div", Ul, [
+          y(t.$slots, "hint", w(k({ hint: e.value.a11y.translations.keyboardNavigation, isVisible: se.value })), void 0, !0)
+        ])) : p("", !0)
+      ]),
+      t.$slots.watermark ? (u(), v("div", Vl, [
+        y(t.$slots, "watermark", w(k({ isPrinting: n(re) || n(ve) || q.value || J.value })), void 0, !0)
+      ])) : p("", !0),
+      y(t.$slots, "legend", { legend: h.value }, void 0, !0),
+      t.$slots.source ? (u(), v("div", {
+        key: 6,
+        ref_key: "source",
+        ref: Ae,
+        dir: "auto"
+      }, [
+        y(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : p("", !0),
+      he(n(tt), {
+        teleportTo: e.value.style.tooltip.teleportTo,
+        show: A.value.showTooltip && V.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: $.value,
+        content: le.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,
+        isA11yMode: H.value === "keyboard",
+        a11yPosition: _e.value
+      }, {
+        "tooltip-before": f(() => [
+          y(t.$slots, "tooltip-before", w(k({ ...de.value })), void 0, !0)
+        ]),
+        "tooltip-after": f(() => [
+          y(t.$slots, "tooltip-after", w(k({ ...de.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["teleportTo", "show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold", "isA11yMode", "a11yPosition"]),
+      we.value && e.value.userOptions.buttons.table ? (u(), R(Bt(j.value.component), Ut({ key: 7 }, j.value.props, {
+        ref_key: "tableUnit",
+        ref: G,
+        onClose: Be
+      }), je({
+        content: f(() => [
+          (u(), R(n(ot), {
+            key: `table_${Le.value}`,
+            colNames: F.value.colNames,
+            head: F.value.head,
+            body: F.value.body,
+            config: F.value.config,
+            title: e.value.table.useDialog ? "" : j.value.title,
+            withCloseButton: !e.value.table.useDialog,
+            isCursorPointer: W.value,
+            onClose: Be
+          }, {
+            th: f(({ th: l }) => [
+              ge(T(l), 1)
+            ]),
+            td: f(({ td: l }) => [
+              ge(T(l), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title", "withCloseButton", "isCursorPointer"]))
+        ]),
+        _: 2
+      }, [
+        e.value.table.useDialog ? {
+          name: "title",
+          fn: f(() => [
+            ge(T(j.value.title), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        e.value.table.useDialog ? {
+          name: "actions",
+          fn: f(() => [
+            c("button", {
+              tabindex: "0",
+              class: "vue-ui-user-options-button",
+              onClick: a[0] || (a[0] = (l) => ce(e.value.userOptions.callbacks.csv)),
+              style: te({ cursor: W.value ? "pointer" : "default" })
+            }, [
+              he(n(lt), {
+                name: "fileCsv",
+                stroke: j.value.props.color
+              }, null, 8, ["stroke"])
+            ], 4)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040)) : p("", !0),
+      y(t.$slots, "skeleton", {}, () => [
+        n(Se) ? (u(), R(Zt, { key: 0 })) : p("", !0)
+      ], !0)
+    ], 46, dl));
+  }
+}, ua = /* @__PURE__ */ vl(Gl, [["__scopeId", "data-v-b63d06c1"]]);
+export {
+  ua as default
+};