Fixed #1482 - start and end slots for MegaMenu, remove default slot

api-generator/components/megamenu.js

@@ -20,6 +20,14 @@ const MegaMenuProps = [
 ];
 
 const MegaMenuSlots = [
+    {
+        name: "start",
+        description: "Custom content before the content"
+    },
+    {
+        name: "end",
+        description: "Custom content after the content"
+    },
     {
         name: "item",
         description: "Template of a menuitem."

src/components/megamenu/MegaMenu.d.ts

@@ -9,7 +9,8 @@ interface MegaMenuProps {
 declare class MegaMenu {
     $props: MegaMenuProps;
     $slots: {
-        '': VNode[];
+        start: VNode[];
+        end: VNode[];
         item: VNode[];
     }
 }

src/components/megamenu/MegaMenu.vue

@@ -1,5 +1,8 @@
 <template>
     <div :class="containerClass">
+        <div class="p-megamenu-start" v-if="$slots.start">
+            <slot name="start"></slot>
+        </div>
         <ul class="p-megamenu-root-list" role="menubar">
             <template v-for="(category,index) of model" :key="category.label + '_' + index">
                 <li v-if="visible(category)"  :class="getCategoryClass(category)" :style="category.style"
@@ -50,8 +53,8 @@
                 </li>
             </template>
         </ul>
-        <div class="p-megamenu-custom" v-if="$slots.default">
-            <slot></slot>
+        <div class="p-megamenu-end" v-if="$slots.end">
+            <slot name="end"></slot>
         </div>
     </div>
 </template>

src/views/megamenu/MegaMenuDoc.vue

@@ -142,17 +142,19 @@ export default {
 
 </code></pre>
 
-        <h5>Custom Content</h5>
-        <p>Any content inside the megamenu will be displayed on the right side by default. You may use ".p-megamenu-custom" style class to change the location of the content.
-            Additionally, MegaMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.
-        </p>
+        <h5>Templating</h5>
+        <p>Two slots named "start" and "end" are provided to embed content before or after the items. In additon MegaMenu, 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><template v-pre>
 &lt;MegaMenu :model="items"&gt;
-    &lt;InputText placeholder="Search" type="text" /&gt;
-    &lt;Button label="Logout" icon="pi pi-power-off" /&gt;
+     &lt;template #start&gt;
+        Before
+    &lt;/template&gt;
     &lt;template #item="{item}"&gt;
         &lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt;
     &lt;/template&gt;
+    &lt;template #end&gt;
+        After
+    &lt;/template&gt;
 &lt;/MegaMenu&gt;
 </template>
 </code></pre>