Adds help text slot

src/FormulateInput.vue

@@ -41,11 +41,16 @@
         />
       </slot>
     </div>
-    <div
+    <slot
-      v-if="help"
+      name="help"
-      class="formulate-input-help"
+      v-bind="context"
-      v-text="help"
+    >
-    />
+      <div
+        v-if="context.help"
+        class="formulate-input-help"
+        v-text="context.help"
+      />
+    </slot>
     <FormulateErrors
       v-if="!disableErrors"
       :type="`input`"

src/libs/context.js

@@ -9,29 +9,30 @@ import { map, arrayify, shallowEqualObjects } from './utils'
 export default {
   context () {
     return defineModel.call(this, {
-      type: this.type,
+      attributes: this.elementAttributes,
-      value: this.value,
+      blurHandler: blurHandler.bind(this),
-      name: this.nameOrFallback,
       classification: this.classification,
       component: this.component,
-      id: this.id || this.defaultId,
+      errors: this.explicitErrors,
+      getValidationErrors: this.getValidationErrors.bind(this),
       hasLabel: (this.label && this.classification !== 'button'),
+      hasValidationErrors: this.hasValidationErrors.bind(this),
+      help: this.help,
+      id: this.id || this.defaultId,
+      imageBehavior: this.imageBehavior,
       label: this.label,
       labelPosition: this.logicalLabelPosition,
-      attributes: this.elementAttributes,
+      name: this.nameOrFallback,
       performValidation: this.performValidation.bind(this),
-      blurHandler: blurHandler.bind(this),
-      imageBehavior: this.imageBehavior,
-      uploadUrl: this.mergedUploadUrl,
-      uploader: this.uploader || this.$formulate.getUploader(),
-      uploadBehavior: this.uploadBehavior,
       preventWindowDrops: this.preventWindowDrops,
-      hasValidationErrors: this.hasValidationErrors.bind(this),
-      getValidationErrors: this.getValidationErrors.bind(this),
-      validationErrors: this.validationErrors,
-      errors: this.explicitErrors,
       setErrors: this.setErrors.bind(this),
       showValidationErrors: this.showValidationErrors,
+      type: this.type,
+      uploadBehavior: this.uploadBehavior,
+      uploadUrl: this.mergedUploadUrl,
+      uploader: this.uploader || this.$formulate.getUploader(),
+      validationErrors: this.validationErrors,
+      value: this.value,
       visibleValidationErrors: this.visibleValidationErrors,
       ...this.typeContext
     })

test/unit/FormulateInputText.test.js

@@ -262,4 +262,14 @@ describe('FormulateInputText', () => {
     })
     expect(wrapper.find('label').text()).toBe('flavor town')
   })
+
+  it('Allow help text override with scoped slot', async () => {
+    const wrapper = mount(FormulateInput, {
+      propsData: { type: 'text', name: 'soda', help: 'Do you want some'},
+      scopedSlots: {
+        help: '<small>{{ props.help }} {{ props.name }}?</small>'
+      }
+    })
+    expect(wrapper.find('small').text()).toBe('Do you want some soda?')
+  })
 })