slint-ui-templates 0.1.0

Composable Slint UI building blocks — mother-child pattern, token-driven
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

import { Colors }    from "../tokens/theme.slint";
import { Variants }  from "../globals/Variants.slint";
import { DragHandle } from "DragHandle.slint";
import { PanelSlot }  from "PanelSlot.slint";

// Flat model item — Rust computes all geometry, Slint renders.
// x, y, w, h are normalized 0.0..1.0 fractions of container size.
/// P an el it em struct.
export struct PanelItem {
    id:       int,
    kind:     string,   // Variants.panel | Variants.handle-h | Variants.handle-v
    label:    string,
    x: float, y: float,
    w: float, h: float,
}

// Renders a flat [PanelItem] model as absolutely-positioned elements.
// Mother (AppWindow) owns the model and all panel state.
// Drag events go back to mother via panel-dragged callback.
/// P an el co nt ai ne r component.
export component PanelContainer inherits Rectangle {
    /// Input property "panels".
    in property <[PanelItem]> panels;

    /// Callback fired for p an el d ra gg ed.
    callback panel-dragged(int, float, float);   // id, dx, dy in logical px

    // Width and height set by parent (layout or explicit sizing)
    background: Colors.bg-primary;
    clip: true;

    for item in root.panels: Rectangle {
        x: item.x * root.width;
        y: item.y * root.height;
        width:  item.w * root.width;
        height: item.h * root.height;

        if item.kind == Variants.panel: PanelSlot {
            panel-id: item.id;
            label:    item.label;
            width:    parent.width;
            height:   parent.height;
        }

        if item.kind == Variants.handle-h: DragHandle {
            vertical: false;
            width:    parent.width;
            height:   parent.height;
            dragged(dx, dy) => { root.panel-dragged(item.id, dx, dy); }
        }

        if item.kind == Variants.handle-v: DragHandle {
            vertical: true;
            width:    parent.width;
            height:   parent.height;
            dragged(dx, dy) => { root.panel-dragged(item.id, dx, dy); }
        }
    }
}