add basic components to be used from props

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

@@ -0,0 +1,28 @@
+<template>
+  <b-checkbox
+    v-model="checked"
+    @input="$emit('input', checked)"
+    :id="id"
+    :aria-describedby="id + '-feedback'"
+    switch
+  >
+    {{ $t(checked ? 'yes' : 'no') }}
+  </b-checkbox>
+</template>
+
+<script>
+export default {
+  name: 'CheckboxItem',
+
+  props: {
+    value: { type: Boolean, required: true },
+    id: { type: String, required: true }
+  },
+
+  data () {
+    return {
+      checked: this.value
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,59 @@
+<template>
+  <b-form-group
+    label-cols="0" label-class="font-weight-bold" class="mb-4"
+    :label="label" :label-for="'form-item-' + props.id"
+  >
+    <slot name="default">
+      <component
+        :is="component" v-bind="props"
+        v-model="props.value" @input="test"
+      />
+    </slot>
+
+    <template v-if="description || example || link" v-slot:description>
+      <div class="d-flex">
+        <span v-if="example">{{ $t('form_input_example', { example }) }}</span>
+
+        <b-link v-if="link" :to="link" class="ml-auto">
+          {{ link.text }}
+        </b-link>
+      </div>
+
+      <template v-if="description">
+        {{ description }}
+      </template>
+    </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',
+
+  props: {
+    component: { type: String, default: 'InputItem' },
+    props: { type: Object, required: true },
+    label: { type: String, required: true },
+    description: { type: String, default: null },
+    example: { type: String, default: null },
+    link: { type: Object, default: null }
+  },
+
+  data () {
+    return {
+      content: this.value
+    }
+  },
+
+  methods: {
+    test () {
+      console.log(this.props.value)
+      // this.props.isValid = false
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,34 @@
+<template>
+  <b-input
+    v-model="input"
+    @input="$emit('input', input)"
+    :id="id"
+    :placeholder="placeholder"
+    :aria-describedby="id + '-feedback'"
+    :type="type"
+    :state="isValid"
+    :required="required"
+  />
+</template>
+
+<script>
+export default {
+  name: 'InputItem',
+
+  props: {
+    value: { type: [String, Number, null], default: null },
+    id: { type: String, required: true },
+    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
+    }
+  }
+}
+</script>

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

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

app/src/components/globals/formItems/index.js

@@ -0,0 +1,5 @@
+export { default as FormItemHelper } from './FormItemHelper'
+
+export { default as InputItem } from './InputItem'
+export { default as SelectItem } from './SelectItem'
+export { default as CheckboxItem } from './CheckboxItem'

app/src/components/globals/index.js

@@ -1,2 +1,3 @@
 export { default as Icon } from './Icon'
 export { default as Breadcrumb } from './Breadcrumb'
+export { FormItemHelper, InputItem, SelectItem, CheckboxItem } from './formItems'