Unexpected behaviour with array props in ui.time

[samuller]

I tried limiting the possible minute options that could be selected with the ui.time component by using this:

from nicegui import ui

ui.time().props("minute-options='[0,15,30,45]'")

ui.run()

It partially worked, but for some reason the minutes between 0 and 5 minutes were still select-able.

I then figured out the issue was that the prop should be prefixed with a colon (:), i.e. :minute-options='[0,15,30,45]'.

This resolved my issue, but I have two questions:

• Why did my initial attempt even partially work?
• Why do I need to add single-quotes around the array, i.e. I have to use '[0,15,30,45]' instead of [0,15,30,45] otherwise the prop is completely ignored?

[evnchn]

Seems like prefix with : is the proper syntax, all else being undefined behavior.

Read more at: vuejs/vue#1177

[samuller]

Thanks, okay I see in Vue.js since v1.0 (and still in v3+) the :attr is a short-hand for v-bind:attr and @event for v-on:event (and there's some more shorthands in the Vue 3 docs) which helps with searching/understanding. Also, I think the props are always passed as HTML attributes that thus have to be strings with quotes.

[samuller]

Ah, and it seems before passing it on NiceGUI does some additional conversions with the props() string which makes the apostrophes optional sometimes, but the regex it currently (v2.13.0) uses doesn't recognise array literals:

from nicegui.props import PROPS_PATTERN

print(PROPS_PATTERN.match("minute-options='[0,15,30,45]'"))
print(PROPS_PATTERN.match("minute-options=abc"))
print(PROPS_PATTERN.match("minute-options=[0,15,30,45]"))
# Currently outputs:
# <re.Match object; span=(0, 29), match="minute-options='[0,15,30,45]'">
# <re.Match object; span=(0, 18), match='minute-options=abc'>
# None

[evnchn]

If I'm not mistaken, .props eventually writes to ._props which is a dict.

If you think, hey, the regex should parse array literals, perhaps we can start with modifying the underlying ._props as a proof of concept.

If that works to set the list properly, an argument can be made that the regex is "missing stuff". Perhaps we should then modify the regex.

[evnchn]

Relevant discussion: #4455