@toniel/laravel-tanstack-datatable 0.1.6 → 0.1.8

package/README.md

@@ -7,9 +7,9 @@
 
 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.
+> **Companion Package**: This package works together with [`@toniel/laravel-tanstack-pagination`](https://github.com/toniel/laravel-tanstack-pagination) - the core composables library.
 
-## 📦 Installation
+## Installation
 
 ```bash
 npm install @toniel/laravel-tanstack-datatable @toniel/laravel-tanstack-pagination
@@ -29,7 +29,7 @@ This package requires the following peer dependencies:
 npm install vue @tanstack/vue-query @tanstack/vue-table
 ```
 
-## 🚀 Quick Start
+## Quick Start
 
 ### Basic Usage
 
@@ -105,18 +105,18 @@ const {
 </template>
 ```
 
-## 🎯 Features
+## 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
+### 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
+### Component Props
 
 #### DataTable Props
 
@@ -135,6 +135,7 @@ const {
 | `enableRowSelection` | `boolean` | `false` | Enable row selection |
 | `rowSelection` | `RowSelectionState` | `{}` | Selected rows state |
 | `getRowId` | `Function` | `(row) => row.id` | Get unique row ID |
+| `showSelectionInfo` | `boolean` | `true` | Show selection info bar when rows are selected |
 | `showSearch` | `boolean` | `true` | Show search input |
 | `showCaption` | `boolean` | `true` | Show table caption |
 | `showPerPageSelector` | `boolean` | `true` | Show per page selector |
@@ -142,7 +143,7 @@ const {
 | `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 |
+| `emptyStateText` | `string` | `'No items found'` | Empty state text |
 
 #### DataTable Events
 
@@ -155,7 +156,7 @@ const {
 | `retry` | - | Emitted when retry button clicked |
 | `update:rowSelection` | `RowSelectionState` | Emitted when row selection changes |
 
-### 🎨 Slots
+### Slots
 
 #### `filters` Slot
 Add custom filters next to search input:
@@ -179,7 +180,7 @@ Add action buttons (e.g., Create button):
 <DataTable ...>
   <template #header>
     <button @click="openCreateModal" class="...">
-      ➕ Add User
+      Add User
     </button>
   </template>
 </DataTable>
@@ -196,7 +197,7 @@ Add bulk action buttons when rows are selected:
 >
   <template #bulk-actions="{ selectedIds, selectedData, clearSelection }">
     <button @click="bulkDelete(selectedIds)" class="...">
-      🗑️ Delete Selected
+      Delete Selected
     </button>
     <button @click="clearSelection" class="...">
       Clear
@@ -205,7 +206,34 @@ Add bulk action buttons when rows are selected:
 </DataTable>
 ```
 
-## 📖 Advanced Examples
+#### `selection-info` Slot
+Fully customize the selection info bar (replaces the default blue bar):
+
+```vue
+<DataTable
+  :enable-row-selection="true"
+  v-model:row-selection="selectedRows"
+  ...
+>
+  <template #selection-info="{ selectedIds, selectedData, selectedCount, clearSelection }">
+    <div class="your-custom-class">
+      {{ selectedCount }} items selected
+      <button @click="handleBulkAction(selectedIds)">Action</button>
+      <button @click="clearSelection">Clear</button>
+    </div>
+  </template>
+</DataTable>
+```
+
+Slot props available:
+- `selectedIds` - Array of selected row IDs
+- `selectedData` - Array of selected row data objects
+- `selectedCount` - Number of selected rows
+- `clearSelection` - Function to clear all selections
+- `selectAllCurrentPage` - Function to select all rows on current page
+- `deselectAllCurrentPage` - Function to deselect all rows on current page
+
+## Advanced Examples
 
 ### With Row Selection
 
@@ -278,7 +306,100 @@ const columns = [
 </script>
 ```
 
-## 🎨 Styling
+### Using `useRowSelection` Composable
+
+For more control over row selection, use the `useRowSelection` composable:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRowSelection } from '@toniel/laravel-tanstack-datatable'
+import { createColumnHelper } from '@tanstack/vue-table'
+
+interface User {
+  id: number
+  name: string
+  email: string
+}
+
+const tableData = ref<User[]>([])
+
+const {
+  rowSelection,
+  selectedRowIds,
+  selectedRowData,
+  isAllCurrentPageSelected,
+  clearSelection,
+  toggleAllCurrentPage,
+  toggleRowSelection,
+  getSelectionColumn,
+} = useRowSelection<User>({
+  data: tableData,
+  getRowId: (row) => String(row.id),
+})
+
+const columnHelper = createColumnHelper<User>()
+
+const columns = [
+  getSelectionColumn({ size: 50 }), // Automatic checkbox column
+  columnHelper.accessor('name', { header: 'Name' }),
+  columnHelper.accessor('email', { header: 'Email' }),
+]
+
+const handleBulkDelete = async () => {
+  await axios.delete('/api/users/bulk', { data: { ids: selectedRowIds.value } })
+  clearSelection()
+  // refetch data...
+}
+</script>
+
+<template>
+  <DataTable
+    :data="tableData"
+    :columns="columns"
+    :enable-row-selection="true"
+    v-model:row-selection="rowSelection"
+    :show-selection-info="false"
+  >
+    <template #selection-info="{ selectedIds, selectedCount, clearSelection }">
+      <div class="flex items-center gap-4 p-4 bg-red-50 rounded-lg">
+        <span>{{ selectedCount }} users selected</span>
+        <button @click="handleBulkDelete" class="btn-danger">Delete</button>
+        <button @click="clearSelection">Clear</button>
+      </div>
+    </template>
+  </DataTable>
+</template>
+```
+
+#### `useRowSelection` API
+
+| Property/Method | Type | Description |
+|-----------------|------|-------------|
+| `rowSelection` | `Ref<RowSelectionState>` | Reactive selection state |
+| `selectedRowIds` | `Ref<string[]>` | Array of selected row IDs |
+| `selectedRowData` | `Ref<T[]>` | Array of selected row data |
+| `isAllCurrentPageSelected` | `Ref<boolean>` | Whether all current page rows are selected |
+| `isSomeCurrentPageSelected` | `Ref<boolean>` | Whether some (but not all) rows are selected |
+| `clearSelection` | `() => void` | Clear all selections |
+| `toggleAllCurrentPage` | `() => void` | Toggle select all on current page |
+| `toggleRowSelection` | `(id: string) => void` | Toggle single row selection |
+| `selectRows` | `(ids: string[]) => void` | Select multiple rows by IDs |
+| `deselectRows` | `(ids: string[]) => void` | Deselect multiple rows by IDs |
+| `getSelectionColumn` | `(options?) => ColumnDef<T>` | Get a checkbox column definition |
+
+#### `getSelectionColumn` Options
+
+```ts
+getSelectionColumn({
+  headerClass: 'flex items-center justify-center',
+  cellClass: 'flex items-center justify-center',
+  checkboxClass: 'w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded',
+  size: 50,
+})
+```
+
+## Styling
 
 This package uses Tailwind CSS utility classes. Make sure Tailwind is configured in your project.
 
@@ -304,7 +425,7 @@ You can override styles using Tailwind classes or custom CSS:
 }
 ```
 
-## 🎨 Theming
+## Theming
 
 The components use Tailwind CSS and support dark mode out of the box. You can customize colors by:
 
@@ -330,19 +451,19 @@ module.exports = {
 }
 ```
 
-## 🔗 Related Packages
+## 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
+## 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)
+- 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
 

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

@@ -14,8 +14,8 @@ interface Props {
     rowSelection?: RowSelectionState;
     enableRowSelection?: boolean;
     getRowId?: (row: any) => string;
+    showSelectionInfo?: boolean;
     showSearch?: boolean;
-    showCaption?: boolean;
     showPerPageSelector?: boolean;
     title?: string;
     itemName?: string;
@@ -28,6 +28,14 @@ declare function __VLS_template(): {
     slots: {
         filters?(_: {}): any;
         header?(_: {}): any;
+        'selection-info'?(_: {
+            selectedIds: string[];
+            selectedData: any[];
+            selectedCount: number;
+            clearSelection: () => void;
+            selectAllCurrentPage: () => void;
+            deselectAllCurrentPage: () => void;
+        }): any;
         'bulk-actions'?(_: {
             selectedIds: string[];
             selectedData: any[];
@@ -66,22 +74,22 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {
     onRetry?: (() => any) | undefined;
     "onUpdate:rowSelection"?: ((selection: RowSelectionState) => any) | undefined;
 }>, {
+    data: any[];
+    getRowId: (row: any) => string;
+    search: string;
+    title: string;
+    error: Error | null;
     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;
+    showSelectionInfo: boolean;
     showSearch: boolean;
-    showCaption: boolean;
     itemName: string;
     loadingText: string;
     errorTitle: string;

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.vue.d.ts","sourceRoot":"","sources":["../../src/components/DataTable.vue"],"names":[],"mappings":"AA4YA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,qCAAqC,CAAC;AACrF,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAC;AAK7B,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAG/B,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM,CAAC;IAGhC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAG9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAmJD,iBAAS,cAAc;WA4VT,OAAO,IAA6B;;yBAZrB,GAAG;wBACJ,GAAG;;;;;;;;YACK,GAAG;;;;EAetC;AAuBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;gBAriBN,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;wFAuhBvB,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"}
+{"version":3,"file":"DataTable.vue.d.ts","sourceRoot":"","sources":["../../src/components/DataTable.vue"],"names":[],"mappings":"AAuYA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,qCAAqC,CAAC;AACrF,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAC;AAK7B,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAG/B,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAG5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAG9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAmJD,iBAAS,cAAc;WAuXT,OAAO,IAA6B;;yBAbrB,GAAG;wBACJ,GAAG;;;;;;;;YACO,GAAG;;;;;;;;YACL,GAAG;;;;EAetC;AA0BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;UArkBZ,GAAG,EAAE;cAcD,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM;YATtB,MAAM;WAiBP,MAAM;WAlBN,KAAK,GAAG,IAAI;gBAFP,yBAAyB,GAAG,IAAI;oBAK5B,MAAM,EAAE;oBADR,MAAM;yBAaD,OAAO;eAhBjB,OAAO;YAKV,MAAM,GAAG,IAAI;mBACN,KAAK,GAAG,MAAM;kBAGf,iBAAiB;wBACX,OAAO;uBAER,OAAO;gBAGd,OAAO;cAKT,MAAM;iBACH,MAAM;gBACP,MAAM;oBACF,MAAM;wFAqjBvB,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

@@ -16,6 +16,6 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     perPageOptions: number[];
     currentPerPage: number;
     showPerPageSelector: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;
 //# sourceMappingURL=DataTablePagination.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTablePagination.vue.d.ts","sourceRoot":"","sources":["../../src/components/DataTablePagination.vue"],"names":[],"mappings":"AAyOA,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;;AAmT/B,wBASG"}
+{"version":3,"file":"DataTablePagination.vue.d.ts","sourceRoot":"","sources":["../../src/components/DataTablePagination.vue"],"names":[],"mappings":"AAoLA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,qCAAqC,CAAC;AAIrF,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;;;;;;;;gBAJc,yBAAyB,GAAG,IAAI;oBAC5B,MAAM,EAAE;oBACR,MAAM;yBACD,OAAO;;AAgQ/B,wBAQG"}

package/dist/composables/useRowSelection.d.ts

@@ -0,0 +1,27 @@
+import { ColumnDef, RowSelectionState } from '@tanstack/vue-table';
+import { Ref } from 'vue';
+export interface UseRowSelectionOptions<T> {
+    data: Ref<T[]>;
+    getRowId?: (row: T) => string;
+}
+export interface RowSelectionHelpers<T> {
+    rowSelection: Ref<RowSelectionState>;
+    selectedRowIds: Ref<string[]>;
+    selectedRowData: Ref<T[]>;
+    isAllCurrentPageSelected: Ref<boolean>;
+    isSomeCurrentPageSelected: Ref<boolean>;
+    clearSelection: () => void;
+    toggleAllCurrentPage: () => void;
+    toggleRowSelection: (id: string) => void;
+    selectRows: (ids: string[]) => void;
+    deselectRows: (ids: string[]) => void;
+    getSelectionColumn: (options?: SelectionColumnOptions) => ColumnDef<T>;
+}
+export interface SelectionColumnOptions {
+    headerClass?: string;
+    cellClass?: string;
+    checkboxClass?: string;
+    size?: number;
+}
+export declare function useRowSelection<T>(options: UseRowSelectionOptions<T>): RowSelectionHelpers<T>;
+//# sourceMappingURL=useRowSelection.d.ts.map

package/dist/composables/useRowSelection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRowSelection.d.ts","sourceRoot":"","sources":["../../src/composables/useRowSelection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAA8B,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAE3D,MAAM,WAAW,sBAAsB,CAAC,CAAC;IACvC,IAAI,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACpC,YAAY,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACrC,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC;IAC9B,eAAe,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;IAC1B,wBAAwB,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACvC,yBAAyB,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACxC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,kBAAkB,EAAE,CAAC,OAAO,CAAC,EAAE,sBAAsB,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC;CACxE;AAED,MAAM,WAAW,sBAAsB;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,eAAe,CAAC,CAAC,EAC/B,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,GACjC,mBAAmB,CAAC,CAAC,CAAC,CA2IxB"}

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { useDarkMode } from './composables/useDarkMode';
+export { useRowSelection } from './composables/useRowSelection';
 export { default as DataTable } from './components/DataTable.vue';
 export { default as DataTablePagination } from './components/DataTablePagination.vue';
 export { cn } from './lib/utils';
+export type { UseRowSelectionOptions, RowSelectionHelpers, SelectionColumnOptions } from './composables/useRowSelection';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAGvD,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAG/D,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;AAGhC,YAAY,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAA"}

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),x=require("@tanstack/vue-table"),k=require("lucide-vue-next"),E=require("clsx"),C=require("tailwind-merge");function S(){const t=e.ref(!1);if(typeof window<"u"){const r=window.matchMedia("(prefers-color-scheme: dark)");t.value=r.matches,r.addEventListener("change",s=>{t.value=s.matches})}e.watchEffect(()=>{typeof document<"u"&&(t.value?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"))});function b(){t.value=!t.value}return{isDarkMode:t,toggleDarkMode:b}}const N={class:"flex flex-col items-center justify-between gap-4 px-2 py-2 sm:flex-row text-foreground bg-background"},V={class:"text-sm text-muted-foreground"},P={class:"flex flex-col items-center gap-4 sm:flex-row"},D={key:0,class:"flex items-center gap-2"},R=["value"],$=["value"],T={key:1,class:"flex items-center justify-center"},L={class:"flex items-center gap-1",role:"navigation","aria-label":"pagination"},j=["disabled"],M=["disabled"],F={class:"hidden items-center gap-1 sm:flex"},z=["onClick"],I={key:1,class:"inline-flex items-center justify-center h-10 min-w-10 px-3 text-muted-foreground"},O=["disabled"],q=["disabled"],B=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:b}){const r=t,s=b,l=e.computed(()=>r.pagination?r.pagination.meta.current_page>1:!1),d=e.computed(()=>r.pagination?r.pagination.meta.current_page<r.pagination.meta.last_page:!1),p=e.computed(()=>{if(!r.pagination)return[];const u=r.pagination.meta.current_page,c=r.pagination.meta.last_page,o=2,n=[],m=[];let f;for(let a=1;a<=c;a++)(a===1||a===c||a>=u-o&&a<=u+o)&&n.push(a);for(const a of n)f&&(a-f===2?m.push(f+1):a-f!==1&&m.push("...")),m.push(a),f=a;return m}),h=u=>{typeof u=="number"&&s("pageChange",u)},g=()=>{l.value&&s("pageChange",1)},v=()=>{d.value&&r.pagination&&s("pageChange",r.pagination.meta.last_page)},w=()=>{l.value&&r.pagination&&s("pageChange",r.pagination.meta.current_page-1)},y=()=>{d.value&&r.pagination&&s("pageChange",r.pagination.meta.current_page+1)};return(u,c)=>(e.openBlock(),e.createElementBlock("div",N,[e.createElementVNode("div",V,[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 to show ")],64))]),e.createElementVNode("div",P,[t.showPerPageSelector?(e.openBlock(),e.createElementBlock("div",D,[c[1]||(c[1]=e.createElementVNode("span",{class:"text-sm"},"Rows per page:",-1)),e.createElementVNode("select",{value:t.currentPerPage||t.perPageOptions[0],class:"h-10 rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",onChange:c[0]||(c[0]=o=>s("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,$))),128))],40,R)])):e.createCommentVNode("",!0),t.pagination&&t.pagination.meta.last_page>1?(e.openBlock(),e.createElementBlock("div",T,[e.createElementVNode("nav",L,[e.createElementVNode("button",{disabled:!l.value,class:e.normalizeClass(["inline-flex items-center justify-center gap-1 h-10 w-10 text-sm font-medium transition-colors rounded-md p-2",l.value?"hover:bg-accent hover:text-accent-foreground":"opacity-50 cursor-not-allowed"]),onClick:g},[e.createVNode(e.unref(k.ChevronsLeft),{class:"h-5 w-5"}),c[2]||(c[2]=e.createElementVNode("span",{class:"sr-only"},"First",-1))],10,j),e.createElementVNode("button",{disabled:!l.value,class:e.normalizeClass(["inline-flex items-center justify-center gap-1 h-10 w-10 text-sm font-medium transition-colors rounded-md p-2",l.value?"hover:bg-accent hover:text-accent-foreground":"opacity-50 cursor-not-allowed"]),onClick:w},[e.createVNode(e.unref(k.ChevronLeft),{class:"h-5 w-5"}),c[3]||(c[3]=e.createElementVNode("span",{class:"sr-only"},"Previous",-1))],10,M),e.createElementVNode("div",F,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.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 min-w-10 px-3 text-sm font-medium transition-colors rounded-md",o===t.pagination.meta.current_page?"bg-primary text-primary-foreground hover:bg-primary/90":"hover:bg-accent hover:text-accent-foreground"]),onClick:m=>h(o)},e.toDisplayString(o),11,z)):(e.openBlock(),e.createElementBlock("span",I," ... "))],64))),128))]),e.createElementVNode("button",{disabled:!d.value,class:e.normalizeClass(["inline-flex items-center justify-center gap-1 h-10 w-10 text-sm font-medium transition-colors rounded-md p-2",d.value?"hover:bg-accent hover:text-accent-foreground":"opacity-50 cursor-not-allowed"]),onClick:y},[e.createVNode(e.unref(k.ChevronRight),{class:"h-5 w-5"}),c[4]||(c[4]=e.createElementVNode("span",{class:"sr-only"},"Next",-1))],10,O),e.createElementVNode("button",{disabled:!d.value,class:e.normalizeClass(["inline-flex items-center justify-center gap-1 h-10 w-10 text-sm font-medium transition-colors rounded-md p-2",d.value?"hover:bg-accent hover:text-accent-foreground":"opacity-50 cursor-not-allowed"]),onClick:v},[e.createVNode(e.unref(k.ChevronsRight),{class:"h-5 w-5"}),c[5]||(c[5]=e.createElementVNode("span",{class:"sr-only"},"Last",-1))],10,q)])])):e.createCommentVNode("",!0)])]))}}),_={class:"flex flex-col gap-4 bg-background text-foreground"},A={class:"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"},G={class:"flex flex-col gap-2 sm:flex-row sm:items-center"},U={key:0,class:"relative w-full max-w-sm"},H=["value"],Q={class:"flex items-center gap-2"},W={class:"flex items-center"},J={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"},K={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-background dark:border-gray-700"},re={key:0,class:"relative"},se={class:"relative w-full overflow-auto"},ce={class:"w-full caption-bottom text-sm"},ie={key:0,class:"mt-4 text-sm text-muted-foreground dark:text-gray-400"},de={key:0,class:"ml-2 text-blue-600 dark:text-blue-400"},ue={class:"[&_tr]:border-b bg-muted"},ge=["colspan"],me=["onClick"],fe={key:0},pe={class:"[&_tr:last-child]:border-0 dark:[&_tr:last-child]:border-0"},ke={key:1},be=["colspan"],he={key:1,class:"border-t"},ye=["colspan"],xe=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:b,emit:r}){const s=r,l=t,d=e.computed(()=>Object.keys(l.rowSelection||{}).filter(o=>{var n;return(n=l.rowSelection)==null?void 0:n[o]}).length),p=e.computed(()=>Object.keys(l.rowSelection||{}).filter(o=>{var n;return(n=l.rowSelection)==null?void 0:n[o]})),h=e.computed(()=>!l.data||!l.rowSelection?[]:l.data.filter(o=>l.rowSelection[l.getRowId(o)])),g=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;s("update:rowSelection",n)},enableMultiRowSelection:!0,enableSubRowSelection:!1}),v=()=>p.value,w=()=>h.value,y=()=>s("update:rowSelection",{}),u=()=>{const o={...l.rowSelection};g.getRowModel().rows.forEach(n=>{o[n.id]=!0}),s("update:rowSelection",o)},c=()=>{const o={...l.rowSelection};g.getRowModel().rows.forEach(n=>{delete o[n.id]}),s("update:rowSelection",o)};return b({getSelectedRowIds:v,getSelectedRowData:w,clearSelection:y,selectAllCurrentPage:u,deselectAllCurrentPage:c,selectedRowCount:d,selectedRowIds:p,selectedRowData:h,table:g}),(o,n)=>{var m,f;return e.openBlock(),e.createElementBlock("div",_,[e.createElementVNode("div",A,[e.createElementVNode("div",G,[t.showSearch?(e.openBlock(),e.createElementBlock("div",U,[e.createElementVNode("input",{value:t.search,type:"search",placeholder:"Search...",class:"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 ps-14 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 dark:bg-gray-800 dark:text-gray-200 dark:placeholder:text-gray-400",onInput:n[0]||(n[0]=a=>s("searchChange",a.target.value))},null,40,H)])):e.createCommentVNode("",!0),e.createElementVNode("div",Q,[e.renderSlot(o.$slots,"filters")])]),e.createElementVNode("div",W,[e.renderSlot(o.$slots,"header")])]),t.enableRowSelection&&d.value>0?(e.openBlock(),e.createElementBlock("div",J,[e.createElementVNode("div",K,[e.createElementVNode("span",X,e.toDisplayString(d.value)+" "+e.toDisplayString(t.itemName)+" selected ",1),e.createElementVNode("div",Y," IDs: "+e.toDisplayString(p.value.slice(0,5).join(", "))+e.toDisplayString(p.value.length>5?"...":""),1)]),e.createElementVNode("div",Z,[e.renderSlot(o.$slots,"bulk-actions",{selectedIds:p.value,selectedData:h.value,selectedCount:d.value,clearSelection:y,selectAllCurrentPage:u,deselectAllCurrentPage:c}),o.$slots["bulk-actions"]?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,onClick:y,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=>s("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",ce,[t.showCaption?(e.openBlock(),e.createElementBlock("caption",ie,[e.createTextVNode(e.toDisplayString(t.title)+" - Total: "+e.toDisplayString(((f=(m=t.pagination)==null?void 0:m.meta)==null?void 0:f.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",ue,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(g).getHeaderGroups(),a=>(e.openBlock(),e.createElementBlock("tr",{key:a.id,class:"border-b transition-colors"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.headers,i=>(e.openBlock(),e.createElementBlock("th",{key:i.id,colspan:i.colSpan,class:"h-12 px-4 text-left align-middle font-bold text-muted-foreground [&:has([role=checkbox])]:pr-0"},[i.isPlaceholder?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["flex items-center gap-2",i.column.getCanSort()?"cursor-pointer select-none hover:bg-accent p-2 rounded transition-colors":""]),onClick:we=>i.column.getCanSort()?s("sortChange",i.column.id):void 0},[e.createVNode(e.unref(x.FlexRender),{render:i.column.columnDef.header,props:i.getContext()},null,8,["render","props"]),i.column.getCanSort()?(e.openBlock(),e.createElementBlock("div",fe,[t.sortBy!==i.column.id?(e.openBlock(),e.createBlock(e.unref(k.ChevronsUpDown),{key:0,size:10,class:"text-gray-400"})):t.sortBy===i.column.id&&t.sortDirection==="asc"?(e.openBlock(),e.createBlock(e.unref(k.ChevronUp),{key:1,size:10,class:"text-gray-900 dark:text-gray-100"})):t.sortBy===i.column.id&&t.sortDirection==="desc"?(e.openBlock(),e.createBlock(e.unref(k.ChevronDown),{key:2,size:10,class:"text-gray-900 dark:text-gray-100"})):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],10,me))],8,ge))),128))]))),128))]),e.createElementVNode("tbody",pe,[e.unref(g).getRowModel().rows.length>0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(e.unref(g).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 dark:border-gray-700 dark:hover:bg-gray-800",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(),i=>(e.openBlock(),e.createElementBlock("td",{key:i.id,class:"p-4 align-middle [&:has([role=checkbox])]:pr-0"},[e.createVNode(e.unref(x.FlexRender),{render:i.column.columnDef.cell,props:i.getContext()},null,8,["render","props"])]))),128))],2))),128)):(e.openBlock(),e.createElementBlock("tr",ke,[e.createElementVNode("td",{colspan:t.columns.length,class:"h-24 text-center dark:text-gray-400"},e.toDisplayString(t.emptyStateText),9,be)]))]),t.pagination&&t.pagination.meta.last_page>1?(e.openBlock(),e.createElementBlock("tfoot",he,[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:t.columns.length,class:"p-0"},[e.createVNode(B,{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=>s("pageChange",a)),onPerPageChange:n[3]||(n[3]=a=>s("perPageChange",a))},null,8,["pagination","current-per-page","per-page-options","show-per-page-selector"])],8,ye)])])):e.createCommentVNode("",!0)])])]))])}}});function ve(...t){return C.twMerge(E.clsx(t))}exports.DataTable=xe;exports.DataTablePagination=B;exports.cn=ve;exports.useDarkMode=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),w=require("@tanstack/vue-table"),y=require("lucide-vue-next"),B=require("clsx"),C=require("tailwind-merge");function N(){const t=e.ref(!1);if(typeof window<"u"){const s=window.matchMedia("(prefers-color-scheme: dark)");t.value=s.matches,s.addEventListener("change",l=>{t.value=l.matches})}e.watchEffect(()=>{typeof document<"u"&&(t.value?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"))});function u(){t.value=!t.value}return{isDarkMode:t,toggleDarkMode:u}}function V(t){const{data:u,getRowId:s=n=>n.id}=t,l=e.ref({}),c=e.computed(()=>Object.keys(l.value).filter(n=>l.value[n])),f=e.computed(()=>u.value?u.value.filter(n=>c.value.includes(String(s(n)))):[]),g=e.computed(()=>!u.value||u.value.length===0?!1:u.value.every(n=>l.value[String(s(n))])),b=e.computed(()=>u.value?u.value.some(o=>l.value[String(s(o))])&&!g.value:!1),p=()=>{l.value={}},v=()=>{if(!u.value)return;const n={...l.value};g.value?u.value.forEach(o=>{delete n[String(s(o))]}):u.value.forEach(o=>{n[String(s(o))]=!0}),l.value=n},m=n=>{const o={...l.value};o[n]?delete o[n]:o[n]=!0,l.value=o};return{rowSelection:l,selectedRowIds:c,selectedRowData:f,isAllCurrentPageSelected:g,isSomeCurrentPageSelected:b,clearSelection:p,toggleAllCurrentPage:v,toggleRowSelection:m,selectRows:n=>{const o={...l.value};n.forEach(r=>{o[r]=!0}),l.value=o},deselectRows:n=>{const o={...l.value};n.forEach(r=>{delete o[r]}),l.value=o},getSelectionColumn:(n={})=>{const{headerClass:o="flex items-center justify-center",cellClass:r="flex items-center justify-center",checkboxClass:i="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2",size:S=50}=n;return{id:"select",header:()=>{const x=e.h("input",{type:"checkbox",class:i,checked:g.value,onChange:v});return b.value&&e.nextTick(()=>{const h=x.el;h&&(h.indeterminate=!0)}),e.h("div",{class:o},[x])},cell:({row:x})=>{const h=String(s(x.original));return e.h("div",{class:r},[e.h("input",{type:"checkbox",class:i,checked:!!l.value[h],onChange:()=>m(h)})])},enableSorting:!1,size:S}}}}const P={key:0,class:"flex items-center justify-between border-t border-border bg-background px-4 py-3 sm:px-6"},R={class:"flex flex-1 flex-wrap items-center justify-between gap-4"},D={class:"flex items-center gap-4"},$={class:"hidden text-sm text-muted-foreground sm:block"},T={class:"font-medium"},I={class:"font-medium"},M={class:"font-medium"},L={key:0,class:"flex items-center gap-2"},j=["value"],z=["value"],F={class:"relative z-0 inline-flex -space-x-px rounded-md shadow-sm","aria-label":"Pagination"},_=["disabled"],O=["onClick"],q={key:1,class:"relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700"},A=["disabled"],E=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:u}){const s=t,l=u,c=e.computed(()=>s.pagination?s.pagination.meta.current_page>1:!1),f=e.computed(()=>s.pagination?s.pagination.meta.current_page<s.pagination.meta.last_page:!1),g=e.computed(()=>{if(!s.pagination)return[];const m=s.pagination.meta.current_page,a=s.pagination.meta.last_page,d=2,k=[],n=[];let o;for(let r=1;r<=a;r++)(r===1||r===a||r>=m-d&&r<=m+d)&&k.push(r);for(const r of k)o&&(r-o===2?n.push(o+1):r-o!==1&&n.push("...")),n.push(r),o=r;return n}),b=m=>{typeof m=="number"&&l("pageChange",m)},p=()=>{c.value&&s.pagination&&l("pageChange",s.pagination.meta.current_page-1)},v=()=>{f.value&&s.pagination&&l("pageChange",s.pagination.meta.current_page+1)};return(m,a)=>t.pagination&&t.pagination.meta.last_page>1?(e.openBlock(),e.createElementBlock("div",P,[e.createElementVNode("div",R,[e.createElementVNode("div",D,[e.createElementVNode("p",$,[a[1]||(a[1]=e.createTextVNode(" Showing ",-1)),e.createElementVNode("span",T,e.toDisplayString(t.pagination.meta.from),1),a[2]||(a[2]=e.createTextVNode(" to ",-1)),e.createElementVNode("span",I,e.toDisplayString(t.pagination.meta.to),1),a[3]||(a[3]=e.createTextVNode(" of ",-1)),e.createElementVNode("span",M,e.toDisplayString(t.pagination.meta.total),1),a[4]||(a[4]=e.createTextVNode(" results ",-1))])]),t.showPerPageSelector?(e.openBlock(),e.createElementBlock("div",L,[a[5]||(a[5]=e.createElementVNode("p",{class:"text-sm text-muted-foreground"},"Rows per page:",-1)),e.createElementVNode("select",{value:t.currentPerPage,class:"rounded-md border border-gray-300 bg-white px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary",onChange:a[0]||(a[0]=d=>l("perPageChange",Number(d.target.value)))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.perPageOptions,d=>(e.openBlock(),e.createElementBlock("option",{key:d,value:d},e.toDisplayString(d),9,z))),128))],40,j)])):e.createCommentVNode("",!0),e.createElementVNode("div",null,[e.createElementVNode("nav",F,[e.createElementVNode("button",{disabled:!c.value,class:"relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50",onClick:p},[a[6]||(a[6]=e.createElementVNode("span",{class:"sr-only"},"Previous",-1)),e.createVNode(e.unref(y.ChevronLeft),{class:"h-5 w-5","aria-hidden":"true"})],8,_),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(g.value,(d,k)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:k},[d!=="..."?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(["relative inline-flex items-center border px-4 py-2 text-sm font-medium",d===t.pagination.meta.current_page?"z-10 border-primary bg-primary/10 text-primary":"border-gray-300 bg-white text-gray-500 hover:bg-gray-50"]),onClick:n=>b(d)},e.toDisplayString(d),11,O)):(e.openBlock(),e.createElementBlock("span",q," ... "))],64))),128)),e.createElementVNode("button",{disabled:!f.value,class:"relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50",onClick:v},[a[7]||(a[7]=e.createElementVNode("span",{class:"sr-only"},"Next",-1)),e.createVNode(e.unref(y.ChevronRight),{class:"h-5 w-5","aria-hidden":"true"})],8,A)])])])])):e.createCommentVNode("",!0)}}),G={class:"p-4 flex flex-col gap-4 bg-background text-foreground"},U={class:"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"},H={class:"flex flex-col gap-2 sm:flex-row sm:items-center"},Q={key:0,class:"relative w-full max-w-sm"},W=["value"],X={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"},Y={class:"flex items-center gap-4"},Z={class:"text-sm font-medium text-blue-700 dark:text-blue-300"},ee={class:"text-xs text-blue-600 dark:text-blue-400"},te={class:"flex items-center gap-2"},oe={key:1,class:"flex items-center justify-center p-8"},ne={class:"text-lg text-gray-700 dark:text-gray-200"},le={key:2,class:"flex flex-col items-center p-8"},re={class:"flex items-center gap-2 mb-2 text-lg text-red-600 dark:text-red-400"},ae={class:"mb-4 text-sm text-gray-600 dark:text-gray-300"},se={key:3,class:"rounded-lg border bg-background dark:border-gray-700"},ce={key:0,class:"relative"},ie={class:"relative w-full overflow-auto"},de={class:"w-full caption-bottom text-sm"},ue={class:"[&_tr]:border-b bg-muted"},ge=["colspan"],me=["onClick"],fe={key:0},pe={class:"[&_tr:last-child]:border-0 dark:[&_tr:last-child]:border-0"},be={key:1},ke=["colspan"],ye={class:"flex flex-col items-center gap-2"},ve={key:0,class:"border-t"},he=["colspan"],xe=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},showSelectionInfo:{type:Boolean,default:!0},showSearch:{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:u,emit:s}){const l=s,c=t,f=e.computed(()=>Object.keys(c.rowSelection||{}).filter(n=>{var o;return(o=c.rowSelection)==null?void 0:o[n]}).length),g=e.computed(()=>Object.keys(c.rowSelection||{}).filter(n=>{var o;return(o=c.rowSelection)==null?void 0:o[n]})),b=e.computed(()=>!c.data||!c.rowSelection?[]:c.data.filter(n=>c.rowSelection[c.getRowId(n)])),p=w.useVueTable({get data(){return c.data||[]},columns:c.columns,getCoreRowModel:w.getCoreRowModel(),enableSorting:!0,manualSorting:!0,enableRowSelection:c.enableRowSelection,getRowId:c.getRowId,state:{rowSelection:c.rowSelection||{}},onRowSelectionChange:n=>{const o=typeof n=="function"?n(c.rowSelection||{}):n;l("update:rowSelection",o)},enableMultiRowSelection:!0,enableSubRowSelection:!1}),v=()=>g.value,m=()=>b.value,a=()=>l("update:rowSelection",{}),d=()=>{const n={...c.rowSelection};p.getRowModel().rows.forEach(o=>{n[o.id]=!0}),l("update:rowSelection",n)},k=()=>{const n={...c.rowSelection};p.getRowModel().rows.forEach(o=>{delete n[o.id]}),l("update:rowSelection",n)};return u({getSelectedRowIds:v,getSelectedRowData:m,clearSelection:a,selectAllCurrentPage:d,deselectAllCurrentPage:k,selectedRowCount:f,selectedRowIds:g,selectedRowData:b,table:p}),(n,o)=>(e.openBlock(),e.createElementBlock("div",G,[e.createElementVNode("div",U,[e.createElementVNode("div",H,[t.showSearch?(e.openBlock(),e.createElementBlock("div",Q,[e.createElementVNode("input",{value:t.search,type:"search",placeholder:"Search...",class:"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 ps-14 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:o[0]||(o[0]=r=>l("searchChange",r.target.value))},null,40,W)])):e.createCommentVNode("",!0),e.createElementVNode("div",X,[e.renderSlot(n.$slots,"filters")])]),e.createElementVNode("div",J,[e.renderSlot(n.$slots,"header")])]),t.enableRowSelection&&f.value>0?e.renderSlot(n.$slots,"selection-info",{key:0,selectedIds:g.value,selectedData:b.value,selectedCount:f.value,clearSelection:a,selectAllCurrentPage:d,deselectAllCurrentPage:k},()=>[t.showSelectionInfo?(e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("div",Y,[e.createElementVNode("span",Z,e.toDisplayString(f.value)+" "+e.toDisplayString(t.itemName)+" selected ",1),e.createElementVNode("div",ee," IDs: "+e.toDisplayString(g.value.slice(0,5).join(", "))+e.toDisplayString(g.value.length>5?"...":""),1)]),e.createElementVNode("div",te,[e.renderSlot(n.$slots,"bulk-actions",{selectedIds:g.value,selectedData:b.value,selectedCount:f.value,clearSelection:a,selectAllCurrentPage:d,deselectAllCurrentPage:k}),n.$slots["bulk-actions"]?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,onClick:a,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)]):e.createCommentVNode("",!0),t.isLoading&&!t.data?(e.openBlock(),e.createElementBlock("div",oe,[o[4]||(o[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",ne,e.toDisplayString(t.loadingText),1)])):t.error?(e.openBlock(),e.createElementBlock("div",le,[e.createElementVNode("div",re,[e.createVNode(e.unref(y.CircleX),{class:"size-6"}),e.createElementVNode("span",null,e.toDisplayString(t.errorTitle),1)]),e.createElementVNode("div",ae,e.toDisplayString(t.error.message),1),e.createElementVNode("button",{class:"flex items-center gap-2 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:o[1]||(o[1]=r=>l("retry"))},[e.createVNode(e.unref(y.RefreshCw),{class:"size-4"}),o[5]||(o[5]=e.createElementVNode("span",null,"Retry",-1))])])):(e.openBlock(),e.createElementBlock("div",se,[t.isLoading?(e.openBlock(),e.createElementBlock("div",ce,[...o[6]||(o[6]=[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",ie,[e.createElementVNode("table",de,[e.createElementVNode("thead",ue,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(p).getHeaderGroups(),r=>(e.openBlock(),e.createElementBlock("tr",{key:r.id,class:"border-b transition-colors"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.headers,i=>(e.openBlock(),e.createElementBlock("th",{key:i.id,colspan:i.colSpan,class:"h-12 px-4 text-left align-middle font-bold text-muted-foreground [&:has([role=checkbox])]:pr-0"},[i.isPlaceholder?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["flex items-center gap-2",i.column.getCanSort()?"cursor-pointer select-none hover:bg-accent p-2 rounded transition-colors":""]),onClick:S=>i.column.getCanSort()?l("sortChange",i.column.id):void 0},[e.createVNode(e.unref(w.FlexRender),{render:i.column.columnDef.header,props:i.getContext()},null,8,["render","props"]),i.column.getCanSort()?(e.openBlock(),e.createElementBlock("div",fe,[t.sortBy!==i.column.id?(e.openBlock(),e.createBlock(e.unref(y.ChevronsUpDown),{key:0,size:10,class:"text-gray-400"})):t.sortBy===i.column.id&&t.sortDirection==="asc"?(e.openBlock(),e.createBlock(e.unref(y.ChevronUp),{key:1,size:10,class:"text-gray-900 dark:text-gray-100"})):t.sortBy===i.column.id&&t.sortDirection==="desc"?(e.openBlock(),e.createBlock(e.unref(y.ChevronDown),{key:2,size:10,class:"text-gray-900 dark:text-gray-100"})):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],10,me))],8,ge))),128))]))),128))]),e.createElementVNode("tbody",pe,[e.unref(p).getRowModel().rows.length>0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(e.unref(p).getRowModel().rows,r=>(e.openBlock(),e.createElementBlock("tr",{key:r.id,class:e.normalizeClass(["border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted dark:border-gray-700 dark:hover:bg-gray-800",t.enableRowSelection&&r.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(r.getVisibleCells(),i=>(e.openBlock(),e.createElementBlock("td",{key:i.id,class:"p-4 align-middle [&:has([role=checkbox])]:pr-0"},[e.createVNode(e.unref(w.FlexRender),{render:i.column.columnDef.cell,props:i.getContext()},null,8,["render","props"])]))),128))],2))),128)):(e.openBlock(),e.createElementBlock("tr",be,[e.createElementVNode("td",{colspan:t.columns.length,class:"h-24 text-center dark:text-gray-400"},[e.createElementVNode("div",ye,[e.createVNode(e.unref(y.Inbox),{class:"size-8 text-muted-foreground"}),e.createElementVNode("span",null,e.toDisplayString(t.emptyStateText),1)])],8,ke)]))]),t.pagination&&t.pagination.meta.last_page>1?(e.openBlock(),e.createElementBlock("tfoot",ve,[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:t.columns.length,class:"p-0"},[e.createVNode(E,{pagination:t.pagination,"current-per-page":t.currentPerPage,"per-page-options":t.perPageOptions,"show-per-page-selector":t.showPerPageSelector,onPageChange:o[2]||(o[2]=r=>l("pageChange",r)),onPerPageChange:o[3]||(o[3]=r=>l("perPageChange",r))},null,8,["pagination","current-per-page","per-page-options","show-per-page-selector"])],8,he)])])):e.createCommentVNode("",!0)])])]))]))}});function we(...t){return C.twMerge(B.clsx(t))}exports.DataTable=xe;exports.DataTablePagination=E;exports.cn=we;exports.useDarkMode=N;exports.useRowSelection=V;