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

Refactor #4196 - For PanelMenu

pull/4203/head
Tuğçe Küçükoğlu 2023-07-24 13:48:47 +03:00
parent 501b26039c
commit 10fd09df83
3 changed files with 28 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -134,6 +134,10 @@ export interface PanelMenuState {
* Defines current options in PanelMenu component.
*/
export interface PanelMenuContext {
/**
* Index of the menuitem.
*/
index: number;
/**
* Current active state of menuitem as a boolean.
* @defaultValue false

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

@ -13,26 +13,26 @@
:aria-disabled="isItemDisabled(item)"
@click="onHeaderClick($event, item)"
@keydown="onHeaderKeyDown($event, item)"
v-bind="getPTOptions(item, 'header')"
v-bind="getPTOptions('header', item, index)"
:data-p-highlight="isItemActive(item)"
:data-p-disabled="isItemDisabled(item)"
>
<div :class="cx('headerContent')" v-bind="getPTOptions(item, 'headerContent')">
<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(item, 'headerAction')">
<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(item, 'headerIcon')" />
<span :class="cx('headerLabel')" v-bind="getPTOptions(item, 'headerLabel')">{{ getItemLabel(item) }}</span>
<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(item, 'headerAction')">
<a v-else :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(item, 'submenuIcon')" />
<component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions('submenuIcon', item, index)" />
</slot>
<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(item, 'headerIcon')" />
<span :class="cx('headerLabel')" v-bind="getPTOptions(item, 'headerLabel')">{{ getItemLabel(item) }}</span>
<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>
</template>
<component v-else :is="$slots.item" :item="item"></component>
@ -91,9 +91,10 @@ export default {
getItemLabel(item) {
return this.getItemProp(item, 'label');
},
getPTOptions(item, key) {
getPTOptions(key, item, index) {
return this.ptm(key, {
options: {
context: {
index,
active: this.isItemActive(item),
focused: this.isItemFocused(item)
}

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

@ -12,27 +12,27 @@
:aria-level="level + 1"
:aria-setsize="getAriaSetSize()"
:aria-posinset="getAriaPosInset(index)"
v-bind="getPTOptions(processedItem, 'menuitem')"
v-bind="getPTOptions('menuitem', processedItem, index)"
:data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)"
>
<div :class="cx('content')" @click="onItemClick($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
<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(processedItem, 'action')">
<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(processedItem, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<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(processedItem, '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('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(processedItem, 'submenuIcon')" />
<component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<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)" />
</template>
<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, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<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>
</template>
<component v-else :is="templates.item" :item="processedItem.item"></component>
@ -127,9 +127,10 @@ export default {
getItemLabel(processedItem) {
return this.getItemProp(processedItem, 'label');
},
getPTOptions(processedItem, key) {
getPTOptions(key, processedItem, index) {
return this.ptm(key, {
context: {
index,
active: this.isItemActive(processedItem),
focused: this.isItemFocused(processedItem)
}