mirror/rio
1
0
Fork 0
mirror of https://github.com/rio-labs/rio.git synced 2026-01-21 21:10:20 -06:00
Code Issues Packages Projects Releases Wiki Activity

more work on input box styles

Browse Source
This commit is contained in:
Jakob Pinterits
2024-09-26 23:03:26 +02:00
parent 95185e4cd1
commit 73d0958db9
2 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/code/components/textInput.ts
View File

@@ -1,6 +1,6 @@
import { ComponentBase, ComponentState } from "./componentBase";
import { Debouncer } from "../debouncer";
import { InputBox } from "../inputBox";
import { InputBox, InputBoxStyle } from "../inputBox";
import { markEventAsHandled } from "../eventHandling";
export type TextInputState = ComponentState & {
@@ -8,7 +8,7 @@ export type TextInputState = ComponentState & {
text?: string;
label?: string;
accessibility_label?: string;
style?: "rectangular" | "pill";
style?: InputBoxStyle;
prefix_text?: string;
suffix_text?: string;
is_secret?: boolean;
@@ -159,14 +159,7 @@ export class TextInputComponent extends ComponentBase {
deltaState.style = "rectangular";
if (deltaState.style !== undefined) {
this.element.classList.remove(
"rio-input-box-style-rectangle",
"rio-input-box-style-pill"
);
this.element.classList.add(
`rio-input-box-style-${this.state.style}`
);
this.inputBox.style = deltaState.style;
}
}

17
frontend/code/inputBox.ts
View File

@@ -1,5 +1,6 @@
import { markEventAsHandled, stopPropagation } from "./eventHandling";
import { createUniqueId } from "./utils";
export type InputBoxStyle = "rectangular" | "pill";
/// A text input field providing the following features and more:
///
@@ -33,7 +34,10 @@ export class InputBox {
connectClickHandlers?: boolean;
} = {}) {
this.outerElement = document.createElement("div");
this.outerElement.classList.add("rio-input-box");
this.outerElement.classList.add(
"rio-input-box",
"rio-input-box-style-rectangular"
);
this.outerElement.innerHTML = `
<div class="rio-input-box-padding"></div>
@@ -229,6 +233,15 @@ export class InputBox {
}
}
set style(style: InputBoxStyle) {
this.outerElement.classList.remove(
"rio-input-box-style-rectangular",
"rio-input-box-style-pill"
);
this.outerElement.classList.add(`rio-input-box-style-${style}`);
}
get isSensitive(): boolean {
return !this._inputElement.disabled;
}