@toniel/laravel-tanstack-datatable 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Toniel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,386 @@
+# Laravel TanStack DataTable
+
+[![npm version](https://img.shields.io/npm/v/@toniel/laravel-tanstack-datatable)](https://www.npmjs.com/package/@toniel/laravel-tanstack-datatable)
+[![npm downloads](https://img.shields.io/npm/dm/@toniel/laravel-tanstack-datatable)](https://www.npmjs.com/package/@toniel/laravel-tanstack-datatable)
+[![GitHub](https://img.shields.io/github/license/toniel/laravel-tanstack-datatable)](https://github.com/toniel/laravel-tanstack-datatable/blob/main/LICENSE)
+[![GitHub stars](https://img.shields.io/github/stars/toniel/laravel-tanstack-datatable)](https://github.com/toniel/laravel-tanstack-datatable)
+
+Vue 3 DataTable components for Laravel pagination with TanStack Query and TanStack Table.
+
+> 🔗 **Companion Package**: This package works together with [`@toniel/laravel-tanstack-pagination`](https://github.com/toniel/laravel-tanstack-pagination) - the core composables library.
+
+## 📦 Installation
+
+```bash
+npm install @toniel/laravel-tanstack-datatable @toniel/laravel-tanstack-pagination
+# or
+yarn add @toniel/laravel-tanstack-datatable @toniel/laravel-tanstack-pagination
+# or
+pnpm add @toniel/laravel-tanstack-datatable @toniel/laravel-tanstack-pagination
+# or
+bun add @toniel/laravel-tanstack-datatable @toniel/laravel-tanstack-pagination
+```
+
+### Peer Dependencies
+
+This package requires the following peer dependencies:
+
+```bash
+npm install vue @tanstack/vue-query @tanstack/vue-table
+```
+
+## 🚀 Quick Start
+
+### Basic Usage
+
+```vue
+<script setup lang="ts">
+import { usePagination } from '@toniel/laravel-tanstack-pagination'
+import { DataTable } from '@toniel/laravel-tanstack-datatable'
+import { createColumnHelper } from '@tanstack/vue-table'
+import axios from 'axios'
+
+// Define your data type
+interface User {
+  id: number
+  name: string
+  email: string
+}
+
+// Create columns
+const columnHelper = createColumnHelper<User>()
+
+const columns = [
+  columnHelper.accessor('id', {
+    header: 'ID',
+  }),
+  columnHelper.accessor('name', {
+    header: 'Name',
+  }),
+  columnHelper.accessor('email', {
+    header: 'Email',
+  }),
+]
+
+// Use pagination composable
+const {
+  tableData,
+  pagination,
+  search,
+  currentPerPage,
+  sortBy,
+  sortDirection,
+  isLoading,
+  error,
+  handlePageChange,
+  handlePerPageChange,
+  handleSearchChange,
+  handleSortChange,
+  refetch,
+} = usePagination(
+  (filters) => axios.get('/api/users', { params: filters }),
+  { queryKey: 'users', defaultPerPage: 10 }
+)
+</script>
+
+<template>
+  <DataTable
+    :data="tableData"
+    :columns="columns"
+    :pagination="pagination"
+    :is-loading="isLoading"
+    :error="error"
+    :search="search"
+    :current-per-page="currentPerPage"
+    :sort-by="sortBy"
+    :sort-direction="sortDirection"
+    title="Users"
+    item-name="users"
+    @page-change="handlePageChange"
+    @per-page-change="handlePerPageChange"
+    @search-change="handleSearchChange"
+    @sort-change="handleSortChange"
+    @retry="refetch"
+  />
+</template>
+```
+
+## 🎯 Features
+
+### ✅ Core Features
+- 🔍 **Search** with debounce
+- 📄 **Pagination** with Laravel meta
+- 🔄 **Sorting** (client & server-side)
+- 📊 **Row selection** with bulk actions
+- 🎨 **Dark mode** support
+- ⚡ **Loading states** & error handling
+- 🔧 **Fully customizable** via slots
+
+### 🎨 Component Props
+
+#### DataTable Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `Array` | `[]` | Table data array |
+| `columns` | `ColumnDef[]` | required | TanStack Table column definitions |
+| `pagination` | `LaravelPaginationResponse` | `null` | Laravel pagination response |
+| `isLoading` | `boolean` | `false` | Loading state |
+| `error` | `Error` | `null` | Error object |
+| `search` | `string` | `''` | Search query |
+| `currentPerPage` | `number` | `10` | Current items per page |
+| `perPageOptions` | `number[]` | `[10,15,25,50,100]` | Per page options |
+| `sortBy` | `string` | `null` | Current sort column |
+| `sortDirection` | `'asc'\|'desc'` | `'asc'` | Sort direction |
+| `enableRowSelection` | `boolean` | `false` | Enable row selection |
+| `rowSelection` | `RowSelectionState` | `{}` | Selected rows state |
+| `getRowId` | `Function` | `(row) => row.id` | Get unique row ID |
+| `showSearch` | `boolean` | `true` | Show search input |
+| `showCaption` | `boolean` | `true` | Show table caption |
+| `showPerPageSelector` | `boolean` | `true` | Show per page selector |
+| `title` | `string` | `'Items'` | Table title |
+| `itemName` | `string` | `'items'` | Item name for pluralization |
+| `loadingText` | `string` | `'Loading...'` | Loading text |
+| `errorTitle` | `string` | `'Error loading data'` | Error title |
+| `emptyStateText` | `string` | `'📭 No items found'` | Empty state text |
+
+#### DataTable Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `pageChange` | `number` | Emitted when page changes |
+| `perPageChange` | `number` | Emitted when per page changes |
+| `searchChange` | `string` | Emitted when search input changes |
+| `sortChange` | `string` | Emitted when sort column changes |
+| `retry` | - | Emitted when retry button clicked |
+| `update:rowSelection` | `RowSelectionState` | Emitted when row selection changes |
+
+### 🎨 Slots
+
+#### `filters` Slot
+Add custom filters next to search input:
+
+```vue
+<DataTable ...>
+  <template #filters>
+    <select v-model="status" class="...">
+      <option value="">All Status</option>
+      <option value="active">Active</option>
+      <option value="inactive">Inactive</option>
+    </select>
+  </template>
+</DataTable>
+```
+
+#### `header` Slot
+Add action buttons (e.g., Create button):
+
+```vue
+<DataTable ...>
+  <template #header>
+    <button @click="openCreateModal" class="...">
+      ➕ Add User
+    </button>
+  </template>
+</DataTable>
+```
+
+#### `bulk-actions` Slot
+Add bulk action buttons when rows are selected:
+
+```vue
+<DataTable
+  :enable-row-selection="true"
+  v-model:row-selection="selectedRows"
+  ...
+>
+  <template #bulk-actions="{ selectedIds, selectedData, clearSelection }">
+    <button @click="bulkDelete(selectedIds)" class="...">
+      🗑️ Delete Selected
+    </button>
+    <button @click="clearSelection" class="...">
+      Clear
+    </button>
+  </template>
+</DataTable>
+```
+
+## 📖 Advanced Examples
+
+### With Row Selection
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { RowSelectionState } from '@tanstack/vue-table'
+
+const selectedRows = ref<RowSelectionState>({})
+
+const bulkDelete = async (ids: string[]) => {
+  await axios.delete('/api/users/bulk', { data: { ids } })
+  selectedRows.value = {}
+}
+</script>
+
+<template>
+  <DataTable
+    :enable-row-selection="true"
+    v-model:row-selection="selectedRows"
+    ...
+  >
+    <template #bulk-actions="{ selectedIds, clearSelection }">
+      <button @click="bulkDelete(selectedIds)">Delete</button>
+      <button @click="clearSelection">Clear</button>
+    </template>
+  </DataTable>
+</template>
+```
+
+### With Custom Columns (Actions)
+
+```vue
+<script setup lang="ts">
+const columns = [
+  columnHelper.accessor('id', { header: 'ID' }),
+  columnHelper.accessor('name', { header: 'Name' }),
+  columnHelper.display({
+    id: 'actions',
+    header: 'Actions',
+    cell: ({ row }) => h('div', { class: 'flex gap-2' }, [
+      h('button', { onClick: () => edit(row.original) }, 'Edit'),
+      h('button', { onClick: () => remove(row.original) }, 'Delete'),
+    ]),
+  }),
+]
+</script>
+```
+
+### With Checkbox Column
+
+```vue
+<script setup lang="ts">
+import { Checkbox } from 'your-ui-library' // or native input
+
+const columns = [
+  columnHelper.display({
+    id: 'select',
+    header: ({ table }) => h(Checkbox, {
+      checked: table.getIsAllPageRowsSelected(),
+      onUpdate: (val) => table.toggleAllPageRowsSelected(!!val),
+    }),
+    cell: ({ row }) => h(Checkbox, {
+      checked: row.getIsSelected(),
+      onUpdate: (val) => row.toggleSelected(!!val),
+    }),
+  }),
+  // ... other columns
+]
+</script>
+```
+
+## 🎨 Styling
+
+This package uses Tailwind CSS utility classes. Make sure Tailwind is configured in your project.
+
+### Dark Mode
+
+Dark mode is automatically supported via Tailwind's `dark:` classes. Configure dark mode in your `tailwind.config.js`:
+
+```js
+module.exports = {
+  darkMode: 'class', // or 'media'
+  // ...
+}
+```
+
+### Custom Styling
+
+You can override styles using Tailwind classes or custom CSS:
+
+```css
+/* Custom table styles */
+.data-table {
+  /* Your custom styles */
+}
+```
+
+## 🎨 Theming
+
+The components use Tailwind CSS and support dark mode out of the box. You can customize colors by:
+
+1. **Using Tailwind Config:**
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        // Customize colors here
+      }
+    }
+  }
+}
+```
+
+2. **CSS Variables:**
+```css
+:root {
+  --color-primary: ...;
+  --color-border: ...;
+}
+```
+
+## 🔗 Related Packages
+
+- [`@toniel/laravel-tanstack-pagination`](https://github.com/toniel/laravel-tanstack-pagination) - Core composables (required)
+- [`@tanstack/vue-query`](https://tanstack.com/query/latest/docs/vue/overview) - Data fetching & caching
+- [`@tanstack/vue-table`](https://tanstack.com/table/latest/docs/framework/vue/vue-table) - Table state management
+
+## 🌟 Show Your Support
+
+If this package helped you, please consider:
+- ⭐ Starring the [GitHub repository](https://github.com/toniel/laravel-tanstack-datatable)
+- 🐛 [Reporting bugs](https://github.com/toniel/laravel-tanstack-datatable/issues)
+- 💡 [Suggesting new features](https://github.com/toniel/laravel-tanstack-datatable/issues)
+- 🔧 [Contributing code](https://github.com/toniel/laravel-tanstack-datatable/pulls)
+
+## 📄 License
+
+[MIT](https://github.com/toniel/laravel-tanstack-datatable/blob/main/LICENSE) © [Toniel](https://github.com/toniel)
+
+## 🤝 Contributing
+
+Contributions, issues and feature requests are welcome!
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for more details.
+
+## 🐛 Known Issues
+
+Check the [GitHub Issues](https://github.com/toniel/laravel-tanstack-datatable/issues) page for known issues and feature requests.
+
+## 📮 Contact
+
+- GitHub: [@toniel](https://github.com/toniel)
+- NPM: [@toniel](https://www.npmjs.com/~toniel)
+
+## 🙏 Acknowledgments
+
+Built with these amazing libraries:
+- [Vue 3](https://vuejs.org/)
+- [TanStack Query](https://tanstack.com/query/latest)
+- [TanStack Table](https://tanstack.com/table/latest)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Lucide Icons](https://lucide.dev/)
+
+---
+
+<div align="center">
+  Made with ❤️ by <a href="https://github.com/toniel">Toniel</a>
+</div>
+

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

@@ -0,0 +1,97 @@
+import { LaravelPaginationResponse } from '@toniel/laravel-tanstack-pagination';
+import { ColumnDef, RowSelectionState } from '@tanstack/vue-table';
+interface Props {
+    data?: any[];
+    columns: ColumnDef<any>[];
+    pagination?: LaravelPaginationResponse | null;
+    isLoading?: boolean;
+    error?: Error | null;
+    search?: string;
+    currentPerPage?: number;
+    perPageOptions?: number[];
+    sortBy?: string | null;
+    sortDirection?: 'asc' | 'desc';
+    rowSelection?: RowSelectionState;
+    enableRowSelection?: boolean;
+    getRowId?: (row: any) => string;
+    showSearch?: boolean;
+    showCaption?: boolean;
+    showPerPageSelector?: boolean;
+    title?: string;
+    itemName?: string;
+    loadingText?: string;
+    errorTitle?: string;
+    emptyStateText?: string;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        filters?(_: {}): any;
+        header?(_: {}): any;
+        'bulk-actions'?(_: {
+            selectedIds: string[];
+            selectedData: any[];
+            selectedCount: number;
+            clearSelection: () => void;
+            selectAllCurrentPage: () => void;
+            deselectAllCurrentPage: () => void;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {
+    getSelectedRowIds: () => string[];
+    getSelectedRowData: () => any[];
+    clearSelection: () => void;
+    selectAllCurrentPage: () => void;
+    deselectAllCurrentPage: () => void;
+    selectedRowCount: import('vue').ComputedRef<number>;
+    selectedRowIds: import('vue').ComputedRef<string[]>;
+    selectedRowData: import('vue').ComputedRef<any[]>;
+    table: import('@tanstack/table-core').Table<any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    pageChange: (page: number) => any;
+    perPageChange: (perPage: number) => any;
+    searchChange: (search: string) => any;
+    sortChange: (column: string) => any;
+    retry: () => any;
+    "update:rowSelection": (selection: RowSelectionState) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onPageChange?: ((page: number) => any) | undefined;
+    onPerPageChange?: ((perPage: number) => any) | undefined;
+    onSearchChange?: ((search: string) => any) | undefined;
+    onSortChange?: ((column: string) => any) | undefined;
+    onRetry?: (() => any) | undefined;
+    "onUpdate:rowSelection"?: ((selection: RowSelectionState) => any) | undefined;
+}>, {
+    pagination: LaravelPaginationResponse | null;
+    perPageOptions: number[];
+    currentPerPage: number;
+    showPerPageSelector: boolean;
+    search: string;
+    data: any[];
+    title: string;
+    isLoading: boolean;
+    error: Error | null;
+    sortBy: string | null;
+    sortDirection: "asc" | "desc";
+    rowSelection: RowSelectionState;
+    enableRowSelection: boolean;
+    getRowId: (row: any) => string;
+    showSearch: boolean;
+    showCaption: boolean;
+    itemName: string;
+    loadingText: string;
+    errorTitle: string;
+    emptyStateText: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=DataTable.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.vue.d.ts","sourceRoot":"","sources":["../../src/components/DataTable.vue"],"names":[],"mappings":"AA4WA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,qCAAqC,CAAA;AACpF,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAA;AAK5B,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,GAAG,EAAE,CAAA;IACZ,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IACzB,UAAU,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAA;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IAG9B,YAAY,CAAC,EAAE,iBAAiB,CAAA;IAChC,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM,CAAA;IAG/B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAG7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AA8ID,iBAAS,cAAc;WA0UT,OAAO,IAA6B;;yBAZrB,GAAG;wBACJ,GAAG;;;;;;;;YACK,GAAG;;;;EAetC;AAuBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;gBA9gBN,yBAAyB,GAAG,IAAI;oBAK5B,MAAM,EAAE;oBADR,MAAM;yBAaD,OAAO;YAdpB,MAAM;UALR,GAAG,EAAE;WAsBJ,MAAM;eAnBF,OAAO;WACX,KAAK,GAAG,IAAI;YAIX,MAAM,GAAG,IAAI;mBACN,KAAK,GAAG,MAAM;kBAGf,iBAAiB;wBACX,OAAO;cACjB,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM;gBAGlB,OAAO;iBACN,OAAO;cAKV,MAAM;iBACH,MAAM;gBACP,MAAM;oBACF,MAAM;wFAggBvB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

@@ -0,0 +1,21 @@
+import { LaravelPaginationResponse } from '@toniel/laravel-tanstack-pagination';
+interface Props {
+    pagination?: LaravelPaginationResponse | null;
+    perPageOptions?: number[];
+    currentPerPage?: number;
+    showPerPageSelector?: boolean;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    pageChange: (page: number) => any;
+    perPageChange: (perPage: number) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onPageChange?: ((page: number) => any) | undefined;
+    onPerPageChange?: ((perPage: number) => any) | undefined;
+}>, {
+    pagination: LaravelPaginationResponse | null;
+    perPageOptions: number[];
+    currentPerPage: number;
+    showPerPageSelector: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=DataTablePagination.vue.d.ts.map

package/dist/components/DataTablePagination.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTablePagination.vue.d.ts","sourceRoot":"","sources":["../../src/components/DataTablePagination.vue"],"names":[],"mappings":"AAwOA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,qCAAqC,CAAA;AAIpF,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAA;IAC7C,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;;;;;;;;gBAJc,yBAAyB,GAAG,IAAI;oBAC5B,MAAM,EAAE;oBACR,MAAM;yBACD,OAAO;;AAuT/B,wBASG"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as DataTable } from './components/DataTable.vue';
+export { default as DataTablePagination } from './components/DataTablePagination.vue';
+export { cn } from './lib/utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,sCAAsC,CAAA;AAGrF,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA"}

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),x=require("@tanstack/vue-table"),y=require("lucide-vue-next"),B=require("clsx"),C=require("tailwind-merge"),E={class:"flex flex-col gap-4 px-2 py-4"},N={key:0,class:"flex justify-center"},V={class:"flex items-center gap-1",role:"navigation","aria-label":"pagination"},P=["disabled"],D=["disabled"],R={class:"flex items-center gap-1"},$=["onClick"],T={key:1,class:"inline-flex items-center justify-center h-10 w-10 text-gray-500"},j=["disabled"],F=["disabled"],L={class:"flex items-center justify-between text-sm text-gray-600 dark:text-gray-300"},z={key:0,class:"flex items-center gap-2"},I=["value"],M=["value"],O={key:1},S=e.defineComponent({__name:"DataTablePagination",props:{pagination:{default:null},perPageOptions:{default:()=>[10,15,25,50,100]},currentPerPage:{default:10},showPerPageSelector:{type:Boolean,default:!0}},emits:["pageChange","perPageChange"],setup(t,{emit:h}){const s=t,i=h,l=e.computed(()=>s.pagination?s.pagination.meta.current_page>1:!1),d=e.computed(()=>s.pagination?s.pagination.meta.current_page<s.pagination.meta.last_page:!1),f=e.computed(()=>{if(!s.pagination)return[];const g=s.pagination.meta.current_page,r=s.pagination.meta.last_page,o=2,n=[],m=[];let p;for(let a=1;a<=r;a++)(a===1||a===r||a>=g-o&&a<=g+o)&&n.push(a);for(const a of n)p&&(a-p===2?m.push(p+1):a-p!==1&&m.push("...")),m.push(a),p=a;return m}),b=g=>{typeof g=="number"&&i("pageChange",g)},u=()=>{l.value&&i("pageChange",1)},v=()=>{d.value&&s.pagination&&i("pageChange",s.pagination.meta.last_page)},w=()=>{l.value&&s.pagination&&i("pageChange",s.pagination.meta.current_page-1)},k=()=>{d.value&&s.pagination&&i("pageChange",s.pagination.meta.current_page+1)};return(g,r)=>(e.openBlock(),e.createElementBlock("div",E,[t.pagination&&t.pagination.meta.last_page>1?(e.openBlock(),e.createElementBlock("div",N,[e.createElementVNode("nav",V,[e.createElementVNode("button",{disabled:!l.value,class:e.normalizeClass(["inline-flex items-center justify-center gap-1 h-10 px-4 py-2 text-sm font-medium transition-colors rounded-md",l.value?"hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200":"opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600"]),onClick:u},[e.createVNode(e.unref(y.ChevronsLeft),{class:"h-4 w-4"}),r[1]||(r[1]=e.createElementVNode("span",{class:"hidden sm:inline"},"First",-1))],10,P),e.createElementVNode("button",{disabled:!l.value,class:e.normalizeClass(["inline-flex items-center justify-center gap-1 h-10 px-4 py-2 text-sm font-medium transition-colors rounded-md",l.value?"hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200":"opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600"]),onClick:w},[e.createVNode(e.unref(y.ChevronLeft),{class:"h-4 w-4"}),r[2]||(r[2]=e.createElementVNode("span",{class:"hidden sm:inline"},"Previous",-1))],10,D),e.createElementVNode("div",R,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.value,(o,n)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:n},[o!=="..."?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(["inline-flex items-center justify-center h-10 w-10 text-sm font-medium transition-colors rounded-md",o===t.pagination.meta.current_page?"bg-blue-500 text-white hover:bg-blue-600":"hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200"]),onClick:m=>b(o)},e.toDisplayString(o),11,$)):(e.openBlock(),e.createElementBlock("span",T," ... "))],64))),128))]),e.createElementVNode("button",{disabled:!d.value,class:e.normalizeClass(["inline-flex items-center justify-center gap-1 h-10 px-4 py-2 text-sm font-medium transition-colors rounded-md",d.value?"hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200":"opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600"]),onClick:k},[r[3]||(r[3]=e.createElementVNode("span",{class:"hidden sm:inline"},"Next",-1)),e.createVNode(e.unref(y.ChevronRight),{class:"h-4 w-4"})],10,j),e.createElementVNode("button",{disabled:!d.value,class:e.normalizeClass(["inline-flex items-center justify-center gap-1 h-10 px-4 py-2 text-sm font-medium transition-colors rounded-md",d.value?"hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200":"opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600"]),onClick:v},[r[4]||(r[4]=e.createElementVNode("span",{class:"hidden sm:inline"},"Last",-1)),e.createVNode(e.unref(y.ChevronsRight),{class:"h-4 w-4"})],10,F)])])):e.createCommentVNode("",!0),e.createElementVNode("div",L,[e.createElementVNode("div",null,[t.pagination&&t.pagination.meta.total>0?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(" Showing "+e.toDisplayString(t.pagination.meta.from)+" to "+e.toDisplayString(t.pagination.meta.to)+" of "+e.toDisplayString(t.pagination.meta.total)+" entries ",1)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(" No entries found ")],64))]),t.showPerPageSelector?(e.openBlock(),e.createElementBlock("div",z,[r[5]||(r[5]=e.createElementVNode("span",null,"Rows per page:",-1)),e.createElementVNode("select",{value:t.currentPerPage||t.perPageOptions[0],class:"h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",onChange:r[0]||(r[0]=o=>i("perPageChange",Number(o.target.value)||t.perPageOptions[0]))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.perPageOptions,o=>(e.openBlock(),e.createElementBlock("option",{key:o,value:o},e.toDisplayString(o),9,M))),128))],40,I)])):e.createCommentVNode("",!0),t.pagination?(e.openBlock(),e.createElementBlock("div",O," Page "+e.toDisplayString(t.pagination.meta.current_page)+" of "+e.toDisplayString(t.pagination.meta.last_page),1)):e.createCommentVNode("",!0)])]))}}),q={class:"flex flex-col gap-4"},_={class:"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"},A={class:"flex flex-col gap-2 sm:flex-row sm:items-center"},G={key:0,class:"relative items-center w-full max-w-sm"},H=["value"],U={class:"absolute inset-y-0 flex items-center justify-center px-2 start-0"},W={class:"flex items-center gap-2"},J={class:"flex items-center"},K={key:0,class:"flex items-center justify-between p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg"},Q={class:"flex items-center gap-4"},X={class:"text-sm font-medium text-blue-700 dark:text-blue-300"},Y={class:"text-xs text-blue-600 dark:text-blue-400"},Z={class:"flex items-center gap-2"},ee={key:1,class:"flex items-center justify-center p-8"},te={class:"text-lg text-gray-700 dark:text-gray-200"},oe={key:2,class:"flex flex-col items-center p-8"},ne={class:"mb-2 text-lg text-red-600 dark:text-red-400"},ae={class:"mb-4 text-sm text-gray-600 dark:text-gray-300"},le={key:3,class:"rounded-lg border bg-white dark:bg-gray-900"},re={key:0,class:"relative"},se={class:"relative w-full overflow-auto"},ie={class:"w-full caption-bottom text-sm"},ce={key:0,class:"mt-4 text-sm text-muted-foreground"},de={key:0,class:"ml-2 text-blue-600 dark:text-blue-400"},ge={class:"[&_tr]:border-b"},ue=["colspan"],me=["onClick"],pe={key:0,class:"flex flex-col"},fe={class:"[&_tr:last-child]:border-0"},ye={key:1},be=["colspan"],ke=e.defineComponent({__name:"DataTable",props:{data:{default:()=>[]},columns:{},pagination:{default:null},isLoading:{type:Boolean,default:!1},error:{default:null},search:{default:""},currentPerPage:{default:10},perPageOptions:{default:()=>[10,15,25,50,100]},sortBy:{default:null},sortDirection:{default:"asc"},rowSelection:{default:()=>({})},enableRowSelection:{type:Boolean,default:!1},getRowId:{type:Function,default:t=>t.id},showSearch:{type:Boolean,default:!0},showCaption:{type:Boolean,default:!0},showPerPageSelector:{type:Boolean,default:!0},title:{default:"Items"},itemName:{default:"items"},loadingText:{default:"Loading..."},errorTitle:{default:"Error loading data"},emptyStateText:{default:"📭 No items found"}},emits:["pageChange","perPageChange","searchChange","sortChange","retry","update:rowSelection"],setup(t,{expose:h,emit:s}){const i=s,l=t,d=e.computed(()=>Object.keys(l.rowSelection||{}).filter(o=>{var n;return(n=l.rowSelection)==null?void 0:n[o]}).length),f=e.computed(()=>Object.keys(l.rowSelection||{}).filter(o=>{var n;return(n=l.rowSelection)==null?void 0:n[o]})),b=e.computed(()=>!l.data||!l.rowSelection?[]:l.data.filter(o=>l.rowSelection[l.getRowId(o)])),u=x.useVueTable({get data(){return l.data||[]},columns:l.columns,getCoreRowModel:x.getCoreRowModel(),enableSorting:!0,manualSorting:!0,enableRowSelection:l.enableRowSelection,getRowId:l.getRowId,state:{rowSelection:l.rowSelection||{}},onRowSelectionChange:o=>{const n=typeof o=="function"?o(l.rowSelection||{}):o;i("update:rowSelection",n)},enableMultiRowSelection:!0,enableSubRowSelection:!1}),v=()=>f.value,w=()=>b.value,k=()=>i("update:rowSelection",{}),g=()=>{const o={...l.rowSelection};u.getRowModel().rows.forEach(n=>{o[n.id]=!0}),i("update:rowSelection",o)},r=()=>{const o={...l.rowSelection};u.getRowModel().rows.forEach(n=>{delete o[n.id]}),i("update:rowSelection",o)};return h({getSelectedRowIds:v,getSelectedRowData:w,clearSelection:k,selectAllCurrentPage:g,deselectAllCurrentPage:r,selectedRowCount:d,selectedRowIds:f,selectedRowData:b,table:u}),(o,n)=>{var m,p;return e.openBlock(),e.createElementBlock("div",q,[e.createElementVNode("div",_,[e.createElementVNode("div",A,[t.showSearch?(e.openBlock(),e.createElementBlock("div",G,[e.createElementVNode("input",{value:t.search,type:"text",placeholder:"Search...",class:"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pl-10 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",onInput:n[0]||(n[0]=a=>i("searchChange",a.target.value))},null,40,H),e.createElementVNode("span",U,[e.createVNode(e.unref(y.Search),{class:"size-6 text-gray-400"})])])):e.createCommentVNode("",!0),e.createElementVNode("div",W,[e.renderSlot(o.$slots,"filters")])]),e.createElementVNode("div",J,[e.renderSlot(o.$slots,"header")])]),t.enableRowSelection&&d.value>0?(e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("div",Q,[e.createElementVNode("span",X,e.toDisplayString(d.value)+" "+e.toDisplayString(t.itemName)+" selected ",1),e.createElementVNode("div",Y," IDs: "+e.toDisplayString(f.value.slice(0,5).join(", "))+e.toDisplayString(f.value.length>5?"...":""),1)]),e.createElementVNode("div",Z,[e.renderSlot(o.$slots,"bulk-actions",{selectedIds:f.value,selectedData:b.value,selectedCount:d.value,clearSelection:k,selectAllCurrentPage:g,deselectAllCurrentPage:r}),o.$slots["bulk-actions"]?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,onClick:k,class:"px-3 py-1 text-sm text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-800 rounded transition-colors"}," Clear Selection "))])])):e.createCommentVNode("",!0),t.isLoading&&!t.data?(e.openBlock(),e.createElementBlock("div",ee,[n[4]||(n[4]=e.createElementVNode("div",{class:"w-8 h-8 mr-3 border-b-2 border-gray-900 dark:border-gray-100 rounded-full animate-spin"},null,-1)),e.createElementVNode("div",te,e.toDisplayString(t.loadingText),1)])):t.error?(e.openBlock(),e.createElementBlock("div",oe,[e.createElementVNode("div",ne,"❌ "+e.toDisplayString(t.errorTitle),1),e.createElementVNode("div",ae,e.toDisplayString(t.error.message),1),e.createElementVNode("button",{class:"px-4 py-2 text-white transition-colors bg-gray-900 rounded-md hover:bg-gray-800 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200",onClick:n[1]||(n[1]=a=>i("retry"))}," 🔄 Retry ")])):(e.openBlock(),e.createElementBlock("div",le,[t.isLoading?(e.openBlock(),e.createElementBlock("div",re,[...n[5]||(n[5]=[e.createElementVNode("div",{class:"absolute inset-0 z-10 flex items-center justify-center bg-white/70 dark:bg-gray-900/70 rounded-lg"},[e.createElementVNode("div",{class:"w-6 h-6 border-b-2 border-gray-900 dark:border-gray-100 rounded-full animate-spin"})],-1)])])):e.createCommentVNode("",!0),e.createElementVNode("div",se,[e.createElementVNode("table",ie,[t.showCaption?(e.openBlock(),e.createElementBlock("caption",ce,[e.createTextVNode(e.toDisplayString(t.title)+" - Total: "+e.toDisplayString(((p=(m=t.pagination)==null?void 0:m.meta)==null?void 0:p.total)||0)+" "+e.toDisplayString(t.itemName)+" ",1),t.enableRowSelection&&d.value>0?(e.openBlock(),e.createElementBlock("span",de," ("+e.toDisplayString(d.value)+" selected) ",1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("thead",ge,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(u).getHeaderGroups(),a=>(e.openBlock(),e.createElementBlock("tr",{key:a.id,class:"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.headers,c=>(e.openBlock(),e.createElementBlock("th",{key:c.id,colspan:c.colSpan,class:"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0"},[c.isPlaceholder?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["flex items-center gap-2",c.column.getCanSort()?"cursor-pointer select-none hover:bg-gray-50 dark:hover:bg-gray-800 p-2 rounded transition-colors":""]),onClick:he=>c.column.getCanSort()?i("sortChange",c.column.id):void 0},[e.createVNode(e.unref(x.FlexRender),{render:c.column.columnDef.header,props:c.getContext()},null,8,["render","props"]),c.column.getCanSort()?(e.openBlock(),e.createElementBlock("div",pe,[e.createVNode(e.unref(y.ChevronUp),{class:e.normalizeClass(["w-3 h-3 transition-colors",t.sortBy===c.column.id&&t.sortDirection==="asc"?"text-gray-900 dark:text-gray-100":"text-gray-400"])},null,8,["class"]),e.createVNode(e.unref(y.ChevronDown),{class:e.normalizeClass(["w-3 h-3 -mt-1 transition-colors",t.sortBy===c.column.id&&t.sortDirection==="desc"?"text-gray-900 dark:text-gray-100":"text-gray-400"])},null,8,["class"])])):e.createCommentVNode("",!0)],10,me))],8,ue))),128))]))),128))]),e.createElementVNode("tbody",fe,[e.unref(u).getRowModel().rows.length>0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(e.unref(u).getRowModel().rows,a=>(e.openBlock(),e.createElementBlock("tr",{key:a.id,class:e.normalizeClass(["border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",t.enableRowSelection&&a.getIsSelected()?"bg-blue-50 dark:bg-blue-900/20 border-l-4 border-l-blue-500":""])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.getVisibleCells(),c=>(e.openBlock(),e.createElementBlock("td",{key:c.id,class:"p-4 align-middle [&:has([role=checkbox])]:pr-0"},[e.createVNode(e.unref(x.FlexRender),{render:c.column.columnDef.cell,props:c.getContext()},null,8,["render","props"])]))),128))],2))),128)):(e.openBlock(),e.createElementBlock("tr",ye,[e.createElementVNode("td",{colspan:t.columns.length,class:"h-24 text-center"},e.toDisplayString(t.emptyStateText),9,be)]))])])]),e.createVNode(S,{pagination:t.pagination,"current-per-page":t.currentPerPage,"per-page-options":t.perPageOptions,"show-per-page-selector":t.showPerPageSelector,onPageChange:n[2]||(n[2]=a=>i("pageChange",a)),onPerPageChange:n[3]||(n[3]=a=>i("perPageChange",a))},null,8,["pagination","current-per-page","per-page-options","show-per-page-selector"])]))])}}});function xe(...t){return C.twMerge(B.clsx(t))}exports.DataTable=ke;exports.DataTablePagination=S;exports.cn=xe;

package/dist/index.mjs

@@ -0,0 +1,393 @@
+import { defineComponent as L, computed as P, createElementBlock as a, openBlock as n, createCommentVNode as b, createElementVNode as t, normalizeClass as h, createVNode as y, unref as f, Fragment as p, renderList as S, toDisplayString as i, createTextVNode as B, renderSlot as N } from "vue";
+import { useVueTable as M, getCoreRowModel as O, FlexRender as I } from "@tanstack/vue-table";
+import { ChevronsLeft as V, ChevronLeft as E, ChevronRight as F, ChevronsRight as _, Search as z, ChevronUp as A, ChevronDown as G } from "lucide-vue-next";
+import { clsx as H } from "clsx";
+import { twMerge as U } from "tailwind-merge";
+const W = { class: "flex flex-col gap-4 px-2 py-4" }, q = {
+  key: 0,
+  class: "flex justify-center"
+}, J = {
+  class: "flex items-center gap-1",
+  role: "navigation",
+  "aria-label": "pagination"
+}, K = ["disabled"], Q = ["disabled"], X = { class: "flex items-center gap-1" }, Y = ["onClick"], Z = {
+  key: 1,
+  class: "inline-flex items-center justify-center h-10 w-10 text-gray-500"
+}, ee = ["disabled"], te = ["disabled"], oe = { class: "flex items-center justify-between text-sm text-gray-600 dark:text-gray-300" }, ae = {
+  key: 0,
+  class: "flex items-center gap-2"
+}, ne = ["value"], se = ["value"], re = { key: 1 }, le = /* @__PURE__ */ L({
+  __name: "DataTablePagination",
+  props: {
+    pagination: { default: null },
+    perPageOptions: { default: () => [10, 15, 25, 50, 100] },
+    currentPerPage: { default: 10 },
+    showPerPageSelector: { type: Boolean, default: !0 }
+  },
+  emits: ["pageChange", "perPageChange"],
+  setup(e, { emit: T }) {
+    const c = e, g = T, l = P(
+      () => c.pagination ? c.pagination.meta.current_page > 1 : !1
+    ), m = P(
+      () => c.pagination ? c.pagination.meta.current_page < c.pagination.meta.last_page : !1
+    ), C = P(() => {
+      if (!c.pagination) return [];
+      const x = c.pagination.meta.current_page, d = c.pagination.meta.last_page, o = 2, s = [], w = [];
+      let k;
+      for (let r = 1; r <= d; r++)
+        (r === 1 || r === d || r >= x - o && r <= x + o) && s.push(r);
+      for (const r of s)
+        k && (r - k === 2 ? w.push(k + 1) : r - k !== 1 && w.push("...")), w.push(r), k = r;
+      return w;
+    }), R = (x) => {
+      typeof x == "number" && g("pageChange", x);
+    }, v = () => {
+      l.value && g("pageChange", 1);
+    }, j = () => {
+      m.value && c.pagination && g("pageChange", c.pagination.meta.last_page);
+    }, D = () => {
+      l.value && c.pagination && g("pageChange", c.pagination.meta.current_page - 1);
+    }, $ = () => {
+      m.value && c.pagination && g("pageChange", c.pagination.meta.current_page + 1);
+    };
+    return (x, d) => (n(), a("div", W, [
+      e.pagination && e.pagination.meta.last_page > 1 ? (n(), a("div", q, [
+        t("nav", J, [
+          t("button", {
+            disabled: !l.value,
+            class: h([
+              "inline-flex items-center justify-center gap-1 h-10 px-4 py-2 text-sm font-medium transition-colors rounded-md",
+              l.value ? "hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200" : "opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600"
+            ]),
+            onClick: v
+          }, [
+            y(f(V), { class: "h-4 w-4" }),
+            d[1] || (d[1] = t("span", { class: "hidden sm:inline" }, "First", -1))
+          ], 10, K),
+          t("button", {
+            disabled: !l.value,
+            class: h([
+              "inline-flex items-center justify-center gap-1 h-10 px-4 py-2 text-sm font-medium transition-colors rounded-md",
+              l.value ? "hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200" : "opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600"
+            ]),
+            onClick: D
+          }, [
+            y(f(E), { class: "h-4 w-4" }),
+            d[2] || (d[2] = t("span", { class: "hidden sm:inline" }, "Previous", -1))
+          ], 10, Q),
+          t("div", X, [
+            (n(!0), a(p, null, S(C.value, (o, s) => (n(), a(p, { key: s }, [
+              o !== "..." ? (n(), a("button", {
+                key: 0,
+                class: h([
+                  "inline-flex items-center justify-center h-10 w-10 text-sm font-medium transition-colors rounded-md",
+                  o === e.pagination.meta.current_page ? "bg-blue-500 text-white hover:bg-blue-600" : "hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200"
+                ]),
+                onClick: (w) => R(o)
+              }, i(o), 11, Y)) : (n(), a("span", Z, " ... "))
+            ], 64))), 128))
+          ]),
+          t("button", {
+            disabled: !m.value,
+            class: h([
+              "inline-flex items-center justify-center gap-1 h-10 px-4 py-2 text-sm font-medium transition-colors rounded-md",
+              m.value ? "hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200" : "opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600"
+            ]),
+            onClick: $
+          }, [
+            d[3] || (d[3] = t("span", { class: "hidden sm:inline" }, "Next", -1)),
+            y(f(F), { class: "h-4 w-4" })
+          ], 10, ee),
+          t("button", {
+            disabled: !m.value,
+            class: h([
+              "inline-flex items-center justify-center gap-1 h-10 px-4 py-2 text-sm font-medium transition-colors rounded-md",
+              m.value ? "hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200" : "opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600"
+            ]),
+            onClick: j
+          }, [
+            d[4] || (d[4] = t("span", { class: "hidden sm:inline" }, "Last", -1)),
+            y(f(_), { class: "h-4 w-4" })
+          ], 10, te)
+        ])
+      ])) : b("", !0),
+      t("div", oe, [
+        t("div", null, [
+          e.pagination && e.pagination.meta.total > 0 ? (n(), a(p, { key: 0 }, [
+            B(" Showing " + i(e.pagination.meta.from) + " to " + i(e.pagination.meta.to) + " of " + i(e.pagination.meta.total) + " entries ", 1)
+          ], 64)) : (n(), a(p, { key: 1 }, [
+            B(" No entries found ")
+          ], 64))
+        ]),
+        e.showPerPageSelector ? (n(), a("div", ae, [
+          d[5] || (d[5] = t("span", null, "Rows per page:", -1)),
+          t("select", {
+            value: e.currentPerPage || e.perPageOptions[0],
+            class: "h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            onChange: d[0] || (d[0] = (o) => g("perPageChange", Number(o.target.value) || e.perPageOptions[0]))
+          }, [
+            (n(!0), a(p, null, S(e.perPageOptions, (o) => (n(), a("option", {
+              key: o,
+              value: o
+            }, i(o), 9, se))), 128))
+          ], 40, ne)
+        ])) : b("", !0),
+        e.pagination ? (n(), a("div", re, " Page " + i(e.pagination.meta.current_page) + " of " + i(e.pagination.meta.last_page), 1)) : b("", !0)
+      ])
+    ]));
+  }
+}), ie = { class: "flex flex-col gap-4" }, de = { class: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between" }, ce = { class: "flex flex-col gap-2 sm:flex-row sm:items-center" }, ge = {
+  key: 0,
+  class: "relative items-center w-full max-w-sm"
+}, ue = ["value"], me = { class: "absolute inset-y-0 flex items-center justify-center px-2 start-0" }, fe = { class: "flex items-center gap-2" }, be = { class: "flex items-center" }, ye = {
+  key: 0,
+  class: "flex items-center justify-between p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg"
+}, xe = { class: "flex items-center gap-4" }, he = { class: "text-sm font-medium text-blue-700 dark:text-blue-300" }, pe = { class: "text-xs text-blue-600 dark:text-blue-400" }, ve = { class: "flex items-center gap-2" }, we = {
+  key: 1,
+  class: "flex items-center justify-center p-8"
+}, ke = { class: "text-lg text-gray-700 dark:text-gray-200" }, Ce = {
+  key: 2,
+  class: "flex flex-col items-center p-8"
+}, Se = { class: "mb-2 text-lg text-red-600 dark:text-red-400" }, Pe = { class: "mb-4 text-sm text-gray-600 dark:text-gray-300" }, Re = {
+  key: 3,
+  class: "rounded-lg border bg-white dark:bg-gray-900"
+}, $e = {
+  key: 0,
+  class: "relative"
+}, Te = { class: "relative w-full overflow-auto" }, je = { class: "w-full caption-bottom text-sm" }, De = {
+  key: 0,
+  class: "mt-4 text-sm text-muted-foreground"
+}, Ne = {
+  key: 0,
+  class: "ml-2 text-blue-600 dark:text-blue-400"
+}, Be = { class: "[&_tr]:border-b" }, Ie = ["colspan"], Le = ["onClick"], Me = {
+  key: 0,
+  class: "flex flex-col"
+}, Oe = { class: "[&_tr:last-child]:border-0" }, Ve = { key: 1 }, Ee = ["colspan"], Ue = /* @__PURE__ */ L({
+  __name: "DataTable",
+  props: {
+    data: { default: () => [] },
+    columns: {},
+    pagination: { default: null },
+    isLoading: { type: Boolean, default: !1 },
+    error: { default: null },
+    search: { default: "" },
+    currentPerPage: { default: 10 },
+    perPageOptions: { default: () => [10, 15, 25, 50, 100] },
+    sortBy: { default: null },
+    sortDirection: { default: "asc" },
+    rowSelection: { default: () => ({}) },
+    enableRowSelection: { type: Boolean, default: !1 },
+    getRowId: { type: Function, default: (e) => e.id },
+    showSearch: { type: Boolean, default: !0 },
+    showCaption: { type: Boolean, default: !0 },
+    showPerPageSelector: { type: Boolean, default: !0 },
+    title: { default: "Items" },
+    itemName: { default: "items" },
+    loadingText: { default: "Loading..." },
+    errorTitle: { default: "Error loading data" },
+    emptyStateText: { default: "📭 No items found" }
+  },
+  emits: ["pageChange", "perPageChange", "searchChange", "sortChange", "retry", "update:rowSelection"],
+  setup(e, { expose: T, emit: c }) {
+    const g = c, l = e, m = P(() => Object.keys(l.rowSelection || {}).filter((o) => {
+      var s;
+      return (s = l.rowSelection) == null ? void 0 : s[o];
+    }).length), C = P(() => Object.keys(l.rowSelection || {}).filter((o) => {
+      var s;
+      return (s = l.rowSelection) == null ? void 0 : s[o];
+    })), R = P(() => !l.data || !l.rowSelection ? [] : l.data.filter((o) => l.rowSelection[l.getRowId(o)])), v = M({
+      get data() {
+        return l.data || [];
+      },
+      columns: l.columns,
+      getCoreRowModel: O(),
+      enableSorting: !0,
+      manualSorting: !0,
+      enableRowSelection: l.enableRowSelection,
+      getRowId: l.getRowId,
+      state: {
+        rowSelection: l.rowSelection || {}
+      },
+      onRowSelectionChange: (o) => {
+        const s = typeof o == "function" ? o(l.rowSelection || {}) : o;
+        g("update:rowSelection", s);
+      },
+      enableMultiRowSelection: !0,
+      enableSubRowSelection: !1
+    }), j = () => C.value, D = () => R.value, $ = () => g("update:rowSelection", {}), x = () => {
+      const o = { ...l.rowSelection };
+      v.getRowModel().rows.forEach((s) => {
+        o[s.id] = !0;
+      }), g("update:rowSelection", o);
+    }, d = () => {
+      const o = { ...l.rowSelection };
+      v.getRowModel().rows.forEach((s) => {
+        delete o[s.id];
+      }), g("update:rowSelection", o);
+    };
+    return T({
+      getSelectedRowIds: j,
+      getSelectedRowData: D,
+      clearSelection: $,
+      selectAllCurrentPage: x,
+      deselectAllCurrentPage: d,
+      selectedRowCount: m,
+      selectedRowIds: C,
+      selectedRowData: R,
+      table: v
+    }), (o, s) => {
+      var w, k;
+      return n(), a("div", ie, [
+        t("div", de, [
+          t("div", ce, [
+            e.showSearch ? (n(), a("div", ge, [
+              t("input", {
+                value: e.search,
+                type: "text",
+                placeholder: "Search...",
+                class: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pl-10 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                onInput: s[0] || (s[0] = (r) => g("searchChange", r.target.value))
+              }, null, 40, ue),
+              t("span", me, [
+                y(f(z), { class: "size-6 text-gray-400" })
+              ])
+            ])) : b("", !0),
+            t("div", fe, [
+              N(o.$slots, "filters")
+            ])
+          ]),
+          t("div", be, [
+            N(o.$slots, "header")
+          ])
+        ]),
+        e.enableRowSelection && m.value > 0 ? (n(), a("div", ye, [
+          t("div", xe, [
+            t("span", he, i(m.value) + " " + i(e.itemName) + " selected ", 1),
+            t("div", pe, " IDs: " + i(C.value.slice(0, 5).join(", ")) + i(C.value.length > 5 ? "..." : ""), 1)
+          ]),
+          t("div", ve, [
+            N(o.$slots, "bulk-actions", {
+              selectedIds: C.value,
+              selectedData: R.value,
+              selectedCount: m.value,
+              clearSelection: $,
+              selectAllCurrentPage: x,
+              deselectAllCurrentPage: d
+            }),
+            o.$slots["bulk-actions"] ? b("", !0) : (n(), a("button", {
+              key: 0,
+              onClick: $,
+              class: "px-3 py-1 text-sm text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-800 rounded transition-colors"
+            }, " Clear Selection "))
+          ])
+        ])) : b("", !0),
+        e.isLoading && !e.data ? (n(), a("div", we, [
+          s[4] || (s[4] = t("div", { class: "w-8 h-8 mr-3 border-b-2 border-gray-900 dark:border-gray-100 rounded-full animate-spin" }, null, -1)),
+          t("div", ke, i(e.loadingText), 1)
+        ])) : e.error ? (n(), a("div", Ce, [
+          t("div", Se, "❌ " + i(e.errorTitle), 1),
+          t("div", Pe, i(e.error.message), 1),
+          t("button", {
+            class: "px-4 py-2 text-white transition-colors bg-gray-900 rounded-md hover:bg-gray-800 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200",
+            onClick: s[1] || (s[1] = (r) => g("retry"))
+          }, " 🔄 Retry ")
+        ])) : (n(), a("div", Re, [
+          e.isLoading ? (n(), a("div", $e, [...s[5] || (s[5] = [
+            t("div", { class: "absolute inset-0 z-10 flex items-center justify-center bg-white/70 dark:bg-gray-900/70 rounded-lg" }, [
+              t("div", { class: "w-6 h-6 border-b-2 border-gray-900 dark:border-gray-100 rounded-full animate-spin" })
+            ], -1)
+          ])])) : b("", !0),
+          t("div", Te, [
+            t("table", je, [
+              e.showCaption ? (n(), a("caption", De, [
+                B(i(e.title) + " - Total: " + i(((k = (w = e.pagination) == null ? void 0 : w.meta) == null ? void 0 : k.total) || 0) + " " + i(e.itemName) + " ", 1),
+                e.enableRowSelection && m.value > 0 ? (n(), a("span", Ne, " (" + i(m.value) + " selected) ", 1)) : b("", !0)
+              ])) : b("", !0),
+              t("thead", Be, [
+                (n(!0), a(p, null, S(f(v).getHeaderGroups(), (r) => (n(), a("tr", {
+                  key: r.id,
+                  class: "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"
+                }, [
+                  (n(!0), a(p, null, S(r.headers, (u) => (n(), a("th", {
+                    key: u.id,
+                    colspan: u.colSpan,
+                    class: "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0"
+                  }, [
+                    u.isPlaceholder ? b("", !0) : (n(), a("div", {
+                      key: 0,
+                      class: h([
+                        "flex items-center gap-2",
+                        u.column.getCanSort() ? "cursor-pointer select-none hover:bg-gray-50 dark:hover:bg-gray-800 p-2 rounded transition-colors" : ""
+                      ]),
+                      onClick: (Fe) => u.column.getCanSort() ? g("sortChange", u.column.id) : void 0
+                    }, [
+                      y(f(I), {
+                        render: u.column.columnDef.header,
+                        props: u.getContext()
+                      }, null, 8, ["render", "props"]),
+                      u.column.getCanSort() ? (n(), a("div", Me, [
+                        y(f(A), {
+                          class: h([
+                            "w-3 h-3 transition-colors",
+                            e.sortBy === u.column.id && e.sortDirection === "asc" ? "text-gray-900 dark:text-gray-100" : "text-gray-400"
+                          ])
+                        }, null, 8, ["class"]),
+                        y(f(G), {
+                          class: h([
+                            "w-3 h-3 -mt-1 transition-colors",
+                            e.sortBy === u.column.id && e.sortDirection === "desc" ? "text-gray-900 dark:text-gray-100" : "text-gray-400"
+                          ])
+                        }, null, 8, ["class"])
+                      ])) : b("", !0)
+                    ], 10, Le))
+                  ], 8, Ie))), 128))
+                ]))), 128))
+              ]),
+              t("tbody", Oe, [
+                f(v).getRowModel().rows.length > 0 ? (n(!0), a(p, { key: 0 }, S(f(v).getRowModel().rows, (r) => (n(), a("tr", {
+                  key: r.id,
+                  class: h([
+                    "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+                    e.enableRowSelection && r.getIsSelected() ? "bg-blue-50 dark:bg-blue-900/20 border-l-4 border-l-blue-500" : ""
+                  ])
+                }, [
+                  (n(!0), a(p, null, S(r.getVisibleCells(), (u) => (n(), a("td", {
+                    key: u.id,
+                    class: "p-4 align-middle [&:has([role=checkbox])]:pr-0"
+                  }, [
+                    y(f(I), {
+                      render: u.column.columnDef.cell,
+                      props: u.getContext()
+                    }, null, 8, ["render", "props"])
+                  ]))), 128))
+                ], 2))), 128)) : (n(), a("tr", Ve, [
+                  t("td", {
+                    colspan: e.columns.length,
+                    class: "h-24 text-center"
+                  }, i(e.emptyStateText), 9, Ee)
+                ]))
+              ])
+            ])
+          ]),
+          y(le, {
+            pagination: e.pagination,
+            "current-per-page": e.currentPerPage,
+            "per-page-options": e.perPageOptions,
+            "show-per-page-selector": e.showPerPageSelector,
+            onPageChange: s[2] || (s[2] = (r) => g("pageChange", r)),
+            onPerPageChange: s[3] || (s[3] = (r) => g("perPageChange", r))
+          }, null, 8, ["pagination", "current-per-page", "per-page-options", "show-per-page-selector"])
+        ]))
+      ]);
+    };
+  }
+});
+function We(...e) {
+  return U(H(e));
+}
+export {
+  Ue as DataTable,
+  le as DataTablePagination,
+  We as cn
+};

package/dist/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@toniel/laravel-tanstack-datatable",
+  "version": "0.1.0",
+  "description": "Vue 3 DataTable components for Laravel pagination with TanStack Query and shadcn-vue",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly --outDir dist",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "laravel",
+    "pagination",
+    "datatable",
+    "tanstack-query",
+    "tanstack-table",
+    "table",
+    "components",
+    "typescript",
+    "tailwindcss",
+    "ui-components"
+  ],
+  "author": "Toniel <toniel@example.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/toniel/laravel-tanstack-datatable.git"
+  },
+  "homepage": "https://github.com/toniel/laravel-tanstack-datatable#readme",
+  "bugs": {
+    "url": "https://github.com/toniel/laravel-tanstack-datatable/issues"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0",
+    "@tanstack/vue-query": "^5.0.0",
+    "@tanstack/vue-table": "^8.0.0",
+    "@toniel/laravel-tanstack-pagination": "^0.1.0",
+    "radix-vue": "^1.0.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "tailwind-merge": "^2.0.0",
+    "lucide-vue-next": "^0.460.0"
+  },
+  "devDependencies": {
+    "@tanstack/vue-query": "^5.83.1",
+    "@tanstack/vue-table": "^8.20.5",
+    "@types/node": "^22.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-vue-next": "^0.460.0",
+    "radix-vue": "^1.9.9",
+    "tailwind-merge": "^2.5.5",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.0.0",
+    "vue": "^3.5.0",
+    "vue-tsc": "^2.0.0"
+  }
+}