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

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0

export component SpinBoxBase {
    in property <int> minimum;
    in property <int> maximum: 100;
    in property <bool> enabled: true;
    in property <brush> color <=> text-input.color;
    in property <length> font-size <=> text-input.font-size;
    in property <int> font-weight <=> text-input.font-weight;
    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;

    callback edited(value: int);

    public function update-value(value: int) {
        if root.value == value || (value >= root.minimum && value <= root.maximum) {
            root.value = value;
            root.edited(value);
        }
    }

    public function increment() {
        root.update-value(root.value + root.step-size);
    }

    public function decrement() {
        root.update-value(root.value - root.step-size);
    }

    private property <length> scroll-delta: 2px;

    forward-focus: text-input;

    changed value => {
        root.set-text-to-value();
    }

    function set-text-to-value() {
        text-input.text = root.value;
    }

    TouchArea {
        enabled: root.enabled;

        scroll-event(event) => {
            if event.delta-y > 0 {
                root.increment();
                return accept;
            }

            if event.delta-y < 0 {
                root.decrement();
                return accept;
            }

            reject
        }
    }

    text-input := TextInput {
        vertical-alignment: center;
        horizontal-alignment: left;
        text: root.value;
        enabled: root.enabled;
        width: 100%;
        height: 100%;

        // Disable TextInput's built-in accessibility support as the widget takes care of that.
        accessible-role: none;

        accepted => {
            if !self.text.is-float() {
                root.set-text-to-value();
            }
        }

        edited => {
            if self.text.is-float() && self.text.to-float() != root.value {
                root.update-value(self.text.to-float());
            } else if !self.text.is-float() && self.text != "" {
                root.set-text-to-value();
            }
        }
    }
}