Fixed #3599 - Menu: start and end templating

api-generator/components/menu.js

@@ -49,6 +49,14 @@ const MenuEvents = [
 ];
 
 const MenuSlots = [
+    {
+        name: 'start',
+        description: 'Custom content before the content'
+    },
+    {
+        name: 'end',
+        description: 'Custom content after the content'
+    },
     {
         name: 'item',
         description: 'Template of a menuitem.'

components/menu/Menu.d.ts

@@ -49,6 +49,14 @@ export interface MenuProps {
 }
 
 export interface MenuSlots {
+    /**
+     * Custom start template.
+     */
+    start: () => VNode[];
+    /**
+     * Custom end template.
+     */
+    end: () => VNode[];
     /**
      * Custom item template.
      * @param {Object} scope - item slot's params.

components/menu/Menu.vue

@@ -2,6 +2,9 @@
     <Portal :appendTo="appendTo" :disabled="!popup">
         <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
             <div v-if="popup ? overlayVisible : true" :ref="containerRef" :id="id" :class="containerClass" v-bind="$attrs" @click="onOverlayClick">
+                <div v-if="$slots.start" class="p-menu-start">
+                    <slot name="start"></slot>
+                </div>
                 <ul
                     :ref="listRef"
                     :id="id + '_list'"
@@ -29,6 +32,9 @@
                         <PVMenuitem v-else :key="label(item) + i.toString()" :id="id + '_' + i" :item="item" :template="$slots.item" :exact="exact" :focusedOptionId="focusedOptionId" @item-click="itemClick" />
                     </template>
                 </ul>
+                <div v-if="$slots.end" class="p-menu-end">
+                    <slot name="end"></slot>
+                </div>
             </div>
         </transition>
     </Portal>

pages/menu/MenuDoc.vue

@@ -93,12 +93,18 @@ toggle(event) {
 </code></pre>
 
         <h5>Templating</h5>
-        <p>Menu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
+        <p>Two slots named "start" and "end" are provided to embed content before or after the menu. In additon Menu, offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
         <pre v-code><code>
 &lt;Menu :model="items"&gt;
+    &lt;template #start&gt;
+		Start
+	&lt;/template&gt;
     &lt;template #item="{item}"&gt;
         &lt;a :href="item.url"&gt;&#123;&#123;item.label&#125;&#125;&lt;/a&gt;
     &lt;/template&gt;
+    &lt;template #end&gt;
+		End
+	&lt;/template&gt;
 &lt;/Menu&gt;
 
 </code></pre>
@@ -265,6 +271,14 @@ toggle(event) {
                         <td>item</td>
                         <td>item: Menuitem instance</td>
                     </tr>
+                    <tr>
+                        <td>start</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>end</td>
+                        <td>-</td>
+                    </tr>
                 </tbody>
             </table>
         </div>
@@ -284,6 +298,14 @@ toggle(event) {
                         <td>p-menu</td>
                         <td>Container element.</td>
                     </tr>
+                    <tr>
+                        <td>p-menu-start</td>
+                        <td>Container of the start slot.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menu-end</td>
+                        <td>Container of the end slot.</td>
+                    </tr>
                     <tr>
                         <td>p-menu-list</td>
                         <td>List element.</td>