@toniel/laravel-tanstack-datatable 0.1.5 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -26
- package/dist/components/DataTable.vue.d.ts +0 -2
- package/dist/components/DataTable.vue.d.ts.map +1 -1
- package/dist/components/DataTablePagination.vue.d.ts +1 -1
- package/dist/components/DataTablePagination.vue.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +304 -318
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,9 +7,9 @@
|
|
|
7
7
|
|
|
8
8
|
Vue 3 DataTable components for Laravel pagination with TanStack Query and TanStack Table.
|
|
9
9
|
|
|
10
|
-
>
|
|
10
|
+
> **Companion Package**: This package works together with [`@toniel/laravel-tanstack-pagination`](https://github.com/toniel/laravel-tanstack-pagination) - the core composables library.
|
|
11
11
|
|
|
12
|
-
##
|
|
12
|
+
## Installation
|
|
13
13
|
|
|
14
14
|
```bash
|
|
15
15
|
npm install @toniel/laravel-tanstack-datatable @toniel/laravel-tanstack-pagination
|
|
@@ -29,7 +29,7 @@ This package requires the following peer dependencies:
|
|
|
29
29
|
npm install vue @tanstack/vue-query @tanstack/vue-table
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
-
##
|
|
32
|
+
## Quick Start
|
|
33
33
|
|
|
34
34
|
### Basic Usage
|
|
35
35
|
|
|
@@ -105,18 +105,18 @@ const {
|
|
|
105
105
|
</template>
|
|
106
106
|
```
|
|
107
107
|
|
|
108
|
-
##
|
|
108
|
+
## Features
|
|
109
109
|
|
|
110
|
-
###
|
|
111
|
-
-
|
|
112
|
-
-
|
|
113
|
-
-
|
|
114
|
-
-
|
|
115
|
-
-
|
|
116
|
-
-
|
|
117
|
-
-
|
|
110
|
+
### Core Features
|
|
111
|
+
- **Search** with debounce
|
|
112
|
+
- **Pagination** with Laravel meta
|
|
113
|
+
- **Sorting** (client & server-side)
|
|
114
|
+
- **Row selection** with bulk actions
|
|
115
|
+
- **Dark mode** support
|
|
116
|
+
- **Loading states** & error handling
|
|
117
|
+
- **Fully customizable** via slots
|
|
118
118
|
|
|
119
|
-
###
|
|
119
|
+
### Component Props
|
|
120
120
|
|
|
121
121
|
#### DataTable Props
|
|
122
122
|
|
|
@@ -142,7 +142,7 @@ const {
|
|
|
142
142
|
| `itemName` | `string` | `'items'` | Item name for pluralization |
|
|
143
143
|
| `loadingText` | `string` | `'Loading...'` | Loading text |
|
|
144
144
|
| `errorTitle` | `string` | `'Error loading data'` | Error title |
|
|
145
|
-
| `emptyStateText` | `string` | `'
|
|
145
|
+
| `emptyStateText` | `string` | `'No items found'` | Empty state text |
|
|
146
146
|
|
|
147
147
|
#### DataTable Events
|
|
148
148
|
|
|
@@ -155,7 +155,7 @@ const {
|
|
|
155
155
|
| `retry` | - | Emitted when retry button clicked |
|
|
156
156
|
| `update:rowSelection` | `RowSelectionState` | Emitted when row selection changes |
|
|
157
157
|
|
|
158
|
-
###
|
|
158
|
+
### Slots
|
|
159
159
|
|
|
160
160
|
#### `filters` Slot
|
|
161
161
|
Add custom filters next to search input:
|
|
@@ -179,7 +179,7 @@ Add action buttons (e.g., Create button):
|
|
|
179
179
|
<DataTable ...>
|
|
180
180
|
<template #header>
|
|
181
181
|
<button @click="openCreateModal" class="...">
|
|
182
|
-
|
|
182
|
+
Add User
|
|
183
183
|
</button>
|
|
184
184
|
</template>
|
|
185
185
|
</DataTable>
|
|
@@ -196,7 +196,7 @@ Add bulk action buttons when rows are selected:
|
|
|
196
196
|
>
|
|
197
197
|
<template #bulk-actions="{ selectedIds, selectedData, clearSelection }">
|
|
198
198
|
<button @click="bulkDelete(selectedIds)" class="...">
|
|
199
|
-
|
|
199
|
+
Delete Selected
|
|
200
200
|
</button>
|
|
201
201
|
<button @click="clearSelection" class="...">
|
|
202
202
|
Clear
|
|
@@ -205,7 +205,7 @@ Add bulk action buttons when rows are selected:
|
|
|
205
205
|
</DataTable>
|
|
206
206
|
```
|
|
207
207
|
|
|
208
|
-
##
|
|
208
|
+
## Advanced Examples
|
|
209
209
|
|
|
210
210
|
### With Row Selection
|
|
211
211
|
|
|
@@ -278,7 +278,7 @@ const columns = [
|
|
|
278
278
|
</script>
|
|
279
279
|
```
|
|
280
280
|
|
|
281
|
-
##
|
|
281
|
+
## Styling
|
|
282
282
|
|
|
283
283
|
This package uses Tailwind CSS utility classes. Make sure Tailwind is configured in your project.
|
|
284
284
|
|
|
@@ -304,7 +304,7 @@ You can override styles using Tailwind classes or custom CSS:
|
|
|
304
304
|
}
|
|
305
305
|
```
|
|
306
306
|
|
|
307
|
-
##
|
|
307
|
+
## Theming
|
|
308
308
|
|
|
309
309
|
The components use Tailwind CSS and support dark mode out of the box. You can customize colors by:
|
|
310
310
|
|
|
@@ -330,19 +330,19 @@ module.exports = {
|
|
|
330
330
|
}
|
|
331
331
|
```
|
|
332
332
|
|
|
333
|
-
##
|
|
333
|
+
## Related Packages
|
|
334
334
|
|
|
335
335
|
- [`@toniel/laravel-tanstack-pagination`](https://github.com/toniel/laravel-tanstack-pagination) - Core composables (required)
|
|
336
336
|
- [`@tanstack/vue-query`](https://tanstack.com/query/latest/docs/vue/overview) - Data fetching & caching
|
|
337
337
|
- [`@tanstack/vue-table`](https://tanstack.com/table/latest/docs/framework/vue/vue-table) - Table state management
|
|
338
338
|
|
|
339
|
-
##
|
|
339
|
+
## Show Your Support
|
|
340
340
|
|
|
341
341
|
If this package helped you, please consider:
|
|
342
|
-
-
|
|
343
|
-
-
|
|
344
|
-
-
|
|
345
|
-
-
|
|
342
|
+
- Starring the [GitHub repository](https://github.com/toniel/laravel-tanstack-datatable)
|
|
343
|
+
- [Reporting bugs](https://github.com/toniel/laravel-tanstack-datatable/issues)
|
|
344
|
+
- [Suggesting new features](https://github.com/toniel/laravel-tanstack-datatable/issues)
|
|
345
|
+
- [Contributing code](https://github.com/toniel/laravel-tanstack-datatable/pulls)
|
|
346
346
|
|
|
347
347
|
## 📄 License
|
|
348
348
|
|
|
@@ -15,7 +15,6 @@ interface Props {
|
|
|
15
15
|
enableRowSelection?: boolean;
|
|
16
16
|
getRowId?: (row: any) => string;
|
|
17
17
|
showSearch?: boolean;
|
|
18
|
-
showCaption?: boolean;
|
|
19
18
|
showPerPageSelector?: boolean;
|
|
20
19
|
title?: string;
|
|
21
20
|
itemName?: string;
|
|
@@ -81,7 +80,6 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {
|
|
|
81
80
|
enableRowSelection: boolean;
|
|
82
81
|
getRowId: (row: any) => string;
|
|
83
82
|
showSearch: boolean;
|
|
84
|
-
showCaption: boolean;
|
|
85
83
|
itemName: string;
|
|
86
84
|
loadingText: string;
|
|
87
85
|
errorTitle: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.vue.d.ts","sourceRoot":"","sources":["../../src/components/DataTable.vue"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -16,6 +16,6 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
|
|
|
16
16
|
perPageOptions: number[];
|
|
17
17
|
currentPerPage: number;
|
|
18
18
|
showPerPageSelector: boolean;
|
|
19
|
-
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {},
|
|
19
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
20
20
|
export default _default;
|
|
21
21
|
//# sourceMappingURL=DataTablePagination.vue.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTablePagination.vue.d.ts","sourceRoot":"","sources":["../../src/components/DataTablePagination.vue"],"names":[],"mappings":"
|
|
1
|
+
{"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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),h=require("@tanstack/vue-table"),p=require("lucide-vue-next"),E=require("clsx"),S=require("tailwind-merge");function C(){const t=e.ref(!1);if(typeof window<"u"){const l=window.matchMedia("(prefers-color-scheme: dark)");t.value=l.matches,l.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 y(){t.value=!t.value}return{isDarkMode:t,toggleDarkMode:y}}const N={class:"flex flex-col gap-4 px-2 py-4 bg-background text-foreground"},V={key:0,class:"flex justify-center"},P={class:"flex items-center gap-1",role:"navigation","aria-label":"pagination"},D=["disabled"],R=["disabled"],$={class:"flex items-center gap-1"},T=["onClick"],L={key:1,class:"inline-flex items-center justify-center h-10 min-w-10 px-3 text-gray-500"},j=["disabled"],M=["disabled"],F={class:"flex items-center justify-between text-sm text-gray-600 dark:text-gray-300"},z={key:0,class:"flex items-center gap-2"},I=["value"],O=["value"],q={key:1},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:y}){const l=t,s=y,r=e.computed(()=>l.pagination?l.pagination.meta.current_page>1:!1),d=e.computed(()=>l.pagination?l.pagination.meta.current_page<l.pagination.meta.last_page:!1),f=e.computed(()=>{if(!l.pagination)return[];const g=l.pagination.meta.current_page,i=l.pagination.meta.last_page,o=2,n=[],m=[];let k;for(let a=1;a<=i;a++)(a===1||a===i||a>=g-o&&a<=g+o)&&n.push(a);for(const a of n)k&&(a-k===2?m.push(k+1):a-k!==1&&m.push("...")),m.push(a),k=a;return m}),b=g=>{typeof g=="number"&&s("pageChange",g)},u=()=>{r.value&&s("pageChange",1)},v=()=>{d.value&&l.pagination&&s("pageChange",l.pagination.meta.last_page)},w=()=>{r.value&&l.pagination&&s("pageChange",l.pagination.meta.current_page-1)},x=()=>{d.value&&l.pagination&&s("pageChange",l.pagination.meta.current_page+1)};return(g,i)=>(e.openBlock(),e.createElementBlock("div",N,[t.pagination&&t.pagination.meta.last_page>1?(e.openBlock(),e.createElementBlock("div",V,[e.createElementVNode("nav",P,[e.createElementVNode("button",{disabled:!r.value,class:e.normalizeClass(["inline-flex items-center justify-center gap-1 h-10 px-4 py-2 text-sm font-medium transition-colors rounded-md",r.value?"hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200":"opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600"]),onClick:u},[e.createVNode(e.unref(p.ChevronsLeft),{class:"h-4 w-4"}),i[1]||(i[1]=e.createElementVNode("span",{class:"hidden sm:inline"},"First",-1))],10,D),e.createElementVNode("button",{disabled:!r.value,class:e.normalizeClass(["inline-flex items-center justify-center gap-1 h-10 px-4 py-2 text-sm font-medium transition-colors rounded-md",r.value?"hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200":"opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600"]),onClick:w},[e.createVNode(e.unref(p.ChevronLeft),{class:"h-4 w-4"}),i[2]||(i[2]=e.createElementVNode("span",{class:"hidden sm:inline"},"Previous",-1))],10,R),e.createElementVNode("div",$,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.value,(o,n)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:n},[o!=="..."?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(["inline-flex items-center justify-center h-10 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 dark:bg-primary dark:text-primary-foreground":"hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200"]),onClick:m=>b(o)},e.toDisplayString(o),11,T)):(e.openBlock(),e.createElementBlock("span",L," ... "))],64))),128))]),e.createElementVNode("button",{disabled:!d.value,class:e.normalizeClass(["inline-flex items-center justify-center gap-1 h-10 px-4 py-2 text-sm font-medium transition-colors rounded-md",d.value?"hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200":"opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600"]),onClick:x},[i[3]||(i[3]=e.createElementVNode("span",{class:"hidden sm:inline"},"Next",-1)),e.createVNode(e.unref(p.ChevronRight),{class:"h-4 w-4"})],10,j),e.createElementVNode("button",{disabled:!d.value,class:e.normalizeClass(["inline-flex items-center justify-center gap-1 h-10 px-4 py-2 text-sm font-medium transition-colors rounded-md",d.value?"hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200":"opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600"]),onClick:v},[i[4]||(i[4]=e.createElementVNode("span",{class:"hidden sm:inline"},"Last",-1)),e.createVNode(e.unref(p.ChevronsRight),{class:"h-4 w-4"})],10,M)])])):e.createCommentVNode("",!0),e.createElementVNode("div",F,[e.createElementVNode("div",null,[t.pagination&&t.pagination.meta.total>0?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(" Showing "+e.toDisplayString(t.pagination.meta.from)+" to "+e.toDisplayString(t.pagination.meta.to)+" of "+e.toDisplayString(t.pagination.meta.total)+" entries ",1)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(" No entries found ")],64))]),t.showPerPageSelector?(e.openBlock(),e.createElementBlock("div",z,[i[5]||(i[5]=e.createElementVNode("span",null,"Rows per page:",-1)),e.createElementVNode("select",{value:t.currentPerPage||t.perPageOptions[0],class:"h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-700",onChange:i[0]||(i[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,O))),128))],40,I)])):e.createCommentVNode("",!0),t.pagination?(e.openBlock(),e.createElementBlock("div",q," Page "+e.toDisplayString(t.pagination.meta.current_page)+" of "+e.toDisplayString(t.pagination.meta.last_page),1)):e.createCommentVNode("",!0)])]))}}),A={class:"flex flex-col gap-4 bg-background text-foreground"},G={class:"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"},U={class:"flex flex-col gap-2 sm:flex-row sm:items-center"},_={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"},re={key:3,class:"rounded-lg border bg-background dark:border-gray-700"},le={key:0,class:"relative"},se={class:"relative w-full overflow-auto"},ie={class:"w-full caption-bottom text-sm"},ce={key:0,class:"mt-4 text-sm text-muted-foreground dark:text-gray-400"},de={key:0,class:"ml-2 text-blue-600 dark:text-blue-400"},ge={class:"[&_tr]:border-b dark:[&_tr]:border-gray-700"},ue=["colspan"],me=["onClick"],ke={key:0},fe={class:"[&_tr:last-child]:border-0 dark:[&_tr:last-child]:border-0"},pe={key:1},ye=["colspan"],be=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:y,emit:l}){const s=l,r=t,d=e.computed(()=>Object.keys(r.rowSelection||{}).filter(o=>{var n;return(n=r.rowSelection)==null?void 0:n[o]}).length),f=e.computed(()=>Object.keys(r.rowSelection||{}).filter(o=>{var n;return(n=r.rowSelection)==null?void 0:n[o]})),b=e.computed(()=>!r.data||!r.rowSelection?[]:r.data.filter(o=>r.rowSelection[r.getRowId(o)])),u=h.useVueTable({get data(){return r.data||[]},columns:r.columns,getCoreRowModel:h.getCoreRowModel(),enableSorting:!0,manualSorting:!0,enableRowSelection:r.enableRowSelection,getRowId:r.getRowId,state:{rowSelection:r.rowSelection||{}},onRowSelectionChange:o=>{const n=typeof o=="function"?o(r.rowSelection||{}):o;s("update:rowSelection",n)},enableMultiRowSelection:!0,enableSubRowSelection:!1}),v=()=>f.value,w=()=>b.value,x=()=>s("update:rowSelection",{}),g=()=>{const o={...r.rowSelection};u.getRowModel().rows.forEach(n=>{o[n.id]=!0}),s("update:rowSelection",o)},i=()=>{const o={...r.rowSelection};u.getRowModel().rows.forEach(n=>{delete o[n.id]}),s("update:rowSelection",o)};return y({getSelectedRowIds:v,getSelectedRowData:w,clearSelection:x,selectAllCurrentPage:g,deselectAllCurrentPage:i,selectedRowCount:d,selectedRowIds:f,selectedRowData:b,table:u}),(o,n)=>{var m,k;return e.openBlock(),e.createElementBlock("div",A,[e.createElementVNode("div",G,[e.createElementVNode("div",U,[t.showSearch?(e.openBlock(),e.createElementBlock("div",_,[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(f.value.slice(0,5).join(", "))+e.toDisplayString(f.value.length>5?"...":""),1)]),e.createElementVNode("div",Z,[e.renderSlot(o.$slots,"bulk-actions",{selectedIds:f.value,selectedData:b.value,selectedCount:d.value,clearSelection:x,selectAllCurrentPage:g,deselectAllCurrentPage:i}),o.$slots["bulk-actions"]?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,onClick:x,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",re,[t.isLoading?(e.openBlock(),e.createElementBlock("div",le,[...n[5]||(n[5]=[e.createElementVNode("div",{class:"absolute inset-0 z-10 flex items-center justify-center bg-white/70 dark:bg-gray-900/70 rounded-lg"},[e.createElementVNode("div",{class:"w-6 h-6 border-b-2 border-gray-900 dark:border-gray-100 rounded-full animate-spin"})],-1)])])):e.createCommentVNode("",!0),e.createElementVNode("div",se,[e.createElementVNode("table",ie,[t.showCaption?(e.openBlock(),e.createElementBlock("caption",ce,[e.createTextVNode(e.toDisplayString(t.title)+" - Total: "+e.toDisplayString(((k=(m=t.pagination)==null?void 0:m.meta)==null?void 0:k.total)||0)+" "+e.toDisplayString(t.itemName)+" ",1),t.enableRowSelection&&d.value>0?(e.openBlock(),e.createElementBlock("span",de," ("+e.toDisplayString(d.value)+" selected) ",1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("thead",ge,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(u).getHeaderGroups(),a=>(e.openBlock(),e.createElementBlock("tr",{key:a.id,class:"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted dark:hover:bg-gray-800"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.headers,c=>(e.openBlock(),e.createElementBlock("th",{key:c.id,colspan:c.colSpan,class:"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 dark:text-gray-400"},[c.isPlaceholder?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["flex items-center gap-2",c.column.getCanSort()?"cursor-pointer select-none hover:bg-gray-50 dark:hover:bg-gray-800 p-2 rounded transition-colors":""]),onClick:he=>c.column.getCanSort()?s("sortChange",c.column.id):void 0},[e.createVNode(e.unref(h.FlexRender),{render:c.column.columnDef.header,props:c.getContext()},null,8,["render","props"]),c.column.getCanSort()?(e.openBlock(),e.createElementBlock("div",ke,[t.sortBy!==c.column.id?(e.openBlock(),e.createBlock(e.unref(p.ChevronsUpDown),{key:0,size:10,class:"text-gray-400"})):t.sortBy===c.column.id&&t.sortDirection==="asc"?(e.openBlock(),e.createBlock(e.unref(p.ChevronUp),{key:1,size:10,class:"text-gray-900 dark:text-gray-100"})):t.sortBy===c.column.id&&t.sortDirection==="desc"?(e.openBlock(),e.createBlock(e.unref(p.ChevronDown),{key:2,size:10,class:"text-gray-900 dark:text-gray-100"})):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],10,me))],8,ue))),128))]))),128))]),e.createElementVNode("tbody",fe,[e.unref(u).getRowModel().rows.length>0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(e.unref(u).getRowModel().rows,a=>(e.openBlock(),e.createElementBlock("tr",{key:a.id,class:e.normalizeClass(["border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted 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(),c=>(e.openBlock(),e.createElementBlock("td",{key:c.id,class:"p-4 align-middle [&:has([role=checkbox])]:pr-0"},[e.createVNode(e.unref(h.FlexRender),{render:c.column.columnDef.cell,props:c.getContext()},null,8,["render","props"])]))),128))],2))),128)):(e.openBlock(),e.createElementBlock("tr",pe,[e.createElementVNode("td",{colspan:t.columns.length,class:"h-24 text-center dark:text-gray-400"},e.toDisplayString(t.emptyStateText),9,ye)]))])])]),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"])]))])}}});function xe(...t){return S.twMerge(E.clsx(t))}exports.DataTable=be;exports.DataTablePagination=B;exports.cn=xe;exports.useDarkMode=C;
|
|
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;
|
package/dist/index.mjs
CHANGED
|
@@ -1,41 +1,40 @@
|
|
|
1
|
-
import { ref as
|
|
2
|
-
import { useVueTable as
|
|
3
|
-
import {
|
|
4
|
-
import { clsx as
|
|
5
|
-
import { twMerge as
|
|
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";
|
|
2
|
+
import { useVueTable as j, getCoreRowModel as E, FlexRender as I } from "@tanstack/vue-table";
|
|
3
|
+
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";
|
|
4
|
+
import { clsx as Q } from "clsx";
|
|
5
|
+
import { twMerge as W } from "tailwind-merge";
|
|
6
6
|
function We() {
|
|
7
|
-
const e =
|
|
7
|
+
const e = N(!1);
|
|
8
8
|
if (typeof window < "u") {
|
|
9
|
-
const
|
|
10
|
-
e.value =
|
|
9
|
+
const d = window.matchMedia("(prefers-color-scheme: dark)");
|
|
10
|
+
e.value = d.matches, d.addEventListener("change", (c) => {
|
|
11
11
|
e.value = c.matches;
|
|
12
12
|
});
|
|
13
13
|
}
|
|
14
|
-
|
|
14
|
+
z(() => {
|
|
15
15
|
typeof document < "u" && (e.value ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark"));
|
|
16
16
|
});
|
|
17
|
-
function
|
|
17
|
+
function P() {
|
|
18
18
|
e.value = !e.value;
|
|
19
19
|
}
|
|
20
20
|
return {
|
|
21
21
|
isDarkMode: e,
|
|
22
|
-
toggleDarkMode:
|
|
22
|
+
toggleDarkMode: P
|
|
23
23
|
};
|
|
24
24
|
}
|
|
25
|
-
const
|
|
25
|
+
const X = {
|
|
26
26
|
key: 0,
|
|
27
|
-
class: "flex justify-
|
|
28
|
-
},
|
|
29
|
-
class: "flex items-center gap-1",
|
|
30
|
-
role: "navigation",
|
|
31
|
-
"aria-label": "pagination"
|
|
32
|
-
}, Y = ["disabled"], Z = ["disabled"], ee = { class: "flex items-center gap-1" }, te = ["onClick"], ae = {
|
|
33
|
-
key: 1,
|
|
34
|
-
class: "inline-flex items-center justify-center h-10 min-w-10 px-3 text-gray-500"
|
|
35
|
-
}, oe = ["disabled"], ne = ["disabled"], re = { class: "flex items-center justify-between text-sm text-gray-600 dark:text-gray-300" }, se = {
|
|
27
|
+
class: "flex items-center justify-between border-t border-border bg-background px-4 py-3 sm:px-6"
|
|
28
|
+
}, 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 = {
|
|
36
29
|
key: 0,
|
|
37
30
|
class: "flex items-center gap-2"
|
|
38
|
-
},
|
|
31
|
+
}, oe = ["value"], ne = ["value"], ae = {
|
|
32
|
+
class: "relative z-0 inline-flex -space-x-px rounded-md shadow-sm",
|
|
33
|
+
"aria-label": "Pagination"
|
|
34
|
+
}, re = ["disabled"], se = ["onClick"], le = {
|
|
35
|
+
key: 1,
|
|
36
|
+
class: "relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700"
|
|
37
|
+
}, ie = ["disabled"], de = /* @__PURE__ */ M({
|
|
39
38
|
__name: "DataTablePagination",
|
|
40
39
|
props: {
|
|
41
40
|
pagination: { default: null },
|
|
@@ -44,142 +43,117 @@ const J = { class: "flex flex-col gap-4 px-2 py-4 bg-background text-foreground"
|
|
|
44
43
|
showPerPageSelector: { type: Boolean, default: !0 }
|
|
45
44
|
},
|
|
46
45
|
emits: ["pageChange", "perPageChange"],
|
|
47
|
-
setup(e, { emit:
|
|
48
|
-
const
|
|
49
|
-
() =>
|
|
50
|
-
),
|
|
51
|
-
() =>
|
|
52
|
-
),
|
|
53
|
-
if (!
|
|
54
|
-
const
|
|
55
|
-
let
|
|
56
|
-
for (let s = 1; s <=
|
|
57
|
-
(s === 1 || s ===
|
|
58
|
-
for (const s of
|
|
59
|
-
|
|
60
|
-
return
|
|
61
|
-
}),
|
|
62
|
-
typeof
|
|
63
|
-
},
|
|
64
|
-
|
|
65
|
-
}, T = () => {
|
|
66
|
-
m.value && i.pagination && c("pageChange", i.pagination.meta.last_page);
|
|
67
|
-
}, j = () => {
|
|
68
|
-
l.value && i.pagination && c("pageChange", i.pagination.meta.current_page - 1);
|
|
46
|
+
setup(e, { emit: P }) {
|
|
47
|
+
const d = e, c = P, i = C(
|
|
48
|
+
() => d.pagination ? d.pagination.meta.current_page > 1 : !1
|
|
49
|
+
), h = C(
|
|
50
|
+
() => d.pagination ? d.pagination.meta.current_page < d.pagination.meta.last_page : !1
|
|
51
|
+
), v = C(() => {
|
|
52
|
+
if (!d.pagination) return [];
|
|
53
|
+
const x = d.pagination.meta.current_page, l = d.pagination.meta.last_page, u = 2, w = [], r = [];
|
|
54
|
+
let o;
|
|
55
|
+
for (let s = 1; s <= l; s++)
|
|
56
|
+
(s === 1 || s === l || s >= x - u && s <= x + u) && w.push(s);
|
|
57
|
+
for (const s of w)
|
|
58
|
+
o && (s - o === 2 ? r.push(o + 1) : s - o !== 1 && r.push("...")), r.push(s), o = s;
|
|
59
|
+
return r;
|
|
60
|
+
}), R = (x) => {
|
|
61
|
+
typeof x == "number" && c("pageChange", x);
|
|
62
|
+
}, p = () => {
|
|
63
|
+
i.value && d.pagination && c("pageChange", d.pagination.meta.current_page - 1);
|
|
69
64
|
}, D = () => {
|
|
70
|
-
|
|
65
|
+
h.value && d.pagination && c("pageChange", d.pagination.meta.current_page + 1);
|
|
71
66
|
};
|
|
72
|
-
return (
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
]),
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
67
|
+
return (x, l) => e.pagination && e.pagination.meta.last_page > 1 ? (n(), a("div", X, [
|
|
68
|
+
t("div", q, [
|
|
69
|
+
t("div", J, [
|
|
70
|
+
t("p", K, [
|
|
71
|
+
l[1] || (l[1] = $(" Showing ", -1)),
|
|
72
|
+
t("span", Y, f(e.pagination.meta.from), 1),
|
|
73
|
+
l[2] || (l[2] = $(" to ", -1)),
|
|
74
|
+
t("span", Z, f(e.pagination.meta.to), 1),
|
|
75
|
+
l[3] || (l[3] = $(" of ", -1)),
|
|
76
|
+
t("span", ee, f(e.pagination.meta.total), 1),
|
|
77
|
+
l[4] || (l[4] = $(" results ", -1))
|
|
78
|
+
])
|
|
79
|
+
]),
|
|
80
|
+
e.showPerPageSelector ? (n(), a("div", te, [
|
|
81
|
+
l[5] || (l[5] = t("p", { class: "text-sm text-muted-foreground" }, "Rows per page:", -1)),
|
|
82
|
+
t("select", {
|
|
83
|
+
value: e.currentPerPage,
|
|
84
|
+
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",
|
|
85
|
+
onChange: l[0] || (l[0] = (u) => c(
|
|
86
|
+
"perPageChange",
|
|
87
|
+
Number(u.target.value)
|
|
88
|
+
))
|
|
93
89
|
}, [
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
90
|
+
(n(!0), a(k, null, S(e.perPageOptions, (u) => (n(), a("option", {
|
|
91
|
+
key: u,
|
|
92
|
+
value: u
|
|
93
|
+
}, f(u), 9, ne))), 128))
|
|
94
|
+
], 40, oe)
|
|
95
|
+
])) : b("", !0),
|
|
96
|
+
t("div", null, [
|
|
97
|
+
t("nav", ae, [
|
|
98
|
+
t("button", {
|
|
99
|
+
disabled: !i.value,
|
|
100
|
+
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",
|
|
101
|
+
onClick: p
|
|
102
|
+
}, [
|
|
103
|
+
l[6] || (l[6] = t("span", { class: "sr-only" }, "Previous", -1)),
|
|
104
|
+
y(m(L), {
|
|
105
|
+
class: "h-5 w-5",
|
|
106
|
+
"aria-hidden": "true"
|
|
107
|
+
})
|
|
108
|
+
], 8, re),
|
|
109
|
+
(n(!0), a(k, null, S(v.value, (u, w) => (n(), a(k, { key: w }, [
|
|
110
|
+
u !== "..." ? (n(), a("button", {
|
|
100
111
|
key: 0,
|
|
101
|
-
class:
|
|
102
|
-
"inline-flex items-center
|
|
103
|
-
|
|
112
|
+
class: B([
|
|
113
|
+
"relative inline-flex items-center border px-4 py-2 text-sm font-medium",
|
|
114
|
+
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"
|
|
104
115
|
]),
|
|
105
|
-
onClick: (
|
|
106
|
-
},
|
|
107
|
-
], 64))), 128))
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
]
|
|
120
|
-
a("button", {
|
|
121
|
-
disabled: !m.value,
|
|
122
|
-
class: w([
|
|
123
|
-
"inline-flex items-center justify-center gap-1 h-10 px-4 py-2 text-sm font-medium transition-colors rounded-md",
|
|
124
|
-
m.value ? "hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200" : "opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600"
|
|
125
|
-
]),
|
|
126
|
-
onClick: T
|
|
127
|
-
}, [
|
|
128
|
-
g[4] || (g[4] = a("span", { class: "hidden sm:inline" }, "Last", -1)),
|
|
129
|
-
C(b(U), { class: "h-4 w-4" })
|
|
130
|
-
], 10, ne)
|
|
116
|
+
onClick: (r) => R(u)
|
|
117
|
+
}, f(u), 11, se)) : (n(), a("span", le, " ... "))
|
|
118
|
+
], 64))), 128)),
|
|
119
|
+
t("button", {
|
|
120
|
+
disabled: !h.value,
|
|
121
|
+
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",
|
|
122
|
+
onClick: D
|
|
123
|
+
}, [
|
|
124
|
+
l[7] || (l[7] = t("span", { class: "sr-only" }, "Next", -1)),
|
|
125
|
+
y(m(O), {
|
|
126
|
+
class: "h-5 w-5",
|
|
127
|
+
"aria-hidden": "true"
|
|
128
|
+
})
|
|
129
|
+
], 8, ie)
|
|
130
|
+
])
|
|
131
131
|
])
|
|
132
|
-
])) : f("", !0),
|
|
133
|
-
a("div", re, [
|
|
134
|
-
a("div", null, [
|
|
135
|
-
e.pagination && e.pagination.meta.total > 0 ? (t(), n(h, { key: 0 }, [
|
|
136
|
-
L(" Showing " + d(e.pagination.meta.from) + " to " + d(e.pagination.meta.to) + " of " + d(e.pagination.meta.total) + " entries ", 1)
|
|
137
|
-
], 64)) : (t(), n(h, { key: 1 }, [
|
|
138
|
-
L(" No entries found ")
|
|
139
|
-
], 64))
|
|
140
|
-
]),
|
|
141
|
-
e.showPerPageSelector ? (t(), n("div", se, [
|
|
142
|
-
g[5] || (g[5] = a("span", null, "Rows per page:", -1)),
|
|
143
|
-
a("select", {
|
|
144
|
-
value: e.currentPerPage || e.perPageOptions[0],
|
|
145
|
-
class: "h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-700",
|
|
146
|
-
onChange: g[0] || (g[0] = (o) => c("perPageChange", Number(o.target.value) || e.perPageOptions[0]))
|
|
147
|
-
}, [
|
|
148
|
-
(t(!0), n(h, null, S(e.perPageOptions, (o) => (t(), n("option", {
|
|
149
|
-
key: o,
|
|
150
|
-
value: o
|
|
151
|
-
}, d(o), 9, ie))), 128))
|
|
152
|
-
], 40, le)
|
|
153
|
-
])) : f("", !0),
|
|
154
|
-
e.pagination ? (t(), n("div", de, " Page " + d(e.pagination.meta.current_page) + " of " + d(e.pagination.meta.last_page), 1)) : f("", !0)
|
|
155
132
|
])
|
|
156
|
-
]));
|
|
133
|
+
])) : b("", !0);
|
|
157
134
|
}
|
|
158
|
-
}),
|
|
135
|
+
}), 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 = {
|
|
159
136
|
key: 0,
|
|
160
137
|
class: "relative w-full max-w-sm"
|
|
161
|
-
},
|
|
138
|
+
}, fe = ["value"], be = { class: "flex items-center gap-2" }, pe = { class: "flex items-center" }, xe = {
|
|
162
139
|
key: 0,
|
|
163
140
|
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"
|
|
164
|
-
},
|
|
141
|
+
}, 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 = {
|
|
165
142
|
key: 1,
|
|
166
143
|
class: "flex items-center justify-center p-8"
|
|
167
|
-
}, Se = { class: "text-lg text-gray-700 dark:text-gray-200" },
|
|
144
|
+
}, Se = { class: "text-lg text-gray-700 dark:text-gray-200" }, Ce = {
|
|
168
145
|
key: 2,
|
|
169
146
|
class: "flex flex-col items-center p-8"
|
|
170
|
-
},
|
|
147
|
+
}, 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 = {
|
|
171
148
|
key: 3,
|
|
172
149
|
class: "rounded-lg border bg-background dark:border-gray-700"
|
|
173
|
-
},
|
|
150
|
+
}, De = {
|
|
174
151
|
key: 0,
|
|
175
152
|
class: "relative"
|
|
176
|
-
},
|
|
177
|
-
key: 0,
|
|
178
|
-
class: "mt-4 text-sm text-muted-foreground dark:text-gray-400"
|
|
179
|
-
}, Le = {
|
|
153
|
+
}, 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 = {
|
|
180
154
|
key: 0,
|
|
181
|
-
class: "
|
|
182
|
-
},
|
|
155
|
+
class: "border-t"
|
|
156
|
+
}, Ve = ["colspan"], Xe = /* @__PURE__ */ M({
|
|
183
157
|
__name: "DataTable",
|
|
184
158
|
props: {
|
|
185
159
|
data: { default: () => [] },
|
|
@@ -196,217 +170,229 @@ const J = { class: "flex flex-col gap-4 px-2 py-4 bg-background text-foreground"
|
|
|
196
170
|
enableRowSelection: { type: Boolean, default: !1 },
|
|
197
171
|
getRowId: { type: Function, default: (e) => e.id },
|
|
198
172
|
showSearch: { type: Boolean, default: !0 },
|
|
199
|
-
showCaption: { type: Boolean, default: !0 },
|
|
200
173
|
showPerPageSelector: { type: Boolean, default: !0 },
|
|
201
174
|
title: { default: "Items" },
|
|
202
175
|
itemName: { default: "items" },
|
|
203
176
|
loadingText: { default: "Loading..." },
|
|
204
177
|
errorTitle: { default: "Error loading data" },
|
|
205
|
-
emptyStateText: { default: "
|
|
178
|
+
emptyStateText: { default: "No items found" }
|
|
206
179
|
},
|
|
207
180
|
emits: ["pageChange", "perPageChange", "searchChange", "sortChange", "retry", "update:rowSelection"],
|
|
208
|
-
setup(e, { expose:
|
|
209
|
-
const c =
|
|
210
|
-
(
|
|
211
|
-
var
|
|
212
|
-
return (
|
|
181
|
+
setup(e, { expose: P, emit: d }) {
|
|
182
|
+
const c = d, i = e, h = C(() => Object.keys(i.rowSelection || {}).filter(
|
|
183
|
+
(r) => {
|
|
184
|
+
var o;
|
|
185
|
+
return (o = i.rowSelection) == null ? void 0 : o[r];
|
|
213
186
|
}
|
|
214
|
-
).length),
|
|
215
|
-
(
|
|
216
|
-
var
|
|
217
|
-
return (
|
|
187
|
+
).length), v = C(() => Object.keys(i.rowSelection || {}).filter(
|
|
188
|
+
(r) => {
|
|
189
|
+
var o;
|
|
190
|
+
return (o = i.rowSelection) == null ? void 0 : o[r];
|
|
218
191
|
}
|
|
219
|
-
)),
|
|
192
|
+
)), R = C(() => !i.data || !i.rowSelection ? [] : i.data.filter((r) => i.rowSelection[i.getRowId(r)])), p = j({
|
|
220
193
|
get data() {
|
|
221
|
-
return
|
|
194
|
+
return i.data || [];
|
|
222
195
|
},
|
|
223
|
-
columns:
|
|
224
|
-
getCoreRowModel:
|
|
196
|
+
columns: i.columns,
|
|
197
|
+
getCoreRowModel: E(),
|
|
225
198
|
enableSorting: !0,
|
|
226
199
|
manualSorting: !0,
|
|
227
|
-
enableRowSelection:
|
|
228
|
-
getRowId:
|
|
200
|
+
enableRowSelection: i.enableRowSelection,
|
|
201
|
+
getRowId: i.getRowId,
|
|
229
202
|
state: {
|
|
230
|
-
rowSelection:
|
|
203
|
+
rowSelection: i.rowSelection || {}
|
|
231
204
|
},
|
|
232
|
-
onRowSelectionChange: (
|
|
233
|
-
const
|
|
234
|
-
c("update:rowSelection",
|
|
205
|
+
onRowSelectionChange: (r) => {
|
|
206
|
+
const o = typeof r == "function" ? r(i.rowSelection || {}) : r;
|
|
207
|
+
c("update:rowSelection", o);
|
|
235
208
|
},
|
|
236
209
|
enableMultiRowSelection: !0,
|
|
237
210
|
enableSubRowSelection: !1
|
|
238
|
-
}),
|
|
239
|
-
const
|
|
240
|
-
|
|
241
|
-
o
|
|
242
|
-
}), c("update:rowSelection",
|
|
243
|
-
},
|
|
244
|
-
const
|
|
245
|
-
|
|
246
|
-
delete o
|
|
247
|
-
}), c("update:rowSelection",
|
|
211
|
+
}), D = () => v.value, x = () => R.value, l = () => c("update:rowSelection", {}), u = () => {
|
|
212
|
+
const r = { ...i.rowSelection };
|
|
213
|
+
p.getRowModel().rows.forEach((o) => {
|
|
214
|
+
r[o.id] = !0;
|
|
215
|
+
}), c("update:rowSelection", r);
|
|
216
|
+
}, w = () => {
|
|
217
|
+
const r = { ...i.rowSelection };
|
|
218
|
+
p.getRowModel().rows.forEach((o) => {
|
|
219
|
+
delete r[o.id];
|
|
220
|
+
}), c("update:rowSelection", r);
|
|
248
221
|
};
|
|
249
|
-
return
|
|
250
|
-
getSelectedRowIds:
|
|
251
|
-
getSelectedRowData:
|
|
252
|
-
clearSelection:
|
|
253
|
-
selectAllCurrentPage:
|
|
254
|
-
deselectAllCurrentPage:
|
|
255
|
-
selectedRowCount:
|
|
256
|
-
selectedRowIds:
|
|
257
|
-
selectedRowData:
|
|
258
|
-
table:
|
|
259
|
-
}), (
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
a("div", ye, [
|
|
274
|
-
B(o.$slots, "filters")
|
|
275
|
-
])
|
|
276
|
-
]),
|
|
277
|
-
a("div", he, [
|
|
278
|
-
B(o.$slots, "header")
|
|
222
|
+
return P({
|
|
223
|
+
getSelectedRowIds: D,
|
|
224
|
+
getSelectedRowData: x,
|
|
225
|
+
clearSelection: l,
|
|
226
|
+
selectAllCurrentPage: u,
|
|
227
|
+
deselectAllCurrentPage: w,
|
|
228
|
+
selectedRowCount: h,
|
|
229
|
+
selectedRowIds: v,
|
|
230
|
+
selectedRowData: R,
|
|
231
|
+
table: p
|
|
232
|
+
}), (r, o) => (n(), a("div", ce, [
|
|
233
|
+
t("div", ue, [
|
|
234
|
+
t("div", ge, [
|
|
235
|
+
e.showSearch ? (n(), a("div", me, [
|
|
236
|
+
t("input", {
|
|
237
|
+
value: e.search,
|
|
238
|
+
type: "search",
|
|
239
|
+
placeholder: "Search...",
|
|
240
|
+
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",
|
|
241
|
+
onInput: o[0] || (o[0] = (s) => c("searchChange", s.target.value))
|
|
242
|
+
}, null, 40, fe)
|
|
243
|
+
])) : b("", !0),
|
|
244
|
+
t("div", be, [
|
|
245
|
+
T(r.$slots, "filters")
|
|
279
246
|
])
|
|
280
247
|
]),
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
]
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
248
|
+
t("div", pe, [
|
|
249
|
+
T(r.$slots, "header")
|
|
250
|
+
])
|
|
251
|
+
]),
|
|
252
|
+
e.enableRowSelection && h.value > 0 ? (n(), a("div", xe, [
|
|
253
|
+
t("div", ye, [
|
|
254
|
+
t("span", he, f(h.value) + " " + f(e.itemName) + " selected ", 1),
|
|
255
|
+
t("div", ve, " IDs: " + f(v.value.slice(0, 5).join(", ")) + f(v.value.length > 5 ? "..." : ""), 1)
|
|
256
|
+
]),
|
|
257
|
+
t("div", we, [
|
|
258
|
+
T(r.$slots, "bulk-actions", {
|
|
259
|
+
selectedIds: v.value,
|
|
260
|
+
selectedData: R.value,
|
|
261
|
+
selectedCount: h.value,
|
|
262
|
+
clearSelection: l,
|
|
263
|
+
selectAllCurrentPage: u,
|
|
264
|
+
deselectAllCurrentPage: w
|
|
265
|
+
}),
|
|
266
|
+
r.$slots["bulk-actions"] ? b("", !0) : (n(), a("button", {
|
|
267
|
+
key: 0,
|
|
268
|
+
onClick: l,
|
|
269
|
+
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"
|
|
270
|
+
}, " Clear Selection "))
|
|
271
|
+
])
|
|
272
|
+
])) : b("", !0),
|
|
273
|
+
e.isLoading && !e.data ? (n(), a("div", ke, [
|
|
274
|
+
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)),
|
|
275
|
+
t("div", Se, f(e.loadingText), 1)
|
|
276
|
+
])) : e.error ? (n(), a("div", Ce, [
|
|
277
|
+
t("div", Pe, [
|
|
278
|
+
y(m(V), { class: "size-6" }),
|
|
279
|
+
t("span", null, f(e.errorTitle), 1)
|
|
280
|
+
]),
|
|
281
|
+
t("div", Re, f(e.error.message), 1),
|
|
282
|
+
t("button", {
|
|
283
|
+
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",
|
|
284
|
+
onClick: o[1] || (o[1] = (s) => c("retry"))
|
|
285
|
+
}, [
|
|
286
|
+
y(m(F), { class: "size-4" }),
|
|
287
|
+
o[5] || (o[5] = t("span", null, "Retry", -1))
|
|
288
|
+
])
|
|
289
|
+
])) : (n(), a("div", $e, [
|
|
290
|
+
e.isLoading ? (n(), a("div", De, [...o[6] || (o[6] = [
|
|
291
|
+
t("div", { class: "absolute inset-0 z-10 flex items-center justify-center bg-white/70 dark:bg-gray-900/70 rounded-lg" }, [
|
|
292
|
+
t("div", { class: "w-6 h-6 border-b-2 border-gray-900 dark:border-gray-100 rounded-full animate-spin" })
|
|
293
|
+
], -1)
|
|
294
|
+
])])) : b("", !0),
|
|
295
|
+
t("div", Te, [
|
|
296
|
+
t("table", _e, [
|
|
297
|
+
t("thead", Be, [
|
|
298
|
+
(n(!0), a(k, null, S(m(p).getHeaderGroups(), (s) => (n(), a("tr", {
|
|
299
|
+
key: s.id,
|
|
300
|
+
class: "border-b transition-colors"
|
|
301
|
+
}, [
|
|
302
|
+
(n(!0), a(k, null, S(s.headers, (g) => (n(), a("th", {
|
|
303
|
+
key: g.id,
|
|
304
|
+
colspan: g.colSpan,
|
|
305
|
+
class: "h-12 px-4 text-left align-middle font-bold text-muted-foreground [&:has([role=checkbox])]:pr-0"
|
|
328
306
|
}, [
|
|
329
|
-
|
|
330
|
-
key:
|
|
331
|
-
|
|
332
|
-
|
|
307
|
+
g.isPlaceholder ? b("", !0) : (n(), a("div", {
|
|
308
|
+
key: 0,
|
|
309
|
+
class: B([
|
|
310
|
+
"flex items-center gap-2",
|
|
311
|
+
g.column.getCanSort() ? "cursor-pointer select-none hover:bg-accent p-2 rounded transition-colors" : ""
|
|
312
|
+
]),
|
|
313
|
+
onClick: (Fe) => g.column.getCanSort() ? c("sortChange", g.column.id) : void 0
|
|
333
314
|
}, [
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
315
|
+
y(m(I), {
|
|
316
|
+
render: g.column.columnDef.header,
|
|
317
|
+
props: g.getContext()
|
|
318
|
+
}, null, 8, ["render", "props"]),
|
|
319
|
+
g.column.getCanSort() ? (n(), a("div", Ne, [
|
|
320
|
+
e.sortBy !== g.column.id ? (n(), _(m(A), {
|
|
321
|
+
key: 0,
|
|
322
|
+
size: 10,
|
|
323
|
+
class: "text-gray-400"
|
|
324
|
+
})) : e.sortBy === g.column.id && e.sortDirection === "asc" ? (n(), _(m(G), {
|
|
325
|
+
key: 1,
|
|
326
|
+
size: 10,
|
|
327
|
+
class: "text-gray-900 dark:text-gray-100"
|
|
328
|
+
})) : e.sortBy === g.column.id && e.sortDirection === "desc" ? (n(), _(m(U), {
|
|
329
|
+
key: 2,
|
|
330
|
+
size: 10,
|
|
331
|
+
class: "text-gray-900 dark:text-gray-100"
|
|
332
|
+
})) : b("", !0)
|
|
333
|
+
])) : b("", !0)
|
|
334
|
+
], 10, Me))
|
|
335
|
+
], 8, Ie))), 128))
|
|
336
|
+
]))), 128))
|
|
337
|
+
]),
|
|
338
|
+
t("tbody", ze, [
|
|
339
|
+
m(p).getRowModel().rows.length > 0 ? (n(!0), a(k, { key: 0 }, S(m(p).getRowModel().rows, (s) => (n(), a("tr", {
|
|
340
|
+
key: s.id,
|
|
341
|
+
class: B([
|
|
342
|
+
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted dark:border-gray-700 dark:hover:bg-gray-800",
|
|
343
|
+
e.enableRowSelection && s.getIsSelected() ? "bg-blue-50 dark:bg-blue-900/20 border-l-4 border-l-blue-500" : ""
|
|
344
|
+
])
|
|
345
|
+
}, [
|
|
346
|
+
(n(!0), a(k, null, S(s.getVisibleCells(), (g) => (n(), a("td", {
|
|
347
|
+
key: g.id,
|
|
348
|
+
class: "p-4 align-middle [&:has([role=checkbox])]:pr-0"
|
|
349
|
+
}, [
|
|
350
|
+
y(m(I), {
|
|
351
|
+
render: g.column.columnDef.cell,
|
|
352
|
+
props: g.getContext()
|
|
353
|
+
}, null, 8, ["render", "props"])
|
|
363
354
|
]))), 128))
|
|
364
|
-
]),
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
355
|
+
], 2))), 128)) : (n(), a("tr", je, [
|
|
356
|
+
t("td", {
|
|
357
|
+
colspan: e.columns.length,
|
|
358
|
+
class: "h-24 text-center dark:text-gray-400"
|
|
359
|
+
}, [
|
|
360
|
+
t("div", Le, [
|
|
361
|
+
y(m(H), { class: "size-8 text-muted-foreground" }),
|
|
362
|
+
t("span", null, f(e.emptyStateText), 1)
|
|
371
363
|
])
|
|
364
|
+
], 8, Ee)
|
|
365
|
+
]))
|
|
366
|
+
]),
|
|
367
|
+
e.pagination && e.pagination.meta.last_page > 1 ? (n(), a("tfoot", Oe, [
|
|
368
|
+
t("tr", null, [
|
|
369
|
+
t("td", {
|
|
370
|
+
colspan: e.columns.length,
|
|
371
|
+
class: "p-0"
|
|
372
372
|
}, [
|
|
373
|
-
(
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
], 2))), 128)) : (t(), n("tr", ze, [
|
|
383
|
-
a("td", {
|
|
384
|
-
colspan: e.columns.length,
|
|
385
|
-
class: "h-24 text-center dark:text-gray-400"
|
|
386
|
-
}, d(e.emptyStateText), 9, Fe)
|
|
387
|
-
]))
|
|
373
|
+
y(de, {
|
|
374
|
+
pagination: e.pagination,
|
|
375
|
+
"current-per-page": e.currentPerPage,
|
|
376
|
+
"per-page-options": e.perPageOptions,
|
|
377
|
+
"show-per-page-selector": e.showPerPageSelector,
|
|
378
|
+
onPageChange: o[2] || (o[2] = (s) => c("pageChange", s)),
|
|
379
|
+
onPerPageChange: o[3] || (o[3] = (s) => c("perPageChange", s))
|
|
380
|
+
}, null, 8, ["pagination", "current-per-page", "per-page-options", "show-per-page-selector"])
|
|
381
|
+
], 8, Ve)
|
|
388
382
|
])
|
|
389
|
-
])
|
|
390
|
-
])
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
"per-page-options": e.perPageOptions,
|
|
395
|
-
"show-per-page-selector": e.showPerPageSelector,
|
|
396
|
-
onPageChange: r[2] || (r[2] = (s) => c("pageChange", s)),
|
|
397
|
-
onPerPageChange: r[3] || (r[3] = (s) => c("perPageChange", s))
|
|
398
|
-
}, null, 8, ["pagination", "current-per-page", "per-page-options", "show-per-page-selector"])
|
|
399
|
-
]))
|
|
400
|
-
]);
|
|
401
|
-
};
|
|
383
|
+
])) : b("", !0)
|
|
384
|
+
])
|
|
385
|
+
])
|
|
386
|
+
]))
|
|
387
|
+
]));
|
|
402
388
|
}
|
|
403
389
|
});
|
|
404
|
-
function
|
|
405
|
-
return
|
|
390
|
+
function qe(...e) {
|
|
391
|
+
return W(Q(e));
|
|
406
392
|
}
|
|
407
393
|
export {
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
394
|
+
Xe as DataTable,
|
|
395
|
+
de as DataTablePagination,
|
|
396
|
+
qe as cn,
|
|
411
397
|
We as useDarkMode
|
|
412
398
|
};
|
package/package.json
CHANGED