From c13a844d105ed668d6464d2e27ed88f95cd2fa50 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 20 Mar 2019 15:31:32 +0300
Subject: [PATCH] Cosmetics on Paginator Docs

---
 src/components/paginator/Paginator.vue | 252 +++++++++--------
 src/views/paginator/PaginatorDemo.vue  |  57 ++--
 src/views/paginator/PaginatorDoc.vue   | 356 +++++++++++++------------
 3 files changed, 331 insertions(+), 334 deletions(-)

diff --git a/src/components/paginator/Paginator.vue b/src/components/paginator/Paginator.vue
index 297a4c4a1..0d59d3edb 100644
--- a/src/components/paginator/Paginator.vue
+++ b/src/components/paginator/Paginator.vue
@@ -13,146 +13,144 @@
 </template>
 
 <script>
-	import CurrrentPageReport from './CurrentPageReport';
-	import FirstPageLink from './FirstPageLink';
-	import LastPageLink from './LastPageLink';
-	import NextPageLink from './NextPageLink';
-	import PageLinks from './PageLinks';
-	import PrevPageLink from './PrevPageLink';
-    import RowsPerPageDropdown from './RowsPerPageDropdown';
-    
-	export default {
-		props: {
-			totalRecords: {
-				type: Number,
-				default: 0
-			},
-			rows: {
-				type: Number,
-				default: 0
-			},
-			first: {
-				type: Number,
-				default: 0
-			},
-			pageLinkSize: {
-				type: Number,
-				default: 5
-			},
-			rowsPerPageOptions: Array,
-			template: {
-				type: String,
-				default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
-			},
-			leftContent: null,
-			rightContent: null,
-			currentPageReportTemplate: {
-				type: null,
-				default: '({currentPage} of {totalPages})'
-			}
-		},
-		components: {
-			'CurrentPageReport': CurrrentPageReport,
-			'FirstPageLink': FirstPageLink,
-			'LastPageLink': LastPageLink,
-			'NextPageLink': NextPageLink,
-			'PageLinks': PageLinks,
-			'PrevPageLink': PrevPageLink,
-			'RowsPerPageDropdown': RowsPerPageDropdown,
-		},
-		computed: {
-			templateItems() {
-				var keys = [];
-				this.template.split(' ').map((value) => {
-					keys.push(value.trim());
-				})
-				return keys;
-			},
-			page() {
-				return Math.floor(this.first / this.rows);
-			},
+import CurrrentPageReport from './CurrentPageReport';
+import FirstPageLink from './FirstPageLink';
+import LastPageLink from './LastPageLink';
+import NextPageLink from './NextPageLink';
+import PageLinks from './PageLinks';
+import PrevPageLink from './PrevPageLink';
+import RowsPerPageDropdown from './RowsPerPageDropdown';
 
-			pageCount() {
-				return Math.ceil(this.totalRecords / this.rows) || 1;
-			},
-			isFirstPage() {
-				return this.page === 0;
-			},
+export default {
+    props: {
+        totalRecords: {
+            type: Number,
+            default: 0
+        },
+        rows: {
+            type: Number,
+            default: 0
+        },
+        first: {
+            type: Number,
+            default: 0
+        },
+        pageLinkSize: {
+            type: Number,
+            default: 5
+        },
+        rowsPerPageOptions: Array,
+        template: {
+            type: String,
+            default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
+        },
+        currentPageReportTemplate: {
+            type: null,
+            default: '({currentPage} of {totalPages})'
+        }
+    },
+    components: {
+        'CurrentPageReport': CurrrentPageReport,
+        'FirstPageLink': FirstPageLink,
+        'LastPageLink': LastPageLink,
+        'NextPageLink': NextPageLink,
+        'PageLinks': PageLinks,
+        'PrevPageLink': PrevPageLink,
+        'RowsPerPageDropdown': RowsPerPageDropdown,
+    },
+    computed: {
+        templateItems() {
+            var keys = [];
+            this.template.split(' ').map((value) => {
+                keys.push(value.trim());
+            })
+            return keys;
+        },
+        page() {
+            return Math.floor(this.first / this.rows);
+        },
 
-			isLastPage() {
-				return this.page === this.pageCount - 1;
-			},
-			calculatePageLinkBoundaries() {
-				var numberOfPages = this.pageCount;
-				var visiblePages = Math.min(this.pageLinkSize, numberOfPages);
+        pageCount() {
+            return Math.ceil(this.totalRecords / this.rows) || 1;
+        },
+        isFirstPage() {
+            return this.page === 0;
+        },
 
-				//calculate range, keep current in middle if necessary
-				var start = Math.max(0, Math.ceil(this.page - ((visiblePages) / 2)));
-				var end = Math.min(numberOfPages - 1, start + visiblePages - 1);
+        isLastPage() {
+            return this.page === this.pageCount - 1;
+        },
+        calculatePageLinkBoundaries() {
+            var numberOfPages = this.pageCount;
+            var visiblePages = Math.min(this.pageLinkSize, numberOfPages);
 
-				//check when approaching to last page
-				var delta = this.pageLinkSize - (end - start + 1);
-				start = Math.max(0, start - delta);
+            //calculate range, keep current in middle if necessary
+            var start = Math.max(0, Math.ceil(this.page - ((visiblePages) / 2)));
+            var end = Math.min(numberOfPages - 1, start + visiblePages - 1);
 
-				return [start, end];
-			},
+            //check when approaching to last page
+            var delta = this.pageLinkSize - (end - start + 1);
+            start = Math.max(0, start - delta);
 
-			updatePageLinks() {
-				var pageLinks = [];
-				var boundaries = this.calculatePageLinkBoundaries;
-				var start = boundaries[0];
-				var end = boundaries[1];
+            return [start, end];
+        },
 
-				for(var i = start; i <= end; i++) {
-					pageLinks.push(i + 1);
-				}
+        updatePageLinks() {
+            var pageLinks = [];
+            var boundaries = this.calculatePageLinkBoundaries;
+            var start = boundaries[0];
+            var end = boundaries[1];
 
-				return pageLinks;
-			}
-		},
-		methods: {
-			changePage(first, rows) {
-				var pc = this.pageCount;
-				var p = Math.floor(first / rows);
+            for(var i = start; i <= end; i++) {
+                pageLinks.push(i + 1);
+            }
 
-				if(p >= 0 && p < pc) {
-					var newPageState = {
-						first: first,
-						rows: rows,
-						page: p,
-						pageCount: pc
-					};
-					this.$emit('change', newPageState);
-				}
-			},
+            return pageLinks;
+        }
+    },
+    methods: {
+        changePage(first, rows) {
+            var pc = this.pageCount;
+            var p = Math.floor(first / rows);
 
-			changePageToFirst(event) {
-				this.changePage(0, this.rows);
-				event.preventDefault();
-			},
+            if(p >= 0 && p < pc) {
+                var newPageState = {
+                    first: first,
+                    rows: rows,
+                    page: p,
+                    pageCount: pc
+                };
+                this.$emit('change', newPageState);
+            }
+        },
 
-			changePageToPrev(event) {
-				this.changePage(this.first - this.rows, this.rows);
-				event.preventDefault();
-			},
+        changePageToFirst(event) {
+            this.changePage(0, this.rows);
+            event.preventDefault();
+        },
 
-			pageLinkClick(event) {
-				this.changePage((event.value - 1) * this.rows, this.rows);
-			},
+        changePageToPrev(event) {
+            this.changePage(this.first - this.rows, this.rows);
+            event.preventDefault();
+        },
 
-			changePageToNext(event) {
-				this.changePage(this.first + this.rows, this.rows);
-				event.preventDefault();
-			},
+        pageLinkClick(event) {
+            this.changePage((event.value - 1) * this.rows, this.rows);
+        },
 
-			changePageToLast(event) {
-				this.changePage((this.pageCount - 1) * this.rows, this.rows);
-				event.preventDefault();
-			},
+        changePageToNext(event) {
+            this.changePage(this.first + this.rows, this.rows);
+            event.preventDefault();
+        },
 
-			rowsChange(event) {
-				this.changePage(0, event.value.code);
-			}
-		}
-	}
+        changePageToLast(event) {
+            this.changePage((this.pageCount - 1) * this.rows, this.rows);
+            event.preventDefault();
+        },
+
+        rowsChange(event) {
+            this.changePage(0, event.value.code);
+        }
+    }
+}
 </script>
\ No newline at end of file
diff --git a/src/views/paginator/PaginatorDemo.vue b/src/views/paginator/PaginatorDemo.vue
index a5e7378e1..c5520915a 100644
--- a/src/views/paginator/PaginatorDemo.vue
+++ b/src/views/paginator/PaginatorDemo.vue
@@ -3,7 +3,7 @@
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>Paginator</h1>
-				<p>Paginator is a generic widget to display content in paged format.</p>
+				<p>Paginator is a generic component to display content in paged format.</p>
 			</div>
 		</div>
 
@@ -20,34 +20,31 @@
 </template>
 
 <script>
-    import PaginatorDoc from './PaginatorDoc';
+import PaginatorDoc from './PaginatorDoc';
 
-	export default {
-		data() {
-			return {
-				first: 0,
-                rows: 10,
-                totalRecords: 50,
-				first2: 0,
-                rows2: 1,
-                totalRecords2: 12
-			}
-		},
-		methods: {
-			onPageChange(event) {
-				this.first = event.first;
-				this.rows = event.rows;
-			},
-			onPageChangeCustom(event) {
-				this.first2 = event.first;
-				this.rows2 = event.rows;
-			}
-        },
-        components: {
-            'PaginatorDoc': PaginatorDoc
+export default {
+    data() {
+        return {
+            first: 0,
+            rows: 10,
+            totalRecords: 50,
+            first2: 0,
+            rows2: 1,
+            totalRecords2: 12
         }
-	}
-</script>
-
-<style lang="scss">
-</style>
+    },
+    methods: {
+        onPageChange(event) {
+            this.first = event.first;
+            this.rows = event.rows;
+        },
+        onPageChangeCustom(event) {
+            this.first2 = event.first;
+            this.rows2 = event.rows;
+        }
+    },
+    components: {
+        'PaginatorDoc': PaginatorDoc
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/paginator/PaginatorDoc.vue b/src/views/paginator/PaginatorDoc.vue
index 7922acf33..edb6e14bb 100644
--- a/src/views/paginator/PaginatorDoc.vue
+++ b/src/views/paginator/PaginatorDoc.vue
@@ -1,196 +1,198 @@
 <template>
     <div class="content-section documentation">
-            <TabView>
-                <TabPanel header="Documentation">
-                    <h3>Import</h3>
+        <TabView>
+            <TabPanel header="Documentation">
+                <h3>Import</h3>
 <CodeHighlight lang="javascript">
-import {Paginator} from 'primereact/paginator';
+import Paginator from 'primevue/paginator';
 </CodeHighlight>
 
-                    <h3>Getting Started</h3>
-                    <p><i>rows</i> and <i>totalRecords</i> define how many pages the paginator should display. Paginator below has 10 pages.</p>
+                <h3>Getting Started</h3>
+                <p><i>rows</i> and <i>totalRecords</i> define how many pages the paginator should display. Paginator below has 10 pages.</p>
 <CodeHighlight>
-&lt;Paginator :rows="10" :totalRecords="100"&gt;&lt;/Paginator&gt;
+&lt;Paginator :rows="10" :totalRecords="totalItems"&gt;&lt;/Paginator&gt;
 </CodeHighlight>
 
-                    <h3>Rows Per Page</h3>
-                    <p>Number of items per page can be changed by the user using a dropdown if you define rowsPerPageOptions as an array of possible values. In this case, 
-                        rows property should also be updated
-                    </p>
+                <h3>Start Offset</h3>
+                <p><i>first</i> property defines the index of the first item displayed by the paginator. This is useful in cases where the paginator needs to be controlled programmatically such as resetting or navigating to a certain page.</p>
+<CodeHighlight>
+&lt;Paginator :first="offset" :rows="10" :totalRecords="totalItems"&gt;&lt;/Paginator&gt;
+</CodeHighlight>
 
-                    <h3>Template</h3>
-                    <p>Paginator elements can be customized using the template property using the predefined keys, default value is 
-                    "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown". Here are the available elements that
-                    can be placed inside a paginator.</p>
-                    
-                    <ul>
-                        <li>FirstPageLink</li>
-                        <li>PrevPageLink</li>
-                        <li>PageLinks</li>
-                        <li>NextPageLink</li>
-                        <li>LastPageLink</li>
-                        <li>RowsPerPageDropdown</li>
-                        <li>CurrentPageReport</li>
-                    </ul>
+                <h3>Rows Per Page</h3>
+                <p>Number of items per page can be changed by the user using a dropdown with the <i>rowsPerPageOptions</i> property which accepts an array of possible values.</p>
+<CodeHighlight>
+&lt;Paginator :first="offset" :rows="10" :totalRecords="totalItems" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
+</CodeHighlight>
 
-                    <h3>Properties</h3>
-                    <div class="doc-tablewrapper">
-                        <table class="doc-table">
-                            <thead>
+                <h3>Template</h3>
+                <p>Paginator elements can be customized using the template property using the predefined keys, default value is 
+                "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown". Here are the available elements that
+                can be placed inside a paginator in any order.</p>
+                
+                <ul>
+                    <li>FirstPageLink</li>
+                    <li>PrevPageLink</li>
+                    <li>PageLinks</li>
+                    <li>NextPageLink</li>
+                    <li>LastPageLink</li>
+                    <li>RowsPerPageDropdown</li>
+                    <li>CurrentPageReport</li>
+                </ul>
+
+<CodeHighlight>
+&lt;Paginator :first="offset" :rows="10" :totalRecords="totalItems" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"&gt;&lt;/Paginator&gt;
+</CodeHighlight>
+
+                <h3>Page Change Event</h3>
+                <p>Paginator provides only one event called <i>page-change</i> along with all the information about the change event</p>
+<CodeHighlight>
+&lt;Paginator :first="offset" :rows="10" :totalRecords="totalItems" @page-change="onPage($event)"&gt;&lt;/Paginator&gt;
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+onPage(event) {
+    //event.page: New page number
+    //event.first: Index of first record
+    //event.rows: Number of rows to display in new page
+    //event.page: Index of the new page
+    //event.pageCount: Total number of pages 
+}
+</CodeHighlight>
+
+                <h3>Properties</h3>
+                <div class="doc-tablewrapper">
+                    <table class="doc-table">
+                        <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Type</th>
+                            <th>Default</th>
+                            <th>Description</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>totalRecords</td>
+                                <td>number</td>
+                                <td>0</td>
+                                <td>Number of total records.</td>
+                            </tr>
+                            <tr>
+                                <td>rows</td>
+                                <td>number</td>
+                                <td>0</td>
+                                <td>Data count to display per page.</td>
+                            </tr>
+                            <tr>
+                                <td>first</td>
+                                <td>number</td>
+                                <td>0</td>
+                                <td>Zero-relative number of the first row to be displayed.</td>
+                            </tr>
+                            <tr>
+                                <td>pageLinkSize</td>
+                                <td>number</td>
+                                <td>5</td>
+                                <td>Number of page links to display.</td>
+                            </tr>
+                            <tr>
+                                <td>rowsPerPageOptions</td>
+                                <td>array</td>
+                                <td>null</td>
+                                <td>Array of integer values to display inside rows per page dropdown.</td>
+                            </tr>
+                            <tr>
+                                <td>template</td>
+                                <td>string</td>
+                                <td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
+                                <td>Template of the paginator.</td>
+                            </tr>
+                            <tr>
+                                <td>currentPageReportTemplate</td>
+                                <td>string</td>
+                                <td>({currentPage} of {totalPages})</td>
+                                <td>Template of the current page report element.</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <h3>Events</h3>
+                <div class="doc-tablewrapper">
+                    <table class="doc-table">
+                        <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Parameters</th>
+                            <th>Description</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>page-change</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/>
+                                    event.page: Index of the new page <br/>
+                                    event.pageCount: Total number of pages 
+                                </td>
+                                <td>Callback to invoke when page changes, the event object contains information about the new state.</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <h3>Styling</h3>
+                <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+                <div class="doc-tablewrapper">
+                    <table class="doc-table">
+                        <thead>
                             <tr>
                                 <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
+                                <th>Element</th>
                             </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>totalRecords</td>
-                                    <td>number</td>
-                                    <td>0</td>
-                                    <td>Number of total records.</td>
-                                </tr>
-                                <tr>
-                                    <td>rows</td>
-                                    <td>number</td>
-                                    <td>0</td>
-                                    <td>Data count to display per page.</td>
-                                </tr>
-                                <tr>
-                                    <td>first</td>
-                                    <td>number</td>
-                                    <td>0</td>
-                                    <td>Zero-relative number of the first row to be displayed.</td>
-                                </tr>
-                                <tr>
-                                    <td>pageLinkSize</td>
-                                    <td>number</td>
-                                    <td>5</td>
-                                    <td>Number of page links to display.</td>
-                                </tr>
-                                <tr>
-                                    <td>rowsPerPageOptions</td>
-                                    <td>array</td>
-                                    <td>null</td>
-                                    <td>Array of integer values to display inside rows per page dropdown.</td>
-                                </tr>
-                                <tr>
-                                    <td>style</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Inline style of the element.</td>
-                                </tr>
-                                <tr>
-                                    <td>class</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Style class of the element.</td>
-                                </tr>
-                                <tr>
-                                    <td>template</td>
-                                    <td>string</td>
-                                    <td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
-                                    <td>Template of the paginator.</td>
-                                </tr>
-                                <tr>
-                                    <td>leftContent</td>
-                                    <td>any</td>
-                                    <td>null</td>
-                                    <td>Content to inject into the left side of the paginator.</td>
-                                </tr>
-                                <tr>
-                                    <td>rightContent</td>
-                                    <td>any</td>
-                                    <td>null</td>
-                                    <td>Content to inject into the right side of the paginator.</td>
-                                </tr>
-                                <tr>
-                                    <td>currentPageReportTemplate</td>
-                                    <td>string</td>
-                                    <td>({currentPage} of {totalPages})</td>
-                                    <td>Template of the current page report element.</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-
-                    <h3>Events</h3>
-                    <div class="doc-tablewrapper">
-                        <table class="doc-table">
-                            <thead>
+                        </thead>
+                        <tbody>
                             <tr>
-                                <th>Name</th>
-                                <th>Parameters</th>
-                                <th>Description</th>
+                                <td>p-paginator</td>
+                                <td>Container element.</td>
                             </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>onPageChange</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/>
-                                        event.page: Index of the new page <br/>
-                                        event.pageCount: Total number of pages 
-                                    </td>
-                                    <td>Callback to invoke when page changes, the event object contains information about the new state.</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
+                            <tr>
+                                <td>p-paginator-first</td>
+                                <td>First page element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-paginator-prev</td>
+                                <td>Previous page element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-paginator-pages</td>
+                                <td>Container of page links.</td>
+                            </tr>
+                            <tr>
+                                <td>p-paginator-page</td>
+                                <td>A page link.</td>
+                            </tr>
+                            <tr>
+                                <td>p-paginator-next</td>
+                                <td>Next pge element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-paginator-last</td>
+                                <td>Last page element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-paginator-rpp-options</td>
+                                <td>Rows per page dropdown.</td>
+                            </tr>
+                        </tbody>
+                    </table>
 
-                    <h3>Styling</h3>
-                    <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
-                    <div class="doc-tablewrapper">
-                        <table class="doc-table">
-                            <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Element</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>p-paginator</td>
-                                    <td>Container element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-paginator-first</td>
-                                    <td>First page element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-paginator-prev</td>
-                                    <td>Previous page element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-paginator-pages</td>
-                                    <td>Container of page links.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-paginator-page</td>
-                                    <td>A page link.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-paginator-next</td>
-                                    <td>Next pge element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-paginator-last</td>
-                                    <td>Last page element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-paginator-rpp-options</td>
-                                    <td>Rows per page dropdown.</td>
-                                </tr>
-                            </tbody>
-                        </table>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </div>
-            
-                </TabPanel>
+                    <h3>Dependencies</h3>
+                    <p>None.</p>
+                </div>
+            </TabPanel>
 
             <TabPanel header="Source">
                 <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/paginator" class="btn-viewsource" target="_blank" rel="noopener noreferrer">