import { ref as o, onMounted as O, computed as F, watch as V, onBeforeUnmount as re, nextTick as de, openBlock as s, createElementBlock as r, createElementVNode as N, normalizeStyle as d, unref as C, normalizeClass as Ae, createTextVNode as G, toDisplayString as M, renderSlot as v, Fragment as q, renderList as D, normalizeProps as X, guardReactiveProps as j, createCommentVNode as B, createBlock as ve, createSlots as ke, withCtx as P } from "vue";
import { u as we, c as xe, o as J, e as K, s as Ie, q as Oe, r as Fe } from "./index-Cm2_6s9o.js";
import { u as Be } from "./useNestedProp-BYPZJNhi.js";
import { u as Pe, U as Re } from "./usePrinter-Cx8U1e30.js";
import ze from "./vue-ui-skeleton-BUS6A44x.js";
import { _ as Ee } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Ne = ["id"], Se = ["height"], He = ["data-cell", "height"], Le = {
  key: 2,
  ref: "source",
  dir: "auto"
}, Ue = {
  __name: "vue-ui-carousel-table",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  setup(g, { expose: pe }) {
    const l = g, { vue_ui_carousel_table: ce } = we(), S = o(xe()), Q = o(!1), $ = o(!!l.dataset);
    O(() => {
      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 = F({
      get: () => Y(),
      set: (t) => t
    });
    function Y() {
      return Be({
        userConfig: l.config,
        defaultConfig: ce
      });
    }
    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"
    }), p = o({
      showAnimation: e.value.animation.use
    }), u = o(null), te = o(null), T = o(null), A = o(null), k = o(0), R = o(0), z = o(!1), w = o(null), h = o(null), x = o(0);
    function H() {
      w.value && (h.value = {
        elements: w.value.getElementsByTagName("tr"),
        heights: Array.from(w.value.getElementsByTagName("tr")).map((t) => t.getBoundingClientRect().height)
      });
    }
    O(H);
    const fe = F(() => !h.value || !h.value.heights.length ? 0 : Math.max(...h.value.heights) + k.value + R.value), ge = F(() => l.dataset.body ? e.value.tbody.tr.visible <= l.dataset.body.length ? e.value.tbody.tr.visible : l.dataset.body.length : 0), me = F(() => (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 + k.value + R.value), E = o(0), I = o(null), m = o(0), b = o(!1), ae = o(0);
    O(() => {
      T.value && (k.value = T.value.getBoundingClientRect().height), A.value && (R.value = A.value.getBoundingClientRect().height), p.value.showAnimation && h.value && oe();
    }), O(() => {
      if (u.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 = u.value.querySelector("thead"), n = Array.from(w.value.querySelectorAll("tr"));
        u.value.addEventListener("scroll", a), a(), re(() => {
          u.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 (!u.value) return !1;
      const { scrollTop: t, scrollHeight: n, clientHeight: a } = u.value;
      return t + a >= n;
    }
    function ne(t) {
      if (b.value) return;
      m.value || (m.value = t), t - m.value >= e.value.animation.speedMs && (E.value += h.value.heights[x.value], (ye() || x.value >= h.value.heights.length) && (E.value = 0, x.value = -1), x.value += 1, u.value && u.value.scrollTo({
        top: E.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 || !p.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 ? (p.value.showAnimation = !0, y()) : (p.value.showAnimation = !1, f());
      }
    );
    const Te = F(() => e.value.responsiveBreakpoint);
    O(() => {
      const t = new ResizeObserver((n) => {
        n.forEach((a) => {
          z.value = a.contentRect.width < Te.value;
        }), k.value = T.value ? T.value.getBoundingClientRect().height : 0, R.value = A.value ? A.value.getBoundingClientRect().height : 0, x.value = 0, de(() => {
          f(), m.value = 0, E.value = 0, H(), y();
        });
      });
      u.value && t.observe(u.value);
    });
    function ie() {
      he();
    }
    function se() {
      p.value.showAnimation = !p.value.showAnimation, p.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 = Oe(n);
        Fe({
          csvContent: a,
          title: e.value.caption.text || "vue-ui-carousel-table"
        });
      });
    }
    return pe({
      pauseAnimation: f,
      resumeAnimation: y,
      toggleAnimation: se,
      generateCsv: ue,
      generatePdf: ie,
      generateImage: ee
    }), (t, n) => (s(), r("div", {
      style: { position: "relative", overflow: "visible" },
      ref_key: "chartContainer",
      ref: te
    }, [
      N("div", {
        ref_key: "tableContainer",
        ref: u,
        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": z.value, "is-playing": e.value.scrollbar.hide || !b.value && e.value.scrollbar.showOnlyOnHover }),
        onMouseover: 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 ? (s(), 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",
            backgroundColor: e.value.tbody.backgroundColor
          })
        }, [
          N("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: z.value ? e.value.thead.tr.style.boxShadow : "none",
              minHeight: "36px",
              display: t.$slots.caption || e.value.caption.text || e.value.userOptions.show ? "" : "none"
            })
          }, [
            G(M(e.value.caption.text && !t.$slots.caption ? e.value.caption.text : "") + " ", 1),
            v(t.$slots, "caption", {}, void 0, !0)
          ], 4),
          N("thead", {
            style: d({ ...e.value.thead.style, position: "sticky", top: `${t.$slots.caption || e.value.caption.text || e.value.userOptions.show ? k.value : 0}px`, zIndex: 1 })
          }, [
            N("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: z.value ? "none" : e.value.thead.tr.style.boxShadow
              }),
              height: `${e.value.thead.tr.height}px`
            }, [
              (s(!0), r(q, null, D(g.dataset.head, (a, i) => (s(), 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),
                v(t.$slots, "th", X(j({ th: a, colIndex: i })), void 0, !0)
              ], 4))), 128))
            ], 12, Se)
          ], 4),
          g.dataset.body && g.dataset.head ? (s(), r("tbody", {
            key: 0,
            ref_key: "tbody",
            ref: w,
            style: d({
              clipPath: "inset(0,0,0,0)"
            })
          }, [
            (s(!0), r(q, null, D(g.dataset.body, (a, i) => (s(), 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"
              })
            }, [
              (s(!0), r(q, null, D(a, (c, U) => (s(), 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),
                v(t.$slots, "td", X(j({ td: c, rowIndex: i, colIndex: U })), void 0, !0)
              ], 12, He))), 256))
            ], 4))), 256))
          ], 4)) : B("", !0)
        ], 4)) : B("", !0)
      ], 46, Ne),
      $.value ? B("", !0) : (s(), ve(ze, {
        key: 0,
        config: {
          type: "table"
        }
      })),
      e.value.userOptions.show && $.value ? (s(), 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: !p.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,
        offsetX: 12,
        onGeneratePdf: ie,
        onGenerateCsv: ue,
        onGenerateImage: C(ee),
        onToggleAnimation: se,
        onToggleFullscreen: be
      }, ke({ _: 2 }, [
        t.$slots.optionPdf ? {
          name: "optionPdf",
          fn: P(() => [
            v(t.$slots, "optionPdf", {}, void 0, !0)
          ]),
          key: "0"
        } : void 0,
        t.$slots.optionCsv ? {
          name: "optionCsv",
          fn: P(() => [
            v(t.$slots, "optionCsv", {}, void 0, !0)
          ]),
          key: "1"
        } : void 0,
        t.$slots.optionImg ? {
          name: "optionImg",
          fn: P(() => [
            v(t.$slots, "optionImg", {}, void 0, !0)
          ]),
          key: "2"
        } : void 0,
        t.$slots.optionAnimation ? {
          name: "optionAnimation",
          fn: P(() => [
            v(t.$slots, "optionAnimation", {}, void 0, !0)
          ]),
          key: "3"
        } : void 0,
        t.$slots.optionFullscreen ? {
          name: "optionFullscreen",
          fn: P(({ toggleFullscreen: a, isFullscreen: i }) => [
            v(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"])) : B("", !0),
      t.$slots.source ? (s(), r("div", Le, [
        v(t.$slots, "source", {}, void 0, !0)
      ], 512)) : B("", !0)
    ], 512));
  }
}, je = /* @__PURE__ */ Ee(Ue, [["__scopeId", "data-v-205ef564"]]);
export {
  je as default
};
