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>

src/directives/decorators/bootstrap/actions.html

@@ -1,4 +1,4 @@
-<div class="form-group" ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}" ng-init="checkboxValues = {}">
+<div class="form-group" ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}" ng-init="checkboxValues = listToCheckboxValues($$value$$)">
   <label ng-show="showTitle()">{{form.title}}</label>
   <div class="checkbox" ng-repeat="value in form.schema.items.enum" >
     <label>

src/directives/decorators/bootstrap/array.html

@@ -1,7 +1,7 @@
 <div class="form-group" ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
   <label ng-show="showTitle()">{{form.title}}</label>
   <div class="btn-group">
-    <label class="btn btn-primary"
+    <label class="btn {{ (value === $$value$$) ? form.style.selected || 'btn-primary' : form.style.unselected || 'btn-primary'; }}"
            ng-class="{ active: value === $$value$$ }"
            ng-repeat="(value,name) in form.titleMap">
       <input type="radio"

src/directives/decorators/bootstrap/checkboxes.html

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

src/directives/decorators/bootstrap/radio-buttons.html

@@ -21,7 +21,7 @@
 
   <div ng-class="{'col-xs-9': !form.tabsType || form.tabsType === 'left' || form.tabsType === 'right'}">
     <div class="tab-content">
-      <div class="tab-pane claerfix"
+      <div class="tab-pane clearfix"
            ng-repeat="item in modelArray track by $index"
            ng-show="selected.tab === $index"
            ng-class="{active: selected.tab === $index}">
@@ -30,7 +30,7 @@
 
            <button ng-click="deleteFromArray($index)"
                    type="button"
-                   class="btn btn-default pull-right">
+                   class="btn {{ form.style.remove || 'btn-default' }} pull-right">
              <i class="glyphicon glyphicon-trash"></i>
              {{ form.remove || 'Remove'}}
            </button>

src/directives/decorators/bootstrap/submit.html

@@ -5,7 +5,7 @@
  *
  * @description
  * Utility method to access deep properties without
- * trhowing errors when things are not defined.
+ * throwing errors when things are not defined.
  * Can also set a value in a deep structure, creating objects when missing
  * ex.
  * var foo = Select('address.contact.name',obj)

src/directives/decorators/bootstrap/tabarray.html

@@ -65,6 +65,14 @@ angular.module('schemaForm').provider('schemaFormDecorators',['$compileProvider'
               return scope.form && scope.form.notitle !== true && scope.form.title;
             };
 
+            scope.listToCheckboxValues = function(list){
+              var values = {};
+              angular.forEach(list,function(v){
+                values[v] = true;
+              });
+              return values;
+            };
+
             scope.checkboxValuesToList = function(values){
               var lst = [];
               angular.forEach(values,function(v,k){

src/services/Select.js

@@ -25,7 +25,7 @@ angular.module('schemaForm').provider('schemaForm',[function(){
     if (schema.title) f.title = schema.title;
     if (schema.description) f.description = schema.description;
     if (options.required === true || schema.required === true) f.required = true;
-    if (schema.default) f.default = schema.default;
+    if (schema.default !== undefined) f.default = schema.default;
     if (schema.maxLength) f.maxlength = schema.maxLength;
     if (schema.minLength) f.minlength = schema.maxLength;
     if (schema.readOnly || schema.readonly)  f.readonly  = schema.readOnly || schema.readonly;