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

Menu components: active state remains on outside click

active-menu
tugcekucukoglu 2024-06-25 11:55:56 +03:00
parent 97e00ab465
commit c05372fa32
5 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/primevue/src/megamenu/MegaMenu.vue
View File

@ -50,6 +50,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>
@ -184,8 +185,8 @@ export default {
this.$emit('focus', event); this.$emit('focus', event);
}, },
onBlur(event) { onBlur(event) {
this.focused = false; // this.focused = false;
this.focusedItemInfo = { index: -1, key: '', parentKey: '' }; // this.focusedItemInfo = { index: -1, key: '', parentKey: '' };
this.searchValue = ''; this.searchValue = '';
this.dirty = false; this.dirty = false;
this.$emit('blur', event); this.$emit('blur', event);
@ -289,7 +290,12 @@ export default {
if (grouped) { if (grouped) {
this.onItemChange(event); this.onItemChange(event);
} else { } else {
const rootProcessedItem = root ? processedItem : this.activeItem;
this.hide(originalEvent); this.hide(originalEvent);
this.changeFocusedItemInfo(originalEvent, rootProcessedItem ? rootProcessedItem.index : -1);
!this.mobile && DomHandler.focus(this.menubar);
} }
} }
}, },
@ -298,6 +304,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);
}, },

6
packages/primevue/src/megamenu/MegaMenuSub.vue
View File

@ -56,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)"
/> />
</div> </div>
</div> </div>
@ -85,7 +86,7 @@ export default {
name: 'MegaMenuSub', name: 'MegaMenuSub',
hostName: 'MegaMenu', hostName: 'MegaMenu',
extends: BaseComponent, extends: BaseComponent,
emits: ['item-click', 'item-mouseenter'], emits: ['item-click', 'item-mouseenter', 'item-mousemove'],
props: { props: {
menuId: { menuId: {
type: String, type: String,
@ -180,6 +181,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;
}, },

2
packages/primevue/src/menu/Menu.vue
View File

@ -309,7 +309,7 @@ export default {
if (this.overlayVisible && isOutsideContainer && isOutsideTarget) { if (this.overlayVisible && isOutsideContainer && isOutsideTarget) {
this.hide(); this.hide();
} else if (!this.popup && isOutsideContainer && isOutsideTarget) { } else if (!this.popup && isOutsideContainer && isOutsideTarget) {
this.focusedOptionIndex = -1; // this.focusedOptionIndex = -1;
} }
}; };

4
packages/primevue/src/menubar/Menubar.vue
View File

@ -178,8 +178,8 @@ export default {
this.$emit('focus', event); this.$emit('focus', event);
}, },
onBlur(event) { onBlur(event) {
this.focused = false; // this.focused = false;
this.focusedItemInfo = { index: -1, level: 0, parentKey: '' }; // this.focusedItemInfo = { index: -1, level: 0, parentKey: '' };
this.searchValue = ''; this.searchValue = '';
this.dirty = false; this.dirty = false;
this.$emit('blur', event); this.$emit('blur', event);

4
packages/primevue/src/tieredmenu/TieredMenu.vue
View File

@ -165,8 +165,8 @@ export default {
this.$emit('focus', event); this.$emit('focus', event);
}, },
onBlur(event) { onBlur(event) {
this.focused = false; // this.focused = false;
this.focusedItemInfo = { index: -1, level: 0, parentKey: '' }; // this.focusedItemInfo = { index: -1, level: 0, parentKey: '' };
this.searchValue = ''; this.searchValue = '';
this.dirty = false; this.dirty = false;
this.$emit('blur', event); this.$emit('blur', event);