@toniel/laravel-tanstack-datatable 0.1.7 → 0.1.8

package/README.md

@@ -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 |
@@ -205,6 +206,33 @@ Add bulk action buttons when rows are selected:
 </DataTable>
 ```
 
+#### `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,6 +306,99 @@ const columns = [
 </script>
 ```
 
+### 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.

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

@@ -14,6 +14,7 @@ interface Props {
     rowSelection?: RowSelectionState;
     enableRowSelection?: boolean;
     getRowId?: (row: any) => string;
+    showSelectionInfo?: boolean;
     showSearch?: boolean;
     showPerPageSelector?: boolean;
     title?: string;
@@ -27,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[];
@@ -65,20 +74,21 @@ 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;
     itemName: string;
     loadingText: 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":"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"}
+{"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/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"),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;
+"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;

package/dist/index.mjs

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

package/package.json

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