Skip to content

Commit

Permalink
Menu router demo updates
Browse files Browse the repository at this point in the history
  • Loading branch information
tugcekucukoglu committed Oct 16, 2023
1 parent 3418204 commit dd62fbd
Show file tree
Hide file tree
Showing 5 changed files with 99 additions and 18 deletions.
47 changes: 43 additions & 4 deletions doc/contextmenu/RouterDoc.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<ContextMenu ref="routemenu" :model="items">
<template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
Expand Down Expand Up @@ -42,13 +42,39 @@ export default {
code: {
basic: `
<img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
<ContextMenu ref="routemenu" :model="items" />
<ContextMenu ref="routemenu" :model="items">
<template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</template>
</ContextMenu>
`,
options: `
<template>
<div class="card flex md:justify-content-center">
<img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
<ContextMenu ref="routemenu" :model="items" />
<ContextMenu ref="routemenu" :model="items">
<template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</template>
</ContextMenu>
</div>
</template>
Expand Down Expand Up @@ -79,7 +105,20 @@ export default {
<template>
<div class="card">
<img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
<ContextMenu ref="routemenu" :model="items" />
<ContextMenu ref="routemenu" :model="items">
<template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</template>
</ContextMenu>
</div>
</template>
Expand Down
8 changes: 4 additions & 4 deletions doc/megamenu/RouterDoc.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<MegaMenu :model="items">
<template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
Expand Down Expand Up @@ -155,7 +155,7 @@ export default {
<MegaMenu :model="items">
<template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
Expand All @@ -174,7 +174,7 @@ export default {
<MegaMenu :model="items">
<template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
Expand Down Expand Up @@ -325,7 +325,7 @@ export default {
<MegaMenu :model="items">
<template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
Expand Down
4 changes: 2 additions & 2 deletions doc/menu/RouterDoc.vue
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export default {
<Menu :model="items">
<template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
Expand All @@ -88,7 +88,7 @@ export default {
<Menu :model="items">
<template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
Expand Down
8 changes: 4 additions & 4 deletions doc/menubar/RouterDoc.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<Menubar :model="items">
<template #item="{ label, item, props, root, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
Expand Down Expand Up @@ -162,7 +162,7 @@ export default {
<Menubar :model="items">
<template #item="{ label, item, props, root, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
Expand All @@ -181,7 +181,7 @@ export default {
<Menubar :model="items">
<template #item="{ label, item, props, root, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
Expand Down Expand Up @@ -339,7 +339,7 @@ export default {
<Menubar :model="items">
<template #item="{ label, item, props, root, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
Expand Down
50 changes: 46 additions & 4 deletions doc/tieredmenu/RouterDoc.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<TieredMenu :model="items">
<template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action">
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
Expand Down Expand Up @@ -162,12 +162,40 @@ export default {
],
code: {
basic: `
<TieredMenu :model="items" />
<TieredMenu :model="items">
<template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-right" v-bind="props.submenuicon" />
</a>
</template>
</TieredMenu>
`,
options: `
<template>
<div class="card flex justify-content-center">
<TieredMenu :model="items" />
<TieredMenu :model="items">
<template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-right" v-bind="props.submenuicon" />
</a>
</template>
</TieredMenu>
</div>
</template>
Expand Down Expand Up @@ -314,7 +342,21 @@ export default {
composition: `
<template>
<div class="card flex justify-content-center">
<TieredMenu :model="items" />
<TieredMenu :model="items">
<template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-right" v-bind="props.submenuicon" />
</a>
</template>
</TieredMenu>
</div>
</template>
Expand Down

0 comments on commit dd62fbd

Please sign in to comment.