Merge branch 'v3'

.eslintrc.js

@@ -1,19 +1,36 @@
 module.exports = {
-    root: true,
-    env: {
-        node: true
-    },
-    'extends': [
-        'plugin:vue/essential',
-        '@vue/standard'
+    extends: [
+        'eslint:recommended',
+        'plugin:vue/vue3-strongly-recommended',
+        'prettier',
     ],
+    plugins: ['prettier'],
     rules: {
-        'indent': ['error', 4],
-        'semi': 'off',
-        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+        indent: [
+            'error',
+            4,
+            {
+                SwitchCase: 1,
+            },
+        ],
+        'linebreak-style': ['error', 'unix'],
+        quotes: [
+            'error',
+            'single',
+            {
+                avoidEscape: true,
+            },
+        ],
+        'no-empty': [
+            'error',
+            {
+                allowEmptyCatch: true,
+            },
+        ],
+        semi: 0,
+        'no-undef': 0,
+        'no-console': 0,
+        'vue/html-indent': ['error', 4],
+        'vue/max-attributes-per-line': 0,
     },
-    parserOptions: {
-        parser: 'babel-eslint'
-    }
-}
+};

.github/workflows/close-issues.yml

@@ -0,0 +1,23 @@
+name: Close inactive issues
+
+on:
+  schedule:
+    - cron: "20 1 * * *"
+
+jobs:
+  close-issues:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - uses: actions/stale@v3
+        with:
+          days-before-issue-stale: 90
+          days-before-issue-close: 30
+          stale-issue-label: "stale"
+          stale-issue-message: "This issue is stale because it has been open for 90 days with no activity."
+          close-issue-message: "This issue was closed because it has been inactive for 30 days since being marked as stale."
+          days-before-pr-stale: -1
+          days-before-pr-close: -1
+          repo-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/npm-publish.yml

@@ -0,0 +1,29 @@
+name: Publish to NPM
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16
+      - run: yarn && yarn test
+
+  publish:
+    needs: test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: yarn && yarn build
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.github/workflows/tests.yml

@@ -1,24 +1,17 @@
-name: Tests
+name: Run tests
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
-    branches: [ master ]
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
+    branches: [master]
 
 jobs:
-  build:
+  test:
     runs-on: ubuntu-latest
-
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
-      - name: Install dependencies
-        run: yarn
-      - name: Run tests
-        run: yarn test
+          node-version: 16
+      - run: yarn && yarn test

.gitignore

@@ -1,21 +1,24 @@
-.DS_Store
-node_modules
-/dist/*.html
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist-ssr
+*.local
 
 # Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
 .idea
-.vscode
+.DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
-*.sw*
+*.sw?

.prettierrc

@@ -0,0 +1,4 @@
+{
+    "tabWidth": 4,
+    "singleQuote": true
+}

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+    "recommendations": [
+        "dbaeumer.vscode-eslint",
+        "johnsoncodehk.volar"
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+    "eslint.validate": [
+        "javascript",
+        "javascriptreact",
+        "vue"
+    ],
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true
+    },
+}

LICENSE

@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

README.md

@@ -1,14 +1,14 @@
-[![Build Status](https://travis-ci.org/gilbitron/laravel-vue-pagination.svg?branch=master)](https://travis-ci.org/gilbitron/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)
+[![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)
 
 > 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 that works with Bootstrap.
+A Vue.js pagination component for Laravel paginators.
 
 ## Requirements
 
-* [Vue.js](https://vuejs.org/) 2.x ([Looking for Vue 3 support?](https://github.com/gilbitron/laravel-vue-pagination/issues/124))
-* [Laravel](http://laravel.com/docs/) 5.x
+* [Vue.js](https://vuejs.org/) 3
+* [Laravel](http://laravel.com/docs/) 5+
 * [Bootstrap](http://getbootstrap.com/) 4
 
 ## Install
@@ -28,7 +28,13 @@ See [https://laravel-vue-pagination.now.sh](https://laravel-vue-pagination.now.s
 Register the component:
 
 ```javascript
-Vue.component('pagination', require('laravel-vue-pagination'));
+import LaravelVuePagination from 'laravel-vue-pagination';
+
+export default {
+    components: {
+        'Pagination': LaravelVuePagination
+    }
+}
 ```
 
 Use the component:
@@ -38,33 +44,32 @@ Use the component:
     <li v-for="post in laravelData.data" :key="post.id">{{ post.title }}</li>
 </ul>
 
-<pagination :data="laravelData" @pagination-change-page="getResults"></pagination>
+<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;
-				});
-		}
-	}
+    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;
+                });
+        }
+    }
 
 }
 ```
@@ -75,8 +80,12 @@ Prev/Next buttons can be customized using the `prev-nav` and `next-nav` slots:
 
 ```html
 <pagination :data="laravelData">
-	<span slot="prev-nav">&lt; Previous</span>
-	<span slot="next-nav">Next &gt;</span>
+    <template #prev-nav>
+        <span>&lt; Previous</span>
+    </template>
+    <template #next-nav>
+        <span>Next &gt;</span>
+    </template>
 </pagination>
 ```
 
@@ -86,7 +95,7 @@ Prev/Next buttons can be customized using the `prev-nav` and `next-nav` slots:
 
 | Name | Type | Description |
 | --- | --- | --- |
-| `data` | Object | An object containing the structure of a [Laravel paginator](https://laravel.com/docs/5.7/pagination) response or a [Laravel API Resource](https://laravel.com/docs/5.7/eloquent-resources) response. |
+| `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` |