Refactor #3907 - For PanelMenu
Tuğçe Küçükoğlu
parent
2dd290d526
commit
bc70f24f15
|
|
@ -16,6 +16,12 @@ const PanelMenuProps = [
|
|||
type: 'boolean',
|
||||
default: 'true',
|
||||
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
|
||||
},
|
||||
{
|
||||
name: 'pt',
|
||||
type: 'any',
|
||||
default: 'null',
|
||||
description: 'Uses to pass attributes to DOM elements inside the component.'
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,117 @@ import { VNode } from 'vue';
|
|||
import { MenuItem } from '../menuitem';
|
||||
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
||||
|
||||
export declare type PanelMenuPassThroughOptionType = PanelMenuPassThroughAttributes | ((options: PanelMenuPassThroughMethodOptions) => PanelMenuPassThroughAttributes) | null | undefined;
|
||||
|
||||
/**
|
||||
* Custom passthrough(pt) option method.
|
||||
*/
|
||||
export interface PanelMenuPassThroughMethodOptions {
|
||||
props: PanelMenuProps;
|
||||
state: PanelMenuState;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom passthrough(pt) options.
|
||||
* @see {@link PanelMenuProps.pt}
|
||||
*/
|
||||
export interface PanelMenuPassThroughOptions {
|
||||
/**
|
||||
* Uses to pass attributes to the root's DOM element.
|
||||
*/
|
||||
root?: PanelMenuPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the panel's DOM element.
|
||||
*/
|
||||
panel?: PanelMenuPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the header's DOM element.
|
||||
*/
|
||||
header?: PanelMenuPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the header content's DOM element.
|
||||
*/
|
||||
headerContent?: PanelMenuPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the header action's DOM element.
|
||||
*/
|
||||
headerAction?: PanelMenuPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the header icon's DOM element.
|
||||
*/
|
||||
headerIcon?: PanelMenuPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the submenuIcon's DOM element.
|
||||
*/
|
||||
submenuIcon?: PanelMenuPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the header label's DOM element.
|
||||
*/
|
||||
headerLabel?: PanelMenuPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the submenu icon's DOM element.
|
||||
*/
|
||||
submenuicon?: PanelMenuPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the toggleable content's DOM element.
|
||||
*/
|
||||
toggleableContent?: PanelMenuPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the menu content's DOM element.
|
||||
*/
|
||||
menuContent?: PanelMenuPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the list's DOM element.
|
||||
*/
|
||||
menu?: PanelMenuPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the list item's DOM element.
|
||||
*/
|
||||
menuitem?: PanelMenuPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the content's DOM element.
|
||||
*/
|
||||
content?: PanelMenuPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the action's DOM element.
|
||||
*/
|
||||
action?: PanelMenuPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the icon's DOM element.
|
||||
*/
|
||||
icon?: PanelMenuPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the label's DOM element.
|
||||
*/
|
||||
label?: PanelMenuPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the separator's DOM element.
|
||||
*/
|
||||
separator?: PanelMenuPassThroughOptionType;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom passthrough attributes for each DOM elements
|
||||
*/
|
||||
export interface PanelMenuPassThroughAttributes {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines current inline state in PanelMenu component.
|
||||
*/
|
||||
export interface PanelMenuState {
|
||||
/**
|
||||
* Current id state as a string.
|
||||
*/
|
||||
id: string;
|
||||
/**
|
||||
* Active item path.
|
||||
* @type {MenuItem}
|
||||
*/
|
||||
activeItem: MenuItem[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom expanded keys metadata.
|
||||
* @see {@link PanelMenuProps.expandedKeys}
|
||||
|
|
@ -64,6 +175,11 @@ export interface PanelMenuProps {
|
|||
* Index of the element in tabbing order.
|
||||
*/
|
||||
tabindex?: number | string | undefined;
|
||||
/**
|
||||
* Uses to pass attributes to DOM elements inside the component.
|
||||
* @type {PanelMenuPassThroughOptions}
|
||||
*/
|
||||
pt?: PanelMenuPassThroughOptions;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div :id="id" class="p-panelmenu p-component">
|
||||
<div :id="id" class="p-panelmenu p-component" v-bind="ptm('root')">
|
||||
<template v-for="(item, index) of model" :key="getPanelKey(index)">
|
||||
<div v-if="isItemVisible(item)" :style="getItemProp(item, 'style')" :class="getPanelClass(item)">
|
||||
<div v-if="isItemVisible(item)" :style="getItemProp(item, 'style')" :class="getPanelClass(item)" v-bind="ptm('panel')">
|
||||
<div
|
||||
:id="getHeaderId(index)"
|
||||
:class="getHeaderClass(item)"
|
||||
|
|
@ -13,32 +13,42 @@
|
|||
:aria-disabled="isItemDisabled(item)"
|
||||
@click="onHeaderClick($event, item)"
|
||||
@keydown="onHeaderKeyDown($event, item)"
|
||||
v-bind="ptm('header')"
|
||||
>
|
||||
<div class="p-panelmenu-header-content">
|
||||
<div class="p-panelmenu-header-content" v-bind="ptm('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)">
|
||||
<a :href="href" :class="getHeaderActionClass(item, { isActive, isExactActive })" :tabindex="-1" @click="onHeaderActionClick($event, navigate)" v-bind="ptm('headerAction')">
|
||||
<component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="getHeaderIconClass(item)" />
|
||||
<span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" />
|
||||
<span class="p-menuitem-text">{{ getItemLabel(item) }}</span>
|
||||
<span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" v-bind="ptm('headerIcon')" />
|
||||
<span class="p-menuitem-text" v-bind="ptm('label')">{{ getItemLabel(item) }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<a v-else :href="getItemProp(item, 'url')" :class="getHeaderActionClass(item)" :tabindex="-1">
|
||||
<a v-else :href="getItemProp(item, 'url')" :class="getHeaderActionClass(item)" :tabindex="-1" v-bind="ptm('headerAction')">
|
||||
<slot v-if="getItemProp(item, 'items')" name="submenuicon" :active="isItemActive(item)">
|
||||
<component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" />
|
||||
<component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" v-bind="ptm('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)" />
|
||||
<span class="p-menuitem-text">{{ getItemLabel(item) }}</span>
|
||||
<span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" v-bind="ptm('headerIcon')" />
|
||||
<span class="p-menuitem-text" v-bind="ptm('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)">
|
||||
<div v-if="getItemProp(item, 'items')" class="p-panelmenu-content">
|
||||
<PanelMenuList :panelId="getPanelId(index)" :items="getItemProp(item, 'items')" :templates="$slots" :expandedKeys="expandedKeys" @item-toggle="changeExpandedKeys" @header-focus="updateFocusedHeader" :exact="exact" />
|
||||
<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')">
|
||||
<PanelMenuList
|
||||
:panelId="getPanelId(index)"
|
||||
:items="getItemProp(item, 'items')"
|
||||
:templates="$slots"
|
||||
:expandedKeys="expandedKeys"
|
||||
@item-toggle="changeExpandedKeys"
|
||||
@header-focus="updateFocusedHeader"
|
||||
:exact="exact"
|
||||
:pt="pt"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
|
@ -48,6 +58,7 @@
|
|||
</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';
|
||||
|
|
@ -55,6 +66,7 @@ import PanelMenuList from './PanelMenuList.vue';
|
|||
|
||||
export default {
|
||||
name: 'PanelMenu',
|
||||
extends: BaseComponent,
|
||||
emits: ['update:expandedKeys', 'panel-open', 'panel-close'],
|
||||
props: {
|
||||
model: {
|
||||
|
|
|
|||
|
|
@ -15,15 +15,18 @@
|
|||
@blur="onBlur"
|
||||
@keydown="onKeyDown"
|
||||
@item-toggle="onItemToggle"
|
||||
:pt="pt"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { DomHandler, ObjectUtils } from 'primevue/utils';
|
||||
import PanelMenuSub from './PanelMenuSub.vue';
|
||||
|
||||
export default {
|
||||
name: 'PanelMenuList',
|
||||
extends: BaseComponent,
|
||||
emits: ['item-toggle', 'header-focus'],
|
||||
props: {
|
||||
panelId: {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<ul class="p-submenu-list">
|
||||
<ul class="p-submenu-list" v-bind="ptm('menu')">
|
||||
<template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
|
||||
<li
|
||||
v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
|
||||
|
|
@ -12,30 +12,31 @@
|
|||
:aria-level="level + 1"
|
||||
:aria-setsize="getAriaSetSize()"
|
||||
:aria-posinset="getAriaPosInset(index)"
|
||||
v-bind="ptm('menuitem')"
|
||||
>
|
||||
<div class="p-menuitem-content" @click="onItemClick($event, processedItem)">
|
||||
<div class="p-menuitem-content" @click="onItemClick($event, processedItem)" v-bind="ptm('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)">
|
||||
<a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="ptm('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)" />
|
||||
<span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
|
||||
<span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="ptm('icon')" />
|
||||
<span class="p-menuitem-text" v-bind="ptm('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">
|
||||
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="ptm('action')">
|
||||
<template v-if="isItemGroup(processedItem)">
|
||||
<component v-if="templates.submenuicon" :is="templates.submenuicon" class="p-submenu-icon" :active="isItemActive(processedItem)" />
|
||||
<component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" />
|
||||
<component v-if="templates.submenuicon" :is="templates.submenuicon" class="p-submenu-icon" :active="isItemActive(processedItem)" v-bind="ptm('submenuIcon')" />
|
||||
<component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" v-bind="ptm('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)" />
|
||||
<span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
|
||||
<span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="ptm('icon')" />
|
||||
<span class="p-menuitem-text" v-bind="ptm('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">
|
||||
<div v-show="isItemActive(processedItem)" class="p-toggleable-content" v-bind="ptm('toggleableContent')">
|
||||
<PanelMenuSub
|
||||
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
|
||||
:id="getItemId(processedItem) + '_list'"
|
||||
|
|
@ -48,16 +49,18 @@
|
|||
:activeItemPath="activeItemPath"
|
||||
:exact="exact"
|
||||
@item-toggle="onItemToggle"
|
||||
:pt="pt"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</li>
|
||||
<li v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')" :style="getItemProp(processedItem, 'style')" :class="getSeparatorItemClass(processedItem)" role="separator"></li>
|
||||
<li v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')" :style="getItemProp(processedItem, 'style')" :class="getSeparatorItemClass(processedItem)" 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';
|
||||
|
|
@ -65,6 +68,7 @@ import { ObjectUtils } from 'primevue/utils';
|
|||
|
||||
export default {
|
||||
name: 'PanelMenuSub',
|
||||
extends: BaseComponent,
|
||||
emits: ['item-toggle'],
|
||||
props: {
|
||||
panelId: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue