run on enter for various components (#188)

Co-authored-by: Red-Giuliano <red.giuliano@zero-true.com>

zt_backend/models/components/number_input.py

@@ -6,13 +6,14 @@
 class NumberInput(ZTComponent):
     """Number input allows a user to input an arbitrary number. Can be a float or an integer"""
     component: str = Field("v-number-field", description="Vue component name")
+    hint: Optional[str] = Field('Press Enter to Submit', description="Hint text for the number input")
     value: Union[int,float,None] = Field (None,description="The input number value")
     placeholder: Optional[Union[int,float]] = Field(None, description="Placeholder number")
     label: Optional[str] = Field(None, description="Label for the number input")
     readonly: Optional[bool] = Field(None, description="If true, the input is read-only")
     disabled: Optional[bool] = Field(None, description="If true, the input is disabled")
     type: str = Field('number',description="Ensures that only numbers are accepted on the frontend")
-    triggerEvent: str = Field('input',description="Trigger event to send code to the backend")
+    triggerEvent: str = Field(None,description="Trigger event to send code to the backend")
 
     @validator('value', always=True) #TODO: debug and replace with field validator
     def get_value_from_global_state(cls, value, values):

zt_backend/models/components/text_area_input.py

@@ -6,12 +6,13 @@
 class TextArea(ZTComponent):
     """Text area input allows a user to input arbitrary text. This is meant for larger text inputs"""
     component: str = Field("v-textarea", description="Vue component name")
+    hint: Optional[str] = Field('Press Enter to Submit', description="Hint text for the text input")
     value: str = Field ('',description="The input text value")
     placeholder: Optional[str] = Field(None, description="Placeholder text")
     label: Optional[str] = Field(None, description="Label for the text input")
     readonly: Optional[bool] = Field(None, description="If true, the input is read-only")
     disabled: Optional[bool] = Field(None, description="If true, the input is disabled")
-    triggerEvent: str = Field('input',description="Trigger event to send code to the backend")
+    triggerEvent: str = Field(None,description="Trigger event to send code to the backend")
 
     @validator('value', always=True) #TODO: debug and replace with field validator
     def get_value_from_global_state(cls, value, values):

zt_backend/models/components/text_input.py

@@ -7,12 +7,13 @@
 class TextInput(ZTComponent):
     """Text input allows a user to input arbitrary text. This is meant for short text inputs"""
     component: str = Field("v-text-field", description="Vue component name")
+    hint: Optional[str] = Field('Press Enter to Submit', description="Hint text for the text input")
     value: str = Field ('', description="The input text value")
     placeholder: Optional[str] = Field(None, description="Placeholder text")
     label: Optional[str] = Field(None, description="Label for the text input")
     readonly: Optional[bool] = Field(None, description="If true, the input is read-only")
     disabled: Optional[bool] = Field(None, description="If true, the input is disabled")
-    triggerEvent: str = Field('input',description="Trigger event to send code to the backend")
+    triggerEvent: str = Field(None,description="Trigger event to send code to the backend")
 
     @validator('value', always=True) #TODO: debug and replace with field validator
     def get_value_from_global_state(cls, value, values):

zt_frontend/src/components/CodeComponent.vue

@@ -109,6 +109,7 @@
                 v-bind="componentBind(component)"
                 v-model="component.value"
                 @click="clickedButton(component)"
+                @keydown="handleEnterPress($event, component.id,component.component, component.value)"
                 @[component.triggerEvent]="
                   runCode(true, component.id, component.value)
                 "
@@ -385,6 +386,12 @@ export default {
         return newObj;
       }, {});
     },
+    handleEnterPress(e: any, id: string,component_type: any, value: any) {
+      // Run code when Enter is pressed in a text, number or text are field
+      if (e.key === "Enter" && (component_type === "v-text-field" || component_type === "v-textarea" || component_type === "v-number-field")) {
+        this.runCode(true, id, value);
+      }
+    },
     clickedButton(component: any) {
       if (component.component === "v-btn" || component.component === "v-timer") {
         component.value = true;