Support adding additional classes to PaginateLinks component

README.md

@@ -262,6 +262,29 @@ Right arrow –> `ul.paginate-links > li.right-arrow > a`
 
 Ellipses –> `ul.paginate-links > li.ellipses > a`
 
+#### Adding additional classes
+
+In some cases, especially when you're using a CSS framework, you'll need to add additional classes to your links elements. You can do so simply by using the `classes` prop on your `PaginateLinks` component. This prop takes an object that contains the element's selector as the key, and the class you want to add as the value.
+
+Here's an example:
+
+``` html
+<paginate-links
+  for="languages"
+  :simple="{
+    prev: 'Back',
+    next: 'Next'
+  }"
+  :classes="{
+    'ul': 'simple-links-container',
+    '.next > a': 'next-link',
+    '.prev > a': 'prev-link'
+  }"
+></paginate-links>
+```
+
+Note that this feature works on all link types – full links, simple links, and limited links.
+
 ## License
 
 [MIT](http://opensource.org/licenses/MIT)

dist/vue-paginate.js

@@ -1,5 +1,5 @@
 /**
- * vue-paginate v3.1.0
+ * vue-paginate v3.2.0
  * (c) 2016 Taha Shashtari
  * @license MIT
  */
@@ -5492,6 +5492,10 @@
         validator: function validator (obj) {
           return obj.next && obj.prev
         }
+      },
+      classes: {
+        type: Object,
+        default: null
       }
     },
     data: function data () {
@@ -5550,15 +5554,25 @@
       }
     },
     render: function render (h) {
+      var this$1 = this;
+
       var links = this.simple
         ? getSimpleLinks(this, h)
         : this.limit > 0
         ? getLimitedLinks(this, h)
         : getFullLinks(this, h)
 
-      return h('ul', {
+      var el = h('ul', {
         class: ['paginate-links', this.for]
       }, links)
+
+      if (this.classes) {
+        vue_common.nextTick(function () {
+          addAdditionalClasses(el.elm, this$1.classes)
+        })
+      }
+
+      return el
     }
   }
 
@@ -5669,6 +5683,18 @@
     return link
   }
 
+  function addAdditionalClasses (linksContainer, classes) {
+    Object.keys(classes).forEach(function (selector) {
+      if (selector === 'ul') {
+        linksContainer.classList.add(classes['ul'])
+      }
+      linksContainer.querySelectorAll(selector).forEach(function (node) {
+        console.log(node)
+        node.classList.add(classes[selector])
+      })
+    })
+  }
+
   function paginateDataGenerator (listNames) {
     if ( listNames === void 0 ) listNames = [];
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-paginate",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "A simple vue.js plugin to paginate data",
   "main": "dist/vue-paginate.js",
   "scripts": {

src/components/PaginateLinks.js

@@ -20,6 +20,10 @@ export default {
       validator (obj) {
         return obj.next && obj.prev
       }
+    },
+    classes: {
+      type: Object,
+      default: null
     }
   },
   data () {
@@ -82,9 +86,17 @@ export default {
       ? getLimitedLinks(this, h)
       : getFullLinks(this, h)
 
-    return h('ul', {
+    const el = h('ul', {
       class: ['paginate-links', this.for]
     }, links)
+
+    if (this.classes) {
+      Vue.nextTick(() => {
+        addAdditionalClasses(el.elm, this.classes)
+      })
+    }
+
+    return el
   }
 }
 
@@ -194,3 +206,15 @@ function getTargetPageForLink (link, limit, currentPage) {
   // which is number
   return link
 }
+
+function addAdditionalClasses (linksContainer, classes) {
+  Object.keys(classes).forEach(selector => {
+    if (selector === 'ul') {
+      linksContainer.classList.add(classes['ul'])
+    }
+    linksContainer.querySelectorAll(selector).forEach(node => {
+      console.log(node)
+      node.classList.add(classes[selector])
+    })
+  })
+}