feat(field-textarea): add textarea field

Author: kevinkosterr

src/fields/index.js

@@ -7,6 +7,7 @@ import FieldRadio from '@/fields/input/FieldRadio.vue'
 import FieldColor from '@/fields/input/FieldColor.vue'
 import FieldNumber from '@/fields/input/FieldNumber.vue'
 import FieldSwitch from '@/fields/input/FieldSwitch.vue'
+import FieldTextarea from '@/fields/input/FieldTextarea.vue'
 
 import FieldSubmit from '@/fields/buttons/FieldSubmit.vue'
 import FieldReset from '@/fields/buttons/FieldReset.vue'
@@ -15,7 +16,7 @@ import FieldButton from '@/fields/buttons/FieldButton.vue'
 
 const fieldComponents = [
   FieldText, FieldCheckBox, FieldPassword, FieldSelect, FieldSelectNative, FieldRadio, FieldColor, FieldNumber,
-  FieldSubmit, FieldReset, FieldButton, FieldSwitch
+  FieldSubmit, FieldReset, FieldButton, FieldSwitch, FieldTextarea
 ]
 
 export default {

src/fields/input/FieldTextarea.vue

@@ -0,0 +1,25 @@
+<template>
+  <textarea
+    :id="id"
+    :style="field.resizable ? '' : 'resize: none;'"
+    class="field-textarea"
+    :name="field.name"
+    :required="isRequired"
+    :readonly="isReadOnly"
+    :disabled="isDisabled"
+    :maxlength="field.maxLength"
+    :placeholder="field.placeholder"
+    :value="currentModelValue"
+    @input="onFieldValueChanged"
+    @blur="onBlur"
+  />
+</template>
+
+<script>
+import { abstractField } from '@/mixins'
+
+export default {
+  name: 'FieldTextarea',
+  mixins: [ abstractField ]
+}
+</script>

src/scss/themes/basic.scss

@@ -8,7 +8,13 @@ $input-padding: .3rem .4rem;
 
 .vue-form-generator {
 
-  input:not([type='checkbox'],[type='submit'],[type='radio'],[type='color'],[type='reset']) {
+  input:not(
+    [type='checkbox'],
+    [type='submit'],
+    [type='radio'],
+    [type='color'],
+    [type='reset']),
+  textarea {
     width: 100%;
     padding: $input-padding;
     border-radius: 3px;
@@ -100,6 +106,14 @@ $input-padding: .3rem .4rem;
     }
   }
 
+  /** Textarea field */
+  .field-textarea {
+    &:focus {
+      border: none;
+      outline: none;
+    }
+  }
+
   .field-reset {
     border-radius: 3px;
   }