primevue 3.17.0 → 3.18.0

package/panelmenu/PanelMenuList.vue

@@ -0,0 +1,335 @@
+<template>
+    <PanelMenuSub
+        :id="panelId + '_list'"
+        class="p-panelmenu-root-list"
+        role="tree"
+        :tabindex="-1"
+        :aria-activedescendant="focused ? focusedItemId : undefined"
+        :panelId="panelId"
+        :focusedItemId="focused ? focusedItemId : undefined"
+        :items="processedItems"
+        :template="template"
+        :activeItemPath="activeItemPath"
+        :exact="exact"
+        @focus="onFocus"
+        @blur="onBlur"
+        @keydown="onKeyDown"
+        @item-toggle="onItemToggle"
+    />
+</template>
+
+<script>
+import { ObjectUtils } from 'primevue/utils';
+import DomHandler from '../utils/DomHandler';
+import PanelMenuSub from './PanelMenuSub.vue';
+
+export default {
+    name: 'PanelMenuList',
+    emits: ['item-toggle', 'header-focus'],
+    props: {
+        panelId: {
+            type: String,
+            default: null
+        },
+        items: {
+            type: Array,
+            default: null
+        },
+        template: {
+            type: Function,
+            default: null
+        },
+        expandedKeys: {
+            type: Object,
+            default: null
+        },
+        exact: {
+            type: Boolean,
+            default: true
+        }
+    },
+    data() {
+        return {
+            focused: false,
+            focusedItem: null,
+            activeItemPath: []
+        };
+    },
+    watch: {
+        expandedKeys(newValue) {
+            this.autoUpdateActiveItemPath(newValue);
+        }
+    },
+    mounted() {
+        this.autoUpdateActiveItemPath(this.expandedKeys);
+    },
+    methods: {
+        getItemProp(processedItem, name) {
+            return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
+        },
+        isItemVisible(processedItem) {
+            return this.getItemProp(processedItem, 'visible') !== false;
+        },
+        isItemDisabled(processedItem) {
+            return this.getItemProp(processedItem, 'disabled');
+        },
+        isItemActive(processedItem) {
+            return this.activeItemPath.some((path) => path.key === processedItem.parentKey);
+        },
+        isItemGroup(processedItem) {
+            return ObjectUtils.isNotEmpty(processedItem.items);
+        },
+        onFocus(event) {
+            this.focused = true;
+            this.focusedItem = this.focusedItem || (this.isElementInPanel(event, event.relatedTarget) ? this.findFirstItem() : this.findLastItem());
+        },
+        onBlur() {
+            this.focused = false;
+            this.focusedItem = null;
+        },
+        onKeyDown(event) {
+            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':
+                case 'Tab':
+                case 'PageDown':
+                case 'PageUp':
+                case 'Backspace':
+                case 'ShiftLeft':
+                case 'ShiftRight':
+                    //NOOP
+                    break;
+
+                default:
+                    break;
+            }
+        },
+        onArrowDownKey(event) {
+            const processedItem = ObjectUtils.isNotEmpty(this.focusedItem) ? this.findNextItem(this.focusedItem) : this.findFirstItem();
+
+            this.changeFocusedItem({ originalEvent: event, processedItem, focusOnNext: true });
+            event.preventDefault();
+        },
+        onArrowUpKey(event) {
+            const processedItem = ObjectUtils.isNotEmpty(this.focusedItem) ? this.findPrevItem(this.focusedItem) : this.findLastItem();
+
+            this.changeFocusedItem({ originalEvent: event, processedItem, selfCheck: true });
+            event.preventDefault();
+        },
+        onArrowLeftKey(event) {
+            if (ObjectUtils.isNotEmpty(this.focusedItem)) {
+                const matched = this.activeItemPath.some((p) => p.key === this.focusedItem.key);
+
+                if (matched) {
+                    this.activeItemPath = this.activeItemPath.filter((p) => p.key !== this.focusedItem.key);
+                } else {
+                    this.focusedItem = ObjectUtils.isNotEmpty(this.focusedItem.parent) ? this.focusedItem.parent : this.focusedItem;
+                }
+
+                event.preventDefault();
+            }
+        },
+        onArrowRightKey(event) {
+            if (ObjectUtils.isNotEmpty(this.focusedItem)) {
+                const grouped = this.isItemGroup(this.focusedItem);
+
+                if (grouped) {
+                    const matched = this.activeItemPath.some((p) => p.key === this.focusedItem.key);
+
+                    if (matched) {
+                        this.onArrowDownKey(event);
+                    } else {
+                        this.activeItemPath = this.activeItemPath.filter((p) => p.parentKey !== this.focusedItem.parentKey);
+                        this.activeItemPath.push(this.focusedItem);
+                    }
+                }
+
+                event.preventDefault();
+            }
+        },
+        onHomeKey(event) {
+            this.changeFocusedItem({ originalEvent: event, processedItem: this.findFirstItem(), allowHeaderFocus: false });
+            event.preventDefault();
+        },
+        onEndKey(event) {
+            this.changeFocusedItem({ originalEvent: event, processedItem: this.findLastItem(), focusOnNext: true, allowHeaderFocus: false });
+            event.preventDefault();
+        },
+        onEnterKey(event) {
+            if (ObjectUtils.isNotEmpty(this.focusedItem)) {
+                const element = DomHandler.findSingle(this.$el, `li[id="${`${this.focusedItemId}`}"]`);
+                const anchorElement = element && DomHandler.findSingle(element, '.p-menuitem-link');
+
+                anchorElement ? anchorElement.click() : element && element.click();
+            }
+
+            event.preventDefault();
+        },
+        onSpaceKey(event) {
+            this.onEnterKey(event);
+        },
+        onItemToggle(event) {
+            const { processedItem, expanded } = event;
+
+            if (this.expandedKeys) {
+                this.$emit('item-toggle', { item: processedItem.item, expanded });
+            } else {
+                this.activeItemPath = this.activeItemPath.filter((p) => p.parentKey !== processedItem.parentKey);
+                expanded && this.activeItemPath.push(processedItem);
+            }
+
+            this.focusedItem = processedItem;
+            DomHandler.focus(this.$el);
+        },
+        isElementInPanel(event, element) {
+            const panel = event.currentTarget.closest('.p-panelmenu-panel');
+
+            return panel && panel.contains(element);
+        },
+        isVisibleItem(processedItem) {
+            return !!processedItem && (processedItem.level === 0 || this.isItemActive(processedItem)) && this.isItemVisible(processedItem);
+        },
+        isValidItem(processedItem) {
+            return !!processedItem && !this.isItemDisabled(processedItem);
+        },
+        findFirstItem() {
+            return this.visibleItems.find((processedItem) => this.isValidItem(processedItem));
+        },
+        findLastItem() {
+            return ObjectUtils.findLast(this.visibleItems, (processedItem) => this.isValidItem(processedItem));
+        },
+        findNextItem(processedItem) {
+            const index = this.visibleItems.findIndex((item) => item.key === processedItem.key);
+            const matchedItem = index < this.visibleItems.length - 1 ? this.visibleItems.slice(index + 1).find((pItem) => this.isValidItem(pItem)) : undefined;
+
+            return matchedItem || processedItem;
+        },
+        findPrevItem(processedItem) {
+            const index = this.visibleItems.findIndex((item) => item.key === processedItem.key);
+            const matchedItem = index > 0 ? ObjectUtils.findLast(this.visibleItems.slice(0, index), (pItem) => this.isValidItem(pItem)) : undefined;
+
+            return matchedItem || processedItem;
+        },
+        changeFocusedItem(event) {
+            const { originalEvent, processedItem, focusOnNext, selfCheck, allowHeaderFocus = true } = event;
+
+            if (ObjectUtils.isNotEmpty(this.focusedItem) && this.focusedItem.key !== processedItem.key) {
+                this.focusedItem = processedItem;
+                this.scrollInView();
+            } else if (allowHeaderFocus) {
+                this.$emit('header-focus', { originalEvent, focusOnNext, selfCheck });
+            }
+        },
+        scrollInView() {
+            const element = DomHandler.findSingle(this.$el, `li[id="${`${this.focusedItemId}`}"]`);
+
+            if (element) {
+                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
+            }
+        },
+        autoUpdateActiveItemPath(expandedKeys) {
+            this.activeItemPath = Object.entries(expandedKeys || {}).reduce((acc, [key, val]) => {
+                if (val) {
+                    const processedItem = this.findProcessedItemByItemKey(key);
+
+                    processedItem && acc.push(processedItem);
+                }
+
+                return acc;
+            }, []);
+        },
+        findProcessedItemByItemKey(key, processedItems, level = 0) {
+            processedItems = processedItems || (level === 0 && this.processedItems);
+
+            if (!processedItems) return null;
+
+            for (let i = 0; i < processedItems.length; i++) {
+                const processedItem = processedItems[i];
+
+                if (this.getItemProp(processedItem, 'key') === key) return processedItem;
+
+                const matchedItem = this.findProcessedItemByItemKey(key, processedItem.items, level + 1);
+
+                if (matchedItem) return matchedItem;
+            }
+        },
+        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;
+        },
+        flatItems(processedItems, processedFlattenItems = []) {
+            processedItems &&
+                processedItems.forEach((processedItem) => {
+                    if (this.isVisibleItem(processedItem)) {
+                        processedFlattenItems.push(processedItem);
+                        this.flatItems(processedItem.items, processedFlattenItems);
+                    }
+                });
+
+            return processedFlattenItems;
+        }
+    },
+    computed: {
+        processedItems() {
+            return this.createProcessedItems(this.items || []);
+        },
+        visibleItems() {
+            return this.flatItems(this.processedItems);
+        },
+        focusedItemId() {
+            return ObjectUtils.isNotEmpty(this.focusedItem) ? `${this.panelId}_${this.focusedItem.key}` : null;
+        }
+    },
+    components: {
+        PanelMenuSub: PanelMenuSub
+    }
+};
+</script>

package/panelmenu/PanelMenuSub.vue

@@ -1,57 +1,87 @@
 <template>
-    <ul class="p-submenu-list" role="tree">
-        <template v-for="(item, i) of model" :key="label(item) + i.toString()">
-            <li v-if="visible(item) && !item.separator" role="none" :class="getItemClass(item)" :style="item.style">
-                <template v-if="!template">
-                    <router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive: isRouterActive, isExactActive }" :to="item.to" custom>
-                        <a :href="href" :class="linkClass(item, { isActive: isRouterActive, isExactActive })" @click="onItemClick($event, item, navigate)" role="treeitem" :aria-expanded="isActive(item)">
-                            <span :class="['p-menuitem-icon', item.icon]"></span>
-                            <span class="p-menuitem-text">{{ label(item) }}</span>
+    <ul class="p-submenu-list">
+        <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="treeitem"
+                :aria-label="getItemLabel(processedItem)"
+                :aria-expanded="isItemGroup(processedItem) ? isItemActive(processedItem) : undefined"
+                :aria-level="level + 1"
+                :aria-setsize="getAriaSetSize()"
+                :aria-posinset="getAriaPosInset(index)"
+            >
+                <div class="p-menuitem-content" @click="onItemClick($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="isItemGroup(processedItem)" :class="getItemToggleIconClass(processedItem)"></span>
+                            <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
+                            <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
                         </a>
-                    </router-link>
-                    <a
-                        v-else
-                        :href="item.url"
-                        :class="linkClass(item)"
-                        :target="item.target"
-                        @click="onItemClick($event, item)"
-                        @keydown="onItemKeydown($event, item)"
-                        role="treeitem"
-                        :aria-expanded="isActive(item)"
-                        :tabindex="disabled(item) ? null : '0'"
-                    >
-                        <span v-if="item.items" :class="getSubmenuIcon(item)"></span>
-                        <span :class="['p-menuitem-icon', item.icon]"></span>
-                        <span class="p-menuitem-text">{{ label(item) }}</span>
-                    </a>
-                </template>
-                <component v-else :is="template" :item="item"></component>
+                    </template>
+                    <component v-else :is="template" :item="processedItem.item"></component>
+                </div>
                 <transition name="p-toggleable-content">
-                    <div v-show="isActive(item)" class="p-toggleable-content">
-                        <PanelMenuSub v-if="visible(item) && item.items" :key="label(item) + '_sub_'" :model="item.items" :template="template" :expandedKeys="expandedKeys" @item-toggle="$emit('item-toggle', $event)" :exact="exact" />
+                    <div v-show="isItemActive(processedItem)" class="p-toggleable-content">
+                        <PanelMenuSub
+                            v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
+                            :id="getItemId(processedItem) + '_list'"
+                            role="group"
+                            :panelId="panelId"
+                            :focusedItemId="focusedItemId"
+                            :items="processedItem.items"
+                            :level="level + 1"
+                            :template="template"
+                            :activeItemPath="activeItemPath"
+                            :exact="exact"
+                            @item-toggle="onItemToggle"
+                        />
                     </div>
                 </transition>
             </li>
-            <li v-if="visible(item) && item.separator" :key="'separator' + i.toString()" :class="['p-menu-separator', item.class]" :style="item.style"></li>
+            <li v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')" :style="getItemProp(processedItem, 'style')" :class="getSeparatorItemClass(processedItem)" role="separator"></li>
         </template>
     </ul>
 </template>
 
 <script>
+import Ripple from 'primevue/ripple';
+import { ObjectUtils } from 'primevue/utils';
+
 export default {
     name: 'PanelMenuSub',
     emits: ['item-toggle'],
     props: {
-        model: {
-            type: null,
+        panelId: {
+            type: String,
+            default: null
+        },
+        focusedItemId: {
+            type: String,
+            default: null
+        },
+        items: {
+            type: Array,
             default: null
         },
+        level: {
+            type: Number,
+            default: 0
+        },
         template: {
             type: Function,
             default: null
         },
-        expandedKeys: {
-            type: null,
+        activeItemPath: {
+            type: Object,
             default: null
         },
         exact: {
@@ -59,74 +89,83 @@ export default {
             default: true
         }
     },
-    data() {
-        return {
-            activeItem: null
-        };
-    },
     methods: {
-        onItemClick(event, item, navigate) {
-            if (this.isActive(item) && this.activeItem === null) {
-                this.activeItem = item;
-            }
-
-            if (this.disabled(item)) {
-                event.preventDefault();
-
-                return;
-            }
-
-            if (item.command) {
-                item.command({
-                    originalEvent: event,
-                    item: item
-                });
-            }
-
-            if (this.activeItem && this.activeItem === item) this.activeItem = null;
-            else this.activeItem = item;
-
-            this.$emit('item-toggle', { item: item, expanded: this.activeItem != null });
+        getItemId(processedItem) {
+            return `${this.panelId}_${processedItem.key}`;
+        },
+        getItemKey(processedItem) {
+            return this.getItemId(processedItem);
+        },
+        getItemProp(processedItem, name) {
+            return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
+        },
+        getItemLabel(processedItem) {
+            return this.getItemProp(processedItem, 'label');
+        },
+        isItemActive(processedItem) {
+            return this.activeItemPath.some((path) => path.key === processedItem.key);
+        },
+        isItemVisible(processedItem) {
+            return this.getItemProp(processedItem, 'visible') !== false;
+        },
+        isItemDisabled(processedItem) {
+            return this.getItemProp(processedItem, 'disabled');
+        },
+        isItemFocused(processedItem) {
+            return this.focusedItemId === this.getItemId(processedItem);
+        },
+        isItemGroup(processedItem) {
+            return ObjectUtils.isNotEmpty(processedItem.items);
+        },
+        onItemClick(event, processedItem) {
+            const command = this.getItemProp(processedItem, 'command');
 
-            if (item.to && navigate) {
-                navigate(event);
-            }
+            command && command({ originalEvent: event, item: processedItem.item });
+            this.$emit('item-toggle', { processedItem, expanded: !this.isItemActive(processedItem) });
+        },
+        onItemToggle(event) {
+            this.$emit('item-toggle', event);
+        },
+        onItemActionClick(event, navigate) {
+            navigate && navigate(event);
+        },
+        getAriaSetSize() {
+            return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;
         },
-        onItemKeydown(event, item) {
-            if (event.which === 13) {
-                this.onItemClick(event, item);
-            }
+        getAriaPosInset(index) {
+            return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
         },
-        getItemClass(item) {
-            return ['p-menuitem', item.className];
+        getItemClass(processedItem) {
+            return [
+                'p-menuitem',
+                this.getItemProp(processedItem, 'class'),
+                {
+                    'p-focus': this.isItemFocused(processedItem),
+                    'p-disabled': this.isItemDisabled(processedItem)
+                }
+            ];
         },
-        linkClass(item, routerProps) {
+        getItemActionClass(processedItem, 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
                 }
             ];
         },
-        isActive(item) {
-            return this.expandedKeys ? this.expandedKeys[item.key] : item === this.activeItem;
+        getItemIconClass(processedItem) {
+            return ['p-menuitem-icon', this.getItemProp(processedItem, 'icon')];
         },
-        getSubmenuIcon(item) {
-            const active = this.isActive(item);
-
-            return ['p-panelmenu-icon pi pi-fw', { 'pi-angle-right': !active, 'pi-angle-down': active }];
-        },
-        visible(item) {
-            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
+        getItemToggleIconClass(processedItem) {
+            return ['p-submenu-icon', this.isItemActive(processedItem) ? 'pi pi-fw pi-chevron-down' : 'pi pi-fw pi-chevron-right'];
         },
-        disabled(item) {
-            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
-        },
-        label(item) {
-            return typeof item.label === 'function' ? item.label() : item.label;
+        getSeparatorItemClass(processedItem) {
+            return ['p-menuitem-separator', this.getItemProp(processedItem, 'class')];
         }
+    },
+    directives: {
+        ripple: Ripple
     }
 };
 </script>