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