forms - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

lib/fields.js

@@ -59,3 +59,8 @@ /*jslint node: true */
         if (this.widget.type === 'hidden') { return ''; }
-        return '<label for="' + (id || 'id_' + name) + '">' + this.labelText(name, id) + '</label>';
+        var label = '<label for="' + (id || 'id_' + name) + '"';
+        if (typeof this.cssClasses !== 'undefined' && Array.isArray(this.cssClasses.label) && this.cssClasses.label.length > 0) {
+            label += ' class="' + this.cssClasses.label.join(' ') + '"';
+        }
+        label += '>' + this.labelText(name, id) + '</label>'
+        return label;
     };
@@ -66,2 +71,5 @@ f.classes = function () {
         if (this.required) { r.push('required'); }
+        if (typeof this.cssClasses !== 'undefined' && Array.isArray(this.cssClasses.field) && this.cssClasses.field.length > 0) {
+            r = r.concat(this.cssClasses.field);
+        }
         return r;
@@ -68,0 +76,0 @@ };

lib/widgets.js

 /*jslint node: true */
+var htmlEscape = require('./htmlEscape');
 
 // generates a string for common widget attributes
-var attrs = function (a) {
-    var html = ' name="' + a.name + '"';
-    html += ' id=' + (a.id ? '"' + a.id + '"' : '"id_' + a.name + '"');
-    html += Array.isArray(a.classes) && a.classes.length > 0 ? ' class="' + a.classes.join(' ') + '"' : '';
-    return html;
+var attrs = function (a, needsID) {
+    if (!a.id && needsID) {
+        a.id = 'id_' + a.name;
+    }
+    if (Array.isArray(a.classes) && a.classes.length > 0) {
+        a['class'] = a.classes.join(' ');
+        a.classes = null;
+    }
+    var pairs = [];
+    Object.keys(a).map(function (field) {
+        var value = a[field];
+        if (typeof value === 'boolean') {
+            value = value ? field : null;
+        } else if (typeof value === 'string' && value.length === 0) {
+            value = null;
+        } else if (typeof value === 'number' && isNaN(value)) {
+            value = null;
+        }
+        if (typeof value !== 'undefined' && value !== null) {
+            pairs.push(htmlEscape(field) + '="' + htmlEscape(value) + '"');
+        }
+    });
+    return pairs.length > 0 ? ' ' + pairs.join(' ') : '';
 };
@@ -16,3 +35,3 @@
         legalAttrs = ['autocomplete', 'autocorrect', 'autofocus', 'autosuggest', 'checked', 'dirname', 'disabled', 'list', 'max', 'maxlength', 'min', 'multiple', 'novalidate', 'pattern', 'placeholder', 'readonly', 'required', 'size', 'step'],
-        ignoreAttrs = ['id', 'name', 'class', 'classes'];
+        ignoreAttrs = ['id', 'name', 'class', 'classes', 'type', 'value'];
     return function (opt) {
@@ -24,14 +43,19 @@ if (!opt) { opt = {}; }
         };
+        var userAttrs = Object.keys(opt).reduce(function (attrs, k) {
+            if (ignoreAttrs.indexOf(k) === -1 && legalAttrs.indexOf(k) > -1 || dataRegExp.test(k) || ariaRegExp.test(k)) {
+                attrs[k] = opt[k];
+            }
+            return attrs;
+        }, {});
         w.toHTML = function (name, f) {
             if (!f) { f = {}; }
             var html = '<input';
-            html += ' type="' + type + '"';
-            html += attrs({name: name, id: f.id, classes: w.classes});
-            html += f.value ? ' value="' + f.value + '"' : '';
-            html += Object.keys(opt).reduce(function (html, k) {
-                if (ignoreAttrs.indexOf(k) === -1 && legalAttrs.indexOf(k) !== -1 || dataRegExp.test(k) || ariaRegExp.test(k)) {
-                    return html + ' ' + k + '="' + String(opt[k]).replace(/"/g, '&quot;') + '"';
-                }
-                return html;
-            }, '');
+            html += attrs({
+                type: type,
+                name: name,
+                id: f.id,
+                classes: w.classes,
+                value: f.value || null
+            }, true);
+            html += attrs(userAttrs);
             return html + ' />';
@@ -62,6 +86,12 @@ };
         if (!f) { f = {}; }
-        var html = '<input type="checkbox"';
-        html += attrs({name: name, id: f.id, classes: w.classes});
-        html += f.value ? ' checked="checked"' : '';
-        return html + ' value="on" />';
+        var html = '<input';
+        html += attrs({
+            type: 'checkbox',
+            name: name,
+            id: f.id,
+            classes: w.classes,
+            checked: !!f.value,
+            value: 'on'
+        }, true);
+        return html + ' />';
     };
@@ -83,5 +113,8 @@ return w;
             classes: w.classes
-        }) + '>';
+        }, true) + '>';
         html += Object.keys(f.choices).reduce(function (html, k) {
-            return html + '<option value="' + k + '"' + ((f.value && f.value === k) ? ' selected="selected"' : '') + '>' + f.choices[k] + '</option>';
+            return html + '<option' + attrs({
+                value: k,
+                selected: !!(f.value && f.value === k)
+            }) + '>' + f.choices[k] + '</option>';
         }, '');
@@ -101,12 +134,15 @@ return html + '</select>';
         if (!f) { f = {}; }
-        var html = ['<textarea' + attrs({
+        return [
+            '<textarea',
+            attrs({
                 name: name,
                 id: f.id,
-                classes: w.classes
-            })];
-        html.push(opt.rows ? ' rows="' + opt.rows + '"' : '');
-        html.push(opt.cols ? ' cols="' + opt.cols + '"' : '');
-        html.push('>');
-        html.push(f.value || '');
-        return html.join('') + '</textarea>';
+                classes: w.classes,
+                rows: opt.rows || null,
+                cols: opt.cols || null
+            }, true),
+            '>',
+            f.value || '',
+            '</textarea>'
+        ].join('');
     };
@@ -126,26 +162,18 @@ return w;
             // input element
-            html += '<input type="checkbox"';
-            html += ' name="' + name + '"';
-
             var id = f.id ? f.id + '_' + k : 'id_' + name + '_' + k;
-            html += ' id="' + id + '"';
+            var checked = Array.isArray(f.value) ? f.value.some(function (v) { return v === k; }) : f.value === k;
 
-            if (Array.isArray(w.classes) && w.classes.length > 0) {
-                html += ' class="' + w.classes.join(' ') + '"';
-            }
-
-            html += ' value="' + k + '"';
-
-            if (Array.isArray(f.value)) {
-                if (f.value.some(function (v) { return v === k; })) {
-                    html += ' checked="checked"';
-                }
-            } else {
-                html += f.value === k ? ' checked="checked"' : '';
-            }
-
+            html += '<input';
+            html += attrs({
+                type: 'checkbox',
+                name: name,
+                id: id,
+                classes: w.classes,
+                value: k,
+                checked: !!checked
+            });
             html += ' />';
 
             // label element
-            html += '<label for="' + id + '">' + f.choices[k] + '</label>';
+            html += '<label' + attrs({for: id}) + '>' + f.choices[k] + '</label>';
 
@@ -168,26 +196,18 @@ return html;
             // input element
-            html += '<input type="radio"';
-            html += ' name="' + name + '"';
-
             var id = f.id ? f.id + '_' + k : 'id_' + name + '_' + k;
-            html += ' id="' + id + '"';
+            var checked = Array.isArray(f.value) ? f.value.some(function (v) { return v === k; }) : f.value === k;
 
-            if (Array.isArray(w.classes) && w.classes.length > 0) {
-                html += ' class="' + w.classes.join(' ') + '"';
-            }
-
-            html += ' value="' + k + '"';
-
-            if (Array.isArray(f.value)) {
-                if (f.value.some(function (v) { return v === k; })) {
-                    html += ' checked="checked"';
-                }
-            } else {
-                html += f.value === k ? ' checked="checked"' : '';
-            }
-
+            html += '<input';
+            html += attrs({
+                type: 'radio',
+                name: name,
+                id: id,
+                classes: w.classes,
+                value: k,
+                checked: !!checked
+            });
             html += '>';
 
             // label element
-            html += '<label for="' + id + '">' + f.choices[k] + '</label>';
+            html += '<label' + attrs({for: id}) + '>' + f.choices[k] + '</label>';
 
@@ -208,16 +228,15 @@ return html;
         if (!f) { f = {}; }
-        var html = '<select multiple="multiple"' + attrs({
+        var html = '<select' + attrs({
+            multiple: true,
             name: name,
             id: f.id,
             classes: w.classes
-        }) + '>';
+        }, true) + '>';
         html += Object.keys(f.choices).reduce(function (html, k) {
-            html += '<option value="' + k + '"';
-            if (Array.isArray(f.value)) {
-                if (f.value.some(function (v) { return v === k; })) {
-                    html += ' selected="selected"';
-                }
-            } else if (f.value && f.value === k) {
-                html += ' selected="selected"';
-            }
+            var selected = Array.isArray(f.value) ? f.value.some(function (v) { return v === k; }) : (f.value && f.value === k);
+            html += '<option';
+            html += attrs({
+                value: k,
+                selected: !!selected
+            });
             html += '>' + f.choices[k] + '</option>';
@@ -230,1 +249,2 @@ return html;
 };
+

package.json

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

README.md

@@ -120,2 +120,3 @@ # Forms
 * hidden
+* color
 * checkbox
@@ -134,6 +135,7 @@ * select
 * range
-* minLength
-* maxLength
-* rangeLength
+* minlength
+* maxlength
+* rangelength
 * regexp
+* color
 * email
@@ -215,2 +217,3 @@ * url
 * choices - A list of options, used for multiple choice fields
+* cssClasses - A list of CSS classes for label and field wrapper
 
@@ -217,0 +220,0 @@ #### field.parse(rawdata)

test/test-fields.js

@@ -190,2 +190,18 @@ /*jslint node: true */
 
+exports['string toHTML with CSS classes'] = function (test) {
+    test.expect(1);
+    test.equals(
+        fields.string({
+            cssClasses: {
+                field: ['custom-field-class1', 'custom-field-class2'],
+                label: ['custom-label-class1', 'custom-label-class2']
+            }
+        }).toHTML('fieldname'),
+        '<div class="field custom-field-class1 custom-field-class2">' +
+            '<label for="id_fieldname" class="custom-label-class1 custom-label-class2">Fieldname</label>' +
+            '<input type="text" name="fieldname" id="id_fieldname" />' +
+        '</div>'
+    );
+    test.done();
+};
 
@@ -192,0 +208,0 @@ testField('number');

test/test-widgets.js

@@ -38,3 +38,3 @@ /*jslint node: true */
         w.toHTML('field2', {id: 'form2_field2'}),
-        '<input type="checkbox" name="field2" id="form2_field2" class="test1 test2 test3" value="on" />'
+        '<input type="checkbox" name="field2" id="form2_field2" value="on" class="test1 test2 test3" />'
     );
@@ -95,3 +95,3 @@ test.equals(
         }).toHTML('name', {id: 'someid', value: 'value'}),
-        '<textarea name="name" id="someid" class="one two" rows="20" cols="80">value</textarea>'
+        '<textarea name="name" id="someid" rows="20" cols="80" class="one two">value</textarea>'
     );
@@ -98,0 +98,0 @@ test.equals(forms.widgets.textarea().type, 'textarea');

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

99872

increased by2%

Number of package files

26

increased by8.33%

Lines of code

2513

increased by3.03%

Number of lines in readme file

296

increased by1.02%

Number of medium supply chain risk alerts

5

decreased by-16.67%

No dependency changes