support pagination inside content slots (#48) (#80)

TahaSh · Mar 29, 2018 · 64ed55c · 64ed55c
1 parent 7e775a0
commit 64ed55c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 20 deletions.
diff --git a/src/components/Paginate.js b/src/components/Paginate.js
@@ -21,6 +21,10 @@ export default {
     tag: {
       type: String,
       default: 'ul'
+    },
+    container: {
+      type: Object,
+      default: null
     }
   },
   data () {
@@ -29,14 +33,17 @@ export default {
     }
   },
   computed: {
+    parent () {
+      return this.container ? this.container : this.$parent
+    },
     currentPage: {
       get () {
-        if (this.$parent.paginate[this.name]) {
-          return this.$parent.paginate[this.name].page
+        if (this.parent.paginate[this.name]) {
+          return this.parent.paginate[this.name].page
         }
       },
       set (page) {
-        this.$parent.paginate[this.name].page = page
+        this.parent.paginate[this.name].page = page
       }
     },
     pageItemsCount () {
@@ -52,10 +59,10 @@ export default {
   },
   mounted () {
     if (this.per <= 0) {
-      warn(`<paginate name="${this.name}"> 'per' prop can't be 0 or less.`, this.$parent)
+      warn(`<paginate name="${this.name}"> 'per' prop can't be 0 or less.`, this.parent)
     }
-    if (!this.$parent.paginate[this.name]) {
-      warn(`'${this.name}' is not registered in 'paginate' array.`, this.$parent)
+    if (!this.parent.paginate[this.name]) {
+      warn(`'${this.name}' is not registered in 'paginate' array.`, this.parent)
       return
     }
     this.paginateList()
@@ -79,12 +86,12 @@ export default {
     paginateList () {
       const index = this.currentPage * this.per
       const paginatedList = this.list.slice(index, index + this.per)
-      this.$parent.paginate[this.name].list = paginatedList
+      this.parent.paginate[this.name].list = paginatedList
     },
     goToPage (page) {
       const lastPage = Math.ceil(this.list.length / this.per)
       if (page > lastPage) {
-        warn(`You cannot go to page ${page}. The last page is ${lastPage}.`, this.$parent)
+        warn(`You cannot go to page ${page}. The last page is ${lastPage}.`, this.parent)
         return
       }
       this.currentPage = page - 1

diff --git a/src/components/PaginateLinks.js b/src/components/PaginateLinks.js
@@ -45,6 +45,10 @@ export default {
     async: {
       type: Boolean,
       default: false
+    },
+    container: {
+      type: Object,
+      default: null
     }
   },
   data () {
@@ -55,39 +59,45 @@ export default {
     }
   },
   computed: {
+    parent () {
+      return this.container ? this.container.el : this.$parent
+    },
+    state () {
+      return this.container ? this.container.state : this.$parent.paginate[this.for]
+    },
     currentPage: {
       get () {
-        if (this.$parent.paginate[this.for]) {
-          return this.$parent.paginate[this.for].page
+        if (this.state) {
+          return this.state.page
         }
       },
       set (page) {
-        this.$parent.paginate[this.for].page = page
+        this.state.page = page
       }
     }
   },
   mounted () {
     if (this.simple && this.limit) {
-      warn(`<paginate-links for="${this.for}"> 'simple' and 'limit' props can't be used at the same time. In this case, 'simple' will take precedence, and 'limit' will be ignored.`, this.$parent, 'warn')
+      warn(`<paginate-links for="${this.for}"> 'simple' and 'limit' props can't be used at the same time. In this case, 'simple' will take precedence, and 'limit' will be ignored.`, this.parent, 'warn')
     }
     if (this.simple && !this.simple.next) {
-      warn(`<paginate-links for="${this.for}"> 'simple' prop doesn't contain 'next' value.`, this.$parent)
+      warn(`<paginate-links for="${this.for}"> 'simple' prop doesn't contain 'next' value.`, this.parent)
     }
     if (this.simple && !this.simple.prev) {
-      warn(`<paginate-links for="${this.for}"> 'simple' prop doesn't contain 'prev' value.`, this.$parent)
+      warn(`<paginate-links for="${this.for}"> 'simple' prop doesn't contain 'prev' value.`, this.parent)
     }
     if (this.stepLinks && !this.stepLinks.next) {
-      warn(`<paginate-links for="${this.for}"> 'step-links' prop doesn't contain 'next' value.`, this.$parent)
+      warn(`<paginate-links for="${this.for}"> 'step-links' prop doesn't contain 'next' value.`, this.parent)
     }
     if (this.stepLinks && !this.stepLinks.prev) {
-      warn(`<paginate-links for="${this.for}"> 'step-links' prop doesn't contain 'prev' value.`, this.$parent)
+      warn(`<paginate-links for="${this.for}"> 'step-links' prop doesn't contain 'prev' value.`, this.parent)
     }
     this.$nextTick(() => {
       this.updateListOfPages()
     })
   },
   watch: {
-    '$parent.paginate': {
+    'state': {
       handler () {
         this.updateListOfPages()
       },
@@ -99,11 +109,11 @@ export default {
   },
   methods: {
     updateListOfPages () {
-      this.target = getTargetPaginateComponent(this.$parent.$children, this.for)
+      this.target = getTargetPaginateComponent(this.parent.$children, this.for)
       if (!this.target) {
         if (this.async) return
-        warn(`<paginate-links for="${this.for}"> can't be used without its companion <paginate name="${this.for}">`, this.$parent)
-        warn(`To fix that issue you may need to use :async="true" on <paginate-links> component to allow for asyncronous rendering`, this.$parent, 'warn')
+        warn(`<paginate-links for="${this.for}"> can't be used without its companion <paginate name="${this.for}">`, this.parent)
+        warn(`To fix that issue you may need to use :async="true" on <paginate-links> component to allow for asyncronous rendering`, this.parent, 'warn')
         return
       }
       this.numberOfPages = Math.ceil(this.target.list.length / this.target.per)