Refactor #4739 - For Menubar

pull/4763/head
tugcekucukoglu 2023-11-08 15:49:00 +03:00
parent be33e737a1
commit f00540f4ab
5 changed files with 3 additions and 33 deletions

View File

@ -10,10 +10,6 @@ export default {
type: Array, type: Array,
default: null default: null
}, },
exact: {
type: Boolean,
default: true
},
buttonProps: { buttonProps: {
type: null, type: null,
default: null default: null

View File

@ -229,6 +229,7 @@ export interface MenubarProps {
model?: MenuItem[] | undefined; model?: MenuItem[] | undefined;
/** /**
* Whether to apply 'router-link-active-exact' class if route exactly matches the item path. * Whether to apply 'router-link-active-exact' class if route exactly matches the item path.
* @deprecated since v3.40.0.
* @defaultValue true * @defaultValue true
*/ */
exact?: boolean | undefined; exact?: boolean | undefined;

View File

@ -34,7 +34,6 @@
:menuId="id" :menuId="id"
:focusedItemId="focused ? focusedItemId : undefined" :focusedItemId="focused ? focusedItemId : undefined"
:activeItemPath="activeItemPath" :activeItemPath="activeItemPath"
:exact="exact"
:level="0" :level="0"
:aria-labelledby="ariaLabelledby" :aria-labelledby="ariaLabelledby"
:aria-label="ariaLabel" :aria-label="ariaLabel"
@ -89,11 +88,6 @@ export default {
outsideClickListener: null, outsideClickListener: null,
container: null, container: null,
menubar: null, menubar: 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();
}, },

View File

@ -21,14 +21,7 @@
> >
<div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')"> <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
<template v-if="!templates.item"> <template v-if="!templates.item">
<router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom> <a 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-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')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
</a>
</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')">
<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('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span> <span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
@ -50,7 +43,6 @@
:mobileActive="mobileActive" :mobileActive="mobileActive"
:activeItemPath="activeItemPath" :activeItemPath="activeItemPath"
:templates="templates" :templates="templates"
:exact="exact"
:level="level + 1" :level="level + 1"
:pt="pt" :pt="pt"
:unstyled="unstyled" :unstyled="unstyled"
@ -104,10 +96,6 @@ export default {
type: Object, type: Object,
default: null default: null
}, },
exact: {
type: Boolean,
default: true
},
level: { level: {
type: Number, type: Number,
default: 0 default: 0
@ -173,9 +161,6 @@ export default {
onItemMouseEnter(event, processedItem) { onItemMouseEnter(event, processedItem) {
this.$emit('item-mouseenter', { originalEvent: event, processedItem }); this.$emit('item-mouseenter', { originalEvent: event, processedItem });
}, },
onItemActionClick(event, navigate) {
navigate && navigate(event);
},
getAriaSetSize() { getAriaSetSize() {
return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length; return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;
}, },

View File

@ -99,13 +99,7 @@ const classes = {
} }
], ],
content: 'p-menuitem-content', content: 'p-menuitem-content',
action: ({ props, isActive, isExactActive }) => [ action: 'p-menuitem-link',
'p-menuitem-link',
{
'router-link-active': isActive,
'router-link-active-exact': props.exact && isExactActive
}
],
icon: 'p-menuitem-icon', icon: 'p-menuitem-icon',
label: 'p-menuitem-text', label: 'p-menuitem-text',
submenuIcon: 'p-submenu-icon', submenuIcon: 'p-submenu-icon',