update checkbox

nicegui/elements/bool_element.py

@@ -0,0 +1,9 @@
+from typing import Callable, Optional
+
+from .value_element import ValueElement
+
+
+class BoolElement(ValueElement):
+
+    def __init__(self, tag: str, *, value: bool, on_change: Optional[Callable]) -> None:
+        super().__init__(tag, value=value, on_change=on_change)

nicegui/elements/old/checkbox.py → nicegui/elements/checkbox.py

@@ -1,19 +1,22 @@
 from typing import Callable, Optional
 
-import justpy as jp
-
+from .binding_mixins import BindTextMixin
 from .bool_element import BoolElement
 
 
-class Checkbox(BoolElement):
+class Checkbox(BoolElement, BindTextMixin):
 
-    def __init__(self, text: str = '', *, value: bool = False, on_change: Optional[Callable] = None):
+    def __init__(self, text: str = '', *, value: bool = False, on_change: Optional[Callable] = None) -> None:
         """Checkbox
 
         :param text: the label to display next to the checkbox
         :param value: whether it should be checked initially (default: `False`)
         :param on_change: callback to execute when value changes
         """
-        view = jp.QCheckbox(text=text, input=self.handle_change, temp=False)
+        super().__init__('q-checkbox', value=value, on_change=on_change)
+        self.text = text
+        self._text = text
 
-        super().__init__(view, value=value, on_change=on_change)
+    def on_text_change(self, text: str) -> None:
+        self._text = text
+        self.update()

nicegui/elements/old/bool_element.py

@@ -1,11 +0,0 @@
-from typing import Callable, Optional
-
-import justpy as jp
-
-from .value_element import ValueElement
-
-
-class BoolElement(ValueElement):
-
-    def __init__(self, view: jp.HTMLBaseComponent, *, value: bool, on_change: Optional[Callable]):
-        super().__init__(view, value=value, on_change=on_change)

nicegui/elements/old/value_element.py

@@ -1,30 +0,0 @@
-from typing import Any, Callable, Dict, Optional
-
-import justpy as jp
-
-from ..binding import BindableProperty, BindValueMixin
-from ..events import ValueChangeEventArguments, handle_event
-from .element import Element
-
-
-class ValueElement(Element, BindValueMixin):
-    value = BindableProperty(on_change=lambda sender, value: handle_event(
-        sender.change_handler, ValueChangeEventArguments(sender=sender, socket=None, value=value)))
-
-    def __init__(self, view: jp.HTMLBaseComponent, *, value: Any, on_change: Optional[Callable]) -> None:
-        super().__init__(view)
-
-        self.change_handler = on_change
-        self.value = value
-        self.bind_value_to(self.view, 'value', forward=self.value_to_view)
-
-    def value_to_view(self, value):
-        return value
-
-    def set_value(self, value) -> None:
-        self.value = value
-
-    def handle_change(self, msg: Dict):
-        self.value = msg['value']
-        self.update()
-        return False

nicegui/elements/value_element.py

@@ -0,0 +1,24 @@
+from typing import Any, Callable, Dict, Optional
+
+from ..element import Element
+from ..events import ValueChangeEventArguments, handle_event
+from .binding_mixins import BindValueMixin
+
+
+class ValueElement(Element, BindValueMixin):
+
+    def __init__(self, tag: str, *, value: Any, on_change: Optional[Callable]) -> None:
+        super().__init__(tag)
+        self.change_handler = on_change
+
+        self.value = value
+        self._props['model-value'] = value
+
+        def handle_change(msg: Dict) -> None:
+            self.value = msg['args']
+        self.on('update:model-value', handle_change)
+
+    def on_value_change(self, value: str) -> None:
+        self._props['model-value'] = value
+        self.update()
+        handle_event(self.change_handler, ValueChangeEventArguments(sender=self, client=self.client, value=value))

nicegui/ui.py

@@ -3,6 +3,7 @@ from .elements.button import Button as button
 from .elements.card import Card as card
 from .elements.card import CardActions as card_actions
 from .elements.card import CardSection as card_section
+from .elements.checkbox import Checkbox as checkbox
 from .elements.column import Column as column
 from .elements.icon import Icon as icon
 from .elements.image import Image as image