TabWidget: Add orientation property to TabWidget

internal/compiler/builtins.slint

@@ -534,6 +534,7 @@ component Tab {
 // Note: not a native class, handled in the lower_tabs pass
 export component TabWidget {
     in-out property <int> current-index;
+    in property <Orientation> orientation;
 
     //-disallow_global_types_as_child_elements
     Tab { }

internal/compiler/passes/lower_tabwidget.rs

@@ -30,10 +30,14 @@ pub async fn lower_tabwidget(
         .import_component("std-widgets.slint", "TabImpl", &mut build_diags_to_ignore)
         .await
         .expect("can't load TabImpl from std-widgets.slint");
-    let tabbar_impl = type_loader
-        .import_component("std-widgets.slint", "TabBarImpl", &mut build_diags_to_ignore)
+    let tabbar_horizontal_impl = type_loader
+        .import_component("std-widgets.slint", "TabBarHorizontalImpl", &mut build_diags_to_ignore)
         .await
-        .expect("can't load TabBarImpl from std-widgets.slint");
+        .expect("can't load TabBarHorizontalImpl from std-widgets.slint");
+    let tabbar_vertical_impl = type_loader
+        .import_component("std-widgets.slint", "TabBarVerticalImpl", &mut build_diags_to_ignore)
+        .await
+        .expect("can't load TabBarVerticalImpl from std-widgets.slint");
     let empty_type = type_loader.global_type_registry.borrow().empty_type();
 
     doc.visit_all_used_components(|component| {
@@ -43,7 +47,8 @@ pub async fn lower_tabwidget(
                     elem,
                     ElementType::Component(tabwidget_impl.clone()),
                     ElementType::Component(tab_impl.clone()),
-                    ElementType::Component(tabbar_impl.clone()),
+                    ElementType::Component(tabbar_horizontal_impl.clone()),
+                    ElementType::Component(tabbar_vertical_impl.clone()),
                     &empty_type,
                     diag,
                 );
@@ -56,7 +61,8 @@ fn process_tabwidget(
     elem: &ElementRc,
     tabwidget_impl: ElementType,
     tab_impl: ElementType,
-    tabbar_impl: ElementType,
+    tabbar_horizontal_impl: ElementType,
+    tabbar_vertical_impl: ElementType,
     empty_type: &ElementType,
     diag: &mut BuildDiagnostics,
 ) {
@@ -175,6 +181,21 @@ fn process_tabwidget(
         tabs.push(Element::make_rc(tab));
     }
 
+    let mut tabbar_impl = tabbar_horizontal_impl;
+    if let Some(orientation) = elem.borrow().bindings.get("orientation") {
+        if let Expression::EnumerationValue(val) =
+            super::ignore_debug_hooks(&orientation.borrow().expression)
+        {
+            if val.value == 1 {
+                tabbar_impl = tabbar_vertical_impl;
+            }
+        } else {
+            diag.push_error(
+                "The orientation property only supports constants at the moment".into(),
+                &orientation.borrow().span,
+            );
+        }
+    }
     let tabbar = Element {
         id: format_smolstr!("{}-tabbar", elem.borrow().id),
         base_type: tabbar_impl,

internal/compiler/typeregister.rs

@@ -566,6 +566,15 @@ impl TypeRegister {
             _ => unreachable!(),
         };
 
+        match &mut register.elements.get_mut("TabWidget").unwrap() {
+            ElementType::Builtin(b) => {
+                let tabwidget = Rc::get_mut(b).unwrap();
+                tabwidget.properties.get_mut("orientation").unwrap().property_visibility =
+                    PropertyVisibility::Constexpr;
+            }
+            _ => unreachable!(),
+        }
+
         register
     }
 

internal/compiler/widgets/material/std-widgets.slint

@@ -7,7 +7,7 @@ export { AboutSlint } from "../common/about-slint.slint";
 export { StandardButton } from "../common/standardbutton.slint";
 export { StyleMetrics, ScrollView, Button, CheckBox, Palette  } from "std-widgets-impl.slint";
 export { LineEdit } from "lineedit.slint";
-export { TabWidgetImpl, TabImpl, TabBarImpl, TabWidget } from "tabwidget.slint";
+export { TabWidgetImpl, TabImpl, TabBarHorizontalImpl,TabBarVerticalImpl, TabWidget } from "tabwidget.slint";
 export { GroupBox } from "groupbox.slint";
 export { VerticalBox, HorizontalBox, GridBox } from "../common/layout.slint";
 export { Slider } from "slider.slint";

internal/compiler/widgets/material/tabwidget.slint

@@ -12,14 +12,15 @@ export component TabWidgetImpl inherits Rectangle {
     in property <length> content-min-width;
     in property <int> current-index;
     in property <int> current-focused;
-    out property <length> content-x: 0;
-    out property <length> content-y: root.tabbar-preferred-height;
-    out property <length> content-height: root.height - root.tabbar-preferred-height;
-    out property <length> content-width: root.width;
+    in property <Orientation> orientation: Orientation.horizontal;
+    out property <length> content-x: orientation==Orientation.horizontal?0:root.tabbar-preferred-width;
+    out property <length> content-y: orientation==Orientation.horizontal?root.tabbar-preferred-height:0;
+    out property <length> content-height: orientation==Orientation.horizontal?root.height - root.tabbar-preferred-height:root.height;
+    out property <length> content-width: orientation==Orientation.horizontal?root.width:root.width - root.tabbar-preferred-width;
     out property <length> tabbar-x: 0;
     out property <length> tabbar-y: 0;
-    out property <length> tabbar-height: root.tabbar-preferred-height;
-    out property <length> tabbar-width: root.width;
+    out property <length> tabbar-height: orientation==Orientation.horizontal?root.tabbar-preferred-height:root.height;
+    out property <length> tabbar-width: orientation==Orientation.horizontal?root.width:root.tabbar-preferred-width;
 
     preferred-width: root.content-min-width;
     min-width: max(root.content-min-width, root.tabbar-preferred-width);
@@ -112,7 +113,7 @@ export component TabImpl inherits Rectangle {
     }
 }
 
-export component TabBarImpl inherits TabBarBase {
+component MaterialTabBarBase inherits TabBarBase {
     // injected properties:
     // The currently focused tab
     in-out property <int> current-focused: focus-scope.has-focus ? focus-scope.focused-tab : -1;
@@ -121,11 +122,7 @@ export component TabBarImpl inherits TabBarBase {
     accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current;
     accessible-item-count: root.num-tabs;
 
-    Flickable {
-        HorizontalLayout {
-            @children
-        }
-    }
+
 
     focus-scope := FocusScope {
         property <int> focused-tab: 0;
@@ -160,4 +157,20 @@ export component TabBarImpl inherits TabBarBase {
     }
 }
 
+export component TabBarHorizontalImpl inherits MaterialTabBarBase {
+    Flickable {
+        HorizontalLayout {
+            @children
+        }
+    }
+}
+
+export component TabBarVerticalImpl inherits MaterialTabBarBase {
+    Flickable {
+        VerticalLayout {
+            @children
+        }
+    }
+}
+
 export component TabWidget inherits TabWidget { }