Added Selection widget to Toga web (#3402)

Author: vt37

changes/3334.feature.rst

@@ -0,0 +1 @@
+The Web backend now provides Selection widgets.

docs/reference/api/widgets/selection.rst

@@ -35,9 +35,11 @@ A widget to select a single option from a list of alternatives.
        :align: center
        :width: 300px
 
-  .. group-tab:: Web |no|
+  .. group-tab:: Web
 
-    Not supported
+    .. figure:: /reference/images/selection-web.png
+       :align: center
+       :width: 300px
 
   .. group-tab:: Textual |no|
 

docs/reference/data/widgets_by_platform.csv

@@ -16,7 +16,7 @@ MultilineTextInput,General Widget,:class:`~toga.MultilineTextInput`,Multi-line T
 NumberInput,General Widget,:class:`~toga.NumberInput`,A text input that is limited to numeric input,|y|,|y|,|y|,|y|,|y|,,
 PasswordInput,General Widget,:class:`~toga.PasswordInput`,A text input that hides its input,|y|,|y|,|y|,|y|,|y|,|b|,
 ProgressBar,General Widget,:class:`~toga.ProgressBar`,Progress Bar,|y|,|y|,|y|,|y|,|y|,|b|,
-Selection,General Widget,:class:`~toga.Selection`,A widget to select a single option from a list of alternatives.,|y|,|y|,|y|,|y|,|y|,,
+Selection,General Widget,:class:`~toga.Selection`,A widget to select a single option from a list of alternatives.,|y|,|y|,|y|,|y|,|y|,|b|,
 Slider,General Widget,:class:`~toga.Slider`,Slider,|y|,|y|,|y|,|y|,|y|,,
 Switch,General Widget,:class:`~toga.Switch`,Switch,|y|,|y|,|y|,|y|,|y|,|b|,
 Table,General Widget,:class:`~toga.Table`,A widget for displaying columns of tabular data.,|y|,|y|,|y|,,|b|,,

docs/reference/images/selection-web.png

@@ -26,8 +26,8 @@
 from .widgets.passwordinput import PasswordInput
 from .widgets.progressbar import ProgressBar
 from .widgets.scrollcontainer import ScrollContainer
+from .widgets.selection import Selection
 
-# from .widgets.selection import Selection
 # from .widgets.slider import Slider
 # from .widgets.splitcontainer import SplitContainer
 from .widgets.switch import Switch
@@ -76,7 +76,7 @@ def not_implemented(feature):
     "ProgressBar",
     "ActivityIndicator",
     "ScrollContainer",
-    # 'Selection',
+    "Selection",
     # 'Slider',
     # 'SplitContainer',
     "Switch",

web/src/toga_web/factory.py

@@ -0,0 +1,43 @@
+from js import CustomEvent
+
+from toga_web.libs import create_proxy
+
+from .base import Widget
+
+
+class Selection(Widget):
+
+    def create(self):
+        self.native = self._create_native_widget("sl-select")
+        self.native.addEventListener("sl-change", create_proxy(self.dom_sl_change))
+
+    def dom_sl_change(self, event):
+        self.interface.on_change()
+
+    def clear(self):
+        while self.native.firstElementChild:
+            self.native.removeChild(self.native.firstElementChild)
+
+    def insert(self, index, item):
+        display_text = self.interface._title_for_item(item)
+        option = self._create_native_widget("sl-option")
+        option.value = str(index)
+        option.textContent = display_text
+        if self.native.value == "":
+            self.native.value = option.value
+        if index >= len(self.native.children):
+            self.native.appendChild(option)
+        else:
+            self.native.insertBefore(option, self.native.children[index])
+
+    def get_selected_index(self):
+        if self.native.value:
+            return int(self.native.value)
+        return None
+
+    def select_item(self, index, item):
+        self.native.value = str(index)
+        self.native.dispatchEvent(CustomEvent.new("sl-change"))
+
+    def rehint(self):
+        pass