Fixed #1757 - OrderList slots before and after the buttons

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"
     }
 ];
 

src/components/orderlist/OrderList.d.ts

@@ -25,6 +25,8 @@ declare class OrderList {
     $slots: {
         header: VNode[];
         item: OrderListItemSlotInterface;
+        controlsstart: VNode[];
+        controlsend: VNode[];
     }
 }
 

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">

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>