From 3ad166ac90c4a5e6276cd09c6e2b483a905ac2a0 Mon Sep 17 00:00:00 2001
From: Justin Schroeder <justin@wearebraid.com>
Date: Tue, 8 Oct 2019 13:50:53 -0400
Subject: [PATCH] Adds full multi-option support for checkboxes and radios

---
 build/rollup.config.js              |   4 +-
 dist/formulate.esm.js               | 165 ++++++++++++++++++++--------
 dist/formulate.min.js               | 165 ++++++++++++++++++++--------
 dist/formulate.umd.js               | 165 ++++++++++++++++++++--------
 src/FormulateInput.vue              |  47 +++++++-
 src/FormulateInputGroup.vue         |   2 +-
 src/FormulateInputMixin.js          |  10 +-
 src/formulate.js                    |   1 +
 src/inputs/FormulateInputSelect.vue |   2 +-
 src/libs/context.js                 |  65 +++++++----
 src/libs/utils.js                   |  30 +++++
 test/FormulateInputBox.test.js      |  34 ++++++
 test/FormulateInputText.test.js     |  43 +++++++-
 13 files changed, 558 insertions(+), 175 deletions(-)

diff --git a/build/rollup.config.js b/build/rollup.config.js
index 6035f27..4bf540f 100644
--- a/build/rollup.config.js
+++ b/build/rollup.config.js
@@ -19,6 +19,8 @@ export default {
       css: true, // Dynamically inject css as a <style> tag
       compileTemplate: true // Explicitly convert template to render function
     }),
-    buble() // Transpile to ES5
+    buble({
+      objectAssign: 'Object.assign'
+    }) // Transpile to ES5
   ]
 }
diff --git a/dist/formulate.esm.js b/dist/formulate.esm.js
index 04d94a9..c404d9a 100644
--- a/dist/formulate.esm.js
+++ b/dist/formulate.esm.js
@@ -111,16 +111,33 @@ function map (original, callback) {
 }
 
 /**
- * Function to reduce an object's properties
- * @param {Object} original
- * @param {Function} callback
- * @param {*} accumulator
+ * Shallow equal.
+ * @param {} objA
+ * @param {*} objB
  */
-function reduce (original, callback, accumulator) {
-  for (var key in original) {
-    accumulator = callback(accumulator, key, original[key]);
+function shallowEqualObjects (objA, objB) {
+  if (objA === objB) {
+    return true
   }
-  return accumulator
+  if (!objA || !objB) {
+    return false
+  }
+  var aKeys = Object.keys(objA);
+  var bKeys = Object.keys(objB);
+  var len = aKeys.length;
+
+  if (bKeys.length !== len) {
+    return false
+  }
+
+  for (var i = 0; i < len; i++) {
+    var key = aKeys[i];
+
+    if (objA[key] !== objB[key]) {
+      return false
+    }
+  }
+  return true
 }
 
 /**
@@ -128,36 +145,45 @@ function reduce (original, callback, accumulator) {
  * render that element.
  * @return {object}
  */
-function context () {
-  return defineModel.call(this, Object.assign({
-    type: this.type,
-    value: this.value,
-    classification: this.classification,
-    component: this.component,
-    id: this.id,
-    label: this.label,
-    labelPosition: labelPosition.call(this),
-    attributes: attributeReducer.call(this, this.$attrs)
-  }, typeContext.call(this)))
-}
+var context = {
+  context: function context () {
+    if (this.debug) {
+      console.log(((this.type) + " re-context"));
+    }
+    return defineModel.call(this, Object.assign({}, {type: this.type,
+      value: this.value,
+      classification: this.classification,
+      component: this.component,
+      id: this.id || this.defaultId,
+      label: this.label,
+      labelPosition: this.logicalLabelPosition,
+      attributes: this.elementAttributes},
+      this.typeContext))
+  },
+  typeContext: typeContext,
+  elementAttributes: elementAttributes,
+  logicalLabelPosition: logicalLabelPosition
+};
 
 /**
  * Given (this.type), return an object to merge with the context
  * @return {object}
+ * @return {object}
  */
 function typeContext () {
+  var this$1 = this;
+
   switch (this.classification) {
     case 'select':
       return {
-        options: createOptionList(this.options),
-        optionGroups: this.optionGroups ? map(this.optionGroups, function (k, v) { return createOptionList(v); }) : false,
+        options: createOptionList.call(this, this.options),
+        optionGroups: this.optionGroups ? map(this.optionGroups, function (k, v) { return createOptionList.call(this$1, v); }) : false,
         placeholder: this.$attrs.placeholder || false
       }
     case 'group':
       if (this.options) {
         return {
-          options: createOptionList(this.options),
-          component: 'FormulateInputGroup'
+          options: createOptionList.call(this, this.options)
         }
       }
       break
@@ -170,20 +196,21 @@ function typeContext () {
  * Reducer for attributes that will be applied to each core input element.
  * @return {object}
  */
-function attributeReducer (attributes) {
-  if ( attributes === void 0 ) attributes = {};
-
+function elementAttributes () {
+  var attrs = Object.assign({}, this.localAttributes);
   if (this.id) {
-    attributes.id = this.id;
+    attrs.id = this.id;
+  } else {
+    attrs.id = this.defaultId;
   }
-  return attributes
+  return attrs
 }
 
 /**
  * Determine the a best-guess location for the label (before or after).
  * @return {string} before|after
  */
-function labelPosition () {
+function logicalLabelPosition () {
   if (this.labelPosition) {
     return this.labelPosition
   }
@@ -202,17 +229,22 @@ function labelPosition () {
  * @return {array}
  */
 function createOptionList (options) {
-  if (!Array.isArray(options)) {
-    return reduce(options, function (options, value, label) { return options.concat({ value: value, label: label, id: nanoid(15) }); }, [])
+  if (!Array.isArray(options) && options && typeof options === 'object') {
+    var optionList = [];
+    var that = this;
+    for (var value in options) {
+      optionList.push({ value: value, label: options[value], id: ((that.elementAttributes.id) + "_" + value) });
+    }
+    return optionList
   } else if (Array.isArray(options) && !options.length) {
-    return [{ value: this.name, label: (this.label || this.name), id: nanoid(15) }]
+    return [{ value: this.value, label: (this.label || this.name), id: this.context.id || nanoid(9) }]
   }
   return options
 }
 
 /**
- * Create a getter/setter model factory
- * @return object
+ * Defines the model used throughout the existing context.
+ * @param {object} context
  */
 function defineModel (context) {
   return Object.defineProperty(context, 'model', {
@@ -257,7 +289,7 @@ var script = {
     },
     formulateValue: {
       type: [String, Number, Object, Boolean, Array],
-      default: false
+      default: ''
     },
     value: {
       type: [String, Number, Object, Boolean, Array],
@@ -273,7 +305,7 @@ var script = {
     },
     id: {
       type: [String, Boolean, Number],
-      default: function () { return nanoid(9); }
+      default: false
     },
     label: {
       type: [String, Boolean],
@@ -286,16 +318,47 @@ var script = {
     help: {
       type: [String, Boolean],
       default: false
+    },
+    debug: {
+      type: Boolean,
+      default: false
     }
   },
-  computed: {
-    context: context,
-    classification: function classification () {
+  data: function data () {
+    return {
+      defaultId: nanoid(9),
+      localAttributes: {}
+    }
+  },
+  computed: Object.assign({}, context,
+    {classification: function classification () {
       var classification = this.$formulate.classify(this.type);
       return (classification === 'box' && this.options) ? 'group' : classification
     },
     component: function component () {
-      return this.$formulate.component(this.type)
+      return (this.classification === 'group') ? 'FormulateInputGroup' : this.$formulate.component(this.type)
+    }}),
+  watch: {
+    '$attrs': {
+      handler: function handler (value) {
+        this.updateLocalAttributes(value);
+      },
+      deep: true
+    }
+  },
+  created: function created () {
+    this.updateLocalAttributes(this.$attrs);
+  },
+  mounted: function mounted () {
+    if (this.debug) {
+      console.log('MOUNTED:' + this.$options.name + ':' + this.type);
+    }
+  },
+  methods: {
+    updateLocalAttributes: function updateLocalAttributes (value) {
+      if (!shallowEqualObjects(value, this.localAttributes)) {
+        this.localAttributes = value;
+      }
     }
   }
 };
@@ -414,7 +477,7 @@ var __vue_render__ = function() {
                   _c("label", {
                     staticClass:
                       "formulate-input-label formulate-input-label--before",
-                    attrs: { for: _vm.id },
+                    attrs: { for: _vm.context.attributes.id },
                     domProps: { textContent: _vm._s(_vm.context.label) }
                   })
                 ],
@@ -442,7 +505,7 @@ var __vue_render__ = function() {
                   _c("label", {
                     staticClass:
                       "formulate-input-label formulate-input-label--after",
-                    attrs: { for: _vm.id },
+                    attrs: { for: _vm.context.attributes.id },
                     domProps: { textContent: _vm._s(_vm.context.label) }
                   })
                 ],
@@ -562,7 +625,8 @@ var script$1 = {
       var options = ref.options;
       var labelPosition = ref.labelPosition;
       var attributes = ref.attributes;
-      var rest = objectWithoutProperties( ref, ["options", "labelPosition", "attributes"] );
+      var classification = ref.classification;
+      var rest = objectWithoutProperties( ref, ["options", "labelPosition", "attributes", "classification"] );
       var context = rest;
       return this.options.map(function (option) { return this$1.groupItemContext(context, option); })
     }
@@ -647,10 +711,18 @@ __vue_render__$2._withStripped = true;
  * Default base for input components.
  */
 var FormulateInputMixin = {
+  model: {
+    prop: 'formulateValue',
+    event: 'input'
+  },
   props: {
     context: {
       type: Object,
       required: true
+    },
+    formulateValue: {
+      type: [Object, Array, Boolean, String, Number],
+      default: ''
     }
   },
   computed: {
@@ -664,7 +736,7 @@ var FormulateInputMixin = {
       return this.context.attributes || {}
     },
     hasValue: function hasValue () {
-      return !!this.context.model
+      return !!this.model
     }
   }
 };
@@ -1005,7 +1077,7 @@ var script$4 = {
       return this.context.optionGroups || false
     },
     placeholderSelected: function placeholderSelected () {
-      return !!(!this.hasValue && this.context.attributes.placeholder)
+      return !!(!this.hasValue && this.context.attributes && this.context.attributes.placeholder)
     }
   }
 };
@@ -1255,6 +1327,7 @@ Formulate.prototype.install = function install (Vue, options) {
   for (var componentName in this.options.components) {
     Vue.component(componentName, this.options.components[componentName]);
   }
+  Object.freeze(this);
 };
 
 /**
diff --git a/dist/formulate.min.js b/dist/formulate.min.js
index 6bb0b0c..0b2cd7e 100644
--- a/dist/formulate.min.js
+++ b/dist/formulate.min.js
@@ -114,16 +114,33 @@ var Formulate = (function (exports, isPlainObject, nanoid) {
   }
 
   /**
-   * Function to reduce an object's properties
-   * @param {Object} original
-   * @param {Function} callback
-   * @param {*} accumulator
+   * Shallow equal.
+   * @param {} objA
+   * @param {*} objB
    */
-  function reduce (original, callback, accumulator) {
-    for (var key in original) {
-      accumulator = callback(accumulator, key, original[key]);
+  function shallowEqualObjects (objA, objB) {
+    if (objA === objB) {
+      return true
     }
-    return accumulator
+    if (!objA || !objB) {
+      return false
+    }
+    var aKeys = Object.keys(objA);
+    var bKeys = Object.keys(objB);
+    var len = aKeys.length;
+
+    if (bKeys.length !== len) {
+      return false
+    }
+
+    for (var i = 0; i < len; i++) {
+      var key = aKeys[i];
+
+      if (objA[key] !== objB[key]) {
+        return false
+      }
+    }
+    return true
   }
 
   /**
@@ -131,36 +148,45 @@ var Formulate = (function (exports, isPlainObject, nanoid) {
    * render that element.
    * @return {object}
    */
-  function context () {
-    return defineModel.call(this, Object.assign({
-      type: this.type,
-      value: this.value,
-      classification: this.classification,
-      component: this.component,
-      id: this.id,
-      label: this.label,
-      labelPosition: labelPosition.call(this),
-      attributes: attributeReducer.call(this, this.$attrs)
-    }, typeContext.call(this)))
-  }
+  var context = {
+    context: function context () {
+      if (this.debug) {
+        console.log(((this.type) + " re-context"));
+      }
+      return defineModel.call(this, Object.assign({}, {type: this.type,
+        value: this.value,
+        classification: this.classification,
+        component: this.component,
+        id: this.id || this.defaultId,
+        label: this.label,
+        labelPosition: this.logicalLabelPosition,
+        attributes: this.elementAttributes},
+        this.typeContext))
+    },
+    typeContext: typeContext,
+    elementAttributes: elementAttributes,
+    logicalLabelPosition: logicalLabelPosition
+  };
 
   /**
    * Given (this.type), return an object to merge with the context
    * @return {object}
+   * @return {object}
    */
   function typeContext () {
+    var this$1 = this;
+
     switch (this.classification) {
       case 'select':
         return {
-          options: createOptionList(this.options),
-          optionGroups: this.optionGroups ? map(this.optionGroups, function (k, v) { return createOptionList(v); }) : false,
+          options: createOptionList.call(this, this.options),
+          optionGroups: this.optionGroups ? map(this.optionGroups, function (k, v) { return createOptionList.call(this$1, v); }) : false,
           placeholder: this.$attrs.placeholder || false
         }
       case 'group':
         if (this.options) {
           return {
-            options: createOptionList(this.options),
-            component: 'FormulateInputGroup'
+            options: createOptionList.call(this, this.options)
           }
         }
         break
@@ -173,20 +199,21 @@ var Formulate = (function (exports, isPlainObject, nanoid) {
    * Reducer for attributes that will be applied to each core input element.
    * @return {object}
    */
-  function attributeReducer (attributes) {
-    if ( attributes === void 0 ) attributes = {};
-
+  function elementAttributes () {
+    var attrs = Object.assign({}, this.localAttributes);
     if (this.id) {
-      attributes.id = this.id;
+      attrs.id = this.id;
+    } else {
+      attrs.id = this.defaultId;
     }
-    return attributes
+    return attrs
   }
 
   /**
    * Determine the a best-guess location for the label (before or after).
    * @return {string} before|after
    */
-  function labelPosition () {
+  function logicalLabelPosition () {
     if (this.labelPosition) {
       return this.labelPosition
     }
@@ -205,17 +232,22 @@ var Formulate = (function (exports, isPlainObject, nanoid) {
    * @return {array}
    */
   function createOptionList (options) {
-    if (!Array.isArray(options)) {
-      return reduce(options, function (options, value, label) { return options.concat({ value: value, label: label, id: nanoid(15) }); }, [])
+    if (!Array.isArray(options) && options && typeof options === 'object') {
+      var optionList = [];
+      var that = this;
+      for (var value in options) {
+        optionList.push({ value: value, label: options[value], id: ((that.elementAttributes.id) + "_" + value) });
+      }
+      return optionList
     } else if (Array.isArray(options) && !options.length) {
-      return [{ value: this.name, label: (this.label || this.name), id: nanoid(15) }]
+      return [{ value: this.value, label: (this.label || this.name), id: this.context.id || nanoid(9) }]
     }
     return options
   }
 
   /**
-   * Create a getter/setter model factory
-   * @return object
+   * Defines the model used throughout the existing context.
+   * @param {object} context
    */
   function defineModel (context) {
     return Object.defineProperty(context, 'model', {
@@ -260,7 +292,7 @@ var Formulate = (function (exports, isPlainObject, nanoid) {
       },
       formulateValue: {
         type: [String, Number, Object, Boolean, Array],
-        default: false
+        default: ''
       },
       value: {
         type: [String, Number, Object, Boolean, Array],
@@ -276,7 +308,7 @@ var Formulate = (function (exports, isPlainObject, nanoid) {
       },
       id: {
         type: [String, Boolean, Number],
-        default: function () { return nanoid(9); }
+        default: false
       },
       label: {
         type: [String, Boolean],
@@ -289,16 +321,47 @@ var Formulate = (function (exports, isPlainObject, nanoid) {
       help: {
         type: [String, Boolean],
         default: false
+      },
+      debug: {
+        type: Boolean,
+        default: false
       }
     },
-    computed: {
-      context: context,
-      classification: function classification () {
+    data: function data () {
+      return {
+        defaultId: nanoid(9),
+        localAttributes: {}
+      }
+    },
+    computed: Object.assign({}, context,
+      {classification: function classification () {
         var classification = this.$formulate.classify(this.type);
         return (classification === 'box' && this.options) ? 'group' : classification
       },
       component: function component () {
-        return this.$formulate.component(this.type)
+        return (this.classification === 'group') ? 'FormulateInputGroup' : this.$formulate.component(this.type)
+      }}),
+    watch: {
+      '$attrs': {
+        handler: function handler (value) {
+          this.updateLocalAttributes(value);
+        },
+        deep: true
+      }
+    },
+    created: function created () {
+      this.updateLocalAttributes(this.$attrs);
+    },
+    mounted: function mounted () {
+      if (this.debug) {
+        console.log('MOUNTED:' + this.$options.name + ':' + this.type);
+      }
+    },
+    methods: {
+      updateLocalAttributes: function updateLocalAttributes (value) {
+        if (!shallowEqualObjects(value, this.localAttributes)) {
+          this.localAttributes = value;
+        }
       }
     }
   };
@@ -417,7 +480,7 @@ var Formulate = (function (exports, isPlainObject, nanoid) {
                     _c("label", {
                       staticClass:
                         "formulate-input-label formulate-input-label--before",
-                      attrs: { for: _vm.id },
+                      attrs: { for: _vm.context.attributes.id },
                       domProps: { textContent: _vm._s(_vm.context.label) }
                     })
                   ],
@@ -445,7 +508,7 @@ var Formulate = (function (exports, isPlainObject, nanoid) {
                     _c("label", {
                       staticClass:
                         "formulate-input-label formulate-input-label--after",
-                      attrs: { for: _vm.id },
+                      attrs: { for: _vm.context.attributes.id },
                       domProps: { textContent: _vm._s(_vm.context.label) }
                     })
                   ],
@@ -565,7 +628,8 @@ var Formulate = (function (exports, isPlainObject, nanoid) {
         var options = ref.options;
         var labelPosition = ref.labelPosition;
         var attributes = ref.attributes;
-        var rest = objectWithoutProperties( ref, ["options", "labelPosition", "attributes"] );
+        var classification = ref.classification;
+        var rest = objectWithoutProperties( ref, ["options", "labelPosition", "attributes", "classification"] );
         var context = rest;
         return this.options.map(function (option) { return this$1.groupItemContext(context, option); })
       }
@@ -650,10 +714,18 @@ var Formulate = (function (exports, isPlainObject, nanoid) {
    * Default base for input components.
    */
   var FormulateInputMixin = {
+    model: {
+      prop: 'formulateValue',
+      event: 'input'
+    },
     props: {
       context: {
         type: Object,
         required: true
+      },
+      formulateValue: {
+        type: [Object, Array, Boolean, String, Number],
+        default: ''
       }
     },
     computed: {
@@ -667,7 +739,7 @@ var Formulate = (function (exports, isPlainObject, nanoid) {
         return this.context.attributes || {}
       },
       hasValue: function hasValue () {
-        return !!this.context.model
+        return !!this.model
       }
     }
   };
@@ -1008,7 +1080,7 @@ var Formulate = (function (exports, isPlainObject, nanoid) {
         return this.context.optionGroups || false
       },
       placeholderSelected: function placeholderSelected () {
-        return !!(!this.hasValue && this.context.attributes.placeholder)
+        return !!(!this.hasValue && this.context.attributes && this.context.attributes.placeholder)
       }
     }
   };
@@ -1258,6 +1330,7 @@ var Formulate = (function (exports, isPlainObject, nanoid) {
     for (var componentName in this.options.components) {
       Vue.component(componentName, this.options.components[componentName]);
     }
+    Object.freeze(this);
   };
 
   /**
diff --git a/dist/formulate.umd.js b/dist/formulate.umd.js
index c0fdc19..502bbe3 100644
--- a/dist/formulate.umd.js
+++ b/dist/formulate.umd.js
@@ -117,16 +117,33 @@
   }
 
   /**
-   * Function to reduce an object's properties
-   * @param {Object} original
-   * @param {Function} callback
-   * @param {*} accumulator
+   * Shallow equal.
+   * @param {} objA
+   * @param {*} objB
    */
-  function reduce (original, callback, accumulator) {
-    for (var key in original) {
-      accumulator = callback(accumulator, key, original[key]);
+  function shallowEqualObjects (objA, objB) {
+    if (objA === objB) {
+      return true
     }
-    return accumulator
+    if (!objA || !objB) {
+      return false
+    }
+    var aKeys = Object.keys(objA);
+    var bKeys = Object.keys(objB);
+    var len = aKeys.length;
+
+    if (bKeys.length !== len) {
+      return false
+    }
+
+    for (var i = 0; i < len; i++) {
+      var key = aKeys[i];
+
+      if (objA[key] !== objB[key]) {
+        return false
+      }
+    }
+    return true
   }
 
   /**
@@ -134,36 +151,45 @@
    * render that element.
    * @return {object}
    */
-  function context () {
-    return defineModel.call(this, Object.assign({
-      type: this.type,
-      value: this.value,
-      classification: this.classification,
-      component: this.component,
-      id: this.id,
-      label: this.label,
-      labelPosition: labelPosition.call(this),
-      attributes: attributeReducer.call(this, this.$attrs)
-    }, typeContext.call(this)))
-  }
+  var context = {
+    context: function context () {
+      if (this.debug) {
+        console.log(((this.type) + " re-context"));
+      }
+      return defineModel.call(this, Object.assign({}, {type: this.type,
+        value: this.value,
+        classification: this.classification,
+        component: this.component,
+        id: this.id || this.defaultId,
+        label: this.label,
+        labelPosition: this.logicalLabelPosition,
+        attributes: this.elementAttributes},
+        this.typeContext))
+    },
+    typeContext: typeContext,
+    elementAttributes: elementAttributes,
+    logicalLabelPosition: logicalLabelPosition
+  };
 
   /**
    * Given (this.type), return an object to merge with the context
    * @return {object}
+   * @return {object}
    */
   function typeContext () {
+    var this$1 = this;
+
     switch (this.classification) {
       case 'select':
         return {
-          options: createOptionList(this.options),
-          optionGroups: this.optionGroups ? map(this.optionGroups, function (k, v) { return createOptionList(v); }) : false,
+          options: createOptionList.call(this, this.options),
+          optionGroups: this.optionGroups ? map(this.optionGroups, function (k, v) { return createOptionList.call(this$1, v); }) : false,
           placeholder: this.$attrs.placeholder || false
         }
       case 'group':
         if (this.options) {
           return {
-            options: createOptionList(this.options),
-            component: 'FormulateInputGroup'
+            options: createOptionList.call(this, this.options)
           }
         }
         break
@@ -176,20 +202,21 @@
    * Reducer for attributes that will be applied to each core input element.
    * @return {object}
    */
-  function attributeReducer (attributes) {
-    if ( attributes === void 0 ) attributes = {};
-
+  function elementAttributes () {
+    var attrs = Object.assign({}, this.localAttributes);
     if (this.id) {
-      attributes.id = this.id;
+      attrs.id = this.id;
+    } else {
+      attrs.id = this.defaultId;
     }
-    return attributes
+    return attrs
   }
 
   /**
    * Determine the a best-guess location for the label (before or after).
    * @return {string} before|after
    */
-  function labelPosition () {
+  function logicalLabelPosition () {
     if (this.labelPosition) {
       return this.labelPosition
     }
@@ -208,17 +235,22 @@
    * @return {array}
    */
   function createOptionList (options) {
-    if (!Array.isArray(options)) {
-      return reduce(options, function (options, value, label) { return options.concat({ value: value, label: label, id: nanoid(15) }); }, [])
+    if (!Array.isArray(options) && options && typeof options === 'object') {
+      var optionList = [];
+      var that = this;
+      for (var value in options) {
+        optionList.push({ value: value, label: options[value], id: ((that.elementAttributes.id) + "_" + value) });
+      }
+      return optionList
     } else if (Array.isArray(options) && !options.length) {
-      return [{ value: this.name, label: (this.label || this.name), id: nanoid(15) }]
+      return [{ value: this.value, label: (this.label || this.name), id: this.context.id || nanoid(9) }]
     }
     return options
   }
 
   /**
-   * Create a getter/setter model factory
-   * @return object
+   * Defines the model used throughout the existing context.
+   * @param {object} context
    */
   function defineModel (context) {
     return Object.defineProperty(context, 'model', {
@@ -263,7 +295,7 @@
       },
       formulateValue: {
         type: [String, Number, Object, Boolean, Array],
-        default: false
+        default: ''
       },
       value: {
         type: [String, Number, Object, Boolean, Array],
@@ -279,7 +311,7 @@
       },
       id: {
         type: [String, Boolean, Number],
-        default: function () { return nanoid(9); }
+        default: false
       },
       label: {
         type: [String, Boolean],
@@ -292,16 +324,47 @@
       help: {
         type: [String, Boolean],
         default: false
+      },
+      debug: {
+        type: Boolean,
+        default: false
       }
     },
-    computed: {
-      context: context,
-      classification: function classification () {
+    data: function data () {
+      return {
+        defaultId: nanoid(9),
+        localAttributes: {}
+      }
+    },
+    computed: Object.assign({}, context,
+      {classification: function classification () {
         var classification = this.$formulate.classify(this.type);
         return (classification === 'box' && this.options) ? 'group' : classification
       },
       component: function component () {
-        return this.$formulate.component(this.type)
+        return (this.classification === 'group') ? 'FormulateInputGroup' : this.$formulate.component(this.type)
+      }}),
+    watch: {
+      '$attrs': {
+        handler: function handler (value) {
+          this.updateLocalAttributes(value);
+        },
+        deep: true
+      }
+    },
+    created: function created () {
+      this.updateLocalAttributes(this.$attrs);
+    },
+    mounted: function mounted () {
+      if (this.debug) {
+        console.log('MOUNTED:' + this.$options.name + ':' + this.type);
+      }
+    },
+    methods: {
+      updateLocalAttributes: function updateLocalAttributes (value) {
+        if (!shallowEqualObjects(value, this.localAttributes)) {
+          this.localAttributes = value;
+        }
       }
     }
   };
@@ -420,7 +483,7 @@
                     _c("label", {
                       staticClass:
                         "formulate-input-label formulate-input-label--before",
-                      attrs: { for: _vm.id },
+                      attrs: { for: _vm.context.attributes.id },
                       domProps: { textContent: _vm._s(_vm.context.label) }
                     })
                   ],
@@ -448,7 +511,7 @@
                     _c("label", {
                       staticClass:
                         "formulate-input-label formulate-input-label--after",
-                      attrs: { for: _vm.id },
+                      attrs: { for: _vm.context.attributes.id },
                       domProps: { textContent: _vm._s(_vm.context.label) }
                     })
                   ],
@@ -568,7 +631,8 @@
         var options = ref.options;
         var labelPosition = ref.labelPosition;
         var attributes = ref.attributes;
-        var rest = objectWithoutProperties( ref, ["options", "labelPosition", "attributes"] );
+        var classification = ref.classification;
+        var rest = objectWithoutProperties( ref, ["options", "labelPosition", "attributes", "classification"] );
         var context = rest;
         return this.options.map(function (option) { return this$1.groupItemContext(context, option); })
       }
@@ -653,10 +717,18 @@
    * Default base for input components.
    */
   var FormulateInputMixin = {
+    model: {
+      prop: 'formulateValue',
+      event: 'input'
+    },
     props: {
       context: {
         type: Object,
         required: true
+      },
+      formulateValue: {
+        type: [Object, Array, Boolean, String, Number],
+        default: ''
       }
     },
     computed: {
@@ -670,7 +742,7 @@
         return this.context.attributes || {}
       },
       hasValue: function hasValue () {
-        return !!this.context.model
+        return !!this.model
       }
     }
   };
@@ -1011,7 +1083,7 @@
         return this.context.optionGroups || false
       },
       placeholderSelected: function placeholderSelected () {
-        return !!(!this.hasValue && this.context.attributes.placeholder)
+        return !!(!this.hasValue && this.context.attributes && this.context.attributes.placeholder)
       }
     }
   };
@@ -1261,6 +1333,7 @@
     for (var componentName in this.options.components) {
       Vue.component(componentName, this.options.components[componentName]);
     }
+    Object.freeze(this);
   };
 
   /**
diff --git a/src/FormulateInput.vue b/src/FormulateInput.vue
index 114c174..c6a1458 100644
--- a/src/FormulateInput.vue
+++ b/src/FormulateInput.vue
@@ -12,7 +12,7 @@
       >
         <label
           class="formulate-input-label formulate-input-label--before"
-          :for="id"
+          :for="context.attributes.id"
           v-text="context.label"
         />
       </slot>
@@ -29,7 +29,7 @@
       >
         <label
           class="formulate-input-label formulate-input-label--after"
-          :for="id"
+          :for="context.attributes.id"
           v-text="context.label"
         />
       </slot>
@@ -44,7 +44,9 @@
 
 <script>
 import context from './libs/context'
+import { shallowEqualObjects } from './libs/utils'
 import nanoid from 'nanoid'
+import library from './libs/library'
 
 export default {
   name: 'FormulateInput',
@@ -60,7 +62,7 @@ export default {
     },
     formulateValue: {
       type: [String, Number, Object, Boolean, Array],
-      default: false
+      default: ''
     },
     value: {
       type: [String, Number, Object, Boolean, Array],
@@ -76,7 +78,7 @@ export default {
     },
     id: {
       type: [String, Boolean, Number],
-      default: () => nanoid(9)
+      default: false
     },
     label: {
       type: [String, Boolean],
@@ -89,16 +91,49 @@ export default {
     help: {
       type: [String, Boolean],
       default: false
+    },
+    debug: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      defaultId: nanoid(9),
+      localAttributes: {}
     }
   },
   computed: {
-    context,
+    ...context,
     classification () {
       const classification = this.$formulate.classify(this.type)
       return (classification === 'box' && this.options) ? 'group' : classification
     },
     component () {
-      return this.$formulate.component(this.type)
+      return (this.classification === 'group') ? 'FormulateInputGroup' : this.$formulate.component(this.type)
+    }
+  },
+  watch: {
+    '$attrs': {
+      handler (value) {
+        this.updateLocalAttributes(value)
+      },
+      deep: true
+    }
+  },
+  created () {
+    this.updateLocalAttributes(this.$attrs)
+  },
+  mounted () {
+    if (this.debug) {
+      console.log('MOUNTED:' + this.$options.name + ':' + this.type)
+    }
+  },
+  methods: {
+    updateLocalAttributes (value) {
+      if (!shallowEqualObjects(value, this.localAttributes)) {
+        this.localAttributes = value
+      }
     }
   }
 }
diff --git a/src/FormulateInputGroup.vue b/src/FormulateInputGroup.vue
index 1d78a56..c4203b9 100644
--- a/src/FormulateInputGroup.vue
+++ b/src/FormulateInputGroup.vue
@@ -25,7 +25,7 @@ export default {
       return this.context.options || []
     },
     optionsWithContext () {
-      const { options, labelPosition, attributes, ...context } = this.context
+      const { options, labelPosition, attributes, classification, ...context } = this.context
       return this.options.map(option => this.groupItemContext(context, option))
     }
   },
diff --git a/src/FormulateInputMixin.js b/src/FormulateInputMixin.js
index 9d5c4bd..df713e2 100644
--- a/src/FormulateInputMixin.js
+++ b/src/FormulateInputMixin.js
@@ -2,10 +2,18 @@
  * Default base for input components.
  */
 export default {
+  model: {
+    prop: 'formulateValue',
+    event: 'input'
+  },
   props: {
     context: {
       type: Object,
       required: true
+    },
+    formulateValue: {
+      type: [Object, Array, Boolean, String, Number],
+      default: ''
     }
   },
   computed: {
@@ -19,7 +27,7 @@ export default {
       return this.context.attributes || {}
     },
     hasValue () {
-      return !!this.context.model
+      return !!this.model
     }
   }
 }
diff --git a/src/formulate.js b/src/formulate.js
index 454aaa2..f092c5b 100644
--- a/src/formulate.js
+++ b/src/formulate.js
@@ -38,6 +38,7 @@ class Formulate {
     for (var componentName in this.options.components) {
       Vue.component(componentName, this.options.components[componentName])
     }
+    Object.freeze(this)
   }
 
   /**
diff --git a/src/inputs/FormulateInputSelect.vue b/src/inputs/FormulateInputSelect.vue
index 51ec039..c5bf09e 100644
--- a/src/inputs/FormulateInputSelect.vue
+++ b/src/inputs/FormulateInputSelect.vue
@@ -61,7 +61,7 @@ export default {
       return this.context.optionGroups || false
     },
     placeholderSelected () {
-      return !!(!this.hasValue && this.context.attributes.placeholder)
+      return !!(!this.hasValue && this.context.attributes && this.context.attributes.placeholder)
     }
   }
 }
diff --git a/src/libs/context.js b/src/libs/context.js
index 57e0fa6..ebf9eed 100644
--- a/src/libs/context.js
+++ b/src/libs/context.js
@@ -6,36 +6,45 @@ import { reduce, map } from './utils'
  * render that element.
  * @return {object}
  */
-export default function context () {
-  return defineModel.call(this, Object.assign({
-    type: this.type,
-    value: this.value,
-    classification: this.classification,
-    component: this.component,
-    id: this.id,
-    label: this.label,
-    labelPosition: labelPosition.call(this),
-    attributes: attributeReducer.call(this, this.$attrs)
-  }, typeContext.call(this)))
+export default {
+  context () {
+    if (this.debug) {
+      console.log(`${this.type} re-context`)
+    }
+    return defineModel.call(this, {
+      type: this.type,
+      value: this.value,
+      classification: this.classification,
+      component: this.component,
+      id: this.id || this.defaultId,
+      label: this.label,
+      labelPosition: this.logicalLabelPosition,
+      attributes: this.elementAttributes,
+      ...this.typeContext
+    })
+  },
+  typeContext,
+  elementAttributes,
+  logicalLabelPosition
 }
 
 /**
  * Given (this.type), return an object to merge with the context
  * @return {object}
+ * @return {object}
  */
 function typeContext () {
   switch (this.classification) {
     case 'select':
       return {
-        options: createOptionList(this.options),
-        optionGroups: this.optionGroups ? map(this.optionGroups, (k, v) => createOptionList(v)) : false,
+        options: createOptionList.call(this, this.options),
+        optionGroups: this.optionGroups ? map(this.optionGroups, (k, v) => createOptionList.call(this, v)) : false,
         placeholder: this.$attrs.placeholder || false
       }
     case 'group':
       if (this.options) {
         return {
-          options: createOptionList(this.options),
-          component: 'FormulateInputGroup'
+          options: createOptionList.call(this, this.options)
         }
       }
       break
@@ -48,18 +57,21 @@ function typeContext () {
  * Reducer for attributes that will be applied to each core input element.
  * @return {object}
  */
-function attributeReducer (attributes = {}) {
+function elementAttributes () {
+  const attrs = Object.assign({}, this.localAttributes)
   if (this.id) {
-    attributes.id = this.id
+    attrs.id = this.id
+  } else {
+    attrs.id = this.defaultId
   }
-  return attributes
+  return attrs
 }
 
 /**
  * Determine the a best-guess location for the label (before or after).
  * @return {string} before|after
  */
-function labelPosition () {
+function logicalLabelPosition () {
   if (this.labelPosition) {
     return this.labelPosition
   }
@@ -78,17 +90,22 @@ function labelPosition () {
  * @return {array}
  */
 function createOptionList (options) {
-  if (!Array.isArray(options)) {
-    return reduce(options, (options, value, label) => options.concat({ value, label, id: nanoid(15) }), [])
+  if (!Array.isArray(options) && options && typeof options === 'object') {
+    const optionList = []
+    const that = this
+    for (const value in options) {
+      optionList.push({ value, label: options[value], id: `${that.elementAttributes.id}_${value}` })
+    }
+    return optionList
   } else if (Array.isArray(options) && !options.length) {
-    return [{ value: this.name, label: (this.label || this.name), id: nanoid(15) }]
+    return [{ value: this.value, label: (this.label || this.name), id: this.context.id || nanoid(9) }]
   }
   return options
 }
 
 /**
- * Create a getter/setter model factory
- * @return object
+ * Defines the model used throughout the existing context.
+ * @param {object} context
  */
 function defineModel (context) {
   return Object.defineProperty(context, 'model', {
diff --git a/src/libs/utils.js b/src/libs/utils.js
index 2c9e950..f966686 100644
--- a/src/libs/utils.js
+++ b/src/libs/utils.js
@@ -39,3 +39,33 @@ export function reduce (original, callback, accumulator) {
   }
   return accumulator
 }
+
+/**
+ * Shallow equal.
+ * @param {} objA
+ * @param {*} objB
+ */
+export function shallowEqualObjects (objA, objB) {
+  if (objA === objB) {
+    return true
+  }
+  if (!objA || !objB) {
+    return false
+  }
+  var aKeys = Object.keys(objA)
+  var bKeys = Object.keys(objB)
+  var len = aKeys.length
+
+  if (bKeys.length !== len) {
+    return false
+  }
+
+  for (var i = 0; i < len; i++) {
+    var key = aKeys[i]
+
+    if (objA[key] !== objB[key]) {
+      return false
+    }
+  }
+  return true
+}
diff --git a/test/FormulateInputBox.test.js b/test/FormulateInputBox.test.js
index 76f6e78..3a4e660 100644
--- a/test/FormulateInputBox.test.js
+++ b/test/FormulateInputBox.test.js
@@ -42,3 +42,37 @@ test('labelPosition of type "checkbox" with options defaults to before', () => {
   const wrapper = mount(FormulateInput, { propsData: { type: 'checkbox', options: {a: '1', b: '2'}}})
   expect(wrapper.vm.context.labelPosition).toBe('before')
 })
+
+
+test('type radio renders multiple inputs with options', () => {
+  const wrapper = mount(FormulateInput, { propsData: { type: 'radio', options: {a: '1', b: '2'} } })
+  expect(wrapper.findAll('input[type="radio"]').length).toBe(2)
+})
+
+test('type "radio" auto generate ids if not provided', () => {
+  const wrapper = mount(FormulateInput, { propsData: { type: 'radio', options: {a: '1', b: '2'} } })
+  expect(wrapper.findAll('input[type="radio"]').is('[id]')).toBe(true)
+})
+
+/**
+ * Test data binding
+ */
+
+ test('type "checkbox" sets array of values via v-model', () => {
+  const wrapper = mount({
+    data () {
+      return {
+        checkboxValues: []
+      }
+    },
+    template: `
+      <div>
+        <FormulateInput type="checkbox" v-model="checkboxValues" :options="{foo: 'Foo', bar: 'Bar', fooey: 'Fooey'}" />
+      </div>
+    `
+  })
+  const fooInputs = wrapper.findAll('input[value^="foo"]')
+  expect(fooInputs.length).toBe(2)
+  fooInputs.setChecked(true)
+  expect(wrapper.vm.checkboxValues).toEqual(['foo', 'fooey'])
+})
diff --git a/test/FormulateInputText.test.js b/test/FormulateInputText.test.js
index 9fca806..8207962 100644
--- a/test/FormulateInputText.test.js
+++ b/test/FormulateInputText.test.js
@@ -3,6 +3,7 @@ import { mount } from '@vue/test-utils'
 import Formulate from '../dist/formulate.esm.js'
 import FormulateInput from '../src/FormulateInput.vue'
 import FormulateInputText from '../src/inputs/FormulateInputText.vue'
+import { doesNotReject } from 'assert';
 
 Vue.use(Formulate)
 
@@ -76,13 +77,13 @@ test('type "week" renders a text input', () => {
 })
 
 /**
- * Test functionality to text inputs
+ * Test rendering functionality to text inputs
  */
 
  test('text inputs automatically have id assigned', () => {
   const wrapper = mount(FormulateInput, { propsData: { type: 'text' } })
   expect(wrapper.vm.context).toHaveProperty('id')
-  expect(wrapper.find(`input[id="${wrapper.vm.id}"]`).exists()).toBe(true)
+  expect(wrapper.find(`input[id="${wrapper.vm.context.attributes.id}"]`).exists()).toBe(true)
  })
 
 test('text inputs dont have labels', () => {
@@ -92,7 +93,7 @@ test('text inputs dont have labels', () => {
 
 test('text inputs can have labels', () => {
   const wrapper = mount(FormulateInput, { propsData: { type: 'text', label: 'Field label' } })
-  expect(wrapper.find(`label[for="${wrapper.vm.id}"]`).exists()).toBe(true)
+  expect(wrapper.find(`label[for="${wrapper.vm.context.attributes.id}"]`).exists()).toBe(true)
 })
 
 test('text inputs dont have help text', () => {
@@ -104,3 +105,39 @@ test('text inputs dont have help text', () => {
   const wrapper = mount(FormulateInput, { propsData: { type: 'text', help: 'This is some help text' } })
   expect(wrapper.find(`.formulate-input-help`).exists()).toBe(true)
 })
+
+/**
+ * Test data binding
+ */
+test('text inputs emit input (vmodel) event with value when edited', () => {
+  const wrapper = mount(FormulateInput, { propsData: { type: 'text' } })
+  wrapper.find('input').setValue('Updated Value')
+  expect(wrapper.emitted().input).toBeTruthy()
+  expect(wrapper.emitted().input[0]).toEqual(['Updated Value'])
+})
+
+
+test('test that inputs that arent updated dont re-context themselves', () => {
+  const wrapper = mount({
+    data () {
+      return {
+        valueA: 'first value',
+        valueB: 'second value'
+      }
+    },
+    template: `
+      <div>
+        <FormulateInput type="text" ref="first" v-model="valueA" :placeholder="valueA" />
+        <FormulateInput type="text" ref="second" v-model="valueB" :placeholder="valueB" />
+      </div>
+    `
+  })
+  const firstContext = wrapper.find({ref: "first"}).vm.context
+  const secondContext = wrapper.find({ref: "second"}).vm.context
+  wrapper.find('input').setValue('new value')
+  expect(firstContext).toBeTruthy()
+  expect(wrapper.vm.valueA === 'new value').toBe(true)
+  expect(wrapper.vm.valueB === 'second value').toBe(true)
+  expect(wrapper.find({ref: "first"}).vm.context === firstContext).toBe(false)
+  expect(wrapper.find({ref: "second"}).vm.context === secondContext).toBe(true)
+})