├── .babelrc
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── src
    └── JwPagination.vue
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": [
3 |         "@babel/preset-env"
4 |     ]
5 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Component lib directory
 2 | lib
 3 | 
 4 | # Logs
 5 | logs
 6 | *.log
 7 | npm-debug.log*
 8 | 
 9 | # Runtime data
10 | pids
11 | *.pid
12 | *.seed
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # node-waf configuration
27 | .lock-wscript
28 | 
29 | # Compiled binary addons (http://nodejs.org/api/addons.html)
30 | build/Release
31 | 
32 | # Dependency directories
33 | node_modules
34 | jspm_packages
35 | typings
36 | 
37 | # Optional npm cache directory
38 | .npm
39 | 
40 | # Optional REPL history
41 | .node_repl_history
42 | 
43 | # VS Code settings
44 | .vscode


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .vscode
2 | src
3 | .babelrc
4 | webpack.config.js
5 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2019 Jason Watmore
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # jw-vue-pagination
2 | 
3 | Vue Pagination Component
4 | 
5 | Usage instructions and demo available at https://jasonwatmore.com/post/2019/08/21/vue-js-simple-pagination-example


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "jw-vue-pagination",
 3 |     "version": "1.0.3",
 4 |     "homepage": "https://jasonwatmore.com/post/2019/08/21/vue-js-simple-pagination-example",
 5 |     "repository": {
 6 |         "type": "git",
 7 |         "url": "https://github.com/cornflourblue/jw-vue-pagination"
 8 |     },
 9 |     "scripts": {
10 |         "build": "webpack"
11 |     },
12 |     "main": "./lib/JwPagination.js",
13 |     "license": "MIT",
14 |     "devDependencies": {
15 |         "@babel/core": "^7.5.5",
16 |         "@babel/preset-env": "^7.5.5",
17 |         "babel-loader": "^8.0.6",
18 |         "babel-preset-vue": "^2.0.2",
19 |         "css-loader": "^3.2.0",
20 |         "html-webpack-plugin": "^3.2.0",
21 |         "path": "^0.12.7",
22 |         "vue": "^2.6.10",
23 |         "vue-loader": "^15.7.1",
24 |         "vue-template-compiler": "^2.6.10",
25 |         "webpack": "^4.39.1",
26 |         "webpack-cli": "^3.3.6",
27 |         "webpack-dev-server": "^3.8.0"
28 |     },
29 |     "dependencies": {
30 |         "jw-paginate": "^1.0.4"
31 |     }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/JwPagination.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <ul v-if="pager.pages && pager.pages.length" class="pagination" :style="ulStyles">
  3 |         <li class="page-item first" :class="{'disabled': pager.currentPage === 1}" :style="liStyles">
  4 |             <a class="page-link" @click="setPage(1)" :style="aStyles">{{labels.first}}</a>
  5 |         </li>
  6 |         <li class="page-item previous" :class="{'disabled': pager.currentPage === 1}" :style="liStyles">
  7 |             <a class="page-link" @click="setPage(pager.currentPage - 1)" :style="aStyles">{{labels.previous}}</a>
  8 |         </li>
  9 |         <li v-for="page in pager.pages" :key="page" class="page-item page-number" :class="{'active': pager.currentPage === page}" :style="liStyles">
 10 |             <a class="page-link" @click="setPage(page)" :style="aStyles">{{page}}</a>
 11 |         </li>
 12 |         <li class="page-item next" :class="{'disabled': pager.currentPage === pager.totalPages}" :style="liStyles">
 13 |             <a class="page-link" @click="setPage(pager.currentPage + 1)" :style="aStyles">{{labels.next}}</a>
 14 |         </li>
 15 |         <li class="page-item last" :class="{'disabled': pager.currentPage === pager.totalPages}" :style="liStyles">
 16 |             <a class="page-link" @click="setPage(pager.totalPages)" :style="aStyles">{{labels.last}}</a>
 17 |         </li>
 18 |     </ul>
 19 | </template>
 20 | 
 21 | <script>
 22 |     import paginate from 'jw-paginate';
 23 | 
 24 |     const defaultLabels = {
 25 |         first: 'First',
 26 |         last: 'Last',
 27 |         previous: 'Previous',
 28 |         next: 'Next'
 29 |     };
 30 | 
 31 |     const defaultStyles = {
 32 |         ul: {
 33 |             margin: 0,
 34 |             padding: 0,
 35 |             display: 'inline-block'
 36 |         },
 37 |         li: {
 38 |             listStyle: 'none',
 39 |             display: 'inline',
 40 |             textAlign: 'center'
 41 |         },
 42 |         a: {
 43 |             cursor: 'pointer',
 44 |             padding: '6px 12px',
 45 |             display: 'block',
 46 |             float: 'left'
 47 |         }
 48 |     };
 49 | 
 50 |     export default {
 51 |         props: {
 52 |             items: {
 53 |                 type: Array,
 54 |                 required: true
 55 |             },
 56 |             initialPage: {
 57 |                 type: Number,
 58 |                 default: 1
 59 |             },
 60 |             pageSize: {
 61 |                 type: Number,
 62 |                 default: 10
 63 |             },
 64 |             maxPages: {
 65 |                 type: Number,
 66 |                 default: 10
 67 |             },
 68 |             labels: {
 69 |                 type: Object,
 70 |                 default: () => defaultLabels
 71 |             },
 72 |             styles: {
 73 |                 type: Object
 74 |             },
 75 |             disableDefaultStyles: {
 76 |                 type: Boolean,
 77 |                 default: false
 78 |             }
 79 |         },
 80 |         data () {
 81 |             return {
 82 |                 pager: {},
 83 |                 ulStyles: {},
 84 |                 liStyles: {},
 85 |                 aStyles: {}
 86 |             }
 87 |         },
 88 |         created () {
 89 |             if (!this.$listeners.changePage) {
 90 |                 throw 'Missing required event listener: "changePage"';
 91 |             }
 92 | 
 93 |             // set default styles unless disabled
 94 |             if (!this.disableDefaultStyles) {
 95 |                 this.ulStyles = defaultStyles.ul;
 96 |                 this.liStyles = defaultStyles.li;
 97 |                 this.aStyles = defaultStyles.a;
 98 |             }
 99 | 
100 |             // merge custom styles with default styles
101 |             if (this.styles) {
102 |                 this.ulStyles = { ...this.ulStyles, ...this.styles.ul };
103 |                 this.liStyles = { ...this.liStyles, ...this.styles.li };
104 |                 this.aStyles = { ...this.aStyles, ...this.styles.a };
105 |             }
106 | 
107 |             // set to initial page
108 |             this.setPage(this.initialPage);
109 |         },
110 |         methods: {
111 |             setPage(page) {
112 |                 const { items, pageSize, maxPages } = this;
113 | 
114 |                 // get new pager object for specified page
115 |                 const pager = paginate(items.length, page, pageSize, maxPages);
116 | 
117 |                 // get new page of items from items array
118 |                 const pageOfItems = items.slice(pager.startIndex, pager.endIndex + 1);
119 | 
120 |                 // update pager
121 |                 this.pager = pager;
122 | 
123 |                 // emit change page event to parent component
124 |                 this.$emit('changePage', pageOfItems);
125 |             }
126 |         },
127 |         watch: {
128 |             items () {
129 |                 this.setPage(this.initialPage);
130 |             }
131 |         }
132 |     }
133 | </script>


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | const VueLoaderPlugin = require('vue-loader/lib/plugin')
 3 | 
 4 | module.exports = {
 5 |     mode: 'production',
 6 |     entry: './src/JwPagination.vue',
 7 |     output: {
 8 |         path: path.resolve('lib'),
 9 |         filename: 'JwPagination.js',
10 |         libraryTarget: 'commonjs2'
11 |     },
12 |     module: {
13 |         rules: [
14 |             {
15 |                 test: /\.vue?$/,
16 |                 loader: 'vue-loader'
17 |             },
18 |             {
19 |                 test: /\.js?$/,
20 |                 loader: 'babel-loader'
21 |             }
22 |         ]
23 |     },
24 |     plugins: [
25 |         new VueLoaderPlugin()
26 |     ]
27 | }


--------------------------------------------------------------------------------