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