Skip to content

Commit

Permalink
Fixed #286 - Function support for MenuModel visible prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@cagataycivici
cagataycivici committed Apr 23, 2020
1 parent 8050d97 commit df9cada
Show file tree
Hide file tree
Showing 12 changed files with 127 additions and 71 deletions.
30 changes: 15 additions & 15 deletions src/assets/styles/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -220,7 +220,7 @@ a {

.menu-button {
display: none;
color: #484848;
color: #252525;
font-size: 24px;
position: absolute;
left: 0;
Expand Down Expand Up @@ -271,7 +271,7 @@ a {

> a {
text-decoration: none;
color: #484848;
color: #252525;
min-width: 120px;
font-size: 16px;
display: inline-block;
Expand Down Expand Up @@ -329,7 +329,7 @@ a {

a {
text-decoration: none;
color: #484848;
color: #252525;
padding: 6px 12px;
display: block;
user-select: none;
Expand Down Expand Up @@ -479,7 +479,7 @@ a {
border-radius: 4px;
-webkit-border-radius: 4px;
font-size: 14px;
color: #484848;
color: #252525;
transition: background-color .2s;

&:hover {
Expand Down Expand Up @@ -575,7 +575,7 @@ a {
border-radius: 3px;
background-color: #ffffff;
padding: 2px 4px;
color: #484848;
color: #252525;
}
}
}
Expand Down Expand Up @@ -665,7 +665,7 @@ a {
border-top: 1px solid #dadada;

h3 {
color: #484848;
color: #252525;
margin-top: 25px;
margin-bottom: 0px;
font-size: 22px;
Expand All @@ -679,7 +679,7 @@ a {
}

p {
color: #484848;
color: #252525;
font-size: 14px;
line-height: 24px;
margin: 10px 0;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -1009,7 +1009,7 @@ a {

.free-themes {
padding: 2em;
color: #484848;
color: #252525;
background-color: #ffffff;

p {
Expand Down Expand Up @@ -1194,7 +1194,7 @@ a {

h3 {
font-size:24px;
color: #484848;
color: #252525;
padding: 30px 0 12px 0;
margin: 0;
}
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -1283,7 +1283,7 @@ a {

h3 {
font-size:24px;
color: #484848;
color: #252525;
margin-top: 0;
margin-bottom: 12px;
}
Expand Down
5 changes: 4 additions & 1 deletion src/components/breadcrumb/BreadcrumbItem.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -24,6 +24,9 @@ export default {
item: this.item
});
}
},
visible() {
return (typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false);
}
},
computed: {
Expand Down
9 changes: 6 additions & 3 deletions src/components/contextmenu/ContextMenuSub.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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: {
Expand Down
65 changes: 35 additions & 30 deletions src/components/megamenu/MegaMenu.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -275,6 +277,9 @@ export default {
this.documentClickListener = null;
}
},
visible(item) {
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
}
},
computed: {
containerClass() {
Expand Down
5 changes: 4 additions & 1 deletion src/components/menu/Menuitem.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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: {
Expand Down
9 changes: 6 additions & 3 deletions src/components/menubar/MenubarSub.vue
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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>
Expand Down Expand Up @@ -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: {
Expand Down
5 changes: 4 additions & 1 deletion src/components/panelmenu/PanelMenu.vue
View file
Original file line number Diff line number Diff line change
@@ -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'">
Expand Down Expand Up @@ -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: {
Expand Down
9 changes: 6 additions & 3 deletions src/components/panelmenu/PanelMenuSub.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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);
}
}
}
Expand Down
Loading

0 comments on commit df9cada

Please sign in to comment.