vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #4862 - MegaMenu / Menubar: menubutton templating

pull/4864/head
tugcekucukoglu 2023-11-22 13:36:31 +03:00
parent dd2f455683
commit 7d86b48f28
4 changed files with 93 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
components/lib/megamenu/MegaMenu.d.ts vendored
View File

@ -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.

38
components/lib/megamenu/MegaMenu.vue
View File

@ -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'"

30
components/lib/menubar/Menubar.d.ts vendored
View File

@ -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.

44
components/lib/menubar/Menubar.vue
View File

@ -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();
}
};