INitial scoped slot expansion work

src/Formulate.js

@@ -9,6 +9,8 @@ import fauxUploader from './libs/faux-uploader'
 import FormulateInput from './FormulateInput.vue'
 import FormulateForm from './FormulateForm.vue'
 import FormulateErrors from './FormulateErrors.vue'
+import FormulateHelp from './slots/FormulateHelp.vue'
+import FormulateLabel from './slots/FormulateLabel.vue'
 import FormulateInputGroup from './FormulateInputGroup.vue'
 import FormulateInputBox from './inputs/FormulateInputBox.vue'
 import FormulateInputText from './inputs/FormulateInputText.vue'
@@ -30,6 +32,8 @@ class Formulate {
     this.defaults = {
       components: {
         FormulateForm,
+        FormulateHelp,
+        FormulateLabel,
         FormulateInput,
         FormulateErrors,
         FormulateInputBox,
@@ -41,6 +45,11 @@ class Formulate {
         FormulateInputSlider,
         FormulateInputTextArea
       },
+      slotDefaults: {
+        label: 'FormulateLabel',
+        help: 'FormulateHelp',
+        errors: 'FormulateErrors'
+      },
       library,
       rules,
       mimes,
@@ -138,6 +147,19 @@ class Formulate {
     return false
   }
 
+  /**
+   * What component should be rendered for the given slot location and type.
+   * @param {string} type the type of component
+   * @param {string} slot the name of the slot
+   */
+  slotComponent (type, slot) {
+    const def = this.options.library[type]
+    if (def.slots && def.slots[slot]) {
+      return def.slots[slot]
+    }
+    return this.options.slotDefaults[slot]
+  }
+
   /**
    * Get validation rules.
    * @return {object} object of validation functions

src/FormulateInput.vue

@@ -8,14 +8,14 @@
   >
     <div class="formulate-input-wrapper">
       <slot
-        v-if="context.hasLabel && context.labelPosition === 'before'"
+        v-if="context.labelPosition === 'before'"
         name="label"
         v-bind="context"
       >
-        <label
+        <component
-          class="formulate-input-label formulate-input-label--before"
+          :is="context.slotComponents.label"
-          :for="context.attributes.id"
+          v-if="context.hasLabel"
-          v-text="context.label"
+          :context="context"
         />
       </slot>
       <slot
@@ -30,14 +30,14 @@
         </component>
       </slot>
       <slot
-        v-if="context.hasLabel && context.labelPosition === 'after'"
+        v-if="context.labelPosition === 'after'"
         name="label"
         v-bind="context"
       >
-        <label
+        <component
-          class="formulate-input-label formulate-input-label--after"
+          :is="context.slotComponents.label"
-          :for="context.attributes.id"
+          v-if="context.hasLabel"
-          v-text="context.label"
+          :context="context"
         />
       </slot>
     </div>
@@ -45,10 +45,10 @@
       name="help"
       v-bind="context"
     >
-      <div
+      <component
+        :is="slotComponents.help"
         v-if="context.help"
-        class="formulate-input-help"
+        :context="context"
-        v-text="context.help"
       />
     </slot>
     <FormulateErrors

src/FormulateInputGroup.vue

@@ -46,6 +46,7 @@ export default {
         visibleValidationErrors,
         component,
         hasLabel,
+        slotComponents,
         ...context
       } = this.context
       return this.options.map(option => this.groupItemContext(

src/libs/context.js

@@ -27,6 +27,7 @@ export default {
       preventWindowDrops: this.preventWindowDrops,
       setErrors: this.setErrors.bind(this),
       showValidationErrors: this.showValidationErrors,
+      slotComponents: this.slotComponents,
       type: this.type,
       uploadBehavior: this.uploadBehavior,
       uploadUrl: this.mergedUploadUrl,
@@ -52,7 +53,8 @@ export default {
   hasErrors,
   hasVisibleErrors,
   showValidationErrors,
-  visibleValidationErrors
+  visibleValidationErrors,
+  slotComponents
 }
 
 /**
@@ -230,6 +232,16 @@ function hasVisibleErrors () {
   return ((this.validationErrors && this.showValidationErrors) || !!this.explicitErrors.length)
 }
 
+/**
+ * The component that should be rendered in the label slot as default.
+ */
+function slotComponents () {
+  return {
+    label: this.$formulate.slotComponent(this.type, 'label'),
+    help: this.$formulate.slotComponent(this.type, 'help')
+  }
+}
+
 /**
  * Bound into the context object.
  */

src/slots/FormulateHelp.vue

@@ -0,0 +1,22 @@
+<template>
+  <div
+    v-if="context.help"
+    class="formulate-input-help"
+    v-text="context.help"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    context: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/slots/FormulateLabel.vue

@@ -0,0 +1,22 @@
+<template>
+  <label
+    :class="`formulate-input-label formulate-input-label--${context.labelPosition}`"
+    :for="context.id"
+    v-text="context.label"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    context: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

test/unit/Formulate.test.js

@@ -63,6 +63,8 @@ describe('Formulate', () => {
   it('installs on vue instance', () => {
     const components = [
       'FormulateForm',
+      'FormulateHelp',
+      'FormulateLabel',
       'FormulateInput',
       'FormulateErrors',
       'FormulateInputBox',