vueye-table 2.0.0-alpha.3 → 2.0.0-alpha.4

package/dist/vueye-table.js

@@ -1,174 +1,171 @@
-import { getCurrentScope as W, onScopeDispose as x, unref as p, watch as z, defineComponent as S, ref as E, computed as P, watchEffect as F, openBlock as f, createElementBlock as g, createElementVNode as u, toDisplayString as b, Fragment as w, renderList as $, normalizeClass as O, createCommentVNode as U, createVNode as A, pushScopeId as q, popScopeId as G, renderSlot as k, createTextVNode as T, toRef as J, useSlots as Q, createSlots as X, withCtx as Y, normalizeProps as Z, guardReactiveProps as ee } from "vue";
-function te(n) {
-  return W() ? (x(n), !0) : !1;
-}
-function H(n) {
-  return typeof n == "function" ? n() : p(n);
-}
-const M = typeof window < "u" && typeof document < "u", ne = Object.prototype.toString, ae = (n) => ne.call(n) === "[object Object]", B = () => {
-}, oe = /* @__PURE__ */ se();
-function se() {
-  var n;
-  return M && ((n = window == null ? void 0 : window.navigator) == null ? void 0 : n.userAgent) && /* @__PURE__ */ /iP(ad|hone|od)/.test(window.navigator.userAgent);
-}
-function V(n) {
-  var a;
-  const e = H(n);
-  return (a = e == null ? void 0 : e.$el) != null ? a : e;
-}
-const D = M ? window : void 0;
-function I(...n) {
-  let a, e, t, r;
-  if (typeof n[0] == "string" || Array.isArray(n[0]) ? ([e, t, r] = n, a = D) : [a, e, t, r] = n, !a)
-    return B;
-  Array.isArray(e) || (e = [e]), Array.isArray(t) || (t = [t]);
-  const s = [], c = () => {
-    s.forEach((l) => l()), s.length = 0;
-  }, _ = (l, h, i, o) => (l.addEventListener(h, i, o), () => l.removeEventListener(h, i, o)), m = z(
-    () => [V(a), H(r)],
-    ([l, h]) => {
-      if (c(), !l)
-        return;
-      const i = ae(h) ? { ...h } : h;
-      s.push(
-        ...e.flatMap((o) => t.map((d) => _(l, o, d, i)))
-      );
-    },
-    { immediate: !0, flush: "post" }
-  ), y = () => {
-    m(), c();
-  };
-  return te(y), y;
-}
-let N = !1;
-function re(n, a, e = {}) {
-  const { window: t = D, ignore: r = [], capture: s = !0, detectIframe: c = !1 } = e;
-  if (!t)
-    return;
-  oe && !N && (N = !0, Array.from(t.document.body.children).forEach((i) => i.addEventListener("click", B)), t.document.documentElement.addEventListener("click", B));
-  let _ = !0;
-  const m = (i) => r.some((o) => {
-    if (typeof o == "string")
-      return Array.from(t.document.querySelectorAll(o)).some((d) => d === i.target || i.composedPath().includes(d));
-    {
-      const d = V(o);
-      return d && (i.target === d || i.composedPath().includes(d));
-    }
-  }), l = [
-    I(t, "click", (i) => {
-      const o = V(n);
-      if (!(!o || o === i.target || i.composedPath().includes(o))) {
-        if (i.detail === 0 && (_ = !m(i)), !_) {
-          _ = !0;
-          return;
-        }
-        a(i);
-      }
-    }, { passive: !0, capture: s }),
-    I(t, "pointerdown", (i) => {
-      const o = V(n);
-      o && (_ = !i.composedPath().includes(o) && !m(i));
-    }, { passive: !0 }),
-    c && I(t, "blur", (i) => {
-      setTimeout(() => {
-        var o;
-        const d = V(n);
-        ((o = t.document.activeElement) == null ? void 0 : o.tagName) === "IFRAME" && !(d != null && d.contains(t.document.activeElement)) && a(i);
-      }, 0);
-    })
-  ].filter(Boolean);
-  return () => l.forEach((i) => i());
-}
-const le = { class: "relative" }, ue = ["aria-expanded"], ie = /* @__PURE__ */ u("span", { class: "i-solar-alt-arrow-down-linear" }, null, -1), ce = {
+import { defineComponent as C, mergeDefaults as H, ref as S, computed as h, watchEffect as T, openBlock as i, createElementBlock as d, createElementVNode as r, unref as u, toDisplayString as f, createCommentVNode as B, Fragment as $, renderList as v, normalizeClass as k, renderSlot as m, createTextVNode as j, createVNode as O, toRef as U, useSlots as K, createSlots as M, withCtx as I, normalizeProps as L, guardReactiveProps as z } from "vue";
+const A = {
+  itemValue: "id",
+  columnHeaders: () => [],
+  data: () => [],
+  perPage: 10,
+  currentPage: 1,
+  perPageOptions: () => [5, 10, 20, 30],
+  loading: !1,
+  selectable: !1,
+  caption: "",
+  summary: ""
+}, F = {
+  options: () => [],
+  modelValue: "",
+  label: ""
+}, W = { class: "dropdown__wrapper" }, q = ["aria-expanded"], G = /* @__PURE__ */ r("span", { class: "i-solar-alt-arrow-down-linear" }, null, -1), J = {
   class: "py-1",
   role: "none"
-}, de = ["onClick"], pe = /* @__PURE__ */ S({
+}, Q = ["onClick"], X = /* @__PURE__ */ C({
   __name: "VueyeDropdown",
-  props: {
-    options: { default: () => [] },
-    modelValue: { default: "" },
-    label: { default: "" },
+  props: H({
+    options: {},
+    modelValue: {},
+    label: {},
     defaultValue: {}
-  },
+  }, F),
   emits: ["update:modelValue"],
-  setup(n, { emit: a }) {
-    const e = n, t = E(null);
-    re(t, () => {
-      r.value = !1;
-    });
-    const r = E(!1), s = E(-1), c = P(() => e.options[s.value] ?? e.defaultValue), _ = `dropdown-label-${Math.random().toString(36).substring(2, 9)}`;
-    function m() {
-      r.value = !r.value;
+  setup(s, { emit: t }) {
+    const e = s, n = S(!1), l = S(-1), a = h(() => e.options[l.value] ?? e.defaultValue), c = `dropdown-label-${Math.random().toString(36).substring(2, 9)}`;
+    function P() {
+      n.value = !n.value;
     }
-    function y(l) {
-      s.value = l, r.value = !1, a("update:modelValue", c.value.value);
+    function y(_) {
+      l.value = _, n.value = !1, t("update:modelValue", a.value.content);
     }
-    return F(() => {
-      const l = e.options.findIndex((h) => h.value === e.modelValue);
-      l !== -1 && (s.value = l);
-    }), (l, h) => (f(), g("div", le, [
-      u("button", {
+    return T(() => {
+      const _ = e.options.findIndex((p) => p.content === e.modelValue);
+      _ !== -1 && (l.value = _);
+    }), (_, p) => (i(), d("div", W, [
+      r("button", {
         type: "button",
-        class: "bg-slate-100 dark:bg-primary-900 border flex items-center space-x-2 rtl:space-x-reverse border-primary-300 dark:border-primary-900 rounded-md shadow-sm py-2 px-4 text-sm font-medium text-slate-700 dark:text-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",
-        onClick: m,
-        "aria-expanded": p(r),
+        class: "dropdown__trigger",
+        onClick: P,
+        "aria-expanded": u(n),
         "aria-haspopup": !0,
         ref: "buttonRef"
       }, [
-        u("span", null, b(p(c).label), 1),
-        ie
-      ], 8, ue),
-      p(r) ? (f(), g("div", {
+        r("span", null, f(u(a).label), 1),
+        G
+      ], 8, q),
+      u(n) ? (i(), d("div", {
         key: 0,
-        class: "origin-top-right bottom-full absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-slate-100 dark:bg-primary-950 ring-1 ring-black ring-opacity-5 focus:outline-none z-40",
+        class: "dropdown__overlay",
+        onClick: P
+      })) : B("", !0),
+      u(n) ? (i(), d("div", {
+        key: 1,
+        class: "dropdown__menu",
         role: "menu",
         "aria-orientation": "vertical",
-        "aria-labelledby": _,
-        ref_key: "target",
-        ref: t
+        "aria-labelledby": c
       }, [
-        u("div", ce, [
-          (f(!0), g(w, null, $(l.options, (i, o) => (f(), g("button", {
-            key: o,
-            class: O([{
-              "text-slate-700 bg-slate-200 dark:text-slate-300 dark:bg-primary-900 ": o === p(s),
-              "text-slate-700 dark:text-slate-50 hover:bg-slate-50": o !== p(s)
-            }, "block px-4 py-2 text-sm text-left w-full text-slate-700 dark:text-slate-50 hover:bg-slate-200 hover:text-slate-900 focus:outline-none focus:bg-slate-100 focus:text-slate-900 dark:hover:text-slate-300 dark:hover:bg-primary-900"]),
+        r("div", J, [
+          (i(!0), d($, null, v(_.options, (w, b) => (i(), d("button", {
+            key: b,
+            class: k([{
+              "dropdown__menu__item--selected ": b === u(l)
+            }, "dropdown__menu__item"]),
             role: "menuitem",
-            onClick: (d) => y(o)
-          }, b(i.label), 11, de))), 128))
+            onClick: (o) => y(b)
+          }, f(w.label), 11, Q))), 128))
         ])
-      ], 512)) : U("", !0)
+      ])) : B("", !0)
     ]));
   }
-}), v = (n) => (q("data-v-d06f6d12"), n = n(), G(), n), fe = { class: "pagination__wrapper" }, ge = { class: "pagination__details" }, _e = { class: "pagination__btn-list" }, he = ["disabled"], me = /* @__PURE__ */ v(() => /* @__PURE__ */ u("span", { class: "sr-only" }, "First page", -1)), be = /* @__PURE__ */ v(() => /* @__PURE__ */ u("span", {
+});
+const Y = { key: 0 }, Z = ["colspan"], x = /* @__PURE__ */ r("div", { class: "flex justify-center items-center" }, [
+  /* @__PURE__ */ r("div", { class: "loader animate-spin ease-linear rounded-full border-8 border-t-8 border-t-primary-300 dark:border-t-primary-800 dark:border-primary-600 border-primary-200 h-16 w-16" })
+], -1), ee = [
+  x
+], te = ["id"], ne = /* @__PURE__ */ C({
+  __name: "VueyeBody",
+  props: {
+    loading: { type: Boolean, default: !1 },
+    bodyRows: { default: () => [] },
+    itemValue: { default: "id" }
+  },
+  setup(s) {
+    const t = s, e = h(() => Object.keys(t.bodyRows[0]).length);
+    return (n, l) => (i(), d("tbody", null, [
+      n.loading ? (i(), d("tr", Y, [
+        r("td", { colspan: u(e) }, ee, 8, Z)
+      ])) : (i(!0), d($, { key: 1 }, v(n.bodyRows, (a) => (i(), d("tr", {
+        key: a[n.itemValue]
+      }, [
+        m(n.$slots, "default", { row: a }, () => [
+          (i(!0), d($, null, v(Object.keys(a), (c) => (i(), d("td", {
+            key: `${a[n.itemValue]}.${c}`,
+            id: `${a[n.itemValue]}.${c}`
+          }, [
+            m(n.$slots, "default", {
+              cell: a[c],
+              key: `${a[n.itemValue]}.${c}`
+            }, () => [
+              j(f(a[c]), 1)
+            ])
+          ], 8, te))), 128))
+        ])
+      ]))), 128))
+    ]));
+  }
+}), ae = ["colspan", "rowspan", "scope"], se = /* @__PURE__ */ C({
+  __name: "VueyeHead",
+  props: {
+    columnHeaders: { default: () => [] }
+  },
+  setup(s) {
+    return (t, e) => (i(), d("thead", null, [
+      (i(!0), d($, null, v(t.columnHeaders, (n, l) => (i(), d("tr", { key: l }, [
+        (i(!0), d($, null, v(n, (a) => m(t.$slots, `headerCell.${a.key}`, {
+          key: a.key,
+          headerCell: a
+        }, () => [
+          r("th", {
+            colspan: a.colSpan,
+            rowspan: a.rowSpan,
+            scope: a.scope,
+            class: k([a.className, "th"])
+          }, [
+            m(t.$slots, `headerCellContent.${a.key}`, { headerCellContent: a }, () => [
+              r("span", {
+                class: k(a.labelClassName)
+              }, f(a.label), 3)
+            ])
+          ], 10, ae)
+        ])), 128))
+      ]))), 128))
+    ]));
+  }
+}), oe = { class: "pagination__wrapper" }, re = { class: "pagination__details" }, le = { class: "pagination__btn-list" }, ue = ["disabled"], ie = /* @__PURE__ */ r("span", { class: "sr-only" }, "First page", -1), de = /* @__PURE__ */ r("span", {
   "aria-hidden": "true",
   class: "i-solar-alt-arrow-left-linear"
-}, null, -1)), ye = [
-  me,
-  be
-], Pe = ["disabled"], ve = /* @__PURE__ */ v(() => /* @__PURE__ */ u("span", { class: "sr-only" }, "Previous page", -1)), ke = /* @__PURE__ */ v(() => /* @__PURE__ */ u("span", {
+}, null, -1), ce = [
+  ie,
+  de
+], pe = ["disabled"], _e = /* @__PURE__ */ r("span", { class: "sr-only" }, "Previous page", -1), ge = /* @__PURE__ */ r("span", {
   "aria-hidden": "true",
   class: "i-solar-double-alt-arrow-left-linear"
-}, null, -1)), $e = [
-  ve,
-  ke
-], we = ["onClick"], Ce = {
+}, null, -1), fe = [
+  _e,
+  ge
+], he = ["onClick"], Pe = {
   key: 1,
   class: "pagination__btn"
-}, Ve = ["disabled"], Oe = /* @__PURE__ */ v(() => /* @__PURE__ */ u("span", { class: "sr-only" }, "Next page", -1)), Se = /* @__PURE__ */ v(() => /* @__PURE__ */ u("span", {
+}, be = ["disabled"], ye = /* @__PURE__ */ r("span", { class: "sr-only" }, "Next page", -1), me = /* @__PURE__ */ r("span", {
   "aria-hidden": "true",
   class: "i-solar-alt-arrow-right-linear"
-}, null, -1)), Ee = [
-  Oe,
-  Se
-], Ae = ["disabled"], Ie = /* @__PURE__ */ v(() => /* @__PURE__ */ u("span", { class: "sr-only" }, "Last page", -1)), Be = /* @__PURE__ */ v(() => /* @__PURE__ */ u("span", {
+}, null, -1), ve = [
+  ye,
+  me
+], $e = ["disabled"], Ve = /* @__PURE__ */ r("span", { class: "sr-only" }, "Last page", -1), ke = /* @__PURE__ */ r("span", {
   "aria-hidden": "true",
   class: "i-solar-double-alt-arrow-right-linear"
-}, null, -1)), Re = [
-  Ie,
-  Be
-], je = /* @__PURE__ */ S({
+}, null, -1), Ce = [
+  Ve,
+  ke
+], we = /* @__PURE__ */ C({
   __name: "VueyePagination",
   props: {
     perPage: { default: 10 },
@@ -177,301 +174,243 @@ const le = { class: "relative" }, ue = ["aria-expanded"], ie = /* @__PURE__ */ u
     perPageOptions: { default: () => [10, 20, 30, 40, 50] }
   },
   emits: ["update:currentPage", "update:perPage"],
-  setup(n, { emit: a }) {
-    const e = n, t = P(() => Math.ceil(e.total / e.perPage)), r = P(() => e.perPageOptions.map((o) => ({
+  setup(s, { emit: t }) {
+    const e = s, n = h(() => Math.ceil(e.total / e.perPage)), l = h(() => e.perPageOptions.map((o) => ({
       value: o,
       label: o.toString()
-    }))), s = P(() => r.value.find((o) => o.value === e.perPage)), c = P(() => Array.from({ length: t.value }, (o, d) => d + 1).reduce(
-      (o, d) => (d === 1 || d === e.total || d >= e.currentPage - 2 && d <= e.currentPage + 2 ? o.push(d) : (d === e.currentPage - 3 || d === e.currentPage + 3) && o.push("..."), o),
+    }))), a = h(() => l.value.find((o) => o.value === e.perPage)), c = h(() => Array.from({ length: n.value }, (o, g) => g + 1).reduce(
+      (o, g) => (g === 1 || g === e.total || g >= e.currentPage - 2 && g <= e.currentPage + 2 ? o.push(g) : (g === e.currentPage - 3 || g === e.currentPage + 3) && o.push("..."), o),
       []
     ));
-    function _() {
-      e.currentPage < t.value && a("update:currentPage", e.currentPage + 1);
-    }
-    function m() {
-      e.currentPage > 1 && a("update:currentPage", e.currentPage - 1);
+    function P() {
+      e.currentPage < n.value && t("update:currentPage", e.currentPage + 1);
     }
     function y() {
-      e.currentPage > 1 && a("update:currentPage", 1);
+      e.currentPage > 1 && t("update:currentPage", e.currentPage - 1);
+    }
+    function _() {
+      e.currentPage > 1 && t("update:currentPage", 1);
     }
-    function l() {
-      e.currentPage < t.value && a("update:currentPage", e.total);
+    function p() {
+      e.currentPage < n.value && t("update:currentPage", e.total);
     }
-    function h(o) {
-      o > 0 && o <= t.value && a("update:currentPage", o);
+    function w(o) {
+      o > 0 && o <= n.value && t("update:currentPage", o);
     }
-    function i(o) {
-      a("update:perPage", Number(o));
+    function b(o) {
+      t("update:perPage", Number(o));
     }
-    return (o, d) => (f(), g("div", fe, [
-      u("div", null, [
-        A(pe, {
-          options: p(r),
-          "default-value": p(s),
+    return (o, g) => (i(), d("div", oe, [
+      r("div", null, [
+        O(u(X), {
+          options: u(l),
+          "default-value": u(a),
           label: "Per page",
-          "onUpdate:modelValue": i
+          "onUpdate:modelValue": b
         }, null, 8, ["options", "default-value"])
       ]),
-      u("div", null, [
-        u("span", ge, b((o.currentPage - 1) * o.perPage + 1) + " - " + b(o.currentPage * o.perPage > o.total ? o.total : o.currentPage * o.perPage) + " of " + b(o.total), 1)
+      r("div", null, [
+        r("span", re, f((o.currentPage - 1) * o.perPage + 1) + " - " + f(o.currentPage * o.perPage > o.total ? o.total : o.currentPage * o.perPage) + " of " + f(o.total), 1)
       ]),
-      u("ul", _e, [
-        u("li", null, [
-          u("button", {
+      r("ul", le, [
+        r("li", null, [
+          r("button", {
             class: "pagination__btn",
-            onClick: y,
+            onClick: _,
             disabled: o.currentPage === 1
-          }, ye, 8, he)
+          }, ce, 8, ue)
         ]),
-        u("li", null, [
-          u("button", {
+        r("li", null, [
+          r("button", {
             class: "pagination__btn",
-            onClick: m,
+            onClick: y,
             disabled: o.currentPage === 1
-          }, $e, 8, Pe)
+          }, fe, 8, pe)
         ]),
-        (f(!0), g(w, null, $(p(c), (C) => (f(), g("li", { key: C }, [
-          typeof C == "number" ? (f(), g("button", {
+        (i(!0), d($, null, v(u(c), (V) => (i(), d("li", { key: V }, [
+          typeof V == "number" ? (i(), d("button", {
             key: 0,
-            class: O(["pagination__btn", { "pagination__btn--current": C === o.currentPage }]),
-            onClick: (Ze) => h(C)
-          }, b(C), 11, we)) : (f(), g("span", Ce, "..."))
+            class: k(["pagination__btn", { "pagination__btn--current": V === o.currentPage }]),
+            onClick: (je) => w(V)
+          }, f(V), 11, he)) : (i(), d("span", Pe, "..."))
         ]))), 128)),
-        u("li", null, [
-          u("button", {
+        r("li", null, [
+          r("button", {
             class: "pagination__btn",
-            onClick: _,
-            disabled: o.currentPage === p(t)
-          }, Ee, 8, Ve)
+            onClick: P,
+            disabled: o.currentPage === u(n)
+          }, ve, 8, be)
         ]),
-        u("li", null, [
-          u("button", {
+        r("li", null, [
+          r("button", {
             class: "pagination__btn",
-            onClick: l,
-            disabled: o.currentPage === p(t)
-          }, Re, 8, Ae)
+            onClick: p,
+            disabled: o.currentPage === u(n)
+          }, Ce, 8, $e)
         ])
       ])
     ]));
   }
 });
-const Le = (n, a) => {
-  const e = n.__vccOpts || n;
-  for (const [t, r] of a)
-    e[t] = r;
-  return e;
-}, Ne = /* @__PURE__ */ Le(je, [["__scopeId", "data-v-d06f6d12"]]);
-function R(n) {
-  let a = 1;
-  return n.forEach((e) => {
-    e.children && (a = Math.max(a, R(e.children) + 1));
-  }), a;
+function R(s) {
+  let t = 1;
+  return s.forEach((e) => {
+    e.children && (t = Math.max(t, R(e.children) + 1));
+  }), t;
 }
-function K(n) {
-  let a = 0;
-  return n.forEach((e) => {
-    e.children ? a += K(e.children) : a++;
-  }), a;
+function N(s) {
+  let t = 0;
+  return s.forEach((e) => {
+    e.children ? t += N(e.children) : t++;
+  }), t;
 }
-function j(n, a, e = [], t = 0, r = 0) {
-  return n.forEach((s) => {
-    if (e[t] || (e[t] = []), s.children) {
-      const { children: c, ..._ } = s, m = K(c);
-      e[t].push({
-        ..._,
-        colSpan: m,
+function D(s, t, e = [], n = 0, l = 0) {
+  return s.forEach((a) => {
+    if (e[n] || (e[n] = []), a.children) {
+      const { children: c, ...P } = a, y = N(c);
+      e[n].push({
+        ...P,
+        colSpan: y,
         scope: "colgroup"
-      }), j(c, a, e, t + 1, r + 1);
+      }), D(c, t, e, n + 1, l + 1);
     } else {
-      const c = a - r;
-      e[t].push({
-        ...s,
-        key: s.key,
-        label: s.label,
+      const c = t - l;
+      e[n].push({
+        ...a,
+        key: a.key,
+        label: a.label,
         rowSpan: c,
         scope: "col"
       });
     }
   }), e;
 }
-function L(n, a = "", e = []) {
-  return n.forEach((t) => {
-    t.children ? L(t.children, `${a}${t.key}.`, e) : e.push(`${a}${t.key}`);
+function E(s, t = "", e = []) {
+  return s.forEach((n) => {
+    n.children ? E(n.children, `${t}${n.key}.`, e) : e.push(`${t}${n.key}`);
   }), e;
 }
-function tt(n) {
-  const a = R(n);
-  return j(n, a).reduce((r, s) => [...r, ...s], []);
+function Ke(s) {
+  const t = R(s);
+  return D(s, t).reduce((l, a) => [...l, ...a], []);
 }
-const Te = (n, a) => {
-  const e = a.split(".");
-  let t = n;
-  for (let r = 0; r < e.length; r++)
-    if (t[e[r]])
-      t = t[e[r]];
+const Oe = (s, t) => {
+  const e = t.split(".");
+  let n = s;
+  for (let l = 0; l < e.length; l++)
+    if (n[e[l]])
+      n = n[e[l]];
     else
       return;
-  return t;
+  return n;
 };
-function He(n, a, e = 0, t = n.length) {
-  return n.map((r) => L(a).map((s) => ({
-    [s]: Te(r, s)
-  })).reduce((s, c) => ({ ...s, ...c }), {})).slice(e, t);
+function Se(s, t, e = 0, n = s.length) {
+  return s.map((l) => E(t).map((a) => ({
+    [a]: Oe(l, a)
+  })).reduce((a, c) => ({ ...a, ...c }), {})).slice(e, n);
+}
+function Me(s) {
+  return {
+    headerKeys: h(() => E(s.flat()))
+  };
+}
+function Be(s = {}) {
+  const t = S({
+    perPage: s.perPage || 10,
+    currentPage: s.currentPage || 1
+  });
+  function e(l) {
+    t.value.currentPage = l;
+  }
+  function n(l) {
+    t.value.perPage = l;
+  }
+  return {
+    pagination: t,
+    updateCurrentPage: e,
+    updatePerPage: n
+  };
 }
-function Me(n, a, e) {
+function Re(s, t, e) {
   return {
-    bodyRows: P(() => {
-      const r = e.value.perPage * (e.value.currentPage - 1), s = e.value.perPage * e.value.currentPage;
-      return He(n, p(a), r, s);
+    bodyRows: h(() => {
+      const l = t.value.perPage * (t.value.currentPage - 1), a = t.value.perPage * t.value.currentPage;
+      return Se(s, u(e), l, a);
     })
   };
 }
-function De(n) {
-  const a = p(n) ?? [];
+function De(s) {
+  const t = u(s) ?? [];
   return {
-    headers: P(() => j(a, R(a)))
+    headers: h(() => D(t, R(t)))
   };
 }
-const Ke = { key: 0 }, We = ["colspan"], xe = /* @__PURE__ */ u("div", { class: "flex justify-center items-center" }, [
-  /* @__PURE__ */ u("div", { class: "loader animate-spin ease-linear rounded-full border-8 border-t-8 border-t-primary-300 dark:border-t-primary-800 dark:border-primary-600 border-primary-200 h-16 w-16" })
-], -1), ze = [
-  xe
-], Fe = ["id"], Ue = /* @__PURE__ */ S({
-  __name: "VueyeBody",
-  props: {
-    loading: { type: Boolean, default: !1 },
-    bodyRows: { default: () => [] },
-    itemValue: { default: "id" }
-  },
-  setup(n) {
-    const a = n, e = P(() => Object.keys(a.bodyRows[0]).length);
-    return (t, r) => (f(), g("tbody", null, [
-      t.loading ? (f(), g("tr", Ke, [
-        u("td", { colspan: p(e) }, ze, 8, We)
-      ])) : (f(!0), g(w, { key: 1 }, $(t.bodyRows, (s) => (f(), g("tr", {
-        key: s[t.itemValue]
-      }, [
-        k(t.$slots, "default", { row: s }, () => [
-          (f(!0), g(w, null, $(Object.keys(s), (c) => (f(), g("td", {
-            key: `${s[t.itemValue]}.${c}`,
-            id: `${s[t.itemValue]}.${c}`
-          }, [
-            k(t.$slots, "default", {
-              cell: s[c],
-              key: `${s[t.itemValue]}.${c}`
-            }, () => [
-              T(b(s[c]), 1)
-            ])
-          ], 8, Fe))), 128))
-        ])
-      ]))), 128))
-    ]));
-  }
-}), qe = ["colspan", "rowspan", "scope"], Ge = /* @__PURE__ */ S({
-  __name: "VueyeHead",
-  props: {
-    columnHeaders: { default: () => [] }
-  },
-  setup(n) {
-    return (a, e) => (f(), g("thead", null, [
-      (f(!0), g(w, null, $(a.columnHeaders, (t, r) => (f(), g("tr", { key: r }, [
-        (f(!0), g(w, null, $(t, (s) => k(a.$slots, `headerCell.${s.key}`, {
-          key: s.key,
-          headerCell: s
-        }, () => [
-          u("th", {
-            colspan: s.colSpan,
-            rowspan: s.rowSpan,
-            scope: s.scope,
-            class: O([s.className, "th"])
-          }, [
-            k(a.$slots, `headerCellContent.${s.key}`, { headerCellContent: s }, () => [
-              u("span", {
-                class: O(s.labelClassName)
-              }, b(s.label), 3)
-            ])
-          ], 10, qe)
-        ])), 128))
-      ]))), 128))
-    ]));
-  }
-}), Je = { class: "table__wrapper" }, Qe = { class: "table__caption" }, Xe = { class: "table__summary" }, Ye = { class: "table__pagination-wrapper" }, nt = /* @__PURE__ */ S({
+const Ee = { class: "table__wrapper" }, He = {
+  key: 0,
+  class: "table__caption"
+}, Ne = { class: "table__summary" }, Te = { class: "table__pagination-wrapper" }, Ie = /* @__PURE__ */ C({
   inheritAttrs: !1,
   __name: "VueyeTable",
-  props: {
-    itemValue: { default: "id" },
-    columnHeaders: { default: () => [] },
-    data: { default: () => [] },
-    perPage: { default: 10 },
-    currentPage: { default: 1 },
-    perPageOptions: { default: () => [5, 10, 20, 30] },
-    loading: { type: Boolean, default: !1 },
-    selectable: { type: Boolean, default: !1 },
-    caption: { default: "" },
-    summary: { default: "" }
-  },
-  setup(n) {
-    const a = n, e = J(a, "columnHeaders"), t = E({
-      perPage: a.perPage || 10,
-      currentPage: a.currentPage || 1
-    });
-    console.log(a);
-    const { headers: r } = De(e), { bodyRows: s } = Me(a.data, e, t), c = Q(), _ = Object.keys(c).filter((l) => l.startsWith("headerCell"));
-    function m(l) {
-      t.value.currentPage = l;
-    }
-    function y(l) {
-      t.value.perPage = l;
-    }
-    return (l, h) => (f(), g("div", Je, [
-      T(" The table Header "),
-      u("table", {
-        class: O(l.$attrs.class ?? "table")
+  props: H({
+    itemValue: {},
+    columnHeaders: {},
+    data: {},
+    perPage: {},
+    currentPage: {},
+    perPageOptions: {},
+    loading: { type: Boolean },
+    selectable: { type: Boolean },
+    caption: {},
+    summary: {}
+  }, A),
+  setup(s) {
+    const t = s, e = U(() => t.columnHeaders), { headers: n } = De(e), l = K(), a = Object.keys(l).filter((p) => p.startsWith("headerCell")), { pagination: c, updateCurrentPage: P, updatePerPage: y } = Be(t), { bodyRows: _ } = Re(t.data, c, e);
+    return (p, w) => (i(), d("div", Ee, [
+      r("table", {
+        class: k(p.$attrs.class ?? "table")
       }, [
-        k(l.$slots, "caption", {}, () => [
-          u("caption", Qe, b(l.caption), 1)
+        m(p.$slots, "caption", {}, () => [
+          p.caption ? (i(), d("caption", He, f(p.caption), 1)) : B("", !0)
         ]),
-        A(p(Ge), { columnHeaders: p(r) }, X({ _: 2 }, [
-          $(p(_), (i) => ({
-            name: i,
-            fn: Y((o) => [
-              k(l.$slots, i, Z(ee(o)))
+        O(u(se), { columnHeaders: u(n) }, M({ _: 2 }, [
+          v(u(a), (b) => ({
+            name: b,
+            fn: I((o) => [
+              m(p.$slots, b, L(z(o)))
             ])
           }))
         ]), 1032, ["columnHeaders"]),
-        A(p(Ue), {
-          bodyRows: p(s),
-          loading: l.loading
+        O(u(ne), {
+          bodyRows: u(_),
+          loading: p.loading
         }, null, 8, ["bodyRows", "loading"]),
-        k(l.$slots, "summary", {}, () => [
-          u("caption", Xe, b(l.summary), 1)
+        m(p.$slots, "summary", {}, () => [
+          r("caption", Ne, f(p.summary), 1)
         ])
       ], 2),
-      u("div", Ye, [
-        A(Ne, {
-          perPage: p(t).perPage,
-          currentPage: p(t).currentPage,
-          perPageOptions: l.perPageOptions,
-          total: l.data.length,
-          "onUpdate:currentPage": m,
-          "onUpdate:perPage": y
-        }, null, 8, ["perPage", "currentPage", "perPageOptions", "total"])
+      r("div", Te, [
+        O(u(we), {
+          perPage: u(c).perPage,
+          currentPage: u(c).currentPage,
+          perPageOptions: p.perPageOptions,
+          total: p.data.length,
+          "onUpdate:currentPage": u(P),
+          "onUpdate:perPage": u(y)
+        }, null, 8, ["perPage", "currentPage", "perPageOptions", "total", "onUpdate:currentPage", "onUpdate:perPage"])
       ])
     ]));
   }
 });
-function at(n) {
-  return {
-    headerKeys: P(() => L(n.flat()))
-  };
-}
 export {
-  nt as VueyeTable,
-  tt as defineColumnHeaders,
+  Ie as VueyeTable,
+  Ke as defineColumnHeaders,
   R as depthCount,
-  j as flatHeadersToRows,
-  He as getBodyRows,
-  L as getHeaderKeys,
-  K as leafCount,
-  at as useHeaderKeys
+  D as flatHeadersToRows,
+  Se as getBodyRows,
+  E as getHeaderKeys,
+  N as leafCount,
+  Re as useBodyRows,
+  Me as useHeaderKeys,
+  De as useHeaders,
+  Be as usePagination
 };