import { ref as o, onMounted as F, computed as B, onBeforeUnmount as ie, watch as ye, openBlock as u, createElementBlock as r, createElementVNode as z, normalizeStyle as d, unref as b, normalizeClass as Ce, createTextVNode as U, toDisplayString as V, renderSlot as p, Fragment as G, renderList as M, normalizeProps as q, guardReactiveProps as D, createCommentVNode as E, createBlock as se, createSlots as $e, withCtx as O, nextTick as Te } from "vue";
import { u as Ae, c as xe, o as X, e as j, w as ke, q as we, r as Ie } from "./index-CguVaFlt.js";
import { u as Fe } from "./useNestedProp-BbEbJmgv.js";
import { u as Be, U as Oe } from "./usePrinter-ClsMRVJG.js";
import Pe from "./vue-ui-skeleton-ChHLL5Hw.js";
import { _ as Re } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ze = ["id"], Ee = ["height"], Ne = ["data-cell", "height"], Se = {
  __name: "vue-ui-carousel-table",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  setup(f, { expose: ue }) {
    const l = f, { vue_ui_carousel_table: re } = Ae(), N = o(xe()), J = o(!1), y = o(!!l.dataset);
    F(() => {
      X(l.dataset) ? j({
        componentName: "VueUiCarouselTable",
        type: "dataset"
      }) : ((!l.dataset.head || X(l.dataset.head)) && (j({
        componentName: "VueUiCarouselTable",
        type: "datasetAttribute",
        property: "head"
      }), y.value = !1), (!l.dataset.body || X(l.dataset.body)) && (j({
        componentName: "VueUiCarouselTable",
        type: "datasetAttribute",
        property: "body"
      }), y.value = !1));
    });
    const e = B(() => Fe({
      userConfig: l.config,
      defaultConfig: re
    })), { isPrinting: K, isImaging: Q, generatePdf: de, generateImage: W } = Be({
      elementId: `carousel-table_${N.value}`,
      fileName: e.value.caption.text || "vue-ui-carousel-table"
    }), v = o({
      showAnimation: e.value.animation.use
    }), s = o(null), Y = o(null), C = o(null), $ = o(null), T = o(0), P = o(0), R = o(!1), A = o(null), h = o(null), x = o(0);
    function Z() {
      A.value && (h.value = {
        elements: A.value.getElementsByTagName("tr"),
        heights: Array.from(A.value.getElementsByTagName("tr")).map((t) => t.getBoundingClientRect().height)
      });
    }
    F(Z);
    const ve = B(() => !h.value || !h.value.heights.length ? 0 : Math.max(...h.value.heights) + T.value + P.value), ce = B(() => l.dataset.body ? e.value.tbody.tr.visible <= l.dataset.body.length ? e.value.tbody.tr.visible : l.dataset.body.length : 0), pe = 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) * ce.value + T.value + P.value), S = o(0), k = o(null), w = o(0), g = o(!1), _ = o(0);
    F(() => {
      C.value && (T.value = C.value.getBoundingClientRect().height), $.value && (P.value = $.value.getBoundingClientRect().height), v.value.showAnimation && h.value && ee();
    }), 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(A.value.querySelectorAll("tr"));
        s.value.addEventListener("scroll", a), a(), ie(() => {
          s.value.removeEventListener("scroll", a);
        });
      }
    });
    function he(t) {
      J.value = t, _.value += 1;
    }
    function ee() {
      !k.value && !g.value && (k.value = requestAnimationFrame(te));
    }
    function fe() {
      if (!s.value) return !1;
      const { scrollTop: t, scrollHeight: n, clientHeight: a } = s.value;
      return t + a >= n;
    }
    function te(t) {
      if (g.value) return;
      w.value || (w.value = t), t - w.value >= e.value.animation.speedMs && (S.value += h.value.heights[x.value], (fe() || x.value >= h.value.heights.length) && (S.value = 0, x.value = -1), x.value += 1, s.value && s.value.scrollTo({
        top: S.value,
        behavior: "smooth"
      }), w.value = t), k.value = requestAnimationFrame(te);
    }
    function m() {
      g.value = !0, cancelAnimationFrame(k.value), k.value = null;
    }
    ie(m);
    function I() {
      !g.value || !v.value.showAnimation || (g.value = !1, w.value = 0, ee());
    }
    function ge() {
      e.value.animation.pauseOnHover && m();
    }
    const H = o(null);
    function me() {
      m(), clearTimeout(H.value);
    }
    function ae() {
      clearTimeout(H.value), H.value = setTimeout(I, 1e3);
    }
    ye(
      () => e.value.animation.use,
      (t) => {
        t ? (v.value.showAnimation = !0, I()) : (v.value.showAnimation = !1, m());
      }
    );
    const be = B(() => e.value.responsiveBreakpoint);
    F(() => {
      const t = new ResizeObserver((n) => {
        n.forEach((a) => {
          R.value = a.contentRect.width < be.value;
        }), T.value = C.value ? C.value.getBoundingClientRect().height : 0, P.value = $.value ? $.value.getBoundingClientRect().height : 0, x.value = 0, Z();
      });
      s.value && t.observe(s.value);
    });
    function oe() {
      de();
    }
    function ne() {
      v.value.showAnimation = !v.value.showAnimation, v.value.showAnimation ? I() : m();
    }
    function le() {
      Te(() => {
        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 = we(n);
        Ie({
          csvContent: a,
          title: e.value.caption.text || "vue-ui-carousel-table"
        });
      });
    }
    return ue({
      pauseAnimation: m,
      resumeAnimation: I,
      toggleAnimation: ne,
      generateCsv: le,
      generatePdf: oe,
      generateImage: W
    }), (t, n) => (u(), r("div", {
      style: { position: "relative", overflow: "visible" },
      ref_key: "chartContainer",
      ref: Y
    }, [
      z("div", {
        ref_key: "tableContainer",
        ref: s,
        id: `carousel-table_${N.value}`,
        style: d({
          height: b(K) || b(Q) ? "auto" : `${Math.max(pe.value, ve.value)}px`,
          containerType: "inline-size",
          position: "relative",
          overflow: "auto",
          fontFamily: e.value.fontFamily
        }),
        class: Ce({ "vue-ui-responsive": R.value, "is-playing": !g.value }),
        onMouseenter: n[0] || (n[0] = (a) => ge()),
        onMouseleave: n[1] || (n[1] = (a) => I()),
        onTouchstart: n[2] || (n[2] = (a) => me()),
        onTouchend: n[3] || (n[3] = (a) => ae()),
        onTouchcancel: n[4] || (n[4] = (a) => ae())
      }, [
        y.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"
          })
        }, [
          z("caption", {
            ref_key: "caption",
            ref: C,
            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"
            })
          }, [
            U(V(e.value.caption.text && !t.$slots.caption ? e.value.caption.text : "") + " ", 1),
            p(t.$slots, "caption", {}, void 0, !0)
          ], 4),
          z("thead", {
            style: d({ ...e.value.thead.style, position: "sticky", top: `${T.value}px`, zIndex: 1 })
          }, [
            z("tr", {
              ref_key: "tableRow",
              ref: $,
              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(G, null, M(f.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"
                })
              }, [
                U(V(t.$slots.th ? "" : a) + " ", 1),
                p(t.$slots, "th", q(D({ th: a, colIndex: i })), void 0, !0)
              ], 4))), 128))
            ], 12, Ee)
          ], 4),
          f.dataset.body && f.dataset.head ? (u(), r("tbody", {
            key: 0,
            ref_key: "tbody",
            ref: A,
            style: d({
              clipPath: "inset(0,0,0,0)"
            })
          }, [
            (u(!0), r(G, null, M(f.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(G, null, M(a, (c, L) => (u(), r("td", {
                role: "cell",
                "data-cell": f.dataset.head[L] || "",
                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: e.value.tbody.tr.td.style.backgroundColor + b(ke)[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`
              }, [
                U(V(t.$slots.td ? "" : c) + " ", 1),
                p(t.$slots, "td", q(D({ td: c, rowIndex: i, colIndex: L })), void 0, !0)
              ], 12, Ne))), 256))
            ], 4))), 256))
          ], 4)) : E("", !0)
        ], 4)) : E("", !0)
      ], 46, ze),
      y.value ? E("", !0) : (u(), se(Pe, {
        key: 0,
        config: {
          type: "table"
        }
      })),
      e.value.userOptions.show && y.value ? (u(), se(Oe, {
        ref: "details",
        key: `user_option_${_.value}`,
        backgroundColor: e.value.style.backgroundColor,
        color: e.value.style.color,
        isPrinting: b(K),
        isImaging: b(Q),
        uid: N.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: J.value,
        chartElement: Y.value,
        titles: { ...e.value.userOptions.buttonTitles },
        zIndex: 3,
        noOffset: "",
        onGeneratePdf: oe,
        onGenerateCsv: le,
        onGenerateImage: b(W),
        onToggleAnimation: ne,
        onToggleFullscreen: he
      }, $e({ _: 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", q(D({ 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", "titles", "onGenerateImage"])) : E("", !0)
    ], 512));
  }
}, qe = /* @__PURE__ */ Re(Se, [["__scopeId", "data-v-f722c10b"]]);
export {
  qe as default
};
