` ones\n\n```html\n
\n
\n\n```\n\nIt's still possible however to overwrite the Context Menu for a specific child (and all of its children as well)\n\n```html\n
\n
\n Disabled for this div\n\n
and this paragraph
\n\n
\n but both this element\n and this element\n open the \"cm-alpha\" Context Menu when right-clicked\n
\n
\n\n```\n\nThe above pattern can become quite useful if you want to globally disable the native Context Menus for the entire app and at the same time provide custom ones for only certain elements/components.\n\n### `
`\n\nThe items for Context Menus are defined using the `` component\n\n```html\n\n \n Open\n \n\n You can also use any other elements/components here
\n\n \n Close\n \n\n```\n\nThe `action` prop specifies the method performed when the item is clicked. The provided function is called with 2 arguments: the target element the Context Menu is opened for and the Context Menu instance itself\n\n```javascript\nexport default {\n methods: {\n open(target, cm) {\n console.log(target, cm);\n // other actions...\n },\n\n close(target, cm) {\n console.log(target, cm);\n // other actions...\n }\n }\n}\n```\n\nYou can disable an item by providing it the `disabled` prop\n\n```html\n\n Open\n\n```\n\nWhen a disabled item is clicked, the provided action isn't fired and the Context Menu doesn't close.\n\n### Nested Context Menus\n\nThere's no special syntax for definig nested Context Menus. Any Context Menu might be opened as a nested one. All you have to do is just to add the `v-context-menu` directive to a ``. A `` with the `v-context-menu` directive bound to it is called a *caller* (because it's used to *call* a nested Context Menu)\n\n```html\nDownload\n```\n\nNow when the cursor enters the item a request to open the \"cm-with-downloading-options\" Context Menu is registered and the Context Menu will be opened after some time (controller by the `delay` prop that we'll discuss a bit later). The nested Context Menu can also be opened immediately if the item is clicked.\n\nWrapped Context Menus' items can also open nested Context Menus\n\n```html\n\n\n\n\n \n Download\n \n\n \n Plain\n As a Zip archive\n \n
\n\n```\n\n> Note however that the \"cm-with-downloading-options\" Context Menu wouldn't normally be available anywhere outside this wrapper-component. If you need to reuse a nested Context Menu between different root Context Menus, you can always wrap the nested one itself\n\nThe `action` prop is ignored for callers\n\n```html\n\n Download\n\n```\n\n`v-context-menu=\"null\"` when used on the `` component acts the same as the `disabled` option\n\n```html\n\n\nItem 1\nItem 2\nItem 3\n```\n\nRegular Context Menu items can be wrapped both with HTML elements and components\n\n```html\n\n\n\n \n Delete\n
\n\n \n Info\n \n\n```\n\nBut bear in mind that the same **won't work** if you use **callers as slots for other components**!\n\n```html\n\n \n \n Other\n
\n\n \n \n Other\n \n\n```\n\n### Options\n\nYou can control different aspects of a Context Menu with props. There're 3 props available for a `` component:\n\n1. `penetrable` \n1. `shift`\n1. `delay`\n\n#### `penetrable`\n\n`false` by default. Accepts `Boolean` values.\n\nDemo\n\n\n\nThe `penetrable` option, as its name suggests, allows to define Context Menus with the penetrable overlay. It means that the user will be able to focus input fields, trigger `mouseup` events, immediately open Context Menus for other targets located underneath the overlay if he clicks (or right-clicks) the overlay of an opened Context Menu.\n\nIf a Context Menu is set to be impenetrable and the user clicks/right-clicks the overlay then the Context Menu will just close.\n\nExample of usage\n\n```html\n\n ...\n\n```\n\n#### `shift`\n\n`\"x\"` by default. Accepts `String` values, one of: `\"fit\"`, `\"x\"`, `\"y\"`, `\"both\"`.\n\nDemo\n\n\n\nUnfortunately (or not) it's impossible for any HTML content to be rendered outside the browser window. It means that the custom Context Menus are restricted by the size of the viewport of the page. So when the user right-clicks somewhere near the bottom-right corner of the page it may happen so that the opened Context Menu simply won't have enough space available. The problem is solved for you out of the box and in such cases Context Menus are automatically repositioned. You can control how exactly a certain Context Menu would be transposed with this option.\n\n`\"fit\"` means that the Context Menu will be rendered right at the very corner of the vireport. \n`\"x\"` means that it will be flipped horizontally and `fit`ted vertically \n`\"y\"` - flipped vertically and `fit`ted horizontally \n`\"both\"` - flipped both vertically and horizontally\n\n> For *nested* Context Menus it's usually better to use `\"x\"` or `\"both\"` for a better UX \n\nExample of usage\n\n```html\n\n ...\n\n```\n\n#### `delay`\n\n`500` by default. Accepts `Number` values grater than 0.\n\nDemo (1 second for the first nested Context Menu and 2 seconds for the second one)\n\n\n\nThe option controls the amount of time (in ms) before a nested Context Menu is opened after the cursor entered its caller. It also sets the amount of time to pass before the nested Context Menu is closed after a request to close it has been registered.\n\nNote that the `delay` is set on a parent Context Menu (the one that contains callers) and affects *all* the nested Context Menus at once. It's impossible to set the `delay` for a particular Context Menu exclusively.\n\nExample of usage\n\n```html\n\n Open \"cm-alpha\"\n Open \"cm-beta\"\n\n```\n\n> Note that we use `:` so that Vue can understand that we pass a `Number` rather than a `String`\n\n### Styling\n\nEach Context Menu internally consists of the overlay, the wrapper element, the Context Menu element itself and the Context Menu's slot-elements (``s and other murkup)\n\n```html\n\n```\n\nYou can style any of those elements as you prefer.\n\nA Context Menu might be opened either as a root one or as a nested one. The `.root` or `.nested` class is added respectively both to the `.context-menu-overlay` and the `.context-menu-wrapper` so that you can style root and nested Context Menus separately\n\n```css\n.context-menu-overlay {\n /* apply these styles for each overlay */\n}\n\n.context-menu-overlay.root {\n /* these - only for overlays of the Context Menus that are opened NOT as nested ones */\n}\n\n.context-menu-overlay.nested {\n /* and these - only for overlays of the nested Context Menus */\n}\n\n/* and the same for wrapper-elements */\n.context-menu-wrapper {\n /* ... */\n}\n\n.context-menu-wrapper.root {\n /* ... */\n}\n\n.context-menu-wrapper.nested {\n /* ... */\n}\n```\n\n> Note that since nor `.context-menu-wrapper` nor `.context-menu` are explicitly exposed to your template, you might want to use the `/deep/` modifier for those\n\n```css\n/deep/ .context-menu-wrapper {}\n/deep/ .context-menu {}\n```\n\nMost of the time you won't want to style overlays (these are invisible by default). However, if you want/have to, then it'd better if you only style the `.root` one since `.nested` ones are only here because of the restrictions imposed be Vue itself and don't carry almost any semantic load.\n\n**Important! Always provide the `width` property for you custom Context Menus. They may render incorrect in some cases if you don't!**\n\n```css\n/deep/ .context-menu {\n width: 200px; /* or 10%, or 10vw, or 200ch - anything */\n}\n\n/* or */\n\n/deep/ .context-menu-wrapper {\n width: 200px;\n}\n\n/deep/ .context-menu {\n width: 100%;\n}\n```\n\nYou can refer to all the ``s via the `.context-menu-item` class in you CSS\n\n```css\n.context-menu-item {\n border: 1px solid #ccc;\n}\n```\n\nCallers (caller-items) have the `.caller` class added to them\n\n```css\n.context-menu-item.caller {\n background-color: red; /* make all the callers red */\n}\n```\n\nDisabled items have the `.disabled` class\n\n```css\n.context-menu-item.disabled {\n background-color: gray; /* disabled items are gray */\n cursor: not-allowed; /* and the cursor looks like a stroke-through red circle */\n}\n```\n\n> Callers that call `null` (i.e. ``-elements) are also considired to be disabled, hence the `.disabled` class is added to those as well\n\nAdding custom classes to Context Menus allows you to style different Context Menus differently. Bear in mind however that the class would only be added to the overlay, so you'd have to use nested selectors to style certain Context Menus\n\n```html\n\n ...\n\n\n\n```\n\n#### Defaults\n\nThese are the default styles that you typically don't want to overwrite with your CSS\n\n```css\n.context-menu-overlay {\n position: fixed; /* position overlays relative to the viewport */\n top: 0;\n left: 0;\n display: block;\n width: 100%; /* occupy the full width/height of the vieport */\n height: 100%;\n overflow: hidden;\n /* z-index - 100000 by default and is auto-incremented for each Context Menu opened as a nested one */\n}\n\n.context-menu-overlay.nested {\n pointer-events: none; /* overlays for nested Context Menus can be clicked-through */\n}\n\n.context-menu-wrapper {\n position: absolute; /* absolute relative to the viewport */\n pointer-events: initial; /* so that items don't ignore mouse events */\n /* height - is calculated and set automatically */\n}\n\n.context-menu {\n box-sizing: border-box;\n height: 100%;\n overflow: auto; /* so that the context can be scrolled if the Context Menu is overflowed with items */\n}\n```\n\n#### Transitions\n\nYou can wrap any Context Menu inside the `` component as you do with any other components. No restrictions here. However bear in mind that you can't say the same about caller-items since those can't be wrapped inside other components (see above)\n\n```html\n\n\n \n \n \n \n \n \n\n```\n\n## Other\n\nThe Context Menus' heights are treated automatically out of the box. It means that if your Context Menu has a helluva lot items (or the items themselves are pretty huge) so that the Context Menu can't fit in the viewport, it's gonna be shrinked down automatically.\n\n---\n\nSince `v-context-menu` is a directive, you can provide it a dynamic value\n\n```html\n\n