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

package/dist/vueye-table.js

@@ -1,169 +1,171 @@
-import { getCurrentScope as K, onScopeDispose as W, unref as p, watch as x, defineComponent as E, ref as O, computed as P, watchEffect as F, openBlock as f, createElementBlock as g, createElementVNode as u, toDisplayString as y, Fragment as w, renderList as $, normalizeClass as S, createCommentVNode as U, createVNode as A, pushScopeId as z, popScopeId as q, renderSlot as k, createTextVNode as G, toRef as J, useSlots as Q, createSlots as X, withCtx as Y, normalizeProps as Z, guardReactiveProps as ee } from "vue";
-function te(a) {
-  return K() ? (W(a), !0) : !1;
-}
-function H(a) {
-  return typeof a == "function" ? a() : p(a);
-}
-const M = typeof window < "u" && typeof document < "u", B = () => {
-}, ne = /* @__PURE__ */ ae();
-function ae() {
-  var a;
-  return M && ((a = window == null ? void 0 : window.navigator) == null ? void 0 : a.userAgent) && /* @__PURE__ */ /iP(ad|hone|od)/.test(window.navigator.userAgent);
-}
-function V(a) {
-  const n = H(a);
-  return (n == null ? void 0 : n.$el) ?? n;
-}
-const j = M ? window : void 0;
-function I(...a) {
-  let n, e, t, r;
-  if (typeof a[0] == "string" || Array.isArray(a[0]) ? ([e, t, r] = a, n = j) : [n, e, t, r] = a, !n)
-    return B;
-  Array.isArray(e) || (e = [e]), Array.isArray(t) || (t = [t]);
-  const o = [], c = () => {
-    o.forEach((l) => l()), o.length = 0;
-  }, _ = (l, m, i, s) => (l.addEventListener(m, i, s), () => l.removeEventListener(m, i, s)), h = x(
-    () => [V(n), H(r)],
-    ([l, m]) => {
-      c(), l && o.push(
-        ...e.flatMap((i) => t.map((s) => _(l, i, s, m)))
-      );
-    },
-    { immediate: !0, flush: "post" }
-  ), b = () => {
-    h(), c();
-  };
-  return te(b), b;
-}
-let T = !1;
-function se(a, n, e = {}) {
-  const { window: t = j, ignore: r = [], capture: o = !0, detectIframe: c = !1 } = e;
-  if (!t)
-    return;
-  ne && !T && (T = !0, Array.from(t.document.body.children).forEach((i) => i.addEventListener("click", B)), t.document.documentElement.addEventListener("click", B));
-  let _ = !0;
-  const h = (i) => r.some((s) => {
-    if (typeof s == "string")
-      return Array.from(t.document.querySelectorAll(s)).some((d) => d === i.target || i.composedPath().includes(d));
-    {
-      const d = V(s);
-      return d && (i.target === d || i.composedPath().includes(d));
-    }
-  }), l = [
-    I(t, "click", (i) => {
-      const s = V(a);
-      if (!(!s || s === i.target || i.composedPath().includes(s))) {
-        if (i.detail === 0 && (_ = !h(i)), !_) {
-          _ = !0;
-          return;
-        }
-        n(i);
-      }
-    }, { passive: !0, capture: o }),
-    I(t, "pointerdown", (i) => {
-      const s = V(a);
-      s && (_ = !i.composedPath().includes(s) && !h(i));
-    }, { passive: !0 }),
-    c && I(t, "blur", (i) => {
-      setTimeout(() => {
-        var d;
-        const s = V(a);
-        ((d = t.document.activeElement) == null ? void 0 : d.tagName) === "IFRAME" && !(s != null && s.contains(t.document.activeElement)) && n(i);
-      }, 0);
-    })
-  ].filter(Boolean);
-  return () => l.forEach((i) => i());
-}
-const oe = { class: "relative" }, re = ["aria-expanded"], le = /* @__PURE__ */ u("span", { class: "i-solar-alt-arrow-down-linear" }, null, -1), ue = {
+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"
-}, ie = ["onClick"], ce = /* @__PURE__ */ E({
+}, 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(a, { emit: n }) {
-    const e = a, t = O(null);
-    se(t, () => {
-      r.value = !1;
-    });
-    const r = O(!1), o = O(-1), c = P(() => e.options[o.value] ?? e.defaultValue), _ = `dropdown-label-${Math.random().toString(36).substring(2, 9)}`;
-    function h() {
-      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 b(l) {
-      o.value = l, r.value = !1, n("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((m) => m.value === e.modelValue);
-      l !== -1 && (o.value = l);
-    }), (l, m) => (f(), g("div", oe, [
-      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: h,
-        "aria-expanded": p(r),
-        "aria-haspopup": !0
+        class: "dropdown__trigger",
+        onClick: P,
+        "aria-expanded": u(n),
+        "aria-haspopup": !0,
+        ref: "buttonRef"
       }, [
-        u("span", null, y(p(c).label), 1),
-        le
-      ], 8, re),
-      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 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",
+        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", ue, [
-          (f(!0), g(w, null, $(l.options, (i, s) => (f(), g("button", {
-            key: s,
-            class: S([{
-              "text-slate-700 bg-slate-200 dark:text-slate-300 dark:bg-primary-900 ": s === p(o),
-              "text-slate-700 dark:text-slate-50 hover:bg-slate-50": s !== p(o)
-            }, "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) => b(s)
-          }, y(i.label), 11, ie))), 128))
+            onClick: (o) => y(b)
+          }, f(w.label), 11, Q))), 128))
         ])
-      ], 512)) : U("", !0)
+      ])) : B("", !0)
     ]));
   }
-}), v = (a) => (z("data-v-d06f6d12"), a = a(), q(), a), de = { class: "pagination__wrapper" }, pe = { class: "pagination__details" }, fe = { class: "pagination__btn-list" }, ge = ["disabled"], _e = /* @__PURE__ */ v(() => /* @__PURE__ */ u("span", { class: "sr-only" }, "First page", -1)), he = /* @__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)), me = [
-  _e,
-  he
-], ye = ["disabled"], be = /* @__PURE__ */ v(() => /* @__PURE__ */ u("span", { class: "sr-only" }, "Previous page", -1)), Pe = /* @__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)), ve = [
-  be,
-  Pe
-], ke = ["onClick"], $e = {
+}, null, -1), fe = [
+  _e,
+  ge
+], he = ["onClick"], Pe = {
   key: 1,
   class: "pagination__btn"
-}, we = ["disabled"], Ce = /* @__PURE__ */ v(() => /* @__PURE__ */ u("span", { class: "sr-only" }, "Next page", -1)), Ve = /* @__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)), Se = [
-  Ce,
-  Ve
-], Ee = ["disabled"], Oe = /* @__PURE__ */ v(() => /* @__PURE__ */ u("span", { class: "sr-only" }, "Last page", -1)), Ae = /* @__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)), Ie = [
-  Oe,
-  Ae
-], Be = /* @__PURE__ */ E({
+}, null, -1), Ce = [
+  Ve,
+  ke
+], we = /* @__PURE__ */ C({
   __name: "VueyePagination",
   props: {
     perPage: { default: 10 },
@@ -172,298 +174,243 @@ const oe = { class: "relative" }, re = ["aria-expanded"], le = /* @__PURE__ */ u
     perPageOptions: { default: () => [10, 20, 30, 40, 50] }
   },
   emits: ["update:currentPage", "update:perPage"],
-  setup(a, { emit: n }) {
-    const e = a, t = P(() => Math.ceil(e.total / e.perPage)), r = P(() => e.perPageOptions.map((s) => ({
-      value: s,
-      label: s.toString()
-    }))), o = P(() => r.value.find((s) => s.value === e.perPage)), c = P(() => Array.from({ length: t.value }, (s, d) => d + 1).reduce(
-      (s, d) => (d === 1 || d === e.total || d >= e.currentPage - 2 && d <= e.currentPage + 2 ? s.push(d) : (d === e.currentPage - 3 || d === e.currentPage + 3) && s.push("..."), s),
+  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()
+    }))), 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 && n("update:currentPage", e.currentPage + 1);
+    function P() {
+      e.currentPage < n.value && t("update:currentPage", e.currentPage + 1);
     }
-    function h() {
-      e.currentPage > 1 && n("update:currentPage", e.currentPage - 1);
+    function y() {
+      e.currentPage > 1 && t("update:currentPage", e.currentPage - 1);
     }
-    function b() {
-      e.currentPage > 1 && n("update:currentPage", 1);
+    function _() {
+      e.currentPage > 1 && t("update:currentPage", 1);
     }
-    function l() {
-      e.currentPage < t.value && n("update:currentPage", e.total);
+    function p() {
+      e.currentPage < n.value && t("update:currentPage", e.total);
     }
-    function m(s) {
-      s > 0 && s <= t.value && n("update:currentPage", s);
+    function w(o) {
+      o > 0 && o <= n.value && t("update:currentPage", o);
     }
-    function i(s) {
-      n("update:perPage", Number(s));
+    function b(o) {
+      t("update:perPage", Number(o));
     }
-    return (s, d) => (f(), g("div", de, [
-      u("div", null, [
-        A(ce, {
-          options: p(r),
-          "default-value": p(o),
+    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", pe, y((s.currentPage - 1) * s.perPage + 1) + " - " + y(s.currentPage * s.perPage > s.total ? s.total : s.currentPage * s.perPage) + " of " + y(s.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", fe, [
-        u("li", null, [
-          u("button", {
+      r("ul", le, [
+        r("li", null, [
+          r("button", {
             class: "pagination__btn",
-            onClick: b,
-            disabled: s.currentPage === 1
-          }, me, 8, ge)
+            onClick: _,
+            disabled: o.currentPage === 1
+          }, ce, 8, ue)
         ]),
-        u("li", null, [
-          u("button", {
+        r("li", null, [
+          r("button", {
             class: "pagination__btn",
-            onClick: h,
-            disabled: s.currentPage === 1
-          }, ve, 8, ye)
+            onClick: y,
+            disabled: o.currentPage === 1
+          }, 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: S(["pagination__btn", { "pagination__btn--current": C === s.currentPage }]),
-            onClick: (Xe) => m(C)
-          }, y(C), 11, ke)) : (f(), g("span", $e, "..."))
+            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: s.currentPage === p(t)
-          }, Se, 8, we)
+            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: s.currentPage === p(t)
-          }, Ie, 8, Ee)
+            onClick: p,
+            disabled: o.currentPage === u(n)
+          }, Ce, 8, $e)
         ])
       ])
     ]));
   }
 });
-const Re = (a, n) => {
-  const e = a.__vccOpts || a;
-  for (const [t, r] of n)
-    e[t] = r;
-  return e;
-}, Le = /* @__PURE__ */ Re(Be, [["__scopeId", "data-v-d06f6d12"]]);
-function R(a) {
-  let n = 1;
-  return a.forEach((e) => {
-    e.children && (n = Math.max(n, R(e.children) + 1));
-  }), n;
+function R(s) {
+  let t = 1;
+  return s.forEach((e) => {
+    e.children && (t = Math.max(t, R(e.children) + 1));
+  }), t;
 }
-function D(a) {
-  let n = 0;
-  return a.forEach((e) => {
-    e.children ? n += D(e.children) : n++;
-  }), n;
+function N(s) {
+  let t = 0;
+  return s.forEach((e) => {
+    e.children ? t += N(e.children) : t++;
+  }), t;
 }
-function L(a, n, e = [], t = 0, r = 0) {
-  return a.forEach((o) => {
-    if (e[t] || (e[t] = []), o.children) {
-      const { children: c, ..._ } = o, h = D(c);
-      e[t].push({
-        ..._,
-        colSpan: h,
+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"
-      }), L(c, n, e, t + 1, r + 1);
+      }), D(c, t, e, n + 1, l + 1);
     } else {
-      const c = n - r;
-      e[t].push({
-        ...o,
-        key: o.key,
-        label: o.label,
+      const c = t - l;
+      e[n].push({
+        ...a,
+        key: a.key,
+        label: a.label,
         rowSpan: c,
         scope: "col"
       });
     }
   }), e;
 }
-function N(a, n = "", e = []) {
-  return a.forEach((t) => {
-    t.children ? N(t.children, `${n}${t.key}.`, e) : e.push(`${n}${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 Ze(a) {
-  const n = R(a);
-  return L(a, n).reduce((r, o) => [...r, ...o], []);
+function Ke(s) {
+  const t = R(s);
+  return D(s, t).reduce((l, a) => [...l, ...a], []);
 }
-const Ne = (a, n) => {
-  const e = n.split(".");
-  let t = a;
-  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 Te(a, n, e = 0, t = a.length) {
-  return a.map((r) => N(n).map((o) => ({
-    [o]: Ne(r, o)
-  })).reduce((o, c) => ({ ...o, ...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 He(a, n, e) {
+function Me(s) {
   return {
-    bodyRows: P(() => {
-      const r = e.value.perPage * (e.value.currentPage - 1), o = e.value.perPage * e.value.currentPage;
-      return Te(a, p(n), r, o);
+    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 Re(s, t, e) {
+  return {
+    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 Me(a) {
-  const n = p(a) ?? [];
+function De(s) {
+  const t = u(s) ?? [];
   return {
-    headers: P(() => L(n, R(n)))
+    headers: h(() => D(t, R(t)))
   };
 }
-const je = { key: 0 }, De = ["colspan"], Ke = /* @__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), We = [
-  Ke
-], xe = ["id"], Fe = /* @__PURE__ */ E({
-  __name: "VueyeBody",
-  props: {
-    loading: { type: Boolean, default: !1 },
-    bodyRows: { default: () => [] },
-    itemValue: { default: "id" }
-  },
-  setup(a) {
-    const n = a, e = P(() => Object.keys(n.bodyRows[0]).length);
-    return (t, r) => (f(), g("tbody", null, [
-      t.loading ? (f(), g("tr", je, [
-        u("td", { colspan: p(e) }, We, 8, De)
-      ])) : (f(!0), g(w, { key: 1 }, $(t.bodyRows, (o) => (f(), g("tr", {
-        key: o[t.itemValue]
-      }, [
-        k(t.$slots, "default", { row: o }, () => [
-          (f(!0), g(w, null, $(Object.keys(o), (c) => (f(), g("td", {
-            key: `${o[t.itemValue]}.${c}`,
-            id: `${o[t.itemValue]}.${c}`
-          }, [
-            k(t.$slots, "default", {
-              cell: o[c],
-              key: `${o[t.itemValue]}.${c}`
-            }, () => [
-              G(y(o[c]), 1)
-            ])
-          ], 8, xe))), 128))
-        ])
-      ]))), 128))
-    ]));
-  }
-}), Ue = ["colspan", "rowspan", "scope"], ze = /* @__PURE__ */ E({
-  __name: "VueyeHead",
-  props: {
-    columnHeaders: { default: () => [] }
-  },
-  setup(a) {
-    return (n, e) => (f(), g("thead", null, [
-      (f(!0), g(w, null, $(n.columnHeaders, (t, r) => (f(), g("tr", { key: r }, [
-        (f(!0), g(w, null, $(t, (o) => k(n.$slots, `headerCell.${o.key}`, {
-          key: o.key,
-          headerCell: o
-        }, () => [
-          u("th", {
-            colspan: o.colSpan,
-            rowspan: o.rowSpan,
-            scope: o.scope,
-            class: S([o.className, "th"])
-          }, [
-            k(n.$slots, `headerCellContent.${o.key}`, { headerCellContent: o }, () => [
-              u("span", {
-                class: S(o.labelClassName)
-              }, y(o.label), 3)
-            ])
-          ], 10, Ue)
-        ])), 128))
-      ]))), 128))
-    ]));
-  }
-}), qe = { class: "table__wrapper" }, Ge = { class: "table__caption" }, Je = { class: "table__summary" }, Qe = { class: "table__pagination-wrapper" }, et = /* @__PURE__ */ E({
+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(a) {
-    const n = a, e = J(n, "columnHeaders"), t = O({
-      perPage: n.perPage || 10,
-      currentPage: n.currentPage || 1
-    }), { headers: r } = Me(e), { bodyRows: o } = He(n.data, e, t), c = Q(), _ = Object.keys(c).filter((l) => l.startsWith("headerCell"));
-    function h(l) {
-      t.value.currentPage = l;
-    }
-    function b(l) {
-      t.value.perPage = l;
-    }
-    return (l, m) => (f(), g("div", qe, [
-      u("table", {
-        class: S(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", Ge, y(l.caption), 1)
+        m(p.$slots, "caption", {}, () => [
+          p.caption ? (i(), d("caption", He, f(p.caption), 1)) : B("", !0)
         ]),
-        A(p(ze), { columnHeaders: p(r) }, X({ _: 2 }, [
-          $(p(_), (i) => ({
-            name: i,
-            fn: Y((s) => [
-              k(l.$slots, i, Z(ee(s)))
+        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(Fe), {
-          bodyRows: p(o),
-          loading: l.loading
+        O(u(ne), {
+          bodyRows: u(_),
+          loading: p.loading
         }, null, 8, ["bodyRows", "loading"]),
-        k(l.$slots, "summary", {}, () => [
-          u("caption", Je, y(l.summary), 1)
+        m(p.$slots, "summary", {}, () => [
+          r("caption", Ne, f(p.summary), 1)
         ])
       ], 2),
-      u("div", Qe, [
-        A(Le, {
-          perPage: p(t).perPage,
-          currentPage: p(t).currentPage,
-          perPageOptions: l.perPageOptions,
-          total: l.data.length,
-          "onUpdate:currentPage": h,
-          "onUpdate:perPage": b
-        }, 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 tt(a) {
-  return {
-    headerKeys: P(() => N(a.flat()))
-  };
-}
 export {
-  et as VueyeTable,
-  Ze as defineColumnHeaders,
+  Ie as VueyeTable,
+  Ke as defineColumnHeaders,
   R as depthCount,
-  L as flatHeadersToRows,
-  Te as getBodyRows,
-  N as getHeaderKeys,
-  D as leafCount,
-  tt 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
 };