diff --git a/components/lib/panelmenu/PanelMenu.vue b/components/lib/panelmenu/PanelMenu.vue index ce40d32ac..a7889a6a5 100644 --- a/components/lib/panelmenu/PanelMenu.vue +++ b/components/lib/panelmenu/PanelMenu.vue @@ -50,6 +50,7 @@ @header-focus="updateFocusedHeader" :exact="exact" :pt="pt" + :unstyled="unstyled" /> @@ -81,6 +82,11 @@ export default { this.id = newValue || UniqueComponentId(); } }, + beforeMount() { + if (!this.$slots.item) { + console.warn('In future versions, vue-router support will be removed. Item templating should be used.'); + } + }, mounted() { this.id = this.id || UniqueComponentId(); }, diff --git a/components/lib/panelmenu/PanelMenuList.vue b/components/lib/panelmenu/PanelMenuList.vue index 52d6548af..3808fa160 100644 --- a/components/lib/panelmenu/PanelMenuList.vue +++ b/components/lib/panelmenu/PanelMenuList.vue @@ -16,6 +16,7 @@ @keydown="onKeyDown" @item-toggle="onItemToggle" :pt="pt" + :unstyled="unstyled" v-bind="ptm('menu')" /> diff --git a/components/lib/panelmenu/PanelMenuSub.vue b/components/lib/panelmenu/PanelMenuSub.vue index d9bdb459f..057ece7c4 100755 --- a/components/lib/panelmenu/PanelMenuSub.vue +++ b/components/lib/panelmenu/PanelMenuSub.vue @@ -35,7 +35,7 @@ {{ getItemLabel(processedItem) }} - +
@@ -52,6 +52,7 @@ :exact="exact" @item-toggle="onItemToggle" :pt="pt" + :unstyled="unstyled" v-bind="ptm('submenu')" />
@@ -74,6 +75,7 @@ import ChevronDownIcon from 'primevue/icons/chevrondown'; import ChevronRightIcon from 'primevue/icons/chevronright'; import Ripple from 'primevue/ripple'; import { ObjectUtils } from 'primevue/utils'; +import { mergeProps } from 'vue'; export default { name: 'PanelMenuSub', @@ -167,6 +169,36 @@ export default { }, getAriaPosInset(index) { return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1; + }, + getMenuItemProps(processedItem, index) { + return { + action: mergeProps( + { + class: this.cx('action'), + tabindex: -1, + 'aria-hidden': true + }, + this.getPTOptions('action', processedItem, index) + ), + icon: mergeProps( + { + class: [this.cx('icon'), this.getItemProp(processedItem, 'icon')] + }, + this.getPTOptions('icon', processedItem, index) + ), + label: mergeProps( + { + class: this.cx('label') + }, + this.getPTOptions('label', processedItem, index) + ), + submenuicon: mergeProps( + { + class: this.cx('submenuIcon') + }, + this.getPTOptions('submenuicon', processedItem, index) + ) + }; } }, components: {