<template> <div :ref="containerRef" :class="containerClass"> <div v-if="$slots.start" class="p-menubar-start"> <slot name="start"></slot> </div> <a v-if="model && model.length > 0" ref="menubutton" role="button" tabindex="0" class="p-menubar-button" :aria-haspopup="model.length && model.length > 0 ? true : false" :aria-expanded="mobileActive" :aria-controls="id" :aria-label="$primevue.config.locale.aria.navigation" @click="menuButtonClick($event)" @keydown="menuButtonKeydown($event)" v-bind="buttonProps" > <i class="pi pi-bars" /> </a> <MenubarSub :ref="menubarRef" :id="id" class="p-menubar-root-list" role="menubar" :items="processedItems" :template="$slots.item" :root="true" :mobileActive="mobileActive" tabindex="0" :aria-activedescendant="focused ? focusedItemId : undefined" :menuId="id" :focusedItemId="focused ? focusedItemId : undefined" :activeItemPath="activeItemPath" :exact="exact" :level="0" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @item-click="onItemClick" @item-mouseenter="onItemMouseEnter" /> <div v-if="$slots.end" class="p-menubar-end"> <slot name="end"></slot> </div> </div> </template> <script> import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils'; import MenubarSub from './MenubarSub.vue'; export default { name: 'Menubar', 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, mobileActive: false, focused: false, focusedItemInfo: { index: -1, level: 0, parentKey: '' }, activeItemPath: [], dirty: false }; }, watch: { '$attrs.id': function (newValue) { this.id = newValue || UniqueComponentId(); }, activeItemPath(newPath) { if (ObjectUtils.isNotEmpty(newPath)) { this.bindOutsideClickListener(); this.bindResizeListener(); } else { this.unbindOutsideClickListener(); this.unbindResizeListener(); } } }, outsideClickListener: null, container: null, menubar: null, mounted() { this.id = this.id || UniqueComponentId(); }, beforeUnmount() { this.mobileActive = false; this.unbindOutsideClickListener(); this.unbindResizeListener(); if (this.container) { ZIndexUtils.clear(this.container); } this.container = null; }, methods: { getItemProp(item, name) { return item ? ObjectUtils.getItemValue(item[name]) : undefined; }, getItemLabel(item) { return this.getItemProp(item, 'label'); }, isItemDisabled(item) { return this.getItemProp(item, 'disabled'); }, isItemGroup(item) { return ObjectUtils.isNotEmpty(this.getItemProp(item, 'items')); }, isItemSeparator(item) { return this.getItemProp(item, 'separator'); }, getProccessedItemLabel(processedItem) { return processedItem ? this.getItemLabel(processedItem.item) : undefined; }, isProccessedItemGroup(processedItem) { return processedItem && ObjectUtils.isNotEmpty(processedItem.items); }, toggle(event) { if (this.mobileActive) { this.mobileActive = false; ZIndexUtils.clear(this.menubar); this.hide(); } else { this.mobileActive = true; ZIndexUtils.set('menu', this.menubar, this.$primevue.config.zIndex.menu); setTimeout(() => { this.show(); }, 0); } this.bindOutsideClickListener(); event.preventDefault(); }, show() { this.focusedItemInfo = { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' }; DomHandler.focus(this.menubar); }, hide(event, isFocus) { if (this.mobileActive) { setTimeout(() => { DomHandler.focus(this.$refs.menubutton); }, 0); } this.activeItemPath = []; this.focusedItemInfo = { index: -1, level: 0, parentKey: '' }; isFocus && DomHandler.focus(this.menubar); this.dirty = false; }, onFocus(event) { this.focused = true; this.focusedItemInfo = this.focusedItemInfo.index !== -1 ? this.focusedItemInfo : { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' }; this.$emit('focus', event); }, onBlur(event) { this.focused = false; this.focusedItemInfo = { index: -1, level: 0, parentKey: '' }; this.searchValue = ''; this.dirty = false; this.$emit('blur', event); }, onKeyDown(event) { const metaKey = event.metaKey || event.ctrlKey; switch (event.code) { case 'ArrowDown': this.onArrowDownKey(event); break; case 'ArrowUp': this.onArrowUpKey(event); break; case 'ArrowLeft': this.onArrowLeftKey(event); break; case 'ArrowRight': this.onArrowRightKey(event); break; case 'Home': this.onHomeKey(event); break; case 'End': this.onEndKey(event); break; case 'Space': this.onSpaceKey(event); break; case 'Enter': this.onEnterKey(event); break; case 'Escape': this.onEscapeKey(event); break; case 'Tab': this.onTabKey(event); break; case 'PageDown': case 'PageUp': case 'Backspace': case 'ShiftLeft': case 'ShiftRight': //NOOP break; default: if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { this.searchItems(event, event.key); } break; } }, onItemChange(event) { const { processedItem, isFocus } = event; if (ObjectUtils.isEmpty(processedItem)) return; const { index, key, level, parentKey, items } = processedItem; const grouped = ObjectUtils.isNotEmpty(items); const activeItemPath = this.activeItemPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key); grouped && activeItemPath.push(processedItem); this.focusedItemInfo = { index, level, parentKey }; this.activeItemPath = activeItemPath; grouped && (this.dirty = true); isFocus && DomHandler.focus(this.menubar); }, onItemClick(event) { const { originalEvent, processedItem } = event; const grouped = this.isProccessedItemGroup(processedItem); const root = ObjectUtils.isEmpty(processedItem.parent); const selected = this.isSelected(processedItem); if (selected) { const { index, key, level, parentKey } = processedItem; this.activeItemPath = this.activeItemPath.filter((p) => key !== p.key && key.startsWith(p.key)); this.focusedItemInfo = { index, level, parentKey }; this.dirty = !root; DomHandler.focus(this.menubar); } else { if (grouped) { this.onItemChange(event); } else { const rootProcessedItem = root ? processedItem : this.activeItemPath.find((p) => p.parentKey === ''); this.hide(originalEvent); this.changeFocusedItemIndex(originalEvent, rootProcessedItem ? rootProcessedItem.index : -1); this.mobileActive = false; DomHandler.focus(this.menubar); } } }, onItemMouseEnter(event) { if (!this.mobileActive && this.dirty) { this.onItemChange(event); } }, menuButtonClick(event) { this.toggle(event); }, menuButtonKeydown(event) { (event.code === 'Enter' || event.code === 'Space') && this.menuButtonClick(event); }, onArrowDownKey(event) { const processedItem = this.visibleItems[this.focusedItemInfo.index]; const root = processedItem ? ObjectUtils.isEmpty(processedItem.parent) : null; if (root) { const grouped = this.isProccessedItemGroup(processedItem); if (grouped) { this.onItemChange({ originalEvent: event, processedItem }); this.focusedItemInfo = { index: -1, parentKey: processedItem.key }; this.onArrowRightKey(event); } } else { const itemIndex = this.focusedItemInfo.index !== -1 ? this.findNextItemIndex(this.focusedItemInfo.index) : this.findFirstFocusedItemIndex(); this.changeFocusedItemIndex(event, itemIndex); event.preventDefault(); } }, onArrowUpKey(event) { const processedItem = this.visibleItems[this.focusedItemInfo.index]; const root = ObjectUtils.isEmpty(processedItem.parent); if (root) { const grouped = this.isProccessedItemGroup(processedItem); if (grouped) { this.onItemChange({ originalEvent: event, processedItem }); this.focusedItemInfo = { index: -1, parentKey: processedItem.key }; const itemIndex = this.findLastItemIndex(); this.changeFocusedItemIndex(event, itemIndex); } } else { const parentItem = this.activeItemPath.find((p) => p.key === processedItem.parentKey); if (this.focusedItemInfo.index === 0) { this.focusedItemInfo = { index: -1, parentKey: parentItem ? parentItem.parentKey : '' }; this.searchValue = ''; this.onArrowLeftKey(event); this.activeItemPath = this.activeItemPath.filter((p) => p.parentKey !== this.focusedItemInfo.parentKey); } else { const itemIndex = this.focusedItemInfo.index !== -1 ? this.findPrevItemIndex(this.focusedItemInfo.index) : this.findLastFocusedItemIndex(); this.changeFocusedItemIndex(event, itemIndex); } } event.preventDefault(); }, onArrowLeftKey(event) { const processedItem = this.visibleItems[this.focusedItemInfo.index]; const parentItem = processedItem ? this.activeItemPath.find((p) => p.key === processedItem.parentKey) : null; if (parentItem) { this.onItemChange({ originalEvent: event, processedItem: parentItem }); this.activeItemPath = this.activeItemPath.filter((p) => p.parentKey !== this.focusedItemInfo.parentKey); event.preventDefault(); } else { const itemIndex = this.focusedItemInfo.index !== -1 ? this.findPrevItemIndex(this.focusedItemInfo.index) : this.findLastFocusedItemIndex(); this.changeFocusedItemIndex(event, itemIndex); event.preventDefault(); } }, onArrowRightKey(event) { const processedItem = this.visibleItems[this.focusedItemInfo.index]; const parentItem = processedItem ? this.activeItemPath.find((p) => p.key === processedItem.parentKey) : null; if (parentItem) { const grouped = this.isProccessedItemGroup(processedItem); if (grouped) { this.onItemChange({ originalEvent: event, processedItem }); this.focusedItemInfo = { index: -1, parentKey: processedItem.key }; this.onArrowDownKey(event); } } else { const itemIndex = this.focusedItemInfo.index !== -1 ? this.findNextItemIndex(this.focusedItemInfo.index) : this.findFirstFocusedItemIndex(); this.changeFocusedItemIndex(event, itemIndex); event.preventDefault(); } }, onHomeKey(event) { this.changeFocusedItemIndex(event, this.findFirstItemIndex()); event.preventDefault(); }, onEndKey(event) { this.changeFocusedItemIndex(event, this.findLastItemIndex()); event.preventDefault(); }, 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'); anchorElement ? anchorElement.click() : element && element.click(); const processedItem = this.visibleItems[this.focusedItemInfo.index]; const grouped = this.isProccessedItemGroup(processedItem); !grouped && (this.focusedItemInfo.index = this.findFirstFocusedItemIndex()); } event.preventDefault(); }, onSpaceKey(event) { this.onEnterKey(event); }, onEscapeKey(event) { this.hide(event, true); this.focusedItemInfo.index = this.findFirstFocusedItemIndex(); event.preventDefault(); }, onTabKey(event) { if (this.focusedItemInfo.index !== -1) { const processedItem = this.visibleItems[this.focusedItemInfo.index]; const grouped = this.isProccessedItemGroup(processedItem); !grouped && this.onItemChange({ originalEvent: event, processedItem }); } this.hide(); }, bindOutsideClickListener() { if (!this.outsideClickListener) { this.outsideClickListener = (event) => { const isOutsideContainer = this.menubar !== event.target && !this.menubar.contains(event.target); const isOutsideMenuButton = this.mobileActive && this.$refs.menubutton !== event.target && !this.$refs.menubutton.contains(event.target); if (isOutsideContainer) { isOutsideMenuButton ? (this.mobileActive = false) : this.hide(); } }; document.addEventListener('click', this.outsideClickListener); } }, unbindOutsideClickListener() { if (this.outsideClickListener) { document.removeEventListener('click', this.outsideClickListener); this.outsideClickListener = null; } }, bindResizeListener() { if (!this.resizeListener) { this.resizeListener = (event) => { if (!DomHandler.isTouchDevice()) { this.hide(event, true); } this.mobileActive = false; }; window.addEventListener('resize', this.resizeListener); } }, unbindResizeListener() { if (this.resizeListener) { window.removeEventListener('resize', this.resizeListener); this.resizeListener = null; } }, isItemMatched(processedItem) { return this.isValidItem(processedItem) && this.getProccessedItemLabel(processedItem).toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase()); }, isValidItem(processedItem) { return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item); }, isValidSelectedItem(processedItem) { return this.isValidItem(processedItem) && this.isSelected(processedItem); }, isSelected(processedItem) { return this.activeItemPath.some((p) => p.key === processedItem.key); }, findFirstItemIndex() { return this.visibleItems.findIndex((processedItem) => this.isValidItem(processedItem)); }, findLastItemIndex() { return ObjectUtils.findLastIndex(this.visibleItems, (processedItem) => this.isValidItem(processedItem)); }, findNextItemIndex(index) { const matchedItemIndex = index < this.visibleItems.length - 1 ? this.visibleItems.slice(index + 1).findIndex((processedItem) => this.isValidItem(processedItem)) : -1; return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index; }, findPrevItemIndex(index) { const matchedItemIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleItems.slice(0, index), (processedItem) => this.isValidItem(processedItem)) : -1; return matchedItemIndex > -1 ? matchedItemIndex : index; }, findSelectedItemIndex() { return this.visibleItems.findIndex((processedItem) => this.isValidSelectedItem(processedItem)); }, findFirstFocusedItemIndex() { const selectedIndex = this.findSelectedItemIndex(); return selectedIndex < 0 ? this.findFirstItemIndex() : selectedIndex; }, findLastFocusedItemIndex() { const selectedIndex = this.findSelectedItemIndex(); return selectedIndex < 0 ? this.findLastItemIndex() : selectedIndex; }, searchItems(event, char) { this.searchValue = (this.searchValue || '') + char; let itemIndex = -1; let matched = false; if (this.focusedItemInfo.index !== -1) { itemIndex = this.visibleItems.slice(this.focusedItemInfo.index).findIndex((processedItem) => this.isItemMatched(processedItem)); itemIndex = itemIndex === -1 ? this.visibleItems.slice(0, this.focusedItemInfo.index).findIndex((processedItem) => this.isItemMatched(processedItem)) : itemIndex + this.focusedItemInfo.index; } else { itemIndex = this.visibleItems.findIndex((processedItem) => this.isItemMatched(processedItem)); } if (itemIndex !== -1) { matched = true; } if (itemIndex === -1 && this.focusedItemInfo.index === -1) { itemIndex = this.findFirstFocusedItemIndex(); } if (itemIndex !== -1) { this.changeFocusedItemIndex(event, itemIndex); } if (this.searchTimeout) { clearTimeout(this.searchTimeout); } this.searchTimeout = setTimeout(() => { this.searchValue = ''; this.searchTimeout = null; }, 500); return matched; }, changeFocusedItemIndex(event, index) { if (this.focusedItemInfo.index !== index) { this.focusedItemInfo.index = index; this.scrollInView(); } }, scrollInView(index = -1) { const id = index !== -1 ? `${this.id}_${index}` : this.focusedItemId; const element = DomHandler.findSingle(this.menubar, `li[id="${id}"]`); if (element) { element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' }); } }, createProcessedItems(items, level = 0, parent = {}, parentKey = '') { const processedItems = []; items && items.forEach((item, index) => { const key = (parentKey !== '' ? parentKey + '_' : '') + index; const newItem = { item, index, level, key, parent, parentKey }; newItem['items'] = this.createProcessedItems(item.items, level + 1, newItem, key); processedItems.push(newItem); }); return processedItems; }, containerRef(el) { this.container = el; }, menubarRef(el) { this.menubar = el ? el.$el : undefined; } }, computed: { containerClass() { return ['p-menubar p-component', { 'p-menubar-mobile-active': this.mobileActive }]; }, processedItems() { return this.createProcessedItems(this.model || []); }, visibleItems() { const processedItem = this.activeItemPath.find((p) => p.key === this.focusedItemInfo.parentKey); return processedItem ? processedItem.items : this.processedItems; }, focusedItemId() { return this.focusedItemInfo.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null; } }, components: { MenubarSub: MenubarSub } }; </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>