vue-form - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

dist/vue-form.js

@@ -370,2 +370,7 @@ (function (global, factory) {
 
+var hyphenateRE = /([^-])([A-Z])/g;
+function hyphenate(str) {
+  return str.replace(hyphenateRE, '$1-$2').replace(hyphenateRE, '$1-$2').toLowerCase();
+}
+
 function compareChanges(vnode, oldvnode) {
@@ -466,3 +471,2 @@
     var changes = compareChanges(vnode, oldVNode);
-    var name = (vnode.data.attrs || {}).name;
     var fieldstate = binding.value;
@@ -554,3 +558,3 @@
       Object.keys(this.fieldstate.$error).forEach(function (error) {
-        out.push(config.invalidClass + '-' + error);
+        out.push(config.invalidClass + '-' + hyphenate(error));
       });
@@ -761,2 +765,1 @@
 })));
-//# sourceMappingURL=vue-form.js.map

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 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 getVModelNode(nodes){function traverse(nodes){for(var i=0;i<nodes.length;i++){var node=nodes[i];if(node.data)if(node.data.directives){var match=node.data.directives.filter(function(v){return"model"===v.name});match.length&&foundVnodes.push(node)}else node.data.model&&foundVnodes.push(node);node.children&&traverse(node.children)}}var foundVnodes=[];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 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 config={formComponent:"vueForm",errorComponent:"formError",errorsComponent:"formErrors",validateComponent:"validate",errorTag:"span",errorsTag:"div",classPrefix:"vf-",dirtyClass:"dirty",pristineClass:"pristine",validClass:"valid",invalidClass:"invalid",submittedClass:"submitted",touchedClass:"touched",untouchedClass:"untouched",pendingClass:"pending",Promise:window.Promise},errorMixin={computed:{isShown:function(){var field=this.formstate[this.field];if(!this.show||!field)return!0;if(this.show.indexOf("&&")>-1){var split=this.show.split("&&");return split.every(function(v){return field[v.trim()]})}if(this.show.indexOf("||")>-1){var _split=this.show.split("||");return _split.some(function(v){return field[v.trim()]})}return field[this.show]}}},formErrors={mixins:[errorMixin],render:function(h){var _this=this,children=[],field=this.formstate[this.field];return field&&field.$error&&this.isShown&&Object.keys(field.$error).forEach(function(key){children.push(_this.$slots[key])}),h(this.tag,children)},props:{state:Object,field:String,show:{type:String,default:""},tag:{type:String,default:config.errorsTag}},data:function(){return{formstate:{}}},mounted:function(){var _this2=this;this.$nextTick(function(){_this2.formstate=_this2.state||_this2.$parent.formstate||_this2.$parent.state})}},formError={mixins:[errorMixin],render:function(h){var field=this.formstate[this.field];if(field&&field.$error[this.error]&&this.isShown)return h(this.tag,[this.$slots.default])},props:{state:Object,field:String,error:String,show:{type:String,default:""},tag:{type:String,default:config.errorTag}},data:function(){return{formstate:{}}},mounted:function(){var _this=this;this.$nextTick(function(){_this.formstate=_this.state||_this.$parent.formstate||_this.$parent.state})}},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.$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:{},_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.$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=[];return this.state.$dirty?out.push(config.dirtyClass):out.push(config.pristineClass),this.state.$valid?out.push(config.validClass):out.push(config.invalidClass),this.state.$touched?out.push(config.touchedClass):out.push(config.untouchedClass),this.state.$submitted&&out.push(config.submittedClass),this.state.$pending&&out.push(config.pendingClass),out.map(function(v){return config.classPrefix+"form-"+v}).join(" ")}}},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]:attr,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=((vnode.data.attrs||{}).name,binding.value);changes&&(changes.vModel?(fieldstate._hasFocused&&fieldstate._setDirty(),fieldstate._validate(vnode)):fieldstate._validate(vnode))}},validate={render:function(h){var _this=this,foundVnodes=getVModelNode(this.$slots.default);return foundVnodes.length?(this.name=getName(foundVnodes[0]),foundVnodes.forEach(function(foundVnode){foundVnode.data.directives||(foundVnode.data.directives=[]),foundVnode.data.directives.push({name:"vue-form-validator",value:_this.fieldstate}),foundVnode.data.attrs["vue-form-validator"]=""})):console.warn("Element with v-model not found"),h(this.tag,{class:this.className.map(function(v){return config.classPrefix+"container-"+v})},this.$slots.default)},props:{state:Object,custom:null,tag:{type:String,default:"span"}},data:function(){return{name:"",formstate:{},fieldstate:{}}},computed:{className:function(){var out=[];return this.fieldstate.$dirty?out.push(config.dirtyClass):out.push(config.pristineClass),this.fieldstate.$valid?out.push(config.validClass):out.push(config.invalidClass),this.fieldstate.$touched?out.push(config.touchedClass):out.push(config.untouchedClass),this.fieldstate.$pending&&out.push(config.pendingClass),Object.keys(this.fieldstate.$error).forEach(function(error){out.push(config.invalidClass+"-"+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("className",function(value,oldValue){if(oldValue)for(var _loop=function(i){oldValue.forEach(function(v){return removeClass(vModelEls[i],config.classPrefix+v)})},i=0;i<vModelEls.length;i++)_loop(i);for(var _loop2=function(_i){value.forEach(function(v){return addClass(vModelEls[_i],config.classPrefix+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,$error:{},_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)}},main={install:function(Vue){Vue.component(config.formComponent,vueForm),Vue.component(config.validateComponent,validate),Vue.component(config.errorsComponent,formErrors),Vue.component(config.errorComponent,formError),Vue.directive("vue-form-validator",vueFormValidator)},config:config,addValidator:function(key,fn){validators[key]=fn},mixin:{components:{formErrors:formErrors,formError:formError,vueForm:vueForm,validate:validate},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 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 getVModelNode(nodes){function traverse(nodes){for(var i=0;i<nodes.length;i++){var node=nodes[i];if(node.data)if(node.data.directives){var match=node.data.directives.filter(function(v){return"model"===v.name});match.length&&foundVnodes.push(node)}else node.data.model&&foundVnodes.push(node);node.children&&traverse(node.children)}}var foundVnodes=[];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 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 config={formComponent:"vueForm",errorComponent:"formError",errorsComponent:"formErrors",validateComponent:"validate",errorTag:"span",errorsTag:"div",classPrefix:"vf-",dirtyClass:"dirty",pristineClass:"pristine",validClass:"valid",invalidClass:"invalid",submittedClass:"submitted",touchedClass:"touched",untouchedClass:"untouched",pendingClass:"pending",Promise:window.Promise},errorMixin={computed:{isShown:function(){var field=this.formstate[this.field];if(!this.show||!field)return!0;if(this.show.indexOf("&&")>-1){var split=this.show.split("&&");return split.every(function(v){return field[v.trim()]})}if(this.show.indexOf("||")>-1){var _split=this.show.split("||");return _split.some(function(v){return field[v.trim()]})}return field[this.show]}}},formErrors={mixins:[errorMixin],render:function(h){var _this=this,children=[],field=this.formstate[this.field];return field&&field.$error&&this.isShown&&Object.keys(field.$error).forEach(function(key){children.push(_this.$slots[key])}),h(this.tag,children)},props:{state:Object,field:String,show:{type:String,default:""},tag:{type:String,default:config.errorsTag}},data:function(){return{formstate:{}}},mounted:function(){var _this2=this;this.$nextTick(function(){_this2.formstate=_this2.state||_this2.$parent.formstate||_this2.$parent.state})}},formError={mixins:[errorMixin],render:function(h){var field=this.formstate[this.field];if(field&&field.$error[this.error]&&this.isShown)return h(this.tag,[this.$slots.default])},props:{state:Object,field:String,error:String,show:{type:String,default:""},tag:{type:String,default:config.errorTag}},data:function(){return{formstate:{}}},mounted:function(){var _this=this;this.$nextTick(function(){_this.formstate=_this.state||_this.$parent.formstate||_this.$parent.state})}},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.$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:{},_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.$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=[];return this.state.$dirty?out.push(config.dirtyClass):out.push(config.pristineClass),this.state.$valid?out.push(config.validClass):out.push(config.invalidClass),this.state.$touched?out.push(config.touchedClass):out.push(config.untouchedClass),this.state.$submitted&&out.push(config.submittedClass),this.state.$pending&&out.push(config.pendingClass),out.map(function(v){return config.classPrefix+"form-"+v}).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]:attr,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=getVModelNode(this.$slots.default);return foundVnodes.length?(this.name=getName(foundVnodes[0]),foundVnodes.forEach(function(foundVnode){foundVnode.data.directives||(foundVnode.data.directives=[]),foundVnode.data.directives.push({name:"vue-form-validator",value:_this.fieldstate}),foundVnode.data.attrs["vue-form-validator"]=""})):console.warn("Element with v-model not found"),h(this.tag,{class:this.className.map(function(v){return config.classPrefix+"container-"+v})},this.$slots.default)},props:{state:Object,custom:null,tag:{type:String,default:"span"}},data:function(){return{name:"",formstate:{},fieldstate:{}}},computed:{className:function(){var out=[];return this.fieldstate.$dirty?out.push(config.dirtyClass):out.push(config.pristineClass),this.fieldstate.$valid?out.push(config.validClass):out.push(config.invalidClass),this.fieldstate.$touched?out.push(config.touchedClass):out.push(config.untouchedClass),this.fieldstate.$pending&&out.push(config.pendingClass),Object.keys(this.fieldstate.$error).forEach(function(error){out.push(config.invalidClass+"-"+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("className",function(value,oldValue){if(oldValue)for(var _loop=function(i){oldValue.forEach(function(v){return removeClass(vModelEls[i],config.classPrefix+v)})},i=0;i<vModelEls.length;i++)_loop(i);for(var _loop2=function(_i){value.forEach(function(v){return addClass(vModelEls[_i],config.classPrefix+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,$error:{},_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)}},main={install:function(Vue){Vue.component(config.formComponent,vueForm),Vue.component(config.validateComponent,validate),Vue.component(config.errorsComponent,formErrors),Vue.component(config.errorComponent,formError),Vue.directive("vue-form-validator",vueFormValidator)},config:config,addValidator:function(key,fn){validators[key]=fn},mixin:{components:{formErrors:formErrors,formError:formError,vueForm:vueForm,validate:validate},directives:{vueFormValidator:vueFormValidator}}};return main});

package.json

 {
   "name": "vue-form",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Form validation for Vue.js",
@@ -28,4 +28,5 @@ "main": "dist/vue-form.js",
     "uglify-js": "^2.7.3",
-    "vue": "2.2.1"
+    "vue": "2.2.1",
+    "yargs": "^7.0.2"
   }
 }

rollup.config.js

 import babel from 'rollup-plugin-babel';
+import { argv } from 'yargs';
 
@@ -8,3 +9,3 @@ export default {
     moduleName: 'vueForm',
-    sourceMap: true,
+    sourceMap: argv.w,
     plugins: [
@@ -11,0 +12,0 @@ babel({

src/components/validate.js

 import { config } from '../config';
-import { getVModelNode, vModelValue, addClass, removeClass, getName } from '../util';
+import { getVModelNode, vModelValue, addClass, removeClass, getName, hyphenate } from '../util';
 import { validators } from '../validators';
@@ -61,3 +61,3 @@
       Object.keys(this.fieldstate.$error).forEach((error) => {
-        out.push(config.invalidClass + '-' + error);
+        out.push(config.invalidClass + '-' + hyphenate(error));
       });
@@ -64,0 +64,0 @@

src/directives/vue-form-validator.js

@@ -98,3 +98,2 @@ import { validators } from '../validators';
     const changes = compareChanges(vnode, oldVNode);
-    const name = (vnode.data.attrs || {}).name;
     const fieldstate = binding.value;
@@ -101,0 +100,0 @@

src/util.js

@@ -65,1 +65,9 @@ export function addClass(el, className) {
 }
+
+const hyphenateRE = /([^-])([A-Z])/g;
+export function hyphenate (str) {
+  return str
+    .replace(hyphenateRE, '$1-$2')
+    .replace(hyphenateRE, '$1-$2')
+    .toLowerCase()
+}

test/specs/vue-form.js

@@ -70,3 +70,3 @@ describe('vue-form', function() {
 
-          <validate :custom="{ 'custom-key': customValidator }">
+          <validate :custom="{ customKey: customValidator }">
             <input v-model="model.custom" name="custom" type="text"  />
@@ -289,7 +289,7 @@ </validate>
     expect(vm.formstate.custom.$valid).toBe(true);
-    expect(vm.formstate.custom.$error['custom-key']).toBeUndefined();
+    expect(vm.formstate.custom.$error.customKey).toBeUndefined();
     vm.model.custom = 'custom invalid value';
     vm.$nextTick(function() {
       expect(vm.formstate.custom.$valid).toBe(false);
-      expect(vm.formstate.custom.$error['custom-key']).toBe(true);
+      expect(vm.formstate.custom.$error.customKey).toBe(true);
       done();
@@ -317,2 +317,10 @@ });
 
+  it('should hyphenate camelcase validator names', function(done) {
+    vm.model.custom = 'custom invalid value';
+    vm.$nextTick(function() {
+      expect(vm.$el.querySelector('[name="custom"]').classList.contains('vf-invalid-custom-key')).toBe(true);
+      done();
+    });
+  });
+
   it('should validate checkbox array', (done) => {
@@ -319,0 +327,0 @@ expect(vm.formstate.multicheck.$valid).toBe(false);

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

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Lines of code

2013

increased by0.8%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

84792

decreased by-30.24%

Dev dependency count

16

increased by6.67%

Number of package files

24

decreased by-4%

No dependency changes