feat: Updates to QTable; bump version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-framework",
-  "version": "0.15.0-alpha.5",
+  "version": "0.15.0-alpha.6",
   "description": "Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS",
   "files": [
     "dist",

src/components/table/QTable.js

@@ -43,7 +43,7 @@ export default {
     loader: Boolean,
     title: String,
     hideHeader: Boolean,
-    hidePagination: Boolean,
+    hideBottom: Boolean,
     dark: Boolean,
     separator: {
       type: String,

src/components/table/table-bottom.js

@@ -16,18 +16,21 @@ export default {
         ])
       }
 
-      if (this.hidePagination) {
+      if (this.hideBottom) {
         return
       }
 
+      const bottom = this.$scopedSlots.bottom
+
       return h('div', { staticClass: 'q-table-bottom row items-center' },
-        this.getPaginationRow(h)
+        bottom ? [ bottom(this.marginalsProps) ] : this.getPaginationRow(h)
       )
     },
     getPaginationRow (h) {
       const
-        { page, rowsPerPage } = this.computedPagination,
-        paginationLabel = this.paginationLabel || this.$q.i18n.table.pagination
+        { rowsPerPage } = this.computedPagination,
+        paginationLabel = this.paginationLabel || this.$q.i18n.table.pagination,
+        paginationSlot = this.$scopedSlots.pagination
 
       return [
         h('div', { staticClass: 'col' }, [
@@ -36,13 +39,12 @@ export default {
             : ''
         ]),
         h('div', { staticClass: 'flex items-center' }, [
-          h('span', { style: {marginRight: '32px'} }, [
+          h('span', { staticClass: 'q-mr-lg' }, [
             this.rowsPerPageLabel || this.$q.i18n.table.rowsPerPage
           ]),
           h(QSelect, {
-            staticClass: 'inline q-pb-none',
+            staticClass: 'inline q-pb-none q-my-none q-ml-none q-mr-lg',
             style: {
-              margin: '0 15px',
               minWidth: '50px'
             },
             props: {
@@ -61,41 +63,37 @@ export default {
               }
             }
           }),
-          h('span', { style: {margin: '0 32px'} }, [
-            rowsPerPage
-              ? paginationLabel(this.firstRowIndex + 1, Math.min(this.lastRowIndex, this.computedRowsNumber), this.computedRowsNumber)
-              : paginationLabel(1, this.computedRowsNumber, this.computedRowsNumber)
-          ]),
-          h(QBtn, {
-            props: {
-              color: this.color,
-              round: true,
-              icon: this.$q.icon.table.prevPage,
-              dense: true,
-              flat: true,
-              disable: page === 1
-            },
-            on: {
-              click: () => {
-                this.setPagination({ page: page - 1 })
-              }
-            }
-          }),
-          h(QBtn, {
-            props: {
-              color: this.color,
-              round: true,
-              icon: this.$q.icon.table.nextPage,
-              dense: true,
-              flat: true,
-              disable: this.lastRowIndex === 0 || page * rowsPerPage >= this.computedRowsNumber
-            },
-            on: {
-              click: () => {
-                this.setPagination({ page: page + 1 })
-              }
-            }
-          })
+          paginationSlot
+            ? paginationSlot(this.marginalsProps)
+            : [
+              h('span', { staticClass: 'q-mr-lg' }, [
+                rowsPerPage
+                  ? paginationLabel(this.firstRowIndex + 1, Math.min(this.lastRowIndex, this.computedRowsNumber), this.computedRowsNumber)
+                  : paginationLabel(1, this.computedRowsNumber, this.computedRowsNumber)
+              ]),
+              h(QBtn, {
+                props: {
+                  color: this.color,
+                  round: true,
+                  icon: this.$q.icon.table.prevPage,
+                  dense: true,
+                  flat: true,
+                  disable: this.isFirstPage
+                },
+                on: { click: this.prevPage }
+              }),
+              h(QBtn, {
+                props: {
+                  color: this.color,
+                  round: true,
+                  icon: this.$q.icon.table.nextPage,
+                  dense: true,
+                  flat: true,
+                  disable: this.isLastPage
+                },
+                on: { click: this.nextPage }
+              })
+            ]
         ])
       ]
     }

src/components/table/table-pagination.js

@@ -28,6 +28,21 @@ export default {
       const { page, rowsPerPage } = this.computedPagination
       return page * rowsPerPage
     },
+    isFirstPage () {
+      const { page } = this.computedPagination
+      return page <= 1
+    },
+    pagesNumber () {
+      const { rowsPerPage } = this.computedPagination
+      return Math.ceil(this.computedRowsNumber / rowsPerPage)
+    },
+    isLastPage () {
+      if (this.lastRowIndex === 0) {
+        return true
+      }
+      const { page } = this.computedPagination
+      return page >= this.pagesNumber
+    },
     computedRowsPerPageOptions () {
       return this.rowsPerPageOptions.map(count => ({
         label: count === 0 ? this.$q.i18n.table.allRows : '' + count,
@@ -52,6 +67,18 @@ export default {
       else {
         this.innerPagination = newPagination
       }
+    },
+    prevPage () {
+      const { page } = this.computedPagination
+      if (page > 1) {
+        this.setPagination({page: page - 1})
+      }
+    },
+    nextPage () {
+      const { page, rowsPerPage } = this.computedPagination
+      if (this.lastRowIndex > 0 && page * rowsPerPage < this.computedRowsNumber) {
+        this.setPagination({page: page + 1})
+      }
     }
   },
   created () {

src/components/table/table-top.js

@@ -1,4 +1,19 @@
 export default {
+  computed: {
+    marginalsProps () {
+      return {
+        pagination: this.computedPagination,
+        pagesNumber: this.pagesNumber,
+        isFirstPage: this.isFirstPage,
+        isLastPage: this.isLastPage,
+        prevPage: this.prevPage,
+        nextPage: this.nextPage,
+
+        inFullscreen: this.inFullscreen,
+        toggleFullscreen: this.toggleFullscreen
+      }
+    }
+  },
   methods: {
     getTop (h) {
       const
@@ -8,23 +23,18 @@ export default {
         topSelection = this.$scopedSlots['top-selection'],
         hasSelection = this.selection && topSelection && this.rowsSelectedNumber > 0,
         staticClass = 'q-table-top relative-position row no-wrap items-center',
-        child = [],
-        props = {
-          hasSelection,
-          inFullscreen: this.inFullscreen,
-          toggleFullscreen: this.toggleFullscreen
-        }
+        child = []
 
       if (top) {
-        return h('div', { staticClass }, [ top(props) ])
+        return h('div', { staticClass }, [ top(this.marginalsProps) ])
       }
 
       if (hasSelection) {
-        child.push(topSelection(props))
+        child.push(topSelection(this.marginalsProps))
       }
       else {
         if (topLeft) {
-          child.push(topLeft(props))
+          child.push(topLeft(this.marginalsProps))
         }
         else if (this.title) {
           child.push(h('div', { staticClass: 'q-table-title' }, this.title))
@@ -33,7 +43,7 @@ export default {
 
       if (topRight) {
         child.push(h('div', { staticClass: 'q-table-separator col' }))
-        child.push(topRight(props))
+        child.push(topRight(this.marginalsProps))
       }
 
       if (child.length === 0) {

src/components/table/table.ios.styl

@@ -42,7 +42,7 @@
   max-width 100%
 
 .q-table-bottom
-  min-height 44px
+  min-height 48px
   padding 0 14px 0 24px
   font-size 12px
 

src/components/table/table.mat.styl

@@ -42,7 +42,7 @@
   max-width 100%
 
 .q-table-bottom
-  min-height 44px
+  min-height 48px
   padding 0 14px 0 24px
   font-size 12px