### Section
@@ -178,6 +178,7 @@ Standard text input field.
| appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`. Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` 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 | string | The default value of the input field. |
+| description | string | Optional sub-text to include below the component |
| attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attributes such as `required` or `type`. |
@@ -215,6 +216,7 @@ Switch for a single item.
| appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`. Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` 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 | int\|boolean | The default value of the toggle. Defaults to `false` if not specified. |
+| description | string | Optional sub-text to include below the component |
| attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attribute such as `required`. |
@@ -249,6 +251,7 @@ A dropdown menu containing multiple options.
| appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`. Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` 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 | string | The default value of the dropdown menu. Must match a value in the `options` array. |
+| description | string | Optional sub-text to include below the component |
| attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attribute such as `required`. |
| options | array of objects | The options you want to appear in the dropdown menu. Each option is an object with a `label` and `value` property. |
@@ -301,6 +304,7 @@ A color picker containing the 64 supported colors on Basalt and Chalk.
| appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`. Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` 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 | string OR int | The default color. Always use the uncorrected value even if `sunlight` is true. The component will do the conversion internally. |
+| description | string | Optional sub-text to include below the component |
| sunlight | boolean | Use the color-corrected sunlight color palette if `true`, else the uncorrected version. Defaults to `true` if not specified. |
##### Example
@@ -332,6 +336,7 @@ A list of options allowing the user can only choose one option to submit.
| appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`. Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` 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 | string | The default selected item. Must match a value in the `options` array. |
+| description | string | Optional sub-text to include below the component |
| attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attribute such as `required`. |
| options | array of objects | The options you want to appear in the radio group. Each option is an object with a `label` and `value` property. |
@@ -376,6 +381,7 @@ A list of options where a user may choose more than one option to submit.
| appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`. Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` 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. |
+| description | string | Optional sub-text to include below the component |
| attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attribute such as `required`. |
| 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. |
diff --git a/dev/config.js b/dev/config.js
index 76aa57a..7b13947 100644
--- a/dev/config.js
+++ b/dev/config.js
@@ -24,32 +24,31 @@ module.exports = [
"type": "input",
"appKey": "email",
"defaultValue": "",
- "label": "Email",
+ "label": "Input Field",
+ "description": "This is a description for the input component. " +
+ "You can add html in here too.",
"attributes": {
- "placeholder": "eg: name@domain.com",
- "limit": 10,
- "required": "required",
- type: "email"
+ "placeholder": "Placeholder set with attributes"
}
},
{
"type": "toggle",
"appKey": "cool_stuff",
- "label": "Enable Cool Stuff",
+ "label": "This is a Toggle",
"defaultValue": false
},
{
"type": "color",
"appKey": "colorTest",
"defaultValue": "FF0000",
- "label": "Background Color",
+ "label": "Standard Color Picker",
"sunlight": false
},
{
"type": "color",
"appKey": "sunnyColorTest",
"defaultValue": "00FF00",
- "label": "Sunny Color",
+ "label": "Sunny Color Picker",
"sunlight": true
}
]
@@ -64,46 +63,33 @@ module.exports = [
{
"type": "radiogroup",
"appKey": "radiogroup-test",
- "label": "Radio test",
+ "label": "Radio Group",
"options": [
- { "label": "Test thing one", "value": "one" },
+ { "label": "Test thing", "value": "one" },
{ "label": "Another thing", "value": "two" },
- { "label": "One really long thing that would not fit", "value": "three" },
- { "label": "Small", "value": "quote' \"test" },
- { "label": "Final thing", "value": "three" }
+ { "label": "Final thing with html", "value": "three" }
]
},
{
"type": "checkboxgroup",
"appKey": "checkboxgroup-test",
"defaultValue": ["quote' \"test", "two"],
- "label": "Checkbox test",
+ "label": "Checkbox Group",
"options": [
- { "label": "Test thing one", "value": "one" },
+ { "label": "First thing", "value": "three" },
{ "label": "Another thing", "value": "two" },
- { "label": "One really long thing that would not fit", "value": "three" },
- { "label": "Small", "value": "quote' \"test" },
{ "label": "Final thing", "value": "three" }
]
},
- {
- "type": "input",
- "appKey": "date",
- "defaultValue": "",
- "label": "Range",
- "attributes": {
- type: "range"
- }
- },
{
"type": "select",
"appKey": "flavor",
"defaultValue": "grape",
- "label": "Favorite Flavor",
+ "label": "Select Menu",
"options": [
{ "label": "", "value": "" },
{ "label": "Berry", "value": "berry" },
- { "label": "Grape", "value": "grape" },
+ { "label": "This Option is Selected", "value": "grape" },
{ "label": "Banana", "value": "banana" }
],
"attributes": {
diff --git a/dist/clay.js b/dist/clay.js
index c0ec8eb..f891e71 100644
--- a/dist/clay.js
+++ b/dist/clay.js
@@ -1,3 +1,3 @@
-/* Clay - https://github.com/pebble/clay - Version: 0.1.0 - Build Date: 2016-02-29T01:15:16.630Z */
-!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.clay=t()}}(function(){return function t(e,n,o){function r(a,c){if(!n[a]){if(!e[a]){var s="function"==typeof require&&require;if(!c&&s)return s(a,!0);if(i)return i(a,!0);var l=new Error("Cannot find module '"+a+"'");throw l.code="MODULE_NOT_FOUND",l}var u=n[a]={exports:{}};e[a][0].call(u.exports,function(t){var n=e[a][1][t];return r(n?n:t)},u,u.exports,t,e,n,o)}return n[a].exports}for(var i="function"==typeof require&&require,a=0;a