Fixed #4826 - PanelMenu: new multiple property

components/lib/panelmenu/BasePanelMenu.vue

@@ -14,6 +14,10 @@ export default {
             type: Object,
             default: null
         },
+        multiple: {
+            type: Boolean,
+            default: false
+        },
         tabindex: {
             type: Number,
             default: 0

components/lib/panelmenu/PanelMenu.d.ts

@@ -256,6 +256,11 @@ export interface PanelMenuProps {
      * @type {PanelMenuExpandedKeys}
      */
     expandedKeys?: PanelMenuExpandedKeys;
+    /**
+     * When enabled, multiple root menuitems can be activated at the same time.
+     * @defaultValue false
+     */
+    multiple?: boolean | undefined;
     /**
      * Whether to apply 'router-link-active-exact' class if route exactly matches the item path.
      * @deprecated since v3.40.0.

components/lib/panelmenu/PanelMenu.vue

@@ -67,7 +67,8 @@ export default {
     data() {
         return {
             id: this.$attrs.id,
-            activeItem: null
+            activeItem: null,
+            activeItems: []
         };
     },
     watch: {
@@ -96,7 +97,7 @@ export default {
             });
         },
         isItemActive(item) {
-            return this.expandedKeys ? this.expandedKeys[this.getItemProp(item, 'key')] : ObjectUtils.equals(item, this.activeItem);
+            return this.expandedKeys ? this.expandedKeys[this.getItemProp(item, 'key')] : this.multiple ? this.activeItems.some((subItem) => ObjectUtils.equals(item, subItem)) : ObjectUtils.equals(item, this.activeItem);
         },
         isItemVisible(item) {
             return this.getItemProp(item, 'visible') !== false;
@@ -218,6 +219,16 @@ export default {
                 const eventName = !active ? 'panel-open' : 'panel-close';
 
                 this.activeItem = selfActive ? item : this.activeItem && ObjectUtils.equals(item, this.activeItem) ? null : item;
+
+                if (this.multiple) {
+                    // activeItem and activeItems should be separated because it should be only one focused root item
+                    if (this.activeItems.some((subItem) => ObjectUtils.equals(item, subItem))) {
+                        this.activeItems = this.activeItems.filter((subItem) => !ObjectUtils.equals(item, subItem));
+                    } else {
+                        this.activeItems.push(item);
+                    }
+                }
+
                 this.changeExpandedKeys({ item, expanded: !active });
                 this.$emit(eventName, { originalEvent: event, item });
             }