@dazzadev/vuetify-datatable 1.0.3 → 1.0.5

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
 
@@ -159,7 +159,10 @@ If no configuration is provided, the component uses Material Design Icons (inclu
 ## 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/types.d.ts

@@ -18,6 +18,7 @@ export interface DataTableIconConfig {
 export interface DataTableConfig {
     icons?: DataTableIconConfig;
     iconProps?: Record<string, unknown>;
+    tableClass?: string;
 }
 export interface LoadDataParams {
     page: number;

package/dist/vuetify-datatable.js

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dazzadev/vuetify-datatable",
-  "version": "1.0.3",
-  "description": "Reusable server-side DataTable component for Vuetify 3",
+  "version": "1.0.5",
+  "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"
 }