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

Refactor #3965 - For Menubar

pull/4004/head
Tuğçe Küçükoğlu 2023-05-29 17:06:26 +03:00
parent b85d2b5536
commit df4994ea68
4 changed files with 206 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
components/lib/menubar/BaseMenubar.vue Normal file
View File

@ -0,0 +1,158 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-menubar {
display: flex;
align-items: center;
}
.p-menubar ul {
margin: 0;
padding: 0;
list-style: none;
}
.p-menubar .p-menuitem-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-menubar .p-menuitem-text {
line-height: 1;
}
.p-menubar .p-menuitem {
position: relative;
}
.p-menubar-root-list {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.p-menubar-root-list > li ul {
display: none;
z-index: 1;
}
.p-menubar-root-list > .p-menuitem-active > .p-submenu-list {
display: block;
}
.p-menubar .p-submenu-list {
display: none;
position: absolute;
z-index: 1;
}
.p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list {
display: block;
left: 100%;
top: 0;
}
.p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
margin-left: auto;
}
.p-menubar .p-menubar-end {
margin-left: auto;
align-self: center;
}
.p-menubar-button {
display: none;
cursor: pointer;
align-items: center;
justify-content: center;
text-decoration: none;
}
`;
const inlineStyles = {
submenu: ({ context, processedItem }) => ({ display: context.isItemActive(processedItem) ? 'block' : 'none' })
};
const classes = {
root: ({ instance }) => [
'p-menubar p-component',
{
'p-menubar-mobile-active': instance.mobileActive
}
],
start: 'p-menubar-start',
button: 'p-menubar-button',
menu: 'p-menubar-root-list',
menuitem: ({ context, processedItem }) => [
'p-menuitem',
context.getItemProp(processedItem, 'class'),
{
'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: ({ context, processedItem }) => ['p-menuitem-icon', context.getItemProp(processedItem, 'icon')],
label: 'p-menuitem-text',
submenuIcon: 'p-submenu-icon',
submenu: 'p-submenu-list',
separator: ({ context, processedItem }) => ['p-menuitem-separator', context.getItemProp(processedItem, 'class')],
end: 'p-menubar-end'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_menubar_style', manual: true });
export default {
name: 'BaseMenubar',
extends: BaseComponent,
props: {
model: {
type: Array,
default: null
},
exact: {
type: Boolean,
default: true
},
buttonProps: {
type: null,
default: null
},
'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/menubar/Menubar.d.ts vendored
View File

@ -59,6 +59,10 @@ export interface MenubarPassThroughOptions {
* Uses to pass attributes to the submenu icon's DOM element.
*/
submenuIcon?: MenubarPassThroughOptionType;
/**
* Uses to pass attributes to the submenu's DOM element.
*/
submenu?: MenubarPassThroughOptionType;
/**
* Uses to pass attributes to the separator's DOM element.
*/
@ -182,6 +186,11 @@ export interface MenubarProps {
* @type {MenubarPassThroughOptions}
*/
pt?: MenubarPassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**

114
components/lib/menubar/Menubar.vue
View File

@ -1,6 +1,6 @@
<template>
<div :ref="containerRef" :class="containerClass" v-bind="ptm('root')">
<div v-if="$slots.start" class="p-menubar-start" v-bind="ptm('start')">
<div :ref="containerRef" :class="cx('root')" v-bind="ptm('root')">
<div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
<slot name="start"></slot>
</div>
<a
@ -8,7 +8,7 @@
ref="menubutton"
role="button"
tabindex="0"
class="p-menubar-button"
:class="cx('button')"
:aria-haspopup="model.length && model.length > 0 ? true : false"
:aria-expanded="mobileActive"
:aria-controls="id"
@ -24,7 +24,6 @@
<MenubarSub
:ref="menubarRef"
:id="id"
class="p-menubar-root-list"
role="menubar"
:items="processedItems"
:templates="$slots"
@ -46,44 +45,22 @@
@item-click="onItemClick"
@item-mouseenter="onItemMouseEnter"
/>
<div v-if="$slots.end" class="p-menubar-end" v-bind="ptm('end')">
<div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')">
<slot name="end"></slot>
</div>
</div>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import BarsIcon from 'primevue/icons/bars';
import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
import BaseMenubar from './BaseMenubar.vue';
import MenubarSub from './MenubarSub.vue';
export default {
name: 'Menubar',
extends: BaseComponent,
extends: BaseMenubar,
emits: ['focus', 'blur'],
props: {
model: {
type: Array,
default: null
},
exact: {
type: Boolean,
default: true
},
buttonProps: {
type: null,
default: null
},
'aria-labelledby': {
type: String,
default: null
},
'aria-label': {
type: String,
default: null
}
},
data() {
return {
id: this.$attrs.id,
@ -405,7 +382,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, 'a[data-pc-section="action"]');
anchorElement ? anchorElement.click() : element && element.click();
@ -595,9 +572,6 @@ export default {
}
},
computed: {
containerClass() {
return ['p-menubar p-component', { 'p-menubar-mobile-active': this.mobileActive }];
},
processedItems() {
return this.createProcessedItems(this.model || []);
},
@ -616,77 +590,3 @@ export default {
}
};
</script>
<style>
.p-menubar {
display: flex;
align-items: center;
}
.p-menubar ul {
margin: 0;
padding: 0;
list-style: none;
}
.p-menubar .p-menuitem-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-menubar .p-menuitem-text {
line-height: 1;
}
.p-menubar .p-menuitem {
position: relative;
}
.p-menubar-root-list {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.p-menubar-root-list > li ul {
display: none;
z-index: 1;
}
.p-menubar-root-list > .p-menuitem-active > .p-submenu-list {
display: block;
}
.p-menubar .p-submenu-list {
display: none;
position: absolute;
z-index: 1;
}
.p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list {
display: block;
left: 100%;
top: 0;
}
.p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
margin-left: auto;
}
.p-menubar .p-menubar-end {
margin-left: auto;
align-self: center;
}
.p-menubar-button {
display: none;
cursor: pointer;
align-items: center;
justify-content: center;
text-decoration: none;
}
</style>

89
components/lib/menubar/MenubarSub.vue
View File

@ -1,11 +1,11 @@
<template>
<ul v-bind="ptm('menu')">
<ul :class="level === 0 ? getCXOptions('menu') : getCXOptions('submenu')" 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 })"
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', { processedItem })" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="getCXOptions('icon', { processedItem })" 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', { processedItem })" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="getCXOptions('icon', { processedItem })" 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" :root="root" :active="isItemActive(processedItem)" class="p-submenu-icon" />
<component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" class="p-submenu-icon" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<component v-if="templates.submenuicon" :is="templates.submenuicon" :root="root" :active="isItemActive(processedItem)" :class="getCXOptions('submenuIcon')" />
<component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
</template>
</a>
</template>
@ -50,7 +44,7 @@
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
:menuId="menuId"
role="menu"
class="p-submenu-list"
:style="getSXOptions('submenu', { processedItem })"
:focusedItemId="focusedItemId"
:items="processedItem.items"
:mobileActive="mobileActive"
@ -67,7 +61,7 @@
v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)"
:style="getItemProp(processedItem, 'style')"
:class="getSeparatorItemClass(processedItem)"
:class="getCXOptions('separator', { processedItem })"
role="separator"
v-bind="ptm('separator')"
></li>
@ -76,15 +70,15 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import AngleDownIcon from 'primevue/icons/angledown';
import AngleRightIcon from 'primevue/icons/angleright';
import Ripple from 'primevue/ripple';
import { ObjectUtils } from 'primevue/utils';
import BaseMenubar from './BaseMenubar.vue';
export default {
name: 'MenubarSub',
extends: BaseComponent,
extends: BaseMenubar,
emits: ['item-mouseenter', 'item-click'],
props: {
items: {
@ -150,6 +144,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);
},
@ -180,37 +186,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')];
}
},
computed: {
containerClass() {
return { 'p-submenu-list': !this.root, 'p-menubar-root-list': this.root };
}
},
components: {