Vue3 Paginate is a very simple Pagination component for Vue 3 and TailwindCSS.
## ⚙️ Installation
Make sure you have Vue 3 and TailwindCSS v2 or v3 installed in your project.
Install the component by running the command below:
```bash
npm i -S @brutforce/vue3-paginate
```
Register the components locally
```ts
import { Paginate, NavButton } from '@brutforce/vue3-paginate'
```
### Example
```vue
Prev
Next
```
## Components
### Paginate
The Paginate component is the main component whic handles all of the pagination logic
#### Props
Here is a list of all the props for the Paginate component.
|Name | Type | Required | Description
------ | ----- | ----- | ----- |
| maxPages | Number | false | The maximum number of pages to display at once. Default: 3 |
| perPage | Number | false | The number of items displayed per page. Default: 5 |
| totalPages | Number | false | The total number of pages to paginate. Default: 10 |
| currentPage | Number | false | The current page. Default: 1 |
| showFirstLast | Boolean | false | Specifies is the 'First' and 'Last' buttons should be displayed. Default: true |
| wrapperClasses | String | false | A string of Tailwind classes for styling the component's main wrapper element. Default: `'shadow-md border-1 rounded-lg'` |
| dotClasses | String | false | A string of Tailwind classes for styling the dots ("...") before and after the allowed maxPages range. Default: `px-3 py-auto cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400'`|
| activePageClasses | String | false | A string of Tailwind classes for styling the active page button. Default: `'bg-indigo-500 hover:bg-indigo-600 text-white'` |
| pageClasses | String | false | A string of Tailwind classes for styling the page number buttons. Default: `'px-2 sm:px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 hover:bg-gray-100'` |
#### Named Slots
The following slots are used for the navigation buttons (First, Previous, Next, Last).
The slots allow you to add a fully customized NavButton component. See the example above.
`first, prev, next, last`
#### Events
The Paginate component emits the following event(s).
| Name | Description
----- | ----- |
|input | This `input` event is fired every time a button on the paginator is clicked. The current page is sent with the event. Simply provide a method to catch the input event. See the example above.
### NavButton
The NavButton component is used to navigate through the pages by clicking 'First', 'Prev', 'Next', and 'Last'
#### Props
Here is a list of props for the NavButton component.
|Name | Type | Required | Description
----- | ----- | ----- | ----- |
|text | String | false | The text that should be displayed on the button. Alternatively, you can supply your own html instead using slots. See the 'Prev' and 'Next' NavButtons in the exmple above. |
| page | String or Number | true | The page name/number to be displayed. ie `first`, `prev`, `next`, `last` |
| isFirst | Boolean | false | Used to determine if the 'First' button should be disabled. Default: false . This is calculated internally by default |
| isPrev | Boolean | false | Used to determine if the 'Prev' button should be disabled. Default: false . This is calculated internally by default |
| isNext | Boolean | false | Used to determin if the 'Next' button should be disabled. Default: false . This is calculated internally by default |
| isLast | Boolean | false | Used to determin if the 'Last' button should be disabled. Default: false . This is calculated internally by default |