mirror of
https://github.com/slint-ui/slint.git
synced 2025-09-28 12:54:45 +00:00
c428601370
In the compiler this is still very primitive, but an attempt to start a generic interface. The basic assumption is that all item functions will eventually need access to the window adapter and itemrc. Support for additional arguments is still missing. Also missing is support for the function access via rtti in the interpreter, hence the hardcoding at the moment.
106 lines
3.4 KiB
Text
106 lines
3.4 KiB
Text
// Copyright © SixtyFPS GmbH <info@slint-ui.com>
|
|
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
|
|
|
|
|
|
import { md } from "md.slint";
|
|
|
|
// Single line text input field with Material Design Outline TextField look and feel.
|
|
export component LineEdit {
|
|
in property <length> font-size <=> input.font-size;
|
|
in-out property <string> text <=> input.text;
|
|
in property <string> placeholder-text <=> placeholder.text;
|
|
out property <bool> has-focus: input.has-focus;
|
|
in property <bool> enabled <=> input.enabled;
|
|
in property input-type <=> input.input-type;
|
|
in property horizontal-alignment <=> input.horizontal-alignment;
|
|
in property read-only <=> input.read-only;
|
|
callback accepted(string);
|
|
callback edited(string);
|
|
|
|
public function select-all() {
|
|
input.select-all();
|
|
}
|
|
public function cut() {
|
|
input.cut();
|
|
}
|
|
public function copy() {
|
|
input.copy();
|
|
}
|
|
public function paste() {
|
|
input.paste();
|
|
}
|
|
|
|
min-width: 120px;
|
|
height: 56px;
|
|
forward-focus: input;
|
|
|
|
container := Rectangle {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
border-width: 1px;
|
|
border-color: md.sys.color.outline;
|
|
}
|
|
|
|
layout := HorizontalLayout {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
|
|
Rectangle {
|
|
clip: true;
|
|
|
|
placeholder := Text {
|
|
width: 100%;
|
|
height: 100%;
|
|
color: md.sys.color.outline-variant;
|
|
font-size: md.sys.typescale.body-large.size;
|
|
font-weight: md.sys.typescale.body-large.weight;
|
|
visible: false;
|
|
vertical-alignment: center;
|
|
|
|
states [
|
|
empty when input.text == "" : {
|
|
visible: true;
|
|
}
|
|
]
|
|
}
|
|
|
|
input := TextInput {
|
|
property <length> computed_x;
|
|
property <length> padding-outer: layout.padding-left + layout.padding-right;
|
|
|
|
x: min(0px, max(parent.width - self.width, self.computed_x));
|
|
width: max(parent.width, self.preferred-width);
|
|
height: 100%;
|
|
color: md.sys.color.on-surface;
|
|
vertical-alignment: center;
|
|
font-size: md.sys.typescale.body-large.size;
|
|
font-weight: md.sys.typescale.body-large.weight;
|
|
|
|
accepted => { root.accepted(self.text); }
|
|
edited => { root.edited(self.text); }
|
|
cursor-position-changed(cpos) => {
|
|
if (cpos.x + self.computed_x < self.padding-outer) {
|
|
self.computed_x = - cpos.x + self.padding-outer;
|
|
} else if (cpos.x + self.computed_x > parent.width - self.padding-outer) {
|
|
self.computed_x = parent.width - cpos.x - self.padding-outer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
states [
|
|
disabled when !root.enabled : {
|
|
container.border-color: md.sys.color.on-surface;
|
|
container.opacity: 0.38;
|
|
input.opacity: 0.38;
|
|
placeholder.opacity: 0.38;
|
|
}
|
|
focused when root.has-focus : {
|
|
container.border-width: 2px;
|
|
container.border-color: md.sys.color.primary;
|
|
input.color: md.sys.color.primary;
|
|
}
|
|
]
|
|
}
|