Allow scrolling through tabs for all backends

This allows the user to use the scroll wheel to scroll through the tabs.
In order to do this I have made created a common TabBarBase and let all
other implementations of TabBar* inherit from it. I also used slint-lsp
to format the files (it did not like the inline comments).

internal/compiler/widgets/common/tabwidget-base.slint

@@ -0,0 +1,35 @@
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial
+
+export component TabBarBase inherits TouchArea {
+    // injected properties:
+    // The currently selected tab
+    in-out property <int> current;
+    // The total number of tabs
+    in-out property <int> num-tabs;
+
+    // Returns the index of the previous tab
+    protected pure function previous-tab() -> int {
+        return Math.max(root.current - 1,  0);
+    }
+
+    // Returns the index of the next tab
+    protected pure function next-tab() -> int {
+        return Math.min(root.current + 1, root.num-tabs - 1);
+    }
+
+    private property <length> scroll-delta: 2px;
+
+    // Allows scrolling through the tabs
+    scroll-event(event) => {
+        if (event.delta-y < -root.scroll-delta) {
+            root.current = next-tab();
+            return accept;
+        }
+        if (event.delta-y > -root.scroll-delta) {
+            root.current = previous-tab();
+            return accept;
+        }
+        reject
+    }
+}

internal/compiler/widgets/cosmic-base/tabwidget.slint

@@ -3,6 +3,7 @@
 
 import { CosmicPalette, CosmicFontSettings } from "styling.slint";
 import { StateLayerBase } from "components.slint";
+import { TabBarBase } from "../common/tabwidget-base.slint";
 
 export component TabWidgetImpl inherits Rectangle {
     in property <length> tabbar-preferred-height;
@@ -27,13 +28,17 @@ export component TabWidgetImpl inherits Rectangle {
 }
 
 export component TabImpl inherits Rectangle {
-    in property <int> current-focused; // The currently focused tab
+    // The currently focused tab
-    in property <int> tab-index; // The index of this tab
+    in property <int> current-focused;
-    in property <int> num-tabs; // The total number of tabs
+    // The index of this tab
+    in property <int> tab-index;
+    // The total number of tabs
+    in property <int> num-tabs;
     in property <string> title <=> text.text;
     in property <bool> enabled: true;
     out property <bool> has-focus: root.current-focused == root.tab-index;
-    in-out property <int> current; // The currently selected tab
+    // The currently selected tab
+    in-out property <int> current;
 
     private property <bool> show-left-border: root.tab-index == 0 || root.is-current;
     private property <bool> show-right-border: root.current != root.tab-index + 1;
@@ -126,11 +131,10 @@ export component TabImpl inherits Rectangle {
     }
 }
 
-export component TabBarImpl {
+export component TabBarImpl inherits TabBarBase {
     // injected properties:
-    in-out property <int> current; // The currently selected tab
+    // The currently focused tab
-    in-out property <int> current-focused: focus-scope.has-focus ? focus-scope.focused-tab : -1; // The currently focused tab
+    in-out property <int> current-focused: focus-scope.has-focus ? focus-scope.focused-tab : -1;
-    in-out property <int> num-tabs; // The total number of tabs
 
     accessible-role: tab-list;
     accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current;
@@ -150,7 +154,8 @@ export component TabBarImpl {
         property <int> focused-tab: 0;
 
         x: 0;
-        width: 0px; // Do not react on clicks
+        // Do not react on clicks
+        width: 0px;
 
         key-pressed(event) => {
             if (event.text == "\n") {

internal/compiler/widgets/cupertino-base/tabwidget.slint

@@ -3,6 +3,7 @@
 
 import { CupertinoPalette, CupertinoFontSettings } from "styling.slint";
 import { FocusBorder } from "components.slint";
+import { TabBarBase } from "../common/tabwidget-base.slint";
 
 export component TabWidgetImpl inherits Rectangle {
     in property <length> tabbar-preferred-height;
@@ -27,13 +28,17 @@ export component TabWidgetImpl inherits Rectangle {
 }
 
 export component TabImpl inherits Rectangle {
-    in property <int> current-focused; // The currently focused tab
+    // The currently focused tab
-    in property <int> tab-index; // The index of this tab
+    in property <int> current-focused;
-    in property <int> num-tabs; // The total number of tabs
+    // The index of this tab
+    in property <int> tab-index;
+    // The total number of tabs
+    in property <int> num-tabs;
     in property <string> title <=> i-text.text;
     in property <bool> enabled: true;
     out property <bool> has-focus: root.current-focused == root.tab-index;
-    in-out property <int> current; // The currently selected tab
+    // The currently selected tab
+    in-out property <int> current;
 
     private property <bool> hide-right-border: root.tab-index == root.num-tabs - 1 || tab-index + 1 == current;
     private property <bool> is-current: root.tab-index == root.current;
@@ -48,8 +53,7 @@ export component TabImpl inherits Rectangle {
     if (root.is-current || i-touch-area.pressed): Rectangle {
         width: 100%;
         height: 100%;
-        background: i-touch-area.pressed ? CupertinoPalette.secondary-control-background :
+        background: i-touch-area.pressed ? CupertinoPalette.secondary-control-background : CupertinoPalette.control-background;
-            CupertinoPalette.control-background;
         border-radius: 5px;
         drop-shadow-blur: 0.25px;
         drop-shadow-color: #0000001f;
@@ -57,7 +61,10 @@ export component TabImpl inherits Rectangle {
         border-width: 1px;
         border-color: CupertinoPalette.decent-border;
 
-        animate background { duration: 75ms; easing: linear; }
+        animate background {
+            duration: 75ms;
+            easing: linear;
+        }
     }
 
     if (!root.is-current && root.tab-index < root.num-tabs - 1): Rectangle {
@@ -90,16 +97,14 @@ export component TabImpl inherits Rectangle {
     }
 }
 
-export component TabBarImpl {
+export component TabBarImpl inherits TabBarBase {
     // injected properties:
-    in-out property <int> current; // The currently selected tab
+    // The currently focused tab
-    in-out property <int> current-focused: i-focus-scope.has-focus ? i-focus-scope.focused-tab : -1; // The currently focused tab
+    in-out property <int> current-focused: i-focus-scope.has-focus ? i-focus-scope.focused-tab : -1;
-    in-out property <int> num-tabs; // The total number of tabs
 
     accessible-role: tab-list;
     accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current;
 
-
     Rectangle {
         border-radius: 7px;
         border-color: CupertinoPalette.bar-border;
@@ -128,7 +133,8 @@ export component TabBarImpl {
         property <int> focused-tab: 0;
 
         x: 0;
-        width: 0px; // Do not react on clicks
+        // Do not react on clicks
+        width: 0px;
 
         key-pressed(event) => {
             if (event.text == "\n") {

internal/compiler/widgets/fluent-base/tabwidget.slint

@@ -3,6 +3,7 @@
 
 import { FluentPalette, FluentFontSettings } from "styling.slint";
 import { FocusBorder } from "components.slint";
+import { TabBarBase } from "../common/tabwidget-base.slint";
 
 export component TabWidgetImpl inherits Rectangle {
     in property <length> tabbar-preferred-height;
@@ -27,13 +28,17 @@ export component TabWidgetImpl inherits Rectangle {
 }
 
 export component TabImpl inherits Rectangle {
-    in property <int> current-focused; // The currently focused tab
+    // The currently focused tab
-    in property <int> tab-index; // The index of this tab
+    in property <int> current-focused;
-    in property <int> num-tabs; // The total number of tabs
+    // The index of this tab
+    in property <int> tab-index;
+    // The total number of tabs
+    in property <int> num-tabs;
     in property <string> title <=> i-text.text;
     in property <bool> enabled: true;
     out property <bool> has-focus: root.current-focused == root.tab-index;
-    in-out property <int> current; // The currently selected tab
+    // The currently selected tab
+    in-out property <int> current;
 
     private property <bool> hide-right-border: root.tab-index == root.num-tabs - 1 || tab-index + 1 == current;
     private property <bool> is-current: root.tab-index == root.current;
@@ -57,8 +62,7 @@ export component TabImpl inherits Rectangle {
             border-radius: 7px;
             border-width: root.is-current ? 1px : 0px;
             border-color: FluentPalette.card-stroke;
-            background: i-touch-area.pressed || root.is-current ? FluentPalette.layer-on-mica-base-alt :
+            background: i-touch-area.pressed || root.is-current ? FluentPalette.layer-on-mica-base-alt : i-touch-area.has-hover ? FluentPalette.layer-on-mica-base-alt-secondary : transparent;
-                i-touch-area.has-hover ? FluentPalette.layer-on-mica-base-alt-secondary : transparent;
         }
     }
 
@@ -103,11 +107,10 @@ export component TabImpl inherits Rectangle {
     }
 }
 
-export component TabBarImpl {
+export component TabBarImpl inherits TabBarBase {
     // injected properties:
-    in-out property <int> current; // The currently selected tab
+    // The currently focused tab
-    in-out property <int> current-focused: i-focus-scope.has-focus ? i-focus-scope.focused-tab : -1; // The currently focused tab
+    in-out property <int> current-focused: i-focus-scope.has-focus ? i-focus-scope.focused-tab : -1;
-    in-out property <int> num-tabs; // The total number of tabs
 
     HorizontalLayout {
         alignment: start;
@@ -122,7 +125,8 @@ export component TabBarImpl {
         property <int> focused-tab: 0;
 
         x: 0;
-        width: 0px; // Do not react on clicks
+        // Do not react on clicks
+        width: 0px;
 
         key-pressed(event) => {
             if (event.text == "\n") {

internal/compiler/widgets/material-base/tabwidget.slint

@@ -3,6 +3,7 @@
 
 
 import { MaterialPalette, MaterialFontSettings } from "styling.slint";
+import { TabBarBase } from "../common/tabwidget-base.slint";
 
 export component TabWidgetImpl inherits Rectangle {
     in property <length> tabbar-preferred-height;
@@ -27,12 +28,16 @@ export component TabWidgetImpl inherits Rectangle {
 }
 
 export component TabImpl inherits Rectangle {
-    in property <int> current-focused; // The currently focused tab
+    // The currently focused tab
-    in property <int> tab-index; // The index of this tab
+    in property <int> current-focused;
-    in property <int> num-tabs; // The total number of tabs
+    // The index of this tab
+    in property <int> tab-index;
+    // The total number of tabs
+    in property <int> num-tabs;
     in property <string> title <=> i-text.text;
     in property <bool> enabled: true;
-    in-out property <int> current; // The currently selected tab
+    // The currently selected tab
+    in-out property <int> current;
 
     private property <bool> has-focus: root.current-focused == root.tab-index;
     private property <bool> active: root.tab-index == root.current;
@@ -52,7 +57,10 @@ export component TabImpl inherits Rectangle {
         border-radius: i-container.border-radius;
         background: MaterialPalette.accent-background;
 
-        animate opacity { duration: 250ms; easing: ease; }
+        animate opacity {
+            duration: 250ms;
+            easing: ease;
+        }
     }
 
     i-layout := HorizontalLayout {
@@ -67,7 +75,10 @@ export component TabImpl inherits Rectangle {
             font-size: MaterialFontSettings.title-small.font-size;
             font-weight: MaterialFontSettings.title-small.font-weight;
 
-            animate color { duration: 250ms; easing: ease; }
+            animate color {
+                duration: 250ms;
+                easing: ease;
+            }
         }
     }
 
@@ -78,7 +89,10 @@ export component TabImpl inherits Rectangle {
         y: parent.height - self.height;
         background: MaterialPalette.accent-background;
 
-        animate opacity { duration: 250ms; easing: ease; }
+        animate opacity {
+            duration: 250ms;
+            easing: ease;
+        }
     }
 
     i-touch-area := TouchArea {
@@ -90,11 +104,10 @@ export component TabImpl inherits Rectangle {
     }
 }
 
-export component TabBarImpl {
+export component TabBarImpl inherits TabBarBase {
     // injected properties:
-    in-out property <int> current; // The currently selected tab
+    // The currently focused tab
-    in-out property <int> current-focused: i-focus-scope.has-focus ? i-focus-scope.focused-tab : -1; // The currently focused tab
+    in-out property <int> current-focused: i-focus-scope.has-focus ? i-focus-scope.focused-tab : -1;
-    in-out property <int> num-tabs; // The total number of tabs
 
     accessible-role: tab-list;
     accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current;
@@ -109,7 +122,8 @@ export component TabBarImpl {
         property <int> focused-tab: 0;
 
         x: 0;
-        width: 0; // Do not react on clicks
+        // Do not react on clicks
+        width: 0;
 
         key-pressed(event) => {
             if (event.text == "\n") {
@@ -137,5 +151,4 @@ export component TabBarImpl {
     }
 }
 
-
 export component TabWidget inherits TabWidget { }

internal/compiler/widgets/qt/tabwidget.slint

@@ -1,6 +1,8 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial
 
+import { TabBarBase } from "../common/tabwidget-base.slint";
+
 export component TabWidgetImpl inherits NativeTabWidget { }
 
 export component TabImpl inherits NativeTab {
@@ -8,20 +10,21 @@ export component TabImpl inherits NativeTab {
     accessible-label <=> root.title;
 }
 
-export component TabBarImpl {
+export component TabBarImpl inherits TabBarBase {
     // injected properties:
-    in-out property <int> current; // The currently selected tab
+    // The currently focused tab
-    in-out property <int> current-focused: i-focus-scope.has-focus ? root.current : -1; // The currently focused tab
+    in-out property <int> current-focused: i-focus-scope.has-focus ? root.current : -1;
-    in-out property <int> num-tabs; // The total number of tabs
 
     accessible-role: tab-list;
     accessible-delegate-focus: root.current;
 
     Rectangle {
-        clip: true; // The breeze style draws outside of the tab bar, which is clip by default with Qt
+        // The breeze style draws outside of the tab bar, which is clip by default with Qt
+        clip: true;
 
         HorizontalLayout {
-            spacing: 0px; // Qt renders Tabs next to each other and renders "spacing" as part of the tab itself
+            // Qt renders Tabs next to each other and renders "spacing" as part of the tab itself
+            spacing: 0px;
             alignment: NativeStyleMetrics.tab-bar-alignment;
             @children
         }
@@ -29,15 +32,16 @@ export component TabBarImpl {
 
     i-focus-scope := FocusScope {
         x: 0;
-        width: 0px; // Do not react on clicks
+        // Do not react on clicks
+        width: 0px;
 
         key-pressed(event) => {
             if (event.text == Key.LeftArrow) {
-                 root.current = Math.max(root.current - 1,  0);
+                root.current = root.previous-tab();
                 return accept;
             }
             if (event.text == Key.RightArrow) {
-                 root.current = Math.min(root.current + 1, root.num-tabs - 1);
+                root.current = root.next-tab();
                 return accept;
             }
             return reject;