Skip to content

allow any input type #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
akbor wants to merge 7 commits into
base: main
Choose a base branch
from
Open

allow any input type #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c4cc2ad
allow any input type logic
akbor Aug 28, 2023
3327d75
add support for darkmode
akbor Aug 30, 2023
f28a511
updated the type supports #16
akbor Aug 30, 2023
a81d6af
fixed a typo
akbor Aug 30, 2023
4530a78
updated the docstring to reflect changes
akbor Aug 31, 2023
49a6f24
Merge branch 'main' into main
blackary Sep 19, 2023
c6d0b57
Merge branch 'main' into main
blackary Sep 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 47 additions & 11 deletions src/st_keyup/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ def st_keyup(
value: str = "",
max_chars: Optional[int] = None,
key: Optional[str] = None,
type: str = "default",
type: str = "text",
debounce: Optional[int] = None,
on_change: Optional[Callable] = None,
args: Optional[Tuple[Any, ...]] = None,
Expand All @@ -22,23 +22,59 @@ def st_keyup(
placeholder: str = "",
disabled: bool = False,
label_visibility: str = "visible",
):
"""
Generate a text input that renders on keyup, debouncing the input by the
)-> str:
r"""Generate a text input that renders on keyup, debouncing the input by the
specified amount of milliseconds.

Debounce means that it will wait at least the specified amount of milliseconds
before updating the value. This is useful for preventing excessive updates
when the user is typing. Since the input updating will cause the app to rerun,
if you are having performance issues, you should consider setting a debounce
value.

on_change is a callback function that will be called when the value changes.

args and kwargs are optional arguments which are passed to the on_change callback
function
"""

Parameters
----------
label : str
A short label explaining to the user what this input is for.
value : object
The text value of this widget when it first renders. This will be
cast to str internally.
max_chars : int or None
Max number of characters allowed in text input.
key : str or int
An optional string or integer to use as the unique key for the widget.
If this is omitted, a key will be generated for the widget
based on its content. Multiple widgets of the same type may
not share the same key.
type : str
The type of the text input. This can be any of these following types in the list below.
If no value is passed, it defaults to "text".
["password", ("tel" or "phone"), "email", "number", "text"]
debounce: int
An optional int in miliseconds that will wait that amount of time before updating.
on_change : callable
An optional callback invoked when this text input's value changes.
args : tuple
An optional tuple of args to pass to the callback.
kwargs : dict
An optional dict of kwargs to pass to the callback.
placeholder : str or None
An optional string displayed when the text input is empty. If None,
no text is displayed. This argument can only be supplied by keyword.
disabled : bool
An optional boolean, which disables the text input if set to True.
The default is False. This argument can only be supplied by keyword.
label_visibility : "visible", "hidden", or "collapsed"
The visibility of the label. If "hidden", the label doesn't show but there
is still empty space for it above the widget (equivalent to label="").
If "collapsed", both the label and the space are removed. Default is
"visible". This argument can only be supplied by keyword.

Returns
-------
str
The current keyup values of the text input widget.
"""
if key is None:
key = "st_keyup_" + label

Expand Down
12 changes: 10 additions & 2 deletions src/st_keyup/frontend/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,18 @@ function onRender(event) {
input.value = value
}

if (type == "password") {
if(type == "password"){
input.type = "password"
}
else {
else if (type == "phone" || type == "tel") {
input.type = "tel"
}
else if (type == "email"){
input.type = "email"
}
else if (type =="number"){
input.type = "number"
}else{
input.type = "text"
}

Expand Down
78 changes: 64 additions & 14 deletions src/st_keyup/frontend/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@ label {
font-size: 13px;
font-weight: normal;
line-height: 1.6;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
border-top-left-radius: 0.45rem;
border-top-right-radius: 0.45rem;
border-bottom-right-radius: 0.45rem;
border-bottom-left-radius: 0.45rem;
transition-duration: 200ms;
display: flex;
width: 100%;
Expand All @@ -54,10 +54,11 @@ label {
border-bottom-color: rgb(240, 242, 246);
background-color: rgb(240, 242, 246);
position: absolute;

left: 0;
right: 0;
bottom: 0;
top: 33px;
top: 30px;
}
input {
text-size-adjust: 100%;
Expand All @@ -84,12 +85,16 @@ input {
max-width: 100%;
cursor: text;
margin: 0px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 14px;
padding-right: 14px;
caret-color: rgb(49, 51, 63);
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
min-width: 0px;
caret-color: auto;
}
.input:focus-within {
text-size-adjust: 100%;
Expand All @@ -100,11 +105,15 @@ input {
font-size: 1rem;
font-weight: normal;
line-height: 1.6;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
border-top-left-radius: 0.45rem;
border-top-right-radius: 0.45rem;
border-bottom-right-radius: 0.45rem;
border-bottom-left-radius: 0.45rem;
transition-duration: 200ms;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
display: flex;
width: 100%;
box-sizing: border-box;
Expand Down Expand Up @@ -147,3 +156,44 @@ input {
.label-collapsed .input {
top: 0 !important;
}
@media (prefers-color-scheme: dark) {
label {
color: rgb(250, 250, 250);
}
.input {
border-left-color: rgb(38, 39, 48);
border-right-color: rgb(38, 39, 48);
border-top-color: rgb(38, 39, 48);
border-bottom-color: rgb(38, 39, 48);
background-color: rgb(38, 39, 48);
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
}

input {
color: rgb(255, 255, 255);
caret-color: auto;
}
.input:focus-within {
border-left-color: rgb(255,75, 75);
border-right-color: rgb(255,75, 75);
border-top-color: rgb(255,75, 75);
border-bottom-color: rgb(255,75, 75);
background-color: rgb(38, 39, 48);
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
}
.disabled label {
color: rgba(206, 204, 192, 0.4) !important;
}
.disabled input {
color: rgba(206, 204, 192, 0.4) !important;
}
}
.st-bx {
background-color: transparent;
}