bropicker/example/todo.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

import {
    SpinBox,
    Button,
    CheckBox,
    Slider,
    LineEdit,
    ScrollView,
    ListView,
    HorizontalBox,
    VerticalBox,
    GridBox,
    StandardButton,
    Palette,
} from "std-widgets.slint";

@rust-attr(derive(serde::Serialize, serde::Deserialize))
export struct TodoItem  {
    title: string,
    checked: bool,
}

export component MainWindow inherits Window {
    in property <[TodoItem]> todo-model: [
        { title: "Implement the .slint file", checked: true },
        { title: "Do the Rust part", checked: false },
        { title: "Make the C++ code", checked: false },
        { title: "Write some JavaScript code", checked: false },
        { title: "Test the application", checked: false },
        { title: "Ship to customer", checked: false },
        { title: "???", checked: false },
        { title: "Profit", checked: false },
    ];

    in property <bool> show-header: false;
    in-out property <bool> is-sort-by-name: false;
    in-out property <bool> hide-done-items: false;

    callback todo-added(string);
    callback remove-done();
    callback popup_confirmed;
    callback show_confirm_popup;
    callback apply_sorting_and_filtering();

    show_confirm_popup => {
        confirm_popup.show();
    }

    preferred-width: 400px;
    preferred-height: 600px;

    confirm_popup := PopupWindow {
        x: 40px;
        y: 100px;
        width: min(confirm_popup_layout.preferred-width, root.width - 80px);

        Rectangle {
            background: Palette.background;
            border-color: Palette.border;
            border-width: 1px;
        }

        confirm_popup_layout := Dialog {
            height: 100%;
            width: 100%;
            background: transparent;

            confirm_popup_text := Text {
                text: "Some items are not done, are you sure you wish to quit?";
                wrap: word-wrap;
            }

            StandardButton {
                kind: yes;
                clicked => {
                    root.popup_confirmed();
                }
            }

            StandardButton {
                kind: no;
            }
        }
    }

    VerticalBox {
        x: root.safe-area-insets.left;
        y: root.safe-area-insets.top;
        width: root.width - root.safe-area-insets.right - root.safe-area-insets.left;
        height: root.height - root.safe-area-insets.bottom - root.safe-area-insets.top;

        HorizontalBox {
            padding: 0px;
            text-edit := LineEdit {
                accepted(text) => {
                    root.todo-added(self.text);
                    self.text = "";
                }

                placeholder-text: "What needs to be done?";
            }

            btn := Button {
                clicked => {
                    root.todo-added(text-edit.text);
                    text-edit.text = "";
                }

                text: "Add New Entry";
                enabled: text-edit.text != "";
            }
        }

        if (root.show-header): HorizontalBox {
            padding: 0px;
            alignment: start;

            CheckBox {
                toggled => {
                    root.apply_sorting_and_filtering();
                }

                text: "Sort by name";
                checked <=> root.is-sort-by-name;
            }

            CheckBox {
                toggled => {
                    root.apply_sorting_and_filtering();
                }

                text: "Hide done items";
                checked <=> root.hide-done-items;
            }
        }

        list-view := ListView {
            for todo in root.todo-model: HorizontalLayout {
                CheckBox {
                    text: todo.title;
                    // checked <=> todo.checked;
                }
            }
        }

        HorizontalBox {
            padding: 0px;
            alignment: end;

            Button {
                clicked => {
                    root.remove-done();
                }

                text: "Remove Done Items";
            }
        }
    }
}