├── .gitignore
├── README.md
├── eslintrc.js
├── package.json
└── src
    ├── Pagination.vue
    ├── index.js
    └── paging.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Pagination
 2 | 
 3 | Pagination component for Vue Bulma.
 4 | 
 5 | ## Installation
 6 | 
 7 | ```sh
 8 | $ npm install vue-bulma-pagination --save
 9 | # or
10 | $ yarn add vue-bulma-pagination --save
11 | ```
12 | 
13 | ## Examples
14 | 
15 | ```vue
16 | <template>
17 |   <div>
18 |     <pagination :urlPrefix="'/'" :currentPage="2" :lastPage="100" />
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | import Pagination from 'vue-bulma-pagination/src/Pagination'
24 | 
25 | export default {
26 |   components: {
27 |     Pagination
28 |   }
29 | }
30 | </script>
31 | ```
32 | ## Document
33 | 
34 | | props       | required | default                   | optional                    | desc                             |
35 | | ----------- | -------- | --------------------------| --------------------------- | -------------------------------- |
36 | | urlPrefix   | `false`  | '/'                       |                             | urlPrefix for vue-router         |
37 | | urlBuilder  | `false`  | [urlBuilder](#urlbuilderpagenum) |                             | urlBuilder result will passed to vue-router link `to` prop        |
38 | | currentPage | `true`   | 1                         |                             |                                  |
39 | | lastPage    | `true`   |                           |                             | the last page number             |
40 | | displayPage | `false`  | 4                         |                             | page number will to be displayed |
41 | | modifiers   | `false`  | ''                        | '','is-centered','is-right' |                                  |
42 | | prev        | `false`  | 'Prev'                    |                             | text of `prev` button            |
43 | | next        | `false`  | 'Next'                    |                             | text of `next` button            |
44 | 
45 | 
46 | ### urlBuilder(pageNum)
47 | Returned value will be passed to `router-link` as `:to` prop. See example below:
48 | ```vue
49 | <template>
50 |   <div class="container">
51 |     <pagination :urlBuilder="urlBuilder" :currentPage="2" :lastPage="100" />
52 |   </div>
53 | </template>
54 | 
55 | <script>
56 | import Pagination from 'vue-bulma-pagination/src/Pagination'
57 | 
58 | export default {
59 |   components: {
60 |     Pagination
61 |   },
62 | 
63 |   methods: {
64 |     urlBuilder (page) {
65 |       return { query: { ...this.$route.query, page } } // Changing page in location query
66 |     }
67 |   }
68 | }
69 | </script>
70 | ```
71 | 
72 | ## Badges
73 | 
74 | ![](https://img.shields.io/badge/license-MIT-blue.svg)
75 | ![](https://img.shields.io/badge/status-dev-yellow.svg)
76 | 
77 | ---
78 | 


--------------------------------------------------------------------------------
/eslintrc.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vue-bulma/pagination/39ed0536bf240f6d3efbe5ef0c85d6690577291c/eslintrc.js


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-bulma-pagination",
 3 |   "version": "1.2.0",
 4 |   "description": "Pagination component for Vue Bulma",
 5 |   "main": "src/index.js",
 6 |   "peerDependencies": {
 7 |     "bulma": ">=0.2",
 8 |     "vue": ">=2",
 9 |     "vue-router": ">=2"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "https://github.com/vue-bulma/vue-bulma-pagination"
14 |   },
15 |   "keywords": [
16 |     "vue",
17 |     "bulma",
18 |     "vue-bulma",
19 |     "vue-bulma-pagination",
20 |     "pagination"
21 |   ],
22 |   "author": "netpi",
23 |   "license": "MIT"
24 | }
25 | 


--------------------------------------------------------------------------------
/src/Pagination.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <nav :class="getNavClassName()">
 3 |         <router-link class="pagination-previous" :to="urlBuilder(prevPage)" :disabled="outOfRegion(formatCurrentPage - 1)">{{prev}}</router-link>
 4 |         <router-link class="pagination-next" :to="urlBuilder(nextPage)"  :disabled="outOfRegion(formatCurrentPage + 1)">{{next}}</router-link>
 5 |         <ul class="pagination-list" >
 6 |             <li v-for="item in pagingList" >
 7 |             <router-link v-if="item !== '...'" :class="getPagingClassName(item)" :to="urlBuilder(item)">{{ item }}</router-link>
 8 |             <span v-else class="pagination-ellipsis">...</span>
 9 |             </li>
10 |         </ul>
11 |     </nav>
12 | </template>
13 | <script>
14 | import paging from './paging.js'
15 | export default {
16 |   name: 'vue-bulma-pagination',
17 |   props: {
18 |     urlPrefix: {
19 |       type:String,
20 |       default:'/'
21 |     },
22 |     urlBuilder: {
23 |       type: Function,
24 |       default (page) {
25 |         return this.normalize(`${this.urlPrefix}/${page}`)
26 |       }
27 |     },
28 |     currentPage: {
29 |       type: Number,
30 |       default: 1
31 |     },
32 |     lastPage: Number,
33 |     displayPage: {
34 |       type: Number,
35 |       default: 4
36 |     },
37 |     modifiers: {
38 |       type: String,
39 |       default: ''
40 |     },
41 |     prev: {
42 |       type: String,
43 |       default: 'Prev'
44 |     },
45 |     next: {
46 |       type: String,
47 |       default: 'Next'
48 |     },
49 |   },
50 |   methods: {
51 |     getNavClassName () {
52 |       var optional = ['','is-centered','is-right']
53 |       if(['','is-centered','is-right'].indexOf(this.modifiers.trim()) >= 0){
54 |         return 'pagination ' + this.modifiers
55 |       } else {
56 |         console.warn(" modifiers %s is not within the options ", this.modifiers, optional,
57 |         '\n see more detail https://github.com/vue-bulma/vue-bulma-pagination#doc')
58 |         return 'pagination'
59 |       }
60 |     },
61 |     getPagingClassName (item) {
62 |       return this.currentPage !== item ? 'pagination-link' : 'pagination-link is-current'
63 |     },
64 |     outOfRegion (page) {
65 |       return page < 1 || page > this.lastPage
66 |     },
67 |     normalize (path) {
68 |       return path.replace(/\/+/g,'/')
69 |     }
70 |   },
71 |   computed: {
72 |     pagingList () {
73 |       return paging(this.currentPage, this.lastPage, this.displayPage)
74 |     },
75 |     formatCurrentPage () {
76 |       const currentPage = Number(this.currentPage)
77 |       return currentPage > 0 ? currentPage : 1
78 |     },
79 |     prevPage () {
80 |       return Math.max(this.formatCurrentPage - 1, 1)
81 |     },
82 |     nextPage () {
83 |       return Math.min(this.formatCurrentPage + 1, this.lastPage)
84 |     }
85 |   }
86 | }
87 | </script>
88 | 
89 | <style >
90 | .pagination-list {
91 |     list-style : none ;
92 | }
93 | .pagination-list li {
94 |     list-style : none ;
95 | }
96 | </style>
97 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Pagination from './Pagination.vue'
2 | 
3 | export default Pagination
4 | 


--------------------------------------------------------------------------------
/src/paging.js:
--------------------------------------------------------------------------------
 1 | module.exports = function (current, length, displayLength) {
 2 |   if (length <= 1) return []
 3 |   displayLength = displayLength - 2
 4 |   var indexes = [1]
 5 |   var start = Math.round(current - displayLength / 2)
 6 |   var end = Math.round(current + displayLength / 2)
 7 |   if (start <= 1) {
 8 |     start = 2
 9 |     end = start + displayLength - 1
10 |     if (end >= length - 1) end = length - 1
11 |   }
12 |   if (end >= length - 1) {
13 |     end = length - 1
14 |     start = end - displayLength + 1
15 |     if (start <= 1) start = 2
16 |   }
17 |   if (start !== 2) indexes.push('...')
18 |   for (var i = start; i <= end; i++) {
19 |     indexes.push(i)
20 |   }
21 |   if (end !== length - 1) indexes.push('...')
22 |   indexes.push(length)
23 |   return indexes
24 | }
25 | 


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