feat(form-field) Added generator for name, val, id, checked fields

.jscsrc

@@ -20,5 +20,5 @@
         ".jshint*",
         "node_modules/**"
     ],
-    "fileExtensions": [".js", ".bemtree", ".bemhtml"]
+    "fileExtensions": [".js", ".bemtree.js", ".bemhtml.js"]
 }

.jshint-groups.js

@@ -32,6 +32,8 @@ module.exports = {
                 '**/*.bem/*.js',
                 '**/_*.js',
                 '**/*.bh.js',
+                '**/*.bemhtml.js',
+                '**/*.bemtree.js',
                 '**/*.spec.js',
                 '**/*.deps.js',
                 '**/*.bemjson.js'
@@ -56,6 +58,7 @@ module.exports = {
         },
 
         bemxjst : {
+
             options : {
                 predef : [
                     'apply',
@@ -74,14 +77,16 @@ module.exports = {
                     'mix',
                     'mod',
                     'mode',
-                    'tag'
+                    'tag',
+                    'wrap',
+                    'replace',
+                    'extend',
+                    'once'
                 ]
             },
             includes : [
-                '*.blocks/**/*.bemhtml',
-                '*.blocks/**/*.bemtree',
-                'design/*.blocks/**/*.bemhtml',
-                'design/*.blocks/**/*.bemtree'
+                '*.blocks/**/*.bemhtml.js',
+                '*.blocks/**/*.bemtree.js'
             ]
         },
 

common.blocks/checkbox-group/checkbox-group.bemhtml.js

@@ -1,9 +1,11 @@
 block('checkbox-group')(
 
     match(function() { return this._form_field; }).def()(function() {
-        var ctx = this.ctx;
+        this.ctx = this.extend({
+            name : this._form_field.name,
+            val : this._form_field.val,
+        }, this.ctx);
 
-        ctx.name || (ctx.name = this._form_field.name);
         this.mods.disabled = this._form_field.mods.disabled;
 
         return applyNext();

common.blocks/checkbox-group/checkbox-group.bh.js

@@ -5,6 +5,9 @@ module.exports = function(bh) {
 
         if(_form_field) {
             json.name = json.name || _form_field.name;
+            json.val = json.val || _form_field.val;
+
+            ctx.mod('disabled', _form_field.mods.disabled);
         }
     });
 

common.blocks/checkbox/checkbox.bemhtml.js

@@ -1,9 +1,13 @@
 block('checkbox')(
 
     match(function() { return this._form_field; }).def()(function() {
-        var ctx = this.ctx;
+        this.ctx = this.extend({
+            name : this._form_field.name,
+            val : this._form_field.val,
+            id : this._form_field.id,
+            checked : this._form_field.checked
+        }, this.ctx);
 
-        ctx.name || (ctx.name = this._form_field.name);
         this.mods.disabled = this._form_field.mods.disabled;
 
         return applyNext();

common.blocks/checkbox/checkbox.bh.js

@@ -5,6 +5,10 @@ module.exports = function(bh) {
 
         if(_form_field) {
             json.name = json.name || _form_field.name;
+            json.val = json.val || _form_field.val;
+            json.id = json.id || _form_field.id;
+            json.checked = json.checked || _form_field.checked;
+
             ctx.mod('disabled', _form_field.mods.disabled);
         }
     });

common.blocks/form-field/form-field.bemhtml.js

@@ -1,21 +1,39 @@
 block('form-field')(
 
-    js()(true),
-
     def()(function() {
         var _form_field = this.ctx;
-        _form_field.id = _form_field.id || this.generateId();
-        this.ctx.js = this.extend(this.ctx.js || {}, { id : _form_field.id });
 
+        _form_field.id = _form_field.id || this.generateId();
         _form_field.mods = _form_field.mods || {};
 
         return applyNext({ _form_field : _form_field });
     }),
 
+    js()(function() {
+        return this.extend(applyNext(), { id : this._form_field.id });
+    }),
+
     attrs()(function () {
         return {
             'data-name' : this.ctx.name
         };
+    }),
+
+    match(function() { return this.ctx.label !== undefined; }).content()(function() {
+        return [
+            {
+                block : 'label',
+                content : this.ctx.label
+            },
+            applyNext()
+        ];
+    }),
+
+    match(function() { return this.ctx.control !== undefined; }).content()(function() {
+        return [
+            applyNext(),
+            this.ctx.control
+        ];
     })
 
 );

common.blocks/input/input.bemhtml.js

@@ -1,8 +1,15 @@
 block('input')(
 
-    match(function() { return this._form_field; }).mix()(function() {
+    match(function() { return this._form_field; }).def()(function() {
+        this.ctx = this.extend({
+            name : this._form_field.name,
+            val : this._form_field.val,
+            id : this._form_field.id
+        }, this.ctx);
+
         this.mods.disabled = this._form_field.mods.disabled;
 
         return applyNext();
     })
+
 );

common.blocks/input/input.bh.js

@@ -0,0 +1,15 @@
+module.exports = function(bh) {
+
+    bh.match('input', function(ctx, json) {
+        var _form_field = ctx.tParam('_form_field');
+
+        if(_form_field) {
+            json.name = json.name || _form_field.name;
+            json.val = json.val || _form_field.val;
+            json.id = json.id || _form_field.id;
+
+            ctx.mod('disabled', _form_field.mods.disabled);
+        }
+    });
+
+};

common.blocks/radio-group/radio-group.bemhtml.js

@@ -1,11 +1,14 @@
 block('radio-group')(
 
     match(function() { return this._form_field; }).def()(function() {
-        var ctx = this.ctx;
+        this.ctx = this.extend({
+            name : this._form_field.name,
+            val : this._form_field.val,
+        }, this.ctx);
 
-        ctx.name || (ctx.name = this._form_field.name);
         this.mods.disabled = this._form_field.mods.disabled;
 
         return applyNext();
     })
+
 );

common.blocks/radio-group/radio-group.bh.js

@@ -0,0 +1,14 @@
+module.exports = function(bh) {
+
+    bh.match('radio-group', function(ctx, json) {
+        var _form_field = ctx.tParam('_form_field');
+
+        if(_form_field) {
+            json.name = json.name || _form_field.name;
+            json.val = json.val || _form_field.val;
+
+            ctx.mod('disabled', _form_field.mods.disabled);
+        }
+    });
+
+};

common.blocks/radio/radio.bemhtml.js

@@ -1,9 +1,13 @@
 block('radio')(
 
     match(function() { return this._form_field; }).def()(function() {
-        var ctx = this.ctx;
+        this.ctx = this.extend({
+            name : this._form_field.name,
+            val : this._form_field.val,
+            id : this._form_field.id,
+            checked : this._form_field.checked
+        }, this.ctx);
 
-        ctx.name || (ctx.name = this._form_field.name);
         this.mods.disabled = this._form_field.mods.disabled;
 
         return applyNext();

common.blocks/radio/radio.bh.js

@@ -5,8 +5,13 @@ module.exports = function (bh) {
 
         if(_form_field) {
             json.name = json.name || _form_field.name;
+            json.val = json.val || _form_field.val;
+            json.id = json.id || _form_field.id;
+            json.checked = json.checked || _form_field.checked;
+
             ctx.mod('disabled', _form_field.mods.disabled);
         }
+
     });
 
 };

common.blocks/select/select.bemhtml.js

@@ -1,9 +1,12 @@
 block('select')(
 
     match(function() { return this._form_field; }).def()(function() {
-        var ctx = this.ctx;
+        this.ctx = this.extend({
+            name : this._form_field.name,
+            val : this._form_field.val,
+            id : this._form_field.id
+        }, this.ctx);
 
-        ctx.name || (ctx.name = this._form_field.name);
         this.mods.disabled = this._form_field.mods.disabled;
 
         return applyNext();

common.blocks/select/select.bh.js

@@ -5,6 +5,10 @@ module.exports = function(bh) {
 
         if(_form_field) {
             json.name = json.name || _form_field.name;
+            json.val = json.val || _form_field.val;
+            json.id = json.id || _form_field.id;
+
+            ctx.mod('disabled', _form_field.mods.disabled);
         }
     });
 

common.blocks/textarea/textarea.bemhtml.js

@@ -1,10 +1,12 @@
 block('textarea')(
 
     match(function() { return this._form_field; }).def()(function() {
-        var ctx = this.ctx;
+        this.ctx = this.extend({
+            name : this._form_field.name,
+            val : this._form_field.val,
+            id : this._form_field.id
+        }, this.ctx);
 
-        ctx.id || (ctx.id = this._form_field.id);
-        ctx.name || (ctx.name = this._form_field.name);
         this.mods.disabled = this._form_field.mods.disabled;
 
         return applyNext();

common.blocks/textarea/textarea.bh.js

@@ -4,8 +4,11 @@ module.exports = function (bh) {
         var _form_field = ctx.tParam('_form_field');
 
         if(_form_field) {
-            json.id = json.id || _form_field.id;
             json.name = json.name || _form_field.name;
+            json.val = json.val || _form_field.val;
+            json.id = json.id || _form_field.id;
+
+            ctx.mod('disabled', _form_field.mods.disabled);
         }
     });
 

example.bundles/generator/generator.bemjson.js

@@ -0,0 +1,55 @@
+({
+    block : 'page',
+    title : 'form',
+    styles : [{ elem : 'css', url : 'generator.min.css' }],
+    scripts : [{ elem : 'js', url : 'generator.min.js' }],
+    content : [
+        {
+            block : 'form',
+            mods : { theme : 'islands', message : 'popup' },
+            content : [
+                {
+                    block : 'form-field',
+                    mods : { type : 'input' },
+                    name : 'q',
+                    val : 'Generated val by form-field',
+                    label : 'Label generate by form-field',
+                    control : {
+                        block : 'input',
+                        mods : { theme : 'islands', size : 'l' }
+                    }
+                },
+                // @voischev examples
+                {
+                    block : 'form-field',
+                    mods : { type : 'input', required : true },
+                    val : 'type something...',
+                    label : 'test'
+                },
+                {
+                    block : 'form-field',
+                    mods : { type : 'input', required : true },
+                    label : 'test',
+                    control : {
+                        block : 'input',
+                        mods : { 'my-super-mod' : 'ololo' },
+                        val : 'type something...'
+                    }
+                },
+                {
+                    block : 'form-field',
+                    mods : { type : 'input', required : true },
+                    content : [
+                        {
+                            block : 'awsome-wrapper',
+                            content : [
+                                { block : 'input', val : 'my custom content' },
+                                { block : 'label' }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+})