Fix textarea issues

Author: alvarosabu

dev/App.vue

@@ -48,6 +48,7 @@ import {
   required,
   email,
   pattern,
+  maxLength,
   /* } from '../dist/as-dynamic-forms.common'; */
 } from '../src/main';
 
@@ -94,8 +95,16 @@ const data = () => ({
         label: 'Bio',
         name: 'bio',
         cols: 30,
-        rows: 5,
+        rows: 10,
         customClass: 'col-12',
+        value:
+          'Prism whatever occupy, stumptown polaroid butcher activated charcoal seitan cornhole direct trade coloring book offal sriracha. 8-bit pitchfork kitsch crucifix chartreuse, tumblr adaptogen brunch stumptown. Drinking vinegar yuccie echo park lo-fi, poutine unicorn raclette adaptogen kale chips chia. Deep v austin fam organic kickstarter hexagon hell of wolf pour-over YOLO. 8-bit glossier lyft authentic, selfies aesthetic kinfolk prism tattooed irony quinoa distillery pug slow-carb post-ironic.',
+        validations: [
+          new FormValidation(
+            maxLength(100),
+            `This field should be less than 100 characters`,
+          ),
+        ],
       }),
       new FormField({
         type: 'select',

src/components/input-textarea/InputTextarea.vue

@@ -6,6 +6,9 @@
     class="form-control"
     :cols="formControl.cols"
     :rows="formControl.rows"
+    @change="valueChange()"
+    @focus="onFocus()"
+    @blur="onBlur()"
   ></textarea>
 </template>
 <script src="./InputTextarea.js"></script>

src/core/utils/form-control.model.js

@@ -7,6 +7,8 @@ export function FormControl({
   customClass = null,
   options = [],
   placeholder = null,
+  rows = null,
+  cols = null,
   errors = {},
   valid = true,
   touched = false,
@@ -24,6 +26,8 @@ export function FormControl({
   this.valid = valid;
   this.touched = touched;
   this.dirty = dirty;
+  this.rows = rows;
+  this.cols = cols;
 }
 
 export function FormField({
@@ -37,6 +41,8 @@ export function FormField({
   options = [],
   placeholder = null,
   inline = false,
+  rows = null,
+  cols = null,
 }) {
   this.type = type;
   this.value = value;
@@ -48,6 +54,8 @@ export function FormField({
   this.options = options;
   this.placeholder = placeholder;
   this.inline = inline;
+  this.rows = rows;
+  this.cols = cols;
 }
 
 export function FormValidation(

src/styles/themes/default.scss

@@ -55,12 +55,16 @@ $input-error-color: #dc3545;
   padding: $input-padding-y $input-padding-x;
   font-family: $font-family;
   font-size: $font-size;
-  height: calc(
-    #{$line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-width * 2}
-  );
   border: $input-border-width solid $input-border-color;
   border-radius: $input-border-radius;
 
+  &:not(textarea) {
+    height: calc(
+      #{$line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-width *
+        2}
+    );
+  }
+
   // Placeholder
   &::placeholder {
     color: $input-border-color;