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. * Defines current options in PanelMenu component.
*/ */
export interface PanelMenuContext { export interface PanelMenuContext {
/**
* Index of the menuitem.
*/
index: number;
/** /**
* Current active state of menuitem as a boolean. * Current active state of menuitem as a boolean.
* @defaultValue false * @defaultValue false

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

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

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

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