vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-08 16:37:15 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #3907 - For PanelMenu

Browse source
This commit is contained in:
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
Download patch file Download diff file Expand all files Collapse all files

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

@ -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: {