slint/internal/compiler/widgets/qt/combobox.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

import { ComboBoxBase } from "../common/combobox-base.slint";
import { ScrollView } from "./scrollview.slint";

export component ComboBox {
    in property <[string]> model <=> base.model;
    in property <bool> enabled <=> base.enabled;
    out property <bool> has-focus <=> base.has-focus;
    in-out property <int> current-index <=> base.current-index;
    in-out property <string> current-value <=> base.current-value;

    callback selected <=> base.selected;

    accessible-role: combobox;
    accessible-enabled: root.enabled;
    accessible-expandable: true;
    accessible-expanded: base.popup-has-focus;
    accessible-value <=> root.current-value;
    accessible-action-expand => {
        base.show-popup();
    }
    forward-focus: base;

    HorizontalLayout {
        native := NativeComboBox {
            current-value <=> root.current-value;
            has-focus <=> root.has-focus;
            enabled <=> root.enabled;
        }
    }

    base := ComboBoxBase {
        width: 100%;
        height: 100%;
        show-popup => {
            if model.length <= 6 {
                small-popup.show();
            } else {
                big-popup.show();
            }
        }
        close-popup => {
            small-popup.close();
            big-popup.close();
        }
    }

    big-popup := PopupWindow {
        x: 0;
        y: root.height;
        width: root.width;
        // Try to hardcode about the size of 6 items
        height: 6 * 2rem;
        forward-focus: inner-fs;

        NativeComboBoxPopup {
            width: 100%;
            height: 100%;
        }

        inner-fs := FocusScope {
            focus-changed-event => {
                base.popup-has-focus = self.has-focus;
            }
            key-pressed(event) => {
                return base.popup-key-handler(event);
            }

            ScrollView {
                VerticalLayout {
                    alignment: start;

                    for value[index] in root.model: NativeStandardListViewItem {
                        item: { text: value };
                        is-selected: root.current-index == index;
                        has-hover: ta2.has-hover;
                        combobox: true;

                        ta2 := TouchArea {
                            clicked => {
                                base.select(index);
                            }
                        }
                    }
                }
            }
        }
    }

    small-popup := PopupWindow {
        x: 0;
        y: root.height;
        width: root.width;
        NativeComboBoxPopup {
            width: 100%;
            height: 100%;
        }

        FocusScope {
            init => {
                self.focus();
                base.popup-has-focus = true;
            }
            changed has-focus => {
                base.popup-has-focus = self.has-focus;
            }
            key-pressed(event) => {
                return base.popup-key-handler(event);
            }

            VerticalLayout {

                for value[index] in root.model: NativeStandardListViewItem {
                    item: { text: value };
                    is-selected: root.current-index == index;
                    has-hover: ta.has-hover;
                    combobox: true;

                    ta := TouchArea {
                        clicked => {
                            base.select(index);
                        }
                    }
                }
            }
        }
    }

}