forms - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

CHANGELOG.md

@@ -0,1 +1,6 @@
+0.7.0 / 2014-05-20
+==================
+ * Properly compare using string values in select, multipleSelect, multipleCheckbox, and multipleRadio
+ * Add "placeholder" to textarea elements
+
 0.6.0 / 2014-05-03
@@ -2,0 +7,0 @@ ==================

lib/widgets.js

@@ -116,3 +116,3 @@ /*jslint node: true */
                 value: k,
-                selected: !!(f.value && f.value === k)
+                selected: !!(f.value && String(f.value) === String(k))
             }, f.choices[k]);
@@ -142,3 +142,4 @@ }, '');
             rows: opt.rows || null,
-            cols: opt.cols || null
+            cols: opt.cols || null,
+            placeholder: opt.placeholder || null
         }, w.attrs || {}], f.value || '');
@@ -160,4 +161,4 @@ };
             // input element
-            var id = f.id ? f.id + '_' + k : 'id_' + name + '_' + k,
-                checked = Array.isArray(f.value) ? f.value.some(function (v) { return v === k; }) : f.value === k;
+            var id = f.id ? f.id + '_' + k : 'id_' + name + '_' + k;
+            var checked = f.value && (Array.isArray(f.value) ? f.value.some(function (v) { return String(v) === String(k); }) : String(f.value) === String(k));
 
@@ -207,4 +208,4 @@ html += tag('input', [{
             // input element
-            var id = f.id ? f.id + '_' + k : 'id_' + name + '_' + k,
-                checked = Array.isArray(f.value) ? f.value.some(function (v) { return v === k; }) : f.value === k;
+            var id = f.id ? f.id + '_' + k : 'id_' + name + '_' + k;
+            var checked = f.value && (Array.isArray(f.value) ? f.value.some(function (v) { return String(v) === String(k); }) : String(f.value) === String(k));
 
@@ -237,3 +238,3 @@ html += tag('input', [{
         var optionsHTML = Object.keys(f.choices).reduce(function (html, k) {
-            var selected = Array.isArray(f.value) ? f.value.some(function (v) { return v === k; }) : (f.value && f.value === k);
+            var selected = f.value && (Array.isArray(f.value) ? f.value.some(function (v) { return String(v) === String(k); }) : String(f.value) === String(k));
             return html + tag('option', {
@@ -240,0 +241,0 @@ value: k,

package.json

@@ -6,3 +6,3 @@ {
     "author": "Caolan McMahon",
-    "version": "0.6.0",
+    "version": "0.7.0",
     "repository": {
@@ -9,0 +9,0 @@ "type": "git",

README.md

@@ -43,6 +43,6 @@ # Forms <sup>[![Version Badge][9]][8]</sup>
     var reg_form = forms.create({
-        username: fields.string({required: true}),
-        password: fields.password({required: true}),
+        username: fields.string({ required: true }),
+        password: fields.password({ required: validators.required('You definitely want a password') }),
         confirm:  fields.password({
-            required: true,
+            required: validators.required('don\'t you know your own password?'),
             validators: [validators.matchField('password')]
@@ -126,12 +126,16 @@ }),
 
-    var bootstrap_field = function (name, object) {
-        var label = object.labelHTML(name);
-        var error = object.error ? '<p class="form-error-tooltip">' + object.error + '</p>' : '';
-        var widget = '<div class="controls col col-lg-9">' + object.widget.toHTML(name, object) + error + '</div>';
-        return '<div class="field row control-group ' + (error !== '' ? 'has-error' : '')  + '">' + label + widget + '</div>';
-    }
+    var bootstrapField = function (name, object) {
 
+        object.widget.classes = object.widget.classes || [];
+        object.widget.classes.push('form-control');
+
+        var label = '<label for="id_' + name + '">' + object.labelHTML(name) + '</label>';
+        var error = object.error ? '<div class="alert alert-error">' + object.error + '</div>' : '';
+        var widget = object.widget.toHTML(name, object);
+        return '<div class="form-group">' + label + widget + error + '</div>';
+    };
+
 And while rendering it:
 
-    form.toHTML(function (name, object) { return bootstrap_field(name, object); });
+    form.toHTML(bootstrapField);
 
@@ -138,0 +142,0 @@ ## Available types

test/test-widgets.js

@@ -99,4 +99,5 @@ /*jslint node: true */
     );
+    var widget = forms.widgets.select({classes: ['one', 'two']});
     t.equal(
-        forms.widgets.select({classes: ['one', 'two']}).toHTML('name', {
+        widget.toHTML('name', {
             choices: {
@@ -114,3 +115,20 @@ val1: 'text1',
     );
-    t.equal(forms.widgets.select().type, 'select');
+    t.equal(widget.type, 'select');
+
+    t.test('stringifies values', function (st) {
+        var html = widget.toHTML('name', {
+            choices: {
+                1: 'one',
+                2: 'two'
+            },
+            id: 'someid',
+            value: 2
+        });
+        var expectedHTML = '<select name="name" id="someid" class="one two">' +
+            '<option value="1">one</option>' +
+            '<option value="2" selected="selected">two</option>' +
+        '</select>';
+        st.equal(html, expectedHTML);
+        st.end();
+    });
     t.end();
@@ -128,5 +146,6 @@ });
             rows: 20,
-            cols: 80
+            cols: 80,
+            placeholder: 'hi!'
         }).toHTML('name', {id: 'someid', value: 'value'}),
-        '<textarea name="name" id="someid" rows="20" cols="80" class="one two">value</textarea>'
+        '<textarea name="name" id="someid" rows="20" cols="80" placeholder="hi!" class="one two">value</textarea>'
     );
@@ -152,4 +171,40 @@ t.equal(forms.widgets.textarea().type, 'textarea');
     );
-    t.equal(forms.widgets.multipleCheckbox().type, 'multipleCheckbox');
+    t.equal(w.type, 'multipleCheckbox');
 
+    t.test('stringifies values', function (st) {
+        st.test('single bound value', function (t2) {
+            var field = {
+                choices: { 1: 'one', 2: 'two', 3: 'three' },
+                value: 2
+            };
+            var html = w.toHTML('name', field);
+            var expectedHTML = '<input type="checkbox" name="name" id="id_name_1" value="1" />' +
+                '<label for="id_name_1">one</label>' +
+                '<input type="checkbox" name="name" id="id_name_2" value="2" checked="checked" />' +
+                '<label for="id_name_2">two</label>' +
+                '<input type="checkbox" name="name" id="id_name_3" value="3" />' +
+                '<label for="id_name_3">three</label>';
+            t2.equal(html, expectedHTML);
+            t2.end();
+        });
+
+        st.test('multiple bound values', function (t2) {
+            var field = {
+                choices: { 1: 'one', 2: 'two', 3: 'three' },
+                value: [1, 2]
+            };
+            var html = w.toHTML('name', field);
+            var expectedHTML = '<input type="checkbox" name="name" id="id_name_1" value="1" checked="checked" />' +
+                '<label for="id_name_1">one</label>' +
+                '<input type="checkbox" name="name" id="id_name_2" value="2" checked="checked" />' +
+                '<label for="id_name_2">two</label>' +
+                '<input type="checkbox" name="name" id="id_name_3" value="3" />' +
+                '<label for="id_name_3">three</label>';
+            t2.equal(html, expectedHTML);
+            t2.end();
+        });
+
+        st.end();
+    });
+
     t.test('label classes', function (st) {
@@ -208,2 +263,38 @@ var w = forms.widgets.multipleCheckbox({labelClasses: ['test1', 'test2', 'test3']});
 
+    t.test('stringifies values', function (st) {
+        st.test('single bound value', function (t2) {
+            var field = {
+                choices: { 1: 'one', 2: 'two', 3: 'three' },
+                value: 2
+            };
+            var html = w.toHTML('name', field);
+            var expectedHTML = '<input type="radio" name="name" id="id_name_1" value="1" />' +
+                '<label for="id_name_1">one</label>' +
+                '<input type="radio" name="name" id="id_name_2" value="2" checked="checked" />' +
+                '<label for="id_name_2">two</label>' +
+                '<input type="radio" name="name" id="id_name_3" value="3" />' +
+                '<label for="id_name_3">three</label>';
+            t2.equal(html, expectedHTML);
+            t2.end();
+        });
+
+        st.test('multiple bound values', function (t2) {
+            var field = {
+                choices: { 1: 'one', 2: 'two', 3: 'three' },
+                value: [2, 3]
+            };
+            var html = w.toHTML('name', field);
+            var expectedHTML = '<input type="radio" name="name" id="id_name_1" value="1" />' +
+                '<label for="id_name_1">one</label>' +
+                '<input type="radio" name="name" id="id_name_2" value="2" checked="checked" />' +
+                '<label for="id_name_2">two</label>' +
+                '<input type="radio" name="name" id="id_name_3" value="3" checked="checked" />' +
+                '<label for="id_name_3">three</label>';
+            t2.equal(html, expectedHTML);
+            t2.end();
+        });
+
+        st.end();
+    });
+
     t.test('label classes', function (st) {
@@ -273,2 +364,47 @@ var w = forms.widgets.multipleRadio({labelClasses: ['test1', 'test2', 'test3']});
     t.equal(forms.widgets.multipleSelect().type, 'multipleSelect');
+
+    t.test('stringifies values', function (st) {
+        var widget = forms.widgets.multipleSelect({classes: ['one', 'two']});
+
+        st.test('single bound values', function (t2) {
+            var html = widget.toHTML('name', {
+                choices: {
+                    1: 'text1',
+                    2: 'text2',
+                    3: 'text3'
+                },
+                id: 'someid',
+                value: 2
+            });
+            var expectedHTML = '<select multiple="multiple" name="name" id="someid" class="one two">' +
+                '<option value="1">text1</option>' +
+                '<option value="2" selected="selected">text2</option>' +
+                '<option value="3">text3</option>' +
+            '</select>';
+            t2.equal(html, expectedHTML);
+            t2.end();
+        });
+
+        st.test('multiple bound values', function (t2) {
+            var html = widget.toHTML('name', {
+                choices: {
+                    1: 'text1',
+                    2: 'text2',
+                    3: 'text3'
+                },
+                id: 'someid',
+                value: [2, 3]
+            });
+            var expectedHTML = '<select multiple="multiple" name="name" id="someid" class="one two">' +
+                '<option value="1">text1</option>' +
+                '<option value="2" selected="selected">text2</option>' +
+                '<option value="3" selected="selected">text3</option>' +
+            '</select>';
+            t2.equal(html, expectedHTML);
+            t2.end();
+        });
+
+        st.end();
+    });
+
     t.end();
@@ -275,0 +411,0 @@ });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

149274

increased by4.05%

Lines of code

3619

increased by3.58%

Number of lines in readme file

373

increased by1.08%

No dependency changes