Refactor #4351 - For Menu
parent
c57faf3db1
commit
ba6ed5461d
components/lib/menu
|
@ -22,7 +22,7 @@
|
||||||
<template v-for="(item, i) of model" :key="label(item) + i.toString()">
|
<template v-for="(item, i) of model" :key="label(item) + i.toString()">
|
||||||
<template v-if="item.items && visible(item) && !item.separator">
|
<template v-if="item.items && visible(item) && !item.separator">
|
||||||
<li v-if="item.items" :id="id + '_' + i" :class="cx('submenuHeader')" role="none" v-bind="ptm('submenuHeader')">
|
<li v-if="item.items" :id="id + '_' + i" :class="cx('submenuHeader')" role="none" v-bind="ptm('submenuHeader')">
|
||||||
<slot name="item" :item="item">{{ label(item) }}</slot>
|
<slot name="submenuheader" :item="item">{{ label(item) }}</slot>
|
||||||
</li>
|
</li>
|
||||||
<template v-for="(child, j) of item.items" :key="child.label + i + '_' + j">
|
<template v-for="(child, j) of item.items" :key="child.label + i + '_' + j">
|
||||||
<PVMenuitem v-if="visible(child) && !child.separator" :id="id + '_' + i + '_' + j" :item="child" :templates="$slots" :exact="exact" :focusedOptionId="focusedOptionId" @item-click="itemClick" :pt="pt" />
|
<PVMenuitem v-if="visible(child) && !child.separator" :id="id + '_' + i + '_' + j" :item="child" :templates="$slots" :exact="exact" :focusedOptionId="focusedOptionId" @item-click="itemClick" :pt="pt" />
|
||||||
|
@ -73,6 +73,11 @@ export default {
|
||||||
resizeListener: null,
|
resizeListener: null,
|
||||||
container: null,
|
container: null,
|
||||||
list: null,
|
list: null,
|
||||||
|
beforeMount() {
|
||||||
|
if (!this.$slots.item) {
|
||||||
|
console.warn('In future versions, vue-router support will be removed. Item templating should be used.');
|
||||||
|
}
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.id = this.id || UniqueComponentId();
|
this.id = this.id || UniqueComponentId();
|
||||||
|
|
||||||
|
|
|
@ -26,7 +26,7 @@
|
||||||
<span :class="cx('label')" v-bind="getPTOptions('label')">{{ label() }}</span>
|
<span :class="cx('label')" v-bind="getPTOptions('label')">{{ label() }}</span>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
<component v-else :is="templates.item" :item="item"></component>
|
<component v-else-if="templates.item" :is="templates.item" :item="item" :label="label()" :props="getMenuItemProps(item)"></component>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
|
@ -35,6 +35,7 @@
|
||||||
import BaseComponent from 'primevue/basecomponent';
|
import BaseComponent from 'primevue/basecomponent';
|
||||||
import Ripple from 'primevue/ripple';
|
import Ripple from 'primevue/ripple';
|
||||||
import { ObjectUtils } from 'primevue/utils';
|
import { ObjectUtils } from 'primevue/utils';
|
||||||
|
import { mergeProps } from 'vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Menuitem',
|
name: 'Menuitem',
|
||||||
|
@ -83,6 +84,30 @@ export default {
|
||||||
},
|
},
|
||||||
label() {
|
label() {
|
||||||
return typeof this.item.label === 'function' ? this.item.label() : this.item.label;
|
return typeof this.item.label === 'function' ? this.item.label() : this.item.label;
|
||||||
|
},
|
||||||
|
getMenuItemProps(item) {
|
||||||
|
return {
|
||||||
|
action: mergeProps(
|
||||||
|
{
|
||||||
|
class: this.cx('action'),
|
||||||
|
tabindex: '-1',
|
||||||
|
'aria-hidden': true
|
||||||
|
},
|
||||||
|
this.getPTOptions('action')
|
||||||
|
),
|
||||||
|
icon: mergeProps(
|
||||||
|
{
|
||||||
|
class: [this.cx('icon'), item.icon]
|
||||||
|
},
|
||||||
|
this.getPTOptions('icon')
|
||||||
|
),
|
||||||
|
label: mergeProps(
|
||||||
|
{
|
||||||
|
class: this.cx('label')
|
||||||
|
},
|
||||||
|
this.getPTOptions('label')
|
||||||
|
)
|
||||||
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
directives: {
|
directives: {
|
||||||
|
|
Loading…
Reference in New Issue