@toniel/laravel-tanstack-datatable 0.1.6 → 0.1.7

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
 
@@ -142,7 +142,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 +155,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 +179,7 @@ Add action buttons (e.g., Create button):
 <DataTable ...>
   <template #header>
     <button @click="openCreateModal" class="...">
-      ➕ Add User
+      Add User
     </button>
   </template>
 </DataTable>
@@ -196,7 +196,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 +205,7 @@ Add bulk action buttons when rows are selected:
 </DataTable>
 ```
 
-## 📖 Advanced Examples
+## Advanced Examples
 
 ### With Row Selection
 
@@ -278,7 +278,7 @@ const columns = [
 </script>
 ```
 
-## 🎨 Styling
+## Styling
 
 This package uses Tailwind CSS utility classes. Make sure Tailwind is configured in your project.
 
@@ -304,7 +304,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 +330,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

@@ -15,7 +15,6 @@ interface Props {
     enableRowSelection?: boolean;
     getRowId?: (row: any) => string;
     showSearch?: boolean;
-    showCaption?: boolean;
     showPerPageSelector?: boolean;
     title?: string;
     itemName?: string;
@@ -81,7 +80,6 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {
     enableRowSelection: boolean;
     getRowId: (row: any) => string;
     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":"AA2XA,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,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;AAiJD,iBAAS,cAAc;WA4WT,OAAO,IAA6B;;yBAZrB,GAAG;wBACJ,GAAG;;;;;;;;YACK,GAAG;;;;EAetC;AA0BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;gBArjBN,yBAAyB,GAAG,IAAI;oBAK5B,MAAM,EAAE;oBADR,MAAM;yBAYD,OAAO;YAbpB,MAAM;UALR,GAAG,EAAE;WAqBJ,MAAM;eAlBF,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;cAKT,MAAM;iBACH,MAAM;gBACP,MAAM;oBACF,MAAM;wFAwiBvB,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/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"),x=require("@tanstack/vue-table"),m=require("lucide-vue-next"),w=require("clsx"),E=require("tailwind-merge");function B(){const t=e.ref(!1);if(typeof window<"u"){const s=window.matchMedia("(prefers-color-scheme: dark)");t.value=s.matches,s.addEventListener("change",c=>{t.value=c.matches})}e.watchEffect(()=>{typeof document<"u"&&(t.value?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"))});function k(){t.value=!t.value}return{isDarkMode:t,toggleDarkMode:k}}const N={key:0,class:"flex items-center justify-between border-t border-border bg-background px-4 py-3 sm:px-6"},S={class:"flex flex-1 flex-wrap items-center justify-between gap-4"},V={class:"flex items-center gap-4"},C={class:"hidden text-sm text-muted-foreground sm:block"},P={class:"font-medium"},D={class:"font-medium"},R={class:"font-medium"},$={key:0,class:"flex items-center gap-2"},T=["value"],M=["value"],L={class:"relative z-0 inline-flex -space-x-px rounded-md shadow-sm","aria-label":"Pagination"},_=["disabled"],z=["onClick"],I={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"},j=["disabled"],v=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:k}){const s=t,c=k,a=e.computed(()=>s.pagination?s.pagination.meta.current_page>1:!1),p=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,l=s.pagination.meta.last_page,i=2,b=[],n=[];let o;for(let r=1;r<=l;r++)(r===1||r===l||r>=g-i&&r<=g+i)&&b.push(r);for(const r of b)o&&(r-o===2?n.push(o+1):r-o!==1&&n.push("...")),n.push(r),o=r;return n}),y=g=>{typeof g=="number"&&c("pageChange",g)},u=()=>{a.value&&s.pagination&&c("pageChange",s.pagination.meta.current_page-1)},h=()=>{p.value&&s.pagination&&c("pageChange",s.pagination.meta.current_page+1)};return(g,l)=>t.pagination&&t.pagination.meta.last_page>1?(e.openBlock(),e.createElementBlock("div",N,[e.createElementVNode("div",S,[e.createElementVNode("div",V,[e.createElementVNode("p",C,[l[1]||(l[1]=e.createTextVNode(" Showing ",-1)),e.createElementVNode("span",P,e.toDisplayString(t.pagination.meta.from),1),l[2]||(l[2]=e.createTextVNode(" to ",-1)),e.createElementVNode("span",D,e.toDisplayString(t.pagination.meta.to),1),l[3]||(l[3]=e.createTextVNode(" of ",-1)),e.createElementVNode("span",R,e.toDisplayString(t.pagination.meta.total),1),l[4]||(l[4]=e.createTextVNode(" results ",-1))])]),t.showPerPageSelector?(e.openBlock(),e.createElementBlock("div",$,[l[5]||(l[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:l[0]||(l[0]=i=>c("perPageChange",Number(i.target.value)))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.perPageOptions,i=>(e.openBlock(),e.createElementBlock("option",{key:i,value:i},e.toDisplayString(i),9,M))),128))],40,T)])):e.createCommentVNode("",!0),e.createElementVNode("div",null,[e.createElementVNode("nav",L,[e.createElementVNode("button",{disabled:!a.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:u},[l[6]||(l[6]=e.createElementVNode("span",{class:"sr-only"},"Previous",-1)),e.createVNode(e.unref(m.ChevronLeft),{class:"h-5 w-5","aria-hidden":"true"})],8,_),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.value,(i,b)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:b},[i!=="..."?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(["relative inline-flex items-center border px-4 py-2 text-sm font-medium",i===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=>y(i)},e.toDisplayString(i),11,z)):(e.openBlock(),e.createElementBlock("span",I," ... "))],64))),128)),e.createElementVNode("button",{disabled:!p.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:h},[l[7]||(l[7]=e.createElementVNode("span",{class:"sr-only"},"Next",-1)),e.createVNode(e.unref(m.ChevronRight),{class:"h-5 w-5","aria-hidden":"true"})],8,j)])])])])):e.createCommentVNode("",!0)}}),F={class:"p-4 flex flex-col gap-4 bg-background text-foreground"},O={class:"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"},q={class:"flex flex-col gap-2 sm:flex-row sm:items-center"},A={key:0,class:"relative w-full max-w-sm"},G=["value"],U={class:"flex items-center gap-2"},H={class:"flex items-center"},Q={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"},W={class:"flex items-center gap-4"},X={class:"text-sm font-medium text-blue-700 dark:text-blue-300"},J={class:"text-xs text-blue-600 dark:text-blue-400"},K={class:"flex items-center gap-2"},Y={key:1,class:"flex items-center justify-center p-8"},Z={class:"text-lg text-gray-700 dark:text-gray-200"},ee={key:2,class:"flex flex-col items-center p-8"},te={class:"flex items-center gap-2 mb-2 text-lg text-red-600 dark:text-red-400"},oe={class:"mb-4 text-sm text-gray-600 dark:text-gray-300"},ne={key:3,class:"rounded-lg border bg-background dark:border-gray-700"},re={key:0,class:"relative"},le={class:"relative w-full overflow-auto"},ae={class:"w-full caption-bottom text-sm"},se={class:"[&_tr]:border-b bg-muted"},ce=["colspan"],ie=["onClick"],de={key:0},ue={class:"[&_tr:last-child]:border-0 dark:[&_tr:last-child]:border-0"},ge={key:1},me=["colspan"],pe={class:"flex flex-col items-center gap-2"},fe={key:0,class:"border-t"},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},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:k,emit:s}){const c=s,a=t,p=e.computed(()=>Object.keys(a.rowSelection||{}).filter(n=>{var o;return(o=a.rowSelection)==null?void 0:o[n]}).length),f=e.computed(()=>Object.keys(a.rowSelection||{}).filter(n=>{var o;return(o=a.rowSelection)==null?void 0:o[n]})),y=e.computed(()=>!a.data||!a.rowSelection?[]:a.data.filter(n=>a.rowSelection[a.getRowId(n)])),u=x.useVueTable({get data(){return a.data||[]},columns:a.columns,getCoreRowModel:x.getCoreRowModel(),enableSorting:!0,manualSorting:!0,enableRowSelection:a.enableRowSelection,getRowId:a.getRowId,state:{rowSelection:a.rowSelection||{}},onRowSelectionChange:n=>{const o=typeof n=="function"?n(a.rowSelection||{}):n;c("update:rowSelection",o)},enableMultiRowSelection:!0,enableSubRowSelection:!1}),h=()=>f.value,g=()=>y.value,l=()=>c("update:rowSelection",{}),i=()=>{const n={...a.rowSelection};u.getRowModel().rows.forEach(o=>{n[o.id]=!0}),c("update:rowSelection",n)},b=()=>{const n={...a.rowSelection};u.getRowModel().rows.forEach(o=>{delete n[o.id]}),c("update:rowSelection",n)};return k({getSelectedRowIds:h,getSelectedRowData:g,clearSelection:l,selectAllCurrentPage:i,deselectAllCurrentPage:b,selectedRowCount:p,selectedRowIds:f,selectedRowData:y,table:u}),(n,o)=>(e.openBlock(),e.createElementBlock("div",F,[e.createElementVNode("div",O,[e.createElementVNode("div",q,[t.showSearch?(e.openBlock(),e.createElementBlock("div",A,[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=>c("searchChange",r.target.value))},null,40,G)])):e.createCommentVNode("",!0),e.createElementVNode("div",U,[e.renderSlot(n.$slots,"filters")])]),e.createElementVNode("div",H,[e.renderSlot(n.$slots,"header")])]),t.enableRowSelection&&p.value>0?(e.openBlock(),e.createElementBlock("div",Q,[e.createElementVNode("div",W,[e.createElementVNode("span",X,e.toDisplayString(p.value)+" "+e.toDisplayString(t.itemName)+" selected ",1),e.createElementVNode("div",J," IDs: "+e.toDisplayString(f.value.slice(0,5).join(", "))+e.toDisplayString(f.value.length>5?"...":""),1)]),e.createElementVNode("div",K,[e.renderSlot(n.$slots,"bulk-actions",{selectedIds:f.value,selectedData:y.value,selectedCount:p.value,clearSelection:l,selectAllCurrentPage:i,deselectAllCurrentPage:b}),n.$slots["bulk-actions"]?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,onClick:l,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",Y,[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",Z,e.toDisplayString(t.loadingText),1)])):t.error?(e.openBlock(),e.createElementBlock("div",ee,[e.createElementVNode("div",te,[e.createVNode(e.unref(m.CircleX),{class:"size-6"}),e.createElementVNode("span",null,e.toDisplayString(t.errorTitle),1)]),e.createElementVNode("div",oe,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=>c("retry"))},[e.createVNode(e.unref(m.RefreshCw),{class:"size-4"}),o[5]||(o[5]=e.createElementVNode("span",null,"Retry",-1))])])):(e.openBlock(),e.createElementBlock("div",ne,[t.isLoading?(e.openBlock(),e.createElementBlock("div",re,[...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",le,[e.createElementVNode("table",ae,[e.createElementVNode("thead",se,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(u).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,d=>(e.openBlock(),e.createElementBlock("th",{key:d.id,colspan:d.colSpan,class:"h-12 px-4 text-left align-middle font-bold text-muted-foreground [&:has([role=checkbox])]:pr-0"},[d.isPlaceholder?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["flex items-center gap-2",d.column.getCanSort()?"cursor-pointer select-none hover:bg-accent p-2 rounded transition-colors":""]),onClick:xe=>d.column.getCanSort()?c("sortChange",d.column.id):void 0},[e.createVNode(e.unref(x.FlexRender),{render:d.column.columnDef.header,props:d.getContext()},null,8,["render","props"]),d.column.getCanSort()?(e.openBlock(),e.createElementBlock("div",de,[t.sortBy!==d.column.id?(e.openBlock(),e.createBlock(e.unref(m.ChevronsUpDown),{key:0,size:10,class:"text-gray-400"})):t.sortBy===d.column.id&&t.sortDirection==="asc"?(e.openBlock(),e.createBlock(e.unref(m.ChevronUp),{key:1,size:10,class:"text-gray-900 dark:text-gray-100"})):t.sortBy===d.column.id&&t.sortDirection==="desc"?(e.openBlock(),e.createBlock(e.unref(m.ChevronDown),{key:2,size:10,class:"text-gray-900 dark:text-gray-100"})):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],10,ie))],8,ce))),128))]))),128))]),e.createElementVNode("tbody",ue,[e.unref(u).getRowModel().rows.length>0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(e.unref(u).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(),d=>(e.openBlock(),e.createElementBlock("td",{key:d.id,class:"p-4 align-middle [&:has([role=checkbox])]:pr-0"},[e.createVNode(e.unref(x.FlexRender),{render:d.column.columnDef.cell,props:d.getContext()},null,8,["render","props"])]))),128))],2))),128)):(e.openBlock(),e.createElementBlock("tr",ge,[e.createElementVNode("td",{colspan:t.columns.length,class:"h-24 text-center dark:text-gray-400"},[e.createElementVNode("div",pe,[e.createVNode(e.unref(m.Inbox),{class:"size-8 text-muted-foreground"}),e.createElementVNode("span",null,e.toDisplayString(t.emptyStateText),1)])],8,me)]))]),t.pagination&&t.pagination.meta.last_page>1?(e.openBlock(),e.createElementBlock("tfoot",fe,[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:t.columns.length,class:"p-0"},[e.createVNode(v,{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=>c("pageChange",r)),onPerPageChange:o[3]||(o[3]=r=>c("perPageChange",r))},null,8,["pagination","current-per-page","per-page-options","show-per-page-selector"])],8,be)])])):e.createCommentVNode("",!0)])])]))]))}});function ye(...t){return E.twMerge(w.clsx(t))}exports.DataTable=ke;exports.DataTablePagination=v;exports.cn=ye;exports.useDarkMode=B;

package/dist/index.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toniel/laravel-tanstack-datatable",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Vue 3 DataTable components for Laravel pagination with TanStack Query and shadcn-vue",
   "type": "module",
   "main": "./dist/index.js",