Refactor #4351 - For MegaMenu
parent
8cc457318b
commit
6ec518c771
|
@ -22,6 +22,7 @@
|
||||||
:exact="exact"
|
:exact="exact"
|
||||||
:level="0"
|
:level="0"
|
||||||
:pt="pt"
|
:pt="pt"
|
||||||
|
:unstyled="unstyled"
|
||||||
@focus="onFocus"
|
@focus="onFocus"
|
||||||
@blur="onBlur"
|
@blur="onBlur"
|
||||||
@keydown="onKeyDown"
|
@keydown="onKeyDown"
|
||||||
|
@ -43,36 +44,6 @@ export default {
|
||||||
name: 'MegaMenu',
|
name: 'MegaMenu',
|
||||||
extends: BaseMegaMenu,
|
extends: BaseMegaMenu,
|
||||||
emits: ['focus', 'blur'],
|
emits: ['focus', 'blur'],
|
||||||
props: {
|
|
||||||
model: {
|
|
||||||
type: Array,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
orientation: {
|
|
||||||
type: String,
|
|
||||||
default: 'horizontal'
|
|
||||||
},
|
|
||||||
exact: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
tabindex: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
'aria-labelledby': {
|
|
||||||
type: String,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
'aria-label': {
|
|
||||||
type: String,
|
|
||||||
default: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
outsideClickListener: null,
|
outsideClickListener: null,
|
||||||
resizeListener: null,
|
resizeListener: null,
|
||||||
container: null,
|
container: null,
|
||||||
|
@ -102,6 +73,11 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
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,20 +26,20 @@
|
||||||
<a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, index, 'action')">
|
<a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, index, 'action')">
|
||||||
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
|
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
|
||||||
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
|
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
|
||||||
<span :class="cx('text')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
|
<span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
|
||||||
</a>
|
</a>
|
||||||
</router-link>
|
</router-link>
|
||||||
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
|
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
|
||||||
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
|
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
|
||||||
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
|
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
|
||||||
<span :class="cx('text')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
|
<span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
|
||||||
<template v-if="isItemGroup(processedItem)">
|
<template v-if="isItemGroup(processedItem)">
|
||||||
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
|
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
|
||||||
<component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
|
<component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
|
||||||
</template>
|
</template>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
<component v-else :is="templates.item" :item="processedItem.item"></component>
|
<component v-else :is="templates.item" :item="processedItem.item" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" :class="cx('panel')" v-bind="ptm('panel')">
|
<div v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" :class="cx('panel')" v-bind="ptm('panel')">
|
||||||
<div :class="cx('grid')" v-bind="ptm('grid')">
|
<div :class="cx('grid')" v-bind="ptm('grid')">
|
||||||
|
@ -84,6 +84,7 @@ import AngleDownIcon from 'primevue/icons/angledown';
|
||||||
import AngleRightIcon from 'primevue/icons/angleright';
|
import AngleRightIcon from 'primevue/icons/angleright';
|
||||||
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: 'MegaMenuSub',
|
name: 'MegaMenuSub',
|
||||||
|
@ -191,6 +192,36 @@ export default {
|
||||||
},
|
},
|
||||||
getAriaPosInset(index) {
|
getAriaPosInset(index) {
|
||||||
return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
|
return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
|
||||||
|
},
|
||||||
|
getMenuItemProps(processedItem, index) {
|
||||||
|
return {
|
||||||
|
action: mergeProps(
|
||||||
|
{
|
||||||
|
class: this.cx('action'),
|
||||||
|
tabindex: -1,
|
||||||
|
'aria-hidden': true
|
||||||
|
},
|
||||||
|
this.getPTOptions(processedItem, index, 'action')
|
||||||
|
),
|
||||||
|
icon: mergeProps(
|
||||||
|
{
|
||||||
|
class: [this.cx('icon'), this.getItemProp(processedItem, 'icon')]
|
||||||
|
},
|
||||||
|
this.getPTOptions(processedItem, index, 'icon')
|
||||||
|
),
|
||||||
|
label: mergeProps(
|
||||||
|
{
|
||||||
|
class: this.cx('label')
|
||||||
|
},
|
||||||
|
this.getPTOptions(processedItem, index, 'label')
|
||||||
|
),
|
||||||
|
submenuicon: mergeProps(
|
||||||
|
{
|
||||||
|
class: this.cx('submenuIcon')
|
||||||
|
},
|
||||||
|
this.getPTOptions(processedItem, index, 'submenuIcon')
|
||||||
|
)
|
||||||
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
Loading…
Reference in New Issue