Add global contextmenu option

src/components/contextmenu/ContextMenu.d.ts

@@ -1,11 +1,11 @@
 import Vue from 'vue';
 
 export declare class ContextMenu extends Vue {
-    popup?: boolean;
     model?: any[];
     appendTo?: string;
     autoZIndex?: boolean;
     baseZIndex?: number;
+    global?: boolean;
     toggle(event: Event): void;
     show(event: Event, target?: any): void;
     hide(): void;

src/components/contextmenu/ContextMenu.vue

@@ -12,10 +12,6 @@ import ContextMenuSub from './ContextMenuSub';
 
 export default {
     props: {
-        popup: {
-            type: Boolean,
-            default: false
-        },
 		model: {
             type: Array,
             default: null
@@ -31,11 +27,16 @@ export default {
         baseZIndex: {
             type: Number,
             default: 0
+        },
+        global: {
+            type: Boolean,
+            default: false
         }
     },
     target: null,
     outsideClickListener: null,
     resizeListener: null,
+    documentContextMenuListener: null,
     pageX: null,
     pageY: null,
     data() {
@@ -47,6 +48,7 @@ export default {
         this.restoreAppend();
         this.unbindResizeListener();
         this.unbindOutsideClickListener();
+        this.unbindDocumentContextMenuListener();
     },
     methods: {
         itemClick(event) {
@@ -87,6 +89,10 @@ export default {
             this.bindOutsideClickListener();
             this.bindResizeListener();
 
+            if (this.global) {
+                this.bindDocumentContextMenuListener();
+            }
+
             if (this.autoZIndex) {
                 this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
             }
@@ -94,6 +100,10 @@ export default {
         onLeave() {
             this.unbindOutsideClickListener();
             this.unbindResizeListener();
+
+            if (this.global) {
+                this.unbindDocumentContextMenuListener();
+            }
         },
         position() {
             let left = this.pageX + 1;
@@ -172,6 +182,21 @@ export default {
                 else
                     document.getElementById(this.appendTo).removeChild(this.$refs.container);
             }
+        },
+        bindDocumentContextMenuListener() {
+            if (!this.documentContextMenuListener) {
+                this.documentContextMenuListener = (event) => {
+                    this.show(event);
+                };
+
+                document.addEventListener('contextmenu', this.documentContextMenuListener);
+            }
+        },
+        unbindDocumentContextMenuListener() {
+            if(this.documentContextMenuListener) {
+                document.removeEventListener('contextmenu', this.documentContextMenuListener);
+                this.documentContextMenuListener = null;
+            }
         }
     },
     computed: {

src/views/contextmenu/ContextMenuDoc.vue

@@ -12,9 +12,6 @@ import TieredMenu from 'primevue/tieredmenu';
 
 				<h3>Getting Started</h3>
 				<p>TieredMenu requires a collection of menuitems as its model.</p>
-<CodeHighlight>
-&lt;TieredMenu :model="items" /&gt;
-</CodeHighlight>
 
 <CodeHighlight lang="js">
 export default {
@@ -156,17 +153,32 @@ export default {
 }
 </CodeHighlight>
 
-                <h3>Popup Mode</h3>
+                <h3>Document Menu</h3>
-                <p>TieredMenu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
+                <p>Setting global property attaches the context menu to the document.</p>
+<CodeHighlight>
+&lt;ContextMenu :global="true" :model="items" /&gt;
+</CodeHighlight>
+
+                <h3>Element Menu</h3>
+                <p>ContextMenu is attached to a custom element manually using the reference and calling the <i>show(event)</i> method.</p>
 
 <CodeHighlight>
-&lt;Button type="button" label="Toggle" @click="toggle" /&gt;
+&lt;img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick"&gt;
-&lt;TieredMenu ref="menu" :model="items" :popup="true" /&gt;
+&lt;ContextMenu ref="menu" :model="items" /&gt;
 </CodeHighlight>
 
 <CodeHighlight lang="js">
-toggle(event) {
+export default {
-    this.$refs.menu.toggle(event);
+    data() {
+        return {
+            items: //items
+        }
+    },
+    methods: {
+        onImageRightClick(event) {
+            this.$refs.menu.show(event);
+        }
+    }
 }
 </CodeHighlight>
 
@@ -189,12 +201,6 @@ toggle(event) {
                                 <td>null</td>
                                 <td>An array of menuitems.</td>
                             </tr>
-                            <tr>
-                                <td>popup</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>Defines if menu would displayed as a popup.</td>
-                            </tr>
                             <tr>
                                 <td>appendTo</td>
                                 <td>string</td>
@@ -212,6 +218,12 @@ toggle(event) {
                                 <td>boolean</td>
                                 <td>true</td>
                                 <td>Whether to automatically manage layering.</td>
+                            </tr>
+                            <tr>
+                                <td>global</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>Attaches the menu to document instead of a particular item.</td>
                             </tr>
 						</tbody>
 					</table>
@@ -231,18 +243,17 @@ toggle(event) {
                             <tr>
                                 <td>toggle</td>
                                 <td>event: Browser event</td>
-                                <td>Toggles the visiblity of the overlay.</td>
+                                <td>Toggles the visibility of the menu.</td>
                             </tr>
                             <tr>
                                 <td>show</td>
-                                <td>event: Browser event <br />
+                                <td>event: Browser event</td>
-                                    target: Optional target if event.target would not be used</td>
+                                <td>Shows the menu.</td>
-                                <td>Shows the overlay.</td>
                             </tr>
                             <tr>
                                 <td>hide</td>
                                 <td>-</td>
-                                <td>Hides the overlay.</td>
+                                <td>Hides the menu.</td>
                             </tr>
 						</tbody>
 					</table>
@@ -260,7 +271,7 @@ toggle(event) {
 						</thead>
 						<tbody>
                             <tr>
-                                <td>p-tieredmenu</td>
+                                <td>p-contextmenu</td>
                                 <td>Container element.</td>
                             </tr>
                             <tr>
@@ -292,17 +303,13 @@ toggle(event) {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/tieredmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/contextmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
 					<span>View on GitHub</span>
 				</a>
 <CodeHighlight>
 <template v-pre>
-&lt;h3&gt;Inline&lt;/h3&gt;
+&lt;img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick"&gt;
-&lt;TieredMenu :model="items" /&gt;
+&lt;ContextMenu ref="menu" :model="items" /&gt;
-
-&lt;h3&gt;Overlay&lt;/h3&gt;
-&lt;Button type="button" label="Toggle" @click="toggle" /&gt;
-&lt;TieredMenu ref="menu" :model="items" :popup="true" /&gt;
 </template>
 </CodeHighlight>
 
@@ -444,8 +451,8 @@ export default {
         }
     },
     methods: {
-        toggle(event) {
+        onImageRightClick(event) {
-            this.$refs.menu.toggle(event);
+            this.$refs.menu.show(event);
         }
     }
 }

src/views/menu/MenuDoc.vue

@@ -143,7 +143,7 @@ toggle(event) {
                             <tr>
                                 <td>toggle</td>
                                 <td>event: Browser event</td>
-                                <td>Toggles the visiblity of the overlay.</td>
+                                <td>Toggles the visibility of the overlay.</td>
                             </tr>
                             <tr>
                                 <td>show</td>

src/views/menubar/MenubarDoc.vue

@@ -224,7 +224,7 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/tieredmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/menubar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
 					<span>View on GitHub</span>
 				</a>
 <CodeHighlight>

src/views/overlaypanel/OverlayPanelDoc.vue

@@ -92,7 +92,7 @@ toggle(event) {
 						<tr>
 							<td>toggle</td>
 							<td>event: Browser event</td>
-							<td>Toggles the visiblity of the overlay.</td>
+							<td>Toggles the visibility of the overlay.</td>
 						</tr>
 						<tr>
 							<td>show</td>

src/views/tieredmenu/TieredMenuDoc.vue

@@ -231,7 +231,7 @@ toggle(event) {
                             <tr>
                                 <td>toggle</td>
                                 <td>event: Browser event</td>
-                                <td>Toggles the visiblity of the overlay.</td>
+                                <td>Toggles the visibility of the overlay.</td>
                             </tr>
                             <tr>
                                 <td>show</td>