mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Refactor #3965 - For PanelMenu
This commit is contained in:
Tuğçe Küçükoğlu
parent
bcd1c91084
commit
4e3488ec6b
5 changed files with 210 additions and 160 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue