Checkbox groups now return an array of booleans

README.md

@@ -482,9 +482,9 @@ A list of options where a user may choose more than one option to submit.
 | id | string (unique) | Set this to a unique string to allow this item to be looked up using `Clay.getItemsById()` in your [custom function](#custom-function). |
 | messageKey | string (unique) | The AppMessage key matching the `messageKey` item defined in your `package.json`.  Set this to a unique string to allow this item to be looked up using `Clay.getItemsByMessageKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. |
 | label | string | The label that should appear next to this item. |
-| defaultValue | array of strings | The default selected items. Each value must match one in the `options` array. |
+| defaultValue | array of booleans | The default selected items. |
 | description | string | Optional sub-text to include below the component |
-| options | array of objects | The options you want to appear in the checkbox group. Each option is an object with a `label` and `value` property. |
+| options | array of strings | The labels for each checkbox you want to appear in the checkbox group. |
 | capabilities | array | Array of features that the connected watch must have for this item to be present |
 
 ##### Example
@@ -494,24 +494,13 @@ A list of options where a user may choose more than one option to submit.
   "type": "checkboxgroup",
   "messageKey": "favorite_food",
   "label": "Favorite Food",
-  "defaultValue": ["sushi", "burgers"],
+  "defaultValue": [true, false, true],
-  "options": [
+  "options": ["Sushi", "Pizza", "Burgers"]
-    { 
-      "label": "Sushi", 
-      "value": "sushi" 
-    },
-    { 
-      "label": "Pizza", 
-      "value": "pizza" 
-    },
-    { 
-      "label": "Burgers", 
-      "value": "burgers" 
-    }
-  ]
 }
 ```
 
+In the above example, Sushi and Burgers will be selected by default.
+
 ---
 
 ### Generic Button
@@ -757,7 +746,7 @@ Eg: If you run the `.show()` manipulator on an item that is already visible, the
 | Method | Returns | Event Fired | Description | 
 |--------|---------|-------------| ------------|
 | `.set( [array] value)` | `ClayItem` | `change` | Checks the checkboxes that corresponds to the provided list of values. |
-| `.get()` |  `Array.<string>` | | Gets an array of strings representing the list of the values of the checked items. **NOTE:** each item in the array will be separated by a zero when sent to the watch. See [`Clay.getSettings()`](#methods) |
+| `.get()` |  `Array.<string>` | | Gets an array of booleans representing the list the checked items. **NOTE:** each item in the array will be converted to an `int` when sent to the watch. See [`Clay.getSettings()`](#methods) |
 | `.disable()` | `ClayItem` | `disabled` | Prevents this item from being edited by the user. |
 | `.enable()` | `ClayItem` | `enabled` | Allows this item to be edited by the user. |
 | `.hide()` | `ClayItem` | `hide` | Hides the item |

dev/config.js

@@ -121,13 +121,9 @@ module.exports = [
       {
         "type": "checkboxgroup",
         "messageKey": "checkboxgroup-test",
-        "defaultValue": ["quote' \"test", "two"],
+        "defaultValue": [0, 1, 0],
         "label": "Checkbox Group",
-        "options": [
+        "options": [ "First thing", "Another thing", "Final thing" ]
-          { "label": "First thing", "value": "three" },
-          { "label": "Another thing", "value": "two" },
-          { "label": "Final thing", "value": "three" }
-        ]
       },
       {
         "type": "select",

src/scripts/components/checkboxgroup.js

@@ -8,7 +8,6 @@ module.exports = {
   defaults: {
     label: '',
     options: [],
-    description: '',
+    description: ''
-    attributes: {}
   }
 };

src/scripts/lib/manipulators.js

@@ -133,24 +133,27 @@ module.exports = {
   checkboxgroup: {
     get: function() {
       var result = [];
-      this.$element.select('input:checked').each(function(item) {
+      this.$element.select('input').each(function(item) {
-        result.push(item.value);
+        result.push(!!item.checked);
       });
       return result;
     },
     set: function(values) {
       var self = this;
-      values = values || [];
+      values = Array.isArray(values) ? values : [];
+
+      while (values.length < this.get().length) {
+        values.push(false);
+      }
 
       if (_.equals(this.get(), values)) { return this; }
 
-      self.$element.select('input').set('checked', false);
+      self.$element.select('input')
+        .set('checked', false)
+        .each(function(item, index) {
+          item.checked = !!values[index];
+        });
 
-      values.map(function(value) {
-        self.$element
-          .select('input[value="' + value.toString(10).replace('"', '\\"') + '"]')
-          .set('checked', true);
-      });
       return self.trigger('change');
     },
     disable: disable,

src/templates/components/checkboxgroup.tpl

@@ -3,13 +3,8 @@
   <div class="checkbox-group">
     {{each options}}
       <label class="tap-highlight">
-        <span class="label">{{{this.label}}}</span>
+        <span class="label">{{{this}}}</span>
-        <input
+        <input type="checkbox" value="1" name="clay-{{clayId}}" />
-          type="checkbox"
-          value="{{this.value}}"
-          name="clay-{{clayId}}"
-          {{each key: attributes}}{{key}}="{{this}}"{{/each}}
-        />
         <i></i>
       </label>
     {{/each}}

test/spec/lib/clay-config.js

@@ -297,9 +297,9 @@ describe('ClayConfig', function() {
         ]},
         {type: 'toggle', messageKey: 'test3'},
         {type: 'checkboxgroup', messageKey: 'test4', options: [
-          {label: 'label-1', value: 'cb-1'},
+          'label-1',
-          {label: 'label-2', value: 'cb-2'},
+          'label-2',
-          {label: 'label-2', value: 'cb-3'}
+          'label-3'
         ]},
         {type: 'slider', messageKey: 'test5', step: 0.05, defaultValue: 12.5}
       ];
@@ -313,19 +313,19 @@ describe('ClayConfig', function() {
         test1: {value: 'default val'},
         test2: {value: 'val-2'},
         test3: {value: false},
-        test4: {value: []},
+        test4: {value: [false, false, false]},
         test5: {value: 12.5, precision: 2}
       });
 
       clayConfig.getItemByMessageKey('test1').set('val-1');
       clayConfig.getItemByMessageKey('test3').set(true);
-      clayConfig.getItemByMessageKey('test4').set(['cb-1', 'cb-3']);
+      clayConfig.getItemByMessageKey('test4').set([true, false, true]);
 
       assert.deepEqual(clayConfig.serialize(), {
         test1: {value: 'val-1'},
         test2: {value: 'val-2'},
         test3: {value: true},
-        test4: {value: ['cb-1', 'cb-3']},
+        test4: {value: [true, false, true]},
         test5: {value: 12.5, precision: 2}
       });
 
@@ -340,7 +340,7 @@ describe('ClayConfig', function() {
         test1: 'val-1',
         test2: 'val-2',
         test3: true,
-        test4: ['cb-1', 'cb-3'],
+        test4: [true, false, true],
         test5: 12.5
       });
       assert.doesNotThrow(function() {

test/spec/lib/manipulators.js

@@ -225,17 +225,20 @@ describe('manipulators', function() {
     var type = {
       type: 'checkboxgroup',
       clayId: 1,
-      defaultValue: ['two'],
+      defaultValue: [true, true, true],
-      options: [
+      options: ['First', 'Second', 'Third']
-        { label: '1', value: 'one' },
-        { label: '2', value: 'two' },
-        { label: '3', value: 'three "quote' }
-      ]
     };
-    testSetGet(type, ['one', 'two']);
+    testSetGet(type, [false, false, true]);
-    testSetGet(type, ['three "quote']);
+    testSetGet(type, [true, false], [true, false, false]);
-    testSetGet(type, []);
+    testSetGet(type, [1, 0], [true, false, false]);
-    testSetGet(type, false, []);
+    testSetGet(type, [true], [true, false, false]);
+    testSetGet(type, [1], [true, false, false]);
+    testSetGet(type, [], [false, false, false]);
+
+    // any non-array values should result in all false
+    testSetGet(type, false, [false, false, false]);
+    testSetGet(type, true, [false, false, false]);
+    testSetGet(type, null, [false, false, false]);
     testDisable(type);
     testEnable(type);
     testShow(type);