Nested Menu

[v1r0x]

Description

First of all thanks for this package. It is by far the best context menu for vue! :)
But I miss the ability to create nested menus. I already tried to add another list on hover, but it still fires the click event of the parent element. And it feels hacky the way I did it.
Do you have any plans to add such a feature? If you need any help/testing I'd love to help. 😀

[rawilk]

@v1r0x - Thank you for your support and I'm glad you like the context menu.

For the nested menus I haven't really thought about it, but it does seem like a good idea and I'm sure others would like this feature as well. I'm not really sure how I would do it, but if you would like to create a pull request that would be appreciated. I would be more than happy to add you as a collaborator to the repo.

[v1r0x]

I just added a nested list to an item as markup and added some css magic without touching your code.
I didn't have a look at the code yet, but I'll try to do next week and play around with it. If I have an idea how to implement it, I'll open a PR and we can discuss further details :)
Thanks for your offer, I'll get back to it when I actually collaborate instead of just having an idea/submitting an issue 😉

[v1r0x]

I had a look at the code and I think it is not possible, since the v-context only handles the open function and sets the correct position. Thus, it does not know anything about the structure of the data inside the v-context. One could display an image, a list, a table or even an iframe using the component (which is a nice feature btw (not the iframe of course 😉).

One solution could be to move the markup to the component instead of letting the user do it. With this approach it would no longer be possible to add anything other than a list to the context menu.
Code could then be something like this:

<vue-context :entries="contextMenuEntries"></vue-context>
...
contextMenuEntries: [
    {
        label: Entry 1,
        onClick: data => this.doSomething(data),
        children: [
            {
                label: 'Subentry 1',
                onClick: data => this.doSomethingDifferent(data)
            }
        ]
    }
]
...
// Markup
<ul v-for="entry in entries">
    <li @click="entry.onClick(...)">
        {{ entry.label }}
        <vue-context v-if="entry.children" :entries="entry.children"></vue-context>
    </li>
</ul>

The entries property should then be parsed in the component and handle all the markup and event handling stuff.

I don't know if changing the structure (and breaking backward compatibility) is worth it to have nested menus. And since this is your component, the decision should be up to you. If you decide that it's worth it, I'm happy to help. If you decide to drop nested menus, it's fine for me as I know of the (above mentioned) caveats :)

[rawilk]

First of all, thank you for time time and effort you have put into this. Since implementing this would mean removing some of the flexibility of the menu in the first place, I think I might pass on this for now. My favorite part of the menu is the scoped slot the menu provides, and using a prop really wouldn't allow for that.

I will keep this in mind for any future development I perform on the menu and maybe I will even be able to come up a solution to accommodate this.

[pranavkumar389]

Hi,
I was waiting for this feature. This is awesome.
Please add documentation over it.

A sample code can help me now.

[rawilk]

@pranavkumar389 I'm hoping to add documentation for it, as well as the new version, sometime this weekend.