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

Fixed #449 - Dynamic labels for Menu components

pull/1792/head
Cagatay Civici 2021-11-18 12:22:44 +03:00
parent c0cffe4b67
commit f64c21c684
13 changed files with 77 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,12 +4,12 @@
<router-link v-if="item.to" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
<a :href="href" :class="linkClass({isActive, isExactActive})" @click="onClick($event, navigate)">
<span v-if="item.icon" :class="iconClass"></span>
<span v-if="item.label" class="p-menuitem-text">{{item.label}}</span>
<span v-if="item.label" class="p-menuitem-text">{{label()}}</span>
</a>
</router-link>
<a v-else :href="item.url||'#'" :class="linkClass()" @click="onClick" :target="item.target">
<span v-if="item.icon" :class="iconClass"></span>
<span v-if="item.label" class="p-menuitem-text">{{item.label}}</span>
<span v-if="item.label" class="p-menuitem-text">{{label()}}</span>
</a>
</template>
<component v-else :is="template" :item="item"></component>
@ -51,6 +51,9 @@ export default {
},
disabled(item) {
return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
},
label() {
return (typeof this.item.label === 'function' ? this.item.label() : this.item.label);
}
},
computed: {

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

@ -1,25 +1,25 @@
<template>
<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" :key="item.label + i.toString()">
<template v-for="(item, i) of model" :key="label(item) + i.toString()">
<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 && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
<a :href="href" @click="onItemClick($event, item, navigate)" :class="linkClass(item, {isActive, isExactActive})" v-ripple role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<span class="p-menuitem-text">{{label(item)}}</span>
</a>
</router-link>
<a v-else :href="item.url" :class="linkClass(item)" :target="item.target" @click="onItemClick($event, item)" v-ripple
: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-menuitem-text">{{label(item)}}</span>
<span class="p-submenu-icon pi pi-angle-right" v-if="item.items"></span>
</a>
</template>
<component v-else :is="template" :item="item"></component>
<ContextMenuSub :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" :template="template"
<ContextMenuSub :model="item.items" v-if="visible(item) && item.items" :key="label(item) + '_sub_'" :template="template"
@leaf-click="onLeafClick" :parentActive="item === activeItem" :exact="exact" />
</li>
<li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
@ -148,6 +148,9 @@ export default {
},
disabled(item) {
return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
},
label(item) {
return (typeof item.label === 'function' ? item.label() : item.label);
}
},
computed: {

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

@ -4,41 +4,41 @@
<slot name="start"></slot>
</div>
<ul class="p-megamenu-root-list" role="menubar">
<template v-for="(category,index) of model" :key="category.label + '_' + index">
<template v-for="(category,index) of model" :key="label(category) + '_' + index">
<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 && !disabled(category)" :to="category.to" custom v-slot="{navigate, href, isActive, isExactActive}">
<a :href="href" :class="linkClass(category, {isActive, isExactActive})" @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>
<span class="p-menuitem-text">{{label(category)}}</span>
</a>
</router-link>
<a v-else :href="category.url" :class="linkClass(category)" :target="category.target" @click="onCategoryClick($event, category)" @keydown="onCategoryKeydown($event, category)"
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 class="p-menuitem-text">{{label(category)}}</span>
<span v-if="category.items" :class="getCategorySubMenuIcon()"></span>
</a>
</template>
<component v-else :is="$slots.item" :item="category"></component>
<div class="p-megamenu-panel" v-if="category.items">
<div class="p-megamenu-grid">
<div v-for="(column,columnIndex) of category.items" :key="category.label + '_column_' + columnIndex" :class="getColumnClassName(category)">
<div v-for="(column,columnIndex) of category.items" :key="label(category) + '_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" :key="item.label + i.toString()">
<template v-for="(item, i) of submenu.items" :key="label(item) + 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 && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
<a :href="href" :class="linkClass(item, {isActive, isExactActive})" @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>
<span class="p-menuitem-text">{{label(item)}}</span>
</a>
</router-link>
<a v-else :href="item.url" :class="linkClass(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="p-menuitem-text">{{label(item)}}</span>
<span :class="getSubmenuIcon()" v-if="item.items"></span>
</a>
</template>
@ -308,6 +308,9 @@ export default {
},
disabled(item) {
return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
},
label(item) {
return (typeof item.disabled === 'function' ? item.label() : item.label);
}
},
computed: {

9
src/components/menu/Menu.vue
View File

@ -3,10 +3,10 @@
<transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
<div :ref="containerRef" :class="containerClass" v-if="popup ? overlayVisible : true" v-bind="$attrs" @click="onOverlayClick">
<ul class="p-menu-list p-reset" role="menu">
<template v-for="(item, i) of model" :key="item.label + i.toString()">
<template v-for="(item, i) of model" :key="label(item) + i.toString()">
<template v-if="item.items && visible(item) && !item.separator">
<li class="p-submenu-header" v-if="item.items">
<slot name="item" :item="item">{{item.label}}</slot>
<slot name="item" :item="item">{{label(item)}}</slot>
</li>
<template v-for="(child, j) of item.items" :key="child.label + i + j">
<Menuitem v-if="visible(child) && !child.separator" :item="child" @click="itemClick" :template="$slots.item" :exact="exact" />
@ -14,7 +14,7 @@
</template>
</template>
<li v-else-if="visible(item) && item.separator" :class="['p-menu-separator', item.class]" :style="item.style" :key="'separator' + i.toString()" role="separator"></li>
<Menuitem v-else :key="item.label + i.toString()" :item="item" @click="itemClick" :template="$slots.item" :exact="exact" />
<Menuitem v-else :key="label(item) + i.toString()" :item="item" @click="itemClick" :template="$slots.item" :exact="exact" />
</template>
</ul>
</div>
@ -194,6 +194,9 @@ export default {
visible(item) {
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
},
label(item) {
return (typeof item.label === 'function' ? item.label() : item.label);
},
containerRef(el) {
this.container = el;
},

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

@ -4,12 +4,12 @@
<router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
<a :href="href" @click="onClick($event, navigate)" :class="linkClass(item, {isActive, isExactActive})" v-ripple role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<span class="p-menuitem-text">{{label()}}</span>
</a>
</router-link>
<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>
<span class="p-menuitem-text">{{label()}}</span>
</a>
</template>
<component v-else :is="template" :item="item"></component>
@ -48,6 +48,9 @@ export default {
},
disabled(item) {
return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
},
label() {
return (typeof this.item.label === 'function' ? this.item.label() : this.item.label);
}
},
computed: {

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

@ -1,24 +1,24 @@
<template>
<ul :class="containerClass" :role="root ? 'menubar' : 'menu'">
<template v-for="(item, i) of model" :key="item.label + i.toString()">
<template v-for="(item, i) of model" :key="label(item) + i.toString()">
<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 && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
<a :href="href" @click="onItemClick($event, item, navigate)" :class="linkClass(item, {isActive, isExactActive})" v-ripple @keydown="onItemKeyDown($event, item)" role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<span class="p-menuitem-text">{{label(item)}}</span>
</a>
</router-link>
<a v-else :href="item.url" :class="linkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
@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="p-menuitem-text">{{label(item)}}</span>
<span :class="getSubmenuIcon()" v-if="item.items"></span>
</a>
</template>
<component v-else :is="template" :item="item"></component>
<MenubarSub :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" :mobileActive="mobileActive"
<MenubarSub :model="item.items" v-if="visible(item) && item.items" :key="label(item) + '_sub_'" :mobileActive="mobileActive"
@leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" :template="template" :exact="exact" />
</li>
<li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
@ -289,6 +289,9 @@ export default {
},
disabled(item) {
return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
},
label(item) {
return (typeof item.label === 'function' ? item.label() : item.label);
}
},
computed: {

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

@ -1,20 +1,20 @@
<template>
<div class="p-panelmenu p-component">
<template v-for="(item, index) of model" :key="item.label + '_' + index">
<template v-for="(item, index) of model" :key="label(item) + '_' + index">
<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 && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
<a :href="href" :class="getHeaderLinkClass(item, {isActive, isExactActive})" @click="onItemClick($event, item, navigate)" role="treeitem">
<span v-if="item.icon" :class="getPanelIcon(item)"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<span class="p-menuitem-text">{{label(item)}}</span>
</a>
</router-link>
<a v-else :href="item.url" :class="getHeaderLinkClass(item)" @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>
<span class="p-menuitem-text">{{item.label}}</span>
<span class="p-menuitem-text">{{label(item)}}</span>
</a>
</template>
<component v-else :is="$slots.item" :item="item"></component>
@ -128,6 +128,9 @@ export default {
},
disabled(item) {
return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
},
label(item) {
return (typeof item.label === 'function' ? item.label() : item.label);
}
},
components: {

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

@ -1,25 +1,25 @@
<template>
<ul class="p-submenu-list" role="tree">
<template v-for="(item, i) of model" :key="item.label + i.toString()">
<template v-for="(item, i) of model" :key="label(item) + i.toString()">
<li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator">
<template v-if="!template">
<router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive:isRouterActive, isExactActive}">
<a :href="href" :class="linkClass(item, {isRouterActive, isExactActive})" @click="onItemClick($event, item, navigate)" role="treeitem" :aria-expanded="isActive(item)">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<span class="p-menuitem-text">{{label(item)}}</span>
</a>
</router-link>
<a v-else :href="item.url" :class="linkClass(item)" :target="item.target" @click="onItemClick($event, item)"
role="treeitem" :aria-expanded="isActive(item)" :tabindex="disabled(item) ? null : '0'">
<span :class="getSubmenuIcon(item)" v-if="item.items"></span>
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<span class="p-menuitem-text">{{label(item)}}</span>
</a>
</template>
<component v-else :is="template" :item="item"></component>
<transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="isActive(item)">
<PanelMenuSub :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" :template="template"
<PanelMenuSub :model="item.items" v-if="visible(item) && item.items" :key="label(item) + '_sub_'" :template="template"
:expandedKeys="expandedKeys" @item-toggle="$emit('item-toggle', $event)" :exact="exact"/>
</div>
</transition>
@ -107,6 +107,9 @@ export default {
},
disabled(item) {
return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
},
label(item) {
return (typeof item.label === 'function' ? item.label() : item.label);
}
}
}

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

@ -7,12 +7,12 @@
<router-link :to="item.to" v-if="!isItemDisabled(item)" custom v-slot="{navigate, href, isActive, isExactActive}">
<a :href="href" :class="linkClass({isActive, isExactActive})" @click="onItemClick($event, item, navigate)" role="presentation">
<span class="p-steps-number">{{index + 1}}</span>
<span class="p-steps-title">{{item.label}}</span>
<span class="p-steps-title">{{label(item)}}</span>
</a>
</router-link>
<span v-else :class="linkClass()" role="presentation">
<span class="p-steps-number">{{index + 1}}</span>
<span class="p-steps-title">{{item.label}}</span>
<span class="p-steps-title">{{label(item)}}</span>
</span>
</template>
<component v-else :is="$slots.item" :item="item"></component>
@ -86,6 +86,9 @@ export default {
},
disabled(item) {
return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
},
label(item) {
return (typeof item.label === 'function' ? item.label() : item.label);
}
},
computed: {

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

@ -1,13 +1,13 @@
<template>
<div class="p-tabmenu p-component">
<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="label(item) + '_' + i.toString()">
<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">
<template v-if="!$slots.item">
<a :href="href" class="p-menuitem-link" @click="onItemClick($event, item, i, navigate)" role="presentation" v-ripple>
<span :class="getItemIcon(item)" v-if="item.icon"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<span class="p-menuitem-text">{{label(item)}}</span>
</a>
</template>
<component v-else :is="$slots.item" :item="item"></component>
@ -17,7 +17,7 @@
<template v-if="!$slots.item">
<a :href="item.url" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item, i)" role="presentation" :tabindex="disabled(item) ? null : '0'" v-ripple>
<span :class="getItemIcon(item)" v-if="item.icon"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<span class="p-menuitem-text">{{label(item)}}</span>
</a>
</template>
<component v-else :is="$slots.item" :item="item"></component>
@ -121,6 +121,9 @@ export default {
disabled(item) {
return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
},
label(item) {
return (typeof item.label === 'function' ? item.label() : item.label);
},
updateInkBar() {
let tabs = this.$refs.nav.children;
let inkHighlighted = false;

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

@ -1,24 +1,24 @@
<template>
<ul ref="element" :class="containerClass" role="'menubar' : 'menu'" aria-orientation="horizontal">
<template v-for="(item, i) of model" :key="item.label + i.toString()">
<template v-for="(item, i) of model" :key="label(item) + i.toString()">
<li :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator"
@mouseenter="onItemMouseEnter($event, item)" role="none">
<template v-if="!template">
<router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
<a :href="href" @click="onItemClick($event, item, navigate)" :class="linkClass(item, {isActive, isExactActive})" v-ripple @keydown="onItemKeyDown($event, item)" role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<span class="p-menuitem-text">{{label(item)}}</span>
</a>
</router-link>
<a v-else :href="item.url" :class="linkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
@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="p-menuitem-text">{{label(item)}}</span>
<span class="p-submenu-icon pi pi-angle-right" v-if="item.items"></span>
</a>
</template>
<component v-else :is="template" :item="item"></component>
<TieredMenuSub :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" :template="template"
<TieredMenuSub :model="item.items" v-if="visible(item) && item.items" :key="label(item) + '_sub_'" :template="template"
@leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" :exact="exact" />
</li>
<li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
@ -234,6 +234,9 @@ export default {
},
disabled(item) {
return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
},
label(item) {
return (typeof item.label === 'function' ? item.label() : item.label);
}
},
computed: {

5
src/components/tree/TreeNode.vue
View File

@ -13,7 +13,7 @@
<span :class="icon"></span>
<span class="p-treenode-label">
<component :is="templates[node.type]||templates['default']" :node="node" v-if="templates[node.type]||templates['default']"/>
<template v-else>{{node.label}}</template>
<template v-else>{{label(node)}}</template>
</span>
</div>
<ul class="p-treenode-children" role="group" v-if="hasChildren && expanded">
@ -59,6 +59,9 @@ export default {
toggle() {
this.$emit('node-toggle', this.node);
},
label(node) {
return (typeof node.label === 'function' ? node.label() : node.label);
},
onChildNodeToggle(node) {
this.$emit('node-toggle', node);
},

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

@ -40,9 +40,9 @@ const items: [
<tbody>
<tr>
<td>label</td>
<td>string</td>
<td>string | function</td>
<td>null</td>
<td>Text of the item.</td>
<td>Property name or getter function to use as the label of an item.</td>
</tr>
<tr>
<td>icon</td>