update linear and circular progress

api_docs_and_examples.py

@@ -342,12 +342,12 @@ To overlay an SVG, make the `viewBox` exactly the size of the image and provide
         line_updates = ui.timer(0.1, update_line_plot, active=False)
         line_checkbox = ui.checkbox('active').bind_value(line_updates, 'active')
 
-    # @example(ui.linear_progress)
+    @example(ui.linear_progress, skip=False)
     def linear_progress_example():
         slider = ui.slider(min=0, max=1, step=0.01, value=0.5)
         ui.linear_progress().bind_value_from(slider, 'value')
 
-    # @example(ui.circular_progress)
+    @example(ui.circular_progress, skip=False)
     def circular_progress_example():
         slider = ui.slider(min=0, max=1, step=0.01, value=0.5)
         ui.circular_progress().bind_value_from(slider, 'value')

nicegui/elements/mixins/value_element.py

@@ -1,4 +1,4 @@
-from typing import Any, Callable, Dict
+from typing import Any, Callable, Dict, Optional
 
 from ...binding import BindableProperty, bind, bind_from, bind_to
 from ...element import Element
@@ -6,17 +6,18 @@ from ...events import ValueChangeEventArguments, handle_event
 
 
 class ValueElement(Element):
+    VALUE_PROP = 'model-value'
     value = BindableProperty(on_change=lambda sender, value: sender.on_value_change(value))
 
-    def __init__(self, *, value: Any, on_value_change: Callable, **kwargs) -> None:
+    def __init__(self, *, value: Any, on_value_change: Optional[Callable], **kwargs) -> None:
         super().__init__(**kwargs)
         self.set_value(value)
-        self._props['model-value'] = self._value_to_model_value(value)
+        self._props[self.VALUE_PROP] = self._value_to_model_value(value)
         self.change_handler = on_value_change
 
         def handle_change(msg: Dict) -> None:
             self.set_value(self._msg_to_value(msg))
-        self.on('update:model-value', handle_change, ['value'])
+        self.on(f'update:{self.VALUE_PROP}', handle_change, ['value'])
 
     def bind_value_to(self, target_object: Any, target_name: str = 'value', forward: Callable = lambda x: x):
         bind_to(self, 'value', target_object, target_name, forward)
@@ -35,7 +36,7 @@ class ValueElement(Element):
         self.value = value
 
     def on_value_change(self, value: Any) -> None:
-        self._props['model-value'] = self._value_to_model_value(value)
+        self._props[self.VALUE_PROP] = self._value_to_model_value(value)
         self.update()
         args = ValueChangeEventArguments(sender=self, client=self.client, value=self._value_to_event_value(value))
         handle_event(self.change_handler, args)

nicegui/elements/old/progress.py → nicegui/elements/progress.py

@@ -1,13 +1,12 @@
 from typing import Optional
 
-import justpy as jp
+from nicegui import ui
 
-from ..binding import BindableProperty, BindValueMixin
-from .element import Element
+from .mixins.value_element import ValueElement
 
 
-class LinearProgress(Element, BindValueMixin):
-    value = BindableProperty()
+class LinearProgress(ValueElement):
+    VALUE_PROP = 'value'
 
     def __init__(self, value: float = 0.0, *, size: Optional[str] = None, show_value: bool = True) -> None:
         """Linear Progress
@@ -19,23 +18,16 @@ class LinearProgress(Element, BindValueMixin):
         :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 = 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')
+        super().__init__(tag='q-linear-progress', value=value, on_value_change=None)
+        self._props['size'] = size if size is not None else '20px' if show_value else '4px'
 
         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')
+            with self:
+                ui.label().classes('absolute-center text-sm text-white').bind_text_from(self, 'value')
 
 
-class CircularProgress(Element, BindValueMixin):
-    value = BindableProperty()
+class CircularProgress(ValueElement):
+    VALUE_PROP = 'value'
 
     def __init__(self, value: float = 0.0, *,
                  min: float = 0.0, max: float = 1.0, size: str = 'xl', show_value: bool = True) -> None:
@@ -48,10 +40,14 @@ class CircularProgress(Element, BindValueMixin):
         :param size: the size of the progress circle (default: "xl")
         :param show_value: whether to show a value label in the center (default: `True`)
         """
-        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)
+        super().__init__(tag='q-circular-progress', value=value, on_value_change=None)
+        self._props['min'] = min
+        self._props['max'] = max
+        self._props['size'] = size
+        self._props['show-value'] = show_value
+        self._props['color'] = 'primary'
+        self._props['track-color'] = 'grey-4'
 
-        self.value = value
-        self.bind_value_to(self.view, 'value')
+        if show_value:
+            with self:
+                ui.label().classes('absolute-center text-xs').bind_text_from(self, 'value')

nicegui/ui.py

@@ -18,6 +18,8 @@ from .elements.link import LinkTarget as link_target
 from .elements.markdown import Markdown as markdown
 from .elements.number import Number as number
 from .elements.plot import Plot as plot
+from .elements.progress import CircularProgress as circular_progress
+from .elements.progress import LinearProgress as linear_progress
 from .elements.radio import Radio as radio
 from .elements.row import Row as row
 from .elements.select import Select as select