replace ui.query's inheritance from ui.element with aggregation

nicegui/elements/query.py

@@ -6,7 +6,7 @@ from .. import context
 from ..element import Element
 
 
-class Query(Element, component='query.js'):
+class QueryElement(Element, component='query.js'):
 
     def __init__(self, selector: str) -> None:
         super().__init__()
@@ -53,16 +53,62 @@ class Query(Element, component='query.js'):
         return self
 
 
-def query(selector: str) -> Query:
-    """Query Selector
+class Query:
 
-    To manipulate elements like the document body, you can use the `ui.query` function.
-    With the query result you can add classes, styles, and attributes like with every other UI element.
-    This can be useful for example to change the background color of the page (e.g. `ui.query('body').classes('bg-green')`).
+    def __init__(self, selector: str) -> None:
+        """Query Selector
+
+        To manipulate elements like the document body, you can use the `ui.query` function.
+        With the query result you can add classes, styles, and attributes like with every other UI element.
+        This can be useful for example to change the background color of the page (e.g. `ui.query('body').classes('bg-green')`).
+
+        :param selector: the CSS selector (e.g. "body", "#my-id", ".my-class", "div > p")
+        """
+        for element in context.get_client().elements.values():
+            if isinstance(element, QueryElement) and element._props['selector'] == selector:  # pylint: disable=protected-access
+                self.element = element
+                break
+        else:
+            self.element = QueryElement(selector)
+
+    def classes(self, add: Optional[str] = None, *, remove: Optional[str] = None, replace: Optional[str] = None) \
+            -> Self:
+        """Apply, remove, or replace HTML classes.
 
-    :param selector: the CSS selector (e.g. "body", "#my-id", ".my-class", "div > p")
-    """
-    for element in context.get_client().elements.values():
-        if isinstance(element, Query) and element._props['selector'] == selector:  # pylint: disable=protected-access
-            return element
-    return Query(selector)
+        This allows modifying the look of the element or its layout using `Tailwind <https://tailwindcss.com/>`_ or `Quasar <https://quasar.dev/>`_ classes.
+
+        Removing or replacing classes can be helpful if predefined classes are not desired.
+
+        :param add: whitespace-delimited string of classes
+        :param remove: whitespace-delimited string of classes to remove from the element
+        :param replace: whitespace-delimited string of classes to use instead of existing ones
+        """
+        self.element.classes(add, remove=remove, replace=replace)
+        return self
+
+    def style(self, add: Optional[str] = None, *, remove: Optional[str] = None, replace: Optional[str] = None) \
+            -> Self:
+        """Apply, remove, or replace CSS definitions.
+
+        Removing or replacing styles can be helpful if the predefined style is not desired.
+
+        :param add: semicolon-separated list of styles to add to the element
+        :param remove: semicolon-separated list of styles to remove from the element
+        :param replace: semicolon-separated list of styles to use instead of existing ones
+        """
+        self.element.style(add, remove=remove, replace=replace)
+        return self
+
+    def props(self, add: Optional[str] = None, *, remove: Optional[str] = None) -> Self:
+        """Add or remove props.
+
+        This allows modifying the look of the element or its layout using `Quasar <https://quasar.dev/>`_ props.
+        Since props are simply applied as HTML attributes, they can be used with any HTML element.
+
+        Boolean properties are assumed ``True`` if no value is specified.
+
+        :param add: whitespace-delimited list of either boolean values or key=value pair to add
+        :param remove: whitespace-delimited list of property keys to remove
+        """
+        self.element.props(add, remove=remove)
+        return self

nicegui/ui.py

@@ -158,7 +158,7 @@ from .elements.plotly import Plotly as plotly
 from .elements.progress import CircularProgress as circular_progress
 from .elements.progress import LinearProgress as linear_progress
 from .elements.pyplot import Pyplot as pyplot
-from .elements.query import query
+from .elements.query import Query as query
 from .elements.radio import Radio as radio
 from .elements.row import Row as row
 from .elements.scene import Scene as scene

website/documentation/content/query_documentation.py

@@ -36,3 +36,6 @@ def remove_padding():
     with ui.column().classes('h-full w-full bg-gray-400 justify-between'):  # HIDE
         ui.label('top left')
         ui.label('bottom right').classes('self-end')
+
+
+doc.reference(ui.query)