import { ref as n, useSlots as Fe, onMounted as A, computed as P, 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 R, normalizeClass as Be, normalizeStyle as f, createTextVNode as L, renderSlot as p, toDisplayString as G, Fragment as D, renderList as X, mergeProps as fe, createSlots as Pe, withCtx as w, normalizeProps as he, guardReactiveProps as me } 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-BI6O7K58.js";
import { u as Ne } from "./useNestedProp-Cvz4MkSy.js";
import { u as Ue, U as Ve } from "./usePrinter-Jr3eyr8H.js";
import Me from "./vue-ui-skeleton-Dxm7rqic.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: ge }) {
    const { vue_ui_carousel_table: be } = Re(), i = T, N = n(ze()), K = n(!1), O = n(!!i.dataset), ye = Fe();
    A(() => {
      Q();
    }), A(() => {
      ye["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"
      }), O.value = !1), (!i.dataset.body || j(i.dataset.body)) && (J({
        componentName: "VueUiCarouselTable",
        type: "datasetAttribute",
        property: "body"
      }), O.value = !1));
    }
    const e = P({
      get: () => Z(),
      set: (t) => t
    }), { userOptionsVisible: U, setUserOptionsVisibility: W, keepUserOptionState: Y } = qe({ config: e.value });
    function Z() {
      return Ne({
        userConfig: i.config,
        defaultConfig: be
      });
    }
    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: Ce, generateImage: te } = Ue({
      elementId: `carousel-table_${N.value}`,
      fileName: e.value.caption.text || "vue-ui-carousel-table",
      options: e.value.userOptions.print
    }), h = n({
      showAnimation: e.value.animation.use
    }), l = n(null), ae = n(null), x = n(null), I = n(null), F = n(0), z = n(0), S = n(!1), B = n(null), b = n(null), k = n(0);
    function V() {
      B.value && (b.value = {
        elements: B.value.getElementsByTagName("tr"),
        heights: Array.from(B.value.getElementsByTagName("tr")).map((t) => t.getBoundingClientRect().height)
      });
    }
    A(V);
    const $e = P(() => !b.value || !b.value.heights.length ? 0 : Math.max(...b.value.heights) + F.value + z.value), Te = P(() => i.dataset.body ? e.value.tbody.tr.visible <= i.dataset.body.length ? e.value.tbody.tr.visible : i.dataset.body.length : 0), ke = P(() => (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) * Te.value + F.value + z.value), c = n(0), y = n(null), d = n(0), C = n(!1), oe = n(0);
    A(() => {
      x.value && (F.value = x.value.getBoundingClientRect().height), I.value && (z.value = I.value.getBoundingClientRect().height), h.value.showAnimation && b.value && ne();
    }), A(() => {
      if (l.value) {
        let a = function() {
          const s = t.getBoundingClientRect().bottom;
          o.forEach((g) => {
            g.getBoundingClientRect().top < s ? g.style.visibility = "hidden" : g.style.visibility = "visible";
          });
        };
        const t = l.value.querySelector("thead"), o = Array.from(B.value.querySelectorAll("tr"));
        l.value.addEventListener("scroll", a), a(), ve(() => {
          l.value.removeEventListener("scroll", a);
        });
      }
    });
    function Ae(t) {
      K.value = t, oe.value += 1;
    }
    function ne() {
      !y.value && !C.value && (e.value.animation.type === "scroll" ? y.value = requestAnimationFrame(le) : y.value = requestAnimationFrame(ie));
    }
    function we() {
      if (!l.value) return !1;
      const { scrollTop: t, scrollHeight: o, clientHeight: a } = l.value;
      return t + a >= o;
    }
    function le(t) {
      if (C.value) return;
      d.value || (d.value = t), t - d.value >= e.value.animation.speedMs && (c.value += b.value.heights[k.value], (we() || 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 = t), y.value = requestAnimationFrame(le);
    }
    function ie(t) {
      if (C.value) return;
      d.value || (d.value = t);
      const o = t - d.value, a = e.value.animation.speedMs / 4 / 1e3;
      o >= a && (c.value += a, c.value >= l.value.scrollHeight - l.value.clientHeight && (c.value = 0), l.value && l.value.scrollTo({
        top: c.value,
        behavior: "auto"
      }), d.value = t), y.value = requestAnimationFrame(ie);
    }
    function m() {
      C.value = !0, cancelAnimationFrame(y.value), y.value = null;
    }
    ve(m);
    function $() {
      !C.value || !h.value.showAnimation || (C.value = !1, d.value = 0, ne());
    }
    function Oe() {
      e.value.animation.pauseOnHover && m();
    }
    const M = n(null);
    function xe() {
      m(), 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, m());
      }
    ), E(
      () => e.value.animation.type,
      (t) => {
        m(), c.value = 0, k.value = 0, l.value.scrollTo({
          top: 0,
          behavior: "auto"
        }), $();
      }
    );
    const Ie = P(() => e.value.responsiveBreakpoint);
    A(() => {
      const t = new ResizeObserver((o) => {
        o.forEach((a) => {
          S.value = a.contentRect.width < Ie.value;
        }), F.value = x.value ? x.value.getBoundingClientRect().height : 0, z.value = I.value ? I.value.getBoundingClientRect().height : 0, k.value = 0, pe(() => {
          m(), d.value = 0, c.value = 0, V(), $();
        });
      });
      l.value && t.observe(l.value);
    });
    function ue() {
      Ce();
    }
    function re() {
      h.value.showAnimation = !h.value.showAnimation, h.value.showAnimation ? $() : m();
    }
    function de() {
      pe(() => {
        const t = i.dataset.head.map((s, g) => [
          [i.dataset.body[g]]
        ]), o = [
          [e.value.caption.text],
          [i.dataset.head.map((s) => [s])]
        ].concat(t), a = Ee(o);
        He({
          csvContent: a,
          title: e.value.caption.text || "vue-ui-carousel-table"
        });
      });
    }
    return ge({
      pauseAnimation: m,
      resumeAnimation: $,
      toggleAnimation: re,
      generateCsv: de,
      generatePdf: ue,
      generateImage: te
    }), (t, o) => (u(), v("div", {
      class: "vue-ui-carousel-table",
      style: { position: "relative", overflow: "visible" },
      ref_key: "chartContainer",
      ref: ae,
      onMouseenter: o[5] || (o[5] = () => r(W)(!0)),
      onMouseleave: o[6] || (o[6] = () => r(W)(!1))
    }, [
      H("div", {
        ref_key: "tableContainer",
        ref: l,
        id: `carousel-table_${N.value}`,
        style: f({
          height: r(_) || r(ee) ? "auto" : `${Math.max(ke.value, $e.value)}px`,
          containerType: "inline-size",
          position: "relative",
          overflow: "auto",
          fontFamily: e.value.fontFamily
        }),
        class: Be({ "vue-ui-responsive": S.value, "is-playing": e.value.scrollbar.hide || !C.value && e.value.scrollbar.showOnlyOnHover }),
        onMouseover: o[0] || (o[0] = (a) => Oe()),
        onMouseleave: o[1] || (o[1] = (a) => $()),
        onTouchstart: o[2] || (o[2] = (a) => xe()),
        onTouchend: o[3] || (o[3] = (a) => se()),
        onTouchcancel: o[4] || (o[4] = (a) => se())
      }, [
        O.value ? (u(), v("table", {
          key: 0,
          class: "vue-data-ui-carousel-table",
          style: f({
            ...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: f({
              ...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),
            p(t.$slots, "caption", {}, void 0, !0)
          ], 4),
          H("thead", {
            style: f({ ...e.value.thead.style, position: "sticky", top: `${t.$slots.caption || e.value.caption.text || e.value.userOptions.show ? F.value : 0}px`, zIndex: 1 })
          }, [
            H("tr", {
              ref_key: "tableRow",
              ref: I,
              role: "row",
              style: f({
                ...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, (a, s) => (u(), v("th", {
                role: "cell",
                key: `th_${s}`,
                style: f({
                  ...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 ? "" : a) + " ", 1),
                p(t.$slots, "th", fe({ ref_for: !0 }, { th: a, 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: B,
            style: {
              clipPath: "inset(0,0,0,0)"
            }
          }, [
            (u(!0), v(D, null, X(T.dataset.body, (a, s) => (u(), v("tr", {
              style: f({
                ...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(a, (g, q) => (u(), v("td", {
                role: "cell",
                "data-cell": T.dataset.head[q] || "",
                style: f({
                  ...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 ? "" : g) + " ", 1),
                p(t.$slots, "td", fe({ ref_for: !0 }, { td: g, rowIndex: s, colIndex: q }), void 0, !0)
              ], 12, Xe))), 256))
            ], 4))), 256))
          ], 512)) : R("", !0)
        ], 4)) : R("", !0)
      ], 46, Ge),
      O.value ? R("", !0) : (u(), ce(Me, {
        key: 0,
        config: {
          type: "table"
        }
      })),
      e.value.userOptions.show && O.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: Ae,
        style: f({
          visibility: r(Y) ? r(U) ? "visible" : "hidden" : "visible"
        })
      }, Pe({ _: 2 }, [
        t.$slots.menuIcon ? {
          name: "menuIcon",
          fn: w(({ isOpen: a, color: s }) => [
            p(t.$slots, "menuIcon", he(me({ isOpen: a, color: s })), void 0, !0)
          ]),
          key: "0"
        } : void 0,
        t.$slots.optionPdf ? {
          name: "optionPdf",
          fn: w(() => [
            p(t.$slots, "optionPdf", {}, void 0, !0)
          ]),
          key: "1"
        } : void 0,
        t.$slots.optionCsv ? {
          name: "optionCsv",
          fn: w(() => [
            p(t.$slots, "optionCsv", {}, void 0, !0)
          ]),
          key: "2"
        } : void 0,
        t.$slots.optionImg ? {
          name: "optionImg",
          fn: w(() => [
            p(t.$slots, "optionImg", {}, void 0, !0)
          ]),
          key: "3"
        } : void 0,
        t.$slots.optionAnimation ? {
          name: "optionAnimation",
          fn: w(() => [
            p(t.$slots, "optionAnimation", {}, void 0, !0)
          ]),
          key: "4"
        } : void 0,
        t.$slots.optionFullscreen ? {
          name: "optionFullscreen",
          fn: w(({ toggleFullscreen: a, isFullscreen: s }) => [
            p(t.$slots, "optionFullscreen", he(me({ toggleFullscreen: a, isFullscreen: s })), void 0, !0)
          ]),
          key: "5"
        } : void 0
      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasXls", "hasAnimation", "isAnimation", "hasFullscreen", "isFullscreen", "chartElement", "position", "titles", "onGenerateImage", "style"])) : R("", !0),
      t.$slots.source ? (u(), v("div", je, [
        p(t.$slots, "source", {}, void 0, !0)
      ], 512)) : R("", !0)
    ], 544));
  }
}, tt = /* @__PURE__ */ Le(Je, [["__scopeId", "data-v-751c3b08"]]);
export {
  tt as default
};
