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

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

styled-props-system
tugcekucukoglu 2024-02-15 18:57:40 +03:00
parent 266d5019af
commit e67efa2d8c
10 changed files with 91 additions and 29 deletions
Show Stats 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" @keydown="onKeyDown"
@item-click="onItemClick" @item-click="onItemClick"
@item-mouseenter="onItemMouseEnter" @item-mouseenter="onItemMouseEnter"
@item-mousemove="onItemMouseMove"
/> />
</div> </div>
</transition> </transition>
@ -247,6 +248,11 @@ export default {
onItemMouseEnter(event) { onItemMouseEnter(event) {
this.onItemChange(event); this.onItemChange(event);
}, },
onItemMouseMove(event) {
if (this.focused) {
this.changeFocusedItemIndex(event, event.processedItem.index);
}
},
onArrowDownKey(event) { onArrowDownKey(event) {
const itemIndex = this.focusedItemInfo.index !== -1 ? this.findNextItemIndex(this.focusedItemInfo.index) : this.findFirstFocusedItemIndex(); 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-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(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"> <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)"> <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')" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('icon')" />
@ -50,6 +56,7 @@
:unstyled="unstyled" :unstyled="unstyled"
@item-click="$emit('item-click', $event)" @item-click="$emit('item-click', $event)"
@item-mouseenter="$emit('item-mouseenter', $event)" @item-mouseenter="$emit('item-mouseenter', $event)"
@item-mousemove="$emit('item-mousemove', $event)"
:aria-labelledby="getItemLabelId(processedItem)" :aria-labelledby="getItemLabelId(processedItem)"
v-bind="ptm('submenu')" v-bind="ptm('submenu')"
/> />
@ -78,7 +85,7 @@ export default {
name: 'ContextMenuSub', name: 'ContextMenuSub',
hostName: 'ContextMenu', hostName: 'ContextMenu',
extends: BaseComponent, extends: BaseComponent,
emits: ['item-click', 'item-mouseenter'], emits: ['item-click', 'item-mouseenter', 'item-mousemove'],
props: { props: {
items: { items: {
type: Array, type: Array,
@ -117,9 +124,6 @@ export default {
default: 0 default: 0
} }
}, },
mounted() {
console.log(this.templates);
},
methods: { methods: {
getItemId(processedItem) { getItemId(processedItem) {
return `${this.menuId}_${processedItem.key}`; return `${this.menuId}_${processedItem.key}`;
@ -169,6 +173,9 @@ export default {
onItemMouseEnter(event, processedItem) { onItemMouseEnter(event, processedItem) {
this.$emit('item-mouseenter', { originalEvent: event, processedItem }); this.$emit('item-mouseenter', { originalEvent: event, processedItem });
}, },
onItemMouseMove(event, processedItem) {
this.$emit('item-mousemove', { originalEvent: event, processedItem, isFocus: true });
},
getAriaSetSize() { getAriaSetSize() {
return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length; return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;
}, },

27
components/lib/menu/Menu.vue
View File

@ -25,12 +25,21 @@
<slot name="submenuheader" :item="item">{{ label(item) }}</slot> <slot name="submenuheader" :item="item">{{ label(item) }}</slot>
</li> </li>
<template v-for="(child, j) of item.items" :key="child.label + i + '_' + j"> <template v-for="(child, j) of item.items" :key="child.label + i + '_' + j">
<PVMenuitem v-if="visible(child) && !child.separator" :id="id + '_' + i + '_' + j" :item="child" :templates="$slots" :focusedOptionId="focusedOptionId" @item-click="itemClick" :pt="pt" /> <PVMenuitem
v-if="visible(child) && !child.separator"
:id="id + '_' + i + '_' + j"
:item="child"
:templates="$slots"
:focusedOptionId="focusedOptionId"
@item-click="itemClick"
@item-mousemove="itemMouseMove"
:pt="pt"
/>
<li v-else-if="visible(child) && child.separator" :key="'separator' + i + j" :class="[cx('separator'), item.class]" :style="child.style" role="separator" v-bind="ptm('separator')"></li> <li v-else-if="visible(child) && child.separator" :key="'separator' + i + j" :class="[cx('separator'), item.class]" :style="child.style" role="separator" v-bind="ptm('separator')"></li>
</template> </template>
</template> </template>
<li v-else-if="visible(item) && item.separator" :key="'separator' + i.toString()" :class="[cx('separator'), item.class]" :style="item.style" role="separator" v-bind="ptm('separator')"></li> <li v-else-if="visible(item) && item.separator" :key="'separator' + i.toString()" :class="[cx('separator'), item.class]" :style="item.style" role="separator" v-bind="ptm('separator')"></li>
<PVMenuitem v-else :key="label(item) + i.toString()" :id="id + '_' + i" :item="item" :index="i" :templates="$slots" :focusedOptionId="focusedOptionId" @item-click="itemClick" :pt="pt" /> <PVMenuitem v-else :key="label(item) + i.toString()" :id="id + '_' + i" :item="item" :index="i" :templates="$slots" :focusedOptionId="focusedOptionId" @item-click="itemClick" @item-mousemove="itemMouseMove" :pt="pt" />
</template> </template>
</ul> </ul>
<div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')"> <div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')">
@ -116,15 +125,14 @@ export default {
this.focusedOptionIndex = event.id; this.focusedOptionIndex = event.id;
} }
}, },
itemMouseMove(event) {
if (this.focused) {
this.focusedOptionIndex = event.id;
}
},
onListFocus(event) { onListFocus(event) {
this.focused = true; this.focused = true;
!this.popup && this.changeFocusedOptionIndex(0);
if (!this.popup) {
if (this.selectedOptionIndex !== -1) {
this.changeFocusedOptionIndex(this.selectedOptionIndex);
this.selectedOptionIndex = -1;
} else this.changeFocusedOptionIndex(0);
}
this.$emit('focus', event); this.$emit('focus', event);
}, },
@ -255,7 +263,6 @@ export default {
if (this.popup) { if (this.popup) {
DomHandler.focus(this.list); DomHandler.focus(this.list);
this.changeFocusedOptionIndex(0);
} }
this.$emit('show'); this.$emit('show');

7
components/lib/menu/Menuitem.vue
View File

@ -11,7 +11,7 @@
:data-p-focused="isItemFocused()" :data-p-focused="isItemFocused()"
:data-p-disabled="disabled() || false" :data-p-disabled="disabled() || false"
> >
<div :class="cx('content')" @click="onItemClick($event)" v-bind="getPTOptions('content')"> <div :class="cx('content')" @click="onItemClick($event)" @mousemove="onItemMouseMove($event)" v-bind="getPTOptions('content')">
<template v-if="!templates.item"> <template v-if="!templates.item">
<a v-ripple :href="item.url" :class="cx('action')" :target="item.target" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action')"> <a v-ripple :href="item.url" :class="cx('action')" :target="item.target" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon')" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon')" />
@ -35,7 +35,7 @@ export default {
hostName: 'Menu', hostName: 'Menu',
extends: BaseComponent, extends: BaseComponent,
inheritAttrs: false, inheritAttrs: false,
emits: ['item-click'], emits: ['item-click', 'item-mousemove'],
props: { props: {
item: null, item: null,
templates: null, templates: null,
@ -66,6 +66,9 @@ export default {
command && command({ originalEvent: event, item: this.item.item }); command && command({ originalEvent: event, item: this.item.item });
this.$emit('item-click', { originalEvent: event, item: this.item, id: this.id }); this.$emit('item-click', { originalEvent: event, item: this.item, id: this.id });
}, },
onItemMouseMove(event) {
this.$emit('item-mousemove', { originalEvent: event, item: this.item, id: this.id });
},
visible() { visible() {
return typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false; return typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false;
}, },

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

@ -46,6 +46,7 @@
@keydown="onKeyDown" @keydown="onKeyDown"
@item-click="onItemClick" @item-click="onItemClick"
@item-mouseenter="onItemMouseEnter" @item-mouseenter="onItemMouseEnter"
@item-mousemove="onItemMouseMove"
/> />
<div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')"> <div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')">
<slot name="end"></slot> <slot name="end"></slot>
@ -149,8 +150,6 @@ export default {
event.preventDefault(); event.preventDefault();
}, },
show() { show() {
this.focusedItemInfo = { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' };
DomHandler.focus(this.menubar); DomHandler.focus(this.menubar);
}, },
hide(event, isFocus) { hide(event, isFocus) {
@ -169,7 +168,11 @@ export default {
}, },
onFocus(event) { onFocus(event) {
this.focused = true; this.focused = true;
if (!this.popup) {
this.focusedItemInfo = this.focusedItemInfo.index !== -1 ? this.focusedItemInfo : { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' }; this.focusedItemInfo = this.focusedItemInfo.index !== -1 ? this.focusedItemInfo : { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' };
}
this.$emit('focus', event); this.$emit('focus', event);
}, },
onBlur(event) { onBlur(event) {
@ -290,6 +293,11 @@ export default {
this.onItemChange(event); this.onItemChange(event);
} }
}, },
onItemMouseMove(event) {
if (this.focused) {
this.changeFocusedItemIndex(event, event.processedItem.index);
}
},
menuButtonClick(event) { menuButtonClick(event) {
this.toggle(event); this.toggle(event);
}, },

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

@ -19,7 +19,7 @@
:data-p-focused="isItemFocused(processedItem)" :data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)" :data-p-disabled="isItemDisabled(processedItem)"
> >
<div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')"> <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" @mousemove="onItemMouseMove($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
<template v-if="!templates.item"> <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(processedItem, index, 'action')"> <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('icon')" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('icon')" />
@ -49,6 +49,7 @@
:unstyled="unstyled" :unstyled="unstyled"
@item-click="$emit('item-click', $event)" @item-click="$emit('item-click', $event)"
@item-mouseenter="$emit('item-mouseenter', $event)" @item-mouseenter="$emit('item-mouseenter', $event)"
@item-mousemove="$emit('item-mousemove', $event)"
/> />
</li> </li>
<li <li
@ -75,7 +76,7 @@ export default {
name: 'MenubarSub', name: 'MenubarSub',
hostName: 'Menubar', hostName: 'Menubar',
extends: BaseComponent, extends: BaseComponent,
emits: ['item-mouseenter', 'item-click'], emits: ['item-mouseenter', 'item-click', 'item-mousemove'],
props: { props: {
items: { items: {
type: Array, type: Array,
@ -165,6 +166,9 @@ export default {
onItemMouseEnter(event, processedItem) { onItemMouseEnter(event, processedItem) {
this.$emit('item-mouseenter', { originalEvent: event, processedItem }); this.$emit('item-mouseenter', { originalEvent: event, processedItem });
}, },
onItemMouseMove(event, processedItem) {
this.$emit('item-mousemove', { originalEvent: event, processedItem });
},
getAriaSetSize() { getAriaSetSize() {
return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length; return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;
}, },

6
components/lib/panelmenu/PanelMenuList.vue
View File

@ -14,6 +14,7 @@
@blur="onBlur" @blur="onBlur"
@keydown="onKeyDown" @keydown="onKeyDown"
@item-toggle="onItemToggle" @item-toggle="onItemToggle"
@item-mousemove="onItemMouseMove"
:pt="pt" :pt="pt"
:unstyled="unstyled" :unstyled="unstyled"
v-bind="ptm('menu')" v-bind="ptm('menu')"
@ -225,6 +226,11 @@ export default {
this.focusedItem = processedItem; this.focusedItem = processedItem;
DomHandler.focus(this.$el); DomHandler.focus(this.$el);
}, },
onItemMouseMove(event) {
if (this.focused) {
this.focusedItem = event.processedItem;
}
},
isElementInPanel(event, element) { isElementInPanel(event, element) {
const panel = event.currentTarget.closest('[data-pc-section="panel"]'); const panel = event.currentTarget.closest('[data-pc-section="panel"]');

8
components/lib/panelmenu/PanelMenuSub.vue
View File

@ -16,7 +16,7 @@
:data-p-focused="isItemFocused(processedItem)" :data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)" :data-p-disabled="isItemDisabled(processedItem)"
> >
<div :class="cx('content')" @click="onItemClick($event, processedItem)" v-bind="getPTOptions('content', processedItem, index)"> <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mousemove="onItemMouseMove($event, processedItem)" v-bind="getPTOptions('content', processedItem, index)">
<template v-if="!templates.item"> <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)"> <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)">
<template v-if="isItemGroup(processedItem)"> <template v-if="isItemGroup(processedItem)">
@ -52,6 +52,7 @@
:templates="templates" :templates="templates"
:activeItemPath="activeItemPath" :activeItemPath="activeItemPath"
@item-toggle="onItemToggle" @item-toggle="onItemToggle"
@item-mousemove="$emit('item-mousemove', $event)"
:pt="pt" :pt="pt"
:unstyled="unstyled" :unstyled="unstyled"
v-bind="ptm('submenu')" v-bind="ptm('submenu')"
@ -82,7 +83,7 @@ export default {
name: 'PanelMenuSub', name: 'PanelMenuSub',
hostName: 'PanelMenu', hostName: 'PanelMenu',
extends: BaseComponent, extends: BaseComponent,
emits: ['item-toggle'], emits: ['item-toggle', 'item-mousemove'],
props: { props: {
panelId: { panelId: {
type: String, type: String,
@ -159,6 +160,9 @@ export default {
onItemToggle(event) { onItemToggle(event) {
this.$emit('item-toggle', event); this.$emit('item-toggle', event);
}, },
onItemMouseMove(event, processedItem) {
this.$emit('item-mousemove', { originalEvent: event, processedItem });
},
getAriaSetSize() { getAriaSetSize() {
return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length; return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;
}, },

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

@ -29,6 +29,7 @@
@keydown="onKeyDown" @keydown="onKeyDown"
@item-click="onItemClick" @item-click="onItemClick"
@item-mouseenter="onItemMouseEnter" @item-mouseenter="onItemMouseEnter"
@item-mousemove="onItemMouseMove"
/> />
<div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')"> <div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')">
<slot name="end"></slot> <slot name="end"></slot>
@ -137,8 +138,6 @@ export default {
this.relatedTarget = event.relatedTarget || null; this.relatedTarget = event.relatedTarget || null;
} }
this.focusedItemInfo = { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' };
isFocus && DomHandler.focus(this.menubar); isFocus && DomHandler.focus(this.menubar);
}, },
hide(event, isFocus) { hide(event, isFocus) {
@ -155,7 +154,10 @@ export default {
}, },
onFocus(event) { onFocus(event) {
this.focused = true; this.focused = true;
if (!this.popup) {
this.focusedItemInfo = this.focusedItemInfo.index !== -1 ? this.focusedItemInfo : { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' }; this.focusedItemInfo = this.focusedItemInfo.index !== -1 ? this.focusedItemInfo : { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' };
}
this.$emit('focus', event); this.$emit('focus', event);
}, },
@ -292,6 +294,11 @@ export default {
this.onItemChange(event); this.onItemChange(event);
} }
}, },
onItemMouseMove(event) {
if (this.focused) {
this.changeFocusedItemIndex(event, event.processedItem.index);
}
},
onArrowDownKey(event) { onArrowDownKey(event) {
const itemIndex = this.focusedItemInfo.index !== -1 ? this.findNextItemIndex(this.focusedItemInfo.index) : this.findFirstFocusedItemIndex(); const itemIndex = this.focusedItemInfo.index !== -1 ? this.findNextItemIndex(this.focusedItemInfo.index) : this.findFirstFocusedItemIndex();

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

@ -20,7 +20,13 @@
:data-p-focused="isItemFocused(processedItem)" :data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)" :data-p-disabled="isItemDisabled(processedItem)"
> >
<div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')"> <div
:class="cx('content')"
@click="onItemClick($event, processedItem)"
@mouseenter="onItemMouseEnter($event, processedItem)"
@mousemove="onItemMouseMove($event, processedItem)"
v-bind="getPTOptions(processedItem, index, 'content')"
>
<template v-if="!templates.item"> <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(processedItem, index, 'action')"> <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('icon')" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('icon')" />
@ -51,6 +57,7 @@
:unstyled="unstyled" :unstyled="unstyled"
@item-click="$emit('item-click', $event)" @item-click="$emit('item-click', $event)"
@item-mouseenter="$emit('item-mouseenter', $event)" @item-mouseenter="$emit('item-mouseenter', $event)"
@item-mousemove="$emit('item-mousemove', $event)"
/> />
</li> </li>
<li <li
@ -77,7 +84,7 @@ export default {
name: 'TieredMenuSub', name: 'TieredMenuSub',
hostName: 'TieredMenu', hostName: 'TieredMenu',
extends: BaseComponent, extends: BaseComponent,
emits: ['item-click', 'item-mouseenter'], emits: ['item-click', 'item-mouseenter', 'item-mousemove'],
container: null, container: null,
props: { props: {
menuId: { menuId: {
@ -165,6 +172,9 @@ export default {
onItemMouseEnter(event, processedItem) { onItemMouseEnter(event, processedItem) {
this.$emit('item-mouseenter', { originalEvent: event, processedItem }); this.$emit('item-mouseenter', { originalEvent: event, processedItem });
}, },
onItemMouseMove(event, processedItem) {
this.$emit('item-mousemove', { originalEvent: event, processedItem });
},
getAriaSetSize() { getAriaSetSize() {
return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length; return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;
}, },