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