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

Fixed #1293 - MenuModel - disabled should be a function to support dynamic behavior

pull/1478/head
Tuğçe Küçükoğlu 2021-08-24 09:52:57 +03:00
parent 628325522c
commit 1ecaba2b87
12 changed files with 87 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

9
src/components/dock/DockSub.vue
View File

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

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

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

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

@ -1,13 +1,13 @@
<template> <template>
<li :class="containerClass" role="none" :style="item.style" v-if="visible()"> <li :class="containerClass" role="none" :style="item.style" v-if="visible()">
<template v-if="!template"> <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="onClick($event, navigate)" :class="linkClass" v-ripple role="menuitem"> <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-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span> <span class="p-menuitem-text">{{item.label}}</span>
</a> </a>
</router-link> </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-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span> <span class="p-menuitem-text">{{item.label}}</span>
</a> </a>
@ -35,16 +35,19 @@ export default {
navigate: navigate navigate: navigate
}); });
}, },
linkClass(item) {
return ['p-menuitem-link', {'p-disabled': this.disabled(item)}];
},
visible() { visible() {
return (typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false); 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: { computed: {
containerClass() { containerClass() {
return ['p-menuitem', this.item.class]; return ['p-menuitem', this.item.class];
},
linkClass() {
return ['p-menuitem-link', {'p-disabled': this.item.disabled}];
} }
}, },
directives: { directives: {

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

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

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

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

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

@ -3,14 +3,14 @@
<template v-for="(item, i) of model" :key="item.label + i.toString()"> <template v-for="(item, i) of model" :key="item.label + i.toString()">
<li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator"> <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator">
<template v-if="!template"> <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" :class="getLinkClass(item)" @click="onItemClick($event, item, navigate)" role="treeitem" :aria-expanded="isActive(item)"> <a :href="href" :class="getLinkClass(item)" @click="onItemClick($event, item, navigate)" role="treeitem" :aria-expanded="isActive(item)">
<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>
</a> </a>
</router-link> </router-link>
<a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onItemClick($event, item)" <a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onItemClick($event, item)"
role="treeitem" :aria-expanded="isActive(item)" :tabindex="item.disabled ? null : '0'"> role="treeitem" :aria-expanded="isActive(item)" :tabindex="disabled(item) ? null : '0'">
<span :class="getSubmenuIcon(item)" v-if="item.items"></span> <span :class="getSubmenuIcon(item)" v-if="item.items"></span>
<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>
@ -58,7 +58,7 @@ export default {
this.activeItem = item; this.activeItem = item;
} }
if (item.disabled) { if (this.disabled(item)) {
event.preventDefault(); event.preventDefault();
return; return;
} }
@ -85,7 +85,7 @@ export default {
return ['p-menuitem', item.className]; return ['p-menuitem', item.className];
}, },
getLinkClass(item) { getLinkClass(item) {
return ['p-menuitem-link', {'p-disabled': item.disabled}]; return ['p-menuitem-link', {'p-disabled': this.disabled(item)}];
}, },
isActive(item) { isActive(item) {
return this.expandedKeys ? this.expandedKeys[item.key] : item === this.activeItem; return this.expandedKeys ? this.expandedKeys[item.key] : item === this.activeItem;
@ -96,6 +96,9 @@ export default {
}, },
visible(item) { visible(item) {
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false); return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
},
disabled(item) {
return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
} }
} }
} }

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

@ -43,7 +43,7 @@ export default {
}, },
methods: { methods: {
onItemClick(event, item, navigate) { onItemClick(event, item, navigate) {
if (item.disabled || this.readonly) { if (this.disabled(item) || this.readonly) {
event.preventDefault(); event.preventDefault();
return; return;
} }
@ -69,10 +69,13 @@ export default {
}]; }];
}, },
isItemDisabled(item) { isItemDisabled(item) {
return (item.disabled || (this.readonly && !this.isActive(item))); return (this.disabled(item) || (this.readonly && !this.isActive(item)));
}, },
visible(item) { visible(item) {
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false); return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
},
disabled(item) {
return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
} }
}, },
computed: { computed: {

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

@ -2,7 +2,7 @@
<div class="p-tabmenu p-component"> <div class="p-tabmenu p-component">
<ul ref="nav" class="p-tabmenu-nav p-reset" role="tablist"> <ul ref="nav" class="p-tabmenu-nav p-reset" role="tablist">
<template v-for="(item,i) of model" :key="item.label + '_' + i.toString()"> <template v-for="(item,i) of model" :key="item.label + '_' + i.toString()">
<router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}"> <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
<li :class="getRouteItemClass(item,isActive,isExactActive)" :style="item.style" v-if="visible(item)" role="tab"> <li :class="getRouteItemClass(item,isActive,isExactActive)" :style="item.style" v-if="visible(item)" role="tab">
<template v-if="!$slots.item"> <template v-if="!$slots.item">
<a :href="href" class="p-menuitem-link" @click="onItemClick($event, item, navigate)" role="presentation" v-ripple> <a :href="href" class="p-menuitem-link" @click="onItemClick($event, item, navigate)" role="presentation" v-ripple>
@ -15,7 +15,7 @@
</router-link> </router-link>
<li v-else-if="visible(item)" :class="getItemClass(item)" role="tab"> <li v-else-if="visible(item)" :class="getItemClass(item)" role="tab">
<template v-if="!$slots.item"> <template v-if="!$slots.item">
<a :href="item.url" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item)" role="presentation" :tabindex="item.disabled ? null : '0'" v-ripple> <a :href="item.url" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item)" role="presentation" :tabindex="disabled(item) ? null : '0'" v-ripple>
<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>
</a> </a>
@ -61,7 +61,7 @@ export default {
}, },
methods: { methods: {
onItemClick(event, item, navigate) { onItemClick(event, item, navigate) {
if (item.disabled) { if (this.disabled(item)) {
event.preventDefault(); event.preventDefault();
return; return;
} }
@ -79,13 +79,13 @@ export default {
}, },
getItemClass(item) { getItemClass(item) {
return ['p-tabmenuitem', item.class, { return ['p-tabmenuitem', item.class, {
'p-disabled': item.disabled 'p-disabled': this.disabled(item)
}]; }];
}, },
getRouteItemClass(item, isActive, isExactActive) { getRouteItemClass(item, isActive, isExactActive) {
return ['p-tabmenuitem', item.class, { return ['p-tabmenuitem', item.class, {
'p-highlight': this.exact ? isExactActive : isActive, 'p-highlight': this.exact ? isExactActive : isActive,
'p-disabled': item.disabled 'p-disabled': this.disabled(item)
}]; }];
}, },
getItemIcon(item) { getItemIcon(item) {
@ -94,6 +94,9 @@ export default {
visible(item) { visible(item) {
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false); return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
}, },
disabled(item) {
return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
},
updateInkBar() { updateInkBar() {
let tabs = this.$refs.nav.children; let tabs = this.$refs.nav.children;
let inkHighlighted = false; let inkHighlighted = false;

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

@ -4,14 +4,14 @@
<li :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" <li :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator"
@mouseenter="onItemMouseEnter($event, item)" role="none"> @mouseenter="onItemMouseEnter($event, item)" role="none">
<template v-if="!template"> <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"> <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-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span> <span class="p-menuitem-text">{{item.label}}</span>
</a> </a>
</router-link> </router-link>
<a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem" <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-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span> <span class="p-menuitem-text">{{item.label}}</span>
<span class="p-submenu-icon pi pi-angle-right" v-if="item.items"></span> <span class="p-submenu-icon pi pi-angle-right" v-if="item.items"></span>
@ -78,7 +78,7 @@ export default {
}, },
methods: { methods: {
onItemMouseEnter(event, item) { onItemMouseEnter(event, item) {
if (item.disabled) { if (this.disabled(item)) {
event.preventDefault(); event.preventDefault();
return; return;
} }
@ -93,7 +93,7 @@ export default {
} }
}, },
onItemClick(event, item, navigate) { onItemClick(event, item, navigate) {
if (item.disabled) { if (this.disabled(item)) {
event.preventDefault(); event.preventDefault();
return; return;
} }
@ -201,7 +201,7 @@ export default {
] ]
}, },
getLinkClass(item) { getLinkClass(item) {
return ['p-menuitem-link', {'p-disabled': item.disabled}]; return ['p-menuitem-link', {'p-disabled': this.disabled(item)}];
}, },
bindDocumentClickListener() { bindDocumentClickListener() {
if (!this.documentClickListener) { if (!this.documentClickListener) {
@ -223,6 +223,9 @@ export default {
}, },
visible(item) { visible(item) {
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false); return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
},
disabled(item) {
return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
} }
}, },
computed: { computed: {

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

@ -76,9 +76,9 @@ const items: [
</tr> </tr>
<tr> <tr>
<td>disabled</td> <td>disabled</td>
<td>boolean</td> <td>boolean/function</td>
<td>false</td> <td>false</td>
<td>When set as true, disables the menuitem.</td> <td>A boolean or a function to return a boolean to specify if the item is disabled.</td>
</tr> </tr>
<tr> <tr>
<td>visible</td> <td>visible</td>