vueye-table 2.0.0-alpha.10 → 2.0.0-alpha.13

package/dist/vueye-table.js

@@ -1,367 +1,759 @@
-import { defineComponent as V, mergeDefaults as C, ref as w, computed as b, watchEffect as N, openBlock as d, createElementBlock as c, createElementVNode as u, unref as i, toDisplayString as f, createCommentVNode as O, Fragment as $, renderList as y, normalizeClass as v, renderSlot as P, createTextVNode as T, createVNode as k, useSlots as U, createSlots as j, withCtx as z, normalizeProps as K, guardReactiveProps as M } from "vue";
-const A = {
-  itemValue: "id",
-  columnHeaders: () => [],
-  data: () => [],
-  perPage: 10,
-  currentPage: 1,
-  perPageOptions: () => [5, 10, 20, 30],
-  loading: !1,
-  selectable: !1,
-  caption: "",
-  summary: ""
-}, L = {
+import { openBlock as g, createElementBlock as b, createElementVNode as d, defineComponent as L, mergeDefaults as D, ref as C, computed as m, watchEffect as Y, unref as c, toDisplayString as P, createVNode as $, createCommentVNode as z, withDirectives as F, normalizeClass as K, Fragment as j, renderList as R, vShow as q, nextTick as te, mergeProps as ne, isRef as A, vModelCheckbox as oe, createStaticVNode as le, renderSlot as y, createTextVNode as J, watch as se, toValue as S, useSlots as ae, createSlots as X, withCtx as O, normalizeProps as M, guardReactiveProps as H } from "vue";
+function re(t) {
+  return t.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/(?:^|\s)\S/g, (n) => n.toUpperCase()).trim().replace(/\s\s+/g, " ");
+}
+function Q(t) {
+  let n = 1;
+  return t.forEach((e) => {
+    e.children && (n = Math.max(n, Q(e.children) + 1));
+  }), n;
+}
+function W(t) {
+  let n = 0;
+  return t.forEach((e) => {
+    e.children ? n += W(e.children) : n++;
+  }), n;
+}
+function Z(t, n, e = [], o = 0, s = 0, a = "") {
+  return t.forEach((u) => {
+    if (e[o] || (e[o] = []), u.children) {
+      const { children: h, ...r } = u, l = W(h);
+      e[o].push({
+        ...r,
+        colSpan: l,
+        scope: "colgroup"
+      }), Z(h, n, e, o + 1, s + 1, `${a}${u.key}.`);
+    } else {
+      const h = n - s;
+      e[o].push({
+        ...u,
+        key: u.key,
+        fullKey: `${a}${u.key}`,
+        label: u.label,
+        rowSpan: h,
+        scope: "col",
+        sortable: Object.prototype.hasOwnProperty.call(u, "sortable") ? u.sortable : !0
+      });
+    }
+  }), e;
+}
+function I(t, n = "", e = []) {
+  return t.forEach((o) => {
+    o.children ? I(o.children, `${n}${o.key}.`, e) : e.push(`${n}${o.key}`);
+  }), e;
+}
+function At(t) {
+  const n = Q(t);
+  return Z(t, n).reduce((s, a) => [...s, ...a], []);
+}
+function G(t) {
+  const n = [];
+  for (const e in t) {
+    const o = re(e), s = {
+      key: e,
+      label: o
+    };
+    if (typeof t[e] == "object" && t[e] !== null) {
+      const a = G(t[e]);
+      a.length > 0 && (s.children = a);
+    }
+    n.push(s);
+  }
+  return n;
+}
+const ce = (t, n) => {
+  const e = n.split(".");
+  let o = t;
+  for (let s = 0; s < e.length; s++)
+    if (o[e[s]])
+      o = o[e[s]];
+    else
+      return;
+  return o;
+};
+function ie(t, n) {
+  return t.map((e) => n.map((a) => ({
+    [a]: ce(e, a)
+    // ...row,
+  })).reduce((a, u) => ({ ...a, ...u }), {}));
+}
+function ue(t, n = 0, e = t.length) {
+  return t.slice(n, e);
+}
+function x(t) {
+  const n = {};
+  for (const [e, o] of Object.entries(t))
+    if (e.includes(".")) {
+      const [s, a] = e.split(".");
+      n[s] || (n[s] = {}), n[s][a] = o;
+    } else
+      n[e] = o;
+  for (const [e, o] of Object.entries(n))
+    typeof o == "object" && (n[e] = x(o));
+  return n;
+}
+function de(t) {
+  const n = [];
+  for (const e in t)
+    typeof t[e] == "object" ? n.push(...de(t[e])) : n.push(t[e]);
+  return n;
+}
+function pe(t) {
+  return typeof t != "function" || typeof t != "object";
+}
+function It(t) {
+  return (n, e, o) => t(n, e, o);
+}
+function _e() {
+  return {
+    itemValue: "id",
+    columnHeaders: () => [],
+    data: () => [],
+    perPage: 10,
+    currentPage: 1,
+    perPageOptions: () => [5, 10, 20, 30],
+    loading: !1,
+    selected: null,
+    selectMode: "all",
+    caption: "",
+    summary: "",
+    filterQuery: "",
+    filterBy: void 0,
+    filterMethod: (t, n, e) => t === "" || t === void 0 || e === void 0 || e.length === 0 ? !0 : e == null ? void 0 : e.some((s) => {
+      const a = n[s];
+      return pe(a) ? a == null ? void 0 : a.toString().toLowerCase().includes(t.toLowerCase()) : !1;
+    })
+  };
+}
+const he = {
   options: () => [],
   modelValue: "",
   label: ""
-}, F = { class: "dropdown__wrapper" }, G = ["aria-expanded"], W = /* @__PURE__ */ u("span", { class: "i-solar-alt-arrow-down-linear" }, null, -1), Z = {
+}, U = (t, n) => {
+  const e = t.__vccOpts || t;
+  for (const [o, s] of n)
+    e[o] = s;
+  return e;
+}, ge = {}, be = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 24 24"
+}, fe = /* @__PURE__ */ d("path", {
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "stroke-width": "1.5",
+  d: "m19 9l-7 6l-7-6"
+}, null, -1), me = [
+  fe
+];
+function ye(t, n) {
+  return g(), b("svg", be, me);
+}
+const ve = /* @__PURE__ */ U(ge, [["render", ye]]), we = { class: "table__dropdown-wrapper" }, ke = ["aria-expanded"], $e = {
   class: "py-1",
   role: "none"
-}, q = ["onClick"], I = /* @__PURE__ */ V({
+}, Pe = ["onClick"], Ce = /* @__PURE__ */ L({
   __name: "VueyeDropdown",
-  props: C({
+  props: D({
     options: {},
     modelValue: {},
     label: {},
     defaultValue: {}
-  }, L),
+  }, he),
   emits: ["update:modelValue"],
-  setup(s, { emit: t }) {
-    const e = s, n = w(!1), r = w(-1), a = b(() => e.options[r.value] ?? e.defaultValue), p = `dropdown-label-${Math.random().toString(36).substring(2, 9)}`;
-    function h() {
-      n.value = !n.value;
+  setup(t, { emit: n }) {
+    const e = t, o = C(!1), s = C(-1), a = C(null), u = C(null), h = C(!0), r = m(() => s.value === -1 ? e.options[0] : e.options[s.value]), l = `dropdown-label-${Math.random().toString(36).substring(2, 9)}`;
+    async function i() {
+      var v, p;
+      if (o.value = !o.value, o.value) {
+        await te();
+        const k = ((v = a.value) == null ? void 0 : v.getBoundingClientRect()) ?? { bottom: 0 }, V = ((p = u.value) == null ? void 0 : p.offsetHeight) ?? 200;
+        h.value = window.innerHeight - (k == null ? void 0 : k.bottom) > V;
+      }
     }
-    function g(o) {
-      r.value = o, n.value = !1, t("update:modelValue", a.value.content);
+    function _(v) {
+      s.value = v, o.value = !1, n("update:modelValue", r.value.content);
     }
-    return N(() => {
-      const o = e.options.findIndex((l) => l.content === e.modelValue);
-      o !== -1 && (r.value = o);
-    }), (o, l) => (d(), c("div", F, [
-      u("button", {
+    return Y(() => {
+      const v = e.options.findIndex((p) => p.content === e.modelValue);
+      v !== -1 && (s.value = v), e.modelValue === void 0 && (s.value = -1);
+    }), (v, p) => (g(), b("div", we, [
+      d("button", {
         type: "button",
-        class: "dropdown__trigger",
-        onClick: h,
-        "aria-expanded": i(n),
+        class: "table__dropdown-trigger",
+        onClick: i,
+        "aria-expanded": c(o),
         "aria-haspopup": !0,
-        ref: "buttonRef"
+        ref_key: "buttonRef",
+        ref: a
       }, [
-        u("span", null, f(i(a).label), 1),
-        W
-      ], 8, G),
-      i(n) ? (d(), c("div", {
+        d("span", null, P(c(r).label), 1),
+        $(ve)
+      ], 8, ke),
+      c(o) ? (g(), b("div", {
         key: 0,
-        class: "dropdown__overlay",
-        onClick: h
-      })) : O("", !0),
-      i(n) ? (d(), c("div", {
-        key: 1,
-        class: "dropdown__menu",
+        class: "table__dropdown-overlay",
+        onClick: i
+      })) : z("", !0),
+      F(d("div", {
+        class: K(["table__dropdown-menu", { "table__dropdown-menu--top": !c(h) }]),
         role: "menu",
         "aria-orientation": "vertical",
-        "aria-labelledby": p
+        "aria-labelledby": l,
+        ref_key: "dropdownMenuRef",
+        ref: u
       }, [
-        u("div", Z, [
-          (d(!0), c($, null, y(o.options, (_, m) => (d(), c("button", {
-            key: m,
-            class: v([{
-              "dropdown__menu__item--selected ": m === i(r)
-            }, "dropdown__menu__item"]),
+        d("div", $e, [
+          (g(!0), b(j, null, R(v.options, (k, V) => (g(), b("button", {
+            key: V,
+            class: K([{
+              "table__dropdown-menu-item--selected ": V === c(s)
+            }, "table__dropdown-menu-item"]),
             role: "menuitem",
-            onClick: (D) => g(m)
-          }, f(_.label), 11, q))), 128))
+            onClick: (B) => _(V)
+          }, P(k.label), 11, Pe))), 128))
         ])
-      ])) : O("", !0)
+      ], 2), [
+        [q, c(o)]
+      ])
     ]));
   }
-});
-const J = {
+}), Ve = {
   loading: !1,
   bodyRows: () => [],
-  itemValue: "id"
-}, Q = { key: 0 }, X = ["colspan"], Y = /* @__PURE__ */ u("div", { class: "loader mx-auto 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" }, null, -1), x = [
-  Y
-], ee = ["id"], te = /* @__PURE__ */ V({
+  itemValue: "id",
+  columnsLength: 0
+}, Se = ["id", "checked", "indeterminate"], Ke = ["for"], Oe = /* @__PURE__ */ le('<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-width="1.5"><path class="rounded-square" d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2c4.714 0 7.071 0 8.535 1.464C22 4.93 22 7.286 22 12c0 4.714 0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12Z"></path><path class="checkmark" stroke-linecap="round" stroke-linejoin="round" d="m8.5 12.5l2 2l5-5"></path><path class="indeterminate" stroke-linecap="round" stroke-linejoin="round" d="M6 12h12"></path></g></svg>', 1), ee = /* @__PURE__ */ L({
+  inheritAttrs: !1,
+  __name: "VueyeCheckbox",
+  props: {
+    checked: Boolean,
+    id: String,
+    label: String,
+    indeterminate: Boolean,
+    modelValue: [Boolean, Array]
+  },
+  emits: ["change", "update:modelValue"],
+  setup(t, { emit: n }) {
+    const e = t, o = C(e.modelValue), s = m({
+      get() {
+        return e.modelValue;
+      },
+      set(u) {
+        n("update:modelValue", u);
+      }
+    }), a = (u) => {
+      n("change", u);
+    };
+    return (u, h) => (g(), b("div", {
+      class: K(["table__checkbox", { "table__checkbox--checked": o.value, "table__checkbox--indeterminate": t.indeterminate }])
+    }, [
+      F(d("input", ne({
+        id: t.id,
+        type: "checkbox",
+        checked: o.value,
+        "onUpdate:modelValue": h[0] || (h[0] = (r) => A(s) ? s.value = r : null),
+        indeterminate: t.indeterminate,
+        onChange: a,
+        "aria-labelledby": "checkboxLabel"
+      }, u.$attrs), null, 16, Se), [
+        [oe, c(s)]
+      ]),
+      d("label", {
+        for: t.id,
+        id: "checkboxLabel"
+      }, P(t.label), 9, Ke),
+      Oe
+    ], 2));
+  }
+});
+const Re = { class: "table__body" }, Be = {
+  key: 0,
+  class: "table__row table__row--loading"
+}, Le = ["colspan"], Me = {
+  key: 1,
+  class: "table__row table__row--empty"
+}, He = ["colspan"], je = /* @__PURE__ */ d("div", { class: "text-center" }, "No data available", -1), De = { class: "table__row" }, Ue = { class: "table__cell table_cell--checkbox" }, Ne = { class: "table__cell" }, Ae = /* @__PURE__ */ L({
   __name: "VueyeBody",
-  props: C({
+  props: D({
     loading: { type: Boolean },
     bodyRows: {},
-    itemValue: {}
-  }, J),
-  setup(s) {
-    const t = s, e = b(() => Object.keys(t.bodyRows[0]).length);
-    return (n, r) => (d(), c("tbody", null, [
-      n.loading ? (d(), c("tr", Q, [
-        u("td", { colspan: i(e) }, x, 8, X)
-      ])) : (d(!0), c($, { key: 1 }, y(n.bodyRows, (a) => (d(), c("tr", {
-        key: a[n.itemValue]
-      }, [
-        P(n.$slots, "default", { row: a }, () => [
-          (d(!0), c($, null, y(Object.keys(a), (p) => (d(), c("td", {
-            key: `${a[n.itemValue]}.${p}`,
-            id: `${a[n.itemValue]}.${p}`
+    notListedKeys: {},
+    itemValue: {},
+    columnsLength: {},
+    selected: {}
+  }, Ve),
+  emits: ["update:selected"],
+  setup(t, { emit: n }) {
+    const e = t, o = m(() => Object.keys(e.bodyRows[0]).filter((r) => !e.notListedKeys.includes(r))), s = m(() => o.value.reduce(
+      (r, l) => ({
+        ...r,
+        [l]: l.split(".").pop() ?? ""
+      }),
+      {}
+    )), a = m(() => e.bodyRows.map((r) => ({
+      flat: r,
+      nest: x(r)
+    }))), u = m(() => a.value.map((r) => r.nest)), h = m({
+      get() {
+        return e.selected;
+      },
+      set(r) {
+        n("update:selected", r);
+      }
+    });
+    return (r, l) => y(r.$slots, "body", { rows: r.bodyRows }, () => [
+      d("tbody", Re, [
+        r.loading ? (g(), b("tr", Be, [
+          d("td", {
+            colspan: r.columnsLength,
+            class: "table__cell table__cell--loading"
           }, [
-            P(n.$slots, "default", {
-              cell: a[p],
-              key: `${a[n.itemValue]}.${p}`
-            }, () => [
-              T(f(a[p]), 1)
+            y(r.$slots, "loading", {}, () => [
+              J(" Loading... ")
             ])
-          ], 8, ee))), 128))
+          ], 8, Le)
+        ])) : r.bodyRows.length === 0 ? (g(), b("tr", Me, [
+          d("td", {
+            class: "table__cell",
+            colspan: r.columnsLength
+          }, [
+            y(r.$slots, "empty", {}, () => [
+              je
+            ])
+          ], 8, He)
+        ])) : y(r.$slots, "rows", {
+          key: 2,
+          rows: c(u)
+        }, () => [
+          (g(!0), b(j, null, R(c(a), (i) => y(r.$slots, "row", {
+            key: i[r.itemValue],
+            row: i.nest
+          }, () => [
+            d("tr", De, [
+              r.selected ? y(r.$slots, "checkbox", {
+                key: 0,
+                row: i.nest
+              }, () => [
+                d("td", Ue, [
+                  $(ee, {
+                    modelValue: c(h),
+                    "onUpdate:modelValue": l[0] || (l[0] = (_) => A(h) ? h.value = _ : null),
+                    value: i.nest,
+                    "aria-label": "Select row"
+                  }, null, 8, ["modelValue", "value"])
+                ])
+              ]) : z("", !0),
+              (g(!0), b(j, null, R(c(o), (_) => y(r.$slots, `itemCell.${_}`, {
+                key: `${i[r.itemValue]}.${_}`,
+                itemCell: i.nest
+              }, () => [
+                d("td", Ne, [
+                  y(r.$slots, `itemCellContent.${c(s)[_]}`, {
+                    itemCellContent: i.nest
+                  }, () => [
+                    J(P(i.flat[_]), 1)
+                  ])
+                ])
+              ])), 128))
+            ])
+          ])), 128))
         ])
-      ]))), 128))
-    ]));
+      ])
+    ]);
   }
-}), ne = ["colspan", "rowspan", "scope"], ae = /* @__PURE__ */ V({
-  __name: "VueyeHead",
+}), Ie = {
+  columnHeaders: () => [],
+  selectable: !1,
+  select: "none"
+}, Te = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 16 16"
+}, Ee = ["opacity"], ze = ["opacity"], Fe = /* @__PURE__ */ L({
+  __name: "ArrowUpDownIcon",
   props: {
-    columnHeaders: { default: () => [] }
+    down: Boolean
   },
-  setup(s) {
-    return (t, e) => (d(), c("thead", null, [
-      (d(!0), c($, null, y(t.columnHeaders, (n, r) => (d(), c("tr", { key: r }, [
-        (d(!0), c($, null, y(n, (a) => P(t.$slots, `headerCell.${a.key}`, {
-          key: a.key,
-          headerCell: a
-        }, () => [
-          u("th", {
-            colspan: a.colSpan,
-            rowspan: a.rowSpan,
-            scope: a.scope,
-            class: v([a.className, "th"])
-          }, [
-            P(t.$slots, `headerCellContent.${a.key}`, { headerCellContent: a }, () => [
-              u("span", {
-                class: v(a.labelClassName)
-              }, f(a.label), 3)
-            ])
-          ], 10, ne)
-        ])), 128))
-      ]))), 128))
+  setup(t) {
+    const n = t, e = m(() => ({
+      up: n.down ? 0.5 : 1,
+      down: n.down ? 1 : 0.5
+    }));
+    return (o, s) => (g(), b("svg", Te, [
+      d("path", {
+        opacity: c(e).up,
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M2.22 5.53a.75.75 0 0 1 0-1.06l2.25-2.25a.75.75 0 0 1 1.06 0l2.25 2.25a.75.75 0 0 1-1.06 1.06l-.97-.97v5.69a.75.75 0 0 1-1.5 0V4.56l-.97.97a.75.75 0 0 1-1.06 0",
+        clipRule: "evenodd"
+      }, null, 8, Ee),
+      d("path", {
+        opacity: c(e).down,
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M13.78 10.47a.75.75 0 0 1 0 1.06l-2.25 2.25a.75.75 0 0 1-1.06 0l-2.25-2.25a.75.75 0 1 1 1.06-1.06l.97.97V5.75a.75.75 0 0 1 1.5 0v5.69l.97-.97a.75.75 0 0 1 1.06 0",
+        clipRule: "evenodd"
+      }, null, 8, ze)
     ]));
   }
-}), oe = {
+}), Qe = { class: "table__head" }, We = ["colspan", "rowspan", "scope"], Ze = ["onClick"], Ge = /* @__PURE__ */ L({
+  __name: "VueyeHead",
+  props: D({
+    columnHeaders: {},
+    selectable: { type: Boolean },
+    select: {}
+  }, Ie),
+  emits: ["update:select", "sort"],
+  setup(t, { emit: n }) {
+    const e = t, o = C(""), s = C(!1), a = (l) => {
+      l.sortable && l.scope === "col" && (o.value === l.fullKey ? s.value = !s.value : (o.value = l.fullKey ?? "", s.value = !1), n("sort", { key: o.value, desc: s.value }));
+    }, u = m(() => e.selectable ? [
+      [
+        {
+          key: "checkbox",
+          label: "",
+          className: "checkbox",
+          colSpan: 1,
+          rowSpan: e.columnHeaders.length,
+          scope: "col"
+        },
+        ...e.columnHeaders[0]
+      ],
+      ...e.columnHeaders.slice(1)
+    ] : e.columnHeaders), h = m({
+      get() {
+        return e.select;
+      },
+      set(l) {
+        n("update:select", l);
+      }
+    }), r = (l) => {
+      l.target.checked ? h.value = "all" : h.value = "none";
+    };
+    return (l, i) => y(l.$slots, "headers", { headers: l.columnHeaders }, () => [
+      d("thead", Qe, [
+        (g(!0), b(j, null, R(c(u), (_, v) => (g(), b("tr", {
+          class: "table__row table__row",
+          key: v
+        }, [
+          (g(!0), b(j, null, R(_, (p) => y(l.$slots, `headerCell.${p.key}`, {
+            key: p.key,
+            headerItem: p
+          }, () => [
+            d("th", {
+              colspan: p.colSpan,
+              rowspan: p.rowSpan,
+              scope: p.scope,
+              class: K(["table__cell table__cell--head", p.className])
+            }, [
+              p.key === "checkbox" && l.selectable ? y(l.$slots, "checkbox", { key: 0 }, () => [
+                $(ee, {
+                  indeterminate: c(h) === "indeterminate",
+                  type: "checkbox",
+                  checked: c(h) === "all",
+                  onChange: r,
+                  "aria-label": "select all rows",
+                  class: "table__checkbox"
+                }, null, 8, ["indeterminate", "checked"])
+              ]) : y(l.$slots, `headerCellContent.${p.key}`, {
+                key: 1,
+                headerItem: p
+              }, () => [
+                p.scope === "col" ? (g(), b("button", {
+                  key: 0,
+                  onClick: (k) => a(p),
+                  class: "table__sort-button"
+                }, [
+                  d("span", {
+                    class: K(["table__label table__label--head", p.labelClassName])
+                  }, P(p.label), 3),
+                  $(Fe, {
+                    class: K([{ "table__sort-icon--show": c(o) === p.key }, "table__sort-icon"]),
+                    down: c(s)
+                  }, null, 8, ["class", "down"])
+                ], 8, Ze)) : (g(), b("span", {
+                  key: 1,
+                  class: K(["table__label table__label--head", p.labelClassName])
+                }, P(p.label), 3))
+              ])
+            ], 10, We)
+          ])), 128))
+        ]))), 128))
+      ])
+    ]);
+  }
+});
+const xe = {}, Je = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 24 24"
+}, Xe = /* @__PURE__ */ d("path", {
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "stroke-width": "1.5",
+  d: "m9 5l6 7l-6 7"
+}, null, -1), Ye = [
+  Xe
+];
+function qe(t, n) {
+  return g(), b("svg", Je, Ye);
+}
+const et = /* @__PURE__ */ U(xe, [["render", qe]]), tt = {}, nt = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 24 24"
+}, ot = /* @__PURE__ */ d("path", {
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "stroke-width": "1.5",
+  d: "m15 5l-6 7l6 7"
+}, null, -1), lt = [
+  ot
+];
+function st(t, n) {
+  return g(), b("svg", nt, lt);
+}
+const at = /* @__PURE__ */ U(tt, [["render", st]]), rt = {}, ct = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 24 24"
+}, it = /* @__PURE__ */ d("g", {
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "stroke-width": "1.5"
+}, [
+  /* @__PURE__ */ d("path", { d: "m11 19l6-7l-6-7" }),
+  /* @__PURE__ */ d("path", { d: "m7 19l6-7l-6-7" })
+], -1), ut = [
+  it
+];
+function dt(t, n) {
+  return g(), b("svg", ct, ut);
+}
+const pt = /* @__PURE__ */ U(rt, [["render", dt]]), _t = {}, ht = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 24 24"
+}, gt = /* @__PURE__ */ d("g", {
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "stroke-width": "1.5"
+}, [
+  /* @__PURE__ */ d("path", { d: "m13 19l-6-7l6-7" }),
+  /* @__PURE__ */ d("path", { d: "m17 19l-6-7l6-7" })
+], -1), bt = [
+  gt
+];
+function ft(t, n) {
+  return g(), b("svg", ht, bt);
+}
+const mt = /* @__PURE__ */ U(_t, [["render", ft]]), yt = {
   perPage: 10,
   currentPage: 1,
   total: 0,
   perPageOptions: () => [10, 20, 30, 40, 50]
-}, se = { class: "pagination__wrapper" }, le = { class: "pagination__details" }, re = { class: "pagination__btn-list" }, ue = ["disabled"], ie = /* @__PURE__ */ u("span", {
-  "aria-hidden": "true",
-  class: "i-solar-alt-arrow-left-linear"
-}, null, -1), de = [
-  ie
-], ce = ["disabled"], pe = /* @__PURE__ */ u("span", {
-  "aria-hidden": "true",
-  class: "i-solar-double-alt-arrow-left-linear"
-}, null, -1), _e = [
-  pe
-], ge = ["onClick", "aria-label"], be = {
+}, vt = { class: "table__pagination-wrapper" }, wt = { class: "table__pagination-details" }, kt = { class: "table__pagination-btn-list" }, $t = ["disabled"], Pt = ["disabled"], Ct = ["onClick", "aria-label"], Vt = {
   key: 1,
-  class: "pagination__btn"
-}, fe = ["disabled"], he = /* @__PURE__ */ u("span", {
-  "aria-hidden": "true",
-  class: "i-solar-alt-arrow-right-linear"
-}, null, -1), me = [
-  he
-], Pe = ["disabled"], ye = /* @__PURE__ */ u("span", {
-  "aria-hidden": "true",
-  class: "i-solar-double-alt-arrow-right-linear"
-}, null, -1), $e = [
-  ye
-], ve = /* @__PURE__ */ V({
+  class: "table__pagination-btn table__btn"
+}, St = ["disabled"], Kt = ["disabled"], Ot = /* @__PURE__ */ L({
   __name: "VueyePagination",
-  props: C({
+  props: D({
     perPage: {},
     currentPage: {},
     total: {},
     perPageOptions: {}
-  }, oe),
+  }, yt),
   emits: ["update:currentPage", "update:perPage"],
-  setup(s, { emit: t }) {
-    const e = s, n = b(() => Math.ceil(e.total / e.perPage)), r = b(() => e.perPageOptions.map((o) => ({
-      content: o,
-      label: o.toString()
-    }))), a = b(() => r.value.find((o) => o.content === e.perPage)), p = b(() => Array.from({ length: n.value }, (o, l) => l + 1).reduce(
-      (o, l) => (l === 1 || l === e.total || l >= e.currentPage - 2 && l <= e.currentPage + 2 ? o.push(l) : (l === e.currentPage - 3 || l === e.currentPage + 3) && o.push("..."), o),
+  setup(t, { emit: n }) {
+    const e = t, o = m(() => Math.ceil(e.total / e.perPage)), s = m(() => e.perPageOptions.map((l) => ({
+      content: l,
+      label: l.toString()
+    }))), a = m(() => s.value.find((l) => l.content === e.perPage)), u = m(() => Array.from({ length: o.value }, (l, i) => i + 1).reduce(
+      (l, i) => (i === 1 || i === e.total || i >= e.currentPage - 2 && i <= e.currentPage + 2 ? l.push(i) : (i === e.currentPage - 3 || i === e.currentPage + 3) && l.push("..."), l),
       []
     ));
-    function h(o) {
-      t("update:perPage", Number(o));
+    function h(l) {
+      n("update:perPage", Number(l));
     }
-    function g(o) {
-      o >= 1 && o <= n.value && t("update:currentPage", o);
+    function r(l) {
+      l >= 1 && l <= o.value && n("update:currentPage", l);
     }
-    return (o, l) => (d(), c("div", se, [
-      k(i(I), {
-        options: i(r),
-        "default-value": i(a),
+    return (l, i) => (g(), b("div", vt, [
+      $(c(Ce), {
+        options: c(s),
+        "default-value": c(a),
         label: "Per page",
         "onUpdate:modelValue": h
       }, null, 8, ["options", "default-value"]),
-      u("span", le, 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", re, [
-        u("li", null, [
-          u("button", {
-            class: "pagination__btn",
-            onClick: l[0] || (l[0] = (_) => g(1)),
-            disabled: o.currentPage === 1,
+      d("span", wt, P((l.currentPage - 1) * l.perPage + 1) + " - " + P(l.currentPage * l.perPage > l.total ? l.total : l.currentPage * l.perPage) + " of " + P(l.total), 1),
+      d("ul", kt, [
+        d("li", null, [
+          d("button", {
+            class: "table__pagination-btn table__btn",
+            onClick: i[0] || (i[0] = (_) => r(1)),
+            disabled: l.currentPage === 1,
             "aria-label": "First page"
-          }, de, 8, ue)
+          }, [
+            $(mt)
+          ], 8, $t)
         ]),
-        u("li", null, [
-          u("button", {
-            class: "pagination__btn",
-            onClick: l[1] || (l[1] = (_) => g(e.currentPage - 1)),
-            disabled: o.currentPage === 1,
+        d("li", null, [
+          d("button", {
+            class: "table__pagination-btn table__btn",
+            onClick: i[1] || (i[1] = (_) => r(e.currentPage - 1)),
+            disabled: l.currentPage === 1,
             "aria-label": "Previous page"
-          }, _e, 8, ce)
+          }, [
+            $(at)
+          ], 8, Pt)
         ]),
-        (d(!0), c($, null, y(i(p), (_) => (d(), c("li", { key: _ }, [
-          typeof _ == "number" ? (d(), c("button", {
+        (g(!0), b(j, null, R(c(u), (_) => (g(), b("li", { key: _ }, [
+          typeof _ == "number" ? (g(), b("button", {
             key: 0,
-            class: v(["pagination__btn", { "pagination__btn--current": _ === o.currentPage }]),
-            onClick: (m) => g(_),
+            class: K(["table__pagination-btn table__btn", { "table__pagination-btn--current ": _ === l.currentPage }]),
+            onClick: (v) => r(_),
             "aria-label": "Go to page " + _
-          }, f(_), 11, ge)) : (d(), c("span", be, "..."))
+          }, P(_), 11, Ct)) : (g(), b("span", Vt, "..."))
         ]))), 128)),
-        u("li", null, [
-          u("button", {
-            class: "pagination__btn",
-            onClick: l[2] || (l[2] = (_) => g(o.currentPage + 1)),
-            disabled: o.currentPage === i(n),
+        d("li", null, [
+          d("button", {
+            class: "table__pagination-btn table__btn",
+            onClick: i[2] || (i[2] = (_) => r(l.currentPage + 1)),
+            disabled: l.currentPage === c(o),
             "aria-label": "Next page"
-          }, me, 8, fe)
+          }, [
+            $(et)
+          ], 8, St)
         ]),
-        u("li", null, [
-          u("button", {
-            class: "pagination__btn",
-            onClick: l[3] || (l[3] = (_) => g(o.total)),
-            disabled: o.currentPage === i(n),
+        d("li", null, [
+          d("button", {
+            class: "table__pagination-btn table__btn",
+            onClick: i[3] || (i[3] = (_) => r(l.total)),
+            disabled: l.currentPage === c(o),
             "aria-label": "Last page"
-          }, $e, 8, Pe)
+          }, [
+            $(pt)
+          ], 8, Kt)
         ])
       ])
     ]));
   }
 });
-function Ve(s) {
-  return s.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/(?:^|\s)\S/g, (t) => t.toUpperCase()).trim().replace(/\s\s+/g, " ");
-}
-function S(s) {
-  let t = 1;
-  return s.forEach((e) => {
-    e.children && (t = Math.max(t, S(e.children) + 1));
-  }), t;
-}
-function H(s) {
-  let t = 0;
-  return s.forEach((e) => {
-    e.children ? t += H(e.children) : t++;
-  }), t;
-}
-function B(s, t, e = [], n = 0, r = 0) {
-  return s.forEach((a) => {
-    if (e[n] || (e[n] = []), a.children) {
-      const { children: p, ...h } = a, g = H(p);
-      e[n].push({
-        ...h,
-        colSpan: g,
-        scope: "colgroup"
-      }), B(p, t, e, n + 1, r + 1);
-    } else {
-      const p = t - r;
-      e[n].push({
-        ...a,
-        key: a.key,
-        label: a.label,
-        rowSpan: p,
-        scope: "col"
-      });
-    }
-  }), e;
-}
-function R(s, t = "", e = []) {
-  return s.forEach((n) => {
-    n.children ? R(n.children, `${t}${n.key}.`, e) : e.push(`${t}${n.key}`);
-  }), e;
-}
-function Ee(s) {
-  const t = S(s);
-  return B(s, t).reduce((r, a) => [...r, ...a], []);
+function Tt(t) {
+  return {
+    headerKeys: m(() => I(t.flat()))
+  };
 }
-function E(s) {
-  const t = [];
-  for (const e in s) {
-    const n = Ve(e), r = {
-      key: e,
-      label: n
-    };
-    if (typeof s[e] == "object" && s[e] !== null) {
-      const a = E(s[e]);
-      a.length > 0 && (r.children = a);
+function Rt(t = {}, n) {
+  const e = C({
+    perPage: t.perPage || 10,
+    currentPage: t.currentPage || 1
+  });
+  Y(() => {
+    e.value.perPage = t.perPage || 10, e.value.currentPage = t.currentPage || 1;
+  }), se(
+    () => e.value.perPage,
+    (a, u) => {
+      a !== u && o(1);
     }
-    t.push(r);
+  );
+  function o(a) {
+    e.value.currentPage = a, n("update:currentPage", a);
+  }
+  function s(a) {
+    e.value.perPage = a, n("update:perPage", a);
   }
-  return t;
-}
-const ke = (s, t) => {
-  const e = t.split(".");
-  let n = s;
-  for (let r = 0; r < e.length; r++)
-    if (n[e[r]])
-      n = n[e[r]];
-    else
-      return;
-  return n;
-};
-function Ce(s, t, e = 0, n = s.length) {
-  return s.map((r) => R(t).map((a) => ({
-    [a]: ke(r, a)
-  })).reduce((a, p) => ({ ...a, ...p }), {})).slice(e, n);
-}
-function Ne(s) {
   return {
-    headerKeys: b(() => R(s.flat()))
+    pagination: e,
+    updateCurrentPage: o,
+    updatePerPage: s
   };
 }
-function we(s = {}) {
-  const t = w({
-    perPage: s.perPage || 10,
-    currentPage: s.currentPage || 1
-  });
-  function e(r) {
-    t.value.currentPage = r;
-  }
-  function n(r) {
-    t.value.perPage = r;
+function Bt(t, n, e) {
+  const o = C(), s = C(!1);
+  function a({ key: r, desc: l }) {
+    o.value = r, s.value = l;
   }
+  const u = m(() => {
+    const r = G(S(t.data)[0]), l = I(r), i = I(S(n)), _ = [], v = [...i];
+    for (const p of l)
+      i.includes(p) || (_.push(p), v.push(p));
+    return {
+      notListedKeys: _,
+      allKeys: v
+    };
+  });
   return {
-    pagination: t,
-    updateCurrentPage: e,
-    updatePerPage: n
+    bodyRows: m(() => {
+      const r = S(e).perPage * (S(e).currentPage - 1), l = S(e).perPage * S(e).currentPage, i = ie(S(t.data), u.value.allKeys), _ = m(() => t.filterBy === void 0 || t.filterBy.length === 0 ? Object.keys(i[0]) : t.filterBy), v = i.filter((p) => {
+        var k;
+        return (k = t.filterMethod) == null ? void 0 : k.call(t, t.filterQuery, p, S(_));
+      });
+      return o.value && v.sort((p, k) => {
+        if (!o.value)
+          return 0;
+        const V = p[o.value], B = k[o.value];
+        return V < B ? s.value ? 1 : -1 : V > B ? s.value ? -1 : 1 : 0;
+      }), ue(v, r, l);
+    }),
+    notListedKeys: m(() => u.value.notListedKeys),
+    rowsCount: m(() => S(t.data).length),
+    onSort: a
   };
 }
-function Oe(s, t, e) {
+function Lt(t) {
+  const n = c(t) ?? [];
   return {
-    bodyRows: b(() => {
-      const r = e.value.perPage * (e.value.currentPage - 1), a = e.value.perPage * e.value.currentPage;
-      return Ce(s, i(t), r, a);
-    })
+    headers: m(() => Z(n, Q(n))),
+    headersCount: W(n)
   };
 }
-function Se(s) {
-  const t = i(s) ?? [];
+function Mt(t, n, e) {
+  const o = m({
+    get() {
+      var a, u, h;
+      return t.selected === null || ((a = t.selected) == null ? void 0 : a.length) === 0 ? "none" : ((u = t.selected) == null ? void 0 : u.length) === t.data.length || t.selectMode === "page" && ((h = t.selected) == null ? void 0 : h.length) === n.value.length ? "all" : "indeterminate";
+    },
+    set(a) {
+      a === "all" ? t.selectMode === "page" ? s.value = n.value.map((u) => x(u)) : s.value = t.data : a === "none" && (s.value = []);
+    }
+  }), s = m({
+    get() {
+      return t.selected;
+    },
+    set(a) {
+      e("update:selected", a);
+    }
+  });
   return {
-    headers: b(() => B(t, S(t)))
+    selectAll: o,
+    selected: s
   };
 }
-const Be = { class: "table__wrapper" }, Re = {
+const Ht = { class: "table__wrapper" }, jt = {
   key: 0,
   class: "table__caption"
-}, De = { class: "table__summary" }, Te = /* @__PURE__ */ V({
+}, Dt = { class: "table__summary" }, Et = /* @__PURE__ */ L({
   inheritAttrs: !1,
   __name: "VueyeTable",
-  props: C({
+  props: D({
     data: {},
     columnHeaders: {},
     itemValue: {},
@@ -369,61 +761,131 @@ const Be = { class: "table__wrapper" }, Re = {
     currentPage: {},
     perPageOptions: {},
     loading: { type: Boolean },
-    selectable: { type: Boolean },
+    selected: {},
+    selectMode: {},
     caption: {},
-    summary: {}
-  }, A),
-  setup(s) {
-    const t = s, e = b(
-      () => t.columnHeaders.length === 0 ? E(t.data[0]) : t.columnHeaders
-    ), { headers: n } = Se(e), r = U(), a = Object.keys(r).filter((l) => l.startsWith("headerCell")), { pagination: p, updateCurrentPage: h, updatePerPage: g } = we(t), { bodyRows: o } = Oe(t.data, e, p);
-    return (l, _) => (d(), c("div", Be, [
-      u("table", {
-        class: v(l.$attrs.class ?? "table")
+    summary: {},
+    filterQuery: {},
+    filterBy: {},
+    filterMethod: { type: Function }
+  }, _e()),
+  emits: ["update:currentPage", "update:perPage", "update:loading", "update:selected"],
+  setup(t, { emit: n }) {
+    const e = t, o = m(
+      () => e.columnHeaders.length === 0 ? G(e.data[0]) : e.columnHeaders
+    ), { headers: s, headersCount: a } = Lt(o), u = ae(), h = Object.keys(u).filter((f) => f.startsWith("headerCell")), r = Object.keys(u).filter((f) => f.startsWith("itemCell")), { pagination: l, updateCurrentPage: i, updatePerPage: _ } = Rt(e, n), { bodyRows: v, rowsCount: p, notListedKeys: k, onSort: V } = Bt(e, o, l), { selected: B, selectAll: T } = Mt(e, v, n);
+    return (f, N) => (g(), b("div", Ht, [
+      d("table", {
+        class: K(f.$attrs.class ?? "table")
       }, [
-        P(l.$slots, "caption", {}, () => [
-          l.caption ? (d(), c("caption", Re, f(l.caption), 1)) : O("", !0)
+        y(f.$slots, "caption", {}, () => [
+          f.caption ? (g(), b("caption", jt, P(f.caption), 1)) : z("", !0)
         ]),
-        k(i(ae), { columnHeaders: i(n) }, j({ _: 2 }, [
-          y(i(a), (m) => ({
-            name: m,
-            fn: z((D) => [
-              P(l.$slots, m, K(M(D)))
+        $(c(Ge), {
+          columnHeaders: c(s),
+          selectable: f.selected !== null,
+          select: c(T),
+          "onUpdate:select": N[0] || (N[0] = (w) => A(T) ? T.value = w : null),
+          onSort: c(V)
+        }, X({
+          headers: O((w) => [
+            y(f.$slots, "headers", M(H(w)))
+          ]),
+          _: 2
+        }, [
+          R(c(h), (w) => ({
+            name: w,
+            fn: O((E) => [
+              y(f.$slots, w, M(H(E)))
             ])
           }))
-        ]), 1032, ["columnHeaders"]),
-        k(i(te), {
-          bodyRows: i(o),
-          loading: l.loading
-        }, null, 8, ["bodyRows", "loading"]),
-        P(l.$slots, "summary", {}, () => [
-          u("caption", De, f(l.summary), 1)
+        ]), 1032, ["columnHeaders", "selectable", "select", "onSort"]),
+        $(c(Ae), {
+          selected: c(B),
+          "onUpdate:selected": N[1] || (N[1] = (w) => A(B) ? B.value = w : null),
+          bodyRows: c(v),
+          loading: f.loading,
+          itemValue: f.itemValue,
+          "columns-length": c(a),
+          "not-listed-keys": c(k)
+        }, X({
+          checkbox: O((w) => [
+            y(f.$slots, "checkbox", M(H(w)))
+          ]),
+          loading: O(() => [
+            y(f.$slots, "loading")
+          ]),
+          empty: O(() => [
+            y(f.$slots, "empty")
+          ]),
+          rows: O((w) => [
+            y(f.$slots, "rows", M(H(w)))
+          ]),
+          row: O((w) => [
+            y(f.$slots, "row", M(H(w)))
+          ]),
+          _: 2
+        }, [
+          R(c(r), (w) => ({
+            name: w,
+            fn: O((E) => [
+              y(f.$slots, w, M(H(E)))
+            ])
+          }))
+        ]), 1032, ["selected", "bodyRows", "loading", "itemValue", "columns-length", "not-listed-keys"]),
+        y(f.$slots, "summary", {}, () => [
+          d("caption", Dt, P(f.summary), 1)
         ])
       ], 2),
-      k(i(ve), {
-        perPage: i(p).perPage,
-        currentPage: i(p).currentPage,
-        perPageOptions: l.perPageOptions,
-        total: l.data.length,
-        "onUpdate:currentPage": i(h),
-        "onUpdate:perPage": i(g),
-        class: "table__pagination"
-      }, null, 8, ["perPage", "currentPage", "perPageOptions", "total", "onUpdate:currentPage", "onUpdate:perPage"])
+      y(f.$slots, "pagination", {
+        pagination: { ...c(l), perPageOptions: f.perPageOptions, total: c(p) }
+      }, () => [
+        F($(c(Ot), {
+          perPage: c(l).perPage,
+          currentPage: c(l).currentPage,
+          perPageOptions: f.perPageOptions,
+          total: c(p),
+          "onUpdate:currentPage": c(i),
+          "onUpdate:perPage": c(_),
+          class: "table__pagination"
+        }, null, 8, ["perPage", "currentPage", "perPageOptions", "total", "onUpdate:currentPage", "onUpdate:perPage"]), [
+          [q, f.data.length > 0]
+        ])
+      ])
     ]));
   }
 });
+function Ut(t) {
+  const n = [];
+  for (const e of t) {
+    const o = e.children ? Ut(e.children) : void 0;
+    n.push({
+      ...e,
+      children: o
+    });
+  }
+  return n;
+}
 export {
-  Te as VueyeTable,
-  Ee as defineColumnHeaders,
-  S as depthCount,
-  B as flatHeadersToRows,
-  E as generateColumns,
-  Ce as getBodyRows,
-  R as getHeaderKeys,
-  Ve as humanize,
-  H as leafCount,
-  Oe as useBodyRows,
-  Ne as useHeaderKeys,
-  Se as useHeaders,
-  we as usePagination
+  Et as VueyeTable,
+  de as deepValues,
+  At as defineColumnHeaders,
+  It as defineFilterMethod,
+  Ut as defineTableColumnHeaders,
+  Q as depthCount,
+  Z as flatHeadersToRows,
+  G as generateColumns,
+  ie as getBodyRows,
+  I as getHeaderKeys,
+  _e as getVueyeTablePropDefaults,
+  re as humanize,
+  pe as isPrimitive,
+  W as leafCount,
+  x as nestedObjectTransformer,
+  ue as paginateRows,
+  Bt as useBodyRows,
+  Tt as useHeaderKeys,
+  Lt as useHeaders,
+  Rt as usePagination,
+  Mt as useSelection
 };