vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #286 - Function support for MenuModel visible prop

pull/310/head
cagataycivici 2020-04-23 10:13:53 +03:00
parent 8050d97829
commit df9cada044
12 changed files with 127 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/assets/styles/app.scss
View File

@ -85,7 +85,7 @@ body {
background-color: #ffffff; background-color: #ffffff;
font-family: "Open Sans", "Helvetica Neue", sans-serif; font-family: "Open Sans", "Helvetica Neue", sans-serif;
font-weight: normal; font-weight: normal;
color: #484848; color: #252525;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
font-size: 14px; font-size: 14px;
@ -220,7 +220,7 @@ a {
.menu-button { .menu-button {
display: none; display: none;
color: #484848; color: #252525;
font-size: 24px; font-size: 24px;
position: absolute; position: absolute;
left: 0; left: 0;
@ -271,7 +271,7 @@ a {
> a { > a {
text-decoration: none; text-decoration: none;
color: #484848; color: #252525;
min-width: 120px; min-width: 120px;
font-size: 16px; font-size: 16px;
display: inline-block; display: inline-block;
@ -329,7 +329,7 @@ a {
a { a {
text-decoration: none; text-decoration: none;
color: #484848; color: #252525;
padding: 6px 12px; padding: 6px 12px;
display: block; display: block;
user-select: none; user-select: none;
@ -479,7 +479,7 @@ a {
border-radius: 4px; border-radius: 4px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
font-size: 14px; font-size: 14px;
color: #484848; color: #252525;
transition: background-color .2s; transition: background-color .2s;
&:hover { &:hover {
@ -575,7 +575,7 @@ a {
border-radius: 3px; border-radius: 3px;
background-color: #ffffff; background-color: #ffffff;
padding: 2px 4px; padding: 2px 4px;
color: #484848; color: #252525;
} }
} }
} }
@ -665,7 +665,7 @@ a {
border-top: 1px solid #dadada; border-top: 1px solid #dadada;
h3 { h3 {
color: #484848; color: #252525;
margin-top: 25px; margin-top: 25px;
margin-bottom: 0px; margin-bottom: 0px;
font-size: 22px; font-size: 22px;
@ -679,7 +679,7 @@ a {
} }
p { p {
color: #484848; color: #252525;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
margin: 10px 0; margin: 10px 0;
@ -787,14 +787,14 @@ a {
.p-tabview-panels { .p-tabview-panels {
background: transparent; background: transparent;
border: 0 none; border: 0 none;
color: #484848; color: #252525;
} }
} }
} }
&.support { &.support {
.support-image { .support-image {
background-color: #484848; background-color: #252525;
padding: 30px; padding: 30px;
color: #ffffff; color: #ffffff;
text-align: left; text-align: left;
@ -1009,7 +1009,7 @@ a {
.free-themes { .free-themes {
padding: 2em; padding: 2em;
color: #484848; color: #252525;
background-color: #ffffff; background-color: #ffffff;
p { p {
@ -1194,7 +1194,7 @@ a {
h3 { h3 {
font-size:24px; font-size:24px;
color: #484848; color: #252525;
padding: 30px 0 12px 0; padding: 30px 0 12px 0;
margin: 0; margin: 0;
} }
@ -1227,14 +1227,14 @@ a {
margin-bottom: 2em; margin-bottom: 2em;
&.features-tagline { &.features-tagline {
color: #484848; color: #252525;
margin-bottom: 0; margin-bottom: 0;
margin-top: -5px; margin-top: -5px;
margin-bottom: 2em; margin-bottom: 2em;
} }
&.features-description { &.features-description {
color: #484848; color: #252525;
text-align: left; text-align: left;
} }
@ -1283,7 +1283,7 @@ a {
h3 { h3 {
font-size:24px; font-size:24px;
color: #484848; color: #252525;
margin-top: 0; margin-top: 0;
margin-bottom: 12px; margin-bottom: 12px;
} }

5
src/components/breadcrumb/BreadcrumbItem.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<li :class="containerClass"> <li :class="containerClass" v-if="visible()">
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link"> <router-link v-if="item.to" :to="item.to" class="p-menuitem-link">
<span v-if="item.icon" :class="item.icon"></span> <span v-if="item.icon" :class="item.icon"></span>
<span v-if="item.label" class="p-menuitem-text">{{item.label}}</span> <span v-if="item.label" class="p-menuitem-text">{{item.label}}</span>
@ -24,6 +24,9 @@ export default {
item: this.item item: this.item
}); });
} }
},
visible() {
return (typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false);
} }
}, },
computed: { computed: {

9
src/components/contextmenu/ContextMenuSub.vue
View File

@ -2,7 +2,7 @@
<transition name="p-contextmenusub" @enter="onEnter"> <transition name="p-contextmenusub" @enter="onEnter">
<ul ref="container" :class="containerClass" role="menu" v-if="root ? true : parentActive"> <ul ref="container" :class="containerClass" role="menu" v-if="root ? true : parentActive">
<template v-for="(item, i) of model"> <template v-for="(item, i) of model">
<li role="none" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i" <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible() && !item.separator" :key="item.label + i"
@mouseenter="onItemMouseEnter($event, item)"> @mouseenter="onItemMouseEnter($event, item)">
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click.native="onItemClick($event, item)" role="menuitem"> <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click.native="onItemClick($event, item)" role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span> <span :class="['p-menuitem-icon', item.icon]"></span>
@ -14,10 +14,10 @@
<span class="p-menuitem-text">{{item.label}}</span> <span class="p-menuitem-text">{{item.label}}</span>
<span class="p-submenu-icon pi pi-fw pi-caret-right" v-if="item.items"></span> <span class="p-submenu-icon pi pi-fw pi-caret-right" v-if="item.items"></span>
</a> </a>
<sub-menu :model="item.items" v-if="item.visible !== false && item.items" :key="item.label + '_sub_'" <sub-menu :model="item.items" v-if="visible() && item.items" :key="item.label + '_sub_'"
@leaf-click="onLeafClick" :parentActive="item === activeItem" /> @leaf-click="onLeafClick" :parentActive="item === activeItem" />
</li> </li>
<li class="p-menu-separator" :style="item.style" v-if="item.visible !== false && item.separator" :key="'separator' + i" role="separator"></li> <li class="p-menu-separator" :style="item.style" v-if="visible() && item.separator" :key="'separator' + i" role="separator"></li>
</template> </template>
</ul> </ul>
</transition> </transition>
@ -116,6 +116,9 @@ export default {
}, },
getLinkClass(item) { getLinkClass(item) {
return ['p-menuitem-link', {'p-disabled': item.disabled}]; return ['p-menuitem-link', {'p-disabled': item.disabled}];
},
visible() {
return (typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false);
} }
}, },
computed: { computed: {

65
src/components/megamenu/MegaMenu.vue
View File

@ -1,38 +1,40 @@
<template> <template>
<div :class="containerClass"> <div :class="containerClass">
<ul class="p-megamenu-root-list" role="menubar"> <ul class="p-megamenu-root-list" role="menubar">
<li v-for="(category,index) of model" :key="category.label + '_' + index" :class="getCategoryClass(category)" :style="category.style" <template v-for="(category,index) of model">
@mouseenter="onCategoryMouseEnter($event, category)" role="none"> <li v-if="visible(category)" :key="category.label + '_' + index" :class="getCategoryClass(category)" :style="category.style"
<a :href="category.url" :class="getLinkClass(category)" :target="category.target" @click="onCategoryClick($event, category)" @keydown="onCategoryKeydown($event, category)" @mouseenter="onCategoryMouseEnter($event, category)" role="none">
role="menuitem" :aria-haspopup="category.items != null" :aria-expanded="category === activeItem" :tabindex="category.disabled ? null : '0'"> <a :href="category.url" :class="getLinkClass(category)" :target="category.target" @click="onCategoryClick($event, category)" @keydown="onCategoryKeydown($event, category)"
<span v-if="category.icon" :class="getCategoryIcon(category)"></span> role="menuitem" :aria-haspopup="category.items != null" :aria-expanded="category === activeItem" :tabindex="category.disabled ? null : '0'">
<span class="p-menuitem-text">{{category.label}}</span> <span v-if="category.icon" :class="getCategoryIcon(category)"></span>
<span v-if="category.items" :class="getCategorySubMenuIcon()"></span> <span class="p-menuitem-text">{{category.label}}</span>
</a> <span v-if="category.items" :class="getCategorySubMenuIcon()"></span>
<div class="p-megamenu-panel" v-if="category.items"> </a>
<div class="p-grid"> <div class="p-megamenu-panel" v-if="category.items">
<div v-for="(column,columnIndex) of category.items" :key="category.label + '_column_' + columnIndex" :class="getColumnClassName(category)"> <div class="p-grid">
<ul v-for="(submenu,submenuIndex) of column" class="p-megamenu-submenu" :key="submenu.label + '_submenu_' + submenuIndex" role="menu"> <div v-for="(column,columnIndex) of category.items" :key="category.label + '_column_' + columnIndex" :class="getColumnClassName(category)">
<li :class="getSubmenuHeaderClass(submenu)" :style="submenu.style" role="presentation">{{submenu.label}}</li> <ul v-for="(submenu,submenuIndex) of column" class="p-megamenu-submenu" :key="submenu.label + '_submenu_' + submenuIndex" role="menu">
<template v-for="(item, i) of submenu.items"> <li :class="getSubmenuHeaderClass(submenu)" :style="submenu.style" role="presentation">{{submenu.label}}</li>
<li role="none" :class="getSubmenuItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i"> <template v-for="(item, i) of submenu.items">
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click.native="onLeafClick($event, item)" role="menuitem"> <li role="none" :class="getSubmenuItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i">
<span :class="['p-menuitem-icon', item.icon]"></span> <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click.native="onLeafClick($event, item)" role="menuitem">
<span class="p-menuitem-text">{{item.label}}</span> <span :class="['p-menuitem-icon', item.icon]"></span>
</router-link> <span class="p-menuitem-text">{{item.label}}</span>
<a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onLeafClick($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'"> </router-link>
<span :class="['p-menuitem-icon', item.icon]"></span> <a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onLeafClick($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'">
<span class="p-menuitem-text">{{item.label}}</span> <span :class="['p-menuitem-icon', item.icon]"></span>
<span :class="getSubmenuIcon()" v-if="item.items"></span> <span class="p-menuitem-text">{{item.label}}</span>
</a> <span :class="getSubmenuIcon()" v-if="item.items"></span>
</li> </a>
<li class="p-menu-separator" :style="item.style" v-if="item.visible !== false && item.separator" :key="'separator' + i" role="separator"></li> </li>
</template> <li class="p-menu-separator" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i" role="separator"></li>
</ul> </template>
</ul>
</div>
</div> </div>
</div> </div>
</div> </li>
</li> </template>
</ul> </ul>
<div class="p-megamenu-custom" v-if="$slots.default"> <div class="p-megamenu-custom" v-if="$slots.default">
<slot></slot> <slot></slot>
@ -275,6 +277,9 @@ export default {
this.documentClickListener = null; this.documentClickListener = null;
} }
}, },
visible(item) {
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
}
}, },
computed: { computed: {
containerClass() { containerClass() {

5
src/components/menu/Menuitem.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<li :class="containerClass" role="none" :style="item.style" v-if="item.visible !== false"> <li :class="containerClass" role="none" :style="item.style" v-if="visible()">
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="linkClass" role="menuitem"> <router-link v-if="item.to && !item.disabled" :to="item.to" :class="linkClass" role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span> <span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span> <span class="p-menuitem-text">{{item.label}}</span>
@ -22,6 +22,9 @@ export default {
originalEvent: event, originalEvent: event,
item: this.item item: this.item
}); });
},
visible() {
return (typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false);
} }
}, },
computed: { computed: {

9
src/components/menubar/MenubarSub.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ul :class="containerClass" :role="root ? 'menubar' : 'menu'"> <ul :class="containerClass" :role="root ? 'menubar' : 'menu'">
<template v-for="(item, i) of model"> <template v-for="(item, i) of model">
<li role="none" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i" <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i"
@mouseenter="onItemMouseEnter($event, item)"> @mouseenter="onItemMouseEnter($event, item)">
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)"
@click.native="onItemClick($event, item)" @keydown.native="onItemKeyDown($event, item)" role="menuitem"> @click.native="onItemClick($event, item)" @keydown.native="onItemKeyDown($event, item)" role="menuitem">
@ -14,10 +14,10 @@
<span class="p-menuitem-text">{{item.label}}</span> <span class="p-menuitem-text">{{item.label}}</span>
<span :class="getSubmenuIcon()" v-if="item.items"></span> <span :class="getSubmenuIcon()" v-if="item.items"></span>
</a> </a>
<sub-menu :model="item.items" v-if="item.visible !== false && item.items" :key="item.label + '_sub_'" <sub-menu :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'"
@leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" /> @leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" />
</li> </li>
<li class="p-menu-separator" :style="item.style" v-if="item.visible !== false && item.separator" :key="'separator' + i" role="separator"></li> <li class="p-menu-separator" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i" role="separator"></li>
</template> </template>
</ul> </ul>
</template> </template>
@ -264,6 +264,9 @@ export default {
return [ return [
'p-submenu-icon pi pi-fw', {'pi-caret-right': !this.root, 'pi-caret-down': this.root} 'p-submenu-icon pi pi-fw', {'pi-caret-right': !this.root, 'pi-caret-down': this.root}
]; ];
},
visible(item) {
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
} }
}, },
computed: { computed: {

5
src/components/panelmenu/PanelMenu.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="p-panelmenu p-component"> <div class="p-panelmenu p-component">
<template v-for="(item, index) of model"> <template v-for="(item, index) of model">
<div :key="item.label + '_' + index" :class="getPanelClass(item)" :style="item.style"> <div v-if="visible(item) ":key="item.label + '_' + index" :class="getPanelClass(item)" :style="item.style">
<div :class="getHeaderClass(item)" :style="item.style"> <div :class="getHeaderClass(item)" :style="item.style">
<a :href="item.url" class="p-panelmenu-header-link" @click="onItemClick($event, item)" :tabindex="item.disabled ? null : '0'" <a :href="item.url" class="p-panelmenu-header-link" @click="onItemClick($event, item)" :tabindex="item.disabled ? null : '0'"
:aria-expanded="isActive(item)" :id="ariaId +'_header'" :aria-controls="ariaId +'_content'"> :aria-expanded="isActive(item)" :id="ariaId +'_header'" :aria-controls="ariaId +'_content'">
@ -77,6 +77,9 @@ export default {
}, },
getHeaderClass(item) { getHeaderClass(item) {
return ['p-component p-panelmenu-header', {'p-highlight': this.isActive(item), 'p-disabled': item.disabled}]; return ['p-component p-panelmenu-header', {'p-highlight': this.isActive(item), 'p-disabled': item.disabled}];
},
visible(item) {
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
} }
}, },
components: { components: {

9
src/components/panelmenu/PanelMenuSub.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ul class="p-submenu-list" role="tree"> <ul class="p-submenu-list" role="tree">
<template v-for="(item, i) of model"> <template v-for="(item, i) of model">
<li role="none" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i"> <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i">
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click.native="onItemClick($event, item)" <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click.native="onItemClick($event, item)"
role="treeitem" :aria-expanded="isActive(item)"> role="treeitem" :aria-expanded="isActive(item)">
<span :class="['p-menuitem-icon', item.icon]"></span> <span :class="['p-menuitem-icon', item.icon]"></span>
@ -15,11 +15,11 @@
</a> </a>
<transition name="p-toggleable-content"> <transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="item === activeItem"> <div class="p-toggleable-content" v-show="item === activeItem">
<sub-panelmenu :model="item.items" v-if="item.visible !== false && item.items" :key="item.label + '_sub_'" /> <sub-panelmenu :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" />
</div> </div>
</transition> </transition>
</li> </li>
<li class="p-menu-separator" :style="item.style" v-if="item.visible !== false && item.separator" :key="'separator' + i"></li> <li class="p-menu-separator" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i"></li>
</template> </template>
</ul> </ul>
</template> </template>
@ -73,6 +73,9 @@ export default {
getSubmenuIcon(item) { getSubmenuIcon(item) {
const active = this.isActive(item); const active = this.isActive(item);
return ['p-panelmenu-icon pi pi-fw', {'pi-caret-right': !active, 'pi-caret-down': active}]; return ['p-panelmenu-icon pi pi-fw', {'pi-caret-right': !active, 'pi-caret-down': active}];
},
visible(item) {
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
} }
} }
} }

25
src/components/steps/Steps.vue
View File

@ -1,16 +1,18 @@
<template> <template>
<div :id="id" :class="containerClass"> <div :id="id" :class="containerClass">
<ul role="tablist"> <ul role="tablist">
<li v-for="(item,index) of model" :key="item.to" :class="getItemClass(item)" :style="item.style" role="tab" :aria-selected="isActive(item)" :aria-expanded="isActive(item)"> <template v-for="(item,index) of model">
<router-link :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)" v-if="!isItemDisabled(item)" role="presentation"> <li v-if="visible(item)" :key="item.to" :class="getItemClass(item)" :style="item.style" role="tab" :aria-selected="isActive(item)" :aria-expanded="isActive(item)">
<span class="p-steps-number">{{index + 1}}</span> <router-link :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)" v-if="!isItemDisabled(item)" role="presentation">
<span class="p-steps-title">{{item.label}}</span> <span class="p-steps-number">{{index + 1}}</span>
</router-link> <span class="p-steps-title">{{item.label}}</span>
<span v-else class="p-menuitem-link" role="presentation"> </router-link>
<span class="p-steps-number">{{index + 1}}</span> <span v-else class="p-menuitem-link" role="presentation">
<span class="p-steps-title">{{item.label}}</span> <span class="p-steps-number">{{index + 1}}</span>
</span> <span class="p-steps-title">{{item.label}}</span>
</li> </span>
</li>
</template>
</ul> </ul>
</div> </div>
</template> </template>
@ -84,6 +86,9 @@ export default {
`; `;
this.stepsStyle.innerHTML = innerHTML; this.stepsStyle.innerHTML = innerHTML;
},
visible(item) {
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
} }
}, },
computed: { computed: {

5
src/components/tabmenu/TabMenu.vue
View File

@ -2,7 +2,7 @@
<div class="p-tabmenu p-component"> <div class="p-tabmenu p-component">
<ul class="p-tabmenu-nav p-reset" role="tablist"> <ul class="p-tabmenu-nav p-reset" role="tablist">
<template v-for="(item,i) of model"> <template v-for="(item,i) of model">
<li :key="item.label + '_' + i" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false" role="tab" :aria-selected="isActive(item)" :aria-expanded="isActive(item)"> <li :key="item.label + '_' + i" :class="getItemClass(item)" :style="item.style" v-if="visible(item)" role="tab" :aria-selected="isActive(item)" :aria-expanded="isActive(item)">
<router-link v-if="item.to && !item.disabled" :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)" role="presentation"> <router-link v-if="item.to && !item.disabled" :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)" role="presentation">
<span :class="getItemIcon(item)" v-if="item.icon"></span> <span :class="getItemIcon(item)" v-if="item.icon"></span>
<span class="p-menuitem-text">{{item.label}}</span> <span class="p-menuitem-text">{{item.label}}</span>
@ -50,6 +50,9 @@ export default {
}, },
getItemIcon(item) { getItemIcon(item) {
return ['p-menuitem-icon', item.icon]; return ['p-menuitem-icon', item.icon];
},
visible(item) {
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
} }
}, },
computed: { computed: {

9
src/components/tieredmenu/TieredMenuSub.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ul ref="element" :class="containerClass" role="'menubar' : 'menu'" aria-orientation="horizontal"> <ul ref="element" :class="containerClass" role="'menubar' : 'menu'" aria-orientation="horizontal">
<template v-for="(item, i) of model"> <template v-for="(item, i) of model">
<li :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i" <li :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i"
@mouseenter="onItemMouseEnter($event, item)" role="none"> @mouseenter="onItemMouseEnter($event, item)" role="none">
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)"
@click.native="onItemClick($event, item)" @keydown.native="onItemKeyDown($event, item)" role="menuitem"> @click.native="onItemClick($event, item)" @keydown.native="onItemKeyDown($event, item)" role="menuitem">
@ -14,10 +14,10 @@
<span class="p-menuitem-text">{{item.label}}</span> <span class="p-menuitem-text">{{item.label}}</span>
<span class="p-submenu-icon pi pi-fw pi-caret-right" v-if="item.items"></span> <span class="p-submenu-icon pi pi-fw pi-caret-right" v-if="item.items"></span>
</a> </a>
<sub-menu :model="item.items" v-if="item.visible !== false && item.items" :key="item.label + '_sub_'" <sub-menu :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'"
@leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" /> @leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" />
</li> </li>
<li class="p-menu-separator" :style="item.style" v-if="item.visible !== false && item.separator" :key="'separator' + i" role="separator"></li> <li class="p-menu-separator" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i" role="separator"></li>
</template> </template>
</ul> </ul>
</template> </template>
@ -210,6 +210,9 @@ export default {
document.removeEventListener('click', this.documentClickListener); document.removeEventListener('click', this.documentClickListener);
this.documentClickListener = null; this.documentClickListener = null;
} }
},
visible(item) {
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
} }
}, },
computed: { computed: {

22
src/views/menumodel/MenuModel.vue
View File

@ -80,6 +80,12 @@ const items: [
<td>false</td> <td>false</td>
<td>When set as true, disables the menuitem.</td> <td>When set as true, disables the menuitem.</td>
</tr> </tr>
<tr>
<td>visible</td>
<td>boolean/function</td>
<td>true</td>
<td>A boolean or a function to return a boolean to specify if the item is visible.</td>
</tr>
<tr> <tr>
<td>target</td> <td>target</td>
<td>string</td> <td>string</td>
@ -138,6 +144,22 @@ const items = [
url: 'https://www.primefaces.org/primevue' url: 'https://www.primefaces.org/primevue'
} }
]; ];
</CodeHighlight>
<h3>Visibility</h3>
<p>It is a common case to hide certain items based on conditions such as user roles, <i>visible</i> property is available
to implement such cases by supporting functions that returns booleans or simple booleans.</p>
<CodeHighlight lang="js">
const items = [
{
label: 'Remove',
visible: false
},
{
label: 'Delete',
visible: () => this.isUserAdmin()
}
];
</CodeHighlight> </CodeHighlight>
</div> </div>
</div> </div>