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

Fixed #5288 - Menu components: track focus with also mousemove

Browse source
This commit is contained in:
tugcekucukoglu 2024-02-15 18:57:40 +03:00
parent 266d5019af
commit e67efa2d8c
10 changed files with 91 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

6
components/lib/contextmenu/ContextMenu.vue
View file

@ -27,6 +27,7 @@
@keydown="onKeyDown"
@item-click="onItemClick"
@item-mouseenter="onItemMouseEnter"
@item-mousemove="onItemMouseMove"
/>
</div>
</transition>
@ -247,6 +248,11 @@ export default {
onItemMouseEnter(event) {
this.onItemChange(event);
},
onItemMouseMove(event) {
if (this.focused) {
this.changeFocusedItemIndex(event, event.processedItem.index);
}
},
onArrowDownKey(event) {
const itemIndex = this.focusedItemInfo.index !== -1 ? this.findNextItemIndex(this.focusedItemInfo.index) : this.findFirstFocusedItemIndex();

17
components/lib/contextmenu/ContextMenuSub.vue
View file

@ -20,7 +20,13 @@
:data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)"
>
<div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions('content', processedItem, index)">
<div
:class="cx('content')"
@click="onItemClick($event, processedItem)"
@mouseenter="onItemMouseEnter($event, processedItem)"
@mousemove="onItemMouseMove($event, processedItem)"
v-bind="getPTOptions('content', processedItem, index)"
>
<template v-if="!templates.item">
<a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action', processedItem, index)">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('icon')" />
@ -50,6 +56,7 @@
:unstyled="unstyled"
@item-click="$emit('item-click', $event)"
@item-mouseenter="$emit('item-mouseenter', $event)"
@item-mousemove="$emit('item-mousemove', $event)"
:aria-labelledby="getItemLabelId(processedItem)"
v-bind="ptm('submenu')"
/>
@ -78,7 +85,7 @@ export default {
name: 'ContextMenuSub',
hostName: 'ContextMenu',
extends: BaseComponent,
emits: ['item-click', 'item-mouseenter'],
emits: ['item-click', 'item-mouseenter', 'item-mousemove'],
props: {
items: {
type: Array,
@ -117,9 +124,6 @@ export default {
default: 0
}
},
mounted() {
console.log(this.templates);
},
methods: {
getItemId(processedItem) {
return `${this.menuId}_${processedItem.key}`;
@ -169,6 +173,9 @@ export default {
onItemMouseEnter(event, processedItem) {
this.$emit('item-mouseenter', { originalEvent: event, processedItem });
},
onItemMouseMove(event, processedItem) {
this.$emit('item-mousemove', { originalEvent: event, processedItem, isFocus: true });
},
getAriaSetSize() {
return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;
},