Adds IE11 support

* Adds support for ie11

* Fixes IE11 support, still requires polyfills

* Adds build files

* Fixes issue in ie11 related to function.name

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@braid/vue-formulate",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@braid/vue-formulate",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "The easiest way to build forms in Vue.",
   "main": "dist/formulate.umd.js",
   "module": "dist/formulate.esm.js",

src/FormulateInput.vue

@@ -282,22 +282,22 @@ export default {
     performValidation () {
       const rules = parseRules(this.validation, this.$formulate.rules(this.parsedValidationRules))
       this.pendingValidation = Promise.all(
-        rules.map(([rule, args]) => {
+        rules.map(([rule, args, ruleName]) => {
           var res = rule({
             value: this.context.model,
             getFormValues: this.getFormValues.bind(this),
             name: this.context.name
           }, ...args)
           res = (res instanceof Promise) ? res : Promise.resolve(res)
-          return res.then(res => res ? false : this.getValidationMessage(rule, args))
+          return res.then(res => res ? false : this.getMessage(ruleName, args))
         })
       )
         .then(result => result.filter(result => result))
         .then(errorMessages => { this.validationErrors = errorMessages })
       return this.pendingValidation
     },
-    getValidationMessage (rule, args) {
+    getMessage (ruleName, args) {
-      return this.getValidationFunction(rule)({
+      return this.getMessageFunc(ruleName)({
         args,
         name: this.mergedValidationName,
         value: this.context.model,
@@ -305,10 +305,9 @@ export default {
         formValues: this.getFormValues()
       })
     },
-    getValidationFunction (rule) {
+    getMessageFunc (ruleName) {
-      let ruleName = rule.name.substr(0, 1) === '_' ? rule.name.substr(1) : rule.name
       ruleName = snakeToCamel(ruleName)
-      if (this.messages && typeof this.messages === 'object' && typeof this.messages[ruleName] !== 'undefined') {
+      if (this.messages && typeof this.messages[ruleName] !== 'undefined') {
         switch (typeof this.messages[ruleName]) {
           case 'function':
             return this.messages[ruleName]
@@ -316,7 +315,7 @@ export default {
             return () => this.messages[ruleName]
         }
       }
-      return (context) => this.$formulate.validationMessage(rule.name, context, this)
+      return (context) => this.$formulate.validationMessage(ruleName, context, this)
     },
     hasValidationErrors () {
       return new Promise(resolve => {

src/inputs/FormulateInputBox.vue

@@ -3,9 +3,23 @@
     :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="type"
+      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"

src/libs/utils.js

@@ -106,19 +106,19 @@ function parseRule (rule, rules) {
   }
   if (Array.isArray(rule) && rule.length) {
     rule = rule.map(r => r) // light clone
-    rule[0] = snakeToCamel(rule[0])
+    const ruleName = snakeToCamel(rule.shift())
-    if (typeof rule[0] === 'string' && rules.hasOwnProperty(rule[0])) {
+    if (typeof ruleName === 'string' && rules.hasOwnProperty(ruleName)) {
-      return [rules[rule.shift()], rule]
+      return [rules[ruleName], rule, ruleName]
     }
-    if (typeof rule[0] === 'function') {
+    if (typeof ruleName === 'function') {
-      return [rule.shift(), rule]
+      return [ruleName, rule, ruleName]
     }
   }
   if (typeof rule === 'string') {
     const segments = rule.split(':')
-    const functionName = snakeToCamel(segments.shift())
+    const ruleName = snakeToCamel(segments.shift())
-    if (rules.hasOwnProperty(functionName)) {
+    if (rules.hasOwnProperty(ruleName)) {
-      return [rules[functionName], segments.length ? segments.join(':').split(',') : []]
+      return [rules[ruleName], segments.length ? segments.join(':').split(',') : [], ruleName]
     } else {
       throw new Error(`Unknown validation rule ${rule}`)
     }

test/unit/utils.test.js

@@ -5,7 +5,7 @@ import FileUpload from '@/FileUpload';
 describe('parseRules', () => {
   it('parses single string rules, returning empty arguments array', () => {
     expect(parseRules('required', rules)).toEqual([
-      [rules.required, []]
+      [rules.required, [], 'required']
     ])
   })
 
@@ -17,21 +17,21 @@ describe('parseRules', () => {
 
   it('parses arguments for a rule', () => {
     expect(parseRules('in:foo,bar', rules)).toEqual([
-      [rules.in, ['foo', 'bar']]
+      [rules.in, ['foo', 'bar'], 'in']
     ])
   })
 
   it('parses multiple string rules and arguments', () => {
     expect(parseRules('required|in:foo,bar', rules)).toEqual([
-      [rules.required, []],
+      [rules.required, [], 'required'],
-      [rules.in, ['foo', 'bar']]
+      [rules.in, ['foo', 'bar'], 'in']
     ])
   })
 
   it('parses multiple array rules and arguments', () => {
     expect(parseRules(['required', 'in:foo,bar'], rules)).toEqual([
-      [rules.required, []],
+      [rules.required, [], 'required'],
-      [rules.in, ['foo', 'bar']]
+      [rules.in, ['foo', 'bar'], 'in']
     ])
   })
 
@@ -39,7 +39,7 @@ describe('parseRules', () => {
     expect(parseRules([
       ['matches', /^abc/, '1234']
     ], rules)).toEqual([
-      [rules.matches, [/^abc/, '1234']]
+      [rules.matches, [/^abc/, '1234'], 'matches']
     ])
   })
 })
@@ -142,6 +142,11 @@ describe('snakeToCamel', () => {
   it('has no effect hyphenated words', () => {
     expect(snakeToCamel('not-a-good-name')).toBe('not-a-good-name')
   })
+
+  it('returns the same function if passed', () => {
+    const fn = () => {}
+    expect(snakeToCamel(fn)).toBe(fn)
+  })
 })