Added step-size to SpinBox (#5293)

CHANGELOG.md

@@ -11,6 +11,7 @@ All notable changes to this project are documented in this file.
  - Fixed updating model of ComboBox does not change current-value
  - Fixed set current-index of ComboBox to -1 does not reset current-value
  - Fixed issue where the text of `SpinBox` is not updated after value is changed from outside
+ - Added `step-size` to `SpinBox`
 
 ## [1.6.0] - 2024-05-13
 

docs/reference/src/language/widgets/spinbox.md

@@ -8,6 +8,7 @@
 -   **`value`** (_in-out_ _int_): The value. Defaults to the minimum.
 -   **`minimum`** (_in_ _int_): The minimum value (default: 0).
 -   **`maximum`** (_in_ _int_): The maximum value (default: 100).
+-   **`step-size`** (_in_ _int_): The size that is used on increment or decrement of `value` (default: 1).
 
 ### Callbacks
 

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

@@ -11,6 +11,7 @@ export component SpinBoxBase {
     in property <color> selection-background-color <=> text-input.selection-background-color;
     in property <color> selection-foreground-color <=> text-input.selection-foreground-color;
     in property <TextHorizontalAlignment> horizontal-alignment <=> text-input.horizontal-alignment;
+    in property <int> step-size: 1;
     out property <bool> has-focus <=> text-input.has-focus;
     in-out property <int> value: minimum;
 
@@ -24,11 +25,11 @@ export component SpinBoxBase {
     }
 
     public function increment() {
-        root.update-value(root.value + 1);
+        root.update-value(root.value + root.step-size);
     }
 
     public function decrement() {
-        root.update-value(root.value - 1);
+        root.update-value(root.value - root.step-size);
     }
 
     private property <length> scroll-delta: 2px;

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

@@ -40,6 +40,7 @@ export component SpinBox {
     in property <int> minimum <=> base.minimum;
     in property <int> maximum <=> base.maximum;
     in property <bool> enabled <=> base.enabled;
+    in property <int> step-size <=> base.step-size;
     out property <bool> has-focus <=> base.has-focus;
     in-out property <int> value <=> base.value;
 

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

@@ -6,10 +6,10 @@ import { FocusBorder } from "components.slint";
 import { SpinBoxBase } from "../common/spinbox-base.slint";
 
 component SpinBoxButton {
-    in property <bool> enabled <=> i-touch-area.enabled;
+    in property <bool> enabled <=> touch-area.enabled;
-    in property <image> icon <=> i-icon.source;
+    in property <image> icon <=> icon.source;
 
-    callback clicked <=> i-touch-area.clicked;
+    callback clicked <=> touch-area.clicked;
 
     private property <brush> background: CupertinoPalette.accent-background;
     private property <brush> icon-color: CupertinoPalette.accent-foreground;
@@ -18,11 +18,11 @@ component SpinBoxButton {
     horizontal-stretch: 0;
 
     states [
-        disabled when !i-touch-area.enabled : {
+        disabled when !touch-area.enabled : {
             opacity: 0.5;
             icon-color: CupertinoPalette.foreground-secondary;
         }
-        pressed when i-touch-area.pressed : {
+        pressed when touch-area.pressed : {
             root.background: CupertinoPalette.secondary-accent-background;
         }
     ]
@@ -67,7 +67,7 @@ component SpinBoxButton {
 
         }
 
-        i-icon := Image {
+        icon := Image {
             image-fit: contain;
             colorize: root.icon-color;
             width: 12px;
@@ -76,38 +76,39 @@ component SpinBoxButton {
         }
     }
 
-    i-touch-area := TouchArea {}
+    touch-area := TouchArea {}
 }
 
 export component SpinBox {
-    in property <int> minimum <=> i-base.minimum;
+    in property <int> minimum <=> base.minimum;
-    in property <int> maximum <=> i-base.maximum;
+    in property <int> maximum <=> base.maximum;
-    in property <bool> enabled <=> i-base.enabled;
+    in property <bool> enabled <=> base.enabled;
-    out property <bool> has-focus <=> i-base.has-focus;
+    in property <int> step-size <=> base.step-size;
-    in-out property <int> value <=> i-base.value;
+    out property <bool> has-focus <=> base.has-focus;
+    in-out property <int> value <=> base.value;
 
-    callback edited <=> i-base.edited;
+    callback edited <=> base.edited;
 
     private property <brush> background: CupertinoPalette.control-background;
 
     min-width: 128px;
-    min-height: max(22px, i-layout.min-height);
+    min-height: max(22px, layout.min-height);
     vertical-stretch: 0;
     horizontal-stretch: 1;
-    forward-focus: i-base;
+    forward-focus: base;
 
     accessible-role: spinbox;
     accessible-value: root.value;
     accessible-value-minimum: root.minimum;
     accessible-value-maximum: root.maximum;
     accessible-value-step: (root.maximum - root.minimum) / 100;
-    accessible-action-set-value(v) => { if v.is-float() { i-base.update-value(v.to-float()); } }
+    accessible-action-set-value(v) => { if v.is-float() { base.update-value(v.to-float()); } }
-    accessible-action-increment => { i-base.increment(); }
+    accessible-action-increment => { base.increment(); }
-    accessible-action-decrement => { i-base.decrement(); }
+    accessible-action-decrement => { base.decrement(); }
 
     states [
         disabled when !root.enabled : {
-            i-base.color: CupertinoPalette.foreground-secondary;
+            base.color: CupertinoPalette.foreground-secondary;
             root.background: CupertinoPalette.tertiary-control-background;
         }
     ]
@@ -140,7 +141,7 @@ export component SpinBox {
         }
     }
 
-    i-layout := HorizontalLayout {
+    layout := HorizontalLayout {
         padding-left: 7px;
         padding-right: 2px;
         spacing: 2px;
@@ -149,7 +150,7 @@ export component SpinBox {
             clip: true;
             horizontal-stretch: 1;
 
-            i-base := SpinBoxBase {
+            base := SpinBoxBase {
                 width: 100%;
                 color: CupertinoPalette.foreground;
                 font-size: CupertinoFontSettings.body.font-size;
@@ -165,7 +166,7 @@ export component SpinBox {
             enabled: root.enabled;
 
             clicked => {
-                i-base.increment();
+                base.increment();
             }
         }
 
@@ -175,7 +176,7 @@ export component SpinBox {
             enabled: root.enabled;
 
             clicked => {
-                i-base.decrement();
+                base.decrement();
             }
         }
     }

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

@@ -5,23 +5,23 @@ import { FluentPalette, FluentFontSettings, Icons } from "styling.slint";
 import { SpinBoxBase } from "../common/spinbox-base.slint";
 
 component SpinBoxButton {
-    callback clicked <=> i-touch-area.clicked;
+    callback clicked <=> touch-area.clicked;
 
-    in property <image> icon <=> i-icon.source;
+    in property <image> icon <=> icon.source;
 
     min-width: 28px;
     horizontal-stretch: 0;
 
     states [
-        pressed when i-touch-area.pressed : {
+        pressed when touch-area.pressed : {
-            i-background.background: FluentPalette.subtle;
+            background.background: FluentPalette.subtle;
         }
     ]
 
-    i-background := Rectangle {
+    background := Rectangle {
         border-radius: 3px;
 
-        i-icon := Image {
+        icon := Image {
             image-fit: contain;
             colorize: FluentPalette.text-secondary;
             width: 12px;
@@ -30,55 +30,55 @@ component SpinBoxButton {
         }
     }
 
-    i-touch-area := TouchArea {}
+    touch-area := TouchArea {}
 }
 
 export component SpinBox {
-    in property <int> minimum <=> i-base.minimum;
+    in property <int> minimum <=> base.minimum;
-    in property <int> maximum <=> i-base.maximum;
+    in property <int> maximum <=> base.maximum;
-    in property <bool> enabled <=> i-base.enabled;
+    in property <bool> enabled <=> base.enabled;
-    out property <bool> has-focus <=> i-base.has-focus;
+    in property <int> step-size <=> base.step-size;
-    in-out property <int> value <=> i-base.value;
+    out property <bool> has-focus <=> base.has-focus;
+    in-out property <int> value <=> base.value;
 
-    callback edited <=> i-base.edited;
+    callback edited <=> base.edited;
 
     min-width: 128px;
     min-height: 30px;
     vertical-stretch: 0;
     horizontal-stretch: 1;
-    forward-focus: i-base;
+    forward-focus: base;
 
     accessible-role: spinbox;
     accessible-value: root.value;
     accessible-value-minimum: root.minimum;
     accessible-value-maximum: root.maximum;
     accessible-value-step: (root.maximum - root.minimum) / 100;
-    accessible-action-set-value(v) => { if v.is-float() { i-base.update-value(v.to-float()); } }
+    accessible-action-set-value(v) => { if v.is-float() { base.update-value(v.to-float()); } }
-    accessible-action-increment => { i-base.increment(); }
+    accessible-action-increment => { base.increment(); }
-    accessible-action-decrement => { i-base.decrement(); }
+    accessible-action-decrement => { base.decrement(); }
-
 
     states [
         disabled when !root.enabled : {
-            i-background.background: FluentPalette.control-disabled;
+            background.background: FluentPalette.control-disabled;
-            i-background.border-color: FluentPalette.border;
+            background.border-color: FluentPalette.border;
-            i-base.color: FluentPalette.text-disabled;
+            base.color: FluentPalette.text-disabled;
-            i-base.selection-foreground-color: FluentPalette.text-accent-foreground-disabled;
+            base.selection-foreground-color: FluentPalette.text-accent-foreground-disabled;
         }
         focused when root.has-focus : {
-            i-background.background: FluentPalette.control-input-active;
+            background.background: FluentPalette.control-input-active;
-            i-background.border-color: FluentPalette.border;
+            background.border-color: FluentPalette.border;
-            i-focus-border.background: FluentPalette.accent-background;
+            focus-border.background: FluentPalette.accent-background;
         }
     ]
 
-    i-background := Rectangle {
+    background := Rectangle {
         border-radius: 4px;
         background: FluentPalette.control-background;
         border-width: 1px;
         border-color: FluentPalette.text-control-border;
 
-        i-layout := HorizontalLayout {
+        layout := HorizontalLayout {
             padding-left: 12px;
             padding-right: 2px;
             padding-top: 4px;
@@ -89,7 +89,7 @@ export component SpinBox {
                 clip: true;
                 horizontal-stretch: 1;
 
-                i-base := SpinBoxBase {
+                base := SpinBoxBase {
                     width: 100%;
                     color: FluentPalette.control-foreground;
                     font-size: FluentFontSettings.body.font-size;
@@ -104,7 +104,7 @@ export component SpinBox {
                 icon: Icons.chevron-up;
 
                 clicked => {
-                    i-base.increment();
+                    base.increment();
                 }
             }
 
@@ -113,12 +113,12 @@ export component SpinBox {
                 icon: Icons.chevron-down;
 
                 clicked => {
-                    i-base.decrement();
+                    base.decrement();
                 }
             }
         }
 
-        i-focus-border := Rectangle {
+        focus-border := Rectangle {
             x: parent.border-radius;
             y: parent.height - self.height;
             width: parent.width - 2 * parent.border-radius;

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

@@ -5,44 +5,44 @@ import { MaterialPalette, MaterialFontSettings, Icons } from "styling.slint";
 import { SpinBoxBase } from "../common/spinbox-base.slint";
 
 component SpinBoxButton inherits Rectangle {
-    in-out property <bool> pressed: self.enabled && i-touch-area.pressed;
+    in-out property <bool> pressed: self.enabled && touch-area.pressed;
-    in-out property <bool> enabled <=> i-touch-area.enabled;
+    in-out property <bool> enabled <=> touch-area.enabled;
     in-out property <float> icon-opacity: 1;
     in-out property <brush> icon-fill: MaterialPalette.accent-foreground;
 
-    callback clicked <=> i-touch-area.clicked;
+    callback clicked <=> touch-area.clicked;
 
     width: root.height;
 
     states [
         disabled when !root.enabled : {
-            i-background.background: MaterialPalette.control-foreground;
+            background.background: MaterialPalette.control-foreground;
-            i-background.opacity: 0.12;
+            background.opacity: 0.12;
             icon-opacity: 0.38;
             icon-fill: MaterialPalette.control-foreground;
         }
-        pressed when i-touch-area.pressed : {
+        pressed when touch-area.pressed : {
-            i-state-layer.opacity: 0.12;
+            state-layer.opacity: 0.12;
         }
-        hover when i-touch-area.has-hover : {
+        hover when touch-area.has-hover : {
-            i-state-layer.opacity: 0.08;
+            state-layer.opacity: 0.08;
         }
     ]
 
-    i-background := Rectangle {
+    background := Rectangle {
         width: 100%;
         height: 100%;
         border-radius: max(self.width, self.height) / 2;
         background: MaterialPalette.accent-background;
     }
 
-    i-state-layer := Rectangle {
+    state-layer := Rectangle {
         x: 0;
         y: 0;
         opacity: 0;
-        width: i-background.width;
+        width: background.width;
-        height: i-background.height;
+        height: background.height;
-        border-radius: i-background.border-radius;
+        border-radius: background.border-radius;
         background: MaterialPalette.accent-foreground;
 
         animate opacity { duration: 250ms; easing: ease; }
@@ -55,53 +55,54 @@ component SpinBoxButton inherits Rectangle {
         @children
     }
 
-    i-touch-area := TouchArea { }
+    touch-area := TouchArea { }
 }
 
 // Increment and decrement a value in the given range.
 export component SpinBox {
-    in property <int> minimum <=> i-base.minimum;
+    in property <int> minimum <=> base.minimum;
-    in property <int> maximum <=> i-base.maximum;
+    in property <int> maximum <=> base.maximum;
-    in property <bool> enabled <=> i-base.enabled;
+    in property <bool> enabled <=> base.enabled;
-    out property <bool> has-focus <=> i-base.has-focus;
+    in property <int> step-size <=> base.step-size;
-    in-out property <int> value <=> i-base.value;
+    out property <bool> has-focus <=> base.has-focus;
+    in-out property <int> value <=> base.value;
 
-    callback edited <=> i-base.edited;
+    callback edited <=> base.edited;
 
-    forward-focus: i-base;
+    forward-focus: base;
     horizontal-stretch: 1;
     vertical-stretch: 0;
-    min-width: i-layout.min-width;
+    min-width: layout.min-width;
-    min-height: max(56px, i-layout.min-height);
+    min-height: max(56px, layout.min-height);
 
     accessible-role: spinbox;
     accessible-value: root.value;
     accessible-value-minimum: root.minimum;
     accessible-value-maximum: root.maximum;
     accessible-value-step: (root.maximum - root.minimum) / 100;
-    accessible-action-set-value(v) => { if v.is-float() { i-base.update-value(v.to-float()); } }
+    accessible-action-set-value(v) => { if v.is-float() { base.update-value(v.to-float()); } }
-    accessible-action-increment => { i-base.increment(); }
+    accessible-action-increment => { base.increment(); }
-    accessible-action-decrement => { i-base.decrement(); }
+    accessible-action-decrement => { base.decrement(); }
 
     states [
         disabled when !root.enabled : {
-            i-background.border-color: MaterialPalette.control-foreground;
+            background.border-color: MaterialPalette.control-foreground;
-            i-background.opacity: 0.38;
+            background.opacity: 0.38;
-            i-base.opacity: 0.38;
+            base.opacity: 0.38;
         }
         focused when root.has-focus : {
-            i-background.border-width: 2px;
+            background.border-width: 2px;
-            i-background.border-color: MaterialPalette.accent-background;
+            background.border-color: MaterialPalette.accent-background;
-            i-base.color: MaterialPalette.accent-background;
+            base.color: MaterialPalette.accent-background;
         }
     ]
 
-    i-background := Rectangle {
+    background := Rectangle {
         border-radius: 4px;
         border-width: 1px;
         border-color: MaterialPalette.border;
 
-        i-layout := HorizontalLayout {
+        layout := HorizontalLayout {
             padding-top: 8px;
             padding-bottom: 8px;
             padding-left: 16px;
@@ -112,7 +113,7 @@ export component SpinBox {
                 clip: true;
                 horizontal-stretch: 1;
 
-                i-base := SpinBoxBase {
+                base := SpinBoxBase {
                     width: 100%;
                     color: MaterialPalette.control-foreground;
                     font-size: MaterialFontSettings.body-large.font-size;
@@ -135,7 +136,7 @@ export component SpinBox {
                     }
 
                     clicked => {
-                        i-base.increment();
+                        base.increment();
                     }
                 }
 
@@ -151,7 +152,7 @@ export component SpinBox {
                     }
 
                     clicked => {
-                        i-base.decrement();
+                        base.decrement();
                     }
                 }
             }

internal/compiler/widgets/qt/spinbox.slint

@@ -2,6 +2,8 @@
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-commercial
 
 export component SpinBox inherits NativeSpinBox {
+    in property <int> step-size: 1;
+    
     value: root.minimum;
     accessible-role: spinbox;
     accessible-value: root.value;
@@ -10,8 +12,16 @@ export component SpinBox inherits NativeSpinBox {
     accessible-value-step: (root.maximum - root.minimum) / 100;
 
     accessible-action-set-value(v) => { if v.is-float() {update-value(v.to-float());} }
-    accessible-action-increment => { update-value(root.value + 1); }
+    accessible-action-increment => { root.increment(); }
-    accessible-action-decrement => { update-value(root.value - 1); }
+    accessible-action-decrement => { root.decrement(); }
+    
+    function increment() {
+        root.update-value(root.value + root.step-size);
+    }
+
+    function decrement() {
+        root.update-value(root.value - root.step-size);
+    }
 
     function update-value(value: int) {
         if (value >= root.minimum && value <= root.maximum) {
@@ -19,4 +29,4 @@ export component SpinBox inherits NativeSpinBox {
             root.edited(value);
         }
     }
-}
+}

tests/cases/widgets/spinbox_basic.slint

@@ -14,6 +14,7 @@ export component TestCase inherits Window {
     out property <bool> spinbox-focused <=> box.has_focus;
     callback edited <=> box.edited;
     in-out property value <=> box.value;
+    in property <int> step-size <=> box.step-size;
 }
 
 /*
@@ -63,6 +64,18 @@ assert_eq!(instance.get_value(), 40);
 assert_eq!(&*edits.borrow(), &[40]);
 edits.borrow_mut().clear();
 
+// step size
+instance.set_step_size(2);
+
+instance.window().dispatch_event(WindowEvent::PointerScrolled { position , delta_x: 0.0, delta_y: 50.0 });
+assert_eq!(instance.get_value(), 42);
+assert_eq!(&*edits.borrow(), &[42]);
+edits.borrow_mut().clear();
+
+instance.window().dispatch_event(WindowEvent::PointerScrolled { position , delta_x: 0.0, delta_y: -10.0 });
+assert_eq!(instance.get_value(), 40);
+assert_eq!(&*edits.borrow(), &[40]);
+edits.borrow_mut().clear();
 
 instance.set_value(0);
 // scroll down should do nothing when the value is 0
@@ -79,7 +92,6 @@ let text_input = text_input_search.next().unwrap();
 assert_eq!(text_input.accessible_value().unwrap(), "30");
 edits.borrow_mut().clear();
 
-
 ```