diff --git a/components/lib/contextmenu/ContextMenu.d.ts b/components/lib/contextmenu/ContextMenu.d.ts index c262e1347..e23c66909 100755 --- a/components/lib/contextmenu/ContextMenu.d.ts +++ b/components/lib/contextmenu/ContextMenu.d.ts @@ -20,6 +20,7 @@ export declare type ContextMenuPassThroughOptionType = ContextMenuPassThroughAtt export interface ContextMenuPassThroughMethodOptions { props: ContextMenuProps; state: ContextMenuState; + options: ContextMenuOptions; } /** @@ -125,6 +126,22 @@ export interface ContextMenuState { submenuVisible: boolean; } +/** + * Defines current options in ContextMenu component. + */ +export interface ContextMenuOptions { + /** + * Current active state of menuitem as a boolean. + * @defaultValue false + */ + active: boolean; + /** + * Current focused state of menuitem as a boolean. + * @defaultValue false + */ + focused: boolean; +} + /** * Defines valid properties in ContextMenu component. */ diff --git a/components/lib/contextmenu/ContextMenuSub.vue b/components/lib/contextmenu/ContextMenuSub.vue index f1963f7ca..d4aab6021 100755 --- a/components/lib/contextmenu/ContextMenuSub.vue +++ b/components/lib/contextmenu/ContextMenuSub.vue @@ -15,24 +15,41 @@ :aria-level="level + 1" :aria-setsize="getAriaSetSize()" :aria-posinset="getAriaPosInset(index)" - v-bind="ptm('menuitem')" + v-bind="getPTOptions(processedItem, 'menuitem')" > -
+
@@ -130,6 +147,14 @@ export default { getItemLabel(processedItem) { return this.getItemProp(processedItem, 'label'); }, + getPTOptions(processedItem, key) { + return this.ptm(key, { + options: { + active: this.isItemActive(processedItem), + focused: this.isItemFocused(processedItem) + } + }); + }, isItemActive(processedItem) { return this.activeItemPath.some((path) => path.key === processedItem.key); }, diff --git a/components/lib/megamenu/MegaMenu.d.ts b/components/lib/megamenu/MegaMenu.d.ts index 754c73596..3a0e776f7 100755 --- a/components/lib/megamenu/MegaMenu.d.ts +++ b/components/lib/megamenu/MegaMenu.d.ts @@ -19,6 +19,7 @@ export declare type MegaMenuPassThroughOptionType = MegaMenuPassThroughAttribute export interface MegaMenuPassThroughMethodOptions { props: MegaMenuProps; state: MegaMenuState; + options: MegaMenuOptions; } /** @@ -138,6 +139,22 @@ export interface MegaMenuState { activeItem: MenuItem; } +/** + * Defines current options in MegaMenu component. + */ +export interface MegaMenuOptions { + /** + * Current active state of menuitem as a boolean. + * @defaultValue false + */ + active: boolean; + /** + * Current focused state of menuitem as a boolean. + * @defaultValue false + */ + focused: boolean; +} + /** * Defines valid properties in MegaMenu component. */ diff --git a/components/lib/megamenu/MegaMenuSub.vue b/components/lib/megamenu/MegaMenuSub.vue index b28467800..20c288345 100644 --- a/components/lib/megamenu/MegaMenuSub.vue +++ b/components/lib/megamenu/MegaMenuSub.vue @@ -15,24 +15,33 @@ :aria-level="level + 1" :aria-setsize="getAriaSetSize()" :aria-posinset="getAriaPosInset(index)" - v-bind="ptm('menuitem')" + v-bind="getPTOptions(processedItem, 'menuitem')" > -
+
@@ -142,6 +151,14 @@ export default { getItemLabel(processedItem) { return this.getItemProp(processedItem, 'label'); }, + getPTOptions(processedItem, key) { + return this.ptm(key, { + options: { + active: this.isItemActive(processedItem), + focused: this.isItemFocused(processedItem) + } + }); + }, isItemActive(processedItem) { return ObjectUtils.isNotEmpty(this.activeItem) ? this.activeItem.key === processedItem.key : false; }, diff --git a/components/lib/menu/Menuitem.vue b/components/lib/menu/Menuitem.vue index d699ec354..829eabab4 100644 --- a/components/lib/menu/Menuitem.vue +++ b/components/lib/menu/Menuitem.vue @@ -1,18 +1,18 @@