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