docs: add documentation of all types and wrappers

as separate files and just link to them in readme

Author: Kamil Kisiela

README.md

@@ -45,233 +45,33 @@ angular.module('myAppName', [
 
 Any requests? Add issue!
 
-## Common properties
-
-### label (string)
-
-### theme (string)
-
-md-theme attribute
-
 ## Fields
 
-### input
-
-```javascript
-{
-  "type": "input",
-  "key": "firstName",
-  "templateOptions": {
-    "type": "text",
-    "label": "First name",
-    "theme": "custom"
-  }
-}
-```
-
-### textarea
-
-**rows (number, optional)**
-
-```javascript
-{
-  "type": "textarea",
-  "key": "bio",
-  "templateOptions": {
-    "label": "Biography",
-    "theme": "custom",
-    "rows": 5
-  }
-}
-```
-
-### radio
-
-**options (array, requred)**
-
-**labelProp (string, optional)**
-
-**valueProp (string, optional)**
-
-```javascript
-{
-  "type": "radio",
-  "key": "name",
-  "templateOptions": {
-    "label": "Name",
-    "theme": "custom",
-    "labelProp": "firstName",
-    "valueProp": "id",
-    "options": [
-        {"firstName": "Sarah", id: 1},
-        {"firstName": "Jessica", id: 2},
-        {"firstName": "Parker", id: 3}
-    ]
-  }
-}
-```
-
-### select
-
-**options (array, requred)**
-
-**labelProp (string, optional)**
-
-**valueProp (string, optional)**
-
-**multiple (boolean, optional)**
-
-```javascript
-{
-  "type": "select",
-  "key": "name",
-  "templateOptions": {
-    "label": "Name",
-    "theme": "custom",
-    "multiple": true,
-    "labelProp": "firstName",
-    "valueProp": "id",
-    "options": [
-        {"firstName": "Sarah", id: 1},
-        {"firstName": "Jessica", id: 2},
-        {"firstName": "Parker", id: 3}
-    ]
-  }
-}
-```
-
-### checkbox
-
-```javascript
-{
-  "type": "checkbox",
-  "key": "terms",
-  "templateOptions": {
-    "label": "Terms and Conditions",
-    "theme": "custom"
-  }
-}
-```
-
-### switch
-
-```javascript
-{
-  "type": "switch",
-  "key": "terms",
-  "templateOptions": {
-    "label": "Terms and Conditions",
-    "theme": "custom"
-  }
-}
-```
-
-### datepicker
-
-**placeholder (string, optional)**
-
-md-placeholder
-
-**minDate (Date, optional)**
-
-md-min-date
-
-**maxDate (Date, optional)**
-
-md-max-date
-
-**filterDate (function, optional)**
-
-md-filter-date
-
-```javascript
-{
-  "type": "datepicker",
-  "key": "start",
-  "templateOptions": {
-    "theme": "custom",
-    "placeholder": "Start date",
-    "minDate": minDate, // instance of Date
-    "maxDate": maxDate, // instance of Date
-    "filterDate": function(date) {
-        // only weekends
-        var day = date.getDay();
-        return day === 0 || day === 6;
-    }
-  }
-}
-```
-
-### chips
-
-**placeholder (string, optional)**
-
-placeholder attribute value
-
-**secondaryPlaceholder (string, optional)**
-
-secondary-placeholder attribute value
-
-**deleteButtonLabel (string, optional)**
-
-delete-button-label attribute value
+* [checkbox][types.checkbox]
+* [chips][types.chips]
+* [datepicker][types.datepicker]
+* [input][types.input]
+* [radio][types.radio]
+* [select][types.select]
+* [slider][types.slider]
+* [switch][types.switch]
+* [textarea][types.textarea]
 
-**deleteHint (string, optional)**
-
-delete-hint attribute value
-
-```javascript
-{
-  "type": "chips",
-  "key": "tags",
-  "templateOptions": {
-    "theme": "custom",
-    "placeholder": "+tags",
-    "secondaryPlaceholder": "Add tag",
-    "deleteButtonLabel": "Remove",
-    "deleteHint": "Remove tag"
-  }
-}
-```
-
-### slider
-
-**min (number, optional)**
-
-default 1
-
-**max (number, optional)**
-
-default 100
-
-**step (number, optional)**
-
-default 1
+## Wrappers
 
-**discrete (boolean, optional)**
+* [input-container][wrappers.input-container]
+* [label][wrappers.label]
+* [messages][wrappers.messages]
 
-default false (md-discrete)
+## Common settings
 
-```javascript
-{
-    "type": "slider",
-    "key": "rate",
-    "templateOptions": {
-        "theme": "custom",
-        "min": 1,
-        "max": 5,
-        "step": 0.5,
-        "discrete": true
-    }
-}
-```
+### label (string)
 
+Text used as a field's label
 
-## Wrappers
+### theme (string)
 
-- inputContainer (md-input-container)
-- label
-- messages (ng-messages)
+Value of md-theme used on field
 
 ## Roadmap
 
@@ -289,3 +89,17 @@ default false (md-discrete)
 - [ ] e2e tests
 
 Requests (?). Post an issue.
+
+[types.checkbox]: docs/types/checkbox.md
+[types.chips]: docs/types/chips.md
+[types.datepicker]: docs/types/datepicker.md
+[types.input]: docs/types/input.md
+[types.radio]: docs/types/radio.md
+[types.select]: docs/types/select.md
+[types.slider]: docs/types/slider.md
+[types.switch]: docs/types/switch.md
+[types.textarea]: docs/types/textare.md
+
+[wrappers.input-container]: docs/wrappers/input-container.md
+[wrappers.label]: docs/wrappers/label.md
+[wrappers.messages]: docs/wrappers/messages.md

docs/types/checkbox.md

@@ -0,0 +1,21 @@
+# checkbox
+## md-checkbox
+
+### Example
+
+```javascript
+{
+  "type": "checkbox",
+  "key": "terms",
+  "templateOptions": {
+    "label": "Terms and Conditions",
+    "theme": "custom"
+  }
+}
+```
+
+### Configuration
+
+#### templateOptions.label _: string_
+
+#### templateOptions.theme _: string_

docs/types/chips.md

@@ -0,0 +1,36 @@
+# chips
+## md-chips
+
+### Example
+
+```javascript
+{
+  "type": "chips",
+  "key": "tags",
+  "templateOptions": {
+    "theme": "custom",
+    "placeholder": "+tags",
+    "secondaryPlaceholder": "Add tag",
+    "deleteButtonLabel": "Remove",
+    "deleteHint": "Remove tag"
+  }
+}
+```
+
+### Configuration
+
+#### templateOptions.label _: string_
+
+#### templateOptions.theme _: string_
+
+#### templateOptions.placeholder _: string_
+Placeholder text that will be forwarded to the input.
+
+#### templateOptions.secondaryPlaceholder _: string_
+Placeholder text that will be forwarded to the input, displayed when there is at least on item in the list.
+
+#### templateOptions.deleteButtonLabel _: string_
+A label for the delete button. Also hidden and read by screen readers.
+
+#### templateOptions.deleteHint _: string_
+A string read by screen readers instructing users that pressing the delete key will remove the chip.

docs/types/datepicker.md

@@ -0,0 +1,56 @@
+# datepicker
+## md-datepicker
+
+**placeholder (string, optional)**
+
+md-placeholder
+
+**minDate (Date, optional)**
+
+md-min-date
+
+**maxDate (Date, optional)**
+
+md-max-date
+
+**filterDate (function, optional)**
+
+md-filter-date
+
+### Example
+
+```javascript
+{
+  "type": "datepicker",
+  "key": "start",
+  "templateOptions": {
+    "theme": "custom",
+    "placeholder": "Start date",
+    "minDate": minDate, // instance of Date
+    "maxDate": maxDate, // instance of Date
+    "filterDate": function(date) {
+        // only weekends
+        var day = date.getDay();
+        return day === 0 || day === 6;
+    }
+  }
+}
+```
+
+### Configuration
+
+#### templateOptions.label _: string_
+
+#### templateOptions.theme _: string_
+
+#### templateOptions.placeholder _: string_
+The date input placeholder value
+
+#### templateOptions.minDate _: Date_
+Min date of choice
+
+#### templateOptions.maxDate _: Date_
+Max date of choice
+
+#### templateOptions.filterDate _: function_
+Function expecting a date and returning a boolean whether it can be selected or not.