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

Refactor #4739 - For PanelMenu

pull/4763/head
tugcekucukoglu 2023-11-08 15:49:16 +03:00
parent f00540f4ab
commit c1c866b23b
6 changed files with 5 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/lib/panelmenu/BasePanelMenu.vue
View File

@ -14,10 +14,6 @@ export default {
type: Object,
default: null
},
exact: {
type: Boolean,
default: true
},
tabindex: {
type: Number,
default: 0

1
components/lib/panelmenu/PanelMenu.d.ts vendored
View File

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

18
components/lib/panelmenu/PanelMenu.vue
View File

@ -19,14 +19,7 @@
>
<div :class="cx('headerContent')" v-bind="getPTOptions('headerContent', item, index)">
<template v-if="!$slots.item">
<router-link v-if="getItemProp(item, 'to') && !isItemDisabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(item, 'to')" custom>
<a :href="href" :class="cx('headerAction', { isActive, isExactActive })" :tabindex="-1" @click="onHeaderActionClick($event, navigate)" v-bind="getPTOptions('headerAction', item, index)">
<component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="[cx('headerIcon'), getItemProp(item, 'icon')]" />
<span v-else-if="getItemProp(item, 'icon')" :class="[cx('headerIcon'), getItemProp(item, 'icon')]" v-bind="getPTOptions('headerIcon', item, index)" />
<span :class="cx('headerLabel')" v-bind="getPTOptions('headerLabel', item, index)">{{ getItemLabel(item) }}</span>
</a>
</router-link>
<a v-else :href="getItemProp(item, 'url')" :class="cx('headerAction')" :tabindex="-1" v-bind="getPTOptions('headerAction', item, index)">
<a :href="getItemProp(item, 'url')" :class="cx('headerAction')" :tabindex="-1" v-bind="getPTOptions('headerAction', item, index)">
<slot v-if="getItemProp(item, 'items')" name="submenuicon" :active="isItemActive(item)">
<component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions('submenuIcon', item, index)" />
</slot>
@ -48,7 +41,6 @@
:expandedKeys="expandedKeys"
@item-toggle="changeExpandedKeys"
@header-focus="updateFocusedHeader"
:exact="exact"
:pt="pt"
:unstyled="unstyled"
/>
@ -83,11 +75,6 @@ export default {
this.id = newValue || UniqueComponentId();
}
},
beforeMount() {
if (!this.$slots.item) {
console.warn('In future versions, vue-router support will be removed. Item templating should be used.');
}
},
mounted() {
this.id = this.id || UniqueComponentId();
},
@ -200,9 +187,6 @@ export default {
headerAction ? headerAction.click() : this.onHeaderClick(event, item);
event.preventDefault();
},
onHeaderActionClick(event, navigate) {
navigate && navigate(event);
},
findNextHeader(panelElement, selfCheck = false) {
const nextPanelElement = selfCheck ? panelElement : panelElement.nextElementSibling;
const headerElement = DomHandler.findSingle(nextPanelElement, '[data-pc-section="header"]');

5
components/lib/panelmenu/PanelMenuList.vue
View File

@ -10,7 +10,6 @@
:items="processedItems"
:templates="templates"
:activeItemPath="activeItemPath"
:exact="exact"
@focus="onFocus"
@blur="onBlur"
@keydown="onKeyDown"
@ -47,10 +46,6 @@ export default {
expandedKeys: {
type: Object,
default: null
},
exact: {
type: Boolean,
default: true
}
},
searchTimeout: null,

17
components/lib/panelmenu/PanelMenuSub.vue
View File

@ -18,14 +18,7 @@
>
<div :class="cx('content')" @click="onItemClick($event, processedItem)" v-bind="getPTOptions('content', processedItem, index)">
<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="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions('action', processedItem, index)">
<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('icon', processedItem, index)" />
<span :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ 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('action', processedItem, index)">
<a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action', processedItem, index)">
<template v-if="isItemGroup(processedItem)">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions('submenuIcon', processedItem, index)" />
<component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions('submenuIcon', processedItem, index)" />
@ -57,7 +50,6 @@
:level="level + 1"
:templates="templates"
:activeItemPath="activeItemPath"
:exact="exact"
@item-toggle="onItemToggle"
:pt="pt"
:unstyled="unstyled"
@ -115,10 +107,6 @@ export default {
type: Object,
default: null
},
exact: {
type: Boolean,
default: true
},
tabindex: {
type: Number,
default: -1
@ -170,9 +158,6 @@ export default {
onItemToggle(event) {
this.$emit('item-toggle', event);
},
onItemActionClick(event, navigate) {
navigate && navigate(event);
},
getAriaSetSize() {
return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;
},

16
components/lib/panelmenu/style/PanelMenuStyle.js
View File

@ -48,13 +48,7 @@ const classes = {
}
],
headerContent: 'p-panelmenu-header-content',
headerAction: ({ instance, isActive, isExactActive }) => [
'p-panelmenu-header-action',
{
'router-link-active': isActive,
'router-link-active-exact': instance.exact && isExactActive
}
],
headerAction: 'p-panelmenu-header-action',
headerIcon: 'p-menuitem-icon',
headerLabel: 'p-menuitem-text',
toggleableContent: 'p-toggleable-content',
@ -68,13 +62,7 @@ const classes = {
}
],
content: 'p-menuitem-content',
action: ({ props, isActive, isExactActive }) => [
'p-menuitem-link',
{
'router-link-active': isActive,
'router-link-active-exact': props.exact && isExactActive
}
],
action: 'p-menuitem-link',
icon: 'p-menuitem-icon',
label: 'p-menuitem-text',
submenuIcon: 'p-submenu-icon',