inital commit

doc/gui/examples/controls/number-step.py

@@ -0,0 +1,25 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+value = 50
+
+page = """
+<|{value}|number|>
+"""
+
+Gui(page).run()
+

frontend/taipy-gui/src/components/Taipy/Input.tsx

@@ -11,13 +11,13 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import React, { useState, useEffect, useCallback, useRef, KeyboardEvent } from "react";
+import React, {useState, useEffect, useCallback, useRef, KeyboardEvent} from "react";
 import TextField from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
 
-import { createSendActionNameAction, createSendUpdateAction } from "../../context/taipyReducers";
-import { TaipyInputProps } from "./utils";
-import { useClassNames, useDispatch, useDynamicProperty, useModule } from "../../utils/hooks";
+import {createSendActionNameAction, createSendUpdateAction} from "../../context/taipyReducers";
+import {TaipyInputProps} from "./utils";
+import {useClassNames, useDispatch, useDynamicProperty, useModule} from "../../utils/hooks";
 
 const AUTHORIZED_KEYS = ["Enter", "Escape", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12"];
 
@@ -25,9 +25,9 @@ const getActionKeys = (keys?: string): string[] => {
     const ak = (
         keys
             ? keys
-                  .split(";")
-                  .map((v) => v.trim().toLowerCase())
-                  .filter((v) => AUTHORIZED_KEYS.some((k) => k.toLowerCase() === v))
+                .split(";")
+                .map((v) => v.trim().toLowerCase())
+                .filter((v) => AUTHORIZED_KEYS.some((k) => k.toLowerCase() === v))
             : []
     ).map((v) => AUTHORIZED_KEYS.find((k) => k.toLowerCase() == v) as string);
     return ak.length > 0 ? ak : [AUTHORIZED_KEYS[0]];
@@ -79,6 +79,12 @@ const Input = (props: TaipyInputProps) => {
 
     const handleAction = useCallback(
         (evt: KeyboardEvent<HTMLDivElement>) => {
+            if (evt.shiftKey && evt.key === 'ArrowUp') {
+                setValue(((Number(evt.currentTarget.querySelector("input")?.value || 0) + (props.step || 1) * (props.stepMultiplier || 10) - (props.step || 1)).toString()));
+            }
+            if (evt.shiftKey && evt.key === 'ArrowDown') {
+                setValue(((Number(evt.currentTarget.querySelector("input")?.value || 0) - (props.step || 1) * (props.stepMultiplier || 10) + (props.step || 1)).toString()));
+            }
             if (!evt.shiftKey && !evt.ctrlKey && !evt.altKey && actionKeys.includes(evt.key)) {
                 const val = evt.currentTarget.querySelector("input")?.value;
                 if (changeDelay > 0 && delayCall.current > 0) {
@@ -92,7 +98,7 @@ const Input = (props: TaipyInputProps) => {
                 evt.preventDefault();
             }
         },
-        [actionKeys, updateVarName, onAction, id, dispatch, onChange, changeDelay, propagate, module]
+        [actionKeys, props.step, props.stepMultiplier, changeDelay, onAction, dispatch, id, module, updateVarName, onChange, propagate]
     );
 
     useEffect(() => {
@@ -106,12 +112,16 @@ const Input = (props: TaipyInputProps) => {
             <TextField
                 margin="dense"
                 hiddenLabel
-                value={value ?? ""}
+                value={value}
                 className={className}
                 type={type}
                 id={id}
+                inputProps={{
+                    step: props.step ? props.step : 1,
+                }}
                 label={props.label}
                 onChange={handleInput}
+                onClick={handleClick}
                 disabled={!active}
                 onKeyDown={handleAction}
                 multiline={multiline}

frontend/taipy-gui/src/components/Taipy/utils.ts

@@ -48,6 +48,8 @@ export interface TaipyInputProps extends TaipyActiveProps, TaipyChangeProps, Tai
     type: string;
     value: string;
     defaultValue?: string;
+    step?: number;
+    stepMultiplier?: number;
     changeDelay?: number;
     onAction?: string;
     actionKeys?: string;

taipy/gui/_renderers/factory.py

@@ -386,6 +386,8 @@ class _Factory:
         .set_attributes(
             [
                 ("active", PropertyType.dynamic_boolean, True),
+                ("step", PropertyType.number),
+                ("step_multiplier", PropertyType.number),
                 ("hover_text", PropertyType.dynamic_string),
                 ("on_change", PropertyType.function),
                 ("on_action", PropertyType.function),