rebuild the component as .vue and build as .js

.eslintignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+coverage/

.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "extends": "airbnb-base",
+  "plugins": ["html"]
+}

.gitignore

@@ -1,13 +1,53 @@
-/.idea
-
-# Mac stuff
-.DS_Store
-.AppleDouble
-.LSOverride
-._*
-.DocumentRevisions-V100
-.fseventsd
-.Spotlight-V100
-.TemporaryItems
-.Trashes
-.VolumeIcon.icns
+/.idea
+
+### OSX ###
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### Linux ###
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# node-waf configuration
+.lock-wscript
+
+# Dependency directory
+node_modules

CONTRIBUTING.md

@@ -0,0 +1,16 @@
+# Contributing
+
+Contributions are **welcome** and will be fully **credited**.
+
+We accept contributions via Pull Requests on [Github](https://github.com/pogachar/).
+
+
+## Pull Requests
+
+- **Document any change in behaviour** - Make sure the `README.md` and any other relevant documentation are kept up-to-date.
+
+- **Create feature branches** - Don't ask us to pull from your master branch.
+
+- **One pull request per feature** - If you want to do more than one thing, send multiple pull requests.
+
+**Happy coding**!

README.md

@@ -1,7 +1,16 @@
 # vue-pagination
 Vue pagination component for use with Bootstrap and Laravel pagination.
 
-* [Vue.js](http://vuejs.org/) (tested with 2.0.1).
+<p align="center">
+  <a href="LICENSE">
+    <img src="https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square" alt="Software License" />
+  </a>
+  <a href="https://npmjs.org/package/vue-bootstrap-pagination">
+    <img src="https://img.shields.io/npm/v/vue-bootstrap-pagination.svg?style=flat-square" alt="Packagist" />
+  </a>
+</p>
+
+* [Vue.js](http://vuejs.org/) (tested with 2.2.1).
 * [Bootstrap CSS](http://getbootstrap.com/) (tested with 3.3.7)
 
 To use with Vue.js 1 use the 1x version.
@@ -12,16 +21,23 @@ Laravel is not required as long as the pagination object contains the required a
 * per_page,
 
 ### Installation
+```
+npm install --save vue-bootstrap-pagination
+```
 
-```bash
-$ npm install vue-bootstrap-pagination
+or
+
+```
+yarn add vue-bootstrap-pagination
 ```
 
 ### Example
 ```js
+import pagination from 'vue-bootstrap-pagination'
+
 new Vue({
   el: '#app',
-  data () {
+  data() {
     return {
       items: [],
       pagination: {
@@ -30,44 +46,46 @@ new Vue({
         current_page: 1, // required
         last_page: 0,    // required
         from: 1,
-        to: 12           // required
+        to: 12
       },
       paginationOptions: {
-		offset: 4,
+        offset: 4,
         previousText: 'Prev',
         nextText: 'Next',
         alwaysShowPrevNext: true
       }
     }
   },
   methods: {
-    loadData () {
-      let options = {
+    loadData() {
+      const options = {
         params: {
           paginate: this.pagination.per_page,
           page: this.pagination.current_page,
           /* additional parameters */
         }
       };
-      this.$http.get('/getData', options).then(response => {
-        this.items = response.data.data;
+      this.$http.get('/getData', options)
+        .then(response => {
+          this.items = response.data.data;
 
-        // Overwrite pagination object
-        this.pagination = response.data.pagination; // API response edited to have pagination data under pagination object
+          // Overwrite pagination object
+          this.pagination = response.data.pagination; // API response edited to have pagination data under pagination object
 
-        // Or overwrite only values
-        /*
-          this.pagination.current_page = response.data.current_page;
-          this.pagination.last_page = response.data.last_page;
-          ...
-        */
-      }, error => {
-        // handle error
-      });
+          // Or overwrite only values
+          /*
+            this.pagination.current_page = response.data.current_page;
+            this.pagination.last_page = response.data.last_page;
+            ...
+          */
+         })
+         .catch(error => {
+            // handle error
+         });
     }
   },
   components: {
-    pagination: require('vue-bootstrap-pagination')
+    pagination
   }
 })
 ```
@@ -103,3 +121,13 @@ Offset prop has ben removed with version 2.10.0. Use `options.offset` instead
 | alwaysShowPrevNext  | Boolean | false       | Show prev/next button even if on first/last page
 
 If you change `this.pagination.per_page` the callback function will be called
+
+## Contributing
+
+Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
+
+## License
+
+The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
+
+[link-author]: https://github.com/pogachar

dist/vue-bootstrap-pagination.common.js

@@ -0,0 +1,82 @@
+var vueBootstrapPagination = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',[(_vm.pagination.last_page > 0)?_c('ul',{staticClass:"pagination",class:_vm.sizeClass},[(_vm.showPrevious())?_c('li',{class:{ 'disabled' : _vm.pagination.current_page <= 1 }},[(_vm.pagination.current_page <= 1)?_c('span',[_c('span',{attrs:{"aria-hidden":"true"}},[_vm._v(_vm._s(_vm.config.previousText))])]):_vm._e(),(_vm.pagination.current_page > 1 )?_c('a',{attrs:{"href":"#","aria-label":_vm.config.ariaPrevioius},on:{"click":function($event){$event.preventDefault();_vm.changePage(_vm.pagination.current_page - 1);}}},[_c('span',{attrs:{"aria-hidden":"true"}},[_vm._v(_vm._s(_vm.config.previousText))])]):_vm._e()]):_vm._e(),_vm._l((_vm.array),function(num){return _c('li',{class:{ 'active' : num === _vm.pagination.current_page }},[_c('a',{attrs:{"href":"#"},on:{"click":function($event){$event.preventDefault();_vm.changePage(num);}}},[_vm._v(_vm._s(num))])])}),(_vm.showNext())?_c('li',{class:{ 'disabled' : _vm.pagination.current_page === _vm.pagination.last_page || _vm.pagination.last_page === 0 }},[(_vm.pagination.current_page === _vm.pagination.last_page || _vm.pagination.last_page === 0)?_c('span',[_c('span',{attrs:{"aria-hidden":"true"}},[_vm._v(_vm._s(_vm.config.nextText))])]):_vm._e(),(_vm.pagination.current_page < _vm.pagination.last_page)?_c('a',{attrs:{"href":"#","aria-label":_vm.config.ariaNext},on:{"click":function($event){$event.preventDefault();_vm.changePage(_vm.pagination.current_page + 1);}}},[_c('span',{attrs:{"aria-hidden":"true"}},[_vm._v(_vm._s(_vm.config.nextText))])]):_vm._e()]):_vm._e()],2):_vm._e()])},staticRenderFns: [],
+  props: {
+    pagination: {
+      type: Object,
+      required: true,
+    },
+    callback: {
+      type: Function,
+      required: true,
+    },
+    options: {
+      type: Object,
+    },
+    size: {
+      type: String,
+    },
+  },
+  computed: {
+    array() {
+      if (this.pagination.last_page <= 0) {
+        return [];
+      }
+      let from = this.pagination.current_page - this.config.offset;
+      if (from < 1) {
+        from = 1;
+      }
+      let to = from + (this.config.offset * 2);
+      if (to >= this.pagination.last_page) {
+        to = this.pagination.last_page;
+      }
+      const arr = [];
+      while (from <= to) {
+        arr.push(from);
+        from += 1;
+      }
+      return arr;
+    },
+    config() {
+      return Object.assign({
+        offset: 3,
+        ariaPrevious: 'Previous',
+        ariaNext: 'Next',
+        previousText: '«',
+        nextText: '»',
+        alwaysShowPrevNext: false,
+      }, this.options);
+    },
+    sizeClass() {
+      if (this.size === 'large') {
+        return 'pagination-lg';
+      } else if (this.size === 'small') {
+        return 'pagination-sm';
+      }
+      return '';
+    },
+  },
+  watch: {
+    'pagination.per_page'(newVal, oldVal) { // eslint-disable-line
+      if (+newVal !== +oldVal) {
+        this.callback();
+      }
+    },
+  },
+  methods: {
+    showPrevious() {
+      return this.config.alwaysShowPrevNext || this.pagination.current_page > 1;
+    },
+    showNext() {
+      return this.config.alwaysShowPrevNext ||
+          this.pagination.current_page < this.pagination.last_page;
+    },
+    changePage(page) {
+      if (this.pagination.current_page === page) {
+        return;
+      }
+      this.$set(this.pagination, 'current_page', page);
+      this.callback();
+    },
+  },
+};
+
+module.exports = vueBootstrapPagination;

dist/vue-bootstrap-pagination.esm.js

@@ -0,0 +1,82 @@
+var vueBootstrapPagination = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',[(_vm.pagination.last_page > 0)?_c('ul',{staticClass:"pagination",class:_vm.sizeClass},[(_vm.showPrevious())?_c('li',{class:{ 'disabled' : _vm.pagination.current_page <= 1 }},[(_vm.pagination.current_page <= 1)?_c('span',[_c('span',{attrs:{"aria-hidden":"true"}},[_vm._v(_vm._s(_vm.config.previousText))])]):_vm._e(),(_vm.pagination.current_page > 1 )?_c('a',{attrs:{"href":"#","aria-label":_vm.config.ariaPrevioius},on:{"click":function($event){$event.preventDefault();_vm.changePage(_vm.pagination.current_page - 1);}}},[_c('span',{attrs:{"aria-hidden":"true"}},[_vm._v(_vm._s(_vm.config.previousText))])]):_vm._e()]):_vm._e(),_vm._l((_vm.array),function(num){return _c('li',{class:{ 'active' : num === _vm.pagination.current_page }},[_c('a',{attrs:{"href":"#"},on:{"click":function($event){$event.preventDefault();_vm.changePage(num);}}},[_vm._v(_vm._s(num))])])}),(_vm.showNext())?_c('li',{class:{ 'disabled' : _vm.pagination.current_page === _vm.pagination.last_page || _vm.pagination.last_page === 0 }},[(_vm.pagination.current_page === _vm.pagination.last_page || _vm.pagination.last_page === 0)?_c('span',[_c('span',{attrs:{"aria-hidden":"true"}},[_vm._v(_vm._s(_vm.config.nextText))])]):_vm._e(),(_vm.pagination.current_page < _vm.pagination.last_page)?_c('a',{attrs:{"href":"#","aria-label":_vm.config.ariaNext},on:{"click":function($event){$event.preventDefault();_vm.changePage(_vm.pagination.current_page + 1);}}},[_c('span',{attrs:{"aria-hidden":"true"}},[_vm._v(_vm._s(_vm.config.nextText))])]):_vm._e()]):_vm._e()],2):_vm._e()])},staticRenderFns: [],
+  props: {
+    pagination: {
+      type: Object,
+      required: true,
+    },
+    callback: {
+      type: Function,
+      required: true,
+    },
+    options: {
+      type: Object,
+    },
+    size: {
+      type: String,
+    },
+  },
+  computed: {
+    array() {
+      if (this.pagination.last_page <= 0) {
+        return [];
+      }
+      let from = this.pagination.current_page - this.config.offset;
+      if (from < 1) {
+        from = 1;
+      }
+      let to = from + (this.config.offset * 2);
+      if (to >= this.pagination.last_page) {
+        to = this.pagination.last_page;
+      }
+      const arr = [];
+      while (from <= to) {
+        arr.push(from);
+        from += 1;
+      }
+      return arr;
+    },
+    config() {
+      return Object.assign({
+        offset: 3,
+        ariaPrevious: 'Previous',
+        ariaNext: 'Next',
+        previousText: '«',
+        nextText: '»',
+        alwaysShowPrevNext: false,
+      }, this.options);
+    },
+    sizeClass() {
+      if (this.size === 'large') {
+        return 'pagination-lg';
+      } else if (this.size === 'small') {
+        return 'pagination-sm';
+      }
+      return '';
+    },
+  },
+  watch: {
+    'pagination.per_page'(newVal, oldVal) { // eslint-disable-line
+      if (+newVal !== +oldVal) {
+        this.callback();
+      }
+    },
+  },
+  methods: {
+    showPrevious() {
+      return this.config.alwaysShowPrevNext || this.pagination.current_page > 1;
+    },
+    showNext() {
+      return this.config.alwaysShowPrevNext ||
+          this.pagination.current_page < this.pagination.last_page;
+    },
+    changePage(page) {
+      if (this.pagination.current_page === page) {
+        return;
+      }
+      this.$set(this.pagination, 'current_page', page);
+      this.callback();
+    },
+  },
+};
+
+export default vueBootstrapPagination;