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

Refactor #3965 - For ContextMenu

pull/4004/head
Tuğçe Küçükoğlu 2023-05-29 14:12:29 +03:00
parent fab61475cc
commit b237b5fbe5
4 changed files with 176 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
components/lib/contextmenu/BaseContextMenu.vue Normal file
View File

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

9
components/lib/contextmenu/ContextMenu.d.ts vendored
View File

@ -60,6 +60,10 @@ export interface ContextMenuPassThroughOptions {
* Uses to pass attributes to the submenu icon's DOM element. * Uses to pass attributes to the submenu icon's DOM element.
*/ */
submenuIcon?: ContextMenuPassThroughOptionType; submenuIcon?: ContextMenuPassThroughOptionType;
/**
* Uses to pass attributes to the submenu's DOM element.
*/
submenu?: ContextMenuPassThroughOptionType;
/** /**
* Uses to pass attributes to the separator's DOM element. * Uses to pass attributes to the separator's DOM element.
*/ */
@ -192,6 +196,11 @@ export interface ContextMenuProps {
* @type {ContextMenuPassThroughOptions} * @type {ContextMenuPassThroughOptions}
*/ */
pt?: ContextMenuPassThroughOptions; pt?: ContextMenuPassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
} }
/** /**

99
components/lib/contextmenu/ContextMenu.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<Portal :appendTo="appendTo"> <Portal :appendTo="appendTo">
<transition name="p-contextmenu" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave"> <transition name="p-contextmenu" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave">
<div v-if="visible" :ref="containerRef" :class="containerClass" v-bind="{ ...$attrs, ...ptm('root') }"> <div v-if="visible" :ref="containerRef" :class="cx('root')" v-bind="{ ...$attrs, ...ptm('root') }" data-pc-name="contextmenu">
<ContextMenuSub <ContextMenuSub
:ref="listRef" :ref="listRef"
:id="id + '_list'" :id="id + '_list'"
class="p-contextmenu-root-list" :class="cx('menu')"
role="menubar" role="menubar"
:root="true" :root="true"
:tabindex="tabindex" :tabindex="tabindex"
@ -34,54 +34,16 @@
</template> </template>
<script> <script>
import BaseComponent from 'primevue/basecomponent';
import Portal from 'primevue/portal'; import Portal from 'primevue/portal';
import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils'; import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
import BaseContextMenu from './BaseContextMenu.vue';
import ContextMenuSub from './ContextMenuSub.vue'; import ContextMenuSub from './ContextMenuSub.vue';
export default { export default {
name: 'ContextMenu', name: 'ContextMenu',
extends: BaseComponent, extends: BaseContextMenu,
inheritAttrs: false, inheritAttrs: false,
emits: ['focus', 'blur', 'show', 'hide'], emits: ['focus', 'blur', 'show', 'hide'],
props: {
model: {
type: Array,
default: null
},
appendTo: {
type: String,
default: 'body'
},
autoZIndex: {
type: Boolean,
default: true
},
baseZIndex: {
type: Number,
default: 0
},
global: {
type: Boolean,
default: false
},
exact: {
type: Boolean,
default: true
},
tabindex: {
type: Number,
default: 0
},
'aria-labelledby': {
type: String,
default: null
},
'aria-label': {
type: String,
default: null
}
},
target: null, target: null,
outsideClickListener: null, outsideClickListener: null,
resizeListener: null, resizeListener: null,
@ -349,7 +311,7 @@ export default {
onEnterKey(event) { onEnterKey(event) {
if (this.focusedItemInfo.index !== -1) { if (this.focusedItemInfo.index !== -1) {
const element = DomHandler.findSingle(this.list, `li[id="${`${this.focusedItemId}`}"]`); const element = DomHandler.findSingle(this.list, `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(); anchorElement ? anchorElement.click() : element && element.click();
const processedItem = this.visibleItems[this.focusedItemInfo.index]; const processedItem = this.visibleItems[this.focusedItemInfo.index];
@ -380,6 +342,7 @@ export default {
this.hide(); this.hide();
}, },
onEnter(el) { onEnter(el) {
DomHandler.addStyles(el, { position: 'absolute' });
this.position(); this.position();
if (this.autoZIndex) { if (this.autoZIndex) {
@ -609,9 +572,6 @@ export default {
} }
}, },
computed: { computed: {
containerClass() {
return ['p-contextmenu p-component', { 'p-input-filled': this.$primevue.config.inputStyle === 'filled', 'p-ripple-disabled': this.$primevue.config.ripple === false }];
},
processedItems() { processedItems() {
return this.createProcessedItems(this.model || []); return this.createProcessedItems(this.model || []);
}, },
@ -630,50 +590,3 @@ export default {
} }
}; };
</script> </script>
<style>
.p-contextmenu {
position: absolute;
}
.p-contextmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
.p-contextmenu .p-submenu-list {
position: absolute;
min-width: 100%;
z-index: 1;
}
.p-contextmenu .p-menuitem-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-contextmenu .p-menuitem-text {
line-height: 1;
}
.p-contextmenu .p-menuitem {
position: relative;
}
.p-contextmenu .p-menuitem-link .p-submenu-icon {
margin-left: auto;
}
.p-contextmenu-enter-from {
opacity: 0;
}
.p-contextmenu-enter-active {
transition: opacity 250ms;
}
</style>

85
components/lib/contextmenu/ContextMenuSub.vue
View File

@ -6,7 +6,7 @@
v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')" v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)" :id="getItemId(processedItem)"
:style="getItemProp(processedItem, 'style')" :style="getItemProp(processedItem, 'style')"
:class="getItemClass(processedItem)" :class="[getCXOptions('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
role="menuitem" role="menuitem"
:aria-label="getItemLabel(processedItem)" :aria-label="getItemLabel(processedItem)"
:aria-disabled="isItemDisabled(processedItem) || undefined" :aria-disabled="isItemDisabled(processedItem) || undefined"
@ -16,40 +16,26 @@
:aria-setsize="getAriaSetSize()" :aria-setsize="getAriaSetSize()"
:aria-posinset="getAriaPosInset(index)" :aria-posinset="getAriaPosInset(index)"
v-bind="getPTOptions(processedItem, 'menuitem')" 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"> <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 <a v-ripple :href="href" :class="getCXOptions('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
v-ripple <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
:href="href" <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
:class="getItemActionClass(processedItem, { isActive, isExactActive })" <span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
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> </a>
</router-link> </router-link>
<a <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')">
v-else <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
v-ripple <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
:href="getItemProp(processedItem, 'url')" <span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
: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>
<template v-if="getItemProp(processedItem, 'items')"> <template v-if="getItemProp(processedItem, 'items')">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" class="p-submenu-icon" /> <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="getCXOptions('submenuIcon')" />
<AngleRightIcon v-else class="p-submenu-icon" v-bind="getPTOptions(processedItem, 'submenuicon')" /> <AngleRightIcon v-else :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuicon')" />
</template> </template>
</a> </a>
</template> </template>
@ -59,7 +45,7 @@
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
:id="getItemId(processedItem) + '_list'" :id="getItemId(processedItem) + '_list'"
role="menu" role="menu"
class="p-submenu-list" :class="getCXOptions('submenu')"
:menuId="menuId" :menuId="menuId"
:focusedItemId="focusedItemId" :focusedItemId="focusedItemId"
:items="processedItem.items" :items="processedItem.items"
@ -71,13 +57,14 @@
:visible="isItemActive(processedItem) && isItemGroup(processedItem)" :visible="isItemActive(processedItem) && isItemGroup(processedItem)"
@item-click="$emit('item-click', $event)" @item-click="$emit('item-click', $event)"
@item-mouseenter="$emit('item-mouseenter', $event)" @item-mouseenter="$emit('item-mouseenter', $event)"
v-bind="ptm('submenu')"
/> />
</li> </li>
<li <li
v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')" v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)" :id="getItemId(processedItem)"
:style="getItemProp(processedItem, 'style')" :style="getItemProp(processedItem, 'style')"
:class="getSeparatorItemClass(processedItem)" :class="[getCXOptions('separator'), getItemProp(processedItem, 'class')]"
role="separator" role="separator"
v-bind="ptm('separator')" v-bind="ptm('separator')"
></li> ></li>
@ -87,14 +74,14 @@
</template> </template>
<script> <script>
import BaseComponent from 'primevue/basecomponent';
import AngleRightIcon from 'primevue/icons/angleright'; import AngleRightIcon from 'primevue/icons/angleright';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
import { DomHandler, ObjectUtils } from 'primevue/utils'; import { DomHandler, ObjectUtils } from 'primevue/utils';
import BaseContextMenu from './BaseContextMenu.vue';
export default { export default {
name: 'ContextMenuSub', name: 'ContextMenuSub',
extends: BaseComponent, extends: BaseContextMenu,
emits: ['item-click', 'item-mouseenter'], emits: ['item-click', 'item-mouseenter'],
props: { props: {
items: { items: {
@ -155,6 +142,12 @@ export default {
} }
}); });
}, },
getCXOptions(key, params) {
return this.cx(key, {
...params,
context: this
});
},
isItemActive(processedItem) { isItemActive(processedItem) {
return this.activeItemPath.some((path) => path.key === processedItem.key); return this.activeItemPath.some((path) => path.key === processedItem.key);
}, },
@ -203,32 +196,6 @@ export default {
} else { } else {
this.$refs.container.style.left = itemOuterWidth + 'px'; this.$refs.container.style.left = itemOuterWidth + 'px';
} }
},
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')];
} }
}, },
components: { components: {