diff --git a/components/lib/panelmenu/BasePanelMenu.vue b/components/lib/panelmenu/BasePanelMenu.vue index 4132d9f45..54670b35b 100644 --- a/components/lib/panelmenu/BasePanelMenu.vue +++ b/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 diff --git a/components/lib/panelmenu/PanelMenu.d.ts b/components/lib/panelmenu/PanelMenu.d.ts index 0147e3418..a50d02442 100755 --- a/components/lib/panelmenu/PanelMenu.d.ts +++ b/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. diff --git a/components/lib/panelmenu/PanelMenu.vue b/components/lib/panelmenu/PanelMenu.vue index 801eceab8..723e6f7c3 100644 --- a/components/lib/panelmenu/PanelMenu.vue +++ b/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 }); }