Refactor #5592, #5661 - For Menu & MegaMenu

primefaces · Apr 30, 2024 · aec93e5 · aec93e5
1 parent f71512a
commit aec93e5
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 79 deletions.
diff --git a/components/lib/megamenu/MegaMenu.d.ts b/components/lib/megamenu/MegaMenu.d.ts
@@ -59,25 +59,25 @@ export interface MegaMenuPassThroughOptions {
      */
     root?: MegaMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the list's DOM element.
+     * Used to pass attributes to the root list's DOM element.
      */
-    menu?: MegaMenuPassThroughOptionType;
+    rootList?: MegaMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the list item's DOM element.
+     * Used to pass attributes to the  item's DOM element.
      */
-    menuitem?: MegaMenuPassThroughOptionType;
+    item?: MegaMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the content's DOM element.
+     * Used to pass attributes to the item content's DOM element.
      */
-    content?: MegaMenuPassThroughOptionType;
+    itemContent?: MegaMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the action's DOM element.
+     * Used to pass attributes to the item link's DOM element.
      */
-    action?: MegaMenuPassThroughOptionType;
+    itemLink?: MegaMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the icon's DOM element.
+     * Used to pass attributes to the item icon's DOM element.
      */
-    icon?: MegaMenuPassThroughOptionType;
+    itemIcon?: MegaMenuPassThroughOptionType;
     /**
      * Used to pass attributes to the label's DOM element.
      */
@@ -99,25 +99,25 @@ export interface MegaMenuPassThroughOptions {
      */
     column?: MegaMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the submenu header's DOM element.
+     * Used to pass attributes to the submenu item's DOM element.
      */
-    submenuHeader?: MegaMenuPassThroughOptionType;
+    submenuItem?: MegaMenuPassThroughOptionType;
     /**
      * Used to pass attributes to the submenu's DOM element.
      */
     submenu?: MegaMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the submenu label's DOM element.
+     * Used to pass attributes to the submenu item label's DOM element.
      */
-    submenuLabel?: MegaMenuPassThroughOptionType;
+    submenuItemLabel?: MegaMenuPassThroughOptionType;
     /**
      * Used to pass attributes to the separator's DOM element.
      */
     separator?: MegaMenuPassThroughOptionType;
     /**
      * Used to pass attributes to the mobile popup menu button's DOM element.
      */
-    menubutton?: MegaMenuPassThroughOptionType;
+    button?: MegaMenuPassThroughOptionType;
     /**
      * Used to pass attributes to the start of the component.
      */

diff --git a/components/lib/megamenu/MegaMenu.vue b/components/lib/megamenu/MegaMenu.vue
@@ -3,23 +3,23 @@
         <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
             <slot name="start"></slot>
         </div>
-        <slot :id="id" name="menubutton" :class="cx('menubutton')" :toggleCallback="(event) => menuButtonClick(event)">
+        <slot :id="id" :name="$slots.menubutton ? 'menubutton' : 'button'" :class="cx('button')" :toggleCallback="(event) => menuButtonClick(event)">
             <a
                 v-if="model && model.length > 0"
                 ref="menubutton"
                 role="button"
                 tabindex="0"
-                :class="cx('menubutton')"
+                :class="cx('button')"
                 :aria-haspopup="model.length && model.length > 0 ? true : false"
                 :aria-expanded="mobileActive"
                 :aria-controls="id"
                 :aria-label="$primevue.config.locale.aria?.navigation"
                 @click="menuButtonClick($event)"
                 @keydown="menuButtonKeydown($event)"
-                v-bind="ptm('menubutton')"
+                v-bind="ptm('button')"
             >
-                <slot name="menubuttonicon">
-                    <BarsIcon v-bind="ptm('menubuttonicon')" />
+                <slot :name="$slots.menubuttonicon ? 'menubuttonicon' : 'buttonicon'">
+                    <BarsIcon v-bind="ptm('buttonicon')" />
                 </slot>
             </a>
         </slot>
@@ -421,7 +421,7 @@ export default {
         onEnterKey(event) {
             if (this.focusedItemInfo.index !== -1) {
                 const element = DomHandler.findSingle(this.menubar, `li[id="${`${this.focusedItemId}`}"]`);
-                const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
+                const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="itemlink"]');
 
                 anchorElement ? anchorElement.click() : element && element.click();
 

diff --git a/components/lib/megamenu/MegaMenuSub.vue b/components/lib/megamenu/MegaMenuSub.vue
@@ -1,12 +1,12 @@
 <template>
-    <ul :class="level === 0 ? cx('menu') : cx('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
-        <li v-if="submenu" :class="[cx('submenuHeader', { submenu }), getItemProp(submenu, 'class')]" :style="getItemProp(submenu, 'style')" role="presentation" v-bind="ptm('submenuHeader')">{{ getItemLabel(submenu) }}</li>
+    <ul :class="level === 0 ? cx('rootList') : cx('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('rootList') : ptm('submenu')">
+        <li v-if="submenu" :class="[cx('submenuItem', { submenu }), getItemProp(submenu, 'class')]" :style="getItemProp(submenu, 'style')" role="presentation" v-bind="ptm('submenuItem')">{{ getItemLabel(submenu) }}</li>
         <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
             <li
                 v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
                 :id="getItemId(processedItem)"
                 :style="getItemProp(processedItem, 'style')"
-                :class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
+                :class="[cx('item', { processedItem }), getItemProp(processedItem, 'class')]"
                 role="menuitem"
                 :aria-label="getItemLabel(processedItem)"
                 :aria-disabled="isItemDisabled(processedItem) || undefined"
@@ -15,17 +15,19 @@
                 :aria-level="level + 1"
                 :aria-setsize="getAriaSetSize()"
                 :aria-posinset="getAriaPosInset(index)"
-                v-bind="getPTOptions(processedItem, index, 'menuitem')"
+                v-bind="getPTOptions(processedItem, index, 'item')"
                 :data-p-highlight="isItemActive(processedItem)"
                 :data-p-focused="isItemFocused(processedItem)"
                 :data-p-disabled="isItemDisabled(processedItem)"
             >
-                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
+                <div :class="cx('itemContent')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'itemContent')">
                     <template v-if="!templates.item">
-                        <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
-                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('icon')" />
-                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
-                            <span :class="level === 0 ? cx('label') : cx('submenuLabel')" v-bind="level === 0 ? getPTOptions(processedItem, index, 'label') : getPTOptions(processedItem, index, 'submenuLabel')">{{ getItemLabel(processedItem) }}</span>
+                        <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('itemLink')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'itemLink')">
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('itemIcon')" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('itemIcon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'itemIcon')" />
+                            <span :class="level === 0 ? cx('label') : cx('submenuItemLabel')" v-bind="level === 0 ? getPTOptions(processedItem, index, 'label') : getPTOptions(processedItem, index, 'submenuItemLabel')">
+                                {{ getItemLabel(processedItem) }}
+                            </span>
                             <template v-if="isItemGroup(processedItem)">
                                 <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
                                 <component v-else :is="horizontal || mobileActive ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
@@ -188,17 +190,17 @@ export default {
             return {
                 action: mergeProps(
                     {
-                        class: this.cx('action'),
+                        class: this.cx('itemLink'),
                         tabindex: -1,
                         'aria-hidden': true
                     },
-                    this.getPTOptions(processedItem, index, 'action')
+                    this.getPTOptions(processedItem, index, 'itemLink')
                 ),
                 icon: mergeProps(
                     {
-                        class: [this.cx('icon'), this.getItemProp(processedItem, 'icon')]
+                        class: [this.cx('itemIcon'), this.getItemProp(processedItem, 'icon')]
                     },
-                    this.getPTOptions(processedItem, index, 'icon')
+                    this.getPTOptions(processedItem, index, 'itemIcon')
                 ),
                 label: mergeProps(
                     {

diff --git a/components/lib/megamenu/style/MegaMenuStyle.js b/components/lib/megamenu/style/MegaMenuStyle.js
@@ -15,25 +15,25 @@ const classes = {
         }
     ],
     start: 'p-megamenu-start',
-    menubutton: 'p-megamenu-button',
-    menu: 'p-megamenu-root-list',
-    submenuHeader: ({ instance, processedItem }) => [
+    button: 'p-megamenu-button',
+    rootList: 'p-megamenu-root-list',
+    submenuItem: ({ instance, processedItem }) => [
         'p-megamenu-submenu-item',
         {
             'p-disabled': instance.isItemDisabled(processedItem)
         }
     ],
-    menuitem: ({ instance, processedItem }) => [
+    item: ({ instance, processedItem }) => [
         'p-megamenu-item',
         {
             'p-megamenu-item-active': instance.isItemActive(processedItem),
             'p-focus': instance.isItemFocused(processedItem),
             'p-disabled': instance.isItemDisabled(processedItem)
         }
     ],
-    content: 'p-megamenu-item-content',
-    action: 'p-megamenu-item-link',
-    icon: 'p-megamenu-item-icon',
+    itemContent: 'p-megamenu-item-content',
+    itemLink: 'p-megamenu-item-link',
+    itemIcon: 'p-megamenu-item-icon',
     label: 'p-megamenu-item-text',
     submenuIcon: 'p-megamenu-submenu-icon',
     panel: 'p-megamenu-panel',
@@ -70,7 +70,7 @@ const classes = {
         return columnClass;
     },
     submenu: 'p-megamenu-submenu',
-    submenuLabel: 'p-megamenu-submenu-item-label',
+    submenuItemLabel: 'p-megamenu-submenu-item-label',
     separator: 'p-megamenu-separator',
     end: 'p-megamenu-end'
 };

diff --git a/components/lib/menu/Menu.d.ts b/components/lib/menu/Menu.d.ts
@@ -63,27 +63,27 @@ export interface MenuPassThroughOptions {
     /**
      * Used to pass attributes to the list's DOM element.
      */
-    menu?: MenuPassThroughOptionType;
+    list?: MenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the submenu header's DOM element.
+     * Used to pass attributes to the submenu item's DOM element.
      */
-    submenuHeader?: MenuPassThroughOptionType;
+    submenuItem?: MenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the list item's DOM element.
+     * Used to pass attributes to the item's DOM element.
      */
-    menuitem?: MenuPassThroughOptionType;
+    item?: MenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the content's DOM element.
+     * Used to pass attributes to the item content's DOM element.
      */
-    content?: MenuPassThroughOptionType;
+    itemContent?: MenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the action's DOM element.
+     * Used to pass attributes to the item link's DOM element.
      */
-    action?: MenuPassThroughOptionType;
+    itemLink?: MenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the icon's DOM element.
+     * Used to pass attributes to the item icon's DOM element.
      */
-    icon?: MenuPassThroughOptionType;
+    itemIcon?: MenuPassThroughOptionType;
     /**
      * Used to pass attributes to the label's DOM element.
      */
@@ -300,7 +300,8 @@ export interface MenuSlots {
         class: any;
     }): VNode[];
     /**
-     * Custom item template.
+     * @deprecated since v4.0. Use submenuitem slot instead.
+     * Custom submenu header template.
      * @param {Object} scope - submenuheader slot's params.
      */
     submenuheader(scope: {
@@ -309,6 +310,16 @@ export interface MenuSlots {
          */
         item: MenuItem;
     }): VNode[];
+    /**
+     * Custom submenu item template.
+     * @param {Object} scope - submenuitem slot's params.
+     */
+    submenuitem(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+    }): VNode[];
 }
 
 /**

diff --git a/components/lib/menu/Menu.vue b/components/lib/menu/Menu.vue
@@ -8,7 +8,7 @@
                 <ul
                     :ref="listRef"
                     :id="id + '_list'"
-                    :class="cx('menu')"
+                    :class="cx('list')"
                     role="menu"
                     :tabindex="tabindex"
                     :aria-activedescendant="focused ? focusedOptionId : undefined"
@@ -17,12 +17,13 @@
                     @focus="onListFocus"
                     @blur="onListBlur"
                     @keydown="onListKeyDown"
-                    v-bind="ptm('menu')"
+                    v-bind="ptm('list')"
                 >
                     <template v-for="(item, i) of model" :key="label(item) + i.toString()">
                         <template v-if="item.items && visible(item) && !item.separator">
-                            <li v-if="item.items" :id="id + '_' + i" :class="[cx('submenuHeader'), item.class]" role="none" v-bind="ptm('submenuHeader')">
-                                <slot name="submenuheader" :item="item">{{ label(item) }}</slot>
+                            <li v-if="item.items" :id="id + '_' + i" :class="[cx('submenuItem'), item.class]" role="none" v-bind="ptm('submenuItem')">
+                                <!--TODO: submenuheader deprecated since v4.0. Use submenuitem-->
+                                <slot :name="$slots.submenuheader ? 'submenuheader' : 'submenuitem'" :item="item">{{ label(item) }}</slot>
                             </li>
                             <template v-for="(child, j) of item.items" :key="child.label + i + '_' + j">
                                 <PVMenuitem
@@ -205,12 +206,12 @@ export default {
             event.preventDefault();
         },
         onEndKey(event) {
-            this.changeFocusedOptionIndex(DomHandler.find(this.container, 'li[data-pc-section="menuitem"][data-p-disabled="false"]').length - 1);
+            this.changeFocusedOptionIndex(DomHandler.find(this.container, 'li[data-pc-section="item"][data-p-disabled="false"]').length - 1);
             event.preventDefault();
         },
         onEnterKey(event) {
             const element = DomHandler.findSingle(this.list, `li[id="${`${this.focusedOptionIndex}`}"]`);
-            const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
+            const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="itemlink"]');
 
             this.popup && DomHandler.focus(this.target);
             anchorElement ? anchorElement.click() : element && element.click();
@@ -221,19 +222,19 @@ export default {
             this.onEnterKey(event);
         },
         findNextOptionIndex(index) {
-            const links = DomHandler.find(this.container, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
+            const links = DomHandler.find(this.container, 'li[data-pc-section="item"][data-p-disabled="false"]');
             const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
 
             return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
         },
         findPrevOptionIndex(index) {
-            const links = DomHandler.find(this.container, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
+            const links = DomHandler.find(this.container, 'li[data-pc-section="item"][data-p-disabled="false"]');
             const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
 
             return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
         },
         changeFocusedOptionIndex(index) {
-            const links = DomHandler.find(this.container, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
+            const links = DomHandler.find(this.container, 'li[data-pc-section="item"][data-p-disabled="false"]');
             let order = index >= links.length ? links.length - 1 : index < 0 ? 0 : index;
 
             order > -1 && (this.focusedOptionIndex = links[order].getAttribute('id'));

diff --git a/components/lib/menu/Menuitem.vue b/components/lib/menu/Menuitem.vue
@@ -2,20 +2,20 @@
     <li
         v-if="visible()"
         :id="id"
-        :class="[cx('menuitem'), item.class]"
+        :class="[cx('item'), item.class]"
         role="menuitem"
         :style="item.style"
         :aria-label="label()"
         :aria-disabled="disabled()"
-        v-bind="getPTOptions('menuitem')"
+        v-bind="getPTOptions('item')"
         :data-p-focused="isItemFocused()"
         :data-p-disabled="disabled() || false"
     >
-        <div :class="cx('content')" @click="onItemClick($event)" @mousemove="onItemMouseMove($event)" v-bind="getPTOptions('content')">
+        <div :class="cx('itemContent')" @click="onItemClick($event)" @mousemove="onItemMouseMove($event)" v-bind="getPTOptions('itemContent')">
             <template v-if="!templates.item">
-                <a v-ripple :href="item.url" :class="cx('action')" :target="item.target" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action')">
-                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon')" />
-                    <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon')" />
+                <a v-ripple :href="item.url" :class="cx('itemLink')" :target="item.target" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('itemLink')">
+                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('itemIcon')" />
+                    <span v-else-if="item.icon" :class="[cx('itemIcon'), item.icon]" v-bind="getPTOptions('itemIcon')" />
                     <span :class="cx('label')" v-bind="getPTOptions('label')">{{ label() }}</span>
                 </a>
             </template>
@@ -82,17 +82,17 @@ export default {
             return {
                 action: mergeProps(
                     {
-                        class: this.cx('action'),
+                        class: this.cx('itemLink'),
                         tabindex: '-1',
                         'aria-hidden': true
                     },
-                    this.getPTOptions('action')
+                    this.getPTOptions('itemLink')
                 ),
                 icon: mergeProps(
                     {
-                        class: [this.cx('icon'), item.icon]
+                        class: [this.cx('itemIcon'), item.icon]
                     },
-                    this.getPTOptions('icon')
+                    this.getPTOptions('itemIcon')
                 ),
                 label: mergeProps(
                     {