How to use scoped slots?

[me21]

There is a feature in Vue named scoped slots. Judging by the sources of JustPy and NiceGUI, they seem to use this feature, albeit not frequently.
E.g. in ColorInput there is one call to add_scoped_slot, but it's not easy to understand what it does, as first some html is parsed (with Quasar tags), then the result is passed to that function.

nicegui/nicegui/elements/color_input.py

Lines 28 to 34 in 0f67521

	self._icon_button = jp.parse_html('''
	<q-icon name="colorize" class="cursor-pointer">
	<q-popup-proxy transition-show="scale" transition-hide="scale" name="popup" no-parent-event>
	<q-color name="color_input"/>
	</q-popup-proxy>
	</q-icon>''')
	view.add_scoped_slot('append', self._icon_button)

How do scoped slots work?

My specific problem is that I wanted to do something like https://v1.quasar.dev/vue-components/tree#customize-content - header and body customization for tree nodes. Some additional text like "story" in that example, or notice how they put a Switch control under one of tree nodes.

How can I do this with NiceGUI?

[falkoschindler]

Actually, I don't know much about scoped slots. The example you're citing from color_input.py is borrowed from https://justpy.io/quasar_tutorial/quasar_components/#qcolor. It does the job, but I can't say how to apply it to ui.tree.

Since it's (currently) beyond NiceGUI's core features, I'll convert this issue to a Q&A discussion. If we find a solution with either JustPy or NiceGUI, we can think about how to integrate it into ui.tree's API.

[dclause]

@falkoschindler How is nicegui related to justpy ? Is it some sort of similar project with a different API ?
@me21 I can answer this question as I have studied the question when creating PR #500 about QTable. You can see in that PR I have created an example of table using the slot feature.

Let start from nicegui color component. This is actually an input field with some more stuff added to its named slot called "append". To make it even simpler, here is the basics:

with ui.input() as input: 
  with input.add_slot('append'):
    ui.icon('search')

This code would create an input field with an icon injected inside the slot named "append".

The equivalent in Vue.js is :

<q-input
    v-model="search"
    placeholder="Search"
>
   <template v-slot:append>
        <q-icon name="search" />
    </template>
</q-input>

What Vue.js does here is to render the slot and to inject it at the proper place in the q-input. This is done in nicegui project in the same way. See index.html file where this comes from :

Object.entries(element.slots).forEach(([name, ids]) => {
  const children = ids.map(id => renderRecursively(elements, id));
  if (name == 'default' && element.text) {
    children.unshift(element.text);
  }
  slots[name] = () => children;
});
return Vue.h(Vue.resolveComponent(element.tag), props, slots);

Scopes added by the add_slot method to the current element are looped on, there child elements are rendered, and the current element is rendered at the end along with its slot.

Now scoped slots refers to slots where some data are passed from the parent to the child slot to be used in there. See this as parameters that can be given to the slot to render.

One other way to see it is in term of functionality: named slots are placeholder sections of your component where user can inject some more stuff on his own (an icon after the input field, or a before / after the table data). Scoped slots are more to see like parts of your component (because it uses the component data) that can be replaced by something else but that needs the data too. For instance a table row, if replaced by something, still need the row data to work.

Hopefully that was the explanation you where looking for otherwise I feel stupid now with my long comment ^^.

I any case, I can confirm you that there is no way at the moment to use the props from a scoped slot. Because scoped slots are also named slots, you can inject your own data currently in a scoped slot, but then you mess up with the component itself obviously by not having access to the data needed.

NOTE: The code in your comment seems related to an old version of nicegui and much closer to justpy then the current implementation. I have never worked with justpy but at first glance in their repo, although the method is called add_scoped_slots, it does seems to be named slots only. I could not find places in code nor in demos or tests where the scoped props are used as such. I will have a deeper look at their code, in particular, the method to render them :

for (slot_name in this.jp_props.scoped_slots) {
    b[slot_name] = this.jp_props.scoped_slots[slot_name];
    var vue_type = this.jp_props.vue_type;
    scoped_slots[slot_name] = (function (v, e) {
        return function () {
            return h(v, {props: {jp_props: b[e]}});
        }
    })(vue_type, slot_name);
}

[falkoschindler]

Thanks for this great explanation, @dclause! 🙂

Regarding NiceGUI and JustPy: NiceGUI used to build upon JustPy, another library for writing web UIs in Python. (Here is why we created NiceGUI as another layer on top of JustPy.) But in December 2022 we released NiceGUI 1.0 which does not use JustPy anymore, giving us more flexibility and control over the core implementation. Some older issues and discussions still refer to JustPy and sometimes it still serves as an inspiration.

[dclause]

Hey ! I got it to work :)

Here is the tree example using both a scoped slot (to inject the icon properly) and the named slot (actually the body scoped slot, used without the inject props, therefore as a named slots). It demonstrates that can be done without breaking on any of currently working functionnality, but adding the scoped slots:

The example personnalizes the QTree as shown in : https://quasar.dev/vue-components/tree#customize-content using the data and build shown in the reference QTree element at https://nicegui.io/reference#tree

The technique works with any element from Quasar. That really gives us a whole new level to customize the elements just as the documentation of Quasar shows, including QTable too (as per PR #500).

It is (a bit past) 2PM here so I have to get back to work, but I will push a PR with scoped slots very soon (hopefully tonight).

[falkoschindler]

We just released NiceGUI 1.2.0 with officially supports scoped slots. 🎉

https://github.com/zauberzeug/nicegui/blob/main/examples/slots/main.py