Refactor #4351 - For MegaMenu

pull/4356/head
Tuğçe Küçükoğlu 2023-08-30 10:27:41 +03:00
parent 8cc457318b
commit 6ec518c771
2 changed files with 40 additions and 33 deletions

View File

@ -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();
}, },

View File

@ -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: {