Latest working version

* Added optionData attribute for defining a variable on parent scope to
act as the titleMap source for select
* Reformatted main decorator file to follow
https://github.com/johnpapa/angular-styleguide
* General clean up
* Converted some bindings to one-way, can review if this was needed
later, but expect that the builder will refresh the content if it
changes anyway

Author: iamanthropic

examples/data/sink.json

@@ -187,14 +187,9 @@
     },
     "soul",
     {
-      "type": "conditional",
       "condition": "modelData.soul",
-      "items": [
-        {
-          "key": "soulserial",
-          "placeholder": "ex. 666"
-        }
-      ]
+      "key": "soulserial",
+      "placeholder": "ex. 666"
     },
     {
       "key": "date",

examples/data/titlemaps.json

@@ -16,7 +16,8 @@
         "type": "string",
         "enum": ["a","b","c"]
       },
-      "noenum": { "type": "string", "title": "No enum, but forms says it's a select" },
+      "noenum": { "type": "string", "title": "No enum, but forms says it's a select", "default": "a3" },
+      "selectOptionData": { "type": "string", "title": "Dynamic Options", "default": "The Terminator" },
       "array": {
         "title": "Array with enum defaults to 'checkboxes'",
         "type": "array",
@@ -47,26 +48,40 @@
     }
   },
   "form": [
-    "select",
     {
-      "key": "select2",
-      "type": "select",
-      "titleMap": {
-        "a": "A",
-        "b": "B",
-        "c": "C"
-      }
-    },
-    {
-      "key": "noenum",
-      "type": "select",
-      "titleMap": [
-        { "value":"a1", "name": "A1", "group": "A" },
-        { "value":"a2", "name":"A2", "group": "A" },
-        { "value":"a3", "name":"A3", "group": "A" },
-        { "value":"b1", "name": "B1", "group": "B" },
-        { "value":"b2", "name":"B2", "group": "B" },
-        { "value":"b3", "name":"B3", "group": "B" }
+      "type": "section",
+      "grid": {
+        "flex": true,
+        "layout": "row"
+      },
+      "items": [
+        "select",
+        {
+          "key": "select2",
+          "type": "select",
+          "titleMap": {
+            "a": "A",
+            "b": "B",
+            "c": "C"
+          }
+        },
+        {
+          "key": "noenum",
+          "type": "select",
+          "titleMap": [
+            { "value":"a1", "name": "A1", "group": "A" },
+            { "value":"a2", "name":"A2", "group": "A" },
+            { "value":"a3", "name":"A3", "group": "A" },
+            { "value":"b1", "name": "B1", "group": "B" },
+            { "value":"b2", "name":"B2", "group": "B" },
+            { "value":"b3", "name":"B3", "group": "B" }
+          ]
+        },
+        {
+          "key": "selectOptionData",
+          "type": "select",
+          "optionData": "arnieFlix"
+        }
       ]
     },
     "array",

examples/img/icons/ic_clear_black_18px.svg

@@ -4,9 +4,11 @@
   <meta charset="utf-8">
   <title>Material Design Schema Form Example</title>
   <link rel="stylesheet" href="../bower_components/angular-material/angular-material.css">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <style type="text/css">
   body,html {
     min-height: 1400px;
+    outline: none;
   }
 
   .form {  height: 400px;  }
@@ -184,12 +186,12 @@ <h3>Schema</h3>
 app.controller('TestCtrl', function($scope, $http, $location, $timeout, $q) {
 
   $scope.tests = [
-    { name: "Switch", data: 'data/switch.json'},
+    { name: "TitleMap Examples", data: 'data/titlemaps.json' },
     { name: "Material Flex Grid", data: 'data/grid.json' },
-    { name: "Autocomplete", data: 'data/autocomplete.json' },
     { name: "Simple", data: 'data/simple.json' },
     { name: "Basic JSON Schema Type", data: 'data/types.json' },
-    { name: "TitleMap Examples", data: 'data/titlemaps.json' },
+    { name: "Autocomplete", data: 'data/autocomplete.json' },
+    { name: "Switch", data: 'data/switch.json'},
     /*{ name: "Complex Key Support", data: 'data/complex-keys.json' },*/
     /*{ name: "Array", data: 'data/array.json' },*/
     /*{ name: "Tab Array", data: 'data/tabarray.json' },*/

examples/material-example.html

@@ -5,7 +5,7 @@
   <md-list class="list-group" sf-field-model ui-sortable="form.sortOptions">
     <md-list-item layout="row" class="list-group-item"
              sf-field-model="ng-repeat"
-             ng-repeat="item in $$value$$ track by $index"
+             ng-repeat="item in modelArray track by $index"
              schema-form-array-items
              class="{{form.fieldHtmlClass}}">
       <md-button flex="none" flex-order="2"
@@ -15,7 +15,7 @@
                  ng-disabled="form.schema.minItems >= modelArray.length"
                  class="md-icon-button" aria-label="More"
                  style="position: relative; z-index: 20;">
-        <md-icon md-svg-icon="img/icons/ic_clear_black_18px.svg"></md-icon>
+        <md-icon>close</md-icon>
       </md-button>
     </md-list-item>
   </md-list>

material-decorator.js

@@ -1,6 +1,7 @@
 <div class="form-group {{form.htmlClass}} schema-form-select"
-     ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}">
-  <md-autocomplete flex
+     ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}"
+     sf-messages sf-layout>
+  <md-autocomplete
     ng-disabled="form.readonly"
     ng-model="$$value$$"
     sf-autocomplete
@@ -11,20 +12,13 @@
     md-selected-item-change="'todo';"
     md-items="item in evalExpr('this[\''+form.optionFilter+'\'](\''+searchText+'\')')"
     md-item-text="item.name"
-    md-floating-label="{{form.title || form.key.slice(-1)[0]}}"
+    md-floating-label="{{::form.title}}"
     md-menu-class="autocomplete-custom-template">
     <md-item-template>
-      <span md-highlight-text="searchText">{{item.title}}</span>
+      <span md-highlight-text="searchText">{{item.name}}</span>
     </md-item-template>
     <md-not-found>
       No matches found
     </md-not-found>
   </md-autocomplete>
-  <div ng-messages="ngModel.$error">
-    <!--
-       This is a bit of a hack. sf-message does the work, but ng-messages and ng-message
-       is needed for the styling
-    -->
-    <div sf-message ng-message></div>
-  </div>
 </div>

material-decorator.min.js

@@ -1,19 +1,13 @@
-<div class="checkbox schema-form-checkbox {{form.htmlClass}}"
-     ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
+<div class="checkbox schema-form-checkbox {{::form.htmlClass}}"
+     ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}"
+     sf-messages>
   <md-checkbox sf-field-model
                sf-changed="form"
                ng-disabled="form.readonly"
                schema-validate="form"
-               class="{{form.fieldHtmlClass}}"
-               name="{{form.key.slice(-1)[0]}}"
-               aria-label="{{form.title || form.key.slice(-1)[0]}}">
-    <span ng-bind-html="form.title"></span>
+               class="{{::form.fieldHtmlClass}}"
+               name="{{::form.key|sfCamelKey}}"
+               aria-label="{{::form.title}}">
+    <span>{{::form.title}}</span>
   </md-checkbox>
-  <div ng-messages="ngModel.$error">
-    <!--
-       This is a bit of a hack. sf-message does the work, but ng-messages and ng-message
-       is needed for the styling
-    -->
-    <div sf-message ng-message></div>
-  </div>
 </div>

src/array.html

@@ -1,23 +1,17 @@
 <div sf-array="form" sf-field-model
-     class="form-group schema-form-checkboxes {{form.htmlClass}}"
-     ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
-  <label class="control-label" ng-show="showTitle()">{{form.title}}</label>
+     class="form-group schema-form-checkboxes {{::form.htmlClass}}"
+     ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}"
+     sf-messages>
+  <label class="control-label" ng-show="showTitle()">{{::form.title}}</label>
   <div class="checkbox" ng-repeat="val in titleMapValues track by $index" >
     <md-checkbox ng-model="titleMapValues[$index]"
-                sf-changed="form"
-                ng-disabled="form.readonly"
-                name="{{form.key.slice(-1)[0]}}"
-                ng-true-value="true"
-                ng-false-value="false"
-                aria-label="{{form.title || form.key.slice(-1)[0]}}">
-      <span ng-bind-html="form.titleMap[$index].name"></span>
+                 sf-changed="form"
+                 ng-disabled="::form.readonly"
+                 name="{{::form.key|sfCamelKey}}"
+                 ng-true-value="true"
+                 ng-false-value="false"
+                 aria-label="{{::form.title}}">
+      {{::form.titleMap[$index].name}}
     </md-checkbox>
   </div>
-  <div ng-messages="ngModel.$error">
-    <!--
-       This is a bit of a hack. sf-message does the work, but ng-messages and ng-message
-       is needed for the styling
-    -->
-    <div sf-message ng-message></div>
-  </div>
 </div>