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

import { Colors, Spacing, Type } from "../tokens/theme.slint";
import { Sizes } from "../tokens/sizes.slint";
import { TableColumn } from "data-table-types.slint";

// DataTableRow — a single data row with cells matching column widths.
/// D at at ab le ro w component.
export component DataTableRow inherits Rectangle {
    /// Input property "cells".
    in property <[string]>       cells;
    /// Input property "columns".
    in property <[TableColumn]>  columns;
    /// Input property "is-selected".
    in property <bool>           is-selected: false;
    /// Input property "is-alternate".
    in property <bool>           is-alternate: false;
    /// Callback fired for c li ck ed.
    callback clicked();

    /// Private property "fallback-col-width" used internally.
    private property <length> fallback-col-width: 100px;

    height: Spacing.xl;
    background: root.is-selected ? Colors.accent :
                root.is-alternate ? Colors.bg-elevated : Colors.bg-surface;

    // Bottom border
    Rectangle {
        y: parent.height - Sizes.border-w;
        height: Sizes.border-w;
        width: parent.width;
        background: Colors.border;
    }

    HorizontalLayout {
        for cell[j] in root.cells: Rectangle {
            width: j < root.columns.length ? root.columns[j].width : root.fallback-col-width;
            height: parent.height;

            Text {
                x: Spacing.sm;
                text: cell;
                font-size: Type.body-size;
                color: root.is-selected
                    ? Colors.accent-text : Colors.text-primary;
                vertical-alignment: center;
                overflow: elide;
            }
        }
    }

    row-ta := TouchArea {
        clicked => { root.clicked(); }
    }
}