Feature: Number input field

.fontello

@@ -1 +1 @@
-015abe7093f727ea50014d30fb984001
+b27e9f4df1193078015631ab448fad05

CHANGELOG.md

@@ -1,5 +1,6 @@
 # Changelog
 
+- v1.11.0 - Feature: Number input [#188](https://github.com/kevinchappell/formBuilder/pull/188)
 - v1.10.6 - Bugfix: Limit scope of bootstrap helpers [#187](https://github.com/kevinchappell/formBuilder/pull/187)
 - v1.10.5 - Bugfix: Other option for radio and checkbox xml attribute  [#186](https://github.com/kevinchappell/formBuilder/pull/186)
 - v1.10.4 - Bugfix: Object.assign [#181](https://github.com/kevinchappell/formBuilder/pull/181)

README.md

@@ -1,4 +1,4 @@
-formBuilder v1.10.6
+formBuilder v1.11.0
 ===========
 
 [![Join the chat at https://gitter.im/kevinchappell/formBuilder](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/kevinchappell/formBuilder?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

bower.json

@@ -1,6 +1,6 @@
 {
 	"name": "formBuilder",
-	"version": "1.10.6",
+	"version": "1.11.0",
 	"main": [
 		"dist/*"
 	],

demo/assets/css/form-render.css

@@ -1,6 +1,6 @@
 /*
 formBuilder - http://kevinchappell.github.io/formBuilder/
-Version: 1.10.6
+Version: 1.11.0
 Author: Kevin Chappell <[email protected]>
 */
 [id^='frmb-'][id$='-form-wrap'] * {
@@ -353,6 +353,9 @@ Author: Kevin Chappell <[email protected]>
 .form-group .required {
   color: #C10000; }
 
+.form-control.number {
+  width: auto; }
+
 /*   ------------   TOOLTIP   ------------   */
 *[tooltip] {
   position: relative; }
@@ -378,7 +381,7 @@ Author: Kevin Chappell <[email protected]>
   border-color: #222 transparent;
   border-width: 6px 6px 0 6px;
   bottom: 17px;
-  content: "";
+  content: '';
   left: 2px;
   position: absolute;
   z-index: 99; }
@@ -395,7 +398,7 @@ Author: Kevin Chappell <[email protected]>
   margin: 0 5px;
   font-size: 12px; }
 
-.form-control[type="color"] {
+.form-control[type='color'] {
   width: 60px;
   padding: 2px;
   display: inline-block; }

demo/assets/js/form-builder.js

@@ -1,6 +1,6 @@
 /*
 formBuilder - http://kevinchappell.github.io/formBuilder/
-Version: 1.10.6
+Version: 1.11.0
 Author: Kevin Chappell <[email protected]>
 */
 'use strict';
@@ -548,6 +548,12 @@ function formBuilderHelpersFn(opts, formBuilder) {
       previewData.style = style;
     }
 
+    if (fieldType === 'number') {
+      previewData.min = $('input.fld-min', field).val();
+      previewData.max = $('input.fld-max', field).val();
+      previewData.step = $('input.fld-step', field).val();
+    }
+
     if (fieldType === 'checkbox') {
       previewData.toggle = $('.checkbox-toggle', field).is(':checked');
     }
@@ -664,6 +670,7 @@ function formBuilderHelpersFn(opts, formBuilder) {
       case 'email':
       case 'date':
       case 'file':
+      case 'number':
         preview = '<input ' + attrsString + '>';
         break;
       case 'color':
@@ -1197,13 +1204,13 @@ function formBuilderEventsFn() {
 
     var defaults = {
       controlPosition: 'right',
-      controlOrder: ['autocomplete', 'button', 'checkbox', 'checkbox-group', 'date', 'file', 'header', 'hidden', 'paragraph', 'radio-group', 'select', 'text', 'textarea'],
+      controlOrder: ['autocomplete', 'button', 'checkbox', 'checkbox-group', 'date', 'file', 'header', 'hidden', 'paragraph', 'number', 'radio-group', 'select', 'text', 'textarea'],
       dataType: 'xml',
       /**
        * Field types to be disabled
        * ['text','select','textarea','radio-group','hidden','file','date','checkbox-group','checkbox','button','autocomplete']
        */
-      disableFields: ['autocomplete', 'hidden'],
+      disableFields: ['autocomplete', 'hidden', 'number'],
       // Uneditable fields or other content you would like to appear before and after regular fields:
       append: false,
       prepend: false,
@@ -1269,6 +1276,7 @@ function formBuilderEventsFn() {
         minOptionMessage: 'This field requires a minimum of 2 options',
         name: 'Name',
         no: 'No',
+        number: 'Number',
         off: 'Off',
         on: 'On',
         option: 'Option',
@@ -1406,6 +1414,13 @@ function formBuilderEventsFn() {
         type: 'paragraph',
         className: 'paragraph'
       }
+    }, {
+      label: opts.messages.number,
+      attrs: {
+        type: 'number',
+        className: 'number',
+        name: 'number'
+      }
     }, {
       label: opts.messages.hidden,
       attrs: {
@@ -1473,7 +1488,6 @@ function formBuilderEventsFn() {
     }
 
     // Create draggable fields for formBuilder
-
     var cbUl = _helpers.markup('ul', null, { id: boxID, className: 'frmb-control' });
 
     if (opts.sortableControls) {
@@ -1846,7 +1860,15 @@ function formBuilderEventsFn() {
 
       advFields.push(subTypeField(values));
 
-      advFields.push(btnStyles(values.style, values.type));
+      if (values.type === 'button') {
+        advFields.push(btnStyles(values.style, values.type));
+      }
+
+      if (values.type === 'number') {
+        advFields.push(numberAttribute('min', values));
+        advFields.push(numberAttribute('max', values));
+        advFields.push(numberAttribute('step', values));
+      }
 
       // Placeholder
       advFields.push(textAttribute('placeholder', values));
@@ -1968,6 +1990,20 @@ function formBuilderEventsFn() {
       return styleField;
     };
 
+    /**
+     * Add a number attibute to a field.
+     * @param  {String} attribute
+     * @param  {Object} values
+     * @return {String}
+     */
+    var numberAttribute = function numberAttribute(attribute, values) {
+      var attrVal = values[attribute] || '';
+      var attrLabel = opts.messages[attribute] || attribute,
+          placeholder = opts.messages.placeholders[attribute] || '',
+          numberAttribute = '<input type="number" value="' + attrVal + '" name="' + attribute + '" placeholder="' + placeholder + '" class="fld-' + attribute + ' form-control" id="' + attribute + '-' + lastID + '">';
+      return '<div class="form-group ' + attribute + '-wrap"><label for="' + attribute + '-' + lastID + '">' + attrLabel + '</label> ' + numberAttribute + '</div>';
+    };
+
     /**
      * Generate some text inputs for field attributes, **will be replaced**
      * @param  {String} attribute
@@ -1980,7 +2016,7 @@ function formBuilderEventsFn() {
 
       var textArea = ['paragraph'];
 
-      var noMaxlength = ['checkbox', 'select', 'checkbox-group', 'date', 'autocomplete', 'radio-group', 'hidden', 'button', 'header'];
+      var noMaxlength = ['checkbox', 'select', 'checkbox-group', 'date', 'autocomplete', 'radio-group', 'hidden', 'button', 'header', 'number'];
 
       var attrVal = attribute === 'label' ? values.label : values[attribute] || '';
       var attrLabel = opts.messages[attribute];
@@ -2041,7 +2077,7 @@ function formBuilderEventsFn() {
         return elem === true;
       })) {
 
-        requireField += '<div class="form-group">';
+        requireField += '<div class="form-group required-wrap">';
         requireField += '<label>&nbsp;</label>';
         var _requiredField = _helpers.markup('input', null, {
           className: 'required',
@@ -2487,7 +2523,10 @@ function formBuilderEventsFn() {
               required: $('input.required', $field).is(':checked'),
               toggle: $('.checkbox-toggle', $field).is(':checked'),
               type: types.type,
-              subtype: types.subtype
+              subtype: types.subtype,
+              min: $('input.fld-min', $field).val(),
+              max: $('input.fld-max', $field).val(),
+              step: $('input.fld-step', $field).val()
             };
             if (roleVals.length) {
               xmlAttrs.role = roleVals.join(',');

demo/assets/js/form-render.js

@@ -1,6 +1,6 @@
 /*
 formBuilder - http://kevinchappell.github.io/formBuilder/
-Version: 1.10.6
+Version: 1.11.0
 Author: Kevin Chappell <[email protected]>
 */
 'use strict';
@@ -266,6 +266,7 @@ function FormRenderFn(options, element) {
       case 'text':
       case 'password':
       case 'email':
+      case 'number':
       case 'file':
       case 'hidden':
       case 'date':