add radio component

src/scripts/components/index.js

@@ -8,5 +8,6 @@ module.exports = {
   select: require('./select'),
   submit: require('./submit'),
   text: require('./text'),
-  toggle: require('./toggle')
+  toggle: require('./toggle'),
+  radio: require('./radio')
 };

src/scripts/components/radio.js

@@ -0,0 +1,12 @@
+'use strict';
+
+module.exports = {
+  name: 'radio',
+  template: require('../../templates/components/radio.tpl'),
+  style: require('../../styles/clay/components/radio.scss'),
+  manipulator: 'radio',
+  defaults: {
+    label: '',
+    options: [],
+  }
+};

src/scripts/lib/clay-config.js

@@ -53,22 +53,25 @@ function ClayConfig(settings, config, $rootContainer) {
       $container.add($wrapper);
       _addItems(item.items, $wrapper);
     } else {
-      var clayItem = new ClayItem(item).initialize();
+      var _item = _.copyObj(item);
+      _item.clayId = _items.length;
 
-      if (item.id) {
-        _itemsById[item.id] = clayItem;
+      var clayItem = new ClayItem(_item).initialize();
+
+      if (_item.id) {
+        _itemsById[_item.id] = clayItem;
       }
 
-      if (item.appKey) {
-        _itemsByAppKey[item.appKey] = clayItem;
+      if (_item.appKey) {
+        _itemsByAppKey[_item.appKey] = clayItem;
       }
 
       _items.push(clayItem);
 
       // set the value of the item via the manipulator to ensure consistency
-      var value = typeof _settings[item.appKey] !== 'undefined' ?
-        _settings[item.appKey] :
-        (item.defaultValue || '');
+      var value = typeof _settings[_item.appKey] !== 'undefined' ?
+        _settings[_item.appKey] :
+        (_item.defaultValue || '');
 
       clayItem.set(value);
 

src/scripts/lib/clay-item.js

@@ -58,7 +58,7 @@ function ClayItem(config) {
   };
 
   // attach event methods
-  ClayEvents.call(self, self.$manipulatorTarget);
+  ClayEvents.call(self, self.$element);
 
   // attach the manipulator methods to the clayItem
   _.eachObj(_component.manipulator, function(methodName, method) {

src/scripts/lib/manipulators.js

@@ -48,6 +48,19 @@ module.exports = {
     disable: disable,
     enable: enable
   },
+  radio: {
+    get: function() {
+      return this.$element.select('input:checked').get('value');
+    },
+    set: function(value) {
+      this.$element
+        .select('input[value="' + value.replace('"', '\\"') + '"]')
+        .set('checked', true);
+      return this.trigger('change');
+    },
+    disable: disable,
+    enable: enable
+  },
   color: {
     get: function() {
       return parseInt(this.$manipulatorTarget.get('value'), 16);