How to add description (subtitle) to QSelect option

[knoxvilledatabase]

I'm curious if its possible to show a subtitle (Like "Search engine" for Google) on a QSelect option like this:

This is my pathetic attempt.

import justpy as jp


class QSelectWithFilter(jp.QSelect):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.initial_options = kwargs.get('options', [])
        self.use_input = True
        self.allowed_events = ['input', 'remove', 'add', 'new_value', 'filter', 'filter_abort', 'keyup', 'focus', 'blur']
        self.on('keyup', self.filter_function)

    def filter_function(self, msg):
        self.options = list(filter(lambda x: msg.value.lower() in str(x['label']).lower(), self.initial_options))


options = [
    {'label': 'John Doe', 'value': 1, 'description': '[email protected]'},
    {'label': 'Jerry Vim', 'value': 2, 'description': '[email protected]'}
]


def email_subtitle_test():
    wp = jp.WebPage(template_file='quasar.html')
    body_div = jp.QDiv(a=wp, style='margin:25px; max-width:200px')
    this_select = QSelectWithFilter(
        style='text-decoration: underline dotted;',
        borderless=False,
        value=None,
        a=body_div,
        label='Test Email',
        map_options=True,
        multiple=True,
        use_chips=True,
        options=options,
        stack_label=True,
    )

    #template = jp.Template(source=this_select.options)

    q_item = jp.QItem(
        a=this_select,
        v_bind="scope.itemProps",
        v_on="scope.itemEvents"
    )

    q_item_section = jp.QItemSection(
        a=q_item
    )

    jp.QItemLabel(
        a=q_item_section,
        v_html='scope.opt.label'
    )

    jp.QItemLabel(
        a=q_item_section,
        caption=True,
        text='scope.opt.description'
    )

    return wp

jp.justpy(email_subtitle_test)

Thank you!

[elimintz]

JustPy currently supports slots but not slots with parameters (scoped slots).

For example take a look at https://justpy.io/quasar_tutorial/introduction/#slots

I need to figure out a good way to do this. I'll ask the Quasar guys for help. The slots part is the trickiest part of the Quasar component JavaScript side : https://github.com/elimintz/justpy/blob/master/justpy/templates/js/quasar_component.js#L133

[knoxvilledatabase]

That would be a really cool feature!

This is another feature that I think would be really great, I assume its based on the same principles: