Add nested context menus

[wol-soft]

Description of the Change

Implemented nested context menus. Nested context menus are created by adding the class v-context__sub to a menu element. Inside the v-context__sub a new container (eg. a UL element) with the class v-context must be created. The v-context container will be opened and positioned after the v-context__sub is hovered or the menu element is expanded by keyboard right click.

The context menu keeps track of the currently active sub menu which can be controlled by keyboard and mouse. Opened sub menus stay inside the window boundaries (25px margin, as well as the main context menu). As the sub menu controls are based on the class names and not on specific elements the current flexibility of the component regarding the internal DOM structure is kept (as discussed in #5 )

Additionally added a scrollbar to menus which exceed the window boundaries:

Benefits

• Nested menus
  • mouse controls
  • keyboard controls
  • flexible as the implementation is class based and not element based
• Menu doesn't overflow out of the window

BC

As the implementation only jumps in if a context menu element with the class v-context__sub is detected no backward incompatible changes are expected.

Example

Patched the test index.html to contain nested menus. A nested menu looks like:

<vue-context ref="menu" @close="onClose">
    <template slot-scope="child">
        <li tabindex="0">
            <a href="#" class="v-context-item"
               @click.prevent="onClick('item 1')"
            >
                Do something
            </a>
        </li>
        <li class="v-context__sub">
            <a href="#" class="v-context-item"
               @click.prevent="onClick('item 2')"
            >
                Do something else
            </a>
            <ul class="v-context">
                <li tabindex="0">
                    <a href="#" class="v-context-item"
                       @click.prevent="onClick('sub item 1')"
                    >
                        Submenu
                    </a>
                </li>
            </ul>
        </li>
    </template>
</vue-context>

[rawilk]

@wol-soft Thank you for your contribution. I'm happy with the code you have provided and will probably merge this in the near future when I get a chance to after the updates to the menu that I'll be rolling out soon.

[wol-soft]

@rawilk if you need any additional help (merging, adding an example to the documentation, ...) just let me know.

[SrAxi]

Do we have an ETA on this?

[rawilk]

@wol-soft I've merged your branch into my v5 release branch I'm working on right now. I did tweak some lines in there to match my coding style, but otherwise everything you've written is being merged.

Thank you for submitting this PR. It will be a nice addition to the component.

[wol-soft]

Hi @rawilk thanks for merging. I think the only thing missing is a demo in the documentation at https://vue-context.com/docs/4.0/overview

[rawilk]

I'm hoping to update the documentation this weekend for the new version

[nlaitan]

Hi, thanks for this feature. The icon of submenu doesnt show, in this place appears a square

[wol-soft]

Hi @nlaitan which OS/Browser are you using?

[rawilk]

Didn't get the documentation updated this weekend as planned, but it is up-to-date now for version 5. The doc site also includes a demo for the new nested context menu feature you introduced with this PR as well.

[nlaitan]

@wol-soft I use Chrome in MacOS. I fixed that problem making my own css arrow without an ASCII code/HTML entity in ::after content, if you are interested, I share my code

[patarapolw]

@wol-soft I use Chrome in MacOS. I fixed that problem making my own css arrow without an ASCII code/HTML entity in ::after content, if you are interested, I share my code

Please share your code. It is a box in MacOS Electron.