Refactor #3832 Refactor #3833 - For Menu

api-generator/components/menu.js

@@ -60,6 +60,10 @@ const MenuSlots = [
     {
         name: 'item',
         description: 'Template of a menuitem.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
     }
 ];
 

components/lib/menu/Menu.d.ts

@@ -80,6 +80,20 @@ export interface MenuSlots {
          */
         item: MenuItem;
     }): VNode[];
+    /**
+     * Custom item icon template.
+     * @param {Object} scope - item icon slot's params.
+     */
+    itemicon(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): VNode[];
 }
 
 /**

components/lib/menu/Menu.vue

@@ -24,12 +24,12 @@
                                 <slot name="item" :item="item">{{ label(item) }}</slot>
                             </li>
                             <template v-for="(child, j) of item.items" :key="child.label + i + '_' + j">
-                                <PVMenuitem v-if="visible(child) && !child.separator" :id="id + '_' + i + '_' + j" :item="child" :template="$slots.item" :exact="exact" :focusedOptionId="focusedOptionId" @item-click="itemClick" />
+                                <PVMenuitem v-if="visible(child) && !child.separator" :id="id + '_' + i + '_' + j" :item="child" :templates="$slots" :exact="exact" :focusedOptionId="focusedOptionId" @item-click="itemClick" />
                                 <li v-else-if="visible(child) && child.separator" :key="'separator' + i + j" :class="separatorClass(item)" :style="child.style" role="separator"></li>
                             </template>
                         </template>
                         <li v-else-if="visible(item) && item.separator" :key="'separator' + i.toString()" :class="separatorClass(item)" :style="item.style" role="separator"></li>
-                        <PVMenuitem v-else :key="label(item) + i.toString()" :id="id + '_' + i" :item="item" :template="$slots.item" :exact="exact" :focusedOptionId="focusedOptionId" @item-click="itemClick" />
+                        <PVMenuitem v-else :key="label(item) + i.toString()" :id="id + '_' + i" :item="item" :templates="$slots" :exact="exact" :focusedOptionId="focusedOptionId" @item-click="itemClick" />
                     </template>
                 </ul>
                 <div v-if="$slots.end" class="p-menu-end">

components/lib/menu/Menuitem.vue

@@ -1,19 +1,19 @@
 <template>
     <li v-if="visible()" :id="id" :class="containerClass()" role="menuitem" :style="item.style" :aria-label="label()" :aria-disabled="disabled()">
         <div class="p-menuitem-content" @click="onItemClick($event)">
-            <template v-if="!template">
+            <template v-if="!templates.item">
                 <router-link v-if="item.to && !disabled()" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
                     <a v-ripple :href="href" :class="linkClass({ isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
-                        <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
+                        <component :is="templates.itemicon || (item.icon ? 'span' : undefined)" :item="item" :class="iconClass" />
                         <span class="p-menuitem-text">{{ label() }}</span>
                     </a>
                 </router-link>
                 <a v-else v-ripple :href="item.url" :class="linkClass()" :target="item.target" tabindex="-1" aria-hidden="true">
-                    <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
+                    <component :is="templates.itemicon || (item.icon ? 'span' : undefined)" :item="item" :class="iconClass" />
                     <span class="p-menuitem-text">{{ label() }}</span>
                 </a>
             </template>
-            <component v-else :is="template" :item="item"></component>
+            <component v-else :is="templates.item" :item="item"></component>
         </div>
     </li>
 </template>
@@ -28,7 +28,7 @@ export default {
     emits: ['item-click'],
     props: {
         item: null,
-        template: null,
+        templates: null,
         exact: null,
         id: null,
         focusedOptionId: null
@@ -68,6 +68,11 @@ export default {
             return typeof this.item.label === 'function' ? this.item.label() : this.item.label;
         }
     },
+    computed: {
+        iconClass() {
+            return ['p-menuitem-icon', this.item.icon];
+        }
+    },
     directives: {
         ripple: Ripple
     }