Pass state to the left-right slots
cagataycivici
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"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vue": "^2.5.17",
|
||||
"vue": "^2.6.10",
|
||||
"vue-router": "^3.0.1",
|
||||
"@vue/cli-plugin-babel": "^3.2.0",
|
||||
"@vue/cli-plugin-eslint": "^3.2.0",
|
||||
|
|
|
|||
|
|
@ -404,7 +404,7 @@ body {
|
|||
&.introduction {
|
||||
background: url('./assets/images/component-intro-bg.jpg');
|
||||
border-bottom: 1px solid #dadada;
|
||||
color: #484848;
|
||||
color: #ffffff;
|
||||
background-size: cover;
|
||||
|
||||
.feature-intro {
|
||||
|
|
@ -413,7 +413,7 @@ body {
|
|||
margin: 0 0 20px 0;
|
||||
display: block;
|
||||
text-align: left;
|
||||
color: #222222;
|
||||
color: #ffffff;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
|
@ -421,7 +421,7 @@ body {
|
|||
margin: 0;
|
||||
line-height: 2em;
|
||||
font-size: 16px;
|
||||
color: #222222;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<template>
|
||||
<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">
|
||||
<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" />
|
||||
|
|
@ -8,7 +11,10 @@
|
|||
<PageLinks v-else-if="item === 'PageLinks'" :key="i" :value="updatePageLinks" :page="page" @click="pageLinkClick($event)" />
|
||||
<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)" />
|
||||
</template>
|
||||
</template>
|
||||
<div class="p-paginator-right-content" v-if="$scopedSlots.right">
|
||||
<slot name="right" :state="currentState"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -69,14 +75,12 @@ export default {
|
|||
page() {
|
||||
return Math.floor(this.first / this.rows);
|
||||
},
|
||||
|
||||
pageCount() {
|
||||
return Math.ceil(this.totalRecords / this.rows) || 1;
|
||||
},
|
||||
isFirstPage() {
|
||||
return this.page === 0;
|
||||
},
|
||||
|
||||
isLastPage() {
|
||||
return this.page === this.pageCount - 1;
|
||||
},
|
||||
|
|
@ -94,7 +98,6 @@ export default {
|
|||
|
||||
return [start, end];
|
||||
},
|
||||
|
||||
updatePageLinks() {
|
||||
var pageLinks = [];
|
||||
var boundaries = this.calculatePageLinkBoundaries;
|
||||
|
|
@ -106,6 +109,13 @@ export default {
|
|||
}
|
||||
|
||||
return pageLinks;
|
||||
},
|
||||
currentState() {
|
||||
return {
|
||||
page: this.page,
|
||||
first: this.first,
|
||||
rows: this.rows
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -123,31 +133,25 @@ export default {
|
|||
this.$emit('change', newPageState);
|
||||
}
|
||||
},
|
||||
|
||||
changePageToFirst(event) {
|
||||
this.changePage(0, this.rows);
|
||||
event.preventDefault();
|
||||
},
|
||||
|
||||
changePageToPrev(event) {
|
||||
this.changePage(this.first - this.rows, this.rows);
|
||||
event.preventDefault();
|
||||
},
|
||||
|
||||
pageLinkClick(event) {
|
||||
this.changePage((event.value - 1) * this.rows, this.rows);
|
||||
},
|
||||
|
||||
changePageToNext(event) {
|
||||
this.changePage(this.first + this.rows, this.rows);
|
||||
event.preventDefault();
|
||||
},
|
||||
|
||||
changePageToLast(event) {
|
||||
this.changePage((this.pageCount - 1) * this.rows, this.rows);
|
||||
event.preventDefault();
|
||||
},
|
||||
|
||||
rowsChange(event) {
|
||||
this.changePage(0, event.value.code);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,12 @@
|
|||
|
||||
<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">
|
||||
<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}">
|
||||
<div class="p-clearfix p-dropdown-car-option">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<PaginatorDoc />
|
||||
|
|
@ -47,4 +54,10 @@ export default {
|
|||
'PaginatorDoc': PaginatorDoc
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.p-button.p-button-icon-only {
|
||||
border-radius: 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue