tailable-pagination
Tailable Pagination
A Vue.js pagination component for Laravel thats built for Tailwind.
Requirements
- Vue.js 2.x
- Laravel 5.x +
- Tailwindcss 2.x
Demo & Docs
See https://tailable.github.io/pagination/
Component Installation
npm install tailable-pagination
or
yarn add tailable-pagination
Register the Plugin
import TailablePagination from 'tailable-pagination';
Vue.use(TailablePagination);
Add the following variants to your tailwind.config.js
variants: {
opacity: ['disabled'],
cursor: ['disabled'],
},
Basic Example
Pagination.vue
<tailable-pagination
:data="users"
:showNumbers="true">
</tailable-pagination>
export default {
data() {
return {
users: {},
}
},
created() {
axios.get("http://laravel.test/api/users")
.then(response => {
this.users = response.data;
})
}
}
API
Pagination Props
Name | Type | Default | Description |
---|---|---|---|
data |
Object | {} | The data from paginated AJAX request |
limit |
Number | 1 | The pagination limit each side of the middle button. |
size |
String | "default" | (optional) Must be default or small or large |
show-disabled |
Boolean | true | (optional) Pagination buttons next and previous, do you want them displayed if there is nothing to click? |
show-numbers |
Boolean | false | (optional) Pagination show numbered buttons? |
hide-when-empty |
Boolean | false | (optional) Hides the pagination buttons when there is no need to show them |
translate |
Object | { nextButton: 'Next' previousButton: 'Previous' } | (optional) Translate button text |
Pagination Events
Name | Description |
---|---|
page-changed |
A button has been clicked |
Development
To work on the package locally or to add to the documentation, run the following command:
npm run serve
To run the tests:
npm run test:unit
Dependencies
@types/jest: 27.0.0@vue/cli-plugin-babel: ^5.0.4@vue/cli-plugin-typescript: ^5.0.4@vue/cli-plugin-unit-jest: ^5.0.4@vue/cli-service: ^5.0.4@vue/test-utils: 1.3.0@vue/vue2-jest: ^27.0.0axios: ^0.27.2bootstrap: ^5.1.3core-js: ^3.22.7jquery: ^3.6.0node-sass: ^7.0.1popper.js: ^1.16.1sass-loader: ^13.0.0tailwindcss: ^2.2.19ts-jest: ^27.0.0typescript: ~4.7.2vue: ^2.6.14vue-class-component: ^7.2.6vue-property-decorator: ^9.1.2vue-template-compiler: ^2.6.14