widgetti / ipyvuetify

Jupyter widgets based on vuetify UI components
MIT License
348 stars 59 forks source link

How to add on_event function for custom template #318

Closed CnBDM-Su closed 6 months ago

CnBDM-Su commented 6 months ago

I have custom widget using v.VuetifyTemplate as below. From example you provide I did not see how to add on_event function for this class.

import traitlets
class ChipSelect(v.VuetifyTemplate):
    label = traitlets.Unicode().tag(sync=True)
    v_model = traitlets.List().tag(sync=True)
    max_display = traitlets.Int(default_value=6).tag(sync=True)
    items = traitlets.List().tag(sync=True)
    class_ = traitlets.Unicode().tag(sync=True)
    style_ = traitlets.Unicode().tag(sync=True)

    @traitlets.default('template')
    def _template(self):
        return '''
        <template>
          <v-combobox
            v-model="v_model"
            :items="items"
            :label="label"
            variant="solo"
            chips
            clearable
            multiple
          >
            <template v-slot:selection="{ attrs, item, index, select, selected }">
              <v-chip v-if="index< max_display"
                v-bind="attrs"
                :model-value="selected"
                color="primary"
                small
                closable
                @click="select"
                @click:close="remove(item)"
              >
                <strong>{{ item }}</strong>&nbsp;
              </v-chip>

              <span
                v-if="index === max_display"
                class="text-grey text-caption align-self-center"
              >
                (+{{v_model.length - max_display }} others)
              </span>
            </template>
          </v-combobox>
        </template>
        '''

I want to realize something like this:

def func(widget, event, data):
    ....
widget = ChipSelect(v_model=['a'], items=['a', 'b'])
widget.on_event('change', func)

Can anyone help me? Thanks a lot.

CnBDM-Su commented 6 months ago

solved by add this

def vue_change_func(widget, data):
        pass

def on_event(self, event, func):
    if event == 'change':
      def change_func(widget, data):
          func(widget, event, data)
      ChipSelect.vue_change_func = change_func