Support textarea for input type and clean up variant

google · Dec 18, 2023 · 394798e · 394798e
1 parent 4cd8903
commit 394798e
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 15 deletions.
diff --git a/mesop/components/input/e2e/input_app.py b/mesop/components/input/e2e/input_app.py
@@ -26,3 +26,6 @@ def app():
   s = me.state(State)
   me.input(label="Basic input", on_input=on_input, key=str(s.checked))
   me.text(text=s.input)
+
+  me.input(label="Textarea", type="textarea", on_input=on_input)
+  me.input(label="Number input", type="number", on_input=on_input)
diff --git a/mesop/components/input/input.ng.html b/mesop/components/input/input.ng.html
@@ -1,13 +1,27 @@
-@if(config().getVariantIndex() === 0) {
 <mat-form-field
   [hideRequiredMarker]="config().getHideRequiredMarker()"
   [color]="getColor()"
   [floatLabel]="getFloatLabel()"
   [appearance]="getAppearance()"
   [subscriptSizing]="getSubscriptSizing()"
   [hintLabel]="config().getHintLabel()"
-  ><mat-label>{{config().getLabel()}}</mat-label
-  ><input
+  ><mat-label>{{config().getLabel()}}</mat-label>
+  @if(config().getType() === "textarea") {
+  <textarea
+    matInput
+    [disabled]="config().getDisabled()"
+    [id]="config().getId()"
+    [placeholder]="config().getPlaceholder()"
+    [name]="config().getName()"
+    [required]="config().getRequired()"
+    [type]="config().getType()"
+    [aria-describedby]="config().getUserAriaDescribedBy()"
+    [value]="config().getValue()"
+    [readonly]="config().getReadonly()"
+    (input)="onInput($event)"
+  ></textarea>
+  } @else {
+  <input
     matInput
     [disabled]="config().getDisabled()"
     [id]="config().getId()"
@@ -20,5 +34,5 @@
     [readonly]="config().getReadonly()"
     (input)="onInput($event)"
   />
+  }
 </mat-form-field>
-}
diff --git a/mesop/components/input/input.proto b/mesop/components/input/input.proto
@@ -21,5 +21,4 @@ message InputType {
   string hint_label = 15;
   string label = 16;
   string on_input_handler_id = 17;
-  int32 variant_index = 18;
 }
diff --git a/mesop/components/input/input.py b/mesop/components/input/input.py
@@ -19,7 +19,23 @@ def input(
   placeholder: str = "",
   name: str = "",
   required: bool = False,
-  type: str = "",
+  type: Literal[
+    "",
+    "textarea",
+    "color",
+    "date",
+    "datetime-local",
+    "email",
+    "month",
+    "number",
+    "password",
+    "search",
+    "tel",
+    "text",
+    "time",
+    "url",
+    "week",
+  ] = "",
   user_aria_described_by: str = "",
   value: str = "",
   readonly: bool = False,
@@ -31,7 +47,6 @@ def input(
   hint_label: str = "",
   label: str = "",
   on_input: Callable[[InputEvent], Any] | None = None,
-  variant: Literal["matInput"] = "matInput",
 ):
   """Creates a Input component.
 
@@ -54,7 +69,6 @@ def input(
     hint_label (str): Text for the form field hint.
     label (str):
     on_input (Callable[[InputEvent], Any]|None): [input](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) is a native browser event.
-    variant (Literal['matInput']): component variations
   """
   insert_component(
     key=key,
@@ -79,12 +93,5 @@ def input(
       on_input_handler_id=register_event_handler(on_input, event=InputEvent)
       if on_input
       else "",
-      variant_index=_get_variant_index(variant),
     ),
   )
-
-
-def _get_variant_index(variant: str) -> int:
-  if variant == "matInput":
-    return 0
-  raise Exception("Unexpected variant: " + variant)