From c4cc2adc690f0fe815e690e7de584d1fc6448525 Mon Sep 17 00:00:00 2001 From: akbor Date: Tue, 29 Aug 2023 00:13:26 +1000 Subject: [PATCH 1/5] allow any input type logic --- src/st_keyup/frontend/main.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/st_keyup/frontend/main.js b/src/st_keyup/frontend/main.js index 16a1e82..8b6024e 100644 --- a/src/st_keyup/frontend/main.js +++ b/src/st_keyup/frontend/main.js @@ -45,9 +45,11 @@ function onRender(event) { if (type == "password") { input.type = "password" + }else if(type == "text"){ + input.type = "text" } else { - input.type = "text" + input.type = type } if (max_chars) { From 3327d7589deaf3c279c6b20eb803b104d22c6bc3 Mon Sep 17 00:00:00 2001 From: akbor Date: Wed, 30 Aug 2023 23:33:42 +1000 Subject: [PATCH 2/5] add support for darkmode --- src/st_keyup/frontend/style.css | 78 +++++++++++++++++++++++++++------ 1 file changed, 64 insertions(+), 14 deletions(-) diff --git a/src/st_keyup/frontend/style.css b/src/st_keyup/frontend/style.css index 1756324..21d5c8a 100644 --- a/src/st_keyup/frontend/style.css +++ b/src/st_keyup/frontend/style.css @@ -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%; @@ -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%; @@ -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%; @@ -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; @@ -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; +} \ No newline at end of file From f28a511a22dab9ce1ec105c2c98bf48bb5cce79a Mon Sep 17 00:00:00 2001 From: akbor Date: Wed, 30 Aug 2023 23:37:11 +1000 Subject: [PATCH 3/5] updated the type supports #16 --- src/st_keyup/frontend/main.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/st_keyup/frontend/main.js b/src/st_keyup/frontend/main.js index 8b6024e..560c6f2 100644 --- a/src/st_keyup/frontend/main.js +++ b/src/st_keyup/frontend/main.js @@ -43,13 +43,19 @@ function onRender(event) { input.value = value } - if (type == "password") { - input.type = "password" - }else if(type == "text"){ - input.type = "text" + if(type == "password"){ + text_input.type = "password" } - else { - input.type = type + else if (type == "phone" || type == "tel") { + text_input.type = "tel" + } + else if (type == "email"){ + text_input.type = "email" + } + else if (type =="number"){ + text_input.type = "number" + }else{ + text_input.type = "text" } if (max_chars) { From a81d6af39b7be66978ec9143faa3614839527521 Mon Sep 17 00:00:00 2001 From: akbor Date: Wed, 30 Aug 2023 23:42:35 +1000 Subject: [PATCH 4/5] fixed a typo --- src/st_keyup/frontend/main.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/st_keyup/frontend/main.js b/src/st_keyup/frontend/main.js index 560c6f2..a2e3e7a 100644 --- a/src/st_keyup/frontend/main.js +++ b/src/st_keyup/frontend/main.js @@ -44,18 +44,18 @@ function onRender(event) { } if(type == "password"){ - text_input.type = "password" + input.type = "password" } else if (type == "phone" || type == "tel") { - text_input.type = "tel" + input.type = "tel" } else if (type == "email"){ - text_input.type = "email" + input.type = "email" } else if (type =="number"){ - text_input.type = "number" + input.type = "number" }else{ - text_input.type = "text" + input.type = "text" } if (max_chars) { From 4530a78df92be648ba867b52d1a4f3b0333fe2c0 Mon Sep 17 00:00:00 2001 From: akbor Date: Thu, 31 Aug 2023 19:40:19 +1000 Subject: [PATCH 5/5] updated the docstring to reflect changes --- src/st_keyup/__init__.py | 58 ++++++++++++++++++++++++++++++++-------- 1 file changed, 47 insertions(+), 11 deletions(-) diff --git a/src/st_keyup/__init__.py b/src/st_keyup/__init__.py index 0ece9bc..22dadbf 100644 --- a/src/st_keyup/__init__.py +++ b/src/st_keyup/__init__.py @@ -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, @@ -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