Added numberinput to web and textual backends.

changes/3299.feature.rst

@@ -0,0 +1 @@
+Added numberinput to web and textual backends.

docs/reference/api/widgets/numberinput.rst

@@ -35,13 +35,17 @@ A text input that is limited to numeric input.
        :align: center
        :width: 300px
 
-  .. group-tab:: Web |no|
+  .. group-tab:: Web
 
-    Not supported
+    .. figure:: /reference/images/numberinput-web.png
+       :align: center
+       :width: 300px
 
-  .. group-tab:: Textual |no|
+  .. group-tab:: Textual
 
-    Not supported
+    .. figure:: /reference/images/numberinput-textual.png
+       :align: center
+       :width: 300px
 
 Usage
 -----

textual/src/toga_textual/factory.py

@@ -23,7 +23,8 @@
 from .widgets.label import Label
 
 # from .widgets.multilinetextinput import MultilineTextInput
-# from .widgets.numberinput import NumberInput
+from .widgets.numberinput import NumberInput
+
 # from .widgets.optioncontainer import OptionContainer
 # from .widgets.passwordinput import PasswordInput
 # from .widgets.progressbar import ProgressBar
@@ -69,7 +70,7 @@ def not_implemented(feature):
     # "ImageView",
     "Label",
     # "MultilineTextInput",
-    # "NumberInput",
+    "NumberInput",
     # "OptionContainer",
     # "PasswordInput",
     # "ProgressBar",

textual/src/toga_textual/widgets/numberinput.py

@@ -0,0 +1,84 @@
+from travertino.size import at_least
+
+from textual.validation import Number
+from textual.widgets import Input as TextualInput
+
+from .base import Widget
+
+
+class TogaInput(TextualInput):
+    def __init__(self, impl):
+        super().__init__()
+        self.interface = impl.interface
+        self.impl = impl
+
+    def on_input_changed(self, event: TextualInput.Changed) -> None:
+        self.interface.on_change()
+
+    def on_input_submitted(self, event: TextualInput.Submitted) -> None:
+        self.interface.on_confirm()
+
+
+class NumberInput(Widget):
+    def create(self):
+        self.native = TogaInput(self)
+        self.native.type = "number"
+        self.min = None
+        self.max = None
+
+    def get_readonly(self):
+        return self.native.disabled
+
+    def set_readonly(self, value):
+        self.native.disabled = value
+
+    def get_placeholder(self):
+        return self.native.placeholder
+
+    def set_placeholder(self, value):
+        self.native.placeholder = value
+
+    def get_value(self):
+        if self.native.value == "" or self.native.value is None:
+            return None
+        else:
+            if self.native.value != "-":
+                return float(self.native.value)
+            else:
+                return self.native.value
+
+    def set_value(self, value):
+        try:
+            if value is None:
+                self.native.value = ""
+            else:
+                self.native.value = str(value)
+        except AttributeError:
+            self.native.value = ""
+
+    def set_step(self, step):
+        pass
+
+    def set_min_value(self, value):
+        self.min = value
+        self.native.validators = [
+            Number(minimum=self.min),
+        ]
+
+    def set_max_value(self, value):
+        self.max = value
+        self.native.validators = [
+            Number(maximum=self.max),
+        ]
+
+    @property
+    def width_adjustment(self):
+        return 2
+
+    @property
+    def height_adjustment(self):
+        return 2
+
+    def rehint(self):
+        self.interface.intrinsic.width = at_least(len(self.native.value) + 4)
+        self.interface.intrinsic.height = 3

web/src/toga_web/factory.py

@@ -20,7 +20,8 @@
 from .widgets.label import Label
 
 # from .widgets.multilinetextinput import MultilineTextInput
-# from .widgets.numberinput import NumberInput
+from .widgets.numberinput import NumberInput
+
 # from .widgets.optioncontainer import OptionContainer
 from .widgets.passwordinput import PasswordInput
 from .widgets.progressbar import ProgressBar
@@ -66,7 +67,7 @@ def not_implemented(feature):
     # 'ImageView',
     "Label",
     # 'MultilineTextInput',
-    # 'NumberInput',
+    "NumberInput",
     # 'OptionContainer',
     "PasswordInput",
     "ProgressBar",

web/src/toga_web/widgets/numberinput.py

@@ -0,0 +1,41 @@
+from .base import Widget
+
+
+class NumberInput(Widget):
+    def create(self):
+        self._return_listener = None
+        self.native = self._create_native_widget("sl-input")
+        self.native.type = "number"
+        self.native.value = None
+        self.native.onkeyup = self.dom_keyup
+
+    def dom_keyup(self, event):
+        if event.key == "Enter":
+            self.interface.on_confirm()
+
+    def get_readonly(self, value):
+        return self.native.readOnly
+
+    def set_readonly(self, value):
+        self.native.readOnly = value
+
+    def set_step(self, step):
+        self.native.step = step
+
+    def set_min_value(self, value):
+        self.native.min = value
+
+    def set_max_value(self, value):
+        self.native.max = value
+
+    def get_value(self):
+        if self.native.value == "" or self.native.value is None:
+            return None
+        else:
+            return float(self.native.value)
+
+    def set_value(self, value):
+        self.native.value = value
+
+    def set_text_align(self, value):
+        pass