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

Refactor #3907 - For PanelMenu

pull/3913/head
Tuğçe Küçükoğlu 2023-04-26 12:58:36 +03:00
parent 2dd290d526
commit bc70f24f15
5 changed files with 166 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/components/panelmenu.js
View File

@ -16,6 +16,12 @@ const PanelMenuProps = [
type: 'boolean', type: 'boolean',
default: 'true', default: 'true',
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path." 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.'
} }
]; ];

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

@ -11,6 +11,117 @@ import { VNode } from 'vue';
import { MenuItem } from '../menuitem'; import { MenuItem } from '../menuitem';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; 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. * Custom expanded keys metadata.
* @see {@link PanelMenuProps.expandedKeys} * @see {@link PanelMenuProps.expandedKeys}
@ -64,6 +175,11 @@ export interface PanelMenuProps {
* Index of the element in tabbing order. * Index of the element in tabbing order.
*/ */
tabindex?: number | string | undefined; tabindex?: number | string | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {PanelMenuPassThroughOptions}
*/
pt?: PanelMenuPassThroughOptions;
} }
/** /**

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

@ -1,7 +1,7 @@
<template> <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)"> <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 <div
:id="getHeaderId(index)" :id="getHeaderId(index)"
:class="getHeaderClass(item)" :class="getHeaderClass(item)"
@ -13,32 +13,42 @@
: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="ptm('header')"
> >
<div class="p-panelmenu-header-content"> <div class="p-panelmenu-header-content" v-bind="ptm('headerContent')">
<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="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)" /> <component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="getHeaderIconClass(item)" />
<span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" /> <span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" v-bind="ptm('headerIcon')" />
<span class="p-menuitem-text">{{ getItemLabel(item) }}</span> <span class="p-menuitem-text" v-bind="ptm('label')">{{ getItemLabel(item) }}</span>
</a> </a>
</router-link> </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)"> <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> </slot>
<component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="getHeaderIconClass(item)" /> <component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="getHeaderIconClass(item)" />
<span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" /> <span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" v-bind="ptm('headerIcon')" />
<span class="p-menuitem-text">{{ getItemLabel(item) }}</span> <span class="p-menuitem-text" v-bind="ptm('headerLabel')">{{ 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>
</div> </div>
</div> </div>
<transition name="p-toggleable-content"> <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-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"> <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" /> <PanelMenuList
:panelId="getPanelId(index)"
:items="getItemProp(item, 'items')"
:templates="$slots"
:expandedKeys="expandedKeys"
@item-toggle="changeExpandedKeys"
@header-focus="updateFocusedHeader"
:exact="exact"
:pt="pt"
/>
</div> </div>
</div> </div>
</transition> </transition>
@ -48,6 +58,7 @@
</template> </template>
<script> <script>
import BaseComponent from 'primevue/basecomponent';
import ChevronDownIcon from 'primevue/icons/chevrondown'; import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright'; import ChevronRightIcon from 'primevue/icons/chevronright';
import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils'; import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
@ -55,6 +66,7 @@ import PanelMenuList from './PanelMenuList.vue';
export default { export default {
name: 'PanelMenu', name: 'PanelMenu',
extends: BaseComponent,
emits: ['update:expandedKeys', 'panel-open', 'panel-close'], emits: ['update:expandedKeys', 'panel-open', 'panel-close'],
props: { props: {
model: { model: {

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

@ -15,15 +15,18 @@
@blur="onBlur" @blur="onBlur"
@keydown="onKeyDown" @keydown="onKeyDown"
@item-toggle="onItemToggle" @item-toggle="onItemToggle"
:pt="pt"
/> />
</template> </template>
<script> <script>
import BaseComponent from 'primevue/basecomponent';
import { DomHandler, ObjectUtils } from 'primevue/utils'; import { DomHandler, ObjectUtils } from 'primevue/utils';
import PanelMenuSub from './PanelMenuSub.vue'; import PanelMenuSub from './PanelMenuSub.vue';
export default { export default {
name: 'PanelMenuList', name: 'PanelMenuList',
extends: BaseComponent,
emits: ['item-toggle', 'header-focus'], emits: ['item-toggle', 'header-focus'],
props: { props: {
panelId: { panelId: {

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

@ -1,5 +1,5 @@
<template> <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)"> <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
<li <li
v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')" v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
@ -12,30 +12,31 @@
:aria-level="level + 1" :aria-level="level + 1"
:aria-setsize="getAriaSetSize()" :aria-setsize="getAriaSetSize()"
:aria-posinset="getAriaPosInset(index)" :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"> <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="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)" /> <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 v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="ptm('icon')" />
<span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span> <span class="p-menuitem-text" v-bind="ptm('label')">{{ getItemLabel(processedItem) }}</span>
</a> </a>
</router-link> </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)"> <template v-if="isItemGroup(processedItem)">
<component v-if="templates.submenuicon" :is="templates.submenuicon" class="p-submenu-icon" :active="isItemActive(processedItem)" /> <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" /> <component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" v-bind="ptm('submenuIcon')" />
</template> </template>
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" /> <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 v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="ptm('icon')" />
<span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span> <span class="p-menuitem-text" v-bind="ptm('label')">{{ 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>
</div> </div>
<transition name="p-toggleable-content"> <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 <PanelMenuSub
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
:id="getItemId(processedItem) + '_list'" :id="getItemId(processedItem) + '_list'"
@ -48,16 +49,18 @@
:activeItemPath="activeItemPath" :activeItemPath="activeItemPath"
:exact="exact" :exact="exact"
@item-toggle="onItemToggle" @item-toggle="onItemToggle"
:pt="pt"
/> />
</div> </div>
</transition> </transition>
</li> </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> </template>
</ul> </ul>
</template> </template>
<script> <script>
import BaseComponent from 'primevue/basecomponent';
import ChevronDownIcon from 'primevue/icons/chevrondown'; import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright'; import ChevronRightIcon from 'primevue/icons/chevronright';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
@ -65,6 +68,7 @@ import { ObjectUtils } from 'primevue/utils';
export default { export default {
name: 'PanelMenuSub', name: 'PanelMenuSub',
extends: BaseComponent,
emits: ['item-toggle'], emits: ['item-toggle'],
props: { props: {
panelId: { panelId: {