Refactored DataView

src/components/dataview/DataView.vue

@@ -3,8 +3,8 @@
 		<div class="p-dataview-header" v-if="$scopedSlots.header">
 			<slot name="header"></slot>
 		</div>
-		<Paginator v-if="paginatorTop" :rows.sync="rows" :first.sync="firstRecord" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
-					:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-top': paginatorTop}">
+		<Paginator v-if="paginatorTop" :rows="rows" :first="first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
+					:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-top': paginatorTop}" @page="onPage($event)">
 			<template #left v-if="$scopedSlots.paginatorLeft">
 				<slot name="paginatorLeft"></slot>
 			</template>
@@ -14,15 +14,15 @@
 		</Paginator>
 		<div class="p-dataview-content">
 			<div class="p-grid">
-				<template v-for="(data,index) of (templateItems)">
-					<slot v-if="$scopedSlots.listItem && layout === 'list'" name="listItem" :data="data" :index="index"></slot>
-					<slot v-if="$scopedSlots.gridItem && layout === 'grid'" name="gridItem" :data="data" :index="index"></slot>
+				<template v-for="(item,index) of items">
+					<slot v-if="$scopedSlots.listItem && layout === 'list'" name="listItem" :data="item" :index="index"></slot>
+					<slot v-if="$scopedSlots.gridItem && layout === 'grid'" name="gridItem" :data="item" :index="index"></slot>
 				</template>
 				<div v-if="isEmpty" class="p-col-12">{{emptyMessage}}</div>
 			</div>
 		</div>
-		<Paginator v-if="paginatorBottom" :rows.sync="rows" :first.sync="firstRecord" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
-					:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-bottom': paginatorBottom}">
+		<Paginator v-if="paginatorBottom" :rows="rows" :first="first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
+					:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-bottom': paginatorBottom}" @page="onPage($event)">
 			<template #left v-if="$scopedSlots.paginatorLeft">
 				<slot name="paginatorLeft"></slot>
 			</template>
@@ -49,7 +49,7 @@
 			},
 			rows: {
 				type: Number,
-				default: null
+				default: 0
 			},
 			first: {
 				type: Number,
@@ -57,7 +57,7 @@
 			},
 			totalRecords: {
 				type: Number,
-				default: null
+				default: 0
 			},
 			paginator: {
 				type: Boolean,
@@ -73,7 +73,7 @@
 			},
 			paginatorTemplate: {
 				type: String,
-				default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'
+				default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
 			},
 			pageLinkSize: {
 				type: Number,
@@ -98,29 +98,31 @@
 			sortOrder: {
 				type: Number,
 				default: null
-			},
-			lazy: {
-				type: Boolean,
-				default: false
 			}
-		},
-		data() {
-			return {
-				firstRecord: this.first ? this.first : 0
-			}
-		},
+        },
+        data() {
+            return {
+                d_first: this.first,
+                d_rows: this.rows
+            }
+        },
+        watch: {
+            first(newValue) {
+                this.d_first = newValue;
+            },
+            rows(newValue) {
+                this.d_rows = newValue;
+            }
+        },
 		methods: {
-			processData() {
-				let data = this.value;
+            onPage(event) {
+                this.d_first = event.first;
+                this.d_rows = event.rows;
 
-				if (data && data.length) {
-					if (this.sortField) {
-						data = this.sort();
-					}
-				}
-
-				return data;
-			},
+                this.$emit('update:first', this.d_first);
+                this.$emit('update:rows', this.d_rows);
+                this.$emit('page', event);
+            },
 			sort() {
 				if (this.value) {
 					const value = [...this.value];
@@ -153,11 +155,11 @@
 		},
 		computed: {
 			containerClass() {
-				return ['p-dataview p-component', {
-					'p-dataview-list': (this.layout === 'list'),
-					'p-dataview-grid': (this.layout === 'grid')
-				}
-				]
+                return ['p-dataview p-component', {
+                        'p-dataview-list': (this.layout === 'list'),
+                        'p-dataview-grid': (this.layout === 'grid')
+                    }
+                ]
 			},
 			getTotalRecords() {
 				if (this.totalRecords)
@@ -169,40 +171,36 @@
 				return (!this.value || this.value.length === 0);
 			},
 			paginatorTop() {
-				if(this.paginatorPosition && (this.paginatorPosition !== 'bottom' || this.paginatorPosition === 'both')) {
+				if (this.paginatorPosition && (this.paginatorPosition !== 'bottom' || this.paginatorPosition === 'both')) {
 					return true
 				}
 				else
 					return null;
 			},
 			paginatorBottom() {
-				if(this.paginatorPosition && (this.paginatorPosition !== 'top' || this.paginatorPosition === 'both')) {
+				if (this.paginatorPosition && (this.paginatorPosition !== 'top' || this.paginatorPosition === 'both')) {
 					return true
 				}
 				else
 					return null;
-			},
-			templateItems (){
-				let value = this.processData();
+            },
+            items() {
+                if (this.value && this.value.length) {
+                    let data = this.value;
 
-				if (value && value.length) {
-					if (this.paginator) {
-						const rows = this.rows;
-						const first = this.lazy ? 0 : this.firstRecord;
-						const last = rows + first;
-						let items = [];
-
-						for (let i = first; i < last; i++) {
-							items.push(value[i]);
-						}
-						return items;
-					}
-					else {
-						return value;
-					}
-				}
-				else return null;
-			}
+                    if (data && data.length && this.sortField) {
+                        data = this.sort();
+                    }
+                
+                    if (this.paginator)
+                        return data.slice(this.d_first, this.d_first + this.d_rows);
+                    else
+                        return data;
+                }
+                else {
+                    return null;
+                }
+            }
 		}
 	}
 </script>

src/components/dataview/DataViewLayoutOptions.vue

@@ -1,40 +1,38 @@
 <template>
 	<div class="p-dataview-layout-options p-selectbutton p-buttonset">
-		<button :class="buttonListClass" @click="changeLayout($event,'list')">
+		<button :class="buttonListClass" @click="changeLayout('list')">
 			<i class="pi pi-bars p-button-icon-left"></i>
 			<span class="p-button-text p-clickable">p-btn</span>
 		</button>
-		<button :class="buttonGridClass" @click="changeLayout($event,'grid')">
+		<button :class="buttonGridClass" @click="changeLayout('grid')">
 			<i class="pi pi-th-large p-button-icon-left"></i>
 			<span class="p-button-text p-clickable">p-btn</span>
 		</button>
 	</div>
 </template>
+
 <script>
 	export default {
 		props: {
-			layout: {
-				type: String,
-				default: null
-			}
+			value: String
 		},
 		computed: {
 			buttonListClass(){
 				return [
 					'p-button p-button-icon-only',
-					{'p-highlight': this.layout === 'list'}
+					{'p-highlight': this.value === 'list'}
 				]
 			},
-			buttonGridClass(){
+			buttonGridClass() {
 				return [
 					'p-button p-button-icon-only',
-					{'p-highlight': this.layout === 'grid'}
+					{'p-highlight': this.value === 'grid'}
 				]
 			}
 		},
 		methods: {
-			changeLayout(event, layoutMode){
-				this.$emit('change', {originalEvent: event, value: layoutMode});
+			changeLayout(layout){
+				this.$emit('input', layout);
 			}
 		}
 	}

src/components/paginator/Paginator.vue

@@ -87,7 +87,7 @@ export default {
 
 				this.$emit('update:first', this.d_first);
                 this.$emit('update:rows', this.d_rows);
-                this.$emit('page-change', state);
+                this.$emit('page', state);
             }
         },
         changePageToFirst(event) {

src/views/dataview/DataViewDemo.vue

@@ -11,12 +11,12 @@
 			<h3 class="first">Default</h3>
 			<DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
 				<template #header>
-					<div class="p-grid">
+					<div class="p-grid p-nogutter">
 						<div class="p-col-6" style="text-align: left">
 							<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/>
 						</div>
 						<div class="p-col-6" style="text-align: right">
-							<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
+							<DataViewLayoutOptions v-model="layout" />
 						</div>
 					</div>
 				</template>
@@ -61,55 +61,52 @@
 </template>
 
 <script>
-	import CarService from '../../service/CarService';
-	import DataViewDoc from './DataViewDoc';
+import CarService from '../../service/CarService';
+import DataViewDoc from './DataViewDoc';
 
-	export default {
-		data() {
-			return {
-				cars: null,
-				layout: 'list',
-				sortKey: null,
-				sortOrder: null,
-				sortField: null,
-				sortOptions: [
-					{label: 'Newest First', value: '!year'},
-					{label: 'Oldest First', value: 'year'},
-					{label: 'Brand', value: 'brand'}
-				]
-			}
-		},
-		carService: null,
-		created() {
-			this.carService = new CarService();
-		},
-		mounted() {
-			this.carService.getCarsLarge().then(data => this.cars = data);
-		},
-		methods: {
-			changeMode(event) {
-				this.layout = event.value;
-			},
-			onSortChange(event){
-				const value = event.value.value;
-				const sortValue = event.value;
+export default {
+    data() {
+        return {
+            cars: null,
+            layout: 'list',
+            sortKey: null,
+            sortOrder: null,
+            sortField: null,
+            sortOptions: [
+                {label: 'Newest First', value: '!year'},
+                {label: 'Oldest First', value: 'year'},
+                {label: 'Brand', value: 'brand'}
+            ]
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsLarge().then(data => this.cars = data);
+    },
+    methods: {
+        onSortChange(event){
+            const value = event.value.value;
+            const sortValue = event.value;
 
-				if (value.indexOf('!') === 0) {
-					this.sortOrder = -1;
-					this.sortField = value.substring(1, value.length);
-					this.sortKey = sortValue;
-				}
-				else {
-					this.sortOrder = 1;
-					this.sortField = value;
-					this.sortKey = sortValue;
-				}
-			}
-		},
-		components: {
-			'DataViewDoc': DataViewDoc
-		}
-	}
+            if (value.indexOf('!') === 0) {
+                this.sortOrder = -1;
+                this.sortField = value.substring(1, value.length);
+                this.sortKey = sortValue;
+            }
+            else {
+                this.sortOrder = 1;
+                this.sortField = value;
+                this.sortKey = sortValue;
+            }
+        }
+    },
+    components: {
+        'DataViewDoc': DataViewDoc
+    }
+}
 </script>
 
 <style lang="scss">

src/views/dataview/DataViewDoc.vue

@@ -349,16 +349,16 @@ mounted() {
 			</div>
 		</div>
 
-		<div class="content-section implementation">
+        <div class="content-section implementation dataview-demo">
 			<h3 class="first">Default</h3>
 			<DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
 				<template #header>
-					<div class="p-grid">
+					<div class="p-grid p-nogutter">
 						<div class="p-col-6" style="text-align: left">
 							<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/>
 						</div>
 						<div class="p-col-6" style="text-align: right">
-							<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
+							<DataViewLayoutOptions v-model="layout" />
 						</div>
 					</div>
 				</template>
@@ -368,13 +368,17 @@ mounted() {
 							<div class="p-col-12 p-md-3">
 								<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
 							</div>
-							<div class="p-col-12 p-md-8 car-data">
-								<div>Vin: <b>{{slotProps.data.vin}}</b></div>
-								<div>Year: <b>{{slotProps.data.year}}</b></div>
-								<div>Brand: <b>{{slotProps.data.brand}}</b></div>
-								<div>Color: <b>{{slotProps.data.color}}</b></div>
-							</div>
+							<div class="p-col-12 p-md-8 car-details">
+								<div class="p-grid">
+									<div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
 
+									<div class="p-col-12">Year: <b>{{slotProps.data.year}}</b></div>
+
+									<div class="p-col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
+
+									<div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div>
+								</div>
+							</div>
 							<div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
 								<Button icon="pi pi-search"></Button>
 							</div>
@@ -399,51 +403,50 @@ mounted() {
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
+<script>
 import CarService from '../../service/CarService';
 
 export default {
-	data() {
-		return {
-			cars: null,
-			layout: 'list',
-			sortKey: null,
-			sortOrder: null,
-			sortField: null,
-			sortOptions: [
-				{label: 'Newest First', value: '!year'},
-				{label: 'Oldest First', value: 'year'},
-				{label: 'Brand', value: 'brand'}
-			]
-		}
-	},
-	carService: null,
-	created() {
-		this.carService = new CarService();
-	},
-	mounted() {
-		this.carService.getCarsLarge().then(data => this.cars = data);
-	},
-	methods: {
-		changeMode(event) {
-			this.layout = event.value;
-		},
-		onSortChange(event){
-			const value = event.value.value;
-			const sortValue = event.value;
+    data() {
+        return {
+            cars: null,
+            layout: 'list',
+            sortKey: null,
+            sortOrder: null,
+            sortField: null,
+            sortOptions: [
+                {label: 'Newest First', value: '!year'},
+                {label: 'Oldest First', value: 'year'},
+                {label: 'Brand', value: 'brand'}
+            ]
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsLarge().then(data => this.cars = data);
+    },
+    methods: {
+        onSortChange(event){
+            const value = event.value.value;
+            const sortValue = event.value;
 
-			if (value.indexOf('!') === 0) {
-				this.sortOrder = -1;
-				this.sortField = value.substring(1, value.length);
-				this.sortKey = sortValue;
-			}
-			else {
-				this.sortOrder = 1;
-				this.sortField = value;
-				this.sortKey = sortValue;
-			}
-		}
-	}
+            if (value.indexOf('!') === 0) {
+                this.sortOrder = -1;
+                this.sortField = value.substring(1, value.length);
+                this.sortKey = sortValue;
+            }
+            else {
+                this.sortOrder = 1;
+                this.sortField = value;
+                this.sortKey = sortValue;
+            }
+        }
+    }
 }
+</script>
 </CodeHighlight>
 
 <CodeHighlight lang="css">

src/views/paginator/PaginatorDoc.vue

@@ -77,9 +77,9 @@ import Paginator from 'primevue/paginator';
 </CodeHighlight>
 
                 <h3>Page Change Event</h3>
-                <p>Paginator provides only one event called <i>page-change</i> that passes all the information about the change event.</p>
+                <p>Paginator provides only one event called <i>page</i> that passes all the information about the change event.</p>
 <CodeHighlight>
-&lt;Paginator :rows="10" :totalRecords="totalItemsCount" @page-change="onPage($event)"&gt;&lt;/Paginator&gt;
+&lt;Paginator :rows="10" :totalRecords="totalItemsCount" @page="onPage($event)"&gt;&lt;/Paginator&gt;
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
@@ -161,7 +161,7 @@ onPage(event) {
                         </thead>
                         <tbody>
                             <tr>
-                                <td>page-change</td>
+                                <td>page</td>
                                 <td>event.page: New page number <br/>
                                     event.first: Index of first record <br/>
                                     event.rows: Number of rows to display in new page <br/>