@dazzadev/vuetify-datatable 1.0.0

package/README.md

@@ -0,0 +1,161 @@
+# @dazza-dev/vuetify-datatable
+
+Reusable server-side DataTable component for Vuetify 3. Includes action buttons (view, edit, delete), configurable icons, and a built-in confirmation modal.
+
+## Installation
+
+```bash
+npm install @dazza-dev/vuetify-datatable
+```
+
+## Setup
+
+### Register globally (recommended)
+
+```ts
+// main.ts
+import { createApp } from 'vue';
+import VuetifyDatatable from '@dazza-dev/vuetify-datatable';
+
+const app = createApp(App);
+app.use(VuetifyDatatable);
+```
+
+### Or import individually
+
+```ts
+import { DataTable, ConfirmationModal } from '@dazza-dev/vuetify-datatable';
+```
+
+## Basic Usage
+
+```vue
+<template>
+    <DataTable
+        :headers="headers"
+        :items="items"
+        :loading="loading"
+        :total-items="totalItems"
+        :search="search"
+        @onLoadData="loadData"
+        @editItem="editItem"
+        @deleteItem="deleteItem"
+    />
+</template>
+```
+
+## Icon Configuration
+
+Icons can be configured at 4 levels of priority (highest to lowest):
+
+### 1. Slots (full control per instance)
+
+```vue
+<DataTable :headers="headers" :items="items">
+    <template #view-icon>
+        <MyCustomIcon />
+    </template>
+    <template #edit-icon>
+        <img src="/icons/edit.svg" width="20" />
+    </template>
+    <template #delete-icon>
+        <i class="fa-solid fa-trash"></i>
+    </template>
+</DataTable>
+```
+
+### 2. Props (string override per instance)
+
+```vue
+<DataTable
+    view-icon="mdi-magnify"
+    edit-icon="mdi-square-edit-outline"
+    delete-icon="mdi-delete"
+/>
+```
+
+### 3. Global plugin config (configure once, applies everywhere)
+
+```ts
+// main.ts
+import { createDataTableConfig } from '@dazza-dev/vuetify-datatable';
+import { IconEye, IconPencil, IconTrash } from '@tabler/icons-vue';
+
+app.use(createDataTableConfig({
+    icons: {
+        view: IconEye,
+        edit: IconPencil,
+        delete: IconTrash
+    },
+    iconProps: { 'stroke-width': 1.5 }
+}));
+```
+
+This works with any icon library: Tabler, FontAwesome, Heroicons, or any Vue component.
+
+### 4. MDI defaults (no config needed)
+
+If no configuration is provided, the component uses Material Design Icons (included with Vuetify):
+
+- View: `mdi-eye-outline`
+- Edit: `mdi-pencil-outline`
+- Delete: `mdi-trash-can-outline`
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `headers` | `TableHeader[]` | `[]` | Table column headers |
+| `items` | `T[]` | `[]` | Table row data |
+| `loading` | `boolean` | `false` | Show loading state |
+| `totalItems` | `number` | `0` | Total items for server-side pagination |
+| `itemsPerPage` | `number` | `10` | Items per page |
+| `search` | `string` | — | Search query |
+| `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 |
+| `showViewButton` | `boolean` | `false` | Show view action button |
+| `showEditButton` | `boolean` | `true` | Show edit action button |
+| `showDeleteButton` | `boolean` | `true` | Show delete action button |
+| `viewButtonText` | `string` | — | View button tooltip text |
+| `editButtonText` | `string` | — | Edit button tooltip text |
+| `deleteButtonText` | `string` | — | Delete button tooltip text |
+| `deleteModalTitle` | `string` | — | Delete confirmation modal title |
+| `deleteModalMessage` | `string` | — | Delete confirmation modal message |
+| `deleteModalConfirmButtonText` | `string` | — | Confirm button text |
+| `deleteModalCancelButtonText` | `string` | — | Cancel button text |
+| `viewIcon` | `string` | — | View icon name override |
+| `editIcon` | `string` | — | Edit icon name override |
+| `deleteIcon` | `string` | — | Delete icon name override |
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `onLoadData` | `LoadDataParams` | Triggered on pagination, sort, or search changes |
+| `editItem` | `T` | Triggered when edit button is clicked |
+| `deleteItem` | `T` | Triggered when delete is confirmed |
+| `viewItem` | `T` | Triggered when view button is clicked |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `item.{key}` | Custom render for any column by header key |
+| `expanded-row` | Content for expandable rows |
+| `item.data-table-expand` | Custom expand toggle button |
+| `before-actions` | Content before action buttons |
+| `after-actions` | Content after action buttons |
+| `view-icon` | Custom view icon |
+| `edit-icon` | Custom edit icon |
+| `delete-icon` | Custom delete icon |
+| `item.tfoot` | Table footer content |
+
+## Peer Dependencies
+
+- `vue` >= 3.3
+- `vuetify` >= 3.0
+
+## License
+
+MIT

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

@@ -0,0 +1,32 @@
+declare var __VLS_18: {};
+type __VLS_Slots = {} & {
+    description?: (props: typeof __VLS_18) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    show: BooleanConstructor;
+    title: StringConstructor;
+    description: StringConstructor;
+    confirmButtonText: StringConstructor;
+    cancelButtonText: StringConstructor;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+    confirm: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    show: BooleanConstructor;
+    title: StringConstructor;
+    description: StringConstructor;
+    confirmButtonText: StringConstructor;
+    cancelButtonText: StringConstructor;
+}>> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+}>, {
+    show: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,75 @@
+import type { TableHeader } from '../types';
+declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onOnLoadData?: ((...args: any[]) => any) | undefined;
+        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"> & {
+        tableClass?: string;
+        headers?: TableHeader[];
+        items?: T[];
+        loading?: boolean;
+        itemValue?: string;
+        totalItems?: number;
+        itemsPerPage?: number;
+        search?: string;
+        showExpand?: boolean;
+        showEditButton?: boolean;
+        showDeleteButton?: boolean;
+        showViewButton?: boolean;
+        viewButtonText?: string;
+        deleteButtonText?: string;
+        deleteModalTitle?: string;
+        deleteModalMessage?: string;
+        deleteModalConfirmButtonText?: string;
+        deleteModalCancelButtonText?: string;
+        editButtonText?: string;
+        viewIcon?: string;
+        editIcon?: string;
+        deleteIcon?: string;
+    } & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        [x: `item.${string}`]: ((props: {
+            item: any;
+        }) => any) | undefined;
+    } & {
+        "item.data-table-expand"?: ((props: {
+            internalItem: any;
+            isExpanded: any;
+            toggleExpand: any;
+        }) => any) | undefined;
+    } & {
+        "expanded-row"?: ((props: {
+            columns: any;
+            item: any;
+        }) => any) | undefined;
+    } & {
+        'before-actions'?: (props: {
+            item: any;
+        }) => any;
+    } & {
+        'view-icon'?: (props: {}) => any;
+    } & {
+        'edit-icon'?: (props: {}) => any;
+    } & {
+        'delete-icon'?: (props: {}) => any;
+    } & {
+        'after-actions'?: (props: {
+            item: any;
+        }) => any;
+    } & {
+        'item.tfoot'?: (props: {}) => any;
+    };
+    emit: (event: "onLoadData" | "editItem" | "deleteItem" | "viewItem", ...args: any[]) => void;
+}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/config.d.ts

@@ -0,0 +1,6 @@
+import type { InjectionKey, App } from 'vue';
+import type { DataTableConfig } from './types';
+export declare const DATA_TABLE_CONFIG_KEY: InjectionKey<DataTableConfig>;
+export declare function createDataTableConfig(config: DataTableConfig): {
+    install(app: App): void;
+};

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import type { App } from 'vue';
+import DataTable from './components/DataTable.vue';
+import { createDataTableConfig, DATA_TABLE_CONFIG_KEY } from './config';
+export { DataTable };
+export { createDataTableConfig, DATA_TABLE_CONFIG_KEY };
+export type { DataTableConfig, DataTableIconConfig, TableHeader, SortItem, LoadDataParams } from './types';
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;

package/dist/types.d.ts

@@ -0,0 +1,30 @@
+import type { Component } from 'vue';
+export interface TableHeader {
+    key: string;
+    title?: string;
+    align?: string;
+    sortable?: boolean;
+    fixed?: boolean;
+}
+export interface SortItem {
+    key: string;
+    order: 'asc' | 'desc';
+}
+export interface DataTableIconConfig {
+    view?: string | Component;
+    edit?: string | Component;
+    delete?: string | Component;
+}
+export interface DataTableConfig {
+    icons?: DataTableIconConfig;
+    iconProps?: Record<string, unknown>;
+}
+export interface LoadDataParams {
+    page: number;
+    itemsPerPage: number;
+    search?: string;
+    sortBy?: {
+        column: string;
+        direction: string;
+    }[];
+}

package/dist/vuetify-datatable.js

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

package/dist/vuetify-datatable.umd.cjs

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

package/package.json

@@ -0,0 +1,41 @@
+{
+    "name": "@dazzadev/vuetify-datatable",
+    "version": "1.0.0",
+    "description": "Reusable server-side DataTable component for Vuetify 3",
+    "type": "module",
+    "main": "./dist/vuetify-datatable.umd.cjs",
+    "module": "./dist/vuetify-datatable.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/vuetify-datatable.js",
+            "require": "./dist/vuetify-datatable.umd.cjs"
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "vite build && vue-tsc --emitDeclarationOnly",
+        "prepublishOnly": "npm run build"
+    },
+    "peerDependencies": {
+        "vue": "^3.3.0",
+        "vuetify": "^3.0.0"
+    },
+    "dependencies": {
+        "debounce": "^2.0.0"
+    },
+    "devDependencies": {
+        "@types/node": "^25.5.2",
+        "@vitejs/plugin-vue": "^5.0.0",
+        "typescript": "~5.6.0",
+        "vite": "^6.0.0",
+        "vite-plugin-dts": "^4.0.0",
+        "vue": "^3.5.0",
+        "vue-tsc": "^2.0.0",
+        "vuetify": "^3.7.0"
+    },
+    "license": "MIT"
+}