feat(next): Textarea input

Author: alvarosabu

dev/vue/App.vue

@@ -3,7 +3,7 @@
     <div class="page container">
       <h1 class="title m-4">{{ title }}</h1>
       <div class="flex justify-between">
-        <div class="card p-6">
+        <div class="card p-6 mr-4">
           <dynamic-form
             :form="form"
             @submited="handleSubmit"
@@ -35,6 +35,7 @@ import {
   EmailInput,
   FormValidation,
   PasswordInput,
+  TextAreaInput,
 } from '../../src/index';
 import { email, pattern } from '@/core/utils';
 
@@ -83,6 +84,11 @@ export default defineComponent({
             },
           ],
         }),
+        new TextAreaInput({
+          label: 'Bio',
+          cols: 20,
+          rows: 5,
+        }),
       ],
     });
     function handleSubmit(values) {

src/components/dynamic-input/DynamicInput.vue

@@ -4,13 +4,15 @@
 import { defineComponent, PropType, computed, h } from 'vue';
 import TextInput from '@/components/text-input/TextInput.vue';
 import SelectInput from '@/components/select-input/SelectInput.vue';
+import TextAreaInput from '@/components/text-area-input/TextAreaInput.vue';
 
 import { FormControl } from '@/core/models';
 import { isEmpty, entries, values, keys } from '@/core/utils/helpers';
 
 const components = {
   TextInput,
   SelectInput,
+  TextAreaInput,
 };
 
 const props = {
@@ -112,6 +114,9 @@ export default defineComponent({
         case 'select':
           component = h(SelectInput, attributes.value);
           break;
+        case 'textarea':
+          component = h(TextAreaInput, attributes.value);
+          break;
 
         default:
           break;

src/components/text-area-input/TextAreaInput.vue

@@ -0,0 +1,33 @@
+<script lang="ts">
+import { defineComponent, h, PropType } from 'vue';
+import { FormControl } from '@/core/models';
+import { useInputEvents } from '@/composables/input-events';
+const props = {
+  control: Object as PropType<FormControl<any>>,
+};
+
+export default defineComponent({
+  name: 'asTextAreaInput',
+  props,
+  setup(props, { emit }) {
+    const { onChange, onFocus, onBlur } = useInputEvents(props?.control, emit);
+
+    return () =>
+      h('textarea', {
+        name: props?.control?.name || '',
+        type: props?.control?.type,
+        disabled: props?.control?.disabled,
+        placeholder: props?.control?.placeholder,
+        class: ['form-control'],
+        value: props?.control?.value,
+        rows: props?.control?.rows,
+        cols: props?.control?.cols,
+        onFocus,
+        onBlur,
+        onChange,
+      });
+  },
+});
+</script>
+
+<style></style>

src/core/models.ts

@@ -29,6 +29,8 @@ export class InputBase<T> {
   placeholder?: string;
   validations?: FormValidation[];
   options?: { key: string; value: string; disabled?: boolean }[];
+  cols?: number;
+  rows?: number;
 
   constructor(
     options: {
@@ -42,6 +44,8 @@ export class InputBase<T> {
       placeholder?: string;
       validations?: FormValidation[];
       options?: { key: string; value: string; disabled?: boolean }[];
+      cols?: number;
+      rows?: number;
     } = {},
   ) {
     this.value = options.value;
@@ -54,6 +58,8 @@ export class InputBase<T> {
     this.placeholder = options.placeholder;
     this.validations = options.validations || [];
     this.options = options.options;
+    this.rows = options.rows || 0;
+    this.cols = options.cols || 0;
   }
 }
 
@@ -73,6 +79,10 @@ export class SelectInput<T> extends InputBase<T> {
   type = 'select';
 }
 
+export class TextAreaInput extends InputBase<string> {
+  type = 'textarea';
+}
+
 export class FormControl<T> extends InputBase<T> {
   valid = true;
   invalid = false;
@@ -90,6 +100,8 @@ export class FormControl<T> extends InputBase<T> {
       customClass?: string;
       validations?: FormValidation[];
       options?: { key: string; value: string; disabled?: boolean }[];
+      cols?: number;
+      rows?: number;
     } = {},
   ) {
     super({
@@ -102,6 +114,8 @@ export class FormControl<T> extends InputBase<T> {
       customClass: options.customClass,
       validations: options.validations,
       options: options.options,
+      rows: options.rows,
+      cols: options.cols,
     });
   }
 }