Fixed #1806 - PickList v2 slots before and after the buttons

primefaces · Nov 22, 2021 · 90b06b0 · 90b06b0
1 parent 0af39a3
commit 90b06b0
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 15 deletions.
diff --git a/api-generator/components/picklist.js b/api-generator/components/picklist.js
@@ -126,16 +126,40 @@ const PickListEvents = [
 
 const PickListSlots = [
     {
-        name: "sourceHeader",
+        name: "sourceheader",
         description: "Custom content for the component's source header"
     },
     {
         name: "item",
         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"
     }
 ];
 

diff --git a/src/components/picklist/PickList.d.ts b/src/components/picklist/PickList.d.ts
@@ -14,6 +14,14 @@ declare class PickList extends Vue {
     $slots: {
         header: VNode[];
         item: VNode[];
+        sourceheader: VNode[];
+        targetheader: VNode[];
+        sourcecontrolsstart: VNode[];
+        sourcecontrolsend: VNode[];
+        movecontrolsstart: VNode[];
+        movecontrolsend: VNode[];
+        targetcontrolsstart: VNode[];
+        targetcontrolsend: VNode[];
     }
 }
 

diff --git a/src/components/picklist/PickList.vue b/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">
-                <slot name="sourceHeader"></slot>
+            <div class="p-picklist-header" v-if="$slots.sourceheader">
+                <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">
@@ -20,14 +22,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">
-                <slot name="targetHeader"></slot>
+            <div class="p-picklist-header" v-if="$slots.targetheader">
+                <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">
@@ -39,10 +43,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>
@@ -54,6 +60,9 @@ import DomHandler from '../utils/DomHandler';
 import Ripple from '../ripple/Ripple';
 
 export default {
+    mounted() {
+        console.log(this)
+    },
     props: {
         value: {
             type: Array,

diff --git a/src/views/picklist/PickListDemo.vue b/src/views/picklist/PickListDemo.vue
@@ -10,10 +10,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">

diff --git a/src/views/picklist/PickListDoc.vue b/src/views/picklist/PickListDoc.vue
@@ -27,14 +27,16 @@ import PickList from 'primevue/picklist';
 </CodeHighlight>
 
                 <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>
 <CodeHighlight>
 <template v-pre>
 &lt;PickList v-model="cars" dataKey="vin"&gt;
-    &lt;template #sourceHeader&gt;
+    &lt;template #sourceheader&gt;
         Available
     &lt;/template&gt;
-    &lt;template #targetHeader&gt;
+    &lt;template #targetheader&gt;
         Selected
     &lt;/template&gt;
     &lt;template #item="slotProps"&gt;
@@ -187,7 +189,7 @@ import PickList from 'primevue/picklist';
                         </thead>
                         <tbody>
                             <tr>
-                                <td>sourceHeader</td>
+                                <td>sourceheader</td>
                                 <td>-</td>
                             </tr>
                             <tr>
@@ -196,9 +198,33 @@ import PickList from 'primevue/picklist';
                                     index: Index of the item</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>
                     </table>
                 </div>
@@ -257,10 +283,10 @@ import PickList from 'primevue/picklist';
 <CodeHighlight>
 <template v-pre>
 &lt;PickList v-model="products" listStyle="height:342px" dataKey="id"&gt;
-    &lt;template #sourceHeader&gt;
+    &lt;template #sourceheader&gt;
         Available
     &lt;/template&gt;
-    &lt;template #targetHeader&gt;
+    &lt;template #targetheader&gt;
         Selected
     &lt;/template&gt;
     &lt;template #item="slotProps"&gt;