75 lines
2.2 KiB
Plaintext
75 lines
2.2 KiB
Plaintext
// Input Component
|
|
// Text input field with focus states and optional icons
|
|
|
|
import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";
|
|
import { Animations } from "../utils/animations.slint";
|
|
|
|
export component Input {
|
|
// Public properties
|
|
in-out property <string> value: "";
|
|
in property <string> placeholder: "";
|
|
in property <bool> disabled: false;
|
|
in property <bool> error: false;
|
|
|
|
// Callbacks
|
|
callback edited(string);
|
|
callback accepted(string);
|
|
|
|
// Internal state
|
|
private property <bool> focused: false;
|
|
|
|
min-height: 40px;
|
|
|
|
// Main container
|
|
Rectangle {
|
|
background: Theme.colors.background;
|
|
border-radius: SpacingSystem.radius.md;
|
|
border-width: 1px;
|
|
border-color: error ? Theme.colors.destructive :
|
|
focused ? Theme.colors.ring :
|
|
Theme.colors.input;
|
|
|
|
// Smooth border color transition
|
|
animate border-color {
|
|
duration: Animations.durations.fast;
|
|
easing: Animations.ease-in-out;
|
|
}
|
|
|
|
HorizontalLayout {
|
|
padding: SpacingSystem.spacing.s2;
|
|
spacing: SpacingSystem.spacing.s2;
|
|
|
|
// Text input field
|
|
input-field := TextInput {
|
|
text <=> value;
|
|
enabled: !disabled;
|
|
font-size: Typography.sizes.base;
|
|
color: Theme.colors.foreground;
|
|
selection-background-color: Theme.colors.primary;
|
|
selection-foreground-color: Theme.colors.primary-foreground;
|
|
|
|
edited => {
|
|
root.edited(self.text);
|
|
}
|
|
|
|
accepted => {
|
|
root.accepted(self.text);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Focus detection
|
|
FocusScope {
|
|
key-pressed(event) => {
|
|
focused = input-field.has-focus;
|
|
return accept;
|
|
}
|
|
|
|
key-released(event) => {
|
|
focused = input-field.has-focus;
|
|
return accept;
|
|
}
|
|
}
|
|
}
|
|
}
|