├── .gitignore
├── ISSUE_TEMPLATE.md
├── LICENSE
├── README.md
├── dist
    └── vue-pagination.min.js
├── index.js
├── package.json
└── src
    └── template.html


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


--------------------------------------------------------------------------------
/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | - Vue.js version:
2 | - consumed using: (browserify/webpack/pre-compiled)
3 | - FULL error message (including stack trace):
4 | - relevant code:
5 | - steps for reproducing the issue:
6 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Matanya
 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 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue Pagination
 2 | 
 3 | Note: This package is for use with Vuejs 1.
 4 | For version 2 please use [vue-pagination-2](https://www.npmjs.com/package/vue-pagination-2) instead.
 5 | 
 6 | Simple, generic and non-intrusive pagination component for Vue.js.
 7 | Presentation is based on bootstrap.
 8 | 
 9 | - [Dependencies](#dependencies)
10 | - [Installation](#installation)
11 | - [Usage](#usage)
12 | - [Programmatic Manipulation](#programmatic-manipulation)
13 | - [Computed Properties](#computed-properties)
14 | 
15 | # Dependencies
16 | 
17 | * Vue.js (>=1.0). Required.
18 | * Bootstrap (CSS). Optional.
19 | 
20 | # Installation
21 | 
22 | ## Option 1
23 | 
24 | Compile the code using `browserify` with the `stringify` transform
25 | 
26 |     npm install v-pagination
27 | 
28 | Require the script:
29 | 
30 |     var VuePagination = require('v-pagination');
31 | 
32 | ## Option 2
33 | 
34 | Import the [compiled standalone file](https://raw.githubusercontent.com/matfish2/vue-pagination/master/dist/vue-pagination.min.js) into your HTML, which will expose a global `VuePagination` variable.
35 | 
36 | # Usage
37 | 
38 | [LIVE DEMO](https://jsfiddle.net/matfish2/rnw8jjs3/)
39 | 
40 | ## Register the component
41 | 
42 |     Vue.use(VuePagination)
43 | 
44 | HTML:
45 | 
46 |     <pagination for="some-entity" :records="500"></pagination>
47 | 
48 | props:
49 | 
50 | * `for` `string` `required` unique identifier for the component instance.
51 | * `records` `number` `required` number of records
52 | * `per-page` `number` `optional` records per page. Default: 25
53 | * `chunk` `number` `optional` max pages per chunk. Default: 10
54 | * `count-text` `string` `optional` total records text. Default: '{count} records'
55 | 
56 | When a page is selected an event will be dispatched, using the unique id for the component.
57 | Listen to it and respond accordingly:
58 | 
59 |       this.$on('vue-pagination::some-entity', function(page) {
60 |           // display the relevant records using the page param
61 |       });
62 | 
63 | # Programmatic Manipulation
64 | 
65 | To programmatically set the page apply a `v-ref` identifier to the component and use one of the following methods:
66 | 
67 | * `setPage(page)`
68 | * `next()`
69 | * `prev()`
70 | * `nextChunk()`
71 | * `prevChunk()`
72 | 
73 | All methods return `true` if the page is legal and was thus set, or `false` otherwise.
74 | 
75 | # Computed Properties
76 | 
77 | * `totalPages`
78 | * `totalChunks`
79 | * `currentChunk`
80 | 
81 | 


--------------------------------------------------------------------------------
/dist/vue-pagination.min.js:
--------------------------------------------------------------------------------
1 | !function(f){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=f();else if("function"==typeof define&&define.amd)define([],f);else{var g;g="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,g.VuePagination=f()}}(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports='<div class="VuePagination">\n  <ul v-show="totalPages>1"\n  class="pagination VuePagination__pagination">\n\n  <li class="VuePagination__pagination-item VuePagination__pagination-item-prev-chunk"\n  v-bind:class="allowedChunk(-1)?\'\':\'disabled\'">\n  <a href="javascript:void(0);"\n  @click="prevChunk()">&lt;&lt;</a>\n</li>\n\n\n<li class="VuePagination__pagination-item VuePagination__pagination-item-prev-page"\nv-bind:class="allowedPage(page-1)?\'\':\'disabled\'">\n<a href="javascript:void(0);"\n@click="prev()">&lt;</a>\n</li>\n\n<li class="VuePagination__pagination-item"\nv-for="page in pages"\nv-bind:class="isActive(page)?\'active\':\'\'">\n<a href="javascript:void(0);"\n@click="setPage(page)">{{page}}</a>\n</li>\n\n<li class="VuePagination__pagination-item VuePagination__pagination-item-next-page"\nv-bind:class="allowedPage(page + 1)?\'\':\'disabled\'">\n<a href="javascript:void(0);"\n@click="next()">&gt;</a>\n</li>\n\n<li class="VuePagination__pagination-item VuePagination__pagination-item-next-chunk"\nv-bind:class="allowedChunk(1)?\'\':\'disabled\'">\n<a href="javascript:void(0);"\n@click="nextChunk()">&gt;&gt;</a>\n</li>\n</ul>\n\n<p v-if="records>0"\nclass="VuePagination__count">{{count}}</p>\n</div>\n'},{}],2:[function(require,module,exports){function range(start,count){return Array.apply(0,Array(count)).map(function(element,index){return index+start})}exports.install=function(Vue){Vue.component("pagination",{template:require("./src/template.html"),data:function(){return{page:1}},props:{"for":{type:String,required:!0},records:{type:Number,required:!0},perPage:{type:Number,required:!1,"default":25},chunk:{type:Number,required:!1,"default":10},countText:{type:String,required:!1,"default":"{count} records"}},computed:{pages:function(){return this.records?range(this.paginationStart,this.pagesInCurrentChunk):[]},totalPages:function(){return this.records?Math.ceil(this.records/this.perPage):1},totalChunks:function(){return Math.ceil(this.totalPages/this.chunk)},currentChunk:function(){return Math.ceil(this.page/this.chunk)},paginationStart:function(){return(this.currentChunk-1)*this.chunk+1},count:function(){return this.countText.replace("{count}",this.records)},pagesInCurrentChunk:function(){return this.paginationStart+this.chunk<=this.totalPages?this.chunk:this.totalPages-this.paginationStart+1}},methods:{setPage:function(page){return this.allowedPage(page)?(this.page=page,this.$dispatch("vue-pagination::"+this["for"],page),!0):!1},next:function(){return this.setPage(this.page+1)},prev:function(){return this.setPage(this.page-1)},nextChunk:function(){return this.setChunk(1)},prevChunk:function(){return this.setChunk(-1)},setChunk:function(direction){this.setPage((this.currentChunk-1+direction)*this.chunk+1)},allowedPage:function(page){return page>=1&&page<=this.totalPages},allowedChunk:function(direction){return 1==direction&&this.currentChunk<this.totalChunks||-1==direction&&this.currentChunk>1},isActive:function(page){return this.page==page}}})}},{"./src/template.html":1}]},{},[2])(2)});
2 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | exports.install = function(Vue) {
  2 | 
  3 |  Vue.component('pagination', {
  4 |   template: require('./src/template.html'),
  5 |   data: function() {
  6 |     return {
  7 |       page: 1
  8 |     }
  9 |   },
 10 |   props: {
 11 |     for: {
 12 |       type: String,
 13 |       required: true
 14 |     },
 15 |     records: {
 16 |       type: Number,
 17 |       required: true
 18 |     },
 19 |     perPage: {
 20 |       type: Number,
 21 |       required: false,
 22 |       default: 25
 23 |     },
 24 |     chunk: {
 25 |       type: Number,
 26 |       required: false,
 27 |       default: 10
 28 |     },
 29 |     countText: {
 30 |       type: String,
 31 |       required: false,
 32 |       default: '{count} records'
 33 |     }
 34 |   },
 35 |   computed: {
 36 |     pages: function() {
 37 | 
 38 |       if (!this.records)
 39 |         return [];
 40 | 
 41 |       return range(this.paginationStart, this.pagesInCurrentChunk);
 42 |     },
 43 |     totalPages: function() {
 44 |       return this.records?Math.ceil(this.records / this.perPage):1;
 45 |     },
 46 |     totalChunks: function() {
 47 |       return Math.ceil(this.totalPages / this.chunk);
 48 |     },
 49 |     currentChunk: function() {
 50 |       return Math.ceil(this.page / this.chunk);
 51 |     },
 52 |     paginationStart: function() {
 53 |      return ((this.currentChunk-1) * this.chunk) + 1;
 54 |    },
 55 |    count: function() {
 56 |     return this.countText.replace('{count}', this.records);
 57 |   },
 58 |   pagesInCurrentChunk: function() {
 59 |     return this.paginationStart + this.chunk <= this.totalPages?
 60 |                          this.chunk:
 61 |                          this.totalPages - this.paginationStart + 1;
 62 |   }
 63 | },
 64 | methods: {
 65 |   setPage: function(page) {
 66 |     if (this.allowedPage(page)) {
 67 |       this.page = page;
 68 |       this.$dispatch('vue-pagination::' + this.for, page);
 69 |       return true;
 70 |     }
 71 | 
 72 |     return false;
 73 |   },
 74 |   next: function() {
 75 |     return this.setPage(this.page + 1);
 76 |   },
 77 |   prev: function() {
 78 |     return this.setPage(this.page -1);
 79 |   },
 80 |   nextChunk: function() {
 81 |     return this.setChunk(1);
 82 |   },
 83 |   prevChunk: function() {
 84 |     return this.setChunk(-1);
 85 |   },
 86 |   setChunk: function(direction) {
 87 |     this.setPage((((this.currentChunk -1) + direction) * this.chunk) + 1);
 88 |   },
 89 |   allowedPage: function(page) {
 90 |     return page>=1 && page<=this.totalPages;
 91 |   },
 92 |   allowedChunk: function(direction) {
 93 |     return (direction==1 && this.currentChunk<this.totalChunks)
 94 |     ||  (direction==-1 && this.currentChunk>1);
 95 |   },
 96 |   isActive: function(page) {
 97 |     return this.page==page;
 98 |   }
 99 | }
100 | });
101 | 
102 | }
103 | 
104 | function range(start, count) {
105 |   return Array.apply(0, Array(count))
106 |   .map(function (element, index) {
107 |    return index + start;
108 |  });
109 | }
110 | 
111 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "v-pagination",
 3 |   "description": "Vue.js pagination component",
 4 |   "version": "0.1.4",
 5 |   "keywords": [
 6 |     "pagination",
 7 |     "vue",
 8 |     "bootstrap"
 9 |     ],
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "https://github.com/matfish2/vue-pagination"
13 |   },
14 |   "files": [
15 |     "src"
16 |   ],
17 |   "dependencies": {
18 |     "vue": ">=1.0 <2.0.0"
19 |   },
20 |     "browserify": {
21 |     "transform": [
22 |       "stringify"
23 |     ]
24 |   },
25 |   "licenses": "MIT",
26 |   "main": "index.js",
27 |   "scripts": {
28 |     "build-min": "browserify index.js --s VuePagination | uglifyjs -c > dist/vue-pagination.min.js"
29 |   },
30 |   "devDependencies": {
31 |     "jasmine-core": "^2.3.4",
32 |     "jquery": "^2.1.4",
33 |     "karma": "^0.13.15",
34 |     "karma-browserify": "^4.4.1",
35 |     "karma-chrome-launcher": "^0.2.1",
36 |     "karma-firefox-launcher": "^0.1.7",
37 |     "karma-jasmine": "^0.3.6",
38 |     "stringify": "^3.2.0"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/template.html:
--------------------------------------------------------------------------------
 1 | <div class="VuePagination">
 2 |   <ul v-show="totalPages>1"
 3 |   class="pagination VuePagination__pagination">
 4 | 
 5 |   <li class="VuePagination__pagination-item VuePagination__pagination-item-prev-chunk"
 6 |   v-bind:class="allowedChunk(-1)?'':'disabled'">
 7 |   <a href="javascript:void(0);"
 8 |   @click="prevChunk()">&lt;&lt;</a>
 9 | </li>
10 | 
11 | 
12 | <li class="VuePagination__pagination-item VuePagination__pagination-item-prev-page"
13 | v-bind:class="allowedPage(page-1)?'':'disabled'">
14 | <a href="javascript:void(0);"
15 | @click="prev()">&lt;</a>
16 | </li>
17 | 
18 | <li class="VuePagination__pagination-item"
19 | v-for="page in pages"
20 | v-bind:class="isActive(page)?'active':''">
21 | <a href="javascript:void(0);"
22 | @click="setPage(page)">{{page}}</a>
23 | </li>
24 | 
25 | <li class="VuePagination__pagination-item VuePagination__pagination-item-next-page"
26 | v-bind:class="allowedPage(page + 1)?'':'disabled'">
27 | <a href="javascript:void(0);"
28 | @click="next()">&gt;</a>
29 | </li>
30 | 
31 | <li class="VuePagination__pagination-item VuePagination__pagination-item-next-chunk"
32 | v-bind:class="allowedChunk(1)?'':'disabled'">
33 | <a href="javascript:void(0);"
34 | @click="nextChunk()">&gt;&gt;</a>
35 | </li>
36 | </ul>
37 | 
38 | <p v-if="records>0"
39 | class="VuePagination__count">{{count}}</p>
40 | </div>
41 | 


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