Merge pull request #17 from kevinkosterr/field-textarea

Add Textarea field

Author: kevinkosterr

__tests__/components/fields/FieldTextarea.spec.js

@@ -0,0 +1,58 @@
+import { generateSchemaSingleField, generatePropsSingleField, mountFormGenerator } from '@test/_resources/utils.js'
+import { mount, config } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+
+import FieldTextarea from '@/fields/input/FieldTextarea.vue'
+
+const form = generateSchemaSingleField(
+  'textTest',
+  'textModel',
+  'textarea',
+  null,
+  'A test for text',
+  '',
+  {
+    placeholder: 'test placeholder'
+  }
+)
+
+const props = generatePropsSingleField(form)
+
+describe('Test FieldTextarea', () => {
+
+  it('Should render correctly', () => {
+    const wrapper = mount(FieldTextarea, { props })
+    const textAreaEl = wrapper.find('textarea')
+    expect(textAreaEl.exists()).toBe(true)
+    expect(textAreaEl.attributes().placeholder).toBe('test placeholder')
+  })
+
+  it('Should render correctly inside form generator', async () => {
+    config.global.components = { FieldTextarea }
+
+    const formWrapper = mountFormGenerator(form.schema, form.model)
+    expect(formWrapper.findComponent(FieldTextarea).exists()).toBeTruthy()
+
+    const textAreaEl = formWrapper.find('textarea')
+    expect(textAreaEl.exists()).toBeTruthy()
+    expect(textAreaEl.attributes().placeholder).toBe('test placeholder')
+  })
+
+  it('Should emit onInput event', async () => {
+    const wrapper = mount(FieldTextarea, { props })
+    await wrapper.find('textarea').trigger('input')
+    expect(wrapper.emitted()).toHaveProperty('onInput')
+  })
+
+  it('Should update model value', async () => {
+    config.global.components = { FieldTextarea }
+
+    const formWrapper = mountFormGenerator(form.schema, form.model)
+
+    const textAreaField = formWrapper.findComponent(FieldTextarea)
+    expect(textAreaField.exists()).toBeTruthy()
+    await textAreaField.find('textarea').setValue('I have the high ground')
+    expect(formWrapper.vm.model.textModel).toBe('I have the high ground')
+  })
+
+})

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;
   }