Adds support for buttons

dist/formulate.esm.js

@@ -612,19 +612,20 @@ var rules = {
   /**
    * Check the minimum value of a particular.
    */
-  min: function (value, minimum) {
+  min: function (value, minimum, force) {
     if ( minimum === void 0 ) minimum = 1;
 
     return Promise.resolve((function () {
-      minimum = Number(minimum);
+      if (Array.isArray(value)) {
-      if (!isNaN(value)) {
+        minimum = !isNaN(minimum) ? Number(minimum) : minimum;
-        value = Number(value);
-        return value >= minimum
-      }
-      if (typeof value === 'string') {
         return value.length >= minimum
       }
-      if (Array.isArray(value)) {
+      if ((!isNaN(value) && force !== 'length') || force === 'value') {
+        value = !isNaN(value) ? Number(value) : value;
+        return value >= minimum
+      }
+      if (typeof value === 'string' || (force === 'length')) {
+        value = !isNaN(value) ? value.toString() : value;
         return value.length >= minimum
       }
       return false
@@ -838,7 +839,7 @@ var en = {
     var name = ref.name;
     var args = ref.args;
 
-    return ((sentence(name)) + " must of the the type: " + (args[0] || 'No file formats allowed.'))
+    return ((sentence(name)) + " must be of the the type: " + (args[0] || 'No file formats allowed.'))
   },
 
   /**
@@ -909,22 +910,15 @@ function fauxUploader (file, progress, error, options) {
   return new Promise(function (resolve, reject) {
     var totalTime = (options.fauxUploaderDuration || 2000) * (0.5 + Math.random());
     var start = performance.now();
+
     /**
-     * @todo - remove, intentional failure
+     * Create a recursive timeout that advances the progress.
      */
-    var fail = (Math.random() > 0.5);
     var advance = function () { return setTimeout(function () {
       var elapsed = performance.now() - start;
       var currentProgress = Math.min(100, Math.round(elapsed / totalTime * 100));
       progress(currentProgress);
 
-      /**
-       * @todo - remove, intentional failure
-       */
-      if (fail && currentProgress > 50) {
-        return error('There was an error uploading the file.')
-      }
-
       if (currentProgress >= 100) {
         return resolve({
           url: 'http://via.placeholder.com/350x150.png',
@@ -951,6 +945,7 @@ var context = {
       classification: this.classification,
       component: this.component,
       id: this.id || this.defaultId,
+      hasLabel: (this.label && this.classification !== 'button'),
       label: this.label,
       labelPosition: this.logicalLabelPosition,
       attributes: this.elementAttributes,
@@ -1062,10 +1057,10 @@ function showFieldErrors () {
  * Return the element’s name, or select a fallback.
  */
 function nameOrFallback () {
-  if (this.name === true) {
+  if (this.name === true && this.classification !== 'button') {
     return ((this.type) + "_" + (this.elementAttributes.id))
   }
-  if (this.name === false) {
+  if (this.name === false || (this.classification === 'button' && this.name === true)) {
     return false
   }
   return this.name
@@ -1272,6 +1267,9 @@ var script = {
   },
   data: function data () {
     return {
+      /**
+       * @todo consider swapping out nanoid for this._uid
+       */
       defaultId: nanoid(9),
       localAttributes: {},
       internalModelProxy: this.formulateValue,
@@ -1454,7 +1452,7 @@ var __vue_render__ = function() {
         "div",
         { staticClass: "formulate-input-wrapper" },
         [
-          _vm.context.label && _vm.context.labelPosition === "before"
+          _vm.context.hasLabel && _vm.context.labelPosition === "before"
             ? _vm._t(
                 "label",
                 [
@@ -1471,18 +1469,20 @@ var __vue_render__ = function() {
             : _vm._e(),
           _vm._v(" "),
           _vm._t(
-            "default",
+            "element",
             [
-              _c(_vm.context.component, {
+              _c(
-                tag: "component",
+                _vm.context.component,
-                attrs: { context: _vm.context }
+                { tag: "component", attrs: { context: _vm.context } },
-              })
+                [_vm._t("default", null, null, _vm.context)],
+                2
+              )
             ],
             null,
             _vm.context
           ),
           _vm._v(" "),
-          _vm.context.label && _vm.context.labelPosition === "after"
+          _vm.context.hasLabel && _vm.context.labelPosition === "after"
             ? _vm._t(
                 "label",
                 [
@@ -2580,6 +2580,84 @@ __vue_render__$7._withStripped = true;
 //
 
 var script$8 = {
+  name: 'FormulateInputButton',
+  mixins: [FormulateInputMixin]
+};
+
+/* script */
+var __vue_script__$8 = script$8;
+
+/* template */
+var __vue_render__$8 = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c(
+    "div",
+    {
+      class:
+        "formulate-input-element formulate-input-element--" + _vm.context.type,
+      attrs: { "data-type": _vm.context.type }
+    },
+    [
+      _c(
+        "button",
+        _vm._b({ attrs: { type: _vm.type } }, "button", _vm.attributes, false),
+        [
+          _vm._t("default", [
+            _c("span", {
+              class: "formulate-input-element--" + _vm.context.type + "--label",
+              domProps: {
+                textContent: _vm._s(
+                  _vm.context.value ||
+                    _vm.context.label ||
+                    _vm.context.name ||
+                    "Submit"
+                )
+              }
+            })
+          ])
+        ],
+        2
+      )
+    ]
+  )
+};
+var __vue_staticRenderFns__$8 = [];
+__vue_render__$8._withStripped = true;
+
+  /* style */
+  var __vue_inject_styles__$8 = undefined;
+  /* scoped */
+  var __vue_scope_id__$8 = undefined;
+  /* module identifier */
+  var __vue_module_identifier__$8 = undefined;
+  /* functional template */
+  var __vue_is_functional_template__$8 = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var FormulateInputButton = normalizeComponent(
+    { render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
+    __vue_inject_styles__$8,
+    __vue_script__$8,
+    __vue_scope_id__$8,
+    __vue_is_functional_template__$8,
+    __vue_module_identifier__$8,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+//
+
+var script$9 = {
   name: 'FormulateInputSelect',
   mixins: [FormulateInputMixin],
   computed: {
@@ -2596,10 +2674,10 @@ var script$8 = {
 };
 
 /* script */
-var __vue_script__$8 = script$8;
+var __vue_script__$9 = script$9;
 
 /* template */
-var __vue_render__$8 = function() {
+var __vue_render__$9 = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -2711,17 +2789,17 @@ var __vue_render__$8 = function() {
     ]
   )
 };
-var __vue_staticRenderFns__$8 = [];
+var __vue_staticRenderFns__$9 = [];
-__vue_render__$8._withStripped = true;
+__vue_render__$9._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__$8 = undefined;
+  var __vue_inject_styles__$9 = undefined;
   /* scoped */
-  var __vue_scope_id__$8 = undefined;
+  var __vue_scope_id__$9 = undefined;
   /* module identifier */
-  var __vue_module_identifier__$8 = undefined;
+  var __vue_module_identifier__$9 = undefined;
   /* functional template */
-  var __vue_is_functional_template__$8 = false;
+  var __vue_is_functional_template__$9 = false;
   /* style inject */
   
   /* style inject SSR */
@@ -2731,12 +2809,12 @@ __vue_render__$8._withStripped = true;
 
   
   var FormulateInputSelect = normalizeComponent(
-    { render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
+    { render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
-    __vue_inject_styles__$8,
+    __vue_inject_styles__$9,
-    __vue_script__$8,
+    __vue_script__$9,
-    __vue_scope_id__$8,
+    __vue_scope_id__$9,
-    __vue_is_functional_template__$8,
+    __vue_is_functional_template__$9,
-    __vue_module_identifier__$8,
+    __vue_module_identifier__$9,
     false,
     undefined,
     undefined,
@@ -2745,16 +2823,16 @@ __vue_render__$8._withStripped = true;
 
 //
 
-var script$9 = {
+var script$a = {
   name: 'FormulateInputSlider',
   mixins: [FormulateInputMixin]
 };
 
 /* script */
-var __vue_script__$9 = script$9;
+var __vue_script__$a = script$a;
 
 /* template */
-var __vue_render__$9 = function() {
+var __vue_render__$a = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -2875,17 +2953,17 @@ var __vue_render__$9 = function() {
     ]
   )
 };
-var __vue_staticRenderFns__$9 = [];
+var __vue_staticRenderFns__$a = [];
-__vue_render__$9._withStripped = true;
+__vue_render__$a._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__$9 = undefined;
+  var __vue_inject_styles__$a = undefined;
   /* scoped */
-  var __vue_scope_id__$9 = undefined;
+  var __vue_scope_id__$a = undefined;
   /* module identifier */
-  var __vue_module_identifier__$9 = undefined;
+  var __vue_module_identifier__$a = undefined;
   /* functional template */
-  var __vue_is_functional_template__$9 = false;
+  var __vue_is_functional_template__$a = false;
   /* style inject */
   
   /* style inject SSR */
@@ -2895,12 +2973,12 @@ __vue_render__$9._withStripped = true;
 
   
   var FormulateInputSlider = normalizeComponent(
-    { render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
+    { render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
-    __vue_inject_styles__$9,
+    __vue_inject_styles__$a,
-    __vue_script__$9,
+    __vue_script__$a,
-    __vue_scope_id__$9,
+    __vue_scope_id__$a,
-    __vue_is_functional_template__$9,
+    __vue_is_functional_template__$a,
-    __vue_module_identifier__$9,
+    __vue_module_identifier__$a,
     false,
     undefined,
     undefined,
@@ -2909,16 +2987,16 @@ __vue_render__$9._withStripped = true;
 
 //
 
-var script$a = {
+var script$b = {
   name: 'FormulateInputTextArea',
   mixins: [FormulateInputMixin]
 };
 
 /* script */
-var __vue_script__$a = script$a;
+var __vue_script__$b = script$b;
 
 /* template */
-var __vue_render__$a = function() {
+var __vue_render__$b = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -2960,17 +3038,17 @@ var __vue_render__$a = function() {
     ]
   )
 };
-var __vue_staticRenderFns__$a = [];
+var __vue_staticRenderFns__$b = [];
-__vue_render__$a._withStripped = true;
+__vue_render__$b._withStripped = true;
 
   /* style */
-  var __vue_inject_styles__$a = undefined;
+  var __vue_inject_styles__$b = undefined;
   /* scoped */
-  var __vue_scope_id__$a = undefined;
+  var __vue_scope_id__$b = undefined;
   /* module identifier */
-  var __vue_module_identifier__$a = undefined;
+  var __vue_module_identifier__$b = undefined;
   /* functional template */
-  var __vue_is_functional_template__$a = false;
+  var __vue_is_functional_template__$b = false;
   /* style inject */
   
   /* style inject SSR */
@@ -2980,12 +3058,12 @@ __vue_render__$a._withStripped = true;
 
   
   var FormulateInputTextArea = normalizeComponent(
-    { render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
+    { render: __vue_render__$b, staticRenderFns: __vue_staticRenderFns__$b },
-    __vue_inject_styles__$a,
+    __vue_inject_styles__$b,
-    __vue_script__$a,
+    __vue_script__$b,
-    __vue_scope_id__$a,
+    __vue_scope_id__$b,
-    __vue_is_functional_template__$a,
+    __vue_is_functional_template__$b,
-    __vue_module_identifier__$a,
+    __vue_module_identifier__$b,
     false,
     undefined,
     undefined,
@@ -3005,6 +3083,7 @@ var Formulate = function Formulate () {
       FormulateInputText: FormulateInputText,
       FormulateInputFile: FormulateInputFile,
       FormulateInputGroup: FormulateInputGroup,
+      FormulateInputButton: FormulateInputButton,
       FormulateInputSelect: FormulateInputSelect,
       FormulateInputSlider: FormulateInputSlider,
       FormulateInputTextArea: FormulateInputTextArea

dist/formulate.min.js

@@ -615,19 +615,20 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
     /**
      * Check the minimum value of a particular.
      */
-    min: function (value, minimum) {
+    min: function (value, minimum, force) {
       if ( minimum === void 0 ) minimum = 1;
 
       return Promise.resolve((function () {
-        minimum = Number(minimum);
+        if (Array.isArray(value)) {
-        if (!isNaN(value)) {
+          minimum = !isNaN(minimum) ? Number(minimum) : minimum;
-          value = Number(value);
-          return value >= minimum
-        }
-        if (typeof value === 'string') {
           return value.length >= minimum
         }
-        if (Array.isArray(value)) {
+        if ((!isNaN(value) && force !== 'length') || force === 'value') {
+          value = !isNaN(value) ? Number(value) : value;
+          return value >= minimum
+        }
+        if (typeof value === 'string' || (force === 'length')) {
+          value = !isNaN(value) ? value.toString() : value;
           return value.length >= minimum
         }
         return false
@@ -841,7 +842,7 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
       var name = ref.name;
       var args = ref.args;
 
-      return ((sentence(name)) + " must of the the type: " + (args[0] || 'No file formats allowed.'))
+      return ((sentence(name)) + " must be of the the type: " + (args[0] || 'No file formats allowed.'))
     },
 
     /**
@@ -912,22 +913,15 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
     return new Promise(function (resolve, reject) {
       var totalTime = (options.fauxUploaderDuration || 2000) * (0.5 + Math.random());
       var start = performance.now();
+
       /**
-       * @todo - remove, intentional failure
+       * Create a recursive timeout that advances the progress.
        */
-      var fail = (Math.random() > 0.5);
       var advance = function () { return setTimeout(function () {
         var elapsed = performance.now() - start;
         var currentProgress = Math.min(100, Math.round(elapsed / totalTime * 100));
         progress(currentProgress);
 
-        /**
-         * @todo - remove, intentional failure
-         */
-        if (fail && currentProgress > 50) {
-          return error('There was an error uploading the file.')
-        }
-
         if (currentProgress >= 100) {
           return resolve({
             url: 'http://via.placeholder.com/350x150.png',
@@ -954,6 +948,7 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
         classification: this.classification,
         component: this.component,
         id: this.id || this.defaultId,
+        hasLabel: (this.label && this.classification !== 'button'),
         label: this.label,
         labelPosition: this.logicalLabelPosition,
         attributes: this.elementAttributes,
@@ -1065,10 +1060,10 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
    * Return the element’s name, or select a fallback.
    */
   function nameOrFallback () {
-    if (this.name === true) {
+    if (this.name === true && this.classification !== 'button') {
       return ((this.type) + "_" + (this.elementAttributes.id))
     }
-    if (this.name === false) {
+    if (this.name === false || (this.classification === 'button' && this.name === true)) {
       return false
     }
     return this.name
@@ -1275,6 +1270,9 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
     },
     data: function data () {
       return {
+        /**
+         * @todo consider swapping out nanoid for this._uid
+         */
         defaultId: nanoid(9),
         localAttributes: {},
         internalModelProxy: this.formulateValue,
@@ -1457,7 +1455,7 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
           "div",
           { staticClass: "formulate-input-wrapper" },
           [
-            _vm.context.label && _vm.context.labelPosition === "before"
+            _vm.context.hasLabel && _vm.context.labelPosition === "before"
               ? _vm._t(
                   "label",
                   [
@@ -1474,18 +1472,20 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
               : _vm._e(),
             _vm._v(" "),
             _vm._t(
-              "default",
+              "element",
               [
-                _c(_vm.context.component, {
+                _c(
-                  tag: "component",
+                  _vm.context.component,
-                  attrs: { context: _vm.context }
+                  { tag: "component", attrs: { context: _vm.context } },
-                })
+                  [_vm._t("default", null, null, _vm.context)],
+                  2
+                )
               ],
               null,
               _vm.context
             ),
             _vm._v(" "),
-            _vm.context.label && _vm.context.labelPosition === "after"
+            _vm.context.hasLabel && _vm.context.labelPosition === "after"
               ? _vm._t(
                   "label",
                   [
@@ -2583,6 +2583,84 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
   //
 
   var script$8 = {
+    name: 'FormulateInputButton',
+    mixins: [FormulateInputMixin]
+  };
+
+  /* script */
+  var __vue_script__$8 = script$8;
+
+  /* template */
+  var __vue_render__$8 = function() {
+    var _vm = this;
+    var _h = _vm.$createElement;
+    var _c = _vm._self._c || _h;
+    return _c(
+      "div",
+      {
+        class:
+          "formulate-input-element formulate-input-element--" + _vm.context.type,
+        attrs: { "data-type": _vm.context.type }
+      },
+      [
+        _c(
+          "button",
+          _vm._b({ attrs: { type: _vm.type } }, "button", _vm.attributes, false),
+          [
+            _vm._t("default", [
+              _c("span", {
+                class: "formulate-input-element--" + _vm.context.type + "--label",
+                domProps: {
+                  textContent: _vm._s(
+                    _vm.context.value ||
+                      _vm.context.label ||
+                      _vm.context.name ||
+                      "Submit"
+                  )
+                }
+              })
+            ])
+          ],
+          2
+        )
+      ]
+    )
+  };
+  var __vue_staticRenderFns__$8 = [];
+  __vue_render__$8._withStripped = true;
+
+    /* style */
+    var __vue_inject_styles__$8 = undefined;
+    /* scoped */
+    var __vue_scope_id__$8 = undefined;
+    /* module identifier */
+    var __vue_module_identifier__$8 = undefined;
+    /* functional template */
+    var __vue_is_functional_template__$8 = false;
+    /* style inject */
+    
+    /* style inject SSR */
+    
+    /* style inject shadow dom */
+    
+
+    
+    var FormulateInputButton = normalizeComponent(
+      { render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
+      __vue_inject_styles__$8,
+      __vue_script__$8,
+      __vue_scope_id__$8,
+      __vue_is_functional_template__$8,
+      __vue_module_identifier__$8,
+      false,
+      undefined,
+      undefined,
+      undefined
+    );
+
+  //
+
+  var script$9 = {
     name: 'FormulateInputSelect',
     mixins: [FormulateInputMixin],
     computed: {
@@ -2599,10 +2677,10 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
   };
 
   /* script */
-  var __vue_script__$8 = script$8;
+  var __vue_script__$9 = script$9;
 
   /* template */
-  var __vue_render__$8 = function() {
+  var __vue_render__$9 = function() {
     var _vm = this;
     var _h = _vm.$createElement;
     var _c = _vm._self._c || _h;
@@ -2714,17 +2792,17 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
       ]
     )
   };
-  var __vue_staticRenderFns__$8 = [];
+  var __vue_staticRenderFns__$9 = [];
-  __vue_render__$8._withStripped = true;
+  __vue_render__$9._withStripped = true;
 
     /* style */
-    var __vue_inject_styles__$8 = undefined;
+    var __vue_inject_styles__$9 = undefined;
     /* scoped */
-    var __vue_scope_id__$8 = undefined;
+    var __vue_scope_id__$9 = undefined;
     /* module identifier */
-    var __vue_module_identifier__$8 = undefined;
+    var __vue_module_identifier__$9 = undefined;
     /* functional template */
-    var __vue_is_functional_template__$8 = false;
+    var __vue_is_functional_template__$9 = false;
     /* style inject */
     
     /* style inject SSR */
@@ -2734,12 +2812,12 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
 
     
     var FormulateInputSelect = normalizeComponent(
-      { render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
+      { render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
-      __vue_inject_styles__$8,
+      __vue_inject_styles__$9,
-      __vue_script__$8,
+      __vue_script__$9,
-      __vue_scope_id__$8,
+      __vue_scope_id__$9,
-      __vue_is_functional_template__$8,
+      __vue_is_functional_template__$9,
-      __vue_module_identifier__$8,
+      __vue_module_identifier__$9,
       false,
       undefined,
       undefined,
@@ -2748,16 +2826,16 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
 
   //
 
-  var script$9 = {
+  var script$a = {
     name: 'FormulateInputSlider',
     mixins: [FormulateInputMixin]
   };
 
   /* script */
-  var __vue_script__$9 = script$9;
+  var __vue_script__$a = script$a;
 
   /* template */
-  var __vue_render__$9 = function() {
+  var __vue_render__$a = function() {
     var _vm = this;
     var _h = _vm.$createElement;
     var _c = _vm._self._c || _h;
@@ -2878,17 +2956,17 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
       ]
     )
   };
-  var __vue_staticRenderFns__$9 = [];
+  var __vue_staticRenderFns__$a = [];
-  __vue_render__$9._withStripped = true;
+  __vue_render__$a._withStripped = true;
 
     /* style */
-    var __vue_inject_styles__$9 = undefined;
+    var __vue_inject_styles__$a = undefined;
     /* scoped */
-    var __vue_scope_id__$9 = undefined;
+    var __vue_scope_id__$a = undefined;
     /* module identifier */
-    var __vue_module_identifier__$9 = undefined;
+    var __vue_module_identifier__$a = undefined;
     /* functional template */
-    var __vue_is_functional_template__$9 = false;
+    var __vue_is_functional_template__$a = false;
     /* style inject */
     
     /* style inject SSR */
@@ -2898,12 +2976,12 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
 
     
     var FormulateInputSlider = normalizeComponent(
-      { render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
+      { render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
-      __vue_inject_styles__$9,
+      __vue_inject_styles__$a,
-      __vue_script__$9,
+      __vue_script__$a,
-      __vue_scope_id__$9,
+      __vue_scope_id__$a,
-      __vue_is_functional_template__$9,
+      __vue_is_functional_template__$a,
-      __vue_module_identifier__$9,
+      __vue_module_identifier__$a,
       false,
       undefined,
       undefined,
@@ -2912,16 +2990,16 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
 
   //
 
-  var script$a = {
+  var script$b = {
     name: 'FormulateInputTextArea',
     mixins: [FormulateInputMixin]
   };
 
   /* script */
-  var __vue_script__$a = script$a;
+  var __vue_script__$b = script$b;
 
   /* template */
-  var __vue_render__$a = function() {
+  var __vue_render__$b = function() {
     var _vm = this;
     var _h = _vm.$createElement;
     var _c = _vm._self._c || _h;
@@ -2963,17 +3041,17 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
       ]
     )
   };
-  var __vue_staticRenderFns__$a = [];
+  var __vue_staticRenderFns__$b = [];
-  __vue_render__$a._withStripped = true;
+  __vue_render__$b._withStripped = true;
 
     /* style */
-    var __vue_inject_styles__$a = undefined;
+    var __vue_inject_styles__$b = undefined;
     /* scoped */
-    var __vue_scope_id__$a = undefined;
+    var __vue_scope_id__$b = undefined;
     /* module identifier */
-    var __vue_module_identifier__$a = undefined;
+    var __vue_module_identifier__$b = undefined;
     /* functional template */
-    var __vue_is_functional_template__$a = false;
+    var __vue_is_functional_template__$b = false;
     /* style inject */
     
     /* style inject SSR */
@@ -2983,12 +3061,12 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
 
     
     var FormulateInputTextArea = normalizeComponent(
-      { render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
+      { render: __vue_render__$b, staticRenderFns: __vue_staticRenderFns__$b },
-      __vue_inject_styles__$a,
+      __vue_inject_styles__$b,
-      __vue_script__$a,
+      __vue_script__$b,
-      __vue_scope_id__$a,
+      __vue_scope_id__$b,
-      __vue_is_functional_template__$a,
+      __vue_is_functional_template__$b,
-      __vue_module_identifier__$a,
+      __vue_module_identifier__$b,
       false,
       undefined,
       undefined,
@@ -3008,6 +3086,7 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
         FormulateInputText: FormulateInputText,
         FormulateInputFile: FormulateInputFile,
         FormulateInputGroup: FormulateInputGroup,
+        FormulateInputButton: FormulateInputButton,
         FormulateInputSelect: FormulateInputSelect,
         FormulateInputSlider: FormulateInputSlider,
         FormulateInputTextArea: FormulateInputTextArea

dist/formulate.umd.js

@@ -618,19 +618,20 @@
     /**
      * Check the minimum value of a particular.
      */
-    min: function (value, minimum) {
+    min: function (value, minimum, force) {
       if ( minimum === void 0 ) minimum = 1;
 
       return Promise.resolve((function () {
-        minimum = Number(minimum);
+        if (Array.isArray(value)) {
-        if (!isNaN(value)) {
+          minimum = !isNaN(minimum) ? Number(minimum) : minimum;
-          value = Number(value);
-          return value >= minimum
-        }
-        if (typeof value === 'string') {
           return value.length >= minimum
         }
-        if (Array.isArray(value)) {
+        if ((!isNaN(value) && force !== 'length') || force === 'value') {
+          value = !isNaN(value) ? Number(value) : value;
+          return value >= minimum
+        }
+        if (typeof value === 'string' || (force === 'length')) {
+          value = !isNaN(value) ? value.toString() : value;
           return value.length >= minimum
         }
         return false
@@ -844,7 +845,7 @@
       var name = ref.name;
       var args = ref.args;
 
-      return ((sentence(name)) + " must of the the type: " + (args[0] || 'No file formats allowed.'))
+      return ((sentence(name)) + " must be of the the type: " + (args[0] || 'No file formats allowed.'))
     },
 
     /**
@@ -915,22 +916,15 @@
     return new Promise(function (resolve, reject) {
       var totalTime = (options.fauxUploaderDuration || 2000) * (0.5 + Math.random());
       var start = performance.now();
+
       /**
-       * @todo - remove, intentional failure
+       * Create a recursive timeout that advances the progress.
        */
-      var fail = (Math.random() > 0.5);
       var advance = function () { return setTimeout(function () {
         var elapsed = performance.now() - start;
         var currentProgress = Math.min(100, Math.round(elapsed / totalTime * 100));
         progress(currentProgress);
 
-        /**
-         * @todo - remove, intentional failure
-         */
-        if (fail && currentProgress > 50) {
-          return error('There was an error uploading the file.')
-        }
-
         if (currentProgress >= 100) {
           return resolve({
             url: 'http://via.placeholder.com/350x150.png',
@@ -957,6 +951,7 @@
         classification: this.classification,
         component: this.component,
         id: this.id || this.defaultId,
+        hasLabel: (this.label && this.classification !== 'button'),
         label: this.label,
         labelPosition: this.logicalLabelPosition,
         attributes: this.elementAttributes,
@@ -1068,10 +1063,10 @@
    * Return the element’s name, or select a fallback.
    */
   function nameOrFallback () {
-    if (this.name === true) {
+    if (this.name === true && this.classification !== 'button') {
       return ((this.type) + "_" + (this.elementAttributes.id))
     }
-    if (this.name === false) {
+    if (this.name === false || (this.classification === 'button' && this.name === true)) {
       return false
     }
     return this.name
@@ -1278,6 +1273,9 @@
     },
     data: function data () {
       return {
+        /**
+         * @todo consider swapping out nanoid for this._uid
+         */
         defaultId: nanoid(9),
         localAttributes: {},
         internalModelProxy: this.formulateValue,
@@ -1460,7 +1458,7 @@
           "div",
           { staticClass: "formulate-input-wrapper" },
           [
-            _vm.context.label && _vm.context.labelPosition === "before"
+            _vm.context.hasLabel && _vm.context.labelPosition === "before"
               ? _vm._t(
                   "label",
                   [
@@ -1477,18 +1475,20 @@
               : _vm._e(),
             _vm._v(" "),
             _vm._t(
-              "default",
+              "element",
               [
-                _c(_vm.context.component, {
+                _c(
-                  tag: "component",
+                  _vm.context.component,
-                  attrs: { context: _vm.context }
+                  { tag: "component", attrs: { context: _vm.context } },
-                })
+                  [_vm._t("default", null, null, _vm.context)],
+                  2
+                )
               ],
               null,
               _vm.context
             ),
             _vm._v(" "),
-            _vm.context.label && _vm.context.labelPosition === "after"
+            _vm.context.hasLabel && _vm.context.labelPosition === "after"
               ? _vm._t(
                   "label",
                   [
@@ -2586,6 +2586,84 @@
   //
 
   var script$8 = {
+    name: 'FormulateInputButton',
+    mixins: [FormulateInputMixin]
+  };
+
+  /* script */
+  var __vue_script__$8 = script$8;
+
+  /* template */
+  var __vue_render__$8 = function() {
+    var _vm = this;
+    var _h = _vm.$createElement;
+    var _c = _vm._self._c || _h;
+    return _c(
+      "div",
+      {
+        class:
+          "formulate-input-element formulate-input-element--" + _vm.context.type,
+        attrs: { "data-type": _vm.context.type }
+      },
+      [
+        _c(
+          "button",
+          _vm._b({ attrs: { type: _vm.type } }, "button", _vm.attributes, false),
+          [
+            _vm._t("default", [
+              _c("span", {
+                class: "formulate-input-element--" + _vm.context.type + "--label",
+                domProps: {
+                  textContent: _vm._s(
+                    _vm.context.value ||
+                      _vm.context.label ||
+                      _vm.context.name ||
+                      "Submit"
+                  )
+                }
+              })
+            ])
+          ],
+          2
+        )
+      ]
+    )
+  };
+  var __vue_staticRenderFns__$8 = [];
+  __vue_render__$8._withStripped = true;
+
+    /* style */
+    var __vue_inject_styles__$8 = undefined;
+    /* scoped */
+    var __vue_scope_id__$8 = undefined;
+    /* module identifier */
+    var __vue_module_identifier__$8 = undefined;
+    /* functional template */
+    var __vue_is_functional_template__$8 = false;
+    /* style inject */
+    
+    /* style inject SSR */
+    
+    /* style inject shadow dom */
+    
+
+    
+    var FormulateInputButton = normalizeComponent(
+      { render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
+      __vue_inject_styles__$8,
+      __vue_script__$8,
+      __vue_scope_id__$8,
+      __vue_is_functional_template__$8,
+      __vue_module_identifier__$8,
+      false,
+      undefined,
+      undefined,
+      undefined
+    );
+
+  //
+
+  var script$9 = {
     name: 'FormulateInputSelect',
     mixins: [FormulateInputMixin],
     computed: {
@@ -2602,10 +2680,10 @@
   };
 
   /* script */
-  var __vue_script__$8 = script$8;
+  var __vue_script__$9 = script$9;
 
   /* template */
-  var __vue_render__$8 = function() {
+  var __vue_render__$9 = function() {
     var _vm = this;
     var _h = _vm.$createElement;
     var _c = _vm._self._c || _h;
@@ -2717,17 +2795,17 @@
       ]
     )
   };
-  var __vue_staticRenderFns__$8 = [];
+  var __vue_staticRenderFns__$9 = [];
-  __vue_render__$8._withStripped = true;
+  __vue_render__$9._withStripped = true;
 
     /* style */
-    var __vue_inject_styles__$8 = undefined;
+    var __vue_inject_styles__$9 = undefined;
     /* scoped */
-    var __vue_scope_id__$8 = undefined;
+    var __vue_scope_id__$9 = undefined;
     /* module identifier */
-    var __vue_module_identifier__$8 = undefined;
+    var __vue_module_identifier__$9 = undefined;
     /* functional template */
-    var __vue_is_functional_template__$8 = false;
+    var __vue_is_functional_template__$9 = false;
     /* style inject */
     
     /* style inject SSR */
@@ -2737,12 +2815,12 @@
 
     
     var FormulateInputSelect = normalizeComponent(
-      { render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
+      { render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
-      __vue_inject_styles__$8,
+      __vue_inject_styles__$9,
-      __vue_script__$8,
+      __vue_script__$9,
-      __vue_scope_id__$8,
+      __vue_scope_id__$9,
-      __vue_is_functional_template__$8,
+      __vue_is_functional_template__$9,
-      __vue_module_identifier__$8,
+      __vue_module_identifier__$9,
       false,
       undefined,
       undefined,
@@ -2751,16 +2829,16 @@
 
   //
 
-  var script$9 = {
+  var script$a = {
     name: 'FormulateInputSlider',
     mixins: [FormulateInputMixin]
   };
 
   /* script */
-  var __vue_script__$9 = script$9;
+  var __vue_script__$a = script$a;
 
   /* template */
-  var __vue_render__$9 = function() {
+  var __vue_render__$a = function() {
     var _vm = this;
     var _h = _vm.$createElement;
     var _c = _vm._self._c || _h;
@@ -2881,17 +2959,17 @@
       ]
     )
   };
-  var __vue_staticRenderFns__$9 = [];
+  var __vue_staticRenderFns__$a = [];
-  __vue_render__$9._withStripped = true;
+  __vue_render__$a._withStripped = true;
 
     /* style */
-    var __vue_inject_styles__$9 = undefined;
+    var __vue_inject_styles__$a = undefined;
     /* scoped */
-    var __vue_scope_id__$9 = undefined;
+    var __vue_scope_id__$a = undefined;
     /* module identifier */
-    var __vue_module_identifier__$9 = undefined;
+    var __vue_module_identifier__$a = undefined;
     /* functional template */
-    var __vue_is_functional_template__$9 = false;
+    var __vue_is_functional_template__$a = false;
     /* style inject */
     
     /* style inject SSR */
@@ -2901,12 +2979,12 @@
 
     
     var FormulateInputSlider = normalizeComponent(
-      { render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
+      { render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
-      __vue_inject_styles__$9,
+      __vue_inject_styles__$a,
-      __vue_script__$9,
+      __vue_script__$a,
-      __vue_scope_id__$9,
+      __vue_scope_id__$a,
-      __vue_is_functional_template__$9,
+      __vue_is_functional_template__$a,
-      __vue_module_identifier__$9,
+      __vue_module_identifier__$a,
       false,
       undefined,
       undefined,
@@ -2915,16 +2993,16 @@
 
   //
 
-  var script$a = {
+  var script$b = {
     name: 'FormulateInputTextArea',
     mixins: [FormulateInputMixin]
   };
 
   /* script */
-  var __vue_script__$a = script$a;
+  var __vue_script__$b = script$b;
 
   /* template */
-  var __vue_render__$a = function() {
+  var __vue_render__$b = function() {
     var _vm = this;
     var _h = _vm.$createElement;
     var _c = _vm._self._c || _h;
@@ -2966,17 +3044,17 @@
       ]
     )
   };
-  var __vue_staticRenderFns__$a = [];
+  var __vue_staticRenderFns__$b = [];
-  __vue_render__$a._withStripped = true;
+  __vue_render__$b._withStripped = true;
 
     /* style */
-    var __vue_inject_styles__$a = undefined;
+    var __vue_inject_styles__$b = undefined;
     /* scoped */
-    var __vue_scope_id__$a = undefined;
+    var __vue_scope_id__$b = undefined;
     /* module identifier */
-    var __vue_module_identifier__$a = undefined;
+    var __vue_module_identifier__$b = undefined;
     /* functional template */
-    var __vue_is_functional_template__$a = false;
+    var __vue_is_functional_template__$b = false;
     /* style inject */
     
     /* style inject SSR */
@@ -2986,12 +3064,12 @@
 
     
     var FormulateInputTextArea = normalizeComponent(
-      { render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
+      { render: __vue_render__$b, staticRenderFns: __vue_staticRenderFns__$b },
-      __vue_inject_styles__$a,
+      __vue_inject_styles__$b,
-      __vue_script__$a,
+      __vue_script__$b,
-      __vue_scope_id__$a,
+      __vue_scope_id__$b,
-      __vue_is_functional_template__$a,
+      __vue_is_functional_template__$b,
-      __vue_module_identifier__$a,
+      __vue_module_identifier__$b,
       false,
       undefined,
       undefined,
@@ -3011,6 +3089,7 @@
         FormulateInputText: FormulateInputText,
         FormulateInputFile: FormulateInputFile,
         FormulateInputGroup: FormulateInputGroup,
+        FormulateInputButton: FormulateInputButton,
         FormulateInputSelect: FormulateInputSelect,
         FormulateInputSlider: FormulateInputSlider,
         FormulateInputTextArea: FormulateInputTextArea

dist/snow.css

@@ -130,6 +130,35 @@
     .formulate-input[data-classification='textarea'] textarea:focus {
       outline: 0;
       border: 1px solid #41b883; }
+  .formulate-input[data-classification='button'] button {
+    appearance: none;
+    border-radius: .3em;
+    border: 1px solid #cecece;
+    box-sizing: border-box;
+    background-color: transparent;
+    font-size: .9em;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    padding: .75em;
+    display: block;
+    width: 100%;
+    font-weight: 400;
+    line-height: 1.1em;
+    margin: 0;
+    border-color: #41b883;
+    background-color: #41b883;
+    color: white;
+    min-width: 0;
+    width: auto;
+    font-weight: bold;
+    cursor: pointer; }
+    .formulate-input[data-classification='button'] button::placeholder {
+      color: #a8a8a8; }
+    .formulate-input[data-classification='button'] button:focus {
+      outline: 0;
+      border: 1px solid #41b883; }
+    .formulate-input[data-classification='button'] button:active {
+      background-color: #64c89b;
+      border-color: #64c89b; }
   .formulate-input[data-classification='select'] .formulate-input-element {
     position: relative; }
     .formulate-input[data-classification='select'] .formulate-input-element::before {
@@ -312,7 +341,7 @@
         width: .3em;
         height: 100%;
         right: 0;
-        border-radius: 0; }
+        border-radius: 0 .23em .23em 0; }
         .formulate-input[data-classification="file"] .formulate-files .formulate-file-progress[data-is-finished]::before {
           transition: opacity .1s;
           opacity: 0; }
@@ -386,8 +415,7 @@
       display: flex;
       justify-content: flex-start;
       align-items: center;
-      position: relative;
+      position: relative; }
-      overflow: hidden; }
       .formulate-input[data-classification="file"] .formulate-files .formulate-file::placeholder {
         color: #a8a8a8; }
       .formulate-input[data-classification="file"] .formulate-files .formulate-file:focus {
@@ -404,7 +432,14 @@
       position: relative;
       z-index: 2;
       left: -1px;
-      box-shadow: 0 0 0 1px #efefef; }
+      box-shadow: 0 0 0 1px #efefef;
+      transition: transform .25s, box-shadow .25s, background-color .25s; }
+      @media (pointer: fine) {
+        .formulate-input[data-classification="file"] .formulate-files .formulate-file-image-preview:hover {
+          transition-delay: .2s;
+          transform: scale(3);
+          background-color: #ffffff;
+          box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1); } }
       .formulate-input[data-classification="file"] .formulate-files .formulate-file-image-preview img {
         display: block;
         position: absolute;
@@ -414,6 +449,7 @@
         right: 0;
         bottom: 0;
         top: 0;
-        object-fit: cover; }
+        object-fit: contain;
+        transition: all .25s; }
   .formulate-input[data-classification="file"] [data-type="image"] .formulate-input-upload-area .formulate-input-upload-area-mask::before {
     mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 71.05"><path d="M82.89,0H7.1A7.12,7.12,0,0,0,0,7.11V64a7.11,7.11,0,0,0,7.1,7.1H82.9A7.11,7.11,0,0,0,90,64V7.11A7.12,7.12,0,0,0,82.89,0ZM69.28,39.35a5.44,5.44,0,0,0-8,0L50.58,50.74,32.38,30.88a5.31,5.31,0,0,0-7.92,0L4.74,52.4V7.11A2.37,2.37,0,0,1,7.11,4.74H82.9a2.37,2.37,0,0,1,2.36,2.37V56.3Z"/><circle cx="67.74" cy="22.26" r="8.53"/></svg>'); }

src/Formulate.js

@@ -11,6 +11,7 @@ import FormulateInputGroup from './FormulateInputGroup.vue'
 import FormulateInputBox from './inputs/FormulateInputBox.vue'
 import FormulateInputText from './inputs/FormulateInputText.vue'
 import FormulateInputFile from './inputs/FormulateInputFile.vue'
+import FormulateInputButton from './inputs/FormulateInputButton.vue'
 import FormulateInputSelect from './inputs/FormulateInputSelect.vue'
 import FormulateInputSlider from './inputs/FormulateInputSlider.vue'
 import FormulateInputTextArea from './inputs/FormulateInputTextArea.vue'
@@ -32,6 +33,7 @@ class Formulate {
         FormulateInputText,
         FormulateInputFile,
         FormulateInputGroup,
+        FormulateInputButton,
         FormulateInputSelect,
         FormulateInputSlider,
         FormulateInputTextArea

src/FormulateInput.vue

@@ -8,7 +8,7 @@
   >
     <div class="formulate-input-wrapper">
       <slot
-        v-if="context.label && context.labelPosition === 'before'"
+        v-if="context.hasLabel && context.labelPosition === 'before'"
         name="label"
         v-bind="context"
       >
@@ -18,14 +18,19 @@
           v-text="context.label"
         />
       </slot>
-      <slot v-bind="context">
+      <slot
+        name="element"
+        v-bind="context"
+      >
         <component
           :is="context.component"
           :context="context"
-        />
+        >
+          <slot v-bind="context" />
+        </component>
       </slot>
       <slot
-        v-if="context.label && context.labelPosition === 'after'"
+        v-if="context.hasLabel && context.labelPosition === 'after'"
         name="label"
         v-bind="context.label"
       >
@@ -160,6 +165,9 @@ export default {
   },
   data () {
     return {
+      /**
+       * @todo consider swapping out nanoid for this._uid
+       */
       defaultId: nanoid(9),
       localAttributes: {},
       internalModelProxy: this.formulateValue,

src/inputs/FormulateInputButton.vue

@@ -0,0 +1,27 @@
+<template>
+  <div
+    :class="`formulate-input-element formulate-input-element--${context.type}`"
+    :data-type="context.type"
+  >
+    <button
+      :type="type"
+      v-bind="attributes"
+    >
+      <slot>
+        <span
+          :class="`formulate-input-element--${context.type}--label`"
+          v-text="context.value || context.label || context.name || 'Submit'"
+        />
+      </slot>
+    </button>
+  </div>
+</template>
+
+<script>
+import FormulateInputMixin from '../FormulateInputMixin'
+
+export default {
+  name: 'FormulateInputButton',
+  mixins: [FormulateInputMixin]
+}
+</script>

src/libs/context.js

@@ -15,6 +15,7 @@ export default {
       classification: this.classification,
       component: this.component,
       id: this.id || this.defaultId,
+      hasLabel: (this.label && this.classification !== 'button'),
       label: this.label,
       labelPosition: this.logicalLabelPosition,
       attributes: this.elementAttributes,
@@ -125,10 +126,10 @@ function showFieldErrors () {
  * Return the element’s name, or select a fallback.
  */
 function nameOrFallback () {
-  if (this.name === true) {
+  if (this.name === true && this.classification !== 'button') {
     return `${this.type}_${this.elementAttributes.id}`
   }
-  if (this.name === false) {
+  if (this.name === false || (this.classification === 'button' && this.name === true)) {
     return false
   }
   return this.name

src/libs/faux-uploader.js

@@ -10,22 +10,15 @@ export default function (file, progress, error, options) {
   return new Promise((resolve, reject) => {
     const totalTime = (options.fauxUploaderDuration || 2000) * (0.5 + Math.random())
     const start = performance.now()
+
     /**
-     * @todo - remove, intentional failure
+     * Create a recursive timeout that advances the progress.
      */
-    const fail = (Math.random() > 0.5)
     const advance = () => setTimeout(() => {
       const elapsed = performance.now() - start
       const currentProgress = Math.min(100, Math.round(elapsed / totalTime * 100))
       progress(currentProgress)
 
-      /**
-       * @todo - remove, intentional failure
-       */
-      if (fail && currentProgress > 50) {
-        return error('There was an error uploading the file.')
-      }
-
       if (currentProgress >= 100) {
         return resolve({
           url: 'http://via.placeholder.com/350x150.png',

src/libs/rules.js

@@ -164,17 +164,18 @@ export default {
   /**
    * Check the minimum value of a particular.
    */
-  min: function (value, minimum = 1) {
+  min: function (value, minimum = 1, force) {
     return Promise.resolve((() => {
-      minimum = Number(minimum)
+      if (Array.isArray(value)) {
-      if (!isNaN(value)) {
+        minimum = !isNaN(minimum) ? Number(minimum) : minimum
-        value = Number(value)
-        return value >= minimum
-      }
-      if (typeof value === 'string') {
         return value.length >= minimum
       }
-      if (Array.isArray(value)) {
+      if ((!isNaN(value) && force !== 'length') || force === 'value') {
+        value = !isNaN(value) ? Number(value) : value
+        return value >= minimum
+      }
+      if (typeof value === 'string' || (force === 'length')) {
+        value = !isNaN(value) ? value.toString() : value
         return value.length >= minimum
       }
       return false

src/locales/en.js

@@ -117,7 +117,7 @@ export default {
    * The (field-level) error message for mime errors.
    */
   mime: function ({ name, args }) {
-    return `${s(name)} must of the the type: ${args[0] || 'No file formats allowed.'}`
+    return `${s(name)} must be of the the type: ${args[0] || 'No file formats allowed.'}`
   },
 
   /**

test/Formulate.test.js

@@ -55,6 +55,7 @@ test('installs on vue instance', () => {
     'FormulateInputText',
     'FormulateInputFile',
     'FormulateInputGroup',
+    'FormulateInputButton',
     'FormulateInputSelect',
     'FormulateInputSlider',
     'FormulateInputTextArea'

test/FormulateInputButton.test.js

@@ -0,0 +1,80 @@
+import Vue from 'vue'
+import { mount } from '@vue/test-utils'
+import Formulate from '../src/Formulate.js'
+import FormulateInput from '@/FormulateInput.vue'
+import FormulateInputButton from '@/inputs/FormulateInputButton.vue'
+
+Vue.use(Formulate)
+
+test('type "button" renders a button element', () => {
+  const wrapper = mount(FormulateInput, { propsData: { type: 'button' } })
+  expect(wrapper.contains(FormulateInputButton)).toBe(true)
+})
+
+test('type "submit" renders a button element', () => {
+  const wrapper = mount(FormulateInput, { propsData: { type: 'submit' } })
+  expect(wrapper.contains(FormulateInputButton)).toBe(true)
+})
+
+test('type "button" uses value as highest priority content', () => {
+  const wrapper = mount(FormulateInput, { propsData: {
+    type: 'submit',
+    value: 'Value content',
+    label: 'Label content',
+    name: 'Name content'
+  }})
+  expect(wrapper.find('button').text()).toBe('Value content')
+})
+
+test('type "button" uses label as second highest priority content', () => {
+  const wrapper = mount(FormulateInput, { propsData: {
+    type: 'submit',
+    label: 'Label content',
+    name: 'Name content'
+  }})
+  expect(wrapper.find('button').text()).toBe('Label content')
+})
+
+test('type "button" uses name as lowest priority content', () => {
+  const wrapper = mount(FormulateInput, { propsData: {
+    type: 'submit',
+    name: 'Name content'
+  }})
+  expect(wrapper.find('button').text()).toBe('Name content')
+})
+
+test('type "button" uses "Submit" as default content', () => {
+  const wrapper = mount(FormulateInput, { propsData: {
+    type: 'submit',
+  }})
+  expect(wrapper.find('button').text()).toBe('Submit')
+})
+
+test('type "button" with label does not render label element', () => {
+  const wrapper = mount(FormulateInput, { propsData: {
+    type: 'button',
+    label: 'my label'
+  }})
+  expect(wrapper.find('label').exists()).toBe(false)
+})
+
+test('type "submit" with label does not render label element', () => {
+  const wrapper = mount(FormulateInput, { propsData: {
+    type: 'button',
+    label: 'my label'
+  }})
+  expect(wrapper.find('label').exists()).toBe(false)
+})
+
+test('type "button" renders slot inside button', () => {
+  const wrapper = mount(FormulateInput, {
+    propsData: {
+      type: 'button',
+      label: 'my label',
+    },
+    slots: {
+      default: '<span>My custom slot</span>'
+    }
+  })
+  expect(wrapper.find('button > span').html()).toBe('<span>My custom slot</span>')
+})

test/rules.test.js

@@ -330,11 +330,20 @@ describe('min', () => {
 
   it('passes when a array length', async () => expect(await rules.min(Array(6), '6')).toBe(true))
 
+  it('passes when string is forced to value', async () => expect(await rules.min('bcd', 'aaa', 'value')).toBe(true))
+
+  it('fails when string is forced to lesser value', async () => expect(await rules.min('a', 'b', 'value')).toBe(false))
+
+  it('passes when a number is forced to length', async () => expect(await rules.min('000', 3, 'length')).toBe(true))
+
+  it('fails when a number is forced to length', async () => expect(await rules.min('44', 3, 'length')).toBe(false))
+
   it('fails when a array length', async () => expect(await rules.min(Array(6), '7')).toBe(false))
 
   it('fails when a string length', async () => expect(await rules.min('bar', 4)).toBe(false))
 
   it('fails when a number', async () => expect(await rules.min(3, '7')).toBe(false))
+
 })
 
 /**

themes/snow/_inputs.scss

@@ -150,6 +150,33 @@
     }
   }
 
+  // Button inputs
+// -----------------------------------------------------------------------------
+
+&[data-classification='button'] {
+  button {
+    @include baseinput;
+    border-color: $formulate-green;
+    background-color: $formulate-green;
+    color: white;
+    min-width: 0;
+    width: auto;
+    font-weight: bold;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+
+    &[disabled] {
+      background-color: $formulate-gray-d;
+      border-color: $formulate-gray-d;
+    }
+
+    &:active {
+      background-color: $formulate-green-l;
+      border-color: $formulate-green-l;
+    }
+  }
+}
 
 // Select lists
 // -----------------------------------------------------------------------------

themes/snow/_variables.scss

@@ -14,6 +14,7 @@ $formulate-dark: #000000;
 $formulate-blue-l: #f3f4f4;
 
 $formulate-green: #41b883;
+$formulate-green-l: #64c89b;
 
 $formulate-error: #960505;
 $formulate-error-l: #dc2c2c;