use new API where possible

nicegui/element_filter.py

@@ -91,7 +91,6 @@ def __init__(self, *,
         self._scope = context.slot.parent if local_scope else context.client.layout
 
     def __iter__(self) -> Iterator[T]:
-        # pylint: disable=protected-access
         for element in self._scope.descendants():
             if self._kind and not isinstance(element, self._kind):
                 continue
@@ -105,19 +104,19 @@ def __iter__(self) -> Iterator[T]:
 
             if self._contents or self._exclude_content:
                 element_contents = [content for content in (
-                    element._props.get('text'),
-                    element._props.get('label'),
-                    element._props.get('icon'),
-                    element._props.get('placeholder'),
-                    element._props.get('value'),
+                    element.props.get('text'),
+                    element.props.get('label'),
+                    element.props.get('icon'),
+                    element.props.get('placeholder'),
+                    element.props.get('value'),
                     element.text if isinstance(element, TextElement) else None,
                     element.content if isinstance(element, ContentElement) else None,
                     element.source if isinstance(element, SourceElement) else None,
                 ) if content]
                 if isinstance(element, Notification):
                     element_contents.append(element.message)
                 if isinstance(element, Select):
-                    options = {option['value']: option['label'] for option in element._props.get('options', [])}
+                    options = {option['value']: option['label'] for option in element.props.get('options', [])}
                     element_contents.append(options.get(element.value, ''))
                     if element.is_showing_popup:
                         element_contents.extend(options.values())

nicegui/elements/carousel.py

@@ -33,11 +33,11 @@ def __init__(self, *,
         self._props['navigation'] = navigation
 
     def _value_to_model_value(self, value: Any) -> Any:
-        return value._props['name'] if isinstance(value, CarouselSlide) else value  # pylint: disable=protected-access
+        return value.props['name'] if isinstance(value, CarouselSlide) else value
 
     def _handle_value_change(self, value: Any) -> None:
         super()._handle_value_change(value)
-        names = [slide._props['name'] for slide in self]  # pylint: disable=protected-access
+        names = [slide.props['name'] for slide in self]
         for i, slide in enumerate(self):
             done = i < names.index(value) if value in names else False
             slide.props(f':done={done}')

nicegui/elements/mixins/visibility.py

@@ -100,7 +100,7 @@ def _handle_visibility_change(self, visible: str) -> None:
         :param visible: Whether the element should be visible.
         """
         element: Element = cast('Element', self)
-        classes = element._classes  # pylint: disable=protected-access, no-member
+        classes = element.classes  # pylint: disable=no-member
         if visible and 'hidden' in classes:
             classes.remove('hidden')
             element.update()  # pylint: disable=no-member

nicegui/elements/query.py

@@ -31,7 +31,7 @@ def __init__(self, selector: str) -> None:
         :param selector: the CSS selector (e.g. "body", "#my-id", ".my-class", "div > p")
         """
         for element in context.client.elements.values():
-            if isinstance(element, QueryElement) and element._props['selector'] == selector:  # pylint: disable=protected-access
+            if isinstance(element, QueryElement) and element.props['selector'] == selector:
                 self.element = element
                 break
         else:

nicegui/elements/stepper.py

@@ -33,11 +33,11 @@ def __init__(self, *,
         self._classes.append('nicegui-stepper')
 
     def _value_to_model_value(self, value: Any) -> Any:
-        return value._props['name'] if isinstance(value, Step) else value  # pylint: disable=protected-access
+        return value.props['name'] if isinstance(value, Step) else value
 
     def _handle_value_change(self, value: Any) -> None:
         super()._handle_value_change(value)
-        names = [step._props['name'] for step in self]  # pylint: disable=protected-access
+        names = [step.props['name'] for step in self]
         for i, step in enumerate(self):
             done = i < names.index(value) if value in names else False
             step.props(f':done={done}')

nicegui/elements/tabs.py

@@ -24,7 +24,7 @@ def __init__(self, *,
         super().__init__(tag='q-tabs', value=value, on_value_change=on_change)
 
     def _value_to_model_value(self, value: Any) -> Any:
-        return value._props['name'] if isinstance(value, (Tab, TabPanel)) else value  # pylint: disable=protected-access
+        return value.props['name'] if isinstance(value, (Tab, TabPanel)) else value
 
 
 class Tab(DisableableElement):
@@ -78,7 +78,7 @@ def __init__(self,
         self._props['keep-alive'] = keep_alive
 
     def _value_to_model_value(self, value: Any) -> Any:
-        return value._props['name'] if isinstance(value, (Tab, TabPanel)) else value  # pylint: disable=protected-access
+        return value.props['name'] if isinstance(value, (Tab, TabPanel)) else value
 
 
 class TabPanel(DisableableElement):
@@ -92,5 +92,5 @@ def __init__(self, name: Union[Tab, str]) -> None:
         :param name: `ui.tab` or the name of a tab element
         """
         super().__init__(tag='q-tab-panel')
-        self._props['name'] = name._props['name'] if isinstance(name, Tab) else name
+        self._props['name'] = name.props['name'] if isinstance(name, Tab) else name
         self._classes.append('nicegui-tab-panel')

nicegui/page_layout.py

@@ -52,9 +52,9 @@ def __init__(self, *,
         self._props['elevated'] = elevated
         if wrap:
             self._classes.append('wrap')
-        code = list(self.client.layout._props['view'])
+        code = list(self.client.layout.props['view'])
         code[1] = 'H' if fixed else 'h'
-        self.client.layout._props['view'] = ''.join(code)
+        self.client.layout.props['view'] = ''.join(code)
 
         self.move(target_index=0)
 
@@ -119,11 +119,11 @@ def __init__(self,
         self._props['bordered'] = bordered
         self._props['elevated'] = elevated
         self._classes.append('nicegui-drawer')
-        code = list(self.client.layout._props['view'])
+        code = list(self.client.layout.props['view'])
         code[0 if side == 'left' else 2] = side[0].lower() if top_corner else 'h'
         code[4 if side == 'left' else 6] = side[0].upper() if fixed else side[0].lower()
         code[8 if side == 'left' else 10] = side[0].lower() if bottom_corner else 'f'
-        self.client.layout._props['view'] = ''.join(code)
+        self.client.layout.props['view'] = ''.join(code)
 
         page_container_index = self.client.layout.default_slot.children.index(self.client.page_container)
         self.move(target_index=page_container_index if side == 'left' else page_container_index + 1)
@@ -235,9 +235,9 @@ def __init__(self, *,
         self._props['elevated'] = elevated
         if wrap:
             self._classes.append('wrap')
-        code = list(self.client.layout._props['view'])
+        code = list(self.client.layout.props['view'])
         code[9] = 'F' if fixed else 'f'
-        self.client.layout._props['view'] = ''.join(code)
+        self.client.layout.props['view'] = ''.join(code)
 
         self.move(target_index=-1)
 

nicegui/testing/user_interaction.py

@@ -57,7 +57,7 @@ def click(self) -> Self:
         with self.user.client:
             for element in self.elements:
                 if isinstance(element, ui.link):
-                    href = element._props.get('href', '#')  # pylint: disable=protected-access
+                    href = element.props.get('href', '#')
                     background_tasks.create(self.user.open(href))
                     return self
                 if isinstance(element, ui.select):

tests/test_element.py

@@ -204,105 +204,105 @@ def test_default_props(nicegui_reset_globals):
     ui.button.default_props('rounded outline')
     button_a = ui.button('Button A')
     button_b = ui.button('Button B')
-    assert button_a._props.get('rounded') is True, 'default props are set'
-    assert button_a._props.get('outline') is True
-    assert button_b._props.get('rounded') is True
-    assert button_b._props.get('outline') is True
+    assert button_a.props.get('rounded') is True, 'default props are set'
+    assert button_a.props.get('outline') is True
+    assert button_b.props.get('rounded') is True
+    assert button_b.props.get('outline') is True
 
     ui.button.default_props(remove='outline')
     button_c = ui.button('Button C')
-    assert button_c._props.get('outline') is None, '"outline" prop was removed'
-    assert button_c._props.get('rounded') is True, 'other props are still there'
+    assert button_c.props.get('outline') is None, '"outline" prop was removed'
+    assert button_c.props.get('rounded') is True, 'other props are still there'
 
     ui.input.default_props('filled')
     input_a = ui.input()
-    assert input_a._props.get('filled') is True
-    assert input_a._props.get('rounded') is None, 'default props of ui.button do not affect ui.input'
+    assert input_a.props.get('filled') is True
+    assert input_a.props.get('rounded') is None, 'default props of ui.button do not affect ui.input'
 
     class MyButton(ui.button):
         pass
     MyButton.default_props('flat')
     button_d = MyButton()
     button_e = ui.button()
-    assert button_d._props.get('flat') is True
-    assert button_d._props.get('rounded') is True, 'default props are inherited'
-    assert button_e._props.get('flat') is None, 'default props of MyButton do not affect ui.button'
-    assert button_e._props.get('rounded') is True
+    assert button_d.props.get('flat') is True
+    assert button_d.props.get('rounded') is True, 'default props are inherited'
+    assert button_e.props.get('flat') is None, 'default props of MyButton do not affect ui.button'
+    assert button_e.props.get('rounded') is True
 
     ui.button.default_props('no-caps').default_props('no-wrap')
     button_f = ui.button()
-    assert button_f._props.get('no-caps') is True
-    assert button_f._props.get('no-wrap') is True
+    assert button_f.props.get('no-caps') is True
+    assert button_f.props.get('no-wrap') is True
 
 
 def test_default_classes(nicegui_reset_globals):
     ui.button.default_classes('bg-white text-green')
     button_a = ui.button('Button A')
     button_b = ui.button('Button B')
-    assert 'bg-white' in button_a._classes, 'default classes are set'
-    assert 'text-green' in button_a._classes
-    assert 'bg-white' in button_b._classes
-    assert 'text-green' in button_b._classes
+    assert 'bg-white' in button_a.classes, 'default classes are set'
+    assert 'text-green' in button_a.classes
+    assert 'bg-white' in button_b.classes
+    assert 'text-green' in button_b.classes
 
     ui.button.default_classes(remove='text-green')
     button_c = ui.button('Button C')
-    assert 'text-green' not in button_c._classes, '"text-green" class was removed'
-    assert 'bg-white' in button_c._classes, 'other classes are still there'
+    assert 'text-green' not in button_c.classes, '"text-green" class was removed'
+    assert 'bg-white' in button_c.classes, 'other classes are still there'
 
     ui.input.default_classes('text-black')
     input_a = ui.input()
-    assert 'text-black' in input_a._classes
-    assert 'bg-white' not in input_a._classes, 'default classes of ui.button do not affect ui.input'
+    assert 'text-black' in input_a.classes
+    assert 'bg-white' not in input_a.classes, 'default classes of ui.button do not affect ui.input'
 
     class MyButton(ui.button):
         pass
     MyButton.default_classes('w-full')
     button_d = MyButton()
     button_e = ui.button()
-    assert 'w-full' in button_d._classes
-    assert 'bg-white' in button_d._classes, 'default classes are inherited'
-    assert 'w-full' not in button_e._classes, 'default classes of MyButton do not affect ui.button'
-    assert 'bg-white' in button_e._classes
+    assert 'w-full' in button_d.classes
+    assert 'bg-white' in button_d.classes, 'default classes are inherited'
+    assert 'w-full' not in button_e.classes, 'default classes of MyButton do not affect ui.button'
+    assert 'bg-white' in button_e.classes
 
     ui.button.default_classes('h-40').default_classes('max-h-80')
     button_f = ui.button()
-    assert 'h-40' in button_f._classes
-    assert 'max-h-80' in button_f._classes
+    assert 'h-40' in button_f.classes
+    assert 'max-h-80' in button_f.classes
 
 
 def test_default_style(nicegui_reset_globals):
     ui.button.default_style('color: green; font-size: 200%')
     button_a = ui.button('Button A')
     button_b = ui.button('Button B')
-    assert button_a._style.get('color') == 'green', 'default style is set'
-    assert button_a._style.get('font-size') == '200%'
-    assert button_b._style.get('color') == 'green'
-    assert button_b._style.get('font-size') == '200%'
+    assert button_a.style.get('color') == 'green', 'default style is set'
+    assert button_a.style.get('font-size') == '200%'
+    assert button_b.style.get('color') == 'green'
+    assert button_b.style.get('font-size') == '200%'
 
     ui.button.default_style(remove='color: green')
     button_c = ui.button('Button C')
-    assert button_c._style.get('color') is None, '"color" style was removed'
-    assert button_c._style.get('font-size') == '200%', 'other style are still there'
+    assert button_c.style.get('color') is None, '"color" style was removed'
+    assert button_c.style.get('font-size') == '200%', 'other style are still there'
 
     ui.input.default_style('font-weight: 300')
     input_a = ui.input()
-    assert input_a._style.get('font-weight') == '300'
-    assert input_a._style.get('font-size') is None, 'default style of ui.button does not affect ui.input'
+    assert input_a.style.get('font-weight') == '300'
+    assert input_a.style.get('font-size') is None, 'default style of ui.button does not affect ui.input'
 
     class MyButton(ui.button):
         pass
     MyButton.default_style('font-family: courier')
     button_d = MyButton()
     button_e = ui.button()
-    assert button_d._style.get('font-family') == 'courier'
-    assert button_d._style.get('font-size') == '200%', 'default style is inherited'
-    assert button_e._style.get('font-family') is None, 'default style of MyButton does not affect ui.button'
-    assert button_e._style.get('font-size') == '200%'
+    assert button_d.style.get('font-family') == 'courier'
+    assert button_d.style.get('font-size') == '200%', 'default style is inherited'
+    assert button_e.style.get('font-family') is None, 'default style of MyButton does not affect ui.button'
+    assert button_e.style.get('font-size') == '200%'
 
     ui.button.default_style('border: 2px').default_style('padding: 30px')
     button_f = ui.button()
-    assert button_f._style.get('border') == '2px'
-    assert button_f._style.get('padding') == '30px'
+    assert button_f.style.get('border') == '2px'
+    assert button_f.style.get('padding') == '30px'
 
 
 def test_invalid_tags(screen: Screen):

tests/test_element_filter.py

@@ -26,7 +26,7 @@ def test_find_all() -> None:
     assert len(elements) == 8
     assert elements[0].tag == 'q-page-container'
     assert elements[1].tag == 'q-page'
-    assert elements[2]._classes == ['nicegui-content']  # pylint: disable=protected-access
+    assert elements[2].classes == ['nicegui-content']
     assert elements[3].text == 'button A'  # type: ignore
     assert elements[4].text == 'label A'  # type: ignore
     assert elements[5].__class__ == ui.row
@@ -180,7 +180,7 @@ async def test_setting_classes(user: User):
 
     await user.open('/')
     for label in user.find('label').elements:
-        assert label._classes == ['text-2xl']  # pylint: disable=protected-access
+        assert label.classes == ['text-2xl']
 
 
 async def test_setting_style(user: User):
@@ -191,7 +191,7 @@ async def test_setting_style(user: User):
 
     await user.open('/')
     for label in user.find('label').elements:
-        assert label._style['color'] == 'red'  # pylint: disable=protected-access
+        assert label.style['color'] == 'red'
 
 
 async def test_setting_props(user: User):
@@ -202,7 +202,7 @@ async def test_setting_props(user: User):
 
     await user.open('/')
     for button in user.find('button').elements:
-        assert button._props['flat']  # pylint: disable=protected-access
+        assert button.props['flat']
 
 
 async def test_typing(user: User):

tests/test_tailwind.py

@@ -31,4 +31,4 @@ def test_tailwind_apply(screen: Screen):
 def test_empty_values(nicegui_reset_globals):
     label = ui.label('A')
     label.tailwind.border_width('')
-    assert 'border' in label._classes
+    assert 'border' in label.classes

tests/test_tree.py

@@ -72,7 +72,7 @@ def test_select_deselect_node(screen: Screen):
 
     ui.button('Select', on_click=lambda: tree.select('2'))
     ui.button('Deselect', on_click=tree.deselect)
-    ui.label().bind_text_from(tree._props, 'selected', lambda x: f'Selected: {x}')
+    ui.label().bind_text_from(tree.props, 'selected', lambda x: f'Selected: {x}')
 
     screen.open('/')
     screen.click('Select')
@@ -92,7 +92,7 @@ def test_tick_untick_node_or_nodes(screen: Screen):
     ui.button('Untick some', on_click=lambda: tree.untick(['1', 'B']))
     ui.button('Tick all', on_click=tree.tick)
     ui.button('Untick all', on_click=tree.untick)
-    ui.label().bind_text_from(tree._props, 'ticked', lambda x: f'Ticked: {sorted(x)}')
+    ui.label().bind_text_from(tree.props, 'ticked', lambda x: f'Ticked: {sorted(x)}')
 
     screen.open('/')
     screen.should_contain('Ticked: []')

website/documentation/content/mermaid_documentation.py

@@ -11,7 +11,7 @@ def main_demo() -> None:
         A --> C;
     ''')
     # END OF DEMO
-    list(ui.context.client.elements.values())[-1]._props['config'] = {'securityLevel': 'loose'}  # HACK: for click_demo
+    list(ui.context.client.elements.values())[-1].props['config'] = {'securityLevel': 'loose'}  # HACK: for click_demo
 
 
 @doc.demo('Handle click events', '''
@@ -38,7 +38,7 @@ def error_demo() -> None:
         A -> C;
     ''').on('error', lambda e: print(e.args['message']))
     # END OF DEMO
-    list(ui.context.client.elements.values())[-1]._props['config'] = {'securityLevel': 'loose'}  # HACK: for click_demo
+    list(ui.context.client.elements.values())[-1].props['config'] = {'securityLevel': 'loose'}  # HACK: for click_demo
 
 
 doc.reference(ui.mermaid)

website/documentation/content/section_styling_appearance.py

@@ -74,7 +74,9 @@ def handle_classes(e: events.ValueChangeEventArguments):
                         ui.markdown("`')`")
                     with ui.row().classes('items-center gap-0 w-full px-2'):
                         def handle_props(e: events.ValueChangeEventArguments):
-                            element._props = {'label': 'Button', 'color': 'primary'}
+                            element.props.clear()
+                            element.props['label'] = 'Button'
+                            element.props['color'] = 'primary'
                             try:
                                 element.props(e.value)
                             except ValueError: