Merge branch 'master' into production

Author: kevinkosterr

src/formGroup.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="form-group" :class="getFieldRowClasses(field)">
-    <label v-if="fieldTypeHasLabel(field)" :for="getFieldID(field)" :class="field.labelClasses">
-      <span>{{ field.label }}</span>
+    <label v-if="hasLabel" :for="fieldId" :class="field.labelClasses">
+      <span>
+        <i v-if="hasIconBefore" :class="field.labelIcon.iconClass" />
+        {{ field.label }}
+        <i v-if="hasIconAfter" :class="field.labelIcon.iconClass" />
+      </span>
       <span v-if="field.help" class="help">
         <i class="icon" />
         <div class="helpText">{{ field.help }}</div>
@@ -42,12 +46,14 @@
     </div>
   </div>
 </template>
+
 <script>
 import { get as objGet, isNil, isFunction } from 'lodash'
 import { slugifyFormID } from './utils/schema'
 import formMixin from './formMixin.js'
 import * as fieldComponents from './utils/fieldsLoader'
 import { ref } from 'vue'
+
 export default {
   name: 'FormGroup',
   components: fieldComponents,
@@ -77,6 +83,37 @@ export default {
       child: ref()
     }
   },
+  computed: {
+    hasIconBefore () {
+      return this.field.labelIcon && this.field.labelIcon.iconClass && this.field.labelIcon.position === 'before'
+    },
+    hasIconAfter () {
+      return this.field.labelIcon && this.field.labelIcon.iconClass && this.field.labelIcon.position === 'after'
+    },
+    hasLabel() {
+      if (isNil(this.field.label)) return false
+
+      let relevantType = ''
+      if (this.field.type === 'input') {
+        relevantType = this.field.inputType
+      } else {
+        relevantType = this.field.type
+      }
+
+      switch (relevantType) {
+        case 'button':
+        case 'submit':
+        case 'reset':
+          return false
+        default:
+          return true
+      }
+    },
+    fieldId () {
+      const idPrefix = this.options?.fieldIdPrefix ?? ''
+      return slugifyFormID(this.field, idPrefix)
+    }
+  },
   methods: {
     onBlur (newValue, schema) {
       this.$emit('blur', newValue, schema)
@@ -95,29 +132,6 @@ export default {
       }
       return res
     },
-    fieldTypeHasLabel(field) {
-      if (isNil(field.label)) return false
-
-      let relevantType = ''
-      if (field.type === 'input') {
-        relevantType = field.inputType
-      } else {
-        relevantType = field.type
-      }
-
-      switch (relevantType) {
-        case 'button':
-        case 'submit':
-        case 'reset':
-          return false
-        default:
-          return true
-      }
-    },
-    getFieldID(schema) {
-      const idPrefix = objGet(this.options, 'fieldIdPrefix', '')
-      return slugifyFormID(schema, idPrefix)
-    },
     // Get type of field 'field-xxx'. It'll be the name of HTML element
     getFieldType(fieldSchema) {
       return 'field-' + fieldSchema.type