Input Description & Dynamic Labels

ui/components/Form/FormLayout.vue

@@ -49,6 +49,7 @@ export default {
         });
       }
     });
+    this.setLabelOptions();
   },
   methods: {
     getDocField(fieldname) {
@@ -72,6 +73,13 @@ export default {
 
       return true;
     },
+    setLabelOptions() {
+      this.fields.forEach(field => {
+        if (field.labelOption) {
+          field.labelOption = field.labelOption(this.doc);
+        }
+      });
+    },
     updateDoc(fieldname, value) {
       this.doc.set(fieldname, value);
       this.$emit('updateDoc', {

ui/components/controls/Base.vue

@@ -61,16 +61,38 @@ export default {
       );
     },
     getChildrenElement(h) {
-      return [this.getLabelElement(h), this.getInputElement(h)];
+      return [
+        this.getLabelElement(h),
+        this.getInputElement(h),
+        this.getDescriptionElement(h)
+      ];
     },
     getLabelElement(h) {
+      const hasLabelOptions = Boolean(this.docfield.labelOption);
+      let label = this.docfield.label;
+
+      if (hasLabelOptions) {
+        const replaceableKeys = Object.keys(this.docfield.labelOption);
+        for (let key of replaceableKeys) {
+          label = label.replace(key.toString(), this.docfield.labelOption[key]);
+        }
+      }
+
       return h('label', {
         class: [this.labelClass, 'text-muted'],
         attrs: {
           for: this.id
         },
         domProps: {
-          textContent: this.docfield.label
+          textContent: label
+        }
+      });
+    },
+    getDescriptionElement(h) {
+      return h('small', {
+        class: ['form-text', 'text-muted'],
+        domProps: {
+          textContent: this.docfield.description || ''
         }
       });
     },