From 099574edc7e88d4bce23353dcc5c746f84f27590 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 15 Nov 2021 16:54:53 +0300
Subject: [PATCH] Fixed #1757 - OrderList slots before and after the buttons

---
 api-generator/components/orderlist.js   |  8 ++++++++
 src/components/orderlist/OrderList.d.ts |  2 ++
 src/components/orderlist/OrderList.vue  |  2 ++
 src/views/orderlist/OrderListDoc.vue    | 12 ++++++++++++
 4 files changed, 24 insertions(+)

diff --git a/api-generator/components/orderlist.js b/api-generator/components/orderlist.js
index 2bded2387..0498a8a50 100644
--- a/api-generator/components/orderlist.js
+++ b/api-generator/components/orderlist.js
@@ -98,6 +98,14 @@ const OrderListSlots = [
     {
         name: "item",
         description: "Custom content for the item"
+    },
+    {
+        name: "controlsstart",
+        description: "Custom content before the buttons"
+    },
+    {
+        name: "controlsend",
+        description: "Custom content after the buttons"
     }
 ];
 
diff --git a/src/components/orderlist/OrderList.d.ts b/src/components/orderlist/OrderList.d.ts
index 376f539f3..d0844e892 100755
--- a/src/components/orderlist/OrderList.d.ts
+++ b/src/components/orderlist/OrderList.d.ts
@@ -25,6 +25,8 @@ declare class OrderList {
     $slots: {
         header: VNode[];
         item: OrderListItemSlotInterface;
+        controlsstart: VNode[];
+        controlsend: VNode[];
     }
 }
 
diff --git a/src/components/orderlist/OrderList.vue b/src/components/orderlist/OrderList.vue
index 1cb4fb30b..b613768b0 100755
--- a/src/components/orderlist/OrderList.vue
+++ b/src/components/orderlist/OrderList.vue
@@ -1,10 +1,12 @@
 <template>
     <div class="p-orderlist p-component">
         <div class="p-orderlist-controls">
+            <slot name="controlsstart"></slot>
             <OLButton type="button" icon="pi pi-angle-up" @click="moveUp"></OLButton>
             <OLButton type="button" icon="pi pi-angle-double-up" @click="moveTop"></OLButton>
             <OLButton type="button" icon="pi pi-angle-down" @click="moveDown"></OLButton>
             <OLButton type="button" icon="pi pi-angle-double-down" @click="moveBottom"></OLButton>
+            <slot name="controlsend"></slot>
         </div>
         <div class="p-orderlist-list-container">
             <div class="p-orderlist-header" v-if="$slots.header">
diff --git a/src/views/orderlist/OrderListDoc.vue b/src/views/orderlist/OrderListDoc.vue
index 648118237..829cebf79 100755
--- a/src/views/orderlist/OrderListDoc.vue
+++ b/src/views/orderlist/OrderListDoc.vue
@@ -64,6 +64,10 @@ import OrderList from 'primevue/orderlist';
         <h5>DataKey</h5>
         <p>It is recommended to provide the name of the field that uniquely identifies the a record in the data via the <i>dataKey</i> property for better performance.</p>
 
+        <h5>Templating</h5>
+        <p>In addition to the <i>item</i> template, <i>header</i> is provided to place custom content at the list header. Controls section
+        can also be customized to place content before and after the buttons with <i>controlsstart</i> and <i>controlsend</i> slots respectively.</p>
+
 		<h5>Properties</h5>
         <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
 		<div class="doc-tablewrapper">
@@ -180,6 +184,14 @@ import OrderList from 'primevue/orderlist';
                         <td>item</td>
                         <td>item: Item of the component<br />
                             index: Index of the item</td>
+                    </tr>
+                    <tr>
+                        <td>controlsstart</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>ı
+                        <td>controlsend</td>
+                        <td>-</td>
                     </tr>
 				</tbody>
 			</table>