Refactor #3832 Refactor #3833 - For PanelMenu

api-generator/components/panelmenu.js

@@ -22,7 +22,11 @@ const PanelMenuProps = [
 const PanelMenuSlots = [
     {
         name: 'item',
-        description: 'Template of a menuitem.'
+        description: 'Custom item template.'
+    },
+    {
+        name: 'submenuicon',
+        description: 'Custom submenu icon template.'
     }
 ];
 

components/lib/carousel/Carousel.vue

@@ -81,6 +81,8 @@
 </template>
 
 <script>
+import ChevronDownIcon from 'primevue/icon/chevrondown';
+import ChevronRightIcon from 'primevue/icon/chevronright';
 import Ripple from 'primevue/ripple';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
@@ -654,6 +656,10 @@ export default {
             return UniqueComponentId();
         }
     },
+    components: {
+        ChevronRightIcon,
+        ChevronDownIcon
+    },
     directives: {
         ripple: Ripple
     }

components/lib/panelmenu/PanelMenu.d.ts

@@ -80,6 +80,15 @@ export interface PanelMenuSlots {
          */
         item: MenuItem;
     }): VNode[];
+    /**
+     * Custom submenu icon template.
+     */
+    submenuicon(scope: {
+        /**
+         * Whether item is active
+         */
+        active: boolean;
+    }): VNode[];
 }
 
 /**

components/lib/panelmenu/PanelMenu.vue

@@ -23,7 +23,9 @@
                                 </a>
                             </router-link>
                             <a v-else :href="getItemProp(item, 'url')" :class="getHeaderActionClass(item)" :tabindex="-1">
-                                <span v-if="getItemProp(item, 'items')" :class="getHeaderToggleIconClass(item)"></span>
+                                <slot v-if="getItemProp(item, 'items')" name="submenuicon" :active="isItemActive(item)">
+                                    <component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" />
+                                </slot>
                                 <span v-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)"></span>
                                 <span class="p-menuitem-text">{{ getItemLabel(item) }}</span>
                             </a>
@@ -34,7 +36,7 @@
                 <transition name="p-toggleable-content">
                     <div v-show="isItemActive(item)" :id="getContentId(index)" class="p-toggleable-content" role="region" :aria-labelledby="getHeaderId(index)">
                         <div v-if="getItemProp(item, 'items')" class="p-panelmenu-content">
-                            <PanelMenuList :panelId="getPanelId(index)" :items="getItemProp(item, 'items')" :template="$slots.item" :expandedKeys="expandedKeys" @item-toggle="changeExpandedKeys" @header-focus="updateFocusedHeader" :exact="exact" />
+                            <PanelMenuList :panelId="getPanelId(index)" :items="getItemProp(item, 'items')" :template="$slots" :expandedKeys="expandedKeys" @item-toggle="changeExpandedKeys" @header-focus="updateFocusedHeader" :exact="exact" />
                         </div>
                     </div>
                 </transition>
@@ -44,6 +46,8 @@
 </template>
 
 <script>
+import ChevronDownIcon from 'primevue/icon/chevrondown';
+import ChevronRightIcon from 'primevue/icon/chevronright';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import PanelMenuList from './PanelMenuList.vue';
 
@@ -253,13 +257,12 @@ export default {
         },
         getHeaderIconClass(item) {
             return ['p-menuitem-icon', this.getItemProp(item, 'icon')];
-        },
-        getHeaderToggleIconClass(item) {
-            return ['p-submenu-icon', this.isItemActive(item) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'];
         }
     },
     components: {
-        PanelMenuList: PanelMenuList
+        PanelMenuList: PanelMenuList,
+        ChevronRightIcon: ChevronRightIcon,
+        ChevronDownIcon: ChevronDownIcon
     }
 };
 </script>

components/lib/panelmenu/PanelMenuList.vue

@@ -35,7 +35,7 @@ export default {
             default: null
         },
         template: {
-            type: Function,
+            type: Object,
             default: null
         },
         expandedKeys: {

components/lib/panelmenu/PanelMenuSub.vue

@@ -14,7 +14,7 @@
                 :aria-posinset="getAriaPosInset(index)"
             >
                 <div class="p-menuitem-content" @click="onItemClick($event, processedItem)">
-                    <template v-if="!template">
+                    <template v-if="!template.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
                             <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
                                 <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
@@ -22,12 +22,14 @@
                             </a>
                         </router-link>
                         <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
-                            <span v-if="isItemGroup(processedItem)" :class="getItemToggleIconClass(processedItem)"></span>
+                            <slot v-if="isItemGroup(processedItem)" name="submenuicon">
+                                <component :is="template.submenuicon || (isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon')" class="p-submenu-icon" :active="isItemActive(processedItem)" />
+                            </slot>
                             <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
                             <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
                         </a>
                     </template>
-                    <component v-else :is="template" :item="processedItem.item"></component>
+                    <component v-else :is="template.item" :item="processedItem.item"></component>
                 </div>
                 <transition name="p-toggleable-content">
                     <div v-show="isItemActive(processedItem)" class="p-toggleable-content">
@@ -53,6 +55,8 @@
 </template>
 
 <script>
+import ChevronDownIcon from 'primevue/icon/chevrondown';
+import ChevronRightIcon from 'primevue/icon/chevronright';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
 
@@ -77,7 +81,7 @@ export default {
             default: 0
         },
         template: {
-            type: Function,
+            type: Object,
             default: null
         },
         activeItemPath: {
@@ -155,13 +159,14 @@ export default {
         getItemIconClass(processedItem) {
             return ['p-menuitem-icon', this.getItemProp(processedItem, 'icon')];
         },
-        getItemToggleIconClass(processedItem) {
-            return ['p-submenu-icon', this.isItemActive(processedItem) ? 'pi pi-fw pi-chevron-down' : 'pi pi-fw pi-chevron-right'];
-        },
         getSeparatorItemClass(processedItem) {
             return ['p-menuitem-separator', this.getItemProp(processedItem, 'class')];
         }
     },
+    components: {
+        ChevronRightIcon: ChevronRightIcon,
+        ChevronDownIcon: ChevronDownIcon
+    },
     directives: {
         ripple: Ripple
     }