allow passing ui.tab objects into ui.tab_panel

setting default value on ui.tab_panels does not work yet

nicegui/elements/tabs.py

@@ -1,4 +1,4 @@
-from typing import Any, Callable, Optional
+from typing import Any, Callable, Optional, Union
 
 from .. import globals
 from .mixins.disableable_element import DisableableElement
@@ -20,7 +20,11 @@ class Tabs(ValueElement):
         :param on_change: callback to be executed when the selected tab changes
         """
         super().__init__(tag='q-tabs', value=value, on_value_change=on_change)
-        self.panels: Optional[TabPanels] = None
+
+    def on_value_change(self, value: Any) -> None:
+        if isinstance(value, Tab):
+            value = value._props['name']
+        super().on_value_change(value)
 
 
 class Tab(DisableableElement):
@@ -68,13 +72,13 @@ class TabPanels(ValueElement):
 
 class TabPanel(DisableableElement):
 
-    def __init__(self, name: str) -> None:
+    def __init__(self, name: Union[Tab, str]) -> None:
         """Tab Panel
 
         This element represents `Quasar's QTabPanel <https://quasar.dev/vue-components/tab-panels#qtabpanel-api>`_ component.
         It is a child of a `TabPanels` element.
 
-        :param name: name of the tab panel (the value of the `TabPanels` element)
+        :param name: a `ui.tab` object or the name of a `ui.tab` element as str
         """
         super().__init__(tag='q-tab-panel')
-        self._props['name'] = name
+        self._props['name'] = name if isinstance(name, str) else name._props['name']

tests/test_tabs.py

@@ -3,12 +3,12 @@ from nicegui import ui
 from .screen import Screen
 
 
-def test_tabs(screen: Screen):
+def test_with_strings(screen: Screen):
     with ui.tabs() as tabs:
         ui.tab('One')
         ui.tab('Two')
 
-    with ui.tab_panels(tabs, value='One'):
+    with ui.tab_panels(tabs, value='One') as panels:
         with ui.tab_panel('One'):
             ui.label('First tab')
         with ui.tab_panel('Two'):
@@ -18,3 +18,23 @@ def test_tabs(screen: Screen):
     screen.should_contain('First tab')
     screen.click('Two')
     screen.should_contain('Second tab')
+
+
+def test_with_tab_objects(screen: Screen):
+    with ui.tabs() as tabs:
+        tab1 = ui.tab('One')
+        tab2 = ui.tab('Two')
+
+    with ui.tab_panels(tabs, value=tab2):
+        with ui.tab_panel(tab1):
+            ui.label('First tab')
+        with ui.tab_panel(tab2):
+            ui.label('Second tab')
+
+    screen.open('/')
+    screen.should_contain('One')
+    screen.should_contain('Two')
+    # TODO initial value selects tab but does not show its content
+    # screen.should_contain('Second tab')
+    screen.click('One')
+    screen.should_contain('First tab')