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

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

component GoodListItem inherits Rectangle {
    in property <string> name: "Mjölk";
    in-out property <bool> checked: false;
    background: #ffffff10;
    border-radius: 8pt;
    border-width: 10pt;
    HorizontalBox {
        check := CheckBox {
            checked <=> root.checked;
        }
        Text {
            opacity: (checked ? 0.5 : 1.0);
            font-size: 12pt;
            text: name;
        }
    }
    input := TouchArea {
        clicked => {
            checked = !checked;
        }
    }
}

component GoodsList {
    in property <[string]> items: ["Mjölk", "Ost", "Ägg"];
    ListView {
        for item in items: VerticalLayout {
            GoodListItem {
                name: item;
            }
            Rectangle {
                height: 4pt;
            }
        }
    }
}

component GoodButtons inherits ScrollView {
    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;

    property <int> count-x: floor(root.width / 1pt / (button-width + button-spacing));
    property <int> count-y: ceil(favorites.length / count-x);

    viewport-height: (count-y * (button-height + button-spacing)) * 1pt;

    for item[idx] in favorites: Button {
        x: floor(mod(idx, count-x)) * (root.button-width + root.button-spacing) * 1pt ; 
        y: floor(idx / count-x)  * (root.button-height + root.button-spacing) * 1pt;
        width: root.button-width * 1pt; 
        height: root.button-height * 1pt;
        text: item;
    }
}

component AddView inherits VerticalBox {
    goods:= GoodsList {
    }
    HorizontalLayout {
        height: 50pt;
        input:= TextEdit {
        }
        Rectangle {
            width: 4pt; // spacing
        }
        Button {
            width: self.height;
            text: "+";
            clicked => {
                goods.items[goods.items.length] = input.text;
            }
        }
    }
    GoodButtons {

    }
}

component ShopView inherits VerticalBox {
    goods := GoodsList {}
    Button {
        text: "I am done hehe";
    }
}

export component App inherits Window {
    TabWidget {
        Tab {
            title: "Add";
            AddView {}
        }   
        Tab {
            title: "Shop";
            ShopView {}
        }   
    }
}