Fixed #1293 - MenuModel - disabled should be a function to support dy…

…namic behavior

src/components/breadcrumb/BreadcrumbItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <li :class="containerClass" v-if="visible()">
+    <li :class="containerClass(item)" v-if="visible()">
         <template v-if="!template">
             <router-link v-if="item.to" :to="item.to" custom v-slot="{navigate, href}">
                 <a :href="href" class="p-menuitem-link" @click="onClick($event, navigate)">
@@ -36,14 +36,17 @@ export default {
                 navigate(event);
             }
         },
+        containerClass(item) {
+            return [{'p-disabled': this.disabled(item)}, this.item.class];
+        },
         visible() {
             return (typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false);
+        },
+        disabled(item) {
+            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
         }
     },
     computed: {
-        containerClass() {
-            return [{'p-disabled': this.item.disabled}, this.item.class];
-        },
         iconClass() {
             return ['p-menuitem-icon', this.item.icon];
         }

src/components/contextmenu/ContextMenuSub.vue

@@ -5,14 +5,14 @@
                 <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator"
                     @mouseenter="onItemMouseEnter($event, item)">
                     <template v-if="!template">
-                        <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
+                        <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href}">
                             <a :href="href" @click="onItemClick($event, item, navigate)" :class="getLinkClass(item)" v-ripple role="menuitem">
                                 <span :class="['p-menuitem-icon', item.icon]"></span>
                                 <span class="p-menuitem-text">{{item.label}}</span>
                             </a>
                         </router-link>
                         <a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onItemClick($event, item)" v-ripple
-                            :aria-haspopup="item.items != null" :aria-expanded="item === activeItem" role="menuitem" :tabindex="item.disabled ? null : '0'">
+                            :aria-haspopup="item.items != null" :aria-expanded="item === activeItem" role="menuitem" :tabindex="disabled(item) ? null : '0'">
                             <span :class="['p-menuitem-icon', item.icon]"></span>
                             <span class="p-menuitem-text">{{item.label}}</span>
                             <span class="p-submenu-icon pi pi-angle-right" v-if="item.items"></span>
@@ -67,15 +67,15 @@ export default {
     },
     methods: {
         onItemMouseEnter(event, item) {
-            if (item.disabled) {
+            if (this.disabled(item)) {
                 event.preventDefault();
                 return;
             }
 
             this.activeItem = item;
         },
         onItemClick(event, item, navigate) {
-            if (item.disabled) {
+            if (this.disabled(item)) {
                 event.preventDefault();
                 return;
             }
@@ -133,10 +133,13 @@ export default {
             ]
         },
         getLinkClass(item) {
-            return ['p-menuitem-link', {'p-disabled': item.disabled}];
+            return ['p-menuitem-link', {'p-disabled': this.disabled(item)}];
         },
         visible(item) {
             return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+        },
+        disabled(item) {
+            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
         }
     },
     computed: {

src/components/dock/DockSub.vue

@@ -2,16 +2,16 @@
     <ul ref="list" class="p-dock-list" role="menu" @mouseleave="onListMouseLeave">
         <li v-for="(item, index) of model" :class="itemClass(index)" :key="index" role="none" @mouseenter="onItemMouseEnter(index)">
             <template v-if="!template">
-                <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{href}">
-                    <a :href="href" role="menuitem" :class="['p-dock-action', { 'p-disabled': item.disabled }]" :target="item.target" 
+                <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{href}">
+                    <a :href="href" role="menuitem" :class="['p-dock-action', { 'p-disabled': disabled(item) }]" :target="item.target" 
                         :data-pr-tooltip="item.label" @click="onItemClick(e, item)">
                         <template v-if="typeof item.icon === 'string'">
                             <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
                         </template>
                         <component v-else :is="item.icon"></component>
                     </a>
                 </router-link>
-                <a v-else :href="item.url || '#'" role="menuitem" :class="['p-dock-action', { 'p-disabled': item.disabled }]" :target="item.target" 
+                <a v-else :href="item.url || '#'" role="menuitem" :class="['p-dock-action', { 'p-disabled': disabled(item) }]" :target="item.target" 
                     :data-pr-tooltip="item.label" @click="onItemClick($event, item)">
                     <template v-if="typeof item.icon === 'string'">
                         <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
@@ -64,6 +64,9 @@ export default {
                 'p-dock-item-next': (this.currentIndex + 1) === index,
                 'p-dock-item-second-next': (this.currentIndex + 2) === index
             }];
+        },
+        disabled(item) {
+            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
         }
     }
 }

src/components/megamenu/MegaMenu.vue

@@ -5,14 +5,14 @@
                 <li v-if="visible(category)"  :class="getCategoryClass(category)" :style="category.style"
                     @mouseenter="onCategoryMouseEnter($event, category)" role="none">
                     <template v-if="!$slots.item">
-                        <router-link v-if="category.to && !category.disabled" :to="category.to" custom v-slot="{navigate, href}">
+                        <router-link v-if="category.to && !disabled(category)" :to="category.to" custom v-slot="{navigate, href}">
                             <a :href="href" :class="getLinkClass(category)" @click="onCategoryClick($event, category, navigate)" @keydown="onCategoryKeydown($event, category)" role="menuitem" v-ripple>
                                 <span v-if="category.icon" :class="getCategoryIcon(category)"></span>
                                 <span class="p-menuitem-text">{{category.label}}</span>
                             </a>
                         </router-link>
                         <a v-else :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'" v-ripple>
+                            role="menuitem" :aria-haspopup="category.items != null" :aria-expanded="category === activeItem" :tabindex="disabled(category) ? null : '0'" v-ripple>
                             <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>
@@ -27,13 +27,13 @@
                                     <template v-for="(item, i) of submenu.items" :key="item.label + i.toString()">
                                         <li role="none" :class="getSubmenuItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator">
                                             <template v-if="!$slots.item">
-                                                <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
+                                                <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href}">
                                                     <a :href="href" :class="getLinkClass(item)" @click="onLeafClick($event, item, navigate)" role="menuitem" v-ripple>
                                                         <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
                                                         <span class="p-menuitem-text">{{item.label}}</span>
                                                     </a>
                                                 </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'" v-ripple>
+                                                <a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onLeafClick($event, item)" role="menuitem" :tabindex="disabled(item) ? null : '0'" v-ripple>
                                                     <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
                                                     <span class="p-menuitem-text">{{item.label}}</span>
                                                     <span :class="getSubmenuIcon()" v-if="item.items"></span>
@@ -83,7 +83,7 @@ export default {
     },
     methods: {
         onLeafClick(event, item, navigate) {
-            if (item.disabled) {
+            if (this.disabled(item)) {
                 event.preventDefault();
                 return;
             }
@@ -102,7 +102,7 @@ export default {
             }
         },
         onCategoryMouseEnter(event, category) {
-            if (category.disabled) {
+            if (this.disabled(category)) {
                 event.preventDefault();
                 return;
             }
@@ -112,7 +112,7 @@ export default {
             }
         },
         onCategoryClick(event, category, navigate) {
-            if (category.disabled) {
+            if (this.disabled(category)) {
                 event.preventDefault();
                 return;
             }
@@ -266,13 +266,13 @@ export default {
             return columnClass;
         },
         getSubmenuHeaderClass(submenu) {
-            return ['p-megamenu-submenu-header', submenu.class, {'p-disabled': submenu.disabled}];
+            return ['p-megamenu-submenu-header', submenu.class, {'p-disabled': this.disabled(submenu)}];
         },
         getSubmenuItemClass(item) {
             return ['p-menuitem', item.class];
         },
         getLinkClass(item) {
-            return ['p-menuitem-link', {'p-disabled': item.disabled}];
+            return ['p-menuitem-link', {'p-disabled': this.disabled(item)}];
         },
         bindDocumentClickListener() {
             if (!this.documentClickListener) {
@@ -294,6 +294,9 @@ export default {
         },
         visible(item) {
             return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+        },
+        disabled(item) {
+            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
         }
     },
     computed: {

src/components/menu/Menuitem.vue

@@ -1,13 +1,13 @@
 <template>
     <li :class="containerClass" role="none" :style="item.style" v-if="visible()">
         <template v-if="!template">
-            <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
-                <a :href="href" @click="onClick($event, navigate)" :class="linkClass" v-ripple role="menuitem">
+            <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href}">
+                <a :href="href" @click="onClick($event, navigate)" :class="linkClass(item)" v-ripple role="menuitem">
                     <span :class="['p-menuitem-icon', item.icon]"></span>
                     <span class="p-menuitem-text">{{item.label}}</span>
                 </a>
             </router-link>
-            <a v-else :href="item.url" :class="linkClass" @click="onClick" :target="item.target" role="menuitem" :tabindex="item.disabled ? null : '0'" v-ripple>
+            <a v-else :href="item.url" :class="linkClass(item)" @click="onClick" :target="item.target" role="menuitem" :tabindex="disabled(item) ? null : '0'" v-ripple>
                 <span :class="['p-menuitem-icon', item.icon]"></span>
                 <span class="p-menuitem-text">{{item.label}}</span>
             </a>
@@ -35,16 +35,19 @@ export default {
                 navigate: navigate
             });
         },
+        linkClass(item) {
+            return ['p-menuitem-link', {'p-disabled': this.disabled(item)}];
+        },
         visible() {
             return (typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false);
+        },
+        disabled(item) {
+            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
         }
     },
     computed: {
         containerClass() {
             return ['p-menuitem', this.item.class];
-        },
-        linkClass() {
-            return ['p-menuitem-link', {'p-disabled': this.item.disabled}];
         }
     },
     directives: {

src/components/menubar/MenubarSub.vue

@@ -4,14 +4,14 @@
             <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator"
                 @mouseenter="onItemMouseEnter($event, item)">
                 <template v-if="!template">
-                    <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
+                    <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href}">
                         <a :href="href" @click="onItemClick($event, item, navigate)" :class="getLinkClass(item)" v-ripple @keydown="onItemKeyDown($event, item)" role="menuitem">
                             <span :class="['p-menuitem-icon', item.icon]"></span>
                             <span class="p-menuitem-text">{{item.label}}</span>
                         </a>
                     </router-link>
                     <a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
-                        @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'" v-ripple>
+                        @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="disabled(item) ? null : '0'" v-ripple>
                         <span :class="['p-menuitem-icon', item.icon]"></span>
                         <span class="p-menuitem-text">{{item.label}}</span>
                         <span :class="getSubmenuIcon()" v-if="item.items"></span>
@@ -82,7 +82,7 @@ export default {
     },
     methods: {
         onItemMouseEnter(event, item) {
-            if (item.disabled || this.mobileActive) {
+            if (this.disabled(item) || this.mobileActive) {
                 event.preventDefault();
                 return;
             }
@@ -97,7 +97,7 @@ export default {
             }
         },
         onItemClick(event, item, navigate) {
-            if (item.disabled) {
+            if (this.disabled(item)) {
                 event.preventDefault();
                 return;
             }
@@ -251,7 +251,7 @@ export default {
             ]
         },
         getLinkClass(item) {
-            return ['p-menuitem-link', {'p-disabled': item.disabled}];
+            return ['p-menuitem-link', {'p-disabled': this.disabled(item)}];
         },
         bindDocumentClickListener() {
             if (!this.documentClickListener) {
@@ -278,6 +278,9 @@ export default {
         },
         visible(item) {
             return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+        },
+        disabled(item) {
+            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
         }
     },
     computed: {

src/components/panelmenu/PanelMenu.vue

@@ -4,13 +4,13 @@
             <div v-if="visible(item)"  :class="getPanelClass(item)" :style="item.style">
                 <div :class="getHeaderClass(item)" :style="item.style">
                     <template v-if="!$slots.item">
-                        <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
+                        <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href}">
                             <a :href="href" class="p-panelmenu-header-link" @click="onItemClick($event, item, navigate)" role="treeitem">
                                 <span v-if="item.icon" :class="getPanelIcon(item)"></span>
                                 <span class="p-menuitem-text">{{item.label}}</span>
                             </a>
                         </router-link>
-                        <a v-else :href="item.url" class="p-panelmenu-header-link" @click="onItemClick($event, item)" :tabindex="item.disabled ? null : '0'"
+                        <a v-else :href="item.url" class="p-panelmenu-header-link" @click="onItemClick($event, item)" :tabindex="disabled(item) ? null : '0'"
                             :aria-expanded="isActive(item)" :id="ariaId +'_header'" :aria-controls="ariaId +'_content'">
                             <span v-if="item.items" :class="getPanelToggleIcon(item)"></span>
                             <span v-if="item.icon" :class="getPanelIcon(item)"></span>
@@ -61,7 +61,7 @@ export default {
                 this.activeItem = item;
             }
             
-            if (item.disabled) {
+            if (this.disabled(item)) {
                 event.preventDefault();
                 return;
             }
@@ -111,10 +111,13 @@ export default {
             return this.expandedKeys ? this.expandedKeys[item.key] : item === this.activeItem;
         },
         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': this.disabled(item)}];
         },
         visible(item) {
             return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+        },
+        disabled(item) {
+            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
         }
     },
     components: {