#107 code review, refactoring and API improvements

api_docs_and_examples.py

@@ -317,10 +317,12 @@ To overlay an SVG, make the `viewBox` exactly the size of the image and provide
         line_checkbox = ui.checkbox('active').bind_value(line_updates, 'active')
 
     with example(ui.linear_progress):
-        ui.linear_progress(value=0.3)
+        slider = ui.slider(min=0, max=1, step=0.01, value=0.5)
+        ui.linear_progress().bind_value_from(slider, 'value')
 
     with example(ui.circular_progress):
-        ui.circular_progress(value=0.67)
+        slider = ui.slider(min=0, max=1, step=0.01, value=0.5)
+        ui.circular_progress().bind_value_from(slider, 'value')
 
     with example(ui.scene):
         with ui.scene(width=225, height=225) as scene:
@@ -550,10 +552,6 @@ Just pass a property of the model as parameter to these methods to create the bi
             def __init__(self):
                 self.number = 1
 
-            @property
-            def progress(self) -> float:
-                return (self.number - 1) / 2
-
         demo = Demo()
         v = ui.checkbox('visible', value=True)
         with ui.column().bind_visibility_from(v, 'value'):
@@ -561,13 +559,6 @@ Just pass a property of the model as parameter to these methods to create the bi
             ui.toggle({1: 'a', 2: 'b', 3: 'c'}).bind_value(demo, 'number')
             ui.number().bind_value(demo, 'number')
 
-            with ui.linear_progress(target_object=demo, target_name='progress'):
-                with ui.container(classes='absolute-full flex flex-center'):
-                    lbl = ui.label(text='number').classes('text-center text-subtitle2 text-white')
-                    lbl.bind_text_from(demo, 'progress')
-
-            ui.circular_progress(target_object=demo, target_name='progress')
-
     ui_updates = '''#### UI Updates
 
 NiceGUI tries to automatically synchronize the state of UI elements with the client, e.g. when a label text, an input value or style/classes/props of an element have changed.

nicegui/auto_context.py

@@ -74,20 +74,3 @@ class AutoUpdaterForAsyncs:
                 message = yield signal
             except BaseException as err:
                 send, message = iter_throw, err
-
-
-class ContextMixin:
-    """
-    Mixin providing a context manager for additional components.
-    copied from nicegui.elements.group.Group
-    """
-
-    def __enter__(self):
-        self._child_count_on_enter = len(self.view)
-        get_view_stack().append(self.view)
-        return self
-
-    def __exit__(self, *_):
-        get_view_stack().pop()
-        if self._child_count_on_enter != len(self.view):
-            self.update()

nicegui/elements/container.py

@@ -1,11 +0,0 @@
-import justpy as jp
-
-from .group import Group
-
-
-class Container(Group):
-
-    def __init__(self, **kwargs):
-        """QDiv Container"""
-        view = jp.QDiv(temp=True, **kwargs)
-        super().__init__(view)

nicegui/elements/progress.py

@@ -1,57 +1,57 @@
-from .float_element import FloatElement
-from .quasarcommponents import QLinearProgressExtended, QCircularProgressExtended
-from ..auto_context import ContextMixin
+from typing import Optional
 
+import justpy as jp
 
-class LinearProgress(FloatElement, ContextMixin):
+from ..binding import BindableProperty, BindValueMixin
+from .element import Element
 
-    def __init__(self, *, value: float = 0.0, target_object=None, target_name=None, **kwargs):
-        """LinearProgress
 
-        An element to create a linear progress bar wrapping
-        `Linear Progress <https://v1.quasar.dev/vue-components/linear-progress>`_ component.
+class LinearProgress(Element, BindValueMixin):
+    value = BindableProperty()
 
-        :param value: the initial value of the field (ratio 0.0 - 1.0)
-        :param target_object: the object to data bind to
-        :param target_name: the field name of the data bound object
+    def __init__(self, value: float = 0.0, *, size: Optional[str] = None, show_value: bool = True) -> None:
+        """Linear Progress
+
+        A linear progress bar wrapping Quasar's
+        `QLinearProgress <https://v1.quasar.dev/vue-components/linear-progress>`_ component.
+
+        :param value: the initial value of the field (from 0.0 to 1.0)
+        :param size: the height of the progress bar (default: "20px" with value label and "4px" without)
+        :param show_value: whether to show a value label in the center (default: `True`)
         """
-        view = QLinearProgressExtended(color='primary', size='1.4rem', value=value, temp=False)
-        super().__init__(view, value=value, on_change=None, **kwargs)
-        if target_object and target_name:
-            self.bind_value_from(target_object=target_object, target_name=target_name)
+        view = jp.QLinearProgress(value=value, temp=False)
+        view.prop_list.append('size')
+        view.size = size if size is not None else '20px' if show_value else '4px'
+        super().__init__(view)
+
+        self.value = value
+        self.bind_value_to(self.view, 'value')
 
+        if show_value:
+            label = jp.Div(text='', classes='absolute-center text-sm text-white', temp=False)
+            label.add_page(self.page)
+            self.view.add(label)
+            self.bind_value_to(label, 'text')
 
-class CircularProgress(FloatElement, ContextMixin):
 
-    def __init__(self, *, value: float = 0.0, target_object=None, target_name=None, show_value: bool = True,
-                 **kwargs):
-        """CircularProgress
+class CircularProgress(Element, BindValueMixin):
+    value = BindableProperty()
 
-        An element to create a linear progress bar wrapping
-        `Circular Progress <https://v1.quasar.dev/vue-components/circular-progress>`_ component.
+    def __init__(self, value: float = 0.0, *,
+                 min: float = 0.0, max: float = 1.0, size: str = 'xl', show_value: bool = True) -> None:
+        """Circular Progress
 
-        :param value: the initial value of the field (ratio 0.0 - 1.0)
-        :param target_object: the object to data bind to
-        :param target_name: the field name of the data bound object
+        A circular progress bar wrapping Quasar's
+        `QCircularProgress <https://v1.quasar.dev/vue-components/circular-progress>`_.
+
+        :param value: the initial value of the field
+        :param size: the size of the progress circle (default: "xl")
+        :param show_value: whether to show a value label in the center (default: `True`)
         """
-        value = self._convert_ratio(value)
-        view = QCircularProgressExtended(color='primary', value=value, temp=False,
-                                         track_color='grey-4',
-                                         center_color='transparent',
-                                         size='xl', show_value=show_value)
-        super().__init__(view, value=value, on_change=None, **kwargs)
-        if target_object and target_name:
-            self.bind_value_from(target_object=target_object, target_name=target_name)
-
-    @property
-    def value(self):
-        val = getattr(self, '_value')
-        return val
-
-    @value.setter
-    def value(self, value):
-        val = self._convert_ratio(value=value)
-        setattr(self, '_value', val)
-
-    def _convert_ratio(self, value: float) -> float:
-        return round(value * 100, 2) if 0.0 <= value <= 1.0 else float(value)
+        view = jp.QCircularProgress(value=value, min=min, max=max, size=size, show_value=show_value,
+                                    color='primary', track_color='grey-4', temp=False)
+        view.prop_list.append('instant-feedback')
+        super().__init__(view)
+
+        self.value = value
+        self.bind_value_to(self.view, 'value')

nicegui/elements/quasarcommponents.py

@@ -1,18 +0,0 @@
-from justpy import parse_dict, QCircularProgress, QLinearProgress
-
-
-@parse_dict
-class QCircularProgressExtended(QCircularProgress):
-
-    def __init__(self, **kwargs):
-        super().__init__(**kwargs)
-        self.prop_list.extend(['instant-feedback'])
-
-
-@parse_dict
-class QLinearProgressExtended(QLinearProgress):
-
-    def __init__(self, **kwargs):
-        super().__init__(**kwargs)
-        # add upstream missing properties
-        self.prop_list.extend(['size'])

nicegui/ui.py

@@ -22,7 +22,6 @@ class Ui:
     from .elements.color_picker import ColorPicker as color_picker
     from .elements.colors import Colors as colors
     from .elements.column import Column as column
-    from .elements.container import Container as container
     from .elements.dialog import Dialog as dialog
     from .elements.expansion import Expansion as expansion
     from .elements.html import Html as html