Merge branch 'development' into update-docs

Author: cameronprattedwards

dist/bootstrap-decorator.min.js

@@ -332,6 +332,18 @@ of the titleMap can be HTML.
 }
 ```
 
+The submit button has btn-primary as default. The button has btn-default as default. 
+We can change this with ```style``` attribute:
+```javascript
+{
+  type: "actions",
+  items: [
+    { type: 'submit', style: 'btn-success', title: 'Ok' }
+    { type: 'button', style: 'btn-info', title: 'Cancel', onClick: "cancel()" }
+  ]
+}
+``` 
+
 ### button
 
 *button* can have a ```onClick``` attribute that either, as in JSON Form, is a function *or* a
@@ -345,6 +357,15 @@ the ```sf-schema``` directive.
 [
 ```
 
+The submit button has btn-primary as default. The button has btn-default as default. 
+We can change this with ```style``` attribute:
+```javascript
+[
+  { type: 'button', style: 'btn-warning', title: 'Ok', onClick: function(){ ...  } }
+  { type: 'button', style: 'btn-danger', title: 'Cancel', onClick: "cancel()" }
+[
+``` 
+
 ### radios and radiobuttons
 Both type *radios* and *radiobuttons* work the same way, they take a titleMap
 and renders ordinary radio buttons or bootstrap 3 buttons inline. It's a
@@ -376,6 +397,37 @@ function FormCtrl($scope) {
 }
 ```
 
+With *radiobuttons*, both selected and unselected buttons have btn-primary as default. 
+We can change this with ```style``` attribute:
+```javascript
+function FormCtrl($scope) {
+  $scope.schema = {
+    type: "object",
+    properties: {
+      choice: {
+        type: "string",
+        enum: ["one","two"]
+      }
+    }
+  };
+
+  $scope.form = [
+    {
+      key: "choice",
+      type: "radiobuttons",
+      style: {
+		selected: "btn-success",
+		unselected: "btn-default"
+	  },
+	  titleMap: {
+        one: "One",
+        two: "More..."
+      }
+    }
+  ];
+}
+```
+
 ### help
 Help fields is not really a field, but instead let's you insert arbitrary HTML
 into a form, suitable for help texts with links etc.
@@ -470,9 +522,9 @@ 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.
+The rendered list of subforms each have a *"Remove"* button and at the bottom there
+is an *"Add"* button. The default *"Add"* button has class btn-default and text Add. Both 
+could be changed using attribute ```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
@@ -566,6 +618,9 @@ function FormCtrl($scope) {
     {
       key: "subforms",
       add: "Add person",
+      style: {
+		add: "btn-success"
+	  },
       items: [
         "subforms[].nick",
         "subforms[].name",
@@ -585,8 +640,11 @@ 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.
+Every tab page has a *"Remove"* button. The default *"Remove"* button has class btn-default 
+and text Remove. Both could be changed using attribute ```remove```, see example below. 
+
+In this case we have an *"Add"* link, not an *"Add"* button. Therefore, the attribute ```add``` 
+only changes the text of the link. See example below.
 
 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).
@@ -630,7 +688,11 @@ function FormCtrl($scope) {
       tabType: "top",
       title: "value.nick || ('Tab '+$index)"
       key: "subforms",
-      add: "Add person",
+      remove: "Delete",
+      style: {
+		remove: "btn-danger"
+	  },
+	  add: "Add person",
       items: [
         "subforms[].nick",
         "subforms[].name",

dist/schema-form.min.js

@@ -37,6 +37,10 @@
     },
     {
       "key": "comments",
+	  "add": "New",
+	  "style": {
+		"add": "btn-success"
+	  },
       "items": [
         "comments[].name",
         "comments[].email",
@@ -48,6 +52,7 @@
     },
     {
       "type": "submit",
+      "style": "btn-info",
       "title": "OK"
     }
   ]

docs/index.md

@@ -31,6 +31,7 @@
     },
     {
       "type": "submit",
+	  "style": "btn-info",
       "title": "OK"
     }
   ]

examples/data/array.json

@@ -182,17 +182,23 @@
         },
         {
             "key": "radiobuttons",
+			"style": {
+				"selected": "btn-success",
+				"unselected": "btn-default"
+			},
             "type": "radiobuttons"
         },
         {
             "type": "actions",
             "items": [
                 {
                     "type": "submit",
+					"style": "btn-info",
                     "title": "Do It!"
                 },
                 {
                     "type": "button",
+                    "style": "btn-danger",
                     "title": "Noooooooooooo",
                     "onClick": "sayNo()"
                 }

examples/data/simple.json

@@ -38,6 +38,11 @@
     {
       "key": "comments",
       "type": "tabarray",
+	  "add": "New",
+	  "remove": "Delete",
+	  "style": {
+		"remove": "btn-danger"
+	  },
       "title": "value.name || 'Tab '+$index",
       "items": [
         "comments[].name",
@@ -50,6 +55,7 @@
     },
     {
       "type": "submit",
+      "style": "btn-default",
       "title": "OK"
     }
   ]

examples/data/sink.json

@@ -69,7 +69,18 @@ gulp.task('minify',function(){
 });
 
 
-gulp.task('default',['minify','bootstrap','bootstrap-datepicker']);
+gulp.task('non-minified-dist',function(){
+  gulp.src([
+    './src/module.js',
+    './src/services/*.js',
+    './src/directives/*.js'
+  ])
+  .pipe(concat('schema-form.js'))
+  .pipe(gulp.dest('./dist/'));
+});
+
+
+gulp.task('default',['minify','bootstrap','bootstrap-datepicker','non-minified-dist']);
 
 
 gulp.task('watch', function() {

examples/data/tabarray.json

@@ -1,10 +1,10 @@
 <div class="btn-group">
   <input ng-repeat-start="item in form.items"
          type="submit"
-         class="btn btn-primary"
+         class="btn {{ item.style || 'btn-primary' }}"
          value="{{item.title}}"
          ng-if="item.type === 'submit'">
-  <button ng-repeat-end class="btn btn-default"
+  <button ng-repeat-end class="btn {{ item.style || 'btn-default' }}"
           type="button"
           ng-if="item.type !== 'submit'"
           ng-click="buttonClick($event,item)">{{item.title}}</button>

gulpfile.js

@@ -13,7 +13,7 @@ <h3 ng-show="form.title && form.notitle !== true">{{ form.title }}</h3>
   <div class="clearfix" style="padding: 15px;">
     <button ng-click="appendToArray()"
             type="button"
-            class="btn btn-default pull-right">
+            class="btn {{ form.style.add || 'btn-default' }} pull-right">
       <i class="glyphicon glyphicon-plus"></i>
       {{ form.add || 'Add'}}
     </button>