improved FormField and form items to display validation errors

app/src/components/globals/FormField.vue

@@ -1,12 +1,29 @@
 <template>
+  <!-- v-bind="$attrs" allow to pass default attrs not specified in this component slots  -->
   <b-form-group
-    label-cols="0" label-class="font-weight-bold" class="mb-4"
-    :label="label" :label-for="'form-item-' + props.id"
+    v-bind="attrs"
+    :id="id || props.id + '_group'"
+    :label-for="props.id"
+    :state="state"
+    :invalid-feedback="errorMessage"
+    @touch="touch"
+    class="mb-4"
   >
-    <slot name="default">
-      <component :is="component" v-bind="props" v-model="props.value" />
+    <!-- Make field props and state available as scoped slot data -->
+    <slot v-bind="{ self: { ...props, state }, touch }">
+      <!-- if no component was passed as slot, render a component from the props -->
+      <component
+        :is="component"
+        v-bind="props"
+        v-on="$listeners"
+        :value="value"
+        :state="state"
+        :required="validation ? 'required' in validation : false"
+      />
     </slot>
 
+    <!-- {{ validation }} -->
+
     <template v-if="description || example || link" v-slot:description>
       <div class="d-flex">
         <span v-if="example">{{ $t('form_input_example', { example }) }}</span>
@@ -18,29 +35,83 @@
 
       <span v-if="description" v-html="description" />
     </template>
-
-    <b-form-invalid-feedback v-if="'isValid' in props" :id="props.id + '-feedback'" :state="props.value.isValid">
-      {{ props.error }}
-    </b-form-invalid-feedback>
   </b-form-group>
 </template>
 
 <script>
 export default {
-  name: 'FormItemHelper',
+  name: 'FormField',
+
+  inheritAttrs: false,
 
   props: {
-    component: { type: String, default: 'InputItem' },
-    props: { type: Object, required: true },
-    label: { type: String, required: true },
+    // Component props (other <form-group> related attrs are passed thanks to $attrs)
+    id: { type: String, default: null },
     description: { type: String, default: null },
     example: { type: String, default: null },
-    link: { type: Object, default: null }
+    link: { type: Object, default: null },
+    // rendered field component props
+    component: { type: String, default: 'InputItem' },
+    value: { type: null, default: null },
+    props: { type: Object, default: () => ({}) },
+    validation: { type: Object, default: null }
   },
 
-  data () {
-    return {
-      content: this.value
+  computed: {
+    attrs () {
+      const attrs = { ...this.$attrs }
+      const defaultAttrs = {
+        'label-cols-md': 4,
+        'label-cols-lg': 2,
+        'label-class': 'font-weight-bold'
+      }
+
+      for (const attr in defaultAttrs) {
+        if (!(attr in attrs)) attrs[attr] = defaultAttrs[attr]
+      }
+
+      return attrs
+    },
+
+    state () {
+      // Need to set state as null if no error, else component turn green
+      if (this.validation) {
+        return this.validation.$anyError === true ? false : null
+      }
+      return null
+    },
+
+    errorMessage () {
+      const validation = this.validation
+      if (validation && validation.$anyError) {
+        const [type, errData] = this.findError(validation.$params, validation)
+        return this.$i18n.t('form_errors.' + type, errData)
+      }
+      return ''
+    }
+  },
+
+  methods: {
+    touch (name) {
+      if (this.validation) {
+        // For fields that have multiple elements
+        if (name) {
+          this.validation[name].$touch()
+        } else {
+          this.validation.$touch()
+        }
+      }
+    },
+
+    findError (params, obj, parent = obj) {
+      for (const key in params) {
+        if (!obj[key]) {
+          return [key, obj.$params[key]]
+        }
+        if (obj[key].$anyError) {
+          return this.findError(obj[key].$params, obj[key], parent)
+        }
+      }
     }
   }
 }

app/src/components/globals/formItems/CheckboxItem.vue

@@ -1,9 +1,9 @@
 <template>
   <b-checkbox
     v-model="checked"
-    @input="$emit('input', checked)"
+    v-on="$listeners"
     :id="id"
-    :aria-describedby="id + '-feedback'"
+    :aria-describedby="$parent.id + '__BV_description_'"
     switch
   >
     {{ $t(checked ? 'yes' : 'no') }}
@@ -16,7 +16,7 @@ export default {
 
   props: {
     value: { type: Boolean, required: true },
-    id: { type: String, required: true }
+    id: { type: String, default: null }
   },
 
   data () {

app/src/components/globals/formItems/InputItem.vue

@@ -1,13 +1,13 @@
 <template>
   <b-input
-    v-model="input"
-    @input="$emit('input', input)"
+    :value="value"
     :id="id"
+    v-on="$listeners"
     :placeholder="placeholder"
-    :aria-describedby="id + '-feedback'"
     :type="type"
-    :state="isValid"
+    :state="state"
     :required="required"
+    @blur="$parent.$emit('touch', name)"
   />
 </template>
 
@@ -16,19 +16,13 @@ export default {
   name: 'InputItem',
 
   props: {
-    value: { type: [String, Number, null], default: null },
-    id: { type: String, required: true },
+    value: { type: [String, Number], default: null },
+    id: { type: String, default: null },
     placeholder: { type: String, default: null },
-    isValid: { type: [Boolean, null], default: null },
-    error: { type: String, default: '' },
     type: { type: String, default: 'text' },
-    required: { type: Boolean, default: true }
-  },
-
-  data () {
-    return {
-      input: this.value
-    }
+    required: { type: Boolean, default: false },
+    state: { type: Boolean, default: null },
+    name: { type: String, default: null }
   }
 }
 </script>

app/src/components/globals/formItems/SelectItem.vue

@@ -1,11 +1,11 @@
 <template>
   <b-select
-    v-model="selected"
-    :options="choices"
-    @input="$emit('input', selected)"
-    :required="required"
+    :value="value"
     :id="id"
-    :aria-describedby="id + '-feedback'"
+    :options="choices"
+    :required="required"
+    v-on="$listeners"
+    @blur="$parent.$emit('touch', name)"
   />
 </template>
 
@@ -15,15 +15,10 @@ export default {
 
   props: {
     value: { type: [String, null], default: null },
+    id: { type: String, default: null },
     choices: { type: [Array, Object], required: true },
-    required: { type: Boolean, default: true },
-    id: { type: String, required: true }
-  },
-
-  data () {
-    return {
-      selected: this.value
-    }
+    required: { type: Boolean, default: false },
+    name: { type: String, default: null }
   }
 }
 </script>