From 0b10fb9cb58c16dc6ee03e41ce0a0b521ea3a663 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn?= Date: Fri, 4 Jun 2021 17:42:32 +0200 Subject: [PATCH] adding --- demo/demo.js | 2 +- src/FormValidator.js | 12 +++++------- src/demo/demo.riot | 37 ------------------------------------- 3 files changed, 6 insertions(+), 45 deletions(-) delete mode 100644 src/demo/demo.riot diff --git a/demo/demo.js b/demo/demo.js index 64d5f14..f99d1a1 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -1,6 +1,6 @@ (()=>{var t={2:(t,e,n)=>{"use strict";function r(t){return t.replace(/-(\w)/g,((t,e)=>e.toUpperCase()))}function i(t,e){t.firstChild&&(e.appendChild(t.firstChild),i(t,e))}function o(t){Array.from(t).forEach(s)}const s=t=>t&&t.parentNode&&t.parentNode.removeChild(t),a=(t,e)=>e&&e.parentNode&&e.parentNode.insertBefore(t,e),u=new Map,l=Symbol("riot-component"),c=new Set,f="is",d="mount",h="update",p="unmount",m="shouldUpdate",g="onBeforeMount",v="onMounted",b="onBeforeUpdate",y="onUpdated",E="onBeforeUnmount",x="onUnmounted",O="props",N="state",w="slots",T="root",j=Symbol.for("pure"),A=Symbol("parent"),S=Symbol("attributes"),M=Symbol("template");var _=Object.freeze({__proto__:null,COMPONENTS_IMPLEMENTATION_MAP:u,DOM_COMPONENT_INSTANCE_PROPERTY:l,PLUGINS_SET:c,IS_DIRECTIVE:f,VALUE_ATTRIBUTE:"value",MOUNT_METHOD_KEY:d,UPDATE_METHOD_KEY:h,UNMOUNT_METHOD_KEY:p,SHOULD_UPDATE_KEY:m,ON_BEFORE_MOUNT_KEY:g,ON_MOUNTED_KEY:v,ON_BEFORE_UPDATE_KEY:b,ON_UPDATED_KEY:y,ON_BEFORE_UNMOUNT_KEY:E,ON_UNMOUNTED_KEY:x,PROPS_KEY:O,STATE_KEY:N,SLOTS_KEY:w,ROOT_KEY:T,IS_PURE_SYMBOL:j,PARENT_KEY_SYMBOL:A,ATTRIBUTES_KEY_SYMBOL:S,TEMPLATE_KEY_SYMBOL:M});var D={EACH:0,IF:1,SIMPLE:2,TAG:3,SLOT:4};var P={ATTRIBUTE:0,EVENT:1,TEXT:2,VALUE:3};function C(t,e){return typeof t===e}function L(t){const e=t.ownerSVGElement;return!!e||null===e}function U(t){return!R(t.content)}function k(t){return C(t,"function")}function I(t){return!R(t)&&C(t,"object")}function R(t){return null==t}const z=Symbol("unmount"),V={nodes:[],mount(t,e){return this.update(t,e)},update(t,e){const{placeholder:n,nodes:r,childrenMap:i}=this,o=t===z?null:this.evaluate(t),u=o?Array.from(o):[],{newChildrenMap:l,batches:c,futureNodes:f}=(n.parentNode,function(t,e,n,r){const{condition:i,template:o,childrenMap:s,itemName:a,getKey:u,indexName:l,root:c,isTemplateTag:f}=r,d=new Map,h=[],p=[];return t.forEach(((t,r)=>{const m=function(t,e){let{itemName:n,indexName:r,index:i,item:o}=e;t[n]=o,r&&(t[r]=i);return t}(Object.create(e),{itemName:a,indexName:l,index:r,item:t}),g=u?u(m):r,v=s.get(g);if(function(t,e){return!!t&&!1===Boolean(t(e))}(i,m))return;const b=v?v.template:o.clone(),y=v?b.el:c.cloneNode(),E=!v,x=f&&E?function(t){const e=t.dom.cloneNode(!0);return{avoidDOMInjection:!0,fragment:e,children:Array.from(e.childNodes)}}(b):{};if(E?h.push((()=>b.mount(y,m,n,x))):h.push((()=>b.update(m,n))),f){const t=x.children||b.children;p.push(...t)}else p.push(y);s.delete(g),d.set(g,{template:b,context:m,index:r})})),{newChildrenMap:d,batches:h,futureNodes:p}}(u,t,e,this));return((t,e,n,r,i)=>{const o=n.length;let u=e.length,l=o,c=0,f=0,d=null;for(;ct-f){const i=r(e[c],0);for(;f{if(r<0){const n=t.pop();if(n){const{template:t,context:r}=n;t.unmount(r,e,null)}}return n}}(Array.from(i.values()),e),n),c.forEach((t=>t())),this.childrenMap=l,this.nodes=f,this},unmount(t,e){return this.update(z,e),this}};const F={mount(t,e){return this.update(t,e)},update(t,e){const n=!!this.evaluate(t),r=!this.value&&n,i=this.value&&!n,o=()=>{const n=this.node.cloneNode();a(n,this.placeholder),this.template=this.template.clone(),this.template.mount(n,t,e)};switch(!0){case r:o();break;case i:this.unmount(t);break;default:n&&this.template.update(t,e)}return this.value=n,this},unmount(t,e){return this.template.unmount(t,e,!0),this}};function K(t){throw new Error(t)}function B(t){return t.reduce(((t,e)=>{const{value:n,type:i}=e;switch(!0){case!e.name&&0===i:return Object.assign({},t,n);case 3===i:t.value=e.value;break;default:t[r(e.name)]=e.value}return t}),{})}const Y="removeAttribute",$="setAttribute",q="undefined"==typeof Element?{}:Element.prototype,H=function(t){const e=new Map,n=n=>(e.has(n)||e.set(n,t.call(this,n)))&&e.get(n);return n.cache=e,n}((t=>q.hasOwnProperty(t)));function G(t,e,n,r){let{name:i}=e;if(!i)return r&&function(t,e,n){const r=e?Object.keys(e):[];Object.keys(n).filter((t=>!r.includes(t))).forEach((e=>t.removeAttribute(e)))}(t,n,r),void(n&&function(t,e){Object.entries(e).forEach((e=>{let[n,r]=e;return G(t,{name:n},r)}))}(t,n));!H(i)&&(function(t){return C(t,"boolean")}(n)||I(n)||k(n))&&(t[i]=n),t[function(t){return R(t)||!1===t||""===t||I(t)||k(t)?Y:$}(n)](i,function(t,e){return!0===e?t:e}(i,n))}const X=/^on/,J={handleEvent(t){this[t.type](t)}},Z=new WeakMap;function W(t){return R(t)?"":t}const Q=(t,e)=>{const n=t.childNodes[e];if(n.nodeType===Node.COMMENT_NODE){const e=document.createTextNode("");return t.replaceChild(e,n),e}return n};var tt={0:G,1:function(t,e,n){let{name:r}=e;const i=r.replace(X,""),o=Z.get(t)||(t=>{const e=Object.create(J);return Z.set(t,e),e})(t),[s,a]=(t=>Array.isArray(t)?t:[t,!1])(n),u=o[i],l=s&&!u;u&&!s&&t.removeEventListener(i,o),l&&t.addEventListener(i,o,a),o[i]=s},2:function(t,e,n){t.data=W(n)},3:function(t,e,n){t.value=W(n)}};const et={mount(t){return this.value=this.evaluate(t),nt(this,this.value),this},update(t){const e=this.evaluate(t);return this.value!==e&&(nt(this,e),this.value=e),this},unmount(){return 1===this.type&&nt(this,null),this}};function nt(t,e){return tt[t.type](t.node,t,e,t.value)}function rt(t,e){return Object.assign({},et,e,{node:2===e.type?Q(t,e.childNodeIndex):t})}const it=(t,e)=>t[A]||e,ot={attributes:[],getTemplateScope(t,e){return function(t,e,n){if(!t||!t.length)return n;const r=t.map((t=>Object.assign({},t,{value:t.evaluate(e)})));return Object.assign(Object.create(n||null),B(r))}(this.attributes,t,e)},mount(t,e){const n=!!t.slots&&t.slots.find((t=>{let{id:e}=t;return e===this.name})),{parentNode:r}=this.node,i=it(t,e);return this.template=n&&mt(n.html,n.bindings).createDOM(r),this.template&&(this.template.mount(this.node,this.getTemplateScope(t,i),i),this.template.children=Array.from(this.node.childNodes),st(this.node)),s(this.node),this},update(t,e){if(this.template){const n=it(t,e);this.template.update(this.getTemplateScope(t,n),n)}return this},unmount(t,e,n){return this.template&&this.template.unmount(this.getTemplateScope(t,e),null,n),this}};function st(t){const e=t&&t.firstChild;e&&(a(e,t),st(t))}function at(t){return t.reduce(((t,e)=>{let{bindings:n}=e;return t.concat(n)}),[])}const ut={mount(t){return this.update(t)},update(t,e){const n=this.evaluate(t);return n===this.name?this.tag.update(t):(this.unmount(t,e,!0),this.name=n,this.tag=function(t,e,n){return void 0===e&&(e=[]),void 0===n&&(n=[]),t?t({slots:e,attributes:n}):mt(function(t){return t.reduce(((t,e)=>t+e.html),"")}(e),[...at(e),{expressions:n.map((t=>Object.assign({type:0},t)))}])}(this.getComponent(n),this.slots,this.attributes),this.tag.mount(this.node,t)),this},unmount(t,e,n){return this.tag&&this.tag.unmount(n),this}};var lt={1:function(t,e){let{evaluate:n,template:r}=e;const i=document.createTextNode("");return a(i,t),s(t),Object.assign({},F,{node:t,evaluate:n,placeholder:i,template:r.createDOM(t)})},2:function(t,e){let{expressions:n}=e;return Object.assign({},(r=n.map((e=>rt(t,e))),["mount","update","unmount"].reduce(((t,e)=>Object.assign({},t,{[e]:t=>r.map((n=>n[e](t)))&&i})),{})));var r,i},0:function(t,e){let{evaluate:n,condition:r,itemName:i,indexName:o,getKey:u,template:l}=e;const c=document.createTextNode(""),f=t.cloneNode();return a(c,t),s(t),Object.assign({},V,{childrenMap:new Map,node:t,root:f,condition:r,evaluate:n,isTemplateTag:U(f),template:l.createDOM(t),getKey:u,indexName:o,itemName:i,placeholder:c})},3:function(t,e){let{evaluate:n,getComponent:r,slots:i,attributes:o}=e;return Object.assign({},ut,{node:t,evaluate:n,slots:i,attributes:o,getComponent:r})},4:function(t,e){let{name:n,attributes:r}=e;return Object.assign({},ot,{attributes:r,node:t,name:n})}};function ct(t,e){return t.map((t=>2===t.type?Object.assign({},t,{childNodeIndex:t.childNodeIndex+e}):t))}function ft(t,e,n){const{selector:r,type:i,redundantAttribute:o,expressions:s}=e,a=r?t.querySelector(r):t;o&&a.removeAttribute(o);const u=s||[];return(lt[i]||lt[2])(a,Object.assign({},e,{expressions:n&&!r?ct(u,n):u}))}function dt(t,e){return L(t)?function(t,e){return e.ownerDocument.importNode((new window.DOMParser).parseFromString(`${t}`,"application/xml").documentElement,!0)}(e,t):function(t,e){const n=U(e)?e:document.createElement("template");return n.innerHTML=t,n.content}(e,t)}function ht(t,e){switch(!0){case L(t):i(e,t);break;case U(t):t.parentNode.replaceChild(e,t);break;default:t.appendChild(e)}}const pt=Object.freeze({createDOM(t){return this.dom=this.dom||function(t,e){return e&&("string"==typeof e?dt(t,e):e)}(t,this.html),this},mount(t,e,n,r){if(void 0===r&&(r={}),!t)throw new Error("Please provide DOM node to mount properly your template");this.el&&this.unmount(e);const{fragment:i,children:o,avoidDOMInjection:s}=r,{parentNode:a}=o?o[0]:t,u=U(t),l=u?Math.max(Array.from(a.childNodes).indexOf(t),0):null;return this.isTemplateTag=u,this.createDOM(t),this.dom&&(this.fragment=i||this.dom.cloneNode(!0)),this.el=this.isTemplateTag?a:t,this.children=this.isTemplateTag?o||Array.from(this.fragment.childNodes):null,!s&&this.fragment&&ht(t,this.fragment),this.bindings=this.bindingsData.map((t=>ft(this.el,t,l))),this.bindings.forEach((t=>t.mount(e,n))),this},update(t,e){return this.bindings.forEach((n=>n.update(t,e))),this},unmount(t,e,n){if(this.el){switch(this.bindings.forEach((r=>r.unmount(t,e,n))),!0){case this.el[j]:break;case this.children&&null!==n:o(this.children);break;case!0===n:s(this.el);break;case null!==n:o(this.el.childNodes)}this.el=null}return this},clone(){return Object.assign({},this,{el:null})}});function mt(t,e){return void 0===e&&(e=[]),Object.assign({},pt,{html:t,bindingsData:e})}function gt(){return this}function vt(t){return k(t)?t.prototype&&t.prototype.constructor?new t:t():t}function bt(t,e,n,r){return void 0===r&&(r={}),Object.defineProperty(t,e,Object.assign({value:n,enumerable:!1,writable:!1,configurable:!0},r)),t}function yt(t,e,n){return Object.entries(e).forEach((e=>{let[r,i]=e;bt(t,r,i,n)})),t}function Et(t,e){return Object.entries(e).forEach((e=>{let[n,r]=e;t[n]||(t[n]=r)})),t}function xt(t){return Array.isArray(t)?t:/^\[object (HTMLCollection|NodeList|Object)\]$/.test(Object.prototype.toString.call(t))&&"number"==typeof t.length?Array.from(t):[t]}function Ot(t,e){return xt("string"==typeof t?(e||document).querySelectorAll(t):t)}const Nt=t=>1===t.length?t[0]:t;function wt(t,e,n){const r="object"==typeof e?e:{[e]:n},i=Object.keys(r);return xt(t).forEach((t=>{i.forEach((e=>t.setAttribute(e,r[e])))})),t}function Tt(t,e){return function(t,e,n){const r="string"==typeof e?[e]:e;return Nt(xt(t).map((t=>Nt(r.map((e=>t[n](e)))))))}(t,e,"getAttribute")}const jt=new Map,At=()=>St||(wt(St=Ot("style[riot]")[0]||document.createElement("style"),"type","text/css"),St.parentNode||document.head.appendChild(St),St);var St,Mt={CSS_BY_NAME:jt,add(t,e){return jt.has(t)||(jt.set(t,e),this.inject()),this},inject(){return At().innerHTML=[...jt.values()].join("\n"),this},remove(t){return jt.has(t)&&(jt.delete(t),this.inject()),this}};function _t(t){for(var e=arguments.length,n=new Array(e>1?e-1:0),r=1;r(t[r(e.name)]=e.value,t)),{})}(t),vt(e))}const It=(t,e)=>t[l]=e;function Rt(t){return[d,h,p].reduce(((e,n)=>(e[n]=t(n),e)),{})}function zt(t){let{css:e,template:n,exports:r,name:i}=t;const o=n?function(t,e){return t(mt,P,D,(t=>e[t]||u.get(t)))}(n,r?function(t){void 0===t&&(t={});return Object.entries(vt(t)).reduce(((t,e)=>{let[n,r]=e; /* Riot v5.1.2, @license MIT */ -var i;return t[(i=n,i.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase())]=zt(r),t}),{})}(r.components):{}):Ut;return t=>{let{slots:s,attributes:a,props:u}=t;if(r&&r[j])return function(t,e){let{slots:n,attributes:r,props:i,css:o,template:s}=e;s&&K("Pure components can not have html"),o&&K("Pure components do not have css");const a=Et(t({slots:n,attributes:r,props:i}),Ct);return Rt((t=>function(){for(var e=arguments.length,n=new Array(e),r=0;rc.mount(t,n,e),update:(t,e)=>c.update(e,t),unmount:t=>c.unmount(t)}}}function Vt(t){let{css:e,template:n,componentAPI:r,name:i}=t;return e&&i&&Mt.add(i,e),_t(Kt)(yt(Et(r,Object.assign({},Lt,{[N]:{}})),Object.assign({[w]:null,[T]:null},Pt,{name:i,css:e,template:n})))}function Ft(t,e){return Object.assign({},t,vt(e))}function Kt(t,e){let{slots:n,attributes:r,props:i}=e;return o=function(t){return[...c].reduce(((t,e)=>e(t)||t),t)}(yt(Object.create(t),{mount(e,o,s){return void 0===o&&(o={}),this[S]=function(t,e){void 0===e&&(e=[]);const n=e.map((e=>rt(t,e))),r={};return Object.assign(r,Object.assign({expressions:n},Rt((t=>e=>(n.forEach((n=>n[t](e))),r)))))}(e,r).mount(s),bt(this,O,Object.freeze(Object.assign({},kt(e,i),B(this[S].expressions)))),this.state=Ft(this.state,o),this[M]=this.template.createDOM(e).clone(),It(e,this),t.name&&function(t,e){Dt(t)!==e&&wt(t,f,e)}(e,t.name),bt(this,T,e),bt(this,w,n),this.onBeforeMount(this.props,this.state),this[A]=s,this[M].mount(e,this,s),this.onMounted(this.props,this.state),this},update(t,e){void 0===t&&(t={}),e&&(this[A]=e,this[S].update(e));const n=B(this[S].expressions);if(!1!==this.shouldUpdate(n,this.props))return bt(this,O,Object.freeze(Object.assign({},this.props,n))),this.state=Ft(this.state,t),this.onBeforeUpdate(this.props,this.state),this[M].update(this,this[A]),this.onUpdated(this.props,this.state),this},unmount(t){return this.onBeforeUnmount(this.props,this.state),this[S].unmount(),this[M].unmount(this,this[A],null===t?null:!t),this.onUnmounted(this.props,this.state),this}})),Object.keys(t).filter((e=>k(t[e]))).forEach((t=>{o[t]=o[t].bind(o)})),o;var o}const{DOM_COMPONENT_INSTANCE_PROPERTY:Bt,COMPONENTS_IMPLEMENTATION_MAP:Yt,PLUGINS_SET:$t}=_;var qt=n(765),Ht=n.n(qt),Gt=n(422),Xt=n.n(Gt);function Jt(t,e){for(var n=0;n{this.dispatchCustomEvent(e,i,t.name)})),this.root.addEventListener("form-validation",(t=>{this.onFormValidation(t,n)}))},onFormValidation(t,e){t.detail?(this.state.errors=t.detail,e.classList.add("field--error"),e.classList.remove("field--valid")):(this.state.errors=[],e.classList.remove("field--error"),e.classList.add("field--valid")),this.update()},dispatchCustomEvent(t,e,n){const r=new CustomEvent("field-update",{detail:{name:n,value:t.target.value}});e.dispatchEvent(r)}},template:function(t,e,n,r){return t('
',[{type:n.IF,evaluate:function(t){return t.state.errors.length>0},redundantAttribute:"expr0",selector:"[expr0]",template:t('
',[{type:n.EACH,getKey:null,condition:null,template:t(" ",[{expressions:[{type:e.TEXT,childNodeIndex:0,evaluate:function(t){return[t.error].join("")}}]}]),redundantAttribute:"expr1",selector:"[expr1]",itemName:"error",indexName:null,evaluate:function(t){return t.state.errors}}])}])},name:"field-error"}),Ot("field-error").map((t=>function(t,e,n){const r=n||Dt(t);return u.has(r)||K(`The component named "${r}" was never registered`),u.get(r)({props:e}).mount(t)}(t,Wt,Qt)));new Zt("form",{email:{presence:!0,email:!0},password:{presence:!0}})},422:t=>{var e=/^(?:submit|button|image|reset|file)$/i,n=/^(?:input|select|textarea|keygen)/i,r=/(\[[^\[\]]*\])/g;function i(t,e,n){if(0===e.length)return t=n;var r=e.shift(),o=r.match(/^\[(.+?)\]$/);if("[]"===r)return t=t||[],Array.isArray(t)?t.push(i(null,e,n)):(t._values=t._values||[],t._values.push(i(null,e,n))),t;if(o){var s=o[1],a=+s;isNaN(a)?(t=t||{})[s]=i(t[s],e,n):(t=t||[])[a]=i(t[a],e,n)}else t[r]=i(t[r],e,n);return t}function o(t,e,n){if(e.match(r)){i(t,function(t){var e=[],n=new RegExp(r),i=/^([^\[\]]*)/.exec(t);for(i[1]&&e.push(i[1]);null!==(i=n.exec(t));)e.push(i[1]);return e}(e),n)}else{var o=t[e];o?(Array.isArray(o)||(t[e]=[o]),t[e].push(n)):t[e]=n}return t}function s(t,e,n){return n=n.replace(/(\r)?\n/g,"\r\n"),n=(n=encodeURIComponent(n)).replace(/%20/g,"+"),t+(t?"&":"")+encodeURIComponent(e)+"="+n}t.exports=function(t,r){"object"!=typeof r?r={hash:!!r}:void 0===r.hash&&(r.hash=!0);for(var i=r.hash?{}:"",a=r.serializer||(r.hash?o:s),u=t&&t.elements?t.elements:[],l=Object.create(null),c=0;c{},765:function(t,e,n){t=n.nmd(t), +var i;return t[(i=n,i.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase())]=zt(r),t}),{})}(r.components):{}):Ut;return t=>{let{slots:s,attributes:a,props:u}=t;if(r&&r[j])return function(t,e){let{slots:n,attributes:r,props:i,css:o,template:s}=e;s&&K("Pure components can not have html"),o&&K("Pure components do not have css");const a=Et(t({slots:n,attributes:r,props:i}),Ct);return Rt((t=>function(){for(var e=arguments.length,n=new Array(e),r=0;rc.mount(t,n,e),update:(t,e)=>c.update(e,t),unmount:t=>c.unmount(t)}}}function Vt(t){let{css:e,template:n,componentAPI:r,name:i}=t;return e&&i&&Mt.add(i,e),_t(Kt)(yt(Et(r,Object.assign({},Lt,{[N]:{}})),Object.assign({[w]:null,[T]:null},Pt,{name:i,css:e,template:n})))}function Ft(t,e){return Object.assign({},t,vt(e))}function Kt(t,e){let{slots:n,attributes:r,props:i}=e;return o=function(t){return[...c].reduce(((t,e)=>e(t)||t),t)}(yt(Object.create(t),{mount(e,o,s){return void 0===o&&(o={}),this[S]=function(t,e){void 0===e&&(e=[]);const n=e.map((e=>rt(t,e))),r={};return Object.assign(r,Object.assign({expressions:n},Rt((t=>e=>(n.forEach((n=>n[t](e))),r)))))}(e,r).mount(s),bt(this,O,Object.freeze(Object.assign({},kt(e,i),B(this[S].expressions)))),this.state=Ft(this.state,o),this[M]=this.template.createDOM(e).clone(),It(e,this),t.name&&function(t,e){Dt(t)!==e&&wt(t,f,e)}(e,t.name),bt(this,T,e),bt(this,w,n),this.onBeforeMount(this.props,this.state),this[A]=s,this[M].mount(e,this,s),this.onMounted(this.props,this.state),this},update(t,e){void 0===t&&(t={}),e&&(this[A]=e,this[S].update(e));const n=B(this[S].expressions);if(!1!==this.shouldUpdate(n,this.props))return bt(this,O,Object.freeze(Object.assign({},this.props,n))),this.state=Ft(this.state,t),this.onBeforeUpdate(this.props,this.state),this[M].update(this,this[A]),this.onUpdated(this.props,this.state),this},unmount(t){return this.onBeforeUnmount(this.props,this.state),this[S].unmount(),this[M].unmount(this,this[A],null===t?null:!t),this.onUnmounted(this.props,this.state),this}})),Object.keys(t).filter((e=>k(t[e]))).forEach((t=>{o[t]=o[t].bind(o)})),o;var o}const{DOM_COMPONENT_INSTANCE_PROPERTY:Bt,COMPONENTS_IMPLEMENTATION_MAP:Yt,PLUGINS_SET:$t}=_;var qt=n(765),Ht=n.n(qt),Gt=n(422),Xt=n.n(Gt);function Jt(t,e){for(var n=0;n{this.dispatchCustomEvent(e,i,t.name)})),this.root.addEventListener("form-validation",(t=>{this.onFormValidation(t,n)}))},onFormValidation(t,e){t.detail?(this.state.errors=t.detail,e.classList.add("field--error"),e.classList.remove("field--valid")):(this.state.errors=[],e.classList.remove("field--error"),e.classList.add("field--valid")),this.update()},dispatchCustomEvent(t,e,n){const r=new CustomEvent("field-update",{detail:{name:n,value:t.target.value}});e.dispatchEvent(r)}},template:function(t,e,n,r){return t('
',[{type:n.IF,evaluate:function(t){return t.state.errors.length>0},redundantAttribute:"expr0",selector:"[expr0]",template:t('
',[{type:n.EACH,getKey:null,condition:null,template:t(" ",[{expressions:[{type:e.TEXT,childNodeIndex:0,evaluate:function(t){return[t.error].join("")}}]}]),redundantAttribute:"expr1",selector:"[expr1]",itemName:"error",indexName:null,evaluate:function(t){return t.state.errors}}])}])},name:"field-error"}),Ot("field-error").map((t=>function(t,e,n){const r=n||Dt(t);return u.has(r)||K(`The component named "${r}" was never registered`),u.get(r)({props:e}).mount(t)}(t,Wt,Qt)));new Zt("form",{email:{presence:!0,email:!0},password:{presence:!0}})},422:t=>{var e=/^(?:submit|button|image|reset|file)$/i,n=/^(?:input|select|textarea|keygen)/i,r=/(\[[^\[\]]*\])/g;function i(t,e,n){if(0===e.length)return t=n;var r=e.shift(),o=r.match(/^\[(.+?)\]$/);if("[]"===r)return t=t||[],Array.isArray(t)?t.push(i(null,e,n)):(t._values=t._values||[],t._values.push(i(null,e,n))),t;if(o){var s=o[1],a=+s;isNaN(a)?(t=t||{})[s]=i(t[s],e,n):(t=t||[])[a]=i(t[a],e,n)}else t[r]=i(t[r],e,n);return t}function o(t,e,n){if(e.match(r)){i(t,function(t){var e=[],n=new RegExp(r),i=/^([^\[\]]*)/.exec(t);for(i[1]&&e.push(i[1]);null!==(i=n.exec(t));)e.push(i[1]);return e}(e),n)}else{var o=t[e];o?(Array.isArray(o)||(t[e]=[o]),t[e].push(n)):t[e]=n}return t}function s(t,e,n){return n=n.replace(/(\r)?\n/g,"\r\n"),n=(n=encodeURIComponent(n)).replace(/%20/g,"+"),t+(t?"&":"")+encodeURIComponent(e)+"="+n}t.exports=function(t,r){"object"!=typeof r?r={hash:!!r}:void 0===r.hash&&(r.hash=!0);for(var i=r.hash?{}:"",a=r.serializer||(r.hash?o:s),u=t&&t.elements?t.elements:[],l=Object.create(null),c=0;c{},765:function(t,e,n){t=n.nmd(t), /*! * validate.js 0.13.1 * diff --git a/src/FormValidator.js b/src/FormValidator.js index e2a2573..116fc78 100644 --- a/src/FormValidator.js +++ b/src/FormValidator.js @@ -74,19 +74,17 @@ class FormValidator */ onFieldUpdate(event) { - // if value is a empty string make him undefined + // workaround, make sure that value for single is undefined if it is empty if (event.detail.value == '') { event.detail.value = undefined } - let errors = validate.single(event.detail.value, this.constraits[event.detail.name]), - element + let errors = validate.single(event.detail.value, this.constraits[event.detail.name]) // search for element by name and dispatch event - Array.from(this.elements).every((e) => { - if (e.attributes.name.nodeValue == event.detail.name) { - this.dispatchCustomEvent(errors, e) - return false + this.elements.forEach((element) => { + if (element.attributes.name.nodeValue == event.detail.name) { + this.dispatchCustomEvent(errors, element) } }) } diff --git a/src/demo/demo.riot b/src/demo/demo.riot deleted file mode 100644 index 7bd8732..0000000 --- a/src/demo/demo.riot +++ /dev/null @@ -1,37 +0,0 @@ - -
{ state.validator.handle(event) }} novalidate> -
- - -
-
- - -
- -
- - -
\ No newline at end of file