primevue 3.16.2 → 3.18.0

package/menubar/MenubarSub.vue

@@ -1,40 +1,66 @@
 <template>
-    <ul :class="containerClass" :role="root ? 'menubar' : 'menu'">
-        <template v-for="(item, i) of model" :key="label(item) + i.toString()">
-            <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator"
-                @mouseenter="onItemMouseEnter($event, item)">
-                <template v-if="!template">
-                    <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
-                        <a :href="href" @click="onItemClick($event, item, navigate)" :class="linkClass(item, {isActive, isExactActive})" v-ripple @keydown="onItemKeyDown($event, item)" role="menuitem">
-                            <span :class="['p-menuitem-icon', item.icon]" v-if="item.icon"></span>
-                            <span class="p-menuitem-text">{{label(item)}}</span>
+    <ul>
+        <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
+            <li
+                v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
+                :id="getItemId(processedItem)"
+                :style="getItemProp(processedItem, 'style')"
+                :class="getItemClass(processedItem)"
+                role="menuitem"
+                :aria-label="getItemLabel(processedItem)"
+                :aria-disabled="isItemDisabled(processedItem) || undefined"
+                :aria-expanded="isItemGroup(processedItem) ? isItemActive(processedItem) : undefined"
+                :aria-haspopup="isItemGroup(processedItem) && !getItemProp(processedItem, 'to') ? 'menu' : undefined"
+                :aria-level="level + 1"
+                :aria-setsize="getAriaSetSize()"
+                :aria-posinset="getAriaPosInset(index)"
+            >
+                <div class="p-menuitem-content" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)">
+                    <template v-if="!template">
+                        <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
+                            <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
+                                <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
+                                <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
+                            </a>
+                        </router-link>
+                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
+                            <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
+                            <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
+                            <span v-if="getItemProp(processedItem, 'items')" :class="getSubmenuIcon()"></span>
                         </a>
-                    </router-link>
-                    <a v-else :href="item.url" :class="linkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
-                        @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="disabled(item) ? null : '0'" v-ripple>
-                        <span :class="['p-menuitem-icon', item.icon]" v-if="item.icon"></span>
-                        <span class="p-menuitem-text">{{label(item)}}</span>
-                        <span :class="getSubmenuIcon()" v-if="item.items"></span>
-                    </a>
-                </template>
-                <component v-else :is="template" :item="item"></component>
-                <MenubarSub :model="item.items" v-if="visible(item) && item.items" :key="label(item) + '_sub_'" :mobileActive="mobileActive"
-                    @leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" :template="template" :exact="exact" />
+                    </template>
+                    <component v-else :is="template" :item="processedItem.item"></component>
+                </div>
+                <MenubarSub
+                    v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
+                    :menuId="menuId"
+                    role="menu"
+                    class="p-submenu-list"
+                    :focusedItemId="focusedItemId"
+                    :items="processedItem.items"
+                    :mobileActive="mobileActive"
+                    :activeItemPath="activeItemPath"
+                    :template="template"
+                    :exact="exact"
+                    :level="level + 1"
+                    @item-click="$emit('item-click', $event)"
+                    @item-mouseenter="$emit('item-mouseenter', $event)"
+                />
             </li>
-            <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
+            <li v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')" :id="getItemId(processedItem)" :style="getItemProp(processedItem, 'style')" :class="getSeparatorItemClass(processedItem)" role="separator"></li>
         </template>
     </ul>
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
+import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'MenubarSub',
-    emits: ['keydown-item', 'leaf-click'],
+    emits: ['item-mouseenter', 'item-click'],
     props: {
-        model: {
+        items: {
             type: Array,
             default: null
         },
@@ -46,10 +72,6 @@ export default {
             type: Boolean,
             default: false
         },
-        parentActive: {
-            type: Boolean,
-            default: false
-        },
         mobileActive: {
             type: Boolean,
             default: false
@@ -61,246 +83,108 @@ export default {
         exact: {
             type: Boolean,
             default: true
+        },
+        level: {
+            type: Number,
+            default: 0
+        },
+        menuId: {
+            type: String,
+            default: null
+        },
+        focusedItemId: {
+            type: String,
+            default: null
+        },
+        activeItemPath: {
+            type: Object,
+            default: null
         }
     },
-    documentClickListener: null,
-    watch: {
-        parentActive(newValue) {
-            if (!newValue) {
-                this.activeItem = null;
-            }
-        }
-    },
-    data() {
-        return {
-            activeItem: null
-        }
-    },
-    updated() {
-        if (this.root && this.activeItem) {
-            this.bindDocumentClickListener();
-        }
-    },
-    beforeUnmount() {
-        this.unbindDocumentClickListener();
-    },
+    list: null,
     methods: {
-        onItemMouseEnter(event, item) {
-            if (this.disabled(item) || this.mobileActive) {
-                event.preventDefault();
-                return;
-            }
-
-            if (this.root) {
-                if (this.activeItem || this.popup) {
-                    this.activeItem = item;
-                }
-            }
-            else {
-                this.activeItem = item;
-            }
+        getItemId(processedItem) {
+            return `${this.menuId}_${processedItem.key}`;
         },
-        onItemClick(event, item, navigate) {
-            if (this.disabled(item)) {
-                event.preventDefault();
-                return;
-            }
-
-            if (item.command) {
-                item.command({
-                    originalEvent: event,
-                    item: item
-                });
-            }
-
-            if (item.items) {
-                if (this.activeItem && item === this.activeItem)
-                    this.activeItem = null;
-                else
-                    this.activeItem = item;
-            }
-
-            if (!item.items) {
-                this.onLeafClick();
-            }
-
-            if (item.to && navigate) {
-                navigate(event);
-            }
+        getItemKey(processedItem) {
+            return this.getItemId(processedItem);
         },
-        onLeafClick() {
-            this.activeItem = null;
-            this.$emit('leaf-click');
+        getItemProp(processedItem, name) {
+            return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
         },
-        onItemKeyDown(event, item) {
-            let listItem = event.currentTarget.parentElement;
-
-            switch(event.which) {
-                //down
-                case 40:
-                    if (this.root) {
-                        if (item.items) {
-                            this.expandSubmenu(item, listItem);
-                        }
-                    }
-                    else {
-                        this.navigateToNextItem(listItem);
-                    }
-
-                    event.preventDefault();
-                break;
-
-                //up
-                case 38:
-                    if (!this.root) {
-                        this.navigateToPrevItem(listItem);
-                    }
-
-                    event.preventDefault();
-                break;
-
-                //right
-                case 39:
-                    if (this.root) {
-                        var nextItem = this.findNextItem(listItem);
-                        if (nextItem) {
-                            nextItem.children[0].focus();
-                        }
-                    }
-                    else {
-                        if (item.items) {
-                            this.expandSubmenu(item, listItem);
-                        }
-                    }
-
-                    event.preventDefault();
-                break;
-
-                //left
-                case 37:
-                    if (this.root) {
-                        this.navigateToPrevItem(listItem);
-                    }
-
-                    event.preventDefault();
-                break;
-
-                default:
-                break;
-            }
-
-            this.$emit('keydown-item', {
-                originalEvent: event,
-                element: listItem
-            });
+        getItemLabel(processedItem) {
+            return this.getItemProp(processedItem, 'label');
         },
-        onChildItemKeyDown(event) {
-            if (this.root) {
-                //up
-                if (event.originalEvent.which === 38 && event.element.previousElementSibling == null) {
-                    this.collapseMenu(event.element);
-                }
-            }
-            else {
-                //left
-                if (event.originalEvent.which === 37) {
-                    this.collapseMenu(event.element);
-                }
-            }
+        isItemActive(processedItem) {
+            return this.activeItemPath.some((path) => path.key === processedItem.key);
         },
-        findNextItem(item) {
-            let nextItem = item.nextElementSibling;
-
-            if (nextItem)
-                return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;
-            else
-                return null;
+        isItemVisible(processedItem) {
+            return this.getItemProp(processedItem, 'visible') !== false;
         },
-        findPrevItem(item) {
-            let prevItem = item.previousElementSibling;
-
-            if (prevItem)
-                return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;
-            else
-                return null;
+        isItemDisabled(processedItem) {
+            return this.getItemProp(processedItem, 'disabled');
         },
-        expandSubmenu(item, listItem) {
-            this.activeItem = item;
-
-            setTimeout(() => {
-                listItem.children[1].children[0].children[0].focus();
-            }, 50);
+        isItemFocused(processedItem) {
+            return this.focusedItemId === this.getItemId(processedItem);
         },
-        collapseMenu(listItem) {
-            this.activeItem = null;
-            listItem.parentElement.previousElementSibling.focus();
+        isItemGroup(processedItem) {
+            return ObjectUtils.isNotEmpty(processedItem.items);
         },
-        navigateToNextItem(listItem) {
-            var nextItem = this.findNextItem(listItem);
-            if (nextItem) {
-                nextItem.children[0].focus();
-            }
+        onItemClick(event, processedItem) {
+            const command = this.getItemProp(processedItem, 'command');
+
+            command && command({ originalEvent: event, item: processedItem.item });
+            this.$emit('item-click', { originalEvent: event, processedItem, isFocus: true });
         },
-        navigateToPrevItem(listItem) {
-            var prevItem = this.findPrevItem(listItem);
-            if (prevItem) {
-                prevItem.children[0].focus();
-            }
+        onItemMouseEnter(event, processedItem) {
+            this.$emit('item-mouseenter', { originalEvent: event, processedItem });
         },
-        getItemClass(item) {
-            return [
-                'p-menuitem', item.class, {
-                    'p-menuitem-active': this.activeItem === item
-                }
-            ]
+        onItemActionClick(event, navigate) {
+            navigate && navigate(event);
         },
-        linkClass(item, routerProps) {
-            return ['p-menuitem-link', {
-                'p-disabled': this.disabled(item),
-                'router-link-active': routerProps && routerProps.isActive,
-                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-            }];
+        getAriaSetSize() {
+            return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;
         },
-        bindDocumentClickListener() {
-            if (!this.documentClickListener) {
-                this.documentClickListener = (event) => {
-                    if (this.$el && !this.$el.contains(event.target)) {
-                        this.activeItem = null;
-                        this.unbindDocumentClickListener();
-                    }
-                };
-
-                document.addEventListener('click', this.documentClickListener);
-            }
+        getAriaPosInset(index) {
+            return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
         },
-        unbindDocumentClickListener() {
-            if (this.documentClickListener) {
-                document.removeEventListener('click', this.documentClickListener);
-                this.documentClickListener = null;
-            }
+        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)
+                }
+            ];
         },
-        getSubmenuIcon() {
+        getItemActionClass(processedItem, routerProps) {
             return [
-                'p-submenu-icon pi', {'pi-angle-right': !this.root, 'pi-angle-down': this.root}
+                'p-menuitem-link',
+                {
+                    'router-link-active': routerProps && routerProps.isActive,
+                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+                }
             ];
         },
-        visible(item) {
-            return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+        getItemIconClass(processedItem) {
+            return ['p-menuitem-icon', this.getItemProp(processedItem, 'icon')];
         },
-        disabled(item) {
-            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+        getSeparatorItemClass(processedItem) {
+            return ['p-menu-separator p-menuitem-separator', this.getItemProp(processedItem, 'class')]; // TODO: the 'p-menu-separator' class is deprecated since v3.18.0.
         },
-        label(item) {
-            return (typeof item.label === 'function' ? item.label() : item.label);
+        getSubmenuIcon() {
+            return ['p-submenu-icon pi', { 'pi-angle-right': !this.root, 'pi-angle-down': this.root }];
         }
     },
     computed: {
         containerClass() {
-            return {'p-submenu-list': !this.root, 'p-menubar-root-list': this.root};
+            return { 'p-submenu-list': !this.root, 'p-menubar-root-list': this.root };
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>