question/feature request: How to modify the client-side function called on a user event

[CWeissS]

Hello,

I'm currently trying to find a way how to modify the client-function of an event.

I would like to capture text highlighted by the user and open a menu upon right-clcik which offers different functions to interact with this text (e.g. highlight it in certain colour, or send to the server for look-up in a DB). For this I need the client to execute at least two functions:

• preventDefault() - to overrule the display of the normal contextmenu
• window.getSelection() - to capture the highlighted text and send it back to the server side Jupyther Notebook

I have modified the example from the Vuetify-Website about menus: https://vuetifyjs.com/en/components/menus/#absolute-without-activator

card = v.Card(v_model=True,
        children=[
            v.CardTitle(class_="headline grey lighten-2", children=['Card Title']),
            cardText,
                 ],
             )
def openMenu(widget, event, data):
    list.children=listChildren
    menu.position_x = data['clientX']
    menu.position_y = data['clientY']
    menu.v_model = True

card.on_event('contextmenu', openMenu)


listChildren = []
listChildren.append( v.ListItem(children=[v.ListItemTitle(children=['Menu 1'])]) )
listChildren.append(v.ListItem(children=[v.ListItemTitle(children=['Menu 2'])]))
listChildren.append(v.ListItem(children=[v.ListItemTitle(children=['Menu 3'])]))
listChildren.append(v.ListItem(children=[v.ListItemTitle(children=['Menu 4'])]))

list = v.List(children=listChildren)

menu = v.Menu(
        v_model=False,
        absolute=True,
        position_x=950,
        position_y=950,
        children=[list],
            )


row = v.Row(class_='flex', justify='center', children=[card,menu])

v.Html(tag='div', children=[row])

Is there a possibility to define the client function?

I could not find anything in the docs or online about it. Is there a way to define the client-functions in ipyvuetify?
If not, that would be a handy feature to have.

[CWeissS]

Finally, I found a way.
Actually it was already present here in some of the examples, just not apparent for my limited Vue/vuetify knowledge.

For other people having similar problems, I leave an example here.
It renders a button that allows a user to copy the value of a python variable to his/her clipboard:

import ipyvuetify as v
from traitlets import Unicode


class clipboardBtn(v.VuetifyTemplate):

    clipboardValue = Unicode('').tag(sync=True)
    label = Unicode('Copy').tag(sync=True)

    template = Unicode('''<v-btn
            color="primary"
            class="ma-1"
            @click="copyVar2Clip(clipboardValue)"
        >

            {{ label }}

        </v-btn>
    
        <script>
          export default {
            methods: {
              copyVar2Clip (value) {
                  var dummy = $('<input>').val(value).appendTo('body').select();
                  document.execCommand('copy');
                  dummy.parentNode.removeChild(dummy);
              },
            },
          }
        </script>''').tag(sync=True)

Feel free to include it in the examples if you want.