import { ref as o, onMounted as F, computed as B, watch as V, onBeforeUnmount as re, nextTick as de, openBlock as u, createElementBlock as r, createElementVNode as E, normalizeStyle as d, unref as C, normalizeClass as Ae, createTextVNode as G, toDisplayString as M, renderSlot as p, Fragment as q, renderList as D, normalizeProps as X, guardReactiveProps as j, createCommentVNode as N, createBlock as ve, createSlots as xe, withCtx as O } from "vue";
import { u as ke, c as we, o as J, e as K, s as Ie, q as Fe, r as Be } from "./index-DK7qqHGP.js";
import { u as Oe } from "./useNestedProp-0nRX_rTi.js";
import { u as Pe, U as Re } from "./usePrinter-Cza87yNE.js";
import ze from "./vue-ui-skeleton-CQnYuosp.js";
import { _ as Ee } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Ne = ["id"], Se = ["height"], He = ["data-cell", "height"], Le = {
  __name: "vue-ui-carousel-table",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  setup(g, { expose: ce }) {
    const l = g, { vue_ui_carousel_table: pe } = ke(), S = o(we()), Q = o(!1), $ = o(!!l.dataset);
    F(() => {
      W();
    });
    function W() {
      J(l.dataset) ? K({
        componentName: "VueUiCarouselTable",
        type: "dataset"
      }) : ((!l.dataset.head || J(l.dataset.head)) && (K({
        componentName: "VueUiCarouselTable",
        type: "datasetAttribute",
        property: "head"
      }), $.value = !1), (!l.dataset.body || J(l.dataset.body)) && (K({
        componentName: "VueUiCarouselTable",
        type: "datasetAttribute",
        property: "body"
      }), $.value = !1));
    }
    const e = B({
      get: () => Y(),
      set: (t) => t
    });
    function Y() {
      return Oe({
        userConfig: l.config,
        defaultConfig: pe
      });
    }
    V(() => l.config, (t) => {
      e.value = Y(), W();
    }, { deep: !0 }), V(() => l.dataset, (t) => {
      H();
    }, { deep: !0 });
    const { isPrinting: Z, isImaging: _, generatePdf: he, generateImage: ee } = Pe({
      elementId: `carousel-table_${S.value}`,
      fileName: e.value.caption.text || "vue-ui-carousel-table"
    }), v = o({
      showAnimation: e.value.animation.use
    }), s = o(null), te = o(null), T = o(null), A = o(null), x = o(0), P = o(0), R = o(!1), k = o(null), h = o(null), w = o(0);
    function H() {
      k.value && (h.value = {
        elements: k.value.getElementsByTagName("tr"),
        heights: Array.from(k.value.getElementsByTagName("tr")).map((t) => t.getBoundingClientRect().height)
      });
    }
    F(H);
    const fe = B(() => !h.value || !h.value.heights.length ? 0 : Math.max(...h.value.heights) + x.value + P.value), ge = B(() => l.dataset.body ? e.value.tbody.tr.visible <= l.dataset.body.length ? e.value.tbody.tr.visible : l.dataset.body.length : 0), me = B(() => (e.value.tbody.tr.height + e.value.tbody.tr.td.padding.top + e.value.tbody.tr.td.padding.bottom + e.value.tbody.tr.border.size * 2) * ge.value + x.value + P.value), z = o(0), I = o(null), m = o(0), b = o(!1), ae = o(0);
    F(() => {
      T.value && (x.value = T.value.getBoundingClientRect().height), A.value && (P.value = A.value.getBoundingClientRect().height), v.value.showAnimation && h.value && oe();
    }), F(() => {
      if (s.value) {
        let a = function() {
          const i = t.getBoundingClientRect().bottom;
          n.forEach((c) => {
            c.getBoundingClientRect().top < i ? c.style.visibility = "hidden" : c.style.visibility = "visible";
          });
        };
        const t = s.value.querySelector("thead"), n = Array.from(k.value.querySelectorAll("tr"));
        s.value.addEventListener("scroll", a), a(), re(() => {
          s.value.removeEventListener("scroll", a);
        });
      }
    });
    function be(t) {
      Q.value = t, ae.value += 1;
    }
    function oe() {
      !I.value && !b.value && (I.value = requestAnimationFrame(ne));
    }
    function ye() {
      if (!s.value) return !1;
      const { scrollTop: t, scrollHeight: n, clientHeight: a } = s.value;
      return t + a >= n;
    }
    function ne(t) {
      if (b.value) return;
      m.value || (m.value = t), t - m.value >= e.value.animation.speedMs && (z.value += h.value.heights[w.value], (ye() || w.value >= h.value.heights.length) && (z.value = 0, w.value = -1), w.value += 1, s.value && s.value.scrollTo({
        top: z.value,
        behavior: "smooth"
      }), m.value = t), I.value = requestAnimationFrame(ne);
    }
    function f() {
      b.value = !0, cancelAnimationFrame(I.value), I.value = null;
    }
    re(f);
    function y() {
      !b.value || !v.value.showAnimation || (b.value = !1, m.value = 0, oe());
    }
    function Ce() {
      e.value.animation.pauseOnHover && f();
    }
    const L = o(null);
    function $e() {
      f(), clearTimeout(L.value);
    }
    function le() {
      clearTimeout(L.value), L.value = setTimeout(y, 1e3);
    }
    V(
      () => e.value.animation.use,
      (t) => {
        t ? (v.value.showAnimation = !0, y()) : (v.value.showAnimation = !1, f());
      }
    );
    const Te = B(() => e.value.responsiveBreakpoint);
    F(() => {
      const t = new ResizeObserver((n) => {
        n.forEach((a) => {
          R.value = a.contentRect.width < Te.value;
        }), x.value = T.value ? T.value.getBoundingClientRect().height : 0, P.value = A.value ? A.value.getBoundingClientRect().height : 0, w.value = 0, de(() => {
          f(), m.value = 0, z.value = 0, H(), y();
        });
      });
      s.value && t.observe(s.value);
    });
    function ie() {
      he();
    }
    function se() {
      v.value.showAnimation = !v.value.showAnimation, v.value.showAnimation ? y() : f();
    }
    function ue() {
      de(() => {
        const t = l.dataset.head.map((i, c) => [
          [l.dataset.body[c]]
        ]), n = [
          [e.value.caption.text],
          [l.dataset.head.map((i) => [i])]
        ].concat(t), a = Fe(n);
        Be({
          csvContent: a,
          title: e.value.caption.text || "vue-ui-carousel-table"
        });
      });
    }
    return ce({
      pauseAnimation: f,
      resumeAnimation: y,
      toggleAnimation: se,
      generateCsv: ue,
      generatePdf: ie,
      generateImage: ee
    }), (t, n) => (u(), r("div", {
      style: { position: "relative", overflow: "visible" },
      ref_key: "chartContainer",
      ref: te
    }, [
      E("div", {
        ref_key: "tableContainer",
        ref: s,
        id: `carousel-table_${S.value}`,
        style: d({
          height: C(Z) || C(_) ? "auto" : `${Math.max(me.value, fe.value)}px`,
          containerType: "inline-size",
          position: "relative",
          overflow: "auto",
          fontFamily: e.value.fontFamily
        }),
        class: Ae({ "vue-ui-responsive": R.value, "is-playing": !b.value }),
        onMouseenter: n[0] || (n[0] = (a) => Ce()),
        onMouseleave: n[1] || (n[1] = (a) => y()),
        onTouchstart: n[2] || (n[2] = (a) => $e()),
        onTouchend: n[3] || (n[3] = (a) => le()),
        onTouchcancel: n[4] || (n[4] = (a) => le())
      }, [
        $.value ? (u(), r("table", {
          key: 0,
          class: "vue-data-ui-carousel-table",
          style: d({
            ...e.value.style,
            border: `${e.value.border.size}px solid ${e.value.border.color}`,
            width: "100%",
            borderCollapse: "collapse"
          })
        }, [
          E("caption", {
            ref_key: "caption",
            ref: T,
            class: "vue-data-ui-carousel-table-caption",
            style: d({
              ...e.value.caption.style,
              fontFamily: "inherit",
              position: "sticky",
              top: 0,
              zIndex: 2,
              paddingTop: e.value.caption.padding.top + "px",
              paddingRight: e.value.caption.padding.right + "px",
              paddingBottom: e.value.caption.padding.bottom + "px",
              paddingLeft: e.value.caption.padding.left + "px",
              boxShadow: R.value ? e.value.thead.tr.style.boxShadow : "none",
              minHeight: "36px"
            })
          }, [
            G(M(e.value.caption.text && !t.$slots.caption ? e.value.caption.text : "") + " ", 1),
            p(t.$slots, "caption", {}, void 0, !0)
          ], 4),
          E("thead", {
            style: d({ ...e.value.thead.style, position: "sticky", top: `${x.value}px`, zIndex: 1 })
          }, [
            E("tr", {
              ref_key: "tableRow",
              ref: A,
              role: "row",
              style: d({
                ...e.value.thead.tr.style,
                border: e.value.thead.tr.border.size ? `${e.value.thead.tr.border.size}px solid ${e.value.thead.tr.border.color}` : "none",
                boxShadow: R.value ? "none" : e.value.thead.tr.style.boxShadow
              }),
              height: `${e.value.thead.tr.height}px`
            }, [
              (u(!0), r(q, null, D(g.dataset.head, (a, i) => (u(), r("th", {
                role: "cell",
                key: `th_${i}`,
                style: d({
                  ...e.value.thead.tr.th.style,
                  border: e.value.thead.tr.th.border.size ? `${e.value.thead.tr.th.border.size}px solid ${e.value.thead.tr.th.border.color}` : "none",
                  paddingTop: e.value.thead.tr.th.padding.top + "px",
                  paddingRight: e.value.thead.tr.th.padding.right + "px",
                  paddingBottom: e.value.thead.tr.th.padding.bottom + "px",
                  paddingLeft: e.value.thead.tr.th.padding.left + "px"
                })
              }, [
                G(M(t.$slots.th ? "" : a) + " ", 1),
                p(t.$slots, "th", X(j({ th: a, colIndex: i })), void 0, !0)
              ], 4))), 128))
            ], 12, Se)
          ], 4),
          g.dataset.body && g.dataset.head ? (u(), r("tbody", {
            key: 0,
            ref_key: "tbody",
            ref: k,
            style: d({
              clipPath: "inset(0,0,0,0)"
            })
          }, [
            (u(!0), r(q, null, D(g.dataset.body, (a, i) => (u(), r("tr", {
              style: d({
                ...e.value.tbody.tr.style,
                border: `${e.value.tbody.tr.border.size}px solid ${e.value.tbody.tr.border.color}`,
                verticalAlign: "middle"
              })
            }, [
              (u(!0), r(q, null, D(a, (c, U) => (u(), r("td", {
                role: "cell",
                "data-cell": g.dataset.head[U] || "",
                style: d({
                  ...e.value.tbody.tr.td.style,
                  border: `${e.value.tbody.tr.td.border.size}px solid ${e.value.tbody.tr.td.border.color}`,
                  backgroundColor: C(Ie)(e.value.tbody.tr.td.style.backgroundColor, i % 2 === 0 && e.value.tbody.tr.td.alternateColor ? e.value.tbody.tr.td.alternateOpacity * 100 : 100),
                  paddingTop: e.value.tbody.tr.td.padding.top + "px",
                  paddingRight: e.value.tbody.tr.td.padding.right + "px",
                  paddingBottom: e.value.tbody.tr.td.padding.bottom + "px",
                  paddingLeft: e.value.tbody.tr.td.padding.left + "px",
                  verticalAlign: "middle"
                }),
                height: `${e.value.tbody.tr.height}px`
              }, [
                G(M(t.$slots.td ? "" : c) + " ", 1),
                p(t.$slots, "td", X(j({ td: c, rowIndex: i, colIndex: U })), void 0, !0)
              ], 12, He))), 256))
            ], 4))), 256))
          ], 4)) : N("", !0)
        ], 4)) : N("", !0)
      ], 46, Ne),
      $.value ? N("", !0) : (u(), ve(ze, {
        key: 0,
        config: {
          type: "table"
        }
      })),
      e.value.userOptions.show && $.value ? (u(), ve(Re, {
        ref: "details",
        key: `user_option_${ae.value}`,
        backgroundColor: e.value.style.backgroundColor,
        color: e.value.style.color,
        isPrinting: C(Z),
        isImaging: C(_),
        uid: S.value,
        hasTooltip: !1,
        hasPdf: e.value.userOptions.buttons.pdf,
        hasImg: e.value.userOptions.buttons.img,
        hasXls: e.value.userOptions.buttons.csv,
        hasTable: !1,
        hasLabel: !1,
        hasAnimation: e.value.userOptions.buttons.animation,
        isAnimation: !v.value.showAnimation,
        hasFullscreen: e.value.userOptions.buttons.fullscreen,
        isFullscreen: Q.value,
        chartElement: te.value,
        position: e.value.userOptions.position,
        titles: { ...e.value.userOptions.buttonTitles },
        zIndex: 3,
        onGeneratePdf: ie,
        onGenerateCsv: ue,
        onGenerateImage: C(ee),
        onToggleAnimation: se,
        onToggleFullscreen: be
      }, xe({ _: 2 }, [
        t.$slots.optionPdf ? {
          name: "optionPdf",
          fn: O(() => [
            p(t.$slots, "optionPdf", {}, void 0, !0)
          ]),
          key: "0"
        } : void 0,
        t.$slots.optionCsv ? {
          name: "optionCsv",
          fn: O(() => [
            p(t.$slots, "optionCsv", {}, void 0, !0)
          ]),
          key: "1"
        } : void 0,
        t.$slots.optionImg ? {
          name: "optionImg",
          fn: O(() => [
            p(t.$slots, "optionImg", {}, void 0, !0)
          ]),
          key: "2"
        } : void 0,
        t.$slots.optionAnimation ? {
          name: "optionAnimation",
          fn: O(() => [
            p(t.$slots, "optionAnimation", {}, void 0, !0)
          ]),
          key: "3"
        } : void 0,
        t.$slots.optionFullscreen ? {
          name: "optionFullscreen",
          fn: O(({ toggleFullscreen: a, isFullscreen: i }) => [
            p(t.$slots, "optionFullscreen", X(j({ toggleFullscreen: a, isFullscreen: i })), void 0, !0)
          ]),
          key: "4"
        } : void 0
      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasXls", "hasAnimation", "isAnimation", "hasFullscreen", "isFullscreen", "chartElement", "position", "titles", "onGenerateImage"])) : N("", !0)
    ], 512));
  }
}, Xe = /* @__PURE__ */ Ee(Le, [["__scopeId", "data-v-4fc9acb5"]]);
export {
  Xe as default
};
