Fixed #1808, Fixed #1809

primefaces · Nov 22, 2021 · 753e55c · 753e55c
1 parent 90b06b0
commit 753e55c
Show file tree

Hide file tree

Showing 24 changed files with 87 additions and 87 deletions.
diff --git a/api-generator/components/datatable.js b/api-generator/components/datatable.js
@@ -1063,11 +1063,11 @@ const DataTableSlots = [
         description: "Custom content for the component's header"
     },
     {
-        name: "paginatorLeft",
+        name: "paginatorstart",
         description: "Custom content for the component paginator's left side"
     },
     {
-        name: "paginatorRight",
+        name: "paginatorend",
         description: "Custom content for the component paginator's right side"
     },
     {

diff --git a/api-generator/components/dataview.js b/api-generator/components/dataview.js
@@ -126,11 +126,11 @@ const DataViewSlots = [
         description: "Custom content for the component's header"
     },
     {
-        name: "paginatorLeft",
+        name: "paginatorstart",
         description: "Custom content for the component paginator's left side"
     },
     {
-        name: "paginatorRight",
+        name: "paginatorend",
         description: "Custom content for the component paginator's right side"
     },
     {

diff --git a/api-generator/components/paginator.js b/api-generator/components/paginator.js
@@ -80,11 +80,11 @@ const PaginatorEvents = [
 
 const PaginatorSlots = [
     {
-        name: "left",
+        name: "start",
         description: "Custom content for the component's left side"
     },
     {
-        name: "right",
+        name: "end",
         description: "Custom content for the component's right side"
     }
 ];

diff --git a/api-generator/components/toolbar.js b/api-generator/components/toolbar.js
@@ -1,10 +1,10 @@
 const ToolbarSlots = [
     {
-        name: "left",
+        name: "start",
         description: "Custom content for the component's left side"
     },
     {
-        name: "right",
+        name: "end",
         description: "Custom content for the component's right side"
     }
 ];

diff --git a/api-generator/components/treetable.js b/api-generator/components/treetable.js
@@ -415,11 +415,11 @@ const TreeTableSlots = [
         description: "Custom content for the component's header"
     },
     {
-        name: "paginatorLeft",
+        name: "paginatorstart",
         description: "Custom content for the component paginator's left side"
     },
     {
-        name: "paginatorRight",
+        name: "paginatorend",
         description: "Custom content for the component paginator's right side"
     },
     {

diff --git a/src/components/datatable/DataTable.d.ts b/src/components/datatable/DataTable.d.ts
@@ -81,8 +81,8 @@ declare class DataTable extends Vue {
     $emit(eventName: 'row-edit-cancel', event: Event): this;
     $slots: {
         header: VNode[];
-        paginatorLeft: VNode[];
-        paginatorRight: VNode[];
+        paginatorstart: VNode[];
+        paginatorend: VNode[];
         empty: VNode[];
         footer: VNode[];
     }

diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
@@ -9,11 +9,11 @@
         </div>
         <DTPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
                 :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-top" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
-            <template #left v-if="$scopedSlots.paginatorLeft">
-                <slot name="paginatorLeft"></slot>
+            <template #start v-if="$scopedSlots.paginatorstart">
+                <slot name="paginatorstart"></slot>
             </template>
-            <template #right v-if="$scopedSlots.paginatorRight">
-                <slot name="paginatorRight"></slot>
+            <template #end v-if="$scopedSlots.paginatorend">
+                <slot name="paginatorend"></slot>
             </template>
         </DTPaginator>
         <div class="p-datatable-wrapper" v-if="!scrollable">
@@ -113,11 +113,11 @@
         </div>
         <DTPaginator v-if="paginatorBottom" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
                 :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-bottom" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
-            <template #left v-if="$scopedSlots.paginatorLeft">
-                <slot name="paginatorLeft"></slot>
+            <template #start v-if="$scopedSlots.paginatorstart">
+                <slot name="paginatorstart"></slot>
             </template>
-            <template #right v-if="$scopedSlots.paginatorRight">
-                <slot name="paginatorRight"></slot>
+            <template #end v-if="$scopedSlots.paginatorend">
+                <slot name="paginatorend"></slot>
             </template>
         </DTPaginator>
         <div class="p-datatable-footer" v-if="$scopedSlots.footer">

diff --git a/src/components/dataview/DataView.d.ts b/src/components/dataview/DataView.d.ts
@@ -19,8 +19,8 @@ declare class DataView extends Vue {
     $emit(eventName: 'page', event: Event): this;
     $slots: {
         header: VNode[];
-        paginatorLeft: VNode[];
-        paginatorRight: VNode[];
+        paginatorstart: VNode[];
+        paginatorend: VNode[];
         list: VNode[];
         grid: VNode[];
         footer: VNode[];

diff --git a/src/components/dataview/DataView.vue b/src/components/dataview/DataView.vue
@@ -5,11 +5,11 @@
 		</div>
 		<DVPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
 					:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-top': paginatorTop}" :alwaysShow="alwaysShowPaginator" @page="onPage($event)">
-			<template #left v-if="$scopedSlots.paginatorLeft">
-				<slot name="paginatorLeft"></slot>
+			<template #start v-if="$scopedSlots.paginatorstart">
+				<slot name="paginatorstart"></slot>
 			</template>
-			<template #right v-if="$scopedSlots.paginatorRight">
-				<slot name="paginatorRight"></slot>
+			<template #end v-if="$scopedSlots.paginatorend">
+				<slot name="paginatorend"></slot>
 			</template>
 		</DVPaginator>
 		<div class="p-dataview-content">
@@ -27,11 +27,11 @@
 		</div>
 		<DVPaginator v-if="paginatorBottom" :rows="d_rows" :first="d_first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
 					:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-bottom': paginatorBottom}" :alwaysShow="alwaysShowPaginator" @page="onPage($event)">
-			<template #left v-if="$scopedSlots.paginatorLeft">
-				<slot name="paginatorLeft"></slot>
+			<template #start v-if="$scopedSlots.paginatorstart">
+				<slot name="paginatorstart"></slot>
 			</template>
-			<template #right v-if="$scopedSlots.paginatorRight">
-				<slot name="paginatorRight"></slot>
+			<template #end v-if="$scopedSlots.paginatorend">
+				<slot name="paginatorend"></slot>
 			</template>
 		</DVPaginator>
 		<div class="p-dataview-footer" v-if="$scopedSlots.footer">

diff --git a/src/components/paginator/Paginator.d.ts b/src/components/paginator/Paginator.d.ts
@@ -18,8 +18,8 @@ declare class Paginator extends Vue {
     alwaysShow?: boolean;
     $emit(eventName: 'page', event: PageState): this;
     $slots: {
-        left: VNode[];
-        right: VNode[];
+        start: VNode[];
+        end: VNode[];
     }
 }
 

diff --git a/src/components/paginator/Paginator.vue b/src/components/paginator/Paginator.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="p-paginator p-component" v-if="alwaysShow ? true : (pageLinks && pageLinks.length > 1)">
-        <div class="p-paginator-left-content" v-if="$scopedSlots.left">
-            <slot name="left" :state="currentState"></slot>
+        <div class="p-paginator-left-content" v-if="$scopedSlots.start">
+            <slot name="start" :state="currentState"></slot>
         </div>
 		<template v-for="item of templateItems">
 			<FirstPageLink v-if="item === 'FirstPageLink'" :key="item" @click="changePageToFirst($event)" :disabled="isFirstPage || empty" />
@@ -17,8 +17,8 @@
                 @page-change="changePage($event)" :disabled="empty"/>
             <JumpToPageInput v-else-if="item === 'JumpToPageInput'" :key="item" :page="currentPage" @page-change="changePage($event)" :disabled="empty"/>
         </template>
-        <div class="p-paginator-right-content" v-if="$scopedSlots.right">
-            <slot name="right" :state="currentState"></slot>
+        <div class="p-paginator-right-content" v-if="$scopedSlots.end">
+            <slot name="end" :state="currentState"></slot>
         </div>
 	</div>
 </template>

diff --git a/src/components/toolbar/Toolbar.d.ts b/src/components/toolbar/Toolbar.d.ts
@@ -2,7 +2,7 @@ import Vue, { VNode } from 'vue';
 
 declare class Toolbar extends Vue {
     $slots: {
-        left: VNode[];
+        start: VNode[];
         right: VNode[];
     }
 }

diff --git a/src/components/toolbar/Toolbar.vue b/src/components/toolbar/Toolbar.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="p-toolbar p-component" role="toolbar">
         <div class="p-toolbar-group-left">
-             <slot name="left"></slot>
+             <slot name="start"></slot>
         </div>
         <div class="p-toolbar-group-right">
-             <slot name="right"></slot>
+             <slot name="end"></slot>
         </div>
     </div>
 </template>

diff --git a/src/components/treetable/TreeTable.d.ts b/src/components/treetable/TreeTable.d.ts
@@ -45,8 +45,8 @@ declare class TreeTable extends Vue {
     $emit(eventName: 'column-resize-end', event: Event): this;
     $slots: {
         header: VNode[];
-        paginatorLeft: VNode[];
-        paginatorRight: VNode[];
+        paginatorstart: VNode[];
+        paginatorend: VNode[];
         empty: VNode[];
         footer: VNode[];
     }

diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue
@@ -11,11 +11,11 @@
         </div>
          <TTPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
                 :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-top" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
-            <template #left v-if="$scopedSlots.paginatorLeft">
-                <slot name="paginatorLeft"></slot>
+            <template #start v-if="$scopedSlots.paginatorstart">
+                <slot name="paginatorstart"></slot>
             </template>
-            <template #right v-if="$scopedSlots.paginatorRight">
-                <slot name="paginatorRight"></slot>
+            <template #end v-if="$scopedSlots.paginatorend">
+                <slot name="paginatorend"></slot>
             </template>
         </TTPaginator>
         <div class="p-treetable-wrapper">
@@ -63,11 +63,11 @@
         </div>
         <TTPaginator v-if="paginatorBottom" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
                 :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-bottom" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
-            <template #left v-if="$scopedSlots.paginatorLeft">
-                <slot name="paginatorLeft"></slot>
+            <template #start v-if="$scopedSlots.paginatorstart">
+                <slot name="paginatorstart"></slot>
             </template>
-            <template #right v-if="$scopedSlots.paginatorRight">
-                <slot name="paginatorRight"></slot>
+            <template #end v-if="$scopedSlots.paginatorend">
+                <slot name="paginatorend"></slot>
             </template>
         </TTPaginator>
         <div class="p-treetable-footer" v-if="$scopedSlots.footer">

diff --git a/src/views/datatable/DataTableCrudDemo.vue b/src/views/datatable/DataTableCrudDemo.vue
@@ -10,12 +10,12 @@
 		<div class="content-section implementation">
             <div class="card">
                 <Toolbar class="p-mb-4">
-                    <template #left>
+                    <template #start>
                         <Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" />
                         <Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
                     </template>
 
-                    <template #right>
+                    <template #end>
                         <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block" />
                         <Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"  />
                     </template>
@@ -147,12 +147,12 @@
 <CodeHighlight>
 <template v-pre>
 &lt;Toolbar class="p-mb-4"&gt;
-    &lt;template #left&gt;
+    &lt;template #start&gt;
         &lt;Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" /&gt;
         &lt;Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" /&gt;
     &lt;/template&gt;
 
-    &lt;template #right&gt;
+    &lt;template #end&gt;
         &lt;FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2" /&gt;
         &lt;Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"  /&gt;
     &lt;/template&gt;

diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
@@ -429,18 +429,18 @@ export default {
 </template>
 </CodeHighlight>
 
-                <p>paginatorLeft and paginatorLeft templates are available to specify custom content at the left and right side.</p>
+                <p>paginatorstart and paginatorend templates are available to specify custom content at the left and right side.</p>
 <CodeHighlight>
 <template v-pre>
 &lt;DataTable :value="cars" :paginator="true" :rows="10"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
-    &lt;template #paginatorLeft&gt;
+    &lt;template #paginatorstart&gt;
         &lt;Button type="button" icon="pi pi-refresh" /&gt;
     &lt;/template&gt;
-    &lt;template #paginatorRight&gt;
+    &lt;template #paginatorend&gt;
         &lt;Button type="button" icon="pi pi-cloud" /&gt;
     &lt;/template&gt;
 &lt;/DataTable&gt;
@@ -2400,11 +2400,11 @@ export default {
                                 <td>-</td>
                             </tr>
                             <tr>
-                                <td>paginatorLeft</td>
+                                <td>paginatorstart</td>
                                 <td>-</td>
                             </tr>
                             <tr>
-                                <td>paginatorRight</td>
+                                <td>paginatorend</td>
                                 <td>-</td>
                             </tr>
                             <tr>

diff --git a/src/views/datatable/DataTablePaginatorDemo.vue b/src/views/datatable/DataTablePaginatorDemo.vue
@@ -17,10 +17,10 @@
                     <Column field="country.name" header="Country"></Column>
                     <Column field="company" header="Company"></Column>
                     <Column field="representative.name" header="Representative"></Column>
-                    <template #paginatorLeft>
+                    <template #paginatorstart>
                         <Button type="button" icon="pi pi-refresh" class="p-button-text" />
                     </template>
-                    <template #paginatorRight>
+                    <template #paginatorend>
                         <Button type="button" icon="pi pi-cloud" class="p-button-text" />
                     </template>
                 </DataTable>
@@ -40,10 +40,10 @@
     &lt;Column field="country.name" header="Country"&gt;&lt;/Column&gt;
     &lt;Column field="company" header="Company"&gt;&lt;/Column&gt;
     &lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
-    &lt;template #paginatorLeft&gt;
+    &lt;template #paginatorstart&gt;
         &lt;Button type="button" icon="pi pi-refresh" class="p-button-text" /&gt;
     &lt;/template&gt;
-    &lt;template #paginatorRight&gt;
+    &lt;template #paginatorend&gt;
         &lt;Button type="button" icon="pi pi-cloud" class="p-button-text" /&gt;
     &lt;/template&gt;
 &lt;/DataTable&gt;

diff --git a/src/views/dataview/DataViewDoc.vue b/src/views/dataview/DataViewDoc.vue
@@ -102,14 +102,14 @@ export default {
 
 				<h5>Paginator</h5>
 				<p>Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number
-					of page links to display. To customize the left and right side of the paginators, use <i>paginatorLeft</i> and <i>paginatorRight</i> templates.</p>
+					of page links to display. To customize the left and right side of the paginators, use <i>paginatorstart</i> and <i>paginatorend</i> templates.</p>
 <CodeHighlight>
 <template v-pre>
 &lt;DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20"&gt;
-	&lt;template #paginatorLeft&gt;
+	&lt;template #paginatorstart&gt;
 		&lt;Button type="button" icon="pi pi-refresh"/&gt;
 	&lt;/template&gt;
-	&lt;template #paginatorRight&gt;
+	&lt;template #paginatorend&gt;
 		&lt;Button type="button" icon="pi pi-search" /&gt;
 	&lt;/template&gt;
 	&lt;template #list="slotProps" &gt;
@@ -377,11 +377,11 @@ export default {
                                 <td>-</td>
                             </tr>
                             <tr>
-                                <td>paginatorLeft</td>
+                                <td>paginatorstart</td>
                                 <td>-</td>
                             </tr>
                             <tr>
-                                <td>paginatorRight</td>
+                                <td>paginatorend</td>
                                 <td>-</td>
                             </tr>
                             <tr>

diff --git a/src/views/paginator/PaginatorDemo.vue b/src/views/paginator/PaginatorDemo.vue
@@ -15,10 +15,10 @@
                 <h5>Custom</h5>
                 <Paginator :first.sync="first" :rows="1" :totalRecords="totalRecords2"
                     template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
-                    <template #left>
+                    <template #start>
                         <Button type="button" icon="pi pi-refresh" @click="reset()"/>
                     </template>
-                    <template #right>
+                    <template #end>
                         <Button type="button" icon="pi pi-search" />
                     </template>
                 </Paginator>