Pass state to the left-right slots

pull/12/head
cagataycivici 2019-03-20 16:23:48 +03:00
parent 33b4752560
commit 115b9c5720
6 changed files with 39 additions and 14794 deletions

14778
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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",

View File

@ -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 {

View File

@ -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);
} }

View File

@ -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'" />

View File

@ -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>