feat(core): add textarea component (#132)

Co-authored-by: Maurício Mutte <mauriciomutte.mm@gmail.com>
juntossomosmais · May 25, 2023 · d0124db · d0124db
1 parent 52ec472
commit d0124db
Show file tree

Hide file tree

Showing 8 changed files with 1,160 additions and 0 deletions.
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -123,6 +123,59 @@ export namespace Components {
         "readonly"?: boolean;
         "value"?: IonTypes.IonSelect['value'];
     }
+    interface AtomTextarea {
+        "autoGrow": boolean;
+        "autocomplete"?: 'on' | 'off';
+        "autofocus": boolean;
+        "clearOnEdit": boolean;
+        "color"?: 'primary' | 'secondary' | 'danger';
+        "cols"?: number;
+        "counter": boolean;
+        "counterFormatter"?: (
+    inputLength: number,
+    maxLength: number
+  ) => string | undefined;
+        "debounce": number;
+        "disabled": boolean;
+        "enterKeyHint": | 'enter'
+    | 'done'
+    | 'go'
+    | 'next'
+    | 'previous'
+    | 'search'
+    | 'send';
+        "errorText"?: string;
+        "fill": 'solid' | 'outline';
+        "getInputElement": () => Promise<HTMLTextAreaElement>;
+        "hasError": boolean;
+        "helperText"?: string;
+        "icon"?: string;
+        "inputmode"?: | 'none'
+    | 'text'
+    | 'tel'
+    | 'url'
+    | 'email'
+    | 'numeric'
+    | 'decimal'
+    | 'search';
+        "label"?: string;
+        "labelPlacement"?: 'stacked' | 'floating';
+        "maxlength"?: number;
+        "minlength"?: number;
+        "mode": Mode;
+        "name"?: string;
+        "pattern"?: string;
+        "placeholder"?: string;
+        "readonly": boolean;
+        "required": boolean;
+        "rows": number;
+        "setFocus": () => Promise<void>;
+        "setInputEl": (textareaEl: HTMLIonTextareaElement) => Promise<void>;
+        "shape": 'round' | undefined;
+        "step"?: string;
+        "value"?: IonTypes.IonTextarea['value'];
+        "wrap"?: 'hard' | 'soft' | 'off';
+    }
 }
 export interface AtomButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -136,6 +189,10 @@ export interface AtomSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLAtomSelectElement;
 }
+export interface AtomTextareaCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAtomTextareaElement;
+}
 declare global {
     interface HTMLAtomButtonElement extends Components.AtomButton, HTMLStencilElement {
     }
@@ -179,6 +236,12 @@ declare global {
         prototype: HTMLAtomSelectElement;
         new (): HTMLAtomSelectElement;
     };
+    interface HTMLAtomTextareaElement extends Components.AtomTextarea, HTMLStencilElement {
+    }
+    var HTMLAtomTextareaElement: {
+        prototype: HTMLAtomTextareaElement;
+        new (): HTMLAtomTextareaElement;
+    };
     interface HTMLElementTagNameMap {
         "atom-button": HTMLAtomButtonElement;
         "atom-col": HTMLAtomColElement;
@@ -187,6 +250,7 @@ declare global {
         "atom-input": HTMLAtomInputElement;
         "atom-row": HTMLAtomRowElement;
         "atom-select": HTMLAtomSelectElement;
+        "atom-textarea": HTMLAtomTextareaElement;
     }
 }
 declare namespace LocalJSX {
@@ -310,6 +374,60 @@ declare namespace LocalJSX {
         "readonly"?: boolean;
         "value"?: IonTypes.IonSelect['value'];
     }
+    interface AtomTextarea {
+        "autoGrow"?: boolean;
+        "autocomplete"?: 'on' | 'off';
+        "autofocus"?: boolean;
+        "clearOnEdit"?: boolean;
+        "color"?: 'primary' | 'secondary' | 'danger';
+        "cols"?: number;
+        "counter"?: boolean;
+        "counterFormatter"?: (
+    inputLength: number,
+    maxLength: number
+  ) => string | undefined;
+        "debounce"?: number;
+        "disabled"?: boolean;
+        "enterKeyHint"?: | 'enter'
+    | 'done'
+    | 'go'
+    | 'next'
+    | 'previous'
+    | 'search'
+    | 'send';
+        "errorText"?: string;
+        "fill"?: 'solid' | 'outline';
+        "hasError"?: boolean;
+        "helperText"?: string;
+        "icon"?: string;
+        "inputmode"?: | 'none'
+    | 'text'
+    | 'tel'
+    | 'url'
+    | 'email'
+    | 'numeric'
+    | 'decimal'
+    | 'search';
+        "label"?: string;
+        "labelPlacement"?: 'stacked' | 'floating';
+        "maxlength"?: number;
+        "minlength"?: number;
+        "mode"?: Mode;
+        "name"?: string;
+        "onAtomBlur"?: (event: AtomTextareaCustomEvent<void>) => void;
+        "onAtomChange"?: (event: AtomTextareaCustomEvent<string>) => void;
+        "onAtomFocus"?: (event: AtomTextareaCustomEvent<void>) => void;
+        "onAtomInput"?: (event: AtomTextareaCustomEvent<string>) => void;
+        "pattern"?: string;
+        "placeholder"?: string;
+        "readonly"?: boolean;
+        "required"?: boolean;
+        "rows"?: number;
+        "shape"?: 'round' | undefined;
+        "step"?: string;
+        "value"?: IonTypes.IonTextarea['value'];
+        "wrap"?: 'hard' | 'soft' | 'off';
+    }
     interface IntrinsicElements {
         "atom-button": AtomButton;
         "atom-col": AtomCol;
@@ -318,6 +436,7 @@ declare namespace LocalJSX {
         "atom-input": AtomInput;
         "atom-row": AtomRow;
         "atom-select": AtomSelect;
+        "atom-textarea": AtomTextarea;
     }
 }
 export { LocalJSX as JSX };
@@ -331,6 +450,7 @@ declare module "@stencil/core" {
             "atom-input": LocalJSX.AtomInput & JSXBase.HTMLAttributes<HTMLAtomInputElement>;
             "atom-row": LocalJSX.AtomRow & JSXBase.HTMLAttributes<HTMLAtomRowElement>;
             "atom-select": LocalJSX.AtomSelect & JSXBase.HTMLAttributes<HTMLAtomSelectElement>;
+            "atom-textarea": LocalJSX.AtomTextarea & JSXBase.HTMLAttributes<HTMLAtomTextareaElement>;
         }
     }
 }