Refactored FormulateInputContent

src/Formulate.js

@@ -14,15 +14,8 @@ import FormulateHelp from './slots/FormulateHelp.vue'
 import FormulateGrouping from './FormulateGrouping.vue'
 import FormulateLabel from './slots/FormulateLabel.vue'
 import FormulateAddMore from './slots/FormulateAddMore.vue'
-import FormulateInputBox from './inputs/FormulateInputBox.vue'
-import FormulateInputText from './inputs/FormulateInputText.vue'
-import FormulateInputFile from './inputs/FormulateInputFile.vue'
 import FormulateRepeatable from './slots/FormulateRepeatable.vue'
 import FormulateInputGroup from './inputs/FormulateInputGroup.vue'
-import FormulateInputButton from './inputs/FormulateInputButton.vue'
-import FormulateInputSelect from './inputs/FormulateInputSelect.vue'
-import FormulateInputSlider from './inputs/FormulateInputSlider.vue'
-import FormulateInputTextArea from './inputs/FormulateInputTextArea.vue'
 import FormulateRepeatableProvider from './FormulateRepeatableProvider.vue'
 import FormulateRepeatableRemove from './slots/FormulateRepeatableRemove.vue'
 
@@ -45,15 +38,8 @@ class Formulate {
         FormulateErrors,
         FormulateAddMore,
         FormulateGrouping,
-        FormulateInputBox,
-        FormulateInputText,
-        FormulateInputFile,
         FormulateRepeatable,
         FormulateInputGroup,
-        FormulateInputButton,
-        FormulateInputSelect,
-        FormulateInputSlider,
-        FormulateInputTextArea,
         FormulateRepeatableRemove,
         FormulateRepeatableProvider
       },

src/FormulateInput.vue

@@ -6,75 +6,7 @@
     :data-is-showing-errors="hasVisibleErrors"
     :data-type="type"
   >
-    <div class="formulate-input-wrapper">
+    <slot :id="id" :context="context" :errors="errors" :validationErrors="validationErrors" />
-      <slot
-        v-if="context.labelPosition === 'before'"
-        name="label"
-        v-bind="context"
-      >
-        <component
-          :is="context.slotComponents.label"
-          v-if="context.hasLabel"
-          :context="context"
-        />
-      </slot>
-      <slot
-        v-if="context.helpPosition === 'before'"
-        name="help"
-        v-bind="context"
-      >
-        <component
-          :is="context.slotComponents.help"
-          v-if="context.help"
-          :context="context"
-        />
-      </slot>
-      <slot
-        name="element"
-        v-bind="context"
-      >
-        <component
-          :is="context.component"
-          :context="context"
-          @click="$emit('click', $event)"
-        >
-          <slot v-bind="context" />
-        </component>
-      </slot>
-      <slot
-        v-if="context.labelPosition === 'after'"
-        name="label"
-        v-bind="context"
-      >
-        <component
-          :is="context.slotComponents.label"
-          v-if="context.hasLabel"
-          :context="context"
-        />
-      </slot>
-    </div>
-    <slot
-      v-if="context.helpPosition === 'after'"
-      name="help"
-      v-bind="context"
-    >
-      <component
-        :is="context.slotComponents.help"
-        v-if="context.help"
-        :context="context"
-      />
-    </slot>
-    <slot
-      name="errors"
-      v-bind="context"
-    >
-      <component
-        :is="context.slotComponents.errors"
-        v-if="!context.disableErrors"
-        :type="context.slotComponents.errors === 'FormulateErrors' ? 'input' : false"
-        :context="context"
-      />
-    </slot>
   </div>
 </template>
 

src/inputs/FormulateInputBox.vue

@@ -1,41 +0,0 @@
-<template>
-  <div
-    :class="`formulate-input-element formulate-input-element--${context.type}`"
-    :data-type="context.type"
-  >
-    <!--
-      This explicit break out of types is due to a Vue bug that causes IE11 to
-      not when using v-model + dynamic :type + :value (thanks @Christoph-Wagner)
-      https://github.com/vuejs/vue/issues/8379
-    -->
-    <input
-      v-if="type === 'radio'"
-      v-model="context.model"
-      type="radio"
-      :value="context.value"
-      v-bind="attributes"
-      @blur="context.blurHandler"
-    >
-    <input
-      v-else
-      v-model="context.model"
-      type="checkbox"
-      :value="context.value"
-      v-bind="attributes"
-      @blur="context.blurHandler"
-    >
-    <label
-      class="formulate-input-element-decorator"
-      :for="id"
-    />
-  </div>
-</template>
-
-<script>
-import FormulateInputMixin from '../FormulateInputMixin'
-
-export default {
-  name: 'FormulateInputBox',
-  mixins: [FormulateInputMixin]
-}
-</script>

src/inputs/FormulateInputButton.vue

@@ -1,28 +0,0 @@
-<template>
-  <div
-    :class="`formulate-input-element formulate-input-element--${context.type}`"
-    :data-type="context.type"
-  >
-    <button
-      :type="type"
-      v-bind="attributes"
-      @click="$emit('click', $event)"
-    >
-      <slot>
-        <span
-          :class="`formulate-input-element--${context.type}--label`"
-          v-text="context.value || context.label || context.name || 'Submit'"
-        />
-      </slot>
-    </button>
-  </div>
-</template>
-
-<script>
-import FormulateInputMixin from '../FormulateInputMixin'
-
-export default {
-  name: 'FormulateInputButton',
-  mixins: [FormulateInputMixin]
-}
-</script>

src/inputs/FormulateInputFile.vue

@@ -1,114 +0,0 @@
-<template>
-  <div
-    :class="`formulate-input-element formulate-input-element--${context.type}`"
-    :data-type="context.type"
-    :data-has-files="hasFiles"
-  >
-    <div
-      class="formulate-input-upload-area"
-      :data-has-files="hasFiles"
-    >
-      <input
-        ref="file"
-        :data-is-drag-hover="isOver"
-        type="file"
-        v-bind="attributes"
-        @blur="context.blurHandler"
-        @change="handleFile"
-        @dragover="handleDragOver"
-        @dragleave="handleDragLeave"
-      >
-      <div
-        v-show="!hasFiles"
-        class="formulate-input-upload-area-mask"
-      />
-      <FormulateFiles
-        v-if="hasFiles"
-        :files="context.model"
-        :image-preview="context.type === 'image' && context.imageBehavior === 'preview'"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import FormulateInputMixin from '../FormulateInputMixin'
-import FileUpload from '../FileUpload'
-import FormulateFiles from '../FormulateFiles.vue'
-
-export default {
-  name: 'FormulateInputFile',
-  components: {
-    FormulateFiles
-  },
-  mixins: [FormulateInputMixin],
-  data () {
-    return {
-      isOver: false
-    }
-  },
-  computed: {
-    hasFiles () {
-      return !!(this.context.model instanceof FileUpload && this.context.model.files.length)
-    }
-  },
-  created () {
-    if (Array.isArray(this.context.model)) {
-      if (typeof this.context.model[0][this.$formulate.getFileUrlKey()] === 'string') {
-        this.context.model = this.$formulate.createUpload({
-          files: this.context.model
-        }, this.context)
-      }
-    }
-  },
-  mounted () {
-    // Add a listener to the window to prevent drag/drops that miss the dropzone
-    // from opening the file and navigating the user away from the page.
-    if (window && this.context.preventWindowDrops) {
-      window.addEventListener('dragover', this.preventDefault)
-      window.addEventListener('drop', this.preventDefault)
-    }
-  },
-  destroyed () {
-    if (window && this.context.preventWindowDrops) {
-      window.removeEventListener('dragover', this.preventDefault)
-      window.removeEventListener('drop', this.preventDefault)
-    }
-  },
-  methods: {
-    preventDefault (e) {
-      if (e.target.tagName !== 'INPUT' && e.target.getAttribute('type') !== 'file') {
-        e = e || event
-        e.preventDefault()
-      }
-    },
-    handleFile () {
-      this.isOver = false
-      const input = this.$refs.file
-      if (input.files.length) {
-        this.context.model = this.$formulate.createUpload(input, this.context)
-        // nextTick required for attemptImmediateUpload to pass instanceof reliably
-        this.$nextTick(() => this.attemptImmediateUpload())
-      }
-    },
-    attemptImmediateUpload () {
-      if (this.context.uploadBehavior === 'live' &&
-        this.context.model instanceof FileUpload) {
-        this.context.hasValidationErrors().then(errors => {
-          if (!errors) {
-            this.context.model.upload()
-          }
-        })
-      }
-    },
-    handleDragOver (e) {
-      e.preventDefault()
-      this.isOver = true
-    },
-    handleDragLeave (e) {
-      e.preventDefault()
-      this.isOver = false
-    }
-  }
-}
-</script>

src/inputs/FormulateInputSelect.vue

@@ -1,70 +0,0 @@
-<template>
-  <div
-    :class="`formulate-input-element formulate-input-element--${context.type}`"
-    :data-type="context.type"
-  >
-    <select
-      v-model="context.model"
-      v-bind="attributes"
-      :data-placeholder-selected="placeholderSelected"
-      @blur="context.blurHandler"
-    >
-      <option
-        v-if="context.placeholder"
-        value=""
-        disabled
-        :selected="!hasValue"
-      >
-        {{ context.placeholder }}
-      </option>
-      <template
-        v-if="!optionGroups"
-      >
-        <option
-          v-for="option in options"
-          :key="option.id"
-          :value="option.value"
-          v-bind="option.attributes || {}"
-          v-text="option.label"
-        />
-      </template>
-      <template
-        v-else
-      >
-        <optgroup
-          v-for="(subOptions, label) in optionGroups"
-          :key="label"
-          :label="label"
-        >
-          <option
-            v-for="option in subOptions"
-            :key="option.id"
-            :value="option.value"
-            v-bind="option.attributes || {}"
-            v-text="option.label"
-          />
-        </optgroup>
-      </template>
-    </select>
-  </div>
-</template>
-
-<script>
-import FormulateInputMixin from '../FormulateInputMixin'
-
-export default {
-  name: 'FormulateInputSelect',
-  mixins: [FormulateInputMixin],
-  computed: {
-    options () {
-      return this.context.options || {}
-    },
-    optionGroups () {
-      return this.context.optionGroups || false
-    },
-    placeholderSelected () {
-      return !!(!this.hasValue && this.context.attributes && this.context.attributes.placeholder)
-    }
-  }
-}
-</script>

src/inputs/FormulateInputSlider.vue

@@ -1,27 +0,0 @@
-<template>
-  <div
-    :class="`formulate-input-element formulate-input-element--${context.type}`"
-    :data-type="context.type"
-  >
-    <input
-      v-model="context.model"
-      :type="type"
-      v-bind="attributes"
-      @blur="context.blurHandler"
-    >
-    <div
-      v-if="context.showValue"
-      class="formulate-input-element-range-value"
-      v-text="context.model"
-    />
-  </div>
-</template>
-
-<script>
-import FormulateInputMixin from '../FormulateInputMixin'
-
-export default {
-  name: 'FormulateInputSlider',
-  mixins: [FormulateInputMixin]
-}
-</script>

src/inputs/FormulateInputText.vue

@@ -1,22 +0,0 @@
-<template>
-  <div
-    :class="`formulate-input-element formulate-input-element--${context.type}`"
-    :data-type="context.type"
-  >
-    <input
-      v-model="context.model"
-      :type="type"
-      v-bind="attributes"
-      @blur="context.blurHandler"
-    >
-  </div>
-</template>
-
-<script>
-import FormulateInputMixin from '../FormulateInputMixin'
-
-export default {
-  name: 'FormulateInputText',
-  mixins: [FormulateInputMixin]
-}
-</script>

src/inputs/FormulateInputTextArea.vue

@@ -1,21 +0,0 @@
-<template>
-  <div
-    class="formulate-input-element formulate-input-element--textarea"
-    data-type="textarea"
-  >
-    <textarea
-      v-model="context.model"
-      v-bind="attributes"
-      @blur="context.blurHandler"
-    />
-  </div>
-</template>
-
-<script>
-import FormulateInputMixin from '../FormulateInputMixin'
-
-export default {
-  name: 'FormulateInputTextArea',
-  mixins: [FormulateInputMixin]
-}
-</script>

src/libs/context.js

@@ -15,6 +15,7 @@ export default {
       component: this.component,
       disableErrors: this.disableErrors,
       errors: this.explicitErrors,
+      allErrors: this.allErrors,
       formShouldShowErrors: this.formShouldShowErrors,
       getValidationErrors: this.getValidationErrors.bind(this),
       hasGivenName: this.hasGivenName,