formist - npm Package Compare versions

Comparing version 0.0.0 to 0.1.0

lib/field.js

 
-var field = module.exports = function field () {
+var Tag = require('./tag'),
+	contentTags = ['button','textarea','select'];
 
+var Field = module.exports = function Field (tag, options) {
+
+	if (tag === undefined || tag === null) {
+		throw new Error('You must supply a tag name for the field.');
+	}
+
+	this.tag = tag;
+	this.options = options || {};
+	this.attributes = this.options.attributes || {};
+	this.options.theme = this.options.theme || {};
+
+	// handle the label tag
+	if (this.options.label !== undefined && typeof this.options.label === 'string') {
+		this.options.label = {
+			label: this.options.label
+		};
+	}
+
+	// append the type to attributes, if not supplied, and if not a contentTag
+	if (contentTags.indexOf(this.tag) <= 0 && this.attributes.type === undefined) {
+		this.attributes.type = this.options.type || 'text';
+	}
+
+	// handle select options
+	if (this.tag === 'select' && this.options.options) {
+
+		for (var i = 0; i < this.options.options.length; i++) {
+
+			// turn ['uk','us'] into [{label:'uk'},{label:'us'}]
+			if (typeof this.options.options[i] === 'string') {
+				this.options.options[i] = {
+					label: this.options.options[i]
+				};
+			}
+
+			// default the attributes object
+			this.options.options[i].attributes = this.options.options[i].attributes || {};
+
+			// attach value if it was passed in
+			if (this.options.options[i].value !== undefined) {
+				this.options.options[i].attributes.value = this.options.options[i].value;
+			}
+
+		}
+
+	}
+
+};
+
+Field.prototype.render = function(theme) {
+
+	var tag,
+		label,
+		content = '';
+
+	// certain tags (contentTags) have content not values, such as textarea and button
+	if (contentTags.indexOf(this.tag) >= 0) {
+		content = this.options.value || '';
+		delete this.attributes.value;
+		delete this.attributes.type;
+	}
+
+	// is this a select box?
+	if (this.tag === 'select' && this.options.options) {
+
+		for (var i = 0; i < this.options.options.length; i++) {
+
+			var tag = new Tag('option', this.options.options[i].attributes, this.options.options[i].label);
+			content = content + tag.render();
+
+		}
+
+	}
+
+	// is there a label?
+	if (this.options.label) {
+
+		// we want to append to the attributes, so default if it wasn't passed in
+		var attributes = this.options.label.attributes || {};
+
+		// if the field has an id, create a for attribute unless pre-defined
+		if (this.attributes.id && attributes['for'] === undefined) {
+			attributes['for'] = this.attributes.id;
+		}
+
+		// generate the label tag and render it before the field itself
+		label = new Tag('label', attributes, this.options.label.label);
+
+	}
+
+	// the tag to render, containing the content
+	tag = new Tag(this.tag, this.attributes, content);
+
+	// wrap the rendered field, using the themes field wrapper
+	return (this.options.theme.field || theme.field)(label !== undefined ? label.render() : '', (this.options.theme.control || theme.control)(tag.render(), this), this);
+
 };

lib/fieldgroup.js

 
-var fieldgroup = module.exports = function fieldgroup () {
+var Tag = require('./tag'),
+	wrappers = require('./wrappers');
 
-};
+var Fieldgroup = module.exports = function Fieldgroup (options, elements) {
+
+	this.options = options || {};
+	this.elements = elements || [];
+	this.options.theme = this.options.theme || {};
+
+	// handle the label tag
+	if (this.options.label !== undefined && typeof this.options.label === 'string') {
+		this.options.label = {
+			label: this.options.label
+		};
+	}
+
+};
+
+Fieldgroup.prototype.render = function(theme) {
+	
+	var label,
+		content = '',
+		fieldsContent = '',
+		_theme = copy(theme);
+
+	// handle the label for the field group
+	if (this.options.label) {
+
+		// we want to append to the attributes, so default if it wasn't passed in
+		var attributes = this.options.label.attributes || {};
+
+		// generate the label tag and render it before the field itself
+		label = new Tag('label', attributes, this.options.label.label);
+
+	}
+
+	// we want to have a different default theme.field function for nested fields
+	_theme.field = this.options.theme.field || theme.fieldgroup.field;
+
+	// loop through each nested Field element, and render it
+	for (var i = 0; i < this.elements.length; i++) {
+
+		// each Field, call render
+		fieldsContent += this.elements[i].render(_theme);
+
+	}
+
+	// generate the fields content (which is label + elements)
+	content = (this.options.theme.fields || theme.fieldgroup.fields)(fieldsContent, this.elements);
+
+	return (this.options.theme.group || theme.fieldgroup.group)((label !== undefined ? label.render() : ''), content, this);
+
+};
+
+var copy = function (obj) {
+
+	var newObj = {};
+
+	Object.keys(obj).forEach(function (key) {
+		newObj[key] = obj[key];
+	});
+
+	return newObj;
+
+};

lib/fieldset.js

 
-var fieldset = module.exports = function fieldset () {
+var Tag = require('./tag');
 
+var Fieldset = module.exports = function Fieldset (options, elements) {
+
+	this.options = options || {};
+
+	this.attributes = this.options.attributes || {};
+
+	this.options.theme = this.options.theme || {};
+
+	this.elements = elements || [];
+
+	// handle the legend tag
+	if (this.options.legend !== undefined && typeof this.options.legend === 'string') {
+		this.options.legend = {
+			label: this.options.legend,
+			attributes: {}
+		};
+	}
+	
+	if (this.options.legend) {
+		this.elements.unshift(new Tag('legend', this.options.legend.attributes, this.options.legend.label));
+	}
+
+};
+
+Fieldset.prototype.render = function(theme) {
+
+	var content = '',
+		tag;
+
+	for (var i = 0; i < this.elements.length; i++) {
+		content += this.elements[i].render(theme);
+	}
+
+	tag = new Tag('fieldset', this.attributes, content);
+
+	return (this.options.theme.fieldset || theme.fieldset)(tag.render(), this);
+
+};
+
+Fieldset.prototype.add = function(elObject) {
+	
+	this.elements.push(elObject);
+
+	return elObject;
+
 };

lib/form.js

 
-var Tag = require('./tag');
+var Tag = require('./tag'),
+	wrappers = require('./wrappers');
 
-var Form = module.exports = function Form (options) {
+var Form = module.exports = function Form (options, elements) {
 
@@ -12,2 +13,5 @@ // default the options object
 
+	// default the elements object
+	this.elements = elements || [];
+
 	// mixin action to attributes if existing
@@ -23,2 +27,26 @@ if (this.options.action !== undefined) {
 
+	// default the theme object
+	this.options.theme = this.options.theme || {};
+
+	// default the form wrapper to no-op
+	this.options.theme.form = this.options.theme.form || wrappers.noop;
+
+	// default the fieldset wrapper to no-op
+	this.options.theme.fieldset = this.options.theme.fieldset || wrappers.noop;
+
+	// default the fieldgroup wrapper to div
+	this.options.theme.fieldgroup = this.options.theme.fieldgroup || {};
+
+	this.options.theme.fieldgroup.group = this.options.theme.fieldgroup.group || wrappers.fieldgroup.group;
+
+	this.options.theme.fieldgroup.fields = this.options.theme.fieldgroup.fields || wrappers.fieldgroup.fields;
+
+	this.options.theme.fieldgroup.field = this.options.theme.fieldgroup.field || wrappers.fieldgroup.field;
+
+	// default the field wrapper to div
+	this.options.theme.field = this.options.theme.field || wrappers.field;
+
+	// default the input wrapper to no-op
+	this.options.theme.control = this.options.theme.control || wrappers.noop;
+
 };
@@ -28,6 +56,21 @@
 
-	// <form action="" method=""></form>
-	var tag = new Tag('form', this.attributes);
-	return tag.render();
+	var content = '',
+		tag;
 
+	for (var i = 0; i < this.elements.length; i++) {
+		content += this.elements[i].render(this.options.theme);
+	}
+
+	tag = new Tag('form', this.attributes, content);
+
+	return this.options.theme.form(tag.render(), this);
+
+};
+
+Form.prototype.add = function (elObject) {
+
+	this.elements.push(elObject);
+
+	return elObject;
+
 };

lib/tag.js

@@ -48,3 +48,5 @@
 
-	return '';
+	return (this.content)
+		? this.content
+		: '';
 
@@ -51,0 +53,0 @@ };

package.json

 {
   "name": "formist",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "description": "A library to publish, consume and validate HTML5 forms.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 formist
 =======
 
-A node.js forms library
+Formist is a node.js forms library.
+
+The key difference between Formist and other node.js forms libraries, is that its DSL more closely matches that of HTML form tags, providing much more flexibility. No widgets.
+
+It was designed to be:
+
+- highly flexible
+- easy to manipulate output for styling (using themes)
+
+## To do
+
+It is still in early stages of development, and has to date been focused on output generation. The following needs to make its way into the library:
+
+- form binding
+- server-side validation handling
+- error handling
+- form + error rendering
+
+## Installing
+
+`npm install formist --save`
+
+### Requiring formist
+
+`var formist = require('formist');`
+
+## Examples
+
+The best way to learn is by example. There are a number of examples in the [formist-example](https://github.com/smebberson/formist-example) repository.
+
+## Creating forms
+
+The following breaks down Formist forms technology.
+
+### Form
+
+A `Form` is a standard HTML form. A `Form` can contain multiple:
+
+- `Fieldset`
+- `Field`
+- `Fieldgroup`
+
+#### To create a form
+
+```js
+var form = new formist.Form(options, elements);
+```
+
+`formist.Form` will take an options object (`options`), with the following:
+
+- `action`, `String`: the action for the form. This is optional.
+- `method`, `String`: the method for the form. This is optional.
+- `theme`, `Object`: a key-function object defining theming overrides. This is optional.
+- `attributes`, `Object`: a key-value object defining any HTML tags. This is optional.
+
+`formist.Form` will take an array of `Fieldset`, `Field` or `Fieldgroup` objects (`elements`).
+
+#### To add form elements
+
+```js
+form.add(element);
+```
+
+`formist.Form.add` will take a `Fieldset`, `Field`, or `Fieldgroup`.
+
+### Fieldset
+
+A `Fieldset` represents a standard HTML fieldset. A `Fieldset` can contain multiple:
+
+- `Fieldgroup`
+- `Field`
+
+#### To create a fieldset
+
+```js
+var fieldset = form.add(formist.Fieldset(options, elements));
+```
+
+`formist.Fieldset` will take an options object (`options`), with the following:
+
+- `legend`, `String`: a string value for the HTML `legend` tag. This is optional.
+- `theme`, `Object`: a key-function object defining theming overrides. This is optional.
+- `attributes`, `Object`: a key-value object defining any HTML tags. This is optional.
+
+`formist.Fieldset` will take an `Array`, `elements` of `Fieldset`, `Field` or `Fieldgroup` objects.
+
+#### To add form elements
+
+```js
+fieldset.add(element);
+```
+
+`formist.Form.add` will take a `Field`, or `Fieldgroup`.
+
+### Field
+
+A field presents a label, and HTML form control (i.e. `input`, `select`, `button`, `textarea`). A field can not contain anything.
+
+#### To create a field
+
+```js
+form.add(formist.Field(tag, options));
+```
+
+`formist.Field` will take a `String`, `tag` representing the name of the HTML tag to produce (i.e. input, select, button, textarea).
+
+`formist.Field` will take an `Object`, `options`, with the following:
+
+- `label`, `Object`: an object with a label key, and an attributes object representing key-value attributes to apply to the `label` tag. **For brevity, this can be a string, if non attributes are required.** This is optional.
+- `theme`, `Object`: a key-function object defining theming overrides. This is optional.
+- `attributes`, `Object`: a key-value object defining any HTML tags. This is optional.
+
+### Control
+
+A control represents a HTML form control (i.e. `input`, `select`, `button`, `textarea`). You don't define controls specifically, you can only wrap them.
+
+### Fieldgroup
+
+A fieldgroup represents a group of fields (i.e. Field). A field group can be passed multiple:
+
+- `Field`
+
+#### To create a fieldgroup
+
+```js
+form.add(formist.Fieldgroup(options, elements));
+```
+
+`formist.Fieldgroup` will take an `Object`, `options`, with the following:
+
+- `label`, `Object`: an object with a label key, and an attributes object representing key-value attributes to apply to the `label` tag. **For brevity, this can be a string, if non attributes are required.** This is optional.
+- `theme`, `Object`: a key-function object defining theming overrides. This is optional.
+- `attributes`, `Object`: a key-value object defining any HTML tags. This is optional.
+
+`formist.Fieldgroup` will take an `Array`, `elements` of `Field`.
+
+## Theming
+
+Formist has advanced support for theming. To define a theme, you can pass a theme object, with the following functions and signatures.
+
+```js
+theme: {
+	form: function (content, form) {
+	},
+	fieldset: function (content, fieldset) {
+	},
+	fieldgroup: {
+		group: function (label, content, fieldgroup) {
+		},
+		fields: function (content, fields) {
+		},
+		field: function (label, content, field) {
+		}
+	},
+	field: function (label, content, field) {
+	},
+	control: function (content) {
+	}
+}
+```

test/test.js

@@ -76,2 +76,9 @@
 
+		it('should render content within a tag', function () {
+
+			var tag = new Tag('form', {}, '{{content}}');
+			expect(tag.render()).to.equal('<form>{{content}}</form>');
+
+		});
+
 	});
@@ -92,4 +99,810 @@
 
+		it('a form with only fields', function () {
+
+			var form = new formist.Form();
+
+			form.add(new formist.Field('input', {
+				type: 'text'
+			}));
+
+			form.add(new formist.Field('input', {
+				type: 'email'
+			}));
+
+			form.add(new formist.Field('select'));
+
+			expect(form.render()).to.equal('<form><div class="field"><input type="text" /></div><div class="field"><input type="email" /></div><div class="field"><select></select></div></form>');
+
+		})
+
+		describe('a form with fieldsets', function () {
+
+			it('with a default legend', function () {
+
+				var form = new formist.Form({
+					action: '/save',
+					method: 'post'
+				});
+
+				form.add(new formist.Fieldset({
+					legend: 'Personal information',
+					attributes: {
+						'class': 'personalInformation'
+					}
+				}));
+
+				expect(form.render()).to.equal('<form action="/save" method="post"><fieldset class="personalInformation"><legend>Personal information</legend></fieldset></form>');
+
+			});
+
+			it('with a customised legend', function () {
+
+				var form = new formist.Form({
+					action: '/save',
+					method: 'post'
+				});
+
+				form.add(new formist.Fieldset({
+					legend: {
+						label: 'Personal information',
+						attributes: {
+							'class': 'personal'
+						}
+					},
+					attributes: {
+						'class': 'personalInformation'
+					}
+				}));
+
+				expect(form.render()).to.equal('<form action="/save" method="post"><fieldset class="personalInformation"><legend class="personal">Personal information</legend></fieldset></form>');
+
+			});
+
+		});
+
+
+		it('a form with a fieldset, and nested fields', function () {
+
+			var form = new formist.Form({
+				action: '/save',
+				method: 'post'
+			});
+
+			var fieldset = form.add(new formist.Fieldset({
+				legend: 'Personal information',
+				attributes: {
+					'class': 'personalInformation'
+				}
+			}));
+
+			fieldset.add(new formist.Field('input', {
+				type: 'datetime'
+			}));
+
+			fieldset.add(new formist.Field('button', {
+				value: 'Save'
+			}));
+
+			expect(form.render()).to.equal('<form action="/save" method="post"><fieldset class="personalInformation"><legend>Personal information</legend><div class="field"><input type="datetime" /></div><div class="field"><button>Save</button></div></fieldset></form>');
+
+		});
+
+		describe('field groups', function () {
+
+			var form,
+				fieldset;
+
+			beforeEach(function () {
+				form = new formist.Form();
+			});
+
+			it("multiple text inputs", function () {
+
+				form.add(new formist.Fieldgroup({
+					label: 'Fields'
+				}, [
+
+					new formist.Field('input', {
+						type: 'text'
+					}),
+					new formist.Field('input', {
+						type: 'text'
+					})
+
+				]));
+
+				expect(form.render()).to.equal('<form><div class="field"><label>Fields</label><div class="fields"><input type="text" /><input type="text" /></div></div></form>');
+			});
+
+			it("multiple radio buttons", function () {
+
+				form.add(new formist.Fieldgroup({
+					label: 'Fields'
+				}, [
+
+					new formist.Field('input', {
+						type: 'radio',
+						label: 'Yes',
+						attributes: {
+							name: 'f',
+							value: 'yes'
+						}
+					}),
+					new formist.Field('input', {
+						type: 'radio',
+						label: 'No',
+						attributes: {
+							name: 'f',
+							value: 'no'
+						}
+					})
+
+				]));
+
+				expect(form.render()).to.equal('<form><div class="field"><label>Fields</label><div class="fields"><label><input name="f" value="yes" type="radio" /> Yes</label><label><input name="f" value="no" type="radio" /> No</label></div></div></form>');
+
+			});
+
+			it("multiple checkboxes", function () {
+
+				form.add(new formist.Fieldgroup({
+					label: 'Fields'
+				}, [
+
+					new formist.Field('input', {
+						type: 'checkbox',
+						label: 'Saturday',
+						attributes: {
+							name: 'day[]',
+							value: 'saturday'
+						}
+					}),
+					new formist.Field('input', {
+						type: 'checkbox',
+						label: 'Sunday',
+						attributes: {
+							name: 'day[]',
+							value: 'sunday'
+						}
+					})
+
+				]));
+
+				expect(form.render()).to.equal('<form><div class="field"><label>Fields</label><div class="fields"><label><input name="day[]" value="saturday" type="checkbox" /> Saturday</label><label><input name="day[]" value="sunday" type="checkbox" /> Sunday</label></div></div></form>');
+
+			});
+
+			it("multiple selects", function () {
+
+				form.add(new formist.Fieldgroup({
+					label: 'Fields'
+				}, [
+
+					new formist.Field('select', {
+						attributes: {
+							name: 'month'
+						}
+					}),
+					new formist.Field('select', {
+						attributes: {
+							name: 'year'
+						}
+					})
+
+				]));
+
+				expect(form.render()).to.equal('<form><div class="field"><label>Fields</label><div class="fields"><select name="month"></select><select name="year"></select></div></div></form>');
+			});
+
+		});
+
+		describe('fields', function () {
+
+			var form,
+				fieldset;
+
+			beforeEach(function () {
+				form = new formist.Form();
+			});
+
+			describe("input:text", function () {
+
+				it("without attributes", function () {
+
+					form.add(new formist.Field('input'));
+					expect(form.render()).to.equal('<form><div class="field"><input type="text" /></div></form>');
+
+				});
+
+				it("with any attributes", function () {
+
+					form.add(new formist.Field('input', {
+						attributes: {
+							'class': 'input',
+							'data-validation': 'required'
+						}
+					}));
+					expect(form.render()).to.equal('<form><div class="field"><input class="input" data-validation="required" type="text" /></div></form>');
+
+				});
+
+			});
+
+			describe("select", function () {
+
+				it("without options or attributes", function () {
+
+					form.add(new formist.Field('select'));
+					expect(form.render()).to.equal('<form><div class="field"><select></select></div></form>');
+
+				});
+
+				it("without options, but any attributes", function () {
+
+					form.add(new formist.Field('select', {
+						attributes: {
+							'class': 'select',
+							'data-validation': 'required'
+						}
+					}));
+					expect(form.render()).to.equal('<form><div class="field"><select class="select" data-validation="required"></select></div></form>');
+
+				});
+
+				describe("with options", function () {
+
+					it("as an array of strings", function () {
+
+						form.add(new formist.Field('select', {
+							options: ['Australia','UK','US']
+						}));
+						expect(form.render()).to.equal('<form><div class="field"><select><option>Australia</option><option>UK</option><option>US</option></select></div></form>');
+
+					});
+
+					it("as an array of objects (label only)", function () {
+
+						form.add(new formist.Field('select', {
+							options: [{label:'Australia'},{label:'UK'},{label:'US'}]
+						}));
+						expect(form.render()).to.equal('<form><div class="field"><select><option>Australia</option><option>UK</option><option>US</option></select></div></form>');
+
+					});
+
+					it("as an array of objects (label and value)", function () {
+
+						form.add(new formist.Field('select', {
+							options: [{label:'Australia',value:'a'},{label:'UK',value:'uk'},{label:'US',value:'us'}]
+						}));
+						expect(form.render()).to.equal('<form><div class="field"><select><option value="a">Australia</option><option value="uk">UK</option><option value="us">US</option></select></div></form>');
+
+					});
+
+					it("as an array of objects with attributes", function () {
+
+						form.add(new formist.Field('select', {
+							options: [{label:'Australia',value:'a',attributes:{selected:true}},{label:'UK',value:'uk'},{label:'US',value:'us',attributes:{disabled:true}}]
+						}));
+						expect(form.render()).to.equal('<form><div class="field"><select><option selected value="a">Australia</option><option value="uk">UK</option><option disabled value="us">US</option></select></div></form>');
+
+					});
+
+				});
+
+			});
+
+			describe("labels", function () {
+
+				beforeEach(function () {
+					form = new formist.Form();
+				});
+
+				it("without a label", function () {
+
+					form.add(new formist.Field('input', {
+						type: 'text'
+					}));
+
+					expect(form.render()).to.equal('<form><div class="field"><input type="text" /></div></form>');
+
+				});
+
+				it("with a basic label", function () {
+
+					form.add(new formist.Field('input', {
+						type: 'text',
+						label: 'Label'
+					}));
+
+					expect(form.render()).to.equal('<form><div class="field"><label>Label</label><input type="text" /></div></form>');
+
+				});
+
+				it("with a customised label", function () {
+
+					form.add(new formist.Field('input', {
+						type: 'text',
+						label: {
+							label: 'Label',
+							attributes: {
+								'class': 'field-label'
+							}
+						}
+					}));
+
+					expect(form.render()).to.equal('<form><div class="field"><label class="field-label">Label</label><input type="text" /></div></form>');
+
+				});
+
+			});
+
+		});
+
+		describe("with a theme", function () {
+
+			it("form wrapper", function () {
+
+				var form = new formist.Form({
+					theme: {
+						form: function (content) {
+							return '<div class="myform">' + content + '</div>';
+						}
+					}
+				});
+
+				expect(form.render()).to.equal('<div class="myform"><form></form></div>');
+
+			});
+
+			it("fieldset wrapper", function () {
+
+				var form = new formist.Form({
+					theme: {
+						fieldset: function (content, fieldset) {
+							return '<div class="fieldset">' + content + '</div>';
+						}
+					}
+				});
+
+				form.add(new formist.Fieldset({
+					legend: 'My fieldset'
+				}));
+
+				expect(form.render()).to.equal('<form><div class="fieldset"><fieldset><legend>My fieldset</legend></fieldset></div></form>');
+
+			});
+
+			describe("field wrapper", function () {
+
+				it("without label", function () {
+
+					var form = new formist.Form({
+						theme: {
+							field: function (label, content, field) {
+								return '<div class="form-group">' + label + content + '</div>';
+							}
+						}
+					});
+
+					form.add(new formist.Field('input', {
+						type: 'email'
+					}));
+
+					expect(form.render()).to.equal('<form><div class="form-group"><input type="email" /></div></form>');
+
+				});
+
+				it("with label", function () {
+
+					var form = new formist.Form({
+						theme: {
+							field: function (label, content, field) {
+								return '<div class="form-group">' + label + content + '</div>';
+							}
+						}
+					});
+
+					form.add(new formist.Field('input', {
+						type: 'email',
+						label: 'Email'
+					}));
+
+					expect(form.render()).to.equal('<form><div class="form-group"><label>Email</label><input type="email" /></div></form>');
+
+				});
+
+			});
+
+			it("control wrapper", function () {
+
+				var form = new formist.Form({
+					theme: {
+						control: function (content, field) {
+							return '<div class="col-sm-8">' + content + '</div>';
+						}
+					}
+				});
+
+				form.add(new formist.Field('input', {
+					type: 'email',
+					label: 'Email'
+				}));
+
+				expect(form.render()).to.equal('<form><div class="field"><label>Email</label><div class="col-sm-8"><input type="email" /></div></div></form>');
+
+			});
+
+			describe("field group wrapper", function () {
+
+				it("without label", function () {
+
+					var form = new formist.Form();
+
+					form.add(new formist.Fieldgroup({}, [
+
+						new formist.Field('input', {
+							type: 'email',
+							label: 'Email'
+						}),
+						new formist.Field('input', {
+							type: 'text',
+							label: 'Text'
+						})
+
+					]));
+
+					expect(form.render()).to.equal('<form><div class="field"><div class="fields"><input type="email" /><input type="text" /></div></div></form>');
+
+				});
+
+				it("with label", function () {
+
+					var form = new formist.Form();
+
+					form.add(new formist.Fieldgroup({
+						label: 'Field group'
+					}, [
+
+						new formist.Field('input', {
+							type: 'email',
+							label: 'Email'
+						}),
+						new formist.Field('input', {
+							type: 'text',
+							label: 'Text'
+						})
+
+					]));
+
+					expect(form.render()).to.equal('<form><div class="field"><label>Field group</label><div class="fields"><input type="email" /><input type="text" /></div></div></form>');
+
+				});
+
+			});
+
+			it("field group > field wrapper", function () {
+				
+				var form = new formist.Form();
+
+				form.add(new formist.Fieldgroup({
+					label: 'Field group',
+					theme: {
+						fields: function (content) {
+							return '<ul>' + content + '</ul>';
+						},
+						field: function (label, content, field) {
+							return '<li>' + label + content + '</li>';
+						}
+					}
+				}, [
+
+					new formist.Field('input', {
+						type: 'email',
+						label: 'Email',
+						attributes: {
+							id: 'e'
+						}
+					}),
+					new formist.Field('input', {
+						type: 'text',
+						label: 'Text',
+						attributes: {
+							id: 't'
+						}
+					})
+
+				]));
+
+				expect(form.render()).to.equal('<form><div class="field"><label>Field group</label><ul><li><label for="e">Email</label><input id="e" type="email" /></li><li><label for="t">Text</label><input id="t" type="text" /></li></ul></div></form>');
+
+			});
+
+			describe("wrapper overrides", function () {
+
+				it("specific to fieldset", function () {
+
+					var form = new formist.Form({
+						theme: {
+							fieldset: function (content) {
+								return '<div class="fieldset-wrapper">' + content + '</div>';
+							}
+						}
+					});
+
+					form.add(new formist.Fieldset({
+						legend: 'First fieldset'
+					}));
+
+					form.add(new formist.Fieldset({
+						legend: 'Second fieldset',
+						theme: {
+							fieldset: function (content) {
+								return '<div class="my-specific-fieldset">' + content + '</div>';
+							}
+						}
+					}));
+
+					form.add(new formist.Fieldset({
+						legend: 'Third fieldset'
+					}));
+
+					expect(form.render()).to.equal('<form><div class="fieldset-wrapper"><fieldset><legend>First fieldset</legend></fieldset></div><div class="my-specific-fieldset"><fieldset><legend>Second fieldset</legend></fieldset></div><div class="fieldset-wrapper"><fieldset><legend>Third fieldset</legend></fieldset></div></form>');
+
+				});
+
+				describe("specific to fieldgroup", function () {
+
+					it("group", function () {
+
+						var form = new formist.Form({
+							theme: {
+								fieldgroup: {
+									group: function (label, content, elements) {
+										return '<div class="inline-field-group">' + label + content + '</div>';
+									}
+								}
+							}
+						});
+
+						form.add(new formist.Fieldgroup({
+							label: 'First fieldgroup'
+						}, [
+
+							new formist.Field('input', {
+								type: 'text'
+							}),
+							new formist.Field('input', {
+								type: 'text'
+							})
+
+						]));
+
+						form.add(new formist.Fieldgroup({
+							label: 'Second fieldgroup',
+							theme: {
+								group: function (label, content, elements) {
+									return '<div class="inline-fields">' + content + '</div>';
+								}
+							}
+						}, [
+
+							new formist.Field('input', {
+								type: 'text'
+							}),
+							new formist.Field('input', {
+								type: 'text'
+							})
+
+						]));
+
+						form.add(new formist.Fieldgroup({
+							label: 'Third fieldgroup',
+						}, [
+
+							new formist.Field('input', {
+								type: 'text'
+							}),
+							new formist.Field('input', {
+								type: 'text'
+							})
+
+						]));
+
+						expect(form.render()).to.equal('<form><div class="inline-field-group"><label>First fieldgroup</label><div class="fields"><input type="text" /><input type="text" /></div></div><div class="inline-fields"><div class="fields"><input type="text" /><input type="text" /></div></div><div class="inline-field-group"><label>Third fieldgroup</label><div class="fields"><input type="text" /><input type="text" /></div></div></form>');
+
+					});
+
+					it("fields", function () {
+
+						var form = new formist.Form({
+							theme: {
+								fieldgroup: {
+									fields: function (content, elements) {
+										return '<div class="inline-field-group">' + content + '</div>';
+									}
+								}
+							}
+						});
+
+						form.add(new formist.Fieldgroup({
+							label: 'First fieldgroup'
+						}, [
+
+							new formist.Field('input', {
+								type: 'text'
+							}),
+							new formist.Field('input', {
+								type: 'text'
+							})
+
+						]));
+
+						form.add(new formist.Fieldgroup({
+							label: 'Second fieldgroup',
+							theme: {
+								fields: function (content, elements) {
+									return '<div class="hide"></div>';
+								}
+							}
+						}, [
+
+							new formist.Field('input', {
+								type: 'text'
+							}),
+							new formist.Field('input', {
+								type: 'text'
+							})
+
+						]));
+
+						form.add(new formist.Fieldgroup({
+							label: 'Third fieldgroup',
+						}, [
+
+							new formist.Field('input', {
+								type: 'text'
+							}),
+							new formist.Field('input', {
+								type: 'text'
+							})
+
+						]));
+
+						expect(form.render()).to.equal('<form><div class="field"><label>First fieldgroup</label><div class="inline-field-group"><input type="text" /><input type="text" /></div></div><div class="field"><label>Second fieldgroup</label><div class="hide"></div></div><div class="field"><label>Third fieldgroup</label><div class="inline-field-group"><input type="text" /><input type="text" /></div></div></form>');
+
+					});
+
+					it("field", function () {
+
+						var form = new formist.Form({
+							theme: {
+								fieldgroup: {
+									field: function (label, content, field) {
+										return '<div class="inline-field">' + content + '</div>';
+									}
+								}
+							}
+						});
+
+						form.add(new formist.Fieldgroup({
+							label: 'First fieldgroup'
+						}, [
+
+							new formist.Field('input', {
+								label: 'First fieldgroup, first field',
+								type: 'text'
+							}),
+							new formist.Field('input', {
+								label: 'First fieldgorup, second field',
+								type: 'text'
+							})
+
+						]));
+
+						form.add(new formist.Fieldgroup({
+							label: 'Second fieldgroup',
+							theme: {
+								field: function (label, content, field) {
+									return '<div class="inline-field with-label">' + label + content + '</div>';
+								}
+							}
+						}, [
+
+							new formist.Field('input', {
+								label: 'Second fieldgroup, first field',
+								type: 'text'
+							}),
+							new formist.Field('input', {
+								label: 'Second fieldgroup, second field',
+								type: 'text'
+							})
+
+						]));
+
+						form.add(new formist.Fieldgroup({
+							label: 'Third fieldgroup',
+						}, [
+
+							new formist.Field('input', {
+								label: 'Third fieldgroup, first field',
+								type: 'text'
+							}),
+							new formist.Field('input', {
+								label: 'Third fieldgroup, second field',
+								type: 'text'
+							})
+
+						]));
+
+						expect(form.render()).to.equal('<form><div class="field"><label>First fieldgroup</label><div class="fields"><div class="inline-field"><input type="text" /></div><div class="inline-field"><input type="text" /></div></div></div><div class="field"><label>Second fieldgroup</label><div class="fields"><div class="inline-field with-label"><label>Second fieldgroup, first field</label><input type="text" /></div><div class="inline-field with-label"><label>Second fieldgroup, second field</label><input type="text" /></div></div></div><div class="field"><label>Third fieldgroup</label><div class="fields"><div class="inline-field"><input type="text" /></div><div class="inline-field"><input type="text" /></div></div></div></form>');
+
+					});
+
+				});
+
+				it("specific to field", function () {
+
+					var form = new formist.Form({
+						theme: {
+							field: function (label, content) {
+								return '<div class="field-wrapper">' + label + content + '</div>';
+							}
+						}
+					});
+
+					form.add(new formist.Field('input', {
+						type: 'text',
+						label: 'First field'
+					}));
+
+					form.add(new formist.Field('input', {
+						type: 'text',
+						label: 'Second field',
+						theme: {
+							field: function (label, content) {
+								return '<div class="field-wrapper field-without-label">' + content + '</div>';
+							}
+						}
+					}));
+
+					form.add(new formist.Field('input', {
+						type: 'text',
+						label: 'Third field'
+					}));
+
+					expect(form.render()).to.equal('<form><div class="field-wrapper"><label>First field</label><input type="text" /></div><div class="field-wrapper field-without-label"><input type="text" /></div><div class="field-wrapper"><label>Third field</label><input type="text" /></div></form>');
+
+				});
+
+				it("specific to control", function () {
+
+					var form = new formist.Form();
+
+					form.add(new formist.Field('input', {
+						type: 'email',
+						label: 'Email'
+					}));
+
+					form.add(new formist.Field('button', {
+						value: 'Save',
+						attributes: {
+							'class': 'btn'
+						},
+						theme: {
+							control: function (content, field) {
+								return '<div class="col-sm-offset-2 col-sm-8">' + content + '</div>';
+							}
+						}
+					}));
+
+					expect(form.render()).to.equal('<form><div class="field"><label>Email</label><input type="email" /></div><div class="field"><div class="col-sm-offset-2 col-sm-8"><button class="btn">Save</button></div></div></form>');
+
+				});
+
+			});
+
+		});
+
 	});
 
 });

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

40284

increased by606.12%

Number of package files

18

increased by63.64%

Lines of code

955

increased by612.69%

Number of lines in readme file

164

increased by3180%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes