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"
+		<Paginator v-if="paginatorTop" :rows="rows" :first="first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
-					:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-top': paginatorTop}">
+					: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)">
+				<template v-for="(item,index) of items">
-					<slot v-if="$scopedSlots.listItem && layout === 'list'" name="listItem" :data="data" :index="index"></slot>
+					<slot v-if="$scopedSlots.listItem && layout === 'list'" name="listItem" :data="item" :index="index"></slot>
-					<slot v-if="$scopedSlots.gridItem && layout === 'grid'" name="gridItem" :data="data" :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"
+		<Paginator v-if="paginatorBottom" :rows="rows" :first="first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
-					:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-bottom': paginatorBottom}">
+					: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,28 +98,30 @@
 			sortOrder: {
 				type: Number,
 				default: null
-			},
-			lazy: {
-				type: Boolean,
-				default: false
 			}
         },
         data() {
             return {
-				firstRecord: this.first ? this.first : 0
+                d_first: this.first,
+                d_rows: this.rows
+            }
+        },
+        watch: {
+            first(newValue) {
+                this.d_first = newValue;
+            },
+            rows(newValue) {
+                this.d_rows = newValue;
             }
         },
 		methods: {
-			processData() {
+            onPage(event) {
-				let data = this.value;
+                this.d_first = event.first;
+                this.d_rows = event.rows;
 
-				if (data && data.length) {
+                this.$emit('update:first', this.d_first);
-					if (this.sortField) {
+                this.$emit('update:rows', this.d_rows);
-						data = this.sort();
+                this.$emit('page', event);
-					}
-				}
-
-				return data;
             },
 			sort() {
 				if (this.value) {
@@ -182,27 +184,23 @@
 				else
 					return null;
             },
-			templateItems (){
+            items() {
-				let value = this.processData();
+                if (this.value && this.value.length) {
+                    let data = this.value;
 
-				if (value && value.length) {
+                    if (data && data.length && this.sortField) {
-					if (this.paginator) {
+                        data = this.sort();
-						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;
+                
+                    if (this.paginator)
+                        return data.slice(this.d_first, this.d_first + this.d_rows);
+                    else
+                        return data;
                 }
                 else {
-						return value;
+                    return null;
                 }
             }
-				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: {
+			value: String
-				type: String,
-				default: null
-			}
 		},
 		computed: {
 			buttonListClass(){
 				return [
 					'p-button p-button-icon-only',
-					{'p-highlight': this.layout === 'list'}
+					{'p-highlight': this.value === 'list'}
 				]
 			},
 			buttonGridClass() {
 				return [
 					'p-button p-button-icon-only',
-					{'p-highlight': this.layout === 'grid'}
+					{'p-highlight': this.value === 'grid'}
 				]
 			}
 		},
 		methods: {
-			changeLayout(event, layoutMode){
+			changeLayout(layout){
-				this.$emit('change', {originalEvent: event, value: layoutMode});
+				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>
@@ -87,9 +87,6 @@
         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;

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 class="p-col-12 p-md-8 car-details">
-								<div>Vin: <b>{{slotProps.data.vin}}</b></div>
+								<div class="p-grid">
-								<div>Year: <b>{{slotProps.data.year}}</b></div>
+									<div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
-								<div>Brand: <b>{{slotProps.data.brand}}</b></div>
-								<div>Color: <b>{{slotProps.data.color}}</b></div>
-							</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,6 +403,7 @@ mounted() {
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
+<script>
 import CarService from '../../service/CarService';
 
 export default {
@@ -424,9 +429,6 @@ export default {
         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;
@@ -444,6 +446,7 @@ export default {
         }
     }
 }
+</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/>