Refactor #4351 - For ContextMenu

components/lib/contextmenu/ContextMenu.vue

@@ -22,6 +22,7 @@
                     :level="0"
                     :visible="submenuVisible"
                     :pt="pt"
+                    :unstyled="unstyled"
                     @focus="onFocus"
                     @blur="onBlur"
                     @keydown="onKeyDown"
@@ -78,6 +79,18 @@ export default {
             }
         }
     },
+    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();
+
+        if (this.global) {
+            this.bindDocumentContextMenuListener();
+        }
+    },
     beforeUnmount() {
         this.unbindResizeListener();
         this.unbindOutsideClickListener();
@@ -90,13 +103,6 @@ export default {
         this.target = null;
         this.container = null;
     },
-    mounted() {
-        this.id = this.id || UniqueComponentId();
-
-        if (this.global) {
-            this.bindDocumentContextMenuListener();
-        }
-    },
     methods: {
         getItemProp(item, name) {
             return item ? ObjectUtils.getItemValue(item[name]) : undefined;

components/lib/contextmenu/ContextMenuSub.vue

@@ -39,7 +39,7 @@
                                 </template>
                             </a>
                         </template>
-                        <component v-else :is="templates.item" :item="processedItem.item"></component>
+                        <component v-else :is="templates.item" :item="processedItem.item" :label="processedItem.label" :props="getMenuItemProps()"></component>
                     </div>
                     <ContextMenuSub
                         v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
@@ -53,8 +53,9 @@
                         :activeItemPath="activeItemPath"
                         :exact="exact"
                         :level="level + 1"
-                        :pt="pt"
                         :visible="isItemActive(processedItem) && isItemGroup(processedItem)"
+                        :pt="pt"
+                        :unstyled="unstyled"
                         @item-click="$emit('item-click', $event)"
                         @item-mouseenter="$emit('item-mouseenter', $event)"
                         v-bind="ptm('submenu')"
@@ -197,6 +198,36 @@ export default {
             } else {
                 this.$refs.container.style.left = itemOuterWidth + 'px';
             }
+        },
+        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: {