diff --git a/api-generator/components/tieredmenu.js b/api-generator/components/tieredmenu.js index 3d76587ab..7d8b2c1e0 100644 --- a/api-generator/components/tieredmenu.js +++ b/api-generator/components/tieredmenu.js @@ -28,6 +28,12 @@ const TieredMenuProps = [ type: "boolean", default: "true", description: "Whether to automatically manage layering." + }, + { + name: "exact", + type: "boolean", + default: "true", + description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path." } ]; diff --git a/src/components/tieredmenu/TieredMenu.d.ts b/src/components/tieredmenu/TieredMenu.d.ts index cc07f9d13..cb5724f91 100755 --- a/src/components/tieredmenu/TieredMenu.d.ts +++ b/src/components/tieredmenu/TieredMenu.d.ts @@ -6,6 +6,7 @@ interface TieredMenuProps { appendTo?: string; autoZIndex?: boolean; baseZIndex?: number; + exact?: boolean; } declare class TieredMenu { diff --git a/src/components/tieredmenu/TieredMenu.vue b/src/components/tieredmenu/TieredMenu.vue index 8d6829062..274d63004 100755 --- a/src/components/tieredmenu/TieredMenu.vue +++ b/src/components/tieredmenu/TieredMenu.vue @@ -2,7 +2,7 @@
- +
@@ -36,6 +36,10 @@ export default { baseZIndex: { type: Number, default: 0 + }, + exact: { + type: Boolean, + default: true } }, target: null, diff --git a/src/components/tieredmenu/TieredMenuSub.vue b/src/components/tieredmenu/TieredMenuSub.vue index 0ad48dfe9..47f47dc67 100755 --- a/src/components/tieredmenu/TieredMenuSub.vue +++ b/src/components/tieredmenu/TieredMenuSub.vue @@ -4,13 +4,13 @@
  • + @leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" :exact="exact" />
  • @@ -53,6 +53,10 @@ export default { template: { type: Object, default: null + }, + exact: { + type: Boolean, + default: true } }, documentClickListener: null, @@ -200,8 +204,12 @@ export default { } ] }, - getLinkClass(item) { - return ['p-menuitem-link', {'p-disabled': this.disabled(item)}]; + linkClass(item, routerProps) { + return ['p-menuitem-link', { + 'p-disabled': this.disabled(item), + 'router-link-active': routerProps && routerProps.isActive, + 'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive + }]; }, bindDocumentClickListener() { if (!this.documentClickListener) { diff --git a/src/views/tieredmenu/TieredMenuDoc.vue b/src/views/tieredmenu/TieredMenuDoc.vue index 41b6cafb1..06ba69ab0 100755 --- a/src/views/tieredmenu/TieredMenuDoc.vue +++ b/src/views/tieredmenu/TieredMenuDoc.vue @@ -182,6 +182,18 @@ toggle(event) { </template> </TieredMenu> + + +

    router-link with route configuration can also be used within templating for further customization.

    +
    
     
    Properties
    @@ -226,6 +238,12 @@ toggle(event) { boolean true Whether to automatically manage layering. + + + exact + boolean + true + Whether to apply 'router-link-active-exact' class if route exactly matches the item path.