Merge branch 'release/v0.2.0'

Author: Kamil Kisiela

CHANGELOG.md

@@ -2,6 +2,12 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.2.0] - 2015-11-17
+### Added
+- Support for textarea with cols and rows
+- ApiCheck for label, radio and select
+- Support for md-theme
+
 ## [0.1.0] - 2015-11-17
 ### Added
 - Support for md-select with valueProp and labelProp
@@ -31,6 +37,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## 0.0.1 - 2015-11-06
 
+[0.2.0]: https://github.com/kamilkisiela/meteor-angular-formly-templates-material/compare/v0.1.0...v0.2.0
 [0.1.0]: https://github.com/kamilkisiela/meteor-angular-formly-templates-material/compare/v0.0.4...v0.1.0
 [0.0.4]: https://github.com/kamilkisiela/meteor-angular-formly-templates-material/compare/v0.0.3...v0.0.4
 [0.0.3]: https://github.com/kamilkisiela/meteor-angular-formly-templates-material/compare/v0.0.2...v0.0.3

README.md

@@ -25,13 +25,128 @@ angular.module('myAppName', [
 ```
 
 # Components
-_rest of angular-material directive in near future_
+
+Any requests? Add issue!
+
+## Common properties
+
+### label (string)
+
+### theme (string)
+
+```
+md-theme attribute
+```
 
 ## Fields
 
-- input
-- checkbox
-- select
+### input
+
+```json
+{
+  "type": "input",
+  "key": "firstName",
+  "templateOptions": {
+    "type": "text",
+    "label": "First name",
+    "theme": "custom"
+  }
+}
+```
+
+### textarea
+
+**rows (number, optional)**
+
+```json
+{
+  "type": "textarea",
+  "key": "bio",
+  "templateOptions": {
+    "label": "Biography",
+    "theme": "custom",
+    "rows": 5
+  }
+}
+```
+
+### radio
+
+**options (array, requred)**
+
+**labelProp (string, optional)**
+
+**valueProp (string, optional)**
+
+```json
+{
+  "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)**
+
+```json
+{
+  "type": "select",
+  "key": "name",
+  "templateOptions": {
+    "label": "Name",
+    "theme": "custom",
+    "labelProp": "firstName",
+    "valueProp": "id",
+    "options": [
+        {"firstName": "Sarah", id: 1},
+        {"firstName": "Jessica", id: 2},
+        {"firstName": "Parker", id: 3}
+    ]
+  }
+}
+```
+
+### checkbox
+
+```json
+{
+  "type": "checkbox",
+  "key": "terms",
+  "templateOptions": {
+    "label": "Terms and Conditions",
+    "theme": "custom"
+  }
+}
+```
+
+### switch
+
+```json
+{
+  "type": "switch",
+  "key": "terms",
+  "templateOptions": {
+    "label": "Terms and Conditions",
+    "theme": "custom"
+  }
+}
+```
 
 ## Wrappers
 
@@ -44,12 +159,13 @@ _rest of angular-material directive in near future_
 - [ ] add md-chips
 - [ ] add md-datepicker
 - [ ] add md-icon wrapper
-- [ ] add md-radio-button and md-radio-group
 - [x] add md-select
 - [ ] add groups to md-select
 - [x] add valueProp, labelProp to md-select
 - [x] add md-radio with valueProp and labelProp
 - [ ] add groupProp to md-radio
+- [x] add textarea with cols and rows
+- [x] md-theme
 - [ ] e2e tests
 
 Requests (?). Post an issue.

lib/client/formly-material.js

@@ -0,0 +1,18 @@
+var {SetModule} = angular2now;
+
+SetModule('formlyMaterial')
+    .provider('formlyMaterial', formlyMaterial);
+
+function formlyMaterial() {
+    var self = this;
+
+    this.templateUrl = function (templateUrl) {
+        return '/packages/wieldo:angular-formly-templates-material/' + templateUrl.replace(/^\//, "");
+    };
+
+    this.$get = function () {
+        return {
+            templateUrl: self.templateUrl
+        }
+    };
+}

lib/client/main.js

@@ -4,19 +4,4 @@ SetModule('formlyMaterial', [
     'ngMessages',
     'ngMaterial',
     'formly'
-])
-    .provider('formlyMaterial', formlyMaterial);
-
-function formlyMaterial() {
-    var self = this;
-
-    this.templateUrl = function (templateUrl) {
-        return '/packages/wieldo:angular-formly-templates-material/' + templateUrl.replace(/^\//, "");
-    };
-
-    this.$get = function () {
-        return {
-            templateUrl: self.templateUrl
-        }
-    };
-}
+]);

lib/client/run/md-theme-manipulator.js

@@ -0,0 +1,78 @@
+var {SetModule} = angular2now;
+
+SetModule('formlyMaterial')
+    .config((formlyConfigProvider) => {
+
+        const addIfNotPresent = (nodes, attr, val) => {
+            angular.forEach(nodes, node => {
+                if (!node.getAttribute(attr)) {
+                    node.setAttribute(attr, val)
+                }
+            })
+        };
+
+        const nodeMatches = (node, selector) => {
+            const div = document.createElement('div');
+
+            div.innerHTML = node.outerHTML;
+            return div.querySelector(selector)
+        };
+
+        const getNgModelNodes = (node, skip) => {
+            const selectorNot = angular.isString(skip) ? `:not(${skip})` : '';
+            const skipNot = ':not([formly-skip-ng-model-attrs-manipulator])';
+            const query = `[ng-model]${selectorNot}${skipNot}, [data-ng-model]${selectorNot}${skipNot}`;
+
+            try {
+                return node.querySelectorAll(query)
+            } catch (e) {
+                //this code is needed for IE8, as it does not support the CSS3 ':not' selector
+                //it should be removed when IE8 support is dropped
+                return getNgModelNodesFallback(node, skip)
+            }
+        };
+
+        const getNgModelNodesFallback = (node, skip) => {
+            const allNgModelNodes = node.querySelectorAll('[ng-model], [data-ng-model]');
+            const matchingNgModelNodes = [];
+
+            //make sure this array is compatible with NodeList type by adding an 'item' function
+            matchingNgModelNodes.item = function (i) {
+                return this[i]
+            };
+
+            for (let i = 0; i < allNgModelNodes.length; i++) {
+                const ngModelNode = allNgModelNodes[i];
+
+                if (!ngModelNode.hasAttribute('formly-skip-ng-model-attrs-manipulator') && !(angular.isString(skip) && nodeMatches(ngModelNode, skip))) {
+                    matchingNgModelNodes.push(ngModelNode)
+                }
+            }
+
+            return matchingNgModelNodes
+        };
+
+        formlyConfigProvider.templateManipulators.preWrapper.push((template, options, scope) => {
+            if (angular.isDefined(options.templateOptions.theme)) {
+                const node = document.createElement('div');
+                const skip = options.extras && options.extras.skipNgModelAttrsManipulator;
+                if (skip === true) {
+                    return template
+                }
+                node.innerHTML = template;
+                const modelNodes = getNgModelNodes(node, skip);
+
+                if (!modelNodes || !modelNodes.length) {
+                    return template;
+                }
+
+                addIfNotPresent(modelNodes, 'md-theme', options.templateOptions.theme);
+
+                return node.innerHTML;
+
+            } else {
+                return template;
+            }
+        });
+
+    });

lib/client/types/checkbox/checkbox.ng.html

@@ -1,5 +1,5 @@
 <div>
-    <md-checkbox ng-model="model[options.key]" md-theme="{{to.mdTheme || 'primary'}}">
+    <md-checkbox ng-model="model[options.key]">
         {{to.label}}
     </md-checkbox>
 </div>

lib/client/types/radio/radio.js

@@ -5,7 +5,14 @@ SetModule('formlyMaterial')
 
         formlyConfigProvider.setType({
             name: 'radio',
-            templateUrl: formlyMaterialProvider.templateUrl('lib/client/types/radio/radio.ng.html')
+            templateUrl: formlyMaterialProvider.templateUrl('lib/client/types/radio/radio.ng.html'),
+            apiCheck: (check) => ({
+                templateOptions: {
+                    options: check.arrayOf(check.object),
+                    labelProp: check.string.optional,
+                    valueProp: check.string.optional
+                }
+            })
         });
 
     });

lib/client/types/select/select.js

@@ -6,7 +6,14 @@ SetModule('formlyMaterial')
         formlyConfigProvider.setType({
             name: 'select',
             templateUrl: formlyMaterialProvider.templateUrl('lib/client/types/select/select.ng.html'),
-            wrapper: ['mdLabel', 'mdMessages', 'mdInputContainer']
+            wrapper: ['mdLabel', 'mdMessages', 'mdInputContainer'],
+            apiCheck: (check) => ({
+                templateOptions: {
+                    options: check.arrayOf(check.object),
+                    labelProp: check.string.optional,
+                    valueProp: check.string.optional
+                }
+            })
         });
 
     });

lib/client/types/switch/switch.ng.html

@@ -1,3 +1,3 @@
-<md-switch ng-model="model[options.key]" md-theme="{{to.mdTheme || 'primary'}}">
+<md-switch ng-model="model[options.key]">
     {{to.label}}
 </md-switch>

lib/client/types/textarea/textarea.js

@@ -0,0 +1,24 @@
+var {SetModule} = angular2now;
+
+SetModule('formlyMaterial')
+    .config((formlyConfigProvider, formlyMaterialProvider) => {
+
+        formlyConfigProvider.setType({
+            name: 'textarea',
+            templateUrl: formlyMaterialProvider.templateUrl('lib/client/types/textarea/textarea.ng.html'),
+            wrapper: ['mdLabel', 'mdMessages', 'mdInputContainer'],
+            defaultOptions: {
+                ngModelAttrs: {
+                    rows: {attribute: 'rows'},
+                    cols: {attribute: 'cols'}
+                }
+            },
+            apiCheck: (check) => ({
+                templateOptions: {
+                    rows: check.number.optional,
+                    cols: check.number.optional
+                }
+            })
+        });
+
+    });