#1275 for ContextMenu

api-generator/components/contextmenu.js

@@ -28,6 +28,12 @@ const ContextMenuProps = [
         type: "boolean",
         default: "false",
         description: "Attaches the menu to document instead of a particular item."
+    },
+    {
+        name: "exact",
+        type: "boolean",
+        default: "true",
+        description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
     }
 ];
 

src/components/contextmenu/ContextMenu.d.ts

@@ -6,6 +6,7 @@ interface ContextMenuProps {
     autoZIndex?: boolean;
     baseZIndex?: number;
     global?: boolean;
+    exact?: boolean;
 }
 
 declare class ContextMenu {

src/components/contextmenu/ContextMenu.vue

@@ -2,7 +2,7 @@
     <Teleport :to="appendTo">
         <transition name="p-contextmenu" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
             <div :ref="containerRef" :class="containerClass" v-if="visible" v-bind="$attrs">
-                <ContextMenuSub :model="model" :root="true" @leaf-click="onLeafClick" :template="$slots.item"/>
+                <ContextMenuSub :model="model" :root="true" @leaf-click="onLeafClick" :template="$slots.item" :exact="exact" />
             </div>
         </transition>
     </Teleport>
@@ -35,6 +35,10 @@ export default {
         global: {
             type: Boolean,
             default: false
+        },
+        exact: {
+            type: Boolean,
+            default: true
         }
     },
     target: null,

src/components/contextmenu/ContextMenuSub.vue

@@ -5,13 +5,13 @@
                 <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator"
                     @mouseenter="onItemMouseEnter($event, item)">
                     <template v-if="!template">
-                        <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href}">
-                            <a :href="href" @click="onItemClick($event, item, navigate)" :class="getLinkClass(item)" v-ripple role="menuitem">
+                        <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
+                            <a :href="href" @click="onItemClick($event, item, navigate)" :class="linkClass(item, {isActive, isExactActive})" v-ripple role="menuitem">
                                 <span :class="['p-menuitem-icon', item.icon]"></span>
                                 <span class="p-menuitem-text">{{item.label}}</span>
                             </a>
                         </router-link>
-                        <a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onItemClick($event, item)" v-ripple
+                        <a v-else :href="item.url" :class="linkClass(item)" :target="item.target" @click="onItemClick($event, item)" v-ripple
                             :aria-haspopup="item.items != null" :aria-expanded="item === activeItem" role="menuitem" :tabindex="disabled(item) ? null : '0'">
                             <span :class="['p-menuitem-icon', item.icon]"></span>
                             <span class="p-menuitem-text">{{item.label}}</span>
@@ -20,7 +20,7 @@
                     </template>
                     <component v-else :is="template" :item="item"></component>
                     <ContextMenuSub :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" :template="template"
-                        @leaf-click="onLeafClick" :parentActive="item === activeItem" />
+                        @leaf-click="onLeafClick" :parentActive="item === activeItem" :exact="exact" />
                 </li>
                 <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
             </template>
@@ -51,6 +51,10 @@ export default {
         template: {
             type: Object,
             default: null
+        },
+        exact: {
+            type: Boolean,
+            default: true
         }
     },
     watch: {
@@ -132,8 +136,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
+            }];
         },
         visible(item) {
             return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);

src/views/contextmenu/ContextMenuDoc.vue

@@ -194,6 +194,18 @@ export default {
     </template>
 </ContextMenu>
 </template>
+</code></pre>
+
+<p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
+<pre v-code><code><template v-pre>
+&lt;ContextMenu :model="items"&gt;
+    &lt;template #item="{item}"&gt;
+        &lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
+            &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt;
+        &lt;/router-link&gt;
+    &lt;/template&gt;
+&lt;/ContextMenu&gt;
+</template>
 </code></pre>
 
         <h5>Properties</h5>
@@ -238,6 +250,12 @@ export default {
                         <td>boolean</td>
                         <td>false</td>
                         <td>Attaches the menu to document instead of a particular item.</td>
+                    </tr>
+                    <tr>
+                        <td>exact</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
                     </tr>
 				</tbody>
 			</table>