Fixed #4826 - PanelMenu: new multiple property

pull/4829/head
tugcekucukoglu 2023-11-15 17:51:22 +03:00
parent e474d11e9d
commit 75d9f53133
3 changed files with 22 additions and 2 deletions

View File

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

View File

@ -256,6 +256,11 @@ export interface PanelMenuProps {
* @type {PanelMenuExpandedKeys} * @type {PanelMenuExpandedKeys}
*/ */
expandedKeys?: 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. * Whether to apply 'router-link-active-exact' class if route exactly matches the item path.
* @deprecated since v3.40.0. * @deprecated since v3.40.0.

View File

@ -67,7 +67,8 @@ export default {
data() { data() {
return { return {
id: this.$attrs.id, id: this.$attrs.id,
activeItem: null activeItem: null,
activeItems: []
}; };
}, },
watch: { watch: {
@ -96,7 +97,7 @@ export default {
}); });
}, },
isItemActive(item) { 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) { isItemVisible(item) {
return this.getItemProp(item, 'visible') !== false; return this.getItemProp(item, 'visible') !== false;
@ -218,6 +219,16 @@ export default {
const eventName = !active ? 'panel-open' : 'panel-close'; const eventName = !active ? 'panel-open' : 'panel-close';
this.activeItem = selfActive ? item : this.activeItem && ObjectUtils.equals(item, this.activeItem) ? null : item; 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.changeExpandedKeys({ item, expanded: !active });
this.$emit(eventName, { originalEvent: event, item }); this.$emit(eventName, { originalEvent: event, item });
} }