slint-ui-system 0.5.0

Neon Design System — Slint UI components for Rust desktop apps. 35+ components, dark/light theme, neon accents.
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

import { LineEdit, TextEdit } from "std-widgets.slint";
import { Theme } from "../theme.slint";

export component NeonInput {
    in-out property <string> text;
    in property <string> placeholder: "";
    in property <string> label: "";
    in property <string> hint: "";
    in property <bool> has-error: false;
    in property <bool> enabled: true;
    in property <bool> has-focus: false;

    forward-focus: input;

    VerticalLayout {
        spacing: Theme.sp-1;
        if (root.label != "") : Text {
            text: root.label;
            font-size: Theme.font-sm;
            color: root.enabled ? Theme.text-muted : Theme.text-dim;
        }
        Rectangle {
            min-height: 36px;
            background: root.enabled ? Theme.bg-surface : Theme.bg-elevated;
            border-radius: Theme.radius-md;
            border-width: 1px;
            border-color: root.has-error ? Theme.neon-red :
                          root.has-focus ? Theme.border-focus :
                          Theme.border;
            opacity: root.enabled ? 1.0 : 0.4;
            HorizontalLayout {
                padding-left: Theme.sp-3;
                padding-right: Theme.sp-3;
                alignment: start;
                input := LineEdit {
                    text <=> root.text;
                    placeholder-text: root.placeholder;
                    font-size: Theme.font-base;
                    horizontal-stretch: 1;
                    enabled: root.enabled;
                }
            }
        }
        if (root.hint != "") : Text {
            text: root.hint;
            font-size: Theme.font-xs;
            color: root.has-error ? Theme.neon-red : (root.enabled ? Theme.text-dim : Theme.text-dim);
        }
    }
}

export component NeonSearchInput {
    in-out property <string> text;
    in property <string> placeholder: "Search…";
    in property <string> label: "";
    in property <string> hint: "";
    in property <bool> has-error: false;
    in property <bool> enabled: true;
    in property <bool> has-focus: false;

    NeonInput {
        text <=> root.text;
        placeholder: root.placeholder;
        label: root.label;
        hint: root.hint;
        has-error: root.has-error;
        enabled: root.enabled;
        has-focus: root.has-focus;
    }
}

export component NeonTextArea {
    in-out property <string> text;
    in property <string> placeholder: "";
    in property <string> label: "";
    in property <string> hint: "";
    in property <bool> has-error: false;
    in property <bool> enabled: true;
    in property <bool> has-focus: false;

    VerticalLayout {
        spacing: Theme.sp-1;
        if (root.label != "") : Text {
            text: root.label;
            font-size: Theme.font-sm;
            color: root.enabled ? Theme.text-muted : Theme.text-dim;
        }
        Rectangle {
            min-height: 80px;
            background: root.enabled ? Theme.bg-surface : Theme.bg-elevated;
            border-radius: Theme.radius-md;
            border-width: 1px;
            border-color: root.has-error ? Theme.neon-red :
                          root.has-focus ? Theme.border-focus :
                          Theme.border;
            opacity: root.enabled ? 1.0 : 0.4;
            TextEdit {
                text <=> root.text;
                font-size: Theme.font-base;
                padding: Theme.sp-2;
                vertical-stretch: 1;
                enabled: root.enabled;
            }
        }
        if (root.hint != "") : Text {
            text: root.hint;
            font-size: Theme.font-xs;
            color: root.has-error ? Theme.neon-red : Theme.text-dim;
        }
    }
}