UNPKG

vue-form

Version:

Form validation for Vue.js

2 lines (1 loc) 16.7 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.VueForm=e()}(this,function(){"use strict";function t(t,e){var n;return n={},F(n,t.dirty,e.$dirty),F(n,t.pristine,e.$pristine),F(n,t.valid,e.$valid),F(n,t.invalid,e.$invalid),F(n,t.touched,e.$touched),F(n,t.untouched,e.$untouched),F(n,t.focused,e.$focused),F(n,t.pending,e.$pending),F(n,t.submitted,e.$submitted),n}function e(t,e){t.classList?t.classList.add(e):t.className+=" "+e}function n(t,e){t.classList?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\b)"+e.split(" ").join("|")+"(\\b|$)","gi")," ")}function a(t){return t.model?t.model.value:t.directives.filter(function(t){return"model"===t.name})[0].value}function i(t,e){function n(t){for(var i=0;i<t.length;i++){var o=t[i];if(o.componentOptions&&o.componentOptions.tag===s(e.messagesComponent)&&(a.messages=o),"label"!==o.tag||a.label||(a.label=o),o.data)if(o.data.model)a.vModel.push(o);else if(o.data.directives){var r=o.data.directives.filter(function(t){return"model"===t.name});r.length&&a.vModel.push(o)}o.children?n(o.children):o.componentOptions&&o.componentOptions.children&&n(o.componentOptions.children)}}var a={vModel:[],label:null,messages:null};return t?(n(t),a):a}function o(t){return t.data&&t.data.attrs&&t.data.attrs.name?t.data.attrs.name:t.componentOptions&&t.componentOptions.propsData&&t.componentOptions.propsData.name?t.componentOptions.propsData.name:void 0}function s(t){return t.replace(j,"$1-$2").replace(j,"$1-$2").toLowerCase()}function r(){return Math.random().toString(36).substr(2,10)}function u(t,e,n){var a;return function(){var i=this,o=arguments,s=function(){a=null,n||t.apply(i,o)},r=n&&!a;clearTimeout(a),a=setTimeout(s,e),r&&t.apply(i,o)}}function d(t,e){var n="",a="";return Object.keys(t).sort().filter(function(e){return"function"!=typeof t[e]}).forEach(function(e){return n+=t[e]}),Object.keys(e).sort().filter(function(e){return"function"!=typeof t[e]}).forEach(function(t){return a+=e[t]}),n!==a}function l(t){if(t)for(var e=0;e<t.length;e++){var n=t[e];if("label"===n.tag)return t[e];if(t[e].children)return l(t[e].children)}}function f(t,e,n){Object.keys(t).forEach(function(a){var i="type"===a?t[a].toLowerCase():a.toLowerCase();e[i]&&!n[i]&&(n[i]=e[i])})}function c(t,e,n){var i=!1,o=t.data.attrs||{},s=e.data.attrs||{},r={};if(a(t.data)!==a(e.data)&&(r.vModel=!0,i=!0),Object.keys(n).forEach(function(t){o[t]!==s[t]&&(r[t]=!0,i=!0)}),t.componentOptions&&t.componentOptions.propsData){var u=t.componentOptions.propsData,d=e.componentOptions.propsData;Object.keys(n).forEach(function(t){u[t]!==d[t]&&(r[t]=!0,i=!0)})}if(i)return r}function m(t){var e,n=L(!0,{},y,t);this.provide=function(){return F({},S,n)},this.components=(e={},F(e,n.formComponent,T),F(e,n.messagesComponent,A),F(e,n.validateComponent,z),F(e,n.fieldComponent,q),e),this.directives={vueFormValidator:B}}var v=/^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i,p=/^(http\:\/\/|https\:\/\/)(.{4,})$/,h=function(t,e,n){return v.test(t)};h._allowNulls=!0;var $=function(t,e,n){return!isNaN(t)};$._allowNulls=!0;var b=function(t,e,n){return p.test(t)};b._allowNulls=!0;var g={email:h,number:$,url:b,required:function(t,e,n){return!1===e||(0===t||(!(!(n.data.attrs&&void 0!==n.data.attrs.bool||n.componentOptions&&n.componentOptions.propsData&&void 0!==n.componentOptions.propsData.bool)||!1!==t)||(Array.isArray(t)?!!t.length:!!t)))},minlength:function(t,e){return t.length>=e},maxlength:function(t,e){return e>=t.length},pattern:function(t,e){return new RegExp("^"+e+"$").test(t)},min:function(t,e,n){return"number"==(n.data.attrs.type||"").toLowerCase()?+t>=+e:t>=e},max:function(t,e,n){return"number"==(n.data.attrs.type||"").toLowerCase()?+e>=+t:e>=t}},y={validators:g,formComponent:"vueForm",formTag:"form",messagesComponent:"fieldMessages",messagesTag:"div",showMessages:"",validateComponent:"validate",validateTag:"div",fieldComponent:"field",fieldTag:"div",formClasses:{dirty:"vf-form-dirty",pristine:"vf-form-pristine",valid:"vf-form-valid",invalid:"vf-form-invalid",touched:"vf-form-touched",untouched:"vf-form-untouched",focused:"vf-form-focused",submitted:"vf-form-submitted",pending:"vf-form-pending"},validateClasses:{dirty:"vf-field-dirty",pristine:"vf-field-pristine",valid:"vf-field-valid",invalid:"vf-field-invalid",touched:"vf-field-touched",untouched:"vf-field-untouched",focused:"vf-field-focused",submitted:"vf-field-submitted",pending:"vf-field-pending"},inputClasses:{dirty:"vf-dirty",pristine:"vf-pristine",valid:"vf-valid",invalid:"vf-invalid",touched:"vf-touched",untouched:"vf-untouched",focused:"vf-focused",submitted:"vf-submitted",pending:"vf-pending"},Promise:"function"==typeof Promise?Promise:null},_=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},O=function(){function t(t,e){for(var n=0;n<e.length;n++){var a=e[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}return function(e,n,a){return n&&t(e.prototype,n),a&&t(e,a),e}}(),F=function(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t},C=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)},w=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},j=/([^-])([A-Z])/g,S="VueFormProviderConfig"+r(),N="VueFormProviderState"+r(),E="VueFormProviderParentForm"+r(),V=Object.prototype.hasOwnProperty,P=Object.prototype.toString,D=function(t){return"function"==typeof Array.isArray?Array.isArray(t):"[object Array]"===P.call(t)},k=function(t){if(!t||"[object Object]"!==P.call(t))return!1;var e=V.call(t,"constructor"),n=t.constructor&&t.constructor.prototype&&V.call(t.constructor.prototype,"isPrototypeOf");if(t.constructor&&!e&&!n)return!1;var a;for(a in t);return void 0===a||V.call(t,a)},L=function t(){var e,n,a,i,o,s,r=arguments[0],u=1,d=arguments.length,l=!1;for("boolean"==typeof r&&(l=r,r=arguments[1]||{},u=2),(null==r||"object"!=typeof r&&"function"!=typeof r)&&(r={});u<d;++u)if(null!=(e=arguments[u]))for(n in e)a=r[n],i=e[n],r!==i&&(l&&i&&(k(i)||(o=D(i)))?(o?(o=!1,s=a&&D(a)?a:[]):s=a&&k(a)?a:{},r[n]=t(l,s,i)):void 0!==i&&(r[n]=i));return r},T={render:function(t){var e=this;return t(this.tag||this.vueFormConfig.formTag,{on:{submit:function(t){e.state.$pending?(t.preventDefault(),e.vueFormConfig.Promise.all(e.promises).then(function(){e.state._submit(),e.$emit("submit",t),e.promises=[]})):(e.state._submit(),e.$emit("submit",t))},reset:function(t){e.state._reset(),e.$emit("reset",t)}},class:this.className,attrs:{novalidate:""}},[this.$slots.default])},props:{state:{type:Object,required:!0},tag:String,showMessages:String},inject:{vueFormConfig:S},provide:function(){var t;return t={},F(t,N,this.state),F(t,E,this),t},data:function(){return{promises:[]}},created:function(){var t=this;if(this.state){var e={},n=this.state,a={$dirty:!1,$pristine:!0,$valid:!0,$invalid:!1,$submitted:!1,$touched:!1,$untouched:!0,$focused:!1,$pending:!1,$error:{},$submittedState:{},_id:"",_submit:function(){t.state.$submitted=!0,t.state._cloneState()},_cloneState:function(){var e=JSON.parse(JSON.stringify(n));delete e.$submittedState,Object.keys(e).forEach(function(n){t.$set(t.state.$submittedState,n,e[n])})},_addControl:function(a){e[a.$name]=a,t.$set(n,a.$name,a)},_removeControl:function(n){delete e[n.$name],t.$delete(t.state,n.$name),t.$delete(t.state.$error,n.$name)},_validate:function(){Object.keys(e).forEach(function(t){e[t]._validate()})},_reset:function(){n.$submitted=!1,n.$pending=!1,n.$submittedState={},Object.keys(e).forEach(function(t){var n=e[t];n._hasFocused=!1,n._setUntouched(),n._setPristine(),n.$submitted=!1,n.$pending=!1})}};Object.keys(a).forEach(function(e){t.$set(t.state,e,a[e])}),this.$watch("state",function(){var a=!1,i=!0,o=!1,s=!1,r=!1;Object.keys(e).forEach(function(u){var d=e[u];d.$submitted=n.$submitted,d.$dirty&&(a=!0),d.$touched&&(o=!0),d.$focused&&(s=!0),d.$pending&&(r=!0),d.$valid?t.$delete(n.$error,d.$name):(i=!1,t.$set(n.$error,d.$name,d))}),n.$dirty=a,n.$pristine=!a,n.$touched=o,n.$untouched=!o,n.$focused=s,n.$valid=i,n.$invalid=!i,n.$pending=r},{deep:!0,immediate:!0})}},computed:{className:function(){return t(this.vueFormConfig.formClasses,this.state)}},methods:{reset:function(){this.state._reset()},validate:function(){this.state._validate()}}},x="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},M=function(t,e){return e={exports:{}},t(e,e.exports),e.exports}(function(t){(function(){var e={}.hasOwnProperty,n=[].slice;t.exports=function(t,a){var i,o,s,r;o=[],r=[];for(i in a)e.call(a,i)&&(s=a[i],"this"!==i&&(o.push(i),r.push(s)));return Function.apply(null,n.call(o).concat(["return eval("+JSON.stringify(t)+")"])).apply(a.this,r)}}).call(x)}),A={inject:{vueFormConfig:S,vueFormState:N,vueFormParentForm:E},render:function(t){var e=this,n=[],a=this.formstate[this.fieldname];if(a&&a.$error&&this.isShown&&(Object.keys(a.$error).forEach(function(t){if(e.$slots[t]||e.$scopedSlots[t]){var i=e.$slots[t]||e.$scopedSlots[t](a);if(e.autoLabel){var o=l(i);o&&(o.data=o.data||{},o.data.attrs=o.data.attrs||{},o.data.attrs.for=a._id)}n.push(i)}}),!n.length&&a.$valid&&(this.$slots.default||this.$scopedSlots.default))){var i=this.$slots.default||this.$scopedSlots.default(a);if(this.autoLabel){var o=l(i);o&&(o.data=o.data||{},o.data.attrs=o.data.attrs||{},o.data.attrs.for=a._id)}n.push(i)}return t(this.tag||this.vueFormConfig.messagesTag,n)},props:{state:Object,name:String,show:{type:String,default:""},tag:{type:String},autoLabel:Boolean},data:function(){return{formstate:null,fieldname:""}},created:function(){this.fieldname=this.name,this.formstate=this.state||this.vueFormState},computed:{isShown:function(){var t=this.formstate[this.fieldname],e=this.show||this.vueFormParentForm.showMessages||this.vueFormConfig.showMessages;return!e||!t||M(e,t)}}},z={render:function(t){var e=this,n=i(this.$slots.default,this.vueFormConfig),a=n.vModel,s={for:null};if(a.length){if(this.name=o(a[0]),n.messages&&this.$nextTick(function(){var t=n.messages.componentInstance;t&&(t.fieldname=t.fieldname||e.name)}),this.autoLabel){var r=a[0].data.attrs.id||this.fieldstate._id;this.fieldstate._id=r,a[0].data.attrs.id=r,n.label?(n.label.data=n.label.data||{},n.label.data.attrs=n.label.data.attrs||{},n.label.data.attrs.for=r):"label"===this.tag&&(s.for=r)}a.forEach(function(t){t.data.directives||(t.data.directives=[]),t.data.directives.push({name:"vue-form-validator",value:{fieldstate:e.fieldstate,config:e.vueFormConfig}}),t.data.attrs["vue-form-validator"]="",t.data.attrs.debounce=e.debounce})}return t(this.tag||this.vueFormConfig.validateTag,{class:this.className,attrs:s},this.$slots.default)},props:{state:Object,custom:null,autoLabel:Boolean,tag:{type:String},debounce:Number},inject:{vueFormConfig:S,vueFormState:N,vueFormParentForm:E},data:function(){return{name:"",formstate:null,fieldstate:{}}},methods:{getClasses:function(e){var n=this.fieldstate;return Object.keys(n.$error).reduce(function(t,n){return t[e.invalid+"-"+s(n)]=!0,t},t(e,n))}},computed:{className:function(){return this.getClasses(this.vueFormConfig.validateClasses)},inputClassName:function(){return this.getClasses(this.vueFormConfig.inputClasses)}},mounted:function(){var t=this;this.fieldstate.$name=this.name,this.formstate._addControl(this.fieldstate);var a=this.$el.querySelectorAll("[vue-form-validator]");this.$watch("inputClassName",function(i,o){for(var s,r=void 0,u=0;s=a[u++];)!function(t,a){o&&Object.keys(o).filter(function(t){return o[t]}).forEach(function(t){return n(a,t)}),r=[],Object.keys(i).filter(function(t){return i[t]}).forEach(function(t){r.push(t),e(a,t)})}(0,s);t.fieldstate._className=r},{deep:!0,immediate:!0})},created:function(){var t=this;this.formstate=this.state||this.vueFormState;var e=this,n=[],i=void 0,o=void 0;this.fieldstate={$name:"",$dirty:!1,$pristine:!0,$valid:!0,$invalid:!1,$touched:!1,$untouched:!0,$focused:!1,$pending:!1,$submitted:!1,$error:{},_className:null,_id:"vf"+r(),_setValidatorVadility:function(t,n){n?e.$delete(this.$error,t):e.$set(this.$error,t,!0)},_setValidity:function(t){this.$valid=t,this.$invalid=!t},_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(t){this.$focused="boolean"==typeof t&&t,this.$focused?this._setHasFocused():this._setTouched()},_setHasFocused:function(){this._hasFocused=!0},_hasFocused:!1,_validators:{},_validate:function(t){var s=this;t?o=t:t=o,this.$pending=!0;var r=!0,u=!1,d=a(t.data);i=d;var l={promises:[],names:[]};n.push(l);var f=t.data.attrs||{},c=t.componentInstance;c&&c._vfValidationData_&&(f=L({},f,c._vfValidationData_));var m=t.componentOptions&&t.componentOptions.propsData?t.componentOptions.propsData:{};Object.keys(this._validators).forEach(function(n){if((""===d||void 0===d||null===d)&&"required"!==n)return s._setValidatorVadility(n,!0),void(u=!0);var a=void 0!==f[n]?f[n]:m[n],i="function"==typeof s._validators[n];if(!i||null!==a&&void 0!==a||s._validators[n]._allowNulls){var o=i?s._validators[n](d,a,t):e.custom[n];"boolean"==typeof o?o?s._setValidatorVadility(n,!0):(r=!1,s._setValidatorVadility(n,!1)):(l.promises.push(o),l.names.push(n),e.vueFormParentForm.promises.push(o))}}),l.promises.length?e.vueFormConfig.Promise.all(l.promises).then(function(t){l===n[n.length-1]&&(n=[],t.forEach(function(t,e){var n=l.names[e];t?s._setValidatorVadility(n,!0):(r=!1,s._setValidatorVadility(n,!1))}),s._setValidity(r),s.$pending=!1)}):(this._setValidity(r),this.$pending=!1)}},this.custom&&Object.keys(this.custom).forEach(function(e){"function"==typeof t.custom[e]?(t.custom[e]._allowNulls=!0,t.fieldstate._validators[e]=t.custom[e]):t.fieldstate._validators[e]=t.custom[e]}),this.$watch("custom",function(e,n){n&&d(e,n)&&t.fieldstate._validate()},{deep:!0})},destroyed:function(){this.formstate._removeControl(this.fieldstate)}},q={inject:{vueFormConfig:S},render:function(t){var e=i(this.$slots.default,this.vueFormConfig),n=e.vModel,a={for:null};if(n.length&&this.autoLabel){var o=n[0].data.attrs&&n[0].data.attrs.id||"vf"+r();n[0].data.attrs.id=o,e.label?(e.label.data=e.label.data||{},e.label.data.attrs=e.label.data.attrs={},e.label.data.attrs.for=o):"label"===this.tag&&(a.for=o)}return t(this.tag||this.vueFormConfig.fieldTag,{attrs:a},this.$slots.default)},props:{tag:{type:String},autoLabel:{type:Boolean,default:!0}}},I={},B={name:"vue-form-validator",bind:function(t,e,n){var a=e.value.fieldstate,i=e.value.config.validators,s=n.data.attrs||{};if(!o(n))return void console.warn("vue-form: name attribute missing");s.debounce&&(I[a._id]=u(function(t,e){t._hasFocused&&t._setDirty(),t._validate(e)},s.debounce)),f(s,i,a._validators),n.componentOptions&&n.componentOptions.propsData&&f(n.componentOptions.propsData,i,a._validators),a._validate(n),t.addEventListener("blur",function(){a._setFocused(!1)},!1),t.addEventListener("focus",function(){a._setFocused(!0)},!1);var r=n.componentInstance;r&&(r.$on("blur",function(){a._setFocused(!1)}),r.$on("focus",function(){a._setFocused(!0)}),t.addEventListener("focusout",function(){a._setFocused(!1)},!1),t.addEventListener("focusin",function(){a._setFocused(!0)},!1),r.$on("vf:validate",function(t){r._vfValidationData_||f(t,i,a._validators),r._vfValidationData_=t,a._validate(r.$vnode)}))},update:function(t,e,n,a){var i=e.value.config.validators,o=c(n,a,i),s=e.value.fieldstate,r=n.data.attrs||{},u=n.componentInstance;u&&u._vfValidationData_&&(r=L({},r,u[u._vfValidationData_])),-1===n.elm.className.indexOf(s._className[0])&&(n.elm.className=n.elm.className+" "+s._className.join(" ")),o&&(o.vModel?r.debounce?(s.$pending=!0,I[s._id](s,n)):(s._hasFocused&&s._setDirty(),s._validate(n)):s._validate(n))}},J=function(t){function e(){return _(this,e),w(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return C(e,t),O(e,null,[{key:"install",value:function(t,e){t.mixin(new this(e))}},{key:"installed",get:function(){return!!this.install.done},set:function(t){this.install.done=t}}]),e}(m);return m.call(J),J.options=new J,J});