inkopslista/inköpslista-gui/ui/app.slint

import { AboutSlint, Button, VerticalBox, ListView, CheckBox, HorizontalBox, TextEdit, GridBox } from "std-widgets.slint";

component GoodsList {
    in property <[string]> items: ["Mjölk", "Ost", "Ägg"];
    ListView {
        for item in items: Rectangle {
            HorizontalBox {
                CheckBox {}
                Text {
                    text: item;
                }
            } 
        }
    }
}


component GoodButtons {
    in property <[string]> favorites: ["Mjölk", "Ost", "Ägg", "Bullens", "Oboy", "Mjöl", "Havregryn", "KrosTom"];
    in property <int> button-width: 100;
    in property <int> button-height: 60;
    in property <int> button-spacing: 10;
    height: 200px;
    property <int> count_x: root.width / 1px / (button-width + button-spacing);
    Rectangle {
        for item[idx] in favorites: Button {
            x: mod(idx, count_x) * (root.button-width + root.button-spacing) * 1px ; 
            y: floor(idx / count_x)  * (root.button-height + root.button-spacing) * 1px;
            width: root.button-width * 1px; 
            height: root.button-height * 1px;
            text: item;
        }
    }
}

export component App inherits Window {
    VerticalBox {
        goods:= GoodsList {

            height: 200px;
        }
        input:= TextEdit {
            height:50px;
        }
        Button {
            height: 42px;
            text: "Add";
            clicked => {
                goods.items[goods.items.length] = input.text;
            }
        }
        GoodButtons {
            
        }
    }
}