From df9cada044086e99e01914fb4e6f23f7380a43b4 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Thu, 23 Apr 2020 10:13:53 +0300
Subject: [PATCH] Fixed #286 - Function support for MenuModel visible prop

---
 src/assets/styles/app.scss                    | 30 ++++-----
 src/components/breadcrumb/BreadcrumbItem.vue  |  5 +-
 src/components/contextmenu/ContextMenuSub.vue |  9 ++-
 src/components/megamenu/MegaMenu.vue          | 65 ++++++++++---------
 src/components/menu/Menuitem.vue              |  5 +-
 src/components/menubar/MenubarSub.vue         |  9 ++-
 src/components/panelmenu/PanelMenu.vue        |  5 +-
 src/components/panelmenu/PanelMenuSub.vue     |  9 ++-
 src/components/steps/Steps.vue                | 25 ++++---
 src/components/tabmenu/TabMenu.vue            |  5 +-
 src/components/tieredmenu/TieredMenuSub.vue   |  9 ++-
 src/views/menumodel/MenuModel.vue             | 22 +++++++
 12 files changed, 127 insertions(+), 71 deletions(-)

diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss
index f0cbb838d..4316cf51d 100644
--- a/src/assets/styles/app.scss
+++ b/src/assets/styles/app.scss
@@ -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;
         }
diff --git a/src/components/breadcrumb/BreadcrumbItem.vue b/src/components/breadcrumb/BreadcrumbItem.vue
index e3ae3df7a..1c103c29e 100644
--- a/src/components/breadcrumb/BreadcrumbItem.vue
+++ b/src/components/breadcrumb/BreadcrumbItem.vue
@@ -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: {
diff --git a/src/components/contextmenu/ContextMenuSub.vue b/src/components/contextmenu/ContextMenuSub.vue
index 3d5d2d40a..60eccf41e 100644
--- a/src/components/contextmenu/ContextMenuSub.vue
+++ b/src/components/contextmenu/ContextMenuSub.vue
@@ -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: {
diff --git a/src/components/megamenu/MegaMenu.vue b/src/components/megamenu/MegaMenu.vue
index b62eb80ff..f572e643d 100644
--- a/src/components/megamenu/MegaMenu.vue
+++ b/src/components/megamenu/MegaMenu.vue
@@ -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() {
diff --git a/src/components/menu/Menuitem.vue b/src/components/menu/Menuitem.vue
index 6ab62f78c..52a83b68a 100644
--- a/src/components/menu/Menuitem.vue
+++ b/src/components/menu/Menuitem.vue
@@ -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: {
diff --git a/src/components/menubar/MenubarSub.vue b/src/components/menubar/MenubarSub.vue
index e832d7205..8bb53dd17 100644
--- a/src/components/menubar/MenubarSub.vue
+++ b/src/components/menubar/MenubarSub.vue
@@ -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: {
diff --git a/src/components/panelmenu/PanelMenu.vue b/src/components/panelmenu/PanelMenu.vue
index 2c70f2d8a..77c1c31b0 100644
--- a/src/components/panelmenu/PanelMenu.vue
+++ b/src/components/panelmenu/PanelMenu.vue
@@ -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: {
diff --git a/src/components/panelmenu/PanelMenuSub.vue b/src/components/panelmenu/PanelMenuSub.vue
index 74e91f232..bc304e924 100644
--- a/src/components/panelmenu/PanelMenuSub.vue
+++ b/src/components/panelmenu/PanelMenuSub.vue
@@ -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);
         }
     }
 }
diff --git a/src/components/steps/Steps.vue b/src/components/steps/Steps.vue
index 1d04212d2..cb89271b3 100644
--- a/src/components/steps/Steps.vue
+++ b/src/components/steps/Steps.vue
@@ -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: {
diff --git a/src/components/tabmenu/TabMenu.vue b/src/components/tabmenu/TabMenu.vue
index 909d93756..5ceeb15df 100644
--- a/src/components/tabmenu/TabMenu.vue
+++ b/src/components/tabmenu/TabMenu.vue
@@ -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: {
diff --git a/src/components/tieredmenu/TieredMenuSub.vue b/src/components/tieredmenu/TieredMenuSub.vue
index 6c606c041..c67c9b7d3 100644
--- a/src/components/tieredmenu/TieredMenuSub.vue
+++ b/src/components/tieredmenu/TieredMenuSub.vue
@@ -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: {
diff --git a/src/views/menumodel/MenuModel.vue b/src/views/menumodel/MenuModel.vue
index 3f969217e..4d2781ed6 100644
--- a/src/views/menumodel/MenuModel.vue
+++ b/src/views/menumodel/MenuModel.vue
@@ -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>