Commit b4b6ed95 authored by Anton Koch's avatar Anton Koch
Browse files

Merge branch '620-table-pagination-responsiveness' into 'master'

Resolve "MbTable: Container Responsive"

See merge request !166
parents 7bc57029 94ae16ab
......@@ -32,6 +32,7 @@ div
template(v-slot:pagination="scope")
table-pagination-module(
:scope="scope"
:resize-observer="resizeObserver"
@input="onRowsPerPage"
)
......
<template lang="pug">
.table-pagination-module.row.items-center.q-mt-lg
.table-pagination-module.row.items-center.justify-end.q-mt-lg
mb-select.q-mr-md(
mb-select(
:value="model.rowsPerPage"
:options="[5, 10, 20, 50]"
:class="[smallSize ? 'full-width q-mb-md' : 'q-mr-lg']"
@input="onRowsPerPage"
)
mb-icon-btn.q-mr-xs(
mb-icon-btn.q-mr-sm(
v-if="scope.pagesNumber > 2"
:icon-name="'first_page'"
:disable="scope.isFirstPage"
:outline="!scope.isFirstPage"
@click.native="scope.firstPage"
size="xs"
size="sm"
)
mb-icon-btn.q-mr-xs(
mb-icon-btn.q-mr-sm(
:icon-name="'chevron_left'"
:disable="scope.isFirstPage"
:outline="!scope.isFirstPage"
@click.native="scope.prevPage"
size="xs"
size="sm"
)
.q-mx-xs
.q-mx-md
| {{ scope.pagination.page }} / {{ scope.pagesNumber }}
mb-icon-btn.q-mr-xs(
mb-icon-btn.q-mr-sm(
:icon-name="'chevron_right'"
:disable="scope.isLastPage"
:outline="!scope.isLastPage"
@click.native="scope.nextPage"
size="xs"
size="sm"
)
mb-icon-btn(
......@@ -42,7 +43,7 @@
:disable="scope.isLastPage"
:outline="!scope.isLastPage"
@click.native="scope.lastPage"
size="xs"
size="sm"
)
</template>
......@@ -50,7 +51,7 @@
<script>
export default {
name: 'TablePaginationModule',
props: ['scope'],
props: ['scope', 'resizeObserver'],
data () {
return {
model: {
......@@ -58,6 +59,11 @@
}
}
},
computed: {
smallSize () {
return this.resizeObserver.width < 600
}
},
methods: {
onRowsPerPage (val) {
this.$emit('input', val)
......
<template lang="pug">
.mb-table-list
q-resize-observer(@resize="handleResize")
mb-input-text.q-mb-md(
debounce="300"
......@@ -26,6 +27,7 @@
table-pagination-module(
v-if="items.length > pagination.rowsPerPage"
:scope="scope"
:resize-observer="resizeObserver"
@input="onRowsPerPage"
)
......@@ -63,6 +65,7 @@ export default {
props: ['items'],
data () {
return {
resizeObserver: {},
selectedItem: undefined,
columns: [
{ name: 'title', field: 'title' }
......@@ -83,6 +86,9 @@ export default {
}
},
methods: {
handleResize (obj) {
this.resizeObserver = obj
},
selectItem (item) {
// Toggle selected item if clicked the same item twice
this.selectedItem = this.selectedItem && item.id === this.selectedItem.id
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment