Skip to content

Commit dd62fbd

Browse files
tugcekucukoglutugcekucukoglu
committed
Menu router demo updates
1 parent 3418204 commit dd62fbd

File tree

5 files changed

+99
-18
lines changed

5 files changed

+99
-18
lines changed

‎doc/contextmenu/RouterDoc.vue

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<ContextMenu ref="routemenu" :model="items">
1111
<template #item="{ label, item, props }">
1212
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
13-
<a :href="routerProps.href" v-bind="props.action">
13+
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
1414
<span v-bind="props.icon" />
1515
<span v-bind="props.label">{{ label }}</span>
1616
</a>
@@ -42,13 +42,39 @@ export default {
4242
code: {
4343
basic: `
4444
<img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
45-
<ContextMenu ref="routemenu" :model="items" />
45+
<ContextMenu ref="routemenu" :model="items">
46+
<template #item="{ label, item, props }">
47+
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
48+
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
49+
<span v-bind="props.icon" />
50+
<span v-bind="props.label">{{ label }}</span>
51+
</a>
52+
</router-link>
53+
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
54+
<span v-bind="props.icon" />
55+
<span v-bind="props.label">{{ label }}</span>
56+
</a>
57+
</template>
58+
</ContextMenu>
4659
`,
4760
options: `
4861
<template>
4962
<div class="card flex md:justify-content-center">
5063
<img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
51-
<ContextMenu ref="routemenu" :model="items" />
64+
<ContextMenu ref="routemenu" :model="items">
65+
<template #item="{ label, item, props }">
66+
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
67+
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
68+
<span v-bind="props.icon" />
69+
<span v-bind="props.label">{{ label }}</span>
70+
</a>
71+
</router-link>
72+
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
73+
<span v-bind="props.icon" />
74+
<span v-bind="props.label">{{ label }}</span>
75+
</a>
76+
</template>
77+
</ContextMenu>
5278
</div>
5379
</template>
5480
@@ -79,7 +105,20 @@ export default {
79105
<template>
80106
<div class="card">
81107
<img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
82-
<ContextMenu ref="routemenu" :model="items" />
108+
<ContextMenu ref="routemenu" :model="items">
109+
<template #item="{ label, item, props }">
110+
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
111+
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
112+
<span v-bind="props.icon" />
113+
<span v-bind="props.label">{{ label }}</span>
114+
</a>
115+
</router-link>
116+
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
117+
<span v-bind="props.icon" />
118+
<span v-bind="props.label">{{ label }}</span>
119+
</a>
120+
</template>
121+
</ContextMenu>
83122
</div>
84123
</template>
85124

‎doc/megamenu/RouterDoc.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<MegaMenu :model="items">
1010
<template #item="{ label, item, props, hasSubmenu }">
1111
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
12-
<a :href="routerProps.href" v-bind="props.action">
12+
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
1313
<span v-bind="props.icon" />
1414
<span v-bind="props.label">{{ label }}</span>
1515
</a>
@@ -155,7 +155,7 @@ export default {
155155
<MegaMenu :model="items">
156156
<template #item="{ label, item, props, hasSubmenu }">
157157
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
158-
<a :href="routerProps.href" v-bind="props.action">
158+
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
159159
<span v-bind="props.icon" />
160160
<span v-bind="props.label">{{ label }}</span>
161161
</a>
@@ -174,7 +174,7 @@ export default {
174174
<MegaMenu :model="items">
175175
<template #item="{ label, item, props, hasSubmenu }">
176176
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
177-
<a :href="routerProps.href" v-bind="props.action">
177+
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
178178
<span v-bind="props.icon" />
179179
<span v-bind="props.label">{{ label }}</span>
180180
</a>
@@ -325,7 +325,7 @@ export default {
325325
<MegaMenu :model="items">
326326
<template #item="{ label, item, props, hasSubmenu }">
327327
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
328-
<a :href="routerProps.href" v-bind="props.action">
328+
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
329329
<span v-bind="props.icon" />
330330
<span v-bind="props.label">{{ label }}</span>
331331
</a>

‎doc/menu/RouterDoc.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export default {
7070
<Menu :model="items">
7171
<template #item="{ label, item, props }">
7272
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
73-
<a :href="routerProps.href" v-bind="props.action">
73+
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
7474
<span v-bind="props.icon" />
7575
<span v-bind="props.label">{{ label }}</span>
7676
</a>
@@ -88,7 +88,7 @@ export default {
8888
<Menu :model="items">
8989
<template #item="{ label, item, props }">
9090
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
91-
<a :href="routerProps.href" v-bind="props.action">
91+
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
9292
<span v-bind="props.icon" />
9393
<span v-bind="props.label">{{ label }}</span>
9494
</a>

‎doc/menubar/RouterDoc.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<Menubar :model="items">
1010
<template #item="{ label, item, props, root, hasSubmenu }">
1111
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
12-
<a :href="routerProps.href" v-bind="props.action">
12+
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
1313
<span v-bind="props.icon" />
1414
<span v-bind="props.label">{{ label }}</span>
1515
</a>
@@ -162,7 +162,7 @@ export default {
162162
<Menubar :model="items">
163163
<template #item="{ label, item, props, root, hasSubmenu }">
164164
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
165-
<a :href="routerProps.href" v-bind="props.action">
165+
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
166166
<span v-bind="props.icon" />
167167
<span v-bind="props.label">{{ label }}</span>
168168
</a>
@@ -181,7 +181,7 @@ export default {
181181
<Menubar :model="items">
182182
<template #item="{ label, item, props, root, hasSubmenu }">
183183
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
184-
<a :href="routerProps.href" v-bind="props.action">
184+
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
185185
<span v-bind="props.icon" />
186186
<span v-bind="props.label">{{ label }}</span>
187187
</a>
@@ -339,7 +339,7 @@ export default {
339339
<Menubar :model="items">
340340
<template #item="{ label, item, props, root, hasSubmenu }">
341341
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
342-
<a :href="routerProps.href" v-bind="props.action">
342+
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
343343
<span v-bind="props.icon" />
344344
<span v-bind="props.label">{{ label }}</span>
345345
</a>

‎doc/tieredmenu/RouterDoc.vue

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<TieredMenu :model="items">
1010
<template #item="{ label, item, props, hasSubmenu }">
1111
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
12-
<a :href="routerProps.href" v-bind="props.action">
12+
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)">
1313
<span v-bind="props.icon" />
1414
<span v-bind="props.label">{{ label }}</span>
1515
</a>
@@ -162,12 +162,40 @@ export default {
162162
],
163163
code: {
164164
basic: `
165-
<TieredMenu :model="items" />
165+
<TieredMenu :model="items">
166+
<template #item="{ label, item, props, hasSubmenu }">
167+
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
168+
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)">
169+
<span v-bind="props.icon" />
170+
<span v-bind="props.label">{{ label }}</span>
171+
</a>
172+
</router-link>
173+
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
174+
<span v-bind="props.icon" />
175+
<span v-bind="props.label">{{ label }}</span>
176+
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-right" v-bind="props.submenuicon" />
177+
</a>
178+
</template>
179+
</TieredMenu>
166180
`,
167181
options: `
168182
<template>
169183
<div class="card flex justify-content-center">
170-
<TieredMenu :model="items" />
184+
<TieredMenu :model="items">
185+
<template #item="{ label, item, props, hasSubmenu }">
186+
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
187+
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)">
188+
<span v-bind="props.icon" />
189+
<span v-bind="props.label">{{ label }}</span>
190+
</a>
191+
</router-link>
192+
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
193+
<span v-bind="props.icon" />
194+
<span v-bind="props.label">{{ label }}</span>
195+
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-right" v-bind="props.submenuicon" />
196+
</a>
197+
</template>
198+
</TieredMenu>
171199
</div>
172200
</template>
173201
@@ -314,7 +342,21 @@ export default {
314342
composition: `
315343
<template>
316344
<div class="card flex justify-content-center">
317-
<TieredMenu :model="items" />
345+
<TieredMenu :model="items">
346+
<template #item="{ label, item, props, hasSubmenu }">
347+
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
348+
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)">
349+
<span v-bind="props.icon" />
350+
<span v-bind="props.label">{{ label }}</span>
351+
</a>
352+
</router-link>
353+
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
354+
<span v-bind="props.icon" />
355+
<span v-bind="props.label">{{ label }}</span>
356+
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-right" v-bind="props.submenuicon" />
357+
</a>
358+
</template>
359+
</TieredMenu>
318360
</div>
319361
</template>
320362

0 commit comments

Comments
 (0)