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

Refactor #3965 - For TieredMenu

pull/4004/head
Tuğçe Küçükoğlu 2023-05-29 15:31:43 +03:00
parent 8494b53f48
commit 24dfbf5116
4 changed files with 192 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
components/lib/tieredmenu/BaseTieredMenu.vue Normal file
View File

@ -0,0 +1,143 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-tieredmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
.p-tieredmenu .p-submenu-list {
position: absolute;
min-width: 100%;
z-index: 1;
display: none;
}
.p-tieredmenu .p-menuitem-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-tieredmenu .p-menuitem-text {
line-height: 1;
}
.p-tieredmenu .p-menuitem {
position: relative;
}
.p-tieredmenu .p-menuitem-link .p-submenu-icon {
margin-left: auto;
}
.p-tieredmenu .p-menuitem-active > .p-submenu-list {
display: block;
left: 100%;
top: 0;
}
`;
const inlineStyles = {
submenu: ({ context, processedItem }) => ({ display: context.isItemActive(processedItem) ? 'block' : 'none' })
};
const classes = {
root: ({ instance, props }) => [
'p-tieredmenu p-component',
{
'p-tieredmenu-overlay': props.popup,
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
menu: 'p-tieredmenu-root-list',
menuitem: ({ context, processedItem }) => [
'p-menuitem',
{
'p-menuitem-active p-highlight': context.isItemActive(processedItem),
'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',
text: 'p-menuitem-text',
submenuIcon: 'p-submenu-icon',
submenu: 'p-submenu-list'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_tieredmenu_style', manual: true });
export default {
name: 'BaseTieredMenu',
extends: BaseComponent,
props: {
popup: {
type: Boolean,
default: false
},
model: {
type: Array,
default: null
},
appendTo: {
type: String,
default: 'body'
},
autoZIndex: {
type: Boolean,
default: true
},
baseZIndex: {
type: Number,
default: 0
},
exact: {
type: Boolean,
default: true
},
disabled: {
type: Boolean,
default: false
},
tabindex: {
type: Number,
default: 0
},
'aria-labelledby': {
type: String,
default: null
},
'aria-label': {
type: String,
default: null
}
},
css: {
classes,
inlineStyles
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
}
};
</script>

9
components/lib/tieredmenu/TieredMenu.d.ts vendored
View File

@ -59,10 +59,19 @@ export interface TieredMenuPassThroughOptions {
* Uses to pass attributes to the submenu icon's DOM element.
*/
submenuIcon?: TieredMenuPassThroughOptionType;
/**
* Uses to pass attributes to the submenu's DOM element.
*/
submenu?: TieredMenuPassThroughOptionType;
/**
* Uses to pass attributes to the separator's DOM element.
*/
separator?: TieredMenuPassThroughOptionType;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**

110
components/lib/tieredmenu/TieredMenu.vue
View File

@ -1,11 +1,10 @@
<template>
<Portal :appendTo="appendTo" :disabled="!popup">
<transition name="p-connected-overlay" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave">
<div v-if="visible" :ref="containerRef" :id="id" :class="containerClass" @click="onOverlayClick" v-bind="{ ...$attrs, ...ptm('root') }">
<div v-if="visible" :ref="containerRef" :id="id" :class="cx('root')" @click="onOverlayClick" v-bind="{ ...$attrs, ...ptm('root') }" data-pc-name="tieredmenu">
<TieredMenuSub
:ref="menubarRef"
:id="id + '_list'"
class="p-tieredmenu-root-list"
:tabindex="!disabled ? tabindex : -1"
role="menubar"
:aria-label="ariaLabel"
@ -33,59 +32,17 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal';
import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
import BaseTieredMenu from './BaseTieredMenu.vue';
import TieredMenuSub from './TieredMenuSub.vue';
export default {
name: 'TieredMenu',
extends: BaseComponent,
extends: BaseTieredMenu,
inheritAttrs: false,
emits: ['focus', 'blur', 'before-show', 'before-hide', 'hide', 'show'],
props: {
popup: {
type: Boolean,
default: false
},
model: {
type: Array,
default: null
},
appendTo: {
type: String,
default: 'body'
},
autoZIndex: {
type: Boolean,
default: true
},
baseZIndex: {
type: Number,
default: 0
},
exact: {
type: Boolean,
default: true
},
disabled: {
type: Boolean,
default: false
},
tabindex: {
type: Number,
default: 0
},
'aria-labelledby': {
type: String,
default: null
},
'aria-label': {
type: String,
default: null
}
},
outsideClickListener: null,
scrollHandler: null,
resizeListener: null,
@ -386,7 +343,7 @@ export default {
onEnterKey(event) {
if (this.focusedItemInfo.index !== -1) {
const element = DomHandler.findSingle(this.menubar, `li[id="${`${this.focusedItemId}`}"]`);
const anchorElement = element && DomHandler.findSingle(element, '.p-menuitem-link');
const anchorElement = element && DomHandler.findSingle(element, '[data-pc-section="action"]');
anchorElement ? anchorElement.click() : element && element.click();
@ -424,6 +381,7 @@ export default {
ZIndexUtils.set('menu', el, this.baseZIndex + this.$primevue.config.zIndex.menu);
}
DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' });
this.alignOverlay();
DomHandler.focus(this.menubar);
this.scrollInView();
@ -624,16 +582,6 @@ export default {
}
},
computed: {
containerClass() {
return [
'p-tieredmenu p-component',
{
'p-tieredmenu-overlay': this.popup,
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': this.$primevue.config.ripple === false
}
];
},
processedItems() {
return this.createProcessedItems(this.model || []);
},
@ -652,51 +600,3 @@ export default {
}
};
</script>
<style>
.p-tieredmenu-overlay {
position: absolute;
top: 0;
left: 0;
}
.p-tieredmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
.p-tieredmenu .p-submenu-list {
position: absolute;
min-width: 100%;
z-index: 1;
display: none;
}
.p-tieredmenu .p-menuitem-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-tieredmenu .p-menuitem-text {
line-height: 1;
}
.p-tieredmenu .p-menuitem {
position: relative;
}
.p-tieredmenu .p-menuitem-link .p-submenu-icon {
margin-left: auto;
}
.p-tieredmenu .p-menuitem-active > .p-submenu-list {
display: block;
left: 100%;
top: 0;
}
</style>

83
components/lib/tieredmenu/TieredMenuSub.vue
View File

@ -1,11 +1,11 @@
<template>
<ul v-bind="ptm('menu')">
<ul :class="level === 0 ? getCXOptions('menu') : getCXOptions('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
<template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
<li
v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)"
:style="getItemProp(processedItem, 'style')"
:class="getItemClass(processedItem)"
:class="[getCXOptions('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
role="menuitem"
:aria-label="getItemLabel(processedItem)"
:aria-disabled="isItemDisabled(processedItem) || undefined"
@ -15,32 +15,26 @@
:aria-setsize="getAriaSetSize()"
:aria-posinset="getAriaPosInset(index)"
v-bind="getPTOptions(processedItem, 'menuitem')"
:data-p-highlight="isItemActive(processedItem)"
:data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)"
>
<div class="p-menuitem-content" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
<div :class="getCXOptions('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($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')"
>
<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-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getCXOptions('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" 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>
<template v-if="getItemProp(processedItem, 'items')">
<component v-if="templates.submenuicon" :is="templates.submenuicon" class="p-submenu-icon" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<AngleRightIcon v-else 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')" />
<AngleRightIcon v-else :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
</template>
</a>
</template>
@ -49,8 +43,8 @@
<TieredMenuSub
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
:id="getItemId(processedItem) + '_list'"
:style="getSXOptions('submenu', { processedItem })"
role="menu"
class="p-submenu-list"
:menuId="menuId"
:focusedItemId="focusedItemId"
:items="processedItem.items"
@ -76,14 +70,14 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import AngleRightIcon from 'primevue/icons/angleright';
import Ripple from 'primevue/ripple';
import { ObjectUtils } from 'primevue/utils';
import BaseTieredMenu from './BaseTieredMenu.vue';
export default {
name: 'TieredMenuSub',
extends: BaseComponent,
extends: BaseTieredMenu,
emits: ['item-click', 'item-mouseenter'],
props: {
menuId: {
@ -113,6 +107,10 @@ export default {
exact: {
type: Boolean,
default: true
},
tabindex: {
type: Number,
default: 0
}
},
methods: {
@ -136,6 +134,18 @@ export default {
}
});
},
getCXOptions(key, params) {
return this.cx(key, {
...params,
context: this
});
},
getSXOptions(key, params) {
return this.sx(key, true, {
...params,
context: this
});
},
isItemActive(processedItem) {
return this.activeItemPath.some((path) => path.key === processedItem.key);
},
@ -167,29 +177,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-menuitem-active p-highlight': this.isItemActive(processedItem),
'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')];
}