Merge branch 'release/v0.6.0'

Author: davidlgj

CHANGELOG

@@ -1,9 +1,16 @@
+v0.6.0
+------
+ * array and tabarray support, with help from @zackbloom (thanks!).
+   Schema type array now translates to a list of objects, adding, removing
+   and reordering supported. Form  type "tabarray" does the same but renders
+   it as tabs instead (configurable to left, right or top)
+
 v0.5.0
 ------
  * Travis and Coveralls integration
  * Support for HTML in descriptons and some titles, (checkbox(es), radios).
  * ngSanitize is now a dependency.
- * Enum order is now maintained in selects (thanks @adamschwartz) 
+ * Enum order is now maintained in selects (thanks @adamschwartz)
 
 v0.4.0
 ------

README.md

@@ -14,7 +14,7 @@ Generate forms from a JSON schema, with AngularJS!
 What is it?
 ----------
 
-Schema Form is a set of AngularJS directives (and a service..) that can create a form directly from a json schema
+Schema Form is a set of AngularJS directives (and a couple of services..) that can create a form directly from a json schema
 definition and also validate against that schema. The defaults may be fine for a lot cases, but you can also
 customize it, changing order and type of fields.
 
@@ -77,11 +77,23 @@ manually)
 
 It depends on [AngularJS](https://angularjs.org/) (duh!),
 [angular-sanitize](https://docs.angularjs.org/api/ngSanitize),
+[bootstrap 3](http://getbootstrap.com/),
 [tv4](https://github.com/geraintluff/tv4), and
 if you like to use the date picker you also need jQuery and
 [pickadate.js](http://amsul.ca/pickadate.js/). Also if you use the ```help```
 type to inject HTML you'll want to use ngSanitize as well.
 
+If you like to have drag and drop reordering of arrays you also need
+[ui-sortable](https://github.com/angular-ui/ui-sortable) and its dependencies
+[jQueryUI](http://jqueryui.com/), see *ui-sortable* documentation for details of
+what parts of jQueryUI that is needed. You can safely ignore these if you don't
+need the reordering.
+
+Tabbed arrays, form type ```tabarray```, defaults to tabs on the left side. For
+these to work you also need to include the css from
+[bootstrap-vertical-tabs](https://github.com/dbtek/bootstrap-vertical-tabs).
+It is not needed for tabs on top, the  ```tabType: "top"``` option.
+
 The minified files also includes all templates so they are all you need.
 
 Addons

bower.json

@@ -5,14 +5,15 @@
     "dist/bootstrap-decorator.min.js",
     "dist/bootstrap-datepicker.min.js"
   ],
-  "version": "0.5.0",
+  "version": "0.6.0",
   "authors": [
     "Textalk",
     "David Jensen <david.lgj@gmail.com>"
   ],
   "moduleType": [
     "globals"
   ],
+  "keywords": ["angular","angularjs","form","json","json-schema","schema"],
   "license": "MIT",
   "ignore": [
     "**/.*",
@@ -25,7 +26,8 @@
     "angular": "~1.2.18",
     "tv4": "~1.0.15",
     "pickadate": "~3.5.2",
-    "angular-sanitize": "~1.2.18"
+    "angular-sanitize": "~1.2.18",
+    "bootstrap-vertical-tabs": "~1.1.0"
   },
   "devDependencies": {
     "angular-ui-ace": "bower"

dist/bootstrap-decorator.min.js

@@ -18,6 +18,8 @@ Documentation
     1. [radios and radiobuttons](#radios-and-radiobuttons)
     1. [help](#help)
     1. [tabs](#tabs)
+    1. [array](#array)
+    1. [tabarray](#tabarray)
 1. [Post process function](#post-process-function)
 
 Form types
@@ -42,6 +44,8 @@ Schema Form currently supports the following form field types out of the box:
 | radiobuttons  |  radio buttons with bootstrap buttons |
 | help          |  insert arbitrary html |
 | tab           |  tabs with content     |
+| array         |  a list you can add, remove and reorder |
+| tabarray      |  a tabbed version of array |
 
 More field types can be added, for instance a "datepicker" type can be added by
 including the [datepicker addon](datepicker.md)
@@ -62,6 +66,8 @@ a property.
 | "type": "object"   |   fieldset   |
 | "type": "string" and a "enum" | select |
 | "type": "array" and a "enum" in array type | checkboxes |
+| "type": "array" | array |
+
 
 
 Form definitions
@@ -455,6 +461,187 @@ function FormCtrl($scope) {
 }
 ```
 
+### array
+The ```array``` form type is the default for the schema type ```array```.
+The schema for an array has the property ```"items"``` which in the JSON Schema
+specification can be either another schema (i.e. and object), or a list of
+schemas. Only a schema is supported by Schema Form, and not the list of schemas.
+
+The *form* definition has the option ```ìtems``` that should be a list
+of form objects.
+
+The rendered list of subforms each have a remove button and at the bottom there
+is an add button. The text of the add button can be changed by the option
+ ```add``` , see example below.
+
+If you like to have drag and drop reordering of arrays you also need
+[ui-sortable](https://github.com/angular-ui/ui-sortable) and its dependencies
+[jQueryUI](http://jqueryui.com/), see *ui-sortable* documentation for details of
+what parts of jQueryUI that is needed. You can safely ignore these if you don't
+need the reordering.
+
+In the form definition you can refer to properties of an array item by the empty
+bracket notation. In the ```key``` simply end the name of the array with ```[]```
+
+Given the schema:
+```json
+{
+  "type": "object",
+  "properties": {
+    "subforms": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "name": { "type": "string" },
+          "nick": { "type": "string" },
+          "emails": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
+Then ```subforms[].name``` refers to the property name of any subform item,
+```subforms[].emails[]``` refers to the subform of emails. See example below for
+usage.
+
+
+Single list of inputs example:
+```javascript
+function FormCtrl($scope) {
+  $scope.schema = {
+    type: "object",
+    properties: {
+      names: {
+        type: "array",
+        items: {
+          title: "Name",
+          type: "string"
+        }
+      }
+    }
+  };
+
+  $scope.form = ['*'];
+}
+```
+
+
+Example with sub form, note that you can get rid of the form field the object wrapping the
+subform fields gives you per default by using the ```items``` option in the
+form definition.
+
+```javascript
+function FormCtrl($scope) {
+  $scope.schema = {
+    "type": "object",
+    "properties": {
+      "subforms": {
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "name": { "type": "string" },
+            "nick": { "type": "string" },
+            "emails": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+
+
+  $scope.form = [
+    {
+      key: "subforms",
+      add: "Add person",
+      items: [
+        "subforms[].nick",
+        "subforms[].name",
+        "subforms[].emails",
+      ]
+    }
+  ];
+}
+```
+
+
+### tabarray
+The ```tabarray``` form type behaves the same way and has the same options as
+```array``` but instead of rendering a list it renders a tab per item in list.
+
+By default the tabs are on the left side (follows the default in JSON Form),
+but with the option ```tabType``` you can change that to eiter *"top"* or *"right"*
+as well.
+
+Every tab page has a *"Remove"* button, you can change the text on that with
+the ```remove``` option.
+
+Bootstrap 3 doesn't have side tabs so to get proper styling you need to add the
+dependency [bootstrap-vertical-tabs](https://github.com/dbtek/bootstrap-vertical-tabs).
+It is not needed for tabs on top.
+
+The ```title``` option is a bit special in ```tabarray```, it defines the title
+of the tab and is considered a angular expression. The expression is evaluated
+with two extra variables in context: **value** and **$index**, where **value**
+is the value in the array (i.e. that tab) and **$index** the index.  
+
+Example with tabs on the top:
+
+```javascript
+function FormCtrl($scope) {
+  $scope.schema = {
+    "type": "object",
+    "properties": {
+      "subforms": {
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "name": { "type": "string" },
+            "nick": { "type": "string" },
+            "emails": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+
+
+  $scope.form = [
+    {
+      type: "tabarray",
+      tabType: "top",
+      title: "value.nick || ('Tab '+$index)"
+      key: "subforms",
+      add: "Add person",
+      items: [
+        "subforms[].nick",
+        "subforms[].name",
+        "subforms[].emails",
+      ]
+    }
+  ];
+}
+```
+
+