New API for slots

[falkoschindler]

In #500 we stumbled upon the question whether we should improve the API for adding slots to elements. Currently you write

input = ui.input('Weight')
with input.add_slot('append'):
    ui.icon('scale')

to add an icon to the slot "append". See https://quasar.dev/vue-components/input#qinput-api for a list of supported slots.

One idea (💡1) was to define properties

with input.append:
    ui.icon('scale')

or methods (💡2)

with input.append():
    ui.icon('scale')

to provide auto-completion and documentation. But this clutters the namespace quite a lot. And some slots might have names with different meaning in the Python world, like "append" being known for adding items to lists.

But inspired from #362 we could also introduce a namespace that holds all slots (💡3):

with input.slots.append:
    ui.icon('scale')

Maybe there's also an input.slots.add(...) as an alias for input.add_slot(...).

Or we support calling the sub-namespace (💡4):

with input.slot('append'):
    ui.icon('scale')

or

with input.slot.append:
    ui.icon('scale')

[falkoschindler]

We should certainly incorporate scoped slots from #514 as well.

[abulka]

From a EasyGUI beginner's point of view, the method name add_slot('SLOT-NAME') suggests to me that we are creating something new, rather than addressing an existing slot that already exists in Quasar. The words add and append also suggest this.

Perhaps set_slot, to_slot, target_slot or just slot might have been clearer names (to me). Of course my mind might change as I understand things more - just thought I'd mention it.

[falkoschindler]

Good point!
I guess the name add_slot originates from its internal usage, when defining a new slot in Python and then using it in the JS world. But of course, when using Quasar elements with already defined slots, you don't really add a new slot in Python.
This is probably another reason for re-thinking this API. add_slot might remain for internal use and backward compatibility. But there could be something nicer for the user code.

[dclause]

Introduced in #514 we do now have scoped slot and named slot support. (see the table element example code in the project)

I advocate to keep the slot word in whatever is named the API, because that is what it is called in vueJS world (thus in quasar documentation) and therefore that smoothen the discovery for documentation reader and is straight forward for js developpers. It is debatable wether we are adding or setting a slot, I would say that a set_slot alias for the current add_slot would be okay also not a must-have.
All other propositions .slots.set(), etc... seems to me to dig too deep into the element class to be valid. That feels weird that a public API setter method is hidden inside the class slots attribute rather then exposed directly.

[evnchn]

Hmm. Is this still relevant? The add_slot API is out for a while and it's fine.