vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-10 17:32:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fixed #4862 - MegaMenu / Menubar: menubutton templating

Browse source
This commit is contained in:
tugcekucukoglu 2023-11-22 13:36:31 +03:00
parent dd2f455683
commit 7d86b48f28
4 changed files with 93 additions and 42 deletions
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; hasSubmenu: boolean;
}): VNode[]; }): 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. * Custom submenu icon template.
* @param {Object} scope - submenuicon slot's params. * @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')"> <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
<slot name="start"></slot> <slot name="start"></slot>
</div> </div>
<a <slot :id="id" name="menubutton" :class="cx('menubutton')" :toggleCallback="(event) => menuButtonClick(event)">
v-if="model && model.length > 0" <a
ref="menubutton" v-if="model && model.length > 0"
role="button" ref="menubutton"
tabindex="0" role="button"
:class="cx('menubutton')" tabindex="0"
:aria-haspopup="model.length && model.length > 0 ? true : false" :class="cx('menubutton')"
:aria-expanded="mobileActive" :aria-haspopup="model.length && model.length > 0 ? true : false"
:aria-controls="id" :aria-expanded="mobileActive"
:aria-label="$primevue.config.locale.aria?.navigation" :aria-controls="id"
@click="menuButtonClick($event)" :aria-label="$primevue.config.locale.aria?.navigation"
@keydown="menuButtonKeydown($event)" @click="menuButtonClick($event)"
v-bind="ptm('menubutton')" @keydown="menuButtonKeydown($event)"
> v-bind="ptm('menubutton')"
<slot name="menubuttonicon"> >
<BarsIcon v-bind="ptm('menubuttonicon')" /> <slot name="menubuttonicon">
</slot> <BarsIcon v-bind="ptm('menubuttonicon')" />
</a> </slot>
</a>
</slot>
<MegaMenuSub <MegaMenuSub
:ref="menubarRef" :ref="menubarRef"
:id="id + '_list'" :id="id + '_list'"

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

@ -83,13 +83,13 @@ export interface MenubarPassThroughOptions {
*/ */
separator?: MenubarPassThroughOptionType; 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; 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. * Used to pass attributes to the submenu's DOM element.
*/ */
@ -305,10 +305,34 @@ export interface MenubarSlots {
*/ */
hasSubmenu: boolean; hasSubmenu: boolean;
}): VNode[]; }): 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. * Custom popup icon template on responsive mode.
* @deprecated since v3.42.0. Use 'menubuttonicon' slot instead.
*/ */
popupicon(): VNode[]; popupicon(): VNode[];
/**
* Custom menu button icon template on responsive mode.
*/
menubuttonicon(): VNode[];
/** /**
* Custom submenu icon template. * Custom submenu icon template.
* @param {Object} scope - submenuicon slot's params. * @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')"> <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
<slot name="start"></slot> <slot name="start"></slot>
</div> </div>
<a <slot :id="id" name="menubutton" :class="cx('button')" :toggleCallback="(event) => menuButtonClick(event)">
v-if="model && model.length > 0" <a
ref="menubutton" v-if="model && model.length > 0"
role="button" ref="menubutton"
tabindex="0" role="button"
:class="cx('button')" tabindex="0"
:aria-haspopup="model.length && model.length > 0 ? true : false" :class="cx('button')"
:aria-expanded="mobileActive" :aria-haspopup="model.length && model.length > 0 ? true : false"
:aria-controls="id" :aria-expanded="mobileActive"
:aria-label="$primevue.config.locale.aria?.navigation" :aria-controls="id"
@click="menuButtonClick($event)" :aria-label="$primevue.config.locale.aria?.navigation"
@keydown="menuButtonKeydown($event)" @click="menuButtonClick($event)"
v-bind="{ ...buttonProps, ...ptm('button') }" @keydown="menuButtonKeydown($event)"
> v-bind="{ ...buttonProps, ...ptm('button') }"
<slot name="popupicon"> >
<BarsIcon v-bind="ptm('popupIcon')" /> <slot name="menubuttonicon">
</slot> <BarsIcon v-bind="ptm('menubuttonicon')" />
</a> </slot>
</a>
</slot>
<MenubarSub <MenubarSub
:ref="menubarRef" :ref="menubarRef"
:id="id" :id="id"
@ -422,10 +424,10 @@ export default {
bindOutsideClickListener() { bindOutsideClickListener() {
if (!this.outsideClickListener) { if (!this.outsideClickListener) {
this.outsideClickListener = (event) => { this.outsideClickListener = (event) => {
const isOutsideContainer = this.menubar && !this.menubar.contains(event.target); const isOutsideContainer = this.container && !this.container.contains(event.target);
const isOutsideMenuButton = this.mobileActive && this.$refs.menubutton ? this.$refs.menubutton !== event.target && !this.$refs.menubutton.contains(event.target) : true; const isOutsideTarget = !(this.target && (this.target === event.target || this.target.contains(event.target)));
if (isOutsideMenuButton && isOutsideContainer) { if (isOutsideContainer && isOutsideTarget) {
this.hide(); this.hide();
} }
}; };