@dazzadev/vuetify-datatable 1.0.4 → 1.1.0

package/README.md

@@ -1,6 +1,6 @@
 # @dazzadev/vuetify-datatable
 
-Reusable server-side DataTable component for Vuetify 3. Includes action buttons (view, edit, delete), configurable icons, and a built-in delete confirmation dialog.
+Reusable server-side DataTable component for Vuetify 3 and 4. Includes action buttons (view, edit, delete), configurable icons, and a built-in delete confirmation dialog.
 
 ## Installation
 
@@ -44,6 +44,35 @@ import { DataTable } from "@dazzadev/vuetify-datatable";
 </template>
 ```
 
+## Row Selection
+
+Set `showSelect` and bind `v-model` to hold the selected keys. **The key comes from `itemValue`**,
+so point it at whatever your bulk endpoint expects — not necessarily `id`.
+
+```vue
+<DataTable
+    v-model="selected"
+    :headers="headers"
+    :items="items"
+    :totalItems="totalItems"
+    item-value="uuid"
+    show-select
+    @onLoadData="loadData"
+>
+    <template #selection-actions="{ count, clear }">
+        <div v-if="count" class="d-flex align-center ga-2 pa-2">
+            <span>{{ count }} selected</span>
+            <v-btn size="small" @click="applyToSelection">Apply</v-btn>
+            <v-btn size="small" variant="text" @click="clear">Clear</v-btn>
+        </div>
+    </template>
+</DataTable>
+```
+
+`selectStrategy` decides what the header checkbox does: `page` marks the current page only, `all`
+marks every loaded row, `single` allows one row at a time. With server-side pagination `page` is
+usually what you want — the table only holds the rows it has fetched.
+
 ## Icon Configuration
 
 Icons can be configured at 4 levels of priority (highest to lowest):
@@ -116,6 +145,9 @@ If no configuration is provided, the component uses Material Design Icons (inclu
 | `itemValue`                    | `string`        | `'id'`                     | Unique item identifier key             |
 | `tableClass`                   | `string`        | `'border rounded-md mt-5'` | CSS class for the table                |
 | `showExpand`                   | `boolean`       | `false`                    | Show expandable rows                   |
+| `showSelect`                   | `boolean`       | `false`                    | Show a checkbox column for row selection |
+| `selectStrategy`               | `'page' \| 'all' \| 'single'` | `'page'`       | How the header checkbox selects rows   |
+| `modelValue`                   | `(string \| number)[]` | `[]`               | Selected keys, taken from `itemValue`. Use with `v-model` |
 | `showViewButton`               | `boolean`       | `false`                    | Show view action button                |
 | `showEditButton`               | `boolean`       | `true`                     | Show edit action button                |
 | `showDeleteButton`             | `boolean`       | `true`                     | Show delete action button              |
@@ -141,6 +173,7 @@ If no configuration is provided, the component uses Material Design Icons (inclu
 | `editItem`   | `T`              | Triggered when edit button is clicked            |
 | `deleteItem` | `T`              | Triggered when delete is confirmed               |
 | `viewItem`   | `T`              | Triggered when view button is clicked            |
+| `update:modelValue` | `(string \| number)[]` | Triggered when the selection changes    |
 
 ## Slots
 
@@ -155,11 +188,15 @@ If no configuration is provided, the component uses Material Design Icons (inclu
 | `edit-icon`              | Custom edit icon                           |
 | `delete-icon`            | Custom delete icon                         |
 | `item.tfoot`             | Table footer content                       |
+| `selection-actions`      | Bar above the table, for bulk actions. Only rendered when `showSelect`. Receives `{ selected, count, clear }` |
 
 ## Peer Dependencies
 
 - `vue` >= 3.3
-- `vuetify` >= 3.0
+- `vuetify` 3.x or 4.x
+
+The component only uses the `v-data-table-server` API that is common to both major
+versions, so a single build works with either.
 
 ## License
 

package/dist/components/DataTable.vue.d.ts

@@ -5,7 +5,8 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         readonly onEditItem?: ((...args: any[]) => any) | undefined;
         readonly onDeleteItem?: ((...args: any[]) => any) | undefined;
         readonly onViewItem?: ((...args: any[]) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onOnLoadData" | "onEditItem" | "onDeleteItem" | "onViewItem"> & {
+        readonly "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onOnLoadData" | "onEditItem" | "onDeleteItem" | "onViewItem" | "onUpdate:modelValue"> & {
         tableClass?: string;
         headers?: TableHeader[];
         items?: T[];
@@ -15,6 +16,9 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         itemsPerPage?: number;
         search?: string;
         showExpand?: boolean;
+        showSelect?: boolean;
+        selectStrategy?: "page" | "all" | "single";
+        modelValue?: (string | number)[];
         showEditButton?: boolean;
         showDeleteButton?: boolean;
         showViewButton?: boolean;
@@ -49,6 +53,12 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
             columns: any;
             item: any;
         }) => any) | undefined;
+    } & {
+        'selection-actions'?: (props: {
+            selected: (string | number)[];
+            count: number;
+            clear: () => void;
+        }) => any;
     } & {
         'before-actions'?: (props: {
             item: any;
@@ -66,7 +76,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     } & {
         'item.tfoot'?: (props: {}) => any;
     };
-    emit: (event: "onLoadData" | "editItem" | "deleteItem" | "viewItem", ...args: any[]) => void;
+    emit: (event: "onLoadData" | "editItem" | "deleteItem" | "viewItem" | "update:modelValue", ...args: any[]) => void;
 }>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }> & {

package/dist/vuetify-datatable.js

@@ -1,49 +1,49 @@
-import { defineComponent as R, computed as $, resolveComponent as y, openBlock as g, createBlock as x, withCtx as n, createVNode as r, createTextVNode as T, toDisplayString as P, renderSlot as h, createCommentVNode as L, inject as ee, ref as V, onMounted as te, watch as z, createElementBlock as oe, Fragment as ne, normalizeClass as ae, createSlots as le, createElementVNode as ie, mergeProps as M, resolveDynamicComponent as F, renderList as se } from "vue";
-function de(e) {
+import { defineComponent as G, computed as I, resolveComponent as w, openBlock as v, createBlock as y, withCtx as n, createVNode as r, createTextVNode as T, toDisplayString as P, renderSlot as b, createCommentVNode as N, inject as te, ref as M, onMounted as oe, watch as j, createElementBlock as ne, Fragment as ae, normalizeClass as le, createSlots as se, createElementVNode as ie, mergeProps as S, resolveDynamicComponent as q, renderList as de } from "vue";
+function ce(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var j = { exports: {} }, U;
+var L = { exports: {} }, R;
 function re() {
-  if (U) return j.exports;
-  U = 1;
-  function e(p, l = 100, u = {}) {
-    if (typeof p != "function")
-      throw new TypeError(`Expected the first parameter to be a function, got \`${typeof p}\`.`);
+  if (R) return L.exports;
+  R = 1;
+  function e(h, l = 100, c = {}) {
+    if (typeof h != "function")
+      throw new TypeError(`Expected the first parameter to be a function, got \`${typeof h}\`.`);
     if (l < 0)
       throw new RangeError("`wait` must not be negative.");
-    const { immediate: d } = typeof u == "boolean" ? { immediate: u } : u;
-    let m, B, a, C, w;
-    function k() {
-      const v = m, D = B;
-      return m = void 0, B = void 0, w = p.apply(v, D), w;
+    const { immediate: i } = typeof c == "boolean" ? { immediate: c } : c;
+    let f, p, s, B, x;
+    function C() {
+      const d = f, D = p;
+      return f = void 0, p = void 0, x = h.apply(d, D), x;
     }
-    function f() {
-      const v = Date.now() - C;
-      v < l && v >= 0 ? a = setTimeout(f, l - v) : (a = void 0, d || (w = k()));
+    function k() {
+      const d = Date.now() - B;
+      d < l && d >= 0 ? s = setTimeout(k, l - d) : (s = void 0, i || (x = C()));
     }
-    const i = function(...v) {
-      if (m && this !== m && Object.getPrototypeOf(this) === Object.getPrototypeOf(m))
+    const u = function(...d) {
+      if (f && this !== f && Object.getPrototypeOf(this) === Object.getPrototypeOf(f))
         throw new Error("Debounced method called with different contexts of the same prototype.");
-      m = this, B = v, C = Date.now();
-      const D = d && !a;
-      return a || (a = setTimeout(f, l)), D && (w = k()), w;
+      f = this, p = d, B = Date.now();
+      const D = i && !s;
+      return s || (s = setTimeout(k, l)), D && (x = C()), x;
     };
-    return Object.defineProperty(i, "isPending", {
+    return Object.defineProperty(u, "isPending", {
       get() {
-        return a !== void 0;
+        return s !== void 0;
       }
-    }), i.clear = () => {
-      a && (clearTimeout(a), a = void 0);
-    }, i.flush = () => {
-      a && i.trigger();
-    }, i.trigger = () => {
-      w = k(), i.clear();
-    }, i;
+    }), u.clear = () => {
+      s && (clearTimeout(s), s = void 0);
+    }, u.flush = () => {
+      s && u.trigger();
+    }, u.trigger = () => {
+      x = C(), u.clear();
+    }, u;
   }
-  return j.exports.debounce = e, j.exports = e, j.exports;
+  return L.exports.debounce = e, L.exports = e, L.exports;
 }
-var ce = /* @__PURE__ */ re();
-const ue = /* @__PURE__ */ de(ce), me = /* @__PURE__ */ R({
+var ue = /* @__PURE__ */ re();
+const me = /* @__PURE__ */ ce(ue), fe = /* @__PURE__ */ G({
   __name: "ConfirmationModal",
   props: {
     show: Boolean,
@@ -54,65 +54,65 @@ const ue = /* @__PURE__ */ de(ce), me = /* @__PURE__ */ R({
   },
   emits: ["close", "confirm"],
   setup(e) {
-    const p = e, l = $({
-      get: () => p.show,
+    const h = e, l = I({
+      get: () => h.show,
       set: () => {
       }
     });
-    return (u, d) => {
-      const m = y("v-card-title"), B = y("v-card-text"), a = y("v-spacer"), C = y("v-btn"), w = y("v-card-actions"), k = y("v-card"), f = y("v-dialog");
-      return g(), x(f, {
+    return (c, i) => {
+      const f = w("v-card-title"), p = w("v-card-text"), s = w("v-spacer"), B = w("v-btn"), x = w("v-card-actions"), C = w("v-card"), k = w("v-dialog");
+      return v(), y(k, {
         modelValue: l.value,
-        "onUpdate:modelValue": d[2] || (d[2] = (i) => l.value = i),
+        "onUpdate:modelValue": i[2] || (i[2] = (u) => l.value = u),
         "max-width": "500px",
         persistent: "",
         "no-click-animation": ""
       }, {
         default: n(() => [
-          r(k, null, {
+          r(C, null, {
             default: n(() => [
-              r(m, { class: "text-h5 text-center py-6" }, {
+              r(f, { class: "text-h5 text-center py-6" }, {
                 default: n(() => [
                   T(P(e.title), 1)
                 ]),
                 _: 1
               }),
-              e.description ? (g(), x(B, {
+              e.description ? (v(), y(p, {
                 key: 0,
                 class: "text-center px-0 py-0"
               }, {
                 default: n(() => [
                   T(P(e.description) + " ", 1),
-                  h(u.$slots, "description")
+                  b(c.$slots, "description")
                 ]),
                 _: 3
-              })) : L("", !0),
-              r(w, null, {
+              })) : N("", !0),
+              r(x, null, {
                 default: n(() => [
-                  r(a),
-                  r(C, {
+                  r(s),
+                  r(B, {
                     color: "error",
                     variant: "flat",
                     dark: "",
-                    onClick: d[0] || (d[0] = (i) => u.$emit("close"))
+                    onClick: i[0] || (i[0] = (u) => c.$emit("close"))
                   }, {
                     default: n(() => [
                       T(P(e.cancelButtonText), 1)
                     ]),
                     _: 1
                   }),
-                  r(C, {
+                  r(B, {
                     color: "success",
                     variant: "flat",
                     dark: "",
-                    onClick: d[1] || (d[1] = (i) => u.$emit("confirm"))
+                    onClick: i[1] || (i[1] = (u) => c.$emit("confirm"))
                   }, {
                     default: n(() => [
                       T(P(e.confirmButtonText), 1)
                     ]),
                     _: 1
                   }),
-                  r(a)
+                  r(s)
                 ]),
                 _: 1
               })
@@ -124,15 +124,15 @@ const ue = /* @__PURE__ */ de(ce), me = /* @__PURE__ */ R({
       }, 8, ["modelValue"]);
     };
   }
-}), G = Symbol("DataTableConfig");
-function ge(e) {
+}), K = Symbol("DataTableConfig");
+function be(e) {
   return {
-    install(p) {
-      p.provide(G, e);
+    install(h) {
+      h.provide(K, e);
     }
   };
 }
-const fe = /* @__PURE__ */ R({
+const ve = /* @__PURE__ */ G({
   __name: "DataTable",
   props: {
     tableClass: {},
@@ -144,6 +144,9 @@ const fe = /* @__PURE__ */ R({
     itemsPerPage: { default: 10 },
     search: {},
     showExpand: { type: Boolean, default: !1 },
+    showSelect: { type: Boolean, default: !1 },
+    selectStrategy: { default: "page" },
+    modelValue: { default: () => [] },
     showEditButton: { type: Boolean, default: !0 },
     showDeleteButton: { type: Boolean, default: !0 },
     showViewButton: { type: Boolean, default: !1 },
@@ -161,118 +164,126 @@ const fe = /* @__PURE__ */ R({
     disableEdit: {},
     disableDelete: {}
   },
-  emits: ["onLoadData", "editItem", "deleteItem", "viewItem"],
-  setup(e, { emit: p }) {
-    const l = e, u = p, d = ee(G, { icons: {} }), m = $(() => {
+  emits: ["onLoadData", "editItem", "deleteItem", "viewItem", "update:modelValue"],
+  setup(e, { emit: h }) {
+    const l = e, c = h, i = te(K, { icons: {} }), f = I(() => {
       var t;
-      return l.viewIcon ?? ((t = d.icons) == null ? void 0 : t.view) ?? "mdi-eye-outline";
-    }), B = $(() => {
+      return l.viewIcon ?? ((t = i.icons) == null ? void 0 : t.view) ?? "mdi-eye-outline";
+    }), p = I(() => {
       var t;
-      return l.editIcon ?? ((t = d.icons) == null ? void 0 : t.edit) ?? "mdi-pencil-outline";
-    }), a = $(() => {
+      return l.editIcon ?? ((t = i.icons) == null ? void 0 : t.edit) ?? "mdi-pencil-outline";
+    }), s = I(() => {
       var t;
-      return l.deleteIcon ?? ((t = d.icons) == null ? void 0 : t.delete) ?? "mdi-trash-can-outline";
-    }), C = $(() => d.iconProps ?? {}), w = $(() => l.tableClass ?? d.tableClass ?? "border rounded-md");
-    function k(t) {
+      return l.deleteIcon ?? ((t = i.icons) == null ? void 0 : t.delete) ?? "mdi-trash-can-outline";
+    }), B = I(() => i.iconProps ?? {}), x = I(() => l.tableClass ?? i.tableClass ?? "border rounded-md");
+    function C(t) {
       return typeof t != "string";
     }
-    const f = V(l.itemsPerPage), i = V([]), v = V(1), D = V(null), O = V(!1), K = $(() => {
+    const k = I({
+      get: () => l.modelValue,
+      set: (t) => c("update:modelValue", t)
+    });
+    function u() {
+      c("update:modelValue", []);
+    }
+    const d = M(l.itemsPerPage), D = M([]), O = M(1), A = M(null), z = M(!1), Y = I(() => {
       var t;
       return ((t = l.headers) == null ? void 0 : t.filter(
-        (s) => s.key !== "actions" && s.key !== "expanded-row" && s.key !== "data-table-expand"
+        (a) => a.key !== "actions" && a.key !== "expanded-row" && a.key !== "data-table-expand"
       )) || [];
     });
-    te(() => {
-      S({
-        page: v.value,
-        itemsPerPage: f.value
+    oe(() => {
+      E({
+        page: O.value,
+        itemsPerPage: d.value
       });
     });
-    const Y = (t) => {
-      D.value = t, O.value = !0;
-    }, H = () => {
-      D.value = null, O.value = !1;
-    }, J = (t) => {
-      u("editItem", t);
+    const H = (t) => {
+      A.value = t, z.value = !0;
+    }, J = () => {
+      A.value = null, z.value = !1;
     }, Q = (t) => {
-      u("viewItem", t);
-    }, W = () => {
-      u("deleteItem", D.value), O.value = !1;
-    }, S = ({ page: t, itemsPerPage: s }) => {
-      const E = i.value.map((I) => ({
-        column: I.key,
-        direction: I.order
+      c("editItem", t);
+    }, W = (t) => {
+      c("viewItem", t);
+    }, X = () => {
+      c("deleteItem", A.value), z.value = !1;
+    }, E = ({ page: t, itemsPerPage: a }) => {
+      const V = D.value.map(($) => ({
+        column: $.key,
+        direction: $.order
       }));
-      u("onLoadData", {
+      c("onLoadData", {
         page: t,
-        itemsPerPage: s,
+        itemsPerPage: a,
         search: l.search,
-        sortBy: E
+        sortBy: V
       });
     };
-    function X() {
-      S({
+    function Z() {
+      E({
         page: 1,
-        itemsPerPage: f.value
+        itemsPerPage: d.value
       });
     }
-    const q = ue(X, 400), Z = () => {
-      q();
-    };
-    return z(
+    const _ = me(Z, 400);
+    return j(
       () => l.search,
-      (t, s) => {
-        t !== s && q();
+      (t, a) => {
+        t !== a && _();
       }
-    ), z(f, (t, s) => {
-      t !== s && S({
+    ), j(d, (t, a) => {
+      t !== a && E({
         page: 1,
         itemsPerPage: t
       });
-    }), z(i, () => {
-      S({
+    }), j(D, () => {
+      E({
         page: 1,
-        itemsPerPage: f.value
+        itemsPerPage: d.value
       });
-    }), z(v, (t) => {
-      S({
+    }), j(O, (t) => {
+      E({
         page: t,
-        itemsPerPage: f.value
+        itemsPerPage: d.value
       });
-    }), (t, s) => {
-      const E = y("v-icon"), I = y("v-btn"), N = y("v-tooltip"), _ = y("v-data-table-server");
-      return g(), oe(ne, null, [
-        r(_, {
+    }), (t, a) => {
+      const V = w("v-icon"), $ = w("v-btn"), F = w("v-tooltip"), ee = w("v-data-table-server");
+      return v(), ne(ae, null, [
+        r(ee, {
           headers: e.headers,
           items: e.items,
           loading: e.loading,
           "items-length": e.totalItems,
-          "items-per-page": f.value,
-          "onUpdate:itemsPerPage": s[0] || (s[0] = (o) => f.value = o),
+          "items-per-page": d.value,
+          "onUpdate:itemsPerPage": a[0] || (a[0] = (o) => d.value = o),
           search: e.search,
-          onSearch: Z,
-          "sort-by": i.value,
-          "onUpdate:sortBy": s[1] || (s[1] = (o) => i.value = o),
-          page: v.value,
-          "onUpdate:page": s[2] || (s[2] = (o) => v.value = o),
+          "sort-by": D.value,
+          "onUpdate:sortBy": a[1] || (a[1] = (o) => D.value = o),
+          page: O.value,
+          "onUpdate:page": a[2] || (a[2] = (o) => O.value = o),
           "item-value": e.itemValue,
           "show-expand": e.showExpand,
-          class: ae(w.value)
-        }, le({
-          "item.data-table-expand": n(({ internalItem: o, isExpanded: c, toggleExpand: b }) => [
-            h(t.$slots, "item.data-table-expand", {
+          "show-select": e.showSelect,
+          "select-strategy": e.selectStrategy,
+          modelValue: k.value,
+          "onUpdate:modelValue": a[3] || (a[3] = (o) => k.value = o),
+          class: le(x.value)
+        }, se({
+          "item.data-table-expand": n(({ internalItem: o, isExpanded: m, toggleExpand: g }) => [
+            b(t.$slots, "item.data-table-expand", {
               internalItem: o,
-              isExpanded: c,
-              toggleExpand: b
+              isExpanded: m,
+              toggleExpand: g
             }, () => [
-              r(I, {
-                onClick: (A) => b(o),
+              r($, {
+                onClick: (U) => g(o),
                 rounded: ""
               }, {
                 default: n(() => [
-                  r(E, null, {
+                  r(V, null, {
                     default: n(() => [
-                      T(P(c(o) ? "mdi-chevron-up" : "mdi-chevron-down"), 1)
+                      T(P(m(o) ? "mdi-chevron-up" : "mdi-chevron-down"), 1)
                     ]),
                     _: 2
                   }, 1024)
@@ -281,41 +292,41 @@ const fe = /* @__PURE__ */ R({
               }, 1032, ["onClick"])
             ])
           ]),
-          "expanded-row": n(({ columns: o, item: c }) => [
-            h(t.$slots, "expanded-row", {
+          "expanded-row": n(({ columns: o, item: m }) => [
+            b(t.$slots, "expanded-row", {
               columns: o,
-              item: c
+              item: m
             })
           ]),
           "item.actions": n(({ item: o }) => [
-            h(t.$slots, "before-actions", { item: o }),
-            e.showViewButton ? (g(), x(N, {
+            b(t.$slots, "before-actions", { item: o }),
+            e.showViewButton ? (v(), y(F, {
               key: 0,
               text: e.viewButtonText
             }, {
-              activator: n(({ props: c }) => {
-                var b;
+              activator: n(({ props: m }) => {
+                var g;
                 return [
-                  r(I, M({
+                  r($, S({
                     icon: "",
                     flat: "",
-                    onClick: (A) => Q(o)
-                  }, c, {
-                    disabled: (b = e.disableView) == null ? void 0 : b.call(e, o)
+                    onClick: (U) => W(o)
+                  }, m, {
+                    disabled: (g = e.disableView) == null ? void 0 : g.call(e, o)
                   }), {
                     default: n(() => [
-                      h(t.$slots, "view-icon", {}, () => [
-                        k(m.value) ? (g(), x(F(m.value), M({
+                      b(t.$slots, "view-icon", {}, () => [
+                        C(f.value) ? (v(), y(q(f.value), S({
                           key: 0,
                           size: 20,
                           class: "text-info"
-                        }, C.value), null, 16)) : (g(), x(E, {
+                        }, B.value), null, 16)) : (v(), y(V, {
                           key: 1,
                           size: "20",
                           class: "text-info"
                         }, {
                           default: n(() => [
-                            T(P(m.value), 1)
+                            T(P(f.value), 1)
                           ]),
                           _: 1
                         }))
@@ -326,34 +337,34 @@ const fe = /* @__PURE__ */ R({
                 ];
               }),
               _: 2
-            }, 1032, ["text"])) : L("", !0),
-            e.showEditButton ? (g(), x(N, {
+            }, 1032, ["text"])) : N("", !0),
+            e.showEditButton ? (v(), y(F, {
               key: 1,
               text: e.editButtonText
             }, {
-              activator: n(({ props: c }) => {
-                var b;
+              activator: n(({ props: m }) => {
+                var g;
                 return [
-                  r(I, M({
+                  r($, S({
                     icon: "",
                     flat: "",
-                    onClick: (A) => J(o)
-                  }, c, {
-                    disabled: (b = e.disableEdit) == null ? void 0 : b.call(e, o)
+                    onClick: (U) => Q(o)
+                  }, m, {
+                    disabled: (g = e.disableEdit) == null ? void 0 : g.call(e, o)
                   }), {
                     default: n(() => [
-                      h(t.$slots, "edit-icon", {}, () => [
-                        k(B.value) ? (g(), x(F(B.value), M({
+                      b(t.$slots, "edit-icon", {}, () => [
+                        C(p.value) ? (v(), y(q(p.value), S({
                           key: 0,
                           size: 20,
                           class: "text-primary"
-                        }, C.value), null, 16)) : (g(), x(E, {
+                        }, B.value), null, 16)) : (v(), y(V, {
                           key: 1,
                           size: "20",
                           class: "text-primary"
                         }, {
                           default: n(() => [
-                            T(P(B.value), 1)
+                            T(P(p.value), 1)
                           ]),
                           _: 1
                         }))
@@ -364,34 +375,34 @@ const fe = /* @__PURE__ */ R({
                 ];
               }),
               _: 2
-            }, 1032, ["text"])) : L("", !0),
-            e.showDeleteButton ? (g(), x(N, {
+            }, 1032, ["text"])) : N("", !0),
+            e.showDeleteButton ? (v(), y(F, {
               key: 2,
               text: e.deleteButtonText
             }, {
-              activator: n(({ props: c }) => {
-                var b;
+              activator: n(({ props: m }) => {
+                var g;
                 return [
-                  r(I, M({
+                  r($, S({
                     icon: "",
                     flat: "",
-                    onClick: (A) => Y(o)
-                  }, c, {
-                    disabled: (b = e.disableDelete) == null ? void 0 : b.call(e, o)
+                    onClick: (U) => H(o)
+                  }, m, {
+                    disabled: (g = e.disableDelete) == null ? void 0 : g.call(e, o)
                   }), {
                     default: n(() => [
-                      h(t.$slots, "delete-icon", {}, () => [
-                        k(a.value) ? (g(), x(F(a.value), M({
+                      b(t.$slots, "delete-icon", {}, () => [
+                        C(s.value) ? (v(), y(q(s.value), S({
                           key: 0,
                           size: 20,
                           class: "text-error"
-                        }, C.value), null, 16)) : (g(), x(E, {
+                        }, B.value), null, 16)) : (v(), y(V, {
                           key: 1,
                           size: "20",
                           class: "text-error"
                         }, {
                           default: n(() => [
-                            T(P(a.value), 1)
+                            T(P(s.value), 1)
                           ]),
                           _: 1
                         }))
@@ -402,45 +413,56 @@ const fe = /* @__PURE__ */ R({
                 ];
               }),
               _: 2
-            }, 1032, ["text"])) : L("", !0),
-            h(t.$slots, "after-actions", { item: o })
+            }, 1032, ["text"])) : N("", !0),
+            b(t.$slots, "after-actions", { item: o })
           ]),
           tfoot: n(() => [
             ie("tfoot", null, [
-              h(t.$slots, "item.tfoot")
+              b(t.$slots, "item.tfoot")
             ])
           ]),
           _: 2
         }, [
-          se(K.value, (o) => ({
+          e.showSelect ? {
+            name: "top",
+            fn: n(() => [
+              b(t.$slots, "selection-actions", {
+                selected: k.value,
+                count: k.value.length,
+                clear: u
+              })
+            ]),
+            key: "0"
+          } : void 0,
+          de(Y.value, (o) => ({
             name: `item.${o.key}`,
-            fn: n(({ item: c }) => [
-              h(t.$slots, `item.${o.key}`, { item: c }, () => [
-                T(P(c[o.key]), 1)
+            fn: n(({ item: m }) => [
+              b(t.$slots, `item.${o.key}`, { item: m }, () => [
+                T(P(m[o.key]), 1)
               ])
             ])
           }))
-        ]), 1032, ["headers", "items", "loading", "items-length", "items-per-page", "search", "sort-by", "page", "item-value", "show-expand", "class"]),
-        r(me, {
-          show: O.value,
+        ]), 1032, ["headers", "items", "loading", "items-length", "items-per-page", "search", "sort-by", "page", "item-value", "show-expand", "show-select", "select-strategy", "modelValue", "class"]),
+        r(fe, {
+          show: z.value,
           title: e.deleteModalTitle,
           description: e.deleteModalMessage,
           confirmButtonText: e.deleteModalConfirmButtonText,
           cancelButtonText: e.deleteModalCancelButtonText,
-          onClose: H,
-          onConfirm: W
+          onClose: J,
+          onConfirm: X
         }, null, 8, ["show", "title", "description", "confirmButtonText", "cancelButtonText"])
       ], 64);
     };
   }
-}), be = {
+}), ye = {
   install(e) {
-    e.component("DataTable", fe);
+    e.component("DataTable", ve);
   }
 };
 export {
-  G as DATA_TABLE_CONFIG_KEY,
-  fe as DataTable,
-  ge as createDataTableConfig,
-  be as default
+  K as DATA_TABLE_CONFIG_KEY,
+  ve as DataTable,
+  be as createDataTableConfig,
+  ye as default
 };

package/dist/vuetify-datatable.umd.cjs

@@ -1 +1 @@
-(function(C,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(C=typeof globalThis<"u"?globalThis:C||self,e(C.VuetifyDatatable={},C.Vue))})(this,(function(C,e){"use strict";function M(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var D={exports:{}},I;function O(){if(I)return D.exports;I=1;function t(h,l=100,s={}){if(typeof h!="function")throw new TypeError(`Expected the first parameter to be a function, got \`${typeof h}\`.`);if(l<0)throw new RangeError("`wait` must not be negative.");const{immediate:c}=typeof s=="boolean"?{immediate:s}:s;let m,u,a,w,g;function y(){const p=m,B=u;return m=void 0,u=void 0,g=h.apply(p,B),g}function f(){const p=Date.now()-w;p<l&&p>=0?a=setTimeout(f,l-p):(a=void 0,c||(g=y()))}const i=function(...p){if(m&&this!==m&&Object.getPrototypeOf(this)===Object.getPrototypeOf(m))throw new Error("Debounced method called with different contexts of the same prototype.");m=this,u=p,w=Date.now();const B=c&&!a;return a||(a=setTimeout(f,l)),B&&(g=y()),g};return Object.defineProperty(i,"isPending",{get(){return a!==void 0}}),i.clear=()=>{a&&(clearTimeout(a),a=void 0)},i.flush=()=>{a&&i.trigger()},i.trigger=()=>{g=y(),i.clear()},i}return D.exports.debounce=t,D.exports=t,D.exports}var j=O();const A=M(j),z=e.defineComponent({__name:"ConfirmationModal",props:{show:Boolean,title:String,description:String,confirmButtonText:String,cancelButtonText:String},emits:["close","confirm"],setup(t){const h=t,l=e.computed({get:()=>h.show,set:()=>{}});return(s,c)=>{const m=e.resolveComponent("v-card-title"),u=e.resolveComponent("v-card-text"),a=e.resolveComponent("v-spacer"),w=e.resolveComponent("v-btn"),g=e.resolveComponent("v-card-actions"),y=e.resolveComponent("v-card"),f=e.resolveComponent("v-dialog");return e.openBlock(),e.createBlock(f,{modelValue:l.value,"onUpdate:modelValue":c[2]||(c[2]=i=>l.value=i),"max-width":"500px",persistent:"","no-click-animation":""},{default:e.withCtx(()=>[e.createVNode(y,null,{default:e.withCtx(()=>[e.createVNode(m,{class:"text-h5 text-center py-6"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),_:1}),t.description?(e.openBlock(),e.createBlock(u,{key:0,class:"text-center px-0 py-0"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.description)+" ",1),e.renderSlot(s.$slots,"description")]),_:3})):e.createCommentVNode("",!0),e.createVNode(g,null,{default:e.withCtx(()=>[e.createVNode(a),e.createVNode(w,{color:"error",variant:"flat",dark:"",onClick:c[0]||(c[0]=i=>s.$emit("close"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.cancelButtonText),1)]),_:1}),e.createVNode(w,{color:"success",variant:"flat",dark:"",onClick:c[1]||(c[1]=i=>s.$emit("confirm"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.confirmButtonText),1)]),_:1}),e.createVNode(a)]),_:1})]),_:3})]),_:3},8,["modelValue"])}}}),P=Symbol("DataTableConfig");function L(t){return{install(h){h.provide(P,t)}}}const $=e.defineComponent({__name:"DataTable",props:{tableClass:{},headers:{default:()=>[]},items:{default:()=>[]},loading:{type:Boolean,default:!1},itemValue:{default:"id"},totalItems:{default:0},itemsPerPage:{default:10},search:{},showExpand:{type:Boolean,default:!1},showEditButton:{type:Boolean,default:!0},showDeleteButton:{type:Boolean,default:!0},showViewButton:{type:Boolean,default:!1},viewButtonText:{},deleteButtonText:{},deleteModalTitle:{},deleteModalMessage:{},deleteModalConfirmButtonText:{},deleteModalCancelButtonText:{},editButtonText:{},viewIcon:{},editIcon:{},deleteIcon:{},disableView:{},disableEdit:{},disableDelete:{}},emits:["onLoadData","editItem","deleteItem","viewItem"],setup(t,{emit:h}){const l=t,s=h,c=e.inject(P,{icons:{}}),m=e.computed(()=>{var o;return l.viewIcon??((o=c.icons)==null?void 0:o.view)??"mdi-eye-outline"}),u=e.computed(()=>{var o;return l.editIcon??((o=c.icons)==null?void 0:o.edit)??"mdi-pencil-outline"}),a=e.computed(()=>{var o;return l.deleteIcon??((o=c.icons)==null?void 0:o.delete)??"mdi-trash-can-outline"}),w=e.computed(()=>c.iconProps??{}),g=e.computed(()=>l.tableClass??c.tableClass??"border rounded-md");function y(o){return typeof o!="string"}const f=e.ref(l.itemsPerPage),i=e.ref([]),p=e.ref(1),B=e.ref(null),V=e.ref(!1),q=e.computed(()=>{var o;return((o=l.headers)==null?void 0:o.filter(r=>r.key!=="actions"&&r.key!=="expanded-row"&&r.key!=="data-table-expand"))||[]});e.onMounted(()=>{T({page:p.value,itemsPerPage:f.value})});const U=o=>{B.value=o,V.value=!0},R=()=>{B.value=null,V.value=!1},G=o=>{s("editItem",o)},K=o=>{s("viewItem",o)},Y=()=>{s("deleteItem",B.value),V.value=!1},T=({page:o,itemsPerPage:r})=>{const k=i.value.map(b=>({column:b.key,direction:b.order}));s("onLoadData",{page:o,itemsPerPage:r,search:l.search,sortBy:k})};function H(){T({page:1,itemsPerPage:f.value})}const E=A(H,400),J=()=>{E()};return e.watch(()=>l.search,(o,r)=>{o!==r&&E()}),e.watch(f,(o,r)=>{o!==r&&T({page:1,itemsPerPage:o})}),e.watch(i,()=>{T({page:1,itemsPerPage:f.value})}),e.watch(p,o=>{T({page:o,itemsPerPage:f.value})}),(o,r)=>{const k=e.resolveComponent("v-icon"),b=e.resolveComponent("v-btn"),S=e.resolveComponent("v-tooltip"),Q=e.resolveComponent("v-data-table-server");return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(Q,{headers:t.headers,items:t.items,loading:t.loading,"items-length":t.totalItems,"items-per-page":f.value,"onUpdate:itemsPerPage":r[0]||(r[0]=n=>f.value=n),search:t.search,onSearch:J,"sort-by":i.value,"onUpdate:sortBy":r[1]||(r[1]=n=>i.value=n),page:p.value,"onUpdate:page":r[2]||(r[2]=n=>p.value=n),"item-value":t.itemValue,"show-expand":t.showExpand,class:e.normalizeClass(g.value)},e.createSlots({"item.data-table-expand":e.withCtx(({internalItem:n,isExpanded:d,toggleExpand:x})=>[e.renderSlot(o.$slots,"item.data-table-expand",{internalItem:n,isExpanded:d,toggleExpand:x},()=>[e.createVNode(b,{onClick:N=>x(n),rounded:""},{default:e.withCtx(()=>[e.createVNode(k,null,{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(d(n)?"mdi-chevron-up":"mdi-chevron-down"),1)]),_:2},1024)]),_:2},1032,["onClick"])])]),"expanded-row":e.withCtx(({columns:n,item:d})=>[e.renderSlot(o.$slots,"expanded-row",{columns:n,item:d})]),"item.actions":e.withCtx(({item:n})=>[e.renderSlot(o.$slots,"before-actions",{item:n}),t.showViewButton?(e.openBlock(),e.createBlock(S,{key:0,text:t.viewButtonText},{activator:e.withCtx(({props:d})=>{var x;return[e.createVNode(b,e.mergeProps({icon:"",flat:"",onClick:N=>K(n)},d,{disabled:(x=t.disableView)==null?void 0:x.call(t,n)}),{default:e.withCtx(()=>[e.renderSlot(o.$slots,"view-icon",{},()=>[y(m.value)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(m.value),e.mergeProps({key:0,size:20,class:"text-info"},w.value),null,16)):(e.openBlock(),e.createBlock(k,{key:1,size:"20",class:"text-info"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(m.value),1)]),_:1}))])]),_:3},16,["onClick","disabled"])]}),_:2},1032,["text"])):e.createCommentVNode("",!0),t.showEditButton?(e.openBlock(),e.createBlock(S,{key:1,text:t.editButtonText},{activator:e.withCtx(({props:d})=>{var x;return[e.createVNode(b,e.mergeProps({icon:"",flat:"",onClick:N=>G(n)},d,{disabled:(x=t.disableEdit)==null?void 0:x.call(t,n)}),{default:e.withCtx(()=>[e.renderSlot(o.$slots,"edit-icon",{},()=>[y(u.value)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(u.value),e.mergeProps({key:0,size:20,class:"text-primary"},w.value),null,16)):(e.openBlock(),e.createBlock(k,{key:1,size:"20",class:"text-primary"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(u.value),1)]),_:1}))])]),_:3},16,["onClick","disabled"])]}),_:2},1032,["text"])):e.createCommentVNode("",!0),t.showDeleteButton?(e.openBlock(),e.createBlock(S,{key:2,text:t.deleteButtonText},{activator:e.withCtx(({props:d})=>{var x;return[e.createVNode(b,e.mergeProps({icon:"",flat:"",onClick:N=>U(n)},d,{disabled:(x=t.disableDelete)==null?void 0:x.call(t,n)}),{default:e.withCtx(()=>[e.renderSlot(o.$slots,"delete-icon",{},()=>[y(a.value)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.value),e.mergeProps({key:0,size:20,class:"text-error"},w.value),null,16)):(e.openBlock(),e.createBlock(k,{key:1,size:"20",class:"text-error"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.value),1)]),_:1}))])]),_:3},16,["onClick","disabled"])]}),_:2},1032,["text"])):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"after-actions",{item:n})]),tfoot:e.withCtx(()=>[e.createElementVNode("tfoot",null,[e.renderSlot(o.$slots,"item.tfoot")])]),_:2},[e.renderList(q.value,n=>({name:`item.${n.key}`,fn:e.withCtx(({item:d})=>[e.renderSlot(o.$slots,`item.${n.key}`,{item:d},()=>[e.createTextVNode(e.toDisplayString(d[n.key]),1)])])}))]),1032,["headers","items","loading","items-length","items-per-page","search","sort-by","page","item-value","show-expand","class"]),e.createVNode(z,{show:V.value,title:t.deleteModalTitle,description:t.deleteModalMessage,confirmButtonText:t.deleteModalConfirmButtonText,cancelButtonText:t.deleteModalCancelButtonText,onClose:R,onConfirm:Y},null,8,["show","title","description","confirmButtonText","cancelButtonText"])],64)}}}),F={install(t){t.component("DataTable",$)}};C.DATA_TABLE_CONFIG_KEY=P,C.DataTable=$,C.createDataTableConfig=L,C.default=F,Object.defineProperties(C,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.VuetifyDatatable={},u.Vue))})(this,(function(u,e){"use strict";function O(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var V={exports:{}},E;function j(){if(E)return V.exports;E=1;function t(C,a=100,d={}){if(typeof C!="function")throw new TypeError(`Expected the first parameter to be a function, got \`${typeof C}\`.`);if(a<0)throw new RangeError("`wait` must not be negative.");const{immediate:r}=typeof d=="boolean"?{immediate:d}:d;let f,x,i,w,g;function h(){const c=f,B=x;return f=void 0,x=void 0,g=C.apply(c,B),g}function y(){const c=Date.now()-w;c<a&&c>=0?i=setTimeout(y,a-c):(i=void 0,r||(g=h()))}const s=function(...c){if(f&&this!==f&&Object.getPrototypeOf(this)===Object.getPrototypeOf(f))throw new Error("Debounced method called with different contexts of the same prototype.");f=this,x=c,w=Date.now();const B=r&&!i;return i||(i=setTimeout(y,a)),B&&(g=h()),g};return Object.defineProperty(s,"isPending",{get(){return i!==void 0}}),s.clear=()=>{i&&(clearTimeout(i),i=void 0)},s.flush=()=>{i&&s.trigger()},s.trigger=()=>{g=h(),s.clear()},s}return V.exports.debounce=t,V.exports=t,V.exports}var A=j();const z=O(A),L=e.defineComponent({__name:"ConfirmationModal",props:{show:Boolean,title:String,description:String,confirmButtonText:String,cancelButtonText:String},emits:["close","confirm"],setup(t){const C=t,a=e.computed({get:()=>C.show,set:()=>{}});return(d,r)=>{const f=e.resolveComponent("v-card-title"),x=e.resolveComponent("v-card-text"),i=e.resolveComponent("v-spacer"),w=e.resolveComponent("v-btn"),g=e.resolveComponent("v-card-actions"),h=e.resolveComponent("v-card"),y=e.resolveComponent("v-dialog");return e.openBlock(),e.createBlock(y,{modelValue:a.value,"onUpdate:modelValue":r[2]||(r[2]=s=>a.value=s),"max-width":"500px",persistent:"","no-click-animation":""},{default:e.withCtx(()=>[e.createVNode(h,null,{default:e.withCtx(()=>[e.createVNode(f,{class:"text-h5 text-center py-6"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),_:1}),t.description?(e.openBlock(),e.createBlock(x,{key:0,class:"text-center px-0 py-0"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.description)+" ",1),e.renderSlot(d.$slots,"description")]),_:3})):e.createCommentVNode("",!0),e.createVNode(g,null,{default:e.withCtx(()=>[e.createVNode(i),e.createVNode(w,{color:"error",variant:"flat",dark:"",onClick:r[0]||(r[0]=s=>d.$emit("close"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.cancelButtonText),1)]),_:1}),e.createVNode(w,{color:"success",variant:"flat",dark:"",onClick:r[1]||(r[1]=s=>d.$emit("confirm"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.confirmButtonText),1)]),_:1}),e.createVNode(i)]),_:1})]),_:3})]),_:3},8,["modelValue"])}}}),P=Symbol("DataTableConfig");function F(t){return{install(C){C.provide(P,t)}}}const M=e.defineComponent({__name:"DataTable",props:{tableClass:{},headers:{default:()=>[]},items:{default:()=>[]},loading:{type:Boolean,default:!1},itemValue:{default:"id"},totalItems:{default:0},itemsPerPage:{default:10},search:{},showExpand:{type:Boolean,default:!1},showSelect:{type:Boolean,default:!1},selectStrategy:{default:"page"},modelValue:{default:()=>[]},showEditButton:{type:Boolean,default:!0},showDeleteButton:{type:Boolean,default:!0},showViewButton:{type:Boolean,default:!1},viewButtonText:{},deleteButtonText:{},deleteModalTitle:{},deleteModalMessage:{},deleteModalConfirmButtonText:{},deleteModalCancelButtonText:{},editButtonText:{},viewIcon:{},editIcon:{},deleteIcon:{},disableView:{},disableEdit:{},disableDelete:{}},emits:["onLoadData","editItem","deleteItem","viewItem","update:modelValue"],setup(t,{emit:C}){const a=t,d=C,r=e.inject(P,{icons:{}}),f=e.computed(()=>{var o;return a.viewIcon??((o=r.icons)==null?void 0:o.view)??"mdi-eye-outline"}),x=e.computed(()=>{var o;return a.editIcon??((o=r.icons)==null?void 0:o.edit)??"mdi-pencil-outline"}),i=e.computed(()=>{var o;return a.deleteIcon??((o=r.icons)==null?void 0:o.delete)??"mdi-trash-can-outline"}),w=e.computed(()=>r.iconProps??{}),g=e.computed(()=>a.tableClass??r.tableClass??"border rounded-md");function h(o){return typeof o!="string"}const y=e.computed({get:()=>a.modelValue,set:o=>d("update:modelValue",o)});function s(){d("update:modelValue",[])}const c=e.ref(a.itemsPerPage),B=e.ref([]),D=e.ref(1),N=e.ref(null),S=e.ref(!1),U=e.computed(()=>{var o;return((o=a.headers)==null?void 0:o.filter(l=>l.key!=="actions"&&l.key!=="expanded-row"&&l.key!=="data-table-expand"))||[]});e.onMounted(()=>{T({page:D.value,itemsPerPage:c.value})});const R=o=>{N.value=o,S.value=!0},G=()=>{N.value=null,S.value=!1},K=o=>{d("editItem",o)},Y=o=>{d("viewItem",o)},H=()=>{d("deleteItem",N.value),S.value=!1},T=({page:o,itemsPerPage:l})=>{const k=B.value.map(b=>({column:b.key,direction:b.order}));d("onLoadData",{page:o,itemsPerPage:l,search:a.search,sortBy:k})};function J(){T({page:1,itemsPerPage:c.value})}const Q=z(J,400);return e.watch(()=>a.search,(o,l)=>{o!==l&&Q()}),e.watch(c,(o,l)=>{o!==l&&T({page:1,itemsPerPage:o})}),e.watch(B,()=>{T({page:1,itemsPerPage:c.value})}),e.watch(D,o=>{T({page:o,itemsPerPage:c.value})}),(o,l)=>{const k=e.resolveComponent("v-icon"),b=e.resolveComponent("v-btn"),I=e.resolveComponent("v-tooltip"),W=e.resolveComponent("v-data-table-server");return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(W,{headers:t.headers,items:t.items,loading:t.loading,"items-length":t.totalItems,"items-per-page":c.value,"onUpdate:itemsPerPage":l[0]||(l[0]=n=>c.value=n),search:t.search,"sort-by":B.value,"onUpdate:sortBy":l[1]||(l[1]=n=>B.value=n),page:D.value,"onUpdate:page":l[2]||(l[2]=n=>D.value=n),"item-value":t.itemValue,"show-expand":t.showExpand,"show-select":t.showSelect,"select-strategy":t.selectStrategy,modelValue:y.value,"onUpdate:modelValue":l[3]||(l[3]=n=>y.value=n),class:e.normalizeClass(g.value)},e.createSlots({"item.data-table-expand":e.withCtx(({internalItem:n,isExpanded:m,toggleExpand:p})=>[e.renderSlot(o.$slots,"item.data-table-expand",{internalItem:n,isExpanded:m,toggleExpand:p},()=>[e.createVNode(b,{onClick:$=>p(n),rounded:""},{default:e.withCtx(()=>[e.createVNode(k,null,{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(m(n)?"mdi-chevron-up":"mdi-chevron-down"),1)]),_:2},1024)]),_:2},1032,["onClick"])])]),"expanded-row":e.withCtx(({columns:n,item:m})=>[e.renderSlot(o.$slots,"expanded-row",{columns:n,item:m})]),"item.actions":e.withCtx(({item:n})=>[e.renderSlot(o.$slots,"before-actions",{item:n}),t.showViewButton?(e.openBlock(),e.createBlock(I,{key:0,text:t.viewButtonText},{activator:e.withCtx(({props:m})=>{var p;return[e.createVNode(b,e.mergeProps({icon:"",flat:"",onClick:$=>Y(n)},m,{disabled:(p=t.disableView)==null?void 0:p.call(t,n)}),{default:e.withCtx(()=>[e.renderSlot(o.$slots,"view-icon",{},()=>[h(f.value)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(f.value),e.mergeProps({key:0,size:20,class:"text-info"},w.value),null,16)):(e.openBlock(),e.createBlock(k,{key:1,size:"20",class:"text-info"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(f.value),1)]),_:1}))])]),_:3},16,["onClick","disabled"])]}),_:2},1032,["text"])):e.createCommentVNode("",!0),t.showEditButton?(e.openBlock(),e.createBlock(I,{key:1,text:t.editButtonText},{activator:e.withCtx(({props:m})=>{var p;return[e.createVNode(b,e.mergeProps({icon:"",flat:"",onClick:$=>K(n)},m,{disabled:(p=t.disableEdit)==null?void 0:p.call(t,n)}),{default:e.withCtx(()=>[e.renderSlot(o.$slots,"edit-icon",{},()=>[h(x.value)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(x.value),e.mergeProps({key:0,size:20,class:"text-primary"},w.value),null,16)):(e.openBlock(),e.createBlock(k,{key:1,size:"20",class:"text-primary"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(x.value),1)]),_:1}))])]),_:3},16,["onClick","disabled"])]}),_:2},1032,["text"])):e.createCommentVNode("",!0),t.showDeleteButton?(e.openBlock(),e.createBlock(I,{key:2,text:t.deleteButtonText},{activator:e.withCtx(({props:m})=>{var p;return[e.createVNode(b,e.mergeProps({icon:"",flat:"",onClick:$=>R(n)},m,{disabled:(p=t.disableDelete)==null?void 0:p.call(t,n)}),{default:e.withCtx(()=>[e.renderSlot(o.$slots,"delete-icon",{},()=>[h(i.value)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.value),e.mergeProps({key:0,size:20,class:"text-error"},w.value),null,16)):(e.openBlock(),e.createBlock(k,{key:1,size:"20",class:"text-error"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.value),1)]),_:1}))])]),_:3},16,["onClick","disabled"])]}),_:2},1032,["text"])):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"after-actions",{item:n})]),tfoot:e.withCtx(()=>[e.createElementVNode("tfoot",null,[e.renderSlot(o.$slots,"item.tfoot")])]),_:2},[t.showSelect?{name:"top",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"selection-actions",{selected:y.value,count:y.value.length,clear:s})]),key:"0"}:void 0,e.renderList(U.value,n=>({name:`item.${n.key}`,fn:e.withCtx(({item:m})=>[e.renderSlot(o.$slots,`item.${n.key}`,{item:m},()=>[e.createTextVNode(e.toDisplayString(m[n.key]),1)])])}))]),1032,["headers","items","loading","items-length","items-per-page","search","sort-by","page","item-value","show-expand","show-select","select-strategy","modelValue","class"]),e.createVNode(L,{show:S.value,title:t.deleteModalTitle,description:t.deleteModalMessage,confirmButtonText:t.deleteModalConfirmButtonText,cancelButtonText:t.deleteModalCancelButtonText,onClose:G,onConfirm:H},null,8,["show","title","description","confirmButtonText","cancelButtonText"])],64)}}}),q={install(t){t.component("DataTable",M)}};u.DATA_TABLE_CONFIG_KEY=P,u.DataTable=M,u.createDataTableConfig=F,u.default=q,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dazzadev/vuetify-datatable",
-  "version": "1.0.4",
-  "description": "Reusable server-side DataTable component for Vuetify 3",
+  "version": "1.1.0",
+  "description": "Reusable server-side DataTable component for Vuetify 3 and 4",
   "type": "module",
   "main": "./dist/vuetify-datatable.umd.cjs",
   "module": "./dist/vuetify-datatable.js",
@@ -22,7 +22,7 @@
   },
   "peerDependencies": {
     "vue": "^3.3.0",
-    "vuetify": "^3.0.0"
+    "vuetify": "^3.0.0 || ^4.0.0"
   },
   "dependencies": {
     "debounce": "^2.0.0"
@@ -35,7 +35,7 @@
     "vite-plugin-dts": "^4.0.0",
     "vue": "^3.5.0",
     "vue-tsc": "^2.0.0",
-    "vuetify": "^3.7.0"
+    "vuetify": "^4.0.0"
   },
   "license": "MIT"
 }