support more props and styles #98

nicegui/elements/element.py

@@ -70,7 +70,7 @@ class Element:
             return {}
         lexer = shlex.shlex(text, posix=True)
         lexer.whitespace = ';'
-        lexer.wordchars += ':- '
+        lexer.wordchars += ':-.%,() '
         return dict(map(str.strip, word.split(':', 1)) for word in lexer)
 
     def style(self, add: Optional[str] = None, *, remove: Optional[str] = None, replace: Optional[str] = None):
@@ -96,7 +96,7 @@ class Element:
             return {}
         lexer = shlex.shlex(text, posix=True)
         lexer.whitespace = ' '
-        lexer.wordchars += '=-'
+        lexer.wordchars += '=-.%'
         return dict(word.split('=', 1) if '=' in word else (word, True) for word in lexer)
 
     def props(self, add: Optional[str] = None, *, remove: Optional[str] = None):

tests/test_element.py

@@ -84,10 +84,14 @@ def test_classes(screen: Screen):
 
 def test_style_parsing():
     assert Element._parse_style('color: red; background-color: green') == {'color': 'red', 'background-color': 'green'}
+    assert Element._parse_style('width:12em;height:34.5em') == {'width': '12em', 'height': '34.5em'}
+    assert Element._parse_style('transform: translate(120.0px, 50%)') == {'transform': 'translate(120.0px, 50%)'}
 
 
 def test_props_parsing():
     assert Element._parse_props('one two=1 three="abc def"') == {'one': True, 'two': '1', 'three': 'abc def'}
+    assert Element._parse_props('loading percentage=12.5') == {'loading': True, 'percentage': '12.5'}
+    assert Element._parse_props('size=50%') == {'size': '50%'}
 
 
 def test_style(screen: Screen):