ui.select doesn't take options as list of dictionaries, like Quasar QSelect does

[aabrodskiy]

Description

Quasar allows setting options of QSelect as list of dictionaries with keys being label, value, icon, etc, as follows:

options: [
  {
    label: 'Google',
    value: 'goog',
    icon: 'mail',
    description: 'google is a search engine',
  },
  {
    label: 'Facebook',
    value: 'fb',
    icon: 'bluetooth',
    description: 'facebook is old school' 
  },
]

ui.select allows two ways of setting the options:

1. List of strings:
   ['Apple', 'Google']

2. Dictionary {label=value}:
   {'Google': 'google', 'Apple':'apple'}

That doesn't offer flexibility in using and showing icons, as well as storing IDs and some other useful related information to each value, that we could then receive as args on change events.

Is there a way to bring the format of options in compliance with what QSelect accepts?

P.S. Thank you all for the amazing product you built, I absolutely in love with NiceGUI and the ways I can work with it and there is no limit to extending it and go bare JS whenever I need it.

[falkoschindler]

Hi @aabrodskiy,

When implementing the ui.select element a few years back, we chose a simpler API than QSelect, where you can simply pass a list or - if you need different values and labels - a dictionary. As it turned out, this choice has some limitations for advanced usage. I converted your post into a feature request, since we should think about how to add this feature in the future. Can we simply add support for options: list[dict]? Or does it conflict with other feature that have been added in the past, like input fields, validation etc.?

For the time being, you add slots yourself to define how to render your options:

select = ui.select([
    {
        'label': 'Google',
        'value': 'goog',
        'icon': 'mail',
        'description': 'google is a search engine',
    },
    {
        'label': 'Facebook',
        'value': 'fb',
        'icon': 'bluetooth',
        'description': 'facebook is old school',
    },
])
select.add_slot('option', '''
    <q-item :props="props" class="flex items-center gap-2" clickable @click="props.toggleOption(props.opt)">
        <q-item-section avatar>
            <q-icon :name="props.label.icon"></q-icon>
        </q-item-section>
        <q-item-section>
            <span>{{props.label.label}}</span>
        </q-item-section>
    </q-item>
''')
select.add_slot('selected-item', '''
    <span :props="props">{{props.opt.label.label}}</span>
''')

Note that, counter-intuitively, you need to access props.label.label and props.label.icon because NiceGUI puts your options into the label field before sending it to the client.

Oh and there's also a useful option "option-label" to define how to get the label out of an option. So if you simply want to show labels that are defined inside a dict, you can use this prop:

select.props(':option-label="(opt) => opt.label.label"')

[aabrodskiy]

Thank you @falkoschindler, this is awesome!
I was trying to do something along the same lines, but I was lacking the syntax for setting option-label, it's not quite obvious :)

I have implemented your suggestion as a class and it works almost perfect:

from nicegui import ui

class TSelectWithIcon(ui.select):
    """
    A ui.select that accepts a list of dictionaries as options:
    [
        {
            'label': 'Google',
            'value': 'goog',
            'icon': 'mail',
            'description': 'google is a search engine',
        },
        {
            'label': 'Facebook',
            'value': 'fb',
            'icon': 'bluetooth',
            'description': 'facebook is old school',
        },
    ]    
    """
    def __init__(self, options, **kwargs):
        super().__init__(options, **kwargs)
        
        self.add_slot('option', '''
            <q-item :props="props" :opt="opt" class="flex items-center gap-2" clickable @click="props.toggleOption(props.opt)">
                <q-item-section avatar>
                    <q-icon :name="props.opt.label.icon"></q-icon>
                </q-item-section>
                <q-item-section>
                    <span>{{props.opt.label.label}}</span>
                </q-item-section>
            </q-item>
        ''')


        self.props(add =':option-label="(opt) => opt.label.label"')
        self.props(add =':option-value="(opt) => opt.label.value"')

The one thing I can't still figure out is how to correctly assign option-value. I have tried:

self.props(add =':option-value="(opt) => opt.label.value"')

But this doesn't seem to make any difference, the bind_value still returns a full dictionary of that item, and not just the value field of it, which is ideally what I want. What am I missing there?

[falkoschindler]

I see. The "option-value" prop probably doesn't help, because it only affects the frontend. The value in Python is generated independently.

But you can convert the options list to a dictionary, with keys representing the values:

class TSelectWithIcon(ui.select):
    def __init__(self, options, **kwargs):
        super().__init__({item['value']: item for item in options}, **kwargs)
        self.add_slot('option', '''
            <q-item :props="props" class="flex items-center gap-2" clickable @click="props.toggleOption(props.opt)">
                <q-item-section avatar>
                    <q-icon :name="props.opt.label.icon"></q-icon>
                </q-item-section>
                <q-item-section>
                    <span>{{props.opt.label.label}}</span>
                </q-item-section>
            </q-item>
        ''')
        self.props(':option-label="(opt) => opt.label.label"')

select = TSelectWithIcon([
    {'label': 'Google', 'value': 'goog', 'icon': 'mail'},
    {'label': 'Facebook', 'value': 'fb', 'icon': 'bluetooth'},
])
ui.label().bind_text_from(select, 'value')

[aabrodskiy]

Great idea, works like a charm, thank you!