Fixed #4862 - MegaMenu / Menubar: menubutton templating

primefaces · Nov 22, 2023 · 7d86b48 · 7d86b48
1 parent dd2f455
commit 7d86b48
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 42 deletions.
diff --git a/components/lib/megamenu/MegaMenu.d.ts b/components/lib/megamenu/MegaMenu.d.ts
@@ -318,6 +318,29 @@ export interface MegaMenuSlots {
          */
         hasSubmenu: boolean;
     }): VNode[];
+    /**
+     * Custom menu button template on responsive mode.
+     * @param {Object} scope - menu button slot's params.
+     */
+    menubutton(scope: {
+        /**
+         * Current id state as a string
+         */
+        id: string;
+        /**
+         * Style class of component
+         */
+        class: string;
+        /**
+         *
+         * Toggle event
+         */
+        toggleCallback: () => void;
+    }): VNode[];
+    /**
+     * Custom menu button icon template on responsive mode.
+     */
+    menubuttonicon(): VNode[];
     /**
      * Custom submenu icon template.
      * @param {Object} scope - submenuicon slot's params.

diff --git a/components/lib/megamenu/MegaMenu.vue b/components/lib/megamenu/MegaMenu.vue
@@ -3,24 +3,26 @@
         <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
             <slot name="start"></slot>
         </div>
-        <a
-            v-if="model && model.length > 0"
-            ref="menubutton"
-            role="button"
-            tabindex="0"
-            :class="cx('menubutton')"
-            :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')"
-        >
-            <slot name="menubuttonicon">
-                <BarsIcon v-bind="ptm('menubuttonicon')" />
-            </slot>
-        </a>
+        <slot :id="id" name="menubutton" :class="cx('menubutton')" :toggleCallback="(event) => menuButtonClick(event)">
+            <a
+                v-if="model && model.length > 0"
+                ref="menubutton"
+                role="button"
+                tabindex="0"
+                :class="cx('menubutton')"
+                :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')"
+            >
+                <slot name="menubuttonicon">
+                    <BarsIcon v-bind="ptm('menubuttonicon')" />
+                </slot>
+            </a>
+        </slot>
         <MegaMenuSub
             :ref="menubarRef"
             :id="id + '_list'"

diff --git a/components/lib/menubar/Menubar.d.ts b/components/lib/menubar/Menubar.d.ts
@@ -83,13 +83,13 @@ export interface MenubarPassThroughOptions {
      */
     separator?: MenubarPassThroughOptionType;
     /**
-     * Used to pass attributes to the mobile popup menu button's DOM element.
+     * Used to pass attributes to the mobile menu button's DOM element.
      */
     button?: MenubarPassThroughOptionType;
     /**
-     * Used to pass attributes to the mobile popup menu button icon's DOM element.
+     * Used to pass attributes to the mobile menu button icon's DOM element.
      */
-    popupIcon?: MenubarPassThroughOptionType;
+    menubuttonicon?: MenubarPassThroughOptionType;
     /**
      * Used to pass attributes to the submenu's DOM element.
      */
@@ -305,10 +305,34 @@ export interface MenubarSlots {
          */
         hasSubmenu: boolean;
     }): VNode[];
+    /**
+     * Custom menu button template on responsive mode.
+     * @param {Object} scope - menu button slot's params.
+     */
+    menubutton(scope: {
+        /**
+         * Current id state as a string
+         */
+        id: string;
+        /**
+         * Style class of component
+         */
+        class: string;
+        /**
+         *
+         * Toggle event
+         */
+        toggleCallback: () => void;
+    }): VNode[];
     /**
      * Custom popup icon template on responsive mode.
+     * @deprecated since v3.42.0. Use 'menubuttonicon' slot instead.
      */
     popupicon(): VNode[];
+    /**
+     * Custom menu button icon template on responsive mode.
+     */
+    menubuttonicon(): VNode[];
     /**
      * Custom submenu icon template.
      * @param {Object} scope - submenuicon slot's params.

diff --git a/components/lib/menubar/Menubar.vue b/components/lib/menubar/Menubar.vue
@@ -3,24 +3,26 @@
         <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
             <slot name="start"></slot>
         </div>
-        <a
-            v-if="model && model.length > 0"
-            ref="menubutton"
-            role="button"
-            tabindex="0"
-            :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="{ ...buttonProps, ...ptm('button') }"
-        >
-            <slot name="popupicon">
-                <BarsIcon v-bind="ptm('popupIcon')" />
-            </slot>
-        </a>
+        <slot :id="id" name="menubutton" :class="cx('button')" :toggleCallback="(event) => menuButtonClick(event)">
+            <a
+                v-if="model && model.length > 0"
+                ref="menubutton"
+                role="button"
+                tabindex="0"
+                :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="{ ...buttonProps, ...ptm('button') }"
+            >
+                <slot name="menubuttonicon">
+                    <BarsIcon v-bind="ptm('menubuttonicon')" />
+                </slot>
+            </a>
+        </slot>
         <MenubarSub
             :ref="menubarRef"
             :id="id"
@@ -422,10 +424,10 @@ export default {
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
-                    const isOutsideContainer = this.menubar && !this.menubar.contains(event.target);
-                    const isOutsideMenuButton = this.mobileActive && this.$refs.menubutton ? this.$refs.menubutton !== event.target && !this.$refs.menubutton.contains(event.target) : true;
+                    const isOutsideContainer = this.container && !this.container.contains(event.target);
+                    const isOutsideTarget = !(this.target && (this.target === event.target || this.target.contains(event.target)));
 
-                    if (isOutsideMenuButton && isOutsideContainer) {
+                    if (isOutsideContainer && isOutsideTarget) {
                         this.hide();
                     }
                 };