Pass state to the left-right slots
parent
33b4752560
commit
115b9c5720
File diff suppressed because it is too large
Load Diff
|
@ -13,7 +13,7 @@
|
||||||
"test:unit": "vue-cli-service test:unit"
|
"test:unit": "vue-cli-service test:unit"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"vue": "^2.5.17",
|
"vue": "^2.6.10",
|
||||||
"vue-router": "^3.0.1",
|
"vue-router": "^3.0.1",
|
||||||
"@vue/cli-plugin-babel": "^3.2.0",
|
"@vue/cli-plugin-babel": "^3.2.0",
|
||||||
"@vue/cli-plugin-eslint": "^3.2.0",
|
"@vue/cli-plugin-eslint": "^3.2.0",
|
||||||
|
|
|
@ -404,7 +404,7 @@ body {
|
||||||
&.introduction {
|
&.introduction {
|
||||||
background: url('./assets/images/component-intro-bg.jpg');
|
background: url('./assets/images/component-intro-bg.jpg');
|
||||||
border-bottom: 1px solid #dadada;
|
border-bottom: 1px solid #dadada;
|
||||||
color: #484848;
|
color: #ffffff;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
|
||||||
.feature-intro {
|
.feature-intro {
|
||||||
|
@ -413,7 +413,7 @@ body {
|
||||||
margin: 0 0 20px 0;
|
margin: 0 0 20px 0;
|
||||||
display: block;
|
display: block;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
color: #222222;
|
color: #ffffff;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -421,7 +421,7 @@ body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
line-height: 2em;
|
line-height: 2em;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #222222;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
|
@ -1,5 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="p-paginator p-component p-unselectable-text">
|
<div class="p-paginator p-component p-unselectable-text">
|
||||||
|
<div class="p-paginator-left-content" v-if="$scopedSlots.left">
|
||||||
|
<slot name="left" :state="currentState"></slot>
|
||||||
|
</div>
|
||||||
<template v-for="(item,i) of templateItems">
|
<template v-for="(item,i) of templateItems">
|
||||||
<FirstPageLink v-if="item === 'FirstPageLink'" :key="i" @click="changePageToFirst($event)" :disabled="isFirstPage" />
|
<FirstPageLink v-if="item === 'FirstPageLink'" :key="i" @click="changePageToFirst($event)" :disabled="isFirstPage" />
|
||||||
<PrevPageLink v-else-if="item === 'PrevPageLink'" :key="i" @click="changePageToPrev($event)" :disabled="isFirstPage" />
|
<PrevPageLink v-else-if="item === 'PrevPageLink'" :key="i" @click="changePageToPrev($event)" :disabled="isFirstPage" />
|
||||||
|
@ -9,6 +12,9 @@
|
||||||
<CurrentPageReport v-else-if="item === 'CurrentPageReport'" :key="i" :template="currentPageReportTemplate" :page="page" :pageCount="pageCount" />
|
<CurrentPageReport v-else-if="item === 'CurrentPageReport'" :key="i" :template="currentPageReportTemplate" :page="page" :pageCount="pageCount" />
|
||||||
<RowsPerPageDropdown v-else-if="item === 'RowsPerPageDropdown'" :key="i" :value="rows" :options="rowsPerPageOptions" @rowsChange="rowsChange($event)" />
|
<RowsPerPageDropdown v-else-if="item === 'RowsPerPageDropdown'" :key="i" :value="rows" :options="rowsPerPageOptions" @rowsChange="rowsChange($event)" />
|
||||||
</template>
|
</template>
|
||||||
|
<div class="p-paginator-right-content" v-if="$scopedSlots.right">
|
||||||
|
<slot name="right" :state="currentState"></slot>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -69,14 +75,12 @@ export default {
|
||||||
page() {
|
page() {
|
||||||
return Math.floor(this.first / this.rows);
|
return Math.floor(this.first / this.rows);
|
||||||
},
|
},
|
||||||
|
|
||||||
pageCount() {
|
pageCount() {
|
||||||
return Math.ceil(this.totalRecords / this.rows) || 1;
|
return Math.ceil(this.totalRecords / this.rows) || 1;
|
||||||
},
|
},
|
||||||
isFirstPage() {
|
isFirstPage() {
|
||||||
return this.page === 0;
|
return this.page === 0;
|
||||||
},
|
},
|
||||||
|
|
||||||
isLastPage() {
|
isLastPage() {
|
||||||
return this.page === this.pageCount - 1;
|
return this.page === this.pageCount - 1;
|
||||||
},
|
},
|
||||||
|
@ -94,7 +98,6 @@ export default {
|
||||||
|
|
||||||
return [start, end];
|
return [start, end];
|
||||||
},
|
},
|
||||||
|
|
||||||
updatePageLinks() {
|
updatePageLinks() {
|
||||||
var pageLinks = [];
|
var pageLinks = [];
|
||||||
var boundaries = this.calculatePageLinkBoundaries;
|
var boundaries = this.calculatePageLinkBoundaries;
|
||||||
|
@ -106,6 +109,13 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
return pageLinks;
|
return pageLinks;
|
||||||
|
},
|
||||||
|
currentState() {
|
||||||
|
return {
|
||||||
|
page: this.page,
|
||||||
|
first: this.first,
|
||||||
|
rows: this.rows
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -123,31 +133,25 @@ export default {
|
||||||
this.$emit('change', newPageState);
|
this.$emit('change', newPageState);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
changePageToFirst(event) {
|
changePageToFirst(event) {
|
||||||
this.changePage(0, this.rows);
|
this.changePage(0, this.rows);
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
},
|
},
|
||||||
|
|
||||||
changePageToPrev(event) {
|
changePageToPrev(event) {
|
||||||
this.changePage(this.first - this.rows, this.rows);
|
this.changePage(this.first - this.rows, this.rows);
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
},
|
},
|
||||||
|
|
||||||
pageLinkClick(event) {
|
pageLinkClick(event) {
|
||||||
this.changePage((event.value - 1) * this.rows, this.rows);
|
this.changePage((event.value - 1) * this.rows, this.rows);
|
||||||
},
|
},
|
||||||
|
|
||||||
changePageToNext(event) {
|
changePageToNext(event) {
|
||||||
this.changePage(this.first + this.rows, this.rows);
|
this.changePage(this.first + this.rows, this.rows);
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
},
|
},
|
||||||
|
|
||||||
changePageToLast(event) {
|
changePageToLast(event) {
|
||||||
this.changePage((this.pageCount - 1) * this.rows, this.rows);
|
this.changePage((this.pageCount - 1) * this.rows, this.rows);
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
},
|
},
|
||||||
|
|
||||||
rowsChange(event) {
|
rowsChange(event) {
|
||||||
this.changePage(0, event.value.code);
|
this.changePage(0, event.value.code);
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,6 +16,12 @@
|
||||||
|
|
||||||
<h3>Advanced with Templating, Filtering and Clear Icon</h3>
|
<h3>Advanced with Templating, Filtering and Clear Icon</h3>
|
||||||
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
|
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
|
||||||
|
<template v-slot:option={props}>
|
||||||
|
<div class="p-clearfix p-dropdown-car-option">
|
||||||
|
<img :alt="props.option.brand" :src="'/demo/images/car/' + props.option.brand + '.png'" />
|
||||||
|
<span>{{props.option.brand}}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
<template slot="option" slot-scope="{option}">
|
<template slot="option" slot-scope="{option}">
|
||||||
<div class="p-clearfix p-dropdown-car-option">
|
<div class="p-clearfix p-dropdown-car-option">
|
||||||
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" />
|
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" />
|
||||||
|
|
|
@ -12,7 +12,14 @@
|
||||||
<Paginator :first="first" :rows="rows" :totalRecords="totalRecords" @change="onPageChange($event)" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
<Paginator :first="first" :rows="rows" :totalRecords="totalRecords" @change="onPageChange($event)" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
||||||
|
|
||||||
<h3>Custom Template</h3>
|
<h3>Custom Template</h3>
|
||||||
<Paginator :first="first2" :rows="rows2" :totalRecords="totalRecords2" @change="onPageChangeCustom($event)" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"></Paginator>
|
<Paginator :first="first2" :rows="rows2" :totalRecords="totalRecords2" @change="onPageChangeCustom($event)" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
|
||||||
|
<template #left>
|
||||||
|
<Button type="button" icon="pi pi-refresh" />
|
||||||
|
</template>
|
||||||
|
<template #right>
|
||||||
|
<Button type="button" icon="pi pi-search" />
|
||||||
|
</template>
|
||||||
|
</Paginator>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<PaginatorDoc />
|
<PaginatorDoc />
|
||||||
|
@ -48,3 +55,9 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.p-button.p-button-icon-only {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in New Issue