Merge pull request #147 from gilbitron/v4

V4

.gitignore

@@ -16,6 +16,8 @@ dist-ssr
 !.vscode/extensions.json
 !.vscode/settings.json
 .idea
+.temp
+.cache
 .DS_Store
 *.suo
 *.ntvs*
@@ -24,3 +26,4 @@ dist-ssr
 *.sw?
 
 /app
+/dist

README.md

@@ -1,133 +1,37 @@
-[![npm](https://img.shields.io/npm/v/laravel-vue-pagination.svg)](https://www.npmjs.com/package/laravel-vue-pagination) [![Downloads](https://img.shields.io/npm/dt/laravel-vue-pagination.svg)](https://www.npmjs.com/package/laravel-vue-pagination)
+[![npm](https://img.shields.io/npm/v/laravel-vue-pagination.svg)](https://www.npmjs.com/package/laravel-vue-pagination) [![Downloads](https://img.shields.io/npm/dt/laravel-vue-pagination.svg)](https://www.npmjs.com/package/laravel-vue-pagination) [![Run tests](https://github.com/gilbitron/laravel-vue-pagination/actions/workflows/tests.yml/badge.svg)](https://github.com/gilbitron/laravel-vue-pagination/actions/workflows/tests.yml)
 
 > Want your logo here? [Sponsor me on GitHub](https://github.com/users/gilbitron/sponsorship)
 
 # Laravel Vue Pagination
 
-A Vue.js pagination component for Laravel paginators.
+Laravel Vue Pagination is a Vue.js pagination component for Laravel. It provides out-of-the-box components for Bootstrap 4/5 and Tailwind CSS.
 
-## Requirements
+## Documentation
 
-* [Vue.js](https://vuejs.org/) 3
-* [Laravel](http://laravel.com/docs/) 5+
-* [Bootstrap](http://getbootstrap.com/) 4
+Complete documentation and demo available at [https://laravel-vue-pagination.org](https://laravel-vue-pagination.org).
 
-For Vue 2 support use [v2](https://github.com/gilbitron/laravel-vue-pagination/releases/tag/2.3.2).
-
-## Install
-
-```bash
-npm install laravel-vue-pagination
-// or
-yarn add laravel-vue-pagination
-```
-
-## Usage
-
-Register the component:
-
-```javascript
-import LaravelVuePagination from 'laravel-vue-pagination';
-
-export default {
-    components: {
-        'Pagination': LaravelVuePagination
-    }
-}
-```
-
-Use the component:
-
-```html
-<ul>
-    <li v-for="post in laravelData.data" :key="post.id">{{ post.title }}</li>
-</ul>
-
-<Pagination :data="laravelData" @pagination-change-page="getResults" />
-```
-
-```javascript
-export default {
-    data() {
-        return {
-            // Our data object that holds the Laravel paginator data
-            laravelData: {},
-        }
-    },
-
-    mounted() {
-        // Fetch initial results
-        this.getResults();
-    },
-
-    methods: {
-        // Our method to GET results from a Laravel endpoint
-        getResults(page = 1) {
-            axios.get('example/results?page=' + page)
-                .then(response => {
-                    this.laravelData = response.data;
-                });
-        }
-    }
-
-}
-```
-
-### Customizing Prev/Next Buttons
-
-Prev/Next buttons can be customized using the `prev-nav` and `next-nav` slots:
-
-```html
-<pagination :data="laravelData">
-    <template #prev-nav>
-        <span>&lt; Previous</span>
-    </template>
-    <template #next-nav>
-        <span>Next &gt;</span>
-    </template>
-</pagination>
-```
-
-## API
-
-### Props
-
-| Name | Type | Description |
-| --- | --- | --- |
-| `data` | Object | An object containing the structure of a [Laravel paginator](https://laravel.com/docs/8.x/pagination) response or a [Laravel API Resource](https://laravel.com/docs/8.x/eloquent-resources) response. |
-| `limit` | Number | (optional) Limit of pages to be rendered. `0` shows all pages (default). `-1` will hide numeric pages and leave only arrow navigation. Any positive integer (e.g. `2`) will define how many pages should be shown on either side of the current page when only a range of pages are shown. |
-| `show-disabled` | Boolean | (optional) Show disabled prev/next buttons instead of hiding them. `false` hides disabled buttons (default). `true` shows disables buttons. |
-| `size` | String | (optional) One of `small`, `default` or `large` |
-| `align` | String | (optional) One of `left` (default), `center` or `right` |
+## Show your Support
 
-### Events
+To show your support for my work on this project:
 
-| Name | Description |
-| --- | --- |
-| `pagination-change-page` | Triggered when a user changes page. Passes the new `page` index as a parameter. |
+* [Star this repository](https://github.com/gilbitron/laravel-vue-pagination/stargazers)
+* [Tell others about this project](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fgilbitron%2Flaravel-vue-pagination)
+* [Sponsor me on GitHub](https://github.com/users/gilbitron/sponsorship)
 
 ## Development
 
 To work on the library locally, run the following command:
 
 ```bash
-npm run serve
+yarn dev
 ```
 
 To run the tests:
 
 ```bash
-npm run test
+yarn test
 ```
 
-## Show your Support
-
-To show your support for my work on this project:
-
-* [Star this repository](https://github.com/gilbitron/laravel-vue-pagination/stargazers)
-* [Tell others about this project](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fgilbitron%2Flaravel-vue-pagination)
-* [Sponsor me on GitHub](https://github.com/users/gilbitron/sponsorship)
-
 ## Credits
 
-Laravel Vue Pagination was created by [Gilbert Pellegrom](https://gilbitron.me) from [Dev7studios](https://dev7studios.co). Released under the MIT license.
+Laravel Vue Pagination was created by [Gilbert Pellegrom](https://gilbitron.me). Released under the MIT license.