Fixed #1758 - PickList slots before and after the buttons

api-generator/components/picklist.js

@@ -160,7 +160,7 @@ const PickListEvents = [
 
 const PickListSlots = [
     {
-        name: "sourceHeader",
+        name: "sourceheader",
         description: "Custom content for the component's source header"
     },
     {
@@ -168,8 +168,32 @@ const PickListSlots = [
         description: "Custom content for the item"
     },
     {
-        name: "targetHeader",
+        name: "targetheader",
         description: "Custom content for the component's target header"
+    },
+    {
+        name: "sourcecontrolsstart",
+        description: "Custom content before source control buttons"
+    },
+    {
+        name: "sourcecontrolsend",
+        description: "Custom content after source control buttons"
+    },
+    {
+        name: "movecontrolsstart",
+        description: "Custom content before move buttons"
+    },
+    {
+        name: "movecontrolsend",
+        description: "Custom content after move buttons"
+    },
+    {
+        name: "targetcontrolsstart",
+        description: "Custom content before target control buttons"
+    },
+    {
+        name: "targetcontrolsend",
+        description: "Custom content after target control buttons"
     }
 ];
 

src/components/picklist/PickList.d.ts

@@ -29,8 +29,14 @@ declare class PickList {
     $slots: {
         header: VNode[];
         item: PickListItemSlotInterface;
-        sourceHeader: VNode[];
+        sourceheader: VNode[];
-        targetHeader: VNode[];
+        targetheader: VNode[];
+        sourcecontrolsstart: VNode[];
+        sourcecontrolsend: VNode[];
+        movecontrolsstart: VNode[];
+        movecontrolsend: VNode[];
+        targetcontrolsstart: VNode[];
+        targetcontrolsend: VNode[];
     }
 }
 

src/components/picklist/PickList.vue

@@ -1,14 +1,16 @@
 <template>
     <div class="p-picklist p-component">
         <div class="p-picklist-buttons p-picklist-source-controls">
+            <slot name="sourcecontrolsstart"></slot>
             <PLButton type="button" icon="pi pi-angle-up" @click="moveUp($event, 0)"></PLButton>
             <PLButton type="button" icon="pi pi-angle-double-up" @click="moveTop($event, 0)"></PLButton>
             <PLButton type="button" icon="pi pi-angle-down" @click="moveDown($event, 0)"></PLButton>
             <PLButton type="button" icon="pi pi-angle-double-down" @click="moveBottom($event, 0)"></PLButton>
+            <slot name="sourcecontrolsend"></slot>
         </div>
         <div class="p-picklist-list-wrapper p-picklist-source-wrapper">
-            <div class="p-picklist-header" v-if="$slots.sourceHeader">
+            <div class="p-picklist-header" v-if="$slots.sourceheader">
-                <slot name="sourceHeader"></slot>
+                <slot name="sourceheader"></slot>
             </div>
             <transition-group ref="sourceList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-source" :style="listStyle" role="listbox" aria-multiselectable="multiple">
                 <template v-for="(item, i) of sourceList" :key="getItemKey(item, i)">
@@ -21,14 +23,16 @@
             </transition-group>
         </div>
         <div class="p-picklist-buttons p-picklist-transfer-buttons">
+            <slot name="movecontrolsstart"></slot>
             <PLButton type="button" icon="pi pi-angle-right" @click="moveToTarget"></PLButton>
             <PLButton type="button" icon="pi pi-angle-double-right" @click="moveAllToTarget"></PLButton>
             <PLButton type="button" icon="pi pi-angle-left" @click="moveToSource"></PLButton>
             <PLButton type="button" icon="pi pi-angle-double-left" @click="moveAllToSource"></PLButton>
+            <slot name="movecontrolsend"></slot>
         </div>
         <div class="p-picklist-list-wrapper p-picklist-target-wrapper">
-            <div class="p-picklist-header" v-if="$slots.targetHeader">
+            <div class="p-picklist-header" v-if="$slots.targetheader">
-                <slot name="targetHeader"></slot>
+                <slot name="targetheader"></slot>
             </div>
             <transition-group ref="targetList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-target" :style="listStyle" role="listbox" aria-multiselectable="multiple">
                 <template v-for="(item, i) of targetList" :key="getItemKey(item, i)">
@@ -41,10 +45,12 @@
             </transition-group>
         </div>
         <div class="p-picklist-buttons p-picklist-target-controls">
+            <slot name="targetcontrolsstart"></slot>
             <PLButton type="button" icon="pi pi-angle-up" @click="moveUp($event, 1)"></PLButton>
             <PLButton type="button" icon="pi pi-angle-double-up" @click="moveTop($event, 1)"></PLButton>
             <PLButton type="button" icon="pi pi-angle-down" @click="moveDown($event, 1)"></PLButton>
             <PLButton type="button" icon="pi pi-angle-double-down" @click="moveBottom($event, 1)"></PLButton>
+            <slot name="targetcontrolsend"></slot>
         </div>
     </div>
 </template>

src/views/picklist/PickListDemo.vue

@@ -11,10 +11,10 @@
         <div class="content-section implementation">
             <div class="card">
                 <PickList v-model="products" listStyle="height:342px" dataKey="id">
-                    <template #sourceHeader>
+                    <template #sourceheader>
                         Available
                     </template>
-                    <template #targetHeader>
+                    <template #targetheader>
                         Selected
                     </template>
                     <template #item="slotProps">

src/views/picklist/PickListDoc.vue

@@ -32,7 +32,9 @@ import PickList from 'primevue/picklist';
 </code></pre>
 
         <h5>Templates</h5>
-        <p>In addition to the mandatory "item" template, picklist provides "sourceHeader" and "targetHeader" slots as optional templates.</p>
+        <p>In addition to the mandatory "item" template, picklist provides "sourceheader" and "targetheader" slots to define content
+        at header sections. Similarly custom content can be placed before and after the button controls for each section can be templates. View
+        the slots section for more information.</p>
 <pre v-code><code><template v-pre>
 &lt;PickList v-model="cars" dataKey="vin"&gt;
     &lt;template #sourceHeader&gt;
@@ -223,11 +225,35 @@ import PickList from 'primevue/picklist';
                             index: Index of the item</td>
                     </tr>
                     <tr>
-                        <td>sourceHeader</td>
+                        <td>sourceheader</td>
                         <td>-</td>
                     </tr>
                     <tr>
-                        <td>targetHeader</td>
+                        <td>targetheader</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>sourcecontrolsstart</td>
+                        <td>-</td>
+                    </tr>
+                     <tr>
+                        <td>sourcecontrolsend</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>movecontrolsstart</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>movecontrolsend</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>targetcontrolsstart</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>targetcontrolsend</td>
                         <td>-</td>
                     </tr>
 				</tbody>