vue-form - npm Package Compare versions

Comparing version 3.0.1 to 3.1.1

dist/vue-form.js

@@ -71,22 +71,28 @@ (function (global, factory) {
       Object.keys(field.$error).forEach(function (key) {
-        if (_this.autoLabel) {
-          var label = findLabel(_this.$slots[key]);
-          if (label) {
-            label.data = label.data || {};
-            label.data.attrs = label.data.attrs || {};
-            label.data.attrs.for = field._id;
+        if (_this.$slots[key] || _this.$scopedSlots[key]) {
+          var out = _this.$slots[key] || _this.$scopedSlots[key](field);
+          if (_this.autoLabel) {
+            var label = findLabel(out);
+            if (label) {
+              label.data = label.data || {};
+              label.data.attrs = label.data.attrs || {};
+              label.data.attrs.for = field._id;
+            }
           }
+          children.push(out);
         }
-        children.push(_this.$slots[key]);
       });
       if (!children.length) {
-        if (this.autoLabel) {
-          var label = findLabel(this.$slots.default);
-          if (label) {
-            label.data = label.data || {};
-            label.data.attrs = label.data.attrs || {};
-            label.data.attrs.for = field._id;
+        if (this.$slots.default || this.$scopedSlots.default) {
+          var out = this.$slots.default || this.$scopedSlots.default(field);
+          if (this.autoLabel) {
+            var label = findLabel(out);
+            if (label) {
+              label.data = label.data || {};
+              label.data.attrs = label.data.attrs || {};
+              label.data.attrs.for = field._id;
+            }
           }
+          children.push(out);
         }
-        children.push(this.$slots.default);
       }
@@ -93,0 +99,0 @@ }

dist/vue-form.min.js

@@ -1,1 +0,1 @@
-!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?module.exports=factory():"function"==typeof define&&define.amd?define(factory):global.vueForm=factory()}(this,function(){"use strict";function findLabel(nodes){if(nodes)for(var i=0;i<nodes.length;i++){var vnode=nodes[i];if("label"===vnode.tag)return nodes[i];if(nodes[i].children)return findLabel(nodes[i].children)}}function addClass(el,className){el.classList?el.classList.add(className):el.className+=" "+className}function removeClass(el,className){el.classList?el.classList.remove(className):el.className=el.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")}function vModelValue(data){return data.model?data.model.value:data.directives.filter(function(v){return"model"===v.name})[0].value}function getVModelAndLabel(nodes){function traverse(nodes){for(var i=0;i<nodes.length;i++){var node=nodes[i];if("label"!==node.tag||foundVnodes.label||(foundVnodes.label=node),node.data)if(node.data.directives){var match=node.data.directives.filter(function(v){return"model"===v.name});match.length&&foundVnodes.vModel.push(node)}else node.data.model&&foundVnodes.vModel.push(node);node.children&&traverse(node.children)}}var foundVnodes={vModel:[],label:null};return traverse(nodes),foundVnodes}function getName(vnode){return vnode.data&&vnode.data.attrs&&vnode.data.attrs.name?vnode.data.attrs.name:vnode.componentOptions&&vnode.componentOptions.propsData&&vnode.componentOptions.propsData.name?vnode.componentOptions.propsData.name:void 0}function hyphenate(str){return str.replace(hyphenateRE,"$1-$2").replace(hyphenateRE,"$1-$2").toLowerCase()}function randomId(){return Math.random().toString(36).substr(2,10)}function compareChanges(vnode,oldvnode){var hasChanged=!1,attrs=vnode.data.attrs||{},oldAttrs=oldvnode.data.attrs||{},out={};if(vModelValue(vnode.data)!==vModelValue(oldvnode.data)&&(out.vModel=!0,hasChanged=!0),Object.keys(validators).forEach(function(validator){attrs[validator]!==oldAttrs[validator]&&(out[validator]=!0,hasChanged=!0)}),vnode.componentOptions&&vnode.componentOptions.propsData&&!function(){var attrs=vnode.componentOptions.propsData,oldAttrs=oldvnode.componentOptions.propsData;Object.keys(validators).forEach(function(validator){attrs[validator]!==oldAttrs[validator]&&(out[validator]=!0,hasChanged=!0)})}(),hasChanged)return out}var _components,config={formComponent:"vueForm",messagesComponent:"fieldMessages",validateComponent:"validate",fieldComponent:"field",messagesTag:"div",fieldTag:"div",classes:{form:{dirty:"vf-form-dirty",pristine:"vf-form-pristine",valid:"vf-form-valid",invalid:"vf-form-invalid",touched:"vf-form-touched",untouched:"vf-form-untouched",submitted:"vf-form-submitted",pending:"vf-form-pending"},validate:{dirty:"vf-field-dirty",pristine:"vf-field-pristine",valid:"vf-field-valid",invalid:"vf-field-invalid",touched:"vf-field-touched",untouched:"vf-field-untouched",submitted:"vf-field-submitted",pending:"vf-field-pending"},input:{dirty:"vf-dirty",pristine:"vf-pristine",valid:"vf-valid",invalid:"vf-invalid",touched:"vf-touched",untouched:"vf-untouched",submitted:"vf-submitted",pending:"vf-pending"}},Promise:window.Promise},messages={render:function(h){var _this=this,children=[],field=this.formstate[this.name];if(field&&field.$error&&this.isShown&&(Object.keys(field.$error).forEach(function(key){if(_this.autoLabel){var label=findLabel(_this.$slots[key]);label&&(label.data=label.data||{},label.data.attrs=label.data.attrs||{},label.data.attrs.for=field._id)}children.push(_this.$slots[key])}),!children.length)){if(this.autoLabel){var label=findLabel(this.$slots.default);label&&(label.data=label.data||{},label.data.attrs=label.data.attrs||{},label.data.attrs.for=field._id)}children.push(this.$slots.default)}return h(this.tag,children)},props:{state:Object,name:String,show:{type:String,default:""},tag:{type:String,default:config.messagesTag},autoLabel:Boolean},data:function(){return{formstate:{}}},mounted:function(){var _this2=this;this.$nextTick(function(){_this2.formstate=_this2.state||_this2.$parent.formstate||_this2.$parent.state})},computed:{isShown:function(){var field=this.formstate[this.name];if(!this.show||!field)return!0;var compare=function(v){return field[v.trim()]};if(this.show.indexOf("&&")>-1){var split=this.show.split("&&");return split.every(compare)}if(this.show.indexOf("||")>-1){var _split=this.show.split("||");return _split.some(compare)}return field[this.show]}}},emailRegExp=/^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i,urlRegExp=/^(http\:\/\/|https\:\/\/)(.{4,})$/,validators={email:function(value,attrValue,vnode){return emailRegExp.test(value)},number:function(value){return!isNaN(value)},url:function(value){return urlRegExp.test(value)},required:function(value,attrValue,vnode){return attrValue===!1||(0===value||(Array.isArray(value)?!!value.length:!!value))},minlength:function(value,length){return value.length>=length},maxlength:function(value,length){return length>=value.length},pattern:function(value,_pattern){var patternRegExp=new RegExp("^"+_pattern+"$");return patternRegExp.test(value)},min:function(value,_min){return 1*value>=1*_min},max:function(value,_max){return 1*_max>=1*value}},vueForm={render:function(h){var _this=this;return h("form",{on:{submit:function(event){_this.state.$submitted=!0,_this.state._cloneState(),_this.$emit("submit",event)}},attrs:{novalidate:"",class:this.className}},[this.$slots.default])},props:{state:Object},data:function(){return{}},created:function(){var _this2=this,controls={},state=this.state,formstate={$dirty:!1,$pristine:!0,$valid:!0,$invalid:!1,$submitted:!1,$touched:!1,$untouched:!0,$pending:!1,$error:{},$submittedState:{},_id:"",_cloneState:function(){var cloned=JSON.parse(JSON.stringify(state));delete cloned.$submittedState,Object.keys(cloned).forEach(function(key){_this2.$set(_this2.state.$submittedState,key,cloned[key])})},_addControl:function(ctrl){controls[ctrl.$name]=ctrl,_this2.$set(state,ctrl.$name,ctrl)},_removeControl:function(ctrl){delete controls[ctrl.$name],_this2.$delete(_this2.state,ctrl.$name),_this2.$delete(_this2.state.$error,ctrl.$name)}};Object.keys(formstate).forEach(function(key){_this2.$set(_this2.state,key,formstate[key])}),this.$watch("state",function(){var isDirty=!1,isValid=!0,isTouched=!1,isPending=!1;Object.keys(controls).forEach(function(key){var control=controls[key];control.$submitted=state.$submitted,control.$dirty&&(isDirty=!0),control.$touched&&(isTouched=!0),control.$pending&&(isPending=!0),control.$valid?_this2.$delete(state.$error,control.$name):(isValid=!1,_this2.$set(state.$error,control.$name,control))}),state.$dirty=isDirty,state.$pristine=!isDirty,state.$touched=isTouched,state.$untouched=!isTouched,state.$valid=isValid,state.$invalid=!isValid,state.$pending=isPending},{deep:!0,immediate:!0})},computed:{className:function(){var out=[],c=config.classes.form;return this.state.$dirty?out.push(c.dirty):out.push(c.pristine),this.state.$valid?out.push(c.valid):out.push(c.invalid),this.state.$touched?out.push(c.touched):out.push(c.untouched),this.state.$submitted&&out.push(c.submitted),this.state.$pending&&out.push(c.pending),out.join(" ")}}},hyphenateRE=/([^-])([A-Z])/g,vueFormValidator={name:"vue-form-validator",bind:function(el,binding,vnode){var fieldstate=binding.value,attrs=vnode.data.attrs||{},inputName=getName(vnode);return inputName?(Object.keys(attrs).forEach(function(attr){var prop=void 0;prop="type"===attr?attrs[attr].toLowerCase():attr.toLowerCase(),validators[prop]&&!fieldstate._validators[prop]&&(fieldstate._validators[prop]=validators[prop])}),vnode.componentOptions&&vnode.componentOptions.propsData&&Object.keys(vnode.componentOptions.propsData).forEach(function(prop){validators[prop]&&!fieldstate._validators[prop]&&(fieldstate._validators[prop]=validators[prop])}),fieldstate._validate(vnode),el.addEventListener("blur",function(){fieldstate._setTouched()},!1),el.addEventListener("focus",function(){fieldstate._setFocused()},!1),void(vnode.componentInstance&&(vnode.componentInstance.$on("blur",function(){fieldstate._setTouched()}),vnode.componentInstance.$on("focus",function(){fieldstate._setFocused()})))):void console.warn("vue-form: name attribute missing")},update:function(el,binding,vnode,oldVNode){var changes=compareChanges(vnode,oldVNode),fieldstate=binding.value;changes&&(changes.vModel?(fieldstate._hasFocused&&fieldstate._setDirty(),fieldstate._validate(vnode)):fieldstate._validate(vnode))}},validate={render:function(h){var _this=this,foundVnodes=getVModelAndLabel(this.$slots.default),vModelnodes=foundVnodes.vModel,attrs={for:null};if(vModelnodes.length){if(this.name=getName(vModelnodes[0]),this.autoLabel){var id=this.fieldstate._id||vModelnodes[0].data.attrs.id||"vf"+randomId();this.fieldstate._id=id,vModelnodes[0].data.attrs.id=id,foundVnodes.label?(foundVnodes.label.data=foundVnodes.label.data||{},foundVnodes.label.data.attrs=foundVnodes.label.data.attrs={},foundVnodes.label.data.attrs.for=id):"label"===this.tag&&(attrs.for=id)}vModelnodes.forEach(function(vnode){vnode.data.directives||(vnode.data.directives=[]),vnode.data.directives.push({name:"vue-form-validator",value:_this.fieldstate}),vnode.data.attrs["vue-form-validator"]=""})}else console.warn("Element with v-model not found");return h(this.tag,{class:this.className.join(" "),attrs:attrs},this.$slots.default)},props:{state:Object,custom:null,autoLabel:Boolean,tag:{type:String,default:"div"}},data:function(){return{name:"",formstate:{},fieldstate:{}}},computed:{className:function(){var out=[],c=config.classes.validate;return this.fieldstate.$dirty?out.push(c.dirty):out.push(c.pristine),this.fieldstate.$valid?out.push(c.valid):out.push(c.invalid),this.fieldstate.$touched?out.push(c.touched):out.push(c.untouched),this.fieldstate.$pending&&out.push(c.pending),Object.keys(this.fieldstate.$error).forEach(function(error){out.push(c.invalid+"-"+hyphenate(error))}),out},inputClassName:function(){var out=[],c=config.classes.input;return this.fieldstate.$dirty?out.push(c.dirty):out.push(c.pristine),this.fieldstate.$valid?out.push(c.valid):out.push(c.invalid),this.fieldstate.$touched?out.push(c.touched):out.push(c.untouched),this.fieldstate.$pending&&out.push(c.pending),Object.keys(this.fieldstate.$error).forEach(function(error){out.push(c.invalid+"-"+hyphenate(error))}),out}},mounted:function(){this.fieldstate.$name=this.name,this.formstate=this.state||this.$parent.state,this.formstate._addControl(this.fieldstate);var vModelEls=this.$el.querySelectorAll("[vue-form-validator]");this.$watch("inputClassName",function(value,oldValue){if(oldValue)for(var _loop=function(i){oldValue.forEach(function(v){return removeClass(vModelEls[i],v)})},i=0;i<vModelEls.length;i++)_loop(i);for(var _loop2=function(_i){value.forEach(function(v){return addClass(vModelEls[_i],v)})},_i=0;_i<vModelEls.length;_i++)_loop2(_i)},{deep:!0,immediate:!0})},created:function(){var _this3=this,vm=this,pendingValidators=[],_val=void 0;this.fieldstate={$name:"",$dirty:!1,$pristine:!0,$valid:!0,$invalid:!1,$touched:!1,$untouched:!0,$pending:!1,$submitted:!1,$error:{},_id:"",_setValidatorVadility:function(validator,isValid){isValid?vm.$delete(this.$error,validator):vm.$set(this.$error,validator,!0)},_setVadility:function(isValid){this.$valid=isValid,this.$invalid=!isValid},_setDirty:function(){this.$dirty=!0,this.$pristine=!1},_setPristine:function(){this.$dirty=!1,this.$pristine=!0},_setTouched:function(){this.$touched=!0,this.$untouched=!1},_setUntouched:function(){this.$touched=!1,this.$untouched=!0},_setFocused:function(){this._hasFocused=!0},_hasFocused:!1,_validators:{},_validate:function(vnode){var _this2=this;this.$pending=!0;var isValid=!0,emptyAndRequired=!1,value=vModelValue(vnode.data);_val=value;var pending={promises:[],names:[]};pendingValidators.push(pending);var attrs=vnode.data.attrs||{},propsData=vnode.componentOptions&&vnode.componentOptions.propsData?vnode.componentOptions.propsData:{};Object.keys(this._validators).forEach(function(validator){if((""===value||void 0===value||null===value)&&"required"!==validator)return _this2._setValidatorVadility(validator,!0),void(emptyAndRequired=!0);var attrValue="undefined"!=typeof attrs[validator]?attrs[validator]:propsData[validator],result=_this2._validators[validator](value,attrValue,vnode);"boolean"==typeof result?result?_this2._setValidatorVadility(validator,!0):(isValid=!1,_this2._setValidatorVadility(validator,!1)):(pending.promises.push(result),pending.names.push(validator))}),pending.promises.length?config.Promise.all(pending.promises).then(function(results){pending===pendingValidators[pendingValidators.length-1]&&(pendingValidators=[],results.forEach(function(result,i){var name=pending.names[i];result?_this2._setValidatorVadility(name,!0):(isValid=!1,_this2._setValidatorVadility(name,!1))}),_this2._setVadility(isValid),_this2.$pending=!1)}):(this._setVadility(isValid),this.$pending=!1)}},this.custom&&Object.keys(this.custom).forEach(function(prop){_this3.fieldstate._validators[prop]=_this3.custom[prop]})},destroyed:function(){this.formstate._removeControl(this.fieldstate)}},field={render:function(h){var foundVnodes=getVModelAndLabel(this.$slots.default),vModelnodes=foundVnodes.vModel,attrs={for:null};if(vModelnodes.length&&this.autoLabel){var id=vModelnodes[0].data.attrs.id||"vf"+randomId();vModelnodes[0].data.attrs.id=id,foundVnodes.label?(foundVnodes.label.data=foundVnodes.label.data||{},foundVnodes.label.data.attrs=foundVnodes.label.data.attrs={},foundVnodes.label.data.attrs.for=id):"label"===this.tag&&(attrs.for=id)}return h(this.tag,{attrs:attrs},this.$slots.default)},props:{tag:{type:String,default:config.fieldTag},autoLabel:{type:Boolean,default:!0}}},defineProperty=function(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj},main={install:function(Vue){Vue.component(config.formComponent,vueForm),Vue.component(config.validateComponent,validate),Vue.component(config.messagesComponent,messages),Vue.component(config.fieldComponent,field),Vue.directive("vue-form-validator",vueFormValidator)},config:config,addValidator:function(key,fn){validators[key]=fn},mixin:{components:(_components={},defineProperty(_components,config.formComponent,vueForm),defineProperty(_components,config.validateComponent,validate),defineProperty(_components,config.messagesComponent,messages),defineProperty(_components,config.fieldComponent,field),_components),directives:{vueFormValidator:vueFormValidator}}};return main});
+!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?module.exports=factory():"function"==typeof define&&define.amd?define(factory):global.vueForm=factory()}(this,function(){"use strict";function findLabel(nodes){if(nodes)for(var i=0;i<nodes.length;i++){var vnode=nodes[i];if("label"===vnode.tag)return nodes[i];if(nodes[i].children)return findLabel(nodes[i].children)}}function addClass(el,className){el.classList?el.classList.add(className):el.className+=" "+className}function removeClass(el,className){el.classList?el.classList.remove(className):el.className=el.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")}function vModelValue(data){return data.model?data.model.value:data.directives.filter(function(v){return"model"===v.name})[0].value}function getVModelAndLabel(nodes){function traverse(nodes){for(var i=0;i<nodes.length;i++){var node=nodes[i];if("label"!==node.tag||foundVnodes.label||(foundVnodes.label=node),node.data)if(node.data.directives){var match=node.data.directives.filter(function(v){return"model"===v.name});match.length&&foundVnodes.vModel.push(node)}else node.data.model&&foundVnodes.vModel.push(node);node.children&&traverse(node.children)}}var foundVnodes={vModel:[],label:null};return traverse(nodes),foundVnodes}function getName(vnode){return vnode.data&&vnode.data.attrs&&vnode.data.attrs.name?vnode.data.attrs.name:vnode.componentOptions&&vnode.componentOptions.propsData&&vnode.componentOptions.propsData.name?vnode.componentOptions.propsData.name:void 0}function hyphenate(str){return str.replace(hyphenateRE,"$1-$2").replace(hyphenateRE,"$1-$2").toLowerCase()}function randomId(){return Math.random().toString(36).substr(2,10)}function compareChanges(vnode,oldvnode){var hasChanged=!1,attrs=vnode.data.attrs||{},oldAttrs=oldvnode.data.attrs||{},out={};if(vModelValue(vnode.data)!==vModelValue(oldvnode.data)&&(out.vModel=!0,hasChanged=!0),Object.keys(validators).forEach(function(validator){attrs[validator]!==oldAttrs[validator]&&(out[validator]=!0,hasChanged=!0)}),vnode.componentOptions&&vnode.componentOptions.propsData&&!function(){var attrs=vnode.componentOptions.propsData,oldAttrs=oldvnode.componentOptions.propsData;Object.keys(validators).forEach(function(validator){attrs[validator]!==oldAttrs[validator]&&(out[validator]=!0,hasChanged=!0)})}(),hasChanged)return out}var _components,config={formComponent:"vueForm",messagesComponent:"fieldMessages",validateComponent:"validate",fieldComponent:"field",messagesTag:"div",fieldTag:"div",classes:{form:{dirty:"vf-form-dirty",pristine:"vf-form-pristine",valid:"vf-form-valid",invalid:"vf-form-invalid",touched:"vf-form-touched",untouched:"vf-form-untouched",submitted:"vf-form-submitted",pending:"vf-form-pending"},validate:{dirty:"vf-field-dirty",pristine:"vf-field-pristine",valid:"vf-field-valid",invalid:"vf-field-invalid",touched:"vf-field-touched",untouched:"vf-field-untouched",submitted:"vf-field-submitted",pending:"vf-field-pending"},input:{dirty:"vf-dirty",pristine:"vf-pristine",valid:"vf-valid",invalid:"vf-invalid",touched:"vf-touched",untouched:"vf-untouched",submitted:"vf-submitted",pending:"vf-pending"}},Promise:window.Promise},messages={render:function(h){var _this=this,children=[],field=this.formstate[this.name];if(field&&field.$error&&this.isShown&&(Object.keys(field.$error).forEach(function(key){if(_this.$slots[key]||_this.$scopedSlots[key]){var out=_this.$slots[key]||_this.$scopedSlots[key](field);if(_this.autoLabel){var label=findLabel(out);label&&(label.data=label.data||{},label.data.attrs=label.data.attrs||{},label.data.attrs.for=field._id)}children.push(out)}}),!children.length&&(this.$slots.default||this.$scopedSlots.default))){var out=this.$slots.default||this.$scopedSlots.default(field);if(this.autoLabel){var label=findLabel(out);label&&(label.data=label.data||{},label.data.attrs=label.data.attrs||{},label.data.attrs.for=field._id)}children.push(out)}return h(this.tag,children)},props:{state:Object,name:String,show:{type:String,default:""},tag:{type:String,default:config.messagesTag},autoLabel:Boolean},data:function(){return{formstate:{}}},mounted:function(){var _this2=this;this.$nextTick(function(){_this2.formstate=_this2.state||_this2.$parent.formstate||_this2.$parent.state})},computed:{isShown:function(){var field=this.formstate[this.name];if(!this.show||!field)return!0;var compare=function(v){return field[v.trim()]};if(this.show.indexOf("&&")>-1){var split=this.show.split("&&");return split.every(compare)}if(this.show.indexOf("||")>-1){var _split=this.show.split("||");return _split.some(compare)}return field[this.show]}}},emailRegExp=/^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i,urlRegExp=/^(http\:\/\/|https\:\/\/)(.{4,})$/,validators={email:function(value,attrValue,vnode){return emailRegExp.test(value)},number:function(value){return!isNaN(value)},url:function(value){return urlRegExp.test(value)},required:function(value,attrValue,vnode){return attrValue===!1||(0===value||(Array.isArray(value)?!!value.length:!!value))},minlength:function(value,length){return value.length>=length},maxlength:function(value,length){return length>=value.length},pattern:function(value,_pattern){var patternRegExp=new RegExp("^"+_pattern+"$");return patternRegExp.test(value)},min:function(value,_min){return 1*value>=1*_min},max:function(value,_max){return 1*_max>=1*value}},vueForm={render:function(h){var _this=this;return h("form",{on:{submit:function(event){_this.state.$submitted=!0,_this.state._cloneState(),_this.$emit("submit",event)}},attrs:{novalidate:"",class:this.className}},[this.$slots.default])},props:{state:Object},data:function(){return{}},created:function(){var _this2=this,controls={},state=this.state,formstate={$dirty:!1,$pristine:!0,$valid:!0,$invalid:!1,$submitted:!1,$touched:!1,$untouched:!0,$pending:!1,$error:{},$submittedState:{},_id:"",_cloneState:function(){var cloned=JSON.parse(JSON.stringify(state));delete cloned.$submittedState,Object.keys(cloned).forEach(function(key){_this2.$set(_this2.state.$submittedState,key,cloned[key])})},_addControl:function(ctrl){controls[ctrl.$name]=ctrl,_this2.$set(state,ctrl.$name,ctrl)},_removeControl:function(ctrl){delete controls[ctrl.$name],_this2.$delete(_this2.state,ctrl.$name),_this2.$delete(_this2.state.$error,ctrl.$name)}};Object.keys(formstate).forEach(function(key){_this2.$set(_this2.state,key,formstate[key])}),this.$watch("state",function(){var isDirty=!1,isValid=!0,isTouched=!1,isPending=!1;Object.keys(controls).forEach(function(key){var control=controls[key];control.$submitted=state.$submitted,control.$dirty&&(isDirty=!0),control.$touched&&(isTouched=!0),control.$pending&&(isPending=!0),control.$valid?_this2.$delete(state.$error,control.$name):(isValid=!1,_this2.$set(state.$error,control.$name,control))}),state.$dirty=isDirty,state.$pristine=!isDirty,state.$touched=isTouched,state.$untouched=!isTouched,state.$valid=isValid,state.$invalid=!isValid,state.$pending=isPending},{deep:!0,immediate:!0})},computed:{className:function(){var out=[],c=config.classes.form;return this.state.$dirty?out.push(c.dirty):out.push(c.pristine),this.state.$valid?out.push(c.valid):out.push(c.invalid),this.state.$touched?out.push(c.touched):out.push(c.untouched),this.state.$submitted&&out.push(c.submitted),this.state.$pending&&out.push(c.pending),out.join(" ")}}},hyphenateRE=/([^-])([A-Z])/g,vueFormValidator={name:"vue-form-validator",bind:function(el,binding,vnode){var fieldstate=binding.value,attrs=vnode.data.attrs||{},inputName=getName(vnode);return inputName?(Object.keys(attrs).forEach(function(attr){var prop=void 0;prop="type"===attr?attrs[attr].toLowerCase():attr.toLowerCase(),validators[prop]&&!fieldstate._validators[prop]&&(fieldstate._validators[prop]=validators[prop])}),vnode.componentOptions&&vnode.componentOptions.propsData&&Object.keys(vnode.componentOptions.propsData).forEach(function(prop){validators[prop]&&!fieldstate._validators[prop]&&(fieldstate._validators[prop]=validators[prop])}),fieldstate._validate(vnode),el.addEventListener("blur",function(){fieldstate._setTouched()},!1),el.addEventListener("focus",function(){fieldstate._setFocused()},!1),void(vnode.componentInstance&&(vnode.componentInstance.$on("blur",function(){fieldstate._setTouched()}),vnode.componentInstance.$on("focus",function(){fieldstate._setFocused()})))):void console.warn("vue-form: name attribute missing")},update:function(el,binding,vnode,oldVNode){var changes=compareChanges(vnode,oldVNode),fieldstate=binding.value;changes&&(changes.vModel?(fieldstate._hasFocused&&fieldstate._setDirty(),fieldstate._validate(vnode)):fieldstate._validate(vnode))}},validate={render:function(h){var _this=this,foundVnodes=getVModelAndLabel(this.$slots.default),vModelnodes=foundVnodes.vModel,attrs={for:null};if(vModelnodes.length){if(this.name=getName(vModelnodes[0]),this.autoLabel){var id=this.fieldstate._id||vModelnodes[0].data.attrs.id||"vf"+randomId();this.fieldstate._id=id,vModelnodes[0].data.attrs.id=id,foundVnodes.label?(foundVnodes.label.data=foundVnodes.label.data||{},foundVnodes.label.data.attrs=foundVnodes.label.data.attrs={},foundVnodes.label.data.attrs.for=id):"label"===this.tag&&(attrs.for=id)}vModelnodes.forEach(function(vnode){vnode.data.directives||(vnode.data.directives=[]),vnode.data.directives.push({name:"vue-form-validator",value:_this.fieldstate}),vnode.data.attrs["vue-form-validator"]=""})}else console.warn("Element with v-model not found");return h(this.tag,{class:this.className.join(" "),attrs:attrs},this.$slots.default)},props:{state:Object,custom:null,autoLabel:Boolean,tag:{type:String,default:"div"}},data:function(){return{name:"",formstate:{},fieldstate:{}}},computed:{className:function(){var out=[],c=config.classes.validate;return this.fieldstate.$dirty?out.push(c.dirty):out.push(c.pristine),this.fieldstate.$valid?out.push(c.valid):out.push(c.invalid),this.fieldstate.$touched?out.push(c.touched):out.push(c.untouched),this.fieldstate.$pending&&out.push(c.pending),Object.keys(this.fieldstate.$error).forEach(function(error){out.push(c.invalid+"-"+hyphenate(error))}),out},inputClassName:function(){var out=[],c=config.classes.input;return this.fieldstate.$dirty?out.push(c.dirty):out.push(c.pristine),this.fieldstate.$valid?out.push(c.valid):out.push(c.invalid),this.fieldstate.$touched?out.push(c.touched):out.push(c.untouched),this.fieldstate.$pending&&out.push(c.pending),Object.keys(this.fieldstate.$error).forEach(function(error){out.push(c.invalid+"-"+hyphenate(error))}),out}},mounted:function(){this.fieldstate.$name=this.name,this.formstate=this.state||this.$parent.state,this.formstate._addControl(this.fieldstate);var vModelEls=this.$el.querySelectorAll("[vue-form-validator]");this.$watch("inputClassName",function(value,oldValue){if(oldValue)for(var _loop=function(i){oldValue.forEach(function(v){return removeClass(vModelEls[i],v)})},i=0;i<vModelEls.length;i++)_loop(i);for(var _loop2=function(_i){value.forEach(function(v){return addClass(vModelEls[_i],v)})},_i=0;_i<vModelEls.length;_i++)_loop2(_i)},{deep:!0,immediate:!0})},created:function(){var _this3=this,vm=this,pendingValidators=[],_val=void 0;this.fieldstate={$name:"",$dirty:!1,$pristine:!0,$valid:!0,$invalid:!1,$touched:!1,$untouched:!0,$pending:!1,$submitted:!1,$error:{},_id:"",_setValidatorVadility:function(validator,isValid){isValid?vm.$delete(this.$error,validator):vm.$set(this.$error,validator,!0)},_setVadility:function(isValid){this.$valid=isValid,this.$invalid=!isValid},_setDirty:function(){this.$dirty=!0,this.$pristine=!1},_setPristine:function(){this.$dirty=!1,this.$pristine=!0},_setTouched:function(){this.$touched=!0,this.$untouched=!1},_setUntouched:function(){this.$touched=!1,this.$untouched=!0},_setFocused:function(){this._hasFocused=!0},_hasFocused:!1,_validators:{},_validate:function(vnode){var _this2=this;this.$pending=!0;var isValid=!0,emptyAndRequired=!1,value=vModelValue(vnode.data);_val=value;var pending={promises:[],names:[]};pendingValidators.push(pending);var attrs=vnode.data.attrs||{},propsData=vnode.componentOptions&&vnode.componentOptions.propsData?vnode.componentOptions.propsData:{};Object.keys(this._validators).forEach(function(validator){if((""===value||void 0===value||null===value)&&"required"!==validator)return _this2._setValidatorVadility(validator,!0),void(emptyAndRequired=!0);var attrValue="undefined"!=typeof attrs[validator]?attrs[validator]:propsData[validator],result=_this2._validators[validator](value,attrValue,vnode);"boolean"==typeof result?result?_this2._setValidatorVadility(validator,!0):(isValid=!1,_this2._setValidatorVadility(validator,!1)):(pending.promises.push(result),pending.names.push(validator))}),pending.promises.length?config.Promise.all(pending.promises).then(function(results){pending===pendingValidators[pendingValidators.length-1]&&(pendingValidators=[],results.forEach(function(result,i){var name=pending.names[i];result?_this2._setValidatorVadility(name,!0):(isValid=!1,_this2._setValidatorVadility(name,!1))}),_this2._setVadility(isValid),_this2.$pending=!1)}):(this._setVadility(isValid),this.$pending=!1)}},this.custom&&Object.keys(this.custom).forEach(function(prop){_this3.fieldstate._validators[prop]=_this3.custom[prop]})},destroyed:function(){this.formstate._removeControl(this.fieldstate)}},field={render:function(h){var foundVnodes=getVModelAndLabel(this.$slots.default),vModelnodes=foundVnodes.vModel,attrs={for:null};if(vModelnodes.length&&this.autoLabel){var id=vModelnodes[0].data.attrs.id||"vf"+randomId();vModelnodes[0].data.attrs.id=id,foundVnodes.label?(foundVnodes.label.data=foundVnodes.label.data||{},foundVnodes.label.data.attrs=foundVnodes.label.data.attrs={},foundVnodes.label.data.attrs.for=id):"label"===this.tag&&(attrs.for=id)}return h(this.tag,{attrs:attrs},this.$slots.default)},props:{tag:{type:String,default:config.fieldTag},autoLabel:{type:Boolean,default:!0}}},defineProperty=function(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj},main={install:function(Vue){Vue.component(config.formComponent,vueForm),Vue.component(config.validateComponent,validate),Vue.component(config.messagesComponent,messages),Vue.component(config.fieldComponent,field),Vue.directive("vue-form-validator",vueFormValidator)},config:config,addValidator:function(key,fn){validators[key]=fn},mixin:{components:(_components={},defineProperty(_components,config.formComponent,vueForm),defineProperty(_components,config.validateComponent,validate),defineProperty(_components,config.messagesComponent,messages),defineProperty(_components,config.fieldComponent,field),_components),directives:{vueFormValidator:vueFormValidator}}};return main});

package.json

 {
   "name": "vue-form",
-  "version": "3.0.1",
+  "version": "3.1.1",
   "description": "Form validation for Vue.js",
@@ -5,0 +5,0 @@ "main": "dist/vue-form.js",

src/components/messages.js

@@ -23,22 +23,28 @@ import { config } from '../config';
       Object.keys(field.$error).forEach((key) => {
-        if(this.autoLabel) {
-          const label = findLabel(this.$slots[key]);
-          if(label) {
-            label.data = label.data || {};
-            label.data.attrs = label.data.attrs || {};
-            label.data.attrs.for = field._id;
+        if(this.$slots[key] || this.$scopedSlots[key]) {
+          const out = this.$slots[key] || this.$scopedSlots[key](field);
+          if(this.autoLabel) {
+            const label = findLabel(out);
+            if(label) {
+              label.data = label.data || {};
+              label.data.attrs = label.data.attrs || {};
+              label.data.attrs.for = field._id;
+            }
           }
+          children.push(out);
         }
-        children.push(this.$slots[key]);
       });
       if(!children.length) {
-        if(this.autoLabel) {
-          const label = findLabel(this.$slots.default);
-          if(label) {
-            label.data = label.data || {};
-            label.data.attrs = label.data.attrs || {};
-            label.data.attrs.for = field._id;
+        if(this.$slots.default || this.$scopedSlots.default) {
+          const out = this.$slots.default || this.$scopedSlots.default(field);
+          if(this.autoLabel) {
+            const label = findLabel(out);
+            if(label) {
+              label.data = label.data || {};
+              label.data.attrs = label.data.attrs || {};
+              label.data.attrs.for = field._id;
+            }
           }
+          children.push(out);
         }
-        children.push(this.$slots.default);
       }
@@ -45,0 +51,0 @@ }

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

122070

increased by2.36%

Number of package files

27

increased by3.85%

Lines of code

2333

increased by0.56%

No dependency changes