diff --git a/ui/components/Form/FormLayout.vue b/ui/components/Form/FormLayout.vue index 6402790e..96123da2 100644 --- a/ui/components/Form/FormLayout.vue +++ b/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', { diff --git a/ui/components/controls/Base.vue b/ui/components/controls/Base.vue index c42c5c85..9bcc6478 100644 --- a/ui/components/controls/Base.vue +++ b/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 || '' } }); },