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

Refactor #3965 - For PanelMenu

pull/4004/head
Tuğçe Küçükoğlu 2023-05-30 11:25:54 +03:00
parent bcd1c91084
commit 4e3488ec6b
5 changed files with 210 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
components/lib/panelmenu/BasePanelMenu.vue Normal file
View File

@ -0,0 +1,125 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-panelmenu .p-panelmenu-header-action {
display: flex;
align-items: center;
user-select: none;
cursor: pointer;
position: relative;
text-decoration: none;
}
.p-panelmenu .p-panelmenu-header-action:focus {
z-index: 1;
}
.p-panelmenu .p-submenu-list {
margin: 0;
padding: 0;
list-style: none;
}
.p-panelmenu .p-menuitem-link {
display: flex;
align-items: center;
user-select: none;
cursor: pointer;
text-decoration: none;
position: relative;
overflow: hidden;
}
.p-panelmenu .p-menuitem-text {
line-height: 1;
}
`;
const inlineStyles = {
submenu: ({ context, processedItem }) => ({ display: context.isItemActive(processedItem) ? 'block' : 'none' })
};
const classes = {
root: 'p-panelmenu p-component',
panel: 'p-panelmenu-panel',
header: ({ instance, item }) => [
'p-panelmenu-header',
{
'p-highlight': instance.isItemActive(item),
'p-disabled': instance.isItemDisabled(item)
}
],
headerContent: 'p-panelmenu-header-content',
headerAction: ({ instance, isActive, isExactActive }) => [
'p-panelmenu-header-action',
{
'router-link-active': isActive,
'router-link-active-exact': instance.exact && isExactActive
}
],
headerIcon: 'p-menuitem-icon',
headerLabel: 'p-menuitem-text',
toggleableContent: 'p-toggleable-content',
menuContent: 'p-panelmenu-content',
menu: 'p-panelmenu-root-list',
menuitem: ({ context, processedItem }) => [
'p-menuitem',
{
'p-focus': context.isItemFocused(processedItem),
'p-disabled': context.isItemDisabled(processedItem)
}
],
content: 'p-menuitem-content',
action: ({ context, isActive, isExactActive }) => [
'p-menuitem-link',
{
'router-link-active': isActive,
'router-link-active-exact': context.exact && isExactActive
}
],
icon: 'p-menuitem-icon',
label: 'p-menuitem-text',
submenuIcon: 'p-submenu-icon',
submenu: 'p-submenu-list',
separator: 'p-menuitem-separator'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_panelmenu_style', manual: true });
export default {
name: 'BasePanelMenu',
extends: BaseComponent,
props: {
model: {
type: Array,
default: null
},
expandedKeys: {
type: Object,
default: null
},
exact: {
type: Boolean,
default: true
},
tabindex: {
type: Number,
default: 0
}
},
css: {
classes,
inlineStyles
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
}
};
</script>

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

@ -91,6 +91,10 @@ export interface PanelMenuPassThroughOptions {
* Uses to pass attributes to the label's DOM element.
*/
label?: PanelMenuPassThroughOptionType;
/**
* Uses to pass attributes to the submenu's DOM element.
*/
submenu?: PanelMenuPassThroughOptionType;
/**
* Uses to pass attributes to the separator's DOM element.
*/
@ -193,6 +197,11 @@ export interface PanelMenuProps {
* @type {PanelMenuPassThroughOptions}
*/
pt?: PanelMenuPassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**

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

@ -1,10 +1,10 @@
<template>
<div :id="id" class="p-panelmenu p-component" v-bind="ptm('root')">
<div :id="id" :class="cx('root')" v-bind="ptm('root')" data-pc-name="panelmenu">
<template v-for="(item, index) of model" :key="getPanelKey(index)">
<div v-if="isItemVisible(item)" :style="getItemProp(item, 'style')" :class="getPanelClass(item)" v-bind="ptm('panel')">
<div v-if="isItemVisible(item)" :style="getItemProp(item, 'style')" :class="[cx('panel'), getItemProp(item, 'class')]" v-bind="ptm('panel')">
<div
:id="getHeaderId(index)"
:class="getHeaderClass(item)"
:class="[cx('header', { item }), getItemProp(item, 'headerClass')]"
:tabindex="isItemDisabled(item) ? -1 : tabindex"
role="button"
:aria-label="getItemLabel(item)"
@ -14,31 +14,33 @@
@click="onHeaderClick($event, item)"
@keydown="onHeaderKeyDown($event, item)"
v-bind="getPTOptions(item, 'header')"
:data-p-highlight="isItemActive(item)"
:data-p-disabled="isItemDisabled(item)"
>
<div class="p-panelmenu-header-content" v-bind="getPTOptions(item, 'headerContent')">
<div :class="cx('headerContent')" v-bind="getPTOptions(item, 'headerContent')">
<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="getHeaderActionClass(item, { isActive, isExactActive })" :tabindex="-1" @click="onHeaderActionClick($event, navigate)" v-bind="getPTOptions(item, 'headerAction')">
<component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="getHeaderIconClass(item)" />
<span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" v-bind="getPTOptions(item, 'headerIcon')" />
<span class="p-menuitem-text" v-bind="getPTOptions(item, 'headerLabel')">{{ getItemLabel(item) }}</span>
<a :href="href" :class="cx('headerAction', { isActive, isExactActive })" :tabindex="-1" @click="onHeaderActionClick($event, navigate)" v-bind="getPTOptions(item, 'headerAction')">
<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>
</a>
</router-link>
<a v-else :href="getItemProp(item, 'url')" :class="getHeaderActionClass(item)" :tabindex="-1" v-bind="getPTOptions(item, 'headerAction')">
<a v-else :href="getItemProp(item, 'url')" :class="cx('headerAction')" :tabindex="-1" v-bind="getPTOptions(item, 'headerAction')">
<slot v-if="getItemProp(item, 'items')" name="submenuicon" :active="isItemActive(item)">
<component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" v-bind="getPTOptions(item, 'submenuIcon')" />
<component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(item, 'submenuIcon')" />
</slot>
<component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="getHeaderIconClass(item)" />
<span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" v-bind="getPTOptions(item, 'headerIcon')" />
<span class="p-menuitem-text" v-bind="getPTOptions(item, 'headerLabel')">{{ getItemLabel(item) }}</span>
<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>
</a>
</template>
<component v-else :is="$slots.item" :item="item"></component>
</div>
</div>
<transition name="p-toggleable-content">
<div v-show="isItemActive(item)" :id="getContentId(index)" class="p-toggleable-content" role="region" :aria-labelledby="getHeaderId(index)" v-bind="ptm('toggleableContent')">
<div v-if="getItemProp(item, 'items')" class="p-panelmenu-content" v-bind="ptm('menuContent')">
<div v-show="isItemActive(item)" :id="getContentId(index)" :class="cx('toggleableContent')" role="region" :aria-labelledby="getHeaderId(index)" v-bind="ptm('toggleableContent')">
<div v-if="getItemProp(item, 'items')" :class="cx('menuContent')" v-bind="ptm('menuContent')">
<PanelMenuList
:panelId="getPanelId(index)"
:items="getItemProp(item, 'items')"
@ -58,34 +60,16 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright';
import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
import BasePanelMenu from './BasePanelMenu.vue';
import PanelMenuList from './PanelMenuList.vue';
export default {
name: 'PanelMenu',
extends: BaseComponent,
extends: BasePanelMenu,
emits: ['update:expandedKeys', 'panel-open', 'panel-close'],
props: {
model: {
type: Array,
default: null
},
expandedKeys: {
type: Object,
default: null
},
exact: {
type: Boolean,
default: true
},
tabindex: {
type: Number,
default: 0
}
},
data() {
return {
id: this.$attrs.id,
@ -181,14 +165,14 @@ export default {
}
},
onHeaderArrowDownKey(event) {
const rootList = DomHandler.hasClass(event.currentTarget, 'p-highlight') ? DomHandler.findSingle(event.currentTarget.nextElementSibling, '.p-panelmenu-root-list') : null;
const rootList = DomHandler.getAttribute(event.currentTarget, 'data-p-highlight') === true ? DomHandler.findSingle(event.currentTarget.nextElementSibling, '[data-pc-section="menu"]') : null;
rootList ? DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: true });
event.preventDefault();
},
onHeaderArrowUpKey(event) {
const prevHeader = this.findPrevHeader(event.currentTarget.parentElement) || this.findLastHeader();
const rootList = DomHandler.hasClass(prevHeader, 'p-highlight') ? DomHandler.findSingle(prevHeader.nextElementSibling, '.p-panelmenu-root-list') : null;
const rootList = DomHandler.getAttribute(prevHeader, 'data-p-highlight') === true ? DomHandler.findSingle(prevHeader.nextElementSibling, '[data-pc-section="menu"]') : null;
rootList ? DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: false });
event.preventDefault();
@ -202,7 +186,7 @@ export default {
event.preventDefault();
},
onHeaderEnterKey(event, item) {
const headerAction = DomHandler.findSingle(event.currentTarget, '.p-panelmenu-header-action');
const headerAction = DomHandler.findSingle(event.currentTarget, '[data-pc-section="headeraction"]');
headerAction ? headerAction.click() : this.onHeaderClick(event, item);
event.preventDefault();
@ -212,15 +196,15 @@ export default {
},
findNextHeader(panelElement, selfCheck = false) {
const nextPanelElement = selfCheck ? panelElement : panelElement.nextElementSibling;
const headerElement = DomHandler.findSingle(nextPanelElement, '.p-panelmenu-header');
const headerElement = DomHandler.findSingle(nextPanelElement, '[data-pc-section="header"]');
return headerElement ? (DomHandler.hasClass(headerElement, 'p-disabled') ? this.findNextHeader(headerElement.parentElement) : headerElement) : null;
return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') ? this.findNextHeader(headerElement.parentElement) : headerElement) : null;
},
findPrevHeader(panelElement, selfCheck = false) {
const prevPanelElement = selfCheck ? panelElement : panelElement.previousElementSibling;
const headerElement = DomHandler.findSingle(prevPanelElement, '.p-panelmenu-header');
const headerElement = DomHandler.findSingle(prevPanelElement, '[data-pc-section="header"]');
return headerElement ? (DomHandler.hasClass(headerElement, 'p-disabled') ? this.findPrevHeader(headerElement.parentElement) : headerElement) : null;
return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') ? this.findPrevHeader(headerElement.parentElement) : headerElement) : null;
},
findFirstHeader() {
return this.findNextHeader(this.$el.firstElementChild, true);
@ -230,8 +214,8 @@ export default {
},
updateFocusedHeader(event) {
const { originalEvent, focusOnNext, selfCheck } = event;
const panelElement = originalEvent.currentTarget.closest('.p-panelmenu-panel');
const header = selfCheck ? DomHandler.findSingle(panelElement, '.p-panelmenu-header') : focusOnNext ? this.findNextHeader(panelElement) : this.findPrevHeader(panelElement);
const panelElement = originalEvent.currentTarget.closest('[data-pc-section="panel"]');
const header = selfCheck ? DomHandler.findSingle(panelElement, '[data-pc-section="header"]') : focusOnNext ? this.findNextHeader(panelElement) : this.findPrevHeader(panelElement);
header ? this.changeFocusedHeader(originalEvent, header) : focusOnNext ? this.onHeaderHomeKey(originalEvent) : this.onHeaderEndKey(originalEvent);
},
@ -257,31 +241,6 @@ export default {
},
changeFocusedHeader(event, element) {
element && DomHandler.focus(element);
},
getPanelClass(item) {
return ['p-panelmenu-panel', this.getItemProp(item, 'class')];
},
getHeaderClass(item) {
return [
'p-panelmenu-header',
this.getItemProp(item, 'headerClass'),
{
'p-highlight': this.isItemActive(item),
'p-disabled': this.isItemDisabled(item)
}
];
},
getHeaderActionClass(item, routerProps) {
return [
'p-panelmenu-header-action',
{
'router-link-active': routerProps && routerProps.isActive,
'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
}
];
},
getHeaderIconClass(item) {
return ['p-menuitem-icon', this.getItemProp(item, 'icon')];
}
},
components: {
@ -291,38 +250,3 @@ export default {
}
};
</script>
<style>
.p-panelmenu .p-panelmenu-header-action {
display: flex;
align-items: center;
user-select: none;
cursor: pointer;
position: relative;
text-decoration: none;
}
.p-panelmenu .p-panelmenu-header-action:focus {
z-index: 1;
}
.p-panelmenu .p-submenu-list {
margin: 0;
padding: 0;
list-style: none;
}
.p-panelmenu .p-menuitem-link {
display: flex;
align-items: center;
user-select: none;
cursor: pointer;
text-decoration: none;
position: relative;
overflow: hidden;
}
.p-panelmenu .p-menuitem-text {
line-height: 1;
}
</style>

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

@ -1,7 +1,7 @@
<template>
<PanelMenuSub
:id="panelId + '_list'"
class="p-panelmenu-root-list"
:class="getCXOptions('menu')"
role="tree"
:tabindex="-1"
:aria-activedescendant="focused ? focusedItemId : undefined"
@ -16,17 +16,18 @@
@keydown="onKeyDown"
@item-toggle="onItemToggle"
:pt="pt"
v-bind="ptm('menu')"
/>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import { DomHandler, ObjectUtils } from 'primevue/utils';
import BasePanelMenu from './BasePanelMenu.vue';
import PanelMenuSub from './PanelMenuSub.vue';
export default {
name: 'PanelMenuList',
extends: BaseComponent,
extends: BasePanelMenu,
emits: ['item-toggle', 'header-focus'],
props: {
panelId: {
@ -74,6 +75,12 @@ export default {
getItemLabel(processedItem) {
return this.getItemProp(processedItem, 'label');
},
getCXOptions(key, params) {
return this.cx(key, {
...params,
context: this
});
},
isItemVisible(processedItem) {
return this.getItemProp(processedItem, 'visible') !== false;
},
@ -203,7 +210,7 @@ export default {
onEnterKey(event) {
if (ObjectUtils.isNotEmpty(this.focusedItem)) {
const element = DomHandler.findSingle(this.$el, `li[id="${`${this.focusedItemId}`}"]`);
const anchorElement = element && (DomHandler.findSingle(element, '.p-menuitem-link') || DomHandler.findSingle(element, 'a,button'));
const anchorElement = element && (DomHandler.findSingle(element, '[data-pc-section="action"]') || DomHandler.findSingle(element, 'a,button'));
anchorElement ? anchorElement.click() : element && element.click();
}
@ -227,7 +234,7 @@ export default {
DomHandler.focus(this.$el);
},
isElementInPanel(event, element) {
const panel = event.currentTarget.closest('.p-panelmenu-panel');
const panel = event.currentTarget.closest('[data-pc-section="panel"]');
return panel && panel.contains(element);
},

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

@ -1,11 +1,11 @@
<template>
<ul class="p-submenu-list" v-bind="ptm('menu')">
<ul :class="getCXOptions('submenu')" :tabindex="tabindex">
<template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
<li
v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)"
:class="[getCXOptions('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
:style="getItemProp(processedItem, 'style')"
:class="getItemClass(processedItem)"
role="treeitem"
:aria-label="getItemLabel(processedItem)"
:aria-expanded="isItemGroup(processedItem) ? isItemActive(processedItem) : undefined"
@ -13,39 +13,32 @@
:aria-setsize="getAriaSetSize()"
:aria-posinset="getAriaPosInset(index)"
v-bind="getPTOptions(processedItem, 'menuitem')"
:data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)"
>
<div class="p-menuitem-content" @click="onItemClick($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
<div :class="getCXOptions('content')" @click="onItemClick($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
<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="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
<span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<a v-ripple :href="href" :class="getCXOptions('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
<span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
</a>
</router-link>
<a
v-else
v-ripple
:href="getItemProp(processedItem, 'url')"
:class="getItemActionClass(processedItem)"
:target="getItemProp(processedItem, 'target')"
tabindex="-1"
aria-hidden="true"
v-bind="getPTOptions(processedItem, 'action')"
>
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getCXOptions('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
<template v-if="isItemGroup(processedItem)">
<component v-if="templates.submenuicon" :is="templates.submenuicon" class="p-submenu-icon" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<component v-if="templates.submenuicon" :is="templates.submenuicon" :class="getCXOptions('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
</template>
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
<span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
<span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
</a>
</template>
<component v-else :is="templates.item" :item="processedItem.item"></component>
</div>
<transition name="p-toggleable-content">
<div v-show="isItemActive(processedItem)" class="p-toggleable-content" v-bind="ptm('toggleableContent')">
<div v-show="isItemActive(processedItem)" :class="getCXOptions('toggleableContent')" v-bind="ptm('toggleableContent')">
<PanelMenuSub
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
:id="getItemId(processedItem) + '_list'"
@ -59,25 +52,32 @@
:exact="exact"
@item-toggle="onItemToggle"
:pt="pt"
v-bind="ptm('submenu')"
/>
</div>
</transition>
</li>
<li v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')" :style="getItemProp(processedItem, 'style')" :class="getSeparatorItemClass(processedItem)" role="separator" v-bind="ptm('separator')"></li>
<li
v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
:style="getItemProp(processedItem, 'style')"
:class="[getCXOptions('separator'), getItemProp(processedItem, 'class')]"
role="separator"
v-bind="ptm('separator')"
></li>
</template>
</ul>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright';
import Ripple from 'primevue/ripple';
import { ObjectUtils } from 'primevue/utils';
import BasePanelMenu from './BasePanelMenu.vue';
export default {
name: 'PanelMenuSub',
extends: BaseComponent,
extends: BasePanelMenu,
emits: ['item-toggle'],
props: {
panelId: {
@ -107,6 +107,10 @@ export default {
exact: {
type: Boolean,
default: true
},
tabindex: {
type: Number,
default: -1
}
},
methods: {
@ -130,6 +134,12 @@ export default {
}
});
},
getCXOptions(key, params) {
return this.cx(key, {
...params,
context: this
});
},
isItemActive(processedItem) {
return this.activeItemPath.some((path) => path.key === processedItem.key);
},
@ -160,31 +170,6 @@ export default {
},
getAriaPosInset(index) {
return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
},
getItemClass(processedItem) {
return [
'p-menuitem',
this.getItemProp(processedItem, 'class'),
{
'p-focus': this.isItemFocused(processedItem),
'p-disabled': this.isItemDisabled(processedItem)
}
];
},
getItemActionClass(processedItem, routerProps) {
return [
'p-menuitem-link',
{
'router-link-active': routerProps && routerProps.isActive,
'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
}
];
},
getItemIconClass(processedItem) {
return ['p-menuitem-icon', this.getItemProp(processedItem, 'icon')];
},
getSeparatorItemClass(processedItem) {
return ['p-menuitem-separator', this.getItemProp(processedItem, 'class')];
}
},
components: {