Merge branch 'master' of https://github.com/primefaces/primevue

src/components/paginator/Paginator.vue

@@ -44,8 +44,6 @@
             type: String,
             default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
         },
-			leftContent: null,
-			rightContent: null,
         currentPageReportTemplate: {
             type: null,
             default: '({currentPage} of {totalPages})'

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>
 
@@ -48,6 +48,3 @@
     }
 }
 </script>
-
-<style lang="scss">
-</style>

src/views/paginator/PaginatorDoc.vue

@@ -4,24 +4,31 @@
             <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>
 <CodeHighlight>
-&lt;Paginator :rows="10" :totalRecords="100"&gt;&lt;/Paginator&gt;
+&lt;Paginator :rows="10" :totalRecords="totalItems"&gt;&lt;/Paginator&gt;
+</CodeHighlight>
+
+                <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>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, 
+                <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>
-                        rows property should also be updated
+<CodeHighlight>
-                    </p>
+&lt;Paginator :first="offset" :rows="10" :totalRecords="totalItems" :rowsPerPageOptions="[10,20,30]"&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>
+                can be placed inside a paginator in any order.</p>
                 
                 <ul>
                     <li>FirstPageLink</li>
@@ -33,6 +40,26 @@ import {Paginator} from 'primereact/paginator';
                     <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">
@@ -75,36 +102,12 @@ import {Paginator} from 'primereact/paginator';
                                 <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>
@@ -127,7 +130,7 @@ import {Paginator} from 'primereact/paginator';
                         </thead>
                         <tbody>
                             <tr>
-                                    <td>onPageChange</td>
+                                <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/>
@@ -189,7 +192,6 @@ import {Paginator} from 'primereact/paginator';
                     <h3>Dependencies</h3>
                     <p>None.</p>
                 </div>
-            
             </TabPanel>
 
             <TabPanel header="Source">