Pass state to the left-right slots

package.json

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

src/assets/styles/app.scss

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

src/components/paginator/Paginator.vue

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

src/views/dropdown/DropdownDemo.vue

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

src/views/paginator/PaginatorDemo.vue

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