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

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

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

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

@ -2,7 +2,7 @@
<transition name="p-contextmenusub" @enter="onEnter">
<ul ref="container" :class="containerClass" role="menu" v-if="root ? true : parentActive">
<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)">
<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>
@ -14,10 +14,10 @@
<span class="p-menuitem-text">{{item.label}}</span>
<span class="p-submenu-icon pi pi-fw pi-caret-right" v-if="item.items"></span>
</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" />
</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>
</ul>
</transition>
@ -116,6 +116,9 @@ export default {
},
getLinkClass(item) {
return ['p-menuitem-link', {'p-disabled': item.disabled}];
},
visible() {
return (typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false);
}
},
computed: {

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

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

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

@ -1,5 +1,5 @@
<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">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
@ -22,6 +22,9 @@ export default {
originalEvent: event,
item: this.item
});
},
visible() {
return (typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false);
}
},
computed: {

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

@ -1,7 +1,7 @@
<template>
<ul :class="containerClass" :role="root ? 'menubar' : 'menu'">
<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)">
<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">
@ -14,10 +14,10 @@
<span class="p-menuitem-text">{{item.label}}</span>
<span :class="getSubmenuIcon()" v-if="item.items"></span>
</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" />
</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>
</ul>
</template>
@ -264,6 +264,9 @@ export default {
return [
'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: {

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

@ -1,7 +1,7 @@
<template>
<div class="p-panelmenu p-component">
<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">
<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'">
@ -77,6 +77,9 @@ export default {
},
getHeaderClass(item) {
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: {

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

@ -1,7 +1,7 @@
<template>
<ul class="p-submenu-list" role="tree">
<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)"
role="treeitem" :aria-expanded="isActive(item)">
<span :class="['p-menuitem-icon', item.icon]"></span>
@ -15,11 +15,11 @@
</a>
<transition name="p-toggleable-content">
<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>
</transition>
</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>
</ul>
</template>
@ -73,6 +73,9 @@ export default {
getSubmenuIcon(item) {
const active = this.isActive(item);
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>
<div :id="id" :class="containerClass">
<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)">
<router-link :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)" v-if="!isItemDisabled(item)" role="presentation">
<span class="p-steps-number">{{index + 1}}</span>
<span class="p-steps-title">{{item.label}}</span>
</router-link>
<span v-else class="p-menuitem-link" role="presentation">
<span class="p-steps-number">{{index + 1}}</span>
<span class="p-steps-title">{{item.label}}</span>
</span>
</li>
<template v-for="(item,index) of model">
<li v-if="visible(item)" :key="item.to" :class="getItemClass(item)" :style="item.style" role="tab" :aria-selected="isActive(item)" :aria-expanded="isActive(item)">
<router-link :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)" v-if="!isItemDisabled(item)" role="presentation">
<span class="p-steps-number">{{index + 1}}</span>
<span class="p-steps-title">{{item.label}}</span>
</router-link>
<span v-else class="p-menuitem-link" role="presentation">
<span class="p-steps-number">{{index + 1}}</span>
<span class="p-steps-title">{{item.label}}</span>
</span>
</li>
</template>
</ul>
</div>
</template>
@ -84,6 +86,9 @@ export default {
`;
this.stepsStyle.innerHTML = innerHTML;
},
visible(item) {
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
}
},
computed: {

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

@ -2,7 +2,7 @@
<div class="p-tabmenu p-component">
<ul class="p-tabmenu-nav p-reset" role="tablist">
<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">
<span :class="getItemIcon(item)" v-if="item.icon"></span>
<span class="p-menuitem-text">{{item.label}}</span>
@ -50,6 +50,9 @@ export default {
},
getItemIcon(item) {
return ['p-menuitem-icon', item.icon];
},
visible(item) {
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
}
},
computed: {

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

@ -1,7 +1,7 @@
<template>
<ul ref="element" :class="containerClass" role="'menubar' : 'menu'" aria-orientation="horizontal">
<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">
<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">
@ -14,10 +14,10 @@
<span class="p-menuitem-text">{{item.label}}</span>
<span class="p-submenu-icon pi pi-fw pi-caret-right" v-if="item.items"></span>
</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" />
</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>
</ul>
</template>
@ -210,6 +210,9 @@ export default {
document.removeEventListener('click', this.documentClickListener);
this.documentClickListener = null;
}
},
visible(item) {
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
}
},
computed: {

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

@ -80,6 +80,12 @@ const items: [
<td>false</td>
<td>When set as true, disables the menuitem.</td>
</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>
<td>target</td>
<td>string</td>
@ -138,6 +144,22 @@ const items = [
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>
</div>
</div>